/* Ultimate Party Arena — sticker-book carnival UI
   Palette: grape night, with candy accents. Every control is a die-cut sticker:
   thick ink outline, hard drop shadow, tilted a degree or two, presses flat on tap. */

:root{
  --ink:#140828;
  --grape:#180C2E;
  --grape-2:#2A1259;
  --grape-3:#3A1B72;
  --cream:#FFF6E8;
  --pink:#FF3D8B;
  --tang:#FF9E2C;
  --lime:#7BE83C;
  --cyan:#2CE0FF;
  --violet:#8A4BFF;
  --yolk:#FFE44B;
  --r:18px;
  --shadow:0 6px 0 var(--ink);
  --safeT:env(safe-area-inset-top,0px);
  --safeB:env(safe-area-inset-bottom,0px);
  --safeL:env(safe-area-inset-left,0px);
  --safeR:env(safe-area-inset-right,0px);
  font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--grape);color:var(--cream);
  overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
#app{position:fixed;inset:0;overflow:hidden}
canvas#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
canvas#confetti{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* ---------------------------------------------------------- type */
.display{font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:.92}
h1,h2,h3{font-weight:900;text-transform:uppercase;letter-spacing:-.01em}

/* ---------------------------------------------------------- menu shell */
#menu{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:calc(var(--safeT) + 8px) calc(var(--safeR) + 12px) calc(var(--safeB) + 10px) calc(var(--safeL) + 12px);
  background:
    radial-gradient(120% 80% at 50% -10%, #4B1F8C 0%, transparent 60%),
    radial-gradient(90% 60% at 10% 110%, #7A1C5A 0%, transparent 55%),
    var(--grape);
}
#menu[hidden]{display:none}

#topbar{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-bottom:8px;z-index:5}
.chip{display:flex;align-items:center;gap:6px;background:var(--grape-2);border:3px solid var(--ink);
  border-radius:14px;padding:6px 12px;font-weight:900;box-shadow:0 4px 0 var(--ink);font-size:15px}
.chip.back{font-size:24px;line-height:1;padding:2px 14px 6px;background:var(--pink);visibility:hidden}
.chip.wallet{margin-left:auto;background:var(--tang);color:var(--ink)}
.chip.wallet .coin{color:#fff}
.chip.lvl{background:var(--violet);flex-direction:column;align-items:stretch;gap:3px;padding:5px 12px;min-width:64px}
.chip.lvl span{font-size:13px;text-align:center}
.xpbar{height:5px;background:rgba(0,0,0,.45);border-radius:4px;overflow:hidden}
.xpbar i{display:block;height:100%;background:var(--yolk);width:0%;transition:width .4s}

.screen{position:absolute;left:0;right:0;top:0;bottom:0;
  padding:calc(var(--safeT) + 62px) calc(var(--safeR) + 12px) calc(var(--safeB) + 16px) calc(var(--safeL) + 12px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:none;flex-direction:column;gap:12px;touch-action:pan-y}
.screen.active{display:flex;animation:slide .28s cubic-bezier(.2,1.2,.4,1)}
@keyframes slide{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.screen::-webkit-scrollbar{width:0}

.scr-title{font-size:30px;font-weight:900;text-transform:uppercase;
  text-shadow:3px 3px 0 var(--ink), -1px -1px 0 var(--ink);margin:-2px 0 2px;transform:rotate(-1.2deg)}

/* ---------------------------------------------------------- logo */
.logo{margin:8px 0 14px;transform:rotate(-2deg);text-align:center;flex:0 0 auto}
.logo div{font-weight:900;text-transform:uppercase;line-height:.86;
  text-shadow:0 4px 0 var(--ink), 0 8px 0 rgba(0,0,0,.35)}
.logo-top{font-size:clamp(22px,7vw,40px);color:var(--cyan);letter-spacing:.16em}
.logo-mid{font-size:clamp(52px,17vw,96px);color:var(--yolk);letter-spacing:-.03em;
  -webkit-text-stroke:3px var(--ink)}
.logo-bot{font-size:clamp(34px,11vw,64px);color:var(--pink);letter-spacing:.02em;
  -webkit-text-stroke:3px var(--ink)}
.logo-tag{font-size:12px;font-weight:900;letter-spacing:.08em;color:#D9C7FF;margin-top:10px;
  text-shadow:0 2px 0 var(--ink)}

/* ---------------------------------------------------------- stickers */
.stack{display:flex;flex-direction:column;gap:11px;padding-bottom:12px}
.sticker{position:relative;display:flex;align-items:center;gap:12px;
  background:var(--grape-3);border:3px solid var(--ink);border-radius:var(--r);
  padding:14px 16px;font-size:18px;font-weight:900;text-transform:uppercase;
  box-shadow:var(--shadow);transform:rotate(-.6deg);transition:transform .08s,box-shadow .08s;
  text-align:left;width:100%}
.sticker:nth-child(even){transform:rotate(.7deg)}
.sticker span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
  background:var(--pink);border:3px solid var(--ink);border-radius:11px;font-size:16px}
.sticker.big{background:var(--lime);color:var(--ink);font-size:24px;padding:20px 16px}
.sticker.big span{background:var(--ink);color:var(--lime)}
.sticker.danger{background:var(--pink)}
.sticker.ghost{background:transparent;box-shadow:0 4px 0 var(--ink)}
.sticker:active,.tapped{transform:translateY(6px) rotate(0deg)!important;box-shadow:0 0 0 var(--ink)!important}
.sticker[disabled]{opacity:.45}

.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;padding-bottom:16px}
.grid.two{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.grid.tight{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}

/* ---------------------------------------------------------- cards */
.card{position:relative;background:var(--grape-2);border:3px solid var(--ink);border-radius:var(--r);
  padding:12px;box-shadow:var(--shadow);overflow:hidden;transition:transform .08s,box-shadow .08s}
.card:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.card.sel{background:var(--grape-3);border-color:var(--yolk);box-shadow:0 6px 0 var(--ink),0 0 0 3px var(--yolk) inset}
.card.locked{filter:saturate(.4)}
.card h3{font-size:16px;margin-bottom:3px}
.card .sub{font-size:11.5px;color:#C9B6FF;line-height:1.35;font-weight:700}
.card .tagline{font-size:11px;color:#FFD9A0;font-weight:900;margin-top:6px}
.badge{position:absolute;top:0;right:0;background:var(--tang);color:var(--ink);font-size:10px;
  font-weight:900;padding:4px 9px;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);
  border-radius:0 15px 0 12px;letter-spacing:.04em}
.badge.own{background:var(--lime)}
.badge.eq{background:var(--cyan)}
.badge.cat{position:static;border:3px solid var(--ink);border-radius:9px;padding:2px 8px;
  display:inline-block;background:var(--violet);color:var(--cream);font-size:10px}

.chip-mini{display:inline-block;background:var(--ink);border-radius:8px;padding:3px 8px;
  font-size:10.5px;font-weight:900;color:var(--cyan);margin:4px 4px 0 0}

/* character portrait */
.face{height:66px;border-radius:12px;border:3px solid var(--ink);margin-bottom:9px;position:relative;
  display:grid;place-items:center;overflow:hidden}
.face .head{width:34px;height:34px;border-radius:50%;border:3px solid var(--ink);position:relative;
  box-shadow:0 4px 0 rgba(0,0,0,.3)}
.face .head:before,.face .head:after{content:"";position:absolute;top:11px;width:6px;height:8px;
  background:var(--ink);border-radius:3px}
.face .head:before{left:6px}.face .head:after{right:6px}

/* stat bars */
.stats{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.stat{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:900;letter-spacing:.04em}
.stat b{width:34px;color:#C9B6FF}
.stat .bar{flex:1;height:8px;background:rgba(0,0,0,.45);border-radius:5px;overflow:hidden}
.stat .bar i{display:block;height:100%;border-radius:5px}

/* ---------------------------------------------------------- form controls */
.field{background:var(--grape-2);border:3px solid var(--ink);border-radius:var(--r);padding:11px 13px;
  box-shadow:0 4px 0 var(--ink)}
.field .lab{display:flex;justify-content:space-between;font-size:13px;font-weight:900;margin-bottom:7px}
.field .lab em{font-style:normal;color:var(--yolk)}
input[type=range]{-webkit-appearance:none;width:100%;height:10px;border-radius:6px;background:var(--ink);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:9px;
  background:var(--yolk);border:3px solid var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.4)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:9px;background:var(--yolk);border:3px solid var(--ink)}
input[type=text]{width:100%;background:var(--ink);border:3px solid var(--grape-3);border-radius:12px;
  padding:10px;color:var(--cream);font-weight:900;font-size:15px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1;min-width:66px;background:var(--ink);border:3px solid var(--ink);border-radius:12px;
  padding:9px 6px;font-size:12px;font-weight:900;text-transform:uppercase;color:#B9A4E8}
.seg button.on{background:var(--cyan);color:var(--ink);border-color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.45)}
.toggle{width:56px;height:30px;border-radius:16px;background:var(--ink);position:relative;flex:0 0 auto;border:3px solid var(--ink)}
.toggle i{position:absolute;top:1px;left:1px;width:22px;height:22px;border-radius:50%;background:#8A7AB8;transition:.16s}
.toggle.on{background:var(--lime)}
.toggle.on i{left:27px;background:var(--ink)}

.note{font-size:12px;color:#C9B6FF;font-weight:700;line-height:1.5}
.divider{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:900;color:#C9B6FF;
  text-transform:uppercase;letter-spacing:.1em;margin-top:6px}
.divider:before,.divider:after{content:"";height:3px;background:var(--grape-3);flex:1;border-radius:2px}

.progline{height:9px;background:rgba(0,0,0,.45);border-radius:5px;overflow:hidden;margin-top:7px}
.progline i{display:block;height:100%;background:var(--lime)}

/* ---------------------------------------------------------- HUD */
#hud{position:absolute;inset:0;pointer-events:none;z-index:20;
  padding:calc(var(--safeT) + 8px) calc(var(--safeR) + 10px) 0 calc(var(--safeL) + 10px)}
#hud[hidden]{display:none}
#hudTop{display:flex;align-items:center;gap:8px}
.score-wrap{display:flex;gap:7px;align-items:center}
.team-score{background:var(--grape-2);border:3px solid var(--ink);border-radius:13px;padding:5px 12px;
  font-weight:900;font-size:18px;box-shadow:0 4px 0 var(--ink)}
.clock{margin:0 auto;background:var(--ink);border:3px solid var(--cream);border-radius:13px;padding:5px 14px;
  font-weight:900;font-size:19px;letter-spacing:.04em}
.chip.pause{pointer-events:auto;background:var(--violet);font-size:13px;padding:8px 12px}

#playerBars{position:absolute;left:calc(var(--safeL) + 10px);right:calc(var(--safeR) + 10px);
  top:calc(var(--safeT) + 52px);display:flex;flex-direction:column;gap:5px;max-width:230px}
.pbar{background:rgba(20,8,40,.75);border:3px solid var(--ink);border-radius:12px;padding:5px 8px;
  display:flex;align-items:center;gap:7px}
.pbar .tag{font-size:10px;font-weight:900;min-width:22px;text-align:center;border-radius:6px;padding:2px 3px;color:var(--ink)}
.pbar .hp{flex:1;height:11px;background:rgba(0,0,0,.6);border-radius:6px;overflow:hidden;position:relative}
.pbar .hp i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),#C8FF7A);transition:width .16s}
.pbar .hp u{position:absolute;inset:0;background:rgba(44,224,255,.55);width:0;text-decoration:none}
.pbar .lives{font-size:11px;font-weight:900;color:var(--pink)}
.pbar .ultring{width:20px;height:20px;border-radius:50%;border:3px solid var(--ink);
  background:conic-gradient(var(--yolk) 0deg, rgba(0,0,0,.5) 0deg)}

#hudBanner{position:absolute;left:0;right:0;top:34%;text-align:center;font-size:clamp(34px,13vw,80px);
  font-weight:900;text-transform:uppercase;color:var(--yolk);opacity:0;
  text-shadow:0 6px 0 var(--ink),0 10px 20px rgba(0,0,0,.6)}
#hudBanner.show{animation:pop 1.2s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{opacity:0;transform:scale(.4) rotate(-8deg)}18%{opacity:1;transform:scale(1.1) rotate(2deg)}
  70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}

#hudEvent{position:absolute;left:50%;top:calc(var(--safeT) + 56px);transform:translateX(-50%);
  background:var(--pink);border:3px solid var(--ink);border-radius:13px;padding:7px 15px;font-weight:900;
  font-size:14px;box-shadow:0 5px 0 var(--ink);opacity:0;white-space:nowrap}
#hudEvent.show{animation:evt 3.4s ease}
@keyframes evt{0%{opacity:0;transform:translate(-50%,-24px)}10%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}

#killfeed{position:absolute;right:calc(var(--safeR) + 10px);top:calc(var(--safeT) + 52px);
  display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.feed{background:rgba(20,8,40,.8);border:2px solid var(--ink);border-radius:9px;padding:3px 9px;
  font-size:11px;font-weight:900;animation:fadeout 4s forwards}
@keyframes fadeout{0%,70%{opacity:1}100%{opacity:0}}

/* ---------------------------------------------------------- touch controls */
#touch{position:absolute;inset:0;z-index:25;pointer-events:none}
#touch[hidden]{display:none}
.pad{position:absolute;bottom:calc(var(--safeB) + 12px);left:calc(var(--safeL) + 12px);
  display:flex;align-items:flex-end;gap:10px;pointer-events:none}
.pad.right{left:auto;right:calc(var(--safeR) + 12px);flex-direction:row-reverse}
.stick{position:relative;width:118px;height:118px;border-radius:50%;
  background:rgba(20,8,40,.42);border:4px solid rgba(255,246,232,.28);pointer-events:auto;touch-action:none}
.stick i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:rgba(255,246,232,.85);border:4px solid var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.35)}
.btns{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;pointer-events:none}
.ab{position:relative;width:62px;height:62px;border-radius:50%;border:4px solid var(--ink);
  font-size:11px;font-weight:900;color:var(--ink);pointer-events:auto;touch-action:none;
  box-shadow:0 5px 0 var(--ink);display:grid;place-items:center;overflow:hidden}
.ab:active,.ab.down{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.ab.jump{background:var(--cyan)}
.ab.atk{background:var(--pink);color:var(--cream)}
.ab.act{background:var(--yolk)}
.ab.ult{background:var(--tang)}
.ab b{font-size:10px;line-height:1.05;text-align:center;padding:0 3px;z-index:2}
.ab em{position:absolute;inset:0;background:rgba(20,8,40,.72);font-style:normal;display:grid;
  place-items:center;font-size:16px;color:var(--cream);z-index:3}
.ab em:empty{display:none}
.ab.ready{animation:glow 1.1s infinite}
@keyframes glow{0%,100%{box-shadow:0 5px 0 var(--ink)}50%{box-shadow:0 5px 0 var(--ink),0 0 16px 4px var(--yolk)}}

/* ---------------------------------------------------------- overlays */
#pause,#results{position:absolute;inset:0;z-index:40;display:grid;place-items:center;
  background:rgba(12,4,26,.86);padding:20px}
#pause[hidden],#results[hidden]{display:none}
.panel{width:min(400px,100%);background:var(--grape-2);border:4px solid var(--ink);border-radius:24px;
  padding:20px;box-shadow:0 10px 0 var(--ink);display:flex;flex-direction:column;gap:11px;
  max-height:88vh;overflow-y:auto}
.panel h2{font-size:27px;text-align:center;margin-bottom:4px;text-shadow:0 4px 0 var(--ink)}
.result-title{font-size:44px;text-align:center;color:var(--yolk);text-shadow:0 5px 0 var(--ink);transform:rotate(-2deg)}
.result-title.lose{color:var(--pink)}
.rewards{display:flex;flex-direction:column;gap:7px}
.reward{display:flex;justify-content:space-between;background:var(--ink);border-radius:12px;padding:9px 13px;
  font-weight:900;font-size:14px}
.reward em{font-style:normal;color:var(--yolk)}

#toast{position:absolute;left:50%;bottom:calc(var(--safeB) + 90px);transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;gap:7px;align-items:center;pointer-events:none;width:max-content;max-width:90%}
.toast-i{background:var(--yolk);color:var(--ink);border:3px solid var(--ink);border-radius:13px;
  padding:9px 16px;font-weight:900;font-size:14px;box-shadow:0 5px 0 var(--ink);animation:tin 2.6s forwards}
@keyframes tin{0%{opacity:0;transform:translateY(16px) scale(.9)}12%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}

#loading{position:absolute;inset:0;z-index:70;display:grid;place-items:center;background:var(--grape);gap:14px}
#loading[hidden]{display:none}
#loading p{font-weight:900;letter-spacing:.06em;text-transform:uppercase;font-size:13px;margin-top:16px}
.spin{width:56px;height:56px;border-radius:16px;border:5px solid var(--ink);background:var(--pink);
  animation:sp 1.1s cubic-bezier(.6,0,.4,1) infinite}
@keyframes sp{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.7)}100%{transform:rotate(360deg) scale(1)}}

/* split-screen divider drawn over the canvas */
#app.split:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;
  background:var(--ink);z-index:15;pointer-events:none}
#app.splitH:after{left:0;right:0;width:auto;top:50%;bottom:auto;height:6px;margin:-3px 0 0}

@media (max-height:430px){
  .stick{width:96px;height:96px}
  .ab{width:54px;height:54px}
  .logo{margin:2px 0 8px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}