/* =========================================================
   KONGO ENTERTAINMENT - shared styles (black / crimson / gold)
   Every page links this file. Change a token here and the
   whole site follows.
   ========================================================= */
@font-face{font-family:"Barlow Condensed";src:url("assets/fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Barlow Condensed";src:url("assets/fonts/barlow-condensed-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Alegreya Sans";src:url("assets/fonts/alegreya-sans-400.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Alegreya Sans";src:url("assets/fonts/alegreya-sans-500.woff2") format("woff2");font-weight:500;font-display:swap;}
@font-face{font-family:"Alegreya Sans";src:url("assets/fonts/alegreya-sans-700.woff2") format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"Alegreya Sans";src:url("assets/fonts/alegreya-sans-800.woff2") format("woff2");font-weight:800;font-display:swap;}

:root{
  --black:#0a0808;
  --char:#130e0e;
  --crimson:#9a1118;
  --crimson-hi:#b5151d;
  --crimson-deep:#2a0709;
  --gold:#c9a227;
  --gold-hi:#e4c565;
  --gold-dim:#6f5a1a;
  --bone:#efe4cc;
  --bone-soft:#d9ccb0;
  --muted:#b9ab8c;

  --display:"Barlow Condensed","Arial Narrow","Impact",sans-serif;
  --body:"Alegreya Sans","Segoe UI",system-ui,sans-serif;
  --radius:5px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:clip;}
body{
  background:var(--black);color:var(--bone);
  font-family:var(--body);font-size:19px;line-height:1.6;font-weight:400;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
.container{width:min(1120px,92%);margin-inline:auto;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--gold);color:var(--black);padding:10px 16px;border-radius:var(--radius);font-weight:800;text-decoration:none;}
.skip:focus{top:12px;}
:where(a,button,input,select):focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:.98;letter-spacing:.012em;text-transform:uppercase;color:var(--bone);}

/* ---------- buttons ---------- */
.btn,header .store-btn,.auth-btn,.auth-form button[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:800;font-size:18px;line-height:1.1;letter-spacing:.02em;
  padding:14px 28px;border-radius:var(--radius);
  border:1px solid var(--gold);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn-red,.auth-btn,.auth-form button[type="submit"]{background:var(--crimson);color:var(--bone);}
.btn-red:hover,.auth-btn:hover,.auth-form button[type="submit"]:hover{background:var(--crimson-hi);border-color:var(--gold-hi);}
.btn-line,header .nav-right .store-btn{background:transparent;color:var(--gold);}
.btn-line:hover,header .nav-right .store-btn:hover{background:rgba(201,162,39,.14);color:var(--gold-hi);border-color:var(--gold-hi);}
.btn-gold{background:var(--gold);color:var(--black);}
.btn-gold:hover{background:var(--gold-hi);border-color:var(--gold-hi);}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;}

/* =========================================================
   HEADER (markup injected from Header.html by header-loader.js)
   ========================================================= */
header{position:relative;z-index:20;background:#050404;border-bottom:1px solid var(--gold-dim);}
header nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;}
header .logo{display:flex;align-items:center;gap:13px;font-family:var(--display);font-weight:800;font-size:clamp(21px,2.8vw,30px);letter-spacing:.06em;color:var(--gold);text-decoration:none;}
header .logo img{height:44px;width:44px;object-fit:cover;border-radius:50%;border:2px solid var(--gold);background:var(--crimson);}
header .nav-right{display:flex;align-items:center;gap:12px;}
header .store-btn,.auth-btn{padding:9px 20px;font-size:17px;}
header .nav-right a:not(.store-btn){font-family:var(--body);font-size:16px!important;padding:8px 14px!important;border-radius:var(--radius)!important;}
.auth-btn:disabled{opacity:.55;cursor:not-allowed;}
.auth-btn.auth-btn-profile{background:transparent;color:var(--bone);padding:5px 16px 5px 5px;border-radius:999px;gap:9px;}
.auth-btn.auth-btn-profile:hover{background:rgba(201,162,39,.14);}
.auth-avatar{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--crimson);color:var(--bone);border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;}
.auth-name{font-size:16px;}
.admin-tag{background:var(--gold);color:var(--black);font-size:11px;font-weight:800;padding:1px 8px;border-radius:999px;}
@keyframes wiggle{0%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}100%{transform:rotate(0)}}
header .logo.wiggle img{animation:wiggle .5s ease;}

/* =========================================================
   LOGIN / SIGN-UP MODAL (markup from Header.html, logic in auth.js)
   ========================================================= */
.auth-modal{display:none;position:fixed;inset:0;background:rgba(5,4,4,.82);align-items:center;justify-content:center;z-index:300;}
.auth-box{background:var(--char);color:var(--bone);border:1px solid var(--gold);border-radius:8px;padding:34px 30px 28px;width:360px;max-width:92%;position:relative;}
.auth-close{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--gold);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px;}
.auth-close:hover{color:var(--gold-hi);}
.auth-box h3{font-size:38px;margin-bottom:18px;text-align:center;color:var(--gold);}
.auth-form{display:flex;flex-direction:column;gap:14px;}
.auth-form input{background:var(--black);border:1px solid var(--gold-dim);border-radius:var(--radius);color:var(--bone);padding:11px 13px;font-family:inherit;font-size:17px;width:100%;}
.auth-form input:focus{outline:none;border-color:var(--gold);}
.auth-form input:disabled{opacity:.5;cursor:not-allowed;}
.auth-form button[type="submit"]{margin-top:6px;width:100%;}
.auth-form button[type="submit"]:disabled{opacity:.6;cursor:not-allowed;}
.pw-field{display:flex;gap:8px;}
.pw-field input{flex:1;min-width:0;}
.pw-toggle{background:none;border:1px solid var(--gold-dim);border-radius:var(--radius);color:var(--gold);font-family:inherit;font-size:14px;font-weight:700;padding:0 12px;cursor:pointer;white-space:nowrap;}
.pw-toggle:hover{border-color:var(--gold);}
.auth-forgot{text-align:right;font-size:15px;margin-top:-6px;}
.auth-forgot a,.auth-switch a{color:var(--gold);}
.auth-switch{text-align:center;margin-top:14px;font-size:16px;color:var(--muted);}
.auth-error{color:#ff8a82;font-size:15px;text-align:center;min-height:18px;}
.auth-error.auth-success{color:#8fd18a;}

/* =========================================================
   GOLD CALL-TO-ACTION BAND (home + BattleTown)
   ========================================================= */
.discord{background:var(--gold);color:var(--black);padding:clamp(44px,5vw,66px) 0;}
.discord-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.discord-info{display:flex;align-items:center;gap:22px;}
.discord-info svg{width:62px;height:62px;fill:var(--black);flex-shrink:0;}
.discord h2{font-size:clamp(38px,4.8vw,56px);color:var(--black);margin-bottom:6px;}
.discord p{font-weight:700;font-size:20px;max-width:42ch;line-height:1.35;}
.discord .btn-red{border-color:var(--black);}
.discord .btn-red:hover{border-color:var(--black);}
.discord :where(a,button):focus-visible{outline-color:var(--black);}

/* =========================================================
   FOOTER
   ========================================================= */
footer{background:var(--black);color:var(--muted);padding:34px 0 40px;border-top:1px solid var(--gold-dim);}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.footer-brand{display:flex;align-items:center;gap:14px;font-weight:500;}
.footer-brand img{width:60px;height:auto;}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;font-weight:700;}
.footer-links a{color:var(--gold);text-decoration:none;}
.footer-links a:hover{color:var(--gold-hi);text-decoration:underline;text-underline-offset:4px;}

/* =========================================================
   SHARED RESPONSIVE + MOTION
   ========================================================= */
@media (max-width:640px){
  body{font-size:18px;}
  header nav{flex-direction:column;gap:12px;}
  .discord-info{flex-direction:column;align-items:flex-start;gap:14px;}
  .discord .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  header .logo.wiggle img{animation:none;}
  .btn,header .store-btn,.auth-btn{transition:none;}
}