/* Flip 7: midnight felt. A deep navy page with a faint felt grain, cream text, gold for the modifiers and the bars, the
   seat tints through --cauldron. Every number has its own hue (F7Art), so a row reads as a rainbow and a pair is two of
   a colour. The theme block swaps the shared tokens while the game is on screen (html.theme-flip7); the rest is this
   game's own pieces, scoped under .f7-* so nothing leaks into the other games' pages. */
html.theme-flip7 {
    color-scheme: dark;
    --bg: #0d1530;
    --panel: #16214a;
    --panel-2: #1c2a5a;
    --panel-3: #243468;
    --line: #2f4180;
    --text: #f4ecd8;
    --muted: #a9b0cc;
    --accent: #f2c14e;
    --accent-2: #f6d27a;
    --accent-dark: #b88a1e;
    --accent-text: #1a1406;
    --parch: #f4ecd8;
    --parch-2: #e6dabc;
    --parch-ink: #1a1406;
    --danger: #ff6b6b;
    --ok: #4fd18b;
    --shadow: 0 10px 30px rgba(0, 0, 10, .45);
    --display: "Fredoka", "Nunito", "Segoe UI", sans-serif;
    --body: "Nunito", "Segoe UI", system-ui, sans-serif;
    --f7-gold: #f2c14e;
    --f7-ice: #9fdcff;
}
html.theme-flip7 body {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(80, 110, 220, .28), transparent 60%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 5px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 6px),
        var(--bg);
    background-attachment: fixed;
}
html.theme-flip7 .topbar .round { color: var(--accent-2); }
html.theme-flip7 .btn { border-radius: 14px; font-family: var(--display); font-weight: 600; letter-spacing: .01em; }
html.theme-flip7 .btn.primary { box-shadow: 0 4px 0 var(--accent-dark); border-color: var(--accent-dark); }
html.theme-flip7 .btn.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-dark); }
html.theme-flip7 .btn.icon, html.theme-flip7 .btn.small { font-family: var(--body); }
html.theme-flip7 .pill.brewing { background: var(--accent); color: var(--accent-text); border-color: var(--accent-dark); }
html.theme-flip7 .sheet-backdrop.see-through { background: transparent; }
html.theme-flip7 .standings li.place-1 { color: var(--accent-2); }

/* ---- a card: the SVG face, sized by its font-size (3.75em wide, 5:7) */
.f7-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 .18em rgba(0, 0, 0, .45));
}
.f7-card svg { display: block; width: 100%; height: 100%; }
.f7-card.xs { font-size: 7px; }
.f7-card.sm { font-size: 10px; }
.f7-card.md { font-size: 14px; }
.f7-card.lg { font-size: 18px; }
.f7-card.fresh { animation: f7-flip .42s cubic-bezier(.2, .8, .3, 1.2) both; }
.f7-card.dupe { outline: 2px solid var(--danger); outline-offset: 1px; }
.f7-card.ghost { opacity: .9; }
.f7-card.ghost.saved { animation: f7-flip .42s cubic-bezier(.2, .8, .3, 1.2) both, f7-saved 1.4s ease .4s both; }
@keyframes f7-flip { from { transform: perspective(300px) rotateY(90deg) translateY(-.6em); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes f7-saved { 0% { filter: drop-shadow(0 0 0 transparent); } 30% { filter: drop-shadow(0 0 .5em var(--f7-gold)); } 100% { opacity: 0; transform: translateY(-1em) scale(.8); } }

/* ---- the page: one column the height of the screen; only the others' rows scroll if they must */
.f7-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)); }
.f7-page.game-page > .topbar, .f7-page.game-page > .f7-deckstrip, .f7-page.game-page > .f7-mine-wrap, .f7-page.game-page > .f7-bar { flex: none; }
.f7-page.game-page.done { height: auto; min-height: 100dvh; overflow: visible; }
.f7-page.game-page .topbar { margin-bottom: .45rem; }

.f7-others { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; padding: 2px; }
.f7-others.n1, .f7-others.n2 { justify-content: flex-start; }
/* with two or three players the others' rows grow and your cards go to 64 wide */
.f7-page.p2 .f7-others .f7-card.xs, .f7-page.p3 .f7-others .f7-card.xs { font-size: 10px; }
.f7-page.p1 .f7-row.big .f7-card.md, .f7-page.p2 .f7-row.big .f7-card.md, .f7-page.p3 .f7-row.big .f7-card.md { font-size: 17px; }

/* ---- a row */
.f7-row {
    position: relative; background: color-mix(in srgb, var(--panel) 88%, var(--cauldron) 12%); border: 2px solid color-mix(in srgb, var(--cauldron) 45%, var(--line));
    border-radius: 12px; padding: .3rem .5rem .35rem; transition: opacity .3s, filter .3s, box-shadow .3s;
}
.f7-row.tap { cursor: pointer; }
.f7-row-head { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.f7-row-head .who { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; color: var(--seat-text, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f7-row-head .who .seat { width: 1.05rem; height: 1.05rem; color: var(--cauldron); flex: none; }
.f7-row-head .f7-act { width: .95rem; height: .95rem; color: var(--muted); flex: none; }
.f7-nums { margin-left: auto; display: inline-flex; gap: .45rem; align-items: baseline; white-space: nowrap; font-variant-numeric: tabular-nums; }
.f7-nums .banked { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--text); }
.f7-nums .risk { font-size: .8rem; color: var(--accent-2); }
.f7-nums .risk.lost { color: var(--danger); text-decoration: line-through; }
.f7-badge { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .05rem .4rem; border-radius: 999px; background: var(--panel-3); color: var(--muted); flex: none; }
.f7-badge.active { background: transparent; border: 1px solid var(--line); }
.f7-row.on .f7-badge.active { background: var(--cauldron); color: #fff; border-color: var(--cauldron); }
.f7-badge.stayed { background: #2e5e45; color: #d9ffe8; }
.f7-badge.frozen { background: #2c6a8f; color: #e6f7ff; }
.f7-badge.busted { background: #7a2630; color: #ffe3e6; }
.f7-badge.seven { background: var(--f7-gold); color: #1a1406; }
.f7-cards { display: flex; align-items: center; gap: .4rem; min-height: 2.1rem; margin-top: .2rem; min-width: 0; }
.f7-numbers, .f7-extras { display: flex; align-items: center; gap: 3px; min-width: 0; }
.f7-extras { padding-left: .35rem; border-left: 1px dashed var(--line); }
.f7-empty { color: var(--muted); font-size: .85rem; font-style: italic; }
.f7-working { margin-top: .3rem; font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--accent-2); font-variant-numeric: tabular-nums; min-height: 1.3rem; }

.f7-row.on { box-shadow: 0 0 0 2px var(--cauldron), 0 0 16px color-mix(in srgb, var(--cauldron) 70%, transparent); border-color: var(--cauldron); }
.f7-row.lit { box-shadow: 0 0 0 3px var(--accent), 0 0 18px rgba(242, 193, 78, .6); }
.f7-row.stayed .f7-cards { opacity: .72; }
.f7-row.busted { filter: grayscale(.75); opacity: .62; }
.f7-row.frozen::after { content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
    background: linear-gradient(115deg, rgba(159, 220, 255, .28), rgba(159, 220, 255, .08) 40%, rgba(255, 255, 255, .22) 55%, rgba(159, 220, 255, .12)); }
.f7-row.seven { box-shadow: 0 0 0 2px var(--f7-gold), 0 0 22px rgba(242, 193, 78, .55); }
.f7-row.mood-bust { animation: f7-shake .5s ease-in-out both; }
.f7-row.mood-freeze::after { animation: f7-frost 1.1s ease-out both; }
.f7-row.mood-stay { animation: f7-settle .5s ease both; }
.f7-row.mood-give { animation: f7-pulse .9s ease both; }
.f7-row.mood-seven { animation: f7-glow 1.6s ease-in-out infinite alternate; }
@keyframes f7-shake { 0%, 100% { transform: none; } 15% { transform: translateX(-7px) rotate(-.6deg); } 35% { transform: translateX(6px) rotate(.5deg); } 55% { transform: translateX(-4px); } 75% { transform: translateX(3px); } }
@keyframes f7-frost { from { clip-path: inset(0 100% 0 0); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes f7-settle { 0% { transform: scale(1.02); } 100% { transform: none; } }
@keyframes f7-pulse { 0% { box-shadow: 0 0 0 0 var(--cauldron); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cauldron) 50%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes f7-glow { from { box-shadow: 0 0 0 2px var(--f7-gold), 0 0 10px rgba(242, 193, 78, .4); } to { box-shadow: 0 0 0 3px var(--f7-gold), 0 0 28px rgba(242, 193, 78, .8); } }

/* the others: compact, 26 px chips */
.f7-row.small { padding: .25rem .45rem .3rem; }
.f7-row.small .f7-cards { min-height: 1.6rem; margin-top: .15rem; }
.f7-row.small .f7-row-head { font-size: .9rem; }

/* yours: large, modifiers above the numbers */
.f7-mine-wrap { margin-top: .45rem; }
.f7-row.big { padding: .45rem .6rem .5rem; }
.f7-row.big .f7-row-head { font-size: 1rem; }
.f7-row.big .f7-cards { flex-direction: column-reverse; align-items: flex-start; gap: .3rem; min-height: 5.6rem; }
.f7-row.big .f7-extras { border-left: 0; padding-left: 0; min-height: 0; }
.f7-row.big .f7-numbers { width: 100%; }
.f7-row.big .f7-numbers .f7-card, .f7-row.table .f7-numbers .f7-card { flex: 0 1 3.75em; width: auto; min-width: 0; }
.f7-odds { margin-top: .3rem; text-align: center; font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.f7-odds.hot { color: #ffb4a8; font-weight: 700; }

/* ---- the deck strip */
.f7-deckstrip { display: flex; align-items: center; gap: .7rem; margin-top: .45rem; padding: .3rem .55rem; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); font-size: .85rem; color: var(--muted); min-height: 2.6rem; }
.f7-deck { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.f7-aside { white-space: nowrap; }
.f7-deck b, .f7-aside b { color: var(--text); font-family: var(--display); font-size: 1.05rem; }
.f7-deck.reshuffled .f7-card { animation: f7-flip .5s ease both; }
.f7-held { display: inline-flex; align-items: center; gap: 3px; }
.f7-held small { margin-left: .2rem; }
.f7-dealer { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.f7-dealer .ico { width: 1rem; height: 1rem; }

/* ---- the bar: Stay and Hit, or the beat's caption, or whose turn it is */
.f7-bar { display: flex; align-items: stretch; gap: .5rem; padding-top: .5rem; min-height: 4.1rem; flex-wrap: wrap; }
.f7-bar > .btn { margin: 0; }
.f7-bar .f7-stay { flex: 1 1 0; }
.f7-bar .f7-stay small { display: block; font-size: .75rem; font-weight: 500; opacity: .85; }
.f7-bar .f7-hit { flex: 1.3 1 0; font-size: 1.35rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.f7-bar .f7-hit .ico { width: 1.4rem; height: 1.4rem; }
.f7-bar .f7-ready { flex: 1.6 1 0; }
.f7-bar .f7-scores-btn { flex: none; }
.f7-bar .f7-status { flex: 1; box-shadow: none; }
.f7-bar .show-strip.inline { flex: 1; min-width: 0; margin: 0; }
.f7-bar .f7-error { flex-basis: 100%; margin: .2rem 0 0; font-size: .85rem; }

/* ---- sheets */
.f7-give .f7-give-blurb { margin: 0 0 .5rem; }
.f7-give-list { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.f7-give-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); }
.f7-give-pill .seat { width: 1.1rem; height: 1.1rem; color: var(--cauldron); }
.f7-give-pill .nm { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.f7-give-pill small { color: var(--muted); }
.f7-give-pill.me { grid-column: 1 / -1; }
.f7-give-pill.sel { background: var(--cauldron); color: #fff; box-shadow: 0 0 0 3px var(--accent); }
.f7-give-pill.sel small { color: #fff; }
.f7-give-pill.sel .seat { color: #fff; }

.f7-step .f7-row { margin-bottom: .6rem; }
.f7-work { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.f7-work td { padding: .25rem .2rem; border-bottom: 1px solid var(--line); }
.f7-work td:last-child { text-align: right; font-family: var(--display); font-variant-numeric: tabular-nums; }
.f7-work tr.total td { border-bottom: 0; font-size: 1.25rem; color: var(--accent-2); }
.f7-work tr.seven td { color: var(--f7-gold); }
.f7-bustline { font-size: 1.1rem; color: var(--danger); }
.f7-banked { margin: .6rem 0 0; color: var(--muted); }
.f7-banked b { color: var(--text); font-family: var(--display); font-size: 1.2rem; }
.f7-totals { width: 100%; border-collapse: collapse; }
.f7-totals th { text-align: left; font-size: .75rem; color: var(--muted); font-weight: 600; padding: .2rem; }
.f7-totals td { padding: .35rem .2rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.f7-totals td.who { color: var(--seat-text, var(--text)); white-space: nowrap; }
.f7-totals td.who .seat { width: 1rem; height: 1rem; color: var(--cauldron); vertical-align: -2px; }
.f7-totals td.bust { color: var(--danger); }
.f7-totals tr.me td.who { font-weight: 800; }

.f7-meter { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); margin-top: .2rem; overflow: hidden; min-width: 3rem; }
.f7-meter i { height: 100%; background: linear-gradient(90deg, var(--cauldron), var(--f7-gold)); border-radius: 3px; transition: width .6s ease; }
.f7-note { margin-top: .6rem; color: var(--accent-2); font-weight: 700; }
.f7-round footer { display: flex; gap: .5rem; justify-content: flex-end; }

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

.f7-rules-fan { display: flex; flex-wrap: wrap; gap: 3px; margin: .3rem 0; }
.f7-rules-item { display: flex; gap: .6rem; align-items: flex-start; margin: .4rem 0; }
.f7-rules-item p { margin: 0; }

/* ---- the table */
.f7-tablepage { max-width: 1400px; }
.f7-table-deck { display: flex; align-items: center; gap: 1.2rem; margin: .4rem 0 .8rem; color: var(--muted); flex-wrap: wrap; }
.f7-table-deck b { color: var(--text); font-family: var(--display); font-size: 1.4rem; margin: 0 .2rem; }
.f7-choosing { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent-2); font-weight: 700; }
.f7-table-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 900px) { .f7-table-grid.n3, .f7-table-grid.n4, .f7-table-grid.n5 { grid-template-columns: 1fr 1fr; } }
.f7-row.table { padding: .6rem .8rem; }
.f7-row.table .f7-row-head { font-size: 1.3rem; }
.f7-row.table .f7-nums .banked { font-size: 1.5rem; }
.f7-row.table .f7-cards { min-height: 6rem; flex-wrap: wrap; }
.f7-row.table .f7-numbers { flex: 1 1 auto; }
.f7-tseat .f7-meter { height: 8px; }
.f7-table-side { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
    .f7-card.fresh, .f7-row.mood-bust, .f7-row.mood-freeze::after, .f7-row.mood-seven, .f7-row.mood-give { animation: none; }
}