* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --ink: #1a1530; --muted: #7a7292; --line: #e3ddf5;
  --accent: #7c3aed; --accent2: #06b6d4;
  --bg: #f3f0fb; --surface: #ffffff;
  --danger: #dc2626;
}
html, body { overscroll-behavior: none; }
body {
  font-family: 'Sora', sans-serif;
  background: var(--bg); color: var(--ink);
  min-height: 100vh; min-height: 100dvh;
  padding: 10px 12px 0;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 480px; width: 100%; margin: 0 auto; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* -- Platform logo strip: infinite marquee, same as every other game page -- */
.platform-strip { position: relative; overflow: hidden; padding: 8px 0; 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: 76px; height: 42px; border-radius: 12px;
  background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.platform-card:active { transform: scale(.92); }
.platform-card img { height: 22px; width: auto; max-width: 90%; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) { .platform-track { animation: none; } }

/* -- Header -- */
.header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 6px 0 10px; flex-shrink: 0; }
.header-left, .header-right { display: flex; align-items: center; gap: 8px; width: 36px; }
.back-btn {
  width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer;
}
.bola-logo { height: 34px; width: auto; display: block; }

/* -- HUD control row below the game, same placement/sizing /arrow, /connect,
   /block and /merge use for their Ranking/Como-jogar buttons (kept out of
   the persistent top header, which stays back-button + logo only there). -- */
/* Bottom clearance big enough that the site-wide #rpGuestBanner (fixed,
   bottom:12px, ~70px tall -- src/authui.js) never sits on top of these
   buttons and eats their taps, since this row is the last thing on the
   page instead of sitting above more content like it does elsewhere. */
.hud-btns { position: static; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 14px 0 calc(90px + env(safe-area-inset-bottom, 0px)); }
.icon-btn {
  position: relative; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1; padding: 0;
  background: #f8fafc; border: 1px solid var(--line);
  box-shadow: 0 3px 8px rgba(15,23,42,.10);
  cursor: pointer; transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.icon-btn:active { transform: scale(.88); }

/* -- How to play / Leaderboard overlays -- shared shell every game reuses -- */
.howto-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(15,23,42,.55); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 20px;
}
.howto-overlay.show { display: flex; }
.howto-card {
  background: var(--surface); border-radius: 18px; padding: 22px 20px;
  max-width: 380px; width: 100%; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.howto-title { font-size: 19px; font-weight: 800; text-align: center; margin-bottom: 16px; }
.howto-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.howto-emoji { font-size: 24px; flex-shrink: 0; line-height: 1.3; }
.howto-step b { display: block; font-size: 13px; margin-bottom: 2px; }
.howto-step p { font-size: 12px; color: var(--muted); line-height: 1.4; }
.howto-card .result-btn { width: 100%; margin-top: 6px; }

.leaderboard-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; max-height: 50vh; overflow-y: auto; }
.leaderboard-loading, .leaderboard-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 20px 0; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg); }
.lb-row.me { background: rgba(245,158,11,.15); border: 1.5px solid var(--accent); }
.lb-rank { font-weight: 800; font-size: 13px; color: var(--muted); width: 22px; text-align: center; flex-shrink: 0; }
.lb-row:nth-child(1) .lb-rank { color: #eab308; }
.lb-row:nth-child(2) .lb-rank { color: #94a3b8; }
.lb-row:nth-child(3) .lb-rank { color: #b45309; }
.lb-name { flex: 1; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-weight: 800; font-size: 14px; color: var(--accent); }

/* -- Name gate: guest-friendly, matches /arrow, /sort etc -- a logged-in
   member skips this entirely (handled in game.js) and plays under their
   real account; a guest can still play under a typed display name, just
   without their score persisting to the leaderboard. -- */
.namegate-overlay {
  position: fixed; inset: 0; z-index: 500; background: rgba(15,10,30,.6); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.namegate-overlay.show { display: flex; }
.namegate-card {
  background: #fff; border-radius: 22px; padding: 28px 24px; max-width: 320px; width: 100%;
  text-align: center; box-shadow: 0 20px 50px -12px rgba(0,0,0,.4);
}
.namegate-logo { height: 64px; width: auto; margin-bottom: 12px; }
.namegate-title { font-family: 'Baloo 2', sans-serif; font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.namegate-sub { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.namegate-input {
  width: 100%; padding: 13px 14px; border-radius: 14px; border: 1.5px solid var(--line);
  font-size: 15px; font-family: 'Sora', sans-serif; margin-bottom: 8px; text-align: center;
}
.namegate-input:focus { outline: none; border-color: var(--accent); }
.namegate-error { font-size: 12.5px; color: var(--danger); min-height: 16px; margin-bottom: 8px; }
.namegate-error.show { font-weight: 700; }
.shake-input { animation: shakeInput .35s; }
@keyframes shakeInput { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

.result-btn {
  width: 100%; padding: 14px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff;
  font-weight: 800; font-size: 15px; cursor: pointer; font-family: 'Sora', sans-serif;
  box-shadow: 0 10px 22px -8px rgba(124,58,237,.5);
}