@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#242b27;background:#faf8f3;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.shell{max-width:640px;margin:auto;padding:0 28px}header{display:flex;align-items:center;justify-content:space-between;padding:28px 0 25px;border-bottom:1px solid #e2e2d9}.logo{font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:700;letter-spacing:-2px;color:inherit;text-decoration:none}.logo>span:first-child{display:inline-block;transform:rotate(-13deg)}.dot{color:#668452}.help{width:34px;height:34px;border:1px solid #d7dacf;border-radius:50%;background:transparent;font-size:17px;color:#65715f}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #adbf64;outline-offset:4px}.topline{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:30px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#7b8278}.score{font-size:16px;font-weight:700}.score small{font-size:11px;font-weight:400;color:#9a9d92}.progress{display:flex;gap:6px;margin-top:17px}.progress span{height:4px;flex:1;background:#e4e6dc;border-radius:5px}.progress .active{background:#b4c475}.progress .finished{background:#4d6b44}.heading{margin-top:35px}.round-label{font-size:10px;font-weight:700;letter-spacing:1.4px;color:#7d8379}.round-label span{margin-left:14px;color:#5e7850;letter-spacing:.3px}h1,h2{font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:-1.5px;line-height:1.12;font-weight:600}h1{font-size:38px;margin:13px 0}p{font-size:14px;color:#7c8378;line-height:1.6}.heading p{margin:0}.rank-direction{display:flex;justify-content:space-between;margin:26px 0 12px;text-transform:uppercase;letter-spacing:1.2px;font-size:9px;font-weight:700;color:#81897b}.cards{padding:0;margin:0;list-style:none;display:flex;flex-direction:column;gap:9px}.card{display:flex;align-items:center;gap:13px;padding:15px 14px;background:#fffefa;border:1px solid #dedfd5;border-radius:12px;box-shadow:0 2px 0 #e8e8df;min-height:74px;touch-action:none;user-select:none}.card.dragging{border-color:#688153;background:#f0f4e5;box-shadow:0 5px 18px #31432c24;position:relative;z-index:2}.position{font-size:11px;color:#959d8d;width:11px}.emoji{font-size:25px;width:32px;text-align:center}.card-name{font-size:15px;font-weight:600;flex:1}.card-name small{display:block;font-size:12px;font-weight:400;color:#5e7850;margin-top:5px}.grip{font-size:24px;color:#b8bdae}.move{display:flex;flex-direction:column;gap:1px}.move button{border:0;background:transparent;color:#78836c;font-size:14px;padding:0 8px;height:22px}.move button:disabled{opacity:.25;cursor:default}.feedback{font-weight:700;font-size:19px;width:22px;text-align:center}.feedback.correct{color:#538150}.feedback.up{color:#aa8b3c}.feedback.down{color:#5d8eac}.status{text-align:center;color:#7d8576;font-size:12px;min-height:20px;margin:19px 0 12px}.status strong{color:#4e6d42}.attempts{display:flex;align-items:center;justify-content:center;gap:5px;margin:17px 0}.attempts>span{width:6px;height:6px;border-radius:50%;background:#6e8659}.attempts .used{background:#dcdfd1}.attempts small{margin-left:6px;font-size:10px;color:#858b7e}.primary{display:flex;justify-content:space-between;align-items:center;width:100%;padding:18px 22px;border:0;border-radius:12px;background:#304a35;color:#fffdf5;font-size:14px;font-weight:600;box-shadow:0 3px 0 #203323}.primary:hover{background:#3e5a40}.primary span{font-size:20px}.legend{display:flex;justify-content:center;gap:22px;margin-top:19px;font-size:10px;color:#93998c}footer{text-align:center;font-size:10px;color:#a2a799;margin:36px 0 24px;letter-spacing:.2px}.source-note{font-size:11px;text-align:center;margin-bottom:24px}.revealed .card{touch-action:auto;background:#f4f6ec;border-color:#dbe2ce}.results{text-align:center;padding-top:35px}.result-icon{font-size:48px;color:#7d9657;margin:17px}.results h1{font-size:36px}.big-score{font-family:'Space Grotesk',sans-serif;font-size:64px;letter-spacing:-3px;margin:25px 0;color:#304a35}.big-score small{display:block;letter-spacing:2px;font-family:'DM Sans',sans-serif;font-size:9px;color:#969c8d;margin-top:5px}.stats{display:flex;justify-content:space-around;padding:22px 0;border-top:1px solid #dedfd5;border-bottom:1px solid #dedfd5}.stats strong{display:block;font-size:25px;font-family:'Space Grotesk',sans-serif}.stats small{font-size:8px;letter-spacing:1px;color:#909889}.round-results{margin:22px 0}.round-results>div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;padding:10px 0}.round-results>div>span:first-child{width:100px;text-align:left;color:#7e8875}.mini-grid{font-size:12px;letter-spacing:2px}.round-results strong{width:45px;text-align:right}details{font-size:12px;color:#7d8576}textarea{width:100%;height:180px;margin-top:12px;border:1px solid #d4d9c9;border-radius:8px;background:#fffefa;padding:12px;font:12px monospace}.tomorrow{font-size:11px;margin-top:24px}dialog{max-width:440px;width:calc(100% - 32px);border:1px solid #dedfd5;border-radius:20px;padding:32px;background:#faf8f3;color:#242b27}dialog::backdrop{background:#172b2080;backdrop-filter:blur(4px)}dialog h2{font-size:32px}.close{float:right;border:0;background:none;font-size:24px;color:#74816b}@media(max-width:420px){.shell{padding:0 20px}header{padding:21px 0}h1{font-size:32px}.heading{margin-top:27px}.card{gap:9px;padding:12px 10px}.card-name{font-size:14px}.topline .eyebrow{letter-spacing:1px;font-size:9px}.mini-grid{letter-spacing:0}.round-results>div>span:first-child{width:84px}}
.header-actions{display:flex;align-items:center;gap:8px}.sound-toggle{width:34px;height:34px;padding:0;border:1px solid #d7dacf;border-radius:50%;background:transparent;color:#65715f;font-size:15px}.rank-endpoint{display:block;width:100%;margin:18px 0 22px;padding:9px 12px;border-radius:7px;background:#eef1e5;color:#687563;font-size:11px;text-align:left}.rank-endpoint strong{color:#405b3e}.rank-hint{margin:8px 0;text-align:center;font-size:11px;color:#858d80}.card.is-correct{border-color:#a8c29b;background:#eff7e9;box-shadow:0 2px 0 #d8e7d0}.card.check-pop{animation:check-pop .42s cubic-bezier(.2,.8,.25,1) both;animation-delay:var(--delay,0ms)}.card.correct-pop{animation:correct-pop .6s cubic-bezier(.2,.9,.25,1) both;animation-delay:var(--delay,0ms)}.round-enter h1,.round-enter h2,.round-enter .round-label,.round-enter p{animation:round-enter .45s ease-out both}.round-enter .card{animation:round-card .45s ease-out both;animation-delay:calc(var(--delay,0ms) + 80ms)}.celebration{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}.confetti{position:fixed;top:20%;left:50%;width:8px;height:13px;background:var(--color,#b4c475);animation:confetti-fall 1.1s ease-out forwards;transform-origin:center;transform:translate(-50%,-50%)}.score-pop{animation:score-pop .65s cubic-bezier(.2,.9,.25,1) both}.primary{transition:background .2s ease,transform .15s ease,box-shadow .15s ease}.primary:hover{transform:translateY(-1px)}.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #203323}
@keyframes check-pop{0%{transform:scale(.97);opacity:.65}100%{transform:scale(1);opacity:1}}@keyframes correct-pop{0%{transform:scale(.96);box-shadow:0 0 0 transparent}45%{transform:scale(1.025);box-shadow:0 0 20px #9fc78a99}100%{transform:scale(1);box-shadow:0 2px 0 #d8e7d0}}@keyframes round-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes round-card{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes confetti-fall{0%{opacity:1;transform:translate(-50%,-50%) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--spin,540deg))}}@keyframes score-pop{0%{opacity:0;transform:scale(.8)}65%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.celebration{display:none}}
.header-actions{display:flex;align-items:center;gap:8px}.sound-toggle{width:34px;height:34px;padding:0;border:1px solid #d7dacf;border-radius:50%;background:transparent;color:#65715f;font-size:15px}

.sound-toggle{width:auto;min-width:96px;border-radius:18px;padding:0 12px;font-size:11px;white-space:nowrap}.rank-endpoint{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 10px}.rank-endpoint.bottom{margin:12px 0 18px}.rank-hint{margin:0 0 13px;line-height:1.5}
.replay{margin-top:22px;background:#e8eddf;color:#304a35;box-shadow:0 3px 0 #d3dcc6}.replay:hover{background:#dce6ce}
.cards{position:relative}.drag-placeholder{border:2px dashed #a8b990;border-radius:12px;background:#e9efdf;flex-shrink:0;list-style:none}.card.dragging{pointer-events:none;transform:rotate(1deg);cursor:grabbing;opacity:1}.card{cursor:grab}.card button{cursor:pointer}
/* Glazed ceramic tiles and contrasting grout, in both palettes. */
:root{--page:#f5f1e9;--ink:#293b34;--tile:#fffdf7;--grout:#d9d8cb;--edge:#d0d2c2;--muted:#657364;--accent:#304a35;--soft:#e9eedf;color:var(--ink);background:var(--page);color-scheme:light}
body{background-image:linear-gradient(var(--grout) 1px,transparent 1px),linear-gradient(90deg,var(--grout) 1px,transparent 1px);background-size:64px 64px;background-attachment:fixed}
.shell{background:var(--page);box-shadow:0 0 0 1px var(--grout);min-height:100vh}
.card{background:linear-gradient(135deg,#ffffffa0,transparent 55%),var(--tile);border:1px solid var(--edge);border-radius:9px;box-shadow:inset 0 2px 0 #ffffffb0,inset 0 -3px 0 #00000008,0 4px 0 var(--grout),0 5px 9px #2332250d}
.position{border:1px solid var(--edge);border-radius:4px;width:23px;height:23px;display:grid;place-items:center;background:var(--soft);color:var(--muted);flex-shrink:0}
.emoji{width:36px;display:grid;place-items:center}.element-icon{width:32px;height:35px;border:1px solid #91a893;border-radius:4px;background:#e4efe1;color:#355a3d;font-size:17px;line-height:1.1;display:flex;flex-direction:column;align-items:center;justify-content:center}.element-icon small{font-size:8px;align-self:flex-start;margin-left:4px}
.theme-toggle{width:34px;height:34px;padding:0;border:1px solid var(--edge);border-radius:9px;background:var(--tile);color:var(--ink);font-size:21px}.sound-toggle,.help{border-radius:9px;background:var(--tile);color:var(--muted);border-color:var(--edge)}
.rank-endpoint{background:var(--soft);border:1px solid var(--edge);border-radius:5px;color:var(--muted)}.rank-endpoint strong{color:var(--ink)}
[data-theme=dark]{--page:#19221f;--ink:#e6eade;--tile:#2d3933;--grout:#111a16;--edge:#4b5a4e;--muted:#b0bba9;--accent:#b8cf94;--soft:#2b392b;color-scheme:dark}
[data-theme=dark] .card{background:linear-gradient(135deg,#ffffff0a,transparent 55%),var(--tile);box-shadow:inset 0 2px 0 #ffffff0d,inset 0 -3px 0 #00000030,0 4px 0 var(--grout),0 5px 9px #00000030}
[data-theme=dark] .eyebrow,[data-theme=dark] p,[data-theme=dark] .round-label,[data-theme=dark] .rank-hint,[data-theme=dark] .status,[data-theme=dark] .legend,[data-theme=dark] .attempts small,[data-theme=dark] footer,[data-theme=dark] .round-results>div>span:first-child,[data-theme=dark] details{color:var(--muted)}
[data-theme=dark] .round-label span,[data-theme=dark] .card-name small,[data-theme=dark] .status strong,[data-theme=dark] .feedback.correct{color:#b6d898}
[data-theme=dark] header,[data-theme=dark] .stats{border-color:var(--edge)}[data-theme=dark] .progress span{background:#3c4b3e}[data-theme=dark] .progress .finished{background:#96b27f}[data-theme=dark] .progress .active{background:#d1dd9b}
[data-theme=dark] .card.is-correct,[data-theme=dark] .revealed .card{background:#30452e;border-color:#739466;box-shadow:0 4px 0 #152414}[data-theme=dark] .card.dragging{background:#3b4d35;border-color:#bad893}[data-theme=dark] .drag-placeholder{background:#243223;border-color:#6c865b}
[data-theme=dark] .primary{background:#aec78d;color:#1c2d1d;box-shadow:0 3px 0 #718959}[data-theme=dark] .primary:hover{background:#c2d9a5}[data-theme=dark] .replay{background:#354831;color:#d4e4c3}[data-theme=dark] .big-score{color:#c5dda6}[data-theme=dark] .move button,[data-theme=dark] .grip{color:#b8c3ac}[data-theme=dark] dialog,[data-theme=dark] textarea{background:var(--page);color:var(--ink);border-color:var(--edge)}
@media(max-width:420px){.header-actions{gap:6px}.sound-toggle{min-width:82px;padding:0 8px}.position{width:20px;height:22px}.card{gap:8px}}
.element-icon small{font-size:5px;letter-spacing:.2px;margin:0 0 3px;align-self:center}
.mode-bar{display:flex;gap:6px;background:var(--soft);padding:5px;border:1px solid var(--edge);border-radius:10px;margin-top:20px}.mode-bar button{flex:1;border:0;border-radius:6px;background:transparent;color:var(--muted);padding:10px;font-size:12px;font-weight:600}.mode-bar button[aria-pressed=true]{background:var(--tile);color:var(--ink);box-shadow:0 2px 4px #00000015}
.scoring-rules{border:1px solid var(--edge);background:var(--soft);border-radius:8px;padding:12px 14px;margin:14px 0}.scoring-rules summary{cursor:pointer;font-weight:600;color:var(--ink)}.scoring-rules p{font-size:12px}.score-tiers{display:flex;justify-content:space-between;gap:8px;font-size:11px}.score-tiers strong{display:block;color:var(--ink);font-size:16px;margin-top:4px}.next-score{text-align:center;font-size:12px;color:var(--muted);margin-top:18px}.next-score strong{color:var(--ink)}
.mini-grid{display:flex;gap:5px;letter-spacing:0;align-items:center}.result-tile{display:block;width:17px;height:17px;border:1px solid #ffffff40;border-radius:4px;box-shadow:inset 0 2px 0 #ffffff38,inset 0 -2px 0 #00000012,0 2px 0 var(--grout);background:#8aa8b5}.result-tile.correct{background:#92ac7a}.result-tile.up{background:#c8b27d}.result-tile.down{background:#7e9cab}[data-theme=dark] .result-tile.correct{background:#799567}[data-theme=dark] .result-tile.up{background:#b09c6a}[data-theme=dark] .result-tile.down{background:#658796}.round-results>div{padding:12px 0;border-bottom:1px solid var(--edge)}.round-results>div:last-child{border-bottom:0}#mode-notice:empty{display:none}@media(max-width:420px){.mini-grid{gap:4px}.result-tile{width:15px;height:15px}}
.score-curve{margin:24px 0;padding:18px 14px;background:var(--soft);border:1px solid var(--edge);border-radius:10px;text-align:left}.score-curve h2{font-size:18px;letter-spacing:-.4px;margin:0}.score-curve p{font-size:11px}.score-curve small{font-size:9px;color:var(--muted)}.score-curve svg{width:100%;display:block}.curve-axis{stroke:var(--edge)}.curve-bar{fill:#8eaa79;opacity:.45}.curve-line{fill:none;stroke:#8eaa79;stroke-width:2;stroke-linejoin:round}.curve-marker{stroke:#b79f67;stroke-width:2;stroke-dasharray:3 3}.curve-text{fill:var(--ink);font:9px sans-serif}