/* FOR THE CROWN — the interface, drawn with the names in css/theme.css
   (colours, faces, shapes, shadows, layers). Nothing here names a colour. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Touch: no grey flash, no double-tap zoom on a quick second tap, no text
   selection or callouts on the things you tap during play. */
html { -webkit-tap-highlight-color: transparent; }
.board, .barracks, .hand, .prompt-bar, .topbar, .player-panel, .drawer h3, .btn, .tile, .pile {
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
body {
  background: var(--parch) radial-gradient(ellipse at top, var(--surface-glow) 0%, var(--parch) 55%, var(--parch-2) 100%) fixed;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.35;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: 0.02em; margin: 0 0 0.5em; }
h2 { font-size: 1.15rem; color: var(--crimson); }
h3 { font-size: 0.95rem; display: flex; justify-content: space-between; align-items: center; }
.hidden { display: none !important; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.85rem; }
button { font: inherit; color: inherit; }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  background: var(--parch-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.45em 0.9em;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--highlight) inset;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:focus-visible { outline: 3px solid var(--sel); outline-offset: 1px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary { background: var(--crimson); color: var(--on-crimson); border-color: var(--crimson-deep); font-family: var(--display); }
.btn.wide { width: 100%; margin-top: 0.5rem; }
.btn .badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--crimson); color: var(--parch); font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 2px; }
.btn.small { padding: 0.3em 0.6em; font-size: 0.9rem; }
.btn.tiny { padding: 0.1em 0.5em; font-size: 0.8rem; font-family: var(--serif); }
.btn.glow { box-shadow: 0 0 0 2px var(--sel); }
.btn.armed { background: var(--attack); border-color: var(--crimson-deep); color: var(--on-crimson); }
.btn.icon { padding: 0; width: 44px; height: 44px; font-size: 1.1rem; flex: 0 0 auto; }
/* Gold, everywhere, is the cards' printed coin (img/cards/coin_icon.webp). */
.coin {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; padding: 0 0.2em;
  border-radius: var(--radius-pill); color: var(--coin-ink); font-weight: 700; font-size: 0.8em; line-height: 1;
  font-family: var(--serif-num); text-shadow: 0 0 2px var(--coin-glow);
  background: var(--coin) url(../img/cards/coin_icon.webp) center / 100% 100% no-repeat;
}

/* ---- title screen ----------------------------------------------------------- */
/* ---- the title screen: the shared bar, then the pitch or home --------------------- */
.title-body { max-width: 1040px; margin: 0 auto; padding: 20px 16px 40px; }
.site-bar { gap: 10px; padding: 6px 14px; min-height: 48px; }
.bar-crest { width: 28px; height: 28px; flex: 0 0 auto; color: var(--parch); --paper: var(--wood); }
.site-name { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.05rem; letter-spacing: 0.06em; color: var(--parch); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-link { background: none; border: 0; padding: 8px 10px; color: var(--on-wood-soft); font: inherit; font-size: 0.92rem; text-decoration: underline; cursor: pointer; }
.bar-link:hover { color: var(--parch); }
.title-head { text-align: center; margin: 4px 0 22px; }
.headline { margin: 0; font-family: var(--display); font-size: clamp(1.3rem, 3.4vw, 1.9rem); line-height: 1.2; color: var(--crimson); }
/* Home: the pitch's parts go, and the rest are tiles. */
.mode-home .title-head, .mode-home .about-band, .mode-home .card-fan, .mode-home .fan-caption, .mode-home .newcomer { display: none; }
.mode-home .title-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mode-home .hero-grid, .mode-home .title-grid { display: contents; }
.mode-home .hero { background: var(--surface-veil); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.mode-home .hero-kicker { align-self: stretch; font-size: 1.15rem; padding-bottom: 6px; border-bottom: 1px solid var(--parch-3); margin-bottom: 6px; }
.mode-home .board.taste { --size: min(340px, 100%); }
.mode-home .credit { grid-column: 1 / -1; }
.mode-landing .war-panel { margin-bottom: 16px; } /* reached from home by About the game */
.war-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "head head" "board line" "board btn"; gap: 6px 20px; align-items: start; }
.war-panel h2 { grid-area: head; }
.war-board { grid-area: board; }
.war-board .board.mini { max-width: 200px; }
.war-panel .hint { grid-area: line; margin: 0; align-self: end; font-size: 1rem; }
.war-panel .btn { grid-area: btn; width: auto; justify-self: start; margin-top: 6px; }
.title-head::after { content: ""; display: block; width: 72px; height: 2px; background: var(--crimson); opacity: 0.6; margin: 14px auto 0; }
.panel h2 { padding-bottom: 6px; border-bottom: 1px solid var(--parch-3); margin-bottom: 12px; }
/* the cards, fanned, where the player chooses to play */
.card-fan { display: flex; justify-content: center; align-items: flex-start; height: 212px; margin: 2px 0 0; padding: 6px 0 0; border: 0; background: none; cursor: pointer; width: 100%; }
.card-fan .card { width: 124px; margin: 0 -22px; transition: transform 0.2s; transform-origin: 50% 100%; }
.card-fan .card:nth-child(1) { transform: rotate(-10deg) translateY(6px); }
.card-fan .card:nth-child(3) { transform: rotate(10deg) translateY(6px); }
.card-fan:hover .card:nth-child(1) { transform: rotate(-14deg) translateY(4px) translateX(-6px); }
.card-fan:hover .card:nth-child(3) { transform: rotate(14deg) translateY(4px) translateX(6px); }
.fan-caption { margin: 6px 0 10px; }
/* eight counters in a row: the known and the new */
.unit-strip { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 16px auto 0; padding: 0; border: 0; background: none; cursor: pointer; width: 100%; }
.unit-strip .unit { width: calc(58px * var(--counter, 1)); height: calc(58px * var(--counter, 1)); align-self: center; filter: drop-shadow(0 2px 2px var(--shadow-ink)); transition: transform 0.15s; }
.unit-strip:hover .unit { transform: translateY(-2px); }
.strip-caption { margin: 8px 0 0; }
.band-title { text-align: center; font-size: 0.95rem; color: var(--crimson); letter-spacing: 0.08em; text-transform: uppercase; margin: 26px 0 10px; }
/* the hero: a board to play on, beside the way into the game */
.hero-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 16px; }
.hero { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero-kicker { margin: 0; font-family: var(--display); font-size: 0.95rem; color: var(--crimson); letter-spacing: 0.04em; }
.hero-board { position: relative; }
.board.taste { --size: min(380px, 42vw); min-width: 0; width: var(--size); border-width: 5px; }
.board.taste .sq .coord { font-size: 8px; }
.hero-line { margin: 0; max-width: 380px; text-align: center; font-size: 0.95rem; min-height: 2.6em; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; min-height: 34px; }
.about-band { margin: 4px 0 24px; }
.whats-here { list-style: none; padding: 0; margin: 0 auto; max-width: 1080px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; font-size: 0.92rem; color: var(--ink-soft); }
.whats-here li { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-veil); border: 1px solid var(--parch-3); border-radius: var(--radius); padding: 10px 12px; }
.whats-here svg { width: 30px; height: 30px; flex: 0 0 auto; color: var(--crimson); --paper: var(--parch); margin-top: 2px; }
.whats-here b { color: var(--ink); font-weight: 600; }
.pitch { margin: 6px auto 0; max-width: 38em; color: var(--ink); font-size: 1.02rem; }
.name-hint { margin: -6px 0 10px; }
/* how it plays, in three glances */
.how-strip { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; max-width: 1080px; font-size: 0.95rem; color: var(--ink-soft); counter-reset: step; }
.how-strip li { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--surface-veil); border: 1px solid var(--parch-3); border-radius: var(--radius); padding: 10px 12px; counter-increment: step; }
.how-strip li::before { content: counter(step); font-family: var(--display); font-size: 1.3rem; color: var(--crimson); opacity: 0.8; width: 1em; flex: 0 0 auto; }
.how-strip b { color: var(--ink); font-weight: 600; }
.how-strip svg, .how-strip img { width: 30px; height: 30px; flex: 0 0 auto; color: var(--crimson); --paper: var(--parch); }
.btn.big { font-size: 1.15rem; padding: 0.7em 1em; margin-top: 0.8rem; }
.hint.centred { text-align: center; }
/* the sign-in modal's form: the field and its button on one line, two on a phone */
.signin-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.signin-form input { flex: 1 1 200px; min-width: 0; }
.signin-form .btn { flex: 0 0 auto; }
details.more { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
details.more summary { cursor: pointer; font-family: var(--display); font-size: 0.95rem; padding: 11px 0; list-style: none; display: flex; align-items: center; gap: 6px; }
/* text links on the title screen: a finger-sized hit area without moving the text */
.panel .linkish, .account-box summary { display: inline-block; padding: 12px 0; margin: -12px 0; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "▸"; display: inline-block; transition: transform 0.15s; color: var(--ink-soft); }
details.more[open] summary::before { transform: rotate(90deg); }
details.more[open] summary { margin-bottom: 8px; }
.title-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.title-grid .panel.span { grid-column: 1 / -1; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.btn-row .btn { flex: 1 1 140px; margin-top: 0; white-space: nowrap; }
.panel {
  background: var(--surface-veil);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.field { display: block; border: 0; padding: 0; margin: 0 0 12px; }
.field legend, label.field { font-weight: 600; margin-bottom: 4px; display: block; }
label.field input { display: block; width: 100%; margin-top: 4px; }
input[type="text"], input[type="email"] {
  font: inherit; padding: 0.4em 0.5em; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.3em 0.7em; cursor: pointer; background: var(--parch-2);
}
/* The chosen one is in the game's red, as the open tab is. */
.seg label:has(input:checked) { background: var(--surface); color: var(--crimson); border-color: var(--crimson); font-weight: 600; }
.seg input { margin: 0 0.3em 0 0; }
.check { display: block; margin: 4px 0; cursor: pointer; }
.hint { font-size: 0.85rem; color: var(--ink-soft); margin: 6px 0; }
.supply-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; margin-top: 6px; }
.supply-picker label { font-size: 0.9rem; cursor: pointer; }
.soon { font-family: var(--serif); font-size: 0.75rem; font-weight: 400; background: var(--parch-3); border-radius: var(--radius-lg); padding: 1px 8px; vertical-align: middle; }
.soon-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.soon-list > li > .btn { width: 100%; text-align: left; }
.account-box { border: 1px dashed var(--line); border-radius: var(--radius); padding: 8px 10px; font-size: 0.95rem; margin-bottom: 10px; }
.account-box details summary { cursor: pointer; color: var(--blue-deep); text-decoration: underline; }
.account-box details[open] summary { margin-bottom: 6px; }
.account-box form { display: flex; gap: 6px; margin-top: 6px; }
.account-box input { flex: 1; min-width: 0; }
.history-list { list-style: none; padding: 0; margin: 6px 0 0; font-size: 0.9rem; }
.history-list li { border-bottom: 1px solid var(--parch-3); padding: 3px 0; }
.credit { text-align: center; font-size: 0.8rem; color: var(--ink-soft); margin-top: 24px; }
.credit .build { display: block; margin-top: 6px; opacity: 0.85; font-variant-numeric: tabular-nums; }

/* ---- game layout ---------------------------------------------------------------- */
#gameScreen { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; height: 100dvh; }
/* The top bar is the board's dark frame, light type on wood, on every screen. */
.topbar {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px; color: var(--parch);
  background: linear-gradient(var(--wood), var(--wood-deep)); border-bottom: 2px solid var(--wood-edge);
}
.topbar > .btn { background: var(--on-wood-veil); border-color: var(--on-wood-line); color: var(--parch); box-shadow: none; }
.topbar > .btn:active { background: var(--on-wood-press); }
.topbar .chip { background: var(--on-wood-veil); border-color: var(--on-wood-line); color: var(--parch); }
/* The turn as a stepper; each phase holds its own resources. */
.phase-bar { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; font-family: var(--display); font-size: 0.8rem; }
.phase-bar .who { font-family: var(--serif); font-size: 0.95rem; margin-right: 6px; color: var(--parch); }
.phase-bar .steps { display: inline-flex; align-items: center; gap: 3px; }
.phase-bar .sep { color: var(--on-wood-faint); font-size: 0.9rem; }
.phase-bar .ph {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); color: var(--on-wood-soft);
  border: 1px solid transparent; white-space: nowrap;
}
.phase-bar .ph b { font-size: 0.95rem; }
.phase-bar .ph.done { opacity: 0.55; }
.phase-bar .ph.on { background: var(--parch); color: var(--ink); }
.phase-bar.theirs .ph.on { background: var(--gold); color: var(--ink); }
.res-bar { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px 9px; font-size: 0.9rem; background: var(--surface); white-space: nowrap; }
.chip b { font-family: var(--display); }
.chip.gold b { color: var(--treasure); }

.table {
  display: grid; grid-template-columns: 250px minmax(300px, 1fr) 290px; gap: 12px;
  padding: 10px 12px; min-height: 0; overflow: hidden;
}
.side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.center { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; overflow-y: auto; }
.center > * { flex-shrink: 0; }

.player-panel {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; background: var(--surface-veil);
  font-size: 0.92rem;
}
.player-panel .pname { font-family: var(--display); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.player-panel .stats { display: flex; gap: 8px; flex-wrap: wrap; color: var(--ink-soft); margin-top: 2px; }
.hchip {
  display: inline-flex; align-items: center; gap: 3px; color: var(--ink-soft); font: inherit; background: none; border: 0;
  padding: 0; white-space: nowrap;
}
.hchip svg { width: 16px; height: 16px; flex: 0 0 auto; --paper: var(--surface); }
.hchip b { font-family: var(--display); font-size: 0.95em; color: var(--ink); }
button.hchip { cursor: pointer; border-bottom: 1px dotted var(--line); }
.swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid var(--shadow-ink); }
.swatch.o0 { background: var(--blue); }
.swatch.o1 { background: var(--gold); }
.card-backs { display: flex; gap: 3px; margin-top: 6px; }
.card-back { width: 18px; height: 26px; border-radius: var(--radius-sm); background: repeating-linear-gradient(45deg, var(--crimson), var(--crimson) 3px, var(--crimson-deep) 3px, var(--crimson-deep) 6px); border: 1px solid var(--crimson-deep); }

.log-panel, .supply-panel {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-veil);
  padding: 8px 10px; min-height: 0; display: flex; flex-direction: column;
}
.log-panel { flex: 1; }
#log { list-style: none; margin: 0; padding: 0; overflow-y: auto; font-size: 0.88rem; flex: 1; }
#log li { padding: 2px 0; border-bottom: 1px dotted var(--parch-3); }
#log li.turn { font-family: var(--display); font-size: 0.78rem; border-bottom: 0; margin-top: 6px; color: var(--crimson); }
#log li.private { color: var(--blue-deep); font-style: italic; }
.supply-panel { flex: 1; overflow-y: auto; }
.supply { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* ---- board ------------------------------------------------------------------------ */
.board-wrap { width: 100%; display: flex; justify-content: center; }
.board {
  --size: min(100%, calc(100vh - 500px), 600px);
  width: var(--size); min-width: 300px; aspect-ratio: 1 / 1;
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border: 6px solid var(--wood-edge); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
@supports (height: 100dvh) { .board { --size: min(100%, calc(100dvh - 500px), 600px); } }
/* On a wide screen the board takes whatever height the barracks and the
   prompt bar leave, so a tip or a warning never pushes anything out of view. */
@supports (container-type: size) {
  @media (min-width: 901px) {
    /* The board gives way before the prompt bar does (its button must stay in view). */
    .board-wrap { flex: 1 1 0; min-height: 180px; container-type: size; align-items: center; }
    .board { --size: min(100cqw, 100cqh, 640px); min-width: 0; }
    /* A steady bar: a feed, an instruction, the buttons and one warning fit
       without growing it, so the board keeps its size from move to move. */
    .center .prompt-bar { min-height: 150px; }
  }
}
.sq { position: relative; background: var(--sq-light); display: flex; align-items: center; justify-content: center; }
.sq.dark { background: var(--sq-dark); }
.sq .coord { position: absolute; font-size: 9px; color: var(--ink-faint); pointer-events: none; }
.sq .coord.file { right: 2px; bottom: 0; }
.sq .coord.rank { left: 2px; top: 0; }
.sq.home0 { box-shadow: inset 0 -3px 0 var(--blue-halo); }
.sq.home1 { box-shadow: inset 0 3px 0 var(--gold-halo); }
.sq.last { background-image: linear-gradient(var(--sel-halo), var(--sel-halo)); }
.sq.target { cursor: pointer; }
.sq.target::after {
  content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: var(--march); pointer-events: none;
}
.sq.target.hit::after { width: 86%; height: 86%; background: none; border: 4px solid var(--attack); box-sizing: border-box; }
.sq.target:active { outline: 3px solid var(--sel); outline-offset: -3px; }
/* A square the enemy could capture on: the piece may be lost there. */
.sq.target.unsafe::after { background: var(--unsafe); }
.sq.target.hit.unsafe::after { background: none; border-color: var(--unsafe); border-style: dashed; }
/* Where a tapped piece reaches (red for an enemy piece, blue for yours). */
.sq.reach-enemy::before, .sq.reach-mine::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sq.reach-enemy::before { background: var(--attack-halo); box-shadow: inset 0 0 0 1px var(--attack-glow); }
.sq.reach-mine::before { background: var(--blue-halo); box-shadow: inset 0 0 0 1px var(--blue-glow); }
/* A piece on its way to a new square passes over everything else. */
.board .unit.moving { z-index: 7; }
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-fx); }
/* coach marks: a spotlight and a bubble, over everything, taps passing through */
.coach { position: fixed; inset: 0; z-index: var(--z-coach); pointer-events: none; }
.coach.blocking { pointer-events: auto; }
.coach-spot { position: fixed; border-radius: var(--radius-lg); box-shadow: 0 0 0 9999px var(--scrim); transition: left 0.25s, top 0.25s, width 0.25s, height 0.25s; }
.coach.soft .coach-spot { box-shadow: 0 0 0 9999px var(--scrim-soft); }
.coach-ring { position: fixed; border: 3px solid var(--gold); border-radius: var(--radius-lg); box-shadow: 0 0 0 4px var(--sel-halo); animation: coachPulse 1.3s ease-in-out infinite; transition: left 0.25s, top 0.25s, width 0.25s, height 0.25s; }
@keyframes coachPulse { 0%, 100% { box-shadow: 0 0 0 4px var(--sel-halo); } 50% { box-shadow: 0 0 0 9px var(--sel-wash); } }
.coach-bubble { position: fixed; max-width: min(340px, calc(100vw - 16px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 12px 10px; box-shadow: var(--shadow-lift); pointer-events: auto; font-size: 0.95rem; }
.coach-bubble .kicker { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crimson); margin-bottom: 2px; }
.coach-bubble h4 { font-family: var(--display); font-size: 1rem; margin: 0 0 4px; }
.coach-bubble p { margin: 0; }
.coach-bubble p.small { margin-top: 6px; color: var(--ink-soft); }
.coach-bubble .acts { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.coach-bubble .arrow { position: absolute; top: -8px; width: 14px; height: 14px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.coach-bubble.above .arrow { top: auto; bottom: -8px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .coach-ring { animation: none; } .coach-spot, .coach-ring { transition: none; } }
/* the lessons, listed beside the board on a wide screen */
.lesson-outline { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow); }
.lesson-outline h3 { margin: 0 0 6px; font-size: 0.95rem; color: var(--crimson); }
.lesson-outline ol { margin: 0; padding-left: 1.4em; }
.lesson-outline li { padding: 2px 0; color: var(--ink-soft); }
.lesson-outline li.done { text-decoration: line-through; opacity: 0.7; }
.lesson-outline li.now { color: var(--ink); font-weight: 600; }
.lesson-outline li.now::marker { color: var(--crimson); }
.lesson-outline .small { margin: 8px 0 0; }
.fx-layer .ghost { position: absolute; transition: transform 0.45s ease-in, opacity 0.45s ease-in; }
.fx-layer .ghost.gone { opacity: 0; transform: scale(0.3) rotate(14deg); }
.bump { display: inline-block; animation: bump 0.4s ease-out; }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .bump { animation: none; } .fx-layer .ghost { transition: none; } }
/* Pieces sit on their own layer so a neighbouring square can't paint over
   the glow or the slight enlargement of a selected piece; the markers for
   where a piece can go sit above them. */
.board .unit { z-index: 2; }
.board .unit.can, .board .unit.sel, .board .unit.immune { z-index: 3; }
.sq.target::after { z-index: 4; }
.sq.selectable { cursor: pointer; }

/* Counters are printed in four sizes (a Pawn is 48/66 of a Queen); the
   board shows them to scale, the largest filling 94% of a square. */
.unit {
  width: calc(94% * var(--counter, 1)); height: calc(94% * var(--counter, 1)); position: relative; user-select: none; border-radius: 9%;
  filter: drop-shadow(0 2px 2px var(--shadow-ink)); transition: transform 0.12s;
}
.unit .counter { width: 100%; height: 100%; display: block; }
/* Board and Barracks tokens are small: the name text is dropped there (the
   tile, the class silhouette, the illustration and the band's colour carry
   the information); cards and panels show it. */
#board .counter .name, .barracks .counter .name { display: none; }
.unit.can { cursor: pointer; }
.unit.can::after, .unit.sel::after, .unit.picked::after, .unit.immune::after {
  content: ""; position: absolute; inset: -3px; border-radius: 11%; pointer-events: none;
}
.unit.can::after { box-shadow: 0 0 0 3px var(--sel), 0 0 8px 2px var(--sel-glow); }
.unit.can:active { transform: scale(0.94); }
.unit.sel { transform: scale(1.08); }
.unit.sel::after { box-shadow: 0 0 0 4px var(--crimson), 0 0 12px 3px var(--sel); }
.unit.picked::after { box-shadow: 0 0 0 4px var(--crimson); }
.unit.ordered { filter: saturate(0.5) brightness(0.9) drop-shadow(0 1px 1px var(--shadow-ink)); }
.unit.frozen { filter: grayscale(0.8) drop-shadow(0 1px 1px var(--shadow-ink)); }
.unit.frozen::before {
  content: "\2744"; position: absolute; top: -6px; right: -6px; font-size: 13px; color: var(--blue-ink);
  background: var(--blue-tint); border-radius: 50%; width: 17px; height: 17px; line-height: 17px; text-align: center; z-index: 2;
}
.unit.immune::after { box-shadow: 0 0 0 3px var(--gold-pale), 0 0 12px 4px var(--gold); }
/* These use the counter's own shadow, so they combine with the rings above. */
.unit.danger { animation: danger 1.1s ease-in-out infinite; }
@keyframes danger {
  0%, 100% { box-shadow: 0 0 0 5px var(--attack), 0 0 10px 6px var(--attack-halo); }
  50% { box-shadow: 0 0 0 7px var(--attack-glow), 0 0 16px 9px var(--attack-halo); }
}
.unit.prey { outline: 3px dashed var(--attack); outline-offset: 3px; }
.unit.threat { outline: 3px solid var(--attack); outline-offset: 2px; }
.unit.inspected { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--parch); }
.board .unit.danger, .board .unit.prey, .board .unit.threat, .board .unit.inspected { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .unit.danger { animation: none; box-shadow: 0 0 0 5px var(--attack); }
}

.barracks {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-height: 40px; width: 100%;
  max-width: 600px; padding: 2px 4px; font-size: 0.85rem; color: var(--ink-soft);
}
.barracks .label { font-family: var(--display); font-size: 0.75rem; }
.barracks .slot { display: flex; align-items: center; gap: 2px; }
.barracks .unit { width: calc(40px * var(--counter, 1)); height: calc(40px * var(--counter, 1)); }
.barracks .count { font-size: 0.8rem; }

/* ---- prompt bar ------------------------------------------------------------------ */
.prompt-bar {
  width: 100%; max-width: 640px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 8px 10px; box-shadow: var(--shadow); min-height: 54px;
}
.prompt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.prompt-bar .pinfo, .prompt-bar .ptext { flex: 1 1 100%; min-width: 0; }
.prompt-bar .pinfo:empty, .prompt-bar .pact:empty, .prompt-bar .opts:empty { display: none; }
.prompt-bar .pact { display: flex; gap: 6px; }
.prompt-bar .ptext { margin: 0; }
.prompt-bar.wait .ptext { color: var(--ink-soft); font-style: italic; }
.prompt-bar .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.prompt-bar.mine { border-color: var(--crimson); box-shadow: 0 0 0 2px var(--crimson-halo), var(--shadow); }
/* What just happened: your last choice, the opponent's turn, or why a tap did nothing. */
.pfeed {
  margin: 0 0 6px; padding: 4px 8px; border-left: 4px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.9rem; background: var(--parch-2);
}
.pfeed.you { border-left-color: var(--train); background: var(--green-tint); }
.pfeed.them { border-left-color: var(--gold-deep); background: var(--gold-tint); }
.pfeed.note { border-left-color: var(--blue); background: var(--blue-tint); }
.pfeed.nudge { animation: nudge 0.35s ease-out; }
@keyframes nudge {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
.pwarn, .pgood { margin: 0 0 6px; padding: 3px 8px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.92rem; }
.pwarn { background: var(--red-tint); color: var(--crimson-ink); }
.pgood { background: var(--green-tint); color: var(--green-ink); }
.linkish { background: none; border: 0; padding: 0; color: var(--blue-deep); text-decoration: underline; cursor: pointer; font-size: inherit; }

/* ---- hand & cards -------------------------------------------------------------------- */
.hand-area {
  display: grid; grid-template-columns: 220px 1fr; gap: 10px; padding: 8px 12px 10px;
  border-top: 1px solid var(--line); background: var(--tray);
}
.hand { display: flex; gap: 10px; overflow-x: auto; padding: 8px 4px 6px; min-height: 216px; align-items: flex-start; }
.hand .empty { color: var(--ink-soft); font-style: italic; align-self: center; }

.card { width: 150px; flex: 0 0 auto; position: relative; border-radius: var(--radius); transition: transform 0.15s; }
.card > svg.cardsvg { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 4px var(--shadow-ink)); }
.card.compact { width: 150px; }
.card-zoom {
  position: fixed; right: 18px; bottom: 18px; width: 300px; z-index: var(--z-banner); pointer-events: none;
  filter: drop-shadow(0 12px 24px var(--shadow-ink));
}
.card-zoom > svg { width: 100%; height: auto; display: block; }
.card.chosen { transform: translateY(-8px); }
.card.chosen > svg { filter: drop-shadow(0 0 0 var(--crimson)) drop-shadow(0 0 6px var(--crimson)); }
.card.pickable { cursor: pointer; }
.card.pickable > svg { filter: drop-shadow(0 0 5px var(--sel)) drop-shadow(0 0 2px var(--sel)); }
.cardsvg .hit { pointer-events: none; }
.cardsvg .hit.blocked { pointer-events: all; cursor: help; }
.cardsvg .hit.playable { pointer-events: all; cursor: pointer; stroke: var(--sel); stroke-width: 6; fill-opacity: 0.1; }
.cardsvg .hit.playable:focus { fill-opacity: 0.28; outline: none; }
.card .info {
  position: absolute; top: 4px; right: 34%; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); font: italic 700 13px/1 var(--serif); cursor: pointer; padding: 0; z-index: 2;
}
.card.big { width: min(330px, 86vw); }
.card .note { font-size: 0.9rem; font-style: italic; color: var(--ink-soft); margin: 8px 4px 0; }

/* Supply piles */
.pile { position: relative; border: 0; background: none; padding: 0; cursor: pointer; border-radius: var(--radius); }
.pile > svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 3px var(--shadow-ink)); }
/* How many are left sits on the title plaque's left end, clear of the card's text. */
.pile .left, .pile .discount {
  position: absolute; top: 3px; left: 3px; background: var(--ink); color: var(--parch); font-size: 0.72rem;
  border-radius: var(--radius); padding: 0 6px; font-family: var(--display);
}
.pile .discount { left: auto; right: 3px; top: auto; bottom: 3px; background: var(--treasure); }
.pile.empty { opacity: 0.4; }
.pile.affordable > svg { filter: drop-shadow(0 0 4px var(--sel)) drop-shadow(0 0 2px var(--sel)); }
/* Out of reach while buying: the card goes grey, its price stays gold. */
.pile.cant .cbody { filter: grayscale(0.92) opacity(0.62); }
.pile.cant .left { opacity: 0.75; }

/* ---- modal ------------------------------------------------------------------------------ */
.modal { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: 16px; }
.modal-box {
  background: var(--parch); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal);
  max-width: 820px; width: 100%; max-height: 90vh; max-height: 90dvh; overflow: auto; padding: 18px; position: relative;
  overscroll-behavior: contain;
}
.modal-close { position: absolute; top: 8px; right: 8px; }
.modal-cards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.modal-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.menu-list { display: grid; gap: 8px; max-width: 320px; margin: 0 auto; }
.winner-banner { text-align: center; }
.winner-banner.puzzle-end p { max-width: 36em; margin: 0.4em auto; }
/* a puzzle has no cards: no Supply, no hands */
#gameScreen.puzzle .side.right, #gameScreen.puzzle #btnSupplyToggle, #gameScreen.puzzle .card-backs { display: none; }
#gameScreen.puzzle .table { grid-template-columns: 250px minmax(300px, 1fr); }
#gameScreen.puzzle .hand { min-height: 0; }
.winner-banner h2 { font-size: 1.8rem; }

/* Rules page */
.rules { font-size: 1rem; }
.rules h2 { margin-top: 1em; }
.rules h3 { display: block; margin: 0.8em 0 0.3em; }
.rules ol, .rules ul { padding-left: 1.3em; }
.rules .units-ref { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.rules .uref { display: flex; gap: 8px; border: 1px solid var(--parch-3); border-radius: var(--radius); padding: 6px; background: var(--surface); font-size: 0.88rem; }
.rules .uref .unit { width: 54px; height: 54px; flex: 0 0 auto; --counter: 1; }
.rules .uref .diagram { width: 78px; height: 78px; flex: 0 0 auto; align-self: flex-start; }
/* A movement grid plays how the unit moves; a tap plays it again. */
.cardsvg .mv, .diagram .mv { cursor: pointer; }
.pfeed.with-grid { display: flex; align-items: center; gap: 8px; }
.pfeed.with-grid .diagram { width: 86px; height: 86px; flex: 0 0 auto; }
.pfeed.with-grid .pfeed-text { flex: 1; min-width: 0; }
/* The pages of the reference as a strip of tabs, the open one underlined
   in the game's red, not a row of loose buttons. */
.rules .tabs { display: flex; gap: 2px; margin: 0 0 14px; border-bottom: 2px solid var(--parch-3); overflow-x: auto; scrollbar-width: none; }
.rules .tabs::-webkit-scrollbar { display: none; }
.rules .tabs .btn {
  flex: 0 0 auto; border: 0; border-radius: 0; background: none; box-shadow: none; min-height: 40px; padding: 6px 14px;
  color: var(--ink-soft); font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.03em;
}
.rules .tabs .btn:active { transform: none; }
.rules .tabs .on { color: var(--crimson); box-shadow: inset 0 -3px 0 var(--crimson); }
.rules > h2:first-child { margin: 0 0 6px; padding-right: 36px; }
.rules .build-line { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 0.4em; }
.rules .news h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--crimson); margin-top: 1.1em; }
.rules .news h3 .when { font-family: var(--serif); font-weight: normal; font-size: 0.85rem; color: var(--ink-soft); }
.rules .news li { margin: 0.25em 0; }
/* The rules page: short sections, a figure beside each, drawn from the
   game's own parts so the page shows what the board shows. */
.rules .rule {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "fig head" "fig body";
  gap: 0 20px; align-items: start; margin-top: 1.4em;
}
.rules .rule > h2 { grid-area: head; margin: 0 0 0.2em; }
.rules .rule > .fig { grid-area: fig; }
.rules .rule > .txt { grid-area: body; }
.rules .rule.plain { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head" "body"; }
.rules-text > .rule:first-child { margin-top: 0.6em; }
.rules .rule .txt > p { margin: 0.5em 0; }
.rules .rule .fig { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px; }
.rules .rule .fig .cap { margin: 0; font-size: 0.82rem; color: var(--ink-soft); text-align: center; font-style: italic; }
.rules .rule.plain .txt ul { margin: 0.4em 0; }
.board.mini {
  --size: auto; width: 100%; max-width: 240px; min-width: 0; aspect-ratio: var(--cols) / var(--rows);
  grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr);
  border-width: 4px; pointer-events: none;
}
.board.mini .sq .coord { font-size: 8px; }
.board.mini .sq.target.hit::after { border-width: 3px; }
.board.mini .counter .name { display: none; }
.fig-card { display: flex; gap: 10px; align-items: stretch; width: 100%; }
.fig-card .card { width: 130px; }
.fig-card .cardsvg .hit { stroke: var(--sel); stroke-width: 6; fill-opacity: 0.1; }
.fig-card .notes { position: relative; flex: 1; min-width: 100px; font-size: 0.82rem; line-height: 1.3; }
.fig-card .half-note { position: absolute; left: 0; right: 0; margin: 0; transform: translateY(-50%); }
/* The stepper figure, as the top bar draws it: light type on wood. */
.rules .fig-stepper { width: fit-content; margin: 4px auto 10px; padding: 5px 12px; border-radius: var(--radius); background: linear-gradient(var(--wood), var(--wood-deep)); }
.turn-tiles { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.turn-tiles li {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px;
  border: 1px solid var(--parch-3); border-radius: var(--radius); background: var(--surface); font-size: 0.88rem;
}
.turn-tiles .fig { padding-top: 0; }
.turn-tiles .txt { width: 100%; }
.turn-tiles h3 { margin: 0 0 0.2em; color: var(--crimson); }
.turn-tiles p { margin: 0; }
.turn-tiles .card { width: 100px; }
.turn-tiles .board.mini { max-width: 150px; }
.fig-piles { display: flex; gap: 8px; align-items: flex-start; }
.fig-piles .pile { width: 86px; pointer-events: none; }
.fig-piles .pile .left { display: none; }
.fig-deploy, .fig-promo { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.fig-barracks { justify-content: center; width: auto; gap: 10px; }
.fig-row { display: flex; gap: 4px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 0.8rem; color: var(--ink-soft); }
.fig-row .label { font-family: var(--display); font-size: 0.75rem; margin-right: 4px; }
.fig-row .unit { width: calc(40px * var(--counter, 1)); height: calc(40px * var(--counter, 1)); }
.fig-row .counter .name { display: none; }
.class-row { display: flex; flex-wrap: wrap; gap: 8px 6px; justify-content: center; }
.class-row .cls { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; width: 72px; font-family: var(--display); font-size: 0.72rem; }
.class-row .unit { width: calc(48px * var(--counter, 1)); height: calc(48px * var(--counter, 1)); }
@media (max-width: 900px) {
  /* Phones: the figure above its text; a phase tile is a row, figure left. */
  .rules .tabs .btn { flex: 1 1 auto; padding: 6px 4px; font-size: 0.78rem; letter-spacing: 0.02em; }
  .rules .rule { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head" "fig" "body"; gap: 6px 0; }
  .board.mini { max-width: 280px; }
  .turn-tiles { grid-template-columns: minmax(0, 1fr); }
  .turn-tiles li { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 10px; }
  .turn-tiles .board.mini { max-width: 124px; }
  .turn-tiles .card { width: 92px; }
  .fig-piles { gap: 4px; }
  .fig-piles .pile { width: 60px; }
}
.legend-row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.85rem; align-items: center; margin: 6px 0; }
.legend-row i { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin-right: 4px; }

/* "Your turn", briefly, over the board. */
.board-wrap { position: relative; }
.turn-banner {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none;
  padding: 10px 28px; border-radius: var(--radius-lg); background: var(--crimson); color: var(--on-crimson); white-space: nowrap;
  font-family: var(--display); font-size: 1.5rem; box-shadow: var(--shadow); opacity: 0;
}
.turn-banner.show { animation: banner 1.4s ease-out forwards; }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .turn-banner.show { animation-name: bannerFade; }
  @keyframes bannerFade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
}

/* Your deck and discard sit by your Barracks on a phone only. */
.mystats { display: none; }
.supply-info { font-family: var(--serif); font-weight: 400; font-size: 0.85rem; color: var(--ink-soft); }

/* Bottom sheets (phone): the modal rises from the bottom. */
.modal.sheet { align-items: flex-end; padding: 0; }
.modal.sheet .modal-box {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-width: 560px; max-height: 94vh; max-height: 94dvh;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
}
/* The card takes the height its buttons leave (--acts = number of buttons),
   so the whole sheet fits without scrolling. */
.card-sheet { display: flex; flex-direction: column; align-items: center; gap: 10px; --acts: 3; }
.card-sheet .card.big { width: min(250px, 64vw, calc((94dvh - 44px - var(--acts) * 60px) * 0.714)); }
/* A pile's sheet: the card shrinks to fit and the Buy/Close row stays pinned
   at the bottom, in reach, even when the notes below the card scroll. */
.modal.sheet .modal-cards .card.big { width: min(260px, 68vw, calc((94dvh - 150px) * 0.714)); }
.modal.sheet .modal-actions {
  position: sticky; bottom: -12px; margin: 8px -12px -12px; padding: 8px 12px 12px; background: var(--parch);
  box-shadow: var(--shadow-pinned);
}
.fx-actions { width: 100%; display: grid; gap: 8px; }
.fx-actions .btn { min-height: 48px; }
.fxbtn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 54px; padding: 6px 12px;
  border-radius: var(--radius); border: 2px solid var(--shadow-ink); color: var(--surface); text-align: left; font: inherit; cursor: pointer;
}
.fxbtn.train { background: var(--train); }
.fxbtn.order { background: var(--order); }
.fxbtn.action { background: var(--action); }
.fxbtn.treasure { background: var(--treasure); }
.fxbtn.blocked { background: var(--parch-2); color: var(--ink-soft); border: 2px dashed var(--line); }
.fxbtn .fxkind { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; }
.fxbtn .fxtext { font-size: 1.02rem; font-weight: 600; }
.fxwhy { margin: -2px 4px 2px; font-size: 0.9rem; color: var(--crimson-ink); }

/* ---- narrow screens ------------------------------------------------------------------------ */
.only-narrow { display: none; }
@media (max-width: 1100px) {
  .table { grid-template-columns: 220px minmax(280px, 1fr) 250px; }
  #gameScreen.puzzle .table { grid-template-columns: 220px minmax(280px, 1fr); }
  .hand-area { grid-template-columns: 180px 1fr; }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .title-grid { grid-template-columns: 1fr; }
  .title-body { padding: 12px 12px 32px; }
  .site-bar { min-height: 44px; padding: 4px 8px; gap: 6px; }
  .bar-link { padding: 8px 6px; font-size: 0.88rem; }
  .title-head { margin: 0 0 6px; }
  .headline { font-size: 1.2rem; }
  .pitch { display: none; } /* one line of copy on a phone: the headline, then the board */
  .mode-home .title-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .war-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "board" "line" "btn"; }
  .war-board .board.mini { max-width: 240px; margin: 0 auto; }
  .war-panel .btn { width: 100%; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .board.taste { --size: min(calc(100vw - 32px), 300px); border-width: 4px; }
  .hero-line { font-size: 0.9rem; min-height: 0; }
  .whats-here { font-size: 0.88rem; }
  .panel { padding: 12px; }
  .panel h2 { margin-top: 0; }
  .how-strip { gap: 8px; font-size: 0.9rem; }
  .how-strip svg, .how-strip img { width: 24px; height: 24px; }
  .card-fan { height: 166px; }
  .card-fan .card { width: 96px; margin: 0 -18px; }
  .unit-strip { gap: 4px; }
  .unit-strip .unit { width: calc(38px * var(--counter, 1)); height: calc(38px * var(--counter, 1)); }
  .band-title { margin-top: 20px; }
  .panel input[type=text], .panel input[type=email] { min-height: 44px; }
  .only-narrow { display: inline-block; }
  .lesson-outline { display: none; } /* the bubble and the bar carry the lesson on a phone */
  .card-zoom { display: none !important; }

  /* An app shell: during play nothing scrolls. Top to bottom: stepper,
     opponent line, board (whatever height is left), your Barracks, the
     action bar, the hand tray. Details open as bottom sheets. */
  /* minmax(0, …) everywhere: a column must never grow to fit its content
     (a big hand would widen the page and phones would zoom out). */
  #gameScreen { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
  .topbar { padding: 4px 6px; gap: 6px; flex-wrap: nowrap; }
  .topbar > .btn { min-width: 44px; min-height: 44px; }
  .side.left .player-panel .hchip { color: var(--ink-soft); }
  #btnLogToggle { display: none; }
  #btnSupplyToggle { margin-left: auto; }
  .phase-bar { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
  .phase-bar:not(.theirs) .who { display: none; }
  .phase-bar.theirs .who { font-size: 0.9rem; margin-right: 2px; }
  .phase-bar.theirs .ph:not(.on), .phase-bar.theirs .sep { display: none; }
  .phase-bar .ph { padding: 3px 7px; font-size: 0.74rem; min-height: 30px; }
  .phase-bar .ph b { font-size: 0.9rem; }
  .phase-bar .coin { font-size: 11px; }
  .phase-bar .sep { font-size: 0.8rem; }
  .res-bar { margin-left: 0; gap: 4px; }
  .res-bar:empty { display: none; }
  .chip { font-size: 0.8rem; padding: 0 7px; }

  .table { display: flex; flex-direction: column; padding: 4px 6px 0; gap: 4px; overflow: hidden; min-height: 0; }
  .table > * { flex-shrink: 0; }
  .side.left { order: 0; }
  .center { order: 1; flex: 1 1 0; min-height: 0; overflow: hidden; gap: 4px; }
  .side.right { order: 2; }
  .side.left .player-panel {
    display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0 8px; padding: 2px 8px; font-size: 0.82rem;
    white-space: nowrap; overflow: hidden; border-radius: var(--radius);
  }
  .side.left .player-panel .stats { margin-top: 0; gap: 8px; flex-wrap: nowrap; }
  .player-panel .card-backs { display: none; }

  /* The board gives way before the bar does: the primary button must never be clipped. */
  .board-wrap { flex: 1 1 0; min-height: 150px; align-items: center; }
  .board { --size: min(calc(100vw - 12px), calc(100dvh - 330px)); min-width: 0; border-width: 3px; }
  @supports (container-type: size) {
    .board-wrap { container-type: size; }
    .board { --size: min(100cqw, 100cqh); }
  }
  .barracks { min-height: 0; padding: 0 2px; gap: 4px; font-size: 0.8rem; max-width: none; }
  .barracks.empty .muted { display: none; }
  #oppBarracks.empty { display: none; }
  #oppBarracks .unit { width: calc(28px * var(--counter, 1)); height: calc(28px * var(--counter, 1)); }
  #myBarracks { min-height: 44px; align-items: center; }
  #myBarracks.empty { min-height: 30px; }
  #myBarracks.empty .slot { display: none; }
  #myBarracks .unit { width: calc(38px * var(--counter, 1)); height: calc(38px * var(--counter, 1)); }
  .barracks .slot { min-height: 44px; }
  .mystats { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 0.82rem; }
  /* Small links in the one-line strips: a bigger invisible hit area, same layout. */
  .mystats button.hchip, .side.left .player-panel button.hchip { padding: 12px 6px; margin: -12px -6px; border-bottom: 0; }

  /* The action bar: messages on the left, the primary button on the right
     (same place every phase), other buttons underneath. */
  .prompt-bar {
    max-width: none; margin: 0; padding: 5px 6px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 6px; align-items: center; font-size: 0.9rem; line-height: 1.28; min-height: 0; box-shadow: none;
  }
  .prompt-bar .pinfo { grid-column: 1 / -1; }
  .prompt-bar .ptext { grid-column: 1; }
  .prompt-bar .pact { grid-column: 2; }
  .prompt-bar .opts { grid-column: 1 / -1; gap: 6px; }
  .prompt-bar .btn { min-height: 44px; }
  .prompt-bar .pact .btn:not(.icon) { min-width: 96px; font-size: 0.95rem; }
  .prompt-bar .pinfo > :last-child { margin-bottom: 0; }
  /* Room for a two-line feed under the instruction, so the board is the
     same size at the first prompt as after the first move or a hint. */
  .center .prompt-bar { min-height: 158px; }
  .pfeed, .pwarn, .pgood { font-size: 0.84rem; margin-bottom: 4px; }
  .pfeed { cursor: pointer; padding: 8px 6px; background: none; border-left-width: 3px; border-radius: 0; }
  .pfeed:not(.open) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* The hand tray: every card visible as a tile; a tap opens it. */
  .hand-area { grid-template-columns: minmax(0, 1fr); padding: 4px 6px calc(6px + env(safe-area-inset-bottom)); gap: 0; }
  #myPanel { display: none; }
  /* Up to six cards share the width; a bigger hand scrolls sideways. */
  .hand {
    height: clamp(88px, 14dvh, 112px); min-width: 0; min-height: 0; padding: 6px 4px 0; gap: 6px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; align-items: stretch;
  }
  .hand::-webkit-scrollbar { display: none; }
  .hand > :first-child { margin-left: auto; }
  .hand > :last-child { margin-right: auto; }
  .tile {
    flex: 1 1 0; min-width: 58px; max-width: 88px; display: flex; flex-direction: column; gap: 2px; padding: 3px;
    border: 1px solid var(--ink-soft); border-radius: var(--radius); color: var(--ink); cursor: pointer; font: inherit; text-align: center;
    background: var(--parch-2) url(../img/cards/parchment.webp) 50% 82% / 300% auto;
    box-shadow: 0 2px 3px var(--shadow-ink); transition: transform 0.12s;
  }
  .tile.can { box-shadow: 0 0 0 2px var(--sel), 0 0 8px 1px var(--sel-glow); }
  .tile.chosen { transform: translateY(-5px); box-shadow: 0 0 0 3px var(--crimson); }
  .tile:active { transform: scale(0.96); }
  .tile { position: relative; }
  .tile .tname {
    display: flex; align-items: center; justify-content: center; min-height: 2.2em; padding: 0 9px 0 6px;
    font-weight: 700; font-size: 12px; line-height: 1.05; hyphens: manual; overflow-wrap: normal;
  }
  .tile .tname.long { font-size: 11px; }
  .tile .tname.xlong { font-size: 10.5px; }
  .tile .tcost { position: absolute; top: -5px; right: -4px; font-size: 10px; min-width: 17px; height: 17px; }
  .hand.many .tlab { display: none; }
  .hand.many .tile .tname { font-size: 10.5px; padding: 0 3px; }
  .tfx {
    flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600; opacity: 0.6; padding: 0 2px; overflow: hidden;
  }
  .tfx svg { width: 20px; height: 20px; flex: 0 0 auto; }
  .tfx .coin { font-size: 11px; }
  .tfx .tlab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tfx .tlab:empty { display: none; }
  .tfx.train { background: var(--green-tint); color: var(--train); --paper: var(--surface); }
  .tfx.order { background: var(--red-tint); color: var(--order); }
  .tfx.action { background: var(--blue-tint); color: var(--action); }
  .tfx.treasure { background: var(--gold-tint); color: var(--gold-ink); }
  .tfx.on { opacity: 1; box-shadow: inset 0 0 0 2px var(--sel); }
  .hand .empty { align-self: center; }

  .piece-panel {
    display: flex; align-items: stretch; gap: 6px; width: 100%; padding: 3px 4px 3px 5px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  }
  .piece-panel .unit { width: 48px; height: 48px; flex: 0 0 auto; --counter: 1; align-self: center; }
  /* the grid, playing how it moves, as tall as the panel */
  .piece-panel .diagram { height: 100%; width: auto; aspect-ratio: 1 / 1; flex: 0 0 auto; min-height: 0; }
  .piece-panel .pp-text, .piece-panel .btn { align-self: center; }
  .pp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.84rem; line-height: 1.22; }
  .pp-class { color: var(--ink-soft); font-size: 0.78rem; }
  .pp-move { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  .drawer {
    position: fixed; left: 0; right: 0; bottom: 0; max-height: 78vh; max-height: 78dvh; z-index: var(--z-sheet); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--parch); box-shadow: var(--shadow-sheet); transform: translateY(105%);
    transition: transform 0.2s ease-out; overflow-y: auto; padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .drawer.open { transform: translateY(0); }
  .supply-foot {
    position: sticky; bottom: calc(-8px - env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; margin: 8px -10px calc(-8px - env(safe-area-inset-bottom)); padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--parch); box-shadow: var(--shadow-pinned);
  }
  .supply-foot:empty { display: none; }
  .supply-foot .btn { min-height: 44px; min-width: 110px; }
  .drawer h3 { position: sticky; top: -8px; background: var(--parch); z-index: 1; padding: 6px 0; margin: 0; }
  .drawer h3 .btn { min-height: 40px; min-width: 64px; }
  .log-panel { flex: none; }
  .card.big { width: min(300px, 88vw); }
  .modal-actions .btn, .menu-list .btn { min-height: 44px; }
}
/* Short phones (small screens with the browser's bars showing). */
@media (max-width: 900px) and (max-height: 620px) {
  .topbar { padding: 2px 6px; }
  .side.left .player-panel { padding: 0 8px; font-size: 0.78rem; }
  .hand { height: 80px; }
  .tile .tname { min-height: 0; font-size: 10.5px; }
  .pfeed:not(.open) { -webkit-line-clamp: 1; }
  .prompt-bar { padding: 3px 6px; }
}

/* Hover effects only where there is a mouse: on a phone they would stick to
   whatever was tapped last. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--parch-3); }
  .btn.primary:hover { background: var(--crimson-bright); }
  .sq.target:hover { outline: 3px solid var(--sel); outline-offset: -3px; }
  .unit.can:hover { transform: scale(1.06); }
  .hand .card:not(.compact):hover { transform: translateY(-6px); }
  .cardsvg .hit.playable:hover { fill-opacity: 0.28; }
  .pile:hover > svg { filter: drop-shadow(0 3px 6px var(--shadow-ink)); }
}

/* Effect-type words in the rules text */
.t-order, .t-action, .t-train, .t-treasure { font-family: var(--display); font-size: 0.85em; font-weight: 700; }
.t-order { color: var(--order); }
.t-action { color: var(--action); }
.t-train { color: var(--train); }
.t-treasure { color: var(--treasure); }

/* ---- online: join form and the host's game code ---- */
.join-form { display: flex; gap: 6px; }
.join-form input { flex: 1 1 140px; min-width: 0; min-height: 44px; padding: 0 10px; text-transform: uppercase; letter-spacing: 0.15em; font-family: var(--mono); }
.join-form input::placeholder { text-transform: none; letter-spacing: normal; font-family: var(--serif); }
.join-form .btn { flex: 0 0 auto; width: auto; }
.game-code { font-family: var(--mono); font-size: 2.2rem; letter-spacing: 0.3em; text-align: center; margin: 6px 0; user-select: all; }

/* ---- the operator's notice, and the account's danger zone ---- */
.notice { background: var(--parch-3); border-left: 4px solid var(--gold); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0 0 10px; font-size: 0.95rem; }
.pnotice { background: var(--parch-3); border-left: 4px solid var(--gold); padding: 4px 8px; margin: 0 0 4px; }
.account-actions { margin-top: 8px; text-align: right; }
.btn.danger { color: var(--crimson-ink); border-color: var(--crimson-ink); background: var(--red-tint); }