:root {
  color-scheme: light;
  --bg: #f8efe6;
  --panel: #fffdfa;
  --panel-2: #faedf0;
  --ink: #302421;
  --muted: #775f63;
  --line: rgba(113, 74, 80, .2);
  --green: #5d8d64;
  --green-2: #96bd7d;
  --gold: #d7ad54;
  --clay: #d9828d;
  --cap: #e97888;
  --cap-dark: #b94d5c;
  --stem: #f6d7a8;
  --lavender: #8b83bd;
  --blue: #6d8da8;
  --mint: #d7efd6;
  --cream: #fff7df;
  --shadow: 0 22px 52px rgba(83, 48, 58, .12), inset 0 1px 0 rgba(255,255,255,.78);
}

/* Fungal empire pass: make the shipped app read as a full idle RPG, not a themed button. */
.game-page .systems-grid {
  display: none !important;
  min-height: 0 !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .8fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

body[data-tab="systems"] .systems-grid {
  display: grid !important;
}

.game-page .currency-ribbon {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 6px 0 0 !important;
  min-width: 0 !important;
}

.game-page .currency-ribbon > div {
  min-width: 0 !important;
  padding: 7px 6px 6px !important;
  border: 1px solid rgba(74, 52, 31, .18) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 244, 165, .34), transparent 34%),
    linear-gradient(180deg, rgba(42, 82, 46, .88), rgba(42, 43, 31, .86)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 16px rgba(31, 24, 16, .12) !important;
  color: #fff8d7 !important;
  overflow: hidden !important;
  position: relative !important;
}

.game-page .currency-ribbon > div::before {
  content: "" !important;
  position: absolute !important;
  width: 22px !important;
  height: 22px !important;
  right: -6px !important;
  top: -6px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(190, 255, 151, .42), transparent 68%) !important;
  animation: empireCurrencyGlow 3.6s ease-in-out infinite alternate !important;
}

.game-page .currency-ribbon span {
  display: block !important;
  color: rgba(255, 251, 210, .72) !important;
  font-size: clamp(7px, 1.8vw, 9px) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.game-page .currency-ribbon strong {
  display: block !important;
  margin-top: 2px !important;
  color: #fff7b4 !important;
  font-size: clamp(13px, 3.4vw, 17px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(56, 37, 12, .32), 0 0 12px rgba(255, 231, 116, .22) !important;
}

.game-page .friend-scene {
  min-height: 344px !important;
  border-radius: 22px !important;
  background-image:
    linear-gradient(180deg, rgba(21, 24, 18, .02), rgba(8, 16, 18, .18) 51%, rgba(10, 12, 7, .46) 100%),
    url("./sprites/idle-shroom-empire-playfield-20260527.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(63, 45, 28, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 226, .3), inset 0 -42px 80px rgba(8, 19, 14, .42), 0 20px 34px rgba(47, 31, 22, .16) !important;
}

.game-page .friend-scene::before {
  background:
    radial-gradient(circle at 49% 39%, rgba(255, 241, 166, .2), transparent 28%),
    radial-gradient(circle at 20% 76%, rgba(120, 255, 171, .18), transparent 26%),
    radial-gradient(circle at 83% 82%, rgba(130, 206, 255, .18), transparent 28%) !important;
  mix-blend-mode: screen !important;
  opacity: .9 !important;
}

.game-page .friend-scene::after {
  background:
    radial-gradient(circle at 44% 21%, rgba(255, 251, 213, .54) 0 1.2px, transparent 2px),
    radial-gradient(circle at 70% 34%, rgba(179, 249, 143, .5) 0 1px, transparent 2px),
    radial-gradient(circle at 27% 59%, rgba(152, 219, 255, .45) 0 1px, transparent 2px),
    linear-gradient(180deg, transparent 0 58%, rgba(14, 11, 5, .18) 100%) !important;
  background-size: 80px 92px, 92px 110px, 76px 84px, 100% 100% !important;
  animation: empireSporeDrift 9s linear infinite !important;
  opacity: .82 !important;
}

.game-page .colony-layer {
  position: absolute !important;
  z-index: 5 !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.game-page .colony-layer > span {
  position: absolute !important;
  opacity: 0 !important;
  transform: translateY(10px) scale(.78) !important;
  transition: opacity .45s ease, transform .45s ease, filter .45s ease !important;
}

.game-page .colony-layer > span.live {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.game-page .cap-house {
  width: 34px !important;
  height: 30px !important;
  bottom: 15% !important;
  border-radius: 55% 55% 42% 42% !important;
  background:
    radial-gradient(circle at 33% 30%, rgba(255, 255, 213, .85) 0 8%, transparent 9%),
    linear-gradient(180deg, #d94145 0 44%, #fff0bc 45% 100%) !important;
  box-shadow: inset 0 -3px 0 rgba(87, 36, 22, .22), 0 0 16px rgba(255, 215, 97, .26) !important;
  animation: empireHouseBreathe 4.2s ease-in-out infinite !important;
}

.game-page .house-a { left: 14% !important; bottom: 16% !important; }
.game-page .house-b { right: 16% !important; bottom: 14% !important; animation-delay: .7s !important; }
.game-page .house-c { left: 54% !important; bottom: 9% !important; width: 40px !important; height: 34px !important; animation-delay: 1.2s !important; }

.game-page .spore-vent {
  width: 14px !important;
  height: 35px !important;
  bottom: 12% !important;
  border-radius: 999px 999px 8px 8px !important;
  background: linear-gradient(180deg, #fff8af, #77d780 46%, #6b4b2c 100%) !important;
  box-shadow: 0 0 20px rgba(164, 255, 134, .32) !important;
  animation: empireVentPuff 2.8s ease-in-out infinite !important;
}

.game-page .vent-a { left: 31% !important; }
.game-page .vent-b { right: 32% !important; animation-delay: 1.1s !important; }

.game-page .root-highway {
  height: 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(141, 255, 129, .78), rgba(255, 224, 99, .62), transparent) !important;
  filter: blur(.2px) !important;
  box-shadow: 0 0 16px rgba(141, 255, 129, .28) !important;
  animation: empireRootPulse 2.6s ease-in-out infinite !important;
}

.game-page .root-a { left: 9% !important; right: 11% !important; bottom: 10% !important; transform-origin: 0 50% !important; }
.game-page .root-b { left: 18% !important; right: 19% !important; bottom: 21% !important; animation-delay: .8s !important; }

.game-page .worker {
  width: 14px !important;
  height: 17px !important;
  bottom: 12% !important;
  border-radius: 9px 9px 5px 5px !important;
  background:
    radial-gradient(circle at 50% 22%, #ffefb0 0 24%, transparent 25%),
    linear-gradient(180deg, #e15b58 0 42%, #f7d69b 43% 100%) !important;
  box-shadow: 0 0 8px rgba(255, 230, 123, .28) !important;
  animation: empireWorkerCarry 5.4s linear infinite !important;
}

.game-page .worker-a { left: 17% !important; }
.game-page .worker-b { left: 48% !important; animation-delay: 1.8s !important; }
.game-page .worker-c { left: 74% !important; animation-delay: 3.2s !important; }

.game-page .relic-stone {
  width: 22px !important;
  height: 28px !important;
  bottom: 8% !important;
  border-radius: 10px 10px 6px 6px !important;
  background: linear-gradient(180deg, #8f8a69, #4a4f3a) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 0 14px rgba(137, 255, 180, .22) !important;
  animation: empireRelicGlow 5s ease-in-out infinite !important;
}

.game-page .stone-a { left: 6% !important; }
.game-page .stone-b { right: 7% !important; animation-delay: 1.3s !important; }

.game-page .friend-scene .seed-button {
  z-index: 8 !important;
}

body[data-shroom-form="capblade"] .seed-button,
body[data-shroom-form="sporeheart"] .seed-button,
body[data-shroom-form="mycelium-lord"] .seed-button,
body[data-shroom-form="bloom-king"] .seed-button,
body[data-shroom-form="fungal-god"] .seed-button {
  filter: drop-shadow(0 0 18px rgba(136, 255, 149, .32)) saturate(1.06) !important;
}

body[data-shroom-form="mycelium-lord"] .seed-button,
body[data-shroom-form="bloom-king"] .seed-button,
body[data-shroom-form="fungal-god"] .seed-button {
  transform-origin: 50% 92% !important;
}

body[data-shroom-form="sporeheart"] .seed-cheeks,
body[data-shroom-form="mycelium-lord"] .seed-cheeks,
body[data-shroom-form="bloom-king"] .seed-cheeks,
body[data-shroom-form="fungal-god"] .seed-cheeks {
  opacity: .9 !important;
  filter: hue-rotate(56deg) saturate(1.25) !important;
}

body[data-shroom-form="bloom-king"] .seed-button::before,
body[data-shroom-form="fungal-god"] .seed-button::before {
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,218,.8) 0 7%, transparent 8%),
    linear-gradient(104deg, transparent 2%, rgba(255, 244, 129, .58) 36%, rgba(168, 255, 172, .24) 64%, transparent 92%) !important;
}

.game-page .companion-row {
  z-index: 7 !important;
}

.game-page .companion {
  width: 24px !important;
  height: 28px !important;
  background:
    radial-gradient(circle at 38% 21%, #fff6c2 0 10%, transparent 11%),
    linear-gradient(180deg, #df564c 0 42%, #f1d49d 43% 100%) !important;
  border-radius: 55% 55% 38% 38% !important;
  box-shadow: 0 6px 8px rgba(14, 9, 4, .16), 0 0 10px rgba(255, 223, 111, .16) !important;
}

.game-page .companion.live {
  animation: empireAllyAttack 2.4s ease-in-out infinite !important;
}

.game-page .companion.cap-knight { background: linear-gradient(180deg, #c7433f 0 38%, #d7cfa2 39% 100%) !important; }
.game-page .companion.puffball-bomber { border-radius: 50% !important; background: radial-gradient(circle at 42% 34%, #fff3ca 0 18%, #d6efe7 19% 100%) !important; }
.game-page .companion.glowshroom-mage { background: linear-gradient(180deg, #8075df 0 42%, #b9ecff 43% 100%) !important; box-shadow: 0 0 15px rgba(119, 175, 255, .32) !important; }
.game-page .companion.deathcap-assassin { background: linear-gradient(180deg, #3b2129 0 40%, #cf4b49 41% 100%) !important; }
.game-page .companion.shelf-guardian { width: 30px !important; background: linear-gradient(180deg, #a06d41 0 34%, #e4c47b 35% 100%) !important; }
.game-page .companion.morel-monk { background: linear-gradient(180deg, #ad8a5b 0 44%, #e9d5a8 45% 100%) !important; }
.game-page .companion.chanterelle-archer { background: linear-gradient(180deg, #f0b841 0 44%, #fee0a7 45% 100%) !important; }
.game-page .companion.truffle-miner { border-radius: 50% 50% 42% 42% !important; background: linear-gradient(180deg, #76523e 0 43%, #d8b986 44% 100%) !important; }
.game-page .companion.mycelium-beast { width: 34px !important; height: 32px !important; background: linear-gradient(180deg, #7fc782 0 34%, #604b33 35% 100%) !important; }

.game-page .enemy-target {
  z-index: 9 !important;
  filter: drop-shadow(0 10px 12px rgba(21, 12, 8, .2)) saturate(1.04) !important;
}

.game-page .friend-scene[data-boss="true"] .enemy-target {
  transform: translateX(-50%) scale(1.12) !important;
  animation: empireBossStomp 2.2s ease-in-out infinite !important;
}

.game-page .enemy-target[data-variant="12"] i,
.game-page .enemy-target[data-variant="13"] i,
.game-page .enemy-target[data-variant="14"] i,
.game-page .enemy-target[data-variant="15"] i,
.game-page .enemy-target[data-variant="16"] i,
.game-page .enemy-target[data-variant="17"] i {
  filter: hue-rotate(38deg) saturate(1.2) brightness(.98) !important;
}

.game-page .skill-row {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.game-page .skill-row button {
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 19px 4px 5px !important;
  border-radius: 13px !important;
  font-size: clamp(8px, 2vw, 10px) !important;
  line-height: 1 !important;
  text-transform: none !important;
  color: #fff7d0 !important;
  background:
    radial-gradient(circle at 50% 9%, rgba(255, 242, 159, .34), transparent 36%),
    linear-gradient(180deg, #4f7742, #382c22) !important;
  border-color: rgba(255, 225, 133, .26) !important;
}

.game-page .skill-row button::before {
  top: 5px !important;
  left: 50% !important;
  width: 13px !important;
  height: 13px !important;
  transform: translateX(-50%) !important;
}

.game-page .skill-row button[data-skill="spore-storm"]::before { background: radial-gradient(circle, #fff8c4 0 28%, #95ff85 29% 100%) !important; }
.game-page .skill-row button[data-skill="root-grasp"]::before { background: linear-gradient(135deg, #75d06f, #5d3b21) !important; }
.game-page .skill-row button[data-skill="nutrient-frenzy"]::before { background: radial-gradient(circle, #fff38c 0 28%, #c0e646 29% 100%) !important; }
.game-page .skill-row button[data-skill="puffball-barrage"]::before { background: radial-gradient(circle, #fff 0 24%, #cadfd5 25% 100%) !important; }
.game-page .skill-row button[data-skill="fairy-ring"]::before { background: conic-gradient(from 0deg, #bcff80, #8ad8ff, #e7b5ff, #bcff80) !important; }
.game-page .skill-row button[data-skill="ancient-bloom"]::before { background: radial-gradient(circle, #fff9ca 0 18%, #ffce55 19% 42%, #8d68ff 43% 100%) !important; }

.game-page .skill-row button[data-ready="true"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 16px rgba(164, 255, 112, .28), 0 9px 16px rgba(36, 24, 12, .14) !important;
  animation: empireSkillReady 1.8s ease-in-out infinite !important;
}

.game-page .skill-row button[data-ready="active"],
.game-page .skill-row button:disabled {
  opacity: .54 !important;
  filter: grayscale(.14) !important;
}

.game-page .system-list,
.game-page .network-list {
  display: grid !important;
  gap: 7px !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding-right: 2px !important;
}

.game-page .system-item,
.game-page .network-node {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  align-items: center !important;
  min-height: 62px !important;
  padding: 9px !important;
  border: 1px solid rgba(83, 62, 34, .16) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 11% 20%, rgba(255, 235, 142, .16), transparent 38%),
    linear-gradient(180deg, rgba(255, 252, 233, .88), rgba(231, 238, 201, .78)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 9px 16px rgba(44, 32, 20, .08) !important;
}

.game-page .system-item.active {
  border-color: rgba(90, 172, 62, .34) !important;
  background: radial-gradient(circle at 14% 20%, rgba(150, 255, 112, .22), transparent 42%), linear-gradient(180deg, rgba(255, 253, 232, .96), rgba(218, 239, 186, .86)) !important;
}

.game-page .network-node {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

.game-page .system-item.locked {
  opacity: .62 !important;
  filter: saturate(.76) !important;
}

.game-page .system-glyph,
.game-page .network-node > span {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,220,.78) 0 13%, transparent 14%),
    linear-gradient(145deg, #bb6c48, #6e5734 54%, #385c38) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 0 14px rgba(133, 232, 112, .22) !important;
}

.game-page .relic-item.unlocked .system-glyph,
.game-page .mutation-item.unlocked .system-glyph,
.game-page .network-node.reached > span {
  animation: empireGlyphPulse 3.2s ease-in-out infinite !important;
}

.game-page .system-item h3,
.game-page .network-node strong {
  margin: 0 !important;
  color: #342719 !important;
  font-size: 13px !important;
  line-height: 1.08 !important;
}

.game-page .system-item p,
.game-page .system-item span,
.game-page .network-node em {
  display: block !important;
  margin: 2px 0 0 !important;
  color: rgba(63, 48, 30, .72) !important;
  font-size: 10.5px !important;
  line-height: 1.18 !important;
  font-style: normal !important;
}

.game-page .system-item span,
.game-page .network-node em {
  color: #5b7e3d !important;
  font-weight: 800 !important;
}

.game-page .system-item button {
  min-width: 58px !important;
  max-width: 78px !important;
  padding: 8px 7px !important;
  border: 1px solid rgba(66, 50, 27, .2) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #f7d276, #a96f31) !important;
  color: #2e2114 !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: lowercase !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 5px 10px rgba(83, 50, 18, .18) !important;
}

.game-page .system-item button:disabled {
  background: linear-gradient(180deg, rgba(226, 213, 170, .75), rgba(145, 127, 91, .62)) !important;
  color: rgba(59, 48, 31, .58) !important;
  box-shadow: none !important;
}

.game-page .network-node.next {
  border-color: rgba(166, 124, 48, .42) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 235, 125, .34), transparent 38%),
    linear-gradient(180deg, rgba(255, 250, 218, .95), rgba(223, 236, 192, .88)) !important;
}

.game-page .bottom-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.game-page .bottom-tabs button {
  font-size: clamp(8px, 2.1vw, 10px) !important;
  min-width: 0 !important;
}

.game-page .bottom-tabs button[data-tab-target="systems"]::before {
  background:
    radial-gradient(circle at 36% 28%, #fffbd0 0 12%, transparent 13%),
    conic-gradient(from 0deg, #d05844, #ffd36f, #85cf75, #7dbcf2, #d05844) !important;
}

body[data-colony-tier="5"] .colony-layer,
body[data-colony-tier="6"] .colony-layer,
body[data-colony-tier="7"] .colony-layer,
body[data-colony-tier="8"] .colony-layer,
body[data-colony-tier="9"] .colony-layer {
  filter: saturate(1.08) brightness(1.04) !important;
}

@keyframes empireCurrencyGlow {
  from { opacity: .44; transform: scale(.92); }
  to { opacity: .94; transform: scale(1.14); }
}

@keyframes empireSporeDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 80px -92px, -92px -110px, 76px -84px, 0 0; }
}

@keyframes empireHouseBreathe {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  48% { transform: translateY(-3px) scale(1.035); filter: brightness(1.1); }
}

@keyframes empireVentPuff {
  0%, 100% { opacity: .7; transform: translateY(0) scaleY(.96); }
  42% { opacity: 1; transform: translateY(-5px) scaleY(1.08); }
}

@keyframes empireRootPulse {
  0%, 100% { opacity: .42; transform: scaleX(.9); }
  50% { opacity: .92; transform: scaleX(1.04); }
}

@keyframes empireWorkerCarry {
  0% { transform: translateX(-10px) translateY(0) scale(.9); }
  22% { transform: translateX(7px) translateY(-3px) scale(1); }
  50% { transform: translateX(20px) translateY(0) scale(.96); }
  75% { transform: translateX(4px) translateY(-2px) scale(1.03); }
  100% { transform: translateX(-10px) translateY(0) scale(.9); }
}

@keyframes empireRelicGlow {
  0%, 100% { filter: brightness(.9); }
  52% { filter: brightness(1.18) drop-shadow(0 0 8px rgba(145, 255, 156, .36)); }
}

@keyframes empireAllyAttack {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  28% { transform: translateY(-6px) translateX(4px) scale(1.08); }
  48% { transform: translateY(1px) translateX(8px) scale(.96); }
  66% { transform: translateY(-2px) translateX(2px) scale(1.02); }
}

@keyframes empireBossStomp {
  0%, 100% { filter: drop-shadow(0 10px 12px rgba(21, 12, 8, .2)); }
  46% { filter: drop-shadow(0 15px 16px rgba(21, 12, 8, .28)) brightness(.97); }
  52% { filter: drop-shadow(0 5px 8px rgba(21, 12, 8, .2)) brightness(1.05); }
}

@keyframes empireSkillReady {
  0%, 100% { filter: brightness(1); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 12px rgba(164, 255, 112, .22), 0 9px 16px rgba(36, 24, 12, .14); }
  50% { filter: brightness(1.12) saturate(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 20px rgba(164, 255, 112, .38), 0 9px 16px rgba(36, 24, 12, .14); }
}

@keyframes empireGlyphPulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.15); transform: scale(1.04); }
}

@media (max-width: 430px) {
  .game-page .currency-ribbon {
    gap: 4px !important;
  }

  .game-page .currency-ribbon > div {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .game-page .friend-scene {
    min-height: 330px !important;
  }

  .game-page .skill-row {
    gap: 4px !important;
  }

  .game-page .skill-row button {
    min-height: 43px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-page .currency-ribbon > div::before,
  .game-page .friend-scene::after,
  .game-page .cap-house,
  .game-page .spore-vent,
  .game-page .root-highway,
  .game-page .worker,
  .game-page .relic-stone,
  .game-page .companion.live,
  .game-page .friend-scene[data-boss="true"] .enemy-target,
  .game-page .skill-row button[data-ready="true"],
  .game-page .relic-item.unlocked .system-glyph,
  .game-page .mutation-item.unlocked .system-glyph,
  .game-page .network-node.reached > span {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(233, 120, 136, .13) 0 25%, transparent 25% 50%, rgba(150, 189, 125, .12) 50% 75%, transparent 75%) 0 0 / 44px 44px,
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(215, 173, 84, .08) 78px 82px),
    linear-gradient(180deg, #ffe2e7 0%, #f7f2df 45%, #f1faeb 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
textarea {
  font: inherit;
}

button {
  min-height: 42px;
  border: 1px solid rgba(67, 56, 32, .24);
  border-radius: 8px;
  background: #fffaf0;
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

button:disabled {
  cursor: not-allowed;
  color: rgba(43, 38, 27, .42);
  background: rgba(255, 250, 240, .58);
}

button:not(:disabled):hover {
  border-color: rgba(66, 111, 74, .52);
  transform: translateY(-1px);
}

.suite-topbar {
  position: static;
}

.suite-app-brand {
  text-transform: none;
}

.game-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 22px 0 44px;
}

.hero-panel,
.tap-panel,
.side-panel,
.store-panel,
.state-card,
.ad-slot {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,253,250,.98), rgba(250,237,240,.92));
  box-shadow: var(--shadow);
}

.hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 18px;
  align-items: end;
  padding: 24px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,253,250,.98), rgba(250,237,240,.92) 58%, rgba(215,239,214,.86)),
    repeating-linear-gradient(135deg, rgba(233,120,136,.1) 0 12px, transparent 12px 28px);
}

.hero-panel::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 20px;
  width: 156px;
  height: 78px;
  border-radius: 78px 78px 34px 34px / 72px 72px 26px 26px;
  background:
    radial-gradient(circle at 23% 58%, #fff8dc 0 9%, transparent 10%),
    radial-gradient(circle at 48% 32%, #fff8dc 0 8%, transparent 9%),
    radial-gradient(circle at 73% 57%, #fff8dc 0 8%, transparent 9%),
    linear-gradient(180deg, rgba(251,89,104,.72), rgba(185,77,92,.68));
  filter: blur(.2px);
  opacity: .18;
  transform: rotate(7deg);
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.eyebrow,
.metric-label,
.daily-card span,
.section-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.1;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hero-panel h1 {
  margin: 4px 0 0;
  font-size: clamp(44px, 8vw, 92px);
  line-height: .92;
  letter-spacing: 0;
  color: #271a1d;
  text-shadow: 0 3px 0 rgba(255, 246, 216, .9), 0 12px 30px rgba(185, 77, 92, .16);
}

.summary {
  max-width: 610px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.hero-pills span {
  border: 1px solid rgba(80, 67, 39, .14);
  border-radius: 999px;
  padding: 8px 11px;
  background: #fff7df;
  color: var(--cap-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 18px rgba(185, 77, 92, .09);
}

.hero-pills span:nth-child(2) {
  background: var(--mint);
  color: #426f4a;
}

.hero-pills span:nth-child(3) {
  background: #f4eefb;
  color: #665aa0;
}

.hero-pills span:nth-child(4) {
  background: #ffe8cc;
  color: #9a6041;
}

.daily-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(80, 67, 39, .18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,247,223,.95), rgba(255,253,250,.82));
  transform: rotate(1.5deg);
}

.daily-card strong {
  font-size: 26px;
  line-height: 1;
}

.play-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  margin-top: 16px;
}

.tap-panel {
  position: relative;
  min-height: 520px;
  padding: 20px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,253,250,.98), rgba(250,237,240,.88) 62%, rgba(215,239,214,.68)),
    repeating-linear-gradient(135deg, rgba(255, 247, 223, .7) 0 18px, transparent 18px 36px);
}

.tap-panel::before {
  content: "";
  position: absolute;
  inset: auto -12% -18% -12%;
  height: 42%;
  background:
    linear-gradient(180deg, transparent, rgba(150, 189, 125, .18)),
    repeating-linear-gradient(90deg, rgba(93, 141, 100, .10) 0 18px, rgba(233, 120, 136, .07) 18px 34px);
  pointer-events: none;
}

.resource-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.resource-row div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(80, 67, 39, .14);
  border-radius: 8px;
  background: rgba(255, 253, 250, .84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.resource-row strong {
  display: block;
  margin-top: 4px;
  font-size: clamp(22px, 4.8vw, 44px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.resource-row small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
}

.next-goal-button {
  width: 100%;
  min-height: 28px;
  margin-top: 6px;
  padding: 4px 8px;
  border-color: rgba(66, 111, 74, .24);
  border-radius: 999px;
  color: #4f6d42;
  background:
    radial-gradient(circle at 24% 10%, rgba(255,255,255,.56), transparent 30%),
    linear-gradient(180deg, #f7ffe6, #dff5c4);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 5px 12px rgba(75, 126, 73, .1);
}

.next-goal-button[data-ready="true"] {
  color: #fffdf8;
  border-color: rgba(126, 67, 78, .28);
  background:
    radial-gradient(circle at 28% 10%, rgba(255,255,255,.42), transparent 30%),
    linear-gradient(180deg, #e9818f, #b74757);
  box-shadow:
    0 5px 14px rgba(152, 60, 74, .18),
    inset 0 1px 0 rgba(255,255,255,.44);
}

.next-goal-button[data-ready="true"][data-goal-kind="piece"],
.next-goal-button[data-ready="true"][data-goal-kind="charm"] {
  background:
    radial-gradient(circle at 28% 10%, rgba(255,255,255,.48), transparent 30%),
    linear-gradient(180deg, #91d976, #4f9f55);
}

.next-goal-button[data-ready="true"][data-goal-kind="perk"] {
  background:
    radial-gradient(circle at 28% 10%, rgba(255,255,255,.48), transparent 30%),
    linear-gradient(180deg, #e9c66a, #a86f2f);
}

body[data-bloom-ready="true"] .next-goal-button[data-goal-kind="bloom"],
body[data-bloom-ready="true"] #prestigeButton:not(:disabled) {
  animation: bloomPulse 1.05s ease-in-out infinite alternate;
}

.next-goal-button:disabled {
  color: rgba(58, 72, 45, .58);
  background:
    radial-gradient(circle at 24% 10%, rgba(255,255,255,.5), transparent 30%),
    rgba(246, 252, 226, .76);
}

.seed-button {
  position: relative;
  z-index: 2;
  display: block;
  width: min(72vw, 330px);
  aspect-ratio: 1;
  margin: 44px auto 26px;
  border-radius: 24%;
  border: 0;
  background: transparent;
  color: #fffaf0;
  box-shadow: 0 18px 36px rgba(126, 60, 74, .18), 0 0 0 14px rgba(255,247,223,.38);
  transition: transform .08s ease, box-shadow .08s ease;
  isolation: isolate;
  overflow: visible;
  touch-action: manipulation;
  transform-origin: 50% 68%;
  will-change: transform;
}

.seed-button:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 22px 42px rgba(126, 60, 74, .2), 0 0 0 18px rgba(255,247,223,.5);
}

.combo-badge {
  display: block;
  min-height: 34px;
  margin: 12px auto 0;
  color: var(--cap-dark);
  font-size: 18px;
  font-weight: 950;
  text-align: center;
  transform: scale(.86);
  opacity: 0;
  transition: opacity .12s ease, transform .18s ease;
}

.combo-badge.show {
  opacity: 1;
  transform: scale(1);
  animation: comboPop .28s cubic-bezier(.18, 1.8, .28, 1);
}

.combo-badge.hot {
  color: var(--cap-dark);
  text-shadow: 0 0 18px rgba(241, 136, 120, .35);
  animation: comboPulse .34s ease-in-out infinite alternate;
}

.glade-stage {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.glade-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.glade-head span,
.glade-head em,
.bloom-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.glade-head strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  line-height: 1;
}

.glade-head em {
  padding: 7px 9px;
  border: 1px solid rgba(80, 67, 39, .16);
  border-radius: 999px;
  background: rgba(255, 247, 223, .9);
  color: var(--cap-dark);
  font-style: normal;
  white-space: nowrap;
}

.bloom-track {
  height: 16px;
  overflow: hidden;
  border: 1px solid rgba(80, 67, 39, .18);
  border-radius: 999px;
  background: rgba(255, 253, 250, .78);
  box-shadow: inset 0 2px 5px rgba(83, 48, 58, .08);
}

.bloom-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #9dd985, #ffe17a, #ff8ba0, #9dd985);
  background-size: 180% 100%;
  box-shadow: 0 0 18px rgba(233, 120, 136, .28);
  transition: width .24s ease;
  animation: progressCandy 1.3s linear infinite;
}

.bloom-copy {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.friend-scene {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(80, 67, 39, .13);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 240, 152, .42), transparent 28%),
    linear-gradient(180deg, rgba(201, 231, 255, .62) 0 38%, rgba(222, 244, 210, .88) 39% 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 14px 28px rgba(83,48,58,.08);
}

.friend-scene::before {
  content: "";
  position: absolute;
  inset: auto -8% 0;
  height: 34%;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,255,255,.48), transparent 24%),
    repeating-linear-gradient(90deg, rgba(93, 141, 100, .16) 0 12px, rgba(150, 189, 125, .08) 12px 24px),
    linear-gradient(180deg, rgba(190, 231, 171, .76), rgba(127, 178, 113, .42));
}

.friend-scene::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 14%;
  height: 18px;
  border-radius: 50%;
  background: rgba(91, 86, 61, .11);
  filter: blur(4px);
}

.bloom-callout {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 55%;
  width: min(82%, 310px);
  padding: 12px 16px;
  border: 1px solid rgba(255, 225, 111, .72);
  border-radius: 8px;
  color: #fff7c4;
  background:
    radial-gradient(circle at 24% 0, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(180deg, rgba(83, 51, 99, .94), rgba(31, 18, 43, .94));
  box-shadow:
    0 0 28px rgba(174, 255, 130, .22),
    0 12px 24px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.2);
  text-align: center;
  transform: translate(-50%, -50%) scale(.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.bloom-callout strong,
.bloom-callout span {
  display: block;
}

.bloom-callout strong {
  font-size: 15px;
  line-height: 1;
}

.bloom-callout span {
  margin-top: 5px;
  color: rgba(255, 249, 203, .82);
  font-size: 11px;
  font-weight: 850;
}

body[data-bloom-ready="true"] .bloom-callout {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  animation: bloomCalloutGlow 1.1s ease-in-out infinite alternate;
}

body[data-bloom-surge="true"] .friend-scene {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    0 0 34px rgba(157, 255, 126, .28),
    0 14px 28px rgba(83,48,58,.08);
}

.sky-glow,
.sunbeam {
  position: absolute;
  pointer-events: none;
}

.sky-glow {
  inset: 6% 10% auto;
  height: 42%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 246, 186, .5), transparent 62%);
  filter: blur(6px);
}

.sunbeam {
  top: 10%;
  right: 12%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff4a8 0 35%, #ffd66b 36% 62%, rgba(255,214,107,0) 63%);
  box-shadow: 0 0 34px rgba(255, 214, 107, .48);
  animation: sunWiggle 2.6s ease-in-out infinite alternate;
}

.cloud,
.meadow-hill {
  position: absolute;
  pointer-events: none;
}

.cloud {
  width: 78px;
  height: 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 24% 48%, rgba(255,255,255,.86) 0 28%, transparent 29%),
    radial-gradient(circle at 48% 34%, rgba(255,255,255,.92) 0 34%, transparent 35%),
    radial-gradient(circle at 72% 50%, rgba(255,255,255,.82) 0 26%, transparent 27%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.36));
  filter: drop-shadow(0 8px 14px rgba(109, 141, 168, .12));
  opacity: .86;
}

.cloud-a {
  left: 9%;
  top: 13%;
  animation: cloudDrift 8s ease-in-out infinite alternate;
}

.cloud-b {
  right: 20%;
  top: 23%;
  width: 56px;
  transform: scale(.78);
  opacity: .58;
  animation: cloudDrift 10s ease-in-out infinite alternate-reverse;
}

.meadow-hill {
  left: -12%;
  right: -12%;
  bottom: 24%;
  height: 27%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgba(223, 246, 204, .7), rgba(163, 211, 143, .2));
}

.hill-b {
  left: 24%;
  right: -28%;
  bottom: 29%;
  height: 22%;
  background: linear-gradient(180deg, rgba(246, 236, 190, .52), rgba(163, 211, 143, .12));
}

.rush-orbit {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 4;
  width: min(82%, 310px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(from -90deg, rgba(255, 223, 103, .92) var(--rush, 0%), rgba(255, 255, 255, .28) 0);
  opacity: .74;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 16px rgba(255, 215, 107, .2));
  mask: radial-gradient(circle, transparent 62%, #000 63% 66%, transparent 67%);
  pointer-events: none;
}

.rush-orbit.active {
  animation: rushOrbit .72s linear infinite;
  opacity: .95;
}

.friend-scene .seed-button {
  width: min(68%, 270px);
  margin: 8px auto 0;
}

.friend-scene .orchard-visual {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8%;
  width: auto;
  margin: 0;
}

.companion-row {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 18%;
  z-index: 5;
  display: flex;
  align-items: end;
  justify-content: space-between;
  pointer-events: none;
}

.companion {
  position: relative;
  width: 24px;
  height: 29px;
  opacity: 0;
  transform: translateY(10px) scale(.68);
  transition: opacity .18s ease, transform .24s cubic-bezier(.18, 1.7, .28, 1);
}

.companion.live {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: companionBreathe 1.8s ease-in-out infinite alternate;
}

.companion::before {
  content: "";
  position: absolute;
  left: 8%;
  top: 0;
  width: 84%;
  height: 52%;
  border-radius: 52% 52% 36% 36% / 78% 78% 28% 28%;
  background:
    radial-gradient(circle at 31% 54%, rgba(255,248,220,.96) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 33%, rgba(255,248,220,.92) 0 8%, transparent 9%),
    linear-gradient(180deg, #f18896, #ba5362);
  box-shadow: 0 5px 10px rgba(116, 37, 50, .18);
}

.companion i {
  position: absolute;
  left: 34%;
  bottom: 0;
  width: 32%;
  height: 55%;
  border-radius: 42% 42% 28% 28%;
  background: linear-gradient(180deg, #f8ddb0, #e4b06f);
}

.companion i::before,
.companion i::after {
  content: "";
  position: absolute;
  top: 34%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #5c3e38;
}

.companion i::before {
  left: 20%;
}

.companion i::after {
  right: 20%;
}

.scene-pulse {
  position: absolute;
  z-index: 3;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid rgba(255, 248, 184, .88);
  box-shadow: 0 0 0 12px rgba(255, 221, 118, .16), 0 0 30px rgba(255, 221, 118, .38);
  transform: translate(-50%, -50%) scale(.5);
  pointer-events: none;
  animation: scenePulse .68s ease-out forwards;
}

.scene-pulse.hot {
  border-color: #fff8b8;
  box-shadow: 0 0 0 16px rgba(233, 120, 136, .24), 0 0 42px rgba(255, 221, 118, .58);
}

.skill-row,
.save-tools {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.skill-row button {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto minmax(0, max-content);
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  border-color: rgba(185, 77, 92, .22);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 231, 168, .62), transparent 56%),
    linear-gradient(180deg, #fffaf0, #ffe7ee);
  color: var(--cap-dark);
}

.skill-row button::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--skill-dot, var(--cap));
  box-shadow: 0 0 14px var(--skill-glow, rgba(233, 120, 136, .34));
}

#dewSkillButton {
  --skill-dot: radial-gradient(circle at 34% 27%, #fff 0 19%, transparent 20%), linear-gradient(180deg, #9ad7ff, #6d8da8);
  --skill-glow: rgba(109, 141, 168, .38);
}

#boostSkillButton {
  --skill-dot: radial-gradient(circle at 50% 50%, #fff9c8 0 28%, transparent 29%), linear-gradient(180deg, #ffe17a, #e97888);
  --skill-glow: rgba(255, 225, 122, .48);
}

#bloomSkillButton {
  --skill-dot: radial-gradient(circle at 42% 36%, #fff8dc 0 16%, transparent 17%), linear-gradient(180deg, #9dd985, #5d8d64);
  --skill-glow: rgba(93, 141, 100, .38);
}

.skill-row button:disabled {
  border-color: rgba(80, 67, 39, .12);
  background: rgba(255, 250, 240, .62);
  color: rgba(43, 38, 27, .38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.seed-button::before {
  content: "";
  position: absolute;
  left: 4%;
  top: 7%;
  width: 92%;
  height: 53%;
  z-index: 1;
  border-radius: 52% 52% 40% 40% / 82% 82% 28% 28%;
  background:
    radial-gradient(circle at 21% 58%, #fff8dc 0 8%, transparent 9%),
    radial-gradient(circle at 34% 31%, #fff8dc 0 6.5%, transparent 7.5%),
    radial-gradient(circle at 50% 19%, #fff8dc 0 9%, transparent 10%),
    radial-gradient(circle at 66% 35%, #fff8dc 0 6%, transparent 7%),
    radial-gradient(circle at 79% 57%, #fff8dc 0 7.5%, transparent 8.5%),
    linear-gradient(180deg, #fb5968 0%, #df3448 58%, #a92234 100%);
  box-shadow:
    inset 0 14px 24px rgba(255, 255, 255, .28),
    inset 0 -18px 24px rgba(90, 15, 27, .22),
    0 17px 28px rgba(116, 37, 50, .26);
}

.seed-button::after {
  content: "";
  position: absolute;
  left: 17%;
  top: 48%;
  width: 66%;
  height: 17%;
  z-index: 2;
  border-radius: 0 0 52% 52% / 0 0 95% 95%;
  background:
    repeating-linear-gradient(90deg, rgba(171, 119, 78, .16) 0 4px, transparent 4px 16px),
    linear-gradient(180deg, #fff3d8, #efc78d);
  box-shadow: inset 0 -8px 12px rgba(124, 70, 37, .13);
}

.seed-button:active,
.seed-button.is-pressed {
  animation: mushroomSquash .32s cubic-bezier(.2, 1.32, .28, 1);
  box-shadow: 0 10px 22px rgba(126, 60, 74, .16), 0 0 44px rgba(233, 120, 136, .26);
}

.seed-button.is-pressed::before {
  animation: capBounce .32s cubic-bezier(.2, 1.32, .28, 1);
}

.seed-button.is-pressed::after {
  animation: gillFlash .32s cubic-bezier(.2, 1.32, .28, 1);
}

.seed-button.is-pressed .seed-core {
  animation: stemBoing .32s cubic-bezier(.2, 1.32, .28, 1);
}

.seed-core {
  position: absolute;
  left: 35%;
  top: 56%;
  width: 30%;
  height: 35%;
  z-index: 3;
  border-radius: 44% 44% 28% 28%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.56), transparent 44%),
    linear-gradient(180deg, #f9ddb0, #e8b876);
  box-shadow:
    inset 0 -10px 18px rgba(124,70,37,.16),
    0 11px 18px rgba(111,62,36,.14);
}

.seed-core::before,
.seed-core::after {
  content: "";
  position: absolute;
  top: 46%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5c3e38;
}

.seed-core::before {
  left: 30%;
}

.seed-core::after {
  right: 30%;
}

.seed-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  z-index: 2;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.26);
}

.seed-button.is-pressed .seed-text {
  animation: labelPop .32s cubic-bezier(.2, 1.32, .28, 1);
}

.tap-ring,
.tap-flash {
  position: absolute;
  pointer-events: none;
}

.tap-ring {
  z-index: 5;
  width: 18px;
  height: 18px;
  border: 4px solid rgba(255, 250, 210, .96);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(233, 120, 136, .24), 0 0 24px rgba(255, 242, 181, .72);
  transform: translate(-50%, -50%) scale(.2);
  animation: tapRing .46s cubic-bezier(.18, .88, .26, 1) forwards;
}

.tap-ring.hot {
  border-color: #fff7b8;
  box-shadow: 0 0 0 10px rgba(233, 120, 136, .34), 0 0 42px rgba(255, 226, 116, .9);
}

.tap-flash {
  z-index: 4;
  inset: -18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 255, 212, .68), transparent 29%),
    radial-gradient(circle at 50% 52%, rgba(233, 120, 136, .2), transparent 45%);
  animation: tapFlash .32s ease-out forwards;
}

.orchard-visual {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 9px;
  width: min(100%, 520px);
  margin: 0 auto;
}

.sprout {
  position: relative;
  height: 30px;
  border-radius: 18px 18px 9px 9px;
  background:
    radial-gradient(circle at 36% 32%, #fff6d7 0 14%, transparent 15%),
    linear-gradient(180deg, #f18896, var(--cap-dark));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 5px 12px rgba(126,60,74,.16);
  opacity: .24;
  transform: scaleY(.58);
  transform-origin: bottom;
}

.sprout::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 30%;
  height: 12px;
  border-radius: 7px 7px 4px 4px;
  background: var(--stem);
  transform: translateX(-50%);
}

.sprout.live {
  opacity: 1;
  transform: scaleY(1);
}

.action-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.side-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: transparent;
  box-shadow: none;
  border: 0;
}

.state-card {
  padding: 16px;
}

.state-card strong {
  display: block;
  margin: 4px 0 8px;
  font-size: 34px;
  line-height: 1;
}

.state-card p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 650;
}

.state-card button {
  width: 100%;
}

.progress-track {
  width: 100%;
  height: 12px;
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid rgba(80, 67, 39, .18);
  border-radius: 999px;
  background: rgba(255, 250, 240, .7);
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green-2), var(--gold), var(--cap));
  box-shadow: 0 0 18px rgba(233, 120, 136, .26);
  transition: width .28s ease;
  background-size: 180% 100%;
  animation: progressCandy 1.8s linear infinite;
}

.rush-card {
  background:
    linear-gradient(155deg, rgba(255,247,223,.96), rgba(250,237,240,.9) 55%, rgba(215,239,214,.86)),
    radial-gradient(circle at 78% 18%, rgba(233,120,136,.18), transparent 32%);
}

.rush-track span.rush-active {
  background: linear-gradient(90deg, var(--cap), var(--gold), var(--green-2), var(--cap));
  box-shadow: 0 0 24px rgba(233, 120, 136, .42);
  animation: rushGlow .55s ease-in-out infinite alternate;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.log-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.store-panel {
  padding: 16px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1;
}

.store-list,
.achievement-list,
.quest-list {
  display: grid;
  gap: 10px;
}

.store-item,
.achievement,
.quest-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(80, 67, 39, .16);
  border-radius: 8px;
  background: rgba(255, 253, 246, .82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.store-item:hover,
.achievement:hover,
.quest-item:hover {
  border-color: rgba(233, 120, 136, .28);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 10px 20px rgba(83, 48, 58, .08);
}

.store-item h3,
.achievement strong,
.quest-item h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.12;
}

.store-item p,
.achievement span,
.quest-item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 620;
}

.store-item button {
  min-width: 136px;
  padding: 0 12px;
}

.quest-panel {
  grid-column: 1 / -1;
}

.quest-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quest-item {
  align-items: stretch;
}

.quest-item.ready {
  border-color: rgba(93, 141, 100, .34);
  background: linear-gradient(145deg, rgba(241,250,235,.96), rgba(255,253,246,.9));
}

.quest-item.claimed {
  opacity: .72;
}

.quest-item button {
  min-width: 104px;
  padding: 0 12px;
}

.mini-progress {
  width: 100%;
  height: 8px;
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid rgba(80, 67, 39, .14);
  border-radius: 999px;
  background: rgba(255, 250, 240, .7);
}

.mini-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green-2), var(--cap));
}

.owned {
  display: inline-block;
  margin-top: 7px;
  color: var(--cap-dark);
  font-size: 12px;
  font-weight: 900;
}

.achievement {
  grid-template-columns: 34px minmax(0, 1fr);
}

.badge-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(113,104,81,.22);
}

.achievement.unlocked .badge-dot {
  background:
    radial-gradient(circle at 38% 34%, #fff4be 0 19%, transparent 20%),
    linear-gradient(135deg, var(--gold), var(--green));
}

.stat-list {
  display: grid;
  gap: 8px;
}

.stat-list p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(80, 67, 39, .14);
}

.stat-list span {
  color: var(--muted);
  font-weight: 700;
}

.leaderboard-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 12px;
}

.leaderboard-tools input {
  min-width: 0;
  border: 1px solid rgba(80, 67, 39, .22);
  border-radius: 8px;
  padding: 0 12px;
  background: #fffaf0;
  color: var(--ink);
  font: inherit;
  font-weight: 750;
}

.leaderboard-list {
  display: grid;
  gap: 8px;
}

.leaderboard-row,
.leaderboard-empty {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(80, 67, 39, .14);
  font-weight: 800;
}

.leaderboard-row em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  white-space: nowrap;
}

.leaderboard-empty {
  grid-template-columns: 1fr;
  color: var(--muted);
}

.ad-slot {
  display: none;
  min-height: 90px;
  margin: 16px 0;
  place-items: center;
  color: rgba(43, 38, 27, .58);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ad-slot[data-state="debug"] {
  display: grid;
  background: repeating-linear-gradient(135deg, rgba(91,117,137,.08), rgba(91,117,137,.08) 10px, rgba(255,253,246,.76) 10px, rgba(255,253,246,.76) 20px);
}

.ad-slot[data-state="live"] {
  display: block;
  background: transparent;
  box-shadow: none;
}

.save-dialog {
  width: min(560px, calc(100% - 24px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(36, 28, 14, .24);
}

.save-dialog::backdrop {
  background: rgba(43, 38, 27, .38);
}

.save-dialog h2 {
  margin: 0 0 8px;
}

.save-dialog p {
  margin: 0 0 12px;
  color: var(--muted);
  font-weight: 650;
}

.save-dialog textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fffaf0;
  color: var(--ink);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.pop {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  color: var(--green);
  font-size: 22px;
  font-weight: 950;
  text-shadow: 0 2px 0 rgba(255,255,255,.84), 0 8px 22px rgba(93, 141, 100, .28);
  animation: popFloat .88s cubic-bezier(.12, .78, .18, 1) forwards;
}

.pop-hot {
  color: var(--cap-dark);
  transform-origin: center;
  text-shadow: 0 2px 0 rgba(255,255,255,.84), 0 0 24px rgba(233, 120, 136, .46);
}

.spore-pop {
  position: fixed;
  z-index: 39;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 35% 30%, #fff8dc 0 26%, transparent 27%),
    linear-gradient(180deg, #ffe7a8, #f08a98);
  box-shadow: 0 4px 12px rgba(185, 77, 92, .22);
  animation: sporeBurst .7s cubic-bezier(.18, .88, .26, 1) forwards;
}

.spore-pop.big {
  box-shadow: 0 5px 18px rgba(185, 77, 92, .3), 0 0 18px rgba(255, 231, 168, .6);
}

.spore-spark {
  position: fixed;
  z-index: 40;
  width: var(--size);
  height: var(--size);
  pointer-events: none;
  background: #ffeeb8;
  clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%);
  filter: drop-shadow(0 0 9px rgba(255, 214, 87, .74));
  animation: sporeBurst .72s cubic-bezier(.18, .88, .26, 1) forwards;
}

@keyframes mushroomSquash {
  0% { transform: scale(1); }
  35% { transform: scaleX(1.1) scaleY(.86) translateY(8px); }
  68% { transform: scaleX(.96) scaleY(1.06) translateY(-4px); }
  100% { transform: scale(1); }
}

@keyframes capBounce {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  35% { transform: translateY(8px) scaleX(1.1) scaleY(.86); filter: brightness(1.18) saturate(1.06); }
  68% { transform: translateY(-4px) scaleX(.96) scaleY(1.06); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes gillFlash {
  0% { filter: brightness(1); transform: scaleX(1); }
  38% { filter: brightness(1.18); transform: scaleX(1.06) translateY(3px); }
  100% { filter: brightness(1); transform: scaleX(1); }
}

@keyframes stemBoing {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(8px) scaleX(1.1) scaleY(.86); }
  68% { transform: translateY(-4px) scaleX(.96) scaleY(1.06); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes labelPop {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-8px) scale(1.18); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes tapRing {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.22); }
  58% { opacity: .75; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(6.4); }
}

@keyframes tapFlash {
  0% { opacity: .95; transform: scale(.8); }
  100% { opacity: 0; transform: scale(1.22); }
}

@keyframes scenePulse {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(9); }
}

@keyframes comboPop {
  0% { transform: scale(.62); }
  62% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes comboPulse {
  from { transform: scale(1) rotate(-1deg); }
  to { transform: scale(1.08) rotate(1deg); }
}

@keyframes progressCandy {
  from { background-position: 0 0; }
  to { background-position: 180% 0; }
}

@keyframes bloomPulse {
  from {
    filter: brightness(1) saturate(1);
    box-shadow: 0 0 14px rgba(157, 255, 126, .24), inset 0 1px 0 rgba(255,255,255,.44);
  }
  to {
    filter: brightness(1.13) saturate(1.18);
    box-shadow: 0 0 28px rgba(255, 219, 103, .45), 0 0 42px rgba(157, 255, 126, .26), inset 0 1px 0 rgba(255,255,255,.55);
  }
}

@keyframes bloomCalloutGlow {
  from {
    box-shadow:
      0 0 24px rgba(174, 255, 130, .2),
      0 12px 24px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.2);
  }
  to {
    box-shadow:
      0 0 34px rgba(255, 219, 103, .4),
      0 0 52px rgba(174, 255, 130, .28),
      0 12px 24px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.24);
  }
}

@keyframes rushGlow {
  from { filter: brightness(1) saturate(1); }
  to { filter: brightness(1.16) saturate(1.24); }
}

@keyframes sunWiggle {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(5px) scale(1.05); }
}

@keyframes cloudDrift {
  from { transform: translateX(-4px); }
  to { transform: translateX(12px); }
}

@keyframes rushOrbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes companionBreathe {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-4px) scale(1.04); }
}

@keyframes sceneBloom {
  0% { filter: brightness(1) saturate(1); }
  38% { filter: brightness(1.16) saturate(1.14); }
  100% { filter: brightness(1) saturate(1); }
}

.friend-scene.scene-tapped .companion.live {
  animation: companionBreathe .24s ease-in-out 2 alternate;
}

.friend-scene.scene-bloomed {
  animation: sceneBloom .88s ease-out;
}

.friend-scene.scene-bloomed .companion.live {
  animation: companionBreathe .18s ease-in-out 5 alternate;
}

@keyframes popFloat {
  from { opacity: 1; transform: translate(-50%, -20%) scale(.9); }
  to { opacity: 0; transform: translate(-50%, -130%) scale(1.14); }
}

@keyframes sporeBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.55) rotate(0deg);
  }
  16% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.15) rotate(var(--spin));
  }
}

@media (prefers-reduced-motion: reduce) {
  .seed-button.is-pressed,
  .seed-button.is-pressed::before,
  .seed-button.is-pressed::after,
  .seed-button.is-pressed .seed-core,
  .seed-button.is-pressed .seed-text,
  .spore-pop,
  .spore-spark,
  .tap-ring,
  .tap-flash,
  .scene-pulse,
  .pop,
  .progress-track span,
  .combo-badge.hot {
    animation-duration: .01ms;
  }

  .sunbeam,
  .cloud,
  .companion.live,
  .rush-orbit.active,
  .friend-scene.scene-bloomed {
    animation-duration: .01ms;
  }
}

@media (max-width: 860px) {
  .hero-panel,
  .play-grid,
  .store-grid,
  .log-grid {
    grid-template-columns: 1fr;
  }

  .tap-panel {
    min-height: 490px;
  }

  .resource-row,
  .action-row {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    padding: 18px;
  }

  .summary {
    max-width: min(100%, 360px);
  }
}

@media (max-width: 640px) {
  .game-shell {
    width: 100%;
    max-width: none;
    padding: 14px 10px 44px;
  }

  .hero-panel h1 {
    font-size: 46px;
  }

  .hero-pills {
    gap: 6px;
  }

  .hero-pills span {
    padding: 7px 9px;
  }

  .daily-card {
    transform: none;
  }

  .summary {
    width: 100%;
    max-width: min(100%, 330px);
    font-size: 15px;
  }

  .tap-panel,
  .store-panel,
  .state-card {
    padding: 12px;
  }

  .seed-button {
    width: min(72vw, 244px);
    margin-top: 30px;
  }

  .store-item {
    grid-template-columns: 1fr;
  }

  .quest-list {
    grid-template-columns: 1fr;
  }

  .quest-item {
    grid-template-columns: 1fr;
  }

  .store-item button,
  .quest-item button {
    width: 100%;
  }

  .leaderboard-tools,
  .leaderboard-row {
    grid-template-columns: 1fr;
  }

  .leaderboard-row em {
    white-space: normal;
  }
}

body.game-page {
  display: grid;
  place-items: center;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  padding: 0;
  background:
    radial-gradient(circle at 24% 14%, rgba(233, 120, 136, .2), transparent 26%),
    radial-gradient(circle at 80% 82%, rgba(150, 189, 125, .2), transparent 28%),
    linear-gradient(135deg, #211b1d, #3b3430 46%, #1f2927);
}

.game-page .phone-frame {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(233, 120, 136, .13) 0 25%, transparent 25% 50%, rgba(150, 189, 125, .12) 50% 75%, transparent 75%) 0 0 / 44px 44px,
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(215, 173, 84, .08) 78px 82px),
    linear-gradient(180deg, #ffe2e7 0%, #f7f2df 45%, #f1faeb 100%);
}

.game-page .phone-frame::before {
  display: none;
}

.game-page .suite-topbar {
  position: relative;
  z-index: 20;
  min-height: 52px;
  padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  background: rgba(255, 253, 246, .76);
  backdrop-filter: blur(16px);
}

.game-page .suite-ao-home {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

.game-page .suite-ao-home img {
  width: 36px;
  height: 36px;
}

.game-page .suite-app-mark {
  width: 31px;
  height: 31px;
  flex-basis: 31px;
}

.game-page .suite-app-brand {
  gap: 7px;
  font-size: 15px;
}

.game-page .suite-topbar-actions {
  display: none;
}

.game-page .game-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  padding: 8px 10px max(8px, env(safe-area-inset-bottom));
}

.game-page .ad-slot {
  display: none !important;
}

.game-page .hero-panel {
  display: none;
}

.game-page .hero-panel::after,
.game-page .summary,
.game-page .hero-pills {
  display: none;
}

.game-page .eyebrow {
  font-size: 9px;
  letter-spacing: .06em;
}

.game-page .hero-panel h1 {
  margin-top: 3px;
  font-size: 30px;
  line-height: .92;
}

.game-page .daily-card {
  gap: 5px;
  min-width: 0;
  padding: 8px;
  transform: none;
}

.game-page .daily-card span {
  font-size: 9px;
  letter-spacing: .05em;
}

.game-page .daily-card strong {
  font-size: 16px;
}

.game-page .daily-card button {
  min-height: 32px;
  padding: 0 8px;
  font-size: 12px;
}

.game-page .screen-panel {
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.game-page .play-grid,
.game-page .store-grid,
.game-page .log-grid {
  display: none;
  grid-template-columns: 1fr;
  gap: 8px;
}

body[data-tab="play"] .play-grid,
body[data-tab="store"] .store-grid,
body[data-tab="quests"] .log-grid,
body[data-tab="board"] .log-grid {
  display: grid;
}

body[data-tab="play"] .play-grid {
  grid-template-rows: minmax(0, 1fr);
}

body[data-tab="store"] .store-grid {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

body[data-tab="quests"] .log-grid {
  grid-template-rows: minmax(0, 1.1fr) minmax(0, .9fr);
}

body[data-tab="board"] .log-grid {
  grid-template-rows: minmax(0, 1fr) auto;
}

body[data-tab="quests"] .session-panel,
body[data-tab="quests"] .leaderboard-panel,
body[data-tab="board"] .quest-panel,
body[data-tab="board"] .badges-panel {
  display: none;
}

.game-page .tap-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.game-page .glade-stage {
  align-self: stretch;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(80, 67, 39, .13);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 240, 152, .34), transparent 27%),
    linear-gradient(180deg, rgba(255, 253, 246, .84), rgba(244, 250, 231, .72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 16px 30px rgba(83, 48, 58, .1);
}

.game-page .glade-head {
  align-items: center;
}

.game-page .glade-head span,
.game-page .glade-head em,
.game-page .bloom-copy small {
  font-size: 8px;
  letter-spacing: .04em;
}

.game-page .glade-head strong {
  margin-top: 2px;
  font-size: 15px;
}

.game-page .glade-head em {
  padding: 5px 7px;
}

.game-page .bloom-track {
  height: 10px;
}

.game-page .bloom-copy {
  min-height: 10px;
  align-items: center;
}

.game-page .bloom-copy small:last-child {
  color: rgba(80, 67, 39, .48);
}

.game-page .bloom-copy #nextBloomName {
  max-width: 60%;
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px 4px;
  border: 1px solid rgba(78, 54, 44, .12);
  border-radius: 999px;
  overflow: hidden;
  color: rgba(78, 55, 49, .68);
  text-overflow: ellipsis;
  white-space: nowrap;
  background:
    radial-gradient(circle at 30% 0, rgba(255,255,255,.74), transparent 38%),
    rgba(255, 252, 235, .46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

.game-page .bloom-copy #nextBloomName[data-ready="true"] {
  color: #fffdf8;
  border-color: rgba(126, 67, 78, .28);
  background:
    radial-gradient(circle at 34% 0, rgba(255,255,255,.44), transparent 34%),
    linear-gradient(180deg, #e9818f, #b74757);
  box-shadow:
    0 5px 14px rgba(152, 60, 74, .2),
    inset 0 1px 0 rgba(255,255,255,.44);
  animation: nextActionGlow 1.35s ease-in-out infinite alternate;
}

.game-page .friend-scene {
  display: grid;
  place-items: center;
  min-height: clamp(350px, 57dvh, 590px);
  height: auto;
  border: 0;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 246, 186, .48), transparent 29%),
    linear-gradient(180deg, rgba(202, 233, 255, .72) 0 43%, rgba(222, 244, 210, .94) 44% 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 14px 28px rgba(83,48,58,.08);
}

.game-page .resource-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.game-page .resource-row div {
  min-height: 38px;
  padding: 4px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.game-page .resource-row div + div {
  border-left: 0;
}

.game-page .resource-row .metric-label {
  font-size: 8px;
  line-height: 1;
  letter-spacing: .035em;
}

.game-page .resource-row strong {
  margin-top: 2px;
  font-size: 19px;
}

.game-page .resource-row small {
  margin-top: 2px;
  font-size: 9px;
}

.game-page .next-goal-button {
  min-height: 20px;
  margin-top: 2px;
  padding: 2px 5px;
  border-width: 1px;
  font-size: 8.5px;
}

.game-page .seed-button {
  z-index: 6;
  width: min(70vw, 260px);
  margin: 4px auto 8px;
}

.game-page .seed-text {
  display: none;
}

.game-page .combo-badge {
  min-height: 20px;
  margin-top: 0;
  font-size: 15px;
}

.game-page .orchard-visual {
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  width: min(100%, 300px);
  min-height: 20px;
  margin-top: 2px;
}

.game-page .friend-scene .orchard-visual {
  left: 9%;
  right: 9%;
  bottom: 5%;
  width: auto;
  opacity: .74;
}

.game-page .sprout {
  height: 18px;
}

.game-page .sprout::after {
  bottom: -4px;
  height: 8px;
}

.game-page .action-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.game-page .action-row button,
.game-page .skill-row button,
.game-page .save-tools button,
.game-page .leaderboard-tools button,
.game-page .store-item button,
.game-page .quest-item button,
.game-page .state-card button {
  min-height: 34px;
  padding: 0 8px;
  font-size: 11px;
}

.game-page .skill-row {
  gap: 6px;
  overflow: visible;
  margin-top: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.game-page .skill-row button {
  min-height: 34px;
  border: 1px solid rgba(185, 77, 92, .18);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  white-space: nowrap;
}

.game-page .skill-row button[data-ready="true"]:not(:disabled) {
  border-color: rgba(233, 120, 136, .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 16px rgba(185, 77, 92, .12);
}

.game-page .skill-row button[data-ready="active"] {
  color: #fffdf8;
  background: linear-gradient(180deg, #e97888, #b94d5c);
}

.game-page .save-tools {
  gap: 6px;
  margin-top: 8px;
}

.game-page .side-panel {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-height: 0;
  padding: 0;
}

.game-page .state-card {
  min-width: 0;
  min-height: 0;
  padding: 8px;
}

.game-page .state-card .metric-label {
  font-size: 8px;
  letter-spacing: .035em;
}

.game-page .state-card strong {
  margin: 3px 0 6px;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.game-page .state-card p {
  display: none;
}

.game-page .progress-track {
  height: 8px;
  margin-bottom: 7px;
}

.game-page .store-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 10px;
  overflow: hidden;
}

.game-page .section-head {
  gap: 8px;
  margin-bottom: 8px;
}

.game-page .section-head h2 {
  font-size: 19px;
}

.game-page .section-head span {
  font-size: 9px;
  letter-spacing: .05em;
}

.game-page .store-list,
.game-page .achievement-list,
.game-page .quest-list,
.game-page .leaderboard-list,
.game-page .stat-list {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.game-page .store-list::-webkit-scrollbar,
.game-page .achievement-list::-webkit-scrollbar,
.game-page .quest-list::-webkit-scrollbar,
.game-page .leaderboard-list::-webkit-scrollbar,
.game-page .stat-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.game-page .store-item,
.game-page .quest-item {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
}

.game-page .achievement {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
}

.game-page .badge-dot {
  width: 25px;
  height: 25px;
}

.game-page .store-item h3,
.game-page .achievement strong,
.game-page .quest-item h3 {
  font-size: 14px;
}

.game-page .store-item p,
.game-page .achievement span,
.game-page .quest-item p {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.2;
}

.game-page .owned {
  margin-top: 5px;
  font-size: 10px;
}

.game-page .quest-panel {
  grid-column: auto;
}

.game-page .quest-list {
  grid-template-columns: 1fr;
}

.game-page .leaderboard-tools {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-bottom: 8px;
}

.game-page .leaderboard-tools input {
  min-height: 34px;
  padding: 0 9px;
  font-size: 12px;
}

.game-page .leaderboard-row,
.game-page .leaderboard-empty {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 7px;
  padding: 8px 0;
  font-size: 12px;
}

.game-page .leaderboard-row em {
  font-size: 10px;
  white-space: normal;
}

.game-page .stat-list {
  gap: 0;
}

.game-page .stat-list p {
  padding: 7px 0;
  font-size: 12px;
}

.bottom-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  min-height: 50px;
  padding: 6px;
  border: 1px solid rgba(80, 67, 39, .16);
  border-radius: 12px;
  background: rgba(255, 253, 246, .88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 10px 26px rgba(83, 48, 58, .12);
}

.bottom-tabs button {
  min-height: 38px;
  border-radius: 9px;
  padding: 0 5px;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 950;
}

.bottom-tabs button[aria-pressed="true"] {
  color: #fffdf8;
  border-color: rgba(169, 34, 52, .28);
  background: linear-gradient(180deg, var(--cap), var(--cap-dark));
  box-shadow: 0 8px 16px rgba(185, 77, 92, .18), inset 0 1px 0 rgba(255,255,255,.26);
}

.game-page .save-dialog {
  max-height: calc(100dvh - 24px);
}

@media (min-width: 560px) and (min-height: 760px) {
  body.game-page {
    padding: 24px;
  }

  .game-page .phone-frame {
    width: min(430px, calc(100vw - 64px));
    height: min(932px, calc(100vh - 48px));
    border: 10px solid #211b1d;
    border-radius: 46px;
    box-shadow:
      0 34px 90px rgba(0, 0, 0, .42),
      0 0 0 1px rgba(255, 255, 255, .12),
      inset 0 0 0 1px rgba(255, 255, 255, .18);
  }

  .game-page .phone-frame::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 40;
    display: block;
    width: 92px;
    height: 24px;
    border-radius: 999px;
    background: rgba(33, 27, 29, .92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 16px rgba(33, 27, 29, .18);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .game-page .suite-topbar {
    min-height: 80px;
    padding: 28px 12px 0;
  }

  .game-page .seed-button {
    width: min(60%, 220px);
  }
}

@media (max-height: 780px) {
  .game-page .hero-panel {
    display: none;
  }

  .game-page .hero-panel h1 {
    font-size: 26px;
  }

  .game-page .daily-card strong {
    font-size: 14px;
  }

  .game-page .tap-panel {
    padding: 0;
  }

  .game-page .seed-button {
    width: min(58vw, 198px);
  }

  .game-page .friend-scene {
    min-height: 300px;
  }

  .game-page .orchard-visual {
    display: none;
  }
}

@media (max-height: 560px) {
  .game-page .suite-topbar {
    min-height: 42px;
    padding: 4px 8px 0;
  }

  .game-page .suite-ao-home {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .game-page .suite-ao-home img {
    width: 28px;
    height: 28px;
  }

  .game-page .suite-app-mark {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .game-page .suite-app-brand {
    font-size: 13px;
  }

  .game-page .game-shell {
    gap: 5px;
    padding: 5px 8px max(5px, env(safe-area-inset-bottom));
  }

  .game-page .tap-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .game-page .resource-row {
    gap: 4px;
  }

  .game-page .resource-row div {
    min-height: 28px;
    padding: 2px 3px;
  }

  .game-page .resource-row .metric-label {
    font-size: 7px;
  }

  .game-page .resource-row strong {
    font-size: 16px;
  }

  .game-page .resource-row small {
    display: none;
  }

  .game-page .glade-stage {
    gap: 3px;
    margin-top: 3px;
    padding: 7px;
    border-radius: 11px;
  }

  .game-page .glade-head strong {
    font-size: 14px;
  }

  .game-page .glade-head em,
  .game-page .bloom-copy small {
    font-size: 7px;
  }

  .game-page .bloom-track {
    height: 7px;
  }

  .game-page .bloom-copy small:last-child {
    display: none;
  }

  .game-page .friend-scene {
    min-height: 0;
    height: 100%;
    border-radius: 10px;
  }

  .game-page .cloud-b,
  .game-page .orchard-visual,
  .game-page .companion-row {
    display: none;
  }

  .game-page .sunbeam {
    width: 42px;
    height: 42px;
  }

  .game-page .seed-button {
    width: min(38vh, 156px);
  }

  .game-page .skill-row {
    gap: 5px;
    margin-top: 4px;
  }

  .game-page .skill-row button {
    min-height: 29px;
    font-size: 10px;
  }

  .bottom-tabs {
    min-height: 42px;
    padding: 5px;
  }

  .bottom-tabs button {
    min-height: 31px;
    font-size: 11px;
  }
}

/* Forest-heart pass: the meadow is the interface. */
body.game-page {
  background:
    radial-gradient(circle at 25% 16%, rgba(255, 202, 138, .24), transparent 24%),
    radial-gradient(circle at 78% 84%, rgba(107, 160, 116, .28), transparent 26%),
    linear-gradient(135deg, #1d2226 0%, #342b2d 48%, #202c25 100%);
}

.game-page .phone-frame {
  color: #302421;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 237, 150, .78), transparent 24%),
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.46), transparent 16%),
    radial-gradient(circle at 82% 25%, rgba(255,255,255,.36), transparent 14%),
    linear-gradient(180deg, #b9e4ff 0 35%, #dff5d4 36% 64%, #88bf75 65% 100%);
}

.game-page .phone-frame::after {
  content: "";
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: 48px;
  z-index: 0;
  height: 38%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 22% 24%, rgba(255, 242, 190, .52), transparent 24%),
    radial-gradient(ellipse at 78% 18%, rgba(222, 245, 198, .65), transparent 25%),
    repeating-linear-gradient(90deg, rgba(72, 124, 76, .14) 0 7px, rgba(255, 229, 154, .1) 7px 14px),
    linear-gradient(180deg, rgba(176, 220, 139, .92), rgba(93, 141, 100, .84));
  border-radius: 54% 54% 0 0 / 28% 28% 0 0;
}

.game-page .suite-topbar,
.game-page .game-shell,
.bottom-tabs {
  position: relative;
  z-index: 2;
}

.game-page .suite-topbar {
  background: linear-gradient(180deg, rgba(255,253,246,.78), rgba(255,253,246,.46));
  border-bottom: 1px solid rgba(255,255,255,.28);
}

.game-page .game-shell {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 7px;
  background: transparent;
}

.game-page .tap-panel {
  position: relative;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.game-page .tap-panel::before {
  display: none;
}

.game-page .resource-row {
  z-index: 6;
  align-self: start;
  padding: 3px;
  border: 1px solid rgba(93, 72, 48, .12);
  border-radius: 14px;
  background: rgba(255, 253, 246, .56);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 24px rgba(68, 62, 36, .08), inset 0 1px 0 rgba(255,255,255,.62);
}

.game-page .resource-row div {
  display: grid;
  align-content: center;
  min-height: 42px;
  padding: 5px 4px;
  text-align: center;
}

.game-page .resource-row strong {
  color: #332421;
  text-shadow: 0 1px 0 rgba(255,255,255,.66);
}

.game-page .glade-stage {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 4px;
  min-height: 0;
  margin-top: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.game-page .glade-head {
  z-index: 7;
  padding: 0 2px;
}

.game-page .glade-head strong {
  color: #2a211f;
  text-shadow: 0 1px 0 rgba(255,255,255,.64);
}

.glade-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sound-button {
  position: relative;
  width: 31px;
  min-width: 31px;
  height: 31px;
  min-height: 31px;
  padding: 0;
  border-radius: 50%;
  border-color: rgba(80, 67, 39, .16);
  background: rgba(255, 253, 246, .78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 7px 14px rgba(83,48,58,.08);
}

.sound-button span {
  position: absolute;
  left: 9px;
  top: 10px;
  width: 8px;
  height: 10px;
  border-radius: 2px 4px 4px 2px;
  background: #b94d5c;
}

.sound-button span::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 3px;
  width: 5px;
  height: 5px;
  border-radius: 2px 0 0 2px;
  background: #b94d5c;
}

.sound-button span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: -2px;
  width: 8px;
  height: 14px;
  border: 2px solid #b94d5c;
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.sound-button.off span::after {
  left: 10px;
  top: -4px;
  width: 2px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: #5c3e38;
  transform: rotate(-38deg);
}

.game-page .bloom-track {
  display: none;
}

.game-page .bloom-copy {
  position: relative;
  z-index: 7;
  padding: 0 2px;
}

.game-page .friend-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.game-page .friend-scene::before {
  inset: auto -18% -4%;
  z-index: 0;
  height: 35%;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,255,255,.42), transparent 24%),
    repeating-linear-gradient(90deg, rgba(76, 126, 78, .18) 0 9px, rgba(255, 231, 157, .12) 9px 18px),
    linear-gradient(180deg, rgba(188, 229, 157, .96), rgba(91, 151, 89, .74));
}

.game-page .friend-scene::after {
  left: 15%;
  right: 15%;
  bottom: 18%;
  z-index: 1;
  height: 20px;
  opacity: .72;
}

.game-page .sky-glow {
  inset: 0 4% auto;
  height: 45%;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(255, 249, 190, .68), transparent 62%);
}

.game-page .sunbeam {
  top: 4%;
  right: 10%;
  width: 56px;
  height: 56px;
}

.game-page .cloud-a {
  left: 4%;
  top: 8%;
}

.game-page .cloud-b {
  right: 9%;
  top: 18%;
}

.game-page .meadow-hill {
  bottom: 30%;
}

.root-ring,
.rush-orbit {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 3;
  width: min(86%, 326px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.root-ring {
  background:
    conic-gradient(from -90deg, #fff4a8 var(--bloom, 0%), rgba(255,255,255,.2) 0 100%);
  filter: drop-shadow(0 0 18px rgba(255, 221, 118, .38));
  mask: radial-gradient(circle, transparent 60%, #000 61% 64%, transparent 65%);
  opacity: .9;
}

.root-ring.ready {
  animation: rootRingReady .62s ease-in-out infinite alternate;
}

.game-page .rush-orbit {
  top: 52%;
  width: min(75%, 286px);
  mask: radial-gradient(circle, transparent 62%, #000 63% 65%, transparent 66%);
}

.game-page .friend-scene .seed-button {
  position: relative;
  z-index: 5;
  width: min(70%, 282px);
  margin: 0 auto;
  filter: drop-shadow(0 28px 20px rgba(74, 63, 36, .18));
}

.game-page .seed-button::before {
  transform-origin: 50% 88%;
}

.game-page .seed-core::before,
.game-page .seed-core::after {
  transition: height .18s ease, transform .18s ease, border-radius .18s ease;
}

body[data-tutorial="sleeping"] .seed-core::before,
body[data-tutorial="sleeping"] .seed-core::after {
  height: 3px;
  transform: translateY(2px);
  border-radius: 999px;
}

body[data-tutorial="awake"] .seed-button::before,
body[data-tutorial="baby"] .seed-button::before {
  animation: capIdle .9s ease-in-out infinite alternate;
}

body[data-tutorial="root"] .root-ring,
body[data-tutorial="friend"] .root-ring,
body[data-tutorial="forest"] .root-ring {
  filter: drop-shadow(0 0 26px rgba(255, 221, 118, .58));
}

.game-page .companion-row {
  z-index: 6;
  left: 8%;
  right: 8%;
  bottom: 20%;
}

.game-page .companion-1::before {
  left: 12%;
  top: 18%;
  width: 76%;
  height: 62%;
  border-radius: 48% 48% 42% 42%;
  background:
    radial-gradient(circle at 35% 38%, #fff8dc 0 5%, transparent 6%),
    radial-gradient(circle at 65% 38%, #fff8dc 0 5%, transparent 6%),
    linear-gradient(180deg, #8bd5d0, #4f9b97);
}

.game-page .companion-1 i {
  left: 28%;
  bottom: 1px;
  width: 44%;
  height: 45%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(129, 205, 202, .32));
}

.game-page .companion.live {
  filter: drop-shadow(0 5px 8px rgba(67, 76, 43, .14));
}

.game-page .orchard-visual {
  z-index: 4;
}

.game-page .skill-row {
  position: relative;
  z-index: 7;
  padding: 3px;
  border: 1px solid rgba(93, 72, 48, .12);
  border-radius: 14px;
  background: rgba(255, 253, 246, .54);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 24px rgba(68, 62, 36, .08), inset 0 1px 0 rgba(255,255,255,.62);
}

.game-page .skill-row button {
  min-height: 38px;
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 231, 168, .52), transparent 55%),
    linear-gradient(180deg, rgba(255,250,240,.96), rgba(255,231,238,.92));
}

.bottom-tabs {
  border-radius: 16px;
  background: rgba(255, 253, 246, .78);
  backdrop-filter: blur(16px);
}

.bottom-tabs button {
  border-radius: 12px;
  letter-spacing: 0;
}

.game-page .store-panel,
.game-page .state-card,
.game-page .save-dialog {
  background: rgba(255, 253, 246, .88);
  backdrop-filter: blur(16px);
}

.friend-scene.scene-tapped .seed-button {
  animation: wholeMushroomJolt .24s cubic-bezier(.18, 1.5, .28, 1);
}

.friend-scene.scene-bloomed .root-ring {
  animation: rootBloom .9s ease-out;
}

@keyframes rootRingReady {
  from { opacity: .72; transform: translate(-50%, -50%) scale(.985); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.025); }
}

@keyframes capIdle {
  from { transform: translateY(0) rotate(-1deg); }
  to { transform: translateY(-3px) rotate(1deg); }
}

@keyframes wholeMushroomJolt {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(5px) scaleX(1.04) scaleY(.94); }
  72% { transform: translateY(-4px) scaleX(.98) scaleY(1.04); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes rootBloom {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.88); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.22); }
  100% { opacity: .86; transform: translate(-50%, -50%) scale(1); }
}

@media (min-width: 560px) and (min-height: 760px) {
  .game-page .phone-frame {
    width: min(430px, calc(100vw - 64px));
    height: min(932px, calc(100vh - 48px));
    border-color: #1f1b1c;
  }
}

@media (max-height: 560px) {
  .game-page .resource-row {
    padding: 2px;
  }

  .game-page .glade-stage {
    gap: 2px;
    margin-top: 2px;
  }

  .game-page .bloom-copy {
    display: none;
  }

  .root-ring {
    width: min(58vh, 196px);
  }

  .game-page .rush-orbit {
    width: min(52vh, 176px);
  }

  .game-page .friend-scene .seed-button {
    width: min(42vh, 160px);
  }

  .sound-button {
    width: 27px;
    min-width: 27px;
    height: 27px;
    min-height: 27px;
  }
}

/* Hand-drawn art pass: paper, ink, watercolor, and imperfect linework. */
.game-page {
  --ink-line: rgba(72, 49, 42, .52);
  --ink-soft: rgba(72, 49, 42, .24);
  --paper: rgba(255, 250, 232, .78);
  --drawn-font: "Segoe Print", "Bradley Hand ITC", "Comic Sans MS", ui-rounded, system-ui, sans-serif;
}

body.game-page {
  background:
    radial-gradient(circle at 18% 12%, rgba(247, 183, 133, .32), transparent 22%),
    radial-gradient(circle at 82% 78%, rgba(128, 170, 113, .3), transparent 26%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, #242426, #3b302f 48%, #20332a);
}

.game-page .phone-frame {
  background:
    radial-gradient(circle at 50% 17%, rgba(255, 239, 149, .7), transparent 23%),
    radial-gradient(ellipse at 24% 31%, rgba(255,255,255,.48), transparent 17%),
    radial-gradient(ellipse at 80% 25%, rgba(255,255,255,.38), transparent 15%),
    repeating-linear-gradient(6deg, rgba(117, 83, 55, .025) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(96deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 12px),
    linear-gradient(180deg, #bee3f0 0 34%, #dbeecb 35% 62%, #85b96e 63% 100%);
}

.game-page .phone-frame::after {
  background:
    radial-gradient(ellipse at 20% 18%, rgba(255, 241, 190, .5), transparent 23%),
    radial-gradient(ellipse at 78% 14%, rgba(226, 245, 195, .58), transparent 25%),
    repeating-linear-gradient(86deg, rgba(67, 117, 69, .13) 0 6px, rgba(255, 232, 164, .12) 6px 13px),
    repeating-linear-gradient(11deg, rgba(76, 126, 78, .06) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, rgba(193, 225, 151, .96), rgba(83, 139, 78, .83));
  border-radius: 48% 52% 0 0 / 25% 31% 0 0;
}

.game-page .game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 24%, rgba(94, 68, 48, .045) 0 1px, transparent 1.4px),
    radial-gradient(circle at 64% 12%, rgba(94, 68, 48, .035) 0 1px, transparent 1.5px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px);
  background-size: 18px 18px, 23px 23px, 100% 100%;
  mix-blend-mode: multiply;
  opacity: .72;
}

.game-page .screen-panel,
.game-page .bottom-tabs {
  position: relative;
  z-index: 1;
}

.game-page .suite-topbar {
  background:
    repeating-linear-gradient(-7deg, rgba(102, 71, 45, .035) 0 1px, transparent 1px 9px),
    rgba(255, 253, 239, .68);
  border-bottom: 2px solid rgba(72, 49, 42, .08);
}

.game-page .suite-app-name,
.game-page .glade-head strong,
.game-page .section-head h2 {
  font-family: var(--drawn-font);
  letter-spacing: 0;
}

.game-page .resource-row,
.game-page .skill-row,
.bottom-tabs,
.game-page .store-panel,
.game-page .state-card,
.game-page .leaderboard-tools input {
  border: 2px solid var(--ink-soft);
  background:
    radial-gradient(circle at 17% 18%, rgba(255,255,255,.48), transparent 18%),
    repeating-linear-gradient(101deg, rgba(126, 87, 59, .035) 0 1px, transparent 1px 8px),
    rgba(255, 250, 232, .72);
  box-shadow:
    1px 2px 0 rgba(72, 49, 42, .13),
    inset 0 1px 0 rgba(255,255,255,.62);
}

.game-page .resource-row {
  border-radius: 18px 15px 19px 14px;
  transform: rotate(-.25deg);
}

.game-page .resource-row div:nth-child(2) {
  transform: rotate(.45deg);
}

.game-page .resource-row .metric-label,
.game-page .glade-head span,
.game-page .glade-head em,
.game-page .bloom-copy small {
  color: #6a4d45;
  font-family: var(--drawn-font);
  font-weight: 900;
  letter-spacing: 0;
}

.game-page .resource-row strong {
  font-family: var(--drawn-font);
  font-weight: 900;
  color: #33241f;
}

.game-page .glade-head em,
.sound-button {
  border: 2px solid rgba(72, 49, 42, .22);
  background:
    repeating-linear-gradient(116deg, rgba(120, 83, 51, .045) 0 1px, transparent 1px 7px),
    rgba(255, 250, 232, .82);
  box-shadow: 1px 2px 0 rgba(72, 49, 42, .11);
}

.game-page .friend-scene {
  filter: saturate(.96) contrast(.98);
}

.game-page .friend-scene::before {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,255,255,.34), transparent 24%),
    repeating-linear-gradient(92deg, rgba(60, 109, 64, .14) 0 7px, rgba(255, 232, 164, .09) 7px 15px),
    repeating-linear-gradient(18deg, rgba(61, 105, 63, .06) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, rgba(188, 229, 157, .94), rgba(91, 151, 89, .72));
  border-top: 0;
}

.game-page .cloud {
  filter:
    drop-shadow(1px 1px 0 rgba(75, 54, 44, .1))
    drop-shadow(-1px 0 0 rgba(255,255,255,.45));
  opacity: .72;
}

.game-page .sunbeam {
  border: 2px solid rgba(170, 113, 39, .22);
  box-shadow:
    0 0 28px rgba(255, 214, 107, .38),
    1px 2px 0 rgba(72, 49, 42, .08);
}

.root-ring {
  background:
    conic-gradient(from -91deg, rgba(255, 226, 111, .9) var(--bloom, 0%), rgba(255,255,255,.12) 0 100%);
  filter:
    drop-shadow(1px 2px 0 rgba(72, 49, 42, .14))
    drop-shadow(0 0 18px rgba(255, 221, 118, .38));
}

.root-ring::before,
.root-ring::after {
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: 47% 53% 49% 51%;
  border: 2px solid rgba(84, 55, 43, .22);
  transform: rotate(-4deg);
}

.root-ring::after {
  inset: 9%;
  border-color: rgba(113, 82, 45, .18);
  border-style: dashed;
  transform: rotate(8deg);
}

.rush-orbit {
  filter:
    drop-shadow(1px 2px 0 rgba(72, 49, 42, .12))
    drop-shadow(0 0 12px rgba(255, 212, 88, .32));
}

.game-page .friend-scene .seed-button {
  filter:
    drop-shadow(2px 4px 0 rgba(72, 49, 42, .12))
    drop-shadow(0 24px 18px rgba(74, 63, 36, .14));
}

.seed-button::before {
  border: 3px solid rgba(84, 40, 45, .44);
  border-radius: 50% 54% 38% 42% / 80% 76% 32% 30%;
  background:
    radial-gradient(circle at 21% 58%, #fff8dc 0 8%, transparent 9%),
    radial-gradient(circle at 34% 31%, #fff8dc 0 6.5%, transparent 7.5%),
    radial-gradient(circle at 50% 19%, #fff8dc 0 9%, transparent 10%),
    radial-gradient(circle at 66% 35%, #fff8dc 0 6%, transparent 7%),
    radial-gradient(circle at 79% 57%, #fff8dc 0 7.5%, transparent 8.5%),
    repeating-linear-gradient(166deg, rgba(255,255,255,.09) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #f5656f 0%, #df3e4d 58%, #aa2836 100%);
  box-shadow:
    inset 0 10px 18px rgba(255,255,255,.24),
    inset 0 -18px 22px rgba(90, 15, 27, .18),
    1px 4px 0 rgba(72, 49, 42, .18);
}

.seed-button::after {
  border: 2px solid rgba(84, 55, 43, .22);
  border-top: 0;
  border-radius: 0 0 46% 54% / 0 0 92% 88%;
  background:
    repeating-linear-gradient(87deg, rgba(129, 82, 47, .2) 0 3px, transparent 3px 14px),
    repeating-linear-gradient(174deg, rgba(255,255,255,.13) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #fff3d8, #efc78d);
}

.seed-core {
  border: 2px solid rgba(84, 55, 43, .32);
  border-radius: 45% 51% 31% 35% / 46% 44% 30% 31%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.56), transparent 44%),
    repeating-linear-gradient(96deg, rgba(126, 75, 44, .06) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #f6d9aa, #e7b26f);
  box-shadow:
    inset 0 -8px 15px rgba(124,70,37,.13),
    1px 3px 0 rgba(72, 49, 42, .13);
}

.seed-core::before,
.seed-core::after {
  background: #68433a;
  box-shadow: 0 1px 0 rgba(255,255,255,.28);
}

.game-page .companion.live,
.game-page .sprout.live {
  filter:
    drop-shadow(1px 2px 0 rgba(72, 49, 42, .12))
    saturate(.96);
}

.game-page .companion::before,
.sprout {
  border: 1px solid rgba(84, 55, 43, .22);
}

.game-page .skill-row {
  border-radius: 16px 14px 18px 15px;
  transform: rotate(.18deg);
}

.game-page .skill-row button,
.bottom-tabs button,
.game-page .store-item button,
.game-page .quest-item button,
.game-page .state-card button,
.leaderboard-tools button,
.game-page .next-goal-button {
  border: 2px solid rgba(84, 55, 43, .18);
  border-radius: 14px 12px 15px 13px;
  font-family: var(--drawn-font);
  letter-spacing: 0;
  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.45), transparent 24%),
    repeating-linear-gradient(104deg, rgba(126, 87, 59, .04) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(255, 250, 235, .96), rgba(255, 229, 234, .9));
  box-shadow: 1px 2px 0 rgba(72, 49, 42, .12);
}

.game-page .skill-row button:nth-child(1) {
  transform: rotate(-.55deg);
}

.game-page .skill-row button:nth-child(2) {
  transform: rotate(.35deg);
}

.game-page .skill-row button:nth-child(3) {
  transform: rotate(-.18deg);
}

.bottom-tabs {
  border-radius: 17px 15px 18px 16px;
  transform: rotate(-.08deg);
}

.bottom-tabs button[aria-pressed="true"] {
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.42), transparent 23%),
    repeating-linear-gradient(111deg, rgba(255,255,255,.08) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #e97987, #bb5360);
  border-color: rgba(83, 43, 47, .32);
  box-shadow:
    1px 2px 0 rgba(72, 49, 42, .16),
    inset 0 1px 0 rgba(255,255,255,.26);
}

.game-page .pop,
.combo-badge {
  font-family: var(--drawn-font);
  letter-spacing: 0;
}

.spore-pop {
  border: 1px solid rgba(111, 73, 44, .18);
  background:
    radial-gradient(circle at 35% 30%, #fff8dc 0 26%, transparent 27%),
    repeating-linear-gradient(112deg, rgba(126, 87, 59, .05) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #ffe7a8, #f08a98);
}

.tap-ring,
.scene-pulse {
  border-style: dashed;
}

.game-page .tap-ring {
  z-index: 0;
  border-width: 2px;
  border-color: rgba(255, 242, 170, .72);
  box-shadow: 0 0 0 5px rgba(233, 120, 136, .11), 0 0 18px rgba(255, 242, 181, .36);
}

.game-page .tap-ring.hot {
  border-color: rgba(255, 247, 184, .78);
  box-shadow: 0 0 0 7px rgba(233, 120, 136, .16), 0 0 26px rgba(255, 226, 116, .52);
}

.game-page .tap-flash {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 255, 212, .34), transparent 28%),
    radial-gradient(circle at 50% 52%, rgba(233, 120, 136, .1), transparent 43%);
}

@media (max-height: 560px) {
  .game-page .resource-row,
  .game-page .skill-row,
  .bottom-tabs {
    border-width: 1px;
    box-shadow: 1px 1px 0 rgba(72, 49, 42, .1);
  }

  .seed-button::before {
    border-width: 2px;
  }

  .seed-core {
    border-width: 1px;
  }
}

/* Storybook pass: stronger brush texture, drawn outlines, and softer art direction. */
.game-page {
  --storybook-ink: rgba(62, 42, 35, .72);
  --storybook-line: rgba(62, 42, 35, .34);
  --storybook-wash: rgba(255, 249, 224, .72);
  --sky-wash: #c9eafa;
  --grass-wash: #86bd72;
}

body.game-page {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 225, 155, .26), transparent 24%),
    radial-gradient(circle at 82% 22%, rgba(244, 152, 166, .16), transparent 25%),
    radial-gradient(circle at 62% 88%, rgba(123, 181, 117, .28), transparent 28%),
    repeating-linear-gradient(118deg, rgba(255,255,255,.035) 0 1px, transparent 1px 11px),
    linear-gradient(135deg, #232426 0%, #3a302d 45%, #203128 100%);
}

.game-page .phone-frame {
  background:
    radial-gradient(ellipse at 50% 16%, rgba(255, 237, 154, .82), transparent 26%),
    radial-gradient(ellipse at 17% 25%, rgba(255, 255, 255, .54), transparent 17%),
    radial-gradient(ellipse at 82% 27%, rgba(255, 255, 255, .43), transparent 16%),
    radial-gradient(ellipse at 50% 80%, rgba(255, 236, 151, .22), transparent 38%),
    repeating-linear-gradient(7deg, rgba(96, 70, 48, .035) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(93deg, rgba(255,255,255,.05) 0 2px, transparent 2px 15px),
    linear-gradient(180deg, var(--sky-wash) 0 35%, #e5f5cb 36% 61%, var(--grass-wash) 62% 100%);
}

.game-page .phone-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 22%, rgba(72, 49, 42, .07) 0 1px, transparent 1.4px),
    radial-gradient(circle at 66% 14%, rgba(72, 49, 42, .055) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 64%, rgba(72, 49, 42, .045) 0 1px, transparent 1.4px),
    repeating-linear-gradient(84deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(174deg, rgba(82, 59, 38, .035) 0 1px, transparent 1px 13px);
  background-size: 19px 19px, 29px 29px, 23px 23px, 100% 100%, 100% 100%;
  mix-blend-mode: multiply;
  opacity: .74;
}

.game-page .phone-frame::after {
  bottom: 45px;
  height: 43%;
  background:
    radial-gradient(ellipse at 22% 19%, rgba(255, 247, 205, .66), transparent 25%),
    radial-gradient(ellipse at 79% 20%, rgba(217, 244, 193, .72), transparent 28%),
    repeating-linear-gradient(86deg, rgba(63, 122, 70, .2) 0 4px, rgba(255, 230, 157, .14) 4px 11px, rgba(78, 139, 75, .12) 11px 17px),
    repeating-linear-gradient(14deg, rgba(47, 100, 55, .08) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, rgba(190, 228, 145, .96), rgba(78, 139, 84, .86));
  border-radius: 47% 53% 0 0 / 26% 31% 0 0;
  filter: saturate(.93);
}

.game-page .resource-row,
.game-page .skill-row,
.bottom-tabs,
.game-page .store-panel,
.game-page .state-card,
.game-page .leaderboard-tools input {
  position: relative;
  border-color: rgba(62, 42, 35, .28);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.58), transparent 19%),
    radial-gradient(circle at 86% 88%, rgba(255, 216, 156, .22), transparent 25%),
    repeating-linear-gradient(102deg, rgba(111, 75, 49, .045) 0 1px, transparent 1px 8px),
    rgba(255, 250, 231, .78);
  box-shadow:
    1px 2px 0 rgba(62, 42, 35, .16),
    inset 0 1px 0 rgba(255,255,255,.6);
}

.game-page .resource-row::before,
.game-page .skill-row::before,
.bottom-tabs::before,
.game-page .store-panel::before,
.game-page .state-card::before {
  content: "";
  position: absolute;
  inset: -3px -2px -2px -3px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(62, 42, 35, .18);
  border-radius: inherit;
  transform: rotate(.42deg);
}

.game-page .resource-row::after,
.game-page .skill-row::after,
.bottom-tabs::after {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border: 1px dashed rgba(62, 42, 35, .1);
  border-radius: inherit;
}

.game-page .resource-row {
  border-radius: 20px 15px 19px 16px / 17px 21px 16px 19px;
}

.game-page .resource-row div {
  border-radius: 15px 13px 16px 12px / 13px 16px 12px 15px;
  background:
    radial-gradient(circle at 44% 0, rgba(255,255,255,.38), transparent 48%),
    rgba(255,255,255,.12);
}

.game-page .resource-row strong,
.game-page .glade-head strong,
.game-page .section-head h2,
.game-page .state-card strong {
  color: #33231f;
  text-shadow: 1px 1px 0 rgba(255,255,255,.54);
}

.game-page .glade-head strong {
  transform: rotate(-.25deg);
}

.game-page .glade-head em,
.sound-button {
  border-color: rgba(62, 42, 35, .3);
  border-radius: 999px 880px 940px 860px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.5), transparent 30%),
    repeating-linear-gradient(108deg, rgba(105, 72, 48, .052) 0 1px, transparent 1px 7px),
    rgba(255, 250, 231, .84);
}

.sound-button span,
.sound-button span::before {
  background: #8e4b4e;
}

.sound-button span::after {
  border-color: #8e4b4e;
}

.game-page .friend-scene {
  filter: saturate(.9) contrast(.96);
}

.game-page .friend-scene::before {
  inset: auto -20% -6%;
  height: 39%;
  background:
    radial-gradient(ellipse at 22% 15%, rgba(255,255,255,.43), transparent 24%),
    repeating-linear-gradient(83deg, rgba(47, 106, 59, .18) 0 3px, rgba(255, 229, 152, .12) 3px 9px, rgba(83, 146, 78, .12) 9px 15px),
    repeating-linear-gradient(-11deg, rgba(54, 105, 56, .08) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, rgba(191, 229, 147, .94), rgba(79, 139, 83, .78));
  border-top: 0;
  transform: rotate(-.35deg);
}

.game-page .friend-scene::after {
  left: 9%;
  right: 9%;
  bottom: 17%;
  height: 26px;
  opacity: .62;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(62, 42, 35, .18), transparent 62%);
  filter: blur(.2px);
}

.game-page .sky-glow {
  background:
    radial-gradient(ellipse at 50% 43%, rgba(255, 251, 197, .78), transparent 58%),
    repeating-radial-gradient(ellipse at 50% 45%, rgba(255, 240, 160, .12) 0 2px, transparent 2px 12px);
  animation: meadowWashDrift 5.6s ease-in-out infinite alternate;
}

.game-page .sunbeam {
  border-radius: 47% 53% 48% 52%;
  border-color: rgba(148, 99, 39, .3);
  background:
    radial-gradient(circle at 38% 32%, #fff4a9 0 26%, #f7c25d 27% 66%, rgba(244, 171, 76, .62) 67% 100%);
  box-shadow:
    1px 2px 0 rgba(62, 42, 35, .14),
    0 0 32px rgba(255, 218, 102, .42);
}

.game-page .cloud {
  border: 1px solid rgba(62, 42, 35, .12);
  opacity: .82;
  transform: rotate(-1deg);
  filter:
    drop-shadow(1px 1px 0 rgba(62, 42, 35, .11))
    drop-shadow(-1px 0 0 rgba(255,255,255,.42));
}

.game-page .meadow-hill {
  filter:
    drop-shadow(1px 1px 0 rgba(62, 42, 35, .08))
    saturate(.9);
}

.root-ring {
  border: 2px dashed rgba(255, 230, 126, .58);
  background: transparent;
  filter:
    drop-shadow(1px 2px 0 rgba(62, 42, 35, .16))
    drop-shadow(0 0 22px rgba(255, 221, 118, .4));
  mask: none;
  -webkit-mask: none;
}

.root-ring::before,
.root-ring::after {
  border-color: rgba(62, 42, 35, .28);
}

.game-page .friend-scene .seed-button {
  background: transparent;
  box-shadow: none;
  border-radius: 50%;
  filter:
    drop-shadow(2px 4px 0 rgba(62, 42, 35, .15))
    drop-shadow(0 28px 20px rgba(74, 63, 36, .16));
  animation: none;
}

.game-page .friend-scene .seed-button:hover,
.game-page .friend-scene .seed-button:active,
.game-page .friend-scene .seed-button.is-pressed {
  box-shadow: none;
}

.seed-button::before {
  left: 3%;
  top: 6%;
  width: 94%;
  height: 54%;
  border: 3px solid rgba(78, 35, 42, .55);
  border-radius: 48% 53% 39% 43% / 82% 78% 29% 34%;
  background:
    radial-gradient(circle at 18% 61%, #fff8dc 0 7.2%, transparent 8.2%),
    radial-gradient(circle at 32% 28%, #fff4d2 0 5.8%, transparent 6.8%),
    radial-gradient(circle at 49% 18%, #fff9de 0 8.5%, transparent 9.5%),
    radial-gradient(circle at 64% 34%, #fff0c6 0 6%, transparent 7%),
    radial-gradient(circle at 80% 58%, #fff7d9 0 7.3%, transparent 8.5%),
    radial-gradient(ellipse at 35% 6%, rgba(255,255,255,.28), transparent 34%),
    repeating-linear-gradient(166deg, rgba(255,255,255,.11) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(12deg, rgba(78, 35, 42, .08) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, #f56d76 0%, #dc3f4d 56%, #9c2934 100%);
  animation: handDrawnCapBreath 1.7s ease-in-out infinite alternate;
}

.seed-button::after {
  left: 15%;
  top: 48%;
  width: 70%;
  height: 18%;
  border: 2px solid rgba(62, 42, 35, .3);
  border-top: 0;
  border-radius: 0 0 49% 55% / 0 0 94% 88%;
  background:
    repeating-linear-gradient(84deg, rgba(118, 75, 43, .23) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(172deg, rgba(255,255,255,.13) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #fff1d3, #e9b874);
}

.seed-core {
  border: 2px solid rgba(62, 42, 35, .36);
  border-radius: 44% 49% 29% 35% / 46% 44% 29% 32%;
  background:
    radial-gradient(ellipse at 48% 16%, rgba(255,255,255,.62), transparent 42%),
    repeating-linear-gradient(96deg, rgba(116, 75, 43, .09) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #f7d9aa, #e4ad69);
  box-shadow:
    inset 0 -8px 15px rgba(124,70,37,.16),
    1px 3px 0 rgba(62, 42, 35, .16);
}

.seed-core::before,
.seed-core::after {
  background: #59403c;
  box-shadow: 0 1px 0 rgba(255,255,255,.34);
}

.game-page .companion.live,
.game-page .sprout.live {
  filter:
    drop-shadow(1px 2px 0 rgba(62, 42, 35, .14))
    saturate(.9);
}

.game-page .companion::before,
.sprout {
  border-color: rgba(62, 42, 35, .28);
}

.game-page .orchard-visual::before {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -10px;
  height: 42px;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(82deg, transparent 0 8px, rgba(43, 101, 55, .16) 8px 10px, transparent 10px 15px),
    radial-gradient(ellipse at 50% 100%, rgba(255, 229, 157, .2), transparent 66%);
}

.game-page .skill-row button,
.bottom-tabs button,
.game-page .store-item button,
.game-page .quest-item button,
.game-page .state-card button,
.leaderboard-tools button,
.game-page .next-goal-button {
  border-color: rgba(62, 42, 35, .28);
  border-radius: 15px 12px 16px 13px / 13px 16px 12px 15px;
  color: #3c2a25;
  background:
    radial-gradient(circle at 28% 12%, rgba(255,255,255,.54), transparent 22%),
    repeating-linear-gradient(106deg, rgba(111, 75, 49, .052) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(255, 249, 228, .98), rgba(255, 225, 230, .92));
}

.bottom-tabs {
  transform: rotate(-.18deg);
}

.bottom-tabs button[aria-pressed="true"] {
  color: #fff9e5;
  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.42), transparent 25%),
    repeating-linear-gradient(111deg, rgba(255,255,255,.1) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #e77982, #aa4854);
}

.game-page .tap-ring {
  border-color: rgba(255, 241, 168, .76);
  box-shadow:
    0 0 0 5px rgba(231, 116, 130, .12),
    0 0 18px rgba(255, 232, 142, .42);
}

.game-page .tap-flash {
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 255, 209, .3), transparent 30%),
    radial-gradient(circle at 50% 52%, rgba(231, 116, 130, .08), transparent 46%);
}

@keyframes handDrawnCapBreath {
  from { transform: rotate(-.45deg) translateY(1px) scale(.995); }
  to { transform: rotate(.35deg) translateY(-1px) scale(1.005); }
}

@keyframes meadowWashDrift {
  from { opacity: .8; transform: translateX(-2px) scale(.995); }
  to { opacity: 1; transform: translateX(2px) scale(1.01); }
}

/* Game-loop pass: make the numbers honest and the screens feel less like forms. */
body[data-tab="store"] .store-grid {
  grid-template-rows: minmax(0, 1.18fr) minmax(0, .74fr) minmax(0, .82fr);
}

body[data-tab="quests"] .log-grid {
  grid-template-rows: minmax(0, 1.18fr) minmax(0, .82fr);
}

body[data-meadow-tier="2"] .friend-scene {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 246, 186, .56), transparent 29%),
    linear-gradient(180deg, rgba(204, 236, 255, .76) 0 43%, rgba(217, 246, 201, .96) 44% 100%);
}

body[data-meadow-tier="3"] .friend-scene,
body[data-meadow-tier="4"] .friend-scene,
body[data-meadow-tier="5"] .friend-scene {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 238, 150, .62), transparent 29%),
    radial-gradient(circle at 24% 62%, rgba(245, 160, 175, .16), transparent 24%),
    linear-gradient(180deg, rgba(196, 232, 255, .78) 0 41%, rgba(199, 237, 177, .98) 42% 100%);
}

.seed-mouth,
.seed-cheeks {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.seed-mouth {
  left: 45.6%;
  top: 75%;
  width: 9%;
  height: 5%;
  border-bottom: 2px solid rgba(75, 51, 47, .78);
  border-radius: 0 0 999px 999px;
  opacity: .92;
}

.seed-cheeks {
  left: 37%;
  top: 70%;
  width: 26%;
  height: 9%;
  background:
    radial-gradient(circle at 0 50%, rgba(230, 112, 126, .22) 0 20%, transparent 21%),
    radial-gradient(circle at 100% 50%, rgba(230, 112, 126, .22) 0 20%, transparent 21%);
  opacity: 0;
  transform: translateY(1px);
}

body[data-tutorial="sleeping"] .seed-mouth {
  width: 12%;
  border-radius: 999px;
  transform: translateX(-1px) rotate(-1deg);
  opacity: .58;
}

body[data-tutorial="awake"] .seed-mouth,
body[data-tutorial="baby"] .seed-mouth {
  height: 7%;
  border-bottom-width: 2px;
}

body[data-tutorial="root"] .seed-mouth,
body[data-tutorial="friend"] .seed-mouth,
body[data-tutorial="forest"] .seed-mouth {
  left: 43%;
  width: 14%;
  height: 8%;
  border-bottom-width: 3px;
}

body[data-tutorial="root"] .seed-cheeks,
body[data-tutorial="friend"] .seed-cheeks,
body[data-tutorial="forest"] .seed-cheeks {
  opacity: 1;
}

.friend-scene.scene-tapped .seed-mouth {
  animation: mouthPop .24s ease-out;
}

@keyframes mouthPop {
  0% { transform: translateY(0) scaleX(1); }
  50% { transform: translateY(1px) scaleX(1.35); }
  100% { transform: translateY(0) scaleX(1); }
}

.game-page .store-item.garden-card,
.game-page .store-item.charm-card,
.game-page .store-item.mycelium-card {
  grid-template-columns: 52px minmax(0, 1fr) minmax(74px, auto);
  align-items: center;
  min-height: 76px;
}

.game-page .store-item.waiting {
  grid-template-columns: 52px minmax(0, 1fr);
}

.game-page .store-item.recommended {
  border-color: rgba(185, 77, 92, .34);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.62), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(255, 213, 130, .24), transparent 26%),
    rgba(255, 250, 231, .9);
}

.store-visual {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(62, 42, 35, .25);
  border-radius: 45% 55% 48% 52%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.62), transparent 26%),
    linear-gradient(180deg, #f5d59e, #d99a5d);
  box-shadow: 1px 2px 0 rgba(62,42,35,.12), inset 0 1px 0 rgba(255,255,255,.48);
}

.store-visual i {
  position: absolute;
  inset: auto 5px 5px;
  height: 5px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #e97987 var(--progress, 0%), rgba(80, 67, 39, .12) 0);
}

.root-thread {
  background:
    repeating-linear-gradient(120deg, rgba(92, 64, 43, .22) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #ead0a2, #b8794d);
}

.dew-cup {
  background:
    radial-gradient(circle at 50% 30%, #dff9ff 0 20%, transparent 21%),
    linear-gradient(180deg, #a9d98e, #5e9c61);
}

.lantern-cap {
  background:
    radial-gradient(circle at 50% 30%, #fff4a6 0 24%, transparent 25%),
    linear-gradient(180deg, #ef7e8b, #a94350);
}

.friend-burrow {
  background:
    radial-gradient(ellipse at 50% 72%, rgba(87, 56, 38, .52) 0 26%, transparent 27%),
    linear-gradient(180deg, #b8e4cc, #78b17a);
}

.rainleaf-canopy {
  background:
    radial-gradient(ellipse at 50% 34%, #bdeaa8 0 42%, transparent 43%),
    linear-gradient(180deg, #e5c27b, #8bb566);
}

.glowroot-web {
  background:
    repeating-conic-gradient(from 20deg, rgba(255,239,128,.55) 0 8deg, transparent 8deg 22deg),
    linear-gradient(180deg, #73b79b, #4b7868);
}

.moonspore-hollow {
  background:
    radial-gradient(circle at 42% 32%, #fff0a8 0 18%, transparent 19%),
    linear-gradient(180deg, #98a2d8, #565283);
}

.charm-seed {
  background:
    radial-gradient(circle at 45% 34%, #fff4a6 0 20%, transparent 21%),
    linear-gradient(180deg, #f1a2ad, #b94d5c);
}

.mycelium-knot {
  background:
    repeating-radial-gradient(circle at 48% 48%, rgba(255,239,128,.44) 0 3px, transparent 3px 8px),
    linear-gradient(180deg, #ddd0a5, #7ea16d);
}

.store-copy h3,
.friend-copy h3 {
  margin: 0;
}

.store-copy p,
.friend-copy p {
  margin: 3px 0 0;
}

.game-page .friend-card {
  grid-template-columns: 48px minmax(0, 1fr) minmax(72px, auto);
  align-items: center;
  min-height: 108px;
}

.friend-token {
  position: relative;
  display: block;
  width: 39px;
  height: 39px;
  border: 2px solid rgba(62,42,35,.25);
  border-radius: 50% 48% 52% 46%;
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.66), transparent 24%),
    linear-gradient(180deg, #88d2ca, #4d9a96);
  box-shadow: 1px 2px 0 rgba(62,42,35,.13);
}

.friend-token i,
.friend-token::before,
.friend-token::after {
  content: "";
  position: absolute;
}

.friend-token i {
  left: 31%;
  right: 31%;
  bottom: 4px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.44);
}

.friend-token::before,
.friend-token::after {
  top: 46%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #55403a;
}

.friend-token::before { left: 34%; }
.friend-token::after { right: 34%; }

.lantern-moth {
  border-radius: 52% 48% 46% 54%;
  background:
    radial-gradient(ellipse at 30% 48%, rgba(255,240,170,.72) 0 24%, transparent 25%),
    radial-gradient(ellipse at 70% 48%, rgba(255,240,170,.72) 0 24%, transparent 25%),
    linear-gradient(180deg, #d7b1ef, #8d6ab2);
}

.puff-sprite {
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.82) 0 20%, transparent 21%),
    radial-gradient(circle at 63% 32%, rgba(255,255,255,.7) 0 18%, transparent 19%),
    linear-gradient(180deg, #f2a9b5, #ba6070);
}

.game-page .friend-card.ready {
  border-color: rgba(101, 156, 88, .45);
}

.game-page .friend-card.ready button {
  color: #fffdf8;
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.35), transparent 26%),
    linear-gradient(180deg, #83bd74, #4f8d5c);
}

.game-page .leaderboard-empty {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  min-height: 112px;
  padding: 16px;
  text-align: left;
}

.game-page .leaderboard-empty strong {
  display: block;
  font-family: var(--drawn-font);
  color: #3c2a25;
  font-size: 17px;
  line-height: 1.1;
}

.game-page .leaderboard-empty span {
  display: block;
  margin-top: 5px;
  color: #7d635c;
  font-size: 12px;
  line-height: 1.25;
}

body[data-tab="board"] .session-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

body[data-tab="board"] .leaderboard-panel {
  min-height: 0;
}

/* Premium rebuild pass: one painted game stage, fewer panels, no compressed dashboard feel. */
.game-page {
  --premium-ink: rgba(52, 36, 31, .78);
  --premium-line: rgba(52, 36, 31, .22);
  --premium-paper: rgba(255, 252, 238, .82);
  --premium-rose: #d65366;
  --premium-rose-deep: #9f3242;
  --premium-meadow: #6da35e;
  --premium-sun: #ffd976;
}

.game-page .phone-frame {
  background:
    radial-gradient(ellipse at 50% 13%, rgba(255, 236, 145, .86), transparent 25%),
    radial-gradient(ellipse at 18% 24%, rgba(255, 255, 255, .58), transparent 17%),
    radial-gradient(ellipse at 82% 28%, rgba(255, 255, 255, .48), transparent 16%),
    radial-gradient(ellipse at 48% 63%, rgba(255, 222, 150, .26), transparent 33%),
    repeating-linear-gradient(7deg, rgba(77, 53, 38, .03) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #c9ebf8 0 36%, #e6f5cf 37% 61%, #83b970 62% 100%);
}

.game-page .resource-row {
  min-height: 58px;
  padding: 7px 9px;
  border-radius: 17px;
  background:
    radial-gradient(circle at 22% 0, rgba(255,255,255,.76), transparent 30%),
    repeating-linear-gradient(104deg, rgba(88, 58, 43, .035) 0 1px, transparent 1px 8px),
    rgba(255, 252, 238, .8);
  box-shadow:
    0 8px 18px rgba(59, 63, 38, .08),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.game-page .resource-row strong {
  font-size: clamp(19px, 4.7vw, 31px);
}

.game-page .resource-row small {
  margin-top: 3px;
  font-size: 10px;
}

.game-page .glade-stage {
  gap: 5px;
  margin-top: 6px;
  min-height: 0;
}

.game-page .glade-head {
  padding: 0 2px;
}

.game-page .glade-head strong {
  font-size: clamp(18px, 4.7vw, 27px);
}

.game-page .bloom-copy {
  margin-top: -2px;
}

.game-page .friend-scene {
  min-height: 0;
  height: min(55vh, 510px);
  border-radius: 28px 30px 22px 24px / 32px 25px 22px 26px;
  background:
    radial-gradient(ellipse at 48% 33%, rgba(255, 250, 184, .76), transparent 34%),
    radial-gradient(ellipse at 18% 49%, rgba(255, 255, 255, .38), transparent 20%),
    radial-gradient(ellipse at 82% 52%, rgba(255, 255, 255, .28), transparent 18%),
    linear-gradient(180deg, rgba(195, 236, 250, .88) 0 43%, rgba(219, 244, 194, .92) 44% 61%, rgba(117, 176, 99, .92) 62% 100%);
  box-shadow:
    inset 0 -22px 46px rgba(58, 112, 60, .18),
    inset 0 1px 0 rgba(255,255,255,.44);
}

.game-page .friend-scene::before {
  left: -12%;
  right: -12%;
  bottom: -2%;
  height: 42%;
  border-radius: 46% 54% 0 0 / 28% 34% 0 0;
  background:
    radial-gradient(ellipse at 28% 20%, rgba(255, 247, 201, .54), transparent 24%),
    radial-gradient(ellipse at 74% 16%, rgba(203, 239, 186, .62), transparent 27%),
    repeating-linear-gradient(88deg, rgba(54, 110, 61, .24) 0 4px, rgba(255, 232, 158, .16) 4px 10px, rgba(74, 139, 71, .16) 10px 16px),
    repeating-linear-gradient(16deg, rgba(41, 88, 50, .09) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, rgba(186, 225, 139, .98), rgba(72, 136, 82, .9));
  filter: saturate(1.04);
}

.game-page .friend-scene::after {
  left: 20%;
  right: 20%;
  bottom: 22%;
  height: 34px;
  z-index: 2;
  opacity: .76;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(49, 53, 31, .25), transparent 66%);
  filter: blur(.5px);
}

.game-page .sky-glow {
  inset: -6% 0 auto;
  height: 64%;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 246, 166, .86), transparent 39%),
    radial-gradient(ellipse at 50% 54%, rgba(255, 255, 255, .28), transparent 60%);
  opacity: .92;
}

.game-page .sunbeam {
  right: 8%;
  top: 5%;
  width: 66px;
  height: 66px;
  border-width: 0;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.58) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, #ffe08a 0 48%, #efb84f 49% 100%);
  box-shadow: 0 0 38px rgba(255, 218, 100, .52);
}

.game-page .cloud {
  height: 28px;
  opacity: .78;
  border: 0;
  background:
    radial-gradient(ellipse at 22% 55%, rgba(255,255,255,.92) 0 23%, transparent 24%),
    radial-gradient(ellipse at 52% 46%, rgba(255,255,255,.96) 0 31%, transparent 32%),
    radial-gradient(ellipse at 78% 57%, rgba(255,255,255,.9) 0 23%, transparent 24%);
  filter: drop-shadow(0 2px 0 rgba(72, 49, 42, .08));
}

.game-page .meadow-hill {
  opacity: .76;
  filter: blur(.1px) saturate(1.02);
}

.game-page .friend-scene .seed-button {
  width: min(76%, 332px);
  margin-top: 4%;
  transform-origin: 50% 72%;
  filter:
    drop-shadow(2px 5px 0 rgba(52, 36, 31, .13))
    drop-shadow(0 24px 18px rgba(58, 75, 39, .18));
}

.game-page .friend-scene.scene-tapped .seed-button,
.game-page .seed-button.is-pressed {
  animation: premiumTapSquash .3s cubic-bezier(.16, 1.45, .26, 1);
}

.seed-button::before {
  left: 1%;
  top: 8%;
  width: 98%;
  height: 58%;
  z-index: 3;
  border: 3px solid rgba(76, 31, 39, .5);
  border-radius: 49% 53% 36% 39% / 78% 74% 31% 29%;
  background:
    radial-gradient(circle at 20% 59%, #fff7d7 0 8.4%, transparent 9.4%),
    radial-gradient(circle at 35% 33%, #fff3cf 0 6.4%, transparent 7.3%),
    radial-gradient(circle at 51% 22%, #fff9df 0 9.2%, transparent 10.2%),
    radial-gradient(circle at 66% 39%, #fff0c9 0 6.8%, transparent 7.8%),
    radial-gradient(circle at 81% 58%, #fff6d5 0 8%, transparent 9%),
    radial-gradient(ellipse at 35% 9%, rgba(255,255,255,.34), transparent 36%),
    repeating-linear-gradient(166deg, rgba(255,255,255,.1) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(11deg, rgba(85, 29, 39, .055) 0 1px, transparent 1px 13px),
    linear-gradient(180deg, #f4777d 0%, #da4051 58%, #9f2c3b 100%);
  box-shadow:
    inset 0 13px 24px rgba(255,255,255,.23),
    inset 0 -20px 26px rgba(88, 18, 30, .2),
    1px 5px 0 rgba(52, 36, 31, .16);
}

.seed-button::after {
  left: 12%;
  top: 50%;
  width: 76%;
  height: 16%;
  z-index: 4;
  border: 2px solid rgba(84, 55, 43, .26);
  border-top: 0;
  border-radius: 0 0 48% 52% / 0 0 94% 90%;
  background:
    repeating-linear-gradient(89deg, rgba(116, 74, 43, .2) 0 3px, transparent 3px 13px),
    linear-gradient(180deg, #fff3d7, #efc58b);
}

.seed-core {
  left: 35.5%;
  top: 58%;
  width: 29%;
  height: 34%;
  z-index: 5;
  border: 2px solid rgba(84, 55, 43, .34);
  border-radius: 42% 48% 31% 34% / 44% 43% 31% 33%;
  background:
    radial-gradient(ellipse at 48% 14%, rgba(255,255,255,.6), transparent 42%),
    repeating-linear-gradient(93deg, rgba(112, 72, 43, .08) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #f8dbad 0%, #e8b772 100%);
  box-shadow:
    inset 0 -9px 15px rgba(124,70,37,.14),
    1px 4px 0 rgba(52, 36, 31, .14);
}

.seed-core::before,
.seed-core::after {
  top: 43%;
  width: 6px;
  height: 7px;
  background: #573b35;
}

.seed-mouth {
  left: 44.5%;
  top: 76%;
  z-index: 7;
  width: 11%;
  height: 6%;
  border-bottom: 2px solid rgba(75, 51, 47, .82);
}

.seed-cheeks {
  left: 35.5%;
  top: 70.5%;
  z-index: 6;
  width: 29%;
  opacity: .88;
}

.seed-text {
  display: none;
}

.root-ring {
  width: min(84%, 338px);
  opacity: .64;
  filter:
    drop-shadow(0 0 16px rgba(255, 221, 118, .35));
}

.rush-orbit {
  width: min(72%, 292px);
  opacity: .6;
}

.game-page .orchard-visual .sprout:not(.live),
.game-page .companion:not(.live) {
  opacity: 0;
}

.game-page .orchard-visual {
  bottom: 9%;
  opacity: .72;
}

.game-page .sprout.live:nth-child(3n) { transform: translateY(2px) rotate(-5deg); }
.game-page .sprout.live:nth-child(3n + 1) { transform: translateY(-1px) rotate(4deg); }
.game-page .sprout.live:nth-child(3n + 2) { transform: translateY(1px) rotate(1deg); }

.game-page .skill-row {
  gap: 6px;
  margin-top: 7px;
  padding: 4px;
  border-radius: 17px;
}

.game-page .skill-row button {
  min-height: 39px;
  font-size: 12px;
}

body[data-tab="store"] .store-grid {
  grid-template-rows: minmax(0, 1fr) 74px 88px;
  gap: 8px;
}

body[data-tab="quests"] .log-grid,
body[data-tab="board"] .log-grid {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

body[data-tab="quests"] .badges-panel,
body[data-tab="quests"] .session-panel,
body[data-tab="quests"] .leaderboard-panel,
body[data-tab="board"] .quest-panel,
body[data-tab="board"] .badges-panel,
body[data-tab="board"] .session-panel {
  display: none;
}

.game-page .store-panel {
  padding: 10px;
  border-radius: 17px;
  overflow: hidden;
}

.game-page .section-head {
  margin-bottom: 7px;
}

.game-page .section-head h2 {
  font-size: clamp(20px, 5.3vw, 29px);
  line-height: 1;
}

.game-page .section-head span {
  font-size: 9px;
  letter-spacing: .04em;
}

.game-page .store-list,
.game-page .quest-list,
.game-page .achievement-list,
.game-page .leaderboard-list {
  gap: 8px;
}

.game-page .store-item.garden-card {
  grid-template-columns: 45px minmax(0, 1fr) minmax(75px, auto);
  min-height: 82px;
  padding: 9px;
}

.game-page .store-item.garden-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11px;
}

.game-page .store-item.garden-card .owned,
.game-page .friend-card .owned {
  font-size: 10px;
}

.game-page .charms-panel .store-item,
.game-page .perks-panel .store-item {
  min-height: 0;
  height: 100%;
  grid-template-columns: 39px minmax(0, 1fr);
  padding: 9px;
}

.game-page .charms-panel .store-item button,
.game-page .perks-panel .store-item button {
  grid-column: 1 / -1;
  min-height: 30px;
  margin-top: 3px;
}

.game-page .charms-panel .store-item h3,
.game-page .perks-panel .store-item h3 {
  font-size: 13px;
}

.game-page .charms-panel .store-item p,
.game-page .perks-panel .store-item p {
  margin-top: 1px;
  font-size: 10.5px;
  line-height: 1.18;
}

.game-page .charms-panel .owned,
.game-page .perks-panel .owned {
  display: none;
}

.game-page .store-visual {
  width: 36px;
  height: 36px;
}

.game-page .quest-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.game-page .quest-list {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  min-height: 0;
}

.game-page .friend-card {
  grid-template-columns: 70px minmax(0, 1fr) minmax(72px, auto);
  min-height: 0;
  padding: 10px;
}

.game-page .friend-token {
  width: 58px;
  height: 58px;
}

.game-page .friend-copy h3 {
  font-size: 16px;
}

.game-page .friend-copy p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11px;
}

.game-page .mini-progress {
  margin-top: 5px;
}

.game-page .friend-card button {
  min-height: 36px;
  padding: 0 12px;
}

.game-page .leaderboard-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  padding: 11px;
}

.game-page .leaderboard-tools {
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 7px;
  margin-bottom: 9px;
}

.game-page .leaderboard-empty {
  min-height: 0;
  height: 100%;
  align-content: end;
  padding: 22px 18px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 24%, rgba(255, 241, 162, .56), transparent 30%),
    radial-gradient(ellipse at 50% 78%, rgba(88, 136, 82, .18), transparent 44%),
    repeating-linear-gradient(90deg, rgba(68, 118, 70, .08) 0 4px, transparent 4px 13px),
    rgba(255, 252, 236, .64);
}

.game-page .leaderboard-empty::before {
  content: "";
  display: block;
  width: 88px;
  height: 112px;
  margin: 0 auto 18px;
  border-radius: 44px 44px 16px 16px / 56px 56px 14px 14px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.62) 0 15%, transparent 16%),
    radial-gradient(circle at 50% 22%, #ffd976 0 34%, transparent 35%),
    linear-gradient(180deg, #b3d093 0 52%, #7fa869 53% 100%);
  box-shadow:
    inset 0 -10px 0 rgba(67, 104, 58, .16),
    0 8px 0 rgba(52, 36, 31, .1);
}

@keyframes premiumTapSquash {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translateY(7px) scaleX(1.055) scaleY(.92); }
  68% { transform: translateY(-5px) scaleX(.975) scaleY(1.045); }
  100% { transform: translateY(0) scale(1); }
}

@media (max-height: 700px) {
  .game-page .friend-scene {
    height: min(50vh, 360px);
  }

  .game-page .friend-scene .seed-button {
    width: min(58%, 228px);
  }

  body[data-tab="store"] .store-grid {
    grid-template-rows: minmax(0, 1fr) 62px 74px;
    gap: 6px;
  }

  .game-page .store-item.garden-card {
    min-height: 66px;
    padding: 7px;
  }

  .game-page .store-item.garden-card p,
  .game-page .friend-copy p {
    -webkit-line-clamp: 1;
  }

  .game-page .friend-card {
    grid-template-columns: 54px minmax(0, 1fr) minmax(62px, auto);
    padding: 7px;
  }

  .game-page .friend-token {
    width: 44px;
    height: 44px;
  }
}

/* Premium correction: no boxed stage and no clipped submenu cards. */
.game-page .friend-scene {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.game-page .friend-scene::before {
  left: -16%;
  right: -16%;
  bottom: -4%;
}

body[data-tab="store"] .store-grid {
  grid-template-rows: minmax(0, 1fr) 54px 58px;
}

.game-page .colony-panel .store-list {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.game-page .colony-panel .store-list:has(.garden-card + .garden-card) {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card {
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: 13px;
  padding: 22px 24px;
}

.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card .store-visual {
  width: 104px;
  height: 104px;
  border-width: 3px;
  box-shadow:
    2px 5px 0 rgba(52, 36, 31, .12),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card .store-copy {
  max-width: 235px;
}

.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card h3 {
  font-size: 19px;
}

.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card p {
  display: block;
  font-size: 12px;
  line-height: 1.25;
}

.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card button {
  min-width: 154px;
}

.game-page .charms-panel,
.game-page .perks-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.game-page .charms-panel .section-head,
.game-page .perks-panel .section-head {
  width: 100%;
  margin: 0;
}

.game-page .charms-panel .store-list,
.game-page .perks-panel .store-list {
  display: none;
}

.game-page .charms-panel .section-head::after {
  content: "wake after roots";
}

.game-page .perks-panel .section-head::after {
  content: "reset season";
}

.game-page .charms-panel .section-head::after,
.game-page .perks-panel .section-head::after {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(84, 55, 43, .16);
  border-radius: 999px;
  color: rgba(72, 49, 42, .68);
  background: rgba(255, 252, 238, .58);
  font-size: 10px;
  font-weight: 850;
}

.game-page .store-list,
.game-page .quest-list,
.game-page .leaderboard-list,
.game-page .achievement-list,
.game-page .stat-list {
  overflow: hidden;
}

@media (max-height: 700px) {
  body[data-tab="store"] .store-grid {
    grid-template-rows: minmax(0, 1fr) 48px 52px;
  }
}

/* Screenshot fix: phone-frame typography and character composition must not scale from desktop viewport width. */
.game-page .resource-row {
  min-height: 55px;
  padding: 6px 8px;
}

.game-page .resource-row strong {
  font-size: 26px;
  line-height: .95;
  letter-spacing: 0;
}

.game-page .resource-row small {
  font-size: 9.5px;
  line-height: 1.05;
}

.game-page .next-goal-button {
  min-height: 21px;
  font-size: 8.8px;
  line-height: 1;
}

.game-page .metric-label {
  font-size: 9px;
  letter-spacing: .03em;
}

.game-page .glade-head strong {
  display: block;
  max-width: 255px;
  font-size: 28px;
  line-height: 1.02;
  letter-spacing: 0;
}

.game-page .glade-head em {
  font-size: 11px;
}

.game-page .bloom-copy small {
  font-size: 11px;
}

.game-page .friend-scene {
  height: min(48vh, 440px);
  min-height: 330px;
}

.game-page .friend-scene .seed-button {
  width: min(62%, 258px);
  margin-top: -2%;
  transform: translateY(-10px);
}

.game-page .friend-scene.scene-tapped .seed-button,
.game-page .seed-button.is-pressed {
  animation: premiumTapSquashContained .3s cubic-bezier(.16, 1.45, .26, 1);
}

.seed-button::before {
  top: 7%;
}

.seed-core {
  top: 57%;
}

.seed-mouth {
  top: 75%;
}

.game-page .skill-row {
  margin-top: 6px;
}

@keyframes premiumTapSquashContained {
  0% { transform: translateY(-10px) scale(1); }
  38% { transform: translateY(-4px) scaleX(1.045) scaleY(.93); }
  68% { transform: translateY(-15px) scaleX(.98) scaleY(1.035); }
  100% { transform: translateY(-10px) scale(1); }
}

@media (max-height: 700px) {
  .game-page .resource-row strong {
    font-size: 22px;
  }

  .game-page .glade-head strong {
    font-size: 22px;
    max-width: 210px;
  }

  .game-page .friend-scene {
    height: min(45vh, 330px);
    min-height: 230px;
  }

  .game-page .friend-scene .seed-button {
    width: min(48%, 190px);
    transform: translateY(-6px);
  }
}

/* Long-play pass: environment art, late-game garden icons, and tap feedback for thousands of clicks. */
.scene-decor {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
  opacity: .86;
  filter:
    drop-shadow(1px 2px 0 rgba(62, 42, 35, .12))
    saturate(.98);
}

.decor-a {
  left: 11%;
  bottom: 28%;
  width: 38px;
  height: 46px;
  border-radius: 50% 50% 14px 14px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.76) 0 15%, transparent 16%),
    radial-gradient(circle at 50% 28%, #ffd871 0 38%, transparent 39%),
    linear-gradient(180deg, #94c982 0 55%, #6fa95f 56% 100%);
}

.decor-b {
  right: 13%;
  bottom: 34%;
  width: 28px;
  height: 36px;
  border-radius: 999px 999px 10px 10px;
  background:
    radial-gradient(circle at 50% 28%, #fff6bc 0 24%, transparent 25%),
    linear-gradient(180deg, #f2929c 0 52%, #c34859 53% 100%);
}

.decor-c {
  left: 23%;
  bottom: 22%;
  width: 54px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 28% 50%, rgba(255,255,255,.62), transparent 30%),
    linear-gradient(180deg, rgba(139, 199, 119, .86), rgba(90, 151, 88, .74));
}

.decor-d {
  right: 26%;
  bottom: 20%;
  width: 48px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 66% 42%, rgba(255,255,255,.5), transparent 34%),
    linear-gradient(180deg, rgba(178, 218, 135, .86), rgba(99, 154, 82, .72));
}

body[data-click-stage="0"] .decor-b,
body[data-click-stage="0"] .decor-c,
body[data-click-stage="0"] .decor-d,
body[data-click-stage="1"] .decor-c,
body[data-click-stage="1"] .decor-d {
  opacity: 0;
}

body[data-click-stage="0"] .decor-a,
body[data-click-stage="1"] .decor-a {
  opacity: .42;
  transform: scale(.72);
}

body[data-biome="lantern"] .friend-scene,
body[data-biome="glow"] .friend-scene,
body[data-biome="star"] .friend-scene,
body[data-biome="moon"] .friend-scene {
  background:
    radial-gradient(ellipse at 50% 25%, rgba(255, 229, 140, .34), transparent 35%),
    linear-gradient(180deg, rgba(153, 195, 222, .68) 0 42%, rgba(185, 224, 175, .8) 43% 62%, rgba(93, 149, 91, .72) 63% 100%);
}

body[data-biome="rain"] .friend-scene,
body[data-biome="brook"] .friend-scene,
body[data-biome="cloud"] .friend-scene {
  background:
    repeating-linear-gradient(102deg, rgba(255,255,255,.18) 0 1px, transparent 1px 15px),
    radial-gradient(ellipse at 50% 32%, rgba(217, 244, 255, .55), transparent 42%),
    linear-gradient(180deg, rgba(174, 221, 239, .72) 0 44%, rgba(190, 231, 183, .82) 45% 62%, rgba(85, 146, 100, .76) 63% 100%);
}

body[data-biome="honey"] .friend-scene,
body[data-biome="velvet"] .friend-scene {
  background:
    radial-gradient(ellipse at 48% 31%, rgba(255, 230, 145, .48), transparent 38%),
    radial-gradient(ellipse at 18% 66%, rgba(244, 132, 154, .18), transparent 26%),
    radial-gradient(ellipse at 82% 64%, rgba(255, 200, 110, .18), transparent 25%),
    linear-gradient(180deg, rgba(207, 232, 223, .72) 0 43%, rgba(223, 238, 176, .82) 44% 62%, rgba(105, 159, 92, .76) 63% 100%);
}

body[data-biome="crystal"] .friend-scene,
body[data-biome="aurora"] .friend-scene,
body[data-biome="ancient"] .friend-scene {
  background:
    radial-gradient(ellipse at 50% 32%, rgba(211, 255, 232, .42), transparent 36%),
    radial-gradient(ellipse at 26% 53%, rgba(191, 150, 255, .16), transparent 26%),
    radial-gradient(ellipse at 74% 50%, rgba(111, 224, 218, .18), transparent 26%),
    linear-gradient(180deg, rgba(181, 219, 235, .74) 0 43%, rgba(194, 232, 194, .82) 44% 62%, rgba(82, 139, 94, .76) 63% 100%);
}

body[data-biome="lantern"] .decor-a,
body[data-biome="glow"] .decor-a,
body[data-biome="star"] .decor-a,
body[data-biome="moon"] .decor-a,
body[data-biome="aurora"] .decor-a {
  width: 16px;
  height: 16px;
  bottom: 55%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8b4 0 34%, rgba(255, 214, 96, .52) 35% 66%, transparent 67%);
  box-shadow:
    42px 18px 0 -3px rgba(255, 239, 155, .72),
    96px -14px 0 -4px rgba(255, 239, 155, .58),
    210px 24px 0 -5px rgba(255, 239, 155, .64);
  animation: fireflyFloat 2.4s ease-in-out infinite alternate;
}

body[data-biome="brook"] .decor-a,
body[data-biome="rain"] .decor-a,
body[data-biome="cloud"] .decor-a {
  left: 9%;
  right: 9%;
  bottom: 23%;
  width: auto;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 34% 52%, rgba(255,255,255,.7), transparent 30%),
    linear-gradient(180deg, rgba(169, 224, 222, .68), rgba(94, 165, 164, .4));
  box-shadow: none;
  animation: waterShimmer 2.6s ease-in-out infinite alternate;
}

body[data-biome="crystal"] .decor-b,
body[data-biome="aurora"] .decor-b,
body[data-biome="ancient"] .decor-b {
  right: 12%;
  bottom: 27%;
  width: 34px;
  height: 58px;
  border-radius: 48% 52% 14% 16% / 70% 70% 18% 18%;
  background:
    linear-gradient(130deg, rgba(255,255,255,.68), transparent 32%),
    linear-gradient(180deg, #bdf3e6, #7d8bdb 52%, #5d679d);
  box-shadow:
    -72px 24px 0 -10px rgba(153, 216, 218, .58),
    0 0 28px rgba(171, 248, 230, .44);
}

body[data-biome="honey"] .decor-b,
body[data-biome="velvet"] .decor-b {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff6b9 0 20%, transparent 21%),
    conic-gradient(from 20deg, #f39aa7 0 18%, #ffd680 18% 36%, #f39aa7 36% 54%, #ffd680 54% 72%, #f39aa7 72% 100%);
  animation: flowerNod 1.8s ease-in-out infinite alternate;
}

body[data-click-stage="4"] .decor-c,
body[data-click-stage="5"] .decor-c,
body[data-click-stage="6"] .decor-c,
body[data-click-stage="7"] .decor-c,
body[data-click-stage="8"] .decor-c,
body[data-click-stage="9"] .decor-c,
body[data-click-stage="10"] .decor-c,
body[data-click-stage="11"] .decor-c,
body[data-click-stage="12"] .decor-c,
body[data-click-stage="13"] .decor-c,
body[data-click-stage="14"] .decor-c,
body[data-click-stage="15"] .decor-c,
body[data-click-stage="16"] .decor-c {
  box-shadow:
    56px -8px 0 -6px rgba(255, 245, 176, .72),
    122px 2px 0 -8px rgba(255, 245, 176, .62);
}

.bellcap-choir {
  background:
    radial-gradient(circle at 50% 27%, #fff4a8 0 23%, transparent 24%),
    radial-gradient(ellipse at 50% 70%, rgba(127, 76, 45, .34) 0 24%, transparent 25%),
    linear-gradient(180deg, #f0a4a6, #a84658);
}

.dreamspring-pool {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.72) 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 63%, #9adbd9 0 43%, transparent 44%),
    linear-gradient(180deg, #bdd5ff, #5e91a6);
}

.starcap-observatory {
  background:
    radial-gradient(circle at 45% 27%, #fff3a7 0 13%, transparent 14%),
    radial-gradient(circle at 66% 38%, #fff8c8 0 8%, transparent 9%),
    linear-gradient(180deg, #9ea8da, #525781);
}

.aurora-rootway {
  background:
    repeating-conic-gradient(from 12deg, rgba(194, 255, 225, .66) 0 9deg, rgba(190, 158, 255, .42) 9deg 18deg, transparent 18deg 28deg),
    linear-gradient(180deg, #86cab3, #5d719f);
}

.heartwood-grove {
  background:
    radial-gradient(circle at 50% 28%, #ffe5a7 0 20%, transparent 21%),
    repeating-linear-gradient(94deg, rgba(73, 43, 29, .22) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #c99d68, #735139);
}

.game-page .friend-scene .seed-button {
  will-change: transform;
}

.game-page .friend-scene.scene-tapped .seed-button,
.game-page .seed-button.is-pressed {
  animation: longplayMushroomBounce .38s cubic-bezier(.13, 1.55, .22, 1);
}

.game-page .seed-button.is-pressed::before {
  animation: longplayCapSnap .38s cubic-bezier(.13, 1.55, .22, 1);
}

.game-page .seed-button.is-pressed::after {
  animation: longplayGillGlow .38s ease-out;
}

.game-page .seed-button.is-pressed .seed-core {
  animation: longplayStemSpring .38s cubic-bezier(.13, 1.55, .22, 1);
}

.game-page .seed-button.is-pressed .seed-cheeks {
  animation: longplayCheekPop .38s ease-out;
}

.friend-scene.scene-tapped .root-ring {
  animation: longplayRingPing .42s ease-out;
}

.friend-scene.scene-tapped .scene-decor {
  animation: decorJump .34s ease-out;
}

.tap-petal {
  position: absolute;
  z-index: 8;
  width: 8px;
  height: 12px;
  border-radius: 60% 40% 60% 40%;
  pointer-events: none;
  background:
    radial-gradient(circle at 38% 22%, rgba(255,255,255,.74), transparent 30%),
    linear-gradient(180deg, #fff0a3, #f19aa8);
  transform: translate(-50%, -50%);
  animation: tapPetal .62s cubic-bezier(.18, .88, .26, 1) forwards;
}

.tap-petal.petal-1 { background: linear-gradient(180deg, #d7fff0, #89cfb0); }
.tap-petal.petal-2 { background: linear-gradient(180deg, #fff6c1, #f4c466); }
.tap-petal.petal-3 { background: linear-gradient(180deg, #f0dcff, #b49be3); }

@keyframes longplayMushroomBounce {
  0% { transform: translateY(-10px) scale(1); filter: brightness(1); }
  26% { transform: translateY(-2px) scaleX(1.065) scaleY(.9); filter: brightness(1.08); }
  52% { transform: translateY(-18px) scaleX(.965) scaleY(1.07); }
  76% { transform: translateY(-7px) scaleX(1.015) scaleY(.985); }
  100% { transform: translateY(-10px) scale(1); filter: brightness(1); }
}

@keyframes longplayCapSnap {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  32% { transform: translateY(7px) rotate(-1deg) scaleX(1.04) scaleY(.9); }
  62% { transform: translateY(-6px) rotate(1deg) scaleX(.98) scaleY(1.08); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes longplayGillGlow {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.18) saturate(1.12); }
  100% { filter: brightness(1); }
}

@keyframes longplayStemSpring {
  0% { transform: translateY(0) scale(1); }
  34% { transform: translateY(7px) scaleX(1.08) scaleY(.88); }
  66% { transform: translateY(-5px) scaleX(.96) scaleY(1.08); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes longplayCheekPop {
  0% { opacity: .74; transform: scale(.92); }
  34% { opacity: 1; transform: scale(1.14); }
  100% { opacity: .88; transform: scale(1); }
}

@keyframes longplayRingPing {
  0% { opacity: .9; transform: translate(-50%, -50%) scale(.94); }
  68% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: .64; transform: translate(-50%, -50%) scale(1); }
}

@keyframes tapPetal {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.45) rotate(0deg); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.08) rotate(var(--turn)); }
}

@keyframes decorJump {
  0% { transform: translateY(0) scale(1); }
  44% { transform: translateY(-6px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes fireflyFloat {
  from { transform: translateY(0) translateX(-2px); opacity: .58; }
  to { transform: translateY(-8px) translateX(4px); opacity: .95; }
}

@keyframes waterShimmer {
  from { transform: translateX(-2px) scaleX(.98); opacity: .58; }
  to { transform: translateX(4px) scaleX(1.02); opacity: .86; }
}

@keyframes flowerNod {
  from { transform: rotate(-4deg) translateY(1px); }
  to { transform: rotate(5deg) translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .tap-petal,
  .scene-decor,
  .game-page .seed-button.is-pressed::before,
  .game-page .seed-button.is-pressed::after,
  .game-page .seed-button.is-pressed .seed-core,
  .game-page .seed-button.is-pressed .seed-cheeks,
  .friend-scene.scene-tapped .root-ring {
    animation-duration: .01ms;
  }
}

/* Immersion polish: painterly stage, living ambience, and tactile character feedback. */
.game-page .glade-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 19%, rgba(255, 248, 198, .66), transparent 35%),
    radial-gradient(ellipse at 17% 70%, rgba(169, 220, 151, .34), transparent 32%),
    radial-gradient(ellipse at 83% 68%, rgba(239, 197, 130, .2), transparent 33%),
    linear-gradient(180deg, rgba(226, 245, 246, .8) 0 43%, rgba(221, 242, 185, .82) 44% 64%, rgba(123, 180, 102, .7) 65% 100%);
  box-shadow: none;
}

.game-page .glade-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(169deg, rgba(84, 64, 50, .028) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(8deg, rgba(255, 255, 255, .11) 0 1px, transparent 1px 15px),
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.28), transparent 44%);
  mix-blend-mode: multiply;
  opacity: .75;
}

.game-page .glade-stage > * {
  position: relative;
  z-index: 1;
}

body[data-biome="lantern"] .game-page .glade-stage,
body[data-biome="glow"] .game-page .glade-stage {
  background:
    radial-gradient(ellipse at 50% 23%, rgba(255, 225, 133, .64), transparent 34%),
    radial-gradient(ellipse at 18% 70%, rgba(255, 188, 110, .18), transparent 30%),
    radial-gradient(ellipse at 83% 68%, rgba(99, 186, 132, .2), transparent 30%),
    linear-gradient(180deg, rgba(169, 204, 217, .86) 0 43%, rgba(185, 223, 177, .84) 44% 64%, rgba(85, 145, 86, .74) 65% 100%);
}

body[data-biome="star"] .game-page .glade-stage,
body[data-biome="moon"] .game-page .glade-stage {
  background:
    radial-gradient(ellipse at 52% 18%, rgba(255, 247, 185, .48), transparent 28%),
    radial-gradient(ellipse at 17% 66%, rgba(164, 177, 225, .26), transparent 32%),
    radial-gradient(ellipse at 84% 64%, rgba(210, 179, 255, .2), transparent 32%),
    linear-gradient(180deg, rgba(146, 178, 205, .9) 0 43%, rgba(176, 211, 174, .84) 44% 64%, rgba(74, 127, 93, .76) 65% 100%);
}

body[data-biome="rain"] .game-page .glade-stage,
body[data-biome="brook"] .game-page .glade-stage,
body[data-biome="cloud"] .game-page .glade-stage {
  background:
    repeating-linear-gradient(103deg, rgba(255,255,255,.18) 0 1px, transparent 1px 16px),
    radial-gradient(ellipse at 50% 28%, rgba(222, 247, 255, .66), transparent 38%),
    radial-gradient(ellipse at 19% 70%, rgba(123, 203, 187, .28), transparent 31%),
    linear-gradient(180deg, rgba(176, 222, 235, .9) 0 43%, rgba(194, 230, 186, .86) 44% 64%, rgba(86, 151, 107, .76) 65% 100%);
}

body[data-biome="honey"] .game-page .glade-stage,
body[data-biome="velvet"] .game-page .glade-stage {
  background:
    radial-gradient(ellipse at 50% 21%, rgba(255, 229, 139, .68), transparent 34%),
    radial-gradient(ellipse at 14% 69%, rgba(243, 143, 155, .26), transparent 31%),
    radial-gradient(ellipse at 85% 67%, rgba(255, 194, 110, .24), transparent 32%),
    linear-gradient(180deg, rgba(219, 232, 219, .88) 0 43%, rgba(226, 237, 177, .86) 44% 64%, rgba(111, 158, 87, .76) 65% 100%);
}

body[data-biome="crystal"] .game-page .glade-stage,
body[data-biome="aurora"] .game-page .glade-stage,
body[data-biome="ancient"] .game-page .glade-stage {
  background:
    radial-gradient(ellipse at 52% 20%, rgba(210, 255, 231, .58), transparent 34%),
    radial-gradient(ellipse at 17% 67%, rgba(179, 145, 255, .24), transparent 31%),
    radial-gradient(ellipse at 85% 66%, rgba(92, 224, 207, .22), transparent 33%),
    linear-gradient(180deg, rgba(180, 211, 224, .9) 0 43%, rgba(190, 225, 188, .86) 44% 64%, rgba(78, 133, 92, .77) 65% 100%);
}

body[data-biome] .game-page .friend-scene {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.game-page .friend-scene::before {
  inset: auto -28% -5%;
  height: 41%;
  border-radius: 55% 55% 0 0;
  background:
    radial-gradient(ellipse at 49% 11%, rgba(255,255,255,.38), transparent 22%),
    repeating-linear-gradient(90deg, rgba(66, 124, 70, .16) 0 7px, rgba(255, 236, 166, .1) 7px 15px),
    linear-gradient(180deg, rgba(181, 224, 139, .92), rgba(78, 142, 82, .78));
  filter: saturate(1.08);
}

.game-page .friend-scene::after {
  left: 18%;
  right: 18%;
  bottom: 18%;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(65, 76, 43, .22), transparent 70%);
  opacity: .62;
  filter: blur(.4px);
}

.canopy-shadow,
.scene-mist,
.scene-sparkle {
  position: absolute;
  pointer-events: none;
}

.canopy-shadow {
  left: -8%;
  right: -8%;
  top: -5%;
  z-index: 1;
  height: 28%;
  background:
    radial-gradient(ellipse at 18% 10%, rgba(77, 128, 79, .18), transparent 34%),
    radial-gradient(ellipse at 82% 4%, rgba(82, 136, 92, .16), transparent 33%),
    radial-gradient(ellipse at 51% -4%, rgba(255, 243, 170, .4), transparent 35%);
  filter: blur(.15px);
  opacity: .88;
}

.scene-mist {
  z-index: 2;
  width: 54%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.48), transparent 68%);
  opacity: .42;
  filter: blur(8px);
  animation: mistDrift 7.5s ease-in-out infinite alternate;
}

.mist-a {
  left: -5%;
  top: 35%;
}

.mist-b {
  right: -10%;
  top: 52%;
  width: 62%;
  opacity: .28;
  animation-duration: 9s;
  animation-direction: alternate-reverse;
}

.scene-sparkle {
  z-index: 4;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf0 0 34%, rgba(255, 222, 118, .7) 35% 68%, transparent 69%);
  box-shadow:
    34px 19px 0 -2px rgba(255, 246, 188, .72),
    83px -14px 0 -3px rgba(255, 246, 188, .56),
    142px 21px 0 -4px rgba(255, 246, 188, .62);
  animation: sparkleBreath 2.8s ease-in-out infinite alternate;
}

.sparkle-a {
  left: 16%;
  top: 23%;
}

.sparkle-b {
  right: 24%;
  top: 31%;
  animation-duration: 3.4s;
  transform: scale(.78);
}

.sparkle-c {
  left: 37%;
  top: 58%;
  animation-duration: 2.35s;
  opacity: .66;
  transform: scale(.62);
}

body[data-biome="rain"] .scene-sparkle,
body[data-biome="brook"] .scene-sparkle,
body[data-biome="cloud"] .scene-sparkle {
  background: radial-gradient(circle, #f8ffff 0 34%, rgba(130, 212, 224, .66) 35% 68%, transparent 69%);
  box-shadow:
    42px 20px 0 -2px rgba(215, 249, 255, .64),
    88px -9px 0 -3px rgba(215, 249, 255, .5),
    152px 23px 0 -4px rgba(215, 249, 255, .56);
}

body[data-biome="crystal"] .scene-sparkle,
body[data-biome="aurora"] .scene-sparkle,
body[data-biome="ancient"] .scene-sparkle {
  background: radial-gradient(circle, #ffffff 0 32%, rgba(192, 255, 232, .66) 33% 64%, transparent 65%);
  box-shadow:
    38px 17px 0 -2px rgba(205, 255, 238, .62),
    87px -12px 0 -3px rgba(205, 196, 255, .52),
    150px 20px 0 -4px rgba(142, 238, 229, .56);
}

.game-page .friend-scene .seed-button {
  animation: none;
  transform-origin: 50% 78%;
  filter:
    drop-shadow(2px 5px 0 rgba(52, 36, 31, .12))
    drop-shadow(0 30px 18px rgba(56, 73, 39, .19));
}

.game-page .friend-scene.scene-tapped .seed-button,
.game-page .seed-button.is-pressed {
  animation: immersionMushroomTap .5s cubic-bezier(.12, 1.5, .22, 1);
}

.game-page .seed-button::before {
  border-color: rgba(82, 35, 42, .54);
  background:
    radial-gradient(circle at 18% 59%, #fff8de 0 8.6%, transparent 9.5%),
    radial-gradient(circle at 34% 32%, #fff3d3 0 6.2%, transparent 7.2%),
    radial-gradient(circle at 51% 21%, #fffbe4 0 9.5%, transparent 10.5%),
    radial-gradient(circle at 66% 39%, #fff1ce 0 6.8%, transparent 7.9%),
    radial-gradient(circle at 82% 59%, #fff7d8 0 8.3%, transparent 9.3%),
    radial-gradient(ellipse at 31% 11%, rgba(255,255,255,.46), transparent 35%),
    radial-gradient(ellipse at 72% 78%, rgba(90, 20, 31, .23), transparent 39%),
    repeating-linear-gradient(166deg, rgba(255,255,255,.12) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(12deg, rgba(83, 30, 38, .06) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, #f78588 0%, #da4252 58%, #932a39 100%);
  box-shadow:
    inset 0 16px 26px rgba(255,255,255,.24),
    inset 0 -25px 28px rgba(83, 18, 29, .22),
    2px 6px 0 rgba(52, 36, 31, .16);
  animation: capAmbientBreath 4.2s ease-in-out infinite;
}

.game-page .seed-button::after {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255,255,255,.46), transparent 36%),
    repeating-linear-gradient(89deg, rgba(116, 74, 43, .23) 0 3px, transparent 3px 12px),
    linear-gradient(180deg, #fff5db, #edc287);
  box-shadow:
    inset 0 -8px 10px rgba(131, 82, 40, .12),
    0 3px 0 rgba(52, 36, 31, .12);
}

.game-page .seed-core {
  background:
    radial-gradient(ellipse at 47% 12%, rgba(255,255,255,.66), transparent 43%),
    radial-gradient(ellipse at 50% 82%, rgba(126, 75, 39, .18), transparent 44%),
    repeating-linear-gradient(93deg, rgba(112, 72, 43, .1) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #f9dfb6 0%, #e6b16d 100%);
  box-shadow:
    inset 0 -10px 15px rgba(124,70,37,.16),
    1px 5px 0 rgba(52, 36, 31, .14);
}

.friend-scene.scene-tapped .root-ring {
  animation: immersionRingPing .5s ease-out;
}

.friend-scene.scene-tapped .canopy-shadow {
  animation: canopyWake .52s ease-out;
}

.friend-scene.scene-tapped .scene-mist {
  animation: mistTap .62s ease-out;
}

.friend-scene.scene-tapped .scene-sparkle {
  animation: sparklePop .48s ease-out;
}

.tap-ring,
.game-page .tap-ring {
  width: 20px;
  height: 20px;
  border: 0;
  background:
    radial-gradient(circle, rgba(255,255,255,.85) 0 22%, rgba(255, 235, 147, .5) 23% 43%, transparent 44%),
    conic-gradient(from 0deg, rgba(255, 238, 147, .95), rgba(255, 145, 156, .8), rgba(177, 240, 197, .8), rgba(255, 238, 147, .95));
  box-shadow: 0 0 24px rgba(255, 220, 117, .42);
  animation: immersionTapRing .62s ease-out forwards;
}

.tap-petal {
  box-shadow: 0 3px 0 rgba(52, 36, 31, .08);
  filter: saturate(1.12);
}

.scene-pulse,
.game-page .scene-pulse {
  background: radial-gradient(circle, rgba(255, 244, 170, .42) 0 12%, rgba(255, 207, 121, .2) 13% 36%, transparent 37%);
  animation: immersionScenePulse .72s ease-out forwards;
}

.game-page .resource-row {
  border: 1px solid rgba(84, 55, 43, .13);
  border-radius: 17px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(255,255,255,.7), transparent 45%),
    rgba(255, 253, 244, .68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 10px 22px rgba(68, 62, 36, .07);
}

.game-page .skill-row {
  border: 1px solid rgba(84, 55, 43, .12);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(255, 239, 174, .42), transparent 54%),
    rgba(255, 253, 244, .56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 12px 20px rgba(68, 62, 36, .08);
}

.game-page .skill-row button {
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.86), transparent 34%),
    linear-gradient(180deg, rgba(255, 251, 239, .96), rgba(255, 228, 235, .9));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 4px 0 rgba(109, 76, 59, .1);
}

.game-page .skill-row button:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 5px rgba(88, 49, 41, .12);
}

.game-page .bottom-tabs {
  border: 1px solid rgba(84, 55, 43, .13);
  background:
    radial-gradient(ellipse at 50% 0, rgba(255,255,255,.64), transparent 52%),
    rgba(255, 253, 244, .72);
}

.game-page .bottom-tabs button[aria-pressed="true"] {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 5px 0 rgba(92, 42, 51, .16),
    0 0 22px rgba(255, 206, 128, .28);
}

@keyframes mushroomBreath {
  0%, 100% { transform: translateY(-10px) scale(1); }
  50% { transform: translateY(-13px) scale(1.012); }
}

@keyframes immersionMushroomTap {
  0% { transform: translateY(-10px) scale(1); filter: brightness(1); }
  24% { transform: translateY(-2px) scaleX(1.075) scaleY(.88); filter: brightness(1.1) saturate(1.08); }
  51% { transform: translateY(-22px) scaleX(.96) scaleY(1.09); }
  74% { transform: translateY(-7px) scaleX(1.018) scaleY(.982); }
  100% { transform: translateY(-10px) scale(1); filter: brightness(1); }
}

@keyframes immersionRingPing {
  0% { opacity: .96; transform: translate(-50%, -50%) scale(.88); filter: drop-shadow(0 0 8px rgba(255, 221, 118, .32)); }
  58% { opacity: 1; transform: translate(-50%, -50%) scale(1.13); filter: drop-shadow(0 0 30px rgba(255, 221, 118, .58)); }
  100% { opacity: .7; transform: translate(-50%, -50%) scale(1); }
}

@keyframes immersionTapRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.28) rotate(0deg); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(7.5) rotate(58deg); }
}

@keyframes immersionScenePulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  18% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4.2); }
}

@keyframes canopyWake {
  0% { transform: translateY(0) scale(1); opacity: .88; }
  40% { transform: translateY(-4px) scale(1.018); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: .88; }
}

@keyframes mistDrift {
  from { transform: translate3d(-6px, 2px, 0) scaleX(.96); }
  to { transform: translate3d(9px, -3px, 0) scaleX(1.04); }
}

@keyframes mistTap {
  0% { transform: translate3d(0, 0, 0) scale(.96); opacity: .3; }
  46% { transform: translate3d(8px, -9px, 0) scale(1.08); opacity: .52; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: .36; }
}

@keyframes sparkleBreath {
  from { opacity: .46; transform: translateY(2px) scale(.72); }
  to { opacity: .95; transform: translateY(-4px) scale(1); }
}

@keyframes sparklePop {
  0% { opacity: .55; transform: scale(.72); }
  42% { opacity: 1; transform: scale(1.38); filter: brightness(1.28); }
  100% { opacity: .62; transform: scale(.86); }
}

@media (max-height: 700px) {
  .game-page .friend-scene.scene-tapped .seed-button,
  .game-page .seed-button.is-pressed {
    animation-name: immersionMushroomTapSmall;
  }
}

@keyframes capAmbientBreath {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.035) saturate(1.03); }
}

@keyframes mushroomBreathSmall {
  0%, 100% { transform: translateY(-6px) scale(1); }
  50% { transform: translateY(-8px) scale(1.01); }
}

@keyframes immersionMushroomTapSmall {
  0% { transform: translateY(-6px) scale(1); }
  24% { transform: translateY(0) scaleX(1.06) scaleY(.9); }
  51% { transform: translateY(-14px) scaleX(.97) scaleY(1.07); }
  100% { transform: translateY(-6px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .game-page .friend-scene .seed-button,
  .canopy-shadow,
  .scene-mist,
  .scene-sparkle,
  .friend-scene.scene-tapped .canopy-shadow,
  .friend-scene.scene-tapped .scene-mist,
  .friend-scene.scene-tapped .scene-sparkle,
  .tap-ring,
  .game-page .tap-ring,
  .scene-pulse,
  .game-page .scene-pulse {
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }
}

/* Rating-depth pass: keep early Bloom and Atlas screens purposeful before online rows exist. */
.game-page .store-list:has(.garden-card + .garden-card) {
  align-content: stretch;
}

.game-page .store-list:has(.garden-card + .garden-card) .garden-card {
  min-height: 0;
}

.game-page .atlas-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  align-content: stretch;
  gap: 12px;
  text-align: left;
}

.game-page .atlas-card::before {
  justify-self: center;
  align-self: end;
  margin: 0 0 8px;
}

.game-page .atlas-card strong {
  font-size: 26px;
  line-height: 1;
}

.game-page .atlas-card span,
.game-page .atlas-card em {
  display: block;
  color: rgba(91, 68, 62, .78);
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
}

.game-page .atlas-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.game-page .atlas-stats b {
  min-width: 0;
  padding: 8px 5px;
  border: 1px solid rgba(84, 55, 43, .13);
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.76), transparent 46%),
    rgba(255, 245, 224, .58);
  color: #4d3531;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

/* Premium polish pass: explicit reward moments and a meadow that never looks empty. */
.game-page .moment-banner {
  position: absolute;
  left: clamp(14px, 5vw, 28px);
  right: clamp(14px, 5vw, 28px);
  top: calc(env(safe-area-inset-top) + 66px);
  z-index: 80;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 11px;
  align-items: center;
  min-height: 58px;
  padding: 9px 13px 10px 9px;
  border: 2px solid rgba(73, 47, 39, .24);
  border-radius: 18px 15px 18px 16px / 16px 18px 15px 18px;
  pointer-events: none;
  color: #35251f;
  background:
    radial-gradient(circle at 22px 50%, rgba(255, 255, 255, .88) 0 20px, transparent 21px),
    radial-gradient(circle at 50% 0, rgba(255, 241, 168, .58), transparent 48%),
    repeating-linear-gradient(104deg, rgba(92, 61, 42, .045) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, rgba(255, 253, 241, .96), rgba(255, 234, 226, .92));
  box-shadow:
    0 12px 28px rgba(61, 44, 36, .14),
    inset 0 1px 0 rgba(255,255,255,.78);
  transform: translateY(-14px) scale(.97);
  opacity: 0;
  animation: momentArrive .42s cubic-bezier(.13, 1.42, .24, 1) forwards;
}

.game-page .moment-banner::before {
  content: "";
  grid-row: 1 / span 2;
  width: 42px;
  aspect-ratio: 1;
  border: 2px solid rgba(78, 45, 43, .18);
  border-radius: 50% 48% 47% 53%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,.82) 0 12%, transparent 13%),
    radial-gradient(circle at 50% 43%, #fff3b8 0 24%, transparent 25%),
    linear-gradient(180deg, #f4838d, #af4654);
  box-shadow: inset 0 -7px 11px rgba(96, 29, 40, .14);
}

.game-page .moment-banner strong,
.game-page .moment-banner span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-page .moment-banner strong {
  align-self: end;
  font-family: var(--drawn-font);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.02;
}

.game-page .moment-banner span {
  align-self: start;
  color: rgba(80, 58, 52, .72);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

.game-page .moment-banner.badge::before,
.game-page .moment-banner.unlock::before {
  background:
    radial-gradient(circle at 50% 50%, #fff9c9 0 19%, transparent 20%),
    conic-gradient(from 0deg, #ffd972, #e98793, #97c77e, #ffd972);
}

.game-page .moment-banner.buy::before,
.game-page .moment-banner.dew::before {
  background:
    radial-gradient(circle at 35% 27%, rgba(255,255,255,.86) 0 14%, transparent 15%),
    radial-gradient(ellipse at 50% 62%, #9cd7da 0 37%, transparent 38%),
    linear-gradient(180deg, #c8f0dc, #6da987);
}

.game-page .moment-banner.shower::before {
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.88) 0 14%, transparent 15%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.42) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #a9ddeb, #74a9c4);
}

.game-page .moment-banner.great::before,
.game-page .moment-banner.meadow::before {
  background:
    radial-gradient(circle at 50% 38%, #fff8bd 0 18%, transparent 19%),
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.62) 0 31%, transparent 32%),
    linear-gradient(180deg, #b9edd5, #8a87d2);
}

.game-page .moment-banner.leaving {
  animation: momentLeave .34s ease-in forwards;
}

.game-page .orchard-visual .sprout:not(.live) {
  opacity: .16;
  transform: scale(.58) translateY(8px);
  filter: grayscale(.18) saturate(.85);
}

.game-page .friend-scene .orchard-visual::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -18px;
  height: 68px;
  z-index: -1;
  pointer-events: none;
  opacity: .92;
  background:
    radial-gradient(circle at 9% 42%, rgba(255, 226, 127, .86) 0 4px, transparent 5px),
    radial-gradient(circle at 17% 60%, rgba(255, 246, 210, .74) 0 3px, transparent 4px),
    radial-gradient(circle at 30% 48%, rgba(255, 174, 190, .68) 0 4px, transparent 5px),
    radial-gradient(circle at 43% 64%, rgba(255, 246, 210, .74) 0 3px, transparent 4px),
    radial-gradient(circle at 57% 46%, rgba(255, 226, 127, .82) 0 4px, transparent 5px),
    radial-gradient(circle at 72% 63%, rgba(255, 174, 190, .62) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 49%, rgba(255, 246, 210, .72) 0 3px, transparent 4px),
    repeating-linear-gradient(92deg, transparent 0 9px, rgba(38, 94, 48, .2) 9px 11px, transparent 11px 16px);
  filter: saturate(1.08);
}

.game-page .companion:not(.live):nth-child(-n+2) {
  opacity: .18;
  transform: translateY(8px) scale(.72);
  filter: grayscale(.16) saturate(.8);
}

.game-page .friend-scene::before {
  animation: livingMeadowBreath 4.8s ease-in-out infinite alternate;
}

.game-page .friend-scene::after {
  left: -8%;
  right: -8%;
  bottom: 4%;
  z-index: 3;
  height: 24%;
  border-radius: 42% 58% 0 0 / 22% 30% 0 0;
  opacity: .82;
  background:
    radial-gradient(circle at 11% 52%, rgba(255, 230, 137, .82) 0 3px, transparent 4px),
    radial-gradient(circle at 17% 70%, rgba(255, 249, 222, .64) 0 2px, transparent 3px),
    radial-gradient(circle at 26% 60%, rgba(246, 159, 178, .54) 0 3px, transparent 4px),
    radial-gradient(circle at 41% 73%, rgba(255, 236, 164, .66) 0 2px, transparent 3px),
    radial-gradient(circle at 61% 58%, rgba(255, 249, 222, .62) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 72%, rgba(246, 159, 178, .5) 0 3px, transparent 4px),
    radial-gradient(circle at 89% 56%, rgba(255, 230, 137, .78) 0 3px, transparent 4px),
    radial-gradient(ellipse at 50% 110%, rgba(41, 95, 51, .38), transparent 62%),
    repeating-linear-gradient(85deg, transparent 0 8px, rgba(35, 92, 45, .14) 8px 10px, transparent 10px 15px),
    linear-gradient(180deg, rgba(139, 194, 112, .1), rgba(72, 138, 75, .34));
  filter: blur(.15px) saturate(1.08);
}

.game-page .scene-mist {
  animation-name: mistDrift, livingMistPulse;
  animation-duration: 7.5s, 3.8s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: alternate, alternate;
}

.game-page .friend-scene.scene-bloomed .scene-sparkle {
  animation: premiumSparkleBloom .78s ease-out;
}

@keyframes momentArrive {
  0% { opacity: 0; transform: translateY(-14px) scale(.97); }
  62% { opacity: 1; transform: translateY(3px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes momentLeave {
  to { opacity: 0; transform: translateY(-10px) scale(.98); }
}

@keyframes nextActionGlow {
  from { transform: translateY(0); filter: saturate(1); }
  to { transform: translateY(-1px); filter: saturate(1.1) brightness(1.04); }
}

@keyframes livingMeadowBreath {
  from { transform: translateY(0) scaleX(.996); filter: saturate(1); }
  to { transform: translateY(-4px) scaleX(1.01); filter: saturate(1.06); }
}

@keyframes livingMistPulse {
  from { opacity: .26; }
  to { opacity: .48; }
}

body[data-biome="rain"] .game-page .friend-scene::after,
body[data-biome="brook"] .game-page .friend-scene::after,
body[data-biome="cloud"] .game-page .friend-scene::after {
  background:
    radial-gradient(circle at 13% 53%, rgba(217, 249, 255, .78) 0 3px, transparent 4px),
    radial-gradient(circle at 28% 67%, rgba(255, 249, 222, .58) 0 2px, transparent 3px),
    radial-gradient(circle at 51% 59%, rgba(150, 216, 226, .5) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 71%, rgba(217, 249, 255, .62) 0 3px, transparent 4px),
    radial-gradient(ellipse at 50% 110%, rgba(38, 93, 70, .36), transparent 62%),
    repeating-linear-gradient(86deg, transparent 0 8px, rgba(35, 92, 65, .14) 8px 10px, transparent 10px 15px),
    linear-gradient(180deg, rgba(129, 193, 158, .1), rgba(69, 133, 91, .34));
}

body[data-biome="crystal"] .game-page .friend-scene::after,
body[data-biome="aurora"] .game-page .friend-scene::after,
body[data-biome="ancient"] .game-page .friend-scene::after {
  background:
    radial-gradient(circle at 12% 54%, rgba(204, 255, 236, .76) 0 3px, transparent 4px),
    radial-gradient(circle at 30% 67%, rgba(216, 202, 255, .58) 0 3px, transparent 4px),
    radial-gradient(circle at 52% 58%, rgba(255, 249, 222, .62) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 72%, rgba(204, 255, 236, .58) 0 3px, transparent 4px),
    radial-gradient(ellipse at 50% 110%, rgba(42, 82, 73, .38), transparent 62%),
    repeating-linear-gradient(87deg, transparent 0 8px, rgba(39, 102, 78, .13) 8px 10px, transparent 10px 15px),
    linear-gradient(180deg, rgba(124, 190, 163, .1), rgba(59, 124, 93, .34));
}

@keyframes premiumSparkleBloom {
  0% { opacity: .4; transform: scale(.72) rotate(-8deg); }
  46% { opacity: 1; transform: scale(1.56) rotate(7deg); filter: brightness(1.35); }
  100% { opacity: .7; transform: scale(.9) rotate(0); }
}

@media (max-height: 760px) {
  .game-page .moment-banner {
    top: calc(env(safe-area-inset-top) + 54px);
    min-height: 50px;
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .game-page .moment-banner::before {
    width: 34px;
  }

  .game-page .moment-banner strong {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-page .moment-banner,
  .game-page .bloom-copy #nextBloomName[data-ready="true"],
  .game-page .moment-banner.leaving,
  .game-page .friend-scene::before,
  .game-page .scene-mist,
  .game-page .friend-scene.scene-bloomed .scene-sparkle {
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }
}

/* App-store polish pass: replace the prototype sketch surface with a richer mobile game shell. */
.game-page {
  --drawn-font: "Aptos Rounded", "Segoe UI Variable", "Nunito Sans", "Inter", ui-rounded, system-ui, sans-serif;
  --game-ink: #fff8df;
  --game-muted: rgba(255, 244, 211, .66);
  --game-panel: rgba(14, 25, 18, .72);
  --game-panel-strong: rgba(18, 33, 24, .86);
  --game-line: rgba(255, 234, 171, .18);
  --game-gold: #ffd56f;
  --game-green: #62c879;
  --game-green-deep: #1f7f4f;
  --game-rose: #f26078;
  --game-rose-deep: #9e2438;
  --game-shadow: 0 18px 42px rgba(8, 15, 10, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
}

body.game-page {
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 213, 111, .18), transparent 25%),
    radial-gradient(circle at 76% 82%, rgba(98, 200, 121, .16), transparent 28%),
    linear-gradient(145deg, #090f0c 0%, #17241b 46%, #241824 100%);
  font-family: "Aptos Rounded", "Segoe UI Variable", "Nunito Sans", "Inter", ui-rounded, system-ui, sans-serif;
}

.game-page .phone-frame {
  color: var(--game-ink);
  background:
    radial-gradient(ellipse at 50% 16%, rgba(255, 225, 126, .62), transparent 24%),
    radial-gradient(ellipse at 18% 28%, rgba(142, 222, 167, .34), transparent 22%),
    radial-gradient(ellipse at 82% 30%, rgba(150, 203, 255, .2), transparent 21%),
    linear-gradient(180deg, #142b29 0%, #244438 38%, #2c653f 65%, #14301f 100%);
}

.game-page .phone-frame::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 245, 187, .2), transparent 39%),
    radial-gradient(ellipse at 50% 104%, rgba(2, 10, 6, .56), transparent 45%),
    linear-gradient(90deg, rgba(2, 8, 5, .18), transparent 16% 84%, rgba(2, 8, 5, .2));
  mix-blend-mode: multiply;
}

.game-page .phone-frame::after {
  z-index: 0;
  opacity: .6;
  background:
    radial-gradient(ellipse at 50% 2%, rgba(255, 234, 143, .32), transparent 22%),
    repeating-linear-gradient(91deg, rgba(105, 199, 111, .2) 0 5px, rgba(25, 93, 48, .24) 5px 13px),
    linear-gradient(180deg, rgba(84, 171, 83, .78), rgba(18, 64, 35, .94));
  border-radius: 56% 44% 0 0 / 24% 30% 0 0;
}

.game-page .suite-topbar,
.game-page .game-shell,
.bottom-tabs {
  position: relative;
  z-index: 2;
}

.game-page .suite-topbar {
  min-height: 50px;
  background:
    linear-gradient(180deg, rgba(9, 17, 12, .9), rgba(12, 23, 16, .45));
  border-bottom: 1px solid rgba(255, 232, 164, .12);
  box-shadow: 0 12px 26px rgba(3, 9, 5, .22);
  backdrop-filter: blur(18px) saturate(1.25);
}

.game-page .suite-ao-home,
.game-page .suite-app-mark {
  background: rgba(255, 250, 225, .9);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(4, 11, 6, .22), inset 0 1px 0 rgba(255,255,255,.72);
}

.game-page .suite-app-name {
  color: #fff8df;
  font-family: var(--drawn-font);
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

.game-page .game-shell {
  gap: 10px;
  padding: 9px 10px max(9px, env(safe-area-inset-bottom));
}

.game-page .tap-panel {
  filter: drop-shadow(0 18px 30px rgba(5, 13, 7, .18));
}

.game-page .resource-row {
  min-height: 68px;
  padding: 8px;
  border: 1px solid rgba(255, 239, 183, .16);
  border-radius: 22px;
  transform: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.2), transparent 46%),
    linear-gradient(180deg, rgba(22, 40, 29, .86), rgba(9, 21, 14, .78));
  box-shadow:
    0 14px 28px rgba(2, 8, 4, .26),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.16);
  backdrop-filter: blur(16px) saturate(1.2);
}

.game-page .resource-row div {
  display: grid;
  align-content: center;
  min-height: 48px;
  padding: 6px 5px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.game-page .resource-row div + div {
  border-left: 1px solid rgba(255, 239, 183, .11);
}

.game-page .resource-row div:nth-child(2) {
  transform: none;
}

.game-page .resource-row .metric-label,
.game-page .glade-head span,
.game-page .glade-head em,
.game-page .bloom-copy small {
  color: var(--game-muted);
  font-family: var(--drawn-font);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.game-page .resource-row strong {
  color: #fff9e8;
  font-family: var(--drawn-font);
  font-size: 27px;
  font-weight: 950;
  line-height: .95;
  text-shadow: 0 2px 10px rgba(0,0,0,.38);
}

.game-page .resource-row small {
  color: rgba(255, 242, 205, .76);
  font-family: var(--drawn-font);
  font-weight: 850;
}

.game-page .next-goal-button {
  min-height: 25px;
  margin-top: 5px;
  border: 0;
  border-radius: 999px;
  color: #092213;
  font-family: var(--drawn-font);
  font-size: 10px;
  font-weight: 950;
  text-transform: none;
  background:
    radial-gradient(circle at 36% 8%, rgba(255,255,255,.72), transparent 28%),
    linear-gradient(180deg, #92ef91, #42b565 56%, #1e7b48);
  box-shadow:
    0 5px 0 rgba(7, 48, 27, .62),
    0 9px 16px rgba(43, 205, 97, .22),
    inset 0 1px 0 rgba(255,255,255,.44);
}

.game-page .glade-stage {
  margin-top: 10px;
  padding: 10px 10px 0;
  overflow: hidden;
  border: 1px solid rgba(255, 234, 171, .16);
  border-radius: 30px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 224, 122, .36), transparent 33%),
    radial-gradient(ellipse at 22% 64%, rgba(111, 218, 138, .24), transparent 32%),
    radial-gradient(ellipse at 82% 66%, rgba(242, 96, 120, .13), transparent 31%),
    linear-gradient(180deg, rgba(29, 70, 65, .92) 0%, rgba(38, 92, 62, .88) 58%, rgba(13, 46, 28, .96) 100%);
  box-shadow:
    0 22px 38px rgba(3, 10, 5, .28),
    inset 0 1px 0 rgba(255,255,255,.2);
}

.game-page .glade-stage::before {
  background:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,.2) 0 1px, transparent 1.8px),
    radial-gradient(circle at 76% 24%, rgba(255, 222, 126, .18) 0 1.5px, transparent 2.1px),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 38%);
  background-size: 24px 24px, 31px 31px, 100% 100%;
  mix-blend-mode: screen;
  opacity: .55;
}

.game-page .glade-head {
  z-index: 8;
  min-height: 62px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 239, 183, .16);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(12, 25, 17, .58), rgba(8, 17, 12, .36));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 10px 24px rgba(3, 10, 5, .16);
  backdrop-filter: blur(12px);
}

.game-page .glade-head strong {
  color: #fff8df;
  font-family: var(--drawn-font);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 3px 14px rgba(0,0,0,.4);
}

.game-page .glade-head em,
.sound-button {
  border: 1px solid rgba(255, 234, 171, .18);
  color: #fff8df;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 7px 16px rgba(2, 8, 4, .18);
}

.game-page .bloom-track {
  overflow: hidden;
  height: 9px;
  border: 1px solid rgba(255, 239, 183, .12);
  background: rgba(5, 15, 9, .42);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.18);
}

.game-page .bloom-track span,
.game-page .progress-track span {
  background:
    linear-gradient(90deg, #4ddb7b, #ffd66f 62%, #ff6f86);
  box-shadow: 0 0 16px rgba(255, 214, 111, .36);
}

.game-page .bloom-copy {
  margin: 2px 0 0;
}

.game-page .bloom-copy #nextBloomName,
.game-page .bloom-copy #nextBloomName[data-ready="true"] {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  color: #fff8df;
  background:
    radial-gradient(circle at 40% 0%, rgba(255,255,255,.3), transparent 30%),
    linear-gradient(180deg, var(--game-rose), var(--game-rose-deep));
  box-shadow:
    0 6px 0 rgba(91, 20, 33, .55),
    0 12px 22px rgba(242, 96, 120, .2);
  text-shadow: 0 1px 8px rgba(0,0,0,.24);
}

.game-page .friend-scene {
  height: min(57vh, 500px);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: saturate(1.12) contrast(1.04);
}

.game-page .friend-scene::before {
  inset: auto -36% -8%;
  height: 45%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 234, 171, .32), transparent 24%),
    repeating-linear-gradient(90deg, rgba(107, 215, 116, .26) 0 6px, rgba(40, 132, 66, .28) 6px 15px, rgba(255, 216, 111, .12) 15px 22px),
    linear-gradient(180deg, rgba(114, 207, 90, .88), rgba(19, 93, 45, .94));
  filter: saturate(1.18);
}

.game-page .friend-scene::after {
  bottom: 17%;
  height: 30px;
  opacity: .78;
  background:
    radial-gradient(ellipse, rgba(0, 0, 0, .32), transparent 68%);
  filter: blur(.7px);
}

.game-page .sky-glow {
  height: 68%;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255, 236, 149, .78), transparent 37%),
    radial-gradient(ellipse at 50% 58%, rgba(116, 219, 146, .22), transparent 56%);
  opacity: .95;
}

.game-page .sunbeam {
  top: 4%;
  right: 7%;
  width: 76px;
  height: 76px;
  background:
    radial-gradient(circle at 35% 29%, rgba(255,255,255,.74) 0 16%, transparent 17%),
    radial-gradient(circle at 50% 50%, #ffe693 0 45%, #eaaa3d 46% 100%);
  box-shadow: 0 0 46px rgba(255, 215, 93, .55);
}

.game-page .cloud {
  opacity: .58;
}

.game-page .scene-mist {
  background: radial-gradient(ellipse, rgba(255,255,255,.62), transparent 68%);
  opacity: .34;
}

.game-page .scene-sparkle {
  background: radial-gradient(circle, #fffef3 0 30%, rgba(255, 216, 111, .9) 31% 63%, transparent 64%);
  box-shadow:
    34px 19px 0 -2px rgba(255, 245, 180, .86),
    83px -14px 0 -3px rgba(117, 235, 154, .7),
    142px 21px 0 -4px rgba(255, 151, 168, .68);
}

.game-page .friend-scene .seed-button {
  width: min(80%, 348px);
  margin-top: 3%;
  filter:
    drop-shadow(0 7px 0 rgba(63, 22, 31, .34))
    drop-shadow(0 30px 24px rgba(0, 0, 0, .34));
}

.game-page .seed-button::before {
  border: 0;
  background:
    radial-gradient(circle at 18% 60%, #fff8dc 0 8.7%, transparent 9.6%),
    radial-gradient(circle at 34% 31%, #fff2c9 0 6.4%, transparent 7.4%),
    radial-gradient(circle at 51% 20%, #fffce8 0 9.5%, transparent 10.4%),
    radial-gradient(circle at 67% 39%, #fff1c8 0 6.8%, transparent 7.7%),
    radial-gradient(circle at 82% 59%, #fff8dc 0 8.2%, transparent 9.1%),
    radial-gradient(ellipse at 31% 9%, rgba(255,255,255,.58), transparent 34%),
    radial-gradient(ellipse at 71% 78%, rgba(70, 10, 22, .32), transparent 38%),
    linear-gradient(180deg, #ff8790 0%, #e74358 58%, #8f2134 100%);
  box-shadow:
    inset 0 20px 32px rgba(255,255,255,.26),
    inset 0 -28px 32px rgba(57, 7, 20, .28),
    0 7px 0 rgba(76, 22, 32, .34);
}

.game-page .seed-button::after {
  border: 0;
  background:
    radial-gradient(ellipse at 50% -14%, rgba(255,255,255,.56), transparent 38%),
    repeating-linear-gradient(89deg, rgba(105, 65, 34, .2) 0 3px, transparent 3px 12px),
    linear-gradient(180deg, #fff6dc, #e8b36f);
  box-shadow:
    inset 0 -8px 12px rgba(102, 61, 26, .16),
    0 4px 0 rgba(82, 48, 25, .14);
}

.game-page .seed-core {
  border: 0;
  background:
    radial-gradient(ellipse at 47% 12%, rgba(255,255,255,.7), transparent 42%),
    radial-gradient(ellipse at 50% 82%, rgba(126, 75, 39, .2), transparent 44%),
    linear-gradient(180deg, #ffe1b1 0%, #df9e5e 100%);
  box-shadow:
    inset 0 -11px 16px rgba(99, 55, 25, .18),
    0 5px 0 rgba(83, 48, 25, .16);
}

.game-page .seed-core::before,
.game-page .seed-core::after {
  background: #30201c;
  box-shadow: 0 0 8px rgba(255,255,255,.22);
}

.game-page .seed-mouth {
  border-bottom-color: rgba(40, 28, 24, .84);
}

.game-page .root-ring {
  opacity: .78;
  filter:
    drop-shadow(0 0 18px rgba(255, 214, 111, .45))
    drop-shadow(0 10px 16px rgba(4, 12, 6, .2));
}

.game-page .skill-row {
  min-height: 56px;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(255, 239, 183, .15);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(23, 43, 31, .8), rgba(8, 19, 13, .74));
  box-shadow: var(--game-shadow);
  backdrop-filter: blur(16px) saturate(1.2);
}

.game-page .skill-row button,
.bottom-tabs button,
.game-page .store-item button,
.game-page .quest-item button,
.game-page .state-card button,
.leaderboard-tools button {
  min-height: 42px;
  border: 0;
  border-radius: 16px;
  color: #12301d;
  font-family: var(--drawn-font);
  font-weight: 950;
  background:
    radial-gradient(circle at 38% 6%, rgba(255,255,255,.72), transparent 32%),
    linear-gradient(180deg, #fff3d0, #f6c36f);
  box-shadow:
    0 5px 0 rgba(102, 65, 21, .42),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.game-page .skill-row button:nth-child(1) {
  color: #0c3724;
  background:
    radial-gradient(circle at 38% 6%, rgba(255,255,255,.72), transparent 32%),
    linear-gradient(180deg, #b8f7cb, #54c878);
  transform: none;
}

.game-page .skill-row button:nth-child(2) {
  color: #4c240d;
  background:
    radial-gradient(circle at 38% 6%, rgba(255,255,255,.74), transparent 32%),
    linear-gradient(180deg, #ffe29a, #ef9f48);
  transform: none;
}

.game-page .skill-row button:nth-child(3) {
  color: #fff8df;
  background:
    radial-gradient(circle at 38% 6%, rgba(255,255,255,.36), transparent 32%),
    linear-gradient(180deg, #f06f86, #9e2438);
  text-shadow: 0 1px 8px rgba(0,0,0,.28);
  transform: none;
}

.game-page .skill-row button:active,
.bottom-tabs button:active {
  transform: translateY(2px);
}

.game-page .bottom-tabs {
  min-height: 58px;
  padding: 7px;
  border: 1px solid rgba(255, 239, 183, .15);
  border-radius: 23px;
  background:
    linear-gradient(180deg, rgba(20, 37, 28, .88), rgba(7, 17, 12, .82));
  box-shadow:
    0 -14px 28px rgba(3, 10, 5, .18),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(18px) saturate(1.18);
}

.game-page .bottom-tabs button {
  color: rgba(255, 244, 211, .74);
  background: transparent;
  box-shadow: none;
}

.game-page .bottom-tabs button[aria-pressed="true"] {
  color: #082214;
  background:
    radial-gradient(circle at 36% 8%, rgba(255,255,255,.65), transparent 29%),
    linear-gradient(180deg, #8ff09b, #42bf67);
  box-shadow:
    0 5px 0 rgba(7, 53, 28, .58),
    0 0 24px rgba(76, 219, 123, .22),
    inset 0 1px 0 rgba(255,255,255,.44);
}

.game-page .combo-badge {
  color: #fff2bf;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.game-page .store-panel,
.game-page .state-card,
.game-page .save-dialog {
  color: var(--game-ink);
  border: 1px solid var(--game-line);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.16), transparent 42%),
    linear-gradient(180deg, rgba(19, 37, 27, .9), rgba(9, 20, 14, .82));
  box-shadow: var(--game-shadow);
}

.game-page .store-item,
.game-page .quest-item,
.game-page .achievement,
.game-page .leaderboard-row,
.game-page .leaderboard-empty,
.game-page .stat-list p {
  color: var(--game-ink);
  border-color: rgba(255, 239, 183, .12);
  background: rgba(255, 249, 223, .08);
}

.game-page .store-item p,
.game-page .quest-item p,
.game-page .achievement span,
.game-page .leaderboard-empty span,
.game-page .stat-list span {
  color: var(--game-muted);
}

@media (min-width: 560px) and (min-height: 760px) {
  .game-page .phone-frame {
    border: 10px solid rgba(5, 9, 7, .92);
    box-shadow:
      0 34px 90px rgba(0, 0, 0, .46),
      inset 0 0 0 1px rgba(255,255,255,.08);
  }
}

@media (max-height: 700px) {
  .game-page .resource-row {
    min-height: 56px;
    padding: 6px;
  }

  .game-page .resource-row strong {
    font-size: 22px;
  }

  .game-page .glade-head {
    min-height: 50px;
    padding: 6px 8px;
  }

  .game-page .glade-head strong {
    font-size: 18px;
  }

  .game-page .friend-scene {
    height: min(53vh, 420px);
  }

  .game-page .skill-row,
  .game-page .bottom-tabs {
    min-height: 50px;
    padding: 6px;
  }
}

/* Store and secondary-screen polish: keep non-play tabs from falling back to prototype cards. */
.game-page .section-head {
  min-height: 30px;
  padding: 0 2px 8px;
}

.game-page .section-head h2 {
  color: #fff8df;
  font-family: var(--drawn-font);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.game-page .section-head span {
  color: rgba(255, 214, 111, .68);
  font-family: var(--drawn-font);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
}

.game-page .store-list,
.game-page .quest-list,
.game-page .achievement-list,
.game-page .leaderboard-list,
.game-page .stat-list {
  gap: 10px;
}

.game-page .store-item,
.game-page .store-item.recommended,
.game-page .store-item.waiting,
.game-page .quest-item,
.game-page .achievement,
.game-page .leaderboard-row,
.game-page .leaderboard-empty {
  border: 1px solid rgba(255, 239, 183, .16);
  background:
    radial-gradient(ellipse at 24% 0%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(28, 53, 38, .82), rgba(10, 24, 16, .7));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 22px rgba(3, 10, 5, .16);
  backdrop-filter: blur(10px);
}

.game-page .store-item.recommended {
  border-color: rgba(255, 213, 111, .34);
  background:
    radial-gradient(ellipse at 78% 0%, rgba(255, 213, 111, .22), transparent 36%),
    radial-gradient(ellipse at 20% 12%, rgba(98, 200, 121, .16), transparent 34%),
    linear-gradient(180deg, rgba(37, 62, 39, .88), rgba(12, 27, 17, .74));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(255, 213, 111, .08),
    0 14px 28px rgba(3, 10, 5, .22);
}

.game-page .store-item.garden-card {
  min-height: 0;
  padding: 14px;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px 14px;
  align-items: center;
}

.game-page .store-item.garden-card button {
  grid-column: 2;
  justify-self: end;
  min-width: 118px;
  min-height: 42px;
}

.game-page .store-copy h3,
.game-page .friend-copy h3,
.game-page .achievement strong {
  color: #fff8df;
  font-family: var(--drawn-font);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.08;
  text-shadow: 0 2px 10px rgba(0,0,0,.32);
}

.game-page .store-copy p,
.game-page .friend-copy p,
.game-page .store-item p,
.game-page .quest-item p,
.game-page .achievement span {
  color: rgba(255, 244, 211, .74);
  font-family: var(--drawn-font);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.18;
}

.game-page .owned,
.game-page .quest-progress {
  color: #ff7088;
  font-family: var(--drawn-font);
  font-size: 10px;
  font-weight: 950;
}

.game-page .store-visual,
.game-page .friend-token {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 239, 183, .22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 8px 18px rgba(1, 8, 4, .24);
}

.game-page .charms-panel .store-item,
.game-page .perks-panel .store-item {
  min-height: 84px;
}

.game-page .charms-panel .store-item button,
.game-page .perks-panel .store-item button,
.game-page .quest-item button {
  min-width: 86px;
}

/* Real-game art pass: remove web chrome and replace CSS mascot with production sprite assets. */
.game-page .phone-frame {
  grid-template-rows: minmax(0, 1fr);
}

.game-page .suite-topbar {
  display: none;
}

.game-page .game-shell {
  padding: max(12px, env(safe-area-inset-top)) 10px max(9px, env(safe-area-inset-bottom));
}

.game-page .resource-row {
  min-height: 78px;
  border-radius: 25px;
  background:
    linear-gradient(180deg, rgba(255, 248, 209, .09), rgba(255, 248, 209, 0) 42%),
    linear-gradient(180deg, rgba(10, 22, 15, .94), rgba(2, 12, 8, .88));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(255, 234, 171, .1);
}

.game-page .resource-row::before {
  content: "Idle Shroom";
  position: absolute;
  inset: auto;
  left: 50%;
  top: -10px;
  right: auto;
  bottom: auto;
  z-index: 4;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  padding: 4px 12px 5px;
  border: 1px solid rgba(255, 233, 166, .22);
  border-radius: 999px;
  color: #fff8df;
  background: linear-gradient(180deg, rgba(48, 85, 54, .95), rgba(8, 27, 16, .94));
  box-shadow: 0 8px 18px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.18);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .03em;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,.36);
}

.game-page .glade-stage {
  margin-top: 12px;
  padding: 0;
  border: 1px solid rgba(255, 234, 171, .17);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(8, 25, 18, .22), rgba(8, 25, 18, .5)),
    url("./sprites/glade-premium.svg") center / cover no-repeat;
  box-shadow:
    0 26px 46px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -24px 44px rgba(0,0,0,.22);
}

.game-page .glade-stage::before {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 238, 143, .22), transparent 33%),
    linear-gradient(180deg, rgba(0,0,0,.1), transparent 35%, rgba(0,0,0,.18));
  mix-blend-mode: screen;
  opacity: .8;
}

.game-page .glade-head {
  margin: 10px 10px 0;
  min-height: 58px;
  background:
    linear-gradient(180deg, rgba(6, 19, 13, .74), rgba(6, 19, 13, .34));
}

.game-page .bloom-track {
  margin: 8px 10px 0;
}

.game-page .bloom-copy {
  margin: 2px 10px 0;
}

.game-page .friend-scene {
  height: min(58vh, 522px);
  margin: 0;
  background: transparent;
}

.game-page .friend-scene::before,
.game-page .friend-scene::after,
.game-page .cloud,
.game-page .sunbeam,
.game-page .meadow-hill {
  display: none;
}

.game-page .sky-glow {
  height: 78%;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 238, 150, .72), transparent 36%),
    radial-gradient(ellipse at 50% 66%, rgba(92, 214, 118, .22), transparent 52%);
}

.game-page .friend-scene .seed-button {
  width: min(91%, 390px);
  aspect-ratio: 1 / .92;
  margin-top: 4%;
  background: url("./sprites/shroom-premium.svg") center bottom / contain no-repeat;
  border-radius: 0;
  filter:
    drop-shadow(0 12px 0 rgba(52, 10, 19, .22))
    drop-shadow(0 34px 28px rgba(0, 0, 0, .44));
}

.game-page .seed-button::before,
.game-page .seed-button::after,
.game-page .seed-core,
.game-page .seed-mouth,
.game-page .seed-cheeks,
.game-page .seed-text {
  display: none;
}

.game-page .root-ring {
  width: min(92%, 360px);
  opacity: .72;
  mix-blend-mode: screen;
}

.game-page .rush-orbit {
  width: min(80%, 310px);
}

.game-page .companion-row {
  bottom: 8%;
}

.game-page .orchard-visual {
  bottom: 5%;
}

.game-page .combo-badge {
  min-height: 23px;
  margin-top: 3px;
  font-size: 16px;
}

@media (min-width: 560px) and (min-height: 760px) {
  .game-page .phone-frame {
    grid-template-rows: minmax(0, 1fr);
  }
}

@media (max-height: 700px) {
  .game-page .resource-row {
    min-height: 64px;
  }

  .game-page .friend-scene {
    height: min(57vh, 440px);
  }

  .game-page .friend-scene .seed-button {
    width: min(86%, 330px);
  }
}

/* First-session retention pass: make the next action the center of the HUD. */
.game-page .resource-row {
  grid-template-columns: 1.08fr 1.28fr .92fr;
  align-items: stretch;
  gap: 7px;
  min-height: 92px;
  padding: 10px 9px 9px;
}

.game-page .resource-row > div {
  min-height: 68px;
  padding: 8px 6px;
  border-radius: 19px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 247, 203, .1), transparent 38%),
    linear-gradient(180deg, rgba(10, 24, 15, .5), rgba(3, 12, 8, .22));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.14);
}

.game-page .resource-row > div + div {
  border-left: 0;
}

.game-page .resource-row .goal-stat {
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: 5px;
  padding: 8px 7px 7px;
  background:
    radial-gradient(circle at 50% 0%, rgba(170, 255, 181, .2), transparent 42%),
    linear-gradient(180deg, rgba(16, 42, 25, .82), rgba(4, 19, 12, .62));
  box-shadow:
    0 10px 20px rgba(1, 7, 4, .2),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.18);
}

.game-page .resource-row .metric-label {
  font-size: 8.5px;
}

.game-page .resource-row strong {
  margin-top: 2px;
  font-size: clamp(30px, 10.5vw, 44px);
}

.game-page .rate-inline {
  margin-top: 3px;
  color: rgba(255, 241, 203, .72);
  font-family: var(--drawn-font);
  font-size: 11px;
  font-weight: 900;
}

.game-page .next-goal-button {
  display: grid;
  place-items: center;
  min-height: 40px;
  width: 100%;
  margin: 0;
  padding: 4px 8px 5px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  font-size: clamp(11px, 3.5vw, 15px);
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  box-shadow:
    0 9px 0 rgba(7, 43, 18, .28),
    0 15px 23px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255,255,255,.38);
}

.game-page .next-goal-button:disabled {
  color: rgba(246, 238, 207, .82);
  background:
    radial-gradient(circle at 42% 0%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(180deg, rgba(87, 125, 84, .74), rgba(31, 79, 48, .74));
  box-shadow:
    0 7px 0 rgba(3, 24, 12, .28),
    0 12px 18px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.game-page .next-goal-button[data-ready="true"] {
  color: #08170e;
  background:
    radial-gradient(circle at 38% 7%, rgba(255,255,255,.82), transparent 30%),
    linear-gradient(180deg, #d7ffd8, #66dd7e 56%, #2aa85d);
}

.game-page .goal-progress {
  position: relative;
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(2, 10, 6, .55);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.36);
}

.game-page .goal-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #68db74, #ffe07a 70%, #ff7489);
  box-shadow: 0 0 13px rgba(255, 222, 122, .34);
  transition: width .2s ease;
}

.game-page .glade-stage {
  margin-top: 9px;
}

@media (max-width: 390px) {
  .game-page .resource-row {
    grid-template-columns: 1fr 1.18fr .88fr;
    gap: 5px;
  }

  .game-page .resource-row strong {
    font-size: clamp(27px, 10vw, 40px);
  }

  .game-page .next-goal-button {
    font-size: 11px;
  }
}

.game-page .moment-banner {
  left: 24px;
  right: 24px;
  top: auto;
  bottom: calc(190px + env(safe-area-inset-bottom));
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 9px;
  min-height: 48px;
  padding: 7px 11px 8px 8px;
  border: 1px solid rgba(255, 233, 166, .18);
  border-radius: 17px;
  color: #fff8df;
  background:
    radial-gradient(circle at 18px 50%, rgba(255, 226, 119, .22) 0 24px, transparent 25px),
    linear-gradient(180deg, rgba(21, 42, 27, .92), rgba(5, 18, 12, .86));
  box-shadow:
    0 14px 26px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(14px) saturate(1.12);
}

.game-page .moment-banner::before {
  width: 31px;
  border: 1px solid rgba(255, 242, 196, .2);
  box-shadow:
    0 0 20px rgba(255, 218, 101, .18),
    inset 0 -5px 9px rgba(96, 29, 40, .14);
}

.game-page .moment-banner strong {
  color: #fff8df;
  font-size: 14px;
  line-height: 1;
}

.game-page .moment-banner span {
  color: rgba(255, 241, 202, .72);
  font-size: 10px;
}

@media (min-width: 760px) {
  .game-page .moment-banner {
    left: calc(50% - 184px);
    right: calc(50% - 184px);
  }
}

/* Store polish: remove dead space so upgrades feel like a real mobile shop. */
.game-page .colony-panel .store-list,
.game-page .colony-panel .store-list:has(.garden-card + .garden-card) {
  grid-template-rows: none;
  grid-auto-rows: auto;
  align-content: start;
  overflow: auto;
}

body[data-tab="store"] .store-grid {
  align-content: start;
  grid-template-rows: auto 54px 58px;
}

.game-page .colony-panel .store-list .garden-card,
.game-page .colony-panel .store-list:has(.garden-card + .garden-card) .garden-card,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card {
  min-height: 134px;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  justify-items: stretch;
  align-content: center;
  align-items: center;
  gap: 9px 13px;
  padding: 12px;
  text-align: left;
}

.game-page .colony-panel .store-list .garden-card .store-visual,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card .store-visual {
  width: 50px;
  height: 50px;
  border-width: 1px;
}

.game-page .colony-panel .store-list .garden-card .store-copy,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card .store-copy {
  max-width: none;
}

.game-page .colony-panel .store-list .garden-card h3,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card h3 {
  font-size: 16px;
}

.game-page .colony-panel .store-list .garden-card p,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card p {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 2px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11px;
  line-height: 1.18;
}

.game-page .colony-panel .store-list .garden-card button,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card button {
  grid-column: 1 / -1;
  justify-self: stretch;
  min-width: 0;
  min-height: 38px;
}

/* Mobile-game quality pass: one coherent app surface, not layered web polish. */
body.game-page {
  --drawn-font: "Aptos Rounded", "Segoe UI Variable", "Inter", ui-rounded, system-ui, sans-serif;
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% -10%, rgba(244, 213, 117, .22), transparent 30%),
    radial-gradient(circle at 8% 18%, rgba(80, 176, 111, .18), transparent 34%),
    linear-gradient(180deg, #07140f 0%, #0a1a13 55%, #0d2217 100%);
  color: #fff7dd;
  font-family: var(--drawn-font);
}

.game-page .phone-frame {
  width: min(100vw, 430px);
  height: 100svh;
  min-height: 640px;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 249, 221, .05), transparent 10%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, #0b2118 0%, #102b1b 55%, #0b1f15 100%);
  box-shadow: none;
  overflow: hidden;
}

.game-page .phone-frame::before,
.game-page .phone-frame::after {
  opacity: .28;
  pointer-events: none;
}

.game-page .suite-topbar,
.game-page .hero-panel,
.game-page .ad-slot,
.game-page .side-panel {
  display: none !important;
}

.game-page .game-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: max(10px, env(safe-area-inset-top)) 10px max(9px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.game-page .screen-panel {
  min-height: 0;
  overflow: hidden;
}

body[data-tab="play"] .play-grid {
  min-height: 0;
  height: 100%;
}

.game-page .tap-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  min-height: 0;
  height: 100%;
  align-items: stretch;
}

.game-page .resource-row {
  position: relative;
  grid-template-columns: .9fr 1.28fr .82fr;
  gap: 6px;
  min-height: 72px;
  padding: 7px;
  border: 1px solid rgba(255, 238, 169, .14);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 237, 148, .14), transparent 48%),
    linear-gradient(180deg, rgba(10, 31, 20, .88), rgba(4, 15, 10, .8));
  box-shadow:
    0 14px 30px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.game-page .resource-row::before {
  display: none;
}

.game-page .resource-row > div {
  min-height: 56px;
  padding: 7px 5px;
  border: 1px solid rgba(255, 240, 182, .08);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.1), transparent 36%),
    linear-gradient(180deg, rgba(7, 24, 15, .78), rgba(1, 9, 6, .52));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.game-page .resource-row .goal-stat {
  gap: 4px;
  padding: 7px 6px 6px;
  background:
    radial-gradient(circle at 50% 0, rgba(112, 228, 132, .2), transparent 45%),
    linear-gradient(180deg, rgba(18, 54, 30, .82), rgba(4, 20, 12, .66));
}

.game-page .resource-row .metric-label {
  color: rgba(255, 242, 204, .58);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
}

.game-page .resource-row strong {
  margin-top: 1px;
  color: #fff8df;
  font-size: clamp(22px, 7.4vw, 31px);
  font-weight: 900;
  line-height: .92;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.game-page .rate-inline,
.game-page .resource-row small {
  color: rgba(255, 242, 204, .64);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.game-page .next-goal-button {
  min-height: 31px;
  padding: 3px 7px 4px;
  border-radius: 13px;
  border-color: rgba(255, 255, 255, .16);
  color: #082012;
  background:
    radial-gradient(circle at 30% 0, rgba(255,255,255,.75), transparent 36%),
    linear-gradient(180deg, #baf6a8, #50d270 56%, #1fa85a);
  box-shadow:
    0 5px 0 rgba(9, 54, 23, .45),
    0 10px 18px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.42);
  font-size: clamp(9.5px, 2.8vw, 12px);
  font-weight: 900;
}

.game-page .goal-progress {
  height: 4px;
  background: rgba(0, 0, 0, .34);
}

.game-page .goal-progress span {
  background: linear-gradient(90deg, #67df72, #ffe17a 76%, #ff6f85);
}

.game-page .glade-stage {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 235, 158, .16);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 239, 153, .26), transparent 34%),
    url("./sprites/glade-premium.svg") center / cover no-repeat,
    linear-gradient(180deg, #173725, #0e2619);
  box-shadow:
    0 16px 34px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -42px 70px rgba(0,0,0,.24);
}

.game-page .glade-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255, 242, 151, .35), transparent 33%),
    linear-gradient(180deg, rgba(1, 10, 6, .02), transparent 52%, rgba(1, 10, 6, .32));
  pointer-events: none;
}

.game-page .glade-head {
  position: absolute;
  z-index: 8;
  top: 10px;
  left: 10px;
  right: 10px;
  min-height: 48px;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(255, 240, 187, .13);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(6, 24, 15, .74), rgba(6, 18, 12, .42));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(10px) saturate(1.08);
}

.game-page .glade-head span,
.game-page .glade-head em {
  color: rgba(255, 242, 204, .62);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .08em;
}

.game-page .glade-head strong {
  color: #fff8df;
  font-size: clamp(18px, 5.5vw, 25px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,.34);
}

.game-page .glade-head em {
  min-width: 0;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}

.game-page .bloom-track {
  position: absolute;
  z-index: 8;
  top: 66px;
  left: 17px;
  right: 17px;
  height: 5px;
  margin: 0;
  border-radius: 999px;
}

.game-page .bloom-copy {
  position: absolute;
  z-index: 8;
  top: 76px;
  left: 17px;
  right: 17px;
  margin: 0;
  min-height: 24px;
}

.game-page .bloom-copy small {
  color: rgba(255, 242, 204, .72);
  font-size: 8px;
  font-weight: 850;
}

.game-page .bloom-copy #nextBloomName {
  max-width: 58%;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 230, 146, .2);
  color: #fff5cf;
  background: rgba(8, 22, 14, .45);
  box-shadow: none;
}

.game-page .friend-scene {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.game-page .sky-glow {
  top: 15%;
  height: 62%;
  opacity: .82;
  filter: blur(2px);
}

.game-page .friend-scene .seed-button {
  position: absolute;
  left: 50%;
  bottom: -4%;
  width: min(72%, 292px);
  max-height: 70%;
  margin: 0;
  transform: translateX(-50%);
  background: url("./sprites/shroom-premium.svg") center bottom / contain no-repeat;
  filter:
    drop-shadow(0 10px 0 rgba(57, 10, 20, .2))
    drop-shadow(0 24px 24px rgba(0, 0, 0, .34));
}

.game-page .friend-scene.scene-tapped .seed-button,
.game-page .seed-button.is-pressed {
  transform: translateX(-50%) translateY(5px) scale(.985);
}

.game-page .root-ring {
  z-index: 4;
  bottom: 2%;
  width: min(74%, 300px);
  opacity: .58;
}

.game-page .rush-orbit {
  z-index: 5;
  width: min(68%, 260px);
}

.game-page .companion-row {
  z-index: 6;
  bottom: 5%;
  opacity: .9;
}

.game-page .orchard-visual {
  z-index: 3;
  bottom: 0;
  opacity: .72;
}

.game-page .moment-banner {
  left: 18px;
  right: 18px;
  bottom: calc(128px + env(safe-area-inset-bottom));
  min-height: 44px;
  padding: 7px 10px 7px 8px;
  border-radius: 15px;
}

.game-page .moment-banner strong {
  font-size: 12px;
  font-weight: 900;
}

.game-page .moment-banner span {
  font-size: 9px;
  font-weight: 750;
}

.game-page .combo-badge {
  align-self: center;
  min-height: 18px;
  color: rgba(255, 242, 204, .72);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}

.game-page .skill-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 56px;
  padding: 6px;
  border: 1px solid rgba(255, 238, 169, .12);
  border-radius: 18px;
  background: rgba(4, 17, 11, .78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}

.game-page .skill-row button,
.game-page .bottom-tabs button,
.game-page .store-item button,
.game-page .quest-item button,
.game-page .save-tools button,
.game-page .leaderboard-tools button {
  min-height: 40px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: none;
}

.game-page .skill-row button {
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 5px 0 rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.game-page .bottom-tabs {
  min-height: 58px;
  padding: 6px;
  border: 1px solid rgba(255, 238, 169, .14);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(8, 25, 16, .9), rgba(3, 12, 8, .86));
  box-shadow:
    0 14px 30px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.1);
}

.game-page .bottom-tabs button {
  color: rgba(255, 242, 204, .62);
  background: transparent;
  box-shadow: none;
}

.game-page .bottom-tabs button[aria-pressed="true"] {
  color: #082012;
  background:
    radial-gradient(circle at 30% 0, rgba(255,255,255,.72), transparent 38%),
    linear-gradient(180deg, #a9f4a6, #54d36f 58%, #28ad5d);
  box-shadow:
    0 5px 0 rgba(5, 44, 18, .42),
    0 10px 18px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.36);
}

body[data-tab="store"] .store-grid,
body[data-tab="quests"] .log-grid,
body[data-tab="board"] .log-grid {
  height: 100%;
  overflow: auto;
  padding: 2px 0 4px;
  align-content: start;
  scrollbar-width: none;
}

body[data-tab="store"] .store-grid::-webkit-scrollbar,
body[data-tab="quests"] .log-grid::-webkit-scrollbar,
body[data-tab="board"] .log-grid::-webkit-scrollbar {
  display: none;
}

body[data-tab="store"] .store-grid {
  grid-template-rows: auto auto auto;
  gap: 9px;
}

.game-page .store-panel,
.game-page .quest-panel,
.game-page .badges-panel,
.game-page .session-panel,
.game-page .leaderboard-panel {
  padding: 12px;
  border: 1px solid rgba(255, 238, 169, .13);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 236, 150, .1), transparent 34%),
    linear-gradient(180deg, rgba(9, 29, 18, .86), rgba(4, 17, 11, .78));
  box-shadow:
    0 14px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.1);
}

.game-page .section-head {
  min-height: 28px;
  padding: 0 0 9px;
  align-items: center;
}

.game-page .section-head h2 {
  color: #fff8df;
  font-size: clamp(22px, 7vw, 30px);
  font-weight: 900;
  line-height: 1;
  text-transform: none;
}

.game-page .section-head span {
  color: rgba(255, 220, 122, .72);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
}

.game-page .store-list,
.game-page .quest-list,
.game-page .achievement-list,
.game-page .leaderboard-list {
  display: grid;
  gap: 8px;
}

.game-page .store-item,
.game-page .store-item.garden-card,
.game-page .store-item.recommended,
.game-page .store-item.waiting,
.game-page .quest-item,
.game-page .achievement,
.game-page .leaderboard-row,
.game-page .leaderboard-empty {
  min-height: 0;
  padding: 10px;
  border: 1px solid rgba(255, 239, 183, .13);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 0, rgba(255,255,255,.12), transparent 32%),
    linear-gradient(180deg, rgba(28, 58, 39, .82), rgba(8, 23, 15, .72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 8px 18px rgba(0,0,0,.18);
}

.game-page .store-item.garden-card,
.game-page .colony-panel .store-list .garden-card,
.game-page .colony-panel .store-list:has(.garden-card + .garden-card) .garden-card,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card {
  min-height: 104px;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

.game-page .store-item.garden-card button,
.game-page .colony-panel .store-list .garden-card button,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card button {
  grid-column: 3;
  min-width: 76px;
  max-width: 86px;
  min-height: 38px;
  padding: 0 8px;
  white-space: normal;
}

.game-page .store-copy h3,
.game-page .friend-copy h3,
.game-page .achievement strong {
  color: #fff8df;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.04;
}

.game-page .store-copy p,
.game-page .store-item p,
.game-page .friend-copy p,
.game-page .quest-item p,
.game-page .achievement span {
  color: rgba(255, 242, 204, .68);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.18;
}

.game-page .owned {
  color: #ff7890;
  font-size: 9.5px;
  font-weight: 900;
}

.game-page .store-visual,
.game-page .colony-panel .store-list .garden-card .store-visual,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card .store-visual {
  width: 42px;
  height: 42px;
  border-color: rgba(255, 239, 183, .2);
}

.game-page .charms-panel .store-item,
.game-page .perks-panel .store-item {
  min-height: 58px;
}

.game-page .charms-panel .store-item button,
.game-page .perks-panel .store-item button {
  min-width: 84px;
}

@media (min-width: 700px) and (min-height: 720px) {
  .game-page .phone-frame {
    height: min(900px, calc(100vh - 32px));
    min-height: 700px;
    margin: 16px auto;
    border: 10px solid rgba(3, 7, 5, .94);
    border-radius: 34px;
    box-shadow:
      0 34px 90px rgba(0,0,0,.5),
      inset 0 0 0 1px rgba(255,255,255,.06);
  }
}

@media (max-height: 720px) {
  .game-page .game-shell {
    gap: 6px;
    padding-top: max(7px, env(safe-area-inset-top));
  }

  .game-page .resource-row {
    min-height: 64px;
  }

  .game-page .resource-row strong {
    font-size: 21px;
  }

  .game-page .glade-head {
    min-height: 42px;
  }

  .game-page .bloom-track {
    top: 58px;
  }

  .game-page .bloom-copy {
    top: 66px;
  }

  .game-page .skill-row,
  .game-page .bottom-tabs {
    min-height: 50px;
  }
}

/* Hard QA pass: reduce toy-web weight and keep the first screen calm. */
body.game-page {
  background:
    radial-gradient(circle at 50% -14%, rgba(242, 205, 113, .18), transparent 30%),
    radial-gradient(circle at 12% 20%, rgba(67, 164, 102, .14), transparent 34%),
    linear-gradient(180deg, #06120e 0%, #0b1b13 58%, #102619 100%);
}

.game-page .phone-frame {
  background:
    radial-gradient(circle at 50% 0, rgba(249, 217, 129, .09), transparent 24%),
    linear-gradient(180deg, #0b1e16 0%, #102719 58%, #0b1f15 100%);
}

.game-page .resource-row {
  min-height: 58px;
  padding: 5px;
  gap: 5px;
  border-radius: 16px;
}

.game-page .resource-row > div {
  min-height: 46px;
  padding: 5px 4px;
  border-radius: 12px;
  border-color: rgba(255, 240, 182, .06);
  background: rgba(3, 13, 8, .32);
}

.game-page .resource-row .goal-stat {
  padding: 5px;
  background:
    radial-gradient(circle at 50% 0, rgba(112, 228, 132, .14), transparent 42%),
    rgba(4, 21, 12, .46);
}

.game-page .resource-row .metric-label {
  font-size: 6.5px;
}

.game-page .resource-row strong {
  font-size: clamp(18px, 6.2vw, 25px);
  font-weight: 850;
}

.game-page .rate-inline,
.game-page .resource-row small {
  font-size: 8px;
}

.game-page .next-goal-button {
  min-height: 25px;
  padding: 2px 6px 3px;
  border-radius: 10px;
  font-size: clamp(8.5px, 2.45vw, 10.5px);
}

.game-page .goal-progress {
  height: 3px;
}

.game-page .glade-stage {
  border-radius: 23px;
}

.game-page .glade-head {
  top: 8px;
  left: 8px;
  right: 8px;
  min-height: 42px;
  padding: 6px 8px;
  border-radius: 15px;
}

.game-page .glade-head strong {
  font-size: clamp(15px, 4.6vw, 21px);
}

.game-page .glade-head span,
.game-page .glade-head em {
  font-size: 6.5px;
}

.game-page .bloom-track {
  top: 56px;
  left: 14px;
  right: 14px;
  height: 4px;
}

.game-page .bloom-copy {
  top: 64px;
  left: 14px;
  right: 14px;
}

.game-page .bloom-copy #nextBloomName,
.game-page .bloom-copy #nextBloomName[data-ready="true"] {
  min-height: 21px;
  max-width: 52%;
  padding: 3px 8px;
  border-color: rgba(255, 230, 146, .16);
  color: rgba(255, 244, 211, .82);
  background: rgba(7, 22, 14, .44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  animation: none;
}

.game-page .bloom-copy #nextBloomName[data-ready="true"] {
  display: none;
}

.game-page .friend-scene .seed-button {
  bottom: 2%;
  width: min(55%, 224px);
  max-height: 58%;
}

.game-page .root-ring {
  bottom: 9%;
  width: min(58%, 238px);
  opacity: .48;
}

.game-page .rush-orbit {
  width: min(54%, 220px);
}

.game-page .moment-banner {
  bottom: calc(118px + env(safe-area-inset-bottom));
}

.game-page .combo-badge {
  min-height: 16px;
  font-size: 11px;
}

.game-page .skill-row {
  min-height: 50px;
  padding: 5px;
  border-radius: 16px;
}

.game-page .skill-row button,
.game-page .bottom-tabs button,
.game-page .store-item button,
.game-page .quest-item button,
.game-page .save-tools button,
.game-page .leaderboard-tools button {
  min-height: 34px;
  border-radius: 12px;
  font-size: 10.5px;
}

.game-page .bottom-tabs {
  min-height: 52px;
  padding: 5px;
  border-radius: 17px;
}

.game-page .store-panel,
.game-page .quest-panel,
.game-page .badges-panel,
.game-page .session-panel,
.game-page .leaderboard-panel {
  padding: 10px;
  border-radius: 18px;
}

.game-page .section-head h2 {
  font-size: clamp(20px, 6.2vw, 26px);
}

.game-page .charms-panel .section-head,
.game-page .perks-panel .section-head {
  gap: 10px;
}

.game-page .charms-panel .section-head h2,
.game-page .perks-panel .section-head h2 {
  min-width: 0;
  font-size: clamp(18px, 5vw, 22px);
  white-space: nowrap;
}

.game-page .charms-panel .section-head span,
.game-page .perks-panel .section-head span {
  flex: 1 1 auto;
}

.game-page .store-item.garden-card,
.game-page .colony-panel .store-list .garden-card,
.game-page .colony-panel .store-list:has(.garden-card + .garden-card) .garden-card,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card {
  min-height: 86px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
}

.game-page .store-copy h3,
.game-page .friend-copy h3,
.game-page .achievement strong {
  font-size: 13.5px;
}

.game-page .store-copy p,
.game-page .store-item p,
.game-page .friend-copy p,
.game-page .quest-item p,
.game-page .achievement span {
  font-size: 9px;
}

.game-page .owned {
  font-size: 8.5px;
}

.game-page .store-visual,
.game-page .colony-panel .store-list .garden-card .store-visual,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card .store-visual {
  width: 36px;
  height: 36px;
}

.game-page .store-item.garden-card button,
.game-page .colony-panel .store-list .garden-card button,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card button {
  min-width: 68px;
  max-width: 78px;
  min-height: 34px;
}

/* Premium casual mobile skin: remove prototype-heavy chrome, bevels, and empty-stage weight. */
body.game-page {
  --game-ink: #183329;
  --game-muted: #5f7569;
  --game-panel: rgba(255, 252, 236, .94);
  --game-panel-2: rgba(246, 255, 238, .88);
  --game-line: rgba(41, 91, 65, .16);
  --game-green: #28c96d;
  --game-green-2: #0fa95a;
  --game-gold: #f1b955;
  --game-berry: #e45f7b;
  --game-sky: #9edcf2;
  --game-font: Inter, "Segoe UI Variable", "Segoe UI", ui-rounded, system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 238, 154, .55), transparent 32%),
    radial-gradient(circle at 15% 15%, rgba(129, 214, 179, .32), transparent 34%),
    linear-gradient(180deg, #e7f7d9 0%, #bdebc6 42%, #23624a 100%);
  color: var(--game-ink);
  font-family: var(--game-font);
}

.game-page .phone-frame {
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 250, 184, .5), transparent 28%),
    linear-gradient(180deg, #dff8d8 0%, #bdeac4 48%, #317653 100%);
  color: var(--game-ink);
}

.game-page .game-shell {
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
}

.game-page .resource-row {
  min-height: 58px;
  padding: 5px;
  gap: 5px;
  border: 1px solid rgba(53, 100, 69, .18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 243, .96), rgba(232, 249, 224, .91));
  box-shadow:
    0 10px 24px rgba(26, 79, 49, .18),
    inset 0 1px 0 rgba(255, 255, 255, .86);
}

.game-page .resource-row::before,
.game-page .resource-row::after,
.game-page .skill-row::before,
.game-page .skill-row::after,
.game-page .bottom-tabs::before,
.game-page .bottom-tabs::after,
.game-page .store-panel::before,
.game-page .quest-panel::before,
.game-page .badges-panel::before,
.game-page .session-panel::before,
.game-page .leaderboard-panel::before {
  display: none !important;
}

.game-page .resource-row > div,
.game-page .resource-row .goal-stat {
  min-height: 47px;
  padding: 5px 4px;
  border: 1px solid rgba(36, 88, 61, .1);
  border-radius: 13px;
  background: rgba(255, 255, 248, .56);
  box-shadow: none;
}

.game-page .resource-row .metric-label,
.game-page .glade-head span,
.game-page .glade-head em,
.game-page .section-head span {
  color: rgba(43, 73, 58, .68);
  font-family: var(--game-font);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .07em;
}

.game-page .resource-row strong,
.game-page .glade-head strong,
.game-page .section-head h2 {
  color: #172d23;
  font-family: var(--game-font);
  text-shadow: none;
}

.game-page .resource-row strong {
  font-size: clamp(17px, 5.8vw, 24px);
  font-weight: 900;
  line-height: .95;
}

.game-page .rate-inline,
.game-page .resource-row small {
  color: rgba(42, 67, 54, .72);
  font-size: 8px;
  font-weight: 800;
}

.game-page .next-goal-button {
  min-height: 28px;
  color: #082714;
  border: 1px solid rgba(13, 106, 53, .2);
  border-radius: 12px;
  background:
    linear-gradient(180deg, #8bf3a5 0%, #38d878 58%, #17b760 100%);
  box-shadow:
    0 4px 0 rgba(11, 112, 53, .28),
    0 8px 15px rgba(30, 129, 76, .2),
    inset 0 1px 0 rgba(255, 255, 255, .64);
  font-family: var(--game-font);
  font-size: clamp(8.5px, 2.35vw, 10px);
  font-weight: 900;
}

.game-page .goal-progress {
  height: 3px;
  background: rgba(30, 77, 50, .13);
}

.game-page .goal-progress span {
  background: linear-gradient(90deg, #12c565, #f4c65e 74%, #e75b78);
}

.game-page .glade-stage {
  border: 1px solid rgba(47, 97, 73, .2);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 246, 161, .58), transparent 28%),
    radial-gradient(circle at 58% 22%, rgba(157, 219, 239, .6), transparent 37%),
    linear-gradient(180deg, #9ddaf0 0%, #b6e8ba 46%, #63bf76 72%, #2d8554 100%);
  box-shadow:
    0 16px 32px rgba(20, 82, 48, .22),
    inset 0 1px 0 rgba(255, 255, 255, .58);
}

.game-page .glade-stage::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 24%),
    radial-gradient(ellipse at 52% 72%, rgba(255, 248, 169, .24), transparent 28%),
    linear-gradient(180deg, transparent 54%, rgba(28, 106, 54, .18));
}

.game-page .glade-stage::after {
  content: "";
  position: absolute;
  inset: auto -8% 0;
  height: 38%;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(20, 85, 44, .42), transparent 65%),
    linear-gradient(150deg, rgba(23, 130, 65, .62), rgba(102, 202, 94, .34));
  clip-path: ellipse(70% 46% at 50% 100%);
  pointer-events: none;
}

.game-page .sky-glow {
  top: 8%;
  height: 48%;
  opacity: .55;
  filter: blur(8px);
}

.game-page .sunbeam {
  opacity: .3;
}

.game-page .cloud {
  opacity: .32;
  filter: blur(.5px);
}

.game-page .meadow-hill {
  opacity: .76;
}

.game-page .canopy-shadow {
  opacity: .18;
}

.game-page .glade-head {
  top: 8px;
  left: 8px;
  right: 8px;
  min-height: 43px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(255, 255, 245, .92), rgba(238, 252, 226, .84));
  box-shadow:
    0 8px 18px rgba(32, 91, 58, .13),
    inset 0 1px 0 rgba(255, 255, 255, .78);
  backdrop-filter: blur(12px) saturate(1.12);
}

.game-page .glade-head strong {
  font-size: clamp(15px, 4.5vw, 20px);
  font-weight: 900;
}

.game-page .glade-head em {
  color: rgba(39, 88, 58, .82);
  background: rgba(37, 186, 103, .14);
}

.game-page .sound-button {
  border-color: rgba(31, 91, 58, .14);
  background: rgba(255, 255, 245, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.game-page .sound-button span,
.game-page .sound-button::after {
  background: #de5d74;
}

.game-page .bloom-track {
  top: 56px;
  left: 16px;
  right: 16px;
  height: 4px;
  background: rgba(34, 95, 57, .14);
}

.game-page .bloom-copy {
  top: 65px;
  left: 16px;
  right: 16px;
}

.game-page .bloom-copy small {
  color: rgba(33, 80, 54, .76);
  font-family: var(--game-font);
  font-size: 8px;
  font-weight: 850;
}

.game-page .bloom-copy #nextBloomName {
  color: rgba(29, 70, 50, .74);
  background: rgba(255, 255, 244, .7);
}

.game-page .friend-scene .seed-button {
  z-index: 8;
  bottom: 5%;
  width: min(63%, 258px);
  max-height: 62%;
  filter:
    drop-shadow(0 10px 0 rgba(126, 37, 58, .1))
    drop-shadow(0 22px 26px rgba(33, 97, 59, .26));
}

.game-page .friend-scene.scene-tapped .seed-button,
.game-page .seed-button.is-pressed {
  transform: translateX(-50%) translateY(4px) scale(.986);
}

.game-page .root-ring {
  z-index: 5;
  left: 50%;
  top: auto;
  bottom: 17%;
  width: min(40vw, 160px);
  height: min(40vw, 160px);
  transform: translateX(-50%);
  opacity: .24;
  border: 0;
  border-radius: 50%;
  background:
    conic-gradient(from -90deg, #f2c95c var(--bloom, 0%), rgba(255,255,255,.28) 0),
    radial-gradient(circle, transparent 58%, rgba(255, 236, 139, .72) 60%, transparent 68%);
  filter: none;
  box-shadow: 0 0 22px rgba(255, 222, 102, .2);
}

.game-page .root-ring::before,
.game-page .root-ring::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255, 245, 174, .45);
  border-radius: 50%;
  background: transparent;
}

.game-page .root-ring::after {
  inset: 18px;
  border-style: solid;
  opacity: .5;
}

.game-page .rush-orbit {
  opacity: 0;
  transform: scale(.7);
}

.game-page .rush-orbit.active {
  opacity: .58;
}

.game-page .orchard-visual {
  z-index: 4;
  bottom: 1%;
  opacity: .62;
}

.game-page .companion-row {
  z-index: 7;
  bottom: 8%;
}

.game-page .moment-banner {
  left: 20px;
  right: 20px;
  bottom: calc(116px + env(safe-area-inset-bottom));
  min-height: 42px;
  border: 1px solid rgba(67, 107, 70, .16);
  border-radius: 18px;
  color: #183329;
  background:
    linear-gradient(180deg, rgba(255, 255, 244, .95), rgba(232, 249, 220, .92));
  box-shadow:
    0 12px 26px rgba(31, 93, 56, .18),
    inset 0 1px 0 rgba(255, 255, 255, .78);
}

.game-page .moment-banner strong,
.game-page .moment-banner span {
  color: #183329;
  font-family: var(--game-font);
  text-shadow: none;
}

.game-page .moment-banner span {
  color: rgba(42, 77, 58, .72);
}

.game-page .combo-badge {
  color: rgba(33, 70, 51, .68);
  font-family: var(--game-font);
  font-size: 10px;
  text-shadow: none;
}

.game-page .skill-row {
  min-height: 49px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.game-page .skill-row button,
.game-page .bottom-tabs button,
.game-page .store-item button,
.game-page .quest-item button,
.game-page .save-tools button,
.game-page .leaderboard-tools button {
  color: #133226;
  border: 1px solid rgba(27, 88, 53, .14);
  border-radius: 17px;
  font-family: var(--game-font);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: none;
}

.game-page .skill-row button {
  min-height: 45px;
  background:
    linear-gradient(180deg, rgba(255, 255, 248, .92), rgba(231, 249, 222, .86));
  box-shadow:
    0 7px 15px rgba(27, 88, 54, .18),
    inset 0 1px 0 rgba(255, 255, 255, .82);
}

.game-page .skill-row #dewSkillButton {
  background: linear-gradient(180deg, #d9fff3, #74d6c0);
}

.game-page .skill-row #boostSkillButton {
  background: linear-gradient(180deg, #fff1bd, #efbd5c);
}

.game-page .skill-row #bloomSkillButton {
  background: linear-gradient(180deg, #ffd3df, #e76481);
}

.game-page .skill-row button:disabled,
.game-page .store-item button:disabled,
.game-page .quest-item button:disabled {
  color: rgba(62, 72, 63, .58);
  background: linear-gradient(180deg, #f8f7ea, #d9dece);
  box-shadow: none;
}

.game-page .bottom-tabs {
  min-height: 52px;
  padding: 5px;
  border: 1px solid rgba(42, 94, 63, .16);
  border-radius: 22px;
  background: rgba(255, 255, 244, .92);
  box-shadow:
    0 14px 28px rgba(17, 73, 43, .2),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

.game-page .bottom-tabs button {
  color: rgba(39, 66, 51, .58);
  background: transparent;
  box-shadow: none;
}

.game-page .bottom-tabs button[aria-pressed="true"] {
  color: #083018;
  background: linear-gradient(180deg, #8ff5a7, #24c96d);
  box-shadow:
    0 6px 14px rgba(27, 150, 75, .24),
    inset 0 1px 0 rgba(255, 255, 255, .64);
}

body[data-tab="store"] .store-grid,
body[data-tab="quests"] .log-grid,
body[data-tab="board"] .log-grid {
  background:
    radial-gradient(circle at 50% 0, rgba(255, 240, 166, .35), transparent 34%),
    linear-gradient(180deg, rgba(225, 248, 216, .96), rgba(102, 171, 107, .38));
  border-radius: 24px;
}

.game-page .store-panel,
.game-page .quest-panel,
.game-page .badges-panel,
.game-page .session-panel,
.game-page .leaderboard-panel {
  border: 1px solid rgba(46, 96, 64, .14);
  border-radius: 22px;
  color: var(--game-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 245, .96), rgba(236, 251, 224, .92));
  box-shadow:
    0 12px 26px rgba(28, 93, 55, .16),
    inset 0 1px 0 rgba(255, 255, 255, .85);
}

.game-page .section-head {
  min-height: 31px;
  padding-bottom: 8px;
}

.game-page .section-head h2 {
  font-size: clamp(19px, 5.6vw, 25px);
  font-weight: 900;
  letter-spacing: 0;
}

.game-page .store-item,
.game-page .store-item.garden-card,
.game-page .store-item.recommended,
.game-page .store-item.waiting,
.game-page .quest-item,
.game-page .achievement,
.game-page .leaderboard-row,
.game-page .leaderboard-empty {
  border: 1px solid rgba(42, 91, 60, .13);
  border-radius: 20px;
  color: var(--game-ink);
  background:
    linear-gradient(180deg, rgba(255, 254, 245, .96), rgba(242, 251, 230, .92));
  box-shadow:
    0 8px 18px rgba(25, 87, 52, .11),
    inset 0 1px 0 rgba(255, 255, 255, .82);
}

.game-page .store-item.recommended {
  border-color: rgba(35, 194, 100, .3);
  box-shadow:
    0 9px 20px rgba(37, 154, 85, .16),
    inset 0 1px 0 rgba(255, 255, 255, .82);
}

.game-page .store-item.garden-card,
.game-page .colony-panel .store-list .garden-card,
.game-page .colony-panel .store-list:has(.garden-card + .garden-card) .garden-card,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card {
  min-height: 82px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 9px;
}

.game-page .store-visual,
.game-page .colony-panel .store-list .garden-card .store-visual,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card .store-visual {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, .72);
  box-shadow:
    0 7px 14px rgba(36, 94, 60, .18),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}

.game-page .store-copy h3,
.game-page .friend-copy h3,
.game-page .achievement strong {
  color: #172d23;
  font-family: var(--game-font);
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: none;
}

.game-page .store-copy p,
.game-page .store-item p,
.game-page .friend-copy p,
.game-page .quest-item p,
.game-page .achievement span {
  color: rgba(47, 70, 57, .74);
  font-family: var(--game-font);
  font-size: 9px;
  font-weight: 750;
}

.game-page .owned {
  color: #d44f70;
  font-family: var(--game-font);
  font-size: 8.5px;
  font-weight: 900;
}

.game-page .store-item.garden-card button,
.game-page .colony-panel .store-list .garden-card button,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card button {
  min-width: 72px;
  max-width: 82px;
  min-height: 34px;
  color: #133226;
  border-color: rgba(135, 89, 22, .12);
  background: linear-gradient(180deg, #fff2bd, #efbf62);
  box-shadow:
    0 5px 0 rgba(154, 99, 28, .22),
    0 8px 14px rgba(144, 102, 36, .12);
}

.game-page .store-item.garden-card.recommended button:not(:disabled) {
  border-color: rgba(10, 115, 55, .18);
  background: linear-gradient(180deg, #9af4a5, #27c96d);
  box-shadow:
    0 5px 0 rgba(12, 112, 53, .24),
    0 8px 14px rgba(28, 132, 73, .14);
}

.game-page .charms-panel,
.game-page .perks-panel {
  display: block;
  min-height: 0;
  padding: 10px;
}

.game-page .charms-panel .section-head,
.game-page .perks-panel .section-head {
  min-height: 28px;
  padding-bottom: 8px;
}

.game-page .charms-panel .section-head h2,
.game-page .perks-panel .section-head h2 {
  font-size: clamp(17px, 4.9vw, 21px);
}

.game-page .charms-panel .store-list,
.game-page .perks-panel .store-list {
  display: grid;
  gap: 8px;
}

.game-page .charms-panel .section-head::after,
.game-page .perks-panel .section-head::after {
  display: none;
}

.game-page .charms-panel .store-item,
.game-page .perks-panel .store-item,
.game-page .charms-panel .store-item.waiting,
.game-page .perks-panel .store-item.waiting {
  display: grid;
  min-height: 68px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
}

.game-page .charms-panel .store-item button,
.game-page .perks-panel .store-item button {
  min-width: 72px;
  max-width: 86px;
  grid-column: 3;
  grid-row: 1;
}

.game-page .charms-panel .store-item.waiting,
.game-page .perks-panel .store-item.waiting {
  grid-template-columns: 38px minmax(0, 1fr);
}

.game-page .charms-panel .store-copy,
.game-page .perks-panel .store-copy {
  grid-column: 2;
}

.game-page .charms-panel .store-visual,
.game-page .perks-panel .store-visual {
  width: 36px;
  height: 36px;
}

@media (min-width: 700px) and (min-height: 720px) {
  .game-page .phone-frame {
    border: 10px solid #0e1a14;
    box-shadow:
      0 34px 90px rgba(0, 0, 0, .35),
      0 0 0 1px rgba(255,255,255,.08) inset;
  }
}

/* Secondary tabs must feel finished too: compact quests and leaderboard instead of oversized blank cards. */
body[data-tab="quests"] .log-grid,
body[data-tab="board"] .log-grid {
  align-content: start;
  grid-template-rows: auto;
  gap: 8px;
}

.game-page .quest-panel {
  display: block;
}

.game-page .quest-list {
  grid-template-rows: none;
  gap: 8px;
}

.game-page .friend-card,
.game-page .quest-item.friend-card {
  min-height: 112px;
  grid-template-columns: 54px minmax(0, 1fr) 74px;
  gap: 10px;
  padding: 10px;
}

.game-page .friend-token {
  width: 48px;
  height: 48px;
}

.game-page .friend-copy h3 {
  font-size: 14px;
}

.game-page .friend-copy p {
  font-size: 9px;
  line-height: 1.2;
  -webkit-line-clamp: 2;
}

.game-page .friend-card .owned {
  font-size: 8.5px;
}

.game-page .friend-card button {
  min-width: 68px;
  min-height: 34px;
  padding: 0 8px;
}

.game-page .leaderboard-panel {
  display: block;
}

.game-page .leaderboard-tools {
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 8px;
}

.game-page .leaderboard-tools input {
  min-height: 42px;
  color: var(--game-ink);
  border: 1px solid rgba(42, 91, 60, .18);
  border-radius: 15px;
  background: rgba(255, 255, 244, .74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.game-page .leaderboard-empty {
  height: auto;
  min-height: 420px;
  align-content: center;
  gap: 10px;
  padding: 18px;
  text-align: center;
}

.game-page .leaderboard-empty::before {
  width: 82px;
  height: 96px;
  margin: 0 auto 10px;
  box-shadow:
    inset 0 -10px 0 rgba(67, 104, 58, .16),
    0 10px 18px rgba(46, 103, 67, .14);
}

.game-page .leaderboard-empty strong {
  color: var(--game-ink);
  font-family: var(--game-font);
  font-size: 24px;
}

.game-page .leaderboard-empty span,
.game-page .leaderboard-empty em,
.game-page .atlas-stats b {
  color: rgba(42, 68, 54, .76);
  font-family: var(--game-font);
  text-shadow: none;
}

/* App-store art pass: replace prototype scenery with rendered game assets. */
body.game-page {
  --game-ink: #132f24;
  --game-muted: #526b5e;
  --game-cream: rgba(255, 255, 242, .92);
  --game-cream-strong: rgba(255, 255, 246, .98);
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 224, 132, .46), transparent 34%),
    linear-gradient(180deg, #dff7d7 0%, #a9dfb9 52%, #1d563e 100%);
}

.game-page .phone-frame {
  background:
    radial-gradient(circle at 50% 2%, rgba(255, 240, 164, .42), transparent 28%),
    linear-gradient(180deg, #e6f9dd 0%, #b6e7bf 46%, #226346 100%);
}

.game-page .game-shell {
  gap: 7px;
  padding: max(9px, env(safe-area-inset-top)) 9px max(8px, env(safe-area-inset-bottom));
}

.game-page .resource-row {
  min-height: 56px;
  padding: 5px;
  gap: 5px;
  border-color: rgba(25, 91, 57, .18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 248, .96), rgba(241, 251, 232, .88));
  box-shadow:
    0 10px 22px rgba(20, 89, 48, .2),
    inset 0 1px 0 rgba(255, 255, 255, .88);
}

.game-page .resource-row > div,
.game-page .resource-row .goal-stat {
  min-height: 45px;
  border-radius: 13px;
  background: rgba(255, 255, 250, .48);
}

.game-page .resource-row .metric-label,
.game-page .glade-head span,
.game-page .glade-head em,
.game-page .section-head span {
  color: rgba(35, 69, 52, .66);
  font-size: 7px;
  font-weight: 850;
}

.game-page .resource-row strong {
  font-size: clamp(18px, 6.1vw, 25px);
  font-weight: 920;
}

.game-page .next-goal-button {
  min-height: 27px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 33% 0%, rgba(255, 255, 255, .76), transparent 35%),
    linear-gradient(180deg, #a6f6ae 0%, #3fd777 58%, #16ad5d 100%);
}

.game-page .glade-stage {
  border-radius: 27px;
  border-color: rgba(28, 95, 58, .2);
  background:
    linear-gradient(180deg, rgba(255, 252, 225, .08), rgba(12, 63, 36, .22) 72%, rgba(5, 42, 25, .42)),
    url("./sprites/meadow-premium-20260526.webp") center / cover no-repeat;
  box-shadow:
    0 18px 34px rgba(19, 89, 48, .24),
    inset 0 1px 0 rgba(255, 255, 255, .56),
    inset 0 -34px 60px rgba(8, 66, 36, .26);
}

.game-page .glade-stage::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 20%),
    radial-gradient(ellipse at 50% 70%, rgba(255, 244, 171, .16), transparent 34%),
    linear-gradient(180deg, transparent 52%, rgba(3, 51, 29, .24));
  mix-blend-mode: normal;
  opacity: 1;
}

.game-page .glade-stage::after {
  height: 46%;
  background:
    linear-gradient(180deg, transparent, rgba(7, 68, 38, .16) 38%, rgba(4, 50, 29, .36)),
    radial-gradient(ellipse at 50% 100%, rgba(6, 55, 32, .42), transparent 68%);
  clip-path: none;
}

.game-page .glade-head {
  top: 8px;
  left: 8px;
  right: 8px;
  min-height: 44px;
  border-color: rgba(255, 255, 255, .64);
  background:
    linear-gradient(180deg, rgba(255, 255, 247, .9), rgba(238, 252, 227, .76));
  box-shadow:
    0 8px 18px rgba(28, 90, 53, .16),
    inset 0 1px 0 rgba(255, 255, 255, .82);
}

.game-page .glade-head strong {
  max-width: 13ch;
  overflow: hidden;
  font-size: clamp(16px, 4.8vw, 21px);
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-page .bloom-copy #nextBloomName {
  background: rgba(255, 255, 246, .62);
}

.game-page .friend-scene .seed-button {
  bottom: 3%;
  width: min(74%, 304px);
  max-height: 70%;
  background: url("./sprites/shroom-premium-20260526.webp") center bottom / contain no-repeat;
  filter:
    drop-shadow(0 11px 0 rgba(102, 39, 31, .12))
    drop-shadow(0 24px 28px rgba(21, 84, 45, .32));
}

.game-page .scene-decor,
.game-page .orchard-visual,
.game-page .root-ring,
.game-page .rush-orbit {
  display: none;
}

.game-page .companion-row {
  bottom: 7%;
}

.game-page .moment-banner {
  bottom: calc(119px + env(safe-area-inset-bottom));
  border-color: rgba(43, 111, 63, .16);
  background:
    linear-gradient(180deg, rgba(255, 255, 247, .97), rgba(232, 250, 219, .92));
}

.game-page .skill-row {
  min-height: 50px;
  gap: 7px;
}

.game-page .skill-row button,
.game-page .bottom-tabs button,
.game-page .store-item button,
.game-page .quest-item button,
.game-page .save-tools button,
.game-page .leaderboard-tools button {
  min-height: 38px;
  border-radius: 15px;
  font-size: 10px;
}

.game-page .skill-row button {
  box-shadow:
    0 7px 16px rgba(31, 104, 60, .18),
    inset 0 1px 0 rgba(255, 255, 255, .82);
}

.game-page .bottom-tabs {
  min-height: 55px;
  padding: 5px;
  border-radius: 22px;
  background: rgba(255, 255, 246, .94);
  box-shadow:
    0 14px 28px rgba(16, 78, 45, .22),
    inset 0 1px 0 rgba(255, 255, 255, .94);
}

.game-page .bottom-tabs button {
  display: grid;
  grid-template-rows: 13px auto;
  gap: 2px;
  place-items: center;
  min-height: 43px;
  padding: 4px 3px 5px;
}

.game-page .bottom-tabs button::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(90, 121, 96, .58), rgba(49, 86, 64, .42));
}

.game-page .bottom-tabs button[data-tab-target="play"]::before {
  border-radius: 50% 50% 42% 42%;
  background:
    radial-gradient(circle at 52% 28%, #fff6ca 0 18%, transparent 19%),
    linear-gradient(180deg, #e95765 0 50%, #f7d391 51% 100%);
}

.game-page .bottom-tabs button[data-tab-target="store"]::before {
  border-radius: 5px 5px 9px 9px;
  background:
    radial-gradient(circle at 50% 24%, #fff4a9 0 19%, transparent 20%),
    linear-gradient(180deg, #80c269 0 52%, #4b8d45 53% 100%);
}

.game-page .bottom-tabs button[data-tab-target="quests"]::before {
  background:
    radial-gradient(circle at 36% 33%, #fff3d2 0 18%, transparent 19%),
    radial-gradient(circle at 68% 35%, #fff3d2 0 18%, transparent 19%),
    linear-gradient(180deg, #75d5c9, #4b9c9b);
}

.game-page .bottom-tabs button[data-tab-target="board"]::before {
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 26%, #fff1b4 0 18%, transparent 19%),
    linear-gradient(180deg, #f0c862 0 48%, #7fab67 49% 100%);
}

.game-page .bottom-tabs button[aria-pressed="true"] {
  background: linear-gradient(180deg, #9df5a9, #25c96d);
}

body[data-tab="store"] .store-grid,
body[data-tab="quests"] .log-grid,
body[data-tab="board"] .log-grid {
  background:
    linear-gradient(180deg, rgba(255, 252, 232, .22), rgba(16, 84, 45, .18)),
    url("./sprites/meadow-premium-20260526.webp") center / cover no-repeat,
    linear-gradient(180deg, #e5f7d8, #5fa36a);
  border-radius: 24px;
}

.game-page .store-panel,
.game-page .quest-panel,
.game-page .badges-panel,
.game-page .session-panel,
.game-page .leaderboard-panel {
  border-color: rgba(35, 91, 58, .16);
  background:
    linear-gradient(180deg, rgba(255, 255, 246, .94), rgba(237, 251, 225, .88));
  box-shadow:
    0 12px 26px rgba(29, 93, 55, .18),
    inset 0 1px 0 rgba(255, 255, 255, .86);
}

.game-page .store-item,
.game-page .store-item.garden-card,
.game-page .store-item.recommended,
.game-page .store-item.waiting,
.game-page .quest-item,
.game-page .achievement,
.game-page .leaderboard-row,
.game-page .leaderboard-empty {
  background:
    linear-gradient(180deg, rgba(255, 255, 249, .97), rgba(243, 251, 232, .93));
}

/* Game-quality pass: make the rendered art the product surface, not a backdrop behind web cards. */
body.game-page {
  --game-ink: #fff8df;
  --game-muted: rgba(255, 242, 204, .72);
  --game-dark: rgba(6, 22, 14, .82);
  --game-darker: rgba(2, 11, 7, .9);
  --game-line: rgba(255, 235, 164, .18);
  --game-green: #22ca68;
  --game-gold: #ffc95e;
  --game-coral: #f25b71;
  --game-blue: #6ed7e2;
  color: var(--game-ink);
  background:
    radial-gradient(circle at 50% -14%, rgba(255, 213, 106, .4), transparent 30%),
    linear-gradient(180deg, #1c4329 0%, #0b1d13 72%, #06100b 100%);
}

.game-page .phone-frame {
  background:
    linear-gradient(180deg, rgba(255, 233, 146, .1), transparent 18%),
    url("./sprites/meadow-premium-3d-20260526.webp") center / cover no-repeat,
    linear-gradient(180deg, #162d20, #07130d);
}

.game-page .game-shell {
  gap: 7px;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
}

body[data-tab="play"] .play-grid,
.game-page .tap-panel {
  position: relative;
  height: 100%;
  min-height: 0;
  display: block;
  overflow: hidden;
}

.game-page .tap-panel {
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}

.game-page .resource-row {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  grid-template-columns: .84fr 1.36fr .72fr;
  gap: 5px;
  min-height: 62px;
  padding: 6px;
  border: 1px solid var(--game-line);
  border-radius: 19px;
  background:
    linear-gradient(180deg, rgba(10, 35, 21, .9), rgba(4, 17, 11, .82));
  box-shadow:
    0 16px 24px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .13);
  backdrop-filter: blur(16px) saturate(1.15);
}

.game-page .resource-row > div,
.game-page .resource-row .goal-stat {
  min-height: 49px;
  padding: 6px 5px;
  border: 1px solid rgba(255, 238, 174, .1);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 236, 156, .14), transparent 38%),
    linear-gradient(180deg, rgba(15, 48, 28, .76), rgba(5, 20, 13, .55));
}

.game-page .resource-row .metric-label,
.game-page .glade-head span,
.game-page .glade-head em,
.game-page .section-head span {
  color: rgba(255, 242, 204, .68);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0;
}

.game-page .resource-row strong {
  color: #fff8dd;
  font-size: 27px;
  font-weight: 950;
  line-height: .9;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .45);
}

.game-page .rate-inline,
.game-page .resource-row small {
  color: rgba(255, 242, 204, .7);
  font-size: 10px;
  font-weight: 850;
}

.game-page .next-goal-button {
  min-height: 30px;
  max-width: 100%;
  padding: 3px 7px 4px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 13px;
  color: #071b0f;
  background:
    radial-gradient(circle at 30% 0, rgba(255, 255, 255, .82), transparent 36%),
    linear-gradient(180deg, #c6ff9e 0%, #55e277 56%, #17b25f 100%);
  box-shadow:
    0 5px 0 rgba(7, 63, 28, .52),
    0 11px 18px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .48);
  font-size: 11px;
  font-weight: 950;
}

.game-page .goal-progress {
  height: 4px;
  background: rgba(0, 0, 0, .38);
}

.game-page .goal-progress span {
  background: linear-gradient(90deg, #36df75 0%, #ffe26b 74%, #ff6579 100%);
}

.game-page .glade-stage {
  position: absolute;
  inset: 0;
  display: block;
  min-height: 0;
  margin: 0;
  border: 1px solid rgba(255, 232, 148, .18);
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 234, 132, .02), rgba(4, 30, 17, .08) 46%, rgba(0, 12, 8, .44) 100%),
    url("./sprites/meadow-premium-3d-20260526.webp") center bottom / cover no-repeat;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -70px 92px rgba(0, 28, 15, .48);
}

.game-page .glade-stage::before {
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 229, 136, .28), transparent 28%),
    radial-gradient(ellipse at 50% 84%, rgba(27, 155, 73, .18), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 24%, rgba(0, 16, 10, .28));
  opacity: 1;
  mix-blend-mode: normal;
}

.game-page .glade-stage::after {
  height: 52%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 34, 18, .18) 42%, rgba(0, 16, 9, .52) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 12, 7, .66), transparent 68%);
}

.game-page .glade-head {
  top: 73px;
  left: 10px;
  right: auto;
  width: min(282px, calc(100% - 20px));
  min-height: 48px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 238, 174, .14);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(8, 29, 18, .66), rgba(3, 17, 10, .46));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px) saturate(1.1);
}

.game-page .glade-head strong {
  color: #fff8df;
  max-width: 11ch;
  font-size: 21px;
  font-weight: 950;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .42);
}

.game-page .glade-head em {
  color: #0d2214;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: linear-gradient(180deg, #d8ffb4, #6edf7b);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
}

.game-page .sound-button {
  background: rgba(255, 249, 215, .92);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .22);
}

.game-page .bloom-track {
  top: 130px;
  left: 19px;
  right: 92px;
  height: 6px;
  background: rgba(0, 0, 0, .38);
}

.game-page .bloom-track span {
  background: linear-gradient(90deg, #34d670, #ffe46e 70%, #ff5d77);
}

.game-page .bloom-copy {
  top: 139px;
  left: 18px;
  right: 18px;
}

.game-page .bloom-copy small {
  color: rgba(255, 242, 204, .76);
  font-size: 9px;
  font-weight: 850;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.game-page .bloom-copy #nextBloomName {
  max-width: 46%;
  min-height: 24px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 238, 174, .16);
  color: #fff7d7;
  background: rgba(7, 25, 15, .54);
  box-shadow: none;
}

.game-page .friend-scene {
  height: 100%;
}

.game-page .friend-scene .seed-button {
  bottom: 8%;
  width: min(77%, 318px);
  max-height: 64%;
  background: url("./sprites/shroom-premium-3d-20260526.webp") center bottom / contain no-repeat;
  filter:
    drop-shadow(0 10px 0 rgba(76, 22, 15, .16))
    drop-shadow(0 28px 30px rgba(0, 0, 0, .4));
}

.game-page .friend-scene.scene-tapped .seed-button,
.game-page .seed-button.is-pressed {
  transform: translateX(-50%) translateY(7px) scale(.982);
  filter:
    drop-shadow(0 6px 0 rgba(76, 22, 15, .18))
    drop-shadow(0 18px 22px rgba(0, 0, 0, .36));
}

.game-page .companion-row {
  bottom: 13%;
}

.game-page .scene-decor,
.game-page .orchard-visual,
.game-page .root-ring,
.game-page .rush-orbit {
  display: none;
}

.game-page .combo-badge {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: 82px;
  transform: translateX(-50%);
  min-height: 20px;
  color: rgba(255, 245, 211, .86);
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .38);
}

.game-page .skill-row {
  position: absolute;
  z-index: 30;
  left: 8px;
  right: 8px;
  bottom: 8px;
  min-height: 58px;
  padding: 6px;
  border: 1px solid rgba(255, 238, 174, .16);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(7, 29, 17, .86), rgba(3, 14, 9, .84));
  box-shadow:
    0 18px 28px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .11);
  backdrop-filter: blur(14px) saturate(1.12);
}

.game-page .skill-row button,
.game-page .bottom-tabs button,
.game-page .store-item button,
.game-page .quest-item button,
.game-page .save-tools button,
.game-page .leaderboard-tools button {
  min-height: 42px;
  border-radius: 15px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.game-page .skill-row button {
  border: 1px solid rgba(255, 255, 255, .18);
  color: #20140b;
  box-shadow:
    0 5px 0 rgba(0, 0, 0, .24),
    0 11px 17px rgba(0, 0, 0, .2),
    inset 0 1px 0 rgba(255, 255, 255, .36);
}

.game-page .skill-row #dewSkillButton {
  background:
    radial-gradient(circle at 28% 0, rgba(255,255,255,.82), transparent 38%),
    linear-gradient(180deg, #b6fff0, #5fdcca 54%, #28a992);
}

.game-page .skill-row #boostSkillButton {
  background:
    radial-gradient(circle at 28% 0, rgba(255,255,255,.82), transparent 38%),
    linear-gradient(180deg, #ffe58d, #ffc762 54%, #dd9040);
}

.game-page .skill-row #bloomSkillButton {
  background:
    radial-gradient(circle at 28% 0, rgba(255,255,255,.78), transparent 38%),
    linear-gradient(180deg, #ffabc5, #ef5b7a 55%, #c64063);
}

.game-page .bottom-tabs {
  min-height: 58px;
  padding: 6px;
  border: 1px solid rgba(255, 238, 174, .16);
  border-radius: 21px;
  background: linear-gradient(180deg, rgba(9, 31, 20, .94), rgba(3, 13, 9, .92));
  box-shadow:
    0 16px 30px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .11);
}

.game-page .bottom-tabs button {
  color: rgba(255, 242, 204, .66);
  background: transparent;
  box-shadow: none;
}

.game-page .bottom-tabs button::before {
  width: 15px;
  height: 15px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .4);
}

.game-page .bottom-tabs button[aria-pressed="true"] {
  color: #071b0f;
  background:
    radial-gradient(circle at 28% 0, rgba(255, 255, 255, .8), transparent 36%),
    linear-gradient(180deg, #b9ff9c 0%, #55df78 56%, #19b964 100%);
  box-shadow:
    0 5px 0 rgba(6, 62, 27, .52),
    0 12px 20px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .42);
}

body[data-tab="store"] .store-grid,
body[data-tab="quests"] .log-grid,
body[data-tab="board"] .log-grid {
  height: 100%;
  padding: 0 0 4px;
  gap: 8px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(3, 16, 10, .34), rgba(0, 12, 7, .58)),
    url("./sprites/meadow-premium-3d-20260526.webp") center bottom / cover no-repeat;
}

.game-page .store-panel,
.game-page .quest-panel,
.game-page .badges-panel,
.game-page .session-panel,
.game-page .leaderboard-panel {
  border: 1px solid rgba(255, 238, 174, .14);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 224, 121, .1), transparent 34%),
    linear-gradient(180deg, rgba(7, 29, 18, .84), rgba(3, 14, 9, .72));
  box-shadow:
    0 16px 30px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px) saturate(1.1);
}

.game-page .section-head h2 {
  color: #fff8df;
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .38);
}

.game-page .store-item,
.game-page .store-item.garden-card,
.game-page .store-item.recommended,
.game-page .store-item.waiting,
.game-page .quest-item,
.game-page .achievement,
.game-page .leaderboard-row,
.game-page .leaderboard-empty {
  border: 1px solid rgba(255, 238, 174, .13);
  color: #fff8df;
  background:
    radial-gradient(circle at 16% 0, rgba(255, 239, 166, .12), transparent 34%),
    linear-gradient(180deg, rgba(19, 54, 31, .84), rgba(7, 25, 15, .74));
  box-shadow:
    0 10px 20px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

.game-page .store-item.garden-card,
.game-page .colony-panel .store-list .garden-card,
.game-page .colony-panel .store-list:has(.garden-card + .garden-card) .garden-card,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card,
.game-page .quest-item.friend-card {
  min-height: 92px;
  grid-template-columns: 58px minmax(0, 1fr) 78px;
  gap: 10px;
  padding: 10px;
}

.game-page .store-copy h3,
.game-page .friend-copy h3 {
  color: #fff8df;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.game-page .store-copy p,
.game-page .friend-copy p,
.game-page .quest-item p,
.game-page .achievement span,
.game-page .leaderboard-empty span,
.game-page .leaderboard-empty em {
  color: rgba(255, 242, 204, .72);
  font-size: 10px;
  font-weight: 780;
  line-height: 1.2;
}

.game-page .store-item .owned,
.game-page .quest-item .owned,
.game-page .friend-card .owned {
  color: #ff7a92;
  font-size: 10px;
  font-weight: 950;
}

.game-page .store-visual,
.game-page .colony-panel .store-list .garden-card .store-visual,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card .store-visual,
.game-page .friend-token {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 238, 174, .2);
  box-shadow:
    0 8px 14px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .32);
}

.game-page .store-item button,
.game-page .colony-panel .store-list .garden-card button,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card button,
.game-page .quest-item button {
  min-width: 76px;
  max-width: 88px;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #071b0f;
  background:
    radial-gradient(circle at 28% 0, rgba(255, 255, 255, .78), transparent 38%),
    linear-gradient(180deg, #ffd977, #ffbc53 58%, #da8f39);
  box-shadow:
    0 5px 0 rgba(86, 54, 14, .48),
    0 10px 16px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .38);
}

.game-page .store-item.recommended button:not(:disabled),
.game-page .quest-item.ready button:not(:disabled) {
  background:
    radial-gradient(circle at 28% 0, rgba(255, 255, 255, .82), transparent 38%),
    linear-gradient(180deg, #bcff9f, #54e077 58%, #18b864);
  box-shadow:
    0 5px 0 rgba(6, 62, 27, .5),
    0 10px 16px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .42);
}

.game-page .store-item button:disabled,
.game-page .quest-item button:disabled {
  color: rgba(255, 242, 204, .5);
  background: linear-gradient(180deg, rgba(255, 246, 207, .14), rgba(255, 246, 207, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.game-page .mini-progress,
.game-page .quest-progress {
  background: rgba(0, 0, 0, .36);
}

.game-page .mini-progress i,
.game-page .quest-progress span {
  background: linear-gradient(90deg, #36df75, #ffe46e 72%, #ff667c);
}

.game-page .leaderboard-empty {
  min-height: 312px;
}

.game-page .leaderboard-empty strong,
.game-page .atlas-card strong {
  color: #fff8df;
  font-size: 24px;
  font-weight: 950;
}

.game-page .atlas-stats b {
  color: #082012;
  background: linear-gradient(180deg, #bdf9a1, #55d975);
}

@media (max-height: 720px) {
  .game-page .resource-row {
    min-height: 56px;
    padding: 5px;
  }

  .game-page .resource-row strong {
    font-size: 23px;
  }

  .game-page .glade-head {
    top: 65px;
    min-height: 43px;
  }

  .game-page .bloom-track {
    top: 118px;
  }

  .game-page .bloom-copy {
    top: 126px;
  }

  .game-page .friend-scene .seed-button {
    bottom: 9%;
    width: min(71%, 286px);
  }

  .game-page .skill-row {
    min-height: 52px;
  }
}

.game-page .moment-banner {
  top: 158px;
  bottom: auto;
  left: 18px;
  right: auto;
  width: min(312px, calc(100% - 36px));
  min-height: 48px;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 9px;
  padding: 7px 10px 8px 7px;
  border: 1px solid rgba(255, 238, 174, .18);
  border-radius: 16px;
  color: #fff8df;
  background:
    radial-gradient(circle at 26px 50%, rgba(255, 244, 192, .18) 0 23px, transparent 24px),
    linear-gradient(180deg, rgba(8, 31, 19, .88), rgba(3, 14, 9, .8));
  box-shadow:
    0 14px 24px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px) saturate(1.1);
}

.game-page .moment-banner::before {
  width: 35px;
  border: 1px solid rgba(255, 238, 174, .24);
  box-shadow:
    0 5px 12px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}

.game-page .moment-banner strong {
  color: #fff8df;
  font-size: 14px;
  line-height: 1;
}

.game-page .moment-banner span {
  color: rgba(255, 242, 204, .74);
  font-size: 10px;
  line-height: 1.12;
}

.game-page .store-visual::before,
.game-page .friend-token::before {
  box-shadow: 0 0 10px rgba(255, 255, 255, .16);
}

.game-page .store-visual::after {
  content: "";
  position: absolute;
  inset: 7px 9px auto 9px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.game-page .root-thread {
  background:
    radial-gradient(ellipse at 50% 68%, rgba(93, 54, 28, .38) 0 22%, transparent 23%),
    repeating-linear-gradient(124deg, rgba(89, 52, 28, .28) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #f4d8a3, #be7d45 72%, #8f5b38);
}

.game-page .dew-cup {
  background:
    radial-gradient(circle at 51% 31%, #dffbff 0 20%, transparent 21%),
    radial-gradient(ellipse at 50% 72%, rgba(38, 113, 57, .35) 0 31%, transparent 32%),
    linear-gradient(180deg, #afe28d, #65aa62 65%, #3f7745);
}

.game-page .lantern-cap {
  background:
    radial-gradient(circle at 50% 30%, #fff3a6 0 23%, transparent 24%),
    radial-gradient(ellipse at 50% 80%, rgba(88, 13, 30, .34) 0 28%, transparent 29%),
    linear-gradient(180deg, #f8738d, #c34761 66%, #8d293f);
}

.game-page .charm-seed {
  background:
    radial-gradient(circle at 46% 34%, #fff2a7 0 20%, transparent 21%),
    radial-gradient(ellipse at 50% 78%, rgba(117, 20, 52, .34) 0 30%, transparent 31%),
    linear-gradient(180deg, #ff9fb5, #d75975 68%, #98324f);
}

.game-page .mycelium-knot {
  background:
    repeating-radial-gradient(circle at 48% 48%, rgba(255, 239, 128, .58) 0 4px, transparent 4px 10px),
    radial-gradient(circle at 50% 50%, rgba(120, 170, 91, .55), transparent 58%),
    linear-gradient(180deg, #efe0a5, #8ea966 68%, #536d3d);
}

@media (max-height: 720px) {
  .game-page .moment-banner {
    top: 142px;
    min-height: 44px;
  }
}

.game-page .friend-scene .seed-button {
  left: 50%;
  right: auto;
  color: transparent;
  font-size: 0;
  transform: translateX(-50%);
  animation: none;
}

.game-page .friend-scene.scene-tapped .seed-button,
.game-page .seed-button.is-pressed {
  transform: translateX(-50%) translateY(7px) scale(.982) !important;
  animation: shroomTapPulse .32s ease-out;
}

@keyframes shroomTapPulse {
  0% { transform: translateX(-50%) translateY(0) scale(1); filter: brightness(1) saturate(1); }
  42% { transform: translateX(-50%) translateY(7px) scale(.982); filter: brightness(1.08) saturate(1.06); }
  100% { transform: translateX(-50%) translateY(0) scale(1); filter: brightness(1) saturate(1); }
}

/* Retail mobile game pass: one coherent illustrated skin instead of mixed AI art and web panels. */
body.game-page {
  --retail-ink: #132b23;
  --retail-deep: #071611;
  --retail-panel: rgba(255, 253, 235, .94);
  --retail-panel-strong: rgba(255, 253, 241, .98);
  --retail-line: rgba(36, 88, 62, .16);
  --retail-muted: rgba(50, 77, 63, .68);
  --retail-green: #26c96d;
  --retail-green-dark: #118a51;
  --retail-gold: #f4bf4f;
  --retail-coral: #e85d75;
  --retail-teal: #4fc7bd;
  --retail-font: "Aptos Rounded", "Segoe UI Variable", "Segoe UI", Inter, ui-rounded, system-ui, sans-serif;
  min-height: 100svh;
  color: var(--retail-ink);
  background:
    radial-gradient(circle at 50% -16%, rgba(241, 196, 91, .22), transparent 32%),
    radial-gradient(circle at 10% 10%, rgba(54, 190, 126, .16), transparent 30%),
    linear-gradient(180deg, #081811 0%, #102919 56%, #07130e 100%) !important;
  font-family: var(--retail-font);
}

.game-page .phone-frame {
  width: min(100vw, 430px) !important;
  height: 100svh !important;
  min-height: 640px;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--retail-ink);
  background:
    linear-gradient(180deg, rgba(255, 235, 160, .08), transparent 18%),
    linear-gradient(180deg, #0d261a 0%, #183d28 58%, #0a1d14 100%) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.game-page .phone-frame::before,
.game-page .phone-frame::after,
.game-page .suite-topbar,
.game-page .hero-panel,
.game-page .ad-slot,
.game-page .side-panel {
  display: none !important;
}

.game-page .game-shell {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  width: 100% !important;
  height: 100% !important;
  padding: max(9px, env(safe-area-inset-top)) 9px max(8px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

.game-page .screen-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-tab="play"] .play-grid {
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.game-page .tap-panel {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 58px minmax(0, 1fr) 18px 52px !important;
  gap: 7px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.game-page .tap-panel::before,
.game-page .tap-panel::after {
  display: none !important;
}

.game-page .resource-row {
  position: relative !important;
  inset: auto !important;
  z-index: 20 !important;
  display: grid !important;
  grid-template-columns: .82fr 1.36fr .82fr !important;
  gap: 6px !important;
  min-height: 58px !important;
  padding: 5px !important;
  border: 1px solid rgba(255, 239, 183, .42) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 254, 239, .98), rgba(233, 249, 220, .94)) !important;
  box-shadow:
    0 10px 24px rgba(4, 20, 11, .28),
    inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  backdrop-filter: none !important;
}

.game-page .resource-row::before,
.game-page .resource-row::after {
  display: none !important;
}

.game-page .resource-row > div,
.game-page .resource-row .goal-stat {
  position: relative !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 5px 4px !important;
  border: 1px solid rgba(39, 91, 61, .1) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 247, .58) !important;
  box-shadow: none !important;
}

.game-page .skill-row #dewSkillButton,
.game-page .skill-row #boostSkillButton,
.game-page .skill-row #bloomSkillButton {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.game-page .resource-row > div::before {
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  margin-bottom: 1px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 36% 30%, #fff 0 18%, transparent 19%),
    linear-gradient(180deg, #ffd96b, #e88f3d) !important;
  box-shadow: 0 2px 6px rgba(22, 77, 46, .18) !important;
}

.game-page .resource-row > div:nth-child(2)::before {
  display: none !important;
}

.game-page .resource-row > div:nth-child(3)::before {
  background:
    radial-gradient(circle at 36% 30%, #fff 0 18%, transparent 19%),
    linear-gradient(180deg, #ff91a5, #d64263) !important;
}

.game-page .resource-row .metric-label {
  color: var(--retail-muted) !important;
  font-family: var(--retail-font) !important;
  font-size: 6.5px !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
}

.game-page .resource-row strong {
  margin: 0 !important;
  color: #14291f !important;
  font-family: var(--retail-font) !important;
  font-size: clamp(17px, 5.6vw, 24px) !important;
  font-weight: 900 !important;
  line-height: .9 !important;
  text-shadow: none !important;
}

.game-page .rate-inline,
.game-page .resource-row small {
  color: rgba(43, 69, 55, .72) !important;
  font-family: var(--retail-font) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.game-page .next-goal-button {
  min-height: 30px !important;
  width: 100% !important;
  max-width: 152px !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(8, 112, 54, .18) !important;
  border-radius: 12px !important;
  color: #062414 !important;
  background: linear-gradient(180deg, #a8f4aa, #36d775 62%, #18ad60) !important;
  box-shadow:
    0 4px 0 rgba(9, 96, 47, .28),
    0 8px 14px rgba(24, 125, 69, .16),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
  font-family: var(--retail-font) !important;
  font-size: clamp(9px, 2.5vw, 11px) !important;
  font-weight: 900 !important;
  text-transform: none !important;
}

.game-page .goal-progress {
  width: 100% !important;
  height: 3px !important;
  margin-top: 4px !important;
  border-radius: 999px !important;
  background: rgba(31, 88, 55, .16) !important;
}

.game-page .goal-progress span {
  background: linear-gradient(90deg, #20c96a, #eab94c 70%, #e85d75) !important;
}

.game-page .glade-stage {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 240, 187, .24) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 238, 142, .38), transparent 32%),
    url("./sprites/glade-premium.svg") center / cover no-repeat,
    linear-gradient(180deg, #143a34 0%, #257345 70%, #155332 100%) !important;
  box-shadow:
    0 16px 32px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 -58px 74px rgba(3, 39, 22, .32) !important;
}

.game-page .glade-stage::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  background:
    radial-gradient(ellipse at 50% 36%, rgba(255, 247, 169, .42), transparent 35%),
    radial-gradient(ellipse at 50% 86%, rgba(255, 220, 110, .14), transparent 32%),
    linear-gradient(180deg, transparent 46%, rgba(5, 38, 21, .2) 100%) !important;
  pointer-events: none !important;
}

.game-page .glade-stage::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -10% 0 !important;
  z-index: 3 !important;
  display: block !important;
  height: 30% !important;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(5, 39, 20, .48), transparent 64%),
    linear-gradient(180deg, transparent, rgba(10, 75, 37, .36)) !important;
  clip-path: ellipse(72% 48% at 50% 100%) !important;
  pointer-events: none !important;
}

.game-page .friend-scene {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.game-page .glade-head {
  position: absolute !important;
  z-index: 12 !important;
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  min-height: 46px !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(37, 91, 60, .14) !important;
  border-radius: 17px !important;
  color: var(--retail-ink) !important;
  background: linear-gradient(180deg, rgba(255, 253, 239, .9), rgba(238, 250, 224, .78)) !important;
  box-shadow:
    0 8px 18px rgba(3, 33, 17, .12),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
}

.game-page .glade-head span,
.game-page .glade-head em {
  color: rgba(48, 73, 59, .64) !important;
  font-family: var(--retail-font) !important;
  font-size: 7px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
}

.game-page .glade-head strong {
  max-width: 13ch !important;
  color: #183126 !important;
  font-family: var(--retail-font) !important;
  font-size: clamp(16px, 4.7vw, 21px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  text-overflow: ellipsis !important;
}

.game-page .next-goal-button::after {
  display: none !important;
}

.game-page .glade-head em {
  padding: 5px 8px !important;
  border-radius: 999px !important;
  background: rgba(38, 201, 109, .16) !important;
}

.game-page .sound-button {
  width: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  border-color: rgba(32, 84, 56, .14) !important;
  background: rgba(255, 253, 241, .82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}

.game-page .bloom-track {
  position: absolute !important;
  z-index: 12 !important;
  top: 62px !important;
  left: 18px !important;
  right: 18px !important;
  height: 4px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(29, 83, 52, .16) !important;
}

.game-page .bloom-track span {
  background: linear-gradient(90deg, #1ec96b, #f2c14f 76%, #e85d75) !important;
}

.game-page .bloom-copy {
  position: absolute !important;
  z-index: 12 !important;
  top: 70px !important;
  left: 18px !important;
  right: 18px !important;
  margin: 0 !important;
}

.game-page .bloom-copy small {
  color: rgba(255, 252, 232, .92) !important;
  font-family: var(--retail-font) !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.28) !important;
}

.game-page .bloom-copy #nextBloomName {
  display: none !important;
}

.game-page .scene-decor,
.game-page .orchard-visual,
.game-page .root-ring,
.game-page .rush-orbit,
.game-page .scene-sparkle {
  display: block !important;
}

.game-page .scene-decor {
  z-index: 5 !important;
  filter: drop-shadow(0 6px 10px rgba(4, 28, 16, .22)) !important;
}

.game-page .decor-a {
  left: 8% !important;
  bottom: 20% !important;
  transform: scale(.9) !important;
}

.game-page .decor-b {
  right: 9% !important;
  bottom: 26% !important;
  transform: scale(1.05) !important;
}

.game-page .decor-c {
  left: 10% !important;
  bottom: 12% !important;
  width: 72px !important;
  opacity: .55 !important;
}

.game-page .decor-d {
  right: 13% !important;
  bottom: 11% !important;
  width: 70px !important;
  opacity: .55 !important;
}

.game-page .root-ring {
  z-index: 4 !important;
  left: 50% !important;
  top: auto !important;
  bottom: 8% !important;
  width: min(64%, 260px) !important;
  height: min(64vw, 260px) !important;
  opacity: .34 !important;
  transform: translateX(-50%) !important;
}

.game-page .rush-orbit {
  z-index: 6 !important;
  left: 50% !important;
  top: auto !important;
  bottom: 7% !important;
  width: min(58%, 236px) !important;
  height: min(58vw, 236px) !important;
  transform: translateX(-50%) !important;
}

.game-page .friend-scene .seed-button {
  position: absolute !important;
  z-index: 9 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 2% !important;
  width: min(59%, 238px) !important;
  max-height: 60% !important;
  margin: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  background: url("./sprites/shroom-premium.svg") center bottom / contain no-repeat !important;
  filter:
    drop-shadow(0 8px 0 rgba(79, 21, 25, .16))
    drop-shadow(0 22px 23px rgba(3, 31, 16, .3)) !important;
  transform: translateX(-50%) !important;
  animation: idleBreath 2.8s ease-in-out infinite alternate !important;
}

.game-page .friend-scene.scene-tapped .seed-button,
.game-page .seed-button.is-pressed {
  transform: translateX(-50%) translateY(5px) scale(.985) !important;
  animation: retailTap .32s cubic-bezier(.16, 1.45, .26, 1) !important;
}

.game-page .seed-button::before,
.game-page .seed-button::after,
.game-page .seed-core,
.game-page .seed-mouth,
.game-page .seed-cheeks,
.game-page .seed-text {
  display: none !important;
}

.game-page .companion-row {
  z-index: 8 !important;
  bottom: 9% !important;
}

.game-page .orchard-visual {
  z-index: 4 !important;
  left: 5% !important;
  right: 5% !important;
  bottom: 4% !important;
  width: auto !important;
  opacity: .72 !important;
}

.game-page .combo-badge {
  position: relative !important;
  inset: auto !important;
  align-self: center !important;
  min-height: 18px !important;
  color: rgba(255, 246, 210, .82) !important;
  font-family: var(--retail-font) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-align: center !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.28) !important;
  transform: none !important;
}

.game-page .moment-banner {
  top: auto !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 72px !important;
  width: auto !important;
  min-height: 42px !important;
  padding: 7px 10px 7px 8px !important;
  border: 1px solid rgba(39, 91, 61, .14) !important;
  border-radius: 15px !important;
  color: var(--retail-ink) !important;
  background: linear-gradient(180deg, rgba(255, 253, 241, .96), rgba(232, 249, 220, .92)) !important;
  box-shadow:
    0 12px 22px rgba(4, 30, 15, .18),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
  backdrop-filter: none !important;
}

.game-page .moment-banner strong {
  color: #162d23 !important;
  font-family: var(--retail-font) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.game-page .moment-banner span {
  color: rgba(46, 72, 58, .72) !important;
  font-family: var(--retail-font) !important;
  font-size: 9px !important;
  font-weight: 750 !important;
}

.game-page .skill-row {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 18 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 5px !important;
  border: 1px solid rgba(255, 239, 183, .4) !important;
  border-radius: 18px !important;
  background: rgba(255, 253, 239, .92) !important;
  box-shadow:
    0 10px 22px rgba(4, 21, 12, .24),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
  backdrop-filter: none !important;
}

.game-page .skill-row button,
.game-page .bottom-tabs button,
.game-page .store-item button,
.game-page .quest-item button,
.game-page .save-tools button,
.game-page .leaderboard-tools button {
  min-height: 38px !important;
  border-radius: 13px !important;
  font-family: var(--retail-font) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.game-page .skill-row button {
  color: #102a20 !important;
  border: 1px solid rgba(31, 90, 57, .12) !important;
  box-shadow:
    0 4px 0 rgba(17, 81, 50, .18),
    0 8px 14px rgba(16, 88, 54, .12),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
}

.game-page .skill-row #dewSkillButton {
  background: linear-gradient(180deg, #d8fff4, #66d7c4) !important;
}

.game-page .skill-row #boostSkillButton {
  background: linear-gradient(180deg, #fff2b7, #f1bd54) !important;
}

.game-page .skill-row #bloomSkillButton {
  color: #3f1c28 !important;
  background: linear-gradient(180deg, #ffd1df, #e95d79) !important;
}

.game-page .bottom-tabs {
  min-height: 54px !important;
  padding: 5px !important;
  border: 1px solid rgba(255, 239, 183, .36) !important;
  border-radius: 18px !important;
  background: rgba(255, 253, 239, .93) !important;
  box-shadow:
    0 12px 26px rgba(3, 17, 9, .3),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
  backdrop-filter: none !important;
}

.game-page .bottom-tabs button {
  display: grid !important;
  grid-template-rows: 14px auto !important;
  gap: 2px !important;
  place-items: center !important;
  min-height: 42px !important;
  padding: 4px 2px 5px !important;
  color: rgba(50, 74, 61, .62) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.game-page .bottom-tabs button::before {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  box-shadow:
    0 2px 6px rgba(26, 78, 50, .18),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}

.game-page .bottom-tabs button[aria-pressed="true"] {
  color: #062414 !important;
  border-color: rgba(9, 105, 52, .12) !important;
  background: linear-gradient(180deg, #a4f4a7, #35d572 62%, #18ad60) !important;
  box-shadow:
    0 5px 0 rgba(12, 99, 51, .24),
    0 8px 14px rgba(16, 107, 60, .16),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}

body[data-tab="store"] .store-grid,
body[data-tab="quests"] .log-grid,
body[data-tab="board"] .log-grid {
  height: 100% !important;
  padding: 0 0 3px !important;
  gap: 8px !important;
  overflow: auto !important;
  align-content: start !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 230, 130, .24), transparent 34%),
    linear-gradient(180deg, rgba(232, 249, 220, .98), rgba(98, 174, 103, .42)) !important;
  scrollbar-width: none !important;
}

body[data-tab="store"] .store-grid::-webkit-scrollbar,
body[data-tab="quests"] .log-grid::-webkit-scrollbar,
body[data-tab="board"] .log-grid::-webkit-scrollbar {
  display: none !important;
}

.game-page .store-panel,
.game-page .quest-panel,
.game-page .badges-panel,
.game-page .session-panel,
.game-page .leaderboard-panel {
  padding: 10px !important;
  border: 1px solid rgba(39, 91, 61, .14) !important;
  border-radius: 20px !important;
  color: var(--retail-ink) !important;
  background: linear-gradient(180deg, rgba(255, 253, 241, .96), rgba(235, 250, 224, .91)) !important;
  box-shadow:
    0 10px 22px rgba(7, 49, 25, .14),
    inset 0 1px 0 rgba(255,255,255,.84) !important;
  backdrop-filter: none !important;
}

.game-page .section-head {
  min-height: 28px !important;
  padding: 0 0 8px !important;
  align-items: center !important;
}

.game-page .section-head h2 {
  color: #162d23 !important;
  font-family: var(--retail-font) !important;
  font-size: clamp(18px, 5.3vw, 23px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.game-page .section-head span {
  color: rgba(52, 77, 63, .62) !important;
  font-family: var(--retail-font) !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
}

.game-page .store-list,
.game-page .quest-list,
.game-page .achievement-list,
.game-page .leaderboard-list {
  display: grid !important;
  gap: 7px !important;
}

.game-page .store-item,
.game-page .store-item.garden-card,
.game-page .store-item.recommended,
.game-page .store-item.waiting,
.game-page .quest-item,
.game-page .achievement,
.game-page .leaderboard-row,
.game-page .leaderboard-empty {
  min-height: 0 !important;
  padding: 9px !important;
  border: 1px solid rgba(41, 91, 60, .12) !important;
  border-radius: 17px !important;
  color: var(--retail-ink) !important;
  background: linear-gradient(180deg, rgba(255, 254, 246, .96), rgba(240, 250, 229, .93)) !important;
  box-shadow:
    0 6px 14px rgba(23, 83, 48, .1),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.game-page .store-item.recommended,
.game-page .quest-item.ready {
  border-color: rgba(38, 201, 109, .34) !important;
  box-shadow:
    0 8px 18px rgba(38, 201, 109, .14),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
}

.game-page .store-item.garden-card,
.game-page .colony-panel .store-list .garden-card,
.game-page .colony-panel .store-list:has(.garden-card + .garden-card) .garden-card,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card,
.game-page .quest-item.friend-card {
  min-height: 80px !important;
  grid-template-columns: 42px minmax(0, 1fr) 76px !important;
  gap: 9px !important;
  align-items: center !important;
  padding: 9px !important;
}

.game-page .charms-panel .store-item,
.game-page .perks-panel .store-item,
.game-page .charms-panel .store-item.waiting,
.game-page .perks-panel .store-item.waiting {
  min-height: 62px !important;
  grid-template-columns: 38px minmax(0, 1fr) 74px !important;
  gap: 8px !important;
  padding: 8px !important;
}

.game-page .store-copy h3,
.game-page .friend-copy h3,
.game-page .achievement strong,
.game-page .leaderboard-empty strong,
.game-page .atlas-card strong {
  color: #162d23 !important;
  font-family: var(--retail-font) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.game-page .store-copy p,
.game-page .store-item p,
.game-page .friend-copy p,
.game-page .quest-item p,
.game-page .achievement span,
.game-page .leaderboard-empty span,
.game-page .leaderboard-empty em {
  color: rgba(46, 70, 57, .72) !important;
  font-family: var(--retail-font) !important;
  font-size: 9px !important;
  font-weight: 740 !important;
  line-height: 1.18 !important;
  text-shadow: none !important;
}

.game-page .store-copy p,
.game-page .friend-copy p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.game-page .owned,
.game-page .store-item .owned,
.game-page .quest-item .owned,
.game-page .friend-card .owned {
  color: #d84f6f !important;
  font-family: var(--retail-font) !important;
  font-size: 8.5px !important;
  font-weight: 900 !important;
}

.game-page .store-visual,
.game-page .colony-panel .store-list .garden-card .store-visual,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card .store-visual,
.game-page .friend-token {
  width: 38px !important;
  height: 38px !important;
  border: 2px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 6px 12px rgba(32, 88, 55, .16),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}

.game-page .store-item button,
.game-page .colony-panel .store-list .garden-card button,
.game-page .colony-panel .store-list:not(:has(.garden-card + .garden-card)) .garden-card button,
.game-page .quest-item button,
.game-page .charms-panel .store-item button,
.game-page .perks-panel .store-item button {
  grid-column: 3 !important;
  min-width: 68px !important;
  max-width: 76px !important;
  min-height: 34px !important;
  padding: 0 7px !important;
  color: #12291f !important;
  border: 1px solid rgba(141, 91, 18, .13) !important;
  background: linear-gradient(180deg, #fff0b2, #efbc55) !important;
  box-shadow:
    0 4px 0 rgba(148, 96, 25, .2),
    0 7px 12px rgba(143, 99, 35, .1),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}

.game-page .store-item.recommended button:not(:disabled),
.game-page .quest-item.ready button:not(:disabled) {
  border-color: rgba(7, 103, 52, .16) !important;
  background: linear-gradient(180deg, #a3f4a7, #35d572 62%, #18ad60) !important;
  box-shadow:
    0 4px 0 rgba(12, 99, 51, .24),
    0 7px 12px rgba(16, 107, 60, .14),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}

.game-page .store-item button:disabled,
.game-page .quest-item button:disabled {
  color: rgba(61, 72, 63, .52) !important;
  border-color: rgba(61, 72, 63, .08) !important;
  background: linear-gradient(180deg, #f8f6e9, #dfe3d3) !important;
  box-shadow: none !important;
}

.game-page .leaderboard-tools {
  grid-template-columns: minmax(0, 1fr) 108px !important;
  gap: 7px !important;
}

.game-page .leaderboard-tools input {
  min-height: 40px !important;
  color: var(--retail-ink) !important;
  border: 1px solid rgba(41, 91, 60, .16) !important;
  border-radius: 14px !important;
  background: rgba(255, 254, 244, .78) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.game-page .leaderboard-empty {
  min-height: 320px !important;
  align-content: center !important;
  text-align: center !important;
}

@media (min-width: 700px) and (min-height: 720px) {
  .game-page .phone-frame {
    height: min(900px, calc(100vh - 32px)) !important;
    min-height: 700px !important;
    margin: 16px auto !important;
    border: 10px solid rgba(2, 7, 5, .96) !important;
    border-radius: 34px !important;
    box-shadow:
      0 34px 90px rgba(0,0,0,.52),
      inset 0 0 0 1px rgba(255,255,255,.08) !important;
  }
}

@media (max-height: 720px) {
  .game-page .tap-panel {
    grid-template-rows: 54px minmax(0, 1fr) 15px 48px !important;
    gap: 6px !important;
  }

  .game-page .resource-row {
    min-height: 54px !important;
  }

  .game-page .resource-row > div,
  .game-page .resource-row .goal-stat {
    min-height: 44px !important;
  }

  .game-page .resource-row strong {
    font-size: clamp(16px, 5.2vw, 21px) !important;
  }

  .game-page .glade-head {
    min-height: 42px !important;
  }

  .game-page .bloom-track {
    top: 58px !important;
  }

  .game-page .bloom-copy {
    top: 66px !important;
  }

  .game-page .friend-scene .seed-button {
    width: min(54%, 214px) !important;
  }

  .game-page .skill-row,
  .game-page .bottom-tabs {
    min-height: 48px !important;
  }
}

@media (max-width: 370px) {
  .game-page .resource-row {
    grid-template-columns: .76fr 1.48fr .76fr !important;
  }

  .game-page .resource-row .metric-label {
    font-size: 6px !important;
  }

  .game-page .resource-row strong {
    font-size: clamp(15px, 5vw, 20px) !important;
  }

  .game-page .store-item.garden-card,
  .game-page .colony-panel .store-list .garden-card,
  .game-page .quest-item.friend-card {
    grid-template-columns: 38px minmax(0, 1fr) 68px !important;
  }
}

@keyframes idleBreath {
  from { transform: translateX(-50%) translateY(0) scale(1); }
  to { transform: translateX(-50%) translateY(-4px) scale(1.012); }
}

@keyframes retailTap {
  0% { transform: translateX(-50%) translateY(0) scale(1); }
  45% { transform: translateX(-50%) translateY(5px) scale(.985); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

/* Studio art pass: replace the flat prototype scene with one finished game playfield. */
body.game-page {
  --studio-ink: #172a20;
  --studio-soft: rgba(255, 252, 232, .94);
  --studio-soft-strong: rgba(255, 253, 241, .98);
  --studio-line: rgba(255, 240, 185, .5);
  --studio-green: #22c96b;
  --studio-gold: #f2bd50;
  --studio-rose: #e75d79;
  color: var(--studio-ink);
  background:
    linear-gradient(180deg, rgba(5, 17, 11, .4), rgba(4, 11, 8, .72)),
    url("./sprites/studio-menu-20260526.webp") center / cover no-repeat,
    #07140e !important;
}

.game-page .phone-frame {
  background:
    linear-gradient(180deg, rgba(8, 24, 15, .18), rgba(3, 11, 7, .56)),
    url("./sprites/studio-menu-20260526.webp") center / cover no-repeat,
    #07140e !important;
}

.game-page .game-shell {
  gap: 7px !important;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
}

.game-page .tap-panel {
  grid-template-rows: 56px minmax(0, 1fr) 15px 50px !important;
  gap: 6px !important;
}

.game-page .resource-row {
  min-height: 56px !important;
  padding: 4px !important;
  gap: 5px !important;
  border-color: rgba(255, 249, 211, .68) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 236, .97), rgba(236, 248, 220, .92)) !important;
  box-shadow:
    0 8px 18px rgba(2, 14, 7, .28),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.game-page .resource-row > div,
.game-page .resource-row .goal-stat {
  min-height: 47px !important;
  padding: 4px !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 247, .64) !important;
}

.game-page .resource-row .metric-label {
  font-size: 6px !important;
}

.game-page .resource-row strong {
  font-size: clamp(16px, 5.2vw, 23px) !important;
  font-weight: 920 !important;
}

.game-page .next-goal-button {
  min-height: 29px !important;
  background:
    radial-gradient(circle at 35% 4%, rgba(255,255,255,.64), transparent 36%),
    linear-gradient(180deg, #98eba0, #2fd170 62%, #14a85d) !important;
  box-shadow:
    0 4px 0 rgba(4, 76, 36, .3),
    0 8px 14px rgba(12, 81, 42, .18),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}

.game-page .glade-stage {
  border-radius: 24px !important;
  border-color: rgba(255, 247, 205, .34) !important;
  background:
    linear-gradient(180deg, rgba(255, 239, 166, .04), rgba(0, 16, 8, .08) 54%, rgba(0, 12, 6, .24)),
    url("./sprites/studio-playfield-20260526.webp") center bottom / cover no-repeat,
    #143322 !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -60px 76px rgba(0, 26, 12, .28) !important;
}

.game-page .glade-stage::before {
  display: block !important;
  background:
    linear-gradient(180deg, rgba(255, 251, 217, .08), transparent 30%, rgba(5, 32, 17, .18) 100%) !important;
}

.game-page .glade-stage::after {
  height: 20% !important;
  background:
    linear-gradient(180deg, transparent, rgba(0, 14, 7, .32)) !important;
  clip-path: none !important;
}

.game-page .sky-glow,
.game-page .sunbeam,
.game-page .cloud,
.game-page .meadow-hill,
.game-page .canopy-shadow,
.game-page .scene-mist,
.game-page .scene-decor,
.game-page .orchard-visual,
.game-page .companion-row {
  display: none !important;
}

.game-page .glade-head {
  top: 9px !important;
  min-height: 45px !important;
  border-color: rgba(255, 255, 255, .5) !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 237, .9), rgba(232, 249, 220, .76)) !important;
  box-shadow:
    0 8px 18px rgba(3, 24, 11, .16),
    inset 0 1px 0 rgba(255,255,255,.76) !important;
}

.game-page .glade-head strong {
  color: #182b21 !important;
}

.game-page .glade-head em {
  color: #164328 !important;
  background: rgba(34, 201, 107, .18) !important;
}

.game-page .bloom-track {
  top: 60px !important;
  left: 18px !important;
  right: 18px !important;
  background: rgba(8, 38, 19, .18) !important;
}

.game-page .bloom-copy {
  top: 68px !important;
}

.game-page .bloom-copy small {
  color: rgba(255, 252, 232, .94) !important;
  text-shadow:
    0 2px 8px rgba(0,0,0,.38),
    0 0 2px rgba(0,0,0,.26) !important;
}

.game-page .friend-scene .seed-button {
  bottom: 1% !important;
  width: min(72%, 292px) !important;
  height: min(42%, 310px) !important;
  max-height: 42% !important;
  background: transparent !important;
  filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.game-page .friend-scene .seed-button::before,
.game-page .friend-scene .seed-button::after {
  content: "" !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.game-page .friend-scene.scene-tapped .seed-button,
.game-page .seed-button.is-pressed {
  transform: translateX(-50%) scale(.99) !important;
}

.game-page .root-ring {
  display: block !important;
  bottom: 10% !important;
  opacity: .28 !important;
}

.game-page .rush-orbit {
  display: block !important;
  bottom: 9% !important;
  opacity: .38 !important;
}

.game-page .skill-row {
  min-height: 50px !important;
  padding: 4px !important;
  border-color: rgba(255, 249, 211, .66) !important;
  background: rgba(255, 253, 237, .94) !important;
  box-shadow:
    0 8px 18px rgba(2, 14, 7, .28),
    inset 0 1px 0 rgba(255,255,255,.84) !important;
}

.game-page .skill-row button {
  min-height: 40px !important;
  border-radius: 14px !important;
}

.game-page .bottom-tabs {
  min-height: 52px !important;
  padding: 5px !important;
  border-color: rgba(255, 249, 211, .66) !important;
  background: rgba(255, 253, 237, .94) !important;
}

body[data-tab="store"] .store-grid,
body[data-tab="quests"] .log-grid,
body[data-tab="board"] .log-grid {
  background:
    linear-gradient(180deg, rgba(255, 253, 237, .72), rgba(16, 72, 36, .46)),
    url("./sprites/studio-menu-20260526.webp") center / cover no-repeat,
    #183923 !important;
}

.game-page .store-panel,
.game-page .quest-panel,
.game-page .badges-panel,
.game-page .session-panel,
.game-page .leaderboard-panel {
  background:
    linear-gradient(180deg, rgba(255, 253, 239, .94), rgba(235, 248, 219, .86)) !important;
  border-color: rgba(255, 247, 205, .52) !important;
  box-shadow:
    0 10px 24px rgba(3, 26, 12, .18),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
}

.game-page .store-item,
.game-page .store-item.garden-card,
.game-page .store-item.recommended,
.game-page .store-item.waiting,
.game-page .quest-item,
.game-page .achievement,
.game-page .leaderboard-row,
.game-page .leaderboard-empty {
  background:
    linear-gradient(180deg, rgba(255, 254, 246, .96), rgba(244, 250, 230, .92)) !important;
  border-color: rgba(38, 91, 58, .11) !important;
}

.game-page .store-visual,
.game-page .friend-token {
  border-color: rgba(255,255,255,.82) !important;
  box-shadow:
    0 7px 14px rgba(34, 88, 55, .18),
    inset 0 1px 0 rgba(255,255,255,.68) !important;
}

.game-page .leaderboard-empty {
  min-height: 300px !important;
}

@media (max-height: 720px) {
  .game-page .tap-panel {
    grid-template-rows: 52px minmax(0, 1fr) 14px 46px !important;
  }

  .game-page .resource-row {
    min-height: 52px !important;
  }

  .game-page .resource-row > div,
  .game-page .resource-row .goal-stat {
    min-height: 43px !important;
  }

  .game-page .friend-scene .seed-button {
    width: min(68%, 260px) !important;
    height: min(42%, 286px) !important;
  }

  .game-page .skill-row,
  .game-page .bottom-tabs {
    min-height: 46px !important;
  }
}

@keyframes studioTapAura {
  from { opacity: .68; transform: scale(.96); }
  to { opacity: .96; transform: scale(1.05); }
}

@keyframes studioTapRing {
  from { opacity: .85; transform: scale(.92); }
  to { opacity: 0; transform: scale(1.2); }
}

/* Console pass: the playfield art is now the product; the UI must read as a game HUD, not a web card stack. */
body.game-page {
  --console-ink: #f8ffe9;
  --console-muted: rgba(226, 241, 213, .78);
  --console-panel: rgba(8, 21, 16, .76);
  --console-panel-strong: rgba(5, 16, 12, .88);
  --console-line: rgba(238, 255, 213, .2);
  --console-hot: #f25f87;
  --console-gold: #f2be55;
  --console-mint: #36dd78;
  --console-cyan: #62dfdc;
  color: var(--console-ink) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 233, 141, .22), transparent 36%),
    linear-gradient(180deg, rgba(5, 14, 10, .34), rgba(2, 8, 6, .9)),
    url("./sprites/studio-menu-20260526.webp") center / cover no-repeat,
    #07110d !important;
}

.game-page .phone-frame {
  background:
    linear-gradient(180deg, rgba(10, 24, 18, .26), rgba(2, 8, 6, .72)),
    url("./sprites/studio-menu-20260526.webp") center / cover no-repeat,
    #07110d !important;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .58),
    inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
}

.game-page .game-shell {
  gap: 7px !important;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
}

.game-page .tap-panel {
  grid-template-rows: 48px minmax(0, 1fr) 50px !important;
  gap: 7px !important;
}

.game-page .resource-row {
  min-height: 48px !important;
  padding: 4px !important;
  gap: 4px !important;
  border: 1px solid var(--console-line) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(21, 42, 30, .82), rgba(7, 20, 15, .8)) !important;
  box-shadow:
    0 12px 22px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .13) !important;
  backdrop-filter: blur(18px) saturate(1.2);
}

.game-page .resource-row::before,
.game-page .resource-row::after {
  display: none !important;
}

.game-page .resource-row > div,
.game-page .resource-row .goal-stat {
  min-height: 38px !important;
  padding: 4px 5px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: rgba(255, 255, 255, .07) !important;
  box-shadow: none !important;
}

.game-page .resource-row .metric-label {
  color: var(--console-muted) !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}

.game-page .resource-row strong {
  color: #fff7d7 !important;
  font-size: clamp(15px, 4.8vw, 21px) !important;
  line-height: .92 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .38) !important;
}

.game-page .resource-row small {
  color: rgba(234, 251, 220, .78) !important;
  font-size: 8px !important;
}

.game-page .next-goal-button {
  min-height: 30px !important;
  border-radius: 11px !important;
  color: #092016 !important;
  font-size: clamp(12px, 3.4vw, 16px) !important;
  font-weight: 950 !important;
  background:
    radial-gradient(circle at 40% 0%, rgba(255, 255, 255, .7), transparent 32%),
    linear-gradient(180deg, #73f095, #20cb62 62%, #07944c) !important;
  border: 1px solid rgba(218, 255, 201, .7) !important;
  box-shadow:
    0 5px 0 rgba(0, 78, 42, .42),
    0 10px 16px rgba(0, 0, 0, .18) !important;
}

.game-page .goal-progress {
  height: 4px !important;
  border-radius: 99px !important;
  background: rgba(240, 255, 220, .18) !important;
}

.game-page .goal-progress span {
  background: linear-gradient(90deg, var(--console-cyan), var(--console-gold), var(--console-hot)) !important;
}

.game-page .glade-stage {
  border-radius: 22px !important;
  border: 1px solid rgba(244, 255, 217, .2) !important;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -80px 100px rgba(0, 15, 8, .36) !important;
}

.game-page .glade-stage::before {
  background:
    linear-gradient(180deg, rgba(255, 250, 204, .08), rgba(255, 250, 204, 0) 24%, rgba(0, 0, 0, .22) 100%) !important;
}

.game-page .glade-head {
  top: 9px !important;
  left: 9px !important;
  right: 9px !important;
  min-height: 50px !important;
  padding: 8px 9px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(244, 255, 217, .18) !important;
  color: var(--console-ink) !important;
  background:
    linear-gradient(180deg, rgba(13, 30, 22, .78), rgba(6, 18, 13, .66)) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .14) !important;
  backdrop-filter: blur(16px) saturate(1.18);
}

.game-page .glade-head span,
.game-page .glade-head em {
  color: var(--console-muted) !important;
  font-size: 8px !important;
  letter-spacing: .1em !important;
}

.game-page .glade-head strong {
  color: #fff7dc !important;
  font-size: clamp(23px, 7vw, 32px) !important;
  line-height: .9 !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .44) !important;
}

.game-page .glade-head em {
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgba(54, 221, 120, .18) !important;
  border: 1px solid rgba(122, 255, 166, .24) !important;
}

.game-page .sound-button {
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.game-page .bloom-track {
  top: 68px !important;
  left: 20px !important;
  right: 20px !important;
  height: 5px !important;
  background: rgba(244, 255, 217, .16) !important;
  box-shadow: none !important;
}

.game-page .bloom-copy {
  top: 78px !important;
  left: 24px !important;
  right: 24px !important;
}

.game-page .bloom-copy small {
  color: rgba(255, 250, 220, .88) !important;
  font-size: 10px !important;
  letter-spacing: .06em !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5) !important;
}

.game-page #nextBloomName {
  display: none !important;
}

.game-page .skill-row {
  min-height: 50px !important;
  padding: 4px !important;
  gap: 5px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(244, 255, 217, .18) !important;
  background:
    linear-gradient(180deg, rgba(12, 30, 22, .82), rgba(5, 16, 12, .82)) !important;
  box-shadow:
    0 14px 24px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  backdrop-filter: blur(16px) saturate(1.18);
}

.game-page .skill-row button,
.game-page .bottom-tabs button,
.game-page .store-item button {
  letter-spacing: 0 !important;
}

.game-page .skill-row button {
  min-height: 40px !important;
  border-radius: 14px !important;
  color: #071711 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow:
    0 5px 0 rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}

.game-page .skill-row #dewSkillButton {
  background: linear-gradient(180deg, #9bf5ee, #39d3c8) !important;
}

.game-page .skill-row #boostSkillButton {
  background: linear-gradient(180deg, #ffe28e, #edae36) !important;
}

.game-page .skill-row #bloomSkillButton {
  background: linear-gradient(180deg, #ff8fac, #e85078) !important;
}

.game-page .bottom-tabs {
  min-height: 54px !important;
  padding: 5px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(244, 255, 217, .18) !important;
  background:
    linear-gradient(180deg, rgba(13, 30, 22, .86), rgba(4, 14, 10, .88)) !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 255, 255, .13) !important;
  backdrop-filter: blur(18px) saturate(1.18);
}

.game-page .bottom-tabs::before,
.game-page .bottom-tabs::after {
  display: none !important;
}

.game-page .bottom-tabs button {
  min-height: 44px !important;
  border-radius: 15px !important;
  color: rgba(229, 243, 216, .72) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.game-page .bottom-tabs button::before {
  width: 20px !important;
  height: 20px !important;
  border-radius: 9px !important;
  box-shadow:
    0 5px 10px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}

.game-page .bottom-tabs button[aria-pressed="true"] {
  color: #fff9d8 !important;
  background: rgba(255, 255, 255, .11) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .11),
    0 8px 16px rgba(0, 0, 0, .18) !important;
}

body[data-tab="store"] .store-grid,
body[data-tab="quests"] .log-grid,
body[data-tab="board"] .log-grid {
  padding: 9px !important;
  gap: 9px !important;
  align-content: start !important;
  background:
    linear-gradient(180deg, rgba(3, 10, 7, .42), rgba(3, 10, 7, .82)),
    url("./sprites/studio-menu-20260526.webp") center / cover no-repeat,
    #07110d !important;
}

.game-page .store-panel,
.game-page .quest-panel,
.game-page .badges-panel,
.game-page .session-panel,
.game-page .leaderboard-panel {
  padding: 12px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(244, 255, 217, .18) !important;
  color: var(--console-ink) !important;
  background:
    linear-gradient(180deg, rgba(12, 28, 21, .84), rgba(5, 17, 12, .78)) !important;
  box-shadow:
    0 18px 32px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  backdrop-filter: blur(18px) saturate(1.15);
}

.game-page .section-head {
  margin-bottom: 9px !important;
}

.game-page .section-head h2 {
  color: #fff7dc !important;
  font-size: clamp(24px, 7vw, 34px) !important;
  line-height: .9 !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .38) !important;
}

.game-page .section-head span {
  color: var(--console-muted) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
}

.game-page .store-list,
.game-page .quest-list,
.game-page .achievement-list,
.game-page .leaderboard-list {
  gap: 8px !important;
}

.game-page .store-item,
.game-page .store-item.garden-card,
.game-page .store-item.recommended,
.game-page .store-item.waiting,
.game-page .quest-item,
.game-page .achievement,
.game-page .leaderboard-row,
.game-page .leaderboard-empty,
.game-page .stat-list p {
  min-height: 74px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(244, 255, 217, .14) !important;
  color: var(--console-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .055)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .11),
    0 10px 18px rgba(0, 0, 0, .2) !important;
}

.game-page .store-item,
.game-page .store-item.garden-card,
.game-page .charms-panel .store-item,
.game-page .perks-panel .store-item {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) minmax(92px, auto) !important;
  align-items: center !important;
  column-gap: 10px !important;
  overflow: hidden !important;
}

.game-page .store-copy {
  min-width: 0 !important;
  overflow: hidden !important;
}

.game-page .store-item.recommended {
  border-color: rgba(86, 232, 129, .42) !important;
  background:
    linear-gradient(180deg, rgba(54, 221, 120, .18), rgba(255, 255, 255, .075)) !important;
}

.game-page .store-item.waiting {
  opacity: .86 !important;
}

.game-page .store-visual,
.game-page .friend-token,
.game-page .store-visual.charm-seed,
.game-page .store-visual.mycelium-knot {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

.game-page .store-visual *,
.game-page .store-visual::before,
.game-page .store-visual::after {
  max-width: 100% !important;
  max-height: 100% !important;
}

.game-page .store-item h3,
.game-page .quest-item strong,
.game-page .achievement strong {
  color: #fff7dc !important;
  font-size: clamp(18px, 5.1vw, 24px) !important;
  line-height: .96 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .32) !important;
}

.game-page .store-item p,
.game-page .quest-item p,
.game-page .achievement p,
.game-page .leaderboard-empty p,
.game-page .stat-list span {
  color: rgba(225, 241, 213, .78) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

.game-page .store-item .owned,
.game-page .quest-item .owned {
  color: #ff8fac !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.game-page .store-item button {
  min-width: 104px !important;
  min-height: 40px !important;
  border-radius: 14px !important;
  color: #06150f !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  background:
    linear-gradient(180deg, #75f094, #18c160) !important;
  box-shadow:
    0 5px 0 rgba(0, 76, 39, .42),
    inset 0 1px 0 rgba(255, 255, 255, .45) !important;
  white-space: nowrap !important;
}

.game-page .store-item button:disabled {
  color: rgba(44, 28, 4, .92) !important;
  background: linear-gradient(180deg, #ffe59a, #efb645) !important;
  box-shadow:
    0 5px 0 rgba(99, 63, 2, .3),
    inset 0 1px 0 rgba(255, 255, 255, .36) !important;
}

.game-page .leaderboard-tools input {
  color: var(--console-ink) !important;
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(244, 255, 217, .16) !important;
}

.game-page .leaderboard-tools input::placeholder {
  color: rgba(226, 241, 213, .55) !important;
}

@media (max-width: 520px) {
  .game-page .tap-panel {
    grid-template-rows: 48px minmax(0, 1fr) 49px !important;
  }

  .game-page .glade-head strong {
    font-size: clamp(22px, 7vw, 30px) !important;
  }

  .game-page .store-item,
  .game-page .store-item.garden-card,
  .game-page .charms-panel .store-item,
  .game-page .perks-panel .store-item {
    grid-template-columns: 50px minmax(0, 1fr) 98px !important;
    column-gap: 8px !important;
  }

  .game-page .store-visual,
  .game-page .store-visual.charm-seed,
  .game-page .store-visual.mycelium-knot {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }

  .game-page .store-item button {
    min-width: 92px !important;
    font-size: 13px !important;
  }
}

@media (max-height: 740px) {
  .game-page .tap-panel {
    grid-template-rows: 44px minmax(0, 1fr) 46px !important;
  }

  .game-page .resource-row {
    min-height: 44px !important;
  }

  .game-page .resource-row > div,
  .game-page .resource-row .goal-stat {
    min-height: 34px !important;
  }

  .game-page .skill-row {
    min-height: 46px !important;
  }

  .game-page .bottom-tabs {
    min-height: 50px !important;
  }

  .game-page .skill-row button {
    font-size: 12px !important;
  }

  .game-page .skill-row #bloomSkillButton {
    font-size: 11px !important;
  }
}

/* Icon pass: remove the remaining placeholder-blob feel from shop and tabs. */
.game-page .store-item h3,
.game-page .quest-item strong,
.game-page .achievement strong {
  font-size: clamp(17px, 4.7vw, 22px) !important;
  line-height: 1.02 !important;
}

.game-page .section-head h2 {
  line-height: 1.05 !important;
}

.game-page .store-item p,
.game-page .quest-item p,
.game-page .achievement p,
.game-page .leaderboard-empty p,
.game-page .stat-list span {
  font-size: 12.5px !important;
  line-height: 1.18 !important;
}

.game-page .store-visual,
.game-page .store-visual.charm-seed,
.game-page .store-visual.mycelium-knot,
.game-page .friend-token {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, .68), transparent 20%),
    radial-gradient(circle at 72% 86%, rgba(0, 0, 0, .24), transparent 38%),
    linear-gradient(180deg, var(--icon-top, #b9e6a9), var(--icon-mid, #61ad6b) 58%, var(--icon-bot, #2e6946)) !important;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .46),
    inset 0 -10px 18px rgba(0, 0, 0, .18) !important;
}

.game-page .store-visual i {
  z-index: 4 !important;
  inset: auto 8px 6px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(255, 246, 160, .92) var(--progress, 0%), rgba(255, 255, 255, .18) 0) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22) !important;
}

.game-page .store-visual::before,
.game-page .store-visual::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
}

.game-page .store-visual::before {
  z-index: 2 !important;
  inset: 12px 12px 14px !important;
  background: rgba(255, 246, 190, .88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 5px 10px rgba(0, 0, 0, .22) !important;
}

.game-page .store-visual::after {
  z-index: 3 !important;
  inset: 12px 15px auto !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .32) !important;
}

.game-page .root-thread {
  --icon-top: #e8d4a5;
  --icon-mid: #bd8a52;
  --icon-bot: #755236;
}

.game-page .root-thread::before {
  inset: 9px 18px 13px 18px !important;
  border-radius: 42% 58% 48% 52% !important;
  background:
    repeating-linear-gradient(112deg, rgba(106, 62, 32, .34) 0 3px, transparent 3px 8px),
    linear-gradient(180deg, #f5deb0, #a46b3d) !important;
  transform: rotate(-18deg) !important;
}

.game-page .root-thread::after {
  inset: 19px 10px auto 13px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 232, 168, .8) !important;
  box-shadow: 10px 8px 0 rgba(255, 232, 168, .5) !important;
}

.game-page .dew-cup {
  --icon-top: #b8f0ba;
  --icon-mid: #5fb66b;
  --icon-bot: #2f7249;
}

.game-page .dew-cup::before {
  inset: 20px 9px 10px 9px !important;
  border-radius: 8px 8px 20px 20px !important;
  background: linear-gradient(180deg, #cff2bd, #5fa662) !important;
}

.game-page .dew-cup::after {
  inset: 8px 19px auto 19px !important;
  height: 18px !important;
  border-radius: 999px 999px 60% 60% !important;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .82), transparent 28%),
    linear-gradient(180deg, #e4fdff, #aeeefa) !important;
}

.game-page .lantern-cap {
  --icon-top: #ff8aa0;
  --icon-mid: #cd4965;
  --icon-bot: #782d46;
}

.game-page .lantern-cap::before,
.game-page .charm-seed::before {
  inset: 11px 9px 20px !important;
  border-radius: 999px 999px 12px 12px !important;
  background:
    radial-gradient(circle at 36% 39%, #fff3ac 0 16%, transparent 17%),
    radial-gradient(circle at 66% 48%, rgba(255, 225, 132, .8) 0 12%, transparent 13%),
    linear-gradient(180deg, #ff6d8c, #b63055) !important;
}

.game-page .lantern-cap::after,
.game-page .charm-seed::after {
  inset: 28px 21px 9px !important;
  height: auto !important;
  border-radius: 10px 10px 16px 16px !important;
  background: linear-gradient(180deg, #ffdca7, #d99562) !important;
}

.game-page .friend-burrow {
  --icon-top: #caf4cf;
  --icon-mid: #84bc86;
  --icon-bot: #4c7b54;
}

.game-page .friend-burrow::before {
  inset: 22px 10px 9px !important;
  border-radius: 20px 20px 10px 10px !important;
  background:
    radial-gradient(ellipse at 50% 84%, #5e4e3a 0 34%, transparent 35%),
    linear-gradient(180deg, #bce6c6, #74ad73) !important;
}

.game-page .friend-burrow::after {
  inset: 13px 16px auto !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #f07891, #ffe986, #9eeaa5) !important;
}

.game-page .charm-seed {
  --icon-top: #ffb0c4;
  --icon-mid: #d85878;
  --icon-bot: #893450;
}

.game-page .mycelium-knot {
  --icon-top: #efe5a4;
  --icon-mid: #9caf62;
  --icon-bot: #526c3e;
}

.game-page .mycelium-knot::before {
  inset: 9px !important;
  border-radius: 50% !important;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 240, 126, .95) 0 4px, rgba(107, 146, 76, .8) 4px 8px, transparent 8px 12px),
    radial-gradient(circle at 50% 50%, #eff4a1, #6f914e) !important;
}

.game-page .mycelium-knot::after {
  inset: 19px !important;
  height: auto !important;
  border-radius: 50% !important;
  background: rgba(255, 248, 156, .78) !important;
  box-shadow: 0 0 14px rgba(255, 248, 156, .28) !important;
}

.game-page .bottom-tabs button::before {
  border-radius: 11px !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .84), transparent 20%),
    linear-gradient(180deg, var(--tab-top, #f5d26b), var(--tab-bot, #5aa74e)) !important;
}

.game-page .bottom-tabs button[data-tab-target="play"]::before {
  --tab-top: #ff6e86;
  --tab-bot: #b62e54;
  background:
    radial-gradient(circle at 36% 28%, #fff9bf 0 14%, transparent 15%),
    radial-gradient(circle at 62% 42%, rgba(255, 246, 190, .8) 0 10%, transparent 11%),
    linear-gradient(180deg, #ff6e86, #b62e54) !important;
}

.game-page .bottom-tabs button[data-tab-target="store"]::before {
  --tab-top: #b8ed8e;
  --tab-bot: #4b9a48;
  border-radius: 12px 12px 18px 8px !important;
}

.game-page .bottom-tabs button[data-tab-target="quests"]::before {
  --tab-top: #8ce9df;
  --tab-bot: #3ca3a0;
  background:
    radial-gradient(circle at 35% 36%, #eafff8 0 13%, transparent 14%),
    radial-gradient(circle at 66% 36%, #eafff8 0 13%, transparent 14%),
    linear-gradient(180deg, #8ce9df, #3ca3a0) !important;
}

.game-page .bottom-tabs button[data-tab-target="board"]::before {
  --tab-top: #ffe17e;
  --tab-bot: #98a64a;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(68, 79, 37, .38) 0 12%, transparent 13%),
    linear-gradient(180deg, #ffe17e, #98a64a) !important;
}

/* Native pass: first screen should read like a game client, not a responsive web page. */
body.game-page {
  --native-panel: rgba(5, 18, 12, .82);
  --native-line: rgba(235, 255, 216, .18);
  --native-cream: #fff7d7;
  background:
    radial-gradient(circle at 50% -12%, rgba(255, 234, 151, .22), transparent 26%),
    linear-gradient(180deg, #09170e 0%, #050a07 100%) !important;
}

.game-page .game-shell {
  gap: 6px !important;
  padding: 8px 8px max(7px, env(safe-area-inset-bottom)) !important;
}

.game-page .tap-panel {
  grid-template-rows: 58px minmax(0, 1fr) 72px !important;
  gap: 6px !important;
}

.game-page .resource-row {
  min-height: 58px !important;
  padding: 4px !important;
  border-radius: 22px !important;
  border: 1px solid var(--native-line) !important;
  background:
    linear-gradient(180deg, rgba(14, 36, 25, .88), rgba(5, 16, 11, .78)) !important;
  box-shadow:
    0 13px 24px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

.game-page .resource-row > div,
.game-page .resource-row .goal-stat {
  min-height: 48px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background:
    radial-gradient(circle at 22% 14%, rgba(255, 255, 255, .12), transparent 28%),
    rgba(255, 255, 255, .055) !important;
}

.game-page .resource-row > div:first-child,
.game-page .resource-row > div:last-child {
  position: relative !important;
}

.game-page .resource-row > div:first-child::before,
.game-page .resource-row > div:last-child::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 auto 1px !important;
  border-radius: 50% !important;
  box-shadow:
    0 4px 9px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

.game-page .resource-row > div:first-child::before {
  background:
    radial-gradient(circle at 35% 30%, #fffde6 0 16%, transparent 17%),
    linear-gradient(180deg, #ffd265, #e49b31) !important;
}

.game-page .resource-row > div:last-child::before {
  background:
    radial-gradient(circle at 35% 30%, #fffde6 0 15%, transparent 16%),
    linear-gradient(180deg, #ff7b9a, #ca355e) !important;
}

.game-page .resource-row .metric-label {
  font-size: 7px !important;
  letter-spacing: .08em !important;
}

.game-page .resource-row strong {
  color: var(--native-cream) !important;
  font-size: 21px !important;
  line-height: .85 !important;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .42),
    0 5px 12px rgba(0, 0, 0, .34) !important;
}

.game-page .rate-inline,
.game-page #seasonValue {
  font-size: 9px !important;
  color: rgba(235, 246, 216, .78) !important;
}

.game-page .goal-stat {
  padding: 3px 7px !important;
}

.game-page .next-goal-button {
  min-height: 30px !important;
  max-width: 100% !important;
  padding: 0 12px !important;
  border-radius: 16px !important;
  font-size: clamp(13px, 4vw, 18px) !important;
  color: #062012 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .72), transparent 38%),
    linear-gradient(180deg, #78f79b, #19c96a 72%, #0f9b50) !important;
  box-shadow:
    0 5px 0 rgba(0, 92, 47, .42),
    inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}

.game-page .goal-progress {
  height: 3px !important;
  background: rgba(255, 255, 255, .12) !important;
}

.game-page .glade-stage {
  border-radius: 24px !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 -64px 82px rgba(3, 20, 11, .5) !important;
}

.game-page .glade-head {
  top: 9px !important;
  left: 9px !important;
  right: 9px !important;
  min-height: 58px !important;
  padding: 9px 11px !important;
  border-radius: 20px !important;
  border-color: rgba(245, 255, 220, .18) !important;
  background:
    linear-gradient(180deg, rgba(7, 22, 14, .74), rgba(7, 20, 13, .54)) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  backdrop-filter: blur(16px) saturate(1.12);
}

.game-page .glade-head span,
.game-page .glade-head em {
  color: rgba(228, 243, 213, .66) !important;
}

.game-page .glade-head strong {
  max-width: 12ch !important;
  color: var(--native-cream) !important;
  font-size: clamp(27px, 8.4vw, 40px) !important;
  line-height: .9 !important;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .42),
    0 7px 18px rgba(0, 0, 0, .4) !important;
}

.game-page .glade-actions {
  gap: 6px !important;
}

.game-page .glade-actions em {
  min-height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(112, 236, 134, .32) !important;
  background: rgba(64, 186, 89, .16) !important;
}

.game-page .sound-button {
  width: 42px !important;
  height: 42px !important;
  border-radius: 16px !important;
}

.game-page .bloom-copy {
  top: 75px !important;
  left: 20px !important;
  right: auto !important;
  width: auto !important;
}

.game-page .bloom-copy small {
  min-height: 23px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: var(--native-cream) !important;
  background: rgba(9, 28, 16, .48) !important;
  border: 1px solid rgba(245, 255, 220, .14) !important;
  backdrop-filter: blur(10px) !important;
}

.game-page .bloom-copy #nextBloomName {
  display: none !important;
}

.game-page .friend-scene .seed-button {
  bottom: 1.4% !important;
  width: min(68%, 292px) !important;
  max-height: 66% !important;
}

.game-page .friend-scene::after {
  content: "" !important;
  position: absolute !important;
  left: 10% !important;
  right: 10% !important;
  bottom: 3.5% !important;
  height: 17% !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .34), transparent 64%) !important;
  filter: blur(4px) !important;
  pointer-events: none !important;
}

.game-page .skill-row {
  min-height: 72px !important;
  padding: 6px !important;
  gap: 8px !important;
  border-radius: 25px !important;
  border: 1px solid var(--native-line) !important;
  background:
    linear-gradient(180deg, rgba(8, 24, 16, .88), rgba(4, 13, 9, .86)) !important;
  box-shadow:
    0 15px 30px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

.game-page .skill-row button {
  position: relative !important;
  min-height: 58px !important;
  padding: 31px 5px 5px !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  color: var(--native-cream) !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .48) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06)) !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 7px 14px rgba(0, 0, 0, .24) !important;
}

.game-page .skill-row button::before {
  content: "" !important;
  position: absolute !important;
  top: 7px !important;
  left: 50% !important;
  width: 25px !important;
  height: 25px !important;
  border-radius: 11px !important;
  transform: translateX(-50%) !important;
  box-shadow:
    0 6px 10px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}

.game-page #dewSkillButton::before {
  background:
    radial-gradient(circle at 50% 35%, #e3ffff 0 23%, transparent 24%),
    linear-gradient(180deg, #80f1e0, #2db9aa) !important;
}

.game-page #boostSkillButton::before {
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 38% 32%, #fff9bf 0 16%, transparent 17%),
    linear-gradient(180deg, #ffdc75, #d98a2c) !important;
}

.game-page #bloomSkillButton::before {
  background:
    repeating-radial-gradient(circle at 50% 50%, #fff07d 0 3px, rgba(108, 176, 83, .86) 3px 7px, transparent 7px 10px),
    linear-gradient(180deg, #f06b9a, #b62f62) !important;
}

.game-page .bottom-tabs {
  min-height: 62px !important;
  padding: 6px !important;
  border-radius: 24px !important;
}

.game-page .bottom-tabs button {
  min-height: 48px !important;
  padding-top: 27px !important;
  border-radius: 18px !important;
  font-size: 9.5px !important;
}

.game-page .bottom-tabs button::before {
  top: 6px !important;
  width: 22px !important;
  height: 22px !important;
}

.game-page .store-panel,
.game-page .quest-panel,
.game-page .badges-panel,
.game-page .session-panel,
.game-page .leaderboard-panel {
  border-radius: 24px !important;
}

.game-page .store-item,
.game-page .store-item.garden-card,
.game-page .store-item.recommended,
.game-page .store-item.waiting,
.game-page .quest-item,
.game-page .achievement,
.game-page .leaderboard-row,
.game-page .leaderboard-empty,
.game-page .stat-list p {
  border-radius: 20px !important;
}

@media (max-width: 380px) {
  .game-page .tap-panel {
    grid-template-rows: 54px minmax(0, 1fr) 68px !important;
  }

  .game-page .resource-row strong {
    font-size: 19px !important;
  }

  .game-page .glade-head strong {
    font-size: clamp(23px, 8vw, 32px) !important;
  }

  .game-page .friend-scene .seed-button {
    width: min(66%, 260px) !important;
  }

  .game-page .skill-row {
    min-height: 68px !important;
  }
}

/* Quiet hierarchy pass: reduce label shouting and make the playfield carry the app. */
.game-page .tap-panel {
  grid-template-rows: 56px minmax(0, 1fr) 66px !important;
}

.game-page .resource-row {
  min-height: 56px !important;
}

.game-page .resource-row > div,
.game-page .resource-row .goal-stat {
  min-height: 46px !important;
}

.game-page .glade-head {
  min-height: 50px !important;
  padding: 7px 10px !important;
  border-radius: 18px !important;
}

.game-page .glade-head strong {
  max-width: 13ch !important;
  font-size: clamp(22px, 6.7vw, 31px) !important;
  letter-spacing: 0 !important;
}

.game-page .glade-head span {
  font-size: 8px !important;
  letter-spacing: .1em !important;
}

.game-page .glade-actions em {
  min-height: 22px !important;
  padding: 0 9px !important;
  font-size: 8px !important;
}

.game-page .sound-button {
  width: 38px !important;
  height: 38px !important;
  border-radius: 15px !important;
}

.game-page .bloom-copy {
  top: 64px !important;
  left: 16px !important;
}

.game-page .bloom-copy small {
  min-height: 20px !important;
  padding: 0 8px !important;
  font-size: 8px !important;
}

.game-page .friend-scene .seed-button {
  bottom: 2.5% !important;
  width: min(70%, 286px) !important;
  max-height: 67% !important;
}

.game-page .skill-row {
  min-height: 66px !important;
  padding: 5px !important;
  gap: 7px !important;
}

.game-page .skill-row button {
  min-height: 54px !important;
  padding: 29px 5px 5px !important;
  border-radius: 18px !important;
  font-size: 9.5px !important;
}

.game-page .skill-row button::before {
  top: 6px !important;
  width: 23px !important;
  height: 23px !important;
}

.game-page .bottom-tabs {
  min-height: 58px !important;
  border-radius: 22px !important;
}

.game-page .bottom-tabs button {
  min-height: 44px !important;
  padding-top: 25px !important;
}

.game-page .bottom-tabs button::before {
  top: 5px !important;
  width: 21px !important;
  height: 21px !important;
}

.game-page .section-head h2 {
  font-size: clamp(23px, 6vw, 29px) !important;
  line-height: 1.02 !important;
}

.game-page .section-head span {
  font-size: 9px !important;
}

.game-page .store-panel,
.game-page .quest-panel,
.game-page .badges-panel,
.game-page .session-panel,
.game-page .leaderboard-panel {
  padding: 10px !important;
}

.game-page .store-item,
.game-page .store-item.garden-card,
.game-page .store-item.recommended,
.game-page .store-item.waiting,
.game-page .quest-item,
.game-page .achievement,
.game-page .leaderboard-row,
.game-page .leaderboard-empty,
.game-page .stat-list p {
  min-height: 68px !important;
  padding: 9px !important;
}

.game-page .store-item,
.game-page .store-item.garden-card,
.game-page .charms-panel .store-item,
.game-page .perks-panel .store-item {
  grid-template-columns: 48px minmax(0, 1fr) minmax(88px, auto) !important;
}

.game-page .store-visual,
.game-page .store-visual.charm-seed,
.game-page .store-visual.mycelium-knot,
.game-page .friend-token {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
}

.game-page .store-item h3,
.game-page .quest-item strong,
.game-page .achievement strong {
  font-size: clamp(16px, 4.2vw, 20px) !important;
}

.game-page .store-item p,
.game-page .quest-item p,
.game-page .achievement p,
.game-page .leaderboard-empty p,
.game-page .stat-list span {
  font-size: 11.5px !important;
}

.game-page .store-item .owned,
.game-page .quest-item .owned {
  font-size: 10.5px !important;
}

.game-page .store-item button {
  min-width: 88px !important;
  min-height: 36px !important;
  border-radius: 13px !important;
  font-size: 12.5px !important;
}

@media (max-width: 380px) {
  .game-page .section-head h2 {
    font-size: 22px !important;
  }

  .game-page .store-item,
  .game-page .store-item.garden-card,
  .game-page .charms-panel .store-item,
  .game-page .perks-panel .store-item {
    grid-template-columns: 44px minmax(0, 1fr) 82px !important;
    column-gap: 7px !important;
  }

  .game-page .store-visual,
  .game-page .store-visual.charm-seed,
  .game-page .store-visual.mycelium-knot {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .game-page .store-item button {
    min-width: 82px !important;
    font-size: 11.5px !important;
  }
}

/* Native finish pass: remove webpage labels and make menus read as in-game drawers. */
.game-page .tap-panel {
  grid-template-rows: 54px minmax(0, 1fr) 74px !important;
}

.game-page .resource-row {
  min-height: 54px !important;
  padding: 4px !important;
  gap: 5px !important;
}

.game-page .resource-row > div,
.game-page .resource-row .goal-stat {
  min-height: 44px !important;
}

.game-page .resource-row .metric-label,
.game-page .glade-head span,
.game-page .glade-head em,
.game-page .bloom-copy small,
.game-page .section-head span {
  letter-spacing: 0 !important;
}

.game-page .resource-row strong {
  font-size: clamp(18px, 5.1vw, 21px) !important;
}

.game-page .next-goal-button {
  min-height: 28px !important;
  border-radius: 15px !important;
  font-size: clamp(12px, 3.5vw, 15px) !important;
}

.game-page .glade-head {
  top: 10px !important;
  left: 11px !important;
  right: 11px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

.game-page .glade-head > div:first-child,
.game-page .glade-actions {
  border: 1px solid rgba(248, 255, 222, .14) !important;
  background:
    linear-gradient(180deg, rgba(8, 23, 15, .72), rgba(6, 18, 12, .42)) !important;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .11) !important;
  backdrop-filter: blur(13px) saturate(1.08) !important;
  pointer-events: auto !important;
}

.game-page .glade-head > div:first-child {
  max-width: 46% !important;
  padding: 7px 9px !important;
  border-radius: 15px !important;
}

.game-page .glade-actions {
  padding: 4px !important;
  border-radius: 16px !important;
}

.game-page .glade-head span {
  display: block !important;
  margin-bottom: 1px !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
  color: rgba(238, 246, 218, .58) !important;
}

.game-page .glade-head strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(14px, 4.2vw, 18px) !important;
  line-height: 1.04 !important;
  text-shadow: 0 2px 7px rgba(0, 0, 0, .36) !important;
}

.game-page .glade-actions em {
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  font-size: 8.5px !important;
}

.game-page .sound-button {
  width: 32px !important;
  height: 32px !important;
  border-radius: 12px !important;
}

.game-page .bloom-copy {
  top: 54px !important;
  left: 12px !important;
}

.game-page .bloom-copy small {
  min-height: 18px !important;
  font-size: 7.5px !important;
}

.game-page .friend-scene .seed-button {
  bottom: 1.2% !important;
  width: min(68%, 276px) !important;
  max-height: 65% !important;
}

.game-page .skill-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(72px, 1fr)) !important;
  align-items: center !important;
  min-height: 74px !important;
  padding: 6px 7px !important;
  gap: 8px !important;
  border-radius: 26px !important;
}

.game-page .skill-row button {
  min-height: 62px !important;
  padding: 43px 4px 3px !important;
  border-radius: 22px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .13), transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 8px 16px rgba(0, 0, 0, .22) !important;
}

.game-page .skill-row button::before {
  top: 7px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
}

.game-page #bloomSkillButton {
  font-size: 8.5px !important;
}

body[data-tab="store"] .game-shell {
  gap: 6px !important;
}

body[data-tab="store"] .store-grid {
  padding: 8px 8px 72px !important;
  gap: 8px !important;
}

.game-page .store-panel,
.game-page .quest-panel,
.game-page .badges-panel,
.game-page .session-panel,
.game-page .leaderboard-panel {
  border-radius: 22px !important;
  padding: 9px !important;
  border-color: rgba(240, 255, 218, .15) !important;
  background:
    linear-gradient(180deg, rgba(8, 25, 16, .9), rgba(4, 14, 9, .86)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 16px 28px rgba(0, 0, 0, .28) !important;
}

.game-page .section-head {
  min-height: 26px !important;
  margin-bottom: 8px !important;
  align-items: center !important;
}

.game-page .section-head h2 {
  font-size: clamp(18px, 5.2vw, 24px) !important;
  line-height: 1 !important;
  text-shadow: 0 3px 10px rgba(0, 0, 0, .35) !important;
}

.game-page .section-head span {
  max-width: 42% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 8.5px !important;
  color: rgba(234, 246, 216, .72) !important;
}

.game-page .store-list,
.game-page .quest-list,
.game-page .achievement-list,
.game-page .leaderboard-list {
  gap: 7px !important;
}

.game-page .store-item,
.game-page .store-item.garden-card,
.game-page .charms-panel .store-item,
.game-page .perks-panel .store-item,
.game-page .quest-item,
.game-page .achievement {
  min-height: 58px !important;
  padding: 7px !important;
  border-radius: 17px !important;
  grid-template-columns: 42px minmax(0, 1fr) minmax(76px, auto) !important;
  column-gap: 8px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)) !important;
}

.game-page .store-item.recommended {
  border-color: rgba(82, 231, 121, .52) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(135, 244, 151, .18), transparent 34%),
    linear-gradient(180deg, rgba(36, 113, 55, .54), rgba(12, 48, 27, .52)) !important;
}

.game-page .store-item.waiting {
  opacity: .82 !important;
}

.game-page .store-copy {
  min-width: 0 !important;
  overflow: hidden !important;
}

.game-page .store-item h3,
.game-page .quest-item strong,
.game-page .achievement strong {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(14px, 3.8vw, 18px) !important;
  line-height: 1.02 !important;
}

.game-page .store-item p,
.game-page .quest-item p,
.game-page .achievement p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 10px !important;
  line-height: 1.08 !important;
  color: rgba(239, 247, 222, .72) !important;
}

.game-page .store-item .owned {
  margin-top: 3px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  color: #ff8caf !important;
}

.game-page .store-visual,
.game-page .store-visual.charm-seed,
.game-page .store-visual.mycelium-knot,
.game-page .friend-token {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 16px !important;
}

.game-page .store-item button {
  min-width: 76px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border-radius: 12px !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
}

.game-page .charms-panel,
.game-page .perks-panel {
  min-height: 0 !important;
}

.game-page .charms-panel .store-list,
.game-page .perks-panel .store-list {
  max-height: none !important;
}

.game-page .perks-panel .store-item:not(:has(button)),
.game-page .charms-panel .store-item:not(:has(button)) {
  grid-template-columns: 42px minmax(0, 1fr) !important;
}

@media (max-width: 380px) {
  .game-page .tap-panel {
    grid-template-rows: 52px minmax(0, 1fr) 70px !important;
  }

  .game-page .glade-head > div:first-child {
    max-width: 48% !important;
  }

  .game-page .glade-head strong {
    font-size: 14px !important;
  }

  .game-page .skill-row {
    grid-template-columns: repeat(3, minmax(66px, 1fr)) !important;
  }

  .game-page .store-item,
  .game-page .store-item.garden-card,
  .game-page .charms-panel .store-item,
  .game-page .perks-panel .store-item,
  .game-page .quest-item,
  .game-page .achievement {
    grid-template-columns: 38px minmax(0, 1fr) 70px !important;
    column-gap: 7px !important;
  }

  .game-page .store-visual,
  .game-page .store-visual.charm-seed,
  .game-page .store-visual.mycelium-knot {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .game-page .store-item button {
    min-width: 70px !important;
    font-size: 10px !important;
  }
}

/* Production pass: one cohesive mobile-game skin over the accumulated web-pass overrides. */
body.game-page {
  --prod-ink: #fff6d4;
  --prod-soft: rgba(255, 246, 212, .74);
  --prod-dim: rgba(218, 235, 196, .58);
  --prod-panel: rgba(5, 18, 12, .78);
  --prod-panel-strong: rgba(5, 16, 11, .92);
  --prod-line: rgba(244, 255, 216, .13);
  --prod-shadow: 0 16px 34px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .09);
  --prod-green: #49dd79;
  --prod-green-dark: #0d8e51;
  --prod-gold: #f5c65e;
  --prod-rose: #ed5d84;
  --prod-teal: #54d2c4;
  color: var(--prod-ink) !important;
  background:
    radial-gradient(circle at 50% -12%, rgba(245, 198, 94, .22), transparent 27%),
    radial-gradient(circle at 18% 24%, rgba(84, 210, 196, .1), transparent 28%),
    linear-gradient(180deg, #06100b 0%, #0b2115 54%, #040907 100%) !important;
  font-family: "Segoe UI Variable", "Aptos", Inter, ui-sans-serif, system-ui, sans-serif !important;
}

.game-page .phone-frame {
  background:
    radial-gradient(circle at 50% 11%, rgba(255, 226, 121, .08), transparent 28%),
    linear-gradient(180deg, #07160f 0%, #102b1b 54%, #040b08 100%) !important;
}

.game-page .game-shell {
  width: min(100vw, 430px) !important;
  gap: 6px !important;
  padding: 6px 8px max(6px, env(safe-area-inset-bottom)) !important;
}

.game-page .tap-panel {
  grid-template-rows: 50px minmax(0, 1fr) 0 72px !important;
  gap: 6px !important;
}

.game-page .resource-row {
  min-height: 50px !important;
  padding: 3px !important;
  gap: 4px !important;
  border: 1px solid var(--prod-line) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(13, 35, 22, .76), rgba(5, 18, 12, .84)) !important;
  box-shadow: var(--prod-shadow) !important;
}

.game-page .resource-row > div,
.game-page .resource-row .goal-stat {
  min-height: 42px !important;
  border-radius: 15px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, .045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.game-page .resource-row > div:first-child::before,
.game-page .resource-row > div:last-child::before {
  width: 15px !important;
  height: 15px !important;
  margin-bottom: 0 !important;
}

.game-page .resource-row .metric-label {
  font-size: 6.5px !important;
  line-height: 1 !important;
  color: var(--prod-dim) !important;
  text-transform: none !important;
}

.game-page .resource-row strong {
  font-size: clamp(17px, 4.8vw, 20px) !important;
  font-weight: 900 !important;
  color: var(--prod-ink) !important;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .36) !important;
}

.game-page .rate-inline,
.game-page #seasonValue {
  font-size: 7.5px !important;
  color: var(--prod-dim) !important;
}

.game-page .goal-stat {
  display: grid !important;
  align-content: center !important;
  gap: 2px !important;
  padding: 3px 5px !important;
}

.game-page .next-goal-button {
  min-height: 24px !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 0 10px !important;
  font-size: clamp(11px, 3.2vw, 14px) !important;
  font-weight: 900 !important;
  color: #062015 !important;
  background:
    linear-gradient(180deg, #75f09a 0%, #27ca6a 64%, #119650 100%) !important;
  box-shadow:
    0 3px 0 rgba(0, 91, 48, .46),
    inset 0 1px 0 rgba(255, 255, 255, .48) !important;
}

.game-page .goal-progress {
  height: 2px !important;
}

.game-page .glade-stage {
  border: 1px solid rgba(246, 255, 216, .13) !important;
  border-radius: 22px !important;
  background-color: #0b2115 !important;
  box-shadow:
    0 20px 38px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -92px 84px rgba(2, 11, 7, .58) !important;
}

.game-page .glade-head > div:first-child,
.game-page .glade-actions {
  background:
    linear-gradient(180deg, rgba(3, 14, 9, .68), rgba(3, 14, 9, .36)) !important;
  border-color: rgba(246, 255, 216, .12) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.game-page .glade-head > div:first-child {
  max-width: 43% !important;
  padding: 6px 8px !important;
}

.game-page .glade-head strong {
  font-size: clamp(12px, 3.8vw, 16px) !important;
  font-weight: 900 !important;
}

.game-page .glade-head span,
.game-page .glade-head em,
.game-page .bloom-copy small {
  font-size: 7px !important;
  color: var(--prod-dim) !important;
  text-transform: none !important;
}

.game-page .glade-actions em {
  min-height: 27px !important;
  border-radius: 11px !important;
  background: rgba(72, 205, 102, .13) !important;
  border-color: rgba(83, 224, 113, .22) !important;
}

.game-page .sound-button {
  width: 29px !important;
  height: 29px !important;
  border-radius: 10px !important;
}

.game-page .friend-scene .seed-button {
  width: min(64%, 260px) !important;
  max-height: 62% !important;
  bottom: 2.2% !important;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .34)) !important;
}

.game-page .friend-scene.scene-tapped .seed-button,
.game-page .seed-button.is-pressed {
  transform: translateY(3px) scale(.985) !important;
}

.game-page .skill-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  min-height: 72px !important;
  gap: 8px !important;
  padding: 7px 9px !important;
  border-radius: 24px !important;
  border: 1px solid var(--prod-line) !important;
  background:
    linear-gradient(180deg, rgba(5, 18, 12, .78), rgba(2, 10, 7, .88)) !important;
  box-shadow: var(--prod-shadow) !important;
}

.game-page .skill-row button {
  display: grid !important;
  place-items: end center !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 42px 2px 5px !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: var(--prod-soft) !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .46) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.game-page .skill-row button::before {
  top: 4px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  box-shadow:
    0 8px 14px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .54),
    inset 0 -5px 12px rgba(0, 0, 0, .18) !important;
}

.game-page .skill-row button[data-ready="true"]::before {
  outline: 2px solid rgba(255, 236, 138, .5) !important;
  outline-offset: 2px !important;
}

.game-page #dewSkillButton::before {
  background:
    radial-gradient(circle at 36% 26%, #f3ffff 0 13%, transparent 14%),
    radial-gradient(circle at 50% 58%, rgba(255, 255, 255, .72) 0 20%, transparent 21%),
    linear-gradient(180deg, #6ee6dc, #159c92) !important;
}

.game-page #boostSkillButton::before {
  background:
    radial-gradient(circle at 36% 25%, #fff9bf 0 13%, transparent 14%),
    radial-gradient(circle at 60% 62%, rgba(255, 244, 170, .64) 0 18%, transparent 19%),
    linear-gradient(180deg, #ffd86f, #c77a24) !important;
}

.game-page #bloomSkillButton::before {
  background:
    repeating-radial-gradient(circle at 50% 50%, #fff076 0 3px, rgba(117, 179, 78, .9) 3px 7px, transparent 7px 10px),
    linear-gradient(180deg, #ff6f9a, #9f2851) !important;
}

.game-page .skill-row #dewSkillButton::after,
.game-page .skill-row #boostSkillButton::after,
.game-page .skill-row #bloomSkillButton::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 50% !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(circle at 50% 50%, rgba(255, 243, 162, .18), transparent 64%) !important;
  box-shadow: 0 0 18px rgba(255, 223, 117, .16) !important;
  pointer-events: none !important;
}

.game-page .bottom-tabs {
  min-height: 58px !important;
  padding: 6px 8px !important;
  border-radius: 23px !important;
  border: 1px solid var(--prod-line) !important;
  background:
    linear-gradient(180deg, rgba(5, 20, 13, .88), rgba(2, 10, 7, .9)) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.game-page .bottom-tabs button {
  min-height: 46px !important;
  border-radius: 17px !important;
  padding-top: 27px !important;
  border: 0 !important;
  color: rgba(255, 246, 212, .6) !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.game-page .bottom-tabs button[aria-pressed="true"] {
  color: var(--prod-ink) !important;
  background: rgba(255, 255, 255, .075) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 7px 14px rgba(0, 0, 0, .22) !important;
}

.game-page .bottom-tabs button::before {
  top: 6px !important;
  width: 23px !important;
  height: 23px !important;
  box-shadow:
    0 5px 9px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .58) !important;
}

body[data-tab="store"] .store-grid,
body[data-tab="quests"] .log-grid,
body[data-tab="board"] .log-grid {
  padding: 8px 8px 70px !important;
  gap: 8px !important;
}

.game-page .store-panel,
.game-page .quest-panel,
.game-page .badges-panel,
.game-page .session-panel,
.game-page .leaderboard-panel {
  border: 1px solid var(--prod-line) !important;
  border-radius: 21px !important;
  padding: 9px !important;
  background:
    linear-gradient(180deg, rgba(6, 21, 14, .89), rgba(3, 12, 8, .89)) !important;
  box-shadow: var(--prod-shadow) !important;
}

.game-page .section-head {
  min-height: 24px !important;
  margin-bottom: 7px !important;
}

.game-page .section-head h2 {
  color: var(--prod-ink) !important;
  font-size: clamp(16px, 4.7vw, 21px) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 3px 9px rgba(0, 0, 0, .3) !important;
}

.game-page .section-head span {
  max-width: 45% !important;
  color: var(--prod-dim) !important;
  font-size: 7.5px !important;
  text-transform: none !important;
}

.game-page .store-list,
.game-page .quest-list,
.game-page .achievement-list,
.game-page .leaderboard-list {
  gap: 6px !important;
}

.game-page .store-item,
.game-page .store-item.garden-card,
.game-page .charms-panel .store-item,
.game-page .perks-panel .store-item,
.game-page .quest-item,
.game-page .achievement,
.game-page .leaderboard-row,
.game-page .leaderboard-empty,
.game-page .stat-list p {
  min-height: 56px !important;
  padding: 7px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 7% 0%, rgba(255, 255, 255, .07), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .024)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.game-page .store-item,
.game-page .store-item.garden-card,
.game-page .charms-panel .store-item,
.game-page .perks-panel .store-item {
  grid-template-columns: 40px minmax(0, 1fr) 72px !important;
  column-gap: 8px !important;
}

.game-page .store-item.recommended {
  border-color: rgba(78, 221, 121, .48) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(80, 229, 127, .18), transparent 32%),
    linear-gradient(180deg, rgba(21, 89, 45, .58), rgba(8, 41, 24, .54)) !important;
}

.game-page .store-visual,
.game-page .store-visual.charm-seed,
.game-page .store-visual.mycelium-knot,
.game-page .friend-token {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 14px !important;
  box-shadow:
    0 8px 14px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .52) !important;
}

.game-page .store-item h3,
.game-page .quest-item strong,
.game-page .achievement strong {
  color: var(--prod-ink) !important;
  font-size: clamp(13px, 3.6vw, 16px) !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  text-shadow: 0 2px 7px rgba(0, 0, 0, .34) !important;
}

.game-page .store-item p,
.game-page .quest-item p,
.game-page .achievement p,
.game-page .leaderboard-empty p,
.game-page .stat-list span {
  color: var(--prod-dim) !important;
  font-size: 9px !important;
  line-height: 1.08 !important;
}

.game-page .store-item .owned,
.game-page .quest-item .owned {
  color: rgba(255, 142, 174, .9) !important;
  font-size: 8px !important;
  font-weight: 850 !important;
}

.game-page .store-item button,
.game-page .charms-panel .store-item button,
.game-page .perks-panel .store-item button {
  min-width: 72px !important;
  min-height: 30px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 11px !important;
  color: #0d1b10 !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  background:
    linear-gradient(180deg, #ffe48d, #e7a83d) !important;
  box-shadow:
    0 4px 0 rgba(92, 58, 9, .35),
    inset 0 1px 0 rgba(255, 255, 255, .52) !important;
}

.game-page .store-item.recommended button:not(:disabled) {
  background:
    linear-gradient(180deg, #76f39b, #24c968 70%, #129553) !important;
  box-shadow:
    0 4px 0 rgba(0, 85, 46, .38),
    inset 0 1px 0 rgba(255, 255, 255, .54) !important;
}

.game-page .store-item button:disabled {
  color: rgba(21, 24, 15, .84) !important;
  background:
    linear-gradient(180deg, #ffdc7c, #d69939) !important;
  opacity: .92 !important;
}

.game-page .pop {
  color: #fff7c9 !important;
  font-size: 15px !important;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .42),
    0 0 12px rgba(255, 218, 97, .38) !important;
}

.game-page .moment-banner {
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(5, 18, 12, .92), rgba(3, 12, 8, .88)) !important;
  border-color: rgba(255, 236, 166, .19) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.game-page .moment-banner strong {
  color: #fff8df !important;
  font-size: 14px !important;
}

.game-page .moment-banner span {
  color: var(--prod-dim) !important;
  font-size: 9px !important;
}

@media (max-width: 380px) {
  .game-page .game-shell {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .game-page .tap-panel {
    grid-template-rows: 48px minmax(0, 1fr) 0 70px !important;
  }

  .game-page .friend-scene .seed-button {
    width: min(63%, 238px) !important;
  }

  .game-page .store-item,
  .game-page .store-item.garden-card,
  .game-page .charms-panel .store-item,
  .game-page .perks-panel .store-item {
    grid-template-columns: 37px minmax(0, 1fr) 66px !important;
    column-gap: 7px !important;
  }

  .game-page .store-visual,
  .game-page .store-visual.charm-seed,
  .game-page .store-visual.mycelium-knot {
    width: 37px !important;
    height: 37px !important;
    min-width: 37px !important;
  }

  .game-page .store-item button,
  .game-page .charms-panel .store-item button,
  .game-page .perks-panel .store-item button {
    min-width: 66px !important;
    font-size: 9px !important;
  }
}

/* Final dock override: beat earlier ID-specific button gradients. */
body.game-page .phone-frame .game-shell .skill-row button#dewSkillButton,
body.game-page .phone-frame .game-shell .skill-row button#boostSkillButton,
body.game-page .phone-frame .game-shell .skill-row button#bloomSkillButton {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Motion pass: restrained game-feel animation instead of scattered CSS toy motion. */
.game-page .friend-scene {
  transition: filter .18s ease-out !important;
}

.game-page .friend-scene .seed-button {
  transform-origin: 50% 92% !important;
  will-change: transform, filter !important;
  animation: prodIdleFloat 3.1s ease-in-out infinite alternate !important;
}

.game-page .friend-scene.scene-tapped .seed-button,
.game-page .seed-button.is-pressed {
  animation: prodTapPress .26s cubic-bezier(.18, 1.28, .28, 1) both !important;
}

.game-page .seed-button::before {
  transform-origin: 50% 82% !important;
  animation: prodCapBreath 3.2s ease-in-out infinite alternate !important;
}

.game-page .seed-button.is-pressed::before,
.game-page .friend-scene.scene-tapped .seed-button::before {
  animation: prodCapPress .26s cubic-bezier(.18, 1.28, .28, 1) both !important;
}

.game-page .seed-button::after,
.game-page .seed-core,
.game-page .seed-cheeks {
  transition: transform .14s ease-out, filter .14s ease-out, opacity .14s ease-out !important;
}

.game-page .seed-button.is-pressed .seed-core,
.game-page .friend-scene.scene-tapped .seed-core {
  transform: translateY(3px) scaleX(1.03) scaleY(.96) !important;
}

.game-page .seed-button.is-pressed .seed-cheeks,
.game-page .friend-scene.scene-tapped .seed-cheeks {
  transform: translateY(2px) scale(1.05) !important;
  filter: saturate(1.12) brightness(1.05) !important;
}

.game-page .tap-ring,
.game-page .scene-pulse {
  border-style: solid !important;
}

.game-page .tap-ring {
  z-index: 7 !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(255, 244, 177, .74) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: 0 0 12px rgba(255, 223, 112, .2) !important;
  animation: prodTapRing .42s ease-out forwards !important;
}

.game-page .tap-ring.hot {
  border-color: rgba(255, 245, 155, .9) !important;
  box-shadow: 0 0 18px rgba(255, 222, 105, .34) !important;
}

.game-page .tap-flash {
  z-index: 6 !important;
  inset: -10% !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 242, 172, .3), transparent 22%),
    radial-gradient(circle at 50% 55%, rgba(255, 137, 165, .12), transparent 38%) !important;
  animation: prodTapFlash .28s ease-out forwards !important;
}

.game-page .tap-petal {
  z-index: 8 !important;
  width: 5px !important;
  height: 8px !important;
  border-radius: 999px 999px 999px 3px !important;
  opacity: .92 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18) !important;
  animation: prodPetal .56s cubic-bezier(.13, .72, .17, 1) forwards !important;
}

.game-page .scene-pulse {
  width: 12px !important;
  height: 12px !important;
  border: 1px solid rgba(255, 238, 151, .38) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 236, 142, .2), transparent 58%) !important;
  box-shadow: 0 0 16px rgba(255, 230, 129, .18) !important;
  animation: prodScenePulse .46s ease-out forwards !important;
}

.game-page .spore-pop,
.game-page .spore-spark {
  animation: prodSpore .58s cubic-bezier(.13, .72, .17, 1) forwards !important;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .2)) !important;
}

.game-page .spore-pop {
  background:
    radial-gradient(circle at 34% 28%, #fff7cd 0 22%, transparent 23%),
    linear-gradient(180deg, #ffd878, #ed6685) !important;
}

.game-page .spore-spark {
  background: #fff0a8 !important;
  filter: drop-shadow(0 0 7px rgba(255, 225, 105, .48)) !important;
}

.game-page .pop {
  animation: prodRewardNumber .62s cubic-bezier(.14, .7, .16, 1) forwards !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
}

.game-page .pop-hot {
  animation-duration: .7s !important;
}

.game-page .moment-banner {
  top: auto !important;
  left: 20px !important;
  right: 20px !important;
  bottom: calc(166px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  z-index: 90 !important;
  animation: prodToastIn .22s ease-out both !important;
}

.game-page .moment-banner.leaving {
  animation: prodToastOut .22s ease-in forwards !important;
}

body[data-tab="store"] .store-panel,
body[data-tab="quests"] .store-panel,
body[data-tab="board"] .store-panel {
  animation: prodPanelIn .2s ease-out both !important;
}

body[data-tab="store"] .store-item,
body[data-tab="quests"] .quest-item,
body[data-tab="quests"] .achievement,
body[data-tab="board"] .leaderboard-row {
  animation: prodItemIn .18s ease-out both !important;
}

body[data-tab="store"] .store-item:nth-child(2),
body[data-tab="quests"] .quest-item:nth-child(2),
body[data-tab="quests"] .achievement:nth-child(2) {
  animation-delay: .025s !important;
}

body[data-tab="store"] .store-item:nth-child(3),
body[data-tab="quests"] .quest-item:nth-child(3),
body[data-tab="quests"] .achievement:nth-child(3) {
  animation-delay: .05s !important;
}

.game-page .bottom-tabs button,
.game-page .store-item button,
.game-page .skill-row button {
  transition:
    transform .1s ease-out,
    opacity .12s ease-out,
    color .12s ease-out,
    background .12s ease-out,
    box-shadow .12s ease-out !important;
}

.game-page .bottom-tabs button:active,
.game-page .store-item button:active,
.game-page .skill-row button:active {
  transform: translateY(1px) scale(.98) !important;
}

@keyframes prodIdleFloat {
  from { transform: translateY(0) scale(1); filter: brightness(1) saturate(1); }
  to { transform: translateY(-4px) scale(1.006); filter: brightness(1.025) saturate(1.025); }
}

@keyframes prodTapPress {
  0% { transform: translateY(-2px) scale(1.006); filter: brightness(1.02) saturate(1.02); }
  42% { transform: translateY(5px) scaleX(1.045) scaleY(.94); filter: brightness(1.08) saturate(1.08); }
  78% { transform: translateY(-2px) scaleX(.99) scaleY(1.018); }
  100% { transform: translateY(0) scale(1); filter: brightness(1) saturate(1); }
}

@keyframes prodCapBreath {
  from { transform: translateY(0) scale(1); filter: brightness(1); }
  to { transform: translateY(-2px) scale(1.006); filter: brightness(1.025); }
}

@keyframes prodCapPress {
  0% { transform: translateY(0) scale(1); }
  44% { transform: translateY(6px) scaleX(1.045) scaleY(.92); }
  78% { transform: translateY(-2px) scaleX(.99) scaleY(1.02); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes prodTapRing {
  0% { opacity: .9; transform: translate(-50%, -50%) scale(.45); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
}

@keyframes prodTapFlash {
  0% { opacity: .55; transform: scale(.86); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes prodPetal {
  0% { opacity: .92; transform: translate(-50%, -50%) scale(.7) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.35) rotate(var(--turn)); }
}

@keyframes prodScenePulse {
  0% { opacity: .55; transform: translate(-50%, -50%) scale(.45); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(6); }
}

@keyframes prodSpore {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(0); }
  14% { opacity: .92; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.28) rotate(var(--spin)); }
}

@keyframes prodRewardNumber {
  0% { opacity: 0; transform: translate(-50%, -12%) scale(.86); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -88%) scale(1.04); }
}

@keyframes prodToastIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes prodToastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(6px) scale(.98); }
}

@keyframes prodPanelIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes prodItemIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .game-page .friend-scene .seed-button,
  .game-page .seed-button::before,
  .game-page .tap-ring,
  .game-page .tap-flash,
  .game-page .tap-petal,
  .game-page .scene-pulse,
  .game-page .spore-pop,
  .game-page .spore-spark,
  .game-page .pop,
  .game-page .moment-banner,
  body[data-tab="store"] .store-panel,
  body[data-tab="quests"] .store-panel,
  body[data-tab="board"] .store-panel,
  body[data-tab="store"] .store-item,
  body[data-tab="quests"] .quest-item,
  body[data-tab="quests"] .achievement,
  body[data-tab="board"] .leaderboard-row {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Shroom RPG combat pass: enemy, boss, ally, and hit-feedback layers. */
.game-page .glade-stage {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
}

.game-page .combat-strip {
  position: relative !important;
  z-index: 8 !important;
  display: grid !important;
  gap: 5px !important;
  padding: 8px 10px 7px !important;
  border: 1px solid rgba(237, 255, 176, .16) !important;
  border-radius: 15px 17px 14px 16px / 17px 14px 16px 13px !important;
  color: var(--prod-ink) !important;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 239, 145, .13), transparent 34%),
    linear-gradient(180deg, rgba(5, 23, 15, .86), rgba(2, 12, 8, .92)) !important;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.game-page .combat-line {
  display: grid !important;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.game-page .combat-line span,
.game-page .combat-line em,
.game-page .combat-strip small {
  overflow: hidden !important;
  color: rgba(244, 255, 211, .66) !important;
  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .34) !important;
}

.game-page .combat-line strong {
  overflow: hidden !important;
  color: #fff5b9 !important;
  font-family: var(--drawn-font) !important;
  font-size: clamp(13px, 3.8vw, 16px) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .48) !important;
}

.game-page .combat-line em {
  min-width: 30px !important;
  padding: 4px 6px !important;
  border: 1px solid rgba(255, 184, 112, .34) !important;
  border-radius: 999px !important;
  color: #ffd884 !important;
  text-align: center !important;
  background: rgba(108, 35, 23, .45) !important;
  box-shadow: 0 0 14px rgba(255, 124, 72, .18) !important;
}

.game-page .combat-line em:empty {
  display: none !important;
}

.game-page .enemy-health {
  position: relative !important;
  overflow: hidden !important;
  height: 10px !important;
  border: 1px solid rgba(255, 248, 187, .18) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(2, 8, 6, .88), rgba(22, 40, 20, .7)) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .42),
    0 5px 12px rgba(0, 0, 0, .2) !important;
}

.game-page .enemy-health span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg, #5cff93, #e9e25c 48%, #ff7b65) !important;
  background-size: 180% 100% !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 0 14px rgba(119, 255, 148, .24) !important;
  transition: width .16s cubic-bezier(.2, .85, .15, 1) !important;
  animation: prod4ProgressFlow 3s linear infinite !important;
}

.game-page .friend-scene[data-boss="true"] {
  animation: shroomBossScene 1.1s ease-in-out infinite alternate !important;
}

.game-page .enemy-target {
  --enemy-a: #8add6d;
  --enemy-b: #315f36;
  --enemy-c: #f5d76e;
  --enemy-shadow: rgba(2, 12, 7, .6);
  position: absolute !important;
  z-index: 7 !important;
  left: 50% !important;
  top: 5% !important;
  display: block !important;
  width: min(35%, 152px) !important;
  aspect-ratio: 1.04 / .82 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
  transform-origin: 50% 85% !important;
  pointer-events: none !important;
  filter:
    drop-shadow(0 12px 0 rgba(0, 0, 0, .18))
    drop-shadow(0 24px 22px rgba(0, 0, 0, .38)) !important;
  animation: shroomEnemyIdle 2.8s ease-in-out infinite !important;
}

.game-page .enemy-target::before {
  content: "" !important;
  position: absolute !important;
  left: 4% !important;
  right: 4% !important;
  bottom: 2% !important;
  height: 65% !important;
  border: 2px solid rgba(255, 255, 210, .16) !important;
  border-radius: 46% 54% 39% 45% / 62% 62% 38% 42% !important;
  background:
    radial-gradient(circle at 26% 27%, rgba(255, 255, 220, .44), transparent 16%),
    radial-gradient(circle at 71% 72%, rgba(0, 0, 0, .18), transparent 28%),
    linear-gradient(145deg, var(--enemy-a), var(--enemy-b)) !important;
  box-shadow:
    inset 0 -8px 14px rgba(0, 0, 0, .18),
    inset 0 4px 10px rgba(255, 255, 255, .17) !important;
}

.game-page .enemy-target::after {
  content: "" !important;
  position: absolute !important;
  left: 12% !important;
  right: 12% !important;
  bottom: -7% !important;
  height: 16% !important;
  border-radius: 999px !important;
  background: radial-gradient(ellipse at 50% 50%, var(--enemy-shadow), transparent 70%) !important;
  opacity: .72 !important;
  animation: shroomEnemyShadow 2.8s ease-in-out infinite !important;
}

.game-page .enemy-target i {
  position: absolute !important;
  z-index: 2 !important;
  left: 18% !important;
  right: 18% !important;
  top: 24% !important;
  height: 50% !important;
  display: block !important;
  border-radius: 52% 48% 42% 44% / 52% 50% 44% 42% !important;
  background:
    radial-gradient(circle at 35% 50%, #1d1a16 0 6%, transparent 7%),
    radial-gradient(circle at 65% 50%, #1d1a16 0 6%, transparent 7%),
    radial-gradient(ellipse at 50% 72%, rgba(255, 248, 184, .34) 0 10%, transparent 11%),
    linear-gradient(180deg, rgba(255, 255, 218, .2), rgba(0, 0, 0, .08)) !important;
}

.game-page .enemy-target i::before,
.game-page .enemy-target i::after {
  content: "" !important;
  position: absolute !important;
  top: -22% !important;
  width: 20% !important;
  height: 36% !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--enemy-c), rgba(255, 244, 159, .32)) !important;
  transform-origin: 50% 100% !important;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .16) !important;
}

.game-page .enemy-target i::before {
  left: 10% !important;
  transform: rotate(-22deg) !important;
}

.game-page .enemy-target i::after {
  right: 10% !important;
  transform: rotate(22deg) !important;
}

.game-page .enemy-target[data-variant="1"] { --enemy-a: #9ad782; --enemy-b: #537444; --enemy-c: #d9ff9f; }
.game-page .enemy-target[data-variant="2"] { --enemy-a: #c9a173; --enemy-b: #684331; --enemy-c: #ffdf89; }
.game-page .enemy-target[data-variant="3"] { --enemy-a: #9c8cff; --enemy-b: #392f82; --enemy-c: #d8c6ff; }
.game-page .enemy-target[data-variant="4"] { --enemy-a: #d88978; --enemy-b: #66342d; --enemy-c: #ffe29a; }
.game-page .enemy-target[data-variant="5"] { --enemy-a: #96a08d; --enemy-b: #334036; --enemy-c: #f0f0c4; }
.game-page .enemy-target[data-variant="6"] { --enemy-a: #7fd2c5; --enemy-b: #244f55; --enemy-c: #c5fff6; }
.game-page .enemy-target[data-variant="7"] { --enemy-a: #c9cf7d; --enemy-b: #4e5a25; --enemy-c: #fff18b; }
.game-page .enemy-target[data-variant="8"],
.game-page .enemy-target[data-variant="9"],
.game-page .enemy-target[data-variant="10"],
.game-page .enemy-target[data-variant="11"] {
  --enemy-a: #d8b36b;
  --enemy-b: #5b3328;
  --enemy-c: #ffefa1;
}

.game-page .enemy-target[data-boss="true"] {
  top: 3% !important;
  width: min(45%, 202px) !important;
  aspect-ratio: 1.12 / .84 !important;
  filter:
    drop-shadow(0 16px 0 rgba(0, 0, 0, .2))
    drop-shadow(0 34px 30px rgba(0, 0, 0, .48))
    drop-shadow(0 0 22px rgba(255, 134, 76, .2)) !important;
  animation: shroomBossIdle 1.25s ease-in-out infinite !important;
}

.game-page .enemy-target[data-boss="true"]::before {
  border-color: rgba(255, 226, 135, .24) !important;
  box-shadow:
    inset 0 -13px 18px rgba(0, 0, 0, .24),
    inset 0 5px 14px rgba(255, 255, 255, .2),
    0 0 20px rgba(255, 106, 75, .16) !important;
}

.game-page .enemy-target.enemy-hit {
  animation: shroomEnemyHit .24s cubic-bezier(.15, 1.3, .32, 1) both !important;
}

.game-page .enemy-target.enemy-defeated {
  animation: shroomEnemyDefeat .58s cubic-bezier(.12, .9, .18, 1) both !important;
}

.game-page .damage-number {
  position: fixed !important;
  z-index: 9000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(255, 255, 218, .32) !important;
  border-radius: 999px !important;
  color: #fff4ae !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .45) !important;
  background: rgba(80, 32, 30, .64) !important;
  box-shadow: 0 9px 18px rgba(0, 0, 0, .28), 0 0 18px rgba(255, 222, 112, .17) !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) !important;
  animation: shroomDamageNumber .68s ease-out both !important;
}

.game-page .damage-number.hot {
  color: #fff6d0 !important;
  background: rgba(133, 45, 38, .74) !important;
  box-shadow: 0 11px 22px rgba(0, 0, 0, .34), 0 0 22px rgba(255, 119, 76, .28) !important;
}

.game-page .damage-slash {
  position: absolute !important;
  z-index: 12 !important;
  width: 72px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, transparent, rgba(255, 252, 196, .96) 36%, rgba(255, 137, 96, .92) 60%, transparent) !important;
  box-shadow: 0 0 18px rgba(255, 220, 116, .34) !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) rotate(-22deg) scale(.7) !important;
  animation: shroomDamageSlash .42s ease-out both !important;
}

.game-page .damage-slash.hot {
  width: 92px !important;
  height: 22px !important;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 212, 1) 30%, rgba(255, 103, 86, .98) 62%, transparent) !important;
}

.game-page .companion.live::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 34% !important;
  width: 28px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(255, 246, 170, 0), rgba(255, 246, 170, .9), rgba(153, 255, 190, 0)) !important;
  transform-origin: 0 50% !important;
  transform: translateX(-4px) rotate(-14deg) scaleX(.2) !important;
  opacity: 0 !important;
  animation: shroomAllyStrike 2.7s ease-in-out infinite !important;
}

.game-page .companion.live:nth-child(2n)::after {
  animation-delay: .55s !important;
  transform: translateX(-4px) rotate(-2deg) scaleX(.2) !important;
}

.game-page .companion.live:nth-child(3n)::after {
  animation-delay: 1.05s !important;
  transform: translateX(-4px) rotate(-28deg) scaleX(.2) !important;
}

.game-page .sprout.live::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -2px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(255, 240, 139, .88) !important;
  box-shadow: 0 0 10px rgba(255, 240, 139, .4) !important;
  opacity: 0 !important;
  animation: shroomSporeLaunch 3.4s ease-in-out infinite !important;
}

.game-page .friend-scene.scene-tapped .seed-button,
.game-page .seed-button.is-pressed {
  transform: translateX(-50%) translateY(3px) scale(.985) !important;
}

@keyframes shroomEnemyIdle {
  0%, 100% { transform: translateX(-50%) translateY(0) scaleX(1) scaleY(1) rotate(-.8deg); }
  36% { transform: translateX(-50%) translateY(-5px) scaleX(.982) scaleY(1.03) rotate(.9deg); }
  66% { transform: translateX(-50%) translateY(2px) scaleX(1.018) scaleY(.982) rotate(-.3deg); }
}

@keyframes shroomBossIdle {
  0%, 100% { transform: translateX(-50%) translateY(0) scaleX(1) scaleY(1) rotate(-.3deg); }
  44% { transform: translateX(-50%) translateY(7px) scaleX(1.045) scaleY(.94) rotate(.6deg); }
  62% { transform: translateX(-50%) translateY(-4px) scaleX(.97) scaleY(1.055) rotate(-.5deg); }
}

@keyframes shroomEnemyShadow {
  0%, 100% { opacity: .72; transform: scaleX(1); }
  36% { opacity: .48; transform: scaleX(.82); }
  66% { opacity: .82; transform: scaleX(1.08); }
}

@keyframes shroomEnemyHit {
  0% { transform: translateX(-50%) translateY(0) scale(1) rotate(0); filter: brightness(1.02) saturate(1.02); }
  28% { transform: translateX(calc(-50% + 12px)) translateY(3px) scaleX(1.1) scaleY(.88) rotate(5deg); filter: brightness(1.42) saturate(1.22); }
  62% { transform: translateX(calc(-50% - 7px)) translateY(-3px) scaleX(.94) scaleY(1.08) rotate(-4deg); filter: brightness(1.18) saturate(1.1); }
  100% { transform: translateX(-50%) translateY(0) scale(1) rotate(0); filter: brightness(1) saturate(1); }
}

@keyframes shroomEnemyDefeat {
  0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) rotate(0); filter: brightness(1.1) saturate(1.1); }
  28% { opacity: 1; transform: translateX(-50%) translateY(-14px) scaleX(1.16) scaleY(.82) rotate(4deg); filter: brightness(1.5) saturate(1.24); }
  58% { opacity: .86; transform: translateX(-50%) translateY(7px) scaleX(.82) scaleY(1.14) rotate(-8deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.25) rotate(18deg); filter: blur(2px) brightness(1.25); }
}

@keyframes shroomBossScene {
  0% { transform: translate3d(0, 0, 0); filter: saturate(.96) contrast(.98) brightness(1); }
  100% { transform: translate3d(0, 2px, 0); filter: saturate(1.06) contrast(1.02) brightness(1.03); }
}

@keyframes shroomDamageNumber {
  0% { opacity: 0; transform: translate(-50%, -26%) scale(.74); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -142%) scale(.9); }
}

@keyframes shroomDamageSlash {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-24deg) scaleX(.25) scaleY(.6); }
  20% { opacity: 1; transform: translate(-50%, -50%) rotate(-24deg) scaleX(1.05) scaleY(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-24deg) scaleX(1.26) scaleY(.72); }
}

@keyframes shroomAllyStrike {
  0%, 48%, 100% { opacity: 0; transform: translateX(-4px) rotate(-14deg) scaleX(.12); }
  54% { opacity: .95; transform: translateX(8px) rotate(-14deg) scaleX(1); }
  66% { opacity: 0; transform: translateX(44px) rotate(-14deg) scaleX(.3); }
}

@keyframes shroomSporeLaunch {
  0%, 56%, 100% { opacity: 0; transform: translate(-50%, 0) scale(.65); }
  62% { opacity: .9; transform: translate(-50%, -8px) scale(1); }
  78% { opacity: 0; transform: translate(30px, -44px) scale(.45); }
}

@media (max-width: 430px) {
  .game-page .combat-strip {
    padding: 7px 8px 6px !important;
    gap: 4px !important;
  }

  .game-page .enemy-target {
    top: 4% !important;
    width: min(38%, 136px) !important;
  }

  .game-page .enemy-target[data-boss="true"] {
    width: min(48%, 172px) !important;
  }
}

@media (max-height: 720px) {
  .game-page .combat-strip {
    padding: 5px 8px !important;
  }

  .game-page .combat-line strong {
    font-size: 12px !important;
  }

  .game-page .enemy-health {
    height: 8px !important;
  }

  .game-page .combat-strip small {
    display: none !important;
  }

  .game-page .enemy-target {
    top: 2% !important;
    width: min(31%, 118px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-page .enemy-health span,
  .game-page .friend-scene[data-boss="true"],
  .game-page .enemy-target,
  .game-page .enemy-target::after,
  .game-page .enemy-target.enemy-hit,
  .game-page .enemy-target.enemy-defeated,
  .game-page .damage-number,
  .game-page .damage-slash,
  .game-page .companion.live::after,
  .game-page .sprout.live::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Final combat framing override: keep fight state readable over the playfield. */
.game-page .glade-stage {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
}

.game-page .friend-scene {
  grid-row: 1 !important;
  grid-column: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
}

.game-page .glade-head {
  z-index: 18 !important;
}

.game-page .bloom-copy {
  z-index: 18 !important;
}

.game-page .combat-strip {
  position: absolute !important;
  z-index: 19 !important;
  top: 84px !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  padding: 7px 9px 6px !important;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 239, 145, .16), transparent 32%),
    linear-gradient(180deg, rgba(4, 18, 12, .9), rgba(2, 10, 7, .95)) !important;
  backdrop-filter: blur(7px) saturate(1.1) !important;
}

.game-page .combat-line {
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.45fr) auto !important;
}

.game-page .enemy-health {
  height: 9px !important;
}

.game-page .combat-strip small {
  font-size: 8px !important;
}

.game-page .enemy-target {
  top: 18% !important;
  width: min(31%, 138px) !important;
}

.game-page .enemy-target[data-boss="true"] {
  top: 16% !important;
  width: min(41%, 184px) !important;
}

.game-page .friend-scene .seed-button {
  bottom: 1.8% !important;
  width: min(62%, 250px) !important;
}

@media (max-height: 760px) {
  .game-page .combat-strip {
    top: 74px !important;
    padding: 5px 8px !important;
  }

  .game-page .enemy-target {
    top: 20% !important;
    width: min(29%, 116px) !important;
  }

  .game-page .enemy-target[data-boss="true"] {
    top: 18% !important;
    width: min(38%, 148px) !important;
  }
}

@media (max-width: 430px) {
  .game-page .combat-strip {
    left: 10px !important;
    right: 10px !important;
  }

  .game-page .combat-line strong {
    font-size: 13px !important;
  }
}

.game-page .companion-row {
  display: flex !important;
  z-index: 15 !important;
  left: 7% !important;
  right: 7% !important;
  bottom: 35% !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.game-page .companion {
  display: block !important;
  width: 31px !important;
  height: 38px !important;
  opacity: .22 !important;
  transform: translateY(8px) scale(.72) !important;
  filter: drop-shadow(0 9px 9px rgba(0, 0, 0, .28)) !important;
}

.game-page .companion.live {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.game-page .companion:nth-child(2)::before {
  background:
    radial-gradient(circle at 31% 54%, rgba(255, 248, 220, .96) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 33%, rgba(255, 248, 220, .9) 0 8%, transparent 9%),
    linear-gradient(180deg, #57d7c7, #1c8f83) !important;
}

.game-page .companion:nth-child(3)::before {
  background:
    radial-gradient(circle at 31% 54%, rgba(255, 248, 220, .96) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 33%, rgba(255, 248, 220, .9) 0 8%, transparent 9%),
    linear-gradient(180deg, #f2ca56, #ad7224) !important;
}

.game-page .companion:nth-child(4)::before {
  background:
    radial-gradient(circle at 31% 54%, rgba(255, 248, 220, .96) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 33%, rgba(255, 248, 220, .9) 0 8%, transparent 9%),
    linear-gradient(180deg, #a48dff, #47348e) !important;
}

.game-page .companion:nth-child(5)::before,
.game-page .companion:nth-child(6)::before {
  background:
    radial-gradient(circle at 31% 54%, rgba(255, 248, 220, .96) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 33%, rgba(255, 248, 220, .9) 0 8%, transparent 9%),
    linear-gradient(180deg, #bae3a5, #4f8d4d) !important;
}

@media (max-width: 380px) {
  .game-page .moment-banner {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(166px + env(safe-area-inset-bottom)) !important;
  }
}

/* Motion pass 2: split finger-down weight from release reward. */
.game-page .friend-scene .seed-button {
  transform: translateX(-50%) translateY(0) scale(1) !important;
  transform-origin: 50% 88% !important;
  transition: transform .08s ease-out, filter .1s ease-out !important;
  animation: prod2IdleFloat 3.4s ease-in-out infinite alternate !important;
}

.game-page .seed-button.is-pressing {
  transform: translateX(-50%) translateY(12px) scaleX(1.075) scaleY(.88) !important;
  animation: none !important;
  filter:
    drop-shadow(0 4px 0 rgba(57, 10, 20, .22))
    drop-shadow(0 15px 16px rgba(0, 0, 0, .34))
    brightness(1.07)
    saturate(1.06) !important;
}

.game-page .seed-button.is-tapped {
  animation: prod3TapRelease .54s cubic-bezier(.13, .82, .14, 1) both !important;
}

.game-page .seed-button.is-lifting {
  transform: translateX(-50%) translateY(-16px) scaleX(.955) scaleY(1.105) !important;
  filter:
    drop-shadow(0 12px 0 rgba(57, 10, 20, .17))
    drop-shadow(0 30px 28px rgba(0, 0, 0, .34))
    brightness(1.14)
    saturate(1.12) !important;
  transition: transform .12s cubic-bezier(.15, .82, .13, 1), filter .12s ease-out !important;
}

.game-page .seed-button.is-settling {
  transform: translateX(-50%) translateY(4px) scaleX(1.025) scaleY(.972) !important;
  filter:
    drop-shadow(0 7px 0 rgba(57, 10, 20, .2))
    drop-shadow(0 22px 21px rgba(0, 0, 0, .32))
    brightness(1.04)
    saturate(1.04) !important;
  transition: transform .14s cubic-bezier(.16, .72, .18, 1), filter .14s ease-out !important;
}

.game-page .friend-scene.scene-impact,
.game-page .friend-scene.scene-bloomed {
  animation: prod2SceneLift .34s ease-out both !important;
}

.game-page .tap-ring {
  width: 34px !important;
  height: 34px !important;
  border-width: 3px !important;
  border-color: rgba(255, 250, 194, .86) !important;
  box-shadow:
    0 0 0 9px rgba(255, 135, 165, .18),
    0 0 30px rgba(255, 226, 118, .5) !important;
  animation: prod2TapRing .5s cubic-bezier(.14, .76, .18, 1) forwards !important;
}

.game-page .tap-flash {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 190, .46), transparent 21%),
    radial-gradient(circle at 50% 55%, rgba(255, 109, 148, .2), transparent 42%) !important;
  animation: prod2TapFlash .34s ease-out forwards !important;
}

.game-page .tap-petal {
  width: 7px !important;
  height: 11px !important;
  opacity: .96 !important;
  animation: prod2Petal .64s cubic-bezier(.12, .72, .13, 1) forwards !important;
}

.game-page .scene-pulse {
  width: 18px !important;
  height: 18px !important;
  border: 2px solid rgba(255, 244, 171, .5) !important;
  box-shadow:
    0 0 0 12px rgba(255, 202, 102, .09),
    0 0 28px rgba(255, 220, 106, .26) !important;
  animation: prod2ScenePulse .54s ease-out forwards !important;
}

.game-page .spore-pop,
.game-page .spore-spark {
  animation: prod2Spore .72s cubic-bezier(.12, .72, .13, 1) forwards !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .24)) !important;
}

.game-page .pop {
  font-size: 18px !important;
  color: #fff5b8 !important;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .5),
    0 0 16px rgba(255, 218, 92, .45) !important;
  animation: prod2RewardNumber .72s cubic-bezier(.13, .72, .14, 1) forwards !important;
}

body[data-tab="store"] .store-panel,
body[data-tab="quests"] .store-panel,
body[data-tab="board"] .store-panel {
  animation: prod2PanelIn .28s cubic-bezier(.16, .82, .2, 1) both !important;
}

body[data-tab="store"] .store-item,
body[data-tab="quests"] .quest-item,
body[data-tab="quests"] .achievement,
body[data-tab="board"] .leaderboard-row {
  animation: prod2ItemIn .25s cubic-bezier(.16, .82, .2, 1) both !important;
}

@keyframes prod2IdleFloat {
  from { transform: translateX(-50%) translateY(0) scale(1); filter: brightness(1) saturate(1); }
  to { transform: translateX(-50%) translateY(-5px) scale(1.008); filter: brightness(1.025) saturate(1.025); }
}

@keyframes prod2TapRelease {
  0% {
    transform: translateX(-50%) translateY(12px) scaleX(1.075) scaleY(.88);
    filter: brightness(1.08) saturate(1.08);
  }
  46% {
    transform: translateX(-50%) translateY(-12px) scaleX(.965) scaleY(1.09);
    filter: brightness(1.15) saturate(1.12);
  }
  72% {
    transform: translateX(-50%) translateY(3px) scaleX(1.018) scaleY(.982);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
    filter: brightness(1) saturate(1);
  }
}

@keyframes prod2SceneLift {
  0% { filter: brightness(1) saturate(1); }
  48% { filter: brightness(1.08) saturate(1.08); }
  100% { filter: brightness(1) saturate(1); }
}

@keyframes prod2TapRing {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.2); }
  62% { opacity: .54; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4.1); }
}

@keyframes prod2TapFlash {
  0% { opacity: .58; transform: scale(.82); }
  100% { opacity: 0; transform: scale(1.18); }
}

@keyframes prod2Petal {
  0% { opacity: .96; transform: translate(-50%, -50%) scale(.74) rotate(0); }
  28% { opacity: .98; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.24) rotate(var(--turn)); }
}

@keyframes prod2ScenePulse {
  0% { opacity: .62; transform: translate(-50%, -50%) scale(.45); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(8.5); }
}

@keyframes prod2Spore {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.46) rotate(0); }
  16% { opacity: .98; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.36) rotate(var(--spin)); }
}

@keyframes prod2RewardNumber {
  0% { opacity: 0; transform: translate(-50%, 4px) scale(.74); }
  18% { opacity: 1; transform: translate(-50%, -8px) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -94px) scale(.95); }
}

@keyframes prod2PanelIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes prod2ItemIn {
  from { opacity: 0; transform: translateY(9px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .game-page .friend-scene .seed-button,
  .game-page .seed-button.is-pressing,
  .game-page .seed-button.is-tapped,
  .game-page .seed-button.is-lifting,
  .game-page .seed-button.is-settling,
  .game-page .friend-scene.scene-impact,
  .game-page .friend-scene.scene-bloomed,
  .game-page .tap-ring,
  .game-page .tap-flash,
  .game-page .tap-petal,
  .game-page .scene-pulse,
  .game-page .spore-pop,
  .game-page .spore-spark,
  .game-page .pop {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Motion pass 3: make touch feedback read like a finished mobile game interaction. */
.game-page .glade-stage::before {
  animation: prod3LightBreath 6.2s ease-in-out infinite alternate !important;
}

.game-page .friend-scene {
  --impact-x: 0px;
  --impact-y: 0px;
  transform-origin: 50% 66% !important;
  will-change: transform, filter !important;
}

.game-page .friend-scene.scene-impact,
.game-page .friend-scene.scene-bloomed {
  animation: prod3SceneImpact .46s cubic-bezier(.12, .8, .16, 1) both !important;
}

.game-page .friend-scene.scene-impact .root-ring,
.game-page .friend-scene.scene-bloomed .root-ring {
  animation: prod3RootImpact .58s ease-out both !important;
}

.game-page .scene-sparkle {
  animation: prod3Sparkle 3.4s ease-in-out infinite alternate !important;
}

.game-page .friend-scene .seed-button {
  transform: translateX(-50%) translateY(0) scale(1) !important;
  transform-origin: 50% 90% !important;
  transition: transform .08s ease-out, filter .1s ease-out !important;
  animation: prod3IdleFloat 3.1s ease-in-out infinite alternate !important;
  will-change: transform, filter !important;
}

.game-page .seed-button.is-pressing {
  transform: translateX(-50%) translateY(15px) scaleX(1.09) scaleY(.855) !important;
  animation: none !important;
  filter:
    drop-shadow(0 3px 0 rgba(60, 13, 20, .24))
    drop-shadow(0 12px 16px rgba(0, 0, 0, .38))
    brightness(1.08)
    saturate(1.08) !important;
}

.game-page .seed-button.is-tapped {
  animation: prod3TapRelease .54s cubic-bezier(.13, .82, .14, 1) both !important;
}

.game-page .seed-button.is-lifting {
  transform: translateX(-50%) translateY(-18px) scaleX(.945) scaleY(1.12) !important;
  filter:
    drop-shadow(0 14px 0 rgba(60, 13, 20, .14))
    drop-shadow(0 34px 30px rgba(0, 0, 0, .34))
    brightness(1.16)
    saturate(1.14) !important;
  transition: transform .15s cubic-bezier(.13, .84, .11, 1), filter .15s ease-out !important;
}

.game-page .seed-button.is-settling {
  transform: translateX(-50%) translateY(5px) scaleX(1.032) scaleY(.968) !important;
  filter:
    drop-shadow(0 7px 0 rgba(60, 13, 20, .2))
    drop-shadow(0 21px 22px rgba(0, 0, 0, .34))
    brightness(1.05)
    saturate(1.05) !important;
  transition: transform .18s cubic-bezier(.16, .74, .17, 1), filter .18s ease-out !important;
}

.game-page .seed-button.is-lifting,
.game-page .seed-button.is-settling {
  animation: none !important;
}

.game-page .tap-ring {
  width: 40px !important;
  height: 40px !important;
  border-width: 3px !important;
  border-color: rgba(255, 251, 202, .88) !important;
  background: radial-gradient(circle, rgba(255, 252, 212, .18), transparent 55%) !important;
  box-shadow:
    0 0 0 10px rgba(255, 122, 154, .16),
    0 0 34px rgba(255, 225, 112, .48) !important;
  animation: prod3TapRing .58s cubic-bezier(.12, .72, .13, 1) forwards !important;
}

.game-page .tap-flash {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 250, 200, .5), transparent 20%),
    radial-gradient(circle at 50% 56%, rgba(255, 104, 144, .22), transparent 43%) !important;
  animation: prod3TapFlash .38s ease-out forwards !important;
}

.game-page .cap-glint,
.game-page .tap-streak {
  position: absolute !important;
  z-index: 10 !important;
  display: block !important;
  pointer-events: none !important;
}

.game-page .cap-glint {
  left: 17% !important;
  right: 14% !important;
  top: 6% !important;
  height: 38% !important;
  border-radius: 999px 999px 48% 48% !important;
  opacity: 0 !important;
  background: linear-gradient(105deg, transparent 10%, rgba(255, 255, 236, .72) 37%, rgba(255, 255, 236, .14) 54%, transparent 72%) !important;
  mix-blend-mode: screen !important;
  transform: translateX(-48%) rotate(-10deg) !important;
  animation: prod3CapGlint .56s ease-out forwards !important;
}

.game-page .tap-streak {
  width: 5px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 252, 198, .95), rgba(255, 252, 198, 0)) !important;
  box-shadow: 0 0 12px rgba(255, 227, 111, .42) !important;
  transform-origin: 50% 100% !important;
  animation: prod3TapStreak .48s cubic-bezier(.12, .72, .13, 1) forwards !important;
}

.game-page .tap-petal {
  width: 8px !important;
  height: 12px !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .2)) !important;
  animation: prod3Petal .7s cubic-bezier(.12, .72, .13, 1) forwards !important;
}

.game-page .scene-pulse {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid rgba(255, 246, 178, .54) !important;
  background: radial-gradient(circle, rgba(255, 247, 176, .22), transparent 60%) !important;
  box-shadow:
    0 0 0 14px rgba(255, 196, 95, .09),
    0 0 34px rgba(255, 220, 104, .28) !important;
  animation: prod3ScenePulse .62s ease-out forwards !important;
}

.game-page .spore-pop,
.game-page .spore-spark {
  animation: prod3Spore .78s cubic-bezier(.12, .72, .13, 1) forwards !important;
}

.game-page .spore-fly {
  position: fixed !important;
  z-index: 120 !important;
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 35% 28%, #fff8cf 0 18%, transparent 19%),
    linear-gradient(180deg, #ffd76b, #ef6a88) !important;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, .22),
    0 0 14px rgba(255, 221, 99, .32) !important;
  pointer-events: none !important;
  animation: prod3SporeFly .78s cubic-bezier(.18, .82, .2, 1) var(--delay, 0ms) forwards !important;
}

.game-page .pop {
  animation: prod3RewardNumber .76s cubic-bezier(.13, .72, .14, 1) forwards !important;
}

.game-page .value-kick {
  animation: prod3ValueKick .42s cubic-bezier(.12, .72, .13, 1) both !important;
}

.game-page .goal-kick {
  animation: prod3GoalKick .5s cubic-bezier(.12, .72, .13, 1) both !important;
}

.game-page .goal-progress span,
.game-page .bloom-track span,
.game-page .progress-track span,
.game-page .mini-progress i,
.game-page .quest-progress span {
  transition: width .34s cubic-bezier(.18, .82, .2, 1) !important;
}

body[data-tab="store"] .store-panel,
body[data-tab="quests"] .store-panel,
body[data-tab="board"] .store-panel {
  animation: prod3PanelIn .32s cubic-bezier(.16, .82, .2, 1) both !important;
}

body[data-tab="store"] .store-item,
body[data-tab="quests"] .quest-item,
body[data-tab="quests"] .achievement,
body[data-tab="board"] .leaderboard-row {
  animation: prod3ItemIn .26s cubic-bezier(.16, .82, .2, 1) both !important;
}

.game-page .bottom-tabs button,
.game-page .skill-row button,
.game-page .store-item button,
.game-page .quest-item button,
.game-page .next-goal-button {
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  transition:
    transform .11s ease-out,
    filter .11s ease-out,
    opacity .12s ease-out,
    box-shadow .12s ease-out !important;
}

.game-page .seed-button,
.game-page .seed-button:focus,
.game-page .seed-button:active {
  -webkit-tap-highlight-color: transparent !important;
  outline: 0 !important;
  user-select: none !important;
}

.game-page .seed-button:focus-visible {
  outline: 2px solid rgba(255, 246, 178, .72) !important;
  outline-offset: 4px !important;
}

.game-page .bottom-tabs button:active,
.game-page .skill-row button:active,
.game-page .store-item button:active,
.game-page .quest-item button:active,
.game-page .next-goal-button:active {
  transform: translateY(2px) scale(.975) !important;
  filter: brightness(1.06) saturate(1.04) !important;
}

@keyframes prod3LightBreath {
  from { opacity: .82; filter: brightness(1); }
  to { opacity: 1; filter: brightness(1.06) saturate(1.03); }
}

@keyframes prod3IdleFloat {
  from { transform: translateX(-50%) translateY(0) scale(1); filter: brightness(1) saturate(1); }
  to { transform: translateX(-50%) translateY(-6px) scale(1.009); filter: brightness(1.025) saturate(1.025); }
}

@keyframes prod3SceneImpact {
  0% { transform: translate(0, 0) scale(1); filter: brightness(1) saturate(1); }
  40% { transform: translate(var(--impact-x), var(--impact-y)) scale(1.008); filter: brightness(1.1) saturate(1.08); }
  100% { transform: translate(0, 0) scale(1); filter: brightness(1) saturate(1); }
}

@keyframes prod3TapRelease {
  0% {
    transform: translateX(-50%) translateY(13px) scaleX(1.08) scaleY(.87);
    filter: brightness(1.08) saturate(1.08);
  }
  42% {
    transform: translateX(-50%) translateY(-17px) scaleX(.95) scaleY(1.11);
    filter: brightness(1.16) saturate(1.13);
  }
  72% {
    transform: translateX(-50%) translateY(5px) scaleX(1.03) scaleY(.97);
    filter: brightness(1.05) saturate(1.05);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
    filter: brightness(1) saturate(1);
  }
}

@keyframes prod3RootImpact {
  0% { opacity: .3; transform: translateX(-50%) scale(.97); }
  48% { opacity: .52; transform: translateX(-50%) scale(1.055); }
  100% { opacity: .3; transform: translateX(-50%) scale(1); }
}

@keyframes prod3Sparkle {
  from { opacity: .48; filter: brightness(1); transform: translateY(0) scale(.88); }
  to { opacity: .9; filter: brightness(1.12); transform: translateY(-3px) scale(1.02); }
}

@keyframes prod3TapRing {
  0% { opacity: .96; transform: translate(-50%, -50%) scale(.16); }
  54% { opacity: .62; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4.5); }
}

@keyframes prod3TapFlash {
  0% { opacity: .6; transform: scale(.8); }
  100% { opacity: 0; transform: scale(1.22); }
}

@keyframes prod3CapGlint {
  0% { opacity: 0; transform: translateX(-48%) rotate(-10deg); }
  26% { opacity: .74; }
  100% { opacity: 0; transform: translateX(62%) rotate(-10deg); }
}

@keyframes prod3TapStreak {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)) translateY(12px) scaleY(.45); }
  18% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) rotate(var(--rot)) translateY(-16px) scaleY(.2); }
}

@keyframes prod3Petal {
  0% { opacity: .98; transform: translate(-50%, -50%) scale(.72) rotate(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.22) rotate(var(--turn)); }
}

@keyframes prod3ScenePulse {
  0% { opacity: .66; transform: translate(-50%, -50%) scale(.42); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(9.4); }
}

@keyframes prod3Spore {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.46) rotate(0); }
  15% { opacity: .98; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.34) rotate(var(--spin)); }
}

@keyframes prod3SporeFly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  18% { opacity: 1; transform: translate(-50%, -72%) scale(1.08); }
  78% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.34); }
}

@keyframes prod3RewardNumber {
  0% { opacity: 0; transform: translate(-50%, 4px) scale(.74); }
  16% { opacity: 1; transform: translate(-50%, -12px) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -100px) scale(.94); }
}

@keyframes prod3ValueKick {
  0% { transform: translateY(0) scale(1); color: inherit; }
  38% { transform: translateY(-3px) scale(1.12); color: #fff5a8; }
  100% { transform: translateY(0) scale(1); color: inherit; }
}

@keyframes prod3GoalKick {
  0% { filter: brightness(1); box-shadow: inherit; }
  38% { filter: brightness(1.12) saturate(1.08); box-shadow: 0 0 18px rgba(164, 255, 112, .26); }
  100% { filter: brightness(1); box-shadow: inherit; }
}

@keyframes prod3PanelIn {
  from { opacity: 0; transform: translateY(20px) scale(.985); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes prod3ItemIn {
  from { opacity: 0; transform: translateY(11px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .game-page .glade-stage::before,
  .game-page .friend-scene,
  .game-page .friend-scene.scene-impact,
  .game-page .friend-scene.scene-bloomed,
  .game-page .scene-sparkle,
  .game-page .cap-glint,
  .game-page .tap-streak,
  .game-page .spore-fly,
  .game-page .value-kick,
  .game-page .goal-kick,
  body[data-tab="store"] .store-panel,
  body[data-tab="quests"] .store-panel,
  body[data-tab="board"] .store-panel,
  body[data-tab="store"] .store-item,
  body[data-tab="quests"] .quest-item,
  body[data-tab="quests"] .achievement,
  body[data-tab="board"] .leaderboard-row {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Motion pass 4: the mushroom and the whole play surface stay alive between taps. */
.game-page .friend-scene {
  isolation: isolate !important;
  overflow: hidden !important;
}

.game-page .friend-scene .seed-button {
  overflow: visible !important;
  animation: prod4CharacterAlive 4.8s cubic-bezier(.42, 0, .25, 1) infinite !important;
  transform-origin: 50% 92% !important;
}

.game-page .seed-button.is-pressing {
  animation: none !important;
}

.game-page .seed-button.is-tapped {
  animation: prod4TapRebound .68s cubic-bezier(.12, .82, .14, 1) both !important;
}

.game-page .seed-button::before,
.game-page .seed-button::after,
.game-page .seed-core,
.game-page .seed-mouth,
.game-page .seed-cheeks {
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
}

.game-page .seed-core,
.game-page .seed-mouth,
.game-page .seed-cheeks {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.game-page .seed-text {
  display: none !important;
}

.game-page .seed-button::before {
  content: "" !important;
  z-index: 5 !important;
  left: 24% !important;
  right: 23% !important;
  top: 14% !important;
  height: 9% !important;
  border-radius: 999px !important;
  background:
    linear-gradient(104deg, transparent 2%, rgba(255, 255, 232, .34) 36%, rgba(255, 255, 232, .13) 56%, transparent 92%) !important;
  mix-blend-mode: screen !important;
  opacity: .38 !important;
  filter: blur(.2px) !important;
  transform: translateX(-8%) rotate(-8deg) scaleX(.94) !important;
  animation: prod4CapShine 5.8s ease-in-out infinite !important;
}

.game-page .seed-button::after {
  content: "" !important;
  z-index: -1 !important;
  left: 18% !important;
  right: 18% !important;
  bottom: -7% !important;
  height: 15% !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(18, 20, 10, .34), rgba(18, 20, 10, 0) 68%) !important;
  opacity: .78 !important;
  transform: scaleX(1) !important;
  animation: prod4GroundShadow 4.8s cubic-bezier(.42, 0, .25, 1) infinite !important;
}

.game-page .seed-core {
  z-index: 6 !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  opacity: .92 !important;
  animation: prod4FaceLift 4.8s cubic-bezier(.42, 0, .25, 1) infinite !important;
}

.game-page .seed-core::before,
.game-page .seed-core::after {
  content: "" !important;
  position: absolute !important;
  z-index: 6 !important;
  top: 61.5% !important;
  width: 13.5% !important;
  height: 4.8% !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(72, 44, 38, .72), rgba(39, 24, 23, .72)) !important;
  opacity: 0 !important;
  transform: scaleY(.18) !important;
  transform-origin: 50% 50% !important;
  animation: prod4Blink 6.2s ease-in-out infinite !important;
  box-shadow: 0 1px 4px rgba(255, 236, 181, .2) !important;
}

.game-page .seed-core::before {
  left: 34.2% !important;
}

.game-page .seed-core::after {
  right: 30.9% !important;
  animation-delay: .04s !important;
}

.game-page .seed-mouth {
  z-index: 7 !important;
  left: 45.3% !important;
  right: auto !important;
  top: 69.6% !important;
  bottom: auto !important;
  width: 10.6% !important;
  height: 5.4% !important;
  border-bottom: 3px solid rgba(84, 43, 42, .46) !important;
  border-radius: 0 0 999px 999px !important;
  opacity: .42 !important;
  transform: translateY(0) scaleX(1) !important;
  animation: prod4SmileBreath 4.8s cubic-bezier(.42, 0, .25, 1) infinite !important;
}

.game-page .seed-cheeks {
  z-index: 4 !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  opacity: .55 !important;
  background:
    radial-gradient(circle at 32% 71%, rgba(255, 145, 146, .44) 0 4.8%, transparent 9%),
    radial-gradient(circle at 67% 71%, rgba(255, 145, 146, .4) 0 4.5%, transparent 8.5%) !important;
  mix-blend-mode: screen !important;
  animation: prod4CheekPulse 3.7s ease-in-out infinite !important;
}

.game-page .seed-button.is-pressing::before,
.game-page .seed-button.is-tapped::before {
  animation: prod4TapCapShine .62s ease-out both !important;
}

.game-page .seed-button.is-pressing .seed-core::before,
.game-page .seed-button.is-pressing .seed-core::after {
  opacity: .62 !important;
  transform: scaleY(.34) !important;
}

.game-page .seed-button.is-tapped .seed-cheeks {
  animation: prod4TapCheeks .56s ease-out both !important;
}

.game-page .sky-glow {
  animation: prod4SkyGlow 8s ease-in-out infinite alternate !important;
}

.game-page .sunbeam {
  animation: prod4Sunbeam 9.5s ease-in-out infinite !important;
  transform-origin: 50% 0 !important;
}

.game-page .cloud-a {
  animation: prod4CloudDriftA 22s linear infinite !important;
}

.game-page .cloud-b {
  animation: prod4CloudDriftB 28s linear infinite !important;
}

.game-page .scene-mist {
  animation: prod4MistDrift 12s ease-in-out infinite alternate !important;
}

.game-page .mist-b {
  animation-duration: 15s !important;
  animation-direction: alternate-reverse !important;
}

.game-page .canopy-shadow {
  animation: prod4CanopySway 7.5s ease-in-out infinite alternate !important;
  transform-origin: 50% 0 !important;
}

.game-page .meadow-hill,
.game-page .scene-decor {
  animation: prod4DepthSway 6.4s ease-in-out infinite alternate !important;
}

.game-page .decor-b,
.game-page .decor-d,
.game-page .hill-b {
  animation-direction: alternate-reverse !important;
  animation-duration: 7.8s !important;
}

.game-page .scene-sparkle {
  animation: prod4SparkleTwinkle 2.9s ease-in-out infinite !important;
}

.game-page .sparkle-b {
  animation-delay: .8s !important;
}

.game-page .sparkle-c {
  animation-delay: 1.55s !important;
}

.game-page .root-ring {
  animation: prod4RootPulse 5.2s ease-in-out infinite !important;
}

.game-page .rush-orbit {
  animation: prod4Orbit 7.2s linear infinite !important;
}

.game-page .companion {
  animation: prod4CompanionBob 3.6s ease-in-out infinite !important;
}

.game-page .companion:nth-child(2n) {
  animation-delay: .42s !important;
  animation-duration: 4.1s !important;
}

.game-page .companion:nth-child(3n) {
  animation-delay: .9s !important;
  animation-duration: 3.25s !important;
}

.game-page .sprout.live {
  animation: prod4SproutSway 3.8s ease-in-out infinite !important;
  transform-origin: 50% 100% !important;
}

.game-page .sprout.live:nth-child(3n) {
  animation-delay: .45s !important;
}

.game-page .sprout.live:nth-child(4n) {
  animation-delay: .9s !important;
  animation-duration: 4.4s !important;
}

.game-page .counter-icon,
.game-page .skill-row button,
.game-page .bottom-tabs button,
.game-page .next-goal-button {
  position: relative !important;
  overflow: hidden !important;
}

.game-page .resource-row > div {
  animation: prod4PanelBreath 5.4s ease-in-out infinite !important;
  transform-origin: 50% 50% !important;
}

.game-page .resource-row > div:nth-child(2) {
  animation-delay: .8s !important;
}

.game-page .resource-row > div:nth-child(3) {
  animation-delay: 1.4s !important;
}

.game-page .skill-row button::after,
.game-page .bottom-tabs button::after,
.game-page .next-goal-button::after {
  content: "" !important;
  position: absolute !important;
  inset: -45% -70% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 220, .22) 48%, transparent 62%) !important;
  transform: translateX(-70%) rotate(8deg) !important;
  animation: prod4ControlSheen 5.4s ease-in-out infinite !important;
}

.game-page .skill-row button:nth-child(2)::after,
.game-page .bottom-tabs button:nth-child(2)::after {
  animation-delay: 1.1s !important;
}

.game-page .skill-row button:nth-child(3)::after,
.game-page .bottom-tabs button:nth-child(3)::after {
  animation-delay: 2.1s !important;
}

.game-page .bottom-tabs button:nth-child(4)::after {
  animation-delay: 3s !important;
}

.game-page .goal-progress span,
.game-page .bloom-track span,
.game-page .progress-track span,
.game-page .mini-progress i,
.game-page .quest-progress span {
  background-size: 180% 100% !important;
  animation: prod4ProgressFlow 3.8s linear infinite !important;
}

.game-page .store-item,
.game-page .quest-item,
.game-page .achievement,
.game-page .leaderboard-row {
  transition: transform .18s ease-out, box-shadow .18s ease-out, filter .18s ease-out !important;
}

.game-page .store-item:hover,
.game-page .quest-item:hover,
.game-page .achievement:hover,
.game-page .leaderboard-row:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.03) !important;
}

@keyframes prod4CharacterAlive {
  0% { transform: translateX(-50%) translateY(0) rotate(-.5deg) scaleX(1) scaleY(1); filter: brightness(1) saturate(1); }
  18% { transform: translateX(-50%) translateY(-5px) rotate(.45deg) scaleX(1.012) scaleY(.992); filter: brightness(1.025) saturate(1.025); }
  34% { transform: translateX(-50%) translateY(-8px) rotate(.7deg) scaleX(1.018) scaleY(.986); filter: brightness(1.038) saturate(1.035); }
  54% { transform: translateX(-50%) translateY(-3px) rotate(-.35deg) scaleX(.996) scaleY(1.01); filter: brightness(1.018) saturate(1.02); }
  76% { transform: translateX(-50%) translateY(1px) rotate(-.7deg) scaleX(1.006) scaleY(.998); filter: brightness(1.01) saturate(1.01); }
  100% { transform: translateX(-50%) translateY(0) rotate(-.5deg) scaleX(1) scaleY(1); filter: brightness(1) saturate(1); }
}

@keyframes prod4TapRebound {
  0% { transform: translateX(-50%) translateY(15px) scaleX(1.1) scaleY(.86) rotate(0); filter: brightness(1.08) saturate(1.08); }
  32% { transform: translateX(-50%) translateY(-22px) scaleX(.94) scaleY(1.14) rotate(-1.6deg); filter: brightness(1.18) saturate(1.16); }
  56% { transform: translateX(-50%) translateY(7px) scaleX(1.05) scaleY(.95) rotate(1.1deg); filter: brightness(1.08) saturate(1.08); }
  78% { transform: translateX(-50%) translateY(-3px) scaleX(.99) scaleY(1.025) rotate(-.35deg); filter: brightness(1.03) saturate(1.03); }
  100% { transform: translateX(-50%) translateY(0) scale(1) rotate(0); filter: brightness(1) saturate(1); }
}

@keyframes prod4CapShine {
  0%, 58%, 100% { opacity: .22; transform: translateX(-10%) rotate(-8deg) scaleX(.9); }
  18% { opacity: .48; transform: translateX(5%) rotate(-7deg) scaleX(1.04); }
  30% { opacity: .28; transform: translateX(20%) rotate(-6deg) scaleX(.96); }
}

@keyframes prod4TapCapShine {
  0% { opacity: .24; transform: translateX(-18%) rotate(-8deg) scaleX(.9); }
  30% { opacity: .58; transform: translateX(12%) rotate(-6deg) scaleX(1.06); }
  100% { opacity: .2; transform: translateX(38%) rotate(-5deg) scaleX(.96); }
}

@keyframes prod4GroundShadow {
  0%, 100% { opacity: .72; transform: scaleX(1) translateY(0); }
  34% { opacity: .5; transform: scaleX(.86) translateY(3px); }
  64% { opacity: .78; transform: scaleX(1.06) translateY(-1px); }
}

@keyframes prod4FaceLift {
  0%, 100% { transform: translateY(0); }
  34% { transform: translateY(-2px); }
  68% { transform: translateY(1px); }
}

@keyframes prod4Blink {
  0%, 4%, 47%, 53%, 100% { opacity: 0; transform: scaleY(.08); }
  49%, 51% { opacity: .68; transform: scaleY(1); }
}

@keyframes prod4SmileBreath {
  0%, 100% { opacity: .34; transform: translateY(0) scaleX(.94); }
  34% { opacity: .52; transform: translateY(-1px) scaleX(1.06); }
  68% { opacity: .38; transform: translateY(1px) scaleX(.98); }
}

@keyframes prod4CheekPulse {
  0%, 100% { opacity: .42; filter: saturate(1); }
  42% { opacity: .7; filter: saturate(1.14); }
}

@keyframes prod4TapCheeks {
  0% { opacity: .5; transform: scale(1); }
  32% { opacity: .9; transform: scale(1.04); }
  100% { opacity: .46; transform: scale(1); }
}

@keyframes prod4SkyGlow {
  from { opacity: .76; filter: brightness(1) saturate(1); transform: scale(1); }
  to { opacity: 1; filter: brightness(1.08) saturate(1.05); transform: scale(1.025); }
}

@keyframes prod4Sunbeam {
  0%, 100% { opacity: .34; transform: translateX(-2%) rotate(-1deg) scaleX(.96); }
  50% { opacity: .56; transform: translateX(4%) rotate(1.2deg) scaleX(1.04); }
}

@keyframes prod4CloudDriftA {
  from { transform: translateX(-8%) translateY(0); }
  to { transform: translateX(16%) translateY(-2px); }
}

@keyframes prod4CloudDriftB {
  from { transform: translateX(12%) translateY(0); }
  to { transform: translateX(-14%) translateY(3px); }
}

@keyframes prod4MistDrift {
  from { opacity: .3; transform: translateX(-5%) translateY(0) scaleX(.96); }
  to { opacity: .56; transform: translateX(7%) translateY(-4px) scaleX(1.04); }
}

@keyframes prod4CanopySway {
  from { transform: translateX(-2px) skewX(-.8deg); opacity: .55; }
  to { transform: translateX(3px) skewX(.8deg); opacity: .68; }
}

@keyframes prod4DepthSway {
  from { transform: translateY(0) translateX(-1px); }
  to { transform: translateY(-3px) translateX(2px); }
}

@keyframes prod4SparkleTwinkle {
  0%, 100% { opacity: .28; transform: translateY(0) scale(.72) rotate(0); filter: brightness(1); }
  46% { opacity: .95; transform: translateY(-5px) scale(1.08) rotate(12deg); filter: brightness(1.28); }
}

@keyframes prod4RootPulse {
  0%, 100% { opacity: .28; transform: translateX(-50%) scale(.98); }
  52% { opacity: .46; transform: translateX(-50%) scale(1.035); }
}

@keyframes prod4Orbit {
  from { transform: translateX(-50%) rotate(0); }
  to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes prod4CompanionBob {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  42% { transform: translateY(-5px) scale(1.04); filter: brightness(1.08); }
}

@keyframes prod4SproutSway {
  0%, 100% { transform: translateY(0) rotate(-1.5deg) scaleY(1); }
  48% { transform: translateY(-3px) rotate(2deg) scaleY(1.045); }
}

@keyframes prod4IconFloat {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  50% { transform: translateY(-2px) scale(1.035); filter: brightness(1.08); }
}

@keyframes prod4PanelBreath {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-1px); filter: brightness(1.035) saturate(1.02); }
}

@keyframes prod4ControlSheen {
  0%, 55%, 100% { transform: translateX(-70%) rotate(8deg); opacity: 0; }
  66% { opacity: .7; }
  82% { transform: translateX(70%) rotate(8deg); opacity: 0; }
}

@keyframes prod4ProgressFlow {
  from { background-position: 0% 50%; }
  to { background-position: 180% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .game-page .friend-scene .seed-button,
  .game-page .seed-button.is-tapped,
  .game-page .seed-button::before,
  .game-page .seed-button::after,
  .game-page .seed-core,
  .game-page .seed-core::before,
  .game-page .seed-core::after,
  .game-page .seed-mouth,
  .game-page .seed-cheeks,
  .game-page .sky-glow,
  .game-page .sunbeam,
  .game-page .cloud-a,
  .game-page .cloud-b,
  .game-page .scene-mist,
  .game-page .canopy-shadow,
  .game-page .meadow-hill,
  .game-page .scene-decor,
  .game-page .scene-sparkle,
  .game-page .root-ring,
  .game-page .rush-orbit,
  .game-page .companion,
  .game-page .sprout.live,
  .game-page .resource-row > div,
  .game-page .skill-row button::after,
  .game-page .bottom-tabs button::after,
  .game-page .next-goal-button::after,
  .game-page .goal-progress span,
  .game-page .bloom-track span,
  .game-page .progress-track span,
  .game-page .mini-progress i,
  .game-page .quest-progress span {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Final fungal empire override: keep the RPG systems visible after older mobile passes. */
.game-page .systems-grid {
  display: none !important;
  min-height: 0 !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .8fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

body[data-tab="systems"] .systems-grid {
  display: grid !important;
}

.game-page .currency-ribbon {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 6px 0 0 !important;
  min-width: 0 !important;
}

.game-page .currency-ribbon > div {
  min-width: 0 !important;
  padding: 7px 6px 6px !important;
  border: 1px solid rgba(74, 52, 31, .18) !important;
  border-radius: 10px !important;
  background: radial-gradient(circle at 22% 18%, rgba(255, 244, 165, .34), transparent 34%), linear-gradient(180deg, rgba(42, 82, 46, .88), rgba(42, 43, 31, .86)) !important;
  color: #fff8d7 !important;
  overflow: hidden !important;
  position: relative !important;
}

.game-page .currency-ribbon span {
  display: block !important;
  color: rgba(255, 251, 210, .72) !important;
  font-size: clamp(7px, 1.8vw, 9px) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.game-page .currency-ribbon strong {
  display: block !important;
  margin-top: 2px !important;
  color: #fff7b4 !important;
  font-size: clamp(13px, 3.4vw, 17px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.game-page .friend-scene {
  min-height: 344px !important;
  border-radius: 22px !important;
  background-image: linear-gradient(180deg, rgba(21, 24, 18, .02), rgba(8, 16, 18, .18) 51%, rgba(10, 12, 7, .46) 100%), url("./sprites/idle-shroom-empire-playfield-20260527.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(63, 45, 28, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 226, .3), inset 0 -42px 80px rgba(8, 19, 14, .42), 0 20px 34px rgba(47, 31, 22, .16) !important;
}

.game-page .friend-scene::after {
  background: radial-gradient(circle at 44% 21%, rgba(255, 251, 213, .54) 0 1.2px, transparent 2px), radial-gradient(circle at 70% 34%, rgba(179, 249, 143, .5) 0 1px, transparent 2px), radial-gradient(circle at 27% 59%, rgba(152, 219, 255, .45) 0 1px, transparent 2px), linear-gradient(180deg, transparent 0 58%, rgba(14, 11, 5, .18) 100%) !important;
  background-size: 80px 92px, 92px 110px, 76px 84px, 100% 100% !important;
  animation: empireSporeDrift 9s linear infinite !important;
}

.game-page .colony-layer {
  position: absolute !important;
  z-index: 5 !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.game-page .colony-layer > span {
  position: absolute !important;
  opacity: 0 !important;
  transform: translateY(10px) scale(.78) !important;
  transition: opacity .45s ease, transform .45s ease !important;
}

.game-page .colony-layer > span.live {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.game-page .cap-house {
  width: 34px !important;
  height: 30px !important;
  bottom: 15% !important;
  border-radius: 55% 55% 42% 42% !important;
  background: radial-gradient(circle at 33% 30%, rgba(255, 255, 213, .85) 0 8%, transparent 9%), linear-gradient(180deg, #d94145 0 44%, #fff0bc 45% 100%) !important;
  box-shadow: inset 0 -3px 0 rgba(87, 36, 22, .22), 0 0 16px rgba(255, 215, 97, .26) !important;
  animation: empireHouseBreathe 4.2s ease-in-out infinite !important;
}

.game-page .house-a { left: 14% !important; bottom: 16% !important; }
.game-page .house-b { right: 16% !important; bottom: 14% !important; animation-delay: .7s !important; }
.game-page .house-c { left: 54% !important; bottom: 9% !important; width: 40px !important; height: 34px !important; animation-delay: 1.2s !important; }

.game-page .spore-vent {
  width: 14px !important;
  height: 35px !important;
  bottom: 12% !important;
  border-radius: 999px 999px 8px 8px !important;
  background: linear-gradient(180deg, #fff8af, #77d780 46%, #6b4b2c 100%) !important;
  box-shadow: 0 0 20px rgba(164, 255, 134, .32) !important;
  animation: empireVentPuff 2.8s ease-in-out infinite !important;
}

.game-page .vent-a { left: 31% !important; }
.game-page .vent-b { right: 32% !important; animation-delay: 1.1s !important; }

.game-page .root-highway {
  height: 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(141, 255, 129, .78), rgba(255, 224, 99, .62), transparent) !important;
  box-shadow: 0 0 16px rgba(141, 255, 129, .28) !important;
  animation: empireRootPulse 2.6s ease-in-out infinite !important;
}

.game-page .root-a { left: 9% !important; right: 11% !important; bottom: 10% !important; }
.game-page .root-b { left: 18% !important; right: 19% !important; bottom: 21% !important; animation-delay: .8s !important; }

.game-page .worker {
  width: 14px !important;
  height: 17px !important;
  bottom: 12% !important;
  border-radius: 9px 9px 5px 5px !important;
  background: radial-gradient(circle at 50% 22%, #ffefb0 0 24%, transparent 25%), linear-gradient(180deg, #e15b58 0 42%, #f7d69b 43% 100%) !important;
  box-shadow: 0 0 8px rgba(255, 230, 123, .28) !important;
  animation: empireWorkerCarry 5.4s linear infinite !important;
}

.game-page .worker-a { left: 17% !important; }
.game-page .worker-b { left: 48% !important; animation-delay: 1.8s !important; }
.game-page .worker-c { left: 74% !important; animation-delay: 3.2s !important; }

.game-page .relic-stone {
  width: 22px !important;
  height: 28px !important;
  bottom: 8% !important;
  border-radius: 10px 10px 6px 6px !important;
  background: linear-gradient(180deg, #8f8a69, #4a4f3a) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 0 14px rgba(137, 255, 180, .22) !important;
  animation: empireRelicGlow 5s ease-in-out infinite !important;
}

.game-page .stone-a { left: 6% !important; }
.game-page .stone-b { right: 7% !important; animation-delay: 1.3s !important; }

.game-page .companion {
  width: 24px !important;
  height: 28px !important;
  border-radius: 55% 55% 38% 38% !important;
  background: radial-gradient(circle at 38% 21%, #fff6c2 0 10%, transparent 11%), linear-gradient(180deg, #df564c 0 42%, #f1d49d 43% 100%) !important;
  box-shadow: 0 6px 8px rgba(14, 9, 4, .16), 0 0 10px rgba(255, 223, 111, .16) !important;
}

.game-page .companion.live {
  animation: empireAllyAttack 2.4s ease-in-out infinite !important;
}

.game-page .companion.puffball-bomber { border-radius: 50% !important; background: radial-gradient(circle at 42% 34%, #fff3ca 0 18%, #d6efe7 19% 100%) !important; }
.game-page .companion.glowshroom-mage { background: linear-gradient(180deg, #8075df 0 42%, #b9ecff 43% 100%) !important; box-shadow: 0 0 15px rgba(119, 175, 255, .32) !important; }
.game-page .companion.deathcap-assassin { background: linear-gradient(180deg, #3b2129 0 40%, #cf4b49 41% 100%) !important; }
.game-page .companion.shelf-guardian { width: 30px !important; background: linear-gradient(180deg, #a06d41 0 34%, #e4c47b 35% 100%) !important; }
.game-page .companion.chanterelle-archer { background: linear-gradient(180deg, #f0b841 0 44%, #fee0a7 45% 100%) !important; }
.game-page .companion.truffle-miner { border-radius: 50% 50% 42% 42% !important; background: linear-gradient(180deg, #76523e 0 43%, #d8b986 44% 100%) !important; }
.game-page .companion.mycelium-beast { width: 34px !important; height: 32px !important; background: linear-gradient(180deg, #7fc782 0 34%, #604b33 35% 100%) !important; }

.game-page .friend-scene[data-boss="true"] .enemy-target {
  transform: translateX(-50%) scale(1.12) !important;
  animation: empireBossStomp 2.2s ease-in-out infinite !important;
}

.game-page .skill-row {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.game-page .skill-row button {
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 19px 4px 5px !important;
  border-radius: 13px !important;
  font-size: clamp(8px, 2vw, 10px) !important;
  line-height: 1 !important;
  text-transform: none !important;
  color: #fff7d0 !important;
  background: radial-gradient(circle at 50% 9%, rgba(255, 242, 159, .34), transparent 36%), linear-gradient(180deg, #4f7742, #382c22) !important;
  border-color: rgba(255, 225, 133, .26) !important;
}

.game-page .skill-row button::before {
  top: 5px !important;
  left: 50% !important;
  width: 13px !important;
  height: 13px !important;
  transform: translateX(-50%) !important;
}

.game-page .skill-row button[data-skill="spore-storm"]::before { background: radial-gradient(circle, #fff8c4 0 28%, #95ff85 29% 100%) !important; }
.game-page .skill-row button[data-skill="root-grasp"]::before { background: linear-gradient(135deg, #75d06f, #5d3b21) !important; }
.game-page .skill-row button[data-skill="nutrient-frenzy"]::before { background: radial-gradient(circle, #fff38c 0 28%, #c0e646 29% 100%) !important; }
.game-page .skill-row button[data-skill="puffball-barrage"]::before { background: radial-gradient(circle, #fff 0 24%, #cadfd5 25% 100%) !important; }
.game-page .skill-row button[data-skill="fairy-ring"]::before { background: conic-gradient(from 0deg, #bcff80, #8ad8ff, #e7b5ff, #bcff80) !important; }
.game-page .skill-row button[data-skill="ancient-bloom"]::before { background: radial-gradient(circle, #fff9ca 0 18%, #ffce55 19% 42%, #8d68ff 43% 100%) !important; }

.game-page .skill-row button[data-ready="true"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 16px rgba(164, 255, 112, .28), 0 9px 16px rgba(36, 24, 12, .14) !important;
  animation: empireSkillReady 1.8s ease-in-out infinite !important;
}

.game-page .skill-row button[data-ready="active"],
.game-page .skill-row button:disabled {
  opacity: .54 !important;
}

.game-page .system-list,
.game-page .network-list {
  display: grid !important;
  gap: 7px !important;
  min-height: 0 !important;
  overflow: auto !important;
}

.game-page .system-item,
.game-page .network-node {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  align-items: center !important;
  min-height: 62px !important;
  padding: 9px !important;
  border: 1px solid rgba(83, 62, 34, .16) !important;
  border-radius: 12px !important;
  background: radial-gradient(circle at 11% 20%, rgba(255, 235, 142, .16), transparent 38%), linear-gradient(180deg, rgba(255, 252, 233, .88), rgba(231, 238, 201, .78)) !important;
}

.game-page .system-item.active {
  border-color: rgba(90, 172, 62, .34) !important;
  background: radial-gradient(circle at 14% 20%, rgba(150, 255, 112, .22), transparent 42%), linear-gradient(180deg, rgba(255, 253, 232, .96), rgba(218, 239, 186, .86)) !important;
}

.game-page .network-node {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

.game-page .system-glyph,
.game-page .network-node > span {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,220,.78) 0 13%, transparent 14%), linear-gradient(145deg, #bb6c48, #6e5734 54%, #385c38) !important;
}

.game-page .system-item h3,
.game-page .network-node strong {
  margin: 0 !important;
  color: #342719 !important;
  font-size: 13px !important;
  line-height: 1.08 !important;
}

.game-page .system-item p,
.game-page .system-item span,
.game-page .network-node em {
  display: block !important;
  margin: 2px 0 0 !important;
  color: rgba(63, 48, 30, .72) !important;
  font-size: 10.5px !important;
  line-height: 1.18 !important;
  font-style: normal !important;
}

.game-page .system-item span,
.game-page .network-node em {
  color: #5b7e3d !important;
  font-weight: 800 !important;
}

.game-page .system-item button {
  min-width: 58px !important;
  max-width: 78px !important;
  padding: 8px 7px !important;
  border: 1px solid rgba(66, 50, 27, .2) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #f7d276, #a96f31) !important;
  color: #2e2114 !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: lowercase !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 5px 10px rgba(83, 50, 18, .18) !important;
}

.game-page .system-item button:disabled {
  background: linear-gradient(180deg, rgba(226, 213, 170, .75), rgba(145, 127, 91, .62)) !important;
  color: rgba(59, 48, 31, .58) !important;
  box-shadow: none !important;
}

body[data-tab="systems"] .systems-grid .section-head span {
  max-width: 185px !important;
  color: rgba(255, 230, 142, .84) !important;
  font-size: 10.5px !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
}

.game-page .bottom-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.game-page .bottom-tabs button {
  min-width: 0 !important;
  font-size: clamp(8px, 2.1vw, 10px) !important;
}

.game-page .bottom-tabs button[data-tab-target="systems"]::before {
  background: radial-gradient(circle at 36% 28%, #fffbd0 0 12%, transparent 13%), conic-gradient(from 0deg, #d05844, #ffd36f, #85cf75, #7dbcf2, #d05844) !important;
}

.game-page .next-goal-button.goal-kick {
  animation: none !important;
}

.game-page .resource-row > div,
.game-page .goal-stat,
.game-page .next-goal-button {
  animation: none !important;
  transform: none !important;
}

.game-page .tap-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

.game-page .currency-ribbon {
  align-self: start !important;
}

.game-page .glade-head strong {
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: clamp(16px, 4.4vw, 20px) !important;
  line-height: 1.02 !important;
}

.game-page .skill-row button[data-locked="true"] {
  color: rgba(255, 247, 208, .62) !important;
}

/* Commercial playfield pass: one animated canvas owns the battle fantasy. */
.game-page .glade-stage {
  position: relative !important;
}

.game-page .friend-scene {
  overflow: hidden !important;
  isolation: isolate !important;
  min-height: clamp(430px, 62vh, 590px) !important;
  touch-action: manipulation !important;
  background-position: center 38% !important;
}

.game-page .battle-canvas {
  position: absolute !important;
  inset: 0 !important;
  z-index: 12 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

.game-page .enemy-target,
.game-page .companion-row,
.game-page .colony-layer,
.game-page .orchard-visual {
  opacity: 0 !important;
  pointer-events: none !important;
}

.game-page .seed-button {
  position: absolute !important;
  inset: 0 !important;
  z-index: 32 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  opacity: .01 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

.game-page .seed-button::before,
.game-page .seed-button::after,
.game-page .seed-core,
.game-page .seed-mouth,
.game-page .seed-cheeks,
.game-page .seed-text {
  display: none !important;
}

.game-page .combat-strip {
  position: absolute !important;
  z-index: 28 !important;
  left: 12px !important;
  right: 12px !important;
  top: 12px !important;
  min-height: 0 !important;
  padding: 8px 10px 9px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(219, 255, 167, .22) !important;
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 239, 149, .16), transparent 35%),
    linear-gradient(180deg, rgba(8, 22, 12, .83), rgba(4, 12, 8, .76)) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 210, .16) !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
}

.game-page .combat-line {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 7px !important;
  align-items: baseline !important;
  margin: 0 0 5px !important;
}

.game-page .combat-line span,
.game-page .combat-line em,
.game-page #enemyHpLabel {
  color: rgba(255, 247, 203, .72) !important;
  font-size: clamp(8px, 2.1vw, 10px) !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 800 !important;
  text-transform: none !important;
}

.game-page .combat-line strong {
  color: #fff5b0 !important;
  font-size: clamp(15px, 4.4vw, 20px) !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.game-page .enemy-health {
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(4, 9, 5, .54) !important;
  border: 1px solid rgba(255, 250, 180, .2) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .35) !important;
}

.game-page .enemy-health span {
  border-radius: inherit !important;
  background: linear-gradient(90deg, #7fff83, #fff06a 68%, #ff7a69) !important;
  box-shadow: 0 0 12px rgba(163, 255, 112, .38) !important;
}

.game-page #enemyHpLabel {
  display: block !important;
  margin-top: 5px !important;
}

.game-page .glade-head {
  position: relative !important;
  z-index: 18 !important;
  margin-bottom: 5px !important;
}

.game-page .bloom-track,
.game-page .bloom-copy {
  position: relative !important;
  z-index: 18 !important;
}

.game-page .friend-scene .sky-glow,
.game-page .friend-scene .sunbeam,
.game-page .friend-scene .cloud,
.game-page .friend-scene .meadow-hill,
.game-page .friend-scene .scene-decor,
.game-page .friend-scene .root-ring,
.game-page .friend-scene .rush-orbit {
  opacity: .18 !important;
}

.game-page .friend-scene::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 245, 177, .28), transparent 26%),
    linear-gradient(180deg, rgba(6, 16, 9, .06) 0 34%, rgba(3, 9, 6, .46) 66%, rgba(2, 5, 4, .74) 100%) !important;
}

.game-page .scene-pulse {
  z-index: 35 !important;
}

.game-page .damage-slash {
  z-index: 34 !important;
}

@media (max-width: 620px) {
  .game-page .friend-scene {
    min-height: min(528px, calc(100vh - 318px)) !important;
  }

  .game-page .combat-strip {
    left: 10px !important;
    right: 10px !important;
    top: 10px !important;
  }

  .game-page .resource-row {
    grid-template-columns: .82fr 1.4fr .82fr !important;
    gap: 6px !important;
  }

  .game-page .resource-row > div {
    padding: 8px 5px !important;
    min-height: 56px !important;
  }

  .game-page .next-goal-button {
    min-height: 42px !important;
    font-size: clamp(13px, 5vw, 20px) !important;
  }

  .game-page .currency-ribbon > div {
    padding: 6px 5px 5px !important;
  }
}

/* Keep zone state out of the battle art; the canvas carries combat now. */
.game-page .glade-stage {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  gap: 5px !important;
  overflow: visible !important;
}

.game-page .glade-stage > * {
  grid-row: auto !important;
  grid-column: auto !important;
}

.game-page .friend-scene {
  grid-row: auto !important;
  grid-column: auto !important;
  height: auto !important;
  min-height: clamp(410px, 55vh, 540px) !important;
}

.game-page .glade-head {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 38px !important;
  margin: 5px 0 5px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  z-index: 18 !important;
}

.game-page .glade-head > div:first-child,
.game-page .glade-actions {
  min-height: 36px !important;
  border: 1px solid rgba(248, 255, 222, .16) !important;
  background: linear-gradient(180deg, rgba(8, 23, 15, .74), rgba(6, 18, 12, .48)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 220, .11) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
}

.game-page .glade-head > div:first-child {
  display: grid !important;
  align-content: center !important;
  max-width: calc(100% - 96px) !important;
  padding: 5px 9px !important;
  border-radius: 13px !important;
}

.game-page .glade-actions {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px !important;
  border-radius: 14px !important;
}

.game-page .glade-head span {
  margin: 0 0 1px !important;
  font-size: 8px !important;
  line-height: 1 !important;
}

.game-page .glade-head strong {
  font-size: clamp(13px, 3.7vw, 17px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.game-page .glade-actions em {
  min-height: 28px !important;
  padding: 0 9px !important;
  border-radius: 11px !important;
}

.game-page .sound-button {
  width: 30px !important;
  height: 30px !important;
  border-radius: 11px !important;
}

.game-page .bloom-copy {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
  gap: 5px !important;
  margin: 0 0 5px !important;
  z-index: 18 !important;
}

.game-page .bloom-copy small {
  min-height: 20px !important;
  justify-content: center !important;
}

/* Mobile game HUD pass: more playfield, less accounting chrome. */
.game-page .tap-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

.game-page .resource-row {
  min-height: 44px !important;
  padding: 3px !important;
  gap: 5px !important;
}

.game-page .resource-row > div,
.game-page .resource-row .goal-stat {
  min-height: 38px !important;
  padding: 5px 5px !important;
  border-radius: 14px !important;
}

.game-page .resource-row .metric-label {
  font-size: 7px !important;
  line-height: 1 !important;
}

.game-page .resource-row strong {
  font-size: clamp(15px, 4.2vw, 18px) !important;
  line-height: .95 !important;
}

.game-page .rate-inline,
.game-page #seasonValue {
  font-size: 8px !important;
  line-height: 1 !important;
}

.game-page .next-goal-button {
  min-height: 32px !important;
  padding: 3px 8px !important;
  border-radius: 13px !important;
  font-size: clamp(11px, 3.4vw, 15px) !important;
  line-height: 1.02 !important;
}

.game-page .currency-ribbon {
  gap: 5px !important;
  margin-top: 5px !important;
}

.game-page .currency-ribbon > div {
  min-height: 34px !important;
  padding: 5px 5px 4px !important;
  border-radius: 9px !important;
}

.game-page .currency-ribbon span {
  font-size: clamp(6.8px, 1.75vw, 8px) !important;
}

.game-page .currency-ribbon strong {
  font-size: clamp(12px, 3vw, 15px) !important;
}

.game-page .glade-head {
  min-height: 32px !important;
  margin: 4px 0 4px !important;
}

.game-page .glade-head > div:first-child,
.game-page .glade-actions {
  min-height: 32px !important;
}

.game-page .glade-head > div:first-child {
  padding: 4px 8px !important;
}

.game-page .glade-head strong {
  font-size: clamp(12px, 3.2vw, 15px) !important;
}

.game-page .glade-actions em {
  min-height: 25px !important;
  padding: 0 8px !important;
  font-size: 7.5px !important;
}

.game-page .sound-button {
  width: 27px !important;
  height: 27px !important;
}

.game-page .bloom-copy {
  display: none !important;
}

.game-page .bloom-track {
  height: 4px !important;
  margin: 0 2px 4px !important;
  opacity: .72 !important;
}

.game-page .friend-scene {
  min-height: clamp(458px, 61vh, 575px) !important;
}

.game-page .combat-strip {
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
  padding: 7px 9px !important;
  border-radius: 14px !important;
}

.game-page .combat-line strong {
  font-size: clamp(14px, 4vw, 18px) !important;
}

.game-page .enemy-health {
  height: 7px !important;
}

@media (max-width: 620px) {
  .game-page .friend-scene {
    min-height: min(500px, calc(100vh - 294px)) !important;
  }
}

/* Rare-spawn and Bloom hierarchy pass: gameplay prompts must stay above the colony art. */
.game-page .bloom-callout {
  z-index: 44 !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(172px, 34%, 224px) !important;
  width: min(278px, calc(100% - 54px)) !important;
  min-height: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 248, 177, .52) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 239, 146, .28), transparent 36%),
    linear-gradient(180deg, #321942, #102713) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .42), 0 0 30px rgba(182, 255, 123, .24), inset 0 1px 0 rgba(255, 255, 218, .2) !important;
  transform: translateX(-50%) translateY(8px) scale(.98) !important;
  pointer-events: auto !important;
}

body[data-bloom-ready="true"] .bloom-callout {
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

.game-page .bloom-callout strong {
  color: #fff6a6 !important;
  font-size: clamp(14px, 4.2vw, 18px) !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .42) !important;
}

.game-page .bloom-callout span {
  color: #e9ffd0 !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
}

.game-page .combat-strip[data-rare="true"] {
  border-color: rgba(255, 232, 111, .55) !important;
  background:
    radial-gradient(circle at 16% 15%, rgba(255, 232, 111, .22), transparent 38%),
    linear-gradient(180deg, rgba(36, 24, 8, .9), rgba(7, 22, 10, .8)) !important;
  box-shadow: 0 13px 30px rgba(0, 0, 0, .34), 0 0 26px rgba(255, 224, 90, .24), inset 0 1px 0 rgba(255, 255, 210, .2) !important;
}

.game-page .combat-strip[data-rare="true"] .enemy-health span {
  background: linear-gradient(90deg, #fff27a, #87ff7e 68%, #ff9f5e) !important;
  box-shadow: 0 0 16px rgba(255, 232, 111, .5) !important;
}

/* Clean mobile game HUD: keep the fantasy visible and stop the first screen from stacking panels. */
.game-page .tap-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 6px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.game-page .resource-row {
  grid-template-columns: .82fr 1.36fr .82fr !important;
  min-height: 48px !important;
  padding: 3px !important;
  gap: 5px !important;
  border-radius: 18px !important;
  transform: none !important;
}

.game-page .resource-row > div,
.game-page .resource-row .goal-stat {
  min-height: 42px !important;
  padding: 4px 5px !important;
  border-radius: 14px !important;
  transform: none !important;
}

.game-page .resource-row .metric-label {
  font-size: 7px !important;
  letter-spacing: .02em !important;
}

.game-page .resource-row strong {
  margin-top: 1px !important;
  font-size: clamp(16px, 4.5vw, 21px) !important;
  line-height: .95 !important;
}

.game-page .resource-row small {
  margin-top: 1px !important;
  font-size: 8px !important;
  line-height: 1 !important;
}

.game-page .next-goal-button {
  min-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 15px !important;
  font-size: clamp(13px, 3.8vw, 18px) !important;
  line-height: 1 !important;
}

.game-page .goal-progress {
  height: 3px !important;
  margin-top: 3px !important;
}

.game-page .currency-ribbon {
  min-height: 27px !important;
  margin-top: 0 !important;
  gap: 4px !important;
}

.game-page .currency-ribbon > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 27px !important;
  padding: 4px 6px !important;
  border-radius: 9px !important;
}

.game-page .currency-ribbon > div::before {
  display: none !important;
}

.game-page .currency-ribbon span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(6.5px, 1.75vw, 8px) !important;
  line-height: 1 !important;
}

.game-page .currency-ribbon strong {
  margin-top: 0 !important;
  font-size: clamp(11px, 3vw, 14px) !important;
  line-height: 1 !important;
}

.game-page .glade-stage {
  position: relative !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.game-page .glade-head {
  position: absolute !important;
  z-index: 34 !important;
  top: 8px !important;
  left: 9px !important;
  right: 9px !important;
  min-height: 33px !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.game-page .glade-head > div:first-child,
.game-page .glade-actions {
  min-height: 33px !important;
  pointer-events: auto !important;
}

.game-page .glade-head > div:first-child {
  width: auto !important;
  max-width: calc(100% - 98px) !important;
  padding: 4px 10px !important;
  border-radius: 13px !important;
}

.game-page .glade-head span {
  font-size: 7px !important;
  line-height: 1 !important;
}

.game-page .glade-head strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(14px, 4.3vw, 19px) !important;
  line-height: 1.02 !important;
}

.game-page .glade-actions {
  gap: 5px !important;
}

.game-page .glade-actions em {
  min-height: 27px !important;
  padding: 0 9px !important;
  border-radius: 13px !important;
  font-size: 8px !important;
}

.game-page .sound-button {
  width: 29px !important;
  height: 29px !important;
  border-radius: 13px !important;
}

.game-page .bloom-track {
  position: absolute !important;
  z-index: 35 !important;
  top: 43px !important;
  left: 14px !important;
  right: 14px !important;
  height: 3px !important;
  margin: 0 !important;
  opacity: .72 !important;
}

.game-page .friend-scene {
  min-height: clamp(468px, calc(100dvh - 246px), 620px) !important;
  border-radius: 18px !important;
}

.game-page .combat-strip {
  top: 55px !important;
  left: 10px !important;
  right: 10px !important;
  min-height: 58px !important;
  padding: 7px 9px 6px !important;
  gap: 4px !important;
  border-radius: 14px !important;
}

.game-page .combat-line {
  min-width: 0 !important;
  gap: 4px !important;
}

.game-page .combat-line span,
.game-page .combat-line em,
.game-page .combat-strip small {
  font-size: 8px !important;
  line-height: 1 !important;
}

.game-page .combat-line strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(17px, 5.2vw, 24px) !important;
  line-height: 1 !important;
}

.game-page .enemy-health {
  height: 7px !important;
}

.game-page .skill-row {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 5px !important;
  min-height: 56px !important;
  margin-top: 0 !important;
  padding: 6px !important;
  border-radius: 18px !important;
  transform: none !important;
}

.game-page .skill-row button {
  min-height: 43px !important;
  padding: 18px 2px 4px !important;
  border-radius: 13px !important;
  transform: none !important;
  font-size: clamp(8.5px, 2.55vw, 11px) !important;
  line-height: 1 !important;
}

.game-page .skill-row button::before {
  top: 5px !important;
  width: 12px !important;
  height: 12px !important;
}

.bottom-tabs {
  min-height: 62px !important;
  padding: 7px 9px !important;
  border-radius: 20px !important;
  transform: none !important;
}

.bottom-tabs button {
  min-height: 48px !important;
  padding: 4px 2px 5px !important;
  border-radius: 14px !important;
  transform: none !important;
  font-size: clamp(8.5px, 2.55vw, 11px) !important;
  line-height: 1 !important;
}

.bottom-tabs button::before {
  width: 21px !important;
  height: 21px !important;
  margin-bottom: 3px !important;
}

@media (max-width: 380px), (max-height: 760px) {
  .game-page .resource-row {
    min-height: 42px !important;
  }

  .game-page .resource-row > div,
  .game-page .resource-row .goal-stat {
    min-height: 36px !important;
    padding: 3px 4px !important;
  }

  .game-page .resource-row small {
    display: none !important;
  }

  .game-page .currency-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 54px !important;
  }

  .game-page .friend-scene {
    min-height: min(470px, calc(100dvh - 238px)) !important;
  }

  .game-page .combat-strip {
    top: 51px !important;
    min-height: 52px !important;
  }

  .game-page .skill-row {
    min-height: 50px !important;
    padding: 5px !important;
  }

  .game-page .skill-row button {
    min-height: 39px !important;
    font-size: 8px !important;
  }

  .bottom-tabs {
    min-height: 56px !important;
  }

  .bottom-tabs button {
    min-height: 43px !important;
  }
}

/* Native Android shell: no browser phone mockup inside the installed app. */
body.game-page.native-app {
  display: block !important;
  place-items: initial !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  background: #06110a !important;
}

body.native-app .phone-frame {
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  background: #06110a !important;
}

body.native-app .phone-frame::before,
body.native-app .phone-frame::after {
  display: none !important;
}

body.native-app .suite-topbar {
  display: none !important;
}

body.native-app .game-shell {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-width: none !important;
  padding:
    max(6px, env(safe-area-inset-top))
    max(6px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-bottom))
    max(6px, env(safe-area-inset-left)) !important;
  gap: 6px !important;
}

/* Final HUD cleanup: compact controls, no oversized decorative stat cards. */
.game-page .phone-frame > .game-shell {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.game-page .resource-row {
  min-height: 43px !important;
  padding: 4px !important;
  background: linear-gradient(180deg, rgba(8, 24, 15, .86), rgba(3, 13, 8, .88)) !important;
  border: 1px solid rgba(158, 211, 134, .2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 220, .12), 0 8px 20px rgba(0, 0, 0, .18) !important;
}

.game-page .resource-row > div,
.game-page .resource-row .goal-stat {
  min-height: 35px !important;
  padding: 3px 6px !important;
  background: rgba(9, 25, 16, .62) !important;
  border: 1px solid rgba(183, 235, 144, .12) !important;
  box-shadow: none !important;
}

.game-page .resource-row > div::before,
.game-page .resource-row > div::after,
.game-page .resource-row .goal-stat::before,
.game-page .resource-row .goal-stat::after {
  display: none !important;
}

.game-page .resource-row > div:first-child::before,
.game-page .resource-row > div:first-child::after,
.game-page .resource-row > div:last-child::before,
.game-page .resource-row > div:last-child::after,
.game-page .resource-row::before,
.game-page .resource-row::after {
  content: none !important;
  display: none !important;
}

.game-page .resource-row .metric-label {
  color: rgba(235, 244, 206, .7) !important;
  font-size: 6.8px !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

.game-page .resource-row strong {
  color: #fff7b5 !important;
  font-size: clamp(14px, 3.9vw, 18px) !important;
  line-height: .98 !important;
  text-shadow: 0 1px 7px rgba(0, 0, 0, .45) !important;
}

.game-page .resource-row small {
  color: rgba(230, 240, 204, .68) !important;
  font-size: 7.4px !important;
  text-shadow: none !important;
}

.game-page .goal-stat .metric-label {
  display: none !important;
}

.game-page .next-goal-button {
  min-height: 30px !important;
  padding: 0 8px !important;
  color: #062313 !important;
  background: linear-gradient(180deg, #9af08f, #19bd72) !important;
  border: 1px solid rgba(206, 255, 185, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 214, .38), 0 5px 0 rgba(0, 82, 45, .34) !important;
}

.game-page .currency-ribbon {
  background: transparent !important;
}

.game-page .currency-ribbon > div {
  background: linear-gradient(180deg, rgba(47, 70, 38, .78), rgba(22, 40, 25, .82)) !important;
  border-color: rgba(174, 225, 125, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 220, .12) !important;
}

.game-page .glade-head > div:first-child {
  max-width: calc(100% - 76px) !important;
  background: rgba(10, 22, 12, .78) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 220, .12) !important;
}

.game-page .glade-actions em {
  display: none !important;
}

.game-page .combat-strip {
  background: linear-gradient(180deg, rgba(12, 26, 11, .9), rgba(2, 13, 8, .88)) !important;
  border-color: rgba(192, 235, 137, .22) !important;
}

@media (max-width: 380px), (max-height: 760px) {
  .game-page .currency-ribbon {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 25px !important;
  }

  .game-page .currency-ribbon > div {
    min-height: 25px !important;
    padding: 3px 4px !important;
  }

  .game-page .currency-ribbon span {
    font-size: 0 !important;
  }

  .game-page .currency-ribbon span::first-letter {
    font-size: 7px !important;
  }
}

/* Empire path pass: the fight screen must show the colony becoming something bigger. */
.game-page .tap-panel {
  display: grid !important;
  position: relative !important;
  grid-template-rows: 56px 27px 66px minmax(0, 1fr) 56px !important;
  gap: 5px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.game-page .empire-road {
  position: relative !important;
  z-index: 18 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 4px 21px !important;
  gap: 4px !important;
  min-height: 66px !important;
  padding: 7px 8px 6px !important;
  border: 1px solid rgba(190, 238, 142, .2) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 13% 10%, rgba(255, 235, 143, .16), transparent 30%),
    linear-gradient(180deg, rgba(12, 31, 19, .92), rgba(5, 16, 11, .9)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 220, .12), 0 10px 18px rgba(0, 0, 0, .18) !important;
  color: #f9f5c4 !important;
  overflow: hidden !important;
}

.game-page .empire-road::before {
  content: "" !important;
  position: absolute !important;
  inset: auto 10px 14px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(129, 255, 132, .12), rgba(255, 229, 105, .58), rgba(127, 209, 255, .16)) !important;
  box-shadow: 0 0 16px rgba(145, 255, 126, .18) !important;
}

.game-page .empire-road-copy {
  display: grid !important;
  grid-template-columns: minmax(62px, .42fr) minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: center !important;
  min-width: 0 !important;
}

.game-page #formBadge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  height: 25px !important;
  padding: 0 7px !important;
  border: 1px solid rgba(255, 231, 133, .24) !important;
  border-radius: 999px !important;
  color: #112315 !important;
  background: linear-gradient(180deg, #fff2a8, #8ee17a) !important;
  font-size: clamp(7.5px, 2.25vw, 10px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.game-page .empire-road-copy > div {
  min-width: 0 !important;
}

.game-page .empire-road-copy strong,
.game-page .empire-road-copy small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.game-page .empire-road-copy strong {
  color: #fff8b2 !important;
  font-size: clamp(12px, 3.45vw, 16px) !important;
  line-height: 1.03 !important;
  font-weight: 950 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .38) !important;
}

.game-page .empire-road-copy small {
  margin-top: 2px !important;
  color: rgba(229, 246, 205, .7) !important;
  font-size: clamp(8px, 2.15vw, 10px) !important;
  line-height: 1 !important;
}

.game-page .empire-road-meter {
  height: 4px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 220, .1) !important;
}

.game-page .empire-road-meter span {
  display: block !important;
  width: 0;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #88ff87, #fff175, #f79a73) !important;
  box-shadow: 0 0 14px rgba(165, 255, 106, .36) !important;
  transition: width .25s ease !important;
}

.game-page .empire-road-track {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.game-page .road-node {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 12px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  color: rgba(237, 246, 205, .56) !important;
}

.game-page .road-node i {
  position: relative !important;
  width: 12px !important;
  height: 12px !important;
  border: 1px solid rgba(255, 240, 159, .22) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(236, 255, 176, .28) var(--road-progress), rgba(28, 60, 36, .9) calc(var(--road-progress) + 1%)) !important;
  box-shadow: 0 0 8px rgba(142, 255, 105, .12) !important;
}

.game-page .road-node.ready i,
.game-page .road-node.active i {
  border-color: rgba(255, 243, 126, .7) !important;
  background: radial-gradient(circle at 35% 32%, #fffad5 0 18%, #8eff83 19% 100%) !important;
  box-shadow: 0 0 13px rgba(170, 255, 98, .38) !important;
}

.game-page .road-node em {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-style: normal !important;
  font-size: clamp(6.6px, 1.7vw, 8px) !important;
  line-height: 1 !important;
  font-weight: 850 !important;
}

.game-page .road-node.active em {
  color: #fff6a7 !important;
}

.game-page .road-node.ready em {
  color: #bfff9f !important;
}

.game-page .glade-stage {
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.game-page .friend-scene {
  min-height: clamp(332px, calc(100dvh - 340px), 500px) !important;
}

.game-page .skill-row {
  position: static !important;
  z-index: 20 !important;
  min-height: 56px !important;
  margin: 0 !important;
  transform: none !important;
}

.game-page .combo-badge {
  position: absolute !important;
  left: 50% !important;
  bottom: 62px !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

body.native-app .game-page .tap-panel,
body.native-app .tap-panel {
  grid-template-rows: 56px 27px 64px minmax(0, 1fr) 54px !important;
}

body.native-app .friend-scene {
  min-height: clamp(320px, calc(100dvh - 332px), 510px) !important;
}

@media (max-width: 380px), (max-height: 760px) {
  .game-page .tap-panel {
    grid-template-rows: 56px 25px 56px minmax(0, 1fr) 50px !important;
    gap: 4px !important;
  }

  .game-page .empire-road {
    grid-template-rows: minmax(0, 1fr) 3px 16px !important;
    min-height: 56px !important;
    padding: 5px 6px !important;
    border-radius: 13px !important;
  }

  .game-page .empire-road-copy {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .game-page #formBadge {
    height: 22px !important;
    padding: 0 5px !important;
    font-size: 7px !important;
  }

  .game-page .empire-road-copy strong {
    font-size: 11px !important;
  }

  .game-page .empire-road-copy small {
    font-size: 7.5px !important;
  }

  .game-page .road-node {
    display: flex !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  .game-page .road-node i {
    width: 9px !important;
    height: 9px !important;
  }

  .game-page .road-node em {
    display: none !important;
  }

  .game-page .friend-scene {
    min-height: min(392px, calc(100dvh - 306px)) !important;
  }
}

/* Active combat cleanup: keep HUD, colony, enemy, and effects in separate lanes. */
.game-page .tap-panel {
  grid-template-rows: 54px 22px 54px minmax(0, 1fr) 54px !important;
  gap: 4px !important;
}

.game-page .resource-row {
  height: 54px !important;
  min-height: 0 !important;
  max-height: 54px !important;
  grid-template-columns: minmax(72px, .72fr) minmax(0, 1.32fr) minmax(72px, .72fr) !important;
  gap: 6px !important;
  padding: 4px !important;
  overflow: hidden !important;
}

.game-page .resource-row > div,
.game-page .resource-row .goal-stat {
  min-height: 40px !important;
  padding: 4px 6px !important;
}

.game-page .resource-row .metric-label {
  font-size: 7px !important;
}

.game-page .resource-row strong {
  font-size: clamp(15px, 4.2vw, 20px) !important;
}

.game-page .resource-row small {
  font-size: 7px !important;
}

.game-page .next-goal-button {
  display: block !important;
  width: 100% !important;
  height: 30px !important;
  min-height: 0 !important;
  max-height: 32px !important;
  padding: 0 7px !important;
  overflow: hidden !important;
  color: #062313 !important;
  font-size: clamp(10px, 3vw, 13px) !important;
  line-height: 30px !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.game-page .currency-ribbon {
  min-height: 22px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

.game-page .currency-ribbon > div {
  min-height: 22px !important;
  display: grid !important;
  place-items: center !important;
  padding: 2px 3px !important;
}

.game-page .currency-ribbon span,
.game-page .currency-ribbon span::first-letter {
  display: none !important;
  font-size: 0 !important;
}

.game-page .currency-ribbon strong {
  font-size: clamp(11px, 3.1vw, 15px) !important;
  line-height: 1 !important;
}

.game-page .empire-road {
  min-height: 54px !important;
  grid-template-rows: minmax(0, 1fr) 3px 12px !important;
  gap: 3px !important;
  padding: 5px 7px !important;
  border-radius: 13px !important;
}

.game-page .empire-road[data-flash] {
  border-color: rgba(255, 242, 150, .36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 220, .14),
    0 0 18px rgba(180, 255, 121, .18) !important;
}

.game-page .empire-road::before {
  inset: auto 9px 10px !important;
}

.game-page .empire-road-copy {
  grid-template-columns: 70px minmax(0, 1fr) !important;
  gap: 6px !important;
}

.game-page #formBadge {
  display: block !important;
  height: 22px !important;
  max-width: 70px !important;
  padding: 0 5px !important;
  font-size: 6.5px !important;
  line-height: 22px !important;
  text-align: center !important;
}

.game-page .empire-road-copy strong {
  font-size: clamp(11px, 3.1vw, 15px) !important;
}

.game-page .empire-road-copy small {
  font-size: clamp(7px, 2vw, 9px) !important;
}

.game-page .road-node {
  display: flex !important;
  justify-content: center !important;
  gap: 0 !important;
}

.game-page .road-node i {
  width: 9px !important;
  height: 9px !important;
}

.game-page .road-node em {
  display: none !important;
}

.game-page .glade-head > div:first-child {
  max-width: calc(100% - 62px) !important;
}

.game-page .friend-scene {
  overflow: hidden !important;
  min-height: clamp(346px, calc(100dvh - 292px), 528px) !important;
}

.game-page .enemy-target {
  top: 25% !important;
  width: min(34%, 142px) !important;
}

.game-page .enemy-target[data-boss="true"] {
  top: 27% !important;
  width: min(42%, 174px) !important;
}

.game-page .friend-scene .damage-number,
.game-page .friend-scene .pop,
.game-page .friend-scene .spore-pop,
.game-page .friend-scene .spore-spark,
.game-page .friend-scene .spore-fly {
  position: absolute !important;
  z-index: 22 !important;
  pointer-events: none !important;
}

.game-page .friend-scene .damage-number {
  min-width: 26px !important;
  padding: 3px 6px !important;
  font-size: 10px !important;
  opacity: .88 !important;
}

.game-page .friend-scene .pop {
  font-size: 11px !important;
  opacity: .9 !important;
}

.game-page .friend-scene .spore-pop,
.game-page .friend-scene .spore-spark {
  opacity: .62 !important;
}

.game-page .friend-scene .spore-fly {
  width: 8px !important;
  height: 8px !important;
  z-index: 21 !important;
  opacity: .72 !important;
}

.game-page .scene-pulse {
  opacity: .42 !important;
  box-shadow:
    0 0 0 8px rgba(255, 196, 95, .06),
    0 0 22px rgba(255, 220, 104, .18) !important;
}

.game-page .tap-ring {
  width: 32px !important;
  height: 32px !important;
  box-shadow:
    0 0 0 7px rgba(255, 122, 154, .1),
    0 0 22px rgba(255, 225, 112, .3) !important;
}

.game-page .combo-badge {
  bottom: 58px !important;
  max-width: min(220px, 64vw) !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: rgba(4, 13, 8, .62) !important;
  color: rgba(252, 246, 185, .82) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: none !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .2) !important;
}

body.native-app .game-page .tap-panel,
body.native-app .tap-panel {
  grid-template-rows: 54px 22px 54px minmax(0, 1fr) 54px !important;
}

body.native-app .friend-scene {
  min-height: clamp(336px, calc(100dvh - 288px), 530px) !important;
}

@media (max-width: 380px), (max-height: 760px) {
  .game-page .tap-panel {
    grid-template-rows: 50px 20px 50px minmax(0, 1fr) 50px !important;
    gap: 3px !important;
  }

  .game-page .resource-row {
    height: 50px !important;
    max-height: 50px !important;
    gap: 4px !important;
  }

  .game-page .resource-row > div,
  .game-page .resource-row .goal-stat {
    min-height: 38px !important;
  }

  .game-page .next-goal-button {
    font-size: 10px !important;
    min-height: 28px !important;
  }

  .game-page .currency-ribbon,
  .game-page .currency-ribbon > div {
    min-height: 20px !important;
  }

  .game-page .empire-road {
    min-height: 50px !important;
    grid-template-rows: minmax(0, 1fr) 3px 10px !important;
    padding: 4px 6px !important;
  }

  .game-page .empire-road-copy {
    grid-template-columns: 62px minmax(0, 1fr) !important;
  }

  .game-page #formBadge {
    max-width: 62px !important;
    height: 20px !important;
    font-size: 6px !important;
    line-height: 20px !important;
  }

  .game-page .friend-scene {
    min-height: min(402px, calc(100dvh - 278px)) !important;
  }

  .game-page .combo-badge {
    bottom: 53px !important;
  }
}