/* Shared visual language: midnight surfaces, lime highlights, tactile cards. */
:root {
  --bg: #090e17;
  --surface: rgba(23, 32, 45, .88);
  --surface-2: rgba(35, 47, 62, .85);
  --surface-solid: #17202d;
  --brand: #a3e635;
  --brand-2: #bef264;
  --text: #f4f6ed;
  --text-dim: #b2bdc9;
  --text-faint: #8b9aaa;
  --line: rgba(177, 197, 214, .14);
}
body { background: radial-gradient(ellipse at 15% 0, #192c2b 0, transparent 55%), #090e17; }
.btn--primary { color: #17220a; box-shadow: 0 6px 24px -10px #a3e63566; }
.btn { border-radius: 13px; }
.topbar, .table__head { background: rgba(9, 14, 23, .9); }
.brand__mark { background: #a3e63518; border: 1px solid #a3e63533; }
.brand__text { letter-spacing: -.04em; }
.panel { box-shadow: 0 16px 45px -30px #000; }
.hub-hero { position: relative; overflow: hidden; padding: clamp(24px, 5vw, 56px); border-color: #a3e63526; background: radial-gradient(ellipse at 100% 0, #a3e63520, transparent 65%), linear-gradient(120deg, #1b292c, #121a27); }
.hub-hero h1 { max-width: 640px; font-size: clamp(2rem, 5.5vw, 3.8rem); line-height: 1.08; letter-spacing: -.055em; padding: 12px 0; }
.hub-hero p { max-width: 580px; line-height: 1.7; }
.eyebrow { color: #bef264; font-size: .68rem; font-weight: 800; letter-spacing: .2em; }
.game-card { min-height: 236px; padding: 26px; background: linear-gradient(145deg, #1c2936, #121b26); transition: transform .25s, border-color .25s, box-shadow .25s; }
.game-card::before { opacity: .15; inset: -50% -30% 10% 25%; }
.game-card h3 { font-size: 1.4rem; letter-spacing: -.04em; }
.game-card__icon { width: 64px; height: 64px; margin-bottom: 10px; }
.game-card__arrow { position: absolute; right: 24px; top: 26px; color: var(--text-faint); transition: transform .25s, color .25s; }
.game-card:hover:not(:disabled) { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 20px 40px -22px #000; }
.game-card:hover .game-card__arrow { transform: translateX(4px); color: var(--text); }
.table { background: radial-gradient(ellipse at 50% 25%, #1a2931, #0b121e 75%); }
.table__head { min-height: 64px; }
.table__body { padding-top: 14px; }
.table__foot { background: linear-gradient(180deg, transparent, #0b121ef2 30%); }
.felt, .bj-felt { border: 1px solid #82c6b32b; background: radial-gradient(ellipse at 50% 35%, #214c49, #132e32 65%, #10232b); box-shadow: inset 0 0 0 5px #ffffff03, inset 0 0 80px #0003, 0 14px 35px -24px #000; }
.felt::before { content: ''; position: absolute; inset: 12px; border: 1px solid #b4e6ce12; border-radius: 18px; pointer-events: none; }
.felt > * { position: relative; z-index: 1; }
.felt::after { z-index: 0; }
.seat { background: #111e2bd9; border-radius: 16px; }
.seat--active { background: #a3e63516; border-color: #bef26499; box-shadow: 0 0 20px -10px #bef26480; }
.seat--active .seat__name { color: #d9f99d; }
.seat__mini { background: linear-gradient(140deg, #7690a4, #304354); }
.pile__label { color: #bfd2d2; font-size: .72rem; letter-spacing: .04em; }
.pile__stack { box-shadow: 3px 3px 0 #536175, 6px 6px 0 #25374b, 9px 9px 0 #71818a; border-radius: 10px; transform: rotate(-7deg); margin-right: 8px; }
.piles { gap: clamp(32px, 7vw, 74px); padding: 10px 0; }
.direction { background: #071b2355; border: 1px solid #ffffff12; border-radius: 99px; padding: 6px 12px; }
.card, .fcard { box-shadow: 0 10px 16px -7px #0009, inset 0 0 0 1px #ffffff33; }
.card__corner--br { transform: rotate(180deg); }
.hand__slot--playable .card { box-shadow: 0 0 0 2px #bef264, 0 12px 26px -10px #a3e63577; }
.hand { justify-content: flex-start; }
.hand__slot:first-child { margin-left: auto; }
.hand__slot:last-child { margin-right: auto; }
.table--your-turn .turn-hint strong { color: #d9f99d; }
.timer { max-width: 680px; margin: 0 auto 8px; height: 4px; }
.uno-call { color: white; }
.answer-btn { border-radius: 16px; box-shadow: 0 5px 0 #0003; transition: transform .18s, border-color .18s; }
.answer-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #0003; }
.phase-strip__item--active { color: #d9f99d; border-color: #a3e63566; background: #a3e63515; }
.log__entry { padding: 7px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 2px 6px; }
.log__entry:first-child { color: #e2eadf; }
.prompt-card__q { letter-spacing: -.025em; }
.celebration { position: fixed; inset: 0; z-index: 110; pointer-events: none; overflow: hidden; }
.celebration i { position: absolute; top: -15px; width: 8px; height: 15px; border-radius: 2px; }
@media (min-width: 1024px) {
  .table__body { padding-left: 24px; padding-right: 24px; }
  .table__foot { padding-top: 14px; }
  .table__main { grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
  .felt { border-radius: 32px; }
}
@media (max-width: 480px) {
  .table__head { min-height: 56px; }
  .game-card { min-height: 210px; }
  .btn--lg { padding: 12px 18px; min-height: 48px; font-size: .95rem; }
  .felt { gap: 8px; }
}
@media (max-height: 650px) {
  .table { height: auto; min-height: 100dvh; overflow: visible; }
  .table__body { flex: 1 0 auto; overflow: visible; }
  .felt, .bj-felt { min-height: 235px; }
}