:root{
  --bg:#0a0808; --card:rgba(255,255,255,.045); --line:rgba(215,148,127,.22);
  --ink:#fdf6ee; --muted:#c9b8ad;
  --coral:#d7947f; --gold:#d7c07f; --lime:#c2d77f;
  --dark:#0a0808; --danger:#ff6b81;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:Inter,Tahoma,Arial,sans-serif;min-height:100%}
body{background:
  radial-gradient(1100px 500px at 15% -5%,rgba(215,148,127,.14),transparent 60%),
  radial-gradient(900px 480px at 90% 10%,rgba(215,192,127,.10),transparent 60%),
  radial-gradient(800px 600px at 50% 110%,rgba(194,215,127,.08),transparent 60%),
  var(--bg)}
.mesh{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35}
.orb-a{width:340px;height:340px;left:-90px;top:-90px;background:#d7947f}
.orb-b{width:300px;height:300px;right:-80px;top:6%;background:#d7c07f;opacity:.25}
.orb-c{width:280px;height:280px;left:30%;bottom:-140px;background:#c2d77f;opacity:.18}
.nav{position:sticky;top:12px;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:12px;max-width:1180px;margin:12px auto 0;padding:12px 16px}
.glass{background:linear-gradient(180deg,rgba(43,30,27,.92),rgba(20,14,13,.94));
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.cut{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);text-decoration:none}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;color:#1a0d09;font-weight:900;
  background:linear-gradient(135deg,var(--coral),var(--gold))}
.brand b{color:var(--gold)}
nav{display:flex;align-items:center;gap:12px}
nav a{color:var(--muted);text-decoration:none;font-size:13px}
.nav-cta{padding:8px 12px;border:1px solid var(--line);border-radius:8px;color:var(--ink)!important}
.game-tag{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--gold)}
.ball-mini{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;
  font-size:12px;font-weight:900;color:#241207;background:radial-gradient(circle at 35% 30%,#fff6e3,var(--gold) 55%,#a97f3c);
  box-shadow:0 3px 0 rgba(0,0,0,.4)}
main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:22px 16px 40px}
.screen{display:none}
.screen.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.frame{width:100%}
.lobby-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start}
.narrow{max-width:560px;margin:0 auto}
.title-card,.join-card,.room-card,.board-card,.panel,.result-card{padding:26px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(194,215,127,.6);animation:pl 1.8s infinite}
@keyframes pl{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
h1{font-size:clamp(40px,6vw,68px);line-height:.95;letter-spacing:-.04em;margin:14px 0}
.gradient{background:linear-gradient(100deg,var(--coral),var(--gold),var(--lime));color:transparent;
  background-clip:text;-webkit-background-clip:text}
.title-card p{color:var(--muted);line-height:1.65;font-size:14px}
.rules-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.rules-chips span{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:12px;color:var(--muted)}
.rules-chips b{color:var(--gold)}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.how div{padding:12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03)}
.how b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:12px;color:#241207;
  background:linear-gradient(135deg,var(--gold),var(--coral));margin-bottom:8px}
.how span{color:var(--muted);font-size:12px;line-height:1.5;display:block}
.fld{display:block;margin-bottom:12px}
.fld span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.fld input{width:100%;padding:13px 14px;font:inherit;font-weight:700;color:var(--ink);
  background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;outline:none}
.fld input:focus{border-color:var(--gold)}
#codeInput{text-transform:uppercase;letter-spacing:.4em;text-align:center;font-size:20px;font-weight:900}
.button{display:block;width:100%;padding:14px 16px;font:inherit;font-weight:900;font-size:15px;
  border:none;cursor:pointer;text-align:center}
.button.primary{color:#241207;background:linear-gradient(180deg,#e8c48f,#c07a5e)}
.button.secondary{color:var(--ink);background:rgba(255,255,255,.07);border:1px solid var(--line)}
.button.ghost{color:var(--muted);background:transparent;border:1px solid var(--line)}
.button.small{font-size:13px;padding:10px}
.button:disabled{opacity:.45;cursor:not-allowed}
.join-card .button{margin-top:4px}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:12px 0}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}
.hint{color:var(--muted);font-size:12px;line-height:1.5}
.conn{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:14px 0 0}
.dot{width:9px;height:9px;border-radius:50%;background:#ffb02e}
.dot.ok{background:var(--lime)} .dot.bad{background:var(--danger)}
.kicker{color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.kicker b{color:var(--ink)}
.room-code{font-size:56px;font-weight:900;letter-spacing:.3em;text-align:center;color:var(--ink);
  background:rgba(0,0,0,.3);border:1px dashed var(--gold);border-radius:12px;padding:10px 0 10px 14px;margin:6px 0}
.room-sub{color:var(--muted);font-size:13px;text-align:center}
.player-list{display:grid;gap:8px;margin:16px 0}
.player-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:rgba(255,255,255,.03);font-weight:700}
.player-row .avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-weight:900;
  color:#241207;background:linear-gradient(135deg,var(--coral),var(--gold))}
.player-row.host .avatar{background:linear-gradient(135deg,var(--gold),var(--lime))}
.player-row .crown{margin-left:auto;color:var(--gold);font-size:12px}
.room-actions{display:grid;gap:8px}
.game-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;align-items:start}
.board-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.bingo-letters{display:flex;gap:6px;margin-top:8px}
.bingo-letters span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-weight:900;
  border:1px solid var(--line);color:var(--muted);background:rgba(0,0,0,.3);font-size:14px}
.bingo-letters span.on{color:#241207;border-color:transparent;
  background:radial-gradient(circle at 35% 30%,#fff6e3,var(--gold) 55%,#a97f3c);box-shadow:0 3px 0 rgba(0,0,0,.4)}
.turn-banner{padding:10px 14px;border-radius:10px;font-weight:800;font-size:13px;white-space:nowrap;
  background:rgba(194,215,127,.1);border:1px solid rgba(194,215,127,.4);color:var(--lime)}
.turn-banner.wait{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cell{position:relative;aspect-ratio:1;display:grid;place-items:center;font-weight:900;
  font-size:clamp(15px,2.6vw,22px);color:var(--ink);cursor:pointer;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.16),transparent 45%),linear-gradient(180deg,#3a2a26,#211a19);
  border:1px solid var(--line);border-radius:12px;transition:transform .1s}
.cell small{position:absolute;bottom:4px;font-size:9px;color:var(--muted);font-weight:600}
.cell.playable{border-color:var(--lime);box-shadow:0 0 0 1px rgba(194,215,127,.5)}
.cell.playable:hover{transform:translateY(-2px)}
.cell.called{background:radial-gradient(circle at 35% 30%,#fff6e3,var(--gold) 55%,#8a6530);
  color:#241207;border-color:transparent;text-shadow:none}
.cell.called small{color:#4a3416}
.cell.last{animation:pop .4s ease}
@keyframes pop{0%{transform:scale(1.25)}100%{transform:scale(1)}}
.cell.win{background:radial-gradient(circle at 35% 30%,#eaffe6,var(--lime) 55%,#5f7f2e);color:#16210a;border-color:transparent}
.cell:disabled{cursor:default}
.side-col{display:grid;gap:16px}
.called-strip{display:flex;flex-wrap:wrap;gap:6px;max-height:150px;overflow:auto}
.called-strip .none{color:var(--muted);font-size:12px}
.chip{min-width:34px;height:34px;display:grid;place-items:center;padding:0 8px;border-radius:17px;
  font-weight:800;font-size:12px;color:#241207;
  background:radial-gradient(circle at 35% 30%,#fff6e3,var(--gold) 55%,#a97f3c);animation:pop .3s ease}
.score-list{display:grid;gap:8px}
.score-row{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700}
.score-row .pips{display:flex;gap:3px;margin-left:auto}
.score-row .pips i{width:14px;height:8px;border-radius:4px;background:rgba(255,255,255,.12)}
.score-row .pips i.on{background:var(--lime)}
.progress-goal{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12px;color:var(--muted)}
.progress{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--coral),var(--gold),var(--lime));transition:width .3s}
.result-card{text-align:center}
.result-card h1{font-size:clamp(34px,6vw,54px)}
.trophy{font-size:52px}
.footer{display:flex;justify-content:space-between;max-width:1180px;margin:0 auto;padding:18px 16px 30px;
  color:var(--muted);font-size:12px}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  color:#241207;background:linear-gradient(180deg,#e8c48f,#c07a5e);padding:11px 16px;border-radius:10px;
  font-size:13px;font-weight:800;transition:.2s;z-index:20;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){
  .lobby-grid,.game-grid{grid-template-columns:1fr}
  .nav{margin:8px 8px 0}
  main{padding:16px 10px 30px}
  .title-card,.join-card,.room-card,.board-card,.panel,.result-card{padding:18px}
  .how{grid-template-columns:1fr 1fr 1fr}
}

/* ============ Apple-inspired motion (snappy micro, smooth macro) ============ */
:root{--snap:cubic-bezier(.32,.72,0,1);--spring:cubic-bezier(.34,1.4,.44,1)}
.button,.cell{transition:transform .12s ease-out,filter .12s ease-out,box-shadow .25s var(--snap)}
.button:active{transform:scale(.96)}
.cell{transition:transform .25s var(--snap),background-color .25s var(--snap),box-shadow .25s var(--snap)}
.cell.playable:active{transform:scale(.9)}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;font-size:18px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);cursor:pointer;transition:transform .12s ease-out}
.icon-btn:active{transform:scale(.9)}

/* bingo line highlight: claimed = win glow, pending = pulsing outline */
.cell.win{background:radial-gradient(circle at 35% 30%,#f2ffe0,var(--lime) 55%,#5f7f2e)!important;
  color:#16210a!important;border-color:transparent;box-shadow:0 0 14px rgba(194,215,127,.55)}
.cell.win small{color:#3d5222}
.cell.pend{box-shadow:0 0 0 2px var(--gold),0 0 16px rgba(215,192,127,.6);animation:pendPulse 1s var(--snap) infinite}
@keyframes pendPulse{50%{box-shadow:0 0 0 4px var(--gold),0 0 22px rgba(215,192,127,.85)}}
.bingo-letters span.pend{border-color:var(--gold);color:var(--gold);animation:pendPulse 1s var(--snap) infinite}
.pend-dot{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:900;
  color:#241207;background:var(--gold);animation:pendPulse 1s var(--snap) infinite}
.chip.fresh{box-shadow:0 0 0 2px #fff6e3,0 0 12px rgba(215,192,127,.8)}

/* BINGO claim button: smooth spring pop-in */
.claim-btn{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:30;display:flex;align-items:center;gap:14px;padding:14px 26px 14px 14px;font:inherit;
  border:none;cursor:pointer;color:#241207;
  background:linear-gradient(180deg,#ffe9ad,var(--gold) 55%,#c07a5e);
  border-radius:999px;box-shadow:0 12px 40px rgba(215,192,127,.45),0 4px 0 rgba(0,0,0,.35)}
.claim-btn.pop{animation:claimPop .45s var(--spring)}
@keyframes claimPop{0%{transform:translateX(-50%) scale(.4);opacity:0}60%{transform:translateX(-50%) scale(1.08);opacity:1}100%{transform:translateX(-50%) scale(1)}}
.claim-btn.urgent{animation:urgentShake .4s ease-in-out infinite}
@keyframes urgentShake{0%,100%{transform:translateX(calc(-50% - 4px))}50%{transform:translateX(calc(-50% + 4px))}}
.claim-ring{position:relative;width:64px;height:64px}
.claim-ring svg{width:64px;height:64px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(36,18,7,.25);stroke-width:6}
.ring-fg{fill:none;stroke:#241207;stroke-width:6;stroke-linecap:round;stroke-dasharray:201;stroke-dashoffset:0;
  animation:ringDrain 8s linear forwards}
@keyframes ringDrain{to{stroke-dashoffset:201}}
.claim-emoji{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;animation:emojiBounce 1s var(--spring) infinite}
@keyframes emojiBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.claim-text{font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1}
.claim-text small{display:block;font-size:12px;font-weight:700;opacity:.75}

/* rival bingo banner + screen edge flash */
.rival-banner{position:fixed;top:calc(70px + env(safe-area-inset-top));left:50%;transform:translate(-50%,-16px);
  z-index:30;padding:12px 22px;border-radius:14px;font-weight:900;font-size:15px;color:#241207;white-space:nowrap;
  background:linear-gradient(180deg,#ffd9a8,#e8935e);box-shadow:0 10px 30px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .25s var(--snap),transform .3s var(--spring)}
.rival-banner.show{opacity:1;transform:translate(-50%,0)}
.edge-flash{position:fixed;inset:0;z-index:25;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 0 5px var(--gold),inset 0 0 60px rgba(215,192,127,.5)}
.edge-flash.flash{animation:edgeFlash 1.1s ease-out}
@keyframes edgeFlash{0%{opacity:1}100%{opacity:0}}

/* result overlay: board stays visible behind */
.board-card{position:relative}
.over-overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:18px;
  background:rgba(10,8,8,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:inherit;opacity:0;transition:opacity .35s var(--snap)}
.over-overlay.show{opacity:1}
.over-overlay .result-card{width:min(440px,100%);animation:cardIn .4s var(--spring)}
@keyframes cardIn{0%{transform:scale(.85) translateY(14px);opacity:0}100%{transform:none;opacity:1}}

/* confetti */
.confetti-layer{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.confetti-layer i{position:absolute;top:-12px;width:9px;height:13px;border-radius:2px;
  animation:confettiFall linear forwards}
@keyframes confettiFall{to{transform:translate(var(--dx),105vh) rotate(var(--rot));opacity:.9}}

/* avatars in score rows */
.avatar-mini{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:11px;font-weight:900;
  color:#241207;background:linear-gradient(135deg,var(--coral),var(--gold))}
.score-row .pend-dot{margin-left:2px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}