/* ================================================================
   Cyber-style theme — dark, neon, responsive (PC / iPad / Mobile)
   ================================================================ */

:root {
  --bg-deep: #060418;
  --bg: #0a0828;
  --surface: rgba(12, 10, 42, 0.78);
  --surface-hi: rgba(20, 18, 58, 0.88);
  --ink: #e8eaff;
  --ink-dim: rgba(210, 215, 250, 0.72);
  --card: rgba(14, 12, 44, 0.80);
  --line: rgba(140, 120, 255, 0.16);
  --line-glow: rgba(180, 80, 255, 0.35);
  --cyan: #00e5ff;
  --cyan-dim: #0088aa;
  --purple: #b347ea;
  --purple-bright: #d472ff;
  --pink: #ff2d95;
  --pink-bright: #ff5eb8;
  --sky: #64c8ff;
  --sky-bright: #a0e0ff;
  --green: #00ff88;
  --gold: #ffb800;
  --gold-deep: #ff6a00;
  --roll: #ff3355;
  --buy: #1e80ff;
  --success: #00e676;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(140, 100, 255, 0.10);
  --glow-cyan: 0 0 20px rgba(0, 229, 255, 0.30);
  --glow-pink: 0 0 20px rgba(255, 45, 149, 0.30);
  --glow-purple: 0 0 20px rgba(180, 71, 234, 0.30);
  --glow-sky: 0 0 20px rgba(100, 200, 255, 0.30);
  --font-mono: "Space Grotesk", "SF Mono", "Fira Code", monospace;
}

* { box-sizing: border-box; }

/* --- Body --- */

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-mono);
  color: var(--ink);
  background:
    /* fine grid base */
    linear-gradient(rgba(140, 100, 240, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 100, 240, 0.04) 1px, transparent 1px),
    /* neon orbs */
    radial-gradient(ellipse at 20% 5%,  rgba(100, 200, 255, 0.18), transparent 50%),
    radial-gradient(ellipse at 85% 35%, rgba(180, 71, 234, 0.15), transparent 50%),
    radial-gradient(ellipse at 65% 90%, rgba(255, 45, 149, 0.14), transparent 50%),
    /* base dark gradient */
    linear-gradient(175deg, #05031a 0%, #08052a 30%, #0a072e 60%, #06031c 100%);
  background-size:
    48px 48px, 48px 48px,
    100% 100%, 100% 100%, 100% 100%, 100% 100%;
  transition: background 0.4s ease, color 0.4s ease;
}

/* circuit wires + scanlines + glowing nodes (persists across event themes) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    /* scanlines */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.035) 2px,
      rgba(0, 0, 0, 0.035) 4px
    ),
    /* --- CIRCUIT TRACES --- */
    /* power line — thick horizontal, pulses sky-blue */
    repeating-linear-gradient(0deg,
      transparent,
      transparent 239px,
      rgba(100, 200, 255, 0.06) 239px,
      rgba(100, 200, 255, 0.06) 240px,
      transparent 240px,
      transparent 480px),
    /* power line — thick vertical, pulses purple */
    repeating-linear-gradient(90deg,
      transparent,
      transparent 319px,
      rgba(180, 71, 234, 0.06) 319px,
      rgba(180, 71, 234, 0.06) 320px,
      transparent 320px,
      transparent 640px),
    /* data trace — 45° diagonal, sky-blue */
    repeating-linear-gradient(45deg,
      transparent,
      transparent 79px,
      rgba(100, 200, 255, 0.07) 79px,
      rgba(100, 200, 255, 0.07) 80px,
      transparent 80px,
      transparent 160px),
    /* data trace — -45° diagonal, purple */
    repeating-linear-gradient(-45deg,
      transparent,
      transparent 119px,
      rgba(180, 71, 234, 0.07) 119px,
      rgba(180, 71, 234, 0.07) 120px,
      transparent 120px,
      transparent 240px),
    /* --- CIRCUIT NODES — small dots at trace intersections --- */
    radial-gradient(circle at 80px 80px,   rgba(100, 200, 255, 0.7) 2px, transparent 2px),
    radial-gradient(circle at 160px 160px, rgba(180, 71, 234, 0.6) 2px, transparent 2px),
    radial-gradient(circle at 240px 80px,  rgba(255, 45, 149, 0.6) 2px, transparent 2px),
    radial-gradient(circle at 320px 240px, rgba(100, 200, 255, 0.65) 2px, transparent 2px),
    radial-gradient(circle at 400px 160px, rgba(180, 71, 234, 0.6) 2px, transparent 2px),
    radial-gradient(circle at 480px 320px, rgba(255, 45, 149, 0.65) 2px, transparent 2px),
    radial-gradient(circle at 560px 80px,  rgba(100, 200, 255, 0.6) 2px, transparent 2px),
    radial-gradient(circle at 640px 240px, rgba(180, 71, 234, 0.65) 2px, transparent 2px),
    radial-gradient(circle at 720px 160px, rgba(255, 45, 149, 0.6) 2px, transparent 2px),
    radial-gradient(circle at 80px 320px,  rgba(100, 200, 255, 0.65) 2px, transparent 2px),
    radial-gradient(circle at 160px 400px, rgba(180, 71, 234, 0.6) 2px, transparent 2px),
    radial-gradient(circle at 320px 400px, rgba(255, 45, 149, 0.65) 2px, transparent 2px),
    radial-gradient(circle at 480px 160px, rgba(100, 200, 255, 0.6) 2px, transparent 2px),
    radial-gradient(circle at 640px 320px, rgba(180, 71, 234, 0.65) 2px, transparent 2px),
    radial-gradient(circle at 800px 80px,  rgba(255, 45, 149, 0.6) 2px, transparent 2px),
    radial-gradient(circle at 160px 480px, rgba(100, 200, 255, 0.65) 2px, transparent 2px),
    radial-gradient(circle at 400px 480px, rgba(180, 71, 234, 0.6) 2px, transparent 2px),
    radial-gradient(circle at 640px 400px, rgba(255, 45, 149, 0.65) 2px, transparent 2px),
    /* --- JUNCTION HUBS — larger glowing nodes --- */
    radial-gradient(circle at 240px 240px, rgba(212, 114, 255, 0.8) 3px, transparent 3px),
    radial-gradient(circle at 480px 80px,  rgba(160, 224, 255, 0.8) 3px, transparent 3px),
    radial-gradient(circle at 720px 320px, rgba(255, 94, 184, 0.8) 3px, transparent 3px),
    radial-gradient(circle at 80px 480px,  rgba(160, 224, 255, 0.8) 3px, transparent 3px),
    radial-gradient(circle at 560px 400px, rgba(212, 114, 255, 0.8) 3px, transparent 3px);
  background-size:
    100% 100%,
    480px 480px, 640px 640px, 160px 160px, 240px 240px,
    480px 480px, 480px 480px, 480px 480px, 480px 480px,
    480px 480px, 480px 480px, 480px 480px, 480px 480px,
    480px 480px, 480px 480px, 480px 480px, 480px 480px,
    480px 480px, 480px 480px, 480px 480px, 480px 480px,
    480px 480px, 480px 480px;
  pointer-events: none;
  z-index: 9998;
  animation: circuitPulse 8s ease-in-out infinite;
}

@keyframes circuitPulse {
  0%, 100% { opacity: 0.55; }
  25%      { opacity: 0.9; }
  50%      { opacity: 0.5; }
  75%      { opacity: 0.85; }
}

/* electrical sparkle dots — scattered via animated body overlay */
@keyframes sparkleDrift {
  0%, 100% { opacity: 0.4; }
  25%      { opacity: 0.9; }
  50%      { opacity: 0.3; }
  75%      { opacity: 0.8; }
}

/* floating neon orbs — three vibrant energy sources */
body::before {
  content: "";
  position: fixed;
  top: -12%;
  right: -6%;
  width: 40rem;
  height: 40rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 60% 40%, rgba(100, 200, 255, 0.16), transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(180, 71, 234, 0.12), transparent 50%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
  animation: orbPulseSky 6s ease-in-out infinite;
}

.game-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px;
  position: relative;
  z-index: 1;
}

/* lower-left pink+purple orb */
.game-shell::before {
  content: "";
  position: fixed;
  bottom: -14%;
  left: -8%;
  width: 34rem;
  height: 34rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 40% 40%, rgba(255, 45, 149, 0.14), transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(180, 71, 234, 0.10), transparent 50%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
  animation: orbPulsePink 7s ease-in-out infinite;
}

/* third floating orb — top-center sky blue */
.game-shell::after {
  content: "";
  position: fixed;
  top: 5%;
  left: 40%;
  width: 22rem;
  height: 22rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(160, 224, 255, 0.10), transparent 65%);
  filter: blur(45px);
  pointer-events: none;
  z-index: 0;
  animation: orbPulseSky 5s ease-in-out infinite;
}

@keyframes orbPulseSky {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

@keyframes orbPulsePink {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* --- Electrical neon border glow for panels --- */

@keyframes neonBorderFlow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* flowing neon border via clip-path trick on shared panels */
.topbar,
.roller-panel,
.collection-panel,
.rebirth-panel {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

/* neon edge highlight — top edge */
.topbar::after,
.roller-panel::after,
.collection-panel::after,
.rebirth-panel::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--purple-bright) 15%,
    var(--sky) 35%,
    var(--cyan) 50%,
    var(--pink-bright) 70%,
    transparent 100%);
  background-size: 200% 100%;
  animation: neonBorderFlow 5s linear infinite;
  border-radius: 24px 24px 0 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.8;
}

/* --- Event body themes --- */

body.event-rainbow {
  --bg-deep: #14071a;
  --bg: #1a0d28;
  --surface: rgba(24, 10, 36, 0.78);
  --card: rgba(22, 8, 34, 0.80);
  --line: rgba(255, 120, 200, 0.16);
  --line-glow: rgba(255, 150, 220, 0.30);
  background:
    linear-gradient(rgba(255, 100, 200, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 100, 200, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse at 30% 10%, rgba(255, 80, 180, 0.14), transparent 55%),
    radial-gradient(ellipse at 70% 90%, rgba(0, 229, 255, 0.12), transparent 55%),
    linear-gradient(170deg, var(--bg-deep), var(--bg) 60%, #1a0d28);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%, 100% 100%;
}

body.event-radioactive {
  --bg-deep: #0a0505;
  --bg: #12080a;
  --surface: rgba(20, 6, 8, 0.80);
  --ink: #ffe8d0;
  --ink-dim: rgba(255, 220, 180, 0.72);
  --card: rgba(18, 6, 8, 0.82);
  --line: rgba(255, 120, 60, 0.18);
  --line-glow: rgba(255, 90, 30, 0.32);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 100, 40, 0.10);
  background:
    linear-gradient(rgba(255, 80, 20, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 80, 20, 0.04) 1px, transparent 1px),
    radial-gradient(ellipse at 40% 5%, rgba(255, 60, 20, 0.16), transparent 55%),
    radial-gradient(ellipse at 60% 95%, rgba(100, 200, 50, 0.10), transparent 55%),
    linear-gradient(170deg, var(--bg-deep), var(--bg) 60%, #140a0a);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%, 100% 100%;
}

body.event-diamond {
  --bg-deep: #060e1a;
  --bg: #0a1628;
  --surface: rgba(8, 20, 40, 0.78);
  --card: rgba(10, 20, 42, 0.80);
  --line: rgba(100, 200, 255, 0.18);
  --line-glow: rgba(120, 210, 255, 0.30);
  background:
    linear-gradient(rgba(100, 200, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 200, 255, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse at 30% 10%, rgba(80, 200, 255, 0.14), transparent 55%),
    radial-gradient(ellipse at 70% 90%, rgba(150, 200, 255, 0.10), transparent 55%),
    linear-gradient(170deg, var(--bg-deep), var(--bg) 60%, #0c1828);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%, 100% 100%;
}

/* radioactive event: panel text fix (dark bg → need light text for some elements) */
body.event-radioactive .rebirth-copy,
body.event-radioactive .status-text,
body.event-radioactive .flavor,
body.event-radioactive .owned-meta,
body.event-radioactive .label,
body.event-radioactive .character-stat span {
  color: rgba(255, 220, 180, 0.78);
}

body.event-radioactive .admin-input,
body.event-radioactive .admin-select {
  background: rgba(20, 8, 10, 0.9);
  color: #ffe8d0;
  border-color: rgba(255, 120, 60, 0.22);
  -webkit-text-fill-color: #ffe8d0;
}

body.event-radioactive .admin-input::placeholder {
  color: rgba(255, 200, 150, 0.45);
  -webkit-text-fill-color: rgba(255, 200, 150, 0.45);
}

/* --- Topbar --- */

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

.eyebrow,
.label,
.small-note,
.chance-badge,
.trait-tag,
.status-text,
.character-stat span {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.eyebrow {
  background: linear-gradient(90deg, var(--pink-bright), var(--purple-bright), var(--sky), var(--pink-bright));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: eyebrowShift 4s linear infinite;
}

@keyframes eyebrowShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.small-note,
.status-text,
.label,
.character-stat span {
  font-size: 0.74rem;
  color: var(--ink-dim);
}

.headline-wrap h1,
.panel-title-row h2,
#characterName {
  margin: 0;
  font-weight: 700;
}

.headline-wrap h1 {
  font-family: "Bungee", cursive;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.08;
  max-width: 14ch;
  display: none;
  text-shadow: 0 0 22px rgba(0, 229, 255, 0.35);
}

.totals {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* --- Stat pills --- */

.stat-pill {
  min-width: 160px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stat-pill:hover {
  border-color: var(--line-glow);
  box-shadow: var(--glow-cyan);
}

.stat-pill strong {
  display: block;
  margin-top: 4px;
  font-size: 1.35rem;
  font-weight: 700;
}

.stat-pill.accent {
  background: linear-gradient(135deg, rgba(180, 71, 234, 0.22), rgba(255, 45, 149, 0.16));
  border-color: rgba(200, 100, 240, 0.35);
  color: var(--ink);
  animation: accentPulse 3s ease-in-out infinite;
}

.stat-pill.math-token-pill {
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.20), rgba(0, 180, 90, 0.12));
  border-color: rgba(0, 230, 118, 0.32);
  color: var(--ink);
}

.stat-pill.math-token-pill:hover {
  border-color: rgba(0, 255, 140, 0.45);
  box-shadow: 0 0 18px rgba(0, 230, 118, 0.20);
}

@keyframes accentPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(180, 71, 234, 0.20); }
  50%      { box-shadow: 0 0 22px rgba(255, 45, 149, 0.35), 0 0 36px rgba(180, 71, 234, 0.15); }
}

/* --- Topbar nav buttons --- */

.stat-button {
  min-width: 155px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.stat-button:hover {
  transform: translateY(-2px);
  border-color: var(--line-glow);
  box-shadow: var(--glow-cyan);
}

.stat-button:active { transform: translateY(0); }

.rebirth-launch {
  min-height: 80px;
  background: linear-gradient(135deg, rgba(180, 71, 234, 0.18), rgba(255, 45, 149, 0.12));
  border-color: rgba(200, 100, 240, 0.30);
}
.rebirth-launch:hover { box-shadow: 0 0 28px rgba(180, 71, 234, 0.40), 0 0 50px rgba(255, 45, 149, 0.18); }

.admin-launch {
  min-height: 80px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(180, 190, 220, 0.05));
  border-color: rgba(200, 200, 230, 0.20);
}
.admin-launch:hover { box-shadow: 0 0 28px rgba(200, 200, 250, 0.25); }

.sailing-launch {
  min-height: 80px;
  background: linear-gradient(135deg, rgba(100, 200, 255, 0.18), rgba(30, 100, 220, 0.12));
  border-color: rgba(100, 200, 255, 0.32);
  color: #fff;
}
.sailing-launch:hover { box-shadow: 0 0 28px rgba(100, 200, 255, 0.40), 0 0 50px rgba(100, 180, 240, 0.18); }

.account-launch {
  min-height: 80px;
  background: linear-gradient(135deg, rgba(160, 100, 255, 0.20), rgba(255, 45, 149, 0.10));
  border-color: rgba(180, 100, 255, 0.35);
  color: #fff;
}
.account-launch:hover { box-shadow: 0 0 28px rgba(160, 100, 255, 0.40), 0 0 50px rgba(255, 45, 149, 0.20); }

/* --- Main grid --- */

.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 20px;
  margin-top: 20px;
}

.rebirth-page {
  margin-top: 20px;
}

.roller-panel,
.collection-panel,
.rebirth-panel {
  padding: 22px;
}

/* --- Panel titles --- */

.panel-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.panel-title-row h2 {
  text-shadow: 0 0 14px rgba(180, 71, 234, 0.45), 0 0 30px rgba(100, 200, 255, 0.20);
  animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 14px rgba(180, 71, 234, 0.45), 0 0 30px rgba(100, 200, 255, 0.20); }
  50%      { text-shadow: 0 0 22px rgba(255, 45, 149, 0.60), 0 0 44px rgba(100, 200, 255, 0.35), 0 0 60px rgba(180, 71, 234, 0.15); }
}

/* --- Viewer panel — cyber neon "View Brainrot" card --- */

.viewer-panel {
  margin: 0 0 10px 0;
  padding: 18px 20px;
  border: 1px solid var(--purple-bright);
  border-radius: 20px;
  background:
    linear-gradient(160deg, rgba(20, 14, 50, 0.92), rgba(16, 12, 44, 0.85));
  grid-column: 1 / -1;
  box-shadow:
    0 0 24px rgba(180, 71, 234, 0.30),
    0 0 48px rgba(100, 200, 255, 0.12),
    inset 0 1px 0 rgba(212, 114, 255, 0.10);
  position: relative;
  overflow: hidden;
  animation: viewerEntry 0.35s ease-out;
}

/* neon edge sweep across viewer */
.viewer-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--purple-bright) 20%,
    var(--pink-bright) 45%,
    var(--sky-bright) 70%,
    transparent 100%);
  background-size: 200% 100%;
  animation: neonBorderFlow 5s linear infinite;
  border-radius: 20px 20px 0 0;
  pointer-events: none;
  z-index: 2;
}

/* subtle bottom edge too */
.viewer-panel::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(100, 200, 255, 0.25) 30%,
    rgba(180, 71, 234, 0.35) 60%,
    transparent 100%);
  pointer-events: none;
}

@keyframes viewerEntry {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.viewer-panel .panel-title-row {
  margin-bottom: 4px;
}

.viewer-panel .panel-title-row h2 {
  font-size: 1.1rem;
  text-shadow: 0 0 14px rgba(180, 71, 234, 0.50), 0 0 28px rgba(100, 200, 255, 0.22);
}

.viewer-panel .sprite-card.compact-viewer {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 12px;
}

.viewer-panel .sprite-card.compact-viewer .sprite-frame { flex: 0 0 160px; }
.viewer-panel .sprite-card.compact-viewer .sprite-copy { flex: 1; }

/* viewer sprite frame — extra neon ring */
.viewer-frame {
  border-color: rgba(180, 71, 234, 0.40) !important;
  box-shadow:
    0 0 22px rgba(180, 71, 234, 0.25),
    0 0 40px rgba(100, 200, 255, 0.10),
    inset 0 0 24px rgba(180, 71, 234, 0.08) !important;
}

.viewer-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}

/* viewer name */
.viewer-name {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(180, 71, 234, 0.35), 0 0 20px rgba(100, 200, 255, 0.18);
}

/* viewer stats row */
.viewer-stats {
  display: flex;
  gap: 14px;
  margin-top: 14px;
}

.viewer-stat {
  flex: 1;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.viewer-stat span {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

.viewer-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}

.viewer-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
}

.sell-button {
  flex: 1;
  background: linear-gradient(135deg, #cc3300, #ff4422);
  border-color: rgba(255, 68, 34, 0.35);
  font-size: 0.85rem;
  padding: 10px 14px;
}
.sell-button:hover { box-shadow: 0 0 22px rgba(255, 68, 34, 0.45); }

/* --- Floating viewer tooltip --- */

.floating-viewer {
  position: fixed;
  z-index: 10000;
  width: 380px;
  max-width: calc(100vw - 32px);
  padding: 16px 18px;
  border: 1px solid var(--purple-bright);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(20, 14, 50, 0.96), rgba(16, 12, 44, 0.92));
  box-shadow:
    0 0 30px rgba(180, 71, 234, 0.40),
    0 0 60px rgba(100, 200, 255, 0.15),
    0 12px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: viewerFadeIn 0.2s ease-out;
  pointer-events: auto;
}

@keyframes viewerFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.floating-viewer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--purple-bright), var(--pink-bright), var(--sky-bright), transparent);
  background-size: 200% 100%;
  animation: neonBorderFlow 5s linear infinite;
  border-radius: 20px 20px 0 0;
  pointer-events: none;
}

.floating-viewer .panel-title-row h2 {
  font-size: 1rem;
}

.floating-viewer-body {
  margin-top: 10px;
}

.floating-viewer-body .compact-viewer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.floating-viewer-body .viewer-frame {
  flex: 0 0 120px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.floating-viewer-body .viewer-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.floating-viewer-body .viewer-name {
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.floating-viewer-body .viewer-stats {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.floating-viewer-body .viewer-stat {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.8rem;
}

.floating-viewer-body .viewer-stat span {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

.floating-viewer-body .viewer-stat strong {
  display: block;
  margin-top: 3px;
  font-size: 1rem;
  font-weight: 700;
}

@media (max-width: 640px) {
  .floating-viewer {
    width: calc(100vw - 24px);
    left: 12px !important;
    right: 12px !important;
  }
}

.owned-viewer-inline {
  grid-column: 1 / -1;
  margin: 0 0 8px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-hi);
}

.owned-viewer-inline .sprite-card.compact-viewer {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 10px;
}
.owned-viewer-inline .sprite-card.compact-viewer .sprite-frame { flex: 0 0 140px; }
.owned-viewer-inline .sprite-card.compact-viewer .sprite-copy { flex: 1; }

/* --- Tags & badges --- */

.chance-badge,
.trait-tag,
.rarity-tag {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.chance-badge {
  background: rgba(255, 50, 80, 0.18);
  color: #ff5577;
  border: 1px solid rgba(255, 50, 80, 0.25);
}

/* --- Sprite card --- */

.sprite-card {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.compact-viewer { grid-template-columns: 130px minmax(0, 1fr); }

.compact-sailing-card { grid-template-columns: 200px minmax(0, 1fr); }

.sailing-boat-frame { min-height: 200px; }

/* --- Sprite frame --- */

.sprite-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(180, 71, 234, 0.10), rgba(12, 10, 42, 0.7)),
    #100e30;
  border: 1px solid var(--line);
  box-shadow:
    0 0 24px rgba(100, 200, 255, 0.12),
    inset 0 0 30px rgba(180, 71, 234, 0.06);
  animation: frameGlow 4s ease-in-out infinite;
}

@keyframes frameGlow {
  0%, 100% { box-shadow: 0 0 24px rgba(100, 200, 255, 0.12), inset 0 0 30px rgba(180, 71, 234, 0.06); }
  33%      { box-shadow: 0 0 34px rgba(180, 71, 234, 0.22), inset 0 0 40px rgba(255, 45, 149, 0.08); }
  66%      { box-shadow: 0 0 28px rgba(255, 45, 149, 0.18), inset 0 0 35px rgba(100, 200, 255, 0.07); }
}

.sprite-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sprite-frame img.cutout-image {
  object-fit: contain;
  padding: 12px;
  background:
    radial-gradient(circle at center, rgba(14, 14, 40, 0.92), rgba(10, 10, 30, 0.75));
}

/* --- Mutation frame glows --- */

.sprite-frame.rainbow { animation: rainbowGlow 3.6s linear infinite; }
.sprite-frame.radioactive { animation: radioactiveGlow 2.8s ease-in-out infinite; }
.sprite-frame.diamond { animation: diamondGlow 2.4s ease-in-out infinite; }

.sprite-frame img.mutation-rainbow { animation: rainbowImageShift 4s linear infinite; }
.sprite-frame img.mutation-radioactive { animation: radioactivePulse 3.2s ease-in-out infinite; }
.sprite-frame img.mutation-diamond { animation: diamondSparkle 2.8s ease-in-out infinite; }

/* --- Name line --- */

.name-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#characterName {
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-shadow: 0 0 12px rgba(180, 71, 234, 0.35), 0 0 24px rgba(100, 200, 255, 0.20);
  animation: nameGlow 2.8s ease-in-out infinite;
}

@keyframes nameGlow {
  0%, 100% { text-shadow: 0 0 12px rgba(180, 71, 234, 0.35), 0 0 24px rgba(100, 200, 255, 0.20); }
  50%      { text-shadow: 0 0 20px rgba(255, 45, 149, 0.50), 0 0 36px rgba(100, 200, 255, 0.35); }
}

/* --- Trait tags --- */

.trait-tag {
  color: #999;
  background: rgba(120, 120, 130, 0.20);
  font-size: 0.58rem;
  padding: 2px 6px;
  text-shadow: none;
}

.trait-tag.rainbow {
  color: #fff;
  background: linear-gradient(135deg, #ff3f81, #ff9d00, #18b8ff, #58d84f);
  background-size: 200% 200%;
  animation: rainbowShift 4s ease infinite;
  font-size: 0.6rem;
  padding: 3px 8px;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

.trait-tag.radioactive {
  color: #e8f5e9;
  background: linear-gradient(135deg, #5d4037, #795548, #388e3c, #4caf50);
  background-size: 200% 200%;
  animation: rainbowShift 5s ease infinite;
  font-size: 0.6rem;
  padding: 3px 8px;
  text-shadow: 0 0 6px rgba(76, 175, 80, 0.4);
}

.trait-tag.diamond {
  color: #fff;
  background: linear-gradient(135deg, #1565c0, #42a5f5, #e3f2fd, #ffffff);
  background-size: 200% 200%;
  animation: rainbowShift 4s ease infinite;
  font-size: 0.6rem;
  padding: 3px 8px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}

.trait-tag.hidden { display: none; }

/* --- Rarity tags --- */

.rarity-tag {
  background: rgba(160, 180, 210, 0.12);
  color: rgba(200, 215, 240, 0.85);
  border: 1px solid rgba(160, 180, 210, 0.18);
}

.rarity-tag.common {
  background: rgba(120, 130, 150, 0.16);
  color: #8899aa;
  border-color: rgba(120, 130, 150, 0.22);
}

.rarity-tag.epic {
  background: rgba(140, 80, 255, 0.18);
  color: #b388ff;
  border-color: rgba(140, 80, 255, 0.28);
  box-shadow: 0 0 10px rgba(140, 80, 255, 0.20);
}

.rarity-tag.god {
  color: #fff;
  background: linear-gradient(135deg, #ff3f81, #ff9d00, #18b8ff, #58d84f);
  background-size: 200% 200%;
  animation: rainbowShift 4s ease infinite;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.rarity-tag.uncommon {
  background: rgba(0, 220, 130, 0.16);
  color: #44ffaa;
  border-color: rgba(0, 220, 130, 0.25);
}

.rarity-tag.mythic {
  background: rgba(255, 50, 50, 0.18);
  color: #ff5577;
  border-color: rgba(255, 50, 50, 0.28);
  box-shadow: 0 0 10px rgba(255, 50, 50, 0.20);
}

.rarity-tag.secret {
  background: linear-gradient(135deg, #1a1a2e, #e0e0e0);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
}

.rarity-tag.celestial {
  background: linear-gradient(135deg, #3a2a00, #ffb300, #ffd700);
  color: #1a0a00;
  border: 1px solid rgba(255, 200, 0, 0.5);
  text-shadow: 0 0 6px rgba(255, 200, 0, 0.4);
  box-shadow: 0 0 14px rgba(255, 180, 0, 0.30);
}

.rarity-tag.divine {
  background: linear-gradient(135deg, #1a0a2a, #6b2fa0, #c084fc);
  color: #f4ecf7;
  border: 1px solid rgba(180, 120, 240, 0.5);
  text-shadow: 0 0 8px rgba(200, 150, 255, 0.55);
  box-shadow: 0 0 14px rgba(160, 100, 240, 0.30);
}

.rarity-tag.og {
  background: linear-gradient(135deg, #050510, #0d1b3e, #162d6e);
  color: #ff4466;
  border: 1px solid rgba(255, 68, 102, 0.6);
  text-shadow: 0 0 10px rgba(255, 68, 102, 0.7);
  animation: ogGlow 3s ease-in-out infinite;
}

/* --- Hidden --- */

.hidden { display: none; }

/* --- Flavor text --- */

.flavor {
  margin: 10px 0 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

/* --- Character stats --- */

.character-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.character-stat {
  padding: 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.character-stat strong {
  display: block;
  margin-top: 5px;
  font-size: 1.3rem;
  font-weight: 700;
}

/* --- Timer cards --- */

.roll-timer-card {
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 200, 255, 0.10), rgba(14, 14, 40, 0.7));
  border: 1px solid var(--line);
}

.roll-timer-card span,
.event-timer-card span {
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
}

.roll-timer-card strong,
.event-timer-card strong {
  display: block;
  margin-top: 5px;
  font-size: 1.3rem;
  font-weight: 700;
}

.event-timer-card {
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.event-timer-card.rainbow {
  background: linear-gradient(135deg, rgba(255, 80, 150, 0.14), rgba(255, 200, 100, 0.12), rgba(0, 180, 255, 0.10));
  border-color: rgba(255, 120, 200, 0.28);
}
.event-timer-card.radioactive {
  background: linear-gradient(135deg, rgba(220, 40, 60, 0.16), rgba(120, 30, 160, 0.14), rgba(40, 170, 80, 0.10));
  border-color: rgba(255, 90, 40, 0.28);
}
.event-timer-card.diamond {
  background: linear-gradient(135deg, rgba(30, 140, 255, 0.12), rgba(130, 200, 240, 0.14), rgba(200, 230, 255, 0.08));
  border-color: rgba(100, 180, 240, 0.28);
}

/* --- Playtime reward card --- */

.playtime-reward-card {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 230, 120, 0.12), rgba(0, 180, 100, 0.08));
  border: 1px solid rgba(0, 230, 120, 0.30);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: 0 0 18px rgba(0, 230, 120, 0.12);
}

.playtime-reward-card span {
  font-size: 0.74rem;
  font-weight: 700;
  color: #44ffaa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Buttons --- */

.button-row {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.game-button {
  flex: 1;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 0.95rem;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  letter-spacing: 0.06em;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* electrical shimmer sweep on hover */
.game-button::after {
  content: "";
  position: absolute;
  top: -50%; left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent);
  transform: skewX(-25deg);
  transition: left 0.45s ease;
  pointer-events: none;
}

.game-button:hover { transform: translateY(-2px); }
.game-button:hover::after { left: 120%; }
.game-button:active { transform: translateY(0); }

.game-button.buy {
  background: linear-gradient(135deg, #1a3acc, #1e80ff, #64b4ff);
  background-size: 150% 100%;
  border-color: rgba(100, 180, 255, 0.35);
  animation: btnBuyShift 4s ease infinite;
}
.game-button.buy:hover { box-shadow: 0 0 30px rgba(30, 140, 255, 0.55), 0 0 60px rgba(100, 180, 255, 0.20); }

.game-button.roll {
  background: linear-gradient(135deg, #9e0a2e, #ff2d55, #ff7090);
  background-size: 150% 100%;
  border-color: rgba(255, 80, 120, 0.35);
  animation: btnRollShift 3.5s ease infinite;
}
.game-button.roll:hover { box-shadow: 0 0 30px rgba(255, 45, 85, 0.55), 0 0 60px rgba(255, 100, 140, 0.20); }

.game-button.rebirth-action {
  margin-top: 20px;
  background: linear-gradient(135deg, #8b30d4, #b347ea, #d472ff);
  background-size: 150% 100%;
  border-color: rgba(180, 100, 240, 0.35);
  animation: btnPurpleShift 4.5s ease infinite;
}
.game-button.rebirth-action:hover { box-shadow: 0 0 30px rgba(180, 71, 234, 0.55), 0 0 60px rgba(200, 120, 255, 0.20); }

.game-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  animation: none;
}

@keyframes btnBuyShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes btnRollShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes btnPurpleShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.mini-action {
  border: 1px solid rgba(200, 120, 255, 0.35);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 0.76rem;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #8b30d4, #b347ea, #d472ff);
  background-size: 150% 100%;
  letter-spacing: 0.05em;
  transition: transform 0.16s ease, box-shadow 0.25s ease;
  animation: btnPurpleShift 4s ease infinite;
}

.mini-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(180, 71, 234, 0.50), 0 0 40px rgba(212, 114, 255, 0.22);
}
.mini-action:active { transform: translateY(0); }

.sell-action {
  background: linear-gradient(135deg, #b71c1c, #e53935, #ff5252) !important;
  border-color: rgba(255, 50, 50, 0.4) !important;
  animation: none !important;
  margin-bottom: 10px;
  width: 100%;
  border-radius: 14px !important;
}
.sell-action:hover {
  box-shadow: 0 0 22px rgba(255, 50, 50, 0.50), 0 0 40px rgba(255, 80, 80, 0.22) !important;
}

/* --- Rebirth / info grids --- */

.rebirth-grid,
.rebirth-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.rebirth-card,
.rebirth-info-block {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.rebirth-card strong,
.rebirth-info-block strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
}

.rebirth-card.accent {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.18), rgba(255, 106, 0, 0.14));
  border-color: rgba(255, 184, 0, 0.30);
  color: var(--ink);
}

.rebirth-copy {
  margin: 20px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-dim);
}

/* --- Back button --- */

.back-button {
  border: 1px solid rgba(180, 100, 240, 0.25);
  border-radius: 14px;
  padding: 11px 16px;
  font-size: 0.9rem;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(100, 40, 160, 0.65), rgba(140, 80, 200, 0.45));
  letter-spacing: 0.05em;
  transition: transform 0.16s ease, box-shadow 0.2s ease;
}

.back-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(180, 71, 234, 0.35);
}
.back-button:active { transform: translateY(0); }

/* --- Account panel --- */

.account-panel { min-height: 360px; }

.account-panel h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
}

.account-form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.account-form .label {
  margin: 0;
  font-size: 0.78rem;
}

.account-form .game-button { margin-top: 2px; }

/* --- Settings panel (Apple-style) --- */

.settings-panel { min-height: 360px; }

.settings-launch {
  min-height: 80px;
  background: linear-gradient(135deg, rgba(140, 140, 160, 0.20), rgba(100, 100, 130, 0.12));
  border-color: rgba(180, 180, 200, 0.30);
  color: #fff;
}
.settings-launch:hover { box-shadow: 0 0 28px rgba(180, 180, 220, 0.35); }

.settings-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-group {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: none;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--line);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row:hover {
  background: rgba(180, 100, 240, 0.08);
}

.settings-row:active {
  background: rgba(180, 100, 240, 0.14);
}

.settings-row-icon {
  font-size: 1.3rem;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.settings-row-label {
  flex: 1;
  font-weight: 500;
}

.settings-row-value {
  color: var(--ink-dim);
  font-size: 0.88rem;
  text-align: right;
}

.settings-row-chevron {
  color: rgba(160, 160, 180, 0.5);
  font-size: 1.4rem;
  font-weight: 300;
  flex-shrink: 0;
}

.settings-sub-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  margin-bottom: 16px;
  border: none;
  background: none;
  color: var(--cyan);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease;
}

.settings-sub-back:hover {
  color: var(--sky-bright);
}

/* --- Math panel --- */

.math-panel { min-height: 360px; }

.math-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.math-action {
  margin-top: 20px;
  background: linear-gradient(135deg, #00a86b, #00e676);
  border-color: rgba(0, 230, 118, 0.35);
}
.math-action:hover { box-shadow: 0 0 28px rgba(0, 230, 118, 0.45), 0 0 50px rgba(0, 200, 100, 0.18); }

.math-launch {
  min-height: 80px;
  background: linear-gradient(135deg, rgba(0, 200, 100, 0.18), rgba(0, 150, 80, 0.10));
  border-color: rgba(0, 230, 118, 0.32);
  color: #fff;
}
.math-launch:hover { box-shadow: 0 0 28px rgba(0, 230, 118, 0.40), 0 0 50px rgba(0, 200, 100, 0.18); }

.math-game-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 20px;
  margin-top: 18px;
}

.math-problem-card {
  padding: 24px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
  position: relative;
}

.math-timer-badge {
  position: absolute;
  top: -14px;
  right: 20px;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.20), rgba(0, 180, 90, 0.14));
  border: 1px solid rgba(0, 230, 118, 0.35);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 0 14px rgba(0, 230, 118, 0.15);
  transition: color 0.3s ease;
}

.math-problem-text {
  margin: 20px 0 24px;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-shadow: 0 0 14px rgba(100, 200, 255, 0.20);
}

.math-input-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.math-answer-input {
  flex: 1;
  font-size: 1.2rem;
  text-align: center;
}

.math-answer-input::-webkit-outer-spin-button,
.math-answer-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.math-feedback {
  margin: 12px 0 0;
  min-height: 1.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.math-stats-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.math-tier-list {
  margin-top: 4px;
}

.math-tier-list .small-note {
  line-height: 1.6;
  color: var(--ink-dim);
}

.math-result-text {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 12px;
  text-shadow: 0 0 8px rgba(0, 230, 118, 0.20);
}

.math-reward-choice {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}

@media (max-width: 640px) {
  .math-reward-choice {
    flex-direction: column;
  }
}

/* --- Admin panel --- */

.admin-divider {
  height: 1px;
  background: var(--line);
  margin: 18px 0 14px;
}

.admin-panel { min-height: 360px; }

.admin-auth-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 12px;
  margin-top: 18px;
}

/* --- Inputs & selects --- */

.admin-input,
.admin-select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  font: inherit;
  font-family: var(--font-mono);
  color: var(--ink);
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
}

.admin-input:focus,
.admin-select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.20);
}

.admin-input::placeholder {
  color: rgba(180, 190, 210, 0.4);
}

.admin-select option {
  color: #e0e8ff;
  background: #14143a;
}

/* --- Status text --- */

.status-text {
  margin: 16px 4px 0;
  min-height: 1.2rem;
  color: var(--ink-dim);
}

/* --- Collection / owned list --- */

/* --- Inventory toggle --- */

.inventory-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.inventory-toggle:hover {
  border-color: var(--purple-bright);
  box-shadow: var(--glow-purple);
}

.inventory-toggle-icon {
  font-size: 1.3rem;
}

.inventory-toggle-label {
  flex: 1;
  text-align: left;
}

.inventory-toggle-badge {
  background: var(--purple-bright);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.inventory-toggle-chevron {
  font-size: 0.9rem;
  color: var(--ink-dim);
  transition: transform 0.2s ease;
}

.inventory-toggle.open .inventory-toggle-chevron {
  transform: rotate(90deg);
}

.sell-toggle {
  margin-bottom: 8px;
  border-color: rgba(255, 50, 50, 0.35);
  background: linear-gradient(135deg, rgba(180, 20, 20, 0.35), rgba(220, 40, 40, 0.20));
}
.sell-toggle:hover {
  border-color: rgba(255, 70, 70, 0.55);
  box-shadow: 0 0 22px rgba(255, 50, 50, 0.35);
}
.sell-toggle .inventory-toggle-badge {
  background: #e53935;
}

.sell-active {
  border-color: rgba(255, 50, 50, 0.6) !important;
  box-shadow: 0 0 18px rgba(255, 50, 50, 0.30) !important;
  animation: sellPulse 2s ease-in-out infinite !important;
}

@keyframes sellPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 50, 50, 0.30); }
  50%      { box-shadow: 0 0 30px rgba(255, 50, 50, 0.55); }
}

.sell-mode-card .owned-thumb {
  filter: brightness(0.6) saturate(0.3) hue-rotate(-30deg);
  border: 2px solid rgba(255, 50, 50, 0.6);
}

.sell-mode-card {
  border-color: rgba(255, 50, 50, 0.4) !important;
}

.sell-mode-card:hover {
  border-color: rgba(255, 50, 50, 0.7) !important;
  box-shadow: 0 0 16px rgba(255, 50, 50, 0.25) !important;
}

.collection-body {
  margin-top: 12px;
}

.collection-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.owned-list {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.owned-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.owned-card:hover {
  transform: translateY(-2px);
  border-color: var(--purple-bright);
  box-shadow: var(--glow-purple);
}

.owned-card.selected {
  border-color: var(--purple-bright);
  box-shadow:
    0 0 24px rgba(180, 71, 234, 0.35),
    0 0 48px rgba(255, 45, 149, 0.15),
    inset 0 0 0 1px rgba(200, 120, 255, 0.12);
  animation: selectedPulse 2.5s ease-in-out infinite;
}

@keyframes selectedPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(180, 71, 234, 0.35), 0 0 48px rgba(255, 45, 149, 0.15), inset 0 0 0 1px rgba(200, 120, 255, 0.12); }
  50%      { box-shadow: 0 0 36px rgba(255, 45, 149, 0.50), 0 0 64px rgba(180, 71, 234, 0.25), inset 0 0 0 2px rgba(212, 114, 255, 0.20); }
}

.owned-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--bg-deep);
}

.owned-thumb.cutout-image {
  object-fit: contain;
  padding: 6px;
  background:
    radial-gradient(circle at center, rgba(14, 14, 40, 0.94), rgba(10, 10, 28, 0.80));
  border: 1px solid var(--line);
}

.owned-name {
  margin: 0 0 4px;
  font-weight: 700;
}

.owned-meta,
.owned-income {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-dim);
}

.sell-mini-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 68, 34, 0.35);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(200, 50, 20, 0.7), rgba(255, 70, 40, 0.5));
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.level-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.22), rgba(0, 180, 90, 0.14));
  border: 1px solid rgba(0, 230, 118, 0.35);
  color: #44ffaa;
  font-size: 0.62rem;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}

.level-up-btn {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 4px 8px;
  border: 1px solid rgba(0, 230, 118, 0.35);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 130, 80, 0.55), rgba(0, 200, 100, 0.35));
  color: #44ffaa;
  cursor: pointer;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.level-up-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 14px rgba(0, 230, 118, 0.40);
}

.sell-mini-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(255, 68, 34, 0.50);
}
.sell-mini-btn:active { transform: scale(0.95); }

.owned-income {
  text-align: right;
  font-weight: 700;
  color: var(--green);
}

.empty-state {
  padding: 20px;
  border-radius: 16px;
  border: 1px dashed var(--line);
  text-align: center;
  color: var(--ink-dim);
}

/* --- Sailing --- */

.sailing-config-grid { margin-top: 8px; }
.sailing-status-grid { margin-top: 12px; }

.sailing-reward-strip {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sailing-reward-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}

/* --- Legacy invite chips (kept for compat) --- */

.invite-auth-box { margin-top: 8px; display: grid; gap: 10px; }
.invite-auth-user, .invite-auth-copy, .invite-auth-meta {
  margin: 0; font-size: 0.82rem; color: var(--ink-dim);
}
.invite-codes-list { display: flex; flex-wrap: wrap; gap: 8px; }
.invite-rename-row { display: grid; }
.invite-action-row { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-action-row .admin-select { min-width: 170px; flex: 1; }
.invite-code-chip {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: 7px 10px; border-radius: 999px;
  background: rgba(0, 160, 255, 0.14);
  border: 1px solid rgba(0, 160, 255, 0.22);
  color: #44aaff; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em;
}
.auth-card { min-width: 260px; }

/* --- Keyframes --- */

@keyframes rainbowShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rainbowGlow {
  0%   { box-shadow: inset 0 0 0 3px rgba(255, 73, 118, 0.50), 0 0 18px rgba(255, 73, 118, 0.25); }
  33%  { box-shadow: inset 0 0 0 3px rgba(255, 180, 56, 0.50), 0 0 18px rgba(255, 180, 56, 0.25); }
  66%  { box-shadow: inset 0 0 0 3px rgba(17, 170, 255, 0.50), 0 0 18px rgba(17, 170, 255, 0.25); }
  100% { box-shadow: inset 0 0 0 3px rgba(255, 73, 118, 0.50), 0 0 18px rgba(255, 73, 118, 0.25); }
}

@keyframes radioactiveGlow {
  0%   { box-shadow: inset 0 0 0 3px rgba(230, 54, 66, 0.55), 0 0 22px rgba(125, 86, 45, 0.20); }
  33%  { box-shadow: inset 0 0 0 3px rgba(119, 30, 146, 0.55), 0 0 28px rgba(119, 30, 146, 0.22); }
  66%  { box-shadow: inset 0 0 0 3px rgba(40, 181, 95, 0.55), 0 0 30px rgba(40, 181, 95, 0.22); }
  100% { box-shadow: inset 0 0 0 3px rgba(125, 86, 45, 0.55), 0 0 22px rgba(125, 86, 45, 0.20); }
}

@keyframes rainbowImageShift {
  0%   { filter: hue-rotate(0deg) saturate(1.2) brightness(1.08); }
  100% { filter: hue-rotate(360deg) saturate(1.3) brightness(1.10); }
}

@keyframes radioactivePulse {
  0%   { filter: hue-rotate(0deg) saturate(1.3) brightness(1.0) contrast(1.12) drop-shadow(0 0 0.4rem rgba(230, 54, 66, 0.45)); }
  25%  { filter: hue-rotate(26deg) saturate(1.4) brightness(1.05) contrast(1.18) drop-shadow(0 0 0.5rem rgba(119, 30, 146, 0.50)); }
  50%  { filter: hue-rotate(94deg) saturate(1.45) brightness(1.08) contrast(1.20) drop-shadow(0 0 0.55rem rgba(40, 181, 95, 0.52)); }
  75%  { filter: hue-rotate(-18deg) saturate(1.35) brightness(1.04) contrast(1.15) drop-shadow(0 0 0.45rem rgba(125, 86, 45, 0.48)); }
  100% { filter: hue-rotate(0deg) saturate(1.3) brightness(1.0) contrast(1.12) drop-shadow(0 0 0.4rem rgba(230, 54, 66, 0.45)); }
}

@keyframes diamondGlow {
  0%   { box-shadow: inset 0 0 0 3px rgba(30, 144, 255, 0.40), 0 0 18px rgba(135, 206, 235, 0.25); }
  50%   { box-shadow: inset 0 0 0 3px rgba(135, 206, 235, 0.70), 0 0 35px rgba(173, 216, 230, 0.45), 0 0 55px rgba(255, 255, 255, 0.12); }
  100% { box-shadow: inset 0 0 0 3px rgba(30, 144, 255, 0.40), 0 0 18px rgba(135, 206, 235, 0.25); }
}

@keyframes diamondSparkle {
  0%   { filter: brightness(1.2) saturate(0.85) hue-rotate(0deg) drop-shadow(0 0 0.35rem rgba(135, 206, 235, 0.50)); }
  50%   { filter: brightness(1.4) saturate(0.75) hue-rotate(10deg) drop-shadow(0 0 0.7rem rgba(173, 216, 230, 0.75)) drop-shadow(0 0 1.2rem rgba(255, 255, 255, 0.20)); }
  100% { filter: brightness(1.2) saturate(0.85) hue-rotate(0deg) drop-shadow(0 0 0.35rem rgba(135, 206, 235, 0.50)); }
}

@keyframes ogGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 68, 102, 0.40); }
  50%      { box-shadow: 0 0 20px rgba(255, 68, 102, 0.80), 0 0 34px rgba(255, 68, 102, 0.30); }
}

/* ================================================================
   Responsive
   ================================================================ */

/* --- Tablet / small desktop (≤960px) --- */
@media (max-width: 960px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .totals {
    justify-content: flex-start;
  }

  .main-grid {
    grid-template-columns: 1fr;
  }

  .sprite-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sprite-frame {
    max-width: 360px;
    margin: 0 auto;
  }

  .rebirth-grid,
  .rebirth-info {
    grid-template-columns: 1fr;
  }

  .sailing-reward-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-sailing-card {
    grid-template-columns: 1fr;
  }

  .sailing-boat-frame {
    max-width: 300px;
    margin: 0 auto;
  }
}

/* --- Mobile (≤640px) --- */
@media (max-width: 640px) {
  .game-shell {
    padding: 12px;
  }

  .topbar,
  .roller-panel,
  .collection-panel,
  .rebirth-panel {
    padding: 16px;
    border-radius: 18px;
  }

  .totals {
    gap: 8px;
  }

  .stat-pill {
    min-width: 0;
    flex: 1 1 44%;
    padding: 12px;
  }

  .stat-pill strong {
    font-size: 1.1rem;
  }

  .stat-button {
    min-width: 0;
    flex: 1 1 44%;
    min-height: 66px;
  }

  .sprite-frame {
    max-width: 100%;
    aspect-ratio: 1 / 1;
  }

  .button-row,
  .character-stats,
  .rebirth-grid,
  .rebirth-info {
    grid-template-columns: 1fr;
  }

  .admin-auth-row {
    grid-template-columns: 1fr;
  }

  .compact-sailing-card,
  .sailing-reward-strip,
  .math-game-grid {
    grid-template-columns: 1fr;
  }

  .math-input-row {
    flex-direction: column;
  }

  .owned-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
  }

  .owned-income {
    text-align: left;
    grid-column: 2;
  }

  .owned-thumb {
    width: 56px;
    height: 56px;
  }

  .game-button {
    padding: 13px 15px;
    font-size: 0.88rem;
  }

  .name-line {
    gap: 8px;
  }

  #characterName {
    font-size: 1.2rem;
  }

  .sprite-card {
    gap: 10px;
  }

  .viewer-panel .sprite-card.compact-viewer,
  .owned-viewer-inline .sprite-card.compact-viewer {
    flex-direction: column;
  }

  .viewer-panel .sprite-card.compact-viewer .sprite-frame,
  .owned-viewer-inline .sprite-card.compact-viewer .sprite-frame,
  .viewer-frame {
    flex: 0 0 auto;
    max-width: 100%;
    aspect-ratio: 1 / 1;
  }

  .viewer-stats {
    flex-direction: column;
  }
}

/* --- Very small phones (≤400px) --- */
@media (max-width: 400px) {
  .totals {
    flex-direction: column;
  }

  .stat-pill,
  .stat-button {
    flex: 1 1 auto;
    width: 100%;
  }

  .panel-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .collection-actions {
    justify-content: flex-start;
    width: 100%;
  }
}