/* Démineur — grille, tuiles, chiffres au stylo (le reste vient de carnet.css). */
.play {
  --cols: 9;
  --rows: 9;
  --cmax: 54px;
  min-width: 0;
}

/* ---- Barre « mode drapeau » ---- */
.modebar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.modebar .tool {
  flex-direction: row;
  gap: 8px;
  min-height: 44px;
  padding: 4px 14px;
  white-space: nowrap;
}

.modebar .tool .ico { font-size: 20px; }

.mode-hint { margin: 0; font: 500 18px var(--hand); color: var(--pencil); line-height: 1.15; }

/* ---- Grille ---- */
.play .board-wrap {
  width: min(100%, calc(var(--cols) * var(--cmax)));
}

.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  width: 100%;
  container-type: inline-size;
  background-color: #FBFAF6;
  /* un point de carnet au centre de chaque case ouverte */
  background-image: radial-gradient(circle, var(--dot) 1.1px, transparent 1.6px);
  background-size: calc(100% / var(--cols)) calc(100% / var(--rows));
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.board .ink .grid { stroke: var(--pencil); stroke-opacity: .45; stroke-width: .8px; vector-effect: non-scaling-stroke; }
.board .ink .frame { stroke-width: 2.6px; vector-effect: non-scaling-stroke; }

.cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  color: var(--ink);
  font-family: var(--hand);
  font-weight: 700;
  font-size: calc(100cqi / var(--cols) * .96);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

/* Tuile papier non révélée : légèrement ombrée et hachurée au crayon. */
.cell.hid::before {
  content: '';
  position: absolute;
  inset: 8%;
  border: 1.5px solid rgba(14, 14, 12, .55);
  border-radius: 30% 12% 26% 14% / 14% 26% 12% 30%;
  background-color: #ECE7D9;
  background-image: repeating-linear-gradient(-55deg, rgba(119, 115, 106, .26) 0 1px, transparent 1px 4px);
  box-shadow: 1px 2px 0 rgba(14, 14, 12, .16);
  transition: transform .08s ease, background-color .12s ease;
}
.cell.hid:nth-child(3n+1)::before { border-radius: 12% 28% 14% 24% / 26% 12% 30% 14%; transform: rotate(-1.5deg); }
.cell.hid:nth-child(4n+2)::before { border-radius: 22% 16% 30% 12% / 12% 30% 16% 22%; transform: rotate(1.2deg); }

@media (hover: hover) {
  .board:not(.over) .cell.hid:hover::before { background-color: #F3F6DF; }
}

.cell.hid:active::before, .cell.hid.press::before { transform: translate(1px, 1px); box-shadow: 0 0 0 rgba(14, 14, 12, .16); }

.cell:focus-visible { z-index: 3; box-shadow: inset 0 0 0 2px var(--ink); border-radius: 4px; }

/* Drapeau : fond au surligneur fluo, fanion au feutre. */
.cell.flag::before { background-color: rgba(200, 255, 61, .85); background-image: none; }

.cell svg { position: relative; z-index: 1; width: 80%; height: 80%; overflow: visible; pointer-events: none; }

.flag-ico .cloth { fill: var(--red-pen); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.flag-ico .pole { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; }

.cell svg.cross-ico { position: absolute; inset: 10%; z-index: 2; }
.cross-ico path { fill: none; stroke: var(--red-pen); stroke-width: 9; stroke-linecap: round; }
.cell.wrong::before { background-color: rgba(200, 255, 61, .35); }

/* Mine : gribouillis rond noir au feutre. */
.mine-ico .spike { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; }
.mine-ico .core { fill: var(--ink); }
.mine-ico .scrib { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.mine-ico .shine { fill: #FBFAF6; }

.cell.boom { background: rgba(198, 40, 40, .13); }
.cell svg.ring-ico { position: absolute; inset: -14%; width: 128%; height: 128%; z-index: 4; }
.ring-ico path { fill: none; stroke: var(--red-pen); stroke-width: 6; stroke-linecap: round; }

/* Chiffres écrits à la main, un stylo par valeur. */
.cell .d {
  display: inline-block;
  position: relative;
  z-index: 1;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg));
}
.cell.n1 { color: #1F3FA8; }
.cell.n2 { color: #1D6B35; }
.cell.n3 { color: #C62828; }
.cell.n4 { color: #4B1F7E; }
.cell.n5 { color: #8A3B0B; }
.cell.n6 { color: #0B6C72; }
.cell.n7 { color: #0E0E0C; }
.cell.n8 { color: #6B685F; }

.cell.open { cursor: default; }
.board.over .cell { cursor: default; }

/* En mode drapeau, le curseur/trait rappelle l'outil actif. */
.play.flagging .board-wrap { outline: 3px dashed rgba(200, 255, 61, .95); outline-offset: 6px; border-radius: 6px; }

/* ---- Colonne de droite ---- */
.status { min-height: 1.3em; margin: 0 0 14px; font: 600 22px var(--hand); line-height: 1.2; color: var(--text-2); }
.status:empty { display: none; }
.status.lost { color: var(--red-pen); }
.status.won { color: var(--ink); }

.actions .btn:disabled { opacity: .35; cursor: default; }

.records { margin-top: 18px; }
.records .label { margin: 0 0 4px; }
.records ul { list-style: none; margin: 0; padding: 0; font: 500 21px var(--hand); }
.records li { display: flex; justify-content: space-between; gap: 12px; max-width: 280px; border-bottom: 1px dashed var(--dot); }
.records li b { font: 400 19px var(--marker); }
.records li.cur span { background: linear-gradient(transparent 55%, var(--fluo) 55%, var(--fluo) 92%, transparent 92%); }

.icon-btn:disabled { opacity: .35; cursor: default; }

/* Expert à l'horizontale : la grille prend toute la largeur, le reste passe dessous. */
.layout.wide { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.layout.wide .side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; max-width: 900px; }
.layout.wide .side .status, .layout.wide .side .actions { grid-column: 1; }
.layout.wide .side .records { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.layout.wide .side .help { grid-column: 1 / -1; }

@media (max-width: 820px) {
  .play .board-wrap { margin: 0 auto; max-width: none; }
  .layout.wide .side { display: block; }
  .layout.wide .side .records { margin-top: 18px; }
  .modebar { justify-content: space-between; }
  .mode-hint { font-size: 17px; text-align: right; }
}