/* ============================================================
   PARTY — design system
   Jackbox-flavored: chunky type, sticker cards, hard shadows.
   ============================================================ */

:root{
  --ink:#1A1330;            /* deep grape — text on light, borders */
  --ink-2:#2A2150;
  --cream:#FFF6E6;          /* warm paper */
  --cream-2:#FBEDD2;

  --coral:#FF5A3C;
  --gold:#FFC22E;
  --grape:#9A6CFF;
  --teal:#16C2A3;
  --pink:#FF5C9D;
  --sky:#3D8BFF;

  --shadow:0 7px 0 rgba(0,0,0,.40);
  --shadow-sm:0 4px 0 rgba(0,0,0,.35);
  --shadow-lg:0 12px 0 rgba(0,0,0,.42);

  --font-display:'Bricolage Grotesque', sans-serif;
  --font-body:'Hanken Grotesk', sans-serif;
  --font-mono:'Space Mono', monospace;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body,#root{height:100%}
body{
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  color:var(--cream);
  background:#15102B;
  overflow:hidden;
}

/* ---------- app stage ---------- */
.stage{
  position:fixed;inset:0;
  background:#15102B;
  background-image:radial-gradient(135% 80% at 50% -10%, #312357 0%, #1B1238 48%, #110B24 100%);
  display:flex;align-items:stretch;justify-content:center;
  overflow:hidden;
}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.dot{position:absolute;opacity:.5;animation:cfFloat linear infinite}
@keyframes cfFloat{0%{transform:translateY(-24px) rotate(0)}100%{transform:translateY(112vh) rotate(380deg)}}

/* phone column — responsive, fills viewport with sane max width */
.app{
  position:relative;z-index:2;
  width:100%;max-width:520px;height:100%;
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  padding:0;
  scrollbar-width:none;
}
.app::-webkit-scrollbar{display:none}
.pad{padding:24px 22px 40px}

/* screen transitions */
.screen{animation:screenIn .42s cubic-bezier(.22,1,.36,1) both}
@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
.fade{animation:fade .35s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- type utilities ---------- */
.kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#B6A6E8}
.serif-i{font-family:var(--font-display);font-weight:600;letter-spacing:-.3px}
.display{font-family:var(--font-display);font-weight:800;letter-spacing:-2px;line-height:.9}
.mono{font-family:var(--font-mono)}

/* big stamped headline used on game moment-screens */
.stamp{
  font-family:var(--font-display);font-weight:800;line-height:.82;letter-spacing:-3px;
  color:var(--cream);text-transform:uppercase;
}
.stamp.sh-coral{text-shadow:5px 5px 0 var(--coral)}
.stamp.sh-gold{text-shadow:5px 5px 0 var(--gold)}
.stamp.sh-grape{text-shadow:5px 5px 0 var(--grape)}
.stamp.sh-teal{text-shadow:5px 5px 0 var(--teal)}
.stamp.sh-pink{text-shadow:5px 5px 0 var(--pink)}
.stamp.sh-sky{text-shadow:5px 5px 0 var(--sky)}
.stamp.sh-ink{text-shadow:5px 5px 0 var(--ink)}

/* outline (stroke) text */
.stroke{color:transparent;-webkit-text-stroke:2.5px var(--cream)}

/* ---------- live dot ---------- */
.livedot{display:inline-flex;align-items:center;gap:7px}
.livedot::before{content:"";width:8px;height:8px;border-radius:8px;background:var(--teal);box-shadow:0 0 0 4px rgba(22,194,163,.22);animation:livePulse 1.7s ease-in-out infinite}
@keyframes livePulse{50%{box-shadow:0 0 0 7px rgba(22,194,163,0)}}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.3px;
  border:3px solid var(--ink);border-radius:16px;padding:15px 22px;
  background:var(--cream);color:var(--ink);cursor:pointer;
  box-shadow:var(--shadow);transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .14s;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  user-select:none;
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.4)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.coral{background:var(--coral);color:#fff}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.grape{background:var(--grape);color:#fff}
.btn.teal{background:var(--teal);color:#06281f}
.btn.pink{background:var(--pink);color:#fff}
.btn.sky{background:var(--sky);color:#fff}
.btn.ghost{background:transparent;color:var(--cream);border-color:rgba(255,255,255,.28);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}
.btn.sm{font-size:15px;padding:10px 16px;border-width:2.5px;border-radius:12px}
.btn.lg{font-size:23px;padding:19px 24px;border-radius:20px}

.btn-row{display:flex;gap:11px}
.btn-row .btn{width:auto;flex:1}

/* round icon button */
.iconbtn{
  width:46px;height:46px;border-radius:46px;border:3px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);color:var(--cream);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform .14s,background .14s;
}
.iconbtn:hover{transform:translateY(-2px);background:rgba(255,255,255,.12)}
.iconbtn:active{transform:translateY(1px)}

/* ---------- header / topbar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 0}
.gametag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#A99AD6}

/* ---------- chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:8px;background:var(--cream);color:var(--ink);
  border:2.5px solid var(--ink);padding:7px 14px 7px 8px;border-radius:40px;font-weight:700;font-size:15px;box-shadow:var(--shadow-sm);
}
.chip .av{width:23px;height:23px;border-radius:23px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex:0 0 auto}
.chip.add{background:transparent;color:#B6A6E8;border:2.5px dashed #5B4E86;box-shadow:none;padding:8px 16px;cursor:pointer}
.chip.add:hover{border-color:#8270C0;color:#D4C8F2}
.chip .x{margin-left:2px;opacity:.5;cursor:pointer;font-weight:700}
.chip .x:hover{opacity:1}
.chip.selectable{cursor:pointer;transition:transform .12s}
.chip.selectable:hover{transform:translateY(-2px)}
.chip.sel{background:var(--ink);color:var(--cream);border-color:var(--cream)}

.roster{display:flex;flex-wrap:wrap;gap:9px}

/* ---------- panels / cards ---------- */
.panel{margin-top:26px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.panel-title{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#9C8ED0}

.card{
  background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:20px;
  box-shadow:var(--shadow);padding:20px;
}
.card.tilt{transform:rotate(-1.4deg)}

/* sticker swatch / token */
.token{width:14px;height:14px;border-radius:14px;flex:0 0 auto}

/* ---------- toggle ---------- */
.switch{
  width:46px;height:27px;border-radius:27px;background:#4A3E73;position:relative;flex:0 0 auto;cursor:pointer;
  transition:background .2s;border:2px solid rgba(255,255,255,.12);
}
.switch::after{content:"";position:absolute;width:19px;height:19px;border-radius:19px;background:var(--cream);top:2px;left:2px;transition:left .2s cubic-bezier(.34,1.56,.64,1)}
.switch.on{background:var(--teal)}
.switch.on::after{left:21px}
.toggle-row{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);padding:13px 16px;border-radius:16px}
.toggle-row .lbl{flex:1}
.toggle-row .lbl b{font-size:15px;font-weight:700;color:#EDE6FA}
.toggle-row .lbl small{display:block;font-weight:400;color:#9082BE;font-size:12.5px;margin-top:1px}

/* ---------- stepper ---------- */
.stepper{display:inline-flex;align-items:center;gap:14px;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.14);border-radius:40px;padding:6px 8px}
.stepper b{font-family:var(--font-display);font-size:24px;min-width:34px;text-align:center}
.stepper button{width:38px;height:38px;border-radius:38px;border:none;background:var(--cream);color:var(--ink);font-size:22px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.stepper button:active{transform:scale(.9)}
.stepper button:disabled{opacity:.35;pointer-events:none}

/* ---------- private reveal / pass device ---------- */
.reveal-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px 26px;min-height:100%}
.tap-hint{font-family:var(--font-mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#9082BE;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}

/* ---------- progress / dots ---------- */
.pips{display:flex;gap:8px;align-items:center}
.pip{width:11px;height:11px;border-radius:11px;background:rgba(255,255,255,.18)}
.pip.done{background:var(--teal)}
.pip.fail{background:var(--coral)}
.pip.cur{background:var(--cream);box-shadow:0 0 0 4px rgba(255,255,255,.14)}

/* ---------- timer bar ---------- */
.timerbar{height:14px;border-radius:14px;background:rgba(255,255,255,.12);overflow:hidden;border:2px solid rgba(255,255,255,.14)}
.timerbar > i{display:block;height:100%;background:var(--teal);border-radius:14px;transition:width 1s linear}
.timerbar > i.warn{background:var(--gold)}
.timerbar > i.danger{background:var(--coral)}

/* big circular countdown number */
.bigcount{font-family:var(--font-display);font-weight:800;font-size:140px;line-height:1;color:var(--cream)}
@keyframes countPop{0%{transform:scale(.5);opacity:0}40%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}
.count-anim{animation:countPop .9s cubic-bezier(.34,1.56,.64,1)}

/* wiggle */
@keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.wiggle{animation:wiggle 5s ease-in-out infinite}

/* pop-in for grids */
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}

/* utility */
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.col{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
.grow{flex:1}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.muted{color:#A99AD6}
.tcenter{text-align:center}
.wrap{display:flex;flex-wrap:wrap}

/* ============================================================
   HOME
   ============================================================ */
.hero{position:relative}
.wordmark-wrap{position:relative;display:inline-block;padding-right:52px}
.sound-toggle{opacity:.85;font-size:20px}
.sound-toggle[aria-pressed="false"]{opacity:.45}
.wordmark{
  font-family:var(--font-display);font-weight:800;font-size:clamp(52px,14vw,96px);line-height:.8;letter-spacing:-4px;
  color:var(--cream);text-shadow:5px 5px 0 var(--coral);transform:rotate(-2deg);transform-origin:left center;
}
.wordmark .b{color:var(--gold);text-shadow:5px 5px 0 var(--grape)}
.wordmark .c{color:var(--teal);text-shadow:5px 5px 0 var(--pink)}
.hero-tag{font-family:var(--font-display);font-weight:600;font-size:21px;color:#C5B7EE;margin-top:14px;letter-spacing:-.3px}

.addrow{display:flex;gap:9px;margin-top:4px}
.addinput{
  flex:1;font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--cream);
  background:rgba(255,255,255,.06);border:2.5px solid rgba(255,255,255,.16);border-radius:14px;padding:13px 16px;outline:none;
}
.addinput::placeholder{color:#8A7CB8;font-weight:500}
.addinput:focus{border-color:var(--grape);background:rgba(154,108,255,.1)}
.addbtn{
  font-family:var(--font-display);font-weight:700;font-size:16px;background:var(--cream);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:14px;padding:0 22px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .13s;
}
.addbtn:active{transform:translateY(2px)}

.gamegrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gamecard{
  position:relative;text-align:left;border:3.5px solid var(--ink);border-radius:24px;padding:20px 18px;color:var(--ink);
  box-shadow:var(--shadow);min-height:206px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;font-family:inherit;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;overflow:hidden;
  animation:pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.gamecard:hover{transform:translateY(-5px) rotate(-1.2deg);box-shadow:var(--shadow-lg)}
.gamecard:active{transform:translateY(2px);box-shadow:var(--shadow-sm)}
.gamecard h3{position:relative;z-index:2;font-family:var(--font-display);font-weight:800;font-size:31px;letter-spacing:-1px;line-height:.9;color:var(--ink)}
.gc-bottom{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.gc-tag{font-size:16px;font-weight:600;line-height:1.16;color:var(--ink)}
.gc-badge{background:var(--ink);color:var(--cream);font-family:var(--font-mono);font-size:11px;padding:5px 11px;border-radius:30px;font-weight:700;transform:rotate(-2deg)}

/* varied decorations — never the same dot twice */
.gc-deco{position:absolute;pointer-events:none;z-index:1}
.gamecard:nth-child(1) .gc-deco{right:-20px;top:-20px;width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.22)}
.gamecard:nth-child(2) .gc-deco{left:-24px;bottom:-24px;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.18)}
.gamecard:nth-child(2)::after{content:"";position:absolute;right:14px;top:16px;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.28);z-index:1}
.gamecard:nth-child(3) .gc-deco{right:14px;top:14px;width:52px;height:52px;border-radius:50%;border:7px solid rgba(255,255,255,.26);background:transparent}
.gamecard:nth-child(4) .gc-deco{left:-22px;top:38%;width:84px;height:84px;border-radius:26px;background:rgba(255,255,255,.18);transform:rotate(18deg)}
.gamecard:nth-child(5) .gc-deco{right:-26px;bottom:-10px;width:104px;height:104px;border-radius:50%;background:rgba(255,255,255,.2)}
.gamecard:nth-child(5)::after{content:"";position:absolute;left:16px;top:-10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);z-index:1}
.gamecard:nth-child(6) .gc-deco{right:16px;bottom:14px;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.24);transform:rotate(-12deg)}
.gamecard:nth-child(6)::after{content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;border:7px solid rgba(255,255,255,.2);z-index:1}
.gamecard:nth-child(7) .gc-deco{left:-20px;top:-16px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.2)}
.gamecard:nth-child(8) .gc-deco{right:-14px;bottom:-14px;width:88px;height:88px;border-radius:22px;background:rgba(255,255,255,.18);transform:rotate(12deg)}