*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%;background:#070709;color:#f6ebd0;overflow-x:hidden;overscroll-behavior:none}
html{height:100%}
body{
  font-family:"Rajdhani",system-ui,sans-serif;
  font-weight:600;
  line-height:1.35;
  overflow-wrap:break-word;
  min-height:100dvh;
  max-width:100vw;
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(200,16,46,.18),transparent 55%),
    radial-gradient(900px 500px at -10% 110%,rgba(212,175,55,.12),transparent 50%),
    #070709;
}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:disabled{opacity:.42;cursor:not-allowed}
h1,h2,h3{font-family:"Cinzel",Palatino,serif;font-weight:700;letter-spacing:.04em;line-height:1.15}
.dust{
  pointer-events:none;position:fixed;inset:0;z-index:0;opacity:.35;
  background-image:
    radial-gradient(1px 1px at 12% 22%,#d4af37 50%,transparent 51%),
    radial-gradient(1px 1px at 78% 18%,#f0d78c 50%,transparent 51%),
    radial-gradient(1px 1px at 40% 70%,#d4af37 50%,transparent 51%),
    radial-gradient(1px 1px at 88% 80%,#c8102e 50%,transparent 51%),
    radial-gradient(1px 1px at 22% 88%,#f6ebd0 50%,transparent 51%);
}
.spine{
  pointer-events:none;position:fixed;left:0;top:0;bottom:0;width:3px;z-index:30;
  background:linear-gradient(#c8102e,#d4af37 45%,#c8102e);
}
.shell{
  position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;
  padding:calc(10px + env(safe-area-inset-top)) 12px calc(86px + env(safe-area-inset-bottom)) 14px;
  max-width:560px;margin:0 auto;width:100%;
}
.plaque{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:10px 12px;margin-bottom:12px;
  background:linear-gradient(180deg,#1b1710,#0d0c0a 70%);
  border:1px solid #d4af37;
  box-shadow:inset 0 0 0 1px #3a2a0a,0 0 24px rgba(212,175,55,.16);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
.monogram{
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  border:2px solid #d4af37;background:radial-gradient(circle at 30% 30%,#3a2a0a,#0a0908);
  box-shadow:0 0 12px rgba(212,175,55,.45);
  font-family:"Cinzel",serif;font-size:10px;line-height:1.05;text-align:center;color:#f0d78c;
}
.monogram span{display:block}
.plaque-copy .brand{font-size:11px;letter-spacing:.28em;color:#d4af37;text-transform:uppercase}
.plaque-copy h1{font-size:clamp(18px,5.4vw,26px);color:#f6ebd0}
.plaque-copy .sub{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#c4b89a}
.plaque-mark{
  min-width:58px;height:58px;border-radius:50%;display:grid;place-items:center;align-content:center;
  border:2px solid #c8102e;background:#10080a;box-shadow:0 0 14px rgba(200,16,46,.45);
}
.plaque-mark span{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#c4b89a}
.plaque-mark strong{font-family:"Share Tech Mono",monospace;font-size:20px;color:#d4af37}
.deck{flex:1;min-width:0;min-height:0}
.pane{display:none;padding-bottom:8px}
.pane.on{display:block}
.kicker{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#d4af37;margin-bottom:6px}
.lead{color:#c4b89a;margin:8px 0 14px;font-size:15px}
.sheet{margin-bottom:12px}
.hero-cut{
  position:relative;margin-bottom:14px;overflow:hidden;
  clip-path:polygon(0 18px,18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  border:1px solid #d4af37;
}
.hero-cut img{width:100%;height:clamp(200px,52vw,280px);object-fit:cover;object-position:center 60%;filter:saturate(1.08) contrast(1.08)}
.hero-plate{
  position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;
  background:linear-gradient(transparent,rgba(7,7,9,.9) 55%);
}
.hero-plate h2{font-size:clamp(16px,4.8vw,22px);margin:4px 0 0}
.drop-row{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.drop,.ghost,.lock,.drive,.hud-exit{
  min-height:44px;padding:10px 16px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
}
.drop{
  flex:1 1 180px;
  background:radial-gradient(circle at 20% 0,#f0d78c,#d4af37 38%,#8a6d1f);
  color:#1a1204;border:1px solid #f6ebd0;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  box-shadow:0 0 18px rgba(212,175,55,.35);
}
.ghost{
  flex:1 1 120px;border:1px solid #d4af37;color:#f0d78c;background:rgba(212,175,55,.06);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.ticket,.route,.bay, .codex-list article, .mark-card{
  position:relative;margin-bottom:12px;padding:12px;
  background:linear-gradient(160deg,#16141a 0%,#0c0b10 70%);
  border:1px solid #6a5420;
  box-shadow:inset 0 0 0 1px #241c0c;
}
.ticket::before,.route::before,.bay::before,.codex-list article::before,.mark-card::before{
  content:"";position:absolute;top:6px;left:6px;width:10px;height:10px;
  border-top:2px solid #d4af37;border-left:2px solid #d4af37;pointer-events:none;
}
.ticket::after,.route::after,.bay::after,.codex-list article::after,.mark-card::after{
  content:"";position:absolute;bottom:6px;right:6px;width:10px;height:10px;
  border-bottom:2px solid #c8102e;border-right:2px solid #c8102e;pointer-events:none;
}
.ticket{display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:center;cursor:pointer}
.ticket img{width:92px;height:72px;object-fit:cover;border:1px solid #d4af37}
.ticket h3,.route h3,.bay h3{font-size:16px;margin-bottom:4px}
.ticket p,.route p,.bay p{font-size:13px;color:#c4b89a}
.well-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
.well{
  min-width:0;padding:10px 8px;text-align:center;
  border-radius:50% 50% 12px 12px / 18px 18px 12px 12px;
  border:1px solid #d4af37;background:radial-gradient(circle at 50% 20%,#2a220f,#0b0a0c 62%);
}
.well em{display:block;font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#c4b89a}
.well strong{display:block;margin-top:4px;font-family:"Share Tech Mono",monospace;font-size:16px;color:#f0d78c;overflow-wrap:anywhere}
.steps{display:grid;gap:8px}
.steps article{
  display:grid;grid-template-columns:42px 1fr;gap:8px 10px;align-items:start;
  padding:10px;border-left:3px solid #d4af37;background:rgba(212,175,55,.05);
}
.steps span{grid-row:span 2;font-family:"Share Tech Mono",monospace;color:#c8102e;font-size:18px}
.steps h3{font-size:14px}
.steps p{font-size:13px;color:#c4b89a}
.route-list,.bay-list{display:grid;gap:12px}
.route img,.bay img{width:100%;height:128px;object-fit:cover;border:1px solid #8a6d1f;margin-bottom:8px}
.route header,.bay header{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:4px}
.seal{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#070709;background:#d4af37;
  padding:3px 7px;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);white-space:nowrap
}
.seal.locked{background:#3a2a0a;color:#c4b89a}
.seal.cleared{background:#c8102e;color:#f6ebd0}
.bars{display:grid;gap:6px;margin:8px 0}
.bars div{display:grid;grid-template-columns:76px 1fr 28px;gap:6px;align-items:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#c4b89a}
.bars i{display:block;height:6px;background:#1a1a20;border:1px solid #6a5420;overflow:hidden}
.bars b{display:block;height:100%;background:linear-gradient(90deg,#c8102e,#d4af37);width:var(--w)}
.wide{width:100%;height:140px;object-fit:cover;margin:0 0 14px;border:1px solid #d4af37;clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.codex-list{display:grid;gap:10px}
.codex-list article h3{font-size:15px;margin-bottom:6px;color:#f0d78c}
.codex-list article p{font-size:14px;color:#c4b89a}
.mark-board{display:grid;gap:10px}
.mark-card h3{font-size:15px;margin-bottom:6px}
.mark-card p{font-size:13px;color:#c4b89a}
.crown{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:4px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  max-width:560px;margin:0 auto;width:100%;
  background:
    linear-gradient(180deg,rgba(212,175,55,.2),transparent 8px),
    linear-gradient(#16141c,#0a090d);
  border-top:1px solid #d4af37;
  box-shadow:0 -10px 30px rgba(0,0,0,.45);
}
.station{
  min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:4px 2px 2px;color:#c4b89a;
}
.station svg{
  width:38px;height:38px;padding:8px;border-radius:50%;
  border:2px solid #6a5420;background:#100e14;fill:none;stroke:#d4af37;stroke-width:1.6;
}
.station span{font-size:9px;letter-spacing:.04em;text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.station.on{color:#f6ebd0;transform:translateY(-7px)}
.station.on svg{
  border-color:#d4af37;background:radial-gradient(circle at 50% 30%,#3a2210,#14080c);
  box-shadow:0 0 16px rgba(212,175,55,.55),inset 0 0 10px rgba(200,16,46,.35);
  stroke:#f0d78c;
}
.stage{
  position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
  background:#070709;padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
  user-select:none;-webkit-user-select:none;
}
.stage[hidden]{display:none}
.hud{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-bottom:6px;min-width:0}
.hud-exit{
  min-height:36px;padding:6px 10px;border:1px solid #d4af37;color:#f0d78c;font-size:11px;
}
.hud-name{min-width:0}
.hud-name p{font-family:"Cinzel",serif;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-name span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c4b89a}
.hud-clock{font-family:"Share Tech Mono",monospace;font-size:22px;color:#d4af37}
.hud-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:6px}
.hud-strip div{
  min-width:0;padding:6px 4px;text-align:center;border:1px solid #6a5420;background:#120f16;
}
.hud-strip em{display:block;font-style:normal;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#c4b89a}
.hud-strip strong{display:block;font-family:"Share Tech Mono",monospace;font-size:13px;color:#f0d78c;overflow-wrap:anywhere}
.contract-line{font-size:12px;color:#d4af37;letter-spacing:.04em;margin:0 2px 6px;min-height:16px}
.board-wrap{position:relative;flex:1;min-height:0;border:1px solid #d4af37;background:#050506;overflow:hidden}
#board{width:100%;height:100%;display:block;touch-action:none}
.radar{
  position:absolute;right:8px;bottom:8px;width:72px;height:72px;border-radius:50%;
  border:2px solid #d4af37;overflow:hidden;background:rgba(7,7,9,.72);
  box-shadow:0 0 12px rgba(212,175,55,.3);
}
#radar{width:100%;height:100%}
.pit{
  display:grid;grid-template-columns:72px 1fr 72px;gap:8px;align-items:end;
  margin-top:8px;min-width:0;
}
.lock,.drive{
  height:72px;padding:8px 6px;font-size:11px;letter-spacing:.08em;text-align:center;touch-action:none;user-select:none;
  border-radius:50%;border:2px solid #d4af37;background:radial-gradient(circle at 50% 25%,#3a2a12,#120e0a);
  color:#f0d78c;box-shadow:inset 0 0 12px rgba(0,0,0,.45);
}
.lock.on, .drive.on{
  background:radial-gradient(circle at 50% 25%,#c8102e,#3a0a10);
  box-shadow:0 0 16px rgba(200,16,46,.55);
  color:#f6ebd0;
}
.yaw{min-width:0;text-align:center;touch-action:none}
.yaw svg{width:100%;height:72px;display:block;overflow:visible}
.yaw span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#d4af37;margin-top:-4px}
.veil{
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;
  padding:22px 16px;background:rgba(7,7,9,.92);text-align:center;
}
.veil[hidden]{display:none}
.veil h2{font-size:24px;margin:8px 0}
.veil p{color:#c4b89a;margin-bottom:10px}
.veil ul{list-style:none;margin:0 auto 16px;max-width:32ch;font-family:"Share Tech Mono",monospace;font-size:13px;color:#f0d78c}
.veil li{margin:4px 0}
.veil-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.veil-actions .drop,.veil-actions .ghost{flex:1 1 140px;max-width:220px}
@media (max-width:360px){
  .shell{padding-left:10px;padding-right:8px}
  .plaque{grid-template-columns:auto 1fr;gap:8px}
  .plaque-mark{display:none}
  .ticket{grid-template-columns:1fr}
  .ticket img{width:100%;height:96px}
  .well-row{grid-template-columns:1fr 1fr 1fr}
  .well strong{font-size:13px}
  .station svg{width:34px;height:34px;padding:7px}
  .pit{grid-template-columns:64px 1fr 64px}
  .lock,.drive{height:64px;font-size:10px}
}
@media (min-width:430px){
  .shell{padding-left:16px;padding-right:16px}
  .hero-cut img{height:270px}
  .route img,.bay img{height:150px}
}
@media (min-width:680px){
  .shell{max-width:820px}
  .crown{max-width:820px}
  .route-list,.bay-list,.codex-list,.mark-board{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr 1fr}
  .hero-cut img{height:300px}
}
@media (max-height:500px) and (orientation:landscape){
  .plaque{padding:6px 10px;margin-bottom:8px}
  .plaque-mark{width:48px;height:48px;min-width:48px}
  .crown{padding-top:4px}
  .station.on{transform:translateY(-3px)}
  .pit{margin-top:4px}
  .lock,.drive,.yaw svg{height:56px}
  .hud-clock{font-size:18px}
}