* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  :root {
    --ink: #2b2130; --muted: #8c7e88; --line: #eadfe6;
    --bg: #fff8ef; --surface: #fff; --danger: #dc2626;
    --pink: #ec4899; --purple: #8b5cf6;
    --shadow: 0 14px 36px rgba(63,36,54,.12);
  }
  html, body { min-height: 100%; background: var(--bg); }
  body {
    font-family: 'Sora', sans-serif; color: var(--ink); overflow-x: hidden;
    background:
      radial-gradient(440px 330px at 0 0, rgba(236,72,153,.12), transparent 65%),
      radial-gradient(400px 340px at 100% 5%, rgba(139,92,246,.13), transparent 66%),
      var(--bg);
  }
  button { font: inherit; color: inherit; }

  /* ── Name gate (same rules as the other Pop games) ── */
  .namegate-overlay {
    display: none; position: fixed; inset: 0; z-index: 400;
    background: rgba(43,33,48,.6); backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: 20px;
  }
  .namegate-overlay.show { display: flex; }
  .namegate-card {
    background: var(--surface); border-radius: 22px; padding: 26px 22px;
    max-width: 340px; width: 100%; text-align: center;
    box-shadow: 0 20px 60px rgba(43,33,48,.35);
  }
  .namegate-logo { max-height: 52px; margin-bottom: 10px; }
  .namegate-title { font-family: 'Baloo 2', sans-serif; font-size: 20px; font-weight: 800; margin-bottom: 4px; }
  .namegate-sub { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
  .namegate-input {
    width: 100%; padding: 12px 14px; border-radius: 12px;
    border: 1.5px solid var(--line); font-family: 'Sora', sans-serif;
    font-size: 15px; font-weight: 700; text-align: center; color: var(--ink);
    margin-bottom: 8px;
  }
  .namegate-input.shake-input { animation: shakeInput .3s; border-color: var(--danger); }
  .namegate-error { font-size: 12px; font-weight: 700; color: var(--danger); min-height: 16px; margin-bottom: 6px; opacity: 0; transition: opacity .2s; }
  .namegate-error.show { opacity: 1; }
  @keyframes shakeInput { 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }

  /* ── Platform logo strip: infinite marquee, ported from POPSHOP's PlatformBanner ──
     Points at the single shared /asset/ folder -- no per-game duplicate copies. ── */
  .platform-strip { position: relative; overflow: hidden; padding: 6px 0 2px; flex-shrink: 0; }
  .platform-strip::before, .platform-strip::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 32px; z-index: 2; pointer-events: none;
  }
  .platform-strip::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
  .platform-strip::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
  .platform-track {
    display: flex; align-items: center; gap: 10px; width: max-content;
    animation: platformMarquee 36s linear infinite;
  }
  .platform-strip:hover .platform-track { animation-play-state: paused; }
  @keyframes platformMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .platform-card {
    flex: 0 0 auto; width: 70px; height: 38px; border-radius: 11px;
    background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(63,36,54,.06);
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s;
  }
  .platform-card:active { transform: scale(.92); }
  .platform-card img { height: 20px; width: auto; max-width: 90%; object-fit: contain; display: block; }
  @media (prefers-reduced-motion: reduce) { .platform-track { animation: none; } }

  /* ── App shell ── */
  .app { width: min(100%, 520px); min-height: 100vh; min-height: 100dvh; margin: auto; padding: 8px 14px 26px; display: flex; flex-direction: column; }
  .top { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; padding: 5px 0 4px; gap: 6px; }
  .icon {
    width: 42px; height: 42px; border: 1.5px solid var(--line); border-radius: 14px;
    background: rgba(255,255,255,.82); box-shadow: 0 4px 12px rgba(49,30,44,.06);
    display: grid; place-items: center; font-size: 19px; font-weight: 800;
    cursor: pointer; text-decoration: none; color: inherit;
  }
  .icon:active { transform: scale(.94); }
  .brand { height: 72px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .brand img { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(24,79,200,.22)); }

  .progress-wrap { display: flex; align-items: center; gap: 11px; margin: 8px 3px 13px; }
  .level { font-size: 11px; font-weight: 800; color: var(--purple); white-space: nowrap; }
  .track { height: 7px; flex: 1; background: #eadfe6; border-radius: 10px; overflow: hidden; }
  .fill { height: 100%; width: 4%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--purple)); transition: width .35s; }

  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
  .stat { background: rgba(255,255,255,.78); border: 1px solid var(--line); border-radius: 15px; text-align: center; padding: 8px 4px; }
  .stat b { display: block; font-size: 15px; }
  .stat small { display: block; font-size: 9px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }

  .game {
    position: relative; flex: 1; min-height: 410px; border: 1px solid rgba(255,255,255,.9);
    border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,250,246,.9));
    box-shadow: var(--shadow); padding: 22px 10px 16px; overflow: hidden;
  }
  .game:before, .game:after { content: ''; position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
  .game:before { width: 150px; height: 150px; background: rgba(236,72,153,.05); top: -60px; left: -40px; }
  .game:after { width: 170px; height: 170px; background: rgba(139,92,246,.06); bottom: -70px; right: -50px; }
  .message { position: relative; z-index: 2; text-align: center; height: 25px; font-size: 12px; font-weight: 700; color: var(--muted); transition: .2s; }
  .board { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 20px 15px; min-height: 330px; padding: 8px 3px; }

  /* ── Tube + liquid: one clean definition (candy-glass tube, single flat
     liquid segment style). Previous version had this redefined six times
     across cascading CSS blocks that each partially overrode the last --
     consolidated here to whatever the final intended look actually was. ── */
  .tube {
    position: relative; width: 50px; height: 146px; border: 3px solid #75bdf0; border-top: 0;
    border-radius: 5px 5px 22px 22px; cursor: pointer;
    background: linear-gradient(90deg, rgba(110,196,255,.25), rgba(255,255,255,.72) 20%, rgba(218,244,255,.16) 52%, rgba(255,255,255,.62) 83%, rgba(83,168,231,.26));
    box-shadow: inset 2px 0 0 rgba(255,255,255,.9), inset -2px 0 0 rgba(42,117,200,.18), inset 0 -4px 0 rgba(255,255,255,.32), 0 2px 0 #397ec5, 0 9px 13px rgba(24,76,139,.2);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  }