/* ============================================
   MOBILE & RESPONSIVE OVERRIDES — Tic Tac Toe
   Loaded last, so every rule here wins over the
   desktop defaults.

   Layout is driven by data-* attributes that
   js/viewport.js keeps in sync with the real
   visible viewport:
     data-orient  portrait | landscape
     data-w       xs(<420) sm(<640) md(<1024) lg(<1440) xl
     data-h       xs(<400) sm(<600) md(<820) lg(<1100) xl
     data-split   yes  (board beside the score panel)
     data-input   mouse | touch | keyboard
   ============================================ */

/* =========================
   1. VIEWPORT MODEL
   ========================= */
:root {
  --app-h: 100vh;
  --app-w: 100vw;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --gutter: 14px;
  --gap: 12px;
  --tap: 44px;
  --board-size: min(90vw, calc(var(--app-h) * .46), 480px);
}

@supports (height: 1dvh) {
  :root { --app-h: 100dvh; }
}

/* height tiers (portrait) */
html[data-h="xs"] { --gutter: 8px; --gap: 7px; --board-size: min(88vw, calc(var(--app-h) * .40), 300px); }
html[data-h="sm"] { --gutter: 11px; --gap: 9px; --board-size: min(90vw, calc(var(--app-h) * .44), 400px); }
html[data-h="md"] { --gutter: 14px; --gap: 12px; --board-size: min(90vw, calc(var(--app-h) * .50), 440px); }
html[data-h="lg"] { --gutter: 18px; --gap: 14px; --board-size: min(90vw, calc(var(--app-h) * .55), 520px); }
html[data-h="xl"] { --gutter: 22px; --gap: 16px; --board-size: min(90vw, calc(var(--app-h) * .58), 560px); }

/* landscape: the short axis is the limit, minus the screen chrome */
html[data-orient="landscape"][data-h="xs"] { --gutter: 8px; --gap: 6px; --board-size: min(44vw, calc(var(--app-h) - 134px), 250px); }
html[data-orient="landscape"][data-h="sm"] { --gutter: 10px; --gap: 8px; --board-size: min(46vw, calc(var(--app-h) - 152px), 330px); }
html[data-orient="landscape"][data-h="md"] { --gutter: 13px; --gap: 10px; --board-size: min(46vw, calc(var(--app-h) - 160px), 420px); }
html[data-orient="landscape"][data-h="lg"] { --board-size: min(44vw, calc(var(--app-h) - 170px), 470px); }
html[data-orient="landscape"][data-h="xl"] { --board-size: min(42vw, calc(var(--app-h) - 180px), 500px); }

/* wide screens always have room — restore the big board */
html[data-w="lg"] { --board-size: min(90vw, calc(var(--app-h) * .54), 520px); }
html[data-w="xl"] { --board-size: min(90vw, calc(var(--app-h) * .58), 560px); }

/* =========================
   2. SHELL
   ========================= */
html,
body {
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#app {
  height: var(--app-h);
  min-height: 0;
  max-height: var(--app-h);
  max-width: 100%;
  overflow: hidden;
  padding:
    calc(var(--safe-t) + var(--gutter))
    calc(var(--safe-r) + var(--gutter))
    calc(var(--safe-b) + var(--gutter))
    calc(var(--safe-l) + var(--gutter));
}

/* =========================
   3. SCREENS — fit, never cut
   ========================= */
.screen {
  padding: 0;
  width: 100%;
  max-width: 1100px;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  gap: var(--gap);
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.screen.active > * { flex-shrink: 0; }
.screen.active > :first-child { margin-top: auto; }
.screen.active > :last-child { margin-bottom: auto; }

/* =========================
   4. BUTTONS / TOUCH TARGETS
   ========================= */
.btn {
  min-height: var(--tap);
  max-width: 100%;
  touch-action: manipulation;
}

.btn-small {
  min-width: 0;
  min-height: 38px;
  padding: 8px 16px;
}

.menu-buttons .btn,
.result-actions .btn,
.confirm-dialog__buttons .btn {
  width: 100%;
  min-width: 0;
}

.confirm-dialog__buttons { flex-wrap: wrap; }

/* =========================
   5. FULL SCREEN BUTTON
   ========================= */
.fs-btn {
  position: fixed;
  top: calc(var(--safe-t) + 10px);
  right: calc(var(--safe-r) + 10px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--cell-border);
  background: var(--bg-card);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-main);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.fs-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  color: var(--text-primary);
}

.fs-btn:active { transform: scale(.95); }

.fs-btn__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.fs-btn .fs-icon-exit { display: none; }
.fs-btn.is-active { color: var(--accent); border-color: var(--accent); }
.fs-btn.is-active .fs-icon-enter { display: none; }
.fs-btn.is-active .fs-icon-exit { display: block; }
.fs-btn[hidden] { display: none; }

html[data-h="xs"] .fs-btn {
  min-height: 36px;
  padding: 6px 9px;
  top: calc(var(--safe-t) + 6px);
  right: calc(var(--safe-r) + 6px);
}
html[data-h="xs"] .fs-btn__label { display: none; }

/* toast (full screen unavailable hint) */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 18px);
  transform: translate(-50%, 20px);
  z-index: 200;
  max-width: min(420px, calc(100% - 32px));
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--accent);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  font-size: .85rem;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* keep the menu clear of the floating button */
.menu-screen { padding-top: calc(60px - var(--gutter)); }

/* =========================
   6. MAIN MENU
   ========================= */
.menu-screen { gap: clamp(16px, 4vh, 32px); }

.game-title { max-width: 100%; }

.game-title__main {
  font-size: clamp(1.9rem, 8.5vw, 3.6rem);
  letter-spacing: clamp(2px, 1vw, 4px);
  overflow-wrap: anywhere;
}

.game-title__sub {
  font-size: clamp(.65rem, 2.6vw, 1rem);
  letter-spacing: clamp(3px, 1.6vw, 6px);
  overflow-wrap: anywhere;
}

.menu-buttons {
  width: 100%;
  max-width: min(320px, 100%);
  gap: clamp(8px, 1.6vh, 12px);
}

.menu-buttons .btn {
  padding: clamp(10px, 1.8vh, 14px) 18px;
  font-size: clamp(.8rem, 3.4vw, 1rem);
  letter-spacing: .5px;
}

/* landscape phone: title left, buttons right — no scrolling */
html[data-orient="landscape"][data-h="xs"] .menu-screen,
html[data-orient="landscape"][data-h="sm"] .menu-screen {
  flex-direction: row;
  align-items: center;
  gap: clamp(12px, 4vw, 28px);
  padding-top: 0;
}

html[data-orient="landscape"][data-h="xs"] .menu-screen > :first-child,
html[data-orient="landscape"][data-h="sm"] .menu-screen > :first-child {
  margin-top: 0;
  margin-left: auto;
}

html[data-orient="landscape"][data-h="xs"] .menu-screen > :last-child,
html[data-orient="landscape"][data-h="sm"] .menu-screen > :last-child {
  margin-bottom: 0;
  margin-right: auto;
}

html[data-orient="landscape"][data-h="xs"] .game-title,
html[data-orient="landscape"][data-h="sm"] .game-title { min-width: 0; flex: 0 1 auto; }

html[data-orient="landscape"][data-h="xs"] .game-title__main { font-size: clamp(1.2rem, 6.4vh, 1.7rem); letter-spacing: 2px; }
html[data-orient="landscape"][data-h="sm"] .game-title__main { font-size: clamp(1.4rem, 7vh, 2.2rem); }
html[data-orient="landscape"][data-h="xs"] .game-title__sub { letter-spacing: 3px; }

html[data-orient="landscape"][data-h="xs"] .menu-buttons,
html[data-orient="landscape"][data-h="sm"] .menu-buttons {
  width: auto;
  min-width: 0;
  max-width: min(280px, 46vw);
  flex: 0 1 auto;
}

html[data-orient="landscape"][data-h="xs"] .menu-buttons .btn,
html[data-orient="landscape"][data-h="sm"] .menu-buttons .btn { padding: 8px 14px; }

/* =========================
   7. MODE / DIFFICULTY
   ========================= */
.section-title {
  font-size: clamp(1.1rem, 4.6vw, 2rem);
  letter-spacing: clamp(1px, .6vw, 3px);
  overflow-wrap: anywhere;
}

.section-subtitle {
  font-size: clamp(.75rem, 3.2vw, .95rem);
  overflow-wrap: anywhere;
}

.mode-cards,
.difficulty-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: var(--gap);
  width: 100%;
  max-width: 720px;
}

.mode-card,
.difficulty-card {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: clamp(10px, 2.2vh, 20px) clamp(10px, 3vw, 18px);
}

.mode-card__title,
.difficulty-card__title { overflow-wrap: anywhere; }
.mode-card__desc,
.difficulty-card__desc { overflow-wrap: anywhere; }

/* narrow screens: horizontal cards */
html[data-w="xs"] .mode-card,
html[data-w="xs"] .difficulty-card,
html[data-w="sm"] .mode-card,
html[data-w="sm"] .difficulty-card {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 12px;
}

/* very short (landscape phones): compact, forced columns, no descriptions */
html[data-h="xs"] .difficulty-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-h="xs"] .mode-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

html[data-h="xs"] .mode-card,
html[data-h="xs"] .difficulty-card {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 8px;
  padding: 9px;
}

html[data-h="xs"] .mode-card__desc,
html[data-h="xs"] .difficulty-card__desc,
html[data-h="sm"][data-orient="landscape"] .difficulty-card__desc { display: none; }

html[data-h="xs"] .mode-card__icon { width: 34px; height: 34px; }
html[data-h="xs"] .mode-card__icon svg { width: 18px; height: 18px; }
html[data-h="xs"] .difficulty-card__icon svg { width: 20px; height: 20px; }
html[data-h="xs"] .mode-card__title,
html[data-h="xs"] .difficulty-card__title { font-size: .78rem; letter-spacing: .5px; }

/* =========================
   8. GAME SCREEN
   ========================= */
.game-screen { gap: var(--gap); }

.game-header {
  width: 100%;
  max-width: 960px;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0;
}

.game-header > div { min-width: 0; }

.game-header__title {
  font-size: clamp(.85rem, 3.4vw, 1.4rem);
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.difficulty-badge {
  font-size: clamp(.6rem, 2.4vw, .75rem);
  padding: 2px 8px;
  letter-spacing: .5px;
}

.game-header__actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.game-header__actions .btn {
  padding: 7px 12px;
  font-size: clamp(.65rem, 2.6vw, .8rem);
  letter-spacing: .5px;
  min-height: 36px;
}

.round-info {
  font-size: clamp(.65rem, 2.6vw, .85rem);
  margin-bottom: 0;
}

.status-bar {
  width: 100%;
  max-width: 460px;
  min-height: 40px;
  padding: 6px 14px;
  margin-bottom: 0;
  font-size: clamp(.7rem, 3vw, .95rem);
  letter-spacing: 1px;
  text-align: center;
}

.game-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vh, 20px);
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

html[data-split="yes"] .game-layout {
  flex-direction: row;
  align-items: center;
}

.board-wrapper {
  width: min(var(--board-size), var(--board-fit, 100000px));
  max-width: 100%;
  flex: 0 0 auto;
}

.board {
  width: 100%;
  max-width: 100%;
  padding: 5px;
  gap: 5px;
  touch-action: manipulation;
}

.cell {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

.side-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(6px, 1.4vw, 10px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.panel-card {
  flex: 1 1 0;
  min-width: 84px;
  padding: 8px 10px;
}

.panel-card__title {
  font-size: clamp(.6rem, 2.4vw, .75rem);
  letter-spacing: 1px;
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}

.panel-card__value {
  font-size: clamp(.85rem, 3.2vw, 1.1rem);
  white-space: nowrap;
}

html[data-split="yes"] .side-panel {
  flex-direction: column;
  flex-wrap: nowrap;
  width: clamp(140px, 20vw, 280px);
  max-width: clamp(140px, 20vw, 280px);
  flex: 0 0 auto;
  justify-content: center;
}

html[data-split="yes"] .panel-card { flex: 0 0 auto; }

/* ---- very short viewports (landscape phones): compact chrome ---- */
html[data-h="xs"] .round-info { display: none; }

html[data-h="xs"] .game-header__actions .btn { min-height: 30px; padding: 5px 10px; }
html[data-h="xs"] .status-bar { min-height: 30px; padding: 4px 10px; font-size: .72rem; }
html[data-h="xs"] .panel-card { padding: 4px 8px; }
html[data-h="xs"] .panel-card__title { font-size: .55rem; letter-spacing: .5px; margin-bottom: 0; }
html[data-h="xs"] .panel-card__value { font-size: .8rem; }
html[data-h="xs"] .side-panel { gap: 6px; }
html[data-h="xs"] .game-layout { gap: 6px; }

/* short landscape (and short desktop windows): tighter side panel */
html[data-orient="landscape"][data-h="sm"] .panel-card { padding: 6px 10px; }
html[data-orient="landscape"][data-h="sm"] .panel-card__title { font-size: .6rem; letter-spacing: .5px; margin-bottom: 0; }
html[data-orient="landscape"][data-h="sm"] .panel-card__value { font-size: .9rem; }
html[data-orient="landscape"][data-h="sm"] .status-bar { min-height: 32px; padding: 4px 10px; }
html[data-orient="landscape"][data-h="sm"] .game-header__actions .btn { min-height: 30px; padding: 5px 10px; }

/* =========================
   9. OVERLAYS / MODALS
   ========================= */
.overlay {
  padding:
    calc(var(--safe-t) + 10px)
    calc(var(--safe-r) + 10px)
    calc(var(--safe-b) + 10px)
    calc(var(--safe-l) + 10px);
  overflow: hidden;
  overscroll-behavior: contain;
}

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(520px, 100%);
  max-height: 100%;
  margin: 0;
  padding: clamp(16px, 3.2vw, 28px);
  overflow: hidden;
}

.modal > h2 { flex: 0 0 auto; }

.howto-content,
.settings-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}

.howto-step { margin-bottom: 14px; gap: 12px; }
.howto-step__number { width: 30px; height: 30px; min-width: 30px; font-size: .8rem; }
.howto-step__content h3 { font-size: .92rem; }
.howto-step__content p { font-size: .85rem; }

.setting-item { padding: 10px 0; gap: 10px; flex-wrap: wrap; }
.setting-item > div { min-width: 0; }
.setting-label { font-size: .9rem; }
.setting-description { font-size: .75rem; }

.mark-style-selector { flex-wrap: wrap; }
.mark-style-btn { flex: 0 1 auto; min-width: 0; padding: 6px clamp(6px, 2.4vw, 14px); }
.theme-selector { flex-wrap: wrap; }

.toggle {
  flex: 0 0 auto;
  width: 48px;
  height: 28px;
}
.toggle input:focus-visible + .toggle__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.result-icon { font-size: clamp(2.2rem, 10vw, 4rem); margin-bottom: 8px; }
.result-text { font-size: clamp(1.1rem, 6.5vw, 2.2rem); letter-spacing: clamp(1px, .5vw, 3px); overflow-wrap: anywhere; }
.result-sub { font-size: clamp(.8rem, 3.2vw, 1rem); margin-bottom: 16px; }
.result-score { gap: clamp(8px, 3.4vw, 24px); margin-bottom: 16px; flex-wrap: wrap; }
.result-score__value { font-size: clamp(1.1rem, 5vw, 1.5rem); }
.result-actions { gap: 10px; flex-wrap: wrap; }

html[data-w="xs"] .result-actions,
html[data-w="sm"] .result-actions,
html[data-h="xs"] .result-actions {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

html[data-w="xs"] .confirm-dialog__buttons,
html[data-h="xs"] .confirm-dialog__buttons {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

html[data-h="xs"] .confirm-dialog__message { font-size: .95rem; margin-bottom: 14px; }

/* =========================
   10. KEYBOARD / BIG SCREENS
   ========================= */
.mode-card:focus-visible,
.difficulty-card:focus-visible,
.cell:focus-visible,
.theme-btn:focus-visible,
.mark-style-btn:focus-visible,
.fs-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.cell:focus-visible {
  position: relative;
  z-index: 3;
}

html[data-input="keyboard"] .btn:hover,
html[data-input="keyboard"] .mode-card:hover,
html[data-input="keyboard"] .difficulty-card:hover {
  transform: none;
}

/* comfortable click size on big screens */
html[data-w="lg"] .btn,
html[data-w="xl"] .btn { min-height: 48px; }

html[data-w="lg"] .fs-btn,
html[data-w="xl"] .fs-btn { min-height: 44px; padding: 10px 18px; font-size: .8rem; }