/* =========================================================
   KAIYU — Homepage Theme
   Aligns the CMS with the KAIYU presentation design system.
   Crimson × Gold × steel on near-black · Cinzel + Inter.
   This file is loaded LAST and overrides the legacy skin.
   No markup/function is removed — visual layer only.
   ========================================================= */

:root{
  /* palette — mirrors presi/styles.css */
  --k-bg:#06060a;
  --k-bg-2:#0b0b11;
  --k-panel:linear-gradient(180deg, rgba(18,15,20,.92), rgba(9,8,12,.94));
  --k-panel-soft:rgba(255,235,215,.025);

  --k-line:rgba(210,180,150,.12);
  --k-line-strong:rgba(214,196,168,.28);
  --k-steel:rgba(180,190,205,.16);

  --k-text:#f3efe8;
  --k-muted:#b9b0a6;
  --k-muted-2:#8a8178;

  --k-crimson:#e0263a;
  --k-crimson-deep:#9c1120;
  --k-gold:#e6b968;
  --k-gold-2:#f4d089;
  --k-gold-deep:#c98f2e;

  --k-shadow:0 24px 70px rgba(0,0,0,.6);
  --k-radius:18px;

  --k-grad-brand:linear-gradient(135deg,var(--k-gold-2) 0%,var(--k-gold) 34%,var(--k-crimson) 100%);
  --k-grad-gold:linear-gradient(135deg,#f7dc9e,var(--k-gold) 55%,var(--k-gold-deep));

  /* re-point the legacy theme tokens so any rule using them fits in */
  --theme__color1:#9c1120;
  --theme__color2:#e6b968;
}

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background-color:var(--k-bg);
  color:var(--k-text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(224,38,58,.32);color:#fff}

h1,h2,h3,h4,h5,h6{font-family:"Cinzel","Georgia",serif;letter-spacing:.01em}
.font1,.font2,.font3,.font4{}

a{transition:color .2s ease}

/* thin themed scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(230,185,104,.35) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(230,185,104,.28);border-radius:999px}
::-webkit-scrollbar-track{background:transparent}

/* ---------------------------------------------------------
   Space background — fixed starfield behind everything
   Markup: <div class="site-bg"> injected in index.php
   Fallback: body gradient if markup ever missing
   --------------------------------------------------------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(156,17,32,.24), transparent 55%),
    radial-gradient(90% 60% at 100% 0%, rgba(201,143,46,.08), transparent 60%),
    linear-gradient(180deg,#0a070c 0%,#06060a 55%,#08060a 100%);
}
.site-bg{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.site-bg .nebula{
  position:absolute;inset:0;opacity:.9;
  background:
    radial-gradient(38% 30% at 72% 22%, rgba(224,38,58,.12), transparent 70%),
    radial-gradient(32% 26% at 22% 62%, rgba(201,143,46,.07), transparent 72%),
    radial-gradient(46% 34% at 50% 96%, rgba(156,17,32,.1), transparent 70%);
}
.site-bg .stars{position:absolute;inset:0}
.site-bg .stars-1{
  background-image:
    radial-gradient(1px 1px at 24px 32px, rgba(255,255,255,.95), transparent),
    radial-gradient(1px 1px at 130px 90px, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 210px 160px, rgba(244,208,137,.85), transparent),
    radial-gradient(1px 1px at 86px 230px, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 275px 268px, rgba(255,255,255,.6), transparent),
    radial-gradient(1.4px 1.4px at 300px 40px, rgba(255,255,255,.9), transparent);
  background-size:320px 320px;
}
.site-bg .stars-2{
  background-image:
    radial-gradient(1.3px 1.3px at 60px 120px, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 320px 260px, rgba(244,208,137,.8), transparent),
    radial-gradient(1px 1px at 180px 380px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.4px 1.4px at 440px 60px, rgba(255,255,255,.85), transparent),
    radial-gradient(1.1px 1.1px at 500px 340px, rgba(230,185,104,.75), transparent);
  background-size:520px 520px;opacity:.85;
}
.site-bg .stars-3{
  background-image:
    radial-gradient(1.8px 1.8px at 120px 200px, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 620px 120px, rgba(244,208,137,.95), transparent),
    radial-gradient(1.7px 1.7px at 400px 560px, rgba(255,255,255,.9), transparent),
    radial-gradient(1.6px 1.6px at 700px 640px, rgba(255,255,255,.85), transparent);
  background-size:760px 760px;opacity:.9;
}
.site-bg .shooting{
  position:absolute;top:12%;left:-12%;width:170px;height:1.5px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), rgba(244,208,137,.5));
  filter:drop-shadow(0 0 6px rgba(255,255,255,.55));
  opacity:0;transform:rotate(16deg);animation:k-shoot 14s ease-in infinite;
}
@keyframes k-drift1{to{background-position:-320px 320px}}
@keyframes k-drift2{to{background-position:520px 520px}}
@keyframes k-drift3{to{background-position:-760px 380px}}
@keyframes k-twinkle{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes k-shoot{0%{opacity:0;transform:translate(0,0) rotate(16deg)}4%{opacity:1}11%{opacity:0}100%{opacity:0;transform:translate(130vw,42vh) rotate(16deg)}}

/* main-wrap must not paint over the starfield */
.main-wrap{background:transparent}

/* ---------------------------------------------------------
   Preloader — dark, on-brand (main.js fades it out)
   --------------------------------------------------------- */
#preloader{background:var(--k-bg)}
#preloader:before{
  border:6px solid rgba(230,185,104,.18);
  border-top-color:var(--k-crimson);
}

/* ---------------------------------------------------------
   Header / top navigation — glass rail
   --------------------------------------------------------- */
.header-section{
  padding:10px 0;
  background:linear-gradient(180deg, rgba(10,7,11,.92), rgba(10,7,11,.35) 70%, transparent);
  border-bottom:1px solid var(--k-line);
}
.main-menu ul li a{
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--k-muted);
  padding:10px 4px;position:relative;
}
.main-menu ul li a:hover{color:var(--k-gold-2)}
.main-menu ul li a:not(.header-logo)::after{
  content:"";position:absolute;left:4px;right:4px;bottom:2px;height:2px;border-radius:2px;
  background:var(--k-grad-brand);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.main-menu ul li a:not(.header-logo):hover::after{transform:scaleX(1)}
.header-logo{filter:drop-shadow(0 8px 20px rgba(224,38,58,.28))}
.header-logo:hover{filter:drop-shadow(0 8px 26px rgba(224,38,58,.45)) brightness(1.08)}

/* language switch */
.lan-select{
  background:rgba(255,235,215,.05);
  border:1px solid var(--k-line-strong);
  border-radius:12px;padding:5px 10px;
}
.lan-select .nice-select{color:var(--k-text);font-weight:600}
.lan-select .nice-select::after{border-color:var(--k-gold-2)}
.lan-select .nice-select .list{
  background:#12100f;color:var(--k-text);
  border:1px solid var(--k-line-strong);border-radius:12px;
  box-shadow:var(--k-shadow);
}
.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus{
  background:rgba(230,185,104,.14);color:var(--k-gold-2)
}
.offcanvas-open{color:var(--k-gold-2)}
.offcanvas-open:hover{color:var(--k-gold)}

/* ---------------------------------------------------------
   Offcanvas mobile menu
   --------------------------------------------------------- */
.offcanvas-menu .offmenu{
  background:linear-gradient(180deg, rgba(14,10,13,.99), rgba(8,6,9,.99));
  border-right:1px solid var(--k-steel);
  box-shadow:24px 0 60px rgba(0,0,0,.55);
  padding-top:64px;
}
.offcanvas-menu ul li a{
  border-radius:10px;margin:2px 0;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--k-muted);
  border-left:2px solid transparent;transition:.2s ease;
}
.offcanvas-menu ul li a:hover{
  color:var(--k-gold-2);background:rgba(230,185,104,.08);border-left-color:var(--k-crimson)
}
.offcanvas-close{color:var(--k-gold-2)}
.offcanvas-close:hover{color:var(--k-crimson)}
.offcanvas-overlay.active{background:rgba(4,3,6,.72)}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero-section{
  position:relative;border-bottom:1px solid var(--k-line-strong);
  background-blend-mode:normal;
}
.hero-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 12%, rgba(224,38,58,.14), transparent 55%),
    linear-gradient(180deg, rgba(6,6,10,.35) 0%, rgba(6,6,10,.15) 40%, rgba(6,6,10,.92) 100%);
}
.hero-section-inner{position:relative;z-index:1}
.hero-cont1 .single-cont{
  background:linear-gradient(180deg, rgba(18,15,20,.72), rgba(9,8,12,.72));
  border:1px solid var(--k-line-strong);
  border-radius:14px;
  padding:14px 22px 14px 16px !important;
  margin-right:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
}
.hero-cont1 .single-cont::after{display:none !important}
.hero-cont1 .single-cont .txt-c h4{
  font-family:"Cinzel",serif;
  background:var(--k-grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:26px;
}
.hero-cont1 .single-cont .txt-c h3{
  color:var(--k-muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}
.hero-cont1 .single-cont .txt-c h3 .dc{color:var(--k-gold-2)}

/* ---------------------------------------------------------
   Section wrapper / layout
   --------------------------------------------------------- */
.section-wrapper1{
  background:none;
  padding-bottom:90px;
}

/* ---------------------------------------------------------
   Sidebar boxes (.s-box) — presi panel
   Neutralise the legacy frame images & fixed heights.
   --------------------------------------------------------- */
.s-box{
  height:auto !important;
  min-height:0;
  padding:0 !important;
  margin:0 0 34px !important;
  border:1px solid var(--k-steel);
  border-radius:var(--k-radius);
  background:var(--k-panel);
  box-shadow:0 18px 54px rgba(0,0,0,.44);
  overflow:hidden;
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s ease,box-shadow .4s ease;
}
.s-box:hover{
  transform:translateY(-3px);border-color:rgba(230,185,104,.36);
  box-shadow:0 28px 80px rgba(0,0,0,.56), 0 0 40px rgba(224,38,58,.1);
}
.s-box .border-img{display:none !important}
.s-box.s-box-s2{height:auto !important}
.s-box.s-box-s2 .border-img{display:none !important}

/* box header title bar */
.s-box-header{
  position:static !important;margin:0 !important;
  display:block;padding:0;
}
.s-box-header .bg-img{display:none !important}
.s-box-header .header-cont{
  position:static !important;padding:0 !important;width:100%;
}
.s-box-header h3{
  font-family:"Cinzel",serif;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--k-gold-2);
  padding:16px 18px;margin:0;text-align:center;
  border-bottom:1px solid var(--k-line);
  background:linear-gradient(180deg, rgba(224,38,58,.10), rgba(224,38,58,0));
}

/* inner paddings for the box body */
.s-box-form{padding:18px 16px !important;width:100%}
.s-box .server-statistics-table,
.s-box .table-st1-str1,
.s-box .gold-player{margin-left:14px;margin-right:14px}
.s-box .ac-bottom-button{padding:0 14px 18px;margin-top:14px}

/* ---------------------------------------------------------
   Inputs
   --------------------------------------------------------- */
.single-input-x-input,
.form-control,
.form-control:focus,
.form-control:active{
  background:rgba(255,235,215,.04);
  border:1px solid var(--k-line-strong);
  border-radius:11px;
  color:var(--k-text);
  height:44px;
  box-shadow:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.single-input-x-input{padding-left:44px}
.single-input-x-input::placeholder,.form-control::placeholder{color:var(--k-muted-2)}
.single-input-x-input:focus,
.form-control:focus{
  outline:none;border-color:var(--k-gold);
  background:rgba(230,185,104,.06);
  box-shadow:0 0 0 3px rgba(230,185,104,.14);
}
.single-input-x-input-outer .icon{left:14px;filter:saturate(0) brightness(1.4);opacity:.8}
.single-input-x{margin-bottom:12px}

.form-fgt{
  background:rgba(255,235,215,.03);
  border:1px solid var(--k-line);
  border-radius:10px;color:var(--k-muted);box-shadow:none;
  min-height:38px;transition:.2s ease;
}
.form-fgt a:hover{color:var(--k-gold-2)}

/* checkbox */
.checkbox-model::before{border:1px solid var(--k-line-strong);background:rgba(6,5,8,.8)}
.checkbox-model:checked::before{border-color:var(--k-gold)}
.checkbox-model::after{color:var(--k-gold-2)}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.default-button,
button.default-button{
  background:var(--k-grad-brand) !important;
  color:#1a0c05 !important;
  border:0;border-radius:12px;
  font-family:"Inter",sans-serif;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  height:auto;min-height:40px;width:auto;min-width:120px;padding:11px 22px;font-size:12px;
  box-shadow:0 10px 28px rgba(224,38,58,.32);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}
.default-button:hover,
button.default-button:hover{
  transform:translateY(-2px);filter:brightness(1.05) !important;
  box-shadow:0 14px 38px rgba(224,38,58,.46);
}
.submit-button.default-button{width:100%}

/* Bootstrap buttons */
.btn{border-radius:11px;font-weight:700;letter-spacing:.05em;transition:.22s ease}
.btn-danger,
.btn-danger:hover,
.btn-danger:focus{
  background:var(--k-grad-brand) !important;
  border:0 !important;color:#1a0c05 !important;
  box-shadow:0 8px 22px rgba(224,38,58,.3);
}
.btn-danger:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(224,38,58,.44)}
.btn-primary{
  background:rgba(255,235,215,.05);border:1px solid var(--k-line-strong);color:var(--k-gold-2);
}
.btn-primary:hover{background:rgba(230,185,104,.12);border-color:var(--k-gold);color:var(--k-gold-2)}
.btn-success{background:linear-gradient(135deg,#3fae6e,#1f7a49);border:0}
.btn-outline-secondary,.btn-secondary{
  background:rgba(255,235,215,.04);border:1px solid var(--k-line-strong);color:var(--k-text)
}
.btn-outline-secondary:hover,.btn-secondary:hover{background:rgba(230,185,104,.1);color:var(--k-gold-2);border-color:var(--k-gold)}

/* ---------------------------------------------------------
   Tables — legacy sidebar tables
   --------------------------------------------------------- */
.table-st1 tbody tr,
.table-user a{
  background:linear-gradient(90deg, rgba(255,235,215,.05), rgba(255,235,215,.02)) !important;
}
.table-st1 tbody tr:nth-child(odd),
.table-user a:nth-child(odd){
  background:linear-gradient(90deg, rgba(224,38,58,.10), rgba(224,38,58,.02)) !important;
}
.table-st1 table td{color:var(--k-text);font-size:11.5px}
.table-st1 .no{color:var(--k-gold-2);font-weight:800}
.table-st1 .color-lt{color:var(--k-gold-2)}
.emp-1{color:#ff6b6b}.emp-2{color:var(--k-gold-2)}.emp-3{color:#7d8cff}

.table-user a{
  border-radius:9px;margin:3px 0;padding-left:12px;
  color:var(--k-muted);font-weight:600;border-left:2px solid transparent;
  transition:all .2s ease !important;
}
.table-user a:hover{
  color:var(--k-gold-2);filter:none;
  border-left-color:var(--k-crimson);
  background:linear-gradient(90deg, rgba(230,185,104,.14), rgba(230,185,104,.02)) !important;
}
.table-user a.logout:hover{border-left-color:var(--k-crimson);color:#ff8a8a}
.table-user a .column i{color:var(--k-gold-deep);margin-right:6px}

/* statistics rows */
.table-sm-st td{color:var(--k-muted);font-size:12.5px}
.table-sm-st-str1 table td:nth-child(2){color:var(--k-gold-2);font-weight:700}
.table-update-time{
  background:rgba(255,235,215,.04);border:1px solid var(--k-line);
  border-radius:10px;color:var(--k-muted);cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.table-update-time:hover{border-color:var(--k-gold);color:var(--k-gold-2);background:rgba(230,185,104,.1)}
.table-update-time .arrow-r{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.table-update-time:hover .arrow-r{transform:rotate(-180deg)}
.table-update-time:active .arrow-r{transform:rotate(-360deg)}
.table-update-time__outer{border-top:1px solid var(--k-line)}

/* ---------------------------------------------------------
   Top player / guild card
   --------------------------------------------------------- */
.gold-player{
  border-radius:14px;
  background:linear-gradient(135deg, rgba(156,17,32,.42), rgba(9,8,12,.6)) !important;
  border:1px solid rgba(230,185,104,.22);
  box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 0 30px rgba(224,38,58,.08) !important;
}
.gold-player__content h4{color:#fff6ea}
.gold-player__content h4 .yll{color:var(--k-gold-2)}
.gold-player__content h5{color:var(--k-muted)}
.gold-player__content h5 .wht{color:var(--k-gold-2)}

/* ---------------------------------------------------------
   Center column: video + content
   --------------------------------------------------------- */
.m-box{
  background:var(--k-panel);
  color:var(--k-text);
  border-radius:var(--k-radius);
  border:1px solid var(--k-steel);
  overflow:hidden;
}
.home-video{
  background:#050308;border:1px solid var(--k-steel) !important;
  border-radius:var(--k-radius);box-shadow:0 18px 54px rgba(0,0,0,.44);
}

.xy-news-part{
  background:var(--k-panel) !important;
  color:var(--k-text) !important;
  border:1px solid var(--k-steel) !important;
  border-radius:var(--k-radius);
}

/* section / page headers */
.xy-news-header,.page-hd{
  border-bottom:1px solid var(--k-line);
  padding:6px 6px;margin:0 6px;
}
.xy-news-header h3,.pre-social{
  font-family:"Cinzel",serif;
  background:linear-gradient(180deg,#fff6ea 0%,#f4d089 60%,var(--k-gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.04em;
}
.page-hd{background:none !important;justify-content:center;padding:18px 6px}
.pre-social{padding:8px 0}

/* news tabs / ranking tabs */
.xy-nh-ul li a{
  color:var(--k-muted-2);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:22px 3px;border-bottom:2px solid transparent;
}
.xy-nh-ul li a.active,
.xy-nh-ul li a:hover{color:var(--k-gold-2);border-bottom-color:var(--k-crimson)}

/* news article card */
.content-xy .xy-title{
  background:linear-gradient(135deg, rgba(156,17,32,.35), rgba(9,8,12,.55)) !important;
  border:1px solid rgba(230,185,104,.2);
  border-left:3px solid var(--k-crimson) !important;
  border-right:0 !important;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.content-xy .xy-title .left h3{font-family:"Cinzel",serif;font-size:14px;color:#fff6ea}
.content-xy .xy-title .left h3 a{color:#fff6ea}
.content-xy .xy-title .left h3 a:hover{color:var(--k-gold-2)}
.content-xy .xy-title .right ul.xy li{color:var(--k-gold-2);border-right-color:var(--k-line)}
.xy-text-cont p{color:var(--k-muted);font-size:13px;line-height:1.6}
.xy-text-cont p{margin-bottom:12px}

/* ---------------------------------------------------------
   Pagination
   --------------------------------------------------------- */
.pagination ul li a,
.pagination .buttons a,
.pagination .buttons span{
  height:32px;width:32px;border-radius:9px;
  font-size:12px;color:var(--k-muted);
  background:rgba(255,235,215,.05);border:1px solid var(--k-line);transition:.2s ease;
}
.pagination ul li a:hover,
.pagination .buttons a:hover{
  color:var(--k-gold-2);border-color:var(--k-gold);background:rgba(230,185,104,.12)
}
.pagination ul li a.active,
.pagination .buttons span{
  background:var(--k-grad-brand);color:#1a0c05;border-color:transparent;height:32px;
  box-shadow:0 6px 16px rgba(224,38,58,.3)
}

/* ---------------------------------------------------------
   Bootstrap components used across inner pages
   --------------------------------------------------------- */
.table.table-dark,
.table.table-dark>:not(caption)>*>*{
  color:var(--k-text);
}
.table.table-dark>:not(caption)>*>*{background-color:transparent !important;border-bottom:1px solid var(--k-line)}
.table-dark{--bs-table-striped-bg:rgba(224,38,58,.06);--bs-table-bg:transparent}
.table.table-dark thead th{
  font-family:"Cinzel",serif;color:var(--k-gold-2);
  letter-spacing:.06em;text-transform:uppercase;font-size:12px;
  border-bottom:1px solid var(--k-line-strong) !important;
}
.table-hover>tbody>tr:hover>*{background-color:rgba(230,185,104,.08) !important;color:#fff6ea}

/* Champion / Conqueror level badge (ranking) */
.champion-badge{
  display:inline-flex;align-items:center;gap:3px;
  margin-left:6px;padding:2px 8px;border-radius:999px;
  font-family:"Inter",sans-serif;font-size:11px;font-weight:800;line-height:1.4;
  color:#1a0c05;background:var(--k-grad-gold);
  border:1px solid rgba(230,185,104,.5);
  box-shadow:0 3px 10px rgba(224,38,58,.28), inset 0 1px 0 rgba(255,255,255,.35);
  white-space:nowrap;vertical-align:middle;
}

/* Ranking name -> profile link */
.rank-name-link{color:#fff6ea;font-weight:600;transition:color .18s ease}
.rank-name-link:hover{color:var(--k-gold-2)}

/* ---------------------------------------------------------
   Download page — premium download rows
   --------------------------------------------------------- */
.download-page{padding:16px clamp(12px,2.5vw,24px) 10px}
.dl-list{display:flex;flex-direction:column;gap:12px}
.dl-row{
  position:relative;display:flex;align-items:center;gap:16px;overflow:hidden;
  padding:15px 18px;border-radius:15px;
  border:1px solid var(--k-steel);
  background:linear-gradient(180deg, rgba(20,17,22,.92), rgba(9,8,12,.94));
  box-shadow:0 12px 32px rgba(0,0,0,.38);
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.dl-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--k-grad-brand);transform:scaleY(0);transform-origin:top;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.dl-row:hover{
  transform:translateY(-3px);border-color:rgba(230,185,104,.4);
  box-shadow:0 22px 50px rgba(0,0,0,.5), 0 0 34px rgba(224,38,58,.1);
}
.dl-row:hover::before{transform:scaleY(1)}
.dl-row-icon{
  display:grid;place-items:center;width:50px;height:50px;flex-shrink:0;border-radius:13px;font-size:21px;
  color:var(--k-gold-2);background:linear-gradient(135deg, rgba(224,38,58,.22), rgba(230,185,104,.12));
  border:1px solid rgba(230,185,104,.26);box-shadow:inset 0 0 16px rgba(0,0,0,.35);
  transition:transform .3s ease;
}
.dl-row:hover .dl-row-icon{transform:scale(1.06)}
.dl-row-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.dl-row-name{
  font-family:"Cinzel",serif;font-weight:700;font-size:15px;color:#fff6ea;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dl-row-sub{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-muted-2);font-weight:800}
.dl-row-btn{
  flex-shrink:0;display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:12px;background:var(--k-grad-brand);color:#1a0c05;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:12px;
  box-shadow:0 8px 22px rgba(224,38,58,.3);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.dl-row-btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 12px 30px rgba(224,38,58,.44);color:#1a0c05}
.dl-row-btn i{font-size:13px}
@media (max-width:520px){
  .dl-row{flex-wrap:wrap;gap:12px}
  .dl-row-info{flex-basis:calc(100% - 66px)}
  .dl-row-btn{width:100%;justify-content:center}
}

/* Compact champion badge (sidebar players box) */
.champ-mini{
  display:inline-flex;align-items:center;gap:2px;
  margin-left:5px;padding:1px 6px;border-radius:999px;vertical-align:middle;
  font-family:"Inter",sans-serif;font-size:10px;font-weight:800;line-height:1.5;
  color:#1a0c05;background:var(--k-grad-gold);
  box-shadow:0 2px 8px rgba(224,38,58,.28);white-space:nowrap;
}
.gold-player__content .champ-mini{margin-left:6px}

/* ---------------------------------------------------------
   Player profile page
   --------------------------------------------------------- */
.profile-wrap{padding:22px clamp(14px,3vw,30px) 10px}

.profile-hero{
  position:relative;display:flex;align-items:center;gap:clamp(16px,2.6vw,26px);
  padding:clamp(20px,2.6vw,30px);
  border:1px solid var(--k-steel);border-radius:var(--k-radius);overflow:hidden;
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(224,38,58,.20), transparent 52%),
    radial-gradient(80% 120% at 100% 0%, rgba(230,185,104,.08), transparent 60%),
    var(--k-panel);
  box-shadow:0 22px 60px rgba(0,0,0,.5);
}
.profile-hero::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg, transparent, rgba(230,185,104,.6), var(--k-crimson), transparent);
  opacity:.7;
}
.profile-avatar{
  position:relative;width:clamp(72px,11vw,94px);height:clamp(72px,11vw,94px);flex-shrink:0;
  display:grid;place-items:center;border-radius:18px;
  background:linear-gradient(135deg, rgba(224,38,58,.32), rgba(230,185,104,.14));
  border:1px solid rgba(230,185,104,.4);
  box-shadow:0 12px 30px rgba(224,38,58,.34), inset 0 0 28px rgba(0,0,0,.45), 0 0 0 4px rgba(230,185,104,.06);
  overflow:hidden;
}
.profile-avatar img{width:122%;height:122%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.65))}
.profile-idbox{min-width:0}
.profile-name{
  margin:0 0 12px;font-family:"Cinzel",serif;font-weight:800;font-size:clamp(24px,3.6vw,38px);line-height:1.02;
  letter-spacing:.01em;
  background:linear-gradient(180deg,#fff6ea 0%,#f4d089 58%,var(--k-gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(230,185,104,.12);
}
.profile-tags{display:flex;flex-wrap:wrap;gap:8px}
.profile-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.3;
  letter-spacing:.05em;border:1px solid var(--k-line-strong);background:rgba(255,235,215,.05);
}
.profile-tag.lvl-tag{color:var(--k-gold-2)}
.profile-tag.lvl-tag i{color:var(--k-gold-deep)}
.profile-tag.champ-tag{
  color:#1a0c05;background:var(--k-grad-gold);border-color:transparent;
  box-shadow:0 4px 16px rgba(224,38,58,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.profile-tag.emp-tag{background:rgba(224,38,58,.12);border-color:rgba(224,38,58,.3)}
.profile-tag.guild-tag{color:var(--k-gold-2);background:rgba(230,185,104,.1);border-color:rgba(230,185,104,.3)}
.profile-tag.guild-tag i{color:var(--k-gold-deep)}
.profile-tag.emp-1{color:#ff6b6b}
.profile-tag.emp-2{color:var(--k-gold-2)}
.profile-tag.emp-3{color:#8ea0ff}

.profile-grid{
  margin-top:16px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(158px,1fr));
}
.profile-stat{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:11px;
  padding:18px 16px 16px;border-radius:16px;overflow:hidden;
  border:1px solid var(--k-steel);
  background:linear-gradient(180deg, rgba(20,17,22,.92), rgba(9,8,12,.94));
  box-shadow:0 12px 32px rgba(0,0,0,.38);
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.profile-stat::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--k-grad-brand);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.22,1,.36,1);opacity:.85;
}
.profile-stat:hover{
  transform:translateY(-4px);border-color:rgba(230,185,104,.4);
  box-shadow:0 24px 56px rgba(0,0,0,.52), 0 0 38px rgba(224,38,58,.12);
}
.profile-stat:hover::before{transform:scaleX(1)}
.ps-icon{
  display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  font-size:17px;color:var(--k-gold-2);
  background:linear-gradient(135deg, rgba(224,38,58,.22), rgba(230,185,104,.12));
  border:1px solid rgba(230,185,104,.26);
  box-shadow:inset 0 0 14px rgba(0,0,0,.35);
  transition:transform .3s ease;
}
.profile-stat:hover .ps-icon{transform:scale(1.06)}
.ps-val{
  font-family:"Cinzel",serif;font-size:clamp(20px,2.4vw,26px);font-weight:800;color:#fff6ea;line-height:1;
  letter-spacing:.01em;word-break:break-word;
}
.ps-lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-muted-2);font-weight:800}
.profile-stat.ps-gold .ps-icon{color:#1a0c05;background:var(--k-grad-gold);border-color:transparent}
.profile-stat.ps-gold .ps-val{
  background:var(--k-grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}

@media (max-width:575px){
  .profile-hero{flex-direction:column;text-align:center;align-items:center;gap:14px}
  .profile-tags{justify-content:center}
  .profile-grid{grid-template-columns:repeat(2,1fr)}
  .profile-name{margin-bottom:10px}
}

/* Guild avatar (emblem instead of a portrait) */
.profile-avatar--guild{font-size:clamp(30px,4vw,40px);color:var(--k-gold-2)}
.profile-avatar--guild i{filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}

/* Section titles inside profiles */
.profile-section-title{
  display:flex;align-items:center;gap:9px;
  margin:26px 0 12px;font-family:"Cinzel",serif;font-size:16px;font-weight:700;color:#fff6ea;
  letter-spacing:.03em;padding-bottom:10px;border-bottom:1px solid var(--k-line);
}
.profile-section-title i{color:var(--k-gold-deep);font-size:14px}
.profile-section-title .pst-count{
  margin-left:auto;font-family:"Inter",sans-serif;font-size:12px;font-weight:800;
  color:#1a0c05;background:var(--k-grad-gold);border-radius:999px;padding:3px 11px;
}

/* Guild dungeon table */
.profile-table-wrap{overflow-x:auto;border:1px solid var(--k-steel);border-radius:14px;background:var(--k-panel)}
.profile-table{width:100%;border-collapse:collapse;table-layout:auto}
.profile-table th{
  text-align:left;font-family:"Cinzel",serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--k-gold-2);padding:12px 16px;border-bottom:1px solid var(--k-line-strong);white-space:nowrap;
}
.profile-table td{padding:11px 16px;font-size:13px;color:var(--k-text);border-bottom:1px solid var(--k-line)}
.profile-table tbody tr:last-child td{border-bottom:0}
.profile-table tbody tr:hover td{background:rgba(230,185,104,.06)}
.profile-table td:nth-child(2),.profile-table td:nth-child(3),
.profile-table th:nth-child(2),.profile-table th:nth-child(3){text-align:right;color:var(--k-gold-2);font-weight:700}

/* Member grid */
.member-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill, minmax(190px,1fr))}
.member-chip{
  display:flex;flex-direction:column;gap:3px;
  padding:11px 14px;border-radius:12px;
  border:1px solid var(--k-steel);background:linear-gradient(180deg, rgba(20,17,22,.9), rgba(9,8,12,.92));
  border-left:2px solid transparent;
  transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.member-chip:hover{
  transform:translateY(-2px);border-color:rgba(230,185,104,.4);border-left-color:var(--k-crimson);
  background:linear-gradient(180deg, rgba(28,22,26,.95), rgba(12,10,14,.95));
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.member-chip .mc-name{font-weight:700;color:#fff6ea;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-chip .mc-name i{color:var(--k-gold-2);margin-right:2px}
.member-chip .mc-lvl{font-size:11px;color:var(--k-muted-2);letter-spacing:.04em}
.member-chip:hover .mc-name{color:var(--k-gold-2)}
.member-chip.is-leader{border-left-color:var(--k-gold);background:linear-gradient(180deg, rgba(156,17,32,.28), rgba(12,10,14,.92))}
.member-chip.is-leader .mc-name{color:#fff6ea}

.jumbotron,.jumbotron-fluid{
  background:var(--k-panel-soft);
  border:1px solid var(--k-line);border-radius:var(--k-radius);
}

.alert{border-radius:12px;border:1px solid var(--k-line-strong)}
.alert-danger{background:rgba(224,38,58,.12);color:#ffd9dd;border-color:rgba(224,38,58,.4)}
.alert-success{background:rgba(63,174,110,.14);color:#c9ffd9;border-color:rgba(63,174,110,.4)}
.alert-info{background:rgba(230,185,104,.12);color:#ffe9c2;border-color:rgba(230,185,104,.4)}
.alert-warning{background:rgba(201,143,46,.14);color:#ffe0a8;border-color:rgba(201,143,46,.4)}

.list-group-item{
  background:rgba(255,235,215,.03);border:1px solid var(--k-line);color:var(--k-text)
}
.list-group-item.active{background:rgba(224,38,58,.18);border-color:rgba(224,38,58,.4);color:#fff6ea}
.list-group-item:hover,.list-group-item:focus{background:rgba(230,185,104,.08);opacity:1}

.nav-tabs{border-bottom:1px solid var(--k-line-strong)}
.nav-tabs .nav-link{color:var(--k-muted);border-radius:10px 10px 0 0;font-weight:700}
.nav-tabs .nav-link:hover{border-color:transparent;color:var(--k-gold-2)}
.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{
  color:#fff6ea;background:rgba(224,38,58,.18);border-color:var(--k-line-strong) var(--k-line-strong) transparent
}

.card{background:var(--k-panel);border:1px solid var(--k-steel);border-radius:var(--k-radius);color:var(--k-text)}
.modal-content{background:#12100f;border:1px solid var(--k-steel);border-radius:var(--k-radius)}
.modal-header{border-bottom:1px solid var(--k-line)}
.modal-footer{border-top:1px solid var(--k-line)}

/* tag pills seen in some widgets */
.tag{border-radius:999px;padding:4px 10px;font-weight:700}
.tag-danger{background:rgba(224,38,58,.16);color:#ffbfc6}
.tag-info{background:rgba(230,185,104,.16);color:#ffe9c2}

/* generic widgets/mods (donate, referrals, etc.) */
.widget,.widget-container,.mod,.mod-main{
  background:var(--k-panel-soft);border:1px solid var(--k-line);
  border-radius:14px;color:var(--k-text);
}

/* download requirement + create account helper text */
.download-game .title h3,
.download-game-requirement table td,
.account-form-row1 p{color:var(--k-muted)}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.footer-section{
  background:linear-gradient(180deg, rgba(5,4,8,.6), #050408);
  border-top:1px solid var(--k-line);
}
.footer-p{color:var(--k-muted-2)}
.footer-p a{color:var(--k-muted)}
.footer-p a:hover{color:var(--k-gold-2)}
.footer-p .blue-c{color:var(--k-gold-2);font-weight:700}

/* scrollUp button — hide the plugin's "Scroll to top" text, keep only the arrow */
#scrollUp{
  background-image:none !important;
  width:44px;height:44px;border-radius:12px;
  background:rgba(12,9,12,.92) !important;border:1px solid var(--k-line-strong);
  color:transparent !important;
  display:flex !important;align-items:center;justify-content:center;
  font-size:0 !important;line-height:0;text-indent:0;overflow:hidden;
}
#scrollUp::before{
  content:"\2191";font-family:"Inter",sans-serif;font-size:20px;line-height:1;font-weight:800;
  color:var(--k-gold-2);
}
#scrollUp:hover{border-color:var(--k-gold);transform:translateY(-2px)}
#scrollUp:hover::before{color:var(--k-gold)}

/* ---------------------------------------------------------
   Floating Discord widget (injected by kaiyu.js)
   Collapsed round button → hover/tap expands a live card.
   --------------------------------------------------------- */
.k-discord{
  position:fixed;right:20px;bottom:74px;z-index:9990;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  font-family:"Inter",sans-serif;
  pointer-events:none; /* empty area stays click-through; children re-enable */
}
.k-discord__btnwrap{pointer-events:auto}
.k-discord__card{
  width:266px;max-width:calc(100vw - 40px);
  border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg, rgba(18,15,20,.96), rgba(9,8,12,.98));
  border:1px solid var(--k-steel);
  box-shadow:var(--k-shadow), 0 0 40px rgba(224,38,58,.16);
  transform:translateY(14px) scale(.96);opacity:0;pointer-events:none;transform-origin:bottom right;
  transition:opacity .28s ease, transform .28s cubic-bezier(.22,1,.36,1);
}
.k-discord:hover .k-discord__card,
.k-discord.k-open .k-discord__card,
.k-discord:focus-within .k-discord__card{transform:none;opacity:1;pointer-events:auto}

.k-discord__head{
  display:flex;align-items:center;gap:12px;padding:16px 16px 12px;
  background:
    radial-gradient(120% 90% at 20% -10%, rgba(224,38,58,.30), transparent 60%),
    linear-gradient(180deg, rgba(230,185,104,.14), rgba(224,38,58,0));
  border-bottom:1px solid var(--k-line);
}
.k-discord__avatar{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;object-fit:cover;
  background:var(--k-grad-brand);display:grid;place-items:center;
  border:1px solid rgba(230,185,104,.45);box-shadow:0 6px 18px rgba(224,38,58,.4);
}
.k-discord__avatar svg{width:26px;height:26px;fill:#fff}
.k-discord__title{min-width:0}
.k-discord__name{
  font-family:"Cinzel",serif;font-size:15px;font-weight:700;color:#fff6ea;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.k-discord__tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-muted-2);margin-top:2px}

.k-discord__stats{display:flex;gap:10px;padding:14px 16px 4px}
.k-discord__stat{
  flex:1;border:1px solid var(--k-line);border-radius:12px;padding:10px 12px;
  background:rgba(255,235,215,.03);
}
.k-discord__num{display:flex;align-items:center;gap:7px;font-size:17px;font-weight:800;color:#fff6ea;line-height:1}
.k-discord__num .k-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.k-discord__num .k-dot.on{background:#3fae6e;box-shadow:0 0 10px rgba(63,174,110,.8);animation:k-pulseDot 2.4s ease-in-out infinite}
.k-discord__num .k-dot.total{background:var(--k-muted-2)}
.k-discord__lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--k-muted-2);margin-top:6px}

.k-discord__join{
  display:block;margin:12px 16px 16px;text-align:center;
  padding:11px 14px;border-radius:12px;
  background:var(--k-grad-brand);color:#1a0c05;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:12px;
  box-shadow:0 10px 26px rgba(224,38,58,.4);transition:.22s ease;
}
.k-discord__join:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(224,38,58,.55);color:#1a0c05;filter:brightness(1.05)}

.k-discord__btn{
  position:relative;
  width:58px;height:58px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;cursor:pointer;
  background:var(--k-grad-brand);
  border:1px solid rgba(230,185,104,.55);
  box-shadow:0 12px 30px rgba(224,38,58,.5);
  transition:transform .25s ease, box-shadow .25s ease;
}
/* GPU-composited pulse ring (transform+opacity) instead of animating box-shadow */
.k-discord__btn::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(230,185,104,.5);
  animation:k-discordRing 3.2s ease-out infinite;
}
.k-discord__btn svg{width:30px;height:30px;fill:#1a0c05}
.k-discord:hover .k-discord__btn,
.k-discord.k-open .k-discord__btn{transform:scale(1.06)}
.k-discord__badge{
  position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:#3fae6e;color:#fff;font-size:11px;font-weight:800;
  display:grid;place-items:center;border:2px solid #0b0b11;box-shadow:0 0 10px rgba(63,174,110,.7);
}
.k-discord__btnwrap{position:relative}

@keyframes k-discordRing{
  0%{transform:scale(1);opacity:.55}
  70%,100%{transform:scale(1.5);opacity:0}
}
@keyframes k-pulseDot{0%,100%{opacity:1}50%{opacity:.4}}

@media (max-width:575px){
  .k-discord{right:14px;bottom:70px}
  .k-discord__btn{width:52px;height:52px}
  .k-discord__btn svg{width:26px;height:26px}
}
@media (prefers-reduced-motion: reduce){
  .k-discord__btn::after{animation:none;display:none}
  .k-discord__num .k-dot.on{animation:none}
  .k-discord__card{transition:opacity .2s ease}
}

/* ---------------------------------------------------------
   Scroll reveal (classes added by kaiyu.js)
   --------------------------------------------------------- */
/* Animation-based (NOT transition-based) so it never clobbers the card's own
   hover transition. Resting state stays visible; hover stays smooth. */
.k-reveal{opacity:0}
.k-reveal.k-visible{opacity:1;animation:k-revealIn .7s cubic-bezier(.22,1,.36,1)}
@keyframes k-revealIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .k-reveal{opacity:1}
  .k-reveal.k-visible{animation:none}
  .site-bg .stars,.site-bg .shooting{animation:none}
}

/* ---------------------------------------------------------
   Responsive polish
   --------------------------------------------------------- */
@media (max-width:1199px){
  .header-section{padding:12px 0;background:linear-gradient(180deg, rgba(10,7,11,.96), rgba(10,7,11,.7))}
}
@media (max-width:991px){
  .hero-cont1 .single-cont{padding:12px 16px 12px 12px !important;margin-right:10px}
  .hero-cont1 .single-cont .txt-c h4{font-size:20px}
}
@media (max-width:767px){
  section,.section-wrapper1{overflow-x:hidden}
  .hero-cont1{flex-wrap:wrap;gap:10px;justify-content:center}
  .hero-cont1 .single-cont{margin-right:0}
  .s-box{margin-bottom:26px !important}
  .content-xy .xy-title{flex-direction:column;gap:10px;align-items:flex-start}
  .table.table-dark thead th{font-size:11px}
}
@media (max-width:575px){
  .header-section{background:linear-gradient(180deg, rgba(10,7,11,.98), rgba(10,7,11,.92))}
  .main-menu ul li a{font-size:11px}
  .s-box-header h3{font-size:12px;letter-spacing:.16em}
  .default-button,button.default-button{min-width:110px;padding:10px 16px;font-size:11px}
}

/* Never allow a horizontal scrollbar on small screens */
@media (max-width:991px){
  html,body{max-width:100%;overflow-x:hidden}
  .main-wrap,.container,.section-wrapper1,.hero-section{max-width:100%;overflow-x:hidden}
}
