/* Pixel Cross — game-specific styles (rides on playful.css) */

body.playful { touch-action:none; }

.board-wrap {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; min-height:0; width:100%;
}

.mode-seg { margin-bottom:0; }
.mode-seg button { font-size:13px; padding:7px 16px; }

.intro {
  max-width:380px; text-align:center; color:var(--text);
  font-weight:600; font-size:15px; line-height:1.45; opacity:0.85;
}

/* The puzzle is a grid: corner + col-clues on top, row-clues on the left */
.puzzle {
  display:grid; gap:2px;
  background:var(--card); border:5px solid var(--stroke); border-radius:18px;
  padding:8px; box-shadow:0 8px 0 var(--stroke);
  --cs:34px; --cw:102px; --ch:102px;
  grid-template-columns:var(--cw) repeat(var(--n), var(--cs));
  grid-template-rows:var(--ch) repeat(var(--n), var(--cs));
}

.corner { background:transparent; }

.clue {
  display:flex; align-items:center; justify-content:flex-end;
  font-weight:700; color:var(--text); line-height:1;
  font-size:calc(var(--cs) * 0.4); overflow:hidden;
}
.clue.col { flex-direction:column; justify-content:flex-end; padding-bottom:3px; gap:1px; }
.clue.row { flex-direction:row; padding-right:5px; gap:4px; }
.clue span { padding:0 1px; }
.clue.done { color:var(--muted); opacity:0.5; }

.cell {
  width:var(--cs); height:var(--cs);
  background:#F0E6D2; border:1.5px solid #D8C7A6; border-radius:5px;
  cursor:pointer; display:grid; place-items:center;
  font-size:calc(var(--cs) * 0.5); color:var(--muted);
  transition:background 0.08s, transform 0.08s;
}
.cell.fill { background:var(--stroke); border-color:var(--stroke); transform:scale(1.02); }
.cell.mark::after { content:'✕'; color:var(--muted); }
.cell.bad { animation:badFlash 0.4s; }
@keyframes badFlash { 0%,100%{ background:#F0E6D2; } 50%{ background:var(--pink); } }

/* thicker guide line every 5 cells for big grids */
.cell.g-left { border-left:3px solid #BFA87E; }
.cell.g-top  { border-top:3px solid #BFA87E; }

@media (prefers-reduced-motion: reduce) {
  .cell.bad { animation:none; }
}