:root {
  color-scheme: light;
  --bg-top: #d8eefb;
  --bg-bottom: #fdf6e2;
  --ink: #16324a;
  --muted: #5f7890;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-border: rgba(102, 147, 184, 0.28);
  --shadow: 0 20px 50px rgba(46, 92, 138, 0.18);
  --accent: #367fc4;
  --accent-strong: #235f9b;
  --accent-soft: #e3f3ff;
  --grass: #6bbf7a;
  --grass-dark: #3c8f53;
  --drop: #48a7ee;
  --drop-soft: #b8e4ff;
  --peak: #7f8ca4;
  --peak-dark: #5f6d86;
  --cell-gap: 0.55rem;
  --rail-size: 3.35rem;
  --radius: 1.6rem;
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.88), transparent 18rem),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.72), transparent 16rem),
    linear-gradient(180deg, var(--bg-top) 0%, #edf8ff 42%, var(--bg-bottom) 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
  border-radius: 999px;
  filter: blur(2px);
}

body::before {
  top: 4rem;
  left: -5rem;
  width: 13rem;
  height: 5.2rem;
  background: rgba(255, 255, 255, 0.32);
  box-shadow:
    3.5rem 0.75rem 0 0 rgba(255, 255, 255, 0.3),
    7.4rem -0.2rem 0 0 rgba(255, 255, 255, 0.26);
}

body::after {
  right: -4rem;
  bottom: 7rem;
  width: 11rem;
  height: 4.8rem;
  background: rgba(255, 255, 255, 0.24);
  box-shadow:
    -3rem 0.9rem 0 0 rgba(255, 255, 255, 0.24),
    -6.5rem 0.15rem 0 0 rgba(255, 255, 255, 0.2);
}

.shell {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: 1rem 0 2.5rem;
}

.topnav {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin: 0.25rem 0 1rem;
  color: var(--muted);
  font-size: 0.98rem;
}

.topnav a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

.topnav a:hover,
.topnav a:focus-visible {
  color: var(--accent-strong);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.hero {
  padding: 1.5rem;
}

.eyebrow,
.mini,
.label {
  margin: 0;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 700;
}

.hero h1,
.board-head h2,
.side-panel h2 {
  margin: 0.3rem 0 0.4rem;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
}

.subtitle {
  margin: 0;
  max-width: 48rem;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.55;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1rem 0;
}

.stat {
  padding: 1rem 1.1rem;
}

.stat strong {
  display: block;
  margin-top: 0.35rem;
  font-size: 1.25rem;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr);
  gap: 1rem;
  align-items: start;
}

.board-panel {
  padding: 1rem;
}

.board-head,
.side-head {
  display: flex;
  gap: 1rem;
  align-items: start;
  justify-content: space-between;
}

.button-row {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 0.75rem 1rem;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #e6f4ff 100%);
  box-shadow:
    inset 0 -1px 0 rgba(31, 64, 97, 0.1),
    0 8px 18px rgba(64, 104, 145, 0.14);
  cursor: pointer;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease,
    opacity 140ms ease;
}

button:hover:not(:disabled),
button:focus-visible:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 -1px 0 rgba(31, 64, 97, 0.1),
    0 10px 20px rgba(64, 104, 145, 0.18);
}

button:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
  box-shadow:
    inset 0 -1px 0 rgba(31, 64, 97, 0.08),
    0 5px 12px rgba(64, 104, 145, 0.08);
}

button.primary {
  color: #fff;
  background: linear-gradient(180deg, #4f9be1 0%, #2f72b7 100%);
}

.status {
  margin: 1rem 0 1.1rem;
  min-height: 3.6rem;
  padding: 0.95rem 1rem;
  border-radius: 1.1rem;
  background: rgba(238, 248, 255, 0.9);
  border: 1px solid rgba(85, 140, 184, 0.18);
  line-height: 1.45;
}

.status.status-success {
  background: rgba(236, 252, 240, 0.94);
  border-color: rgba(82, 174, 104, 0.28);
}

.status.status-danger {
  background: rgba(255, 240, 238, 0.96);
  border-color: rgba(214, 110, 93, 0.28);
}

.sky-board {
  --size: 4;
  display: grid;
  grid-template-columns: var(--rail-size) minmax(0, 1fr) var(--rail-size);
  grid-template-rows: var(--rail-size) minmax(0, 1fr) var(--rail-size);
  gap: 0.65rem;
  align-items: stretch;
}

.rail {
  display: grid;
  gap: var(--cell-gap);
}

.rail-top,
.rail-bottom {
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
}

.rail-side {
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
}

.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  gap: var(--cell-gap);
  aspect-ratio: 1 / 1;
  padding: 0.8rem;
  border-radius: 1.8rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(226, 241, 255, 0.72)),
    linear-gradient(135deg, rgba(99, 173, 222, 0.28), rgba(225, 245, 255, 0.92));
  border: 1px solid rgba(87, 142, 184, 0.18);
  overflow: hidden;
}

.board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 25%, rgba(255, 255, 255, 0.42), transparent 12%),
    radial-gradient(circle at 74% 68%, rgba(255, 255, 255, 0.28), transparent 14%);
  pointer-events: none;
}

.rail-btn {
  min-width: 0;
  min-height: 0;
  padding: 0.45rem 0.25rem;
  border-radius: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 242, 255, 0.92));
}

.rail-btn.active {
  background: linear-gradient(180deg, #ffffff 0%, #d8efff 100%);
}

.rail-btn .arrow {
  font-size: 1.2rem;
  line-height: 1;
}

.rail-btn .tag {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cell {
  position: relative;
  border-radius: 1.2rem;
  border: 1px solid rgba(106, 157, 197, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(211, 233, 248, 0.72)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(207, 235, 255, 0.7));
  overflow: hidden;
}

.cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.36), transparent 28%),
    linear-gradient(145deg, transparent 0%, rgba(255, 255, 255, 0.16) 100%);
  pointer-events: none;
}

.cell.gust-line {
  box-shadow:
    inset 0 0 0 2px rgba(94, 162, 215, 0.18),
    0 0 0 1px rgba(94, 162, 215, 0.12);
}

.cell.just-watered {
  animation: wateredGlow 420ms ease-out;
}

.cell.satisfied .garden-bed {
  box-shadow:
    inset 0 -6px 0 rgba(45, 117, 69, 0.16),
    0 10px 18px rgba(79, 174, 104, 0.2);
}

.cell.mountain {
  background:
    linear-gradient(180deg, rgba(242, 246, 251, 0.9), rgba(214, 223, 236, 0.86)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(215, 228, 239, 0.55));
}

.mountain-icon {
  position: absolute;
  inset: 16% 12% 14%;
}

.mountain-icon::before,
.mountain-icon::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 1.1rem solid transparent;
  border-right: 1.1rem solid transparent;
  border-bottom: 2.2rem solid var(--peak);
}

.mountain-icon::before {
  left: 8%;
  border-bottom-color: var(--peak-dark);
}

.mountain-icon::after {
  right: 5%;
}

.garden-bed {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 11%;
  height: 38%;
  border-radius: 1rem 1rem 1.2rem 1.2rem;
  background: linear-gradient(180deg, #8fd39d 0%, var(--grass) 55%, var(--grass-dark) 100%);
  box-shadow:
    inset 0 -5px 0 rgba(45, 117, 69, 0.18),
    0 8px 18px rgba(46, 116, 67, 0.16);
}

.garden-bed::before,
.garden-bed::after {
  content: "";
  position: absolute;
  bottom: 45%;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 0.2rem 0.55rem 0.15rem 0.55rem;
  background: #6bbf6e;
  transform: rotate(-32deg);
}

.garden-bed::before {
  left: 28%;
}

.garden-bed::after {
  right: 26%;
  transform: rotate(24deg);
}

.rain-meter {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  display: flex;
  gap: 0.18rem;
}

.drop {
  width: 0.52rem;
  height: 0.72rem;
  border-radius: 50% 50% 50% 10%;
  transform: rotate(45deg);
  background: rgba(119, 173, 211, 0.32);
  border: 1px solid rgba(107, 158, 197, 0.18);
}

.drop.filled {
  background: linear-gradient(180deg, #82cfff 0%, var(--drop) 100%);
  box-shadow: 0 0 0.35rem rgba(72, 167, 238, 0.35);
}

.garden-text {
  position: absolute;
  right: 0.45rem;
  bottom: 0.42rem;
  padding: 0.12rem 0.36rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--grass-dark);
  font-size: 0.68rem;
  font-weight: 700;
}

.cloud {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 24%;
  height: 30%;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
  box-shadow:
    inset 0 -3px 0 rgba(161, 193, 219, 0.22),
    0 10px 18px rgba(73, 114, 155, 0.14);
  z-index: 2;
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  bottom: 28%;
  border-radius: 50%;
  background: inherit;
}

.cloud::before {
  left: 6%;
  width: 38%;
  height: 115%;
}

.cloud::after {
  right: 8%;
  width: 34%;
  height: 95%;
}

.cloud.just-moved {
  animation: driftIn 260ms ease-out;
  transform: translate(var(--drift-x), var(--drift-y));
}

.side-column {
  display: grid;
  gap: 1rem;
}

.side-panel {
  padding: 1rem;
}

.progress-copy,
.objective-copy,
.hint-copy {
  margin: 0.1rem 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.level-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.level-chip {
  border-radius: 1.15rem;
  padding: 0.85rem 0.95rem;
  display: grid;
  gap: 0.18rem;
  text-align: left;
}

.level-chip .chip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.level-chip .chip-name {
  font-weight: 700;
}

.level-chip .chip-meta,
.level-chip .chip-state {
  font-size: 0.82rem;
  color: var(--muted);
}

.level-chip.current {
  outline: 2px solid rgba(56, 120, 186, 0.35);
}

.level-chip.perfect {
  background: linear-gradient(180deg, #fffaf0 0%, #fff1c9 100%);
}

.rules {
  margin: 0.7rem 0 0;
  padding-left: 1.1rem;
  line-height: 1.55;
}

@keyframes driftIn {
  from {
    transform: translate(var(--drift-x), var(--drift-y)) scale(0.92);
    opacity: 0.55;
  }
  to {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes wateredGlow {
  from {
    box-shadow:
      inset 0 0 0 2px rgba(72, 167, 238, 0.42),
      0 0 0 0 rgba(72, 167, 238, 0.26);
  }
  to {
    box-shadow:
      inset 0 0 0 0 rgba(72, 167, 238, 0),
      0 0 0 0 rgba(72, 167, 238, 0);
  }
}

@media (max-width: 940px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .shell {
    width: min(100% - 1rem, 40rem);
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .board-head,
  .side-head {
    flex-direction: column;
  }

  .button-row {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  :root {
    --rail-size: 2.85rem;
    --cell-gap: 0.4rem;
  }

  .hero,
  .board-panel,
  .side-panel,
  .stat {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .topnav {
    font-size: 0.92rem;
  }

  button {
    padding: 0.72rem 0.92rem;
  }

  .rail-btn {
    padding: 0.25rem 0.15rem;
    border-radius: 1rem;
  }

  .rail-btn .tag {
    font-size: 0.58rem;
  }

  .garden-text {
    font-size: 0.62rem;
  }
}