/* Thunderhead — UI styles. Storm blue-black, brass gold, storm-glass cyan. */
:root {
  --ink: #e8e4d8; --dim: #9a9db0; --gold: #e0b25a; --gold2: #ffd27a; --glass: #8fe0ff; --red: #ff5a3c;
  --bg: #0b1020; --panel: rgba(10, 14, 28, 0.86); --line: rgba(224, 178, 90, 0.35);
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs: 1;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow: hidden; -webkit-user-select: none; user-select: none; }
body.big-text { --fs: 1.25; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; font-size: calc(15px * var(--fs)); }
#ui button, #ui select, #ui input, #ui .tb { pointer-events: auto; }
.nojs { position: fixed; inset: 0; display: grid; place-items: center; color: var(--ink); }

/* boot */
#boot { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #16203a 0%, #0b1020 60%, #05070d 100%); z-index: 50; transition: opacity 0.8s; }
#boot.gone { opacity: 0; pointer-events: none; }
.boot-title, .title { font-family: var(--serif); font-weight: 700; letter-spacing: 0.08em; color: var(--ink); text-shadow: 0 0 30px rgba(143, 224, 255, 0.35); }
.boot-title { font-size: 42px; } .boot-title span, .title span { color: var(--gold2); }
.boot-sub { margin-top: 12px; color: var(--dim); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; padding: 0 20px; }

/* HUD */
.hud { position: absolute; inset: 0; transition: opacity 0.4s; }
.hud-tl { position: absolute; left: 24px; top: 70px; }   /* below the production credit */
/* life: the same plate as the Toll bar below it, filled by hp/maxHp (the maximum grows to twelve over
   the climb; the bar keeps its length and the fill is the fraction) */
.life { display: flex; align-items: center; gap: 8px; }
.life-pip { width: 16px; height: 18px; background: linear-gradient(180deg, #ffe08a, #ff9a3a); border-radius: 8px 8px 3px 3px; box-shadow: 0 0 8px rgba(255, 170, 60, 0.5); transition: background 0.25s, box-shadow 0.25s; }
.life-bar { width: 150px; height: 8px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(224, 178, 90, 0.35); border-radius: 4px; overflow: hidden; }
.life-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #a8541a, #ffb347); transition: width 0.3s ease-out, background 0.25s; }
.life-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--dim); transition: color 0.25s; }
.life.low .life-fill { background: linear-gradient(90deg, #c42714, #ff4a2a); box-shadow: 0 0 10px rgba(255, 70, 40, 0.6); }
.life.low .life-pip { background: linear-gradient(180deg, #ff7a5a, #d02010); box-shadow: 0 0 10px rgba(255, 70, 40, 0.6); }
.life.low .life-label { color: #ff8a70; }
.life.crit .life-fill { animation: lifeflash 0.6s ease-in-out infinite; }
.life.crit .life-pip { animation: lifeflash 0.6s ease-in-out infinite; }
@keyframes lifeflash { 0%, 100% { background: #ff2a14; box-shadow: 0 0 16px rgba(255, 50, 30, 0.95); } 50% { background: #5e1108; box-shadow: none; } }
.life.hurt .life-bar { animation: lifehit 0.34s ease-out; }
@keyframes lifehit { 0% { transform: translateX(-4px); filter: brightness(2.4); } 45% { transform: translateX(3px); } 100% { transform: none; filter: none; } }
.toll { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.toll-bell { width: 16px; height: 18px; background: var(--gold); border-radius: 8px 8px 3px 3px; box-shadow: 0 0 8px rgba(224, 178, 90, 0.5); opacity: 0.7; transition: transform 0.2s, opacity 0.2s; }
.toll-bar { width: 150px; height: 8px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(224, 178, 90, 0.35); border-radius: 4px; overflow: hidden; }
.toll-fill { height: 100%; width: 0; background: linear-gradient(90deg, #a67a2a, #ffd27a); transition: width 0.15s; }
.toll-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--dim); }
.toll.ready .toll-bell { opacity: 1; animation: ring 0.6s ease-in-out infinite; } .toll.ready .toll-fill { background: linear-gradient(90deg, #ffd27a, #fff3c4); box-shadow: 0 0 12px rgba(255, 210, 122, 0.8); } .toll.ready .toll-label { color: var(--gold2); }
@keyframes ring { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
/* the right-hand stack starts below the burger, so the large map has the whole corner to itself */
.hud-tr { position: absolute; right: 24px; top: 74px; text-align: right; max-width: 62vw; }
/* mini-map: the plate sits at the top of the right-hand stack, the objective line directly under it.
   Its size is set inline by src/ui/minimap.js (small 220 px, large ~550, clamped to the window). */
.minimap { width: 220px; height: 220px; margin: 0 0 10px auto; border-radius: 12px; background: var(--panel); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55); overflow: hidden; }
.minimap-canvas { display: block; width: 100%; height: 100%; }
.objective { font-family: var(--serif); font-size: 18px; color: var(--ink); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
.objective.pop { animation: pop 0.5s ease-out; }
@keyframes pop { 0% { transform: translateY(-6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.wave { margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--glass); }
.banner { position: absolute; left: 0; right: 0; top: 22%; text-align: center; opacity: 0; pointer-events: none; }
.banner.show { animation: banner 4.5s ease-out forwards; }
@keyframes banner { 0% { opacity: 0; transform: translateY(10px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.banner-title { font-family: var(--serif); font-size: 44px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-shadow: 0 0 30px rgba(143, 224, 255, 0.35), 0 2px 10px rgba(0, 0, 0, 0.8); }
.banner-sub { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--dim); }
.bossbar { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); width: min(520px, 60vw); opacity: 0; transition: opacity 0.6s; }
.bossbar.show { opacity: 1; }
.boss-name { font-family: var(--serif); letter-spacing: 0.2em; text-transform: uppercase; font-size: 13px; color: var(--glass); text-align: center; margin-bottom: 5px; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }
.boss-track { height: 9px; border: 1px solid rgba(143, 224, 255, 0.5); background: rgba(0, 0, 0, 0.4); border-radius: 5px; overflow: hidden; }
.boss-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #2f86c0, #8fe0ff); box-shadow: 0 0 12px rgba(143, 224, 255, 0.7); transition: width 0.25s; }
.hud-bottom { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.hint, .toast { opacity: 0; transition: opacity 0.3s; font-size: 15px; }
.hint.show, .toast.show { opacity: 1; }
.hint { display: flex; align-items: center; gap: 8px; background: rgba(6, 10, 22, 0.7); border: 1px solid var(--line); padding: 6px 12px; border-radius: 8px; }
.keycap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; padding: 3px 7px; border: 1px solid rgba(255, 255, 255, 0.35); border-bottom-width: 3px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); color: var(--ink); min-width: 28px; text-align: center; }
.subtitle { opacity: 0; transition: opacity 0.3s; font-family: var(--serif); font-size: 20px; text-align: center; max-width: 70vw; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); line-height: 1.35; }
.subtitle.show { opacity: 1; }
.speaker { color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px; font-family: var(--mono); }
.toast { color: var(--gold2); font-family: var(--serif); font-size: 17px; text-shadow: 0 2px 8px rgba(0,0,0,0.9); }
/* (the .abilities chip strip — RT STRIKE / RB THROW / A DODGE / B TOLL, bottom right — has been
   removed: the game teaches those four buttons in its first minute and the legend was furniture) */
.corner { position: absolute; left: 24px; bottom: 20px; font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* the burger: the pointer's way into the pause menu, in the very top-right corner above the map stack */
.burger { position: absolute; right: 24px; top: 18px; width: 44px; height: 44px; min-width: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: rgba(6, 10, 22, 0.7); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; z-index: 20; }
.burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: background 0.15s; }
.burger:hover, .burger:focus-visible { background: rgba(224, 178, 90, 0.18); border-color: var(--gold2); transform: none; }
.burger:hover span, .burger:focus-visible span { background: var(--gold2); }
.burger.is-off { display: none; }

/* the "skip" nudge under a cinematic, bottom right, and the demonstration's banner, top centre.
   Both name a button, and both are redrawn by UI.refreshKeycaps when the device changes. */
.cine-skip { position: absolute; right: 26px; bottom: 22px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.cine-skip.show { opacity: 0.75; }
.cine-skip-word { letter-spacing: 0.12em; text-transform: uppercase; }
.demo-banner { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(6, 10, 22, 0.72); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold2); opacity: 0; transition: opacity 0.4s; pointer-events: none; white-space: nowrap; z-index: 21; }
.demo-banner.show { opacity: 0.8; }

/* overlay & screens */
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 30%, rgba(10, 16, 32, 0.55), rgba(5, 7, 13, 0.85)); pointer-events: auto; }
.screen { width: 100%; height: 100%; display: grid; place-items: center; padding: 20px; overflow: auto; }
.title-screen { background: none; }
.title-wrap { text-align: center; }
.title-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--glass); margin-bottom: 8px; }
.title { font-size: clamp(48px, 9vw, 96px); line-height: 1; margin: 0; }
/* The title is a drawing, not a word (src/ui/logo.js): a transparent vector, so it is crisp at any
   width and sits over whatever the camera is doing behind it. */
.title-logo { display: block; margin: 0 auto; }
.title-logo-svg { display: block; width: min(760px, 86vw); height: auto; margin: 0 auto; overflow: visible; }
/* the words are always in the document, for a screen reader — and on screen if the drawing failed */
.title .title-logo-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; color: var(--ink); }
.title-logo.is-text .title-logo-svg { display: none; }
.title.title-logo.is-text .title-logo-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
.title-sub { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--dim); margin: 8px 0 26px; }
.menu { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.menu.row { flex-direction: row; justify-content: center; margin-top: 18px; }
button { font-family: var(--serif); font-size: calc(18px * var(--fs)); letter-spacing: 0.06em; color: var(--ink); background: rgba(10, 14, 28, 0.7); border: 1px solid var(--line); padding: 10px 28px; min-width: 260px; border-radius: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s; }
button:hover, button.focused, button:focus-visible { background: rgba(224, 178, 90, 0.15); border-color: var(--gold2); box-shadow: 0 0 16px rgba(224, 178, 90, 0.25); outline: none; transform: translateY(-1px); }
.title-foot { margin-top: 28px; font-size: 12px; color: var(--dim); letter-spacing: 0.05em; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 34px; min-width: 340px; max-width: min(880px, 94vw); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.panel.wide { width: min(880px, 94vw); }
.panel h2 { font-family: var(--serif); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin: 0 0 18px; text-align: center; font-size: 26px; }
.panel h2.red { color: var(--red); } .panel.gold h2 { color: var(--gold2); font-size: 40px; }
.panel h3 { font-family: var(--serif); letter-spacing: 0.1em; font-weight: 600; margin: 0 0 8px; color: var(--gold); }
.panel-foot, .tip { margin-top: 14px; text-align: center; color: var(--dim); font-size: 13px; }
.tip { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink); margin-bottom: 18px; max-width: 460px; }
.stats { text-align: center; color: var(--dim); margin-bottom: 18px; font-family: var(--serif); font-size: 16px; }
.stats .big { font-size: 48px; color: var(--gold2); font-family: var(--serif); letter-spacing: 0.05em; }
.rows { display: grid; gap: 10px; }
.rows label { display: grid; grid-template-columns: 1fr 220px; align-items: center; gap: 12px; font-size: calc(15px * var(--fs)); }
.rows select, .rows input[type=range] { width: 100%; accent-color: var(--gold); }
.rows select { font: inherit; background: rgba(10, 14, 28, 0.9); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.rows select.focused, .rows input.focused { outline: 2px solid var(--gold2); }
.rows input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--gold); justify-self: start; }
.controls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.controls-grid table { border-collapse: collapse; width: 100%; font-size: calc(13px * var(--fs)); }
.controls-grid td { padding: 4px 6px 4px 0; vertical-align: top; color: var(--dim); } .controls-grid td:first-child { color: var(--ink); width: 45%; }
kbd { font-family: var(--mono); font-size: 11px; padding: 2px 6px; border: 1px solid rgba(255, 255, 255, 0.3); border-bottom-width: 2px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); margin-right: 3px; }
.how { margin-top: 16px; font-size: calc(14px * var(--fs)); color: var(--dim); line-height: 1.5; } .how b { color: var(--ink); } .how p { margin: 6px 0; }
/* about */
.about { max-height: 92vh; overflow: auto; }
.about-body { max-width: 720px; margin: 0 auto; color: var(--dim); font-size: calc(15px * var(--fs)); line-height: 1.6; }
.about-body p { margin: 0 0 12px; } .about-body b { color: var(--ink); }
.about-credit { margin: 18px auto 0; text-align: center; }
.about-credit .credit-line { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.about-small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--dim); margin-top: 6px; }

/* touch */
.touch-ui { position: absolute; inset: 0; pointer-events: none; }
.stick-zone { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; pointer-events: auto; touch-action: none; }
.stick-base { position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.05); display: none; }
.stick-base.on { display: block; }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(224, 178, 90, 0.6); }
.tbtns { position: absolute; right: 18px; bottom: 26px; display: grid; grid-template-columns: repeat(2, 78px); gap: 12px; pointer-events: auto; }
.tb { min-width: 0; width: 78px; height: 78px; border-radius: 50%; padding: 0; font-size: 14px; font-family: var(--sans); letter-spacing: 0.04em; background: rgba(6, 10, 22, 0.7); touch-action: none; }
.tb.down { background: rgba(224, 178, 90, 0.35); }
.tb-strike { border-color: var(--gold2); } .tb-throw { border-color: var(--glass); } .tb-toll { border-color: #ffb050; }
.tb-pause { position: absolute; right: 0; top: -70px; width: 44px; height: 44px; font-size: 12px; }

.reduce-motion .banner.show, .reduce-motion .objective.pop, .reduce-motion .toll.ready .toll-bell, .reduce-motion .life.hurt .life-bar { animation: none; opacity: 1; }
/* flashing is held solid instead: still unmistakably about to die, without the strobe */
.reduce-motion .life.crit .life-fill, .reduce-motion .life.crit .life-pip { animation: none; background: #ff2a14; box-shadow: 0 0 14px rgba(255, 50, 30, 0.8); }
@media (max-width: 720px) { .hud-tr { max-width: 55vw; } .objective { font-size: 15px; } .banner-title { font-size: 30px; } button { min-width: 220px; } .rows label { grid-template-columns: 1fr 150px; } .subtitle { font-size: 16px; max-width: 90vw; } }

/* production credit and copyright: present on every screen */
.credit { position: absolute; left: 22px; top: 18px; display: flex; align-items: center; gap: 12px; pointer-events: none; z-index: 30; opacity: 0.92; }
.credit-icon { width: 44px; height: 44px; filter: drop-shadow(0 0 8px rgba(255, 179, 71, 0.35)); }
.credit-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--glass); }
.credit-line { font-family: var(--serif); font-size: 12.5px; color: var(--ink); margin-top: 2px; letter-spacing: 0.02em; }
.copyright { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--dim); opacity: 0.75; pointer-events: none; z-index: 30; }

/* ------------------------------------------------------------------ the controls screen
   The drawn pad, the keyboard table and the binding editor (src/ui/controls-ui.js). */
.ctl { max-height: 92vh; overflow: auto; }
.panel.wide.ctl { width: min(1180px, 96vw); }   /* the photographed pad wants the room */
.ctl-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.ctl-tab { min-width: 0; padding: 7px 20px; font-size: calc(15px * var(--fs)); border-radius: 8px 8px 0 0; border-bottom-width: 2px; opacity: 0.72; }
.ctl-tab.on { opacity: 1; background: rgba(224, 178, 90, 0.14); border-color: var(--gold2); color: var(--gold2); }
.ctl-status { text-align: center; font-family: var(--mono); font-size: 12px; color: var(--glass); margin: 0 auto 10px; max-width: 640px; line-height: 1.5; }
/* The controller diagram: the photograph with its labels. The SVG scales with the panel, so the
   font sizes below are in the drawing's own units (the viewBox is 1160 wide) and the photograph
   inside it is 640 of those — at the widest panel that is a little over 600 css px, and every
   label stays comfortably over 12 px. */
.ctl-diagram { width: 100%; overflow-x: auto; }
.ctl-svg { display: block; width: 100%; min-width: 640px; height: auto; max-height: 74vh; margin: 0 auto; }
.ctl-svg .ctl-lead { stroke: rgba(224, 178, 90, 0.5); stroke-width: 1.6; }
.ctl-svg .ctl-dot { fill: var(--gold2); stroke: rgba(6, 10, 22, 0.7); stroke-width: 1.5; }
.ctl-svg .ctl-cap { fill: var(--gold2); font-family: var(--mono); font-size: 19px; letter-spacing: 0.06em; }
.ctl-svg .ctl-act { fill: var(--ink); font-family: var(--sans); font-size: 17px; }
.ctl-svg .ctl-dim { fill: var(--dim); font-size: 15.5px; }
.ctl-note { margin: 10px auto 0; max-width: 720px; text-align: center; color: var(--dim); font-size: calc(13px * var(--fs)); line-height: 1.55; }
.ctl-note b { color: var(--gold2); }
.ctl-keys table { border-collapse: collapse; width: 100%; max-width: 620px; margin: 0 auto; font-size: calc(13.5px * var(--fs)); }
.ctl-keys td { padding: 5px 6px 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: var(--dim); }
.ctl-keys td:first-child { color: var(--ink); width: 45%; }
.ctl-none { color: rgba(154, 157, 176, 0.6); }
.ctl-edit { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.ctl-edit-head { color: var(--dim); font-size: 13px; text-align: center; margin-bottom: 10px; }
.ctl-group { font-family: var(--serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-size: 12px; margin: 12px 0 4px; }
.ctl-row { display: grid; grid-template-columns: 1fr 132px 132px auto; gap: 8px; align-items: center; padding: 2px 0; }
.ctl-act-name { font-size: calc(14px * var(--fs)); }
.ctl-key { min-width: 0; width: 100%; padding: 5px 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; border-radius: 6px; }
.ctl-key.empty { color: var(--dim); border-style: dashed; }
.ctl-key.listening { border-color: var(--glass); color: var(--glass); box-shadow: 0 0 14px rgba(143, 224, 255, 0.3); animation: ctl-listen 1s ease-in-out infinite; }
@keyframes ctl-listen { 50% { opacity: 0.55; } }
.ctl-more { color: var(--dim); font-size: 11px; font-family: var(--mono); }
.ctl-conflict, .ctl-share { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(224, 178, 90, 0.07); font-size: 13px; }
.ctl-conflict button, .ctl-share button { min-width: 0; padding: 6px 16px; font-size: 14px; }
.ctl-code { font-family: var(--mono); font-size: 12px; min-width: 260px; flex: 1 1 260px; padding: 6px 8px; color: var(--ink); background: rgba(6, 10, 22, 0.85); border: 1px solid var(--line); border-radius: 6px; -webkit-user-select: text; user-select: text; }
.ctl-msg { color: var(--glass); }
.ctl-actions { flex-wrap: wrap; }
.ctl-actions button { min-width: 150px; }
/* What the player is holding: bottom right, in the copyright line's own small type. Up on the title
   and in the pause menu, never over the game (UI.show opens and closes it). */
.pad-status {
  position: absolute; right: 16px; bottom: 6px; max-width: 42vw; text-align: right;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--dim);
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 30;
}
.pad-status.show { opacity: 0.75; }
.reduce-motion .ctl-key.listening { animation: none; }
@media (max-width: 720px) { .ctl-row { grid-template-columns: 1fr 110px 110px; } .ctl-more { display: none; } }
/* a short window would otherwise squeeze the labels under 12 px: let the panel scroll instead */
@media (max-height: 820px) { .ctl-svg { max-height: 88vh; } }