@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap");

:root {
  color-scheme: dark;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --paper: #fff9ee;
  --muted: rgba(255, 249, 238, 0.57);
  --soft: rgba(255, 249, 238, 0.33);
  --gold: #eebc73;
  --ink: #191812;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --serif: "Playfair Display", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #191912; }
button, select, input { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.icon-sprite, .screenreader-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.game { position: relative; width: 100%; height: 100%; height: 100dvh; overflow: clip; isolation: isolate; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.vignette { pointer-events: none; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, transparent 27%, rgba(15, 12, 9, .18) 68%, rgba(15, 12, 9, .48) 100%), linear-gradient(to bottom, rgba(15, 12, 9, .35), transparent 24%, transparent 67%, rgba(15, 12, 9, .63)); }
.cinema-grain { pointer-events: none; position: absolute; inset: -5%; z-index: 1; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); animation: grain 1s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(2%, -4%); } 50% { transform: translate(-3%, 2%); } 75% { transform: translate(4%, 3%); } }
.flash { pointer-events: none; position: absolute; z-index: 3; inset: 0; background: radial-gradient(circle at center, rgba(255, 223, 151, .27), transparent 65%); opacity: 0; transition: opacity .25s ease; }
.flash.visible { opacity: 1; }

.hud-top, .counter, .hud-bottom, .field-signal, .milestone, .unlock-prompt, .interaction-hint { position: absolute; z-index: 4; opacity: 0; transition: opacity .75s ease, transform .75s ease; }
.game.playing .hud-top, .game.playing .counter, .game.playing .hud-bottom { opacity: 1; }
.hud-top { top: max(31px, env(safe-area-inset-top)); left: 43px; right: 43px; display: flex; justify-content: space-between; align-items: flex-start; }
.identity { display: flex; gap: 15px; align-items: center; }
.identity-mark { font-family: var(--serif); color: var(--gold); font-size: 38px; line-height: 1; }
.eyebrow { display: block; color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: .14em; line-height: 1.4; }
.identity h1 { margin: 3px 0 0; color: var(--paper); font-family: var(--serif); font-weight: 500; font-size: 18px; }
.identity p { margin: 0; }
.session-stats { display: flex; align-items: center; gap: 18px; }
.session-stat { margin-right: 9px; text-align: right; }
.session-stat strong { display: block; margin-top: 5px; color: var(--paper); font-family: var(--mono); font-size: 15px; font-weight: 400; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255, 249, 238, .18); border-radius: 50%; background: rgba(27, 23, 16, .16); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.icon-button:hover { border-color: var(--gold); background: rgba(27, 23, 16, .44); }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: var(--paper); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.3; }

.counter { top: 120px; left: 49px; width: 242px; }
.counter strong { display: block; margin-top: 7px; font-family: var(--mono); color: var(--paper); font-size: 35px; font-weight: 400; letter-spacing: -.05em; }
.progress-track { width: 100%; height: 2px; margin-top: 15px; background: rgba(255, 249, 238, .19); }
.progress-track i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .4s ease; }
.counter-meta { margin-top: 9px; display: flex; justify-content: space-between; color: var(--muted); font-family: var(--mono); font-size: 10px; }

.reticle { pointer-events: none; position: absolute; z-index: 4; width: 38px; height: 38px; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .45s; }
.game.playing .reticle { opacity: 1; }
.reticle-dot, .reticle-ring, .reticle-needle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.reticle-dot { width: 4px; height: 4px; border-radius: 50%; background: #fffaf0; box-shadow: 0 0 12px rgba(255, 241, 201, .6); }
.reticle-ring { width: 20px; height: 20px; border: 1px solid rgba(255, 249, 238, .6); border-radius: 50%; opacity: 0; transition: width .2s, height .2s, opacity .2s, border-color .2s; }
.reticle.active .reticle-ring { width: 32px; height: 32px; opacity: 1; }
.reticle.searching .reticle-ring { width: 22px; height: 22px; border-color: var(--gold); }
.reticle.found .reticle-ring { width: 38px; height: 38px; opacity: 1; border-color: #ffe1a0; box-shadow: 0 0 22px rgba(255, 212, 112, .7); }
.reticle-needle { width: 1px; height: 24px; transform: translate(-50%, -50%) rotate(37deg); background: #fff2c8; opacity: 0; }
.reticle.found .reticle-needle { opacity: 1; }
.interaction-hint { top: calc(50% + 35px); left: 50%; transform: translateX(-50%); color: rgba(255, 249, 238, .73); font-family: var(--mono); font-size: 9px; letter-spacing: .13em; white-space: nowrap; }
.game.playing .interaction-hint.visible { opacity: 1; }

.hud-bottom { right: 43px; bottom: max(31px, env(safe-area-inset-bottom)); left: 43px; display: flex; align-items: flex-end; justify-content: space-between; }
.tool-help { min-width: 235px; margin-bottom: 5px; }
.tool-help span { display: block; }
.tool-help span:first-child { color: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.tool-help span:last-child { max-width: 220px; margin-top: 6px; color: var(--muted); font-size: 11px; }
.toolbelt { display: flex; align-items: center; gap: 9px; }
.tool { position: relative; width: 57px; height: 59px; display: grid; place-items: center; border: 1px solid rgba(255, 249, 238, .24); background: rgba(20, 18, 13, .22); color: var(--paper); cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.tool:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(238, 188, 115, .76); }
.tool.selected { border-color: var(--gold); background: rgba(238, 188, 115, .16); }
.tool:disabled { opacity: .31; cursor: not-allowed; }
.tool svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.3; }
.tool-number { position: absolute; right: 5px; bottom: 4px; font-family: var(--mono); font-size: 8px; color: var(--muted); }
.tool-lock { position: absolute; top: 5px; right: 5px; font-size: 9px; }
.control-help { min-width: 235px; margin-bottom: 9px; color: var(--muted); font-family: var(--mono); font-size: 9px; text-align: right; white-space: nowrap; }
.control-help span { margin: 0 5px; color: var(--soft); }
kbd { color: var(--paper); font-family: var(--mono); }

.field-signal { top: 129px; right: 49px; text-align: right; }
.game.playing .field-signal:not([hidden]) { opacity: 1; }
.signal-bars { margin: 12px 0 8px; height: 19px; display: flex; justify-content: flex-end; align-items: flex-end; gap: 4px; }
.signal-bars i { width: 4px; background: rgba(255, 249, 238, .22); transition: background .2s; }
.signal-bars i:nth-child(1) { height: 5px; }.signal-bars i:nth-child(2) { height: 7px; }.signal-bars i:nth-child(3) { height: 9px; }.signal-bars i:nth-child(4) { height: 11px; }.signal-bars i:nth-child(5) { height: 13px; }.signal-bars i:nth-child(6) { height: 15px; }.signal-bars i:nth-child(7) { height: 17px; }.signal-bars i:nth-child(8) { height: 19px; }
.signal-bars i.lit { background: var(--gold); box-shadow: 0 0 8px rgba(238, 188, 115, .35); }
#signalLabel { color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; }

.milestone { top: 50%; left: 46px; max-width: 260px; transform: translateY(15px); }
.milestone.visible { opacity: 1; transform: translateY(0); }
.milestone strong { display: block; margin-top: 7px; color: var(--paper); font-family: var(--serif); font-size: 23px; font-weight: 500; }
.milestone > span:last-child { display: block; max-width: 210px; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.unlock-prompt { left: 50%; bottom: 119px; display: flex; align-items: center; gap: 25px; transform: translate(-50%, 10px); padding: 13px 15px 13px 18px; border: 1px solid rgba(238, 188, 115, .48); background: rgba(24, 21, 15, .86); }
.game.playing .unlock-prompt:not([hidden]) { opacity: 1; transform: translate(-50%, 0); }
.unlock-prompt strong { display: block; margin-top: 3px; color: var(--paper); font-size: 13px; font-weight: 500; }
.unlock-prompt button { border: 0; background: none; color: var(--gold); font-family: var(--mono); font-size: 11px; cursor: pointer; white-space: nowrap; }

.intro, .victory { position: absolute; z-index: 8; inset: 0; display: grid; align-items: center; }
.intro { opacity: 1; transition: opacity .75s ease, visibility .75s; }
.intro.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-shade, .victory-shade { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(22, 18, 13, .95) 0%, rgba(23, 19, 13, .87) 33%, rgba(23, 19, 13, .44) 66%, rgba(23, 19, 13, .18) 100%); }
.intro-card { position: relative; max-width: 680px; margin-left: clamp(65px, 12vw, 185px); }
.intro-index { color: var(--gold); font-family: var(--mono); font-size: 11px; letter-spacing: .16em; }
.intro-count { margin: 51px 0 0; color: var(--muted); font-family: var(--serif); font-size: clamp(28px, 4.1vw, 54px); }
.intro-count span { color: var(--paper); }
.intro-card h2 { margin: -6px 0 0; color: var(--paper); font-family: var(--serif); font-size: clamp(70px, 11vw, 145px); font-weight: 500; letter-spacing: -.065em; line-height: 1.03; }
.intro-card h2 span { color: var(--gold); font-style: italic; }
.intro-copy { max-width: 425px; margin: 26px 0 0; color: rgba(255, 249, 238, .68); font-size: 15px; line-height: 1.75; }
.enter-button { margin-top: 38px; padding: 16px 21px; border: 1px solid rgba(238, 188, 115, .78); background: rgba(238, 188, 115, .08); color: var(--gold); font-family: var(--mono); font-size: 11px; letter-spacing: .09em; cursor: pointer; transition: background .2s, transform .2s; }
.enter-button:hover { background: rgba(238, 188, 115, .2); transform: translateY(-2px); }
.enter-button span { margin-left: 22px; }
.intro-controls { display: flex; gap: 23px; margin-top: 30px; color: var(--muted); font-family: var(--mono); font-size: 10px; }
.intro-controls kbd { color: var(--gold); }
.save-indicator { display: block; margin-top: 18px; color: rgba(238, 188, 115, .8); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.save-indicator[hidden] { display: none; }
.intro-corner { position: absolute; right: 42px; bottom: 34px; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }

.settings-panel { position: absolute; top: 84px; right: 43px; z-index: 7; width: 360px; padding: 24px; border: 1px solid rgba(255, 249, 238, .17); background: rgba(27, 24, 18, .94); box-shadow: 0 20px 60px rgba(0, 0, 0, .22); }
.settings-panel[hidden], .victory[hidden], .unlock-prompt[hidden], .field-signal[hidden] { display: none; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; }
.settings-heading h2 { margin: 4px 0 0; color: var(--paper); font-family: var(--serif); font-size: 29px; font-weight: 500; }
.setting { display: block; margin-top: 21px; color: var(--paper); font-size: 13px; }
.setting select { width: 100%; margin-top: 9px; padding: 10px; border: 1px solid rgba(255, 249, 238, .19); border-radius: 0; background: #252117; color: var(--paper); font-size: 12px; }
.setting input[type="range"] { width: 100%; margin-top: 11px; accent-color: var(--gold); }
.toggle-setting { display: flex; justify-content: space-between; align-items: center; }
.toggle-setting input { width: 18px; height: 18px; accent-color: var(--gold); }
.settings-note { margin: 24px 0 16px; color: var(--muted); font-size: 11px; }
.reset-button { padding: 0; border: 0; background: none; color: #dca793; font-size: 11px; cursor: pointer; }

.victory { place-items: center; }
.victory-shade { background: rgba(19, 16, 11, .83); }
.victory-card { position: relative; width: min(530px, calc(100% - 48px)); text-align: center; }
.victory-needle { height: 160px; position: relative; margin: 28px 0 0; }
.victory-needle i { position: absolute; left: 50%; top: 12px; width: 3px; height: 128px; transform: rotate(29deg); border-radius: 5px; background: linear-gradient(#f7f5ed, #a5a69e, #fff2c6); box-shadow: 0 0 26px rgba(255, 233, 165, .8); }
.victory-card h2 { margin: 5px 0 0; color: var(--paper); font-family: var(--serif); font-size: clamp(55px, 9vw, 88px); font-weight: 500; letter-spacing: -.06em; }
.victory-card > p { margin: 11px auto 0; max-width: 340px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.victory-stats { display: flex; justify-content: center; gap: 48px; margin-top: 32px; }
.victory-stats strong { display: block; margin-top: 6px; color: var(--gold); font-family: var(--mono); font-size: 16px; font-weight: 400; }

.touch-controls { display: none; }
.joystick { position: absolute; left: 23px; bottom: 95px; width: 98px; height: 98px; border: 1px solid rgba(255, 249, 238, .35); border-radius: 50%; background: rgba(27, 24, 18, .2); touch-action: none; }
.joystick i { position: absolute; top: 32px; left: 32px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 249, 238, .57); }
#touchAction { position: absolute; right: 22px; bottom: 112px; width: 82px; height: 82px; border: 1px solid rgba(238, 188, 115, .7); border-radius: 50%; background: rgba(27, 24, 18, .56); color: var(--gold); font-family: var(--mono); font-size: 10px; touch-action: none; }

@media (max-width: 760px) {
  .hud-top { top: 20px; right: 18px; left: 18px; }.identity { gap: 8px; }.identity-mark { font-size: 29px; }.identity h1 { font-size: 15px; }.identity .eyebrow { font-size: 7px; }.session-stats { gap: 8px; }.session-stat { margin-right: 0; }.session-stat .eyebrow { font-size: 7px; }.session-stat strong { font-size: 12px; }.icon-button { width: 35px; height: 35px; }
  .counter { top: 86px; left: 23px; width: 176px; }.counter strong { font-size: 27px; }.counter .eyebrow { font-size: 8px; }
  .hud-bottom { right: 12px; bottom: 15px; left: 12px; justify-content: center; }.tool-help, .control-help { display: none; }.toolbelt { gap: 6px; }.tool { width: 48px; height: 51px; }
  .intro-card { margin-left: 28px; margin-right: 23px; }.intro-count { margin-top: 38px; font-size: 33px; }.intro-card h2 { font-size: clamp(68px, 17vw, 102px); }.intro-copy { max-width: 350px; font-size: 13px; }.intro-controls { flex-wrap: wrap; gap: 12px; }.intro-corner { right: 19px; bottom: 19px; font-size: 8px; }
  .settings-panel { top: 70px; right: 12px; width: min(350px, calc(100vw - 24px)); }.field-signal { top: 92px; right: 19px; }.milestone { left: 20px; }.unlock-prompt { width: max-content; max-width: calc(100vw - 25px); bottom: 82px; gap: 11px; }
}

@media (hover: none) and (pointer: coarse) { .game.playing .touch-controls { position: absolute; z-index: 5; inset: 0; display: block; pointer-events: none; }.touch-controls > * { pointer-events: auto; }.interaction-hint { top: calc(50% + 28px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.cinema-grain { animation: none; } }

/* Match the source footage: one camera, one reticle, one physical object. */
.reference-mode { background: #8b9cac; }
.reference-mode #world { cursor: crosshair; }
.reference-mode.dragging #world { cursor: grabbing; }
.reference-mode .hud-top,
.reference-mode .counter,
.reference-mode .hud-bottom,
.reference-mode .field-signal,
.reference-mode .milestone,
.reference-mode .unlock-prompt,
.reference-mode .intro { display: none !important; }
.reference-mode .vignette { background: radial-gradient(ellipse at center, transparent 47%, rgba(12, 15, 18, .1) 100%); }
.reference-mode .cinema-grain { opacity: .024; }
.reference-mode .reticle { z-index: 6; width: 12px; height: 12px; opacity: 1; }
.reference-mode .reticle-dot { width: 3px; height: 3px; background: rgba(255, 255, 255, .95); box-shadow: none; }
.reference-mode .reticle-ring,
.reference-mode .reticle.active .reticle-ring,
.reference-mode .reticle.searching .reticle-ring { width: 9px; height: 9px; opacity: .93; border: 1px solid rgba(255, 255, 255, .93); box-shadow: none; }
.reference-mode .reticle.found .reticle-ring { width: 13px; height: 13px; border-color: #fff7cf; box-shadow: 0 0 12px rgba(255, 226, 145, .72); }
.reference-mode .interaction-hint { top: auto; bottom: 55px; padding: 6px 11px; color: rgba(32, 33, 36, .5); font-size: 9px; letter-spacing: .08em; text-shadow: 0 1px 1px rgba(255, 255, 255, .7); }
.reference-mode .interaction-hint.quiet { opacity: 0 !important; }
.reference-mark { pointer-events: none; position: absolute; z-index: 3; right: 0; bottom: 5px; left: 0; text-align: center; color: rgba(231, 231, 231, .39); font-family: Arial, sans-serif; font-size: clamp(19px, 3.2vw, 45px); font-weight: 500; letter-spacing: -.045em; text-shadow: 0 1px 2px rgba(0, 0, 0, .07); }
.held-piece { pointer-events: none; position: absolute; z-index: 4; top: 50%; left: 50%; width: clamp(170px, 23vw, 385px); height: clamp(7px, .92vw, 13px); transform: translate(-50%, -50%); border: 1px solid rgba(211, 161, 69, .65); background: linear-gradient(180deg, #f3d789 0%, #e7c26b 35%, #d4ab51 83%, #b48932 100%); box-shadow: 0 1px 1px rgba(64, 41, 9, .32), 0 3px 10px rgba(49, 38, 17, .14); }
.held-piece[hidden] { display: none; }
.held-piece.needle { height: 5px; border-color: rgba(230, 231, 220, .92); background: linear-gradient(180deg, #fffef4, #bfc4c6 47%, #f3f4ea 77%, #85898b); box-shadow: 0 0 12px rgba(255, 246, 210, .42), 0 1px 3px rgba(0, 0, 0, .24); }
.held-piece.needle::after { position: absolute; top: -2px; right: 7px; width: 12px; height: 7px; content: ""; border: 1px solid rgba(93, 95, 91, .78); border-radius: 50%; }
.reference-mode .touch-controls { z-index: 5; }
.reference-mode #touchAction { border-color: rgba(86, 86, 77, .48); background: rgba(241, 240, 226, .44); color: #383831; }
.reference-mode .joystick { border-color: rgba(86, 86, 77, .48); background: rgba(241, 240, 226, .23); }
.reference-mode .joystick i { background: rgba(72, 72, 62, .45); }

@media (max-width: 760px) {
  .reference-mode .reference-mark { bottom: 6px; font-size: 24px; }
  .reference-mode .interaction-hint { bottom: 45px; max-width: calc(100vw - 22px); font-size: 7px; white-space: normal; text-align: center; }
  .reference-mode .held-piece { width: 48vw; height: 8px; }
}