:root{
  --bench:#1E242B; --bench-2:#28313B; --bench-line:#3A4653;
  --ink:#E9E5DD; --ink-dim:#95A1AE;
  --sand:#D9C4A0; --ochre:#C69B5B; --umber:#7A5230; --soil:#3F2E20; --bone:#F0E7D2;
  --brick:#B4593A; --water:#3C8FD6; --water-2:#2A6CA8; --steel:#4A525C;
  --slate:#22332C; --chalk:#8FE0B8; --chalk-dim:#4E7A66;
  --pad:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{
  font:400 16px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bench); color:var(--ink);
  font-variant-numeric:tabular-nums;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}

/* --- chrome de jeu --- */
.top{display:flex;align-items:center;gap:10px;padding:10px var(--pad);min-height:52px}
.top .back{width:38px;height:38px;border-radius:10px;background:#ffffff14;display:grid;place-items:center;font-size:20px;line-height:1}
.top h1{font-size:15px;font-weight:600;margin:0;letter-spacing:.01em}
.top .spacer{flex:1}
.counter{font-size:14px;color:var(--ink-dim)}
.counter b{color:var(--ink);font-weight:600}
.rule{padding:0 var(--pad) 8px;font-size:14px;color:var(--ink-dim);min-height:20px}
.stage{flex:1;display:grid;place-items:center;padding:4px var(--pad)}
.dock{padding:10px var(--pad) calc(14px + env(safe-area-inset-bottom))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 16px;border-radius:12px;background:#ffffff16;font-size:15px;font-weight:500}
.btn:disabled{opacity:.35}
.btn.primary{background:var(--ink);color:#1A2028;font-weight:600}
.row{display:flex;gap:8px}
.row>*{flex:1}

/* --- overlay --- */
.veil{position:fixed;inset:0;background:#12171Ccc;backdrop-filter:blur(6px);
  display:block;padding:16px 12px calc(16px + env(safe-area-inset-bottom));z-index:20;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
.card{background:var(--bench-2);border:1px solid var(--bench-line);border-radius:18px;
  padding:22px;max-width:380px;width:100%;margin:8px auto;
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;touch-action:pan-y}
.card h2{margin:0 0 6px;font-size:20px}
.card p{margin:0 0 16px;color:var(--ink-dim);font-size:15px}
.stars{font-size:30px;letter-spacing:6px;margin:4px 0 12px}
.hidden{display:none!important}

/* --- hub --- */
.hub-head{padding:34px var(--pad) 18px}
.hub-head h1{font-size:26px;line-height:1.15;margin:0 0 10px;font-weight:600}
.hub-head p{margin:0;color:var(--ink-dim);font-size:15px;max-width:44ch}
.list{padding:0 var(--pad);display:flex;flex-direction:column;gap:12px}
.tile{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;
  border:1px solid var(--bench-line);background:var(--bench-2);text-decoration:none;color:inherit}
.tile .chip{width:52px;height:52px;border-radius:13px;flex:none}
.tile h3{margin:0;font-size:17px;font-weight:600}
.tile span{font-size:13.5px;color:var(--ink-dim)}
.tile .state{margin-left:auto;font-size:13px;color:var(--ink-dim);text-align:right}
.tile.done{opacity:.62}
.foot{padding:22px var(--pad) 40px;color:var(--ink-dim);font-size:13px}
textarea,input[type=text]{width:100%;background:#0F141A;border:1px solid var(--bench-line);
  color:var(--ink);border-radius:11px;padding:11px;font:inherit;resize:vertical;-webkit-user-select:text;user-select:text}
label{display:block;font-size:14.5px;margin:16px 0 7px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{padding:9px 13px;border-radius:11px;border:1px solid var(--bench-line);font-size:14.5px}
.opt[aria-pressed=true]{background:var(--ink);color:#1A2028;border-color:var(--ink)}
canvas{display:block;touch-action:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}