/* ============================================================ Theming. Every colour is a CSS variable; switching the data-theme attribute on re-skins the whole app. Dice stay white in all themes (constants below). ============================================================ */ :root { /* Dice are white everywhere. */ --die-face: #f7f8fc; --die-edge: #c9d2e2; --pip: #20242e; /* Fluid die size: shrinks with the viewport so six fit on one line. */ --die-size: clamp(36px, 11vw, 60px); /* Default theme: Tropical (La Reunion). */ --app-bg: radial-gradient(circle at 85% 12%, rgba(255, 210, 63, 0.6), transparent 26%), radial-gradient(circle at 12% 92%, rgba(255, 111, 94, 0.28), transparent 32%), linear-gradient(170deg, #a3e4f0 0%, #d6f3e4 50%, #fff3e0 100%); --text: #173a4a; --muted: #5b7a86; --accent: #ff6f5e; --accent-2: #119fb2; --gold: #f0941f; --danger: #e23b54; --card-bg: linear-gradient(180deg, #ffffff, #eef9fd); --card-border: #cfe9f0; --topbar-bg: rgba(255, 255, 255, 0.82); --btn-bg: #ffffff; --btn-border: #cfe9f0; --input-bg: #ffffff; --results-bg: linear-gradient(180deg, #ffffff, #eafaf1); --glow: rgba(17, 159, 178, 0.45); --surface: #ffffff; --card-blur: 0; } :root[data-theme="candy"] { --app-bg: radial-gradient(circle at 50% 50%, rgba(255, 90, 95, 0.22) 6px, transparent 7px) 0 0 / 48px 48px, radial-gradient(circle at 50% 50%, rgba(77, 139, 255, 0.2) 6px, transparent 7px) 24px 24px / 48px 48px, linear-gradient(180deg, #fff7ee, #ffeede); --text: #3a2f4a; --muted: #7c7088; --accent: #ff5a5f; --accent-2: #4d8bff; --gold: #f59e0b; --danger: #ff4757; --card-bg: #ffffff; --card-border: #ffd29e; --topbar-bg: rgba(255, 255, 255, 0.9); --btn-bg: #fff3e6; --btn-border: #ffd29e; --input-bg: #ffffff; --results-bg: #ffffff; --glow: rgba(77, 139, 255, 0.5); --surface: #ffffff; --card-blur: 0; } :root[data-theme="sunset"] { --app-bg: radial-gradient(120% 90% at 50% 0%, rgba(0, 0, 0, 0.2), transparent 55%), linear-gradient(160deg, #7b5cff 0%, #ff4d8d 52%, #ff9e3d 100%); --text: #ffffff; --muted: rgba(255, 255, 255, 0.82); --accent: #ff4d8d; --accent-2: #2fe0c4; --gold: #ffd23f; --danger: #ff5470; --card-bg: rgba(255, 255, 255, 0.14); --card-border: rgba(255, 255, 255, 0.34); --topbar-bg: rgba(40, 16, 48, 0.32); --btn-bg: rgba(255, 255, 255, 0.16); --btn-border: rgba(255, 255, 255, 0.32); --input-bg: rgba(255, 255, 255, 0.16); --results-bg: rgba(255, 255, 255, 0.14); --glow: rgba(47, 224, 196, 0.5); --surface: #4a2f8f; --card-blur: 8px; } :root[data-theme="casino"] { --app-bg: radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.1), transparent 50%), radial-gradient(140% 120% at 50% 120%, rgba(0, 0, 0, 0.45), transparent 60%), radial-gradient(circle at 50% 35%, #2aa86b, #1f8a5b 45%, #145e3e 100%); --text: #fbf3da; --muted: #cfe6d8; --accent: #e0533d; --accent-2: #f4d35e; --gold: #f4d35e; --danger: #ff6b5e; --card-bg: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.42)); --card-border: rgba(244, 211, 94, 0.5); --topbar-bg: rgba(0, 0, 0, 0.4); --btn-bg: rgba(0, 0, 0, 0.3); --btn-border: rgba(244, 211, 94, 0.4); --input-bg: rgba(0, 0, 0, 0.3); --results-bg: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.45)); --glow: rgba(244, 211, 94, 0.45); --surface: #18794f; --card-blur: 0; } :root[data-theme="midnight"] { --app-bg: radial-gradient(120% 80% at 50% -10%, rgba(76, 175, 147, 0.18), transparent 60%), radial-gradient(100% 60% at 50% 110%, rgba(224, 83, 61, 0.12), transparent 60%), linear-gradient(160deg, #1f2530, #15181f); --text: #eef1f6; --muted: #9aa3b5; --accent: #e0533d; --accent-2: #4caf93; --gold: #f4d35e; --danger: #e5564f; --card-bg: linear-gradient(180deg, #232a36, #1c222c); --card-border: #2d3543; --topbar-bg: rgba(20, 24, 31, 0.85); --btn-bg: #2d3543; --btn-border: #2d3543; --input-bg: #232a36; --results-bg: linear-gradient(180deg, #232a36, #1b212b); --glow: rgba(76, 175, 147, 0.45); --surface: #232a36; --card-blur: 0; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); line-height: 1.5; background: var(--app-bg); background-attachment: fixed; transition: color 0.3s ease; } /* ---------- Top bar ---------- */ .topbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1.5rem 1.1rem; background: var(--topbar-bg); border-bottom: 3px solid var(--gold); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32); backdrop-filter: blur(6px); } /* Twinkling marquee bulbs along the bottom edge. */ .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 8px; background: repeating-radial-gradient(circle at 7px 50%, var(--gold) 0 2.4px, transparent 3px 14px); background-size: 14px 8px; filter: drop-shadow(0 0 4px var(--glow)); animation: marquee-twinkle 1.3s ease-in-out infinite; pointer-events: none; } @keyframes marquee-twinkle { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } .topbar h1 { margin: 0; font-size: 1.45rem; letter-spacing: 0.5px; display: flex; align-items: center; gap: 0.6rem; text-shadow: 0 0 12px var(--glow), 0 2px 2px rgba(0, 0, 0, 0.35); } .brand-mark { width: 34px; height: 34px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); animation: brand-bob 3.2s ease-in-out infinite; } .brand-mark rect { fill: #f7f8fc; stroke: var(--accent); stroke-width: 3; } .brand-mark circle { fill: var(--pip); } .brand-mark .pip-hot { fill: var(--accent); } @keyframes brand-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } } .accent { color: var(--accent); } .nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .theme-pick { display: flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.85rem; } .theme-pick select { font: inherit; background: var(--input-bg); color: var(--text); border: 1px solid var(--btn-border); border-radius: 8px; padding: 0.35rem 0.5rem; cursor: pointer; } /* ---------- Buttons ---------- */ button { font: inherit; cursor: pointer; border: 1px solid var(--btn-border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.1)), var(--btn-bg); color: var(--text); padding: 0.5rem 1.05rem; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform 0.08s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } button:hover:not(:disabled) { border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 2px var(--glow); } button:active:not(:disabled) { transform: translateY(1px) scale(0.98); } button:disabled { opacity: 0.45; cursor: not-allowed; } /* Chunky, glossy casino call-to-action with a shine sweep on hover. */ button.primary { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(0, 0, 0, 0.14)), var(--accent); border: 1px solid rgba(0, 0, 0, 0.25); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 0 rgba(0, 0, 0, 0.28), 0 9px 18px rgba(0, 0, 0, 0.35); } button.primary::after { content: ""; position: absolute; top: 0; left: -65%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); transition: left 0.55s ease; pointer-events: none; } button.primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 0 rgba(0, 0, 0, 0.28), 0 12px 24px var(--glow); } button.primary:hover:not(:disabled)::after { left: 145%; } button.primary:active:not(:disabled) { transform: translateY(3px) scale(0.99); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 0 rgba(0, 0, 0, 0.28), 0 4px 10px rgba(0, 0, 0, 0.3); } /* ---------- Views ---------- */ .view { max-width: 920px; margin: 1.6rem auto; padding: 1.4rem 1.5rem 1.7rem; border: 3px solid var(--gold); border-radius: 22px; background: radial-gradient(circle at 30% 16%, rgba(255, 255, 255, 0.08), transparent 42%), radial-gradient(130% 110% at 50% 125%, rgba(0, 0, 0, 0.34), transparent 60%), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0 3px, transparent 3px 6px), var(--surface); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1), inset 0 2px 36px rgba(0, 0, 0, 0.3), 0 20px 50px rgba(0, 0, 0, 0.42); animation: view-in 0.35s ease both; } @keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .field { display: block; margin: 0.75rem 0; color: var(--muted); } .field input, .field select { display: block; margin-top: 0.25rem; padding: 0.55rem; width: 100%; max-width: 320px; background: var(--input-bg); color: var(--text); border: 1px solid var(--card-border); border-radius: 8px; } .name-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; } .error { color: var(--danger); font-weight: 600; } /* ---------- Players panel ---------- */ .players-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .player-card { position: relative; overflow: hidden; background: var(--card-bg); border: 2px solid var(--card-border); border-top: 3px solid var(--gold); border-radius: 14px; padding: 0.9rem 0.8rem 0.8rem; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12); backdrop-filter: blur(var(--card-blur)); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* Poker-chip seat avatar with the player's initial. */ .player-avatar { width: 42px; height: 42px; margin: 0 auto 0.4rem; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 1.1rem; color: #4a3500; background: radial-gradient(circle at 50% 35%, #fff3c9, var(--gold) 70%); border: 2px dashed rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 3px var(--gold), 0 0 0 4px rgba(0, 0, 0, 0.25), 0 3px 8px rgba(0, 0, 0, 0.35); } .player-card.current { border-color: var(--accent-2); transform: translateY(-2px); animation: current-glow 1.8s ease-in-out infinite; } @keyframes current-glow { 0%, 100% { box-shadow: 0 0 0 1px var(--accent-2), 0 0 14px var(--glow); } 50% { box-shadow: 0 0 0 1px var(--accent-2), 0 0 28px var(--glow); } } .player-card.eliminated { opacity: 0.5; filter: grayscale(0.6); } .player-card.hit { animation: card-shake 0.5s ease; } @keyframes card-shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-6px); } 30% { transform: translateX(5px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-2px); } } .player-name { font-weight: 600; letter-spacing: 0.3px; } .player-score { font-size: 1.9rem; font-weight: 800; color: var(--accent-2); transition: color 0.2s ease; } .player-score.bump-up { color: var(--gold); animation: bump 0.9s ease; } .player-score.bump-down { color: var(--danger); animation: bump 0.9s ease; } @keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } } .player-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--danger); font-weight: 700; } /* Rises in slowly, then stays put until the next advancing click clears it. */ .score-float { position: absolute; right: 8px; top: 6px; font-weight: 800; font-size: 1.05rem; pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); animation: float-in 0.85s cubic-bezier(0.2, 0.8, 0.3, 1.2) both; } .score-float.up { color: var(--gold); } .score-float.down { color: var(--danger); } .score-float.zero { color: var(--muted); } @keyframes float-in { 0% { opacity: 0; transform: translateY(20px) scale(0.6); } 55% { opacity: 1; transform: translateY(-3px) scale(1.25); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- Turn area & messages ---------- */ .turn-area h2 { margin-bottom: 0.25rem; } .target { color: var(--muted); margin-top: 0; } .message { min-height: 1.6rem; color: var(--accent-2); font-weight: 700; animation: msg-in 0.3s ease; } @keyframes msg-in { from { opacity: 0.3; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } /* ---------- 3D dice ---------- */ .dice-area { margin: 1rem 0; } .dice-row { margin-bottom: 1.2rem; } .dice-row-label { color: var(--muted); margin-bottom: 0.5rem; font-size: 0.9rem; letter-spacing: 0.3px; } .dice { display: flex; flex-wrap: wrap; gap: clamp(0.35rem, 1.5vw, 1rem); padding: 0.3rem; align-items: flex-start; } /* Die wrapped with its Step 1 value caption. */ .die-cell { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .die-value { font-weight: 800; font-size: 0.9rem; line-height: 1; color: var(--muted); } .die-value.pos { color: var(--accent-2); } .die-value.neg { color: var(--danger); } .step1-calc { margin-top: 0.5rem; font-weight: 800; font-size: 1.05rem; color: var(--text); } .step1-calc.pos { color: var(--accent-2); } .step1-calc.neg { color: var(--danger); } .die-scene { width: var(--die-size); height: var(--die-size); padding: 0; border: none; background: transparent; perspective: calc(var(--die-size) * 6); transition: transform 0.15s ease, filter 0.15s ease; } button.die-scene { cursor: pointer; } button.die-scene:hover:not(:disabled) { transform: translateY(-4px); box-shadow: none; } .die-scene.selected { transform: translateY(-6px); filter: drop-shadow(0 8px 10px var(--glow)); } .die-scene.kept { filter: drop-shadow(0 4px 6px rgba(244, 211, 94, 0.45)); } .die-spin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; } .die-spin.rolling { animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); animation-fill-mode: both; } .roll-v1 { animation-name: roll-v1; } .roll-v2 { animation-name: roll-v2; } .roll-v3 { animation-name: roll-v3; } @keyframes roll-v1 { from { transform: rotateX(720deg) rotateY(-540deg); } to { transform: rotateX(0) rotateY(0); } } @keyframes roll-v2 { from { transform: rotateX(-630deg) rotateY(810deg); } to { transform: rotateX(0) rotateY(0); } } @keyframes roll-v3 { from { transform: rotateX(900deg) rotateY(630deg); } to { transform: rotateX(0) rotateY(0); } } .die-cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; } .die-face { position: absolute; width: var(--die-size); height: var(--die-size); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; padding: calc(var(--die-size) * 0.13); background: radial-gradient(120% 120% at 30% 25%, #ffffff, var(--die-face) 55%, #e7ebf3); border: 1px solid var(--die-edge); border-radius: calc(var(--die-size) * 0.2); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.08); } .die-face--1 { transform: rotateY(0deg) translateZ(calc(var(--die-size) / 2)); } .die-face--2 { transform: rotateY(90deg) translateZ(calc(var(--die-size) / 2)); } .die-face--3 { transform: rotateX(90deg) translateZ(calc(var(--die-size) / 2)); } .die-face--4 { transform: rotateX(-90deg) translateZ(calc(var(--die-size) / 2)); } .die-face--5 { transform: rotateY(-90deg) translateZ(calc(var(--die-size) / 2)); } .die-face--6 { transform: rotateY(180deg) translateZ(calc(var(--die-size) / 2)); } .pip { visibility: hidden; align-self: center; justify-self: center; width: calc(var(--die-size) * 0.18); height: calc(var(--die-size) * 0.18); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a5160, var(--pip)); box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.25); } /* Pip positions per face (cells numbered 1-9, row-major). */ .die-face[data-face="1"] .pip:nth-child(5) { visibility: visible; } .die-face[data-face="2"] .pip:nth-child(1), .die-face[data-face="2"] .pip:nth-child(9) { visibility: visible; } .die-face[data-face="3"] .pip:nth-child(1), .die-face[data-face="3"] .pip:nth-child(5), .die-face[data-face="3"] .pip:nth-child(9) { visibility: visible; } .die-face[data-face="4"] .pip:nth-child(1), .die-face[data-face="4"] .pip:nth-child(3), .die-face[data-face="4"] .pip:nth-child(7), .die-face[data-face="4"] .pip:nth-child(9) { visibility: visible; } .die-face[data-face="5"] .pip:nth-child(1), .die-face[data-face="5"] .pip:nth-child(3), .die-face[data-face="5"] .pip:nth-child(5), .die-face[data-face="5"] .pip:nth-child(7), .die-face[data-face="5"] .pip:nth-child(9) { visibility: visible; } .die-face[data-face="6"] .pip:nth-child(1), .die-face[data-face="6"] .pip:nth-child(3), .die-face[data-face="6"] .pip:nth-child(4), .die-face[data-face="6"] .pip:nth-child(6), .die-face[data-face="6"] .pip:nth-child(7), .die-face[data-face="6"] .pip:nth-child(9) { visibility: visible; } .actions { display: flex; gap: 0.75rem; margin: 1.2rem 0; } /* ---------- Results & confetti ---------- */ .results { position: relative; overflow: hidden; background: var(--results-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 1.2rem 1.5rem 1.5rem; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14); backdrop-filter: blur(var(--card-blur)); } .winner-banner { font-size: 1.9rem; font-weight: 800; text-align: center; color: var(--gold); text-shadow: 0 2px 14px var(--glow); margin-bottom: 0.5rem; animation: winner-pop 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.4) both; } @keyframes winner-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } } .ranking { padding-left: 1.5rem; } .ranking li { padding: 0.25rem 0; } .ranking li:first-child { color: var(--gold); font-weight: 700; } .confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .confetti-piece { position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation-name: confetti-fall; animation-timing-function: linear; animation-iteration-count: 1; } @keyframes confetti-fall { 0% { opacity: 1; transform: translateY(-16px) rotate(0deg); } 100% { opacity: 0.9; transform: translateY(360px) rotate(540deg); } } /* ---------- History ---------- */ .history-list { display: flex; flex-direction: column; gap: 0.5rem; } .history-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; text-align: left; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 0.75rem 1rem; } .history-when { font-weight: 600; } .history-who { color: var(--muted); font-size: 0.9rem; } .history-winner { color: var(--gold); font-size: 0.9rem; font-weight: 600; } .archive-detail { margin-top: 1.5rem; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 1rem 1.5rem; } .archive-meta { color: var(--muted); } /* ---------- Rules ---------- */ .value-table { border-collapse: collapse; margin: 0.5rem 0 1rem; } .value-table th, .value-table td { border: 1px solid var(--card-border); padding: 0.4rem 0.85rem; text-align: center; } /* ---------- Scoreboard ---------- */ .scoreboard { margin-top: 1.6rem; } .scoreboard-title { margin: 0 0 0.5rem; font-size: 1.1rem; } .scoreboard-scroll { /* Grow to fit all turns; only scroll if the game gets very long. */ max-height: 70vh; overflow: auto; border: 1px solid var(--card-border); border-radius: 12px; background: var(--surface); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); -webkit-overflow-scrolling: touch; } .score-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.9rem; color: var(--text); } .score-table th, .score-table td { padding: 0.45rem 0.65rem; text-align: center; white-space: nowrap; } .score-table thead th { position: sticky; top: 0; z-index: 2; background: linear-gradient(180deg, #fff3c9, var(--gold)); color: #4a3500; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2); } .score-table .col-turn { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; color: var(--muted); font-weight: 600; box-shadow: inset -1px 0 0 var(--card-border); } .score-table thead .col-turn { z-index: 3; background: linear-gradient(180deg, #fff3c9, var(--gold)); color: #4a3500; } .score-table td.acted { font-weight: 800; } .score-table td.up { color: var(--accent-2); } .score-table td.down { color: var(--danger); } /* Per-turn change, shown smaller in parentheses next to the running score. */ .score-table .delta { font-size: 0.78em; font-weight: 700; opacity: 0.95; } .score-table .delta.up { color: var(--accent-2); } .score-table .delta.down { color: var(--danger); } .score-table .delta.zero { color: var(--muted); } .score-table tbody tr:nth-child(even) td { background: rgba(127, 127, 127, 0.08); } /* Grand total - gilded sticky footer row. */ .score-table tr.total th, .score-table tr.total td { position: sticky; bottom: 0; z-index: 2; background: linear-gradient(0deg, #fff3c9, var(--gold)); color: #4a3500; font-weight: 800; font-size: 1.02em; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.18); } .score-table tr.total .col-turn { z-index: 3; text-transform: uppercase; letter-spacing: 0.4px; } @media (max-width: 480px) { .score-table { font-size: 0.8rem; } .score-table th, .score-table td { padding: 0.35rem 0.45rem; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }