.board-games { margin:auto; width:min(980px,96vw); max-width:96vw; max-height:94vh; padding:24px; box-sizing:border-box; border:1px solid #64748b66; border-radius:20px; color:var(--vscode-editor-foreground,var(--text-primary,#e8edf5)); background:var(--vscode-editor-background,var(--bg-secondary,#171b29)); font:14px/1.5 system-ui,sans-serif; box-shadow:0 24px 100px #0008; overflow:auto; }
.board-games::backdrop { background:#020617bb; backdrop-filter:blur(5px); }
.board-games *, .board-games *::before, .board-games *::after { box-sizing:border-box; }
.board-games button, .board-games input, .board-games select { font:inherit; }
.board-games button { cursor:pointer; border:1px solid #94a3b866; border-radius:9px; padding:9px 13px; color:inherit; background:transparent; line-height:1.4; }
.board-games button:not(.bg-card):not(.bg-color-choice):not(.bg-primary):hover:not(:disabled) { background-color:#94a3b824; }
.board-games button:disabled { cursor:default; opacity:.45; }
.board-games button:focus-visible, .board-games input:focus-visible, .board-games select:focus-visible, .board-games summary:focus-visible { outline:3px solid #a78bfa; outline-offset:3px; }
.board-games button.bg-primary, .bg-create button { background:#7c3aed; color:white; border-color:#a78bfa; }
.bg-heading, .bg-table-heading, .bg-hand-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.board-games .bg-heading { position:static; padding:0 0 16px; border-bottom:1px solid #94a3b833; background:transparent; }
.bg-heading h2 { margin:3px 0 0; font-size:25px; color:inherit; }
.bg-heading h2 span, .bg-hand-heading h4 span { opacity:.65; font-weight:400; }
.bg-eyebrow { font-size:10px; letter-spacing:.16em; font-weight:700; color:var(--vscode-descriptionForeground,var(--text-secondary,#a7acc0)); }
.bg-status { min-height:22px; margin:10px 0; }
.bg-status:empty { min-height:0; margin:12px 0; }
.bg-intro { padding:20px 0; }
.bg-intro h3 { margin:6px 0; font-size:26px; letter-spacing:-.03em; }
.bg-intro p, .bg-table-row p { margin:5px 0; }
.bg-pips { letter-spacing:.6em; color:#a78bfa; }
.bg-create { display:flex; gap:12px; align-items:end; flex-wrap:wrap; padding:16px; background:#94a3b80c; border:1px solid #94a3b833; border-radius:12px; margin:0 0 24px; }
.bg-create label { display:flex; gap:6px; flex-direction:column; }
.bg-create label:first-child { flex:1; min-width:160px; }
.bg-create input, .bg-create select { width:100%; border:1px solid #94a3b866; border-radius:8px; padding:9px; color:inherit; background:var(--vscode-input-background,var(--bg-secondary,#171b29)); }
.bg-table-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid #94a3b833; }
.bg-table-row > div { min-width:0; overflow-wrap:anywhere; }
.bg-table-row small, .bg-table-row p, .bg-hand-heading small { opacity:.7; }
.bg-empty { border:1px dashed #94a3b866; border-radius:12px; padding:24px; text-align:center; }
.bg-table-actions { display:flex; flex-wrap:wrap; gap:8px; }
.bg-spectating { border:1px solid #a78bfa88; background:#8b5cf616; border-radius:12px; padding:12px; font-size:13px; }
.bg-table-heading h3 { font-size:22px; margin:3px 0 14px; overflow-wrap:anywhere; }
.bg-players { display:flex; flex-wrap:wrap; gap:8px; padding:8px 0; }
.bg-player { position:relative; display:flex; flex:1 1 130px; min-width:0; flex-direction:column; gap:4px; border:1px solid #94a3b833; border-radius:10px; padding:10px 12px; overflow-wrap:anywhere; }
.bg-player small { font-size:11px; opacity:.75; }
.bg-player.bg-current { border-color:#a78bfa; box-shadow:inset 0 0 0 1px #a78bfa; background:#8b5cf612; }
.bg-uno-warning { font-weight:bold; color:#fbbf24; font-size:12px; }
.bg-waiting { padding:40px 12px; text-align:center; }
.bg-waiting > span { font-size:48px; color:#a78bfa; }
.bg-play-area { padding:20px 12px; border:1px solid #94a3b833; border-radius:16px; margin:12px 0 18px; background:radial-gradient(ellipse at center,#22c55e12,transparent 80%); text-align:center; }
.bg-turn { font-size:20px; font-weight:700; }
.bg-turn small { display:block; font-size:11px; font-weight:400; opacity:.7; margin-top:3px; }
.bg-my-turn { color:#a78bfa; }
.bg-piles { display:flex; justify-content:center; align-items:start; gap:40px; margin:20px 0; }
.bg-piles > div { display:flex; align-items:center; flex-direction:column; gap:8px; }
.bg-piles small { font-size:11px; }
.board-games .bg-card { width:88px; height:126px; padding:7px; border:3px solid #fff; border-radius:11px; display:flex; flex-shrink:0; flex-direction:column; align-items:center; justify-content:space-between; color:white; box-shadow:0 3px 10px #0004; position:relative; font-weight:700; opacity:1; }
.board-games button.bg-card:disabled { opacity:.58; }
.board-games .bg-red { background:#b91c35; }
.board-games .bg-yellow { background:#facc15; color:#332407; }
.board-games .bg-green { background:#147344; }
.board-games .bg-blue { background:#1d4ed8; }
.board-games .bg-wild { background:conic-gradient(from 25deg,#b91c35,#facc15,#147344,#1d4ed8,#b91c35); color:white; }
.board-games .bg-card strong { font-size:32px; line-height:1; text-shadow:0 1px 3px #0007; }
.board-games .bg-card small { font-size:10px; line-height:1.2; }
.bg-card-corner { align-self:start; font-size:14px; line-height:1; }
.board-games .bg-card-back { background:repeating-linear-gradient(135deg,#252b43,#252b43 7px,#303754 7px,#303754 9px); justify-content:center; }
.board-games .bg-card-back strong { transform:rotate(-20deg); font-size:26px; }
.board-games button.bg-playable { outline:2px solid #c4b5fd; outline-offset:2px; }
.board-games button.bg-playable:hover:not(:disabled) { transform:translateY(-5px); }
.bg-color-label { border-radius:12px; padding:3px 9px; }
.bg-color-red { background:#b91c35; color:white; }.bg-color-yellow { background:#facc15; color:#332407; }.bg-color-green { background:#147344; color:white; }.bg-color-blue { background:#1d4ed8; color:white; }
.bg-play-actions, .bg-color-picker > div { display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.bg-play-area:has(.bg-play-actions) { display:grid; grid-template-columns:minmax(120px,1fr) auto minmax(140px,1fr); align-items:center; gap:20px; padding:18px; }
.bg-play-area:has(.bg-play-actions) .bg-piles { margin:0; }
.bg-play-area .bg-play-actions { flex-direction:column; }
.bg-hand-heading { margin:4px 0 8px; }
.bg-hand-heading h4 { font-size:16px; margin:0; }
.bg-hand { display:flex; flex-wrap:wrap; gap:10px; padding:10px 3px 12px; }
.bg-say-uno { display:flex; align-items:center; gap:7px; padding:8px 0; }
.bg-hint { font-size:12px; opacity:.8; margin:5px 0; }
.bg-color-picker, .bg-alert { border:1px solid #a78bfa88; background:#8b5cf616; border-radius:12px; padding:14px; margin:12px 0; }
.bg-color-picker strong { display:block; text-align:center; margin-bottom:10px; }
.board-games .bg-color-choice { border-color:white; color:white; }.board-games .bg-color-choice.bg-yellow { color:#332407; }
.bg-alert button { margin:5px; }
.bg-rules, .bg-events { border-top:1px solid #94a3b833; margin-top:18px; padding-top:14px; font-size:12px; }
.bg-rules summary, .bg-events summary { cursor:pointer; font-weight:600; }
.bg-events ol { padding-left:22px; opacity:.8; }
.board-games-trigger.bg-your-turn { box-shadow:0 0 0 2px #a78bfa; }
.bg-table-filter { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.bg-table-filter select { color:inherit; background:var(--vscode-input-background,var(--bg-secondary,#171b29)); border:1px solid #94a3b866; padding:7px; border-radius:8px; }
.tg-welcome { padding:12px 0; }.tg-welcome h4 { font-size:20px; margin:8px 0; }
.tg-seats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:20px 0; }
.tg-seat { display:flex; gap:8px; flex-direction:column; min-width:0; padding:14px; border:1px solid #94a3b855; border-top:3px solid; border-radius:12px; overflow-wrap:anywhere; }
.tg-seat small { opacity:.8; }.tg-seat button { margin-top:auto; }
.tg-team-0 { border-color:#a78bfa; }.tg-team-1 { border-color:#38bdf8; }
.tg-ready { margin:16px 0; padding:12px; border:1px solid #94a3b833; border-radius:12px; }.tg-ready p { margin:0 0 10px; }
.tg-score { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin:4px 0 12px; }
.tg-score > div { display:flex; gap:12px; align-items:center; border-bottom:3px solid; padding:8px 12px; }
.tg-score > .tg-team-0 { border-color:#a78bfa; }.tg-score > .tg-team-1 { border-color:#38bdf8; }
.tg-score strong { font-size:32px; }.tg-score > small { flex-basis:100%; text-align:center; opacity:.8; }.tg-score-vs { opacity:.6; }
.tg-felt { display:grid; grid-template-columns:minmax(110px,1fr) minmax(140px,1.15fr) minmax(110px,1fr); grid-template-areas:'top top top' 'left center right' 'bottom bottom bottom'; gap:10px; padding:14px; margin:12px 0; border:1px solid #94a3b844; border-radius:18px; background:radial-gradient(ellipse,#16885c24,transparent 80%); }
.tg-top { grid-area:top; }.tg-left { grid-area:left; }.tg-right { grid-area:right; }.tg-bottom { grid-area:bottom; }
.tg-person { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:1px solid #94a3b833; border-top:3px solid; border-radius:12px; padding:10px; min-width:0; text-align:center; overflow-wrap:anywhere; }
.tg-person.tg-team-0 { border-top-color:#a78bfa; }.tg-person.tg-team-1 { border-top-color:#38bdf8; }
.tg-person small { font-size:11px; opacity:.8; }.tg-person.tg-current { outline:2px solid #c4b5fd; outline-offset:2px; background:#8b5cf616; }
.tg-no-play { font-size:11px; opacity:.6; }
.tg-top, .tg-bottom { flex-direction:row; flex-wrap:wrap; gap:10px; padding:8px; }.tg-top .tg-card, .tg-bottom .tg-card { width:42px; height:60px; padding:4px; border-width:2px; }.board-games .tg-top .tg-card strong, .board-games .tg-bottom .tg-card strong { font-size:20px; }.tg-top .tg-card small, .tg-bottom .tg-card small { display:none; }
.tg-center { grid-area:center; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; text-align:center; }
.tg-center small { font-size:11px; opacity:.8; }
.board-games .tg-card { width:72px; height:104px; background:#fffdf7; color:#222838; border-color:#e2e8f0; }
.board-games .tg-card.tg-red { color:#b21f3c; }.board-games .tg-card.tg-black { color:#202737; }
.board-games .tg-card.bg-card-back { color:#e8edf5; background:repeating-linear-gradient(135deg,#252b43,#252b43 7px,#303754 7px,#303754 9px); gap:6px; }
.board-games .tg-card strong { text-shadow:none; font-size:32px; }.board-games .tg-card.bg-card-back > span { font-size:30px; }
.tg-actions { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }
.tg-decision { padding:16px; margin:16px 0; border:1px solid #a78bfa88; border-radius:12px; background:#8b5cf616; }
.tg-decision > strong { font-size:17px; }.tg-decision p { margin:8px 0; }.tg-partner-hand { justify-content:center; }
.tg-hand-result { font-weight:600; margin:16px 0; padding:12px; border-left:3px solid #a78bfa; }
.tg-trick-cards { display:flex; flex-wrap:wrap; gap:12px; }.tg-trick-cards > div { display:flex; align-items:center; gap:6px; flex-direction:column; min-width:0; }.tg-trick-cards small { max-width:90px; overflow-wrap:anywhere; }
.bg-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.board-games .bg-avatar { display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; height:36px; border-radius:50%; overflow:hidden; background:#8b5cf6; color:#fff; font-size:16px; font-weight:700; border:2px solid #ffffff55; }
.board-games .bg-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.board-games .bg-avatar-large { width:60px; height:60px; flex-basis:60px; font-size:24px; border-width:3px; }
.tg-hand-score { border:1px solid #94a3b855; border-radius:14px; padding:14px; margin:14px 0; background:#94a3b80a; }
.tg-hand-score-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.tg-hand-score-heading > span { font-size:12px; opacity:.8; }
.tg-hand-score p { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin:12px 0; }
.tg-hand-score b { font-size:23px; padding:0 4px; }.tg-hand-score p small { opacity:.7; }
.tg-rounds { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; padding:0; }
.tg-rounds li { display:flex; flex-direction:column; gap:3px; padding:10px; border:1px solid #94a3b833; border-radius:9px; min-width:0; overflow-wrap:anywhere; }
.tg-rounds li > span { font-size:11px; opacity:.75; }.tg-rounds li > strong { font-size:12px; }
.tg-rounds .tg-round-active { border-color:#c4b5fd; background:#8b5cf61a; }
.tg-turn { display:flex; align-items:center; gap:14px; border:2px solid #94a3b855; border-radius:14px; padding:16px; margin:16px 0; background:#94a3b80a; min-width:0; overflow-wrap:anywhere; }
.tg-turn > div:last-child { min-width:0; flex:1; }.tg-turn-title { display:block; font-size:22px; line-height:1.3; }.tg-turn small { display:block; margin-top:5px; opacity:.8; }
.tg-turn-photos { display:flex; gap:6px; flex-wrap:wrap; }.tg-turn-photos:empty { display:none; }
.tg-turn-mine { border-color:#c4b5fd; background:#8b5cf624; box-shadow:0 0 0 3px #8b5cf61a; }
.tg-person.tg-current { outline:3px solid #c4b5fd; outline-offset:2px; background:#8b5cf62e; box-shadow:0 0 20px #8b5cf62a; }
.tg-person.tg-responding { outline:2px dashed #c4b5fd; outline-offset:2px; background:#8b5cf624; }
.tg-action-label { border-radius:12px; background:#6d28d9; color:#fff; padding:3px 9px; font-size:11px; font-weight:700; }
.tg-rankings { margin-top:28px; padding-top:16px; border-top:1px solid #94a3b844; }.tg-rankings h3 { margin:6px 0; }.tg-rankings h4 { font-size:17px; margin:16px 0 8px; }
.tg-ranking-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }.tg-ranking-columns > section { min-width:0; }
.tg-ranking-list { list-style:none; padding:0; margin:0; }
.tg-ranking-row { display:flex; align-items:center; gap:10px; border-bottom:1px solid #94a3b833; padding:12px 7px; border-radius:8px; }
.tg-ranking-place { flex:0 0 25px; opacity:.75; font-weight:700; }
.tg-ranking-identity { display:flex; align-items:center; gap:9px; min-width:0; flex:1; }.tg-ranking-identity > div:last-child { min-width:0; overflow-wrap:anywhere; }
.tg-ranking-photos { display:flex; flex-shrink:0; }.tg-ranking-photos .bg-avatar + .bg-avatar { margin-left:-12px; }
.tg-ranking-identity strong { font-size:13px; }.tg-ranking-identity small { display:block; font-size:11px; opacity:.75; }
.tg-ranking-points { flex-shrink:0; text-align:right; }.tg-ranking-points strong { display:block; font-size:22px; line-height:1.2; }.tg-ranking-points small { font-size:10px; opacity:.7; }
.tg-ranking-mine { background:#8b5cf618; box-shadow:inset 3px 0 #a78bfa; }
@media (max-width:700px) { .tg-ranking-columns { grid-template-columns:minmax(0,1fr); gap:0; } }
@media (max-width:400px) { .tg-rounds { gap:4px; }.tg-rounds li { padding:7px 5px; }.tg-turn { padding:12px; gap:10px; }.tg-turn-title { font-size:18px; }.tg-turn-photos { max-width:44px; }.board-games .bg-avatar-large { width:44px; height:44px; flex-basis:44px; }.tg-ranking-row { gap:6px; padding-inline:4px; }.tg-ranking-identity { gap:6px; }.tg-hand-score { padding:10px; } }
@media (max-width:600px) { .tg-seats { grid-template-columns:repeat(2,minmax(0,1fr)); }.tg-felt { grid-template-columns:repeat(3,minmax(0,1fr)); padding:8px; gap:7px; }.tg-center { gap:6px; font-size:12px; }.board-games .tg-felt .tg-card { width:48px; height:70px; padding:4px; border-width:2px; }.board-games .tg-felt .tg-card strong { font-size:24px; }.tg-felt .tg-card small { font-size:8px; }.tg-felt .bg-card-corner { font-size:12px; }.tg-score { gap:8px; }.tg-score > div { padding:6px; }.tg-person { padding:7px 4px; font-size:12px; }.tg-person .tg-no-play { display:none; }.tg-person small { font-size:10px; }.tg-seat { padding:10px; } }
@media (max-width:700px) { .bg-play-area:has(.bg-play-actions) { display:block; padding:16px 10px; }.bg-play-area:has(.bg-play-actions) .bg-piles { margin:16px 0; }.bg-play-area .bg-play-actions { flex-direction:row; } }
@media (max-width:520px) { .board-games { width:98vw; max-width:98vw; padding:16px; max-height:96vh; border-radius:12px; }.bg-heading h2 { font-size:21px; }.bg-heading > button { font-size:12px; }.bg-create { align-items:stretch; }.bg-create label:first-child { flex-basis:100%; }.bg-create button { flex:1; }.bg-intro h3 { font-size:23px; }.bg-player { flex-basis:105px; }.board-games .bg-hand .bg-card { width:66px; height:100px; }.bg-hand { gap:9px; }.board-games .bg-hand .bg-card strong { font-size:26px; }.board-games .bg-hand .bg-card small { font-size:9px; }.bg-hand-heading { gap:4px; }.bg-piles { gap:24px; } }

/* Optional presentation. Original keeps the existing board geometry and palette. */
.tg-settings, .tg-reactions { margin:12px 0; border:1px solid #94a3b844; border-radius:10px; padding:10px 12px; font-size:12px; }
.tg-settings summary, .tg-reactions summary { cursor:pointer; font-weight:600; }
.tg-settings-body { padding-top:12px; }.tg-settings-body > label { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.tg-settings select { padding:7px 10px; border:1px solid #94a3b866; border-radius:8px; background:var(--vscode-input-background,var(--bg-secondary,#171b29)); color:inherit; max-width:100%; }
.tg-preferences, .tg-reaction-buttons { display:flex; flex-wrap:wrap; gap:8px 16px; margin:12px 0 6px; }
.tg-preferences label { display:flex; align-items:center; gap:5px; }.tg-preferences input { accent-color:#a78bfa; }
.tg-reaction-buttons button { font-size:12px; padding:7px 10px; }
.tg-person, .tg-seat { position:relative; }
.tg-reaction-slot { position:absolute; z-index:2; top:6px; right:6px; max-width:min(190px,85%); pointer-events:none; }
.tg-bubble { display:block; padding:7px 10px; border-radius:12px 12px 2px 12px; background:#f8fafc; color:#172033; box-shadow:0 3px 12px #0005; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.tg-effects { position:sticky; top:12px; height:0; z-index:8; pointer-events:none; }
.tg-cue { position:absolute; top:0; left:50%; width:min(480px,94%); transform:translateX(-50%); border:2px solid #f0bf6a; border-radius:20px; padding:22px 18px; background:radial-gradient(ellipse at top,#735024,#22180ff5 75%); color:#fff2d1; box-shadow:0 18px 65px #0009,0 0 30px #e6a83d33; text-align:center; animation:tg-impact .45s both; }
.tg-cue strong { display:block; font:900 clamp(24px,6vw,46px)/1.1 system-ui,sans-serif; letter-spacing:-.03em; text-transform:uppercase; }
.tg-cue small { display:block; margin-top:10px; font-size:13px; }.tg-cue-icon { display:block; font-size:38px; margin-bottom:8px; }
.tg-cue-fold { border-color:#a6c2a2; background:linear-gradient(130deg,#304730,#17261ff5); }.tg-cue-fold .tg-cue-icon { animation:tg-chicken 1s ease-in-out both; }
.tg-cue-level-6 { border-width:3px; }.tg-cue-level-9 { border-color:#ffb86b; box-shadow:0 18px 65px #0009,0 0 45px #ff9d3344; }
.tg-cue-level-12 { border:4px double #ffdf8d; background:radial-gradient(ellipse at top,#9a4225,#2c150ef5 75%); box-shadow:0 18px 65px #0009,0 0 55px #ff9d3355; }
.tg-cue-win { border:4px double #ffe49d; }
@keyframes tg-impact { 0% { opacity:0; transform:translateX(-50%) scale(.75) rotate(-4deg); } 65% { opacity:1; transform:translateX(-50%) scale(1.04) rotate(1deg); } 100% { opacity:1; transform:translateX(-50%) scale(1) rotate(0); } }
@keyframes tg-chicken { 0% { transform:translateX(-65px) rotate(-12deg); } 50% { transform:translateX(8px) rotate(9deg); } 100% { transform:translateX(65px) rotate(-8deg); } }
.board-games.bg-boteco { color:#f4ead6; border-color:#b68b54; background:radial-gradient(ellipse at 50% 0,#8d5b2326,transparent 65%),repeating-linear-gradient(92deg,#0000 0 80px,#00000012 81px 83px),#251c17; box-shadow:0 25px 100px #000b,inset 0 0 80px #0003; }
.bg-boteco .bg-eyebrow { color:#d7bb8e; }.bg-boteco .bg-heading { border-bottom-color:#bd945b55; }
.tg-boteco-sign { display:flex; justify-content:center; align-items:center; gap:20px; margin:20px 0; padding:16px; border:1px solid #c2945755; border-radius:12px; background:linear-gradient(120deg,#ae75451a,#0002); text-align:center; color:#f0ca88; }
.tg-boteco-sign strong { display:block; font:700 clamp(22px,4vw,32px)/1.2 Georgia,serif; text-shadow:0 2px 8px #0009; }.tg-boteco-sign small { display:block; font-size:9px; letter-spacing:.18em; margin-bottom:6px; }.tg-boteco-sign > span { font-size:30px; opacity:.75; }
.bg-boteco .tg-felt { border:9px solid #68422a; background:radial-gradient(ellipse at 50% 25%,#31674d,#173d30 80%); box-shadow:inset 0 0 0 2px #b28a4e88,inset 0 0 45px #0007,0 8px 24px #0004; border-radius:28px; }
.bg-boteco .tg-person { background:#082a2044; border-color:#d2ba7f33; }.bg-boteco .tg-person.tg-team-0 { border-top-color:#f3c574; }.bg-boteco .tg-person.tg-team-1 { border-top-color:#7cdbcb; }
.bg-boteco .tg-person.tg-current { background:#c7a05024; outline-color:#f3cd89; box-shadow:0 0 20px #f3cd8922; }.bg-boteco .tg-person.tg-responding { outline-color:#f3cd89; background:#c7a05020; }
.bg-boteco .tg-score { background:linear-gradient(120deg,#22352e,#182720); border:5px solid #735237; border-radius:10px; padding:8px; box-shadow:inset 0 0 20px #0005; }
.bg-boteco .tg-score strong { font-family:Georgia,serif; }.bg-boteco .tg-score > .tg-team-0 { border-color:#f3c574; }.bg-boteco .tg-score > .tg-team-1 { border-color:#7cdbcb; }
.bg-boteco .tg-hand-score, .bg-boteco .tg-ready { background:#e6b76c08; border-color:#bb925955; }
.bg-boteco .tg-turn-mine, .bg-boteco .tg-decision { background:#dba44818; border-color:#e7bb73; box-shadow:0 0 0 3px #dba44812; }
.bg-boteco .tg-rounds .tg-round-active { background:#dba4481a; border-color:#e7bb73; }
.bg-boteco .tg-action-label, .bg-boteco button.bg-primary { background:#a15b27; border-color:#e7bb73; color:#fff6e4; }
.bg-boteco .bg-avatar { background:#9d6534; border-color:#e6c08788; }.bg-boteco .tg-settings select { background:#30241b; }
.bg-boteco .tg-card.bg-card-back { background:repeating-linear-gradient(45deg,#62332a 0 5px,#7b4935 5px 7px); color:#f8dfad; border-color:#edd9ad; }
.bg-boteco button.bg-playable { outline-color:#f3cd89; }.bg-boteco .tg-hand-result { border-color:#e7bb73; }
.bg-boteco .tg-reactions, .bg-boteco .tg-settings { border-color:#bb925955; }.bg-boteco .tg-bubble { background:#ffefcf; color:#352315; }
.bg-boteco.bg-dealing .bg-hand .tg-card { animation:tg-deal .4s ease-out both; }.bg-boteco.bg-dealing .bg-hand .tg-card:nth-child(2) { animation-delay:.08s; }.bg-boteco.bg-dealing .bg-hand .tg-card:nth-child(3) { animation-delay:.16s; }
@keyframes tg-deal { from { opacity:0; transform:translateY(-20px) rotate(-7deg); } to { opacity:1; transform:translateY(0) rotate(0); } }
.bg-reduce-motion *, .bg-reduce-motion *::before, .bg-reduce-motion *::after { animation:none !important; transition:none !important; }
@media (prefers-reduced-motion:reduce) { .tg-cue, .tg-cue-icon { animation:none !important; }.bg-boteco * { animation:none !important; transition:none !important; } }
@media (max-width:600px) { .bg-boteco .tg-felt { border-width:5px; border-radius:20px; }.tg-boteco-sign { gap:10px; padding:12px 8px; }.tg-boteco-sign small { letter-spacing:.08em; }.tg-bubble { font-size:11px; padding:5px 7px; }.tg-cue { padding:16px 12px; }.tg-cue small { font-size:12px; } }

/* Uno Arena Pop: four color spotlights, a live stage, and bounded event bursts. */
.board-games.bg-arena { color:#f4f6ff; border-color:#7387ca; background:radial-gradient(ellipse at 0 0,#e3466922,transparent 45%),radial-gradient(ellipse at 100% 0,#f5cc4220,transparent 40%),radial-gradient(ellipse at 100% 100%,#52da9520,transparent 45%),radial-gradient(ellipse at 0 100%,#488cff28,transparent 45%),#10172b; box-shadow:0 24px 100px #000a,inset 0 0 80px #0002; }
.bg-arena .bg-heading { border-bottom-color:#8ca0ee44; }.bg-arena .bg-eyebrow { color:#bbd1ff; }
.ug-arena-sign { display:flex; align-items:center; gap:16px; padding:18px 20px; margin:18px 0; border:1px solid #8b9ff466; border-radius:16px; background:linear-gradient(110deg,#fc5c7d15,#5279ff15 65%,#50daa012); }
.ug-arena-sign > div { flex:1; min-width:0; }.ug-arena-sign small { display:block; font-size:9px; letter-spacing:.16em; color:#b9caef; margin-bottom:5px; }.ug-arena-sign strong { font:900 clamp(22px,4vw,32px)/1.1 system-ui,sans-serif; letter-spacing:-.04em; }
.ug-arena-dots { display:grid; flex-shrink:0; grid-template-columns:repeat(2,12px); gap:5px; transform:rotate(-12deg); }.ug-arena-dots i { display:block; height:18px; border-radius:4px; box-shadow:0 2px 6px #0005; }.ug-arena-dots i:nth-child(1) { background:#f76683; }.ug-arena-dots i:nth-child(2) { background:#ffd65c; }.ug-arena-dots i:nth-child(3) { background:#60dfa8; }.ug-arena-dots i:nth-child(4) { background:#70a4ff; }.ug-arena-mark { color:#c0d3ff; font-size:32px; }
.bg-arena .bg-player { background:#111b34aa; border-color:#8399d64d; border-radius:14px; padding:12px; }
.bg-arena .bg-player:nth-child(4n+1) { border-top:3px solid #f76683; }.bg-arena .bg-player:nth-child(4n+2) { border-top:3px solid #ffd65c; }.bg-arena .bg-player:nth-child(4n+3) { border-top:3px solid #60dfa8; }.bg-arena .bg-player:nth-child(4n) { border-top:3px solid #70a4ff; }
.bg-arena .bg-player.bg-current { border-color:#9cddff; box-shadow:0 0 0 1px #9cddff,0 0 18px #4e9fff26; background:#294b762e; }
.bg-arena .bg-avatar { background:linear-gradient(135deg,#364f9b,#804a9d); border-color:#cad7ff99; }
.bg-arena .bg-play-area { border:2px solid #7697ef77; border-radius:20px; padding:24px 18px; background:radial-gradient(ellipse at 15% 85%,#ed4c7620,transparent 50%),radial-gradient(ellipse at 85% 15%,#38cdbb1a,transparent 50%),#0d152bb3; box-shadow:inset 0 0 50px #0003,0 8px 25px #0003; }
.bg-arena .bg-turn { font-size:22px; letter-spacing:-.02em; }.bg-arena .bg-my-turn { color:#a4e8ff; }.bg-arena .bg-turn small { letter-spacing:0; }
.bg-arena button.bg-primary { background:linear-gradient(110deg,#435ecc,#7854be); border-color:#c0cbff; color:#fff; }
.bg-arena .bg-card-back { background:repeating-linear-gradient(135deg,#1c2b58 0 9px,#314477 9px 11px); border-color:#b3caff; }
.bg-arena .bg-card-back strong { color:#fff; text-shadow:2px 2px #ed5c89,-2px -2px #4a98ff; }
.bg-arena button.bg-playable { outline-color:#a4e8ff; box-shadow:0 4px 12px #0005,0 0 14px #70bfff33; }
.bg-arena .bg-color-label { font-weight:700; border:1px solid #ffffff55; }
.bg-arena .bg-uno-warning { display:inline-flex; width:max-content; padding:3px 9px; border:1px solid #ffde82; border-radius:10px; background:#765d192e; color:#ffdf89; }
.bg-arena .tg-settings, .bg-arena .tg-reactions { border-color:#8ca0ee44; background:#13223b44; }.bg-arena .tg-settings select { background:#16213c; }
.bg-arena .tg-preferences input { accent-color:#8edbff; }.bg-arena .tg-bubble { background:#e9f4ff; color:#132248; border:1px solid #a3ccff; }
.bg-arena .tg-reaction-slot { top:8px; right:8px; max-width:90%; }
.bg-arena .tg-cue.ug-cue { overflow:hidden; isolation:isolate; width:min(520px,94%); border:2px solid #adcaff; border-radius:22px; background:radial-gradient(ellipse at top,#304c8d,#10182ff7 75%); color:#fff; box-shadow:0 18px 65px #0009,0 0 0 4px #86a9ff1a,0 0 55px #4f92ff33; }
.ug-cue > strong, .ug-cue > small, .ug-cue > .tg-cue-icon, .ug-cue-badges { position:relative; z-index:2; }
.bg-arena .ug-cue strong { font-weight:1000; font-size:clamp(40px,9vw,72px); letter-spacing:-.06em; text-shadow:3px 3px #a63860,-3px -2px #3161be; }
.bg-arena .tg-cue-uno strong { color:#fff3a6; text-shadow:3px 3px #d13e64,-3px -2px #3161be; }
.bg-arena .tg-cue-uno::before, .bg-arena .tg-cue-draw4::before { content:''; position:absolute; z-index:0; width:280px; height:280px; border:18px solid #6abfff44; border-top-color:#f7668377; border-right-color:#ffd65c77; border-bottom-color:#60dfa877; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); animation:ug-shockwave .9s ease-out both; }
.bg-arena .tg-cue-draw4 { border-color:#ffd65c; }.bg-arena .tg-cue-uno-win { border-color:#ffe596; background:radial-gradient(ellipse at top,#685138,#162045f7 80%); }
.ug-cue-badges { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:12px; }.ug-cue-badges:empty { display:none; }.ug-cue-badges > span { padding:4px 10px; border:1px solid #ffffff66; border-radius:12px; font-size:12px; font-weight:700; }
.ug-impact-cards { position:relative; height:76px; margin:4px 0 10px; z-index:1; }
.ug-impact-cards > span { position:absolute; left:calc(50% - 24px); top:0; display:flex; align-items:center; justify-content:center; width:48px; height:68px; border:2px solid #fff; border-radius:8px; color:#fff; font-size:24px; font-weight:900; box-shadow:0 4px 14px #0006; animation:ug-card-strike .55s ease-out both; }
.ug-impact-cards > span:nth-child(1) { background:#cb244d; transform:translateX(-72px) rotate(-24deg); }
.ug-impact-cards > span:nth-child(2) { background:#ffdc65; color:#3d2c00; transform:translateX(-24px) rotate(-8deg); animation-delay:.06s; }
.ug-impact-cards > span:nth-child(3) { background:#147d57; transform:translateX(24px) rotate(8deg); animation-delay:.12s; }
.ug-impact-cards > span:nth-child(4) { background:#2e5dbf; transform:translateX(72px) rotate(24deg); animation-delay:.18s; }
.ug-impact-cards + .tg-cue-icon { display:none; }
.ug-confetti { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.ug-confetti i { position:absolute; top:-20px; width:9px; height:17px; border-radius:2px; background:#f76683; animation:ug-confetti-fall 1.8s ease-out both; }
.ug-confetti i:nth-child(4n+2) { background:#ffd65c; height:10px; animation-delay:.12s; }.ug-confetti i:nth-child(4n+3) { background:#60dfa8; animation-delay:.25s; }.ug-confetti i:nth-child(4n) { background:#70a4ff; height:12px; animation-delay:.07s; }
.ug-confetti i:nth-child(1) { left:3%; }.ug-confetti i:nth-child(2) { left:9%; }.ug-confetti i:nth-child(3) { left:15%; }.ug-confetti i:nth-child(4) { left:21%; }.ug-confetti i:nth-child(5) { left:27%; }.ug-confetti i:nth-child(6) { left:33%; }.ug-confetti i:nth-child(7) { left:39%; }.ug-confetti i:nth-child(8) { left:45%; }.ug-confetti i:nth-child(9) { left:51%; }.ug-confetti i:nth-child(10) { left:57%; }.ug-confetti i:nth-child(11) { left:63%; }.ug-confetti i:nth-child(12) { left:69%; }.ug-confetti i:nth-child(13) { left:75%; }.ug-confetti i:nth-child(14) { left:81%; }.ug-confetti i:nth-child(15) { left:87%; }.ug-confetti i:nth-child(16) { left:93%; }
.bg-arena.bg-dealing .bg-hand .bg-card { animation:ug-deal .35s ease-out both; }
@keyframes ug-shockwave { from { opacity:.8; transform:translate(-50%,-50%) scale(.2) rotate(-35deg); } to { opacity:0; transform:translate(-50%,-50%) scale(1.7) rotate(25deg); } }
@keyframes ug-card-strike { from { opacity:0; scale:.3; translate:0 -50px; } to { opacity:1; scale:1; translate:0 0; } }
@keyframes ug-confetti-fall { from { translate:0 0; rotate:0deg; opacity:1; } to { translate:10px 380px; rotate:320deg; opacity:0; } }
@keyframes ug-deal { from { opacity:0; transform:translateY(18px) rotate(5deg); } to { opacity:1; transform:translateY(0) rotate(0); } }
@media (max-width:600px) { .ug-arena-sign { padding:14px 12px; gap:11px; }.ug-arena-sign small { letter-spacing:.06em; font-size:8px; }.ug-arena-mark { font-size:24px; }.bg-arena .bg-play-area { padding:16px 10px; }.bg-arena .ug-cue { padding:16px 12px; }.ug-cue-badges > span { font-size:11px; }.bg-arena .bg-player { flex-basis:120px; } }
@media (prefers-reduced-motion:reduce) { .bg-arena * { animation:none !important; transition:none !important; }.ug-confetti { display:none; } }
.bg-reduce-motion .ug-confetti { display:none; }
.tg-clock { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: 10px 14px; border: 1px solid currentColor; border-radius: 10px; }
.tg-clock-urgent { color: #e25555; }
.tg-time-setting { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.tg-time-setting select { padding: 6px 10px; background: var(--bg-secondary, #242432); color: inherit; border: 1px solid currentColor; border-radius: 6px; }