/* ===================================================================
   Book of Treasures — Responsive UI
   - Mobile-first, fluid type/spacing
   - Full-bleed hero background
   - Overlay player + 18+ age gate
   - Strict "pro" footer
=================================================================== */

/* -------------------------------------------------------------------
   1) THEME TOKENS
------------------------------------------------------------------- */
:root{
  /* palette */
  --bg:#0a0a1a; --bg-2:#0b0b2a;
  --card:#121233; --line:#1f1f4a;
  --accent:#ffd36b; --danger:#ff6b6b;
  --text:#e7e7ff; --muted:#a3a3c2;

  /* component accents */
  --badge-bg:#fb0000; --badge-fg:#000000;

  /* layout */
  --container:1100px;
  --gutter:clamp(12px,3vw,24px);

  /* type scale (fluid) */
  --fz-1:clamp(12px,0.85rem,14px);
  --fz-2:clamp(14px,1rem,16px);
  --fz-3:clamp(16px,1.1rem,18px);
  --fz-4:clamp(18px,1.25rem,20px);
  --fz-h1:clamp(26px,6vw,42px);
  --fz-h2:clamp(20px,3.6vw,28px);
}

/* -------------------------------------------------------------------
   2) BASE / RESET
------------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--bg);
}
/* block background scroll when drawers/overlays open (modern) */
html:has(#menuPanel.open),
html:has(#overlay.open){overflow:hidden}
html.no-scroll, html.no-scroll body{overflow:hidden} /* JS fallback */

body{
  margin:0; min-height:100svh;
  font:400 var(--fz-2)/1.6 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); -webkit-tap-highlight-color:transparent;
  overflow-x:hidden; position:relative;
}
/* One-true gradient background */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
  background-repeat:no-repeat;
}
@supports not (height:1svh){ body{min-height:100vh;} }

img,svg,video,canvas{max-width:100%; height:auto; display:block}

/* Links */
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* -------------------------------------------------------------------
   3) LAYOUT HELPERS
------------------------------------------------------------------- */
.container{max-width:var(--container); margin:0 auto; padding:0 var(--gutter)}
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){ .grid.cols-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){  .grid.cols-3{grid-template-columns:1fr} }

/* -------------------------------------------------------------------
   4) COMPONENTS
------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:12px;
  padding:12px 16px; min-height:44px; cursor:pointer;
  background:var(--accent); color:#231500; font-weight:700;
  font-size:var(--fz-3); transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:#1b1b44; color:var(--text); border-color:#2e2e68}

.badge{
  border:1px solid var(--line);
  padding:6px 10px; border-radius:999px;
  background:var(--badge-bg); color:var(--badge-fg);
  font-size:var(--fz-1);
}

.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px}
.section{padding:32px 0}
.notice{font-size:var(--fz-1); color:var(--muted)}

.kpis{display:flex; gap:16px; flex-wrap:wrap}
.kpis .kpi{flex:1 1 160px; background:#0f0f29; border:1px solid var(--line); border-radius:16px; padding:12px}
.kpi b{font-size:clamp(18px,3.6vw,22px)}

/* -------------------------------------------------------------------
   5) HEADER (one-line mobile layout)
------------------------------------------------------------------- */
.header{
  position:sticky; top:0; z-index:40;
  background:rgba(10,10,26,.75); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.header__bar{
  display:flex; align-items:center; justify-content:flex-start;
  gap:clamp(6px,2.2vw,12px); padding:10px 0;
}
.brand{display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0}
.brand img{height:clamp(24px,4.5vw,36px); width:auto}
.brand .title{
  font-size:clamp(14px,3.8vw,18px); font-weight:700; letter-spacing:.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw;
}
.nav{display:flex; align-items:center; gap:clamp(6px,2vw,12px); flex:0 0 auto; flex-wrap:nowrap}
.header .btn{padding:clamp(8px,1.8vw,12px) clamp(10px,2.6vw,14px); min-height:40px; border-radius:12px; font-size:clamp(13px,3.4vw,16px); line-height:1}
.header .btn.secondary{background:#1b1b44; color:var(--text); border-color:#2e2e68}
@media (max-width:380px){ .brand .title{max-width:40vw} }
@media (max-width:330px){
  .header__bar{gap:6px} .nav{gap:6px}
  .header .btn{padding:8px 10px; min-height:38px}
  .brand img{height:24px} .brand .title{max-width:36vw}
}

/* -------------------------------------------------------------------
   6) HERO (title + CTA) + FULL-BLEED BACKGROUND
------------------------------------------------------------------- */
.hero{padding:clamp(28px,7vw,56px) 0 24px; border-bottom:1px solid var(--line)}
.h1{font-size:var(--fz-h1); line-height:1.12; margin:6px 0 10px}
.punch{color:var(--muted); max-width:60ch; font-size:var(--fz-3)}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

/* split layout */
.hero__wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
@media (max-width:900px){ .hero__wrap{grid-template-columns:1fr} }

/* full-screen hero block */
.hero--full{min-block-size:100svh; display:grid; align-items:center; position:relative; overflow:hidden; padding-block:clamp(24px,6vw,48px)}
.hero--full>.hero__wrap{position:relative; z-index:2}

/* background image layer */
.hero--bg::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--hero-bg); background-size:cover; background-position:var(--hero-pos,50% 40%); background-repeat:no-repeat;
  filter:var(--hero-filter,none); transform:translateZ(0);
}
/* readability veil */
.hero--bg::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.10) 35%, rgba(0,0,0,.38) 100%);
  mix-blend-mode:multiply;
}
/* tone presets */
.hero--bg-dark{ --hero-filter:brightness(.55) contrast(1.05) saturate(1.05) }
.hero--bg-light{--hero-filter:brightness(1.15) contrast(1.02) saturate(1.02) }
/* mobile crop */
@media (max-width:900px){ .hero--bg{ --hero-pos:50% 30% } }
/* optional text pad on noisy bg */
.hero__content{
  background: color-mix(in oklab, rgba(12,12,30,0) 70%, rgba(12,12,30,.50) 30%);
  backdrop-filter: blur(2px);
  padding: clamp(8px,2vw,12px); border-radius:14px; display:inline-block;
}
/* stretch hero to full viewport width */
.hero--bleed{width:100vw; margin-inline:calc(50% - 50vw); position:relative}
.hero--bleed .hero__wrap{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}

/* hero art */
.hero__art{display:grid; place-items:center}
.hero__art img{max-width:min(90%,560px); filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}
@media (max-width:900px){ .hero__art img{max-width:min(80%,440px)} }

/* -------------------------------------------------------------------
   7) ABOUT SECTION
------------------------------------------------------------------- */
.section--about .about__grid{
  display:grid; gap:clamp(16px,3vw,24px);
  grid-template-columns:.9fr 1.1fr; align-items:center;
}
@media (max-width:960px){ .section--about .about__grid{grid-template-columns:1fr} }
.section--about .about__art{display:grid; place-items:center}
.section--about .about__art img{max-width:min(90%,520px); filter:drop-shadow(0 10px 30px rgba(0,0,0,.25))}

.specs{display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:10px 0 8px}
@media (max-width:720px){ .specs{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .specs{grid-template-columns:1fr} }
.spec{background:#0f0f29; border:1px solid var(--line); border-radius:12px; padding:10px}
.spec span{display:block; color:var(--muted); font-size:var(--fz-1)}
.spec b{font-size:var(--fz-3)}
.howto{margin:0; padding-left:18px}
.howto em{font-style:normal; color:var(--text)}

/* -------------------------------------------------------------------
   8) RESPONSIBLE GAMING SECTION (image left → text right)
------------------------------------------------------------------- */
.section--rg .rg__wrap{
  display:grid; gap:clamp(12px,2.5vw,24px);
  grid-template-columns:.9fr 1.1fr; align-items:start; position:relative;
}
.section--rg .rg__art{grid-column:1; display:grid; place-items:center}
.section--rg .rg__art img{
  max-width:min(100%,420px); height:auto; display:block;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.25)); opacity:.95;
}
.section--rg .rg__heading,
.section--rg .rg__body{grid-column:2}
.section--rg .rg__heading{display:flex; align-items:center; gap:10px; margin:0 0 10px}
.section--rg .rg__body{display:grid; gap:12px}
.section--rg .rg__list{margin:0; padding-left:18px}
@media (max-width:960px){
  .section--rg .rg__wrap{grid-template-columns:1fr}
  .section--rg .rg__heading, .section--rg .rg__body, .section--rg .rg__art{grid-column:1}
  .section--rg .rg__art img{max-width:min(80%,340px); margin-inline:auto}
}
/* 18+ badge (shared) */
.age-badge{
  display:inline-grid; place-items:center;
  width:clamp(28px,4.5vw,34px); height:clamp(28px,4.5vw,34px);
  border-radius:999px; background:var(--danger); color:#fff; font-weight:800;
  font-size:clamp(12px,2.8vw,14px); line-height:1;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 6px 18px rgba(255,0,0,.18);
}

/* -------------------------------------------------------------------
   9) FOOTER — "PRO" STYLE
------------------------------------------------------------------- */
.footer{color:var(--muted)}
.footer--pro{
  margin-top:clamp(28px,6vw,48px);
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
.footer__topline{
  height:1px; margin-bottom:clamp(16px,3vw,24px);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}
.footer__wrap{
  display:grid; gap:clamp(16px,3vw,24px);
  grid-template-columns:1.4fr 1fr 1fr; align-items:start;
}
@media (max-width:900px){ .footer__wrap{grid-template-columns:1fr 1fr} .footer__about{grid-column:1/-1} }
@media (max-width:640px){ .footer__wrap{grid-template-columns:1fr} }

.footer__title{margin:0 0 8px; color:var(--text); font-weight:700; font-size:clamp(14px,2.8vw,16px)}
.brand--footer{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none}
.brand--footer img{height:28px; width:auto}
.brand--footer .title{font-weight:700; font-size:clamp(14px,2.8vw,16px)}
.footer__disclaimer{margin:10px 0 0; font-size:clamp(12px,2.6vw,14px); line-height:1.7}

.footer__rg-links{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.rg-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; min-height:36px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14); background:transparent;
  color:var(--text); font-weight:600; font-size:clamp(12px,2.6vw,14px);
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.rg-ghost:hover{border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.04); transform:translateY(-1px)}
.rg-ghost:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.footer__menu ul{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.footer__menu a{color:var(--text); text-decoration:none; padding:6px 0; border-radius:8px}
.footer__menu a:hover{text-decoration:underline}

.footer__bottom{margin-top:clamp(12px,2.5vw,18px); padding-top:clamp(12px,2.5vw,18px); border-top:1px solid rgba(255,255,255,.08)}
.footer__bottom small{display:block; font-size:clamp(11px,2.4vw,13px)}

/* -------------------------------------------------------------------
   10) OVERLAY GAME PLAYER
------------------------------------------------------------------- */
#overlay{
  position:fixed; inset:0; z-index:1000; display:none;
  background:rgba(5,5,20,.9); backdrop-filter:blur(2px);
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
}
#overlay.open{display:flex; align-items:center; justify-content:center}

.player{
  position:relative; width:min(96vw,1200px); height:min(90vh,800px);
  background:#000; border-radius:16px; overflow:hidden; border:1px solid var(--line);
}
.player iframe{width:100%; height:100%; display:block; border:0}

.player .bar{
  position:absolute; inset:auto 0 0 0; display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:rgba(0,0,0,.4); padding:8px 10px; padding-bottom:calc(8px + env(safe-area-inset-bottom)); font-size:var(--fz-1);
}
.player .controls{display:flex; gap:8px}
.iconbtn{border:1px solid #333; background:#111; color:#fff; border-radius:10px; padding:10px 14px; cursor:pointer; min-height:40px; font-size:var(--fz-2)}
.iconbtn:hover{background:#222}
.close-x{
  position:absolute; top:calc(8px + env(safe-area-inset-top)); right:calc(8px + env(safe-area-inset-right));
  background:#111; border:1px solid #333; color:#fff; border-radius:999px; width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
}
@media (max-width:640px){
  #overlay.open{padding:0}
  .player{width:100vw; height:100svh; border-radius:0; border:none}
  .player .bar{font-size:var(--fz-2)}
  .close-x{width:44px; height:44px}
}

/* -------------------------------------------------------------------
   11) MOBILE DRAWER MENU
------------------------------------------------------------------- */
#menuPanel{
  position:fixed; inset:0 0 0 auto; width:min(94vw,360px);
  background:#0f0f2b; border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .2s ease; z-index:800;
  display:flex; flex-direction:column; overflow:auto; padding-bottom:env(safe-area-inset-bottom);
}
#menuPanel.open{transform:none}
#menuBackdrop{position:fixed; inset:0; background:rgba(0,0,0,.3); display:none; z-index:700}
#menuBackdrop.open{display:block}
#menuPanel a{padding:14px 16px; border-bottom:1px solid var(--line); font-size:var(--fz-3)}

/* -------------------------------------------------------------------
   12) COOKIE NOTICE
------------------------------------------------------------------- */
.cookie{
  position:fixed; inset:auto var(--gutter) var(--gutter) var(--gutter);
  background:#0f0f29; border:1px solid var(--line); border-radius:14px; padding:12px;
  z-index:1200; display:none; max-width:min(680px, calc(var(--container) - 2*var(--gutter)));
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.cookie.show{display:block}
.cookie .row{display:flex; gap:8px; justify-content:flex-end; margin-top:8px; flex-wrap:wrap}
.cookie .btn{padding:10px 12px}
@media (max-width:600px){
  .cookie{inset:auto var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom)) var(--gutter)}
  .cookie .row{justify-content:stretch} .cookie .btn{flex:1 0 120px}
}

/* -------------------------------------------------------------------
   13) AGE GATE MODAL (18+)
------------------------------------------------------------------- */
.age-modal{
  position:fixed; inset:0; z-index:1200; display:none; place-items:center;
  background:rgba(5,5,20,.65); backdrop-filter:blur(2px);
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.age-modal.open{display:grid}
.age-modal[hidden]{display:none!important}
.age-modal__panel{width:min(92vw,520px); border-radius:16px; padding:16px; position:relative}
.age-modal__head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.age-modal__actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:8px}
.age-modal .close-x{position:absolute; top:8px; right:8px; background:#111; border:1px solid #333; color:#fff; border-radius:999px; width:36px; height:36px; display:grid; place-items:center; cursor:pointer}

/* -------------------------------------------------------------------
   14) TYPO UTILS & ACCESSIBILITY
------------------------------------------------------------------- */
.h2{font-size:var(--fz-h2); margin:0 0 10px}
p,li,small{overflow-wrap:anywhere; word-break:break-word}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}
/*=================================================*/
/* ===== Site Entry Gate ===== */
.entry-modal{
  position:fixed; inset:0; z-index:1400; display:none; place-items:center;
  background:rgba(5,5,20,.78);
  backdrop-filter: blur(3px) saturate(1.05);
  padding:max(16px,env(safe-area-inset-top))
          max(16px,env(safe-area-inset-right))
          max(16px,env(safe-area-inset-bottom))
          max(16px,env(safe-area-inset-left));
}
.entry-modal.open{ display:grid; }
.entry-modal[hidden]{ display:none !important; }
.entry-modal__panel{ width:min(92vw,520px); border-radius:16px; padding:16px; }
.entry-modal__actions{ display:flex; gap:10px; justify-content:flex-end; }

/* блокируем и приглушаем фон, пока окно открыто */
.gate-pending body{ overflow:hidden; }
.gate-pending #entryGate{ display:grid !important; }
.gate-pending body > *:not(#entryGate){
  filter: blur(6px) brightness(.45);
  pointer-events:none; user-select:none;
}