:root{--paper:#f2ead5;--surface:#fffaf0;--ink:#243b34;--muted:#6f7668;--green:#234d47;--line:#d8d5bc;--gold:#dfb143;--verm:#e95736;--shadow:#d7cdb5;
--c0:#267b91;--c1:#c64d36;--c2:#846b9d;--c3:#357c63;--c4:#ae7928;--warn:#c64d36;--dot:#cfc9ab;--btn:#f1e6c9;--btn-line:#d8c9a7;
--sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom)}
[data-theme=night]{--paper:#17231f;--surface:#1f2f29;--ink:#eaf0e4;--muted:#a3b2a8;--green:#9fd2b6;--line:#38493f;--gold:#e3bb57;--shadow:#0e1714;
--c0:#63b7cc;--c1:#ee8a76;--c2:#b9a2d6;--c3:#6fc7a0;--c4:#e0b15c;--warn:#ee8a76;--dot:#3b4d44}
[data-theme=contrast]{--paper:#fff;--surface:#fff;--ink:#000;--muted:#222;--green:#000;--line:#000;--gold:#000;--shadow:#000;--verm:#000;--c0:#000;--c1:#000;--c2:#000;--c3:#000;--c4:#000;--warn:#000;--dot:#999}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font:16px/1.4 'Avenir Next','Trebuchet MS','Noto Sans','Noto Sans Devanagari',system-ui,sans-serif;overscroll-behavior:none}
.shell{height:100dvh;display:flex;flex-direction:column;max-width:520px;margin:0 auto;padding:calc(8px + var(--sat)) 14px calc(10px + var(--sab));gap:10px}
.site-head{display:flex;align-items:center;gap:12px;flex:none}
.site-head img{border-radius:12px}
.word{font-size:24px;font-weight:800;letter-spacing:-.8px;line-height:1}
.word .dot{color:var(--verm);font-size:30px;vertical-align:top;line-height:.8}
.site-head small{display:block;font-size:9px;letter-spacing:1.3px;font-weight:700;color:var(--muted);margin-top:5px}
.card{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;background:var(--surface);border:1px solid var(--btn-line);border-radius:14px;box-shadow:4px 5px 0 var(--shadow);padding:18px 14px 8px}
.card:before{content:'';position:absolute;top:-1px;left:calc(50% - 27px);width:54px;height:6px;background:var(--verm)}
.game-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
.titles{text-align:center;min-width:0}
.titles small{display:block;font-size:9px;letter-spacing:1.3px;font-weight:700;color:var(--muted);text-transform:uppercase}
h1,.stage-title{font-size:25px;font-weight:800;letter-spacing:-1px;line-height:1.15;margin:5px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.round{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer}
.round svg{width:22px;height:22px;fill:none;stroke:currentColor}
.status{display:flex;justify-content:space-between;align-items:center;margin:14px 4px 8px;font-size:12px;color:var(--muted);flex:none}
.calm{display:flex;align-items:center;gap:6px;color:var(--green)}
.calm svg{width:16px;height:16px;fill:none;stroke:currentColor}
.calm b{font-size:9px;font-weight:800;letter-spacing:1px}
#remaining{font-weight:800;color:var(--ink)}
.progress{height:5px;background:var(--line);flex:none}
#progressFill{height:100%;width:0;background:var(--verm);transition:width .25s}
.board-wrap{flex:1;min-height:0;position:relative;touch-action:none;border-bottom:1px solid var(--line)}
#board{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.msg{font-size:12.5px;text-align:center;min-height:36px;margin:8px 6px 4px;color:var(--muted);flex:none}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:none}
.tools button{position:relative;display:flex;flex-direction:column;align-items:center;background:none;border:0;min-height:84px;padding:0;cursor:pointer;color:var(--ink)}
.tools button:before{content:'';position:absolute;top:0;width:54px;height:54px;background:var(--btn);border:1px solid var(--btn-line);border-radius:50%;box-shadow:0 3px 0 var(--btn-line)}
.tools img{position:relative;width:43px;height:43px;margin-top:5px;pointer-events:none}
.tools span{position:relative;margin-top:8px;font-size:10px;font-weight:700;line-height:1.15;text-align:center}
.tools button:active:not(:disabled):before{transform:translateY(2px);box-shadow:0 1px 0 var(--btn-line)}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.foot{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.2px;color:var(--muted);padding:2px 4px 4px;flex:none}
.primary{background:var(--green);color:var(--surface);border:0;border-radius:10px;min-height:48px;padding:0 24px;font-weight:800;font-size:15px;font-family:inherit;cursor:pointer;margin-top:14px;width:100%;box-shadow:0 3px 0 #0003}
[data-theme=night] .primary{color:#10201a}
dialog{border:1px solid var(--btn-line);border-radius:14px;background:var(--surface);color:var(--ink);padding:22px;width:min(92vw,380px);box-shadow:4px 5px 0 var(--shadow)}
dialog::backdrop{background:#0008}
dialog h2{font-size:22px;font-weight:800;letter-spacing:-.6px;margin:0 0 12px}
.bloom{display:block;width:96px;height:96px;margin:0 auto 6px}
dialog label{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px}
dialog select{min-height:44px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;padding:0 8px}
dialog .row{justify-content:flex-start}dialog input[type=checkbox]{width:24px;height:24px}
.stage-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:50vh;overflow:auto}
.stage-grid button{min-height:48px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-weight:800;font-size:15px;font-family:inherit;cursor:pointer}
.stage-grid button.done{background:var(--green);color:var(--surface)}
.stage-grid button.cur{outline:3px solid var(--verm)}
/* board */
.guides circle{fill:var(--dot)}
.arrow path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.arrow.c0{color:var(--c0)}.arrow.c1{color:var(--c1)}.arrow.c2{color:var(--c2)}.arrow.c3{color:var(--c3)}.arrow.c4{color:var(--c4)}
.arrow path{stroke:currentColor}
.blocker path{stroke:var(--warn);stroke-dasharray:.1 .1}
.hinted path{stroke:var(--green);filter:drop-shadow(0 0 .08px var(--gold))}
.hintray{stroke:var(--green);stroke-width:.05;stroke-dasharray:.12 .15;fill:none;stroke-linecap:round}
@keyframes nudge{0%,100%{translate:0 0}30%{translate:var(--nx,.12px) var(--ny,0)}60%{translate:calc(var(--nx,.12px)*-.5) calc(var(--ny,0)*-.5)}}
.nudge{animation:nudge .26s ease-out}
.reduce .nudge{animation:none}
@media (prefers-reduced-motion:reduce){.nudge{animation:none}}
@media(max-width:350px){h1,.stage-title{font-size:20px}.tools span{font-size:8.5px}}

dialog.journey{width:min(96vw,520px);max-height:92dvh;overflow:auto}
.eyebrow{display:block;font-size:9px;letter-spacing:1.3px;font-weight:800;color:var(--green)}
dialog.journey h2{font-size:30px;line-height:1.05;margin:8px 0 12px}
.map-scroll{overflow-x:auto;margin:0 -22px 10px;padding:0 22px}
.field-map{display:block;height:140px;width:auto;border-radius:6px}
.chapters{list-style:none;margin:0;padding:0}
.chapters li{display:grid;grid-template-columns:34px 1fr auto;gap:2px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.chapters .no{grid-row:span 2;width:34px;height:34px;border-radius:50%;background:var(--btn);border:1px solid var(--btn-line);display:grid;place-items:center;font-weight:800;font-size:14px}
.chapters b{font-size:15px}.chapters small{color:var(--muted);font-size:11.5px}
.chapters .st{grid-row:span 2;font-size:10px;font-weight:800;letter-spacing:.8px;text-align:right;color:var(--green)}
.chapters li.soon{opacity:.55}.chapters li.soon .st{color:var(--muted)}
.sub{font-size:13px;letter-spacing:.8px;text-transform:uppercase;margin:16px 0 8px;color:var(--muted)}
.rhythm{font-size:12px;color:var(--muted);margin:12px 0 0}

.offline{font-size:12px;color:var(--muted);margin:6px 0 0}
.toast{position:fixed;left:50%;bottom:calc(14px + var(--sab));transform:translateX(-50%);display:flex;gap:12px;align-items:center;background:var(--green);color:var(--surface);padding:10px 12px 10px 16px;border-radius:12px;font-size:13px;box-shadow:3px 4px 0 #0003;z-index:20;max-width:92vw}
[data-theme=night] .toast{color:#10201a}
.toast button{min-height:44px;border:0;border-radius:8px;padding:0 14px;background:var(--surface);color:var(--green);font-weight:800;font-size:13px;font-family:inherit;cursor:pointer}
.toast[hidden]{display:none}

.arrow{stroke-width:var(--sw,.11)}

.board-wrap{position:relative}
#fxsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:5}
.actions{display:flex;gap:6px}
.round[aria-pressed=false]{color:var(--muted)}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;display:block}
.ico{display:inline-grid;place-items:center;width:28px;color:var(--green);flex:none}
dialog label.row{gap:10px}
.offline-row{display:flex;align-items:center;gap:10px;margin:6px 0 0;color:var(--muted)}
.offline-row .offline{margin:0}
dialog .close{position:absolute;top:10px;right:10px;width:44px;height:44px}
dialog{position:fixed}
.chapters .no svg{width:20px;height:20px;fill:none;stroke:currentColor}
.chapters li.soon .no{color:var(--muted)}
.stage-grid button svg{width:14px;height:14px;vertical-align:-2px;margin-left:3px;fill:none;stroke:currentColor}
.tools button:active:not(:disabled) img{transform:scale(.94)}
.tools img{transition:transform .16s}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.arrow.kbd path{stroke-width:calc(var(--sw,.11) * 1.8);filter:drop-shadow(0 0 .1px var(--gold)) drop-shadow(0 0 .12px var(--gold))}
#board:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.daily-card{margin:8px 0 12px}
.daily{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 12px;border:1px solid var(--btn-line);border-radius:12px;background:var(--btn);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.daily .dtxt{flex:1;display:flex;flex-direction:column}.daily b{font-size:15px}.daily small{font-size:11.5px;color:var(--muted)}
.dots{display:flex;gap:6px;margin-top:8px}
.dots .dot{flex:1;min-height:44px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--muted);font-weight:700;font-size:12px;font-family:inherit;cursor:pointer}
.dots .dot.on{background:var(--green);color:var(--surface);border-color:var(--green)}
.dots .dot.today{outline:2px solid var(--verm);outline-offset:1px}
.chapters li{cursor:pointer}.chapters li.sel{background:var(--btn);border-radius:10px}
.chapters li.soon{cursor:default}
.stage-grid button:disabled{opacity:.45;cursor:default}
.ghost{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:48px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-weight:700;font-size:13px;font-family:inherit;cursor:pointer}
.ghost svg{width:20px;height:20px;fill:none;stroke:currentColor}
.io{display:flex;gap:8px;margin-top:12px}

/* Tool buttons: label sits clear of the icon disc and its 3px shadow; tall scripts (Devanagari, Thai) and long strings get room. */
.tools{align-items:start}
.tools button{min-height:96px;padding-bottom:4px}
.tools span{margin-top:14px;font-size:11px;line-height:1.35;width:100%;padding:0 1px;overflow-wrap:anywhere;text-wrap:balance}
@media(max-width:350px){.tools span{font-size:10px}}

/* ===== Audit pass (a11y / long strings / RTL / short screens) ===== */
:root{--muted:#5d6458;--focus:#8a6511;--tool-bg:#f1e6c9;--tool-line:#d8c9a7;--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
[data-theme=night]{--btn:#2b3f37;--btn-line:#46594f;--focus:#e3bb57;--muted:#a9b8ad}
[data-theme=contrast]{--btn:#fff;--btn-line:#000;--focus:#000;--tool-bg:#fff;--tool-line:#000;--muted:#222}
.tools button:before{background:var(--tool-bg);border-color:var(--tool-line);box-shadow:0 3px 0 var(--tool-line)}
button:focus-visible,select:focus-visible,input:focus-visible,#board:focus-visible,li:focus-visible{outline:3px solid var(--focus)}
.progress{background:#bdb79a}[data-theme=night] .progress{background:#3b4d44}
.stage-grid button,.dots .dot{border-color:#9a977c}[data-theme=night] .stage-grid button,[data-theme=night] .dots .dot{border-color:#4d6157}
/* blocked + hinted states must read without colour: dashed + heavier, hint = thick */
.blocker{stroke-width:calc(var(--sw,.11) * 1.3)}
.blocker path{stroke-linecap:butt;stroke-dasharray:.13 .09}
.hinted{stroke-width:calc(var(--sw,.11) * 1.7)}
.hintray{stroke-width:.08}
/* viewport: old WebViews lack dvh */
.shell{height:100vh;height:100dvh;padding-left:max(14px,var(--sal));padding-right:max(14px,var(--sar))}
dialog.journey{max-height:92vh;max-height:92dvh}.stage-grid{max-height:50vh}
.toast{bottom:calc(96px + var(--sab))}
@media(max-height:600px){.site-head{display:none}.msg{min-height:0;margin:2px 6px}.tools button{min-height:70px}.tools button:before{width:44px;height:44px}.tools img{width:36px;height:36px;margin-top:4px}.tools span{margin-top:8px}.foot{display:none}.board-wrap{min-height:200px}}
/* scripts: no letter-spacing / uppercasing on scripts where it breaks joining or conjuncts; tall scripts need line room */
:lang(hi) *,:lang(mr) *,:lang(ta) *,:lang(te) *,:lang(bn) *,:lang(th) *,:lang(ar) *,:lang(ur) *,:lang(ja) *,:lang(ko) *{letter-spacing:0 !important;text-transform:none !important}
:lang(hi),:lang(mr),:lang(ta),:lang(te),:lang(bn),:lang(th){--lh:1.6}
h1,.stage-title{line-height:var(--lh,1.15)}
body{font-family:'Avenir Next','Trebuchet MS','Noto Sans','Noto Sans Devanagari','Noto Sans Arabic','Noto Nastaliq Urdu','Noto Sans Bengali','Noto Sans Tamil','Noto Sans Telugu','Noto Sans Thai','Noto Sans JP','Noto Sans KR',system-ui,sans-serif}
/* small labels: 11px floor, allow wrapping instead of clipping or colliding */
.foot,.site-head small,.titles small,.calm b,.eyebrow{font-size:11px}
.status,.foot{flex-wrap:wrap;gap:2px 10px;min-width:0}
.foot span:last-child{text-align:end}
.titles{flex:1;min-width:0}.game-header .round{flex:none}
h1,.stage-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;hyphens:auto;font-size:clamp(17px,5.4vw,25px)}
@media(max-width:350px){h1,.stage-title{font-size:clamp(17px,5.4vw,25px)}}
.dots{overflow-x:auto;scrollbar-width:none}.dots::-webkit-scrollbar{display:none}.dots .dot{flex:0 0 44px;min-width:44px}
.chapters li{grid-template-columns:34px minmax(0,1fr) minmax(0,40%)}.chapters b,.chapters small{overflow-wrap:anywhere}
dialog label>span:first-child{min-width:0;flex:1}dialog select{max-width:55%;text-overflow:ellipsis}dialog{overflow-x:hidden;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
/* RTL: logical properties; mirror directional icons; the board itself stays physical (grid direction, not reading direction) */
dialog .close{right:auto;inset-inline-end:10px}
.daily{text-align:start}.chapters .st{text-align:end}.stage-grid button svg{margin-left:0;margin-inline-start:3px}
[dir=rtl] .tools img[src*=undo],[dir=rtl] [data-icon=next] svg,[dir=rtl] [data-icon=back] svg,[dir=rtl] [data-icon=arrow-turn] svg{scale:-1 1}
/* reduced motion: everything, not just the nudge */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}
.reduce *,.reduce *::before,.reduce *::after{animation:none !important;transition:none !important}

/* touch spacing: >= 8px between adjacent targets */
.actions{gap:8px}.tools{gap:8px}
.toast-x{min-width:44px;padding:0 !important;background:transparent !important;color:inherit !important}.toast-x svg{width:20px;height:20px;fill:none;stroke:currentColor}

/* blocked tap: the path from the tapped head to what is in the way */
.blockray{fill:none;stroke:var(--warn);stroke-width:.07;stroke-dasharray:.1 .12;stroke-linecap:round;opacity:.9}

.has-update{position:relative}
.has-update:after{content:'';position:absolute;top:5px;inset-inline-end:5px;width:11px;height:11px;border-radius:50%;background:var(--verm);border:2px solid var(--surface)}
.foot{align-items:baseline}.foot-link{color:var(--green);font-weight:700;text-underline-offset:3px;min-height:24px}.foot .tag{flex-basis:100%;text-align:center;letter-spacing:1.2px;opacity:.85}
.support{margin-top:12px}.bmc{background:#ffdd66;border-color:#c9a21e;color:#3b2a12;text-decoration:none;box-shadow:0 2px 0 #c9a21e}
.bmc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bmc-link{display:block;text-align:center;margin-top:12px;font-size:13px;color:var(--muted);text-underline-offset:3px;min-height:32px;padding-top:6px}
.notes{margin:2px 0 0;padding-inline-start:18px;font-size:12.5px;color:var(--muted)}.notes:empty{display:none}
#updNow{background:var(--green);color:var(--surface);border-color:var(--green)}

/* labelled Stages button + tooltips */
.pill{width:auto;padding:0 14px 0 10px;gap:6px;display:flex;align-items:center;border-radius:22px;font-weight:700;font-size:13px}.pill .pl{white-space:nowrap}
@media(max-width:330px){.pill .pl{display:none}.pill{padding:0;width:44px;justify-content:center}}
#stagesBtn.pulse{animation:pulse 2.2s ease-in-out infinite}@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #e9573655}50%{box-shadow:0 0 0 8px #e9573600}}
.tip{position:relative}
.tip::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);inset-inline-start:0;background:var(--ink);color:var(--surface);font-weight:600;font-size:12px;line-height:1.3;font-family:inherit;padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(-3px);transition:opacity .15s,transform .15s;z-index:30}
.tip-end::after{inset-inline-start:auto;inset-inline-end:0}
.tip:hover::after,.tip:focus-visible::after{opacity:1;transform:none}
@media (hover:none){.tip:hover::after{opacity:0}}
/* first-run tour */
.tour{position:fixed;inset:0;z-index:50}.tour[hidden]{display:none}
.tour-spot{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px #0009;outline:3px solid var(--gold);transition:all .25s}
.tour-card{position:absolute;inset-inline:16px;max-width:360px;margin-inline:auto;background:var(--surface);color:var(--ink);border:1px solid var(--btn-line);border-radius:14px;padding:16px;box-shadow:4px 5px 0 var(--shadow)}
.tour-card p{margin:0 0 12px;font-size:15px;line-height:1.5}.tour-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tour-step{font-size:12px;color:var(--muted)}.tour-next{background:var(--green);color:var(--surface);border-color:var(--green);flex:0 0 auto;padding:0 18px}
.tour-actions .ghost{flex:0 0 auto;padding:0 14px}
/* keepsakes + rewards */
.keeps-box{margin:6px 0 10px;border:1px solid var(--line);border-radius:12px;padding:6px 12px;background:var(--paper)}.keeps-box summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-weight:700}
.keeps-box summary span:last-child{color:var(--muted);font-weight:500;font-size:12px}
.keeps-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:8px 0 6px}
.keep{aspect-ratio:1;min-height:44px;border-radius:10px;border:1px solid var(--btn-line);background:var(--btn);color:var(--green);display:grid;place-items:center;padding:0;cursor:default}
.keep svg{width:22px;height:22px;fill:none;stroke:currentColor}.keep.locked{opacity:.4;color:var(--muted)}
.won-keeps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}.won-keeps li{display:flex;align-items:center;gap:10px;background:var(--btn);border:1px solid var(--btn-line);border-radius:10px;padding:8px 12px;font-weight:700;animation:pop .5s ease-out}
.won-keeps svg{width:24px;height:24px;fill:none;stroke:var(--green)}.won-extra{margin:6px 0 0;font-size:13px;color:var(--muted)}.won-extra:empty{display:none}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
.reduce .won-keeps li{animation:none}
/* surprise bloom (petal burst) */
.petal{fill:currentColor;opacity:0;transform-box:fill-box;transform-origin:center;animation:petal .75s ease-out forwards}
@keyframes petal{0%{opacity:.95;translate:0 0;scale:.4}100%{opacity:0;translate:var(--dx) var(--dy);scale:1.15;rotate:var(--rot)}}
/* cosmetic arrow palettes (decorative: shape and direction carry the meaning, never colour) */
[data-arrows=blossom]{--c0:#c2336d;--c1:#d9602b;--c2:#8a4fb8;--c3:#b3701a;--c4:#a8325e}
[data-arrows=brook]{--c0:#1f6f8b;--c1:#2a8a6e;--c2:#4a63a8;--c3:#3a7d9a;--c4:#2d7a4f}
[data-arrows=aurora]{--c0:#2f9e8f;--c1:#6a5acd;--c2:#2a8aa8;--c3:#8a4fb8;--c4:#2b8a5f}
[data-arrows=ember]{--c0:#b8441f;--c1:#c27a10;--c2:#9c3a2e;--c3:#a05a14;--c4:#7a4a2a}
[data-theme=night][data-arrows=blossom]{--c0:#f27aa6;--c1:#f2a06a;--c2:#c79bea;--c3:#e5b25d;--c4:#f08fb0}
[data-theme=night][data-arrows=brook]{--c0:#6fc3dc;--c1:#6fd1b0;--c2:#8fa6e8;--c3:#78b9d6;--c4:#79d08f}
[data-theme=night][data-arrows=aurora]{--c0:#6fe0cf;--c1:#a99cf5;--c2:#6fc4e0;--c3:#c79bea;--c4:#7be0a8}
[data-theme=night][data-arrows=ember]{--c0:#f08a63;--c1:#eab04d;--c2:#e8837a;--c3:#dca05c;--c4:#cfa17a}
[data-theme=contrast][data-arrows]{--c0:#000;--c1:#000;--c2:#000;--c3:#000;--c4:#000}

.share-btn{margin-top:8px;width:100%}.share-preview{display:block;width:100%;aspect-ratio:1;border-radius:12px;border:1px solid var(--line);background:var(--paper);margin-bottom:10px}
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.share-grid .ghost{text-decoration:none;text-align:center}
#share{max-height:calc(100dvh - 24px);overflow:auto}

.daily-note{margin:8px 2px 0;font-size:12px;color:var(--muted)}
.dots .dot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:52px;line-height:1.15}
.dots .dot small{font-size:10px;font-weight:600;opacity:.8}.dots .dot b{font-size:15px}
.dots .dot.today small{color:var(--verm);opacity:1}.dots .dot.on.today small{color:inherit}

/* ===== sleek pass: icons + tooltips instead of labels ===== */
.card{padding:14px 12px 6px}.status{margin:10px 4px 6px}h1,.stage-title{margin-top:3px}
.status .aim{font-weight:800;color:var(--verm);font-size:13px;margin-inline:auto 10px}.status .aim:empty{display:none}
.tools{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.tools button{min-height:66px;padding:0;align-items:center;justify-content:center}
.tools button:before{top:50%;translate:-50% -50%;left:50%;width:56px;height:56px}
.tools img{margin:0;width:44px;height:44px;position:relative}
.tools .tip::after{top:auto;bottom:calc(100% + 2px);left:50%;inset-inline-start:auto;inset-inline-end:auto;translate:-50% 0}
.foot{justify-content:space-between;align-items:center;padding:4px 6px 2px;font-size:11px}
.foot-link{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--green)}.foot-link svg{width:20px;height:20px;fill:none;stroke:currentColor}
.tip.show::after{opacity:1;transform:none}
@media(max-height:740px){.site-head{display:none}}
@media(max-height:820px){.site-head small{display:none}}
/* fun targets */
.target .tgt{transform-box:fill-box;transform-origin:center;animation:tgtIn .25s ease-out both}
.target.hit .tgt{animation:tgtHit .42s ease-in forwards}
@keyframes tgtIn{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes tgtHit{0%{scale:1;opacity:1}35%{scale:1.5;opacity:1}100%{scale:1.9;opacity:0}}
.floatpts text{font-weight:800;fill:var(--ink);stroke:var(--surface);stroke-width:14;paint-order:stroke;text-anchor:middle;animation:floatup .95s ease-out forwards}
@keyframes floatup{from{translate:0 0;opacity:1}to{translate:0 -170px;opacity:0}}
.reduce .target .tgt,.reduce .target.hit .tgt,.reduce .floatpts text{animation-duration:.01s}

/* desktop: a side panel instead of empty space (hidden on phones) */
.side{display:none}
@media(min-width:960px){
  .shell{max-width:1100px;display:grid;grid-template-columns:minmax(0,1fr) 520px;grid-template-rows:auto minmax(0,1fr);column-gap:64px;padding-top:24px;padding-bottom:24px}
  .site-head{grid-column:1/-1;display:flex}.site-head small{display:block}
  .side{display:flex;flex-direction:column;justify-content:center;gap:20px;grid-column:1;grid-row:2;padding-inline-end:12px}
  .card{grid-column:2;grid-row:2}
  .side h2{font-size:clamp(36px,4.2vw,56px);line-height:1.05;letter-spacing:-1.6px;font-weight:800;margin:0;color:var(--green)}
  .steps{margin:0;padding-inline-start:22px;font-size:18px;line-height:1.6;color:var(--ink);max-width:420px}.steps li{margin:8px 0}
  .side-links{display:flex;gap:20px;flex-wrap:wrap;margin:0;font-weight:700}.side-links a{color:var(--green);text-underline-offset:4px}
}

/* ===== Settings sheet (per the Edition 02 settings brief) ===== */
.settings-dialog{width:min(92vw,420px);padding:18px 20px 16px}
.settings-dialog h2{margin:0 48px 2px 0}
.group-title{margin:12px 0 2px;font-weight:800;font-size:10px;line-height:1.2;font-family:inherit;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.setting-group{display:grid;margin:0 0 4px}
.settings-dialog .setting-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;justify-content:normal;min-height:46px;gap:10px;position:relative;cursor:pointer}
.setting-row .ico{width:28px;height:28px;display:grid;place-items:center;color:var(--green)}
.setting-row .ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.setting-row .lt{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.setting-row input[type=checkbox]{position:absolute;inset-inline-end:0;top:50%;translate:0 -50%;width:42px;height:26px;margin:0;opacity:0;pointer-events:none}
.setting-row .toggle{width:42px;height:26px;border:1px solid var(--btn-line);border-radius:999px;background:var(--paper);position:relative;flex:none;transition:background .16s,border-color .16s}
.setting-row .toggle::after{content:"";position:absolute;width:18px;height:18px;inset-inline-start:3px;top:3px;border-radius:50%;background:var(--muted);transition:transform .16s,background .16s}
.setting-row input:checked + .toggle{background:var(--green);border-color:var(--green)}
.setting-row input:checked + .toggle::after{transform:translateX(16px);background:var(--surface)}
[dir=rtl] .setting-row input:checked + .toggle::after{transform:translateX(-16px)}
.setting-row input:focus-visible + .toggle{outline:3px solid var(--focus,var(--gold));outline-offset:3px}
.setting-row select{max-width:160px;min-height:40px}
[data-theme=contrast] .setting-row .toggle{border-color:#000}[data-theme=contrast] .setting-row .toggle::after{background:#000}[data-theme=contrast] .setting-row input:checked + .toggle::after{background:#fff}
.settings-dialog .io{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.settings-dialog .io.one{grid-template-columns:1fr}
.settings-dialog .ghost{min-height:44px;font-size:13px}
.support{margin:12px 0 4px}
.support .bmc{background:var(--paper);color:var(--green);border:1px solid var(--btn-line);box-shadow:none}
.support .bmc svg{width:18px;height:18px}
.settings-dialog .primary{margin-top:10px}

/* ===== content under the game (what search engines read) ===== */
html{scroll-behavior:smooth}
.seo{max-width:760px;margin:0 auto;padding:56px 20px 88px;color:var(--ink);line-height:1.7;font-size:17px}
.seo h1{font-size:clamp(28px,5vw,40px);line-height:1.15;letter-spacing:-1px;display:block;white-space:normal;-webkit-line-clamp:unset;overflow:visible;margin:0 0 10px}
.seo h2{font-size:22px;margin:34px 0 8px;letter-spacing:-.4px;line-height:1.25}
.seo .lead{font-size:19px;color:var(--muted)}.seo ol,.seo ul{padding-inline-start:22px}.seo li{margin:6px 0}
.seo details{background:var(--surface);border:1px solid var(--btn-line);border-radius:10px;padding:10px 16px;margin:10px 0}.seo summary{cursor:pointer;font-weight:700;min-height:28px}
.seo a{color:var(--green);text-underline-offset:4px}.seo .back{display:inline-block;margin-bottom:22px;font-weight:700}
.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.lang-grid button{min-height:48px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-weight:600;font-size:15px;font-family:inherit;cursor:pointer;padding:0 10px;text-align:center}
.lang-grid button[aria-pressed=true]{background:var(--green);color:var(--surface);border-color:var(--green)}
.lang-grid small{display:block;font-size:10px;opacity:.7}
#langDlg{max-height:calc(100dvh - 24px);overflow:auto}
.foot{gap:2px}.foot .grp{display:flex;gap:2px;align-items:center}

/* credit / branding */
.about{margin:0;font-size:14px;color:var(--muted)}.about a,.seo .credit a{color:var(--green);font-weight:600}
.about{margin:10px 2px 6px;font-size:12px;text-align:center}
.seo .credit{margin-top:36px;padding-top:18px;border-top:1px solid var(--btn-line);font-size:15px;color:var(--muted)}

/* footer = one quiet identity line + two icons (maker credit lives in Settings and the About article) */
.foot{border-top:1px solid var(--line);padding:8px 4px calc(2px + var(--sab)) 8px;margin-top:4px;font-size:11px;color:var(--muted);letter-spacing:.8px;font-weight:600;align-items:center}
.foot-brand{text-transform:uppercase}
.side-tag{margin:0;font-size:12px;letter-spacing:1.4px;font-weight:700;color:var(--muted);text-align:center}
:lang(hi) .foot,:lang(ar) .foot{letter-spacing:0}
/* The theme lives on <body>, so html resolved --paper from :root (always cream) and showed through below the first screen in Night/Contrast. With no html background, body's paints the whole canvas. */
html{background:none}
.seo h1,.seo h2{hyphens:manual;-webkit-hyphens:manual}
/* "Today" label: --verm is 2.98:1 on the paper dot; a deeper vermilion clears 4.5:1 in Paper, Night keeps the bright one */
.dots .dot.today small{color:#b03a1c}[data-theme=night] .dots .dot.today small{color:var(--verm)}[data-theme=contrast] .dots .dot.today small{color:#000}.dots .dot.on.today small{color:inherit}