:root {
  --bg: #1b2436;
  --bg-alt: #232f47;
  --card: #2a3854;
  --text: #eef2fb;
  --muted: #9aa7c2;
  --accent: #7c6bf0;
  --glass-border: rgba(255,255,255,0.35);
  --glass-fill: rgba(255,255,255,0.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: radial-gradient(circle at 50% 0%, #29365490, transparent 60%), var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#app {
  max-width: 900px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 32px;
}

.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 18px 6px 4px;
  opacity: 0.75;
}

.footer-line {
  display: block;
}

.footer-line + .footer-line {
  margin-top: 3px;
}

/* Keep neighbouring game links from reading as one run of text. */
.footer-line a + a {
  margin-left: 10px;
}

.site-footer a {
  color: var(--text);
  font-weight: 600;
  display: inline-block;
  padding: 8px 4px;
}

/* Give the link a proper touch target on a phone, without bloating the
   footer on desktop. */
@media (pointer: coarse) {
  .site-footer a {
    padding: 15px 6px;
  }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.logo {
  font-size: 1.4rem;
  margin: 0;
  letter-spacing: 0.5px;
}

.stats {
  display: flex;
  gap: 14px;
  font-size: 0.95rem;
  color: var(--muted);
}

.screen { flex: 1; display: flex; flex-direction: column; }
.hidden { display: none !important; }

#gameScreen { justify-content: center; }

/* ---------- Menu screen ---------- */
#menuScreen {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: 40px 12px;
}

#menuScreen h2 {
  margin: 0 0 10px;
  font-weight: 600;
  color: var(--text);
}

.menu-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.diff-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 22px 26px;
  min-width: 180px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.diff-card:hover {
  transform: translateY(-3px);
  background: #33456a;
}

.diff-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.diff-desc {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- Game screen ---------- */
/* Goal bottle(s) centred, small bottles in a grid to either side. */
.board {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: nowrap;
}

.side-grid {
  display: grid;
  /* Column count is set per deal so each side fills whole rows. */
  grid-template-columns: repeat(var(--side-cols, 3), auto);
  gap: 20px 14px;
  justify-items: center;
  align-items: end;
}

.goal-column {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex: 0 0 auto;
}

.controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.controls button {
  background: var(--card);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.9rem;
  cursor: pointer;
}

.controls button:hover { background: #33456a; }
.controls button:disabled { opacity: 0.4; cursor: default; }

/* ---------- Bottle visuals ---------- */
/* Bottle size is driven by --bw / --uh, set on the game screen to fit the
   board to the viewport (a 10-a-side Expert board needs smaller glass than a
   4-a-side Easy one). Values here are the fallbacks. */
.bottle {
  --unit-h: var(--uh, 22px);
  position: relative;
  width: var(--bw, 62px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Pivot near the base: the bottle tips over its own heel, like real glass. */
  transform-origin: 50% 88%;
  transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.bottle.selected {
  transform: translateY(-12px);
}

.bottle.selected .bottle-body {
  box-shadow:
    inset -6px 0 10px rgba(0, 0, 0, 0.25),
    inset 6px 0 10px rgba(255, 255, 255, 0.03),
    0 10px 22px rgba(0, 0, 0, 0.35);
}

.bottle.invalid {
  animation: shake 0.35s ease;
}

/* While a pour is choreographed, the bottle is driven by the Web Animations
   API -- no CSS transition should fight it for control of `transform`. */
.bottle.in-flight {
  transition: none;
  z-index: 46;
  will-change: transform;
}

.bottle.pouring .bottle-neck {
  box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.4);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ---------- Pouring stream ----------
   A full-viewport SVG overlay. The stream path is recomputed every frame
   against the live (animating) neck positions, so it stays welded to the
   bottle mouth no matter where the pour choreography has moved it. */
#pourLayer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 45;
  overflow: visible;
}

.stream-body {
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
}

.stream-gloss {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 2;
  stroke-linecap: round;
}

@keyframes pourUnitExit {
  from { height: var(--unit-h); opacity: 1; }
  to { height: 0; opacity: 0.45; }
}

/* `both` fill mode matters: with staggered per-unit delays, each unit must
   hold its start state until its turn comes, then hold its end state after. */
.pour-unit-exit {
  animation: pourUnitExit var(--pour-dur, 380ms) cubic-bezier(0.55, 0, 0.5, 1) both;
}

@keyframes pourUnitEnter {
  from { height: 0; opacity: 0.45; }
  to { height: var(--unit-h); opacity: 1; }
}

.pour-unit-enter {
  animation: pourUnitEnter var(--pour-dur, 380ms) cubic-bezier(0.3, 0.5, 0.4, 1) both;
}

/* Liquid settling in the receiving bottle once the pour lands. */
@keyframes settleWobble {
  0%   { transform: scaleY(1.16) translateY(-2px); }
  35%  { transform: scaleY(0.94) translateY(1px); }
  62%  { transform: scaleY(1.05); }
  82%  { transform: scaleY(0.98); }
  100% { transform: scaleY(1); }
}

.unit.settle {
  transform-origin: 50% 100%;
  animation: settleWobble 620ms cubic-bezier(0.3, 0.8, 0.4, 1);
}

.bottle-neck {
  width: calc(var(--bw, 62px) * 0.355);
  height: 12px;
  background: var(--glass-fill);
  border: 2px solid var(--glass-border);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  position: relative;
}

/* Glass rim catching the light. */
.bottle-neck::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.45);
}

.bottle-body {
  position: relative;
  width: var(--bw, 62px);
  border: 2px solid var(--glass-border);
  border-top: none;
  border-radius: 0 0 17px 17px;
  background: var(--glass-fill);
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  height: calc(var(--unit-h) * var(--capacity, 4));
  box-shadow:
    inset -7px 0 12px rgba(0, 0, 0, 0.28),
    inset 7px 0 12px rgba(255, 255, 255, 0.04);
}

/* Specular highlight down the left face of the glass. */
.bottle-body::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 10px;
  left: 8px;
  width: 6px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  z-index: 3;
  pointer-events: none;
}

.bottle.long-bottle { --unit-h: calc(var(--uh, 22px) * 0.91); }
.bottle.long-bottle .bottle-body { width: calc(var(--bw, 62px) * 1.19); }
.bottle.long-bottle .bottle-neck { width: calc(var(--bw, 62px) * 0.42); }

.unit {
  width: 100%;
  height: var(--unit-h);
  flex-shrink: 0;
  position: relative;
}

/* Depth: light gathers at the top of each band, shadow pools at the bottom. */
.unit::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 42%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 30%);
}

/* Meniscus on the topmost band of liquid. */
.bottle-body > .unit:last-child {
  border-radius: 6px 6px 0 0;
}

.bottle-body > .unit:last-child::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: 6px 6px 0 0;
  background: rgba(255, 255, 255, 0.42);
  z-index: 2;
}

.cork {
  position: absolute;
  top: -14px;
  width: calc(var(--bw, 62px) * 0.48);
  height: 16px;
  background: linear-gradient(180deg, #c98a4b, #8a5a2c);
  border-radius: 5px;
  border: 1px solid #6d431e;
  z-index: 2;
}

.bottle.long-bottle .cork { width: calc(var(--bw, 62px) * 0.55); top: -14px; }

.label {
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--muted);
  min-height: 14px;
}

/* ---------- Win overlay ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,14,24,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.win-card {
  background: var(--card);
  padding: 32px 36px;
  border-radius: 18px;
  text-align: center;
  max-width: 320px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.win-card h2 { margin-top: 0; }

.win-card button {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: white;
  font-size: 0.95rem;
  cursor: pointer;
}

.win-card button:last-child {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--text);
}

/* Bottle size and column count are computed in JS to fit the board to the
   viewport, so these only tighten the spacing between them. */
@media (max-width: 760px) {
  .board { gap: 14px; }
  .side-grid { gap: 16px 9px; }
  .goal-column { gap: 12px; }
}

@media (max-width: 480px) {
  .board { gap: 9px; }
  .side-grid { gap: 13px 7px; }
  .goal-column { gap: 9px; }
}