/*
 * game.css — ekran gry „Kółko i krzyżyk” (port design/Ekran.dc.html na przeglądarkę).
 * Wymaga tokens.css (zmienne --bg, --surface2, --x, --o …). Wymiary w px = dp z projektu,
 * tekst w em względem 1rem (czyli rośnie z ustawieniem czcionki użytkownika).
 */

@keyframes ek-draw { 0% { stroke-dashoffset: 100; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes ek-rise { from { transform: translateY(45%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ek-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ek-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

:root {
  --buffer-h: 33px;            /* strefa buforowa: 32 px pustego miejsca + linia 1 px */
  --banner-h: 50px;            /* slot banera; game.js ustawia 50 lub 90 (te same progi co niżej) */
  --ads-h: calc(var(--buffer-h) + var(--banner-h) + env(safe-area-inset-bottom, 0px));
  --board-min: 176px;          /* plansza 3×3 nie schodzi poniżej 176 px; dla N×N ustawia game.js (BOARD_STYLE) na #stage */
}
@media (min-width: 728px) and (min-height: 600px) {
  :root { --banner-h: 90px; }
}

[hidden] { display: none !important; }

html, body { height: 100%; }
body { overflow: hidden; overscroll-behavior: none; }

/* ------------------------------------------------------------------ korzeń ekranu */

.ek {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.4;
}
/* :where() — zerowa swoistość, żeby `font: inherit` nie nadpisywał rozmiarów w klasach przycisków */
:where(.ek button) {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* Dwa ekrany w jednej komórce siatki; nieaktywny jest tylko niewidoczny
   (display:none restartowałby animacje rysowania symboli po powrocie z ustawień). */
.screens { flex: 1 1 0; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.screen { grid-area: 1 / 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.ek[data-screen="game"] #screen-settings,
.ek[data-screen="settings"] #screen-game { visibility: hidden; }

/* ------------------------------------------------------------------ pasek górny */

.bar { flex: none; }
.bar__in {
  max-width: 944px;
  margin: 0 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 24px;
}
.bar--settings .bar__in { max-width: 672px; gap: 4px; padding: 0 16px 0 4px; }
.bar__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 1.375em;
  line-height: 1.27;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bar__title a { color: inherit; text-decoration: none; }
.bar__title a:hover { text-decoration: underline; text-underline-offset: 4px; }

.icon-btn {
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms;
}
@media (hover: hover) { .icon-btn:hover { background: var(--icon-hover); } }
.icon-btn:active { background: var(--s2-press); }

/* ------------------------------------------------------------------ scena gry (układ pionowy) */

.stage {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 560px);
  grid-template-rows: auto minmax(calc(var(--board-min) + 2 * var(--board-pad)), 1fr) auto auto;
  grid-template-areas: "score" "board" "status" "btn";
  justify-content: center;
  padding: 0 24px;
  --board-pad: 8px;
}

.score { grid-area: score; min-height: 64px; display: flex; align-items: center; gap: 8px; }

.chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  border-radius: var(--r-chip);
  background: var(--surface);
  border: 1px solid var(--surface);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  padding: 4px 8px;
  transition: background 200ms, border-color 200ms;
}
.chip[data-active="true"] { background: var(--surface2); }
.chip[data-chip="X"][data-active="true"] { border-color: var(--x); }
.chip[data-chip="O"][data-active="true"] { border-color: var(--o); }
.chip[data-chip="D"][data-active="true"] { border-color: var(--text2); }
.chip__ico { flex: none; width: 18px; height: 18px; display: block; }
.chip__ico--x { color: var(--x); }
.chip__ico--o { color: var(--o); }
.chip__label { font-size: .875em; line-height: 1.43; font-weight: 500; color: var(--text2); }
.chip__num {
  display: inline-flex;
  overflow: hidden;
  font-size: 1.75em;
  line-height: 1.15;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chip__num > span { display: inline-block; }
.chip__num > span.is-bump { animation: ek-rise 220ms var(--ease) both; }

/* Kontener planszy: największy kwadrat w wolnym miejscu (container query). */
.board-wrap {
  grid-area: board;
  container-type: size;
  min-height: calc(var(--board-min) + 2 * var(--board-pad));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--board-pad) 0;
}
.board {
  position: relative;
  width: min(100cqw, 100cqh, 480px);
  aspect-ratio: 1 / 1;
  display: grid;
  /* N×N: --n, --gap i --tile-r ustawia game.js z BOARD_STYLE (game-logic.js); wartości po = plansza 3×3 przed uruchomieniem skryptu */
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  grid-template-rows: repeat(var(--n, 3), minmax(0, 1fr));
  gap: var(--gap, 8px);
}

.tile {
  display: block;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--tile-r, var(--r-tile));
  background: var(--surface2);
  color: var(--text);
  cursor: default;
  transition: transform 150ms var(--ease), background 200ms var(--ease);
}
.tile[data-can="true"] { cursor: pointer; }
@media (hover: hover) { .tile[data-can="true"]:hover { background: var(--s2-hover); } }
.tile[data-can="true"]:active { transform: scale(.96); background: var(--s2-press); }
.tile[data-win="X"] { background: var(--win-x); }
.tile[data-win="O"] { background: var(--win-o); }

.tile__mark { display: block; width: 100%; height: 100%; }
/* Przygaszenie po zakończeniu partii: 35% (wygrana) / 60% (remis), 250 ms po 200 ms. */
.tile__mark[data-dim="win"] { opacity: .35; transition: opacity 250ms var(--ease) 200ms; }
.tile__mark[data-dim="draw"] { opacity: .6; transition: opacity 250ms var(--ease) 200ms; }

.mark { display: block; width: 100%; height: 100%; }
.mark path {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 100;
  animation: ek-draw 120ms var(--ease) both;
}
.mark--x path { stroke: var(--x); }
.mark--x path + path { animation-delay: 100ms; }
.mark--o path { stroke: var(--o); animation-duration: 220ms; }

.winline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.winline path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 100;
  animation: ek-draw 250ms var(--ease) 200ms both;
}
.winline[data-w="X"] path { stroke: var(--x); }
.winline[data-w="O"] path { stroke: var(--o); }

.status {
  grid-area: status;
  text-align: center;
  font-size: 1em;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text);
  margin: 16px 0 24px;
}
.status[data-dim="true"] { color: var(--text2); }

.newgame { grid-area: btn; position: relative; }
.btn {
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 8px 24px;
  border: 0;
  border-radius: var(--r-tile);
  background: var(--surface2);
  color: var(--text);
  font-size: 1em;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background 200ms;
}
@media (hover: hover) { .btn:hover { background: var(--s2-hover); } }
.btn:active { background: var(--s2-press); }
.btn[data-ended="true"] { background: var(--primary); color: var(--on-primary); }
@media (hover: hover) { .btn[data-ended="true"]:hover { background: var(--pri-hover); } }
.btn[data-ended="true"]:active { background: var(--pri-press); }

/* Niski ekran (pionowo): ciaśniejsze odstępy. */
@media (max-height: 719.98px) {
  .stage { --board-pad: 4px; }
  .status { margin: 8px 0 16px; }
}

/* Układ poziomy: plansza po lewej (maks. 480), kolumna 280–360 po prawej, para wyśrodkowana.
   Plansza nie schodzi poniżej --board-min (SPEC: min. bok N×N), dopóki kolumna po prawej może się zwęzić do 280:
   min. ścieżki = min(--board-min, 100% − 280 − 56 odstępu); maks. = reszta przy kolumnie 360 (100% − 360 − 56), do 480. */
@media (orientation: landscape) and (min-width: 600px) {
  .stage {
    --board-col-min: min(var(--board-min), 100% - 336px);
    grid-template-columns:
      minmax(var(--board-col-min), max(var(--board-col-min), min(480px, 100% - 416px)))
      minmax(280px, 360px);
    grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    grid-template-areas: "board ." "board score" "board status" "board btn" "board .";
    column-gap: 56px;
    padding: 16px 24px;
    --board-pad: 0px;
  }
  .score { margin-bottom: 8px; }
  .status { margin: 16px 0; }
}

/* ------------------------------------------------------------------ ustawienia */

.set { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 0 16px 24px; }
.set__in { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; }
.set__h {
  margin: 0;
  padding: 24px 16px 8px;
  font-size: .875em;
  line-height: 1.43;
  font-weight: 600;
  color: var(--text2);
}
.set__h--first { padding-top: 12px; }
.set__ver { text-align: center; font-size: .875em; line-height: 1.43; color: var(--text2); padding: 24px 0 8px; }

.rows { display: flex; flex-direction: column; gap: 2px; }
.rows > * { border-radius: 4px; }
.rows > :first-child { border-radius: 16px 16px 4px 4px; }
.rows > :last-child { border-radius: 4px 4px 16px 16px; }
.rows > :only-child,
.rows > [hidden] ~ :last-child { border-radius: 16px; }

.card { background: var(--surface2); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card[data-dim="true"] { opacity: .38; }
.row__title { display: block; font-size: 1em; line-height: 1.5; font-weight: 500; }
.row__sub { display: block; font-size: .875em; line-height: 1.43; color: var(--text2); }
.row__text { flex: 1; min-width: 0; }

.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg__opt {
  flex: 1 1 0;
  min-width: fit-content;
  min-height: 48px;
  margin: 0;
  padding: 0 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: .875em;
  line-height: 1.43;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.seg__opt[aria-checked="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.seg__opt[aria-disabled="true"] { cursor: default; }
.seg__ico { width: 16px; height: 16px; display: block; }

.row-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  background: var(--surface2);
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) { .row-btn:hover { background: var(--s2-hover); } }
.row-btn[aria-disabled="true"] { opacity: .38; cursor: default; }
@media (hover: hover) { .row-btn[aria-disabled="true"]:hover { background: var(--surface2); } }
.chev { flex: none; fill: var(--text2); }

/* Przełącznik 52 × 32; kciuk 16 → 24 px. */
.sw {
  flex: none;
  position: relative;
  width: 52px;
  height: 32px;
  border-radius: 16px;
  background: var(--bg);
  border: 2px solid var(--text2);
  transition: background 150ms, border-color 150ms;
}
.sw::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--text2);
  transition: left 150ms var(--ease), width 150ms, height 150ms, margin 150ms, background 150ms;
}
[aria-checked="true"] > .sw { background: var(--primary); border-color: var(--primary); }
[aria-checked="true"] > .sw::after { left: 22px; width: 24px; height: 24px; margin-top: -12px; background: var(--on-primary); }

/* ------------------------------------------------------------------ strefa buforowa i baner */

.ads { flex: none; }
.ads__buffer { height: var(--buffer-h); border-bottom: 1px solid var(--line); }
.ads__slot { position: relative; height: var(--banner-h); background: var(--surface); overflow: hidden; }
.ads__slot ins { display: block; width: 100%; }
.ads__ph {
  position: absolute;
  inset: 6px 12px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text2);
}

/* ------------------------------------------------------------------ dialog i snackbar (kończą się nad strefą buforową) */

.scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--ads-h);
  z-index: 20;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: ek-fade 200ms var(--ease) both;
}
.dialog {
  width: 100%;
  max-width: 320px;
  max-height: 100%;
  overflow-y: auto;
  background: var(--dialog);
  border-radius: var(--r-dialog);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dialog__title { margin: 0; font-size: 1.5em; line-height: 1.33; font-weight: 600; }
.dialog__text { margin: 0; font-size: .875em; line-height: 1.43; color: var(--text2); }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.dialog__btn {
  min-height: 48px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-tile);
  background: transparent;
  color: var(--text);
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
}
@media (hover: hover) { .dialog__btn:hover { background: var(--dialog-hover); } }
.dialog__btn--primary { padding: 0 20px; background: var(--primary); color: var(--on-primary); }
@media (hover: hover) { .dialog__btn--primary:hover { background: var(--pri-hover); } }

.snack-region {
  position: absolute;
  left: calc(16px + env(safe-area-inset-left, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(var(--ads-h) + 16px);
  z-index: 30;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.snack {
  width: 100%;
  max-width: 560px;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
  font-size: .875em;
  line-height: 1.43;
  font-weight: 500;
  display: flex;
  align-items: center;
  animation: ek-up 200ms var(--ease) both;
}

.noscript { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: var(--bg); }

/* ------------------------------------------------------------------ mniej ruchu */

@media (prefers-reduced-motion: reduce) {
  .ek *, .ek *::before, .ek *::after { animation: none !important; transition: none !important; }
  .tile[data-can="true"]:active { transform: none; }
}