/* Visual layer only. Game rules and server messages live in the existing controllers. */
:root {
  --bg-dark: #080f12;
  --bg-surface: rgba(37, 29, 25, .94);
  --bg-surface-hover: rgba(53, 39, 29, .96);
  --text-primary: #f7f3e9;
  --text-secondary: #c6b9ab;
  --text-muted: #a59180;
  --gold: #e9c786;
  --border-glass: rgba(196, 219, 207, .13);
  --ease-table: cubic-bezier(.22, 1, .36, 1);
  --card-width: 100px;
  --card-height: 150px;
}
body { background: #080f12; }
#liquid-canvas { opacity: .42; }
.ambient-overlay {
  background: radial-gradient(ellipse at 50% 40%, transparent, #080f1280 72%),
    repeating-linear-gradient(0deg, transparent 0 79px, #adcaba04 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, #adcaba04 80px);
}
.screen-view { transition: opacity .4s ease, transform .55s var(--ease-table), visibility .4s; visibility: hidden; }
.screen-view.active { visibility: visible; }
button, [role="button"] { touch-action: manipulation; }
button:focus-visible, [role="button"]:focus-visible, a:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 5px;
}
.eyebrow { font-size: 10px; letter-spacing: .23em; font-weight: 700; color: var(--gold); }

/* Arrival and lobby */
#screen-login { overflow-y: auto; }
.login-card {
  position: relative; max-width: 520px; padding: 30px 46px; gap: 18px;
  border-radius: 28px; background: linear-gradient(145deg, #3b2b20eb, #1b1715f5 75%);
  box-shadow: inset 0 1px #ffffff12, 0 30px 90px #0008;
}
.login-logo { width: 115px !important; margin: 0; }
.login-card-fan { position: relative; height: 170px; width: 260px; perspective: 800px; margin: 0 auto; pointer-events: none; flex-shrink: 0; }
.login-card-fan > * {
  position: absolute; top: 12px; left: 80px; width: 100px; height: 150px; border-radius: 12px;
  box-shadow: 0 3px 0 #b9b9ad, 0 6px 0 #636e65, 0 22px 28px #0007;
  transform: translateX(var(--fan-x)) rotateZ(var(--fan-r)) rotateY(-12deg);
  animation: invitation-float 6s ease-in-out infinite; animation-delay: var(--fan-delay);
}
.login-card-fan > :nth-child(1) { --fan-x: -65px; --fan-r: -24deg; --fan-delay: -.8s; }
.login-card-fan > :nth-child(2) { --fan-x: 0px; --fan-r: -4deg; --fan-delay: 0s; z-index: 2; }
.login-card-fan > :nth-child(3) { --fan-x: 65px; --fan-r: 20deg; --fan-delay: -1.6s; }
@keyframes invitation-float {
  50% { transform: translateX(var(--fan-x)) translateY(-9px) rotateZ(var(--fan-r)) rotateY(8deg); }
}
.login-headline { font: 700 clamp(30px, 4vw, 42px)/1.12 var(--font-main); letter-spacing: -.035em; }
.login-headline span { color: var(--gold); }
.login-subtitle { max-width: 340px; font-size: 14px; line-height: 1.7; margin: 0; }
.btn-google-login { border-radius: 12px; min-height: 52px; box-shadow: 0 4px 0 #bbb9ac, 0 12px 24px #0003; }
.login-footnote { color: var(--text-muted); font-size: 10px; line-height: 1.6; }
#screen-lobby { padding: 30px clamp(20px, 4vw, 64px); overflow-y: auto; }
.lobby-header {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px;
  min-height: 64px;
  background: linear-gradient(145deg, rgba(47, 34, 26, 0.9), rgba(28, 23, 20, 0.94));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.lobby-intro h1 { font: 600 clamp(30px, 4vw, 46px)/1.2 var(--font-main); letter-spacing: -.03em; margin-top: 8px; }
.lobby-intro p { color: var(--text-secondary); max-width: 270px; line-height: 1.6; }
.lobby-content-grid { padding: 0; gap: 22px; }
.lobby-panel { border-radius: 20px; background: linear-gradient(145deg, #32261ff0, #1d1815f0); box-shadow: inset 0 1px #ffffff08, 0 15px 40px #0003; }
.panel-title-bar { border-color: var(--border-glass); }
.panel-heading { font-size: 17px; font-weight: 600; }
.btn-action-card { min-height: 230px; justify-content: end; padding: 26px; text-align: left; align-items: flex-start; background: radial-gradient(ellipse at top right, #d4874544, transparent 75%), #3b2a20; border-color: #b6c88b40; box-shadow: 0 6px 0 #101b18; }
.btn-action-card::before { content: '↗'; position: absolute; top: 24px; right: 24px; font: 40px var(--font-main); color: var(--gold); background: none; width: auto; height: auto; transform: none; }
.action-card-title { color: #f5e6c5; font-size: 25px; }
.btn-action-card { position: relative; }
.action-card-desc { line-height: 1.6; }
.room-item-row, .leaderboard-row { border-radius: 12px; }
.btn-join-room, .btn-modal-action.primary, .btn-start-match { background: #e4c78e; color: #1e2d28; box-shadow: 0 4px 0 #8d754b, 0 10px 22px #0003; }
.waiting-room-card, .modal-box { background: linear-gradient(145deg, #3b2b20, #1c1714); border-color: #b4cab328; box-shadow: inset 0 1px #ffffff14, 0 30px 100px #0009; }
.waiting-slot { box-shadow: inset 0 2px 12px #0003; }
.waiting-slot.occupied { box-shadow: inset 0 1px #ffffff14, 0 5px 0 #0b1717, 0 14px 20px #0003; }
.modal-box { transform: perspective(900px) translateY(28px) rotateX(-8deg) scale(.96); transition: transform .45s var(--ease-table); }
.modal-overlay.active .modal-box { transform: perspective(900px) translateY(0) rotateX(0) scale(1); }
.btn-pick-color { border: 1px solid #ffffff30; box-shadow: inset 0 2px #ffffff38, 0 5px 0 #0006, 0 14px 20px #0003; transition: transform .25s var(--ease-table), box-shadow .25s; }
.btn-pick-color:hover { transform: translateY(-4px); }

/* The scenery has its own perspective: HUD and hit targets stay in screen space. */
.game-table-stage { isolation: isolate; padding: 0; }
.table-brand-bar { position: absolute; z-index: 25; top: 22px; left: 32px; right: 32px; height: 38px; display: flex; align-items: center; gap: 18px; pointer-events: none; }
.table-brand-bar > img { width: 84px; height: auto; }
.table-brand-bar > span { font-size: 10px; letter-spacing: .22em; color: #a6b8b0; border-left: 1px solid #ffffff20; padding-left: 18px; }
.table-color-status { margin-left: auto; display: flex; align-items: center; gap: 9px; font-size: 11px; color: #c5cec8; }
.table-color-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--uno-active-color); box-shadow: 0 0 14px var(--uno-active-color); transition: background .5s; }
.table-scenery { position: absolute; inset: 0; perspective: 1100px; pointer-events: none; z-index: 0; }
.table-surface {
  position: absolute; left: 8%; top: 17%; width: 84%; height: 69%; border-radius: 48%;
  transform: rotateX(36deg); transform-style: preserve-3d;
  color: var(--uno-active-color);
  transition: color .65s ease;
  border: 14px solid color-mix(in srgb, currentColor 20%, #23242b);
  background: radial-gradient(ellipse at 50% 35%,
    color-mix(in srgb, currentColor 42%, #171b25),
    color-mix(in srgb, currentColor 29%, #121620) 58%,
    color-mix(in srgb, currentColor 18%, #0d1119));
  box-shadow: inset 0 0 0 2px #ffffff30, inset 0 0 0 8px #10121988, inset 0 0 70px #070b16a6,
    0 2px 0 #9a9baa, 0 7px 0 #1d1e26, 0 13px 0 #141720, 0 20px 0 #0b0e16,
    0 23px 0 color-mix(in srgb, currentColor 20%, #343742),
    0 48px 60px #000a, 0 65px 100px #0006;
}
.table-surface::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: .18; background: repeating-linear-gradient(0deg, transparent 0 2px, #ffffff24 3px), repeating-linear-gradient(90deg, transparent 0 2px, #080b1199 3px); }
.table-inlay { position: absolute; inset: 24px; border: 1px solid #ffffff24; border-radius: 48%; }
.table-inlay::after { content: ''; position: absolute; inset: 11px; border: 1px dashed #ffffff12; border-radius: inherit; }
.table-rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--uno-active-color); transition: color .6s ease; pointer-events: none; }
.table-rim ellipse, .table-rim path { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; }
.rim-halo { stroke-width: 12px; opacity: .4; filter: blur(7px); }
.rim-rail { stroke-width: 2px; opacity: .7; }
.rim-flow { stroke-width: 4px; stroke-linecap: round; stroke-dasharray: 65 185; filter: drop-shadow(0 0 5px currentColor); animation: rim-travel 6s linear infinite; }
.table-apron { position: absolute; left: -14px; top: -14px; width: calc(100% + 28px); height: calc(105% + 28px); overflow: visible; pointer-events: none; }
.apron-face { fill: color-mix(in srgb, currentColor 14%, #10121b); stroke: #ffffff20; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.apron-trim { fill: none; stroke: color-mix(in srgb, currentColor 40%, #525460); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.rim-chevron {
  fill: none;
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px currentColor);
  transform-origin: 0 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.table-apron.counter-clockwise .rim-chevron {
  transform: rotate(180deg);
}
.table-rim.counter-clockwise .rim-flow { animation-direction: reverse; }
.table-rim.spin-boost .rim-light { animation: rim-reverse-flash .8s ease-out; }
.screen-view:not(.active) .rim-flow { animation-play-state: paused; }
@keyframes rim-travel { to { stroke-dashoffset: -250; } }
@keyframes rim-reverse-flash { 30% { opacity: .3; } 60% { opacity: 1; filter: brightness(1.8); } }
.table-direction-label { border-left: 1px solid #ffffff25; padding-left: 10px; color: #e4dcc4; }
.audio-controls { display: flex; gap: 6px; pointer-events: auto; flex-shrink: 0; }
.btn-audio-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 11px; border: 1px solid #c4d2b52b; border-radius: 12px; background: #30251f; color: #e8dab8; cursor: pointer; font: 500 11px var(--font-body); box-shadow: inset 0 1px #ffffff08, 0 3px 0 #071710; transition: background .2s, color .2s, transform .2s; }
.btn-audio-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn-audio-toggle:hover { background: #2b4237; transform: translateY(-2px); }
.btn-audio-toggle:active { transform: translateY(1px); }
.btn-audio-toggle[aria-pressed="true"] { background: #171f20; color: #8f9c98; }
.audio-muted-slash { display: none; stroke: #ed9589; stroke-width: 2.2; }
.btn-audio-toggle[aria-pressed="true"] .audio-muted-slash { display: block; }
.waiting-header { gap: 16px; flex-wrap: wrap; }

/* The current player uses a warm highlight, distinct from the table's suit. */
.opponent-seat.active-turn, .local-player-hud.active-turn {
  background: linear-gradient(135deg, #76502f, #4a3021 65%, #32241b);
  border: 2px solid #f0d391;
  box-shadow: 0 0 0 4px #f0d39120, 0 0 36px #efca6940, 0 6px 0 #162019;
}
.opponent-seat.active-turn::after {
  content: '▼ JOGANDO AGORA'; position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  padding: 5px 9px; border-radius: 7px; background: #f0d391; color: #253021;
  font: 800 9px var(--font-body); letter-spacing: .06em; white-space: nowrap;
  box-shadow: 0 3px 15px #0005; animation: turn-label-arrive .35s var(--ease-table);
}
@keyframes turn-label-arrive { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
.opponent-seat.active-turn .hud-player-name, .local-player-hud.active-turn .hud-player-name { color: #fff5cf; font-weight: 800; }
.opponent-seat.active-turn .hud-cards-count-badge { color: #f1e7cb; }
.opponent-seat.active-turn .hud-turn-indicator-badge { display: none; }
.turn-current-player { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.turn-eyebrow { font-size: 8px; font-weight: 700; letter-spacing: .13em; color: #cfc9ae; }
.table-watermark { position: absolute; left: 50%; top: 70%; transform: translate(-50%, -50%); font: italic 800 35px var(--font-main); letter-spacing: .1em; color: #c2c79726; }
.table-watermark span { display: block; text-align: center; font: 8px var(--font-body); letter-spacing: .4em; margin-top: 4px; }
.game-event-feed { top: 77px; right: 28px; max-width: 245px; }
.event-feed-bubble { font-size: 11px; font-weight: 500; background: #2d211aeb; border-color: #c5d8c126; }
.table-center-area { top: 47%; gap: 48px; perspective: 900px; }
.direction-indicator-ring { width: 345px; height: 345px; opacity: .24; }
@keyframes rotateRingClockwise { from { transform: translate(-50%, -50%) rotateX(48deg) rotateZ(0); } to { transform: translate(-50%, -50%) rotateX(48deg) rotateZ(360deg); } }
@keyframes rotateRingCounterClockwise { from { transform: translate(-50%, -50%) rotateX(48deg) rotateZ(0); } to { transform: translate(-50%, -50%) rotateX(48deg) rotateZ(-360deg); } }
.draw-deck-container { transform: rotateX(24deg) rotateZ(-10deg); transform-style: preserve-3d; transition: transform .4s var(--ease-table); }
.draw-deck-container:hover { transform: rotateX(17deg) rotateZ(-7deg) translateY(-8px); }
.draw-deck-container:active { transform: rotateX(24deg) rotateZ(-10deg) translateY(2px); }
.deck-stack-card { background: repeating-linear-gradient(0deg, #e3e3cf 0 1px, #7b8679 1px 2px); border: 1px solid #e2e6d4; box-shadow: 0 6px 0 #a1a795, 0 9px 0 #414e43, 8px 20px 24px #0005; }
.deck-stack-card:nth-child(1) { transform: translate(0, 9px) translateZ(-6px); }
.deck-stack-card:nth-child(2) { transform: translate(0, 5px) translateZ(-3px); }
.deck-stack-card:nth-child(3) { transform: translateZ(0); }
.draw-deck-container::after { content: 'COMPRAR'; position: absolute; top: calc(100% + 24px); left: 50%; transform: translateX(-50%); color: #bccabd; font-size: 9px; font-weight: 600; letter-spacing: .22em; }
.draw-deck-container[data-draw-label]::after { content: attr(data-draw-label); white-space: nowrap; }
.draw-deck-container.draw-required { filter: drop-shadow(0 0 16px #ffe5a070); }
.draw-deck-container.draw-required::after { color: #fff0bb; background: #282719; border: 1px solid #e5c989; padding: 8px 12px; border-radius: 9px; font-size: 12px; letter-spacing: .06em; }
.discard-pile-container { transform: rotateX(24deg) rotateZ(8deg); transform-style: preserve-3d; }
.discard-pile-container::after { content: 'DESCARTE'; position: absolute; top: calc(100% + 24px); left: 50%; transform: translateX(-50%); color: #bccabd; font-size: 9px; font-weight: 600; letter-spacing: .22em; }
.discard-pile-container .uno-card { cursor: default; }
.game-timer-display { top: -85px; min-width: 180px; justify-content: space-between; padding: 10px 17px; background: #2e251df2; border: 1px solid #e0c88785; border-radius: 16px; box-shadow: 0 4px 16px #0005; }
.game-timer-display.active-turn-local { background: #503622; border-color: #f0d391; box-shadow: 0 0 0 3px #f0d39118, 0 0 24px #e8c57328; }
.game-timer-display .game-timer-player-name { color: #fff3cc; font-size: 16px; font-weight: 800; max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.game-timer-display.active-turn-local .game-timer-player-name { color: #e8d8a6; }
.game-timer-seconds { border-left: 1px solid #ffffff20; padding-left: 12px; font-variant-numeric: tabular-nums; }

/* Players float just above the edge of the table. */
.opponent-seat { gap: 9px; opacity: .85; padding: 10px 16px; border: 1px solid #d0d8bd1c; border-radius: 18px; background: linear-gradient(145deg, #243631f5, #101c1ff5); box-shadow: inset 0 1px #ffffff0a, 0 5px 0 #081310, 0 16px 25px #0004; }
.opponent-seat.top { top: 11%; flex-direction: row; }
.opponent-seat.left { top: 43%; left: 4%; flex-direction: column; }
.opponent-seat.right { top: 43%; right: 4%; flex-direction: column; }
.opponent-seat.active-turn { border-color: #f0d391; }
.opponent-seat.top.active-turn { transform: translateX(-50%); }
.opponent-seat.left.active-turn, .opponent-seat.right.active-turn { transform: translateY(-50%); }
.player-avatar-hud { width: 54px; height: 54px; flex-shrink: 0; }
.avatar-hud-img { width: 44px; height: 44px; }
.hud-player-name { background: transparent; border: 0; padding: 2px 0; backdrop-filter: none; }
.hud-cards-count-badge { background: transparent; box-shadow: none; color: #afc2b6; font-weight: 500; padding: 0; }
.hud-turn-indicator-badge { background: #e4cc91; color: #20302a; box-shadow: none; animation: none; font-size: 8px; }
.opponent-seat.active-turn .avatar-hud-img, .local-player-hud.active-turn .avatar-hud-img { border-color: #dcc996; box-shadow: 0 0 14px #dcc99633; }
.opponent-seat.active-turn .avatar-spinner-ring, .local-player-hud.active-turn .avatar-spinner-ring { border-color: #dcc99620; border-top-color: #dcc996; border-right-color: #dcc996; box-shadow: none; animation-duration: 3s; }
.avatar-turn-glow { background: radial-gradient(circle, #dcc99644, transparent 70%); }
.opponent-mini-cards { margin-top: 5px; height: 35px; perspective: 500px; }
.mini-card-back { width: 23px; height: 34px; margin-left: -12px; border: 1px solid #dfdfcd; background-image: url('../cards/uno_back_top.png'); background-size: 100% 100%; box-shadow: 0 2px #9aab96, -3px 5px 6px #0005; transform: rotateZ(var(--mini-angle, 0deg)) translateY(var(--mini-y, 0px)); transform-origin: center 150%; }

/* A stable, animated fan; the controller updates only positions and changed cards. */
.table-bottom-area { bottom: max(16px, env(safe-area-inset-bottom)); padding: 0 30px; height: 230px; align-items: flex-end; }
.local-player-hud { position: absolute; bottom: 12px; left: 30px; max-width: 205px; padding: 6px 12px; border-radius: 40px; background: #30251f; box-shadow: 0 5px 0 #0a1612, 0 12px 24px #0004; }
.local-player-hud.active-turn { border-color: #c6be8988; box-shadow: 0 5px 0 #0a1612, 0 12px 24px #0004; transform: none; }
.local-player-hud.active-turn { border-color: #f0d391; box-shadow: 0 0 0 4px #f0d39120, 0 0 30px #efca6930, 0 5px 0 #0a1612; }
.local-player-hud .player-hud-title-row { flex-wrap: wrap; }
.player-hand-viewport { position: absolute; left: max(230px, 19%); right: max(145px, 14%); bottom: 32px; height: 225px; max-width: none; margin: 0; overflow-x: auto; overflow-y: hidden; display: block; scrollbar-width: thin; scrollbar-color: #a7bb9860 transparent; overscroll-behavior-x: contain; }
.player-hand-container { display: block; margin: 0 auto; min-width: 100%; height: 100%; perspective: 1100px; }
.player-hand-container > .uno-card {
  position: absolute; left: 0; bottom: 25px; margin: 0; overflow: visible;
  transform: translate3d(var(--hand-x, 0px), var(--hand-y, 0px), 0) rotateZ(var(--hand-angle, 0deg)) rotateY(-5deg);
  transition: transform .48s var(--ease-table), opacity .2s, filter .25s, box-shadow .3s;
  z-index: var(--hand-order, 1);
}
.uno-card { border: 2px solid #eeeee0; border-radius: 10px; box-shadow: 0 2px 0 #d6d8c5, 0 4px 0 #8d9986, 0 6px 0 #414f42, 4px 16px 22px #0006; }
.uno-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 1px 1px 0 #ffffff66, inset -1px -1px 0 #0002; pointer-events: none; }
.uno-card.unplayable { filter: brightness(.78) saturate(.72); }
.card-inner-surface { border-radius: 8px; }
.card-vector-face { display: block; width: 100%; height: 100%; }
.card-gloss-highlight { opacity: .4; transform: translateX(-18%); transition: transform .6s var(--ease-table), opacity .4s; background: linear-gradient(115deg, transparent 30%, #ffffff65 43%, #ffffff0a 53%, transparent 60%); }
.player-hand-container > .uno-card:hover, .player-hand-container > .uno-card:focus-visible {
  transform: translate3d(var(--hand-x, 0px), calc(var(--hand-y, 0px) - 30px), 28px) rotateZ(0deg) rotateY(0deg) scale(1.06);
  box-shadow: 0 3px #d6d8c5, 0 5px #8d9986, 0 7px #414f42, 0 25px 30px #0007;
  z-index: 100 !important;
}
.player-hand-container > .uno-card:hover .card-gloss-highlight { transform: translateX(20%); opacity: .7; }
.player-hand-container > .uno-card.unplayable:hover { transform: translate3d(var(--hand-x, 0px), calc(var(--hand-y, 0px) - 10px), 0) rotateZ(var(--hand-angle, 0deg)); }
.player-hand-container > .uno-card.shake { animation: hand-refuse .36s ease; }
@keyframes hand-refuse { 25%, 75% { translate: -6px 0; } 50% { translate: 6px 0; } }
.hand-caption { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); text-align: center; color: #e0d4b2; font-size: 9px; letter-spacing: .2em; white-space: nowrap; }
.hand-caption span { color: #d5dfd9; letter-spacing: 0; margin-left: 10px; font-size: 10px; }
.hand-caption:has(span) { width: min(680px, calc(100vw - 28px)); white-space: normal; }
.btn-declare-uno { position: absolute; bottom: 19px; right: 35px; width: 98px; height: 70px; border-radius: 18px; background: linear-gradient(145deg, #d34735, #992b28); border: 1px solid #ffb48670; box-shadow: 0 6px 0 #5a2120, 0 18px 30px #0006; }
.btn-uno-img { width: 84%; height: 80%; filter: drop-shadow(0 3px 1px #0005); }
.btn-declare-uno.active { animation: uno-invite 2s ease-in-out infinite; }
@keyframes uno-invite { 50% { transform: translateY(-4px); } }
.flying-card-anim { transform-origin: center; transition: none; will-change: transform; }
.flying-card-anim > .uno-card { width: 100%; height: 100%; margin: 0; filter: none; animation: none; }
.flying-card-anim .card-gloss-highlight { opacity: .65; }

/* Floating UNO lettering. */
.uno-center-announcement-banner { width: min(360px, calc(100vw - 72px)); padding: 0; gap: 18px; border: 0; border-radius: 0; background: none; box-shadow: none; transform: translate(-50%, -50%) rotate(-10deg) scale(.65); transition: transform .38s var(--ease-table), opacity .3s ease; text-align: center; isolation: isolate; }
.uno-center-announcement-banner::before { content: ""; position: absolute; inset: -80px -40px; z-index: -1; background: radial-gradient(ellipse, #061019ed 12%, #06101988 40%, transparent 70%); }
.uno-center-announcement-banner.active { transform: translate(-50%, -50%) rotate(-4deg) scale(1); opacity: 1; }
.uno-center-announcement-banner.vanish { transform: translate(-50%, calc(-50% - 30px)) rotate(-4deg) scale(1.12); opacity: 0; }
.uno-announcement-eyebrow { color: #fff5db; font: 700 10px/1.4 var(--font-body); letter-spacing: .3em; text-shadow: 0 2px 8px #000; }
.uno-shout-title { display: block; width: 100%; height: auto; overflow: visible; color: #fff1be; text-shadow: none; transform: skewX(-8deg); filter: drop-shadow(0 5px 0 #bb852f) drop-shadow(0 10px 0 #67491f) drop-shadow(0 16px 14px #0009); }
.uno-shout-user { max-width: 100%; overflow-wrap: anywhere; font: 700 20px/1.4 var(--font-body); color: #fff; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; text-shadow: 0 2px 8px #000; }
.table-action-announcement { position: fixed; z-index: 1100; top: 60%; left: 50%; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 36px); box-sizing: border-box; padding: 12px 20px; border-radius: 40px; background: #0b1724ef; border: 1px solid #b8dcff60; color: #e4f3ff; box-shadow: 0 12px 32px #0007; pointer-events: none; transform: translate(-50%, -50%); animation: action-arrive .35s var(--ease-table) both; transition: opacity .3s, margin-top .3s; }
.table-action-announcement strong { display: block; font: 800 13px/1.4 var(--font-body); letter-spacing: .08em; }
.table-action-announcement .action-player { display: block; font: 500 13px/1.5 var(--font-body); overflow-wrap: anywhere; }
.action-symbol { flex: 0 0 auto; font: 800 30px/1 var(--font-body); }
.table-action-announcement.action-skip { color: #ffe1bb; border-color: #ffbd7366; }
.table-action-announcement.vanish { opacity: 0; margin-top: -16px; }
@keyframes action-arrive { from { opacity: 0; transform: translate(-50%, calc(-50% + 20px)) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.match-loading-spinner { display: none; width: 46px; height: 46px; margin-bottom: 24px; border: 3px solid #ffffff25; border-top-color: #ffe1a2; border-radius: 50%; animation: match-loading 1s linear infinite; }
.countdown-splash-overlay[data-mode="loading"] .match-loading-spinner { display: block; }
.countdown-splash-overlay[data-mode="loading"] .countdown-text { font-size: 20px; letter-spacing: .04em; text-transform: none; }
.countdown-number[hidden] { display: none; }
.countdown-splash-overlay.active { transition: none; }
@keyframes match-loading { to { transform: rotate(360deg); } }
.event-feed-bubble.uno-shout { color: #fff0c4; background: #282821ed; border-color: #e7c98070; }

@media (max-width: 1024px) {
  .lobby-content-grid { flex: none; min-height: min-content; grid-auto-rows: minmax(310px, auto); }
  .rooms-scroll-list, .leaderboard-list { max-height: 420px; }
}

@media (min-width: 1500px) {
  .table-surface { left: 13%; width: 74%; }
  .opponent-seat.left { left: 10%; } .opponent-seat.right { right: 10%; }
}
@media (max-width: 900px) {
  .table-brand-bar { gap: 10px; }
  .table-brand-bar .btn-audio-toggle { width: 38px; padding: 0; }
  .table-brand-bar .btn-audio-toggle > span { display: none; }
  .table-brand-bar { left: 20px; right: 20px; }
  .opponent-seat { padding: 8px 10px; }
  .opponent-seat.left { left: 16px; } .opponent-seat.right { right: 16px; }
  .player-hand-viewport { left: 155px; right: 115px; }
  .local-player-hud { left: 15px; max-width: 132px; gap: 6px; }
  .local-player-hud .hud-player-name { max-width: 60px; }
  .btn-declare-uno { right: 16px; width: 82px; height: 64px; }
}
@media (max-width: 600px) {
  :root { --card-width: 74px; --card-height: 111px; }
  .login-card { padding: 24px; gap: 14px; }
  .login-card-fan { height: 158px; }
  #screen-lobby { padding: 22px 16px; }
  .lobby-intro { display: block; margin: 26px 0; }
  .lobby-intro p { margin-top: 12px; font-size: 12px; }
  .lobby-panel.leaderboard { grid-column: auto; }
  .lobby-content-grid { grid-template-rows: auto; }
  .matchmaking-panel { padding: 18px; gap: 12px; }
  #btn-quick-match { min-height: 96px; padding: 16px 48px 16px 16px; justify-content: center; gap: 5px; border-radius: 13px; }
  #btn-quick-match::before { top: 16px; right: 16px; font-size: 26px; }
  #btn-quick-match .action-card-title { font-size: 19px; }
  #btn-quick-match .action-card-desc { font-size: 12px; line-height: 1.45; }
  .table-brand-bar { top: 16px; left: 16px; right: 16px; }
  .table-brand-bar > img { width: 68px; }
  .table-brand-bar > span { display: none; }
  .table-color-status { font-size: 10px; }
  .table-color-status { flex-wrap: wrap; column-gap: 6px; row-gap: 2px; max-width: 115px; }
  .table-direction-label { width: 100%; padding-left: 14px; border: 0; font-size: 9px; }
  .opponent-seat.active-turn::after { font-size: 7px; padding: 4px 6px; bottom: calc(100% + 7px); }
  .opponent-seat.left.active-turn::after { left: 0; transform: none; }
  .opponent-seat.right.active-turn::after { left: auto; right: 0; transform: none; }
  .opponent-seat.top.active-turn::after { bottom: auto; top: calc(100% + 6px); }
  .table-brand-bar .audio-controls { gap: 5px; }
  .table-brand-bar .btn-audio-toggle { width: 34px; height: 36px; }
  .table-surface { left: -18%; width: 136%; top: 23%; height: 56%; border-width: 10px; transform: rotateX(30deg); }
  .table-apron { left: -10px; top: -10px; width: calc(100% + 20px); height: calc(105% + 20px); }
  .table-watermark { top: 82%; font-size: 25px; }
  .table-inlay { inset: 14px; }
  .opponent-seat.top { top: 10%; }
  .opponent-seat.left, .opponent-seat.right { top: 31%; padding: 8px; gap: 4px; }
  .opponent-seat.left { left: 12px; } .opponent-seat.right { right: 12px; }
  .opponent-seat .hud-player-name { font-size: 11px; max-width: 74px; }
  .player-avatar-hud { width: 44px; height: 44px; }
  .avatar-hud-img { width: 36px; height: 36px; }
  .opponent-mini-cards { height: 28px; }
  .mini-card-back { width: 19px; height: 28px; margin-left: -11px; }
  .table-center-area { top: 50%; gap: 38px; }
  .direction-indicator-ring { width: 255px; height: 255px; }
  .game-timer-display { top: -66px; min-width: 165px; padding: 8px 12px; gap: 8px; }
  .game-timer-display .game-timer-player-name { font-size: 14px; max-width: 155px; }
  .turn-eyebrow { font-size: 7px; }
  .game-timer-player-name { max-width: 155px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
  .game-timer-seconds { font-size: 15px; }
  .table-bottom-area { bottom: max(10px, env(safe-area-inset-bottom)); height: 225px; }
  .player-hand-viewport { left: 12px; right: 12px; bottom: 75px; height: 174px; }
  .player-hand-container > .uno-card { bottom: 21px; }
  .local-player-hud { bottom: 0; left: 15px; max-width: 145px; padding: 4px 8px; }
  .local-player-hud .player-avatar-hud { width: 36px !important; height: 36px !important; }
  .local-player-hud .avatar-hud-img { width: 28px !important; height: 28px !important; }
  .local-player-hud .hud-player-name { max-width: 80px; font-size: 11px; }
  .hand-caption { bottom: 62px; font-size: 8px; }
  .hand-caption span { font-size: 9px; }
  .btn-declare-uno { bottom: 0; right: 16px; height: 48px; width: 76px; border-radius: 12px; }
  .game-event-feed { top: 65px; right: 12px; max-width: 150px; }
  .event-feed-bubble { padding: 7px 9px; font-size: 10px; }
  .waiting-room-card { padding: 22px; }
  .modal-box { max-width: calc(100vw - 32px); padding: 24px; }
}
@media (max-height: 600px) and (min-width: 601px) {
  :root { --card-width: 64px; --card-height: 96px; }
  .table-brand-bar { top: 12px; }
  .opponent-seat.top { top: 8px; }
  .opponent-seat.top .opponent-mini-cards { display: none; }
  .opponent-seat.left, .opponent-seat.right { top: 44%; flex-direction: row; }
  .table-center-area { top: 46%; }
  .draw-deck-container::after, .discard-pile-container::after { display: none; }
  .game-timer-display { top: -53px; padding: 5px 12px; }
  .game-timer-display .game-timer-player-name { font-size: 13px; }
  .opponent-seat.top.active-turn::after { display: none; }
  .opponent-seat.top.active-turn .hud-turn-indicator-badge { display: inline-flex; }
  .direction-indicator-ring { width: 240px; height: 220px; }
  .table-surface { top: 10%; height: 78%; }
  .table-watermark { display: none; }
  .player-hand-viewport { height: 165px; bottom: 14px; }
  .table-bottom-area { height: 170px; bottom: 8px; }
  .hand-caption { bottom: 0; }
  .game-event-feed { top: 57px; }
  .login-card-fan { display: none; }
  .uno-center-announcement-banner { width: 260px; padding: 0; gap: 8px; }
  #challenger-personal-points { bottom: 94px; right: 20px; padding: 5px 12px; }
  #challenger-personal-points strong { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Room rules and championship UI */
.mode-dialog { width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 36px); overflow: auto; box-sizing: border-box; padding: 26px; border: 1px solid #e5c98955; border-radius: 22px; background: #241c18; color: #f9edd5; box-shadow: 0 24px 90px #000a; }
.mode-dialog { margin: auto; }
.mode-dialog::backdrop { background: #030a10ba; backdrop-filter: blur(7px); }
.mode-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.mode-dialog h2 { font: 700 23px/1.2 var(--font-main); }
.mode-dialog-heading button { border: 0; background: #ffffff0d; color: #fff; border-radius: 10px; min-width: 40px; height: 40px; font-size: 26px; cursor: pointer; }
.mode-muted { color: #b3c2bb; font-size: 13px; line-height: 1.6; margin: 12px 0; }
.mode-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.mode-form-grid label { display: flex; flex-direction: column; gap: 8px; color: #ecdbb9; font-size: 13px; }
.mode-form-grid select, #ranking-kind { padding: 10px; border: 1px solid #ffffff25; border-radius: 8px; background: #191310; color: #fff; min-width: 0; font: inherit; }
.mode-check { display: flex; align-items: center; gap: 10px; margin: 14px 0; line-height: 1.5; font-size: 14px; cursor: pointer; }
.mode-check input { width: 18px; height: 18px; accent-color: #e5c989; flex-shrink: 0; }
.mode-rules-description { padding: 14px; background: #ffffff08; border-radius: 10px; color: #e5d4b2; font-size: 13px; line-height: 1.65; margin: 16px 0; }
.mode-primary-button, .mode-secondary-button { padding: 12px 16px; border-radius: 10px; font: 700 13px/1.4 var(--font-body); cursor: pointer; }
.mode-primary-button { background: #e5c989; color: #172824; border: 1px solid #e5c989; }
.mode-secondary-button { background: #3b2b20; color: #f6e4c1; border: 1px solid #e5c98955; }
.mode-primary-button:disabled { opacity: .5; cursor: wait; }
#mode-create, #setup-create, #mode-confirm-join, #mode-result-exit { width: 100%; margin-top: 12px; }
#mode-hud { position: fixed; z-index: 130; left: 20px; top: 72px; display: flex; gap: 9px; align-items: center; max-width: min(400px, calc(50vw - 130px)); padding: 9px 12px; border: 1px solid #e5c98940; border-radius: 13px; background: #291f19f5; }
#mode-hud-title { display: block; color: #ffe5b6; font-size: 12px; }
#mode-hud-status { display: block; color: #ccd7d0; font-size: 10px; line-height: 1.4; max-width: 320px; }
#mode-hud button { padding: 8px 10px; flex-shrink: 0; }
.challenger-seat-points { position: absolute; top: -12px; right: -14px; padding: 7px 10px; border-radius: 20px; background: #493322; color: #ffe5b6; border: 1px solid #e5c98988; font-size: 12px; font-weight: 700; box-shadow: 0 4px 14px #0007; }
.challenger-seat-points[hidden], #challenger-personal-points[hidden] { display: none; }
#challenger-personal-points { position: fixed; bottom: 104px; right: 28px; z-index: 125; display: flex; flex-direction: column; align-items: center; padding: 8px 16px; border: 1px solid #e5c98988; border-radius: 16px; background: #291f19f5; color: #ffe5b6; pointer-events: none; box-shadow: 0 8px 24px #0007; backdrop-filter: blur(8px); }
#challenger-personal-points span { font-size: 8px; letter-spacing: .12em; opacity: .85; }
#challenger-personal-points strong { font-size: 26px; line-height: 1.15; }
#challenger-personal-points small { font-size: 10px; color: #bccabd; }
@media (max-width: 600px) {
  #challenger-personal-points { right: 10px; bottom: 128px; padding: 5px 9px; }
  #challenger-personal-points small { display: none; }
  #challenger-personal-points strong { font-size: 22px; }
  .challenger-seat-points { right: -5px; top: -14px; padding: 4px 7px; font-size: 10px; }
  .opponent-seat.top .challenger-seat-points { right: auto; left: -5px; }
  body:has(#challenger-personal-points:not([hidden])) .hand-caption { left: 14px; transform: none; width: calc(100vw - 135px); text-align: left; }
}
#match-elapsed { color: #e0d4b2; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 600px) { #match-elapsed { font-size: 11px; } }
.challenger-help-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 4px; border: 0; background: transparent; color: #d5b48a; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.challenger-help-button:hover { color: #ffe0af; }
.challenger-help-button:focus-visible { outline: 2px solid #edc997; outline-offset: 2px; border-radius: 6px; }
.challenger-scoring { font-size: 13px; line-height: 1.65; color: #dccdbf; }
.challenger-scoring strong { color: #ffe0af; }
.challenger-scoring dl { display: grid; gap: 7px; margin: 16px 0; }
.challenger-scoring dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; background: #dba0640d; border-radius: 8px; }
.challenger-scoring dd { margin: 0; color: #ffe0af; white-space: nowrap; }
.scoring-example { border-left: 2px solid #dcaa6d; padding-left: 12px; }
.mode-score-tabs { display: flex; gap: 6px; margin: 18px 0; padding: 4px; border-radius: 12px; background: #130e0b80; }
.mode-score-tabs[hidden], #mode-panel-scores[hidden], #mode-panel-rules[hidden] { display: none; }
.mode-score-tabs button { flex: 1; border: 0; border-radius: 9px; padding: 11px 8px; background: transparent; color: #bcac9e; font: inherit; font-size: 13px; cursor: pointer; }
.mode-score-tabs button[aria-selected="true"] { background: #60412a; color: #ffe0af; }
.mode-score-tabs button:focus-visible { outline: 2px solid #edc997; outline-offset: 2px; }
.mode-score-table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 13px; }
.mode-score-table th, .mode-score-table td { text-align: left; border-bottom: 1px solid #ffffff18; padding: 12px 5px; overflow-wrap: anywhere; }
.mode-score-table th { color: #b9c5bb; font-size: 11px; }
.mode-score-table .mode-champion { color: #ffe095; background: #e5c98910; }
.mode-dialog [hidden], #mode-hud[hidden], #mode-hud [hidden], #btn-custom-match[hidden], #mode-resume[hidden], #ranking-kind[hidden] { display: none !important; }
@media (max-width: 600px) {
  .mode-dialog { padding: 20px; }
  .mode-dialog h2 { font-size: 20px; }
  .mode-form-grid { grid-template-columns: 1fr; gap: 12px; }
  #mode-hud { left: 14px; top: auto; bottom: 10px; width: calc(100vw - 28px); max-width: none; box-sizing: border-box; padding: 5px 8px; gap: 6px; }
  #mode-hud > div { flex: 1; min-width: 0; }
  #mode-hud-status { display: none; }
  #mode-hud-title { font-size: 10px; }
  #mode-hud button { padding: 6px 8px; font-size: 11px; }
  body:has(#mode-hud:not([hidden])) .table-bottom-area { bottom: 72px; }
  body:has(#mode-hud:not([hidden])) .local-player-hud { max-width: 130px; }
  .panel-title-bar:has(#ranking-kind:not([hidden])) { flex-wrap: wrap; gap: 10px; }
}


/* Warm panel surfaces and compact game controls. Table colors remain authoritative. */
.opponent-seat, .profile-dropdown { background: linear-gradient(145deg, #34281ff5, #211a16f5); border-color: #dba87333; }
.btn-audio-toggle:hover, .mode-secondary-button:hover { background: #513825; }
.mode-primary-button, .btn-start-match, .btn-join-room { background: #e6ad72; color: #281a10; }
.mode-form-grid select, #ranking-kind { border-color: #d7a37340; }
.mode-muted, .mode-score-table th { color: #bcac9e; }
.mode-dialog { border-color: #c28f5c55; }
.mode-dialog[open] { animation: mode-dialog-enter .32s cubic-bezier(.22,1,.36,1) both; }
.mode-dialog[open]::backdrop { animation: mode-backdrop-in .25s ease both; }
.mode-dialog.dialog-closing { animation: mode-dialog-exit .19s ease-in both; pointer-events: none; }
.mode-dialog.dialog-closing::backdrop { animation: mode-backdrop-out .19s ease-in both; }
@keyframes mode-dialog-enter { from { opacity: 0; transform: perspective(1000px) translateY(24px) rotateX(-5deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mode-dialog-exit { to { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes mode-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mode-backdrop-out { to { opacity: 0; } }
#mode-hud { padding: 8px 10px; gap: 12px; max-width: 300px; border-color: #c9956040; }
#mode-hud-title { display: flex; align-items: center; gap: 16px; }
.mode-metric { display: flex; flex-direction: column; gap: 2px; min-width: 36px; }
.mode-metric + .mode-metric { padding-left: 14px; border-left: 1px solid #c9956033; }
.mode-metric small { color: #bca28b; font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; }
.mode-metric b { color: #ffe0bb; font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums; }
#mode-hud-status:empty { display: none; }
#mode-hud-status:not(:empty) { margin-top: 6px; line-height: 1.5; }
#mode-score-next:empty { display: none; }
.next-round-notice { position: relative; padding: 17px 18px 22px; background: linear-gradient(110deg, #73471e55, #d8923620); border: 1px solid #dba87350; border-radius: 13px; overflow: hidden; }
.next-round-notice strong { display: block; font-size: 16px; color: #ffd3a0; }
.next-round-notice span { display: block; margin-top: 6px; font-size: 12px; color: #d6c0aa; line-height: 1.5; }
.next-round-notice i { position: absolute; bottom: 0; left: 0; width: 35%; height: 3px; background: linear-gradient(90deg, transparent, #ffc17a, transparent); animation: next-round-shimmer 2s ease-in-out infinite; }
@keyframes next-round-shimmer { from { transform: translateX(-100%); } to { transform: translateX(390%); } }
.btn-declare-uno, .btn-declare-uno.active { left: auto; right: max(145px, calc(50% - 260px)); bottom: 115px; width: 112px; height: 48px; margin: 0; padding: 5px 17px; flex-direction: column; gap: 0; border: 1px solid #ffd4a4; border-radius: 16px; background: linear-gradient(145deg, #ffc17c, #d57e38); color: #30180b; box-shadow: 0 4px 0 #88441d, 0 8px 22px #0007; transform: scale(.92); animation: none; z-index: 140; }
.btn-declare-uno.active { transform: scale(1); }
.btn-declare-uno.active:hover { transform: translateY(-3px); filter: brightness(1.08); }
.btn-declare-uno.active:active { transform: translateY(2px); box-shadow: 0 1px 0 #88441d; }
.uno-call-label { font-size: 8px; letter-spacing: .18em; font-weight: 700; }
.btn-declare-uno strong { font: 900 italic 26px/1 var(--font-main); letter-spacing: -.04em; }
@media (max-width: 600px) {
  #mode-hud { max-width: none; padding: 5px 9px; gap: 9px; }
  #mode-hud-title { gap: 10px; }
  .mode-metric { flex-direction: row; align-items: baseline; gap: 5px; min-width: 0; }
  .mode-metric + .mode-metric { padding-left: 10px; }
  .mode-metric small { font-size: 8px; }
  .mode-metric b { font-size: 14px; }
  #mode-hud-status { display: none; }
  .btn-declare-uno, .btn-declare-uno.active { right: 12px; bottom: 145px; width: 78px; height: 43px; border-radius: 14px; padding: 5px 10px; }
  .btn-declare-uno strong { font-size: 23px; }
  .next-round-notice { padding: 14px 13px 19px; }
  .next-round-notice strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mode-dialog[open], .mode-dialog[open]::backdrop, .next-round-notice i { animation: none; }
}
/* Match controls grouped by purpose: overview in header, actions by the deck. */
.table-brand-bar { pointer-events: auto; gap: 12px; }
.table-brand-bar #mode-hud { position: static; transform: none; width: auto; max-width: none; padding: 6px 10px; gap: 12px; }
.mode-clock-slot:empty { display: none; }
.mode-clock-slot { border-left: 1px solid #c9956033; padding-left: 10px; }
#challenger-personal-points { bottom: 23px; }
.opponent-seat.active-turn::after { bottom: calc(100% + 28px); }
#game-turn-label, #game-timer-player-name { display: none; }
#game-timer-display { min-width: 95px; max-width: 310px; flex-wrap: wrap; justify-content: center; gap: 8px; top: -100px; padding: 10px 14px; }
#game-timer-value { border: 0; padding: 0; font-size: 26px; }
#mode-pass { font-size: 12px; padding: 8px 14px; }
#mode-pass[hidden] { display: none !important; }
#game-timer-display #mode-hud-status { display: block; flex-basis: 100%; margin: 0; max-width: 280px; text-align: center; font-size: 11px; line-height: 1.35; color: #ebd5ba; }
#game-timer-display #mode-hud-status:empty { display: none; }
body:has(#mode-hud:not([hidden])) .table-bottom-area { bottom: max(16px, env(safe-area-inset-bottom)); }
.table-inlay { overflow: hidden; }
.table-inlay::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--uno-active-color) 18%, transparent), transparent 68%); animation: table-glow 6s ease-in-out infinite alternate; pointer-events: none; }
@keyframes table-glow { from { opacity: .3; } to { opacity: .75; } }
.table-impact { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 3; pointer-events: none; color: var(--uno-active-color); }
.table-impact-wave { position: absolute; left: 18%; top: 15%; width: 64%; height: 66%; border: 2px solid currentColor; border-radius: 50%; box-shadow: 0 0 22px currentColor, inset 0 0 18px currentColor; animation: table-impact-wave 1s ease-out both; }
@keyframes table-impact-wave { from { opacity: .85; transform: scale(.45); } to { opacity: 0; transform: scale(1.45); } }
.table-spark { position: absolute; width: 12px; height: 3px; border-radius: 50%; background: #fff5dc; box-shadow: 0 0 5px #fff, 0 0 12px currentColor, 0 0 22px currentColor; pointer-events: none; animation: table-spark-flight 1.1s cubic-bezier(.12,.6,.3,1) both; }
@keyframes table-spark-flight { 0% { opacity: 0; transform: rotate(var(--spark-angle)) scale(.5); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) rotate(var(--spark-angle)) scale(.15); } }
@media (max-width: 600px) {
  .table-brand-bar { left: 10px; right: 10px; gap: 6px; }
  .table-brand-bar > img { width: 43px; }
  .table-brand-bar #mode-hud { gap: 6px; padding: 5px 6px; }
  #mode-hud-title { gap: 6px; }
  .mode-metric { flex-direction: column; gap: 1px; }
  .mode-metric + .mode-metric { padding-left: 6px; }
  .mode-metric small { font-size: 7px; }
  .mode-metric b { font-size: 12px; }
  #mode-hud button { padding: 5px; font-size: 9px; }
  .mode-clock-slot { padding-left: 6px; }
  .table-brand-bar:has(#mode-hud:not([hidden])) .table-color-status { display: none; }
  #challenger-personal-points { bottom: 18px; right: 10px; }
  #game-timer-display { top: -105px; width: 220px; min-width: 0; padding: 8px 10px; }
  #game-timer-value { font-size: 23px; }
  .opponent-seat.active-turn::after { bottom: calc(100% + 22px); font-size: 8px; padding: 4px 6px; }
}
@media (prefers-reduced-motion: reduce) { .table-inlay::before { animation: none; } .table-impact { display: none; } }
/* The perspective table extends beyond the viewport; focusing controls must not pan the screen. */
#screen-game { overflow: clip; }