:root{--bg:#15171c;--pan:#1e2128;--ink:#f3efe2;--dim:#8d8f99;--y:#ffd45e;--r:#ff6b6b;--b:#4cc9f0;--g:#7ee081;font-family:'Gaegu','Comic Sans MS',cursive}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg) radial-gradient(#ffffff10 1.2px,transparent 1.7px) 0 0/24px 24px;color:var(--ink);font-size:19px;overflow:hidden;user-select:none;-webkit-user-select:none}
[hidden]{display:none!important}
.defs{position:absolute}
h1,h2,.hand{font-family:'Caveat Brush','Gaegu',cursive;font-weight:400;letter-spacing:.5px}
img{pointer-events:none}

/* sketchy borders: drawn on a pseudo element so text stays crisp */
.sk{position:relative;background:var(--pan)}
.sk::before{content:"";position:absolute;inset:-2px;border:3px solid var(--ink);border-radius:14px 10px 16px 9px;filter:url(#wob);pointer-events:none;opacity:.85}

.btn{font:inherit;font-weight:700;font-size:1.1em;color:#14161b;background:var(--y);border:3px solid var(--ink);border-radius:12px 8px 13px 9px;padding:5px 16px;cursor:pointer;box-shadow:3px 4px 0 #000b;transform:rotate(-1deg);transition:transform .08s,box-shadow .08s}
.btn:hover:not(:disabled){transform:rotate(1deg) translateY(-2px)}
.btn:active:not(:disabled){transform:translate(3px,4px);box-shadow:0 0 0 #000}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.b{background:var(--b)}
.btn.s{background:#2a2e38;color:var(--ink);font-size:1em;padding:3px 12px}
.btn.on{background:var(--g);color:#14161b}
input{font:inherit;font-weight:700;font-size:1.1em;color:var(--ink);background:#14161b;border:3px solid var(--dim);border-radius:9px 12px 8px 12px;padding:5px 10px;outline:none;width:100%}
input:focus{border-color:var(--y)}
.err{color:var(--r);min-height:1.2em}
.tiny{color:var(--dim);font-size:.85em;text-align:center;max-width:420px}

.screen{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px}
#menu h1{font-size:clamp(46px,9vw,92px);line-height:.95;text-align:center;transform:rotate(-2deg)}
.hl{color:var(--y);background:linear-gradient(transparent 82%,var(--r) 82%,var(--r) 92%,transparent 92%)}
.sub{color:var(--dim);transform:rotate(-1deg)}
.menu-card{width:min(360px,92vw);padding:22px;display:flex;flex-direction:column;gap:12px;transform:rotate(.8deg)}
.menu-card label{display:flex;flex-direction:column;gap:4px}
.menu-card .or{text-align:center;color:var(--dim)}
.row{display:flex;gap:10px}
.row input{text-transform:uppercase;letter-spacing:4px;text-align:center}

#lobby h2{font-size:56px;transform:rotate(1deg)}
.codebox{padding:14px 26px;display:flex;flex-direction:column;align-items:center;gap:6px}
.codebox small{color:var(--dim)}
.codebox b{font-family:'Caveat Brush';font-weight:400;font-size:64px;letter-spacing:10px;color:var(--y);padding-left:10px}
#lplayers{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));gap:10px 18px;width:min(460px,92vw)}
#lplayers li{padding:6px 12px;border:3px dashed var(--dim);border-radius:10px;display:flex;justify-content:space-between;align-items:center}
#lplayers li:nth-child(odd){transform:rotate(-1.2deg)}#lplayers li:nth-child(even){transform:rotate(1deg)}
#lplayers li.me{border-color:var(--b)}

/* game layout */
#game{display:grid;grid-template-columns:190px minmax(0,1fr) 262px;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"hud hud hud" "pl arena side" "bench bench bench";gap:12px;padding:12px;align-items:stretch;justify-content:stretch}
#hud{grid-area:hud;display:flex;align-items:center;gap:18px;padding:6px 16px}
#hud .logo{color:var(--y);font-size:30px;transform:rotate(-4deg)}
#phase{font-size:28px;flex:1}
#timer{font-size:38px;min-width:64px;text-align:center;color:var(--y)}
#speed{font-size:26px;color:var(--r);animation:pulse .5s infinite alternate}
@keyframes pulse{to{transform:scale(1.2) rotate(-4deg)}}
#players{grid-area:pl;display:flex;flex-direction:column;gap:8px;overflow:auto;padding:4px}
.pl{padding:5px 9px;border:3px solid #3a3f4b;border-radius:10px 7px 11px 8px;position:relative}
.pl.me{border-color:var(--b)}.pl.foe{border-color:var(--r);transform:rotate(-1deg)}
.pl.team-color{border-color:var(--team-color)!important}
.pl.dead{opacity:.4;text-decoration:line-through}
.pl .top{display:flex;justify-content:space-between;gap:6px}
.pl .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{height:11px;border:2px solid var(--ink);border-radius:6px 4px 7px 5px;margin-top:3px;position:relative;overflow:hidden;background:#101216}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--g);transition:width .5s}
.bar.lowhp i{background:var(--r)}
.tick{color:var(--g)}
#arena{grid-area:arena;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}
#cv{display:block;border-radius:6px;touch-action:none;cursor:pointer}
#banner{position:absolute;left:0;right:0;top:42%;text-align:center;font-size:clamp(28px,4vw,48px);color:var(--y);pointer-events:none;opacity:0;text-shadow:3px 3px 0 #000}
#banner.go{animation:ban 1.5s ease-out}
@keyframes ban{0%{opacity:0;transform:scale(2.4) rotate(-7deg)}15%{opacity:1;transform:scale(1) rotate(-3deg)}75%{opacity:1}100%{opacity:0;transform:scale(.9) translateY(-20px) rotate(-3deg)}}

#side{grid-area:side;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;padding:4px}
#eco{padding:8px 12px;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
#eco .gold{font-size:1.6em;color:var(--y);font-family:'Caveat Brush'}
#eco .xp{grid-column:1/-1}
#troop-info{position:fixed;display:none;flex-direction:column;gap:8px;width:min(250px,calc(100vw - 24px));padding:10px;z-index:8;pointer-events:auto;box-shadow:5px 6px 0 #0009}
.info-head{display:flex;align-items:center;gap:9px}
.info-head img{width:54px;height:54px;object-fit:contain}
.info-head div{display:flex;flex-direction:column;line-height:1}
.info-head b{font-size:1.25em}
.info-head small,.info-ability small{color:var(--dim)}
.info-head small{color:var(--y)}
.info-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;font-size:.88em}
.info-stats span{display:flex;justify-content:space-between;gap:4px}
.info-stats b{color:var(--y)}
.info-ability{display:flex;flex-direction:column;line-height:1.1}
.info-ability small{font-size:.85em}
#shop{display:flex;flex-direction:column;gap:7px}
.shopc{font:inherit;color:var(--ink);background:var(--pan);border:3px solid #4a4f5c;border-radius:11px 8px 12px 9px;padding:3px 8px;display:grid;grid-template-columns:50px 1fr auto;grid-template-areas:"i n c" "i d d";align-items:center;column-gap:8px;cursor:pointer;text-align:left;min-height:62px;transition:transform .1s,border-color .1s}
.shopc img{grid-area:i;width:50px;height:50px;object-fit:contain}
.shopc b{grid-area:n;font-size:1.05em}
.shopc small{grid-area:d;color:var(--dim);line-height:1.05;font-size:.78em}
.coin{grid-area:c;font-style:normal;font-weight:700;color:#14161b;background:var(--y);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;border:2px solid var(--ink);transform:rotate(-8deg)}
.shopc:hover:not(:disabled){border-color:var(--y);transform:rotate(-1deg) translateX(-3px)}
.shopc:disabled{opacity:.45;cursor:not-allowed}
.shopc.empty{opacity:.25;border-style:dashed;justify-content:center;display:grid;place-items:center;grid-template-columns:1fr}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btns #ready{grid-column:1/-1}

#bench{grid-area:bench;display:flex;justify-content:center;gap:8px;padding:6px}
.slot{width:74px;height:74px;border:3px dashed #4a4f5c;border-radius:10px 12px 9px 13px;background:#1a1d23;display:grid;place-items:center;position:relative;cursor:pointer;padding:0;color:var(--ink);font:inherit}
.slot img{width:62px;height:62px;object-fit:contain}
.slot.has{border-style:solid;border-color:#6c7280}
.slot.sel{border-color:var(--y);transform:translateY(-8px) rotate(-3deg);box-shadow:0 8px 0 #0008}
.slot .st{position:absolute;bottom:0;left:0;right:0;text-align:center;color:var(--y);font-size:.8em;line-height:1;text-shadow:1px 1px 0 #000}
.slot.pop{animation:popin .6s}
@keyframes popin{0%{transform:scale(.4) rotate(20deg)}50%{transform:scale(1.4);box-shadow:0 0 30px var(--y)}100%{transform:none}}
.slot:hover{border-color:var(--b)}

/* overlays */
#ov{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:9}
#ov>*{pointer-events:auto}
.cd{font-size:min(40vw,320px);color:var(--y);text-shadow:6px 6px 0 #000;animation:cd 1s infinite}
@keyframes cd{0%{transform:scale(2.2) rotate(-10deg);opacity:0}25%{transform:scale(1) rotate(-4deg);opacity:1}100%{transform:scale(.85) rotate(-4deg);opacity:.2}}
.re{position:relative;width:min(560px,94vw);padding:22px;text-align:center;background:#14161bee;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:8px}
.re.win{outline:4px dashed var(--g)}.re.lose{outline:4px dashed var(--r);animation:shk .5s .45s}
.re .big{font-size:clamp(54px,12vw,110px);line-height:1}
.re.win .big{color:var(--g);animation:slam .5s both}
.re.lose .big{color:var(--r)}
.slam{animation:slam .45s .3s both}
@keyframes slam{0%{transform:scale(6) rotate(12deg);opacity:0}70%{transform:scale(.9) rotate(-4deg);opacity:1}100%{transform:scale(1) rotate(-3deg);opacity:1}}
@keyframes shk{0%,100%{transform:translate(0)}20%{transform:translate(-14px,8px)}40%{transform:translate(12px,-10px)}60%{transform:translate(-9px,-4px)}80%{transform:translate(6px,6px)}}
.flash{position:fixed;inset:0;background:var(--r);opacity:0;animation:fl .7s .4s;pointer-events:none}
@keyframes fl{0%{opacity:.75}100%{opacity:0}}
.crack{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.crack path{fill:none;stroke:var(--ink);stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;animation:draw .35s .4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hpbig{width:80%;height:22px;border:3px solid var(--ink);border-radius:10px;position:relative;overflow:hidden;background:#101216}
.hpbig i{position:absolute;left:0;top:0;bottom:0;transition:width .9s cubic-bezier(.6,0,.3,1)}
.hpbig .gh{background:#fff;transition-delay:.25s}.hpbig .fl{background:var(--r)}
.re ul{list-style:none;padding:0;color:var(--dim);font-size:.9em}
.re .gold{color:var(--y)}
.conf{position:fixed;top:-20px;width:10px;height:16px;animation:fall linear forwards;pointer-events:none}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
body.shake #game{animation:shk .5s}
.over{width:min(480px,94vw);padding:24px;text-align:center;background:#14161bf2;border-radius:16px;outline:4px dashed var(--y);display:flex;flex-direction:column;gap:10px;align-items:center}
.over h2{font-size:58px;color:var(--y)}
.over ol{text-align:left;padding-left:30px}
.podium-card{position:relative;width:min(680px,94vw);max-height:88vh;overflow-y:auto;padding:18px 22px 22px;text-align:center;background:radial-gradient(ellipse at 50% 32%,#51431f 0,#22231f 36%,#14161b 78%);outline:4px solid var(--y);box-shadow:0 0 55px #ffd45e55;animation:podium-arrive .8s cubic-bezier(.16,1,.3,1) both}
.podium-light{position:absolute;inset:-55% 15% 15%;background:conic-gradient(from 0deg at 50% 50%,transparent 0 8%,#fff5b014 9% 12%,transparent 13% 25%,#fff5b014 26% 29%,transparent 30% 42%,#fff5b014 43% 46%,transparent 47% 60%,#fff5b014 61% 64%,transparent 65%);animation:podium-spin 24s linear infinite;pointer-events:none}
.podium-cup{position:relative;width:94px;height:94px;filter:drop-shadow(0 0 17px #ffd45e99);animation:trophy-bob 1.8s ease-in-out infinite}
.podium-title{position:relative;color:var(--y);font-size:clamp(38px,7vw,68px);line-height:.95;text-shadow:0 4px #8c4f16,0 0 22px #ffd45e66;animation:title-shine 1.4s ease-in-out .2s both}
.podium-subtitle{position:relative;color:var(--ink);font-size:1.15em}
.podium-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:8px;margin:12px auto 0;width:min(500px,100%);min-height:220px}
.podium-place{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:31%;animation:podium-rise .75s cubic-bezier(.16,1,.3,1) both}
.place-1{order:2;animation-delay:.24s}.place-2{order:1;animation-delay:.08s}.place-3{order:3;animation-delay:.4s}
.podium-person{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:108px;max-width:100%;text-shadow:2px 2px #000}
.podium-person img{width:75px;height:75px;object-fit:contain;filter:drop-shadow(0 0 8px #fff8)}
.place-1 .podium-person img{width:104px;height:104px;filter:drop-shadow(0 0 14px #ffd45e)}
.podium-person b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:1.1em}
.podium-person small{color:var(--dim);font-size:.76em;min-height:1em}
.podium-block{width:100%;height:78px;display:grid;place-items:center;background:linear-gradient(135deg,#b6bcc6,#737b8b 48%,#515968);border:3px solid #dfe3eb;border-radius:9px 7px 0 0;box-shadow:inset 0 0 18px #fff4,0 8px 0 #0008;color:#161920;font-family:'Caveat Brush';font-size:52px}
.place-1 .podium-block{height:112px;background:linear-gradient(135deg,#fff1a0,#ffd45e 48%,#c77d1c);border-color:#fff1b0}
.place-3 .podium-block{height:56px;background:linear-gradient(135deg,#eeb184,#bd754b 48%,#815034);border-color:#ffd0aa}
.podium-place.empty{visibility:hidden}
.podium-rest{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;list-style:none;padding:14px 0 0;color:var(--dim);font-size:.9em}
.podium-confetti{position:fixed;top:-18px;left:var(--x);width:9px;height:15px;background:var(--color);z-index:11;pointer-events:none;animation:podium-fall var(--duration) linear var(--delay) infinite}
.podium-reward{position:relative;margin:10px auto;text-align:center}
.podium-reward .gold{color:var(--y)}
.brawl-damage{color:var(--r);font-size:1.2em}
.podium-again,.podium-wait{position:relative;margin:12px auto;pointer-events:auto}
@keyframes podium-arrive{0%{opacity:0;transform:translateY(50px) scale(.8) rotate(-2deg)}65%{opacity:1;transform:translateY(-8px) scale(1.02)}100%{transform:none}}
@keyframes podium-rise{from{opacity:0;transform:translateY(90px)}to{opacity:1;transform:translateY(0)}}
@keyframes trophy-bob{50%{transform:translateY(-7px) rotate(3deg)}}
@keyframes podium-spin{to{transform:rotate(360deg)}}
@keyframes title-shine{0%{filter:brightness(.7);transform:scale(.8)}60%{filter:brightness(1.7);transform:scale(1.06)}100%{filter:brightness(1);transform:scale(1)}}
@keyframes podium-fall{to{transform:translateY(110vh) rotate(680deg)}}
#toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) rotate(-1deg);background:var(--y);color:#14161b;padding:5px 16px;border-radius:10px;border:3px solid var(--ink);font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}
#toast.on{opacity:1}

@media (max-width:900px){
  body{font-size:17px;overflow:auto}
  #game{height:auto;min-height:100%;grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"hud" "pl" "arena" "side" "bench"}
  #players{flex-direction:row}.pl{min-width:120px}
  #arena{aspect-ratio:1}
  #bench{flex-wrap:wrap}.slot{width:62px;height:62px}.slot img{width:52px;height:52px}
}
@media (max-width:600px){.podium-card{padding:10px 12px 16px}.podium-stage{min-height:190px;gap:3px}.podium-person img{width:58px;height:58px}.place-1 .podium-person img{width:80px;height:80px}.podium-person b{font-size:.9em}.podium-cup{width:72px;height:72px}}
@media (prefers-reduced-motion:reduce){.cd,#speed,.slot.pop,.podium-card,.podium-light,.podium-cup,.podium-title,.podium-place,.podium-confetti{animation:none}}