/* Carcassonne: parchment and meadow. A cream page, green fields, sand roads, ochre cities with a dark wall, a blue
   pennant, a red-roofed monastery, the seat colours on the meeples, gold for anything lit. The theme block swaps the
   shared tokens while the game is on screen (html.theme-carcassonne); the rest is this game's own pieces, scoped
   under .ca-* so nothing leaks into the other games' pages. */
html.theme-carcassonne {
    color-scheme: light;
    --bg: #efe4c8;
    --panel: #fbf5e6;
    --panel-2: #f3ead3;
    --panel-3: #e9dcb9;
    --line: #cdb98c;
    --text: #2b2113;
    --muted: #7a6a4d;
    --accent: #6d8f3a;
    --accent-2: #4f7128;
    --accent-dark: #3f5a20;
    --accent-text: #ffffff;
    --parch: #fbf5e6;
    --parch-2: #e9dcb9;
    --parch-ink: #2b2113;
    --danger: #b8402c;
    --ok: #4f8a3a;
    --shadow: 0 10px 30px rgba(80, 55, 20, .18);
    --ca-field: #7faf5b;
    --ca-field-2: #6f9f4f;
    --ca-grass: #4e7f36;
    --ca-city: #d9b36a;
    --ca-wall: #6a4524;
    --ca-road: #efe3c6;
    --ca-road-line: #b89f70;
    --ca-monastery: #c34a3a;
    --ca-monastery-wall: #e9dcc2;
    --ca-pennant: #3b63b5;
    --ca-gold: #e3b341;
    --ca-meeple-ink: #1a120a;
    --ca-cloth: #35502a;
    --ca-water: #5b9bd5;
    --ca-water-edge: #35679c;
    --ca-garden: #b7d27a;
    --ca-hedge: #3f6b2a;
    --ca-flower: #e4687a;
    --ca-flower-2: #f1d35a;
    --ca-bridge: #c9a06a;
}
html.theme-carcassonne body {
    background:
        radial-gradient(circle at 10% 0, rgba(255, 255, 255, .55) 0, transparent 40%),
        radial-gradient(circle at 90% 100%, rgba(109, 143, 58, .18) 0, transparent 45%),
        var(--bg);
    background-attachment: fixed;
}
html.theme-carcassonne .topbar .round { color: var(--accent-2); }
html.theme-carcassonne .pill.brewing { background: var(--ca-gold); color: #3a2a05; border-color: #b8892a; }
html.theme-carcassonne .pill.done { color: #fff; }
html.theme-carcassonne .sheet-backdrop { background: rgba(60, 40, 10, .5); }
html.theme-carcassonne .sheet-backdrop.dim { background: rgba(40, 28, 8, .86); }
html.theme-carcassonne .sheet-backdrop.see-through { background: transparent; }
html.theme-carcassonne .error { color: var(--danger); }
html.theme-carcassonne .fab-status, html.theme-carcassonne .toast, html.theme-carcassonne .show-strip { border-width: 2px; }

/* ---- the defs: a zero-size svg that must not take space */
.ca-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- the phone: one column exactly the height of the viewport, nothing scrolls (the map keeps the drag), the map
   is the one stretchy row, the info box and the action row sit under it in the flow, each always the same height. */
.ca-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)); }
.ca-page.game-page > .topbar, .ca-page.game-page > .ca-chips, .ca-page.game-page > .ca-tray, .ca-page.game-page > .ca-actions { flex: none; }
.ca-page.game-page.done { height: auto; min-height: 100dvh; overflow: visible; }   /* the standings: let that one state scroll */

/* ---- the chips along the top: one row of equal cells */
.ca-chips { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: .3rem; padding: 0 0 .4rem; }
.ca-chip {
    position: relative; display: flex; align-items: center; flex-wrap: wrap; column-gap: .35rem; row-gap: .1rem; min-width: 0;
    padding: .2rem .5rem .2rem .35rem; border-radius: 999px; background: var(--panel); border: 2px solid var(--line); border-left: 6px solid var(--cauldron);
    font-size: .85rem; line-height: 1.1; color: var(--text);
}
.ca-chip .seat { color: var(--cauldron); width: 1em; height: 1em; flex: none; }
.ca-chip .name { font-weight: 800; display: inline-flex; align-items: center; gap: .2rem; min-width: 0; flex: 1 1 auto; }
.ca-chip .name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-chip .score { font-size: 1.05rem; font-variant-numeric: tabular-nums; display: inline-block; flex: none; }
.ca-chip .mp { display: inline-flex; gap: 2px; align-items: center; flex: none; }
.ca-chip .mp i { width: 5px; height: 5px; border-radius: 50%; background: var(--cauldron); display: block; }
.ca-chip .mp i.gone { background: transparent; border: 1px solid var(--line); width: 4px; height: 4px; }
/* The big meeple a larger dot, the abbot a dot with a point; hollow while on the table */
.ca-chip .mp i.big { width: 8px; height: 8px; margin-left: 2px; }
.ca-chip .mp i.big.gone { width: 7px; height: 7px; }
.ca-chip .mp i.abbot { width: 7px; height: 8px; margin-left: 2px; border-radius: 50% 50% 40% 40%; clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%); }
.ca-chip .mp i.abbot.gone { background: var(--line); opacity: .45; border: 0; width: 7px; height: 8px; }
.ca-chip.turn { border-color: var(--cauldron); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cauldron) 35%, transparent); }
.ca-chip.me { background: var(--panel-2); }
.ca-chip.winner .score { color: var(--accent-2); }
.ca-plus { position: absolute; right: .4rem; top: -.1rem; font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--cauldron); paint-order: stroke; -webkit-text-stroke: 3px var(--panel); pointer-events: none; animation: ca-plus-rise 1.8s ease-out both; }
@keyframes ca-plus-rise { from { transform: translateY(8px); opacity: 0; } 20% { opacity: 1; transform: translateY(-4px); } 70% { opacity: 1; } to { transform: translateY(-22px); opacity: 0; } }

/* ---- the board: a window the SVG fills; games/viewport.js pans and zooms its viewBox. The cloth takes a little of the
   viewer's seat colour (--me on the phone's page; the table page has none and keeps the plain cloth), and the window's
   corners darken a little so the eye settles on the middle (the tile-look pass, 23 Oct 2026). */
.ca-board-wrap { position: relative; border-radius: 12px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--line) 45%, var(--me, var(--line))); background: color-mix(in srgb, var(--ca-cloth) 85%, var(--me, var(--ca-cloth))); touch-action: none; height: min(56vh, 480px); -webkit-tap-highlight-color: transparent; user-select: none; }
.ca-board-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(8, 14, 4, .36) 100%); }
.ca-page.game-page .ca-board-wrap { flex: 1 1 0; min-height: 9rem; height: auto; }
.ca-page.game-page.done .ca-board-wrap { flex: none; height: min(34vh, 300px); touch-action: pan-y; }
.ca-board-wrap.table { height: min(84vh, 960px); }
.ca-page .ca-board, .ca-board-wrap svg.board { display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; }
.ca-cloth { fill: color-mix(in srgb, var(--ca-cloth) 85%, var(--me, var(--ca-cloth))); }
/* The tiles' finish: the landscape under one soft shadow, so the edge round each tile can go light (two tiles side by
   side no longer read as graph paper); a sheen lit from the top left and a bevelled edge on every face (CaArt.Finish) */
.ca-tiles { filter: url(#ca-lift); }
.ca-edge { fill: none; stroke: rgba(42, 29, 14, .55); stroke-width: 1.2; pointer-events: none; }
.ca-sheen { fill: url(#ca-sheen); pointer-events: none; }
.ca-bevel-hi { fill: none; stroke: rgba(255, 250, 225, .5); stroke-width: 2.4; pointer-events: none; }
.ca-bevel-lo { fill: none; stroke: rgba(40, 25, 5, .28); stroke-width: 2.4; pointer-events: none; }
.ca-ghost-finish { opacity: .74; pointer-events: none; transition: opacity .22s ease; }
.ca-ghost-finish.laid { opacity: 1; }
.ca-tile-in { transform-box: fill-box; transform-origin: center; }
.ca-tile.fresh .ca-tile-in { animation: ca-land .45s cubic-bezier(.2, .8, .3, 1.15) both; }
@keyframes ca-land { from { transform: scale(1.35); opacity: 0; } 70% { opacity: 1; } }
.ca-tile.read .ca-edge { stroke: #fff; stroke-width: 4; }
.ca-seg { fill: transparent; cursor: pointer; }
.ca-seg.on { fill: rgba(255, 255, 255, .28); stroke: #fff; stroke-width: 3; }
.ca-lit { fill: var(--c); opacity: .34; pointer-events: none; animation: ca-pulse 1.1s ease-in-out infinite alternate; }
.ca-lit2 { fill: none; stroke: var(--ca-gold); stroke-width: 5; stroke-dasharray: 10 6; pointer-events: none; }
.ca-meeple { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); pointer-events: none; }
.ca-meeple.fresh { animation: ca-drop .4s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes ca-drop { from { transform: translateY(-60px) scale(1.4); opacity: 0; } }
.ca-spot { fill: rgba(227, 179, 65, .2); stroke: var(--ca-gold); stroke-width: 4; stroke-dasharray: 12 8; cursor: pointer; animation: ca-pulse 1.6s ease-in-out infinite alternate; }
.ca-spot.dim { opacity: .4; animation: none; }
.ca-spot.chosen { fill: rgba(227, 179, 65, .35); stroke-dasharray: none; animation: none; }
/* Where the viewer's next tile could go while someone else is on turn: a faint mark, nothing to tap */
.ca-spot.next { pointer-events: none; cursor: default; animation: none; fill: rgba(227, 179, 65, .08); stroke-width: 3; stroke-dasharray: 7 7; stroke-opacity: .6; }
.ca-ghost { opacity: .74; transition: transform .22s ease, opacity .22s ease; pointer-events: none; }
.ca-ghost.laid { opacity: 1; }
.ca-ghost-ring { fill: none; stroke: var(--ca-gold); stroke-width: 5; }
.ca-ghost.laid .ca-ghost-ring { stroke-width: 3; stroke-dasharray: 10 6; }
.ca-gspot { cursor: pointer; }
/* The tap region is the segment's cell of the face (never overlapping a neighbour's); the circle is the mark */
.ca-gspot .cell { fill: transparent; stroke: none; }
.ca-gspot.on .cell { fill: rgba(227, 179, 65, .16); }
.ca-gspot circle { fill: rgba(255, 255, 255, .22); stroke: var(--ca-gold); stroke-width: 3; pointer-events: none; }
.ca-gspot.no circle { stroke: rgba(255, 255, 255, .45); stroke-dasharray: 5 4; }
.ca-gspot .faint { fill: #fff; opacity: .6; pointer-events: none; }
.ca-gspot.no .faint { opacity: .3; }
.ca-gspot.on circle { fill: rgba(227, 179, 65, .5); }
.ca-gspot use { pointer-events: none; }
.ca-points { font-size: 46px; font-weight: 800; font-family: var(--display); text-anchor: middle; paint-order: stroke; stroke: #1a120a; stroke-width: 6; animation: ca-rise 2.2s ease-out forwards; pointer-events: none; }
@keyframes ca-rise { from { transform: translateY(20px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-70px); opacity: 0; } }
@keyframes ca-pulse { from { opacity: .22; } to { opacity: .5; } }
.ca-spot { animation-name: ca-spot-pulse; }
@keyframes ca-spot-pulse { from { fill-opacity: .15; } to { fill-opacity: .4; } }
.ca-fit { position: absolute; top: .4rem; right: .4rem; z-index: 2; background: rgba(251, 245, 230, .92); width: 2.75rem; height: 2.75rem; padding: 0; display: grid; place-items: center; }

/* ---- the info box: one fixed height, under the map, never covered */
.ca-tray { display: flex; gap: .7rem; align-items: center; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: .5rem .7rem; margin: .5rem 0 0; height: 7.2rem; overflow: hidden; }
.ca-tray.mine { border-color: var(--ca-gold); }
.ca-tray.seat-tint { border-color: var(--cauldron); }
.ca-big { width: 100px; height: 100px; flex: none; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); overflow: visible; }
.ca-big.sm { width: 64px; height: 64px; }
.ca-big-tile { transform-box: view-box; transform-origin: 50px 50px; transition: transform .22s ease; }
.ca-tray-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.ca-tray .lbl { font-family: var(--display); letter-spacing: .06em; font-size: .78rem; color: var(--accent-2); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-tray .msg { font-weight: 600; line-height: 1.2; }
.ca-tray .sub { color: var(--muted); font-size: .85rem; line-height: 1.2; }
.ca-tray .sub b { color: var(--text); font-size: 1rem; }
.ca-tray .sub .dim { opacity: .75; }
.ca-tray .error { color: var(--danger); font-size: .85rem; }
/* Between turns: my next tile large, a long name cut at two lines, and whose turn it is with their tile small */
.ca-tray .msg.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ca-now { display: flex; align-items: center; gap: .45rem; margin-top: .1rem; }
.ca-now .ca-mini { width: 38px; height: 38px; flex: none; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); outline: 2px solid var(--cauldron); outline-offset: 1px; }
.ca-now .who { color: var(--cauldron); font-weight: 700; }
/* The figure chips (meeple, big meeple, abbot) and the "take the abbot back" offer, in the info box */
.ca-opts { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-top: .05rem; }
.ca-opt { font: inherit; font-size: .8rem; font-weight: 700; line-height: 1.1; padding: .22rem .65rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; }
.ca-opt.on { border-color: var(--ca-gold); background: rgba(227, 179, 65, .35); }
.ca-opt b { font-weight: 800; }
.ca-readout { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
/* The beat playing: the show strip lives in the info box, not over it */
.ca-tray .show-strip.inline { flex: 1; min-width: 0; margin: 0; border: 0; box-shadow: none; background: transparent; animation: none; }
.ca-tray .show-strip.inline .show-strip-cap { font-weight: 600; }

/* ---- the action row: in the flow under the info box, one line, always the same height */
.ca-page .ca-actions { position: static; display: flex; align-items: stretch; gap: .5rem; padding: .5rem 0 0; margin: 0; max-width: none; pointer-events: auto; min-height: 3.9rem; }
.ca-actions .btn { flex: 0 0 auto; margin: 0; }
.ca-actions .btn.icon.ca-back { width: 3rem; padding: 0; display: grid; place-items: center; }
.ca-actions .btn.icon.ca-back .ico { width: 1.4rem; height: 1.4rem; }
.ca-actions .ca-place, .ca-actions .ca-lay, .ca-actions .ca-next { flex: 1; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ca-actions .ca-rotate small { display: block; font-size: .7rem; font-weight: 500; opacity: .8; }
.ca-page .ca-actions .fab-status { flex: 1; background: transparent; border: 0; box-shadow: none; color: var(--muted); font-weight: 600; padding: .7rem; }

/* ---- splashes and standings */
.ca-splash-scores { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.ca-splash-scores li { display: flex; justify-content: space-between; align-items: center; padding: .45rem .7rem; border-radius: 10px; background: var(--panel-2); border-left: 6px solid var(--cauldron); font-weight: 700; }
.ca-splash-scores li span { display: inline-flex; align-items: center; gap: .35rem; }
.ca-splash-scores li .seat { color: var(--cauldron); width: 1.1em; height: 1.1em; }
.ca-splash-scores li b { font-size: 1.3rem; }

/* ---- the lobby and the rules */
.ca-lobby-fan { display: flex; gap: .4rem; justify-content: center; margin: .3rem 0 .6rem; }
.ca-lobby-tile { width: 56px; height: 56px; border-radius: 6px; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.ca-rules-table { width: 100%; font-size: .9rem; border-collapse: collapse; margin: .3rem 0 .6rem; }
.ca-rules-table th, .ca-rules-table td { padding: .3rem .4rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ca-rules-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; }
.ca-rules-tile { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .75rem; color: var(--muted); }
.ca-rules-tile svg { width: 100%; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }

/* ---- the table page */
.ca-table-grid { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; align-items: start; }
.ca-table-side { display: grid; gap: 1rem; }
@media (max-width: 900px) { .ca-table-grid { grid-template-columns: 1fr; } }
.ca-tablepage .ca-chips { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
    .ca-tile.fresh .ca-tile-in, .ca-meeple.fresh, .ca-spot, .ca-lit, .ca-points, .ca-plus { animation: none !important; }
    .ca-ghost, .ca-ghost-finish, .ca-big-tile { transition: none; }
}