/* DoubleCross — a card-driven chess variant. Offline, no external assets.
   Palette and layout follow the official DoubleCross app: blue chrome, a gold
   board frame, blue/white marble squares, and a wooden table behind it all.
   Colours were sampled from reference/app-design.png. */

:root {
  /* chrome */
  /* Slightly deeper than the app's sampled #0487d4 so white text on the bar
     clears 4.5:1; visually the same vivid blue. */
  --blue: #0272b8;
  --blue-dark: #015f9c;
  --blue-deep: #013f69;
  --blue-light: #3aa4e4;
  --blue-pale: #d6ecfb;

  /* table and frame */
  --wood: #bba07b;
  --wood-light: #e0bf92;
  --wood-dark: #866c4c;
  --gold: #f2bc59;
  --gold-dark: #c9912f;

  /* board */
  --light-sq: #e6edf8;
  --dark-sq: #0173bf;

  /* surfaces and text */
  --panel: #ffffff;
  --panel-2: #f1f5fa;
  --line: #c9d6e4;
  --ink: #15293b;
  --ink-dim: #5a7187;

  --danger: #d5362c;
  --good: #1f9d55;

  --sel: #f2bc59;
  --dest: #1f9d55;
  --last: #f2bc59;

  --radius: 12px;

  /* Everything must fit one screen with no page scrolling, so the board is
     sized from whatever the chrome leaves over rather than a fixed figure. */
  --topbar-h: 64px;
  --pad: 12px;
  /* The board is usually limited by height, so spare width goes to the side
     column rather than being left as margin. Same value drives the board calc
     below, so the two can never disagree and overflow. */
  --side-w: clamp(300px, 25vw, 420px);
  --gap: 14px;
  --frame-chrome: 42px;            /* gold frame padding + coordinate strips */

  --board: min(
    calc(100dvh - var(--topbar-h) - (var(--pad) * 2) - var(--frame-chrome)),
    calc(100vw - var(--side-w) - var(--gap) - (var(--pad) * 2) - var(--frame-chrome))
  );
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  color: var(--ink);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Wooden table. Built from gradients rather than an image so it stays crisp
     at any size and adds nothing to download. */
  background-color: var(--wood);
  background-image:
    repeating-linear-gradient(91deg, rgba(90, 60, 25, .07) 0 2px, rgba(0, 0, 0, 0) 2px 9px),
    repeating-linear-gradient(89deg, rgba(255, 240, 215, .07) 0 3px, rgba(0, 0, 0, 0) 3px 14px),
    repeating-linear-gradient(90deg, rgba(90, 60, 25, .05) 0 1px, rgba(0, 0, 0, 0) 1px 40px),
    linear-gradient(176deg, #cdb18a 0%, #bba07b 45%, #a98e69 100%);
  background-attachment: fixed;
  /* The page itself never scrolls; panes that overflow scroll internally. */
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

h1, h2 { margin: 0; font-weight: 700; }
.muted, .note { color: var(--ink-dim); }
.note { font-size: 13px; margin: 6px 0 0; }

/* ----------------------------------------------------------------- topbar */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  height: var(--topbar-h);
  padding: 0 16px;
  background: linear-gradient(180deg, #1183cc 0%, var(--blue) 45%, var(--blue-dark) 100%);
  border-bottom: 3px solid var(--blue-deep);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}
.topbar h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 23px;
  letter-spacing: .4px;
  font-style: italic;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}
.topbar h1 span { color: #fff; }
.topbar h1 .crest {
  /* The whole crest, not a crop of it — a cropped shield reads as a broken
     logo. The bar is tall enough to show the mark complete. */
  height: 56px;
  width: auto;
  display: block;
  aspect-ratio: 557 / 634;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}
.status {
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.status.warn { color: #fff4d2; }
.topbar-actions { display: flex; gap: 8px; }

/* ---------------------------------------------------------------- buttons */

button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 9px;
  border: 2px solid var(--blue-deep);
  background: linear-gradient(180deg, var(--blue), var(--blue-dark));
  color: #fff;
  padding: 8px 15px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: filter 120ms, transform 80ms;
}
button:hover:not(:disabled) { filter: brightness(1.1); }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, [role="gridcell"]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.topbar .ghost {
  border-color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .14);
}
.topbar .ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .26); }

.primary {
  background: linear-gradient(180deg, #ffd27a, var(--gold));
  border-color: var(--gold-dark);
  color: #4a3208;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
.ghost {
  background: linear-gradient(180deg, #ffffff, #e9eff6);
  border-color: var(--line);
  color: var(--ink);
  text-shadow: none;
}
.ghost:hover:not(:disabled) { filter: brightness(.97); }

/* ----------------------------------------------------------------- layout */

.layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--gap);
  padding: var(--pad);
}
.board-area {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* Below this the board would be unusably small beside the panel, so stack and
   let the one column scroll — the only case where scrolling returns. */
@media (max-width: 900px) {
  html, body { overflow: auto; }
  .layout { flex-direction: column; align-items: center; }
  .side { width: min(620px, 100%); }
  :root {
    --side-w: 100%;
    --board: min(calc(100vw - (var(--pad) * 2) - var(--frame-chrome)), 620px);
  }
}

/* ------------------------------------------------------------------ board */

/* The gold frame, with the coordinates sitting on it as the app does. */
.board-frame {
  /* inline-grid, so the frame hugs the board instead of stretching to fill the
     column when the layout collapses to a single column on narrow windows. */
  display: inline-grid;
  width: max-content;
  grid-template-columns: 20px var(--board);
  grid-template-rows: var(--board) 18px;
  gap: 1px;
  padding: 8px 9px 4px 6px;
  background: linear-gradient(180deg, #f8d184 0%, var(--gold) 50%, #dca63c 100%);
  border: 2px solid var(--gold-dark);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(60, 40, 15, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: var(--board);
  height: var(--board);
  border: 2px solid var(--blue-deep);
  overflow: hidden;
}
.coords {
  display: grid;
  color: #5b4320;
  font-size: 11px;
  font-weight: 700;
}
.ranks { grid-template-rows: repeat(8, 1fr); align-items: center; justify-items: center; }
.files { grid-column: 2; grid-template-columns: repeat(8, 1fr); justify-items: center; align-items: center; }

.sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--light-sq);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .55), rgba(170, 195, 220, .25));
  font-size: calc(var(--board) / 11);
  line-height: 1;
  transition: none;
}
.sq.dark {
  background: var(--dark-sq);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(0, 40, 80, .3));
}
.sq:hover { filter: none; }
.sq:active { transform: none; box-shadow: none; }

/* Filled glyphs for both colours; CSS supplies colour and outline, which
   renders far more consistently than mixing outline and filled code points. */
.piece { pointer-events: none; user-select: none; }
.piece.w {
  color: #ffffff;
  text-shadow:
    0 0 1px #0a2033, 0 0 2px #0a2033,
    1px 1px 0 #0a2033, -1px 1px 0 #0a2033, 1px -1px 0 #0a2033, -1px -1px 0 #0a2033,
    0 3px 5px rgba(0, 0, 0, .45);
}
.piece.b {
  color: #10212f;
  text-shadow:
    0 0 1px rgba(255, 255, 255, .9),
    1px 1px 0 rgba(255, 255, 255, .55), -1px -1px 0 rgba(255, 255, 255, .55),
    0 3px 5px rgba(0, 0, 0, .35);
}

.sq.movable::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 3px solid var(--gold);
  border-radius: 5px;
  box-shadow: 0 0 6px rgba(242, 188, 89, .9);
}
.sq.selected { box-shadow: inset 0 0 0 4px var(--gold); }
.sq.last { box-shadow: inset 0 0 0 4px rgba(242, 188, 89, .65); }
.sq.check { box-shadow: inset 0 0 0 4px var(--danger); }
.sq.dest::before {
  content: "";
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: var(--dest);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
}
.sq.dest.capture::before {
  width: 86%;
  height: 86%;
  background: transparent;
  border: 5px solid var(--dest);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}
.sq.pick::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 3px dashed var(--gold);
  border-radius: 5px;
}

.forced {
  flex: 0 0 auto;
  padding: 8px 11px;
  font-size: 13px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff3d4, #ffe3a6);
  border: 2px solid var(--gold-dark);
  color: #5a3f08;
  font-weight: 650;
  box-shadow: 0 4px 10px rgba(60, 40, 15, .3);
}

/* ------------------------------------------------------------------- side */

.side {
  flex: 0 0 auto;
  width: var(--side-w);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;                 /* safety valve on very short windows */
}

/* Piles and the drawn card share a row instead of stacking down the page, and
   the whole row is sized from the height left over rather than from the card's
   natural size — otherwise a short window pushes the log off the bottom. */
.deal {
  display: flex;
  gap: 8px;
  align-items: stretch;
  /* basis 0, not auto: with an auto basis the move log's own content claims
     the space first and squashes the card down to its minimum. */
  flex: 4 1 0;
  min-height: 118px;
  max-height: 52vh;
}
.piles { flex: 0 0 auto; flex-direction: column; gap: 6px; }
.drawn-wrap {
  /* basis 0: with an auto basis the browser tries to measure the image, whose
     width depends on its height, and resolves the whole column to zero. */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.side h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue-deep);
  margin-bottom: 6px;
}

.piles { display: flex; align-items: stretch; }
.pile { position: relative; padding: 0; border: 0; background: none; box-shadow: none; }
.pile:active { transform: none; }
.piles { justify-content: flex-start; }
.pile { flex: 0 1 auto; min-height: 0; }
.pile img, .discard-top {
  height: 100%;
  width: auto;
  max-height: 104px;              /* the piles are reference, not the hero */
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  display: block;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(50, 32, 12, .45);
}
.discard-top {
  border: 2px dashed rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: none;
}
.discard-top img { width: 100%; height: 100%; border-radius: 6px; }
.pile-empty { font-size: 11px; color: #5b4320; font-weight: 600; }
.deck:hover img { outline: 3px solid var(--gold); }
.pill {
  position: absolute;
  right: -6px;
  bottom: -6px;
  background: var(--blue);
  border: 2px solid #fff;
  color: #fff;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}

.drawn {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100% - 2.9em);   /* leave room for the caption */
  aspect-ratio: 5 / 7;              /* keeps its slot if an image ever fails */
  object-fit: contain;
  min-height: 0;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 10px 26px rgba(50, 32, 12, .55);
}
.drawn.spent { opacity: .6; filter: saturate(.55); }
.drawn.flash { animation: deal 320ms ease-out; }
@keyframes deal {
  from { transform: translateY(-18px) scale(.92) rotate(-3deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.drawn-caption {
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  margin: 6px 0 0;
  max-height: 3.2em;
  overflow: hidden;
  color: #4a3614;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.actions button { padding: 7px 12px; }

.hand { display: flex; gap: 8px; flex-wrap: wrap; }
.hand img {
  width: 46px;
  border-radius: 6px;
  border: 2px solid transparent;
  box-shadow: 0 3px 8px rgba(50, 32, 12, .4);
  cursor: default;
}
.hand img.playable { cursor: pointer; border-color: var(--gold); }

.hand-wrap, .player, .log-wrap {
  background: rgba(255, 255, 255, .9);
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: var(--radius);
  padding: 8px 11px;
  box-shadow: 0 4px 12px rgba(60, 40, 15, .3);
  flex: 0 0 auto;
}
.log-wrap {
  flex: 1 1 0;                      /* the card is the hero; the log takes the rest */
  min-height: 70px;
  display: flex;
  flex-direction: column;
}




.log {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font-size: 12.5px;
}
.log li {
  padding: 4px 0;
  border-bottom: 1px solid #dde6ef;
  color: var(--ink-dim);
  overflow-wrap: anywhere;        /* no sideways scrollbar on long entries */
}
.log li:first-child { color: var(--ink); font-weight: 650; }

/* ---------------------------------------------------------------- overlays */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 35, 50, .66);
  display: flex;
  /* NOT align-items:center — when the panel is taller than the window, a
     centred flex item overflows equally in both directions and its top edge
     becomes unreachable by scrolling. Auto margins centre it when there is
     room and leave it scrollable from the top when there is not. */
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  z-index: 20;
  overflow-y: auto;
}
.overlay[hidden] { display: none; }
.panel {
  margin: auto;
  background: var(--panel);
  border: 3px solid var(--blue-dark);
  border-radius: 16px;
  padding: 16px 20px 18px;
  width: min(460px, 100%);
  box-shadow: 0 20px 56px rgba(0, 0, 0, .5);
}
.panel h2 { font-size: 20px; margin-bottom: 10px; color: var(--blue-deep); }

.panel .logo {
  display: block;
  margin: -2px auto 8px;
  height: 92px;
  width: auto;
  aspect-ratio: 557 / 634;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .3));
}
.panel .logo.small { height: 84px; margin-bottom: 8px; }
.setup h2, .result h2 { text-align: center; }

.setup { width: min(720px, 100%); }
.setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.setup-grid .wide { grid-column: 1 / -1; }

.setup fieldset {
  border: 2px solid var(--line);
  border-radius: 11px;
  padding: 6px 12px 10px;
  margin: 0;
  background: var(--panel-2);
}
.setup legend {
  padding: 0 7px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue-dark);
  font-weight: 700;
}
.setup label { display: block; margin: 5px 0; }
.setup .note { margin-top: 4px; font-size: 12px; }
.setup select {
  width: 100%;
  margin-top: 3px;
  padding: 6px 8px;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 8px;
  font: inherit;
}
.setup select:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.setup .primary { width: 100%; padding: 11px; font-size: 17px; }

.promo-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.promo-row button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 76px;
  font-size: 12px;
}
.promo-row .glyph { font-size: 30px; line-height: 1; }

.chamber-choices { display: flex; gap: 12px; justify-content: center; margin-top: 14px; }
.chamber-choices button { padding: 7px; }
.chamber-choices img { width: 120px; border-radius: 8px; display: block; }
.chamber-choices span { display: block; font-size: 12px; margin-top: 6px; }

.result h2 { font-size: 27px; }
.result .primary { margin-top: 16px; width: 100%; padding: 12px; }

@media (max-width: 680px) {
  .setup-grid { grid-template-columns: 1fr; }
  .panel .logo { height: 76px; }
}
/* Short windows: drop the logo rather than make the form scroll. */
@media (max-height: 620px) {
  .panel .logo { display: none; }
  .setup h2 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* -------------------------------------------------------------- how to play */

.panel.help {
  width: min(940px, 100%);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.help-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #1183cc, var(--blue) 60%, var(--blue-dark));
  border-bottom: 3px solid var(--blue-deep);
  flex: 0 0 auto;
}
.help-head h2 { flex: 1; color: #fff; margin: 0; font-size: 20px; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.help-crest { height: 40px; width: auto; aspect-ratio: 557 / 634; object-fit: contain; }

.help-cols {
  display: grid;
  grid-template-columns: 210px 1fr;
  min-height: 0;
  flex: 1 1 auto;
}

/* The bookmark list: always visible, tracks what you are reading. */
.help-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  background: var(--panel-2);
  border-right: 2px solid var(--line);
  overflow-y: auto;
  min-height: 0;
}
.help-toc a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-deep);
  text-decoration: none;
  border-left: 4px solid transparent;
}
.help-toc a:hover { background: #e3eefb; }
.help-toc a.current { background: #d6ecfb; border-left-color: var(--gold); color: var(--ink); }
.help-toc a:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }

.help-body {
  overflow-y: auto;
  min-height: 0;
  padding: 4px 24px 28px;
  scroll-behavior: smooth;
}
.help-body:focus-visible { outline: none; }
.help-section { padding-top: 20px; scroll-margin-top: 8px; }
.help-section h3 {
  font-size: 18px;
  color: var(--blue-deep);
  border-bottom: 2px solid var(--line);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.help-section h4 { font-size: 15px; margin: 16px 0 4px; color: var(--ink); }
.help-body p { margin: 8px 0; }
.help-body ul, .help-steps { margin: 8px 0; padding-left: 22px; }
.help-body li { margin: 6px 0; }
.help-steps li { margin: 8px 0; }

.help-call {
  border-left: 5px solid var(--gold);
  background: #fff6e2;
  border-radius: 0 10px 10px 0;
  padding: 2px 14px;
  margin: 14px 0;
}
.help-call p { margin: 10px 0; }

.help-table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 14px; }
.help-table th, .help-table td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
}
.help-table thead th { background: var(--panel-2); color: var(--blue-deep); font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em; }
.help-table tbody th { font-weight: 600; background: #fafcfe; }

.help-sample { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0; }
.help-sample img { width: 124px; border-radius: 8px; box-shadow: 0 4px 12px rgba(50,32,12,.35); flex: 0 0 auto; }
.help-sample > div { flex: 1 1 auto; min-width: 0; }

.help-jousts { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.help-joust { display: flex; gap: 14px; align-items: flex-start; }
.help-joust img { width: 92px; border-radius: 7px; box-shadow: 0 3px 9px rgba(50,32,12,.35); flex: 0 0 auto; }
.help-joust h4 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.help-joust p { margin: 0; font-size: 14px; }

.help-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
}
.help-tag.must { background: var(--danger); }
.help-tag.hold { background: var(--blue); }

@media (max-width: 720px) {
  .help-cols { grid-template-columns: 1fr; }
  .help-toc {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 2px solid var(--line);
    overflow-y: visible;
    padding: 8px;
  }
  .help-toc a { border-left: 0; border-bottom: 3px solid transparent; padding: 5px 9px; }
  .help-toc a.current { border-left: 0; border-bottom-color: var(--gold); }
  .help-sample, .help-joust { flex-direction: column; }
}

/* ----------------------------------------------------- no game in progress */

.board-area { position: relative; }

/* The board stays visible but is plainly dormant: dimmed, desaturated and
   not clickable, so it reads as scenery rather than something to poke at. */
.board-frame.idle {
  filter: saturate(0.35) brightness(0.82);
  opacity: 0.75;
}
.board-frame.idle .sq { cursor: default; }

.idle-prompt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: var(--panel);
  border: 3px solid var(--blue-dark);
  border-radius: 14px;
  padding: 18px 22px 20px;
  width: min(330px, 80%);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .45);
}
.idle-prompt[hidden] { display: none; }
.idle-prompt h2 { font-size: 18px; color: var(--blue-deep); margin-bottom: 6px; }
.idle-prompt p { margin: 0 0 14px; font-size: 14px; color: var(--ink-dim); }
.idle-prompt .primary { width: 100%; padding: 10px; font-size: 16px; }

.setup { position: relative; }
.setup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  border-radius: 9px;
}

/* ------------------------------------------------------------ player seats */

.players { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }

.player {
  border-left: 5px solid transparent;
  /* The seat waiting its turn sits back at 90%; the active one comes forward to
     full size. Animating between them makes the handover read at a glance. */
  transform: scale(0.9);
  transform-origin: left center;
  transition: transform 180ms ease, border-color 150ms, background 150ms;
}

.player-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

/* The turn signal: the active seat's number grows. Size is the cue that reads
   at a glance from across a table, where a colour change alone would not. */
.player-no {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-dim);
  letter-spacing: .02em;
  line-height: 1.1;
  transition: font-size 160ms ease, color 160ms ease;
}
.player.active .player-no {
  font-size: 23px;
  color: var(--blue-deep);
}
.player.active {
  transform: scale(1);
  border-left-color: var(--blue);
  background: #eaf4fd;
}

.player-who { font-size: 12.5px; color: var(--ink-dim); }
.player.active .player-who { color: var(--ink); font-weight: 600; }

.player-ai {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  padding: 2px 6px;
  text-transform: uppercase;
}

.player-side {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 2px solid var(--line);
}
.player-side.w { background: #fff; color: #2a3b4d; }
.player-side.b { background: #22303d; color: #fff; border-color: #22303d; }

.player-taken {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 1px;
  font-size: 19px;
  line-height: 1.15;
  min-height: 22px;
  max-height: 3.4em;
  overflow-y: auto;
}
.player-taken .muted { font-size: 12px; font-style: italic; }

.taken-piece { pointer-events: auto; }
button.taken-piece {
  padding: 0 3px;
  font-size: 19px;
  line-height: 1.15;
  background: #fff6e0;
  border: 2px solid var(--gold);
  border-radius: 5px;
  box-shadow: none;
}
button.taken-piece:active { transform: none; }

.player.won {
  border-left-color: var(--good);
  background: #f2fbf5;
}
.player.won .player-no { color: var(--good); }

.setup-secondary { width: 100%; margin-top: 8px; padding: 9px; font-size: 14px; }

/* ------------------------------------------------------------ deck history */

.panel.history {
  width: min(560px, 100%);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.history-summary {
  margin: 0;
  padding: 10px 18px;
  font-size: 12.5px;
  color: var(--ink-dim);
  background: var(--panel-2);
  border-bottom: 2px solid var(--line);
  flex: 0 0 auto;
}
.history-body {
  overflow-y: auto;
  min-height: 0;
  padding: 14px 18px 20px;
}
.history-body:focus-visible { outline: none; }

.history-table { font-variant-numeric: tabular-nums; }
.history-table td { text-align: right; width: 72px; }
.history-table thead th:not(:first-child) { text-align: right; }
.history-table tbody th { font-weight: 600; }

/* A card type with none left cannot come up again until a reshuffle — worth
   seeing at a glance, since it makes that piece unplayable in the meantime. */
.history-table tr.exhausted th,
.history-table tr.exhausted td { color: #9aa7b4; }
.history-table tr.exhausted th::after {
  content: " — none left";
  font-size: 10px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--danger);
}
.history-table tr.is-joust th { color: var(--blue-deep); }
.history-table tr.history-total th,
.history-table tr.history-total td {
  border-top: 3px solid var(--line);
  background: var(--panel-2);
  font-weight: 700;
}

.history-recent { margin-top: 18px; }
.history-recent h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue-deep);
  margin-bottom: 8px;
}
.history-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.history-strip img {
  width: 54px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(50, 32, 12, .3);
}

.pile.discard:not(:disabled) { cursor: pointer; }
.pile.discard:not(:disabled):hover .discard-top { outline: 3px solid var(--gold); }
.pile.discard:disabled { cursor: default; }

/* ---------------------------------------------------------- expanded log */

.log-head { display: flex; align-items: baseline; gap: 8px; }
.log-head h2 { flex: 1; margin-bottom: 0; }

.log-expand {
  flex: 0 0 auto;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 999px;
  border: 2px solid var(--blue);
  background: #fff;
  color: var(--blue-deep);
  box-shadow: none;
}
.log-expand:hover:not(:disabled) { background: var(--blue-pale); }
.log-expand:active:not(:disabled) { transform: none; }
.log-wrap .log { margin-top: 6px; }

.logfull { list-style: none; margin: 0; padding: 0; }
.logfull-entry {
  display: grid;
  grid-template-columns: 30px 46px 1fr;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #dde6ef;
  font-size: 13.5px;
}
.logfull-entry:first-child { font-weight: 650; }
.logfull-turn {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.logfull-cardslot { display: flex; justify-content: center; }
.logfull-cardslot img {
  width: 46px;
  border-radius: 4px;
  display: block;
  box-shadow: 0 2px 5px rgba(50, 32, 12, .3);
}
.logfull-text { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .logfull-entry { grid-template-columns: 24px 34px 1fr; gap: 7px; font-size: 12.5px; }
  .logfull-cardslot img { width: 34px; }
}