/* Turf Wars game styles (T304 placeholder palette: soil browns, leaf greens).
   The kit ui.css loads first (tokens --rr-*, fit shell). One state per screen:
   every .screen shares one flex slot inside .game-scroll and only one is
   visible, so the shell never scrolls. Screens pad their sides and bottom by
   the --rr-inset-* tokens. */
:root {
  --tw-soil: #2e2014;
  --tw-soil-light: #5a3d24;
  --tw-leaf: #4fa357;
  --tw-leaf-dark: #2f6b3a;
  --tw-cream: #f4ead2;
}
html, body { background: var(--tw-soil); color: var(--tw-cream); }
.game-shell { -webkit-user-select: none; user-select: none; touch-action: manipulation; background: var(--tw-soil); }
.screen {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rr-space-3);
  text-align: center;
  padding: 16px calc(16px + var(--rr-inset-right)) calc(16px + var(--rr-inset-bottom)) calc(16px + var(--rr-inset-left));
  overflow: hidden;
}
.screen.visible { display: flex; }
.screen h1 { margin: 0; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tw-leaf); }
.screen .tagline { margin: 0; color: var(--tw-cream); }

/* Play: top bar, board, tray share the screen; the menu bar is hidden so the
   board gets the height (Settings returns through Pause; T572: the kit header and its
   game menu, Return home included, show again on the Title, Setup, Picks and Settings). */
.game-shell[data-screen="play"] > .menu-bar { display: none; }
#play.screen { padding: 0; gap: 0; align-items: stretch; justify-content: flex-start; position: relative; }
.board-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--tw-leaf-dark); }
#board { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* Menu screens (T348): Title, Pause, Settings. Buttons are big (>= 56 px), the menu bar hides on Pause. */
.game-shell[data-screen="pause"] > .menu-bar { display: none; }
.screen .logo {
  font-size: clamp(40px, 14vw, 76px);
  line-height: 1;
  text-shadow: 0 3px 0 var(--tw-leaf-dark), 0 6px 14px rgba(0, 0, 0, 0.5);
}
.screen .tagline { font-size: 1.1rem; opacity: 0.9; }
.screen-h { margin: 0; font-size: 2rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tw-leaf); }
.title-crops { width: min(340px, 100%); height: auto; aspect-ratio: 6 / 1; flex: none; margin: var(--rr-space-2) 0; }
.menu-col { display: flex; flex-direction: column; gap: 12px; width: min(320px, 100%); flex: none; }
.menu-btn { min-height: 56px; width: 100%; touch-action: manipulation; }
.menu-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; width: 100%; }        /* T503: Play and Almanac side by side */
.menu-row .menu-btn { min-width: 0; padding-left: 8px; padding-right: 8px; }
.menu-row .menu-btn.secondary { font-size: 1.1rem; }
.menu-btn.primary {
  min-height: 68px; font-size: 1.4rem; color: var(--tw-cream);
  background: linear-gradient(170deg, var(--tw-leaf), var(--tw-leaf-dark)); border: 2px solid var(--tw-leaf-dark);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.menu-btn.secondary { background: var(--tw-soil-light); color: var(--tw-cream); border: 1px solid #7a5836; }
.record { margin: 0; min-height: 1.2em; font-size: 0.95rem; opacity: 0.85; font-variant-numeric: tabular-nums; }
.record[hidden] { display: none; }
.setting {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 4px 14px; width: 100%; text-align: left;
  background: var(--tw-soil-light); color: var(--tw-cream); border: 1px solid #7a5836; border-radius: 12px;
  font: inherit; cursor: pointer; touch-action: manipulation;
}
.setting-text { display: flex; flex-direction: column; min-width: 0; }
.setting-text b { font-size: 1.1rem; }
.setting-text small { opacity: 0.75; font-size: 0.75rem; line-height: 1.15; }
.setting-val { flex: none; min-width: 84px; padding: 4px 10px; border-radius: 16px; background: #3a2a1c; border: 2px solid #7a5836; text-align: center; font-weight: 700; font-size: 0.9rem; }
#settings-rows { gap: 6px; }   /* T507: seven rows at 48 px must fit a 360 x 640 portrait screen with Back (no scrolling) */
.switch { flex: none; position: relative; width: 56px; height: 32px; border-radius: 16px; background: #3a2a1c; border: 2px solid #7a5836; transition: background 120ms ease; }
.switch i { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--tw-cream); transition: transform 120ms ease; }
.setting[aria-checked="true"] .switch { background: var(--tw-leaf); border-color: var(--tw-leaf-dark); }
.setting[aria-checked="true"] .switch i { transform: translateX(24px); }

/* Result screen (T349): headline, reason, time and buttons in the main column; the chart and the stats table in the
   side column (stacked). No scrolling: everything shares the screen. */
.game-shell[data-screen="result"] > .menu-bar { display: none; }
#result.screen { justify-content: center; }
.result-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(460px, 100%); min-height: 0; }
.result-main, .result-side { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 0; }
.result-h { margin: 0; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.result-h.win { color: var(--tw-leaf); }
.result-h.loss { color: #e0745a; }
.result-h.draw { color: #e6c04a; }
.result-reason { margin: 0; font-size: 1.05rem; }
.result-time { margin: 0; opacity: 0.8; font-variant-numeric: tabular-nums; }
.result-rival { margin: 0; opacity: 0.8; font-weight: 700; }
.result-chart { width: 100%; height: clamp(110px, 20vh, 170px); display: block; background: rgba(0, 0, 0, 0.18); border-radius: 10px; flex: none; }
.result-stats { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; flex: none; }
.result-stats th, .result-stats td { padding: 3px 4px; text-align: center; border-bottom: 1px solid rgba(244, 234, 210, 0.14); }
.result-stats th:first-child { text-align: left; font-weight: 700; }
.result-stats thead th { font-weight: 800; }
.result-stats small { display: block; font-weight: 400; opacity: 0.65; font-size: 0.72rem; }
.result-place { margin: 0; font-weight: 800; font-size: 1.1rem; }
.result-stats .swatch-slot { display: inline-block; vertical-align: -2px; margin-right: 5px; line-height: 0; }
.result-stats .swatch-slot canvas { display: inline-block; border-radius: 3px; }
.result-btns { margin-top: 4px; }
/* T591: the reward block (Ribbons, unlocks, new records): compact lines under the time, no extra height beyond one to three lines. */
.result-ribbons, .result-unlock, .result-record { margin: 0; font-weight: 800; font-size: 0.95rem; line-height: 1.2; }
.result-ribbons { color: #e6c04a; }
.result-ribbons small { font-weight: 600; opacity: 0.8; font-size: 0.8rem; }
.result-unlock { color: var(--tw-leaf); }
.new-record { color: #e6c04a; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
/* Three or four seats (T498): four columns and a place row share the screen, so the buttons sit side by side, the chart is shorter and the table is tighter. */
.result-wrap.ffa { gap: 6px; }
.result-wrap.ffa .result-btns { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.result-wrap.ffa .result-chart { height: clamp(80px, 14vh, 130px); }
.result-wrap.ffa .result-stats { font-size: 0.78rem; }
.result-wrap.ffa .result-stats th, .result-wrap.ffa .result-stats td { padding: 2px 2px; white-space: nowrap; }
.result-wrap.ffa .result-stats small { display: none; }
/* T913: a 360 x 640 phone with the reward lines (T591) overflowed the Result by 8 px: the chart gives up some height on short screens. */
@media (max-height: 660px) { .result-chart { height: clamp(90px, 16vh, 170px); } }

/* Match setup screen (T499): the map cards with a preview, the rival count, one level row per rival, Back and Next. Sizes mirror TW_data.feel.menu.setup
   (btnMinPx 44, navMinPx 56). Everything stacks (portrait only, P067). */
#setup.screen { justify-content: flex-start; gap: 8px; padding-top: 8px; }
.setup-body, .setup-col { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-height: 0; }
.setup-body { flex: 1 1 auto; }                                                  /* T606: the body fills what the Back / Next row leaves, so the rival rows can scroll inside it */
.setup-col:last-child { flex: 1 1 auto; }
.setup-maps, .setup-rivals, .setup-hint { flex-shrink: 0; }                      /* only the rival rows area gives way */
.setup-maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(420px, 100%); }
.setup-map {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 96px; padding: 6px 4px; box-sizing: border-box;
  background: var(--tw-soil-light); color: var(--tw-cream); border: 2px solid #7a5836; border-radius: 12px;
  font: 700 0.9rem/1.1 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.setup-map:active { background: #6b4a2c; }
.setup-map.on { border-color: var(--tw-leaf); background: var(--tw-leaf-dark); color: #fff; }
.setup-map canvas { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 4px; flex: none; }
.setup-map-text { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.setup-map small { font-size: 0.72rem; font-weight: 600; opacity: 0.85; }
.setup-rivals, .setup-level-row { display: flex; align-items: center; gap: 8px; width: min(420px, 100%); }
.setup-label, .setup-who { flex: none; display: flex; align-items: center; gap: 6px; width: 84px; text-align: left; font: 700 0.9rem/1.1 system-ui, -apple-system, "Segoe UI", sans-serif; }
.seg { flex: 1 1 auto; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 2px solid #7a5a3a; border-radius: 10px; background: #3d2a19; }
/* T606: no overflow: hidden on .seg (the end buttons round their own corners), so a choice scrolled out of the Setup rival rows is clipped by that scroll area, which layout checks see as scrolled away, not offscreen */
.seg-btn {
  min-height: 44px; min-width: 44px; padding: 0 2px; margin: 0; border: 0; border-left: 2px solid #7a5a3a; border-radius: 0; background: transparent; color: var(--tw-cream);
  font: 800 0.9rem/1.1 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.seg-btn:first-child { border-left: 0; border-radius: 8px 0 0 8px; }
.seg-btn:last-child { border-radius: 0 8px 8px 0; }
.seg-btn:only-child { border-radius: 8px; }
.seg-btn:active { background: #5a3d24; }
.seg-btn.on { background: var(--tw-leaf-dark); color: #fff; }
/* T606 (ADR-006 15): the rival rows (a level choice and a personality choice each) are one inner scroll area, at most scrollRows (2.5) rows of rowPx (104) tall so the next row peeks out as the
   cue; the map cards and the rival count stay outside it, the shell and the screen never scroll. Mirrors TW_data.feel.menu.setup (scrollRows, rowPx). */
.setup-levels {
  --su-row: 104px; --su-rows: 2.5;
  display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; flex: 0 1 auto; min-height: 0; box-sizing: border-box; max-height: calc(var(--su-rows) * var(--su-row));
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #b6ec8a #3d2a19; touch-action: pan-y;
}
.setup-levels::-webkit-scrollbar { width: 6px; }
.setup-levels::-webkit-scrollbar-thumb { background: #b6ec8a; border-radius: 3px; }
.setup-level-row { flex-wrap: wrap; flex: none; row-gap: 4px; }
.seg.pers { flex: 1 1 100%; }
.seg.pers .seg-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px; font-size: 0.85rem; }
.seg.pers .seg-btn small { display: block; max-width: 100%; font-size: 0.62rem; font-weight: 600; line-height: 1.05; opacity: 0.85; text-align: center; }
.seg.pers .seg-btn.locked { color: rgba(244, 234, 210, 0.7); background: rgba(0, 0, 0, 0.22); }
.pers-lock { position: relative; display: block; width: 10px; height: 7px; margin-top: 4px; background: currentColor; border-radius: 1.5px; }
.pers-lock::before { content: ""; position: absolute; left: 1.5px; top: -5px; width: 4px; height: 5px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; }
.setup-hint { margin: 0; flex: none; min-height: 1.2em; font-size: 0.85rem; line-height: 1.2; opacity: 0.9; text-align: center; }
.setup-btns { flex: none; display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; width: min(420px, 100%); margin-top: auto; }
.setup-btns .menu-btn { min-height: 56px; }
.setup-btns .menu-btn.primary { font-size: 1.25rem; }

/* Seed picks screen (T418, T474): the ten choosable crops as cards (a 6-column grid so three cards share a row in portrait and the lone last card
   is centred), the counter, the Defend note and the fixed-hand line above, Back and Start below. Everything shares the screen; only the grid scrolls (T588). Cards and buttons are at least 76 and 56 px (the
   brief asks 44). Sizes mirror TW_data.feel.menu.picks (cardMinPx, btnMinPx). */
#picks.screen { justify-content: flex-start; gap: 8px; padding-top: 8px; }
.picks-info { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.picks-status { margin: 0; flex: none; min-height: 2.5em; display: flex; flex-direction: column; justify-content: center; font-size: 0.95rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
#picks-count { font-weight: 800; }
#picks-note { opacity: 0.85; }
#picks-note.warn { color: #ffb347; opacity: 1; font-weight: 700; }
.picks-fixed { margin: 0; flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; font-size: 0.85rem; line-height: 1.2; opacity: 0.9; text-align: left; }
.picks-fixed .pick-icon { flex: none; }
.picks-fixed-text { min-width: 0; }
.picks-fixed-item { display: inline-flex; align-items: center; gap: 4px; }
/* T588 (ADR-006 15): the grid is a fixed area that shows exactly three rows of three cards (nine) and scrolls inside it: the only inner scroll area besides the Setup rival rows,
   the shell and the screen never scroll. Rows are a third of the area; sizes mirror TW_data.feel.menu.picks (gridRowsPortrait 3, gridRowsLandscape 2, togMinPx). */
.picks-grid {
  --pk-gap: 8px; --pk-rows: 3;
  flex: 1 1 auto; min-height: 0; width: min(420px, 100%); box-sizing: border-box;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: calc((100% - (var(--pk-rows) - 1) * var(--pk-gap)) / var(--pk-rows)); gap: var(--pk-gap);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #b6ec8a #3d2a19;
  padding-right: 4px; touch-action: pan-y;
}
.picks-grid::-webkit-scrollbar { width: 6px; }
.picks-grid::-webkit-scrollbar-track { background: #3d2a19; border-radius: 3px; }
.picks-grid::-webkit-scrollbar-thumb { background: #b6ec8a; border-radius: 3px; }
.pick-cell { grid-column: span 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.picks-grid .pick-cell:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
.pick {
  position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; padding: 4px 4px 5px; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px;
  font: 700 12px/1.1 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tw-cream);
  background: #3d2a19; border: 2px solid #7a5a3a; border-radius: 10px; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pick:active { background: #5a3d24; }
.pick.on { background: var(--tw-leaf-dark); border-color: #b6ec8a; color: #fff; }
.pick-cell.has-tog .pick { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-width: 0; }
/* The strain toggle (T588): Base plus one button per unlocked strain, along the card's bottom edge; each button at least togMinPx (44) tall. */
.pick-tog { display: flex; flex: none; gap: 0; box-sizing: border-box; min-width: 0; }
.pick-tog[hidden] { display: none; }
.pick-cell .pick-tog { background: #2a1c10; border: 2px solid #7a5a3a; border-top-width: 1px; border-radius: 0 0 10px 10px; overflow: hidden; }
.pick-cell.on .pick-tog { border-color: #b6ec8a; background: #1f3f1d; }
.tog-btn {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 1px; box-sizing: border-box; margin: 0;
  font: 800 10px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tw-cream); background: transparent; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
}
.tog-btn:first-child { border-left: 0; }
.tog-btn.on { background: #b6ec8a; color: #1b3a14; }
.tog-btn:active { filter: brightness(1.2); }
.fixed-tog { border: 2px solid #7a5a3a; border-radius: 10px; overflow: hidden; background: #2a1c10; min-width: 120px; }
.fixed-tog .tog-btn { font-size: 11.5px; min-width: 44px; padding: 0 6px; }
.pick-icon { display: block; flex: none; pointer-events: none; }
.pick-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 800; pointer-events: none; }
.pick-cost {
  position: absolute; top: 4px; left: 5px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: #ffd23a; pointer-events: none;
}
.pick-cost::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff3a6 0 18%, #f2c230 50%, #b88410 100%); border: 1px solid #5e3a06;
}
.pick-check {
  position: absolute; top: 4px; right: 5px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid #7a5a3a; pointer-events: none;
}
.pick.on .pick-check { background: #b6ec8a; border-color: #b6ec8a; }
.pick.on .pick-check::after {
  content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; box-sizing: border-box;
  border: solid var(--tw-leaf-dark); border-width: 0 2px 2px 0; transform: rotate(40deg);
}
.pick-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px 6px; font-size: 9px; font-weight: 700; opacity: 0.9; pointer-events: none; }
.pick-role { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.pick-kind { padding: 0 3px; border-radius: 3px; border: 1px solid currentColor; font-size: 8px; font-weight: 800; letter-spacing: 0.2px; text-transform: uppercase; white-space: nowrap; }
.pick-kind.hybrid { background: rgba(255, 255, 255, 0.22); }
.role { display: inline-block; flex: none; width: 10px; height: 10px; box-sizing: border-box; }
.role-cash { border-radius: 50%; background: #f2c230; border: 1.5px solid #5e3a06; }
.role-spread { border-radius: 0 75% 0 75%; background: #55c04a; border: 1.5px solid #1f5a28; }
.role-defend { background: #e0745a; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@media (max-width: 380px) {
  .pick { padding-left: 2px; padding-right: 2px; }
  .pick-name { font-size: 11px; letter-spacing: -0.2px; }
  .pick-roles { gap: 1px 3px; font-size: 8.5px; }
  .pick-role { gap: 1px; }
}
.picks-btns { flex: none; display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; width: min(420px, 100%); }
.picks-btns .menu-btn { min-height: 56px; }
.picks-btns .menu-btn.primary { min-height: 56px; font-size: 1.25rem; }
.picks-btns .menu-btn:disabled { opacity: 0.45; filter: grayscale(0.6); cursor: default; }
@media (max-height: 700px) {
  /* T588: a short portrait phone (360 x 640) still shows nine cards with their toggles: the heading goes, the counter and note share a line, the cards use a smaller icon. */
  #picks .screen-h { display: none; }
  .picks-status { flex-direction: row; gap: 10px; min-height: 0; align-items: baseline; font-size: 0.9rem; }
  .picks-info { gap: 4px; }
  .picks-fixed { font-size: 0.75rem; gap: 2px 8px; }
  .pick-cell.has-tog .pick-icon { width: 26px !important; height: 26px !important; }
  .pick-cell.has-tog .pick { padding-top: 3px; gap: 1px; }
  .pick-cell.has-tog .pick-roles { font-size: 8.5px; }
  .pick-cell.has-tog .pick-kind { display: none; }                    /* the Pure or Hybrid badge stays in the screen-reader label; the toggle needs the room */
}

/* Almanac (T503): one crop card, twelve jump icons, Previous, Next and Back. A card shows the picture, name, role marks, cost, grow time and health, then the
   "Does" lines and the "Counters" line. The card stacks over the jump icons (two rows of six, 44 px each) and the buttons. Nothing scrolls: the card clips nothing (a test and the fixtures check every card). Sizes mirror
   TW_data.feel.almanac (jumpMinPx, btnMinPx). */
#almanac.screen { justify-content: flex-start; gap: 6px; padding-top: 6px; }
#almanac .screen-h { font-size: 1.4rem; }
.alm-body { flex: 1 1 auto; min-height: 0; width: min(440px, 100%); display: flex; flex-direction: column; gap: 8px; }
.alm-card {
  flex: 1 1 auto; min-height: 0; overflow: hidden; box-sizing: border-box; padding: 8px 12px 10px; text-align: left;
  background: #3d2a19; border: 2px solid #7a5a3a; border-radius: 12px; display: flex; flex-direction: column; gap: 6px;
}
.alm-head { display: flex; align-items: center; gap: 10px; flex: none; }
.alm-art { flex: none; display: block; border-radius: 10px; background: rgba(0, 0, 0, 0.18); }
.alm-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alm-title h3 { margin: 0; font-size: 1.35rem; line-height: 1.1; color: var(--tw-leaf); }
.alm-roles { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 0.85rem; font-weight: 700; }
.alm-roles .pick-role { gap: 4px; }
.alm-roles .pick-kind { font-size: 0.65rem; padding: 0 4px; }
.alm-pos { margin: 0; font-size: 0.75rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.alm-stats { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.alm-stat { margin: 0; padding: 4px 2px; text-align: center; background: rgba(0, 0, 0, 0.2); border-radius: 8px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.alm-stat b { font-size: 1.15rem; line-height: 1.2; }
.alm-stat small { font-size: 0.7rem; opacity: 0.75; }
#alm-cost { color: #ffd23a; }
.alm-card h4 { margin: 2px 0 0; flex: none; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tw-leaf); }
.alm-does { margin: 0; padding-left: 1.1em; flex: none; font-size: 0.88rem; line-height: 1.25; display: flex; flex-direction: column; gap: 3px; }
.alm-counters { margin: 0; flex: none; font-size: 0.88rem; line-height: 1.25; }
.alm-side { flex: none; display: flex; flex-direction: column; gap: 8px; }
.alm-jump { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 6px; }
.alm-jump-btn {
  min-width: 44px; min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  background: #3d2a19; border: 2px solid #7a5a3a; border-radius: 10px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.alm-jump-btn:active { background: #5a3d24; }
.alm-jump-btn.on { background: var(--tw-leaf-dark); border-color: #b6ec8a; }
.alm-jump-btn .pick-icon { pointer-events: none; }
.alm-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.alm-btns .menu-btn { min-height: 56px; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: 0.95rem; }
.alm-btns .menu-btn.primary { min-height: 56px; font-size: 1.1rem; }
.game-shell[data-screen="almanac"] > .menu-bar { display: none; }   /* the screen has its own heading and Back */
@media (max-height: 640px) {
  #almanac .screen-h { display: none; }
  .alm-art { width: 56px !important; height: 56px !important; }
  .alm-does, .alm-counters { font-size: 0.82rem; line-height: 1.2; }
}

/* Almanac strains (T592): the Strains section of a crop card. One row per strain with its slot glyph (triangle or square, as on the board badge), name and state, then
   its Better and Worse lines. The card body scrolls inside itself (the same inner scroll as the picks grid) when the section makes the card taller than the screen. */
.alm-card { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.alm-strains[hidden], #alm-strains-h[hidden] { display: none; }
.alm-strains { margin: 0; padding: 0; list-style: none; flex: none; display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; line-height: 1.2; }
.alm-strain { display: flex; flex-direction: column; gap: 1px; padding: 4px 8px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; border: 2px solid transparent; }
.alm-strain.focus { border-color: #b6ec8a; background: var(--tw-leaf-dark); }
.alm-strain-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.alm-glyph { font-style: normal; color: var(--tw-leaf); font-size: 0.8rem; }
.alm-state { font-style: normal; font-size: 0.78rem; opacity: 0.8; }
.alm-strain.locked .alm-state { color: #ffd23a; opacity: 1; }
.alm-better { color: #b6ec8a; }
.alm-worse { color: #f2a07a; }
@media (max-height: 640px) { .alm-strains { font-size: 0.8rem; } }
/* Seed Vault (T590): a Ribbon count over a list that scrolls inside its own region (the shell never scrolls), then Back. Groups are a base crop's strains; a row
   is the name and price, a Better and a Worse line, the mastery bar and the state (Owned, Buy, or a greyed Buy with "Need N more"). Sizes mirror
   TW_data.feel.menu.vault (btnMinPx, navMinPx). */
.menu-row.even { grid-template-columns: 1fr 1fr; }
.rib-count { display: inline-block; min-width: 1.6em; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: #3a2a1c; color: #ffd23a; font-size: 0.9em; font-variant-numeric: tabular-nums; }
#vault.screen { justify-content: flex-start; gap: 8px; padding-top: 6px; }
.vault-top { flex: none; width: min(440px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vault-top .screen-h { font-size: 1.5rem; }
.vault-ribbons { margin: 0; padding: 4px 12px; border-radius: 14px; background: #3a2a1c; border: 2px solid #7a5836; color: #ffd23a; font-weight: 700; font-variant-numeric: tabular-nums; }
.vault-list {
  flex: 1 1 auto; min-height: 0; width: min(440px, 100%); box-sizing: border-box; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-y; text-align: left; display: flex; flex-direction: column; gap: 10px; padding-right: 2px;
}
.vt-group { flex: none; background: #3d2a19; border: 2px solid #7a5a3a; border-radius: 12px; padding: 6px 8px 8px; }
.vt-head { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; font-size: 1.05rem; color: var(--tw-leaf); }
.vt-head small { font-size: 0.72rem; color: var(--tw-cream); opacity: 0.75; font-variant-numeric: tabular-nums; }
.vt-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vt-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; }
.vt-row.owned { background: rgba(79, 163, 87, 0.18); }
.vt-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vt-text p { margin: 0; }
.vt-name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vt-name b { font-size: 1.05rem; }
.vt-price { font-size: 0.72rem; color: #ffd23a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vt-line { font-size: 0.8rem; line-height: 1.2; }
.vt-line i { font-style: normal; font-weight: 700; margin-right: 2px; }
.vt-line.better i { color: #8fe08a; }
.vt-line.worse i { color: #f0907a; }
.vt-mastery { display: flex; align-items: center; gap: 6px; }
.vt-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: #2a1c10; overflow: hidden; }
.vt-bar b { display: block; height: 100%; background: var(--tw-leaf); }
.vt-mastery small { flex: none; font-size: 0.7rem; opacity: 0.8; font-variant-numeric: tabular-nums; }
.vt-state { flex: none; width: 96px; display: flex; justify-content: center; }
.vt-buy { width: 100%; min-height: 44px; padding: 2px 4px; font-size: 0.9rem; background: linear-gradient(170deg, var(--tw-leaf), var(--tw-leaf-dark)); color: var(--tw-cream); border: 2px solid var(--tw-leaf-dark); touch-action: manipulation; }
.vt-buy:disabled { opacity: 0.5; filter: grayscale(0.6); cursor: default; background: var(--tw-soil-light); border-color: #7a5836; }
.vt-owned { min-height: 44px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #8fe08a; }
.vault-btns { flex: none; width: min(420px, 100%); }
.vault-btns .menu-btn { min-height: 56px; }

/* Rival ladder (T608, ADR-006 14): a heading with the cleared count, five rung cards that share the screen (nothing scrolls), then Back. A card is a number, the
   name with its map, the rivals, a state tag, and Play (cleared and open rungs) or a lock. Sizes mirror TW_data.feel.menu.ladder (btnMinPx, navMinPx). */
.menu-row.three { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }          /* Title: Ladder, Vault, Settings share one row */
.menu-row.three .menu-btn.secondary { font-size: 1rem; }
#ladder.screen { justify-content: flex-start; gap: 8px; padding-top: 6px; }
.ladder-top { flex: none; width: min(440px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ladder-top .screen-h { font-size: 1.5rem; }
.ladder-count { margin: 0; padding: 4px 12px; border-radius: 14px; background: #3a2a1c; border: 2px solid #7a5836; color: #ffd23a; font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.ladder-list { flex: 1 1 auto; min-height: 0; width: min(440px, 100%); box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.rung { flex: 1 1 0; min-height: 0; max-height: 84px; display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: #3d2a19; border: 2px solid #7a5a3a; border-radius: 12px; }
.rung.cleared { background: rgba(79, 163, 87, 0.18); border-color: var(--tw-leaf-dark); }
.rung.locked { opacity: 0.75; background: rgba(0, 0, 0, 0.22); }
.rung-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; background: #2a1c10; color: var(--tw-cream); border: 2px solid #7a5836; }
.rung.cleared .rung-n { background: var(--tw-leaf); border-color: var(--tw-leaf-dark); }
.rung-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rung-text p { margin: 0; line-height: 1.15; }
.rung-name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rung-name b { font-size: 1.05rem; }
.rung-map { font-size: 0.72rem; color: #ffd23a; white-space: nowrap; }
.rung-rivals { font-size: 0.82rem; }
.rung-tag { font-size: 0.72rem; font-weight: 700; color: #8fe08a; }
.rung-tag.locked { color: var(--tw-cream); opacity: 0.8; font-weight: 600; }
.rung-state { flex: none; width: 72px; display: flex; justify-content: center; }
.rung-play { width: 100%; min-height: 44px; padding: 2px 4px; font-size: 0.95rem; background: linear-gradient(170deg, var(--tw-leaf), var(--tw-leaf-dark)); color: var(--tw-cream); border: 2px solid var(--tw-leaf-dark); touch-action: manipulation; }
.rung-lock { display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--tw-cream); opacity: 0.8; }
.rung-lock .pers-lock { width: 16px; height: 11px; margin-top: 7px; }
.rung-lock .pers-lock::before { left: 2.5px; top: -8px; width: 6px; height: 8px; border-width: 2px; }
.ladder-btns { flex: none; width: min(420px, 100%); }
.ladder-btns .menu-btn { min-height: 56px; }
.result-rung { margin: 0; font-weight: 800; font-size: 0.95rem; line-height: 1.2; color: #ffd23a; }