:root {
  color-scheme: light;
  --forest: #173f32;
  --forest-deep: #0d2c24;
  --leaf: #47733f;
  --grass: #74a84d;
  --cream: #fffaf0;
  --paper: #f6efdf;
  --coral: #d8654d;
  --coral-dark: #a94635;
  --brass: #bd7a2a;
  --ink: #17382f;
  --muted: #607166;
  --line: rgba(29, 69, 52, 0.22);
  --panel-inset: 28px;
  --root-game-viewport-height: 100vh;
}

/* Secret Garden of Life: a playable off-grid scene, never a persisted farm room. */
.root-game-nav-item--secret {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.root-secret-nav-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.root-secret-nav-copy > small {
  color: #a66b0b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.root-secret-nav-copy > small[hidden],
.root-secret-nav-beacon[hidden],
.root-rhythm-receipt[hidden] {
  display: none !important;
}

.root-secret-nav-beacon {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  border: 1px solid rgba(167, 110, 13, 0.36);
  border-radius: 999px;
  padding: 3px 7px;
  background: #f2d46d;
  color: #234b38;
  box-shadow: 0 0 0 4px rgba(242, 212, 109, 0.14);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.root-game-nav--garden .root-game-nav-item--secret.is-reward-ready {
  border-color: rgba(184, 130, 27, 0.55);
  background: linear-gradient(105deg, rgba(255, 248, 207, 0.98), rgba(235, 247, 224, 0.98));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 8px 20px rgba(57, 91, 57, 0.13);
}

.root-game-nav--garden .root-game-nav-item--secret.is-reward-ready .root-game-nav-item-icon {
  color: #8b640c;
}

@media (prefers-reduced-motion: no-preference) {
  .root-game-nav--garden .root-game-nav-item--secret.is-reward-ready .root-secret-nav-beacon {
    animation: root-secret-reward-beacon 1.7s ease-in-out infinite;
  }
}

@keyframes root-secret-reward-beacon {
  50% {
    box-shadow: 0 0 0 7px rgba(242, 212, 109, 0.06), 0 0 18px rgba(213, 176, 63, 0.32);
    transform: translateY(-1px);
  }
}

.root-secret-garden[hidden],
.root-secret-garden-results[hidden],
.root-secret-garden-approach[hidden] {
  display: none !important;
}

.root-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.root-secret-garden {
  position: absolute;
  inset: 0;
  z-index: 28;
  overflow: visible;
  color: #fff8dc;
  background: transparent;
  font-family: "Inter", "Segoe UI", sans-serif;
  pointer-events: none;
}

.is-secret-garden-open .root-game-canvas {
  visibility: visible;
}

.is-secret-garden-open .root-game-status,
.is-secret-garden-open .root-game-queue,
.is-secret-garden-open .root-game-direct-queue,
.is-secret-garden-open .root-game-task-progress,
.is-secret-garden-open .root-game-tool-dock,
.is-secret-garden-open .root-game-mobile-location,
.is-secret-garden-open .root-garden-rig-qa-trigger,
.is-secret-garden-open .root-garden-rig-qa-lab {
  display: none !important;
}

.root-secret-garden-heading {
  position: absolute;
  top: 106px;
  left: 20px;
  width: min(460px, 44vw);
  padding: 11px 14px 13px;
  border: 1px solid rgba(238, 210, 104, 0.32);
  border-radius: 16px;
  background: linear-gradient(115deg, rgba(3, 30, 23, 0.92), rgba(3, 30, 23, 0.5));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
  text-shadow: 0 3px 18px #00120e;
  backdrop-filter: blur(7px);
}

.root-secret-garden-heading > small,
.root-rhythm-card__top,
.root-rhythm-reward > span,
.root-life-tree-progress > span {
  color: #f2cf67;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.root-secret-garden-heading h1 {
  margin: 4px 0 5px;
  font: 700 clamp(28px, 2.55vw, 38px)/0.98 Georgia, "Times New Roman", serif;
}

.root-secret-garden-heading > p:not(.root-visually-hidden) {
  margin: 0;
  max-width: 360px;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.42;
}

.root-secret-garden-approach {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  border: 1px solid rgba(248, 221, 111, 0.72);
  border-radius: 12px;
  padding: 8px 12px;
  background: rgba(17, 74, 55, 0.94);
  color: #fff9dd;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.1);
  text-align: left;
  text-shadow: none;
  pointer-events: auto;
}

.root-secret-garden-approach > i {
  color: #f4d66d;
  font-size: 23px;
}

.root-secret-garden-approach > span {
  display: grid;
  gap: 2px;
}

.root-secret-garden-approach strong {
  font-size: 13px;
}

.root-secret-garden-approach small {
  color: #dbe9dc;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.root-secret-garden-approach:hover:not(:disabled) {
  border-color: #fff0a0;
  background: rgba(24, 91, 67, 0.98);
}

.root-secret-garden-approach:disabled {
  cursor: progress;
  opacity: 0.78;
}

.root-secret-garden-results:not([hidden]) {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.root-secret-garden-results:focus {
  outline: none;
}

.root-rhythm-card,
.root-life-tree-progress {
  position: absolute;
  border: 1px solid rgba(243, 210, 93, 0.66);
  background: rgba(4, 31, 24, 0.9);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(11px);
  pointer-events: auto;
}

.root-rhythm-card {
  left: 28px;
  bottom: 28px;
  width: min(400px, 36vw);
  padding: 18px;
  border-radius: 20px;
}

.root-rhythm-card__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.root-rhythm-card h2 {
  margin: 6px 0 4px;
  font: 700 27px/1 Georgia, "Times New Roman", serif;
}

.root-rhythm-source {
  margin: 0 0 12px;
  color: #bcd0c2;
  font-size: 10px;
  font-weight: 800;
}

.root-rhythm-card ul {
  display: grid;
  gap: 8px;
  margin: 0 0 13px;
  padding: 0;
  list-style: none;
}

.root-rhythm-card li {
  display: grid;
  grid-template-columns: 1fr minmax(128px, 0.8fr);
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 800;
}

.root-rhythm-card li b {
  position: relative;
  height: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
}

.root-rhythm-card li i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--root-rhythm-progress, 0%);
  border-radius: inherit;
  background: #d6b542;
  transition: width 0.45s ease;
}

.root-rhythm-card li em {
  position: relative;
  z-index: 1;
  display: block;
  color: white;
  font: 800 11px/16px "Inter", sans-serif;
  text-align: center;
}

.root-rhythm-reward {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(245, 217, 117, 0.32);
}

.root-rhythm-reward > strong {
  color: #fff5c0;
  font-size: 12px;
}

.root-rhythm-payout {
  grid-column: 1 / -1;
  width: fit-content;
  min-height: 32px;
  border: 1px solid rgba(245, 217, 117, 0.7);
  border-radius: 999px;
  padding: 5px 12px;
  background: linear-gradient(180deg, #f0ce5d, #d8aa2f);
  color: #173e31;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.root-rhythm-payout:hover:not(:disabled) {
  background: linear-gradient(180deg, #f6dc7d, #e1b53c);
}

.root-rhythm-payout:focus-visible {
  outline: 3px solid #fff1a8;
  outline-offset: 3px;
}

.root-rhythm-payout:disabled {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #c6d3ca;
  box-shadow: none;
  cursor: default;
}

.root-rhythm-next[hidden] {
  display: none !important;
}

.root-rhythm-next {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid rgba(245, 217, 117, 0.34);
  border-radius: 13px;
  padding: 9px 11px;
  background:
    radial-gradient(circle at 88% 30%, rgba(246, 214, 102, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(22, 76, 57, 0.78), rgba(4, 26, 21, 0.9));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 8px 22px rgba(0, 0, 0, 0.18);
}

.root-rhythm-next > span {
  color: #f3d469;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.root-rhythm-next > time {
  color: #fff4bd;
  font: 800 20px/1 "Inter", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-shadow: 0 0 16px rgba(248, 219, 112, 0.2);
}

.root-rhythm-next > small {
  grid-column: 1 / -1;
  color: #c9d9ce;
  font-size: 10px;
  line-height: 1.35;
}

.root-rhythm-note {
  margin: 9px 0 0;
  color: #dce9db;
  font-size: 11px;
  line-height: 1.4;
}

.root-rhythm-receipt {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  border: 1px solid rgba(151, 222, 173, 0.5);
  border-radius: 15px;
  padding: 11px;
  background:
    radial-gradient(circle at 100% 0, rgba(242, 213, 109, 0.14), transparent 42%),
    linear-gradient(140deg, rgba(15, 70, 51, 0.94), rgba(5, 38, 29, 0.96));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 9px 24px rgba(0, 0, 0, 0.2);
}

.root-rhythm-receipt:focus {
  outline: 3px solid #fff1a8;
  outline-offset: 3px;
}

.root-rhythm-receipt__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #d7f2dd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.root-rhythm-receipt__status span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.root-rhythm-receipt__status i {
  color: #a9efbb;
  font-size: 17px;
}

.root-rhythm-receipt__status time {
  color: #f5dc80;
  font-size: 9px;
  letter-spacing: 0;
  text-align: right;
  text-transform: none;
}

.root-rhythm-receipt__award,
.root-rhythm-receipt__balances {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.root-rhythm-receipt__award > span,
.root-rhythm-receipt__balances > span {
  display: grid;
  gap: 2px;
  border-radius: 10px;
  padding: 7px 8px;
}

.root-rhythm-receipt__award > span {
  border: 1px solid rgba(244, 213, 103, 0.28);
  background: rgba(244, 213, 103, 0.1);
}

.root-rhythm-receipt__balances > span {
  background: rgba(255, 255, 255, 0.06);
}

.root-rhythm-receipt small {
  color: #bad2c3;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.root-rhythm-receipt strong {
  color: #fff5bd;
  font-size: 11px;
  line-height: 1.2;
}

.root-rhythm-receipt__balances strong {
  color: #e6f6e7;
}

.root-rhythm-receipt__id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-secret-garden.is-reward-ready .root-secret-garden-approach {
  border-color: #fff0a0;
  background: linear-gradient(105deg, rgba(24, 91, 67, 0.98), rgba(58, 100, 54, 0.98));
  box-shadow: 0 0 0 4px rgba(244, 214, 109, 0.14), 0 12px 28px rgba(0, 0, 0, 0.28);
}

.root-life-tree-progress {
  right: 28px;
  bottom: 28px;
  display: grid;
  gap: 4px;
  width: min(260px, 27vw);
  min-width: 210px;
  padding: 15px 18px;
  border-radius: 18px;
}

.root-life-tree-progress strong {
  font: 700 21px/1.05 Georgia, "Times New Roman", serif;
}

.root-life-tree-progress small {
  color: #dce9db;
  font-size: 11px;
  line-height: 1.35;
}

.root-secret-garden-return {
  position: absolute;
  top: 108px;
  right: 20px;
  z-index: 34;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  padding: 0 18px;
  background: rgba(4, 31, 24, 0.86);
  color: white;
  font-weight: 900;
  cursor: pointer;
  pointer-events: auto;
}

@media (max-width: 760px) {
  .root-game-nav--garden .root-game-nav-list .root-game-nav-item--secret {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .root-secret-garden-heading {
    top: 142px;
    left: 12px;
    width: calc(100% - 96px);
    padding: 9px 10px 10px;
  }

  .root-secret-garden-heading h1 {
    margin-top: 3px;
    font-size: clamp(23px, 8vw, 29px);
  }

  .root-secret-garden-heading > p:not(.root-visually-hidden) {
    display: none;
  }

  .root-secret-garden-approach {
    min-height: 44px;
    margin-top: 7px;
    padding: 6px 8px;
  }

  .root-secret-garden-approach small {
    display: none;
  }

  .root-secret-garden-return {
    top: 142px;
    right: 10px;
    min-height: 40px;
    padding: 0 11px;
    font-size: 12px;
  }

  .root-secret-garden-return span {
    font-size: 0;
  }

  .root-secret-garden-return span::after {
    content: "Farm";
    font-size: 12px;
  }

  .root-secret-garden.is-tree-approached .root-secret-garden-heading {
    display: none;
  }

  .root-secret-garden-results:not([hidden]) {
    position: absolute;
    z-index: 32;
    top: auto;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    display: grid;
    gap: 8px;
    max-height: calc(var(--root-game-viewport-height, 100dvh) - 204px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(243, 210, 93, 0.46);
    border-radius: 16px;
    padding: 8px;
    background: rgba(3, 25, 20, 0.7);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    pointer-events: auto;
    scrollbar-width: thin;
  }

  .root-secret-garden-results .root-rhythm-card,
  .root-secret-garden-results .root-life-tree-progress {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    min-width: 0;
    margin: 0;
  }

  .root-secret-garden-results .root-life-tree-progress {
    order: -1;
    padding: 10px 12px;
  }

  .root-secret-garden-results .root-life-tree-progress strong {
    font-size: 18px;
  }

  .root-secret-garden-results .root-rhythm-card {
    padding: 11px 12px;
  }

  .root-rhythm-card h2 {
    margin: 4px 0 3px;
    font-size: 22px;
  }

  .root-rhythm-source {
    margin-bottom: 8px;
    font-size: 9px;
  }

  .root-rhythm-card ul {
    gap: 6px;
    margin-bottom: 9px;
  }

  .root-rhythm-card li {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 0.8fr);
    gap: 8px;
    font-size: 11px;
  }

  .root-rhythm-reward {
    gap: 4px 8px;
    padding-top: 8px;
  }

  .root-rhythm-reward > span,
  .root-rhythm-reward > strong {
    font-size: 9px;
  }

  .root-rhythm-next {
    margin-top: 7px;
    padding: 8px 10px;
  }

  .root-rhythm-next > span,
  .root-rhythm-next > small {
    font-size: 9px;
  }

  .root-rhythm-next > time {
    font-size: 18px;
  }

  .root-rhythm-note {
    margin-top: 6px;
    font-size: 10px;
  }

  .root-rhythm-receipt {
    gap: 7px;
    margin-top: 8px;
    padding: 9px;
  }

  .root-rhythm-receipt__status {
    align-items: flex-start;
  }

  .root-rhythm-receipt__award > span,
  .root-rhythm-receipt__balances > span {
    padding: 6px 7px;
  }
}

/* Mobile queue actions are direct: tap the diamond to cancel that job. The
   desktop hover pill stays available, but it must not cover the game on touch. */
@media (max-width: 760px) {
  .root-game-direct-queue-target {
    width: 50px;
    height: 50px;
  }

  .root-game-direct-queue-marker {
    width: 50px;
    height: 50px;
  }

  .root-game-direct-queue-marker-frame {
    font-size: 31px;
  }

  .root-game-direct-queue-marker-icon {
    display: none;
  }

  .root-game-direct-queue-marker-cancel-icon {
    position: relative;
    z-index: 2;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: #123f32;
    color: #fff4c5;
    font-size: 13px;
    box-shadow: 0 0 0 1px rgba(255, 244, 197, 0.42);
  }

  .root-game-direct-queue-menu {
    display: none !important;
  }

  .root-game-zoom-controls {
    display: grid;
  }

  .root-game-tool-dock {
    min-height: 86px;
    grid-template-rows: 16px 54px 5px;
    gap: 3px;
    padding: 5px;
  }

  .root-game-tool-scroll .root-game-tool-group > *,
  .root-game-tool-scroll > .root-game-member-slot,
  .root-game-tool-scroll > .root-game-structure-view,
  .root-game-tool-scroll > .root-game-expand {
    flex-basis: 60px;
    width: 60px;
    min-width: 60px;
    min-height: 54px;
    padding: 4px 2px;
  }

  .root-game-tool-dock .root-game-tool-scroll-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }

  .root-game-tool-scroll-button i {
    font-size: 18px;
  }

  .root-game-tool-scroll .root-game-tool-group > * > b {
    font-size: 10px;
  }
}

.root-game-zoom-controls {
  position: absolute;
  z-index: 20;
  right: 12px;
  bottom: 122px;
  display: none;
  grid-template-columns: repeat(3, 34px);
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 253, 247, 0.7);
  border-radius: 999px;
  background: rgba(18, 63, 50, 0.92);
  box-shadow: 0 7px 16px rgba(13, 44, 36, 0.25);
}

.root-game-zoom-controls button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: #fff4c5;
  font-size: 10px;
  font-weight: 900;
}

.root-game-zoom-controls button:first-child,
.root-game-zoom-controls button:last-child {
  background: rgba(255, 244, 197, 0.14);
  font-size: 18px;
}

.root-game-zoom-controls button:hover,
.root-game-zoom-controls button:focus-visible {
  outline: 2px solid #ffd66b;
  outline-offset: 1px;
  background: rgba(255, 244, 197, 0.22);
}

@media (max-width: 760px) {
  .root-game-zoom-controls {
    display: grid;
    bottom: 100px;
  }

  /* Keep the account menu in the dock viewport, outside the scroll track. */
  .root-game-tool-dock > .root-game-member-slot {
    position: absolute;
    z-index: 9;
    top: 24px;
    right: 40px;
    display: flex;
    width: 60px;
    min-width: 60px;
    height: 54px;
    min-height: 54px;
    flex: 0 0 60px;
    align-items: stretch;
    border-radius: 8px;
    background: #f6efdf;
    box-shadow: -6px 0 9px rgba(246, 239, 223, 0.95);
  }

  .root-game-tool-dock > .root-game-member-slot .lrl-member-shell__trigger,
  .root-game-tool-dock > .root-game-member-slot .root-game-member-signin {
    min-height: 54px;
    border-radius: 8px;
    padding: 3px;
  }

  .root-game-tool-dock > .root-game-member-slot .lrl-member-shell__identity strong,
  .root-game-tool-dock > .root-game-member-slot .lrl-member-shell__identity small,
  .root-game-tool-dock > .root-game-member-slot .root-game-member-signin b,
  .root-game-tool-dock > .root-game-member-slot .root-game-member-signin small {
    display: none;
  }

  .root-game-tool-dock > .root-game-member-slot .lrl-member-shell__avatar,
  .root-game-tool-dock > .root-game-member-slot .root-game-member-signin > i {
    width: 30px;
    height: 30px;
    font-size: 22px;
  }
}

@media (max-width: 360px) and (max-height: 620px) {
  .root-secret-garden-results:not([hidden]) {
    max-height: calc(var(--root-game-viewport-height, 100dvh) - 190px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .root-rhythm-card li i {
    transition: none;
  }
}

/* Final mobile interaction pass. These rules intentionally come last so
   legacy tutorial and dock rules cannot hide the controls again. */
@media (max-width: 760px) {
  .root-game-direct-queue-target,
  .root-game-direct-queue-marker {
    width: 50px;
    height: 50px;
  }

  .root-game-direct-queue-marker-frame {
    font-size: 31px;
  }

  .root-game-direct-queue-marker-icon {
    display: none;
  }

  .root-game-direct-queue-marker-cancel-icon {
    position: relative;
    z-index: 2;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: #123f32;
    color: #fff4c5;
    font-size: 13px;
    box-shadow: 0 0 0 1px rgba(255, 244, 197, 0.42);
  }

  .root-game-direct-queue-menu {
    display: none !important;
  }

  .root-game-tool-dock {
    min-height: 86px;
    grid-template-rows: 16px 54px 5px;
    gap: 3px;
    padding: 5px;
  }

  .root-game-tool-scroll .root-game-tool-group > *,
  .root-game-tool-scroll > .root-game-member-slot,
  .root-game-tool-scroll > .root-game-structure-view,
  .root-game-tool-scroll > .root-game-expand {
    flex-basis: 60px;
    width: 60px;
    min-width: 60px;
    min-height: 54px;
    padding: 4px 2px;
  }

  .root-game-tool-dock .root-game-tool-scroll-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    display: grid !important;
    visibility: visible !important;
    filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .root-game-tool-scroll-button i {
    font-size: 18px;
  }

  .root-game-tool-scroll .root-game-tool-group > * > b {
    font-size: 10px;
  }

  .root-game-tool-shelf-heading,
  .root-game-tool-scroll-dots {
    display: flex !important;
    visibility: visible !important;
    filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .root-game-zoom-controls {
    display: grid;
    bottom: 100px;
  }

  /* Keep the account menu in the dock viewport, outside the scroll track. */
  .root-game-tool-dock > .root-game-member-slot {
    position: absolute !important;
    z-index: 9;
    top: 24px;
    right: 40px;
    display: flex !important;
    width: 60px;
    min-width: 60px;
    height: 54px;
    min-height: 54px;
    flex: 0 0 60px;
    align-items: stretch;
    border-radius: 8px;
    background: #f6efdf;
    box-shadow: -6px 0 9px rgba(246, 239, 223, 0.95);
  }

  .root-game-tool-dock > .root-game-member-slot .lrl-member-shell__trigger,
  .root-game-tool-dock > .root-game-member-slot .root-game-member-signin {
    min-height: 54px;
    border-radius: 8px;
    padding: 3px;
  }

  .root-game-tool-dock > .root-game-member-slot .lrl-member-shell__identity strong,
  .root-game-tool-dock > .root-game-member-slot .lrl-member-shell__identity small,
  .root-game-tool-dock > .root-game-member-slot .root-game-member-signin b,
  .root-game-tool-dock > .root-game-member-slot .root-game-member-signin small {
    display: none;
  }

  .root-game-tool-dock > .root-game-member-slot .lrl-member-shell__avatar,
  .root-game-tool-dock > .root-game-member-slot .root-game-member-signin > i {
    width: 30px;
    height: 30px;
    font-size: 22px;
  }
}

@supports (height: 100dvh) {
  :root {
    --root-game-viewport-height: 100dvh;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  height: var(--root-game-viewport-height, 100vh);
  margin: 0;
  overflow: hidden;
  background: var(--forest-deep);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
a {
  font: inherit;
  letter-spacing: 0;
}

button {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid #fff4a8;
  outline-offset: 2px;
}

.root-garden-v2,
.root-game-shell {
  width: 100%;
  height: 100%;
}

.root-game-shell {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--forest-deep);
}

.root-game-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #244d34;
  width: 100%;
  height: 100%;
}

.root-game-canvas,
.root-game-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.root-game-canvas {
  position: absolute;
  inset: 0;
  touch-action: none;
}

.root-game-canvas canvas {
  overscroll-behavior: none;
  touch-action: none;
  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.root-game-stage.is-explore-mode .root-game-canvas canvas {
  cursor: grab;
}

.root-game-stage.is-camera-dragging .root-game-canvas canvas {
  cursor: grabbing;
}

.root-game-status,
.root-game-queue,
.root-game-selection {
  position: absolute;
  z-index: 12;
  display: grid;
  border: 1px solid rgba(255, 253, 247, 0.64);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.91);
  color: var(--forest);
  box-shadow: 0 12px 28px rgba(13, 44, 36, 0.24);
  backdrop-filter: blur(10px);
}

.root-game-status {
  top: calc(var(--hud-top) + var(--hud-height) + 12px);
  left: var(--panel-inset);
  width: min(292px, calc(100% - 28px));
  gap: 3px;
  padding: 12px 14px;
  pointer-events: none;
}

.root-game-status span,
.root-game-queue-heading > span,
.root-game-selection > span {
  color: var(--coral-dark);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-status .root-game-status-location {
  display: flex;
  align-items: center;
  gap: 4px;
}

.root-game-status-location b {
  font: inherit;
}

.root-game-status-location i {
  color: rgba(29, 69, 52, 0.5);
  font-style: normal;
}

.root-game-status strong,
.root-game-queue strong,
.root-game-selection strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.05;
}

.root-game-status small,
.root-game-queue small,
.root-game-selection small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.root-game-status [data-fence-mode] {
  width: fit-content;
  min-height: 30px;
  margin-top: 5px;
  border: 1px solid rgba(32, 79, 57, 0.28);
  border-radius: 6px;
  padding: 5px 9px;
  background: var(--forest);
  color: white;
  font-size: 10px;
  font-weight: 900;
  pointer-events: auto;
}

.root-game-water-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 44px;
  align-items: center;
  gap: 3px 8px;
  margin-top: 5px;
  border-top: 1px solid rgba(32, 79, 57, 0.16);
  padding-top: 7px;
  color: var(--forest);
  text-decoration: none;
  pointer-events: auto;
}

.root-game-water-meter > span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #276f80;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.root-game-water-meter > strong {
  font-family: inherit;
  font-size: 10px;
  line-height: 1;
}

.root-game-water-meter > strong b {
  font: inherit;
}

.root-game-water-track {
  position: relative;
  grid-column: 1 / -1;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(39, 111, 128, 0.16);
}

.root-game-water-track > b {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #4cabc2, #82d5e4);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 180ms ease, background 180ms ease;
}

.root-game-water-meter > small {
  grid-column: 1 / -1;
  color: #276f80;
  font-size: 9px;
  line-height: 1.15;
}

.root-game-water-meter[data-water-state="low"] .root-game-water-track > b {
  background: #d59b35;
}

.root-game-water-meter[data-water-state="critical"] .root-game-water-track > b,
.root-game-water-meter[data-water-state="empty"] .root-game-water-track > b {
  background: var(--coral-dark);
}

.root-game-water-meter[data-water-state="low"] > small,
.root-game-water-meter[data-water-state="critical"] > small,
.root-game-water-meter[data-water-state="empty"] > small {
  color: var(--coral-dark);
  font-weight: 900;
}

.root-game-direct-queue {
  position: absolute;
  z-index: 11;
  inset: 0;
  pointer-events: none;
}

.root-game-direct-queue-target {
  position: absolute;
  display: block;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  isolation: isolate;
}

.root-game-direct-queue-target[hidden] {
  display: none;
}

.root-game-direct-queue-marker {
  position: relative;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff4c5;
  cursor: pointer;
  filter: drop-shadow(0 4px 5px rgba(3, 31, 23, 0.42));
  transition: transform 180ms cubic-bezier(0.2, 0.85, 0.25, 1.2), filter 180ms ease;
}

.root-game-direct-queue-marker-frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f3c953;
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 0 1px #fff3bd,
    0 0 8px rgba(243, 201, 83, 0.58),
    0 3px 5px rgba(3, 31, 23, 0.42);
}

.root-game-direct-queue-marker-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 11px;
  height: 11px;
  place-items: center;
  border-radius: 50%;
  background: #123f32;
  color: #fff4c5;
  font-size: 8px;
  box-shadow:
    0 0 0 1px rgba(255, 244, 197, 0.3),
    0 0 7px rgba(243, 201, 83, 0.78);
}

.root-game-direct-queue-marker-cancel-icon {
  display: none;
}

.root-game-direct-queue-target:hover .root-game-direct-queue-marker,
.root-game-direct-queue-target:focus-within .root-game-direct-queue-marker,
.root-game-direct-queue-target.is-open .root-game-direct-queue-marker {
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 6px 8px rgba(3, 31, 23, 0.5));
}

.root-game-direct-queue-marker:focus-visible {
  outline: 3px solid rgba(255, 246, 204, 0.95);
  outline-offset: 3px;
  border-radius: 50%;
}

.root-game-direct-queue-menu {
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 38px;
  display: flex;
  box-sizing: border-box;
  width: 106px;
  min-height: 46px;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  border: 2px solid #efc752;
  border-radius: 999px;
  padding: 2px 2px 2px 13px;
  background: #123f32;
  color: #fff4c5;
  box-shadow:
    0 8px 18px rgba(3, 31, 23, 0.38),
    inset 0 0 0 1px rgba(255, 244, 197, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translate(-12px, 8px) scale(0.72);
  transform-origin: left center;
  transition:
    opacity 160ms ease,
    transform 300ms cubic-bezier(0.18, 0.9, 0.24, 1.18);
}

.root-game-direct-queue-target[data-menu-side="left"] .root-game-direct-queue-menu {
  right: 38px;
  left: auto;
  justify-content: flex-start;
  padding: 2px 13px 2px 2px;
  transform: translate(12px, 8px) scale(0.72);
  transform-origin: right center;
}

.root-game-direct-queue-target:hover .root-game-direct-queue-menu,
.root-game-direct-queue-target:focus-within .root-game-direct-queue-menu,
.root-game-direct-queue-target.is-open .root-game-direct-queue-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, 0) scale(1);
}

.root-game-direct-queue-menu-icon {
  font-size: 19px;
}

.root-game-direct-queue-cancel {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-left: 1px solid rgba(239, 199, 82, 0.42);
  border-radius: 0 999px 999px 0;
  padding: 0;
  background: transparent;
  color: #fff4c5;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.root-game-direct-queue-target[data-menu-side="left"] .root-game-direct-queue-cancel {
  order: -1;
  border-right: 1px solid rgba(239, 199, 82, 0.42);
  border-left: 0;
  border-radius: 999px 0 0 999px;
}

.root-game-direct-queue-cancel i {
  font-size: 25px;
}

.root-game-direct-queue-cancel:hover,
.root-game-direct-queue-cancel:focus-visible {
  outline: 0;
  background: rgba(255, 244, 197, 0.14);
  color: #ffffff;
  transform: scale(1.08);
}

.root-game-direct-queue-cancel:disabled {
  cursor: default;
  opacity: 0.42;
}

.root-game-direct-queue-sweep {
  position: absolute;
  bottom: -10px;
  left: 8px;
  color: #f3c953;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
}

.root-game-direct-queue-target:hover .root-game-direct-queue-sweep,
.root-game-direct-queue-target:focus-within .root-game-direct-queue-sweep,
.root-game-direct-queue-target.is-open .root-game-direct-queue-sweep {
  animation: root-game-direct-queue-sweep-in 520ms 90ms cubic-bezier(0.18, 0.82, 0.25, 1) both;
}

@keyframes root-game-direct-queue-sweep-in {
  0% {
    opacity: 0;
    transform: translate(-8px, 5px) scale(0.7) rotate(-20deg);
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(60px, -5px) scale(1.08) rotate(12deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .root-game-direct-queue-marker,
  .root-game-direct-queue-menu,
  .root-game-direct-queue-cancel {
    transition: none;
  }

  .root-game-direct-queue-sweep {
    display: none;
    animation: none;
  }
}

.root-game-queue {
  top: calc(var(--hud-top) + var(--hud-height) + 12px);
  right: var(--panel-inset);
  width: 300px;
  gap: 7px;
  padding: 12px;
}

.root-game-queue:focus {
  outline: 2px solid rgba(238, 142, 106, 0.72);
  outline-offset: 3px;
}

.root-game-queue-heading {
  display: grid;
  gap: 3px;
}

.root-game-queue-toggle {
  display: none;
}

.root-game-queue ol {
  display: grid;
  gap: 0;
  max-height: min(
    440px,
    calc(var(--root-game-viewport-height, 100vh) - var(--hud-top) - var(--hud-height) - 190px)
  );
  margin: 1px 0 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  list-style: none;
}

.root-game-queue li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(29, 69, 52, 0.12);
  color: var(--muted);
}

.root-game-queue li[aria-current="step"] {
  color: var(--forest);
}

.root-game-queue li.is-committed {
  opacity: 0.7;
}

.root-game-queue-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 5px 0;
}

.root-game-queue-copy b {
  overflow: hidden;
  color: inherit;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-game-queue-copy small {
  overflow: hidden;
  font-size: 9px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-game-queue-cancel {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  border: 1px solid rgba(163, 83, 61, 0.22);
  border-radius: 7px;
  padding: 0;
  background: rgba(255, 253, 247, 0.72);
  color: var(--coral-dark);
  cursor: pointer;
}

.root-game-queue-cancel i {
  font-size: 18px;
}

.root-game-queue-cancel:hover,
.root-game-queue-cancel:focus-visible {
  border-color: rgba(163, 83, 61, 0.56);
  outline: 2px solid rgba(238, 142, 106, 0.45);
  outline-offset: 1px;
  background: #fffdf7;
}

.root-game-queue-cancel:disabled {
  cursor: default;
  opacity: 0.42;
}

.root-game-task-progress {
  position: absolute;
  z-index: 13;
  left: 50%;
  bottom: 126px;
  display: grid;
  width: min(380px, calc(100% - 28px));
  gap: 8px;
  border: 1px solid rgba(255, 253, 247, 0.72);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(20, 67, 51, 0.94);
  color: #fffdf7;
  box-shadow: 0 14px 32px rgba(8, 35, 27, 0.3);
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.root-game-task-progress[hidden] {
  display: none;
}

.root-game-placement-controls {
  position: absolute;
  z-index: 16;
  left: 50%;
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 120px);
  display: grid;
  width: min(500px, calc(100% - 20px));
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "copy copy"
    "adjustments actions";
  align-items: center;
  gap: 7px 10px;
  border: 1px solid rgba(255, 253, 247, 0.82);
  border-radius: 8px;
  padding: 8px;
  background: rgba(246, 239, 223, 0.97);
  box-shadow: 0 16px 34px rgba(8, 35, 27, 0.36);
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.root-game-placement-controls[hidden] {
  display: none;
}

.root-game-placement-copy {
  grid-area: copy;
  display: grid;
  min-width: 0;
  gap: 1px;
}

.root-game-placement-copy span {
  color: var(--coral-dark);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-placement-copy strong,
.root-game-placement-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.root-game-placement-copy strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  white-space: nowrap;
}

.root-game-placement-copy small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
  white-space: normal;
}

.root-game-placement-nudge {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(4, minmax(40px, 1fr));
  gap: 4px;
}

.root-game-placement-adjustments,
.root-game-placement-actions {
  display: flex;
  min-width: 0;
  align-items: stretch;
  gap: 6px;
}

.root-game-placement-adjustments {
  grid-area: adjustments;
}

.root-game-placement-actions {
  grid-area: actions;
}

.root-game-placement-controls button {
  display: inline-flex;
  min-width: 40px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(32, 79, 57, 0.26);
  border-radius: 6px;
  padding: 0;
  background: #fffdf7;
  color: var(--forest);
  font-size: 19px;
  font-weight: 900;
  box-shadow: inset 0 -3px 0 rgba(48, 89, 59, 0.08);
}

.root-game-placement-rotate,
.root-game-placement-cancel,
.root-game-placement-confirm {
  padding: 0 12px !important;
  font-size: 12px !important;
}

.root-game-placement-rotate {
  flex: 0 0 auto;
}

.root-game-placement-cancel,
.root-game-placement-confirm {
  min-width: 88px !important;
}

.root-game-placement-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.root-game-placement-controls button[hidden] {
  display: none;
}

.root-game-placement-confirm {
  background: var(--forest) !important;
  color: #ffffff !important;
}

.root-game-placement-confirm i {
  font-size: 18px;
}

.root-game-task-progress-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
}

.root-game-task-progress-copy span {
  color: #f6c977;
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-task-progress-copy strong {
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-game-task-progress-copy b {
  min-width: 34px;
  font-size: 11px;
  text-align: right;
}

.root-game-task-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
}

.root-game-task-progress-track i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f0b85a, #f8df85 58%, #fff4b7);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 160ms linear;
}

.root-game-selection {
  right: 14px;
  bottom: 128px;
  width: 270px;
  gap: 5px;
  padding: 12px;
}

.root-game-selection-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 5px;
}

.root-game-selection-actions button {
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: var(--forest);
  color: white;
  font-size: 10px;
  font-weight: 900;
}

.root-game-selection-actions [data-selection-action="remove-soil"] {
  grid-column: 1 / -1;
  background: #9b4a37;
}

.root-game-selection-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.root-game-catalog small .root-game-currency-icon,
.root-game-purchase small .root-game-currency-icon,
.root-game-purchase-total .root-game-currency-icon {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
}

.root-game-catalog small.is-currency-price,
.root-game-purchase small.is-currency-price,
.root-game-purchase-total strong.is-currency-price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.root-game-tool-dock {
  position: absolute;
  z-index: 15;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  width: min(752px, calc(100% - 28px));
  min-height: 84px;
  align-items: stretch;
  gap: 8px;
  border: 1px solid rgba(255, 253, 247, 0.72);
  border-radius: 8px;
  padding: 9px;
  background: rgba(246, 239, 223, 0.94);
  box-shadow: 0 18px 34px rgba(13, 44, 36, 0.32);
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.root-game-tool-group {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  gap: 6px;
  min-width: 0;
}

.root-game-planting-tray {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  display: grid;
  width: min(640px, 100%);
  gap: 8px;
  border: 1px solid rgba(255, 253, 247, 0.78);
  border-radius: 8px;
  padding: 9px;
  background: rgba(246, 239, 223, 0.97);
  box-shadow: 0 18px 38px rgba(13, 44, 36, 0.34);
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.root-game-planting-tray[hidden] {
  display: none;
}

.root-game-planting-tray > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.root-game-planting-tray > header div {
  display: grid;
  gap: 1px;
}

.root-game-planting-tray > header span {
  color: var(--coral-dark);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-planting-tray > header strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
}

.root-game-planting-tray > header button {
  display: grid;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  place-content: center;
  padding: 0;
  font-size: 22px;
}

.root-game-farm-helper {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(29, 69, 52, 0.16);
  border-radius: 7px;
  padding: 7px 8px;
  background: rgba(226, 235, 211, 0.62);
}

.root-game-farm-helper > div:first-child {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.root-game-farm-helper span {
  color: var(--forest);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.root-game-farm-helper strong {
  color: var(--forest);
  font: 700 13px/1.15 Georgia, "Times New Roman", serif;
}

.root-game-farm-helper small {
  display: block;
  overflow: visible;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.root-game-farm-helper small b {
  display: block;
  color: var(--forest);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.01em;
}

.root-game-farm-helper small span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.root-game-farm-helper > div:last-child {
  display: flex;
  gap: 4px;
}

.root-game-farm-helper button {
  min-width: 39px;
  min-height: 34px;
  border-color: rgba(29, 69, 52, 0.2);
  padding: 4px 6px;
  background: rgba(255, 253, 247, 0.88);
  color: var(--forest);
  font-size: 10px;
}

.root-game-farm-helper button.is-active {
  border-color: var(--forest);
  background: var(--forest);
  color: #fffaf0;
}

.root-game-farm-helper button:disabled {
  min-width: 52px;
  opacity: 0.62;
}

.root-game-planting-tray > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.root-game-seed-picker {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(29, 69, 52, 0.18);
  padding-top: 9px;
}

.root-game-seed-picker[hidden] {
  display: none;
}

.root-game-seed-picker > header,
.root-game-seed-picker > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.root-game-seed-picker > header div {
  display: grid;
  gap: 1px;
}

.root-game-seed-picker > header span {
  color: var(--coral-dark);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-seed-picker > header strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
}

.root-game-seed-picker > header button {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  font-size: 22px;
}

.root-game-seed-options {
  display: grid;
  max-height: 224px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  overflow: auto;
  overscroll-behavior: contain;
}

.root-game-tool-dock .root-game-seed-option {
  display: grid;
  min-height: 74px;
  grid-template-columns: 46px minmax(0, 1fr);
  place-content: stretch;
  align-items: center;
  gap: 7px;
  padding: 6px;
  text-align: left;
}

.root-game-seed-option img {
  width: 44px;
  height: 58px;
  object-fit: contain;
}

.root-game-seed-option > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.root-game-seed-option b,
.root-game-seed-option small,
.root-game-seed-option em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-game-seed-option em {
  width: max-content;
  border-radius: 4px;
  padding: 3px 5px;
  background: #e9f2df;
  color: var(--leaf);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.root-game-tool-dock .root-game-seed-option.is-last-used,
.root-game-tool-dock [data-game-tool="plant"].is-picker-open {
  border-color: var(--coral);
  box-shadow: inset 0 0 0 2px rgba(216, 101, 77, 0.16);
}

.root-game-seed-empty {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px dashed rgba(29, 69, 52, 0.3);
  border-radius: 6px;
  padding: 16px;
  background: rgba(255, 253, 247, 0.72);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.root-game-seed-picker > footer small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  white-space: normal;
}

.root-game-tool-dock .root-game-seed-picker > footer button {
  min-height: 34px;
  padding: 7px 12px;
  background: var(--forest);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
}

.root-game-tool-dock button,
.root-game-tool-dock .root-game-tool-link {
  display: grid;
  min-width: 0;
  min-height: 66px;
  place-content: center;
  gap: 4px;
  border: 1px solid rgba(32, 79, 57, 0.2);
  border-radius: 7px;
  padding: 7px 8px;
  background: #fffdf7;
  color: var(--forest);
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 rgba(48, 89, 59, 0.08);
}

.root-game-tool-icon {
  display: block;
  width: 38px;
  height: 38px;
  margin: 0 auto;
  background-image: url("/assets/live-rooted/game-v2/ui/planting-tools.png");
  background-repeat: no-repeat;
  background-size: 200% 200%;
}

.root-game-tool-icon.is-hoe {
  background-position: 0 0;
}

.root-game-tool-icon.is-plant {
  background-position: 100% 0;
}

.root-game-tool-icon.is-market {
  display: grid;
  place-items: center;
  border: 1px solid rgba(189, 122, 42, 0.34);
  border-radius: 50%;
  background: linear-gradient(145deg, #fff8dc, #ecd39c);
  color: var(--forest);
  box-shadow: inset 0 -3px 0 rgba(126, 82, 31, 0.12);
}

.root-game-tool-icon.is-market i {
  font-size: 24px;
  line-height: 1;
}

.root-game-tool-icon.is-water {
  background-position: 0 100%;
}

.root-game-tool-icon.is-harvest {
  background-position: 100% 100%;
}

.root-game-structure-view {
  flex: 0 0 84px;
  border-color: rgba(179, 121, 44, 0.42) !important;
  background: linear-gradient(180deg, #fffaf0, #f3ead3) !important;
  color: var(--forest) !important;
}

.root-game-structure-view-icon {
  display: grid;
  width: 34px;
  height: 31px;
  align-content: end;
  gap: 2px;
  margin: 0 auto;
  filter: drop-shadow(0 2px 1px rgba(23, 52, 40, 0.16));
}

.root-game-structure-view-icon i {
  display: block;
  width: 30px;
  height: 6px;
  border: 1px solid rgba(255, 250, 230, 0.72);
  border-radius: 2px;
  background: linear-gradient(90deg, #274f3a, #4d774d);
  box-shadow: inset 0 -2px 0 rgba(13, 44, 36, 0.2);
  transform: skewY(-13deg);
  transform-origin: center;
  transition: opacity 150ms ease, transform 150ms ease, background-color 150ms ease;
}

.root-game-structure-view[data-structure-view-mode="cutaway"] .root-game-structure-view-icon i:first-child {
  opacity: 0.16;
  transform: translateY(3px) skewY(-13deg);
}

.root-game-structure-view[data-structure-view-mode="cutaway"] .root-game-structure-view-icon i:nth-child(2) {
  opacity: 0.48;
}

.root-game-structure-view[data-structure-view-mode="down"] .root-game-structure-view-icon i:not(:last-child) {
  opacity: 0.1;
  transform: translateY(5px) skewY(-13deg);
}

.root-game-structure-view[data-structure-view-mode="down"] .root-game-structure-view-icon i:last-child {
  border-color: #b97a2c;
  background: rgba(255, 247, 220, 0.55);
  box-shadow: inset 0 0 0 2px rgba(185, 122, 44, 0.35);
}

.root-game-structure-view:hover:not(:disabled) {
  border-color: rgba(179, 121, 44, 0.72) !important;
  background: #fff8e2 !important;
}

.root-game-structure-view:focus-visible {
  outline: 3px solid #ffd66b;
  outline-offset: 2px;
}

.root-game-tool-dock button:hover:not(:disabled),
.root-game-tool-dock .root-game-tool-link:hover {
  border-color: rgba(71, 115, 63, 0.62);
  background: #f0f5e7;
}

.root-game-tool-dock button.is-active {
  border-color: var(--forest);
  background: var(--forest);
  color: white;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18);
}

.root-game-tool-dock button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.root-game-tool-dock b {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.05;
}

.root-game-tool-dock small {
  overflow: hidden;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-game-tool-dock .root-game-farm-helper small {
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.root-game-expand {
  flex: 0 0 118px;
  border-color: rgba(216, 101, 77, 0.48) !important;
  background: #fff0e7 !important;
  color: var(--coral-dark) !important;
}

.root-game-expand small {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.root-game-toast {
  position: absolute;
  z-index: 45;
  left: 50%;
  top: calc(var(--hud-top) + var(--hud-height) + 14px);
  max-width: min(520px, calc(100% - 32px));
  border: 1px solid rgba(255, 253, 247, 0.72);
  border-radius: 7px;
  padding: 10px 15px;
  background: rgba(23, 63, 50, 0.94);
  color: white;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 12px 28px rgba(13, 44, 36, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.root-game-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.root-game-scrim {
  position: absolute;
  z-index: 34;
  inset: 0;
  background: rgba(9, 36, 29, 0.58);
}

.root-game-window {
  position: absolute;
  z-index: 40;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(760px, calc(100% - 32px));
  max-height: min(680px, calc(100% - 40px));
  overflow: hidden;
  border: 1px solid rgba(255, 253, 247, 0.86);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 28px 70px rgba(6, 30, 23, 0.5);
  transform: translate(-50%, -50%);
}

.root-game-window[hidden],
.root-game-scrim[hidden],
.root-game-selection[hidden],
.root-game-purchase[hidden],
.root-rhythm-milestone[hidden],
.root-game-daily-reward[hidden],
.root-game-level-up[hidden],
.root-game-purchase-confirmation[hidden],
.root-game-purchase > div[hidden] {
  display: none;
}

.root-game-window.is-covered-by-purchase {
  visibility: hidden;
  pointer-events: none;
}

.root-game-purchase {
  position: absolute;
  z-index: 52;
  left: 50%;
  top: 50%;
  width: min(430px, calc(100% - 34px));
  max-height: calc(100% - 36px);
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 253, 247, 0.9);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 28px 72px rgba(6, 30, 23, 0.58);
}

.root-game-purchase > div {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 24px;
  text-align: center;
}

.root-game-purchase img {
  width: 118px;
  height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(24, 58, 43, 0.2));
}

.root-game-purchase span {
  color: var(--coral-dark);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-purchase h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: 1.05;
}

.root-game-purchase p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.root-game-purchase small {
  color: var(--coral-dark);
  font-size: 11px;
  font-weight: 900;
}

.root-game-purchase small.root-game-purchase-capacity {
  color: var(--forest);
}

.root-game-expansion-dialog {
  width: min(460px, calc(100% - 34px));
}

.root-game-expansion-preview {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(29, 69, 52, 0.2);
  border-radius: 7px;
  background: linear-gradient(135deg, #edf4e5, #fff8e8);
}

.root-game-expansion-preview b {
  display: grid;
  min-height: 54px;
  place-items: center;
  border: 1px solid rgba(29, 69, 52, 0.25);
  border-radius: 6px;
  background: #fffdf7;
  color: var(--forest);
  font: 700 18px/1 Georgia, "Times New Roman", serif;
}

.root-game-expansion-preview i {
  position: relative;
  height: 2px;
  background: var(--coral-dark);
}

.root-game-expansion-preview i::after {
  position: absolute;
  top: -4px;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--coral-dark);
  border-right: 2px solid var(--coral-dark);
  content: "";
  transform: rotate(45deg);
}

.root-game-purchase-close {
  position: sticky;
  z-index: 3;
  top: 12px;
  justify-self: end;
  width: 44px;
  height: 44px;
  margin: -12px -12px -32px 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fffdf7;
  color: var(--forest);
  font-size: 22px;
  line-height: 1;
}

.root-game-quantity {
  display: grid;
  grid-template-columns: 42px 112px 42px;
  align-items: end;
  gap: 8px;
  margin-top: 5px;
}

.root-game-quantity button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf7;
  color: var(--forest);
  font-size: 20px;
  font-weight: 900;
}

.root-game-quantity label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.root-game-quantity input {
  width: 112px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--forest);
  text-align: center;
  font-size: 17px;
  font-weight: 900;
}

.root-game-purchase-total {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.root-game-purchase-total strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

.root-game-purchase-submit,
.root-game-purchase-confirmation button {
  min-height: 42px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--forest);
  color: #ffffff;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 900;
}

.root-game-purchase-confirmation-actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.root-game-purchase-confirmation-actions button {
  min-width: 0;
  padding: 8px 10px;
  line-height: 1.2;
}

.root-game-purchase-confirmation-actions button.is-secondary {
  border-color: var(--line);
  background: #fffdf7;
  color: var(--forest);
}

.root-game-purchase-confirmation-actions button.is-inventory {
  border-color: rgba(29, 69, 52, 0.22);
  background: #e8f0df;
  color: var(--forest);
}

.root-game-purchase-submit:disabled,
.root-game-purchase-confirmation button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.root-game-inventory-action .root-game-purchase-submit.is-danger {
  background: #a43e31;
}

.root-game-inventory-action [data-inventory-action-quantity-row][hidden] {
  display: none;
}

.root-rhythm-milestone {
  position: absolute;
  z-index: 69;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 42%, rgba(235, 205, 96, 0.2), transparent 44%),
    rgba(3, 29, 22, 0.78);
  backdrop-filter: blur(8px);
  overscroll-behavior: contain;
}

.root-rhythm-milestone__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100% - 4px);
  overflow: auto;
  border: 1px solid rgba(246, 218, 119, 0.88);
  border-radius: 22px;
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(255, 253, 245, 0.99), rgba(246, 239, 219, 0.99));
  box-shadow:
    0 30px 90px rgba(1, 22, 15, 0.72),
    0 0 0 5px rgba(232, 202, 91, 0.12),
    0 0 62px rgba(230, 199, 82, 0.22);
  color: var(--forest);
  scrollbar-width: thin;
  animation: root-rhythm-milestone-rise 560ms cubic-bezier(0.16, 0.88, 0.2, 1) both;
}

.root-rhythm-milestone__panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, #245c43, #e2bd59 48%, #245c43);
  content: "";
}

.root-rhythm-milestone__panel:focus {
  outline: none;
}

.root-rhythm-milestone__header {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 0 2px 17px;
  border-bottom: 1px solid rgba(29, 69, 52, 0.14);
}

.root-rhythm-milestone__brand {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 2px solid #d8b34d;
  border-radius: 50%;
  background: #f8f1d9;
  box-shadow: 0 8px 20px rgba(41, 83, 56, 0.15);
}

.root-rhythm-milestone__brand img {
  width: 47px;
  height: 47px;
  object-fit: contain;
}

.root-rhythm-milestone__header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.root-rhythm-milestone__header small {
  color: var(--coral-dark);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.root-rhythm-milestone__header strong {
  color: #385b4b;
  font: 700 17px/1.15 Georgia, "Times New Roman", serif;
}

.root-rhythm-milestone__hero {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 15px;
  border: 1px solid rgba(51, 102, 69, 0.2);
  border-radius: 15px;
  background: linear-gradient(135deg, #edf4e5, #fff8e4);
}

.root-rhythm-milestone__task-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(226, 188, 77, 0.78);
  border-radius: 50%;
  background: #174737;
  color: #f5d66e;
  box-shadow: inset 0 0 0 4px rgba(255, 247, 190, 0.08), 0 8px 18px rgba(14, 56, 40, 0.19);
}

.root-rhythm-milestone__task-icon i {
  font-size: 25px;
}

.root-rhythm-milestone__hero > div {
  min-width: 0;
}

.root-rhythm-milestone__hero h2 {
  margin: 0;
  color: var(--forest);
  font: 700 clamp(27px, 3vw, 34px)/1 Georgia, "Times New Roman", serif;
}

.root-rhythm-milestone__hero p {
  margin: 6px 0 0;
  color: #617268;
  font-size: 12px;
  line-height: 1.35;
}

.root-rhythm-milestone__hero > strong {
  color: #a95536;
  font: 700 21px/1 Georgia, "Times New Roman", serif;
  white-space: nowrap;
}

.root-rhythm-milestone__hero-track {
  height: 14px;
  margin: 12px 3px 0;
  overflow: hidden;
  border: 1px solid rgba(29, 69, 52, 0.2);
  border-radius: 999px;
  background: rgba(23, 63, 50, 0.12);
  box-shadow: inset 0 2px 4px rgba(23, 63, 50, 0.12);
}

.root-rhythm-milestone__hero-track > i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #37714e, #d9b43f 74%, #f2d875);
  box-shadow: 0 0 16px rgba(226, 190, 74, 0.62);
  transition: width 1s cubic-bezier(0.16, 0.82, 0.2, 1);
}

.root-rhythm-milestone__saved {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 17px;
  color: #3a7050;
  font-size: 10px;
  font-weight: 900;
}

.root-rhythm-milestone__saved i {
  color: #b98c25;
  font-size: 15px;
}

.root-rhythm-milestone__rhythm {
  padding: 15px;
  border: 1px solid rgba(29, 69, 52, 0.16);
  border-radius: 15px;
  background: rgba(255, 253, 247, 0.76);
}

.root-rhythm-milestone__rhythm-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.root-rhythm-milestone__rhythm-heading h3 {
  margin: 0;
  color: var(--forest);
  font: 700 18px/1 Georgia, "Times New Roman", serif;
}

.root-rhythm-milestone__rhythm-heading strong {
  color: var(--coral-dark);
  font-size: 9px;
  font-weight: 950;
  text-align: right;
  text-transform: uppercase;
}

.root-rhythm-milestone__rhythm ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.root-rhythm-milestone__rhythm li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color 180ms ease, background 180ms ease;
}

.root-rhythm-milestone__rhythm li.is-celebrated {
  border-color: rgba(204, 160, 49, 0.45);
  background: #fff8dc;
}

.root-rhythm-milestone__rhythm li > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #284f3e;
  font-size: 12px;
  font-weight: 900;
}

.root-rhythm-milestone__rhythm li > span i {
  color: #47764f;
  font-size: 17px;
}

.root-rhythm-milestone__rhythm li.is-complete > span i {
  color: #bd8f25;
}

.root-rhythm-milestone__rhythm li > strong {
  color: #63736a;
  font-size: 10px;
}

.root-rhythm-milestone__rhythm li.is-complete > strong {
  color: #9b6d15;
}

.root-rhythm-milestone__rhythm li > b {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(23, 63, 50, 0.12);
}

.root-rhythm-milestone__rhythm li > b > i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #5f8d5d;
  transition: width 1s cubic-bezier(0.16, 0.82, 0.2, 1);
}

.root-rhythm-milestone.is-counting .root-rhythm-milestone__rhythm li.is-celebrated > b > i {
  transition: none;
}

.root-rhythm-milestone__rhythm li.is-complete > b > i {
  background: linear-gradient(90deg, #4f824f, #d9b43f);
}

.root-rhythm-milestone__actions {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(150px, 0.8fr);
  gap: 10px;
  margin-top: 16px;
}

.root-rhythm-milestone__actions > button:only-child {
  grid-column: 1 / -1;
}

.root-rhythm-milestone__collect[hidden] {
  display: none;
}

.root-rhythm-milestone__collect[hidden] + .root-rhythm-milestone__continue {
  grid-column: 1 / -1;
}

.root-rhythm-milestone__collect,
.root-rhythm-milestone__continue {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  border-radius: 9px;
  font: 900 13px/1 "Inter", "Segoe UI", sans-serif;
  cursor: pointer;
}

.root-rhythm-milestone__collect {
  border: 1px solid #e6c457;
  background: linear-gradient(180deg, #1b5a42, #0f4232);
  color: #fff7c9;
  box-shadow: 0 10px 22px rgba(8, 57, 40, 0.24), inset 0 1px rgba(255, 255, 255, 0.16);
}

.root-rhythm-milestone__collect span {
  display: grid;
  gap: 4px;
  text-align: left;
}

.root-rhythm-milestone__collect strong,
.root-rhythm-milestone__collect small {
  display: block;
}

.root-rhythm-milestone__collect small {
  color: #d8eadc;
  font-size: 9px;
  font-weight: 700;
}

.root-rhythm-milestone__collect:hover {
  background: linear-gradient(180deg, #236b4f, #124b39);
}

.root-rhythm-milestone__collect:focus-visible,
.root-rhythm-milestone__continue:focus-visible {
  outline: 3px solid #f1c75d;
  outline-offset: 3px;
}

.root-rhythm-milestone__continue {
  border: 1px solid #f0b09e;
  background: linear-gradient(180deg, #df7258, #c95540);
  color: #fffdf5;
  box-shadow: 0 10px 22px rgba(146, 60, 42, 0.2), inset 0 1px rgba(255, 255, 255, 0.25);
}

.root-rhythm-milestone__continue:hover {
  background: linear-gradient(180deg, #e67a5e, #ba4937);
}

.root-rhythm-milestone[data-root-rhythm-complete-count="3"] .root-rhythm-milestone__panel {
  box-shadow:
    0 30px 90px rgba(1, 22, 15, 0.72),
    0 0 0 5px rgba(232, 202, 91, 0.16),
    0 0 82px rgba(239, 207, 83, 0.34);
}

@keyframes root-rhythm-milestone-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.root-game-daily-reward {
  position: absolute;
  z-index: 62;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 38, 29, 0.7);
  backdrop-filter: blur(7px);
}

.root-game-daily-reward > div {
  position: relative;
  width: min(430px, 100%);
  overflow: hidden;
  padding: 36px 30px 30px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 28px 76px rgba(6, 30, 23, 0.58);
  text-align: center;
  animation: root-game-daily-rise 420ms ease-out;
}

.root-game-daily-reward > div::before,
.root-game-daily-reward > div::after {
  position: absolute;
  width: 130px;
  height: 130px;
  border: 2px dotted #e0b24e;
  border-radius: 50%;
  content: "";
  opacity: 0.45;
}

.root-game-daily-reward > div::before {
  top: -82px;
  left: -44px;
}

.root-game-daily-reward > div::after {
  right: -40px;
  bottom: -86px;
}

.root-game-daily-reward > div > span {
  color: var(--coral-dark);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-daily-reward h2 {
  margin: 9px 0 16px;
  color: var(--forest);
  font: 700 31px/1.05 Georgia, "Times New Roman", serif;
}

.root-game-daily-reward-wallet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.root-game-daily-reward-seeds {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-bottom: 15px;
  color: var(--forest);
}

.root-game-daily-reward-seeds.is-focus {
  color: #246a66;
}

.root-game-daily-reward-seeds strong {
  font: 700 52px/0.95 Georgia, "Times New Roman", serif;
}

.root-game-daily-reward-seeds small {
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-daily-reward p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.root-game-daily-reward button {
  width: 100%;
  min-height: 45px;
  margin-top: 18px;
  border: 0;
  border-radius: 6px;
  background: var(--forest);
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.root-game-daily-reward-actions {
  display: grid;
  gap: 8px;
}

.root-game-daily-reward-actions button + button {
  margin-top: 0;
  background: transparent;
  color: var(--forest);
  border: 1px solid rgba(15, 70, 48, 0.22);
}

@keyframes root-game-daily-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.root-game-level-up {
  position: absolute;
  z-index: 70;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 20px;
  background: rgba(5, 31, 24, 0.84);
  backdrop-filter: blur(8px);
}

.root-game-level-light {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(720px, 88vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 139, 0.38) 0 8%, rgba(179, 213, 116, 0.2) 28%, rgba(15, 70, 48, 0) 68%);
  transform: translate(-50%, -50%);
  animation: root-game-level-light 2.4s ease-in-out infinite;
}

.root-game-level-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.root-game-level-particles i {
  --particle-x: 50%;
  --particle-delay: 0s;
  position: absolute;
  left: var(--particle-x);
  bottom: -36px;
  width: 13px;
  height: 22px;
  border-radius: 85% 14% 85% 14%;
  background: #d7c756;
  box-shadow: 0 0 12px rgba(255, 237, 133, 0.46);
  opacity: 0;
  transform: rotate(32deg);
  animation: root-game-level-leaf 3.4s var(--particle-delay) ease-in infinite;
}

.root-game-level-particles i:nth-child(1) { --particle-x: 10%; --particle-delay: 0.2s; }
.root-game-level-particles i:nth-child(2) { --particle-x: 18%; --particle-delay: 1.3s; background: #82aa61; }
.root-game-level-particles i:nth-child(3) { --particle-x: 28%; --particle-delay: 0.7s; }
.root-game-level-particles i:nth-child(4) { --particle-x: 36%; --particle-delay: 2s; background: #82aa61; }
.root-game-level-particles i:nth-child(5) { --particle-x: 44%; --particle-delay: 1.6s; }
.root-game-level-particles i:nth-child(6) { --particle-x: 52%; --particle-delay: 0.4s; background: #f0cb68; }
.root-game-level-particles i:nth-child(7) { --particle-x: 61%; --particle-delay: 2.2s; }
.root-game-level-particles i:nth-child(8) { --particle-x: 69%; --particle-delay: 1.1s; background: #82aa61; }
.root-game-level-particles i:nth-child(9) { --particle-x: 77%; --particle-delay: 0.1s; }
.root-game-level-particles i:nth-child(10) { --particle-x: 84%; --particle-delay: 1.8s; background: #82aa61; }
.root-game-level-particles i:nth-child(11) { --particle-x: 91%; --particle-delay: 0.9s; }
.root-game-level-particles i:nth-child(12) { --particle-x: 57%; --particle-delay: 2.7s; background: #f0cb68; }

.root-game-level-up-panel {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(470px, 100%);
  justify-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 190, 0.8);
  border-radius: 8px;
  padding: 30px 34px 32px;
  background: rgba(250, 246, 225, 0.97);
  box-shadow: 0 32px 90px rgba(2, 25, 17, 0.7), 0 0 70px rgba(219, 196, 91, 0.25);
  text-align: center;
  animation: root-game-level-panel 680ms cubic-bezier(0.18, 0.84, 0.2, 1) both;
}

.root-game-level-up-panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, #2d684b, #dcb858, #2d684b);
  content: "";
}

.root-game-level-up-panel > span {
  color: var(--coral-dark);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-level-up-emblem {
  position: relative;
  display: grid;
  width: 112px;
  height: 112px;
  margin: 16px 0 12px;
  place-items: center;
  border: 3px solid #deb958;
  border-radius: 50%;
  background: #1d513c;
  box-shadow: inset 0 0 0 5px rgba(255, 247, 184, 0.16), 0 0 0 8px rgba(222, 185, 88, 0.15), 0 12px 24px rgba(10, 61, 41, 0.25);
  animation: root-game-level-emblem 760ms 160ms cubic-bezier(0.16, 0.9, 0.2, 1) both;
}

.root-game-level-up-emblem img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  opacity: 0.28;
  filter: brightness(4) saturate(0.35);
}

.root-game-level-up-emblem b {
  position: absolute;
  color: #fff7cb;
  font: 800 52px/1 Georgia, "Times New Roman", serif;
  text-shadow: 0 3px 8px rgba(4, 42, 27, 0.6);
}

.root-game-level-up h2 {
  margin: 0;
  color: var(--forest);
  font: 700 34px/1 Georgia, "Times New Roman", serif;
}

.root-game-level-up h2 strong {
  color: #b46036;
}

.root-game-level-up-panel > p {
  max-width: 340px;
  margin: 10px 0 18px;
  color: #586a5f;
  font-size: 13px;
  line-height: 1.45;
}

.root-game-level-up-progress {
  display: grid;
  width: 100%;
  gap: 7px;
}

.root-game-level-up-progress > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--forest);
  font-size: 11px;
}

.root-game-level-up-progress small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.root-game-level-up-progress > div {
  height: 9px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(23, 63, 50, 0.14);
}

.root-game-level-up-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4f8547, #dfba55);
}

.root-game-level-up-reward {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  border-top: 1px solid rgba(29, 69, 52, 0.15);
  padding-top: 15px;
}

.root-game-level-up-reward span {
  display: grid;
  justify-items: start;
}

.root-game-level-up-reward small {
  color: #667368;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.root-game-level-up-reward strong {
  color: var(--forest);
  font: 700 15px/1.2 Georgia, "Times New Roman", serif;
}

.root-game-level-up button {
  width: 100%;
  min-height: 46px;
  margin-top: 20px;
  border: 0;
  border-radius: 6px;
  background: var(--forest);
  color: white;
  font-size: 12px;
  font-weight: 950;
}

@keyframes root-game-level-panel {
  from { opacity: 0; transform: translateY(26px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes root-game-level-emblem {
  from { opacity: 0; transform: scale(0.45) rotate(-12deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes root-game-level-light {
  0%, 100% { opacity: 0.68; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes root-game-level-leaf {
  0% { opacity: 0; transform: translate(0, 0) rotate(20deg); }
  12% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(55px, -105vh) rotate(330deg); }
}

.root-game-window > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--forest);
  color: white;
}

.root-game-window > header > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.root-game-window > header span {
  color: #f2c982;
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-window > header strong {
  overflow-wrap: anywhere;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  line-height: 1.05;
}

.root-game-window > header button {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 25px;
  line-height: 1;
}

.root-game-window-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 14px 0;
}

.root-game-window-tabs button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 16px;
  background: #fffdf7;
  color: var(--forest);
  font-size: 11px;
  font-weight: 900;
}

.root-game-window-tabs button.is-active {
  border-color: var(--coral-dark);
  background: var(--coral);
  color: white;
}

.root-game-inventory-capacity {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) auto;
  grid-template-areas:
    "copy track action"
    "note note action";
  align-items: center;
  gap: 7px 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fffaf0;
}

.root-game-inventory-capacity-copy {
  grid-area: copy;
  display: grid;
  gap: 2px;
}

.root-game-inventory-capacity-copy span {
  color: var(--coral-dark);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-inventory-capacity-copy strong {
  color: var(--forest);
  font: 700 17px/1 Georgia, "Times New Roman", serif;
}

.root-game-inventory-capacity-track {
  grid-area: track;
  height: 9px;
  overflow: hidden;
  border: 1px solid rgba(29, 69, 52, 0.18);
  border-radius: 5px;
  background: rgba(29, 69, 52, 0.1);
}

.root-game-inventory-capacity-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--forest);
  transition: width 180ms ease-out, background-color 180ms ease-out;
}

.root-game-inventory-capacity-track i.is-near-limit {
  background: var(--coral-dark);
}

.root-game-inventory-capacity > small {
  grid-area: note;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.root-game-inventory-capacity > button {
  grid-area: action;
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  padding: 0 14px;
  background: var(--forest);
  color: white;
  font-size: 10px;
  font-weight: 900;
}

.root-game-inventory-capacity > button:disabled {
  cursor: default;
  opacity: 0.56;
}

.root-game-catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  overflow: auto;
  scrollbar-color: var(--brass) rgba(255, 255, 255, 0.45);
  scrollbar-width: thin;
}

.root-game-catalog-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: #fffdf7;
}

.root-game-catalog-item.is-recently-stored {
  border-color: var(--brass);
  box-shadow: inset 0 0 0 2px rgba(196, 150, 65, 0.22), 0 8px 20px rgba(38, 74, 51, 0.12);
}

.root-game-catalog-item.is-recently-stored small::before {
  content: "Just stored | ";
  color: var(--forest);
}

.root-game-catalog-item img {
  width: 88px;
  height: 88px;
  align-self: center;
  object-fit: contain;
  filter: drop-shadow(0 8px 9px rgba(24, 58, 43, 0.18));
}

.root-game-catalog-item > div {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.root-game-catalog-item strong {
  overflow-wrap: anywhere;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
}

.root-game-catalog-item p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
}

.root-game-catalog-item small {
  color: var(--coral-dark);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.3;
}

.root-game-catalog-item button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  padding: 0 12px;
  background: var(--forest);
  color: white;
  font-size: 10px;
  font-weight: 900;
}

.root-game-catalog-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: auto;
}

.root-game-catalog-actions button.is-secondary {
  min-width: 76px;
  background: transparent;
  color: #8c3329;
  box-shadow: inset 0 0 0 1px rgba(140, 51, 41, 0.42);
}

.root-game-catalog-item button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.root-game-inventory-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: #fffdf7;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
}

.root-game-progress-window {
  grid-template-rows: auto minmax(0, 1fr);
  width: min(760px, calc(100% - 32px));
}

.root-game-market-window {
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1040px, calc(100% - 32px));
  max-height: min(760px, calc(100% - 32px));
}

.root-game-market-body {
  display: grid;
  min-height: 0;
  grid-template-areas:
    "featured rail"
    "sell rail"
    "calendar rail";
  grid-template-columns: minmax(0, 1fr) minmax(250px, 286px);
  align-content: start;
  gap: 14px;
  overflow: auto;
  padding: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(226, 188, 102, 0.2), transparent 36%),
    #f8f1e2;
}

.root-game-market-featured,
.root-game-market-sell,
.root-game-market-calendar-section,
.root-game-market-presence,
.root-game-market-buy {
  min-width: 0;
  border: 1px solid rgba(29, 69, 52, 0.18);
  border-radius: 9px;
  background: rgba(255, 253, 247, 0.92);
  box-shadow: 0 10px 24px rgba(32, 65, 47, 0.08);
}

.root-game-market-featured {
  grid-area: featured;
  padding: 16px;
  border-color: rgba(189, 122, 42, 0.34);
  background:
    linear-gradient(120deg, rgba(255, 249, 221, 0.96), rgba(246, 230, 190, 0.88)),
    #fff8dc;
}

.root-game-market-sell {
  grid-area: sell;
  padding: 16px;
}

.root-game-market-calendar-section {
  grid-area: calendar;
  padding: 16px;
}

.root-game-market-rail {
  position: sticky;
  top: 0;
  grid-area: rail;
  display: grid;
  align-content: start;
  gap: 14px;
}

.root-game-market-section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.root-game-market-section-heading > div {
  display: grid;
  gap: 3px;
}

.root-game-market-section-heading span,
.root-game-market-buy > span {
  color: var(--coral-dark);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.root-game-market-section-heading h2 {
  margin: 0;
  color: var(--forest);
  font: 700 19px/1.12 Georgia, "Times New Roman", serif;
}

.root-game-market-section-heading > small {
  max-width: 220px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-align: right;
}

.root-game-market-featured-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.root-game-market-featured-list > article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  border: 1px solid rgba(169, 70, 53, 0.18);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 253, 247, 0.86);
}

.root-game-market-featured-list img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.root-game-market-featured-list strong {
  color: var(--forest);
  font: 700 14px/1.2 Georgia, "Times New Roman", serif;
}

.root-game-market-featured-list > article > span,
.root-game-market-produce-list > article > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.root-game-market-featured-list > article > span small,
.root-game-market-produce-list > article > span small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.root-game-market-produce-list > article > span strong {
  color: var(--forest);
  font: 800 13px/1.25 Inter, system-ui, sans-serif;
}

.root-game-market-featured-list em {
  border-radius: 999px;
  padding: 5px 7px;
  background: var(--coral);
  color: white;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.root-game-market-produce-list {
  display: grid;
  gap: 8px;
}

.root-game-market-produce-list > article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  border: 1px solid rgba(29, 69, 52, 0.15);
  border-radius: 8px;
  padding: 8px 9px;
  background: #fffdf7;
}

.root-game-market-produce-list img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.root-game-market-produce-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.root-game-market-produce-list button,
.root-game-market-buy button {
  min-height: 44px;
  border: 0;
  border-radius: 7px;
  padding: 0 13px;
  background: var(--forest);
  color: white;
  font-size: 10px;
  font-weight: 900;
}

.root-game-market-produce-list button.is-secondary {
  border: 1px solid rgba(29, 69, 52, 0.28);
  background: #eef2e8;
  color: var(--forest);
}

.root-game-market-produce-list button:hover:not(:disabled),
.root-game-market-buy button:hover:not(:disabled) {
  background: #275b45;
}

.root-game-market-produce-list button.is-secondary:hover:not(:disabled) {
  background: #dfe9d9;
}

.root-game-market-empty {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px dashed rgba(29, 69, 52, 0.26);
  border-radius: 8px;
  padding: 14px;
  color: var(--muted);
  background: rgba(255, 253, 247, 0.66);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.root-game-market-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(78px, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.root-game-market-calendar li {
  display: grid;
  min-height: 74px;
  align-content: center;
  gap: 5px;
  border: 1px solid rgba(29, 69, 52, 0.16);
  border-radius: 8px;
  padding: 8px;
  background: #fffdf7;
  text-align: center;
}

.root-game-market-calendar li:first-child {
  border-color: var(--brass);
  background: #fff3cb;
  box-shadow: inset 0 0 0 1px rgba(189, 122, 42, 0.2);
}

.root-game-market-calendar b {
  color: var(--forest);
  font-size: 10px;
}

.root-game-market-calendar span {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
}

.root-game-market-presence {
  padding: 14px;
  background: linear-gradient(145deg, #eef4e6, #fffaf0);
}

.root-game-market-presence > p {
  margin: -3px 0 12px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.root-game-market-presence ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.root-game-market-presence li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border-radius: 7px;
  padding: 5px 7px;
  background: rgba(255, 253, 247, 0.78);
}

.root-game-market-presence li > i {
  color: var(--leaf);
  font-size: 27px;
}

.root-game-market-presence li > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.root-game-market-presence li b {
  color: var(--forest);
  font-size: 10px;
}

.root-game-market-presence li small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-game-market-buy {
  display: grid;
  gap: 7px;
  padding: 15px;
  background: linear-gradient(145deg, #173f32, #245845);
  color: white;
}

.root-game-market-buy > span {
  color: #f6cf83;
}

.root-game-market-buy strong {
  color: white;
  font: 700 16px/1.2 Georgia, "Times New Roman", serif;
}

.root-game-market-buy p {
  margin: 0 0 3px;
  color: #d9e8dc;
  font-size: 10px;
  line-height: 1.45;
}

.root-game-market-buy button {
  width: 100%;
  background: #f0c86e;
  color: var(--forest-deep);
}

.root-game-market-buy button:hover:not(:disabled) {
  background: #ffe29b;
}

.root-game-market-buy .root-game-market-district-link {
  display: grid;
  width: 100%;
  min-height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 7px;
  padding: 0 13px;
  background: #fff8df;
  color: var(--forest-deep);
  font-size: 10px;
  font-weight: 950;
  text-decoration: none;
}

.root-game-market-buy .root-game-market-district-link:hover {
  background: white;
}

.root-game-progress-copy {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding: 22px;
}

.root-game-root-progress {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) minmax(150px, auto);
  align-items: center;
  gap: 16px;
  margin: -22px -22px 12px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(29, 69, 52, 0.16);
  background: linear-gradient(105deg, #e7f0db, #fff4d6 62%, #f7e1cd);
}

.root-game-root-progress-level {
  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 3px solid #d7b34f;
  border-radius: 50%;
  background: #1f513d;
  box-shadow: inset 0 0 0 4px rgba(255, 248, 193, 0.15), 0 8px 18px rgba(20, 72, 49, 0.2);
}

.root-game-root-progress-level > img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  opacity: 0.25;
  filter: brightness(4) saturate(0.35);
}

.root-game-root-progress-level strong {
  position: absolute;
  color: #fff7cc;
  font: 800 34px/1 Georgia, "Times New Roman", serif;
}

.root-game-root-progress-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.root-game-root-progress-copy > span {
  color: #52705a;
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-root-progress-copy h3 {
  margin: 0;
  color: var(--forest);
  font: 700 24px/1 Georgia, "Times New Roman", serif;
}

.root-game-root-progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(23, 63, 50, 0.14);
}

.root-game-root-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #568949, #ddb44d);
  transition: width 520ms ease;
}

.root-game-root-progress-copy p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  color: #5f6e63;
  font-size: 9px;
}

.root-game-root-progress-copy p b {
  color: var(--forest);
}

.root-game-root-progress-focus {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.root-game-root-progress-focus > span {
  display: grid;
  justify-items: start;
}

.root-game-root-progress-focus small {
  color: #6d735e;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.root-game-root-progress-focus strong {
  color: var(--forest);
  font: 700 23px/1 Georgia, "Times New Roman", serif;
}

.root-game-root-progress-focus em {
  color: #6d735e;
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

.root-game-level-roadmap {
  display: grid;
  min-height: max-content;
  gap: 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(45, 100, 71, 0.22);
  border-radius: 10px;
  padding: 17px;
  background:
    radial-gradient(circle at 100% 0, rgba(240, 200, 110, 0.26), transparent 34%),
    linear-gradient(145deg, rgba(244, 250, 234, 0.98), rgba(255, 250, 237, 0.98));
  box-shadow: 0 12px 28px rgba(28, 71, 49, 0.08);
}

.root-game-level-roadmap > header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.root-game-level-roadmap > header > div,
.root-game-level-roadmap-grid section > header {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.root-game-level-roadmap header span {
  color: #a4533d;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.root-game-level-roadmap h3,
.root-game-level-roadmap h4 {
  margin: 0;
  color: var(--forest);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.1;
}

.root-game-level-roadmap h3 {
  font-size: 23px;
}

.root-game-level-roadmap h4 {
  font-size: 16px;
}

.root-game-level-roadmap > header > b {
  flex: 0 0 auto;
  border: 1px solid rgba(176, 126, 35, 0.26);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 247, 208, 0.86);
  color: #79551c;
  font-size: 9px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.root-game-level-roadmap > p,
.root-game-level-roadmap-grid section > p {
  margin: 0;
  color: #5c7063;
  font-size: 10px;
  line-height: 1.45;
}

.root-game-level-next-rewards,
.root-game-level-recovery-path ol,
.root-game-level-milestones ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.root-game-level-next-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.root-game-level-next-rewards li {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(48, 105, 77, 0.17);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 253, 247, 0.86);
  color: #315f49;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.2;
}

.root-game-level-next-rewards li::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #d8ae4c;
  box-shadow: 0 0 0 3px rgba(216, 174, 76, 0.14);
  content: "";
}

.root-game-level-roadmap-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
  gap: 10px;
}

.root-game-level-roadmap-grid > section {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 10px;
  border: 1px solid rgba(35, 83, 60, 0.14);
  border-radius: 8px;
  padding: 13px;
  background: rgba(255, 253, 247, 0.78);
}

.root-game-level-recovery-path ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.root-game-level-recovery-path li {
  display: grid;
  min-width: 0;
  gap: 2px;
  border: 1px solid rgba(42, 105, 82, 0.15);
  border-radius: 7px;
  padding: 8px;
  background: #f1f6e9;
}

.root-game-level-recovery-path li span,
.root-game-level-milestones li span {
  color: #657666;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.root-game-level-recovery-path li strong {
  color: #285f50;
  font: 700 15px/1.1 Georgia, "Times New Roman", serif;
}

.root-game-level-recovery-path li.is-earned {
  background: #edf2e5;
  opacity: 0.72;
}

.root-game-level-recovery-path li.is-current {
  border-color: rgba(183, 134, 38, 0.52);
  background: linear-gradient(145deg, #fff5cf, #eef6df);
  box-shadow: 0 6px 14px rgba(92, 74, 26, 0.1);
  opacity: 1;
}

.root-game-level-recovery-path li.is-current span {
  color: #9b542f;
}

.root-game-level-milestones ol {
  display: grid;
  gap: 6px;
}

.root-game-level-milestones li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  min-width: 0;
  align-items: center;
  gap: 9px;
  border-radius: 7px;
  padding: 7px 8px;
  background: rgba(235, 243, 225, 0.76);
}

.root-game-level-milestones li::before {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 23px;
  z-index: 0;
  width: 1px;
  background: rgba(76, 121, 82, 0.22);
  content: "";
}

.root-game-level-milestones li:first-child::before {
  top: 50%;
}

.root-game-level-milestones li:last-child::before {
  bottom: 50%;
}

.root-game-level-milestones li > span {
  z-index: 1;
  display: grid;
  min-height: 30px;
  place-items: center;
  border: 2px solid #d6b052;
  border-radius: 999px;
  background: #245541;
  color: #fff4c4;
  font-size: 8px;
  text-align: center;
}

.root-game-level-milestones li > p {
  min-width: 0;
  margin: 0;
  color: #52695b;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.35;
}

.root-game-level-milestones .is-empty {
  display: block;
  padding: 12px;
  color: #5c7063;
  font-size: 10px;
  line-height: 1.4;
}

.root-game-level-milestones .is-empty::before {
  display: none;
}

.root-game-progress-copy > span {
  color: var(--coral-dark);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-progress-copy > strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
}

.root-game-progress-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.root-game-progress-copy button,
.root-game-progress-copy a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  padding: 0 15px;
  background: var(--coral);
  color: white;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.root-game-progress-copy a {
  background: var(--forest);
}

.root-game-room-progress {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: 15px;
  border: 1px solid rgba(29, 69, 52, 0.2);
  border-radius: 7px;
  background: #fff9e9;
}

.root-game-room-progress > div:first-child {
  display: grid;
  gap: 3px;
}

.root-game-room-progress > div:first-child span {
  color: var(--coral-dark);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-room-progress > div:first-child strong {
  color: var(--forest);
  font: 700 17px/1.2 Georgia, "Times New Roman", serif;
}

.root-game-room-progress > p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.root-game-room-progress > p.root-game-room-context {
  border-left: 3px solid rgba(189, 122, 42, 0.5);
  padding-left: 9px;
  color: var(--forest);
  font-weight: 750;
}

.root-game-room-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.root-game-progress-copy .root-game-room-options button {
  display: grid;
  min-width: 0;
  min-height: 56px;
  gap: 4px;
  padding: 9px 12px;
  border: 1px solid rgba(29, 69, 52, 0.22);
  background: #fffdf7;
  color: var(--forest);
}

.root-game-progress-copy .root-game-room-options button:focus-visible,
.root-game-progress-copy .root-game-farm-list button:focus-visible {
  outline: 3px solid rgba(189, 122, 42, 0.72);
  outline-offset: 2px;
}

.root-game-progress-copy .root-game-room-options button[aria-busy="true"] {
  cursor: wait;
  opacity: 0.72;
}

.root-game-room-options button b {
  font: 700 15px/1.1 Georgia, "Times New Roman", serif;
}

.root-game-room-options button small {
  color: var(--muted);
  font-size: 9px;
}

.root-game-progress-copy .root-game-room-options button.is-current {
  border-color: #356a51;
  background: var(--forest);
  color: #fffdf7;
}

.root-game-room-options button.is-current small {
  color: #dbe8db;
}

.root-game-progress-copy .root-game-room-options button:disabled:not(.is-current) {
  border-style: dashed;
  background: #ecebe1;
  color: #6f796d;
  cursor: not-allowed;
  opacity: 1;
}

.root-game-farm-progress {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: 15px;
  border: 1px solid rgba(189, 122, 42, 0.28);
  border-radius: 7px;
  background:
    linear-gradient(130deg, rgba(255, 249, 228, 0.96), rgba(246, 239, 223, 0.94)),
    #fff9e9;
}

.root-game-farm-progress > div:first-child {
  display: grid;
  gap: 3px;
}

.root-game-farm-progress > div:first-child span {
  color: var(--brass);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.root-game-farm-progress > div:first-child strong {
  color: var(--forest);
  font: 700 17px/1.2 Georgia, "Times New Roman", serif;
}

.root-game-farm-progress > p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.root-game-farm-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.root-game-progress-copy .root-game-farm-list button {
  display: grid;
  min-width: 0;
  min-height: 88px;
  align-content: center;
  justify-items: start;
  gap: 4px;
  border: 1px solid rgba(29, 69, 52, 0.2);
  border-radius: 7px;
  padding: 10px;
  background: #fffdf7;
  color: var(--forest);
  text-align: left;
}

.root-game-farm-list button > span {
  color: var(--coral-dark);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.root-game-farm-list button b {
  font: 700 14px/1.15 Georgia, "Times New Roman", serif;
}

.root-game-farm-list button small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
}

.root-game-progress-copy .root-game-farm-list button.is-current {
  border-color: #356a51;
  background: var(--forest);
  color: white;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16);
}

.root-game-farm-list button.is-current > span {
  color: #f6cf83;
}

.root-game-farm-list button.is-current small {
  color: #dbe8db;
}

.root-game-progress-copy .root-game-farm-list button:disabled:not(.is-current) {
  border-style: dashed;
  background: rgba(236, 235, 225, 0.76);
  color: #6f796d;
  cursor: not-allowed;
  opacity: 1;
}

.root-game-land-progress {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: 15px;
  border: 1px solid rgba(29, 69, 52, 0.18);
  border-radius: 7px;
  background: #f3f7eb;
}

.root-game-land-progress > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.root-game-land-progress > div:first-child span {
  color: var(--forest);
}

.root-game-land-progress > div:first-child strong {
  color: var(--forest);
  font: 700 16px/1.2 Georgia, "Times New Roman", serif;
}

.root-game-land-progress p {
  font-size: 11px;
}

.root-game-land-levels {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 5px;
}

.root-game-land-level {
  min-width: 0;
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 8px 3px;
  border: 1px solid rgba(29, 69, 52, 0.18);
  border-radius: 5px;
  background: rgba(255, 253, 247, 0.9);
  color: var(--muted);
  text-align: center;
}

.root-game-land-level strong {
  color: inherit;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

.root-game-land-level small {
  overflow-wrap: anywhere;
  font-size: 8px;
  font-weight: 850;
  line-height: 1.15;
}

.root-game-land-level.is-complete {
  border-color: #8aa27f;
  background: #dfead8;
  color: var(--forest);
}

.root-game-land-level.is-current {
  border-color: var(--forest);
  background: var(--forest);
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(18, 65, 47, 0.18);
}

.root-game-land-level.is-next {
  border-color: var(--coral-dark);
  background: #fff0e8;
  color: #8c3329;
}

.root-game-daily-care {
  display: grid;
  gap: 9px;
  margin-top: 8px;
  border: 1px solid rgba(29, 69, 52, 0.17);
  border-radius: 6px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(244, 238, 195, 0.7), rgba(255, 252, 242, 0.96));
}

.root-game-daily-care > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.root-game-daily-care > div:first-child span {
  color: var(--forest);
}

.root-game-daily-care > div:first-child strong {
  color: var(--forest);
  font: 700 15px/1.2 Georgia, "Times New Roman", serif;
}

.root-game-daily-care p {
  color: var(--muted);
  font-size: 11px;
}

.root-game-daily-care button {
  width: 100%;
  background: var(--forest);
}

.root-game-daily-care button:disabled {
  cursor: default;
  opacity: 0.62;
}

.root-game-daily-calendar {
  display: grid;
  gap: 8px;
  padding: 10px 0 4px;
  border-top: 1px solid rgba(29, 69, 52, 0.14);
}

.root-game-daily-cycle {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.root-game-daily-cycle strong {
  color: var(--forest);
  font: 700 19px/1 Georgia, "Times New Roman", serif;
}

.root-game-daily-cycle small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-align: right;
}

.root-game-daily-windows {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.root-game-daily-windows button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fffdf7;
  color: var(--forest);
  font-size: 10px;
  font-weight: 900;
}

.root-game-daily-windows button.is-active {
  border-color: var(--forest);
  background: var(--forest);
  color: #ffffff;
}

.root-game-daily-slider {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}

.root-game-daily-slider > button {
  width: 100%;
  min-width: 0;
  min-height: 68px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0;
  background: #ffffff;
  color: var(--forest);
  font-size: 20px;
  font-weight: 900;
}

.root-game-daily-slider > button:disabled {
  color: #aeb8aa;
}

.root-game-daily-track {
  display: grid;
  grid-template-columns: repeat(var(--reward-days, 7), minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}

.root-game-daily-day {
  position: relative;
  min-width: 0;
  min-height: 68px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 7px 3px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #ffffff;
  color: var(--muted);
  text-align: center;
}

.root-game-daily-day span,
.root-game-daily-day small {
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.root-game-daily-day strong {
  color: var(--forest);
  font: 700 17px/1 Georgia, "Times New Roman", serif;
}

.root-game-daily-day.is-claimed {
  border-color: #8aa27f;
  background: #e6efe0;
}

.root-game-daily-day.is-claimed::after {
  position: absolute;
  top: 3px;
  right: 4px;
  content: "\2713";
  color: var(--forest);
  font-size: 10px;
  font-weight: 950;
}

.root-game-daily-day.is-current {
  border: 2px solid var(--coral-dark);
  background: #fff1e9;
}

.root-game-daily-day.is-milestone {
  background: #fff2c9;
}

.root-game-account {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.root-game-account [hidden] {
  display: none !important;
}

.root-game-account > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.root-game-account > div:first-child small,
.root-game-account h3,
.root-game-account p {
  margin: 0;
}

.root-game-account > div:first-child small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.root-game-account h3 {
  color: var(--forest);
  font: 700 16px/1.2 Georgia, "Times New Roman", serif;
}

.root-game-account [data-account-unclaimed],
.root-game-account [data-account-claimed] {
  display: grid;
  gap: 9px;
}

.root-game-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.root-game-account-actions a,
.root-game-account-signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 0;
  border-radius: 5px;
  padding: 8px 12px;
  background: var(--forest);
  color: white;
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.root-game-account-actions a.is-secondary,
.root-game-account-signout {
  background: transparent;
  color: var(--forest);
  box-shadow: inset 0 0 0 1px var(--line);
}

.root-game-account-signout {
  justify-self: start;
}

.root-game-account form {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr) auto;
  gap: 8px;
  align-items: end;
}

.root-game-account label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.root-game-account input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 10px;
  background: white;
  color: var(--ink);
  font: 700 12px/1 Arial, sans-serif;
}

.root-game-account form button,
.root-game-account-switch {
  min-height: 38px;
  border: 0;
  border-radius: 5px;
  padding: 0 13px;
  background: var(--forest);
  color: white;
  font-size: 10px;
  font-weight: 900;
}

.root-game-account-switch {
  justify-self: start;
  background: transparent;
  color: var(--forest);
  box-shadow: inset 0 0 0 1px var(--line);
}

.root-game-recovery {
  display: grid;
  gap: 5px;
  padding: 10px 0;
  border-block: 1px solid rgba(29, 69, 52, 0.13);
}

.root-game-recovery code {
  overflow-wrap: anywhere;
  color: var(--forest);
  font-size: 13px;
  font-weight: 900;
}

.root-game-recovery small,
.root-game-account-message {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.root-game-ledger {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.root-game-ledger > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.root-game-ledger > div small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.root-game-ledger ol {
  display: grid;
  max-height: 230px;
  gap: 0;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.root-game-ledger li {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(29, 69, 52, 0.13);
}

.root-game-ledger li > div {
  display: grid;
  gap: 2px;
}

.root-game-ledger li strong {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.root-game-ledger li small {
  color: var(--muted);
  font-size: 9px;
}

.root-game-ledger li > span {
  color: var(--forest);
  font-size: 10px;
  font-weight: 900;
  text-align: right;
  text-transform: none;
}

.root-game-ledger li.is-empty {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.root-game-shell:fullscreen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.root-game-shell.is-browser-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

html.root-game-browser-fullscreen,
html.root-game-browser-fullscreen body {
  overflow: hidden;
}

@media (max-width: 1050px) {
  :root {
    --panel-inset: 18px;
  }

  .root-game-market-body {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 250px);
  }

  .root-game-farm-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .root-game-tool-dock {
    justify-content: center;
  }

  .root-game-tool-group {
    grid-template-columns: repeat(4, minmax(76px, 1fr));
  }
}

@media (max-width: 760px) {
  :root {
    --panel-inset: 10px;
  }

  .root-game-daily-cycle {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }

  .root-game-daily-cycle small {
    text-align: left;
  }

  .root-game-daily-windows button {
    padding: 0 3px;
    font-size: 9px;
  }

  .root-game-daily-track {
    grid-template-columns: repeat(var(--reward-days, 7), 68px);
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: thin;
  }

  .root-game-land-levels {
    grid-template-columns: repeat(9, 76px);
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: thin;
  }

  .root-game-status {
    top: calc(var(--hud-top) + var(--hud-height) + 8px);
    left: var(--panel-inset);
    width: min(230px, calc(100% - 124px));
    padding: 9px 10px;
  }

  .root-game-status strong {
    font-size: 14px;
  }

  .root-game-status small {
    font-size: 9px;
  }

  .root-game-water-meter {
    margin-top: 3px;
    padding-top: 5px;
  }

  .root-game-water-meter > small {
    font-size: 8px;
  }

  .root-game-queue {
    top: calc(var(--hud-top) + var(--hud-height) + 8px);
    right: var(--panel-inset);
    width: 104px;
    gap: 0;
    padding: 0;
  }

  .root-game-queue-heading,
  .root-game-queue ol {
    display: none;
  }

  .root-game-queue-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 48px;
    align-items: center;
    gap: 5px;
    border: 0;
    border-radius: 8px;
    padding: 7px 8px;
    background: transparent;
    color: var(--forest);
    font-size: 9px;
    font-weight: 950;
    text-align: left;
    cursor: pointer;
  }

  .root-game-queue-toggle i {
    font-size: 15px;
  }

  .root-game-queue-toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .root-game-queue-toggle .ph-caret-down {
    transition: transform 160ms ease;
  }

  .root-game-queue.is-open {
    z-index: 16;
    top: calc(var(--hud-top) + var(--hud-height) + 112px);
    width: min(320px, calc(100% - 20px));
    gap: 7px;
    padding: 10px;
  }

  .root-game-queue.is-open .root-game-queue-heading,
  .root-game-queue.is-open ol {
    display: grid;
  }

  .root-game-queue.is-open .root-game-queue-toggle {
    min-height: 44px;
    border: 1px solid rgba(29, 69, 52, 0.14);
    background: rgba(255, 253, 247, 0.58);
  }

  .root-game-queue.is-open .root-game-queue-toggle .ph-caret-down {
    transform: rotate(180deg);
  }

  .root-game-queue.is-open ol {
    max-height: min(
      48vh,
      calc(var(--root-game-viewport-height, 100vh) - var(--hud-top) - var(--hud-height) - 334px)
    );
  }

  .root-game-queue-heading strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
  }

  .root-game-tool-dock {
    bottom: max(8px, env(safe-area-inset-bottom));
    width: calc(100% - 16px);
    min-height: 82px;
    gap: 5px;
    padding: 6px;
  }

  .root-game-tool-group {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .root-game-tool-dock button,
  .root-game-tool-dock .root-game-tool-link {
    min-height: 66px;
    padding: 5px;
  }

  .root-game-expand {
    flex-basis: 82px;
  }

  .root-game-structure-view {
    flex-basis: 62px;
  }

  .root-game-tool-icon {
    width: 32px;
    height: 32px;
  }

  .root-game-planting-tray {
    width: 100%;
    max-height: min(67vh, 470px);
    overflow-y: auto;
  }

  .root-game-farm-helper {
    grid-template-columns: minmax(0, 1fr);
  }

  .root-game-farm-helper > div:last-child {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .root-game-farm-helper button,
  .root-game-farm-helper button:disabled {
    min-width: 0;
    min-height: 32px;
  }

  .root-game-seed-options {
    max-height: min(224px, 34vh);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .root-game-selection {
    right: 8px;
    bottom: 106px;
    width: min(230px, calc(100% - 16px));
  }

  .root-game-task-progress {
    bottom: 112px;
    width: calc(100% - 16px);
    padding: 8px 10px;
  }

  .root-game-task-progress-copy strong {
    font-size: 13px;
  }

  .root-game-window {
    width: calc(100% - 16px);
    max-height: calc(100% - 16px);
  }

  .root-game-market-window {
    width: calc(100% - 16px);
  }

  .root-game-market-body {
    grid-template-areas:
      "featured"
      "sell"
      "calendar"
      "rail";
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 9px;
  }

  .root-game-market-rail {
    position: static;
    grid-template-columns: minmax(0, 1fr);
  }

  .root-game-market-featured,
  .root-game-market-sell,
  .root-game-market-calendar-section,
  .root-game-market-presence,
  .root-game-market-buy {
    padding: 12px;
  }

  .root-game-market-section-heading {
    display: grid;
    gap: 5px;
  }

  .root-game-market-section-heading > small {
    max-width: none;
    text-align: left;
  }

  .root-game-market-featured-list {
    grid-template-columns: 1fr;
  }

  .root-game-market-calendar {
    grid-template-columns: repeat(7, 92px);
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .root-game-market-presence ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .root-game-account form {
    grid-template-columns: 1fr;
  }

  .root-game-catalog {
    grid-template-columns: 1fr;
    padding: 8px;
  }

  .root-game-inventory-capacity {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "copy action"
      "track track"
      "note note";
    gap: 7px 10px;
  }

  .root-game-catalog-item {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 138px;
  }

  .root-game-catalog-item img {
    width: 72px;
    height: 72px;
  }

  .root-game-root-progress {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .root-game-root-progress-level {
    width: 58px;
    height: 58px;
  }

  .root-game-root-progress-level > img {
    width: 46px;
    height: 46px;
  }

  .root-game-root-progress-level strong {
    font-size: 26px;
  }

  .root-game-root-progress-focus {
    grid-column: 1 / -1;
    justify-content: flex-start;
    border-top: 1px solid rgba(29, 69, 52, 0.13);
    padding-top: 10px;
  }

  .root-game-level-roadmap {
    padding: 14px;
  }

  .root-game-level-roadmap > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .root-game-level-roadmap h3 {
    font-size: 20px;
  }

  .root-game-level-roadmap-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) and (max-height: 560px) {
  .root-game-queue.is-open {
    top: calc(var(--hud-top) + var(--hud-height) + 8px);
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 96px);
    height: auto;
    grid-template-rows: auto minmax(44px, 1fr);
    gap: 5px;
    padding: 8px;
  }

  .root-game-queue.is-open .root-game-queue-heading {
    display: none;
  }

  .root-game-queue.is-open ol {
    min-height: 44px;
    max-height: none;
  }
}

/* Mobile control refresh: four thumb-friendly primary destinations. The
   existing data hooks stay intact so desktop and game behavior do not fork. */
@media (max-width: 760px) {
  .root-game-tool-dock {
    display: block;
    min-height: 92px;
    padding: 7px;
  }

  .root-game-tool-scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
  }

  .root-game-tool-scroll .root-game-tool-group {
    display: contents;
    gap: 5px;
  }

  .root-game-tool-scroll .root-game-tool-group > * {
    flex: 0 0 66px;
    width: 66px;
    min-width: 66px;
    min-height: 72px;
    scroll-snap-align: start;
  }

  .root-game-tool-scroll .root-game-tool-group > * > b {
    font-size: 11px;
    line-height: 1.05;
  }

  .root-game-tool-scroll .root-game-tool-group > * > small {
    display: none;
  }

  .root-game-mobile-tool-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(182, 132, 44, 0.45);
    border-radius: 50%;
    color: #b6842c;
    font-size: 18px;
    line-height: 1;
  }

  .root-game-tool-scroll .root-game-tool-group > [data-toggle-tool-tray] .root-game-tool-icon,
  .root-game-tool-scroll .root-game-tool-group > [data-open-window="inventory"] .root-game-tool-icon {
    width: 30px;
    height: 30px;
  }

  .root-game-tool-scroll > .root-game-member-slot,
  .root-game-tool-scroll > .root-game-structure-view,
  .root-game-tool-scroll > .root-game-expand {
    display: grid;
    flex: 0 0 66px;
    width: 66px;
    min-width: 66px;
    min-height: 72px;
    scroll-snap-align: start;
  }

  .root-game-tool-shelf-heading {
    display: flex;
  }

  .root-game-tool-shelf-heading > span::after {
    content: "  Use arrows or swipe";
    color: #6d755d;
    font-size: 8px;
    font-weight: 700;
  }

  .root-game-tool-dock .root-game-tool-scroll-button {
    display: grid !important;
  }

  .root-game-tool-scroll-dots {
    display: flex !important;
  }

  /* Tutorial coaching may dim secondary controls, but the mobile shelf's
     arrows and swipe hint must remain visible so players know there is more. */
  .is-garden-tutorial-coaching .root-game-tool-scroll-button,
  .is-garden-tutorial-coaching .root-game-tool-scroll-dots,
  .is-garden-tutorial-coaching .root-game-tool-shelf-heading {
    display: flex !important;
    filter: none;
    opacity: 1;
    pointer-events: auto;
  }

  .is-garden-tutorial-coaching .root-game-tool-scroll-button {
    display: grid !important;
  }
}

@media (max-width: 520px) {
  .root-game-placement-controls {
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 96px);
    width: calc(100% - 16px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "adjustments"
      "actions";
    gap: 6px;
    padding: 8px;
  }

  .root-game-placement-adjustments,
  .root-game-placement-actions {
    width: 100%;
  }

  .root-game-placement-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  }

  .root-game-placement-nudge {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
  }

  .root-game-placement-controls button {
    min-width: 40px;
    min-height: 44px;
  }

  .root-game-placement-rotate {
    flex-basis: 88px;
  }

  .root-game-placement-cancel,
  .root-game-placement-confirm {
    width: 100%;
    min-width: 0 !important;
  }

  .root-game-purchase-confirmation-actions {
    grid-template-columns: 1fr;
  }

  .root-game-purchase-confirmation-actions button {
    min-height: 44px;
  }

  .root-game-room-options {
    grid-template-columns: 1fr;
  }

  .root-game-farm-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .root-game-tool-dock b {
    overflow-wrap: normal;
    font-size: 10px;
    word-break: normal;
  }

  .root-game-tool-dock small {
    display: none;
  }

  .root-game-tool-dock .root-game-expand small {
    display: block;
    font-size: 8px;
    white-space: normal;
  }

  .root-game-structure-view {
    flex-basis: 48px;
    padding-inline: 3px !important;
  }

  .root-game-structure-view-icon {
    width: 30px;
    height: 29px;
  }

  .root-game-structure-view-icon i {
    width: 27px;
  }

  .root-game-level-up-panel {
    padding: 25px 20px 24px;
  }

  .root-game-level-up-emblem {
    width: 92px;
    height: 92px;
  }

  .root-game-level-up-emblem img {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 420px) {
  .root-game-market-presence ul,
  .root-game-farm-list {
    grid-template-columns: 1fr;
  }

  .root-game-market-produce-list > article {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .root-game-market-produce-actions {
    grid-column: 1 / -1;
  }

  .root-game-market-produce-actions > button {
    flex: 1 1 0;
  }
}

@media (max-width: 359px) {
  .root-game-tool-group {
    grid-template-columns: repeat(4, minmax(44px, 1fr));
  }

  .root-game-tool-dock b {
    font-size: 9px;
  }

  .root-game-structure-view,
  .root-game-expand {
    flex-basis: 44px;
    padding-inline: 2px !important;
  }

  .root-game-tool-dock .root-game-expand small {
    display: none;
  }

  .root-game-structure-view-icon {
    width: 27px;
  }

  .root-game-structure-view-icon i {
    width: 25px;
  }
}

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

.root-game-placement-controls[data-contextual="true"],
.root-game-selection[data-contextual="true"] {
  right: auto;
  bottom: auto;
  max-width: calc(100% - 16px);
  transform: none;
}

.root-game-placement-controls[data-contextual="true"] {
  z-index: 18;
}

.root-game-selection[data-contextual="true"] {
  z-index: 17;
}

.root-game-placement-controls[data-contextual="true"] > *,
.root-game-selection[data-contextual="true"] > * {
  position: relative;
  z-index: 1;
}

.root-game-placement-controls[data-contextual="true"]::after,
.root-game-selection[data-contextual="true"]::after {
  position: absolute;
  z-index: 0;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 253, 247, 0.82);
  background: inherit;
  content: "";
  pointer-events: none;
  transform: rotate(45deg);
}

.root-game-placement-controls[data-anchor-side="above"]::after,
.root-game-selection[data-anchor-side="above"]::after {
  left: calc(var(--context-arrow-x) - 6px);
  bottom: -7px;
}

.root-game-placement-controls[data-anchor-side="below"]::after,
.root-game-selection[data-anchor-side="below"]::after {
  left: calc(var(--context-arrow-x) - 6px);
  top: -7px;
}

.root-game-placement-controls[data-anchor-side="right"]::after,
.root-game-selection[data-anchor-side="right"]::after {
  left: -7px;
  top: calc(var(--context-arrow-y) - 6px);
}

.root-game-placement-controls[data-anchor-side="left"]::after,
.root-game-selection[data-anchor-side="left"]::after {
  right: -7px;
  top: calc(var(--context-arrow-y) - 6px);
}

@media (max-width: 760px) {
  .root-game-selection {
    position: absolute;
    z-index: 19;
    top: auto !important;
    right: 8px !important;
    bottom: 102px !important;
    left: 8px !important;
    width: auto;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 10px;
    padding: 8px 9px;
    transform: none !important;
  }

  .root-game-selection::after {
    display: none;
  }

  .root-game-selection > span,
  .root-game-selection > small {
    display: none;
  }

  .root-game-selection > strong {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .root-game-selection-actions {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    gap: 5px;
    margin: 0;
  }

  .root-game-selection-actions button {
    min-width: 54px;
    min-height: 44px;
    padding: 5px 8px;
  }

  .root-game-selection-actions [data-selection-action="remove-soil"] {
    min-width: 132px;
  }

  .root-game-task-progress {
    bottom: 102px;
    width: calc(100% - 16px);
    gap: 5px;
    padding: 7px 9px;
  }

  .root-game-task-progress-copy span {
    font-size: 9px;
  }

  .root-game-task-progress-copy strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .root-game-task-progress-track {
    height: 5px;
  }

  .root-game-toast {
    top: auto;
    bottom: 172px;
    width: auto;
    max-width: calc(100% - 16px);
    padding: 7px 9px;
    font-size: 10px;
    line-height: 1.25;
    text-align: left;
  }

  .root-game-queue.is-open {
    top: calc(var(--hud-top) + var(--hud-height) + 66px);
    max-height: calc(var(--root-game-viewport-height, 100vh) - var(--hud-top) - var(--hud-height) - 180px);
  }

  .root-game-queue.is-open ol {
    max-height: min(38vh, 260px);
  }
}

@media (max-height: 520px) and (min-width: 600px) {
  .root-game-placement-controls {
    width: min(620px, calc(100% - 16px));
    grid-template-columns: minmax(120px, 1fr) auto auto;
    grid-template-areas: "copy adjustments actions";
    gap: 8px;
  }

  .root-game-placement-copy small,
  .root-game-selection small {
    display: none;
  }

  .root-game-placement-copy strong {
    font-size: 13px;
  }

  .root-game-selection {
    width: min(280px, calc(100% - 16px));
    padding: 9px 10px;
  }
}

/* Release-specific customer update notice */
.root-game-release-notes[hidden] {
  display: none !important;
}

.root-game-release-notes {
  position: absolute;
  z-index: 2147483500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 34px);
  overflow: auto;
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 226, 136, 0.26), transparent 30%),
    linear-gradient(145deg, rgba(6, 32, 25, 0.96), rgba(22, 68, 46, 0.94));
  backdrop-filter: blur(14px);
}

.root-game-release-notes__card {
  width: min(920px, 100%);
  max-height: calc(var(--root-game-viewport-height, 100vh) - clamp(24px, 6vw, 68px));
  overflow: auto;
  border: 1px solid rgba(255, 245, 210, 0.64);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 8%, rgba(240, 201, 101, 0.18), transparent 25%),
    #fffaf0;
  color: var(--forest);
  box-shadow: 0 34px 94px rgba(2, 24, 18, 0.56);
}

.root-game-release-notes__card:focus {
  outline: none;
}

.root-game-release-notes__header {
  display: grid;
  gap: 12px;
  padding: clamp(24px, 4vw, 46px) clamp(22px, 5vw, 54px) 20px;
}

.root-game-release-notes__brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.root-game-release-notes__brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.root-game-release-notes__brand span {
  display: grid;
  gap: 1px;
}

.root-game-release-notes__brand small {
  color: #8f6224;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.root-game-release-notes__brand strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}

.root-game-release-notes__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 4px 0 0;
  color: #697a70;
  font-size: 11px;
  font-weight: 800;
}

.root-game-release-notes__meta span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid rgba(173, 111, 35, 0.28);
  border-radius: 999px;
  background: #fff0bf;
  color: #86571d;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.root-game-release-notes__header h1 {
  max-width: 760px;
  margin: 0;
  color: #153d30;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 5vw, 55px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.root-game-release-notes__header > p:last-child {
  max-width: 680px;
  margin: 0;
  color: #5c6f65;
  font-size: 15px;
  line-height: 1.55;
}

.root-game-release-notes__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0 clamp(22px, 5vw, 54px) clamp(22px, 3vw, 34px);
  list-style: none;
}

.root-game-release-notes__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 11px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(31, 75, 57, 0.14);
  border-radius: 17px;
  background: rgba(255, 254, 248, 0.86);
  box-shadow: 0 10px 22px rgba(38, 70, 53, 0.07);
}

.root-game-release-notes__list li > span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  align-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e8f1dc;
  color: #35633b;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.root-game-release-notes__list li[data-release-change-kind="new"] > span {
  background: #d9eee5;
  color: #166248;
}

.root-game-release-notes__list li[data-release-change-kind="beta"] > span {
  background: #fff0bf;
  color: #86571d;
}

.root-game-release-notes__list li > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.root-game-release-notes__list strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.15;
}

.root-game-release-notes__list p {
  margin: 0;
  color: #627269;
  font-size: 12px;
  line-height: 1.48;
}

.root-game-release-notes__footer {
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 20px clamp(22px, 5vw, 54px) clamp(24px, 4vw, 42px);
  border-top: 1px solid rgba(31, 75, 57, 0.14);
  background: rgba(246, 239, 223, 0.68);
}

.root-game-release-notes__footer button {
  min-height: 52px;
  padding: 12px 24px;
  border: 1px solid #123b2e;
  border-radius: 999px;
  background: #173f32;
  color: #fffaf0;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(22, 62, 48, 0.2);
}

.root-game-release-notes__footer button:hover {
  background: #0f3328;
  transform: translateY(-1px);
}

.root-game-release-notes__footer small {
  max-width: 520px;
  color: #697a70;
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .root-game-release-notes {
    align-items: start;
    padding: 10px;
  }

  .root-game-release-notes__card {
    max-height: calc(var(--root-game-viewport-height, 100vh) - 20px);
    border-radius: 22px;
  }

  .root-game-release-notes__header {
    gap: 10px;
    padding: 22px 18px 16px;
  }

  .root-game-release-notes__header h1 {
    font-size: clamp(31px, 10vw, 42px);
  }

  .root-game-release-notes__list {
    grid-template-columns: 1fr;
    padding: 0 18px 20px;
  }

  .root-game-release-notes__footer {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .root-game-release-notes__footer button {
    width: 100%;
  }
}

/* Account-free Garden welcome and guided first-play lesson */
.root-garden-intro[hidden],
.root-garden-tutorial-guide[hidden],
.root-garden-tutorial-backdrop[hidden] {
  display: none !important;
}

.root-garden-intro {
  position: absolute;
  z-index: 2147483100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 36px);
  overflow: auto;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 229, 143, 0.32), transparent 28%),
    linear-gradient(145deg, rgba(9, 39, 31, 0.94), rgba(30, 74, 50, 0.92));
  backdrop-filter: blur(12px);
}

.root-garden-intro-card {
  display: grid;
  width: min(1060px, 100%);
  min-height: min(680px, calc(var(--root-game-viewport-height, 100vh) - 48px));
  max-height: 820px;
  grid-template-columns: minmax(300px, 0.94fr) minmax(410px, 1.22fr);
  overflow: hidden;
  border: 1px solid rgba(255, 246, 215, 0.54);
  border-radius: 30px;
  background: #fffaf0;
  box-shadow: 0 34px 90px rgba(3, 26, 20, 0.48);
}

.root-garden-intro-art {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, #cbe3b8 0%, #ebedbb 43%, #86a85e 44%, #345b3c 100%);
}

.root-garden-intro-sun {
  position: absolute;
  top: 8%;
  left: 12%;
  width: 110px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 239, 177, 0.9);
  box-shadow: 0 0 70px rgba(255, 225, 130, 0.74);
}

.root-garden-intro-hills {
  position: absolute;
  right: -16%;
  bottom: 10%;
  left: -16%;
  height: 44%;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(238, 238, 183, 0.8) 0 7%, transparent 8%),
    linear-gradient(155deg, #709151, #294e36);
  transform: rotate(-4deg);
}

.root-garden-intro-art > img {
  position: absolute;
  z-index: 2;
  right: -4%;
  bottom: -8%;
  width: 92%;
  height: 94%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 24px 30px rgba(15, 47, 34, 0.28));
}

.root-garden-intro-art-copy {
  position: absolute;
  z-index: 3;
  bottom: 24px;
  left: 24px;
  display: grid;
  gap: 3px;
  max-width: 240px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 250, 240, 0.56);
  border-radius: 16px;
  background: rgba(20, 59, 43, 0.82);
  color: #fffaf0;
  box-shadow: 0 16px 34px rgba(15, 44, 33, 0.24);
  backdrop-filter: blur(9px);
}

.root-garden-intro-art-copy small {
  color: #f7d887;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.root-garden-intro-art-copy strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.08;
}

.root-garden-intro-content {
  display: grid;
  min-height: 0;
  overflow: auto;
  padding: clamp(30px, 5vw, 64px);
}

.root-garden-intro-content > section {
  align-self: center;
  width: 100%;
  max-width: 590px;
  margin: auto;
}

.root-garden-intro-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 34px;
  color: var(--forest);
}

.root-garden-intro-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.root-garden-intro-brand span {
  display: grid;
  gap: 1px;
}

.root-garden-intro-brand small,
.root-garden-intro-kicker {
  color: #8f6224;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.root-garden-intro-brand strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}

.root-garden-intro-kicker {
  margin: 0 0 9px;
}

.root-garden-intro-kicker span {
  color: var(--forest);
}

.root-garden-intro-content h1,
.root-garden-intro-content h2 {
  max-width: 560px;
  margin: 0;
  color: #173f32;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(35px, 4.5vw, 55px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.root-garden-intro-content [data-intro-heading]:focus {
  outline: none;
}

.root-garden-intro-content h2 {
  font-size: clamp(31px, 4vw, 46px);
}

.root-garden-intro-content h2 span {
  color: #a65c39;
}

.root-garden-intro-content h1 + p,
.root-garden-intro-content h2 + p {
  max-width: 540px;
  margin: 18px 0 26px;
  color: #52665c;
  font-size: 15px;
  line-height: 1.62;
}

.root-garden-intro-content form {
  display: grid;
  gap: 14px;
}

.root-garden-intro-content form > label,
.root-garden-custom-identity > span {
  color: #244d3e;
  font-size: 12px;
  font-weight: 850;
}

.root-garden-intro-content input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 11px 14px;
  border: 1px solid rgba(30, 77, 59, 0.28);
  border-radius: 13px;
  background: #fffef9;
  color: var(--forest);
  font: inherit;
  font-size: 16px;
  box-shadow: inset 0 1px 2px rgba(23, 63, 50, 0.06);
}

.root-garden-intro-content input[type="text"]:focus {
  border-color: #bd7a2a;
  outline: 3px solid rgba(236, 195, 96, 0.24);
}

.root-garden-intro-error {
  min-height: 16px;
  color: #a1392f;
  font-size: 11px;
  font-weight: 800;
}

.root-garden-intro-primary,
.root-garden-intro-secondary,
.root-garden-tutorial-guide-actions button {
  min-height: 48px;
  padding: 11px 18px;
  border: 1px solid #173f32;
  border-radius: 999px;
  background: #173f32;
  color: #fffaf0;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(22, 62, 48, 0.18);
}

.root-garden-intro-secondary,
.root-garden-tutorial-guide-actions .is-secondary {
  border-color: rgba(23, 63, 50, 0.22);
  background: #fffaf0;
  color: #173f32;
  box-shadow: none;
}

.root-garden-intro-text-button {
  width: max-content;
  margin: 14px auto 0;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: #456357;
  font-size: 12px;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.root-garden-intro-privacy {
  display: block;
  max-width: 480px;
  margin: 17px auto 0;
  color: #75837c;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

.root-garden-intro-actions {
  display: grid;
  grid-template-columns: minmax(112px, 0.42fr) minmax(190px, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.root-garden-identity-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}

.root-garden-identity-options legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.root-garden-identity-options label {
  position: relative;
  display: block;
  min-width: 0;
}

.root-garden-identity-options label:last-child {
  grid-column: 1 / -1;
}

.root-garden-identity-options input {
  position: absolute;
  opacity: 0;
}

.root-garden-identity-options label > span {
  display: grid;
  min-height: 68px;
  align-content: center;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(23, 63, 50, 0.17);
  border-radius: 14px;
  background: #fffdf7;
  color: #173f32;
  cursor: pointer;
}

.root-garden-identity-options label > span strong {
  font-size: 13px;
}

.root-garden-identity-options label > span small {
  overflow: hidden;
  color: #708078;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-garden-identity-options input:checked + span {
  border-color: #bd7a2a;
  background: #fff5d8;
  box-shadow: 0 0 0 3px rgba(221, 174, 70, 0.18);
}

.root-garden-identity-options input:focus-visible + span {
  outline: 3px solid #d4933b;
  outline-offset: 2px;
}

.root-garden-custom-identity {
  display: grid;
  gap: 7px;
}

.root-garden-character-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: min(46vh, 480px);
  padding: 2px 5px 2px 2px;
  overflow-y: auto;
  scrollbar-color: rgba(91, 116, 74, 0.6) transparent;
}

.root-garden-character-option {
  position: relative;
  display: grid;
  min-height: 124px;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 12px 10px 9px;
  border: 2px solid rgba(23, 63, 50, 0.18);
  border-radius: 22px;
  background: linear-gradient(135deg, #fffef9, #f3efdc);
  color: #173f32;
  text-align: left;
}

.root-garden-character-option.is-selected {
  border-color: #bd7a2a;
  background: linear-gradient(135deg, #fff8df, #edf2d5);
  box-shadow: 0 12px 28px rgba(68, 84, 46, 0.15), inset 0 0 0 2px rgba(255, 255, 255, 0.74);
}

.root-garden-character-portrait {
  display: block;
  height: 102px;
  overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 25%, #f5dda4, #88a864);
}

.root-garden-character-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.root-garden-character-option > span:nth-child(2) {
  display: grid;
  gap: 4px;
}

.root-garden-character-option small {
  color: #9a6721;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.root-garden-character-option strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
}

.root-garden-character-option em {
  color: #65766d;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.root-garden-character-option > i {
  color: #a76b24;
  font-size: 26px;
}

.root-garden-character-promise {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid rgba(23, 63, 50, 0.14);
  border-radius: 15px;
  background: #eff2e2;
  color: #486156;
}

.root-garden-character-promise > i {
  color: #bd7a2a;
  font-size: 24px;
}

.root-garden-character-promise p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.root-garden-character-promise strong {
  color: #173f32;
}

.root-garden-tutorial-backdrop {
  position: absolute;
  z-index: 2147483080;
  inset: 0;
  background: rgba(7, 31, 24, 0.48);
  backdrop-filter: blur(3px);
}

.root-garden-tutorial-backdrop[data-mode="spotlight"] {
  inset: auto;
  left: var(--tutorial-spotlight-left);
  top: var(--tutorial-spotlight-top);
  width: var(--tutorial-spotlight-width);
  height: var(--tutorial-spotlight-height);
  border: 3px solid rgba(255, 232, 132, 0.96);
  border-radius: 14px;
  background: transparent;
  box-shadow:
    0 0 0 9999px rgba(7, 31, 24, 0.74),
    0 0 0 6px rgba(239, 208, 107, 0.2),
    0 10px 30px rgba(4, 24, 18, 0.38);
  pointer-events: none;
  backdrop-filter: none;
  transition:
    left 180ms ease,
    top 180ms ease,
    width 180ms ease,
    height 180ms ease;
}

.root-garden-tutorial-guide {
  position: absolute;
  z-index: 2147483090;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(112px, calc(96px + env(safe-area-inset-bottom)));
  display: grid;
  width: min(590px, calc(100% - 36px));
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 15px;
  padding: 15px;
  border: 1px solid rgba(255, 247, 218, 0.76);
  border-radius: 22px;
  background:
    linear-gradient(120deg, rgba(255, 252, 240, 0.98), rgba(243, 239, 217, 0.97));
  color: #173f32;
  box-shadow: 0 24px 52px rgba(8, 40, 29, 0.38);
  backdrop-filter: blur(14px);
}

.is-garden-tutorial-blocking .root-garden-tutorial-guide {
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
}

.root-garden-tutorial-guide-portrait {
  position: relative;
  align-self: stretch;
  min-height: 116px;
  overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 22%, #efd994, #5f874c 65%, #31573a);
}

.root-garden-tutorial-guide-portrait img {
  position: absolute;
  top: 2px;
  left: 0;
  width: 200%;
  max-width: none;
  height: auto;
}

.root-garden-tutorial-guide-portrait span {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(22, 62, 48, 0.88);
  color: #fff7de;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.root-garden-tutorial-guide-copy {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.root-garden-tutorial-guide-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.root-garden-tutorial-guide-meta small {
  overflow: hidden;
  color: #996421;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.11em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.root-garden-tutorial-guide-meta span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e7ead5;
  color: #496154;
  font-size: 9px;
  font-weight: 900;
}

.root-garden-tutorial-guide h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(21px, 2.4vw, 29px);
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.root-garden-tutorial-guide p {
  margin: 0;
  color: #53675d;
  font-size: 12px;
  line-height: 1.48;
}

.root-garden-tutorial-hint {
  color: #748078;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.35;
}

.root-garden-tutorial-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}

.root-garden-tutorial-guide-actions button {
  min-height: 39px;
  padding: 8px 14px;
  font-size: 11px;
}

.root-garden-tutorial-guide[data-waiting="growth"] [data-tutorial-action] {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-color: rgba(23, 63, 50, 0.2);
  background: #e8f0df;
  color: #173f32;
  box-shadow: none;
  cursor: progress;
  opacity: 1;
}

.root-garden-tutorial-guide[data-waiting="growth"] [data-tutorial-action]::before {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 2px solid rgba(23, 63, 50, 0.24);
  border-top-color: #bd7a2a;
  border-radius: 50%;
  content: "";
  animation: root-garden-growth-wait-spin 800ms linear infinite;
}

.is-garden-tutorial-target {
  position: relative;
  z-index: 212 !important;
  animation: root-garden-tutorial-pulse 1.4s ease-in-out infinite;
  box-shadow:
    0 0 0 4px rgba(255, 232, 138, 0.92),
    0 0 0 9px rgba(244, 198, 75, 0.28),
    0 14px 30px rgba(63, 44, 12, 0.26) !important;
}

.root-game-catalog-item.is-garden-tutorial-target {
  border-color: #d6922e;
  background: #fff7d7;
}

@keyframes root-garden-tutorial-pulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.07);
  }
}

@media (max-width: 760px) {
  .root-garden-intro {
    align-items: start;
    padding: 8px;
  }

  .root-garden-intro-card {
    min-height: calc(var(--root-game-viewport-height, 100vh) - 16px);
    max-height: none;
    grid-template-columns: 1fr;
    grid-template-rows: 190px minmax(0, 1fr);
    border-radius: 22px;
  }

  .root-garden-intro-art > img {
    right: 1%;
    bottom: -78%;
    width: 55%;
    height: 180%;
  }

  .root-garden-intro-art-copy {
    bottom: 13px;
    left: 13px;
    max-width: 180px;
    padding: 9px 11px;
  }

  .root-garden-intro-art-copy strong {
    font-size: 16px;
  }

  .root-garden-intro-content {
    padding: 25px 20px calc(26px + env(safe-area-inset-bottom));
  }

  .root-garden-intro-brand {
    margin-bottom: 20px;
  }

  .root-garden-intro-content h1 {
    font-size: clamp(34px, 11vw, 46px);
  }

  .root-garden-intro-content h2 {
    font-size: clamp(30px, 9.5vw, 40px);
  }

  .root-garden-identity-options {
    grid-template-columns: 1fr;
  }

  .root-garden-identity-options label:last-child {
    grid-column: auto;
  }

  .root-garden-identity-options label > span {
    min-height: 59px;
  }

  .root-garden-character-options {
    grid-template-columns: 1fr;
    max-height: 46vh;
  }

  .root-garden-character-option {
    min-height: 142px;
    grid-template-columns: 94px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px;
  }

  .root-garden-character-portrait {
    height: 122px;
  }

  .root-garden-character-option strong {
    font-size: 23px;
  }

  .root-garden-tutorial-guide {
    top: calc(74px + env(safe-area-inset-top));
    right: 8px;
    bottom: auto;
    left: 8px;
    width: auto;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
    border-radius: 17px;
  }

  .is-garden-tutorial-blocking .root-garden-tutorial-guide {
    top: 50%;
    right: 8px;
    bottom: auto;
    left: 8px;
    transform: translateY(-50%);
  }

  .root-garden-tutorial-guide-portrait {
    min-height: 90px;
  }

  .root-garden-tutorial-guide h2 {
    font-size: 20px;
  }

  .root-garden-tutorial-guide p {
    font-size: 11px;
  }

  .root-garden-tutorial-guide-actions button {
    min-height: 44px;
  }
}

@media (max-height: 640px) and (min-width: 761px) {
  .root-garden-intro {
    padding: 9px;
  }

  .root-garden-intro-card {
    min-height: calc(var(--root-game-viewport-height, 100vh) - 18px);
  }

  .root-garden-intro-content {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .root-garden-intro-brand {
    margin-bottom: 18px;
  }

  .root-garden-intro-content h1 + p,
  .root-garden-intro-content h2 + p {
    margin-top: 10px;
    margin-bottom: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-garden-tutorial-target {
    animation: none;
  }
}

/* Living Water Veil onboarding and Priya handoff */
.root-garden-intro-water[hidden],
.root-garden-intro-clouds[hidden] {
  display: none !important;
}

.root-garden-intro {
  align-items: center;
  padding: clamp(10px, 2.2vw, 28px);
  background: #173f32;
  backdrop-filter: none;
}

.root-garden-intro-card {
  width: min(1220px, 100%);
  min-height: min(720px, calc(var(--root-game-viewport-height, 100vh) - 34px));
  max-height: min(860px, calc(var(--root-game-viewport-height, 100vh) - 24px));
  grid-template-columns: minmax(560px, 1.42fr) minmax(340px, 0.82fr);
  border-color: rgba(255, 246, 215, 0.7);
  border-radius: 34px;
  background: #fffaf0;
  box-shadow: 0 36px 100px rgba(3, 26, 20, 0.56);
}

.root-garden-intro-content {
  position: relative;
  align-content: start;
  padding: clamp(26px, 4vw, 54px);
  background: #fffaf0;
}

.root-garden-intro-content:has([data-intro-screen="character"]:not([hidden])) {
  padding-block: clamp(24px, 3vw, 38px);
}

.root-garden-intro-brand {
  margin-bottom: 18px;
}

.root-garden-intro-progress {
  display: grid;
  gap: 6px;
  margin: 0 0 30px;
}

.root-garden-intro-progress span {
  color: #8f6224;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.root-garden-intro-progress progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #e5e5d2;
  color: #bd7a2a;
}

.root-garden-intro-progress progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #e5e5d2;
}

.root-garden-intro-progress progress::-webkit-progress-value {
  border-radius: 999px;
  background: #bd7a2a;
}

.root-garden-intro-progress progress::-moz-progress-bar {
  border-radius: 999px;
  background: #bd7a2a;
}

.root-garden-intro-status {
  min-height: 18px;
  margin: -22px 0 9px;
  color: #6e7d74;
  font-size: 10px;
  font-weight: 800;
}

.root-garden-intro-content > section {
  align-self: start;
  max-width: 700px;
  margin: 0;
}

.root-garden-intro-content h1,
.root-garden-intro-content h2 {
  max-width: 650px;
}

.root-garden-intro-content h1 {
  font-size: clamp(40px, 4.8vw, 64px);
}

.root-garden-intro-content h2 {
  font-size: clamp(34px, 4vw, 52px);
}

.root-garden-intro-art {
  isolation: isolate;
  background-color: #7fa169;
  background-image: url("/assets/live-rooted/root-garden-hero.png");
  background-position: center;
  background-size: cover;
}

.root-garden-intro-art::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(22, 63, 50, 0.15);
  content: "";
}

.root-garden-intro-art > img {
  z-index: 2;
  right: -6%;
  bottom: -3%;
  width: 78%;
  height: 78%;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 24px 30px rgba(15, 47, 34, 0.38));
}

.root-garden-intro-art-copy {
  z-index: 3;
  right: 20px;
  bottom: 20px;
  left: 20px;
  max-width: none;
  background: rgba(20, 59, 43, 0.9);
}

.root-garden-character-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  max-height: min(35vh, 340px);
}

.root-garden-character-option {
  min-height: 224px;
  grid-template-columns: 1fr auto;
  grid-template-rows: 126px auto;
  align-items: start;
  gap: 8px;
  padding: 8px;
  border-radius: 19px;
  background: #fffef9;
  cursor: pointer;
}

.root-garden-character-option[hidden] {
  display: none !important;
}

.root-garden-custom-identity[hidden] {
  display: none !important;
}

.root-garden-character-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.root-garden-character-option:has(input:focus-visible) {
  outline: 3px solid #d4933b;
  outline-offset: 2px;
}

.root-garden-character-option > .root-garden-character-portrait {
  display: block;
  grid-column: 1 / -1;
  grid-row: 1;
  height: 126px;
  background: #e8ecd7;
}

.root-garden-character-option > [data-character-copy] {
  display: grid;
  min-width: 0;
  grid-column: 1;
  grid-row: 2;
  gap: 3px;
}

.root-garden-character-option > i {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  font-size: 21px;
}

.root-garden-character-option strong {
  font-size: 19px;
}

.root-garden-character-option em {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.root-garden-intro-water,
.root-garden-intro-clouds {
  position: absolute;
  z-index: 2147483120;
  inset: -3%;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(-118%, 0, 0);
  will-change: opacity, transform;
}

.root-garden-intro-water {
  background: #f8f3df;
}

.root-garden-intro-clouds {
  z-index: 2147483130;
  background: #fffaf0;
  transform: scale(1.08);
}

.root-garden-intro-water img,
.root-garden-intro-clouds img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.root-garden-intro-clouds img {
  filter: saturate(0.72);
}

@media (max-width: 900px) {
  .root-garden-intro-card {
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  }

  .root-garden-character-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .root-garden-intro {
    align-items: start;
    padding: 7px;
  }

  .root-garden-intro-card {
    min-height: calc(var(--root-game-viewport-height, 100vh) - 14px);
    max-height: none;
    grid-template-columns: 1fr;
    grid-template-rows: 158px minmax(0, 1fr);
    border-radius: 22px;
  }

  .root-garden-intro-art {
    grid-column: 1;
    grid-row: 1;
    min-height: 158px;
  }

  .root-garden-intro-art > img {
    right: 0;
    bottom: -38%;
    width: 43%;
    height: 148%;
  }

  .root-garden-intro-art-copy {
    right: 46%;
    bottom: 12px;
    left: 12px;
  }

  .root-garden-intro-content {
    grid-column: 1;
    grid-row: 2;
    padding: 22px 18px calc(24px + env(safe-area-inset-bottom));
  }

  .root-garden-intro-brand {
    margin-bottom: 12px;
  }

  .root-garden-intro-progress {
    margin-bottom: 23px;
  }

  .root-garden-intro-status {
    margin-top: -17px;
  }

  .root-garden-intro-content h1 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .root-garden-intro-content h2 {
    font-size: clamp(31px, 9vw, 42px);
  }

  .root-garden-character-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 45vh;
  }

  .root-garden-character-option {
    min-height: 190px;
    grid-template-columns: 1fr auto;
    grid-template-rows: 112px auto;
  }

  .root-garden-character-option > .root-garden-character-portrait {
    height: 112px;
  }

  .root-garden-character-option strong {
    font-size: 18px;
  }

  .root-garden-intro-water,
  .root-garden-intro-clouds {
    inset: -5%;
  }
}

@media (max-width: 430px) {
  .root-garden-character-options {
    grid-template-columns: 1fr;
  }

  .root-garden-character-option {
    min-height: 150px;
    grid-template-columns: 106px minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
  }

  .root-garden-character-option > .root-garden-character-portrait {
    height: 132px;
    grid-column: 1;
    grid-row: 1;
  }

  .root-garden-character-option > [data-character-copy] {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .root-garden-character-option > i {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .root-garden-intro-water,
  .root-garden-intro-clouds {
    transition: none !important;
  }
}

/* Mobile HUD option 3: a compact, swipeable tool shelf with a persistent location chip. */
.root-game-mobile-location,
.root-game-tool-shelf-heading,
.root-game-tool-scroll-dots {
  display: none;
}

.root-game-tool-dock .root-game-tool-scroll-button {
  display: none;
}

.root-game-tool-scroll {
  display: contents;
}

.root-game-member-slot {
  position: relative;
  display: flex;
  flex: 0 0 92px;
  min-width: 92px;
  align-items: stretch;
}

.root-game-member-signin,
.root-game-member-slot > .lrl-member-shell--game,
.root-game-member-slot .lrl-member-shell__trigger {
  width: 100%;
  min-width: 0;
}

.root-game-member-signin {
  display: grid;
  min-height: 66px;
  place-content: center;
  gap: 3px;
  border: 1px solid rgba(32, 79, 57, 0.2);
  border-radius: 7px;
  padding: 6px;
  background: #fffdf7;
  color: var(--forest);
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 rgba(48, 89, 59, 0.08);
}

.root-game-member-signin:hover {
  border-color: rgba(71, 115, 63, 0.62);
  background: #f0f5e7;
}

.root-game-member-signin > i {
  color: #b6842c;
  font-size: 30px;
  line-height: 1;
}

.root-game-member-slot > .lrl-member-shell--game {
  position: relative;
  top: auto;
  right: auto;
  display: flex;
  align-items: stretch;
}

.root-game-member-slot .lrl-member-shell__trigger {
  position: relative;
  display: grid;
  min-height: 66px;
  grid-template-columns: 1fr;
  place-content: center;
  justify-items: center;
  gap: 3px;
  border-color: rgba(32, 79, 57, 0.2);
  border-radius: 7px;
  padding: 5px 6px;
  background: linear-gradient(180deg, #fffaf0, #f3ead3);
  box-shadow: inset 0 -3px 0 rgba(48, 89, 59, 0.08);
}

.root-game-member-slot .lrl-member-shell__trigger:hover {
  border-color: rgba(182, 132, 44, 0.72);
  background: #fff8e2;
  box-shadow: inset 0 -3px 0 rgba(48, 89, 59, 0.08);
  transform: none;
}

.root-game-member-slot .lrl-member-shell__avatar {
  width: 31px;
  height: 31px;
  flex-basis: 31px;
  font-size: 14px;
}

.root-game-member-slot .lrl-member-shell__identity {
  display: grid;
  max-width: 100%;
  justify-items: center;
  gap: 1px;
}

.root-game-member-slot .lrl-member-shell__identity strong,
.root-game-member-slot .lrl-member-shell__identity small {
  max-width: 100%;
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-game-member-slot .lrl-member-shell__identity strong {
  font-size: 10px;
}

.root-game-member-slot .lrl-member-shell__identity small {
  font-size: 7px;
  letter-spacing: 0.04em;
}

.root-game-member-slot .lrl-member-shell__caret {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  font-size: 11px;
}

@media (max-width: 760px) {
  .root-game-status {
    width: min(222px, calc(100% - 124px));
  }

  .root-game-status .root-game-status-location {
    display: none;
  }

  .root-game-mobile-location {
    position: absolute;
    z-index: 14;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 120px);
    left: 12px;
    display: inline-flex;
    min-height: 27px;
    max-width: calc(100% - 24px);
    align-items: center;
    gap: 4px;
    overflow: hidden;
    border: 1px solid rgba(231, 197, 101, 0.62);
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(20, 64, 48, 0.94);
    color: #fff8df;
    box-shadow: 0 8px 20px rgba(8, 35, 27, 0.28);
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
    backdrop-filter: blur(10px);
  }

  .root-game-mobile-location i {
    flex: 0 0 auto;
    color: #e8bf55;
    font-size: 13px;
  }

  .root-game-mobile-location b {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .root-game-mobile-location span {
    flex: 0 0 auto;
    color: rgba(255, 248, 223, 0.68);
  }

  .root-game-tool-dock {
    bottom: max(8px, env(safe-area-inset-bottom));
    display: grid;
    width: calc(100% - 16px);
    min-height: 108px;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    grid-template-rows: 20px 68px 8px;
    align-items: stretch;
    gap: 4px;
    padding: 6px;
  }

  .root-game-tool-shelf-heading {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-inline: 4px;
    color: var(--forest);
  }

  .root-game-tool-shelf-heading > span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .root-game-tool-shelf-heading > span i {
    color: #a96f18;
    font-size: 15px;
  }

  .root-game-tool-shelf-heading > small {
    flex: 0 0 auto;
    color: #6d755d;
    font-size: 8px;
    text-transform: uppercase;
  }

  .root-game-tool-scroll {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    min-width: 0;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  .root-game-tool-scroll::-webkit-scrollbar {
    display: none;
  }

  .root-game-tool-scroll:focus-visible {
    border-radius: 8px;
    outline: 3px solid #ffd66b;
    outline-offset: 1px;
  }

  .root-game-tool-scroll .root-game-tool-group {
    display: contents;
  }

  .root-game-tool-dock > .root-game-member-slot {
    position: absolute;
    z-index: 9;
    top: 24px;
    right: 40px;
    display: flex;
    width: 60px;
    min-width: 60px;
    height: 54px;
    min-height: 54px;
    flex: 0 0 60px;
    align-items: stretch;
    border-radius: 8px;
    background: #f6efdf;
    box-shadow: -6px 0 9px rgba(246, 239, 223, 0.95);
  }

  .root-game-tool-scroll .root-game-tool-group > *,
  .root-game-tool-scroll > .root-game-member-slot,
  .root-game-tool-scroll > .root-game-structure-view,
  .root-game-tool-scroll > .root-game-expand {
    flex: 0 0 82px;
    width: 82px;
    min-width: 82px;
    min-height: 66px;
    scroll-snap-align: start;
  }

  .root-game-tool-scroll > .root-game-expand {
    flex-basis: 98px;
    width: 98px;
    min-width: 98px;
  }

  .root-game-tool-dock .root-game-tool-scroll-button {
    z-index: 2;
    grid-row: 2;
    display: grid;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    align-self: center;
    place-items: center;
    border-color: rgba(255, 250, 224, 0.74);
    border-radius: 50%;
    padding: 0;
    background: var(--forest);
    color: #fffdf7;
    box-shadow: 0 4px 10px rgba(13, 44, 36, 0.24);
  }

  .root-game-tool-scroll-button.is-previous {
    grid-column: 1;
  }

  .root-game-tool-scroll-button.is-next {
    grid-column: 3;
  }

  .root-game-tool-scroll-button i {
    font-size: 22px;
  }

  .root-game-tool-dock .root-game-tool-scroll-button:disabled {
    border-color: rgba(29, 69, 52, 0.13);
    background: rgba(255, 253, 247, 0.78);
    color: rgba(29, 69, 52, 0.34);
    box-shadow: none;
    opacity: 1;
  }

  .root-game-tool-scroll-dots {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .root-game-tool-scroll-dots i {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(29, 69, 52, 0.25);
    transition: width 160ms ease, background-color 160ms ease;
  }

  .root-game-tool-scroll-dots i.is-active {
    width: 15px;
    background: #b6842c;
  }

  .root-game-selection {
    bottom: 151px !important;
  }

  .root-game-task-progress {
    bottom: 151px;
  }

  .root-game-toast {
    bottom: 205px;
  }

  .root-game-placement-controls {
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 143px);
  }
}

@media (max-width: 390px) {
  .root-game-tool-shelf-heading > small {
    display: none;
  }

  .root-game-tool-scroll .root-game-tool-group > *,
  .root-game-tool-scroll > .root-game-member-slot,
  .root-game-tool-scroll > .root-game-structure-view {
    flex-basis: 66px;
    width: 66px;
    min-width: 66px;
  }

  .root-game-tool-scroll > .root-game-expand {
    flex-basis: 84px;
    width: 84px;
    min-width: 84px;
  }
}

@media (max-width: 760px) and (max-height: 560px) {
  .root-game-queue.is-open {
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 118px);
  }
}

/* Priya's conversational tool coach */
.root-garden-tutorial-recall[hidden],
.root-garden-tutorial-coach-card[hidden],
.root-garden-tutorial-pointer[hidden] {
  display: none !important;
}

.root-garden-tutorial-coach-card {
  position: absolute;
  z-index: 2147483091;
  top: max(110px, calc(92px + env(safe-area-inset-top)));
  left: 50%;
  display: grid;
  width: min(470px, calc(100% - 28px));
  gap: 5px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 240, 177, 0.96);
  border-radius: 18px;
  padding: 14px 16px 15px;
  background: linear-gradient(145deg, rgba(255, 251, 232, 0.99), rgba(242, 246, 218, 0.99));
  color: #173f32;
  box-shadow: 0 16px 34px rgba(6, 34, 25, 0.34);
  text-align: left;
}

.root-garden-tutorial-coach-card-arrow {
  position: absolute;
  top: -18px;
  left: var(--tutorial-coach-anchor-left, 50%);
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #efd06b;
  color: #173f32;
  box-shadow: 0 6px 16px rgba(6, 34, 25, 0.28);
  font-size: 19px;
  font-weight: 950;
}

.root-garden-tutorial-coach-card small {
  color: #8a4c1b;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.root-garden-tutorial-coach-card strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.08;
}

.root-garden-tutorial-coach-card p {
  margin: 0;
  color: #405c50;
  font-size: 12px;
  line-height: 1.42;
}

.root-garden-tutorial-coach-card button {
  justify-self: start;
  min-height: 38px;
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  padding: 9px 15px;
  background: #174c39;
  color: #fff8df;
  font-weight: 950;
}

.root-garden-tutorial-coach-card button:hover,
.root-garden-tutorial-coach-card button:focus-visible {
  background: #23674f;
  box-shadow: 0 0 0 3px rgba(239, 208, 107, 0.48);
}

.root-garden-tutorial-recall {
  position: absolute;
  z-index: 2147483091;
  top: max(82px, calc(66px + env(safe-area-inset-top)));
  right: max(18px, env(safe-area-inset-right));
  display: grid;
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 240, 177, 0.92);
  border-radius: 999px;
  padding: 7px 15px 7px 9px;
  background: linear-gradient(135deg, rgba(22, 76, 57, 0.98), rgba(14, 57, 43, 0.98));
  color: #fff8df;
  box-shadow: 0 12px 28px rgba(6, 34, 25, 0.34);
  text-align: left;
}

.root-garden-tutorial-recall > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #efd06b;
  color: #173f32;
  font-size: 20px;
}

.root-garden-tutorial-recall > span {
  display: grid;
  gap: 1px;
}

.root-garden-tutorial-recall small {
  color: #efd06b;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.root-garden-tutorial-recall strong {
  font-size: 11px;
  line-height: 1.15;
}

.root-garden-tutorial-pointer {
  position: absolute;
  z-index: 2147483088;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
  transform: translate(-50%, -100%);
  animation: root-garden-tutorial-pointer-bob 900ms ease-in-out infinite alternate;
}

.root-garden-tutorial-pointer[data-placement="below"] {
  flex-direction: column-reverse;
  transform: translateX(-50%);
}

.root-garden-tutorial-pointer strong {
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  border: 1px solid rgba(255, 241, 180, 0.96);
  border-radius: 999px;
  padding: 7px 12px;
  background: #174c39;
  color: #fff8df;
  box-shadow: 0 8px 22px rgba(6, 34, 25, 0.34);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}

.root-garden-tutorial-pointer > i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #efd06b;
  color: #173f32;
  box-shadow: 0 6px 16px rgba(6, 34, 25, 0.3);
  font-size: 18px;
}

.root-garden-tutorial-pointer[data-placement="below"] > i {
  transform: rotate(180deg);
}

[data-tutorial-coach="choose-helper"] .root-game-farm-helper.is-garden-tutorial-target {
  padding-top: 52px;
}

.root-garden-tutorial-pointer[data-placement="contained"] {
  top: 6px;
  left: 50%;
  width: calc(100% - 16px);
  transform: translateX(-50%);
  animation: none;
}

.root-garden-tutorial-pointer[data-placement="contained"] strong {
  max-width: min(280px, calc(100% - 8px));
}

.is-garden-tutorial-coaching .root-game-tool-group > *,
.is-garden-tutorial-coaching .root-game-structure-view,
.is-garden-tutorial-coaching .root-game-expand,
.is-garden-tutorial-coaching .root-game-tool-scroll-button,
.is-garden-tutorial-coaching .root-game-tool-scroll-dots,
.is-garden-tutorial-coaching .root-game-tool-shelf-heading,
.is-garden-tutorial-coaching .root-game-planting-tray > header,
.is-garden-tutorial-coaching .root-game-farm-helper,
.is-garden-tutorial-coaching .root-game-planting-tray > div[role="group"] > button,
.is-garden-tutorial-coaching .root-game-seed-picker > header,
.is-garden-tutorial-coaching .root-game-seed-picker > footer,
.is-garden-tutorial-coaching .root-game-seed-option {
  filter: grayscale(0.75);
  opacity: 0.22;
  pointer-events: none;
  transition: filter 180ms ease, opacity 180ms ease;
}

/* Final mobile affordance override: tutorial coaching must never hide or
   disable the shelf navigation that explains how to reach more controls. */
@media (max-width: 760px) {
  .root-game-tool-dock .root-game-tool-scroll-button,
  .is-garden-tutorial-coaching .root-game-tool-dock .root-game-tool-scroll-button {
    display: grid !important;
    visibility: visible !important;
    filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .root-game-tool-dock .root-game-tool-shelf-heading,
  .is-garden-tutorial-coaching .root-game-tool-dock .root-game-tool-shelf-heading,
  .root-game-tool-dock .root-game-tool-scroll-dots,
  .is-garden-tutorial-coaching .root-game-tool-dock .root-game-tool-scroll-dots {
    display: flex !important;
    visibility: visible !important;
    filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

[data-tutorial-coach="shop"] .root-game-window[data-game-window="shop"] [data-shop-tab],
[data-tutorial-coach="shop"] .root-game-window[data-game-window="shop"] .root-game-catalog-item {
  filter: grayscale(0.75);
  opacity: 0.22;
  pointer-events: none;
  transition: filter 180ms ease, opacity 180ms ease;
}

[data-tutorial-coach="water-meter"] .root-game-hud > :not(.root-game-water-meter) {
  filter: grayscale(0.75);
  opacity: 0.22;
  pointer-events: none;
  transition: filter 180ms ease, opacity 180ms ease;
}

[data-tutorial-coach="water-meter"] .root-game-water-meter {
  position: relative;
  z-index: 2147483087;
  border-color: #efd06b;
  box-shadow:
    0 0 0 3px rgba(239, 208, 107, 0.24),
    0 10px 24px rgba(7, 40, 29, 0.28);
}

[data-tutorial-coach="seed-token-wallet"] .root-game-hud > :not(.root-game-wallet),
[data-tutorial-coach="seed-token-wallet"] .root-game-wallet > :not([data-seed-token-wallet]) {
  filter: grayscale(0.75);
  opacity: 0.22;
  pointer-events: none;
  transition: filter 180ms ease, opacity 180ms ease;
}

[data-tutorial-coach="seed-token-wallet"] [data-seed-token-wallet] {
  position: relative;
  z-index: 2147483087;
  border-color: #efd06b;
  background: #fff9df;
  box-shadow:
    0 0 0 3px rgba(239, 208, 107, 0.24),
    0 10px 24px rgba(7, 40, 29, 0.28);
}

.is-garden-tutorial-coaching .is-garden-tutorial-target {
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.is-garden-tutorial-coaching .root-game-tool-dock {
  border-color: rgba(239, 208, 107, 0.72);
  box-shadow:
    0 18px 34px rgba(13, 44, 36, 0.32),
    0 0 0 2px rgba(239, 208, 107, 0.12);
}

@keyframes root-garden-tutorial-pointer-bob {
  from {
    margin-top: -2px;
  }
  to {
    margin-top: 3px;
  }
}

@keyframes root-garden-growth-wait-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 760px) {
  .root-garden-tutorial-coach-card {
    top: max(104px, calc(86px + env(safe-area-inset-top)));
    width: min(420px, calc(100% - 16px));
    padding: 13px 14px 14px;
  }

  .root-garden-tutorial-recall {
    top: max(72px, calc(58px + env(safe-area-inset-top)));
    right: max(8px, env(safe-area-inset-right));
    min-height: 48px;
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 6px 12px 6px 7px;
  }

  .root-garden-tutorial-recall > i {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  .root-garden-tutorial-pointer strong {
    max-width: 156px;
    padding: 6px 10px;
    font-size: 10px;
  }

  .root-garden-tutorial-pointer[data-placement="contained"] strong {
    max-width: min(240px, calc(100% - 8px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .root-garden-tutorial-pointer {
    animation: none;
  }
}

.root-garden-rig-qa-trigger {
  position: absolute;
  z-index: 188;
  top: max(112px, calc(96px + env(safe-area-inset-top)));
  right: max(16px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid rgba(239, 208, 107, 0.78);
  border-radius: 999px;
  background: #153f32;
  color: #fffbed;
  box-shadow: 0 10px 28px rgba(5, 31, 23, 0.28);
  font: 800 12px/1.1 "Inter", "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.root-garden-rig-qa-trigger i {
  color: #efd06b;
  font-size: 20px;
}

.root-garden-rig-qa-trigger:hover,
.root-garden-rig-qa-trigger:focus-visible,
.root-garden-rig-qa-trigger[aria-expanded="true"] {
  border-color: #f3d66f;
  background: #1c5844;
  outline: none;
  box-shadow:
    0 0 0 3px rgba(239, 208, 107, 0.2),
    0 12px 30px rgba(5, 31, 23, 0.32);
}

.root-garden-rig-qa-lab {
  position: absolute;
  z-index: 189;
  top: max(158px, calc(142px + env(safe-area-inset-top)));
  right: max(16px, env(safe-area-inset-right));
  width: min(520px, calc(100% - 32px));
  max-height: calc(100% - 176px - env(safe-area-inset-bottom));
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(83, 118, 91, 0.42);
  border-radius: 22px;
  background:
    radial-gradient(circle at 84% 8%, rgba(239, 208, 107, 0.24), transparent 32%),
    #fffdf2;
  color: #173f32;
  box-shadow:
    0 24px 56px rgba(4, 29, 21, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.78);
}

.root-garden-rig-qa-lab[hidden] {
  display: none;
}

.root-garden-rig-qa-lab > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.root-garden-rig-qa-lab header small {
  display: block;
  margin-bottom: 3px;
  color: #9a5926;
  font: 800 10px/1.2 "Inter", "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.root-garden-rig-qa-lab h2 {
  margin: 0;
  color: #173f32;
  font: 800 25px/1.02 Georgia, serif;
}

.root-garden-rig-qa-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(23, 63, 50, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  color: #173f32;
  cursor: pointer;
}

.root-garden-rig-qa-summary {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid rgba(96, 128, 84, 0.24);
  border-radius: 16px;
  background: #eaf0d9;
}

.root-garden-rig-qa-summary img {
  width: 74px;
  height: 82px;
  object-fit: contain;
  object-position: center bottom;
}

.root-garden-rig-qa-summary strong,
.root-garden-rig-qa-summary span {
  display: block;
}

.root-garden-rig-qa-summary strong {
  margin-bottom: 4px;
  font: 800 20px/1.05 Georgia, serif;
}

.root-garden-rig-qa-character-detail {
  color: #486557;
  font: 600 12px/1.35 "Inter", "Segoe UI", sans-serif;
}

.root-garden-rig-qa-select {
  display: grid;
  gap: 6px;
  color: #315847;
  font: 800 11px/1.2 "Inter", "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.root-garden-rig-qa-select select {
  width: 100%;
  min-height: 44px;
  padding: 9px 38px 9px 12px;
  border: 1px solid rgba(23, 63, 50, 0.28);
  border-radius: 12px;
  background: #fff;
  color: #173f32;
  font: 750 14px/1.2 "Inter", "Segoe UI", sans-serif;
}

.root-garden-rig-qa-section-title,
.root-garden-rig-qa-action-title {
  display: block;
  margin-bottom: 8px;
  color: #173f32;
  font: 800 12px/1.2 "Inter", "Segoe UI", sans-serif;
}

.root-garden-rig-qa-character-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.root-garden-rig-qa-character-grid button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 52px;
  padding: 5px 7px;
  border: 1px solid rgba(23, 63, 50, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: #173f32;
  text-align: left;
  cursor: pointer;
}

.root-garden-rig-qa-character-grid button:hover,
.root-garden-rig-qa-character-grid button:focus-visible {
  border-color: #d1a83b;
  background: #fff7d9;
  outline: none;
}

.root-garden-rig-qa-character-grid button.is-selected {
  border-color: #b9821d;
  background: #fff1b9;
  box-shadow: 0 0 0 2px rgba(209, 168, 59, 0.22);
}

.root-garden-rig-qa-character-grid img {
  width: 34px;
  height: 40px;
  object-fit: contain;
  object-position: center bottom;
}

.root-garden-rig-qa-character-grid span,
.root-garden-rig-qa-character-grid strong,
.root-garden-rig-qa-character-grid small {
  display: block;
  min-width: 0;
}

.root-garden-rig-qa-character-grid strong {
  overflow: hidden;
  font: 800 11px/1.15 "Inter", "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-garden-rig-qa-character-grid small {
  margin-top: 2px;
  color: #5b7467;
  font: 700 9px/1.1 "Inter", "Segoe UI", sans-serif;
}

.root-garden-rig-qa-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 9px;
  margin-bottom: 14px;
}

.root-garden-rig-qa-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid rgba(23, 63, 50, 0.25);
  border-radius: 12px;
  background: #edf2de;
  color: #173f32;
  font: 800 11px/1.15 "Inter", "Segoe UI", sans-serif;
  cursor: pointer;
}

.root-garden-rig-qa-reset:hover,
.root-garden-rig-qa-reset:focus-visible {
  border-color: #d1a83b;
  background: #fff7d9;
  outline: none;
}

.root-garden-rig-qa-save-note,
.root-garden-rig-qa-status,
.root-garden-rig-qa-checklist {
  margin: 9px 0 14px;
  color: #526b5e;
  font: 600 11px/1.42 "Inter", "Segoe UI", sans-serif;
}

.root-garden-rig-qa-action-title {
  margin-top: 0;
}

.root-garden-rig-qa-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.root-garden-rig-qa-actions button {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 58px;
  padding: 7px 5px;
  border: 1px solid rgba(23, 63, 50, 0.2);
  border-radius: 12px;
  background: #fff;
  color: #173f32;
  font: 800 11px/1.1 "Inter", "Segoe UI", sans-serif;
  cursor: pointer;
}

.root-garden-rig-qa-actions button:nth-child(-n + 3) {
  min-height: 66px;
}

.root-garden-rig-qa-actions button i {
  color: #a76623;
  font-size: 21px;
}

.root-garden-rig-qa-actions button:hover,
.root-garden-rig-qa-actions button:focus-visible {
  border-color: #d1a83b;
  background: #fff7d9;
  outline: none;
}

.root-garden-rig-qa-actions button:disabled,
.root-garden-rig-qa-character-grid button:disabled,
.root-garden-rig-qa-select select:disabled,
.root-garden-rig-qa-reset:disabled,
.root-garden-rig-qa-close:disabled {
  cursor: wait;
  opacity: 0.54;
}

.root-garden-rig-qa-status {
  min-height: 32px;
  margin-bottom: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(23, 63, 50, 0.07);
  color: #315847;
}

.root-garden-rig-qa-checklist {
  margin-bottom: 8px;
  padding-left: 2px;
}

@media (max-width: 760px) {
  .root-garden-rig-qa-trigger {
    top: auto;
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(102px + env(safe-area-inset-bottom));
    min-height: 46px;
    padding-inline: 13px;
  }

  .root-garden-rig-qa-lab {
    position: fixed;
    top: auto;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    max-height: min(74dvh, 640px);
    padding: 16px;
    border-radius: 22px;
  }

  .root-garden-rig-qa-lab h2 {
    font-size: 22px;
  }

  .root-garden-rig-qa-summary {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .root-garden-rig-qa-summary img {
    width: 62px;
    height: 68px;
  }

  .root-garden-rig-qa-character-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .root-garden-rig-qa-character-grid button {
    grid-template-columns: 30px minmax(0, 1fr);
    padding-inline: 5px;
  }

  .root-garden-rig-qa-character-grid img {
    width: 30px;
    height: 36px;
  }

  .root-garden-rig-qa-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .root-rhythm-milestone {
    align-items: end;
    padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .root-rhythm-milestone__panel {
    width: 100%;
    max-height: calc(100dvh - 16px - env(safe-area-inset-bottom));
    border-radius: 20px 20px 12px 12px;
    padding: 19px 15px 15px;
  }

  .root-rhythm-milestone__panel::before {
    border-radius: 20px 20px 0 0;
  }

  .root-rhythm-milestone__header {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    padding-bottom: 13px;
  }

  .root-rhythm-milestone__brand {
    width: 46px;
    height: 46px;
  }

  .root-rhythm-milestone__brand img {
    width: 38px;
    height: 38px;
  }

  .root-rhythm-milestone__header strong {
    font-size: 15px;
  }

  .root-rhythm-milestone__hero {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    margin-top: 13px;
    padding: 12px;
  }

  .root-rhythm-milestone__task-icon {
    width: 44px;
    height: 44px;
  }

  .root-rhythm-milestone__task-icon i {
    font-size: 21px;
  }

  .root-rhythm-milestone__hero h2 {
    font-size: 25px;
  }

  .root-rhythm-milestone__hero p {
    font-size: 11px;
  }

  .root-rhythm-milestone__hero > strong {
    grid-column: 2;
    justify-self: start;
    margin-top: -5px;
    font-size: 17px;
  }

  .root-rhythm-milestone__saved {
    margin-bottom: 12px;
  }

  .root-rhythm-milestone__rhythm {
    padding: 12px;
  }

  .root-rhythm-milestone__rhythm-heading {
    display: grid;
    gap: 4px;
    margin-bottom: 8px;
  }

  .root-rhythm-milestone__rhythm-heading strong {
    text-align: left;
  }

  .root-rhythm-milestone__rhythm li {
    gap: 5px 9px;
    padding: 7px 8px;
  }

  .root-rhythm-milestone__actions {
    grid-template-columns: 1fr;
    margin-top: 12px;
  }

  .root-rhythm-milestone__collect,
  .root-rhythm-milestone__continue {
    min-height: 46px;
  }
}

@media (max-height: 650px) {
  .root-rhythm-milestone__panel {
    padding-top: 18px;
  }

  .root-rhythm-milestone__header {
    padding-bottom: 10px;
  }

  .root-rhythm-milestone__hero {
    margin-top: 10px;
  }

  .root-rhythm-milestone__saved {
    margin-bottom: 9px;
  }

  .root-rhythm-milestone__rhythm li {
    padding-block: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .root-rhythm-milestone__panel {
    animation: none;
  }

  .root-rhythm-milestone__hero-track > i,
  .root-rhythm-milestone__rhythm li,
  .root-rhythm-milestone__rhythm li > b > i {
    transition: none;
  }
}

/* Root Level Journey: compact tabbed progression experience. */
.root-game-progress-window {
  width: min(1060px, calc(100% - 28px));
  height: min(826px, calc(100% - 24px));
  max-height: min(826px, calc(100% - 24px));
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
  border-color: rgba(236, 198, 96, 0.96);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 226, 133, 0.22), transparent 24%),
    radial-gradient(circle at 61% 70%, rgba(235, 190, 73, 0.12), transparent 28%),
    #fffaf0;
  box-shadow:
    0 0 0 1px rgba(255, 238, 171, 0.34),
    0 0 34px rgba(232, 188, 70, 0.24),
    0 36px 94px rgba(4, 29, 21, 0.66);
}

.root-game-stage:has(.root-game-progress-window:not([hidden])) .root-game-scrim {
  background: rgba(4, 31, 25, 0.68);
  backdrop-filter: blur(1.5px) saturate(0.88);
}

.root-game-progress-window::before {
  position: absolute;
  z-index: 7;
  inset: 5px;
  border: 1px solid rgba(255, 228, 147, 0.34);
  border-radius: 13px;
  box-shadow: inset 0 0 24px rgba(241, 199, 93, 0.08);
  content: "";
  pointer-events: none;
}

.root-game-progress-frame-vine {
  position: absolute;
  z-index: 0;
  top: 6px;
  bottom: 6px;
  left: -78px;
  width: auto;
  height: calc(100% - 12px);
  filter: saturate(1.2) contrast(1.06) drop-shadow(0 0 8px rgba(203, 164, 59, 0.16));
  opacity: 1;
  pointer-events: none;
}

.root-game-progress-frame-vine.is-bottom {
  top: auto;
  right: auto;
  bottom: -246px;
  left: 186px;
  width: auto;
  height: 620px;
  opacity: 0.44;
  transform: rotate(90deg);
  transform-origin: center;
}

.root-game-progress-window > header {
  position: relative;
  z-index: 1;
  min-height: 102px;
  overflow: hidden;
  padding: 22px 30px 20px 146px;
  border-bottom-color: rgba(228, 192, 101, 0.86);
  background-color: #082f27;
  background-image: url("/assets/live-rooted/game-v2/ui/root-level-vine-v1.png");
  background-repeat: no-repeat;
  background-position: -78px -2px;
  background-size: auto 780px;
  box-shadow: inset 0 -1px 0 rgba(255, 224, 132, 0.3), inset 0 -24px 42px rgba(0, 0, 0, 0.08);
  isolation: isolate;
}

.root-game-progress-window > header::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 14% 58%, rgba(255, 215, 106, 0.12), transparent 23%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 55%, rgba(0, 0, 0, 0.08));
  content: "";
  pointer-events: none;
}

.root-game-progress-header-vine {
  position: absolute;
  z-index: -1;
  top: -26px;
  left: -38px;
  width: auto;
  height: 250px;
  display: none;
  opacity: 0.82;
  pointer-events: none;
}

.root-game-progress-header-vine.is-right {
  top: -158px;
  right: 4px;
  left: auto;
  width: auto;
  height: 410px;
  display: block;
  filter: sepia(0.22) saturate(0.8) brightness(0.92);
  opacity: 0.36;
  transform: rotate(90deg);
}

.root-game-progress-window > header > div {
  gap: 5px;
}

.root-game-progress-window > header span {
  color: #f5ce70;
  font-size: 10px;
  letter-spacing: 0.09em;
}

.root-game-progress-window > header strong {
  color: #fffdf0;
  font-size: clamp(30px, 3.2vw, 38px);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

.root-game-progress-window > header button {
  flex-basis: 52px;
  width: 52px;
  height: 52px;
  border: 2px solid #d9b55d;
  background: rgba(17, 64, 49, 0.88);
  box-shadow: 0 0 0 4px rgba(244, 213, 126, 0.12), 0 8px 20px rgba(0, 0, 0, 0.2);
}

.root-game-progress-window > header button:hover,
.root-game-progress-window > header button:focus-visible {
  background: #1c5945;
}

.root-game-progress-tabs {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 58px;
  border-bottom: 1px solid rgba(157, 113, 36, 0.28);
  background: rgba(255, 250, 238, 0.95);
  box-shadow: 0 8px 24px rgba(83, 62, 24, 0.04);
}

.root-game-progress-tabs button {
  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-right: 1px solid rgba(29, 69, 52, 0.11);
  padding: 7px 12px 6px;
  background: transparent;
  color: #5d6559;
  font: 700 16px/1 Georgia, "Times New Roman", serif;
  cursor: pointer;
}

.root-game-progress-tabs button:last-child {
  border-right: 0;
}

.root-game-progress-tabs button i {
  color: #6d765f;
  font-size: 22px;
}

.root-game-progress-tabs button:hover {
  background: #f7f1df;
  color: #173f32;
}

.root-game-progress-tabs button.is-active {
  color: #173f32;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(255, 246, 215, 0.72), rgba(255, 250, 238, 0.3));
  box-shadow: inset 0 -11px 20px rgba(224, 177, 55, 0.07);
}

.root-game-progress-tabs button.is-active::after {
  position: absolute;
  right: 21%;
  bottom: 0;
  left: 21%;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: #c8942c;
  box-shadow: 0 0 10px rgba(226, 178, 57, 0.44);
  content: "";
}

.root-game-progress-tabs button.is-active i {
  color: #9f731f;
  text-shadow: 0 0 12px rgba(221, 180, 74, 0.72);
}

.root-game-progress-tabs button:focus-visible {
  z-index: 2;
  outline: 3px solid rgba(189, 139, 40, 0.68);
  outline-offset: -4px;
}

.root-game-progress-copy {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 0;
  overflow: auto;
  padding: 0 24px 16px 72px;
  background:
    radial-gradient(circle at 57% 54%, rgba(239, 196, 76, 0.12), transparent 26%),
    linear-gradient(90deg, rgba(255, 250, 237, 0.7), rgba(255, 253, 245, 0.9));
  isolation: isolate;
  scrollbar-color: rgba(23, 63, 50, 0.48) transparent;
}

.root-game-progress-vine {
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: -138px;
  width: auto;
  height: calc(100% - 8px);
  object-fit: contain;
  display: none;
  opacity: 0.78;
  pointer-events: none;
}

.root-game-root-progress {
  position: relative;
  z-index: 1;
  grid-template-columns: 150px minmax(0, 1fr) minmax(200px, 224px);
  gap: 20px;
  margin: 0;
  padding: 20px 48px 19px 80px;
  border-bottom-color: rgba(29, 69, 52, 0.16);
  background:
    radial-gradient(circle at 132px 52%, rgba(255, 221, 122, 0.28), transparent 132px),
    linear-gradient(90deg, rgba(255, 249, 232, 0.96), rgba(255, 253, 245, 0.96) 58%, rgba(255, 248, 229, 0.9));
  box-shadow: inset 0 -1px 0 rgba(196, 150, 55, 0.12);
}

.root-game-root-progress-level {
  width: 128px;
  height: 128px;
  border: 4px solid #d4a73d;
  background: radial-gradient(circle at 50% 42%, #246047, #123d30 68%);
  box-shadow:
    inset 0 0 0 6px rgba(255, 248, 193, 0.16),
    inset 0 0 26px rgba(255, 222, 121, 0.12),
    0 0 0 7px rgba(212, 170, 67, 0.3),
    0 0 46px rgba(246, 204, 94, 0.66),
    0 14px 30px rgba(20, 72, 49, 0.26);
}

.root-game-root-progress-level > img {
  width: 102px;
  height: 102px;
  opacity: 0.3;
}

.root-game-root-progress-level strong {
  font-size: 54px;
}

.root-game-root-progress-orbit {
  position: absolute;
  inset: -13px;
  border: 2px solid rgba(247, 209, 103, 0.9);
  border-radius: 50%;
  box-shadow:
    0 0 0 4px rgba(245, 204, 91, 0.16),
    0 0 40px rgba(255, 220, 123, 0.92),
    inset 0 0 20px rgba(255, 224, 126, 0.34);
  opacity: 1;
  pointer-events: none;
  transform: rotate(90deg);
}

.root-game-root-progress-orbit > i:first-child {
  position: absolute;
  top: -9px;
  left: 50%;
  color: #ffe6a0;
  font-size: 20px;
  filter: drop-shadow(0 0 9px #d7a82f) drop-shadow(0 0 3px #fff0aa);
  opacity: 0.92;
  transform: translateX(-50%) scale(0.92);
}

.root-game-root-progress-orbit-trail {
  position: absolute;
  color: #fff0b7;
  filter: drop-shadow(0 0 7px #d7a82f) drop-shadow(0 0 2px #fff5c7);
  pointer-events: none;
}

.root-game-root-progress-orbit-trail.is-one {
  top: -5px;
  left: 39%;
  font-size: 11px;
  opacity: 0.52;
  transform: translateX(-50%) scale(0.72) rotate(-10deg);
}

.root-game-root-progress-orbit-trail.is-two {
  top: 1px;
  left: 29%;
  font-size: 8px;
  opacity: 0.32;
  transform: translateX(-50%) scale(0.62) rotate(-18deg);
}

.root-game-root-progress-pixie-image {
  position: absolute;
  z-index: 2;
  width: 102px;
  height: 57px;
  object-fit: contain;
  filter:
    brightness(1.02)
    saturate(1.12)
    contrast(1.32)
    drop-shadow(0 1px 1px rgba(91, 57, 8, 0.62))
    drop-shadow(0 0 11px rgba(232, 181, 53, 0.86));
  pointer-events: none;
}

.root-game-root-progress-pixie-image.is-orbit {
  top: -29px;
  left: 50%;
  opacity: 0;
  transform: translateX(-86%) scale(0.96);
}

.root-game-root-progress-pixie-image.is-stream {
  top: 50%;
  left: var(--root-progress-position, 0%);
  width: 100px;
  height: 56px;
  opacity: 0;
  transform: translate(-86%, -50%) scale(0.86);
  transition: opacity 260ms ease;
}

.root-game-root-progress-copy {
  position: relative;
  gap: 7px;
}

.root-game-root-progress-copy > span {
  font-size: 10px;
  letter-spacing: 0.06em;
}

.root-game-root-progress-copy h3 {
  font-size: 39px;
}

.root-game-root-progress-track {
  --root-progress-stream-origin: -42px;
  position: relative;
  height: 12px;
  overflow: visible;
  border: 1px solid rgba(171, 129, 39, 0.2);
  background: #dfdcc9;
  box-shadow: inset 0 1px 3px rgba(23, 63, 50, 0.14), 0 0 8px rgba(224, 177, 57, 0.09);
}

.root-game-root-progress-track > i:first-child {
  overflow: hidden;
  height: 100%;
  background: linear-gradient(90deg, #4d803f 0%, #c8972d 68%, #f4d66f 100%);
  box-shadow: 0 0 13px rgba(222, 176, 58, 0.48);
}

.root-game-root-progress-copy p {
  padding-top: 20px;
  font-size: 10px;
}

.root-game-root-progress-focus {
  justify-content: flex-start;
  padding-left: 10px;
  border-left: 1px solid rgba(29, 69, 52, 0.13);
}

.root-game-root-progress-focus small {
  font-size: 9px;
  letter-spacing: 0.04em;
}

.root-game-root-progress-focus strong {
  font-size: 33px;
}

.root-game-root-progress-focus em {
  max-width: 180px;
  font-size: 9px;
  line-height: 1.35;
}

.root-game-root-progress-pixie-stream {
  position: absolute;
  inset: -8px 0;
  overflow: visible;
  pointer-events: none;
}

.root-game-root-progress-pixie-stream::before {
  position: absolute;
  top: 50%;
  left: var(--root-progress-stream-origin);
  width: calc(var(--root-progress-position, 0%) - var(--root-progress-stream-origin));
  border-top: 2px solid rgba(226, 170, 45, 0.58);
  box-shadow: 0 0 10px rgba(239, 196, 83, 0.64), 0 0 3px rgba(255, 244, 188, 0.82);
  content: "";
  opacity: 0.46;
  pointer-events: none;
  transform: scaleX(1);
  transform-origin: left center;
}

.root-game-root-progress-pixie-filament {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: var(--root-progress-stream-origin);
  width: calc(var(--root-progress-position, 0%) - var(--root-progress-stream-origin));
  height: auto;
  object-fit: contain;
  filter: brightness(1.02) saturate(1.24) contrast(1.42) drop-shadow(0 1px 1px rgba(100, 62, 8, 0.52)) drop-shadow(0 0 6px rgba(203, 139, 22, 0.94)) drop-shadow(0 0 2px rgba(255, 247, 194, 1));
  opacity: 1;
  pointer-events: none;
  transform: translateY(-50%);
}

.root-game-root-progress-pixie-lead {
  position: absolute;
  top: 50%;
  left: var(--root-progress-position, 0%);
  color: #ffe8a0;
  font-size: 23px;
  filter: drop-shadow(0 0 12px #d9a92f) drop-shadow(0 0 4px #fff3b8);
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(0.94);
}

.root-game-root-progress-pixie-trail {
  position: absolute;
  top: 50%;
  left: var(--root-progress-position, 0%);
  color: #fff0b5;
  filter: drop-shadow(0 0 7px #d9a92f) drop-shadow(0 0 2px #fff7d4);
  pointer-events: none;
}

.root-game-root-progress-pixie-trail.is-one {
  font-size: 10px;
  opacity: 0.48;
  transform: translate(-50%, -50%) scale(0.7);
}

.root-game-root-progress-pixie-trail.is-two {
  font-size: 7px;
  opacity: 0.3;
  transform: translate(-50%, -50%) scale(0.58);
}

.root-game-progress-stage {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.root-game-progress-panel {
  display: grid;
  min-width: 0;
  gap: 12px;
  padding: 15px 12px 8px;
}

.root-game-progress-panel[hidden] {
  display: none !important;
}

.root-game-progress-panel.is-entering-forward {
  animation: root-game-progress-panel-forward 220ms cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

.root-game-progress-panel.is-entering-backward {
  animation: root-game-progress-panel-backward 220ms cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

.root-game-progress-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 24px;
  min-width: 0;
}

.root-game-progress-overview-roadmap {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 11px;
  border-right: 1px solid rgba(189, 139, 40, 0.14);
  padding: 9px 24px 7px 0;
}

.root-game-progress-overview-roadmap > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.root-game-progress-overview-roadmap > header > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.root-game-progress-overview-roadmap header span,
.root-game-overview-action-card > span,
.root-game-overview-action-card.is-course > small,
.root-game-course-progress-detail span {
  color: #825223;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.root-game-progress-overview-roadmap h3,
.root-game-overview-action-card h3 {
  margin: 0;
  color: #173f32;
  font-family: Georgia, "Times New Roman", serif;
}

.root-game-progress-overview-roadmap h3 {
  font-size: clamp(27px, 3vw, 36px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.root-game-progress-overview-roadmap > header > b {
  flex: 0 0 auto;
  border: 1px solid rgba(176, 126, 35, 0.38);
  border-radius: 999px;
  padding: 8px 11px;
  background: #fff5d1;
  color: #79551c;
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.root-game-progress-overview-roadmap > p {
  max-width: 58ch;
  margin: 0;
  color: #5e6d63;
  font-size: 13px;
  line-height: 1.5;
}

.root-game-progress-overview-growth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 268px);
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 79% 62%, rgba(241, 195, 70, 0.27), transparent 32%);
}

.root-game-progress-overview-growth ul {
  display: grid;
  min-width: 0;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.root-game-progress-overview-growth li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  border-bottom: 1px solid rgba(29, 69, 52, 0.14);
  color: #264f3e;
  font-size: 13px;
  font-weight: 850;
}

.root-game-progress-overview-growth li:last-child {
  border-bottom: 0;
}

.root-game-progress-overview-growth li > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(189, 139, 40, 0.34);
  border-radius: 50%;
  background: #fff9e8;
  color: #557b42;
  font-size: 20px;
}

.root-game-progress-overview-growth > img {
  width: 100%;
  max-height: 268px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 20px rgba(239, 191, 66, 0.32))
    drop-shadow(0 16px 15px rgba(67, 78, 38, 0.2));
}

.root-game-progress-overview-actions {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.root-game-overview-action-card {
  display: grid;
  min-width: 0;
  min-height: 195px;
  align-content: start;
  gap: 5px;
  border: 1px solid rgba(197, 148, 45, 0.52);
  border-radius: 16px;
  padding: 15px 16px;
  background:
    radial-gradient(circle at 82% 24%, rgba(246, 209, 105, 0.13), transparent 34%),
    #fffaf0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 0 0 3px rgba(225, 182, 71, 0.08),
    0 10px 24px rgba(96, 70, 24, 0.11);
}

.root-game-overview-action-card h3 {
  font-size: 25px;
  line-height: 1.02;
}

.root-game-overview-action-summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-top: 2px;
  border: 1px solid rgba(195, 150, 58, 0.2);
  border-radius: 11px;
  padding: 6px 8px;
  background: rgba(255, 252, 238, 0.72);
}

.root-game-overview-action-icon,
.root-game-overview-course-icon {
  display: grid;
  place-items: center;
  border: 1px solid rgba(189, 139, 40, 0.32);
  border-radius: 50%;
  background: #fff8df;
  color: #557b42;
}

.root-game-overview-action-icon {
  width: 46px;
  height: 46px;
  font-size: 25px;
}

.root-game-overview-action-summary > div {
  display: grid;
  gap: 2px;
}

.root-game-overview-action-summary strong {
  color: #173f32;
  font-size: 10px;
  font-weight: 900;
}

.root-game-overview-action-summary b {
  color: #173f32;
  font: 700 22px/1 Georgia, "Times New Roman", serif;
}

.root-game-overview-action-summary small {
  color: #617167;
  font-size: 9px;
  line-height: 1.3;
}

.root-game-progress-copy .root-game-overview-action-card button,
.root-game-progress-copy .root-game-overview-action-card > a {
  width: 100%;
  min-height: 46px;
  margin-top: auto;
  gap: 8px;
  border: 1px solid #123b2e;
  border-radius: 7px;
  padding: 0 13px;
  background: #124333;
  color: #fffdf7;
  font: 700 15px/1 Georgia, "Times New Roman", serif;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.13), 0 6px 12px rgba(23, 63, 50, 0.15);
}

.root-game-progress-copy .root-game-overview-action-card button:hover:not(:disabled),
.root-game-progress-copy .root-game-overview-action-card > a:hover {
  background: #1d5b45;
}

.root-game-progress-copy .root-game-overview-action-card button:focus-visible,
.root-game-progress-copy .root-game-overview-action-card > a:focus-visible {
  outline: 3px solid rgba(213, 166, 56, 0.72);
  outline-offset: 2px;
}

.root-game-overview-action-card.is-course {
  border-color: rgba(217, 166, 49, 0.9);
  background:
    radial-gradient(circle at 88% 32%, rgba(247, 207, 89, 0.22), transparent 34%),
    linear-gradient(135deg, #fff9e6, #f7f0d7);
  box-shadow:
    inset 0 0 0 1px rgba(255, 254, 237, 0.9),
    0 0 0 3px rgba(225, 182, 71, 0.22),
    0 0 24px rgba(231, 183, 59, 0.23),
    0 11px 24px rgba(119, 86, 27, 0.14);
}

.root-game-overview-action-card.is-course > small {
  color: #3d633f;
}

.root-game-overview-course-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.root-game-overview-course-heading > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.root-game-overview-course-heading h3 {
  font-size: 24px;
  line-height: 1.02;
}

.root-game-overview-course-heading p {
  margin: 0;
  color: #5d6c61;
  font-size: 9px;
  font-weight: 800;
}

.root-game-overview-course-icon {
  width: 72px;
  height: 72px;
  border: 3px solid #c49835;
  background: #174b38;
  color: #ffe9a3;
  font-size: 37px;
  box-shadow: 0 0 0 4px rgba(233, 197, 104, 0.24), 0 0 22px rgba(224, 178, 61, 0.46);
}

.root-game-course-progress-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 18px;
  border: 1px solid rgba(189, 139, 40, 0.4);
  border-radius: 10px;
  padding: 14px;
  background: #f7f3df;
}

.root-game-course-progress-detail > div {
  display: grid;
  gap: 4px;
}

.root-game-course-progress-detail strong {
  color: #173f32;
  font: 700 19px/1.1 Georgia, "Times New Roman", serif;
}

.root-game-course-progress-detail p {
  grid-column: 1;
  margin: 0;
  color: #607166;
  font-size: 11px;
  line-height: 1.45;
}

.root-game-progress-copy .root-game-course-progress-detail > a {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  background: #173f32;
}

.root-game-progress-panel .root-game-level-roadmap,
.root-game-progress-panel .root-game-farm-progress,
.root-game-progress-panel .root-game-land-progress,
.root-game-progress-panel .root-game-daily-care {
  margin-top: 0;
}

.root-game-progress-panel .root-game-level-roadmap {
  margin-bottom: 0;
}

.root-game-progress-status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid rgba(29, 69, 52, 0.14);
  padding: 10px 12px 0;
  color: #315343;
}

.root-game-progress-status > div,
.root-game-progress-status nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.root-game-progress-status span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
}

.root-game-progress-status span i {
  color: #6b8a58;
  font-size: 17px;
}

.root-game-progress-status b {
  font-weight: 800;
}

.root-game-progress-copy .root-game-progress-status button {
  min-height: 34px;
  gap: 6px;
  border: 0;
  padding: 0 4px;
  background: transparent;
  color: #173f32;
  font-size: 10px;
  font-weight: 900;
  box-shadow: none;
}

.root-game-progress-copy .root-game-progress-status button:hover,
.root-game-progress-copy .root-game-progress-status button:focus-visible {
  color: #9a6817;
}

.root-game-progress-copy .root-game-progress-status button:focus-visible {
  outline: 2px solid rgba(189, 139, 40, 0.6);
  outline-offset: 2px;
}

.root-game-progress-window.is-progress-opening .root-game-root-progress-level {
  animation: root-game-progress-level-bloom 1250ms cubic-bezier(0.2, 0.75, 0.15, 1) both;
}

.root-game-progress-window.is-progress-opening .root-game-root-progress-orbit {
  animation: root-game-progress-orbit 1450ms 150ms cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

.root-game-progress-window.is-progress-opening .root-game-root-progress-orbit > i:first-child {
  animation: root-game-progress-orbit-spark 1450ms 150ms cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

.root-game-progress-window.is-progress-opening .root-game-root-progress-orbit-trail {
  animation: root-game-progress-orbit-trail-glow 1450ms 150ms cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

.root-game-progress-window.is-progress-opening .root-game-root-progress-orbit-trail.is-two {
  animation-delay: 230ms;
}

.root-game-progress-window.is-progress-opening .root-game-root-progress-pixie-image.is-orbit {
  animation: root-game-progress-pixie-orbit-glow 1450ms 150ms cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

.root-game-progress-window.is-progress-opening .root-game-root-progress-pixie-stream::before {
  animation: root-game-progress-stream-line 3000ms 1450ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.root-game-progress-window.is-progress-opening .root-game-root-progress-pixie-filament {
  animation: root-game-progress-filament-draw 3000ms 1450ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.root-game-progress-window.is-progress-opening .root-game-root-progress-pixie-lead {
  animation: root-game-progress-stream-spark 3400ms 1450ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.root-game-progress-window.is-progress-opening .root-game-root-progress-pixie-trail.is-one {
  animation: root-game-progress-stream-spark 3150ms 1540ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.root-game-progress-window.is-progress-opening .root-game-root-progress-pixie-trail.is-two {
  animation: root-game-progress-stream-spark 2900ms 1640ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.root-game-progress-window.is-progress-opening .root-game-root-progress-pixie-image.is-stream {
  animation: root-game-progress-stream-pixie 3500ms 1450ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.root-game-progress-window.is-progress-opening .root-game-root-progress-track {
  animation: root-game-progress-track-pulse 600ms 4200ms ease-out both;
}

@keyframes root-game-progress-level-bloom {
  0% { opacity: 0.65; box-shadow: inset 0 0 0 6px rgba(255, 248, 193, 0.08), 0 0 0 0 rgba(212, 170, 67, 0), 0 5px 12px rgba(20, 72, 49, 0.18); transform: scale(0.9); }
  58% { opacity: 1; box-shadow: inset 0 0 0 6px rgba(255, 248, 193, 0.2), 0 0 0 13px rgba(226, 186, 83, 0.24), 0 0 38px rgba(255, 220, 123, 0.62); transform: scale(1.04); }
  100% { opacity: 1; box-shadow: inset 0 0 0 6px rgba(255, 248, 193, 0.16), inset 0 0 24px rgba(255, 222, 121, 0.08), 0 0 0 6px rgba(212, 170, 67, 0.2), 0 0 38px rgba(246, 204, 94, 0.52), 0 14px 30px rgba(20, 72, 49, 0.26); transform: scale(1); }
}

@keyframes root-game-progress-orbit {
  0% { opacity: 0; transform: rotate(-270deg) scale(0.92); }
  8% { opacity: 1; }
  82% { opacity: 1; transform: rotate(84deg) scale(1.02); }
  100% { opacity: 1; transform: rotate(90deg) scale(1); }
}

@keyframes root-game-progress-orbit-spark {
  0% { opacity: 0; transform: translateX(-50%) scale(0.4); }
  18%, 82% { opacity: 1; transform: translateX(-50%) scale(1.15); }
  100% { opacity: 0.92; transform: translateX(-50%) scale(0.92); }
}

@keyframes root-game-progress-orbit-trail-glow {
  0%, 100% { opacity: 0.1; }
  20%, 78% { opacity: 0.68; }
}

@keyframes root-game-progress-pixie-orbit-glow {
  0% { opacity: 0; filter: brightness(1) saturate(1.04) contrast(1.28) drop-shadow(0 1px 1px rgba(91, 57, 8, 0.54)) drop-shadow(0 0 3px rgba(232, 181, 53, 0.28)); }
  8%, 78% { opacity: 1; filter: brightness(1.12) saturate(1.2) contrast(1.42) drop-shadow(0 1px 1px rgba(91, 57, 8, 0.7)) drop-shadow(0 0 16px rgba(232, 181, 53, 0.92)); }
  88% { opacity: 1; filter: brightness(1.08) saturate(1.15) contrast(1.38) drop-shadow(0 1px 1px rgba(91, 57, 8, 0.66)) drop-shadow(0 0 12px rgba(232, 181, 53, 0.8)); }
  100% { opacity: 0; filter: brightness(1.02) saturate(1.08) contrast(1.3) drop-shadow(0 1px 1px rgba(91, 57, 8, 0.56)) drop-shadow(0 0 5px rgba(232, 181, 53, 0.42)); }
}

@keyframes root-game-progress-stream-line {
  0% { opacity: 0; transform: scaleX(0); }
  18% { opacity: 1; }
  82% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0.28; transform: scaleX(1); }
}

@keyframes root-game-progress-filament-draw {
  0% { clip-path: inset(0 100% 0 0); opacity: 0; }
  18% { opacity: 1; }
  100% { clip-path: inset(0); opacity: 1; }
}

@keyframes root-game-progress-orbit-idle {
  0% { opacity: 0.88; transform: rotate(90deg) scale(1); }
  4% { opacity: 1; }
  22% { opacity: 1; transform: rotate(450deg) scale(1.018); }
  28%, 100% { opacity: 0.9; transform: rotate(450deg) scale(1); }
}

@keyframes root-game-progress-orbit-spark-idle {
  0%, 100% { opacity: 0.88; transform: translateX(-50%) scale(0.92); }
  4%, 22% { opacity: 1; transform: translateX(-50%) scale(1.24); }
  28% { opacity: 0.92; transform: translateX(-50%) scale(0.96); }
}

@keyframes root-game-progress-orbit-trail-idle {
  0%, 100% { opacity: 0.08; }
  5%, 20% { opacity: 0.62; }
  28% { opacity: 0.14; }
}

@keyframes root-game-progress-pixie-orbit-idle {
  0% { opacity: 0.9; filter: brightness(1.04) saturate(1.1) contrast(1.34) drop-shadow(0 1px 1px rgba(91, 57, 8, 0.6)) drop-shadow(0 0 9px rgba(232, 181, 53, 0.66)); }
  5%, 20% { opacity: 1; filter: brightness(1.12) saturate(1.2) contrast(1.42) drop-shadow(0 1px 1px rgba(91, 57, 8, 0.7)) drop-shadow(0 0 16px rgba(232, 181, 53, 0.94)); }
  28%, 100% { opacity: 0; filter: brightness(1.02) saturate(1.08) contrast(1.3) drop-shadow(0 1px 1px rgba(91, 57, 8, 0.54)) drop-shadow(0 0 5px rgba(232, 181, 53, 0.42)); }
}

@keyframes root-game-progress-stream-idle-line {
  0%, 24%, 100% { opacity: 0.5; }
  30% { opacity: 0.62; }
  46% { opacity: 0.82; }
  54% { opacity: 0.48; }
}

@keyframes root-game-progress-filament-idle {
  0%, 24%, 100% { opacity: 0.94; }
  30% { opacity: 1; }
  46% { opacity: 1; }
  54% { opacity: 0.96; }
}

@keyframes root-game-progress-stream-idle-spark {
  0%, 24% { left: var(--root-progress-stream-origin); opacity: 0; transform: translate(-50%, -50%) scale(0.52); }
  30% { opacity: 1; }
  48% { left: var(--root-progress-position, 0%); opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  54%, 100% { left: var(--root-progress-position, 0%); opacity: 0.5; transform: translate(-50%, -50%) scale(0.72); }
}

@keyframes root-game-progress-stream-pixie-idle {
  0%, 24% { left: var(--root-progress-stream-origin); opacity: 0; transform: translate(-86%, -50%) scale(0.72); }
  30% { opacity: 1; }
  48% { left: var(--root-progress-position, 0%); opacity: 1; transform: translate(-86%, -50%) scale(1.02); }
  54%, 100% { left: var(--root-progress-position, 0%); opacity: 0; transform: translate(-86%, -50%) scale(0.76); }
}

@media (prefers-reduced-motion: no-preference) {
  .root-game-root-progress-orbit {
    animation: root-game-progress-orbit-idle 8.4s 4.2s ease-in-out infinite;
  }

  .root-game-root-progress-orbit > i:first-child {
    animation: root-game-progress-orbit-spark-idle 8.4s 4.2s ease-in-out infinite;
  }

  .root-game-root-progress-orbit-trail {
    animation: root-game-progress-orbit-trail-idle 8.4s 4.2s ease-in-out infinite;
  }

  .root-game-root-progress-orbit-trail.is-two {
    animation-delay: 4.27s;
  }

  .root-game-root-progress-pixie-image.is-orbit {
    animation: root-game-progress-pixie-orbit-idle 8.4s 4.2s ease-in-out infinite;
  }

  .root-game-root-progress-pixie-stream::before {
    animation: root-game-progress-stream-idle-line 8.4s 4.2s ease-in-out infinite;
  }

  .root-game-root-progress-pixie-filament {
    animation: root-game-progress-filament-idle 8.4s 4.2s ease-in-out infinite;
  }

  .root-game-root-progress-pixie-lead {
    animation: root-game-progress-stream-idle-spark 8.4s 4.2s ease-in-out infinite;
  }

  .root-game-root-progress-pixie-trail.is-one {
    animation: root-game-progress-stream-idle-spark 8.4s 4.28s ease-in-out infinite;
  }

  .root-game-root-progress-pixie-trail.is-two {
    animation: root-game-progress-stream-idle-spark 8.4s 4.36s ease-in-out infinite;
  }

  .root-game-root-progress-pixie-image.is-stream {
    animation: root-game-progress-stream-pixie-idle 8.4s 4.2s ease-in-out infinite;
  }
}

@keyframes root-game-progress-stream-spark {
  0% { left: var(--root-progress-stream-origin); opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  12% { opacity: 1; }
  88% { left: var(--root-progress-position, 0%); opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { left: var(--root-progress-position, 0%); opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}

@keyframes root-game-progress-stream-pixie {
  0% { left: var(--root-progress-stream-origin); opacity: 0; transform: translate(-86%, -50%) scale(0.7); }
  10% { opacity: 1; }
  82% { left: var(--root-progress-position, 0%); opacity: 1; transform: translate(-86%, -50%) scale(1.04); }
  90% { left: var(--root-progress-position, 0%); opacity: 1; transform: translate(-86%, -50%) scale(1.08); }
  100% { left: var(--root-progress-position, 0%); opacity: 0; transform: translate(-86%, -50%) scale(0.78); }
}

@keyframes root-game-progress-track-pulse {
  0% { box-shadow: inset 0 1px 2px rgba(23, 63, 50, 0.12), 0 0 0 rgba(231, 189, 78, 0); }
  45% { box-shadow: inset 0 1px 2px rgba(23, 63, 50, 0.12), 0 0 17px rgba(231, 189, 78, 0.75); }
  100% { box-shadow: inset 0 1px 2px rgba(23, 63, 50, 0.12), 0 0 7px rgba(231, 189, 78, 0.22); }
}

@keyframes root-game-progress-panel-forward {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes root-game-progress-panel-backward {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (min-width: 1200px) and (min-height: 880px) {
  .root-game-progress-window {
    width: min(1216px, calc(100% - 48px), calc(124.6dvh - 30px));
    height: min(976px, calc(100% - 24px));
    max-height: min(976px, calc(100% - 24px));
  }
}

@media (min-width: 1400px) and (min-height: 940px) {
  .root-game-progress-window {
    border-radius: 22px;
  }

  .root-game-progress-window::before {
    inset: 6px;
    border-radius: 16px;
  }

  .root-game-progress-window > header {
    min-height: 128px;
    padding: 28px 38px 25px 172px;
    background-position: -58px -4px;
    background-size: auto 850px;
  }

  .root-game-progress-window > header strong {
    font-size: 42px;
  }

  .root-game-progress-window > header button {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
  }

  .root-game-progress-frame-vine {
    left: -52px;
  }

  .root-game-progress-frame-vine.is-bottom {
    bottom: -292px;
    left: 238px;
    height: 760px;
    opacity: 0.5;
  }

  .root-game-progress-header-vine.is-right {
    top: -184px;
    height: 480px;
    opacity: 0.42;
  }

  .root-game-root-progress {
    min-height: 200px;
    grid-template-columns: 190px minmax(0, 1fr) minmax(230px, 258px);
    gap: 28px;
    padding: 22px 58px 22px 98px;
    background:
      radial-gradient(circle at 156px 52%, rgba(255, 221, 122, 0.34), transparent 154px),
      linear-gradient(90deg, rgba(255, 249, 232, 0.98), rgba(255, 253, 245, 0.98) 58%, rgba(255, 248, 229, 0.94));
  }

  .root-game-root-progress-level {
    width: 156px;
    height: 156px;
    border-width: 5px;
    box-shadow:
      inset 0 0 0 7px rgba(255, 248, 193, 0.22),
      inset 0 0 32px rgba(255, 222, 121, 0.14),
      0 0 0 8px rgba(212, 170, 67, 0.32),
      0 0 58px rgba(246, 204, 94, 0.74),
      0 17px 34px rgba(20, 72, 49, 0.28);
  }

  .root-game-root-progress-level > img {
    width: 124px;
    height: 124px;
  }

  .root-game-root-progress-level strong {
    font-size: 64px;
  }

  .root-game-root-progress-orbit {
    inset: -17px;
  }

  .root-game-root-progress-pixie-image {
    width: 118px;
    height: 66px;
  }

  .root-game-root-progress-pixie-image.is-orbit {
    top: -34px;
  }

  .root-game-root-progress-pixie-image.is-stream {
    width: 122px;
    height: 68px;
  }

  .root-game-root-progress-copy {
    gap: 9px;
  }

  .root-game-root-progress-copy > span {
    font-size: 11px;
  }

  .root-game-root-progress-copy h3 {
    font-size: 44px;
  }

  .root-game-root-progress-track {
    --root-progress-stream-origin: -62px;
    height: 14px;
  }

  .root-game-root-progress-copy p {
    font-size: 11px;
  }

  .root-game-root-progress-focus {
    padding-left: 20px;
  }

  .root-game-root-progress-focus small,
  .root-game-root-progress-focus em {
    font-size: 10px;
  }

  .root-game-root-progress-focus em {
    max-width: 220px;
  }

  .root-game-root-progress-focus strong {
    font-size: 38px;
  }

  .root-game-progress-tabs,
  .root-game-progress-tabs button {
    min-height: 64px;
  }

  .root-game-progress-tabs button {
    gap: 11px;
    font-size: 18px;
  }

  .root-game-progress-tabs button i {
    font-size: 25px;
  }

  .root-game-progress-copy {
    padding: 0 30px 10px 84px;
  }

  .root-game-progress-panel {
    gap: 14px;
    padding: 18px 14px 10px;
  }

  .root-game-progress-overview-layout {
    grid-template-columns: minmax(0, 1.16fr) minmax(400px, 0.84fr);
    gap: 30px;
  }

  .root-game-progress-overview-roadmap {
    gap: 14px;
    padding: 12px 30px 10px 0;
  }

  .root-game-progress-overview-roadmap h3 {
    font-size: clamp(34px, 2.7vw, 42px);
  }

  .root-game-progress-overview-roadmap > p {
    font-size: 15px;
  }

  .root-game-progress-overview-growth {
    grid-template-columns: minmax(0, 1fr) minmax(268px, 320px);
    gap: 14px;
    background: radial-gradient(circle at 79% 59%, rgba(241, 195, 70, 0.38), transparent 38%);
  }

  .root-game-progress-overview-growth li {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    min-height: 58px;
    font-size: 15px;
  }

  .root-game-progress-overview-growth li > i {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .root-game-progress-overview-growth > img {
    max-height: 240px;
    filter:
      drop-shadow(0 0 30px rgba(239, 191, 66, 0.5))
      drop-shadow(0 18px 18px rgba(67, 78, 38, 0.24));
  }

  .root-game-progress-overview-actions {
    grid-template-rows: repeat(2, minmax(200px, 1fr));
    gap: 16px;
  }

  .root-game-overview-action-card {
    min-height: 200px;
    gap: 6px;
    padding: 15px 18px;
  }

  .root-game-overview-action-card h3 {
    font-size: 29px;
  }

  .root-game-overview-action-summary {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 13px;
    padding: 8px 10px;
  }

  .root-game-overview-action-icon {
    width: 52px;
    height: 52px;
    font-size: 28px;
  }

  .root-game-overview-action-summary strong {
    font-size: 11px;
  }

  .root-game-overview-action-summary b {
    font-size: 25px;
  }

  .root-game-overview-action-summary small {
    font-size: 10px;
  }

  .root-game-progress-copy .root-game-overview-action-card button,
  .root-game-progress-copy .root-game-overview-action-card > a {
    min-height: 46px;
    font-size: 17px;
  }

  .root-game-overview-course-heading {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 14px;
  }

  .root-game-overview-course-heading h3 {
    font-size: 29px;
  }

  .root-game-overview-course-heading p {
    font-size: 10px;
  }

  .root-game-overview-course-icon {
    width: 80px;
    height: 80px;
    font-size: 40px;
  }

  .root-game-progress-status {
    padding: 12px 14px 0;
  }

  .root-game-progress-status span,
  .root-game-progress-copy .root-game-progress-status button {
    font-size: 11px;
  }

  .root-game-progress-status span i {
    font-size: 18px;
  }
}

@media (max-width: 820px) {
  .root-game-progress-window {
    width: min(760px, calc(100% - 18px));
  }

  .root-game-progress-window > header {
    padding-left: 94px;
  }

  .root-game-progress-header-vine {
    left: -58px;
    height: 220px;
  }

  .root-game-progress-copy {
    padding-inline: 54px 14px;
  }

  .root-game-progress-vine {
    left: -158px;
  }

  .root-game-root-progress {
    grid-template-columns: 100px minmax(0, 1fr) minmax(155px, 190px);
    gap: 14px;
  }

  .root-game-root-progress-level {
    width: 88px;
    height: 88px;
  }

  .root-game-root-progress-level > img {
    width: 70px;
    height: 70px;
  }

  .root-game-root-progress-level strong {
    font-size: 39px;
  }

  .root-game-root-progress-copy h3 {
    font-size: 29px;
  }

  .root-game-root-progress-focus strong {
    font-size: 25px;
  }

  .root-game-progress-overview-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(250px, 0.8fr);
    gap: 14px;
  }

  .root-game-progress-overview-roadmap {
    padding-right: 14px;
  }

  .root-game-progress-overview-growth {
    grid-template-columns: minmax(0, 1fr) minmax(130px, 175px);
  }

  .root-game-progress-overview-growth > img {
    max-height: 175px;
  }
}

@media (max-width: 680px) {
  .root-game-progress-window {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    max-height: calc(100% - 12px);
    border-radius: 14px;
  }

  .root-game-progress-window > header {
    min-height: 76px;
    padding: 14px 18px 13px 78px;
    background-position: -128px 6px;
    background-size: auto 820px;
  }

  .root-game-progress-window > header strong {
    font-size: clamp(21px, 6.5vw, 27px);
  }

  .root-game-progress-header-vine {
    left: -68px;
    height: 194px;
  }

  .root-game-progress-header-vine.is-right,
  .root-game-progress-frame-vine.is-bottom {
    display: none;
  }

  .root-game-progress-frame-vine {
    left: -128px;
    opacity: 0.72;
  }

  .root-game-progress-tabs {
    min-height: 52px;
  }

  .root-game-progress-tabs button {
    min-height: 52px;
    gap: 5px;
    padding-inline: 4px;
    font-size: 11px;
  }

  .root-game-progress-tabs button i {
    font-size: 18px;
  }

  .root-game-progress-copy {
    padding-inline: 42px 10px;
  }

  .root-game-progress-vine {
    left: -174px;
    opacity: 0.62;
  }

  .root-game-root-progress {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 11px;
    padding: 14px 18px 13px 58px;
  }

  .root-game-root-progress-level {
    width: 70px;
    height: 70px;
  }

  .root-game-root-progress-level > img {
    width: 56px;
    height: 56px;
  }

  .root-game-root-progress-level strong {
    font-size: 31px;
  }

  .root-game-root-progress-orbit {
    inset: -15px;
  }

  .root-game-root-progress-pixie-image {
    width: 82px;
    height: 46px;
  }

  .root-game-root-progress-pixie-image.is-orbit {
    top: -19px;
    transform: translateX(-56%) scale(0.96);
  }

  .root-game-root-progress-pixie-image.is-stream {
    top: calc(50% - 4px);
    width: 72px;
    height: 32px;
  }

  .root-game-root-progress-pixie-filament {
    height: 15px;
  }

  .root-game-root-progress-pixie-lead {
    font-size: 20px;
  }

  .root-game-root-progress-copy {
    gap: 5px;
  }

  .root-game-root-progress-track {
    --root-progress-stream-origin: -19px;
  }

  .root-game-root-progress-copy h3 {
    font-size: 25px;
  }

  .root-game-root-progress-copy p {
    display: grid;
    gap: 2px;
    padding-top: 4px;
  }

  .root-game-root-progress-focus {
    grid-column: 1 / -1;
    justify-content: flex-start;
    border-top: 1px solid rgba(29, 69, 52, 0.13);
    border-left: 0;
    padding: 9px 0 0;
  }

  .root-game-progress-panel {
    padding: 12px 5px 8px;
  }

  .root-game-progress-overview-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .root-game-progress-overview-roadmap {
    border-right: 0;
    border-bottom: 1px solid rgba(29, 69, 52, 0.13);
    padding: 4px 0 12px;
  }

  .root-game-progress-overview-roadmap h3 {
    font-size: clamp(25px, 8vw, 31px);
  }

  .root-game-progress-overview-growth {
    grid-template-columns: minmax(0, 1fr) 145px;
  }

  .root-game-progress-overview-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    align-items: stretch;
  }

  .root-game-overview-action-card {
    min-height: 180px;
  }

  .root-game-progress-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .root-game-progress-status nav {
    width: 100%;
    justify-content: flex-end;
  }

  .root-game-course-progress-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .root-game-progress-copy .root-game-course-progress-detail > a {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
}

@media (max-width: 520px) and (max-height: 700px) {
  .root-game-progress-window > header {
    min-height: 68px;
    padding: 10px 14px 9px 82px;
  }

  .root-game-progress-window > header strong {
    font-size: 20px;
    line-height: 1.04;
  }

  .root-game-root-progress {
    gap: 8px;
    padding-block: 9px 8px;
  }

  .root-game-root-progress-level {
    width: 62px;
    height: 62px;
  }

  .root-game-root-progress-level > img {
    width: 50px;
    height: 50px;
  }

  .root-game-root-progress-level strong {
    font-size: 28px;
  }

  .root-game-root-progress-copy h3 {
    font-size: 23px;
  }

  .root-game-root-progress-focus {
    padding-top: 6px;
  }

  .root-game-root-progress-focus strong {
    font-size: 24px;
  }

  .root-game-progress-tabs,
  .root-game-progress-tabs button {
    min-height: 46px;
  }
}

@media (max-width: 520px) {
  .root-game-progress-window > header button {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .root-game-progress-copy {
    padding-inline: 34px 8px;
  }

  .root-game-progress-vine {
    left: -184px;
    opacity: 0.52;
  }

  .root-game-progress-tabs button {
    flex-direction: column;
    gap: 2px;
    font-size: 10px;
  }

  .root-game-progress-tabs button i {
    font-size: 16px;
  }

  .root-game-progress-overview-roadmap > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .root-game-progress-overview-growth {
    grid-template-columns: minmax(0, 1fr) 112px;
  }

  .root-game-progress-overview-growth > img {
    max-height: 145px;
  }

  .root-game-progress-overview-growth li {
    grid-template-columns: 29px minmax(0, 1fr);
    min-height: 42px;
    gap: 7px;
    font-size: 11px;
  }

  .root-game-progress-overview-growth li > i {
    width: 27px;
    height: 27px;
    font-size: 15px;
  }

  .root-game-progress-overview-actions {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(180px, 1fr));
  }

  .root-game-overview-action-card {
    height: auto;
    min-height: 180px;
  }

  .root-game-progress-status > div {
    gap: 6px 12px;
  }

  .root-game-progress-panel .root-game-level-roadmap-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.root-game-stage:has(.root-game-progress-window:not([hidden])) .root-garden-rig-qa-trigger {
  display: none;
}

.root-game-stage:has(.root-game-progress-window:not([hidden])) .root-garden-tutorial-backdrop {
  display: none;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .root-game-progress-panel,
  .root-game-root-progress-level,
  .root-game-root-progress-orbit,
  .root-game-root-progress-orbit > i,
  .root-game-root-progress-pixie-stream::before,
  .root-game-root-progress-pixie-filament,
  .root-game-root-progress-pixie-stream > i,
  .root-game-root-progress-track {
    animation: none !important;
    transition: none !important;
  }

  .root-game-root-progress-pixie-stream::before,
  .root-game-root-progress-pixie-filament,
  .root-game-root-progress-pixie-stream > i {
    animation: none !important;
  }

  .root-game-root-progress-pixie-image {
    animation: none !important;
    opacity: 0 !important;
  }

  .root-game-root-progress-pixie-stream::before {
    opacity: 0.2;
    transform: scaleX(1);
  }

  .root-game-root-progress-pixie-filament {
    clip-path: inset(0);
    opacity: 0.58;
  }

  .root-game-root-progress-pixie-stream > i {
    left: var(--root-progress-position, 0%);
    opacity: 0;
  }
}

@media (max-width: 760px) {
  /* The account control stays in the same flex row as the other cards. */
  .root-game-tool-scroll > .root-game-member-slot {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: 1;
    display: flex !important;
    width: 60px;
    min-width: 60px;
    height: 54px;
    min-height: 54px;
    flex: 0 0 60px;
    align-self: stretch;
    margin: 0;
    padding: 0;
    transform: none !important;
  }

  .root-game-tool-scroll > .root-game-member-slot .lrl-member-shell__trigger,
  .root-game-tool-scroll > .root-game-member-slot .root-game-member-signin {
    width: 100%;
    min-height: 54px;
    height: 54px;
    align-self: stretch;
    border-radius: 7px;
    padding: 4px 2px;
  }

  .root-game-tool-scroll > .root-game-member-slot .lrl-member-shell__trigger {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .root-game-tool-scroll > .root-game-member-slot .lrl-member-shell__identity {
    display: none !important;
  }

  .root-game-tool-scroll > .root-game-member-slot .lrl-member-shell__avatar {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    margin: 0 !important;
    align-self: center !important;
    transform: translateY(-11px) !important;
  }

  .root-game-tool-scroll > .root-game-member-slot .lrl-member-shell__caret {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
  }
}

/* Final mobile interaction pass. These rules intentionally come last so
   legacy tutorial and dock rules cannot hide the controls again. */
@media (max-width: 760px) {
  .root-game-direct-queue-target,
  .root-game-direct-queue-marker {
    width: 50px;
    height: 50px;
  }

  .root-game-direct-queue-marker-frame {
    font-size: 31px;
  }

  .root-game-direct-queue-marker-icon {
    display: none;
  }

  .root-game-direct-queue-marker-cancel-icon {
    position: relative;
    z-index: 2;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: #123f32;
    color: #fff4c5;
    font-size: 13px;
    box-shadow: 0 0 0 1px rgba(255, 244, 197, 0.42);
  }

  .root-game-direct-queue-menu {
    display: none !important;
  }

  .root-game-tool-dock {
    min-height: 86px;
    grid-template-rows: 16px 54px 5px;
    gap: 3px;
    padding: 5px;
  }

  .root-game-tool-scroll .root-game-tool-group > *,
  .root-game-tool-scroll > .root-game-member-slot,
  .root-game-tool-scroll > .root-game-structure-view,
  .root-game-tool-scroll > .root-game-expand {
    flex-basis: 60px;
    width: 60px;
    min-width: 60px;
    min-height: 54px;
    padding: 4px 2px;
  }

  .root-game-tool-dock .root-game-tool-scroll-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    display: grid !important;
    visibility: visible !important;
    filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .root-game-tool-scroll-button i {
    font-size: 18px;
  }

  .root-game-tool-scroll .root-game-tool-group > * > b {
    font-size: 10px;
  }

  .root-game-tool-shelf-heading,
  .root-game-tool-scroll-dots {
    display: flex !important;
    visibility: visible !important;
    filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .root-game-zoom-controls {
    display: grid;
    bottom: 100px;
  }
}