:root{
  --bleu:#1d3a9e; --blanc:#f4efe4; --rouge:#e3262c; --fire:#ff7a1a;
  --ink:#0a0a0c; --smoke:#17171b; --bar:56px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--blanc);font-family:Archivo,system-ui,sans-serif}
body{height:100dvh}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ---------- top bar ---------- */
#bar{position:fixed;inset:0 0 auto 0;height:var(--bar);z-index:30;display:flex;align-items:center;gap:12px;padding:0 16px;
  background:linear-gradient(#000e,#0009);border-bottom:3px solid;border-image:linear-gradient(90deg,var(--bleu) 0 33%,var(--blanc) 33% 66%,var(--rouge) 66%) 1}
.brand{display:flex;align-items:center;gap:9px;font-family:Anton,sans-serif;font-size:20px;letter-spacing:.04em;white-space:nowrap}
.brand img{width:34px;height:34px;border-radius:50%;border:2px solid var(--blanc);object-fit:cover}
.brand b{color:var(--blanc)}
.ca{flex:1;min-width:0;max-width:520px;margin:0 auto;display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;
  background:#000;border:1px dashed #fff5;font-family:"Special Elite",monospace;font-size:13px}
.ca i{font-style:normal;background:var(--rouge);color:#fff;padding:2px 6px;font-family:Anton;letter-spacing:.06em}
.ca span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.ca em{font-style:normal;font-size:11px;opacity:.6}
.ca:hover{border-color:var(--fire)}
#bar nav{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;font-family:Anton,sans-serif;letter-spacing:.06em;font-size:16px;
  border:2px solid var(--blanc);transition:transform .08s}
.btn:active{transform:scale(.95)}
.btn.ghost{background:#0008}
.btn.ghost:hover{background:var(--bleu)}
.btn.buy{background:var(--rouge);border-color:var(--rouge);color:#fff;box-shadow:0 0 0 0 #e3262c88;animation:pulse 1.6s infinite}
.btn.buy:hover{background:#ff3b3b}
.btn.big{height:54px;font-size:22px;padding:0 26px}
@keyframes pulse{70%{box-shadow:0 0 0 14px #e3262c00}100%{box-shadow:0 0 0 0 #e3262c00}}

/* ---------- stage ---------- */
#stage{position:fixed;inset:var(--bar) 0 0 0;overflow:hidden;background:#000}
#film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.08) saturate(1.1)}
.grade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,#000c 100%),linear-gradient(180deg,#0006,transparent 25%,transparent 60%,#000d)}
.scan{position:absolute;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px)}
#embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#stage.shake{animation:shake .45s}
@keyframes shake{10%,50%,90%{transform:translate(-6px,3px)}30%,70%{transform:translate(6px,-4px)}}
#stage.flash::after{content:"";position:absolute;inset:0;background:#fff;animation:flash .35s forwards;pointer-events:none}
@keyframes flash{to{opacity:0}}

/* caption */
#caption{position:absolute;left:0;right:0;bottom:84px;text-align:center;padding:0 16px;pointer-events:none;transition:opacity .4s}
.chap{display:inline-block;font-family:"Black Ops One",sans-serif;font-size:13px;letter-spacing:.25em;color:var(--fire);background:#000b;padding:4px 10px;margin-bottom:10px}
.line{font-family:Anton,sans-serif;font-size:clamp(28px,5.4vw,72px);line-height:1.02;text-transform:uppercase;letter-spacing:.01em;
  text-shadow:0 4px 0 #000,0 0 30px #000;max-width:1100px;margin:0 auto}
.line.pop{animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(1.35);opacity:0;filter:blur(6px)}}

/* hero title */
#title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 16px;
  background:radial-gradient(ellipse at center,#000a,#000e 75%);opacity:0;pointer-events:none;transition:opacity .6s}
#stage.end #title{opacity:1;pointer-events:auto}
#stage.end #caption{opacity:0}
.kicker{font-family:"Black Ops One";letter-spacing:.4em;font-size:13px;color:#fffa;margin-bottom:10px}
#title h1{font-family:Anton,sans-serif;font-size:clamp(46px,11vw,170px);line-height:.88;letter-spacing:-.01em;text-shadow:0 8px 0 #000}
#title h1 .b{color:#4b74ff}#title h1 .w{color:var(--blanc)}#title h1 .r{color:var(--rouge)}
#stage.end #title h1{animation:slam .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes slam{from{transform:scale(2.6) rotate(-4deg);opacity:0}}
.tick{font-family:"Black Ops One";font-size:clamp(20px,3vw,34px);margin-top:12px;background:var(--blanc);color:#000;padding:2px 14px;transform:rotate(-2deg)}
.tag{font-family:"Special Elite";font-size:clamp(14px,1.6vw,18px);margin-top:14px;opacity:.85}
.cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;justify-content:center}

/* side + rail + score */
#side{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;gap:8px;z-index:5}
#side button{font-family:Anton;letter-spacing:.08em;font-size:14px;padding:8px 12px;background:#000a;border:1px solid #fff4;text-align:right}
#side button:hover{background:var(--bleu);border-color:var(--blanc)}
#score{position:absolute;left:16px;top:16px;font-family:"Black Ops One";font-size:12px;letter-spacing:.12em;background:#000a;padding:6px 10px;border-left:4px solid var(--fire)}
#score b{color:var(--fire);font-size:16px;margin-left:6px}
#rail{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:6px;padding:0 16px}
#rail button{flex:1;max-width:120px;height:46px;position:relative;background:#000a;border:1px solid #fff3;font-family:Anton;font-size:12px;letter-spacing:.06em;overflow:hidden;color:#fffc}
#rail button i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--rouge)}
#rail button.on{border-color:var(--blanc);color:#fff}
#rail button.done i{width:100%;background:#fff6}
#rail button span{position:relative}
#rail button small{display:block;font-family:"Black Ops One";font-size:10px;opacity:.6}

/* flying baguette */
.baguette{position:absolute;z-index:6;width:150px;height:44px;cursor:crosshair;filter:drop-shadow(0 6px 6px #0009)}
.baguette.hit{animation:hit .5s forwards}
@keyframes hit{to{transform:translateY(-220px) rotate(720deg) scale(.2);opacity:0}}
.bonk{position:absolute;z-index:7;font-family:Anton;font-size:44px;color:#ffe14a;text-shadow:3px 3px 0 #000;pointer-events:none;animation:bonk .7s forwards}
@keyframes bonk{from{transform:scale(.4) rotate(-10deg)}30%{transform:scale(1.2) rotate(6deg)}to{transform:translateY(-40px);opacity:0}}

/* gate */
#gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#000 url(assets/s_riot.jpg) center/cover;padding:16px}
#gate::before{content:"";position:absolute;inset:0;background:#000c}
.gate-in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.classified{font-family:"Black Ops One";color:var(--rouge);letter-spacing:.3em;font-size:12px;border:2px solid var(--rouge);padding:4px 10px;transform:rotate(-3deg)}
.gate-in img{width:min(240px,52vw);border:4px solid var(--blanc);box-shadow:10px 10px 0 var(--rouge),-10px -10px 0 var(--bleu)}
.gate-in h2{font-family:Anton;font-size:clamp(36px,8vw,80px);line-height:1;margin-top:14px}
.gate-in p{font-family:"Special Elite";opacity:.8}
#enter{margin-top:10px;font-family:Anton;font-size:28px;letter-spacing:.08em;padding:12px 34px;background:var(--rouge);color:#fff;border:3px solid #fff;animation:pulse 1.4s infinite}
#enter:hover{background:#ff3b3b;transform:scale(1.04)}
.gate-in small{font-family:"Special Elite";opacity:.55}
#gate.out{animation:gateout .6s forwards}
@keyframes gateout{to{opacity:0;transform:scale(1.15);visibility:hidden}}

/* modals */
.modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#000c;padding:16px}
.modal[hidden]{display:none}
.sheet{position:relative;width:min(640px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#111;border:3px solid var(--blanc);padding:26px 22px;animation:pop .4s cubic-bezier(.2,1.4,.4,1)}
.sheet h3{font-family:Anton;font-size:34px;letter-spacing:.03em;margin-bottom:14px}
.sheet .x{position:absolute;right:10px;top:8px;font-size:20px;padding:6px}
.paper{background:#e9e1cc;color:#1a1a1a;font-family:"Special Elite",monospace;border-color:#1a1a1a}
.stamp{position:absolute;right:22px;top:64px;font-family:"Black Ops One";color:var(--rouge);border:3px solid var(--rouge);padding:2px 10px;transform:rotate(8deg);opacity:.85}
.doss{display:flex;gap:16px}
.doss img{width:150px;height:150px;object-fit:cover;border:3px solid #1a1a1a;filter:grayscale(.3) contrast(1.1);flex:none}
.doss dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:14px}
.doss dt{font-weight:bold;text-transform:uppercase;font-size:11px;padding-top:3px;opacity:.7}
.quote{margin-top:16px;font-size:17px;border-left:4px solid var(--rouge);padding-left:12px}
.steps{list-style:none;display:grid;gap:10px;margin-bottom:18px}
.steps li{display:flex;gap:12px;align-items:flex-start;background:#000;border-left:4px solid var(--bleu);padding:10px 12px}
.steps li:nth-child(even){border-color:var(--rouge)}
.steps b{font-family:"Black Ops One";color:var(--fire);font-size:20px}
.steps strong{font-family:Anton;letter-spacing:.04em;font-weight:400;font-size:17px}
#toast{position:fixed;left:50%;top:70px;z-index:60;transform:translateX(-50%) translateY(-20px);opacity:0;background:var(--blanc);color:#000;font-family:Anton;letter-spacing:.06em;padding:8px 16px;transition:.25s;pointer-events:none}
#toast.on{opacity:1;transform:translateX(-50%)}

/* ---------- mobile ---------- */
@media (max-width:760px){
  :root{--bar:100px}
  #bar{flex-wrap:wrap;height:var(--bar);padding:8px 16px;gap:8px;align-content:center}
  .brand{font-size:17px}
  .brand img{width:28px;height:28px}
  #bar nav{margin-left:auto}
  .btn{height:34px;padding:0 10px;font-size:14px}
  .ca{order:3;flex:1 0 100%;max-width:none;height:32px;font-size:12px}
  #side{top:10px;right:10px}
  #side button{font-size:12px;padding:6px 8px}
  #score{top:10px;left:10px;font-size:10px}
  #caption{bottom:76px}
  #rail{gap:3px;bottom:12px}
  #rail button{height:40px;font-size:0}
  #rail button small{font-size:11px}
  .baguette{width:110px;height:32px}
  .doss{flex-direction:column}
  .doss img{width:110px;height:110px}
  .btn.big{height:48px;font-size:18px}
  #film{object-position:60% center}
}
@media (max-width:380px){.brand span{display:none}}