:root {
  color-scheme: dark;
  --bg: #09121d;
  --panel: rgba(11, 27, 43, 0.88);
  --panel-border: rgba(158, 204, 255, 0.16);
  --text: #eef6ff;
  --muted: #9fb8d1;
  --accent: #5bd1ff;
  --accent-2: #ffd166;
  --danger: #ff7b72;
  --clean: #7fffd4;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at top, rgba(91, 209, 255, 0.14), transparent 32%),
    linear-gradient(180deg, #10253a 0%, var(--bg) 55%, #050a11 100%);
  color: var(--text);
}

.shell {
  width: min(1120px, calc(100% - 24px));
  margin: 0 auto;
  padding: 18px 0 28px;
}

.topbar, .hud, .controls, .touch-controls { display: flex; gap: 12px; align-items: center; }
.topbar {
  justify-content: center;
  color: var(--muted);
  margin-bottom: 16px;
  font-size: 0.98rem;
}
.topbar a { color: #d8eeff; text-decoration: none; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  gap: 18px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.hero, .sidebar, .game-panel { padding: 22px; }
.hero { grid-column: 1 / 2; }
.game-panel { grid-column: 1 / 2; }
.sidebar { grid-column: 2 / 3; grid-row: 1 / span 2; }
.eyebrow, .label { text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-size: 0.76rem; }
h1, h2 { margin: 0; }
.subtitle, .tip, li { color: #dbe9f7; }
.subtitle { margin: 10px 0 0; line-height: 1.5; max-width: 60ch; }
.sidebar ul { padding-left: 18px; line-height: 1.5; }
.tip { margin: 16px 0 0; font-style: italic; }

.hud {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.hud > div {
  min-width: 88px;
  background: rgba(255, 255, 255, 0.04);
  padding: 10px 12px;
  border-radius: 16px;
}
.hud strong { display: block; margin-top: 4px; font-size: 1.15rem; }

.message {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(91, 209, 255, 0.08);
  color: #dff6ff;
  min-height: 52px;
  line-height: 1.35;
}

.tower-wrap {
  position: relative;
  height: 540px;
  margin: 0 auto 16px;
  padding-top: 20px;
  width: min(100%, 480px);
}

.rope {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #f1ead9 0%, #9f936f 100%);
  opacity: 0.85;
}
.rope-left { left: 78px; }
.rope-right { right: 78px; }

.tower {
  position: absolute;
  inset: 20px 42px 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 8px;
  padding: 18px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(230, 244, 255, 0.12), rgba(114, 141, 168, 0.05)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 12%, rgba(0,0,0,0.02) 12% 20%);
  box-shadow: inset 0 0 0 1px rgba(221, 240, 255, 0.08);
}

.cell {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(163, 207, 255, 0.18), rgba(31, 59, 86, 0.76));
  border: 1px solid rgba(217, 241, 255, 0.08);
  overflow: hidden;
}
.cell::before {
  content: "";
  position: absolute;
  inset: 10% 14%;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(214, 240, 255, 0.72), rgba(100, 136, 170, 0.34));
}
.cell.dirty::after,
.cell.hazard-pot::after,
.cell.hazard-open::after,
.cell.hazard-gust::after,
.cell.cleaned::after {
  position: absolute;
  inset: auto;
  font-size: clamp(1rem, 3vw, 1.35rem);
  line-height: 1;
}
.cell.dirty::after { content: "✦"; right: 10px; bottom: 8px; color: var(--accent-2); }
.cell.cleaned::after { content: "✓"; right: 10px; bottom: 8px; color: var(--clean); }
.cell.hazard-pot::after { content: "🪴"; left: 9px; bottom: 7px; }
.cell.hazard-open::after { content: "⚠"; left: 12px; bottom: 9px; color: var(--danger); font-weight: 700; }
.cell.hazard-gust::after { content: "≋"; left: 12px; bottom: 8px; color: var(--accent); font-weight: 700; }
.cell.active {
  outline: 3px solid rgba(91, 209, 255, 0.75);
  outline-offset: -3px;
}

.cradle {
  position: absolute;
  width: 84px;
  height: 24px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, #f8d27b, #c98d1e);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(65, 35, 0, 0.35);
  transition: transform 140ms ease-out, left 140ms ease-out, top 140ms linear;
  z-index: 3;
}
.cradle::before, .cradle::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 24px;
  top: -24px;
  background: rgba(243, 230, 196, 0.95);
}
.cradle::before { left: 16px; }
.cradle::after { right: 16px; }
.washer {
  position: absolute;
  inset: -18px auto auto 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffecbf, #ffb347);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,0.18);
}

button {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 700;
  color: #05111d;
  background: linear-gradient(180deg, #8be3ff, #4bb5ff);
}
button.secondary {
  color: var(--text);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}
button:active { transform: translateY(1px) scale(0.99); }
.controls { justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.touch-controls { justify-content: center; }
.move-btn { min-width: 150px; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { grid-column: auto; grid-row: auto; }
}

@media (max-width: 560px) {
  .shell { width: min(100% - 16px, 1120px); }
  .hero, .sidebar, .game-panel { padding: 18px; }
  .tower-wrap { height: 470px; }
  .tower { inset: 20px 18px 0; padding: 12px; gap: 6px; }
  .rope-left { left: 44px; }
  .rope-right { right: 44px; }
  .cradle { width: 68px; }
}