@font-face {
  font-family: "Museo Sans Rounded";
  src: url("assets/fonts/MuseoSansRounded500.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Museo Sans Rounded";
  src: url("assets/fonts/MuseoSansRounded900.otf") format("opentype");
  font-weight: 800 950;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #171a17;
  --panel: rgba(31, 34, 30, 0.9);
  --panel-strong: #292e28;
  --line: rgba(203, 241, 153, 0.13);
  --text: #f8faef;
  --muted: #a8b09f;
  --accent: #a6e22e;
  --accent-strong: #5faf1c;
  --planet-a: #c5f634;
  --planet-b: #73c829;
  --planet-c: #285e24;
  --warning: #ffbe55;
  --danger: #ff6f7d;
  font-family: "Museo Sans Rounded", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; margin: 0; }

body {
  overflow-x: hidden;
  user-select: none;
  background:
    radial-gradient(circle at 12% 10%, rgba(166, 226, 46, 0.14), transparent 28rem),
    radial-gradient(circle at 88% 0%, rgba(95, 175, 28, 0.11), transparent 28rem),
    linear-gradient(155deg, #151815 0%, #20241f 47%, #151815 100%);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 0%, #000, transparent 86%);
}

button { color: inherit; font: inherit; }
button:focus-visible { outline: 3px solid rgba(166, 226, 46, 0.75); outline-offset: 3px; }
h1, h2, p { margin: 0; }

.game-shell {
  width: min(1240px, calc(100% - 28px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 15px 0 20px;
}

.topbar,
.brand,
.top-actions,
.statbar,
.world-heading,
.factory-heading,
.launch-card,
.generator-card,
.boost-card,
.core-card,
.modal-actions {
  display: flex;
  align-items: center;
}

.topbar { justify-content: space-between; min-height: 49px; margin-bottom: 10px; }
.brand { gap: 12px; }
.brand-icon {
  width: 43px;
  height: 43px;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24), 0 0 18px rgba(166, 226, 46, .12);
}
.brand-lockup p { margin-bottom: 2px; color: var(--muted); font-size: 0.52rem; font-weight: 900; letter-spacing: 0.18em; }
.brand-lockup h1 { display: flex; align-items: baseline; font-size: clamp(1.18rem, 2vw, 1.55rem); line-height: 1; letter-spacing: -0.055em; }
.brand-lockup h1 span { color: var(--text); }
.brand-lockup h1 em { color: var(--accent); font-style: normal; }
.brand-lockup h1 small { margin-left: 8px; color: var(--muted); font-size: .36em; letter-spacing: .16em; }
.brand-wordmark { display: block; width: clamp(112px, 10.4vw, 136px); height: auto; }
.top-actions { gap: 9px; }

.command-button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 41px;
  padding: 7px 11px;
  border: 1px solid rgba(166, 226, 46, .2);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(95, 175, 28, .16), rgba(31, 34, 30, .88));
  cursor: pointer;
}
.command-button span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #1f1f1f; background: var(--accent); font-weight: 900; }
.command-button b { font-size: .67rem; letter-spacing: .02em; }
.command-button.active { border-color: rgba(166, 226, 46, .62); box-shadow: 0 0 24px rgba(166, 226, 46, .13); }

.streak-chip {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 7px;
  min-width: 104px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(27, 31, 26, 0.82);
}

.streak-chip > span { grid-row: 1 / 3; color: var(--warning); font-size: 1.2rem; }
.streak-chip strong { line-height: 1; }
.streak-chip small { color: var(--muted); font-size: 0.48rem; font-weight: 800; letter-spacing: 0.1em; }

.icon-button {
  width: 41px;
  height: 41px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(27, 31, 26, 0.88);
  cursor: pointer;
}

.icon-button.muted { color: #526978; }

.statbar { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }

.stat-card {
  display: grid;
  min-height: 58px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(27, 31, 26, 0.84);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.13);
}

.stat-card--energy { border-color: rgba(166, 226, 46, 0.3); background: linear-gradient(135deg, rgba(95, 175, 28, 0.16), rgba(31, 34, 30, 0.82)); }
.stat-card > span { align-self: end; color: var(--muted); font-size: 0.61rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.1em; }
.stat-card strong { align-self: center; overflow: visible; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.08; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.stat-card strong i { margin-right: 5px; color: var(--warning); font-style: normal; font-size: 0.88em; }
.stat-card strong small { color: var(--muted); font-size: 0.57em; font-weight: 650; }

.game-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(380px, 0.87fr); gap: 10px; min-height: 0; }
.world-panel, .factory-panel { border: 1px solid var(--line); border-radius: 19px; background: var(--panel); box-shadow: 0 24px 65px rgba(0, 0, 0, 0.2); backdrop-filter: blur(14px); }
.world-panel { padding: 15px; overflow: hidden; transition: --planet-a 300ms, --planet-b 300ms, --planet-c 300ms; }
.factory-panel { display: flex; flex-direction: column; min-height: 0; padding: 15px; }
.world-heading, .factory-heading { justify-content: space-between; }
.world-heading h2, .factory-heading h2 { font-size: 1.12rem; letter-spacing: -0.035em; }

.eyebrow { display: block; margin-bottom: 3px; color: var(--muted); font-size: 0.55rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.13em; }
.world-bonus { text-align: right; }
.world-bonus span { display: block; color: var(--muted); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.12em; }
.world-bonus strong { color: var(--accent); font-size: 1.15rem; }

.planet-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(245px, 42vh, 350px);
  margin: 8px 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--planet-b) 18%, transparent), transparent 35%),
    radial-gradient(circle at 70% 10%, rgba(166, 226, 46, 0.09), transparent 28%),
    #171c17;
  isolation: isolate;
}

.stars { position: absolute; inset: 0; opacity: 0.7; background-image: radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 1.3px); background-size: 37px 37px; mask-image: linear-gradient(130deg, #000, transparent 75%); }
.stars::after { position: absolute; inset: 10% -10%; content: ""; background-image: radial-gradient(circle, rgba(166,226,46,.7) 0 1px, transparent 1.5px); background-size: 63px 47px; transform: rotate(13deg); }

.bloomline {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 7;
  width: min(520px, calc(100% - 24px));
  padding: 8px 11px 9px;
  border: 1px solid rgba(166,226,46,.18);
  border-radius: 12px;
  background: rgba(25,30,24,.78);
  box-shadow: 0 12px 34px rgba(0,0,0,.19);
  backdrop-filter: blur(9px);
  transform: translateX(-50%);
}
.bloomline-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.bloomline-heading span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .48rem; font-weight: 900; letter-spacing: .12em; }
.bloomline-heading span i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 11px var(--accent); animation: linePulse 1.2s ease-in-out infinite alternate; }
.bloomline-heading strong { color: var(--accent); font-size: .5rem; font-weight: 800; line-height: 1.15; text-align: end; white-space: normal; overflow-wrap: anywhere; }
.bloomline-route { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.route-line { position: absolute; top: 8px; right: 8%; left: 8%; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.route-line > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); box-shadow: 0 0 12px var(--accent); transition: width 350ms ease; }
.route-node { position: relative; z-index: 2; display: grid; place-items: center; min-width: 42px; color: #6e7569; }
.route-node b { display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid #394036; border-radius: 50%; background: #20251f; font-size: .53rem; transition: 220ms ease; }
.route-node small { margin-top: 2px; font-size: .39rem; font-weight: 900; letter-spacing: .11em; }
.route-node.active { color: var(--muted); }
.route-node.active b { border-color: var(--accent-strong); color: #1f1f1f; background: var(--accent); box-shadow: 0 0 12px rgba(166,226,46,.28); }
.route-node.current b { transform: scale(1.13); box-shadow: 0 0 18px rgba(166,226,46,.48); }
.seed-pod-layer { position: absolute; top: 0; right: 8%; bottom: 0; left: 8%; z-index: 3; overflow: hidden; pointer-events: none; }
.seed-pod { position: absolute; top: 4px; left: -3px; width: 9px; height: 9px; border: 2px solid rgba(255,255,255,.68); border-radius: 55% 45% 58% 42%; background: var(--accent); box-shadow: 0 0 12px var(--accent); transform: translateY(var(--pod-drift, 0)); animation: seedTravel 2.35s var(--pod-delay, 0ms) linear forwards; }
.seed-pod--manual { width: 11px; height: 11px; background: #fff17a; box-shadow: 0 0 15px #fff17a; }

.planet-button {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(165px, 26vh, 224px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transform: translateY(22px);
}

.planet-system {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}
.planet-button:active .planet-system { transform: scale(.946); }
.planet-button:active .planet { filter: brightness(1.18); }
.planet-button.popped .planet-system { animation: planetPop 170ms ease-out; }
.planet-glow { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--planet-a) 23%, transparent), transparent 64%); filter: blur(9px); animation: breathe 3s ease-in-out infinite alternate; }

.planet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 23%, rgba(255,255,255,.7), transparent 8%),
    radial-gradient(ellipse at 32% 36%, var(--planet-a) 0 11%, transparent 12%),
    radial-gradient(ellipse at 66% 59%, color-mix(in srgb, var(--planet-a) 75%, white 4%) 0 13%, transparent 14%),
    radial-gradient(ellipse at 27% 77%, var(--planet-c) 0 14%, transparent 15%),
    radial-gradient(circle at 34% 28%, var(--planet-a), var(--planet-b) 46%, var(--planet-c) 100%);
  box-shadow: inset -28px -25px 45px rgba(0, 0, 0, 0.4), inset 13px 11px 30px rgba(255, 255, 255, 0.13), 0 0 65px color-mix(in srgb, var(--planet-a) 26%, transparent);
  transition: transform 120ms ease, filter 120ms ease;
}

.planet::before, .planet::after { position: absolute; left: -10%; width: 120%; height: 15%; border-radius: 50%; content: ""; background: rgba(255,255,255,.08); transform: rotate(-9deg); }
.planet::before { top: 30%; }
.planet::after { top: 61%; height: 9%; }
.planet-sheen { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 42%, rgba(255,255,255,.09) 52%, transparent 66%); animation: planetShine 7s linear infinite; }

.planet-face {
  position: absolute;
  z-index: 3;
  top: 24%;
  left: 50%;
  display: flex;
  gap: 31px;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.3));
  transition: transform 180ms ease;
}
.planet-face > i { position: relative; width: 14px; height: 18px; border: 3px solid #1f1f1f; border-radius: 50%; background: #f8faef; }
.planet-face > i::after { position: absolute; right: 1px; bottom: 2px; width: 5px; height: 7px; border-radius: 50%; content: ""; background: #1f1f1f; }
.planet-face > b { position: absolute; top: 24px; left: 50%; width: 25px; height: 11px; border-bottom: 4px solid #1f1f1f; border-radius: 0 0 50% 50%; transform: translateX(-50%); }
.planet-button.holding .planet-face { transform: translateX(-50%) scale(1.08); }
.planet-button[data-bloom-stage="0"] .planet-face > b { width: 16px; border-radius: 50%; }
.planet-button[data-bloom-stage="2"] .planet-face > i:first-child,
.planet-button[data-bloom-stage="3"] .planet-face > i:first-child { height: 7px; margin-top: 6px; border-radius: 50%; background: #1f1f1f; }
.planet-button[data-bloom-stage="3"] .planet-face > b { width: 31px; height: 14px; border-bottom-width: 5px; }

.tap-copy { position: absolute; bottom: 15%; z-index: 2; display: grid; place-items: center; padding: 8px 12px; border: 1px solid rgba(255,255,255,.19); border-radius: 999px; background: rgba(4, 13, 19, 0.43); box-shadow: 0 8px 30px rgba(0,0,0,.2); backdrop-filter: blur(5px); pointer-events: none; }
.tap-copy b { font-size: 1.05rem; letter-spacing: 0.12em; }
.tap-copy small { margin-top: 1px; color: rgba(255,255,255,.68); font-size: .42rem; font-weight: 800; letter-spacing: .13em; }

.orbit { position: absolute; z-index: 1; width: 73%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--planet-a) 24%, transparent); border-radius: 50%; transform: rotateX(68deg) rotateZ(-14deg); }
.orbit--two { width: 91%; opacity: .55; transform: rotateX(66deg) rotateZ(23deg); }

.combo-pill { position: absolute; right: 11px; bottom: 10px; z-index: 4; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .55rem; font-weight: 800; letter-spacing: .09em; background: rgba(7, 16, 24, .77); opacity: .55; transition: opacity 150ms, border-color 150ms, transform 150ms; }
.combo-pill.active { opacity: 1; border-color: rgba(166,226,46,.38); transform: translateY(-2px); }
.combo-pill strong { margin-left: 4px; color: var(--accent); font-size: .72rem; }
.float-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.float-number { position: absolute; color: var(--accent); font-size: 1rem; font-weight: 900; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent); animation: floatUp 820ms ease-out forwards; }

.anomaly-button { position: absolute; z-index: 9; display: grid; place-items: center; min-width: 78px; padding: 8px 10px; border: 1px solid rgba(255,190,85,.55); border-radius: 14px; color: #2a1c05; background: linear-gradient(145deg, #fff286, var(--warning)); box-shadow: 0 0 0 6px rgba(255,190,85,.08), 0 12px 30px rgba(0,0,0,.3); cursor: pointer; animation: anomalyHover .8s ease-in-out infinite alternate; }
.anomaly-button[hidden] { display: none; }
.anomaly-button > span { font-size: 1.15rem; }
.anomaly-button b { font-size: .54rem; letter-spacing: .08em; }
.anomaly-button small { font-size: .4rem; font-weight: 900; opacity: .72; }

.launch-card { gap: 12px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 13px; background: rgba(24, 29, 23, .78); }
.launch-card { display: grid; grid-template-columns: minmax(145px, .75fr) minmax(100px, 1fr) auto; margin-bottom: 8px; }
.launch-copy { min-width: 0; }
.launch-copy strong { display: block; overflow: visible; font-size: .78rem; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.launch-copy small, .core-card small { display: block; margin-top: 2px; color: var(--muted); font-size: .61rem; }
.launch-progress { overflow: hidden; height: 7px; border-radius: 99px; background: rgba(255,255,255,.07); }
.launch-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); box-shadow: 0 0 14px rgba(166,226,46,.25); transition: width 250ms ease; }

.launch-button, .buy-mode, .buy-button, .boost-button, .core-card button, .primary-button, .secondary-button {
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 140ms, background 140ms, color 140ms, transform 140ms, opacity 140ms;
}

.launch-button { min-height: 34px; padding: 7px 10px; font-size: .66rem; font-weight: 800; background: rgba(166,226,46,.08); }
.launch-button:not(:disabled) { border-color: rgba(166,226,46,.42); color: var(--accent); box-shadow: 0 0 20px rgba(166,226,46,.08); }
button:disabled { cursor: default; opacity: .38; }

.buy-modes { display: flex; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: rgba(5,14,22,.65); }
.buy-mode { min-width: 35px; padding: 5px 7px; border: 0; background: transparent; color: var(--muted); font-size: .57rem; font-weight: 850; }
.buy-mode.active { color: #061510; background: var(--accent); }

.generator-list { display: grid; gap: 6px; margin-top: 11px; }
.generator-card { position: relative; gap: 10px; min-height: 56px; padding: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(24, 29, 23, .72); }
.generator-card.locked { opacity: .45; }
.generator-card::after { position: absolute; right: 0; bottom: 0; width: var(--progress, 0%); height: 2px; content: ""; background: var(--accent); transition: width 180ms; }
.module-icon { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--module-color) 40%, transparent); border-radius: 11px; color: var(--module-color); font-size: 1.15rem; background: color-mix(in srgb, var(--module-color) 9%, transparent); }
.module-copy { min-width: 0; flex: 1; }
.module-copy strong { display: block; overflow: visible; font-size: .75rem; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.module-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: .57rem; }
.module-copy span b { color: color-mix(in srgb, var(--module-color) 75%, white 20%); font-weight: 750; }
.owned-badge { min-width: 34px; color: var(--muted); font-size: .57rem; text-align: center; }
.owned-badge strong { display: block; color: var(--text); font-size: .8rem; font-variant-numeric: tabular-nums; }
.buy-button { min-width: 84px; padding: 7px 8px; background: rgba(166,226,46,.07); color: var(--accent); font-size: .61rem; font-weight: 800; }
.buy-button.affordable { border-color: rgba(166,226,46,.4); background: rgba(166,226,46,.12); }
.buy-button.affordable:hover, .launch-button:not(:disabled):hover, .boost-button.affordable:hover, .core-card button:not(:disabled):hover { transform: translateY(-1px); background: rgba(166,226,46,.18); }

.section-label { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; color: var(--muted); font-size: .51rem; font-weight: 850; letter-spacing: .12em; }
.section-label i { flex: 1; height: 1px; background: var(--line); }
.boost-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.boost-card { display: grid; grid-template-columns: auto 1fr; gap: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 11px; background: rgba(24,29,23,.68); }
.boost-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: var(--warning); background: rgba(255,190,85,.09); }
.boost-copy { min-width: 0; }
.boost-copy strong { display: block; overflow: visible; font-size: .62rem; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.boost-copy small { display: block; margin: 2px 0 5px; color: var(--muted); font-size: .5rem; }
.boost-button { width: 100%; padding: 4px; background: rgba(255,190,85,.06); color: var(--warning); font-size: .52rem; font-weight: 800; }
.boost-button.affordable { border-color: rgba(255,190,85,.35); }

.core-card { justify-content: space-between; gap: 10px; margin-top: 8px; padding: 9px 10px; border: 1px solid rgba(178,133,255,.2); border-radius: 12px; background: linear-gradient(135deg, rgba(134,78,211,.09), rgba(24,29,23,.72)); }
.core-card strong { display: block; font-size: .7rem; }
.core-card button { min-width: 73px; padding: 7px; color: #d9bdff; background: rgba(178,133,255,.08); font-size: .58rem; font-weight: 800; }
.core-card button:not(:disabled) { border-color: rgba(202,170,255,.45); }

.toast { position: absolute; right: 12px; bottom: 12px; left: 12px; z-index: 24; width: fit-content; max-width: min(440px, calc(100% - 24px)); max-height: calc(100% - 24px); margin-inline: auto; padding: 9px 13px; overflow: hidden; box-sizing: border-box; border: 1px solid rgba(166,226,46,.32); border-radius: 16px 5px 14px 6px; color: var(--text); background: rgba(24,29,23,.96); box-shadow: 0 16px 48px rgba(0,0,0,.35); opacity: 0; transform: translateY(12px); transition: opacity 170ms, transform 170ms; pointer-events: none; text-align: center; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; word-break: normal; hyphens: auto; unicode-bidi: plaintext; }
.toast.show { opacity: 1; transform: translateY(0); }
.reduce-motion .toast { transition: none !important; }

.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(2,8,12,.75); backdrop-filter: blur(13px); }
.modal[hidden] { display: none; }
.modal-card { width: min(410px, 100%); padding: 28px; border: 1px solid rgba(166,226,46,.24); border-radius: 22px; background: linear-gradient(150deg, #292e28, #171a17); box-shadow: 0 35px 100px rgba(0,0,0,.5); text-align: center; }
.modal-card h2 { margin: 7px 0 9px; font-size: 1.7rem; letter-spacing: -.045em; }
.modal-card p { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.modal-planet { display: block; width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #f4ffd0, var(--accent) 34%, #285e24); box-shadow: inset -12px -10px 18px rgba(0,0,0,.3), 0 0 40px rgba(166,226,46,.2); }
.modal-core { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 14px; border: 1px solid rgba(205,175,255,.38); border-radius: 22px; color: #d9bdff; font-size: 2rem; background: rgba(178,133,255,.1); box-shadow: 0 0 40px rgba(178,133,255,.13); transform: rotate(9deg); }
.offline-reward { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 12px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035); }
.offline-reward span { color: var(--muted); font-size: .7rem; }
.offline-reward strong { color: var(--warning); font-size: 1.05rem; }
.primary-button, .secondary-button { padding: 11px 15px; font-weight: 850; }
.primary-button { width: 100%; border-color: transparent; color: #061510; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); }
.secondary-button { color: var(--muted); background: rgba(255,255,255,.04); }
.modal-actions { gap: 8px; margin-top: 18px; }
.modal-actions .primary-button, .modal-actions .secondary-button { flex: 1; width: auto; }

.command-modal-card { position: relative; width: min(520px, 100%); }
.modal-close { position: absolute; top: 11px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.035); cursor: pointer; }
.overdrive-status { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.035); text-align: left; }
.overdrive-status span { color: var(--muted); font-size: .68rem; }
.overdrive-status strong { color: var(--accent); font-size: .75rem; }
.reward-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.reward-option { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center; padding: 12px; border: 1px solid rgba(166,226,46,.2); border-radius: 13px; background: rgba(166,226,46,.07); cursor: pointer; text-align: start; }
.reward-option[hidden] { display: none; }
.reward-option:disabled { cursor: default; }
.reward-option:not(:disabled):hover { border-color: rgba(166,226,46,.48); background: rgba(166,226,46,.12); transform: translateY(-1px); }
.reward-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #1f1f1f; background: var(--accent); }
.video-icon { color: #fff; background: #8e63d7; }
.reward-option b { font-size: .68rem; }
.reward-option small { color: var(--muted); font-size: .54rem; }
.availability-note { margin-top: 10px !important; font-size: .65rem !important; }
.premium-store { margin-top: 14px; text-align: left; }
.premium-store[hidden] { display: none; }
.product-list { display: grid; gap: 7px; }
.product-card { display: grid; gap: 2px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.035); cursor: pointer; text-align: left; }
.product-card b { font-size: .68rem; }
.product-card small { color: var(--muted); font-size: .55rem; }
.product-card span { margin-top: 4px; color: var(--accent); font-size: .55rem; font-weight: 850; }

.ad-screen { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; gap: 13px; color: var(--text); background: rgba(20,24,19,.93); text-align: center; }
.ad-screen[hidden] { display: none; }
.ad-screen strong { font-size: .78rem; letter-spacing: .04em; }
.signal-spinner { width: 48px; height: 48px; margin: auto; border: 4px solid rgba(166,226,46,.14); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }

.world--verdant { --world-filter: none; }
.world--ember { --accent: #ffcf70; --accent-strong: #ff8952; --planet-a: #ffe39d; --planet-b: #ef6c47; --planet-c: #6d2535; --world-filter: hue-rotate(270deg) saturate(.9) brightness(1.04); }
.world--azure { --accent: #8ee8ff; --accent-strong: #5a8dff; --planet-a: #d5f8ff; --planet-b: #3e8ee0; --planet-c: #272d82; --world-filter: hue-rotate(92deg) saturate(.9) brightness(1.02); }
.world--void { --accent: #dab4ff; --accent-strong: #a868ff; --planet-a: #f0d8ff; --planet-b: #9557ce; --planet-c: #341663; --world-filter: hue-rotate(178deg) saturate(.84) brightness(.94); }

@keyframes planetPop { 0% { transform: scale(1); } 45% { transform: scale(.928); } 100% { transform: scale(1.036); } }
@keyframes breathe { from { transform: scale(.92); opacity: .6; } to { transform: scale(1.08); opacity: 1; } }
@keyframes planetShine { from { transform: translateX(-80%); } to { transform: translateX(80%); } }
@keyframes tapGlow { 0% { opacity: .2; transform: scale(.84); } 44% { opacity: .95; transform: scale(1.12); } 100% { opacity: .38; transform: scale(1); } }
@keyframes stageFlash { 0% { opacity: 0; } 32% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tapRing { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.35); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(4.2); } }
@keyframes tapCore { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(.45); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(55deg) scale(2.1); } }
@keyframes tapSpark {
  0%, 58% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-angle)) scale(.2); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) rotate(calc(var(--spark-angle) + 45deg)) scale(.62); }
}
@keyframes factoryPulse { 0%, 100% { filter: none; } 42% { filter: brightness(1.15) saturate(1.18); } }
@keyframes cardStamp { 0% { transform: scale(.97) rotate(-.4deg); } 46% { transform: scale(1.035) rotate(.25deg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } 100% { transform: none; } }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 7px) scale(.8); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -58px) scale(1.12); } }
@keyframes seedTravel { 0% { left: -4px; opacity: 0; transform: translateY(var(--pod-drift, 0)) rotate(0deg) scale(.7); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; transform: translateY(calc(var(--pod-drift, 0) * -1)) rotate(380deg) scale(1.1); } }
@keyframes linePulse { from { opacity: .55; transform: scale(.8); } to { opacity: 1; transform: scale(1.18); } }
@keyframes anomalyHover { from { transform: translate(-50%, -50%) rotate(-3deg) scale(.96); } to { transform: translate(-50%, -56%) rotate(3deg) scale(1.04); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 960px) {
  .game-grid { grid-template-columns: minmax(0, 1fr) minmax(350px, .95fr); }
  .planet-stage { min-height: 300px; }
  .launch-card { grid-template-columns: minmax(125px, 1fr) auto; }
  .launch-progress { grid-column: 1 / -1; grid-row: 2; }
  .boost-copy small { display: none; }
}

/* Portal iframes are often landscape but much shorter than a browser window. */
@media (min-width: 761px) and (max-height: 720px) {
  html, body { height: 100%; overflow: hidden; }
  .game-shell { height: 100vh; min-height: 0; padding: 7px 0; }
  .topbar { min-height: 38px; margin-bottom: 5px; }
  .brand { gap: 8px; }
  .brand-icon { width: 35px; height: 35px; border-radius: 10px; }
  .command-button, .icon-button { min-height: 35px; height: 35px; }
  .streak-chip { min-height: 35px; padding-block: 4px; }
  .statbar { margin-bottom: 5px; }
  .stat-card { min-height: 45px; padding: 6px 11px; }
  .stat-card strong { font-size: 1rem; }
  .game-grid { height: calc(100vh - 100px); }
  .world-panel, .factory-panel { height: 100%; padding: 10px; }
  .world-panel { display: flex; flex-direction: column; }
  .factory-panel { overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(166,226,46,.35) transparent; }
  .world-heading { flex: 0 0 auto; }
  .planet-stage { flex: 1 1 auto; min-height: 0; margin: 5px 0; }
  .planet-button { width: clamp(145px, 22vh, 190px); transform: translateY(20px); }
  .bloomline { top: 7px; padding-block: 6px 7px; }
  .bloomline-heading { margin-bottom: 4px; }
  .launch-card { flex: 0 0 auto; padding: 6px 8px; }
  .launch-card { grid-template-columns: minmax(105px, .75fr) minmax(70px, 1fr) auto; margin-bottom: 5px; }
  .launch-progress { grid-column: auto; grid-row: auto; }
  .generator-list { gap: 5px; margin-top: 7px; }
  .generator-card { min-height: 49px; padding: 5px 7px; }
  .module-icon { width: 34px; height: 34px; }
  .research-title { margin-top: 8px; }
  .boost-list { gap: 5px; }
  .boost-card { min-height: 58px; padding: 6px; }
}

@media (min-width: 761px) and (max-height: 500px) {
  .planet-button { transform: translateY(29px); }
}

@media (max-width: 760px) {
  .game-shell { width: min(610px, calc(100% - 16px)); padding-top: 9px; }
  .statbar { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .stat-card { min-width: 0; min-height: 55px; padding: 7px 8px; }
  .stat-card > span { font-size: .47rem; }
  .stat-card strong { font-size: .9rem; }
  .game-grid { grid-template-columns: 1fr; }
  .world-panel, .factory-panel { padding: 11px; }
  .planet-stage { min-height: 340px; }
  .factory-panel { overflow: visible; }
  .generator-list { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .brand { gap: 7px; }
  .brand-lockup p { display: none; }
  .brand-lockup h1 { font-size: .93rem; }
  .brand-lockup h1 small { display: none; }
  .brand-icon { width: 37px; height: 37px; }
  .top-actions { gap: 5px; }
  .command-button { min-width: 39px; padding: 6px 8px; }
  .command-button b { display: none; }
  .streak-chip { min-width: 76px; padding: 6px 8px; }
  .streak-chip small { display: none; }
  .world-heading { padding: 0 2px; }
  .planet-stage { min-height: 310px; }
  .planet-button { width: 175px; }
  .bloomline { width: calc(100% - 14px); padding-inline: 8px; }
  .bloomline-heading strong { max-width: 54%; overflow: visible; white-space: normal; }
  .route-node { min-width: 36px; }
  .launch-card { grid-template-columns: 1fr auto; }
  .launch-copy small { font-size: .54rem; }
  .factory-heading { align-items: end; }
  .factory-heading h2 { font-size: .95rem; }
  .buy-mode { min-width: 32px; }
  .generator-card { gap: 7px; }
  .module-icon { width: 35px; height: 35px; }
  .buy-button { min-width: 75px; }
  .boost-list { grid-template-columns: 1fr; }
  .boost-card { grid-template-columns: auto 1fr auto; align-items: center; }
  .boost-copy small { display: block; margin-bottom: 0; }
  .boost-button { width: 76px; }
  .reward-options { grid-template-columns: 1fr; }
  .command-modal-card { padding: 24px 18px 20px; }
  .toast { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Flat field-atlas art direction
   One dark living specimen + one pale cultivation notebook. The uneven
   corners, hard ink shadows and purpose-drawn linework are intentional.
   -------------------------------------------------------------------------- */

:root {
  --paper: #ece8d8;
  --paper-deep: #d9d4bf;
  --ink: #20231f;
  --moss-ink: #31412a;
  --hairline: rgba(31, 35, 31, .2);
}

body {
  background:
    linear-gradient(96deg, transparent 0 49.8%, rgba(255,255,255,.018) 50%, transparent 50.2%),
    radial-gradient(circle at 14% 8%, rgba(95,175,28,.14), transparent 33rem),
    #151815;
}

body::before {
  opacity: .28;
  background-image:
    repeating-linear-gradient(7deg, transparent 0 8px, rgba(255,255,255,.018) 9px, transparent 10px),
    radial-gradient(circle, rgba(255,255,255,.1) 0 1px, transparent 1px);
  background-size: auto, 29px 31px;
  mask-image: none;
}

.game-shell { width: min(1270px, calc(100% - 28px)); }

.topbar { border-bottom: 1px solid rgba(236,232,216,.12); }
.brand-icon { border-radius: 50% 42% 50% 38%; box-shadow: none; }
.brand-lockup p { color: #8e9986; letter-spacing: .2em; }
.brand-lockup h1 { letter-spacing: -.06em; }
.brand-lockup h1 small { color: #8e9986; }

.command-button,
.streak-chip,
.icon-button {
  border: 0;
  border-radius: 3px 13px 4px 11px;
  background: #292e28;
  box-shadow: inset 0 0 0 1px rgba(236,232,216,.1), 3px 3px 0 rgba(0,0,0,.22);
}
.command-button { padding-right: 14px; }
.command-button span { border-radius: 50% 40% 50% 36%; }
.command-button.active { box-shadow: inset 0 0 0 2px var(--accent), 3px 3px 0 rgba(0,0,0,.22); }

.statbar {
  gap: 0;
  overflow: hidden;
  border: 3px solid #0f120f;
  border-left: 7px solid var(--accent);
  border-radius: 17px 4px 15px 5px;
  background: var(--paper);
  box-shadow: 0 5px 0 rgba(5,8,5,.48);
}
.stat-card,
.stat-card--energy {
  min-height: 54px;
  border: 0;
  border-left: 1px dashed rgba(31,35,31,.24);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}
.stat-card:first-child { border-left: 0; }
.stat-card > span { color: #687064; font-size: .55rem; letter-spacing: .13em; }
.stat-card strong { color: var(--ink); }
.stat-card strong small { color: #667062; }
.stat-card--energy strong { color: #375b1b; }

.game-grid { grid-template-columns: minmax(0, 1.22fr) minmax(370px, .78fr); gap: 14px; }
.world-panel,
.factory-panel { backdrop-filter: none; }
.world-panel {
  border: 2px solid #354134;
  border-radius: 28px 7px 24px 9px;
  background: #1d221c;
  box-shadow: 7px 8px 0 rgba(7,10,7,.38);
}
.factory-panel {
  border: 3px solid #101310;
  border-radius: 8px 25px 9px 20px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 7px 8px 0 rgba(7,10,7,.38), inset -18px 0 0 rgba(31,35,31,.025);
}
.factory-heading { padding: 1px 2px 10px; border-bottom: 2px solid var(--ink); }
.factory-heading .eyebrow { color: #747b6c; }
.factory-heading h2 { font-size: 1.24rem; color: var(--ink); }
.world-heading h2 { font-size: 1.28rem; }

.planet-stage {
  border: 2px solid rgba(236,232,216,.13);
  border-radius: 35px 8px 28px 10px;
  background:
    linear-gradient(180deg, rgba(111,146,72,.09), transparent 38%),
    repeating-radial-gradient(ellipse at 50% 68%, transparent 0 45px, rgba(166,226,46,.055) 46px 47px, transparent 48px 72px),
    #161c16;
  box-shadow: inset 0 -34px 70px rgba(7,12,7,.3);
}
.stars { opacity: .24; background-size: 73px 61px; }
.stars::after { opacity: .45; background-size: 109px 83px; }

.contour-map { position: absolute; inset: 12% 5% 2%; z-index: 0; opacity: .4; pointer-events: none; }
.contour-map i { position: absolute; left: 50%; bottom: 3%; width: 82%; height: 45%; border: 1px dashed rgba(166,226,46,.18); border-radius: 50% 46% 52% 44%; transform: translateX(-50%) rotate(-4deg); }
.contour-map i:nth-child(2) { width: 61%; height: 34%; transform: translateX(-50%) rotate(5deg); }
.contour-map i:nth-child(3) { width: 39%; height: 24%; transform: translateX(-50%) rotate(-8deg); }
.field-mark { position: absolute; top: 91px; left: 13px; z-index: 2; display: grid; color: rgba(236,232,216,.4); transform: rotate(-90deg) translateX(-100%); transform-origin: left top; }
.field-mark b { font-size: .55rem; letter-spacing: .14em; }
.field-mark span { font-size: .4rem; letter-spacing: .08em; }

.root-horizon { position: absolute; right: -3%; bottom: -3px; left: -3%; z-index: 0; height: 24%; overflow: hidden; opacity: .68; pointer-events: none; }
.root-horizon::before { position: absolute; inset: 45% 0 0; content: ""; background: #20291d; clip-path: polygon(0 48%, 10% 15%, 22% 39%, 34% 6%, 46% 42%, 61% 12%, 72% 37%, 86% 3%, 100% 34%, 100% 100%, 0 100%); }
.root-horizon i { position: absolute; bottom: -32px; width: 120px; height: 68px; border: 1px solid rgba(166,226,46,.13); border-radius: 50%; }
.root-horizon i:nth-child(1) { left: 8%; }
.root-horizon i:nth-child(2) { left: 43%; width: 170px; }
.root-horizon i:nth-child(3) { right: 5%; width: 140px; }

.bloomline {
  top: 12px;
  width: min(520px, calc(100% - 76px));
  padding: 5px 4px 7px 13px;
  border: 0;
  border-bottom: 1px solid rgba(236,232,216,.18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.bloomline::before { position: absolute; top: 3px; bottom: 7px; left: 0; width: 4px; content: ""; background: var(--accent); transform: skewY(-11deg); }
.bloomline-heading span { color: #aeb6a7; }
.bloomline-heading span i { box-shadow: none; }
.bloomline-heading strong { color: #d3d8cb; }
.route-line { height: 2px; background: repeating-linear-gradient(90deg, rgba(236,232,216,.15) 0 6px, transparent 6px 10px); }
.route-line > i { background: var(--accent); box-shadow: none; }
.route-node { color: #667063; }
.route-node b { border: 1px solid #556051; border-radius: 50% 43% 50% 39%; background: #192019; }
.route-node.active b { border-color: #111610; box-shadow: 2px 2px 0 rgba(0,0,0,.3); }
.route-node.current b { box-shadow: 0 0 0 3px rgba(166,226,46,.16), 2px 2px 0 rgba(0,0,0,.3); }

.planet-button { width: clamp(165px, 27vh, 226px); }
.planet-glow { inset: -10%; opacity: .38; filter: blur(18px); }
.planet {
  border: 4px solid #111510;
  border-radius: 50%;
  background: #b8ec2e url("assets/game/tapterra-planet-base-v1.png") center / cover no-repeat;
  box-shadow: inset -12px -14px 0 rgba(0,0,0,.08), 0 9px 0 #0d120d, 0 18px 42px color-mix(in srgb, var(--accent) 24%, transparent);
  filter: var(--world-filter, none);
}
.planet::before,
.planet::after { display: none; }
.planet-sheen {
  display: block;
  inset: -20%;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.22) 48%, transparent 61%);
  animation: planetShine 5.8s ease-in-out infinite;
}
.planet-face { display: none; }
.planet-button:active .planet { filter: var(--world-filter, none) brightness(1.08); }
.planet-button.popped .planet-glow { animation: tapGlow 360ms ease-out; }

.planet-stage::after {
  position: absolute;
  inset: 0;
  z-index: 8;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--tap-x, 50%) var(--tap-y, 52%), color-mix(in srgb, var(--accent) 34%, transparent), transparent 24%);
}
.planet-stage.tap-flash::after { animation: stageFlash 280ms ease-out; }
.planet-stage.factory-pulse { animation: factoryPulse 420ms ease-out; }
.tap-burst { position: absolute; z-index: 14; width: 0; height: 0; pointer-events: none; }
.tap-burst::after {
  position: absolute;
  width: 18px;
  height: 18px;
  content: "";
  background: #fff8b5;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  transform: translate(-50%, -50%);
  animation: tapCore 340ms ease-out forwards;
}
.tap-burst-ring {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 4px solid #fff8b5;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: tapRing 430ms ease-out forwards;
}
.tap-spark {
  position: absolute;
  width: 9px;
  height: 15px;
  border-radius: 70% 15% 70% 15%;
  background: var(--spark-color, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--spark-color, var(--accent)) 74%, transparent);
  transform: translate(-50%, -50%) rotate(var(--spark-angle));
  animation: tapSpark 520ms cubic-bezier(.12,.72,.18,1) forwards;
}
.tap-spark:nth-child(3n) { width: 5px; height: 5px; border-radius: 50%; }
.tap-burst--big .tap-burst-ring { border-width: 6px; animation-duration: 620ms; }
.tap-burst--big .tap-spark { width: 11px; height: 19px; animation-duration: 680ms; }
.generator-card.just-bought,
.boost-card.just-bought { animation: cardStamp 460ms cubic-bezier(.18,.78,.18,1); }

.tap-copy {
  bottom: 8%;
  min-width: 132px;
  padding: 8px 17px 7px;
  border: 0;
  border-radius: 0;
  color: #172015;
  background: var(--accent);
  box-shadow: 4px 5px 0 rgba(9,14,8,.55);
  backdrop-filter: none;
  clip-path: polygon(4% 8%, 96% 0, 100% 86%, 7% 100%, 0 23%);
  transform: rotate(-1.5deg);
}
.tap-copy b { font-size: .92rem; letter-spacing: .08em; }
.tap-copy small { color: rgba(23,32,21,.72); font-size: .52rem; letter-spacing: .04em; text-transform: lowercase; }

.orbit { border-style: dashed; border-color: color-mix(in srgb, var(--planet-a) 18%, transparent); }
.seed-pod { border: 1px solid rgba(255,255,255,.6); box-shadow: none; }
.float-number { text-shadow: 2px 2px 0 rgba(0,0,0,.45); }

.combo-pill { border: 0; color: #929c8d; background: transparent; }
.combo-pill.active { border: 0; }

.launch-card { border: 0; border-radius: 0; box-shadow: none; }
.launch-card {
  border-left: 5px solid var(--accent);
  border-radius: 2px 13px 3px 3px;
  background: #293126;
}
.launch-progress { border-radius: 0; background: rgba(255,255,255,.09); transform: skewX(-11deg); }
.launch-progress i { border-radius: 0; box-shadow: none; }
.launch-button {
  border: 0;
  border-radius: 2px 9px 2px 7px;
  background: #151a14;
  box-shadow: inset 0 0 0 1px rgba(236,232,216,.1);
}

.buy-modes { border: 2px solid var(--ink); border-radius: 2px 9px 2px 7px; background: transparent; }
.buy-mode { color: #5e655a; }
.buy-mode.active { color: #152012; background: var(--accent); }

.generator-list { gap: 0; margin-top: 5px; border-top: 1px solid var(--hairline); }
.generator-card {
  gap: 9px;
  min-height: 59px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px dashed rgba(31,35,31,.24);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
}
.generator-card::after { right: auto; left: 0; height: 3px; background: var(--module-color); opacity: .72; }
.generator-card.locked { opacity: .35; }
.module-icon {
  width: 43px;
  height: 43px;
  border: 2px solid currentColor;
  border-radius: 52% 43% 49% 39%;
  color: color-mix(in srgb, var(--module-color) 70%, #243020 30%);
  background: rgba(255,255,255,.22);
  transform: rotate(-2deg);
}
.generator-card[data-module="1"] .module-icon,
.generator-card[data-module="4"] .module-icon { transform: rotate(3deg); }
.module-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.module-copy strong { color: var(--ink); font-size: .76rem; }
.module-copy span { color: #697064; }
.module-copy span b { color: #355c1f; }
.owned-badge { color: #72786e; }
.owned-badge small { font-size: .42rem; letter-spacing: .08em; }
.owned-badge strong { color: var(--ink); }
.buy-button {
  min-width: 81px;
  border: 0;
  border-radius: 0;
  color: var(--paper);
  background: var(--ink);
  box-shadow: 3px 3px 0 rgba(31,35,31,.16);
  clip-path: polygon(0 0, 91% 0, 100% 27%, 100% 100%, 8% 100%, 0 76%);
}
.buy-button.affordable { color: #172015; background: var(--accent); }
.buy-button.affordable:hover { background: #b5ee45; }

.section-label { margin-top: 12px; color: #5e665a; }
.section-label i { background: rgba(31,35,31,.28); }
.boost-list { gap: 7px; }
.boost-card {
  position: relative;
  padding: 8px;
  border: 0;
  border-radius: 2px 10px 3px 7px;
  color: var(--ink);
  background: #d9e3ba;
  box-shadow: 3px 3px 0 rgba(31,35,31,.12);
}
.boost-card:nth-child(2) { background: #e4ddc7; transform: translateY(2px) rotate(.35deg); }
.boost-card:nth-child(3) { background: #ded7aa; transform: rotate(-.35deg); }
.boost-icon { border-radius: 50% 42% 50% 39%; color: #405b27; background: rgba(255,255,255,.34); }
.boost-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.boost-copy strong { color: var(--ink); }
.boost-copy small { color: #6a7165; }
.boost-button { border: 0; border-radius: 1px 6px 1px 5px; color: #52622f; background: rgba(255,255,255,.3); }

.core-card {
  border: 0;
  border-radius: 12px 2px 10px 3px;
  color: var(--paper);
  background: var(--ink);
  box-shadow: 4px 4px 0 rgba(31,35,31,.15);
}
.core-card .eyebrow,
.core-card small { color: #9ca596; }
.core-card button { border: 1px solid rgba(218,180,255,.3); border-radius: 2px 7px; }

.modal { background: rgba(12,15,12,.8); }
.modal-card {
  border: 3px solid #111410;
  border-radius: 8px 25px 9px 20px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 9px 10px 0 rgba(0,0,0,.34);
}
.modal-card p,
.modal-close,
.availability-note { color: #697064; }
.modal-close { border: 0; background: rgba(31,35,31,.08); }
.overdrive-status,
.offline-reward { border: 1px dashed rgba(31,35,31,.26); border-radius: 3px; background: rgba(255,255,255,.24); }
.reward-option { border: 0; border-radius: 3px 12px 4px 8px; color: var(--ink); background: #dbe6bd; box-shadow: 3px 3px 0 rgba(31,35,31,.13); }
.reward-option small { color: #697064; }
.product-card { color: var(--ink); background: rgba(255,255,255,.28); }
.toast { border: 0; border-radius: 2px 11px 3px 8px; color: var(--ink); background: var(--paper); box-shadow: 5px 6px 0 rgba(0,0,0,.3); }

@media (max-width: 960px) {
  .game-grid { grid-template-columns: minmax(0, 1fr) minmax(350px, .86fr); }
  .field-mark { display: none; }
}

@media (min-width: 761px) and (max-height: 720px) {
  .game-shell { height: 100vh; padding: 7px 0; }
  .stat-card { min-height: 45px; }
  .game-grid { height: calc(100vh - 100px); }
  .world-panel, .factory-panel { height: 100%; padding: 10px; }
  .planet-stage { min-height: 0; }
  .planet-button { width: clamp(160px, 29vh, 205px); }
  .bloomline { top: 7px; width: calc(100% - 42px); }
  .field-mark { display: none; }
  .generator-card { min-height: 51px; padding-block: 5px; }
  .module-icon { width: 35px; height: 35px; }
  .module-icon svg { width: 22px; height: 22px; }
  .launch-card { padding: 6px 8px; }
}

@media (min-width: 761px) and (max-height: 500px) {
  .planet-button { width: clamp(120px, 26vh, 145px); transform: translateY(20px); }
  .tap-copy { bottom: 6%; }
}

@media (max-width: 760px) {
  body { background: #151815; }
  .statbar { grid-template-columns: repeat(4, 1fr); }
  .stat-card { min-height: 53px; }
  .game-grid { grid-template-columns: 1fr; gap: 12px; }
  .world-panel { box-shadow: 5px 6px 0 rgba(7,10,7,.35); }
  .factory-panel { box-shadow: 5px 6px 0 rgba(7,10,7,.35); }
  .planet-stage { min-height: 340px; }
}

@media (max-width: 460px) {
  .statbar { border-width: 2px; border-left-width: 5px; }
  .stat-card { padding-inline: 6px; }
  .stat-card > span { font-size: .43rem; letter-spacing: .07em; }
  .world-panel, .factory-panel { border-width: 2px; }
  .bloomline { width: calc(100% - 20px); }
  .planet-button { width: 174px; }
  .tap-copy { min-width: 120px; }
  .generator-card { grid-template-columns: auto 1fr auto auto; }
  .boost-list { grid-template-columns: 1fr; }
  .boost-card { grid-template-columns: auto 1fr auto; }
}

/* --------------------------------------------------------------------------
   In-world HUD — the interface belongs to the game board, not a web page.
   -------------------------------------------------------------------------- */
.game-shell {
  width: min(1280px, calc(100% - 12px));
  min-height: 100vh;
  padding: 6px 0;
}
.game-grid { min-height: 0; gap: 9px; align-items: start; }
.world-panel,
.factory-panel { position: relative; }
.world-panel { display: flex; flex-direction: column; padding: 10px; }
.scene-hud {
  flex: 0 0 auto;
  min-height: 39px;
  margin: 0 0 5px;
  padding: 0 2px 4px;
  border: 0;
  border-bottom: 1px dashed rgba(236,232,216,.2);
}
.scene-hud .brand { gap: 7px; }
.scene-hud .brand-icon { width: 33px; height: 33px; }
.scene-hud .brand-lockup p { margin: 0 0 1px; font-size: .42rem; }
.scene-hud .brand-lockup h1 { font-size: .98rem; }
.scene-hud .brand-lockup h1 small { display: none; }
.scene-hud .top-actions { gap: 5px; }
.scene-hud .command-button,
.scene-hud .streak-chip,
.scene-hud .icon-button {
  min-height: 32px;
  height: 32px;
  border-radius: 50% 42% 48% 40%;
  box-shadow: inset 0 0 0 1px rgba(236,232,216,.13), 2px 3px 0 rgba(0,0,0,.28);
}
.scene-hud .command-button { min-width: 84px; padding: 4px 9px 4px 5px; border-radius: 15px 5px 13px 6px; }
.scene-hud .command-button span { width: 23px; height: 23px; }
.scene-hud .command-button b { font-size: .58rem; }
.scene-hud .streak-chip { min-width: 70px; padding: 3px 7px; border-radius: 7px 15px 7px 13px; }
.scene-hud .streak-chip small { font-size: .38rem; }
.scene-hud .icon-button { width: 32px; }

.scene-stats {
  flex: 0 0 auto;
  grid-template-columns: 1.35fr 1fr 1fr .9fr;
  gap: 4px;
  margin: 0 0 5px;
  overflow: visible;
  border: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.scene-stats .stat-card,
.scene-stats .stat-card--energy {
  min-height: 38px;
  padding: 4px 8px;
  border: 1px solid rgba(236,232,216,.16);
  border-left: 3px solid var(--accent);
  border-radius: 3px 10px 3px 8px;
  color: #f4f0dc;
  background: #252c24;
  box-shadow: 2px 3px 0 rgba(0,0,0,.25);
  clip-path: polygon(0 0, 95% 0, 100% 22%, 100% 100%, 5% 100%, 0 78%);
}
.scene-stats .stat-card--energy { color: #172015; background: var(--accent); }
.scene-stats .stat-card > span { color: #98a28f; font-size: .54rem; letter-spacing: .08em; }
.scene-stats .stat-card--energy > span { color: rgba(23,32,21,.68); }
.scene-stats .stat-card strong { color: inherit; font-size: .84rem; }
.scene-stats .stat-card strong small { color: inherit; opacity: .65; }
.scene-stats .stat-card--energy strong { color: #172015; }
.world-heading { flex: 0 0 auto; padding: 0 3px; }
.world-heading .eyebrow { font-size: .52rem; }
.world-heading h2 { font-size: 1.08rem; }

.factory-panel {
  padding: 11px;
  border-radius: 8px 24px 8px 18px;
  background:
    radial-gradient(circle at 12px 12px, #85836f 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 12px) 12px, #85836f 0 2px, transparent 2.5px),
    radial-gradient(circle at 12px calc(100% - 12px), #85836f 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #85836f 0 2px, transparent 2.5px),
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(70,67,54,.025) 25px),
    var(--paper);
}
.factory-heading { min-height: 50px; padding: 3px 5px 9px; }
.factory-heading h2 { font-size: 1.13rem; }
.buy-modes { transform: rotate(.5deg); }
.generator-card { cursor: default; }
.generator-card:not(.locked):hover { background: rgba(255,255,255,.17); }
.buy-button:not(:disabled) { cursor: pointer; }
.buy-button { display: grid; place-content: center; gap: 1px; min-height: 39px; line-height: 1; }
.buy-button small { font-size: .38rem; font-weight: 900; letter-spacing: .12em; opacity: .72; }
.buy-button b { font-size: .64rem; }
.buy-button.affordable { box-shadow: 3px 3px 0 rgba(31,35,31,.24), inset 0 -3px 0 rgba(71,116,18,.22); }
.buy-button.affordable:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(31,35,31,.2); }

@media (min-width: 761px) and (max-height: 720px) {
  .game-shell { height: 100vh; padding: 5px 0; }
  .game-grid { height: calc(100vh - 10px); min-height: 0; }
  .world-panel,
  .factory-panel { height: 100%; padding: 8px 10px; }
  .scene-hud { min-height: 35px; margin-bottom: 3px; padding-bottom: 3px; }
  .scene-stats { margin-bottom: 3px; }
  .scene-stats .stat-card,
  .scene-stats .stat-card--energy { min-height: 34px; padding-block: 3px; }
  .world-heading h2 { font-size: 1rem; }
  .planet-stage { margin-block: 3px; }
  .factory-heading { min-height: 43px; padding-bottom: 6px; }
  .generator-card { min-height: 61px; padding-block: 7px; }
}

@media (max-width: 760px) {
  .game-shell { width: min(610px, calc(100% - 12px)); padding: 6px 0 14px; }
  .game-grid { min-height: 0; }
  .scene-hud .command-button { min-width: 34px; width: 34px; padding: 4px; }
  .scene-hud .command-button b { display: none; }
  .scene-hud .streak-chip { min-width: 58px; }
  .scene-hud .streak-chip small { display: none; }
  .scene-stats { grid-template-columns: repeat(4, 1fr); }
  .scene-stats .stat-card,
  .scene-stats .stat-card--energy { min-height: 40px; padding-inline: 6px; }
}

/* Progression feedback */
.module-copy span em {
  display: block;
  margin-top: 2px;
  color: #7b806f;
  font-size: .48rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
}
.float-number--burst {
  color: #fff49b;
  font-size: 1.15rem;
  text-shadow: 0 0 14px #f5e54c, 2px 3px 0 rgba(0,0,0,.42);
  animation-duration: 1.05s;
}
.combo-pill {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 6px;
  width: 94px;
  padding: 5px 7px;
  border: 1px solid rgba(236,232,216,.16);
  border-radius: 3px 10px 3px 8px;
  color: #aab2a3;
  background: rgba(18,24,18,.86);
  box-shadow: 2px 3px 0 rgba(0,0,0,.28);
  opacity: .74;
}
.combo-pill span { align-self: center; font-size: .46rem; }
.combo-pill strong { margin: 0; }
.combo-pill > i {
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
}
.combo-pill > i::after {
  display: block;
  width: var(--combo-fill, 0%);
  height: 100%;
  content: "";
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  transition: width 100ms linear;
}
.combo-pill.active { opacity: 1; transform: translateY(-2px); }
.combo-pill.fever { color: #fff5a2; animation: comboFever 420ms ease-in-out infinite alternate; }

.orbit { opacity: .13; transition: opacity 350ms ease, filter 350ms ease; }
.planet-stage.orbit-one-online .orbit--one { opacity: .72; filter: drop-shadow(0 0 5px var(--accent)); }
.planet-stage.orbit-two-online .orbit--two { opacity: .68; filter: drop-shadow(0 0 5px var(--warning)); }
.world-panel[data-growth-stage="0"] .root-horizon { opacity: .25; }
.world-panel[data-growth-stage="1"] .root-horizon { opacity: .48; }
.world-panel[data-growth-stage="2"] .root-horizon { opacity: .72; }
.world-panel[data-growth-stage="3"] .root-horizon { opacity: 1; filter: drop-shadow(0 -6px 12px color-mix(in srgb, var(--accent) 25%, transparent)); }
.planet-stage.garden-complete { box-shadow: inset 0 -34px 70px rgba(7,12,7,.3), inset 0 0 42px color-mix(in srgb, var(--accent) 12%, transparent); }
.tap-burst--big::before {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 2px dashed var(--accent);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
  animation: tapRing 620ms 70ms ease-out forwards;
}
.world-panel.progress-celebration { animation: boardCelebrate 820ms ease-out; }
.world-panel.progress-celebration .planet { animation: worldCelebrate 780ms cubic-bezier(.12,.74,.2,1); }

@keyframes comboFever { from { box-shadow: 2px 3px 0 rgba(0,0,0,.28), 0 0 4px var(--accent); } to { box-shadow: 2px 3px 0 rgba(0,0,0,.28), 0 0 17px var(--accent); } }
@keyframes boardCelebrate { 0%, 100% { filter: none; } 35% { filter: brightness(1.2) saturate(1.28); } }
@keyframes worldCelebrate { 0% { transform: scale(.86) rotate(-5deg); } 48% { transform: scale(1.13) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }

/* --------------------------------------------------------------------------
   TAPTERRA art pass — wonky printed game pieces, fifteen visible stops and
   deliberately varied labels. The structure stays compact; the surfaces do
   not repeat one generic card recipe.
   -------------------------------------------------------------------------- */

body {
  background:
    radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 34rem),
    repeating-linear-gradient(104deg, transparent 0 17px, rgba(255,255,255,.012) 18px, transparent 19px),
    #121713;
}

.studio-signature {
  display: block;
  margin: 7px 12px 0 auto;
  color: #747e70;
  font-size: .44rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-align: right;
}
.studio-signature b { color: #aeb7a9; }

.scene-hud .brand-icon {
  width: 38px;
  height: 38px;
  border: 2px solid #0d120e;
  border-radius: 48% 42% 46% 40%;
  object-fit: cover;
  box-shadow: 2px 3px 0 rgba(0,0,0,.34);
  transform: rotate(-4deg) scale(1.08);
}
.scene-hud .brand-lockup { display: grid; align-content: center; }
.scene-hud .brand-lockup h1 {
  display: flex;
  align-items: center;
  font-size: 1.13rem;
  letter-spacing: -.08em;
  line-height: .86;
}
.brand-lockup h1 span { color: #f6efd9; transform: rotate(-2deg); }
.brand-lockup h1 em { margin-left: 2px; color: var(--accent); transform: rotate(1.5deg) translateY(1px); }
.scene-hud .brand-lockup p {
  order: 2;
  margin: 4px 0 0 1px;
  color: #83907e;
  font-size: .37rem;
  letter-spacing: .16em;
}

.scene-hud .command-button {
  clip-path: polygon(4% 5%, 94% 0, 100% 78%, 88% 100%, 3% 92%);
  transform: rotate(-.5deg);
}
.scene-hud .streak-chip { transform: rotate(.7deg); }
.scene-hud .icon-button { transform: rotate(-2deg); }

.scene-stats { gap: 5px; }
.scene-stats .stat-card {
  border: 2px solid #101510;
  box-shadow: 2px 3px 0 rgba(0,0,0,.31);
}
.scene-stats .stat-card:nth-child(1) { transform: rotate(-.35deg); }
.scene-stats .stat-card:nth-child(2) { color: #26291f; background: #f1e7c9; transform: rotate(.35deg); }
.scene-stats .stat-card:nth-child(2) > span { color: #747261; }
.scene-stats .stat-card:nth-child(3) { color: #2b2517; background: #f6c94e; transform: rotate(-.2deg); }
.scene-stats .stat-card:nth-child(3) > span { color: #76612c; }
.scene-stats .stat-card:nth-child(4) { color: #17312d; background: #76d4c5; transform: rotate(.45deg); }
.scene-stats .stat-card:nth-child(4) > span { color: #39675f; }

.world-panel {
  border-color: color-mix(in srgb, var(--accent) 42%, #263127);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 18%),
    #1a211b;
}
.world-heading { gap: 8px; min-height: 32px; }
.world-heading > div:first-child { min-width: 108px; }
.world-heading h2 { color: #fff7dd; letter-spacing: -.045em; }
.world-bonus { flex: 0 0 auto; }

.level-map {
  --level-progress: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  align-items: center;
  flex: 1 1 260px;
  gap: 0;
  min-width: 210px;
  height: 34px;
  padding: 0 12px;
}
.level-map::before,
.level-map::after {
  position: absolute;
  right: 12px;
  left: 12px;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  content: "";
  transform: translateY(-50%);
  pointer-events: none;
}
.level-map::before {
  border: 1px solid rgba(244,239,218,.18);
  background: #313a32;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.42);
}
.level-map::after {
  z-index: 1;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 32%, transparent);
  transform: translateY(-50%) scaleX(var(--level-progress));
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(.2,.75,.25,1);
}
.level-map i {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 7px;
  height: 7px;
  border: 2px solid #687368;
  border-radius: 50%;
  background: #202821;
  box-shadow: 0 0 0 2px #1a211b;
  transform: none;
  transition: width 180ms ease, height 180ms ease, background 180ms ease, border-color 180ms ease;
}
.level-map i:nth-child(3n),
.level-map i:nth-child(4n) { transform: none; }
.level-map i.done {
  width: 9px;
  height: 9px;
  border-color: color-mix(in srgb, var(--accent) 75%, #e8efdc);
  background: var(--accent-strong);
}
.level-map i.current {
  width: 23px;
  height: 23px;
  border: 3px solid #fff4c9;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,0,0,.32), 0 0 15px color-mix(in srgb, var(--accent) 48%, transparent);
}
.level-map i.current::after,
.level-map i.preview::after {
  color: #182016;
  content: attr(data-level);
  font-size: .44rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.planet-stage {
  border-color: color-mix(in srgb, var(--accent) 24%, #495048);
  background:
    radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 32%),
    repeating-radial-gradient(ellipse at 50% 68%, transparent 0 45px, color-mix(in srgb, var(--accent) 7%, transparent) 46px 47px, transparent 48px 72px),
    #101d18;
}
.field-mark b::before { content: "T/"; }
.field-mark b { font-size: 0; }
.field-mark b::after { content: attr(data-level); }
.field-mark span { display: none; }

.planet-button { width: clamp(178px, 30vh, 244px); }
.planet {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 18px 34px color-mix(in srgb, var(--accent) 15%, transparent);
  filter: none;
}
.planet-sheen { z-index: 2; opacity: .35; mix-blend-mode: screen; }

.bloomline { width: min(540px, calc(100% - 46px)); }
.bloomline-heading span { color: #c2cbbb; }
.bloomline-heading strong { color: var(--accent); }

.launch-card {
  border-left-color: var(--accent);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38%),
    #273027;
  clip-path: polygon(0 4%, 98% 0, 100% 88%, 97% 100%, 1% 96%);
}
.launch-button:not(:disabled) { color: #171b14; background: var(--accent); }

.factory-panel {
  border-radius: 7px 25px 8px 17px;
  background:
    radial-gradient(circle at 12px 12px, #85836f 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 12px) 12px, #85836f 0 2px, transparent 2.5px),
    radial-gradient(circle at 12px calc(100% - 12px), #85836f 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #85836f 0 2px, transparent 2.5px),
    repeating-linear-gradient(-2deg, transparent 0 27px, rgba(70,67,54,.03) 28px),
    #eee6cf;
}
.factory-heading { position: relative; }
.factory-heading::after {
  position: absolute;
  top: -5px;
  left: 116px;
  padding: 3px 6px;
  color: #6d6b5e;
  background: #f8d669;
  content: "PACK LIGHT!";
  font-size: .4rem;
  font-weight: 900;
  letter-spacing: .1em;
  transform: rotate(4deg);
  pointer-events: none;
}
.generator-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #8b8a74 transparent;
  scrollbar-width: thin;
}
.generator-card {
  border: 0;
  border-bottom: 1px dashed rgba(31,35,31,.24);
  background: transparent;
}
.generator-card:nth-child(odd) { margin-right: 0; }
.generator-card:nth-child(even) { margin-left: 0; background: rgba(255,255,255,.13); }
.generator-card:nth-child(3n+1) .module-icon,
.generator-card:nth-child(3n+2) .module-icon { transform: none; }
.module-icon {
  border: 2px solid color-mix(in srgb, var(--module-color) 70%, #31362d);
  border-radius: 50%;
  background: color-mix(in srgb, var(--module-color) 16%, #f0e8d2);
  box-shadow: 2px 2px 0 rgba(31,35,31,.18);
}
.buy-button {
  color: #2a2b22;
  background: color-mix(in srgb, var(--module-color) 35%, #e9e0c5);
  clip-path: polygon(4% 5%, 94% 0, 100% 48%, 91% 100%, 2% 94%, 0 20%);
}
.buy-button.affordable { color: #172014; background: var(--module-color); }
.owned-badge { transform: rotate(-1deg); }

.boost-card:nth-child(1) { background: #dfe8bd; transform: rotate(-.6deg); }
.boost-card:nth-child(2) { background: #c8e5dc; transform: rotate(.45deg); }
.boost-card:nth-child(3) { background: #f0d8aa; transform: rotate(-.35deg); }
.core-card {
  border-left: 5px solid #ae84ff;
  background: #202420;
  clip-path: polygon(1% 2%, 97% 0, 100% 18%, 99% 96%, 3% 100%, 0 82%);
}
.core-card button:not(:disabled) { color: #21182d; background: #cfadff; }

.world--berry .stars,
.world--peach .stars,
.world--candy .stars { transform: rotate(7deg); }
.world--puddle .root-horizon,
.world--coral .root-horizon { filter: hue-rotate(90deg); }
.world--cloud .root-horizon,
.world--star .root-horizon { opacity: .18 !important; }
.world--honey .contour-map i { border-radius: 12%; transform: translateX(-50%) rotate(6deg); }
.world--carnival .stars { background-size: 28px 41px; }
.world--mint .contour-map { transform: rotate(5deg); }
.world--midnight .planet-stage { background-color: #10182a; }
.world--gold .planet-stage { box-shadow: inset 0 0 58px rgba(255,197,43,.11); }

@media (min-width: 761px) and (max-height: 720px) {
  .studio-signature { display: none; }
  .level-map { min-width: 112px; }
  .planet-button { width: clamp(170px, 29vh, 214px); }
  .generator-list { flex: 1 1 auto; }
}

@media (max-width: 760px) {
  .studio-signature { margin-bottom: 4px; }
  .world-heading { flex-wrap: wrap; }
  .level-map { order: 3; flex-basis: 100%; width: 100%; height: 34px; margin-inline: 7%; }
}

@media (max-width: 460px) {
  .scene-hud .brand-icon { width: 34px; height: 34px; }
  .scene-hud .brand-lockup h1 { font-size: 1rem; }
  .scene-hud .brand-lockup p { font-size: .31rem; }
  .level-map { gap: 0; min-width: 0; margin-inline: 4%; padding-inline: 8px; }
  .level-map::before,
  .level-map::after { right: 8px; left: 8px; }
  .level-map i { width: 6px; height: 6px; }
  .level-map i.done { width: 8px; height: 8px; }
  .level-map i.current { width: 21px; height: 21px; }
  .planet-button { width: 185px; }
}

/* Approved planet language: keep the original clean, flat 2D face. */
.field-mark b { font-size: .55rem; }
.field-mark b::before,
.field-mark b::after { content: none; }
.field-mark span { display: block; }

.planet {
  overflow: hidden;
  border: 4px solid #111510;
  border-radius: 50%;
  background: #b8ec2e url("assets/game/tapterra-planet-base-v1.png") center / cover no-repeat;
  box-shadow: inset -12px -14px 0 rgba(0,0,0,.08), 0 9px 0 #0d120d, 0 18px 42px color-mix(in srgb, var(--accent) 24%, transparent);
  filter: var(--world-filter, none);
}
.planet-button:active .planet { filter: var(--world-filter, none) brightness(1.08); }
.planet-button.popped .planet-system { animation: planetPop 170ms ease-out; }

.world--moss { --world-filter: brightness(1); }
.world--berry { --world-filter: hue-rotate(285deg) saturate(1.2) brightness(1.02); }
.world--lemon { --world-filter: hue-rotate(34deg) saturate(1.12) brightness(1.08); }
.world--puddle { --world-filter: hue-rotate(95deg) saturate(.9) brightness(1.03); }
.world--peach { --world-filter: hue-rotate(305deg) saturate(.78) brightness(1.18); }
.world--coral { --world-filter: hue-rotate(126deg) saturate(1.12); }
.world--cloud { --world-filter: hue-rotate(86deg) saturate(.32) brightness(1.34); }
.world--honey { --world-filter: hue-rotate(44deg) saturate(1.32) brightness(1.06); }
.world--carnival { --world-filter: hue-rotate(300deg) saturate(1.45); }
.world--mint { --world-filter: hue-rotate(72deg) saturate(.62) brightness(1.12); }
.world--candy { --world-filter: hue-rotate(292deg) saturate(1.35) brightness(1.13); }
.world--star { --world-filter: hue-rotate(150deg) saturate(1.1) brightness(.92); }
.world--jelly { --world-filter: hue-rotate(202deg) saturate(1.15); }
.world--midnight { --world-filter: hue-rotate(148deg) saturate(.8) brightness(.68); }
.world--gold { --world-filter: hue-rotate(42deg) saturate(1.42) brightness(1.1); }

/* Fifteen silhouettes, not fifteen colour filters. These pieces sit around
   the approved flat planet art and change the readable shape of each level. */
.planet { z-index: 2; }
.world-ring,
.world-moon,
.world-satellite,
.world-belt { position: absolute; display: none; pointer-events: none; }
.world-ring {
  right: -18%;
  left: -18%;
  z-index: 1;
  height: 35%;
  border: 11px solid color-mix(in srgb, var(--accent) 82%, #f7e8a6);
  border-radius: 50%;
  box-shadow: 0 3px 0 rgba(20,13,25,.32);
  transform: rotate(-13deg);
}
.world-ring--back { top: 33%; }
.world-ring--front { top: 33%; z-index: 3; clip-path: inset(52% -20% -30% -20%); }
.world-moon {
  z-index: 4;
  width: 27%;
  aspect-ratio: 1;
  border: 4px solid #191522;
  border-radius: 50%;
  background: var(--moon-color, #f4e9bd);
  box-shadow: inset -7px -7px 0 rgba(0,0,0,.1), 3px 4px 0 rgba(0,0,0,.25);
}
.world-moon::before,
.world-moon::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  background: rgba(255,255,255,.23);
}
.world-moon::before { top: 17%; left: 21%; width: 23%; height: 23%; }
.world-moon::after { right: 17%; bottom: 21%; width: 15%; height: 15%; }
.world-moon--one { top: -7%; right: -10%; }
.world-moon--two { bottom: 4%; left: -17%; width: 19%; }
.world-satellite {
  top: 5%;
  left: -15%;
  z-index: 4;
  width: 22%;
  aspect-ratio: 1;
  border: 4px solid #191522;
  border-radius: 28% 52% 35% 48%;
  background: var(--accent);
  box-shadow: 3px 4px 0 rgba(0,0,0,.25);
  transform: rotate(-12deg);
}
.world-satellite::before,
.world-satellite::after {
  position: absolute;
  top: 38%;
  width: 45%;
  height: 24%;
  border: 3px solid #191522;
  content: "";
  background: color-mix(in srgb, var(--accent-strong) 65%, #d8f2ea);
}
.world-satellite::before { right: 83%; }
.world-satellite::after { left: 83%; }
.world-belt {
  right: -8%;
  bottom: 18%;
  left: -8%;
  z-index: 3;
  height: 20%;
  border-top: 9px dotted color-mix(in srgb, var(--accent) 70%, #f7efd4);
  border-radius: 50%;
  transform: rotate(8deg);
}

.world--berry .world-moon--one { display: block; --moon-color: #ff6c6b; top: 1%; right: -14%; }
.world--berry .world-moon--one::after { width: 28%; height: 15%; border-radius: 70% 10% 70% 10%; background: #6cbd44; transform: rotate(-30deg); }

.world--lemon .world-ring { display: block; border-width: 5px; border-style: dashed; }
.world--lemon .planet { transform: scale(.94); }

.world--puddle .world-moon--one,
.world--puddle .world-moon--two { display: block; --moon-color: #aeefff; border-color: #214c72; }
.world--puddle .world-moon--one { width: 20%; top: 2%; right: -12%; }
.world--puddle .world-moon--two { width: 14%; bottom: 16%; left: -13%; }
.world--puddle .planet { border-radius: 48% 52% 46% 54% / 55% 45% 56% 44%; transform: scale(.96,1.03); }

.world--peach .world-moon--one { display: block; --moon-color: #ffb28f; top: 8%; right: -17%; width: 24%; }
.world--peach .world-belt { display: block; border-top-style: solid; border-top-width: 5px; opacity: .7; }

.world--coral .world-ring { display: block; border-color: #5adbd3; border-width: 9px; transform: rotate(17deg); }
.world--coral .world-moon--two { display: block; --moon-color: #ff856e; bottom: -1%; left: -14%; }
.world--coral .world-moon--two { clip-path: polygon(50% 0,61% 34%,98% 35%,68% 56%,79% 94%,50% 72%,20% 94%,31% 56%,2% 35%,39% 34%); border-radius: 0; }

.world--cloud .world-belt { display: block; bottom: 22%; height: 25%; border-top: 16px dotted #eef5ff; filter: drop-shadow(0 4px 0 #8c9bc8); }
.world--cloud .world-moon--one { display: block; --moon-color: #f8fbff; top: -4%; right: -10%; width: 18%; }
.world--cloud .planet { border-radius: 45% 55% 48% 52% / 53% 46% 54% 47%; }

.world--honey .world-satellite { display: block; top: 3%; left: -14%; background: #ffc43d; clip-path: polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%); border-radius: 0; }
.world--honey .world-ring { display: block; border-color: #ffb91f; border-width: 6px; border-style: dotted; }

.world--carnival .world-ring { display: block; border-width: 10px; border-color: #f4e4b5; border-style: dashed; transform: rotate(-21deg); }
.world--carnival .world-moon--one { display: block; --moon-color: #ff6d6d; width: 18%; top: -5%; right: -8%; border-radius: 52% 48% 48% 52% / 58% 58% 42% 42%; }
.world--carnival .world-moon--two { display: block; --moon-color: #55c8ba; width: 15%; bottom: 3%; left: -10%; }

.world--mint .world-satellite { display: block; top: 2%; left: -17%; border-radius: 8%; background: #a8d9bd; transform: rotate(10deg); }
.world--mint .world-satellite::before,
.world--mint .world-satellite::after { height: 34%; background: repeating-linear-gradient(90deg,#71a88f 0 4px,#d8eddf 4px 8px); }
.world--mint .world-moon--one { display: block; --moon-color: #a9cfc0; top: 10%; right: -13%; width: 17%; border-radius: 12%; }

.world--candy .world-ring { display: block; border-color: #ff89b4; border-width: 9px; border-style: double; transform: rotate(11deg); }
.world--candy .world-moon--one { display: block; --moon-color: #fff0cd; top: -7%; right: -12%; width: 19%; }
.world--candy .world-moon--one::before { inset: 17%; width: auto; height: auto; border: 4px solid #ff6fa6; background: transparent; }

.world--star .world-ring { display: block; border-color: #ffdf62; border-width: 6px; transform: rotate(-7deg); }
.world--star .world-moon--one,
.world--star .world-moon--two { display: block; --moon-color: #ffd75b; clip-path: polygon(50% 0,61% 35%,98% 38%,68% 58%,79% 96%,50% 73%,20% 96%,31% 58%,2% 38%,39% 35%); border-radius: 0; }
.world--star .world-moon--one { width: 20%; right: -8%; }
.world--star .world-moon--two { width: 14%; left: -7%; bottom: 2%; }

.world--jelly .world-ring { display: block; border-color: #bf8cff; border-width: 8px; transform: rotate(18deg); }
.world--jelly .world-belt { display: block; border-color: #efb7ff; animation: jellyBelt 2.1s ease-in-out infinite; }
.world--jelly .planet { border-radius: 48% 52% 45% 55% / 43% 46% 58% 53%; animation: jellyPlanet 2.5s ease-in-out infinite; }

.world--midnight .world-moon--one,
.world--midnight .world-moon--two,
.world--midnight .world-satellite { display: block; }
.world--midnight .world-moon--one { --moon-color: #ffe477; width: 23%; top: -4%; right: -14%; clip-path: circle(50% at 50% 50%); }
.world--midnight .world-moon--one::after { right: -2%; bottom: 9%; width: 75%; height: 75%; background: #10182a; }
.world--midnight .world-moon--two { --moon-color: #8aa8ff; width: 12%; left: -10%; bottom: 8%; }
.world--midnight .world-satellite { width: 10%; top: 11%; left: 3%; border: 0; border-radius: 50%; background: #fff2a0; box-shadow: 0 0 15px #fff2a0; }
.world--midnight .world-satellite::before,
.world--midnight .world-satellite::after { display: none; }

.world--gold .world-ring { display: block; border-width: 12px; border-color: #ffd348; transform: rotate(-16deg); box-shadow: 0 0 18px rgba(255,204,54,.4), 0 4px 0 #803b25; }
.world--gold .world-moon--one,
.world--gold .world-moon--two,
.world--gold .world-satellite { display: block; }
.world--gold .world-moon--one { --moon-color: #ff7f6a; width: 16%; top: -8%; right: -8%; }
.world--gold .world-moon--two { --moon-color: #5ed6c6; width: 13%; bottom: 1%; left: -8%; }
.world--gold .world-satellite { width: 15%; top: 2%; left: -10%; border: 0; clip-path: polygon(50% 0,61% 35%,98% 38%,68% 58%,79% 96%,50% 73%,20% 96%,31% 58%,2% 38%,39% 35%); background: #fff19a; }
.world--gold .world-satellite::before,
.world--gold .world-satellite::after { display: none; }

@keyframes jellyPlanet { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025,.975); } }
@keyframes jellyBelt { 0%,100% { transform: rotate(8deg) scaleX(.95); } 50% { transform: rotate(3deg) scaleX(1.05); } }

/* 1.5 — each planet is bought, restarted and grown from barren to alive. */
.factory-heading::after { content: "✦"; }
.tap-copy { z-index: 6; }

.launch-card { grid-template-columns: 56px minmax(138px,.75fr) minmax(90px,1fr) auto; align-items: center; }
.next-world-preview {
  position: relative;
  width: 52px;
  height: 52px;
  margin-inline: 1px 4px;
  pointer-events: none;
}
.next-world-preview[hidden] { display: none; }
.next-world-preview .planet {
  position: absolute;
  inset: 7px;
  width: auto;
  height: auto;
  filter: grayscale(1) brightness(.13) !important;
  box-shadow: 0 4px 0 #070a07;
  transform: none;
}
.next-world-preview > .world-ring,
.next-world-preview > .world-moon,
.next-world-preview > .world-satellite,
.next-world-preview > .world-belt { filter: grayscale(1) brightness(.12) !important; }
.next-world-preview .world-ring { right: -15%; left: -15%; border-width: 4px; }
.next-world-preview .world-moon,
.next-world-preview .world-satellite { border-width: 2px; }
.preview-lock {
  position: absolute;
  right: -3px;
  bottom: -2px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 2px solid #131712;
  border-radius: 50%;
  color: #171a15;
  background: var(--accent);
  box-shadow: 2px 2px 0 rgba(0,0,0,.45);
  font-size: .7rem;
}

.planet { filter: var(--world-filter, none) var(--growth-filter, none); transition: filter 420ms ease, border-radius 420ms ease; }
.planet-button:active .planet { filter: var(--world-filter, none) var(--growth-filter, none) brightness(1.08); }
.world-panel[data-growth-stage="0"] { --growth-filter: grayscale(.72) sepia(.72) saturate(.55) brightness(.68); }
.world-panel[data-growth-stage="1"] { --growth-filter: grayscale(.38) sepia(.34) saturate(.78) brightness(.82); }
.world-panel[data-growth-stage="2"] { --growth-filter: saturate(.92) brightness(.94); }
.world-panel[data-growth-stage="3"] { --growth-filter: saturate(1.08) brightness(1.04); }
.planet::after { display:none !important; }

.generator-card { display: grid; grid-template-columns: 43px minmax(64px,1fr) 36px 82px; align-items: center; }
.module-icon { grid-column: 1; grid-row: 1 / span 2; place-self: center; transform: none; }
.module-copy { grid-column: 2; grid-row: 1; }
.owned-badge { grid-column: 3; grid-row: 1; }
.buy-button { grid-column: 4; grid-row: 1; }
.language-button { min-width: 34px; width: auto; padding-inline: 7px; }
.language-button b { font-size: .53rem; letter-spacing: .04em; }
.language-modal-card,
.settings-modal-card { position: relative; width: min(610px,100%); max-height: min(88vh,720px); overflow-y: auto; text-align: left; }
#language-modal { z-index: 82; }
#settings-modal { z-index: 72; }
#command-modal,#welcome-modal,#core-modal { z-index: 70; }
.language-modal-card > .modal-core,
.language-modal-card > .eyebrow,
.language-modal-card > h2,
.settings-modal-card > .modal-core,
.settings-modal-card > .eyebrow,
.settings-modal-card > h2 { text-align: center; }
.settings-modal-card > .modal-core {
  display:block;
  width:auto;
  height:auto;
  margin:0 auto 5px;
  border:0;
  border-radius:0;
  color:#252b23;
  background:transparent;
  box-shadow:none;
  font-size:2rem;
  line-height:1;
  transform:none;
}
.settings-modal-card > .eyebrow { display:block; color:#53604c; font-size:.55rem; }
.language-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 18px; }
.language-option {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px 12px 5px 9px;
  color: #252a23;
  background: rgba(255,255,255,.27);
  cursor: pointer;
  text-align: left;
}
.language-option b { color: var(--accent); font-size: .58rem; }
.language-option span { font-size: .65rem; line-height: 1.2; overflow-wrap: anywhere; }
.language-option.active { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 13%,transparent); }

.settings-list { display: grid; gap: 7px; margin: 18px 0; }
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(31,35,31,.18);
  border-radius: 4px 13px 4px 9px;
  color: #252a23;
  background: rgba(255,255,255,.24);
  cursor: pointer;
  text-align: left;
}
.setting-row span { min-width: 0; }
.setting-row b,.setting-row small { display:block; }
.setting-row b { font-size: .76rem; }
.setting-row small { margin-top: 2px; color: var(--muted); font-size: .57rem; line-height:1.25; }
.setting-row em { flex: 0 0 auto; min-width: 52px; padding: 5px 8px; border: 2px solid #152014; border-radius: 3px 8px 3px 7px; color:#152014; background:var(--accent); font-size:.56rem; font-style:normal; font-weight:900; text-align:center; }
.setting-row.is-off em { color:#bdbdad; background:#444a42; }
.save-tools { padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.17); }
.save-tools p { margin: 5px 0 10px; font-size: .67rem; }
.danger-button { padding: 9px 12px; border: 1px solid #e66c64; border-radius: 3px 10px 3px 7px; color:#ffd8d4; background:rgba(199,62,54,.15); cursor:pointer; font-weight:850; }
.reset-confirm-row { margin-top:10px; padding:11px; border:1px solid rgba(230,108,100,.45); background:rgba(199,62,54,.08); }
.reset-confirm-row[hidden] { display:none; }
.reset-confirm-row strong { display:block; margin-bottom:9px; font-size:.7rem; }
.reset-confirm-row > div { display:flex; gap:7px; }
.reset-confirm-row button { flex:1; }

html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .planet-stage,
html[dir="rtl"] .level-map,
html[dir="rtl"] .bloomline-route,
html[dir="rtl"] .next-world-preview { direction:ltr; }
html[dir="rtl"] .modal-close { right:auto; left:12px; }
html[dir="rtl"] .language-option,
html[dir="rtl"] .setting-row,
html[dir="rtl"] .factory-heading,
html[dir="rtl"] .launch-copy { text-align:right; }

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }

@media (max-width:760px) {
  .launch-card { grid-template-columns: 48px minmax(0,1fr) auto; }
  .next-world-preview { width:44px; height:44px; }
  .launch-progress { grid-column:2 / 4; width:100%; }
  .language-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .language-modal-card,.settings-modal-card { max-height:92vh; padding:22px 18px; }
}

@media (max-width:430px) {
  .language-list { grid-template-columns:1fr; }
  .generator-card { grid-template-columns:43px minmax(58px,1fr) 32px 76px; }
  .setting-row { padding:9px; }
}

@media (min-width:761px) and (max-height:620px) {
  .world-panel { overflow-y:auto; }
  .language-modal-card,.settings-modal-card { max-height:94vh; }
}

/* Planet scouting lives inside the scene; no lower "next planet" card. */
.launch-card { display:none !important; }
.world-nav {
  position:absolute;
  top:53%;
  z-index:18;
  display:grid;
  place-items:center;
  width:46px;
  height:58px;
  border:0;
  border-radius:0;
  color:var(--accent);
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  transform:translateY(-50%);
}
.world-nav span { font-size:1.65rem; font-weight:900; line-height:.7; text-shadow:2px 3px 0 rgba(0,0,0,.58); transition:transform 140ms ease; }
.world-nav:not(:disabled):hover span { transform:scale(1.13); }
.world-nav--previous { left:5%; }
.world-nav--next { right:5%; }
.world-nav:disabled { color:#778076; opacity:.36; cursor:default; }
.world-nav[hidden] { display:none; }
.orbit-unlock-button {
  position:absolute;
  bottom:11%;
  left:50%;
  z-index:20;
  min-width:164px;
  min-height:40px;
  padding:8px 15px;
  border:3px solid #111510;
  border-radius:3px 11px 4px 8px;
  color:#152014;
  background:var(--accent);
  box-shadow:4px 5px 0 rgba(0,0,0,.45);
  font-size:.7rem;
  font-weight:950;
  transform:translateX(-50%) rotate(-1deg);
  cursor:pointer;
}
.orbit-unlock-button[hidden] { display:none; }
.orbit-unlock-button:disabled { color:#20231d; background:#efd978; opacity:1; }
.is-locked-preview .planet { filter:grayscale(1) brightness(0) !important; box-shadow:0 9px 0 #050805,0 0 44px rgba(255,255,255,.06); }
.is-locked-preview .planet::after,
.is-locked-preview .planet-sheen { opacity:0 !important; }
.is-locked-preview .world-ring,
.is-locked-preview .world-moon,
.is-locked-preview .world-satellite,
.is-locked-preview .world-belt { filter:grayscale(1) brightness(0) !important; box-shadow:none; }
.is-locked-preview .bloomline,
.is-locked-preview .combo-pill { opacity:0; pointer-events:none; }
.is-locked-preview .planet-glow { opacity:.13; filter:grayscale(1); }
.is-locked-preview .world-bonus strong { color:#d5d8cf; }
.level-map i.preview { width:21px; height:21px; border:3px solid #d5d8cf; background:#242b25; box-shadow:0 0 0 4px rgba(255,255,255,.08); }
.level-map i.preview::after { color:#eef1e9; content:"?"; }

.tap-copy { opacity:0; transform:translateY(7px) rotate(-1.5deg) scale(.94); transition:opacity 180ms ease,transform 180ms ease; pointer-events:none; }
.tap-copy.is-visible { opacity:1; transform:translateY(0) rotate(-1.5deg) scale(1); }
.is-locked-preview .tap-copy { opacity:0 !important; }

.space-jump {
  position:absolute;
  inset:0;
  z-index:16;
  opacity:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.78) 0 2px,transparent 3px),
    radial-gradient(circle at 78% 19%,rgba(255,255,255,.62) 0 1px,transparent 2px),
    radial-gradient(circle at 67% 72%,rgba(255,255,255,.72) 0 2px,transparent 3px),
    radial-gradient(circle at 27% 76%,rgba(255,255,255,.54) 0 1px,transparent 2px),
    radial-gradient(circle at 49% 36%,rgba(255,255,255,.4) 0 2px,transparent 3px),
    radial-gradient(circle at 50% 50%,#17221c 0,#0b110d 62%,#070b09 100%);
}
.planet-stage.space-travel .space-jump {
  animation:spaceJump 760ms ease-in-out;
}
.planet-stage.space-travel .planet-system { animation:worldDive 760ms cubic-bezier(.55,.02,.23,1); }
.planet-stage.space-travel .world-nav,
.planet-stage.space-travel .orbit-unlock-button { opacity:0; pointer-events:none; }
.planet-stage.space-arrival .planet-glow { animation:arrivalGlow 420ms ease-out; }
.planet-stage.space-unlock::after { animation:unlockFlash 900ms ease-out; }
@keyframes spaceJump { 0%,100%{opacity:0;transform:scale(.78)} 36%,64%{opacity:.72;transform:scale(1.08)} }
@keyframes worldDive {
  0%{opacity:1;transform:scale(1);filter:blur(0) saturate(1) hue-rotate(0)}
  34%{opacity:.7;transform:scale(.72) rotate(-1.5deg);filter:blur(1px) saturate(.76) hue-rotate(18deg)}
  50%{opacity:.12;transform:scale(.28) rotate(2deg);filter:blur(5px) saturate(1.45) hue-rotate(88deg)}
  66%{opacity:.62;transform:scale(.74) rotate(.8deg);filter:blur(1px) saturate(1.2) hue-rotate(-16deg)}
  100%{opacity:1;transform:scale(1);filter:blur(0) saturate(1) hue-rotate(0)}
}
@keyframes arrivalGlow { 0%{opacity:.15;transform:scale(.42)} 55%{opacity:.85;transform:scale(1.2)} 100%{opacity:.35;transform:scale(1)} }
@keyframes unlockFlash { 0%{opacity:0} 28%{opacity:.95;background:radial-gradient(circle at 50% 55%,#fff8be,transparent 42%)} 100%{opacity:0} }

/* Readability pass: never hide information merely because it is unavailable. */
button:disabled { opacity:.64; }
.danger-button { min-height:38px; color:#721d19; background:#f0bbb5; border-color:#98352f; font-size:.68rem; text-shadow:none; }
.danger-button:hover { color:#55100d; background:#f5cbc6; }
.setting-row small { color:#566052; font-size:.61rem; }
.save-tools p { color:#4e584b; font-size:.7rem; }
.reset-confirm-row { color:#491613; background:#f3d1cd; }
.reset-confirm-row .secondary-button { color:#343a31; background:#e2dfd2; }
.eyebrow { line-height:1.25; }
.route-node small { color:#b7c0b1; font-size:.46rem; line-height:1.1; }
.route-node.active small { color:#eef2e7; }
.bloomline-heading strong { font-size:.62rem; line-height:1.2; }
.module-copy span { color:#596355; font-size:.59rem; line-height:1.25; }
.owned-badge small { color:#586154; font-size:.46rem; }
.boost-copy small { color:#566052; font-size:.54rem; line-height:1.2; }
.buy-button,.boost-button,.core-card button { line-height:1.15; }
.language-option span { color:#252a23; font-size:.68rem; }

@media (max-width:520px) {
  .world-nav { top:55%; width:38px; height:50px; }
  .world-nav--previous { left:2%; }
  .world-nav--next { right:2%; }
  .world-nav span { font-size:1.7rem; }
  .orbit-unlock-button { bottom:12%; min-width:150px; }
}

.has-party-cursor,
.has-party-cursor button:not(:disabled) { cursor:url("assets/game/tapterra-party-pointer.png") 14 14,pointer; }
.has-sunbeam-cursor,
.has-sunbeam-cursor button:not(:disabled) { cursor:url("assets/game/tapterra-sunbeam-cursor-64.png") 7 7,pointer; }
.has-confetti-trail .tap-spark:nth-child(4n+1) { --spark-color:#ff6f78 !important; }
.has-confetti-trail .tap-spark:nth-child(4n+2) { --spark-color:#5bcfc2 !important; }
.has-confetti-trail .tap-spark:nth-child(4n+3) { --spark-color:#ffd34f !important; }
.has-night-trail .tap-burst-ring { border-color:#b99cff; box-shadow:0 0 14px #7354c8; }

/* The ring has a rear arc and a foreground arc; the face is no longer used
   as a reason to flatten the whole ring behind the planet. */
.tap-copy { bottom:-12%; }

/* --------------------------------------------------------------------------
   Alignment system — one final geometry layer for every responsive mode.
   Decorative planet artwork may stay asymmetric; controls and information do not.
   -------------------------------------------------------------------------- */
html { scrollbar-gutter: stable; }
body.has-open-modal { overflow: hidden; }

.scene-hud,
.scene-hud .brand,
.scene-hud .top-actions { align-items: center; }
.scene-hud .brand,
.scene-hud .brand-lockup,
.scene-hud .top-actions { min-width: 0; }
.scene-hud .brand-icon {
  transform: none;
  border-radius: 50%;
}
.brand-lockup h1 {
  direction: ltr;
  white-space: nowrap;
}
.brand-lockup h1 span,
.brand-lockup h1 em { transform: none; }
.scene-hud .command-button,
.scene-hud .streak-chip,
.scene-hud .icon-button {
  transform: none;
  clip-path: none;
}
.scene-hud .command-button { align-items: center; }
.scene-hud .top-actions { flex-wrap: nowrap; }

.scene-stats { align-items: stretch; }
.scene-stats .stat-card:nth-child(n) {
  grid-template-rows: minmax(1.9em, auto) auto;
  align-content: center;
  min-width: 0;
  transform: none;
  clip-path: none;
  border-radius: 8px;
}
.scene-stats .stat-card > span {
  min-height: 1.9em;
  line-height: 1.05;
}
.scene-stats .stat-card strong {
  min-width: 0;
  overflow: visible;
  font-size: clamp(.67rem, 2.3vw, .84rem);
  line-height: 1.05;
  white-space: nowrap;
  overflow-wrap: normal;
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .scene-stats .stat-card strong { text-align: right; }

.world-heading {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) minmax(210px, 2.5fr) minmax(96px, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 3px;
}
.world-heading > div:first-child {
  min-width: 0;
  grid-column: 1;
}
.world-heading .level-map {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  margin: 0;
}
.world-bonus {
  grid-column: 3;
  justify-self: end;
  text-align: end;
}

.planet-button { transform: none; }
.world-nav { top: 50%; }
.planet-stage .world-moon--one { top: 0; }
.tap-copy {
  bottom: -8%;
  border-radius: 4px;
  clip-path: none;
  transform: translateY(6px) scale(.96);
}
.tap-copy.is-visible { transform: none; }
.combo-pill { bottom: 12px; }
.combo-pill.active { transform: none; }

.world-panel,
.factory-panel {
  border-width: 2px;
  box-shadow: 4px 5px 0 rgba(7,10,7,.35);
}
.factory-heading::after { display: none; }
.buy-modes,
.owned-badge { transform: none; }
.generator-list { scrollbar-gutter: stable; }
.generator-card { align-items: center; }
.module-icon {
  grid-row: 1;
  align-self: center;
}
.module-copy,
.boost-copy { min-width: 0; }
.owned-badge,
.buy-button b,
.boost-button,
.core-card button {
  direction: ltr;
  unicode-bidi: isolate;
}

.boost-list { align-items: stretch; }
.boost-card:nth-child(n) {
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 68px;
  transform: none;
}
.boost-card .boost-icon { grid-column: 1; grid-row: 1; }
.boost-card .boost-copy { grid-column: 2; grid-row: 1; }
.boost-card .boost-button {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-height: 22px;
}
.core-card {
  align-items: center;
  transform: none;
  clip-path: none;
}
.orbit-unlock-button { transform: translateX(-50%); }

.modal {
  overflow: hidden;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
.modal-card,
.language-modal-card,
.settings-modal-card,
.command-modal-card {
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-width: 2px;
}
.modal button:focus-visible {
  outline-width: 2px;
  outline-offset: 1px;
}
.modal-core {
  border-radius: 50%;
  transform: none;
}
.language-modal-card > .modal-core,
.settings-modal-card > .modal-core {
  display: block;
  width: auto;
  height: auto;
  margin: 0 auto 5px;
  border: 0;
  border-radius: 0;
  color: #252b23;
  background: transparent;
  box-shadow: none;
  font-size: 2rem;
  line-height: 1;
  transform: none;
}
.language-option {
  border-radius: 8px;
  text-align: start;
}
.language-option b {
  direction: ltr;
  unicode-bidi: isolate;
}
.setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: 8px;
}
.setting-row em { min-width: 52px; }

@media (max-width: 1040px) {
  .scene-hud .command-button {
    width: 36px;
    min-width: 36px;
    padding: 4px;
  }
  .scene-hud .command-button b,
  .scene-hud .streak-chip small { display: none; }
  .scene-hud .streak-chip { min-width: 58px; }
}

@media (max-width: 760px) {
  .game-grid { gap: 18px; }
  .world-panel,
  .factory-panel { box-shadow: 0 4px 0 rgba(7,10,7,.34); }
  .world-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
  }
  .world-heading > div:first-child { grid-column: 1; grid-row: 1; }
  .world-bonus { grid-column: 2; grid-row: 1; }
  .world-heading .level-map {
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
    min-width: 0;
    margin: 4px 8px 0;
  }
  .factory-panel,
  .generator-list { overflow: visible; }
  .modal-actions { flex-direction: column; }
  .modal-actions .primary-button,
  .modal-actions .secondary-button { width: 100%; }
}

@media (max-width: 430px) {
  .scene-stats .stat-card,
  .scene-stats .stat-card--energy { padding-inline: 5px; }
  .scene-stats .stat-card > span {
    min-height: 2.05em;
    font-size: .41rem;
  }
  .scene-stats .stat-card strong { font-size: .67rem; }
  .generator-card { grid-template-columns: 43px minmax(0, 1fr) 32px 76px; }
  .module-icon { grid-row: 1; }
  .language-list { grid-template-columns: 1fr; }
}

@media (min-width: 761px) and (max-height: 720px) {
  .game-shell { height: 100dvh; padding: 4px 0 8px; }
  .game-grid { height: calc(100dvh - 16px); }
  .world-panel,
  .factory-panel {
    height: 100%;
    overflow: hidden;
    box-shadow: 3px 4px 0 rgba(7,10,7,.32);
  }
  .generator-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .planet-button { width: clamp(160px, 29vh, 205px); }
}

@media (min-width: 761px) and (max-height: 500px) {
  .planet-button { width: clamp(132px, 27vh, 148px); }
  .tap-copy { bottom: -7%; padding-block: 6px; }
  .generator-card { min-height: 50px; padding-block: 4px; }
}

html:lang(ar) .eyebrow,
html:lang(fa) .eyebrow,
html:lang(hi) .eyebrow,
html:lang(ar) .route-node small,
html:lang(fa) .route-node small,
html:lang(hi) .route-node small {
  letter-spacing: 0;
  line-height: 1.35;
}

/* Planet motion lives inside the tap/travel layer so every orbital part stays together. */
.planet-idle {
  position: absolute;
  inset: 0;
  transform-origin: 50% 56%;
  animation: planetIdle 6.2s cubic-bezier(.42, 0, .28, 1) infinite;
  will-change: transform;
}

.world--cloud .planet-idle,
.world--puddle .planet-idle { animation-duration: 6.8s; }

.world--honey .planet-idle,
.world--carnival .planet-idle { animation-duration: 5.7s; }

.world--jelly .planet-idle { animation-duration: 7.1s; }

body.has-open-modal .planet-idle { animation-play-state: paused; }

@keyframes planetIdle {
  0%, 100% { transform: translate3d(0, 1px, 0) rotate(-.22deg) scale(1); }
  38% { transform: translate3d(0, -3px, 0) rotate(.18deg) scale(1.006); }
  68% { transform: translate3d(0, -1px, 0) rotate(.28deg) scale(1.003); }
}

/* 1.5.6 — strict optical alignment for HUD, tracks and shop rows. */
.scene-hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
}

.scene-hud .brand { min-width: 0; }
.scene-hud .brand-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}
.scene-hud .brand-lockup { min-width: 0; }
.scene-hud .top-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: end;
  gap: 6px;
}
.scene-hud .command-button,
.scene-hud .icon-button {
  box-sizing: border-box;
  height: 34px;
  min-height: 34px;
  margin: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(236,232,216,.13), 0 2px 0 rgba(0,0,0,.28);
  transform: none;
}
.scene-hud .icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  padding: 0;
  line-height: 1;
}
.scene-hud .language-button {
  width: 34px;
  min-width: 34px;
  padding: 0;
}
.scene-hud .language-button b { line-height: 1; }
.scene-hud .command-button {
  display: flex;
  width: auto;
  min-width: 94px;
  justify-content: flex-start;
  gap: 6px;
  padding: 4px 9px 4px 5px;
}
.scene-hud .command-button span {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  line-height: 1;
}
.scene-hud .command-button b {
  display: block;
  line-height: 1;
  white-space: nowrap;
}

.scene-stats .stat-card:nth-child(n) {
  grid-template-rows: 2.1em 1.1em;
}
.scene-stats .stat-card > span {
  display: flex;
  min-height: 0;
  align-items: flex-end;
}
.scene-stats .stat-card strong {
  align-self: end;
  line-height: 1.1;
}

.world-heading > div:first-child,
.world-bonus { align-self: end; }
.world-heading h2,
.world-bonus strong { line-height: 1; }

.level-map {
  --track-inset: calc(3.3333% + 11.2px);
}
.level-map::before,
.level-map::after {
  right: var(--track-inset);
  left: var(--track-inset);
}
.bloomline { padding-inline: 10px; }

.factory-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.buy-modes { justify-self: end; }
.generator-list { scrollbar-gutter: auto; }
.module-icon { transform: none; }
.boost-card:nth-child(n) { grid-template-rows: minmax(28px, 1fr) 22px; }
.modal-card,
.language-modal-card,
.settings-modal-card,
.command-modal-card { scrollbar-gutter: stable both-edges; }

@media (max-width: 1040px) {
  .level-map i.current,
  .level-map i.preview {
    width: 17px;
    height: 17px;
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(0,0,0,.3);
  }
}

@media (max-width: 520px) {
  .scene-hud .command-button {
    width: 34px;
    min-width: 34px;
    justify-content: center;
    padding: 4px;
  }
  .scene-hud .command-button b { display: none; }
}

@media (max-width: 430px) {
  .scene-hud { column-gap: 5px; }
  .scene-hud .brand { gap: 5px; }
  .scene-hud .brand-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
  .level-map { --track-inset: calc(3.3333% + 7.47px); }
  .tap-copy { bottom: -3%; }
  .generator-card { grid-template-columns: 43px minmax(0, 1fr) 34px 81px; }
  .owned-badge,
  .buy-button {
    width: 100%;
    min-width: 0;
  }
  .factory-heading { align-items: center; }
}

@media (min-width: 761px) and (max-height: 720px) {
  html { scrollbar-gutter: auto; }
}

/* 1.5.7 — portal layout is a true 16:9 game board; portrait mobile stays separate. */
@media (min-width: 761px) and (orientation: landscape) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
  }
  body {
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .game-shell {
    width: min(1280px, calc(100vw - 14px));
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 8px);
    padding: 0;
    aspect-ratio: 16 / 9;
  }
  .game-grid {
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 38%);
    gap: 10px;
    align-items: stretch;
  }
  .world-panel,
  .factory-panel {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .generator-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .planet-stage {
    flex: 1 1 auto;
    min-height: 0;
    margin-block: 3px;
  }
  .planet-button { width: clamp(152px, 31vh, 225px); }
  .scene-stats .stat-card > span { font-size: .54rem; }
  .tap-copy {
    bottom: -9%;
    width: max-content;
    min-width: max-content;
  }
  .tap-copy b { white-space: nowrap; }
  .studio-signature { display: none; }
}

@media (min-width: 761px) and (orientation: landscape) and (max-height: 600px) {
  .scene-hud .brand-lockup p { display: none; }
  .generator-card {
    min-height: 54px;
    padding-block: 5px;
  }
}

@media (min-width: 761px) and (orientation: landscape) and (max-height: 500px) {
  .generator-card {
    min-height: 50px;
    padding-block: 4px;
  }
  .tap-copy {
    bottom: -10%;
    padding: 5px 10px;
  }
  .tap-copy b {
    font-size: .82rem;
    letter-spacing: .08em;
  }
  .tap-copy small {
    font-size: .36rem;
    letter-spacing: .08em;
  }
}

/* 1.5.9 — the only recurring ad surface is an optional in-world courier.
   It never pauses play and it does not use the visual language of a web modal. */
.reward-offer {
  --offer-progress: 1;
  position: absolute;
  top: clamp(72px, 23%, 98px);
  right: 10px;
  z-index: 15;
  width: 210px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(34px) rotate(.4deg);
  transition: opacity 220ms ease, transform 420ms cubic-bezier(.2,.78,.24,1);
}
.reward-offer[hidden] { display: none; }
.reward-offer.is-visible { opacity: 1; transform: translateX(0) rotate(.4deg); }
.reward-offer.is-leaving { opacity: 0; transform: translateX(14px) rotate(.4deg); transition-duration: 220ms; }
.reward-offer__button {
  display: grid;
  grid-template-columns: 45px minmax(0,1fr) 36px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 0;
  border: 0;
  color: #20281d;
  background: transparent;
  box-shadow: none;
  text-align: start;
  cursor: pointer;
  pointer-events: auto;
}
.reward-offer__pod {
  position: relative;
  z-index: 2;
  display: block;
  width: 42px;
  height: 35px;
  border: 3px solid #111710;
  border-radius: 55% 43% 48% 54%;
  background: linear-gradient(155deg, #fff4aa 0 20%, var(--accent) 21% 72%, var(--accent-strong) 73%);
  box-shadow: 3px 4px 0 rgba(0,0,0,.42);
  animation: courierPodIdle 2.4s ease-in-out infinite alternate;
}
.reward-offer__pod::before {
  position: absolute;
  top: 13px;
  right: 35px;
  width: 18px;
  height: 4px;
  border-radius: 50%;
  content: "";
  background: #f5c84a;
  box-shadow: -9px 4px 0 -1px rgba(245,200,74,.62);
  transform: rotate(-8deg);
}
.reward-offer__pod::after {
  position: absolute;
  top: 7px;
  left: 9px;
  width: 11px;
  height: 9px;
  border: 2px solid #111710;
  border-radius: 50%;
  content: "";
  background: #dff7e6;
}
.reward-offer__pod i {
  position: absolute;
  right: 5px;
  bottom: -7px;
  width: 12px;
  height: 8px;
  border: 2px solid #111710;
  border-radius: 90% 10% 90% 10%;
  background: #77c95e;
  transform: rotate(25deg);
}
.reward-offer__tag {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1px;
  min-height: 58px;
  margin-inline: -5px -3px;
  padding: 7px 8px 6px 12px;
  color: #232a20;
  background: #f2e6b7;
  box-shadow: 3px 4px 0 rgba(0,0,0,.4), inset 0 -1px rgba(90,72,28,.22);
  clip-path: polygon(2% 5%,97% 0,100% 88%,92% 100%,3% 95%,0 18%);
}
.reward-offer__tag::after {
  position: absolute;
  top: 5px;
  bottom: 6px;
  left: 5px;
  width: 2px;
  content: "";
  background: color-mix(in srgb, var(--accent-strong) 72%, #5d4e24);
  opacity: .82;
}
.reward-offer__tag small,
.reward-offer__tag strong,
.reward-offer__tag em { overflow: visible; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: auto; }
.reward-offer__tag small { color: #61583a; font-size: .55rem; font-weight: 900; letter-spacing: .07em; line-height: 1.15; }
.reward-offer__tag strong { font-size: .68rem; font-weight: 950; letter-spacing: .015em; line-height: 1.14; }
.reward-offer__tag strong bdi { unicode-bidi: isolate; }
.reward-offer__tag em { color: #8a351f; font-size: .56rem; font-style: normal; font-weight: 950; letter-spacing: .035em; line-height: 1.15; }
.reward-offer__count {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #f6f0d7;
  background: conic-gradient(var(--accent) calc(var(--offer-progress) * 1turn), #384238 0);
  box-shadow: 2px 3px 0 rgba(0,0,0,.45);
  font-variant-numeric: tabular-nums;
}
.reward-offer__count::before { position: absolute; inset: 4px; border-radius: 50%; content: ""; background: #172019; }
.reward-offer__count b { position: relative; z-index: 1; font-size: .72rem; line-height: 1; }
.reward-offer__count small { position: absolute; z-index: 1; right: 0; bottom: 3px; left: 0; color: #aeb8aa; font-size: .35rem; font-weight: 900; text-align: center; }
.reward-offer__track {
  display: block;
  overflow: hidden;
  width: calc(100% - 51px);
  height: 3px;
  margin-top: -3px;
  margin-inline-start: 47px;
  background: rgba(255,255,255,.13);
  pointer-events: none;
}
.reward-offer__track i { display: block; width: 100%; height: 100%; background: var(--accent); transition: width 90ms linear; }
@keyframes courierPodIdle { from { transform: translateY(-1px) rotate(-1deg); } to { transform: translateY(2px) rotate(1deg); } }

html[dir="rtl"] .reward-offer { right: auto; left: 10px; transform: translateX(-34px) rotate(-.4deg); }
html[dir="rtl"] .reward-offer.is-visible { transform: translateX(0) rotate(-.4deg); }
html[dir="rtl"] .reward-offer.is-leaving { transform: translateX(-14px) rotate(-.4deg); }
html[dir="rtl"] .reward-offer__tag { padding-inline: 12px 8px; }
html[dir="rtl"] .reward-offer__tag::after { right: 5px; left: auto; }
html[dir="rtl"] .reward-offer__tag { clip-path: polygon(3% 0,98% 5%,100% 18%,97% 95%,8% 100%,0 88%); }
.reward-offer__button:focus-visible { outline-offset: -2px; }

@media (min-width: 761px) and (max-height: 600px) {
  .reward-offer { top: 62px; right: 7px; width: 180px; }
  html[dir="rtl"] .reward-offer { right: auto; left: 7px; }
  .reward-offer__button { grid-template-columns: 40px minmax(0,1fr) 32px; min-height: 55px; }
  .reward-offer__pod { width: 37px; height: 31px; }
  .reward-offer__tag { min-height: 52px; padding-block: 6px; }
  .reward-offer__tag small { display: none; }
  .reward-offer__count { width: 32px; height: 32px; }
}

@media (max-width: 760px) {
  .reward-offer { top: 68px; right: 5px; width: 164px; }
  html[dir="rtl"] .reward-offer { right: auto; left: 5px; }
  .reward-offer__button { grid-template-columns: 37px minmax(0,1fr) 30px; min-height: 54px; }
  .reward-offer__pod { width: 35px; height: 30px; }
  .reward-offer__pod::before { right: 30px; width: 13px; }
  .reward-offer__tag { min-height: 51px; padding: 6px 6px 5px 10px; }
  .reward-offer__tag small { display: none; }
  .reward-offer__tag strong { font-size: .59rem; }
  .reward-offer__tag em { font-size: .53rem; }
  .reward-offer__count { width: 30px; height: 30px; }
  .reward-offer__track { width: calc(100% - 42px); margin-inline-start: 38px; }
}

.reduce-motion .reward-offer,
.reduce-motion .reward-offer__pod { animation: none !important; transition-property: opacity !important; transform: none !important; }

.command-modal-card .reward-options { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.command-modal-card .reward-option { min-width: 0; min-height: 64px; color: var(--ink); background: #dbe6bd; border: 0; box-shadow: 3px 3px 0 rgba(31,35,31,.16); }
.command-modal-card .reward-icon,
.command-modal-card .video-icon { color: #1f1f1f; background: var(--accent); }
.command-modal-card .reward-option b,
.command-modal-card .reward-option small { overflow: visible; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: auto; }
.command-modal-card .reward-option small { font-size: .62rem; line-height: 1.2; }

@media (max-width: 620px), (max-height: 560px) {
  .command-modal-card .reward-options { grid-template-columns: 1fr; }
  .command-modal-card .reward-option { min-height: 54px; }
}

/* Clear, single-purpose ×2 boost ticket. */
.command-modal-card {
  width: min(440px, 100%);
  max-height: calc(100dvh - 20px);
  overflow: auto;
  padding: 22px;
  text-align: start;
}
.command-modal-card .modal-close {
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #4d564c;
  font-size: 1.2rem;
  line-height: 1;
}
html[dir="rtl"] .command-modal-card .modal-close { right: auto; left: 12px; }
.boost-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  padding-inline-end: 46px;
}
html[dir="rtl"] .boost-topline { padding-inline: 46px 0; }
.boost-topline .eyebrow {
  color: #66705f;
  font-size: .62rem;
  letter-spacing: .1em;
}
.boost-status {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #253024;
  border-radius: 999px;
  color: #253024;
  background: #eef4d7;
  font-size: .62rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  unicode-bidi: isolate;
}
.boost-status.is-active { color: #13200e; background: var(--accent); }
.boost-status.is-blocked { border-color: #a95b48; color: #7c3225; background: #f2ddd1; }
.boost-hero {
  display: grid;
  grid-template-columns: 66px minmax(0,1fr);
  align-items: center;
  gap: 15px;
  margin-top: 12px;
}
.boost-mark {
  display: grid;
  place-items: center;
  width: 66px;
  aspect-ratio: 1;
  border: 3px solid #151a14;
  border-radius: 50%;
  color: #172014;
  background: var(--accent);
  box-shadow: 4px 5px 0 rgba(31,35,31,.18);
  font-size: 1.55rem;
  font-weight: 950;
  letter-spacing: -.08em;
  direction: ltr;
  unicode-bidi: isolate;
}
.command-modal-card .boost-hero h2 {
  margin: 0 0 5px;
  font-size: 1.38rem;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.command-modal-card .boost-hero p {
  margin: 0;
  color: #5e675b;
  font-size: .72rem;
  line-height: 1.35;
}
.boost-equation {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  padding: 9px 10px;
  border-block: 1px dashed rgba(31,35,31,.24);
  color: #535d50;
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-align: center;
}
.boost-equation b { color: #949b8e; }
.boost-equation strong {
  padding: 5px 8px;
  border-radius: 4px 9px 4px 7px;
  color: #172014;
  background: var(--accent);
  font-size: .84rem;
  letter-spacing: -.02em;
  direction: ltr;
  unicode-bidi: isolate;
}
.boost-ready-panel { margin-top: 15px; }
.boost-ready-panel[hidden] { display: none; }
.boost-buy-button {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 68px;
  padding: 9px 12px 9px 9px;
  border: 2px solid #20271e;
  border-radius: 7px 15px 7px 12px;
  color: #152014;
  background: #dce9b9;
  box-shadow: 4px 5px 0 rgba(31,35,31,.18);
  cursor: pointer;
  text-align: start;
}
.boost-buy-button:not(:disabled):hover { transform: translateY(-1px); background: #e5f2c4; }
.boost-buy-button:not(:disabled):active { transform: translateY(2px); box-shadow: 2px 2px 0 rgba(31,35,31,.18); }
.boost-button-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #162014;
  background: var(--accent);
  font-size: .9rem;
  font-weight: 950;
  direction: ltr;
  unicode-bidi: isolate;
}
.boost-button-copy { display: grid; gap: 3px; min-width: 0; }
.boost-button-copy b { font-size: .76rem; line-height: 1.05; }
.boost-button-copy small { color: #5e675b; font-size: .58rem; font-weight: 850; }
.boost-price { display: grid; justify-items: end; gap: 3px; min-width: 72px; }
.boost-price small { color: #68705f; font-size: .5rem; font-weight: 900; letter-spacing: .08em; }
.boost-price bdi { font-size: .76rem; font-weight: 950; unicode-bidi: isolate; }
.boost-buy-button:disabled {
  border-color: #a9ad9f;
  color: #757b70;
  background: #e2e3d8;
  box-shadow: none;
  cursor: not-allowed;
  filter: saturate(.35);
  opacity: .68;
}
.boost-shortfall {
  margin: 8px 0 0 !important;
  color: #9c3f2d !important;
  font-size: .66rem !important;
  font-weight: 850;
  text-align: center;
  unicode-bidi: plaintext;
}
.boost-shortfall[hidden] { display: none; }
.boost-dismiss-button {
  display: block;
  min-width: 120px;
  min-height: 44px;
  margin: 10px auto 0;
  padding: 8px 14px;
  border: 0;
  color: #596157;
  background: transparent;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.boost-dismiss-button:hover { color: #1f291d; }
.command-modal-card :focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.scene-hud .command-button span { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 430px) {
  .command-modal-card { padding: 18px 15px; }
  .command-modal-card .modal-close { top: 8px; right: 8px; }
  html[dir="rtl"] .command-modal-card .modal-close { right: auto; left: 8px; }
  .boost-topline { padding-inline-end: 43px; }
  html[dir="rtl"] .boost-topline { padding-inline: 43px 0; }
  .boost-hero { grid-template-columns: 56px minmax(0,1fr); gap: 11px; }
  .boost-mark { width: 56px; font-size: 1.28rem; }
  .command-modal-card .boost-hero h2 { font-size: 1.12rem; }
  .command-modal-card .boost-hero p { font-size: .68rem; }
  .boost-equation { gap: 5px; padding-inline: 5px; font-size: .54rem; }
  .boost-buy-button { grid-template-columns: 40px minmax(0,1fr) auto; gap: 8px; min-height: 64px; }
  .boost-button-mark { width: 40px; height: 40px; }
  .boost-price { min-width: 65px; }
}

@media (min-width: 761px) and (max-height: 560px) {
  .command-modal-card { width: min(440px, calc(100% - 16px)); padding: 17px 20px; }
  .boost-hero { margin-top: 6px; }
  .boost-equation { margin-top: 10px; padding-block: 7px; }
  .boost-ready-panel { margin-top: 10px; }
  .boost-buy-button { min-height: 60px; }
  .boost-dismiss-button { min-height: 38px; margin-top: 5px; }
}

/* 1.6 — Bloom Market is a stack of printed game tickets, not a card dashboard. */
.shop-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: auto;
  min-width: 82px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 4px 10px 4px 6px;
  border: 0;
  border-radius: 5px 13px 5px 10px;
  color: #f5f0d9;
  background: #292e28;
  box-shadow: inset 0 0 0 1px rgba(236,232,216,.13), 0 2px 0 rgba(0,0,0,.28);
  cursor: pointer;
}
.shop-button[hidden] { display: none; }
.shop-button b {
  font-size: .6rem;
  font-weight: 950;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
}
.shop-button:not(:disabled):hover { background: #343b32; }
.shop-button:not(:disabled):active { transform: translateY(1px); box-shadow: inset 0 0 0 1px rgba(236,232,216,.13); }
.shop-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

#shop-modal { z-index: 78; }
#shop-modal .shop-modal-card {
  position: relative;
  width: min(700px, 100%);
  max-height: calc(100dvh - 20px);
  padding: 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 3px solid #111610;
  border-radius: 7px 19px 7px 15px;
  color: #20261e;
  background:
    radial-gradient(circle at 12px 12px, #8c856d 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 12px) 12px, #8c856d 0 2px, transparent 2.5px),
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(62,58,45,.035) 26px),
    #ece3c8;
  box-shadow: 7px 8px 0 rgba(4,7,4,.48), 0 30px 80px rgba(0,0,0,.38);
  text-align: start;
}
#shop-modal .modal-close {
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 2px solid #24291f;
  border-radius: 50%;
  color: #333a30;
  background: #f4ecd4;
}
html[dir="rtl"] #shop-modal .modal-close { right: auto; left: 10px; }
.shop-marquee {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 1px 50px 14px 0;
  border-bottom: 2px solid #24291f;
}
html[dir="rtl"] .shop-marquee { padding: 1px 0 14px 50px; }
.shop-marquee > div { min-width: 0; }
.shop-marquee__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.shop-marquee .eyebrow {
  display: block;
  color: #6c725f;
  font-size: .55rem;
  letter-spacing: .13em;
}
#shop-modal .shop-marquee h2 {
  margin: 3px 0 4px;
  color: #20261e;
  font-size: 1.36rem;
  line-height: 1;
  letter-spacing: -.035em;
}
#shop-modal .shop-marquee p {
  max-width: 430px;
  color: #5b6255;
  font-size: .66rem;
  line-height: 1.35;
}
.shop-wallet {
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 94px;
  min-height: 54px;
  padding: 7px 10px;
  border: 2px solid #24291f;
  border-block-style: dashed;
  color: #273021;
  background: #dce8b6;
  box-shadow: 3px 3px 0 rgba(31,35,31,.16);
  text-align: center;
}
.shop-wallet span { font-size: .54rem; font-weight: 950; letter-spacing: .09em; line-height: 1.15; }
.shop-wallet strong { margin-top: 3px; font-size: .9rem; line-height: 1; direction: ltr; unicode-bidi: isolate; }

.shop-product-list {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 9px;
  margin-top: 14px;
}
.shop-ticket {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0,1fr) minmax(92px,auto);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 82px;
  margin: 0;
  padding: 9px 11px 9px 9px;
  overflow: visible;
  border: 2px solid #24291f;
  border-radius: 3px 10px 3px 8px;
  color: #20261e;
  background:
    linear-gradient(90deg, transparent 0 72px, rgba(57,61,48,.075) 73px, transparent 74px),
    #f5ecd2;
  box-shadow: 4px 4px 0 rgba(31,35,31,.18);
  cursor: pointer;
  text-align: start;
}
.shop-ticket:nth-child(even) { background-color: #eee4c3; }
.shop-ticket:not(:disabled):hover { background-color: #fbf2d8; transform: translateY(-1px); }
.shop-ticket:not(:disabled):active { transform: translate(2px,2px); box-shadow: 2px 2px 0 rgba(31,35,31,.16); }
.shop-ticket:focus-visible { outline: 3px solid #5faf1c; outline-offset: 2px; }
.shop-ticket--hero {
  min-height: 94px;
  border-inline-start-width: 8px;
  border-inline-start-color: #6ca934;
  background:
    linear-gradient(90deg, transparent 0 72px, rgba(57,61,48,.09) 73px, transparent 74px),
    #dfeab8;
}
.shop-ticket__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 2px solid #20261e;
  border-radius: 50%;
  color: #1b2119;
  background: #f6c94e;
  box-shadow: inset -5px -6px 0 rgba(62,53,23,.11), 2px 3px 0 rgba(31,35,31,.2);
  font-size: 0;
}
.shop-ticket__art::before { content: "✦"; font-size: 1.45rem; font-weight: 950; line-height: 1; }
.shop-ticket__art::after {
  position: absolute;
  right: 6px;
  bottom: 7px;
  width: 11px;
  height: 7px;
  border-radius: 9px 1px 9px 1px;
  content: "";
  background: #4e8b31;
  transform: rotate(-18deg);
}
.shop-ticket__art--no-ads { background: transparent; }
.shop-ticket__art--no-ads::before { content: none; }
.shop-ticket__art--starter { background: #b9dc82; }
.shop-ticket__art--starter::before { content: "✿"; }
.shop-ticket__art--cursor { background: #8ed6d0; }
.shop-ticket__art--cursor::before { content: "➤"; transform: rotate(-28deg); }
.shop-ticket__art--ticket { border-radius: 5px 12px 5px 10px; background: #f6c94e; }
.shop-ticket__art--ticket::before { content: "×2"; font-size: 1.04rem; letter-spacing: -.08em; direction: ltr; }
.shop-ticket__copy { display: grid; gap: 3px; min-width: 0; }
.shop-ticket__copy > b,
.shop-ticket__copy > strong,
.shop-ticket__copy h3 {
  margin: 0;
  color: #20261e;
  font-size: .79rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.shop-ticket__copy > small,
.shop-ticket__copy > span:not(.shop-ticket__badge),
.shop-ticket__copy p {
  margin: 0;
  color: #5c6456;
  font-size: .59rem;
  font-weight: 750;
  line-height: 1.28;
  overflow-wrap: anywhere;
}
.shop-ticket__price {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-width: 92px;
  padding-inline-start: 11px;
  border-inline-start: 1px dashed rgba(31,35,31,.38);
  color: #254c19;
  font-size: .7rem;
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
  unicode-bidi: isolate;
}
.shop-ticket__badge {
  position: static;
  justify-self: start;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid #24291f;
  border-radius: 2px;
  color: #20261e;
  background: #f6c94e;
  box-shadow: 2px 2px 0 rgba(31,35,31,.16);
  font-size: .45rem;
  font-weight: 950;
  letter-spacing: .08em;
  line-height: 1.1;
}
.shop-ticket.is-owned,
.shop-ticket.is-owned:disabled {
  color: #444a40;
  background-color: #e2dfcf;
  border-color: #777c70;
  box-shadow: 2px 2px 0 rgba(31,35,31,.13);
  cursor: default;
  filter: saturate(.55);
  opacity: 1;
}
.shop-ticket.is-owned .shop-ticket__price { color: #4b5348; }
.shop-ticket.is-buying { cursor: wait; animation: shopTicketPress .65s ease-in-out infinite alternate; }
@keyframes shopTicketPress { from { filter: brightness(.96); } to { filter: brightness(1.08); } }

.shop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px dashed rgba(31,35,31,.38);
}
.shop-footer small { max-width: 430px; color: #62695c; font-size: .54rem; font-weight: 750; line-height: 1.3; }
.shop-restore {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 11px;
  border: 2px solid #343a30;
  border-radius: 3px 8px 3px 7px;
  color: #30372e;
  background: transparent;
  font-size: .55rem;
  font-weight: 950;
  letter-spacing: .045em;
  cursor: pointer;
}
.shop-restore:hover { color: #172014; background: rgba(255,255,255,.25); }

/* A prepaid boost is another physical stub beneath the energy purchase. */
.boost-ticket-button {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 11px;
  width: 100%;
  min-height: 60px;
  margin-top: 10px;
  padding: 8px 12px 8px 9px;
  border: 2px solid #20271e;
  border-inline-end-style: dashed;
  border-radius: 4px 12px 4px 10px;
  color: #172014;
  background: #f5d477;
  box-shadow: 4px 4px 0 rgba(31,35,31,.17);
  cursor: pointer;
  text-align: start;
}
.boost-ticket-button[hidden] { display: none; }
.boost-ticket-button > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid #20271e;
  border-radius: 50%;
  background: #f8ecbd;
  font-size: .9rem;
  font-weight: 950;
  direction: ltr;
}
.boost-ticket-button > b { align-self: end; font-size: .7rem; line-height: 1.05; }
.boost-ticket-button > small { align-self: start; color: #66572d; font-size: .56rem; font-weight: 850; line-height: 1.2; }
.boost-ticket-button:not(:disabled):hover { background: #f8dd8e; transform: translateY(-1px); }
.boost-ticket-button:not(:disabled):active { transform: translate(2px,2px); box-shadow: 2px 2px 0 rgba(31,35,31,.14); }

/* Final playfield proportions and legibility. */
@media (min-width: 761px) and (orientation: landscape) {
  .game-grid { grid-template-columns: minmax(0,1fr) clamp(340px,34vw,430px); }
  .planet-button { width: clamp(178px,35vh,250px); }
}

.scene-hud .command-button,
.scene-hud .shop-button,
.scene-hud .icon-button {
  height: 40px;
  min-height: 40px;
}
.scene-hud .icon-button,
.scene-hud .language-button { width: 40px; min-width: 40px; }
.scene-hud .command-button { min-width: 100px; }
.module-copy span em { font-size: .55rem; line-height: 1.22; }
.owned-badge small { font-size: .51rem; line-height: 1.15; }
.buy-button small { font-size: .46rem; line-height: 1.1; }
.boost-copy strong { font-size: .66rem; }
.boost-copy small { font-size: .58rem; line-height: 1.22; }
.boost-button { min-height: 28px; font-size: .58rem; }
.boost-dismiss-button,
.language-option,
.primary-button,
.secondary-button { min-height: 44px; }
.world-panel[data-growth-stage="0"] { --growth-filter: grayscale(.38) sepia(.28) saturate(.76) brightness(.86); }

.anomaly-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #2a1c05;
  background: linear-gradient(145deg,#fff3a0,#f6bf48);
  box-shadow: none;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.28));
  clip-path: polygon(50% 0,61% 34%,98% 35%,68% 57%,79% 95%,50% 72%,21% 95%,32% 57%,2% 35%,39% 34%);
}
.anomaly-button > span { font-size: 1rem; line-height: 1; }
.anomaly-button b,
.anomaly-button small { display: none; }
.anomaly-button:focus-visible { outline: 3px solid #fff1a0; outline-offset: 4px; }

@media (max-width: 1040px) {
  .scene-hud .command-button,
  .scene-hud .shop-button {
    width: 40px;
    min-width: 40px;
    justify-content: center;
    padding: 4px;
  }
  .scene-hud .command-button b,
  .scene-hud .shop-button b { display: none; }
}

@media (max-width: 760px) {
  html { scrollbar-gutter: auto; }
  .scene-hud .command-button,
  .scene-hud .shop-button,
  .scene-hud .icon-button,
  .scene-hud .language-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .modal-card,
  .language-modal-card,
  .settings-modal-card,
  .command-modal-card,
  #shop-modal .shop-modal-card { scrollbar-gutter: auto; }
  .buy-mode { min-width: 40px; min-height: 40px; }
  .buy-button { min-height: 44px; }
  .boost-button { min-height: 40px; }
  .launch-button,
  .core-card button,
  .world-nav { min-height: 44px; }
  .world-nav { width: 44px; }
}

@media (max-width: 620px) {
  #shop-modal .shop-modal-card { padding: 16px; }
  #shop-modal .modal-close { top: 7px; right: 7px; }
  html[dir="rtl"] #shop-modal .modal-close { right: auto; left: 7px; }
  .shop-marquee {
    grid-template-columns: 48px minmax(0,1fr);
    gap: 10px;
    padding: 0 46px 11px 0;
  }
  html[dir="rtl"] .shop-marquee { padding: 0 0 11px 46px; }
  .shop-marquee__mark { width: 46px; height: 46px; border-width: 2px; }
  #shop-modal .shop-marquee h2 { font-size: 1.08rem; }
  #shop-modal .shop-marquee p { font-size: .62rem; }
  .shop-wallet {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    justify-items: stretch;
    min-height: 40px;
    padding: 6px 9px;
    text-align: start;
  }
  .shop-wallet strong { margin: 0; text-align: end; }
  .shop-ticket { grid-template-columns: 54px minmax(0,1fr); gap: 9px; min-height: 86px; padding: 9px; }
  .shop-ticket__art { width: 50px; height: 50px; }
  .shop-ticket__price {
    grid-column: 1 / -1;
    align-self: auto;
    min-height: 36px;
    padding: 7px 2px 0;
    border-inline-start: 0;
    border-top: 1px dashed rgba(31,35,31,.38);
  }
  .shop-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
  .shop-restore { width: 100%; }
}

/* 1.8.0 — one physical reward ticket changes character; it never becomes a
   second dashboard or a parallel ad surface. */
.reward-offer[data-reward-type="offline"] .reward-offer__pod {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f3c74b;
  transform: rotate(-7deg);
}
.reward-offer[data-reward-type="offline"] .reward-offer__pod::before { display: none; }
.reward-offer[data-reward-type="offline"] .reward-offer__pod::after {
  position: static;
  width: auto;
  height: auto;
  border: 0;
  color: #33250b;
  background: transparent;
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1;
}
.reward-offer[data-reward-type="offline"] .reward-offer__pod {
  border-radius: 44% 44% 52% 52%;
  background: #9ed87c;
}
.reward-offer[data-reward-type="offline"] .reward-offer__pod::after { content: "☘"; }
.reward-offer[data-reward-type="offline"] .reward-offer__pod i { display: none; }

.greenhouse-slip {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px dashed rgba(55,88,41,.48);
  color: #263521;
  background: #dcecc5;
  box-shadow: 2px 3px 0 rgba(31,35,31,.13);
  text-align: start;
  transform: rotate(-.35deg);
}
.greenhouse-slip[hidden] { display: none; }
.greenhouse-slip__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #385429;
  border-radius: 48% 48% 55% 55%;
  background: #9ed87c;
  font-size: 1rem;
}
.greenhouse-slip > span:nth-child(2) { display: grid; gap: 2px; }
.greenhouse-slip b { font-size: .6rem; letter-spacing: .055em; }
.greenhouse-slip small { color: #56644f; font-size: .55rem; line-height: 1.22; }
.greenhouse-slip > strong { color: #75520e; font-size: .72rem; white-space: nowrap; }
.welcome-actions { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 8px; }
.welcome-actions button { width: 100%; min-height: 44px; }

@media (max-width: 620px) {
  .welcome-actions { grid-template-columns: minmax(0,1fr); }
  .greenhouse-slip { grid-template-columns: 34px minmax(0,1fr); }
  .greenhouse-slip > strong { grid-column: 2; }
}

@media (max-width: 430px) {
  .scene-stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 5px;
  }
  .scene-stats .stat-card:nth-child(n) {
    grid-template-rows: minmax(1.25em,auto) minmax(1em,auto);
    min-height: 43px;
    padding: 5px 8px;
  }
  .scene-stats .stat-card > span { min-height: 0; font-size: .51rem; line-height: 1.1; }
  .scene-stats .stat-card strong { font-size: .76rem; }
  .generator-card { grid-template-columns: 43px minmax(0,1fr) 40px 84px; }
  .owned-badge { min-width: 40px; }
  .shop-ticket__copy > b,
  .shop-ticket__copy > strong,
  .shop-ticket__copy h3 { font-size: .73rem; }
  .shop-ticket__copy > small,
  .shop-ticket__copy > span:not(.shop-ticket__badge),
  .shop-ticket__copy p { font-size: .57rem; }
}

@media (max-width: 360px) {
  .scene-hud { column-gap: 4px; }
  .scene-hud .top-actions { gap: 3px; }
  .scene-hud .brand { gap: 4px; }
  .scene-hud .brand-icon { flex-basis: 32px; width: 32px; height: 32px; }
  .scene-hud .brand-lockup h1 { font-size: .88rem; }
  .combo-pill:not(.active) { display: none; }
  .generator-card { grid-template-columns: 40px minmax(0,1fr) 40px 78px; gap: 5px; padding-inline: 6px; }
  .module-icon { width: 40px; height: 40px; }
  #shop-modal .shop-modal-card { padding: 13px; }
  .shop-marquee { grid-template-columns: 42px minmax(0,1fr); gap: 8px; }
  .shop-marquee__mark { width: 40px; height: 40px; }
  #shop-modal .shop-marquee h2 { font-size: .96rem; }
  #shop-modal .shop-marquee p { font-size: .58rem; }
}

@media (min-width: 761px) and (max-height: 560px) {
  #shop-modal .shop-modal-card { width: min(700px,calc(100% - 16px)); padding: 15px 18px; }
  .shop-marquee { grid-template-columns: 46px minmax(0,1fr) auto; gap: 10px; padding-bottom: 9px; }
  .shop-marquee__mark { width: 44px; height: 44px; border-width: 2px; }
  #shop-modal .shop-marquee h2 { font-size: 1.08rem; }
  #shop-modal .shop-marquee p { font-size: .59rem; }
  .shop-wallet { min-height: 44px; }
  .shop-product-list { margin-top: 9px; gap: 7px; }
  .shop-ticket { min-height: 70px; grid-template-columns: 52px minmax(0,1fr) minmax(86px,auto); padding-block: 6px; }
  .shop-ticket--hero { min-height: 76px; }
  .shop-ticket__art { width: 48px; height: 48px; }
  .shop-footer { margin-top: 9px; padding-top: 7px; }
}

.reduce-motion .shop-ticket.is-buying { animation: none !important; }

/* The 16:9 store fits as a compact ticket counter; mobile keeps the calm stack. */
@media (min-width: 621px) {
  .shop-product-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .shop-ticket--hero { grid-column: 1 / -1; }
  .shop-ticket:last-child { grid-column: 1 / -1; }
  .shop-ticket:not(.shop-ticket--hero) {
    grid-template-columns: 50px minmax(0,1fr) 72px;
    min-height: 72px;
    gap: 8px;
    padding: 7px 8px 7px 7px;
  }
  .shop-ticket:not(.shop-ticket--hero) .shop-ticket__art { width: 46px; height: 46px; }
  .shop-ticket:not(.shop-ticket--hero) .shop-ticket__price { min-width: 72px; padding-inline-start: 7px; }
}

/* Keep modal exits reachable when a short portal scrolls its card. Returning
   from the nested language picker must not carry the close control away. */
.language-modal-card > .modal-close,
.settings-modal-card > .modal-close {
  position: sticky;
  inset-block-start: 0;
  inset-inline: auto;
  z-index: 6;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin-inline-start: auto;
  margin-block-end: -44px;
}

#shop-modal .shop-modal-card > .modal-close {
  position: sticky;
  inset-block-start: 0;
  inset-inline: auto;
  right: auto;
  left: auto;
  z-index: 7;
  margin-inline-start: auto;
  margin-block-end: -44px;
}

.language-modal-card,
.settings-modal-card,
.save-tools,
.reset-confirm-row { text-align: start; }

.danger-button { min-height: 44px; }

html[dir="rtl"] .shop-ticket {
  background:
    linear-gradient(270deg, transparent 0 72px, rgba(57,61,48,.075) 73px, transparent 74px),
    #f5ecd2;
}
html[dir="rtl"] .shop-ticket:nth-child(even) { background-color: #eee4c3; }
html[dir="rtl"] .shop-ticket--hero {
  background:
    linear-gradient(270deg, transparent 0 72px, rgba(57,61,48,.09) 73px, transparent 74px),
    #dfeab8;
}

.shop-ticket__copy > small,
.shop-ticket__copy > span:not(.shop-ticket__badge),
.shop-ticket__copy p { font-size: .62rem; }
.shop-ticket__badge {
  max-width: 100%;
  font-size: .52rem;
  text-align: center;
  overflow-wrap: anywhere;
}
.shop-footer small { font-size: .58rem; }

@media (min-width: 761px) and (orientation: landscape) and (max-height: 560px) {
  .scene-stats .stat-card > span { font-size: .54rem; }
  .world-heading .eyebrow { font-size: .52rem; }
  .tap-copy small { font-size: .5rem; }
}

/* --------------------------------------------------------------------------
   1.9.0 — Field notebook pass.
   One authored game board, not a row of interchangeable product cards.
   Alignment remains strict; character comes from drawing, hierarchy and use.
   -------------------------------------------------------------------------- */

.ui-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ui-mark {
  display: block;
  width: 1em;
  height: 1em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.energy-token {
  display: inline-flex;
  align-items: center;
  gap: .12em;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.inline-energy-mark {
  display: inline-flex;
  width: .88em;
  height: .88em;
  flex: 0 0 auto;
  vertical-align: -.08em;
}
.inline-energy-mark.ui-mark {
  width: .88em;
  height: .88em;
  stroke-width: 2.25;
}
.inline-energy-mark .ui-mark {
  width: 100%;
  height: 100%;
  stroke-width: 2.25;
}

/* Language lives inside Settings. The permanent toolbar only holds play tools. */
#language-button { display: none !important; }
.scene-hud .settings-button {
  border: 0;
  color: #bbc4b5;
  background: transparent;
  box-shadow: none;
}
.scene-hud .settings-button .ui-mark { width: 21px; height: 21px; }
.scene-hud .settings-button:hover { color: var(--accent); background: rgba(236,232,216,.07); }
.scene-hud .command-button,
.scene-hud .shop-button {
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(236,232,216,.14), 3px 3px 0 rgba(0,0,0,.3);
}

/* A single instrument strip replaces four separate KPI cards. */
.scene-stats {
  gap: 0;
  overflow: hidden;
  border: 2px solid #0e130f;
  border-radius: 2px;
  background: #202720;
  box-shadow: 3px 3px 0 rgba(0,0,0,.3);
}
.scene-stats .stat-card:nth-child(n),
.scene-stats .stat-card--energy {
  min-height: 44px;
  padding: 5px 10px;
  border: 0;
  border-inline-start: 1px dashed rgba(236,232,216,.2);
  border-radius: 0;
  color: #f1edda;
  background: transparent;
  box-shadow: none;
}
.scene-stats .stat-card:first-child {
  border-inline-start: 5px solid color-mix(in srgb, var(--accent) 78%, #f5d252);
  color: #182015;
  background: color-mix(in srgb, var(--accent) 82%, #f5d252);
}
.scene-stats .stat-card:nth-child(n) > span {
  color: #a2ad9d;
  font-size: .55rem;
  letter-spacing: .075em;
}
.scene-stats .stat-card:first-child > span { color: rgba(24,32,21,.7); }
.scene-stats .stat-card strong { color: inherit; }
.scene-stats .stat-card:nth-child(2) strong { color: var(--accent); }
.scene-stats .stat-card:nth-child(3),
.scene-stats .stat-card:nth-child(4) { background: rgba(255,255,255,.018); }

/* The route uses one hand-drawn mark family instead of operating-system glyphs. */
.route-node b {
  width: 20px;
  height: 20px;
}
.route-node b .ui-mark { width: 13px; height: 13px; }
.route-node.active b .ui-mark { stroke-width: 2; }
.anomaly-button > span .ui-mark { width: 23px; height: 23px; stroke-width: 2; }

/* Progress reads like a travelled field route, not a glowing web progress bar. */
.level-map::before {
  border: 0;
  background: repeating-linear-gradient(90deg, rgba(244,239,218,.28) 0 5px, transparent 5px 9px);
  box-shadow: none;
}
.level-map::after {
  height: 2px;
  background: var(--accent);
  box-shadow: none;
}
.level-map i.current { box-shadow: 0 0 0 3px rgba(0,0,0,.34); }
.generator-card::after { display: none; }
.combo-pill:not(.active) { opacity: 0; visibility: hidden; }

/* Keep one quiet ambient motion channel: the planet itself. */
.planet-sheen { animation: none; opacity: .16; }
.planet-glow { animation: none; }
.bloomline-heading span i { animation: none; }

/* Edge-only surface marks give world families a real drawing identity while
   preserving the face as a protected clear zone. */
.planet::before {
  display: block;
  inset: 0;
  z-index: 3;
  width: auto;
  height: auto;
  border-radius: inherit;
  content: "";
  opacity: .7;
  background: none;
  transform: none;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 52%, transparent 0 38%, #000 54%);
  mask-image: radial-gradient(circle at 50% 52%, transparent 0 38%, #000 54%);
}
.world--berry .planet::before,
.world--peach .planet::before {
  background:
    radial-gradient(ellipse at 18% 22%, transparent 0 8%, rgba(255,240,190,.52) 8.5% 10%, transparent 10.5%),
    radial-gradient(ellipse at 83% 72%, transparent 0 7%, rgba(255,230,181,.42) 7.5% 9%, transparent 9.5%);
}
.world--puddle .planet::before,
.world--coral .planet::before,
.world--cloud .planet::before {
  background:
    radial-gradient(ellipse at 16% 69%, transparent 0 12%, rgba(222,252,255,.55) 12.5% 14%, transparent 14.5%),
    radial-gradient(ellipse at 84% 24%, transparent 0 10%, rgba(222,252,255,.48) 10.5% 12%, transparent 12.5%),
    linear-gradient(12deg, transparent 0 78%, rgba(255,255,255,.24) 79% 80%, transparent 81%);
}
.world--honey .planet::before,
.world--mint .planet::before {
  opacity: .58;
  background:
    linear-gradient(30deg, transparent 0 46%, rgba(80,52,17,.34) 47% 49%, transparent 50%),
    linear-gradient(150deg, transparent 0 46%, rgba(80,52,17,.28) 47% 49%, transparent 50%);
  background-size: 33px 28px;
}
.world--carnival .planet::before,
.world--candy .planet::before {
  background:
    radial-gradient(circle at 12% 25%, #fff2ad 0 2.2%, transparent 2.5%),
    radial-gradient(circle at 84% 18%, #ff7a86 0 2%, transparent 2.3%),
    radial-gradient(circle at 88% 76%, #71d3c1 0 2.2%, transparent 2.5%),
    radial-gradient(circle at 18% 82%, #fff2ad 0 1.8%, transparent 2.1%);
}
.world--star .planet::before,
.world--jelly .planet::before,
.world--midnight .planet::before,
.world--gold .planet::before {
  background:
    radial-gradient(circle at 14% 20%, #fff4a5 0 1.6%, transparent 1.9%),
    radial-gradient(circle at 82% 24%, #fff4a5 0 1.2%, transparent 1.5%),
    radial-gradient(circle at 86% 78%, #fff4a5 0 1.7%, transparent 2%),
    radial-gradient(circle at 21% 79%, #fff4a5 0 1.1%, transparent 1.4%);
}

/* Five tap-feel families: leaf, water, honey, parade and night. */
.world--puddle .tap-spark,
.world--coral .tap-spark,
.world--cloud .tap-spark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--spark-color, var(--accent)) 28%, transparent);
}
.world--honey .tap-spark,
.world--mint .tap-spark {
  width: 11px;
  height: 10px;
  border-radius: 0;
  clip-path: polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);
}
.world--carnival .tap-spark,
.world--candy .tap-spark {
  width: 6px;
  height: 17px;
  border-radius: 1px;
  box-shadow: none;
}
.world--star .tap-spark,
.world--jelly .tap-spark,
.world--midnight .tap-spark,
.world--gold .tap-spark {
  width: 10px;
  height: 10px;
  border-radius: 0;
  clip-path: polygon(50% 0,61% 35%,98% 38%,68% 58%,79% 96%,50% 73%,20% 96%,31% 58%,2% 38%,39% 35%);
}
.world--puddle .tap-burst::after,
.world--coral .tap-burst::after,
.world--cloud .tap-burst::after { border-radius: 50%; clip-path: none; }
.world--honey .tap-burst::after,
.world--mint .tap-burst::after { clip-path: polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); }

.world--puddle .planet-idle,
.world--coral .planet-idle,
.world--cloud .planet-idle { animation-name: planetIdleWave; }
.world--honey .planet-idle,
.world--mint .planet-idle { animation-name: planetIdleTick; }
.world--carnival .planet-idle,
.world--candy .planet-idle { animation-name: planetIdleParade; }
@keyframes planetIdleWave {
  0%,100% { transform: translate3d(0,1px,0) rotate(-.18deg) scale(1,.998); }
  46% { transform: translate3d(0,-3px,0) rotate(.14deg) scale(.997,1.006); }
}
@keyframes planetIdleTick {
  0%,42%,100% { transform: translate3d(0,1px,0) rotate(-.12deg); }
  48% { transform: translate3d(0,-2px,0) rotate(.28deg); }
  54% { transform: translate3d(0,-2px,0) rotate(.08deg); }
}
@keyframes planetIdleParade {
  0%,100% { transform: translate3d(0,1px,0) rotate(-.25deg); }
  34% { transform: translate3d(-1px,-3px,0) rotate(.2deg); }
  68% { transform: translate3d(1px,-1px,0) rotate(.1deg); }
}

/* The right side is a crew ledger bound to the same board, not a dashboard. */
.factory-panel {
  padding: 10px 11px 10px 18px;
}
.factory-panel::before {
  position: absolute;
  inset-block: 14px;
  inset-inline-start: 7px;
  width: 4px;
  content: "";
  background: repeating-radial-gradient(circle, #777764 0 1.5px, transparent 2px 12px);
  opacity: .72;
  pointer-events: none;
}
.generator-list {
  counter-reset: crew-row;
  grid-auto-rows: max-content;
  align-content: start;
  padding-inline-start: 15px;
  border-top: 1px solid rgba(31,35,31,.25);
  border-inline-start: 1px solid rgba(31,35,31,.14);
}
.generator-card {
  counter-increment: crew-row;
  overflow: visible;
  background: transparent !important;
}
.generator-card::before {
  position: absolute;
  inset-inline-start: -17px;
  top: 50%;
  z-index: 2;
  min-width: 14px;
  color: #7b7b69;
  content: counter(crew-row, decimal-leading-zero);
  font-size: .44rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
}
.generator-card.locked ~ .generator-card.locked { display: none; }
.module-icon {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.module-icon::before {
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--module-color) 62%, #4a5146);
  border-radius: 3px;
  content: "";
  background: color-mix(in srgb, var(--module-color) 18%, #eee6cf);
  transform: rotate(45deg);
}
.module-icon svg { width: 28px; height: 28px; stroke-width: 2.05; }
.buy-button {
  border: 2px solid #292d26;
  border-radius: 3px;
  color: #292d26;
  background: color-mix(in srgb, var(--module-color) 24%, #e8dfc6);
  box-shadow: 2px 2px 0 rgba(31,35,31,.17);
  clip-path: none;
}
.buy-button.affordable {
  color: #172014;
  background: var(--module-color);
  box-shadow: 2px 2px 0 rgba(31,35,31,.25), inset 0 -3px 0 rgba(71,116,18,.16);
}
.buy-button small,
.owned-badge small { font-size: .54rem; }
.generator-card.locked { opacity: .48; }

/* Nothing permanent is allowed to sit over the character's face. Growth is
   communicated around the rim, so the same expression stays readable from
   the first frame to full bloom. */
.world-belt { z-index: 1; }

/* Three upgrades share one physical tool rail instead of three pastel cards. */
.boost-list {
  gap: 0;
  border-block: 1px solid rgba(31,35,31,.25);
}
.boost-card:nth-child(n) {
  min-height: 70px;
  padding: 7px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.boost-card + .boost-card { border-inline-start: 1px dashed rgba(31,35,31,.25); }
.boost-icon {
  border: 1px solid rgba(31,35,31,.28);
  border-radius: 3px;
  background: rgba(255,255,255,.28);
}
.boost-button {
  border-radius: 2px;
  background: rgba(31,35,31,.075);
}

/* Purpose-drawn reward marks replace font-dependent stars and clovers. */
.reward-pod-mark { display: none; position: absolute; inset: 8px; width: auto; height: auto; color: #33250b; }
.reward-offer[data-reward-type="offline"] .reward-pod-mark--offline { display: block; }
.reward-offer[data-reward-type="offline"] .reward-offer__pod::after { display: none; content: ""; }
.modal-core .ui-mark { width: 34px; height: 34px; }
.reward-icon .ui-mark { width: 20px; height: 20px; }
.greenhouse-slip__mark .ui-mark { width: 21px; height: 21px; }
/* Shop art is drawn from the same mark set. Text is reserved for the ×2 stub. */
.shop-ticket__art::before,
.shop-ticket__art::after { display: none; }
.shop-ticket__art--ticket::before {
  display: block;
  content: "×2";
  font-size: 1.04rem;
  font-weight: 950;
  letter-spacing: -.08em;
  direction: ltr;
}

/* Modal information is shorter and flatter than the play scene. */
.boost-equation { display: none; }
.boost-ready-panel { margin-top: 12px; }
.language-option,
.setting-row,
.command-modal-card .reward-option {
  border-radius: 2px;
  box-shadow: none;
}
.modal-core { border-radius: 4px; }
.modal { backdrop-filter: none; }

@media (min-width: 761px) and (orientation: landscape) {
  .game-grid {
    grid-template-columns: minmax(0,1fr) clamp(318px,29vw,360px);
    gap: 4px;
  }
  .world-panel { border-radius: 20px 4px 4px 17px; }
  .factory-panel { border-radius: 4px 18px 18px 4px; }
}

@media (max-width: 760px) {
  .world-panel,
  .factory-panel { border-radius: 12px; }
  .factory-panel { padding-inline: 17px 11px; }
  .scene-stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
    border-radius: 2px;
  }
  .scene-stats .stat-card:nth-child(n) { min-height: 45px; }
  .scene-stats .stat-card:nth-child(3),
  .scene-stats .stat-card:nth-child(4) { border-top: 1px dashed rgba(236,232,216,.2); }
  .scene-stats .stat-card:nth-child(odd) { border-inline-start: 0; }
  .scene-stats .stat-card:first-child { border-inline-start: 5px solid color-mix(in srgb, var(--accent) 78%, #f5d252); }
}

@media (max-width: 430px) {
  .scene-hud .top-actions { gap: 5px; }
  .scene-stats .stat-card:nth-child(n) { padding: 5px 8px; }
  .scene-stats .stat-card > span { font-size: .52rem; }
  .generator-list { padding-inline-start: 12px; }
  .generator-card::before { inset-inline-start: -14px; font-size: .4rem; }
  .generator-card { grid-template-columns: 41px minmax(0,1fr) 40px 82px; gap: 6px; }
  .module-icon { width: 41px; height: 41px; }
  .boost-card:nth-child(n) { min-height: 66px; padding-inline: 6px; }
}

@media (min-width: 761px) and (max-width: 1000px),
       (min-width: 761px) and (max-height: 560px) {
  .boost-copy small { display: none; }
  .boost-copy strong {
    font-size: .64rem;
    line-height: 1.16;
  }
  .boost-card:nth-child(n) { min-height: 54px; }
  .boost-button {
    min-height: 23px;
    font-size: .6rem;
  }
}

/* --------------------------------------------------------------------------
   1.9.2 — playfield pass.
   Play actions now belong to the scene, route traffic reads as light rather
   than inventory, and the crew drawings stand on their own without badges.
   -------------------------------------------------------------------------- */

/* The masthead is only identity and settings. Boost/store actions live at the
   left edge of the actual playfield, opposite the optional reward arrival. */
.scene-hud {
  min-height: 36px;
  padding-inline: 1px 3px;
}
.scene-hud .top-actions { gap: 2px; }
.scene-hud .settings-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
}
.scene-action-rail {
  position: absolute;
  top: clamp(70px, 23%, 96px);
  inset-inline-start: 11px;
  z-index: 15;
  display: grid;
  justify-items: start;
  gap: 7px;
  pointer-events: none;
}
.scene-action-rail > button { pointer-events: auto; }
.scene-action-rail .command-button,
.scene-action-rail .shop-button {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, auto);
  align-items: center;
  gap: 7px;
  width: auto;
  min-width: 96px;
  min-height: 43px;
  height: 43px;
  margin: 0;
  padding: 5px 10px 5px 5px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, #596452);
  border-radius: 4px 14px 4px 11px;
  color: #f7f1d9;
  background: rgba(24, 31, 23, .92);
  box-shadow: 3px 4px 0 rgba(0,0,0,.32);
  clip-path: none;
  cursor: pointer;
  transform: none;
}
.scene-action-rail .command-button::after {
  position: absolute;
  top: -5px;
  inset-inline-end: -5px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 2px solid #151a14;
  border-radius: 50%;
  color: #172014;
  content: "\25B6";
  background: #f6d05b;
  font-size: 7px;
  line-height: 1;
}
.scene-action-rail .command-button > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid #172014;
  border-radius: 50%;
  color: #172014;
  background: var(--accent);
  font-size: .72rem;
  font-weight: 950;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}
.scene-action-rail .command-button > b,
.scene-action-rail .shop-button > b {
  display: block;
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .035em;
  line-height: 1.05;
  white-space: nowrap;
}
.scene-action-rail .command-button.active {
  border-color: var(--accent);
  box-shadow: 3px 4px 0 rgba(0,0,0,.32), 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
}
.scene-action-rail .shop-button {
  grid-template-columns: 30px minmax(0, auto);
  border-color: rgba(246, 201, 78, .55);
}
.scene-action-rail .shop-button[hidden] { display: none; }

/* The old vertical specimen label was decorative noise. */
.field-mark { display: none !important; }

/* Route geometry: four milestones share exact centres and transient tap
   traffic is capped visually, so the path never turns into a bead pile. */
.bloomline { padding-inline: 12px; }
.bloomline-route {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  min-height: 32px;
}
.route-node {
  justify-self: stretch;
  min-width: 0;
  text-align: center;
}
.route-node b { justify-self: center; }
.route-node small {
  display: block;
  width: 100%;
  margin-top: 3px;
  font-size: .45rem;
  letter-spacing: .085em;
  text-align: center;
}
.route-line {
  top: 9px;
  right: 12.5%;
  left: 12.5%;
}
.seed-pod-layer {
  top: 0;
  right: 12.5%;
  left: 12.5%;
  height: 20px;
}
.seed-pod,
.seed-pod--manual {
  top: 6px;
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  color: #fff4a3;
  background: currentColor;
  box-shadow: 0 0 4px currentColor, 0 0 11px currentColor;
  animation: routeSparkleTravel 1.72s var(--pod-delay, 0ms) linear forwards;
}
.seed-pod::before,
.seed-pod::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  content: "";
  background: currentColor;
  transform: translate(-50%, -50%);
}
.seed-pod::after { transform: translate(-50%, -50%) rotate(90deg); }
.seed-pod:nth-child(n+5) { opacity: .12; }
.world-panel[data-growth-stage="0"] .seed-pod-layer { opacity: 1; }
.world-panel[data-growth-stage="1"] .seed-pod-layer { opacity: .82; }
.world-panel[data-growth-stage="2"] .seed-pod-layer,
.world-panel[data-growth-stage="3"] .seed-pod-layer { opacity: .58; }
@keyframes routeSparkleTravel {
  0% { left: -4px; opacity: 0; transform: translateY(var(--pod-drift, 0)) scale(.25); }
  10% { opacity: .95; }
  48% { opacity: .42; transform: translateY(calc(var(--pod-drift, 0) * -.4)) scale(.75); }
  58% { opacity: 1; transform: translateY(calc(var(--pod-drift, 0) * -.2)) scale(1); }
  92% { opacity: .78; }
  100% { left: calc(100% - 4px); opacity: 0; transform: translateY(calc(var(--pod-drift, 0) * -1)) scale(.3); }
}

/* Tap feedback travels behind the opaque planet and only becomes visible as
   it clears the rim. The character's central face is therefore never used as
   a particle canvas, even during rapid press-and-hold input. */
.planet-stage::after { z-index: 2; }
.planet-stage .tap-burst {
  z-index: 2;
  isolation: isolate;
}
.planet-stage .tap-burst-ring,
.planet-stage .tap-burst::after,
.planet-stage .tap-burst--big::before { display: none; }
.tap-spark,
.world--puddle .tap-spark,
.world--coral .tap-spark,
.world--cloud .tap-spark,
.world--honey .tap-spark,
.world--mint .tap-spark,
.world--carnival .tap-spark,
.world--candy .tap-spark,
.world--star .tap-spark,
.world--jelly .tap-spark,
.world--midnight .tap-spark,
.world--gold .tap-spark {
  width: 5px;
  height: 5px;
  border-radius: 0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  background: var(--spark-color, #fff8d2);
  box-shadow: 0 0 4px color-mix(in srgb, var(--spark-color, #fff8d2) 68%, transparent);
  animation-duration: 380ms;
}
.tap-spark:nth-child(3n) {
  width: 4px;
  height: 4px;
}
.planet-stage .tap-burst--big .tap-spark {
  width: 7px;
  height: 7px;
  border-radius: 0;
  animation-duration: 430ms;
}
.reduce-motion .tap-burst { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tap-burst { display: none !important; }
}

/* A dormant world is muted, not rotten: it keeps the approved drawing while
   clearly leaving colour and glow for later growth beats. */
.world-panel[data-growth-stage="0"] {
  --growth-filter: grayscale(.66) sepia(.14) saturate(.42) brightness(.76) contrast(.94);
}
.world-panel[data-growth-stage="0"] .planet-glow { opacity: .12; filter: blur(19px) grayscale(.75); }
.world-panel[data-growth-stage="0"] .planet-sheen { opacity: .06; }
.world-panel[data-growth-stage="1"] {
  --growth-filter: grayscale(.34) sepia(.08) saturate(.72) brightness(.88);
}

/* The helper art is the identifier. Removing its diamond tile makes the
   drawings larger, cleaner and easier to scan against the paper ledger. */
.generator-card {
  grid-template-columns: 52px minmax(64px, 1fr) 38px 84px;
  column-gap: 8px;
}
.module-icon {
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 0;
  color: color-mix(in srgb, var(--module-color) 84%, #243020 16%);
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(31,35,31,.15));
}
.module-icon::before { display: none; content: none; }
.module-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 2.35;
}
.generator-card.locked .module-icon { opacity: .62; filter: grayscale(.55); }
.boost-icon {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  color: #3f5e2a;
  background: transparent;
}
.boost-icon svg { width: 26px; height: 26px; stroke-width: 2.2; }

/* A meteor is a moving hazard, not another collectible star badge. */
.anomaly-button {
  width: 86px;
  min-width: 86px;
  height: 64px;
  min-height: 64px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: #ffd460;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.34));
  clip-path: none;
  animation: meteorThreat .34s ease-in-out infinite alternate;
}
.anomaly-button::before {
  display: none;
  content: none;
}
.anomaly-button > span {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 1;
  transform: translateX(-15px);
  transform-origin: center;
}
.anomaly-button > span .ui-mark {
  width: 72px;
  height: 52px;
  overflow: visible;
  stroke-linejoin: round;
}
.meteor-flame {
  transform-box: fill-box;
  transform-origin: right center;
  stroke-linejoin: round;
}
.meteor-flame--outer {
  fill: #d94832;
  stroke: #442824;
  stroke-width: 1.45;
  animation: meteorFlameOuter .25s cubic-bezier(.4,0,.6,1) infinite alternate;
}
.meteor-flame--middle {
  fill: #ff842c;
  stroke: #b34826;
  stroke-width: .8;
  animation: meteorFlameMiddle .19s ease-in-out infinite alternate-reverse;
}
.meteor-flame--core {
  fill: #ffd64d;
  stroke: #e27329;
  stroke-width: .58;
  animation: meteorFlameCore .16s ease-in-out infinite alternate;
}
.meteor-flame--hot {
  fill: #fffbe9;
  stroke: #f2b63d;
  stroke-width: .4;
  animation: meteorFlameHot .14s ease-in-out infinite alternate-reverse;
}
.meteor-plasma-lip {
  fill: #ff7c2c;
  stroke: #a94129;
  stroke-width: .72;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: left center;
  animation: meteorPlasmaWrap .24s ease-in-out infinite alternate;
}
.meteor-plasma-lip--bottom {
  fill: #f05a32;
  animation-direction: alternate-reverse;
}
.meteor-stone {
  transform-box: fill-box;
  transform-origin: center;
  animation: meteorStoneTumble 1.15s ease-in-out infinite alternate;
}
.meteor-rock {
  fill: #8a6756;
  stroke: #282525;
  stroke-width: 2.35;
}
.meteor-rock-shadow { fill: #64483f; opacity: .78; }
.meteor-surface { fill: #b28a70; opacity: .72; }
.meteor-crater { fill: #533d39; stroke: #342a2a; stroke-width: .7; }
.meteor-crater--large { fill: #5c413b; }
.meteor-crater--small { fill: #705047; }
.meteor-highlight {
  fill: none;
  stroke: rgba(255,244,211,.58);
  stroke-width: 1.35;
  stroke-linecap: round;
}
.anomaly-button.from-right > span { transform: translateX(15px) scaleX(-1); }
.planet-stage.meteor-impact .planet-idle,
.planet-stage.meteor-impact .planet-impact-layer { animation: meteorPlanetJolt .7s cubic-bezier(.2,.85,.3,1); }
.planet-stage.meteor-impact .planet-glow { animation: meteorImpactGlow .7s ease-out; }
.meteor-result {
  position: absolute;
  z-index: 14;
  width: max-content;
  max-width: min(230px, 52vw);
  padding: 7px 10px 8px;
  border: 2px solid #22251f;
  border-radius: 10px 10px 10px 2px;
  color: #1e261d;
  background: #fff2bd;
  box-shadow: 3px 4px 0 rgba(0,0,0,.3);
  font-size: clamp(.58rem, 1.5vw, .72rem);
  font-weight: 1000;
  line-height: 1.16;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -118%);
  animation: meteorResultLift 1.15s cubic-bezier(.17,.78,.24,1) forwards;
}
.meteor-result--stopped { border-color: #254f42; background: #d9f39c; }
.meteor-result--impact { border-color: #6e2f24; color: #fff4d5; background: #c84b35; }
/* The impact node is positioned in planet-button coordinates. The circular
   wrapper is both the planet edge clip and a soft clear-zone over the face. */
.planet-impact-layer {
  position: absolute;
  z-index: 13;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
  contain: paint;
  -webkit-mask-image: radial-gradient(ellipse 31% 27% at 50% 53%, transparent 0 72%, rgba(0,0,0,.16) 86%, #000 100%);
  mask-image: radial-gradient(ellipse 31% 27% at 50% 53%, transparent 0 72%, rgba(0,0,0,.16) 86%, #000 100%);
}
.planet-impact-layer .meteor-impact-fx {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.planet-impact-layer .meteor-impact-fx::before,
.planet-impact-layer .meteor-impact-fx::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  transform: translate(-50%,-50%);
}
.planet-impact-layer .meteor-impact-fx::before {
  width: 31px;
  height: 23px;
  border-radius: 47% 53% 58% 42% / 56% 46% 54% 44%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 43% 42%, rgba(32,22,19,.92) 0 26%, rgba(92,44,29,.76) 28% 48%, rgba(65,38,29,.42) 51% 66%, transparent 72%);
  mix-blend-mode: multiply;
  animation: meteorScorchFade 1.5s ease-out forwards;
}
.planet-impact-layer .meteor-impact-fx::after {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,218,135,.82);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 0 1px rgba(130,62,35,.42);
  animation: meteorImpactRing .7s ease-out forwards;
}
.planet-impact-layer .meteor-impact-fx > i {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 4px;
  height: 4px;
  border: 0;
  border-radius: 45% 55% 38% 62%;
  background: #5f3a2c;
  box-shadow: 0 0 0 1px rgba(255,183,77,.2);
  opacity: 0;
  animation: meteorImpactDebris .78s cubic-bezier(.12,.72,.2,1) var(--impact-delay) forwards;
}

@keyframes meteorThreat {
  from { transform: translate(-50%,-50%) rotate(-1.1deg); }
  to { transform: translate(-50%,-52%) rotate(1.1deg); }
}
@keyframes meteorFlameOuter {
  from { transform: translateX(1px) scaleX(.88) scaleY(1.04) rotate(-1deg); }
  to { transform: translateX(-1.5px) scaleX(1.08) scaleY(.91) rotate(1deg); }
}
@keyframes meteorFlameMiddle {
  from { transform: translateX(1px) scaleX(.91) scaleY(.9) rotate(1.2deg); }
  to { transform: translateX(-.8px) scaleX(1.07) scaleY(1.06) rotate(-1deg); }
}
@keyframes meteorFlameCore {
  from { transform: translateX(.7px) scaleX(.9) scaleY(1.04); opacity: .88; }
  to { transform: translateX(-.6px) scaleX(1.06) scaleY(.91); opacity: 1; }
}
@keyframes meteorFlameHot {
  from { transform: translateX(1.2px) scale(.86,1.04); opacity: .86; }
  to { transform: translateX(-.4px) scale(1.05,.9); opacity: 1; }
}
@keyframes meteorPlasmaWrap {
  from { transform: translateX(.4px) scale(.96,.92); opacity: .76; }
  to { transform: translateX(-.5px) scale(1.02,1.05); opacity: .96; }
}
@keyframes meteorStoneTumble {
  from { transform: rotate(-1.2deg) translateY(.3px); }
  to { transform: rotate(1.15deg) translateY(-.4px); }
}
@keyframes meteorPlanetJolt {
  0%,100% { transform: translate3d(0,1px,0) rotate(-.2deg); }
  18% { transform: translate3d(-7px,2px,0) rotate(-1.5deg); }
  35% { transform: translate3d(6px,-2px,0) rotate(1.2deg); }
  54% { transform: translate3d(-3px,1px,0) rotate(-.6deg); }
  72% { transform: translate3d(2px,-1px,0) rotate(.35deg); }
}
@keyframes meteorImpactGlow {
  0% { opacity: .9; filter: blur(13px) hue-rotate(300deg) saturate(2.4); }
  100% { opacity: .12; filter: blur(19px) grayscale(.75); }
}
@keyframes meteorResultLift {
  0% { opacity: 0; transform: translate(-50%,-72%) scale(.78); }
  16%,72% { opacity: 1; transform: translate(-50%,-118%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-152%) scale(.96); }
}
@keyframes meteorScorchFade {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(-7deg); }
  10% { opacity: .94; transform: translate(-50%,-50%) scale(.82) rotate(-3deg); }
  34% { opacity: .78; transform: translate(-50%,-50%) scale(1) rotate(2deg); }
  72% { opacity: .42; transform: translate(-50%,-50%) scale(.98) rotate(2deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.9) rotate(3deg); }
}
@keyframes meteorImpactRing {
  0% { opacity: .86; transform: translate(-50%,-50%) scale(.28); }
  26% { opacity: .72; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(3.15); }
}
@keyframes meteorImpactDebris {
  0% { opacity: .9; transform: translate(0,0) rotate(0) scale(.72); }
  48% { opacity: .72; }
  100% { opacity: 0; transform: translate(var(--impact-x),var(--impact-y)) rotate(170deg) scale(.28); }
}

.reduce-motion .anomaly-button,
.reduce-motion .meteor-flame,
.reduce-motion .meteor-plasma-lip,
.reduce-motion .meteor-stone,
.reduce-motion .planet-impact-layer,
.reduce-motion .planet-impact-layer .meteor-impact-fx::before,
.reduce-motion .planet-impact-layer .meteor-impact-fx::after,
.reduce-motion .planet-impact-layer .meteor-impact-fx > i { animation: none !important; }
.reduce-motion .anomaly-button { transform: translate(-50%,-50%) !important; }
.reduce-motion .planet-impact-layer .meteor-impact-fx::before {
  opacity: .58 !important;
  transform: translate(-50%,-50%) scale(.92) rotate(2deg);
}
.reduce-motion .planet-impact-layer .meteor-impact-fx::after,
.reduce-motion .planet-impact-layer .meteor-impact-fx > i { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .anomaly-button,
  .meteor-flame,
  .meteor-plasma-lip,
  .meteor-stone,
  .planet-impact-layer,
  .planet-impact-layer .meteor-impact-fx::before,
  .planet-impact-layer .meteor-impact-fx::after,
  .planet-impact-layer .meteor-impact-fx > i { animation: none !important; }
  .anomaly-button { transform: translate(-50%,-50%) !important; }
  .planet-impact-layer .meteor-impact-fx::before {
    opacity: .58 !important;
    transform: translate(-50%,-50%) scale(.92) rotate(2deg);
  }
  .planet-impact-layer .meteor-impact-fx::after,
  .planet-impact-layer .meteor-impact-fx > i { opacity: 0 !important; }
}

@media (max-width: 430px),
       (min-width: 761px) and (orientation: landscape) and (max-height: 500px) {
  .anomaly-button {
    width: 78px;
    min-width: 78px;
    height: 58px;
    min-height: 58px;
  }
  .anomaly-button > span .ui-mark { width: 66px; height: 48px; }
}

@media (min-width: 761px) and (orientation: landscape) and (max-height: 600px) {
  .scene-action-rail { top: 62px; inset-inline-start: 8px; }
  .scene-action-rail .command-button,
  .scene-action-rail .shop-button {
    grid-template-columns: 29px minmax(0, auto);
    min-width: 88px;
    height: 39px;
    min-height: 39px;
    padding-block: 4px;
  }
  .scene-action-rail .command-button > span { width: 29px; height: 29px; }
  .module-icon { width: 45px; height: 45px; }
  .module-icon svg { width: 32px; height: 32px; }
  .generator-card { grid-template-columns: 46px minmax(58px, 1fr) 36px 82px; }
}

@media (max-width: 760px) {
  .scene-hud .settings-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .buy-mode {
    min-width: 44px;
    min-height: 44px;
  }
  .scene-action-rail {
    top: 67px;
    inset-inline-start: 6px;
    gap: 6px;
  }
  .scene-action-rail .command-button,
  .scene-action-rail .shop-button {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 4px;
    border-radius: 50%;
  }
  .scene-action-rail .command-button > span { width: 32px; height: 32px; }
  .scene-action-rail .command-button > b,
  .scene-action-rail .shop-button > b { display: none; }
}

@media (max-width: 430px) {
  .bloomline { padding-inline: 8px; }
  .route-node small { font-size: .4rem; letter-spacing: .045em; }
  .generator-card {
    grid-template-columns: 45px minmax(0, 1fr) 38px 82px;
    gap: 5px;
  }
  .module-icon { width: 44px; height: 44px; }
  .module-icon svg { width: 32px; height: 32px; }
}

@media (max-width: 360px) {
  .generator-card { grid-template-columns: 42px minmax(0, 1fr) 36px 77px; }
  .module-icon { width: 41px; height: 41px; }
  .module-icon svg { width: 29px; height: 29px; }
}

/* Six-helper crew ledger ---------------------------------------------------
   The ledger owns the only inner scroll on short desktop embeds. On phones
   every row joins the document flow so a nested scroller never traps touch. */
.generator-list > .generator-card.locked ~ .generator-card.locked {
  display: grid;
}
.generator-card {
  grid-template-columns: 44px minmax(0, 1fr) 36px 80px;
  column-gap: 6px;
  min-height: 52px;
  padding-block: 4px;
}
.generator-card::before { pointer-events: none; }
.module-icon {
  width: 42px;
  height: 42px;
  pointer-events: none;
}
.module-icon svg {
  width: 31px;
  height: 31px;
  stroke-width: 2.2;
}
.buy-button {
  position: relative;
  z-index: 3;
  min-width: 0;
  min-height: 44px;
  padding-inline: 5px;
  touch-action: manipulation;
  user-select: none;
}

@media (min-width: 761px) {
  .factory-panel {
    overflow: hidden;
  }
  .factory-heading,
  .boost-section,
  .core-card {
    flex: 0 0 auto;
  }
  .generator-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scroll-padding-block: 4px;
  }
}

@media (min-width: 761px) and (max-height: 560px) {
  .generator-card {
    grid-template-columns: 41px minmax(0, 1fr) 34px 76px;
    min-height: 48px;
    column-gap: 5px;
    padding-block: 2px;
  }
  .module-icon { width: 39px; height: 39px; }
  .module-icon svg { width: 29px; height: 29px; }
  .module-copy strong { font-size: .69rem; line-height: 1.1; }
  .module-copy span { margin-top: 1px; font-size: .52rem; line-height: 1.12; }
  .module-copy span em { margin-top: 1px; font-size: .48rem; line-height: 1.08; }
  .owned-badge { min-width: 0; }
  .owned-badge small { font-size: .46rem; }
}

@media (max-width: 760px) {
  .factory-panel,
  .generator-list {
    overflow: visible;
  }
  .generator-list {
    scrollbar-gutter: auto;
    overscroll-behavior: auto;
  }
  .generator-card {
    grid-template-columns: 45px minmax(0, 1fr) 36px 82px;
    min-height: 58px;
    column-gap: 6px;
    padding-block: 6px;
  }
  .module-icon { width: 43px; height: 43px; }
  .module-icon svg { width: 32px; height: 32px; }
}

@media (max-width: 430px) {
  .generator-card {
    grid-template-columns: 43px minmax(0, 1fr) 34px 78px;
    column-gap: 5px;
  }
  .module-icon { width: 41px; height: 41px; }
  .module-icon svg { width: 30px; height: 30px; }
}

@media (max-width: 360px) {
  .generator-card {
    grid-template-columns: 40px minmax(0, 1fr) 32px 74px;
    column-gap: 4px;
  }
  .module-icon { width: 39px; height: 39px; }
  .module-icon svg { width: 28px; height: 28px; }
}

/* Planet age is one whole-surface state, not a pile of life stickers. The
   original world drawing, silhouette, ring and moons stay untouched beneath
   a pale veil that recedes as the world wakes up. */
.dormant-face { display: none !important; } /* retired markup safety */
.planet {
  filter: var(--world-filter, none) var(--growth-filter, none);
  transition: filter 560ms ease;
}
.planet-age-state {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(230, 226, 207, .94), rgba(176, 179, 163, .88));
  opacity: 1;
  pointer-events: none;
  transition: opacity 560ms ease;
}
.planet-age-state::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .28;
  background:
    radial-gradient(circle at 24% 25%, rgba(255,255,255,.36) 0 1.5%, transparent 2%),
    radial-gradient(circle at 76% 68%, rgba(74,77,70,.22) 0 1.2%, transparent 1.8%),
    radial-gradient(circle at 64% 20%, rgba(74,77,70,.16) 0 1%, transparent 1.6%);
  pointer-events: none;
}
.planet-mood {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #171a16;
  opacity: 1;
  transition: opacity 460ms ease, transform 560ms ease;
}
.planet-mood i,
.planet-mood b {
  position: absolute;
  display: block;
  box-sizing: border-box;
  border-color: currentColor;
  transition: opacity 460ms ease, transform 560ms ease, width 560ms ease, border-radius 560ms ease;
}
.planet-mood i {
  top: 44%;
  width: 11%;
  height: 8%;
  border-top: 4px solid;
  border-radius: 50% 50% 0 0;
}
.planet-mood i:first-child { left: 31%; transform: rotate(8deg); }
.planet-mood i:nth-child(2) { right: 31%; transform: rotate(-8deg); }
.planet-mood b {
  top: 60%;
  left: 43%;
  width: 14%;
  height: 8%;
  border-top: 4px solid;
  border-radius: 50% 50% 0 0;
}

.world-panel[data-growth-stage="0"] {
  --growth-filter: grayscale(1) sepia(.14) saturate(.16) brightness(.7) contrast(.9);
}
.world-panel[data-growth-stage="0"] .planet-glow { opacity: .08; filter: blur(19px) grayscale(1); }
.world-panel[data-growth-stage="0"] .planet-sheen { opacity: .025; }

.world-panel[data-growth-stage="1"] {
  --growth-filter: grayscale(.68) sepia(.1) saturate(.46) brightness(.8) contrast(.94);
}
.world-panel[data-growth-stage="1"] .planet-age-state { opacity: .62; }
.world-panel[data-growth-stage="1"] .planet-mood { opacity: .86; transform: translateY(1%); }
.world-panel[data-growth-stage="1"] .planet-mood i:first-child { transform: rotate(4deg); }
.world-panel[data-growth-stage="1"] .planet-mood i:nth-child(2) { transform: rotate(-4deg); }
.world-panel[data-growth-stage="1"] .planet-mood b { width: 12%; transform: translateX(8%); }
.world-panel[data-growth-stage="1"] .planet-glow { opacity: .16; }
.world-panel[data-growth-stage="1"] .planet-sheen { opacity: .065; }

.world-panel[data-growth-stage="2"] {
  --growth-filter: grayscale(.28) saturate(.78) brightness(.92) contrast(.98);
}
.world-panel[data-growth-stage="2"] .planet-age-state { opacity: .25; }
.world-panel[data-growth-stage="2"] .planet-mood { opacity: .58; transform: translateY(2%); }
.world-panel[data-growth-stage="2"] .planet-mood i { opacity: 0; }
.world-panel[data-growth-stage="2"] .planet-mood b {
  width: 11%;
  height: 0;
  border-radius: 0;
  transform: translate(14%, 3px);
}
.world-panel[data-growth-stage="2"] .planet-glow { opacity: .27; }
.world-panel[data-growth-stage="2"] .planet-sheen { opacity: .11; }

.world-panel[data-growth-stage="3"] {
  --growth-filter: saturate(1.08) brightness(1.04);
}
.world-panel[data-growth-stage="3"] .planet-age-state {
  opacity: 0;
  visibility: hidden;
}
.world-panel[data-growth-stage="3"] .planet-glow { opacity: .38; }
.world-panel[data-growth-stage="3"] .planet-sheen { opacity: .16; }

.is-locked-preview .planet-age-state { opacity: 0 !important; visibility: hidden; }
.is-locked-preview .orbit { opacity: 0 !important; visibility: hidden; }

/* --------------------------------------------------------------------------
   2.1 — The shop is a playfield tool, not another header application.
   Its one readable storefront sits at the quiet upper edge of the scene;
   the modal below is a compact paper counter sized for nine cursor choices.
   -------------------------------------------------------------------------- */
.scene-action-rail {
  top: clamp(76px, 21%, 92px);
  inset-inline-start: 10px;
  z-index: 16;
}
.scene-action-rail .shop-button {
  display: grid;
  place-items: center;
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #f5cf51;
  background: transparent;
  box-shadow: none;
  filter: none;
}
.scene-action-rail .shop-button > b { display: none; }
.shop-storefront {
  display: block;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.scene-action-rail .shop-button .shop-storefront {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.5));
  transition: transform 140ms ease, filter 140ms ease;
}
.scene-action-rail .shop-button:not(:disabled):hover {
  color: #ffe375;
  background: transparent;
  box-shadow: none;
}
.scene-action-rail .shop-button:not(:disabled):hover .shop-storefront {
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.52));
  transform: translateY(-2px) rotate(-1deg);
}
.scene-action-rail .shop-button:not(:disabled):active {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.scene-action-rail .shop-button:not(:disabled):active .shop-storefront {
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.48));
  transform: translateY(2px) scale(.95);
}
.scene-action-rail .shop-button:focus-visible {
  outline: 3px solid #fff0a0;
  outline-offset: -2px;
  border-radius: 9px;
}

/* Repeat the authored storefront in the counter header without an app tile. */
.shop-marquee__mark {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 0;
  color: #efbd33;
  background: transparent;
  box-shadow: none;
}
.shop-marquee__mark .shop-storefront {
  width: 50px;
  height: 50px;
  filter: drop-shadow(2px 3px 0 rgba(31,35,31,.2));
}

/* One scroll surface only: the paper counter scrolls, its product ledger does
   not create a second independent scroll/drag region. */
#shop-modal .shop-modal-card {
  width: min(940px, calc(100% - 24px));
  overflow-x: hidden;
}
.shop-product-list {
  align-content: start;
  overflow: visible;
}
.shop-product-list .shop-ticket:last-child { grid-column: auto; }

/* Cursor tickets keep the information in a short row. The entire ticket is a
   hit target; none of its price or preview subparts need a second click. */
.shop-ticket[data-cursor] {
  grid-template-columns: 48px minmax(0,1fr) minmax(78px,auto);
  min-height: 76px;
  gap: 9px;
  padding: 7px 8px 7px 7px;
  border-inline-start-width: 5px;
  border-inline-start-color: var(--cursor-fill, #6aa943);
}
.shop-ticket[data-cursor] .shop-ticket__art {
  width: 48px;
  height: 48px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: #172018;
  background: transparent;
  box-shadow: none;
}
.shop-ticket__art-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.shop-ticket[data-cursor] .shop-ticket__art-image {
  filter: drop-shadow(1.5px 2px 0 rgba(31,35,31,.18));
}
.shop-ticket__art--no-ads {
  width: 62px;
  height: 62px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.shop-ticket--cursor-lime,
.shop-ticket__art--cursor-lime { --cursor-fill: #9fda35; }
.shop-ticket--cursor-aqua,
.shop-ticket__art--cursor-aqua { --cursor-fill: #56c9c1; }
.shop-ticket--cursor-sunbeam,
.shop-ticket__art--cursor-sunbeam { --cursor-fill: #f4c43f; }
.shop-ticket--cursor-coral,
.shop-ticket__art--cursor-coral { --cursor-fill: #ef766f; }
.shop-ticket--cursor-honey,
.shop-ticket__art--cursor-honey { --cursor-fill: #dea52b; }
.shop-ticket--cursor-party,
.shop-ticket__art--cursor-party { --cursor-fill: #e45d9b; }
.shop-ticket--cursor-lunar,
.shop-ticket__art--cursor-lunar { --cursor-fill: #7892da; }
.shop-ticket--cursor-nebula,
.shop-ticket__art--cursor-nebula { --cursor-fill: #9b72d6; }
.shop-ticket--cursor-golden,
.shop-ticket__art--cursor-golden { --cursor-fill: #f2b92f; }

.shop-ticket__price-stack {
  display: grid;
  place-items: center;
  align-content: center;
  align-self: stretch;
  min-width: 82px;
  padding-inline-start: 8px;
  border-inline-start: 1px dashed rgba(31,35,31,.38);
  text-align: center;
}
.shop-ticket__price-stack .shop-ticket__price {
  display: block;
  align-self: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  color: #254c19;
  font-size: .78rem;
  line-height: 1.05;
}
.shop-ticket__old-price {
  color: #746c5c;
  font-size: .61rem;
  font-weight: 850;
  line-height: 1.05;
  text-decoration-thickness: 2px;
}
.shop-ticket__discount {
  margin-top: 3px;
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid #8d3028;
  border-radius: 2px;
  color: #fff8df;
  background: #b84437;
  font-size: .48rem;
  font-weight: 950;
  letter-spacing: .045em;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.shop-ticket.has-discount {
  border-color: #8d3028;
  background-color: #f7e1be;
}
.shop-ticket.has-discount .shop-ticket__price { color: #8d281f; font-size: .9rem; }
.shop-ticket[data-cursor].is-owned { filter: none; opacity: 1; }
.shop-ticket[data-cursor].is-equipped {
  border-color: #315d25;
  background-color: #dce9b8;
  box-shadow: 4px 4px 0 rgba(31,35,31,.18), inset 0 0 0 2px rgba(93,151,55,.3);
}
.shop-ticket[data-cursor].is-equipped .shop-ticket__art {
  box-shadow: none;
}
.shop-ticket[data-cursor].is-equipped .shop-ticket__art-image {
  filter: drop-shadow(0 0 3px rgba(83,139,48,.5)) drop-shadow(1.5px 2px 0 rgba(31,35,31,.16));
}

@media (min-width: 880px) {
  .shop-product-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .shop-ticket--hero { grid-column: 1 / -1; }
  .shop-ticket[data-cursor] {
    grid-template-columns: 44px minmax(0,1fr) minmax(72px,auto);
    min-height: 74px;
    gap: 7px;
  }
  .shop-ticket[data-cursor] .shop-ticket__art { width: 44px; height: 44px; }
  .shop-ticket[data-cursor] .shop-ticket__copy > b { font-size: .72rem; }
  .shop-ticket[data-cursor] .shop-ticket__copy > span:not(.shop-ticket__badge) { font-size: .55rem; }
}

@media (min-width: 621px) and (max-width: 879px) {
  .shop-product-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shop-ticket--hero { grid-column: 1 / -1; }
}

@media (min-width: 761px) and (orientation: landscape) and (max-height: 560px) {
  .scene-action-rail { top: 64px; inset-inline-start: 7px; }
  .scene-action-rail .shop-button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
  }
  .scene-action-rail .shop-button .shop-storefront { width: 39px; height: 39px; }
  #shop-modal .shop-modal-card { width: min(920px, calc(100% - 16px)); }
  .shop-ticket__art--no-ads { width: 48px; height: 48px; }
}

@media (max-width: 760px) {
  .scene-action-rail {
    top: 74px;
    inset-inline-start: 5px;
  }
  .scene-action-rail .shop-button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .scene-action-rail .shop-button .shop-storefront { width: 40px; height: 40px; }
  #shop-modal .shop-modal-card { width: calc(100% - 12px); }
  .shop-ticket[data-cursor] {
    grid-template-columns: 44px minmax(0,1fr) minmax(72px,auto);
    min-height: 74px;
    gap: 7px;
  }
  .shop-ticket[data-cursor] .shop-ticket__art { width: 44px; height: 44px; }
  .shop-ticket[data-cursor] .shop-ticket__price-stack {
    grid-column: auto;
    align-self: stretch;
    min-height: 0;
    padding: 0 0 0 6px;
    border-top: 0;
    border-inline-start: 1px dashed rgba(31,35,31,.38);
  }
  html[dir="rtl"] .shop-ticket[data-cursor] .shop-ticket__price-stack { padding: 0 6px 0 0; }
}

@media (max-width: 620px) {
  .shop-marquee__mark { width: 44px; height: 44px; }
  .shop-marquee__mark .shop-storefront { width: 42px; height: 42px; }
  .shop-ticket:not([data-cursor]) .shop-ticket__price-stack {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3,auto);
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 36px;
    padding: 7px 2px 0;
    border-inline-start: 0;
    border-top: 1px dashed rgba(31,35,31,.38);
  }
  .shop-ticket:not([data-cursor]) .shop-ticket__discount { margin-top: 0; }
  .shop-ticket__art--no-ads { width: 52px; height: 52px; }
}

@media (max-width: 380px) {
  .scene-action-rail { top: 72px; inset-inline-start: 3px; }
  .shop-marquee__mark { width: 40px; height: 40px; }
  .shop-marquee__mark .shop-storefront { width: 38px; height: 38px; }
  .shop-ticket[data-cursor] {
    grid-template-columns: 40px minmax(0,1fr) minmax(66px,auto);
    gap: 6px;
    padding-inline: 5px;
  }
  .shop-ticket[data-cursor] .shop-ticket__art { width: 40px; height: 40px; }
  .shop-ticket[data-cursor] .shop-ticket__copy > b { font-size: .69rem; }
  .shop-ticket[data-cursor] .shop-ticket__copy > span:not(.shop-ticket__badge) { font-size: .53rem; }
  .shop-ticket__price-stack { min-width: 66px; }
  .shop-ticket__art--no-ads { width: 48px; height: 48px; }
}

/* Nine owned cursors are nine actual pointers. Each keeps the same hot corner
   but has its own silhouette and its own restrained tap-trail rhythm. */
html.cursor-lime { --game-cursor: url("assets/game/tapterra-cursor-lime.svg?v=1.0.1-art2") 3 3, pointer; }
html.cursor-aqua { --game-cursor: url("assets/game/tapterra-cursor-aqua.svg?v=1.0.1-art2") 3 3, pointer; }
html.cursor-sunbeam { --game-cursor: url("assets/game/tapterra-cursor-sunbeam.svg?v=1.0.1-art2") 3 3, pointer; }
html.cursor-coral { --game-cursor: url("assets/game/tapterra-cursor-coral.svg?v=1.0.1-art2") 3 3, pointer; }
html.cursor-honey { --game-cursor: url("assets/game/tapterra-cursor-honey.svg?v=1.0.1-art2") 3 3, pointer; }
html.cursor-party { --game-cursor: url("assets/game/tapterra-cursor-party.svg?v=1.0.1-art2") 3 3, pointer; }
html.cursor-lunar { --game-cursor: url("assets/game/tapterra-cursor-lunar.svg?v=1.0.1-art2") 3 3, pointer; }
html.cursor-nebula { --game-cursor: url("assets/game/tapterra-cursor-nebula.svg?v=1.0.1-art2") 3 3, pointer; }
html.cursor-golden { --game-cursor: url("assets/game/tapterra-cursor-golden.svg?v=1.0.1-art2") 3 3, pointer; }
html[data-cursor],
html[data-cursor] body,
html[data-cursor] button:not(:disabled),
html[data-cursor] a,
html[data-cursor] [role="button"],
html[data-cursor] input[type="range"]:not(:disabled),
html[data-cursor] select:not(:disabled) { cursor: var(--game-cursor, pointer); }

.cursor-lime .tap-spark {
  width: 7px; height: 11px; border-radius: 70% 12% 70% 12%;
  clip-path: none; background: #a9e43a; box-shadow: 0 0 4px rgba(169,228,58,.55);
  animation-name: cursorLimeTrail;
}
.cursor-aqua .tap-spark {
  width: 7px; height: 7px; border: 1px solid #dffffa; border-radius: 50%;
  clip-path: none; background: #65d4cc; box-shadow: 0 0 5px rgba(101,212,204,.55);
  animation-name: cursorAquaTrail;
}
.cursor-sunbeam .tap-spark {
  width: 8px; height: 8px; border-radius: 0;
  clip-path: polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);
  background: #ffe06c; box-shadow: 0 0 6px rgba(255,211,79,.72);
  animation-name: cursorSunbeamTrail;
}
.cursor-coral .tap-spark {
  width: 8px; height: 10px; border-radius: 70% 38% 66% 24%;
  clip-path: polygon(50% 0,68% 35%,100% 45%,72% 64%,78% 100%,50% 76%,22% 100%,28% 64%,0 45%,32% 35%);
  background: #ff877f; box-shadow: 0 0 4px rgba(255,135,127,.48);
  animation-name: cursorCoralTrail;
}
.cursor-honey .tap-spark {
  width: 9px; height: 8px; border-radius: 0;
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background: #f3b62f; box-shadow: 0 0 4px rgba(243,182,47,.5);
  animation-name: cursorHoneyTrail;
}
.cursor-party .tap-spark {
  width: 5px; height: 13px; border-radius: 1px; clip-path: none;
  background: #ef69a4; box-shadow: none; animation-name: cursorPartyTrail;
}
.cursor-party .tap-spark:nth-child(3n+1) { background: #65d4cc; }
.cursor-party .tap-spark:nth-child(3n+2) { background: #ffd653; }
.cursor-lunar .tap-spark {
  width: 9px; height: 9px; border: 2px solid #d9e1ff; border-left-color: transparent;
  border-radius: 50%; clip-path: none; background: transparent; box-shadow: none;
  animation-name: cursorLunarTrail;
}
.cursor-nebula .tap-spark {
  width: 12px; height: 4px; border-radius: 99px; clip-path: none;
  background: linear-gradient(90deg, transparent, #dbb6ff 42%, #fff2b3);
  box-shadow: 0 0 4px rgba(169,128,232,.55); animation-name: cursorNebulaTrail;
}
.cursor-golden .tap-spark {
  width: 9px; height: 9px; border-radius: 0;
  clip-path: polygon(50% 0,61% 35%,98% 38%,68% 58%,79% 96%,50% 73%,20% 96%,31% 58%,2% 38%,39% 35%);
  background: #ffdf64; box-shadow: 0 0 5px rgba(248,196,59,.6); animation-name: cursorGoldenTrail;
}

@keyframes cursorLimeTrail {
  0%,48% { opacity:0; transform:translate(-50%,-50%) rotate(var(--spark-angle)) scale(.2); }
  68% { opacity:1; }
  100% { opacity:0; transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) rotate(calc(var(--spark-angle) + 125deg)) scale(.7); }
}
@keyframes cursorAquaTrail {
  0%,54% { opacity:0; transform:translate(-50%,-50%) scale(.25); }
  70% { opacity:.95; }
  100% { opacity:0; transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(1.12); }
}
@keyframes cursorSunbeamTrail {
  0%,42% { opacity:0; transform:translate(-50%,-50%) rotate(var(--spark-angle)) scale(.1); }
  62% { opacity:1; transform:translate(-50%,-50%) rotate(var(--spark-angle)) scale(1.15); }
  100% { opacity:0; transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) rotate(calc(var(--spark-angle) + 40deg)) scale(.2); }
}
@keyframes cursorCoralTrail {
  0%,52% { opacity:0; transform:translate(-50%,-50%) rotate(var(--spark-angle)) scale(.2); }
  72% { opacity:1; }
  100% { opacity:0; transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) rotate(calc(var(--spark-angle) + 24deg)) scale(.78); }
}
@keyframes cursorHoneyTrail {
  0%,50% { opacity:0; transform:translate(-50%,-50%) rotate(var(--spark-angle)) scale(.15); }
  66%,78% { opacity:1; transform:translate(-50%,-50%) rotate(var(--spark-angle)) scale(.82); }
  100% { opacity:0; transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) rotate(calc(var(--spark-angle) + 60deg)) scale(.52); }
}
@keyframes cursorPartyTrail {
  0%,44% { opacity:0; transform:translate(-50%,-50%) rotate(var(--spark-angle)) scale(.2); }
  64% { opacity:1; }
  100% { opacity:0; transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) rotate(calc(var(--spark-angle) + 230deg)) scale(.72); }
}
@keyframes cursorLunarTrail {
  0%,58% { opacity:0; transform:translate(-50%,-50%) rotate(var(--spark-angle)) scale(.2); }
  74% { opacity:.9; }
  100% { opacity:0; transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) rotate(calc(var(--spark-angle) + 145deg)) scale(.86); }
}
@keyframes cursorNebulaTrail {
  0%,50% { opacity:0; transform:translate(-50%,-50%) rotate(var(--spark-angle)) scaleX(.15); }
  68% { opacity:1; }
  100% { opacity:0; transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) rotate(var(--spark-angle)) scaleX(1.15); }
}
@keyframes cursorGoldenTrail {
  0%,46% { opacity:0; transform:translate(-50%,-50%) rotate(var(--spark-angle)) scale(.15); }
  64%,80% { opacity:1; }
  100% { opacity:0; transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) rotate(calc(var(--spark-angle) + 95deg)) scale(.82); }
}

/* --------------------------------------------------------------------------
   Planet age correction: stages zero through two are opaque authored skins,
   so the raster face can never double with the age expression. Colour and
   expression return in three deliberate beats; stage three alone reveals the
   original living world and lets the opacity transition finish naturally.
   -------------------------------------------------------------------------- */
.planet-age-state {
  visibility: visible;
  opacity: 1;
  background:
    radial-gradient(ellipse at 28% 30%, color-mix(in srgb, var(--planet-a) 72%, #d5d1bc) 0 15%, transparent 16%),
    radial-gradient(ellipse at 72% 66%, color-mix(in srgb, var(--planet-c) 56%, #b7b5a5) 0 18%, transparent 19%),
    radial-gradient(circle at 36% 27%, color-mix(in srgb, var(--planet-a) 58%, #dedbc9), color-mix(in srgb, var(--planet-b) 62%, #b8b6a7) 48%, color-mix(in srgb, var(--planet-c) 60%, #8f9389));
  filter: grayscale(.86) sepia(.08) saturate(.34) brightness(.77) contrast(.9);
  transition: opacity 560ms ease, filter 560ms ease;
}
.planet-mood i::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: none;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  content: "";
  background: currentColor;
  transform: translateX(-50%);
}
.world-panel[data-growth-stage="0"] .planet-age-state {
  visibility: visible;
  opacity: 1;
  filter: grayscale(.9) sepia(.09) saturate(.3) brightness(.86) contrast(.92);
}
.world-panel[data-growth-stage="0"] { --growth-filter: saturate(.92) brightness(.98); }
.world-panel[data-growth-stage="0"] .planet-idle {
  opacity: .82;
  filter: grayscale(.52) saturate(.62) brightness(.88);
  transition: opacity 560ms ease, filter 560ms ease;
}
.world-panel[data-growth-stage="1"] .planet-age-state {
  visibility: visible;
  opacity: 1;
  filter: grayscale(.58) sepia(.06) saturate(.55) brightness(.93) contrast(.95);
}
.world-panel[data-growth-stage="1"] { --growth-filter: saturate(.96) brightness(.99); }
.world-panel[data-growth-stage="1"] .planet-idle {
  opacity: .92;
  filter: grayscale(.24) saturate(.8) brightness(.95);
  transition: opacity 560ms ease, filter 560ms ease;
}
.world-panel[data-growth-stage="1"] .planet-mood i {
  top: 43%;
  width: 10%;
  height: 6%;
  border: 3px solid currentColor;
  border-radius: 50%;
  background: rgba(244,241,221,.42);
}
.world-panel[data-growth-stage="1"] .planet-mood i:first-child { transform: rotate(4deg); }
.world-panel[data-growth-stage="1"] .planet-mood i:nth-child(2) { transform: rotate(-4deg); }
.world-panel[data-growth-stage="1"] .planet-mood i::after { display: block; height: 3px; }
.world-panel[data-growth-stage="1"] .planet-mood b {
  top: 60%;
  width: 12%;
  height: 6%;
  border-top: 3px solid currentColor;
  border-radius: 50% 50% 0 0;
  transform: translateX(8%);
}
.world-panel[data-growth-stage="2"] .planet-age-state {
  visibility: visible;
  opacity: 1;
  filter: grayscale(.18) saturate(.88) brightness(1) contrast(.98);
}
.world-panel[data-growth-stage="2"] { --growth-filter: saturate(1) brightness(1); }
.world-panel[data-growth-stage="2"] .planet-idle {
  opacity: .97;
  filter: grayscale(.04) saturate(.96) brightness(.98);
  transition: opacity 560ms ease, filter 560ms ease;
}
.world-panel[data-growth-stage="2"] .planet-mood { opacity: .78; transform: translateY(1%); }
.world-panel[data-growth-stage="2"] .planet-mood i {
  top: 41%;
  width: 11%;
  height: 12%;
  border: 3px solid currentColor;
  border-radius: 50%;
  background: rgba(249,247,232,.72);
  opacity: 1;
}
.world-panel[data-growth-stage="2"] .planet-mood i:first-child { transform: rotate(0); }
.world-panel[data-growth-stage="2"] .planet-mood i:nth-child(2) { transform: rotate(0); }
.world-panel[data-growth-stage="2"] .planet-mood i::after { display: block; }
.world-panel[data-growth-stage="2"] .planet-mood b {
  top: 61%;
  left: 44%;
  width: 12%;
  height: 0;
  border-top: 3px solid currentColor;
  border-radius: 0;
  transform: none;
}
.world-panel[data-growth-stage="3"] .planet-age-state {
  visibility: visible;
  opacity: 0;
  filter: grayscale(0) saturate(1) brightness(1);
}
.world-panel[data-growth-stage="3"] .planet-idle {
  opacity: 1;
  filter: none;
  transition: opacity 560ms ease, filter 560ms ease;
}
.is-locked-preview .planet-age-state { opacity: 0 !important; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .scene-action-rail .shop-button .shop-storefront,
  .planet-age-state,
  .planet-idle { transition: none !important; }
}

/* --------------------------------------------------------------------------
   2.1.2 — A close view of the selected world's surface replaces the old dark
   footer silhouette. The ground itself stays behind the tap target; three
   small authored growth clusters change from buried shoots to living trees.
   -------------------------------------------------------------------------- */
.world--moss { --world-surface-dry:#746344; --world-surface-deep:#3f492f; --world-surface-life:#83bd35; --world-surface-tip:#d7ed71; }
.world--berry { --world-surface-dry:#76564f; --world-surface-deep:#4a2e3b; --world-surface-life:#dc4f58; --world-surface-tip:#ff9b77; }
.world--lemon { --world-surface-dry:#846d3e; --world-surface-deep:#594722; --world-surface-life:#d7a72c; --world-surface-tip:#ffe372; }
.world--puddle { --world-surface-dry:#62706d; --world-surface-deep:#294f58; --world-surface-life:#43a8b8; --world-surface-tip:#9cecf2; }
.world--peach { --world-surface-dry:#806258; --world-surface-deep:#563b3b; --world-surface-life:#dc776b; --world-surface-tip:#ffc0a1; }
.world--coral { --world-surface-dry:#6f6661; --world-surface-deep:#38535a; --world-surface-life:#42b9b7; --world-surface-tip:#ff9a75; }
.world--cloud { --world-surface-dry:#747986; --world-surface-deep:#4a5268; --world-surface-life:#9eb5de; --world-surface-tip:#eef4ff; }
.world--honey { --world-surface-dry:#806239; --world-surface-deep:#503819; --world-surface-life:#d39125; --world-surface-tip:#ffd766; }
.world--carnival { --world-surface-dry:#795d54; --world-surface-deep:#493638; --world-surface-life:#d55450; --world-surface-tip:#65d0c3; }
.world--mint { --world-surface-dry:#68736b; --world-surface-deep:#3c514a; --world-surface-life:#75af98; --world-surface-tip:#c5ead5; }
.world--candy { --world-surface-dry:#7d5b6c; --world-surface-deep:#513344; --world-surface-life:#d85d8b; --world-surface-tip:#ffc0d7; }
.world--star { --world-surface-dry:#656575; --world-surface-deep:#343c5a; --world-surface-life:#d4ab36; --world-surface-tip:#fff09a; }
.world--jelly { --world-surface-dry:#6c5f7c; --world-surface-deep:#42345c; --world-surface-life:#9468d2; --world-surface-tip:#e2c5ff; }
.world--midnight { --world-surface-dry:#555769; --world-surface-deep:#252b46; --world-surface-life:#5f78b8; --world-surface-tip:#b6d4ff; }
.world--gold { --world-surface-dry:#806142; --world-surface-deep:#57341e; --world-surface-life:#da9a25; --world-surface-tip:#ffe57c; }

.world-panel .root-horizon {
  --surface-dry: var(--world-surface-dry,color-mix(in srgb,var(--accent) 24%,#75654b));
  --surface-deep: var(--world-surface-deep,color-mix(in srgb,var(--accent-strong) 22%,#34402f));
  --surface-life: var(--world-surface-life,var(--accent));
  --surface-tip: var(--world-surface-tip,color-mix(in srgb,var(--accent) 55%,#f5edb0));
  right: -2%;
  bottom: -1px;
  left: -2%;
  z-index: 0;
  height: clamp(66px,24%,102px);
  overflow: hidden;
  opacity: 1 !important;
  background-color: var(--surface-deep);
  filter: none;
  pointer-events: none;
  transition: background-color 620ms ease, opacity 620ms ease, filter 620ms ease;
}
.world-panel .root-horizon::before {
  position: absolute;
  inset: 7% 0 0;
  content: "";
  background:
    radial-gradient(ellipse at 8% 28%, color-mix(in srgb,var(--surface-dry) 75%,#ead6a6) 0 2.2%, transparent 2.5%),
    radial-gradient(ellipse at 31% 42%, color-mix(in srgb,var(--surface-dry) 84%,#c5ad79) 0 1.5%, transparent 1.8%),
    radial-gradient(ellipse at 72% 31%, color-mix(in srgb,var(--surface-dry) 72%,#e7cf9f) 0 1.9%, transparent 2.2%),
    radial-gradient(ellipse at 91% 48%, color-mix(in srgb,var(--surface-dry) 82%,#bd9f6e) 0 1.4%, transparent 1.7%),
    linear-gradient(180deg,var(--surface-dry),var(--surface-deep) 78%);
  clip-path: polygon(0 31%,7% 22%,15% 29%,24% 14%,34% 27%,44% 18%,55% 30%,66% 12%,76% 25%,87% 16%,100% 29%,100% 100%,0 100%);
  transition: filter 620ms ease, opacity 620ms ease;
}
.world-panel .root-horizon::after {
  position: absolute;
  inset: 34% 0 0;
  content: "";
  opacity: .82;
  background:
    linear-gradient(118deg,transparent 0 19%,rgba(47,36,25,.6) 19.5% 20%,transparent 20.5% 100%),
    linear-gradient(63deg,transparent 0 39%,rgba(47,36,25,.52) 39.5% 40%,transparent 40.5% 100%),
    linear-gradient(127deg,transparent 0 67%,rgba(47,36,25,.48) 67.5% 68%,transparent 68.5% 100%),
    linear-gradient(54deg,transparent 0 83%,rgba(47,36,25,.46) 83.5% 84%,transparent 84.5% 100%);
  background-size: 84px 58px,106px 65px,132px 74px,91px 63px;
  transition: opacity 620ms ease, transform 620ms ease;
}
.world-panel .root-horizon > i {
  position: absolute;
  bottom: 7px;
  z-index: 2;
  display: block;
  width: 4px;
  height: 0;
  border: 0;
  border-radius: 3px 3px 0 0;
  opacity: 0;
  background: color-mix(in srgb,var(--surface-life) 68%,#344627);
  box-shadow: none;
  transform: translateY(16px) scale(.2);
  transform-origin: 50% 100%;
  transition: height 620ms ease,opacity 480ms ease,transform 620ms cubic-bezier(.2,.78,.24,1),background-color 620ms ease;
}
.world-panel .root-horizon > i::before,
.world-panel .root-horizon > i::after {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 5px;
  border: 0;
  content: "";
  background: var(--surface-life);
  box-shadow: none;
  transform-origin: 0 60%;
  transition: width 620ms ease,height 620ms ease,background-color 620ms ease,border-radius 620ms ease,clip-path 620ms ease;
}
.world-panel .root-horizon > i::before {
  top: 14%;
  border-radius: 90% 10% 75% 25%;
  transform: rotate(-28deg) translateX(-4%);
}
.world-panel .root-horizon > i::after {
  top: 40%;
  border-radius: 10% 90% 25% 75%;
  transform: rotate(28deg) translateX(-96%);
}
.world-panel .root-horizon > i:nth-child(1) { left: 18%; }
.world-panel .root-horizon > i:nth-child(2) { left: 30%; }
.world-panel .root-horizon > i:nth-child(3) { right: 8%; left: auto; }

.world-panel[data-growth-stage="0"] .root-horizon::before {
  filter: grayscale(.55) saturate(.46) brightness(.8);
}
.world-panel[data-growth-stage="0"] .root-horizon::after { opacity: .9; transform: translateY(0); }

.world-panel[data-growth-stage="1"] .root-horizon::before {
  filter: grayscale(.28) saturate(.7) brightness(.9);
}
.world-panel[data-growth-stage="1"] .root-horizon::after { opacity: .42; transform: translateY(5px); }
.world-panel[data-growth-stage="1"] .root-horizon > i {
  width: 2px;
  height: 9px;
  opacity: .9;
  transform: translateY(0) scale(1);
}
.world-panel[data-growth-stage="1"] .root-horizon > i:nth-child(2) { height: 12px; }
.world-panel[data-growth-stage="1"] .root-horizon > i:nth-child(3) { height: 7px; }
.world-panel[data-growth-stage="1"] .root-horizon > i::before,
.world-panel[data-growth-stage="1"] .root-horizon > i::after {
  width: 6px;
  height: 4px;
  clip-path: none;
  box-shadow: none;
}

.world-panel[data-growth-stage="2"] .root-horizon::before {
  filter: grayscale(.08) saturate(.9) brightness(.96);
}
.world-panel[data-growth-stage="2"] .root-horizon::after { opacity: .13; transform: translateY(11px); }
.world-panel[data-growth-stage="2"] .root-horizon > i {
  width: 4px;
  height: 22px;
  opacity: 1;
  transform: translateY(0) scale(1);
}
.world-panel[data-growth-stage="2"] .root-horizon > i:nth-child(2) { height: 30px; }
.world-panel[data-growth-stage="2"] .root-horizon > i:nth-child(3) { height: 18px; }
.world-panel[data-growth-stage="2"] .root-horizon > i::before,
.world-panel[data-growth-stage="2"] .root-horizon > i::after {
  width: 13px;
  height: 9px;
  border-radius: 54% 46% 48% 52%;
  clip-path: none;
  box-shadow: none;
}
.world-panel[data-growth-stage="2"] .root-horizon > i::before {
  top: -4px;
  transform: translateX(-50%) rotate(-3deg);
}
.world-panel[data-growth-stage="2"] .root-horizon > i::after {
  top: 18%;
  transform: translateX(-76%) rotate(4deg);
}

.world-panel[data-growth-stage="3"] .root-horizon {
  background-color: color-mix(in srgb,var(--surface-deep) 82%,var(--surface-life));
  filter: none;
}
.world-panel[data-growth-stage="3"] .root-horizon::before {
  filter: saturate(1.08) brightness(1.02);
}
.world-panel[data-growth-stage="3"] .root-horizon::after { opacity: 0; transform: translateY(18px); }
.world-panel[data-growth-stage="3"] .root-horizon > i {
  width: 5px;
  height: 34px;
  opacity: 1;
  border-radius: 2px 2px 0 0;
  background: color-mix(in srgb,#34251d 84%,var(--surface-deep));
  box-shadow: inset 1px 0 rgba(255,225,177,.16);
  transform: translateY(0) scale(1);
}
.world-panel[data-growth-stage="3"] .root-horizon > i:nth-child(2) { width: 7px; height: 47px; }
.world-panel[data-growth-stage="3"] .root-horizon > i:nth-child(3) { height: 29px; }
.world-panel[data-growth-stage="3"] .root-horizon > i::before,
.world-panel[data-growth-stage="3"] .root-horizon > i::after {
  clip-path: none;
  background: var(--surface-life);
}
.world-panel[data-growth-stage="3"] .root-horizon > i::before {
  top: -9px;
  left: 50%;
  width: 24px;
  height: 18px;
  border-radius: 52% 48% 44% 56% / 58% 55% 45% 42%;
  box-shadow: 9px 5px 0 -2px var(--surface-tip);
  transform: translateX(-50%) rotate(-3deg);
}
.world-panel[data-growth-stage="3"] .root-horizon > i::after {
  top: 2px;
  left: 50%;
  width: 18px;
  height: 13px;
  border-radius: 47% 53% 57% 43% / 51% 45% 55% 49%;
  background: color-mix(in srgb,var(--surface-life) 72%,var(--surface-deep));
  box-shadow: none;
  transform: translateX(-88%) rotate(3deg);
}
.world-panel[data-growth-stage="3"] .root-horizon > i:nth-child(2)::before {
  top: -11px;
  width: 32px;
  height: 23px;
  box-shadow: 11px 5px 0 -3px var(--surface-tip);
}
.world-panel[data-growth-stage="3"] .root-horizon > i:nth-child(2)::after { width: 24px; height: 17px; }
.world-panel[data-growth-stage="3"] .root-horizon > i:nth-child(3)::before {
  top: -8px;
  width: 22px;
  height: 16px;
  box-shadow: 8px 4px 0 -2px var(--surface-tip);
}
.world-panel[data-growth-stage="3"] .root-horizon > i:nth-child(3)::after { width: 16px; height: 12px; }

/* Stage two can hint at each world's motif; full-life stage returns to a
   clearly readable trunk-and-crown tree silhouette in every palette. */
.world--puddle[data-growth-stage="2"] .root-horizon > i::before,
.world--puddle[data-growth-stage="2"] .root-horizon > i::after,
.world--coral[data-growth-stage="2"] .root-horizon > i::before,
.world--coral[data-growth-stage="2"] .root-horizon > i::after {
  border-radius: 70% 30% 65% 35%;
  clip-path: polygon(47% 0,66% 38%,100% 24%,75% 55%,96% 82%,58% 68%,45% 100%,38% 66%,0 81%,25% 52%,4% 25%,38% 38%);
}
.world--honey[data-growth-stage="2"] .root-horizon > i::before,
.world--honey[data-growth-stage="2"] .root-horizon > i::after,
.world--carnival[data-growth-stage="2"] .root-horizon > i::before,
.world--carnival[data-growth-stage="2"] .root-horizon > i::after,
.world--candy[data-growth-stage="2"] .root-horizon > i::before,
.world--candy[data-growth-stage="2"] .root-horizon > i::after {
  border-radius: 0;
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.world--star[data-growth-stage="2"] .root-horizon > i::before,
.world--star[data-growth-stage="2"] .root-horizon > i::after,
.world--jelly[data-growth-stage="2"] .root-horizon > i::before,
.world--jelly[data-growth-stage="2"] .root-horizon > i::after,
.world--midnight[data-growth-stage="2"] .root-horizon > i::before,
.world--midnight[data-growth-stage="2"] .root-horizon > i::after,
.world--gold[data-growth-stage="2"] .root-horizon > i::before,
.world--gold[data-growth-stage="2"] .root-horizon > i::after {
  border-radius: 0;
  clip-path: polygon(50% 0,61% 35%,98% 38%,68% 58%,79% 96%,50% 73%,20% 96%,31% 58%,2% 38%,39% 35%);
}
.world--cloud[data-growth-stage="2"] .root-horizon > i::before,
.world--cloud[data-growth-stage="2"] .root-horizon > i::after {
  border-radius: 55% 45% 52% 48%;
  box-shadow: 7px 1px 0 -1px var(--surface-tip),-7px 3px 0 -2px var(--surface-life);
}
.is-locked-preview .root-horizon { opacity: .14 !important; filter: grayscale(1) brightness(.45); }
.is-locked-preview .root-horizon > i { opacity: 0 !important; transform: translateY(18px) scale(.2) !important; }

@media (max-width: 760px) {
  .world-panel .root-horizon { height: clamp(68px,22%,88px); }
  .world-panel .root-horizon > i:nth-child(1) { left: 18%; }
  .world-panel .root-horizon > i:nth-child(2) { left: 30%; }
  .world-panel .root-horizon > i:nth-child(3) { right: 8%; }
  .world-panel[data-growth-stage="3"] .root-horizon > i { height: 29px; transform: translateY(0) scale(.9); }
  .world-panel[data-growth-stage="3"] .root-horizon > i:nth-child(2) { height: 39px; }
  .world-panel[data-growth-stage="3"] .root-horizon > i:nth-child(3) { height: 25px; }
  .world-panel[data-growth-stage="3"] .root-horizon > i::before { width: 21px; height: 16px; }
  .world-panel[data-growth-stage="3"] .root-horizon > i::after { width: 16px; height: 11px; }
  .world-panel[data-growth-stage="3"] .root-horizon > i:nth-child(2)::before { width: 27px; height: 20px; }
  .world-panel[data-growth-stage="3"] .root-horizon > i:nth-child(2)::after { width: 21px; height: 14px; }
  .world-panel[data-growth-stage="3"] .root-horizon > i:nth-child(3)::before { width: 19px; height: 14px; }
  .world-panel[data-growth-stage="3"] .root-horizon > i:nth-child(3)::after { width: 14px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .world-panel .root-horizon,
  .world-panel .root-horizon::before,
  .world-panel .root-horizon::after,
  .world-panel .root-horizon > i,
  .world-panel .root-horizon > i::before,
  .world-panel .root-horizon > i::after { transition: none !important; }
}

/* 2.4 — redrawn planet surfaces.
   Every world owns four fixed-frame RGBA paintings. Separate frames keep the
   shallow planetary arc intact: no sprite-sheet stretching, checker fringe or
   tall foreground object can intrude into the planet play area. */
.world--earth {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-earth-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-earth-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-earth-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-earth-stage-3-v2.png");
}
.world--mars {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-mars-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-mars-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-mars-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-mars-stage-3-v2.png");
}
.world--mercury {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-mercury-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-mercury-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-mercury-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-mercury-stage-3-v2.png");
}
.world--venus {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-venus-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-venus-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-venus-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-venus-stage-3-v2.png");
}
.world--jupiter {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-jupiter-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-jupiter-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-jupiter-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-jupiter-stage-3-v2.png");
}
.world--saturn {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-saturn-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-saturn-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-saturn-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-saturn-stage-3-v2.png");
}
.world--uranus {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-uranus-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-uranus-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-uranus-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-uranus-stage-3-v2.png");
}
.world--neptune {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-neptune-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-neptune-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-neptune-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-neptune-stage-3-v2.png");
}
.world--proxima {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-proxima-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-proxima-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-proxima-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-proxima-stage-3-v2.png");
}
.world--trappist {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-trappist-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-trappist-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-trappist-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-trappist-stage-3-v2.png");
}
.world--kepler186 {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-kepler186-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-kepler186-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-kepler186-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-kepler186-stage-3-v2.png");
}
.world--kepler452 {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-kepler452-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-kepler452-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-kepler452-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-kepler452-stage-3-v2.png");
}
.world--toi700 {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-toi700-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-toi700-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-toi700-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-toi700-stage-3-v2.png");
}
.world--k218 {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-k218-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-k218-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-k218-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-k218-stage-3-v2.png");
}
.world--lhs1140 {
  --surface-stage-0: url("assets/game/surfaces-v2/tapterra-surface-lhs1140-stage-0-v2.png");
  --surface-stage-1: url("assets/game/surfaces-v2/tapterra-surface-lhs1140-stage-1-v2.png");
  --surface-stage-2: url("assets/game/surfaces-v2/tapterra-surface-lhs1140-stage-2-v2.png");
  --surface-stage-3: url("assets/game/surfaces-v2/tapterra-surface-lhs1140-stage-3-v2.png");
}

/* Every source has a different transparent safety margin. These optical
   overscan values are calculated from each world's widest alpha inset, then
   given a small edge reserve. Scaling stays uniform, so painted motifs keep
   their authored proportions instead of being stretched to the panel. */
.world--earth { --surface-overscan: 104%; }
.world--lhs1140 { --surface-overscan: 105%; }
.world--k218 { --surface-overscan: 109%; }
.world--toi700 { --surface-overscan: 110%; }
.world--mercury,
.world--kepler452 { --surface-overscan: 115%; }
.world--saturn { --surface-overscan: 116%; }
.world--mars { --surface-overscan: 117%; }
.world--venus,
.world--jupiter { --surface-overscan: 117%; }
.world--kepler186,
.world--proxima { --surface-overscan: 120%; }
.world--trappist { --surface-overscan: 124%; }
.world--uranus { --surface-overscan: 137%; }
.world--neptune { --surface-overscan: 140%; }

.world-panel .root-horizon {
  /* Runtime frames carry a four-pixel painted ground continuation. The small
     optical bleed hides fractional-pixel seams at the rounded stage edge; the
     image still scales uniformly, so soil and ecology motifs never stretch. */
  --surface-bottom-bleed: clamp(3px,.45vw,6px);
  right: -1px;
  bottom: -1px;
  left: -1px;
  height: clamp(84px,9.2vw,118px);
  overflow: hidden;
  opacity: 1 !important;
  background: transparent !important;
  filter: none !important;
  isolation: isolate;
}
.world-panel .root-horizon::before,
.world-panel .root-horizon::after { display: none !important; content: none !important; }
.world-panel .root-horizon .surface-stage {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center calc(100% + var(--surface-bottom-bleed));
  background-size: var(--surface-overscan,105%) auto;
  filter: saturate(.93) brightness(.96);
  transform: translateY(2px);
  transform-origin: 50% 100%;
  will-change: opacity,filter,transform;
  transition:
    opacity 680ms cubic-bezier(.22,.72,.24,1),
    filter 680ms cubic-bezier(.22,.72,.24,1),
    transform 680ms cubic-bezier(.22,.72,.24,1);
}
.world-panel .root-horizon .surface-stage--0 { background-image: var(--surface-stage-0); }
.world-panel .root-horizon .surface-stage--1 { background-image: var(--surface-stage-1); }
.world-panel .root-horizon .surface-stage--2 { background-image: var(--surface-stage-2); }
.world-panel .root-horizon .surface-stage--3 { background-image: var(--surface-stage-3); }
.world-panel[data-growth-stage="0"] .root-horizon .surface-stage--0,
.world-panel[data-growth-stage="1"] .root-horizon .surface-stage--1,
.world-panel[data-growth-stage="2"] .root-horizon .surface-stage--2,
.world-panel[data-growth-stage="3"] .root-horizon .surface-stage--3 {
  opacity: 1;
  filter: none;
  transform: translateY(0);
}
.world-panel .planet,
.world-panel .planet-age-state,
.world-panel .planet-idle,
.world-panel .planet-mood,
.world-panel .planet-glow,
.world-panel .planet-sheen {
  transition-duration: 680ms;
  transition-timing-function: cubic-bezier(.22,.72,.24,1);
}
.world-panel.is-locked-preview .root-horizon .surface-stage {
  opacity: 0 !important;
  filter: grayscale(1) brightness(.36) contrast(.92);
}
@media (max-width: 760px) {
  .world-panel .root-horizon { height: clamp(58px,15vw,112px); }
}
@media (prefers-reduced-motion: reduce) {
  .world-panel .root-horizon .surface-stage { transition: none !important; }
}

/* --------------------------------------------------------------------------
   2.2 — One hand-drawn tool family.
   These marks share an optical centre, a common baseline and the same dark
   outline as the planets. No generic icon tiles or accidental rotations.
   -------------------------------------------------------------------------- */
.scene-hud .settings-button {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  color: #d6dfcf;
  background: transparent;
}
.scene-hud .settings-button .ui-mark {
  width: 28px;
  height: 28px;
  overflow: visible;
  stroke-width: 1.55;
  transform: none;
}
.gear-body { fill: currentColor; stroke: #182019; stroke-width: 1.25; }
.gear-hole { fill: #182019; stroke: #f1ecd8; stroke-width: .8; }
.gear-glint { fill: none; stroke: rgba(255,255,255,.62); stroke-width: 1; }
.scene-hud .settings-button:hover { color: #f3efd9; background: transparent; }
.scene-hud .settings-button:active .ui-mark { transform: rotate(16deg) scale(.94); }

.scene-action-rail {
  top: clamp(74px, 20%, 90px);
  inset-inline-start: 8px;
}
.scene-action-rail .shop-button {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 47px 10px;
  place-items: center;
  width: 60px;
  min-width: 60px;
  height: 60px;
  min-height: 60px;
  gap: 0;
  padding: 0;
  color: #f2c846;
  background: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.5));
}
.scene-action-rail .shop-button .shop-storefront {
  grid-column: 1;
  grid-row: 1;
  width: 47px;
  height: 47px;
  transform: none;
}
.scene-action-rail .shop-button > b {
  display: block;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  color: #f7e8a3;
  font-size: .43rem;
  font-weight: 950;
  letter-spacing: .08em;
  line-height: 1;
  text-shadow: 1px 2px 0 rgba(0,0,0,.56);
}
.scene-action-rail .shop-button:not(:disabled):hover .shop-storefront { transform: translateY(-2px) rotate(-1deg); }
.scene-action-rail .shop-button:not(:disabled):active .shop-storefront { transform: translateY(1px) scale(.95); }
.shop-marquee__mark .shop-storefront { width: 52px; height: 52px; }

.generator-card {
  grid-template-columns: 46px minmax(0,1fr) 36px 80px;
  column-gap: 6px;
  align-items: center;
}
.module-copy .generator-name {
  font-size: .76rem;
  line-height: 1.08;
  text-transform: uppercase;
}
.module-copy .generator-rate {
  margin-top: 4px;
  line-height: 1;
}
.module-copy .generator-rate b {
  font-size: .64rem;
  font-weight: 900;
}
.module-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  place-self: center;
  color: color-mix(in srgb, var(--module-color) 84%, #243020 16%);
  background: transparent;
  filter: drop-shadow(0 2px 0 rgba(31,35,31,.14));
  transform: none !important;
}
.module-icon svg {
  display: block;
  width: 34px;
  height: 34px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none;
}
.generator-card[data-module="0"] .module-icon svg,
.generator-card[data-module="2"] .module-icon svg { transform: translateY(1px); }
.generator-card[data-module="3"] .module-icon svg { transform: translate(-1px,1px); }
.generator-card[data-module="4"] .module-icon svg { transform: translateY(.5px); }
.generator-card.locked .module-icon { opacity: .55; filter: grayscale(.62); }

.boost-list {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0;
  align-items: stretch;
}
.boost-card:nth-child(n) {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  grid-template-rows: minmax(36px,auto) auto;
  align-items: center;
  min-width: 0;
  min-height: 70px;
  gap: 3px 5px;
  padding: 6px 7px;
  transform: none;
}
.boost-card .boost-icon {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  place-self: center;
  width: 34px;
  height: 34px;
  color: #3f652e;
  background: transparent;
  transform: none;
}
.boost-icon svg {
  display: block;
  width: 31px;
  height: 31px;
  overflow: visible;
  stroke-width: 2.15;
  transform: none;
}
.boost-card .boost-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
}
.boost-name {
  display: block;
  min-height: 0;
  font-size: .68rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
  word-break: normal;
  text-transform: uppercase;
}
.boost-level {
  display: block;
  margin-top: 2px;
  color: #64705f;
  font-size: .5rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.boost-card .boost-button {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 28px;
  margin: 0;
  place-self: stretch;
}

/* The courier is a small field-built seed capsule, not a neon doughnut. */
.reward-offer {
  --offer-scale: .88;
  transform-origin: right top;
  transform: translateX(34px) rotate(.25deg) scale(var(--offer-scale));
}
.reward-offer.is-visible { transform: translateX(0) rotate(.25deg) scale(var(--offer-scale)); }
.reward-offer.is-leaving { transform: translateX(14px) rotate(.25deg) scale(var(--offer-scale)); }
.reward-offer__button {
  grid-template-columns: 49px minmax(0,1fr) 36px;
  align-items: center;
  min-height: 64px;
}
.reward-offer__pod {
  display: grid;
  place-items: center;
  width: 49px;
  height: 42px;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  background: transparent;
  box-shadow: none;
  animation: courierPodIdle 1.9s ease-in-out infinite alternate;
}
.reward-offer__pod::before,
.reward-offer__pod::after,
.reward-offer__pod > i,
.reward-pod-mark { display: none !important; content: none; }
.reward-courier-mark {
  display: block;
  width: 48px;
  height: 34px;
  overflow: visible;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.42));
}
.courier-trail { fill: none; stroke: #efc44a; stroke-width: 2.1; stroke-linecap: round; }
.courier-trail--short { stroke-width: 1.45; opacity: .62; }
.courier-fin { fill: color-mix(in srgb, var(--accent) 72%, #f2c84a); stroke: #172019; stroke-width: 1.7; stroke-linejoin: round; }
.courier-body { fill: #f3d567; stroke: #172019; stroke-width: 2.15; stroke-linejoin: round; }
.courier-shade { fill: #d7a93f; stroke: none; opacity: .78; }
.courier-window { fill: #e6f0df; stroke: #172019; stroke-width: 1.8; }
.courier-seam { fill: none; stroke: #86672e; stroke-width: 1.1; stroke-dasharray: 2 1.7; }
.courier-rivet { fill: #172019; stroke: none; }
.reward-offer__tag {
  align-content: center;
  gap: 2px;
  min-height: 60px;
  margin-inline: -3px -2px;
  padding: 7px 8px 6px 12px;
  border: 2px solid #182019;
  color: #22281f;
  background: #f1e5b8;
  box-shadow: 3px 4px 0 rgba(0,0,0,.36);
  clip-path: polygon(0 4%,96% 0,100% 16%,98% 92%,91% 100%,3% 96%);
}
.reward-offer__tag::after { top: 7px; bottom: 7px; left: 6px; width: 2px; }
.reward-offer__tag small { font-size: .54rem; }
.reward-offer__tag strong { font-size: .69rem; line-height: 1.08; }
.reward-offer__tag em { font-size: .54rem; }
.reward-offer__count {
  align-self: center;
  width: 36px;
  height: 36px;
  border: 2px solid #182019;
  background: conic-gradient(var(--accent) calc(var(--offer-progress) * 1turn),#656b5e 0);
  box-shadow: 2px 3px 0 rgba(0,0,0,.38);
}
.reward-offer__count::before { inset: 4px; }
.reward-offer__count b { transform: translateY(-2px); }
.reward-offer__count small { bottom: 3px; }
.reward-offer__track { width: calc(100% - 54px); margin-inline-start: 50px; }
html[dir="rtl"] .reward-offer {
  transform-origin: left top;
  transform: translateX(-34px) rotate(-.25deg) scale(var(--offer-scale));
}
html[dir="rtl"] .reward-offer.is-visible { transform: translateX(0) rotate(-.25deg) scale(var(--offer-scale)); }
html[dir="rtl"] .reward-offer.is-leaving { transform: translateX(-14px) rotate(-.25deg) scale(var(--offer-scale)); }

@media (min-width:761px) and (orientation:landscape) and (max-height:600px) {
  .scene-action-rail .shop-button { width: 54px; min-width: 54px; height: 56px; min-height: 56px; }
  .scene-action-rail .shop-button .shop-storefront { width: 44px; height: 44px; }
  .reward-offer__button { grid-template-columns: 45px minmax(0,1fr) 34px; }
  .reward-offer__pod { width: 45px; }
  .reward-courier-mark { width: 44px; height: 32px; }
}

@media (max-width:760px) {
  .scene-hud .settings-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .scene-action-rail .shop-button { width: 54px; min-width: 54px; height: 58px; min-height: 58px; }
  .scene-action-rail .shop-button .shop-storefront { width: 44px; height: 44px; }
  .reward-offer__button { grid-template-columns: 43px minmax(0,1fr) 32px; }
  .reward-offer__pod { width: 43px; height: 38px; }
  .reward-courier-mark { width: 42px; height: 30px; }
  .reward-offer__tag { padding-inline: 11px 6px; }
  .reward-offer__tag strong { font-size: .61rem; }
  .reward-offer__tag em { font-size: .51rem; }
}

@media (min-width:761px) and (orientation:landscape) and (max-height:560px) {
  .shop-marquee__mark .shop-storefront { width: 42px; height: 42px; }
}

@media (max-width:620px) {
  .shop-marquee__mark .shop-storefront { width: 42px; height: 42px; }
}

@media (max-width:380px) {
  .shop-marquee__mark .shop-storefront { width: 38px; height: 38px; }
}

.reduce-motion .reward-courier-mark,
.reduce-motion .scene-hud .settings-button .ui-mark { animation: none !important; transition: none !important; }

/* 2.1.2 — compact, optically aligned instruments; reclaimed height belongs
   to the playfield instead of another UI strip. Mobile keeps its 2×2 layout. */
@media (min-width: 761px) and (orientation: landscape) {
  .scene-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 2px;
  }
  .scene-stats .stat-card:nth-child(n),
  .scene-stats .stat-card--energy {
    grid-template-rows: .95em 1.1em;
    align-content: center;
    min-height: 36px;
    padding: 3px 9px;
    row-gap: 2px;
  }
  .scene-stats .stat-card:nth-child(n) > span {
    display: block;
    align-self: end;
    min-height: 0;
    overflow: hidden;
    font-size: .5rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .scene-stats .stat-card strong {
    display: flex;
    align-items: baseline;
    align-self: start;
    min-height: 1.1em;
    font-size: .78rem;
    line-height: 1;
  }
  .scene-stats .stat-card strong i { margin-inline-end: 4px; margin-right: 0; }
  .planet-stage { margin-block: 2px; }
  .planet-button { width: clamp(188px, 38vh, 270px); }
}

@media (min-width: 761px) and (orientation: landscape) and (max-height: 600px) {
  .planet-button { width: clamp(174px, 38vh, 220px); }
}

/* 2.7.5 — settings remains beside the world yield, but now reads as a real
   44px control instead of a loose gear floating in the heading. */
.world-tools {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
  min-width: 0;
}
.world-tools .world-bonus {
  grid-column: auto;
  justify-self: auto;
}
.world-tools .settings-button {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid #697464;
  border-radius: 10px 5px 9px 6px;
  color: #e6ebdf;
  background: #2b342a;
  box-shadow: 2px 3px 0 #0d130e, inset 0 1px 0 rgba(255,255,255,.1);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.world-tools .settings-button .ui-mark {
  width: 24px;
  height: 24px;
  overflow: visible;
  stroke-width: 1.65;
  transition: transform 150ms ease, color 150ms ease;
}
.world-tools .settings-button:hover {
  border-color: var(--accent);
  color: #f4f0dc;
  background: #34402f;
  box-shadow: 2px 4px 0 #0d130e, inset 0 1px 0 rgba(255,255,255,.13);
  transform: translateY(-1px);
}
.world-tools .settings-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.world-tools .settings-button:active {
  box-shadow: 1px 1px 0 #0d130e, inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(1px);
}
.world-tools .settings-button:active .ui-mark { transform: rotate(16deg) scale(.94); }

@media (min-width: 761px) and (orientation: landscape) and (max-height: 600px) {
  .planet-button { width: clamp(184px, 40vh, 230px); }
}

@media (max-width: 760px) {
  .world-tools {
    grid-column: 2;
    grid-row: 1;
    gap: 5px;
  }
  .world-tools .settings-button {
    flex-basis: 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .world-tools .settings-button .ui-mark { width: 22px; height: 22px; }
}

.reduce-motion .world-tools .settings-button,
.reduce-motion .world-tools .settings-button .ui-mark { transition: none !important; }

/* 2.1.4 — moons are small travelling satellites, never secondary planets.
   Each route is a shallow, horizontal ellipse with its own distance, speed
   and phase. The z-index switch lets every moon pass behind and in front of
   the planet instead of looking pinned to the corner of the artwork. */
.moon-orbit {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: none;
  width: 8.1%;
  aspect-ratio: 1;
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  pointer-events: none;
  will-change: offset-distance, transform;
  animation: moonOrbitTravel 7.8s linear infinite;
}

.moon-body {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border: clamp(1px, .7cqw, 2px) solid #17151d;
  border-radius: 48% 52% 51% 49% / 53% 46% 54% 47%;
  background:
    radial-gradient(circle at 31% 27%, var(--moon-glint, rgba(255,255,255,.36)) 0 11%, transparent 12%),
    radial-gradient(circle at 67% 63%, rgba(23,21,29,.17) 0 12%, transparent 13%),
    linear-gradient(145deg, var(--moon-fill, #efe4bd), var(--moon-shade, #b9a77f));
  box-shadow:
    inset -1px -2px 0 rgba(0,0,0,.16),
    1px 2px 0 rgba(8,7,12,.42);
}
.moon-body::before,
.moon-body::after {
  position: absolute;
  border: 1px solid rgba(23,21,29,.18);
  border-radius: 50%;
  content: "";
  background: rgba(23,21,29,.09);
}
.moon-body::before { top: 19%; right: 17%; width: 18%; height: 18%; }
.moon-body::after { bottom: 17%; left: 20%; width: 12%; height: 12%; }

.moon-orbit--one {
  width: 8.1%;
  offset-path: ellipse(51% 31% at 50% 50%);
  animation-duration: 7.8s;
  animation-delay: -1.1s;
}
.moon-orbit--two {
  width: 6.8%;
  offset-path: ellipse(59% 38% at 50% 50%);
  animation-duration: 11.4s;
  animation-delay: -5.7s;
  animation-direction: reverse;
}
.moon-orbit--three {
  width: 5.9%;
  offset-path: ellipse(66% 27% at 50% 50%);
  animation-duration: 9.2s;
  animation-delay: -3.3s;
}
.moon-orbit--four {
  width: 7.3%;
  offset-path: ellipse(48% 41% at 50% 50%);
  animation-duration: 14.6s;
  animation-delay: -9.1s;
  animation-direction: reverse;
}
.moon-orbit--five {
  width: 5.5%;
  offset-path: ellipse(72% 35% at 50% 50%);
  animation-duration: 12.7s;
  animation-delay: -6.2s;
}
.moon-orbit--two .moon-body { border-radius: 56% 44% 48% 52% / 45% 54% 46% 55%; }
.moon-orbit--three .moon-body { border-radius: 45% 55% 58% 42% / 54% 42% 58% 46%; }
.moon-orbit--four .moon-body { border-radius: 52% 48% 42% 58% / 48% 57% 43% 52%; }
.moon-orbit--five .moon-body { border-radius: 43% 57% 50% 50% / 57% 45% 55% 43%; }

.world-panel[data-moons="1"] .planet-button .moon-orbit--one,
.world-panel[data-moons="3"] .planet-button .moon-orbit--one,
.world-panel[data-moons="3"] .planet-button .moon-orbit--two,
.world-panel[data-moons="3"] .planet-button .moon-orbit--three,
.world-panel[data-moons="5"] .planet-button .moon-orbit--one,
.world-panel[data-moons="5"] .planet-button .moon-orbit--two,
.world-panel[data-moons="5"] .planet-button .moon-orbit--three,
.world-panel[data-moons="5"] .planet-button .moon-orbit--four,
.world-panel[data-moons="5"] .planet-button .moon-orbit--five,
.next-world-preview[data-moons="1"] > .moon-orbit--one,
.next-world-preview[data-moons="3"] > .moon-orbit--one,
.next-world-preview[data-moons="3"] > .moon-orbit--two,
.next-world-preview[data-moons="3"] > .moon-orbit--three,
.next-world-preview[data-moons="5"] > .moon-orbit--one,
.next-world-preview[data-moons="5"] > .moon-orbit--two,
.next-world-preview[data-moons="5"] > .moon-orbit--three,
.next-world-preview[data-moons="5"] > .moon-orbit--four,
.next-world-preview[data-moons="5"] > .moon-orbit--five { display: block; }

.world--moss { --moon-fill:#c8d0b8; --moon-shade:#77816f; }
.world--berry { --moon-fill:#ff9b93; --moon-shade:#c95063; }
.world--lemon { --moon-fill:#ffe996; --moon-shade:#d5a833; }
.world--puddle { --moon-fill:#b9efff; --moon-shade:#5798ca; }
.world--peach { --moon-fill:#ffc0a5; --moon-shade:#d57b78; }
.world--coral { --moon-fill:#ff9a83; --moon-shade:#bd5f68; }
.world--cloud { --moon-fill:#f2f4ff; --moon-shade:#a4b0d1; }
.world--honey { --moon-fill:#ffd56a; --moon-shade:#b77729; }
.world--carnival { --moon-fill:#ff8d89; --moon-shade:#8c6bc0; }
.world--mint { --moon-fill:#c3e4d2; --moon-shade:#6b9b8a; }
.world--candy { --moon-fill:#ffd3e1; --moon-shade:#d36b99; }
.world--star { --moon-fill:#ffe889; --moon-shade:#9a78ca; }
.world--jelly { --moon-fill:#d6b4ff; --moon-shade:#7961b9; }
.world--midnight { --moon-fill:#d3dcff; --moon-shade:#6677b6; }
.world--gold { --moon-fill:#ffe083; --moon-shade:#db7654; }

.moon-orbit--two { --moon-glint:rgba(157,255,235,.32); filter:hue-rotate(22deg); }
.moon-orbit--three { --moon-glint:rgba(255,231,145,.38); filter:hue-rotate(-16deg) brightness(.96); }
.moon-orbit--four { --moon-glint:rgba(226,197,255,.34); filter:hue-rotate(46deg); }
.moon-orbit--five { --moon-glint:rgba(255,255,255,.3); filter:hue-rotate(-38deg) brightness(1.05); }

@keyframes moonOrbitTravel {
  0% { offset-distance: 0%; z-index: 4; opacity: .88; transform: scale(.9); }
  25% { z-index: 4; opacity: 1; transform: scale(1.06); }
  49.8% { z-index: 4; opacity: .9; transform: scale(.92); }
  50% { offset-distance: 50%; z-index: 1; opacity: .9; transform: scale(.92); }
  75% { z-index: 1; opacity: .78; transform: scale(.8); }
  99.8% { z-index: 1; opacity: .88; transform: scale(.9); }
  100% { offset-distance: 100%; z-index: 4; opacity: .88; transform: scale(.9); }
}

/* Locked scouts stay readable as a silhouette, while motion-reduced players
   get the same moon count at five deliberately separated orbit positions. */
.is-locked-preview .planet-button .moon-body,
.next-world-preview .moon-body {
  border-color: #050805;
  background: #050805;
  box-shadow: none;
  filter: grayscale(1) brightness(0);
}
.next-world-preview .moon-orbit { animation-play-state: paused; }
.next-world-preview .moon-orbit--one { offset-distance: 8%; }
.next-world-preview .moon-orbit--two { offset-distance: 30%; }
.next-world-preview .moon-orbit--three { offset-distance: 51%; }
.next-world-preview .moon-orbit--four { offset-distance: 72%; }
.next-world-preview .moon-orbit--five { offset-distance: 89%; }

body.has-open-modal .moon-orbit { animation-play-state: paused; }
.reduce-motion .moon-orbit { animation: none !important; }
.reduce-motion .moon-orbit--one { offset-distance: 8%; }
.reduce-motion .moon-orbit--two { offset-distance: 30%; }
.reduce-motion .moon-orbit--three { z-index: 1; offset-distance: 51%; }
.reduce-motion .moon-orbit--four { z-index: 1; offset-distance: 72%; }
.reduce-motion .moon-orbit--five { z-index: 1; offset-distance: 89%; }

@media (prefers-reduced-motion: reduce) {
  .moon-orbit { animation: none !important; }
  .moon-orbit--one { offset-distance: 8%; }
  .moon-orbit--two { offset-distance: 30%; }
  .moon-orbit--three { z-index: 1; offset-distance: 51%; }
  .moon-orbit--four { z-index: 1; offset-distance: 72%; }
  .moon-orbit--five { z-index: 1; offset-distance: 89%; }
}

/* 2.1.5 — one continuous physical ring. The rear copy remains below the
   planet, while only the near half of the matching front copy is revealed.
   Together they read as one solid ellipse wrapping around the world. */
.world-ring {
  border-width: 7px !important;
  border-style: solid !important;
  box-shadow: none !important;
}
.world-ring--back { z-index: 1; }
.world-ring--front {
  z-index: 3;
  clip-path: inset(51% -26% -32% -26%);
}
.next-world-preview .world-ring { border-width: 3px !important; }

@media (max-width: 760px) {
  .planet-button .world-ring { border-width: 6px !important; }
}

/* 2.2.0 — real-world identities. The legacy art classes remain as drawing
   primitives, while these final selectors keep familiar planets physically
   readable: Saturn and Uranus carry rings; the other worlds do not inherit
   decorative rings from an older fantasy theme. */
.world--mercury { --world-filter: grayscale(.92) saturate(.2) brightness(.92); }
.world--venus { --world-filter: hue-rotate(28deg) saturate(.7) brightness(1.02); }
.world--earth { --world-filter: hue-rotate(92deg) saturate(.88) brightness(1.02); }
.world--mars { --world-filter: hue-rotate(322deg) saturate(.78) brightness(.94); }
.world--jupiter { --world-filter: hue-rotate(15deg) saturate(.42) brightness(1.08); }
.world--saturn { --world-filter: hue-rotate(24deg) saturate(.48) brightness(1.1); }
.world--uranus { --world-filter: hue-rotate(112deg) saturate(.55) brightness(1.08); }
.world--neptune { --world-filter: hue-rotate(133deg) saturate(.95) brightness(.78); }
.world--proxima { --world-filter: hue-rotate(310deg) saturate(.78) brightness(.86); }
.world--trappist { --world-filter: hue-rotate(8deg) saturate(.45) brightness(.82); }
.world--kepler186 { --world-filter: hue-rotate(78deg) saturate(.56) brightness(.92); }
.world--kepler452 { --world-filter: hue-rotate(38deg) saturate(.58) brightness(.98); }
.world--toi700 { --world-filter: hue-rotate(288deg) saturate(.72) brightness(.94); }
.world--k218 { --world-filter: hue-rotate(152deg) saturate(.62) brightness(.84); }
.world--lhs1140 { --world-filter: hue-rotate(330deg) saturate(.68) brightness(.82); }

.planet-world-surface {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  background: var(--world-surface, #a8d94d);
  pointer-events: none;
}
.planet-world-surface::before,
.planet-world-surface::after {
  position: absolute;
  content: "";
  pointer-events: none;
}
.planet-world-surface::before {
  inset: 0;
  opacity: .72;
  background: var(--world-detail, none);
}
.planet-world-surface::after {
  width: var(--world-spot-size, 0);
  aspect-ratio: 1.8;
  right: var(--world-spot-right, 18%);
  bottom: var(--world-spot-bottom, 24%);
  border-radius: 50%;
  background: var(--world-spot, transparent);
  transform: rotate(-8deg);
}
.planet-live-face {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: #11141a;
}
.planet-live-face i,
.planet-live-face b { position: absolute; display: block; }
.planet-live-face i {
  top: 43%;
  width: 9.5%;
  height: 14%;
  border-radius: 50%;
  background: currentColor;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.9);
}
.planet-live-face i:first-child { left: 31%; }
.planet-live-face i:nth-child(2) { right: 31%; }
.planet-live-face b {
  top: 59%;
  left: 43%;
  width: 14%;
  height: 8%;
  border-bottom: 4px solid currentColor;
  border-radius: 0 0 50% 50%;
}

.world--mercury {
  --planet-a:#c8c5bc; --planet-b:#96948f; --planet-c:#62615f;
  --world-surface:
    radial-gradient(circle at 27% 24%,#77756f 0 8%,transparent 8.8%),
    radial-gradient(circle at 70% 29%,#a5a29b 0 12%,transparent 12.8%),
    radial-gradient(circle at 69% 74%,#77756f 0 9%,transparent 9.8%),
    radial-gradient(circle at 37% 73%,#aca9a2 0 15%,transparent 15.8%),
    linear-gradient(145deg,#c8c5bd,#7f7d78);
}
.world--venus {
  --planet-a:#f0d37a; --planet-b:#d99a4c; --planet-c:#8e5438;
  --world-surface:linear-gradient(145deg,#f2d17a,#c97948);
  --world-detail:repeating-linear-gradient(170deg,transparent 0 10%,rgba(255,240,177,.5) 11% 16%,transparent 17% 26%);
}
.world--earth {
  --planet-a:#6fc579; --planet-b:#50b7e5; --planet-c:#2b638f;
  --world-surface:linear-gradient(145deg,#82d8ee 0 43%,#4c9bd3 100%);
}
.world--mars {
  --planet-a:#dc9369; --planet-b:#bf6049; --planet-c:#713d39;
  --world-surface:
    radial-gradient(circle at 25% 22%,#9b4d40 0 9%,transparent 10%),
    radial-gradient(circle at 73% 64%,#a64f42 0 13%,transparent 14%),
    radial-gradient(ellipse at 50% 0,#f0d6bb 0 8%,transparent 9%),
    linear-gradient(145deg,#dc9369,#9f493e);
}
.world--jupiter {
  --planet-a:#ead2a1; --planet-b:#c98b63; --planet-c:#815347;
  --world-surface:repeating-linear-gradient(180deg,#ecd7ad 0 10%,#c68b67 11% 18%,#f0c894 19% 28%,#9c6756 29% 34%);
  --world-spot:#a84c3f; --world-spot-size:24%; --world-spot-right:13%; --world-spot-bottom:28%;
}
.world--saturn {
  --planet-a:#f1dda0; --planet-b:#c9aa69; --planet-c:#80694e;
  --world-surface:repeating-linear-gradient(180deg,#f0dfa9 0 13%,#d2b878 14% 18%,#ead49b 19% 31%);
}
.world--uranus {
  --planet-a:#b8f0e8; --planet-b:#72c8ce; --planet-c:#3c7f96;
  --world-surface:linear-gradient(145deg,#c6f3ea,#62b9c8);
  --world-detail:linear-gradient(173deg,transparent 0 44%,rgba(255,255,255,.25) 45% 51%,transparent 52%);
}
.world--neptune {
  --planet-a:#78aaf0; --planet-b:#4067c5; --planet-c:#273477;
  --world-surface:repeating-linear-gradient(178deg,#6b9deb 0 14%,#3d68c9 15% 24%,#557fd5 25% 38%);
  --world-spot:#293d83; --world-spot-size:21%; --world-spot-right:19%; --world-spot-bottom:34%;
}
.world--proxima {
  --planet-a:#e88778; --planet-b:#a84f57; --planet-c:#522f48;
  --world-surface:radial-gradient(ellipse at 27% 32%,#d87568 0 18%,transparent 19%),radial-gradient(ellipse at 73% 66%,#803c51 0 19%,transparent 20%),linear-gradient(145deg,#e3947c,#7c3d55);
}
.world--trappist {
  --planet-a:#b8c681; --planet-b:#718e72; --planet-c:#3c5150;
  --world-surface:radial-gradient(ellipse at 29% 28%,#8fad78 0 19%,transparent 20%),radial-gradient(ellipse at 71% 67%,#607867 0 17%,transparent 18%),linear-gradient(145deg,#b8c98b,#566e67);
}
.world--kepler186 {
  --planet-a:#92d8a9; --planet-b:#5cafa6; --planet-c:#356477;
  --world-surface:radial-gradient(ellipse at 26% 33%,#75bb8b 0 16%,transparent 17%),radial-gradient(ellipse at 70% 61%,#538e77 0 20%,transparent 21%),linear-gradient(145deg,#99dfc2,#4c8ba2);
}
.world--kepler452 {
  --planet-a:#c9d58e; --planet-b:#8fb382; --planet-c:#596879;
  --world-surface:radial-gradient(ellipse at 31% 30%,#a8c177 0 18%,transparent 19%),radial-gradient(ellipse at 69% 66%,#748e69 0 18%,transparent 19%),linear-gradient(145deg,#bdd9b0,#6a8ca7);
}
.world--toi700 {
  --planet-a:#d7a3b3; --planet-b:#9a7ba4; --planet-c:#51486e;
  --world-surface:radial-gradient(ellipse at 28% 31%,#bd8b9b 0 18%,transparent 19%),radial-gradient(ellipse at 72% 63%,#816b90 0 18%,transparent 19%),linear-gradient(145deg,#d8a9b7,#736b9a);
}
.world--k218 {
  --planet-a:#91bde0; --planet-b:#6378bb; --planet-c:#3e356f;
  --world-surface:repeating-linear-gradient(177deg,#8bb8df 0 15%,#6379bd 16% 25%,#7469aa 26% 39%);
  --world-spot:#4c477e; --world-spot-size:18%; --world-spot-right:21%; --world-spot-bottom:29%;
}
.world--lhs1140 {
  --planet-a:#d29572; --planet-b:#915356; --planet-c:#4f303f;
  --world-surface:radial-gradient(circle at 27% 24%,#9e5a4f 0 9%,transparent 10%),radial-gradient(circle at 70% 70%,#7b454b 0 14%,transparent 15%),linear-gradient(145deg,#d39572,#70424e);
}

/* The real-world surfaces above are already authored in their final colours.
   Do not let their legacy drawing primitive hue-rotate them back into fantasy
   palettes or stretch their circular silhouettes. */
.world--mercury,
.world--venus,
.world--earth,
.world--mars,
.world--jupiter,
.world--saturn,
.world--uranus,
.world--neptune,
.world--proxima,
.world--trappist,
.world--kepler186,
.world--kepler452,
.world--toi700,
.world--k218,
.world--lhs1140 { --world-filter: none; }
.world--mercury .planet,
.world--venus .planet,
.world--earth .planet,
.world--mars .planet,
.world--jupiter .planet,
.world--saturn .planet,
.world--uranus .planet,
.world--neptune .planet,
.world--proxima .planet,
.world--trappist .planet,
.world--kepler186 .planet,
.world--kepler452 .planet,
.world--toi700 .planet,
.world--k218 .planet,
.world--lhs1140 .planet { border-radius: 50%; transform: none; }

.world--mercury .world-ring,
.world--venus .world-ring,
.world--earth .world-ring,
.world--mars .world-ring,
.world--jupiter .world-ring,
.world--neptune .world-ring,
.world--proxima .world-ring,
.world--trappist .world-ring,
.world--kepler186 .world-ring,
.world--kepler452 .world-ring,
.world--toi700 .world-ring,
.world--k218 .world-ring,
.world--lhs1140 .world-ring { display: none !important; }
.world--saturn .world-ring,
.world--uranus .world-ring { display: block !important; }
.world--saturn .world-ring { border-color: #e6c96f !important; transform: rotate(-13deg); }
.world--uranus .world-ring { border-color: #8edfd9 !important; border-width: 4px !important; transform: rotate(8deg); opacity: .85; }
.world--mercury .world-belt,
.world--venus .world-belt,
.world--earth .world-belt,
.world--mars .world-belt,
.world--jupiter .world-belt,
.world--saturn .world-belt,
.world--uranus .world-belt,
.world--neptune .world-belt,
.world--proxima .world-belt,
.world--trappist .world-belt,
.world--kepler186 .world-belt,
.world--kepler452 .world-belt,
.world--toi700 .world-belt,
.world--k218 .world-belt,
.world--lhs1140 .world-belt { display: none !important; }

/* 2.7.4 — Artificial satellites keep their orbit phase even while inactive.
   Visibility fades on the artwork instead of restarting the motion path, and
   depth changes only at the ellipse tips: behind -> in front -> behind. */
.life-satellite-orbit {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  visibility: hidden;
  width: 17%;
  aspect-ratio: 4 / 3;
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  pointer-events: none;
  will-change: offset-distance, transform;
  animation: lifeSatelliteTravel 12s linear infinite;
  animation-play-state: paused;
  transition: visibility 0s linear 240ms;
}
.life-satellite-orbit img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(1px 2px 0 rgba(8,7,12,.45));
  transition: opacity 240ms ease;
}
.life-satellite-orbit--one {
  offset-path: ellipse(62% 34% at 50% 50%);
  animation-duration: 11.6s;
  animation-delay: -2.1s;
}
.life-satellite-orbit--two {
  width: 15%;
  offset-path: ellipse(68% 27% at 50% 50%);
  animation-duration: 15.2s;
  animation-delay: -8.4s;
  animation-direction: reverse;
}
.life-satellite-orbit--three {
  width: 14%;
  offset-path: ellipse(61% 43% at 50% 50%);
  animation-duration: 18.4s;
  animation-delay: -12.7s;
}
.world-panel[data-growth-stage="3"][data-life-satellites="1"] .life-satellite-orbit--one,
.world-panel[data-growth-stage="3"][data-life-satellites="2"] .life-satellite-orbit--one,
.world-panel[data-growth-stage="3"][data-life-satellites="2"] .life-satellite-orbit--two,
.world-panel[data-growth-stage="3"][data-life-satellites="3"] .life-satellite-orbit--one,
.world-panel[data-growth-stage="3"][data-life-satellites="3"] .life-satellite-orbit--two,
.world-panel[data-growth-stage="3"][data-life-satellites="3"] .life-satellite-orbit--three {
  visibility: visible;
  animation-play-state: running;
  transition-delay: 0s;
}
.world-panel[data-growth-stage="3"][data-life-satellites="1"] .life-satellite-orbit--one img,
.world-panel[data-growth-stage="3"][data-life-satellites="2"] .life-satellite-orbit--one img,
.world-panel[data-growth-stage="3"][data-life-satellites="2"] .life-satellite-orbit--two img,
.world-panel[data-growth-stage="3"][data-life-satellites="3"] .life-satellite-orbit--one img,
.world-panel[data-growth-stage="3"][data-life-satellites="3"] .life-satellite-orbit--two img,
.world-panel[data-growth-stage="3"][data-life-satellites="3"] .life-satellite-orbit--three img { opacity: 1; }

@keyframes lifeSatelliteTravel {
  0% { offset-distance: 0%; z-index: 5; transform: scale(.9); }
  25% { z-index: 5; transform: scale(1.04); }
  49.8% { z-index: 5; transform: scale(.92); }
  50% { offset-distance: 50%; z-index: 1; transform: scale(.92); }
  75% { z-index: 1; transform: scale(.8); }
  99.8% { z-index: 1; transform: scale(.9); }
  100% { offset-distance: 100%; z-index: 5; transform: scale(.9); }
}
body.has-open-modal .planet-system .life-satellite-orbit { animation-play-state: paused !important; }
.reduce-motion .life-satellite-orbit { animation: none !important; transition: none !important; }
.reduce-motion .life-satellite-orbit img { transition: none !important; }
.reduce-motion .life-satellite-orbit--one { z-index: 5; offset-distance: 10%; }
.reduce-motion .life-satellite-orbit--two { z-index: 5; offset-distance: 46%; }
.reduce-motion .life-satellite-orbit--three { z-index: 1; offset-distance: 78%; }
@media (prefers-reduced-motion: reduce) {
  .life-satellite-orbit { animation: none !important; transition: none !important; }
  .life-satellite-orbit img { transition: none !important; }
  .life-satellite-orbit--one { z-index: 5; offset-distance: 10%; }
  .life-satellite-orbit--two { z-index: 5; offset-distance: 46%; }
  .life-satellite-orbit--three { z-index: 1; offset-distance: 78%; }
}
@media (max-width: 760px) {
  .life-satellite-orbit { width: 18%; }
  .life-satellite-orbit--two { width: 16%; }
  .life-satellite-orbit--three { width: 15%; }
}

/* 2.2.2 — helper icons are already a strong visual index. Numeric ledger
   labels duplicated that job and left an unused gutter beside every row. */
.generator-list {
  counter-reset: none;
  padding-inline-start: 0;
  border-inline-start: 0;
}
.generator-card { counter-increment: none; }
.generator-card::before {
  display: none !important;
  content: none !important;
}

/* 2.6.1 — one quiet continental drawing per world. Broad curved land masses
   keep the ocean below half of the disc; the expression paints above them. */
.planet-continent-atlas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  clip-path: circle(49.2% at 50% 50%);
  pointer-events: none;
  transition: opacity 560ms ease, filter 560ms ease;
}
.planet-world-surface { z-index: auto; }
.planet-land {
  display: none;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(var(--land-tilt, 0deg)) scaleX(var(--land-flip, 1));
}
.world--mercury .planet-land--mercury,
.world--venus .planet-land--venus,
.world--earth .planet-land--earth,
.world--mars .planet-land--mars,
.world--jupiter .planet-land--jupiter,
.world--saturn .planet-land--saturn,
.world--uranus .planet-land--uranus,
.world--neptune .planet-land--neptune,
.world--proxima .planet-land--proxima,
.world--trappist .planet-land--trappist,
.world--kepler186 .planet-land--kepler186,
.world--kepler452 .planet-land--kepler452,
.world--toi700 .planet-land--toi700,
.world--k218 .planet-land--k218,
.world--lhs1140 .planet-land--lhs1140 { display: block; }
.world--mercury { --land-tilt:-12deg; }
.world--venus { --land-tilt:17deg; --land-flip:-1; }
.world--earth { --land-tilt:-4deg; }
.world--mars { --land-tilt:28deg; }
.world--jupiter { --land-tilt:78deg; }
.world--saturn { --land-tilt:-34deg; --land-flip:-1; }
.world--uranus { --land-tilt:44deg; }
.world--neptune { --land-tilt:-58deg; }
.world--proxima { --land-tilt:13deg; --land-flip:-1; }
.world--trappist { --land-tilt:56deg; }
.world--kepler186 { --land-tilt:-25deg; }
.world--kepler452 { --land-tilt:7deg; --land-flip:-1; }
.world--toi700 { --land-tilt:68deg; }
.world--k218 { --land-tilt:-47deg; --land-flip:-1; }
.world--lhs1140 { --land-tilt:33deg; }
.planet-land path {
  fill: var(--land-main, color-mix(in srgb,var(--planet-c) 62%,var(--planet-a)));
  stroke: var(--land-stroke, color-mix(in srgb,var(--land-main) 88%,#1c2923));
  stroke-width: .72;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.82);
  vector-effect: non-scaling-stroke;
}
.planet-land .land-accent {
  fill: var(--land-accent, color-mix(in srgb,var(--land-main) 66%,var(--planet-a)));
}
.planet-land .land-islet {
  fill: var(--land-islet, color-mix(in srgb,var(--land-accent) 72%,#f1dc91));
}
.planet-land--earth .earth-island { fill: var(--land-accent); }

/* 2.3.1 compatibility: the Earth map is now one group inside the shared
   atlas, while the original QA/accessibility hook remains connected. */
.world--earth .earth-continent-map { display: block; }

/* Retire the old procedural circles/spots. The base is now only a calm colour
   field; all readable geography comes from the irregular SVG paths above. */
.planet-world-surface::before,
.planet-world-surface::after {
  display: none !important;
  content: none !important;
}
/* Legacy fantasy classes share the same world-panel class list and used to
   draw masked diagonal grids on .planet::before. Real planet discs keep only
   their clean colour field and the continent atlas. */
#world-panel .planet::before,
#world-panel .planet::after {
  display: none !important;
  content: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.world--mercury,
.world--venus,
.world--earth,
.world--mars,
.world--jupiter,
.world--saturn,
.world--uranus,
.world--neptune,
.world--proxima,
.world--trappist,
.world--kepler186,
.world--kepler452,
.world--toi700,
.world--k218,
.world--lhs1140 {
  --world-detail: none;
  --world-spot: transparent;
  --world-spot-size: 0;
}
.world--mercury {
  --world-surface: linear-gradient(145deg,#c9c6bd,#7d7c78);
  --land-main:#686762; --land-accent:#aaa79e; --land-islet:#86847d; --land-stroke:#55544f;
}
.world--venus {
  --world-surface: linear-gradient(145deg,#f2d47a,#c97b45);
  --land-main:#9c6a32; --land-accent:#e9ad51; --land-islet:#b85743; --land-stroke:#76472f;
}
.world--earth {
  --world-surface: linear-gradient(145deg,#83d9ee 0 42%,#4b98d0 100%);
  --land-main:#58aa58; --land-accent:#78c963; --land-islet:#3f9653; --land-stroke:#286f4d;
}
.world--mars {
  --world-surface: linear-gradient(145deg,#df966a,#9f493e);
  --land-main:#98473b; --land-accent:#c96a48; --land-islet:#e2aa72; --land-stroke:#6f3635;
}
.world--jupiter {
  --world-surface: linear-gradient(180deg,#ead4aa 0 17%,#d6aa80 17% 31%,#f0c894 31% 48%,#c88963 48% 65%,#efd3a0 65% 82%,#a96654 82% 100%);
  --land-main:#9b6049; --land-accent:#d79a67; --land-islet:#b64e3e; --land-stroke:#72463e;
}
.world--saturn {
  --world-surface: linear-gradient(180deg,#f1dfa9 0 22%,#d0b476 22% 34%,#ead19a 34% 55%,#c6a76c 55% 68%,#f3e3b0 68% 85%,#b79560 85% 100%);
  --land-main:#a9844d; --land-accent:#d8bd74; --land-islet:#8d6c46; --land-stroke:#755c3f;
}
.world--uranus {
  --world-surface: linear-gradient(145deg,#c5f2e9,#62b9c8);
  --land-main:#4d9da2; --land-accent:#91d8ce; --land-islet:#697fb1; --land-stroke:#377783;
}
.world--neptune {
  --world-surface: linear-gradient(180deg,#70a7ee 0 20%,#527fd8 20% 38%,#456bc8 38% 58%,#648ee3 58% 76%,#3f5db8 76% 100%);
  --land-main:#2f438d; --land-accent:#6086d5; --land-islet:#75b8e7; --land-stroke:#24356f;
}
.world--proxima {
  --world-surface: linear-gradient(145deg,#e3947c,#7c3d55);
  --land-main:#7f3c50; --land-accent:#ce6f68; --land-islet:#e5aa86; --land-stroke:#5c3047;
}
.world--trappist {
  --world-surface: linear-gradient(145deg,#b9ca8c,#566e67);
  --land-main:#617a61; --land-accent:#91ab71; --land-islet:#c6b775; --land-stroke:#44564f;
}
.world--kepler186 {
  --world-surface: linear-gradient(145deg,#9adfc2,#4b8aa2);
  --land-main:#4b9272; --land-accent:#75bb88; --land-islet:#b0cf7a; --land-stroke:#347063;
}
.world--kepler452 {
  --world-surface: linear-gradient(145deg,#bed9af,#6b8da8);
  --land-main:#738c63; --land-accent:#a5bd79; --land-islet:#c8b86e; --land-stroke:#53684f;
}
.world--toi700 {
  --world-surface: linear-gradient(145deg,#d8a9b7,#736b9a);
  --land-main:#875e83; --land-accent:#bd7c99; --land-islet:#e2a184; --land-stroke:#634b71;
}
.world--k218 {
  --world-surface: linear-gradient(180deg,#8bb9df 0 21%,#7697d3 21% 39%,#6379bd 39% 59%,#756aaa 59% 78%,#514d89 78% 100%);
  --land-main:#4e477e; --land-accent:#7569a7; --land-islet:#9b91d0; --land-stroke:#393661;
}
.world--lhs1140 {
  --world-surface: linear-gradient(145deg,#d39572,#70424e);
  --land-main:#79424a; --land-accent:#a65a51; --land-islet:#d59468; --land-stroke:#56343f;
}

/* The ageing veil follows the same broad light direction without drawing a
   second set of circular patches over the authored geography. */
.planet-age-state {
  background: linear-gradient(145deg,
    color-mix(in srgb,var(--planet-a) 66%,#d8d5c2),
    color-mix(in srgb,var(--planet-b) 62%,#b7b7aa) 52%,
    color-mix(in srgb,var(--planet-c) 64%,#8f948b));
}
.planet-age-state::after { display: none !important; content: none !important; }

.world-panel[data-growth-stage="0"] .planet-continent-atlas {
  opacity: .54;
  filter: grayscale(.7) saturate(.35) brightness(.82);
}
.world-panel[data-growth-stage="1"] .planet-continent-atlas {
  opacity: .72;
  filter: grayscale(.35) saturate(.62) brightness(.9);
}
.world-panel[data-growth-stage="2"] .planet-continent-atlas {
  opacity: .88;
  filter: saturate(.88) brightness(.96);
}
.world-panel[data-growth-stage="3"] .planet-continent-atlas {
  opacity: 1;
  filter: none;
}
.is-locked-preview .planet-continent-atlas { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .planet-continent-atlas { transition: none !important; }
}

/* The final living face keeps the original friendly expression. The younger
   mood overlay below has its own staged wake-up sequence. */
#world-panel .planet-live-face.planet-happy-face {
  inset: 0;
  color: #11141a;
  opacity: 1;
  transform: none;
}
#world-panel .planet-live-face.planet-happy-face i,
#world-panel .planet-live-face.planet-happy-face b {
  position: absolute;
  display: block;
  box-sizing: border-box;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
}
#world-panel .planet-live-face.planet-happy-face i {
  top: 43%;
  width: 9.5%;
  height: 14%;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.9);
}
#world-panel .planet-live-face.planet-happy-face i:first-child { right: auto; left: 31%; }
#world-panel .planet-live-face.planet-happy-face i:nth-child(2) { right: 31%; left: auto; }
#world-panel .planet-live-face.planet-happy-face i::after { display: none; content: none; }
#world-panel .planet-live-face.planet-happy-face b {
  top: 59%;
  left: 43%;
  width: 14%;
  height: 8%;
  border: 0;
  border-bottom: 4px solid currentColor;
  border-radius: 0 0 50% 50%;
}

/* Stage zero sleeps; stages one and two wake with solid, simple eyes. This
   shared overlay is used by every world, while stage three fades it away and
   reveals the final living face above. */
#world-panel .planet-mood {
  inset: 0;
  color: #11141a;
}
#world-panel .planet-mood i,
#world-panel .planet-mood b {
  position: absolute;
  display: block;
  box-sizing: border-box;
  box-shadow: none;
}
#world-panel .planet-mood i:first-child { right: auto; left: 31%; }
#world-panel .planet-mood i:nth-child(2) { right: 31%; left: auto; }
#world-panel .planet-mood i::after { display: none; content: none; }

#world-panel[data-growth-stage="0"] .planet-mood {
  opacity: .86;
  animation: planetSleepBreath 3.8s ease-in-out infinite;
}
#world-panel[data-growth-stage="0"] .planet-mood i {
  top: 45%;
  width: 10%;
  height: 6%;
  border: 0;
  border-top: 4px solid currentColor;
  border-radius: 50% 50% 0 0;
  background: transparent;
}
#world-panel[data-growth-stage="0"] .planet-mood i:first-child { transform: rotate(5deg); }
#world-panel[data-growth-stage="0"] .planet-mood i:nth-child(2) { transform: rotate(-5deg); }
#world-panel[data-growth-stage="0"] .planet-mood b {
  top: 60%;
  left: 45.5%;
  width: 9%;
  height: 5%;
  border: 0;
  border-bottom: 3px solid currentColor;
  border-radius: 0 0 50% 50%;
  background: transparent;
  transform: none;
}

#world-panel[data-growth-stage="1"] .planet-mood {
  opacity: .9;
  transform: translateY(.5%);
}
#world-panel[data-growth-stage="1"] .planet-mood i {
  top: 44%;
  width: 9.5%;
  height: 6%;
  border: 0;
  border-radius: 48%;
  background: currentColor;
  transform: scaleY(.48);
}
#world-panel[data-growth-stage="1"] .planet-mood b {
  top: 60%;
  left: 44.5%;
  width: 11%;
  height: 6%;
  border: 0;
  border-bottom: 3px solid currentColor;
  border-radius: 0 0 50% 50%;
  background: transparent;
  transform: none;
}

#world-panel[data-growth-stage="2"] .planet-mood {
  opacity: .96;
  transform: translateY(.5%);
}
#world-panel[data-growth-stage="2"] .planet-mood i {
  top: 42%;
  width: 9%;
  height: 11%;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.78);
  transform: none;
}
#world-panel[data-growth-stage="2"] .planet-mood b {
  top: 59%;
  left: 44%;
  width: 12%;
  height: 7%;
  border: 0;
  border-bottom: 3px solid currentColor;
  border-radius: 0 0 50% 50%;
  background: transparent;
  transform: none;
}

@keyframes planetSleepBreath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(.8%); }
}

.reduce-motion #world-panel[data-growth-stage="0"] .planet-mood { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #world-panel[data-growth-stage="0"] .planet-mood { animation: none !important; }
}

/* 2.5.4 — system upgrades must read as controls, not ledger cells. A ready
   upgrade is bright and raised, an unaffordable one stays pressable for its
   feedback/optional-offer path, and a maxed control is deliberately flat. */
#boost-list .boost-button {
  min-height: 34px;
  border: 2px solid #69705f;
  border-radius: 4px;
  color: #4f5947;
  background: #e5ddc7;
  box-shadow: 0 3px 0 #b3a98d, inset 0 1px 0 rgba(255,255,255,.62);
  cursor: pointer;
  transform: translateY(0);
  transition: transform 90ms ease, box-shadow 90ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
#boost-list .boost-button.affordable {
  border-color: #2b3a20;
  color: #172014;
  background: #afe53b;
  box-shadow: 0 4px 0 #739b25, inset 0 1px 0 rgba(255,255,255,.56);
}
#boost-list .boost-button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #978e74, inset 0 1px 0 rgba(255,255,255,.68);
}
#boost-list .boost-button.affordable:not(:disabled):hover {
  background: #bbef48;
  box-shadow: 0 5px 0 #739b25, inset 0 1px 0 rgba(255,255,255,.66);
}
#boost-list .boost-button:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #978e74, inset 0 2px 0 rgba(31,35,31,.12);
}
#boost-list .boost-button:focus-visible {
  outline: 3px solid #1e6f69;
  outline-offset: 2px;
}
#boost-list .boost-button:disabled {
  border-color: #bbb7a9;
  color: #999b8d;
  background: #d8d2c0;
  box-shadow: inset 0 1px 2px rgba(31,35,31,.08);
  cursor: default;
  opacity: .72;
  transform: none;
}

@media (max-width: 760px) {
  #boost-list .boost-button { min-height: 40px; }
}

/* 2.7.1 — every scene label stays on its own physical surface. The storefront
   keeps its translated name directly under the artwork, inside the hit area. */
.scene-action-rail .shop-button {
  grid-template-rows: 44px 9px;
  align-content: center;
  overflow: hidden;
}
.scene-action-rail .shop-button > b {
  display: block !important;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  max-width: 100%;
  overflow: hidden;
  color: #f7e8a3;
  font-size: .4rem;
  font-weight: 950;
  letter-spacing: .05em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  text-shadow: 1px 2px 0 rgba(0,0,0,.56);
}
.scene-action-rail .shop-button .shop-storefront {
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  height: 44px;
}

.reward-offer,
.reward-offer__button,
.reward-offer__button > *,
.reward-offer__tag,
.reward-offer__count {
  min-width: 0;
}
.reward-offer {
  max-width: calc(100% - 10px);
}
.reward-offer__tag {
  max-width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 4px 10px 5px 8px;
  clip-path: none;
}
.reward-offer__tag small,
.reward-offer__tag strong,
.reward-offer__tag em {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
.reward-offer__tag strong bdi {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.reward-offer__tag .energy-token {
  display: inline;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.reward-offer__count {
  justify-self: center;
  width: 100%;
  max-width: 36px;
  height: auto;
  aspect-ratio: 1;
  box-sizing: border-box;
  overflow: hidden;
  contain: paint;
}
.reward-offer__count b,
.reward-offer__count small {
  max-width: calc(100% - 8px);
  white-space: nowrap;
}

/* 2.7.7 — the offer is one unmistakable rewarded-ad control. The retired
   courier, caption stack and line timer are replaced by a large video tile,
   one compact reward readout and the existing circular countdown. */
.reward-offer {
  --offer-scale: 1;
  right: 14px;
  width: 218px;
}
html[dir="rtl"] .reward-offer { right: auto; left: 14px; }
.reward-offer__button {
  grid-template-columns: 56px minmax(0,1fr) 36px;
  gap: 6px;
  min-height: 68px;
  padding: 5px;
  overflow: hidden;
  border: 2px solid #182019;
  border-radius: 11px 5px 10px 7px;
  color: #20281d;
  background: #f1e5b8;
  box-shadow: 3px 4px 0 rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.35);
}
.reward-offer__ad-cta {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  align-self: stretch;
  min-width: 0;
  min-height: 56px;
  padding: 5px 2px 4px;
  overflow: hidden;
  border: 2px solid #182019;
  border-radius: 9px 4px 8px 5px;
  color: #172019;
  background: var(--accent);
  box-shadow: 2px 3px 0 rgba(0,0,0,.36);
  pointer-events: none;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.reward-offer__ad-cta .ui-mark {
  width: 27px;
  height: 27px;
  stroke-width: 1.8;
}
.reward-offer__ad-cta b {
  display: block;
  max-width: 100%;
  color: inherit;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .025em;
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
}
.reward-offer.is-instant .reward-offer__ad-cta { background: #69d1c7; }
.reward-offer__button:hover .reward-offer__ad-cta {
  background: color-mix(in srgb, var(--accent) 84%, #fff);
  box-shadow: 2px 4px 0 rgba(0,0,0,.4);
  transform: translateY(-1px);
}
.reward-offer.is-instant .reward-offer__button:hover .reward-offer__ad-cta {
  background: color-mix(in srgb, #69d1c7 84%, #fff);
}
.reward-offer__button:active .reward-offer__ad-cta {
  box-shadow: 1px 1px 0 rgba(0,0,0,.42);
  transform: translateY(1px);
}
.reward-offer__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.reward-offer__tag {
  position: static;
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: #232a20;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}
.reward-offer__tag::after { display: none; content: none; }
html[dir="rtl"] .reward-offer__tag {
  margin: 0;
  padding: 0;
  clip-path: none;
}
.reward-offer__tag strong {
  display: grid;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  font-size: inherit;
  line-height: 1;
}
.reward-offer__tag strong bdi {
  order: 1;
  color: #25321f;
  font-size: .69rem;
  font-weight: 950;
  line-height: 1;
}
.reward-offer__tag strong > span {
  order: 2;
  display: block;
  color: #60634f;
  font-size: .49rem;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.reward-offer__count {
  width: 36px;
  max-width: 36px;
  height: 36px;
}
.reduce-motion .reward-offer__ad-cta { transition: none !important; }

@media (min-width:761px) and (orientation:landscape) and (max-height:600px) {
  .reward-offer { right: 11px; width: 190px; }
  html[dir="rtl"] .reward-offer { right: auto; left: 11px; }
  .reward-offer__button { grid-template-columns: 50px minmax(0,1fr) 32px; gap: 4px; min-height: 62px; padding: 4px; }
  .reward-offer__ad-cta { min-height: 52px; padding-block: 4px 3px; }
  .reward-offer__ad-cta .ui-mark { width: 24px; height: 24px; }
  .reward-offer__ad-cta b { font-size: .57rem; }
  .reward-offer__tag strong bdi { font-size: .62rem; }
  .reward-offer__tag strong > span { font-size: .44rem; }
  .reward-offer__count { width: 32px; max-width: 32px; height: 32px; }
}

@media (max-width:760px) {
  .reward-offer { right: 9px; width: 170px; }
  html[dir="rtl"] .reward-offer { right: auto; left: 9px; }
  .reward-offer__button { grid-template-columns: 48px minmax(0,1fr) 30px; gap: 4px; min-height: 60px; padding: 4px; }
  .reward-offer__ad-cta { min-height: 50px; padding-block: 4px 3px; }
  .reward-offer__ad-cta .ui-mark { width: 23px; height: 23px; }
  .reward-offer__ad-cta b { font-size: .55rem; }
  .reward-offer__tag strong { gap: 2px; }
  .reward-offer__tag strong bdi { font-size: .59rem; }
  .reward-offer__tag strong > span { font-size: .42rem; }
  .reward-offer__count { width: 30px; max-width: 30px; height: 30px; }
}

/* A double roll remains one in-world rail with two independently actionable
   tiles. The single-tile geometry is unchanged; paired windows stack inside
   the same clipped planet stage at desktop, 907px and 390px widths. */
.reward-offer.is-paired {
  display: grid;
  gap: 7px;
}
.reward-offer__button[hidden] { display: none; }
.reward-offer__button--secondary { border-radius: 7px 11px 5px 10px; }
@media (max-width:760px) {
  .reward-offer.is-paired { gap: 5px; }
}

.tap-copy {
  width: max-content;
  min-width: 120px;
  max-width: 88%;
  height: auto;
  text-align: center;
}
.tap-copy b,
.tap-copy small {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}
.combo-pill {
  min-width: 0;
  max-width: min(32%, 120px);
}
.combo-pill span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.combo-pill strong { white-space: nowrap; }
.bloomline-heading,
.bloomline-heading > * { min-width: 0; }
.bloomline-heading strong {
  max-width: 52%;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}
.route-node small {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* 2.7.2 — compositor-safe planet travel.
   World data changes at the exact midpoint of the 760 ms journey. The old
   transition animated blur/saturation/hue on the complete planet subtree at
   that same moment, forcing the browser to rerasterize the SVG continents,
   rings, moons and satellite PNGs every frame. Travel now moves one cached
   layer with transform + opacity only. The horizon is briefly faded to dark
   before its four stage textures are swapped, so first-visit image decode and
   the new world's 680 ms growth transitions cannot overlap the approach. */
.planet-system { will-change: auto; }
.space-jump {
  contain: paint;
  will-change: auto;
}
.planet-stage.space-travel {
  contain: paint;
}
.planet-stage.space-travel .planet-system {
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: worldDiveComposited 760ms cubic-bezier(.55,.02,.23,1) both;
}
.planet-stage.space-travel .space-jump {
  will-change: opacity, transform;
  backface-visibility: hidden;
  animation: spaceJumpComposited 760ms ease-in-out both;
}

@keyframes worldDiveComposited {
  0% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1) rotate(0);
  }
  34% {
    opacity: .7;
    transform: translate3d(0,0,0) scale(.72) rotate(-1deg);
  }
  48%, 52% {
    opacity: .07;
    transform: translate3d(0,0,0) scale(.27) rotate(.7deg);
  }
  66% {
    opacity: .64;
    transform: translate3d(0,0,0) scale(.74) rotate(.5deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1) rotate(0);
  }
}
@keyframes spaceJumpComposited {
  0%, 100% { opacity: 0; transform: translateZ(0) scale(.82); }
  38%, 62% { opacity: .94; transform: translateZ(0) scale(1.04); }
}

/* Only opacity crossfades the authored growth art. Filtering and translating
   four full-width PNG layers added paint work without improving readability. */
.world-panel .root-horizon {
  transition: opacity 210ms cubic-bezier(.22,.72,.24,1);
}
.world-panel .root-horizon .surface-stage {
  filter: none;
  transform: none;
  will-change: auto;
  transition: opacity 680ms cubic-bezier(.22,.72,.24,1);
}
.world-panel[data-growth-stage="0"] .root-horizon .surface-stage--0,
.world-panel[data-growth-stage="1"] .root-horizon .surface-stage--1,
.world-panel[data-growth-stage="2"] .root-horizon .surface-stage--2,
.world-panel[data-growth-stage="3"] .root-horizon .surface-stage--3 {
  filter: none;
  transform: none;
}
.planet-stage.space-travel .root-horizon {
  opacity: 0 !important;
  will-change: opacity;
  transition-duration: 170ms;
}

/* Freeze independent timelines while their common ancestor recedes. The world
   swap is performed while nearly invisible; disabling only travel-time state
   transitions also prevents a fast second journey from inheriting a lingering
   560/680 ms filter animation from the previous planet. */
.planet-stage.space-travel .planet,
.planet-stage.space-travel .planet-age-state,
.planet-stage.space-travel .planet-continent-atlas,
.planet-stage.space-travel .planet-idle,
.planet-stage.space-travel .planet-mood,
.planet-stage.space-travel .planet-glow,
.planet-stage.space-travel .planet-sheen,
.planet-stage.space-travel .surface-stage {
  transition: none !important;
}
.planet-stage.space-travel .planet,
.planet-stage.space-travel .planet-idle,
.planet-stage.space-travel .moon-orbit,
.planet-stage.space-travel .life-satellite-orbit,
.planet-stage.space-travel .world-belt,
.planet-stage.space-travel .seed-pod,
.planet-stage.space-travel .route-sparkle {
  animation-play-state: paused !important;
}
.planet-stage.space-travel .orbit {
  opacity: 0 !important;
  filter: none !important;
  transition: none !important;
}

.reduce-motion .planet-stage.space-travel .planet-system,
.reduce-motion .planet-stage.space-travel .space-jump,
.reduce-motion .planet-stage.space-arrival .planet-glow {
  animation: none !important;
}
.reduce-motion .planet-stage.space-travel .root-horizon {
  opacity: 1 !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .planet-stage.space-travel .planet-system,
  .planet-stage.space-travel .space-jump,
  .planet-stage.space-arrival .planet-glow {
    animation: none !important;
  }
  .planet-stage.space-travel .root-horizon {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* 2.7.10 — the three structural play surfaces share one tight corner.
   Earlier hand-cut radii made the upper-left edge feel inflated and made the
   two desktop columns look as though they belonged to different interfaces. */
.game-shell { --play-surface-radius: 4px; }
.game-shell .world-panel,
.game-shell .planet-stage,
.game-shell .factory-panel {
  border-radius: var(--play-surface-radius);
}

/* 2.10.2 performance pass — keep recurring progress and growth animation on
   compositor-friendly properties. Full-disc filter interpolation caused
   visible 200ms+ frames under portal-style CPU throttling. The authored age,
   continent and surface layers still crossfade softly through opacity. */
.route-line > i,
.launch-progress i {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  transition-property: transform;
}
.route-line > i { transition-duration: 350ms; }
.launch-progress i { transition-duration: 250ms; }
.world-panel .planet {
  will-change: auto;
  transition-property: border-radius;
}
.game-shell .world-panel .planet-age-state,
.game-shell .world-panel .planet-idle,
.game-shell .world-panel .planet-continent-atlas,
.game-shell .world-panel .planet-glow {
  will-change: opacity, transform;
  transition-property: opacity, transform;
}
.game-shell .planet-stage.space-travel .planet-age-state,
.game-shell .planet-stage.space-travel .planet-idle,
.game-shell .planet-stage.space-travel .planet-continent-atlas,
.game-shell .planet-stage.space-travel .planet-glow {
  transition: none;
}
.anomaly-button { will-change: translate, transform; }
.seed-pod-layer { container-type: inline-size; }
.seed-pod:not(.seed-pod--manual) {
  left: -4px;
  animation-name: seedTravelComposited;
}
@keyframes seedTravelComposited {
  0% {
    translate: 0 0;
    opacity: 0;
    transform: translateY(var(--pod-drift, 0)) rotate(0deg) scale(.7);
  }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% {
    translate: 100cqw 0;
    opacity: 0;
    transform: translateY(calc(var(--pod-drift, 0) * -1)) rotate(380deg) scale(1.1);
  }
}

/* 1.0.1 responsive storefront — enlarge the complete scene control by about
   ten percent without scaling its containing rail or stealing nearby input.
   Each breakpoint keeps an explicit hit box so the artwork, translated label
   and focus outline remain inside the planet stage. */
.scene-action-rail .shop-button {
  width: 66px;
  min-width: 66px;
  height: 66px;
  min-height: 66px;
  grid-template-rows: 48px 10px;
}
.scene-action-rail .shop-button .shop-storefront {
  width: 48px;
  height: 48px;
}
.scene-action-rail .shop-button > b { font-size: .44rem; }

@media (min-width: 761px) and (orientation: landscape) and (max-height: 600px) {
  .scene-action-rail .shop-button {
    width: 60px;
    min-width: 60px;
    height: 62px;
    min-height: 62px;
  }
}

@media (max-width: 760px) {
  .scene-action-rail .shop-button {
    width: 60px;
    min-width: 60px;
    height: 64px;
    min-height: 64px;
  }
}

/* A two-card reward stack occupies the right navigation lane for ten seconds.
   Keep that temporary surface unambiguous; the world arrow returns as soon as
   the shared offer window closes. */
.planet-stage.reward-offer-paired .world-nav {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.factory-heading > div:first-child { min-width: 0; }
.factory-heading h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* 1.0.1 portal viewport matrix — keep the 16:9 board inside native safe
   areas and give compact Poki/CrazyGames landscape embeds their own two-column
   composition. Portrait remains a natural page, but a visible reward ticket
   reserves real scene height instead of covering the planet. */
@media (min-width: 761px) and (orientation: landscape) {
  body {
    box-sizing: border-box;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .game-shell {
    width: min(1280px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

/* 1.0.1 large portal fill — preserve the reviewed 1280x720 composition, then
   scale the complete board as one unit on larger landscape embeds. This keeps
   typography, controls and hit targets proportional while removing the large
   unused frame seen in 1920x1080 Y8 QA. */
@media (min-width: 1281px) and (min-height: 721px) and (orientation: landscape) {
  html {
    overflow: hidden;
    scrollbar-gutter: auto;
  }
  html.large-portal-viewport .game-shell {
    width: 1280px;
    height: 720px;
    min-height: 720px;
    max-height: none;
    aspect-ratio: auto;
    transform: scale(var(--large-portal-scale, 1));
    transform-origin: center center;
  }
}

@media (orientation: portrait) {
  body {
    box-sizing: border-box;
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  }
  .game-shell {
    max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 12px);
    padding-top: max(9px, env(safe-area-inset-top));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
  }
  body {
    display: grid;
    overflow: hidden;
    box-sizing: border-box;
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  }
  .game-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0;
    aspect-ratio: auto;
  }
  .game-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 38%);
    gap: 6px;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-items: stretch;
  }
  .world-panel,
  .factory-panel {
    height: 100%;
    min-height: 0;
    padding: 5px;
    overflow: hidden;
  }
  .world-panel {
    display: flex;
    flex-direction: column;
  }
  .scene-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    height: 32px;
    min-height: 32px;
    margin: 0 0 2px;
    overflow: hidden;
  }
  .scene-stats .stat-card:nth-child(n),
  .scene-stats .stat-card--energy {
    grid-template-rows: 10px 13px;
    align-content: center;
    min-height: 32px;
    padding: 2px 4px;
    row-gap: 2px;
  }
  .scene-stats .stat-card:nth-child(n) > span {
    display: block;
    min-height: 0;
    overflow: hidden;
    font-size: .38rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .scene-stats .stat-card strong {
    display: flex;
    align-items: baseline;
    min-height: 0;
    font-size: .65rem;
    line-height: 1;
    white-space: nowrap;
  }
  .world-heading {
    grid-template-columns: minmax(64px, .8fr) minmax(130px, 2fr) minmax(92px, 1fr);
    grid-template-rows: 44px;
    column-gap: 5px;
    min-height: 44px;
    height: 44px;
    padding: 0 2px;
    overflow: hidden;
  }
  .world-heading > div:first-child {
    grid-column: 1;
    grid-row: 1;
  }
  .world-heading .level-map {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 28px;
    min-width: 0;
    margin: 0;
    padding: 0 4px;
  }
  .world-heading .world-tools {
    grid-column: 3;
    grid-row: 1;
    gap: 4px;
  }
  .world-heading h2 { font-size: .82rem; }
  .world-heading .eyebrow {
    margin-bottom: 1px;
    font-size: .42rem;
  }
  .world-bonus span { font-size: .38rem; }
  .world-bonus strong { font-size: .78rem; }
  .planet-stage {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 2px 0 0;
  }
  .planet-button { width: clamp(126px, 40vh, 154px); }
  .bloomline {
    top: 5px;
    width: calc(100% - 14px);
    padding: 4px 7px 5px;
  }
  .bloomline-heading { margin-bottom: 3px; }
  .bloomline-route { min-height: 24px; }
  .route-node { min-width: 30px; }
  .route-node small { font-size: .32rem; }
  .route-node b {
    width: 16px;
    height: 16px;
  }
  .root-horizon { height: clamp(54px, 17vh, 66px); }
  .factory-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    min-height: 44px;
    height: 44px;
    padding: 1px 2px 4px;
  }
  .factory-heading h2 {
    font-size: .66rem;
    line-height: .95;
  }
  .factory-heading .eyebrow {
    margin-bottom: 1px;
    font-size: .38rem;
  }
  .buy-modes {
    height: 34px;
    padding: 1px;
  }
  .buy-mode {
    min-width: 27px;
    min-height: 0;
    padding: 3px 4px;
    font-size: .48rem;
  }
  .generator-list {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 3px;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 3px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .generator-card {
    grid-template-columns: 30px minmax(0, 1fr) 24px 58px;
    column-gap: 3px;
    min-height: 47px;
    padding: 3px;
  }
  .module-icon {
    width: 28px;
    height: 28px;
  }
  .module-icon svg {
    width: 23px;
    height: 23px;
  }
  .module-copy .generator-name { font-size: .53rem; }
  .module-copy span {
    margin-top: 1px;
    font-size: .43rem;
  }
  .owned-badge {
    min-width: 22px;
    font-size: .38rem;
  }
  .owned-badge strong { font-size: .58rem; }
  .buy-button {
    min-width: 58px;
    min-height: 40px;
    padding: 4px 3px;
    font-size: .45rem;
  }
  .boost-section { flex: 0 0 auto; }
  .section-label {
    margin: 3px 0 2px;
    font-size: .38rem;
  }
  .boost-list { gap: 3px; }
  .boost-card:nth-child(n) {
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-rows: auto 30px;
    gap: 2px;
    min-height: 61px;
    padding: 3px;
  }
  .boost-icon {
    width: 21px;
    height: 21px;
  }
  .boost-name { font-size: .45rem; }
  .boost-level { font-size: .38rem; }
  #boost-list .boost-button {
    min-height: 30px;
    padding: 3px 1px;
    font-size: .43rem;
  }
  .studio-signature { display: none; }
  .scene-action-rail {
    inset-inline-start: auto;
    right: auto;
    left: 8px;
  }
  html[dir="rtl"] .scene-action-rail {
    right: 8px;
    left: auto;
  }
  .reward-offer {
    top: 58px;
    right: 6px;
    width: 132px;
  }
  html[dir="rtl"] .reward-offer {
    right: auto;
    left: 6px;
  }
  .reward-offer__button {
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    gap: 2px;
    min-height: 48px;
    padding: 3px;
  }
  .reward-offer__ad-cta {
    min-height: 42px;
    padding: 2px 1px;
  }
  .reward-offer__ad-cta .ui-mark {
    width: 19px;
    height: 19px;
  }
  .reward-offer__ad-cta b { font-size: .48rem; }
  .reward-offer__tag strong bdi { font-size: .49rem; }
  .reward-offer__tag strong > span { font-size: .35rem; }
  .reward-offer__count {
    width: 24px;
    max-width: 24px;
    height: 24px;
  }
  .reward-offer.is-paired { gap: 4px; }
  .planet-stage.reward-offer-active .planet-button {
    justify-self: start;
    width: clamp(96px, 17vw, 112px);
    margin-inline-start: 75px;
  }
  html[dir="rtl"] .planet-stage.reward-offer-active .planet-button {
    justify-self: end;
    margin-inline-start: 0;
    margin-right: 75px;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  .scene-action-rail {
    top: 94px;
    inset-inline-start: auto;
    right: auto;
    left: 10px;
  }
  html[dir="rtl"] .scene-action-rail {
    right: 10px;
    left: auto;
  }
  .planet-stage:not(.reward-offer-active) .planet-button {
    transform: translateX(clamp(7px, calc((374px - 100vw) * .65), 35px));
  }
  html[dir="rtl"] .planet-stage:not(.reward-offer-active) .planet-button {
    transform: translateX(clamp(-35px, calc((100vw - 374px) * .65), -7px));
  }
  .planet-stage.reward-offer-active { min-height: 470px; }
  .planet-stage.reward-offer-active .reward-offer { top: 96px; }
  .planet-stage.reward-offer-active .planet-button { transform: translateY(90px); }
}

/* 1.0.1 — keep the localized seconds unit readable and optically centred.
   Number and unit share a normal two-line stack instead of fighting an
   absolute bottom offset inside the circular progress ring. */
.reward-offer__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 2px 1px 1px;
}
.reward-offer__count b {
  position: relative;
  inset: auto;
  z-index: 1;
  font-size: .72rem;
  line-height: .82;
  transform: none;
}
.reward-offer__count small {
  position: relative;
  inset: auto;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  color: #bec7b9;
  font-size: .46rem;
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  transform: none;
}

@media (min-width: 761px) and (orientation: landscape) and (max-height: 600px) {
  .reward-offer__count small { font-size: .42rem; }
}

@media (max-width: 760px) {
  .reward-offer__count small { font-size: .4rem; }
}

@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
  .reward-offer__button { grid-template-columns: 38px minmax(0, 1fr) 28px; }
  .reward-offer__count {
    width: 28px;
    max-width: 28px;
    height: 28px;
  }
  .reward-offer__count b { font-size: .66rem; }
  .reward-offer__count small { font-size: .34rem; }
}

/* 1.0.1 — the reward rail keeps the same readable controls while occupying
   ten percent less horizontal play space at every supported portal size. */
.reward-offer { width: 196px; }
@media (min-width: 761px) and (orientation: landscape) and (max-height: 600px) {
  .reward-offer { width: 171px; }
}
@media (max-width: 760px) {
  .reward-offer { width: 153px; }
}
@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
  .reward-offer { width: 119px; }
}

/* Rewarded upgrades use the existing purchase control: the video mark makes
   its alternate action obvious without opening another decision surface. */
#boost-list .boost-button.rewarded-upgrade {
  border-color: #31451f;
  color: #172014;
  background: #f1c957;
  box-shadow: 0 4px 0 #a67c24, inset 0 1px 0 rgba(255,255,255,.62);
}
#boost-list .boost-button.rewarded-upgrade:not(:disabled):hover {
  background: #f7d66c;
  box-shadow: 0 5px 0 #a67c24, inset 0 1px 0 rgba(255,255,255,.7);
}
.boost-reward-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  white-space: nowrap;
}
.boost-reward-cta .ui-mark { width: 15px; height: 15px; flex: 0 0 auto; }
.boost-reward-cta b { overflow: hidden; font-size: .54rem; text-overflow: ellipsis; }

/* 1.0.1 storefront legibility — the artwork and its translated label are
   exactly 15% larger than the previous reviewed scene values. The hit box
   grows only enough to contain both, so neighboring reward/planet controls
   keep their existing clear zones. */
.scene-action-rail .shop-button {
  width: 70px;
  min-width: 70px;
  height: 70px;
  min-height: 70px;
  grid-template-rows: 55px 11px;
}
.scene-action-rail .shop-button .shop-storefront {
  width: 55px;
  height: 55px;
}
.scene-action-rail .shop-button > b { font-size: .506rem; }

@media (min-width: 761px) and (orientation: landscape) and (max-height: 600px) {
  .scene-action-rail .shop-button {
    width: 65px;
    min-width: 65px;
    height: 69px;
    min-height: 69px;
  }
}

@media (max-width: 760px) {
  .scene-action-rail .shop-button {
    width: 65px;
    min-width: 65px;
    height: 70px;
    min-height: 70px;
  }
}

/* 1.0.1 authored tool art — helper and upgrade marks are external SVG assets,
   not runtime-drawn icon-library fragments. Keep the whole image as one
   decorative, non-draggable layer inside the existing hit-free icon slot. */
.module-icon__asset,
.boost-icon__asset {
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.module-icon__asset { width: 38px; height: 38px; }
.boost-icon__asset { width: 32px; height: 32px; }

@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
  .module-icon__asset { width: 25px; height: 25px; }
  .boost-icon__asset { width: 20px; height: 20px; }
}