/* Citadels Duel: deep night-blue stone and gold, the white rose and the black rose as the two sides' marks (the seat
   tokens, the tile borders). The theme block swaps the shared tokens while the game is on screen
   (html.theme-citadelsduel); everything else is this game's own pieces, scoped under .cd-* so nothing leaks into the
   other games' pages. The district colours are this game's own tokens (--cd-noble … --cd-unique). */
html.theme-citadelsduel {
    color-scheme: dark;
    --bg: #121a2e;
    --panel: #1b2540;
    --panel-2: #222d4c;
    --panel-3: #2b3759;
    --line: #3a4670;
    --text: #efe6cf;
    --muted: #a4a9bf;
    --accent: #e0b84f;
    --accent-2: #f2d27e;
    --accent-dark: #9c7a22;
    --accent-text: #1a1406;
    --parch: #f3e9cf;
    --parch-2: #e4d6b2;
    --parch-ink: #1a1406;
    --danger: #ff6b5e;
    --ok: #63d18f;
    --shadow: 0 10px 30px rgba(0, 0, 0, .5);
    --display: "Cinzel", "Georgia", serif;
    --body: "Nunito", "Segoe UI", system-ui, sans-serif;
}
html.theme-citadelsduel body {
    background:
        radial-gradient(ellipse at 50% -12%, rgba(224, 184, 79, .12), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 44px),
        var(--bg);
    background-attachment: fixed;
}
html.theme-citadelsduel .topbar .round { color: var(--accent-2); }
html.theme-citadelsduel .btn.primary { box-shadow: 0 3px 0 var(--accent-dark); border-color: var(--accent-dark); }
html.theme-citadelsduel .pill.brewing { background: var(--accent); color: var(--accent-text); border-color: var(--accent-dark); }
html.theme-citadelsduel .sheet-backdrop.see-through { background: transparent; }
html.theme-citadelsduel .standings li.place-1 { color: var(--accent-2); }

/* The district colours: gold, blue, green, red, purple. */
html.theme-citadelsduel, .cd-page, .cd-lobby, .cd-rules, .cd-draft, .cd-question, .cd-score, .cd-round {
    --cd-noble: #d9a92e;
    --cd-religious: #3d72c8;
    --cd-trade: #3a9a57;
    --cd-military: #c4423a;
    --cd-unique: #8a56c4;
    --cd-gold: #f2c650;
    --cd-cloth: #1c2541;
}

/* ---- the page: one column the height of the phone, the city the stretchy row */
.cd-page.game-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; padding: .5rem .75rem calc(.45rem + env(safe-area-inset-bottom, 0px)); }
.cd-page.game-page > * { flex: none; }
.cd-page.game-page > .cd-board-wrap { flex: 1 1 0; min-height: 8rem; }
.cd-page.game-page.done { height: auto; min-height: 100dvh; overflow: visible; }
.cd-page.game-page.done > .cd-board-wrap { flex: none; height: min(40vh, 340px); }
.cd-page .topbar { margin-bottom: .3rem; }

/* ---- a player's line */
.cd-line { display: flex; flex-direction: column; gap: .15rem; background: var(--panel); border: 2px solid color-mix(in srgb, var(--line) 50%, var(--cauldron, var(--line))); border-radius: 12px; padding: .25rem .5rem; }
.cd-line.acting { border-color: var(--cauldron, var(--accent)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cauldron, var(--accent)) 40%, transparent); }
.cd-line.mine { margin-top: .3rem; }
.cd-line-who { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.cd-line-name { font-weight: 800; color: var(--cauldron, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cd-line .ico { width: 1.05rem; height: 1.05rem; }
.cd-side.white { color: #fffaf0; filter: drop-shadow(0 0 1px #8b7b55); }
.cd-side.black { color: #0e0d12; filter: drop-shadow(0 0 1.5px #c9b98a); }
.cd-purse, .cd-seats { display: inline-flex; align-items: center; gap: .2rem; font-size: .95rem; white-space: nowrap; }
.cd-seats .ico { color: var(--accent-2); }
.cd-stand { display: inline-flex; gap: .15rem; }
.cd-stand .cd-tile-svg { width: 1.4rem; height: 1.4rem; }
.cd-line-chars { display: flex; align-items: center; gap: .3rem; min-height: 2.6rem; }
.cd-char { display: inline-block; width: 1.85rem; flex: none; transition: transform .25s ease, opacity .25s ease; }
.cd-char .cd-char-svg { width: 100%; height: auto; display: block; }
.cd-char.called { opacity: .55; transform: rotate(-8deg) scale(.92); }
.cd-char.killed { opacity: .45; filter: grayscale(.8) brightness(.6); }
.cd-char.killed::after { content: ""; }
.cd-passed { font-size: .72rem; color: var(--muted); margin-left: .3rem; line-height: 1.1; }
.cd-line.hot.cd-m-coins .cd-purse b { color: var(--cd-gold); animation: cd-pulse .6s ease 2; }
.cd-line.hot.cd-m-seats .cd-seats b { color: var(--accent-2); animation: cd-pulse .6s ease 2; }
.cd-line.hot.cd-m-reveal .cd-char.called:last-of-type, .cd-line.hot.cd-m-reveal .cd-char.called { animation: cd-flipin .5s ease; }
.cd-line.hot.cd-m-kill .cd-char.killed { animation: cd-shake .45s ease; }
@keyframes cd-pulse { 50% { transform: scale(1.35); } }
@keyframes cd-flipin { from { transform: rotateY(90deg); } }
@keyframes cd-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ---- the council */
.cd-council { position: relative; margin: .1rem auto 0; width: min(100%, 300px); }
.cd-council-svg { display: block; width: 100%; height: auto; max-height: 3.9rem; }
.cd-token circle { stroke-width: 2; }
.cd-token.white circle { fill: #f4ecd8; stroke: #8b7b55; }
.cd-token.white use { color: #fffaf0; fill: #c9b98a; }
.cd-token.black circle { fill: #18171d; stroke: #c9b98a; }
.cd-token.black use { fill: #6c6250; }
.cd-council.flipping .cd-token { animation: cd-tokenflip .6s ease; transform-box: fill-box; transform-origin: center; }
@keyframes cd-tokenflip { 50% { transform: scaleX(.1); } }
.cd-guard-slot circle { fill: #2a3354; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; }
.cd-council-score { font-size: 12px; font-weight: 800; fill: var(--muted); font-family: var(--body); }

/* ---- the city: a window the SVG fills; games/viewport.js pans and zooms its viewBox (through citadelsduel.js), the fit
   button top right brings the whole city back. The cloth takes 15% of the viewer's seat colour (--me, set on the phone's
   page only; the table keeps the plain cloth) and the window's corners darken a little, as on the shelf's other boards. */
.cd-board-wrap { position: relative; border-radius: 12px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--line) 55%, var(--me, var(--line))); background: color-mix(in srgb, var(--cd-cloth) 85%, var(--me, var(--cd-cloth))); margin-top: .3rem; touch-action: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.cd-board-wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 52px); }
.cd-board-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(3, 5, 14, .5) 100%); }
.cd-board-wrap svg.board, .cd-board { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; }
.cd-page.game-page.done > .cd-board-wrap { touch-action: pan-y; }
.cd-fit { position: absolute; top: .35rem; right: .35rem; z-index: 2; background: rgba(18, 26, 46, .62); color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 45%, transparent); width: 2.4rem; height: 2.4rem; min-height: 0; padding: 0; display: grid; place-items: center; backdrop-filter: blur(2px); }
.cd-fit .ico { width: 1.35rem; height: 1.35rem; }
.cd-slot.in { fill: rgba(255, 255, 255, .05); stroke: rgba(224, 184, 79, .3); stroke-width: 1.5; }
.cd-slot.out { fill: rgba(255, 255, 255, .025); stroke: rgba(224, 184, 79, .28); stroke-width: 1.5; stroke-dasharray: 7 6; }
.cd-tiles { filter: url(#cd-lift); }

/* ---- a tile (CdArt.Tile): the owner's frame, a dusk sky of the district's colour, the building in stone with its
   windows lit, the band, the coins, the ribbon; the shelf's finish over it all (a sheen lit from the top left and a
   bevelled edge) */
.cd-tile text { font-family: var(--body); }
.cd-frame { fill: #5b5648; }
.cd-tile.white .cd-frame { fill: #f1e8d2; }
.cd-tile.black .cd-frame { fill: #131218; }
.cd-frame-line { fill: none; stroke: #3a3628; stroke-width: 1.1; }
.cd-tile.white .cd-frame-line { stroke: #b2964f; }
.cd-tile.black .cd-frame-line { stroke: #c9a54a; }
.cd-star { fill: #fff6d8; opacity: .75; }
.cd-ground { fill: rgba(4, 6, 16, .38); }
.cd-bw { fill: #ebe0c3; stroke: #161929; stroke-width: 1.2; stroke-linejoin: round; }
.cd-br { stroke: #161929; stroke-width: 1.2; stroke-linejoin: round; }
.cd-bk { fill: #151826; }
.cd-bg { fill: #ffd462; }
.cd-pole { fill: none; stroke: #161929; stroke-width: 1.4; stroke-linecap: round; }
.cd-flag { stroke: #161929; stroke-width: .8; stroke-linejoin: round; }
.cd-mull { fill: none; stroke: #161929; stroke-width: 1; }
.cd-bars { fill: none; stroke: #cfc5aa; stroke-width: 1.3; }
.cd-blade { fill: none; stroke: #dfe4ec; stroke-width: 3.4; stroke-linecap: round; paint-order: stroke; }
.cd-books { fill: none; stroke: #ffd462; stroke-width: 2.2; }
.cd-handle { fill: none; stroke: #ffd462; stroke-width: 1.8; }
.cd-stripe { fill: #efe4c8; }
.cd-band-edge { stroke: rgba(0, 0, 0, .35); stroke-width: 1; }
.cd-coin-edge { fill: #8f6614; }
.cd-coin-face { fill: url(#cd-coin); stroke: #7a560f; stroke-width: .9; }
.cd-coin-ring { fill: none; stroke: #9a6e16; stroke-width: .8; opacity: .55; }
.cd-coin-side { fill: #b07e1b; stroke: #7a560f; stroke-width: .9; }
.cd-coin-shadow { fill: #000; opacity: .35; }
.cd-rose-disc { stroke-width: 1.3; }
.cd-rose-disc.white { fill: #fbf5e6; stroke: #8b7b55; }
.cd-rose-disc.black { fill: #121116; stroke: #c9a54a; }
.cd-ribbon { fill: #f4ead2; stroke: rgba(60, 40, 10, .45); stroke-width: .8; stroke-linejoin: round; }
.cd-sheen { fill: url(#cd-sheen); pointer-events: none; }
.cd-bevel { fill: none; stroke: url(#cd-bevel); stroke-width: 2.4; pointer-events: none; }
.cd-bevel.thin { stroke-width: 1.6; }
.cd-cost { font-size: 14.5px; font-weight: 900; fill: #3a2a06; }
.cd-name { font-size: 11px; font-weight: 800; fill: #1d1a14; }
.cd-coin-n { font-size: 10.5px; font-weight: 900; fill: #3a2a06; }
.cd-cellg { transform-box: fill-box; transform-origin: center; }
.cd-cellg.fresh.cd-m-build { animation: cd-drop .5s cubic-bezier(.2, .9, .3, 1.3); }
.cd-cellg.fresh.cd-m-take { animation: cd-flip .7s ease; }
.cd-cellg.fresh.cd-m-coins .cd-coins { animation: cd-pulse .6s ease 2; transform-box: fill-box; transform-origin: center; }
@keyframes cd-drop { from { transform: translateY(-30%) scale(1.2); opacity: 0; } }
@keyframes cd-flip { 0% { transform: scaleX(1); } 50% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.cd-ghost { opacity: .55; pointer-events: none; }
.cd-halo { pointer-events: none; }
.cd-halo-fill { fill: rgba(242, 198, 80, .09); }
.cd-halo-edge { fill: none; stroke: rgba(255, 216, 110, .85); stroke-width: 3.5; stroke-linecap: square; filter: drop-shadow(0 0 4px rgba(242, 198, 80, .7)); }
.cd-guard { pointer-events: none; transition: transform .5s ease; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .55)); }
.cd-guard.moved use { animation: cd-pulse .7s ease 2; transform-box: fill-box; transform-origin: 50% 100%; }
.cd-lit { cursor: pointer; }
.cd-lit rect { fill: rgba(242, 198, 80, .14); stroke: var(--accent-2); stroke-width: 3; stroke-dasharray: 8 5; animation: cd-glow 1.4s ease-in-out infinite; }
.cd-lit.district rect { fill: rgba(242, 198, 80, .08); }
.cd-lit.sel rect { fill: rgba(242, 198, 80, .28); stroke-dasharray: none; stroke-width: 5; animation: none; }
.cd-lit-label { font-size: 18px; font-weight: 900; fill: #fff7dc; paint-order: stroke; stroke: #1a1406; stroke-width: 4px; pointer-events: none; font-family: var(--body); }
@keyframes cd-glow { 50% { stroke-opacity: .45; } }

/* ---- the market strip */
.cd-market { display: flex; align-items: flex-end; gap: .3rem; margin-top: .35rem; }
.cd-mkt { position: relative; flex: 1 1 0; min-width: 0; max-width: 4.2rem; padding: 0; margin: 0; border: 2px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cd-mkt .cd-tile-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 2.5px rgba(0, 0, 0, .55)); }
.cd-pick .cd-tile-svg, .cd-pick .cd-char-svg, .cd-call .cd-char-svg, .cd-char .cd-char-svg, .cd-round-chars .cd-char-svg { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.cd-mkt small { font-size: .62rem; line-height: 1.1; }
.cd-mkt.empty { border: 2px dashed var(--line); aspect-ratio: 1; justify-content: center; }
.cd-mkt.cannot { opacity: .4; filter: grayscale(.6); }
.cd-mkt.can { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.cd-mkt.sel { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(242, 198, 80, .35); transform: translateY(-3px); }
.cd-mkt-gap { width: .3rem; flex: none; border-left: 2px dotted var(--line); align-self: stretch; }
.cd-mkt.unique small { color: var(--accent-2); }

/* ---- the status row and the bar */
.cd-status-row { height: 3rem; display: flex; align-items: stretch; margin-top: .3rem; overflow: hidden; }
.cd-status-row .show-strip.inline { flex: 1; min-width: 0; margin: 0; padding-top: .2rem; padding-bottom: .2rem; }
.cd-status-row .show-strip.inline .show-strip-cap { font-size: .92rem; line-height: 1.15; }
.cd-status { flex: 1; display: flex; align-items: center; font-weight: 600; font-size: .9rem; line-height: 1.2; color: var(--muted); }
.cd-status.hot { color: var(--text); }
.cd-bar { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; min-height: 3rem; }
.cd-bar .btn.big { flex: 1 1 auto; }
.cd-bar .btn.off { opacity: .55; }
.cd-bar .btn.cd-chip { border-radius: 999px; flex: none; white-space: nowrap; }
.cd-bar .btn:not(.big) { white-space: nowrap; }
.cd-bar .btn.cd-chip.on { background: color-mix(in srgb, var(--accent) 35%, var(--panel)); border-color: var(--accent); color: var(--text); }

/* ---- sheets */
.cd-draft .body { text-align: center; }
.cd-draft-row { display: flex; gap: .45rem; justify-content: center; flex-wrap: wrap; margin: .4rem 0; }
.cd-pick { position: relative; width: 4.6rem; padding: .25rem; border: 2px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); display: flex; flex-direction: column; align-items: center; gap: .2rem; cursor: pointer; }
.cd-draft-row.tiles .cd-pick { width: 6.2rem; }
.cd-pick .cd-char-svg, .cd-pick .cd-tile-svg { width: 100%; height: auto; display: block; }
.cd-pick small { font-size: .62rem; line-height: 1.15; color: var(--muted); }
.cd-pick.sel { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(242, 198, 80, .35); transform: translateY(-4px); }
.cd-pick.sel.discard { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 107, 94, .3); }
.cd-pick-tag { position: absolute; top: -.6rem; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-text); font-size: .7rem; font-weight: 800; border-radius: 999px; padding: 0 .45rem; }
.cd-pick.discard .cd-pick-tag { background: var(--danger); color: #fff; }
.cd-pick-from { font-size: .62rem; color: var(--accent-2); }
.cd-call-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .2rem; }
.cd-call { padding: 0; border: 2px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; }
.cd-call .cd-char-svg { width: 100%; height: auto; display: block; }
.cd-call.dim { opacity: .3; }
.cd-call.sel { border-color: var(--accent-2); transform: translateY(-3px); }
.cd-q-note { font-size: .85rem; margin: .35rem 0 0; }
.cd-q-note.warn { color: var(--accent-2); }
.cd-steal { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.cd-steal li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cd-stepper { display: inline-flex; align-items: center; gap: .4rem; }
.cd-stepper b { min-width: 1.2rem; text-align: center; }
.cd-round-chars { display: flex; justify-content: center; gap: .3rem; margin: .3rem 0; }
.cd-round-chars .cd-char-svg { width: 2.8rem; height: auto; }
.cd-round-note { font-weight: 700; }
.cd-round-purses { list-style: none; padding: 0; margin: .4rem 0; display: flex; flex-direction: column; gap: .25rem; }
.cd-round-purses li { color: var(--cauldron, var(--text)); }
.cd-round-purses .ico.seat { width: 1rem; height: 1rem; }
.cd-round-purses .ico.white { color: #fffaf0; }
.cd-round-purses .ico.black { color: #0e0d12; filter: drop-shadow(0 0 1.5px #c9b98a); }
.cd-score-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cd-score-table th, .cd-score-table td { padding: .3rem .35rem; border-bottom: 1px solid var(--line); text-align: right; }
.cd-score-table th:first-child, .cd-score-table td:first-child { text-align: left; }
.cd-score-table th { color: var(--cauldron, var(--text)); }
.cd-score-table .ico.seat { width: .95rem; height: .95rem; }
.cd-score-table .ico.white { color: #fffaf0; }
.cd-score-table .ico.black { color: #0e0d12; filter: drop-shadow(0 0 1.5px #c9b98a); }
.cd-score-table tr.total td { font-size: 1.2rem; color: var(--accent-2); }
.cd-score-table tr.purse td { color: var(--muted); font-size: .85rem; }
.cd-tiebreak { margin-top: .5rem; color: var(--accent-2); font-weight: 700; }
.cd-rules h3 { margin: .8rem 0 .2rem; color: var(--accent-2); }
.cd-rules-chars, .cd-rules-tiles { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.cd-rules-chars li, .cd-rules-tiles li { display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; }
.cd-rules-chars .cd-char-svg { width: 2.3rem; flex: none; }
.cd-rules-tiles .cd-tile-svg { width: 2.8rem; flex: none; }
.cd-lobby-row { display: flex; gap: .4rem; align-items: center; margin: .3rem 0 .5rem; }
.cd-lobby-row .cd-tile-svg { width: 3.4rem; }
.cd-lobby-row .cd-char-svg { width: 2.4rem; }
.cd-rank { font-size: 11px; font-weight: 900; fill: #3a2a06; font-family: var(--body); }
.cd-char-name { font-size: 9px; font-weight: 800; fill: #1d1a14; font-family: var(--body); }

/* ---- the table page */
.cd-tablepage { max-width: 1200px; }
.cd-table-grid { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: 1rem; align-items: start; }
.cd-table-side { display: flex; flex-direction: column; gap: .5rem; }
.cd-board-wrap.table { height: min(72vh, 760px); }
.cd-market.table .cd-mkt { max-width: 5rem; cursor: default; }
@media (max-width: 760px) { .cd-table-grid { grid-template-columns: 1fr; } .cd-board-wrap.table { height: 60vh; } }