/* Shut the Box — Layout (S-08 Brett passt sich an, S-09 Hamburger-Menü auf dem Handy), 14.10.2026 */
.menu-toggle, .menu-backdrop, .menu-head { display: none; }

/* Überschrift „Deine Runde …“ nur, wenn genug Höhe da ist — sonst hat das Brett Vorrang */
@media (max-height: 1100px) { .intro { display: none; } }

/* S-11 (14.10.2026): Zahlenfelder 1–10 unter dem Brett — Standard aus, auf Desktop/Tablet schaltbar */
body:not(.show-tiles) .tile-caption, body:not(.show-tiles) #tiles,
body:not(.show-tiles) .selection, body:not(.show-tiles) .control-help { display: none; }
.tiles-toggle { display: block; margin: 4px 0 10px; padding: 8px 12px; font-size: 12px; border-radius: 10px; cursor: pointer; }

/* S-12/S-18/S-20: Leiste „Ansicht“ — Knöpfe immer sichtbar, daneben drei Schalter (an = dunkel) */
.camera-toolbar { align-items: center; }
.view-switches { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.view-switch { background: #fff; color: #36513e; border: 1px solid #c9d4c3; border-radius: 9px; padding: 9px 11px; font-size: 11px; min-height: 36px; cursor: pointer; }
.view-switch[aria-pressed="true"] { background: #254a38; color: #fff8e0; border-color: #254a38; }
.view-switch[aria-pressed="true"]::before { content: '✓ '; }
.tiles-toggle { display: none; }
.camera-locked, .camera-locked .webgl-stage, .camera-locked .die-hit { touch-action: manipulation !important; }
.camera-locked .webgl-stage canvas { cursor: pointer !important; }

/* ─── Handy (hochkant) und Handy quer ──────────────────────────────── */
/* S-14 (14.10.2026): auch Tablets (iPad 1366×892) nutzen das Menü — Thomas: „auf dem iPad bitte auch links mit dem Hamburger-Menü arbeiten“ */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse), (pointer: coarse) and (max-width: 1400px) {
  .intro { display: none; }
  header { height: 56px !important; min-height: 0 !important; flex-wrap: nowrap !important; padding: 0 12px !important; gap: 8px !important; }
  .brand small { display: none; }
  .header-actions { width: auto !important; margin-left: auto; gap: 6px; flex-wrap: nowrap; }
  #background-menu > summary { font-size: 0 !important; padding: 9px 11px; }
  #background-menu > summary::before { content: '◈'; font-size: 16px; }
  .header-actions #rules { font-size: 0 !important; padding: 9px 12px; }
  .header-actions #rules::before { content: '?'; font-size: 16px; font-weight: 600; }

  .layout { grid-template-columns: minmax(0, 1fr) !important; }
  .menu-toggle { margin-left: 2px; display: inline-grid; place-content: center; gap: 4px; width: 42px; height: 42px; flex: none; border-radius: 12px; border: 1px solid #d6dcd2; background: #fff; padding: 0; cursor: pointer; }
  .menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #203a2f; }

  aside#game-menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); z-index: 45;
    display: block !important; overflow-y: auto; overscroll-behavior: contain;
    background: #f6f5ef; padding: 12px 14px 28px; box-shadow: -12px 0 30px rgba(0, 0, 0, .18);
    transform: translateX(105%); transition: transform .25s ease; }
  aside#game-menu > .panel { margin-bottom: 14px; }
  body.menu-open aside#game-menu { transform: none; }
  body.menu-open { overflow: hidden; }
  .menu-backdrop { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(10, 20, 18, .45); opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }
  .menu-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 12px; font-size: 15px; }
  .menu-close { border: 0; background: transparent; font-size: 20px; padding: 6px 10px; cursor: pointer; }

  main { padding-top: 10px !important; }
  .table { padding: 10px 4px !important; }
  main { padding-left: 6px !important; padding-right: 6px !important; }
  .board-wrap { margin-left: 0 !important; margin-right: 0 !important; }
  /* Zahlenfelder auf dem Handy immer aus — Klappen wählt man direkt am Brett */
  .tile-caption, #tiles, .selection, .control-help, .tiles-toggle, #view-tiles { display: none !important; }
}

/* „Zuklappen“ bleibt beim Scrollen sichtbar — nur Handy; auf dem Tablet sitzt das Feld wie am Desktop im Brett */
@media (max-width: 760px) { .board-row .turn-action { position: sticky; bottom: 8px; z-index: 5; } }

@media (prefers-reduced-motion: reduce) {
  aside#game-menu, .menu-backdrop { transition: none; }
}

/* S-13 (14.10.2026): Vorschau-Kachel „Titan & Gold“ im Design Studio */
.finish-titan i { border-color: #c8a565; border-top-color: #ead2a0; border-right-color: #9c7d43; background: #2f343a; box-shadow: 0 2px 0 #1d2126, 3px 8px 9px #1d212655, inset 0 0 0 1px #e3c88f; }