/* SUBJECT 96 landing. Console look: near-black ground, hairline rules, mono chrome, one serif voice.
   Colours from the game's HUD (gamex_3js_claude/styles/ui.css); the design comp is the Claude Design canvas "Stormborn Castle landing". */
:root{
  --bg:#05070a; --bg-2:rgba(9,12,17,.92); --rule:#16232a; --rule-cyan:rgba(0,229,255,.45); --rule-red:rgba(255,42,109,.55);
  --cyan:#00e5ff; --cyan-2:#5ff2ff; --red:#ff2a6d; --red-2:#ff6b9a;
  --ink:#d7dde6; --ink-2:#aab6c6; --dim:#6b7f83; --mute:#4c5868; --faint:#2a383c;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
  --serif:Fraunces,"Iowan Old Style",Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.gated{overflow:hidden}
a{color:var(--cyan)}
a:hover{color:#fff}
.ico{width:16px;height:16px;display:inline-block;vertical-align:middle}
.grid{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(0,229,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.035) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 100%)}
.led{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.led.cyan{background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 2s ease-in-out infinite}
.led.red{width:7px;height:7px;background:var(--red);box-shadow:0 0 10px var(--red);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.badge{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;padding:6px 14px;border:1px solid var(--rule)}
.badge.red{color:var(--red-2);border-color:var(--rule-red)}
.badge.small{font-size:10px;letter-spacing:.22em;padding:5px 10px}
.kicker{align-self:flex-start;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);border:1px solid var(--rule-cyan);padding:6px 12px}

/* buttons: borders, not shadows; the only glow is on the live thing */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:12px 24px;border:1px solid var(--rule);background:transparent;color:var(--ink-2);
  font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.btn:hover{color:#fff;border-color:var(--dim)}
.btn.primary{border-color:var(--cyan);color:var(--cyan-2);background:rgba(0,229,255,.06);box-shadow:0 0 22px rgba(0,229,255,.2)}
.btn.primary:hover{background:rgba(0,229,255,.12)}
.btn.ghost{border-color:transparent;color:var(--dim)}
.btn:focus-visible,.audio:focus-visible,.play:focus-visible,.social a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* gate */
.gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--bg);overflow:hidden}
.gate .grid{-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 30%,transparent 100%)}
.gate-chrome{position:absolute;top:28px;left:48px;right:48px;display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.gate-box{position:relative;width:min(680px,100%);padding:44px clamp(20px,5vw,52px) 40px;display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center;background:var(--bg-2);border:1px solid var(--rule);border-top:2px solid var(--red)}
.gate-title{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(44px,7vw,72px);line-height:1;letter-spacing:-.01em;color:#eaf6ff}
.gate-text{margin:0;max-width:54ch;text-align:left;font-size:14px;line-height:1.7;color:var(--ink-2)}
.gate-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
body:not(.gated) .gate{display:none}

/* site */
.site{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;opacity:0;transition:opacity .9s ease}
body:not(.gated) .site{opacity:1}
.top{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px clamp(16px,4vw,48px);border-bottom:1px solid var(--rule);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.top-left,.top-right{display:flex;align-items:center;gap:12px}
.top-right{gap:16px}
.sep{color:var(--faint)}
.audio{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:9px 14px;border:1px solid var(--rule);background:transparent;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s}
.audio .ico{width:16px;height:16px}
.audio .wave{opacity:0;transition:opacity .2s}
.audio .mute{opacity:1;transition:opacity .2s}
.audio[aria-pressed="true"]{color:var(--cyan-2);border-color:var(--rule-cyan)}
.audio[aria-pressed="true"] .wave{opacity:1}
.audio[aria-pressed="true"] .w2{animation:pulse 1.6s ease-in-out infinite}
.audio[aria-pressed="true"] .mute{opacity:0}
.audio:hover{color:var(--ink);border-color:var(--dim)}

/* hero = the scene */
.hero{position:relative;border-bottom:1px solid var(--rule)}
.hero-media{position:relative;height:min(820px,88vh);min-height:420px;overflow:hidden;background:#000}
.hero-media video,.hero-media .loop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) contrast(1.08)}
.hero-media .loop{position:absolute;inset:0;transition:opacity .6s}
.hero-media.playing .loop{opacity:0;pointer-events:none}
.hero-media.lights-out .loop img{animation:flicker 9s steps(1,end) infinite}
@keyframes flicker{0%,88%,100%{filter:saturate(.85) contrast(1.08)}89%{filter:brightness(.25)}90%{filter:saturate(.85) contrast(1.08)}93%{filter:brightness(.1)}94.5%{filter:saturate(.85) contrast(1.08)}}
.scan{position:absolute;inset:0;pointer-events:none;opacity:.7;mix-blend-mode:multiply;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
.fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,7,10,.55) 0%,rgba(5,7,10,0) 30%,rgba(5,7,10,0) 55%,rgba(5,7,10,.92) 100%);transition:opacity .6s}
.hero-media.playing .scan,.hero-media.playing .fade{opacity:.35}
.hero-foot{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(16px,4vw,48px) clamp(24px,5vw,56px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 32px;transition:opacity .4s}
.hero-media.playing .hero-foot{opacity:0;pointer-events:none}
.hero-media.playing:hover .hero-foot,.hero-media.playing:focus-within .hero-foot{opacity:1;pointer-events:auto}
.hero-copy{display:flex;flex-direction:column;gap:18px;max-width:860px}
.tagline{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(44px,7.2vw,96px);line-height:.96;letter-spacing:-.02em;color:#eaf6ff;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.tagline em{font-style:italic;font-weight:300;color:var(--cyan-2)}
.play{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:18px 28px 18px 22px;background:rgba(5,7,10,.72);border:1px solid var(--cyan);color:var(--cyan-2);font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 28px rgba(0,229,255,.25);transition:background .2s,box-shadow .2s}
.play svg{width:20px;height:20px}
.play .bars{display:none}
.hero-media.playing .play .tri{display:none}
.hero-media.playing .play .bars{display:block}
.play:hover{background:rgba(0,229,255,.12);box-shadow:0 0 40px rgba(0,229,255,.4)}
.hero-media.missing .play span::after{content:" (not yet)"}

/* ledger strip */
.ledger{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--rule);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.ledger div{padding:22px clamp(12px,3vw,48px);display:flex;justify-content:space-between;gap:12px;border-right:1px solid var(--rule)}
.ledger div:last-child{border-right:0}
.ledger b{font-weight:400;color:var(--ink)}
.ledger b.red{color:var(--red-2)}

/* signup */
.signup{position:relative;display:flex;justify-content:center;padding:clamp(40px,8vw,96px) clamp(16px,4vw,48px)}
#signup-form{width:100%;max-width:640px;display:flex;flex-direction:column;gap:16px;padding:clamp(24px,4vw,36px) clamp(20px,4vw,40px) clamp(20px,3vw,32px);border:1px solid var(--rule);border-top:2px solid var(--cyan);background:var(--bg-2)}
.label{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.row{display:flex;flex-wrap:wrap;gap:10px}
.row input[type=email]{flex:1 1 240px;min-width:0;min-height:44px;padding:14px 16px;background:var(--bg);border:1px solid var(--rule);color:var(--ink);font-family:var(--mono);font-size:15px}
.row input[type=email]:focus{outline:none;border-color:var(--cyan)}
.row input::placeholder{color:var(--mute)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.msg{margin:0;min-height:1.2em;font-size:12px;letter-spacing:.08em;color:var(--cyan-2)}
.msg.err{color:var(--red-2)}
.fine{margin:0;font-size:11px;letter-spacing:.12em;color:var(--mute)}
#signup-form.sent .row{opacity:.35;pointer-events:none}

/* foot */
.foot{position:relative;margin-top:auto;border-top:1px solid var(--rule);padding:32px clamp(16px,4vw,48px) 40px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.social{display:flex;flex-wrap:wrap;gap:4px 32px;justify-content:center;font-size:12px;letter-spacing:.26em;text-transform:uppercase}
.social a{color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:8px 0;border-bottom:1px solid transparent}
.social a:hover{color:var(--cyan-2);border-bottom-color:var(--rule-cyan)}
.credit{margin:0;font-size:12px;color:#7f8ea3;max-width:62ch}
.credit.dim{color:var(--mute);font-size:11px;letter-spacing:.12em}

@media (prefers-reduced-motion:reduce){
  .hero-media.lights-out .loop img,.led,.audio .w2{animation:none}
  .site{transition:none}
}
@media (max-width:640px){
  .gate-chrome{left:16px;right:16px;top:16px}
  .top{font-size:10px}
  .top-left span:nth-child(2),.top-left .sep{display:none}
  .badge.small{padding:5px 8px}
  .audio-label{display:none}
  .audio{width:44px;justify-content:center;padding:0}
  .hero-media{height:min(560px,80vh)}
  .ledger{font-size:9px}
  .ledger div{flex-direction:column;gap:6px;padding:14px 12px}
}