/* IntuitionHall Party: vibrant party-game skin. Self-hosted fonts only, no CDNs. */
@font-face{font-family:"Fredoka";src:url(/fonts/Fredoka.ttf) format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/Nunito.ttf) format("truetype");font-weight:200 1000;font-display:swap}
:root{
  --bg:#1b0b3a; --bg2:#2a1260; --card:#2f1670; --card2:#3a1d86; --line:rgba(255,255,255,.14);
  --text:#fff8ec; --muted:#cfc3ff;
  --pink:#ff3d9a; --cyan:#21e6ff; --yellow:#ffd23f; --lime:#a6ff4d;
  --ink:#1b0b3a; /* dark text on bright buttons */
  --display:"Fredoka","SF Pro Rounded",ui-rounded,"Arial Rounded MT Bold","Nunito",system-ui,sans-serif;
  --body:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:24px; --tap:52px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);font:17px/1.5 var(--body);
  background:radial-gradient(80% 50% at 15% 0%,rgba(255,61,154,.28),transparent 60%),
             radial-gradient(70% 50% at 100% 30%,rgba(33,230,255,.20),transparent 60%),
             radial-gradient(60% 40% at 50% 100%,rgba(255,210,63,.14),transparent 60%),
             linear-gradient(180deg,var(--bg2),var(--bg));background-attachment:fixed}
h1,h2,h3,.display{font-family:var(--display);font-weight:700;line-height:1.1;margin:0 0 .4em;letter-spacing:.2px}
a{color:var(--cyan)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:12px}
.skip{position:absolute;left:12px;top:-80px;background:var(--yellow);color:var(--ink);padding:10px 14px;border-radius:999px;font-weight:800;z-index:50}
.skip:focus{top:10px}
.muted{color:var(--muted)} .small{font-size:14px} .center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;max-width:1100px;margin:0 auto}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;font:600 16px var(--display)}
.brand img{border-radius:8px}
.brand em{font-style:normal;background:var(--pink);color:var(--ink);padding:2px 10px;border-radius:999px;font-size:13px}
.pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:480px){.brand span{display:none}.pill{font-size:13px;padding:5px 10px}}
.pill{font:600 14px var(--display);padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid var(--line);white-space:nowrap}
.pill.hosted{background:rgba(255,255,255,.06);font-weight:500;font-size:13px;opacity:.9}
.pill.hot{background:var(--yellow);color:var(--ink);border-color:transparent}
.pill.final{background:var(--pink);color:var(--ink);border-color:transparent}
.pill.low{background:var(--pink);color:var(--ink);animation:pulse 1s infinite}

main{max-width:1100px;margin:0 auto;padding:4px 16px 48px;outline:none}

/* buttons */
.btn{appearance:none;border:0;min-height:var(--tap);padding:0 28px;border-radius:999px;font:700 19px var(--display);letter-spacing:.3px;
  background:var(--yellow);color:var(--ink);cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.35);transition:transform .12s cubic-bezier(.3,1.8,.5,1),box-shadow .12s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn:active{transform:translateY(4px) scale(.96);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.btn.pink{background:var(--pink);color:var(--ink)}
.btn.cyan{background:var(--cyan)}
.btn.lime{background:var(--lime)}
.btn.ghost{background:rgba(255,255,255,.1);color:var(--text);box-shadow:none;border:2px solid var(--line)}
.btn.small{min-height:40px;padding:0 16px;font-size:15px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.wide{width:100%}

/* cards & forms */
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.form{max-width:520px;margin:12px auto;display:grid;gap:16px}
label{font:600 15px var(--display);display:block;margin-bottom:6px;color:var(--muted)}
input[type=text],textarea,select{width:100%;font:700 20px var(--body);color:var(--text);background:rgba(0,0,0,.25);border:2px solid var(--line);border-radius:18px;padding:14px 16px}
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 4px rgba(33,230,255,.25)}
textarea{resize:none;min-height:96px}
select{appearance:none}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1 1 140px}
.avatars{display:flex;flex-wrap:wrap;gap:8px}
.avatars button{width:48px;height:48px;border-radius:50%;border:3px solid transparent;background:rgba(255,255,255,.1);font-size:24px;cursor:pointer;transition:transform .12s}
.avatars button[aria-pressed=true]{border-color:var(--yellow);background:rgba(255,210,63,.2);transform:scale(1.1)}
.stepper{display:flex;align-items:center;gap:10px}
.stepper output{font:700 28px var(--display);min-width:2ch;text-align:center}
.stepper button{width:var(--tap);height:var(--tap);border-radius:50%;border:0;background:var(--cyan);color:var(--ink);font:700 26px var(--display);cursor:pointer}
.hero{text-align:center;margin:18px auto 6px;max-width:640px}
.hero h1{font-size:clamp(34px,8vw,56px)}
.hero h1 span{color:var(--yellow)}
.hero p{color:var(--muted);margin:0}
.err{color:#fff;background:rgba(255,61,154,.25);border:2px solid var(--pink);border-radius:14px;padding:10px 14px;font-weight:700}

/* the table: ring of players around the prompt card */
.table{position:relative;margin:8px auto 0}
.ring{display:flex;gap:10px;overflow-x:auto;padding:8px 2px 12px;scrollbar-width:none;justify-content:flex-start}
.ring::-webkit-scrollbar{display:none}
.seat{flex:0 0 auto;width:74px;text-align:center;transition:transform .3s}
.bubble{position:relative;width:58px;height:58px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:30px;
  background:var(--c);box-shadow:0 0 0 4px rgba(255,255,255,.12),0 8px 18px rgba(0,0,0,.35)}
.seat.me .bubble{box-shadow:0 0 0 4px var(--yellow),0 8px 18px rgba(0,0,0,.35)}
.seat .nm{font:600 13px var(--display);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .sc{font-size:12px;color:var(--muted)}
.tag{position:absolute;right:-8px;bottom:-6px;font:700 10px/1 var(--display);padding:4px 6px;border-radius:999px;background:#fff;color:var(--ink);text-transform:uppercase;letter-spacing:.4px}
.tag.submitted,.tag.voted{background:var(--lime)} .tag.writing,.tag.voting{background:var(--yellow)} .tag.on-stage{background:var(--pink)} .tag.host{background:var(--cyan)}
.seat.empty .bubble{background:transparent;border:3px dashed var(--line);box-shadow:none;font-size:20px;color:var(--muted)}
.seat.done .bubble{animation:bounce .5s cubic-bezier(.3,1.8,.5,1)}
.stage{max-width:620px;margin:0 auto}

@media (min-width:880px){
  .table{width:1040px;height:800px}
  /* scoped to the game table: on the invite page the ring is a plain row (an unscoped absolute ring covered the join form) */
  .table .ring{position:absolute;inset:0;display:block;overflow:visible;padding:0;pointer-events:none}
  .table .seat{pointer-events:auto}
  .table .seat{position:absolute;width:96px;margin:-44px 0 0 -48px;left:calc(50% + var(--x) * 440px);top:calc(50% + var(--y) * 330px)}
  .bubble{width:72px;height:72px;font-size:38px}
  .seat .nm{font-size:15px}
  .stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:480px;max-height:500px;overflow:auto;margin:0;padding:4px 4px 12px}
}

/* prompt card */
.prompt{background:#fff8ec;color:var(--ink);border-radius:28px;padding:22px 22px 26px;position:relative;box-shadow:0 10px 0 var(--pink),0 24px 50px rgba(0,0,0,.4);margin-bottom:22px}
.prompt .kicker{font:700 13px var(--display);letter-spacing:1px;text-transform:uppercase;color:#8a2a6a;margin-bottom:6px}
.prompt h2{font-size:clamp(24px,5.6vw,32px);color:var(--ink);margin:0}
.prompt.final{box-shadow:0 10px 0 var(--yellow),0 24px 50px rgba(0,0,0,.4)}
.answerbox{display:grid;gap:10px}
.count{font-size:13px;color:var(--muted);text-align:right;margin-top:-4px}
.done-card{text-align:center;padding:26px}
.done-card .big{font-size:56px;line-height:1}

/* versus */
.versus{display:grid;gap:14px;position:relative}
.vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);z-index:2;background:var(--yellow);color:var(--ink);font:700 22px var(--display);
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.opt{appearance:none;border:0;text-align:left;width:100%;border-radius:24px;padding:22px 20px;min-height:110px;font:700 22px/1.25 var(--display);cursor:pointer;
  color:var(--ink);box-shadow:0 8px 0 rgba(0,0,0,.3);transition:transform .14s cubic-bezier(.3,1.8,.5,1),box-shadow .14s,opacity .2s;position:relative}
.opt.a{background:var(--pink)}.opt.b{background:var(--cyan)}
.opt.c0{background:var(--pink)}.opt.c1{background:var(--cyan)}.opt.c2{background:var(--yellow)}.opt.c3{background:var(--lime)}
.opt:hover:not(:disabled){transform:translateY(-3px) rotate(-.5deg)}
.opt:active:not(:disabled){transform:translateY(5px) scale(.97);box-shadow:0 3px 0 rgba(0,0,0,.3)}
.opt:disabled{cursor:default}
.opt.picked{outline:5px solid #fff;outline-offset:3px}
.opt.dim{opacity:.45}
.opt.empty{font-style:italic;opacity:.6}
.opt .meta{display:flex;align-items:center;gap:8px;margin-top:12px;font:600 15px var(--body)}
.opt .meta .mini{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:16px;background:rgba(255,255,255,.85)}
.opt .pts{margin-left:auto;font:700 20px var(--display)}
.opt .mine{position:absolute;top:10px;right:14px;font:700 11px var(--display);text-transform:uppercase;letter-spacing:.6px;background:var(--ink);color:#fff;padding:3px 8px;border-radius:999px}
.sweep{text-align:center;font:700 26px var(--display);color:var(--yellow);margin:10px 0 0;animation:pop .5s cubic-bezier(.3,1.8,.5,1)}
.finallist{display:grid;gap:12px}
.finallist .opt{min-height:76px;font-size:19px}

/* scoreboard */
.board{display:grid;gap:10px}
.line{display:grid;grid-template-columns:34px 44px 1fr auto;align-items:center;gap:10px;background:rgba(255,255,255,.08);border-radius:18px;padding:10px 14px;position:relative;overflow:hidden}
.line .bar{position:absolute;inset:0 auto 0 0;background:var(--c);opacity:.28;border-radius:18px;transform-origin:left;animation:grow .9s cubic-bezier(.2,1.2,.4,1) both}
.line>*{position:relative}
.line .rk{font:700 22px var(--display);color:var(--muted)}
.line .mini{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:var(--c)}
.line .who{font:600 18px var(--display)}
.line .pts{font:700 22px var(--display)}
.line.win{outline:3px solid var(--yellow)}
.crown{font-size:40px;text-align:center;animation:bounce 1s infinite alternate}

/* invite */
.invite{display:grid;gap:10px;background:rgba(0,0,0,.22);border:2px dashed rgba(255,255,255,.25);border-radius:20px;padding:14px}
.code{font:700 34px var(--display);letter-spacing:6px;color:var(--yellow);text-align:center}
.invite input{font-size:14px;padding:10px 12px}

/* toast + confetti + pop */
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(120px);background:var(--lime);color:var(--ink);font:700 17px var(--display);padding:12px 22px;border-radius:999px;transition:transform .3s cubic-bezier(.3,1.8,.5,1);z-index:60;box-shadow:0 8px 0 rgba(0,0,0,.3)}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.bad{background:var(--pink)}
#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}
#confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall linear forwards}
.pop{animation:pop .45s cubic-bezier(.3,1.8,.5,1)}
.burst{position:fixed;pointer-events:none;z-index:45}
.burst i{position:absolute;width:10px;height:10px;border-radius:50%;animation:burst .6s ease-out forwards}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes bounce{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
@keyframes pulse{50%{transform:scale(1.08)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(var(--w))}}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .line .bar{transform:scaleX(var(--w))}
  #confetti{display:none}
}
.row .btn{flex:1 1 auto;white-space:nowrap;padding:0 18px;font-size:17px}