/* ===== Themes ===== */
:root,[data-theme=a]{ /* Sunny Arcade */
  --bg:#fff4dc;--bg2:#ffe3a3;--bg3:#ffd0b0;--paper:#fffdf6;--ink:#3b2314;
  --primary:#ff5a3c;--primary-ink:#fff;--alt:#18b5a5;--alt-ink:#fff;--accent:#ffc93c;--hl:#ff5a3c;--soft:#fff0c8;
  --deco1:#ff9f1c;--deco2:#18b5a5;--deco3:#ff5a3c;
  --bw:3px;--sh:5px;--r:22px;--font:"Baloo 2","Trebuchet MS","Avenir Next",system-ui,sans-serif;--head:var(--font);
  --pattern:radial-gradient(circle at 50% -10%,#fff8c9 0,transparent 55%);
}
[data-theme=b]{ /* Fresh Mint */
  --bg:#f5fbf8;--bg2:#dff7ee;--bg3:#e4f6f8;--paper:#ffffff;--ink:#16343b;
  --primary:#ff6f61;--primary-ink:#fff;--alt:#22b8b0;--alt-ink:#fff;--accent:#b9f3dc;--hl:#ff6f61;--soft:#eefaf5;
  --deco1:#9ee8cf;--deco2:#ffb3aa;--deco3:#8fdbe6;
  --bw:2px;--sh:3px;--r:20px;--font:"Avenir Next","Segoe UI","Helvetica Neue",system-ui,sans-serif;--head:var(--font);
  --pattern:none;
}
[data-theme=c]{ /* Comic Pop */
  --bg:#ffe14d;--bg2:#ffe14d;--bg3:#ffd400;--paper:#fff;--ink:#000;
  --primary:#e8202a;--primary-ink:#fff;--alt:#1e6bff;--alt-ink:#fff;--accent:#ffd600;--hl:#e8202a;--soft:#fff6b8;
  --deco1:#e8202a;--deco2:#1e6bff;--deco3:#fff;
  --bw:4px;--sh:7px;--r:10px;--font:"Comic Sans MS","Chalkboard SE","Comic Neue",system-ui,sans-serif;--head:Impact,"Arial Black","Haettenschweiler",sans-serif;
  --pattern:radial-gradient(rgba(232,32,42,.32) 22%,transparent 24%) 0 0/14px 14px;
}
/* ===== Base ===== */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;overflow-x:hidden}
body{font-family:var(--font);color:var(--ink);background:var(--pattern),linear-gradient(170deg,var(--bg) 0%,var(--bg2) 60%,var(--bg3) 100%);background-attachment:fixed;padding:10px 12px 40px;-webkit-tap-highlight-color:transparent}
.bg-deco{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.bg-deco span{position:absolute;border-radius:50%;opacity:.35;animation:float 9s ease-in-out infinite}
.bg-deco span:nth-child(1){width:220px;height:220px;background:var(--deco1);left:-80px;top:45%}
.bg-deco span:nth-child(2){width:150px;height:150px;background:var(--deco2);right:-50px;top:10%;animation-delay:-3s}
.bg-deco span:nth-child(3){width:110px;height:110px;background:var(--deco3);right:18%;bottom:-40px;animation-delay:-6s}
[data-theme=c] .bg-deco span{opacity:.0}
[data-theme=c] .bg-deco::before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg at 50% 30%,rgba(255,255,255,.35) 0 6deg,transparent 6deg 18deg)}
@keyframes float{50%{transform:translateY(-30px) scale(1.08)}}
.top{display:flex;align-items:center;justify-content:center;position:relative;max-width:640px;margin:4px auto 12px}
.logo{display:inline-flex;align-items:center;text-decoration:none;font-family:var(--head);font-weight:900;font-size:clamp(38px,10vw,58px);letter-spacing:-1px;transform:rotate(-3deg)}
.logo-silly,.logo-fight{-webkit-text-stroke:var(--bw) var(--ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--ink)}
.logo-silly{color:var(--accent)}.logo-fight{color:var(--primary)}
[data-theme=b] .logo-silly{color:var(--alt)}
[data-theme=c] .logo{letter-spacing:1px;transform:rotate(-4deg) skewX(-6deg)}
.logo-emoji{display:inline-block;margin-left:6px;animation:wiggle 1.6s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(14deg) scale(1.1)}}
.icon-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:22px;width:44px;height:44px;border-radius:50%;border:var(--bw) solid var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--ink);cursor:pointer;padding:0}
.card{max-width:640px;margin:0 auto 14px;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh) var(--sh) 0 var(--ink);padding:18px 16px 20px;animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
[data-theme=b] .card{box-shadow:0 10px 30px rgba(22,52,59,.12),var(--sh) var(--sh) 0 var(--ink)}
@keyframes pop{from{transform:scale(.88);opacity:0}}
.title{font-family:var(--head);font-size:clamp(23px,6vw,31px);line-height:1.12;margin:0 0 6px;text-align:center}
[data-theme=c] .title,[data-theme=c] .winner{letter-spacing:.5px;font-weight:400;text-transform:uppercase}
.sub{text-align:center;margin:0 0 12px;font-size:16px}
.hl{color:var(--hl)}
.field{display:block;margin:14px 0}
.field>span{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;margin-bottom:6px;font-size:16px}
.field em{font-weight:600;opacity:.6;font-style:normal}
input{width:100%;font:inherit;font-size:18px;padding:11px 14px;border:var(--bw) solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);outline:none}
input:focus{box-shadow:0 0 0 4px var(--alt)}
.link-btn{background:none;border:0;font:inherit;font-weight:800;color:var(--hl);cursor:pointer;font-size:14px;padding:2px 4px}
/* mode toggle */
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 4px}
.mode{font:inherit;font-weight:900;font-size:17px;border:var(--bw) solid var(--ink);border-radius:14px;padding:8px;background:#fff;color:var(--ink);cursor:pointer;line-height:1.1}
.mode small{display:block;font-weight:600;font-size:12px;opacity:.7}
.mode[aria-checked=true]{background:var(--accent);box-shadow:3px 3px 0 var(--ink);transform:translateY(-2px)}
/* fighters */
.fighters{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.fighters::-webkit-scrollbar{display:none}
.fighter-opt{flex:0 0 84px;scroll-snap-align:start;font:inherit;border:var(--bw) solid var(--ink);border-radius:16px;background:#fff;color:var(--ink);cursor:pointer;padding:6px 4px;text-align:center}
.fighter-opt .e{font-size:38px;display:block;line-height:1.15}
.fighter-opt .n{font-size:11.5px;font-weight:800;display:block;line-height:1.1}
.fighter-opt[aria-checked=true]{background:var(--accent);box-shadow:3px 3px 0 var(--ink);transform:translateY(-2px) rotate(-2deg)}
.fighter-opt[aria-checked=true] .e{animation:wiggle 1s ease-in-out infinite}
.bio{margin:2px 0 0;font-size:14px;min-height:1.3em;text-align:center;font-style:italic}
/* move picker */
.slots{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.slot{font:inherit;width:72px;height:72px;border:var(--bw) dashed var(--ink);border-radius:16px;background:var(--soft);cursor:pointer;position:relative;font-size:34px;color:var(--ink);padding:0}
.slot small{position:absolute;top:2px;left:6px;font-size:11px;font-weight:800}
.slot.filled{border-style:solid;background:#fff}
.slot.active{box-shadow:0 0 0 4px var(--alt);transform:translateY(-2px)}
.moves{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media (min-width:560px){.moves{grid-template-columns:repeat(4,1fr)}}
.move{font:inherit;cursor:pointer;border:var(--bw) solid var(--ink);border-radius:16px;background:#fff;padding:8px 6px 7px;text-align:center;box-shadow:3px 3px 0 var(--ink);transition:transform .12s;color:var(--ink);position:relative}
.move:active{transform:scale(.96)}
.move .e{font-size:34px;display:block;line-height:1.1}
.move .n{font-weight:800;font-size:15px;display:block}
.move .d{font-size:12px;opacity:.7;display:block;line-height:1.2}
.move.sel{background:var(--accent);transform:translateY(-2px) rotate(-1.5deg)}
.move .tag{position:absolute;top:-8px;right:-6px;background:var(--primary);color:var(--primary-ink);border:2px solid var(--ink);border-radius:999px;font-size:11px;font-weight:900;padding:1px 6px}
/* buttons */
.btn{font:inherit;font-weight:900;font-size:17px;cursor:pointer;border:var(--bw) solid var(--ink);border-radius:999px;padding:11px 18px;background:var(--accent);color:var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .1s,box-shadow .1s;text-decoration:none;display:inline-block;text-align:center}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.big{display:block;width:100%;font-family:var(--head);font-size:23px;padding:13px;background:var(--primary);color:var(--primary-ink);margin-top:8px;text-shadow:2px 2px 0 rgba(0,0,0,.25)}
[data-theme=c] .btn.big{font-weight:400;letter-spacing:1px;text-transform:uppercase}
.btn.alt{background:var(--alt);color:var(--alt-ink)}
.btn.ghost{background:#fff;display:block;margin:16px auto 0}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.row .btn{flex:1 1 170px}
.linkbox{display:flex;gap:8px}
.linkbox input{min-width:0;flex:1;font-size:13px;font-family:ui-monospace,monospace}
.sharebox .row{margin-top:10px}
.hint{text-align:center;font-size:14px;opacity:.75;margin:14px 0 0}
.err{background:#ffe1dc;border:2px dashed var(--primary);border-radius:12px;padding:8px 12px;font-weight:800;margin:8px 0}
.taunt{margin:12px auto;max-width:92%;background:var(--soft);border:var(--bw) solid var(--ink);border-radius:18px;padding:12px 16px;font-size:19px;font-weight:800;position:relative;text-align:center;transform:rotate(-1.5deg)}
.taunt::before{content:"💬";position:absolute;left:-14px;top:-16px;font-size:28px}
.challenger-intro{text-align:center}
.big-fighter{font-size:72px;line-height:1;display:inline-block}
.bob{animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(4deg)}}
.mode-badge{display:inline-block;background:var(--alt);color:var(--alt-ink);border:2px solid var(--ink);border-radius:999px;padding:3px 12px;font-weight:900;font-size:14px;margin-top:4px}
.vs-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:8px}
.vs{font-family:var(--head);font-size:30px;font-weight:900;color:var(--primary);-webkit-text-stroke:1px var(--ink)}
.rules{margin-top:16px;font-size:14px}
.rules summary{cursor:pointer;font-weight:800;text-align:center}
.rules table{width:100%;border-collapse:collapse;margin-top:8px}
.rules td{padding:5px 4px;border-bottom:1px dashed rgba(0,0,0,.15);vertical-align:top}
.rules td:first-child{font-weight:800;white-space:nowrap}
/* stats */
.stats-card{padding:12px 14px}
.stats-top{display:flex;align-items:center;gap:12px}
.stats-top .me{font-size:44px;line-height:1}
.stats-top .t{flex:1;min-width:0}
.stats-top .rank{font-family:var(--head);font-weight:900;font-size:19px;color:var(--hl);line-height:1.1}
.stats-top .rec{font-size:14px;font-weight:700}
.streak{background:var(--accent);border:2px solid var(--ink);border-radius:12px;padding:4px 8px;font-weight:900;text-align:center;font-size:13px;line-height:1.1}
.streak b{display:block;font-size:20px}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.badge{font-size:12px;font-weight:800;border:2px solid var(--ink);border-radius:999px;padding:2px 8px;background:var(--soft)}
.badge.locked{opacity:.4;filter:grayscale(1);border-style:dashed;background:transparent}
.stats-card details summary{cursor:pointer;font-weight:800;font-size:13px;margin-top:8px}
/* ===== Battle ===== */
.scorebar{display:flex;align-items:center;justify-content:space-between;gap:6px;background:var(--soft);border:var(--bw) solid var(--ink);border-radius:16px;padding:6px 10px}
.sb-side{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-weight:800;font-size:13px}
.sb-side span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-side.r{justify-content:flex-end}
.sb-side b{font-family:var(--head);font-size:30px;line-height:1;color:var(--hl);display:inline-block}
.sb-side b.bump{animation:bump .5s cubic-bezier(.2,2,.4,1)}
@keyframes bump{50%{transform:scale(1.8)}}
.sb-mid{text-align:center;font-weight:900;font-size:13px}
.dots{display:flex;gap:4px;justify-content:center;margin-top:3px}
.dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:#fff}
.dots i.c{background:var(--primary)}.dots i.f{background:var(--alt)}.dots i.t{background:var(--accent)}.dots i.now{animation:bump .8s infinite}
.arena{position:relative;display:flex;align-items:flex-end;justify-content:space-between;min-height:250px;padding:76px 4px 10px;overflow:hidden;margin-top:8px;border-radius:16px;background:linear-gradient(transparent 70%,var(--soft) 70%)}
.fighter{flex:0 0 42%;text-align:center;position:relative;transition:transform .4s}
.f-body{font-size:clamp(70px,22vw,104px);line-height:1;display:inline-block;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.18));animation:bob 1.3s ease-in-out infinite}
.right .f-body{transform:scaleX(-1);animation-name:bobR}
@keyframes bobR{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-1) translateY(-8px) rotate(-4deg)}}
.f-name{font-weight:900;font-size:15px;margin-top:2px;word-break:break-word;line-height:1.1}
.bubble{position:absolute;top:-66px;left:50%;transform:translateX(-50%);font-size:34px;background:#fff;border:var(--bw) solid var(--ink);border-radius:50%;width:58px;height:58px;display:flex;align-items:center;justify-content:center}
.bubble.reveal{animation:revealB .5s cubic-bezier(.2,2,.4,1)}
@keyframes revealB{0%{transform:translateX(-50%) scale(0) rotate(-90deg)}100%{transform:translateX(-50%) scale(1)}}
.fighter.charge-l{transform:translateX(18%)}.fighter.charge-r{transform:translateX(-18%)}
.clash{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(0);font-size:64px;pointer-events:none;z-index:3}
.clash.on{animation:boom .7s cubic-bezier(.2,1.8,.4,1) forwards}
@keyframes boom{0%{transform:translate(-50%,-50%) scale(0)}40%{transform:translate(-50%,-50%) scale(1.7) rotate(20deg)}100%{transform:translate(-50%,-50%) scale(0) rotate(40deg);opacity:0}}
.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:4;font-family:var(--head);font-size:64px;font-weight:900;color:var(--accent);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.countdown span{animation:cd .5s cubic-bezier(.2,1.8,.4,1)}
@keyframes cd{0%{transform:scale(3);opacity:0}100%{transform:scale(1)}}
.shake-fighters .f-body{animation:shake .22s linear infinite}
@keyframes shake{0%,100%{transform:scaleX(var(--fl,1))}25%{transform:scaleX(var(--fl,1)) translate(-4px,2px) rotate(-6deg)}75%{transform:scaleX(var(--fl,1)) translate(4px,-2px) rotate(6deg)}}
.screen-shake{animation:sshake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes sshake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(5px,-3px)}30%,50%,70%{transform:translate(-9px,4px) rotate(-1deg)}40%,60%{transform:translate(9px,-4px) rotate(1deg)}}
/* loser reactions (applied to .f-body wrapper .fighter) */
.fighter .f-body.react{animation:none}
.r-bonk{animation:rBonk .7s ease-out!important}
@keyframes rBonk{0%{transform:scaleX(var(--fl,1))}30%{transform:scaleX(var(--fl,1)) scaleY(.55) translateY(30%)}60%{transform:scaleX(var(--fl,1)) scaleY(1.1)}100%{transform:scaleX(var(--fl,1)) rotate(8deg)}}
.r-knock{animation:rKnock .8s ease-out!important}
@keyframes rKnock{30%{transform:scaleX(var(--fl,1)) translateX(calc(var(--away)*40px)) rotate(calc(var(--away)*35deg))}100%{transform:scaleX(var(--fl,1)) rotate(calc(var(--away)*10deg))}}
.r-slip{animation:rSlip 1s cubic-bezier(.3,.6,.5,1) forwards!important}
@keyframes rSlip{0%{transform:scaleX(var(--fl,1))}35%{transform:scaleX(var(--fl,1)) translateY(-60px) rotate(calc(var(--away)*200deg))}70%{transform:scaleX(var(--fl,1)) translateY(10px) rotate(calc(var(--away)*270deg))}100%{transform:scaleX(var(--fl,1)) translateY(18px) rotate(calc(var(--away)*270deg))}}
.r-giggle{animation:rGiggle .12s linear 8!important}
@keyframes rGiggle{50%{transform:scaleX(var(--fl,1)) translateY(-6px) rotate(5deg)}}
.r-ears{animation:rEars .1s linear 10!important}
@keyframes rEars{50%{transform:scaleX(var(--fl,1)) translateX(5px) scale(.92)}}
.r-wiggle{animation:rWiggle 1s ease-in-out!important}
@keyframes rWiggle{20%{transform:scaleX(var(--fl,1)) skewX(25deg)}40%{transform:scaleX(var(--fl,1)) skewX(-25deg) scaleY(.85)}60%{transform:scaleX(var(--fl,1)) skewX(18deg)}80%{transform:scaleX(var(--fl,1)) skewX(-10deg)}}
.r-dizzy{animation:rDizzy 1.1s ease-in-out!important}
@keyframes rDizzy{100%{transform:scaleX(var(--fl,1)) rotate(720deg) scale(.8)}}
.r-spin{animation:rSpin .9s ease-in-out!important}
@keyframes rSpin{50%{transform:scaleX(var(--fl,1)) rotate(-360deg) translateY(-30px) scale(1.15)}100%{transform:scaleX(var(--fl,1)) rotate(-720deg)}}
.r-tie{animation:shake .3s linear 4!important}
.fighter.win .f-body{animation:winner .9s ease-in-out infinite!important}
@keyframes winner{50%{transform:scaleX(var(--fl,1)) translateY(-16px) scale(1.12) rotate(-8deg)}}
.fighter.lose{filter:grayscale(.6);opacity:.75}
.right{--fl:-1;--away:1}.left{--fl:1;--away:-1}
/* particles */
.fx{position:absolute;inset:0;pointer-events:none;z-index:2}
.p{position:absolute;font-style:normal;font-size:30px;left:0;top:0;will-change:transform}
.p-fly{animation:pFly .45s cubic-bezier(.4,0,.8,.6) forwards}
@keyframes pFly{from{transform:translate(var(--x0),var(--y0)) rotate(0)}to{transform:translate(var(--x1),var(--y1)) rotate(var(--rot,540deg))}}
.p-drop{animation:pDrop .45s cubic-bezier(.6,0,1,.6) forwards}
@keyframes pDrop{from{transform:translate(var(--x1),calc(var(--y1) - 140px)) rotate(-120deg) scale(1.4)}to{transform:translate(var(--x1),var(--y1)) rotate(20deg) scale(1.4)}}
.p-burst{animation:pBurst 1.1s ease-out forwards}
@keyframes pBurst{from{transform:translate(var(--x1),var(--y1)) scale(.4);opacity:1}to{transform:translate(calc(var(--x1) + var(--dx)),calc(var(--y1) + var(--dy))) rotate(var(--rot,180deg)) scale(1);opacity:0}}
.p-float{animation:pFloat 1.3s ease-out forwards}
@keyframes pFloat{from{transform:translate(var(--x0),var(--y0)) scale(.6);opacity:0}20%{opacity:1}to{transform:translate(var(--x1),calc(var(--y1) - 40px)) rotate(var(--rot,30deg)) scale(1.2);opacity:0}}
.p-slide{animation:pSlide .7s ease-out forwards}
@keyframes pSlide{from{transform:translate(var(--x0),var(--y1)) rotate(0)}to{transform:translate(calc(var(--x1) + var(--away)*60px),calc(var(--y1) + 30px)) rotate(720deg);opacity:.0}}
.p-text{font-family:var(--head);font-weight:900;font-size:22px;color:var(--primary);-webkit-text-stroke:1px var(--ink)}
.splat{position:absolute;width:96px;height:80px;left:0;top:0;transform:translate(var(--x1),var(--y1)) scale(0);background:radial-gradient(circle at 30% 35%,#fff 0 30%,transparent 31%),radial-gradient(circle at 68% 40%,#fff 0 26%,transparent 27%),radial-gradient(circle at 50% 70%,#fffbe8 0 32%,transparent 33%),radial-gradient(circle at 20% 70%,#fff 0 14%,transparent 15%),radial-gradient(circle at 82% 72%,#fff 0 13%,transparent 14%);filter:drop-shadow(2px 2px 0 rgba(0,0,0,.35));animation:splat 2s ease-out forwards;margin:-40px 0 0 -48px}
@keyframes splat{0%{transform:translate(var(--x1),var(--y1)) scale(0)}12%{transform:translate(var(--x1),var(--y1)) scale(1.25)}20%{transform:translate(var(--x1),var(--y1)) scale(1)}80%{opacity:1;transform:translate(var(--x1),calc(var(--y1) + 12px)) scale(1,1.1)}100%{opacity:0;transform:translate(var(--x1),calc(var(--y1) + 24px)) scale(1,1.2)}}
/* log & final */
.log{list-style:none;padding:0;margin:10px 0 0}
.log li{background:var(--soft);border:2px dashed var(--ink);border-radius:14px;padding:8px 12px;margin-top:8px;font-size:15px;animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
.log li b{font-family:var(--head)}
.skip{display:block;margin:8px auto 0}
.final{text-align:center;animation:pop .45s cubic-bezier(.2,1.6,.4,1);margin-top:10px}
.champ{font-size:80px;line-height:1;display:inline-block}
.winner{font-family:var(--head);font-size:clamp(25px,7vw,38px);margin:4px 0 4px;line-height:1.1;color:var(--hl);-webkit-text-stroke:.5px var(--ink)}
.you{font-weight:900;font-size:18px;margin:0 0 8px}
.pbp{font-size:17px;background:#fff;border:var(--bw) solid var(--ink);border-radius:16px;padding:11px 13px;margin:0 0 8px}
.unlocks:empty{display:none}
.unlocks{background:var(--accent);border:var(--bw) solid var(--ink);border-radius:16px;padding:8px;font-weight:900;margin-bottom:8px;animation:bump .7s}
.send-card{background:var(--soft);border:var(--bw) solid var(--ink);border-radius:16px;padding:10px;margin:6px 0 4px}
.send-card .btn.big{margin-top:0}
.send-card .linkbox{margin-top:8px}
.final .row .btn{flex:1 1 100%}
.sb-mid{max-width:34%}
/* confetti, toast, footer */
#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
#confetti i{position:absolute;top:-40px;font-style:normal;font-size:26px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-weight:800;transition:transform .3s,visibility .3s;z-index:60;visibility:hidden;max-width:90vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0);visibility:visible}
.foot{text-align:center;margin-top:18px;font-size:13px;opacity:.75;font-weight:700}
.theme-dot{background:none;border:0;cursor:pointer;font-size:12px;opacity:.35;padding:2px}
@media (max-width:380px){.card{padding:14px 11px 16px}.slot{width:64px;height:64px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}