:root {
  --ink: #f6f8ff;
  --muted: #b5c0ec;
  --panel: rgba(20, 31, 79, 0.74);
  --panel-border: rgba(173, 195, 255, 0.19);
  --accent: #57e4ef;
  --accent-dark: #18a9cb;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 5%, rgba(77, 118, 255, 0.58), transparent 28rem),
    radial-gradient(circle at 85% 20%, rgba(64, 222, 232, 0.22), transparent 25rem),
    linear-gradient(145deg, #101940 0%, #151c52 52%, #0b1230 100%);
  overflow-x: hidden;
}

body::before, body::after {
  position: fixed;
  z-index: -1;
  width: 15rem;
  height: 15rem;
  border: 1px solid rgba(146, 206, 255, 0.13);
  border-radius: 50%;
  content: "";
}

body::before { top: 18%; left: -9rem; }
body::after { right: -9rem; bottom: -5rem; width: 22rem; height: 22rem; }

button { font: inherit; }

.game-shell { width: min(100%, 780px); min-height: 100vh; margin: 0 auto; padding: clamp(18px, 4vw, 34px) clamp(14px, 3.5vw, 30px) 28px; }

.status-bar, .controls, .panel-heading, .modal-actions { display: flex; align-items: center; }

.control-button, .level-button, .modal-button { border: 0; cursor: pointer; transition: transform 160ms ease, filter 160ms ease, background 160ms ease; }
.control-button:hover:not(:disabled), .level-button:hover, .modal-button:hover { filter: brightness(1.13); transform: translateY(-2px); }
.control-button:active:not(:disabled), .level-button:active, .modal-button:active { transform: translateY(0); }

.status-bar { justify-content: center; gap: clamp(8px, 2vw, 16px); margin: 24px 0 15px; }
.status-card { min-width: min(30vw, 126px); padding: 9px 14px 10px; text-align: center; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; box-shadow: 0 12px 28px rgba(4, 7, 31, 0.24); }
.status-card span, .panel-heading span { display: block; color: var(--muted); font-size: 0.61rem; font-weight: 800; letter-spacing: 0.12em; }
.status-card strong { display: block; margin-top: 2px; color: #fff; font-size: 1.12rem; font-variant-numeric: tabular-nums; }

.board { display: grid; grid-template-columns: repeat(3, minmax(74px, 1fr)); justify-items: center; gap: clamp(11px, 3vw, 24px) clamp(9px, 3vw, 24px); min-height: 345px; padding: 8px clamp(6px, 3vw, 28px) 24px; }

.tube { position: relative; width: clamp(62px, 17vw, 92px); height: clamp(178px, 41vw, 260px); padding: 7px; cursor: pointer; touch-action: manipulation; background: linear-gradient(102deg, rgba(255,255,255,.28), rgba(255,255,255,.06) 25%, rgba(150,213,255,.13) 68%, rgba(255,255,255,.21)); border: 3px solid rgba(221, 241, 255, 0.74); border-top-width: 7px; border-radius: 15px 15px 23px 23px; box-shadow: inset 4px 0 8px rgba(255,255,255,.18), inset -7px 0 10px rgba(31, 71, 133, .22), 0 15px 20px rgba(3, 7, 36, .32); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.tube::before { position: absolute; top: -8px; right: 12%; left: 12%; height: 5px; border-radius: 50%; background: rgba(7, 15, 47, .68); content: ""; }
.tube::after { position: absolute; top: 7px; bottom: 7px; left: 12px; width: 5px; border-radius: 6px; background: rgba(255,255,255,.37); content: ""; pointer-events: none; }
.tube:hover { transform: translateY(-4px); }
.tube.selected { transform: translateY(-10px); border-color: #a5f8ff; box-shadow: 0 0 0 4px rgba(88, 235, 247, .2), 0 22px 26px rgba(3, 7, 36, .34); }
.tube.hint { animation: hintPulse 900ms ease-in-out 2; border-color: #ffe987; }
.tube.invalid { animation: shake 360ms ease-in-out; border-color: #ff9aad; }

.liquid { position: absolute; right: 7px; left: 7px; height: calc((100% - 14px) / 4); overflow: hidden; border-radius: 5px 5px 12px 12px; box-shadow: inset 0 3px 4px rgba(255,255,255,.37), inset 0 -4px 5px rgba(0,0,0,.16); animation: fillIn 180ms ease-out; }
.liquid::after { position: absolute; top: -4px; right: -5%; left: -5%; height: 10px; border-radius: 50%; background: rgba(255,255,255,.29); content: ""; }
.liquid.coral { background: linear-gradient(90deg, #ee3f69, #ff7b83); }
.liquid.amber { background: linear-gradient(90deg, #f69f1e, #ffd851); }
.liquid.mint { background: linear-gradient(90deg, #21bfa5, #6eedc9); }
.liquid.blue { background: linear-gradient(90deg, #217be6, #53c7ff); }
.liquid.violet { background: linear-gradient(90deg, #7a3ce6, #d778ff); }
.liquid.cyan { background: linear-gradient(90deg, #08b8ce, #57ebed); }

.controls { justify-content: center; gap: 9px; margin: 0 auto 25px; }
.control-button { min-width: 92px; padding: 10px 12px; color: #dfeaff; font-size: .8rem; font-weight: 800; background: rgba(92, 112, 183, .29); border: 1px solid rgba(189, 205, 255, .2); border-radius: 12px; }
.control-button span { margin-right: 3px; font-size: 1.1rem; }
.control-button.accent { color: #042f49; background: linear-gradient(135deg, #7ef2f4, #57bee9); border-color: transparent; box-shadow: 0 8px 17px rgba(58, 194, 232, .25); }
.control-button:disabled { cursor: not-allowed; opacity: .4; }

.levels-panel { padding: 16px; background: rgba(8, 17, 57, .52); border: 1px solid var(--panel-border); border-radius: 18px; box-shadow: 0 15px 30px rgba(0,0,0,.16); }
.panel-heading { justify-content: space-between; margin-bottom: 11px; }
.panel-heading small { color: var(--muted); font-size: .72rem; }
.level-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.level-button { position: relative; min-height: 39px; color: #cbd7ff; font-weight: 800; background: rgba(99, 119, 191, .28); border: 1px solid rgba(182, 201, 255, .17); border-radius: 10px; }
.level-button.active { color: #062e47; background: linear-gradient(135deg, #a6fbf5, #5ac9f0); box-shadow: 0 4px 13px rgba(78, 212, 235, .33); }
.level-button.done::after { position: absolute; top: 2px; right: 4px; color: #a2fce7; font-size: .62rem; content: "✓"; }

.toast { position: fixed; z-index: 3; bottom: 20px; left: 50%; max-width: calc(100vw - 32px); padding: 10px 15px; color: #07263f; font-size: .85rem; font-weight: 750; text-align: center; background: #ddfbff; border-radius: 99px; box-shadow: 0 10px 30px rgba(0,0,0,.28); transform: translate(-50%, 90px); opacity: 0; transition: .25s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

.modal { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3, 8, 36, .68); backdrop-filter: blur(7px); }
.modal.hidden { display: none; }
.modal-card { width: min(100%, 390px); padding: 28px; text-align: center; background: linear-gradient(160deg, #202b6b, #111842); border: 1px solid rgba(201,225,255,.25); border-radius: 25px; box-shadow: 0 28px 70px rgba(0,0,0,.45); animation: popIn .24s ease-out; }
.modal-icon { display: grid; width: 56px; height: 56px; margin: -53px auto 14px; place-items: center; color: #06354c; font-size: 1.8rem; font-weight: 900; background: linear-gradient(135deg, #aaf8dd, #5be1f2); border-radius: 50%; box-shadow: 0 8px 22px rgba(77,224,239,.35); }
.modal-card h2 { margin: 0; font-size: 1.55rem; }
.modal-card p { margin: 8px 0 18px; color: #c9d5fa; }
.modal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.modal-stat { padding: 10px 4px; color: #e9f5ff; background: rgba(136,155,227,.17); border-radius: 11px; }
.modal-stat span { display: block; color: #aebcea; font-size: .6rem; font-weight: 800; letter-spacing: .08em; }
.modal-stat strong { display: block; margin-top: 3px; font-size: .98rem; }
.modal-actions { justify-content: center; gap: 9px; }
.modal-button { flex: 1; padding: 11px; color: #eef5ff; font-weight: 800; border-radius: 11px; }
.modal-button.primary { color: #06344a; background: linear-gradient(135deg, #8af5f0, #61c9ef); }
.modal-button.secondary { background: rgba(147,165,232,.21); }

@keyframes fillIn { from { transform: scaleY(.65); transform-origin: bottom; opacity: .4; } to { transform: scaleY(1); opacity: 1; } }
@keyframes hintPulse { 50% { transform: translateY(-8px) scale(1.04); box-shadow: 0 0 0 7px rgba(255, 227, 100, .2); } }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

@media (min-width: 620px) { .board { grid-template-columns: repeat(4, minmax(90px, 1fr)); } }
@media (max-width: 380px) { .board { gap: 9px 4px; padding-right: 0; padding-left: 0; } .control-button { min-width: 0; padding-inline: 9px; } }