:root {
  color-scheme: dark;
  --ink: #102927;
  --cream: #fff8dc;
  --mint: #8ce8a9;
  --nectar: #ffe66e;
  --leaf: #4f9f57;
  --leaf-deep: #183f34;
  --bark: #79502d;
  --bark-deep: #3e281b;
  --panel-edge: #b4d981;
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body { margin: 0; min-height: 100%; overflow-x: hidden; }

body {
  background:
    radial-gradient(circle at 50% -18%, #67aa77 0, #306c59 35%, transparent 58%),
    linear-gradient(180deg, #173f39, #091f22);
  color: var(--cream);
  font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

button, a { font: inherit; }
button { color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible {
  outline: 3px solid #fff18a;
  outline-offset: 3px;
}
canvas:focus-visible { outline: 4px solid white; outline-offset: -5px; }

#app {
  width: min(1180px, 100%);
  min-height: 100dvh;
  margin: auto;
  display: grid;
  grid-template-rows: auto minmax(300px, 1fr) auto;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  gap: 8px;
}

.topbar { display: flex; align-items: center; gap: 8px; min-height: 52px; }
.home, .round-button, .speed-button {
  min-width: 44px; height: 44px; border: 2px solid #ffffff24; background: #0f2929cc; color: white;
  display: grid; place-items: center; box-shadow: inset 0 1px #ffffff24, 0 4px 12px #06191880;
}
.home, .round-button { width: 44px; border-radius: 50%; }
.home { text-decoration: none; }
.speed-button { min-width: 50px; padding: 0 9px; border-radius: 22px; color: #fff3a1; font-weight: 950; font-variant-numeric: tabular-nums; }
.home:hover, .round-button:hover, .speed-button:hover { transform: translateY(-1px); background: #24514a; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 900; letter-spacing: .12em; white-space: nowrap; text-shadow: 0 2px #071817; }
.brand-mark { color: var(--nectar); font-size: 27px; filter: drop-shadow(0 0 8px #ffeb73aa); }
.status { margin-left: auto; display: flex; gap: 6px; }
.counter { min-width: 70px; height: 40px; border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 6px; background: #0d2928cc; border: 2px solid #ffffff18; box-shadow: inset 0 2px 8px #0005; }
.counter span { font-size: 20px; }
.counter b { font-variant-numeric: tabular-nums; }
.nectar span { color: var(--nectar); }
.wave span { color: #8ce8ff; }
.seed-counter span { color: #e7c2ff; filter: drop-shadow(0 0 7px #ce8dff); }
.top-actions { display: flex; gap: 4px; }

.game-shell {
  position: relative; overflow: hidden; min-height: 0; border-radius: 22px;
  border: 4px solid #91c86e; background: #214a3d;
  box-shadow: 0 18px 45px #031615aa, inset 0 0 0 2px #e7ffc34d, 0 0 0 2px #294b2f;
}
.game-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 17px;
  box-shadow: inset 0 3px #f1ffc64d, inset 0 -5px #18372759;
}
#gameCanvas { display: block; width: 100%; height: 100%; min-height: 300px; touch-action: none; }

.tray {
  display: grid; gap: 6px; min-width: 0;
  background:
    linear-gradient(180deg, #224c3fe8, #112e2ce8),
    repeating-linear-gradient(90deg, transparent 0 44px, #ffffff08 44px 46px);
  border: 3px solid #729c5f; border-radius: 20px;
  padding: 8px; box-shadow: inset 0 2px #dbffc333, 0 8px 24px #03141488;
}
.tray-main { display: flex; align-items: stretch; gap: 7px; min-width: 0; }
.tower-cards {
  min-width: 0; flex: 1; display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden;
  padding: 5px 3px 8px; scroll-snap-type: x proximity; scrollbar-color: #7ab995 #102c2b;
}
.seed-card, .upgrade-card, .sell-card {
  position: relative; min-width: 84px; width: 92px; height: 82px; flex: 0 0 auto; scroll-snap-align: start;
  border: 3px solid #ffffff38; border-radius: 15px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tower-color, #6fb879) 56%, #315b4a), #1c3b34);
  box-shadow: inset 0 2px #ffffff2e, 0 4px 0 #081e1c;
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}
.seed-card:hover:not(:disabled), .upgrade-card:hover:not(:disabled), .sell-card:hover:not(:disabled) { transform: translateY(-3px); }
.seed-card.selected { transform: translateY(-5px); border-color: #fff59b; box-shadow: 0 0 0 3px #fff59b3d, inset 0 2px #fff8, 0 6px 0 #081e1c; }
.seed-card.unaffordable { filter: grayscale(.65) brightness(.6); }
.seed-card.combo::after { content: "◆"; position: absolute; right: 5px; top: 3px; font-size: 11px; color: #fff3a0; filter: drop-shadow(0 0 4px #fff); }
.seed-card.deep::before { content: "II"; position: absolute; right: 5px; top: 3px; font-size: 9px; font-weight: 950; color: #fff3a0; text-shadow: 0 1px #17352e; }
.seed-symbol { display: grid; place-items: center; height: 53px; font-size: 38px; line-height: 1; color: var(--tower-color, #ffe36d); text-shadow: 0 2px #14352c, 0 0 10px color-mix(in srgb, var(--tower-color, #ffe36d) 65%, transparent); }
.seed-symbol::after { content: ""; position: absolute; width: 7px; height: 21px; top: 35px; left: calc(50% - 3px); background: #4ec46a; border-radius: 8px; }
.cost { position: absolute; left: 4px; right: 4px; bottom: 3px; font-size: 14px; font-weight: 900; color: white; }
.cost b { color: var(--nectar); margin-right: 3px; }
.requirement { position: absolute; left: 5px; top: 4px; display: flex; gap: 1px; font-size: 10px; color: #fff; }
.tray-divider { width: 2px; flex: 0 0 2px; background: linear-gradient(transparent, #d6edaf55, transparent); margin: 4px 0; }
.tray-actions { display: flex; align-items: stretch; gap: 6px; flex: 0 0 auto; }
.upgrade-card, .sell-card {
  display: grid;
  grid-template-rows: 1fr auto auto;
  place-items: center;
  width: 78px;
  min-width: 72px;
  padding: 5px 4px 4px;
  font-size: 27px;
}
.upgrade-card { background: linear-gradient(145deg,#7965bd,#3d306f); }
.sell-card { background: linear-gradient(145deg,#bd724b,#6c3f2d); }
.upgrade-card > span, .sell-card > span { line-height: 1; filter: drop-shadow(0 2px #152b25); }
.upgrade-card b, .sell-card b { font-size: 10px; line-height: 1.15; letter-spacing: .08em; }
.upgrade-card small, .sell-card small { min-height: 14px; font-size: 11px; line-height: 1.15; color: #fff2a1; }
.upgrade-card:disabled, .sell-card:disabled { opacity: .38; cursor: default; filter: grayscale(.55); }
.upgrade-card.ready { animation: glow 1s ease-in-out infinite alternate; border-color: #ffed84; }
.sell-card.ready { border-color: #ffcb7c; box-shadow: inset 0 2px #ffffff2e, 0 4px 0 #321b12; }

.tower-inspector {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 75px;
  padding: 7px 11px 8px 7px;
  color: white;
  background: linear-gradient(135deg, #183b32f2, #0d2827ed);
  border: 3px solid #e9e18b;
  border-radius: 15px;
  box-shadow: inset 0 2px #ffffff24, 0 7px 18px #07181780;
}
.tower-inspector.hidden { display: none; }
.tower-inspector-glyph {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  color: var(--inspector-color, #fff29a);
  background: color-mix(in srgb, var(--inspector-color, #fff29a) 35%, #25533f);
  border: 2px solid #ecf7bb;
  font-size: 26px;
  text-shadow: 0 2px #14372e;
}
.tower-inspector-copy { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; min-width: 0; flex: 1; text-align: left; }
.tower-inspector-heading { display: flex; min-width: 0; align-items: center; gap: 8px; }
.tower-inspector-copy b {
  overflow: hidden;
  font-size: 13px;
  letter-spacing: .08em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tower-inspector-heading > span {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 10px;
  color: #18352e;
  background: #e8f5ba;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .05em;
}
.tower-inspector-copy small { grid-column: 1; color: #e8f5ba; font-size: 10px; font-weight: 850; line-height: 1.2; }
.tower-inspector-stats {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  min-width: 0;
  align-content: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 3px;
}
.tower-inspector-stats span {
  padding: 2px 6px;
  border: 1px solid #ffffff26;
  border-radius: 9px;
  color: #fff5bd;
  background: #ffffff0c;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}
.tower-inspector-copy p { grid-column: 1 / -1; margin: 0; font-size: 10px; font-weight: 800; line-height: 1.2; }
.tower-inspector-effects { color: #fff; }
.tower-inspector-copy .tower-inspector-path { color: #bceccd; }

.overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  overflow-y: auto;
  padding: 8px;
  place-items: center;
  overscroll-behavior: contain;
  background: #071e20b8;
  backdrop-filter: blur(4px);
}
.overlay.hidden { display: none; }
.tutorial-card, .end-card, .specialization-card, .upgrade-path-card {
  width: min(470px, 92%);
  max-height: 100%;
  overflow-y: auto;
  margin: auto;
  padding: 25px;
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(160deg,#fff9dc,#e8f7d5);
  color: var(--ink);
  border: 5px solid #fff;
  box-shadow: 0 20px 60px #0009;
}
.tutorial-scene { min-height: 100px; display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 55px; }
.demo-card { display: grid; place-items: center; width: 83px; height: 83px; background: #4a8069; border: 5px solid #ffef8f; border-radius: 18px; box-shadow: 0 7px #20493d; }
.demo-arrow { color: #e17446; animation: nudge .7s ease-in-out infinite alternate; }
.demo-tile { color: #68b977; font-size: 76px; }
.tutorial-card p { font-weight: 800; font-size: clamp(16px, 3vw, 21px); min-height: 2.5em; margin: 12px 0; }
.tutorial-dots { display: flex; justify-content: center; gap: 7px; }
.tutorial-dots i { width: 10px; height: 10px; border-radius: 50%; background: #9cb59e; }
.tutorial-dots i.on { width: 25px; border-radius: 8px; background: #377c61; }
.big-button { min-width: 82px; min-height: 58px; border: 0; border-radius: 18px; padding: 10px 24px; color: white; background: linear-gradient(#64c86d,#329354); font-size: 28px; font-weight: 950; box-shadow: inset 0 3px #ffffff55, 0 7px #1c6038; }
.big-button:active { transform: translateY(5px); box-shadow: inset 0 2px #ffffff55, 0 2px #1c6038; }
.end-card h1 { margin: 6px 0 5px; font-size: clamp(27px, 6vw, 48px); }
.end-card p { margin: 0 0 20px; font-weight: 800; color: #456457; }
.end-icon { font-size: 72px; }
.end-card .big-button { display: inline-flex; align-items: center; gap: 10px; }

.specialization-card { background: radial-gradient(circle at 50% 0, #fffbe5, #def3dd); }
.specialization-card h1 { margin: 0 0 4px; font-size: clamp(23px, 5vw, 36px); letter-spacing: .08em; }
.seed-award { margin: -4px 0 -8px; color: #a25fd0; font-size: 60px; filter: drop-shadow(0 0 15px #c582ef); animation: seedPulse 1s ease-in-out infinite alternate; }
.specialization-hint { margin: 0 0 13px; font-size: 20px; font-weight: 950; color: #72428b; }
.path-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.path-choice { position: relative; min-width: 0; min-height: 112px; border: 4px solid #ffffffcc; border-radius: 20px; padding: 8px 3px 5px; color: #17352e; box-shadow: inset 0 2px #fff9, 0 6px #284b3f; }
.path-choice:hover:not(:disabled), .path-choice:focus-visible { transform: translateY(-3px); filter: brightness(1.06); }
.path-choice:focus-visible, .graft-choice:focus-visible, .modal-close:focus-visible {
  outline-color: #142e29;
  outline-offset: 3px;
}
.path-choice.sun { background: linear-gradient(#ffe66e,#f2a442); }
.path-choice.dew { background: linear-gradient(#adf5ff,#56bdd2); }
.path-choice.thorn { background: linear-gradient(#b5ef85,#5eae61); }
.path-choice.storm { background: linear-gradient(#dab8ff,#8f71cc); }
.path-icon { display: grid; place-items: center; min-height: 55px; font-size: 44px; line-height: 1; text-shadow: 0 2px #fff9; }
.path-choice small { display: block; margin-top: 3px; font-size: 11px; font-weight: 950; letter-spacing: .08em; }
.path-pips { min-height: 9px; display: block; font-size: 10px; line-height: 1; color: #fff; text-shadow: 0 1px #17352e; }
.path-reward { display: block; min-height: 22px; margin-top: 4px; font-size: 8px; font-style: normal; font-weight: 950; line-height: 1.15; }
.path-choice:disabled { cursor: default; filter: grayscale(.65); opacity: .52; box-shadow: inset 0 2px #fff7, 0 3px #41554b; }
.path-choice.mastered::after { content: "MAX"; position: absolute; inset: 5px 5px auto auto; padding: 2px 4px; border-radius: 7px; color: white; background: #17352ecc; font-size: 8px; font-weight: 950; }
.combo-hint { margin: 16px 0 0; font-size: 28px; color: #526659; }

.upgrade-path-card {
  position: relative;
  width: min(590px, 96%);
  padding: 21px 24px 20px;
  background:
    radial-gradient(circle at 50% -10%, #fffce7, transparent 48%),
    linear-gradient(155deg, #f8f1c9, #d9efd3);
  border-color: #fffdf0;
  box-shadow: 0 20px 60px #0009, inset 0 0 0 3px #8fb27055;
}
.upgrade-path-card h1 {
  margin: -3px 42px 2px;
  font-size: clamp(22px, 4.6vw, 34px);
  letter-spacing: .08em;
  line-height: 1.05;
}
.upgrade-path-card > p { margin: 4px auto 10px; font-weight: 850; color: #486255; }
.modal-close {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0 0 4px;
  border: 3px solid #ffffffb8;
  border-radius: 50%;
  color: white;
  background: #814a46;
  box-shadow: inset 0 2px #ffffff40, 0 4px #4b2928;
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}
.modal-close:active { transform: translateY(3px); box-shadow: inset 0 2px #ffffff40, 0 1px #4b2928; }
.graft-award {
  height: 45px;
  margin: -7px 0 -2px;
  color: #6ca14c;
  font-size: 43px;
  line-height: 1;
  filter: drop-shadow(0 3px #fff) drop-shadow(0 5px 6px #31593255);
}
.upgrade-lineage {
  display: flex;
  min-height: 31px;
  margin: 8px auto 12px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #40584d;
  font-size: 13px;
  font-weight: 900;
}
.upgrade-lineage:empty::before { content: "NO SEEDS GRAFTED YET"; opacity: .72; letter-spacing: .06em; }
.upgrade-lineage > span,
.upgrade-lineage > i {
  display: inline-grid;
  min-width: 29px;
  min-height: 29px;
  padding: 3px 7px;
  place-items: center;
  border: 2px solid #ffffffc7;
  border-radius: 15px;
  color: #17352e;
  background: #a9cf91;
  box-shadow: 0 2px #537451;
  font-style: normal;
}
.graft-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.graft-choice {
  position: relative;
  display: grid;
  grid-template-rows: 50px auto 1fr auto;
  align-items: center;
  min-width: 0;
  min-height: 130px;
  padding: 7px 5px 6px;
  border: 4px solid #ffffffd6;
  border-radius: 20px;
  color: #17352e;
  box-shadow: inset 0 2px #fff9, 0 6px #315246;
  transition: transform .12s ease, filter .12s ease;
}
.graft-choice:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.05); }
.graft-choice:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px #fff9, 0 2px #315246; }
.graft-choice.sun { background: linear-gradient(#fff08a,#efa43f); }
.graft-choice.dew { background: linear-gradient(#c5f8ff,#58bfd4); }
.graft-choice.thorn { background: linear-gradient(#c9f398,#68b965); }
.graft-choice.storm { background: linear-gradient(#e3c9ff,#9174ce); }
.graft-choice .path-icon { min-height: 48px; font-size: 39px; }
.graft-choice b { font-size: 12px; letter-spacing: .08em; line-height: 1.15; }
.graft-choice small { display: block; margin-top: 3px; font-size: 9px; font-weight: 950; line-height: 1.15; }
.graft-choice em { display: block; min-height: 13px; margin-top: 4px; font-size: 10px; font-style: normal; font-weight: 950; line-height: 1.15; }
.graft-choice:disabled, .graft-choice.locked {
  cursor: default;
  opacity: .47;
  filter: grayscale(.72);
  box-shadow: inset 0 2px #fff7, 0 3px #55665d;
}
.graft-choice.unaffordable { filter: saturate(.62) brightness(.78); }
.graft-choice.ready { animation: graftGlow 1s ease-in-out infinite alternate; }
.graft-hint { max-width: 500px; margin: 14px auto 0 !important; font-size: 12px; line-height: 1.35; }

.toast { position: absolute; z-index: 4; left: 50%; top: 14px; max-width: calc(100% - 20px); transform: translate(-50%, -12px); opacity: 0; pointer-events: none; background: #102928e8; color: white; border: 2px solid #ffffff40; border-radius: 40px; padding: 8px 18px; font-weight: 900; text-align: center; transition: .2s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@keyframes nudge { to { transform: translateX(8px); } }
@keyframes glow { to { box-shadow: 0 0 18px #ffe770, inset 0 2px #fff8, 0 4px 0 #081e1c; } }
@keyframes graftGlow { to { box-shadow: 0 0 0 4px #fff5a866, 0 7px 14px #6b593b66, inset 0 2px #fff; } }
@keyframes seedPulse { to { transform: scale(1.08) rotate(8deg); } }

@media (max-width: 820px) {
  .topbar { gap: 4px; }
  .brand span:last-child { display: none; }
  .brand-mark { font-size: 23px; }
  .status { margin-left: 0; flex: 1; justify-content: center; gap: 3px; }
  .counter { min-width: 53px; height: 36px; gap: 4px; padding: 0 5px; font-size: 13px; }
  .counter span { font-size: 17px; }
  .top-actions { gap: 2px; }
}

@media (max-width: 610px) {
  #app { gap: 5px; padding: 5px; }
  .topbar { min-height: 45px; }
  .brand { display: none; }
  .home, .round-button { width: 44px; min-width: 44px; height: 44px; }
  .speed-button { min-width: 44px; padding: 0 6px; }
  #fullscreenButton { display: none; }
  .seed-counter { display: flex; }
  .tray { gap: 4px; padding: 4px; border-radius: 14px; }
  .tray-main { gap: 4px; }
  .tower-cards { gap: 4px; padding-top: 4px; }
  .seed-card { min-width: 74px; width: 74px; height: 70px; border-radius: 12px; }
  .seed-symbol { height: 45px; font-size: 31px; }
  .seed-symbol::after { top: 30px; height: 18px; }
  .tray-actions { gap: 3px; }
  .upgrade-card, .sell-card { width: 58px; min-width: 58px; height: 70px; padding-inline: 2px; font-size: 23px; }
  .upgrade-card b, .sell-card b { font-size: 8px; }
  .upgrade-card small, .sell-card small { font-size: 9px; }
  .cost { font-size: 12px; }
  .tray-divider { display: none; }
  .game-shell { border-width: 3px; border-radius: 15px; }
  .tower-inspector { min-height: 70px; padding: 5px 7px 6px 4px; border-width: 2px; border-radius: 11px; gap: 6px; }
  .tower-inspector-glyph { width: 37px; height: 37px; flex-basis: 37px; font-size: 23px; }
  .tower-inspector-copy { grid-template-columns: minmax(0, 1fr) auto; gap: 1px 5px; }
  .tower-inspector-copy b { font-size: 11px; }
  .tower-inspector-heading { gap: 4px; }
  .tower-inspector-heading > span { padding: 1px 4px; font-size: 9px; }
  .tower-inspector-copy small { font-size: 9px; }
  .tower-inspector-stats { gap: 2px; }
  .tower-inspector-stats span { padding: 1px 4px; font-size: 9px; }
  .tower-inspector-copy p { font-size: 9px; }
  .tutorial-card, .end-card, .specialization-card, .upgrade-path-card { padding: 18px 12px; }
  .path-choices, .graft-choices { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .path-choice { min-height: 88px; border-width: 3px; border-radius: 15px; }
  .path-icon { min-height: 42px; font-size: 34px; }
  .path-choice small { font-size: 10px; }
  .upgrade-path-card { width: min(460px, 96%); padding-top: 15px; }
  .upgrade-path-card h1 { margin-inline: 42px; }
  .graft-award { height: 39px; font-size: 37px; }
  .upgrade-lineage { margin-block: 6px 9px; }
  .graft-choice { grid-template-rows: 38px auto 1fr auto; min-height: 101px; border-width: 3px; border-radius: 15px; }
  .graft-choice .path-icon { min-height: 36px; font-size: 31px; }
  .graft-hint { font-size: 11px; }
}

@media (max-width: 405px) {
  .topbar { gap: 1px; }
  .top-actions { gap: 0; }
  .status { gap: 1px; }
  .counter { min-width: 38px; padding: 0 2px; font-size: 11px; }
  .counter span { font-size: 14px; }
  .upgrade-card, .sell-card { width: 54px; min-width: 54px; }
  .upgrade-path-card h1 { font-size: 20px; }
  .modal-close { top: 7px; right: 7px; }
}

@media (max-width: 350px) {
  #soundButton { display: none; }
}

@media (max-height: 580px) and (orientation: landscape) {
  #app { height: 100dvh; min-height: 0; grid-template-rows: 44px minmax(150px, 1fr) auto; }
  #gameCanvas { min-height: 0; }
  .topbar { min-height: 44px; }
  .home, .round-button, .speed-button { height: 44px; }
  .counter { height: 34px; }
  .seed-card, .upgrade-card, .sell-card { height: 56px; }
  .seed-symbol { height: 34px; font-size: 27px; }
  .seed-symbol::after { display: none; }
  .cost { font-size: 11px; }
  .upgrade-card, .sell-card { width: 62px; min-width: 62px; padding-top: 2px; font-size: 20px; }
  .upgrade-card b, .sell-card b { font-size: 8px; }
  .upgrade-card small, .sell-card small { min-height: 10px; font-size: 8px; }
  .tray { grid-template-columns: minmax(245px, .9fr) minmax(0, 2fr); gap: 4px; }
  .tower-inspector { min-height: 56px; padding-block: 3px; }
  .tray-main { min-width: 0; }
  .tower-inspector-glyph { width: 34px; height: 34px; flex-basis: 34px; font-size: 21px; }
  .tower-inspector-copy p { font-size: 9px; }
  .tower-inspector-copy .tower-inspector-path { display: none; }
  .specialization-card { width: min(520px, 94%); padding: 10px 16px; }
  .seed-award { display: none; }
  .specialization-card h1 { font-size: 20px; }
  .specialization-hint, .combo-hint { margin: 2px 0 5px; }
  .path-choices { grid-template-columns: repeat(4, 1fr); }
  .path-choice { min-height: 75px; }
  .path-icon { min-height: 38px; font-size: 32px; }
  .upgrade-path-card { width: min(710px, 97%); padding: 7px 48px 8px 16px; border-width: 4px; border-radius: 20px; }
  .upgrade-path-card h1 { margin: 0 0 1px; font-size: 18px; }
  .upgrade-path-card > p { margin: 1px 0 4px; font-size: 11px; }
  .graft-award, .graft-hint { display: none; }
  .upgrade-lineage { min-height: 20px; margin: 2px 0 5px; font-size: 10px; }
  .upgrade-lineage > span, .upgrade-lineage > i { min-width: 22px; min-height: 22px; padding: 1px 5px; }
  .graft-choices { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .graft-choice { grid-template-rows: 27px auto 1fr auto; min-height: 72px; padding: 2px 3px; border-width: 3px; border-radius: 13px; }
  .graft-choice .path-icon { min-height: 26px; font-size: 25px; }
  .graft-choice b { font-size: 9px; }
  .graft-choice small { font-size: 7px; }
  .graft-choice em { min-height: 8px; margin-top: 1px; font-size: 7px; }
  .modal-close { top: 7px; right: 7px; }
}

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