/* ==========================================================================
   Casino Kompas — Homepage "Unseen"-style theme (scoped to .u-theme ONLY)
   Native reinterpretation of the Unseen Studio aesthetic: near-black canvas,
   DM Mono bracket labels, tall condensed display type, script accents,
   [bracket] links, eyebrow tags. No external assets hotlinked.
   ========================================================================== */

.u-theme{
  --u-bg:#0c1c39;          /* dark blue canvas */
  --u-bg2:#0f2140;
  --u-panel:#12264a;
  --u-deep:#08152c;        /* deepest blue for bars/footer */
  --u-line:rgba(255,255,255,.14);
  --u-line-2:rgba(255,255,255,.24);
  --u-text:#ffffff;        /* white */
  --u-grey:#93a6c0;
  --u-grey-2:#6d84a3;
  --u-yellow:#e8b900;      /* same yellow */
  --u-yellow-light:#f4e6a2;
  --u-red:#e5484d;         /* red accent */
  --u-red-light:#ff6b6f;
  --u-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --u-disp:"Oswald",Impact,"Arial Narrow",sans-serif;
  --u-script:"Dancing Script",cursive;
  background:var(--u-bg);
  color:var(--u-text);
}
.u-theme ::selection{background:var(--u-yellow);color:var(--u-bg)}

/* Typography base */
.u-theme h1,.u-theme h2,.u-theme h3,.u-theme h4{
  font-family:var(--u-disp);color:var(--u-text);
  text-transform:uppercase;letter-spacing:.01em;font-weight:600;line-height:1.02;
}
.u-theme h2{font-size:clamp(2rem,5vw,3.4rem);margin:.2em 0 .4em}
.u-theme h3{font-size:1.4rem;letter-spacing:.02em}
.u-theme p,.u-theme li{color:#d7e0ec}
.u-theme a{color:var(--u-yellow-light)}
.u-theme .t-script{font-family:var(--u-script);text-transform:none;color:var(--u-yellow);font-weight:700;font-style:normal}
.u-theme .disc,.u-theme .lastupd{color:var(--u-grey-2)}

/* Mono eyebrow tags — [like] [this] */
.u-theme .u-eyebrow{
  font-family:var(--u-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--u-grey);display:inline-block;margin-bottom:12px;
}
.u-theme .u-eyebrow b{color:var(--u-yellow);font-weight:500}

/* Bracket links — [X] style */
.u-theme .bracket-link{font-family:var(--u-mono);color:var(--u-grey);text-decoration:none;transition:color .2s}
.u-theme .bracket-link span{color:var(--u-grey-2);transition:color .2s}
.u-theme .bracket-link:hover,.u-theme .bracket-link:hover span{color:var(--u-yellow);text-decoration:none}

/* ---------- Age bar ---------- */
.u-theme .agebar{
  background:var(--u-deep);color:var(--u-grey);font-family:var(--u-mono);
  font-size:.72rem;letter-spacing:.06em;border-bottom:1px solid var(--u-line);
}
.u-theme .agebar strong{color:var(--u-red-light)}
.u-theme .agebar a{color:var(--u-text)}

/* ---------- Header ---------- */
.u-theme .u-header{
  position:sticky;top:0;z-index:60;background:rgba(12,28,57,.92);
  backdrop-filter:blur(8px);border-bottom:2px solid var(--u-yellow);
}
.u-theme .u-header__row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;position:relative}
.u-theme .u-header__code{font-family:var(--u-mono);font-size:.74rem;color:var(--u-grey);letter-spacing:.08em;flex:none}
.u-theme .u-header__logo{
  font-family:var(--u-disp);text-transform:uppercase;font-weight:600;font-size:1.25rem;letter-spacing:.04em;
  color:var(--u-text);text-decoration:none;white-space:nowrap;margin-right:auto;
}
.u-theme .u-header__logo:hover{text-decoration:none;color:var(--u-yellow)}

/* Desktop inline nav (shown on desktop, hidden on mobile) */
.u-theme .u-nav-desk{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.u-theme .u-nav-desk a{font-family:var(--u-mono);font-size:.74rem;letter-spacing:.06em;color:var(--u-grey);text-transform:uppercase;text-decoration:none;transition:color .2s}
.u-theme .u-nav-desk a:hover{color:var(--u-yellow)}

/* Hamburger — 3-bar icon, MOBILE ONLY (hidden on desktop) */
.u-theme .u-nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:40px;background:none;border:0;cursor:pointer;padding:0;z-index:3}
.u-theme .u-nav-toggle span{display:block;width:26px;height:3px;background:var(--u-text);margin:0 auto;transition:transform .2s,opacity .2s}
.u-theme .u-nav-toggle:hover span{background:var(--u-yellow)}
.u-theme .u-nav-toggle.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.u-theme .u-nav-toggle.is-open span:nth-child(2){opacity:0}
.u-theme .u-nav-toggle.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Full grouped nav panel — the mobile hamburger dropdown */
.u-theme .u-nav{
  display:none;position:absolute;top:calc(100% + 2px);right:0;
  min-width:300px;max-width:94vw;max-height:78vh;overflow-y:auto;
  background:var(--u-deep);border:1px solid var(--u-line);
  flex-direction:column;align-items:stretch;gap:0;padding:8px 0;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.u-theme .u-nav.open{display:flex}
.u-theme .u-nav a{font-family:var(--u-mono);font-size:.82rem;letter-spacing:.04em;color:#cdd8e6;text-transform:none;text-decoration:none;padding:10px 24px;transition:background .15s,color .15s}
.u-theme .u-nav a:hover{color:var(--u-yellow);background:rgba(255,255,255,.05)}
.u-theme .u-nav__group{font-family:var(--u-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--u-yellow);padding:14px 24px 5px;border-top:1px solid var(--u-line);margin-top:6px}
.u-theme .u-nav__group:first-of-type{border-top:0;margin-top:2px}
@media(max-width:1040px){
  .u-theme .u-header__logo{position:static;transform:none;margin-right:auto}
  .u-theme .u-header__code{display:none}
}
@media(max-width:900px){
  .u-theme .u-nav-desk{display:none}          /* hide inline nav on mobile */
  .u-theme .u-nav-toggle{display:flex}        /* show hamburger on mobile */
}
@media(max-width:520px){
  .u-theme .u-nav{left:0;right:0;min-width:0;max-width:none}
}

/* ---------- Hero / intro ---------- */
.u-theme .u-hero{
  position:relative;padding:18px 0 clamp(48px,9vh,110px);
  border-bottom:1px solid var(--u-line);overflow:hidden;
}
.u-theme .u-hero__eyebrow{font-family:var(--u-mono);color:var(--u-yellow);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px}
.u-theme .u-hero h1{
  font-family:var(--u-disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(2.8rem,9vw,7rem);line-height:.92;letter-spacing:.005em;color:var(--u-text);margin:0 0 .3em;
}
.u-theme .u-hero h1 .t-script{font-size:1.15em;line-height:0}
.u-theme .u-hero__lead{font-family:var(--u-mono);max-width:640px;color:#c2cfdf;font-size:.98rem;line-height:1.7}
.u-theme .u-hero__meta{margin-top:22px;font-family:var(--u-mono);font-size:.76rem;letter-spacing:.05em;color:var(--u-grey)}
.u-theme .u-hero__meta strong{color:var(--u-red-light)}
.u-theme .u-hero__author{display:inline-flex;align-items:center;gap:12px;margin-top:24px;text-decoration:none;padding:6px 14px 6px 6px;border:1px solid var(--u-line);border-radius:40px;background:rgba(255,255,255,.03);transition:border-color .2s}
.u-theme .u-hero__author:hover{border-color:var(--u-yellow);text-decoration:none}
.u-theme .u-hero__author img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--u-yellow)}
.u-theme .u-hero__author-txt{display:flex;flex-direction:column;font-family:var(--u-mono);line-height:1.35}
.u-theme .u-hero__author-txt strong{color:var(--u-text);font-size:.9rem}
.u-theme .u-hero__author-txt span{color:var(--u-grey);font-size:.72rem}
.u-theme .u-scroll{margin-top:40px;display:flex;flex-direction:column;gap:4px;font-family:var(--u-mono);color:var(--u-grey);font-size:.78rem}
.u-theme .u-scroll b{color:var(--u-yellow-light);font-weight:500}
.u-theme .u-scroll .arrow{color:var(--u-yellow);animation:u-bounce 1.6s infinite}
@keyframes u-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- Sections ---------- */
.u-theme main section{padding:0}
.u-theme .section,.u-theme section.section{padding:clamp(40px,7vh,80px) 0;border-bottom:1px solid var(--u-line)}
.u-theme .section-white{background:var(--u-bg2)}
.u-theme .prose p,.u-theme .prose li{color:#cdd8e6}
.u-theme .pill{background:var(--u-yellow);color:var(--u-bg);font-family:var(--u-mono);letter-spacing:.06em}

/* ---------- Operator cards ---------- */
.u-theme .op-card{
  background:var(--u-panel);border:1px solid var(--u-line);border-radius:4px;box-shadow:none;
}
.u-theme .op-card.top::before{background:var(--u-yellow)}
.u-theme .op-rank{font-family:var(--u-mono);color:var(--u-grey);font-size:1rem}
.u-theme .op-rank::before{content:"["}.u-theme .op-rank::after{content:"]"}
.u-theme .op-card.top .op-rank{color:var(--u-yellow)}
.u-theme .op-body h3{font-family:var(--u-disp);color:var(--u-text);letter-spacing:.02em}
.u-theme .op-body .rating,.u-theme .op-body .bonus{color:#c2cfdf}
.u-theme .stars{color:var(--u-yellow)}
.u-theme .oplogo{border-radius:4px;font-family:var(--u-disp)}
.u-theme .tag{background:#16305c;color:var(--u-yellow-light);border:1px solid var(--u-line);font-family:var(--u-mono);font-size:.66rem;letter-spacing:.04em}
.u-theme .op-cta .score{font-family:var(--u-disp);color:var(--u-yellow)}
.u-theme .op-cta .score small{color:var(--u-grey-2);font-family:var(--u-mono)}

/* ---------- Operator card — mobile: vertical stacked layout ---------- */
@media(max-width:720px){
  .u-theme .op-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:20px 16px}
  .u-theme .op-rank{align-self:center;font-size:.9rem}
  .u-theme .oplogo{width:72px;height:72px;margin:0 auto}
  .u-theme .op-body{width:100%}
  .u-theme .op-body h3{font-size:1.25rem;line-height:1.15;margin:0}
  .u-theme .op-body .rating{font-size:.82rem;justify-content:center}
  .u-theme .op-body .bonus{font-size:.9rem;margin-top:4px}
  .u-theme .op-body .feats{justify-content:center;gap:6px;margin-top:8px}
  .u-theme .op-body .tag{font-size:.64rem;padding:3px 9px}
  .u-theme .op-cta{width:100%;flex-direction:column;align-items:center;gap:8px;margin-top:4px}
  .u-theme .op-cta .score{font-size:1.6rem}
  .u-theme .op-cta .btn{width:100%}
}

/* Buttons */
.u-theme .btn-cta{background:var(--u-yellow);color:var(--u-bg);box-shadow:none;font-family:var(--u-mono);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;border-radius:3px}
.u-theme .btn-cta:hover{background:var(--u-yellow-light)}
.u-theme .btn-gold{background:var(--u-yellow);color:var(--u-bg)}

/* ---------- Comparison table ---------- */
.u-theme table.cmp{background:var(--u-panel);border:1px solid var(--u-line);box-shadow:none;color:#d7e0ec;border-radius:4px}
.u-theme table.cmp th{background:var(--u-deep);color:var(--u-yellow-light);font-family:var(--u-mono);letter-spacing:.05em;text-transform:uppercase;font-size:.74rem}
.u-theme table.cmp td{border-bottom:1px solid var(--u-line)}
.u-theme table.cmp tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.u-theme table.cmp .brand-cell{color:var(--u-text);font-family:var(--u-disp);letter-spacing:.02em}

/* ---------- Cards grid ---------- */
.u-theme .card{background:var(--u-panel);border:1px solid var(--u-line);box-shadow:none;border-radius:4px}
.u-theme a.card:hover{border-color:var(--u-yellow);text-decoration:none}
.u-theme .card h3{font-family:var(--u-disp);color:var(--u-text)}
.u-theme .card .ico{background:#16305c;color:var(--u-yellow)}
.u-theme .card p{color:#b8c5d6}

/* ---------- Callouts ---------- */
.u-theme .callout{background:var(--u-panel);border-left:4px solid var(--u-yellow);border-radius:0 4px 4px 0;color:#d7e0ec}
.u-theme .callout.info{border-color:var(--u-yellow-light);background:#0f2140}
.u-theme .callout.warn{border-color:var(--u-red);background:#2a1220}
.u-theme .callout h4{color:var(--u-text);font-family:var(--u-disp)}

/* ---------- FAQ ---------- */
.u-theme .faq details{background:var(--u-panel);border:1px solid var(--u-line);border-radius:4px}
.u-theme .faq summary{color:var(--u-text);font-family:var(--u-disp);letter-spacing:.02em;text-transform:uppercase;font-size:1.02rem}
.u-theme .faq summary::after{color:var(--u-yellow)}
.u-theme .faq details[open] summary{border-bottom:1px solid var(--u-line)}
.u-theme .faq details p{color:#cdd8e6}

/* ---------- Author box & RG strip ---------- */
.u-theme .authorbox{background:var(--u-panel);border:1px solid var(--u-line);box-shadow:none;border-radius:4px}
.u-theme .authorbox .avatar{background:#16305c;color:var(--u-yellow);font-family:var(--u-disp)}
.u-theme .authorbox .meta strong{color:var(--u-text)}
.u-theme .authorbox .meta .role{color:var(--u-grey)}
.u-theme .rg-strip{background:var(--u-deep);border:1px solid var(--u-line);color:#c2cfdf;border-radius:4px}
.u-theme .rg-strip strong{color:var(--u-yellow)}
.u-theme .rg-strip .logos{color:var(--u-text);font-family:var(--u-mono);font-size:.8rem}

/* ---------- Footer ---------- */
.u-theme .site-footer{background:var(--u-deep);color:var(--u-grey);border-top:1px solid var(--u-line);margin-top:0}
.u-theme .site-footer h4{color:var(--u-text);font-family:var(--u-disp);text-transform:uppercase;letter-spacing:.04em}
.u-theme .site-footer a{color:var(--u-grey)}
.u-theme .site-footer a:hover{color:var(--u-yellow)}
.u-theme .footer-bottom{border-top:1px solid var(--u-line);color:var(--u-grey-2);font-family:var(--u-mono);font-size:.72rem}
.u-theme .footer-18{background:#d64545}

/* ---------- Sub-page shared components (hero / crumbs / toc / legacy header) ---------- */
.u-theme .site-header{background:rgba(12,28,57,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--u-line);position:sticky;top:0;z-index:60}
.u-theme .brand{color:var(--u-text);font-family:var(--u-disp)}
.u-theme .brand .mark{background:var(--u-yellow);color:var(--u-bg)}
.u-theme .brand small{color:var(--u-grey);font-family:var(--u-mono);text-transform:none;letter-spacing:.02em}
.u-theme .nav a{color:var(--u-grey);font-family:var(--u-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.u-theme .nav a:hover{color:var(--u-yellow)}
.u-theme .nav-toggle{color:var(--u-text)}

.u-theme .hero{padding:6px 0 40px;background:linear-gradient(160deg,var(--u-bg) 0%,var(--u-panel) 100%);color:var(--u-text);border-bottom:1px solid var(--u-line)}
.u-theme .hero .pill{display:inline-block;margin-bottom:12px}
.u-theme .hero h1{
  font-family:var(--u-disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(2.8rem,9vw,7rem);line-height:.92;letter-spacing:.005em;color:var(--u-text);margin:0 0 .3em;
}
.u-theme .hero .lead{color:#cdd8e6;font-family:var(--u-mono)}
.u-theme .hero .meta{color:var(--u-grey);font-family:var(--u-mono)}
.u-theme .hero .meta strong{color:var(--u-red-light)}
.u-theme .lead{color:#cdd8e6}

.u-theme .crumbs{color:var(--u-grey);font-family:var(--u-mono);font-size:.74rem;letter-spacing:.04em}
.u-theme .crumbs a{color:var(--u-grey)}
.u-theme .crumbs a:hover{color:var(--u-yellow)}

.u-theme .toc{background:var(--u-panel);border:1px solid var(--u-line);border-radius:4px}
.u-theme .toc a{color:var(--u-yellow-light)}
.u-theme .btn-ghost{border-color:var(--u-line-2);color:var(--u-text)}

.u-theme img.oplogo{object-fit:cover;background:#fff}

.u-theme .cmp .tlogo{width:26px;height:26px;border-radius:5px;vertical-align:middle;margin-right:8px;display:inline-block;background:#fff}

.u-theme img.avatar{object-fit:cover}

/* ============================================================
   Mobile hero compaction — placed LAST so it overrides the
   base .u-hero / .hero padding rules above.
   Goal: H1 + author + first H2 + affiliate table above the fold.
   ============================================================ */
@media(max-width:640px){
  .u-theme .u-hero{padding:10px 0 14px !important}
  .u-theme .u-hero__eyebrow{margin-bottom:8px;font-size:.72rem}
  .u-theme .u-hero h1,.u-theme .hero h1{font-size:2rem;line-height:1.06;margin:0 0 .2em}
  .u-theme .u-hero__lead,.u-theme .hero .lead{display:none}
  .u-theme .u-hero__meta{margin-top:10px;font-size:.72rem}
  .u-theme .u-hero__author{margin-top:12px;padding:5px 12px 5px 5px}
  .u-theme .u-hero__author img{width:44px;height:44px}
  .u-theme .hero{padding:12px 0 16px}
  .u-theme .hero .pill{margin-bottom:8px}
  .u-theme .hero .meta{margin-top:10px}
  .u-theme .section,.u-theme section.section{padding-top:18px;padding-bottom:28px}
  .u-theme .lastupd{margin-bottom:2px;font-size:.72rem}
  .u-theme .u-eyebrow{margin-bottom:6px}
}