/* Creeping Critters: the family's own. A night garden: deep navy, moonlit panels, amber for a lit window, grass greens
   for the zones, the seat colours on the critters. The theme block swaps the shared tokens while the game is on screen
   (html.theme-critters); the rest is this game's own pieces, scoped under .cc-* so nothing leaks. */
html.theme-critters {
    color-scheme: dark;
    --bg: #0b1026;
    --panel: #141a3a;
    --panel-2: #1b2250;
    --panel-3: #232c64;
    --line: #2f3a7a;
    --text: #eef0ff;
    --muted: #9ea6d8;
    --accent: #f5c04a;
    --accent-2: #ffd978;
    --accent-dark: #b8862a;
    --accent-text: #2a1c0a;
    --parch: #efe6c8;
    --parch-2: #d9c99a;
    --parch-ink: #2b2410;
    --danger: #ff6b5a;
    --ok: #6fd07b;
    --shadow: 0 10px 30px rgba(0, 0, 0, .55);
    --display: "Fredoka", "Grenze", Georgia, serif;
    --body: "Nunito", "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
    --cc-grass: #1f3b2e;
    --cc-grass-2: #1a3328;
    --cc-grass-3: #162b22;
    --cc-shadow: rgba(4, 8, 24, .55);
    --cc-leaf: #3f9a5a;
    --cc-leaf-2: #2d7a46;
    --cc-trunk: #6b4a2b;
    --cc-pot: #c8713a;
    --cc-pot-2: #9a5227;
    --cc-can: #8c97a8;
    --cc-food: #ffd23f;
    --cc-food-ink: #4a3a00;
    --cc-road: #2a2d3e;
    --cc-house: #3b3450;
    --cc-window: #4a4870;
    --cc-glow: #ffd978;
    --cc-fence: #a06a3c;
}
html.theme-critters body {
    background: radial-gradient(circle at 80% -10%, #243066 0, transparent 40%), radial-gradient(circle at 10% 110%, #1c1f4e 0, transparent 45%), var(--bg);
}
html.theme-critters .topbar .round { color: var(--accent-2); }
html.theme-critters .pill.brewing { background: var(--accent); color: var(--accent-text); border-color: var(--accent-dark); }
html.theme-critters .sheet-backdrop.see-through { background: transparent; }

/* ---- the game page */
.cc-page .topbar .round .of { font-size: .85rem; margin-left: .35em; }
.cc-status { margin: .25rem 0 .4rem; min-height: 1.2rem; font-size: .9rem; color: var(--muted); text-align: center; }

/* ---- the chips along the top */
.cc-chips { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 0 .4rem; }
.cc-chip {
    display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap;
    padding: .2rem .55rem .2rem .4rem; border-radius: 999px; background: var(--panel); border: 2px solid var(--line);
    font-size: .85rem; line-height: 1.1; color: var(--text); max-width: 100%;
}
.cc-chip .seat { color: var(--cauldron); width: 1em; height: 1em; }
.cc-chip .name { font-weight: 800; }
.cc-chip .stash { display: inline-flex; align-items: center; gap: .15rem; color: var(--cc-food); }
.cc-chip .stash svg, .cc-chip .hand svg, .cc-chip .front svg { width: 1em; height: 1em; }
.cc-chip .hand, .cc-chip .awake, .cc-chip .busy { color: var(--muted); display: inline-flex; align-items: center; gap: .15rem; }
.cc-chip .busy { color: var(--accent-2); font-weight: 700; }
.cc-chip .front { background: var(--panel-3); border-radius: 999px; padding: 0 .4rem; font-size: .7rem; }
.cc-chip.turn { border-color: var(--cauldron); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cauldron) 35%, transparent); }
.cc-chip.me { background: var(--panel-2); }

/* ---- the board bar and the board */
.cc-boardbar { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-bottom: .3rem; font-size: .85rem; }
.cc-housecards { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .8rem; }
.cc-housecards svg { width: 1em; height: 1em; color: var(--accent-2); }
.cc-board-wrap { border-radius: 12px; overflow: hidden; border: 2px solid var(--line); background: #0a0e22; }
.cc-board { display: block; width: 100%; height: auto; max-height: 60vh; font-family: var(--body); }
.cc-board.zoomed { max-height: 62vh; }
.cc-table-board svg.cc-board.large { max-height: 84vh; max-width: none; width: 100%; height: auto; margin: 0; }
.cc-night { fill: #0a0e22; }
.cc-zone.z1 { fill: var(--cc-grass); }
.cc-zone.z2 { fill: var(--cc-grass-2); }
.cc-zone.z3 { fill: var(--cc-grass-3); }
.cc-zone-label { fill: var(--muted); font-size: 13px; font-weight: 800; text-anchor: middle; }
.cc-zone-sub { fill: var(--muted); font-size: 9px; text-anchor: middle; }
.cc-cell { fill: transparent; stroke: rgba(255, 255, 255, .07); stroke-width: 1; cursor: default; }
.cc-cell.shadow { fill: var(--cc-shadow); }
.cc-cell.reach, .cc-road-cell.reach, .cc-house.reach .cc-house-body { fill: rgba(255, 210, 63, .28); stroke: rgba(255, 210, 63, .7); cursor: pointer; }
.cc-cell.reach.shadow { fill: rgba(255, 210, 63, .18); }
.cc-cell.path, .cc-road-cell.path { fill: rgba(255, 255, 255, .12); }
.cc-cell.path-end, .cc-road-cell.path-end, .cc-house.path-end .cc-house-body { fill: rgba(255, 210, 63, .5); stroke: #fff; stroke-width: 2; }
.cc-cell.target, .cc-road-cell.target, .cc-house.target .cc-house-body { fill: rgba(99, 178, 255, .35); stroke: #63b2ff; stroke-width: 2; cursor: pointer; animation: cc-pulse 1s ease-in-out infinite alternate; }
.cc-steps { fill: #ffe9a8; font-size: 11px; font-weight: 800; text-anchor: end; pointer-events: none; }
.cc-fence { stroke: var(--cc-fence); stroke-width: 3; stroke-linecap: round; }
.cc-road { fill: var(--cc-road); }
.cc-road-cell { fill: transparent; stroke: rgba(255, 255, 255, .06); }
.cc-road-label { fill: #8a8fa8; font-size: 12px; font-weight: 800; letter-spacing: .3em; text-anchor: middle; pointer-events: none; }
.cc-house .cc-house-body { fill: var(--cc-house); stroke: #5a527a; stroke-width: 1.5; cursor: default; }
.cc-house .cc-window { fill: var(--cc-window); stroke: #6e6a96; stroke-width: 1.5; transition: fill .4s; }
.cc-house.lit .cc-window { fill: var(--cc-glow); stroke: #fff2c0; filter: drop-shadow(0 0 8px var(--cc-glow)); animation: cc-glow .8s ease-in-out infinite alternate; }
.cc-house-no { fill: var(--text); font-size: 16px; font-weight: 800; pointer-events: none; }
.cc-house .cc-food-dot { fill: var(--cc-food); stroke: var(--cc-food-ink); stroke-width: .8; pointer-events: none; }
.cc-yard-lit { fill: rgba(255, 217, 120, .14); pointer-events: none; animation: cc-glow 1s ease-in-out infinite alternate; }
.cc-tree { pointer-events: none; }
.cc-tree .trunk { fill: var(--cc-trunk); }
.cc-tree .leaf { fill: var(--cc-leaf-2); }
.cc-tree .leaf.light { fill: var(--cc-leaf); }
.cc-pot { pointer-events: none; }
.cc-pot path { fill: var(--cc-pot); }
.cc-pot rect { fill: var(--cc-pot-2); }
.cc-can { pointer-events: none; }
.cc-can path { fill: var(--cc-can); }
.cc-can rect { fill: #aab3c2; }
.cc-can line { stroke: #5f6878; stroke-width: 1.5; }
.cc-ground-food { pointer-events: none; }
.cc-ground-food circle { fill: var(--cc-food); stroke: var(--cc-food-ink); stroke-width: 1; }
.cc-food-n { fill: var(--cc-food-ink); font-size: 9px; font-weight: 800; text-anchor: middle; }
.cc-path-line { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 6 5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; opacity: .85; }
.cc-ghost { fill: rgba(255, 255, 255, .12); stroke: #fff; stroke-width: 2; stroke-dasharray: 4 3; pointer-events: none; }

/* ---- critters: a body and a head in the seat's colour; they glide when their square changes */
.cc-critter { transition: transform .6s cubic-bezier(.3, .9, .4, 1.1); cursor: pointer; }
.cc-critter .body, .cc-critter .head, .cc-critter .ear, .cc-critter .tail { fill: var(--cauldron); stroke: var(--brew-dark); stroke-width: 1.2; }
.cc-critter .tail.thin { fill: none; stroke: var(--cauldron); stroke-width: 2.5; stroke-linecap: round; }
.cc-critter .ear.round { fill: var(--brew-dark); }
.cc-critter .mask { fill: #1d1428; opacity: .85; }
.cc-critter .eye { fill: #fff; }
.cc-critter .nose { fill: #1d1428; }
.cc-critter .nose.pink { fill: #ff8fb0; }
.cc-critter .whisker { stroke: #fff; stroke-width: .8; opacity: .8; }
.cc-critter .body-g { transition: transform .4s, opacity .4s; transform-origin: 0 0; }
.cc-critter.rested .body-g { transform: rotate(90deg); opacity: .72; }
.cc-critter.hidden .body-g { opacity: .55; }
.cc-critter .cc-hole { fill: rgba(0, 0, 0, .45); stroke: #c9b27a; stroke-width: 1.5; stroke-dasharray: 3 3; }
.cc-critter .cc-ring { fill: none; stroke: #fff; stroke-width: 2.5; animation: cc-pulse .9s ease-in-out infinite alternate; }
.cc-critter.target .cc-ring { stroke: #63b2ff; }
.cc-critter.spot .body-g { filter: drop-shadow(0 0 6px #fff); }
.cc-critter .cc-carried { fill: var(--cc-food); stroke: var(--cc-food-ink); stroke-width: 1; }
.cc-critter .cc-heart { fill: #ff6b8a; }
.cc-critter.mine:not(.rested) .head { stroke: #fff; stroke-width: 1.6; }
.cc-critter.in-house { opacity: .8; }

/* ---- the hour track on the table */
.cc-hour-label { fill: var(--muted); font-size: 11px; font-weight: 700; }
.cc-hour.now .cc-hour-label { fill: var(--accent-2); font-weight: 800; }
.cc-hour.alarm .cc-hour-label { fill: var(--danger); }
.cc-hour.past .cc-hour-label { opacity: .45; }
.cc-moon { fill: #fff2c0; }
.cc-moon-bite { fill: #0a0e22; }
.cc-alarm { fill: none; stroke: var(--danger); stroke-width: 2.5; }
.cc-alarm-hands { fill: none; stroke: var(--danger); stroke-width: 2; stroke-linecap: round; }

/* ---- cards: a button sized by its font-size (3.75em wide, 5:7) */
.cc-card {
    position: relative; width: 3.75em; height: 5.25em; border-radius: .45em; border: .12em solid var(--line); background: var(--panel);
    color: var(--text); display: flex; flex-direction: column; align-items: center; padding: .3em .2em; cursor: pointer; font: inherit; flex: none;
    transition: transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; overflow: hidden; text-align: center;
}
.cc-card:disabled { cursor: default; }
.cc-card.sm { font-size: .8rem; }
.cc-card.md { font-size: 1.05rem; }
.cc-card.movement { border-color: #3fae5c; background: linear-gradient(#1c3a28, var(--panel)); }
.cc-card.fight { border-color: #d6402f; background: linear-gradient(#3f1c1c, var(--panel)); }
.cc-card.reaction { border-color: #8c4bb6; background: linear-gradient(#321c3f, var(--panel)); }
.cc-card.delight { border-color: var(--accent-dark); background: linear-gradient(#3b2e14, var(--panel)); }
.cc-card.sel { transform: translateY(-.35em); box-shadow: 0 .4em 1em rgba(0, 0, 0, .5), 0 0 0 .18em var(--accent-2); }
.cc-card.dim { opacity: .5; }
.cc-card-name { font-size: .55em; font-weight: 800; line-height: 1.05; }
.cc-card-big { font-family: var(--display); font-weight: 800; font-size: 1.15em; line-height: 1.1; margin: .12em 0; color: var(--accent-2); }
.cc-card.movement .cc-card-big { color: #8fe3a5; }
.cc-card.fight .cc-card-big { color: #ff9b8a; }
.cc-card.reaction .cc-card-big { color: #d8a8ff; }
.cc-card-text { font-size: .38em; line-height: 1.15; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cc-card-family { position: absolute; bottom: .15em; font-size: .36em; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .8; }
.cc-pickno { position: absolute; top: .15em; right: .2em; background: var(--accent); color: var(--accent-text); border-radius: 999px; font-size: .6em; width: 1.4em; height: 1.4em; display: flex; align-items: center; justify-content: center; font-weight: 800; }

/* ---- the hand */
.cc-hand-card { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: .45rem .5rem .55rem; margin: .3rem 0 .5rem; }
.cc-hand-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 1.9rem; flex-wrap: wrap; }
.cc-hand-title { font-weight: 800; }
.cc-hand-title small { color: var(--muted); font-weight: 500; }
.cc-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem .4rem; padding: .5rem .2rem .3rem; min-height: 5rem; }
.cc-hand.small { gap: .4rem .3rem; min-height: 0; }
.cc-play { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .5rem .6rem; border-radius: 12px; background: var(--panel-2); border: 2px dashed var(--line); margin-top: .3rem; text-align: center; }
.cc-play-text { font-size: .9rem; }
.cc-page .error { color: var(--danger); margin: .3rem 0 0; }

/* ---- the action bar */
.cc-actions { align-items: center; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.cc-actions .btn { flex: none; }
.cc-actions .cc-go { min-width: 9rem; }

/* ---- questions, draws */
.cc-options { display: flex; flex-wrap: wrap; gap: .4rem; }
.cc-options .option { flex: 1 1 8rem; }
.sheet .cc-options.pills { flex-direction: row; flex-wrap: wrap; gap: .35rem; max-height: 7.5rem; overflow-y: auto; padding-bottom: .2rem; -webkit-overflow-scrolling: touch; }
.sheet .cc-options.pills .option { flex: 0 0 auto; width: auto; border-style: dashed; border-radius: 999px; font-size: .8rem; padding: .35rem .7rem; }
.cc-tap-hint { margin: 0 0 .4rem; }
.cc-draw-split { display: flex; gap: .8rem; justify-content: center; margin: .3rem 0 .5rem; }
.cc-draw-deck { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .5rem; border-radius: 12px; background: var(--panel-2); border: 2px solid var(--line); }
.cc-draw-deck.movement { border-color: #3fae5c; }
.cc-draw-deck.action { border-color: var(--accent-dark); }
.cc-stepper { display: flex; align-items: center; gap: .6rem; }
.cc-stepper .n, .cc-draw-deck .n.big { font-family: var(--display); font-size: 1.8rem; font-weight: 800; color: var(--accent-2); min-width: 1.5rem; text-align: center; }

/* ---- splashes */
.cc-splash-note { font-size: 1.05rem; margin: .2rem 0 .6rem; }
.cc-splash-scores { list-style: none; padding: 0; margin: .4rem 0 .6rem; display: flex; flex-direction: column; gap: .35rem; }
.cc-splash-scores li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .4rem .7rem; border-radius: 10px; background: var(--panel-2); border: 2px solid var(--cauldron); font-weight: 700; }
.cc-splash-scores li b { display: inline-flex; align-items: center; gap: .25rem; color: var(--cc-food); font-size: 1.1rem; }
.cc-splash-scores li svg { width: 1.1em; height: 1.1em; }
.cc-splash-scores.big li { font-size: 1.15rem; }
.cc-splash-scores .seat { color: var(--cauldron); }

/* ---- the playtest notes under the standings */
.cc-notes { margin-top: .8rem; padding: .6rem .8rem; border-radius: 12px; background: var(--panel-2); border: 1px dashed var(--line); text-align: left; }
.cc-notes h3 { margin: 0 0 .3rem; font-size: 1rem; color: var(--accent-2); }
.cc-notes ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; color: var(--muted); }
.cc-notes li { margin: .15rem 0; }

/* ---- the rules sheet */
.cc-rules section { margin-bottom: .8rem; }
.cc-rules h3 { margin: 0 0 .25rem; font-size: 1.05rem; color: var(--accent-2); }
.cc-rules p { margin: 0 0 .5rem; font-size: .95rem; }
.cc-rules-cards { display: grid; grid-template-columns: 1fr; gap: .35rem; }
.cc-rules-card { padding: .4rem .6rem; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font-size: .9rem; }
.cc-rules-card b { margin-right: .3rem; }
.cc-rules-card small { color: var(--muted); }
.cc-rules-card span { display: block; color: var(--muted); font-size: .85rem; }

/* ---- the lobby */
.cc-lobby label.row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin: .4rem 0; }

/* ---- the table */
.cc-tablepage { max-width: 1400px; }
.cc-table-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .cc-table-grid { grid-template-columns: 1fr; } }
.cc-table-board { border-radius: 12px; overflow: hidden; border: 2px solid var(--line); background: #0a0e22; }
.cc-table-side { display: flex; flex-direction: column; gap: .8rem; }
.cc-table-players { display: flex; flex-direction: column; gap: .4rem; }
.cc-tplayer { display: flex; flex-direction: column; gap: .2rem; padding: .4rem .6rem; border-radius: 10px; border: 2px solid var(--line); background: var(--panel-2); }
.cc-tplayer.turn { border-color: var(--cauldron); }
.cc-tplayer .who { font-weight: 800; display: inline-flex; align-items: center; gap: .3rem; }
.cc-tplayer .seat { color: var(--cauldron); }
.cc-tplayer .facts { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .85rem; color: var(--muted); }
.cc-tplayer .stash { color: var(--cc-food); display: inline-flex; align-items: center; gap: .2rem; font-size: 1rem; }
.cc-tplayer svg { width: 1em; height: 1em; }
.cc-housedeck { display: flex; gap: .35rem; }
.cc-housecard { width: 2.2rem; height: 2.9rem; border-radius: 6px; border: 2px solid var(--line); background: var(--panel-3); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; font-family: var(--display); }
.cc-housecard.used { opacity: .4; border-style: dashed; }
.cc-housecard.last { opacity: 1; border-color: var(--accent); color: var(--accent-2); box-shadow: 0 0 0 2px rgba(255, 217, 120, .3); }

/* ---- phone held sideways: the board beside the hand */
@media (orientation: landscape) and (max-height: 520px) {
    .cc-board { max-height: 60vh; }
}

@keyframes cc-pulse { from { opacity: .55; } to { opacity: 1; } }
@keyframes cc-glow { from { opacity: .75; } to { opacity: 1; } }