/* À Lot — jeu mobile responsive : classique / néon */
:root {
  color-scheme: light;
  --bg: #faf6eb; --surface: #fffdf7; --ink: #22212e; --muted: #77768a;
  --stroke: #e8e3d7; --board: #f3eee2; --cell: #e8e2d5; --accent: #6d4eff;
  --accent-ink: #ffffff; --lime: #d7f56a; --shadow: 0 24px 70px #2b22401c;
  --p1: #ff7869; --p1dark: #e8504d; --p2: #7a5dff; --p2dark: #6045d9;
  --p3: #28c9b0; --p3dark: #14a78d; --danger: #b13f46;
  --serif: Georgia, 'Times New Roman', serif;
  font-family: 'Inter', 'Avenir Next', system-ui, -apple-system, sans-serif;
}
html[data-theme="neon"] {
  color-scheme: dark;
  --bg: #101020; --surface: #1b1b31; --ink: #f8f7ff; --muted: #aca9c5;
  --stroke: #34344f; --board: #22223b; --cell: #343451;
  --accent: #b1ff64; --accent-ink: #101020; --lime: #b1ff64;
  --shadow: 0 25px 100px #02020e80;
  --p1: #ff6bc3; --p1dark: #cc3d9d; --p2: #b079ff; --p2dark: #8858db;
  --p3: #4ae6e3; --p3dark: #1eb6b5; --danger: #ff8f9c;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; color: var(--ink); background: var(--bg);
  background-image: radial-gradient(circle at 8% 0%, #ffbd9d38, transparent 32%),
                    radial-gradient(circle at 100% 23%, #9880ff27, transparent 32%);
  overscroll-behavior-y: none;
}
html[data-theme="neon"] body {
  background-image: radial-gradient(circle at 10% 0%, #ad55ff30, transparent 34%),
                    radial-gradient(circle at 110% 46%, #4fddda20, transparent 37%);
}
button { font: inherit; -webkit-tap-highlight-color: transparent; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
button:disabled { cursor: default; opacity: .38; }
button, .cell { touch-action: manipulation; }
button:not(:disabled):active { transform: scale(.97); }
a { color: inherit; }
.site-header {
  max-width: 1170px; margin: 0 auto; padding: 26px 25px 0; display: flex;
  align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 22px; letter-spacing: -.06em; }
.brand-symbol {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 15px;
  background: var(--ink); color: var(--surface); font-weight: 900; font-size: 21px;
  transform: rotate(-8deg);
}
html[data-theme="neon"] .brand-symbol { background: var(--lime); color: #141423; }
.brand b { color: var(--accent); }
.top-tag {
  font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  background: var(--lime); color: #232322; border-radius: 99px; padding: 10px 13px;
  white-space: nowrap;
}
.layout {
  max-width: 1170px; margin: 0 auto; padding: 45px 25px 28px;
  display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 520px);
  align-items: start; gap: clamp(25px, 6vw, 84px);
}
.eyebrow {
  font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 3px 0 14px;
}
h1 {
  font-size: clamp(56px, 6vw, 89px); letter-spacing: -.085em; line-height: .95;
  font-weight: 950; margin: 0 0 18px;
}
h1 em { font: italic 1.05em var(--serif); font-weight: normal; letter-spacing: -.055em; color: var(--accent); }
.lead { max-width: 425px; color: var(--muted); line-height: 1.65; font-size: 16px; margin: 0 0 27px; }
.score-strip { display: flex; gap: 11px; margin: 0 0 26px; }
.score-card {
  background: var(--surface); border: 1px solid var(--stroke); border-radius: 19px;
  padding: 16px 18px; flex: 1; min-width: 0; box-shadow: 0 7px 22px #16102508;
}
.score-card .caption { color: var(--muted); text-transform: uppercase; letter-spacing: .10em; font-size: 10px; font-weight: 900; }
.score-card strong { display: block; font-size: 28px; font-weight: 900; letter-spacing: -.05em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.score-card.star { background: var(--lime); border-color: transparent; color: #20231d; }
.score-card.star .caption { color: #555d40; }
.controls-label { text-transform: uppercase; font-weight: 900; font-size: 11px; letter-spacing: .12em; color: var(--muted); margin: 0 0 11px; }
.theme-picker { display: flex; gap: 8px; margin-bottom: 32px; }
.theme-choice {
  border: 1px solid var(--stroke); color: var(--ink); background: var(--surface);
  padding: 12px 15px; border-radius: 15px; min-height: 46px; font-weight: 800;
}
.theme-choice[aria-pressed="true"] { border: 2px solid var(--accent); padding: 11px 14px; box-shadow: 0 0 0 3px #7563d812; }
.rules {
  border-top: 1px solid var(--stroke); padding-top: 22px; max-width: 400px;
}
.rules h2 { margin: 0 0 13px; font-size: 16px; font-weight: 900; letter-spacing: -.03em; }
.rules p { margin: 0 0 9px; color: var(--muted); line-height: 1.6; font-size: 13px; }
.rules .num { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--ink); background: var(--cell); border-radius: 8px; font-weight: 900; margin-right: 7px; }
.game-panel {
  background: var(--surface); border: 1px solid var(--stroke); box-shadow: var(--shadow);
  border-radius: 34px; padding: clamp(14px, 2.6vw, 27px);
}
.game-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 15px; }
.game-meta { display: flex; align-items: center; gap: 9px; min-width: 0; }
.game-dot { width: 10px; height: 10px; border-radius: 50%; background: #58d6a8; box-shadow: 0 0 0 4px #58d6a828; flex-shrink: 0; }
.game-name { font-size: 13px; font-weight: 900; letter-spacing: -.03em; }
.game-round { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.restart {
  border: 1px solid var(--stroke); background: var(--surface); color: var(--ink);
  border-radius: 12px; min-height: 40px; padding: 0 12px; font-weight: 800; font-size: 12px; flex-shrink: 0;
}
.board-shell { background: var(--board); padding: 9px; border-radius: 19px; }
.board {
  display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 4px;
  width: 100%; aspect-ratio: 1; user-select: none; -webkit-user-select: none;
}
.cell {
  border: none; padding: 0; width: 100%; height: 100%; min-width: 0;
  position: relative; background: var(--cell); border-radius: 7px;
  box-shadow: inset 0 1px 1px #00000008; transition: background .09s, box-shadow .09s;
}
.cell.filled { box-shadow: inset 0 -3px #0000001b, inset 0 3px #ffffff24; }
.cell.type-1 { background: var(--p1); } .cell.type-2 { background: var(--p2); } .cell.type-3 { background: var(--p3); }
.cell.preview { background: var(--accent); box-shadow: inset 0 0 0 2px var(--ink); opacity: .75; }
.cell.preview-bad { background: var(--danger); opacity: .62; }
.board:not(.locked) .cell:not(.filled):hover { box-shadow: inset 0 0 0 2px var(--accent); }
.message {
  min-height: 39px; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--muted); font-weight: 750; font-size: 12px;
  padding: 9px 4px 3px; line-height: 1.5;
}
.message.success { color: #3aa182; } .message.error { color: var(--danger); }
.tray-top { display: flex; justify-content: space-between; gap: 9px; align-items: center; margin: 12px 0 11px; }
.tray-title { font-size: 13px; font-weight: 900; }
.tray-caption { font-size: 11px; color: var(--muted); font-weight: 650; }
.tray { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.piece-button {
  touch-action: none; /* glisser un bloc sans déclencher le scroll tactile */
  background: var(--board); border: 2px solid transparent; border-radius: 17px;
  min-height: 96px; color: var(--ink); display: flex; align-items: center;
  justify-content: center; padding: 10px 5px; position: relative;
}
.piece-button.selected { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px #7563d81b; }
.piece-button.empty { border: 2px dashed var(--stroke); background: transparent; }
.mini-board { display: grid; gap: 2px; grid-template-rows: repeat(var(--rows), 16px); grid-template-columns: repeat(var(--cols), 16px); align-items: stretch; }
.mini-tile { width: 16px; height: 16px; border-radius: 4px; }
.mini-tile.type-1 { background: var(--p1); } .mini-tile.type-2 { background: var(--p2); } .mini-tile.type-3 { background: var(--p3); }
.mini-tile.hidden { background: transparent; }
.piece-button .selected-mark { position: absolute; right: 6px; top: 4px; font-size: 12px; font-weight: 900; color: var(--accent); }
.tray-actions { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; }
.rotate-button {
  flex: 1; border: 0; background: var(--accent); color: var(--accent-ink);
  min-height: 46px; border-radius: 14px; font-weight: 900; font-size: 13px;
}
.tray-help { flex: 1; color: var(--muted); font-size: 11px; line-height: 1.35; text-align: center; }
.disclaimer { font-size: 11px; line-height: 1.55; color: var(--muted); margin: 18px auto 0; max-width: 500px; text-align: center; }
.site-footer { max-width: 1170px; margin: 0 auto; padding: 0 25px 22px; font-size: 11px; color: var(--muted); }
.overlay {
  position: fixed; inset: 0; background: #070613ae; display: grid; place-items: center;
  padding: 20px; z-index: 10; backdrop-filter: blur(8px);
}
.overlay[hidden] { display: none; }
.end-card {
  width: min(100%, 370px); background: var(--surface); color: var(--ink);
  padding: 32px 25px; border-radius: 30px; text-align: center; box-shadow: var(--shadow);
}
.end-icon { font-size: 45px; }
.end-card h2 { margin: 6px 0 8px; font-size: 30px; letter-spacing: -.06em; }
.end-card p { color: var(--muted); line-height: 1.6; font-size: 14px; }
.end-card strong { font-size: 38px; font-variant-numeric: tabular-nums; }
.end-card button {
  margin-top: 18px; background: var(--accent); color: var(--accent-ink); border: 0;
  border-radius: 16px; font-size: 15px; font-weight: 900; padding: 15px 23px; width: 100%;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media(max-width: 780px) {
  .site-header { padding: 15px 18px 0; }
  .layout { grid-template-columns: minmax(0, 1fr); max-width: 540px; padding: 22px 15px 25px; gap: 16px; }
  .intro { display: contents; }
  .intro-head { order: 0; }
  h1 { font-size: clamp(42px, 12vw, 62px); margin-bottom: 9px; }
  .lead { font-size: 13px; line-height: 1.4; margin-bottom: 0; }
  .score-strip { order: 1; margin: 0; gap: 8px; }
  .score-card { padding: 11px 15px; border-radius: 14px; }
  .score-card strong { font-size: 23px; }
  .game-column { order: 2; }
  .game-panel { border-radius: 24px; padding: 13px; }
  .controls-block { order: 3; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
  .controls-label { margin: 0; }
  .theme-picker { margin: 0; }
  .theme-choice { padding: 10px 12px; min-height: 41px; font-size: 12px; }
  .rules { order: 4; max-width: 100%; }
  .site-footer { text-align: center; }
}
@media(max-width: 400px) {
  .site-header { padding-left: 15px; padding-right: 15px; }
  .top-tag { font-size: 10px; padding: 9px; }
  .layout { padding-left: 9px; padding-right: 9px; gap: 12px; }
  .game-panel { padding: 10px; }
  .board-shell { padding: 7px; }
  .board { gap: 3px; }
  .piece-button { min-height: 83px; }
}
@media(prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Mode 9x9 autonome : seule cette entrée est ajoutée au jeu 8x8 existant. */
.wood-shortcut{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:56px;max-width:425px;margin:-8px 0 24px;padding:12px 17px;border-radius:17px;text-decoration:none;background:linear-gradient(115deg,#a26950,#684e62);color:#fff6ed;font-size:15px;font-weight:900;box-shadow:0 8px 23px #291d2424}
.wood-shortcut span{font-size:12px;font-weight:650;color:#ffdec4;line-height:1.4}
.wood-shortcut:focus-visible{outline:3px solid var(--accent);outline-offset:3px}