/* ============================================================
   Wooden Design System — Colors & Type Tokens
   Tokens lifted verbatim from the original prototype (`styles.css :root`).
   ============================================================ */

:root {
  /* ── Brand palette ─────────────────────────────────────── */
  --color-gold: #D4AF37;
  --color-brown-strong: #654321;
  --color-brown-muted:  #6C4B2B;
  --color-brown-warm:   #5B3D24;
  --color-brown-dark:   #3D2817;
  --color-brown-deep:   #3B220F;
  --color-parchment:    #f6e7c3;  /* page background (body) */
  --color-parchment-card: #fffdf6; /* panel card surface */

  /* ── Semantic feedback ─────────────────────────────────── */
  --color-success: #4CAF50;  /* highlight / win */
  --color-error:   #F44336;
  --color-alert:   #D9534F;  /* in-game loser badge */
  --hex-highlight:       #2e8b57; /* legacy alias — kept for mockups that reference the old name */
  --color-hex-highlight: var(--hex-highlight); /* canonical green move highlight token */

  /* ── Purple accent gradients (modal/auth buttons only) ── */
  --gradient-button-primary:  linear-gradient(135deg, #583286 0%, #7a4ba8 100%);
  --gradient-button-hover:    linear-gradient(135deg, #7a4ba8 0%, #9a6bc8 100%);
  --gradient-button-disabled: linear-gradient(135deg, #555 0%, #777 100%);

  /* ── Dark panel gradients (modal surfaces) ─────────────── */
  --gradient-panel-dark: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  --gradient-panel-mid:  linear-gradient(135deg, #333 0%, #2a2a2a 100%);
  --gradient-input:      linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);

  /* ── Translucent surfaces (menu panels over parchment) ── */
  --surface-panel-soft:         rgba(255, 255, 255, 0.55);
  --surface-panel-soft-alt:     rgba(255, 255, 255, 0.62);
  --surface-panel-card:         rgba(255, 253, 246, 0.95);
  --surface-panel-card-bright:  rgba(255, 253, 246, 0.98);
  --border-subtle:              1px solid rgba(0, 0, 0, 0.08);

  /* ── Warm menu-highlight family (caramel overlays) ─────── */
  --menu-panel-border-strong:    1px solid rgba(101, 67, 33, 0.24);
  --menu-panel-highlight:        rgba(198, 155, 90, 0.14);
  --menu-panel-highlight-strong: rgba(198, 155, 90, 0.15);
  --menu-button-hover:           rgba(198, 155, 90, 0.24);
  --menu-button-active:          rgba(198, 155, 90, 0.36);
  --menu-button-active-strong:   rgba(198, 155, 90, 0.54);
  --menu-tab-bg:                 rgba(255, 255, 255, 0.28);
  --menu-tab-bg-hover:           rgba(255, 255, 255, 0.42);
  --menu-tab-active-bg:          rgba(74, 47, 24, 0.9);
  --menu-tab-active-bg-hover:    rgba(58, 36, 18, 0.92);
  --menu-tab-active-color:       #fff6e5;
  --menu-selected-bg:            rgba(228, 198, 164, 0.7);
  --games-list-row-alt-bg:       rgba(198, 155, 90, 0.05);
  --games-list-row-selected-bg:  rgba(198, 155, 90, 0.28);

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-card:            0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-button:          0 2px 8px  rgba(0, 0, 0, 0.30);
  --shadow-button-hover:    0 6px 12px rgba(0, 0, 0, 0.40);
  --shadow-button-disabled: 0 2px 4px  rgba(0, 0, 0, 0.30);
  --shadow-modal:           0 10px 30px rgba(0, 0, 0, 0.80);

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-xs: 6px;   /* mode-btn, difficulty-btn */
  --radius-sm: 8px;   /* status badge, tab group */
  --radius-md: 10px;  /* invite code section */
  --radius-lg: 12px;  /* rating badge, input, account-btn */
  --radius-xl: 15px;  /* modal surface */
  --radius-round: 50%;/* action buttons */

  /* ── Borders / outlines ────────────────────────────────── */
  --control-border: 2px solid var(--color-gold);
  --control-radius: var(--radius-xs);
  --control-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  --modal-surface-border: 3px solid var(--color-gold);

  /* ── Modal surface tokens ──────────────────────────────── */
  --modal-surface-bg:              var(--gradient-panel-dark);
  --modal-surface-shadow:          var(--shadow-modal);
  --modal-surface-radius:          var(--radius-xl);
  --modal-surface-padding:         var(--space-9);
  --modal-surface-max-width:       min(720px, 90vw);
  --modal-surface-max-height:      min(85%, 90vh);
  --modal-surface-text:            #f0e3cb;
  --modal-surface-light-bg:        rgba(255, 253, 246, 0.98);
  --modal-surface-light-border:    1px solid rgba(0, 0, 0, 0.10);
  --modal-surface-light-shadow:    var(--shadow-card);
  --modal-surface-light-radius:    var(--radius-lg);

  /* ── Menu / button surface tokens ──────────────────────── */
  --menu-surface-radius:   var(--radius-lg);
  --menu-btn-padding:      var(--space-3) var(--space-5);
  --menu-btn-radius:       var(--radius-xs);
  --menu-btn-font-size:    var(--font-size-sm);
  --menu-btn-font-weight:  var(--font-weight-semibold);
  --menu-btn-color:        var(--color-brown-strong);

  /* ── Board geometry tokens ─────────────────────────────── */
  --hex-radius:            56px;
  --hex-width:             calc(var(--hex-radius) * 2);
  --hex-height:            calc(var(--hex-radius) * 1.732);
  --games-list-row-height: 40px;
  --board-radius:          calc(var(--hex-radius) * 0.36);
  --board-frame-inset:     calc(var(--hex-radius) * 0.32);
  --board-frame-border:    calc(var(--hex-radius) * 0.07);
  --board-frame-radius:    calc(var(--hex-radius) * 0.21);
  --board-logo-offset-x:   calc(var(--hex-radius) * 0.36);
  --board-logo-offset-y:   calc(var(--hex-radius) * 0.27);

  /* ── Spacing (derived from observed paddings/gaps) ─────── */
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  30px;

  /* ── Typography ────────────────────────────────────────── */
  --font-family-ui: "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Fluid control font used for inputs/controls (matches
     original --control-font) — stays readable on mobile. */
  --font-size-control: clamp(13px, 1.6vmin, 16px);

  /* Base rhythm (rem-relative) */
  --font-size-xxs: 0.68rem;  /* invite-code-label */
  --font-size-xs:  0.75rem;  /* section labels, help text */
  --font-size-sm:  0.85rem;  /* tooltip, hint */
  --font-size-md:  0.9rem;   /* menu links */
  --font-size-base:1rem;     /* body */
  --font-size-lg:  1.1rem;   /* status */
  --font-size-xl:  1.25rem;  /* game-end status / invite code value */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-heavy:   800;

  --letter-spacing-caps:   0.05em; /* uppercase labels */
  --letter-spacing-display:0.02em; /* game title */
  --letter-spacing-code:   0.22em; /* invite code display */

  --line-height-tight:  1.2;
  --line-height-body:   1.45;
  --line-height-loose:  1.5;
}

/* ============================================================
   Semantic type roles — apply where you'd write <h1>, <p>, etc.
   Matches the voice/specimens used across the product.
   ============================================================ */

.type-display,
h1.type {
  /* Used on the game-title logo wordmark-as-image; this role
     is the textual fallback. */
  font-family: var(--font-family-ui);
  font-size: clamp(2.1rem, 5vw, 3rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-brown-strong);
  letter-spacing: var(--letter-spacing-display);
  line-height: var(--line-height-tight);
  margin: 0;
}

.type-title,
h2.type {
  font-family: var(--font-family-ui);
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-brown-deep);
  line-height: var(--line-height-tight);
  margin: 0;
}

.type-section-label,
.type-eyebrow {
  /* .menu-section__label, .account-label uppercase variant */
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: #8a623f;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  margin: 0;
}

.type-body {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-brown-strong);
  line-height: var(--line-height-loose);
  margin: 0;
}

.type-help,
.type-footnote {
  /* .menu-section__help, .account-footnote */
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-brown-muted);
  line-height: 1.35;
  margin: 0;
}

.type-status {
  /* In-game status badge */
  font-size: var(--font-size-lg);
  color: var(--color-brown-strong);
  font-weight: var(--font-weight-regular);
}

.type-code {
  /* Invite-code value */
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-code);
  color: var(--color-brown-deep);
  font-variant-numeric: tabular-nums;
}

.type-link {
  color: var(--color-brown-warm);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.type-link:focus-visible {
  outline: 2px solid #8a623f;
  outline-offset: 2px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; overflow: hidden; }
body {
  margin: 0;
  background: var(--color-parchment);
  font-family: var(--font-family-ui);
  color: var(--color-brown-strong);
  min-height: 100dvh;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; }
button { touch-action: manipulation; }
.loading-overlay { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; background: rgba(61,40,23,.45); color: var(--color-parchment-card); }
.loading-overlay--hidden { display: none; }
.loading-spinner { width: 42px; height: 42px; border: 4px solid rgba(255,255,255,.25); border-top-color: var(--color-parchment-card); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.app-shell { height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding: calc(env(safe-area-inset-top) + var(--space-7)) calc(env(safe-area-inset-right) + var(--space-6)) calc(env(safe-area-inset-bottom) + var(--space-8)) calc(env(safe-area-inset-left) + var(--space-6)); }
.panel { background: var(--surface-panel-card); border: var(--menu-panel-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); }
.title-block, .status-panel, .log { display: grid; gap: var(--space-5); }
.brand-lockup { display: grid; justify-items: center; gap: 0; line-height: 1; }
.brand-logo { width: clamp(156px, 22vw, 250px); height: auto; display: block; filter: drop-shadow(0 2px 2px rgba(61,40,23,.18)); }
.brand-subtitle { margin-top: -2px; font-family: var(--font-family-ui); font-size: clamp(18px, 2.6vw, 32px); font-style: italic; font-weight: var(--font-weight-regular); letter-spacing: .12em; color: #000; }
h1 { margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1; letter-spacing: var(--letter-spacing-display); color: var(--color-brown-deep); }
h2 { margin: 0 0 var(--space-4); font-size: 18px; color: var(--color-brown-deep); }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: var(--font-weight-bold); color: #8a623f; }
.body-copy { margin: 0; font-size: 14px; line-height: var(--line-height-body); color: var(--color-brown-muted); }
.turn-card { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--surface-panel-card-bright); padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.turn-main, .topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.turn-pill { min-height: 50px; display: inline-flex; align-items: center; gap: var(--space-3); background: transparent; color: var(--color-brown-strong); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-7); font-size: clamp(18px, 2.1vw, 24px); font-weight: var(--font-weight-medium); }
.dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); }
.dot.dark { background: #28150d; }
.dot.light { background: #f3ead9; border: 1px solid rgba(101,67,33,.35); }
.count-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid rgba(101,67,33,.12); font-size: 14px; }
.count-row:last-child { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: var(--font-weight-heavy); color: var(--color-brown-deep); }
.sync-label { font-size: 12px; font-weight: var(--font-weight-bold); color: #8a623f; }
.controls { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn { min-height: 44px; border: 1px solid rgba(101,67,33,.22); border-radius: var(--radius-xs); padding: var(--space-4) var(--space-5); background: var(--menu-panel-highlight); color: var(--color-brown-strong); font-weight: var(--font-weight-bold); font-size: 13px; cursor: pointer; }
.btn.primary { background: var(--gradient-button-primary); color: white; border: 0; box-shadow: var(--shadow-button); }
.float-btn { position: fixed; z-index: 100; width: 52px; height: 52px; padding: 12px; border: none; border-radius: var(--radius-round); background: var(--surface-panel-card-bright); color: var(--color-brown-strong); box-shadow: 0 2px 10px rgba(60,40,20,.18); cursor: pointer; transition: background .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
.float-btn:hover:not(:disabled) { background: rgba(255,253,246,1); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.float-btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.float-btn:disabled { opacity: .42; cursor: not-allowed; }
.float-btn svg { width: 100%; height: 100%; display: block; }
.rules-float { top: calc(env(safe-area-inset-top) + var(--space-7)); left: calc(env(safe-area-inset-left) + var(--space-7)); }
.menu-float { top: calc(env(safe-area-inset-top) + var(--space-7)); right: calc(env(safe-area-inset-right) + var(--space-7)); }
.undo-float { top: calc(env(safe-area-inset-top) + 84px); right: calc(env(safe-area-inset-right) + var(--space-7)); }
.reset-float { top: calc(env(safe-area-inset-top) + 148px); right: calc(env(safe-area-inset-right) + var(--space-7)); }
.reset-float:hover:not(:disabled) { transform: rotate(180deg); }
.menu-backdrop { position: fixed; inset: 0; z-index: 260; background: rgba(61,40,23,.26); backdrop-filter: blur(2px); }
.menu-modal { position: fixed; top: calc(env(safe-area-inset-top) + 74px); right: calc(env(safe-area-inset-right) + var(--space-7)); z-index: 300; display: flex; flex-direction: row; align-items: stretch; filter: drop-shadow(0 4px 12px rgba(0,0,0,.12)); max-width: calc(100vw - 32px); }
.rules-backdrop { position: fixed; inset: 0; z-index: 390; background: rgba(0,0,0,.72); backdrop-filter: blur(5px); }
.rules-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 400; width: min(560px, calc(100vw - 32px)); max-height: min(78svh, 680px); overflow-y: auto; padding: var(--space-8); border: var(--modal-surface-border); border-radius: var(--modal-surface-radius); background: var(--modal-surface-bg); box-shadow: var(--modal-surface-shadow); color: #fff7e8; }
.rules-modal .eyebrow, .rules-modal h2, .rules-modal strong { color: var(--color-gold); }
.rules-modal h2 { margin-bottom: var(--space-6); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); }
.rules-modal-list { color: #fff7e8; padding-right: var(--space-3); font-weight: var(--font-weight-medium); }
.rules-modal-list li::marker { color: var(--color-gold); }
.rules-close { position: absolute; top: var(--space-3); right: var(--space-3); min-width: 44px; min-height: 44px; border: none; border-radius: var(--radius-round); background: transparent; color: var(--color-gold); font-size: 28px; line-height: 1; cursor: pointer; }
.rules-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.menu-tabs { display: flex; flex-direction: column; padding-bottom: calc(var(--menu-surface-radius) + 4px); order: 2; }
.menu-tab-btn { display: block; writing-mode: vertical-rl; text-orientation: mixed; padding: 14px var(--space-2); border: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--menu-tab-bg); color: var(--color-brown-strong); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; min-height: 76px; }
.menu-tab-btn:not(.menu-tab-btn--active):hover { background: var(--menu-tab-bg-hover); }
.menu-tab-btn--active { background: var(--menu-tab-active-bg); color: var(--menu-tab-active-color); }
.menu-panels-local { position: relative; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); background: var(--surface-panel-card-bright); border-radius: var(--menu-surface-radius) 0 var(--menu-surface-radius) var(--menu-surface-radius); width: min(320px, calc(100vw - 64px)); max-height: calc(100svh - 90px); overflow-y: auto; overscroll-behavior: contain; }
.menu-panel-local { display: flex; flex-direction: column; gap: var(--space-6); }
.menu-section-local { display: flex; flex-direction: column; gap: var(--space-3); }
.menu-section-local--header { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.menu-section-local h2 { margin: var(--space-1) 0 0; }
.menu-close { min-width: 44px; min-height: 44px; border: none; border-radius: var(--radius-round); background: var(--menu-panel-highlight); color: var(--color-brown-strong); font-size: 24px; line-height: 1; cursor: pointer; }
.menu-close:hover { background: var(--menu-button-hover); }
.menu-stats { border: 1px solid rgba(101,67,33,.16); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); background: rgba(255,253,246,.7); }
.ai-level-control { display: grid; gap: var(--space-3); border: 1px solid rgba(101,67,33,.18); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--menu-panel-highlight); color: var(--color-brown-strong); }
.ai-level-control__top, .ai-level-control__scale { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ai-level-control__top { font-weight: var(--font-weight-semibold); }
.ai-level-control__top strong { font-size: var(--font-size-lg); color: var(--color-brown-deep); }
.ai-level-control__scale { color: var(--color-brown-muted); font-size: var(--font-size-xs); }
.ai-level-range { width: 100%; min-height: 44px; accent-color: var(--color-brown-strong); cursor: pointer; }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.account-btn { min-height: 44px; border: 1px solid rgba(101,67,33,.18); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); background: var(--menu-panel-highlight); color: var(--color-brown-strong); font-weight: var(--font-weight-semibold); cursor: pointer; }
.account-btn:hover { background: var(--menu-button-hover); }
.stage { height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); width: 100%; min-width: 0; }
.stage > .panel, .board { max-width: 100%; }
.board-wrap { display: grid; place-items: center; width: 100%; min-height: 0; }
.board { position: relative; width: min(82vw, 880px, calc((100svh - 232px) * 1.15)); aspect-ratio: 1.15 / 1; border-radius: calc(var(--board-radius) * 1.25); background: linear-gradient(135deg, rgba(255,248,230,.42), rgba(198,155,90,.32)), url('assets/img/bg-wood.webp') center/cover, linear-gradient(135deg, #f5df9c, #deb86d 54%, #c7924c); box-shadow: inset 0 0 0 5px rgba(255,255,255,.25), inset 0 0 0 12px rgba(0,0,0,.15), inset 0 0 0 22px rgba(42,26,12,.46), 0 18px 40px rgba(61,40,23,.32); overflow: hidden; }
.board::after { content: ""; position: absolute; inset: var(--board-frame-inset); border: var(--board-frame-border) solid rgba(0,0,0,.12); border-radius: var(--board-frame-radius); pointer-events: none; }
.signature { position: absolute; right: 5%; bottom: 4%; width: clamp(64px, 12%, 110px); height: auto; opacity: .72; transform: rotate(-8deg); pointer-events: none; }
.hexfield { position: absolute; left: 50%; top: 50%; width: 88%; height: 84%; transform: translate(-50%, -50%); }
.cell { --x: 0; --y: 0; position: absolute; left: calc(50% + var(--x) * 17%); top: calc(50% + var(--y) * 20.5%); width: 22%; min-width: 44px; min-height: 44px; aspect-ratio: 1.154 / 1; transform: translate(-50%, -50%); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background: url('assets/svg/hex-piece-light.svg') center/cover; border: 0; box-shadow: none; display: grid; place-items: center; padding: 0; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.cell.dotted { background-image: url('assets/svg/hex-piece-dark.svg'); }
.cell:hover { transform: translate(-50%, calc(-50% - 2px)); box-shadow: inset 0 0 0 2px rgba(45,27,12,.64), 0 8px 16px rgba(60,30,5,.24); }
.cell:focus-visible { outline: 2px solid rgba(138,98,63,.62); outline-offset: 2px; }
.cell::after { content: attr(data-label); position: absolute; bottom: 7%; right: 12%; font-size: 10px; color: rgba(61,40,23,.34); font-weight: var(--font-weight-bold); }
.cell.dotted::before { content: none; }
.cell.selected { background-color: rgba(46,139,87,.22); box-shadow: inset 0 0 0 3px rgba(46,139,87,.78), 0 10px 20px rgba(0,0,0,.18); }
.cell.target { background-color: transparent; }
.cell.target::before { content: ""; position: absolute; inset: 8%; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); pointer-events: none; z-index: 1; }
.cell.target--move { box-shadow: 0 0 0 6px rgba(46,139,87,.35), 0 10px 22px rgba(0,0,0,.25); }
.cell.target--move::before { background: rgba(46,139,87,.30); }
.cell.target--jump { box-shadow: 0 0 0 6px rgba(176,0,32,.38), 0 10px 22px rgba(0,0,0,.25); }
.cell.target--jump::before { background: rgba(176,0,32,.34); }
.piece { position: absolute; width: 64%; height: 82%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.34)) drop-shadow(0 2px 4px rgba(48,29,14,.28)); z-index: 2; pointer-events: none; }
.piece.down, .piece.dark { transform: rotate(180deg); }
.jump-arrow { position: absolute; left: calc(50% + var(--arrow-x) * 17%); top: calc(50% + var(--arrow-y) * 20.5%); width: var(--arrow-length); height: 3px; background: rgba(46,139,87,.82); transform: rotate(var(--arrow-angle)); transform-origin: left center; border-radius: 999px; z-index: 4; pointer-events: none; }
.jump-arrow::after { content: ""; position: absolute; right: -5px; top: -5px; border-left: 11px solid rgba(46,139,87,.82); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.caption { text-align: center; font-family: var(--font-family-ui); font-weight: var(--font-weight-semibold); color: var(--color-brown-muted); }
.info-drawer { width: min(700px, 100%); display: block; padding-bottom: var(--space-7); }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
.move { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; font-size: 13px; padding: var(--space-3); border-radius: var(--radius-sm); background: rgba(198,155,90,.1); }
.badge { border: 1px solid rgba(101,67,33,.18); border-radius: 999px; padding: 5px 8px; font-size: 11px; font-weight: var(--font-weight-heavy); letter-spacing: .04em; text-transform: uppercase; background: rgba(255,253,246,.78); color: #8a623f; }
.howto-card { border: 1px solid rgba(101,67,33,.16); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255,253,246,.96), rgba(198,155,90,.12)); padding: var(--space-5); }
.howto-card h2 { margin-bottom: var(--space-3); }
.howto-list { margin: 0; padding-left: 1.15rem; display: grid; gap: var(--space-3); color: var(--color-brown-strong); font-size: 14px; line-height: var(--line-height-body); }
.howto-list li::marker { color: #8a623f; }
.howto-list strong { color: var(--color-brown-deep); }
.rules-modal .rules-modal-list { color: #fff7e8; font-weight: var(--font-weight-medium); }
.rules-modal .rules-modal-list li::marker { color: var(--color-gold); }
.rules-modal .rules-modal-list strong { color: var(--color-gold); }
.rules-panel hr { border: 0; border-top: 1px solid rgba(101,67,33,.14); margin: var(--space-6) 0; }
@media (max-width: 1040px) { .app-shell { padding: calc(env(safe-area-inset-top) + var(--space-5)) var(--space-5) calc(env(safe-area-inset-bottom) + var(--space-5)); gap: var(--space-3); } .stage { gap: clamp(4px, 1svh, 9px); justify-content: flex-start; padding-top: clamp(4px, 1.4svh, 12px); } .info-drawer { display: none; } .brand-logo { width: clamp(132px, 24vw, 196px); } .brand-subtitle { font-size: clamp(16px, 3vw, 24px); } .turn-pill { min-height: 44px; font-size: clamp(16px, 2.4vw, 20px); padding: var(--space-3) var(--space-5); } .board { width: min(calc(100vw - 16px), calc((100svh - 206px) * 1.15), 760px); } .caption { max-width: min(92vw, 680px); font-size: 13px; line-height: 1.25; } }
@media (max-width: 520px) { .app-shell { padding: calc(env(safe-area-inset-top) + var(--space-3)) var(--space-3) calc(env(safe-area-inset-bottom) + var(--space-3)); gap: var(--space-2); } .panel { padding: var(--space-5); } .brand-logo { width: 138px; } .brand-subtitle { margin-top: -1px; font-size: 16px; letter-spacing: .11em; } .turn-pill { min-height: 44px; font-size: 16px; padding: var(--space-3) var(--space-5); } .float-btn { width: 44px; height: 44px; padding: var(--space-4); } .rules-float { top: calc(env(safe-area-inset-top) + var(--space-4)); left: var(--space-4); } .menu-float { top: calc(env(safe-area-inset-top) + var(--space-4)); right: var(--space-4); } .undo-float { top: calc(env(safe-area-inset-top) + 60px); right: var(--space-4); } .reset-float { top: calc(env(safe-area-inset-top) + 108px); right: var(--space-4); } .menu-modal { top: calc(env(safe-area-inset-top) + 58px); right: var(--space-4); max-width: calc(100vw - 20px); } .menu-panels-local { width: min(310px, calc(100vw - 52px)); max-height: calc(100svh - 70px); padding: var(--space-5); } .menu-actions { grid-template-columns: 1fr; } .rules-modal { width: calc(100vw - 24px); max-height: calc(100svh - 32px); padding: var(--space-7) var(--space-6); } .stage { gap: var(--space-1); padding-top: var(--space-2); } .board { width: min(calc(100vw - 8px), calc((100svh - 178px) * 1.15)); } .caption { font-size: 12px; } .cell::after { display: none; } .stats-grid { grid-template-columns: 1fr; } }