:root {
  --bg: #0b0b0c;
  --ink: #f5f1e8;
  --ink-dim: rgba(245, 241, 232, 0.65);
  --gold: #F5C518;
  --tube-glass: rgba(255, 255, 255, 0.04);
  --tube-edge: rgba(245, 197, 24, 0.40);
  --tube-shine: rgba(255, 255, 255, 0.10);
  --green: #10B981;
  --red:   #EF4444;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: radial-gradient(ellipse at top, #16161a 0%, var(--bg) 65%);
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; }

/* Reuse dojo nav */
.navbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(11,11,12,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(245,241,232,0.08);
}
.nav-container {
  max-width: 1280px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; text-decoration: none; }
.nav-logo span { color: var(--gold); }
.nav-menu { list-style: none; padding: 0; margin: 0; display: flex; gap: 22px; }
.nav-link { text-decoration: none; font-size: 0.92rem; color: var(--ink-dim); transition: color 200ms; }
.nav-link:hover { color: var(--ink); }

/* Hero */
.game-hero { text-align: center; padding: 28px 20px 8px; }
.game-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.06em;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  margin: 0 0 8px;
  background: linear-gradient(135deg, #F5C518 0%, #ffe27a 50%, #F5C518 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.game-hero .subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem; line-height: 1.5; color: var(--ink-dim);
  max-width: 540px; margin: 0 auto;
}

/* HUD */
.hud {
  max-width: 560px; margin: 12px auto 6px;
  padding: 12px 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(245,241,232,0.08);
  border-radius: 16px;
}
.hud-cell { display: flex; flex-direction: column; align-items: flex-start; }
.hud-label {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim);
}
.hud-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.75rem; line-height: 1; color: var(--gold);
}
.hud-value.warn { color: #ff9d4a; }
.hud-value.danger { color: var(--red); animation: pulse 0.9s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.1); } }
.hud-restart {
  background: transparent; color: var(--ink);
  border: 1px solid rgba(245,241,232,0.18);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit; font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 200ms, transform 120ms;
}
.hud-restart:hover { border-color: var(--gold); }
.hud-restart:active { transform: scale(0.97); }

/* Difficulty selector — three pills above the HUD. The active level is
   filled with the dojo gold so the player always knows where they are. */
.level-select {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 18px auto 0; padding: 0 16px;
  max-width: 920px;
  justify-content: center;
}
.level-btn {
  background: transparent; color: var(--ink);
  border: 1px solid rgba(245,241,232,0.18);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  line-height: 1.1;
  transition: border-color 200ms, background 200ms, color 200ms, transform 120ms;
}
.level-btn .level-name {
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em;
}
.level-btn .level-meta {
  font-size: 0.7rem; opacity: 0.75; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.level-btn:hover { border-color: var(--gold); }
.level-btn:active { transform: scale(0.97); }
.level-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1408;
}
.level-btn.active .level-meta { opacity: 0.85; }
@media (max-width: 540px) {
  .level-btn { padding: 6px 14px; }
  .level-btn .level-name { font-size: 0.85rem; }
  .level-btn .level-meta { font-size: 0.62rem; }
}

/* Game stage: pool on top, tube on the bottom */
.game-stage {
  position: relative;
  max-width: 1100px;
  margin: 14px auto 0;
  padding: 0 16px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.pool {
  position: relative;
  flex: 0 0 auto;
  height: 360px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(245,197,24,0.10), transparent 50%),
    radial-gradient(ellipse at 70% 90%, rgba(245,197,24,0.06), transparent 60%),
    rgba(255,255,255,0.02);
  border: 1px solid rgba(245,241,232,0.06);
  /* No overflow:hidden — a dragged bubble must remain visible as it
     crosses the gap between the pool and the tube. Physics still clamps
     free bubbles inside the box, so they don't escape on their own. */
  touch-action: none;
}

/* Tube — horizontal, A on the left, Z on the right */
.tube {
  position: relative;
  height: 96px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.06) 100%),
    var(--tube-glass);
  border: 1px solid var(--tube-edge);
  box-shadow:
    inset 0 0 26px rgba(245,197,24,0.08),
    0 0 60px rgba(245,197,24,0.10);
  display: flex; align-items: center;
  padding: 0 14px;
  transition: box-shadow 320ms, border-color 320ms;
  touch-action: none;
}
.tube::before {
  /* glass shine across the top */
  content: '';
  position: absolute;
  left: 24px; right: 24px; top: 6px; height: 6px;
  background: linear-gradient(90deg, transparent 0%, var(--tube-shine) 30%, transparent 80%);
  border-radius: 4px;
  pointer-events: none;
}
.tube.drop-active {
  border-color: var(--gold);
  box-shadow: inset 0 0 32px rgba(245,197,24,0.20), 0 0 80px rgba(245,197,24,0.30);
}
.tube.win {
  border-color: var(--green);
  box-shadow: inset 0 0 32px rgba(16,185,129,0.18), 0 0 70px rgba(16,185,129,0.30);
}
.tube.lose {
  border-color: var(--red);
  box-shadow: inset 0 0 32px rgba(239,68,68,0.18), 0 0 70px rgba(239,68,68,0.30);
}
.tube-cap {
  width: 14px; height: 60%;
  background: radial-gradient(ellipse, rgba(245,197,24,0.22), transparent 70%);
  border-radius: 50%;
  flex-shrink: 0;
}
.tube-track {
  flex: 1; height: 100%;
  position: relative;
  display: flex; align-items: center;
  justify-content: flex-start; gap: 4px;
  padding: 0 6px;
}
.tube-letter {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  color: rgba(245,197,24,0.55);
  pointer-events: none;
  letter-spacing: 0.04em;
}
.tube-letter-left  { left: 6px; }
.tube-letter-right { right: 6px; }

/* Slots inside the tube — 7 evenly spaced */
.tube-slot {
  position: relative;
  flex: 1 1 0;
  height: 76px;
  border-radius: 50%;
  border: 1px dashed rgba(245,241,232,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms, border-color 200ms;
}
.tube-slot.target { border-color: rgba(245,197,24,0.45); background: rgba(245,197,24,0.06); }
.tube-slot.correct { border-style: solid; border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.08); }
.tube-slot.wrong   { border-style: solid; border-color: rgba(239,68,68,0.45);  background: rgba(239,68,68,0.06); }

/* Bubbles (same visual idea as the lineage page balls, smaller) */
.bubble {
  position: absolute;
  width: 76px; height: 76px;
  border-radius: 50%;
  cursor: grab;
  background-size: cover;
  background-position: center;
  background-color: #18181b;
  box-shadow: 0 0 20px 2px rgba(245,197,24,0.45);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--gold);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  will-change: transform;
  border: 2px solid rgba(245,197,24,0.55);
  transition: box-shadow 200ms;
}
.bubble.in-pool { /* free-floating bubble — no transitions on transform */ }
.bubble.in-tube {
  position: relative;
  width: 64px; height: 64px;
  cursor: pointer;
  font-size: 0.9rem;
  /* When a bubble is locked in the tube, it sits in its slot. */
}
.bubble.dragging {
  cursor: grabbing;
  z-index: 10;
  box-shadow: 0 0 30px 4px rgba(245,197,24,0.7);
}
.bubble.placed-correct { border-color: var(--green); box-shadow: 0 0 24px 3px rgba(16,185,129,0.45); }
.bubble.placed-wrong   { border-color: var(--red);   box-shadow: 0 0 24px 3px rgba(239,68,68,0.40); animation: shake 0.35s; }
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
.bubble-name {
  position: absolute;
  bottom: -22px; left: 50%; transform: translateX(-50%);
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--ink-dim);
  white-space: nowrap;
  pointer-events: none;
}

/* Hint */
.hint {
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.85rem;
  margin: 4px auto 28px;
  max-width: 540px;
  padding: 0 20px;
}

/* Overlay */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(11,11,12,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.overlay[hidden] { display: none; }
.overlay-card {
  max-width: 380px; width: 100%;
  background: linear-gradient(160deg, #1a1a1d 0%, #0f0f12 100%);
  border: 1px solid rgba(245,197,24,0.30);
  border-radius: 20px;
  padding: 28px 26px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}
.overlay-card h2 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.06em;
  font-size: 2rem;
  margin: 0 0 8px;
  color: var(--gold);
}
.overlay-card p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.12rem; line-height: 1.5;
  color: var(--ink-dim); margin: 0 0 22px;
}
.overlay-btn {
  background: var(--gold); color: #1a1a1d;
  border: none; padding: 12px 26px;
  border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: 0.95rem;
  cursor: pointer;
  transition: transform 120ms;
}
.overlay-btn:hover { transform: scale(1.04); }
.overlay-btn:active { transform: scale(0.98); }

/* Footer */
.page-footer {
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.82rem;
  padding: 20px 16px 28px;
  border-top: 1px solid rgba(245,241,232,0.06);
}
.page-footer a { color: var(--gold); text-decoration: none; }
.page-footer a:hover { text-decoration: underline; }

@media (max-width: 540px) {
  .game-hero { padding: 14px 16px 2px; }
  .game-hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); margin-bottom: 4px; }
  .game-hero .subtitle { font-size: 0.92rem; line-height: 1.4; }
  .hud { margin-top: 8px; padding: 10px 14px; }
  .hud-value { font-size: 1.4rem; }
  .hud-restart { padding: 6px 12px; font-size: 0.78rem; }
  .game-stage { gap: 10px; padding: 0 12px 16px; margin-top: 8px; }
  /* Cap the pool height so the tube always lives above the fold. */
  .pool { height: 44vh; min-height: 240px; max-height: 360px; }
  .bubble { width: 58px; height: 58px; font-size: 0.8rem; border-width: 1.5px; }
  .bubble.in-tube { width: 46px; height: 46px; font-size: 0.7rem; }
  .tube { height: 72px; padding: 0 10px; }
  .tube-slot { height: 54px; }
  .bubble-name { font-size: 0.62rem; bottom: -16px; }
  .hint { font-size: 0.78rem; margin-bottom: 18px; }
}