/* gui/style.css — ported/adapted from milestones/1/index.html's inline
   <style>. Bare-bones: no art, no theme, no fonts, no libraries. Desktop
   layout only (mobile is a later phase). */

* { box-sizing: border-box; }
body {
  font-family: -apple-system, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 8px;
  background: #1b1b1b;
  color: #eee;
}
#topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: #2a2a2a;
  border-radius: 6px;
  flex-wrap: wrap;
}
#topbar label { font-size: 13px; }
#configRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  background: #232323;
  border-radius: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 12px;
}
#configRow label { font-size: 12px; }
#configSummary { font-size: 11px; color: #888; }
#rankingHint { font-size: 11px; color: #888; margin-top: 4px; }
#turnIndicator {
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: bold;
}
.turn-p0 { background: #26c; color: #fff; }
.turn-p1 { background: #d33; color: #fff; }
#status {
  flex: 1 1 200px;
  min-width: 200px;
  font-size: 13px;
  color: #ffcf5c;
}
#legalCount { font-size: 13px; color: #9cf; }
#versionInfo { font-size: 11px; color: #888; }
#deckPile {
  width: 52px;
  height: 70px;
  border-radius: 5px;
  border: 2px solid #555;
  background: repeating-linear-gradient(45deg, #333, #333 4px, #3c3c3c 4px, #3c3c3c 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #eee;
  user-select: none;
}
#deckPile.empty { opacity: 0.4; }
#deckPile .deckCount { font-size: 20px; font-weight: bold; line-height: 1; }
#deckPile .deckLabel { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: #bbb; margin-top: 2px; }
#winnerBanner {
  display: none;
  margin: 10px 0;
  padding: 20px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  border-radius: 8px;
  background: #444;
  border: 4px solid gold;
  color: #fff;
}
#main {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
#boardCol {
  flex: 1 1 auto;
  min-width: 0;
}
#boardArea {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
#board { flex: 1 1 auto; }
#logPanel {
  width: 280px;
  flex: 0 0 280px;
  background: #222;
  border-radius: 6px;
  padding: 8px;
  height: 640px;
  overflow-y: auto;
  font-size: 12px;
}
#logPanel h3 { margin-top: 0; }
#logPanel ol { padding-left: 20px; margin: 0; }
#logPanel li { margin-bottom: 3px; }

.hand-row {
  display: flex;
  gap: 4px;
  padding: 8px;
  border-radius: 6px;
  background: #262626;
  margin-bottom: 6px;
  flex-wrap: wrap;
  min-height: 60px;
  align-items: center;
}
.hand-row.active {
  background: #33422e;
  outline: 2px solid #6c6;
}
.hand-row.inactive {
  opacity: 0.55;
}
.hand-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 4px;
}

.card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 58px;
  border-radius: 5px;
  border: 2px solid #000;
  font-weight: bold;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 0 2px #000;
  cursor: default;
  user-select: none;
}
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: #fff; }
.card.selected { border-color: #0ff; box-shadow: 0 0 6px 2px #0ff; }
.card.small { width: 32px; height: 44px; font-size: 11px; }
.card.facedown {
  cursor: default;
  background: repeating-linear-gradient(45deg, #333, #333 4px, #3c3c3c 4px, #3c3c3c 8px);
  border-color: #555;
}

#board {
  display: flex;
  gap: 4px;
  background: #262626;
  border-radius: 6px;
  padding: 8px;
}
.flagCol {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #2f2f2f;
  border-radius: 6px;
  padding: 6px 2px;
  gap: 4px;
}
.flagCol.dimmed { opacity: 0.5; }
.flagCol.clickable-target { cursor: pointer; outline: 2px dashed #0ff; }
.flagIndex {
  font-size: 11px;
  color: #999;
}
.sideStack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 150px;
  justify-content: flex-start;
  width: 100%;
  align-items: center;
}
.sideStack.bottom {
  justify-content: flex-end;
}
.formationInfo {
  font-size: 10px;
  text-align: center;
  color: #ccc;
  background: #1a1a1a;
  border-radius: 3px;
  padding: 2px 3px;
  width: 100%;
}
.flagMarker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  padding: 4px 0;
  border-radius: 4px;
  background: #3a3a3a;
}
.flagMarker.claimed-0 { background: #1c3f7a; border: 2px solid #4a90e2; }
.flagMarker.claimed-1 { background: #7a1c1c; border: 2px solid #e24a4a; }
.flagLabel {
  font-size: 12px;
  font-weight: bold;
}
.claimBtn {
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
}

button {
  cursor: pointer;
}
#passBtn {
  padding: 6px 16px;
  font-weight: bold;
}
#controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}

/* Rules panel — ported from milestones/1/index.html's inline <style>. */
#rulesPanel {
  margin-top: 10px;
  background: #262626;
  border-radius: 6px;
  padding: 8px 12px;
}
#rulesPanel summary {
  cursor: pointer;
  font-weight: bold;
  padding: 4px 0;
}
#rulesPanel summary:hover { color: #9cf; }
#rulesText {
  max-width: 70ch;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.5;
  color: #ddd;
  margin-top: 8px;
}
#rulesText .rules-heading {
  display: block;
  font-weight: bold;
  color: #fff;
  margin: 12px 0 2px;
}
#rulesText .rules-heading:first-child { margin-top: 0; }

/* gui/animate.js — floating-clone card travel + claim pulse. Overlay sits
   above everything, ignores pointer events, and is positioned so a
   floater's inline left/top (set from getBoundingClientRect()) line up
   with the real viewport coordinates. */
#animOverlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  overflow: visible;
}
.anim-floater {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 300ms ease;
  will-change: transform;
}
.anim-floater.anim-draw {
  border-color: #0cf;
  box-shadow: 0 0 10px 2px rgba(0, 204, 255, 0.55);
}
@keyframes claimPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.9); }
  70% { box-shadow: 0 0 0 12px rgba(255, 215, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}
.flagMarker.claim-pulse {
  animation: claimPulse 700ms ease-out;
}

/* Mobile chrome scaffolding (desktop-level, outside any media query): the
   hamburger strip is hidden on desktop, and the menuSection wrappers are
   display:contents so they never affect desktop layout/box model — they
   only become real flex/block containers inside the mobile media query
   below, where they're toggled by body.menu-open. */
#mobileBar { display: none; }
.menuSection { display: contents; }

/* ==========================================================================
   Mobile support — hamburger-menu pass.

   Three tiers, all additive (desktop rules above are untouched):

   1. `max-width: 940px` — shared phone rules. Only the board, the hands,
      the winner banner, and the slim #mobileBar strip are visible by
      default; every other chrome element (topbar, configRow, controls,
      rankingHint, rulesPanel) lives inside a .menuSection wrapper that's
      display:none until the hamburger button toggles body.menu-open, which
      flips those wrappers back to display:contents (their children lay out
      inline, in original document order, below the mobile bar). The board/
      hands stay visible the whole time; the page may scroll while the menu
      is open.

   2. `max-width: 940px and (orientation: landscape)` — must fit short phone
      viewports (e.g. 667x375) with NO vertical page scroll when the menu is
      closed and formations are empty. Played cards within each flag column
      line up HORIZONTALLY (row + wrap), spending width instead of height,
      with the formation label reserved as its own full-width line below
      (top stack) or above (bottom stack) the cards. .sideStack and
      .flagMarker reserve their max height up front so a column never
      reflows when a label or claim button appears.

   3. `max-width: 940px and (orientation: portrait)` — rotates the board:
      each .flagCol switches to flex-direction: row-reverse, which maps the
      DOM order render.js produces — [flagIndex, sideStack.top (P1),
      flagMarker, sideStack.bottom (P0)] — to the visual order [P0 stack |
      flagMarker | P1 stack | flagIndex]. That puts player 0's cards on the
      left of each flag row and the opponent's (P1) on the right, with the
      flag index at the far right, matching how a portrait phone reads a
      stack of flag "rows" top to bottom. Each flag row is taller than the
      cards, with a reserved label strip ABOVE the cards on both sides
      (bottom-up wrapping for P1, normal wrapping for P0) so labels appear
      without the row or cards moving or resizing.

   No new features, no art/theme changes — CSS (and the two small app.js/
   index.html hooks documented elsewhere) only.
   ========================================================================== */

@media (max-width: 940px) {
  body { padding: 4px; }

  .menuSection { display: none; }
  body.menu-open .menuSection { display: contents; }

  #mobileBar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    background: #2a2a2a;
    border-radius: 6px;
    padding: 2px 6px;
  }
  #menuBtn {
    font-size: 20px;
    background: none;
    border: none;
    color: #eee;
    min-height: 32px;
    min-width: 40px;
  }
  #mobileStatus {
    font-size: 12px;
    color: #ffcf5c;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1 1 auto;
  }

  #logPanel { display: none; }
  #boardCol { flex: 1 1 100%; width: 100%; }
  #main { gap: 4px; margin-top: 4px; }

  #topbar {
    gap: 6px;
    padding: 4px;
  }
  #configRow {
    gap: 6px;
    padding: 4px 6px;
    margin-top: 4px;
  }
  #controls {
    gap: 6px;
    margin: 4px 0;
  }

  #board {
    gap: 3px;
    padding: 4px;
    overflow-x: auto;
  }
  .flagCol {
    min-width: 76px;
    padding: 4px 2px;
    gap: 3px;
  }

  .hand-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px;
    gap: 3px;
  }
  .hand-row .card {
    flex: 0 0 auto;
  }
  .hand-label { display: none; }

  #winnerBanner {
    padding: 8px;
    font-size: 16px;
    margin: 4px 0;
  }

  button, select {
    min-height: 36px;
  }
  .claimBtn {
    padding: 6px 10px;
    font-size: 13px;
    min-height: 36px;
  }
}

/* Tier 2 — landscape phones: vertical space is the scarce resource, so
   played cards line up HORIZONTALLY within each flag column (instead of
   the desktop vertical stack) to spend width instead of height. The
   formation label is a full-width flex line that always wraps onto its
   own row below (top stack) or above (bottom stack) the cards, and
   .flagMarker/.sideStack reserve their max height up front so neutral →
   claimed / label-appears never reflows the row's y-position.

   No-vertical-scroll budget (target ~375-430px height):
     mobileBar (~36) + hand row (~60) + board (index ~12 + sideStack 56
     + flagMarker 54 + sideStack 56 + padding ~8 ≈ 186) + hand row (~60)
     + gaps (~4x8) ≈ 350 — fits comfortably in 375. */
@media (max-width: 940px) and (orientation: landscape) {
  #main { margin-top: 4px; }

  .hand-row {
    min-height: 48px;
    padding: 3px;
  }
  .hand-row .card {
    width: 40px;
    height: 54px;
    font-size: 12px;
  }
  .card.small {
    width: 28px;
    height: 38px;
    font-size: 10px;
  }
  .sideStack {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;   /* overrides desktop flex-start/flex-end, now the horizontal axis */
    min-height: 56px;          /* one card row (38) + gap (2) + label line (~16) — reserved even when empty */
    gap: 2px;
  }
  .sideStack.top { align-content: flex-start; justify-content: center; }   /* cards pinned to top; label line appears BELOW them in the reserved space */
  .sideStack.bottom { align-content: flex-end; justify-content: center; }  /* cards pinned to bottom; label line appears ABOVE them (DOM puts P0's info first) */
  .flagIndex { font-size: 9px; }
  .flagMarker { padding: 2px 0; min-height: 54px; justify-content: center; }  /* reserves room for the claim button so columns don't jump when it appears */
  .flagLabel { font-size: 10px; }
  .formationInfo { flex: 0 0 100%; width: 100%; font-size: 8px; padding: 1px 2px; }  /* full-width flex line — forces its own row under/over the cards */
  #board { padding: 3px; gap: 3px; }
  .flagCol { padding: 3px 2px; gap: 2px; min-width: 88px; }  /* 3 cards side-by-side + gaps + padding */
  #deckPile { width: 44px; height: 60px; }
  #deckPile .deckCount { font-size: 16px; }
}

/* Tier 3 — portrait phones: rotate the board so flags stack as rows.
   row-reverse on .flagCol maps the DOM order [flagIndex, sideStack.top
   (P1), flagMarker, sideStack.bottom (P0)] to the visual order
   [P0 stack | flagMarker | P1 stack | flagIndex] — player 0 on the left,
   the opponent (P1) on the right, flag index at the far right. */
@media (max-width: 940px) and (orientation: portrait) {
  #board {
    flex-direction: column;
    overflow-x: visible;
    gap: 6px;
  }
  .flagCol {
    flex-direction: row-reverse;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 5px;
    padding: 5px 4px;
  }
  .sideStack {
    flex-direction: row;
    min-height: 64px;   /* 44px card + ~16px label strip + gap — rows are fixed-feel and roomier */
    min-width: 96px;
    width: auto;
    flex: 1 1 0;
    gap: 3px;
  }
  /* P1 (right of marker): DOM order is [cards..., info]. Reversed-wrap
     stacks flex lines bottom-up, so the cards line is pinned to the BOTTOM
     and the info line lands ABOVE it. align-content: flex-start packs
     from the bottom edge in this mode. Cards grow rightward, away from
     the marker. */
  .sideStack.top { flex-wrap: wrap-reverse; align-content: flex-start; justify-content: flex-start; align-items: flex-end; }
  /* P0 (left of marker): DOM order is [info, cards...]. Normal wrap gives
     [info][cards] top-to-bottom; align-content: flex-end packs both lines to the
     bottom, so cards sit at the bottom and info appears just above them without
     moving them. Cards grow leftward, away from the marker. */
  .sideStack.bottom { flex-wrap: wrap; align-content: flex-end; justify-content: flex-end; align-items: flex-end; }
  .formationInfo { flex: 0 0 100%; width: 100%; }

  .flagMarker { flex: 0 0 84px; width: 84px; min-height: 64px; }
  .flagIndex { flex: 0 0 auto; }

  .card.small {
    width: 32px;
    height: 44px;
    font-size: 11px;
  }
  .hand-row .card {
    width: 44px;
    height: 60px;
  }

  /* If the board's flagCols (now full-width rows) push the deck pile off
     to the side, let the board column shrink first instead of overflowing
     #boardArea horizontally. */
  #boardArea { flex-wrap: nowrap; }
  #board { flex: 1 1 auto; min-width: 0; }
}