:root {
      color-scheme: light;
      --ink: #17202a;
      --muted: #64748b;
      --line: #d7dde6;
      --paper: #f4f7fb;
      --panel: #ffffff;
      --accent: #0f8b8d;
      --good: #1f9d55;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        linear-gradient(180deg, rgba(255,255,255,.74), rgba(244,247,251,.96)),
        radial-gradient(circle at 12% 18%, rgba(15,139,141,.15), transparent 24rem),
        radial-gradient(circle at 88% 70%, rgba(238,108,77,.14), transparent 26rem),
        var(--paper);
      color: var(--ink);
    }

    main {
      width: min(980px, calc(100vw - 28px));
      padding: clamp(18px, 4vw, 38px) 0;
    }

    .topbar {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
    }

    h1 {
      margin: 0;
      font-size: clamp(32px, 7vw, 58px);
      line-height: .95;
      letter-spacing: 0;
    }

    .stats {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      color: var(--muted);
      font-weight: 700;
    }

    .pill, button {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,.88);
      padding: 8px 12px;
      font: inherit;
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
    }

    button {
      cursor: pointer;
      transition: transform .14s ease, border-color .14s ease, background .14s ease;
    }

    button:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
      background: #fff;
    }

    .board {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(10px, 2.4vw, 18px);
      min-height: 430px;
    }

    .tower {
      position: relative;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      justify-content: flex-start;
      min-height: 430px;
      padding: 22px 10px 26px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,.76);
      box-shadow: 0 18px 48px rgba(23,32,42,.08);
      overflow: hidden;
    }

    .tower::before {
      content: "";
      position: absolute;
      bottom: 22px;
      width: 10px;
      height: 72%;
      border-radius: 99px 99px 0 0;
      background: #9aa8b8;
      opacity: .42;
    }

    .tower::after {
      content: "";
      position: absolute;
      bottom: 20px;
      width: 82%;
      height: 12px;
      border-radius: 999px;
      background: #7c8a9b;
      opacity: .34;
    }

    .tower[data-ready="true"] {
      border-color: rgba(31,157,85,.55);
      background: rgba(240,253,244,.88);
    }

    .tower.active {
      border-color: var(--accent);
      box-shadow: 0 18px 48px rgba(15,139,141,.16);
    }

    .cube {
      position: relative;
      z-index: 1;
      height: 44px;
      margin-top: 7px;
      border: 1px solid rgba(15,23,42,.16);
      border-radius: 8px;
      box-shadow: inset 0 2px 0 rgba(255,255,255,.38), 0 7px 18px rgba(23,32,42,.16);
      cursor: pointer;
      transition: transform .14s ease, filter .14s ease;
    }

    .cube.top:hover, .cube.selected {
      transform: translateY(-5px);
      filter: saturate(1.08);
    }

    .cube:not(.top) {
      cursor: default;
    }

    .cube.s1 { width: 42%; background: #6a4c93; }
    .cube.s2 { width: 52%; background: #1982c4; }
    .cube.s3 { width: 62%; background: #8ac926; }
    .cube.s4 { width: 72%; background: #ffca3a; }
    .cube.s5 { width: 82%; background: #ff595e; }

    .message {
      min-height: 28px;
      margin-top: 14px;
      color: var(--muted);
      font-weight: 800;
      text-align: center;
    }

    .win .message {
      color: var(--good);
    }

    @media (max-width: 680px) {
      body { align-items: start; }
      main { width: min(100vw - 18px, 560px); }
      .topbar { align-items: start; flex-direction: column; }
      .stats { justify-content: flex-start; }
      .board {
        min-height: auto;
        grid-template-columns: 1fr;
      }
      .tower {
        min-height: 170px;
        padding: 18px 10px 22px;
      }
      .tower::before {
        height: 58%;
      }
      .cube {
        height: 34px;
        margin-top: 5px;
      }
    }