/* Precision Lab / industrial console. Gameplay geometry stays in styles.css. */
:root {
  --bg: #0c0e10; --panel: #151719; --panel-2: #101214;
  --text: #edece7; --muted: #a1a39f; --line: #ffffff12;
  --accent: #efc76b; --accent-rgb: 239,199,107;
  --success: #82deb0; --danger: #ff777e;
  color-scheme: dark;
}
body { background: radial-gradient(ellipse at 90% 5%, #b1842010, transparent 40%), #0c0e10; }
button, a { touch-action: manipulation; }
button { transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { color: #161411; background: var(--accent); }
.ambient { display: none; }
.skip-link { position: fixed; left: 20px; top: -80px; z-index: 100; background: var(--accent); color: #161411; padding: 12px 20px; }
.skip-link:focus { top: 16px; }
.topbar {
  position: fixed; z-index: 10; inset: 0 auto 0 0; width: 242px; height: 100dvh; margin: 0;
  padding: 32px 18px 20px; display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: linear-gradient(170deg, #1a1c1c, #101213 65%); border: 0; border-right: 1px solid #ffffff0c;
}
.brand { align-self: flex-start; margin: 0 10px 44px; font-size: 13px; line-height: 1.15; letter-spacing: .14em; gap: 13px; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; border-color: #efc76b55; background: #efc76b0c; box-shadow: inset 0 0 18px #efc76b08; }
.brand-mark i { box-shadow: 0 0 16px #efc76b88; }
.nav-heading { display: flex; justify-content: space-between; color: #81867f; font: 500 11px 'DM Mono', monospace; letter-spacing: .12em; margin: 0 12px 18px; }
.nav-heading span { color: #61665f; font-size: 10px; }
.game-nav { display: flex; flex-direction: column; height: auto; gap: 6px; width: 100%; overflow-y: auto; scrollbar-width: thin; }
.game-nav .nav-item { width: 100%; flex-shrink: 0; justify-content: flex-start; position: relative; height: 49px; padding: 0 12px; gap: 11px; border: 1px solid transparent; border-radius: 8px; color: #9a9e99; font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.nav-item span { flex: 0 0 26px; font: 12px 'DM Mono', monospace; color: #68716c; }
.nav-item::after { display: none; }
.game-nav .nav-item:hover { color: #edece7; background: #ffffff05; border-color: #ffffff09; }
.game-nav .nav-item.active { color: var(--accent); background: linear-gradient(90deg, #efc76b16, #efc76b04); border-color: #efc76b22; box-shadow: inset 2px 0 var(--accent); }
.nav-item.active span { color: var(--accent); }
.status-pill { margin-top: auto; padding: 22px 10px 0; font-size: 11px; border-top: 1px solid var(--line); justify-content: flex-start; }
main { width: calc(100% - 242px); max-width: 1760px; margin: 0 0 0 242px; padding: 36px clamp(22px, 3vw, 54px) 45px; }
.intro-row { align-items: center; gap: 28px; margin-bottom: 26px; min-height: 82px; }
.intro-row > div { flex-shrink: 0; }
.eyebrow { font-size: 11px; color: #a29b87; letter-spacing: .17em; margin-bottom: 10px; }
h1 { font-size: clamp(29px, 2.7vw, 42px); line-height: 1.08; letter-spacing: -.045em; }
h1 em { color: var(--accent); font-weight: 600; }
.intro-copy { max-width: 430px; color: var(--muted); font-size: 14px; line-height: 1.65; padding-left: 18px; border-left: 1px solid #efc76b35; }
.workspace-grid, .keypad-layout, .vault-layout, .lockpick-layout { grid-template-columns: 245px minmax(0,1fr); gap: 18px; align-items: start; }
.control-panel, .game-card { backdrop-filter: none; border-color: #ffffff0d; background: linear-gradient(125deg, #1c1f20, #131618 65%); box-shadow: inset 0 1px #ffffff06, 0 12px 35px #00000020; border-radius: 14px; }
.control-panel { padding: 23px; }
.game-card { padding: 24px; position: relative; }
.game-card::before { content: ''; pointer-events: none; position: absolute; top: -1px; left: 24px; width: 50px; height: 2px; background: var(--accent); opacity: .65; }
.panel-heading { font-size: 11px; color: #b3b6ae; padding-bottom: 16px; }
.panel-heading > span:last-child { color: #747c72; }
.field-label { font-size: 11px; color: #9a9e96; letter-spacing: .1em; }
.shape-option { border-radius: 8px; background: #ffffff03; min-height: 86px; }
.shape-option.active { background: #efc76b0c; border-color: #efc76b66; box-shadow: inset 0 0 22px #efc76b05; }
.shape-option:hover { transform: translateY(-2px); }
.rules-list { color: #a1a59e; font-size: 13px; line-height: 1.7; }
.rules-list b { color: #e1e3dc; }
.game-hud { padding-bottom: 20px; gap: 16px; }
.hud-block > span { font: 11px 'DM Mono', monospace; color: #91998e; letter-spacing: .1em; }
.hud-block strong { color: #eeede5; font-size: 29px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.hud-block strong small { font-size: 13px; color: #818b7c; margin-left: 4px; }
.hud-block .state-readout { font-size: 17px; letter-spacing: .04em; color: var(--accent); }
.timer-track, .phase-timer-track, .osu-progress-track { height: 3px; background: #ffffff07; border-radius: 3px; overflow: hidden; }
.canvas-shell, .vault-machine, .lockpick-machine, .chase-board-shell { border-radius: 10px; border-color: #ffffff0c; background-color: #090c0d; box-shadow: inset 0 0 65px #00000035; }
.primary-button { min-height: 48px; border-radius: 7px; color: #191711; background: linear-gradient(110deg, #f4d18a, #dcb461); border: 1px solid #ffe3a84a; box-shadow: 0 4px 0 #82612822, inset 0 1px #fff3; font-size: 12px; letter-spacing: .08em; }
.primary-button:hover:not(:disabled) { background: #ffda89; transform: translateY(-2px); box-shadow: 0 6px 18px #efc76b1c; }
.primary-button:active:not(:disabled) { transform: translateY(1px); }
.secondary-button { border-radius: 7px; font-size: 13px; border-color: #ffffff20; background: #ffffff03; }
.seismo-footer, .osu-footer, .game-footer, .lockpick-footer { margin-top: 18px; gap: 18px; }
.seismo-footer p, .osu-footer p, .game-footer p, .lockpick-footer p { font-size: 12px; color: #a1a89d; line-height: 1.6; }
.seismo-footer p span, .osu-footer p span, .game-footer p span { font-size: 11px; color: var(--accent); }
.phase-strip { border-radius: 6px; background: #ffffff02; }
.phase-strip span { font-size: 11px; }
.slider-zone { background: #ffffff02; border-radius: 9px; padding: 20px 22px; margin-bottom: 16px; border: 1px solid #ffffff09; }
.slider-labels { font-size: 10px; color: #92988e; }
.slider-handle { border-radius: 6px; box-shadow: 0 0 22px #efc76b22; }
.class-option, .lockpick-option { border-radius: 7px; background: #ffffff02; }
.class-option.active, .lockpick-option.active { border-color: #efc76b66; background: #efc76b0d; }
.osu-rules p { font-size: 12px; color: #a1a89d; }
.osu-instruction, .vault-instruction, .lockpick-instruction { border-radius: 10px; }
.osu-instruction span, .vault-instruction span, .lockpick-instruction span { font-size: 12px; }
.osu-instruction b, .vault-instruction b, .lockpick-instruction b { font-size: 13px; color: #a7ada2; text-align: center; padding: 0 16px; }
.terminal-window { border-radius: 10px; border-color: #82deb02b; }
.terminal-objectives { border-radius: 9px 9px 0 0; background: #ffffff02; }
.terminal-objectives > span, .terminal-windowbar { font-size: 11px; }
.target-chip { border-radius: 5px; font-size: 13px; }
.game-overlay { background: #080d0bdb; }
.game-overlay span { font-size: 12px; }
.game-overlay small { font-size: 13px; }
.keypad-guide { min-height: 0; }
.hack-device { border-radius: 18px; background: linear-gradient(130deg,#232727,#101414); border-color: #ffffff17; }
.hack-screen { border-color: #82deb035; box-shadow: inset 0 0 35px #82deb006; }
.hack-screen-top { font-size: 10px; }
.hack-screen p { font-size: 13px; }
.keypad-grid button { border-radius: 8px; box-shadow: 0 4px 0 #050909, inset 0 1px #fff1; background: linear-gradient(145deg,#303632,#1a211e); }
.keypad-grid button.flash { background: var(--accent); color: #121710; box-shadow: 0 0 26px #efc76b60; }
.chase-section { border-radius: 8px; }
.chase-key { border-radius: 7px; }
.chase-section::before { font-size: 10px; }
.result-modal { background: #030607b8; backdrop-filter: blur(12px); }
.result-card { border-radius: 18px; background: linear-gradient(145deg,#222a25,#111814); border-color: #82deb054; box-shadow: 0 30px 130px #0009, inset 0 1px #ffffff0c; }
.result-card.success { box-shadow: 0 20px 100px #0008, 0 0 80px #82deb015; }
.result-card.fail { background: linear-gradient(145deg,#2b1e20,#171113); }
.result-card h2 { font-size: clamp(26px,4vw,38px); }
.result-card > p { font-size: 15px; }
.result-symbol { border-radius: 50%; box-shadow: 0 0 50px #82deb016; }
.result-card .primary-button { background: var(--success); }
.result-card.fail .primary-button { background: var(--danger); }
.console-tools { display: flex; flex-direction: column; gap: 8px; margin: auto 8px 22px; padding-top: 22px; }
.console-toggle { display: flex; justify-content: space-between; align-items: center; background: none; border: 0; padding: 6px 0; color: #a1a79c; cursor: pointer; font-size: 12px; }
.console-toggle b { color: #efc76b; font: 10px 'DM Mono', monospace; border: 1px solid #efc76b26; padding: 3px 6px; border-radius: 4px; }
.status-pill:has(+ *) { margin-top: 0; }
@keyframes panelEnter { from { translate: 0 7px; } to { translate: 0 0; } }
.game-view.active .game-card { animation: panelEnter .24s ease-out; }
@media (max-width: 1200px) {
  .topbar { width: 208px; padding-inline: 12px; }
  main { margin-left: 208px; width: calc(100% - 208px); padding: 28px 22px; }
  .game-nav .nav-item { font-size: 11px; padding-inline: 10px; gap: 6px; }
  .workspace-grid, .keypad-layout, .vault-layout, .lockpick-layout { grid-template-columns: 210px minmax(0,1fr); }
  .control-panel { padding: 18px; }
  .intro-copy { font-size: 13px; max-width: 360px; }
}
@media (max-width: 1000px) {
  .topbar { position: static; width: 100%; height: auto; padding: 20px; display: grid; grid-template-columns: 1fr auto; gap: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { margin: 0; }
  .nav-heading, .status-pill { display: none; }
  .game-nav { grid-column: 1/-1; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .game-nav .nav-item { width: auto; height: 44px; padding: 0 14px; font-size: 12px; }
  .console-tools { grid-column: 2; grid-row: 1; margin: 0; padding: 0; gap: 4px; min-width: 145px; }
  main { margin: 0; width: 100%; padding: 24px 20px; }
}
@media (max-width: 760px) {
  .intro-row { align-items: start; flex-direction: column; gap: 14px; }
  h1 { font-size: 32px; }
  .intro-copy { max-width: none; font-size: 14px; }
  .workspace-grid, .keypad-layout, .vault-layout, .lockpick-layout { grid-template-columns: 1fr; }
  .control-panel { padding: 20px; }
  .game-card { padding: 18px; }
  .game-hud { gap: 10px; }
  .hud-block > span { font-size: 10px; }
  .hud-block strong { font-size: 24px; }
  .hud-block .state-readout { font-size: 13px; }
  .game-footer, .seismo-footer, .osu-footer, .lockpick-footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .game-view.active .game-card { animation: none; } }
html[data-reduced-motion="true"] *, html[data-reduced-motion="true"] *::before, html[data-reduced-motion="true"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.game-nav .nav-item { display: flex; align-items: center; font-size: 14px; line-height: 1.25; white-space: normal; }
.nav-item span { display: grid; place-items: center; flex-basis: 22px; }
.nav-item svg { width: 20px; height: 20px; }
.shape-option b { font-size: 14px; }
.shape-option small { color: #a1a59b; font-size: 12px; }
.rule-list { gap: 22px; }
.rule-list p { color: #a1a59b; font-size: 13px; line-height: 1.6; }
.rule-list b { color: #e0e3da; font-size: 13px; margin-bottom: 5px; }
.rule-list > div > span { color: #777d72; font-size: 11px; }
.canvas-instruction { font-size: 10px; }
.maze-hud { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.maze-surface { position: relative; background: #080b0c; overflow: hidden; border: 1px solid #ffffff10; border-radius: 10px; }
#maze-canvas { height: clamp(400px, 58vh, 580px); outline-offset: -3px; }
.maze-ready { position: absolute; inset: 0; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse, #121913ed, #0b0f0edb); text-align: center; pointer-events: none; transition: opacity .25s, visibility .25s; }
.maze-ready.hidden { opacity: 0; visibility: hidden; }
.maze-emblem { font-size: 50px; width: 94px; height: 94px; display: grid; place-items: center; color: var(--accent); border: 1px solid #efc76b33; border-radius: 22px; background: #efc76b08; box-shadow: 0 0 70px #efc76b0d, inset 0 0 20px #efc76b06; margin-bottom: 26px; }
.maze-emblem svg { width: 44px; height: 44px; }
.maze-ready .eyebrow { color: var(--accent); }
.maze-ready h2 { margin: 0 0 16px; font-size: clamp(21px,3vw,32px); letter-spacing: -.04em; }
.maze-ready p { color: #9ea79a; font-size: 15px; line-height: 1.7; margin: 0; }
.maze-key-hints { display: flex; align-items: center; gap: 5px; margin-top: 28px; }
.maze-key-hints kbd { width: 28px; height: 29px; display: grid; place-items: center; border: 1px solid #ffffff20; border-bottom-width: 3px; border-radius: 5px; font: 12px 'DM Mono', monospace; background: #ffffff05; color: #d1d6c9; }
.maze-key-hints span { font-size: 12px; color: #777f72; margin: 0 7px; }
.maze-corner { position: absolute; width: 17px; height: 17px; border-color: #efc76b38; border-style: solid; pointer-events: none; }
.maze-corner.top-left { top: 13px; left: 13px; border-width: 1px 0 0 1px; }
.maze-corner.bottom-right { bottom: 13px; right: 13px; border-width: 0 1px 1px 0; }
.maze-footer { margin-top: 4px; }
.maze-footer .primary-button { min-width: 195px; }
.maze-touch { display: none; gap: 6px; }
.maze-touch button { width: 42px; height: 42px; border: 1px solid #efc76b30; border-radius: 6px; color: var(--accent); background: #efc76b08; touch-action: none; }
.maze-urgent #maze-time { color: var(--danger); }
.maze-urgent #maze-timer-bar { background: var(--danger); }
.maze-urgent .maze-surface { border-color: #ff777e55; box-shadow: inset 0 0 45px #ff777e08; }
@media (max-width: 1200px) { .game-nav .nav-item { font-size: 13px; } }
@media (max-width: 1000px) { .game-nav .nav-item { white-space: nowrap; font-size: 14px; } }
@media (max-width: 760px) {
  .maze-touch { display: flex; }
  .maze-footer { gap: 12px; }
  .maze-footer p { width: 100%; }
  .maze-footer .primary-button { min-width: 0; width: auto; flex: 1; }
  #maze-canvas { height: 400px; }
}
@media (pointer: coarse) { .maze-touch { display: flex; } }

/* Reaction needs a wide field: keep its difficulty controls above the canvas. */
.osu-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
.osu-control-panel { min-height: 0; display: grid; grid-template-columns: minmax(280px,1fr) minmax(320px,1.25fr); gap: 24px; align-items: center; padding: 18px 22px; }
.osu-control-panel > .panel-heading, .osu-control-panel > .field-label { display: none; }
.class-picker { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.class-option { min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; }
.class-option > b { width: auto; height: auto; border: 0; background: none; font-size: 21px; }
.class-option span { display: block; }
.class-option strong { font-size: 11px; }
.class-option small { display: none; }
.osu-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; border: 0; margin: 0; padding: 0; }
.osu-rules p { display: flex; flex-direction: column; gap: 6px; font-size: 11px; margin: 0; line-height: 1.5; }
.osu-rules b { font-size: 10px; letter-spacing: .04em; }
.osu-shell { min-height: 400px; }
#osu-canvas { height: clamp(400px,51vh,570px); }
.osu-footer { margin-top: 14px; }
.osu-footer .primary-button { margin-top: 0; }
.osu-card { display: flex; flex-direction: column; }
.osu-card .game-hud { order: -3; }
.osu-progress-track { order: -2; }
.osu-footer { order: -1; margin: 0 0 18px; }
@media (max-width: 760px) {
  .osu-control-panel { grid-template-columns: 1fr; gap: 18px; }
  .osu-rules { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .osu-footer { display: flex; }
}
/* Keep the action visible before the playing field, including short screens. */
.game-card { display: flex; flex-direction: column; min-width: 0; }
.game-card > .game-hud { order: -4; }
.game-card > .timer-track, .game-card > .phase-timer-track, .game-card > .osu-progress-track { order: -3; }
.game-card > .game-footer, .game-card > .seismo-footer, .game-card > .osu-footer, .game-card > .lockpick-footer { order: -1; display: flex; margin: 0 0 18px; }
.game-card > .primary-button { order: -1; margin: 0 0 18px; }
.game-card > .game-footer .primary-button, .game-card > .seismo-footer .primary-button, .game-card > .lockpick-footer .primary-button { margin-top: 0; }
.terminal-layout { grid-template-columns: minmax(0,1fr); min-width: 0; }
.terminal-windowbar { grid-template-columns: 36px minmax(0,1fr) 96px; gap: 10px; }
.terminal-windowbar b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#terminal-targets { min-width: 0; }
@media (max-width: 600px) {
  .terminal-windowbar { font-size: 9px; grid-template-columns: 28px minmax(0,1fr) 82px; gap: 6px; }
  .game-card > .game-footer, .game-card > .seismo-footer, .game-card > .osu-footer, .game-card > .lockpick-footer { flex-wrap: wrap; }
}