/* ════════════════════════════════════════════════════════════════════════
   PUBGIntel UI layer: Oswald display type + site-wide motion.
   Loaded AFTER each page's inline <style>, so equal-specificity rules here
   win. Pages keep their own layout; this file only restyles type, depth and
   motion. Everything animated is switched off under prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --ui-ease:cubic-bezier(.22,1,.36,1);
  --ui-accent-2:#ffd27a;
  --ui-glow:0 0 0 1px rgba(240,168,48,.38),0 14px 38px -12px rgba(240,168,48,.42);
}

/* ── TYPE ──────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.005em;}
h1{text-transform:uppercase;line-height:1.02 !important;}
.article h1{text-transform:none;}
.article h2,.article h3{font-weight:600;letter-spacing:.01em;}
h1 span{
  background:linear-gradient(100deg,var(--accent) 10%,var(--ui-accent-2) 50%,var(--accent) 90%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--accent);
  animation:ui-sheen 6s ease-in-out infinite;
  filter:drop-shadow(0 0 18px rgba(240,168,48,.28));
}

/* UI chrome (nav, tabs, labels, buttons) moves from mono to Oswald caps */
.nav-link,.nav-dd-toggle,.nav-dd-link{font-family:'Oswald',sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.07em;}
.nav-dd-link{font-size:14px;}
.tab-btn{font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;letter-spacing:.09em;}
.section-label,.page-eyebrow,.header-eyebrow,.article-eyebrow,.step-label,.related-label,.tip-box-label,.panel-title{
  font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.14em;font-size:13px;}
.btn,.btn-ghost,.tg-btn,.armor-btn,.stance-btn,.tier-btn,.hp-btn,.bh-btn,.pill,.class-pill{font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:.06em;}
.pill,.class-pill{font-size:13px;}

/* ── NAV ───────────────────────────────────────────────────────────────── */
body > nav{box-shadow:0 1px 0 rgba(240,168,48,.08),0 10px 30px -18px rgba(0,0,0,.9);}
body > nav::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(240,168,48,.65),transparent);
  background-size:40% 100%;background-repeat:no-repeat;animation:ui-scan 7s linear infinite;}
.nav-link,.nav-dd-toggle,.nav-dd-link{transition:color .2s,background-color .2s,border-color .2s,transform .2s var(--ui-ease);}
.nav-link:hover,.nav-dd-toggle:hover{transform:translateY(-1px);}
.nav-link.active,.nav-dd-toggle.active{box-shadow:0 0 18px -6px rgba(240,168,48,.55);}
.nav-dd-menu{animation:ui-drop .22s var(--ui-ease);backdrop-filter:blur(14px);}
.nav-dd-link:hover{padding-left:18px;}
.nav-logo img{transition:transform .3s var(--ui-ease),filter .3s;}
.nav-logo:hover{opacity:1;}
.nav-logo:hover img{transform:scale(1.03);filter:drop-shadow(0 0 14px rgba(240,168,48,.35));}
@media(max-width:900px){.nav-links.open{animation:ui-fade-down .28s var(--ui-ease);} .nav-dd-link:hover{padding-left:14px;}}
/* Desktop: Oswald at 14.5px is narrower than the old mono, but keep the row honest between 901-1100px */
@media(max-width:1100px) and (min-width:901px){.nav-link,.nav-dd-toggle{font-size:13.5px;padding:9px 11px;}}

/* ── TABS ──────────────────────────────────────────────────────────────── */
.tab-btn{transition:color .2s;}
.tab-btn::after{transition:transform .3s var(--ui-ease),opacity .3s;}
.tab-btn:hover{color:var(--text-primary);}
.tab-panel.active{animation:ui-rise .42s var(--ui-ease);}

/* ── CARDS: depth on hover ─────────────────────────────────────────────── */
.hero-btn,.post-card,.gear-card,.chart-card,.info-card,.stat-card,.weapon-card,.insight-card,.sim-card,
.highlight-card,.hl-card,.vest-card,.bh-card,.cmp-sel-card,.card,.panel{
  transition:transform .32s var(--ui-ease),box-shadow .32s var(--ui-ease),border-color .25s,background-color .25s;}
a.post-card:hover,a.gear-card:hover,a.weapon-card:hover,a.card:hover,.hero-btn:hover{transform:translateY(-4px);box-shadow:var(--ui-glow);}
.chart-card:hover,.info-card:hover,.stat-card:hover,.insight-card:hover,.highlight-card:hover,.hl-card:hover,.weapon-card:hover{border-color:rgba(240,168,48,.35);}
.hero-btn-icon{transition:transform .35s var(--ui-ease);}
.hero-btn:hover .hero-btn-icon{transform:scale(1.1) rotate(-4deg);}
.hero-btn-label{font-size:20px;letter-spacing:.02em;text-transform:uppercase;}

/* ── BUTTONS & CONTROLS ────────────────────────────────────────────────── */
button,.btn,.pill,.class-pill,.tg-btn,.armor-btn,.stance-btn,.tier-btn,.hp-btn,.bh-btn{
  transition:transform .15s var(--ui-ease),background-color .2s,border-color .2s,color .2s,box-shadow .2s;}
button:active,.btn:active,.pill:active,.class-pill:active,.tg-btn:active{transform:scale(.96);}
.pill.active,.class-pill.active{box-shadow:0 0 16px -6px rgba(240,168,48,.6);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}

/* Tables: smooth row highlight */
tbody tr{transition:background-color .18s;}

/* ── SCROLL REVEAL (classes added by pubgintel-ui.js) ──────────────────── */
html.ui-js .ui-reveal{opacity:0;transform:translateY(18px);}
html.ui-js .ui-reveal.ui-in{opacity:1;transform:none;
  transition:opacity .6s var(--ui-ease) var(--ui-d,0ms),transform .6s var(--ui-ease) var(--ui-d,0ms);}

/* Page header entrance */
/* no fill-mode: if a tab paints no frames the header stays visible instead of frozen at opacity 0 */
.page-header,.hero,.article-header,header.page-head{animation:ui-rise .6s var(--ui-ease);}

/* Scrollbars */
*{scrollbar-color:#3a3b40 transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#2c2d33;border-radius:8px;border:2px solid var(--bg-primary,#0c0d10);}
::-webkit-scrollbar-thumb:hover{background:#4a4b52;}
::selection{background:rgba(240,168,48,.35);color:#fff;}

/* ── BREADCRUMB FIX ─────────────────────────────────────────────────────
   Tips posts mark the breadcrumb up as <nav>, so it inherited the header's
   bare `nav{position:sticky;top:0;z-index:1100;...}` and slid over the real
   header while scrolling. Reset it to plain inline text. */
nav.breadcrumb{position:static;z-index:auto;background:none;backdrop-filter:none;border:0;box-shadow:none;}

/* ── SITE LINKS (footer link map on every page) ──────────────────────── */
.site-links{border-top:1px solid var(--border,#22252e);background:linear-gradient(180deg,rgba(255,255,255,.015),transparent);margin-top:56px;position:relative;z-index:1;}
.site-links-inner{max-width:1280px;margin:0 auto;padding:38px 24px 30px;display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:28px;}
.site-links-brand{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--text-secondary,#b6b3ac);font-size:13px;line-height:1.5;max-width:220px;}
.site-links-brand img{height:56px;width:auto;align-self:flex-start;transition:filter .3s;}
.site-links-brand:hover img{filter:drop-shadow(0 0 12px rgba(240,168,48,.35));}
.site-links-col{display:flex;flex-direction:column;gap:2px;}
.site-links-col h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent,#f0a830);margin:0 0 8px;}
.site-links-col a{color:var(--text-secondary,#b6b3ac);text-decoration:none;font-size:13.5px;padding:4px 0;transition:color .15s,transform .15s;width:max-content;max-width:100%;}
.site-links-col a:hover{color:var(--text-primary,#f8f7f4);transform:translateX(3px);}
.site-links-col a[aria-current="page"]{color:var(--accent,#f0a830);}
/* footers that follow it lose their own top margin/border so the two read as one block */
.site-links + footer{margin-top:0 !important;border-top:1px solid var(--border,#22252e) !important;}
/* footer disclaimers are full sentences: body font reads far better than spaced-out mono */
footer p{font-family:'DM Sans',sans-serif !important;letter-spacing:0 !important;line-height:1.6;}
.site-foot{border-top:1px solid var(--border,#22252e);padding:20px 24px;text-align:center;}
.site-foot p{font-size:11.5px;color:var(--text-dim,#807d75);max-width:900px;margin:0 auto;line-height:1.6;}
@media(max-width:900px){.site-links-inner{grid-template-columns:repeat(2,1fr);} .site-links-brand{grid-column:1/-1;max-width:none;flex-direction:row;align-items:center;}}
@media(max-width:420px){.site-links-inner{gap:22px 16px;padding:30px 16px 24px;} .site-links-brand img{height:44px;}}

/* ── BACK TO TOP (added by pubgintel-ui.js on long pages) ─────────────── */
.ui-top{position:fixed;right:18px;bottom:18px;z-index:1050;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(17,19,24,.92);border:1px solid var(--border-light,#2c303c);color:var(--text-primary,#f8f7f4);cursor:pointer;backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s var(--ui-ease),border-color .2s,color .2s;}
.ui-top.show{opacity:1;transform:none;pointer-events:auto;}
.ui-top:hover{border-color:var(--accent,#f0a830);color:var(--accent,#f0a830);}
.ui-top svg{width:18px;height:18px;}
@media print{.ui-top,.site-links{display:none;}}

/* Visually hidden but read by search engines and screen readers */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── KEYFRAMES ─────────────────────────────────────────────────────────── */
@keyframes ui-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes ui-drop{from{opacity:0;translate:0 -8px;}to{opacity:1;translate:0 0;}}
@keyframes ui-fade-down{from{opacity:0;translate:0 -10px;}to{opacity:1;translate:0 0;}}
@keyframes ui-sheen{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
@keyframes ui-scan{from{background-position:-60% 0;}to{background-position:160% 0;}}

@media (prefers-reduced-motion:reduce){
  /* delay must be zeroed too: a delayed 'both'-fill entrance with a ~0 duration
     can stick on its opacity:0 first frame, leaving staggered cards invisible */
  *,*::before,*::after{animation-duration:1ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;
    transition-duration:1ms !important;transition-delay:0s !important;}
  html.ui-js .ui-reveal{opacity:1;transform:none;}
}