/* Puff Putt styles. Fonts: Lilita One + Nunito (both SIL OFL 1.1). */
@font-face { font-family: 'Lilita One'; src: url('../fonts/lilita.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; }
:root {
  --app-h: 100dvh; --dead-b: 0px; --sat: env(safe-area-inset-top, 0px); --sab: max(env(safe-area-inset-bottom, 0px), var(--dead-b, 0px)); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --ink: #4a3566; --ink2: #7d6c96; --pink: #ff7fa6; --pinkd: #e2578a; --mint: #7fe0bd; --sky: #bfe3ff; --lav: #cdbfff; --butter: #ffe29a; --coral: #ff9a8a;
  --panel: rgba(255, 255, 255, .78); --panel-b: rgba(255, 255, 255, .95); --shadow: 0 10px 30px rgba(110, 80, 160, .22);
  --display: 'Lilita One', 'Trebuchet MS', system-ui, sans-serif; --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html[data-sim] { --sat: var(--sim-sat, 47px); --sab: max(var(--sim-sab, 34px), var(--dead-b, 0px)); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #bfe3ff; }
@supports (height: 100dvh) { html, body { height: 100dvh; } }
/* iOS Home-Screen apps: fill the whole panel (Tower Takeout) */
@media (display-mode: standalone) { html, body { height: 100lvh; } }
body {
  position: fixed; left: 0; right: 0; top: 0; bottom: auto; width: 100%; overflow: hidden; overscroll-behavior: none; touch-action: manipulation;
  height: 100vh; height: var(--app-h);
  font-family: var(--body); color: var(--ink); font-weight: 700; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
  -webkit-user-select: none; user-select: none;
}
img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
button:disabled { cursor: default; }
svg { width: 24px; height: 24px; display: block; flex: none; }
#stage { position: fixed; left: 0; top: 0; bottom: auto; width: 100%; height: var(--app-h); display: block; touch-action: none; }

/* ---------- screens ---------- */
.screen {
  position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: var(--app-h); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px) scale(.985);
  transition: opacity .32s ease, transform .38s cubic-bezier(.2, .9, .3, 1.1), visibility 0s .38s; will-change: opacity, transform;
}
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.screen.overlay { background: rgba(86, 58, 130, .30); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); display: flex; align-items: center; justify-content: center; padding: calc(var(--sat) + 16px) 16px calc(var(--sab) + 16px); }
#game { touch-action: none; }
.topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: calc(var(--sat) + 10px) calc(var(--sar) + 14px) 8px calc(var(--sal) + 14px); z-index: 3; }
.spacer { flex: 1; } .w44 { width: 44px; flex: none; }
.screen-title { flex: 1; margin: 0; text-align: center; font: 400 28px/1 var(--display); color: #fff; letter-spacing: .02em; text-shadow: 0 2px 0 var(--pink), 0 4px 10px rgba(120, 70, 150, .3); -webkit-text-stroke: 1px var(--pink); paint-order: stroke fill; }
.icon-btn { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: var(--panel); color: var(--ink); box-shadow: 0 4px 0 rgba(125, 90, 170, .2), 0 8px 18px rgba(110, 80, 160, .15); transition: transform .12s; flex: none; border: 2px solid rgba(255, 255, 255, .9); }
.icon-btn.small { width: 42px; height: 42px; border-radius: 15px; }
.icon-btn:active, .btn:active, .chip:active { transform: translateY(3px) scale(.98); }
.icon-btn svg { width: 24px; height: 24px; }
.pill { height: 40px; min-width: 62px; padding: 0 12px; border-radius: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--panel); border: 2px solid rgba(255, 255, 255, .9); font: 400 20px/1 var(--display); color: var(--ink); box-shadow: 0 4px 0 rgba(125, 90, 170, .16); }
.pill svg { width: 20px; height: 20px; color: #ffb92e; } .pill.flame svg { color: #ff7a45; }
.scroll { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--sat) + 68px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding: 8px calc(var(--sar) + 16px) calc(var(--sab) + 28px) calc(var(--sal) + 16px); }
.foot-note, .fine { text-align: center; font-size: 13px; color: var(--ink2); margin: 14px 8px 0; font-weight: 700; line-height: 1.35; }
.fine { margin: 10px 4px 0; font-size: 12px; opacity: .85; }

/* ---------- buttons ---------- */
.btn { height: 56px; border-radius: 22px; padding: 0 22px; display: flex; align-items: center; justify-content: center; gap: 10px; font: 400 22px/1 var(--display); letter-spacing: .02em; transition: transform .12s, box-shadow .12s; width: 100%; }
.btn svg { width: 24px; height: 24px; }
.btn-primary { color: #fff; background: linear-gradient(180deg, #ffa3c0 0%, #ff729f 100%); box-shadow: 0 5px 0 #d94f80, 0 12px 22px rgba(226, 87, 138, .35), inset 0 2px 0 rgba(255, 255, 255, .55); text-shadow: 0 2px 0 rgba(190, 50, 100, .45); border: 2px solid rgba(255, 255, 255, .7); }
.btn-primary:active { box-shadow: 0 2px 0 #d94f80, 0 6px 12px rgba(226, 87, 138, .3), inset 0 2px 0 rgba(255, 255, 255, .55); }
.btn-xl { height: 68px; font-size: 30px; border-radius: 26px; }
.btn-xl svg { width: 30px; height: 30px; }
.btn-soft { background: var(--panel-b); color: var(--ink); box-shadow: 0 4px 0 rgba(125, 90, 170, .2), 0 10px 20px rgba(110, 80, 160, .12); border: 2px solid #fff; font-size: 20px; height: 52px; }
.btn.wide { width: 100%; }
.btn[hidden] { display: none; }
.btn-daily { height: 68px; justify-content: flex-start; padding: 0 16px 0 12px; background: linear-gradient(180deg, #fff9e0, #ffe9a8); color: var(--ink); border: 2px solid #fff; box-shadow: 0 5px 0 rgba(222, 176, 70, .55), 0 12px 22px rgba(222, 176, 70, .25); text-align: left; position: relative; }
.btn-daily .d-icon { width: 44px; height: 44px; border-radius: 15px; background: linear-gradient(180deg, #ffd466, #ffb72e); display: grid; place-items: center; color: #fff; flex: none; }
.btn-daily .d-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.btn-daily .d-text b { font: 400 21px/1 var(--display); letter-spacing: .01em; }
.btn-daily .d-text small { font: 800 12.500px/1 var(--body); color: var(--ink2); }
.streak { display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 12px; border-radius: 19px; background: #fff; color: #ff7a45; font: 400 20px/1 var(--display); box-shadow: inset 0 0 0 2px #ffe3d6; }
.streak svg { width: 20px; height: 20px; } .streak.zero { color: #c3b6d6; box-shadow: inset 0 0 0 2px #eee7f6; }
.row3 { display: flex; gap: 12px; width: 100%; } .row3 > * { flex: 1; min-width: 0; }
.link-btn { font: 800 15px var(--body); color: var(--ink2); padding: 10px; text-decoration: underline; text-underline-offset: 3px; align-self: center; }
.chip { height: 46px; border-radius: 16px; background: var(--panel-b); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font: 400 18px var(--display); box-shadow: 0 4px 0 rgba(125, 90, 170, .2); }
.chip svg { width: 22px; height: 22px; } .chip.off { opacity: .55; filter: grayscale(.6); }
.mute-btn.off { color: #b8a9cf; }

/* ---------- loader ---------- */
#loader { background: linear-gradient(180deg, #8fd8ff 0%, #c9d4ff 45%, #ffd3e3 82%, #ffe9cf 100%); transform: none; overflow: hidden; }
#loader:not(.active) { transition: opacity .5s ease, visibility 0s .5s; }
.ld-sky { position: absolute; inset: 0; overflow: hidden; }
.ld-cloud { position: absolute; left: 0; width: 160px; height: 52px; border-radius: 40px; background: rgba(255, 255, 255, .78); animation: drift linear infinite; filter: drop-shadow(0 6px 10px rgba(130, 110, 190, .12)); }
.ld-cloud::before, .ld-cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.ld-cloud::before { width: 70px; height: 70px; left: 24px; top: -30px; } .ld-cloud::after { width: 54px; height: 54px; right: 26px; top: -22px; }
.ld-cloud.c1 { top: 14%; animation-duration: 38s; animation-delay: -12s; } .ld-cloud.c2 { top: 30%; width: 120px; transform: scale(.8); opacity: .8; animation-duration: 52s; animation-delay: -30s; }
.ld-cloud.c3 { top: 66%; animation-duration: 44s; animation-delay: -4s; opacity: .85; } .ld-cloud.c4 { top: 82%; width: 200px; animation-duration: 60s; animation-delay: -40s; opacity: .7; }
@keyframes drift { from { transform: translateX(-240px); } to { transform: translateX(calc(100vw + 40px)); } }
.ld-center { position: absolute; inset: calc(var(--sat) + 10px) 0 calc(var(--sab) + 110px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ld-title { font: 400 clamp(56px, 17vw, 96px)/.95 var(--display); color: #fff; letter-spacing: .01em; text-shadow: 0 5px 0 #e0709a, 0 10px 24px rgba(120, 60, 140, .35); -webkit-text-stroke: 3px var(--pink); paint-order: stroke fill; text-align: center; }
.ld-title span { display: inline-block; animation: titleBob 2.4s ease-in-out infinite; } .ld-title span + span { animation-delay: .25s; }
@keyframes titleBob { 50% { transform: translateY(-7px) rotate(-1.5deg); } }
.ld-puff { position: relative; width: clamp(150px, 46vw, 230px); aspect-ratio: 1; margin-top: 4vh; touch-action: manipulation; outline: none; }
.ld-body { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 90%; transition: opacity .25s; }
.ld-body.sleep { animation: breathe 2.8s ease-in-out infinite; } .ld-body.awake { opacity: 0; }
.ld-puff.awake .ld-body.sleep { opacity: 0; } .ld-puff.awake .ld-body.awake { opacity: 1; animation: hop 1.1s ease-in-out infinite; }
.ld-puff.poke .ld-body { animation: poke .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes breathe { 0%, 100% { transform: scale(.96, .94); } 50% { transform: scale(1.04, 1.07); } }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1.04, .94); } 45% { transform: translateY(-16px) scale(.96, 1.06); } }
@keyframes poke { 0% { transform: scale(1.18, .78); } 50% { transform: scale(.88, 1.18) translateY(-10px); } 100% { transform: scale(1); } }
.ld-shadow { position: absolute; left: 14%; right: 14%; bottom: -3%; height: 7%; border-radius: 50%; background: rgba(110, 70, 150, .2); filter: blur(4px); animation: shadowPulse 2.8s ease-in-out infinite; }
@keyframes shadowPulse { 50% { transform: scaleX(1.08); opacity: .8; } }
.ld-zzz { position: absolute; right: -4%; top: -8%; font: 400 28px var(--display); color: #fff; text-shadow: 0 2px 0 var(--pink); }
.ld-zzz b { position: absolute; opacity: 0; animation: zzz 3s ease-in infinite; } .ld-zzz b:nth-child(2) { animation-delay: 1s; font-size: .8em; } .ld-zzz b:nth-child(3) { animation-delay: 2s; font-size: .65em; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 10px) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(22px, -42px) scale(1.2); } }
.ld-puff.awake .ld-zzz { display: none; }
.ld-ring { position: absolute; inset: 6%; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .9); opacity: 0; }
.ld-puff.poke .ld-ring { animation: ring .7s ease-out; }
@keyframes ring { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.ld-prompt { margin: 14px 0 0; font: 400 24px/1 var(--display); color: var(--ink); letter-spacing: .02em; animation: promptPulse 1.6s ease-in-out infinite; text-shadow: 0 2px 0 rgba(255, 255, 255, .8); }
.ld-prompt.done { animation: none; color: var(--pinkd); }
@keyframes promptPulse { 50% { transform: scale(1.08); opacity: .75; } }
.ld-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 calc(var(--sar) + 36px) calc(var(--sab) + 30px) calc(var(--sal) + 36px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ld-bar { width: min(100%, 320px); height: 18px; border-radius: 12px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 2px 4px rgba(120, 90, 170, .2); overflow: hidden; border: 2px solid #fff; }
.ld-fill { height: 100%; width: 0%; border-radius: 10px; background: repeating-linear-gradient(115deg, #ff8fb3 0 12px, #ffa9c4 12px 24px); background-size: 34px 100%; animation: stripes .8s linear infinite; transition: width .25s ease-out; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45); }
@keyframes stripes { to { background-position: 34px 0; } }
.ld-status { margin: 0; font: 800 14px var(--body); color: var(--ink2); letter-spacing: .04em; text-transform: uppercase; } .ld-status b { color: var(--pinkd); font-family: var(--display); font-weight: 400; font-size: 16px; }

/* ---------- home ---------- */
#home { display: flex; flex-direction: column; }
.home-hero { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: calc(var(--sat) + 52px) 24px 0; text-align: center; }
.logo { margin: 0; font: 400 clamp(54px, 17vw, 92px)/.92 var(--display); color: #fff; display: flex; gap: .22em; letter-spacing: .01em; text-shadow: 0 5px 0 #e0709a, 0 10px 26px rgba(120, 60, 140, .35); -webkit-text-stroke: 3px var(--pink); paint-order: stroke fill; }
.logo span { display: inline-block; animation: titleBob 2.6s ease-in-out infinite; } .logo span + span { animation-delay: .3s; }
.tagline { margin: 10px auto 0; max-width: 300px; font: 800 14.5px/1.3 var(--body); color: var(--ink); opacity: .78; }
.hero-spacer { flex: 1; min-height: 120px; width: 100%; }
.home-actions { padding: 0 calc(var(--sar) + 22px) calc(var(--sab) + 20px) calc(var(--sal) + 22px); display: flex; flex-direction: column; gap: 16px; max-width: 460px; width: 100%; margin: 0 auto; }
.stats-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; min-height: 28px; }
.stat { display: flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 14px; background: rgba(255, 255, 255, .6); font: 800 12.5px var(--body); color: var(--ink); } .stat svg { width: 14px; height: 14px; color: #ffb92e; } .stat b { font: 400 15px var(--display); }

/* ---------- level select / daily ---------- */
.level-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 480px; margin: 0 auto; }
.lvl { position: relative; aspect-ratio: .9; border-radius: 22px; background: var(--panel-b); border: 2px solid #fff; box-shadow: 0 5px 0 rgba(125, 90, 170, .18), 0 12px 20px rgba(110, 80, 160, .12); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; transition: transform .12s; overflow: hidden; }
.lvl:active { transform: translateY(3px); }
.lvl .n { font: 400 36px/1 var(--display); color: var(--ink); }
.lvl .nm { font: 800 11px/1.1 var(--body); color: var(--ink2); text-align: center; padding: 0 4px; min-height: 24px; display: flex; align-items: center; }
.lvl .sts { display: flex; gap: 2px; } .lvl .sts svg { width: 18px; height: 18px; color: #e6def2; } .lvl .sts svg.on { color: #ffc531; }
.lvl.locked { background: rgba(255, 255, 255, .5); } .lvl.locked .n, .lvl.locked .nm { opacity: .45; }
.lvl .lock { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; color: #b8a9cf; }
.lvl.next { box-shadow: 0 5px 0 #d94f80, 0 12px 22px rgba(226, 87, 138, .3); background: linear-gradient(180deg, #fff, #ffe5ee); }
.lvl.next::after { content: 'NEW'; position: absolute; top: 8px; left: 8px; font: 400 10px var(--display); background: var(--pink); color: #fff; padding: 3px 6px; border-radius: 8px; }
.daily-date { text-align: center; margin: 4px 0 14px; font: 400 20px var(--display); color: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, .7); }
.daily-list { display: flex; flex-direction: column; gap: 12px; max-width: 480px; margin: 0 auto 14px; }
.dcard { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 24px; background: var(--panel-b); border: 2px solid #fff; box-shadow: 0 5px 0 rgba(125, 90, 170, .18), 0 12px 20px rgba(110, 80, 160, .12); text-align: left; width: 100%; transition: transform .12s; }
.dcard:active { transform: translateY(3px); }
.dcard .badge { width: 50px; height: 50px; border-radius: 17px; display: grid; place-items: center; font: 400 24px var(--display); color: #fff; flex: none; background: linear-gradient(180deg, #8fe0c0, #4fc79a); }
.dcard:nth-child(2) .badge { background: linear-gradient(180deg, #ffd27a, #ffb13d); } .dcard:nth-child(3) .badge { background: linear-gradient(180deg, #ff9bb8, #f06292); }
.dcard .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dcard .info b { font: 400 20px/1 var(--display); } .dcard .info small { font: 800 12px var(--body); color: var(--ink2); }
.dcard .sts { display: flex; gap: 2px; } .dcard .sts svg { width: 22px; height: 22px; color: #e6def2; } .dcard .sts svg.on { color: #ffc531; }
.dcard.done .badge::after { content: ''; }
.daily-all { text-align: center; font: 400 18px var(--display); color: var(--pinkd); margin: 4px 0 12px; }

/* ---------- settings ---------- */
.panel { background: var(--panel-b); border: 2px solid #fff; border-radius: 26px; padding: 8px; box-shadow: var(--shadow); max-width: 480px; margin: 0 auto 16px; }
.toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; border-radius: 18px; text-align: left; }
.toggle + .toggle { border-top: 2px solid rgba(190, 170, 220, .22); border-radius: 0; }
.t-ico { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(180deg, #d9ccff, #bba8ff); color: #fff; flex: none; }
.t-label { flex: 1; font: 400 20px/1.1 var(--display); display: flex; flex-direction: column; gap: 3px; } .t-label small { font: 700 12px var(--body); color: var(--ink2); }
.switch { width: 54px; height: 32px; border-radius: 16px; background: #d8cfe6; position: relative; transition: background .2s; flex: none; box-shadow: inset 0 2px 4px rgba(100, 70, 150, .2); }
.switch i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(90, 60, 130, .3); transition: transform .2s cubic-bezier(.3, 1.5, .5, 1); }
[aria-checked='true'] .switch { background: linear-gradient(180deg, #8fe3c3, #55cc9f); } [aria-checked='true'] .switch i { transform: translateX(22px); }
.toggle.na { opacity: .55; }
.sec-title { max-width: 480px; margin: 18px auto 8px; padding: 0 8px; font: 400 18px var(--display); color: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, .7); } .sec-title em { font: 800 12px var(--body); font-style: normal; color: var(--ink2); margin-left: 6px; }
.shop-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 12px; text-align: left; opacity: .62; } .shop-row + .shop-row { border-top: 2px solid rgba(190, 170, 220, .22); }
.shop-row span { display: flex; flex-direction: column; gap: 2px; } .shop-row b { font: 400 18px var(--display); } .shop-row small { font: 700 12px var(--body); color: var(--ink2); }
.shop-row em { font: 400 14px var(--display); font-style: normal; background: #efe8fa; color: var(--ink2); padding: 6px 12px; border-radius: 12px; }

/* ---------- game HUD ---------- */
.hud { position: absolute; top: 0; left: 0; right: 0; padding: calc(var(--sat) + 8px) calc(var(--sar) + 12px) 0 calc(var(--sal) + 12px); display: flex; flex-direction: column; align-items: center; gap: 7px; pointer-events: none; }
.hud-row { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; }
.hud button { pointer-events: auto; }
.tapbox { flex: 1; min-width: 0; height: 52px; border-radius: 20px; background: var(--panel); border: 2px solid rgba(255, 255, 255, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 0 rgba(125, 90, 170, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tap-n { font: 400 28px/.95 var(--display); color: var(--ink); } .tap-n.bump { animation: numBump .25s ease-out; } @keyframes numBump { 40% { transform: scale(1.3); color: var(--pinkd); } }
.tap-l { font: 800 10.5px/1.1 var(--body); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 8px; } .tap-l b { color: var(--pinkd); }
.meter { display: flex; align-items: center; gap: 8px; width: min(100%, 330px); height: 30px; padding: 0 12px; border-radius: 15px; background: var(--panel); border: 2px solid rgba(255, 255, 255, .92); box-shadow: 0 3px 0 rgba(125, 90, 170, .15); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.m-label { font: 400 12px var(--display); color: var(--ink2); letter-spacing: .04em; text-transform: uppercase; }
.m-track { position: relative; flex: 1; height: 12px; border-radius: 8px; background: rgba(150, 120, 200, .2); }
.m-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px; background: linear-gradient(90deg, #ffc4da, #ff7fa6); }
.m-limit { position: absolute; top: -5px; bottom: -5px; width: 0; transition: left .12s; } .m-limit::before { content: ''; position: absolute; left: -1.5px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--ink); }
.m-limit i { position: absolute; left: -5px; top: -8px; width: 10px; height: 8px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.m-limit.hide { display: none; }
.m-state { min-width: 58px; text-align: right; font: 400 14px var(--display); color: #2fa97d; } .m-state.warn { color: #e69a1c; } .m-state.bad { color: #e0476e; }
.callout { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 132px); text-align: center; font: 400 clamp(30px, 9vw, 44px)/1 var(--display); color: #fff; letter-spacing: .02em; text-shadow: 0 4px 0 #e0709a, 0 8px 18px rgba(120, 60, 140, .35); -webkit-text-stroke: 2.5px var(--pink); paint-order: stroke fill; opacity: 0; pointer-events: none; transform: scale(.7); }
.callout.show { animation: callout 1.15s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes callout { 0% { opacity: 0; transform: scale(.5) rotate(-4deg); } 18% { opacity: 1; transform: scale(1.12) rotate(2deg); } 30% { transform: scale(1) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px) scale(1); } }
.start-hint { position: absolute; left: 0; right: 0; top: 36%; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; transition: opacity .25s; }
.start-hint b { font: 400 30px/1 var(--display); color: #fff; text-shadow: 0 3px 0 #e0709a, 0 6px 14px rgba(120, 60, 140, .3); -webkit-text-stroke: 2px var(--pink); paint-order: stroke fill; animation: promptPulse 1.4s ease-in-out infinite; }
.start-hint span { font: 800 13px/1.3 var(--body); color: var(--ink); background: rgba(255, 255, 255, .72); padding: 6px 14px; border-radius: 14px; max-width: 78vw; text-align: center; } .start-hint span:empty { display: none; }
.start-hint.hide { opacity: 0; }
.fail-card { position: absolute; left: 50%; top: 46%; width: min(84vw, 320px); padding: 18px 20px 20px; border-radius: 28px; background: var(--panel-b); border: 2px solid #fff; box-shadow: var(--shadow); text-align: center; display: flex; flex-direction: column; gap: 10px; transform: translate(-50%, -40%) scale(.85); opacity: 0; pointer-events: none; transition: opacity .18s, transform .22s cubic-bezier(.2, 1.5, .4, 1); }
.fail-card.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.fail-card h3 { margin: 0; font: 400 32px/1 var(--display); color: var(--pinkd); } .fail-card p { margin: 0; font: 800 14px/1.35 var(--body); color: var(--ink2); }

/* ---------- modals ---------- */
.modal { position: relative; width: min(100%, 360px); max-height: 100%; overflow: auto; padding: 24px 22px 20px; border-radius: 34px; background: var(--panel-b); border: 2px solid #fff; box-shadow: 0 20px 50px rgba(80, 50, 130, .35); display: flex; flex-direction: column; gap: 12px; animation: none; }
.screen.active .modal { animation: modalIn .42s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.9); } }
.modal h2 { margin: 0; text-align: center; font: 400 36px/1 var(--display); color: var(--ink); }
.rs-name { margin: -6px 0 0; text-align: center; font: 800 14px var(--body); color: var(--ink2); }
.stars { display: flex; justify-content: center; gap: 6px; margin: 2px 0 2px; }
.stars .st { width: 66px; height: 66px; color: #e6def2; transform: translateY(10px) scale(.6); opacity: .6; transition: none; }
.stars .st.on { color: #ffc531; animation: starPop .55s cubic-bezier(.2, 1.7, .4, 1) forwards; filter: drop-shadow(0 4px 0 rgba(224, 160, 40, .5)); }
.stars .st:nth-child(2).on { animation-delay: .22s; margin-top: -10px; } .stars .st:nth-child(3).on { animation-delay: .44s; }
.stars .st.off { animation: starIn .35s ease-out forwards; }
@keyframes starPop { 0% { transform: translateY(10px) scale(.2) rotate(-40deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes starIn { to { transform: none; opacity: 1; } }
.rs-grid { display: flex; justify-content: space-around; padding: 10px 6px; border-radius: 20px; background: rgba(205, 191, 255, .25); }
.rs-grid div { display: flex; flex-direction: column; align-items: center; gap: 2px; } .rs-grid small { font: 800 11px var(--body); color: var(--ink2); text-transform: uppercase; letter-spacing: .08em; } .rs-grid b { font: 400 30px/1 var(--display); }
.rs-badge { margin: 0; min-height: 20px; text-align: center; font: 400 17px var(--display); color: var(--pinkd); }
.confetti-lip { position: absolute; left: 0; right: 0; top: -2px; height: 6px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--pink) 0 14px, var(--butter) 14px 28px, var(--mint) 28px 42px, var(--lav) 42px 56px); opacity: .0; }

/* rotate nudge + toast */
.rot-card { text-align: center; background: var(--panel-b); padding: 22px 30px; border-radius: 30px; border: 2px solid #fff; box-shadow: var(--shadow); max-width: 320px; }
.rot-card h2 { margin: 10px 0 4px; font: 400 26px var(--display); } .rot-card p { margin: 0; font: 800 14px var(--body); color: var(--ink2); }
.rot-phone { width: 44px; height: 76px; border-radius: 12px; border: 5px solid var(--ink); margin: 0 auto; position: relative; animation: rot 2.4s ease-in-out infinite; } .rot-phone i { position: absolute; left: 50%; bottom: 5px; width: 14px; height: 4px; margin-left: -7px; border-radius: 3px; background: var(--ink); }
@keyframes rot { 0%, 20% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0); } }
#rotate { z-index: 50; }
.toast { position: absolute; left: 50%; bottom: calc(var(--sab) + 28px); transform: translate(-50%, 20px); background: rgba(74, 53, 102, .92); color: #fff; padding: 10px 18px; border-radius: 16px; font: 800 14px var(--body); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s; max-width: 86vw; text-align: center; z-index: 60; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ld-cloud, .ld-title span, .logo span { animation: none; } }
html.reduce-motion .ld-cloud, html.reduce-motion .ld-title span, html.reduce-motion .logo span { animation: none; }
@media (max-height: 700px) { .btn-xl { height: 60px; font-size: 27px; } .btn-daily { height: 60px; } .home-actions { gap: 16px; } .home-hero { padding-top: calc(var(--sat) + 46px); } .tagline { display: none; } .hero-spacer { min-height: 90px; } }
@media (min-width: 700px) and (min-height: 700px) { .home-hero { padding-top: calc(var(--sat) + 90px); } .btn-xl { height: 76px; } }

/* crafted logotype (SVG lettering, hand-set size/baseline/tilt per letter) */
.logo, .ld-title { margin: 0; display: block; line-height: 0; -webkit-text-stroke: 0; text-shadow: none; }
.logotype { width: min(84vw, 440px); height: auto; overflow: visible; filter: drop-shadow(0 10px 18px rgba(110, 50, 140, .28)); }
.lt-bob { animation: ltBob 3.2s ease-in-out infinite; transform-origin: 350px 120px; }
.lt-sp { animation: ltSp 2.4s ease-in-out infinite; transform-origin: 350px 120px; }
@keyframes ltBob { 50% { transform: translateY(-6px) rotate(-.8deg); } }
@keyframes ltSp { 50% { opacity: .35; } }
html.reduce-motion .lt-bob, html.reduce-motion .lt-sp { animation: none; }
@media (prefers-reduced-motion: reduce) { .lt-bob, .lt-sp { animation: none; } }
@media (max-height: 700px) { .logotype { width: min(80vw, 380px); } }

/* cinematic loader dressing: glow, gate to squeeze through, resting pad, twinkles */
.ld-glow { position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; transform: translate(-50%, -52%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 214, 232, .45) 45%, rgba(255, 255, 255, 0) 72%); animation: glowPulse 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes glowPulse { 50% { opacity: .65; transform: translate(-50%, -52%) scale(1.06); } }
.ld-puff.awake .ld-glow { animation: glowFlash 1.2s ease-out 1, glowPulse 3.6s ease-in-out 1.2s infinite; }
@keyframes glowFlash { 0% { transform: translate(-50%, -52%) scale(.6); opacity: 1; } 100% { transform: translate(-50%, -52%) scale(1.15); opacity: .9; } }
.ld-gate { position: absolute; inset: 0; pointer-events: none; }
.ld-gate b { position: absolute; left: 62%; width: 30%; border-radius: 22px; background: linear-gradient(90deg, #e6ddff, #b6a2ff 60%, #a08af0); box-shadow: 4px 6px 0 rgba(90, 60, 140, .16), inset 0 0 0 2px rgba(255, 255, 255, .55); }
.ld-gate b::after { content: ''; position: absolute; left: -12%; right: -12%; height: 14%; min-height: 12px; border-radius: 99px; background: #fff4fa; }
.ld-gate .gt { bottom: 112%; height: 46%; } .ld-gate .gt::after { bottom: 0; }
.ld-gate .gb { top: 112%; height: 40%; } .ld-gate .gb::after { top: 0; }
.ld-pad { position: absolute; left: -6%; right: -6%; bottom: -9%; height: 11%; border-radius: 99px; background: linear-gradient(#ffe3ec, #ffb9cf 55%, #ff93b6); box-shadow: 0 6px 0 rgba(190, 100, 150, .22); }
.ld-pad::after { content: ''; position: absolute; left: 8%; right: 8%; top: 18%; height: 18%; border-radius: 99px; background: rgba(255, 255, 255, .7); }
.ld-shadow { display: none; }
.ld-puff { margin-top: 5vh; } .ld-body { z-index: 1; } .ld-zzz, .ld-ring { z-index: 2; }
.ld-star { position: absolute; width: 10px; height: 10px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 2.6s ease-in-out infinite; opacity: .9; }
.ld-star.s1 { left: 14%; top: 22%; } .ld-star.s2 { left: 82%; top: 12%; width: 14px; height: 14px; animation-delay: -.8s; } .ld-star.s3 { left: 70%; top: 52%; animation-delay: -1.5s; } .ld-star.s4 { left: 22%; top: 58%; width: 8px; height: 8px; animation-delay: -.4s; } .ld-star.s5 { left: 90%; top: 40%; width: 8px; height: 8px; animation-delay: -2s; } .ld-star.s6 { left: 8%; top: 40%; width: 12px; height: 12px; animation-delay: -1.1s; }
@keyframes twinkle { 50% { transform: scale(.4); opacity: .3; } }
html.reduce-motion .ld-star, html.reduce-motion .ld-glow { animation: none; }
.ld-prompt { margin-top: 22px !important; }
.ld-gate { display: none; }

/* =====================================================================================================================
   v2 UI KIT: "dusk glass". Deep indigo glass panels, cream type, one warm accent (sunset orange) and one cool accent (teal).
   Overrides the v1 pastel kit above (later rules win).
   ===================================================================================================================== */
:root {
  --ink: #fff3e0; --ink2: rgba(255, 243, 224, .68); --pink: #ff8a4c; --pinkd: #ffb36b; --mint: #35d0c6; --butter: #ffc857; --coral: #ff6b6b;
  --panel: rgba(24, 16, 66, .58); --panel-b: rgba(30, 20, 82, .82); --shadow: 0 14px 34px rgba(6, 2, 28, .42);
  --glass-line: rgba(255, 243, 224, .22); --glass-hi: rgba(255, 243, 224, .12);
}
html, body { background: #150f3a; }
.topbar .screen-title, .screen-title { color: #fff3e0; text-shadow: 0 2px 0 #e4553b, 0 5px 14px rgba(0, 0, 0, .35); -webkit-text-stroke: 0; font-size: 26px; letter-spacing: .03em; }
.icon-btn { background: var(--panel); color: #fff3e0; border: 1.5px solid var(--glass-line); box-shadow: 0 6px 16px rgba(6, 2, 28, .35), inset 0 1px 0 var(--glass-hi); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }
.pill { background: var(--panel); color: #fff3e0; border: 1.5px solid var(--glass-line); box-shadow: 0 6px 16px rgba(6, 2, 28, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn { color: #fff3e0; letter-spacing: .02em; }
.btn-primary { color: #2a1450; background: linear-gradient(180deg, #ffd27a 0%, #ff9b4a 55%, #ff7a3d 100%); box-shadow: 0 5px 0 #b8421f, 0 14px 28px rgba(255, 122, 61, .38), inset 0 2px 0 rgba(255, 255, 255, .6); border: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.btn-primary:active { box-shadow: 0 2px 0 #b8421f, 0 6px 12px rgba(255, 122, 61, .3), inset 0 2px 0 rgba(255, 255, 255, .5); }
.btn-soft { background: var(--panel); color: #fff3e0; border: 1.5px solid var(--glass-line); box-shadow: 0 5px 0 rgba(8, 4, 34, .55), 0 12px 24px rgba(6, 2, 28, .3), inset 0 1px 0 var(--glass-hi); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }
.btn-daily { background: linear-gradient(180deg, rgba(53, 208, 198, .34), rgba(23, 130, 156, .42)); color: #fff3e0; border: 1.5px solid rgba(168, 243, 234, .45); box-shadow: 0 5px 0 rgba(8, 40, 70, .6), 0 12px 24px rgba(6, 2, 28, .3), inset 0 1px 0 rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-daily .d-icon { background: linear-gradient(180deg, #8ff0e6, #35d0c6); color: #0e3a52; }
.btn-daily .d-text small { color: rgba(255, 243, 224, .75); }
.stat { background: var(--panel); color: #fff3e0; border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tagline { color: #fff3e0; opacity: .85; text-shadow: 0 2px 10px rgba(10, 4, 40, .6); font-weight: 800; }
.logotype { filter: drop-shadow(0 8px 18px rgba(255, 138, 76, .35)) drop-shadow(0 2px 0 rgba(10, 4, 40, .4)); }
.lvl, .dcard, .panel, .modal, .fail-card, .rot-card { background: var(--panel-b); border: 1.5px solid var(--glass-line); box-shadow: 0 6px 0 rgba(8, 4, 34, .5), var(--shadow), inset 0 1px 0 var(--glass-hi); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.lvl .n { color: #fff3e0; } .lvl .nm { color: var(--ink2); }
.lvl .sts svg, .dcard .sts svg { color: rgba(255, 243, 224, .22); } .lvl .sts svg.on, .dcard .sts svg.on { color: #ffc857; filter: drop-shadow(0 0 4px rgba(255, 200, 87, .6)); }
.lvl.locked { background: rgba(24, 16, 66, .42); } .lvl .lock { color: rgba(255, 243, 224, .5); }
.lvl.next { background: linear-gradient(180deg, rgba(255, 155, 74, .38), rgba(255, 122, 61, .22)); border-color: rgba(255, 200, 120, .7); box-shadow: 0 6px 0 rgba(184, 66, 31, .65), 0 14px 28px rgba(255, 122, 61, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.lvl.next::after { background: #ffc857; color: #2a1450; }
.dcard .badge { color: #2a1450; }
.t-ico { background: linear-gradient(180deg, #8f7bff, #5a46d6); color: #fff3e0; }
.t-label small, .shop-row small { color: var(--ink2); }
.toggle + .toggle, .shop-row + .shop-row { border-top-color: rgba(255, 243, 224, .12); }
.switch { background: rgba(255, 243, 224, .18); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
.switch i { background: #fff3e0; }
.toggle[aria-checked="true"] .switch, .switch.on { background: linear-gradient(180deg, #5ee6d8, #1fb3a8); }
.shop-row em { background: rgba(255, 243, 224, .1); color: var(--ink2); }
.tapbox { background: var(--panel); border: 1.5px solid var(--glass-line); box-shadow: 0 6px 16px rgba(6, 2, 28, .35), inset 0 1px 0 var(--glass-hi); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tap-n { color: #ffd27a; text-shadow: 0 2px 0 rgba(10, 4, 40, .5); } .tap-l { color: var(--ink2); } .tap-l b { color: #ffb36b; }
.meter { background: var(--panel); border: 1.5px solid var(--glass-line); box-shadow: 0 6px 16px rgba(6, 2, 28, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.m-label { color: var(--ink2); } .m-track { background: rgba(255, 243, 224, .14); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
.m-fill { background: linear-gradient(90deg, #ffd27a, #ff7a3d); box-shadow: 0 0 10px rgba(255, 138, 76, .6); }
.callout { color: #fff3e0; -webkit-text-stroke: 0; text-shadow: 0 3px 0 #e4553b, 0 8px 20px rgba(10, 4, 40, .55); }
.start-hint b { color: #fff3e0; -webkit-text-stroke: 0; text-shadow: 0 3px 0 #e4553b, 0 8px 18px rgba(10, 4, 40, .5); }
.start-hint span { color: #fff3e0; background: var(--panel); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fail-card h3 { color: #ffb36b; } .fail-card p { color: var(--ink2); }
.modal h2 { color: #fff3e0; text-shadow: 0 2px 0 #e4553b; }
.rs-name, .rs-grid small { color: var(--ink2); } .rs-grid { background: rgba(255, 243, 224, .08); } .rs-badge { color: #ffc857; }
.stars .st { color: rgba(255, 243, 224, .2); } .stars .st.on { color: #ffc857; filter: drop-shadow(0 0 10px rgba(255, 200, 87, .7)); }
.toast { background: rgba(255, 243, 224, .94); color: #241a4d; }
.rot-card p { color: var(--ink2); }
.ld-prompt { color: #fff3e0; text-shadow: 0 2px 10px rgba(10, 4, 40, .6); } .ld-prompt.done { color: #ffc857; }
.ld-bar { background: rgba(255, 243, 224, .14); border: 1.5px solid var(--glass-line); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
.ld-fill { background: repeating-linear-gradient(115deg, #ffb36b 0 12px, #ff8a4c 12px 24px); box-shadow: 0 0 12px rgba(255, 138, 76, .7); }
.ld-status { color: var(--ink2); } .ld-status b { color: #ffc857; }
.ld-glow { background: radial-gradient(closest-side, rgba(255, 214, 140, .75), rgba(255, 138, 76, .3) 45%, rgba(255, 138, 76, 0) 72%); }
.ld-pad { background: linear-gradient(#ffe9c9, #ff9d6b); box-shadow: 0 6px 0 rgba(20, 8, 60, .35); }
.ld-star { background: #fff3e0; }
/* non-game screens sit on a dimmed, vignetted scene so glass UI keeps contrast */
#home::before, #levels::before, #daily::before, #settings::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
#home::before { background: linear-gradient(180deg, rgba(14, 8, 48, .35) 0%, rgba(14, 8, 48, 0) 28%, rgba(14, 8, 48, 0) 52%, rgba(14, 8, 48, .78) 100%); }
#levels::before, #daily::before, #settings::before { background: linear-gradient(180deg, rgba(14, 8, 48, .55), rgba(14, 8, 48, .78)); }
.fail-card { top: auto !important; bottom: calc(var(--sab) + 28px); transform: translate(-50%, 24px) scale(.96); }
.fail-card.show { transform: translate(-50%, 0) scale(1) !important; }
/* QA hardening: >=16px between adjacent buttons on home; Share is a small corner icon, away from the primary action */
.row3 { gap: 16px !important; }
#home .topbar { gap: 16px; }
@media (max-height: 700px) { }

/* =====================================================================================================================
   v2.1 DECLUTTER + SPACING SYSTEM (8pt grid). Tokens: space 8/16/24/32, radius 16 (controls) / 24 (cards) / 28 (sheets),
   icon 24, icon-button 48, secondary button 48, primary 56-64. One primary action per screen; secondary actions are quiet.
   ===================================================================================================================== */
:root { --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --r1: 16px; --r2: 24px; --r3: 28px; }
.dot { opacity: .45; margin: 0 4px; }
/* top bars */
.topbar { padding: calc(var(--sat) + var(--s2)) calc(var(--sar) + var(--s2)) var(--s1) calc(var(--sal) + var(--s2)); gap: var(--s2); }
.icon-btn { width: 48px; height: 48px; border-radius: var(--r1); } .icon-btn.small { width: 44px; height: 44px; border-radius: 14px; }
.pill { height: 40px; border-radius: 20px; }
.screen-title { font-size: 24px; }
/* buttons */
.btn { height: 56px; border-radius: var(--r2); } .btn-xl { height: 64px; font-size: 28px; border-radius: var(--r2); }
.btn-ghost { height: 48px; border-radius: var(--r1); background: transparent; color: var(--ink2); font: 400 17px/1 var(--display); letter-spacing: .02em; gap: var(--s1); }
.btn-ghost svg { width: 20px; height: 20px; } .btn-ghost:active { background: rgba(255, 243, 224, .08); }
.btn-daily { height: 72px; border-radius: var(--r2); }
.round-btn { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 2px; background: var(--panel); color: #fff3e0; border: 1.5px solid var(--glass-line); box-shadow: 0 5px 0 rgba(8, 4, 34, .5), inset 0 1px 0 var(--glass-hi); flex: none; }
.round-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(8, 4, 34, .5); } .round-btn svg { width: 24px; height: 24px; }
.round-btn small { display: none; }
/* HOME: one hero, one primary, one card, quiet extras */
.home-hero { padding: calc(var(--sat) + 64px) var(--s3) 0; }
.tagline { margin-top: var(--s2); font-size: 15px; opacity: .8; }
.home-actions { padding: 0 calc(var(--sar) + var(--s3)) calc(var(--sab) + var(--s2)) calc(var(--sal) + var(--s3)); }
.stats-line { margin: 0; text-align: center; font: 800 13px/1 var(--body); color: var(--ink2); display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 16px; }
.stats-line b { color: #fff3e0; } .stats-line .i-inline { width: 14px; height: 14px; color: #ffc857; }
.streak { background: rgba(10, 4, 40, .35) !important; border: 1px solid var(--glass-line); color: #fff3e0 !important; } .streak.zero { opacity: .55; }
/* GAME HUD: pause · counter(par, pips) · restart, then a hairline air gauge */
.hud { padding: calc(var(--sat) + var(--s2)) calc(var(--sar) + var(--s2)) 0 calc(var(--sal) + var(--s2)); gap: 12px; }
.hud-row { gap: var(--s2); justify-content: space-between; }
.tapbox { flex: 0 1 auto; min-width: 150px; height: 48px; padding: 0 var(--s2); flex-direction: row; justify-content: center; gap: 10px; border-radius: 24px; }
.tap-n { font: 400 28px/1 var(--display); min-width: 24px; text-align: center; } .tap-l { font: 800 13px/1 var(--body); color: var(--ink2); } .tap-l b { color: #ffb36b; font-weight: 800; }
.pips { display: flex; gap: 2px; } .pip { width: 14px; height: 14px; color: rgba(255, 243, 224, .2); transition: color .25s, transform .25s; } .pip.on { color: #ffc857; filter: drop-shadow(0 0 4px rgba(255, 200, 87, .55)); }
.meter { width: min(100%, 160px); height: 12px; padding: 2px; border-radius: 8px; background: rgba(10, 4, 40, .35); border: 1px solid var(--glass-line); box-shadow: none; display: block; opacity: .9; }
.m-track { height: 100%; border-radius: 6px; background: transparent; box-shadow: none; } .m-fill { border-radius: 6px; box-shadow: 0 0 8px rgba(255, 138, 76, .55); }
/* intro card replaces the old crowded start hint */
.start-hint { top: 30%; gap: var(--s1); padding: 0 var(--s3); text-align: center; }
.start-hint small { font: 800 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 243, 224, .75); text-shadow: 0 1px 8px rgba(10, 4, 40, .6); }
.start-hint h2 { margin: 0; font: 400 40px/1.05 var(--display); color: #fff3e0; text-shadow: 0 3px 0 #e4553b, 0 10px 24px rgba(10, 4, 40, .5); }
.start-hint span { background: none; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; font: 800 15px/1.35 var(--body); max-width: 280px; text-shadow: 0 1px 10px rgba(10, 4, 40, .7); }
.start-hint .go { margin-top: var(--s2); font: 400 15px/1 var(--display); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #ffd27a; padding: 10px 18px; border-radius: 20px; background: rgba(10, 4, 40, .45); border: 1px solid var(--glass-line); animation: promptPulse 1.6s ease-in-out infinite; }
.callout { top: calc(var(--sat) + 120px); }
.fail-card { padding: var(--s3); gap: var(--s2); border-radius: var(--r3); } .fail-card h3 { font-size: 28px; } .fail-card p { font-size: 14px; }
/* LEVEL SELECT: airy world list, one row of three nodes per world */
.world-list { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s1) var(--s3) var(--s4); max-width: 480px; margin: 0 auto; }
.world header { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s2); }
.world header h3 { margin: 0; font: 400 20px/1.1 var(--display); color: #fff3e0; } .world header small { font: 800 12px/1.2 var(--body); color: var(--ink2); }
.world header > div { flex: 1; } .w-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--wc, #ffb36b); box-shadow: 0 0 12px var(--wc, #ffb36b); }
.w-stars { font: 800 13px var(--body); color: var(--ink2); display: flex; align-items: center; } .w-stars .lock { width: 18px; height: 18px; opacity: .6; }
.world[data-w="0"] { --wc: #ffb36b; } .world[data-w="1"] { --wc: #7cc4ff; } .world[data-w="2"] { --wc: #ff7a5c; } .world[data-w="3"] { --wc: #35d0c6; } .world[data-w="4"] { --wc: #ff4fa8; } .world[data-w="5"] { --wc: #a8a8ff; }
.world.locked { opacity: .5; }
.w-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.lvl { aspect-ratio: auto; height: 88px; border-radius: var(--r2); gap: 6px; box-shadow: 0 5px 0 rgba(8, 4, 34, .5), inset 0 1px 0 var(--glass-hi); }
.lvl .n { font-size: 30px; } .lvl .sts svg { width: 16px; height: 16px; } .lvl .nm, .lvl .lock { display: none; }
.lvl.locked .n { opacity: .4; } .lvl.next::after { top: 6px; left: auto; right: 8px; }
.dcard { border-radius: var(--r2); padding: var(--s2); }
.daily-date { margin: 0 0 var(--s2); } .foot-note { margin: var(--s2) 0 0; opacity: .7; }
.scroll { padding-left: var(--s3); padding-right: var(--s3); }
/* SETTINGS: four switches, everything else tucked into More */
.panel { padding: var(--s1); border-radius: var(--r2); }
.toggle { min-height: 64px; padding: var(--s1) var(--s2); } .t-label { font-size: 19px; } .t-label small:empty { display: none; } .t-label small { font-size: 12px; }
.more { max-width: 480px; margin: var(--s2) auto 0; } .more summary { list-style: none; cursor: pointer; padding: 14px var(--s2); text-align: center; font: 400 16px var(--display); color: var(--ink2); letter-spacing: .04em; }
.more summary::-webkit-details-marker { display: none; } .more[open] summary { opacity: .6; } .more .btn { margin-bottom: var(--s2); height: 48px; font-size: 18px; }
.fine { text-align: center; color: var(--ink2); font: 700 12px/1.4 var(--body); margin: 8px 0; }
/* PAUSE + RESULT sheets */
.modal { padding: var(--s3); border-radius: var(--r3); gap: var(--s2); }
.pause-modal { gap: var(--s3); } .pause-modal h2 { font-size: 32px; }
.icon-row { display: flex; justify-content: center; gap: var(--s2); } .icon-row .round-btn { width: 64px; height: 64px; border-radius: 20px; } .icon-row .round-btn small { display: block; font: 800 11px/1 var(--body); color: var(--ink2); }
.icon-row .round-btn { height: 72px; }
.result { gap: 12px; align-items: stretch; text-align: center; } .result h2 { font-size: 34px; } .rs-name { margin: 0; font: 800 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.rs-line { margin: 0; font: 800 15px var(--body); color: var(--ink2); } .rs-line b { color: #fff3e0; font-size: 18px; }
.rs-badge { min-height: 20px; font-size: 15px; }
.action-row { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s1); } .action-row .btn { flex: 1; }
.link-btn { display: none; }
.stars .st { width: 56px; height: 56px; }
/* motion: one easing for everything interactive */
.btn, .icon-btn, .round-btn, .lvl, .toggle, .dcard { transition: transform .16s cubic-bezier(.2, .9, .3, 1.2), box-shadow .16s, background .2s, opacity .2s; }
@media (max-height: 700px) {
  .home-hero { padding-top: calc(var(--sat) + 56px); } .btn-xl { height: 60px; } .btn-daily { height: 64px; } .tagline { display: none; } .start-hint { top: 26%; } .start-hint h2 { font-size: 34px; }
  .world-list { gap: var(--s3); } .lvl { height: 80px; } .modal { padding: var(--s2) var(--s3) var(--s3); } .stars .st { width: 48px; height: 48px; }
}
.action-row .btn { white-space: nowrap; font-size: 20px; padding: 0 var(--s2); }
/* loader in the dusk palette (matches the worlds) */
#loader { background: linear-gradient(180deg, #1d1250 0%, #4a2390 26%, #a8366e 54%, #ff7f6e 78%, #ffc07a 100%); }
.ld-cloud { background: rgba(255, 190, 170, .22); filter: none; }
.ld-sky::before { content: ''; position: absolute; inset: 0; opacity: .8; background-image: radial-gradient(1.5px 1.5px at 12% 10%, #fff, transparent), radial-gradient(1px 1px at 28% 22%, #fff, transparent), radial-gradient(1.5px 1.5px at 44% 8%, #fff, transparent), radial-gradient(1px 1px at 63% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 81% 9%, #fff, transparent), radial-gradient(1px 1px at 92% 26%, #fff, transparent), radial-gradient(1px 1px at 7% 34%, #fff, transparent), radial-gradient(1.5px 1.5px at 72% 36%, #fff, transparent); }
.ld-sky::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, #6a2f8e, #2a1b6b); clip-path: polygon(0 62%, 12% 38%, 25% 58%, 40% 24%, 55% 52%, 70% 32%, 85% 58%, 100% 40%, 100% 100%, 0 100%); opacity: .9; }
.ld-title { color: #fff3e0; text-shadow: 0 4px 0 #e4553b, 0 10px 24px rgba(10, 4, 40, .5); -webkit-text-stroke: 3px #241a4d; }
.ld-shadow { background: rgba(10, 4, 40, .35); } .ld-zzz { color: #fff3e0; text-shadow: 0 2px 0 #e4553b; }
.ld-ring { border-color: rgba(255, 243, 224, .9); }
.ld-prompt { color: #fff3e0; text-shadow: 0 2px 12px rgba(10, 4, 40, .7); }
.ld-title { text-shadow: none; -webkit-text-stroke: 0; filter: drop-shadow(0 8px 18px rgba(10,4,40,.45)); }
/* levels: locked worlds are quiet — number only, no stars/blurb */
.lvl.locked .sts, .world.locked header small { display: none; }

/* =====================================================================================================================
   v3 POLISH LAYER (visual pass). Tokens, type scale (captions never below 13px), one radius family, one press feel,
   cleaner loader / home / courses (world tabs) / sheets. Later rules win.
   ===================================================================================================================== */
:root {
  --r0: 10px; --r1: 14px; --r2: 20px; --r3: 28px; --r-pill: 999px;
  --t-cap: 13px; --t-body: 15px; --t-btn: 20px; --t-h2: 30px; --t-h1: 40px;
  --glass: linear-gradient(180deg, rgba(48, 34, 112, .72), rgba(24, 16, 66, .78));
  --glass-line: rgba(255, 243, 224, .2); --glass-hi: rgba(255, 243, 224, .14);
  --ease: cubic-bezier(.2, .9, .3, 1.15);
  --orange: linear-gradient(180deg, #ffe08a 0%, #ffab4f 52%, #ff7a3d 100%);
}
/* shared: icon buttons, pills */
.icon-btn { width: 46px; height: 46px; border-radius: var(--r1); background: var(--glass); }
.icon-btn:active, .btn:active, .round-btn:active, .lvl:active, .dcard:active, .toggle:active { transform: translateY(2px) scale(.985); }
.icon-btn.small { width: 44px; height: 44px; }
.pill { height: 40px; border-radius: var(--r-pill); font-size: 19px; background: var(--glass); }
.screen-title { font-size: 26px; letter-spacing: .02em; }
.topbar { align-items: center; min-height: 66px; }
:focus-visible { outline: 3px solid #ffd27a; outline-offset: 3px; }

/* buttons: one primary look (sunset gloss), one glass look */
.btn { border-radius: var(--r2); height: 58px; font-size: var(--t-btn); }
.btn-primary { background: var(--orange); box-shadow: 0 5px 0 #b8421f, 0 14px 26px rgba(255, 122, 61, .35), inset 0 2px 0 rgba(255, 255, 255, .65), inset 0 -8px 14px rgba(255, 122, 61, .25); color: #3a1450; position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; left: 8%; right: 8%; top: 3px; height: 38%; border-radius: 99px; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); pointer-events: none; }
.btn-xl { height: 68px; font-size: 30px; border-radius: 24px; }
.btn-soft, .btn-daily { background: var(--glass); }
.btn-daily { border-color: rgba(168, 243, 234, .4); background: linear-gradient(180deg, rgba(53, 208, 198, .3), rgba(23, 110, 146, .5)); }
.btn-ghost { color: rgba(255, 243, 224, .85); font-size: 17px; }
.round-btn { background: var(--glass); }
.link-btn { font-size: 15px; color: rgba(255, 243, 224, .8); }

/* ---------- LOADER ---------- */
#loader { background: radial-gradient(120% 60% at 50% 100%, rgba(255, 190, 120, .55), rgba(255, 190, 120, 0) 70%), linear-gradient(180deg, #170f45 0%, #3a1d86 24%, #8e2f9a 48%, #e8587a 72%, #ffa968 90%, #ffd08a 100%); }
.ld-sky::before { content: ''; position: absolute; inset: 0; opacity: .9; background-image: radial-gradient(1.5px 1.5px at 12% 10%, #fff, transparent), radial-gradient(1px 1px at 28% 22%, #fff, transparent), radial-gradient(2px 2px at 44% 7%, #fff, transparent), radial-gradient(1px 1px at 63% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 81% 9%, #fff, transparent), radial-gradient(1px 1px at 92% 26%, #ffd9f2, transparent), radial-gradient(1px 1px at 6% 31%, #fff, transparent), radial-gradient(1.5px 1.5px at 53% 30%, #fff, transparent), radial-gradient(1px 1px at 74% 36%, #fff, transparent), radial-gradient(1px 1px at 36% 38%, #ffe9c9, transparent); }
.ld-sky::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; clip-path: none; opacity: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b4488f'/%3E%3Cstop offset='1' stop-color='%23ff9a7a'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236a2f9a'/%3E%3Cstop offset='1' stop-color='%23311a78'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23402190'/%3E%3Cstop offset='1' stop-color='%231b0f55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M0 96 C30 70 52 52 84 66 C112 78 128 40 168 34 C206 28 224 70 258 66 C292 62 312 38 346 52 C372 62 388 76 400 72 L400 200 L0 200Z'/%3E%3Cpath fill='url(%23b)' d='M0 128 C34 112 60 92 98 104 C132 114 150 84 190 86 C228 88 246 118 282 112 C318 106 340 88 372 98 C386 102 394 108 400 108 L400 200 L0 200Z'/%3E%3Cpath fill='url(%23c)' d='M0 160 C40 148 72 138 112 148 C152 158 176 140 220 142 C262 144 290 162 330 156 C360 152 384 144 400 146 L400 200 L0 200Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.ld-cloud { background: #ffcfbd; opacity: .26; filter: none; border-radius: 40px; }
.ld-cloud.c2 { opacity: .22; } .ld-cloud.c3 { opacity: .3; } .ld-cloud.c4 { opacity: .2; }
.ld-center { inset: calc(var(--sat) + 8px) 0 calc(var(--sab) + 96px); gap: 0; }
.ld-title .logotype { width: min(84vw, 400px); }
.ld-puff { width: clamp(150px, 44vw, 210px); margin-top: 3vh; }
.ld-body.sleep { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: translateY(1px) scale(.985); } 50% { transform: translateY(-2px) scale(1.015); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-14px) rotate(-1.5deg); } }
@keyframes poke { 0% { transform: scale(1.06); } 50% { transform: translateY(-10px) scale(.98); } 100% { transform: scale(1); } }
.ld-pad { background: linear-gradient(#fff0d6, #ffb27a 60%, #f0764a); box-shadow: 0 8px 0 rgba(30, 10, 70, .3), 0 14px 22px rgba(30, 10, 70, .25); }
.ld-prompt { margin-top: 26px !important; padding: 10px 20px; border-radius: var(--r-pill); font-size: 18px; letter-spacing: .02em; background: rgba(24, 16, 66, .42); border: 1.5px solid var(--glass-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-shadow: none; }
.ld-prompt.done { color: #ffd27a; }
.ld-foot { gap: 12px; padding-bottom: calc(var(--sab) + 28px); }
.ld-bar { width: min(100%, 300px); height: 14px; border-radius: 99px; padding: 2px; background: rgba(10, 4, 40, .4); border: 1.5px solid var(--glass-line); }
.ld-fill { border-radius: 99px; background: linear-gradient(180deg, #ffe08a, #ffab4f 55%, #ff7a3d); box-shadow: 0 0 14px rgba(255, 150, 76, .65), inset 0 2px 0 rgba(255, 255, 255, .5); animation: none; }
.ld-status { font-size: 13px; letter-spacing: .1em; color: rgba(255, 243, 224, .8); } .ld-status b { font-size: 16px; color: #ffd27a; }

/* ---------- HOME ---------- */
.home-hero { padding-top: calc(var(--sat) + 60px); }
.logo .logotype { width: min(82vw, 380px); }
.tagline { font-size: 15px; font-weight: 800; max-width: 290px; line-height: 1.35; }
.home-actions { padding-bottom: calc(var(--sab) + 18px); }
.btn-daily { height: 68px; }
.btn-daily .d-text b { font-size: 19px; } .btn-daily .d-text small { font-size: 13px; }
.stats-line { font-size: 14px; min-height: 18px; margin-top: 2px; color: rgba(255, 243, 224, .75); }
.streak { height: 36px; font-size: 18px; }

/* ---------- COURSES: world tabs + compact cards ---------- */
.world-tabs { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 66px); z-index: 2; display: flex; justify-content: center; gap: 10px; padding: 6px calc(var(--sar) + 16px) 8px calc(var(--sal) + 16px); }
.wtab { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--glass); border: 1.5px solid var(--glass-line); box-shadow: 0 4px 0 rgba(8, 4, 34, .5), inset 0 1px 0 var(--glass-hi); font: 400 21px/1 var(--display); color: rgba(255, 243, 224, .8); transition: transform .16s var(--ease), background .2s, box-shadow .16s, color .2s; }
.wtab[data-w="0"] { --wc: #ffb36b; } .wtab[data-w="1"] { --wc: #7cc4ff; } .wtab[data-w="2"] { --wc: #ff7a5c; } .wtab[data-w="3"] { --wc: #35d0c6; } .wtab[data-w="4"] { --wc: #ff4fa8; } .wtab[data-w="5"] { --wc: #a8a8ff; }
.wtab::before { content: ''; position: absolute; left: 50%; bottom: -7px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--wc); opacity: .75; box-shadow: 0 0 8px var(--wc); }
.wtab.sel { background: linear-gradient(180deg, color-mix(in srgb, var(--wc) 80%, #fff), var(--wc)); color: #2a1450; border-color: rgba(255, 255, 255, .8); transform: translateY(-2px) scale(1.08); box-shadow: 0 6px 0 rgba(8, 4, 34, .5), 0 0 20px color-mix(in srgb, var(--wc) 60%, transparent), inset 0 2px 0 rgba(255, 255, 255, .6); }
.wtab.sel::before { display: none; }
.wtab.locked { color: rgba(255, 243, 224, .45); } .wtab.locked .wt-n { opacity: .55; }
.wtab .wt-lock { position: absolute; right: -2px; top: -2px; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #2a1b6b; color: rgba(255, 243, 224, .8); }
.scroll.with-tabs { top: calc(var(--sat) + 66px + 66px); }
.world-list { display: block; padding: 4px var(--s2) var(--s4); gap: 0; }
.world { display: none; } .world.sel { display: block; animation: worldIn .34s var(--ease); }
@keyframes worldIn { from { opacity: 0; transform: translateX(14px); } }
.world header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 4px 14px; }
.world header h3 { font: 400 28px/1.05 var(--display); color: #fff3e0; text-shadow: 0 2px 0 rgba(228, 85, 59, .9), 0 6px 16px rgba(10, 4, 40, .4); }
.world header small { display: block; margin-top: 4px; font: 800 14px/1.2 var(--body); color: rgba(255, 243, 224, .75); }
.world .w-stars { gap: 4px; font: 800 14px var(--body); color: rgba(255, 243, 224, .75); padding: 6px 12px; border-radius: var(--r-pill); background: rgba(10, 4, 40, .32); border: 1px solid var(--glass-line); white-space: nowrap; }
.world .w-stars svg { width: 16px; height: 16px; color: #ffc857; } .world .w-stars b { color: #fff3e0; font: 400 16px var(--display); }
.world .w-stars .lock { color: rgba(255, 243, 224, .7); }
.w-row { display: flex; flex-direction: column; gap: 12px; }
.lvl { height: 76px; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 0 14px 0 12px; text-align: left; border-radius: var(--r2); background: var(--glass); width: 100%; aspect-ratio: auto; }
.lvl .n { flex: none; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font: 400 26px/1 var(--display); color: #3a1450; background: linear-gradient(180deg, #ffe9b8, #ffc060); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 rgba(120, 60, 20, .5); }
.lvl .lv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lvl .nm { display: block !important; min-height: 0; padding: 0; font: 400 19px/1.1 var(--display); color: #fff3e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lvl .sts svg { width: 18px; height: 18px; }
.lvl .lv-go { width: 22px; height: 22px; color: rgba(255, 243, 224, .55); flex: none; }
.lvl.locked .n { background: rgba(255, 243, 224, .12); color: rgba(255, 243, 224, .45); box-shadow: none; }
.lvl.locked .nm { opacity: .5; } .lvl.locked .sts { display: none; } .lvl.locked .lv-go.lock { color: rgba(255, 243, 224, .4); }
.lvl .lock { display: block !important; position: static; }
.lvl.next { border-color: rgba(255, 200, 120, .75); }
.lvl.next::after { content: 'NEXT'; top: 8px; right: 12px; left: auto; font: 400 12px var(--display); letter-spacing: .08em; padding: 3px 8px; border-radius: 99px; }
.lvl.next .lv-go { display: none; }
.world.locked { opacity: 1; } .world.locked .lvl { opacity: .85; }

/* ---------- DAILY / SETTINGS ---------- */
.daily-date { font-size: 20px; margin-bottom: 14px; }
.dcard { border-radius: var(--r2); background: var(--glass); }
.dcard .info small { font-size: 13px; }
.panel { border-radius: var(--r2); background: var(--glass); }
.toggle { min-height: 66px; } .t-label { font-size: 20px; } .t-label small { font-size: 13px; }
.t-ico { border-radius: 13px; }
.foot-note, .fine { font-size: 13px; }

/* ---------- HUD ---------- */
.tapbox { height: 48px; border-radius: var(--r-pill); background: var(--glass); min-width: 160px; }
.tap-l { font-size: 13px; }
.pip { width: 15px; height: 15px; }
.meter { height: 12px; width: min(100%, 170px); }
.start-hint { top: 27%; }
.start-hint small { font-size: 13px; letter-spacing: .16em; }
.start-hint h2 { font-size: 42px; }
.start-hint span { font-size: 16px; max-width: 290px; }
.start-hint .go { font-size: 16px; padding: 11px 22px; border-radius: var(--r-pill); background: rgba(24, 16, 66, .55); }
.callout { top: calc(var(--sat) + 124px); }

/* ---------- SHEETS (pause / result / fail) ---------- */
.screen.overlay { background: radial-gradient(90% 60% at 50% 40%, rgba(40, 20, 100, .35), rgba(10, 4, 40, .62)); }
.modal, .fail-card, .rot-card { border-radius: var(--r3); background: linear-gradient(180deg, rgba(52, 38, 120, .92), rgba(26, 17, 72, .96)); border-color: rgba(255, 243, 224, .22); }
.modal { width: min(100%, 340px); padding: 26px 22px 22px; gap: 14px; }
.modal h2 { font-size: var(--t-h2); }
.pause-modal h2 { font-size: 30px; margin-bottom: 2px; }
.icon-row { gap: 10px; } .icon-row .round-btn { width: 68px; height: 74px; border-radius: var(--r2); gap: 4px; }
.icon-row .round-btn small { font-size: 12px; font-weight: 800; color: rgba(255, 243, 224, .8); }
.result h2 { font-size: 34px; }
.rs-name { font-size: 13px; letter-spacing: .14em; }
.rs-line { font-size: 16px; } .rs-line b { font-size: 20px; color: #fff3e0; }
.rs-badge { font-size: 16px; }
.action-row .btn { font-size: 19px; height: 56px; }
.action-row .round-btn { width: 56px; height: 56px; }
.stars .st { width: 60px; height: 60px; }
.fail-card { padding: 22px; } .fail-card h3 { font-size: 30px; } .fail-card p { font-size: 15px; }
.toast { font-size: 14px; border-radius: var(--r-pill); }
.rot-card h2 { font-size: 26px; } .rot-card p { font-size: 15px; }

/* never smaller than 12px anywhere visible */
small, .fine, .tap-l, .w-stars, .ld-status, .stat { font-size: max(12px, 1em); }
@media (max-height: 700px) {
  .logo .logotype { width: min(70vw, 320px); } .ld-title .logotype { width: min(72vw, 330px); } .ld-puff { width: clamp(120px, 36vw, 160px); }
  .world-tabs { top: calc(var(--sat) + 62px); } .scroll.with-tabs { top: calc(var(--sat) + 62px + 62px); } .lvl { height: 68px; } .w-row { gap: 10px; } .world header h3 { font-size: 24px; }
  .modal { padding: 20px 20px 18px; gap: 10px; }
}
@media (min-width: 700px) { .world-list, .daily-list, .panel { max-width: 520px; } .scroll { padding-left: var(--s4); padding-right: var(--s4); } }
@media (prefers-reduced-motion: reduce) { .world.sel { animation: none; } }
html.reduce-motion .world.sel { animation: none; }

/* world banner: each world's own sky, with a ridge and sun, so the Courses screen has identity and no dead space */
.world header { position: relative; overflow: hidden; align-items: flex-start; min-height: 128px; margin: 4px 0 16px; padding: 16px 16px 14px; border-radius: var(--r3); border: 1.5px solid rgba(255, 243, 224, .3); background: radial-gradient(60px 60px at 82% 62%, var(--sun), transparent 70%), linear-gradient(180deg, var(--g0, #2a1b6b) 0%, var(--g1, #7a3fa0) 40%, var(--g2, #ff7f6e) 78%, var(--g3, #ffc07a) 100%); box-shadow: 0 6px 0 rgba(8, 4, 34, .5), 0 16px 30px rgba(6, 2, 28, .35); }
.world header::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: var(--m, #8f4a8a); opacity: .75; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' preserveAspectRatio='none'%3E%3Cpath d='M0 50 C30 40 48 14 80 24 C110 34 126 8 162 6 C198 4 216 40 252 34 C272 30 288 22 300 26 L300 80 L0 80Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' preserveAspectRatio='none'%3E%3Cpath d='M0 50 C30 40 48 14 80 24 C110 34 126 8 162 6 C198 4 216 40 252 34 C272 30 288 22 300 26 L300 80 L0 80Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.world header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 4, 40, .0) 30%, rgba(10, 4, 40, .5)); }
.world header > * { position: relative; z-index: 1; }
.world header > div { flex: 1; min-width: 0; }
.world header .w-kicker { margin: 0 0 4px; font: 800 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 243, 224, .85); text-shadow: 0 1px 6px rgba(10, 4, 40, .6); }
.world header h3 { font-size: 30px; text-shadow: 0 3px 0 rgba(10, 4, 40, .45), 0 6px 16px rgba(10, 4, 40, .4); }
.world header small:not(.w-kicker) { margin-top: 6px; font-size: 14px; color: #fff3e0; text-shadow: 0 1px 8px rgba(10, 4, 40, .7); }
.world .w-stars { background: rgba(10, 4, 40, .55); }
@media (max-height: 700px) { .world header { min-height: 108px; padding: 12px 14px; } .world header h3 { font-size: 26px; } }

.world header { display: block; }
.world .w-stars { position: absolute; top: 14px; right: 14px; z-index: 2; }
.world header .w-kicker { padding-right: 90px; }
.world header h3 { white-space: nowrap; }
.world header::after { background: linear-gradient(180deg, rgba(10, 4, 40, .38) 0%, rgba(10, 4, 40, .05) 40%, rgba(10, 4, 40, .55) 100%); }
.world.locked header { filter: saturate(.55) brightness(.72); }

.icon-row .round-btn small { font-size: 13px !important; }
.rs-grid small { font-size: 13px; }
/* legibility of the intro card on bright worlds (Cotton Peaks): soft dark scrim + stronger text shadow */
.start-hint::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(120vw, 520px); height: 150%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(14, 6, 52, .5), rgba(14, 6, 52, 0)); z-index: -1; pointer-events: none; }
.start-hint small, .start-hint span { text-shadow: 0 1px 2px rgba(10, 4, 40, .7), 0 2px 14px rgba(10, 4, 40, .75); }
.start-hint { z-index: 0; }
/* short landscape phones: Home becomes two columns (hero left, actions right); Courses banner shrinks */
@media (orientation: landscape) and (max-height: 520px) {
  #home { flex-direction: row; align-items: stretch; }
  .home-hero { flex: 1.15; padding: calc(var(--sat) + 52px) 8px 0 calc(var(--sal) + 16px); }
  .logo .logotype { width: min(34vw, 250px); } .tagline { display: none; } .hero-spacer { min-height: 120px; }
  .home-actions { flex: 0 0 46%; max-width: none; margin: 0; width: auto; justify-content: center; padding: calc(var(--sat) + 44px) calc(var(--sar) + 24px) calc(var(--sab) + 10px) 8px; }
  .btn-xl { height: 56px; font-size: 26px; } .btn-daily { height: 60px; } .btn-ghost { height: 40px; }
  .world header { min-height: 84px; padding: 10px 14px; margin-bottom: 10px; } .world header h3 { font-size: 24px; } .world header small:not(.w-kicker) { display: none; } .world .w-stars { top: 10px; right: 12px; }
  .lvl { height: 62px; } .w-row { gap: 8px; }
  .world-tabs { top: calc(var(--sat) + 56px); padding-top: 2px; } .wtab { width: 40px; height: 40px; font-size: 18px; } .scroll.with-tabs { top: calc(var(--sat) + 56px + 52px); }
  .topbar { min-height: 56px; }
}

/* settings: "More" as a clear secondary control */
.more summary { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: var(--r1); background: rgba(24, 16, 66, .45); border: 1px solid var(--glass-line); color: rgba(255, 243, 224, .9); font-size: 17px; margin: 0 auto; max-width: 480px; }
.more summary::after { content: ''; width: 9px; height: 9px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.more[open] summary::after { transform: translateY(2px) rotate(-135deg); } .more[open] summary { opacity: 1; margin-bottom: var(--s2); }
@media (orientation: landscape) and (max-height: 520px) {
  .home-actions { flex: 0 0 50%; padding-left: 4px; padding-right: calc(var(--sar) + 20px); }
  .btn-daily { padding: 0 10px 0 8px; gap: 8px; } .btn-daily .d-icon { width: 38px; height: 38px; border-radius: 12px; }
  .btn-daily .d-text b { font-size: 17px; white-space: nowrap; } .btn-daily .d-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .streak { height: 32px; padding: 0 9px; font-size: 16px; }
}
@media (orientation: landscape) and (max-height: 520px) { .home-hero { padding-top: calc(var(--sat) + 62px); } .logo .logotype { width: min(32vw, 240px); } }

/* ===== v4 POLISH LAYER ===== */
.world header .w-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.world header::before { display: none; }
.world header::after { background: linear-gradient(90deg, rgba(10, 4, 40, .5) 0%, rgba(10, 4, 40, .12) 52%, rgba(10, 4, 40, 0) 100%), linear-gradient(180deg, rgba(10, 4, 40, .22) 0%, rgba(10, 4, 40, 0) 45%, rgba(10, 4, 40, .34) 100%); z-index: 0; }
.world header > div, .world .w-stars { z-index: 2; }
.stars { position: relative; }
.stars::before { content: ''; position: absolute; left: 50%; top: 50%; width: 230px; height: 120px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 200, 87, .38), rgba(255, 200, 87, 0)); opacity: 0; animation: starGlow 1.6s .2s ease-out forwards; pointer-events: none; }
@keyframes starGlow { 30% { opacity: 1; } 100% { opacity: .55; } }
.stars .st.on { animation: starPop .62s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes starPop { 0% { transform: translateY(14px) scale(.15) rotate(-50deg); opacity: 0; } 55% { transform: translateY(-4px) scale(1.28) rotate(10deg); opacity: 1; } 78% { transform: scale(.94) rotate(-3deg); } 100% { transform: none; opacity: 1; } }
.stars .spk { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; pointer-events: none; background: #fff3b0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px rgba(255, 220, 120, .9)); animation: spk .72s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes spk { 0% { transform: translate(0, 0) scale(0); opacity: 1; } 25% { transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5)) scale(var(--s)); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stars::before { animation: none; opacity: .5; } .stars .st.on { animation-duration: .01s; } }
.has-mascot { overflow: visible !important; }
.modal.has-mascot { margin-top: 52px; padding-top: 50px; }
.mascot { position: absolute; left: 50%; top: -58px; width: 92px; height: 92px; margin-left: -46px; z-index: 3; pointer-events: none; filter: drop-shadow(0 7px 8px rgba(8, 4, 34, .5)); animation: mascotBob 3.2s ease-in-out infinite; }
.mascot.win { animation: mascotHop .7s cubic-bezier(.3, 1.5, .5, 1) both, mascotBob 3.2s .7s ease-in-out infinite; }
.fail-card.has-mascot { padding-top: 40px; } .fail-card .mascot { width: 80px; height: 80px; margin-left: -40px; top: -54px; }
@keyframes mascotBob { 50% { transform: translateY(-4px) rotate(-1.5deg); } }
@keyframes mascotHop { 0% { transform: translateY(30px) scale(.6); opacity: 0; } 60% { transform: translateY(-12px) scale(1.04); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mascot, .mascot.win { animation: none; } }
.world header { min-height: clamp(128px, 19vh, 170px); }
.world header::after { background: linear-gradient(90deg, rgba(10, 4, 40, .42) 0%, rgba(10, 4, 40, .06) 48%, rgba(10, 4, 40, 0) 100%), linear-gradient(180deg, rgba(10, 4, 40, .18) 0%, rgba(10, 4, 40, 0) 40%, rgba(10, 4, 40, .22) 100%); }
@media (min-height: 780px) { .lvl { height: 78px; } .w-row { gap: 12px; } }
.world.locked header { filter: saturate(.75) brightness(.86); }
.world.locked header .w-kicker { display: block; }
.world header h3 { font-size: 27px; max-width: calc(100% - 96px); overflow: hidden; text-overflow: ellipsis; }
.world .w-stars { padding: 5px 10px; font-size: 13px; }
.daily-mascot { display: block; width: 148px; height: 148px; margin: 22px auto 0; pointer-events: none; filter: drop-shadow(0 10px 12px rgba(8, 4, 34, .45)); animation: mascotBob 3.6s ease-in-out infinite; }
@media (max-height: 700px) { .daily-mascot { width: 104px; height: 104px; margin-top: 12px; } }
@media (orientation: landscape) and (max-height: 520px) { .daily-mascot { display: none; } }
.world.locked .w-stars { font-size: 0; gap: 0; padding: 7px 9px; } .world.locked .w-stars svg { width: 16px; height: 16px; }
.world header h3 { max-width: calc(100% - 60px); }
.world:not(.locked) header h3 { max-width: calc(100% - 96px); }

/* ===== v5 fit (Tower Takeout technique): NOTHING full-screen is anchored to bottom:0. body, #stage and every .screen are top-anchored and
   --app-h tall (JS raises --app-h to the real screen height on iOS Home-Screen apps), so they overflow past a short layout viewport and paint
   the strip WebKit would otherwise fill flat. --sab already includes --dead-b. --edge (set from the scene's bottom pixel) colours html/body. */
html, body { background-color: var(--edge, #5a2a73); }
.world header h3 { overflow: visible; text-overflow: clip; }
.world:not(.locked) header h3 { max-width: calc(100% - 78px); }