/* ==========================================================================
   Castle Combo: game-specific styles.
   Colours, type and shapes come from the tokens of ../shared/portal.css
   (DESIGN 5.3). Each var() carries the token's value as a fallback, so the
   page stays readable when the shared stylesheet is absent.
   The colours of its own are the six shield marks, the two decks, the card
   pictures (ART.md 1.10) and the icon formulas (card-icons.js). The shield
   and deck colours are the rulebook's (RULES.md 0.2 and 2): Nobility blue,
   Faith purple, Scholarship green, Military red, Craftsmanship orange,
   Peasantry yellow; Castle grey, Village brown. A shield always shows its
   letter or its own glyph too: colour is never the only sign. The values
   equal those of card-icons.js (tests/icons.test.js compares them).
   Small text uses the body ink, not the muted one: the muted ink of the
   shared palette reaches only 3.6 to 1 on the panel colour (measured).
   No artwork of the game, no image file, no font file: the card pictures
   are inline SVG drawn by card-art.js.
   ========================================================================== */

:root {
  --cc-sh-nobility: #1a56b8;
  --cc-sh-faith: #6f36aa;
  --cc-sh-scholarship: #1e7a34;
  --cc-sh-military: #c62a1f;
  --cc-sh-craftsmanship: #d9620b;
  --cc-sh-peasantry: #f2c513;
  --cc-sh-nobility-glyph: #ffffff;
  --cc-sh-faith-glyph: #ffffff;
  --cc-sh-scholarship-glyph: #ffffff;
  --cc-sh-military-glyph: #ffffff;
  --cc-sh-craftsmanship-glyph: #ffffff;
  --cc-sh-peasantry-glyph: #2b2417;
  --cc-castle: #6b6e73;
  --cc-village: #7a4f2a;
  --cc-tile-min: 104px;
  /* card pictures (ART.md 1.10) */
  /* the name on a banner, which is filled with the deck colour (RULES.md 2) */
  --cc-banner-ink: #fffbf1;
  --cc-art-castle-bg: #e5e5e2;
  --cc-art-castle-motif: #d1d0cb;
  --cc-art-village-bg: #e5edd9;
  --cc-art-village-motif: #cbd9b6;
  --cc-art-dusk-a: #c3c6e0;
  --cc-art-dusk-b: #d3d4ea;
  --cc-art-dusk-c: #b4bfd4;
  --cc-art-dusk-d: #c7cfdd;
  --cc-coin-rim: #9c7a16;
  --cc-coin-ink: #2b2417;
  --cc-shield-edge: rgba(43,36,23,.7);
  /* icon formulas (card-icons.js) */
  --cc-fx-ink: #2b2417;
  --cc-fx-edge: rgba(43,36,23,.7);
  --cc-fx-lit: #a3916a;
  --cc-fx-off: rgba(43,36,23,.5);
  --cc-fx-opp: #4a4640;
  --cc-fx-star: #4a3a20;
}

/* The dark theme, when a page opts in (shared/portal.css). The two blocks
   below must stay identical, as in the shared stylesheet. The pictures keep
   their own colours; only their background and motif tint go darker. */
:root[data-theme="dark"] {
  --cc-sh-nobility: #3d7be0;
  --cc-sh-faith: #9254d0;
  --cc-sh-scholarship: #2f9e48;
  --cc-sh-military: #de3a2e;
  --cc-sh-craftsmanship: #e06b12;
  --cc-sh-peasantry: #f7d23a;
  --cc-castle: #a5a8ad;
  --cc-village: #c08a57;
  --cc-banner-ink: #2b2417;
  --cc-art-castle-bg: #c6c6c2;
  --cc-art-castle-motif: #adada7;
  --cc-art-village-bg: #bfcbb0;
  --cc-art-village-motif: #a8b897;
  --cc-art-dusk-a: #acaec5;
  --cc-art-dusk-b: #babbce;
  --cc-art-dusk-c: #9ea8bb;
  --cc-art-dusk-d: #afb6c2;
  --cc-shield-edge: rgba(239,230,207,.85);
  --cc-fx-ink: #efe6cf;
  --cc-fx-edge: rgba(239,230,207,.85);
  --cc-fx-lit: #c9b98f;
  --cc-fx-off: rgba(239,230,207,.55);
  --cc-fx-opp: #635e54;
  --cc-fx-star: #e9dcb4;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --cc-sh-nobility: #3d7be0;
    --cc-sh-faith: #9254d0;
    --cc-sh-scholarship: #2f9e48;
    --cc-sh-military: #de3a2e;
    --cc-sh-craftsmanship: #e06b12;
    --cc-sh-peasantry: #f7d23a;
    --cc-castle: #a5a8ad;
    --cc-village: #c08a57;
    --cc-banner-ink: #2b2417;
    --cc-art-castle-bg: #c6c6c2;
    --cc-art-castle-motif: #adada7;
    --cc-art-village-bg: #bfcbb0;
    --cc-art-village-motif: #a8b897;
    --cc-art-dusk-a: #acaec5;
    --cc-art-dusk-b: #babbce;
    --cc-art-dusk-c: #9ea8bb;
    --cc-art-dusk-d: #afb6c2;
    --cc-shield-edge: rgba(239,230,207,.85);
    --cc-fx-ink: #efe6cf;
    --cc-fx-edge: rgba(239,230,207,.85);
    --cc-fx-lit: #c9b98f;
    --cc-fx-off: rgba(239,230,207,.55);
    --cc-fx-opp: #635e54;
    --cc-fx-star: #e9dcb4;
  }
}

.cc-mode { align-items: stretch; }
.cc-board { padding: 12px; }

/* ------------------------------ status line ------------------------------ */
.cc-status {
  background: var(--p-overlay, rgba(40,32,16,0.92));
  color: var(--p-overlay-text, #f2e9d2);
  border-radius: var(--p-radius-inner, 8px);
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 10px;
  min-height: 36px;
}
.cc-status strong { color: var(--p-highlight, #f0c432); }
.cc-ai-line { font-size: 12px; opacity: 0.85; min-width: 9em; text-align: right; }

.cc-load-error {
  margin: 12px;
  border-left-color: var(--p-warn, #b3341f);
  font-weight: 700;
}

/* -------------------------------- zones ---------------------------------- */
.cc-zones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.cc-zone-wide { grid-column: 1 / -1; }
@media (max-width: 1180px) {
  .cc-zones { grid-template-columns: minmax(0, 1fr); }
}

.cc-zone {
  background: var(--p-panel, #efe6cf);
  color: var(--p-ink, #2b2417);
  border: 1px solid var(--p-line, #d9cba6);
  border-radius: var(--p-radius-card, 10px);
  padding: 8px 10px 10px;
}
.cc-zone-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 6px;
}
.cc-zone-title {
  font-family: var(--p-font-display, Georgia, serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--p-ink-heading, #4a3a20);
  margin: 0;
}
.cc-seat-0 .cc-zone-title { border-left: 6px solid var(--p-seat-0, #2563eb); padding-left: 6px; }
.cc-seat-1 .cc-zone-title { border-left: 6px solid var(--p-seat-1, #d63b2f); padding-left: 6px; }
.cc-to-move { box-shadow: 0 0 0 3px var(--p-highlight, #f0c432); }

.cc-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--p-ink-body, #3c3220); }
.cc-stat b { font-variant-numeric: tabular-nums; }
.cc-stat-points { margin-left: auto; font-weight: 800; font-size: 15px; color: var(--p-ink-heading, #4a3a20); }

/* -------------------------------- grids ---------------------------------- */
.cc-grid {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(var(--cc-cols, 3), minmax(0, 1fr));
}
.cc-row {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cc-market { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .cc-market { grid-template-columns: minmax(0, 1fr); }
}
.cc-location {
  border: 2px solid var(--p-line, #d9cba6);
  border-radius: var(--p-radius-inner, 8px);
  padding: 6px;
  background: var(--p-card, #faf5e8);
}
.cc-location-here { border-color: var(--p-gold, #d8a927); background: var(--p-gold-wash, #fdf3d3); }
.cc-location-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--p-ink-heading, #4a3a20);
  margin: 0 0 5px;
}
.cc-messenger {
  display: inline-block;
  background: var(--p-rule-strong, #4a3a20);
  color: var(--p-btn-text, #f7efdb);
  border-radius: 9px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}
.cc-count { font-weight: 400; color: var(--p-ink-body, #3c3220); }

/* --------------------------------- tiles --------------------------------- */
.cc-tile,
.cc-cell {
  display: block;
  width: 100%;
  min-height: 92px;
  text-align: left;
  font: inherit;
  color: var(--p-ink, #2b2417);
  background: var(--p-field, #fffbf1);
  border: 1px solid var(--p-line, #d9cba6);
  border-radius: 6px;
  padding: 4px 5px 5px;
  position: relative;
  overflow-wrap: anywhere;
}
button.cc-tile, button.cc-cell { cursor: pointer; }
button.cc-tile:disabled, button.cc-cell:disabled { cursor: default; opacity: 1; }
button.cc-tile:focus-visible, button.cc-cell:focus-visible { outline: 2px solid var(--p-gold, #d8a927); outline-offset: 1px; }

.cc-tile { border-top: 5px solid var(--cc-castle); }
.cc-tile-village { border-top-color: var(--cc-village); }
.cc-tile-down {
  background: repeating-linear-gradient(135deg, var(--p-line-soft, #e5dabb), var(--p-line-soft, #e5dabb) 6px, var(--p-panel, #efe6cf) 6px, var(--p-panel, #efe6cf) 12px);
  color: var(--p-ink-body, #3c3220);
}
.cc-tile-pick { box-shadow: 0 0 0 3px var(--p-highlight, #f0c432); }
/* a card of the row where the Messenger does not stand: still to be read, so no fading */
.cc-tile-dim { background: var(--p-panel, #efe6cf); border-style: dashed; }

.cc-tile-top { display: flex; align-items: flex-start; gap: 4px; }
.cc-name { font-size: 12px; font-weight: 700; line-height: 1.15; flex: 1; min-width: 0; }
.cc-cost {
  flex: none;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--p-gold, #d8a927);
  /* a fixed ink: the ink of the dark theme is light and would fade on gold (ART.md 1.4) */
  color: var(--cc-coin-ink, #2b2417);
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  padding: 0 4px;
}
.cc-marks { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0; align-items: center; }
.cc-shield {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 3px 3px 10px 10px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  padding: 0 3px;
  box-shadow: inset 0 0 0 1px var(--cc-shield-edge, rgba(43,36,23,.7));
}
/* the pill of a shield in the text tiles: the shield's colour and the ink of its glyph */
.cc-sh-nobility { background: var(--cc-sh-nobility); color: var(--cc-sh-nobility-glyph); }
.cc-sh-faith { background: var(--cc-sh-faith); color: var(--cc-sh-faith-glyph); }
.cc-sh-scholarship { background: var(--cc-sh-scholarship); color: var(--cc-sh-scholarship-glyph); }
.cc-sh-military { background: var(--cc-sh-military); color: var(--cc-sh-military-glyph); }
.cc-sh-craftsmanship { background: var(--cc-sh-craftsmanship); color: var(--cc-sh-craftsmanship-glyph); }
.cc-sh-peasantry { background: var(--cc-sh-peasantry); color: var(--cc-sh-peasantry-glyph); }
.cc-tag {
  display: inline-block;
  border: 1px solid var(--p-line, #d9cba6);
  border-radius: 9px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 15px;
  color: var(--p-ink-body, #3c3220);
  background: var(--p-card, #faf5e8);
  white-space: nowrap;
}
.cc-tag-go { border-color: var(--p-rule-strong, #4a3a20); font-weight: 700; }
.cc-tag-purse { border-color: var(--p-gold, #d8a927); background: var(--p-gold-wash, #fdf3d3); font-weight: 700; }
.cc-text { font-size: 10.5px; line-height: 1.25; margin: 2px 0 0; color: var(--p-ink-body, #3c3220); }
.cc-text b { color: var(--p-ink-heading, #4a3a20); }
.cc-points {
  position: absolute;
  right: 3px;
  bottom: 3px;
  background: var(--p-rule-strong, #4a3a20);
  color: var(--p-btn-text, #f7efdb);
  border-radius: 9px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 17px;
}
.cc-points-open { background: var(--p-btn, #6d5836); }
.cc-tile-scored { padding-bottom: 22px; }
.cc-points-inline { position: static; display: inline-block; }

.cc-cell { min-height: 92px; background: transparent; border-style: dashed; }
.cc-cell-legal {
  background: var(--p-gold-wash, #fdf3d3);
  border: 2px solid var(--p-gold, #d8a927);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--p-ink-heading, #4a3a20);
}
.cc-cell-legal:hover { background: var(--p-highlight, #f0c432); }
.cc-cell-off { border-color: transparent; }
/* the frame of a tableau in play (editor.js placementFrame): each cell sits where the frame puts
   it, so the cards stay in the middle; a cell where a card may go is outlined faintly while it
   is your turn, before a card is picked; the 3 x 3 limit is drawn in each direction the cards
   already span */
.cc-cell-slot {
  border: 1.5px dashed var(--p-ink-muted, #8a7448);
  background: transparent;
  opacity: 0.8;
}
.cc-bound {
  position: relative;
  z-index: 1;
  pointer-events: none;
  margin: -3px;
  border: 0 dashed var(--p-rule-strong, #4a3a20);
  border-radius: 8px;
}
.cc-bound-rows { border-top-width: 2px; border-bottom-width: 2px; }
.cc-bound-cols { border-left-width: 2px; border-right-width: 2px; }
.cc-place-help { margin: 6px 0 0; }
.cc-cell-edit { background: var(--p-card, #faf5e8); text-align: center; font-size: 11px; color: var(--p-ink-body, #3c3220); }
.cc-cell-edit:hover, .cc-tile-edit:hover { box-shadow: 0 0 0 2px var(--p-gold, #d8a927); }

/* ------------------------------- controls -------------------------------- */
.cc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; align-items: center; }
.cc-actions .p-btn { padding: 6px 10px; }
.cc-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; font-size: 13px; color: var(--p-ink-body, #3c3220); }
.cc-field > label, .cc-field > span.cc-field-name { min-width: 92px; font-weight: 600; }
.cc-field input[type="number"],
.cc-field input[type="text"],
.cc-field select,
.cc-box {
  background: var(--p-field, #fffbf1);
  color: var(--p-ink, #2b2417);
  border: 1px solid var(--p-line, #d9cba6);
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 13px;
}
.cc-check { display: flex; align-items: flex-start; gap: 7px; margin: 7px 0; font-size: 13px; line-height: 1.35; color: var(--p-ink-body, #3c3220); }
.cc-check > input { flex: none; margin: 2px 0 0; }
.cc-check > label { flex: 1; min-width: 0; }
.cc-field input[type="number"] { width: 5.5em; }
.cc-field input[type="text"] { flex: 1; min-width: 0; }
.cc-box { width: 100%; min-height: 84px; font-family: var(--p-font-mono, monospace); font-size: 11px; resize: vertical; }
.cc-seg-small > button { padding: 5px 4px; font-size: 12px; }
/* Five levels do not fit on one line of the side panel: three, then two. */
#seg-level { flex-wrap: wrap; }
#seg-level > button { flex: 1 1 28%; }
summary.p-label { display: list-item; cursor: pointer; margin-top: 10px; }
summary.p-label:focus-visible { outline: 2px solid var(--p-gold, #d8a927); outline-offset: 2px; }

.cc-list { margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.45; }
.cc-list > li { padding: 3px 0; border-bottom: 1px dotted var(--p-line-soft, #e5dabb); }
.cc-error { color: var(--p-warn, #b3341f); font-weight: 600; }
.cc-warning { color: var(--p-ink-body, #3c3220); }
.cc-ok { color: var(--p-win-ink, #2c6420); font-weight: 600; }

.cc-log { max-height: 220px; }
.cc-log-0 { border-left: 4px solid var(--p-seat-0, #2563eb); padding-left: 5px; }
.cc-log-1 { border-left: 4px solid var(--p-seat-1, #d63b2f); padding-left: 5px; }

/* ------------------------------ draws (draws.js) ------------------------- */
/* A slot of a row that waits for the card drawn into it: a card-shaped placeholder in the
   colour of its deck (Castle grey, Village brown). */
.cc-slot-draw {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 92px;
  aspect-ratio: 4 / 5;
  align-self: stretch;
  font: inherit;
  text-align: center;
  cursor: pointer;
  color: var(--p-ink, #2b2417);
  background: var(--p-field, #fffbf1);
  border: 2px dashed var(--cc-castle);
  border-top: 5px solid var(--cc-castle);
  border-radius: 6px;
  padding: 6px 4px;
}
.cc-slot-draw-village { border-color: var(--cc-village); }
.cc-slot-draw:hover { box-shadow: 0 0 0 3px var(--p-highlight, #f0c432); }
.cc-slot-draw:focus-visible { outline: 2px solid var(--p-gold, #d8a927); outline-offset: 1px; }
/* a small stack of card backs in the deck colour */
.cc-slot-draw-mark {
  width: 26px;
  height: 34px;
  border-radius: 3px;
  background: var(--cc-castle);
  box-shadow: 3px -3px 0 -1px var(--p-field, #fffbf1), 3px -3px 0 0 var(--cc-castle);
}
.cc-slot-draw-village .cc-slot-draw-mark { background: var(--cc-village); box-shadow: 3px -3px 0 -1px var(--p-field, #fffbf1), 3px -3px 0 0 var(--cc-village); }
.cc-slot-draw-label { font-weight: 800; font-size: 13px; color: var(--p-ink-heading, #4a3a20); }
.cc-slot-draw-deck { font-size: 11px; color: var(--p-ink-body, #3c3220); }
.cc-draw-count {
  background: var(--p-gold, #d8a927);
  color: var(--cc-coin-ink, #2b2417);
  border-radius: 9px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}
/* what the game waits for, at the top of the board */
.cc-waiting {
  background: var(--p-gold-wash, #fdf3d3);
  color: var(--p-ink, #2b2417);
  border: 2px solid var(--p-gold, #d8a927);
  border-radius: var(--p-radius-card, 10px);
  padding: 8px 12px;
}
.cc-waiting-text { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--p-ink-body, #3c3220); }
.cc-waiting-text strong { color: var(--p-ink-heading, #4a3a20); }
/* the switch "Random" / "I choose" in the head of the market */
.cc-draws { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--p-ink-body, #3c3220); }
.cc-draws > .p-seg > button { padding: 3px 8px; white-space: nowrap; }
/* the picker: the cards that can be drawn, with a search box */
.cc-picker { width: min(590px, calc(92vw - 50px)); max-width: 100%; }
.cc-picker-head { margin: 0 0 6px; font-size: 13px; line-height: 1.4; color: var(--p-ink-body, #3c3220); }
.cc-picker-find input[type="text"] { font-size: 15px; padding: 6px 8px; }
.cc-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 6px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 4px;
  margin-top: 6px;
  border: 1px solid var(--p-line, #d9cba6);
  border-radius: 6px;
  background: var(--p-panel, #efe6cf);
}
.cc-picker-grid > .cc-picker-item { padding-bottom: 22px; }
.cc-picker-grid > .cc-picker-item[hidden] { display: none; }
.cc-picker-first { box-shadow: 0 0 0 3px var(--p-highlight, #f0c432); }
.cc-left-count {
  position: absolute;
  left: 4px;
  bottom: 3px;
  background: var(--p-card, #faf5e8);
  color: var(--p-ink-body, #3c3220);
  border: 1px solid var(--p-line, #d9cba6);
  border-radius: 8px;
  padding: 0 5px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 15px;
}
/* "Left in deck": one list per deck, by name */
.cc-left { border-top: 1px dotted var(--p-line-soft, #e5dabb); padding: 5px 0; }
.cc-left > summary { cursor: pointer; font-size: 13px; color: var(--p-ink-heading, #4a3a20); padding-left: 6px; }
.cc-left > summary:focus-visible { outline: 2px solid var(--p-gold, #d8a927); outline-offset: 2px; }
.cc-left-castle > summary { border-left: 5px solid var(--cc-castle); }
.cc-left-village > summary { border-left: 5px solid var(--cc-village); }
.cc-left-shields { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 5px 0; font-size: 12px; color: var(--p-ink-body, #3c3220); }
.cc-left-shield { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.cc-left-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; font-size: 12px; }
.cc-left-list > li { display: flex; align-items: center; gap: 6px; padding: 2px 2px; border-bottom: 1px dotted var(--p-line-soft, #e5dabb); color: var(--p-ink-body, #3c3220); }
.cc-left-name { flex: 1; min-width: 0; }
.cc-left-marks { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.cc-left-marks .cc-shield { min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; }
.cc-left-n { flex: none; min-width: 2em; text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------- tables -------------------------------- */
.cc-table-wrap { overflow-x: auto; }
.cc-scores td, .cc-scores th { padding: 3px 6px; font-size: 12.5px; }
.cc-scores .cc-num { text-align: right; font-variant-numeric: tabular-nums; }
.cc-score-shields { display: inline-flex; gap: 1px; margin-left: 5px; vertical-align: -3px; }
.cc-result td, .cc-result th { padding: 5px 7px; font-size: 12.5px; vertical-align: top; }
.cc-result td:first-child { min-width: 180px; }
.cc-result .cc-best td { background: var(--p-win-bg, #dcefd2); }
.cc-result .cc-dropped td { color: var(--p-ink-body, #3c3220); }
.cc-small { font-size: 11.5px; color: var(--p-ink-body, #3c3220); }

/* -------------------------------- palette -------------------------------- */
.cc-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cc-palette-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--p-line, #d9cba6); border-radius: 6px; background: var(--p-field, #fffbf1); }
.cc-palette-item {
  display: flex;
  width: 100%;
  gap: 6px;
  align-items: baseline;
  text-align: left;
  font: inherit;
  font-size: 12px;
  color: var(--p-ink, #2b2417);
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--p-line-soft, #e5dabb);
  padding: 3px 6px;
  cursor: pointer;
}
.cc-palette-item:hover { background: var(--p-gold-wash, #fdf3d3); }
.cc-palette-item:focus-visible { outline: 2px solid var(--p-gold, #d8a927); outline-offset: -2px; }
.cc-palette-on { background: var(--p-gold-wash, #fdf3d3); font-weight: 700; box-shadow: inset 4px 0 0 var(--p-gold, #d8a927); }
.cc-palette-where { margin-left: auto; font-size: 10.5px; color: var(--p-ink-body, #3c3220); white-space: nowrap; }

.cc-brush {
  background: var(--p-gold-wash, #fdf3d3);
  border: 1px solid var(--p-gold, #d8a927);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12.5px;
  color: var(--p-ink-body, #3c3220);
  margin: 6px 0;
}

.cc-arrows { display: inline-flex; gap: 3px; }
.cc-arrows .p-btn { padding: 2px 8px; min-width: 30px; }

.cc-notes { max-width: 1240px; margin: 0 auto; padding: 4px 12px 28px; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-notes > .cc-note-wide { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .cc-notes { grid-template-columns: minmax(0, 1fr); }
}
.cc-notes details > summary { cursor: pointer; font-weight: 700; color: var(--p-ink-heading, #4a3a20); }
.cc-notes table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.cc-notes th, .cc-notes td { text-align: left; vertical-align: top; padding: 4px 6px; border-bottom: 1px solid var(--p-line-soft, #e5dabb); }

.cc-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; margin: 6px 0 0; color: var(--p-ink-body, #3c3220); }
.cc-legend span { white-space: nowrap; }

@media (max-width: 480px) {
  .cc-board { padding: 8px 6px; }
  .cc-zone { padding: 6px; }
  .cc-tile, .cc-cell { min-height: 78px; padding: 3px; }
  .cc-tile-scored { padding-bottom: 21px; }
  .cc-name { font-size: 11px; }
  .cc-text { font-size: 9.5px; }
}

/* ------------------------- card pictures (ART.md 1) ----------------------- */
/* A tile with pictures on: the deck frame, the name banner, the gold coin,
   the portrait window and the shield emblems. Order and classes of the text
   tile stay; with pictures off, the tile is the text tile above. */
.cc-tile-art .cc-tile-top { align-items: flex-start; }
.cc-tile-art .cc-name {
  color: var(--cc-banner-ink, #fffbf1);
  background: var(--cc-castle, #6b6e73);
  border-bottom: 1px solid var(--cc-castle);
  border-radius: 2px;
  padding: 1px 4px;
  font-family: var(--p-font-display, Georgia, serif);
  font-variant: small-caps;
  letter-spacing: .02em;
}
.cc-tile-art.cc-tile-village .cc-name {
  background: var(--cc-village, #7a4f2a);
  border-bottom: 1px dashed var(--cc-village);
  border-radius: 6px;
  font-family: var(--p-font-text, sans-serif);
  font-variant: normal;
  letter-spacing: 0;
}
.cc-tile-art .cc-cost { box-shadow: inset 0 0 0 1.5px var(--cc-coin-rim, #9c7a16); font-variant-numeric: tabular-nums; }
/* the coin on the corner of the portrait, above the picture and its gold line */
.cc-portrait > .cc-cost {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 1;
  box-shadow: inset 0 0 0 1.5px var(--cc-coin-rim, #9c7a16), 0 1px 2px rgba(0,0,0,0.35);
}
.cc-tile-art .cc-name { overflow-wrap: break-word; }
/* a face-down card has no banner (RULES.md 4.2): its "Face down" is plain text */
.cc-tile-art.cc-tile-down .cc-name { color: var(--p-ink-heading, #4a3a20); background: none; border-bottom-color: transparent; }
.cc-cost-off { min-width: 20px; padding: 0 5px; }
.cc-cost-off .cc-cost-of { font-size: 10px; font-weight: 600; }
/* a face-down card shows its back in the window, not the stripes */
.cc-tile-art.cc-tile-down { background: var(--p-field, #fffbf1); }

.cc-portrait {
  position: relative;
  display: block;
  width: 100%;
  max-width: 180px;
  aspect-ratio: 100 / 64;
  margin: 3px auto 2px;
  overflow: hidden;
  container-type: inline-size;
  border: 1.5px solid var(--cc-castle);
  border-radius: 2px;
  background: var(--cc-art-castle-bg, #e5e5e2);
}
/* the formal gold line inside the Castle window, above the picture */
.cc-portrait-castle::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--p-gold, #d8a927);
  pointer-events: none;
}
.cc-portrait-village { border-color: var(--cc-village); border-radius: 6px; background: var(--cc-art-village-bg, #e5edd9); }
.cc-portrait-back.cc-portrait-castle { background: #4c4f54; }
.cc-portrait-back.cc-portrait-village { background: #6e4526; }
.cc-portrait > svg { display: block; width: 100%; height: 100%; }

/* Level of detail by the drawn width of the portrait (ART.md 1.1). */
@container (max-width: 87.98px) { .cc-lod1, .cc-lod2 { display: none; } }
@container (max-width: 159.98px) { .cc-lod2 { display: none; } }
@container (min-width: 88px) { .cc-lod-only0 { display: none; } }

/* The deck colours of a picture follow the theme; every other colour of the
   picture is fixed, it is a painting (ART.md 1.7). */
.cc-art-castle .cc-art-bg { fill: var(--cc-art-castle-bg, #e5e5e2); }
.cc-art-castle .cc-art-motif { fill: var(--cc-art-castle-motif, #d1d0cb); }
.cc-art-castle .cc-art-mline { stroke: var(--cc-art-castle-motif, #d1d0cb); }
.cc-art-castle .cc-art-bgline { stroke: var(--cc-art-castle-bg, #e5e5e2); }
.cc-art-castle .cc-art-orn { fill: var(--cc-castle); }
.cc-art-village .cc-art-bg { fill: var(--cc-art-village-bg, #e5edd9); }
.cc-art-village .cc-art-motif { fill: var(--cc-art-village-motif, #cbd9b6); }
.cc-art-village .cc-art-mline { stroke: var(--cc-art-village-motif, #cbd9b6); }
.cc-art-village .cc-art-bgline { stroke: var(--cc-art-village-bg, #e5edd9); }
.cc-art-dusk-a { fill: var(--cc-art-dusk-a, #c3c6e0); }
.cc-art-dusk-b { fill: var(--cc-art-dusk-b, #d3d4ea); }
.cc-art-dusk-c { fill: var(--cc-art-dusk-c, #b4bfd4); }
.cc-art-dusk-d { fill: var(--cc-art-dusk-d, #c7cfdd); }

/* shield emblems (ART.md 1.6); the name is in aria-label. On a tile they stand large on the
   top left corner of the portrait, one above the other, as the coin stands on the right. */
.cc-emblem { display: inline-block; flex: none; width: 18px; height: 20px; vertical-align: middle; }
.cc-emblem > svg { display: block; width: 100%; height: 100%; }
.cc-emblem-small { width: 14px; height: 15.4px; }
.cc-marks .cc-emblem + .cc-emblem { margin-left: -1px; }
.cc-portrait > .cc-shields {
  position: absolute;
  left: 2.5%;
  top: 3.5%;
  z-index: 1;
  width: 24%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}
.cc-shields > .cc-emblem { width: 100%; height: auto; aspect-ratio: 20 / 22; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.45)); }
.cc-shield-edge { stroke: var(--cc-shield-edge, rgba(43,36,23,.7)); stroke-opacity: 1; }

/* the colours of the six shield types, from the tokens, in every emblem and formula */
.cc-shf-nobility { fill: var(--cc-sh-nobility); }
.cc-shf-faith { fill: var(--cc-sh-faith); }
.cc-shf-scholarship { fill: var(--cc-sh-scholarship); }
.cc-shf-military { fill: var(--cc-sh-military); }
.cc-shf-craftsmanship { fill: var(--cc-sh-craftsmanship); }
.cc-shf-peasantry { fill: var(--cc-sh-peasantry); }
.cc-shs-faith { stroke: var(--cc-sh-faith); }
.cc-shs-scholarship { stroke: var(--cc-sh-scholarship); }
.cc-shg-nobility { fill: var(--cc-sh-nobility-glyph); }
.cc-shg-faith { fill: var(--cc-sh-faith-glyph); }
.cc-shg-scholarship { fill: var(--cc-sh-scholarship-glyph); }
.cc-shg-craftsmanship { fill: var(--cc-sh-craftsmanship-glyph); }
.cc-shg-peasantry { fill: var(--cc-sh-peasantry-glyph); }
.cc-shgs-military { stroke: var(--cc-sh-military-glyph); }
.cc-shgs-peasantry { stroke: var(--cc-sh-peasantry-glyph); }

/* ------------------------ icon formulas (card-icons.js) ------------------- */
/* Every formula is drawn at one scale for one width of tile: its box is at
   least 112 units wide (card-icons.js REF_WIDTH) and fills the tile, so the
   symbols of the tiles of a row are all the same size. */
.cc-fx { display: grid; gap: 2px; margin: 3px 0 0; }
.cc-fx-line { display: block; min-width: 0; }
.cc-fx-line > svg { display: block; width: 100%; max-width: 180px; height: auto; }
.cc-fx-line + .cc-fx-line { border-top: 1px dotted var(--p-line, #d9cba6); padding-top: 2px; }
.cc-fx-ink { fill: var(--cc-fx-ink, #2b2417); }
.cc-fx-inks { stroke: var(--cc-fx-ink, #2b2417); }
.cc-fx-edge { stroke: var(--cc-fx-edge, rgba(43,36,23,.7)); stroke-opacity: 1; }
.cc-fx-lit { fill: var(--cc-fx-lit, #a3916a); }
.cc-fx-off { stroke: var(--cc-fx-off, rgba(43,36,23,.5)); stroke-opacity: 1; }
.cc-fx-opp { fill: var(--cc-fx-opp, #4a4640); }
.cc-fx-star { fill: var(--cc-fx-star, #4a3a20); }
.cc-mark-icon { display: inline-block; flex: none; line-height: 0; }
.cc-mark-icon > svg { display: block; height: 20px; width: auto; }

/* the legend of the symbols, in both modes */
.cc-icons {
  background: var(--p-panel, #efe6cf);
  color: var(--p-ink, #2b2417);
  border: 1px solid var(--p-line, #d9cba6);
  border-radius: var(--p-radius-card, 10px);
  padding: 6px 10px;
  margin: 0 0 10px;
}
.cc-icons[hidden] { display: none; }
.cc-icons > summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--p-ink-heading, #4a3a20); }
.cc-icons > summary:focus-visible { outline: 2px solid var(--p-gold, #d8a927); outline-offset: 2px; }
.cc-icons-intro { font-size: 12px; color: var(--p-ink-body, #3c3220); margin: 6px 0; line-height: 1.4; }
.cc-icons-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px 18px; margin: 6px 0 4px; }
.cc-icons-group > h3 { font-size: 12.5px; margin: 0 0 3px; color: var(--p-ink-heading, #4a3a20); }
.cc-icons-item { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 7px; align-items: center; font-size: 12px; line-height: 1.3; padding: 2px 0; color: var(--p-ink-body, #3c3220); }
.cc-icons-item b { color: var(--p-ink-heading, #4a3a20); }
.cc-icons-pic { display: flex; justify-content: center; }
.cc-icons-pic > svg { display: block; height: 28px; width: auto; max-width: 50px; }
.cc-icons-examples { display: grid; gap: 6px; margin: 8px 0 2px; }
.cc-icons-example { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12px; color: var(--p-ink-body, #3c3220); }
.cc-icons-example > span:first-child > svg { display: block; width: 100%; height: auto; }
@media (max-width: 480px) {
  .cc-icons-example { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cc-icons-example > span:first-child { max-width: 200px; }
}

/* a card picture of the owner (cards/README.md): it takes the place of the portrait and frame */
.cc-owner { position: relative; display: block; width: 100%; max-width: 180px; margin: 3px auto 2px; }
.cc-owner > img { display: block; width: 100%; height: auto; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.cc-owner > .cc-cost { position: absolute; top: 3px; right: 3px; z-index: 1; box-shadow: inset 0 0 0 1.5px var(--cc-coin-rim, #9c7a16), 0 1px 2px rgba(0,0,0,0.35); }

/* the larger face beside a tile, on hover or keyboard focus; on a touch screen, at the
   bottom of the screen after a tap (any next tap, a scroll or Escape closes it) */
.cc-zoom {
  position: fixed;
  z-index: 55;              /* above a modal (the picker), below the toast */
  width: 240px;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
}
.cc-zoom[hidden] { display: none; }
.cc-zoom > svg { display: block; width: 100%; height: auto; }
.cc-zoom-docked { left: 50%; top: auto; bottom: 8px; width: min(220px, 60vw); transform: translateX(-50%); }
.cc-zoom-img { display: block; width: 100%; height: auto; border-radius: 8px; }
.cc-zoom-words {
  background: var(--p-card, #faf5e8);
  color: var(--p-ink-body, #3c3220);
  border: 1px solid var(--p-line, #d9cba6);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12.5px;
  line-height: 1.35;
}
.cc-zoom-img + .cc-zoom-words { margin-top: 6px; }
.cc-zoom-words > p { margin: 3px 0; }
.cc-zoom-words > .cc-zoom-name { font-weight: 700; color: var(--p-ink-heading, #4a3a20); margin: 0 0 4px; }
.cc-zoom-words .cc-fx { margin: 4px 0 6px; }

/* the card lists of the analysis board, illustrated */
.cc-palette-art { align-items: center; padding: 3px 6px 3px 4px; }
.cc-palette-name { min-width: 0; }
.cc-thumb {
  flex: none;
  width: 50px;
  aspect-ratio: 100 / 64;
  overflow: hidden;
  border: 1px solid var(--cc-castle);
  border-radius: 2px;
  background: var(--cc-art-castle-bg, #e5e5e2);
}
.cc-thumb-village { border-color: var(--cc-village); border-radius: 4px; background: var(--cc-art-village-bg, #e5edd9); }
.cc-thumb > svg { display: block; width: 100%; height: 100%; }
.cc-palette-marks { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.cc-cost-small { min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; border-radius: 8px; padding: 0 3px; box-shadow: inset 0 0 0 1px var(--cc-coin-rim, #9c7a16); }
.cc-brush-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: 6px 0; }
.cc-brush-row > .cc-brush { flex: 1 1 180px; margin: 0; }
.cc-brush-face { flex: none; width: 200px; }
.cc-brush-back { width: 120px; }
.cc-brush-face > svg, .cc-reveal-face > svg { display: block; width: 100%; height: auto; }
.cc-reveal-face { display: inline-block; width: 84px; flex: none; }

@media (max-width: 480px) {
  .cc-tile-art .cc-name { padding: 1px 3px; }
  .cc-portrait { margin: 2px auto 1px; }
  .cc-brush-face { width: 160px; }
}

/* High-contrast modes: the picture is decoration and goes; the emblems keep
   their own colours so the glyph stays visible (ART.md 1.11). */
@media (forced-colors: active) {
  .cc-portrait, .cc-thumb, .cc-zoom, .cc-brush-face, .cc-reveal-face { display: none; }
  .cc-emblem, .cc-fx-line, .cc-mark-icon, .cc-icons-pic, .cc-icons-example > span:first-child { forced-color-adjust: none; }
  /* the formulas keep their own colours on a light ground, so their dark ink stays readable */
  .cc-fx-line, .cc-mark-icon, .cc-icons-pic, .cc-icons-example > span:first-child { background: #fffbf1; border-radius: 3px; }
}