:root {
  color-scheme: dark;
  --night: #04110f;
  --deep: #071d19;
  --moss: #0c3228;
  --paper: #f6ffe7;
  --muted: rgba(230, 245, 225, .8);
  --faint: rgba(230, 245, 225, .61);
  --mint: #7ce8bd;
  --mint-bright: #d8ffe9;
  --cyan: #6fe7f1;
  --coral: #ff9a83;
  --gold: #ffd878;
  --violet: #bba4ff;
  --danger: #ff8299;
  --line: rgba(243, 255, 225, .15);
  --glass: rgba(4, 21, 18, .76);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--night);
}

body {
  color: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { color: inherit; font: inherit; }

button:focus-visible,
#gameCanvas:focus-visible {
  outline: 3px solid var(--mint-bright);
  outline-offset: 4px;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  user-select: none;
}

#gameCanvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  cursor: crosshair;
  touch-action: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(23, 79, 63, .64), transparent 34%),
    radial-gradient(circle at 50% 80%, rgba(255, 154, 131, .09), transparent 36%),
    linear-gradient(165deg, #0b2922 0%, #061a17 48%, #030d0d 100%);
}

.canopy-veil,
.prism-haze,
.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.canopy-veil {
  background:
    radial-gradient(circle at 50% 48%, transparent 25%, rgba(2, 11, 9, .06) 48%, rgba(1, 7, 7, .62) 115%),
    linear-gradient(180deg, rgba(1, 9, 8, .46), transparent 22%, transparent 70%, rgba(1, 8, 8, .55));
}

.prism-haze {
  inset: -15%;
  opacity: .32;
  filter: none;
  background:
    radial-gradient(ellipse at 28% 42%, rgba(111, 231, 241, .09), transparent 24%),
    radial-gradient(ellipse at 72% 48%, rgba(255, 154, 131, .08), transparent 25%),
    radial-gradient(ellipse at 52% 72%, rgba(255, 216, 120, .07), transparent 25%);
  animation: none;
}

.grain {
  inset: -28%;
  z-index: 2;
  opacity: .018;
  mix-blend-mode: normal;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.92'/%3E%3C/svg%3E");
  animation: none;
}

@keyframes prism-breathe {
  to { opacity: .8; transform: translate3d(1.5%, -1%, 0) scale(1.035); }
}

@keyframes grain-drift {
  0% { transform: translate3d(-2%, -3%, 0); }
  25% { transform: translate3d(3%, 1%, 0); }
  50% { transform: translate3d(-1%, 4%, 0); }
  75% { transform: translate3d(4%, -1%, 0); }
  100% { transform: translate3d(-2%, -3%, 0); }
}

.is-hidden { display: none !important; }

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

.glass {
  border: 1px solid rgba(243, 255, 225, .15);
  background: linear-gradient(145deg, rgba(7, 32, 27, .94), rgba(3, 15, 16, .9));
  box-shadow: inset 0 1px rgba(255, 255, 255, .065), 0 18px 54px rgba(0, 0, 0, .27);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.eyebrow {
  color: rgba(243, 255, 225, .72);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.2;
}

.hud {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  transition: opacity .7s ease, filter .7s ease;
}

.hud.is-cinematic .phase-card,
.hud.is-cinematic .score-card,
.hud.is-cinematic .objective-card,
.hud.is-cinematic .vitals-panel,
.hud.is-cinematic .run-stats,
.hud.is-cinematic .control-hint { opacity: .16; filter: saturate(.55); }

.hud.is-cinematic .hud-actions { opacity: 1; filter: none; }

.hud button { pointer-events: auto; }

.hud-top {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(22px, env(safe-area-inset-right));
  left: max(22px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
  align-items: start;
  gap: 16px;
}

.phase-card {
  justify-self: start;
  min-width: 255px;
  padding: 13px 17px 12px;
  border-radius: 5px 18px 5px 18px;
}

.phase-card strong {
  display: block;
  margin-top: 4px;
  color: var(--cyan);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .035em;
}

.phase-card small {
  display: block;
  margin-top: 3px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
}

.score-card {
  min-width: 210px;
  text-align: center;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .68);
}

.score-card strong {
  display: block;
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: .98;
}

.score-card small {
  color: var(--gold);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
}

.hud-actions {
  justify-self: end;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 18px 5px 18px 5px;
}

.icon-button {
  width: 46px;
  height: 43px;
  border: 0;
  border-radius: 12px 4px 12px 4px;
  color: rgba(243, 255, 225, .82);
  background: transparent;
  cursor: pointer;
  font-size: 19px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.icon-button:hover {
  color: var(--mint-bright);
  background: rgba(255, 255, 255, .075);
  transform: translateY(-1px);
}

.objective-card {
  position: absolute;
  top: max(103px, calc(env(safe-area-inset-top) + 103px));
  left: 50%;
  display: grid;
  width: min(560px, calc(100vw - 44px));
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-color: rgba(124, 232, 189, .25);
  border-radius: 19px 5px 19px 5px;
  transform: translateX(-50%);
}

.objective-mark {
  color: var(--mint);
  font: 32px/1 Georgia, serif;
  text-shadow: 0 0 20px rgba(124, 232, 189, .55);
  animation: objective-pulse 1.8s ease-in-out infinite;
}

@keyframes objective-pulse { 50% { opacity: .55; transform: scale(.82) rotate(45deg); } }

.objective-card strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--paper);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: .065em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#objectiveProgress {
  min-width: 68px;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.vitals-panel {
  position: absolute;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: max(22px, env(safe-area-inset-left));
  width: min(350px, calc(100vw - 44px));
  padding: 14px 16px 15px;
  border-color: rgba(124, 232, 189, .22);
  border-radius: 5px 21px 5px 21px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .075), 0 19px 58px rgba(0, 0, 0, .35), 0 0 46px rgba(124, 232, 189, .055);
}

.petal-block {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(243, 255, 225, .12);
}

.vital-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.petal-block .vital-heading { display: block; }

.vital-heading strong {
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.petal-block .vital-heading strong {
  display: block;
  margin-top: 2px;
  font-size: 24px;
}

.petal-display {
  display: flex;
  gap: 8px;
  min-width: 108px;
  justify-content: flex-end;
}

.petal-display span {
  color: var(--coral);
  font-size: 28px;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255, 154, 131, .52);
  transform: rotate(45deg);
  transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}

.petal-display span.is-lost {
  opacity: .19;
  filter: grayscale(1);
  transform: rotate(45deg) scale(.72);
}

.crownlight-block { padding-top: 11px; }

.crownlight-track {
  position: relative;
  height: 14px;
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid rgba(243, 255, 225, .14);
  border-radius: 999px;
  background: rgba(0, 0, 0, .31);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .35);
}

.crownlight-track::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: repeating-linear-gradient(90deg, transparent 0 24%, rgba(5, 19, 17, .58) 24% 25%);
  pointer-events: none;
}

#crownlightFill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--mint), var(--gold), var(--coral));
  box-shadow: 0 0 18px rgba(124, 232, 189, .72);
  transition: width .42s cubic-bezier(.2, .75, .25, 1), filter .2s ease;
}

.run-stats {
  position: absolute;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  display: grid;
  min-width: 236px;
  grid-template-columns: repeat(2, 1fr);
  padding: 10px;
  border-radius: 19px 5px 19px 5px;
}

.run-stats > div { min-width: 100px; padding: 3px 10px; text-align: center; }
.run-stats > div + div { border-left: 1px solid rgba(243, 255, 225, .12); }
.run-stats span { display: block; color: var(--faint); font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.run-stats strong { display: block; margin-top: 2px; color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 400; font-variant-numeric: tabular-nums; }

.control-hint {
  position: absolute;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(104px, calc(env(safe-area-inset-bottom) + 104px));
  display: flex;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 14px 4px 14px 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

kbd {
  display: inline-grid;
  min-width: 23px;
  height: 22px;
  place-items: center;
  padding: 0 5px;
  border: 1px solid rgba(243, 255, 225, .2);
  border-bottom-color: rgba(243, 255, 225, .35);
  border-radius: 5px;
  color: var(--mint-bright);
  background: rgba(255, 255, 255, .065);
  font: 800 11px/1 ui-sans-serif, system-ui, sans-serif;
}

.toast {
  position: absolute;
  top: 176px;
  left: 50%;
  z-index: 18;
  max-width: min(600px, 88vw);
  padding: 11px 18px;
  border: 1px solid rgba(243, 255, 225, .18);
  border-radius: 17px 5px 17px 5px;
  color: var(--paper);
  background: rgba(3, 18, 16, .92);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .42);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-style: italic;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -9px);
  transition: opacity .25s ease, transform .25s ease;
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-perfect { border-color: rgba(255, 216, 120, .55); color: var(--gold); }
.toast.is-danger { border-color: rgba(255, 130, 153, .58); color: #ffd4dc; }

.overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  overflow: auto;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  touch-action: pan-y;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 50% 45%, rgba(17, 64, 50, .16), transparent 38%),
    rgba(1, 10, 9, .69);
  backdrop-filter: blur(13px) saturate(.86);
  -webkit-backdrop-filter: blur(13px) saturate(.86);
  transition: opacity .4s ease, visibility .4s ease;
}

.overlay.is-visible { visibility: visible; opacity: 1; pointer-events: auto; }

.ornate-panel {
  position: relative;
  width: min(980px, calc(100vw - 44px));
  border: 1px solid rgba(243, 255, 225, .19);
  border-radius: 6px 28px 6px 28px;
  background:
    radial-gradient(circle at 18% 5%, rgba(111, 231, 241, .1), transparent 33%),
    radial-gradient(circle at 82% 8%, rgba(255, 154, 131, .095), transparent 32%),
    radial-gradient(circle at 50% 120%, rgba(255, 216, 120, .08), transparent 47%),
    linear-gradient(145deg, rgba(9, 42, 34, .97), rgba(3, 16, 17, .97));
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 34px 120px rgba(0, 0, 0, .58), 0 0 100px rgba(124, 232, 189, .06);
}

.ornate-panel::before,
.ornate-panel::after {
  content: "";
  position: absolute;
  width: 66px;
  height: 66px;
  pointer-events: none;
}

.ornate-panel::before {
  top: 14px;
  left: 14px;
  border-top: 1px solid rgba(111, 231, 241, .72);
  border-left: 1px solid rgba(111, 231, 241, .72);
  border-radius: 18px 0 0;
}

.ornate-panel::after {
  right: 14px;
  bottom: 14px;
  border-right: 1px solid rgba(255, 154, 131, .75);
  border-bottom: 1px solid rgba(255, 154, 131, .75);
  border-radius: 0 0 18px;
}

.title-panel { padding: 32px 50px 30px; text-align: center; }

.studio-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.studio-mark span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: var(--night);
  background: var(--gold);
  box-shadow: 0 0 24px rgba(255, 216, 120, .38);
}

.guardian-emblem {
  position: relative;
  width: 100px;
  height: 30px;
  margin: 12px auto 2px;
}

.guardian-emblem i {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 36px;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(216, 255, 233, .9), transparent);
}

.guardian-emblem i:nth-child(1) { transform: rotate(180deg); background: linear-gradient(90deg, rgba(216, 255, 233, .9), transparent); }
.guardian-emblem i:nth-child(2) { transform: rotate(-28deg); background: linear-gradient(90deg, var(--coral), transparent); }
.guardian-emblem i:nth-child(3) { transform: rotate(28deg); background: linear-gradient(90deg, var(--cyan), transparent); }

.guardian-emblem span {
  position: absolute;
  top: 0;
  left: 50%;
  color: var(--mint-bright);
  font: 29px/1 Georgia, serif;
  text-shadow: 0 0 24px rgba(124, 232, 189, .58);
  transform: translateX(-50%);
}

.tree-kicker {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .17em;
}

.title-panel h1 {
  margin: 5px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(54px, 7.8vw, 88px);
  font-weight: 400;
  letter-spacing: .055em;
  line-height: .93;
  text-shadow: 0 4px 46px rgba(0, 0, 0, .48);
}

.title-panel h1 span { color: var(--coral); }

.tree-name {
  margin: 6px 0 0;
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .19em;
}

.tagline {
  margin: 9px 0 13px;
  color: var(--mint-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-style: italic;
}

.premise {
  max-width: 760px;
  margin: 0 auto 18px;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.48;
}

.how-to {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 10px;
}

.how-to article {
  display: flex;
  min-height: 94px;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(243, 255, 225, .1);
  border-radius: 16px 5px 16px 5px;
  text-align: left;
  background: linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014));
}

.step-number { color: rgba(255, 154, 131, .57); font-family: Georgia, "Times New Roman", serif; font-size: 29px; }
.how-to strong { display: block; margin-bottom: 4px; color: var(--gold); font-size: 14px; letter-spacing: .085em; }
.how-to small { display: block; color: var(--muted); font-size: 15px; line-height: 1.36; }

.control-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 8px 0 13px;
  color: var(--faint);
  font-size: 13px;
}

.control-row b { margin-right: 4px; color: var(--cyan); font-size: 11px; letter-spacing: .08em; }

.primary-button {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  overflow: hidden;
  border: 0;
  border-radius: 16px 5px 16px 5px;
  color: #061512;
  background: linear-gradient(100deg, var(--mint-bright), var(--cyan) 38%, var(--gold) 70%, var(--coral));
  box-shadow: 0 14px 42px rgba(124, 232, 189, .15);
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .1em;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.primary-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .48) 48%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .72s ease;
}

.primary-button:hover { filter: brightness(1.06); box-shadow: 0 18px 50px rgba(124, 232, 189, .23); transform: translateY(-2px); }
.primary-button:hover::after { transform: translateX(120%); }
.primary-button span,
.primary-button i { position: relative; z-index: 1; }
.primary-button i { font: normal 26px/1 Georgia, serif; }

.title-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  color: rgba(230, 245, 225, .58);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.pause-panel,
.result-panel { padding: 39px 46px 36px; text-align: center; }
.pause-panel { width: min(580px, calc(100vw - 44px)); }
.result-panel { width: min(790px, calc(100vw - 44px)); }

.panel-symbol,
.result-symbol {
  display: block;
  margin-bottom: 9px;
  color: var(--mint-bright);
  font: 48px/1 Georgia, serif;
  text-shadow: 0 0 30px rgba(124, 232, 189, .48);
}

.result-symbol { color: var(--gold); text-shadow: 0 0 32px rgba(255, 216, 120, .46); }

.pause-panel h2,
.result-panel h2 {
  margin: 7px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 5vw, 50px);
  font-weight: 400;
}

.pause-panel > p,
.result-copy {
  margin: 0 auto 21px;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.5;
}

.text-button {
  margin-top: 15px;
  padding: 9px 13px;
  border: 0;
  color: rgba(230, 245, 225, .76);
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.text-button:hover { color: var(--paper); }

.result-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.result-stats article {
  min-height: 84px;
  padding: 12px 8px;
  border: 1px solid rgba(243, 255, 225, .1);
  border-radius: 14px 5px 14px 5px;
  background: rgba(255, 255, 255, .03);
}

.result-stats span { display: block; margin-bottom: 6px; color: var(--faint); font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.result-stats strong { display: block; color: var(--paper); font-family: Georgia, "Times New Roman", serif; font-size: clamp(20px, 2.6vw, 28px); font-weight: 400; font-variant-numeric: tabular-nums; }

.result-best {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 216, 120, .18);
  border-radius: 14px 5px 14px 5px;
  color: rgba(243, 255, 225, .72);
  background: rgba(255, 216, 120, .055);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}

.result-best strong { color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 400; }

@media (pointer: coarse) {
  #gameCanvas { cursor: default; }
  .icon-button { width: 50px; height: 48px; }
  .primary-button { min-height: 63px; }
  .control-hint { display: none; }
}

@media (max-width: 780px) {
  .hud-top { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); left: max(10px, env(safe-area-inset-left)); grid-template-columns: 1fr auto 1fr; gap: 6px; }
  .phase-card { min-width: 0; padding: 10px 11px; }
  .phase-card .eyebrow,
  .phase-card small { display: none; }
  .phase-card strong { margin: 0; font-size: 17px; }
  .score-card { min-width: 108px; }
  .score-card .eyebrow { display: none; }
  .score-card strong { font-size: 31px; }
  .score-card small { font-size: 14px; }
  .hud-actions { padding: 2px; }
  .objective-card { top: 78px; width: calc(100vw - 20px); grid-template-columns: 28px minmax(0, 1fr) auto; gap: 7px; padding: 9px 11px; }
  .objective-mark { font-size: 25px; }
  .objective-card .eyebrow { display: none; }
  .objective-card strong { margin: 0; font-size: 15px; }
  #objectiveProgress { min-width: 51px; font-size: 19px; }
  .vitals-panel { bottom: max(10px, env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); width: min(315px, calc(100vw - 20px)); padding: 10px 12px 11px; }
  .petal-block { padding-bottom: 8px; }
  .vital-heading .eyebrow { font-size: 13px; }
  .vital-heading strong { font-size: 19px; }
  .petal-block .vital-heading strong { font-size: 21px; }
  .petal-display span { font-size: 24px; }
  .crownlight-block { padding-top: 7px; }
  .run-stats { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); min-width: 183px; padding: 7px; }
  .run-stats > div { min-width: 77px; padding: 2px 6px; }
  .run-stats span { font-size: 13px; }
  .run-stats strong { font-size: 22px; }
  .control-hint { display: none; }
  .toast { top: 137px; font-size: 17px; }
  .title-panel { padding: 28px 22px 25px; }
  .studio-mark { font-size: 12px; }
  .guardian-emblem { margin-top: 8px; }
  .title-panel h1 { font-size: clamp(43px, 12vw, 54px); letter-spacing: .02em; }
  .tree-name { font-size: 13px; }
  .tagline { font-size: 19px; }
  .premise { display: none; }
  .how-to { grid-template-columns: 1fr; gap: 5px; }
  .how-to article { min-height: 66px; padding: 9px 11px; }
  .how-to small { font-size: 15px; }
  .control-row { flex-wrap: wrap; gap: 4px 15px; font-size: 14px; }
  .title-footer { display: none; }
  .pause-panel,
  .result-panel { padding: 32px 22px 28px; }
  .result-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 590px) {
  .phase-card { max-width: 130px; }
  .phase-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hud-actions .icon-button { width: 44px; height: 44px; font-size: 17px; }
  .vitals-panel { width: 245px; }
  .petal-display { min-width: 89px; gap: 5px; }
  .petal-display span { font-size: 21px; }
  .run-stats { min-width: 144px; }
  .run-stats > div { min-width: 60px; }
}

@media (max-width: 430px) {
  .overlay {
    padding: 10px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .glass {
    background: rgba(4, 21, 18, .94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hud-top { grid-template-columns: minmax(0, 1fr) auto; }
  .phase-card { display: none; }
  .score-card { justify-self: start; text-align: left; }
  .hud-actions { grid-column: 2; }
  .objective-card { top: 68px; }
  .vitals-panel { width: calc(100vw - 20px); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 66px); }
  .run-stats { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: auto; }
  .toast { top: 126px; }
  .tree-kicker { font-size: 12px; }
  .pause-panel,
  .result-panel { width: 100%; padding: 26px 14px 22px; }
  .result-stats,
  .result-stats article { min-width: 0; }
  .result-stats strong { overflow-wrap: anywhere; font-size: 18px; }
  .result-stats article:nth-child(2) strong { white-space: nowrap; font-size: 16px; letter-spacing: -.03em; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .overlay { padding: 9px; }
  .glass {
    background: rgba(4, 21, 18, .92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hud-top { top: max(9px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); left: max(12px, env(safe-area-inset-left)); }
  .phase-card { min-width: 0; max-width: 238px; padding: 8px 12px; }
  .phase-card .eyebrow,
  .phase-card small { display: none; }
  .phase-card strong { margin: 0; font-size: 18px; line-height: 1.12; }
  .score-card { padding-top: 2px; }
  .score-card .eyebrow,
  .score-card small { display: none; }
  .score-card strong { font-size: 32px; }
  .title-panel { width: min(940px, calc(100vw - 18px)); padding: 14px 28px 15px; }
  .guardian-emblem,
  .premise,
  .title-footer { display: none; }
  .tree-kicker { font-size: 12px; }
  .title-panel h1 { margin-top: 2px; font-size: 43px; }
  .tree-name { margin-top: 2px; }
  .tagline { margin: 3px 0 8px; font-size: 17px; }
  .how-to { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 5px; }
  .how-to article { min-height: 62px; padding: 7px 10px; }
  .how-to small { font-size: 15px; line-height: 1.25; }
  .step-number { font-size: 21px; }
  .control-row { margin: 4px 0 6px; font-size: 13px; }
  .primary-button { min-height: 47px; }
  .pause-panel,
  .result-panel { width: min(760px, calc(100vw - 18px)); padding: 17px 28px; }
  .panel-symbol,
  .result-symbol { display: none; }
  .pause-panel h2,
  .result-panel h2 { margin: 3px 0; font-size: 30px; }
  .pause-panel > p,
  .result-copy { margin-bottom: 9px; font-size: 16px; }
  .result-stats article { min-height: 58px; padding: 6px; }
  .result-stats strong { font-size: 20px; }
  .result-best { padding: 6px 11px; margin-bottom: 7px; }
  .objective-card { top: 72px; width: min(560px, calc(100vw - 270px)); }
  .toast { top: 145px; }
  .vitals-panel { width: 300px; padding: 9px 12px; }
  .petal-block { padding-bottom: 6px; }
  .crownlight-block { padding-top: 6px; }
  .control-hint { display: none; }
}

@media (max-height: 430px) and (orientation: landscape) {
  .hud-top {
    top: max(6px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
  }
  .phase-card { max-width: 205px; padding: 6px 10px; }
  .phase-card strong { font-size: 16px; }
  .score-card strong { font-size: 27px; }
  .hud-actions .icon-button { width: 44px; height: 44px; }
  .objective-card { top: 61px; width: min(480px, calc(100vw - 32px)); padding: 7px 10px; }
  .objective-card strong { font-size: 14px; }
  #objectiveProgress { font-size: 17px; }
  .toast { top: 113px; }
  .vitals-panel {
    left: max(8px, env(safe-area-inset-left));
    bottom: max(7px, env(safe-area-inset-bottom));
    width: min(252px, 43vw);
    padding: 6px 9px 7px;
    display: grid;
    grid-template-columns: minmax(92px, .9fr) minmax(105px, 1.1fr);
    align-items: center;
    gap: 9px;
  }
  .petal-block,
  .crownlight-block { padding: 0; }
  .crownlight-block { border-top: 0; border-left: 1px solid rgba(246, 255, 239, .12); padding-left: 9px; }
  .vital-heading .eyebrow { font-size: 11px; }
  .vital-heading strong,
  .petal-block .vital-heading strong { font-size: 17px; }
  .petal-display { min-width: 62px; gap: 3px; }
  .petal-display span { font-size: 17px; }
  .crownlight-track { height: 8px; margin-top: 5px; }
  .run-stats {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(7px, env(safe-area-inset-bottom));
    min-width: 132px;
    padding: 5px;
  }
  .run-stats > div { min-width: 54px; padding: 1px 5px; }
  .run-stats span { font-size: 11px; }
  .run-stats strong { font-size: 18px; }
}

@media (prefers-contrast: more) {
  :root { --muted: rgba(246, 255, 239, .94); --faint: rgba(246, 255, 239, .8); }
  .glass,
  .ornate-panel { border-color: rgba(246, 255, 239, .38); }
  .eyebrow { color: rgba(246, 255, 239, .92); }
}

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