/* À Lot · Blocs de bois — graphisme original chaud, sans assets externes */
:root {color-scheme:dark;--plum:#715363;--plum-deep:#604652;--wood:#985339;--groove:#7d412e;--wood-edge:#f6ad75;--tile:#f7be77;--tile-glow:#ffcf91;--ink:#fff9f5;--ink2:#f5dbe2;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
body{color:var(--ink);background:radial-gradient(110% 75% at 48% -20%,#956f82 0%,var(--plum) 52%,var(--plum-deep) 100%);overflow-x:hidden}
.app{min-height:100svh;max-width:650px;margin:auto;display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top,0px)) clamp(10px,3vw,24px) calc(20px + env(safe-area-inset-bottom,0px))}
.top{display:grid;grid-template-columns:52px 1fr 1fr 52px;align-items:center;gap:clamp(5px,1.6vw,12px);margin:0 auto 24px;width:min(100%,540px)}
.round{display:grid;place-items:center;width:52px;height:52px;min-height:44px;border:0;text-decoration:none;border-radius:50%;background:#fff9f5;color:#bb789b;font-size:43px;font-weight:700;box-shadow:0 4px 0 #523a49,0 7px 15px #39253255;cursor:pointer}
.round:active{transform:translateY(2px)}
.pill{background:#3c2b36;border:1px solid #aa819477;min-height:56px;padding:6px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;box-shadow:0 4px 9px #3e2a3555}
.pill span{font-size:clamp(10px,2.5vw,13px);letter-spacing:.02em;font-weight:900}
.pill strong{font-size:clamp(20px,4.5vw,28px);line-height:1.25;font-weight:900;font-variant-numeric:tabular-nums}
.record span{color:#8be0cb}
.record strong{color:#6aecd0}
h1{margin:0;font-size:clamp(19px,5.2vw,26px);text-align:center;font-weight:900;letter-spacing:.02em}
.intro{margin:5px auto 16px;max-width:480px;text-align:center;font-size:clamp(12px,3vw,15px);line-height:1.4;color:var(--ink2)}
.intro b{color:#ffe4a9}
main{display:flex;flex-direction:column;flex:1;align-items:center}
.board-shell{width:min(100%,510px);padding:8px;border-radius:17px;background:linear-gradient(135deg,#ffc18b,var(--wood-edge) 55%,#d2815a);border:2px solid #ffbd88;box-shadow:0 10px 0 #6f3a32,0 20px 35px #2f1d2673,inset 0 0 0 2px #8b4b36}
.board{aspect-ratio:1;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));gap:2.5px;border:4px solid #8b482f;background:#945239;border-radius:5px;touch-action:none;user-select:none;-webkit-user-select:none}
.cell{position:relative;min-width:0;min-height:0;border:0;background:linear-gradient(150deg,#99553b,#8b4934);padding:0;appearance:none;cursor:pointer}
.cell.alt{background:linear-gradient(150deg,#86432e,#7e3d2b)}
.cell.east{box-shadow:inset -4px 0 0 #be7251}
.cell.south{box-shadow:inset 0 -4px 0 #be7251}
.cell.east.south{box-shadow:inset -4px -4px 0 #be7251}
.cell.filled{background:linear-gradient(135deg,#ffdfa1 0%,var(--tile) 49%,#eaa966 100%);border-radius:2px;box-shadow:inset 0 2px #ffe8ba,inset 0 -3px #d89359,0 2px 3px #5d33263d}
.cell.filled.east,.cell.filled.south{box-shadow:inset 0 2px #ffe8ba,inset 0 -3px #d89359}
.cell.preview{background:linear-gradient(135deg,#fff1b8,#f2bf7c);box-shadow:inset 0 0 0 2px #fff8df,0 0 12px #ffe3a577}
.cell.preview-bad{background:#df7d7c;box-shadow:inset 0 0 0 2px #ffe4e0}
.cell:focus-visible{outline:3px solid #f9ebbc;z-index:2}
.notice{min-height:50px;width:min(100%,510px);margin:13px auto 8px;padding:8px 10px;text-align:center;color:#ffead5;font-weight:650;font-size:clamp(12px,3vw,15px);line-height:1.4}
.notice.success{color:#b8ffe8}.notice.error{color:#ffdad3}
.tray-section{margin-top:auto;width:min(100%,510px);padding-top:10px}
.tray-title{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:#f5dce3;margin-bottom:8px;font-weight:750}
.tray-title h2{margin:0;font-size:13px;letter-spacing:.1em}
.tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:118px;align-items:center}
.piece{min-height:108px;min-width:0;padding:12px 4px;display:grid;place-items:center;background:#5a414c77;border:2px solid transparent;border-radius:15px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.piece.selected{border-color:#ffe0a7;background:#4d3947;box-shadow:0 0 22px #ffd9a43b,inset 0 0 12px #ffc88c22}
.piece.empty{opacity:.25;cursor:default}
.mini{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,22px));grid-template-rows:repeat(var(--rows),22px);gap:3px;justify-content:center;align-content:center}
.mini-cell{width:22px;height:22px;border-radius:2px;background:linear-gradient(135deg,#ffd391,#f1ae6c);box-shadow:inset 0 2px #ffe1af,2px 3px 0 #36232f65}
.mini-cell.none{visibility:hidden}
.piece:focus-visible,.round:focus-visible,.primary:focus-visible{outline:3px solid #fff1cd;outline-offset:3px}
.hint{max-width:500px;margin:16px auto 22px;text-align:center;font-size:12px;line-height:1.5;color:#eed5d6}
footer{margin-top:auto;text-align:center;color:#e4c5d2;font-size:11px;padding:8px}
.overlay[hidden]{display:none!important}
.overlay{position:fixed;inset:0;background:#21141bc9;display:grid;place-items:center;padding:20px;z-index:50}
.dialog{width:min(100%,390px);padding:28px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;background:linear-gradient(145deg,#6e5261,#4b3644);border:2px solid #ffbc81;border-radius:20px;box-shadow:0 20px 70px #1c0f1b}
.dialog h2{margin:0}.dialog p{line-height:1.5}.medal{font-size:44px}.big-score{font-size:46px;color:#8ce9d0}
.primary{min-height:50px;min-width:200px;padding:0 25px;border:0;border-radius:12px;background:#f4b877;color:#382432;font-size:18px;font-weight:900;cursor:pointer}
@media(max-width:360px){.app{padding-left:7px;padding-right:7px}.top{grid-template-columns:46px 1fr 1fr 46px}.round{width:46px;height:46px}.pill{min-height:50px}.board-shell{padding:5px}.board{gap:2px}.cell.east{box-shadow:inset -3px 0 0 #be7251}.cell.south{box-shadow:inset 0 -3px 0 #be7251}.piece{min-height:92px}.mini{grid-template-columns:repeat(var(--cols),minmax(0,18px));grid-template-rows:repeat(var(--rows),18px)}.mini-cell{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* La forme suit le doigt sans se cacher dessous ; sur la grille, elle se cale sur les cases. */
.drag-ghost{position:fixed;left:0;top:0;z-index:40;display:grid;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform;filter:drop-shadow(0 6px 8px #20101495);opacity:.97}
.drag-ghost[hidden]{display:none!important}
.drag-tile{min-width:0;min-height:0;border-radius:3px;background:linear-gradient(135deg,#ffe3a8,#f3b471 70%,#dc9655);box-shadow:inset 0 2px #fff1c8,inset 0 -3px #cc8150,0 0 0 1px #713e2b7a}
.drag-ghost.over-board .drag-tile{box-shadow:inset 0 2px #fff1c8,inset 0 -3px #cc8150,0 0 0 2px #fff1bf,0 0 11px #ffe7a3b5}
.drag-ghost.invalid .drag-tile{background:linear-gradient(135deg,#f6a6a1,#da6f77);box-shadow:inset 0 2px #ffcfcb,0 0 0 1px #7a3b44}
.piece.dragging{opacity:.45}