/* The landing (/): /engine/shell.css draws the handheld; this adds the access
   form that opens over its screen, and the page's text for whoever can't see the screen. */

/* the form sits on the screen like one of the console's windows: cream paper, indigo ink */
.screen-wrap { position: relative; }
.lform {
  position: absolute; inset: 4%; z-index: 3; display: grid; align-content: center; gap: 6%;
  padding: 4% 5%; background: #f4f2ea; color: #2a2770;
  box-shadow: 0 0 0 3px #5d58b8, 0 0 0 6px #1c1948;
  font: 600 clamp(11px, 1.6vw, 15px)/1.3 "Instrument Sans", system-ui, sans-serif;
  -webkit-user-select: text; user-select: text; touch-action: auto;
}
.lform[hidden] { display: none; }
.lform label { display: grid; gap: 3px; }
.lform input, .lform textarea {
  font: 400 16px/1.3 "Instrument Sans", system-ui, sans-serif; color: #1c1948; background: #fff; border: 0; padding: 6px 8px; width: 100%; resize: none;
  box-shadow: inset 0 2px 0 #d6d2e6, 0 0 0 2px #5d58b8;
}
.lform input:focus, .lform textarea:focus { outline: none; box-shadow: inset 0 2px 0 #d6d2e6, 0 0 0 2px #e8445c; }
.lform__row { display: flex; gap: 10px; flex-wrap: wrap; }
.lform button {
  font: 700 13px/1 "Instrument Sans", system-ui, sans-serif; letter-spacing: .06em; border: 0; padding: 8px 12px; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.lform button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.lform__send { background: #e8445c; color: #fff; }
.lform__close { background: #d6d2e6; color: #2a2770; }
.lform__send:disabled { opacity: .6; }
.lform__title { margin: 0; color: #e8445c; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lform__msg { margin: 0; min-height: 1.3em; font-weight: 600; }
.lform__msg.is-ok { color: #2f7a3a; }
.lform__msg.is-error { color: #c0283c; }

/* the text of every screen: hidden while the console runs, the whole page without scripts */
.js .outline { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.js), html:not(.js) body { overflow: auto; height: auto; }
html:not(.js) .room { display: none; }
.outline { max-width: 680px; margin: 0 auto; padding: 32px 20px; color: #e8e6ff; font: 400 17px/1.6 "Instrument Sans", system-ui, sans-serif; }
.outline a, .outline button { color: #5fd0ff; }
.outline button { background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

/* a phone's screen is too small to type on: the form comes out over the plastic */
@media (max-width: 700px), (max-height: 520px) {
  .lform { position: fixed; inset: 12px 12px auto; gap: 12px; padding: 18px 16px; font-size: 14px; z-index: 20; }
}

/* the music's switch, where /play has its full-screen one */
.mute {
  position: fixed; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 5;
  width: 34px; height: 34px; padding: 7px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .08); cursor: pointer; touch-action: manipulation;
}
.mute:focus { outline: none; }
.mute:focus-visible { outline: 2px solid var(--accent-2); }
.mute svg { display: block; width: 100%; height: 100%; }
.mute__spk { fill: rgba(255, 255, 255, .7); }
.mute__on, .mute__off { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.6; stroke-linecap: round; }
.mute__off, .mute.is-off .mute__on { display: none; }
.mute.is-off .mute__off { display: inline; stroke: var(--accent-1); }