/* ============================================================
   Križci in krožci — game specific styles.
   Shared panels / chips / game bar live in assets/kids.css
   ============================================================ */

:root {
  --chrome:    210px;   /* zgornja vrstica + vrstica "na vrsti" + robovi */
  --board-cap: 480px;   /* na velikem zaslonu igralna plošča ne raste v nedogled */
}

#modes .chip.on  { background: var(--sky);   box-shadow: 0 5px 0 var(--sky-d); }

.panel.off { opacity: .45; pointer-events: none; }

/* ---------- game bar ---------- */

.score-chip.player.active { transform: translateY(-3px) scale(1.08); color: #fff; }

.turn-line { text-align: center; margin-top: 14px; min-height: 2.2em; }

/* ---------- board ---------- */

.board-holder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* The board's height comes from its square cells, so the width is the only
   thing to cap — no aspect-ratio tricks that behave differently in Safari. */
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.6vmin, 16px);
  width: 100%;
  max-width: min(100%, calc(100vh  - var(--chrome)), var(--board-cap));
  max-width: min(100%, calc(100dvh - var(--chrome)), var(--board-cap));
}

.cell {
  position: relative;
  aspect-ratio: 1;
  border: none;
  border-radius: clamp(14px, 3vmin, 26px);
  background: #fff;
  box-shadow: 0 6px 0 rgba(35,48,74,.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  transition: transform .1s ease, box-shadow .1s ease, background .2s ease;
  container-type: size;
}
.cell:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(35,48,74,.12); }
.cell.taken { cursor: default; pointer-events: none; }
.board.locked .cell { pointer-events: none; }

.mark {
  width: 62%;
  height: 62%;
  animation: markIn .3s cubic-bezier(.2,.9,.3,1.5);
}
@keyframes markIn { from { transform: scale(.3) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
.mark line, .mark circle { stroke-linecap: round; fill: none; }
.mark.x line { stroke: var(--sky);   stroke-width: 16; }
.mark.o circle { stroke: var(--coral); stroke-width: 16; }

.cell.win { background: #E6FBF4; box-shadow: 0 6px 0 rgba(33,199,168,.4); }
.cell.win .mark { animation: pop .5s ease; }

/* ---------- overlay ---------- */

@media (orientation: landscape) and (max-height: 560px) {
  :root { --chrome: 140px; --board-cap: 340px; }
  .turn-line { margin-top: 8px; }
}
@media (max-width: 480px) {
  :root { --chrome: 200px; --board-cap: 420px; }
}