* { box-sizing:border-box; margin:0; padding:0; }
body { min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:0 0 48px; }
button { font:600 13px 'Inter',system-ui,sans-serif; cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:default; }
[hidden] { display:none !important; }
.game-shell { width:calc(100% - 40px); margin:28px auto 0; display:flex; flex-direction:column; align-items:center; gap:0; }
.game-shell > * + * { margin-top:16px; }
.top-bar { display:flex; width:100%; align-items:center; flex-wrap:wrap; }
.tb-back { text-decoration:none; font-size:12px; font-weight:600; white-space:nowrap; }
.tb-title { margin-right:auto; }
.tb-eyebrow { display:flex; align-items:center; gap:7px; text-transform:uppercase; font-weight:700; }
.tb-dot { width:6px; height:6px; border-radius:50%; }
.scorebar { display:flex; }
.scorebar > div { display:flex; flex-direction:column; }
.scorebar .l { text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.scorebar .v { font-weight:700; font-variant-numeric:tabular-nums; }
.controls { display:flex; flex-wrap:wrap; align-items:center; gap:0; }
.controls button + button { margin-left:8px; }
.record { margin-right:auto; color:#617267; font-size:12px; }
.turn-bar { width:100%; min-height:58px; display:flex; align-items:center; padding:11px 16px; border:1px solid #c5cdbb; border-radius:10px; background:#fffcf3; }
#turnBadge { flex-shrink:0; margin-right:14px; padding:7px 10px; background:#2d5a48; color:#fff7dd; border-radius:6px; font-size:11px; font-weight:700; }
#prompt { font-size:14px; line-height:1.45; }
.board-fit { position:relative; width:100%; display:flex; justify-content:center; }
body[data-room="skyjo"] .table { width:960px; height:530px; position:relative; flex:0 0 auto; transform-origin:top center; }
body[data-room="skyjo"] .table::before { border-radius:85px; inset:5px 5px 10px; }
body[data-room="skyjo"] .table::after { border-radius:65px; inset:27px 27px 30px; }
/* Explicit edges also draw the felt on Chrome 76, before inset support. */
body[data-room="skyjo"] .table::before { top:5px; right:5px; bottom:10px; left:5px; }
body[data-room="skyjo"] .table::after { top:27px; right:27px; bottom:30px; left:27px; }
.player-area { position:absolute; top:57px; width:296px; text-align:center; }
.human { left:51px; }.computer { right:51px; }
.player-name { display:inline-block; min-width:190px; font-size:14px; font-weight:700; padding:7px 14px; border:1px solid #b4d5c341; background:#123b31; border-radius:9px; margin-bottom:17px; }
.player-name span { display:block; font-size:11px; color:#bdcfc1; font-weight:400; margin-top:4px; }
.player-name.active { color:#173b30; background:#edce94; border-color:#fff1ce; }
.player-name.active span { color:#345044; }
.card-grid { display:grid; grid-template-columns:repeat(4, 68px); grid-auto-rows:94px; grid-gap:8px; }
.number-card { width:68px; height:94px; position:relative; border:1px solid #e5dac2; border-radius:7px; background:#fffbef; color:#38583f; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 6px #001e2360; font:600 35px 'Bricolage Grotesque',system-ui,sans-serif; transition:transform .16s,box-shadow .16s; }
.number-card::before { content:''; position:absolute; top:7px; right:7px; bottom:7px; left:7px; border:1px solid currentColor; opacity:.18; border-radius:40%; }
.number-card.lg-card-back::before { display:none; }
.number-card.negative { color:#435d9a; background:#edf1fa; }
.number-card.zero { color:#226b6a; background:#edf7ee; }
.number-card.medium { color:#9b702d; background:#fff4d9; }
.number-card.high { color:#a54b3d; background:#fff0e7; }
.number-card small { position:absolute; top:5px; left:6px; font:700 10px 'Inter',sans-serif; }
.number-card .bottom-index { top:auto; left:auto; right:6px; bottom:5px; transform:rotate(180deg); }
.number-card.playable { box-shadow:0 0 0 2px #e8c994,0 4px 9px #001e2360; }
.number-card.playable:hover { transform:translateY(-4px); box-shadow:0 0 0 3px #ffe0a2,0 7px 12px #001e2360; }
button:focus { outline:3px solid #b97742; outline-offset:3px; }
.number-card:focus { outline-color:#ffe1a0; }
.cleared-card { border:1px dashed #d9dfb835; border-radius:7px; color:#c8d7be66; display:flex; align-items:center; justify-content:center; font-size:22px; }
.grid-foot { font-size:10px; line-height:1.5; color:#c0d0bc; margin-top:16px; }
.center-area { position:absolute; width:200px; left:380px; top:86px; text-align:center; }
.table-mark { font:9px monospace; letter-spacing:.2em; color:#cbd3b580; }
.piles { display:flex; justify-content:center; margin-top:57px; }
.piles > div { margin:0 10px; }
.pile-caption { display:block; color:#cad5bf; margin-top:10px; font:10px monospace; letter-spacing:.06em; }
.held-area { margin-top:21px; }.held-area .number-card { margin:9px auto 0; }
.table-note { display:block; color:#d5dbc166; font:italic 17px/1.5 Georgia,serif; margin-top:59px; }
.action-row { width:100%; min-height:35px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; }
.action-row p { color:#526d5d; font-size:12px; text-align:center; line-height:1.5; }
button.primary { border:1px solid #2d5a48; border-radius:8px; padding:12px 20px; color:#fff9df; background:#2d5a48; }
button.primary:hover { background:#244936; }
.result { width:100%; max-width:640px; border-radius:16px; padding:24px; text-align:center; box-shadow:0 8px 24px #29473e12; }
.eyebrow { font:10px monospace; letter-spacing:.16em; text-transform:uppercase; color:#85664d; }
.result h2 { font:600 32px 'Bricolage Grotesque',system-ui,sans-serif; letter-spacing:-.03em; margin:6px 0 10px; }
.result p { font-size:14px; line-height:1.6; }
.round-scores { display:flex; justify-content:center; margin:18px 0; }.round-scores > div { padding:0 30px; font-size:12px; color:#617267; }.round-scores strong { display:block; color:#244f43; font-size:30px; margin-top:4px; }
.score-sheet,.game-overview { width:100%; border-top:1px solid #bac5b5; padding:16px 0; font-size:13px; }
summary { cursor:pointer; font-weight:600; font-size:15px; }
summary span { color:#6e7d70; font-size:12px; font-weight:400; margin-left:14px; }
.score-sheet table { border-collapse:collapse; width:100%; margin:16px 0 10px; text-align:center; font-variant-numeric:tabular-nums; }
.score-sheet th,.score-sheet td { padding:10px; border-bottom:1px solid #d5d8cb; }
.score-sheet th { font-weight:600; color:#617267; }
.score-sheet p { color:#617267; font-size:12px; }
.score-scroll { overflow:auto; }
.game-overview ol { margin:16px 0 14px 22px; }.game-overview li { padding:4px 0; line-height:1.8; }.game-overview p { line-height:1.7; margin-top:12px; }.game-overview a,.feedback-link { color:#2d624b; }.feedback-link { font-size:12px; }
@media(max-width:650px) {
 body { padding:0 0 32px; }
 .game-shell { width:calc(100% - 20px); margin-top:18px; }
 .game-shell > * + * { margin-top:10px; }
 .record { width:100%; margin-bottom:4px; text-align:center; }
 .turn-bar { padding:9px 10px; min-height:64px; }#prompt { font-size:12px; }#turnBadge { margin-right:9px; font-size:10px; }
 body[data-room="skyjo"] .table { width:520px; height:1000px; }
 body[data-room="skyjo"] .table::before { border-radius:50px; border-width:9px; }
 body[data-room="skyjo"] .table::after { border-radius:35px; inset:23px; top:23px; right:23px; bottom:23px; left:23px; }
 .computer { top:35px; right:auto; left:124px; width:272px; }.human { top:545px; left:76px; width:368px; }
 .player-name { margin-bottom:10px; font-size:16px; padding:5px 12px; }.player-name span { font-size:12px; }
 .computer .card-grid { grid-template-columns:repeat(4,62px); grid-auto-rows:84px; grid-gap:8px; }
 .computer .number-card { width:62px; height:84px; font-size:29px; }
 .human .card-grid { grid-template-columns:repeat(4,86px); grid-auto-rows:118px; grid-gap:8px; }
 .human .number-card { width:86px; height:118px; font-size:36px; }
 .grid-foot { display:none; }
 .center-area { left:47px; top:396px; width:426px; display:flex; align-items:center; justify-content:center; }
 .table-mark,.table-note { display:none; }.piles { margin:0; }.piles > div { margin:0 14px; }
 .held-area { margin:0 0 0 22px; display:flex; flex-direction:column-reverse; }.held-area .number-card { margin:0; }
 .pile-caption { font-size:12px; }.held-area .pile-caption { margin-top:10px; }
 .scorebar { gap:26px; }.result { padding:20px 14px; }summary span { display:block; margin:5px 0 0 16px; }
}
@media(prefers-reduced-motion:reduce) { .number-card { transition:none; } }