/* Frapp V2 tokens — dark surface alignée frame Figma Sudoku (636:5098) */
:root{
  --frapp-action-800:#000733;
  --frapp-action-500:#4059ff;
  --frapp-action-250:#99a7ff;
  --frapp-action-100:#d7dbf5;
  --frapp-gray-1000:#ebebeb;
  --frapp-gray-900:#c7c7c7;
  --frapp-gray-800:#858585;
  --frapp-gray-600:#3d3d3d;
  --frapp-gray-500:#171717;
  --frapp-black:#000000;
  --frapp-white:#ffffff;

  /* Surfaces jeu = carte dark Figma (pas le light §2 styleguide — tranché Jean) */
  --frapp-bg:var(--frapp-black);
  --frapp-text:var(--frapp-white);
  --frapp-text-muted:var(--frapp-gray-900);
  --frapp-border:var(--frapp-gray-600);
  --frapp-error:#fd0017;
  --frapp-font:"Source Sans 3",system-ui,sans-serif;
  --frapp-radius:1px;
  --frapp-space:8px;

  --accent:var(--frapp-action-500);
  --accent-ink:var(--frapp-white);
  --accent-soft:var(--frapp-action-800);
  --bg:var(--frapp-bg);
  --surface:var(--frapp-gray-500);
  --surface-2:#0d0d0d;
  --ink:var(--frapp-text);
  --muted:var(--frapp-text-muted);
  --error:var(--frapp-error);
  --error-soft:#4a0a10;
  --peer:#1c1c28;
  --same:#1a2248;
  --note:var(--frapp-gray-800);
  --line:var(--frapp-gray-600);
  --grid-thick:var(--frapp-action-500);
  --given:var(--frapp-white);
  --entry:var(--frapp-action-250);
  --ring:var(--frapp-action-500);
  --ease:ease-out;
  --dur:.2s;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--frapp-font);
  background:var(--bg);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100dvh;
  padding:16px 16px 24px;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ring);outline-offset:2px;
}

/* ---------- layout ---------- */
main{
  width:100%;max-width:900px;
  display:grid;grid-template-columns:minmax(0,1fr) 260px;
  gap:24px;align-items:start;
}
@media (max-width:1023px){
  main{grid-template-columns:1fr;gap:16px;max-width:560px}
}

/* ---------- status bar ---------- */
.status{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  flex-wrap:wrap;
}
.status-diff,.status-meta{
  display:flex;align-items:center;gap:8px;
}
.pill{
  background:var(--surface);
  border:1px solid var(--frapp-border);
  border-radius:var(--frapp-radius);
  padding:0 12px;
  height:38px;
  box-sizing:border-box;
  display:flex;align-items:center;gap:8px;
  font-size:.875rem;color:var(--muted);font-weight:500;
}
.status-meta .pill{
  min-width:108px;
  justify-content:center;
}
.pill b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.icon-btn{
  width:38px;height:38px;flex:0 0 auto;
  border-radius:var(--frapp-radius);
  background:var(--surface);
  border:1px solid var(--frapp-border);
  display:grid;place-items:center;color:var(--muted);
  transition:opacity var(--dur) var(--ease),transform .1s var(--ease);
}
.icon-btn:hover{opacity:.72}
.icon-btn:active{transform:scale(.97)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- FormSelect dark (§7 styleguide) ---------- */
.frapp-select{
  position:relative;
  width:100%;
  min-width:140px;
  max-width:200px;
  font-family:var(--frapp-font);
  z-index:15;
}
.frapp-select__trigger{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  height:38px;
  padding:6px;
  margin:0;
  border:none;
  border-radius:0;
  border-bottom:2px solid var(--frapp-action-250);
  background:var(--frapp-black);
  color:var(--frapp-white);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-align:left;
  cursor:pointer;
}
.frapp-select__trigger:focus-visible{
  outline:2px solid var(--frapp-action-500);
  outline-offset:2px;
}
.frapp-select__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frapp-select__chevron{
  flex:0 0 16px;
  width:16px;
  height:16px;
  color:var(--frapp-action-250);
  transition:transform var(--dur) var(--ease);
}
.frapp-select.is-open .frapp-select__chevron{transform:rotate(180deg)}
.frapp-select__list{
  position:absolute;
  top:100%;
  left:0;
  z-index:20;
  width:100%;
  max-height:min(50vh,320px);
  margin:0;
  padding:0;
  overflow-y:auto;
  list-style:none;
  background:var(--frapp-gray-500);
  border:1px solid var(--frapp-gray-600);
  border-top:none;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.frapp-select__list[hidden]{display:none}
.frapp-select__option{
  display:block;
  width:100%;
  padding:10px 8px;
  border:none;
  border-radius:0;
  background:transparent;
  color:var(--frapp-white);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
.frapp-select__option:focus-visible{
  outline:2px solid var(--frapp-action-500);
  outline-offset:-2px;
}
@media (hover:hover) and (pointer:fine){
  .frapp-select__option:hover{background:var(--frapp-action-250)}
}
.frapp-select__option[aria-selected="true"]{
  background:var(--frapp-action-500);
  color:var(--frapp-white);
}
@media (hover:hover) and (pointer:fine){
  .frapp-select__option[aria-selected="true"]:hover{opacity:.92}
}

#pauseBtn{
  color:var(--ink);display:grid;place-items:center;
  width:24px;height:24px;padding:0;flex:0 0 auto;
  transition:opacity var(--dur) var(--ease);
}
#pauseBtn:hover{opacity:.72}
#pauseBtn svg{width:14px;height:14px;fill:currentColor}

/* ---------- board : grille continue (pas de tiles flottants) ---------- */
.board-wrap{position:relative}
.board{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:2px;width:100%;aspect-ratio:1;
  user-select:none;
  border:2px solid var(--grid-thick);
  border-radius:var(--frapp-radius);
  background:var(--grid-thick);
}
.box{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:1px;background:var(--line);
  border-radius:0;overflow:hidden;
  box-shadow:none;
}
.cell{
  position:relative;display:grid;place-items:center;
  background:var(--surface);
  font-size:clamp(1.05rem,4.2vw,1.55rem);
  font-weight:600;color:var(--entry);
  cursor:pointer;
  transition:background var(--dur) var(--ease);
  outline:none;
  min-height:0;
}
/* sélection = fond .selected ; pas de ring clavier (sinon double bordure) */
.cell:focus,.cell:focus-visible{outline:none}
.cell.given{color:var(--given);font-weight:700}
.cell.peer{background:var(--peer)}
.cell.same{background:var(--same)}
.cell.selected{background:var(--accent);color:var(--accent-ink) !important}
.cell.selected .notes i{color:var(--accent-ink)}
.cell.error{color:var(--error)}
.cell.error.selected{background:var(--error);color:#fff !important}
.cell.error-flash{background:var(--error-soft)}
.cell.pop span.val{animation:pop .2s var(--ease)}
@keyframes pop{0%{transform:scale(.85)}100%{transform:scale(1)}}
.notes{
  position:absolute;inset:0;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:4%;
}
.notes i{
  font-style:normal;font-size:clamp(.4rem,1.5vw,.6rem);
  font-weight:500;color:var(--note);display:grid;place-items:center;line-height:1;
}
.board.win .box{animation:none}

/* pause veil */
.veil{
  position:absolute;inset:0;border-radius:var(--frapp-radius);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  display:none;place-items:center;z-index:5;
}
.veil.show{display:grid}
.veil button{
  display:flex;align-items:center;gap:8px;
  background:var(--accent);color:var(--accent-ink);
  font-weight:600;font-size:1rem;
  min-height:44px;padding:12px 24px;
  border-radius:var(--frapp-radius);
  transition:opacity var(--dur) var(--ease),transform .1s var(--ease);
}
.veil button:hover{opacity:.84}
.veil button:active{transform:scale(.97)}
.veil svg{width:16px;height:16px;fill:currentColor}

/* ---------- side panel ---------- */
.panel{display:flex;flex-direction:column;gap:16px}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tool{
  background:var(--surface);
  border:1px solid var(--frapp-border);
  border-radius:var(--frapp-radius);
  min-height:44px;
  padding:8px 4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:.75rem;font-weight:500;color:var(--muted);
  position:relative;
  transition:opacity var(--dur) var(--ease),transform .1s var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.tool:hover{opacity:.8}
.tool:active{transform:scale(.97)}
.tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tool.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);opacity:1}
.tool .badge{
  position:absolute;top:-6px;right:-4px;
  background:var(--accent);color:var(--accent-ink);
  font-size:.625rem;font-weight:700;
  min-width:18px;height:18px;border-radius:var(--frapp-radius);
  display:grid;place-items:center;padding:0 4px;
}
.tool.active .badge{background:var(--frapp-white);color:var(--accent)}
.tool:disabled{opacity:.4;cursor:default;transform:none}

.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.num{
  background:var(--surface);
  border:1px solid var(--frapp-border);
  border-radius:var(--frapp-radius);
  min-height:44px;
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  font-size:1.375rem;font-weight:600;color:var(--ink);
  transition:opacity var(--dur) var(--ease),transform .1s var(--ease);
}
.num small{font-size:.625rem;font-weight:500;color:var(--muted)}
.num:hover{opacity:.8}
.num:active{transform:scale(.97)}
.num.done{opacity:.32;pointer-events:none}
.new-game{
  background:var(--accent);color:var(--accent-ink);
  font-weight:600;font-size:1rem;
  min-height:44px;padding:12px;
  border-radius:var(--frapp-radius);
  transition:opacity var(--dur) var(--ease),transform .1s var(--ease);
}
.new-game:hover{opacity:.84}
.new-game:active{transform:scale(.97)}

@media (max-width:767px){
  body{padding:16px 12px 16px}
  .panel{gap:12px}
  .pad{grid-template-columns:repeat(9,1fr);gap:4px}
  .num{border-radius:var(--frapp-radius);font-size:1.125rem;aspect-ratio:auto;padding:10px 0;min-height:44px}
  .num small{font-size:.5rem}
  .tools{gap:4px}
  .tool{flex-direction:row;justify-content:center;padding:10px 4px}
  .tool span{display:none}
}

/* ---------- modals ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:none;place-items:center;z-index:50;padding:16px;
}
.overlay.show{display:grid}
.modal{
  background:var(--frapp-gray-500);
  border:1px solid var(--frapp-border);
  border-radius:var(--frapp-radius);
  width:100%;max-width:420px;max-height:86dvh;overflow:auto;
  padding:24px 20px 20px;position:relative;
  animation:rise var(--dur) var(--ease);
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.modal h2{font-size:1.25rem;font-weight:700;margin-bottom:4px}
.modal .sub{color:var(--muted);font-size:.875rem;margin-bottom:16px}
.modal .close{
  position:absolute;top:12px;right:12px;width:44px;height:44px;
  border-radius:var(--frapp-radius);
  background:var(--surface-2);color:var(--muted);
  display:grid;place-items:center;font-size:1rem;
  transition:opacity var(--dur) var(--ease);
}
.modal .close:hover{opacity:.72}
.guide-step{display:flex;gap:12px;margin-bottom:16px;align-items:flex-start}
.guide-ico{
  flex:0 0 40px;height:40px;border-radius:var(--frapp-radius);
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:700;font-size:1rem;
}
.guide-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.guide-step h3{font-size:.9375rem;font-weight:600;margin-bottom:2px}
.guide-step p{font-size:.8125rem;color:var(--muted);line-height:1.45}
.kbd-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;align-items:center;font-size:.8125rem;color:var(--muted)}
kbd{
  background:var(--surface-2);border-radius:var(--frapp-radius);padding:2px 6px;
  font-family:inherit;font-size:.75rem;font-weight:600;color:var(--ink);
  border:1px solid var(--frapp-border);
}
.modal .primary{
  width:100%;margin-top:8px;
  background:var(--accent);color:var(--accent-ink);
  font-weight:600;font-size:1rem;
  min-height:44px;padding:12px;
  border-radius:var(--frapp-radius);
  transition:opacity var(--dur) var(--ease),transform .1s var(--ease);
}
.modal .primary:hover{opacity:.84}
.modal .primary:active{transform:scale(.97)}

.win-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 8px}
.win-stat{
  background:var(--surface-2);border-radius:var(--frapp-radius);
  border:1px solid var(--frapp-border);
  padding:12px 6px;text-align:center;
}
.win-stat b{display:block;font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.win-stat span{font-size:.6875rem;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.trophy{
  width:56px;height:56px;margin:0 auto 12px;border-radius:var(--frapp-radius);
  background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;
}
.trophy svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.center{text-align:center}

.panel-actions{display:flex;flex-direction:column;gap:8px}

#welcomeModal{z-index:49}
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.diff-btn{
  background:var(--surface-2);
  border:1px solid var(--frapp-border);
  border-radius:var(--frapp-radius);
  min-height:56px;padding:12px 8px;
  display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;
  font-weight:600;font-size:.9375rem;color:var(--ink);
  transition:opacity var(--dur) var(--ease),transform .1s var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.diff-btn small{font-size:.6875rem;font-weight:500;color:var(--muted)}
.diff-btn:hover{opacity:.9;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.diff-btn:hover small{color:var(--accent-ink);opacity:.85}
.diff-btn:active{transform:scale(.97)}

.hist-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.hist-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto}
.hist-item{
  display:flex;align-items:center;gap:12px;
  background:var(--surface-2);border:1px solid var(--frapp-border);
  border-radius:var(--frapp-radius);padding:10px 12px;
}
.hist-item .res{
  flex:0 0 32px;height:32px;border-radius:var(--frapp-radius);display:grid;place-items:center;
  font-weight:700;font-size:.75rem;
}
.hist-item .res.w{background:var(--accent-soft);color:var(--accent)}
.hist-item .res.l{background:var(--error-soft);color:var(--error)}
.hist-item .info{flex:1;min-width:0}
.hist-item .info b{display:block;font-size:.875rem;font-weight:600}
.hist-item .info span{font-size:.75rem;color:var(--muted)}
.hist-item .t{font-variant-numeric:tabular-nums;font-weight:600;font-size:.875rem}
.hist-empty{
  text-align:center;color:var(--muted);font-size:.875rem;
  padding:24px 10px;background:var(--surface-2);
  border:1px solid var(--frapp-border);border-radius:var(--frapp-radius);
}
.ghost{
  width:100%;margin-top:12px;padding:12px;min-height:44px;
  border-radius:var(--frapp-radius);
  background:var(--surface-2);color:var(--muted);font-weight:600;font-size:.875rem;
  border:1px solid var(--frapp-border);
  transition:opacity var(--dur) var(--ease);
}
.ghost:hover{opacity:.8;color:var(--error)}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);
  background:var(--frapp-white);color:var(--frapp-black);
  padding:12px 16px;border-radius:var(--frapp-radius);font-size:.875rem;font-weight:500;
  opacity:0;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  z-index:60;pointer-events:none;max-width:90vw;text-align:center;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---------- iframe / embed ---------- */
html.embed,html.embed body{height:100%;min-height:100%}
html.embed body{
  padding:16px 12px 12px;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
/* Grille = hauteur iframe − 82px (body 16+12, barre statut 38, gap 16).
   2 col : main = grille + panel 260 + gap 16 → 100dvh − 82 + 276 = 100dvh + 194. */
html.embed main{
  max-width:min(900px,calc(100vh + 194px));
  max-width:min(900px,calc(100dvh + 194px));
  gap:16px;
}
html.embed .overlay{padding:12px}
html.embed .toast{bottom:12px}

@media (max-width:1023px){
  html.embed main{grid-template-columns:1fr;gap:12px;max-width:560px}
  html.embed .pad{grid-template-columns:repeat(9,1fr);gap:4px}
  html.embed .num{font-size:1.0625rem;aspect-ratio:auto;padding:8px 0;min-height:44px}
  html.embed .tool span{display:none}
  html.embed .tool{flex-direction:row;justify-content:center}
}

@media (max-height:720px){
  html.embed .cell{font-size:clamp(.95rem,3.6vw,1.25rem)}
  html.embed .panel{gap:8px}
  html.embed .new-game{padding:10px;font-size:.875rem}
  html.embed .modal{max-height:92dvh;padding:16px}
  html.embed .diff-btn{padding:10px 6px;min-height:48px}
}

/* ---------- iframe 1 col : hauteur contrainte par le parent ----------
   Frapp plafonne l'iframe mobile à la zone visible au-dessus de sa tabbar.
   La grille (carrée) suit alors la hauteur de l'iframe ; statut et panel
   gardent toute la largeur. Chrome 1 col mesuré = 284px (body 16+12,
   statut 2 lignes 84, gaps 12+12, panel 148). */
@media (max-width:1023px){
  html.embed .board-wrap{width:100%;margin-inline:auto;max-width:calc(100vh - 284px);max-width:calc(100dvh - 284px)}
}
/* Mode compact : iframe plus basse que le contenu 1 col à 390px de large
   (618px = grille 334 + chrome 284). Statut 1 ligne + chrome densifié
   (outils/pavé/CTA) → chrome ≈172px. */
@media (max-width:1023px) and (max-height:617px){
  html.embed body{padding:8px 8px 8px}
  html.embed main{gap:6px}
  html.embed .board-wrap{max-width:calc(100vh - 172px);max-width:calc(100dvh - 172px)}
  html.embed .status{flex-wrap:nowrap;gap:4px}
  html.embed .status-diff,html.embed .status-meta{gap:4px;min-width:0}
  html.embed .status-diff{flex:1 1 auto}
  html.embed .frapp-select{min-width:0;flex:1 1 auto}
  html.embed .status-meta .pill{min-width:0;padding:0 6px;gap:6px;font-size:.8125rem}
  html.embed .panel{gap:4px}
  html.embed .tool{min-height:32px;padding:4px}
  html.embed .tool svg{width:16px;height:16px}
  html.embed .num{min-height:30px;padding:2px 0;font-size:.95rem}
  html.embed .new-game{min-height:32px;padding:6px;font-size:.8125rem}
}