/* Uno: charcoal felt. A near-black graphite page with a faint felt grain, cream text, the seat tints through --cauldron;
   on the Dark side of Uno Flip the page goes to true black with the Dark palette's glow, and back. The cards are our own
   flat faces (UnoArt). The theme block swaps the shared tokens while the game is on screen (html.theme-uno); the rest
   is this game's own pieces, scoped under .un-* so nothing leaks into the other games' pages. */
html.theme-uno {
    color-scheme: dark;
    --bg: #1c1e23;
    --panel: #26292f;
    --panel-2: #2e3138;
    --panel-3: #383c44;
    --line: #444851;
    --text: #f3ecdc;
    --muted: #a8a99f;
    --accent: #f2c233;
    --accent-2: #f7d76e;
    --accent-dark: #b88d14;
    --accent-text: #1c1606;
    --parch: #f3ecdc;
    --parch-2: #e4d8bd;
    --parch-ink: #1c1606;
    --danger: #ff6b5e;
    --ok: #4fd18b;
    --shadow: 0 10px 30px rgba(0, 0, 0, .5);
    --display: "Fredoka", "Nunito", "Segoe UI", sans-serif;
    --body: "Nunito", "Segoe UI", system-ui, sans-serif;
    --un-gold: #f2c233;
}
html.theme-uno body {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, .07), transparent 60%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .015) 0 2px, transparent 2px 5px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 6px),
        var(--bg);
    background-attachment: fixed;
}
html.theme-uno .topbar .round { color: var(--accent-2); }
html.theme-uno .btn { border-radius: 14px; font-family: var(--display); font-weight: 600; letter-spacing: .01em; }
html.theme-uno .btn.primary { box-shadow: 0 4px 0 var(--accent-dark); border-color: var(--accent-dark); }
html.theme-uno .btn.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-dark); }
html.theme-uno .btn.icon, html.theme-uno .btn.small { font-family: var(--body); }
html.theme-uno .pill.brewing { background: var(--accent); color: var(--accent-text); border-color: var(--accent-dark); }
html.theme-uno .sheet-backdrop.see-through { background: transparent; }
html.theme-uno .standings li.place-1 { color: var(--accent-2); }

/* The Dark side: the felt goes black round the page (a full-bleed shadow, which takes no room), with the Dark
   palette glowing at the top. */
.un-page { transition: background-color .9s ease, box-shadow .9s ease; }
.un-page.dark {
    background:
        radial-gradient(ellipse at 15% -8%, rgba(236, 95, 163, .22), transparent 55%),
        radial-gradient(ellipse at 90% -5%, rgba(43, 179, 168, .2), transparent 55%),
        #050507;
    box-shadow: 0 0 0 100vmax #050507;
}
.un-page.dark .topbar .round { color: #ffa3d6; }

/* ---- a card: the SVG face, sized by its font-size (3.75em wide, 5:7) */
.un-card {
    position: relative; display: inline-block; flex: none; vertical-align: middle;
    width: 3.75em; aspect-ratio: 60 / 84; border-radius: .4em; font-size: 1rem;
    filter: drop-shadow(0 .12em .2em rgba(0, 0, 0, .5));
    transition: transform .18s ease, opacity .2s, filter .2s;
}
.un-card svg { display: block; width: 100%; height: 100%; }
.un-card.xs { font-size: 6.5px; }
.un-card.sm { font-size: 10px; }
.un-card.md { font-size: 15px; }
.un-card.lg { font-size: 22px; }
.un-card.xl { font-size: 32px; }
.un-card.fresh { animation: un-flipin .45s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes un-flipin { from { transform: perspective(300px) rotateY(90deg) translateY(-.5em); opacity: .2; } to { transform: none; opacity: 1; } }

/* ---- the page: one column the height of the screen; only the fan scrolls (sideways) */
.un-page.game-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; padding: .6rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px)); }
.un-page.game-page > * { flex: none; }
.un-page.game-page > .un-piles { flex: 1 1 auto; min-height: 0; }
.un-page.game-page.done { height: auto; min-height: 100dvh; overflow: visible; }
.un-page.game-page .topbar { margin-bottom: .45rem; }

/* ---- the chips: a grid of equal cells, one row to five, two from six */
.un-chips { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: .3rem; }
.un-chip {
    position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .05rem .2rem;
    padding: .25rem .4rem; border-radius: 10px; font-size: .82rem; min-width: 0;
    background: color-mix(in srgb, var(--panel) 85%, var(--cauldron) 15%); border: 2px solid color-mix(in srgb, var(--cauldron) 45%, var(--line));
    transition: box-shadow .3s, border-color .3s, transform .2s;
}
.un-chip .name { display: flex; align-items: center; gap: .2rem; min-width: 0; grid-column: 1 / -1; color: var(--seat-text, var(--text)); }
.un-chip .name .ico.seat { width: 1rem; height: 1rem; flex: none; color: var(--cauldron); }
.un-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.un-chip .score { font-family: var(--display); font-size: .95rem; color: var(--accent-2); grid-row: 2; grid-column: 2; }
.un-chip .count { grid-row: 2; grid-column: 1; display: inline-flex; align-items: center; gap: .2rem; color: var(--muted); white-space: nowrap; }
.un-chip .count b { color: var(--text); font-family: var(--display); font-size: 1rem; }
.un-mini { display: inline-block; width: .55rem; height: .78rem; border-radius: 2px; background: linear-gradient(135deg, #e3362b 0 25%, #f2c233 25% 50%, #3ba55d 50% 75%, #2f6fd6 75%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.un-page.dark .un-mini { background: linear-gradient(135deg, #ec5fa3 0 25%, #f08a24 25% 50%, #2bb3a8 50% 75%, #8a4fc4 75%); }
.un-chip .flag { position: absolute; top: -.5rem; right: -.2rem; background: var(--un-gold); color: #1c1606; font-family: var(--display); font-weight: 700; font-size: .68rem; padding: 0 .35rem; border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); letter-spacing: .04em; }
.un-chip .dealer { position: absolute; bottom: -.4rem; right: .3rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--panel-3); color: var(--muted); font-size: .6rem; font-weight: 800; display: grid; place-items: center; border: 1px solid var(--line); }
.un-chip.me { background: color-mix(in srgb, var(--panel-2) 80%, var(--cauldron) 20%); }
.un-chip.on { border-color: var(--cauldron); box-shadow: 0 0 0 2px var(--cauldron), 0 0 16px color-mix(in srgb, var(--cauldron) 70%, transparent); }
.un-chip.wait { border-style: dashed; border-color: var(--cauldron); animation: un-wait 1.6s ease-in-out infinite; }
.un-chip.catchable { animation: un-catchable .8s ease-in-out infinite alternate; }
.un-chip.called { border-color: var(--un-gold); }
.un-chip.mood-play { animation: un-lift .5s ease both; }
.un-chip.mood-draw .count b { animation: un-bump .5s ease both; display: inline-block; }
.un-chip.mood-skip::after, .un-chip.mood-skipall::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
    background: linear-gradient(135deg, transparent 46%, rgba(255, 107, 94, .9) 47% 53%, transparent 54%); animation: un-slash .45s ease-out both; }
.un-chip.mood-uno { animation: un-uno .9s ease both; }
.un-chip.mood-caught { animation: un-caught .7s ease both; }
.un-chip.mood-out { box-shadow: 0 0 0 3px var(--un-gold), 0 0 26px rgba(242, 194, 51, .7); }
.un-chip.mood-verdict { animation: un-shake .5s ease both; }
.un-chip.mood-swap { animation: un-lift .6s ease both; }
@keyframes un-wait { 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cauldron) 50%, transparent); } }
@keyframes un-catchable { from { box-shadow: 0 0 0 2px rgba(255, 107, 94, .4); } to { box-shadow: 0 0 0 3px rgba(255, 107, 94, .95), 0 0 14px rgba(255, 107, 94, .6); } }
@keyframes un-lift { 0% { transform: none; } 35% { transform: translateY(-4px) scale(1.04); } 100% { transform: none; } }
@keyframes un-bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); color: var(--accent-2); } 100% { transform: scale(1); } }
@keyframes un-slash { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes un-uno { 0% { box-shadow: 0 0 0 0 rgba(242, 194, 51, .9); } 60% { box-shadow: 0 0 0 8px rgba(242, 194, 51, 0); } 100% { box-shadow: none; } }
@keyframes un-caught { 0%, 100% { background: color-mix(in srgb, var(--panel) 85%, var(--cauldron) 15%); } 30%, 70% { background: #8f2a22; } }
@keyframes un-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }

/* ---- the piles */
.un-piles { display: flex; align-items: center; justify-content: center; gap: 1.1rem; padding: .4rem 0; min-height: 8.5rem; }
.un-draw, .un-discard { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.un-drawcount { position: absolute; bottom: -.55rem; left: 50%; transform: translateX(-50%); z-index: 1; background: rgba(0, 0, 0, .75); color: var(--text); border-radius: 999px; padding: 0 .45rem; font-family: var(--display); font-size: .9rem; }
.un-stack { position: absolute; inset: 0; pointer-events: none; }
.un-stack i { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 60 / 84; border-radius: .4rem; background: #2c2f36; border: 1px solid rgba(255, 255, 255, .12); }
.un-stack i:nth-child(1) { transform: translate(3px, 3px); }
.un-stack i:nth-child(2) { transform: translate(5px, 5px); }
.un-stack i:nth-child(3) { transform: translate(7px, 7px); }
.un-stack i:nth-child(4) { transform: translate(9px, 9px); }
.un-discard .un-stack i { background: #3a3d45; }
.un-discard .un-card.top { box-shadow: 0 0 0 4px var(--ring), 0 0 22px color-mix(in srgb, var(--ring) 65%, transparent); border-radius: .45em; transition: box-shadow .6s ease; }
.un-discard .un-card.top.fresh { animation: un-land .42s cubic-bezier(.2, .8, .3, 1.15) both; }
.un-colour { font-family: var(--display); font-weight: 700; color: var(--ring); text-transform: capitalize; font-size: .95rem; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.un-colour.none { color: var(--muted); }
.un-dir { display: flex; flex-direction: column; align-items: center; color: var(--muted); gap: .1rem; }
.un-dir svg { width: 2.6rem; height: 2.6rem; transition: transform .5s ease; }
.un-dir.ccw svg { transform: scaleX(-1); }
.un-dir small { font-size: .72rem; white-space: nowrap; }
.un-piles.reversed .un-dir svg { animation: un-spin .8s ease both; }
.un-piles.reshuffled .un-draw .un-card { animation: un-flipin .6s ease both; }
.un-piles.flipped .un-draw .un-card, .un-piles.flipped .un-discard .un-card { animation: un-turn .9s ease both; }
.un-piles.drawn .un-draw .un-card { animation: un-nudge .4s ease both; }
@keyframes un-land { from { transform: translateY(-2.2rem) rotate(-10deg) scale(1.15); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes un-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes un-turn { 0% { transform: perspective(400px) rotateY(0); } 50% { transform: perspective(400px) rotateY(90deg); } 100% { transform: perspective(400px) rotateY(0); } }
@keyframes un-nudge { 40% { transform: translateX(6px) rotate(4deg); } }

/* ---- the status row and the fan */
.un-status-row { min-height: 2.6rem; display: flex; align-items: stretch; margin-top: .2rem; }
.un-status-row .show-strip.inline { flex: 1; min-width: 0; margin: 0; }
.un-status { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .92rem; color: var(--muted); padding: .2rem .5rem; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); line-height: 1.2; }
.un-status.hot { color: #ffd2a6; border-color: #a5552b; font-weight: 700; }

.un-fan-wrap { margin-top: .35rem; position: relative; }
.un-fan {
    display: flex; align-items: flex-end; overflow-x: auto; overflow-y: hidden; padding: 1.5rem .4rem .45rem 1rem; min-height: 7.4rem;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch; touch-action: pan-x; user-select: none; -webkit-user-select: none;
    border-radius: 14px; background: rgba(0, 0, 0, .18); border: 1px solid var(--line);
}
.un-fan .un-card { margin-left: -.95em; cursor: pointer; }
.un-fan .un-card:first-child { margin-left: 0; }
.un-fan.n1 .un-card, .un-fan.n2 .un-card, .un-fan.n3 .un-card, .un-fan.n4 .un-card, .un-fan.n5 .un-card { margin-left: .25em; }
.un-fan.n1 .un-card:first-child, .un-fan.n2 .un-card:first-child, .un-fan.n3 .un-card:first-child, .un-fan.n4 .un-card:first-child, .un-fan.n5 .un-card:first-child { margin-left: 0; }
.un-fan .un-card.lit { transform: translateY(-.55em); }
.un-fan .un-card.dim { opacity: .5; filter: grayscale(.45) drop-shadow(0 .12em .2em rgba(0, 0, 0, .5)); }
.un-fan .un-card.sel { transform: translateY(-1.3em); z-index: 2; filter: drop-shadow(0 0 .35em var(--un-gold)) drop-shadow(0 .2em .3em rgba(0, 0, 0, .6)); }
.un-fan .un-card.drawn { outline: 3px solid var(--un-gold); outline-offset: 1px; border-radius: .45em; }
.un-fan.peeking .un-card { animation: un-turn .5s ease both; }
.un-fan.peeking { border-color: var(--un-gold); }
.un-empty { color: var(--muted); font-style: italic; margin: auto; }
.un-peek-hint { display: block; text-align: center; font-size: .7rem; color: var(--muted); margin-top: .15rem; }

/* ---- the bar: Draw, Uno or Catch, Play */
.un-bar { display: flex; align-items: stretch; gap: .45rem; padding-top: .45rem; min-height: 4rem; flex-wrap: wrap; }
.un-bar > .btn { margin: 0; flex: 1 1 0; min-width: 0; padding-left: .5rem; padding-right: .5rem; }
.un-bar .un-play { flex: 1.5 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.un-bar .un-play.bluff { background: #a5552b; border-color: #6e3519; box-shadow: 0 4px 0 #6e3519; color: #fff; }
.un-bar .un-drawbtn .ico { width: 1.2rem; height: 1.2rem; vertical-align: -3px; }
.un-bar .un-uno { background: var(--un-gold); color: #1c1606; border-color: var(--accent-dark); font-size: 1.3rem; letter-spacing: .06em; flex: .9 1 0; }
.un-bar .un-uno.urgent { animation: un-urgent .7s ease-in-out infinite alternate; }
.un-bar .un-catch { background: var(--cauldron); border-color: color-mix(in srgb, var(--cauldron) 60%, #000); color: #fff; animation: un-urgent .6s ease-in-out infinite alternate; white-space: nowrap; }
.un-bar .un-called { flex: .7 1 0; display: flex; align-items: center; justify-content: center; gap: .2rem; color: var(--un-gold); font-family: var(--display); font-weight: 700; }
.un-bar .un-called .ico { width: 1rem; height: 1rem; }
.un-bar .un-ready { flex: 1.6 1 0; }
.un-bar .un-scores-btn { flex: none; }
.un-bar .un-error { flex-basis: 100%; margin: .2rem 0 0; font-size: .85rem; }
@keyframes un-urgent { from { box-shadow: 0 0 0 0 rgba(242, 194, 51, .7); } to { box-shadow: 0 0 0 5px rgba(242, 194, 51, .15); } }

/* ---- sheets */
.un-colours-card { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; color: var(--muted); }
.un-warn { margin: 0 0 .5rem; padding: .4rem .6rem; border-radius: 10px; background: rgba(165, 85, 43, .3); border: 1px solid #a5552b; color: #ffd2a6; font-weight: 700; display: flex; gap: .4rem; align-items: center; }
.un-warn .ico { width: 1rem; height: 1rem; flex: none; }
.un-colour-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.un-colour-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 4.4rem; border-radius: 16px; border: 3px solid rgba(255, 255, 255, .25); background: var(--tile); color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.3rem; text-transform: capitalize; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.un-colour-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.un-colour-tile.inplay { border-color: #fff; }
.un-colour-tile small { font-size: .7rem; font-family: var(--body); opacity: .9; }
.un-challenge-card { display: flex; gap: .8rem; align-items: center; }
.un-challenge-card p { margin: 0; font-size: .95rem; }
.un-challenge footer, .un-hand footer { display: flex; gap: .5rem; justify-content: flex-end; }
.un-challenge footer .btn { flex: 1; }
.un-swap-list { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.un-swap-pill { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .55rem .7rem; border-radius: 16px; font: inherit; cursor: pointer; text-align: left; color: var(--text); background: color-mix(in srgb, var(--cauldron) 22%, var(--panel)); border: 2px solid var(--cauldron); }
.un-swap-pill .seat { width: 1.1rem; height: 1.1rem; color: var(--cauldron); }
.un-swap-pill .nm { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.un-swap-pill small { color: var(--muted); }
.un-swap-pill.sel { background: var(--cauldron); color: #fff; box-shadow: 0 0 0 3px var(--accent); }

.un-step-cards { display: flex; flex-wrap: wrap; gap: 4px; margin: .2rem 0 .6rem; min-height: 3rem; }
.un-step-sum { font-size: 1.1rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.un-step-sum b { font-family: var(--display); font-size: 1.6rem; color: var(--accent-2); }
.un-winner .un-out { font-size: 1.15rem; margin: .2rem 0; }
.un-gain { font-family: var(--display); font-size: 2.4rem; color: var(--un-gold); margin: .2rem 0; }
.un-banked { color: var(--muted); }
.un-banked b { color: var(--text); font-family: var(--display); font-size: 1.25rem; }
.un-totals { width: 100%; border-collapse: collapse; }
.un-totals th { text-align: left; font-size: .75rem; color: var(--muted); font-weight: 600; padding: .2rem; }
.un-totals td { padding: .35rem .2rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; vertical-align: middle; }
.un-totals td.who { color: var(--seat-text, var(--text)); white-space: nowrap; }
.un-totals td.who .seat { width: 1rem; height: 1rem; color: var(--cauldron); vertical-align: -2px; }
.un-totals tr.winner td.who { font-weight: 800; }
.un-totals tr.me td.who { text-decoration: underline; text-decoration-color: var(--cauldron); }
.un-mini-fan { display: flex; flex-wrap: wrap; gap: 2px; margin-top: .2rem; }
.un-meter { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); margin-top: .2rem; overflow: hidden; min-width: 3rem; }
.un-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--cauldron), var(--un-gold)); border-radius: 3px; }
.un-note { margin-top: .6rem; color: var(--accent-2); font-weight: 700; }

.un-splash-fan, .un-lobby-fan { display: flex; justify-content: center; gap: .3rem; margin: .3rem 0 .6rem; }
.un-splash-fan .un-card:nth-child(odd), .un-lobby-fan .un-card:nth-child(odd) { transform: rotate(-6deg); }
.un-splash-fan .un-card:nth-child(even), .un-lobby-fan .un-card:nth-child(even) { transform: rotate(5deg) translateY(-3px); }
.un-splash-note { text-align: center; font-size: 1.05rem; }
.un-splash-scores { list-style: none; padding: 0; margin: .5rem auto 0; max-width: 18rem; }
.un-splash-scores li { display: flex; justify-content: space-between; gap: .8rem; padding: .25rem .5rem; border-left: 4px solid var(--cauldron); margin-bottom: .25rem; background: rgba(0, 0, 0, .2); border-radius: 6px; }
.un-splash-scores li .seat { width: 1rem; height: 1rem; color: var(--cauldron); vertical-align: -2px; }
.un-splash-scores.big li { font-size: 1.15rem; }

.un-rules-fan { display: flex; flex-wrap: wrap; gap: 3px; margin: .3rem 0; }
.un-rules-dark { background: #0b0b0e; border-radius: 12px; padding: .4rem .6rem; }

/* ---- the table */
.un-tablepage { max-width: 1400px; }
.un-tablepage .un-chips { margin-bottom: .6rem; }
.un-chips.large .un-chip { font-size: 1.05rem; padding: .5rem .7rem; }
.un-chips.large .un-chip .score { font-size: 1.4rem; }
.un-piles.large { gap: 3rem; min-height: 20rem; }
.un-piles.large .un-dir svg { width: 4.5rem; height: 4.5rem; }
.un-piles.large .un-dir small { font-size: 1rem; }
.un-piles.large .un-colour { font-size: 1.5rem; }
.un-table-side { margin-top: 1rem; }

@media (max-height: 700px) {
    .un-card.lg { font-size: 18px; }
    .un-piles { min-height: 6.5rem; padding: .2rem 0; }
    .un-fan { min-height: 6.6rem; padding-top: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .un-card.fresh, .un-discard .un-card.top.fresh, .un-chip.mood-play, .un-chip.mood-uno, .un-chip.mood-caught, .un-chip.mood-verdict,
    .un-piles.reversed .un-dir svg, .un-piles.flipped .un-card, .un-chip.catchable, .un-bar .un-catch, .un-bar .un-uno.urgent { animation: none; }
}