:root{color-scheme:dark;--bg:#210e36;--lime:#d4ed82;--line:#744b9d;--muted:#ba9cd2;font-family:ui-rounded,'Arial Rounded MT Bold',system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f7f0ff;overscroll-behavior:none;background-image:radial-gradient(ellipse at 0 0,#4b265e66,transparent 62%)}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,summary:focus-visible{outline:3px solid #fff;outline-offset:3px}button:disabled{opacity:.3;cursor:default}.sprite{position:absolute;width:0;height:0}svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}.app{max-width:540px;margin:auto;height:100vh;height:100dvh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}header{flex:none;height:80px;padding:16px 20px;display:flex;align-items:center}.pause{border:0;width:48px;height:48px;border-radius:18px;color:#ffd17b;background:linear-gradient(145deg,#805239,#56305d);box-shadow:inset 0 1px 0 #ffdb8a55,0 5px 18px #12071f44}.pause svg{width:25px;height:25px;stroke-width:4}.play{flex:1;overflow:auto;overscroll-behavior:contain;position:relative;scrollbar-width:thin;scrollbar-color:#6a4289 transparent;padding:12px 12px 32px}.board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);width:100%;align-content:start}.cell{aspect-ratio:1/1.08;min-width:0;padding:0;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;color:var(--lime);font-weight:900;font-size:clamp(26px,8.5vw,48px);line-height:1;letter-spacing:-.04em;transition:background .15s,transform .15s;text-shadow:0 2px 0 #a1b75922}.cell.empty{color:transparent;background:#13091d12;pointer-events:none}.cell.selected{background:#d4ed82;color:#2e1742;border-radius:8px;text-shadow:none;box-shadow:0 0 18px #d4ed8222}.cell.hinted{background:#d4ed822b;box-shadow:inset 0 0 0 3px #d4ed82;border-radius:8px}.cell.bad{animation:shake .2s 2;background:#ff739b44}.board.targeting .cell:not(.empty){background:#b98cff10}.board.targeting .cell:not(.empty):active{background:#b98cff66}footer{flex:none;padding:0 8px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(#210e3600,#180a29 20%);z-index:1}#status{text-align:center;font-size:12px;min-height:32px;margin:0 0 7px;padding:6px 12px;color:#d1b9df;line-height:20px}nav{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}nav button{position:relative;border:0;background:none;display:flex;align-items:center;flex-direction:column;gap:9px;padding:10px 0 0;border-radius:16px}nav button.active{background:#ffffff12}nav svg{width:35px;height:35px;filter:drop-shadow(0 3px 0 #0004)}nav span{font-size:11px;font-weight:750}nav small{position:absolute;top:4px;right:6px;font-size:13px;line-height:18px;border-radius:10px;background:#210e36;padding:0 3px}nav button:active{transform:scale(.94)}.cyan{color:#40d8f4}.yellow{color:#ffc563}.mint{color:#7ce8cb}.pink{color:#ff799c}.lavender{color:#c58aff}dialog{width:calc(100% - 36px);max-width:420px;border:1px solid #765197;background:#2a163f;border-radius:26px;padding:25px;color:#f9f2ff;box-shadow:0 30px 100px #0008;max-height:85dvh;overflow:auto}dialog::backdrop{background:#10051dcc;backdrop-filter:blur(8px)}dialog h1{font-size:36px;letter-spacing:-1px;margin:20px 0 10px}dialog h2{font-size:23px;margin:6px 0 20px}dialog p{font-size:14px;line-height:1.65;color:#d1b9df}.eyebrow{color:var(--lime);letter-spacing:3px;font-size:10px;font-weight:800}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head button{font-size:28px;width:36px;height:36px;padding:0;border:0;background:none}.dialog-head h2{margin:0}dialog>button,#win button{width:100%;border:1px solid #755393;border-radius:14px;padding:14px;margin:5px 0;background:transparent;font-weight:700}.primary{background:var(--lime)!important;color:#2a1739!important;border-color:var(--lime)!important}details{border-top:1px solid #674581;margin-top:18px;padding-top:18px}summary{cursor:pointer;font-size:14px;font-weight:650}.fine{font-size:11px!important;text-align:center;margin-top:24px!important}#win{text-align:center;padding:60px 24px}#win>span{font-size:80px;color:var(--lime)}#win h1{font-size:30px}#win p{color:var(--muted)}@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@media(min-width:600px){body{background-color:#150a23}.app{border-inline:1px solid #51336755}nav span{font-size:13px}}@media(max-height:600px){header{height:62px;padding-block:7px}nav svg{width:28px;height:28px}nav button{gap:5px}footer{padding-bottom:calc(8px + env(safe-area-inset-bottom))}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.board.targeting .cell.selected{background:var(--lime);color:#2e1742}

.board[hidden]{display:none}

.cell.empty.ghost{color:#d4ed8238;text-shadow:none}

.number{display:block;pointer-events:none}

/* Disabled number cells retain full-strength grid borders. Only the glyph fades. */
.cell:disabled{opacity:1;cursor:default}
.play{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 110px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 110px),transparent 100%)}
/* Keep action announcements for assistive technology without a visible caption. */
#status{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.play{overflow-anchor:none}

footer{position:relative}
#status.notice{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);height:auto;min-height:0;padding:12px 18px;margin:0;overflow:visible;clip-path:none;white-space:normal;border:1px solid #765197;border-radius:15px;background:#382047;color:#f7f0ff;box-shadow:0 8px 28px #10051d66;font-size:14px;line-height:1.4}

:root{--line:#8054a2ad}
.board{border-top-width:.65px;border-left-width:.65px}
.cell{position:relative;border-right-width:.65px;border-bottom-width:.65px;color:var(--digit,var(--lime))}
.cell.empty.ghost{color:var(--digit,var(--lime))}
.cell.empty.ghost .number{opacity:.22}
.cell.selected{color:#2e1742}
.grid-dot{position:absolute;right:-2px;bottom:-2px;width:4px;height:4px;border-radius:50%;pointer-events:none;z-index:2}
.grid-dot.diamond{width:3.5px;height:3.5px;border-radius:0;transform:rotate(45deg)}
nav svg{width:clamp(44px,12vw,58px);height:clamp(44px,12vw,58px);filter:drop-shadow(0 3px 2px #08031255);stroke-width:0;overflow:visible}
nav button{gap:6px;padding-top:8px}
nav button:disabled{opacity:.45}
/* Scale the artwork and captions by 75%; preserve the buttons' tap areas. */
nav svg{width:clamp(33px,9vw,43.5px);height:clamp(33px,9vw,43.5px)}
nav span{font-size:8.25px}
@media(min-width:600px){nav span{font-size:9.75px}}

/* The gradient reaches its final color before the action bar and continues through the safe area. */
html{min-height:100%;background:#10051b;color-scheme:dark}
body{min-height:100vh;min-height:100dvh;background:#10051b;background-image:radial-gradient(ellipse 100vw 65dvh at top left,#4b265e66,transparent 100%),linear-gradient(to bottom,#210e36 0%,#210e36 55dvh,#10051b 80dvh);background-repeat:no-repeat;background-attachment:fixed}
footer{background:#10051b}