*{box-sizing:border-box}html{background:#100f2b;color:#f8f5ff;font-family:ui-rounded,system-ui,-apple-system,sans-serif}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 0 0,#205c75,transparent 55%),radial-gradient(ellipse at 100% 65%,#52306e,transparent 60%),#100f2b}main{max-width:480px;margin:auto;padding:max(8px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}a{color:#e2dcff;text-decoration:none}button,a,summary{touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #ffffff25;border-radius:14px;background:#ffffff0b;min-height:44px;padding:8px 13px}button:focus-visible,a:focus-visible,canvas:focus-visible,summary:focus-visible{outline:3px solid #ffdf88;outline-offset:3px}button:disabled{opacity:.4;cursor:default}button:active:not(:disabled){filter:brightness(1.16)}header{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}header>span{font-size:9px;letter-spacing:1.5px;color:#bcdde5}.title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px 12px}.title h1{font-size:34px;line-height:1;margin:0;letter-spacing:-1.5px;font-weight:950;text-shadow:0 3px 0 #09192855}.title h1 span{color:#9affdf}.title>span{font-size:10px;font-weight:800;color:#d9d0f3;letter-spacing:1px}.journey-heading{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#b4e5e2;margin:0 3px 8px}.journey-heading span:last-child{color:#a7a0c6}#journey{display:flex;justify-content:space-between;gap:4px;margin-bottom:12px}#journey button{width:44px;min-width:0;padding:0;border-radius:50%;background:#273450;font-weight:800}#journey .current{background:#a0ffdf;color:#133940;box-shadow:0 0 0 3px #9affdf20;opacity:1}#journey .cleared{border-color:#9affdf;color:#9affdf}.scores{display:grid;grid-template-columns:1fr 1fr 1fr;background:#0b143b66;border:1px solid #ffffff16;border-radius:18px;padding:6px}.scores div{text-align:center}.scores div+div{border-left:1px solid #ffffff15}small{font-size:9px;letter-spacing:1.5px;color:#bebad9}strong{display:block;font-size:23px;font-variant-numeric:tabular-nums}.scores div:nth-child(2) strong{color:#ffe39d}.scores .urgent{color:#ff9ac0!important}.mission{padding:10px 0 0}.mission-heading{display:flex;justify-content:space-between;gap:6px;font-size:11px;color:#d4cbea;margin-bottom:6px}.mission-heading>span:first-child{font-weight:800;color:#fff}#goals{display:flex;gap:6px}.goal{flex:1;min-width:0;border:1px solid #ffffff25;border-radius:14px;background:#20395699;padding:8px 12px;position:relative;overflow:hidden}.goal-fill{position:absolute;inset:0 auto 0 0;background:#9affdf16;pointer-events:none;transition:width .3s}.goal-label{position:relative;display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:12px;white-space:nowrap}.goal b{font-size:18px;font-variant-numeric:tabular-nums}.goal.done{border-color:#9affdf;color:#9affdf}.goal-symbol{font-size:15px;color:var(--goal-color,#bfefff);font-weight:800}.progress-track{height:5px;background:#ffffff12;border-radius:8px;margin-top:7px;overflow:hidden}#progressFill{height:100%;background:linear-gradient(90deg,#6fd9ff,#a0ffdf);border-radius:8px;max-width:100%;transition:width .3s}#progressText{display:none}.meter{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:32px;font-size:11px;color:#eee6ff}.meter span:last-child{color:#a0ffdf;font-size:10px;font-weight:900;flex-shrink:0}.stage{position:relative;border-radius:24px;border:2px solid #b0e7ff40;overflow:hidden;background:linear-gradient(145deg,#142e4a,#242343);box-shadow:0 12px 35px #0005,inset 0 0 22px #b5e6ff12}canvas{display:block;width:100%;height:clamp(280px,calc(100dvh - 408px),510px);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#overlay{position:absolute;inset:0;display:grid;place-items:safe center;background:radial-gradient(ellipse at top,#254b65f7,#24203efa);padding:18px;overflow-y:auto}#overlay[hidden],[hidden]{display:none!important}.overlay-card{text-align:center;width:100%;margin:auto}.pill{display:inline-block;font-size:9px;letter-spacing:1px;padding:7px 10px;border:1px solid #a0ffdf44;border-radius:30px;color:#a0ffdf}.overlay-card h2{font-size:32px;margin:12px 0 8px;letter-spacing:-1px}.overlay-card p{font-size:15px;color:#eee8ff;line-height:1.5;margin:8px 0}.overlay-tip{font-size:12px;color:#c4bbdf;line-height:1.5;margin:12px auto;max-width:280px}#play{width:100%;max-width:260px;background:linear-gradient(120deg,#b3ffe2,#6fe1ec);color:#163943;border:0;font-weight:900;margin:4px 0 8px;min-height:50px;box-shadow:0 5px 0 #276d80,0 8px 18px #0003}#assist{display:block;margin:6px auto;color:#baffec;font-size:12px}#cancel{display:block;margin:6px auto 0;border:0;background:transparent}.help{padding:7px 2px;font-size:11px;color:#bfb9d8}.help summary{cursor:pointer;min-height:28px;line-height:28px;text-align:center}.help p{line-height:1.5;margin:5px 0}.actions{display:flex;gap:8px;align-items:center}.actions button{flex:1;background:#33405c80}.actions a{padding:12px;min-height:44px}.note{text-align:center;font-size:10px;color:#aaa6c3;margin:9px 0 0}.public-footer{margin-top:24px!important}body.is-playing .journey-heading,body.is-playing #journey,body.is-playing .scores div:last-child,body.is-playing #levelName{display:none}body.is-playing .scores{grid-template-columns:1fr 1fr}body.is-playing .mission-heading{justify-content:center}body.is-playing canvas{height:clamp(280px,calc(100dvh - 375px),540px)}body.is-playing .title{padding-bottom:8px}@media(max-height:680px){main{padding-top:2px}.title h1{font-size:26px}.title{padding:3px 2px 6px}.scores{padding:3px}strong{font-size:20px}.mission{padding-top:5px}.goal{padding:5px 10px}.mission-heading{margin-bottom:3px}.meter{min-height:28px;font-size:10px}.help{padding:2px}.help summary{min-height:24px;line-height:24px}.note{margin-top:5px}canvas{height:clamp(220px,calc(100dvh - 375px),360px)}body.is-playing canvas{height:clamp(258px,calc(100dvh - 310px),450px)}#overlay{padding:10px}.overlay-card h2{font-size:25px;margin:7px 0}.overlay-card p{font-size:13px}.overlay-tip{font-size:11px;margin:7px auto}.pill{padding:5px 9px}#play{min-height:44px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

#coinReward{color:#ffe18b;font-weight:800;font-size:.95rem;margin:.5rem 0}#coinReward:empty{display:none}#retryCoins{margin:.3rem 0}

#overlay[data-state=won] #overlayTip,#overlay[data-state=complete] #overlayTip{display:none}
#coinReward{line-height:1.35;font-size:.9rem}

/* Keep active touch gameplay anchored on iOS Safari and the native webview. */
html:has(body.is-playing){overscroll-behavior:none}body.is-playing{height:100dvh;overflow:hidden;overscroll-behavior:none}body.is-playing main{height:100%;display:flex;flex-direction:column;min-height:0}body.is-playing .stage{flex:1 1 auto;min-height:0}body.is-playing canvas{height:100%;min-height:0}body.is-playing .public-footer,body.is-playing .note{display:none}body.is-playing .help{flex-shrink:0}body.is-playing .actions{flex-shrink:0}body.is-playing .stage{touch-action:none}body.is-playing #board{touch-action:none}
