/* =============================================================================
 * CLOUD NINE — floor chrome.
 *
 * Every colour here is lifted straight out of the room's own Blender materials
 * (source/build_arcade.py), so a panel floating in front of the arcade reads as
 * part of it rather than as a settings dialog that wandered in:
 *
 *   Midnight enamel  (.022 .035 .08)  -> --enamel
 *   Indigo wall      (.055 .065 .13)  -> --wall
 *   Mint neon        (.07  .85  .72)  -> --mint
 *   Coral neon       (.95  .12  .32)  -> --coral
 *   Honey yellow     (.98  .57  .06)  -> --honey
 *   Warm ivory       (.85  .86  .75)  -> --ivory
 *
 * Panels are frosted glass over the live room: the arcade keeps rendering
 * behind them, which is the whole reason the menus feel like they belong to
 * this game and not to the browser.
 * ========================================================================== */

:root {
  --enamel: #060910;
  --wall: #0e1122;
  --mint: #12d9b8;
  --coral: #f21e52;
  --honey: #fa9110;
  --ivory: #d9dbbf;
  --ink: #eef2ee;
  --muted: #8e9aa8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--enamel);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body { touch-action: none; }

/* Dragging to fly must never be read as dragging to select.
 *
 * `touch-action: none` above stops the browser scrolling and zooming, but it
 * says nothing about SELECTION: on a phone, a press-and-drag anywhere over the
 * HUD, the signs or the prompt still starts a text selection and pops the iOS
 * magnifier over the sky. Every label here is chrome — none of it is text
 * anyone wants to copy — so nothing on the page is selectable, and nothing
 * offers the long-press callout menu either. This is what fishtank does, and
 * for the same reason.
 *
 * On `body` rather than per-element: the canvas is the whole page and the DOM
 * over it is all HUD. There is not one input or piece of prose to opt back in,
 * which is worth saying out loud — add `user-select: text` to it explicitly if
 * one ever appears. */
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Stops Safari inflating the HUD's type when a phone is turned. */
  -webkit-text-size-adjust: 100%;
}

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: none;
}

/* A very faint scanline veil, the same trick the 2D launcher plays. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ---------- panels: frosted glass over the live room ---------- */

.card {
  position: fixed;
  z-index: 30;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  padding: clamp(22px, 5vw, 38px) clamp(20px, 5vw, 34px) clamp(20px, 4vw, 30px);
  text-align: center;
  border: 1px solid rgba(18, 217, 184, .28);
  border-radius: 20px;
  background:
    linear-gradient(160deg, rgba(14, 17, 34, .82), rgba(6, 9, 16, .9));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .5),
    0 30px 80px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* The back wall's sign, in type: wide-tracked caps under a mint glow. */
.sign {
  margin: 0;
  font-size: clamp(30px, 8vw, 46px);
  font-weight: 300;
  letter-spacing: .12em;
  color: #dffaf4;
  text-shadow: 0 0 18px rgba(18, 217, 184, .75), 0 0 46px rgba(18, 217, 184, .35);
}

.sign.small {
  font-size: clamp(20px, 5vw, 26px);
  letter-spacing: .3em;
}

.sub {
  margin: 4px 0 0;
  font-size: clamp(11px, 2.6vw, 13px);
  letter-spacing: .62em;
  text-indent: .62em;
  color: var(--ivory);
  opacity: .85;
}

.blurb {
  margin: 22px 0 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.line {
  margin: 22px 0 0;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--muted);
  min-height: 1.2em;
}

.fine {
  margin: 22px 0 0;
  font-size: 11.5px;
  line-height: 2.1;
  color: #6f7b88;
}

/* The boot card telling you why it never got going. */
.line.warn {
  color: #ffd3de;
  line-height: 1.7;
}

.line.warn code {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  color: var(--ivory);
  font-size: 12px;
}

kbd {
  display: inline-block;
  min-width: 1.5em;
  margin: 0 1px;
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .05);
  font: inherit;
  font-size: .92em;
  color: var(--ivory);
}

/* ---------- buttons: the cabinet's own marquee lettering ---------- */

.neon,
.ghost {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 15px 20px;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.neon {
  border: 1px solid rgba(18, 217, 184, .55);
  background: linear-gradient(180deg, rgba(18, 217, 184, .22), rgba(18, 217, 184, .07));
  color: #d9fff7;
  box-shadow: 0 0 22px rgba(18, 217, 184, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.neon:hover { background: linear-gradient(180deg, rgba(18, 217, 184, .34), rgba(18, 217, 184, .12)); }
.neon:active { transform: translateY(1px); }

.ghost {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 13px;
}

.ghost:hover { color: var(--ink); border-color: rgba(255, 255, 255, .24); }
.ghost[aria-pressed="false"] { color: #6a7480; }

/* A switch for something that is not there should look unavailable, not off. */
.ghost:disabled {
  color: #4d545d;
  border-style: dashed;
  cursor: not-allowed;
}

.ghost:disabled:hover { color: #4d545d; border-color: rgba(255, 255, 255, .12); }

#leave { color: rgba(242, 30, 82, .85); border-color: rgba(242, 30, 82, .3); }
#leave:hover { color: #ff5c85; border-color: rgba(242, 30, 82, .6); }

.neon:focus-visible,
.ghost:focus-visible,
.chip:focus-visible,
.pill button:focus-visible,
.tbtn:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

.pause .neon { margin-top: 22px; }

/* ---------- keeping the arcade: an offer, never a nag ----------
   The title card asks the whole question in one row: "Walk in" above it is
   play-in-the-browser, this is install, and the × is a real answer rather than
   a way of putting it off. js/install.js decides who ever sees it. */

.offer {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* .ghost is a full-width block button; inside the row it shares the width with
   the dismiss square and centres its glyph against its label. */
.offer .ghost {
  flex: 1 1 auto;
  width: auto;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.offer-mark {
  flex: none;
  width: 17px;
  height: 17px;
  opacity: .8;
}

.offer-hide {
  flex: none;
  width: 46px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  color: #6a7480;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

.offer-hide svg {
  display: block;
  width: 15px;
  height: 15px;
  margin: 0 auto;
}

.offer-hide:hover { color: var(--ink); border-color: rgba(255, 255, 255, .24); }
.offer-hide:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* The scrim. Frosted rather than opaque, so the sky keeps drifting behind the
   panel exactly as it does behind the title card — and so nothing underneath
   can be tapped by accident while the card is up, which is the one job a
   .card floating on its own cannot do. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
  background: rgba(4, 6, 12, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Centred by the scrim's flexbox instead of by the fixed-position trick every
   other card uses, so a tall panel on a short phone scrolls rather than having
   its top half go off the screen. */
.veil > .card {
  position: static;
  transform: none;
  margin: auto;
  max-height: 100%;
  overflow: auto;
}

.card.install {
  width: min(560px, calc(100vw - 32px));
  text-align: left;
}

.card.install .sign { text-align: center; }

.install-why {
  margin: 14px 0 18px;
  font-size: 13.5px;
  text-align: center;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
}

/* The drawing, lit like the mint neon on the back wall. */
.glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(18, 217, 184, .3);
  border-radius: 14px;
  background: rgba(18, 217, 184, .08);
  color: var(--mint);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 20px rgba(18, 217, 184, .14);
}

.glyph svg {
  display: block;
  width: 31px;
  height: 31px;
}

.step {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.step b { color: var(--ivory); font-weight: 600; }

.install-note {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
  color: #6f7b88;
}

/* ---------- floor HUD ---------- */

.hud {
  position: fixed;
  z-index: 20;
  top: max(12px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.hud-room { display: flex; flex-direction: column; gap: 2px; }

.hud-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .34em;
  color: rgba(223, 250, 244, .75);
  text-shadow: 0 0 14px rgba(18, 217, 184, .5);
}

.hud-where {
  font-size: 11.5px;
  letter-spacing: .22em;
  color: #ffe6c2;
  text-shadow: 0 0 14px rgba(250, 145, 16, .45);
}

.hud-count {
  font-size: 10.5px;
  letter-spacing: .18em;
  color: rgba(142, 154, 168, .8);
}

.chip {
  pointer-events: auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 11px;
  background: rgba(6, 9, 16, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ivory);
  font: inherit;
  font-size: 12px;
  letter-spacing: .1em;
  cursor: pointer;
}

.chip:hover { border-color: rgba(18, 217, 184, .5); color: #d9fff7; }

.hud-tools {
  display: flex;
  gap: 8px;
  pointer-events: none;
}

#fullscreen {
  font-size: 17px;
  line-height: 1;
}

/* ---------- turn your device sideways ----------
   Shown by media query alone, so a phone held upright gets the instruction
   even if the modules never ran. The button inside is screen.js's. */

.rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px;
  background: linear-gradient(170deg, #16233f, var(--enamel));
  color: var(--ink);
  text-align: center;
}

@media (pointer: coarse) and (orientation: portrait) {
  .rotate { display: flex; }
}

.rotate-art {
  width: min(46vw, 190px);
  height: auto;
}

.rotate-arrow { opacity: .9; }

.rotate-phone {
  transform-origin: 120px 120px;
  animation: tip 2.6s ease-in-out infinite;
}

@keyframes tip {
  0%, 45% { transform: rotate(0deg); }
  70%, 100% { transform: rotate(-90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rotate-phone { animation: none; transform: rotate(-90deg); }
}

.rotate h2 {
  margin: 20px 0 2px;
  font-size: clamp(20px, 6vw, 27px);
  font-weight: 400;
  letter-spacing: .06em;
  color: #dffaf4;
  text-shadow: 0 0 18px rgba(18, 217, 184, .5);
}

.rotate p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.rotate-go {
  width: auto;
  margin-top: 22px;
  padding: 13px 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.rotate-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: #ffd3de;
}

/* ---------- the machine callout ---------- */

.prompt {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 22px;
  border: 1px solid rgba(250, 145, 16, .4);
  border-radius: 14px;
  background: rgba(6, 9, 16, .68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 26px rgba(250, 145, 16, .2);
  pointer-events: none;
  animation: rise .22s ease-out;
}

@keyframes rise {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.prompt-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffe6c2;
  text-shadow: 0 0 16px rgba(250, 145, 16, .6);
}

.prompt-cue {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
}

/* ---------- the game, growing out of the CRT ---------- */

.cabinet {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  /* main.js sets the starting inset to the cabinet screen's rectangle on
     screen, then clears it, so the game opens out of the machine it lives in. */
  clip-path: inset(0 round 0);
  transition: clip-path .52s cubic-bezier(.4, 0, .2, 1);
}

/* Always the full viewport, so the game lays itself out for the size it will
   end up at; launcher.js scales it down for the moment it is on the cabinet's
   screen. Both properties transition together with the clip above. */
.cabinet iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  transform-origin: 50% 50%;
  transition: transform .52s cubic-bezier(.4, 0, .2, 1);
}

.pill {
  position: fixed;
  z-index: 51;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  transition: opacity .4s ease;
}

.pill.dim { opacity: .22; }
.pill:hover { opacity: 1; }

.pill button {
  padding: 9px 18px;
  border: 1px solid rgba(18, 217, 184, .35);
  border-radius: 999px;
  background: rgba(6, 9, 16, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #d9fff7;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  cursor: pointer;
}

.pill button:hover { border-color: var(--mint); }

/* ---------- touch controls ---------- */

.touch {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

.stick-zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52%;
  height: 62%;
  pointer-events: auto;
  touch-action: none;
}

.stick-base {
  position: absolute;
  width: 108px;
  height: 108px;
  margin: -54px 0 0 -54px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background: rgba(6, 9, 16, .3);
  opacity: .45;
  transition: opacity .18s ease, border-color .18s ease;
}

.stick-base.live { opacity: 1; border-color: rgba(18, 217, 184, .5); }

.stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(18, 217, 184, .9), rgba(18, 217, 184, .25));
  box-shadow: 0 0 18px rgba(18, 217, 184, .45);
}

.tbtn {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  width: 74px;
  height: 74px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  background: rgba(6, 9, 16, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ivory);
  font: inherit;
  font-size: 20px;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
}

/* Two buttons stacked at the right thumb: UP on the bottom, the contextual
   action above it. They used to be three, with sprint off to one side and a
   PLAY button appearing over the top of it — which meant the thumb had to
   find a different target depending on what the gopher happened to be near. */
/* UP on top, the action under it. That ordering is not decoration: in the air
   the action button IS a down arrow, and a down arrow sitting above an up
   arrow reads as a lie every time you glance at it. */
.tbtn-hop { bottom: max(116px, calc(env(safe-area-inset-bottom) + 116px)); }
.tbtn-action { bottom: max(28px, calc(env(safe-area-inset-bottom) + 28px)); }

/* At a machine the action button stops being a modifier and becomes the point
   of the whole arcade, so it says so and takes the cabinet's amber. */
.tbtn-action.is-play {
  width: 80px;
  height: 80px;
  border-color: rgba(250, 145, 16, .6);
  background: rgba(250, 145, 16, .18);
  color: #ffe6c2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}



.tbtn.active { border-color: var(--mint); background: rgba(18, 217, 184, .22); }

/* Tablets and phones get the sticks; the keyboard hints would only lie. */
@media (max-height: 520px) {
  .fine { display: none; }
  .card { padding: 18px 20px; }

  /* A phone held sideways is about 390px tall, and the pause menu now runs to
     five buttons. Tighten the stack rather than let the last one fall off the
     bottom of the screen — the same reasoning that hides the key hints above. */
  .pause .neon { margin-top: 14px; padding: 12px 18px; }
  .pause .ghost { margin-top: 8px; padding: 11px 16px; }

  /* Same squeeze on the install card. A phone on its side is about 390px tall
     and the guide is five blocks deep, so the drawings shrink and the type
     tightens until it fits — every word stays, because the whole point of the
     panel is the two sentences telling you which button to press. It scrolls
     below that rather than dropping anything. */
  .veil { padding: 8px; }
  .card.install { padding: 14px 18px; }
  .card.install .sign { font-size: 20px; }
  .card.install .ghost { margin-top: 8px; padding: 11px 16px; }
  .install-why { margin: 7px 0 9px; font-size: 12.5px; }
  .steps { gap: 7px; }
  .steps li { padding: 7px 10px; gap: 11px; }
  .glyph { width: 44px; height: 44px; border-radius: 12px; }
  .glyph svg { width: 25px; height: 25px; }
  .step { font-size: 13px; line-height: 1.5; }
  .install-note { margin-top: 8px; font-size: 11px; }
}


/* Transparent preview half overlays the world camera; the inventory stays separate. */
#customize-dialog {
  inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; color: #faf2df; background: transparent;
}
#customize-dialog[open] { display: grid; grid-template-columns: 58% 42%; }
#customize-dialog::backdrop { background: transparent; }
.outfit-preview { position: relative; min-width: 0; min-height: 0; }
.outfit-preview-heading { position: absolute; top: 28px; left: 28px; text-shadow: 0 2px 12px #102030; }
.outfit-eyebrow { font-size: 10px; letter-spacing: .17em; color: #a0e4d2; font-weight: 700; }
.outfit-preview h2 { margin: 6px 0; font-size: clamp(22px,4vw,40px); }
.outfit-turn { position: absolute; bottom: 32px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.outfit-turn span { font-size: 12px; text-shadow: 0 1px 5px #000; }
.outfit-turn button { width: 44px; height: 44px; border-radius: 50%; color: #fff; background: #173d48; border: 1px solid #80b9ab; font-size: 24px; }
.outfit-inventory { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: clamp(14px,3vw,34px); background: #10252bf5; border-left: 1px solid #466559; }
.outfit-inventory header h2 { font-size: clamp(24px,4vw,40px); margin: 5px 0 10px; }
.outfit-inventory header p { font-size: 13px; line-height: 1.5; color: #bad2cb; margin: 0 0 18px; }
/* The one thing on the page a finger is allowed to drag. `body` turns touch
   panning off wholesale so that flying the gopher is never read as scrolling
   the page, and a touch inherits the intersection of every ancestor's
   touch-action — so a scroll container under that body scrolls with a
   trackpad and a scrollbar and refuses to move under a thumb. It has to say
   so for itself, and contain the scroll rather than chain it to the sky. */
.outfit-items { overflow-y: auto; min-height: 0; touch-action: pan-y; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: max-content; gap: 10px; padding: 3px; align-content: start; }
.outfit-item { position: relative; box-sizing: border-box; min-width: 0; height: max-content; min-height: 112px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 8px; border-radius: 13px; border: 1px solid #45635b; background: #203a40; color: #fae7bb; font: inherit; font-size: 12px; cursor: pointer; }
.outfit-item svg { width: 45px; height: 45px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.outfit-item[aria-pressed="true"] { border: 2px solid #8defc4; background: #28574b; }
.outfit-item[aria-pressed="true"]::after { content: '✓'; position: absolute; right: 8px; top: 5px; color: #9af2c9; }
.outfit-item:focus-visible, .outfit-turn button:focus-visible { outline: 3px solid #f6cc78; outline-offset: 2px; }
.outfit-inventory footer { margin-top: auto; padding-top: 12px; }
.outfit-inventory footer button { width: 100%; margin-top: 8px; }
#outfit-count { font-size: 12px; margin: 0; color: #aae9d0; }
.customize-note { font-size: 10px; color: #b2c2be; margin: 10px 0 0; }
/* "Go straight in next time", under the two buttons that matter.
 *
 * Quieter than .ghost on purpose: it is a preference about the card, not one
 * of the things the card is asking, and a full-width uppercase button would
 * claim to be a third choice. Still a real <button> with aria-pressed and a
 * visible focus ring — looking like the game is not a licence to draw a
 * checkbox out of a <div>.
 *
 * The box is the state. A mint fill reads as ticked at a glance and needs no
 * glyph to say so, which matters at 15px where a drawn tick turns to mush. */
.skip-next {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* 44px of touch target on a phone, while the ink stays small. */
  min-height: 44px;
  margin: 12px auto 0;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .2s ease;
}

.skip-next::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .04);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.skip-next:hover { color: var(--ink); }
.skip-next[aria-pressed="true"] { color: var(--ink); }
.skip-next[aria-pressed="true"]::before {
  border-color: var(--mint);
  background: var(--mint);
  box-shadow: 0 0 10px rgba(18, 217, 184, .5);
}
.skip-next:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.dressing-room #hud, .dressing-room #touch { visibility: hidden; }

.item-photo { position: relative; display: grid; place-items: center; width: min(100%, 112px); height: 112px; flex: 0 0 112px; overflow: hidden; border-radius: 8px; background: #1a2e36; }
.item-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 6px; box-sizing: border-box; object-fit: contain; object-position: center; }
.item-photo-status { font-size: 10px; color: #b5cec5; padding: 8px; }
.outfit-item small { color: #aad2c3; font-size: 10px; }
.outfit-slots { font-size: 11px; line-height: 1.6; color: #bad2cb; margin: 0 0 12px; }

/* Mobile dresser: one scrolling card grid, with header and actions outside it.
   Explicit image heights and max-content rows prevent grid shrinkage from
   squeezing a card around an overflowing photo. No nested sidebar columns. */
@media (max-width: 1100px), (max-height: 600px) {
  #customize-dialog { overflow:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  #customize-dialog[open] { grid-template-columns:minmax(0,38%) minmax(0,62%); grid-template-rows:minmax(0,1fr); }
  .outfit-inventory {
    display:grid; grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto; gap:8px; overflow:hidden;
    padding:12px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) 12px;
  }
  .outfit-inventory header { min-width:0; }
  .outfit-inventory header h2 { font-size:24px; margin:3px 0 5px; }
  .outfit-inventory header p { font-size:12px; line-height:1.4; margin:0; }
  /* Each card already names its slot and announces its selected state. */
  .outfit-slots { display:none; }
  .outfit-items { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:max-content; gap:8px; padding:4px; }
  .outfit-item { min-height:116px; height:max-content; padding:8px 5px; gap:5px; font-size:12px; line-height:1.25; }
  .outfit-item > span:not(.item-photo) { max-width:100%; overflow-wrap:anywhere; text-align:center; }
  .outfit-item small { font-size:10px; line-height:1.2; }
  .item-photo { width:min(100%,64px); height:64px; flex:0 0 64px; }
  .item-photo-status { font-size:9px; padding:3px; line-height:1.3; }
  .outfit-inventory footer { margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 8px; }
  .outfit-inventory footer button { width:100%; min-width:0; min-height:44px; margin:0; padding:8px 6px; font-size:11px; letter-spacing:.06em; }
  #outfit-count, .customize-note { grid-column:1 / -1; }
  #outfit-count { font-size:11px; }
  .customize-note { margin:0; font-size:10px; }
  .outfit-preview-heading { top:12px; left:max(12px,env(safe-area-inset-left)); right:10px; }
  .outfit-preview h2 { font-size:24px; margin:3px 0; }
  .outfit-turn { bottom:max(12px,env(safe-area-inset-bottom)); gap:10px; }
  .outfit-turn span { display:none; }
  .outfit-turn button { width:44px; height:44px; }
}
@media (orientation:portrait) and (max-width:760px) {
  #customize-dialog[open] { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,32%) minmax(0,1fr); }
  .outfit-inventory { border-left:0; border-top:1px solid #466559; gap:6px; padding-top:8px; }
  .outfit-inventory header h2 { font-size:21px; }
  .outfit-inventory header p { font-size:11px; }
  .outfit-preview h2 { font-size:22px; }
  .outfit-turn { top:50%; bottom:auto; transform:translateY(-50%); justify-content:space-between; padding:0 12px; }
}
@media (orientation:landscape) and (max-height:600px) {
  .outfit-inventory { gap:6px; padding-top:8px; }
  .outfit-inventory header h2 { font-size:20px; margin:0 0 3px; }
  .outfit-inventory header p { font-size:11px; }
  .outfit-inventory header .outfit-eyebrow { display:none; }
  .outfit-item { min-height:104px; }
  .item-photo { width:min(100%,54px); height:54px; flex-basis:54px; }
  .outfit-preview h2 { font-size:21px; }
  .outfit-preview-heading { top:8px; }
}

/* Pet picker: bounded panes and a persistent footer on short landscape screens. */
body.choosing-pet #touch, body.choosing-pet #hud { visibility: hidden; }
#pets-dialog { box-sizing:border-box; padding:0; width:min(920px,96vw); max-width:none; height:min(650px,92dvh); max-height:96dvh; border:1px solid #6caaa0; border-radius:22px; background:#122d36; color:#fff5df; overflow:hidden; }
#pets-dialog[open] { display:grid; grid-template-columns:1fr 1fr; }
#pets-dialog::backdrop { background:#071924bd; }
.pet-preview { position:relative; min-width:0; min-height:0; overflow:hidden; }
.pet-preview canvas { display:block; width:100%; height:100%; touch-action:none; }
.pet-preview > span { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#aadccc; pointer-events:none; font-size:13px; }
.pet-picker { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:14px; padding:26px; }
.pet-picker h2 { font-size:36px; margin:0 0 8px; }
.pet-picker header p { margin:0 0 8px; font-size:14px; color:#bad0c9; }
.pet-picker .pet-eyebrow { font-size:11px; letter-spacing:.16em; color:#87ddbe; }
.pet-choices { overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:10px; padding:3px; }
.pet-choices button { flex:none; text-align:left; padding:14px; border:1px solid #547d79; background:#203f47; color:#fff5df; border-radius:12px; min-height:58px; }
.pet-choices strong,.pet-choices span { display:block; }
.pet-choices span { font-size:12px; margin-top:4px; color:#bdd5cc; }
.pet-choices button[aria-pressed="true"] { border-color:#95f5c6; background:#285c51; box-shadow:inset 0 0 0 1px #95f5c6; }
.pet-picker button:focus-visible { outline:3px solid #f5d78f; outline-offset:2px; }
.pet-picker footer p { margin:0 0 10px; font-size:12px; min-height:1.2em; }
.pet-picker footer button { min-height:44px; width:100%; border-radius:10px; background:#87dbb7; color:#102d30; font-weight:700; }
@media (max-width:600px) and (orientation:portrait) {
  #pets-dialog[open] { grid-template-columns:1fr; grid-template-rows:34% minmax(0,1fr); }
  .pet-picker { padding:14px 20px; gap:8px; }
  .pet-picker h2 { font-size:25px; }
  .pet-picker header p { font-size:12px; }
}
@media (max-height:500px) and (orientation:landscape) {
  #pets-dialog { width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  #pets-dialog[open] { grid-template-columns:42% 58%; }
  .pet-picker { padding:10px max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) 14px; gap:6px; }
  .pet-picker h2 { font-size:24px; margin:0 0 3px; }
  .pet-picker header p { font-size:11px; margin:0 0 3px; }
  .pet-picker .pet-eyebrow { display:none; }
  .pet-choices { gap:6px; }
  .pet-choices button { min-height:48px; padding:8px 12px; }
  .pet-picker footer p { margin:0 0 5px; }
}

body.reading-parents #touch, body.reading-parents #hud { visibility:hidden; }
#parents-dialog { box-sizing:border-box; width:min(940px,96vw); height:min(700px,92dvh); max-width:none; max-height:96dvh; padding:0; border:1px solid #93b7a9; border-radius:22px; overflow:hidden; background:#17343d; color:#fff4df; }
#parents-dialog[open] { display:grid; grid-template-columns:38% minmax(0,1fr); }
#parents-dialog::backdrop { background:#071824c9; }
/* #7e9dd6 is sampled from parents-gopher.png's own flat background, not picked
   by eye: the art is contained rather than cropped, so every edge of the panel
   is this colour butting against the same colour inside the image. A near miss
   draws the letterbox as a visible frame around the gopher. Re-sample if the
   portrait is ever redrawn. */
.parents-portrait { min-height:0; padding:16px; display:flex; align-items:center; justify-content:center; background:#7e9dd6; }
.parents-portrait img { width:100%; height:100%; object-fit:contain; min-height:0; }
.parents-panel { min-width:0; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; }
.parents-copy { overflow-y:auto; overscroll-behavior:contain; padding:30px; line-height:1.65; font-size:16px; user-select:text; }
.parents-copy h2 { font-size:30px; line-height:1.2; margin:8px 0 22px; }
.parents-copy p { margin:0 0 18px; }
.parents-copy .parents-eyebrow { font-size:11px; letter-spacing:.16em; color:#a7dfca; }
.parents-panel footer { padding:12px 24px max(16px,env(safe-area-inset-bottom)); border-top:1px solid #426069; }
.parents-panel button { min-height:44px; width:100%; border-radius:10px; background:#9bdec0; color:#15333b; font-weight:700; }
#parents-dialog :focus-visible { outline:3px solid #f5d799; outline-offset:-3px; }
@media (max-width:600px) and (orientation:portrait) {
  #parents-dialog[open] { grid-template-columns:1fr; grid-template-rows:29% minmax(0,1fr); }
  .parents-portrait { padding:8px; }
  .parents-copy { padding:18px 22px; }
  .parents-copy h2 { font-size:25px; }
}
@media (max-height:500px) and (orientation:landscape) {
  #parents-dialog { width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  #parents-dialog[open] { grid-template-columns:32% minmax(0,1fr); }
  .parents-copy { padding:16px max(22px,env(safe-area-inset-right)) 10px 20px; }
  .parents-copy h2 { font-size:24px; margin-bottom:14px; }
  .parents-panel footer { padding-top:8px; padding-bottom:max(8px,env(safe-area-inset-bottom)); }
}