/* AfterBedtime — touch (phones; public/js/touch.js). Every rule here is scoped to html.touch (index.html's inline script
   sets it before the first paint, main.js when the Settings switch it) or to the touch layer / overlays themselves, so
   a desktop with a mouse renders exactly as before. Reference screen: 844×390 landscape; also 667×375, 740×360 and
   844×340 (Safari with its bars). Sizes × --tb (Settings → Button size, × 0.85 on short screens). */
/* Everything below sits in `@layer classic`: an unlayered rule (the retro sheets retro-*.css) beats it whatever its specificity, so the retro
   interface can revert this whole sheet in one rule (retro-compat.css). Classic and Modern look exactly as before. The two dev-panel rules at
   the very end stay OUTSIDE the layer: those panels are styled by unlayered injected sheets, so the cascade between them must not change. */
@layer classic {
html:not(.touch) .touch-only { display: none !important; }
html.touch .desk-only { display: none !important; }
html:not(.touch) .dial-pad, html:not(.touch) #touch, html:not(.touch) #touch-rotate { display: none !important; }

html.touch {
  --T0: max(8px, env(safe-area-inset-top));
  --L0: max(12px, env(safe-area-inset-left));
  --R0: max(12px, env(safe-area-inset-right));
  --B0: max(12px, calc(env(safe-area-inset-bottom) + 4px));
  --tbU: 1;                       /* Settings → Button size (touch.js sets it on <html>) */
  --tb: var(--tbU);
}
@media (max-height: 360px) { html.touch { --tb: calc(var(--tbU) * 0.85); } }

/* ------------------------------------------------------------------ browser gestures */

html.touch, html.touch body { overscroll-behavior: none; }                 /* no pull-to-refresh on a look drag */
html.touch #game, #touch, #touch *, #touch-rotate { touch-action: none; }  /* no pan / pinch / double-tap zoom */
html.touch #ui { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
html.touch #ui input, html.touch #ui textarea { -webkit-user-select: text; user-select: text; }
html.touch button, html.touch summary, html.touch .click-to-play, html.touch label { touch-action: manipulation; }
html.touch #lobby, html.touch #end, html.touch .timeline, html.touch .settings-body { overscroll-behavior: contain; }
/* a blur over the live 3D view costs a phone GPU a full extra pass: a darker plain veil instead */
html.touch #lobby, html.touch #end, html.touch .settings-modal { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.touch #lobby { background-color: rgba(10, 14, 30, 0.82); }
html.touch #end, html.touch .settings-modal { background-color: rgba(10, 14, 30, 0.82); }

/* ------------------------------------------------------------------ keyboard-only things, hidden */

html.touch .legend, html.touch .legend-compact, html.touch .chip-key, html.touch .dial-keys,
html.touch #practice-sd, html.touch .practice kbd, html.touch .practice-head span, html.touch #hud-talk { display: none !important; }
/* fall: two more tools — three columns so the open panel still fits a 340 px high phone; the roofs' rules are the
   "Roof rules" button (a toast naming the buttons: Jump / Sneak / Use), not the small print */
html.touch .practice.open { width: 372px; }
html.touch .practice-group { grid-template-columns: 1fr 1fr 1fr; }
html.touch #practice-dawn { grid-column: auto; }
html.touch .practice-tip { display: none; }
html.touch .practice-body button.practice-rules[data-sb] { display: flex; }

/* ------------------------------------------------------------------ lobby */

html.touch .title { font-size: clamp(22px, 7.4vw, 34px); }                /* (the PS1 Courier font ran under the gear) */
html.touch .legend-touch { margin: 14px 0 0; padding-top: 12px; border-top: 2px dashed rgba(244, 236, 216, 0.12);
  font-size: 13px; line-height: 1.5; color: var(--cream-dim); text-align: center; }
html.touch .lobby-card { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }

/* ------------------------------------------------------------------ Tap to play / pause card: fits 340 px, scrolls */

html.touch .click-to-play { padding: max(12px, 6vh) 16px 12px; padding-top: max(12px, 6dvh); overflow-y: auto; align-items: flex-start; }
html.touch .ctp-card { padding: 14px 18px; margin: auto 0; }
html.touch .ctp-title { font-size: 26px; }
html.touch .ctp-role { margin: 4px 0 6px; font-size: 15px; }
html.touch .ctp-touch { margin: 0 0 4px; font-size: 13px; color: var(--cream-dim); }
html.touch .ctp-card .settings-open { margin-top: 10px; }
html.touch .leave-btn { margin-top: 10px; padding: 10px 18px; }
html.touch .countdown { font-size: clamp(56px, 16vh, 96px); top: 22%; }

/* ------------------------------------------------------------------ the HUD around the thumbs */

html.touch .hud-top { top: var(--T0); width: min(520px, calc(100vw - 2 * (max(var(--L0), var(--R0)) + 170px))); gap: 4px; }
html.touch .clock-pill { font-size: 22px; padding: 3px 14px 3px 10px; }
/* the objective: one short line */
html.touch .objective { font-size: 12px; line-height: 18px; padding: 1px 10px; }
/* the action line: at the very bottom, between the thumbs; never wider than the gap between the stick and the button
   cluster (Jump reaches 191 px × --tb in from the edge). The toast line right above it, the captions above both. The
   buttons carry the actions, so here the line only says what they do not: the state, a hold, a cost word, a note
   (touch-model.js touchPrompt). */
html.touch .action-line { bottom: calc(var(--B0) + 6px); font-size: 12px; line-height: 18px;
  max-width: min(460px, calc(100vw - 2 * (max(var(--L0), var(--R0)) + 195px * var(--tb)))); }
html.touch .toasts { bottom: calc(var(--B0) + 34px);
  max-width: min(460px, calc(100vw - 2 * (max(var(--L0), var(--R0)) + 195px * var(--tb)))); }
html.touch .toast { font-size: 12px; line-height: 18px; }
html.touch #ui:has(#hud:not([hidden]) #click-to-play:not([hidden])) .toasts { z-index: 1; }   /* (paused: under the Tap-to-play card) */
/* (the captions stack upwards past the context button left of the cluster — slot 2, Throw: it reaches 259 px × --tb in —
   so they stay narrower than the gap between that button and its mirror; a phone too narrow for that shows one caption) */
html.touch .captions { bottom: calc(var(--B0) + 62px); width: min(300px, calc(100vw - 2 * (max(var(--L0), var(--R0)) + 263px * var(--tb)))); }
html.touch .caption { font-size: 13px; padding: 3px 10px; }
html.touch .captions .caption:nth-last-child(n+3) { display: none; }   /* (two captions at most: the stack stays under the middle of the view) */
@media (max-width: 700px) {
  html.touch .captions { width: calc(100vw - 2 * (max(var(--L0), var(--R0)) + 195px * var(--tb))); }
  html.touch .captions .caption:not(:last-child) { display: none; }
}
html.touch .hud-chips { top: calc(var(--T0) + 8px); right: calc(var(--R0) + 8px); bottom: auto; max-width: 160px; gap: 4px; }
html.touch .chip-hud { font-size: 12px; padding: 4px 9px 4px 7px; }
/* the practice tools: top left, next to Pause; collapsed at the start of a night (touch.js / ui.js) */
html.touch .practice { top: calc(var(--T0) + 8px); left: calc(var(--L0) + 64px); right: auto; width: 200px;
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
html.touch .practice:not(.open) { width: auto; }                          /* (collapsed: just its name, clear of the objective) */
html.touch .practice-head { padding: 9px 12px; }
html.touch .practice-body button[data-sb] { padding: 8px 6px; }

/* the combination lock: at the top, tappable, with its pad; toasts wait until it closes */
html.touch #hud-dial { pointer-events: auto; z-index: 2; top: calc(var(--T0) + 6px); transform: translateX(-50%); padding: 10px 14px 10px; }
html.touch .dial.shake { animation: dial-shake-top 0.45s ease-in-out; }
@keyframes dial-shake-top {
  15% { transform: translateX(calc(-50% - 9px)); } 35% { transform: translateX(calc(-50% + 8px)); }
  55% { transform: translateX(calc(-50% - 6px)); } 75% { transform: translateX(calc(-50% + 4px)); }
}
html.touch .dial-wheels { margin: 6px 0 6px; gap: 14px; }
html.touch .wheel { width: 64px; cursor: pointer; }
html.touch .wheel .w-prev, html.touch .wheel .w-next { font-size: 19px; padding: 2px 0; }
html.touch #ui.dialing .toasts { display: none; }
.dial-pad { margin-top: 4px; }
.dial-digits { display: flex; justify-content: center; gap: 5px; }
.dial-digits button {                           /* (≥ 44 px targets: a wrong code rattles the drawer, loud) */
  width: clamp(40px, calc((100vw - 230px) / 10), 48px); height: 48px;   /* (the dial stays clear of Pause at 667 px) */ border: 1px solid rgba(244, 236, 216, 0.18); border-radius: 10px;
  background: rgba(0, 0, 0, 0.3); color: var(--cream); font: 600 18px/1 var(--font); font-variant-numeric: tabular-nums;
}
.dial-digits button.down { background: var(--honey); color: var(--ink); }
.dial-acts { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.dial-acts .btn { min-width: 104px; min-height: 44px; }
.dial-acts .btn.down { transform: translateY(3px); }

/* ------------------------------------------------------------------ the touch layer (touch.js) */

#touch { position: absolute; inset: 0; z-index: 1; pointer-events: none; font-family: var(--font); }
#touch[data-mode="hidden"] { display: none; }
#touch[data-mode="dial"] .t-look, #touch[data-mode="dial"] .t-stick-zone,
#touch[data-mode="dial"] .t-actions, #touch[data-mode="dial"] .t-voice { display: none; }

/* look: the right side (buttons sit on top of it); the stick: the left, clear of the iOS back swipe and the top row */
#touch .t-look { position: absolute; top: 0; bottom: 0; left: 45%; right: 0; pointer-events: auto; }
#touch .t-stick-zone { position: absolute; left: calc(var(--L0) + 24px); width: calc(45% - var(--L0) - 24px);
  top: calc(140px * var(--tb)); bottom: 0; pointer-events: auto; }
#touch.lefty .t-look { left: 0; right: 45%; }
#touch.lefty .t-stick-zone { left: 55%; right: calc(var(--R0) + 24px); width: auto; }

.t-stick {
  --r: calc(60px * var(--tb));
  position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%;
  left: calc(86px * var(--tb) - var(--r)); bottom: calc(var(--B0) + 100px * var(--tb) - var(--r));
  background: radial-gradient(circle, rgba(16, 22, 46, 0.25) 0 55%, rgba(16, 22, 46, 0.45) 70%, transparent 71%);
  border: 2px solid rgba(244, 236, 216, 0.28); opacity: 0.3; transition: opacity 0.15s;
  pointer-events: none;
}
#touch.lefty .t-stick.idle { left: auto; right: calc(86px * var(--tb) - var(--r)); }
.t-stick.active { opacity: 0.7; transition: none; }
.t-knob {
  position: absolute; left: 50%; top: 50%; width: calc(52px * var(--tb)); height: calc(52px * var(--tb));
  margin: calc(-26px * var(--tb)) 0 0 calc(-26px * var(--tb)); border-radius: 50%;
  background: rgba(244, 236, 216, 0.75); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* the run ring (touch-model.js RUN_ON × the radius): the knob goes out to it, and there you run */
.t-runring { position: absolute; inset: calc(var(--r) * -0.35 - 2px); border-radius: 50%; pointer-events: none;
  border: 2px dashed rgba(244, 236, 216, 0.3); opacity: 0; transition: opacity 0.15s; }
.t-stick.active .t-runring { opacity: 1; }
.t-stick.run .t-runring { border-style: solid; border-color: var(--honey); }
.t-run { position: absolute; left: 50%; top: calc(var(--r) * -0.35 - 22px); transform: translateX(-50%); font: 700 12px/1 var(--font);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--honey); opacity: 0; }
.t-stick.run { border-color: var(--honey); }
.t-stick.run .t-run { opacity: 1; }
.t-stick.run .t-knob { background: var(--honey); }

/* buttons: round, glassy, cream icon; pressed = honey, toggled on = sage, no target = faint */
#touch .t-btn {
  --d: 54; --cx: 0; --cy: 0;
  position: absolute; pointer-events: auto; box-sizing: border-box;
  width: calc(var(--d) * var(--tb) * 1px); height: calc(var(--d) * var(--tb) * 1px);
  right: calc(var(--R0) + (var(--cx) - var(--d) / 2) * var(--tb) * 1px);
  bottom: calc(var(--B0) + (var(--cy) - var(--d) / 2) * var(--tb) * 1px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 0; border-radius: 50%; border: 2px solid rgba(244, 236, 216, 0.28);
  background: rgba(16, 22, 46, 0.45); color: var(--cream);
  font: 600 10px/1.1 var(--font); text-align: center; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background 0.1s, opacity 0.15s, transform 0.08s;
}
#touch .t-btn .t-ico { width: 44%; height: 44%; flex: none; }
#touch .t-btn .t-cap { display: block; max-width: 92%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#touch .t-btn.down { background: rgba(226, 170, 92, 0.85); color: var(--ink); border-color: var(--honey); transform: scale(0.96); }
#touch .t-btn.on { background: rgba(159, 191, 154, 0.8); color: var(--ink); border-color: var(--sage); }
#touch .t-btn.dim { opacity: 0.4; }
#touch.lefty .t-actions .t-btn { right: auto; left: calc(var(--L0) + (var(--cx) - var(--d) / 2) * var(--tb) * 1px); }

/* the right-hand cluster (centres from the right / bottom safe edges, px at size 1) */
#touch .t-use { --d: 84; --cx: 62; --cy: 66; }
#touch .t-use .t-ico { width: 30%; height: 30%; }
#touch .t-use .t-cap {
  font-size: 12px; line-height: 1.12; white-space: normal; max-width: 86%; max-height: 2.3em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Fixed parent abilities above the bottom HUD band, clear of the floating stick even at Large.
   Parent context slot 3 is reserved by touch-model.js; Jump is unchanged. */
#touch .t-btn.t-ability { --d:54; --cx:156; --cy:210; }
#touch .t-btn.t-alternateAbility { --d:54; --cx:222; --cy:210; }
#touch .t-jump { --d: 62; --cx: 160; --cy: 46; }
#touch .t-sneak { --d: 58; --cx: 62; --cy: 170; }
#touch .t-ctx[data-slot="1"] { --d: 54; --cx: 150; --cy: 136; }
#touch .t-ctx[data-slot="2"] { --d: 54; --cx: 232; --cy: 100; }
#touch .t-ctx[data-slot="3"] { --d: 54; --cx: 146; --cy: 224; }
#touch .t-ctx[data-slot="4"] { --d: 54; --cx: 62; --cy: 258; }
#touch .t-ctx:not([data-slot]), #touch .t-ctx[data-slot=""] { display: none; }

/* the hold ring on Use (--p 0..1: filling while held on a door; honey while the quiet door / the task runs) */
#touch .t-ring { position: absolute; inset: -6px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: conic-gradient(var(--cream) calc(var(--p, 0) * 360deg), rgba(16, 22, 46, 0.3) 0);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 5px), #000 calc(50% - 4.5px));
  mask: radial-gradient(circle, transparent calc(50% - 5px), #000 calc(50% - 4.5px)); }
#touch .t-use.holding .t-ring { opacity: 1; }
#touch .t-use.busy .t-ring { background: conic-gradient(var(--honey) calc(var(--p, 0) * 360deg), rgba(226, 170, 92, 0.25) 0); }
/* a small mark: this button also has a hold action (a quiet door, closing a hatch quietly) */
#touch .t-holdmark { position: absolute; top: 9%; right: 16%; width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0.7; }
#touch .t-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--honey); color: var(--ink); font: 700 12px/20px var(--font); }

/* top left: Pause, then the voice row (the Mic button takes Talk's place while the mic is off) */
#touch .t-pause { --d: 48; width: 48px; height: 48px; right: auto; bottom: auto; border-radius: 14px;
  left: calc(var(--L0) + 8px); top: calc(var(--T0) + 8px); }
#touch .t-pause .t-ico { width: 52%; height: 52%; }
#touch .t-v { right: auto; bottom: auto; top: calc(var(--T0) + (100 - var(--d) / 2) * var(--tb) * 1px); }
#touch .t-talk, #touch .t-mic { --d: 56; left: calc(var(--L0) + (40 - var(--d) / 2) * var(--tb) * 1px); }
#touch .t-whisper { --d: 48; left: calc(var(--L0) + (104 - var(--d) / 2) * var(--tb) * 1px); }
#touch .t-walkie { --d: 48; left: calc(var(--L0) + (162 - var(--d) / 2) * var(--tb) * 1px); }
#touch .t-v .t-cap { font-size: 9px; letter-spacing: -0.03em; }            /* ("Whisper" in the PS1 Courier fits 48 px) */
#touch .t-mic { border-style: dashed; }
/* left-handed: the top rows swap sides with the thumbs — Pause and the voice row go right (by the stick thumb, as on the
   left otherwise; the action cluster's slots 3 and 4 reach up to them), the chips and the practice tools go left */
#touch.lefty .t-pause { left: auto; right: calc(var(--R0) + 8px); }
#touch.lefty .t-talk, #touch.lefty .t-mic { left: auto; right: calc(var(--R0) + (40 - var(--d) / 2) * var(--tb) * 1px); }
#touch.lefty .t-whisper { left: auto; right: calc(var(--R0) + (104 - var(--d) / 2) * var(--tb) * 1px); }
#touch.lefty .t-walkie { left: auto; right: calc(var(--R0) + (162 - var(--d) / 2) * var(--tb) * 1px); }
html.touch.touch-lefty .hud-chips { right: auto; left: calc(var(--L0) + 8px); align-items: flex-start; }
html.touch.touch-lefty .practice { left: auto; right: calc(var(--R0) + 64px); }
#touch .t-talk.on { background: rgba(159, 191, 154, 0.9); color: var(--ink); }
#touch .t-whisper.on { background: rgba(185, 170, 230, 0.9); color: var(--ink); border-color: var(--lilac); }
#touch .t-walkie.on { background: rgba(226, 170, 92, 0.85); color: var(--ink); }
#touch .t-lock { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 3px; border-radius: 50%;
  background: var(--honey); color: var(--ink); display: none; }
#touch .t-lock .t-ico { width: 100%; height: 100%; }
#touch .t-btn.latched .t-lock { display: block; }
#touch .t-meter { position: absolute; left: 22%; right: 22%; bottom: 14%; height: 3px; border-radius: 2px; background: rgba(19, 26, 51, 0.25); overflow: hidden; }
#touch .t-meter > i { position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(var(--lvl, 0)); }
#touch .t-btn:not(.on) .t-meter { display: none; }

#touch .t-sound { position: absolute; left: 50%; bottom: calc(var(--B0) + 64px); transform: translateX(-50%); pointer-events: auto;
  padding: 10px 18px; border-radius: 999px; border: 2px solid var(--honey); background: rgba(16, 22, 46, 0.85); color: var(--honey);
  font: 600 15px/1 var(--font); }

/* the phone held upright during a night */
#touch-rotate { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--night);
  pointer-events: auto; text-align: center; padding: 24px; }
#touch-rotate[hidden] { display: none; }
#touch-rotate .rot-card { max-width: 280px; color: var(--cream); }
#touch-rotate svg { width: 88px; height: 88px; color: var(--honey); animation: rot-hint 2.4s ease-in-out infinite; }
#touch-rotate p { margin: 14px 0 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
#touch-rotate .rot-sub { margin-top: 12px; font-size: 14px; font-weight: 400; color: var(--cream-dim); }
#touch-rotate .rot-pause { margin-top: 18px; min-width: 120px; min-height: 44px; }
@keyframes rot-hint { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-90deg); } }

/* ------------------------------------------------------------------ the PS1 look on a phone */

/* under PS1 the canvas is the 240-line frame itself (world.js _applyScale): the browser's upscale to the screen keeps
   the pixels square, hard and (nearly) even instead of smoothing every edge into a blur */
html.touch body.ps1 #game { image-rendering: pixelated; }

/* ------------------------------------------------------------------ Settings, PS1 panel, night map on touch */

html.touch .settings-card { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 12px 14px; }
html.touch .settings-x { width: 44px; height: 44px; }
html.touch .settings-tabs button { min-height: 40px; }
html.touch .settings-row input[type="range"] { height: 32px; }
html.touch .settings-row input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
html.touch .settings-row input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; }
html.touch .settings-head { margin-bottom: 8px; }
/* more rows below the fold (short landscape phones): the list fades out at the bottom; its last row scrolls clear */
html.touch .settings-body { padding-bottom: 26px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); }
@media (max-height: 420px) {
  html.touch .settings-head { margin-bottom: 4px; }
  html.touch .settings-head h2 { font-size: 19px; }
  html.touch .settings-tabs { margin-bottom: 8px; }
  html.touch .settings-tabs button { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
}
html.touch .settings-head h2 { font-size: 22px; }
.settings-touchrow .seg { margin-top: 2px; }
}

html.touch .ps1-panel { width: min(270px, calc(100vw - 24px)); }
html.touch .nm-ctl select { font-size: 16px; }