/* Citadels: parchment and stone. A warm parchment page over a faint ashlar of stone blocks, ink text, a slate-blue
   accent and gold for the crown; the five district colours bright (--ci-noble, --ci-religious, --ci-trade,
   --ci-military, --ci-unique). The cards are our own drawings (CiArt). The theme block swaps the shared tokens while the
   game is on screen (html.theme-citadels); the rest is this game's own pieces, scoped under .ci-* so nothing leaks into
   the other games' pages. */
html.theme-citadels {
    color-scheme: light;
    --bg: #e8dfca;
    --panel: #f8f1df;
    --panel-2: #efe5cc;
    --panel-3: #e3d5b4;
    --line: #c9b68e;
    --text: #2a2016;
    --muted: #6e604b;
    --accent: #3d5a86;
    --accent-2: #5675a3;
    --accent-dark: #283d5e;
    --accent-text: #ffffff;
    --parch: #f8f1df;
    --parch-2: #e3d5b4;
    --parch-ink: #2a2016;
    --danger: #b3352c;
    --ok: #3b8a4e;
    --shadow: 0 10px 28px rgba(60, 42, 18, .2);
    --display: "Grenze", "Iowan Old Style", Georgia, serif;
    --ci-noble: #d29b16;
    --ci-religious: #3f6fc4;
    --ci-trade: #3b9a57;
    --ci-military: #c4413a;
    --ci-unique: #8a4fb8;
    --ci-gold: #e3b23c;
    --ci-stone: #b9ae98;
}
html.theme-citadels body {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(255, 250, 235, .8), transparent 60%),
        repeating-linear-gradient(0deg, rgba(120, 100, 70, .07) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(90deg, rgba(120, 100, 70, .05) 0 1px, transparent 1px 68px),
        var(--bg);
    background-attachment: fixed;
}
html.theme-citadels .topbar .round { color: var(--accent-dark); }
html.theme-citadels .btn { border-radius: 10px; }
html.theme-citadels .btn.primary { box-shadow: 0 3px 0 var(--accent-dark); border-color: var(--accent-dark); }
html.theme-citadels .btn.primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-dark); }
html.theme-citadels .pill.brewing { background: var(--ci-gold); color: #2a1c06; border-color: #a77c14; }
html.theme-citadels .sheet-backdrop.see-through { background: transparent; }
html.theme-citadels .standings li.place-1 { color: #8a6512; }

/* ---- a card: the SVG face, sized by its font-size (3.75em wide, 5:7) */
.ci-card {
    position: relative; display: inline-block; flex: none; vertical-align: middle;
    width: 3.75em; aspect-ratio: 60 / 84; border-radius: .32em; font-size: 1rem;
    filter: drop-shadow(0 .1em .16em rgba(60, 40, 15, .35));
    transition: transform .18s ease, opacity .2s, filter .2s;
}
.ci-card svg { display: block; width: 100%; height: 100%; }
.ci-card svg text { font-family: var(--display); }
.ci-card.xs { font-size: 7px; }
.ci-card.sm { font-size: 11px; }
.ci-card.md { font-size: 15px; }
.ci-card.lg { font-size: 21px; }
.ci-card.xl { font-size: 30px; }
.ci-card.lit { cursor: pointer; filter: drop-shadow(0 0 .25em rgba(227, 178, 60, .9)) drop-shadow(0 .1em .16em rgba(60, 40, 15, .35)); }
.ci-card.dim { opacity: .5; filter: grayscale(.45); }
.ci-card.sel { transform: translateY(-.55em); filter: drop-shadow(0 0 .35em rgba(61, 90, 134, 1)); }
.ci-card.fresh { animation: ci-flipin .45s cubic-bezier(.2, .8, .3, 1.2) both; }
.ci-card.landed { animation: ci-land .6s cubic-bezier(.2, .8, .3, 1.2) both; }
.ci-card.ghost { opacity: .3; filter: grayscale(1); animation: ci-gone .9s ease both; }
.ci-card.struck::after { content: ""; position: absolute; inset: 45% -5% auto; height: 2px; background: var(--danger); transform: rotate(-30deg); }
.ci-badge {
    position: absolute; top: -.35em; right: -.35em; min-width: 1.4em; height: 1.4em; padding: 0 .3em; border-radius: .7em;
    background: var(--ci-gold); color: #2a1c06; font: 700 .72em/1.4em var(--body); text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.ci-card.xs .ci-badge, .ci-card.sm .ci-badge { font-size: .8em; }
.ci-tucked { position: absolute; bottom: -.3em; right: -.3em; padding: 0 .3em; border-radius: .5em; background: var(--ci-unique); color: #fff; font: 700 .6em/1.5em var(--body); box-shadow: 0 0 0 1px #fff8e6, 0 1px 2px rgba(0, 0, 0, .3); }
.ci-card.xs .ci-tucked, .ci-card.sm .ci-tucked, .ci-card.row .ci-tucked { font-size: .8em; }
/* A row of cards (a city, the hand) casts one shadow as a group, not one per card; a card's own state (lit, lifted,
   dimmed, the ghost) keeps its filter. */
.ci-hand, .ci-city, .ci-minicity { filter: drop-shadow(0 .12rem .14rem rgba(60, 40, 15, .32)); }
.ci-hand .ci-card:not(.lit):not(.sel):not(.dim):not(.ghost), .ci-city .ci-card:not(.lit):not(.sel):not(.dim):not(.ghost), .ci-minicity .ci-card:not(.ghost) { filter: none; }

/* ---- the faces' drawing (CiArt): parchment, the band, the picture window at dusk, the ribbon, the coins, the finish */
.ci-parch { fill: #f7eed7; }
.ci-parch.char { fill: #f3e8cf; }
.ci-window { fill: none; stroke-width: .7; stroke-opacity: .6; }
.ci-band-edge { stroke: rgba(0, 0, 0, .28); stroke-width: .6; }
.ci-ribbon { fill: #fbf4de; stroke-width: .8; stroke-linejoin: round; }
.ci-card svg .ci-name, .ci-card svg .ci-cname { font-weight: 800; fill: #2a2016; letter-spacing: .01em; }
.ci-card svg .ci-cost { font-size: 10px; font-weight: 900; fill: #3a2a06; font-family: var(--body); }
.ci-card svg .ci-rank { font-size: 10.5px; font-weight: 900; fill: #3a2a06; font-family: var(--body); }
.ci-beaut { fill: none; stroke: #ffd75e; stroke-width: 1.3; stroke-dasharray: 2 1.5; }
.ci-coin-edge { fill: #8f6614; }
.ci-coin-face { fill: url(#ci-coin); stroke: #7a560f; stroke-width: .6; }
.ci-coin-ring { fill: none; stroke: #9a6e16; stroke-width: .5; opacity: .55; }
.ci-sheen { fill: url(#ci-sheen); pointer-events: none; }
.ci-bevel { fill: none; stroke: url(#ci-bevel); stroke-width: 1.4; pointer-events: none; }
.ci-gilt { fill: none; stroke: #c9a54a; stroke-width: .7; }
.ci-panel-edge { fill: none; stroke: rgba(0, 0, 0, .3); stroke-width: .7; }
.ci-glyph { filter: drop-shadow(0 .6px .5px rgba(0, 0, 0, .4)); }
/* the buildings, in tile units scaled into the window: stone walls, dark ink outlines, gold windows */
.ci-star { fill: #fff6d8; opacity: .8; }
.ci-moon { fill: #f6efd2; }
.ci-ground { fill: #4a3f2e; opacity: .75; }
.ci-bw { fill: #efe5c9; stroke: #1d1a24; stroke-width: 1.3; stroke-linejoin: round; }
.ci-br { stroke: #1d1a24; stroke-width: 1.3; stroke-linejoin: round; }
.ci-bk { fill: #1b1c28; }
.ci-bg { fill: #ffd462; }
.ci-ink { fill: #1d1a24; }
.ci-pole { fill: none; stroke: #1d1a24; stroke-width: 1.5; stroke-linecap: round; }
.ci-flag { stroke: #1d1a24; stroke-width: .8; stroke-linejoin: round; }
.ci-mull { fill: none; stroke: #1d1a24; stroke-width: 1; stroke-linecap: round; }
.ci-bars { fill: none; stroke: #cfc5aa; stroke-width: 1.3; }
.ci-blade { fill: none; stroke: #7d8796; stroke-width: 3.4; stroke-linecap: round; }
.ci-books { fill: none; stroke: #ffd462; stroke-width: 2.2; }
.ci-stripe { fill: #efe4c8; }
.ci-wave { fill: none; stroke: #e4f3ff; stroke-width: 1.4; stroke-linecap: round; }
.ci-post { fill: none; stroke: #5a3a1e; stroke-width: 2.2; }
.ci-wood { fill: #8a5a32; stroke: #1d1a24; stroke-width: .9; }
.ci-crate { fill: #c08a4c; stroke: #1d1a24; stroke-width: .9; }
.ci-clock { fill: #fbf4de; stroke: #1d1a24; stroke-width: 1; }
.ci-smoke { fill: none; stroke: #ece8f2; stroke-width: 2; stroke-linecap: round; opacity: .75; }
.ci-fume { fill: none; stroke: #b8f0a0; stroke-width: 2; stroke-linecap: round; opacity: .9; }
.ci-dragon { fill: none; stroke: #ffd462; stroke-width: 3.2; stroke-linecap: round; }
.ci-lantern { fill: #ff8a4a; stroke: #1d1a24; stroke-width: .8; }
.ci-scaffold { fill: none; stroke: #7a4e2a; stroke-width: 2; stroke-linecap: round; }
.ci-rock { fill: #9c8d76; stroke: #1d1a24; stroke-width: 1.2; stroke-linejoin: round; }
.ci-timber { fill: none; stroke: #7a4e2a; stroke-width: 2.8; stroke-linecap: round; }
.ci-ghost { fill: #f4f6ff; stroke: #1d1a24; stroke-width: 1; opacity: .94; }
.ci-trunk { fill: none; stroke: #5a3a1e; stroke-width: 2.4; }
.ci-leaf { fill: #4f8f4a; stroke: #1d1a24; stroke-width: 1; }
.ci-globe { fill: #78aede; stroke: #1d1a24; stroke-width: 1; }
.ci-grave { fill: none; stroke: #3b3428; stroke-width: 2.2; stroke-linecap: round; }
.ci-scope { fill: none; stroke: #2b2a36; stroke-width: 3.6; stroke-linecap: round; }
.ci-jet { fill: none; stroke: #e4f3ff; stroke-width: 1.8; stroke-linecap: round; }
.ci-patch { fill: #a88a5a; stroke: #1d1a24; stroke-width: .7; }
.ci-pick { fill: none; stroke: #3b3f4a; stroke-width: 2.2; stroke-linecap: round; }
.ci-vault { fill: #a3abb6; stroke: #1d1a24; stroke-width: 1.3; }
.ci-vault-ring { fill: none; stroke: #1d1a24; stroke-width: 1; }
.ci-ivy { fill: none; stroke: #3f7a3a; stroke-width: 2; stroke-linecap: round; }
.ci-fire { fill: #ff9a3c; stroke: #1d1a24; stroke-width: 1; }
.ci-iron { fill: #4a4f5a; stroke: #1d1a24; stroke-width: 1; }
.ci-horse { fill: #6b4a2e; stroke: #1d1a24; stroke-width: .8; }
.ci-brace { fill: none; stroke: #8a5a32; stroke-width: 1.6; }
.ci-hay { fill: #e6c35a; stroke: #1d1a24; stroke-width: .9; }
.ci-curtain { fill: #b3262e; stroke: #1d1a24; stroke-width: .8; }
.ci-mask { fill: #fbf4de; stroke: #1d1a24; stroke-width: .8; }
.ci-potion { fill: #8fe0a8; stroke: #1d1a24; stroke-width: 1; }
@keyframes ci-flipin { from { transform: perspective(300px) rotateY(90deg) translateY(-.4em); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes ci-land { from { transform: translateY(-1.4em) scale(1.25); opacity: 0; } 60% { opacity: 1; } to { transform: none; } }
@keyframes ci-gone { from { opacity: 1; transform: none; } to { opacity: .25; transform: rotate(8deg) translateY(.3em); } }

/* ---- the page: one column the height of the screen; only the hand and the cities scroll (sideways) */
.ci-page.game-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; padding: .5rem .65rem calc(.45rem + env(safe-area-inset-bottom, 0px)); gap: .35rem; }
.ci-page.game-page > * { flex: none; }
.ci-page.game-page > .ci-others { flex: 1 1 auto; min-height: 0; }
.ci-page.game-page.done { height: auto; min-height: 100dvh; overflow: visible; }
.ci-page.game-page .topbar { margin-bottom: 0; flex-wrap: nowrap; }
.ci-page.game-page .topbar > .row:first-child { display: flex; align-items: center; gap: .4rem; min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; }
.ci-page.game-page .topbar > .row:last-child { flex: none; }
.ci-page.game-page .topbar .round { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ci-page.game-page .topbar .pill { flex: none; }
.ci-none { color: var(--muted); font-size: .8rem; font-style: italic; padding: .2rem .3rem; }

/* ---- the character strip */
.ci-strip { display: flex; gap: .2rem; align-items: stretch; }
.ci-rank {
    position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .05rem;
    padding: .2rem .1rem .3rem; border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--gem) 70%, transparent);
    --tint: 16%;
    background: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 48%, rgba(60, 40, 15, .08)), color-mix(in srgb, var(--gem) var(--tint), var(--panel));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(60, 40, 15, .12), 0 1px 2px rgba(60, 40, 15, .18);
    color: var(--text); font: inherit; cursor: pointer;
    transition: transform .2s, background .3s, opacity .3s;
}
/* the rank on a small glossy coin, as on the cards */
.ci-rank .num, .ci-lobby-rank .num {
    display: grid; place-items: center; width: .95rem; height: .95rem; border-radius: 50%; font: 900 .6rem/1 var(--body); color: #3a2a06;
    background: radial-gradient(circle at 36% 30%, #fff6c4, #f6cf5c 38%, #b9861d); box-shadow: 0 0 0 1px #8a6514, 0 1px 1px rgba(0, 0, 0, .25);
}
.ci-rank .num { position: absolute; top: .14rem; left: .14rem; width: .8rem; height: .8rem; font-size: .52rem; z-index: 1; }
.ci-rank .glyph { width: 1.3rem; height: 1.3rem; margin-top: .22rem; color: color-mix(in srgb, var(--gem) 82%, #000); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7)); }
.ci-rank .nm { font-size: .5rem; line-height: 1.05; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-rank .who { position: absolute; bottom: -.22rem; left: 50%; width: .55rem; height: .55rem; margin-left: -.275rem; border-radius: 50%; background: var(--cauldron); box-shadow: 0 0 0 1.5px var(--panel); }
.ci-rank .marks { position: absolute; top: -.3rem; right: -.2rem; display: flex; gap: 1px; }
.ci-rank .mk { width: .85rem; height: .85rem; padding: 1px; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.ci-rank .mk.kill { color: #1e1e28; background: #f1d6d3; }
.ci-rank .mk.rob { color: #2b8a85; }
.ci-rank .mk.witch { color: #5f6072; }
.ci-rank .mk.warrant { color: #6b4b2a; }
.ci-rank .mk.threat { color: #c2457a; }
.ci-rank .mk.live { box-shadow: 0 0 0 1.5px var(--ci-gold), 0 0 6px var(--ci-gold); }
.ci-rank.s-faceup { opacity: .38; filter: grayscale(.7); }
.ci-rank.s-faceup::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: var(--danger); transform: rotate(-35deg); }
.ci-rank.s-silent { opacity: .55; }
.ci-rank.s-silent .nm::before { content: "– "; }
.ci-rank.s-revealed { --tint: 32%; }
.ci-rank.s-current, .ci-rank.lit { --tint: 46%; transform: translateY(-2px); box-shadow: 0 0 0 2px var(--ci-gold), 0 3px 8px rgba(60, 40, 15, .3); }
.ci-rank.mine { outline: 2px dashed var(--accent); outline-offset: 1px; }
.ci-rank.killed .glyph { opacity: .45; }
.ci-pot { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 .2rem; font-size: .7rem; }
.ci-pot .ico { width: 1rem; height: 1rem; }
.ci-strip.large { gap: .45rem; }
.ci-strip.large .ci-rank { padding: .5rem .3rem .6rem; }
.ci-strip.large .ci-rank .glyph { width: 2.6rem; height: 2.6rem; }
.ci-strip.large .ci-rank .nm { font-size: .9rem; }
.ci-strip.large .ci-rank .num { font-size: .95rem; width: 1.6rem; height: 1.6rem; top: -.4rem; left: -.35rem; }
.ci-strip.large .ci-rank .mk { width: 1.4rem; height: 1.4rem; }

/* ---- the other players: compact rows */
/* The table the others sit at: a cloth that takes 15% of the viewer's seat colour (--me, set on the phone's page only)
   with its corners a little darker. It is a size container, so the rows can use the height it has: with two to four
   players the cities show as small cards when they fit (chips otherwise); with six to eight the rows go to one line
   each unless two lines fit. */
.ci-others {
    display: flex; flex-direction: column; gap: .25rem; overflow: hidden; padding: .25rem; border-radius: 12px;
    container: ci-others / size;
    background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(60, 40, 15, .16) 100%), color-mix(in srgb, var(--panel-2) 85%, var(--me, var(--panel-2)));
    box-shadow: inset 0 1px 3px rgba(60, 40, 15, .25);
}
.ci-page.done .ci-others { container-type: normal; }
.ci-row {
    display: grid; grid-template-columns: minmax(4.6rem, 1fr) auto auto; grid-template-areas: "who purse hand" "chars chars chars" "city city city";
    align-items: center; gap: .1rem .4rem; width: 100%; padding: .28rem .45rem; border-radius: 10px; text-align: left; font: inherit; color: var(--text);
    border: 1px solid var(--line); border-left: 5px solid var(--cauldron); cursor: pointer; transition: box-shadow .3s, background .3s;
    background: linear-gradient(170deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 40%), var(--panel);
    box-shadow: 0 1px 3px rgba(60, 40, 15, .22);
}
.ci-others.n1 .ci-row, .ci-others.n2 .ci-row, .ci-others.n3 .ci-row, .ci-others.n4 .ci-row { padding: .32rem .55rem; }
/* six to eight: one line each, the characters as their glyphs */
.ci-others.n5 .ci-row, .ci-others.n6 .ci-row, .ci-others.n7 .ci-row {
    grid-template-columns: minmax(3.4rem, 5.4rem) auto auto auto minmax(0, 1fr); grid-template-areas: "who purse hand chars city"; padding: .16rem .4rem; gap: 0 .3rem;
}
.ci-others.n5 .ci-chars, .ci-others.n6 .ci-chars, .ci-others.n7 .ci-chars { flex-wrap: nowrap; }
.ci-others.n5 .ci-char-chip > span, .ci-others.n6 .ci-char-chip > span, .ci-others.n7 .ci-char-chip > span { display: none; }
.ci-others.n5 .ci-char-chip, .ci-others.n6 .ci-char-chip, .ci-others.n7 .ci-char-chip { padding: .1rem .2rem; }
.ci-others.n5 .ci-none, .ci-others.n6 .ci-none, .ci-others.n7 .ci-none { font-size: .7rem; padding: 0; white-space: nowrap; }
@container ci-others (min-height: 16rem) {
    .ci-others.n5 .ci-row { grid-template-columns: minmax(4.2rem, 6.4rem) auto auto 1fr; grid-template-areas: "who purse hand chars" "city city city city"; padding: .22rem .4rem; }
    .ci-others.n5 .ci-char-chip > span { display: inline; }
}
@container ci-others (min-height: 19.5rem) {
    .ci-others.n6 .ci-row { grid-template-columns: minmax(4.2rem, 6.4rem) auto auto 1fr; grid-template-areas: "who purse hand chars" "city city city city"; padding: .2rem .4rem; }
    .ci-others.n6 .ci-char-chip > span { display: inline; }
}
@container ci-others (min-height: 22.5rem) {
    .ci-others.n7 .ci-row { grid-template-columns: minmax(4.2rem, 6.4rem) auto auto 1fr; grid-template-areas: "who purse hand chars" "city city city city"; padding: .18rem .4rem; }
    .ci-others.n7 .ci-char-chip > span { display: inline; }
}
/* two to four: the cities as small cards when the rows have the height */
.ci-card.row { display: none; font-size: 9px; }
@container ci-others (min-height: 21rem) { .ci-others.n3 .ci-card.row { display: inline-block; } .ci-others.n3 .ci-mini { display: none; } }
@container ci-others (min-height: 14rem) { .ci-others.n2 .ci-card.row { display: inline-block; } .ci-others.n2 .ci-mini { display: none; } }
@container ci-others (min-height: 7rem) { .ci-others.n1 .ci-card.row { display: inline-block; } .ci-others.n1 .ci-mini { display: none; } }
.ci-row .ci-who { grid-area: who; display: flex; align-items: center; gap: .25rem; min-width: 0; font-weight: 700; }
.ci-row .ci-who .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--cauldron) 75%, #000); }
.ci-who .seat { width: 1rem; height: 1rem; color: var(--cauldron); flex: none; }
.ci-crown { width: 1rem; height: 1rem; color: #c99512; flex: none; filter: drop-shadow(0 0 2px rgba(227, 178, 60, .8)); }
.ci-purse { grid-area: purse; display: inline-flex; align-items: center; gap: .15rem; font-weight: 700; }
.ci-purse .ico { width: 1rem; height: 1rem; }
.ci-handcount { grid-area: hand; display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; }
.ci-back-mini { display: inline-block; width: .62rem; height: .86rem; border-radius: 2px; background: repeating-linear-gradient(45deg, #4a2d6b 0 2px, #e3b23c 2px 3px); box-shadow: 0 0 0 1px #4a2d6b; vertical-align: -.1rem; }
.ci-chars { grid-area: chars; display: flex; gap: .2rem; flex-wrap: wrap; justify-content: flex-start; min-width: 0; }
.ci-char-chip {
    display: inline-flex; align-items: center; gap: .15rem; padding: .05rem .35rem .05rem .2rem; border-radius: 999px; font: 600 .68rem/1.4 var(--body);
    background: linear-gradient(170deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%), color-mix(in srgb, var(--gem) 22%, var(--panel)); border: 1px solid color-mix(in srgb, var(--gem) 65%, transparent); color: var(--text);
    box-shadow: 0 1px 1px rgba(60, 40, 15, .15);
}
.ci-char-chip .ico { width: .85rem; height: .85rem; color: color-mix(in srgb, var(--gem) 80%, #000); }
.ci-char-chip.unknown { --gem: #8a8170; padding: .05rem .4rem; color: var(--muted); }
.ci-char-chip.fresh { animation: ci-flipin .5s ease both; }
.ci-char-chip.acting { box-shadow: 0 0 0 2px var(--ci-gold); }
.ci-char-chip.called { opacity: .75; }
.ci-minicity { grid-area: city; display: flex; gap: .15rem; align-items: center; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.ci-minicity::-webkit-scrollbar { display: none; }
.ci-mini {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.25rem; border-radius: 3px;
    font: 700 .62rem/1 var(--display); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .35);
    background-image: linear-gradient(160deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%);
}
.ci-mini.t-noble { background-color: var(--ci-noble); }
.ci-mini.t-religious { background-color: var(--ci-religious); }
.ci-mini.t-trade { background-color: var(--ci-trade); }
.ci-mini.t-military { background-color: var(--ci-military); }
.ci-mini.t-unique { background-color: var(--ci-unique); }
.ci-mini.beaut { box-shadow: 0 0 0 1.5px var(--ci-gold), inset 0 -2px 0 rgba(0, 0, 0, .2); }
.ci-mini.landed { animation: ci-land .6s ease both; }
.ci-done { width: 1rem; height: 1rem; color: var(--ok); flex: none; }
.ci-row.on { box-shadow: 0 0 0 2px var(--ci-gold), 0 2px 8px rgba(60, 40, 15, .25); background: color-mix(in srgb, var(--ci-gold) 12%, var(--panel)); }
.ci-row.wait { box-shadow: 0 0 0 2px var(--accent); border-style: dashed; border-left-style: solid; }
.ci-row.complete { background: color-mix(in srgb, var(--ok) 10%, var(--panel)); }
.ci-row.mood-reveal { animation: ci-pulse .8s ease; }
.ci-row.mood-build, .ci-row.mood-complete { animation: ci-pulse .7s ease; }
.ci-row.mood-rob, .ci-row.mood-destroy, .ci-row.mood-kill { animation: ci-shake .5s ease; background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }
.ci-row.mood-crown .ci-crown { animation: ci-hop .7s ease; }
.ci-row.mood-gold .ci-purse, .ci-row.mood-cards .ci-handcount { animation: ci-bump .5s ease; }
.ci-row.mood-swap { animation: ci-pulse .8s ease; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
@keyframes ci-pulse { 0% { transform: none; } 40% { transform: scale(1.025); } 100% { transform: none; } }
@keyframes ci-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes ci-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-6px) scale(1.25); } }
@keyframes ci-bump { 0%, 100% { transform: none; } 40% { transform: scale(1.3); } }
.ci-solo { margin: .2rem; }

/* ---- you: your line and your city */
.ci-me { padding: .3rem .45rem .35rem; border-radius: 12px; background: color-mix(in srgb, var(--cauldron) 9%, var(--panel)); border: 1.5px solid color-mix(in srgb, var(--cauldron) 50%, var(--line)); }
.ci-me-line { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.ci-me-line .ci-who { display: flex; align-items: center; gap: .25rem; font-weight: 800; }
.ci-mychars { display: flex; gap: .2rem; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ci-mychars .ci-char-chip { cursor: pointer; }
.ci-citysize { display: inline-flex; align-items: center; gap: .15rem; font-size: .78rem; color: var(--muted); font-weight: 700; flex: none; }
.ci-citysize .ico { width: .95rem; height: .95rem; }
.ci-city { display: flex; gap: .25rem; overflow-x: auto; overflow-y: visible; padding: .3rem .1rem .1rem; scrollbar-width: none; min-height: 3.3rem; align-items: flex-end; }
.ci-city::-webkit-scrollbar { display: none; }
.ci-city.wrap { flex-wrap: wrap; overflow: visible; }
.ci-me.mood-rob, .ci-me.mood-destroy { animation: ci-shake .5s ease; }
.ci-me.mood-crown .ci-crown { animation: ci-hop .7s ease; }

/* ---- the status row, the powers, the hand, the bar */
.ci-status-row { min-height: 2.15rem; display: flex; align-items: stretch; }
.ci-status-row > * { flex: 1; }
.ci-status { display: flex; align-items: center; justify-content: center; text-align: center; padding: .25rem .5rem; border-radius: 10px; font-weight: 600; font-size: .88rem; background: var(--panel-2); color: var(--text); }
.ci-status.hot { background: color-mix(in srgb, var(--ci-gold) 35%, var(--panel)); }
.ci-powers { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding: .05rem 0; }
.ci-powers::-webkit-scrollbar { display: none; }
.ci-power-chip {
    flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border-radius: 999px; font: 700 .82rem/1.1 var(--body);
    background: var(--accent); color: var(--accent-text); border: 1px solid var(--accent-dark); box-shadow: 0 2px 0 var(--accent-dark); cursor: pointer;
}
.ci-power-chip .ico { width: 1rem; height: 1rem; }
.ci-power-chip.off { background: var(--panel-3); color: var(--muted); border-color: var(--line); box-shadow: none; }
.ci-hand-wrap { min-height: 0; }
.ci-hand { display: flex; gap: .3rem; overflow-x: auto; overflow-y: visible; padding: .7rem .2rem .25rem; scrollbar-width: none; min-height: 6.4rem; align-items: flex-end; }
.ci-hand::-webkit-scrollbar { display: none; }
.ci-hand.n7 .ci-card, .ci-hand.n8 .ci-card, .ci-hand.n9 .ci-card, .ci-hand.n10 .ci-card, .ci-hand.n11 .ci-card, .ci-hand.n12 .ci-card, .ci-hand.n13 .ci-card, .ci-hand.n14 .ci-card { margin-right: -.9rem; }
.ci-hand .ci-card.sel { margin-right: 0; z-index: 2; }
.ci-bar { display: flex; gap: .45rem; align-items: center; min-height: 3.2rem; flex-wrap: wrap; }
.ci-bar > .btn { flex: 1 1 0; min-width: 0; }
.ci-bar .ico { width: 1.1rem; height: 1.1rem; }
.ci-bar-wait { flex: 1; text-align: center; color: var(--muted); font-weight: 600; }
.ci-error { flex-basis: 100%; margin: 0; font-size: .8rem; }

/* ---- the draft */
.ci-draft .ci-draft-fan { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .5rem; justify-items: center; padding: .4rem 0; }
.ci-draft-pick { display: flex; flex-direction: column; align-items: center; gap: .2rem; transition: transform .2s; }
.ci-draft-pick .ci-card { font-size: 19px; cursor: pointer; }
.ci-draft-pick small { font-size: .72rem; color: var(--muted); text-align: center; max-width: 6rem; line-height: 1.15; }
.ci-draft-pick.keep { transform: translateY(-.4rem); }
.ci-draft-pick.keep .ci-card { filter: drop-shadow(0 0 .3em var(--ci-gold)); }
.ci-draft-pick.keep small { color: var(--accent-dark); font-weight: 800; }
.ci-draft-pick.discard .ci-card { opacity: .45; filter: grayscale(.8); }
.ci-draft-pick.discard small { color: var(--danger); font-weight: 800; }
.ci-draft-text { font-size: .86rem; margin: .3rem .1rem; }
.ci-draft-foot { display: flex; flex-wrap: wrap; gap: .6rem; font-size: .78rem; color: var(--muted); align-items: center; }
.ci-draft-foot .ci-card { margin-left: .15rem; }

/* ---- the questions and the powers' targets */
.ci-q-cards { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; padding: .4rem 0; }
.ci-q-card { transition: transform .2s; cursor: pointer; }
.ci-q-card.sel { transform: translateY(-.4rem); }
.ci-q-card.sel .ci-card { filter: drop-shadow(0 0 .35em var(--accent)); }
.ci-q-card.off { opacity: .45; }
.ci-q-list { display: flex; flex-direction: column; gap: .35rem; padding: .3rem 0; }
.ci-q-opt {
    display: flex; align-items: center; gap: .45rem; padding: .55rem .75rem; border-radius: 10px; font: 600 .95rem/1.2 var(--body); text-align: left;
    background: var(--panel-2); border: 1.5px solid var(--line); color: var(--text); cursor: pointer;
}
.ci-q-opt .ico { width: 1.1rem; height: 1.1rem; }
.ci-q-opt.seat { border-left: 5px solid var(--cauldron); }
.ci-q-opt.seat .seat { color: var(--cauldron); }
.ci-q-opt.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); box-shadow: 0 0 0 1.5px var(--accent); }
.ci-q-opt.off { opacity: .45; }
.ci-q-why { color: var(--danger); font-size: .82rem; margin: .2rem 0 0; }
.ci-p-ranks { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; justify-items: center; padding: .3rem 0; }
.ci-p-rank { position: relative; transition: transform .2s; }
.ci-p-rank .ci-card { cursor: pointer; font-size: 13px; }
.ci-p-rank.sel { transform: translateY(-.3rem); }
.ci-p-rank.sel .ci-card { filter: drop-shadow(0 0 .3em var(--accent)); }
.ci-p-rank.off { opacity: .35; filter: grayscale(.8); }
.ci-p-live { position: absolute; top: -.4rem; right: -.4rem; width: 1.4rem; height: 1.4rem; padding: .15rem; border-radius: 50%; background: var(--ci-gold); color: #3b2a06; }
.ci-p-seats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; padding: .3rem 0; }
.ci-p-seat {
    display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; padding: .45rem .6rem; border-radius: 10px; border: 1.5px solid var(--line);
    border-left: 5px solid var(--cauldron); background: var(--panel-2); font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.ci-p-seat .nm { font-weight: 800; }
.ci-p-seat .seat { width: 1rem; height: 1rem; color: var(--cauldron); }
.ci-p-seat small { display: inline-flex; align-items: center; gap: .2rem; color: var(--muted); }
.ci-p-seat small .ico { width: .85rem; height: .85rem; }
.ci-p-seat.sel { box-shadow: 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.ci-p-seat.off { opacity: .45; }
.ci-p-types { display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem 0; }
.ci-p-type { display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .6rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--panel-2); font: 600 .85rem var(--body); color: var(--text); cursor: pointer; text-transform: capitalize; }
.ci-p-type .ico { width: 1rem; height: 1rem; }
.ci-p-type.t-noble .ico { color: var(--ci-noble); }
.ci-p-type.t-religious .ico { color: var(--ci-religious); }
.ci-p-type.t-trade .ico { color: var(--ci-trade); }
.ci-p-type.t-military .ico { color: var(--ci-military); }
.ci-p-type.t-unique .ico { color: var(--ci-unique); }
.ci-p-type.sel { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.ci-p-or { margin: .4rem 0 .1rem; font-size: .82rem; color: var(--muted); }
.ci-p-hand, .ci-p-citycards { display: flex; gap: .3rem; flex-wrap: wrap; padding: .45rem .1rem .2rem; }
.ci-p-hand .ci-card, .ci-p-citycards .ci-card { cursor: pointer; }
.ci-p-cities { display: flex; flex-direction: column; gap: .35rem; max-height: 46dvh; overflow-y: auto; }
.ci-p-city { border-left: 4px solid var(--cauldron); padding-left: .4rem; }
.ci-p-cityname { display: flex; align-items: center; gap: .25rem; font-weight: 700; font-size: .85rem; }
.ci-p-cityname .seat { width: .9rem; height: .9rem; color: var(--cauldron); }

/* ---- the sheets: a player, a character, the scores, the rules */
.ci-player-line { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; font-weight: 600; margin: 0 0 .4rem; }
.ci-player-line .ico { width: 1rem; height: 1rem; }
.ci-player-chars { display: flex; gap: .3rem; margin-bottom: .3rem; }
.ci-unique-text { font-size: .82rem; margin: .25rem 0; }
.ci-charsheet-body { display: flex; gap: .8rem; align-items: flex-start; }
.ci-charsheet-body p { margin: 0 0 .4rem; }
.ci-score-step { padding: .4rem; border-radius: 10px; border: 2px solid var(--cauldron); background: color-mix(in srgb, var(--cauldron) 8%, var(--panel)); }
.ci-score-step .ci-card.xs { font-size: 10px; }
.ci-score-lines { width: 100%; border-collapse: collapse; margin-top: .4rem; }
.ci-score-lines td { padding: .25rem .3rem; border-bottom: 1px solid var(--line); }
.ci-score-lines td:last-child { text-align: right; font-size: 1.05rem; }
.ci-score-lines tr.total td { border-bottom: 0; font-weight: 800; font-size: 1.25rem; }
.ci-totals { width: 100%; border-collapse: collapse; }
.ci-totals th { font-size: .75rem; color: var(--muted); text-align: right; font-weight: 600; }
.ci-totals td { padding: .35rem .3rem; border-bottom: 1px solid var(--line); text-align: right; }
.ci-totals td.who { text-align: left; font-weight: 700; color: color-mix(in srgb, var(--cauldron) 70%, #000); }
.ci-totals td.who .seat { width: 1rem; height: 1rem; color: var(--cauldron); vertical-align: -.15rem; }
.ci-totals tr.winner td { background: color-mix(in srgb, var(--ci-gold) 22%, transparent); }
.ci-totals tr.me td.who { text-decoration: underline; }
.ci-note { color: var(--accent-dark); font-weight: 600; margin: .4rem 0; }
.ci-rule-char { display: flex; gap: .5rem; align-items: center; }
.ci-rule-char p { margin: .15rem 0; font-size: .85rem; }
.ci-rule-unique { font-size: .85rem; margin: .2rem 0; }

/* ---- the lobby */
.ci-lobby-fan { display: flex; gap: .3rem; justify-content: center; margin: .3rem 0 .5rem; flex-wrap: wrap; }
.ci-lobby-cast { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin: .4rem 0; }
.ci-lobby-rank {
    position: relative; display: flex; align-items: center; gap: .3rem; padding: .3rem .4rem; border-radius: 8px; font: 600 .78rem var(--body); color: var(--text);
    border: 1.5px solid color-mix(in srgb, var(--gem) 70%, transparent);
    background: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%), color-mix(in srgb, var(--gem) 16%, var(--panel));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(60, 40, 15, .15);
}
.ci-lobby-rank .num { flex: none; }
.ci-lobby-rank .ico { width: 1.1rem; height: 1.1rem; color: color-mix(in srgb, var(--gem) 80%, #000); flex: none; }
.ci-lobby-rank .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-lobby-rank.cycle { cursor: pointer; border-style: dashed; }
.ci-lobby-rank.off { opacity: .45; }
.ci-lobby-rank:disabled { opacity: 1; }
.ci-lobby-rank.off:disabled { opacity: .45; }
.ci-lobby-uniques summary { cursor: pointer; font-weight: 700; margin: .3rem 0; }
.ci-lobby-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .25rem; }
.ci-lobby-unique { padding: .25rem .4rem; border-radius: 8px; font: 600 .75rem var(--body); text-align: left; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); display: flex; justify-content: space-between; }
.ci-lobby-unique.on { background: color-mix(in srgb, var(--ci-unique) 20%, var(--panel)); color: var(--text); border-color: var(--ci-unique); }
.ci-lobby-unique:disabled { opacity: 1; cursor: default; }

/* ---- the table page */
.ci-tablepage .ci-table-cities { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .6rem; margin: .6rem 0; }
.ci-row.large { grid-template-columns: 1fr auto auto; grid-template-areas: "who purse hand" "chars chars chars" "city city city"; padding: .6rem .8rem; font-size: 1.1rem; cursor: default; }
.ci-row.large .ci-who .seat, .ci-row.large .ci-crown, .ci-row.large .ci-purse .ico { width: 1.4rem; height: 1.4rem; }
.ci-row.large .ci-char-chip { font-size: .95rem; }
.ci-row.large .ci-char-chip .ico { width: 1.2rem; height: 1.2rem; }
.ci-row.large .ci-minicity { flex-wrap: wrap; overflow: visible; gap: .3rem; padding-top: .3rem; }
.ci-row.large .ci-card.xs { font-size: 12px; }
.ci-tablepage .ci-strip { margin: .4rem 0; }

/* ---- a short phone, or eight at the table: everything a notch smaller */
@media (max-height: 700px) {
    .ci-hand { min-height: 5.4rem; }
    .ci-hand .ci-card.md { font-size: 13px; }
    .ci-city { min-height: 2.9rem; }
    .ci-city .ci-card.sm { font-size: 9.5px; }
}
.ci-page.p7 .ci-city .ci-card.sm, .ci-page.p8 .ci-city .ci-card.sm { font-size: 9.5px; }
.ci-page.p7 .ci-hand .ci-card.md, .ci-page.p8 .ci-hand .ci-card.md { font-size: 13.5px; }
.ci-page.p8 .ci-row { padding: .14rem .4rem; }
.ci-page.p8 .ci-mini { height: 1.1rem; width: .95rem; }

@media (prefers-reduced-motion: reduce) {
    .ci-card.fresh, .ci-card.landed, .ci-card.ghost, .ci-row, .ci-me, .ci-mini.landed, .ci-char-chip.fresh { animation: none !important; }
}