/* Jogos (UNO e Truco). The frame follows the theme through the panel tokens;
   cards, suits, teams and the two optional presentations (Boteco and Arena Pop)
   are domain colors and look the same in every theme. */
@layer tokens {
:root {
  --comp-games-backdrop: #020617bb;
  --comp-games-shadow: 0 24px 100px #0008;
  --comp-games-highlight: color-mix(in srgb, var(--comp-panel-accent) 45%, var(--comp-panel-fg));
  --comp-games-glow: color-mix(in srgb, var(--comp-panel-accent) 16%, transparent);

  /* Cards */
  --domain-card-edge: #fff;
  --domain-card-ink: white;
  --domain-card-shadow: 0 3px 10px #0004;
  --domain-card-text-shadow: 0 1px 3px #0007;
  --domain-card-back: repeating-linear-gradient(135deg,#252b43,#252b43 7px,#303754 7px,#303754 9px);
  --domain-card-back-ink: #e8edf5;
  --domain-uno-red: #b91c35;
  --domain-uno-yellow: #facc15;
  --domain-uno-green: #147344;
  --domain-uno-blue: #1d4ed8;
  --domain-uno-on-yellow: #332407;
  --domain-uno-table: radial-gradient(ellipse at center,#22c55e12,transparent 80%);
  --domain-truco-felt: radial-gradient(ellipse,#16885c24,transparent 80%);
  --domain-truco-team-0: #a78bfa;
  --domain-truco-team-1: #38bdf8;
  --domain-truco-card-face: #fffdf7;
  --domain-truco-card-ink: #222838;
  --domain-truco-card-edge: #e2e8f0;
  --domain-truco-suit-red: #b21f3c;
  --domain-truco-suit-black: #202737;

  /* Table reactions and the Truco announcements */
  --domain-table-bubble: #f8fafc;
  --domain-table-bubble-ink: #172033;
  --domain-table-bubble-shadow: 0 3px 12px #0005;
  --domain-truco-cue-edge: #f0bf6a;
  --domain-truco-cue-bg: radial-gradient(ellipse at top,#735024,#22180ff5 75%);
  --domain-truco-cue-ink: #fff2d1;
  --domain-truco-cue-shadow: 0 18px 65px #0009,0 0 30px #e6a83d33;
  --domain-truco-cue-fold-edge: #a6c2a2;
  --domain-truco-cue-fold-bg: linear-gradient(130deg,#304730,#17261ff5);
  --domain-truco-cue-9-edge: #ffb86b;
  --domain-truco-cue-9-shadow: 0 18px 65px #0009,0 0 45px #ff9d3344;
  --domain-truco-cue-12-edge: #ffdf8d;
  --domain-truco-cue-12-bg: radial-gradient(ellipse at top,#9a4225,#2c150ef5 75%);
  --domain-truco-cue-12-shadow: 0 18px 65px #0009,0 0 55px #ff9d3355;
  --domain-truco-cue-win-edge: #ffe49d;

  /* Truco Boteco */
  --domain-boteco-ink: #f4ead6;
  --domain-boteco-frame: #b68b54;
  --domain-boteco-surface: radial-gradient(ellipse at 50% 0,#8d5b2326,transparent 65%),repeating-linear-gradient(92deg,#0000 0 80px,#00000012 81px 83px),#251c17;
  --domain-boteco-shadow: 0 25px 100px #000b,inset 0 0 80px #0003;
  --domain-boteco-eyebrow: #d7bb8e;
  --domain-boteco-rule: #bd945b55;
  --domain-boteco-sign-edge: #c2945755;
  --domain-boteco-sign-bg: linear-gradient(120deg,#ae75451a,#0002);
  --domain-boteco-sign-ink: #f0ca88;
  --domain-boteco-sign-shadow: 0 2px 8px #0009;
  --domain-boteco-felt-rim: #68422a;
  --domain-boteco-felt: radial-gradient(ellipse at 50% 25%,#31674d,#173d30 80%);
  --domain-boteco-felt-shadow: inset 0 0 0 2px #b28a4e88,inset 0 0 45px #0007,0 8px 24px #0004;
  --domain-boteco-seat: #082a2044;
  --domain-boteco-seat-edge: #d2ba7f33;
  --domain-boteco-team-0: #f3c574;
  --domain-boteco-team-1: #7cdbcb;
  --domain-boteco-glow: #f3cd89;
  --domain-boteco-current-bg: #c7a05024;
  --domain-boteco-current-shadow: 0 0 20px #f3cd8922;
  --domain-boteco-responding-bg: #c7a05020;
  --domain-boteco-score-bg: linear-gradient(120deg,#22352e,#182720);
  --domain-boteco-score-frame: #735237;
  --domain-boteco-score-shadow: inset 0 0 20px #0005;
  --domain-boteco-panel-bg: #e6b76c08;
  --domain-boteco-panel-edge: #bb925955;
  --domain-boteco-highlight: #e7bb73;
  --domain-boteco-highlight-bg: #dba44818;
  --domain-boteco-highlight-shadow: 0 0 0 3px #dba44812;
  --domain-boteco-round-bg: #dba4481a;
  --domain-boteco-button: #a15b27;
  --domain-boteco-button-ink: #fff6e4;
  --domain-boteco-avatar: #9d6534;
  --domain-boteco-avatar-ring: #e6c08788;
  --domain-boteco-select: #30241b;
  --domain-boteco-card-back: repeating-linear-gradient(45deg,#62332a 0 5px,#7b4935 5px 7px);
  --domain-boteco-card-back-ink: #f8dfad;
  --domain-boteco-card-back-edge: #edd9ad;
  --domain-boteco-bubble: #ffefcf;
  --domain-boteco-bubble-ink: #352315;

  /* UNO Arena Pop */
  --domain-arena-ink: #f4f6ff;
  --domain-arena-frame: #7387ca;
  --domain-arena-surface: 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;
  --domain-arena-shadow: 0 24px 100px #000a,inset 0 0 80px #0002;
  --domain-arena-rule: #8ca0ee44;
  --domain-arena-eyebrow: #bbd1ff;
  --domain-arena-sign-edge: #8b9ff466;
  --domain-arena-sign-bg: linear-gradient(110deg,#fc5c7d15,#5279ff15 65%,#50daa012);
  --domain-arena-sign-label: #b9caef;
  --domain-arena-mark: #c0d3ff;
  --domain-arena-red: #f76683;
  --domain-arena-yellow: #ffd65c;
  --domain-arena-green: #60dfa8;
  --domain-arena-blue: #70a4ff;
  --domain-arena-dot-shadow: 0 2px 6px #0005;
  --domain-arena-seat: #111b34aa;
  --domain-arena-seat-edge: #8399d64d;
  --domain-arena-current: #9cddff;
  --domain-arena-current-shadow: 0 0 0 1px #9cddff,0 0 18px #4e9fff26;
  --domain-arena-current-bg: #294b762e;
  --domain-arena-avatar: linear-gradient(135deg,#364f9b,#804a9d);
  --domain-arena-avatar-ring: #cad7ff99;
  --domain-arena-stage-edge: #7697ef77;
  --domain-arena-stage: radial-gradient(ellipse at 15% 85%,#ed4c7620,transparent 50%),radial-gradient(ellipse at 85% 15%,#38cdbb1a,transparent 50%),#0d152bb3;
  --domain-arena-stage-shadow: inset 0 0 50px #0003,0 8px 25px #0003;
  --domain-arena-turn: #a4e8ff;
  --domain-arena-button: linear-gradient(110deg,#435ecc,#7854be);
  --domain-arena-button-edge: #c0cbff;
  --domain-arena-button-ink: #fff;
  --domain-arena-card-back: repeating-linear-gradient(135deg,#1c2b58 0 9px,#314477 9px 11px);
  --domain-arena-card-back-edge: #b3caff;
  --domain-arena-card-back-ink: #fff;
  --domain-arena-card-back-shadow: 2px 2px #ed5c89,-2px -2px #4a98ff;
  --domain-arena-playable-shadow: 0 4px 12px #0005,0 0 14px #70bfff33;
  --domain-arena-label-edge: #ffffff55;
  --domain-arena-warning-edge: #ffde82;
  --domain-arena-warning-bg: #765d192e;
  --domain-arena-warning-ink: #ffdf89;
  --domain-arena-panel-bg: #13223b44;
  --domain-arena-select: #16213c;
  --domain-arena-preference: #8edbff;
  --domain-arena-bubble: #e9f4ff;
  --domain-arena-bubble-ink: #132248;
  --domain-arena-bubble-edge: #a3ccff;
  --domain-arena-cue-edge: #adcaff;
  --domain-arena-cue-bg: radial-gradient(ellipse at top,#304c8d,#10182ff7 75%);
  --domain-arena-cue-ink: #fff;
  --domain-arena-cue-shadow: 0 18px 65px #0009,0 0 0 4px #86a9ff1a,0 0 55px #4f92ff33;
  --domain-arena-cue-title-shadow: 3px 3px #a63860,-3px -2px #3161be;
  --domain-arena-uno-title: #fff3a6;
  --domain-arena-uno-title-shadow: 3px 3px #d13e64,-3px -2px #3161be;
  --domain-arena-shock: #6abfff44;
  --domain-arena-shock-red: #f7668377;
  --domain-arena-shock-yellow: #ffd65c77;
  --domain-arena-shock-green: #60dfa877;
  --domain-arena-win-edge: #ffe596;
  --domain-arena-win-bg: radial-gradient(ellipse at top,#685138,#162045f7 80%);
  --domain-arena-badge-edge: #ffffff66;
  --domain-arena-impact-shadow: 0 4px 14px #0006;
  --domain-arena-impact-red: #cb244d;
  --domain-arena-impact-yellow: #ffdc65;
  --domain-arena-impact-on-yellow: #3d2c00;
  --domain-arena-impact-green: #147d57;
  --domain-arena-impact-blue: #2e5dbf;
}
}

@layer legacy {
.board-games { margin:auto; width:min(980px,96vw); max-width:96vw; max-height:94vh; padding:24px; box-sizing:border-box; border:1px solid var(--comp-panel-line-strong); border-radius:20px; color:var(--comp-panel-fg); background:var(--comp-panel-bg); font:14px/1.5 system-ui,sans-serif; box-shadow:var(--comp-games-shadow); overflow:auto; }
.board-games::backdrop { background:var(--comp-games-backdrop); backdrop-filter:blur(5px); }
.board-games *, .board-games *::before, .board-games *::after { box-sizing:border-box; }
/* Atmosphere area of the theme effects: their layers sit behind the content. */
.bg-stage { position:relative; isolation:isolate; }
.board-games button, .board-games input, .board-games select { font:inherit; }
.board-games button { cursor:pointer; border:1px solid var(--comp-panel-line-strong); 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:var(--comp-panel-hover); }
.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 var(--comp-panel-accent-text); outline-offset:3px; }
.board-games button.bg-primary, .bg-create button { background:var(--sys-accent-strong); color:var(--comp-panel-on-accent); border-color:var(--comp-panel-accent-text); }
.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 var(--comp-panel-line); 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(--comp-panel-muted); }
.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:var(--comp-panel-accent-text); }
.bg-create { display:flex; gap:12px; align-items:end; flex-wrap:wrap; padding:16px; background:var(--comp-panel-soft); border:1px solid var(--comp-panel-line); 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 var(--comp-panel-line-strong); border-radius:8px; padding:9px; color:inherit; background:var(--comp-panel-bg); }
.bg-table-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--comp-panel-line); }
.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 var(--comp-panel-line-strong); border-radius:12px; padding:24px; text-align:center; }
.bg-table-actions { display:flex; flex-wrap:wrap; gap:8px; }
.bg-spectating { border:1px solid var(--comp-panel-accent-line); background:var(--comp-panel-accent-tint); 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 var(--comp-panel-line); border-radius:10px; padding:10px 12px; overflow-wrap:anywhere; }
.bg-player small { font-size:11px; opacity:.75; }
.bg-player.bg-current { border-color:var(--comp-panel-accent-text); box-shadow:inset 0 0 0 1px var(--comp-panel-accent-text); background:var(--comp-panel-accent-tint); }
.bg-uno-warning { font-weight:bold; color:var(--sys-status-warning); font-size:12px; }
.bg-waiting { padding:40px 12px; text-align:center; }
.bg-waiting > span { font-size:48px; color:var(--comp-panel-accent-text); }
.bg-play-area { padding:20px 12px; border:1px solid var(--comp-panel-line); border-radius:16px; margin:12px 0 18px; background:var(--domain-uno-table); 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:var(--comp-panel-accent-text); }
.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 var(--domain-card-edge); border-radius:11px; display:flex; flex-shrink:0; flex-direction:column; align-items:center; justify-content:space-between; color:var(--domain-card-ink); box-shadow:var(--domain-card-shadow); position:relative; font-weight:700; opacity:1; }
.board-games button.bg-card:disabled { opacity:.58; }
.board-games .bg-red { background:var(--domain-uno-red); }
.board-games .bg-yellow { background:var(--domain-uno-yellow); color:var(--domain-uno-on-yellow); }
.board-games .bg-green { background:var(--domain-uno-green); }
.board-games .bg-blue { background:var(--domain-uno-blue); }
.board-games .bg-wild { background:conic-gradient(from 25deg,var(--domain-uno-red),var(--domain-uno-yellow),var(--domain-uno-green),var(--domain-uno-blue),var(--domain-uno-red)); color:var(--domain-card-ink); }
.board-games .bg-card strong { font-size:32px; line-height:1; text-shadow:var(--domain-card-text-shadow); }
.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:var(--domain-card-back); justify-content:center; }
.board-games .bg-card-back strong { transform:rotate(-20deg); font-size:26px; }
.board-games button.bg-playable { outline:2px solid var(--comp-games-highlight); 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:var(--domain-uno-red); color:var(--domain-card-ink); }.bg-color-yellow { background:var(--domain-uno-yellow); color:var(--domain-uno-on-yellow); }.bg-color-green { background:var(--domain-uno-green); color:var(--domain-card-ink); }.bg-color-blue { background:var(--domain-uno-blue); color:var(--domain-card-ink); }
.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 var(--comp-panel-accent-line); background:var(--comp-panel-accent-tint); 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:var(--domain-card-edge); color:var(--domain-card-ink); }.board-games .bg-color-choice.bg-yellow { color:var(--domain-uno-on-yellow); }
.bg-alert button { margin:5px; }
.bg-rules, .bg-events { border-top:1px solid var(--comp-panel-line); 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 var(--comp-panel-accent-text); }
.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(--comp-panel-bg); border:1px solid var(--comp-panel-line-strong); 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 var(--comp-panel-line-strong); 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:var(--domain-truco-team-0); }.tg-team-1 { border-color:var(--domain-truco-team-1); }
.tg-ready { margin:16px 0; padding:12px; border:1px solid var(--comp-panel-line); 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:var(--domain-truco-team-0); }.tg-score > .tg-team-1 { border-color:var(--domain-truco-team-1); }
.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 var(--comp-panel-line-strong); border-radius:18px; background:var(--domain-truco-felt); }
.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 var(--comp-panel-line); 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:var(--domain-truco-team-0); }.tg-person.tg-team-1 { border-top-color:var(--domain-truco-team-1); }
.tg-person small { font-size:11px; opacity:.8; }.tg-person.tg-current { outline:2px solid var(--comp-games-highlight); outline-offset:2px; background:var(--comp-panel-accent-tint); }
.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:var(--domain-truco-card-face); color:var(--domain-truco-card-ink); border-color:var(--domain-truco-card-edge); }
.board-games .tg-card.tg-red { color:var(--domain-truco-suit-red); }.board-games .tg-card.tg-black { color:var(--domain-truco-suit-black); }
.board-games .tg-card.bg-card-back { color:var(--domain-card-back-ink); background:var(--domain-card-back); 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 var(--comp-panel-accent-line); border-radius:12px; background:var(--comp-panel-accent-tint); }
.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 var(--comp-panel-accent-text); }
.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:var(--sys-accent-strong); color:var(--comp-panel-on-accent); font-size:16px; font-weight:700; border:2px solid color-mix(in srgb, var(--comp-panel-on-accent) 33%, transparent); }
.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 var(--comp-panel-line-strong); border-radius:14px; padding:14px; margin:14px 0; background:var(--comp-panel-soft); }
.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 var(--comp-panel-line); 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:var(--comp-games-highlight); background:var(--comp-panel-accent-tint); }
.tg-turn { display:flex; align-items:center; gap:14px; border:2px solid var(--comp-panel-line-strong); border-radius:14px; padding:16px; margin:16px 0; background:var(--comp-panel-soft); 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:var(--comp-games-highlight); background:var(--comp-games-glow); box-shadow:0 0 0 3px var(--comp-panel-accent-tint); }
.tg-person.tg-current { outline:3px solid var(--comp-games-highlight); outline-offset:2px; background:var(--comp-games-glow); box-shadow:0 0 20px var(--comp-games-glow); }
.tg-person.tg-responding { outline:2px dashed var(--comp-games-highlight); outline-offset:2px; background:var(--comp-games-glow); }
.tg-action-label { border-radius:12px; background:var(--sys-accent-strong); color:var(--comp-panel-on-accent); padding:3px 9px; font-size:11px; font-weight:700; }
.tg-rankings { margin-top:28px; padding-top:16px; border-top:1px solid var(--comp-panel-line-strong); }.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 var(--comp-panel-line); 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:var(--comp-panel-accent-tint); box-shadow:inset 3px 0 var(--comp-panel-accent-text); }
@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 var(--comp-panel-line-strong); 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 var(--comp-panel-line-strong); border-radius:8px; background:var(--comp-panel-bg); 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:var(--comp-panel-accent-text); }
.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:var(--domain-table-bubble); color:var(--domain-table-bubble-ink); box-shadow:var(--domain-table-bubble-shadow); 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 var(--domain-truco-cue-edge); border-radius:20px; padding:22px 18px; background:var(--domain-truco-cue-bg); color:var(--domain-truco-cue-ink); box-shadow:var(--domain-truco-cue-shadow); 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:var(--domain-truco-cue-fold-edge); background:var(--domain-truco-cue-fold-bg); }.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:var(--domain-truco-cue-9-edge); box-shadow:var(--domain-truco-cue-9-shadow); }
.tg-cue-level-12 { border:4px double var(--domain-truco-cue-12-edge); background:var(--domain-truco-cue-12-bg); box-shadow:var(--domain-truco-cue-12-shadow); }
.tg-cue-win { border:4px double var(--domain-truco-cue-win-edge); }
@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:var(--domain-boteco-ink); border-color:var(--domain-boteco-frame); background:var(--domain-boteco-surface); box-shadow:var(--domain-boteco-shadow); }
.bg-boteco .bg-eyebrow { color:var(--domain-boteco-eyebrow); }.bg-boteco .bg-heading { border-bottom-color:var(--domain-boteco-rule); }
.tg-boteco-sign { display:flex; justify-content:center; align-items:center; gap:20px; margin:20px 0; padding:16px; border:1px solid var(--domain-boteco-sign-edge); border-radius:12px; background:var(--domain-boteco-sign-bg); text-align:center; color:var(--domain-boteco-sign-ink); }
.tg-boteco-sign strong { display:block; font:700 clamp(22px,4vw,32px)/1.2 Georgia,serif; text-shadow:var(--domain-boteco-sign-shadow); }.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 var(--domain-boteco-felt-rim); background:var(--domain-boteco-felt); box-shadow:var(--domain-boteco-felt-shadow); border-radius:28px; }
.bg-boteco .tg-person { background:var(--domain-boteco-seat); border-color:var(--domain-boteco-seat-edge); }.bg-boteco .tg-person.tg-team-0 { border-top-color:var(--domain-boteco-team-0); }.bg-boteco .tg-person.tg-team-1 { border-top-color:var(--domain-boteco-team-1); }
.bg-boteco .tg-person.tg-current { background:var(--domain-boteco-current-bg); outline-color:var(--domain-boteco-glow); box-shadow:var(--domain-boteco-current-shadow); }.bg-boteco .tg-person.tg-responding { outline-color:var(--domain-boteco-glow); background:var(--domain-boteco-responding-bg); }
.bg-boteco .tg-score { background:var(--domain-boteco-score-bg); border:5px solid var(--domain-boteco-score-frame); border-radius:10px; padding:8px; box-shadow:var(--domain-boteco-score-shadow); }
.bg-boteco .tg-score strong { font-family:Georgia,serif; }.bg-boteco .tg-score > .tg-team-0 { border-color:var(--domain-boteco-team-0); }.bg-boteco .tg-score > .tg-team-1 { border-color:var(--domain-boteco-team-1); }
.bg-boteco .tg-hand-score, .bg-boteco .tg-ready { background:var(--domain-boteco-panel-bg); border-color:var(--domain-boteco-panel-edge); }
.bg-boteco .tg-turn-mine, .bg-boteco .tg-decision { background:var(--domain-boteco-highlight-bg); border-color:var(--domain-boteco-highlight); box-shadow:var(--domain-boteco-highlight-shadow); }
.bg-boteco .tg-rounds .tg-round-active { background:var(--domain-boteco-round-bg); border-color:var(--domain-boteco-highlight); }
.bg-boteco .tg-action-label, .bg-boteco button.bg-primary { background:var(--domain-boteco-button); border-color:var(--domain-boteco-highlight); color:var(--domain-boteco-button-ink); }
.bg-boteco .bg-avatar { background:var(--domain-boteco-avatar); border-color:var(--domain-boteco-avatar-ring); }.bg-boteco .tg-settings select { background:var(--domain-boteco-select); }
.bg-boteco .tg-card.bg-card-back { background:var(--domain-boteco-card-back); color:var(--domain-boteco-card-back-ink); border-color:var(--domain-boteco-card-back-edge); }
.bg-boteco button.bg-playable { outline-color:var(--domain-boteco-glow); }.bg-boteco .tg-hand-result { border-color:var(--domain-boteco-highlight); }
.bg-boteco .tg-reactions, .bg-boteco .tg-settings { border-color:var(--domain-boteco-panel-edge); }.bg-boteco .tg-bubble { background:var(--domain-boteco-bubble); color:var(--domain-boteco-bubble-ink); }
.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:var(--domain-arena-ink); border-color:var(--domain-arena-frame); background:var(--domain-arena-surface); box-shadow:var(--domain-arena-shadow); }
.bg-arena .bg-heading { border-bottom-color:var(--domain-arena-rule); }.bg-arena .bg-eyebrow { color:var(--domain-arena-eyebrow); }
.ug-arena-sign { display:flex; align-items:center; gap:16px; padding:18px 20px; margin:18px 0; border:1px solid var(--domain-arena-sign-edge); border-radius:16px; background:var(--domain-arena-sign-bg); }
.ug-arena-sign > div { flex:1; min-width:0; }.ug-arena-sign small { display:block; font-size:9px; letter-spacing:.16em; color:var(--domain-arena-sign-label); 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:var(--domain-arena-dot-shadow); }.ug-arena-dots i:nth-child(1) { background:var(--domain-arena-red); }.ug-arena-dots i:nth-child(2) { background:var(--domain-arena-yellow); }.ug-arena-dots i:nth-child(3) { background:var(--domain-arena-green); }.ug-arena-dots i:nth-child(4) { background:var(--domain-arena-blue); }.ug-arena-mark { color:var(--domain-arena-mark); font-size:32px; }
.bg-arena .bg-player { background:var(--domain-arena-seat); border-color:var(--domain-arena-seat-edge); border-radius:14px; padding:12px; }
.bg-arena .bg-player:nth-child(4n+1) { border-top:3px solid var(--domain-arena-red); }.bg-arena .bg-player:nth-child(4n+2) { border-top:3px solid var(--domain-arena-yellow); }.bg-arena .bg-player:nth-child(4n+3) { border-top:3px solid var(--domain-arena-green); }.bg-arena .bg-player:nth-child(4n) { border-top:3px solid var(--domain-arena-blue); }
.bg-arena .bg-player.bg-current { border-color:var(--domain-arena-current); box-shadow:var(--domain-arena-current-shadow); background:var(--domain-arena-current-bg); }
.bg-arena .bg-avatar { background:var(--domain-arena-avatar); border-color:var(--domain-arena-avatar-ring); }
.bg-arena .bg-play-area { border:2px solid var(--domain-arena-stage-edge); border-radius:20px; padding:24px 18px; background:var(--domain-arena-stage); box-shadow:var(--domain-arena-stage-shadow); }
.bg-arena .bg-turn { font-size:22px; letter-spacing:-.02em; }.bg-arena .bg-my-turn { color:var(--domain-arena-turn); }.bg-arena .bg-turn small { letter-spacing:0; }
.bg-arena button.bg-primary { background:var(--domain-arena-button); border-color:var(--domain-arena-button-edge); color:var(--domain-arena-button-ink); }
.bg-arena .bg-card-back { background:var(--domain-arena-card-back); border-color:var(--domain-arena-card-back-edge); }
.bg-arena .bg-card-back strong { color:var(--domain-arena-card-back-ink); text-shadow:var(--domain-arena-card-back-shadow); }
.bg-arena button.bg-playable { outline-color:var(--domain-arena-turn); box-shadow:var(--domain-arena-playable-shadow); }
.bg-arena .bg-color-label { font-weight:700; border:1px solid var(--domain-arena-label-edge); }
.bg-arena .bg-uno-warning { display:inline-flex; width:max-content; padding:3px 9px; border:1px solid var(--domain-arena-warning-edge); border-radius:10px; background:var(--domain-arena-warning-bg); color:var(--domain-arena-warning-ink); }
.bg-arena .tg-settings, .bg-arena .tg-reactions { border-color:var(--domain-arena-rule); background:var(--domain-arena-panel-bg); }.bg-arena .tg-settings select { background:var(--domain-arena-select); }
.bg-arena .tg-preferences input { accent-color:var(--domain-arena-preference); }.bg-arena .tg-bubble { background:var(--domain-arena-bubble); color:var(--domain-arena-bubble-ink); border:1px solid var(--domain-arena-bubble-edge); }
.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 var(--domain-arena-cue-edge); border-radius:22px; background:var(--domain-arena-cue-bg); color:var(--domain-arena-cue-ink); box-shadow:var(--domain-arena-cue-shadow); }
.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:var(--domain-arena-cue-title-shadow); }
.bg-arena .tg-cue-uno strong { color:var(--domain-arena-uno-title); text-shadow:var(--domain-arena-uno-title-shadow); }
.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 var(--domain-arena-shock); border-top-color:var(--domain-arena-shock-red); border-right-color:var(--domain-arena-shock-yellow); border-bottom-color:var(--domain-arena-shock-green); 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:var(--domain-arena-yellow); }.bg-arena .tg-cue-uno-win { border-color:var(--domain-arena-win-edge); background:var(--domain-arena-win-bg); }
.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 var(--domain-arena-badge-edge); 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 var(--domain-card-edge); border-radius:8px; color:var(--domain-card-edge); font-size:24px; font-weight:900; box-shadow:var(--domain-arena-impact-shadow); animation:ug-card-strike .55s ease-out both; }
.ug-impact-cards > span:nth-child(1) { background:var(--domain-arena-impact-red); transform:translateX(-72px) rotate(-24deg); }
.ug-impact-cards > span:nth-child(2) { background:var(--domain-arena-impact-yellow); color:var(--domain-arena-impact-on-yellow); transform:translateX(-24px) rotate(-8deg); animation-delay:.06s; }
.ug-impact-cards > span:nth-child(3) { background:var(--domain-arena-impact-green); transform:translateX(24px) rotate(8deg); animation-delay:.12s; }
.ug-impact-cards > span:nth-child(4) { background:var(--domain-arena-impact-blue); 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:var(--domain-arena-red); animation:ug-confetti-fall 1.8s ease-out both; }
.ug-confetti i:nth-child(4n+2) { background:var(--domain-arena-yellow); height:10px; animation-delay:.12s; }.ug-confetti i:nth-child(4n+3) { background:var(--domain-arena-green); animation-delay:.25s; }.ug-confetti i:nth-child(4n) { background:var(--domain-arena-blue); 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: var(--sys-status-danger); }
.tg-time-setting { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.tg-time-setting select { padding: 6px 10px; background: var(--comp-panel-bg); color: inherit; border: 1px solid currentColor; border-radius: 6px; }
}