/* Lost Cities: an explorer's journal. Deep blue-grey of an old chart at night, parchment and brass, the five expedition
   colours (or the red and black of a pack of playing cards). The theme block swaps the shared tokens while the game is
   on screen (html.theme-lostcities); the rest is this game's own pieces, scoped under .lc-* so nothing leaks into the
   other games' pages. */
html.theme-lostcities {
    --bg: #18222e;
    --panel: #22303f;
    --panel-2: #2b3c4f;
    --panel-3: #354a61;
    --line: #445c76;
    --text: #f2ead8;
    --muted: #b2bfcc;
    --accent: #d4a24c;
    --accent-2: #f0c96a;
    --accent-dark: #9c7428;
    --accent-text: #261a08;
    --parch: #eadcbc;
    --parch-2: #d6c296;
    --parch-ink: #33261a;
    --danger: #e8644e;
    --ok: #8fd49a;
    --display: "Abril Fatface", "Playfair Display", Georgia, serif;
    --body: "EB Garamond", "Iowan Old Style", Georgia, serif;
    /* the expeditions */
    --lc-yellow: #d9a72f;
    --lc-blue: #2d6cb0;
    --lc-white: #d3dce3;
    --lc-green: #3a8c4b;
    --lc-red: #c2432e;
    --lc-ink-dark: #2a2418;
    --lc-ink-light: #fbf3e0;
    /* the house rule's playing cards */
    --lc-card: #fbf6e8;
    --lc-card-red: #b8322a;
    --lc-card-black: #1f1b1a;
    --lc-wager-mark: #9c7428;
    --lc-pos: #9fe0a8;
    /* the table felt, the count badges and the explorer back */
    --lc-felt-top: #223447;
    --lc-felt-bottom: #1b2938;
    --lc-felt: #1f3043;
    --lc-badge: #101a25;
    --lc-badge-edge: #3a2a10;
    --lc-back-edge: #0d1826;
    --lc-back-gold: #c9a24b;
    --lc-back-well: #152638;
    --lc-back-compass: #d9a441;
    --lc-card-back: #f6efdc;
    --lc-neg: #ff9d8a;
}
html.theme-lostcities body {
    font-size: 18px;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(212, 162, 76, .08), transparent 55%),
        radial-gradient(ellipse at 90% 100%, rgba(45, 108, 176, .12), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}
html.theme-lostcities .topbar .round { font-weight: 400; letter-spacing: .01em; }
html.theme-lostcities .btn.primary { font-family: var(--body); }

/* ---- the game page: top bar, the table, the line of what happened, the hand, one bar of actions */
.lc-page.game-page { padding-top: .5rem; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.lc-page.game-page > .lc-hand { margin-top: auto; }
.page.lc-page.with-fabs { padding-bottom: 5.6rem; }
.lc-page .topbar { margin-bottom: .35rem; }
.lc-page .topbar .round .of { font-family: var(--body); }

/* The felt takes a little of the viewer's seat colour (--me on the phone's page; the table page has none and keeps the
   plain felt) and its corners darken a little (the tile-look pass, 23 Oct 2026) */
.lc-table { position: relative; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, .3) 100%), linear-gradient(180deg, color-mix(in srgb, var(--lc-felt-top) 85%, var(--me, var(--lc-felt-top))), color-mix(in srgb, var(--lc-felt-bottom) 85%, var(--me, var(--lc-felt-bottom)))); border: 1px solid color-mix(in srgb, var(--line) 60%, var(--me, var(--line))); border-radius: 14px; padding: .35rem .4rem .3rem; margin-bottom: .35rem; box-shadow: inset 0 0 30px rgba(0,0,0,.35); }
.lc-scores { display: flex; justify-content: space-between; gap: .5rem; padding: 0 .25rem .25rem; }
.lc-scores .who { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; font-size: .95rem; padding: .05rem .45rem; border-radius: 999px; border: 1px solid transparent; }
.lc-scores .who .ico { width: 1rem; height: 1rem; }
.lc-scores .who .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-scores .who.me .name { font-weight: 700; }
.lc-scores .who .score { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--text); line-height: 1; }
.lc-scores .who .score.pos, .lc-scores .who .rnd .n.pos { color: var(--lc-pos); }
.lc-scores .who .score.neg, .lc-scores .who .rnd .n.neg { color: var(--lc-neg); }
/* the round so far, as the expeditions stand (the numbers wait for a card in the air to land) */
.lc-scores .who .rnd { font-size: .78rem; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: baseline; gap: .2rem; }
.lc-scores .who .rnd .n { display: inline-block; font-size: .92rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.lc-scores .who.turn { border-color: var(--cauldron); background: color-mix(in srgb, var(--cauldron) 20%, transparent); }

.lc-board-wrap { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.lc-svg { display: block; width: 100%; height: auto; overflow: visible; }
/* On a phone the board gets what the bar, the hand and the action bar leave (it keeps its shape and centres). */
.game-page .lc-svg { width: min(100%, max(16rem, calc(100vh - 19.5rem)) * var(--lc-ar, 1)); width: min(100%, max(16rem, calc(100dvh - 19.5rem)) * var(--lc-ar, 1)); margin: 0 auto; }
.lc-svg .lc-bg { fill: transparent; }
.loupe .lc-svg .lc-bg { fill: color-mix(in srgb, var(--lc-felt) 85%, var(--me, var(--lc-felt))); }
.lc-svg .lc-place { fill: rgba(255,255,255,.025); stroke: var(--lc-col, var(--line)); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 3 2.5; }
.lc-svg .lc-place-ico { opacity: .2; }
.lc-svg .lc-col.opp .lc-place, .lc-svg .lc-col.opp .lc-place-ico { opacity: .6; }
.lc-svg .lc-band { fill: rgba(234, 220, 188, .07); stroke: rgba(234, 220, 188, .22); stroke-width: 1; }
.lc-svg .lc-shadow { fill: rgba(0,0,0,.38); }
.lc-svg .lc-bcg.under .lc-shadow { fill: rgba(0,0,0,.2); }
.lc-svg .lc-bc.back.mini { filter: none; }
.lc-svg .lc-count { fill: var(--lc-badge); stroke: var(--parch-2); stroke-width: .8; }
.lc-svg .lc-count-n { font-size: 8.5px; font-weight: 700; fill: var(--parch); font-family: var(--body); }
.lc-svg .lc-count.deck { fill: var(--accent); stroke: var(--lc-badge-edge); }
.lc-svg .lc-count-n.deck { fill: var(--accent-text); font-size: 10px; }
.lc-svg .lc-glow { fill: none; stroke: var(--accent-2); stroke-width: 2.4; animation: lc-pulse 1.2s ease-in-out infinite; pointer-events: none; }
.lc-svg .lc-slot { fill: rgba(240, 201, 106, .14); stroke: var(--accent-2); stroke-width: 1.8; stroke-dasharray: 4 3; animation: lc-pulse 1.2s ease-in-out infinite; pointer-events: none; }
.lc-svg .lc-col.lit .lc-place { stroke: var(--accent-2); stroke-opacity: .9; }
.lc-svg .lc-hit { cursor: pointer; }
.lc-svg .lc-pile.locked > *:not(.lc-lock):not(.lc-lock-ico) { opacity: .5; }
.lc-svg .lc-lock { fill: rgba(10, 16, 24, .78); stroke: var(--parch-2); stroke-width: .8; }
.lc-svg .lc-lock-ico { color: var(--parch); }
.lc-svg .lc-tag { font-size: 9.5px; font-weight: 700; fill: var(--muted); font-family: var(--body); }
.lc-svg .lc-tag.pos { fill: var(--lc-pos); }
.lc-svg .lc-tag.neg { fill: var(--lc-neg); }
.lc-svg .lc-mult { fill: var(--accent-2); font-size: 8.5px; }
/* what a landing bumps and a settled number pops: scaled about its own middle */
.lc-svg [data-card], .lc-svg [data-opp-hand], .lc-svg .lc-tag, .lc-svg .lc-count-n, .lc-scores .rnd .n { transform-box: fill-box; transform-origin: center; }
/* the column the scoring walkthrough is on, ringed in its owner's colour */
.lc-svg .lc-spot { fill: color-mix(in srgb, var(--cauldron) 12%, transparent); stroke: var(--cauldron); stroke-width: 2.4; pointer-events: none; animation: lc-spot-in .3s ease-out; }
@keyframes lc-spot-in { from { opacity: 0; } }
/* the draw step: the deck and the piles you may take from glow harder */
.lc-svg.draw .lc-glow { stroke-width: 3.4; filter: drop-shadow(0 0 4px var(--accent-2)); }
.lc-svg .lc-side-name { font-size: 8px; font-weight: 700; fill: var(--parch); font-family: var(--body); }
.lc-svg .lc-cf, .lc-card .lc-cf, .lc-ghost .lc-cf { fill: var(--lc-card); stroke: rgba(0,0,0,.35); stroke-width: 1; }
.lc-svg .lc-cb, .lc-card .lc-cb, .lc-ghost .lc-cb { fill: var(--lc-card-back); stroke: rgba(0,0,0,.35); stroke-width: 1; }
@keyframes lc-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }
/* a card a flight is about to land stays hidden until then */
.lc-hold { visibility: hidden; }

/* two lines: the turn before (small, one line) above the latest */
.lc-ticker { margin: .25rem .3rem .1rem; text-align: center; min-height: 3.3em; display: flex; flex-direction: column; justify-content: flex-end; }
.lc-ticker .line { margin: 0; line-height: 1.25; color: var(--parch); text-wrap: balance; }
.lc-ticker .line.now { font-size: .92rem; animation: lc-tick-in .35s ease-out; }
.lc-ticker .line.prev { font-size: .78rem; opacity: .62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .1rem; }
.lc-ticker b { color: var(--accent-2); font-weight: 700; }
.lc-ticker .line.mine { color: var(--muted); }
@keyframes lc-tick-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- the hand: eight cards fanned, overlapping as much as the width needs; the picked-up card lifts */
.lc-hand { padding: .15rem 0 0; }
.lc-fan { display: flex; justify-content: center; align-items: flex-end; min-height: 6.2rem; padding-top: 1.1rem; font-size: min(19px, calc((100vw - 2.2rem) / 19.4)); }
.lc-fan .lc-card + .lc-card { margin-left: min(.3em, calc((100% - var(--n) * 3.75em) / max(1, var(--n) - 1))); }
.lc-fan .lc-card { transition: transform .18s ease, box-shadow .18s ease; }
.lc-fan .lc-card.sel { transform: translateY(-1.05em); box-shadow: 0 12px 20px rgba(0,0,0,.55), 0 0 0 3px var(--accent-2); z-index: 2; }
.lc-fan .lc-card.playable { box-shadow: 0 -3px 0 0 var(--accent), 0 6px 12px rgba(0,0,0,.4); }
.lc-hand.turn .lc-fan .lc-card:not(.sel):hover { transform: translateY(-4px); }
/* off your turn the hand is dimmed (a tap only ticks); in the draw step it steps back a little for the deck and piles */
.lc-fan { transition: transform .22s ease, opacity .22s ease, filter .22s ease; transform-origin: 50% 100%; }
.lc-hand.off .lc-fan { opacity: .55; filter: saturate(.6); }
.lc-hand.draw .lc-fan { transform: scale(.9); opacity: .8; }
.lc-hand:not(.turn) .lc-card { cursor: default; }
/* the first wager picked up says what it does */
.lc-caption { margin: .3rem .5rem 0; font-size: .82rem; line-height: 1.25; text-align: center; color: var(--parch); font-style: italic; animation: lc-tick-in .3s ease-out; }
.lc-error { text-align: center; margin: .3rem 0 0; font-size: .9rem; }

/* ---- a card (LcCardView): sized by font-size, 5:7 */
.lc-card { display: inline-block; width: 3.75em; aspect-ratio: 5 / 7; padding: 0; border: 0; background: transparent; font-size: 1rem; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; flex: none; border-radius: 9%; margin: 0; color: inherit; }
.lc-card:disabled { cursor: default; }
.lc-card svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.lc-card.xs { font-size: .55rem; }
.lc-card.sm { font-size: .82rem; }
.lc-card.md { font-size: 1em; }
.lc-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---- the flying card: fixed over the page, moved by transform from its start to where it lands */
.lc-ghost { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.lc-ghost .lc-gi { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.lc-ghost svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.lc-ghost svg.two { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lc-ghost svg.back.two { transform: rotateY(180deg); }

/* ---- the action bar */
.lc-actions { align-items: stretch; gap: .5rem; padding-left: .75rem; padding-right: .75rem; }
.lc-actions .btn { box-shadow: var(--shadow); margin: 0; line-height: 1.15; }
.lc-actions .btn > span { display: flex; flex-direction: column; align-items: center; }
.lc-actions .btn small { display: block; font-size: .74rem; font-weight: 400; opacity: .85; margin-top: .1rem; }
.lc-actions .lc-play, .lc-actions .lc-draw { flex: 1.6; }
.lc-actions .lc-discard { flex: 1; }
.lc-actions .btn.wide { flex: 1; }
.lc-actions .fab-status { font-size: .98rem; }

/* ---- the scoring walkthrough */
.sheet.lc-score > .body { display: flex; flex-direction: column; }
.sheet.lc-score > header .head-aside .lc-score-ico .ico { width: 2.4rem; height: 2.4rem; color: inherit; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.lc-score-cards { display: flex; justify-content: center; align-items: flex-end; padding: .4rem 0 .9rem; font-size: min(.95rem, calc((100vw - 3rem) / 13)); }
.lc-score-cards .lc-score-card { display: inline-flex; animation: lc-deal-in .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms); }
.lc-score-cards .lc-score-card + .lc-score-card { margin-left: min(.3em, calc((100% - var(--n) * 3.75em) / max(1, var(--n) - 1))); }
.lc-score-cards .lc-card.sm { font-size: 1em; }
@keyframes lc-deal-in { from { opacity: 0; transform: translateY(-14px) rotateY(90deg); } to { opacity: 1; transform: none; } }
.lc-lines { list-style: none; padding: 0; margin: 0 0 .4rem; }
.lc-lines li { display: grid; grid-template-columns: 1fr auto 3.2rem; gap: .6rem; align-items: baseline; padding: .4rem .55rem; border-bottom: 1px solid var(--line); animation: lc-line-in .4s both; font-size: 1.02rem; }
.lc-lines li .op { font-weight: 700; color: var(--accent-2); white-space: nowrap; }
.lc-lines li .op.neg { color: var(--lc-neg); }
.lc-lines li .run { text-align: right; font-family: var(--display); font-size: 1.1rem; }
.lc-lines li .ico { width: 1.05em; height: 1.05em; color: var(--accent-2); }
.lc-lines li.bonus { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.lc-lines .run.pos, .lc-totals .pos { color: var(--lc-pos); }
.lc-lines .run.neg, .lc-totals .neg { color: var(--lc-neg); }
@keyframes lc-line-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.lc-col-total { margin: 1.4rem 0 .2rem; text-align: center; animation: lc-line-in .45s both; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.lc-col-total b { font-family: var(--display); font-weight: 400; font-size: 3rem; line-height: 1; color: var(--text); }
.lc-col-total b.pos { color: var(--lc-pos); }
.lc-col-total b.neg { color: var(--lc-neg); }
/* a column's step: a short see-through sheet at the bottom, so the column it scores (ringed on the board) stays in view;
   the cards small, the working on the left and the total on the right */
.sheet.lc-score.step > header { padding: .55rem .9rem .4rem; }
.sheet.lc-score.step > header h2 { font-size: 1.12rem; }
.sheet.lc-score.step > header .head-aside .lc-score-ico .ico { width: 1.8rem; height: 1.8rem; }
.sheet.lc-score.step > .body { padding: .35rem .8rem .45rem; }
.sheet.lc-score.step > footer { align-items: center; padding-top: .5rem; }
.sheet.lc-score.step > footer .lc-skip { order: -1; flex: none; font-size: .9rem; padding: .4rem .3rem; }
.lc-step .lc-score-cards { padding: .1rem 0 .35rem; font-size: .62rem; }
.lc-step .lc-score-cards .lc-card.xs { font-size: 1em; }
.lc-step-work { display: grid; grid-template-columns: 1fr auto; gap: .2rem .7rem; align-items: center; }
.lc-step .lc-lines { margin: 0; }
.lc-step .lc-lines li { grid-template-columns: 1fr auto 2.8rem; padding: .22rem .3rem; font-size: .92rem; }
.lc-step .lc-lines li .run { font-size: 1rem; }
.lc-step .lc-col-total { margin: 0; min-width: 4.4rem; }
.lc-step .lc-col-total b { font-size: 2.3rem; }
.lc-step .lc-col-total .muted { font-size: .8rem; white-space: nowrap; }
.lc-step.landed .lc-score-card, .lc-step.landed .lc-lines li, .lc-step.landed .lc-col-total { animation: none !important; }
.lc-count-up.landed { animation: lc-pop .35s ease-out; }
@keyframes lc-pop { 50% { transform: scale(1.18); } }
.lc-totals { width: 100%; border-collapse: collapse; font-size: 1rem; }
.lc-totals th { text-align: right; font-weight: 700; padding: .3rem .4rem; color: var(--seat-text); white-space: nowrap; }
.lc-totals th:first-child { text-align: left; }
.lc-totals th .ico { width: .95em; height: .95em; }
.lc-totals td { padding: .32rem .4rem; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.lc-totals td:first-child { text-align: left; color: var(--muted); }
.lc-totals td.exp { color: var(--text); white-space: nowrap; }
.lc-totals td.exp .ico { width: 1.15em; height: 1.15em; }
.lc-totals tr.sum td { font-weight: 700; border-top: 2px solid var(--line); }
.lc-totals tr.sum td:first-child, .lc-totals tr.grand td:first-child { color: var(--text); }
.lc-totals tr.grand td { font-size: 1.15rem; border-bottom: 0; }
.lc-totals tr.grand b, .lc-totals tr.sum b { font-family: var(--display); font-weight: 400; display: inline-block; }
.lc-totals tr.earlier td { color: var(--muted); font-size: .9rem; }
.lc-totals tr.now td { background: rgba(240, 201, 106, .07); }
.lc-totals.small { font-size: .92rem; margin-top: .5rem; }
.lc-verdict { text-align: center; font-style: italic; font-size: 1.1rem; color: var(--parch); margin: .8rem 0 0; }

/* ---- the end: the standings with confetti */
.lc-final { position: relative; }
.lc-final .standings-card { margin-bottom: .5rem; }

/* ---- the rules sheet */
.lc-rules .rule-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.lc-rules .rule-table td { padding: .3rem .25rem; border-bottom: 1px solid var(--line); }
.lc-rules .rule-table td:last-child { text-align: right; font-weight: 700; color: var(--accent-2); white-space: nowrap; }

/* ---- the lobby */
.lc-deck-pick { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0 .75rem; }
.lc-deck-btn { flex-direction: column; align-items: stretch; text-align: left; gap: .45rem; padding: .6rem .7rem; }
.lc-deck-btn b { display: block; font-size: 1.05rem; }
.lc-deck-btn small { display: block; font-size: .85rem; font-weight: 400; opacity: .85; line-height: 1.25; }
.lc-deck-btn.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel-2)); box-shadow: 0 0 0 1px var(--accent); }
.lc-deck-sample { display: flex; gap: .2rem; }
.lc-deck-sample .lc-card { cursor: inherit; }

/* ---- the table screen */
.lc-tablepage { max-width: 1100px; }
.lc-table-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
.lc-tablepage .lc-table { max-width: 720px; margin: 0 auto; width: 100%; }
@media (min-width: 900px) { .lc-table-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
/* whose turn it is, in their seat's colour */
.lc-tablepage .pill.lc-seat-pill { background: var(--cauldron); border-color: var(--cauldron); color: var(--text); font-weight: 700; }
/* the newest line of the table's ticker lights up for a moment */
.lc-tablepage .ticker > div.fresh { animation: lc-fresh 1.2s ease-out; }
@keyframes lc-fresh { from { background: color-mix(in srgb, var(--accent) 30%, transparent); } }

/* ---- wider screens and short phones */
@media (min-width: 640px) {
    .lc-page.game-page { max-width: 600px; }
    .lc-fan { font-size: 18px; }
}
@media (max-height: 720px) {
    .lc-fan { min-height: 5.4rem; padding-top: .9rem; font-size: min(16px, calc((100vw - 2.2rem) / 19.4)); }
    .lc-ticker { min-height: 2.7em; margin-top: .15rem; }
    .lc-ticker .line.now { font-size: .85rem; }
    .lc-ticker .line.prev { font-size: .74rem; }
    .lc-scores { padding-bottom: .1rem; }
    .lc-actions .btn small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lc-svg .lc-glow, .lc-svg .lc-slot, .lc-score-cards .lc-score-card, .lc-lines li, .lc-col-total, .lc-ticker, .lc-ticker .line,
    .lc-svg .lc-spot, .lc-caption, .lc-count-up.landed, .lc-tablepage .ticker > div.fresh { animation: none !important; }
    .lc-fan, .lc-fan .lc-card { transition: none !important; }
    .lc-hand.draw .lc-fan { transform: none; }
    /* the shared toasts already fade instead of sliding (app.css) */
}