@font-face{font-family:'Alfa Slab One';src:url(fonts/alfa-latin.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Barlow Condensed';src:url(fonts/barlow600-latin.woff2) format('woff2');font-weight:600;font-display:block}
@font-face{font-family:'Barlow Condensed';src:url(fonts/barlow700-latin.woff2) format('woff2');font-weight:700;font-display:block}
:root{--paper:#F3E9D2;--shade:#E2D3B0;--ink:#1D2A44;--red:#D8452E;--teal:#2E8C8A;--accent:#F29E4C}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#1D2A44;color:var(--ink);font-family:'Barlow Condensed',sans-serif;font-weight:600;user-select:none;-webkit-user-select:none;touch-action:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
#lines{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#ui{position:fixed;inset:0;pointer-events:none}
#ui>*{pointer-events:auto}
#grain{position:fixed;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 1.2 -.1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
.hidden{display:none!important}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
.paper{background:var(--paper)}

/* ---------- MENU ---------- */
#menu{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) 10px 10px;overflow:auto;touch-action:pan-y}
.passport{display:flex;width:min(1100px,100%);max-height:100%;background:#7A2E2A;padding:10px;border-radius:14px;box-shadow:0 18px 40px rgba(10,15,30,.55);gap:0;position:relative}
.page{flex:1;background:var(--paper);padding:clamp(10px,2vw,22px);position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;
background-image:repeating-linear-gradient(0deg,rgba(29,42,68,.035) 0 1px,transparent 1px 22px),radial-gradient(ellipse at center,transparent 55%,rgba(170,140,90,.25));}
.page.left{border-radius:8px 2px 2px 8px;box-shadow:inset -18px 0 22px -18px rgba(90,60,20,.45)}
.page.right{border-radius:2px 8px 8px 2px;box-shadow:inset 18px 0 22px -18px rgba(90,60,20,.45)}
#logo{width:min(240px,62%);aspect-ratio:1;filter:url(#ink);transform:rotate(-4deg)}
#logo svg{width:100%;height:100%;display:block}
.sub{font-weight:700;letter-spacing:.28em;text-transform:uppercase;font-size:13px;margin:2px 0 8px;text-align:center}
.label{font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:13px;margin:6px 0;color:var(--teal);text-align:center}
.label span{letter-spacing:.1em;color:var(--ink);opacity:.65}
.carousel{display:flex;align-items:center;gap:8px;width:100%;justify-content:center}
.arrow{font-family:'Alfa Slab One';font-size:34px;width:48px;height:64px;color:var(--ink);background:var(--shade);border-radius:10px;box-shadow:0 3px 0 rgba(29,42,68,.35)}
.arrow:active{transform:translateY(2px);box-shadow:none}
.tag{position:relative;width:min(230px,56vw);background:#F7EFD9;border:3px solid var(--ink);border-radius:12px 12px 12px 12px;clip-path:polygon(18% 0,82% 0,100% 12%,100% 100%,0 100%,0 12%);padding:26px 12px 10px;text-align:center;box-shadow:0 6px 14px rgba(0,0,0,.2);transform:rotate(1.5deg);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.tag.swap{transform:rotate(-3deg) scale(.94)}
.tag .hole{position:absolute;top:8px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:3px solid var(--ink);background:#7A2E2A}
.tag img{width:100%;aspect-ratio:1.25;object-fit:cover;border-radius:6px;background:var(--shade);display:block}
.rname{font-family:'Alfa Slab One';font-size:26px;letter-spacing:.02em;margin-top:6px;transform:rotate(-2deg)}
.rline{font-size:13px;letter-spacing:.15em;text-transform:uppercase;opacity:.8}
.rstats{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;font-size:12px;letter-spacing:.18em;text-align:left;margin-top:6px}
.rstats i{font-style:normal;color:var(--red);letter-spacing:.05em}
.dots{display:flex;gap:6px;margin-top:8px}
.dots b{width:9px;height:9px;border-radius:50%;border:2px solid var(--ink)}
.dots b.on{background:var(--red)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.4vw,16px);width:100%;padding:6px}
.card{position:relative;background:#FBF5E6;padding:6px 6px 26px;box-shadow:0 5px 12px rgba(40,30,10,.3);cursor:pointer;transition:transform .25s ease, box-shadow .25s}
.card:nth-child(1){transform:rotate(-2deg)}.card:nth-child(2){transform:rotate(1.6deg)}.card:nth-child(3){transform:rotate(1deg)}.card:nth-child(4){transform:rotate(-1.4deg)}
.card.sel{box-shadow:0 0 0 3px var(--red),0 10px 18px rgba(40,30,10,.38);z-index:2}
.card img{width:100%;aspect-ratio:1.45;object-fit:cover;display:block}
.card .cname{position:absolute;left:8px;bottom:4px;font-family:'Alfa Slab One';font-size:clamp(12px,1.5vw,16px);letter-spacing:.02em}
.card .best{position:absolute;right:8px;bottom:6px;font-size:11px;letter-spacing:.14em}
.card .pm{position:absolute;right:-8px;top:-10px;width:68px;height:68px;transform:rotate(12deg);opacity:.9;filter:url(#ink)}
.card .done{position:absolute;left:10px;top:10px;width:64px;height:64px;transform:rotate(-14deg);filter:url(#ink)}
.menuBtns{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:10px}
.stampBtn{font-family:'Alfa Slab One';font-size:22px;letter-spacing:.06em;color:var(--paper);padding:12px 22px;border-radius:8px;border:3px dashed rgba(243,233,210,.7);outline:4px solid var(--red);background:var(--red);transform:rotate(-2deg);box-shadow:0 5px 0 rgba(29,42,68,.35);min-height:52px}
.stampBtn.teal{background:var(--teal);outline-color:var(--teal);transform:rotate(1.5deg)}
.stampBtn:active{transform:rotate(-2deg) translateY(3px);box-shadow:none}
.stampBtn .k{font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.2em;opacity:.8;vertical-align:middle;margin-left:4px}
.chip{font-weight:700;letter-spacing:.2em;font-size:13px;padding:10px 14px;background:var(--shade);border:2px solid var(--ink);border-radius:6px;min-height:44px}
.chip.sq{width:44px;padding:0;font-family:'Alfa Slab One';letter-spacing:0;font-size:18px}
.how{font-size:13px;letter-spacing:.06em;margin-top:10px;text-align:center;line-height:1.5;opacity:.85}
.how b{font-weight:700;background:var(--shade);padding:0 5px;border-radius:3px}
body.touch .how{display:none}

@media (max-aspect-ratio:1/1){
  #menu{align-items:flex-start}
  .passport{flex-direction:column;max-height:none}
  .page.left{border-radius:8px 8px 2px 2px;box-shadow:inset 0 -18px 22px -18px rgba(90,60,20,.45)}
  .page.right{border-radius:2px 2px 8px 8px;box-shadow:inset 0 18px 22px -18px rgba(90,60,20,.45)}
  #logo{width:min(170px,44vw)}
}
@media (max-height:500px) and (min-aspect-ratio:1/1){
  #logo{width:min(130px,30vh)}
  .tag img{aspect-ratio:1.9}
  .rstats{display:none}
  .card img{aspect-ratio:2}
  .how{margin-top:4px}
  .stampBtn{padding:8px 16px;font-size:18px;min-height:44px}
}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none}
#hud>*{pointer-events:auto}
.stub{position:absolute;left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));background:var(--paper);padding:2px 16px 4px 14px;border-radius:6px;display:flex;align-items:baseline;box-shadow:0 4px 10px rgba(0,0,0,.25);transform:rotate(-3deg);
-webkit-mask:radial-gradient(circle 7px at 100% 50%,transparent 6px,#000 7px);mask:radial-gradient(circle 7px at 100% 50%,transparent 6px,#000 7px);border-left:4px dashed var(--shade)}
#posN{font-family:'Alfa Slab One';font-size:clamp(40px,7vw,64px);color:var(--red);line-height:1;filter:url(#ink)}
#posS{font-family:'Alfa Slab One';font-size:clamp(16px,2.6vw,24px);color:var(--red);margin-left:1px}
#posOf{font-weight:700;font-size:15px;letter-spacing:.1em;margin-left:6px;opacity:.7}
.stub.bump{animation:bump .4s ease}
@keyframes bump{0%{transform:rotate(-3deg) scale(1)}40%{transform:rotate(2deg) scale(1.18)}100%{transform:rotate(-3deg) scale(1)}}
.perf{position:absolute;left:calc(max(10px,env(safe-area-inset-left)) + clamp(120px,17vw,170px));top:max(12px,env(safe-area-inset-top));width:clamp(54px,8vw,72px);aspect-ratio:.86;background:var(--paper);padding:6px;transform:rotate(2deg);filter:drop-shadow(0 4px 5px rgba(0,0,0,.3));
-webkit-mask:radial-gradient(circle at 4px 4px,transparent 2.6px,#000 3.1px) -4px -4px/8px 8px,linear-gradient(#000,#000) content-box;mask:radial-gradient(circle at 4px 4px,transparent 2.6px,#000 3.1px) -4px -4px/8px 8px,linear-gradient(#000,#000) content-box}
#itemIcon{width:100%;height:100%;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;background:#FBF5E6}
#itemIcon svg{width:80%;height:80%}
#itemIcon.pop{animation:pop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes pop{0%{transform:scale(.3) rotate(-20deg)}100%{transform:scale(1) rotate(0)}}
.ltag{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));background:#F7EFD9;border:3px solid var(--ink);padding:6px 14px 6px 30px;clip-path:polygon(16px 0,100% 0,100% 100%,16px 100%,0 50%);transform:rotate(2.5deg);text-align:right;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.ltag .hole{position:absolute;left:14px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;border:2px solid var(--ink)}
.ltag .lbl{font-weight:700;letter-spacing:.3em;font-size:13px}
#lapN{font-family:'Alfa Slab One';font-size:clamp(20px,3vw,28px)}
#timeN{font-weight:700;letter-spacing:.14em;font-size:14px;color:var(--teal)}
#mini{position:absolute;right:max(10px,env(safe-area-inset-right));top:calc(max(10px,env(safe-area-inset-top)) + 72px);width:clamp(92px,15vw,150px);height:clamp(92px,15vw,150px);background:rgba(243,233,210,.88);border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.2);transform:rotate(-1.5deg)}
#topBtns{position:absolute;left:50%;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;gap:6px}
#topBtns .chip{background:rgba(243,233,210,.9)}
#wrong{position:absolute;left:50%;top:32%;transform:translate(-50%,-50%) rotate(-4deg);font-family:'Alfa Slab One';font-size:clamp(28px,6vw,54px);color:var(--red);border:5px solid var(--red);padding:4px 18px;border-radius:8px;background:rgba(243,233,210,.8);filter:url(#ink);pointer-events:none}
#touch{display:none}
body.touch #touch{display:block}
.tbtn{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(243,233,210,.82);border:3px solid var(--ink);font-family:'Alfa Slab One';font-size:28px;color:var(--ink);touch-action:none;box-shadow:0 4px 0 rgba(29,42,68,.35)}
.tbtn.on{background:var(--shade);transform:translateY(3px);box-shadow:none}
#steerL{left:max(14px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));width:clamp(74px,11vw,96px);height:clamp(74px,11vw,96px)}
#steerR{left:calc(max(14px,env(safe-area-inset-left)) + clamp(84px,12.5vw,110px));bottom:max(16px,env(safe-area-inset-bottom));width:clamp(74px,11vw,96px);height:clamp(74px,11vw,96px)}
#driftB{right:calc(max(14px,env(safe-area-inset-right)) + clamp(112px,15vw,136px));bottom:max(16px,env(safe-area-inset-bottom));width:clamp(74px,10vw,88px);height:clamp(74px,10vw,88px);font-size:16px;letter-spacing:.04em;background:rgba(46,140,138,.9);color:var(--paper)}
#driftB.on{background:#236e6c}
#brakeB{right:calc(max(14px,env(safe-area-inset-right)) + clamp(40px,5vw,50px));bottom:calc(max(16px,env(safe-area-inset-bottom)) + clamp(112px,15vw,132px));width:58px;height:58px;font-size:11px;font-family:'Barlow Condensed';font-weight:700;letter-spacing:.14em}
#shoot{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:clamp(100px,13vw,120px);height:clamp(100px,13vw,120px);border-radius:50%;touch-action:none;cursor:pointer}
#shoot::before{content:"";position:absolute;inset:-18px;border-radius:50%}
#shoot .ring{position:absolute;inset:0;border-radius:50%;background:var(--red);border:4px solid var(--paper);outline:4px solid var(--red);box-shadow:0 6px 0 rgba(29,42,68,.4),inset 0 0 0 5px rgba(243,233,210,.35);transition:transform .12s}
#shoot::after{content:"";position:absolute;inset:9px;border-radius:50%;border:2px dashed rgba(243,233,210,.75);pointer-events:none}
#shoot.empty .ring{background:#9a8f7c;outline-color:#9a8f7c}
#shoot.down .ring{transform:scale(.93)}
#shoot.back .ring{background:var(--teal);outline-color:var(--teal)}
#shootIcon{position:absolute;inset:22%;display:flex;align-items:center;justify-content:center;pointer-events:none}
#shootIcon svg{width:100%;height:100%}
#aimBack{position:absolute;left:50%;top:-30px;transform:translateX(-50%);font-weight:700;letter-spacing:.16em;font-size:13px;background:var(--teal);color:var(--paper);padding:3px 8px;border-radius:4px;white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
#shoot.back #aimBack{opacity:1}
#shoot .key{position:absolute;left:50%;bottom:-2px;transform:translate(-50%,50%);background:var(--paper);border:2px solid var(--ink);font-weight:700;letter-spacing:.18em;font-size:11px;padding:1px 6px;border-radius:4px;pointer-events:none}
body.touch #shoot .key{display:none}
#hint{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%) rotate(-1deg);background:rgba(243,233,210,.92);border:2px solid var(--ink);border-radius:6px;padding:6px 12px;font-size:14px;letter-spacing:.06em;max-width:min(560px,calc(100% - 300px));text-align:center;transition:opacity .6s;pointer-events:none}
#hint b{background:var(--shade);padding:0 4px;border-radius:3px}
body.touch #hint{bottom:auto;top:calc(max(10px,env(safe-area-inset-top)) + 56px);max-width:calc(100% - 40px)}
/* lost balance: a luggage tag with a needle gauge */
#balance{position:absolute;left:50%;top:max(58px,15%);transform:translateX(-50%) rotate(-1.5deg);width:min(300px,78vw);background:#F7EFD9;border:3px solid var(--ink);border-radius:8px;padding:8px 14px 10px;text-align:center;box-shadow:0 5px 12px rgba(0,0,0,.28);pointer-events:none;transition:opacity .25s}
#balance.hidden{display:block;opacity:0}
#balance .btitle{font-family:'Alfa Slab One';color:var(--red);font-size:clamp(20px,3.4vw,26px);line-height:1.05;transform:rotate(-3deg);filter:url(#ink)}
#balance.spin .btitle{animation:balShake .16s linear infinite}
@keyframes balShake{0%{transform:rotate(-5deg) translateX(-2px)}50%{transform:rotate(-1deg) translateX(2px)}100%{transform:rotate(-5deg) translateX(-2px)}}
#balance .bgauge{position:relative;height:22px;margin:8px 4px 6px;border:2px solid var(--ink);border-radius:11px;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(29,42,68,.18) 9px 10px),linear-gradient(90deg,#D8452E33,#F3E9D2 38%,#F3E9D2 62%,#D8452E33)}
#balance .bzone{position:absolute;left:43.7%;right:43.7%;top:-2px;bottom:-2px;background:var(--teal);opacity:.8;border-left:2px solid var(--ink);border-right:2px solid var(--ink)}
#balance.hold .bzone{opacity:1;box-shadow:0 0 0 3px rgba(46,140,138,.35)}
#balance .bneedle{position:absolute;left:0;right:0;top:-7px;bottom:-7px;pointer-events:none}
#balance .bneedle i{position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;background:var(--ink);border-radius:3px;box-shadow:0 0 0 2px #F7EFD9}
#balance .bcue{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;letter-spacing:.18em;font-size:clamp(14px,2.3vw,17px);color:var(--ink)}
#balance .barrow{font-family:'Alfa Slab One';font-size:1.35em;color:var(--red);opacity:.18;transition:opacity .12s}
#balance[data-dir="-1"] .barrow.r,#balance[data-dir="1"] .barrow.l{opacity:1;animation:balPulse .5s ease-in-out infinite alternate}
@keyframes balPulse{from{transform:scale(1)}to{transform:scale(1.3)}}
#balance.hold .btxt{color:var(--teal)}
#balance .bhold{height:7px;margin:7px 18px 0;border:2px solid var(--ink);border-radius:4px;background:#E2D3B0;overflow:hidden}
#balance .bhold i{display:block;height:100%;width:0;background:var(--teal)}
@media (max-aspect-ratio:1/1){
  .perf{left:auto;right:max(10px,env(safe-area-inset-right));top:calc(max(10px,env(safe-area-inset-top)) + 72px)}
  #mini{top:auto;right:auto;left:max(10px,env(safe-area-inset-left));top:calc(max(10px,env(safe-area-inset-top)) + 84px)}
  #topBtns{top:auto;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 200px);left:auto;right:max(10px,env(safe-area-inset-right));transform:none;flex-direction:column}
  body.touch #hint{top:auto;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 150px)}
  #hint{max-width:calc(100% - 30px);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 130px)}
}

/* ---------- STAMPS / COUNTDOWN ---------- */
#count{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center}
.bigStamp{position:absolute;font-family:'Alfa Slab One';color:var(--ink);font-size:clamp(90px,22vmin,200px);line-height:1;width:1.6em;height:1.6em;display:flex;align-items:center;justify-content:center;border:.07em solid currentColor;border-radius:50%;box-shadow:inset 0 0 0 .04em rgba(243,233,210,.9),inset 0 0 0 .07em currentColor;background:rgba(243,233,210,.55);filter:url(#ink);animation:slam .42s cubic-bezier(.2,1.4,.4,1) both}
.bigStamp.go{color:var(--red);width:auto;padding:0 .3em;border-radius:.16em;font-size:clamp(90px,20vmin,190px)}
.splat{position:absolute;width:clamp(240px,50vmin,460px);height:clamp(240px,50vmin,460px);background-size:contain;background-repeat:no-repeat;animation:splat .35s ease-out both;opacity:.85}
.fadeOut{animation:fadeOut .45s ease-in forwards!important}
@keyframes slam{0%{transform:scale(2.8) rotate(var(--r0));opacity:0}55%{transform:scale(.9) rotate(var(--r));opacity:1}75%{transform:scale(1.06) rotate(var(--r))}100%{transform:scale(1) rotate(var(--r));opacity:1}}
@keyframes splat{0%{transform:scale(.3) rotate(var(--r));opacity:0}100%{transform:scale(1) rotate(var(--r));opacity:.85}}
@keyframes fadeOut{to{opacity:0;transform:scale(1.08) rotate(var(--r))}}
#edgeInk{position:absolute;inset:0;pointer-events:none;opacity:0}
#edgeInk.burst{animation:edge 1.1s ease-out forwards}
@keyframes edge{0%{opacity:0;transform:scale(1.25)}15%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
#banner{position:absolute;top:22%;left:0;right:0;display:flex;justify-content:center;pointer-events:none;transform:translateX(120vw)}
#banner.in{animation:airmail 3.2s cubic-bezier(.3,1,.4,1) forwards}
@keyframes airmail{0%{transform:translateX(120vw) rotate(8deg)}18%{transform:translateX(0) rotate(-3deg)}78%{transform:translateX(0) rotate(-3deg)}100%{transform:translateX(-120vw) rotate(-10deg)}}
.env{position:relative;background:var(--paper);padding:18px 60px 18px 40px;border:10px solid transparent;border-image:repeating-linear-gradient(45deg,var(--red) 0 14px,var(--paper) 14px 22px,#2F4C8A 22px 36px,var(--paper) 36px 44px) 10;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.env .air{font-weight:700;letter-spacing:.4em;font-size:12px;color:#2F4C8A}
.env .txt{font-family:'Alfa Slab One';font-size:clamp(34px,7vw,64px);color:var(--red);filter:url(#ink);transform:rotate(-2deg)}
.env .mini-stamp{position:absolute;right:10px;top:8px;width:40px;height:48px;background:var(--teal);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:22px;border:3px dotted var(--paper)}
#wipe{position:absolute;inset:0;pointer-events:none;transform:translateX(-110%);
background:repeating-conic-gradient(var(--ink) 0 25%,var(--paper) 0 50%) 0 0/clamp(48px,8vmin,80px) clamp(48px,8vmin,80px)}
#wipe.go{animation:wipe 1.2s cubic-bezier(.6,0,.3,1) forwards}
@keyframes wipe{0%{transform:translateX(-110%) skewX(-12deg)}45%{transform:translateX(0) skewX(-12deg)}55%{transform:translateX(0) skewX(-12deg)}100%{transform:translateX(115%) skewX(-12deg)}}

/* ---------- RESULTS ---------- */
#results{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:10px max(14px,env(safe-area-inset-right)) 10px 10px;pointer-events:none}
#results>*{pointer-events:auto}
#finStamp{position:absolute;left:4%;top:6%;font-family:'Alfa Slab One';color:var(--red);font-size:clamp(26px,5vw,48px);border:5px solid var(--red);border-radius:12px;padding:6px 18px;background:rgba(243,233,210,.7);filter:url(#ink);animation:slam .5s cubic-bezier(.2,1.4,.4,1) both;pointer-events:none;text-align:center;line-height:1.05}
#finStamp small{display:block;font-family:'Barlow Condensed';font-weight:700;font-size:.34em;letter-spacing:.3em;color:var(--ink)}
.resPanel{width:min(400px,46vw);max-height:100%;overflow:auto;background:var(--paper);padding:14px;border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.4);transform:rotate(1deg);animation:rise .6s .5s cubic-bezier(.3,1.3,.5,1) both}
@keyframes rise{0%{transform:translateY(60px) rotate(4deg);opacity:0}100%{transform:rotate(1deg);opacity:1}}
.resHead{font-family:'Alfa Slab One';font-size:22px;text-align:center;margin-bottom:6px}
.ticket{display:flex;align-items:center;gap:10px;background:#FBF5E6;margin:6px 0;padding:6px 10px;border-left:6px solid var(--c);position:relative;box-shadow:0 2px 4px rgba(0,0,0,.15);
-webkit-mask:radial-gradient(circle 6px at 100% 50%,transparent 5px,#000 6px);mask:radial-gradient(circle 6px at 100% 50%,transparent 5px,#000 6px);animation:rise .4s both}
.ticket.me{background:#FFE6C9}
.ticket .p{font-family:'Alfa Slab One';font-size:24px;color:var(--red);width:48px}
.ticket .n{flex:1;font-weight:700;font-size:18px;letter-spacing:.1em}
.ticket .t{font-weight:700;letter-spacing:.1em;font-size:15px;border-left:2px dashed var(--shade);padding-left:10px}
#board{font-size:14px;letter-spacing:.06em;margin-top:8px}
#board .bh{font-weight:700;letter-spacing:.28em;font-size:12px;color:var(--teal);margin:6px 0 2px}
#board a{color:var(--ink)}
#board div.row{display:flex;justify-content:space-between;border-bottom:1px dotted var(--shade);padding:2px 0}
#board div.row.me{color:var(--red)}
@media (max-aspect-ratio:1/1){
  #results{align-items:flex-end;justify-content:center}
  .resPanel{width:100%;max-height:58%}
  #finStamp{left:50%;transform:translateX(-50%)}
}

/* ---------- PAUSE ---------- */
#pause{position:absolute;inset:0;background:rgba(29,42,68,.55);display:flex;align-items:center;justify-content:center;padding:12px}
.sheet{background:var(--paper);padding:18px 22px;border-radius:8px;max-width:520px;width:100%;max-height:100%;overflow:auto;box-shadow:0 16px 30px rgba(0,0,0,.45);transform:rotate(-1deg)}
.ptitle{font-family:'Alfa Slab One';font-size:34px;color:var(--red);text-align:center;filter:url(#ink)}
.controls{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:12px 0;font-size:16px;letter-spacing:.04em;align-items:center}
.controls b{font-weight:700;background:var(--shade);padding:2px 8px;border-radius:4px;text-align:center;letter-spacing:.12em;font-size:14px}


/* ---------- fit passes (added) ---------- */
.card .best{display:none}
.card .cname{right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-height:500px) and (min-aspect-ratio:1/1){
  #menu{padding:6px}
  .passport{padding:6px;height:100%}
  .page{padding:8px 10px;justify-content:center}
  .page.left{flex:.8}
  #logo{width:min(92px,24vh);margin-bottom:-2px}
  .sub{font-size:10px;margin:0 0 2px}
  .label{font-size:11px;margin:2px 0 4px}
  .carousel{gap:6px}
  .arrow{width:38px;height:52px;font-size:26px}
  .tag{width:min(170px,40vh + 20px);padding:18px 8px 6px}
  .tag .hole{top:4px;width:11px;height:11px}
  .tag img{aspect-ratio:2.1}
  .rname{font-size:19px;margin-top:3px}
  .rline{font-size:11px}
  .dots{margin-top:4px}
  .cards{gap:8px;padding:2px 4px}
  .card{padding:4px 4px 20px}
  .card img{aspect-ratio:2.3}
  .card .cname{font-size:12px;bottom:2px}
  .card .pm{width:46px;height:46px;top:-8px;right:-6px}
  .card .done{width:44px;height:44px}
  .menuBtns{margin-top:6px}
  .how{font-size:11px;margin-top:4px;line-height:1.35}
  .resPanel{padding:8px 12px}
  .resHead{font-size:17px;margin-bottom:2px}
  .ticket{margin:3px 0;padding:2px 10px}
  .ticket .p{font-size:17px;width:38px}
  .ticket .n{font-size:15px}
  .ticket .t{font-size:13px}
  #results .menuBtns{margin-top:6px}
  #results .stampBtn{font-size:15px;padding:6px 12px;min-height:40px}
  #finStamp{font-size:clamp(22px,4.4vw,40px);top:8%}
}

/* ---------- Dogelon cover postcard + logotype stamp ---------- */
.hero{position:relative;width:min(360px,94%);margin:4px 0 14px;flex-shrink:0}
#cover{display:block;width:100%;aspect-ratio:1.75;object-fit:cover;object-position:50% 72%;border:6px solid #FBF5E6;border-bottom-width:14px;box-shadow:0 8px 16px rgba(40,30,10,.35);transform:rotate(-1.6deg);background:var(--shade)}
.hero #logo{position:absolute;right:-16px;bottom:-6px;width:40%;margin:0;transform:rotate(-8deg);filter:url(#ink) drop-shadow(0 2px 0 rgba(243,233,210,.9))}
.hero #logo svg{background:rgba(243,233,210,.88);border-radius:50%}
@media (max-aspect-ratio:1/1){.hero{width:min(380px,90%)}}
@media (max-height:500px) and (min-aspect-ratio:1/1){
  .hero{width:min(250px,86%,52vh + 60px);margin:0 0 8px}
  #cover{aspect-ratio:2.35;border-width:4px;border-bottom-width:8px}
  .hero #logo{width:34%;right:-12px;bottom:-4px}
}

/* ---------- steering pad + shoot aim feedback ---------- */
#joyZone{position:absolute;left:0;bottom:0;width:min(46vw,440px);height:min(62vh,340px);touch-action:none}
#joy{position:absolute;left:calc(max(16px,env(safe-area-inset-left)) + var(--jr));bottom:calc(max(16px,env(safe-area-inset-bottom)) + var(--jr));--jr:clamp(58px,8.6vw,74px);width:calc(var(--jr)*2);height:calc(var(--jr)*2);margin:0 0 calc(var(--jr)*-1) calc(var(--jr)*-1);border-radius:50%;background:rgba(243,233,210,.78);box-shadow:0 4px 0 rgba(29,42,68,.35);pointer-events:none;transition:opacity .2s}
#joy.live{transition:none}
#joy .jring{position:absolute;inset:0;width:100%;height:100%}
#joy .jarrow{position:absolute;top:50%;transform:translateY(-50%);font-family:'Alfa Slab One';font-size:20px;color:var(--ink);opacity:.5}
#joy .jarrow.l{left:9%}#joy .jarrow.r{right:9%}
#joy .jarrow.on{color:var(--red);opacity:1}
#joyKnob{position:absolute;left:50%;top:50%;width:48%;height:48%;margin:-24% 0 0 -24%;border-radius:50%;background:var(--red);border:3px solid var(--paper);outline:3px solid var(--red);box-shadow:0 5px 0 rgba(29,42,68,.4),inset 0 0 0 4px rgba(243,233,210,.3);display:flex;align-items:center;justify-content:center;transition:transform .14s ease-out}
#joy.live #joyKnob{transition:none}
#joyKnob span{font-weight:700;font-size:11px;letter-spacing:.14em;color:var(--paper)}
#shoot .aimfill{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);transform:rotate(-90deg);pointer-events:none;overflow:visible}
#shoot .aimfill circle{fill:none;stroke:var(--teal);stroke-width:6;stroke-dasharray:296;stroke-dashoffset:296;stroke-linecap:round}
#shoot.down:not(.empty) .aimfill circle{animation:aimfill .42s linear forwards}
#shoot.back .aimfill circle{stroke:var(--paper);stroke-dashoffset:0;animation:none}
@keyframes aimfill{to{stroke-dashoffset:0}}
#shoot.nope{animation:nope .38s}
@keyframes nope{20%{transform:translateX(-7px) rotate(-4deg)}45%{transform:translateX(6px) rotate(3deg)}70%{transform:translateX(-3px)}}
#shoot .key{white-space:nowrap}
.gtitle{margin:0;font-family:'Alfa Slab One';font-weight:400;font-size:clamp(18px,2.6vw,26px);letter-spacing:.02em;line-height:1;color:var(--ink);text-align:center;transform:rotate(-2deg)}
.gtitle b{font-weight:400;color:var(--red)}
.hero+.gtitle{margin-top:2px}
@media (max-height:500px) and (min-aspect-ratio:1/1){.gtitle{font-size:16px}.sub{display:none}}
#driftB{transition:box-shadow .15s,background .15s}
#driftB[data-tier="0"]{box-shadow:0 0 0 4px var(--paper)}
#driftB[data-tier="1"]{box-shadow:0 0 0 5px #4FA3D9,0 0 14px #4FA3D9}
#driftB[data-tier="2"]{box-shadow:0 0 0 5px #F29E4C,0 0 16px #F29E4C}
#driftB[data-tier="3"]{box-shadow:0 0 0 6px #D8452E,0 0 18px #D8452E}

/* ---------- LOADING: the cover poster + how to play ---------- */
#loading{position:absolute;inset:0;background:var(--ink);z-index:9;transition:opacity .5s;overflow:hidden;display:flex;align-items:center;justify-content:center}
#loading .lbg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(16px) saturate(1.1) brightness(.62)}
.lwrap{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,40px);width:100%;height:100%;max-width:1280px;padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left))}
.lposter{position:relative;margin:0;flex:none;height:min(88vh,560px);aspect-ratio:1;background:var(--paper);padding:clamp(5px,1.1vh,10px);padding-bottom:clamp(14px,3vh,26px);transform:rotate(-2.5deg);box-shadow:0 18px 36px rgba(5,10,25,.55)}
.lposter img{width:100%;height:100%;object-fit:cover;display:block}
.llogo{position:absolute;left:-5%;bottom:-7%;width:34%;aspect-ratio:1;transform:rotate(-8deg);filter:drop-shadow(0 3px 2px rgba(29,42,68,.4))}
.llogo svg{width:100%;height:100%;display:block;background:rgba(243,233,210,.92);border-radius:50%}
.lcard{position:relative;flex:0 1 460px;min-width:0;max-height:100%;overflow:hidden;color:var(--ink);padding:clamp(10px,2.4vh,22px) clamp(12px,2vw,24px);border-radius:6px;transform:rotate(1.2deg);box-shadow:0 14px 30px rgba(5,10,25,.5);
background:var(--paper) repeating-linear-gradient(0deg,rgba(29,42,68,.035) 0 1px,transparent 1px 22px);display:flex;flex-direction:column;gap:clamp(4px,1.2vh,10px)}
.lcard::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:repeating-linear-gradient(90deg,var(--red) 0 16px,var(--paper) 16px 24px,var(--teal) 24px 40px,var(--paper) 40px 48px)}
.lhead{display:flex;flex-direction:column;align-items:flex-start;padding-top:4px}
.ltitle{font-family:'Alfa Slab One';font-size:clamp(22px,5.4vh,38px);color:var(--red);line-height:1;transform:rotate(-2deg);text-shadow:1px 1px 0 rgba(29,42,68,.18)}
.lgoal{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(11px,2.4vh,15px);color:var(--teal);margin-top:4px}
.lrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(3px,1vh,8px)}
.lrows li{display:grid;grid-template-columns:clamp(30px,8vh,48px) auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:clamp(3px,.9vh,7px) 0;border-top:2px dashed rgba(29,42,68,.2)}
.lic{grid-row:1/3;width:100%;aspect-ratio:1;background:var(--shade);border-radius:50%;padding:6px;display:block}
.lic svg{width:100%;height:100%;display:block}
.lrows b{font-family:'Alfa Slab One';font-weight:400;font-size:clamp(14px,3.3vh,20px);letter-spacing:.04em}
.keys{display:flex;gap:4px;align-items:center;justify-self:end}
.keys em{font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
kbd{font-family:'Barlow Condensed';font-weight:700;font-size:clamp(11px,2.3vh,14px);min-width:1.9em;text-align:center;padding:1px 6px;background:var(--paper);border:2px solid var(--ink);border-radius:5px;box-shadow:0 2px 0 var(--ink);letter-spacing:.08em}
.lrows p{grid-column:2/4;margin:1px 0 0;font-size:clamp(12px,2.6vh,15px);line-height:1.2;letter-spacing:.02em}
.lroute{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:4px}
.lbar{flex:1;height:10px;border-radius:5px;background:repeating-linear-gradient(90deg,rgba(29,42,68,.25) 0 8px,transparent 8px 14px);position:relative}
.lbar i{position:absolute;left:0;top:0;bottom:0;width:8%;background:var(--red);border-radius:5px;transition:width .35s ease-out}
.lbar i::after{content:"";position:absolute;right:-7px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--red);border:3px solid var(--ink)}
.lsub{font-weight:700;letter-spacing:.2em;font-size:11px;text-transform:uppercase;white-space:nowrap;opacity:.8}
@media (max-aspect-ratio:1/1){
  .lwrap{flex-direction:column;gap:clamp(14px,3vh,28px);justify-content:center}
  .lposter{height:auto;width:min(80vw,42vh,520px)}
  .lcard{flex:0 1 auto;width:min(96vw,520px)}
  .ltitle{font-size:clamp(24px,7vw,36px)}
  .lgoal{font-size:clamp(11px,3.4vw,15px)}
  .lrows b{font-size:clamp(15px,4.4vw,20px)}
  .lrows p{font-size:clamp(13px,3.8vw,15px)}
  .lrows li{grid-template-columns:clamp(34px,10vw,48px) auto 1fr}
  kbd{font-size:13px}
}
@media (max-aspect-ratio:1/1) and (max-height:760px){
  .lwrap{gap:12px}
  .lposter{width:min(78vw,36vh)}
  .lcard{gap:4px;padding:10px 12px}
  .ltitle{font-size:24px}.lgoal{font-size:11px}
  .lrows li{padding:3px 0;grid-template-columns:32px auto 1fr}
  .lrows b{font-size:15px}.lrows p{font-size:12.5px}
  kbd{font-size:12px}
}
@media (max-height:340px) and (min-aspect-ratio:1/1){.lrows p{display:none}.lrows li{grid-template-rows:auto}}

.lname{display:none;white-space:nowrap;font-family:'Alfa Slab One';color:var(--ink);font-size:clamp(16px,3.3vh,26px);line-height:1;transform:rotate(-1.5deg);margin-bottom:6px}
.lname b{font-weight:400;color:var(--red)}
.poster .lname{display:block;font-size:clamp(15px,2.7vh,20px)}
.poster .lroute{display:none}
.poster .lcard::after{content:"STARRING DOGELON · 5 RACERS · PAR AVION";display:block;margin-top:auto;padding-top:8px;font-weight:700;letter-spacing:.3em;font-size:14px;color:var(--ink);opacity:.7}
@media (max-aspect-ratio:1/1){.poster .lposter{width:min(80vw,38vh)}.poster .lwrap{gap:20px}}

/* PLAY: the cover waits for the player */
.lplay{display:none;align-self:center;width:min(100%,320px);margin-top:auto;font-size:clamp(22px,4.6vh,30px);min-height:56px;cursor:pointer;animation:lplayIn .45s cubic-bezier(.2,1.6,.4,1) both}
.lplay .k{font-size:12px}
#loading.ready .lroute{display:none}
#loading.ready .lplay{display:block}
.poster .lplay{display:none!important}
@keyframes lplayIn{0%{transform:rotate(-8deg) scale(1.5);opacity:0}100%{transform:rotate(-2deg) scale(1);opacity:1}}
.lplay:hover{filter:brightness(1.06)}
.lplay:focus-visible{outline-color:var(--ink)}
@media (max-aspect-ratio:1/1) and (max-height:760px){.lplay{min-height:50px;font-size:22px}}
@media (max-aspect-ratio:1/1){.lwrap{gap:clamp(10px,2vh,18px)}.lposter{width:min(80vw,34vh)}.lplay{min-height:52px;font-size:24px;margin-top:6px}}
@media (max-aspect-ratio:1/1) and (max-height:700px){.lposter{width:min(74vw,30vh)}}
@media (pointer:coarse){.lplay .k{display:none}}
.lposter .llogo{display:none}

/* ---------- finish-screen replay ---------- */
#replayTag{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));display:none;align-items:center;gap:8px;background:rgba(29,42,68,.82);color:var(--paper);padding:6px 12px 6px 10px;border-radius:6px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.18em;font-size:14px;pointer-events:none;box-shadow:0 4px 10px rgba(0,0,0,.3)}
#replayTag.on{display:flex}
#replayTag b{font-family:'Alfa Slab One',serif;font-weight:400;letter-spacing:.08em;font-size:16px;color:#FFB9A8}
#replayTag .rec{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px rgba(243,233,210,.8);animation:recblink 1s steps(2) infinite}
#replayTag .rt{opacity:.9}
@keyframes recblink{50%{opacity:.15}}
#results.watch #resList,#results.watch #board,#results.watch .resHead{display:none}
#results.watch #finStamp{visibility:hidden}
#results.watch{align-items:flex-end;justify-content:flex-end}
#results.watch .resPanel{width:auto;max-width:min(420px,94vw);padding:8px 10px;animation:none;transform:rotate(1deg)}
#results.watch .menuBtns{margin-top:0}
@media (max-aspect-ratio:1/1){
  #replayTag{top:max(12px,env(safe-area-inset-top));bottom:auto;left:max(12px,env(safe-area-inset-left));font-size:12px;padding:4px 10px 4px 8px}
  #replayTag b{font-size:14px}
  #finStamp{top:calc(max(12px,env(safe-area-inset-top)) + 34px);bottom:auto;left:0;right:0;margin:0 auto;width:max-content;max-width:92vw;font-size:clamp(20px,6.4vw,30px);padding:4px 12px}
  .resPanel{max-height:50%}
  #results .ticket{margin:3px 0;padding:3px 10px}
  #results .ticket .p{font-size:18px;width:40px}
  #results .ticket .n{font-size:15px}
  #results.watch .resPanel{max-height:none}
}

#topBtns .chip.snd{display:flex;align-items:center;justify-content:center}
.chip.off,#topBtns .chip.off{background:rgba(226,211,176,.95)}
/* ======== online: the room sheet, seat tags and the in-race note ======== */
#online{position:absolute;inset:0;z-index:20;background:rgba(29,42,68,.6);display:flex;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));pointer-events:auto}
.osheet{max-width:560px;text-align:center;position:relative;background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(29,42,68,.05) 27px 28px)}
.ohead{margin-bottom:6px}
.osub{font-weight:700;letter-spacing:.3em;font-size:12px;color:var(--teal)}
.onote{font-size:16px;letter-spacing:.03em;line-height:1.3;margin:10px auto;max-width:440px}
.onote.big{font-family:'Alfa Slab One';font-size:20px;color:var(--red);transform:rotate(-2deg)}
.onote.small{font-size:13px;opacity:.75;margin-top:4px}
.otoast{background:var(--ink);color:var(--paper);border-radius:6px;padding:6px 10px;font-weight:700;letter-spacing:.06em}
.ocol{flex-direction:column}
.ocol .stampBtn{min-width:min(300px,80vw)}
.otags{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px}
.otag{position:relative;width:min(190px,40vw);padding:10px 10px 10px 26px;background:var(--shade);border:2px dashed rgba(29,42,68,.45);border-radius:6px 16px 16px 6px;text-align:left;transform:rotate(-2deg);display:flex;flex-direction:column}
.otag:nth-child(2){transform:rotate(2deg)}
.otag .hole{position:absolute;left:8px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;border:2px solid var(--ink);background:var(--paper)}
.otag small{font-weight:700;letter-spacing:.22em;font-size:11px;color:var(--teal)}
.otag b{font-family:'Alfa Slab One';font-weight:400;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.otag em{font-style:normal;font-weight:700;letter-spacing:.18em;font-size:11px;opacity:.6}
.otag.in{background:var(--paper);border:2px solid var(--ink)}
.otag.in em{color:var(--red);opacity:1}
.otag.me{box-shadow:0 0 0 3px var(--red)}
.olink{display:flex;gap:6px;max-width:440px;margin:8px auto}
.olink input{flex:1;min-width:0;font:600 14px 'Barlow Condensed',sans-serif;letter-spacing:.04em;padding:8px 10px;border:2px solid var(--ink);border-radius:6px;background:#fff8e8;color:var(--ink)}
.opick{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:10px 0 2px;font-weight:700;letter-spacing:.18em;font-size:12px}
.opick b{font-family:'Alfa Slab One';font-weight:400;letter-spacing:.04em;font-size:15px;color:var(--red);margin-left:4px}
#netNote{position:absolute;left:50%;top:calc(max(10px,env(safe-area-inset-top)) + 64px);transform:translateX(-50%) rotate(-1.5deg);background:var(--paper);border:3px solid var(--red);color:var(--red);font-family:'Alfa Slab One';font-size:clamp(13px,2.6vw,18px);letter-spacing:.04em;padding:5px 14px;border-radius:8px;opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}
#netNote.on{opacity:1}
body.net #pauseBtn{display:none}
#nextBtn.pulse{animation:opulse 1s ease-in-out infinite}
#nextBtn:disabled{opacity:.7}
@keyframes opulse{50%{transform:rotate(-2deg) scale(1.06)}}
@media (max-height:500px) and (min-aspect-ratio:1/1){.osheet{padding:10px 16px}.osheet .ptitle{font-size:24px}.onote{font-size:14px;margin:6px auto}.otag{padding:6px 8px 6px 24px}.opick{margin-top:4px}}
@media (max-height:500px) and (min-aspect-ratio:1/1){#menu .menuBtns{gap:8px;flex-wrap:nowrap}#menu .menuBtns .stampBtn{font-size:16px;padding:7px 12px;min-height:44px}#menu .menuBtns .stampBtn .k{display:none}#menu .menuBtns .chip{padding:8px 10px;letter-spacing:.12em}}