/* ─── SVG scene animations (from coop-island.jsx) ─────────────────────────── */
.wa  { animation: waveDrift  7s ease-in-out infinite }
.wa2 { animation: waveDrift  5s ease-in-out infinite reverse }
.c1  { animation: cf1 22s ease-in-out infinite }
.c2  { animation: cf2 28s ease-in-out infinite }
.c3  { animation: cf3 19s ease-in-out infinite }
.bm  { animation: beamSweep 4s ease-in-out infinite; transform-origin: 578px 265px }
.bd1 { animation: bd1  9s ease-in-out infinite }
.bd2 { animation: bd2 12s ease-in-out infinite }
.fg  { animation: flagWave 2.2s ease-in-out infinite; transform-origin: 578px 253px }
.ml  { transition: opacity 1.4s ease }

@keyframes waveDrift { 0%,100%{transform:translateX(0)}       50%{transform:translateX(-55px)} }
@keyframes cf1       { 0%,100%{transform:translate(0,0)}       40%{transform:translate(35px,-10px)} 70%{transform:translate(-18px,6px)} }
@keyframes cf2       { 0%,100%{transform:translate(0,0)}       50%{transform:translate(-45px,8px)} }
@keyframes cf3       { 0%,100%{transform:translate(0,0)}       60%{transform:translate(28px,-7px)} }
@keyframes beamSweep { 0%,100%{transform:rotate(0deg);opacity:.42} 50%{transform:rotate(-38deg);opacity:.1} }
@keyframes bd1       { 0%,100%{transform:translate(0,0)}       30%{transform:translate(28px,-14px)} 70%{transform:translate(-12px,9px)} }
@keyframes bd2       { 0%,100%{transform:translate(0,0)}       50%{transform:translate(-32px,-18px)} }
@keyframes flagWave  { 0%,100%{transform:skewX(0deg)}          50%{transform:skewX(12deg)} }
@keyframes fwBurst   { 0%{transform:scale(0);opacity:0} 15%{transform:scale(.3);opacity:1} 55%{transform:scale(1);opacity:.9} 100%{transform:scale(1.5);opacity:0} }

/* ─── Player badge ─────────────────────────────────────────────────────────── */
.sb-player-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
  cursor: pointer;
  transition: background .2s;
}
.sb-player-badge:hover { background: rgba(255,255,255,0.28); }

/* ─── Scroll ───────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth }

/* ─── Onboarding / edit modal ─────────────────────────────────────────────── */
#sb-edit-modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  z-index: 9999;
}
#sb-onboarding {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  z-index: 9999;
}
.sb-modal {
  background: white;
  border-radius: 24px;
  padding: 32px 28px;
  max-width: 420px;
  width: 90%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
  font-family: inherit;
}
.sb-modal h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 900;
  color: #1a1a1a;
}
.sb-modal > p {
  margin: 0 0 20px;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
}
.sb-animal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.sb-animal-btn {
  font-size: 1.6rem;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #f5f5f5;
  cursor: pointer;
  transition: all .15s;
  line-height: 1;
}
.sb-animal-btn:hover  { background: #e8f5e9; border-color: #4caf50; }
.sb-animal-btn.selected { border-color: #10b981; background: #d1fae5; }

.sb-nick-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.sb-nick-row input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  outline: none;
}
.sb-nick-row input:focus { border-color: #10b981; }
.sb-nick-row button {
  padding: 10px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all .15s;
}
.sb-nick-row button:hover { border-color: #10b981; background: #f0fdf4; }

.sb-primary-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(90deg, #10b981, #059669);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s;
  margin-bottom: 14px;
}
.sb-primary-btn:hover { transform: translateY(-2px); }

.sb-privacy-note {
  font-size: 0.78rem;
  color: #9ca3af;
  text-align: center;
  line-height: 1.5;
}
.sb-privacy-note a { color: #6b7280; }

.sb-cancel-btn {
  width: 100%;
  padding: 10px;
  background: none;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  transition: all .15s;
  margin-top: 8px;
}
.sb-cancel-btn:hover { border-color: #9ca3af; color: #374151; }

/* ─── World selector ───────────────────────────────────────────────────────── */
.sb-world-selector {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 16px;
  scrollbar-width: thin;
}
.sb-world-tab {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border-radius: 14px;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: white;
  font-family: inherit;
  font-weight: 700;
  transition: all .2s;
  position: relative;
}
.sb-world-tab-emoji { font-size: 24px; }
.sb-world-tab-label { font-size: 11px; opacity: .8; }

.sb-world-completed { border-color: #c4a030; background: rgba(196,160,48,0.15); }
.sb-world-completed:hover { background: rgba(196,160,48,0.25); }

.sb-world-active {
  border-color: #4ac84a;
  background: rgba(74,200,74,0.15);
  box-shadow: 0 0 0 3px rgba(74,200,74,0.2);
}
.sb-world-active-pip {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ac84a;
  animation: pipPulse 2s ease-in-out infinite;
}
@keyframes pipPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }

.sb-world-locked { opacity: .4; cursor: not-allowed; }

/* ─── Trophy overlay ───────────────────────────────────────────────────────── */
.sb-trophy-stamp {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  border-radius: 22px;
  animation: trophyFadeIn .4s ease forwards;
}
@keyframes trophyFadeIn { from{opacity:0} to{opacity:1} }
.sb-trophy-badge {
  background: linear-gradient(135deg, #c4a030, #f5d860);
  color: #1a1000;
  border-radius: 20px;
  padding: 20px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.sb-trophy-emoji { font-size: 48px; }
.sb-trophy-pts   { font-size: 13px; opacity: .7; }

/* ─── Toasts ───────────────────────────────────────────────────────────────── */
.sb-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #065f46;
  color: white;
  padding: 10px 22px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 15px;
  z-index: 9998;
  animation: toastSlide .25s ease, toastFade .4s ease 2.6s forwards;
  white-space: nowrap;
  pointer-events: none;
  font-family: inherit;
}
.sb-toast-unlock {
  background: linear-gradient(135deg, #1a6b3a, #2da858);
  padding: 12px 26px;
  font-size: 17px;
  border-radius: 40px;
  border: 2px solid rgba(255,255,255,.25);
  bottom: auto;
  top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn .5s cubic-bezier(.175,.885,.32,1.275);
}
.sb-toast-icon { font-size: 26px; }

@keyframes toastSlide { from{transform:translateX(-50%) translateY(16px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }
@keyframes toastFade  { to{opacity:0} }
@keyframes toastIn    { from{transform:translateX(-50%) translateY(-20px) scale(.8);opacity:0} to{transform:translateX(-50%) translateY(0) scale(1);opacity:1} }

/* ─── Leaderboard ──────────────────────────────────────────────────────────── */
.sb-leaderboard { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.sb-lb-header   { display: flex; justify-content: space-between; align-items: baseline; background: #f0fdf4; padding: .75rem 1.25rem; border-bottom: 2px solid #bbf7d0; }
.sb-lb-title    { font-weight: 800; font-size: 1.05rem; }
.sb-lb-sub      { font-size: .8rem; color: #6b7280; }
.sb-lb-list     { list-style: none; margin: 0; padding: 0; }
.sb-lb-row      { display: flex; align-items: center; gap: .7rem; padding: .6rem 1.25rem; border-bottom: 1px solid #f3f4f6; }
.sb-lb-row:last-child { border-bottom: none; }
.sb-lb-row.sb-lb-me  { background: #ecfdf5; font-weight: 800; }
.sb-lb-rank   { width: 2rem; text-align: center; font-size: 1.1rem; }
.sb-lb-animal { font-size: 1.3rem; }
.sb-lb-nick   { flex: 1; }
.sb-lb-score  { color: #059669; font-weight: 700; }

/* ─── Tabs ─────────────────────────────────────────────────────────────────── */
.sb-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.sb-tab  { padding: .45rem 1.1rem; border-radius: .5rem; border: 2px solid #d1d5db; background: #fff; cursor: pointer; font-weight: 700; transition: all .15s; font-family: inherit; font-size: .9rem; }
.sb-tab.active, .sb-tab:hover { background: #10b981; border-color: #10b981; color: #fff; }

/* Period tab row has slightly different style to distinguish from game tabs */
.sb-period-tabs .sb-tab { background: #f0fdf4; border-color: #bbf7d0; font-size: .82rem; }
.sb-period-tabs .sb-tab.active, .sb-period-tabs .sb-tab:hover { background: #059669; border-color: #059669; color: #fff; }

/* ─── Scoreboard sections ──────────────────────────────────────────────────── */
.sb-section {
  width: 100%;
  max-width: 900px;
  padding: 0 24px 40px;
}
.sb-section h2 {
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0 0 16px;
  color: #1a1a1a;
}
#sb-coop-scene {
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  position: relative;
}

/* ─── Cooperative progress strip ──────────────────────────────────────────── */
.sb-coop-progress {
  margin-top: 12px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: #374151;
  min-height: 1.4em;
}

/* ─── Scroll navigation buttons ───────────────────────────────────────────── */
.sb-scroll-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 24px;
  border: 2px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.15);
  color: white;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s;
  text-decoration: none;
}
.sb-scroll-btn:hover { background: rgba(255,255,255,0.28); }
.sb-scroll-btn-dark {
  border-color: #d1d5db;
  background: #f9fafb;
  color: #374151;
}
.sb-scroll-btn-dark:hover { background: #e5e7eb; }

.sb-scroll-center {
  width: 100%;
  max-width: 900px;
  padding: 0 24px 32px;
  text-align: center;
}

/* ─── Compact leaderboard bar ─────────────────────────────────────────────── */
.sb-compact-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.sb-compact-info {
  font-weight: 800;
  font-size: 0.95rem;
  color: #374151;
}
.sb-expand-btn {
  padding: 6px 14px;
  border-radius: 10px;
  border: 2px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.sb-expand-btn:hover { background: #e5e7eb; }
.sb-expand-btn-dark {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
  color: #374151;
}
.sb-expand-btn-dark:hover { background: rgba(255,255,255,0.22); }

/* ─── Cooperative expand row ───────────────────────────────────────────────── */
.sb-coop-expand-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* ─── Utility ──────────────────────────────────────────────────────────────── */
.sb-loading { padding: 1.5rem; text-align: center; color: #6b7280; }
.sb-error   { padding: 1.5rem; text-align: center; color: #dc2626; }
.sb-empty   { padding: 1.5rem; text-align: center; color: #6b7280; }

/* ─── Multi-profile management modal ─────────────────────────────────────────── */
#sb-profiles-modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  z-index: 9999;
}
.sb-profile-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sb-profile-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  background: #f9fafb;
}
.sb-profile-row.sb-profile-active {
  border-color: #10b981;
  background: #f0fdf4;
}
.sb-profile-animal { font-size: 1.6rem; line-height: 1; }
.sb-profile-nick   { flex: 1; font-weight: 800; font-size: 1rem; }
.sb-profile-actions { display: flex; gap: 6px; }
.sb-profile-actions button {
  padding: 5px 10px;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  background: white;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.sb-profile-actions button:hover { border-color: #10b981; color: #059669; }
.sb-profile-actions .sb-del-btn:hover { border-color: #dc2626; color: #dc2626; }
.sb-secondary-btn {
  width: 100%;
  padding: 10px;
  background: none;
  border: 2px solid #d1d5db;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: 8px;
}
.sb-secondary-btn:hover { border-color: #10b981; color: #059669; }

/* ─── Re-pair notification banner ────────────────────────────────────────── */
.sb-repair-notice {
  background: #fef3c7;
  border: 1.5px solid #f59e0b;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: .85rem;
  font-weight: 700;
  color: #92400e;
  text-align: center;
  margin: 8px auto 0;
  max-width: 500px;
  width: 90%;
}

/* ─── Pairing code display ───────────────────────────────────────────────── */
.sb-pair-code {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: .25em;
  text-align: center;
  padding: 18px 10px;
  background: #f0fdf4;
  border: 2px solid #bbf7d0;
  border-radius: 16px;
  margin: 12px 0;
  color: #065f46;
}
.sb-pair-countdown {
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 12px;
  min-height: 1.3em;
}