:root{--green:#2f7d32;--green-d:#1b5e20;--leaf:#8bc34a;--cream:#fffdf5;--ink:#1d2b1f;--t0:#d99a1c;--t0-bg:#fff3d6;--t1:#e5484d;--t1-bg:#ffe4e4;--radius:20px}
*{box-sizing:border-box}
html{background:#1b5e20}
html,body{margin:0;min-height:100vh}
body{font-family:Fredoka,ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
  background:radial-gradient(circle at 20% 0%,#6fbf4a 0,transparent 45%),radial-gradient(circle at 100% 30%,#3e9b3a 0,transparent 40%),linear-gradient(180deg,#2f7d32,#1b5e20);
  background-attachment:fixed;-webkit-tap-highlight-color:transparent;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#app{max-width:560px;margin:0 auto;padding:12px 14px 40px}
#app[data-screen^="room"]{max-width:1100px}
h1,h2,h3{margin:.2em 0 .4em;line-height:1.1}
h1{font-size:2.2rem} h2{font-size:1.6rem} h3{font-size:1.2rem}
p{margin:.4em 0}
a{color:inherit}
.card{background:var(--cream);border-radius:var(--radius);padding:18px;margin:12px 0;box-shadow:0 6px 0 rgba(0,0,0,.15),0 10px 30px rgba(0,0,0,.15)}
.center{text-align:center}
.hint{color:#5b6b5d;font-size:.95rem}
.block>.hint{color:#e8f5e9}
.warn{background:#fff3cd;border-radius:12px;padding:10px;color:#7a5b00}
.row{display:flex;align-items:center}
.row.gap{gap:10px} .row>*{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;border:0;border-radius:16px;background:var(--green);color:#fff;font:inherit;font-weight:600;font-size:1.15rem;
  padding:14px 18px;min-height:54px;cursor:pointer;box-shadow:0 4px 0 var(--green-d);text-decoration:none;width:100%;margin:6px 0;transition:transform .05s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--green-d)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.big{font-size:1.35rem;min-height:64px}
.btn.huge{font-size:2rem;min-height:96px}
.btn.ghost{background:#e8f5e9;color:var(--green-d);box-shadow:0 4px 0 #b9d8bb}
.btn.small{width:auto;font-size:1rem;min-height:44px;padding:8px 14px}
.busy .btn[data-act]{pointer-events:none}
input{font:inherit;font-size:1.2rem;width:100%;padding:14px 16px;border:3px solid #cfe3c9;border-radius:14px;margin:6px 0;background:#fff;color:var(--ink)}
input:focus{outline:none;border-color:var(--leaf)}
.code-input{text-transform:uppercase;letter-spacing:.3em;font-weight:700;text-align:center;flex:1.5!important;margin-right:10px}
.name-input{text-align:center;font-size:1.5rem}
.hero{text-align:center;color:#fff;padding:24px 0 6px}
.hero h1{font-size:3rem;text-shadow:0 4px 0 rgba(0,0,0,.2)}
.hero .tag{font-size:1.2rem;opacity:.9}
.bowl{font-size:5.5rem;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-6deg)}}
.big-emoji{font-size:4rem}
.spin{display:inline-block;animation:bob 1s infinite}
.rules summary,.inline-rules summary{cursor:pointer;font-weight:600}
.rules ol{padding-left:1.2em}
.topbar{display:flex;align-items:center;gap:10px;color:#fff;padding:4px 0 2px;flex-wrap:wrap}
.logo{font-weight:700;font-size:1.3rem;margin-right:auto}
.code-pill{background:rgba(255,255,255,.18);border-radius:999px;padding:6px 12px}
.code-pill b{letter-spacing:.12em}
.mute{background:rgba(255,255,255,.18);border:0;border-radius:999px;font-size:1.2rem;width:44px;height:44px;cursor:pointer}
.team-tag{display:inline-block;border-radius:999px;padding:4px 12px;font-weight:600;font-size:1rem;color:#fff}
.team-tag.t0{background:var(--t0)} .team-tag.t1{background:var(--t1)}
.team-dot{display:inline-block;width:10px;height:10px;border-radius:50%} .team-dot.t0{background:var(--t0)} .team-dot.t1{background:var(--t1)}
.teams{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.team{border-radius:16px;padding:10px}
.team.t0{background:var(--t0-bg);border:3px solid var(--t0)} .team.t1{background:var(--t1-bg);border:3px solid var(--t1)}
.team-head{display:flex;align-items:center;gap:6px;font-size:1.15rem}
.team-head .count{margin-left:auto;background:#fff;border-radius:999px;padding:0 9px;font-size:.95rem}
.team-name-input{font-size:1.05rem;padding:6px 8px;margin:0;border-width:2px;min-width:0;font-weight:600}
.team ul{list-style:none;margin:8px 0 0;padding:0}
.team li{display:flex;align-items:center;gap:6px;padding:5px 0;font-size:1.1rem;border-bottom:1px dashed rgba(0,0,0,.08)}
.team li.me span:first-child{font-weight:700}
.team li .status{margin-left:auto}
.team li.empty{color:#888;font-style:italic}
.pchip{font:inherit;border:0;background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer;min-height:40px;text-align:left}
.x{border:0;background:transparent;color:#a33;font-size:1rem;cursor:pointer;min-width:36px;min-height:36px}
.host label{display:block;font-weight:600;margin:12px 0 4px}
.seg{display:flex;background:#e8f5e9;border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:transparent;border-radius:10px;font:inherit;font-weight:600;padding:10px 4px;min-height:44px;cursor:pointer;color:var(--green-d)}
.seg button.on{background:var(--green);color:#fff}
.join-card{display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:center}
.qr{background:#fff;padding:8px;border-radius:16px;width:min(320px,70vw)} .qr svg{width:100%;height:auto;display:block}
.join-text{text-align:center} .join-text h2{font-size:2.2rem}
.url{font-weight:700;font-size:1.3rem;word-break:break-all}
.code-big{font-size:4.5rem;font-weight:700;letter-spacing:.15em;color:var(--green)}
.progress{font-weight:600}
.mini-join{display:flex;align-items:center;gap:10px;color:#fff;justify-content:center} .mini-join svg{width:64px;height:64px;background:#fff;border-radius:6px}
.round{text-align:center;margin:8px 0}
.round-label{font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;color:#5b6b5d}
.round-name{font-size:1.6rem;font-weight:700}
.round-rule{font-size:1.1rem}
.round.big .round-name{font-size:2.6rem}
.round.big .round-rule{font-size:1.4rem}
.intro{background:#fff8e1;border:4px solid #ffca28;animation:pop .4s ease}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.upnext{text-transform:uppercase;letter-spacing:.1em;color:#5b6b5d;margin-top:10px}
.giver{font-size:2.6rem;font-weight:700}
.last{background:#eef7ec;border-radius:12px;padding:8px}
.bowl-count{font-size:1.2rem;font-weight:600}
.scores{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.score{border-radius:var(--radius);padding:14px;text-align:center;color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.18)}
.score.t0{background:var(--t0)} .score.t1{background:var(--t1)}
.score.up{outline:4px solid #fff}
.score-name{font-weight:600;font-size:1.15rem}
.score-num{font-size:3.2rem;font-weight:700;line-height:1}
.scores.compact .score-num{font-size:2.2rem}
.turn-card.t0{border-top:10px solid var(--t0)} .turn-card.t1{border-top:10px solid var(--t1)}
.who{font-size:1.5rem;font-weight:700}
.timer{font-size:3rem;font-weight:700;font-variant-numeric:tabular-nums}
.timer.huge{font-size:clamp(5rem,22vw,12rem);line-height:1}
.timer.low{color:var(--t1);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.timerbar{height:12px;background:#e0e0e0;border-radius:999px;overflow:hidden;margin:8px 0}
.timerbar>div{height:100%;background:var(--leaf);transition:width .2s linear}
.turn-stats{display:flex;justify-content:center;gap:18px;font-weight:600;font-size:1.1rem}
.role{font-size:1.2rem;font-weight:600}
.role-big{font-size:2rem;font-weight:700;border-radius:16px;padding:14px;margin:12px 0}
.role-big.guess{background:#e8f5e9;color:var(--green-d)} .role-big.watch{background:#fff3cd;color:#7a5b00}
.you-up{border:4px solid var(--leaf)}
.rule-reminder{background:#fff8e1;border-radius:12px;padding:10px;font-weight:600}
.giver-screen{background:var(--cream);border-radius:var(--radius);padding:14px;margin-top:10px;box-shadow:0 6px 0 rgba(0,0,0,.15)}
.giver-screen.t0{border-top:10px solid var(--t0)} .giver-screen.t1{border-top:10px solid var(--t1)}
.giver-top{display:flex;align-items:center;justify-content:space-between}
.giver-top .mini{text-align:right;font-size:.95rem;color:#5b6b5d}
.slip{min-height:34vh;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;border:3px dashed #cfe3c9;border-radius:18px;margin:10px 0;padding:16px}
.slip span{font-size:clamp(2rem,10vw,3.4rem);font-weight:700;word-break:break-word;line-height:1.1}
.btn.got{font-size:2rem;min-height:110px;background:#43a047}
.btn.pass{background:#78909c;box-shadow:0 4px 0 #455a64;min-height:72px;font-size:1.3rem}
.btn.foul{background:#ef6c00;box-shadow:0 4px 0 #a84a00;min-height:72px;font-size:1.3rem}
.results h1{font-size:2.4rem}
.breakdown{width:100%;border-collapse:collapse;margin:10px 0;font-size:1.1rem}
.breakdown th,.breakdown td{padding:8px;border-bottom:1px solid #e3eee0;text-align:center}
.breakdown td:first-child{text-align:left}
.breakdown .tot td{font-weight:700}
.mvp{text-align:left;max-width:320px;margin:0 auto;font-size:1.15rem}
.foot{text-align:center;color:#e8f5e9;margin-top:18px;font-size:.95rem}
.foot a{color:#fff}
.inline-rules{display:inline-block;text-align:left} .inline-rules[open]{display:block;background:var(--cream);color:var(--ink);border-radius:14px;padding:10px;margin-top:8px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#263238;color:#fff;padding:12px 18px;border-radius:14px;font-weight:600;z-index:20;max-width:90vw;text-align:center}
.offline::before{content:"Reconnecting…";position:fixed;top:0;left:0;right:0;background:#ef6c00;color:#fff;text-align:center;padding:4px;z-index:30;font-weight:600}
#confetti{position:fixed;inset:0;pointer-events:none;display:none;z-index:40}
@media (min-width:900px){
  #app[data-screen^="room"] .timer.huge{font-size:14rem}
  #app[data-screen^="room"] .giver{font-size:3.6rem}
  #app[data-screen^="room"] .score-num{font-size:5rem}
}