:root{
  --bg:#06121a;
  --panel:#071922;
  --glass: rgba(255,255,255,0.04);
  --accent:#00e5a8;
  --accent-2:#7afcff;
  --muted:#89a0a6;
  --card-bg:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --glass-border: rgba(255,255,255,0.06);
  --danger:#ff5c7c;
  --gold:#D4AF37;
  --diamond:#9BDCD3;
  --ruby:#B70D0D;
}
@font-face{
  font-family: 'Montserrat';
  src: url('/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;font-family: 'Montserrat', Inter, system-ui, Arial;background:var(--bg);color:#e6f7f5}
#topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-bottom:1px solid rgba(255,255,255,0.03)}
#logo{font-weight:800;color:var(--accent);letter-spacing:1px;font-size:18px}
#account{display:flex;align-items:center;gap:8px}
#account input{margin-right:6px;padding:8px;border:1px solid rgba(255,255,255,0.06);border-radius:8px;background:transparent;color:#e6f7f5}
#account label{color:var(--muted);font-size:13px}
#account button{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg, rgba(0,0,0,0.2), rgba(255,255,255,0.02));color:var(--accent-2);cursor:pointer}
#game{display:flex;height:calc(100% - 64px)}
#left{flex:1;padding:18px}
#road-container{height:300px;background:linear-gradient(180deg, rgba(10,25,30,0.7), rgba(4,12,16,0.8));border:1px solid rgba(255,255,255,0.03);overflow:hidden;position:relative;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.6)}
#road{position:absolute;right:-10%;top:12px;bottom:12px;width:100%;display:flex;align-items:center;gap:14px;padding:12px;pointer-events:none}
.brainrot{
  width:160px;
  min-width:160px;
  height:260px;
  background:var(--card-bg);
  border-radius:12px;
  border:1px solid var(--glass-border);
  box-shadow:0 6px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:10px;
  transform:translateY(0);
  transition:transform .15s ease, box-shadow .15s ease;
  pointer-events:auto;
  cursor:pointer;
  position:relative;
}
.brainrot:hover{transform:translateY(-6px);box-shadow:0 12px 36px rgba(0,0,0,0.7)}
.brainrot .img-wrap{width:120px;height:120px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.05))}
.brainrot img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(0%) saturate(1)}
.brainrot .mutation-badge{position:absolute;left:10px;top:10px;padding:6px 8px;border-radius:999px;font-size:12px;color:#071922;background:rgba(255,255,255,0.9);font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,0.6)}
.brainrot .name{font-weight:700;color:#e9fff9;text-align:center}
.brainrot .rarity{
  font-weight:700;
  font-size:13px;
  padding:6px 10px;
  border-radius:10px;
  display:inline-block;
}
.brainrot .income{color:var(--muted);font-weight:600}
.brainrot .price{color:var(--accent-2);font-weight:800;font-size:14px}
#controls{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
#sidebar{width:340px;padding:16px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-left:1px solid rgba(255,255,255,0.03)}
.panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:12px;margin-bottom:12px;border:1px solid rgba(255,255,255,0.03)}
#base-slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{width:76px;height:76px;border:1px dashed rgba(255,255,255,0.04);border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted)}
#modal{position:fixed;inset:0;background:rgba(2,6,8,0.6);display:flex;align-items:center;justify-content:center}
#modal.hidden{display:none}
#modal-content{background:linear-gradient(180deg, rgba(5,20,24,0.95), rgba(3,10,12,0.98));padding:18px;border-radius:12px;width:92%;max-width:820px;border:1px solid rgba(255,255,255,0.03)}
/* Make modal body scrollable so the Index list is accessible without overflowing the viewport */
#modal-body{
  max-height:70vh;
  overflow:auto;
  padding-right:8px; /* small padding so vertical scrollbar doesn't overlap content */
  display:block;
  -webkit-overflow-scrolling:touch;
}

/* Index undiscovered image overlay */
.img-idx-wrap{position:relative;width:56px;height:56px;border-radius:6px;overflow:hidden;flex:0 0 56px}
.img-idx-wrap img{width:56px;height:56px;object-fit:cover;display:block}
.img-hidden{position:absolute;inset:0;background:#000;border-radius:6px;opacity:1;pointer-events:none;}

/* discovery toast (auto-dismiss, no close) */
.discover-toast{
  position:fixed;
  left:50%;
  top:14%;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.95));
  color:#fff;
  padding:14px 18px;
  border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,0.6);
  z-index:99999;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:320px;
  justify-content:center;
  text-align:center;
  font-weight:700;
  opacity:1;
  transition:opacity 320ms ease, transform 320ms ease;
}
.discover-toast .name{font-weight:900}
#admin-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:880px;
  max-width:96%;
  background:linear-gradient(180deg, rgba(6,18,22,0.98), rgba(4,12,16,0.99));
  color:#e6f7f5;
  border-radius:16px;
  padding:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.8);
  z-index:1000000;
  border:1px solid rgba(255,255,255,0.03);
  display:flex;
  flex-direction:column;
  gap:12px;
}
#admin-panel.hidden{display:none}
#admin-tabs{display:flex;gap:6px;margin:8px 0}
.admin-tab{flex:1;padding:8px;background:transparent;border:1px solid rgba(255,255,255,0.03);color:#e6f7f5;border-radius:8px}
.admin-page{padding:6px}
.hidden{display:none}

/* Global spawn announcement (bottom-centered, bold white with black outline; brainrot name colored by rarity) */
.global-spawn-announcement{
  position:fixed;
  left:50%;
  bottom:6%;
  transform:translateX(-50%);
  background:transparent;
  color:#ffffff;
  font-weight:900;
  font-size:20px;
  padding:10px 18px;
  z-index:999999;
  text-align:center;
  -webkit-text-stroke: 2px #000; /* black outline */
  text-shadow: 0 2px 0 #000;
  pointer-events:none;
  opacity:1;
  border-radius:8px;
}
.global-spawn-announcement .gs-name{font-size:20px}

/* Global free-form message (top-centered) — thinner outline than spawn announcement */
.global-message-announcement{
  position:fixed;
  left:50%;
  top:6%;
  transform:translateX(-50%);
  background:transparent;
  color:#ffffff;
  font-weight:900;
  font-size:20px;
  padding:10px 18px;
  z-index:999999;
  text-align:center;
  -webkit-text-stroke: 1px #000; /* thinner black outline */
  text-shadow: 0 1px 0 #000;
  pointer-events:none;
  opacity:1;
  border-radius:8px;
}
.global-message-announcement .gmsg-text{font-size:20px}

/* Roulette modal visuals */
.roulette-wheel{display:flex;align-items:center;justify-content:center;height:220px;position:relative;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.05));border-radius:12px;padding:12px;overflow:auto;gap:8px}
.roulette-slot{width:160px;min-width:160px;height:160px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 6px;background:var(--card-bg);border:1px solid var(--glass-border);padding:8px}

/* Rarity colors — applied to Road card rarity badges */
.rarity-common{
  background:#bdbdbd;
  color:#000;
  font-weight:700;
  padding:6px 10px;
  border-radius:8px;
  display:inline-block;
} /* Common: Gray back, black text */

.rarity-unusual{
  background:#8fd68a;
  color:#000;
  font-weight:700;
  padding:6px 10px;
  border-radius:8px;
  display:inline-block;
} /* Unusual: Green back, black text */

.rarity-rare{
  background:#7aa7ff;
  color:#000;
  font-weight:700;
  padding:6px 10px;
  border-radius:8px;
  display:inline-block;
} /* Rare: Blue back, black text */

.rarity-epic{
  background:#c77bff;
  color:#000;
  font-weight:700;
  padding:6px 10px;
  border-radius:8px;
  display:inline-block;
} /* Epic: Purple back, black text */

.rarity-legendary{
  background:#ffd166;
  color:#000;
  font-weight:700;
  padding:6px 10px;
  border-radius:8px;
  display:inline-block;
} /* Legendary: Yellow back, black text */

.rarity-mythic{
  background:#d64545;
  color:#fff;
  font-weight:800;
  padding:6px 10px;
  border-radius:8px;
  display:inline-block;
} /* Mythic: Red back, white text */

/* Animated moving gradient for Secret: black-white scanning gradient, gray text */
@keyframes secretShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.rarity-secret{
  background: linear-gradient(90deg, #000000 0%, #ffffff 25%, #000000 50%, #ffffff 75%, #000000 100%);
  background-size: 300% 100%;
  animation: secretShift 6s linear infinite;
  color: #9aa0a6; /* gray text */
  font-weight:800;
  padding:6px 10px;
  border-radius:8px;
  display:inline-block;
}

/* Animated moving gradient for Special: blue -> skyblue moving, white text */
@keyframes specialShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.rarity-special{
  background: linear-gradient(90deg, #0077ff 0%, #00c2ff 50%, #7adfff 100%);
  background-size: 300% 100%;
  animation: specialShift 6s ease-in-out infinite;
  color: #ffffff;
  font-weight:800;
  padding:6px 10px;
  border-radius:8px;
  display:inline-block;
}

/* Billionaire rarity — gold-yellow background with black text */
.rarity-billionaire{
  background: #ffd700;
  color: #000;
  font-weight:900;
  padding:6px 10px;
  border-radius:8px;
  display:inline-block;
}

/* Sell button under base slots */
.slot .sell-btn{
  margin-top:6px;
  padding:6px 8px;
  font-size:12px;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12));
  border:1px solid rgba(255,255,255,0.04);
  color:var(--accent-2);
  cursor:pointer;
  display:inline-block;
  min-width:56px;
  text-align:center;
}

/* Mutation overlays (semi-transparent) for conveyor/base visuals */
/* Overlays are applied only on the image wrapper (.img-wrap) so UI chrome (slot/card) is not tinted */

/* Gold */
.brainrot.mut-gold .img-wrap::after,
.slot .img-wrap.mut-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(212,175,55,0.12), rgba(212,175,55,0.06));
  pointer-events: none;
}
/* Diamond */
.brainrot.mut-diamond .img-wrap::after,
.slot .img-wrap.mut-diamond::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(155,220,211,0.12), rgba(155,220,211,0.06));
  pointer-events: none;
}
/* Ruby */
.brainrot.mut-ruby .img-wrap::after,
.slot .img-wrap.mut-ruby::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(183,13,13,0.14), rgba(183,13,13,0.06));
  pointer-events: none;
}
/* Basketball: orange-black gradient */
.brainrot.mut-basketball .img-wrap::after,
.slot .img-wrap.mut-basketball::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,138,0,0.12), rgba(0,0,0,0.14));
  pointer-events: none;
}
/* Bla Bla Bla: gray overlay */
.brainrot.mut-bla_bla_bla .img-wrap::after,
.slot .img-wrap.mut-bla_bla_bla::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(200,200,200,0.12);
  pointer-events: none;
}
/* Destructed: dark-orange */
.brainrot.mut-destructed .img-wrap::after,
.slot .img-wrap.mut-destructed::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,107,0,0.14), rgba(0,0,0,0.06));
  pointer-events: none;
}
/* Concert (Rave) : white-skyblue gradient */
.brainrot.mut-concert .img-wrap::after,
.slot .img-wrap.mut-concert::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,194,255,0.06));
  pointer-events: none;
}
/* Funky: neon-blue overlay */
.brainrot.mut-funky .img-wrap::after,
.slot .img-wrap.mut-funky::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,200,255,0.12), rgba(0,150,255,0.05));
  pointer-events: none;
}

/* Unified control button styles */
.control-btn{
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  border:1px solid rgba(255,255,255,0.04);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  color:var(--accent-2);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
}
.control-btn:active{ transform:translateY(1px) scale(.998); }
.control-btn:hover{ box-shadow:0 8px 20px rgba(0,0,0,0.6); }

/* Primary actions (buy/open presentino) */
.btn-primary{
  background: linear-gradient(180deg, rgba(0,229,168,0.12), rgba(0,229,168,0.06));
  border:1px solid rgba(0,229,168,0.18);
  color: #00e5a8;
}

/* Danger (Rebirth) */
.btn-danger{
  background: linear-gradient(180deg, rgba(255,92,124,0.10), rgba(255,92,124,0.04));
  border:1px solid rgba(255,92,124,0.14);
  color: var(--danger);
}

/* Shop-specific */
.btn-shop{
  background: linear-gradient(180deg, rgba(122,252,255,0.06), rgba(0,0,0,0.04));
  border:1px solid rgba(122,252,255,0.12);
  color: var(--accent-2);
}

/* Ghost / secondary actions (index, redeem, restart) */
.btn-ghost{
  background: transparent;
  border:1px solid rgba(255,255,255,0.03);
  color:var(--muted);
}

/* Make controls wrap nicely on small widths */
#controls{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}