:root{
  --g900:#0F3D2E;--g700:#1F5C45;--orange:#FF7A3D;--cream:#F5EFE0;--ink:#0B0D0E;--lime:#D9F99D;
  --haldi:#F2B705;--sindoor:#D7263D;--peacock:#0E7C86;--rani:#E0457B;--red:#F0504F;
  --display:"Anton","Impact","Arial Narrow",sans-serif;--body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--deva:"Tiro Devanagari Hindi","Noto Sans Devanagari",serif;
  --smooth:cubic-bezier(.22,1,.36,1);--pop:cubic-bezier(.34,1.56,.64,1);--m:clamp(18px,4vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#050607;color:var(--cream);font-family:var(--body);overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--haldi);outline-offset:3px}
a{color:inherit}
#app{position:fixed;inset:0;overflow:hidden}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;transition:filter .35s}
#game.graded{filter:saturate(.35) brightness(.7) contrast(1.1)}
#game.dead{filter:grayscale(1) brightness(.5);transition:filter 1.4s}
#game.soft{filter:blur(6px) brightness(.55) saturate(.8)}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.06;background-image:var(--pat-grain);animation:grain .5s steps(3) infinite}
@keyframes grain{33%{transform:translate(3%,-2%)}66%{transform:translate(-2%,3%)}}
.vign{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 45%,rgba(0,0,0,.55) 100%)}
.site-bar{position:absolute;z-index:55;top:max(14px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(70px,calc(env(safe-area-inset-right) + 60px));display:flex;align-items:center;gap:14px;pointer-events:none}
.site-bar.off{display:none}
.site-bar .logo{pointer-events:auto;display:inline-flex;align-items:center;line-height:0}
.site-bar .logo img{display:block;height:22px;width:auto}
.site-bar em{pointer-events:none;font-style:normal;font-size:13px;font-weight:600;color:rgba(245,239,224,.55)}
.screen{position:absolute;inset:0;display:none;overflow:hidden;z-index:2}
.screen.on{display:block}
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.9}
.deva{font-family:var(--deva)}
.kicker{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--haldi)}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:0 34px;border-radius:6px;background:var(--orange);color:#140a04;
  font-family:var(--display);font-size:23px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;box-shadow:0 10px 30px rgba(255,122,61,.35),inset 0 -3px 0 rgba(0,0,0,.25);transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 14px 40px rgba(255,122,61,.5),inset 0 -3px 0 rgba(0,0,0,.25)}
.btn:active{transform:translateY(2px)}
.btn .arr{width:20px;height:20px}
.btn.sec{background:rgba(255,255,255,.06);color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(245,239,224,.55);font-family:var(--body);font-weight:700;font-size:16px;letter-spacing:0;text-transform:none;min-height:52px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn.sec:hover{background:rgba(255,255,255,.12)}
.btn.full{width:100%}
.tbtn{font-weight:700;font-size:15px;opacity:.9;padding:8px 4px;display:inline-flex;gap:8px;align-items:center;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(245,239,224,.35)}
.tbtn svg{width:18px;height:18px}
@media (max-width:640px){.btn{min-height:54px;font-size:20px;padding:0 22px}}

/* caption / subtitle / impact */
.caption{position:absolute;left:50%;top:max(20px,env(safe-area-inset-top));transform:translateX(-50%);z-index:40;width:max-content;max-width:min(92vw,860px);
  background:rgba(5,7,8,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-left:3px solid var(--orange);border-radius:4px;padding:11px 20px;font-size:clamp(15px,1.9vw,21px);font-weight:700;line-height:1.3;animation:capIn .4s var(--smooth) both}
@keyframes capIn{from{opacity:0;transform:translate(-50%,-10px)}}
.subtitle{position:absolute;left:50%;bottom:max(9%,70px);transform:translateX(-50%);z-index:36;width:max-content;max-width:min(90vw,760px);text-align:center;
  font-size:clamp(16px,2vw,23px);font-weight:700;line-height:1.35;color:#fff;text-shadow:0 2px 3px #000,0 0 18px rgba(0,0,0,.9);animation:capIn .35s var(--smooth) both}
.subtitle b{color:var(--acc,var(--haldi));margin-right:6px}
.impact{position:absolute;z-index:15;pointer-events:none;font-family:var(--display);font-size:clamp(56px,11vw,150px);letter-spacing:.02em;color:#fff;
  text-shadow:0 0 30px rgba(215,38,61,.8),0 6px 0 rgba(0,0,0,.6);transform:translate(-50%,-50%);animation:impact 1s var(--smooth) both;white-space:nowrap}
@keyframes impact{0%{opacity:0;transform:translate(-50%,-50%) scale(1.8);filter:blur(12px)}18%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.96)}}
.stamp{position:absolute;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;color:var(--sindoor);border:6px double var(--sindoor);font-family:var(--display);font-size:30px;
  text-align:center;line-height:1;background:rgba(245,239,224,.94);transform:rotate(-12deg);animation:slam .26s var(--pop) both;pointer-events:none;z-index:20;-webkit-mask-image:var(--pat-grungemask);mask-image:var(--pat-grungemask)}
.stamp small{display:block;font-family:var(--body);font-weight:700;font-size:10px;letter-spacing:.2em;margin-top:4px}
@keyframes slam{0%{transform:scale(2.4) rotate(-20deg);opacity:0}70%{transform:scale(.92) rotate(-11deg);opacity:1}100%{transform:scale(1) rotate(-12deg)}}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes fadeIn{from{opacity:0}}

/* ---------- Ealth card (matches the real printed card) ---------- */
.ecard{--er:#F0504F;--ed:#1E292E;--et:#1A1A1A;position:relative;width:var(--cw,420px);perspective:1400px;container-type:inline-size;font-family:"Poppins",var(--body)}
.ecard .flip{position:relative;width:100%;aspect-ratio:457/292;transform-style:preserve-3d;transition:transform .5s var(--smooth)}
.ecard.flipped .flip{transform:rotateY(180deg)}
.ecard .face{position:absolute;inset:0;border-radius:4cqw;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;color:var(--et);
  box-shadow:inset 0 0 0 .25cqw rgba(0,0,0,.12),0 2cqw 6cqw rgba(0,0,0,.45)}
.ecard .face::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 48%,transparent 56%);transform:translateX(-60%);pointer-events:none;z-index:9}
.ecard.sheen .face::after{animation:sheen 1.1s .15s var(--smooth) both}
@keyframes sheen{to{transform:translateX(60%)}}
.ecard .back{transform:rotateY(180deg)}
.ecard.glow .face{box-shadow:inset 0 0 0 .25cqw rgba(0,0,0,.1),0 0 0 .8cqw var(--lime),0 0 10cqw rgba(217,249,157,.55)}
.ec-cross{position:absolute;width:14cqw;height:13.2cqw}
.ec-cross::before,.ec-cross::after{content:"";position:absolute;background:var(--er)}
.ec-cross::before{left:33%;right:33%;top:0;bottom:0}.ec-cross::after{top:33%;bottom:33%;left:0;right:0}
.front .ec-cross{left:4.4cqw;top:3.9cqw}
.back .ec-cross{left:81.4cqw;top:4.4cqw}
.ec-band{position:absolute;left:24.7cqw;right:0;top:3.9cqw;height:13.8cqw;background:var(--ed);border-radius:2.4cqw 0 0 2.4cqw;display:flex;align-items:center;padding:0 4cqw 0 4.6cqw;color:#fff}
.ec-logo{font-weight:700;font-size:7.4cqw;letter-spacing:-.04em;line-height:1}
.ec-logo .r{color:var(--er)}
.ec-band .tt{margin-left:3cqw;font-size:3.3cqw;line-height:1.15;font-weight:500}
.ec-band .nfc{margin-left:auto;width:6.6cqw;height:6.6cqw;border-radius:50%;border:.5cqw solid #fff;display:grid;place-items:center}
.ec-band .nfc svg{width:70%;height:70%}
.ec-panel{position:absolute;left:0;top:21.9cqw;width:63.5cqw;height:39.4cqw;background:var(--er);border-radius:0 2.6cqw 2.6cqw 0;color:#fff;padding:4.2cqw 3cqw 0 4.4cqw}
.ec-name{font-weight:700;font-size:5.2cqw;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-bl{margin-top:3cqw;font-weight:700;font-size:2.3cqw;color:var(--et);letter-spacing:.02em}
.ec-blood{font-weight:700;font-size:13cqw;line-height:1;letter-spacing:-.02em;margin-top:.4cqw}
.ec-blood.unknown{font-size:4.6cqw;line-height:1.15;margin-top:1.4cqw;white-space:normal}
.ec-via{position:absolute;left:4.4cqw;right:2cqw;bottom:2.4cqw;font-weight:600;font-size:2.65cqw;white-space:nowrap}
.ec-scan{position:absolute;left:66.2cqw;top:21.4cqw;font-size:2.55cqw;font-weight:500;white-space:nowrap}
.ec-scan b{color:var(--er);font-weight:700}
.ec-qr{position:absolute;left:66.6cqw;top:27.2cqw;width:26.3cqw;height:26.3cqw}
.ec-qr svg{width:100%;height:100%;display:block}
.ec-url{position:absolute;left:66.2cqw;top:57.4cqw;font-size:2.7cqw;letter-spacing:-.01em;font-weight:500;white-space:nowrap}
.ec-url b,.ec-code{color:var(--er);font-weight:600}
.ec-tab{position:absolute;left:0;top:3.9cqw;width:76.6cqw;height:13.6cqw;background:var(--er);border-radius:0 2.6cqw 2.6cqw 0;display:flex;align-items:center;padding-left:4.4cqw;font-size:5.3cqw;color:var(--et);white-space:nowrap}
.ec-tab b{color:#fff;font-weight:700;margin-right:1.2cqw}
.ec-lab{position:absolute;left:4.4cqw;font-size:2.4cqw;font-weight:700;color:var(--er);letter-spacing:.01em}
.ec-val{position:absolute;left:4.4cqw;right:4cqw;font-size:5.3cqw;font-weight:600;color:var(--et);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.ec-rule{position:absolute;left:4.4cqw;right:4.4cqw;top:45.6cqw;height:.3cqw;background:#F6B8B7}
.ec-hint{position:absolute;left:4.4cqw;top:47.6cqw;font-size:2.7cqw;color:var(--et)}
.ec-sos{position:absolute;top:52cqw;display:flex;flex-direction:column}
.ec-sos b{font-size:5.3cqw;font-weight:500;display:flex;align-items:center;gap:.8cqw;line-height:1}
.ec-sos b svg{width:4cqw;height:4cqw;color:var(--er)}
.ec-sos span{font-size:2.6cqw;color:var(--er);margin-top:.6cqw}
.ec-bcode{position:absolute;right:4.4cqw;top:51.6cqw;text-align:right;line-height:1.1}
.ec-bcode .ec-code{font-size:4.4cqw;font-weight:700;display:block}
.ec-bcode span{font-size:2.85cqw}

.ec-blood.hl{background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 96%/0% 1cqw;animation:uline .6s var(--smooth) forwards}
@keyframes uline{to{background-size:100% 1cqw}}
.ec-in{animation:rowIn .3s var(--smooth) both}
@keyframes rowIn{from{opacity:0;transform:translateY(2cqw)}to{opacity:1;transform:none}}
/* scan strip: what a tap on the card opens */
.scan-strip{margin-top:2.6cqw;background:rgba(20,26,28,.94);border:.4cqw solid rgba(217,249,157,.55);border-radius:3cqw;padding:2.6cqw 3.6cqw 3cqw;color:var(--cream);font-family:var(--body)}
.scan-strip .sh{display:flex;align-items:center;gap:1.4cqw;font-size:max(10px,2.6cqw);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-bottom:1.6cqw}
.scan-strip .sh svg{width:max(14px,3.4cqw);height:max(14px,3.4cqw)}
.scan-strip .rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(24cqw,1fr));gap:1.4cqw 4cqw}
.scan-strip .k{display:block;font-size:max(10px,2.5cqw);font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.scan-strip .v{display:block;font-size:max(15px,4.4cqw);font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.scan-strip.hide{opacity:0}
.scan-strip.show{animation:rowIn .35s var(--smooth) both}
/* empty card: identical geometry, nothing on it */
.ecard.empty .face{background:#d9d9d4}
.ecard.empty .ec-cross::before,.ecard.empty .ec-cross::after{background:#a3a39c}
.ecard.empty .ec-band{background:#8e8e88}
.ecard.empty .ec-panel{background:#a3a39c}
.ecard.empty .ec-qr{border:.6cqw dashed #8e8e88;border-radius:1.5cqw;display:grid;place-items:center;font-size:12cqw;color:#8e8e88;font-weight:700}
.ecard.empty .q{animation:flick 1.1s steps(2) infinite}
.ecard.empty .ec-scan b,.ecard.empty .ec-url b{color:#77776f}
.scan-strip.empty{background:rgba(60,60,58,.94);border-color:#77776f}
.scan-strip.empty .sh{color:#bdbdb4}
.scan-strip.empty .v{animation:flick 1.1s steps(2) infinite}
@keyframes flick{50%{opacity:.35}}
.water{position:absolute;inset:0;pointer-events:none;border-radius:4cqw;overflow:hidden;z-index:8;aspect-ratio:457/292;height:auto}
.water i{position:absolute;top:-10%;width:2.2cqw;height:3.2cqw;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:rgba(150,210,240,.8);box-shadow:inset -.4cqw -.4cqw 0 rgba(255,255,255,.8);animation:drip 1.4s ease-in forwards}
@keyframes drip{to{top:110%}}
.wp-badge{position:absolute;left:50%;top:-4.5cqw;transform:translateX(-50%) rotate(-3deg);background:var(--peacock);color:var(--cream);border:.5cqw solid var(--ink);border-radius:99px;padding:1cqw 3cqw;font-size:max(11px,3cqw);font-weight:700;white-space:nowrap;z-index:10;animation:pop .3s var(--pop) both;font-family:var(--body)}


/* loading */
#s-loading{background:#050607}
#s-loading.on{display:grid;place-items:center;text-align:center}
#s-loading h1{font-size:clamp(46px,8vw,90px);letter-spacing:.04em}
#s-loading .deva{color:var(--haldi);font-size:22px;opacity:.8}
.loadbar{width:min(420px,76vw);height:3px;background:rgba(255,255,255,.12);margin:26px auto 14px;overflow:hidden}
.loadbar i{display:block;height:100%;width:0;background:var(--orange);transition:width .2s}
#load-tip{font-size:14px;opacity:.6;letter-spacing:.06em;min-height:1.4em}
.fail{max-width:420px;line-height:1.5;opacity:.85;margin-top:18px}

/* title */
#s-title::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,5,6,.9) 0%,rgba(3,5,6,.62) 38%,rgba(3,5,6,0) 70%),linear-gradient(0deg,rgba(3,5,6,.8),transparent 30%)}
.t-wrap{position:absolute;left:0;top:0;bottom:0;width:min(640px,100%);padding:clamp(28px,6vh,80px) var(--m);display:flex;flex-direction:column;justify-content:center;z-index:2}
.t-top{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.t-top i{display:block;width:34px;height:2px;background:var(--orange)}
.t-title{position:relative}
.t-title h1{font-size:clamp(110px,17vw,240px);letter-spacing:.02em;line-height:.82;background:linear-gradient(180deg,#fff 30%,#f3d9b8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6))}
.t-title .deva{position:absolute;right:0;top:-6px;font-size:clamp(26px,3vw,40px);color:var(--haldi);opacity:.9}
.t-sub{font-family:var(--display);font-size:clamp(24px,3.2vw,40px);letter-spacing:.08em;color:var(--orange);margin-top:10px}
.t-sub sup{font-size:.45em;vertical-align:top;color:var(--cream);opacity:.7}
.t-lede{font-size:clamp(16px,1.35vw,19px);line-height:1.55;opacity:.85;max-width:38ch;margin:22px 0 30px}
.t-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.t-foot{font-size:12px;opacity:.55;max-width:46ch;line-height:1.5}
.t-loc{position:absolute;right:var(--m);bottom:max(24px,env(safe-area-inset-bottom));z-index:2;text-align:right;font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.t-loc b{display:block;font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.06em;opacity:1}
@media (max-width:760px),(orientation:portrait){
  #s-title::before{background:linear-gradient(0deg,rgba(3,5,6,.95) 0%,rgba(3,5,6,.75) 50%,rgba(3,5,6,.1) 80%)}
  .t-wrap{justify-content:flex-end;padding-bottom:max(28px,env(safe-area-inset-bottom))}
  .t-title h1{font-size:clamp(96px,30vw,150px)}
  .t-lede{margin:14px 0 20px}.t-loc{display:none}
}
.corner-ctl{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;z-index:60;display:flex;gap:8px}
.glass{background:rgba(6,9,10,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:10px}
.iconbtn{width:46px;height:46px;display:grid;place-items:center}
.iconbtn svg{width:22px;height:22px}

/* choice */
#s-choice{overflow-y:auto;background:rgba(3,5,6,.55)}
.ch-wrap{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:clamp(56px,8vh,80px) var(--m) 40px}
.ch-wrap h2{font-size:clamp(40px,5.4vw,80px);text-align:center;margin:10px 0 clamp(22px,4vh,44px)}
.posters{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.6vw,36px);width:min(1180px,100%)}
.poster{position:relative;text-align:left;border-radius:10px;overflow:hidden;min-height:clamp(420px,60vh,620px);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:var(--cream);
  box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1);transition:transform .35s var(--smooth),opacity .3s;background:#111}
.poster:hover{transform:translateY(-8px)}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 6s linear}
.poster:hover img{transform:scale(1.06)}
.poster::after{content:"";position:absolute;inset:0;z-index:1}
.poster.a::after{background:linear-gradient(0deg,rgba(40,4,8,.95) 0%,rgba(90,10,20,.45) 45%,rgba(120,20,20,.15) 100%);mix-blend-mode:normal}
.poster.b::after{background:linear-gradient(0deg,rgba(2,24,18,.95) 0%,rgba(10,60,40,.35) 45%,transparent 100%)}
.poster .txt{position:relative;z-index:3}
.poster .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;border-radius:3px;margin-bottom:14px}
.poster.a .tag{background:var(--sindoor)}.poster.b .tag{background:var(--lime);color:#0b1a12}
.poster h3{font-size:clamp(44px,5vw,76px);margin-bottom:10px}
.poster .line{font-family:var(--display);font-size:clamp(20px,2vw,27px);letter-spacing:.04em;color:var(--haldi)}
.poster p{font-size:16px;line-height:1.45;margin:6px 0 12px;max-width:36ch;opacity:.9}
.poster small{font-size:13px;font-weight:700;opacity:.75}
.poster.dim{opacity:.3;transform:scale(.97)}
@media (max-width:760px){.posters{grid-template-columns:1fr}.poster{min-height:440px}}

/* build */
#s-build{grid-template-columns:1fr 1fr;background:rgba(3,5,6,.35)}
#s-build.on{display:grid}
.b-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:var(--m)}
.b-stage .yours{display:flex;gap:8px;align-items:center;font-weight:700;color:var(--lime);font-size:14px;letter-spacing:.06em}
#build-card{width:100%;display:flex;justify-content:center}
.b-stage .ecard{--cw:min(560px,42vw)}
.b-form{background:rgba(6,9,10,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-left:1px solid rgba(255,255,255,.1);overflow-y:auto;padding:clamp(24px,4vw,56px)}
.b-form h2{font-size:clamp(40px,4.4vw,64px);margin:8px 0}
.b-form .sub{font-size:17px;margin-bottom:26px;opacity:.8}
.field{margin-bottom:24px}
.field>.fl{display:block;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-bottom:10px}
.inp{width:100%;height:52px;border-radius:6px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);padding:0 16px;font:inherit;font-size:18px;color:var(--cream)}
.inp:focus{border-color:var(--orange);outline:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid rgba(255,255,255,.28);font-weight:700;font-size:15px;transition:background .15s}
.chip:hover{background:rgba(255,255,255,.08)}
.chip[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#140a04}
.chips.bg .chip{min-width:62px}
.nudge{margin-top:10px;border-left:3px solid var(--haldi);padding:6px 12px;font-size:14px;color:var(--haldi)}
.b-foot{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.b-foot .tbtn{align-self:center}
.lock{display:flex;gap:8px;align-items:center;justify-content:center;font-size:13px;opacity:.6;text-align:center}
.two{display:grid;gap:10px}
@media (max-width:860px),(orientation:portrait){
  #s-build{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .b-stage{padding:14px;gap:8px}.b-stage .ecard{--cw:min(330px,80vw)}
  .b-stage .btn.sec{min-height:36px;font-size:14px;padding:0 14px}.b-form{padding:20px}
}

/* issued */
#s-issued{background:rgba(3,5,6,.6)}
#s-issued.on{display:grid;place-items:center}
#s-issued .ecard{--cw:min(620px,86vw);transition:transform .7s cubic-bezier(.6,-.1,.4,1),opacity .6s}
#s-issued .stage{position:relative}
#s-issued .stamp{right:-30px;top:-50px}
.pulse{position:absolute;width:40px;height:40px;border-radius:50%;border:4px solid var(--lime);transform:translate(-50%,-50%);animation:pulse 1.3s ease-out infinite;pointer-events:none}
.pulse.b{animation-delay:.45s}
@keyframes pulse{from{width:30px;height:30px;opacity:1}to{width:160px;height:160px;opacity:0}}

/* ride HUD */
#s-ride{touch-action:none}
.grade{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(ellipse at 50% 60%,rgba(14,124,134,.12),rgba(2,12,16,.72) 85%)}
.grade.on{opacity:1}
.hud{position:absolute;inset:0;pointer-events:none;z-index:10;transition:opacity .3s}
.hud.off{opacity:0}
.hud>*{position:absolute;pointer-events:auto}
.h-score{left:max(16px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));text-align:left}
.h-score b,.h-time b{display:block;font-family:var(--display);font-size:clamp(28px,3.2vw,42px);line-height:1;letter-spacing:.04em;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.h-score span,.h-time span{font-size:11px;font-weight:700;letter-spacing:.18em;opacity:.8;text-shadow:0 1px 4px #000}
.h-time{right:max(76px,calc(env(safe-area-inset-right) + 76px));top:max(14px,env(safe-area-inset-top));text-align:right}
.h-time.hot b{color:var(--orange)}
.h-pause{right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top))}
.h-route{left:50%;top:max(18px,env(safe-area-inset-top));transform:translateX(-50%);width:min(560px,46vw);pointer-events:none}
.h-route .line{position:relative;height:3px;background:rgba(255,255,255,.22);border-radius:3px}
.h-route .fill{position:absolute;left:0;top:0;bottom:0;background:var(--orange);border-radius:3px}
.h-route .dots{position:absolute;inset:0}
.h-route .dots i{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:#555;border:2px solid #0b0d0e;transform:translate(-50%,-50%)}
.h-route .dots i.done{background:var(--orange)}
.h-route .names{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 4px #000}
.h-route .names span{opacity:.45}.h-route .names span.now{opacity:1;color:var(--haldi)}
.h-card{left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center;padding:8px 12px 8px 8px}
.h-card .ecard{--cw:96px}
.h-card .ecard .face{box-shadow:0 0 0 2px var(--lime),0 0 16px rgba(217,249,157,.45);animation:hglow 2.4s ease-in-out infinite}
@keyframes hglow{50%{box-shadow:0 0 0 2px var(--lime),0 0 28px rgba(217,249,157,.8)}}
.h-card .nocard{width:96px;aspect-ratio:457/292;border:2px dashed #888;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#aaa}
.h-card .meta{font-size:12px;line-height:1.35;opacity:.9}.h-card .meta b{display:block;font-size:14px}
.h-stats{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:18px;padding:8px 16px}
.h-stats div{text-align:center}.h-stats b{display:block;font-family:var(--display);font-size:26px;line-height:1}.h-stats span{font-size:10px;font-weight:700;letter-spacing:.14em;opacity:.7}
.h-speed{left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);text-align:center;text-shadow:0 2px 6px #000}
.h-speed b{font-family:var(--display);font-size:44px;line-height:1}.h-speed span{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;opacity:.8}
.honk{right:max(16px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 70px);width:76px;height:76px;border-radius:50%;background:rgba(242,183,5,.92);color:#140a04;
  font-family:var(--display);font-size:16px;letter-spacing:.06em;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.honk .cd{position:absolute;inset:0;background:rgba(0,0,0,.55);transform-origin:bottom;transform:scaleY(0)}
.honk span{position:relative}
.loc-card{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:22%;z-index:12;text-align:right;pointer-events:none;opacity:0;transform:translateX(30px);transition:all .6s var(--smooth)}
.loc-card.on{opacity:1;transform:none}
.loc-card small{display:block;font-size:12px;font-weight:700;letter-spacing:.3em;color:var(--acc,var(--haldi));text-shadow:0 1px 6px #000}
.loc-card b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(38px,5.6vw,76px);line-height:.95;letter-spacing:.03em;text-shadow:0 4px 18px rgba(0,0,0,.85)}
.loc-card i{display:block;height:2px;width:120px;margin:10px 0 0 auto;background:var(--acc,var(--haldi))}
.hint{position:absolute;left:50%;top:26%;transform:translateX(-50%);z-index:12;text-align:center;pointer-events:none;background:rgba(5,7,8,.7);padding:12px 20px;border-radius:6px;font-weight:700;transition:opacity .5s}
.toast{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:13;font-family:var(--display);font-size:clamp(26px,3.6vw,46px);letter-spacing:.04em;color:var(--haldi);text-shadow:0 3px 14px rgba(0,0,0,.9);pointer-events:none;animation:toast 1.1s var(--smooth) forwards;white-space:nowrap}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%)}}
@media (max-width:760px),(orientation:portrait){
  .h-route{top:calc(max(14px,env(safe-area-inset-top)) + 62px);width:84vw}
  .h-route .names span{display:none}.h-route .names span.now,.h-route .names span.next{display:inline}
  .h-speed{display:none}.h-card .meta{display:none}
  .h-score b,.h-time b{font-size:26px}
  .toast{font-size:24px;white-space:normal;width:86vw;text-align:center}
  .loc-card{bottom:30%}
}
@media (min-width:1025px) and (hover:hover){.honk{display:none}}

/* overlay */
#ov{position:absolute;inset:0;z-index:20;pointer-events:none}
#ov>*{pointer-events:auto}
.glow-spot{position:absolute;width:0;height:0;z-index:25;pointer-events:none!important}
.glow-spot .core{position:absolute;width:56px;height:56px;left:-28px;top:-28px;border-radius:50%;background:radial-gradient(circle,#fff 0,var(--lime) 35%,rgba(217,249,157,0) 70%);animation:breathe 1s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.3)}}
.tap-ui{position:absolute;z-index:26;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:8px}
.tap-pill{display:flex;align-items:center;gap:10px;background:var(--lime);color:#0b1a12;border-radius:99px;padding:13px 24px;font-weight:700;font-size:clamp(15px,1.8vw,19px);box-shadow:0 0 30px rgba(217,249,157,.55);white-space:nowrap;animation:bob .9s ease-in-out infinite}
.tap-pill svg{width:22px;height:22px}
@keyframes bob{50%{transform:translateY(-5px)}}
.gm{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--lime);background:rgba(5,7,8,.75);padding:5px 10px;border-radius:99px}
.gm .t{width:150px;height:5px;border-radius:9px;background:rgba(217,249,157,.2);overflow:hidden}.gm .t i{display:block;height:100%;background:var(--lime);transform-origin:left}
.hit{position:absolute;width:130px;height:130px;transform:translate(-50%,-50%);border-radius:50%;z-index:24}
.dim{position:absolute;inset:0;background:rgba(2,6,6,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .3s both;z-index:27}
.reveal{position:absolute;left:50%;top:52%;z-index:30;transform:translate(-50%,-50%)}
.reveal.fly{transition:all .55s cubic-bezier(.3,1.25,.5,1)}
.reveal.side{transition:all .5s var(--smooth)}
.call-chip{position:absolute;z-index:31;background:rgba(5,7,8,.9);color:var(--cream);border:1.5px solid var(--lime);border-radius:99px;padding:8px 14px;font-weight:700;font-size:14px;display:flex;gap:8px;align-items:center;animation:pop .3s var(--pop) both;white-space:nowrap}
.call-chip svg{width:18px;height:18px;color:var(--lime)}
.call-chip.ok{border-color:#5BD27A}.call-chip.ok svg{color:#5BD27A}
.revive-flash{position:absolute;inset:0;z-index:22;pointer-events:none;background:radial-gradient(circle at var(--x) var(--y),rgba(217,249,157,.7),rgba(217,249,157,0) 45%);animation:fadeOut 1s forwards}
@keyframes fadeOut{to{opacity:0}}
.shabaash{position:absolute;z-index:32;transform:translate(-50%,-100%);text-align:center;animation:pop .35s var(--pop) both;pointer-events:none;text-shadow:0 3px 12px rgba(0,0,0,.9)}
.shabaash .deva{display:block;font-size:40px;color:var(--haldi)}
.shabaash b{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.14em}
.bonus{position:absolute;z-index:33;left:50%;top:20%;transform:translateX(-50%);font-family:var(--display);font-size:clamp(26px,3.6vw,44px);letter-spacing:.04em;color:var(--lime);text-shadow:0 3px 14px rgba(0,0,0,.9);animation:toast 1.4s var(--smooth) forwards;white-space:nowrap}
.pocket-items{position:absolute;z-index:26}
.pocket-items i{position:absolute;font-style:normal;font-size:12px;font-weight:700;background:rgba(245,239,224,.92);color:#111;border-radius:4px;padding:4px 8px;white-space:nowrap;animation:float-up 1.4s var(--smooth) forwards}
@keyframes float-up{from{transform:translate(0,0) rotate(0);opacity:0}20%{opacity:1}to{transform:translate(var(--dx),-120px) rotate(var(--r));opacity:0}}
.guess{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:34;width:min(560px,90vw);background:rgba(30,30,28,.92);border:1px solid #666;border-radius:10px;padding:26px;text-align:center}
.guess h4{font-size:clamp(24px,3vw,34px);font-family:var(--display);font-weight:400;letter-spacing:.04em;margin-bottom:6px;color:#e6e6de}
.guess .tm{height:4px;background:#555;border-radius:9px;margin:8px 0 18px;overflow:hidden}.guess .tm i{display:block;height:100%;background:#bdbdb4;transform-origin:left}
.guess .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.guess .opts button{min-height:52px;border-radius:6px;border:1px solid #8a8a82;color:#ddd;font-weight:700;font-size:16px;animation:jit .12s steps(2) infinite}
.guess .opts button:nth-child(2n){animation-delay:.06s}
.guess .gl{margin-top:12px;height:18px;font-size:13px;color:#aaa;font-style:italic}
@keyframes jit{50%{transform:translate(1px,-1px)}}
.noresp{position:absolute;inset:0;z-index:40;background:#0d0d0c;display:grid;place-items:center;text-align:center;padding:30px;animation:fadeIn 1.2s both}
.noresp h3{font-size:clamp(28px,4vw,52px);font-weight:700;line-height:1.15;max-width:18ch;margin:0 auto}
.noresp p{font-size:clamp(17px,1.8vw,22px);opacity:0;margin:22px auto 0;max-width:40ch;line-height:1.5;color:#d6d0c2;transition:opacity 1s}
.noresp .m{font-size:14px;letter-spacing:.06em;margin-top:26px}
.fadein{opacity:1!important}

/* pause */
#s-pause{z-index:80;background:rgba(3,5,6,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#s-pause.on{display:grid;place-items:center}
.p-panel{width:min(420px,90vw);padding:40px 32px 30px;text-align:center;display:flex;flex-direction:column;gap:12px}
.p-panel h2{font-size:58px;margin-bottom:2px}
.p-panel .deva{color:var(--haldi);font-size:18px;margin-bottom:10px}

/* finale */
#s-finale.on{display:block}
#s-finale::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 35%),linear-gradient(180deg,rgba(0,0,0,.45),transparent 25%)}
.fin-banner{position:absolute;left:50%;top:max(7%,40px);transform:translateX(-50%);z-index:8;text-align:center;animation:capIn .6s var(--smooth) both;white-space:nowrap;text-shadow:0 3px 16px rgba(0,0,0,.9)}
.fin-banner .deva{display:block;font-size:clamp(34px,5vw,62px);line-height:1.1;color:var(--haldi)}
.fin-banner b{font-family:var(--display);font-weight:400;letter-spacing:.35em;font-size:clamp(13px,1.4vw,18px)}
.fin-card{position:absolute;z-index:9;right:8%;top:26%;--cw:clamp(170px,22vw,300px);transform:rotate(-6deg);animation:pop .4s var(--pop) both}
#s-finale .stamp{left:6%;bottom:14%;width:140px;height:140px;font-size:26px}
.flash{position:absolute;inset:0;z-index:12;background:#fff;animation:flash .45s forwards;pointer-events:none}
@keyframes flash{from{opacity:.85}to{opacity:0}}
@media (orientation:portrait){.fin-card{right:50%;transform:translateX(50%) rotate(-5deg);top:auto;bottom:24%}}

/* end */
#s-end{overflow-y:auto;background:rgba(3,5,6,.72);transition:background 2s}
#s-end.grey{background:rgba(40,40,38,.96)}
.e-grid{min-height:100%;display:grid;grid-template-columns:45fr 55fr;gap:clamp(20px,3vw,48px);padding:clamp(20px,4vw,60px);align-items:center}
.e-art{position:relative;aspect-ratio:4/5;max-height:84vh;width:100%;overflow:hidden;border-radius:10px;background:#111;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.e-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.e-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent 45%)}
.e-art .ecard{position:absolute;right:6%;bottom:14%;--cw:48%;transform:rotate(-6deg);z-index:5}
.e-art .cap{position:absolute;left:6%;bottom:5%;right:6%;z-index:6;font-weight:700;font-size:15px}
.e-panel{padding:clamp(10px,2vw,30px) 0}
.e-panel .who{font-weight:700;color:var(--haldi);font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.e-panel h2{font-size:clamp(42px,4.8vw,76px);margin:10px 0 24px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);margin-bottom:22px}
.stats div{padding:14px 6px;text-align:center}
.stats div+div{border-left:1px solid rgba(255,255,255,.12)}
.stats b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,36px);line-height:1}
.stats span{font-size:12px;font-weight:700;opacity:.65}
.stats s{color:var(--sindoor)}
.rank{display:inline-block;font-family:var(--display);font-size:clamp(20px,2vw,28px);letter-spacing:.06em;padding:6px 16px;border:1.5px solid var(--haldi);color:var(--haldi);border-radius:4px;margin-bottom:22px}
.e-panel h3{font-size:clamp(22px,2.2vw,30px);font-weight:700;line-height:1.2}
.e-panel .body{font-size:17px;margin:6px 0 24px;max-width:44ch;line-height:1.45;opacity:.85}
.e-actions{display:flex;flex-direction:column;gap:12px}
.e-actions .row{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
.e-disc{font-size:12px;opacity:.5;margin-top:18px;text-align:center;line-height:1.5}
.e-grid.nocard{grid-template-columns:1fr;max-width:760px;margin:0 auto;text-align:center}
.e-grid.nocard .body{margin-left:auto;margin-right:auto}
.primary-wrap{border-radius:10px;padding:0;transition:box-shadow 1s}
.primary-wrap.framed{box-shadow:0 0 0 2px var(--lime),0 0 40px rgba(217,249,157,.35)}
@media (max-width:860px),(orientation:portrait){.e-grid{grid-template-columns:1fr}.e-art{max-height:54vh;aspect-ratio:auto;height:54vh}.stats{grid-template-columns:repeat(2,1fr)}.stats div:nth-child(3){border-left:0}.stats div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}}
.snack{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:200;background:#111;color:var(--cream);padding:12px 20px;border-radius:8px;font-weight:700;animation:capIn .3s both}
.sharebox{position:fixed;inset:0;z-index:190;background:rgba(0,0,0,.6);display:grid;place-items:center}
.sharebox>div{background:#15191a;padding:24px;border-radius:12px;width:min(460px,90vw);border:1px solid #333}
.sharebox textarea{width:100%;height:120px;margin:12px 0;border:1px solid #444;background:#0b0d0e;color:var(--cream);border-radius:8px;padding:10px;font:inherit}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}