:root{color-scheme:dark;--ink:#f5f5ff;--muted:#afb8d1;--lime:#d8fa8a;--bg:#11182b;--line:#2c3650;--pink:#ed9aaf;--gold:#f4c477;--teal:#85d6ba;--blue:#92bdf2;--purple:#baa3ed;font-family:ui-rounded,'Avenir Next','Segoe UI',system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 16%,#222b48 0,#11182b 53%,#0c1222 100%);color:var(--ink);min-height:100svh}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;touch-action:manipulation;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--lime);outline-offset:4px}button:disabled{cursor:default}a{color:inherit}.shell{height:100svh;min-height:540px;max-height:1000px;width:min(100%,470px);margin:auto;padding:max(10px,env(safe-area-inset-top)) 22px max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}header{display:flex;justify-content:space-between;align-items:center;height:48px;flex-shrink:0}.wordmark{text-decoration:none;font-size:39px;line-height:1;font-weight:850;letter-spacing:-2.3px;text-shadow:0 3px 0 #6475a244}.wordmark span{display:inline-block;color:var(--lime);font-size:31px;vertical-align:top;margin:0 0 0 4px;transform:rotate(12deg)}nav{display:flex;gap:4px}.icon-btn{display:grid;place-items:center;width:44px;height:44px;padding:9px;border:1px solid transparent;border-radius:50%;background:transparent;color:#ccd4e9;font-size:23px}.icon-btn:hover{background:#ffffff0c;border-color:#ffffff18}.icon-btn svg{width:23px;height:23px;fill:var(--bg);stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.context{display:flex;justify-content:space-between;align-items:center;min-height:26px}.eyebrow,.label{font-size:10px;font-weight:750;letter-spacing:1.7px;color:var(--muted)}.preview-pill{font-size:10px;letter-spacing:.3px;color:#e0e7ff;background:#ffffff09;border:1px solid #ffffff14;border-radius:20px;padding:5px 8px}.week-rail{padding:0;margin:0;display:flex;justify-content:space-between;gap:6px;list-style:none;min-height:35px}.week-rail li{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;color:#8f9ab7;font-size:10px;border-bottom:2px solid #ffffff0c;padding-bottom:6px}.week-rail i{font-style:normal;font-size:11px;border:1px solid #69769255;border-radius:50%;width:23px;height:23px;display:grid;place-items:center}.week-rail .active{border-color:var(--lime);color:var(--lime)}.week-rail .active i{border-color:var(--lime)}.week-rail .complete{color:var(--lime)}.week-rail .complete i{background:var(--lime);border-color:var(--lime);color:#17202c;font-weight:800}.score-row{display:flex;justify-content:space-between;align-items:center;min-height:64px}.score-value{display:flex;align-items:baseline;gap:12px}.score-value b{font-size:38px;line-height:1.1;letter-spacing:-2px;font-weight:750;font-variant-numeric:tabular-nums}.score-value span{font-size:11px;color:var(--muted)}.target{text-align:right}.target strong{display:block;font-size:29px;line-height:1.2;font-weight:700;letter-spacing:-1px}.target strong span{font-size:15px;color:var(--lime);margin-left:6px;vertical-align:middle}.board-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.board-frame{width:min(100%,calc(100svh - 385px));max-width:408px;min-width:180px;aspect-ratio:1;padding:9px;border-radius:21px;background:linear-gradient(145deg,#36445d90,#19213790);border:1px solid #ffffff19;box-shadow:0 15px 35px #0004,inset 0 1px 0 #ffffff0f}.board{display:grid;grid-template-rows:repeat(8,1fr);gap:4px;height:100%;width:100%}.board-row{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;min-height:0}.tile,.color-button{background:linear-gradient(135deg,#ffffff29 0 12%,transparent 13%),linear-gradient(315deg,#00000038 0 12%,transparent 13%),linear-gradient(150deg,#ffffff14,transparent 38%,transparent 68%,#00000014),var(--jewel);border:1px solid #ffffff52;box-shadow:inset 0 2px 1px #ffffff66,inset 0 -3px 1px #00000044,0 3px 5px #0005;color:var(--symbol-ink);position:relative}.tile{border-radius:8px;display:grid;place-items:center;min-width:0;line-height:1;font-size:clamp(11px,3.7vw,21px);font-weight:850;isolation:isolate;transition:background-color 100ms}.tile .symbol{opacity:1}.tile.owned{box-shadow:inset 0 2px 1px #ffffff55,inset 0 -3px 1px #00000022,0 0 0 1px #ffffff3a}.tile.owned .symbol{opacity:1}.tile.origin:after{content:'';position:absolute;left:2px;top:2px;width:5px;height:5px;background:#11182b;border:1px solid #ffffffb0;border-radius:50%}.tile.capture{animation:tile-pop 380ms cubic-bezier(.2,.8,.2,1)}.tile.capture:before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,#fff9 45%,transparent 60%);animation:glint 360ms both;pointer-events:none}.c0{--jewel:var(--pink);--symbol-ink:#182238}.c1{--jewel:var(--gold);--symbol-ink:#10182b}.c2{--jewel:var(--teal);--symbol-ink:#10182b}.c3{--jewel:var(--blue);--symbol-ink:#182238}.c4{--jewel:var(--purple);--symbol-ink:#182238}.progress-row{display:flex;align-items:center;gap:12px;min-height:20px;padding:0 2px}.progress-track{height:4px;flex:1;background:#ffffff12;border-radius:6px;overflow:hidden}.progress-track i{display:block;height:100%;background:var(--lime);width:0;border-radius:inherit;transition:width .15s}.progress-row span{font-size:10px;letter-spacing:1px;font-variant-numeric:tabular-nums;color:var(--muted);min-width:45px;text-align:right}.palette{display:flex;justify-content:space-between;gap:10px;min-height:62px;padding-top:3px}.color-button{flex:1;max-width:70px;height:54px;border-radius:15px;font-size:27px;font-weight:800;transition:transform 100ms}.color-button:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 1px 3px #0003}.color-button.selected:after{content:'';position:absolute;inset:-5px;border-radius:19px;border:2px solid var(--lime)}.color-button .selection{position:absolute;font-size:9px;right:4px;bottom:3px;font-weight:900}.palette.busy{pointer-events:none}.instruction{font-size:11px;color:#c3cce0;text-align:center;margin:0;min-height:16px;line-height:1.4}footer{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.2px;color:#9da9c4;min-height:20px}#saveStatus{letter-spacing:0;font-size:10px;color:#a8bcb8}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{border:1px solid #46516d;background:linear-gradient(150deg,#252f4a,#151d32 65%);color:var(--ink);width:min(430px,calc(100% - 24px));max-height:calc(100svh - 24px);padding:18px 22px 24px;border-radius:27px;box-shadow:0 24px 100px #0009}dialog::backdrop{background:#080d1cbb;backdrop-filter:blur(7px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin:-5px -7px 5px 0}.dialog-brand{font-weight:850;font-size:24px;letter-spacing:-1.4px}.dialog-brand span{font-size:18px;color:var(--lime);padding-left:3px}.dialog-head button{font-size:27px}.modal-kicker{font-size:10px;letter-spacing:1.6px;font-weight:700;color:var(--lime);text-transform:uppercase;margin:15px 0 8px}h1,h2,h3,p{margin-top:0}h2{font-size:28px;line-height:1.15;letter-spacing:-1px;margin-bottom:12px}h3{font-size:14px;letter-spacing:-.2px;margin:22px 0 12px}.body-copy{font-size:13px;line-height:1.65;color:#c8d1e6}.body-copy strong{color:var(--ink)}.result{text-align:center}.result-mark{font-size:45px;line-height:1.2;color:var(--lime);margin:10px 0}.result-number{font-size:74px;line-height:1;letter-spacing:-5px;font-weight:750;margin-top:8px}.result-number span{font-size:14px;letter-spacing:0;color:var(--muted);font-weight:500;display:block;margin:6px 0 12px}.result-delta{display:inline-block;border:1px solid #d8fa8a33;background:#d8fa8a0a;color:var(--lime);border-radius:20px;padding:7px 13px;font-size:12px;margin-bottom:15px}.streak-card{border:1px solid #ffffff16;border-radius:16px;background:#ffffff04;padding:15px;margin:5px 0 15px}.streak-card strong{font-size:15px}.mini-days{display:flex;justify-content:center;gap:8px;margin-top:12px}.mini-days span{border:1px solid #62708c55;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:11px;color:var(--muted)}.mini-days .yes{color:#15212b;background:var(--lime);border-color:var(--lime);font-weight:800}.primary,.secondary{min-height:48px;border-radius:14px;font-weight:750;font-size:14px;padding:12px 16px;width:100%;margin-top:9px}.primary{background:var(--lime);color:#1b2630;border:1px solid #edffc4;box-shadow:inset 0 1px #fff5,0 4px 15px #d8fa8a09}.primary:hover{background:#e6ffad}.secondary{color:#e5eaff;background:#ffffff06;border:1px solid #ffffff20}.quiet{background:none;border:0;color:var(--muted);font-size:12px;text-decoration:underline;min-height:44px;padding:10px;cursor:pointer}.fine{font-size:11px;line-height:1.6;color:var(--muted);margin:12px 0 0}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.stat{padding:14px 4px;text-align:center;border:1px solid #ffffff11;border-radius:13px;background:#ffffff04}.stat b{display:block;font-size:25px;font-weight:750;letter-spacing:-.9px}.stat span{display:block;font-size:10px;margin-top:6px;color:var(--muted)}.recent{display:flex;gap:5px}.recent div{flex:1;text-align:center;color:var(--muted);font-size:9px}.recent b{display:grid;place-items:center;border:1px solid #ffffff16;background:#ffffff05;min-height:36px;font-size:14px;color:var(--ink);border-radius:10px;margin:7px 0}.recent b.perfect{color:var(--lime);border-color:#d8fa8a66}.distribution{text-align:left;border-top:1px solid #ffffff12;margin-top:20px;padding-top:1px}.bar-row{display:grid;grid-template-columns:34px 1fr 39px;align-items:center;gap:8px;margin:8px 0;font-size:11px;color:var(--muted)}.bar-track{height:20px;position:relative;border-radius:5px;background:#ffffff06;overflow:hidden}.bar-track i{display:block;height:100%;background:#7789b6;border-radius:5px;min-width:0}.bar-row.you{color:var(--lime);font-weight:750}.bar-row.you i{background:var(--lime)}.bar-row em{font-style:normal;text-align:right}.setting{display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-bottom:1px solid #ffffff11;gap:18px}.setting span{font-size:14px}.setting small{display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:5px}.switch{appearance:none;flex-shrink:0;width:46px;height:28px;border-radius:20px;border:1px solid #697691;background:#3b4662;position:relative;cursor:pointer;margin:0}.switch:after{content:'';position:absolute;width:20px;height:20px;top:3px;left:3px;border-radius:50%;background:white;transition:transform .15s}.switch:checked{background:var(--lime);border-color:var(--lime)}.switch:checked:after{transform:translateX(18px);background:#243338}.switch:disabled{opacity:.4}.how-steps{padding-left:22px;font-size:13px;line-height:1.7;color:#c9d2e9}.how-steps li{padding:5px 0 7px 4px}.how-steps strong{color:white}.symbol-key{display:flex;gap:7px;margin:17px 0}.symbol-key span{flex:1;background:var(--jewel);color:var(--symbol-ink);border-radius:10px;text-align:center;font-size:23px;padding:8px 0;font-weight:800}.badge{position:relative;display:grid;place-items:center;margin:14px auto 18px;width:122px;height:132px;color:#182238;background:linear-gradient(135deg,#eaffbd,#b7e964);clip-path:polygon(50% 0,94% 24%,94% 73%,50% 100%,6% 73%,6% 24%);filter:drop-shadow(0 0 18px #d8fa8a33)}.badge b{font-size:59px;letter-spacing:-5px}.badge span{position:absolute;bottom:30px;font-size:9px;font-weight:850;letter-spacing:1.5px}.badge .star{position:absolute;top:16px;font-size:16px}.award-strip{display:flex;gap:12px;align-items:center;background:#d8fa8a0a;border:1px solid #d8fa8a33;border-radius:14px;padding:14px;margin:14px 0}.award-strip i{font-style:normal;font-size:28px;color:var(--lime)}.award-strip strong{font-size:13px}.award-strip small{font-size:11px;color:var(--muted);display:block;margin-top:4px}#toast{position:fixed;z-index:20;bottom:max(30px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.18s;max-width:calc(100% - 32px);width:max-content;border:1px solid #61718c;background:#25314a;padding:13px 18px;border-radius:14px;box-shadow:0 8px 40px #0006;font-size:12px}#toast.show{opacity:1;transform:translate(-50%,0)}#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}#confetti i{position:absolute;width:6px;height:10px;background:var(--jewel);border-radius:2px;animation:confetti 1300ms ease-out both}.strong-symbols .tile .symbol{opacity:1;-webkit-text-stroke:.35px currentColor}.muted-motion .capture,.muted-motion .capture:before,.muted-motion #confetti i{animation:none}.muted-motion .progress-track i{transition:none}
@keyframes tile-pop{0%{transform:scale(.9);filter:brightness(1.1)}40%{transform:scale(1.13);filter:brightness(1.18);z-index:2}100%{transform:scale(1);filter:brightness(1)}}@keyframes glint{from{opacity:1;transform:translateX(-12%)}to{opacity:0;transform:translateX(12%)}}@keyframes confetti{0%{transform:translateY(-30px) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(var(--drift),70vh) rotate(450deg);opacity:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-height:700px){.shell{gap:5px;padding-top:8px}.context{min-height:24px}.score-row{min-height:56px}.board-frame{width:min(100%,calc(100svh - 350px));padding:7px;border-radius:18px}.score-value b{font-size:34px}.palette{min-height:58px}.color-button{height:50px}.tile{border-radius:6px}.board,.board-row{gap:3px}}@media(min-width:700px){.shell{padding-top:24px;padding-bottom:22px}.board-frame{width:min(100%,calc(100svh - 400px))}body{background:radial-gradient(ellipse at 50% 35%,#253052 0,#10172b 58%,#0b1020 100%)}.shell{border-left:1px solid #ffffff06;border-right:1px solid #ffffff06}}@media(max-width:350px){.shell{padding-left:14px;padding-right:14px}.week-rail{gap:3px}.week-rail li{gap:2px}.palette{gap:8px}.score-value span{font-size:10px}} 

[hidden]{display:none!important}.play-puzzle{margin:3px 0 0;min-height:54px}.share-preview{display:block;width:100%;max-height:46svh;object-fit:contain;margin:16px auto;border-radius:14px}.save-image{display:block;text-decoration:none;text-align:center}

.connection-note{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted)}.connection-note .quiet{padding:4px 8px}.recent{flex-wrap:wrap}.recent>div{min-width:38px}.board-area #loadingPuzzle{text-align:center}

.attempt-rail{display:flex;gap:8px;min-height:30px}.attempt-rail>span{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border-bottom:2px solid #ffffff14;padding-bottom:5px;font-size:12px;color:var(--muted)}.attempt-rail small{font-size:10px}.attempt-rail .active{color:var(--ink);border-color:var(--lime)}.attempt-rail .complete{color:var(--lime)}.attempt-results{display:flex;justify-content:center;gap:10px;margin:12px 0}.attempt-results span{flex:1;font-size:11px;color:var(--muted)}.attempt-results strong{display:block;color:var(--ink);font-size:14px;margin-top:5px}.score-table{width:100%;border-collapse:collapse;font-size:13px}.score-table td,.score-table th{padding:9px 3px;border-bottom:1px solid var(--line);text-align:left}.score-table th:last-child{text-align:right;color:var(--lime)}.score-table small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.rank-you{background:#d8fa8a0d}.recent-day{flex:1;min-width:44px;padding:0 2px;background:none;border:0;color:var(--muted);font-size:9px}.recent-day small{font-size:10px;font-weight:400}.solution-board{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;aspect-ratio:1;margin:18px 0}.solution-board .tile{font-size:18px}.solution-controls{display:flex;gap:10px}.solution-controls button{width:50%}.solution-controls button:disabled{opacity:.35}

.attempt-rail{font-size:10px;letter-spacing:1.5px;color:var(--muted);align-items:center;min-height:25px;border-bottom:1px solid var(--line)}

/* v3.2: compact personal stats, soft jewels, accessible overflow on small/zoomed screens. */
.tile,.color-button{background:linear-gradient(135deg,#ffffff28 0 12%,transparent 13%),linear-gradient(315deg,#00000016 0 12%,transparent 13%),var(--jewel);box-shadow:inset 0 2px 1px #ffffff55,inset 0 -2px 1px #00000024,0 2px 4px #0003}
dialog.compact-stats,dialog.compact-results{padding:12px 18px 16px;max-height:calc(100dvh - 20px);overflow-y:auto}
.compact-stats .dialog-head,.compact-results .dialog-head{margin-bottom:0}
.compact-stats .modal-kicker,.compact-results .modal-kicker{margin:3px 0 5px;font-size:10px}
.compact-stats h2,.compact-results h2{font-size:26px;margin-bottom:10px}
.compact-stats .stats-grid{gap:6px;margin:10px 0 14px}
.compact-stats .stat{padding:9px 3px;border-radius:11px}
.compact-stats .stat b{font-size:24px;line-height:1.1}
.compact-stats .stat span{font-size:11px;margin-top:4px}
.personal-distribution{text-align:left}
.personal-distribution h3{font-size:14px;margin:8px 0 9px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.personal-distribution h3 span{font-size:10px;color:var(--muted);font-weight:500;letter-spacing:0}
.personal-bars .bar-row{grid-template-columns:25px 1fr 44px;gap:7px;margin:6px 0;font-size:12px}
.personal-bars .bar-track{height:19px}.personal-bars .bar-track i{background:#baa3ed}.personal-bars .you i{background:var(--lime)}
.personal-bars.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.personal-bars.two-columns .bar-row{grid-template-columns:23px 1fr 40px;font-size:11px;gap:4px}
.distribution-caption{font-size:10px;color:var(--muted);margin:8px 0 0}
.recent-summary{display:flex;align-items:center;gap:6px;margin:12px 0 3px;font-size:10px;color:var(--muted)}
.recent-score{flex:1;text-align:center;border-radius:7px;background:#ffffff07;padding:6px 0;font-size:12px;color:var(--ink)}.recent-score.perfect{color:var(--lime)}
.streak-award{font-size:11px;color:var(--lime);margin:8px 0 0}.empty-stats{margin:5px 0 9px}
.compact-results .result-number{font-size:68px;margin-top:12px}.compact-results .result-delta{margin-bottom:8px}.compact-results .streak-card{padding:11px;margin:4px 0 8px}
.compact-results .fine{margin-top:5px}.compact-results .quiet{margin-top:3px}.compact-stats .secondary{margin-top:12px}
@media(max-height:650px){.compact-stats .stat{padding:6px 3px}.compact-stats .stats-grid{margin:7px 0 10px}.personal-bars .bar-row{margin:4px 0}.personal-bars .bar-track{height:17px}.compact-stats h2{font-size:23px}.recent-summary{margin-top:8px}}