:root {
  color-scheme: dark;
  --bg: #05040b;
  --panel: #0c0a17;
  --purple: #35275f;
  --purple-light: #715fa7;
  --gold: #e9bd43;
  --gold-light: #ffe49a;
  --cream: #eee8d5;
  --green: #6bc472;
  --red: #d34f43;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -15%, rgba(70, 52, 135, .38), transparent 48%),
    linear-gradient(180deg, #070511 0%, #030208 100%);
  color: var(--cream);
  font-family: "Courier New", Courier, monospace;
  overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }

.app-shell { width: min(1180px, 100%); margin: 0 auto; padding: 14px; }
.brand-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 10px; padding: 6px 4px; text-transform: uppercase;
}
.brand-lockup { display: flex; align-items: baseline; flex-wrap: wrap; gap: 11px; }
.brand-name { color: var(--gold); font-size: clamp(1.3rem, 3vw, 2.15rem); font-weight: 900; text-transform: lowercase; }
.brand-game { color: white; font-size: clamp(1.05rem, 2.4vw, 1.65rem); letter-spacing: .11em; font-weight: 900; }
.build-badge { color: #9d93bd; font-size: .64rem; border: 1px solid #4e416e; padding: 3px 6px; }
.brand-link { color: #c0b4ea; text-decoration: none; font-size: .8rem; }

.game-frame {
  border: 4px solid #201846;
  outline: 2px solid #7767af;
  background: #020205;
  padding: clamp(7px, 1.7vw, 16px);
  box-shadow: 0 0 38px rgba(72, 54, 130, .44), inset 0 0 18px rgba(0,0,0,.9);
}
.crt-shell {
  position: relative; width: 100%; max-width: 1024px; margin: 0 auto; aspect-ratio: 4 / 3;
  overflow: hidden; background: #000; border: 2px solid #261d4c;
  box-shadow: inset 0 0 42px rgba(0,0,0,.95), 0 0 24px rgba(57,43,103,.4);
}
#gameCanvas { display: block; width: 100%; height: 100%; background: #000; image-rendering: pixelated; }
.scanlines, .vignette { position: absolute; inset: 0; pointer-events: none; }
.scanlines {
  opacity: .25;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.28) 3px 4px);
  mix-blend-mode: multiply;
}
.vignette { box-shadow: inset 0 0 65px rgba(0,0,0,.63); }
.loading-panel {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold);
  background: #05040b; font-weight: 900; letter-spacing: .12em; z-index: 5;
}
.loading-panel.hidden { display: none; }

.desktop-help, .utility-controls, .touch-controls { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.desktop-help { padding: 10px 0 3px; color: #a7a0bd; font-size: .72rem; }
.utility-controls { margin-top: 9px; }
.utility-controls button, .control-button {
  color: var(--cream); background: #17112b; border: 2px solid #5d4c8d; border-bottom-color: #2a204e;
  padding: 8px 13px; font-weight: 900; letter-spacing: .035em; box-shadow: 3px 3px 0 #030207;
}
.utility-controls button:active, .control-button:active, .control-button.active {
  transform: translate(2px, 2px); box-shadow: 1px 1px 0 #030207; background: #30245a;
}
.touch-controls { display: none; margin-top: 12px; }
.dpad { display: grid; grid-template: repeat(3, 48px) / repeat(3, 54px); gap: 4px; }
.dpad-up { grid-area: 1 / 2; }
.dpad-left { grid-area: 2 / 1; }
.dpad-down { grid-area: 2 / 2; }
.dpad-right { grid-area: 2 / 3; }
.control-button { min-width: 54px; min-height: 46px; font-size: .95rem; }
.fire-button { min-width: 100px; min-height: 70px; color: #100c12; background: var(--gold); border-color: var(--gold-light); }

.prototype-note { display: grid; gap: 5px; padding: 15px 3px 0; color: #a9a2bd; font-size: .76rem; line-height: 1.45; }
.prototype-note strong { color: var(--gold); }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(3,2,8,.87); backdrop-filter: blur(5px);
}
.modal-backdrop[hidden] { display: none; }
.retro-modal {
  position: relative; width: min(760px, 100%); max-height: min(92vh, 840px); overflow: auto;
  border: 4px solid #554187; outline: 2px solid #a190d4;
  background: linear-gradient(180deg, #17112c, #090711); padding: 24px;
  box-shadow: 14px 14px 0 #010104, inset 0 0 30px rgba(0,0,0,.45);
}
.retro-modal h2 { margin: 0 42px 17px 0; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.modal-close { position: absolute; right: 11px; top: 9px; width: 36px; height: 36px; color: white; background: #2d2250; border: 2px solid #7867a9; font-size: 1.35rem; }
.retro-form { display: grid; gap: 12px; }
.retro-form label { display: grid; gap: 5px; color: #ddd7e9; font-size: .8rem; text-transform: uppercase; }
.retro-form input, .retro-form select, .retro-form textarea {
  width: 100%; border: 2px solid #5d4c8d; background: #06050b; color: white; padding: 10px; border-radius: 0;
}
.retro-form textarea { min-height: 92px; resize: vertical; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check-grid label { display: flex; align-items: center; gap: 8px; border: 1px solid #3c315f; padding: 8px; }
.retro-cta, .retro-secondary {
  display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 9px 15px;
  font-weight: 900; text-transform: uppercase; cursor: pointer; text-decoration: none;
}
.retro-cta { border: 2px solid #fff0a6; background: var(--gold); color: #100c12; }
.retro-secondary { border: 2px solid #5d4c8d; background: #18122d; color: white; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
.notice { border-left: 4px solid var(--gold); background: rgba(233,189,67,.08); padding: 12px; line-height: 1.45; }
.success { border: 2px solid var(--green); background: rgba(107,196,114,.1); padding: 14px; }
.reward-box { display: grid; gap: 5px; justify-items: center; border: 3px double var(--gold); padding: 18px; margin: 14px 0; background: rgba(0,0,0,.35); text-align: center; }
.reward-value { color: var(--gold); font-size: clamp(1.7rem, 7vw, 3rem); font-weight: 900; }
.small-print { color: #aaa1bf; font-size: .72rem; line-height: 1.5; }
.glitch-bridge {
  position: relative; overflow: hidden; margin: 14px 0 18px; padding: 22px 14px; text-align: center;
  border: 2px solid #6754a3; background: radial-gradient(circle, rgba(61,144,190,.28), rgba(16,9,34,.94));
  box-shadow: inset 0 0 30px rgba(82,189,255,.2);
}
.glitch-bridge::before, .glitch-bridge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.08) 18px 20px);
  animation: glitchShift .55s steps(2) infinite;
}
.glitch-bridge::after { background: repeating-linear-gradient(0deg, transparent 0 11px, rgba(116,215,255,.12) 11px 13px); animation-direction: reverse; }
.glitch-title { position: relative; z-index: 1; color: #86e3ff; font-weight: 900; font-size: clamp(1rem, 4vw, 1.55rem); letter-spacing: .05em; }
.glitch-route { position: relative; z-index: 1; margin-top: 9px; color: var(--gold); font-weight: 900; }
@keyframes glitchShift { 0% { transform: translateX(-5px); } 50% { transform: translateX(6px); } 100% { transform: translateX(-2px); } }

@media (pointer: coarse), (max-width: 780px) {
  .app-shell { padding: 7px; }
  .brand-bar { align-items: center; }
  .touch-controls { display: flex; }
  .desktop-help { display: none; }
  .game-frame { padding: 6px; }
  .utility-controls button { font-size: .7rem; padding: 7px 9px; }
  .retro-modal { padding: 17px; }
  .check-grid { grid-template-columns: 1fr; }
}
@media (display-mode: standalone) { .brand-link { display: none; } }

/* v0.3 — Telegraph time-machine sequence */
.retro-modal { width: min(860px, 100%); }
.form-grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.time-machine-stage {
  position: relative;
  overflow: hidden;
  margin: 0 0 18px;
  padding: 12px;
  min-height: 390px;
  border: 3px solid #4f3e7c;
  outline: 1px solid #9b85ce;
  background:
    linear-gradient(rgba(9,6,13,.42), rgba(4,3,8,.8)),
    repeating-linear-gradient(90deg, #3a2314 0 14px, #24140d 14px 18px);
  box-shadow: inset 0 0 50px rgba(0,0,0,.78), 0 0 30px rgba(92,75,174,.22);
}
.telegraph-header {
  position: relative; z-index: 4; display: flex; justify-content: center; align-items: center; gap: 13px;
  padding: 9px 10px; border: 2px solid #8f6c2b; background: rgba(5,4,9,.9);
  color: var(--gold); font-weight: 900; letter-spacing: .07em; text-align: center;
}
.telegraph-arrow { color: #76e5ff; font-size: 1.5rem; text-shadow: 0 0 12px #66d8ff; }
.telegraph-room { position: relative; z-index: 2; height: 235px; margin-top: 12px; display: grid; place-items: center; }
.telegraph-device {
  position: absolute; left: 6%; bottom: 23px; width: 185px; height: 105px;
  border: 4px ridge #9a7136; background: linear-gradient(145deg, #55351c, #1d120b 70%);
  box-shadow: 0 18px 20px rgba(0,0,0,.48), inset 0 0 20px rgba(255,190,67,.16);
}
.telegraph-key { position: absolute; left: 34px; bottom: 24px; width: 90px; height: 12px; background: #b58a46; transform: rotate(-8deg); transform-origin: left center; box-shadow: 0 0 6px #ffd05a; }
.telegraph-key::before { content: ''; position: absolute; right: -10px; top: -10px; width: 25px; height: 25px; border-radius: 50%; background: #d9b56b; border: 3px solid #5b3a17; }
.telegraph-coil { position: absolute; right: 18px; top: 16px; width: 38px; height: 55px; border: 7px double #b9893a; border-radius: 50%; box-shadow: 0 0 12px rgba(255,201,82,.35); }
.telegraph-spark { position: absolute; right: -42px; top: 39px; width: 62px; height: 4px; opacity: .22; background: #87eaff; box-shadow: 0 0 12px #67dfff; transform: rotate(-10deg); }
.spark-two { top: 62px; right: -58px; transform: rotate(13deg); }
.portal-aperture {
  position: relative; z-index: 3; width: 300px; height: 222px; margin-left: 31%;
  overflow: hidden; border: 4px solid rgba(137,103,224,.86); border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%;
  background: #050511; transform: scale(.04) rotate(-14deg); opacity: .08;
  box-shadow: 0 0 0 8px rgba(89,69,170,.18), 0 0 55px 18px rgba(73,196,255,.2), inset 0 0 38px rgba(107,81,255,.82);
  transition: transform 1.15s cubic-bezier(.16,.9,.24,1.1), opacity .7s ease, filter .8s ease;
}
.portal-aperture::before,
.portal-aperture::after { content: ''; position: absolute; inset: -15%; z-index: 2; border: 4px dashed rgba(139,225,255,.75); border-radius: 50%; animation: portalSpin 2.2s linear infinite; pointer-events: none; }
.portal-aperture::after { inset: -4%; border-style: dotted; animation-direction: reverse; animation-duration: 1.35s; }
.portal-aperture img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; filter: saturate(.92) contrast(1.08) brightness(.95); }
.portal-label { position: absolute; z-index: 4; left: 50%; bottom: 9px; transform: translateX(-50%); padding: 6px 10px; color: #9cecff; background: rgba(2,7,18,.78); border: 1px solid #6ac9f5; font-weight: 900; letter-spacing: .08em; white-space: nowrap; text-shadow: 0 0 8px #58d4ff; }
.telegraph-copy { position: relative; z-index: 4; display: grid; gap: 4px; text-align: center; color: #c8bedf; font-size: .8rem; }
.telegraph-copy strong { color: #8de9ff; font-size: 1.05rem; letter-spacing: .08em; }
.telegraph-trigger { position: relative; z-index: 5; display: flex; margin: 12px auto 0; }
.time-machine-stage.active .portal-aperture { transform: scale(1) rotate(0); opacity: 1; filter: brightness(1.08); animation: portalPulse 1.2s ease-in-out infinite alternate; }
.time-machine-stage.active .telegraph-key { animation: keyTap .28s steps(2) 5; }
.time-machine-stage.active .telegraph-spark { opacity: 1; animation: sparkFlash .16s steps(2) infinite; }
.time-machine-stage.active::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(103,220,255,.14) 9px 11px); animation: timeGlitch .18s steps(2) 8; opacity: 0; }
.telegraph-destination-panel { opacity: 0; transform: translateY(15px); transition: opacity .45s ease, transform .45s ease; }
.telegraph-destination-panel.revealed { opacity: 1; transform: translateY(0); }
.telegraph-destination-panel[hidden] { display: none; }

@keyframes portalSpin { to { transform: rotate(360deg); } }
@keyframes portalPulse { from { box-shadow: 0 0 0 7px rgba(89,69,170,.16), 0 0 42px 14px rgba(73,196,255,.25), inset 0 0 30px rgba(107,81,255,.7); } to { box-shadow: 0 0 0 11px rgba(89,69,170,.25), 0 0 75px 28px rgba(73,196,255,.46), inset 0 0 52px rgba(107,81,255,.92); } }
@keyframes keyTap { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(5deg); } }
@keyframes sparkFlash { 0% { transform: translateX(-3px) rotate(-10deg) scaleX(.65); } 100% { transform: translateX(7px) rotate(4deg) scaleX(1.25); } }
@keyframes timeGlitch { 0% { opacity: 0; transform: translateX(-4px); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateX(5px); } }

@media (max-width: 680px) {
  .form-grid.two { grid-template-columns: 1fr; }
  .time-machine-stage { min-height: 420px; }
  .telegraph-room { height: 260px; }
  .telegraph-device { left: 50%; bottom: 8px; transform: translateX(-50%) scale(.75); }
  .portal-aperture { margin-left: 0; margin-top: -28px; width: 250px; height: 205px; }
  .telegraph-header { font-size: .72rem; gap: 7px; }
}


/* v0.4 fixes */
* { box-sizing: border-box; }
.retro-modal, .retro-modal * { max-width: 100%; }
.retro-form label, .check-grid label, .notice, .success, .small-print, .retro-modal code { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.form-grid.two > label, .retro-form label { min-width: 0; }
.retro-form input, .retro-form select, .retro-form textarea { box-sizing: border-box; }
.canvas-back-hint { color: #c4bdd9; }

.modal-zoom-image{display:block;width:min(100%,560px);height:auto;border:3px solid #b88a2a;border-radius:8px;margin:12px auto 6px;box-shadow:0 0 0 2px rgba(12,8,4,.7),0 14px 24px rgba(0,0,0,.35)}


/* v0.7 animation refinements */
.orlando-zoom-wrap{overflow:hidden;border-radius:8px;margin:12px auto 6px;width:min(100%,560px);border:3px solid #b88a2a;box-shadow:0 0 0 2px rgba(12,8,4,.7),0 14px 24px rgba(0,0,0,.35)}
.orlando-zoom-wrap .modal-zoom-image{margin:0;border:0;box-shadow:none;width:100%;animation:orlandoBreathe 4.5s ease-in-out infinite}
@keyframes orlandoBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012) translateY(-1px)}}


/* v0.9: cinematic temporal rift and calmer scene motion */
.time-machine-stage{min-height:510px;background:linear-gradient(rgba(5,2,10,.25),rgba(2,1,6,.88)),repeating-linear-gradient(90deg,#3b2415 0 14px,#21120b 14px 18px);perspective:900px}
.telegraph-room{height:330px;overflow:hidden;isolation:isolate}
.temporal-blackout{position:absolute;inset:0;background:radial-gradient(circle at 62% 48%,rgba(255,30,183,0),rgba(3,1,8,.72) 62%,rgba(0,0,0,.94));opacity:.15;transition:opacity .8s ease;z-index:1}
.time-machine-stage.charging .temporal-blackout{opacity:.55}.time-machine-stage.opening .temporal-blackout,.time-machine-stage.stable .temporal-blackout{opacity:.82}
.telegraph-device{left:4%;bottom:74px;width:205px;height:125px;z-index:8;transform-origin:center bottom;transition:filter .4s ease,transform .4s ease}
.telegraph-dial{position:absolute;right:68px;top:18px;width:42px;height:42px;border:4px solid #b9893a;border-radius:50%;background:radial-gradient(circle,#52351c,#140c08);box-shadow:inset 0 0 10px #000}
.telegraph-dial::after{content:"";position:absolute;left:19px;top:4px;width:3px;height:17px;background:#ffd76f;transform-origin:50% 100%;transform:rotate(-42deg)}
.telegraph-wire{position:absolute;right:-122px;top:61px;width:135px;height:4px;background:linear-gradient(90deg,#7d5528,#ff4fd8);box-shadow:0 0 8px #ff4fd8;opacity:.18}
.time-machine-stage.charging .telegraph-key{animation:keyTap .22s steps(2) 12}.time-machine-stage.charging .telegraph-coil{animation:coilCharge .4s ease-in-out infinite alternate}.time-machine-stage.charging .telegraph-dial::after{animation:dialSweep .9s ease-in-out infinite alternate}.time-machine-stage.charging .telegraph-wire{opacity:1;animation:wirePulse .24s steps(2) infinite}.time-machine-stage.charging .telegraph-device{filter:brightness(1.25) saturate(1.35)}
.temporal-rift{position:absolute;z-index:6;left:62%;top:48%;width:4px;height:24px;transform:translate(-50%,-50%);opacity:0;filter:drop-shadow(0 0 2px #ff4fd8);transition:width 1.1s cubic-bezier(.12,.8,.25,1),height 1.1s cubic-bezier(.12,.8,.25,1),opacity .35s ease,filter .8s ease}
.rift-core{position:absolute;inset:12px;overflow:hidden;border-radius:48% 52% 46% 54%/55% 45% 55% 45%;background:#08000d;opacity:0;transform:scaleX(.02);transition:opacity .5s ease .55s,transform 1s cubic-bezier(.12,.85,.2,1) .2s;box-shadow:inset 0 0 45px rgba(255,60,210,.72)}
.rift-core img{width:100%;height:100%;object-fit:cover;filter:contrast(1.1) saturate(.95) brightness(.85);animation:hamburgParallax 8s ease-in-out infinite alternate}
.rift-aura{position:absolute;inset:-26px;border-radius:50%;background:conic-gradient(from 0deg,transparent,#ff4fd8,transparent,#9c4dff,transparent,#ff8ae6,transparent);filter:blur(10px);opacity:.0;animation:riftRotate 2.4s linear infinite}
.rift-lightning{position:absolute;inset:-6px;border:5px solid #ff4fd8;border-radius:50%;opacity:0;box-shadow:0 0 14px #ff4fd8,0 0 32px #ad35ff,inset 0 0 26px #ff4fd8;clip-path:polygon(0 6%,35% 0,32% 8%,63% 2%,60% 11%,100% 4%,96% 42%,100% 72%,91% 69%,98% 100%,62% 94%,58% 100%,25% 93%,28% 85%,0 91%)}
.ring-b{inset:2px;border-color:#f6a4ff;animation-direction:reverse}
.rift-particles{position:absolute;inset:-35px;pointer-events:none}.rift-particles i{position:absolute;left:50%;top:50%;width:4px;height:4px;background:#ff8ae6;box-shadow:0 0 9px #ff4fd8;transform:rotate(calc(var(--i)*25.7deg)) translateX(10px);opacity:0}
.energy-beam{position:absolute;z-index:7;left:217px;top:195px;width:250px;height:3px;transform-origin:left center;background:linear-gradient(90deg,#78e8ff,#ff4fd8 50%,transparent);box-shadow:0 0 9px #ff4fd8;opacity:0;clip-path:polygon(0 35%,18% 0,34% 100%,49% 15%,66% 82%,83% 5%,100% 44%,100% 72%,84% 25%,68% 100%,50% 35%,33% 88%,17% 23%,0 65%)}
.beam-two{top:225px;transform:rotate(7deg)}.beam-three{top:168px;transform:rotate(-8deg)}
.temporal-meter{height:13px;margin:9px 13%;border:2px solid #5e376e;background:#07030c;overflow:hidden}.temporal-meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,#7aeaff,#ff4fd8,#d657ff);box-shadow:0 0 10px #ff4fd8;transition:width 2.8s cubic-bezier(.18,.75,.2,1)}
.time-machine-stage.charging .temporal-meter span{width:30%}.time-machine-stage.arcing .temporal-meter span{width:62%}.time-machine-stage.opening .temporal-meter span{width:88%}.time-machine-stage.stable .temporal-meter span{width:100%}
.time-machine-stage.arcing .energy-beam{opacity:1;animation:beamFlicker .15s steps(2) infinite}.time-machine-stage.arcing .temporal-rift{opacity:1}.time-machine-stage.opening .temporal-rift,.time-machine-stage.stable .temporal-rift{opacity:1;width:350px;height:255px;filter:drop-shadow(0 0 18px #ff4fd8) drop-shadow(0 0 45px #7728ff)}
.time-machine-stage.opening .rift-core,.time-machine-stage.stable .rift-core{opacity:1;transform:scaleX(1)}.time-machine-stage.opening .rift-aura,.time-machine-stage.stable .rift-aura{opacity:.7}.time-machine-stage.opening .rift-lightning,.time-machine-stage.stable .rift-lightning{opacity:1;animation:riftJitter .28s steps(2) infinite}.time-machine-stage.opening .rift-particles i,.time-machine-stage.stable .rift-particles i{opacity:1;animation:particleOrbit 1.7s linear infinite;animation-delay:calc(var(--i)*-.11s)}
.time-machine-stage.stable .energy-beam{opacity:.28;animation:beamFlicker .8s ease-in-out infinite alternate}
@keyframes coilCharge{to{box-shadow:0 0 25px #ff4fd8,inset 0 0 16px #ff4fd8;transform:scale(1.07)}}@keyframes dialSweep{to{transform:rotate(82deg)}}@keyframes wirePulse{50%{filter:brightness(2);transform:scaleX(1.04)}}@keyframes beamFlicker{0%{filter:brightness(.7);transform:translateY(-1px) scaleX(.92)}100%{filter:brightness(2.2);transform:translateY(2px) scaleX(1.05)}}@keyframes riftRotate{to{transform:rotate(360deg)}}@keyframes riftJitter{0%{transform:translate(-2px,1px) rotate(-1deg)}100%{transform:translate(2px,-1px) rotate(1deg)}}@keyframes particleOrbit{from{transform:rotate(calc(var(--i)*25.7deg)) translateX(30px) scale(.5)}to{transform:rotate(calc(var(--i)*25.7deg + 360deg)) translateX(195px) scale(1.4)}}@keyframes hamburgParallax{from{transform:scale(1.04) translateX(-2%)}to{transform:scale(1.1) translateX(2%)}}
@media(max-width:680px){.time-machine-stage{min-height:540px}.telegraph-room{height:355px}.telegraph-device{left:50%;bottom:10px;transform:translateX(-50%) scale(.7)}.temporal-rift{left:50%;top:37%}.time-machine-stage.opening .temporal-rift,.time-machine-stage.stable .temporal-rift{width:270px;height:205px}.energy-beam{display:none}}


/* v0.10 — Dawson City Most Wanted and corrected Hamburg future window */
.dawson-room-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:brightness(.52) saturate(.8) contrast(1.08);z-index:0;transform:scale(1.04)}
.temporal-origin-label{position:absolute;z-index:5;left:18px;top:16px;padding:6px 9px;color:#ffe5a0;background:rgba(19,8,3,.82);border:1px solid #9f702d;font-size:.68rem;font-weight:900;letter-spacing:.05em;text-shadow:0 1px 2px #000}
.time-machine-stage.charging .dawson-room-backdrop{animation:dawsonRoomPulse .38s steps(2) infinite}
.time-machine-stage.opening .dawson-room-backdrop,.time-machine-stage.stable .dawson-room-backdrop{filter:brightness(.34) saturate(.62) contrast(1.12)}
@keyframes dawsonRoomPulse{0%{filter:brightness(.52) saturate(.8)}100%{filter:brightness(.66) saturate(1.05)}}
@media(max-width:680px){.temporal-origin-label{font-size:.55rem;left:8px;top:8px}}

/* v0.12 combined poster */
.wanted-poster-wrap{width:min(100%,520px);margin:10px auto 14px;padding:10px;background:#2b190f;border:3px solid #8c5d17;box-shadow:0 12px 28px rgba(0,0,0,.45)}
.wanted-poster-wrap .modal-zoom-image{display:block;width:100%;height:auto;margin:0;border:0;box-shadow:none}


/* v0.12 dev5 — Calder portrait */
.wanted-poster-wrap {
  width: min(100%, 620px);
  margin: 0 auto 14px;
  padding: 18px;
  border: 8px double #3a2415;
  background: #c9ae74;
  box-shadow: 0 18px 42px rgba(0,0,0,.44);
}
.wanted-poster-wrap .modal-zoom-image {
  width: 100%;
  max-height: 54vh;
  margin: 0;
  object-fit: contain;
  border: 0;
  filter: sepia(.86) grayscale(.18) contrast(1.14) brightness(.84);
}


/* v0.12 dev7 — in-world saloon interactions */
.saloon-board {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 3px double var(--gold);
  background:
    linear-gradient(rgba(13, 7, 4, .82), rgba(5, 3, 2, .94)),
    repeating-linear-gradient(90deg, #5d351a 0 12px, #3f2413 12px 15px);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .58);
}
.saloon-board > p { margin: 0; line-height: 1.5; }
.pour-meter {
  position: relative;
  height: 34px;
  margin: 8px 6px 4px;
  border: 3px solid #2a160b;
  outline: 2px solid #9b6b2d;
  background: linear-gradient(90deg, #531c17 0 28%, #a76a20 28% 43%, #e9bd43 43% 57%, #a76a20 57% 72%, #531c17 72% 100%);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .72);
}
.pour-meter i {
  position: absolute;
  inset: 0 auto 0 43%;
  width: 14%;
  border-left: 2px solid #fff2a7;
  border-right: 2px solid #fff2a7;
  background: rgba(255, 235, 130, .14);
  pointer-events: none;
}
.pour-meter span {
  position: absolute;
  z-index: 2;
  top: -7px;
  width: 8px;
  height: 46px;
  margin-left: -4px;
  background: #fff;
  border: 2px solid #22130b;
  box-shadow: 0 0 12px #ffe49a;
}
.piano-sequence,
.piano-keys,
.draw-hand {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.piano-sequence b {
  display: grid;
  min-height: 52px;
  place-items: center;
  border: 2px solid #7d622f;
  background: #100b17;
  color: var(--gold-light);
  font-size: 1.45rem;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .34);
}
.piano-sequence b:nth-child(5) { grid-column: 2 / 4; }
.piano-keys button,
.draw-hand button {
  min-height: 68px;
  border: 2px solid #7a68aa;
  border-bottom-width: 5px;
  background: #17112b;
  color: white;
  cursor: pointer;
  font-weight: 900;
  box-shadow: 3px 3px 0 #020104;
}
.piano-keys button:hover,
.piano-keys button:focus-visible,
.draw-hand button:hover,
.draw-hand button:focus-visible {
  border-color: var(--gold-light);
  color: var(--gold-light);
  outline: none;
}
.piano-keys button:active,
.draw-hand button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #020104; }
.draw-hand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.draw-hand button {
  display: grid;
  gap: 7px;
  place-items: center;
  min-height: 142px;
  background: #eee8d5;
  border-color: #8c5d17;
  color: #27140d;
}
.draw-hand span { font-size: clamp(2rem, 8vw, 3.5rem); color: #b3312d; }
.draw-hand small { font-size: .62rem; letter-spacing: .04em; }
.studio-invite {
  margin-bottom: 16px;
  padding: 15px;
  border-left: 5px solid var(--gold);
  background: rgba(233, 189, 67, .08);
  line-height: 1.55;
}
.studio-invite p { margin: 0 0 8px; }
.studio-invite p:last-child { margin-bottom: 0; }
#studioStatus { min-height: 1.5em; }
@media (max-width: 620px) {
  .piano-sequence,
  .piano-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piano-sequence b:nth-child(5) { grid-column: 1 / -1; }
  .draw-hand { gap: 6px; }
  .draw-hand button { min-height: 112px; padding: 7px 4px; }
  .draw-hand small { font-size: .52rem; }
}


/* v0.12 dev7 — Sheriff facade poster and wood UI */
.sheriff-poster-crop {
  width: min(100%, 390px);
  margin: 0 auto 16px;
  overflow: hidden;
  border: 7px solid #281309;
  outline: 3px solid #9b632d;
  background: #160c07;
  box-shadow: 0 18px 38px rgba(0,0,0,.55), inset 0 0 18px rgba(0,0,0,.45);
}
.sheriff-poster-crop canvas { display: block; width: 100%; height: auto; }
.sheriff-wood-card {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 17px 19px;
  border: 5px solid #281309;
  outline: 2px solid #a66a30;
  color: #f2e4c5;
  background:
    linear-gradient(rgba(74,39,17,.72), rgba(30,14,7,.9)),
    repeating-linear-gradient(7deg, #76461f 0 10px, #603617 10px 13px);
  box-shadow: inset 0 0 20px rgba(0,0,0,.55), 7px 8px 0 rgba(0,0,0,.32);
  line-height: 1.5;
}
.sheriff-wood-card::before,
.sheriff-wood-card::after {
  content: '';
  position: absolute;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #17100b;
  box-shadow: 0 calc(100% + 40px) 0 #17100b;
}
.sheriff-wood-card::before { left: 10px; }
.sheriff-wood-card::after { right: 10px; }
.sheriff-wood-card strong { color: var(--gold-light); font-size: clamp(1.05rem, 3vw, 1.45rem); letter-spacing: .04em; }
.sheriff-wood-card p { margin: 0; }
.sheriff-wood-kicker { color: #d4a85a; font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.sheriff-status-card { justify-items: center; text-align: center; }
.sheriff-status-card > strong { color: var(--gold); font-size: clamp(2rem, 8vw, 3.8rem); line-height: 1; }
.sheriff-status-card small { color: #e5d4b2; }
.retro-cta.sheriff-wood-button,
.retro-secondary.sheriff-wood-button {
  border: 4px solid #281309;
  outline: 2px solid #a66a30;
  color: #fff0c6;
  background: linear-gradient(#7b4922, #3c1d0d);
  box-shadow: inset 0 0 12px rgba(0,0,0,.45), 4px 5px 0 #020104;
}
.retro-cta.sheriff-wood-button:hover,
.retro-secondary.sheriff-wood-button:hover { color: var(--gold-light); filter: brightness(1.12); }
@media (max-width: 620px) {
  .sheriff-poster-crop { width: min(100%, 300px); }
  .sheriff-wood-card { padding: 14px 15px; }
}


/* v0.12 dev8 — accessible Western typography, audio controls and database status */
body, button, input, select, textarea { font-family: "Roboto Slab", Rockwell, Georgia, serif; }
.retro-modal h2, .brand-game { font-family: Rye, "Rockwell Extra Bold", "Roboto Slab", Georgia, serif; font-weight: 400; letter-spacing: .035em; }
.utility-controls { row-gap: 12px; }
.volume-control {
  display: grid;
  grid-template-columns: auto minmax(92px, 145px) 42px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 10px;
  border: 2px solid #7f552a;
  background: linear-gradient(#5f3417, #2d1409);
  color: #fff4d2;
  box-shadow: inset 0 0 10px rgba(0,0,0,.5), 3px 3px 0 #020104;
  font-size: .72rem;
  font-weight: 800;
}
.volume-control input { width: 100%; accent-color: #e9bd43; }
.volume-control output { color: #ffe49a; text-align: right; font-variant-numeric: tabular-nums; }
.data-status {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 2px solid #66513a;
  background: #17100b;
  color: #d8cdb7;
  font-size: .7rem;
  font-weight: 800;
}
.data-status[data-state="connected"] { border-color: #5da867; color: #bdf4c5; }
.data-status[data-state="offline"] { border-color: #b95445; color: #ffc0b6; }
.data-status[data-state="local"] { border-color: #8b734d; color: #ffe1a1; }
.saloon-board, .sheriff-wood-card {
  color: #fff4d2;
  font-family: "Roboto Slab", Rockwell, Georgia, serif;
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  line-height: 1.58;
  text-shadow: 0 2px 2px rgba(0,0,0,.85);
  background:
    linear-gradient(rgba(82,43,17,.68), rgba(29,12,5,.9)),
    repeating-linear-gradient(7deg, #75431c 0 11px, #573014 11px 14px);
  border-color: #2a1107;
  outline: 2px solid #bd7c35;
}
.saloon-board > p, .sheriff-wood-card p { max-width: 62ch; }
.saloon-credit-note {
  padding: 9px 11px;
  border: 2px solid #d09345;
  background: rgba(18,8,3,.65);
  color: #ffe49a;
  font-size: .9rem;
  font-weight: 800;
  text-align: center;
}
.piano-keys button, .draw-hand button, .retro-cta, .retro-secondary {
  font-family: "Roboto Slab", Rockwell, Georgia, serif;
  font-weight: 800;
}
.piano-sequence b { color: #fff0ae; font-family: Rye, "Roboto Slab", serif; font-weight: 400; }
@media (max-width: 780px) {
  .volume-control { grid-template-columns: auto minmax(78px, 1fr) 38px; width: min(100%, 300px); }
  .data-status { width: min(100%, 300px); justify-content: center; }
}


/* v0.12 dev10 — real service conversion forms */
.retro-modal:has(.service-form-shell) {
  width: min(980px, 100%);
  padding: clamp(18px, 3vw, 32px);
  border-color: #8d632f;
  outline-color: #d8a558;
  background: linear-gradient(180deg, #20140c, #0c0805);
}
.service-form-shell {
  display: grid;
  gap: 18px;
  color: #fff7e8;
  font-family: "Roboto Slab", Rockwell, Georgia, serif;
}
.real-service-banner {
  display: grid;
  gap: 9px;
  padding: clamp(18px, 3vw, 28px);
  border: 3px solid #1c0d05;
  outline: 2px solid #d7a050;
  background:
    linear-gradient(135deg, rgba(112,58,20,.96), rgba(39,18,7,.97)),
    repeating-linear-gradient(8deg, #77431d 0 13px, #593014 13px 16px);
  box-shadow: inset 0 0 28px rgba(0,0,0,.48), 7px 8px 0 rgba(0,0,0,.26);
}
.real-service-banner.wallet-banner { outline-color: #d5b969; }
.real-service-banner.box-banner { outline-color: #e2a750; }
.real-service-banner.studio-banner { outline-color: #d89d57; }
.real-service-banner strong {
  color: #fff0b5;
  font-family: Rye, "Roboto Slab", Georgia, serif;
  font-size: clamp(1.35rem, 3.7vw, 2.15rem);
  font-weight: 400;
  line-height: 1.18;
  text-shadow: 0 3px 3px rgba(0,0,0,.78);
}
.real-service-banner p { max-width: 76ch; margin: 0; color: #fff7e7; font-size: clamp(1rem, 2vw, 1.12rem); line-height: 1.65; }
.service-eyebrow { color: #ffe09a; font-size: .78rem; font-weight: 800; letter-spacing: .1em; }
.trust-steps { display: grid; gap: 12px; }
.trust-steps-three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.trust-steps-four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.trust-steps article {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 148px;
  padding: 18px 15px 15px;
  border: 2px solid #9b6931;
  background: linear-gradient(180deg, #3f210f, #1a0d06);
  box-shadow: inset 0 0 16px rgba(0,0,0,.45);
}
.trust-steps article > b {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; color: #1a0c04; background: #f0bd59; font-size: 1.05rem;
}
.trust-steps article strong { color: #fff0b5; font-size: 1rem; }
.trust-steps article span { color: #f1e4ce; font-size: .88rem; line-height: 1.5; }
.trust-callout {
  display: grid; gap: 5px; padding: 16px 18px;
  border: 2px solid #c28d43; background: #17100b; color: #f8ead2; line-height: 1.55;
}
.trust-callout strong { color: #ffe09a; }
.real-reward-box { background: linear-gradient(#231308,#100904); }
.service-form { display: grid; gap: 16px; }
.form-section {
  display: grid; gap: 14px; min-width: 0; margin: 0; padding: clamp(16px, 2.5vw, 23px);
  border: 2px solid #8c5e2a; background: rgba(16,9,5,.82);
}
.form-section legend {
  padding: 0 10px; color: #ffe09a; font-family: Rye, "Roboto Slab", Georgia, serif;
  font-size: clamp(1rem, 2.4vw, 1.28rem); font-weight: 400;
}
.form-section-copy { margin: -3px 0 2px; color: #e8d9c1; line-height: 1.55; }
.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.field-span-2, .field-full { grid-column: 1 / -1; }
.address-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(105px,.7fr) minmax(120px,.8fr) minmax(0,1.35fr); gap: 14px; }
.address-country { grid-column: 1 / 3; }
.service-form label:not(.consent-row) { display: grid; gap: 7px; min-width: 0; color: #fff2da; font-size: .96rem; font-weight: 700; text-transform: none; }
.service-form input:not([type="checkbox"]), .service-form select, .service-form textarea {
  width: 100%; min-width: 0; min-height: 52px; padding: 12px 13px;
  border: 2px solid #b17a3a; border-radius: 3px;
  background: #fff8e8; color: #241309;
  font: 600 1rem/1.35 "Roboto Slab", Rockwell, Georgia, serif;
  box-shadow: inset 0 2px 5px rgba(47,25,11,.16);
}
.service-form textarea { min-height: 132px; resize: vertical; }
.service-form input:focus, .service-form select:focus, .service-form textarea:focus { outline: 4px solid rgba(255,216,127,.28); border-color: #ffe09a; }
.choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.choice-grid label {
  display: flex !important; align-items: flex-start; gap: 12px !important; min-height: 86px;
  padding: 14px !important; border: 2px solid #8c5e2a !important; background: #27150b;
}
.choice-grid label:has(input:checked) { border-color: #ffe09a !important; background: #4a2912; }
.choice-grid input[type="checkbox"], .consent-row input[type="checkbox"] {
  flex: 0 0 auto; width: 24px; height: 24px; margin: 1px 0 0; accent-color: #dca846;
}
.choice-grid span { display: grid; gap: 4px; }
.choice-grid strong { color: #fff0b5; font-size: 1rem; }
.choice-grid small { color: #e1d2ba; font-size: .8rem; line-height: 1.4; }
.consent-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 15px 17px;
  border: 2px solid #89602f; background: #1a1009; color: #f5e6cf;
  font-size: .92rem; line-height: 1.5; text-transform: none;
}
.form-submit-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 17px 18px; border: 3px solid #2a1408; outline: 2px solid #c98e3c;
  background: linear-gradient(#673715,#351808); box-shadow: inset 0 0 16px rgba(0,0,0,.45);
}
.form-submit-bar > div { display: grid; gap: 4px; }
.form-submit-bar strong { color: #fff0ae; font-size: 1.04rem; }
.form-submit-bar span { color: #e8d7bd; font-size: .84rem; line-height: 1.45; }
.service-primary-action { min-height: 54px; padding: 12px 20px; white-space: normal; text-align: center; }
.service-back-button { justify-self: start; }
.form-status { min-height: 2.8em; margin: 0; padding: 11px 13px; border-left: 4px solid #d7a050; background: rgba(215,160,80,.09); color: #f4e5cf; line-height: 1.5; }
.form-status[data-state="error"] { border-left-color: #d96f5d; color: #ffd0c7; }
.order-reference { margin: 0; color: #cfbea5; font-size: .8rem; }
.service-success { font-size: 1.05rem; line-height: 1.65; }
.service-success p { margin-bottom: 0; }
@media (max-width: 800px) {
  .trust-steps-three, .trust-steps-four, .field-grid, .choice-grid { grid-template-columns: 1fr; }
  .address-grid { grid-template-columns: minmax(0,1fr) minmax(92px,.42fr); }
  .address-postal { grid-column: 1; }
  .address-city { grid-column: 2; }
  .address-country { grid-column: 1 / -1; }
  .field-span-2 { grid-column: auto; }
  .form-submit-bar { align-items: stretch; flex-direction: column; }
  .service-primary-action { width: 100%; }
  .trust-steps article { min-height: 0; }
}
@media (max-width: 520px) {
  .address-grid { grid-template-columns: 1fr; }
  .address-street, .address-number, .address-postal, .address-city, .address-country { grid-column: 1; }
  .retro-modal:has(.service-form-shell) { padding: 15px; }
}


/* v0.12 dev11 — animated saloon piano keyboard */
.saloon-piano {
  display: grid;
  gap: 15px;
  text-align: center;
}
.piano-intro-copy {
  display: grid;
  gap: 7px;
  padding: 13px 16px;
  border: 3px solid #2a1107;
  outline: 2px solid #bd7c35;
  background: rgba(20, 8, 3, .72);
}
.piano-intro-copy strong {
  color: #ffe49a;
  font-family: Rye, "Roboto Slab", serif;
  font-size: clamp(1.05rem, 3vw, 1.45rem);
  font-weight: 400;
}
.piano-intro-copy p { margin: 0; }
.piano-keyboard {
  display: grid;
  grid-template-columns: repeat(5, minmax(58px, 1fr));
  gap: 5px;
  align-items: start;
  padding: 17px 18px 22px;
  border: 8px solid #271208;
  outline: 3px solid #a7682c;
  background:
    linear-gradient(rgba(93, 49, 20, .74), rgba(38, 17, 7, .94)),
    repeating-linear-gradient(8deg, #78451e 0 11px, #562d13 11px 14px);
  box-shadow: inset 0 0 28px rgba(0,0,0,.58), 0 13px 22px rgba(0,0,0,.38);
}
.piano-key {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: end center;
  min-width: 0;
  min-height: 178px;
  padding: 23px 6px 13px;
  border: 3px solid #2a2118;
  border-top-width: 5px;
  border-radius: 2px 2px 9px 9px;
  color: #24170f;
  background: linear-gradient(90deg, #b9b1a0 0, #fffdf0 12%, #f5efdc 52%, #d5ceba 100%);
  box-shadow: inset 0 -15px 18px rgba(77,58,37,.14), 0 11px 0 #6c5841, 0 15px 15px rgba(0,0,0,.38);
  cursor: pointer;
  transform: translateY(0);
  transform-origin: top center;
  transition: transform .09s ease, box-shadow .09s ease, background .09s ease, color .09s ease;
}
.piano-key:disabled { opacity: 1; cursor: default; }
.piano-key:not(:disabled):hover,
.piano-key:not(:disabled):focus-visible {
  outline: 4px solid #ffe49a;
  outline-offset: 2px;
}
.piano-key.is-active {
  color: #180e08;
  background: linear-gradient(90deg, #d39732 0, #fff0a6 18%, #e8b548 58%, #ad6e22 100%);
  box-shadow: inset 0 -8px 16px rgba(80,40,10,.25), 0 3px 0 #5d3b1c, 0 6px 18px rgba(255,205,92,.55);
  transform: translateY(8px);
}
.piano-note {
  align-self: center;
  font-family: Rye, "Roboto Slab", serif;
  font-size: clamp(1.8rem, 6vw, 3rem);
  font-weight: 400;
  line-height: 1;
}
.piano-key small {
  color: #5b3a22;
  font-family: "Roboto Slab", Rockwell, serif;
  font-size: clamp(.65rem, 1.8vw, .82rem);
  font-weight: 800;
  letter-spacing: .05em;
}
.piano-progress {
  display: flex;
  justify-content: center;
  gap: 10px;
  min-height: 18px;
}
.piano-progress i {
  width: 15px;
  height: 15px;
  border: 2px solid #a76a30;
  border-radius: 50%;
  background: #140a05;
  box-shadow: inset 0 0 5px rgba(0,0,0,.7);
}
.piano-progress i.is-demo { background: #76d8ff; box-shadow: 0 0 12px #76d8ff; }
.piano-progress i.is-complete { background: #ffe49a; box-shadow: 0 0 11px rgba(255,228,154,.75); }
.piano-progress i.is-error { background: #d34f43; box-shadow: 0 0 10px rgba(211,79,67,.75); }
.piano-actions { display: flex; justify-content: center; }
.piano-replay { min-width: min(100%, 310px); }
.piano-status {
  min-height: 3.2em;
  margin: 0;
  padding: 11px 14px;
  border: 2px solid #d09345;
  background: rgba(18,8,3,.68);
  color: #fff4d2;
  font-size: clamp(.95rem, 2.3vw, 1.08rem);
  line-height: 1.45;
}
.piano-status strong { color: #ffe49a; }
.piano-help { margin: 0; color: #e9dcc1; font-size: .82rem; }
@media (max-width: 620px) {
  .piano-keyboard { gap: 3px; padding: 12px 10px 17px; border-width: 6px; }
  .piano-key { min-height: 126px; padding: 16px 2px 9px; border-width: 2px; box-shadow: inset 0 -10px 14px rgba(77,58,37,.14), 0 8px 0 #6c5841, 0 11px 12px rgba(0,0,0,.35); }
  .piano-key.is-active { transform: translateY(6px); box-shadow: inset 0 -7px 13px rgba(80,40,10,.25), 0 2px 0 #5d3b1c, 0 5px 14px rgba(255,205,92,.48); }
  .piano-key small { font-size: .58rem; }
  .piano-help { font-size: .72rem; }
}