:root {
  --bg1: #f8f0de;
  --bg2: #d8ebe8;
  --panel: #fff9ef;
  --ink: #232730;
  --muted: #586071;
  --line: #dfceb0;
  --accent: #b6502f;
  --good: #1f7a55;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 15%, #fff5dd, transparent 35%),
    radial-gradient(circle at 80% 85%, #d9ece8, transparent 35%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
}

.app {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 20px 16px 28px;
}

h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
}

header p {
  margin: 8px 0 0;
  color: var(--muted);
}

.hud {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hud > div {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
}

#status { color: var(--accent); font-weight: 700; }

.board {
  margin-top: 18px;
  min-height: 420px;
  background: rgba(255,255,255,.52);
  border: 2px solid #e8d7bb;
  border-radius: 16px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
  gap: 18px;
  align-items: end;
}

.tube {
  height: 240px;
  border: 3px solid #7f8ba0;
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background: linear-gradient(to top, rgba(173, 188, 209, .28), rgba(255,255,255,.74));
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.tube:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 14px rgba(0,0,0,.1);
}

.tube.selected {
  outline: 4px solid rgba(182, 80, 47, .5);
  transform: translateY(-5px);
}

.layer {
  height: 25%;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.42);
}

.controls {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

button, .home {
  border: none;
  background: #233042;
  color: #f4f7ff;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
}

button:hover, .home:hover { filter: brightness(1.08); }

#nextBtn { background: var(--good); }

@media (max-width: 700px) {
  .board {
    grid-template-columns: repeat(4, minmax(62px, 1fr));
    gap: 12px;
    min-height: 360px;
  }
  .tube { height: 200px; }
}