.light-garden-page {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  color: #f8f3fc;
  background: #100d21;
  --muted: #c9bfdc;
  --mint: #a5f2d5;
  --gold: #ffda93;
  --outline: #a5f2d5;
}
.garden-wrap { width: min(100% - 48px, 1080px); margin-inline: auto; }
.light-garden-page :focus-visible { outline: 3px solid var(--outline); outline-offset: 3px; }
.light-garden-page .collection-header { height: 70px; border-color: #382e53; }
.light-garden-page .brand { color: #f8f3fc; font-size: .8rem; font-weight: 850; letter-spacing: .17em; }
.light-garden-page .brand-light { color: var(--mint); font-weight: inherit; margin-left: .45em; }
.light-garden-page .all-games-link { color: var(--muted); }
.garden-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(28px, 5vw, 68px);
  min-height: 600px;
  padding-block: 32px;
}
.garden-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    radial-gradient(ellipse at 73% 45%, #4a2a63 0, transparent 63%),
    radial-gradient(ellipse at 20% 82%, #0c433d 0, transparent 53%);
  pointer-events: none;
}
.garden-intro { padding-inline: clamp(0px, 3vw, 30px) 0; }
.garden-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 15px;
  color: var(--mint);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.garden-eyebrow::before {
  width: .52rem;
  height: .52rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 13px currentColor;
  content: "";
}
.garden-title {
  margin: 0;
  font: 700 clamp(3.25rem, 7.2vw, 6.5rem)/.87 Georgia, serif;
  letter-spacing: -.065em;
}
.garden-title span { display: block; color: var(--gold); font-style: italic; }
.garden-intro-copy {
  max-width: 29ch;
  margin: 22px 0;
  color: var(--muted);
  font-size: clamp(.97rem, 1.75vw, 1.12rem);
  line-height: 1.5;
}
.garden-intro-copy strong { color: #fff; }
.hint-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border: 1px solid #4c5c69;
  border-radius: 14px;
  background: #171d32;
  color: var(--muted);
  font-size: .82rem;
}
.hint-card strong { display: block; color: var(--mint); }
.hint-pattern {
  flex: 0 0 37px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.hint-pattern span { aspect-ratio: 1; border-radius: 3px; background: #31374a; }
.hint-pattern :is(:nth-child(2), :nth-child(4), :nth-child(6), :nth-child(8)) { background: #75b8a9; }
.hint-pattern :nth-child(5) { background: var(--gold); }
.garden-panel {
  --bloom: #ffcf78;
  --glint: #fff5d3;
  --shade: #3f2a3e;
  width: min(100%, 435px);
  justify-self: center;
  padding: clamp(14px, 3vw, 27px);
  border: 1px solid #786498;
  border-radius: 28px;
  background: linear-gradient(145deg, #251d40, #18152c 72%);
  box-shadow: 0 24px 62px #0b071a99, inset 0 0 0 5px #ffffff09;
}
.garden-panel[data-stage="1"] { --bloom: #92edcd; --glint: #e6fff4; --shade: #214744; }
.garden-panel[data-stage="2"] { --bloom: #f6a9dd; --glint: #fff0fa; --shade: #4d2d59; }
.garden-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.garden-stats div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid #55466f;
  border-radius: 11px;
  background: #1b1631;
}
.garden-stats span {
  color: var(--muted);
  font-size: .65rem;
  font-weight: 720;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.garden-stats strong { font-size: 1rem; color: var(--glint); }
.garden-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 320px);
  margin: 0 auto;
}
.garden-tile {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c6afdf;
  font: 500 clamp(1.55rem, 5vw, 2.65rem)/1 Georgia, serif;
  touch-action: manipulation;
  cursor: pointer;
  transition: color 160ms;
}
/* Keep the button hit box fixed while the rounded lamp face moves. */
.garden-tile::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid #65537d;
  border-radius: clamp(11px, 2vw, 19px);
  background: radial-gradient(circle at 45% 28%, var(--shade), #211832 78%);
  box-shadow: inset 0 -4px 0 #110c24, inset 0 1px 0 #ffffff1c;
  content: "";
  pointer-events: none;
  transition: box-shadow 160ms, transform 120ms;
}
.garden-tile[data-lit="true"] { color: #3d234e; }
.garden-tile[data-lit="true"]::before {
  border-color: var(--glint);
  background: radial-gradient(circle at 38% 29%, var(--glint), var(--bloom) 72%);
  box-shadow: inset 0 -4px 0 #5d1e4730, 0 0 17px color-mix(in srgb, var(--bloom), transparent 60%);
}
.garden-tile:disabled { opacity: 1; cursor: default; }
.garden-tile:active:not(:disabled)::before { transform: scale(.95); }
@media (hover: hover) {
  .garden-tile:hover:not(:disabled)::before { outline: 1px solid var(--glint); outline-offset: 2px; }
}
.garden-status {
  display: grid;
  place-items: center;
  min-height: 39px;
  margin: 7px 0;
  color: var(--muted);
  text-align: center;
  font-size: .85rem;
}
.garden-panel:is([data-state="between"], [data-state="won"]) .garden-status {
  color: var(--glint);
  font-weight: 760;
}
.garden-panel:is([data-state="between"], [data-state="won"]) .garden-grid {
  animation: bloom 500ms ease-out;
}
@keyframes bloom {
  50% { filter: brightness(1.16); }
}
.garden-controls { display: flex; gap: 8px; margin-top: 13px; }
.garden-controls button {
  flex: 1;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid #716084;
  border-radius: 11px;
  background: #302549;
  color: #f8f3fc;
  font: 730 .9rem system-ui, sans-serif;
  cursor: pointer;
}
.garden-controls button[hidden] { display: none; }
.garden-controls button:disabled { opacity: .6; cursor: default; }
.garden-controls .garden-primary { border-color: var(--mint); background: var(--mint); color: #18253a; }
.light-garden-page .ad-slot { margin: 14px auto 24px; border-color: #382e53; }
.light-garden-page .ad-label, .light-garden-page .mini-instructions p { color: var(--muted); }
.light-garden-page .mini-instructions, .light-garden-page .collection-footer { border-color: #382e53; }
.light-garden-page .collection-footer { color: var(--muted); }
.light-garden-page .mini-instructions a { color: var(--mint); }
@media (max-width: 690px) {
  .garden-wrap { width: min(100% - 28px, 490px); }
  .light-garden-page .collection-header { height: 50px; }
  .garden-hero { grid-template-columns: 1fr; min-height: 0; gap: 19px; padding-block: 21px 25px; }
  .garden-intro { padding: 0; }
  .garden-eyebrow { margin-bottom: 9px; }
  .garden-title { font-size: clamp(2.7rem, 10.5vw, 4.25rem); line-height: 1; }
  .garden-title span { display: inline; }
  .garden-intro-copy { max-width: 37ch; margin: 9px 0 0; }
  .hint-card { display: none; }
  .garden-panel { width: 100%; }
  .garden-grid { width: min(100%, 286px); }
}
@media (prefers-reduced-motion: reduce) {
  .garden-tile, .garden-tile::before { transition: none; }
  .garden-panel:is([data-state="between"], [data-state="won"]) .garden-grid { animation: none; }
}