/* ============================================================
   Spomin — game specific styles.
   Panels, chips, buttons, game bar and score chips are shared
   and live in assets/kids.css
   ============================================================ */

/* ---------- setup accents ---------- */
#counts .chip.on { background: var(--grape); box-shadow: 0 5px 0 var(--grape-d); }

/* ---------- game bar ---------- */
.score-chip.best .val { color: var(--mint-d); }

#duoScores { padding-top: 12px; position: relative; z-index: 5; }   /* +1 floats above the board */

/* two players: whoever is on turn owns the screen */

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

/* little marker above the player whose turn it is */
.score-chip.player.active::before {
  content: '▼';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .95rem;
  animation: bob .9s ease-in-out infinite;
}
.score-chip.player.p1.active::before { color: var(--sky); }
.score-chip.player.p2.active::before { color: var(--coral); }
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 4px); }
}

/* +1 that floats up when a player takes a pair */
.plus-one {
  position: absolute;
  top: 100%;
  left: 50%;
  font-weight: 700;
  font-size: 1.8rem;
  text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;
  pointer-events: none;
  animation: floatUp 1.05s cubic-bezier(.2,.7,.3,1) forwards;
}
.plus-one.p1 { color: var(--sky-d); }
.plus-one.p2 { color: var(--coral-d); }
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, -10px) scale(.7); }
  25%  { opacity: 1; transform: translate(-50%, 2px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, 34px) scale(1); }
}

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

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

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

.board {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: clamp(6px, 1.4vmin, 14px);
  width: 100%;
  /* never taller than the space left under the top bar */
  max-width: min(100%, calc((100dvh - var(--chrome, 210px)) * var(--cols) / var(--rows)));
  margin-inline: auto;
}

.board[data-count="8"]  { --cols: 4; --rows: 2; }
.board[data-count="12"] { --cols: 4; --rows: 3; }
.board[data-count="16"] { --cols: 4; --rows: 4; }
.board[data-count="20"] { --cols: 5; --rows: 4; }
.board[data-count="24"] { --cols: 6; --rows: 4; }
.board[data-count="30"] { --cols: 6; --rows: 5; }

@media (orientation: portrait) {
  .board[data-count="8"]  { --cols: 2; --rows: 4; }
  .board[data-count="12"] { --cols: 3; --rows: 4; }
  .board[data-count="16"] { --cols: 4; --rows: 4; }
  .board[data-count="20"] { --cols: 4; --rows: 5; }
  .board[data-count="24"] { --cols: 4; --rows: 6; }
  .board[data-count="30"] { --cols: 5; --rows: 6; }
}

/* phones sideways: the top bar is shorter, give the board the room */
@media (orientation: landscape) and (max-height: 560px) {
  .board { --chrome: 142px; }
  .turn-line { margin-top: 6px; font-size: .95rem; }
}

.card {
  position: relative;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  perspective: 800px;
  container-type: size;
}
.card .inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .38s cubic-bezier(.3,.9,.4,1.2);
  border-radius: clamp(12px, 2.4vmin, 22px);
}
.card.flipped .inner { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  user-select: none;
}
.face.back {
  background: linear-gradient(145deg, var(--sky) 0%, var(--grape) 100%);
  box-shadow: 0 6px 0 rgba(35,48,74,.18);
  color: rgba(255,255,255,.85);
  font-size: clamp(1.2rem, 6vmin, 2.6rem);
  overflow: hidden;
}
/* Hrbtna stran karte je Mali Genij — otrok obrne sovo in odkrije sličico. */
.face.back img {
  width: 66%;
  height: auto;
  display: block;
  filter: drop-shadow(0 3px 5px rgba(35,48,74,.28));
  pointer-events: none;
}
.face.front {
  background: #fff;
  box-shadow: 0 6px 0 rgba(35,48,74,.12);
  transform: rotateY(180deg);
  font-size: clamp(1.6rem, 8vmin, 3.6rem);
  line-height: 1;
}
@supports (container-type: size) {
  .face.back  { font-size: 34cqmin; }
  .face.front { font-size: 52cqmin; }
}

.card:active .inner { transform: scale(.96); }
.card.flipped:active .inner { transform: rotateY(180deg) scale(.96); }

.card.done { cursor: default; }
.card.done .inner { animation: popFlipped .45s ease; }
@keyframes popFlipped {
  0%   { transform: rotateY(180deg) scale(1); }
  40%  { transform: rotateY(180deg) scale(1.12); }
  100% { transform: rotateY(180deg) scale(1); }
}
.card.done .face.front { background: #EAFBF5; box-shadow: 0 6px 0 rgba(33,199,168,.35); }
.card.done.by-p1 .face.front {
  background: #CBE0FF;
  border: 5px solid var(--sky);
  box-shadow: 0 6px 0 var(--sky-d);
}
.card.done.by-p2 .face.front {
  background: #FFD6D6;
  border: 5px solid var(--coral);
  box-shadow: 0 6px 0 var(--coral-d);
}

/* whose pair it is, written on the card */
.card.done.by-p1::after,
.card.done.by-p2::after {
  position: absolute;
  top: 4cqmin;
  right: 4cqmin;
  width: 26cqmin;
  height: 26cqmin;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16cqmin;
  z-index: 2;
  animation: badgeIn .4s .34s cubic-bezier(.2,.9,.3,1.5) both;
}
@keyframes badgeIn {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
.card.done.by-p1::after { content: '1'; background: var(--sky); }
.card.done.by-p2::after { content: '2'; background: var(--coral); }
.card.miss .face.front { background: #FFF3F3; }

.board.locked .card { pointer-events: none; }

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