/* =========================================

   1. ROOT VARIABLES & THEMES

   ========================================= */

:root {

  --bs-font-sans-serif: 'Funnel Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bs-body-font-family: var(--bs-font-sans-serif);

  --color-bg: #0C1625;       /* page background */

  --color-surface: #111D30;  /* cards/panels */

  --color-surface-alt: #182235; /* inputs */

  --color-border: rgba(255,255,255,0.06);



  --color-text: #F3F4F6;     

  --color-text-muted: #9CA3AF;



  --color-primary: #3B82F6;  /* blue CTAs */

  --color-success: #16A34A;  /* green wins */

  --color-danger: #DC2626;   /* red losses */

  --color-brand: #8B5CF6;    /* purple Phantom connect */

}



.theme-alt {

  --color-bg: #0B1A2F;

  --color-surface: #152238;

  --color-surface-alt: #1E2C46;

}



/* =========================================

   2. GLOBAL LAYOUT & RESET

   ========================================= */



body {

  background-image: linear-gradient(180deg, var(--bs-body-bg), var(--bs-body-bg) 100px, var(--bs-body-bg));

}



.container {

  max-width: 100%;

}



.pricing-header {

  max-width: 1580px;

}



.bd-placeholder-img {

  font-size: 1.125rem;

  text-anchor: middle;

  -webkit-user-select: none;

  -moz-user-select: none;

  user-select: none;

}



@media (min-width: 768px) {

  .bd-placeholder-img-lg {

    font-size: 3.5rem;

  }

}



.b-example-divider {

  width: 100%;

  height: 3rem;

  background-color: #0000001a;

  border: solid rgba(0,0,0,.15);

  border-width: 1px 0;

  box-shadow: inset 0 .5em 1.5em #0000001a,

              inset 0 .125em .5em #00000026;

}



.b-example-vr {

  flex-shrink: 0;

  width: 1.5rem;

  height: 100vh;

}



.bi {

  vertical-align: -.125em;

  fill: currentColor;

}



.bg-tertiary {

  background: linear-gradient(

    180deg,

    var(--bs-tertiary-bg) 0%,

    color-mix(in srgb, var(--bs-tertiary-bg) 90%, black 10%) 100%

  );

}





/* =========================================

   3. TYPOGRAPHY & TEXT

   ========================================= */





/* =========================================

   4. BUTTONS

   ========================================= */



.btn-bd-primary {

  --bd-violet-bg: #0d6efd;

  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  --bs-btn-font-weight: 600;

  --bs-btn-color: var(--bs-white);

  --bs-btn-bg: var(--bd-violet-bg);

  --bs-btn-border-color: var(--bd-violet-bg);

  --bs-btn-hover-color: var(--bs-white);

  --bs-btn-hover-bg: #0a58ca;

  --bs-btn-hover-border-color: #0d6efd;

  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);

  --bs-btn-active-color: var(--bs-btn-hover-color);

  --bs-btn-active-bg: #0d6efd;

  --bs-btn-active-border-color: #0d6efd;

}



.bd-mode-toggle {

  z-index: 1500;

}



.bd-mode-toggle .bi {

  width: 1em;

  height: 1em;

}



.bd-mode-toggle .dropdown-menu .active .bi {

  display: block!important;

}



.blue-btn {

  box-shadow: 0 3px 0 #0d55c3, 0 5px 10px rgba(0, 0, 0, 0.25);

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

  transition: transform 0.1s ease;

}



.blue-btn:hover {

  filter: brightness(1.2);

  transform: translateY(-1px);

}



.blue-btn:active {

  transform: translateY(1px);

}



.green-btn {

  box-shadow: 0 2px 0 #077a44, 0 5px 10px rgba(0, 0, 0, 0.25);

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

  background: linear-gradient(to bottom, #00bd50, #27ae60);

  transition: transform 0.15s ease, box-shadow 0.2s ease;

}



.green-btn:hover {

  filter: brightness(1.1);

  transform: translateY(-1px);

}



.green-btn:active {

  transform: translateY(1px);

}



.fancy-button {

  background: linear-gradient(to bottom, #f9d423, #ff4e50);

  border: 2px solid #e29500;

  border-radius: 10px;

  color: white;

  font-weight: bold;

  padding: 10px 24px;

  box-shadow: 0 3px 0 #c67600, 0 6px 10px rgba(0, 0, 0, 0.25);

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

  position: relative;

  transition: transform 0.1s ease;

}



.fancy-button:active {

  transform: scale(0.98);

  box-shadow: 0 2px 0 #c67600, 0 3px 5px rgba(0, 0, 0, 0.2);

}

/* Phantom connect button */

.phantom-connect-btn {

  background: linear-gradient(90deg, #8b5cf6, #7c3aed);

  border: none;

  border-radius: 14px;

  padding: 0.5rem 0.6rem;

  font-weight: bold;

  color: white;

  display: flex;

  align-items: center;

  transition: box-shadow 0.1s ease, transform 0.1s ease;

}



.phantom-connect-btn:hover {

  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);

  transform: translateY(-1px);

}



.phantom-connect-btn:active {

  transform: translateY(1px);

  box-shadow: 0 0 5px rgba(139, 92, 246, 0.5);

}



/* Disconnect button (mobile) */

#disconnectBtnMobile {

  border-radius: 12px;

}



#walletBalance { font-weight: 600; }

#walletBalanceUsd { font-weight: 400; }





/* =========================================

   5. INPUTS, FORMS & SLIDERS

   ========================================= */



.card {

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);

}



#rollIndicator {
  visibility: hidden;
  position: relative;
  transform: translateX(-50%);
  transition: left 0.25s ease-out, transform 0.15s ease-out;
  height: 44px;
  width: 44px;
  background: url("../../assets/images/dice.svg") no-repeat center/contain;
  background-color: transparent;
  border: none;
  margin-bottom: -18px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  font-size: 12px;
  text-shadow:
    -1px -1px 0 #090c1d,
     0px -1px 0 #090c1d,
     1px -1px 0 #090c1d,
    -1px  0px 0 #090c1d,
     1px  0px 0 #090c1d,
    -1px  1px 0 #090c1d,
     0px  1px 0 #090c1d,
     1px  1px 0 #090c1d;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  will-change: left, transform;
}

#rollIndicator.win {
  filter: drop-shadow(0 0 6px rgba(0,255,128,0.7));
}

#rollIndicator.lose {
  filter: drop-shadow(0 0 6px rgba(255,0,64,0.6));
}

/* Pulse “pop” when active */
#rollIndicator.active {
  animation: pop 0.25s ease-out;
}

/* Keyframes for the pop effect */
@keyframes pop {
  0% { transform: translateX(-50%) scale(1); }
  50%  { transform: translateX(-50%) scale(1.2); }
  100% { transform: translateX(-50%) scale(1); }
}

/* Base input style */

input[type="range"]#rollOver {

  -webkit-appearance: none;

  appearance: none;

  width: 100%;

  height: 16px;

  border-radius: 8px;

  background: linear-gradient(to right, #ff5d6d 50%, #20c997 50%);

  outline: none;

  border: none;

  box-shadow:

    inset 0 4px 4px rgba(255, 255, 255, 0.5),   /* top highlight */

    inset 0 -4px 4px rgba(0, 0, 0, 0.5),        /* bottom shadow */

    0 1px 1px rgba(0, 0, 0, 0.5);                /* soft outer */

  position: relative;

  box-sizing: border-box;

  transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

}



/* WebKit Track */

input[type="range"]#rollOver::-webkit-slider-runnable-track {

  height: 14px;

  border-radius: 7px;

  background: transparent; /* background comes from parent */

}



/* Thumb - Default */

input[type="range"]#rollOver::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  height: 24px;

  width: 24px;

  border-radius: 25%;

  background: radial-gradient(circle at 30% 30%, #fefefe, #bbb);

  border: 2px solid #333;

  margin-top: -5px;

  cursor: pointer;

  transition: box-shadow 0.2s ease, transform 0.2s ease;

  box-shadow:

    0 1px 2px rgba(0,0,0,0.3),

    inset 0 1px 2px rgba(255,255,255,0.5);

}



/* Hover/active thumb feedback */

input[type="range"]#rollOver::-webkit-slider-thumb:hover {

  transform: scale(1.1);

}



/* Firefox */

input[type="range"]#rollOver::-moz-range-track {

  background: transparent;

  height: 14px;

  border-radius: 7px;

}

input[type="range"]#rollOver::-moz-range-thumb {

  height: 22px;

  width: 22px;

  border-radius: 50%;

  background: radial-gradient(circle at 30% 30%, #fefefe, #bbb);

  border: 2px solid #333;

  cursor: pointer;

  transition: box-shadow 0.2s ease, transform 0.2s ease;

  box-shadow:

    0 1px 2px rgba(0,0,0,0.3),

    inset 0 1px 2px rgba(255,255,255,0.6);

}

input[type="range"]#rollOver::-moz-range-thumb:hover {

  transform: scale(1.05);

  box-shadow: 0 0 6px rgba(0,255,200,0.6);

}







.slider-pulse {

  animation: pulse 1.2s infinite;

}



@keyframes pulse {

  0%   { box-shadow: 0 0 3px rgba(120, 120, 120, 0.3); }

  50%  { box-shadow: 0 0 8px rgba(120, 120, 120, 0.7); }

  100% { box-shadow: 0 0 3px rgba(120, 120, 120, 0.3); }

}





.glow-element {

  box-shadow: inset 0 0 25px rgba(120, 180, 255, 0.25);

}



.glow-element-sm {

  box-shadow: inset 0 0 20px rgba(120, 180, 255, 0.10);

}



.slider-labels {

  position: relative;

  margin-top: 5px; /* space below slider */

}



.slider-labels span {

  position: absolute;

  transform: translateX(-50%);

}



.slider-labels span:first-child {

  transform: translateX(0); /* keep 0 aligned left */

}



.slider-labels span:last-child {

  transform: translateX(-100%); /* keep 100 aligned right */

}



.input-3d {

  border: 1px solid #888;

  border-radius: 7px;

  font-weight: 500;



  box-shadow:

    inset 0 1px 1px rgba(0, 0, 0, 0.04),

    0 1px 2px rgba(0, 0, 0, 0.06); /* ⬅️ dialed back */

  

  transition:

    box-shadow 0.2s ease,

    transform 0.1s ease,

    background-color 0.3s ease;

}



.input-3d:hover {

  box-shadow:

    inset 0 1px 1px rgba(0, 0, 0, 0.05),

    0 2px 3px rgba(0, 0, 0, 0.08); /* gentle lift */

}



.input-3d:focus {

  outline: none;

  box-shadow:

    inset 0 1px 1px rgba(0, 0, 0, 0.1),

    0 0 0 2px rgba(0, 123, 255, 0.25),

    0 2px 4px rgba(0, 123, 255, 0.08);

}



.input-3d:active {

  transform: scale(0.99);

}







/* =========================================

   6. GAME FEED & ANIMATIONS

   ========================================= */



.row-glow-win td {

  animation: glowWin 1s ease-out;

  border-left: none;

  border-right: none;

}

.row-glow-loss td {

  animation: glowLoss 1s ease-out;

  border-left: none;

  border-right: none;

}



@keyframes glowWin {

  0% {

    background-color: rgba(32, 201, 151, 0.2); /* bright green */

    transform: scale(1);

  }

  100% {

    background-color: transparent;

    transform: scale(1);

  }

}



@keyframes glowLoss {

  0% {

    background-color: rgba(255, 93, 109, 0.2); /* soft red */

    transform: scale(1);

  }

  100% {

    background-color: transparent;

    transform: scale(1);

  }

}



.row-glow-win {

  animation: glowGreen 0.7s ease-out;

}



.row-glow-loss {

  animation: glowRed 0.7s ease-out;

}



@keyframes glowGreen {

  0% { background-color: #20c99733; }

  100% { background-color: transparent; }

}



@keyframes glowRed {

  0% { background-color: #ff5d6d33; }

  100% { background-color: transparent; }

}



/* =========================================

   7. CHAT & SCROLLBARS

   ========================================= */



#chatCard,

#chatCard .card-header,

#chatCard .card-body,

#chatCard .card-footer {

  background-color: transparent !important;

  border: none !important;

  box-shadow: none !important;

}

.chat-msg {

  background-color: rgba(50, 80, 100, 0.5); /* Bootstrap secondary with 20% opacity */

  border-radius: 0.5rem;

  padding: 0.5rem 0.75rem;

}



/* Slim, minimal scrollbar */

#chatBox::-webkit-scrollbar {

  width: 6px; /* slim width */

}



#chatBox::-webkit-scrollbar-track {

  background: transparent; /* no background */

}



#chatBox::-webkit-scrollbar-thumb {

  background: rgba(255,255,255,0.15); /* subtle light */

  border-radius: 3px;

}



#chatBox::-webkit-scrollbar-thumb:hover {

  background: rgba(255,255,255,0.3); /* brighter on hover */

}



/* Firefox */

#chatBox {

  scrollbar-width: thin;

  scrollbar-color: rgba(255,255,255,0.2) transparent;

}



#chatModal .modal-content {

  border-radius: 0px;

}

#chatModal .modal-body {

  background: #0a0f1c;

}



/* =========================================

   8. Player profile

   ========================================= */



/* Progress bar track */

.progress {

  background-color: secondary; /* darker base */

  border-radius: 10px;

  overflow: hidden;

  height: 12px; /* adjust height */

}



/* Filled portion */

.progress-bar {

  background: linear-gradient(90deg, #0089ff, #217ff3);

  transition: width 0.4s ease;

  box-shadow: 0 0 8px rgba(43, 114, 171, 0.5), 

              0 0 15px rgba(0, 194, 255, 0.5);

}



/* Optional pulse effect when level increases */

@keyframes pulseGlow {

  0% { box-shadow: 0 0 8px rgba(0,255,163,0.5); }

  50% { box-shadow: 0 0 18px rgba(0,194,255,1); }

  100% { box-shadow: 0 0 8px rgba(0,255,163,0.5); }

}



.progress-bar.level-up {

  animation: pulseGlow 1.5s ease-in-out;

}



.player-info-mobile {

  position: sticky;

  padding: 15px;

  top: 68px;

  z-index: 1020;

}







/* =========================================

   9. MASCOT / SKELLY

   ========================================= */

.peek-skeleton {

  position: absolute;

  top: -25px;

  height: 256px;

  pointer-events: none;

  z-index: 0;

}



.skelly-over {

  right: -2px;

}



.skelly-under {

  left: -2px;

}



.skelly-peek {

  transition: filter 0.3s ease;

}



.skelly-peek.win {

  filter: drop-shadow(0 0 10px #00ff99) brightness(1.5);

}



.skelly-peek.lose {

  filter: drop-shadow(0 0 10px #ff0044) brightness(1.5);

}



.skelly-peek.idle {

  filter: drop-shadow(0 0 10px #00eaff) brightness(1.2);

}



.skeleton {

  display: block;

  /* filter: drop-shadow(0 0 4px rgba(0, 255, 200, 0.4));  faint aura */

  filter: drop-shadow(0 0 4px rgb(0 0 0 / 40%));

}



.mascot {

  position: relative;

  display: inline-block;

}



.mascot-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}




@keyframes floatDice {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.dice-icon {
  position: absolute;
  width: 40px;
  left: 40px;
  top: 40px;
  transition: transform 0.3s ease, filter 0.3s ease;
  animation: floatDice 3s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(0,250,255,0.4));
}

.dice-icon:hover {
  animation: pulse-glow-dice 1.2s infinite;
  transform: scale(1.15);
}




/* optional pulsing animation */

@keyframes pulse-glow-dice {

  0%   { filter: drop-shadow(0 0 6px #00faff) drop-shadow(0 0 12px #00faff); }

  50%  { filter: drop-shadow(0 0 12px #00faff) drop-shadow(0 0 24px #00faff); }

  100% { filter: drop-shadow(0 0 6px #00faff) drop-shadow(0 0 12px #00faff); }

}






.skelly-container {

  position: absolute;

  bottom: 400px; /* adjust to align with slider */

  left: 40%;

  transform: translateX(-50%);

  pointer-events: none; /* so it doesn’t block clicks */

  z-index: 9999; /* make sure it’s above the slider */

}



#skelly-anim {

  display: none;

  width: 200px; /* scale to fit */

}





/* =========================================

   10. NAVBAR & FOOTER

   ========================================= */



.banner-session {

  background: linear-gradient(180deg, #0B1A2F, #111D30);

  border-radius: 1rem;

  padding: 2rem;

  text-align: center;

  color: #fff;

  position: relative;

}



.banner-title {

  margin: 0;

  font-size: 1.8rem;

  font-weight: 700;

}



.banner-sub {

  margin-bottom: 1.5rem;

  font-size: 1rem;

  color: var(--color-text-muted);

}



#sessionChart {

  max-width: 100%;

  height: 200px;

}



#globalChartWrapper .card-body {

  padding: 0;         /* remove padding around the chart */

  height: 180px;      /* fixed height for the chart area */

}



#globalChart {

  height: 100% !important;

  width: 100% !important;

}





.hero-image {

background: linear-gradient(rgba(0,0,0,0.50), rgba(0,0,0,0.50)), url('../images/blog-slide.jpg');

background-position: center;

background-size: cover;

background-repeat: no-repeat;

border-radius: 1rem;

text-align: center;

}





.breadcrumb {

  font-size: 0.85rem;

  margin-bottom: 0;  /* tighten spacing */

}

.breadcrumb-item + .breadcrumb-item::before {

  content: "›";

  color: #6c757d;   /* muted gray */

}

.breadcrumb a {

  text-decoration: none;

}

.breadcrumb a:hover {

  text-decoration: underline;

}



/* Default (dark theme) */

#navbarMenu,

.stats-card,

.game-card {

  border: 1px solid rgba(255, 255, 255, 0.05); /* faint white border */

}



/* Light theme */

[data-bs-theme="light"] #navbarMenu,

[data-bs-theme="light"] .stats-card,

[data-bs-theme="light"] .game-card {

  border: 1px solid rgba(0, 0, 0, 0.05); /* faint black border */

}



.navbar-nav .nav-link:hover {

  color: var(--bs-primary);

}



.nav-scroller {

  position: relative;

  z-index: 2;

  height: 2.75rem;

  overflow-y: hidden;

}



.nav-scroller .nav {

  display: flex;

  flex-wrap: nowrap;

  overflow-x: auto;

  text-align: center;

  white-space: nowrap;

  -webkit-overflow-scrolling: touch;

}



.tech-logo {

  filter: grayscale(100%);

  opacity: 0.7;

  transition: filter 0.3s ease, opacity 0.3s ease;

}



.tech-logo:hover {

  filter: grayscale(0%);

  opacity: 1;

}



.feature-card {

  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);

}



.feature-card:hover {

  transform: translateY(-5px); /* slight lift */

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* soft shadow */

  border-color: #0d6efd; /* highlight with primary color */

}



#sessionChartWrapper {

  max-height: 180px; /* adjust as you like */

  overflow: hidden;

}



#sessionChart {

  height: 160px !important; /* force the chart height */

}



#usernameBtn {

  cursor: pointer;

}

#usernameBtn:hover {

  text-decoration: underline;

  opacity: 0.9;

}



.chat-rank-icon {

  width: 20px;

  vertical-align: middle;

  margin-right: 4px;

}

.rank-icon {

  width: 64px;

  object-fit: contain;

  transition: filter 0.3s ease, transform 0.3s ease;

}



/* VIP badge */

.vip-badge {

  transition: transform 0.25s ease, filter 0.25s ease;

}

.vip-badge:hover {

  transform: scale(1.08);

  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));

}



/* --- Base hover effect --- */

.rank-icon:hover {

  transform: scale(1.1);

}



/* --- Pulse animation (hover only) --- */

@keyframes pulse-glow {

  0%, 100% { filter: none; }

  50%      { filter: drop-shadow(0 0 10px currentColor); }

}



/* --- Lower & mid ranks: pulse --- */

.rank-wood:hover    { color: #8B5A2B;  animation: pulse-glow 2s ease-in-out infinite; }

.rank-stone:hover   { color: #7f8c8d;  animation: pulse-glow 2s ease-in-out infinite; }

.rank-bronze:hover  { color: #cd7f32;  animation: pulse-glow 2s ease-in-out infinite; }

.rank-silver:hover  { color: #b0c4de;  animation: pulse-glow 2s ease-in-out infinite; }

.rank-gold:hover    { color: #ffd700;  animation: pulse-glow 2s ease-in-out infinite; }

.rank-plat-1:hover  { color: #00e5ff;  animation: pulse-glow 2s ease-in-out infinite; }

.rank-plat-2:hover  { color: #00e5ff;  animation: pulse-glow 2s ease-in-out infinite; }

.rank-plat-3:hover  { color: #00e5ff;  animation: pulse-glow 2s ease-in-out infinite; }

.rank-plat-4:hover  { color: #00e5ff;  animation: pulse-glow 2s ease-in-out infinite; }



/* --- Stronger glow for all platinum tiers --- */

.rank-icon[class*="rank-plat"]:hover {

  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.9)) 

          drop-shadow(0 0 15px rgba(180, 0, 255, 0.8));

}



/* --- Rainbow shimmer animation --- */

@keyframes rainbow-glow {

  0%   { filter: drop-shadow(0 0 12px #ff0000) drop-shadow(0 0 20px #ff7300); }

  25%  { filter: drop-shadow(0 0 12px #fffb00) drop-shadow(0 0 20px #48ff00); }

  50%  { filter: drop-shadow(0 0 12px #00ffd5) drop-shadow(0 0 20px #002bff); }

  75%  { filter: drop-shadow(0 0 12px #7a00ff) drop-shadow(0 0 20px #ff00ab); }

  100% { filter: drop-shadow(0 0 12px #ff0000) drop-shadow(0 0 20px #ff7300); }

}



/* --- High-tier rainbow shimmer (hover only) --- */

.rank-plat-5:hover,

.rank-plat-6:hover,

.rank-plat-7:hover,

.rank-plat-8:hover,

.rank-plat-9:hover,

.rank-champion:hover {

  animation: rainbow-glow 3s linear infinite;

  transform: scale(1.12);

}

.bg-with-svg {
  position: relative;
  overflow: hidden;
}

.bg-with-svg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/images/card.svg') no-repeat center;
  background-size: cover;
  opacity: 0.1;
  pointer-events: none;
}

.bg-nav-svg {
  overflow: hidden;
}

.bg-nav-svg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/images/card.svg') no-repeat center;
  background-size: cover;
  opacity: 0.1;
  pointer-events: none;
}