/* =====================================================================
   SKYZO SQUAD — Theme 2.0  "TACTICAL HUD"
   Carbon base · ember + cyan accents · angular HUD panels ·
   Chakra Petch display · JetBrains Mono data. Applied site-wide.
   ===================================================================== */

:root {
  --bg:      #0a0a0f;
  --bg-2:    #0f1017;
  --panel:   rgba(20, 22, 32, 0.66);
  --panel-2: #14161f;
  --line:    rgba(255,255,255,0.07);
  --line-2:  rgba(255,255,255,0.14);

  --ember:   #ff5b3d;   /* primary accent */
  --ember-2: #ff8a63;
  --cyan:    #22d3ee;   /* data / secondary */
  --gold:    #ffc857;   /* rank / highlight */
  --green:   #37e0a0;   /* ready / ok */
  --red:     #ff4d5e;   /* danger / not ready */

  --text:    #f1f2f7;
  --muted:   #868aa0;

  --hud-cut: 10px;       /* corner notch size */
  --radius:  4px;
  --shadow:  0 20px 46px rgba(0,0,0,.55);
}

/* ---- Base ------------------------------------------------------------- */
body {
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(255,91,61,.14), transparent 60%),
    radial-gradient(900px 620px at 100% 0%, rgba(34,211,238,.08), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%, #05060b 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
  position: relative;
}
/* faint HUD grid texture */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 80%);
}

h1,h2,h3,h4,h5,.display, .navbar-brand, .btn, .modal-title {
  font-family:'Chakra Petch','Segoe UI',sans-serif; letter-spacing:.01em;
}
a { color: var(--ember); }
a:hover { color: var(--ember-2); }
.text-white-50 { color: var(--muted) !important; }
.mono { font-family:'JetBrains Mono',monospace; }
::selection { background: rgba(255,91,61,.35); color:#fff; }

/* Angular HUD helper */
.hud-cut {
  clip-path: polygon(
    0 var(--hud-cut), var(--hud-cut) 0,
    100% 0, 100% calc(100% - var(--hud-cut)),
    calc(100% - var(--hud-cut)) 100%, 0 100%);
}

/* Eyebrow tag */
.sk-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:.74rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ember-2);
  padding:.42rem .9rem; border:1px solid rgba(255,91,61,.35);
  background:rgba(255,91,61,.10);
}
.sk-tag.cyan { color:var(--cyan); border-color:rgba(34,211,238,.35); background:rgba(34,211,238,.10); }
.sk-tag.gold { color:var(--gold); border-color:rgba(255,200,87,.35); background:rgba(255,200,87,.10); }

/* Section label with mono index */
.sk-label {
  display:flex; align-items:center; gap:.7rem;
  font:700 .8rem/1 'Chakra Petch',sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 1.4rem;
}
.sk-label::before{ content:""; width:22px; height:2px; background:var(--ember); }
.sk-label::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent); }

/* =====================================================================
   NAVBAR
   ===================================================================== */
nav.navbar{
  background:rgba(8,9,14,.72)!important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease, box-shadow .3s ease;
}
nav.navbar.scrolled{ background:rgba(6,7,11,.94)!important; box-shadow:0 8px 30px rgba(0,0,0,.55); border-bottom-color:rgba(255,91,61,.3); }
.navbar-brand{ font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.navbar-brand img{ transition:transform .3s ease; filter:drop-shadow(0 3px 10px rgba(255,91,61,.5)); }
.navbar-brand:hover img{ transform:rotate(-8deg) scale(1.08); }
.navbar-dark .navbar-nav .nav-link{
  color:#c4c8da; font-weight:500; text-transform:uppercase; font-size:.9rem; letter-spacing:.04em;
  position:relative; padding-bottom:6px; transition:color .25s ease;
  font-family:'Chakra Petch',sans-serif;
}
.navbar-dark .navbar-nav .nav-link::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:linear-gradient(90deg,var(--ember),var(--ember-2)); transition:width .28s ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{ color:#fff; }
.navbar-dark .navbar-nav .nav-link:hover::after,
.navbar-dark .navbar-nav .nav-link.active::after{ width:100%; }
.navbar-toggler{ border-color:var(--line-2); }
.navbar-toggler:focus{ box-shadow:0 0 0 3px rgba(255,91,61,.25); }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{ font-weight:700; letter-spacing:.03em; text-transform:uppercase; border-radius:var(--radius);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:linear-gradient(180deg,var(--ember-2),var(--ember)); border:none; color:#180500; box-shadow:0 8px 22px rgba(255,91,61,.32); }
.btn-primary:hover{ transform:translateY(-2px); color:#180500; box-shadow:0 12px 30px rgba(255,91,61,.45); }
.btn-success{ background:linear-gradient(180deg,#5cf0bd,var(--green)); border:none; color:#052a1e; }
.btn-success:hover{ transform:translateY(-2px); color:#052a1e; }
.btn-warning{ background:linear-gradient(180deg,#ffd98a,var(--gold)); border:none; color:#2a1c00; }
.btn-warning:hover{ transform:translateY(-2px); color:#2a1c00; }
.btn-danger{ background:linear-gradient(180deg,#ff7a84,var(--red)); border:none; }
.btn-info{ background:linear-gradient(180deg,#67e5f7,var(--cyan)); border:none; color:#04252b; }
.btn-outline-light,.btn-outline-secondary{ border-color:var(--line-2); color:var(--text); }
.btn-outline-light:hover,.btn-outline-secondary:hover{ background:rgba(255,255,255,.06); border-color:var(--ember); color:#fff; transform:translateY(-2px); }
.btn-outline-warning{ border-color:var(--gold); color:var(--gold); }
.btn-outline-warning:hover{ background:var(--gold); color:#2a1c00; transform:translateY(-2px); }

/* =====================================================================
   CARDS  (HUD framing)
   ===================================================================== */
.card{
  position:relative; background:var(--panel);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:var(--radius); color:var(--text);
  overflow:hidden; transition:transform .22s ease, border-color .22s ease;
}
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--ember),transparent 60%); opacity:.8; }
.card.shadow,.card.shadow-sm{ box-shadow:var(--shadow)!important; }
.card:hover{ border-color:var(--line-2); }
.card-header{ background:linear-gradient(120deg,rgba(255,91,61,.18),rgba(255,91,61,.03))!important;
  border-bottom:1px solid var(--line); color:#fff!important; font-family:'Chakra Petch',sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.card-header.bg-primary,.card-header.bg-secondary{ background:linear-gradient(120deg,rgba(255,91,61,.24),rgba(34,211,238,.06))!important; }
.card-body.bg-white{ background:transparent!important; color:var(--text)!important; }
.card-title{ color:#fff; }
.card-text{ color:var(--muted); }

/* =====================================================================
   FORMS
   ===================================================================== */
.form-label{ font-weight:600; color:#d7dbe9; font-family:'Chakra Petch',sans-serif; letter-spacing:.02em; }
.form-control,.form-select,textarea.form-control{
  background:rgba(8,10,16,.7)!important; color:var(--text)!important;
  border:1px solid var(--line-2)!important; border-radius:var(--radius)!important; padding:.7rem .9rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-control::placeholder{ color:#6b7089!important; }
.form-control:focus,.form-select:focus,textarea.form-control:focus{
  border-color:var(--ember)!important; box-shadow:0 0 0 3px rgba(255,91,61,.2)!important; background:rgba(10,13,20,.9)!important;
}
.form-select option{ background:#0f1017; color:var(--text); }
.form-check-input{ background-color:rgba(8,10,16,.7); border-color:var(--line-2); }
.form-check-input:checked{ background-color:var(--ember); border-color:var(--ember); }
.form-check-input:focus{ box-shadow:0 0 0 3px rgba(255,91,61,.2); }
.form-check-label{ color:#cdd2e2; }
.invalid-feedback{ color:#ffb0b6; }
.form-control.is-invalid,.form-select.is-invalid{ border-color:var(--red)!important; }

/* =====================================================================
   ALERTS / BADGES / MODAL / ACCORDION / TABLE
   ===================================================================== */
.alert{ border-radius:var(--radius); border:1px solid var(--line-2); }
.alert-success{ background:rgba(55,224,160,.12); color:#bff3dd; border-color:rgba(55,224,160,.4); }
.alert-danger{ background:rgba(255,77,94,.12); color:#ffc4c9; border-color:rgba(255,77,94,.4); }
.badge{ font-family:'Chakra Petch',sans-serif; font-weight:700; letter-spacing:.02em; border-radius:var(--radius); }
.bg-warning{ color:#2a1c00!important; }

.modal-content{ background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--radius); color:var(--text); box-shadow:var(--shadow); }
.modal{ z-index:1060; }
.modal-backdrop{ z-index:1055; }
nav.navbar.fixed-top{ z-index:1040; }
.modal-header,.modal-footer{ border-color:var(--line); }
.btn-close{ filter:invert(1) grayscale(1) brightness(1.6); }

.accordion{ --bs-accordion-bg:transparent; }
.accordion-item{ background:transparent; border:1px solid var(--line); border-radius:var(--radius)!important; margin-bottom:.6rem; overflow:hidden; }
.accordion-button{ background:rgba(255,255,255,.03); color:var(--text); font-family:'Chakra Petch',sans-serif; font-weight:600; }
.accordion-button:not(.collapsed){ background:rgba(255,91,61,.14); color:#fff; box-shadow:none; }
.accordion-button:focus{ box-shadow:0 0 0 3px rgba(255,91,61,.2); }
.accordion-button::after{ filter:invert(.7); }
.accordion-body{ background:rgba(0,0,0,.22); }

.table{ color:var(--text); --bs-table-bg:transparent; }
.table > :not(caption) > * > *{ border-color:var(--line); background:transparent; }
.table thead th{ color:var(--muted); text-transform:uppercase; font-size:.72rem; letter-spacing:.1em; border-color:var(--line-2); font-family:'Chakra Petch',sans-serif; }

/* =====================================================================
   FOOTER
   ===================================================================== */
footer.footer{ background:rgba(8,9,14,.92)!important; border-top:1px solid var(--line); padding:34px 0; margin-top:auto; }
footer.footer h5{ color:var(--gold); font-family:'Chakra Petch',sans-serif; text-transform:uppercase; letter-spacing:.04em; }
footer.footer a{ color:var(--muted); text-decoration:none; transition:color .25s ease; }
footer.footer a:hover{ color:#fff; }
footer.footer .social-icons a{
  display:inline-grid; place-items:center; width:40px; height:40px; margin:0 4px; font-size:1.05rem;
  color:var(--ember-2); border:1px solid var(--line); transition:transform .2s, background .2s, color .2s, border-color .2s;
}
footer.footer .social-icons a:hover{ transform:translateY(-3px); background:var(--ember); color:#180500; border-color:var(--ember); }

/* =====================================================================
   RANK TIERS  (shared by player cards)
   ===================================================================== */
.tier{ --tc:#8a8f9e; }
.tier-warrior{ --tc:#9aa0b2; }
.tier-elite{ --tc:#37e0a0; }
.tier-master{ --tc:#22d3ee; }
.tier-grandmaster{ --tc:#a78bfa; }
.tier-epic{ --tc:#c084fc; }
.tier-legend{ --tc:#ffc857; }
.tier-mythic{ --tc:#ff5b3d; }
.tier-glory{ --tc:#ff2d55; }

/* =====================================================================
   PLAYER SCOUTING CARD  (.pcard)  — used in search, roster, modals
   ===================================================================== */
.pcard{
  position:relative; background:var(--panel-2); border:1px solid var(--line);
  overflow:hidden; height:100%; display:flex; flex-direction:column;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pcard:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 14px 34px rgba(0,0,0,.5); }
.pcard::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--tc,#ff5b3d), transparent 70%); }
.pcard__head{ display:flex; align-items:flex-start; gap:.75rem; padding:1rem 1.05rem .8rem; }
.pcard__role{
  flex-shrink:0; width:44px; height:44px; display:grid; place-items:center; font-size:1.05rem;
  color:var(--ember-2); background:rgba(255,91,61,.12); border:1px solid rgba(255,91,61,.3);
}
.pcard__id{ min-width:0; flex:1; }
.pcard__name{ margin:0; font:700 1.02rem/1.15 'Chakra Petch',sans-serif; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcard__user{ margin:.15rem 0 0; font-size:.82rem; color:var(--cyan); font-family:'JetBrains Mono',monospace;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcard__tier{
  flex-shrink:0; text-align:center; padding:.3rem .5rem; min-width:58px;
  border:1px solid color-mix(in srgb, var(--tc) 45%, transparent); background:color-mix(in srgb, var(--tc) 14%, transparent);
}
.pcard__tier b{ display:block; font:700 .72rem/1.1 'Chakra Petch',sans-serif; color:var(--tc); text-transform:uppercase; }
.pcard__tier span{ font-size:.6rem; color:var(--muted); letter-spacing:.08em; }

.pcard__roles{ display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1.05rem .2rem; }
.chip{ font-size:.72rem; font-weight:600; padding:.24rem .55rem; border:1px solid var(--line-2); color:#cfd4e6; background:rgba(255,255,255,.03); }
.chip.main{ color:var(--ember-2); border-color:rgba(255,91,61,.35); background:rgba(255,91,61,.08); }
.chip.hero{ color:var(--cyan); border-color:rgba(34,211,238,.28); background:rgba(34,211,238,.06); font-family:'JetBrains Mono',monospace; }

.pcard__stats{ padding:.7rem 1.05rem; display:grid; grid-template-columns:1fr 1fr; gap:.45rem .9rem; border-top:1px solid var(--line); margin-top:.6rem; }
.stat{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.8rem; }
.stat .k{ color:var(--muted); text-transform:uppercase; font-size:.66rem; letter-spacing:.08em; }
.stat .v{ color:#eef0f7; font-family:'JetBrains Mono',monospace; font-weight:500; }

.pcard__pool{ padding:0 1.05rem .2rem; }
.pcard__pool .lbl{ font-size:.64rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin:.3rem 0 .4rem; }

.pcard__foot{ margin-top:auto; padding:.8rem 1.05rem 1rem; display:flex; gap:.5rem; }
.pill{ flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; padding:.5rem; border:1px solid var(--line-2); font-family:'Chakra Petch',sans-serif; }
.pill.on{ color:var(--green); border-color:rgba(55,224,160,.4); background:rgba(55,224,160,.1); }
.pill.off{ color:var(--red); border-color:rgba(255,77,94,.4); background:rgba(255,77,94,.1); }

/* =====================================================================
   ANIMATIONS
   ===================================================================== */
@keyframes skUp{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;} }
@keyframes skFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes skPop{ 0%{transform:scale(.6); opacity:0;} 60%{transform:scale(1.08);} 100%{transform:scale(1); opacity:1;} }
@keyframes skScan{ 0%{background-position:0 -100%;} 100%{background-position:0 200%;} }

.sk-reveal{ opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s ease; will-change:opacity,transform; }
.sk-reveal.is-visible{ opacity:1; transform:none; }
.sk-reveal.d1{transition-delay:.07s} .sk-reveal.d2{transition-delay:.14s}
.sk-reveal.d3{transition-delay:.21s} .sk-reveal.d4{transition-delay:.28s}
.sk-float{ animation:skFloat 5s ease-in-out infinite; }
.sk-pop{ animation:skPop .5s cubic-bezier(.2,.8,.3,1.2) both; }

@media (prefers-reduced-motion: reduce){
  .sk-reveal{ opacity:1!important; transform:none!important; }
  .sk-float,.sk-pop{ animation:none!important; }
  body::before{ display:none; }
}

/* SweetAlert */
.swal2-popup.sk-swal{ background:var(--bg-2)!important; color:var(--text)!important; border:1px solid var(--line-2)!important; border-radius:var(--radius)!important; }
.swal2-popup.sk-swal .swal2-title{ font-family:'Chakra Petch',sans-serif; }
.swal2-popup.sk-swal .swal2-html-container{ color:var(--muted)!important; }