/* TENFOLD — DOM overlay.
 *
 * Tone words from charter sec.6: austere, elemental, ceremonial. So: dark
 * neutral surfaces, one accent per nation taken from element-palette, and no
 * decoration that competes with the board.
 *
 * The ten nation accents are NEVER typed here. They are set as custom
 * properties at runtime from src/core/element-palette.js, which compose_lpc.py
 * exported — the same rule that stopped Umbra drifting.
 *
 * Panel frames and bars are 9-sliced from the crusenho Flat theme (CC BY 4.0).
 */

:root {
  --ui: url('../../assets/ui/Complete_UI_Essential_Pack_Free/01_Flat_Theme/Sprites/');

  --bg: #0e0d13;
  --surface: #17161f;
  --surface-2: #1e1c28;
  --line: #2e2b3a;
  --ink: #ddd8e6;
  --ink-dim: #8d879c;
  --gold: #d8c07a;
  --hp: #cf5f66;
  --xp: #5f8fcf;

  --cell: 64px;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: none;
}

#app { display: flex; flex-direction: column; min-height: 100%; }

/* ---------------------------------------------------------------- HUD --- */

#hud {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 2px solid var(--line);
  flex-wrap: wrap;
}
.hud-block { display: flex; align-items: baseline; gap: 7px; }
.hud-block strong { font-size: 17px; color: var(--gold); font-weight: 600; }
.hud-label { color: var(--ink-dim); text-transform: uppercase; letter-spacing: .09em; font-size: 10px; }
.hud-sub { color: var(--ink-dim); font-size: 11px; }
.hud-right { margin-left: auto; }

.bar {
  width: 88px; height: 10px;
  border-style: solid;
  border-width: 3px 6px;
  border-image: url('../../assets/ui/slices/bar_dark.png') 3 6 fill repeat;
  image-rendering: pixelated;
  overflow: hidden;
}
.bar-fill { height: 100%; width: 0%; transition: width .25s ease; }
.bar-fill.hp { background: var(--hp); }
.bar-fill.xp { background: var(--xp); }

/* -------------------------------------------------------------- Layout -- */

#stage {
  display: grid;
  /* Rails are fixed, centre takes what is left. Pinning the centre to the
   * board's native 768px overflowed the viewport and clipped the right rail. */
  grid-template-columns: 190px minmax(0, 1fr) 220px;
  gap: 12px;
  padding: 12px;
  align-items: start;
  max-width: 1680px;
  margin: 0 auto;
  width: 100%;
}
/* Matches the canvas's own 1200px, so LPC sprites land on whole pixels on a
 * wide screen. Narrower viewports scale it down and lose that — unavoidable,
 * and better than cropping the arena. */
#board-wrap { max-width: 1200px; margin: 0 auto; }
#centre { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#left-rail, #right-rail { display: flex; flex-direction: column; gap: 12px; }

/* 9-sliced from the crusenho Flat theme, recoloured to this palette at slice
 * time (art/slice-ui.mjs) rather than with a CSS filter — a filter would also
 * wash out the portraits and text living inside these panels. */
.panel {
  background: var(--surface);
  border-style: solid;
  border-width: 8px;
  border-image: url('../../assets/ui/slices/panel_dark.png') 8 fill repeat;
  image-rendering: pixelated;
  padding: 8px 12px 12px;
}
.panel h2 {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}
.hint { color: var(--ink-dim); font-size: 11px; margin: 8px 0 0; }

/* --------------------------------------------------------------- Board -- */

#board-wrap { position: relative; }
#board {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  border: 2px solid var(--line);
  background: #14131a;
  cursor: pointer;
}
.banner {
  position: absolute;
  inset: auto 0 12px;
  margin: auto;
  width: fit-content;
  padding: 7px 18px;
  background: rgba(14, 13, 19, .92);
  border: 2px solid var(--gold);
  color: var(--gold);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 12px;
}

/* ---------------------------------------------------------------- Shop -- */

.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shop-actions { display: flex; gap: 8px; }
.shop-row { display: flex; gap: 8px; margin-top: 10px; }
.shop-row .card { max-width: 132px; }

/* The shop is a row of CARDS, not a list (charter sec.5.5). Cost tier rides on
 * the frame material and nation on the accent, so both are legible before any
 * number is read. */
/* THE COST LADDER IS THE FRAME MATERIAL — charter §5.3, and the cafeDraw pack
 * happens to ship exactly the three materials it names:
 *     wood → 1–2 · silver/stone → 3 · gold → 4–5
 * Nation rides the inner tint and the name strip, so both axes read before any
 * number does. Frames are 100×128 with measured 11/11/12/12 insets, used at 1×
 * so the pixels stay square. */
.card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nation) 22%, #12111a) 0%, #12111a 62%);
  border-style: solid;
  border-width: 11px 11px 12px 12px;
  border-image: url('../../assets/cards/slices/frame_wood.png') 11 11 12 12 repeat;
  image-rendering: pixelated;
  padding: 2px 3px 4px;
  text-align: center;
  cursor: pointer;
  /* 150–300ms per the interaction guidance; transform/opacity only. */
  transition: transform .16s ease-out, filter .16s ease-out;
}
.card.cost-3 { border-image-source: url('../../assets/cards/slices/frame_silver.png'); }
.card.cost-4, .card.cost-5 { border-image-source: url('../../assets/cards/slices/frame_gold.png'); }

.card:hover:not(.card-empty):not(.card-locked) {
  transform: translateY(-4px);
  filter: brightness(1.15);
}
.card:active:not(.card-empty):not(.card-locked) { transform: translateY(-1px); }
.card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.card-empty {
  cursor: default;
  background: #0d0c12;
  border-image: none;
  border: 2px dashed #2a2734;
  opacity: .5;
}
.card-empty::after {
  content: 'drawn';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #3d3850; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
}
.card-locked { filter: grayscale(.7) brightness(.55); cursor: not-allowed; }

.card-portrait {
  width: 100%; aspect-ratio: 1 / 1;
  image-rendering: pixelated;
  object-fit: contain;
  display: block;
}
.card-name {
  font-size: 10px;
  color: #f2ead8;
  /* The cafeDraw name-holder strip, so the name sits on authored art. */
  background: url('../../assets/cards/slices/bar_wood.png') center / 100% 100% no-repeat;
  padding: 4px 2px 5px;
  margin: 1px -1px 0;
  line-height: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card.cost-3 .card-name { background-image: url('../../assets/cards/slices/bar_stone.png'); }
.card.cost-4 .card-name, .card.cost-5 .card-name {
  background-image: url('../../assets/cards/slices/bar_gold.png');
  color: #3a2408;
}
.card-nation { font-size: 9px; color: var(--nation, var(--ink-dim)); letter-spacing: .08em; }
.card-role { font-size: 9px; color: var(--ink-dim); }
.card-cost {
  position: absolute; top: -9px; right: -6px;
  min-width: 17px;
  color: #fff6df; font-weight: 700; font-size: 12px;
  background: #171522;
  border: 2px solid var(--gold);
  border-radius: 2px;
  padding: 0 3px;
  text-shadow: 0 1px 0 #000;
}
.card-owned {
  position: absolute; top: -8px; left: -6px;
  font-size: 10px; color: #fff6df;
  background: #171522; border: 2px solid var(--nation, var(--line));
  padding: 0 3px;
}

/* Real star sprites, not a "★" glyph — structural icons must not be text. */
.pip {
  width: 9px; height: 9px;
  display: inline-block;
  image-rendering: pixelated;
  background: url('../../assets/cards/slices/star_silver.png') center / contain no-repeat;
}
.pip.s2 { background-image: url('../../assets/cards/slices/star_gold.png'); }
.pip.s3 { background-image: url('../../assets/cards/slices/star_bronze.png'); }

/* --------------------------------------------------------------- Bench -- */

.bench-row { display: flex; gap: 6px; flex-wrap: wrap; min-height: 62px; }
.bench-slot {
  width: 58px; height: 58px;
  border-style: solid;
  border-width: 8px;
  border-image: url('../../assets/ui/slices/slot_dark.png') 8 fill repeat;
  image-rendering: pixelated;
  position: relative;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .14s ease-out, filter .14s ease-out;
}
.bench-slot:not(.empty):hover { transform: translateY(-2px); filter: brightness(1.2); }
.bench-slot.empty { opacity: .3; cursor: default; }
.bench-slot.selected {
  border-image-source: url('../../assets/ui/slices/slot_alt_dark.png');
  box-shadow: 0 0 0 2px rgba(216, 192, 122, .45);
}
.bench-slot img { width: 48px; height: 48px; image-rendering: pixelated; }
.bench-star {
  position: absolute; bottom: -2px; left: 0; right: 0;
  text-align: center; line-height: 1; display: flex; gap: 1px; justify-content: center;
}

/* ------------------------------------------------------- Rails / lists -- */

#composition li, #synergies li, #scoreboard li, #log li {
  list-style: none;
  margin: 0 0 5px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
#composition, #synergies, #scoreboard, #log { margin: 0; padding: 0; }
.short { color: var(--hp); }
.met { color: var(--ink-dim); }
.tier-on { color: var(--gold); }

#scoreboard li { cursor: pointer; padding: 3px 4px; border: 1px solid transparent; }
#scoreboard li:hover { border-color: var(--line); background: var(--surface-2); }
#scoreboard li.dead { opacity: .4; }
#scoreboard li.you { border-color: var(--gold); }
#scoreboard li.scouting { background: var(--surface-2); border-color: var(--gold); }
.sb-nation { color: var(--nation, var(--ink-dim)); }

#log li { color: var(--ink-dim); display: block; }

/* ------------------------------------------------------------- Buttons -- */

.btn {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border-style: solid;
  border-width: 10px;
  border-image: url('../../assets/ui/slices/button_dark.png') 10 fill repeat;
  image-rendering: pixelated;
  /* Touch target: 44px min per the interaction rules. */
  min-height: 44px;
  padding: 2px 10px;
  cursor: pointer;
  letter-spacing: .04em;
  transition: transform .16s ease-out, filter .16s ease-out;
}
.btn:hover:not(:disabled) {
  border-image-source: url('../../assets/ui/slices/button_hover_dark.png');
  transform: translateY(-2px);
}
.btn:active:not(:disabled) {
  border-image-source: url('../../assets/ui/slices/button_active_dark.png');
  transform: translateY(1px);
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn-primary { color: var(--gold); }
.coin { color: var(--gold); }

.toggle { display: flex; gap: 6px; align-items: center; color: var(--ink-dim); font-size: 11px; cursor: pointer; }

/* ------------------------------------------------------------- Overlay -- */

#overlay {
  position: fixed; inset: 0;
  background: rgba(8, 7, 11, .86);
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
}
.overlay-card {
  background: var(--surface);
  border: 2px solid var(--gold);
  padding: 28px 36px;
  text-align: center;
  max-width: 460px;
}
.overlay-card h1 { margin: 0 0 10px; font-size: 22px; color: var(--gold); letter-spacing: .08em; }
.overlay-card p { margin: 0 0 18px; color: var(--ink-dim); }

.hidden { display: none !important; }

/* ------------------------------------------------------ Reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
body.reduce-motion * { transition: none !important; animation: none !important; }

@media (max-width: 1100px) {
  #stage { grid-template-columns: 1fr; }
  #left-rail, #right-rail { flex-direction: row; flex-wrap: wrap; }
  #left-rail .panel, #right-rail .panel { flex: 1 1 220px; }

  /* Once the grid stacks, DOM order puts the left rail above the board — so on
   * every narrow screen the first thing on screen was the roles list and the
   * board started 245px down, off the fold. The board is the game; it goes
   * first, then the things you act on, then the things you only read. */
  #centre { order: 1; }
  #left-rail { order: 2; }
  #right-rail { order: 3; }
}

/* ------------------------------------------------- selected-unit actions -- */

/* The touch route to selling and recalling. On desktop this sits under the
 * bench as an ordinary strip; on a phone it pins to the bottom of the viewport,
 * because that is where a thumb is and because the bench itself scrolls away. */
.unit-actions {
  display: flex;
  align-items: center;
  gap: 8px;                 /* >= the 8px minimum between touch targets */
  padding: 8px 10px;
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: 4px;
}
.unit-actions.hidden { display: none; }
.ua-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
}
.ua-btn {
  min-height: 44px;         /* the touch-target floor, not a visual choice */
  min-width: 44px;
  padding: 0 14px;
  flex: 0 0 auto;
}
/* Destructive action carries the danger colour and sits apart from the rest,
 * so "Sell" is never mistaken for the neutral "Bench". */
.ua-danger { color: #ffd9db; border-color: #7a3439; background: #4e2226; }
.ua-danger:hover { background: #632b30; }
.ua-ghost { color: var(--ink-dim); }
.ua-btn.hidden { display: none; }

/* ------------------------------------------------------------- phone -- */

/* Below 720px the three-column desktop layout is meaningless: the rails are
 * reference, the board is the game. Give the board the width, push the rails
 * to the end, and pin the action bar within thumb reach. */
@media (max-width: 720px) {
  #app { padding-bottom: env(safe-area-inset-bottom); }
  #stage { padding: 8px; gap: 8px; }

  /* Board first, then the things you act on, then the things you only read. */
  #centre { order: 1; }
  #left-rail { order: 2; }
  #right-rail { order: 3; }

  /* The canvas is the point. Let it use the full width. */
  #board-wrap { max-width: 100%; }

  /* HUD wraps into a compact two-row strip instead of overflowing. */
  #hud { flex-wrap: wrap; gap: 6px 12px; padding: 6px 8px; }
  .hud-block { flex: 0 1 auto; }
  #hud .hud-right { flex-basis: 100%; }

  /* Shop cards and bench slots stay swipeable rather than shrinking to
   * unreadable. Horizontal scroll INSIDE a row is fine; the page itself must
   * still never scroll sideways. */
  .shop-row, .bench-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .shop-row::-webkit-scrollbar, .bench-row::-webkit-scrollbar { display: none; }

  .shop-actions .btn { min-height: 44px; }

  /* Pinned above the home indicator, with the page reserving room for it so it
   * never covers the last bench slot. */
  .unit-actions {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 40;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .55);
  }
  body:has(.unit-actions:not(.hidden)) #stage { padding-bottom: 76px; }

  /* Rails are reference material on a phone — one row, scrollable, not three
   * stacked full-width panels pushing the board off screen. */
  #left-rail, #right-rail { flex-direction: row; flex-wrap: wrap; }
  #left-rail .panel, #right-rail .panel { flex: 1 1 160px; }
  #log-panel { max-height: 168px; overflow-y: auto; }
}

/* A tap must never be swallowed by a double-tap-to-zoom delay. */
.btn, .shop-card, .bench-slot, #board { touch-action: manipulation; }

/* ------------------------------------------------ fitting a small screen -- */

/* A 10x7 board is a WIDE format. On a 375px portrait phone every cell lands at
 * ~36px and a 64px sprite draws at ~19px, which no amount of layout fixes —
 * the board is simply wider than the screen. Landscape roughly doubles it.
 *
 * So on any short viewport the board is constrained by HEIGHT rather than
 * width: the whole board must be visible at once, because a board you have to
 * scroll to read is worse than a small one. Everything else goes below it.
 */
@media (max-height: 560px) {
  #hud { padding: 4px 8px; gap: 4px 12px; }
  #hud .bar { display: none; }          /* numbers stay; the bars are luxury */
  #stage { padding: 6px; gap: 6px; }
  #board-wrap { display: flex; justify-content: center; max-width: 100%; }
  #board {
    width: auto;
    max-width: 100%;
    max-height: calc(100dvh - 92px);    /* HUD + a strip of the shop below */
    height: auto;
  }
}

/* Portrait phone: say plainly that this is a landscape game rather than
 * letting someone conclude the sprites are meant to be 19px. Not a blocking
 * overlay — they can still play, it is a hint. */
.rotate-hint { display: none; }
@media (max-width: 720px) and (orientation: portrait) {
  .rotate-hint {
    display: block;
    margin: 0 0 6px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 2px solid var(--gold);
    color: var(--gold);
    font-size: 12px;
    text-align: center;
  }
}

/* ------------------------------------------------ shop card: the ability -- */

/* A shop card used to say name / nation / archetype and nothing about what the
 * unit DOES, so choosing between two cards meant knowing the roster by heart.
 * The text comes from src/core/abilities.js, the same object combat.js reads
 * its coefficients from, so the card cannot describe a fight that does not
 * happen. */
.card-ability {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  text-align: left;
}
.ca-name {
  display: block;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}
.ca-text {
  display: block;
  font-size: 9px;
  line-height: 1.35;
  color: var(--ink-dim);
}
/* Cards get taller with ability text, so the row needs to breathe rather than
 * squeezing five cards into the old height. */
.shop-row .card { max-width: 150px; }

/* --------------------------------------------------------- title screen -- */

.menu-kicker {
  margin: 0 0 2px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
#overlay-title { letter-spacing: .16em; }
.btn-lg { min-height: 46px; padding: 0 22px; font-size: 13px; }
.menu-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 12px; }

.menu-seed {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-dim);
}
.menu-seed input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  padding: 0 8px;
  background: #100f16;
  border: 2px solid var(--line);
  color: var(--ink);
  font: inherit;
}
.menu-seed input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.menu-note { color: var(--ink-dim); font-size: 10px; margin: 6px 0 0; line-height: 1.5; }

.menu-how {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: left;
  max-height: 46vh;
  overflow-y: auto;
}
.menu-how h2 {
  margin: 10px 0 6px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.menu-how h2:first-child { margin-top: 0; }
.menu-how ol, .menu-how ul { margin: 0; padding-left: 18px; }
.menu-how li { font-size: 11px; line-height: 1.6; color: var(--ink); }
.menu-how b { color: var(--gold); font-weight: 600; }
.menu-how.hidden, #menu-extra.hidden, #menu-done.hidden { display: none; }