*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{max-width:100%;overflow-x:hidden}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top left,#e0f2fe,transparent 30%),linear-gradient(135deg,#eef7ff,#f7f1ff);color:#172033;min-height:100vh}button,input,select{font:inherit}.app{width:min(980px,100%);margin:0 auto;padding:16px}.connection-status{position:sticky;top:0;z-index:20;background:#b42318;color:#fff;text-align:center;font-weight:900;padding:10px}.screen{animation:pop 180ms ease-out}.card{background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.7);border-radius:28px;box-shadow:0 18px 50px rgba(28,45,80,.14);padding:22px}.hidden{display:none!important}.hero{text-align:center;margin-bottom:20px}.logo{font-size:58px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(32px,8vw,54px);line-height:1;margin-bottom:10px}label{display:grid;gap:8px;margin:14px 0;font-weight:800}input,select{width:100%;padding:15px 16px;border:2px solid #d9e1ef;border-radius:16px;background:#fff;min-height:52px}input:focus,select:focus{outline:3px solid rgba(31,111,235,.22);border-color:#1f6feb}button{border:0;border-radius:18px;padding:15px 18px;font-weight:900;cursor:pointer;min-height:52px;touch-action:manipulation}button:active{transform:translateY(1px)}.primary{width:100%;background:#1f6feb;color:#fff;margin-top:14px;box-shadow:0 10px 24px rgba(31,111,235,.22)}.secondary{background:#fff;border:2px solid #d9e1ef;color:#172033}.compact{min-height:40px;padding:9px 12px;border-radius:13px}.stats-card{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#f7f9fc;border:1px solid #e7edf7;border-radius:20px;padding:14px;margin-bottom:12px}.stats-card button{grid-column:1/-1}.stats-card strong{display:block;font-size:30px;line-height:1}.stats-card span{color:#65758b;font-weight:750}.stats-details{background:#fff;border:1px solid #e7edf7;border-radius:18px;padding:12px 14px;margin-bottom:18px}.stats-details summary{cursor:pointer;font-weight:900}.stats-grid{display:grid;gap:12px;margin-top:12px}.mini-list{display:grid;gap:7px}.mini-item{display:flex;justify-content:space-between;gap:10px;background:#f7f9fc;border-radius:12px;padding:8px 10px;font-weight:750}.mode-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:18px 0}.mode{text-align:left;display:grid;gap:4px;background:#f7f9fc;border:2px solid transparent}.mode span{font-weight:600;color:#526070}.mode.selected{border-color:#1f6feb;background:#edf5ff}.divider{position:relative;text-align:center;margin:18px 0 12px;color:#65758b;font-size:13px;font-weight:800}.divider:before{content:"";position:absolute;height:1px;background:#d9e1ef;left:0;right:0;top:50%}.divider span{position:relative;background:#fff;padding:0 10px}.join-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:14px}#codeInput{text-transform:uppercase;letter-spacing:.12em;font-weight:900}.error{color:#b42318;min-height:24px;font-weight:800;margin-top:12px}.eyebrow{color:#65758b;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:900;margin-bottom:6px}.lobby-header{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}#roomCode{font-size:48px;letter-spacing:.18em;margin-bottom:4px}.qr-box{background:#fff;border:2px solid #d9e1ef;border-radius:22px;padding:14px;display:grid;place-items:center;min-height:210px}.qr-box img{width:min(220px,100%);height:auto;image-rendering:pixelated}.invite-panel{display:grid;gap:12px;background:#f7f9fc;border:1px solid #e7edf7;border-radius:20px;padding:14px;margin:18px 0}.invite-panel p{margin:3px 0 0;color:#65758b}.players,.scoreboard{display:grid;gap:10px;margin:16px 0}.player,.score{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:18px;padding:12px 14px;box-shadow:0 8px 25px rgba(28,45,80,.08);transition:transform 160ms ease,box-shadow 160ms ease}.score.score-pulse{animation:scorePulse 420ms ease}.player.disconnected,.score.disconnected{opacity:.58}.player-main{display:flex;align-items:center;gap:10px;font-weight:850}.avatar{font-size:30px}.badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:end}.badge{background:#edf5ff;color:#1f4fbf;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:900}.badge.offline{background:#fff1f0;color:#b42318}.hint,.trip-subtitle{color:#65758b;text-align:center;margin-top:14px}.trip-subtitle{text-align:left;margin:4px 0 0;font-weight:700}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.board-wrapper{width:100%;max-width:100%;overflow-x:hidden;display:flex;justify-content:center}.bingo-board{width:min(100%,520px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(3px,1.2vw,8px)}.race-board,.trip-board{width:min(100%,720px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(5px,1.4vw,8px)}.tile{aspect-ratio:1/1;width:100%;min-width:0;min-height:0;padding:0;background:#fff;border:2px solid #d9e1ef;border-radius:clamp(9px,3vw,16px);font-weight:950;font-size:clamp(12px,3.4vw,19px);line-height:1;color:#172033;box-shadow:0 8px 18px rgba(28,45,80,.06);display:grid;place-items:center;transition:transform 140ms ease,background 140ms ease,color 140ms ease,border-color 140ms ease}.tile:active{transform:scale(.94)}.tile.just-marked{animation:tilePop 360ms ease}.tile.marked{background:#1f6feb;border-color:#1f6feb;color:#fff}.tile.winning-line{background:#22c55e;border-color:#16a34a;color:#fff;animation:winningTileGlow 950ms ease-in-out infinite alternate}.tile.free{background:#f5b700;border-color:#f5b700;color:#172033;font-size:clamp(10px,2.8vw,17px)}.tile.free.winning-line{color:#172033;background:#fde047;border-color:#facc15}.trip-progress{background:#fff;border-radius:20px;padding:14px;box-shadow:0 8px 25px rgba(28,45,80,.08);margin:12px 0}.progress-row{display:flex;justify-content:space-between;gap:10px;font-weight:900;margin-bottom:8px}.progress-bar{height:14px;border-radius:999px;background:#e7edf7;overflow:hidden}.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#1f6feb,#22c55e);transition:width 250ms ease}.badge-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.trip-badge{border-radius:999px;padding:7px 10px;background:#f7f9fc;color:#65758b;font-weight:900;font-size:13px}.trip-badge.unlocked{background:#ecfdf3;color:#15803d}.winner-avatar{font-size:72px;text-align:center;animation:winnerBounce 900ms ease infinite alternate}#winner{text-align:center}.confetti-layer{pointer-events:none;position:fixed;inset:0;z-index:50;overflow:hidden}.confetti-piece{position:absolute;top:-20px;width:10px;height:16px;border-radius:4px;animation:confettiFall 2200ms linear forwards}.confetti-piece:nth-child(4n){background:#1f6feb}.confetti-piece:nth-child(4n+1){background:#f5b700}.confetti-piece:nth-child(4n+2){background:#22c55e}.confetti-piece:nth-child(4n+3){background:#ef4444}.bingo-overlay{position:fixed;inset:0;z-index:45;display:grid;place-items:center;pointer-events:none;background:rgba(23,32,51,.18)}.bingo-overlay>div{background:#fff;border-radius:28px;padding:28px;text-align:center;box-shadow:0 24px 70px rgba(23,32,51,.24);animation:bingoOverlayPop 900ms ease forwards}.bingo-overlay strong{display:block;font-size:clamp(48px,16vw,110px);line-height:.9;color:#1f6feb}.bingo-overlay span{display:block;margin-top:10px;font-weight:900;color:#172033}@keyframes pop{from{transform:scale(.98);opacity:.6}to{transform:scale(1);opacity:1}}@keyframes tilePop{0%{transform:scale(.92)}55%{transform:scale(1.08)}100%{transform:scale(1)}}@keyframes scorePulse{0%{transform:scale(1);box-shadow:0 8px 25px rgba(28,45,80,.08)}50%{transform:scale(1.025);box-shadow:0 12px 30px rgba(31,111,235,.18)}100%{transform:scale(1);box-shadow:0 8px 25px rgba(28,45,80,.08)}}@keyframes winnerBounce{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-8px) rotate(3deg)}}@keyframes winningTileGlow{from{box-shadow:0 8px 18px rgba(28,45,80,.08);transform:scale(1)}to{box-shadow:0 0 0 4px rgba(34,197,94,.18),0 12px 30px rgba(34,197,94,.24);transform:scale(1.035)}}@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}@keyframes bingoOverlayPop{0%{transform:scale(.75);opacity:0}15%{transform:scale(1.04);opacity:1}80%{transform:scale(1);opacity:1}100%{transform:scale(.98);opacity:0}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (max-width:430px){.app{padding:10px}.topbar{margin-bottom:10px}.topbar h2{font-size:20px;margin-bottom:0}.scoreboard{gap:7px;margin:10px 0 12px}.score{padding:9px 10px;border-radius:14px}.avatar{font-size:24px}.bingo-board{width:min(100%,calc(100vw - 20px));gap:3px}.race-board,.trip-board{width:min(100%,calc(100vw - 20px));grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.tile{border-width:1.5px;border-radius:10px;font-size:clamp(11px,3.6vw,14px)}.tile.free{font-size:clamp(9px,3vw,12px)}}@media (max-width:360px){.app{padding:8px}.bingo-board{width:min(100%,calc(100vw - 16px));gap:2px}.tile{border-width:1px;border-radius:8px;font-size:11px}.tile.free{font-size:9px}}@media (min-width:700px){.mode-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}.lobby-header{grid-template-columns:1fr 260px}.invite-panel{grid-template-columns:1fr auto;align-items:center}.race-board,.trip-board{grid-template-columns:repeat(6,minmax(0,1fr))}.app{padding:32px}}@media (min-width:900px){.stats-grid{grid-template-columns:repeat(3,1fr)}.stats-card{grid-template-columns:1fr 1fr auto;align-items:center}.stats-card button{grid-column:auto}}


.host-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.danger {
  width: 100%;
  background: #b42318;
  color: white;
  border: 2px solid #b42318;
  margin-top: 10px;
}

.host-actions .danger {
  width: auto;
  margin-top: 0;
}

.danger.hidden {
  display: none !important;
}

@media (max-width: 430px) {
  .host-actions {
    gap: 6px;
  }

  .host-actions button {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 14px;
  }
}