:root {
  --sky: #8fd0f5; --sky2: #d9f1ff; --ink: #344e3d; --ink2: #75816d; --cream: #fffbed; --grass: #74bf43; --grass2: #43852d;
  --dirt: #9b6b43; --dirt2: #6f4a2c; --stone: #8e8f96; --tnt: #e0392e; --tnt2: #9e2119; --gold: #ffc21a;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--sky); overscroll-behavior: none; }
body { font-family: var(--font); color: var(--ink); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#app { position: fixed; inset: 0; overflow: clip; touch-action: none; background: radial-gradient(ellipse at 40% 38%, #e1f8ef 0%, #c0e8e8 45%, #9bcfdc 100%); }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#tower-fog { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: min(24vh, 190px); background: linear-gradient(transparent, rgba(139, 205, 228, .38) 38%, rgba(139, 205, 228, .84)); pointer-events: none; }
#app.endless #tower-fog { display: block; }
#sat, #sab { position: absolute; left: 0; width: 1px; visibility: hidden; pointer-events: none; }
#sat { top: 0; height: env(safe-area-inset-top, 0px); }
#sab { bottom: 0; height: env(safe-area-inset-bottom, 0px); }
[hidden] { display: none !important; }
button { font-family: var(--font); cursor: pointer; border: 0; color: inherit; padding: 0; }
#flash { position: absolute; inset: 0; background: #fff6dc; opacity: 0; pointer-events: none; }
#flash.on { animation: flash 0.7s ease-out; }
@keyframes flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }

/* HUD */
#hud { position: absolute; top: max(22px, env(safe-area-inset-top)); left: max(20px, calc((100vw - 1000px) / 2)); right: max(20px, calc((100vw - 1000px) / 2)); height: 98px; padding-bottom: 44px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud .grow { flex: 1; pointer-events: none; }
.round { width: 46px; height: 46px; border-radius: 50%; background: #fffbed; color: var(--ink); font-size: 17px; font-weight: 900; box-shadow: 0 3px 0 rgba(36,48,59,0.18), 0 6px 16px rgba(36,48,59,0.12); flex: none; display: grid; place-items: center; }
.round:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(36,48,59,0.18); }
.pill { height: 40px; padding: 0 13px; border-radius: 999px; background: #fffbed; font-weight: 900; font-size: 17px; display: inline-flex; gap: 6px; align-items: center; box-shadow: 0 3px 0 rgba(36,48,59,0.14); white-space: nowrap; }
.pill i { font-style: normal; font-size: 16px; }
#lvl svg { display: block; }
#clock.par b { color: #c0392b; }
#left.zero { background: #e9f8df; }
#left.over b { color: var(--tnt); }
#left.bump { animation: bump 0.25s; }
@keyframes bump { 50% { transform: scale(1.14); } }

/* tray: 🐑 · ⛏|🚩 · ⟲ */
#tray { position: absolute; left: 0; right: 0; bottom: max(27px, env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center; gap: 14px; pointer-events: none; }
#tray > * { pointer-events: auto; }
.tool { position: relative; width: 54px; height: 54px; border-radius: 18px; background: #fffbed; font-size: 24px; display: grid; place-items: center; box-shadow: 0 4px 0 rgba(36,48,59,0.18); }
.tool:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(36,48,59,0.18); }
.tool:disabled { opacity: 0.4; }
.seg { display: flex; padding: 5px; gap: 4px; border-radius: 24px; background: #fffbed; box-shadow: 0 4px 0 rgba(36,48,59,0.18); }
.seg button { width: 68px; height: 50px; border-radius: 19px; font-size: 26px; background: transparent; transition: background 0.15s, transform 0.15s; }
.seg button.on { background: var(--grass); box-shadow: 0 3px 0 var(--grass2), inset 0 1px 0 rgba(255,255,255,0.35); transform: translateY(-1px); }
.seg button[data-m="flag"].on { background: var(--tnt); box-shadow: 0 3px 0 var(--tnt2), inset 0 1px 0 rgba(255,255,255,0.35); }
.pulse { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(255,209,64,0.7), 0 0 22px rgba(255,209,64,0.7); } }

/* hold-to-flag ring, the tutorial hand and bubble */
#hold { position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; pointer-events: none; display: grid; place-items: center; }
#hold svg { position: absolute; inset: 0; transform: rotate(-90deg); }
#hold circle { fill: rgba(255,255,255,0.35); stroke: var(--tnt); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 151; stroke-dashoffset: 151; }
#hold.go circle { transition: stroke-dashoffset var(--hold, 360ms) linear; stroke-dashoffset: 0; }
#hold span { font-size: 20px; opacity: 0.85; }
#hand { position: absolute; font-size: 44px; margin: -6px 0 0 -14px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); transition: left 0.35s, top 0.35s; z-index: 3; }
#hand.press { transform: scale(0.86) translateY(4px); }
#bubble { position: absolute; left: 50%; transform: translateX(-50%); max-width: min(340px, calc(100% - 32px)); padding: 10px 16px; border-radius: 18px; background: var(--cream); color: var(--ink); font-weight: 800; font-size: 16px; text-align: center; box-shadow: 0 4px 0 rgba(36,48,59,0.16), 0 12px 26px rgba(36,48,59,0.18); pointer-events: none; animation: rise 0.3s cubic-bezier(.2,1.4,.4,1); z-index: 3; }
#bubble b { font-size: 19px; }

/* Home: a toy-like adventure card beside the live cube. */
#home { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(24px, 5vw, 88px); padding: 42px max(32px, calc((100vw - 1240px) / 2)) 34px; pointer-events: none; }
#home > * { pointer-events: auto; }
.home-brand { text-align: center; padding-top: 12px; }
.eyebrow { font-size: 10px; font-weight: 900; letter-spacing: 1.7px; color: #638076; }
.home-brand > .eyebrow { color: #427b86; font-size: 11px; letter-spacing: 3px; }
.wordmark { position: relative; width: max-content; margin: 7px auto 0; font-size: clamp(46px, 5.7vw, 78px); line-height: 1.1; font-weight: 1000; letter-spacing: -4px; transform: rotate(-3deg); color: #fffdf0; -webkit-text-stroke: 2px #305c42; paint-order: stroke fill; text-shadow: 0 5px 0 #305c42, 0 8px 0 #305c4225; }
.wordmark span:last-of-type { color: #ffe46b; }
.wordmark i { position: absolute; right: -25px; top: -12px; color: #fff6b5; font-size: 30px; -webkit-text-stroke: 0; text-shadow: none; }
.home-brand p { font-size: 14px; font-weight: 700; color: #4d7a7f; margin: 17px 0 0; }
#stage { position: relative; min-height: 120px; grid-column: 1; pointer-events: none; }
.orbit-note { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; color: #477b75; font-size: 12px; font-weight: 800; padding: 8px 15px; border: 1px solid #ffffff70; background: #ffffff55; border-radius: 30px; pointer-events: auto; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; transition: transform 0.16s cubic-bezier(0.2, 1.4, 0.4, 1), background 0.15s ease, box-shadow 0.15s ease; }
.orbit-note:hover { background: #ffffff; transform: translateX(-50%) rotate(-3deg) scale(1.06); }
.orbit-note:active, .orbit-note.spun { transform: translateX(-50%) rotate(-3deg) scale(0.92); }
.panel { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 100%; max-height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd4bb transparent; touch-action: pan-y; padding: 24px; border: 3px solid #fffef5; border-radius: 32px; background: #fffbed; box-shadow: 0 7px 0 #688c7850, 0 20px 50px #3d827326, inset 0 0 0 1px #e8e4d3; }
.adventure-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adventure-heading h2 { margin: 5px 0 0; font-size: 23px; letter-spacing: -.9px; }
#total { gap: 6px; height: 46px; border-radius: 15px; padding: 0 11px; background: #fff0bb; box-shadow: inset 0 0 0 1px #ecd89a; color: #876019; }
#total i { color: #ffc42b; font-size: 26px; text-shadow: 0 2px 0 #dba123; }
#total span { display: flex; flex-direction: column; line-height: 1.1; }
#total b { font-size: 18px; }
#total small { font-size: 10px; margin-top: 2px; }
.play-next { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 82px; margin: 21px 0 25px; padding: 13px 20px; text-align: left; border: 2px solid #e4ffb2; border-radius: 21px; color: #fff; background: linear-gradient(#88d750, #63b936); box-shadow: 0 6px 0 #3c852a, 0 9px 14px #60933c28, inset 0 2px 0 #ffffff70; text-shadow: 0 2px 0 #3e8b2860; }
.play-next strong { display: block; font-size: 28px; font-weight: 950; letter-spacing: -.7px; }
.play-next small { display: block; font-size: 12px; font-weight: 700; margin-top: 3px; }
.play-symbol { font-size: 28px; filter: drop-shadow(0 2px 0 #3e8b2880); }
.play-arrow { margin-left: auto; font-size: 25px; }
.play-next:active { transform: translateY(4px); box-shadow: 0 2px 0 #3c852a; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.section-heading h3 { margin: 0; font-size: 14px; }
.section-heading > span { font-size: 10px; color: #7e8c77; font-weight: 650; }
/* tutorial, then 3³–10³ in the requested three by three layout */
#levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 7px; }
.endless-heading { margin-top: 20px; }
#endless-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.endless-mode { min-height: 72px; padding: 8px 4px; border: 2px solid #a8d6df; border-radius: 15px; background: linear-gradient(#f2fdff, #d9f3f5); box-shadow: 0 3px 0 #82bfc9; text-align: center; }
.endless-mode strong, .endless-mode small { display: block; }
.endless-mode strong { font-size: 19px; font-weight: 950; }
.endless-mode small { margin-top: 3px; font-size: 10px; font-weight: 800; color: #4c777b; }
.endless-mode:active { transform: translateY(3px); box-shadow: none; }
#achievements-open { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin-top: 13px; padding: 8px 13px; border: 2px solid #e6cf88; border-radius: 13px; background: #fff6dc; color: #5e542e; font-weight: 900; }
#achievements-open small { font-size: 10px; color: #84734f; }
.lv { position: relative; height: 66px; border: 2px solid #ebe6d4; border-radius: 15px; background: linear-gradient(#fffef9, #f5f1e4); box-shadow: 0 3px 0 #d7d5bf; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: transform .15s, background .15s; }
.lv:active { transform: translateY(3px); box-shadow: none; }
.lv .sz { font-weight: 950; font-size: 19px; letter-spacing: -.5px; line-height: 1; color: #3f6a35; }
.lv .sz sup { font-size: 10px; margin-left: 1px; }
.lv.stone .sz { color: #5c6470; }
.lv.deep .sz { color: #3b3f58; }
.lv.stone { background: linear-gradient(#fbfbfa, #eceef0); border-color: #e2e4e8; box-shadow: 0 3px 0 #c9ccd3; }
.lv.deep { background: linear-gradient(#f6f6fb, #e3e3ee); border-color: #d9d9e6; box-shadow: 0 3px 0 #bdbdd0; }
.lv .wet { position: absolute; top: 2px; right: 3px; font-size: 9px; font-style: normal; opacity: .8; }
.lv .st { font-size: 10px; letter-spacing: 1px; color: #d4d4c4; line-height: 1; }
.lv .st i { font-style: normal; }
.lv .st i.on { color: #ffc42b; text-shadow: 0 1px 0 #ba8618; }
.lv.locked { opacity: .55; filter: saturate(.45); cursor: not-allowed; }
.lv.locked:active { transform: none; }
.lv .lock { position: absolute; top: 3px; right: 5px; font-size: 10px; font-style: normal; }
.lv.tutorial { border-color: #d7c9f3; background: linear-gradient(#fffaff, #f0eafa); box-shadow: 0 3px 0 #c6b6e6; }
.lv.tutorial .tutorial-icon { font-size: 21px; line-height: 1; }
.lv.tutorial .tutorial-label { font-size: 9px; font-weight: 900; letter-spacing: .7px; color: #684b92; }
.lv.tutorial.done { background: #f0f7de; border-color: #cfe4b4; box-shadow: 0 3px 0 #bcd99d; }
.lv.tutorial.done .tutorial-label { color: #3f6a35; }
.lv.done { background: #f0f7de; border-color: #cfe4b4; box-shadow: 0 3px 0 #bcd99d; }
.lv.next, .lv.run { border-color: #7bbb48; background: #ebf6d6; box-shadow: 0 3px 0 #74a942; }
.lv.next::after { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; top: -4px; right: -4px; background: #f9bd43; border: 2px solid #fffbed; }
.lv.run::after { content: '▶'; position: absolute; top: -7px; right: -6px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #6bb63d; color: #fff; font-size: 8px; border: 2px solid #fffbed; }
.home-footer { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 0; }
.home-footer button, .home-footer .vault { background: none; color: #74816d; font-size: 11px; font-weight: 700; margin: 0; }
.vault { display: block; width: max-content; margin: 10px auto 0; color: var(--ink2); font-size: 13px; text-decoration: none; }
.logo { display: flex; gap: 5px; }
.logo span { display: grid; place-items: center; width: 40px; height: 44px; border-radius: 10px; background: #70bd43; box-shadow: 0 4px 0 #3f862a; color: #fff; font-size: 28px; font-weight: 900; }
@media (max-width: 760px), (orientation: portrait) {
  #home { display: flex; flex-direction: column; gap: 0; padding: max(20px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
  .home-brand { flex: none; padding: 0; }
  .home-brand > .eyebrow { font-size: 8px; letter-spacing: 2.2px; }
  .wordmark { font-size: 48px; letter-spacing: -2.6px; margin-top: 5px; }
  .home-brand p { margin-top: 9px; font-size: 11px; }
  #stage { flex: 1 1 auto; min-height: 110px; }
  .orbit-note { bottom: 4px; padding: 4px 12px; font-size: 9px; }
  .panel { flex: none; max-width: 440px; max-height: 62%; padding: 17px; border-radius: 26px; margin: 8px auto 0; }
  .adventure-heading h2 { font-size: 20px; }
  .eyebrow { font-size: 8px; }
  #total { height: 40px; }
  .play-next { min-height: 65px; margin: 14px 0 19px; padding: 8px 15px; border-radius: 17px; }
  .play-next strong { font-size: 25px; }
  .play-next small { font-size: 10px; }
  .section-heading { margin-bottom: 9px; }
  #levels { gap: 8px 6px; }
  .endless-heading { margin-top: 14px; }
  .endless-mode { min-height: 58px; border-radius: 12px; }
  .endless-mode strong { font-size: 16px; }
  .lv { height: 54px; border-radius: 12px; }
  .lv .sz { font-size: 17px; }
  .lv .st { font-size: 9px; letter-spacing: 0; }
  .home-footer { margin-top: 13px; }
}
@media (max-height: 700px) and (min-width: 761px) and (orientation: landscape) {
  #home { padding-top: 22px; padding-bottom: 22px; grid-template-columns: minmax(0, 1fr) 370px; }
  .panel { padding: 17px; }
  .lv { height: 56px; }
  .play-next { min-height: 65px; margin: 14px 0 18px; }
}
#auto-pill { position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(10px, env(safe-area-inset-top)) + 54px); background: var(--ink); color: #fff; }

/* modal cards */
#modal { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(36,48,59,0.32); padding: 16px; animation: fade 0.2s ease-out; z-index: 4; }
#modal.low { place-items: end center; background: transparent; padding-bottom: max(18px, env(safe-area-inset-bottom)); pointer-events: none; }
#modal.low .card { pointer-events: auto; }
@keyframes fade { from { opacity: 0; } }
.card { background: var(--cream); color: var(--ink); border-radius: 26px; padding: 18px 18px 16px; width: min(360px, 100%); text-align: center; box-shadow: 0 6px 0 rgba(36,48,59,0.14), 0 20px 50px rgba(36,48,59,0.3); animation: rise 0.28s cubic-bezier(.2,1.4,.4,1); }
@keyframes rise { from { transform: translateY(30px) scale(0.94); opacity: 0; } }
.card h2 { margin: 4px 0 8px; font-size: 26px; font-weight: 900; }
.card .big { font-size: 56px; line-height: 1.1; }
.card .tip { margin: 4px 0 14px; font-size: 16px; font-weight: 700; color: var(--ink2); display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left; }
.card .tip .ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #f2e7d3; font-size: 22px; flex: none; }
.card .rules { display: grid; gap: 8px; margin: 6px 0 14px; }
.card .rules .tip { margin: 0; justify-content: flex-start; }
.row { display: flex; gap: 10px; justify-content: center; }
.col { display: flex; flex-direction: column; gap: 9px; }
.card button { min-width: 60px; height: 54px; padding: 0 16px; border-radius: 17px; background: #efe4d0; color: var(--ink); font-size: 21px; font-weight: 900; box-shadow: 0 4px 0 #d6c6aa; }
.card button:active { transform: translateY(3px); box-shadow: 0 1px 0 #d6c6aa; }
.card button.primary { background: var(--grass); color: #fff; box-shadow: 0 4px 0 var(--grass2); min-width: 92px; }
.card button.danger { background: var(--tnt); color: #fff; box-shadow: 0 4px 0 var(--tnt2); }
.card .col button { font-size: 18px; }
.card button.on { box-shadow: 0 0 0 3px var(--gold), 0 4px 0 #d6c6aa; }
.pause .toggles { gap: 8px; }
.pause .toggles button { flex: 1; min-width: 44px; padding: 0 8px; }
.pause .vault { margin-top: 2px; }
.result .stars { display: flex; justify-content: center; gap: 14px; margin: 2px 0 10px; }
.result .star { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.result .star i { font-style: normal; font-size: 44px; color: #e6dccb; line-height: 1; }
.result .star i.on { color: var(--gold); text-shadow: 0 3px 0 #c98a00; animation: pop 0.45s cubic-bezier(.2,1.8,.4,1); }
.result .star small { font-size: 13px; font-weight: 800; color: var(--ink2); }
@keyframes pop { from { transform: scale(0.2) rotate(-40deg); } }
.result .meta { margin: 0 0 12px; font-weight: 800; color: var(--ink2); }
.result .comparison { margin: 0 0 10px; padding: 8px 10px; border-radius: 14px; background: #e8f6d9; color: #315d2b; font-size: 15px; font-weight: 850; line-height: 1.3; }
.result .comparison strong { color: #267725; font-size: 20px; white-space: nowrap; }
.upgrade-card { max-height: calc(100dvh - 32px); overflow-y: auto; overflow-x: hidden; position: relative; }
.upgrade-card.has-unlocks { box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.4), 0 8px 0 rgba(70, 110, 50, 0.25), 0 25px 60px rgba(36, 48, 59, 0.35); }
.upgrade-hero-icon { position: relative; width: 64px; height: 64px; margin: 0 auto 6px; display: grid; place-items: center; }
.upgrade-hero-icon .hero-art { font-size: 46px; line-height: 1; z-index: 2; display: inline-block; animation: heroBounce 1.2s ease-in-out infinite alternate; }
.upgrade-hero-icon .star-burst { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 215, 0, 0.5) 0%, rgba(255, 215, 0, 0) 70%); animation: heroPulse 1.8s ease-in-out infinite; pointer-events: none; }
.upgrade-card .eyebrow { display: block; font-size: 11px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: #8c7144; margin-bottom: 2px; }
.upgrade-card h2 { margin: 2px 0 4px; font-size: 24px; font-weight: 900; }
.upgrade-gain { margin: 2px 0 10px; color: #3f6a35; font-size: 17px; font-weight: 900; }
.upgrade-counter { display: inline-block; min-width: 14px; font-variant-numeric: tabular-nums; }
.upgrade-counter.pop { animation: numPop 0.25s ease-out; }
.upgrade-track-container { position: relative; width: 100%; margin: 8px 0 12px; padding: 12px 0 2px; }
.upgrade-track { position: relative; width: 100%; height: 20px; border: 3px solid #d6c6aa; border-radius: 99px; background: #eee6d6; box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); }
.upgrade-track-inner { position: absolute; inset: 0; border-radius: 99px; overflow: hidden; }
.upgrade-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff9b26, #ffe36c); box-shadow: 0 0 10px rgba(255, 182, 49, 0.7); transition: width .85s cubic-bezier(.2,.8,.25,1); }
.upgrade-milestones { position: absolute; inset: 0; pointer-events: none; }
.upgrade-pin { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 3; }
.upgrade-pin-dot { width: 22px; height: 22px; border-radius: 50%; background: #fffdf8; border: 2.5px solid #c8b798; box-shadow: 0 2px 5px rgba(0,0,0,0.15); display: grid; place-items: center; font-size: 10px; font-weight: 900; color: #8c7144; transition: all .35s cubic-bezier(.2,1.4,.4,1); }
.upgrade-pin.reached .upgrade-pin-dot { background: #ffc425; border-color: #df9400; color: #fff; box-shadow: 0 0 8px rgba(255, 196, 37, 0.9), 0 2px 4px rgba(0,0,0,0.2); }
.upgrade-pin.popping .upgrade-pin-dot { animation: pinPop 0.48s cubic-bezier(0.18, 1.5, 0.35, 1); }
.upgrade-pin-label { position: absolute; bottom: 100%; margin-bottom: 3px; font-size: 10px; font-weight: 850; color: #7b6950; white-space: nowrap; padding: 1px 4px; border-radius: 4px; background: rgba(255,255,255,0.85); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.upgrade-track-labels { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; font-weight: 800; color: var(--ink2); }
.upgrade-next { margin: 0; color: #615545; font-size: 13px; font-weight: 800; }
.upgrade-unlocks-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.upgrade-unlock { position: relative; display: grid; grid-template-columns: 46px 1fr; column-gap: 10px; align-items: center; margin: 0; padding: 9px 12px; border-radius: 16px; background: linear-gradient(135deg, #eef9e4 0%, #ddf2cd 100%); border: 2px solid #bce1a3; box-shadow: 0 4px 12px rgba(90, 160, 60, 0.12), 0 2px 0 #a9d38c; text-align: left; overflow: hidden; animation: unlockCardIn 0.38s cubic-bezier(0.18, 1.35, 0.35, 1) both; }
.upgrade-unlock:nth-child(2) { animation-delay: 0.12s; }
.upgrade-unlock:nth-child(3) { animation-delay: 0.24s; }
.upgrade-icon-wrap { position: relative; width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.1); display: grid; place-items: center; }
.upgrade-icon-wrap .upgrade-icon { font-size: 26px; line-height: 1; }
.upgrade-star-badge { position: absolute; bottom: -4px; right: -4px; background: #f7a400; color: #fff; font-size: 9px; font-weight: 900; padding: 1px 4px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.upgrade-info { display: flex; flex-direction: column; gap: 2px; }
.upgrade-top-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.upgrade-top-row b { font-size: 15px; font-weight: 850; color: #243e1d; }
.upgrade-badge { font-size: 10px; font-weight: 900; padding: 2px 7px; border-radius: 999px; background: #2ea024; color: #fff; letter-spacing: 0.6px; box-shadow: 0 1px 3px rgba(30, 130, 25, 0.3); animation: badgePop 0.4s 0.2s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.upgrade-info small { color: #4b6b42; font-size: 12px; font-weight: 700; line-height: 1.3; }
.upgrade-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.7) 50%, transparent 80%); transform: translateX(-100%); pointer-events: none; animation: shineSweep 0.85s 0.18s ease-out forwards; }
.upgrade-unlock:nth-child(2) .upgrade-shine { animation-delay: 0.3s; }
.upgrade-unlock:nth-child(3) .upgrade-shine { animation-delay: 0.42s; }
@keyframes unlockCardIn { 0% { opacity: 0; transform: translateY(14px) scale(0.9); } 60% { transform: translateY(-3px) scale(1.03); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.upgrade-upcoming { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: #f4ecdc; border: 2px dashed #d5c3a3; text-align: left; margin: 4px 0; }
.upgrade-upcoming .upcoming-icon { font-size: 26px; opacity: .85; }
.upgrade-upcoming .upcoming-info b { display: block; font-size: 14px; color: #55442f; font-weight: 850; }
.upgrade-upcoming .upcoming-info small { display: block; font-size: 12px; color: #7b6950; font-weight: 700; }
.upgrade-confetti-container { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }
.upgrade-confetti { position: absolute; width: 7px; height: 7px; border-radius: 2px; opacity: 0; will-change: transform, opacity; }
@keyframes heroBounce { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-4px) scale(1.08); } }
@keyframes heroPulse { 0%, 100% { opacity: 0.25; transform: scale(0.9); } 50% { opacity: 0.8; transform: scale(1.2); } }
@keyframes pinPop { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 70% { transform: scale(0.9); } 100% { transform: scale(1.15); } }
@keyframes badgePop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shineSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(120%); } }
@keyframes numPop { 0% { transform: scale(1); } 50% { transform: scale(1.35); color: #ff9d00; } 100% { transform: scale(1); } }
@keyframes confettiPop { 0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.3) rotate(var(--rot)); } }
.tool-ladder-gallery { max-height: calc(100dvh - 32px); overflow-y: auto; text-align: center; }
.ladder-grid { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 16px; text-align: left; }
.ladder-row { display: grid; grid-template-columns: 36px 1fr auto; column-gap: 10px; align-items: center; padding: 8px 12px; border-radius: 14px; background: #efe6d4; border: 2px solid transparent; }
.ladder-row.unlocked { background: #e8f6d9; border-color: #bfe5a5; }
.ladder-row.current { box-shadow: 0 0 0 2px var(--gold); }
.ladder-row .ladder-icon { font-size: 24px; text-align: center; }
.ladder-row b { font-size: 14px; color: #2b3a24; font-weight: 850; }
.ladder-row small { display: block; font-size: 11px; color: var(--ink2); font-weight: 700; }
.ladder-row .ladder-status { font-size: 11px; font-weight: 850; padding: 2px 7px; border-radius: 999px; }
.ladder-row.unlocked .ladder-status { background: #cfeed0; color: #1e7019; }
.ladder-row:not(.unlocked) .ladder-status { background: #dfd4bf; color: #7c684d; }
.upgrade-card .row { margin-top: 14px; }
/* pickaxe offer (in-app purchase) and the test store's confirmation sheet */
.offer-card { box-shadow: 0 0 0 3px rgba(255, 194, 26, 0.55), 0 8px 0 rgba(70, 110, 50, 0.25), 0 25px 60px rgba(36, 48, 59, 0.35); }
.offer-card .eyebrow, .store-sheet .eyebrow { display: block; margin-top: 2px; color: #b07a12; letter-spacing: 2px; }
.offer-card .offer-hero { width: 128px; height: 128px; margin-bottom: 4px; }
.offer-card .offer-hero .tool-art { width: 128px; height: 128px; }
.offer-benefit { margin: 0 auto 6px; padding: 8px 12px; width: fit-content; border-radius: 14px; background: #fff1c2; color: #6b4a08; font-size: 17px; font-weight: 900; }
.offer-note { margin: 0 0 14px; color: var(--ink2); font-size: 13px; font-weight: 700; }
.offer-card .row button, .store-sheet .row button { flex: 1; }
.card.offer-card button.primary { font-size: 21px; background: linear-gradient(#ffd75a, #f2a91b); box-shadow: 0 4px 0 #b9790c; color: #5a3a00; }
.store-line { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; margin: 8px 0 10px; padding: 8px 12px; border-radius: 16px; background: #f2ecdc; text-align: left; }
.store-line .tool-art { width: 44px; height: 44px; }
/* the Stripe sheet: Stripe's embedded form needs room and its own white page */
.card.stripe-sheet { width: min(460px, calc(100vw - 16px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
.stripe-mount { min-height: 120px; margin: 0 -8px 10px; border-radius: 14px; background: #fff; overflow: hidden; }
.stripe-mount > .offer-note { padding: 40px 12px; margin: 0; }
.store-line b { display: block; font-size: 15px; font-weight: 900; }
.store-line small { display: block; font-size: 11px; font-weight: 700; color: var(--ink2); }
.store-line strong { font-size: 17px; font-weight: 900; }
/* test ads: a full-screen placeholder with its countdown, ✕ and (rewarded) progress and Claim */
#modal.ad-modal { padding: 0; background: #10151c; backdrop-filter: none; animation: none; }
#modal .ad-screen { position: relative; display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 14px; width: 100%; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; animation: none;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: linear-gradient(160deg, #233142, #10151c); color: #eef3f8; }
.ad-top { display: flex; align-items: center; gap: 10px; }
.ad-label { padding: 3px 9px; border-radius: 8px; background: #ffffff1f; font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.ad-count { margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ffffff1f; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ad-count:not([hidden]) + .ad-close { margin-left: 0 !important; }
.card.ad-screen button.ad-close { margin-left: auto; min-width: 44px; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #ffffff2a; color: #fff; box-shadow: none; font-size: 20px; }
.ad-creative { display: grid; place-content: center; justify-items: center; gap: 6px; border-radius: 22px; background: repeating-linear-gradient(45deg, #ffffff0a 0 14px, #ffffff05 14px 28px); border: 2px dashed #ffffff2e; }
.ad-creative > span { font-size: 64px; }
.ad-creative b { font-size: 26px; font-weight: 950; }
.ad-creative small { color: #b5c3d1; font-size: 13px; font-weight: 700; }
/* a trailer: the video fills the frame; at its end the endcard covers it, and the copy bar goes */
.ad-creative.video .ad-media { object-fit: contain; background: #000; }
.ad-creative.has-media { position: relative; }
.ad-endcard { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; text-align: center; color: #fff;
  background: linear-gradient(#0b0f14cc, #0b0f14ee), var(--endcard) center / cover no-repeat; }
.ad-creative.ended .ad-copy, .ad-creative.ended .ad-media { visibility: hidden; }
.ad-endcard-icon { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 8px 24px #000a; }
.ad-endcard h3 { margin: 6px 0 0; font-size: 28px; font-weight: 950; }
.ad-endcard-stars { margin: 0; color: #ffd75a; font-size: 20px; letter-spacing: 2px; }
.ad-endcard-stars small { display: block; color: #c6d3df; font-size: 12px; letter-spacing: 0; font-weight: 800; }
.ad-endcard-text { max-width: 320px; margin: 4px 0 8px; color: #dde6ee; font-size: 14px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.ad-endcard .ad-cta { padding: 14px 40px; font-size: 20px; }
/* after Try me: the vote button, gold, then Greenlit ✓ */
.card.ad-screen button.ad-greenlight { width: auto; min-width: 0; height: auto; padding: 10px 14px; border: 0; border-radius: 14px; background: linear-gradient(#ffe26b, #f2a91b); color: #5a3a00; box-shadow: 0 3px 0 #b9790c; font-family: inherit; font-size: 15px; font-weight: 950; white-space: nowrap; cursor: pointer; }
.card.ad-screen .ad-endcard button.ad-greenlight { padding: 14px 40px; font-size: 20px; }
.card.ad-screen button.ad-greenlight:disabled { background: #2c7d3a; color: #e8ffe9; box-shadow: none; cursor: default; }
/* 🛠 Slop Ads stats */
.ad-stats { max-height: 50vh; overflow: auto; margin-bottom: 12px; }
.ad-stats table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ad-stats th, .ad-stats td { padding: 5px 4px; border-bottom: 1px solid #e8dfcc; text-align: right; font-variant-numeric: tabular-nums; }
.ad-stats th { text-align: left; font-weight: 850; }
.ad-stats small { display: block; color: var(--ink2); font-size: 10px; font-weight: 700; }
.ad-stats-tabs { justify-content: center; gap: 8px; margin-bottom: 8px; }
.ad-stats-tabs button { padding: 8px 14px; border-radius: 12px; background: #efe6d2; font-weight: 850; }
.ad-stats-tabs button[aria-pressed="true"] { background: var(--grass); color: #fff; }
.ad-stats-token { display: flex; gap: 8px; margin-bottom: 12px; }
.ad-stats-token input { flex: 1; min-width: 0; padding: 10px 12px; border: 2px solid #e8dfcc; border-radius: 12px; font: inherit; }
/* a Slop Ads creative: the media fills the frame, the game's icon, name, pitch and link sit under it */
.ad-creative.has-media { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-content: stretch; justify-items: stretch; gap: 0; overflow: hidden; border: 0; background: #0b0f14; min-height: 0; }
.ad-creative .ad-media { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
.ad-creative.gif .ad-media { object-fit: contain; background: #000; }
.ad-copy { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; background: #ffffff12; }
.ad-copy .ad-icon { width: 52px; height: 52px; border-radius: 14px; }
.ad-copy b { display: block; font-size: 18px; font-weight: 950; }
.ad-creative .ad-copy small { display: block; margin-top: 2px; color: #c6d3df; font-size: 12px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ad-copy span { min-width: 0; }
.ad-cta { padding: 10px 14px; border-radius: 14px; background: linear-gradient(#9dea3c, #4eb316); color: #fff; font-size: 15px; font-weight: 950; text-decoration: none; white-space: nowrap; box-shadow: 0 3px 0 #237823; }
.ad-reward { margin: 0; font-size: 16px; font-weight: 800; }
.ad-reward b { color: #ffd75a; }
.ad-bar { height: 8px; border-radius: 4px; background: #ffffff1f; overflow: hidden; }
.ad-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd75a, #f2a91b); }
.card.ad-screen button.ad-claim { height: 58px; font-size: 20px; }
/* the lose card's rewarded rewind */
.card button.ad-revive { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; width: 100%; height: auto; min-height: 58px; margin: 0 0 10px; padding: 8px 16px; text-align: left; background: linear-gradient(#ffd75a, #f2a91b); box-shadow: 0 4px 0 #b9790c; color: #5a3a00; font-size: 19px; }
.card button.ad-revive span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #5a3a00; color: #ffd75a; font-size: 14px; }
.card button.ad-revive small { font-size: 12px; font-weight: 800; opacity: .8; }

/* Sunny Triumph: an edge-to-edge reward stage with live copy and controls. */
#modal.sun-modal { padding: 0; background: #08b8d8; backdrop-filter: none; overflow: hidden; animation: none; }
#modal .sun-celebration {
  position: relative; isolation: isolate; width: 100%; height: 100%; max-height: none; margin: 0;
  padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border: 0; border-radius: 0; box-shadow: none; overflow-x: hidden; overflow-y: auto; animation: none;
  background: radial-gradient(ellipse at 50% 43%, #adf1d8 0%, #24d2df 33%, #06b6dc 68%, #039acb 100%);
  color: #fff9db;
}
.sun-celebration::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at -3% 24%, #fff8 0%, #fff3 4%, transparent 10%), radial-gradient(ellipse at 105% 35%, #fff9 0%, #fff3 5%, transparent 12%), radial-gradient(ellipse at -4% 84%, #fffa 0%, #fff5 5%, transparent 14%), radial-gradient(ellipse at 105% 96%, #fff9 0%, transparent 15%);
}
.sun-background { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sun-content { position: relative; z-index: 1; width: min(100%, 480px); min-height: 470px; height: 100%; margin: 0 auto; display: grid; grid-template-rows: auto minmax(120px, 1fr) auto auto; gap: clamp(10px, 1.8vh, 18px); }
.sun-celebration .sun-heading { position: relative; z-index: 2; margin: 0; font-size: clamp(30px, 9vw, 58px); line-height: 1.02; font-weight: 1000; letter-spacing: -1.5px; text-transform: uppercase; color: #fff7d2; text-shadow: 0 3px 0 #d9a436, 0 6px 0 #087c76, 0 9px 12px #00576266; }
.sun-heading span { display: block; }
.sun-hero { position: relative; display: grid; place-items: center; min-height: 0; }
.sun-rays { position: absolute; left: 50%; top: 40%; width: max(150vw, 150vh); aspect-ratio: 1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, #fff3a67d 0deg 8deg, #fff5a511 8deg 15deg, transparent 15deg 24deg);
  mask-image: radial-gradient(circle, #000 0%, #0009 30%, transparent 66%); transform: translate(-50%, -50%); animation: sunnyRays 24s linear infinite;
}
.sun-halo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse, #fff9c8ee 0%, #fff6ad8a 24%, transparent 65%); }
.sun-item { position: relative; width: min(76vw, 39vh, 350px); aspect-ratio: 1; z-index: 1; animation: sunnyItemIn .5s cubic-bezier(.18, 1.35, .4, 1) both; }
.sun-item .tool-art { width: 100%; height: 100%; filter: drop-shadow(0 0 16px #fff7b5) drop-shadow(0 10px 10px #067b7355); }
.sun-item .mode-promo-art { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 16px #fff7b5) drop-shadow(0 10px 10px #067b7355); }
.sun-spark { position: absolute; z-index: 1; font-size: clamp(28px, 6vw, 46px); color: #fff7b9; text-shadow: 0 0 18px #fff59e; pointer-events: none; animation: sunnySpark 2s ease-in-out infinite alternate; }
.spark-one { left: 7%; top: 25%; }.spark-two { right: 5%; top: 13%; animation-delay: -.7s; }.spark-three { right: 16%; bottom: 8%; animation-delay: -1.4s; font-size: 27px; }
.sun-info { position: relative; z-index: 2; }
.sun-info h3 { margin: 0; font-size: clamp(23px, 6.7vw, 36px); line-height: 1.08; letter-spacing: -.7px; font-weight: 1000; color: #fff7d2; text-shadow: 0 3px 0 #7e711e, 0 5px 8px #00534f66; }
.sun-description { margin: 8px auto 14px; max-width: 340px; font-size: clamp(14px, 4vw, 19px); line-height: 1.3; font-weight: 800; color: #fffbed; text-shadow: 0 2px 3px #006a71; }
.sun-benefit { margin: 0; min-height: 64px; display: flex; gap: 14px; align-items: center; justify-content: center; padding: 13px 18px; border: 2px solid #f9ffdb; border-radius: 24px; color: #175537; background: linear-gradient(135deg, #f3ffd5, #d1f6a9); box-shadow: inset 0 -4px 0 #99d66477, 0 5px 0 #038ca044; text-align: left; }
.sun-benefit > span { font-size: 35px; color: #eeaf19; text-shadow: 0 2px 0 #bc810b; flex: none; }
.sun-benefit strong { font-size: clamp(17px, 4.6vw, 23px); line-height: 1.2; font-weight: 950; }
.sun-celebration .sun-continue.primary { position: relative; z-index: 2; justify-self: center; width: 88%; height: clamp(56px, 8vh, 76px); min-height: 56px; padding: 0 18px; margin: 0 0 6px; border: 3px solid #fff5bf; border-radius: 26px; background: linear-gradient(#9dea3c, #66cc1f 60%, #4eb316); box-shadow: inset 0 3px 0 #dcff94, inset 0 -5px 0 #479d15, 0 5px 0 #237823, 0 8px 20px #006d6966; color: #fffadd; font-size: clamp(23px, 6vw, 32px); font-weight: 1000; text-shadow: 0 2px 0 #438e1c; }
.sun-celebration .sun-continue:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 #479d15, 0 2px 0 #237823; }
.sun-continue:focus-visible { outline: 3px solid #fffbed; outline-offset: 5px; }
.sun-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sun-paper { position: absolute; top: -28px; width: 10px; height: 19px; border-radius: 2px; box-shadow: inset 1px 1px 0 #fff9, 0 2px 4px #137c6c33; animation: sunnyPaperFall 2s linear both; }
@keyframes sunnyRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes sunnyItemIn { from { opacity: 0; transform: scale(.68) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes sunnySpark { from { opacity: .55; transform: scale(.75); } to { opacity: 1; transform: scale(1.12); } }
@keyframes sunnyPaperFall { 0% { opacity: 0; transform: translate(0, -20px) rotate(0deg); } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--drift), 105vh) rotate(var(--spin)); } }
@media (orientation: landscape) {
  .sun-rays { left: calc(50% - min(25vw, 250px)); top: 50%; }
  .sun-content { width: min(100%, 1000px); min-height: 250px; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; gap: 16px 30px; }
  .sun-celebration .sun-heading { grid-column: 2; grid-row: 1; font-size: clamp(27px, 6vh, 48px); }
  .sun-hero { grid-column: 1; grid-row: 1 / 4; }
  .sun-item { width: min(39vw, 70vh, 450px); }
  .sun-info { grid-column: 2; grid-row: 2; align-self: center; }
  .sun-info h3 { font-size: clamp(21px, 4vh, 34px); }
  .sun-description { font-size: clamp(13px, 2.4vh, 18px); margin: 8px auto 12px; }
  .sun-benefit { min-height: 52px; padding: 10px 14px; gap: 10px; }
  .sun-benefit strong { font-size: clamp(15px, 2.7vh, 22px); }
  .sun-celebration .sun-continue.primary { grid-column: 2; grid-row: 3; height: 60px; }
}
@media (orientation: portrait) and (max-height: 620px) {
  #modal .sun-celebration { padding-top: 14px; padding-bottom: 14px; }
  .sun-content { gap: 9px; }
  .sun-celebration .sun-heading { font-size: 30px; }
  .sun-description { margin: 6px auto 10px; font-size: 14px; }
  .sun-info h3 { font-size: 24px; }
  .sun-benefit { padding: 10px 12px; min-height: 56px; }
}
@media (orientation: landscape) and (max-height: 420px) {
  #modal .sun-celebration { padding: 14px max(18px, env(safe-area-inset-right)) 14px max(18px, env(safe-area-inset-left)); }
  .sun-content { gap: 8px 20px; }
  .sun-celebration .sun-heading { font-size: 27px; }
  .sun-benefit { padding: 8px 10px; }
  .sun-benefit > span { font-size: 25px; }
  .sun-celebration .sun-continue.primary { height: 50px; min-height: 50px; font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .sun-celebration *, .sun-celebration::before { animation: none !important; }
  .sun-confetti { display: none; }
}
#bonuses .tool.locked { opacity: .6; filter: grayscale(.5); }
.result.lose .big { animation: shake 0.5s; }
.result .tally { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; font-size: 14px; font-weight: 850; }
.result .tally span { padding: 5px 10px; border-radius: 999px; background: #efe6d2; color: #6c5a43; }
.result .tally .ok { background: #dcf3cf; color: #2e7a1f; }
.result .tally .bad { background: #fde0dc; color: #b3261b; }
.card .lesson { justify-content: center; text-align: center; margin: 0 0 8px; color: #3f6a35; }
.card .six { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 6px 10px 6px 4px; border-radius: 16px; background: #f2ecdc; text-align: left; font-size: 14px; font-weight: 700; color: var(--ink2); line-height: 1.4; }
.card .six svg { flex: none; }
.card .six p { margin: 0; }
@keyframes shake { 20%, 60% { transform: translateX(-8px) rotate(-4deg); } 40%, 80% { transform: translateX(8px) rotate(4deg); } }

/* tools */
#tools { position: absolute; right: 10px; top: 70px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
#tools button { width: 44px; height: 34px; border-radius: 10px; background: rgba(0,0,0,0.6); color: #fff; font-size: 14px; font-weight: 800; }
#tools.cheat-tools { top: max(70px, env(safe-area-inset-top)); align-items: flex-end; }
#tools.cheat-tools button { width: auto; min-height: 34px; padding: 6px 9px; font-size: 12px; }
#tools.cheat-tools button:disabled { opacity: .45; cursor: default; }
#cheat-open { min-width: 92px; }
.cheat-buttons { display: flex; gap: 6px; }
/* an open cheat panel sits above the mechanics' key ring and dull status, but never over a card */
#app:has(#modal[hidden]) #tools.cheat-tools:has(#lvcfg:not([hidden]), #progcfg:not([hidden]), #cheat-controls:not([hidden])) { z-index: 12; }
#lvcfg { width: min(430px, calc(100vw - 20px)); max-height: calc(100dvh - 115px); overflow-y: auto; padding: 12px; border-radius: 14px; background: rgba(21, 38, 40, .96); color: white; box-shadow: 0 8px 28px #15313255; font: 700 12px/1.4 system-ui, sans-serif; }
#lvcfg strong { display: block; margin-bottom: 6px; font-size: 15px; }
#lvcfg strong small { margin-left: 5px; opacity: .7; font-size: 11px; }
#lvcfg .lvcfg-stats { margin-bottom: 8px; opacity: .9; }
#lvcfg .lvcfg-row { display: grid; grid-template-columns: 62px repeat(9, 1fr); gap: 3px; margin-bottom: 3px; align-items: center; }
#lvcfg .lvcfg-row > span { font-size: 10px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tools.cheat-tools #lvcfg .lvcfg-row button { display: grid; justify-items: center; gap: 0; width: auto; min-height: 36px; padding: 2px 0; border: 2px solid transparent; border-radius: 8px; background: rgba(255,255,255,.1); font-size: 11px; }
#lvcfg .lvcfg-row button i { font-style: normal; font-size: 9px; line-height: 1.1; letter-spacing: -1px; }
#lvcfg .lvcfg-row button.edited { background: rgba(255, 196, 37, .3); }
#lvcfg .lvcfg-row button.now { border-color: #8bd450; }
#lvcfg .lvcfg-row button.sel { background: #7843c5; }
#lvcfg .lvcfg-edit { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(184, 212, 202, .35); }
#lvcfg .lvcfg-edit > small { opacity: .75; }
#lvcfg .lvcfg-edit em { color: #ffd75a; font-style: normal; }
#lvcfg fieldset { margin: 8px 0 0; padding: 3px 8px 6px; border: 1px solid rgba(184, 212, 202, .3); border-radius: 10px; }
#lvcfg fieldset.on { border-color: #b493ec; }
#lvcfg legend label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
#lvcfg .lvcfg-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px 8px; }
#lvcfg .lvcfg-fields label { display: grid; gap: 2px; font-size: 11px; opacity: .92; }
#lvcfg .lvcfg-fields input[type=number], #lvcfg .lvcfg-fields select { min-height: 26px; border-radius: 6px; border: 1px solid #b8d4ca; background: #f8f9ed; color: #20362e; font: inherit; }
#lvcfg .lvcfg-bool { display: flex !important; align-items: center; gap: 5px; }
#lvcfg .lvcfg-palette { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; }
#lvcfg .lvcfg-palette label { display: flex !important; align-items: center; gap: 3px; }
#lvcfg .cheat-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
#lvcfg .lvcfg-status { margin: 8px 0 0; color: #b6f08a; }
/* 🎛 Progression: the same dark sheet as 🧩 Levels, with tables of number fields */
#progcfg { width: min(430px, calc(100vw - 20px)); max-height: calc(100dvh - 115px); overflow-y: auto; padding: 12px; border-radius: 14px; background: rgba(21, 38, 40, .96); color: white; box-shadow: 0 8px 28px #15313255; font: 700 12px/1.4 system-ui, sans-serif; }
#progcfg strong { display: block; margin-bottom: 6px; font-size: 15px; }
#progcfg strong small { margin-left: 5px; opacity: .7; font-size: 11px; }
#progcfg .cfg-table { width: 100%; margin: 6px 0; border-collapse: collapse; }
#progcfg .cfg-table th { text-align: left; font-size: 10px; opacity: .7; font-weight: 800; }
#progcfg .cfg-table td { padding: 2px 4px 2px 0; }
#progcfg .cfg-table td small { opacity: .6; }
#progcfg input[type=number], #progcfg input[type=text] { width: 64px; min-height: 26px; border-radius: 6px; border: 1px solid #b8d4ca; background: #f8f9ed; color: #20362e; font: inherit; }
#progcfg input[data-p="pickaxeOffers.levels"] { width: 150px; }
#progcfg fieldset { margin: 8px 0; padding: 4px 8px 8px; border: 1px solid rgba(184, 212, 202, .3); border-radius: 10px; display: grid; gap: 6px; }
#progcfg .cfg-note { margin: 4px 0; font-size: 11px; opacity: .75; }
#progcfg .cheat-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
#progcfg .lvcfg-status { margin: 8px 0 0; color: #b6f08a; }
#cheat-controls { width: min(306px, calc(100vw - 20px)); max-height: calc(100dvh - 115px); overflow-y: auto; padding: 12px; border-radius: 14px; background: rgba(21, 38, 40, .94); color: white; box-shadow: 0 8px 28px #15313255; font: 700 12px/1.4 system-ui, sans-serif; }
#cheat-controls strong { display: block; margin-bottom: 8px; font-size: 15px; }
#cheat-controls strong small { margin-left: 5px; opacity: .7; font-size: 11px; }
#cheat-controls label { display: block; margin: 8px 0; }
#cheat-controls select { display: block; width: 100%; margin-top: 3px; min-height: 32px; border-radius: 8px; border: 1px solid #b8d4ca; background: #f8f9ed; color: #20362e; font: inherit; }
#cheat-controls .cheat-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
#cheat-controls .cheat-box { margin: 10px 0; padding: 4px 9px 9px; border: 1px solid rgba(184, 212, 202, .35); border-radius: 10px; }
#cheat-controls .cheat-box legend { padding: 0 4px; font-size: 13px; }
#cheat-controls .cheat-box legend small { margin-left: 4px; opacity: .65; font-size: 10px; font-weight: 600; }
#cheat-controls label.cheat-check { display: flex; align-items: center; gap: 7px; margin: 5px 0; cursor: pointer; }
#cheat-controls .cheat-check input { width: 16px; height: 16px; margin: 0; accent-color: #8bd450; }
#cheat-controls .cheat-check small { margin-left: auto; opacity: .6; font-size: 10px; }
#cheat-controls .cheat-note { margin: 2px 0 4px; font-weight: 600; opacity: .85; }
#modal { z-index: 6; }
@media (orientation: landscape) and (max-height: 520px) { #tools.cheat-tools { top: 8px; } #cheat-controls { max-height: calc(100dvh - 52px); } }
#loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--sky); z-index: 9; }
body.shot #hud, body.shot #tray, body.shot #home, body.shot #modal, body.shot #tools, body.shot #bubble, body.shot #hand { display: none !important; }
body.shot #achievement-toast { display: none !important; }
body.shot.withhud #hud, body.shot.withhud #tray { display: flex !important; }

/* Soft landscape, tactile controls and readable in-game feedback. */
/* The scenery stays behind the WebGL canvas and never intercepts input. */
/* All modes share the portrait Green Isles artwork as their base environment. */
.scenery { position: absolute; inset: -2px; pointer-events: none; background: #42a6f5 url('assets/stages/default-scenery.webp') center / cover no-repeat; }
/* Responsive painted atmosphere for the seven new cube settings. Landmarks themselves live on safe top blocks. */
#app[data-theme="autumn"] { --theme-accent: #d98735; --theme-hill: #aa744d; --theme-mist: #ffe1ad; --theme-sky: #f8cf96; }
#app[data-theme="winter"] { --theme-accent: #69a9c8; --theme-hill: #a7cbd9; --theme-mist: #f5fdff; --theme-sky: #d7effa; }
#app[data-theme="sakura"] { --theme-accent: #d981ab; --theme-hill: #c59bb7; --theme-mist: #fff1ec; --theme-sky: #f6dce8; }
#app[data-theme="desert"] { --theme-accent: #d89b56; --theme-hill: #d0a16d; --theme-mist: #fff0cf; --theme-sky: #f9dca7; }
#app[data-theme="coast"] { --theme-accent: #48adb6; --theme-hill: #73b7ae; --theme-mist: #ddf7ed; --theme-sky: #b7edf2; }
#app[data-theme="jungle"] { --theme-accent: #4aa66c; --theme-hill: #5e9e75; --theme-mist: #e3f5cc; --theme-sky: #b7ddb6; }
#app[data-theme="volcano"] { --theme-accent: #d76643; --theme-hill: #70505a; --theme-mist: #eab69a; --theme-sky: #c6957d; }
#app[data-theme]:not([data-theme="default"]) .scenery {
  background-image: radial-gradient(ellipse at 51% 21%, #ffffffa8 0%, transparent 36%),
    radial-gradient(ellipse at 12% 74%, var(--theme-mist) 0%, transparent 28%),
    radial-gradient(ellipse at 89% 63%, var(--theme-mist) 0%, transparent 27%),
    linear-gradient(180deg, var(--theme-sky) 0%, var(--theme-mist) 100%);
}
#app[data-theme]:not([data-theme="default"]) .scenery::before,
#app[data-theme]:not([data-theme="default"]) .scenery::after {
  content: ''; position: absolute; bottom: -12%; width: 30%; height: 50%; opacity: .55;
  background: radial-gradient(ellipse at 50% 10%, var(--theme-mist) 0%, transparent 51%),
    linear-gradient(155deg, transparent 18%, var(--theme-hill) 19% 59%, transparent 60%);
  filter: blur(8px); border-radius: 44% 44% 0 0;
}
#app[data-theme]:not([data-theme="default"]) .scenery::before { left: -13%; transform: rotate(12deg); }
#app[data-theme]:not([data-theme="default"]) .scenery::after { right: -13%; transform: scaleX(-1) rotate(12deg); }
#app[data-theme]:not([data-theme="default"]) .seg button[data-m="dig"].on { background: var(--theme-accent); box-shadow: 0 3px 0 #43566b77, inset 0 2px 0 #ffffff80; }
.choice-card .theme-name { font-size: clamp(9px, 1vw, 12px); line-height: 1.1; color: #52677a; }
.choice-card.theme-autumn { --card-accent: #d98735; }
.choice-card.theme-winter { --card-accent: #86bfd8; }
.choice-card.theme-sakura { --card-accent: #e6a3be; }
.choice-card.theme-desert { --card-accent: #dcad68; }
.choice-card.theme-default { --card-accent: #8bcd60; }
.choice-card.theme-coast { --card-accent: #76c4c3; }
.choice-card.theme-jungle { --card-accent: #64bb7c; }
.choice-card.theme-volcano { --card-accent: #d98363; }
.choice-card[class*="theme-"].selected { border-color: var(--card-accent); box-shadow: 0 6px 0 #415b6866, 0 0 20px var(--card-accent); }
@media (orientation: portrait) {
  #app[data-theme]:not([data-theme="default"]) .scenery::before,
  #app[data-theme]:not([data-theme="default"]) .scenery::after { width: 42%; height: 38%; bottom: -7%; }
}
.home-brand > .eyebrow, .home-brand p { color: #164866; text-shadow: 0 1px 3px #ffffffb3; }
.orbit-note { color: #1d5670; background: #f2fcffe6; box-shadow: 0 4px 12px rgba(16,64,108,0.14); }
.orbit-note:hover { background: #ffffff; box-shadow: 0 6px 16px rgba(16,64,108,0.22); }
.orbit-note:active, .orbit-note.spun { background: #e0f2fe; box-shadow: 0 2px 6px rgba(16,64,108,0.16); }
.progress-copy, .control-tip { color: #164663; text-shadow: 0 1px 3px #ffffffcc; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid #247e95; outline-offset: 5px; }
@media (hover: hover) { button:not(:disabled):hover { filter: brightness(1.04); } .lv:hover { transform: translateY(-2px); } }
#hud .pill { height: 48px; border: 2px solid #ffffff; border-radius: 999px; background: linear-gradient(180deg, #ffffff 0%, #eff5fb 100%); box-shadow: 0 4px 0 rgba(20, 66, 110, 0.16), 0 8px 18px rgba(16, 56, 98, 0.12); gap: 8px; color: #1e3142; }
#hud .pill small { display: block; font-size: 9px; letter-spacing: 0.8px; color: #647c90; line-height: 1.3; }
#hud .pill b { font-size: 18px; line-height: 1.25; color: #1b2d3e; }
#hud .pill i { font-size: 22px; }
#lvl { min-width: 144px; }
#clock { min-width: 98px; }
#left { min-width: 102px; }
#left small { color: #7a6858 !important; }
#left.tnt { background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%); }
.round { width: 48px; height: 48px; border: 2px solid #ffffff; border-radius: 50%; background: linear-gradient(180deg, #ffffff 0%, #eff5fb 100%); color: #54687a; box-shadow: 0 4px 0 rgba(20, 66, 110, 0.16), 0 8px 18px rgba(16, 56, 98, 0.12); }
#dig-progress { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: min(300px, 68vw); pointer-events: none; }
/* the level's modifiers, a plaque of chips under the HUD (a chip shows its rule card again) */
#mods { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; max-width: calc(100vw - 24px); padding: 4px 6px 4px 9px; border: 2px solid #ffffff; border-radius: 999px; background: linear-gradient(180deg, #f6edff, #e3d3fb); box-shadow: 0 3px 0 rgba(66, 33, 124, 0.25), 0 6px 14px rgba(36, 22, 74, 0.16); white-space: nowrap; }
#mods[hidden] { display: none; }
#mods small { font-size: 9px; font-weight: 900; letter-spacing: .8px; color: #6b4ca4; }
#mods button { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 4px; border-radius: 999px; background: #7843c5; color: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 2px 0 #42217c; }
#mods button i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #4b2290; font-size: 11px; font-style: normal; }
#mods button:active { transform: translateY(1px); box-shadow: 0 1px 0 #42217c; }
/* the dull-pickaxe status keeps clear of the plaque (the key ring reads the same variable) */
#app .mm-dull-hud { top: var(--mech-hud-top, 116px); }
/* the mechanics' screen overlays (z 11–13, above the HUD) step aside while any card is up: ads, pause, results, promos */
#app:has(#modal:not([hidden])) :is(.mm-dull-hud, .mm-dull-callout, .mm-key-hud, .mm-key-deny, .mm-key-flight, .mm-key-trail, .mechanic-deny) { visibility: hidden; }
.progress-copy { display: flex; justify-content: space-between; padding: 0 4px 4px; color: #164460; font-size: 11px; font-weight: 850; }
.progress-copy b { font-size: 10px; }
#progress-track { height: 10px; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 2px 6px rgba(16, 62, 106, 0.14), inset 0 1px 2px rgba(18, 64, 108, 0.18); }
#progress-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(180deg, #9cf048, #54c422); box-shadow: inset 0 1px 0 #dcff9e; transition: width .25s ease-out; }
#tray { gap: 14px; }
.control-tip { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 800; color: #154560; pointer-events: none !important; }
.tool { width: 60px; height: 62px; border: 2px solid #ffffff; border-radius: 20px; background: linear-gradient(180deg, #ffffff 0%, #eff5fb 100%); align-content: center; gap: 2px; box-shadow: 0 4px 0 rgba(20, 66, 110, 0.18), 0 8px 20px rgba(16, 56, 98, 0.14); color: #3d5266; }
.tool span { font-size: 26px; line-height: 1.1; }
.tool small, .seg small { font-size: 10px; font-weight: 850; }
.seg { border: 2px solid #ffffff; padding: 5px; gap: 5px; border-radius: 24px; background: linear-gradient(180deg, #ffffff 0%, #eff5fb 100%); box-shadow: 0 4px 0 rgba(20, 66, 110, 0.18), 0 8px 20px rgba(16, 56, 98, 0.14); }
.seg button { width: 78px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 18px; color: #5b6e80; }
.seg button span { font-size: 26px; line-height: 1.1; }
.seg button.on { color: #fff; background: linear-gradient(180deg, #6be646 0%, #3dc222 100%); box-shadow: 0 3px 0 #269112, inset 0 2px 0 rgba(255, 255, 255, 0.42); }
.seg button[data-m="flag"].on { background: linear-gradient(180deg, #ff6c52 0%, #de3824 100%); box-shadow: 0 3px 0 #a32012, inset 0 2px 0 rgba(255, 255, 255, 0.38); }
#bubble { width: max-content; border: 2px solid #fffef8; font-size: 14px; }
#achievement-toast { position: absolute; top: calc(max(22px, env(safe-area-inset-top)) + 106px); left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 10px; align-items: center; min-width: 220px; max-width: min(340px, 90vw); padding: 10px 15px; border: 2px solid #fff; border-radius: 18px; background: #fff8dc; box-shadow: 0 6px 22px #24435a55; color: #403b31; pointer-events: none; }
#achievement-toast[hidden] { display: none; }
#achievement-toast i { font-size: 26px; font-style: normal; }
#achievement-toast small, #achievement-toast b { display: block; }
#achievement-toast small { font-size: 10px; color: #8c7144; font-weight: 850; }
#achievement-toast b { font-size: 15px; }
.achievement-gallery { width: min(610px, 100%); }
.achievement-gallery .gallery-close { position: sticky; top: 0; float: right; z-index: 1; width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 12px; font-size: 23px; }
.achievement-gallery .achievement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; text-align: left; }
.achievement-gallery h3 { margin: 15px 0 7px; font-size: 13px; }
.achievement-card { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px; border-radius: 12px; background: #f4f7ef; }
.achievement-card.locked { opacity: .57; filter: grayscale(.7); }
.achievement-card i { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: #fff; font-style: normal; font-size: 18px; }
.achievement-card b, .achievement-card small { display: block; }
.achievement-card b { font-size: 12px; }
.achievement-card small { font-size: 10px; line-height: 1.25; }
@media (max-width: 500px) { .achievement-gallery .achievement-grid { grid-template-columns: 1fr; } }
#modal { background: #24493b66; backdrop-filter: blur(5px); overflow-y: auto; touch-action: pan-y; }
#modal.low { backdrop-filter: none; }
.card { border: 3px solid #fffef6; border-radius: 29px; box-shadow: 0 7px 0 #60744d55, 0 20px 60px #30533d40; max-height: 100%; overflow-y: auto; }
.card h2 { font-size: 25px; letter-spacing: -.8px; }
.card .tip { font-size: 14px; line-height: 1.5; }
.card button { font-size: 17px; }
.card button.primary { background: linear-gradient(#91d554, #6bb43d); }
.pause .col { gap: 8px; }
.pause .col button { height: 45px; font-size: 15px; flex-shrink: 0; }
.result .eyebrow { display: block; margin-top: 6px; }
.result h2 { margin-bottom: 16px; }
.result.lose h2 { margin-bottom: 8px; }
#auto-pill { top: calc(max(22px, env(safe-area-inset-top)) + 105px); font-size: 12px; height: 30px; }
@media (max-width: 600px) {
  #hud { top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; gap: 6px; height: 93px; padding-bottom: 43px; }
  #hud .pill { height: 47px; padding: 0 9px; border-radius: 14px; gap: 4px; }
  #hud .pill small { font-size: 8px; letter-spacing: .5px; }
  #hud .pill b { font-size: 13px; }
  #hud .pill i { font-size: 19px; }
  #lvl { min-width: 0; flex: 1; }
  #lvl b { max-width: 98px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #clock, #left { min-width: 0; }
  #hud .grow { display: none; }
  .round { width: 43px; height: 47px; border-radius: 14px; }
  #tray { gap: 12px; bottom: max(22px, env(safe-area-inset-bottom)); }
  .tool { width: 53px; height: 61px; border-radius: 17px; }
  .seg button { width: 67px; height: 56px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #home { display: grid; grid-template-columns: minmax(0, 1fr) min(46%, 370px); grid-template-rows: auto minmax(0, 1fr); gap: 0 20px; padding: 18px 24px; }
  .home-brand { grid-column: 1; }
  .home-brand > .eyebrow { font-size: 8px; }
  .wordmark { font-size: 44px; letter-spacing: -2px; }
  .home-brand p { font-size: 10px; margin-top: 9px; }
  .panel { grid-column: 2; grid-row: 1 / 3; max-height: 100%; margin: 0; padding: 15px; }
  .adventure-heading h2 { font-size: 19px; }
  #hud { top: 10px; height: 54px; padding-bottom: 0; left: 12px; right: 12px; }
  #dig-progress { width: 180px; left: 60%; bottom: 10px; }
  #tray { left: auto; right: max(14px, env(safe-area-inset-right)); top: 77px; bottom: 12px; flex-direction: column; gap: 10px; }
  .control-tip { display: none; }
  .seg { flex-direction: column; padding: 4px; border-radius: 18px; }
  .seg button { width: 52px; height: 49px; border-radius: 12px; }
  .tool { width: 54px; height: 49px; border-radius: 14px; }
  .tool span, .seg button span { font-size: 23px; }
  .tool small, .seg small { font-size: 8px; }
  #auto-pill { top: 70px; }
  .card { margin: auto; }
  #modal.low .card { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 360px) {
  .adventure-heading h2 { font-size: 17px; letter-spacing: -.7px; }
  .adventure-heading .eyebrow { letter-spacing: 1px; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 700px) {
  #hud { height: 85px; padding-bottom: 34px; }
  #dig-progress { width: 180px; bottom: 0; left: 50%; }
}

/* Maintain contrast over the brighter sky in both orientations. */
.progress-copy, .control-tip { color: #244d61; text-shadow: 0 1px 3px #ffffffb3; }

/* Sheep companion and bite-sized lessons. Keep text outside the playable rectangle. */
#practice { position:absolute; z-index:4; left:50%; transform:translateX(-50%); width:min(440px,calc(100% - 24px)); padding:12px 16px; border:2px solid #fffef7; border-radius:20px; background:var(--cream); color:var(--ink); box-shadow:0 5px 0 #24303b22,0 12px 28px #24303b22; }
.practice-heading { display:flex; gap:8px; justify-content:space-between; align-items:center; font-size:13px; }
#practice-skip { font-size:11px; padding:7px 9px; background:#eee5cd; border-radius:10px; white-space:nowrap; }
#practice-text { margin:9px 0 3px; font-size:16px; line-height:1.4; font-weight:750; }
#practice-bar { height:6px; margin:10px 0 2px; border-radius:999px; background:#eee5cd; overflow:hidden; }
#practice-bar i { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(180deg,#9cf048,#54c422); }
body.learning #clock, body.learning #left, body.learning #dig-progress, body.learning .control-tip, body.learning #bubble { display:none!important; }
.bonus em { position:absolute; top:-8px; right:-6px; padding:2px 5px; border-radius:10px; background:var(--ink); color:var(--gold); font-size:10px; font-style:normal; font-weight:900; white-space:nowrap; transition: transform 0.15s, background 0.2s; }
/* out of stock: the badge offers one more for a rewarded ad */
.bonus.ad em { background: linear-gradient(#ffd75a, #f2a91b); color: #5a3a00; border: 1px solid #fff3c4; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.bonus.ad span { opacity: .7; }
/* the ram readied: the button glows gold until a block is tapped (or the ram is put away) */
.bonus.aim { background: linear-gradient(180deg, #fff6d2 0%, #ffd766 100%); border-color: #fff0b8; color: #6b4a00; box-shadow: 0 0 0 3px #ffb52e, 0 4px 0 rgba(20, 66, 110, 0.18), 0 8px 22px rgba(255, 170, 40, 0.5); animation: bonus-aim 1.1s ease-in-out infinite; }
@keyframes bonus-aim { 50% { box-shadow: 0 0 0 6px #ffb52e88, 0 4px 0 rgba(20, 66, 110, 0.18), 0 10px 28px rgba(255, 170, 40, 0.7); } }
#tray { gap:9px; }
#bonuses { display:flex; gap:9px; }
#bonuses[hidden] { display:none; }
@media(max-width:400px) { #tray, #bonuses { gap:6px; } #tray .tool { width:48px; } #tray .seg button { width:55px; } }
/* six buttons in one row on the narrowest phones */
@media(max-width:360px) { #tray, #bonuses { gap:5px; } #tray .tool { width:42px; } #tray .seg { padding:4px; gap:4px; } #tray .seg button { width:47px; } #tray .tool small, #tray .seg small { font-size:9px; } }
/* a short landscape screen: the tray stands at the right edge, the bonuses in a second column left of it */
@media (orientation: landscape) and (max-height: 520px) { #bonuses { position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%); flex-direction:column; gap:8px; } }
@media(max-height:480px) and (min-width:560px) { #practice { left:10px; transform:none; width:230px; padding:9px 12px; } #practice-text { font-size:14px; } .practice-heading { flex-wrap:wrap; } #tray { gap:6px; } #tray .tool { height:46px; min-height:46px; } }

body.learning #lvl { flex:1; max-width:none; }
body.learning #lvl b { max-width:none; overflow:visible; }

@media (max-height:360px) and (min-width:560px) {
  #tray .tool { height:38px; min-height:38px; }
  #tray .seg button { height:35px; }
  #tray .tool span, #tray .seg button span { font-size:20px; }
}

/* Image-inspired home: the live scene occupies the open space between fixed controls. */
#home { z-index: 2; width: min(100%, 1060px); left: 50%; right: auto; transform: translateX(-50%); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(120px, 1fr) auto auto; gap: clamp(8px, 1.4vh, 18px); padding: max(18px, env(safe-area-inset-top)) clamp(16px, 3vw, 36px) max(12px, env(safe-area-inset-bottom)); }
.home-topbar { position: relative; display: flex; justify-content: center; align-items: flex-start; min-height: 110px; }
.home-brand { padding: 0 120px; }
.wordmark { font-size: clamp(42px, 7vw, 86px); margin-top: 0; white-space: nowrap; }
.home-brand p { margin-top: 8px; font-size: clamp(12px, 1.6vw, 17px); }
.home-corner, .home-status { position: absolute; top: 4px; }
.home-corner { left: 0; width: 58px; height: 58px; border: 3px solid #b9f3ff; border-radius: 19px; color: #fff; background: linear-gradient(#31b9ee, #087ac6); box-shadow: 0 5px 0 #155e97, 0 8px 18px #1351806b; font-size: 32px; text-shadow: 0 2px 2px #075285; }
.home-status { right: 0; }
#total, #achievements-open, #daily-history-open { height: 56px; min-width: 124px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 3px solid #fff; border-radius: 999px; background: linear-gradient(#fffef4, #fff1bd); box-shadow: 0 4px 0 #dc9e1f, 0 7px 16px #48698355; color: #573913; }
#total .menu-star { width: 30px; height: 30px; }
#achievements-open span, #daily-history-open span { font-style: normal; font-size: 29px; line-height: 1; }
#total span { display: block; white-space: nowrap; }
#total b, #achievements-open b, #daily-history-open b { font-size: 22px; }
#total small { display: inline; margin: 0 0 0 2px; font-size: 14px; }
#total .home-tool-track { display: block; height: 5px; margin-top: 1px; overflow: hidden; border-radius: 8px; background: #d9c8a4; }
#total .home-tool-track i { display: block; height: 100%; border-radius: inherit; background: #f9a91d; }
#achievements-open, #daily-history-open { width: auto; margin: 0; padding: 0 15px; }
#stage { grid-column: 1; min-height: 120px; }
.orbit-note { bottom: 2px; }
.home-actions { display: flex; justify-content: center; }
.play-next { width: min(620px, 92%); min-height: clamp(70px, 10vh, 106px); margin: 0; justify-content: center; gap: 20px; border: 4px solid #fffacb; border-radius: 42px; background: linear-gradient(#a7f54d 0%, #5cda12 48%, #21aa08 100%); box-shadow: 0 8px 0 #0e7a06, 0 12px 26px #225d2180, inset 0 3px 0 #edffbc; text-align: center; }
.play-next strong { font-size: clamp(28px, 5vw, 52px); line-height: 1; text-transform: uppercase; text-shadow: 0 3px 1px #087b0b; }
.play-next small { margin-top: 4px; font-size: clamp(11px, 1.3vw, 14px); }
.play-symbol { font-size: clamp(28px, 4vw, 46px); }
.play-next:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .8; }
.play-next:disabled:active { transform: none; }
.home-picker { width: min(800px, 100%); margin: 0 auto; }
.picker-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 52px 5px; color: #fff; text-shadow: 0 2px 5px #075174; }
.picker-heading h2 { margin: 0; font-size: clamp(16px, 2.6vw, 23px); }
.picker-heading span { font-size: 11px; font-weight: 800; }
.picker-row { display: flex; align-items: center; gap: 8px; }
.picker-arrow { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid #b5f1ff; border-radius: 50%; background: linear-gradient(#3dbaf2, #178aca); box-shadow: 0 4px 0 #0c5a96, inset 0 2px 0 #baf5ff9c; color: #fff; font-size: 38px; font-weight: 900; line-height: 1; text-shadow: 0 2px 0 #125781; }
.picker-arrow:disabled { opacity: .35; cursor: default; }
.choice-window { flex: 1; min-width: 0; position: relative; clip-path: inset(-18px 0 -18px 0); perspective: 780px; }
#levels.choice-list { --choice-gap: clamp(6px, 1.6vw, 18px); --slide-duration: .42s; display: flex; grid-template-columns: none; align-items: stretch; gap: var(--choice-gap); width: max-content; transform: translate3d(0, 0, 0); transition: transform var(--slide-duration) cubic-bezier(.22, .8, .25, 1); will-change: transform; }
.choice-list.no-slide { transition: none !important; }
.choice-spacer, .choice-card { flex: 0 0 var(--card-width, 100px); }
.choice-spacer { display: block; }
.choice-card { position: relative; min-width: 0; min-height: clamp(110px, 15vh, 180px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px; border: 3px solid #c6fff4; border-radius: 25px; background: linear-gradient(145deg, #f6ffffed, #d6f9f6e8); box-shadow: 0 5px 0 #3baab7, 0 12px 24px #074e7a45; color: #203d61; text-align: center; transform: scale(.93); transform-style: preserve-3d; backface-visibility: hidden; transition: transform .42s cubic-bezier(.22, .8, .25, 1), box-shadow .22s ease, background .22s ease; }
.choice-card.side-left { transform: rotateY(-16deg) translateX(3px) scale(.93); }
.choice-card.side-right { transform: rotateY(16deg) translateX(-3px) scale(.93); }
.choice-card.selected { z-index: 1; border: 4px solid #fff3a1; background: linear-gradient(#fffefa, #fff5ca); box-shadow: 0 6px 0 #d69414, 0 0 20px #ffee6aa8; transform: translateZ(16px) scale(1.04); }
.choice-card.side-left:hover { transform: rotateY(-10deg) translateX(3px) scale(.97); }
.choice-card.side-right:hover { transform: rotateY(10deg) translateX(-3px) scale(.97); }
.choice-card.selected:hover { transform: translateZ(16px) scale(1.04); }
.choice-card strong { font-size: clamp(17px, 2.2vw, 26px); line-height: 1.05; white-space: nowrap; }
.choice-card.wide-label strong { font-size: clamp(15px, 1.8vw, 22px); }
.choice-card strong i { font-size: .55em; font-style: normal; }
.choice-art { font-size: clamp(24px, 4vw, 44px); line-height: 1.1; }
.cube-thumbnail { display: block; width: clamp(63px, 11vw, 100px); height: auto; overflow: visible; flex: none; filter: drop-shadow(0 3px 2px #775d4555); }
.star-row { display: flex; justify-content: center; gap: 1px; height: 22px; }
.menu-star { display: block; width: 22px; height: 22px; flex: none; overflow: visible; }
.menu-star path:first-child { fill: #ffd42a; stroke: #e47a00; stroke-width: 2.2; stroke-linejoin: round; filter: drop-shadow(0 2px 0 #a76110); }
.menu-star .star-shine { fill: #fff3a5; stroke: none; }
.menu-star.empty path:first-child { fill: #d6dadc; stroke: #aeb5b6; filter: none; }
.menu-star.empty .star-shine { fill: #f1f3f2; }
.choice-badge { position: absolute; top: 5px; right: 6px; font-size: 11px; }
.choice-card.locked .choice-badge { top: 27px; right: 4px; }
.choice-badge.running { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #65be37; color: white; font-size: 9px; }
.choice-card small { color: #274969; font-size: clamp(10px, 1.3vw, 15px); font-weight: 900; white-space: nowrap; }
.choice-card.locked { opacity: .65; filter: grayscale(.55); }
.choice-card.endless-mode { height: auto; }
.choice-card.endless-mode strong { font-size: clamp(17px, 2.2vw, 26px); }
.choice-card.daily-mode strong { font-size: clamp(13px, 1.8vw, 21px); white-space: normal; }
.choice-card.daily-mode .choice-art { font-size: clamp(27px, 4vw, 44px); }
.daily-history-list { max-height: min(48vh, 360px); overflow-y: auto; margin: 8px 0 16px; }
.daily-history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 4px; border-bottom: 1px solid #d8ddc8; text-align: left; }
.daily-history-row span { display: grid; gap: 2px; }
.daily-history-row small { color: var(--ink2); }
.daily-history-row strong { white-space: nowrap; }
/* The home navigation stays at the viewport edge; the grid reserves its height. */
#home { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.home-bottom { position: absolute; left: 50%; bottom: 0; width: 100vw; transform: translateX(-50%); padding: 6px max(12px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-top: 2px solid #ffffffdd; background: linear-gradient(#f5fffc, #ddf3ef); box-shadow: 0 -5px 24px #13699e22; }
.mode-tabs { display: flex; justify-content: center; gap: 8px; max-width: 600px; margin: 0 auto; }
.mode-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 1; min-width: 0; min-height: 64px; padding: 7px 8px; border-radius: 16px; background: transparent; color: #537888; font-size: 13px; font-weight: 850; line-height: 1.1; transition: background .15s, color .15s; }
.mode-tab.on { color: #0879b8; background: #c9edf5; }
.mode-tab.on::before { content: ''; position: absolute; top: -7px; width: 32px; height: 3px; border-radius: 0 0 4px 4px; background: #098bcc; }
.mode-tab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mode-tab:focus-visible { outline: 3px solid #0879b8; outline-offset: -3px; }
@media (hover: hover) { .mode-tab:not(.on):hover { background: #e2f2f3; } }
.home-footer { margin: 8px 4px 0; }
.home-footer button, .home-footer .vault { color: #fff; font-size: 12px; font-weight: 900; text-shadow: 0 2px 5px #075174; }
.home-footer .vault { margin: 0; }
#hud-achievements { cursor: pointer; }
#hud-achievements span { line-height: 1; }
@media (max-width: 600px) {
  #home { display: grid; grid-template-rows: auto minmax(105px, 1fr) auto auto; gap: 10px; padding: max(14px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); }
  .home-topbar { min-height: 100px; }
  .home-brand { padding: 0 45px; }
  .wordmark { font-size: clamp(30px, 9vw, 49px); letter-spacing: -2px; }
  .wordmark i { right: -12px; top: -12px; font-size: 20px; }
  .home-brand p { margin-top: 7px; font-size: 10px; line-height: 1.2; }
  .home-corner { width: 44px; height: 44px; border-radius: 14px; font-size: 25px; }
  #total, #achievements-open, #daily-history-open { min-width: 64px; height: 42px; padding: 0 5px; gap: 2px; border-width: 2px; }
  #total .menu-star { width: 23px; height: 23px; }
  #achievements-open span, #daily-history-open span { font-size: 21px; }
  #total b, #achievements-open b, #daily-history-open b { font-size: 13px; }
  #total small { font-size: 9px; }
  .play-next { width: 96%; min-height: 70px; border-radius: 30px; gap: 11px; }
  .play-next strong { font-size: clamp(25px, 8vw, 38px); }
  .play-next small { font-size: 10px; }
  .picker-heading { padding: 0 28px 4px; }
  .picker-heading span { font-size: 9px; }
  .picker-arrow { width: 36px; height: 36px; font-size: 30px; }
  .picker-row { gap: 3px; }
  #levels.choice-list { --choice-gap: 4px; }
  .choice-card { min-height: 116px; padding: 4px 1px; border-radius: 17px; gap: 2px; }
  .choice-card strong { font-size: clamp(12px, 4.1vw, 18px); }
  .choice-card.wide-label strong { font-size: clamp(11px, 3.2vw, 15px); }
  .choice-card.endless-mode strong { font-size: clamp(12px, 3.8vw, 18px); }
  .choice-card small { font-size: 9px; }
  .choice-art { font-size: 27px; }
  .cube-thumbnail { width: clamp(52px, 17vw, 72px); }
  .star-row { height: 18px; }
  .menu-star { width: 18px; height: 18px; }
  #home { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .home-footer { margin-top: 6px; }
  #hud:has(#hud-achievements:not([hidden])) { height: 143px; padding-bottom: 43px; }
  #hud-achievements { position: absolute; top: 78px; right: 0; height: 38px !important; min-width: 0; }
  #hud-achievements i { font-size: 18px !important; }
  #hud-achievements small { font-size: 7px !important; }
  #hud-achievements b { font-size: 11px !important; }
  #hud:has(#hud-achievements:not([hidden])) #dig-progress { bottom: 0; }
  #achievement-toast { top: calc(max(12px, env(safe-area-inset-top)) + 150px); }
}
@media (orientation: landscape) and (max-height: 520px) {
  #home { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(300px, 44%); grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 16px; }
  .home-topbar { grid-column: 1 / 3; min-height: 62px; }
  .home-brand { padding: 0 100px; }
  .wordmark { font-size: 42px; }
  .home-brand p { margin-top: 0; font-size: 10px; }
  #stage { grid-column: 1; grid-row: 2 / 4; min-height: 100px; }
  .home-actions { grid-column: 2; grid-row: 2; align-self: end; }
  .play-next { width: 100%; min-height: 57px; }
  .play-next strong { font-size: 25px; }
  .home-picker { grid-column: 2; grid-row: 3; }
  .choice-card { min-height: 76px; gap: 0; }
  .choice-art { display: none; }
  .choice-card .cube-thumbnail { display: block; width: 36px; }
  .choice-card .star-row { height: 14px; }
  .choice-card .menu-star { width: 14px; height: 14px; }
  #home { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .mode-tab { min-height: 44px; gap: 2px; padding: 3px 8px; font-size: 11px; }
  .mode-tab svg { width: 22px; height: 22px; }
  .home-footer { display: none; }
  #hud #dig-progress { left: 54%; width: 160px; }
}
@media (orientation: portrait) and (max-height: 600px) {
  .home-topbar { min-height: 76px; }
  .play-next { min-height: 62px; }
  .choice-card { min-height: 93px; }
  .choice-art { font-size: 22px; }
  .cube-thumbnail { width: 50px; }
  .star-row { height: 16px; }
  .menu-star { width: 16px; height: 16px; }
  .mode-tab { min-height: 56px; }
  #home { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 600px) {
  #hud:has(#hud-achievements:not([hidden])) { top: 8px; height: 54px; padding-bottom: 0; }
  #hud-achievements { position: static; height: 47px !important; flex: none; }
  #hud:has(#hud-achievements:not([hidden])) #dig-progress { left: 50%; top: 62px; bottom: auto; height: 26px; width: 160px; }
}
@media (prefers-reduced-motion: reduce) { .choice-list, .choice-card { transition-duration: .01ms !important; } }

/* Generated tool art: one asset per tool, shared by controls and progression. */
.tool-art { display: block; width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; user-select: none; pointer-events: none; filter: drop-shadow(0 2px 1px rgba(67, 47, 25, .16)); }
.tool > span, .seg button > span { display: grid; place-items: center; }
.tool .tool-art, .seg .tool-art { width: 32px; height: 32px; }
.ladder-icon .tool-art { width: 38px; height: 38px; }
.upgrade-icon .tool-art { width: 40px; height: 40px; }
.upgrade-pin-dot .tool-art { width: 19px; height: 19px; filter: none; }
.upgrade-hero-icon .tool-art { width: 64px; height: 64px; }
.upcoming-icon .tool-art { width: 42px; height: 42px; }
#hold .tool-art { width: 30px; height: 30px; }
@media (orientation: landscape) and (max-height: 520px) { .tool .tool-art, .seg .tool-art { width: 26px; height: 26px; } }
@media (max-height: 380px) and (min-width: 560px) { .tool .tool-art, .seg .tool-art { width: 22px; height: 22px; } }
#bubble .tool-art { display: inline-block; width: 24px; height: 24px; vertical-align: middle; margin-right: 3px; }

/* Reference-led home layout: full stage map, daily feature, and endless tower. */
.stage-scenery { position:absolute; inset:0; pointer-events:none; background:center / cover no-repeat; opacity:0; transition:opacity .45s ease; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip:rect(0,0,0,0); overflow:hidden; white-space:nowrap; }
#app:has(#home[data-mode="stages"]:not([hidden])) #scene { visibility:hidden; pointer-events:none; }
#home { --mode-color:#67cf1e; --mode-top:#9aed48; --mode-dark:#388a10; --mode-light:#e7fac9; --mode-ink:#276514; width:min(600px,100%); display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:76px minmax(0,1fr) 72px 76px; grid-template-areas:'brand' 'content' 'action' 'nav'; gap:10px; padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom)); }
#home[data-mode="daily"] { --mode-color:#edb715; --mode-top:#ffe268; --mode-dark:#a87909; --mode-light:#fff0b5; --mode-ink:#a36800; grid-template-rows:76px 46px 22px minmax(120px,1fr) auto 72px 76px; grid-template-areas:'brand' 'heading' 'countdown' 'preview' 'content' 'action' 'nav'; }
#home[data-mode="endless"] { --mode-color:#9064f2; --mode-top:#b799ff; --mode-dark:#5934bd; --mode-light:#eae0ff; --mode-ink:#6426d4; grid-template-rows:76px 24px minmax(150px,1fr) auto 72px 76px; grid-template-areas:'brand' 'heading' 'preview' 'content' 'action' 'nav'; }
#home .home-topbar { grid-area:brand; min-height:0; position:relative; display:flex; align-items:flex-start; justify-content:center; }
#home .home-brand { padding:5px 53px 0; min-width:0; }
#home .wordmark { font-size:clamp(31px,8.6vw,49px); letter-spacing:-2px; line-height:1.1; white-space:nowrap; }
#home .home-corner { left:auto; right:0; top:3px; width:42px; height:42px; border-radius:50%; border:1px solid #ffffff55; background:#0a97d955; box-shadow:0 3px 8px #17699933; font-size:28px; }
#home .home-status { left:0; right:auto; top:5px; display:flex; }
#home #total, #home #achievements-open, #home #daily-history-open { height:37px; min-width:0; width:auto; padding:0 8px; gap:3px; border:2px solid #fff8; border-radius:16px; background:#fff9d9ed; box-shadow:0 3px 0 #b6a86d55; }
#home #total .menu-star { width:19px; height:19px; }
#home #total b, #home #achievements-open b, #home #daily-history-open b { font-size:12px; }
#home #total small, #home #total .home-tool-track { display:none; }
#home #achievements-open span, #home #daily-history-open span { font-size:19px; }
#home .mode-heading { grid-area:heading; text-align:center; color:#244b53; text-shadow:0 2px 2px #ffffff88; }
#home[data-mode="stages"] .mode-heading, #mode-eyebrow { display:none; }
.mode-heading h2 { margin:0; font-size:clamp(24px,5vw,30px); font-weight:950; letter-spacing:-.8px; line-height:1.05; }
.mode-heading p { margin:7px 0 0; font-size:15px; font-weight:850; }
#home[data-mode="daily"] .mode-heading { justify-self:center; width:min(100%,300px); height:46px; display:flex; flex-direction:column; justify-content:center; position:relative; border:2px solid #ffea8f; border-radius:16px; background:linear-gradient(110deg,#fff2b5,#fffbed); box-shadow:0 3px 0 #d1ab3b44; padding:4px 12px 4px 46px; text-align:left; text-shadow:none; }
#home[data-mode="daily"] .mode-heading h2 { font-size:19px; letter-spacing:-.4px; }
.daily-calendar { display:none; }
#home[data-mode="daily"] .daily-calendar { display:block; position:absolute; left:12px; top:7px; width:24px; height:28px; filter:drop-shadow(0 2px 1px #ae791b40); }
#home[data-mode="daily"] .mode-heading p { color:#85805d; font-size:11px; margin:2px 0 0; }
#home[data-mode="endless"] .mode-heading h2 { font-size:20px; }
#home[data-mode="endless"] .mode-heading p { display:none; }
#home > .daily-countdown { grid-area:countdown; width:max-content; max-width:100%; margin:0; justify-self:center; align-self:center; padding:3px 12px; border:1px solid #fff; border-radius:99px; background:#fffbedeb; color:#506c66; font-size:11px; line-height:1.2; font-weight:900; font-variant-numeric:tabular-nums; }
#home #stage { grid-area:preview; position:relative; min-width:0; min-height:0; }
#home #orbit-btn { display:none; }
#preview-label { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:max-content; max-width:100%; text-align:center; padding:5px 12px; border:2px solid #fff9; border-radius:16px; background:#eee2fff2; color:#573296; box-shadow:0 3px 0 #7455b138,0 6px 14px #26486820; }
#preview-label b, #preview-label small { display:block; }
#preview-label b { font-size:15px; font-weight:950; }
#preview-label small { font-size:11px; font-weight:800; margin-top:3px; }
#home[data-mode="daily"] #preview-label { padding:0; background:none; border:0; box-shadow:none; color:#305962; }
#preview-label .star-row { display:flex; gap:6px; height:30px; justify-content:center; filter:drop-shadow(0 3px 1px #ad8c3355); }
#preview-label .menu-star { width:30px; height:30px; }
#home #home-content { grid-area:content; display:flex; flex-direction:column; min-height:0; min-width:0; }
.path-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:28px; flex:none; margin-bottom:4px; }
.path-selection { font-size:10px; font-weight:800; color:#285159; text-shadow:0 1px 2px #fff; }
.learn-link { min-height:28px; padding:5px 9px; border-radius:99px; background:#fffbedc9; color:#3b6054; font-size:10px; font-weight:850; }
.learn-link.selected { box-shadow:0 0 0 2px #fff8; }
.stage-path { position:relative; flex:1; min-height:0; overflow:hidden auto; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:none; border:0; border-radius:0; background:none; }
.stage-path::-webkit-scrollbar { display:none; }
.path-track { position:relative; width:100%; }
.path-dots { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.path-dots path { fill:none; stroke:#fffde9; stroke-width:4; stroke-dasharray:3 12; stroke-linecap:round; }
.stage-node { position:absolute; left:var(--node-x); top:var(--node-top); transform:translateX(-50%) scale(var(--node-scale,1)); transform-origin:top center; width:88px; height:118px; padding:0; border:0; background:transparent; display:flex; flex-direction:column; align-items:center; border-radius:20px; color:#3a5545; }
.node-art { position:relative; width:88px; height:80px; display:block; flex:none; filter:drop-shadow(0 4px 3px #294e5930); transition:transform .18s ease; }
.stage-art, .stage-art-fallback { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.node-number { position:absolute; left:50%; top:48%; transform:translateX(-50%); font-size:25px; line-height:1; font-weight:950; color:#fffbed; text-shadow:0 2px 2px #493220,1px 0 1px #493220,-1px 0 1px #493220; }
.node-name { display:none; font-size:11px; font-weight:950; white-space:nowrap; line-height:1; padding:4px 10px; border:1px solid #fff; border-radius:99px; background:#fffbedf2; margin-top:2px; }
.stage-node .star-row { display:flex; flex:none; justify-content:center; gap:1px; height:18px; filter:drop-shadow(0 1px 1px #4b412e50); }
.stage-node .menu-star { width:18px; height:18px; }
.stage-node.selected { z-index:2; }
.stage-node.selected .node-art { transform:scale(1.13); filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #ffdc48); }
.stage-node.selected .node-name { display:block; }
/* Zero-size anchor follows the cube; the illustration's feet sit at its origin. */
.stage-sheep { position:absolute; left:0; top:0; width:0; height:0; z-index:3; pointer-events:none; }
.stage-sheep-body { position:absolute; left:calc(var(--sheep-size) / -2); bottom:0; width:var(--sheep-size); height:var(--sheep-size); transform-origin:50% 100%; }
.stage-sheep img { display:block; width:100%; height:100%; transform:scaleX(var(--sheep-facing,1)); filter:drop-shadow(0 2px 1px #294e5940); user-select:none; }

.node-lock, .node-running { position:absolute; right:0; top:6px; display:grid; place-items:center; width:20px; height:20px; border:1px solid #fff; border-radius:50%; background:#fffbeddb; font-size:10px; }
.node-running { color:#3d8a16; }
.stage-node.locked:not(.selected) .stage-art { opacity:.65; filter:saturate(.35); }
.stage-node.locked { cursor:default; }
.node-art.deny { animation:shake .38s ease; }
/* The levels past the next biome: a few cubes blur away into a bank of cloud that ends the path. */
.stage-node.fogged { pointer-events:none; filter:blur(1.5px) saturate(.4); opacity:.75; }
#home-fog { position:absolute; left:calc(50% - 50vw); width:100vw; bottom:0; z-index:1; pointer-events:none; overflow:hidden;
  background:linear-gradient(#f6fbff00, #f6fbff99 110px, #f7fbffe0 220px, #f8fcfffa 320px); }
#home-fog[hidden] { display:none; }
/* Three rolling cloud bands: each scrolls its tiled puffs sideways at its own speed, breathes up and down, and
   shifts with the path by its own share of --fog-rise (far lags, near leads), so the bank reads as deep and alive. */
.fog-layer { position:absolute; left:0; right:0; display:block; pointer-events:none; background-repeat:repeat-x;
  translate:0 calc(var(--fog-rise, 0) * var(--k) * 1px);
  animation:fog-roll var(--roll) linear infinite, fog-breathe var(--breathe) ease-in-out infinite alternate; }
.fog-layer.far { --k:-.35; --roll:46s; --breathe:7s; --tile:340px; top:-30px; height:150px; opacity:.75; filter:blur(3px);
  background-image:radial-gradient(closest-side,#fff,#fff0), radial-gradient(closest-side,#ffffffd0,#fff0), radial-gradient(closest-side,#fff,#fff0);
  background-size:var(--tile) 100%; background-position:0 60%, 120px 20%, 230px 80%; }
.fog-layer.mid { --k:-.12; --roll:30s; --breathe:5.5s; --tile:260px; top:30px; height:190px; opacity:.9; filter:blur(1.5px); animation-direction:reverse, alternate;
  background-image:radial-gradient(closest-side,#fff,#fff0), radial-gradient(closest-side,#ffffffe8,#fff0);
  background-size:var(--tile) 80%, var(--tile) 100%; background-position:40px 30%, 170px 90%; }
.fog-layer.near { --k:.22; --roll:20s; --breathe:4.5s; --tile:220px; top:110px; height:240px;
  background-image:radial-gradient(closest-side,#fff,#fff0), radial-gradient(closest-side,#fffffff2,#fff0);
  background-size:var(--tile) 70%, var(--tile) 100%; background-position:0 20%, 110px 70%; }
@keyframes fog-roll { from { background-position-x:0, 120px, 230px; } to { background-position-x:var(--tile), calc(var(--tile) + 120px), calc(var(--tile) + 230px); } }
@keyframes fog-breathe { from { transform:translateY(-7px) scaleY(.96); } to { transform:translateY(7px) scaleY(1.05); } }
/* levels fade out above the Play button, and fade and blur under the header once the path is scrolled, instead of
   being cut off */
.stage-path { -webkit-mask-image:linear-gradient(#000 calc(100% - 34px), #0000); mask-image:linear-gradient(#000 calc(100% - 34px), #0000); }
.stage-path.scrolled { -webkit-mask-image:linear-gradient(#0000, #0007 16px, #000 52px, #000 calc(100% - 34px), #0000); mask-image:linear-gradient(#0000, #0007 16px, #000 52px, #000 calc(100% - 34px), #0000); }
.stage-path::before { content:''; position:sticky; top:0; z-index:4; display:block; height:52px; margin-bottom:-52px; pointer-events:none; opacity:0; transition:opacity .2s;
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); -webkit-mask-image:linear-gradient(#000 30%, #0000); mask-image:linear-gradient(#000 30%, #0000); }
.stage-path.scrolled::before { opacity:1; }
/* the fog sits above the path but under the header, Play button and mode bar */
#home .home-topbar, #home .path-heading, #home .home-actions { position:relative; z-index:2; }
#home nav.home-bottom { position:relative; left:auto; z-index:2; }
.fog-note { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3; white-space:nowrap; font-size:11px; font-weight:950; line-height:1.2; color:#4d6a72; padding:6px 12px; border:1px solid #fff; border-radius:99px; background:#fffbedf2; box-shadow:0 2px 6px #31526120; }
.fog-note-anchor { opacity:0; pointer-events:none; }
#home-fog .fog-note { bottom:auto; }
.daily-panel, .tower-panel { border:2px solid #fff; border-radius:18px; background:linear-gradient(#fffef4,#fffbea); box-shadow:0 4px 0 #cfcbb367,0 6px 18px #31526125; }
.daily-panel { padding:0 14px; }
.history-link { background:none; width:100%; min-height:40px; display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; font-weight:950; }
.history-summary { display:flex; align-items:center; gap:8px; color:#858574; font-size:11px; font-weight:800; }
.history-summary > span { color:#506c66; font-size:23px; line-height:1; }
.tower-panel { padding:10px 12px; }
.tower-panel h3 { font-size:12px; font-weight:950; margin:0; }
.tower-widths { display:flex; gap:7px; margin-top:6px; }
.tower-width { display:grid; flex:1; grid-template-columns:22px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:2px 5px; min-width:0; padding:8px 6px; border:2px solid #e5e1d2; border-radius:14px; background:#fcfaef; color:#7e8073; text-align:left; }
.width-cube { display:block; grid-row:1 / 3; width:22px; height:24px; color:#a5a696; }
.width-cube svg { width:100%; height:100%; }
.width-cube path { stroke:#727561; stroke-width:1.3; fill:currentColor; }
.width-cube path:nth-child(2) { filter:brightness(.82); }
.width-cube path:nth-child(3) { filter:brightness(.65); }
.tower-width b { font-size:16px; font-weight:950; white-space:nowrap; }
.tower-width small { font-size:9px; }
.tower-width.selected { border-color:#8655ed; background:#ece3ff; color:#6931d2; box-shadow:0 2px 0 #8f5ce7; }
.tower-width.selected .width-cube { color:#9c6aef; }
.tower-width.selected .width-cube path { stroke:#7044c1; }
#home .home-actions { grid-area:action; display:flex; min-width:0; }
#home .play-next { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:0; margin:0; padding:9px 19px; border:3px solid #fff5c8; border-radius:24px; background:linear-gradient(var(--mode-top),var(--mode-color)); box-shadow:inset 0 3px 0 #ffffff70,0 6px 0 var(--mode-dark),0 9px 0 #ffffff55,0 12px 18px #26556638; color:white; text-align:center; }
#home .play-next > span:nth-child(2) { flex:1; min-width:0; }
#home .play-next strong { display:block; font-size:clamp(24px,5.7vw,32px); font-weight:950; line-height:1; letter-spacing:-.7px; text-transform:none; text-shadow:0 2px 1px var(--mode-dark); }
#home .play-next small { display:block; font-size:10px; font-weight:800; margin-top:5px; text-shadow:0 1px var(--mode-dark); }
#home .play-next .play-symbol { font-size:27px; width:auto; height:auto; color:#fff; filter:drop-shadow(0 2px 1px var(--mode-dark)); }
.play-arrow { font-size:29px; font-weight:900; line-height:1; text-shadow:0 2px var(--mode-dark); }
#home .play-next:active:not(:disabled) { transform:translateY(3px); box-shadow:inset 0 3px 0 #ffffff70,0 3px 0 var(--mode-dark); }
#home .play-next:disabled { filter:saturate(.35); opacity:.85; cursor:not-allowed; }
#home .home-bottom { grid-area:nav; position:static; transform:none; width:100%; margin:0; padding:0; align-self:stretch; background:none; border:0; box-shadow:none; }
#home.no-nav { grid-template-rows:76px minmax(0,1fr) 72px; grid-template-areas:'brand' 'content' 'action'; }
#home .mode-tabs { display:flex; gap:3px; height:100%; max-width:none; margin:0; padding:5px; border:3px solid #fff; border-radius:25px; background:linear-gradient(#fffef3,#f7f6e4); box-shadow:inset 0 1px 0 #fff,0 4px 0 #ffffff70,0 7px 18px #2d55652c; }
#home .mode-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:4px; min-height:0; min-width:0; padding:4px; border:0; border-radius:18px; background:transparent; box-shadow:none; color:#858574; font-size:14px; font-weight:950; line-height:1; text-shadow:none; }
#home .mode-tab svg { width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:2.1; }
#home .mode-tab span { margin:0; }
#home .mode-tab.on { color:var(--mode-ink); background:linear-gradient(#fff8,var(--mode-light)); box-shadow:inset 0 0 0 1px #ffffff80; }
#home .mode-tab.on::before { content:none; }
#home-stages.on svg { fill:#72d92c; stroke:#339722; }
#home-daily.on svg { fill:#ffbd24; stroke:#f6a20e; }
#home button:focus-visible, #stage-path:focus-visible { outline:3px solid #225697; outline-offset:2px; }
@media (orientation:portrait) and (max-height:700px) {
  #home { grid-template-rows:64px minmax(0,1fr) 60px 66px; padding-top:max(8px,env(safe-area-inset-top)); padding-bottom:max(8px,env(safe-area-inset-bottom)); gap:9px; }
  #home[data-mode="daily"] { grid-template-rows:64px 40px 22px minmax(75px,1fr) auto 60px 66px; gap:7px; }
  #home[data-mode="endless"] { grid-template-rows:64px 22px minmax(90px,1fr) auto 60px 66px; gap:8px; }
  #home.no-nav { grid-template-rows:64px minmax(0,1fr) 60px; }
  #home .home-brand { padding-top:3px; }
  #home .wordmark { font-size:31px; }
  #home .home-corner { width:36px; height:36px; font-size:25px; }
  #home[data-mode="daily"] .mode-heading { width:min(100%,270px); height:40px; padding-left:40px; border-radius:14px; }
  #home[data-mode="daily"] .daily-calendar { width:22px; height:26px; left:10px; top:5px; }
  .mode-heading h2 { font-size:22px; }
  #home[data-mode="daily"] .mode-heading h2 { font-size:17px; }
  #home[data-mode="daily"] .mode-heading p { font-size:10px; margin-top:1px; }
  #home[data-mode="endless"] .mode-heading h2 { font-size:18px; }
  #home .play-next { padding:8px 13px; border-radius:21px; }
  #home .play-next strong { font-size:23px; }
  #home .play-next small { font-size:9px; }
  #home .mode-tab { font-size:12px; }
  #home .mode-tab svg { width:24px; height:24px; }
  .tower-panel { padding:8px 10px; border-radius:16px; }
  .tower-widths { margin-top:5px; }
  .tower-width { grid-template-columns:20px minmax(0,1fr); padding:7px 4px; gap:1px 4px; border-radius:12px; }
  .tower-width b { font-size:14px; }
  .width-cube { width:20px; height:22px; }
  #preview-label b { font-size:14px; }
  #preview-label .star-row { height:30px; gap:5px; }
  #preview-label .menu-star { width:30px; height:30px; }
}
@media (orientation:landscape) and (max-height:600px) {
  #home { width:min(860px,100%); grid-template-columns:minmax(0,1fr) minmax(230px,.85fr); grid-template-rows:48px minmax(0,1fr) 62px; grid-template-areas:'brand brand' 'content action' 'content nav'; gap:10px 18px; padding:8px max(16px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  #home[data-mode="daily"] { grid-template-rows:44px 22px minmax(0,1fr) 54px 58px; grid-template-areas:'brand heading' 'preview countdown' 'preview content' 'preview action' 'nav nav'; gap:7px 16px; }
  #home[data-mode="endless"] { grid-template-rows:44px minmax(0,1fr) 54px 58px; grid-template-areas:'brand heading' 'preview content' 'preview action' 'nav nav'; gap:7px 16px; }
  #home.no-nav { grid-template-areas:'brand brand' 'content .' 'content action'; }
  #home .home-brand { padding:0 52px; }
  #home .wordmark { font-size:31px; }
  #home .home-corner { width:34px; height:34px; font-size:24px; top:0; }
  #home .home-status { top:0; }
  #home #total, #home #daily-history-open, #home #achievements-open { height:31px; padding:0 5px; }
  #home .play-next { align-self:center; min-height:54px; padding:7px 11px; border-radius:18px; }
  #home .play-next strong { font-size:22px; }
  #home .play-next small { font-size:9px; }
  #home .play-next .play-symbol { font-size:22px; }
  .play-arrow { font-size:23px; }
  #home .mode-tabs { border-radius:19px; padding:4px; }
  #home .mode-tab { font-size:11px; border-radius:13px; gap:3px; }
  #home .mode-tab svg { width:23px; height:23px; }
  #home[data-mode="daily"] .mode-heading { height:40px; align-self:start; border-radius:14px; padding:3px 8px 3px 36px; }
  #home[data-mode="daily"] .daily-calendar { width:22px; height:26px; left:8px; top:5px; }
  #home[data-mode="daily"] .mode-heading h2 { font-size:17px; }
  #home[data-mode="daily"] .mode-heading p { font-size:10px; margin-top:2px; }
  #home[data-mode="endless"] .mode-heading { align-self:center; }
  #home[data-mode="endless"] .mode-heading h2 { font-size:18px; }
  .daily-panel { margin:auto 0; }
  .tower-panel { padding:7px 9px; border-radius:16px; margin:auto 0; }
  .tower-widths { margin-top:5px; gap:4px; }
  .tower-width { grid-template-columns:18px minmax(0,1fr); padding:6px 3px; gap:1px 3px; border-radius:11px; }
  .tower-width b { font-size:13px; }
  .width-cube { width:18px; height:20px; }
  #preview-label { padding:4px 12px; border-radius:13px; }
  #preview-label b { font-size:14px; }
  #preview-label .star-row { height:25px; gap:4px; }
  #preview-label .menu-star { width:25px; height:25px; }
  #preview-label small { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) { #home, #home *, .stage-scenery { transition:none !important; } }
@media (orientation:landscape) and (max-height:600px) and (max-width:640px) {
  #home .play-next { padding:6px 10px; gap:9px; }
  #home .play-next strong { font-size:18px; white-space:nowrap; }
  #home .play-next small { margin-top:3px; line-height:1.2; }
}

@media (max-width: 360px) {
  #home .wordmark { font-size: 28px; }
}

#home .mode-tab.locked::after { content: ''; position: absolute; top: 4px; right: 8px; width: 16px; height: 16px; background: url('assets/icons/lock.webp') center / contain no-repeat; }

/* Illustrated UI art: inline by default, with larger achievement and card art. */
.ui-art { display: inline-block; width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: middle; flex: none; user-select: none; pointer-events: none; }
.icon-off { position: relative; display: inline-grid; place-items: center; vertical-align: middle; line-height: 1; }
.icon-off::after { content: ''; position: absolute; width: 110%; height: 3px; border-radius: 3px; background: #bb3b35; box-shadow: 0 0 0 1px #fff4d9; transform: rotate(-45deg); }
.icon-off .ui-art { opacity: .55; }
.card button .ui-art { width: 26px; height: 26px; }
.pause .toggles button .ui-art { width: 32px; height: 32px; }
.card .big .ui-art { width: 72px; height: 72px; }
.rule-copy { min-width: 0; flex: 1; }
.card .tip .ico .ui-art { width: 32px; height: 32px; }
.achievement-card i { width: 44px; height: 44px; }
.achievement-card i .ui-art { width: 42px; height: 42px; }
.upgrade-hero-icon .ui-art { width: 64px; height: 64px; }
#achievement-toast .ui-art { width: 40px; height: 40px; }
#home #achievements-open .ui-art, #home #daily-history-open .ui-art { width: 25px; height: 25px; }
#hud .pill i .ui-art { width: 28px; height: 28px; }
#hand .ui-art { width: 52px; height: 52px; }
#bubble .ui-art { width: 24px; height: 24px; }
.node-lock .ui-art { width: 17px; height: 17px; }
.tool em .ui-art { width: 12px; height: 12px; }
.learn-link .ui-art { width: 20px; height: 20px; }
@media (max-width: 500px) {
  #hud .pill i .ui-art { width: 22px; height: 22px; }
  #hud #hud-achievements i .ui-art { width: 20px; height: 20px; }
  .achievement-card i { width: 40px; height: 40px; }
  .achievement-card i .ui-art { width: 38px; height: 38px; }
}

/* Campaign mechanics: compact overlays leave the cube and the main HUD unobstructed. */
/* Fill the centered .sun-item; a smaller fixed image box anchors art at its top-left. */
.mechanic-promo-art { object-fit: contain; }
.node-mechanics { position:absolute; right:-9px; bottom:-6px; display:flex; gap:2px; z-index:5; }
.node-mechanics i { display:grid; place-items:center; width:18px; height:18px; border:2px solid #fff5d8; border-radius:50%; background:#7843c5; color:#fff; box-shadow:0 2px 0 #42217c, 0 3px 6px #24164a55; font:900 10px/1 system-ui,sans-serif; font-style:normal; }
.daily-twist { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 auto 10px; padding:7px 11px; width:max-content; max-width:100%; border:2px solid #f5bf39; border-radius:13px; background:#fff3c4; color:#68430c; box-shadow:0 3px 0 #d38f21; font-size:13px; }
.daily-twist span { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:#f25f43; color:#fff; }

.mechanic-deny { position:absolute; z-index:13; pointer-events:none; transform:translate(-50%,-50%); white-space:nowrap; padding:6px 11px; border:2px solid #ffdc76; border-radius:10px; background:#683924ee; color:#fff8df; box-shadow:0 3px 0 #25140c99,0 7px 15px #10151d55; font:900 13px/1.1 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.03em; }

/* home side rail: the shop and a folded limited-time offer with its countdown */
#home .home-side { position: absolute; left: max(4px, env(safe-area-inset-left)); top: calc(max(12px, env(safe-area-inset-top)) + 84px); z-index: 3; display: flex; flex-direction: column; gap: 10px; }
#home .path-heading { padding-left: 66px; } /* clear of the rail */
#home .offer-rail { display: flex; flex-direction: column; gap: 10px; }
#home .offer-rail[hidden] { display: none; }
.side-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 62px; min-height: 62px; padding: 5px 2px; border: 3px solid #fff; border-radius: 18px; background: linear-gradient(#fffef4, #fff1bd); box-shadow: 0 4px 0 #dc9e1f, 0 7px 14px #48698355; color: #573913; }
.side-button .side-art { font-size: 26px; line-height: 1; }
.side-button .tool-art { width: 38px; height: 38px; }
.side-button small { font-size: 11px; font-weight: 950; }
.side-button.offer { background: linear-gradient(#ffe26b, #f6a81c); box-shadow: 0 4px 0 #b9790c, 0 7px 14px #48698355; animation: offer-bob 1.6s ease-in-out infinite; }
.side-button.offer small { position: absolute; top: -9px; right: -8px; padding: 1px 5px; border-radius: 9px; background: var(--tnt); color: #fff; font-size: 10px; }
.side-button.offer b { font-size: 10px; font-weight: 950; font-variant-numeric: tabular-nums; color: #5a3a00; }
@keyframes offer-bob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .side-button.offer { animation: none; } }
.offer-hero .offer-tag { position: absolute; right: -14px; top: 4px; z-index: 3; padding: 3px 8px; border-radius: 12px; background: var(--tnt); color: #fff; font-size: 15px; font-weight: 950; transform: rotate(8deg); }
.offer-timer { margin: 0 0 12px; color: #9c3d12; font-size: 14px; font-weight: 850; }
.offer-timer b, .shop-deal i b { font-variant-numeric: tabular-nums; }
.card.offer-card button.primary s, .shop-deal s { margin-right: 6px; font-size: .72em; opacity: .65; }
/* the shop: a full-height list over the home screen */
#modal .shop-screen { width: min(440px, 100%); max-height: 100%; overflow-y: auto; text-align: left; }
.shop-head { display: flex; align-items: center; justify-content: space-between; }
.shop-head h2 { margin: 0; }
.card button.shop-close { min-width: 44px; width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.shop-screen h3 { margin: 14px 0 6px; color: #8c7144; font-size: 12px; font-weight: 950; letter-spacing: 1.4px; text-transform: uppercase; }
.shop-list { display: grid; gap: 8px; }
.shop-item { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: #f2ecdc; }
.shop-item .tool-art { width: 44px; height: 44px; }
.shop-item b { display: block; font-size: 15px; font-weight: 900; }
.shop-item small { display: block; color: var(--ink2); font-size: 11px; font-weight: 700; line-height: 1.35; }
.card .shop-item button.primary { min-width: 84px; height: 44px; padding: 0 10px; font-size: 16px; }
.shop-item.owned { background: #e8f6d9; }
.shop-item em { color: #1e7019; font-size: 13px; font-style: normal; font-weight: 900; }
.card button.shop-deal { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; width: 100%; height: auto; margin-top: 12px; padding: 10px 12px; text-align: left; background: linear-gradient(#ffe26b, #f6a81c); box-shadow: 0 4px 0 #b9790c; color: #5a3a00; }
.shop-deal .tool-art { width: 56px; height: 56px; }
.shop-deal small { display: block; font-size: 10px; font-weight: 950; letter-spacing: 1px; }
.shop-deal span > b { display: block; font-size: 17px; }
.shop-deal i { display: block; font-size: 12px; font-style: normal; font-weight: 850; }
.shop-deal strong { display: flex; flex-direction: column; align-items: flex-end; font-size: 19px; }
.shop-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: #e8f6d9; color: #1e7019; font-size: 14px; font-weight: 900; }
.shop-screen > .offer-note { margin: 12px 0 0; text-align: center; }
.shop-empty { margin: 18px 0 6px; color: var(--ink2); font-size: 15px; font-weight: 800; text-align: center; }
/* an offer's last session, after its timer ran out */
.last-chance { color: #c1271b; font-weight: 950; text-transform: uppercase; letter-spacing: .5px; }
.side-button.offer.last { background: linear-gradient(#ff8a5c, #e0392e); box-shadow: 0 4px 0 #9e2119, 0 7px 14px #48698355; }
.side-button.offer.last b { color: #fff; font-size: 9px; text-transform: uppercase; }
.card button.shop-deal.last { background: linear-gradient(#ffb36b, #f27a1c); }
.shop-deal.last .last-chance { color: #7a1208; }
/* a finished biome's booster reward */
.biome-card .eyebrow { display: block; }
.biome-stars { margin: 0 0 10px; color: #b07a12; font-size: 22px; font-weight: 950; }
.biome-grant { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.biome-grant span { display: grid; justify-items: center; gap: 2px; width: 84px; padding: 8px 4px; border-radius: 16px; background: #fff1c2; }
.biome-grant .tool-art { width: 48px; height: 48px; }
.biome-grant b { color: #1e7019; font-size: 20px; font-weight: 950; }
.biome-grant small { color: var(--ink2); font-size: 11px; font-weight: 800; }

/* The reactive combo meter shares one right-edge status column with static mechanics.
   Slots own vertical reflow so each component can keep its own impact animations. */
.feel-status-column {
  position: absolute;
  right: max(4px, env(safe-area-inset-right));
  z-index: 12;
  width: 74px;
  pointer-events: none;
}
.feel-status-slot {
  position: absolute;
  top: 0;
  right: 0;
  width: 74px;
  display: flex;
  justify-content: flex-end;
  transform: translateY(var(--feel-status-y, 0));
  transition: transfor