/* Sans aucun double — puzzle pop : lettres dessinées, jetons et aplats imprimés. */
.sad {
  --ink:#291346; --paper:#fff7df; --red:#ffe34c; --muted:#e6d7fa;
  --mint:#79f0cd; --pink:#ff86b6; --violet:#6131a4;
  position:fixed; z-index:100; display:flex; flex-direction:column; overflow:hidden;
  color:var(--paper); font-family:Nunito,sans-serif;
  background:radial-gradient(circle at 1px 1px,#ffffff12 1px,transparent 1.7px) 0 0/12px 12px,
    radial-gradient(ellipse at 85% 0,#7f3fc5,transparent 65%),linear-gradient(165deg,#562194,#321455);
}
.sad * {box-sizing:border-box}
.sad main {flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.sad button,.sad select {
  font:400 20px/1.1 Boogaloo,sans-serif; color:var(--ink); background:var(--paper);
  border:2px solid var(--ink); border-radius:13px 17px 12px 16px; min-height:42px;
  padding:8px 12px; box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #fff9;
  touch-action:manipulation; cursor:pointer; transition:transform 100ms,box-shadow 100ms,background 100ms;
}
.sad button:active:not(:disabled) {transform:translateY(3px);box-shadow:0 1px 0 var(--ink),inset 0 2px 3px #29134622}
.sad button:disabled {opacity:.35;cursor:default;box-shadow:none}
.sad button:focus-visible,.sad select:focus-visible {outline:3px solid var(--mint);outline-offset:4px}
.sad button.primary {background:var(--red);box-shadow:0 5px 0 #9a5929,0 7px 0 var(--ink),inset 0 2px 0 #fff9;border-color:var(--ink)}
.sad .pad {padding:16px}
.sad .stack {display:flex;flex-direction:column;gap:13px}
.sad .row {display:flex;align-items:center;gap:9px}
.sad .row>* {flex:1}
.sad .small {font-size:12px;line-height:1.6;color:var(--muted)}
.sad .eyebrow {font:400 13px/1.1 Boogaloo,sans-serif;letter-spacing:1.8px;color:var(--red)}
.sad h1,.sad h2,.sad h3 {font-family:Boogaloo,sans-serif;font-weight:400}
.sad h2 {font-size:34px;line-height:1.05;margin:7px 0 10px;color:var(--red);text-shadow:2px 3px 0 var(--ink)}
.sad h3 {font-size:25px;margin:14px 0 6px;color:var(--mint)}
.sad .home-menu {gap:13px}
.sad .home-menu>.small {font-weight:900;color:var(--paper);margin-top:4px}
.sad .home-menu>button:not(.primary) {background:var(--mint)}
.sad .home-menu>.row button:first-child {background:#ddbcff}
.sad .home-menu>.row button:last-child {background:var(--pink)}
.sad .home-menu>button:last-of-type {background:#ffb985}
.sad .hero {
  position:relative;min-height:225px;isolation:isolate;overflow:hidden;
  border-radius:24px 17px 26px 13px;background:var(--mint);color:var(--ink);
  padding:19px 17px 15px;border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);
}
.sad .hero:before {content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,#2c866a55 1px,transparent 1.6px) 0 0/7px 7px;mask-image:linear-gradient(120deg,transparent 35%,#000)}
.sad .hero:after {content:'✦';position:absolute;right:14px;top:22px;color:#fff9dc;font-size:63px;line-height:1;transform:rotate(12deg);text-shadow:2px 3px 0 var(--ink);z-index:-1}
.sad .hero .eyebrow {display:inline-block;background:var(--ink);color:var(--mint);padding:5px 8px;border-radius:5px;letter-spacing:1.4px;font-size:10px;transform:rotate(-2deg)}
.sad h1 {font-size:37px;line-height:.97;letter-spacing:-.5px;margin:18px 0 18px;position:relative;z-index:1;transform:rotate(-3deg);transform-origin:left center;text-shadow:1px 2px 0 #fff8}
.sad h1 em {display:inline-block;font-size:75px;font-style:normal;line-height:.92;color:var(--red);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--ink);letter-spacing:-1.8px}
.sad .hero p {display:inline-block;font-size:10px;font-weight:900;margin:0;position:relative;z-index:1;background:#fff7dfd9;padding:4px 6px;transform:rotate(-1deg);border-radius:3px}
.sad .hero-icon {position:absolute;right:8px;top:102px;width:99px;height:99px;transform:rotate(12deg);filter:drop-shadow(3px 5px 0 #29134677);z-index:2}
.sad .progress {height:10px;border:2px solid var(--ink);border-radius:8px;background:#271442;overflow:hidden;margin:0 0 4px;box-shadow:0 1px 0 #a781d3}
.sad .progress i {display:block;height:100%;background:repeating-linear-gradient(110deg,var(--red) 0 9px,#ffbb57 9px 13px);border-radius:6px}
.sad .sync {font-size:9px;line-height:1.4;color:var(--muted);text-align:center;padding:5px 0}
.sad .levelmap {display:grid;grid-template-columns:repeat(5,1fr);gap:12px 8px}
.sad .levelmap button {padding:6px;height:44px;font-size:24px}
.sad .levelmap button.done {background:var(--mint)}
.sad .levelmap button:not(:disabled):not(.done) {background:var(--red);transform:rotate(-4deg)}
.sad .game {padding:8px 16px;display:flex;flex-direction:column;gap:8px}
.sad .chapter {text-transform:uppercase;font:400 11px/1 Boogaloo,sans-serif;letter-spacing:1.8px;color:var(--mint)}
.sad .game-title {display:flex;align-items:center;gap:12px;margin-bottom:0}
.sad .game-title b {font:400 31px/.95 Boogaloo,sans-serif;flex:1;color:var(--red);text-shadow:2px 2px 0 var(--ink);transform:rotate(-2deg)}
.sad .game-title button {min-height:31px;height:31px;padding:2px 10px;font-size:23px;background:var(--pink);border-radius:50%;box-shadow:0 3px 0 var(--ink)}
.sad .time {font:400 22px/1 Boogaloo,sans-serif;color:var(--ink);background:var(--mint);padding:5px 9px;border:2px solid var(--ink);border-radius:8px;box-shadow:2px 2px 0 var(--ink);font-variant-numeric:tabular-nums;transform:rotate(3deg)}
.sad .board-wrap {position:relative;background:#b58aeb;border:3px solid var(--ink);padding:7px 7px 9px;border-radius:18px;box-shadow:0 6px 0 #180d2b,0 9px 0 #ffffff15,inset 0 2px 0 #e3c8ff}
.sad .board {display:grid;gap:3px;width:100%;touch-action:none;user-select:none;-webkit-user-select:none}
.sad .cell {
  position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;min-height:0;
  padding:0;border:1px solid #482968;border-radius:6px;background:#9d97b5;
  color:var(--ink);font-family:Boogaloo,sans-serif;font-weight:400;
  box-shadow:0 2px 0 #714996,inset 0 2px 0 #fff;user-select:none;touch-action:none;
  transition:background 100ms,box-shadow 100ms;
}
.sad .cell:active:not(:disabled) {transform:none;box-shadow:inset 0 2px 2px #29134633}
.sad .cell .symbol {position:absolute;inset:9.5%;width:81%;height:81%;display:block;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.sad .cell.black {background:repeating-linear-gradient(135deg,#291346 0 4px,#382054 4px 6px);color:#d7bfea;border-color:#211235;box-shadow:inset 0 3px 3px #110923aa}
.sad .cell.black .symbol {opacity:.38;filter:saturate(.4)}
.sad .cell.white {background:#ffffff}
/* ESSAI 23-09-2026 (TEMPORAIRE, à trancher avec Stan) : marque masquée, pour
   juger si le seul contraste gris/blanc suffit à dire « case conservée ».
   Retirer la ligne display:none ci-dessous pour rendre le cercle. */
.sad .keep-mark {position:absolute;inset:0;pointer-events:none;z-index:1;display:none}
.sad .keep-mark:before {content:'';position:absolute;left:50%;top:50%;width:94%;height:94%;border:.12em solid #df1010;border-radius:50%;transform:translate(-50%,-50%)}
.sad .cell.impossible {outline:2px solid #ff5e89;outline-offset:-2px;background:#ffbbcf;color:#631d3a}
.sad .tools {margin-top:2px}
.sad .tools button {font-size:16px;padding:6px 3px;min-height:35px;background:#e4caff;box-shadow:0 3px 0 var(--ink)}
.sad .tools button.primary {background:var(--red);font-size:21px}
.sad .tools button:last-child:not(.primary) {background:#ffb9d4}
.sad .note {font-size:11px;line-height:1.5;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:3px 12px 12px 12px;padding:8px 10px;min-height:51px;box-shadow:3px 3px 0 #29134688;margin-top:3px}
.sad .note.solved-note {background:var(--mint);font:400 18px/1.2 Boogaloo,sans-serif;min-height:0;text-align:center}
.sad .overlay {position:absolute;inset:0;z-index:20;display:flex;align-items:center;background:#291346ee;padding:22px;overflow:auto;backdrop-filter:blur(4px)}
.sad .modal {width:100%;max-height:100%;text-align:center;padding:22px 16px;background:#6339a1;border:3px solid var(--ink);border-radius:22px;box-shadow:6px 8px 0 #170b2c}
.sad .modal p {font-size:13px;line-height:1.6;color:var(--paper);margin:8px 0 12px}
.sad .score-modal:before {content:'★';display:block;color:var(--red);font-size:65px;line-height:1;text-shadow:3px 4px 0 var(--ink);transform:rotate(-12deg)}
.sad .record {padding:10px 8px;border:1px solid #bb8aee55;border-radius:9px;background:#29134677;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;margin:5px 0}
.sad .record b {overflow-wrap:anywhere}
.sad .record span {flex-shrink:0}
.sad .record[data-score-mine],.sad button[data-score-mine] {border:2px solid var(--mint);background:#264754!important;color:#fff7df}
.sad .loading {padding:75px 20px;text-align:center;font:400 23px Boogaloo,sans-serif;color:var(--paper)}
.sad .loading-icon {width:104px;height:104px;filter:drop-shadow(4px 6px 0 #211034);animation:sad-load 1.1s ease-in-out infinite}
.sad .tutorial-page {padding-top:22px}
.sad .tutorial-copy {font-size:14px;line-height:1.65;margin:0 0 10px}
.sad .tutorial-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:204px;align-self:center;padding:9px;background:#b58aeb;border:3px solid var(--ink);border-radius:15px;margin:5px 0;box-shadow:4px 5px 0 var(--ink);transform:rotate(-2deg)}
.sad .tutorial-grid .cell {font-size:30px}
.sad .gesture-list {display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.sad .gesture-row {display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:12px 10px;border-radius:10px;font-size:12px}
.sad .gesture-row b {font:400 21px Boogaloo,sans-serif}
.sad .gesture-row:nth-child(even) {background:var(--mint);transform:rotate(1deg)}
.sad .gesture-row span {font-weight:900}
.sad .tutorial-icon {height:110px;width:110px;margin:5px auto 15px;filter:drop-shadow(4px 5px 0 var(--ink));transform:rotate(8deg)}
/* Victory layer never captures a tap; it disappears immediately when leaving the board. */
.sad .victory-show {position:absolute;inset:44px 0 0;z-index:15;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 38%,#ffe34c30,transparent 65%);animation:sad-finale 2900ms ease both}
.sad .victory-burst {position:absolute;left:50%;top:38%;width:320px;height:320px;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 5deg,#ffe34c50 0 10deg,transparent 10deg 25deg);border-radius:50%;mask-image:radial-gradient(#000 30%,transparent 70%);animation:sad-rays 2800ms ease-out both}
.sad .victory-badge {position:absolute;left:22px;right:22px;top:calc(38% - 68px);padding:17px 8px;background:var(--red);color:var(--ink);border:3px solid var(--ink);border-radius:18px 8px 20px 10px;box-shadow:5px 7px 0 var(--ink),-5px -5px 0 var(--pink);text-align:center;transform:rotate(-7deg);animation:sad-stamp 600ms cubic-bezier(.2,.8,.3,1.3) both}
.sad .victory-badge:before,.sad .victory-badge:after {content:'✦';position:absolute;font-size:44px;color:var(--mint);text-shadow:2px 3px 0 var(--ink)}
.sad .victory-badge:before {top:-34px;left:13px;transform:rotate(-15deg)}
.sad .victory-badge:after {bottom:-32px;right:11px;transform:rotate(10deg)}
.sad .victory-badge strong {display:block;font:400 57px/.95 Boogaloo,sans-serif;letter-spacing:-1px}
.sad .victory-badge span {display:inline-block;margin-top:9px;padding:4px 11px;background:var(--ink);color:var(--paper);font:400 18px Boogaloo,sans-serif;letter-spacing:2px;transform:rotate(3deg)}
.sad .victory-show i {position:absolute;left:var(--x);top:36%;width:9px;height:15px;background:var(--color);border:1px solid #29134655;animation:sad-confetti 2300ms cubic-bezier(.15,.55,.6,1) var(--delay) both}
.sad .victory-show i:nth-child(3n) {clip-path:polygon(50% 0,62% 33%,100% 38%,73% 61%,82% 100%,50% 77%,18% 100%,27% 61%,0 38%,38% 33%);width:20px;height:20px}
.sad .victory-show i:nth-child(3n + 1) {border-radius:50%;width:10px;height:10px}
.sad .celebrating {animation:sad-board-win 850ms ease-out both}
.sad .celebrating .cell {animation:sad-tile-wave 650ms ease-in-out var(--win-delay) both}
@keyframes sad-load {50%{transform:translateY(-12px) rotate(-9deg)}75%{transform:translateY(0) rotate(6deg)}}
@keyframes sad-stamp {0%{transform:scale(.25) rotate(18deg);opacity:0}70%{transform:scale(1.08) rotate(-9deg);opacity:1}100%{transform:scale(1) rotate(-7deg)}}
@keyframes sad-rays {from{transform:translate(-50%,-50%) rotate(-25deg) scale(.3)}to{transform:translate(-50%,-50%) rotate(35deg) scale(1.5)}}
@keyframes sad-finale {0%{opacity:0}8%,78%{opacity:1}100%{opacity:0}}
@keyframes sad-confetti {0%{transform:translate(0,0) rotate(0) scale(.2);opacity:0}15%{opacity:1}45%{transform:translate(calc(var(--dx) * .6),var(--rise)) rotate(160deg) scale(1)}100%{transform:translate(var(--dx),var(--fall)) rotate(var(--spin));opacity:0}}
@keyframes sad-board-win {35%{box-shadow:0 6px 0 #180d2b,0 0 0 5px var(--mint),0 0 38px #79f0cd88}100%{box-shadow:0 6px 0 #180d2b,0 9px 0 #ffffff15,inset 0 2px 0 #e3c8ff}}
@keyframes sad-tile-wave {40%{transform:translateY(-5px) rotate(-4deg);filter:brightness(1.15)}100%{transform:none}}
@media(prefers-reduced-motion:reduce) {
  .sad * {animation:none!important;transition:none!important}
  .sad .victory-show i,.sad .victory-burst {display:none}
  .sad .victory-show {background:none}
}

.sad .emoji-credit {text-align:center;font-size:9px;color:var(--muted)}
.sad .emoji-credit a {color:inherit;text-underline-offset:2px}

/* Persistent rule feedback, also available without colour through ! and text. */
.sad .cell.wall-error {outline:2px solid #ff344f;outline-offset:-2px;box-shadow:inset 0 0 0 3px #ff344f}
.sad .cell.isolated {background:#ffe0b3;outline:2px solid #df1010;outline-offset:-2px}
.sad .cell-warning {position:absolute;right:1%;top:1%;z-index:2;display:grid;place-items:center;width:.65em;height:.65em;min-width:10px;min-height:10px;background:#d80026;color:#fff;font:900 .65em/1 Nunito,sans-serif;border-radius:50%;pointer-events:none}
.sad .note.invalid-move {background:#fff0e7;color:#a30021;border-color:#df1010;font-weight:900;box-shadow:3px 3px 0 #5b132c}