/*
 * The phone layer. index.html links this sheet with a media attribute, so a
 * desktop browser never applies it; css/style.css is untouched. Everything in
 * here is written for a portrait phone (up to 760px wide) or a short
 * landscape one (up to 520px tall). js/mobile.js builds the bottom bar this
 * sheet styles and hides what the phone has no room for (the header, the
 * rail); the two are a pair. The sheet above the bar is css/mobile-sheet.css,
 * the picker inside it css/mobile-picker.css, and the deck around the board
 * css/mobile-deck.css.
 *
 * Per-mode phone fixes live in mobile-modes.css (the kid modes) and
 * mobile-workbench.css (Bot vs Bot, Arena, Position lab, Leaderboard).
 */

:root {
  --bar-h: 48px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

html {
  /* One tap is one tap: no double-tap-to-zoom lag on buttons and squares. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 16px;
}

/* ---------- Header and rail: hidden; the bar names the mode and the picker lists them ---------- */

/*
 * The app title is in the tab and on the home screen, and the bar names the
 * mode, so the header's 40px go to the board; its Install button moves to
 * Settings > App (js/mobile.js) and its colour and Threats buttons are the
 * proxies' targets, clicked unseen. The rail stays in the page for app.js to
 * write into; the picker (js/picker.js) reads the same registry.
 */
header {
  display: none;
}

#sidebar {
  display: none;
}

/* ---------- Main: one column, nothing scrolls but the sheet ---------- */

/*
 * The page itself never scrolls (Jordan's rule for the phone). The board
 * area takes what is left above the bar and scrolls inside itself only when
 * a mode's stage is taller than the screen (the Arena's grid); the panel is
 * in the sheet (css/mobile-sheet.css), fixed above the bar.
 */
body.phone {
  height: 100vh; /* an engine without dvh (Safari before 15.4) still gets a height */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* main stops above the bar, so the board area is exactly the room there is. */
main {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* style.css starts grid children at their own size; a column must fill the width */
  flex: 1 1 auto;
  min-height: 0;
  padding: max(6px, var(--safe-t, 0px)) 8px calc(var(--bar-h) + var(--safe-b) + 6px); /* --safe-t: css/mobile-deck.css */
}

main > * + * {
  margin-top: 6px;
}

/* Nothing scrolls in a board mode; a stage (the Leaderboard's list) may inside its own area. */
#board-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  gap: 6px;
  padding-bottom: 0;
}

/* The stage's scroll stays its own: a pull at its top is not the browser's refresh gesture. */
body.staged #board-wrap {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* And nothing chains to the page: the fixed layout never rubber-bands. */
html {
  overscroll-behavior: none;
}

/* Previous / next move under the graph: thumb-sized, one row. */
body.phone .move-nav { gap: 10px; }
body.phone .move-nav-btn { min-width: 56px; height: 36px; font-size: 1.4rem; }

/* ---------- Board: the figure fills its room; css/mobile-deck.css caps the board inside it (--board-max, js/mobile.js) ---------- */

.board-figure {
  width: 100%;
  max-width: none;
}

.board {
  border-width: 2px;
  border-radius: 4px;
}

/* A square's corner badge (Pawn race's moves-to-promote count) is readable on a 37px square: a bigger disc, an 11px floor on its numeral. */
body.phone .square .badge {
  width: 40%;
  height: 40%;
  font-size: clamp(11px, 3.4vmin, 16px);
  border-width: 1.5px;
}

/*
 * js/mobile.js rewords this for a finger (hold a square, then slide, to draw
 * an arrow) and moves it into the sheet's Board group, above Clear board,
 * where it reads as a footnote and costs the board nothing.
 */
#board-hint {
  font-size: 0.8rem;
  margin: 0;
  text-align: left;
}

/*
 * The scoreboard (ticker and name plates, js/scoreboard.js) sits in the
 * figure on every screen; css/style.css orders it. Here it only gets smaller.
 */
.ticker {
  min-height: 26px;
  padding: 1px 8px;
}

.ticker-now {
  font-size: 1.1rem;
}

/*
 * Touch gestures from js/board.js. A held square fills with the planning
 * arrow's orange as the press is timed, then rings when it has taken and the
 * arrow can be dragged out. The finger ghost floats above the fingertip.
 */
.square.arrow-arming::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(251, 140, 0, 0.45);
  transform: scale(0.3);
  animation: arrow-arming 0.45s ease-out forwards;
  pointer-events: none;
}

@keyframes arrow-arming {
  to { transform: scale(0.95); }
}

.square.arrow-armed {
  box-shadow: inset 0 0 0 4px #fb8c00;
}

.drag-ghost.touch {
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55));
}

@media (prefers-reduced-motion: reduce) {
  .square.arrow-arming::after {
    animation: none;
    transform: scale(0.95);
  }
}

.analysis-bar {
  flex-wrap: wrap;
  gap: 10px;
}

/* The second figure never shows on a phone (css/mobile-deck.css); Play as turns the one board. */

/* The stage (Arena, Leaderboard) simply fills the width. */
.stage {
  max-width: none;
}

/* ---------- Controls a finger uses ---------- */

/* Native controls at finger size; 16px in fields stops iOS zooming into them. The sheet (css/mobile-sheet.css) says the same for the panel inside it. */
select,
button,
input[type="text"],
input[type="number"] {
  min-height: 44px;
  font-size: 16px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 22px;
  height: 22px;
}

.field.inline {
  min-height: 44px;
}

/*
 * Sliders for a finger. The native thumb is mouse-sized, so a child misses it
 * and drags the page instead. Taking the default look off both engines and
 * drawing the thumb ourselves is the only way to set its size; the track
 * stays thin so the value beside it still reads. 44px of height around a 30px
 * thumb keeps the whole row a comfortable target (28px inside the sheet,
 * css/mobile-sheet.css; test 37 holds the size).
 */
input[type="range"] {
  height: 44px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -12px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}

input[type="range"]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

input[type="range"]:disabled::-webkit-slider-thumb {
  background: var(--muted);
}

input[type="range"]:disabled::-moz-range-thumb {
  background: var(--muted);
}

/* ---------- Make it yours in the sheet: swatches a finger can pick ---------- */

/*
 * The shell above gives every button 44px of height for fingers, which made
 * the 24px-wide swatches tall ovals. In the sheet's App group (js/mobile.js
 * moves #personalize-details there) they are circles again at a size a
 * thumb can hit, six to a row across the sheet (nine themes, nine colours
 * and the rainbow, twelve avatars: two rows each), the knight tiles for the
 * piece styles the same size, and the name box the full width.
 */
#sheet .personalize-details summary {
  min-height: 44px;
  display: flex;
}

#sheet .personalize {
  gap: 14px;
  padding-top: 8px;
}

#sheet .pref-label {
  font-size: 0.85rem;
}

/* 44px swatches, as many to a row as fit (six at 360, five at 320). */
#sheet .swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  justify-items: center;
  gap: 8px 0;
  max-width: none;
}

#sheet .swatch {
  width: 44px;
  height: 44px;
  min-height: 0;
  font-size: 22px;
}

#sheet .swatch:hover {
  transform: none;
}

#sheet .swatch:active {
  transform: scale(0.92);
}

#sheet .swatch-art {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

#sheet .swatch-art svg {
  width: 36px;
  height: 36px;
}

#sheet .pref-name {
  max-width: none;
}

/* ---------- The bottom bar: Modes and Settings, the same in every mode ---------- */

/*
 * Two buttons, 60/40: Modes on the left (the piece's tile, then MODES with a
 * chevron over the mode's name on one line) and Settings on the right. The
 * bar is one height whatever the mode is called; nothing in it changes the
 * game. In landscape the same two buttons become a rail (spec section 9).
 */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 4px;
  box-sizing: border-box;
  height: calc(var(--bar-h) + var(--safe-b));
  padding: 2px 6px calc(2px + var(--safe-b));
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.3);
}

.mbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: calc(var(--bar-h) - 4px);
  min-height: 0;
  min-width: 0;
  padding: 2px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
}

.mbar-btn:active {
  background: var(--panel-2);
}

/* Settings, pressed while its sheet is open; the Modes button colours its caption alone (below). */
.mbar-settings[aria-expanded="true"] {
  color: var(--accent);
}

/* Modes: the tile, then two lines of text, left-aligned. */
.mbar-modes {
  justify-content: flex-start;
  gap: 10px;
  color: var(--text);
  text-align: left;
}

.mbar-modes .mbar-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.mbar-modes-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* MODES, with the chevron at its end, so the button reads as a menu that is not the mode's own. */
.mbar-modes-caption {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mbar-chevron {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 3px;
  vertical-align: -1px;
  letter-spacing: 0;
}

.mbar-chevron svg {
  display: block;
  width: 10px;
  height: 10px;
}

.mbar-modes[aria-expanded="true"] .mbar-modes-caption {
  color: var(--accent);
}

/* The mode's registered name, one line; 158px of room at 360 holds "Knight route trainer" at 14px. */
.mbar-modes-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 379px) {
  .mbar-modes-name {
    font-size: 14px;
  }
}

/* Settings: the sliders glyph and the word. */
.mbar-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  line-height: 1;
}

.mbar-settings .mbar-glyph svg {
  width: 22px;
  height: 22px;
}

.mbar-settings[aria-expanded="true"] .mbar-glyph {
  background: var(--accent-soft);
  border-radius: 8px;
}

.mbar-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}