/* ===================================================================
   Tales of Loki — Bootstrap 5 theme layer
   Load AFTER bootstrap.min.css. Overrides Bootstrap's CSS variables
   so standard Bootstrap classes (.btn, .card, .navbar, .form-control...)
   automatically pick up the Norse fire/frost palette.
   =================================================================== */

:root{
  /* Icy blue / navy / gold — matched to the Tales of Loki logo */
  --ember:      #2E9FD6;   /* primary accent — was orange, now the logo's icy blue */
  --ember-glow: #6FE0FF;   /* bright cyan glow / hover state */
  --frost:      #4FD8C4;   /* secondary teal accent */
  --rune-gold:  #C9A227;   /* unchanged — already matches the logo's gold */
  --blood:      #D9464B;   /* small danger/accent pop, echoes the wolf's eye */
  --void:       #070A10;
  --ash:        #10151D;
  --ash-2:      #171E28;
  --line:       #232B38;
  --bone:       #E9F1F4;
  --bone-dim:   #8FA0AC;

  /* Bootstrap variable overrides (Bootstrap 5.3 CSS-var based theming) */
  --bs-body-bg: var(--void);
  --bs-body-color: var(--bone);
  --bs-body-font-family: 'Manrope', -apple-system, sans-serif;
  --bs-border-color: var(--line);
  --bs-link-color: var(--frost);
  --bs-link-hover-color: var(--ember-glow);
  --bs-primary: var(--ember);
  --bs-primary-rgb: 232, 86, 46;
  --bs-secondary: var(--frost);
  --bs-secondary-rgb: 79, 216, 196;
  --bs-dark: var(--ash);
  --bs-light: var(--ash-2);
  --bs-heading-color: var(--bone);
}

body{ background: var(--void); }
::selection{ background: var(--ember); color: var(--void); }

h1, h2, h3, h4, h5, h6, .font-display{
  font-family: 'Cinzel', serif;
}
.font-mono{ font-family: 'JetBrains Mono', monospace; }
.text-gold{ color: var(--rune-gold) !important; }
.text-frost{ color: var(--frost) !important; }
.text-ember{ color: var(--ember-glow) !important; }
.text-blood{ color: var(--blood) !important; }
.text-dim{ color: var(--bone-dim) !important; }
.text-bone{ color: var(--bone) !important; }

a{ text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ===================== Navbar ===================== */
.navbar-loki{
  background: rgba(10,12,16,0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.navbar-loki .nav-link{
  color: var(--bone-dim);
  font-weight: 600;
  font-size: 0.9rem;
}
.navbar-loki .nav-link:hover{ color: var(--bone); }
.brand-mark{ font-family: 'Cinzel', serif; font-size: 1.5rem; color: var(--ember); line-height:1; }
.brand-name{ font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 1rem; color: var(--bone); }
.navbar-brand:hover .brand-name{ color: var(--ember-glow); }

/* ===================== Buttons ===================== */
.btn-ember{
  background: linear-gradient(135deg, var(--ember), #1E6E97);
  border: none;
  color: #fff8f2;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn-ember:hover{
  color: #fff8f2;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(46,159,214,.35);
}
.btn-outline-loki{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--bone);
  font-family: 'Cinzel', serif;
  font-weight: 600;
}
.btn-outline-loki:hover{
  border-color: var(--rune-gold);
  color: var(--rune-gold);
  background: transparent;
}

/* Rune button — signature CTA with animated ring, used for register/verify */
.btn-rune{
  position: relative;
  overflow: hidden;
}
.btn-rune__ring{
  position: absolute; inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  pointer-events: none;
}
.btn-rune__ring circle{
  fill: none; stroke: rgba(255,255,255,.6); stroke-width: 1.5;
  stroke-dasharray: 300; stroke-dashoffset: 300;
  transition: stroke-dashoffset .6s ease;
}
.btn-rune:hover .btn-rune__ring circle,
.btn-rune:focus-visible .btn-rune__ring circle{ stroke-dashoffset: 0; }

/* ===================== Cards / surfaces ===================== */
.card-loki{
  background: var(--ash);
  border: 1px solid var(--line);
  border-radius: .625rem;
}
.card-loki:hover{ border-color: var(--rune-gold); }

.gradient-rule{
  height: 3px;
  background: linear-gradient(90deg, var(--ember), var(--rune-gold), var(--frost));
  border-radius: 3px 3px 0 0;
}

/* HUD corner brackets — game-panel signature */
.hud-frame{ position: relative; }
.hud-corner{ position: absolute; width: 22px; height: 22px; pointer-events: none; }
.hud-corner path{ fill: none; stroke: var(--rune-gold); stroke-width: 2; opacity: .75; }
.hud-corner--tl{ top: -1px; left: -1px; }
.hud-corner--tr{ top: -1px; right: -1px; }
.hud-corner--bl{ bottom: -1px; left: -1px; }
.hud-corner--br{ bottom: -1px; right: -1px; }

/* ===================== Forms ===================== */
.form-control, .form-select{
  background: var(--ash-2);
  border: 1px solid var(--line);
  color: var(--bone);
}
.form-control::placeholder{ color: #5c5f68; }
.form-control:focus, .form-select:focus{
  background: var(--ash-2);
  color: var(--bone);
  border-color: var(--rune-gold);
  box-shadow: 0 0 0 .2rem rgba(201,162,39,.15);
}
.form-label{ color: var(--bone-dim); font-weight: 600; font-size: .8rem; }

/* ===================== Tables ===================== */
/* Bootstrap's own .table color vars are compiled from the light-theme SASS
   defaults (not linked to --bs-body-color), so without this override every
   table renders near-black text on our black background. */
.table{
  --bs-table-color: var(--bone);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--line);
  --bs-table-striped-color: var(--bone);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-color: var(--bone);
  --bs-table-hover-bg: rgba(255,255,255,.05);
  color: var(--bone);
}
.table > :not(caption) > * > *{ color: inherit; }

/* ===================== Modals ===================== */
.modal-content.card-loki{ background: var(--ash); }
.modal-header, .modal-footer{ border-color: var(--line) !important; }

/* ===================== DataTables (dark theme) ===================== */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background: var(--ash-2);
  border: 1px solid var(--line);
  color: var(--bone);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter label{ color: var(--bone-dim); }
.dataTables_wrapper .dataTables_paginate .page-link{
  background: var(--ash-2);
  border-color: var(--line);
  color: var(--bone);
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link{
  background: var(--ember);
  border-color: var(--ember);
  color: #fff8f2;
}
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link{
  background: transparent;
  color: var(--bone-dim);
}
table.dataTable thead th{ color: var(--bone-dim); border-color: var(--line) !important; }
table.dataTable tbody td{ border-color: var(--line) !important; }

/* ===================== PVP leaderboard rows ===================== */
.pvp-row{
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.pvp-row:hover{
  border-color: var(--rune-gold);
  transform: translateX(2px);
}
.pvp-rank{
  width: 34px;
  text-align: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.pvp-thumb{
  width: 44px;
  height: 60px;
  object-fit: contain;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: .375rem;
  flex-shrink: 0;
  image-rendering: pixelated;
}
.min-w-0{ min-width: 0; }

.pvp-medal{ flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; }
.pvp-medal__ring{ fill: none; stroke-width: 2; }
.pvp-medal__num{
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 15px;
}
.pvp-medal--1 .pvp-medal__face{ fill: url(#pvpGoldGrad); }
.pvp-medal--1 .pvp-medal__ring{ stroke: #F4D876; filter: drop-shadow(0 0 4px rgba(244,216,118,.7)); }
.pvp-medal--1 .pvp-medal__num{ fill: #4A3300; }
.pvp-medal--2 .pvp-medal__face{ fill: url(#pvpSilverGrad); }
.pvp-medal--2 .pvp-medal__ring{ stroke: #E4EAF0; filter: drop-shadow(0 0 3px rgba(228,234,240,.5)); }
.pvp-medal--2 .pvp-medal__num{ fill: #33383D; }
.pvp-medal--3 .pvp-medal__face{ fill: url(#pvpBronzeGrad); }
.pvp-medal--3 .pvp-medal__ring{ stroke: #E3A468; filter: drop-shadow(0 0 3px rgba(227,164,104,.5)); }
.pvp-medal--3 .pvp-medal__num{ fill: #3D2410; }
.form-check-input{ background-color: var(--ash-2); border-color: var(--line); }
.form-check-input:checked{ background-color: var(--ember); border-color: var(--ember); }
.invalid-feedback{ color: var(--blood); }
.form-control.is-invalid{ border-color: var(--blood); background-image: none; }

.btn-outline-gold{
  color: var(--rune-gold);
  border-color: var(--rune-gold);
  background: transparent;
}
.btn-outline-gold:hover{ color: var(--void); background: var(--rune-gold); border-color: var(--rune-gold); }
.btn-outline-gold.active{ color: var(--void); background: var(--rune-gold); border-color: var(--rune-gold); }

.char-preview-stage{ position: relative; display: inline-block; min-width: 80px; min-height: 110px; }
.char-preview-spinner{
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid rgba(201,162,39,.25);
  border-top-color: var(--rune-gold);
  border-radius: 50%;
  animation: char-preview-spin .7s linear infinite;
}
.char-preview-stage.is-loading .char-preview-spinner{ display: block; }
.char-preview-stage.is-loading img{ opacity: .35; }
@keyframes char-preview-spin{ to { transform: rotate(360deg); } }

.item-icon{ width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; background: var(--ash-2); border: 1px solid var(--line); border-radius: 4px; }
.item-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.item-cell{
  position: relative;
  width: 48px; height: 48px;
  background: var(--ash-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.item-cell img{ width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.item-qty{
  position: absolute; right: 2px; bottom: 1px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--bone);
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}
.item-refine{
  position: absolute; left: 2px; top: 1px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--rune-gold);
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}

.btn-check:checked + .btn-sex{
  background: var(--ash-2);
  color: var(--ember-glow);
  border-color: var(--rune-gold);
}
.btn-sex{ background: transparent; border: 1px solid var(--line); color: var(--bone-dim); }

/* Verification code boxes */
.code-box{
  aspect-ratio: 1;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem;
  font-weight: 600;
  background: var(--ash-2);
  border: 1px solid var(--line);
  color: var(--ember-glow);
}
.code-box:focus{
  border-color: var(--rune-gold);
  box-shadow: 0 0 0 .2rem rgba(201,162,39,.15);
}

/* ===================== Hero ===================== */
.hero-glow{
  position: absolute; inset: -20% -10% auto -10%; height: 700px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(46,159,214,.10), transparent 55%),
    radial-gradient(ellipse at 75% 40%, rgba(79,216,196,.08), transparent 55%);
  pointer-events: none; z-index: 0;
}
.hero-title em{
  font-style: normal;
  background: linear-gradient(90deg, var(--ember-glow), var(--rune-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chip-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--frost); box-shadow: 0 0 8px var(--frost);
  display: inline-block; animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

.serpent-eye{ animation: eyeglow 3.5s ease-in-out infinite; }
@keyframes eyeglow{ 0%,100%{ opacity:.5; } 50%{ opacity:1; filter: drop-shadow(0 0 4px var(--frost)); } }

/* ===================== Rates strip ===================== */
.rates-strip{ background: var(--ash); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rates-strip .col{ border-right: 1px solid var(--line); }
.rates-strip .col:last-child{ border-right: none; }
.rates-value{ font-family: 'Cinzel', serif; font-weight: 600; font-size: 1.25rem; color: var(--ember-glow); }

/* ===================== Feature runes ===================== */
.feature-rune{ font-family: 'Cinzel', serif; font-size: 1.6rem; color: var(--ember); }

/* ===================== Stats ===================== */
.stats-strip{ background: var(--ash); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-num{ font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); }

/* ===================== Gallery ===================== */
.gallery-frame{
  aspect-ratio: 16/10;
  background: var(--ash-2);
  border: 1px solid var(--line);
  border-radius: .5rem;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .6rem;
}
.gallery-ring{ animation: spin 12s linear infinite; transform-origin: center; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ===================== CTA banner ===================== */
.cta-banner{
  position: relative;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(46,159,214,.12), rgba(79,216,196,.08)), var(--ash);
  border: 1px solid var(--line);
  overflow: hidden;
}
.cta-banner::before{
  content:""; position: absolute; top: -50%; left: 50%; width: 600px; height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(201,162,39,.15), transparent 60%);
  pointer-events: none;
}

/* ===================== Ambient ember particles ===================== */
.ember-field{
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(2px 2px at 20% 90%, rgba(46,159,214,.35), transparent),
    radial-gradient(1.5px 1.5px at 60% 95%, rgba(46,159,214,.25), transparent),
    radial-gradient(1.5px 1.5px at 80% 85%, rgba(201,162,39,.3), transparent);
}

.rising-embers circle{ animation: rise 6s ease-in infinite; }
.rising-embers circle:nth-child(2){ animation-delay: 1.5s; }
.rising-embers circle:nth-child(3){ animation-delay: 3.2s; }
@keyframes rise{ 0%{ transform: translateY(0); opacity:0; } 15%{ opacity:.9; } 100%{ transform: translateY(-420px); opacity:0; } }

footer a{ color: var(--bone-dim); }
footer a:hover{ color: var(--bone); }
.footer-heading{ font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rune-gold); }

/* ===================== Auth pages (login / register / reset) ===================== */
.card-inline-logo{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.card-inline-logo::before{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(201,162,39,.32) 0%, rgba(46,159,214,.17) 45%, transparent 72%);
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}
.card-inline-logo img{
  position: relative;
  display: block;
  height: 140px;
  width: auto;
  filter: drop-shadow(0 0 18px rgba(201,162,39,.55)) drop-shadow(0 0 36px rgba(46,159,214,.3));
  transition: filter .3s ease, transform .3s ease;
}
.card-inline-logo:hover img{
  filter: drop-shadow(0 0 24px rgba(201,162,39,.75)) drop-shadow(0 0 48px rgba(46,159,214,.45));
  transform: scale(1.03);
}

.input-icon-group{ position: relative; }
.input-icon-group .field-icon{
  position: absolute;
  left: .9rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--bone-dim);
  pointer-events: none;
  transition: color .2s ease;
}
.input-icon-group .form-control{ padding-left: 2.6rem; }
.input-icon-group .form-control:focus ~ .field-icon,
.input-icon-group:focus-within .field-icon{ color: var(--rune-gold); }

.form-control{
  background: var(--void);
  border: 1px solid var(--line);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus{
  background: var(--void);
  border-color: var(--rune-gold);
  box-shadow: 0 0 0 3px rgba(201,162,39,.15);
  color: var(--bone);
}

/* ===================== Registration step visibility ===================== */
.step{ display: none; }
.step--active{ display: block; animation: fadeUp .5s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform: translateY(0); } }
.invalid-feedback{ display: block; min-height: 1.1rem; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}