:root {
  
  --bg:           #0d0a05;
  --panel:        #1c130a;
  --panel2:       #241a0e;
  --line:         #3a2c18;
  --line-soft:    rgba(254, 197, 89, .08);

  
  --ink:          #f2e9da;
  --mut:          #b3a58c;
  --heading:      #fdf3e3;

  
  --brand:        #fec559;
  --brand2:       #c6921f;
  --on:           #241505;
  --brand-grad:   linear-gradient(135deg, #ffdb8a, #c6921f);
  --glow:         0 0 0 1px rgba(254,197,89,.35), 0 8px 26px -8px rgba(254,197,89,.45);

  
  --panel-grad:   linear-gradient(160deg, #231708, #160e04);
  --panel-grad2:  linear-gradient(160deg, #2b1d0c, #1a1006);

  
  --shadow:       0 6px 18px -8px rgba(0, 0, 0, .7);
  --shadow-lg:    0 16px 40px -14px rgba(0, 0, 0, .8);

  
  --ok:           #34d399;
  --warn:         #fbbf24;
}


.lib {
  background:
    radial-gradient(900px 420px at 70% -110px, rgba(254,197,89,.10), transparent 60%),
    radial-gradient(700px 480px at -5% 5%, rgba(227,0,2,.06), transparent 55%),
    var(--bg);
}


.lh.sticky {
  background: rgba(13, 10, 5, .90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(254, 197, 89, .18);
}


.drawer {
  background: linear-gradient(180deg, #1c130a, #0d0a05);
}


body.drawer-open {
  overflow: hidden;
}


@media (max-width: 640px) {
  .sticky-cta {
    background: rgba(13, 10, 5, .97);
    border-top-color: rgba(254, 197, 89, .22);
    box-shadow: 0 -8px 24px -10px rgba(254, 197, 89, .12), 0 -2px 0 rgba(254, 197, 89, .08);
  }
}


.lh .logo img,
.lf-logo img,
.drawer .logo img {
  aspect-ratio: 310 / 296;
  width: auto;
}

.lh .lh-main .logo img { max-height: 52px; }
.lf-logo img { width: 84px; height: auto; }
.drawer .logo img { max-height: 44px; }


.btn-main {
  background: var(--brand-grad);
  color: var(--on);
  border-color: transparent;
  box-shadow: 0 6px 18px -6px rgba(254, 197, 89, .5);
}

.btn-main:hover {
  background: linear-gradient(135deg, #ffe6ab, #d9a530);
  box-shadow: 0 0 0 1px rgba(254,197,89,.55), 0 12px 30px -8px rgba(254,197,89,.6);
  transform: translateY(-2px);
}

.lib a.btn-main,
.lib a.btn-main:hover {
  color: var(--on);
}


.lib a.btn:not(.btn-main):hover {
  color: var(--brand);
  background: rgba(254,197,89,.10);
}


.h2, .read h2 {
  color: var(--heading);
}
.h2 {
  border-left-color: var(--brand);
  background: linear-gradient(90deg, rgba(254,197,89,.10), transparent 40%);
}
.read h3, .box h3, .card .t, .subcards .box h3 {
  color: var(--brand);
}


.h1 {
  color: var(--brand);
  background: linear-gradient(92deg, #ffe6ab 0%, #fec559 45%, #c6921f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .h1 {
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(254,197,89,.16));
}


.hero {
  background:
    radial-gradient(900px 360px at 75% -60px, rgba(254,197,89,.20), transparent 60%),
    radial-gradient(600px 300px at 0% 120%, rgba(227,0,2,.10), transparent 55%),
    var(--panel-grad2);
}


.card:hover {
  border-color: rgba(254,197,89,.4);
}

.box:hover {
  border-color: rgba(254,197,89,.35);
}

.gcard:hover {
  border-color: rgba(254,197,89,.5);
  box-shadow: var(--glow);
}


.tabs .tab.on {
  background: var(--brand-grad);
  color: var(--on);
  box-shadow: 0 6px 16px -6px rgba(254,197,89,.5);
}

.tabs .tab:hover {
  border-color: var(--brand);
  color: var(--brand);
}


.acc details[open],
.faq details[open] {
  border-color: rgba(254,197,89,.4);
}

.acc summary::after,
.acc details[open] summary::after,
.faq summary::after,
.faq details[open] summary::after {
  color: var(--brand);
}


.steps li::before {
  background: var(--brand-grad);
  color: var(--on);
  box-shadow: 0 4px 12px -4px rgba(254,197,89,.6);
}


.toc a:hover {
  color: var(--brand);
}


.pager a:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(254,197,89,.06);
}


.filter .chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}


.lf {
  background: linear-gradient(180deg, #170f06, #0a0603);
}

.lf h4 {
  color: var(--brand);
}

.lf a:hover {
  color: var(--brand);
}


.lh nav a:hover {
  color: var(--brand);
}

.lh nav a::after {
  background: var(--brand);
}

.lh .logo {
  color: var(--heading);
}

.lh .burger {
  color: var(--brand);
}


.cta-block {
  background:
    radial-gradient(400px 120px at 50% -20px, rgba(254,197,89,.16), transparent),
    var(--panel-grad2);
  border-color: rgba(254,197,89,.25);
}


.tbl th {
  color: var(--brand);
}

.tbl .rank,
.tbl .star {
  color: var(--brand);
}


.trust span::before {
  color: var(--brand);
}



.arc-grid-3 .card .thumb,
.grid-3 .card .thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.arc-grid-3 .card .thumb img,
.grid-3 .card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.arc-row:hover {
  border-color: rgba(254,197,89,.35);
}


.lf-badges img[alt^="18+"] {
  background: #fff;
  border-radius: 8px;
  padding: 3px;
}


* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}




.home-side { position: sticky; top: 80px; display: grid; gap: 16px; align-self: start; }
@media (max-width: 1024px) { .home-side { position: static; } }


.kho-game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 12px 0; }
@media (max-width: 900px) { .kho-game-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kho-game-grid { grid-template-columns: 1fr; } }


.side-list { display: grid; gap: 10px; }
.side-item {
  display: flex; gap: 10px; background: var(--panel-grad); border: 1px solid var(--line);
  border-radius: var(--rad); padding: 9px; transition: border-color var(--ease), box-shadow var(--ease);
}
.side-item:hover { border-color: rgba(254, 197, 89, .4); box-shadow: var(--shadow); }
.side-item .thumb { flex: 0 0 74px; width: 74px; height: 74px; border-radius: 8px; overflow: hidden; background: var(--panel2); }
.side-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.side-item .body { min-width: 0; }
.side-item .t {
  font-weight: 700; color: var(--heading); font-size: 13px; line-height: 1.35; margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.side-item .d {
  color: var(--mut); font-size: 11.5px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}


@media (max-width: 640px) {

  .lh .lh-main .logo img {
    max-height: 38px;
  }

  .wrap {
    padding: 0 14px;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .hero {
    overflow-x: hidden;
    max-width: 100vw;
  }

  section {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .h2 {
    font-size: clamp(17px, 4.5vw, 22px);
  }

  
}