/* Runewards — shared styles (tokens, base, header, footer, buttons).
   Transcribed from the design handoff prototypes; values are the spec. */

:root{
  --gold:#F0C000; --gold-core:#E0A000; --bronze:#C06010; --brown:#402010;
  --steel:#305080; --wine:#802020; --purple:#603060; --gem:#2FD4DC;
  --ground:#140A08; --ground2:#1B0F0C; --raised:#241512; --line:#3A2420;
  --ink:#F3E7DC; --ink-dim:#B9A594;
  /* Kompakt first so a licensed drop-in needs no reflow work. */
  --fdisp:"Kompakt","Alegreya SC","Trajan Pro",Georgia,"Times New Roman",serif;
  --fbody:"Public Sans",ui-sans-serif,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --fmono:"IBM Plex Mono",ui-monospace,"SF Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.65 var(--fbody);-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration-color:rgba(240,192,0,.4);text-underline-offset:3px}
a:hover{color:#FFD84A;text-decoration-color:#FFD84A}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
::selection{background:rgba(47,212,220,.3)}

@keyframes rw-in{from{opacity:0;transform:translateY(-10px) scale(.9)}to{opacity:1;transform:none}}
@keyframes rw-breathe{0%,100%{opacity:.5}50%{opacity:.9}}
@keyframes rw-rise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes rw-drift{from{transform:scale(1.12) translate3d(0,0,0)}to{transform:scale(1.22) translate3d(-2.4%,1.6%,0)}}
@keyframes rw-glow{0%,100%{box-shadow:0 0 0 1px rgba(47,212,220,.55),0 12px 34px -12px rgba(47,212,220,.5)}50%{box-shadow:0 0 0 1px rgba(47,212,220,.9),0 16px 46px -12px rgba(47,212,220,.78)}}
@keyframes rw-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rw-ring{0%,100%{box-shadow:0 0 0 0 rgba(240,192,0,.35)}50%{box-shadow:0 0 0 14px rgba(240,192,0,0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

:focus-visible{outline:2px solid var(--gem);outline-offset:3px;border-radius:3px}

/* Skip link */
#__skip{position:fixed;top:8px;left:8px;z-index:100;transform:translateY(-150%);transition:transform .18s;background:var(--gem);color:#08201F;font:700 12px/1 var(--fbody);letter-spacing:.08em;text-transform:uppercase;padding:14px 18px;border-radius:6px;text-decoration:none}
#__skip:focus{transform:none;color:#08201F}

/* ─── Header ─────────────────────────────────────────────── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid var(--line);transition:background .25s,border-color .25s;background:rgba(16,8,6,.4)}
.site-header.is-scrolled,.site-header.menu-open{background:rgba(16,8,6,.92)}
.header-bar{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,40px);height:72px;display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,3vw,38px)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand img{width:38px;height:38px}
.brand span{font:700 17px/1 var(--fdisp);letter-spacing:.13em;color:var(--ink);white-space:nowrap}
.header-nav{display:flex;gap:clamp(12px,2.4vw,28px);align-items:center;flex:1 1 auto;justify-content:flex-end}
.nav-link{font:600 12px/1 var(--fbody);letter-spacing:.11em;text-transform:uppercase;text-decoration:none;padding:8px 0;white-space:nowrap;color:var(--ink);border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
a.nav-link:hover{color:var(--gold);border-bottom-color:rgba(240,192,0,.6)}
.nav-link.is-current{color:var(--gold);border-bottom-color:var(--gold)}
.header-actions{display:flex;align-items:center;gap:10px;flex:none}
.btn-login{min-height:44px;display:flex;align-items:center;padding:0 16px;border:1px solid var(--line);border-radius:5px;font:600 12px/1 var(--fbody);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap}
.btn-signup{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:5px;background:var(--gem);color:#08201F;font:700 12px/1 var(--fbody);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;box-shadow:0 0 0 1px rgba(47,212,220,.5),0 6px 22px -8px rgba(47,212,220,.5)}
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:1px solid var(--line);border-radius:5px;color:var(--ink);cursor:pointer;flex:none}
.menu-btn svg{width:17px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.menu-panel{display:none;border-top:1px solid var(--line);background:rgba(16,8,6,.97);padding:14px clamp(16px,4vw,40px) 20px}
.panel-nav{display:flex;flex-direction:column}
.panel-link{font:600 13px/1 var(--fbody);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:16px 2px;border-bottom:1px solid var(--line);color:var(--ink);transition:color .18s,border-color .18s}
a.panel-link:hover{color:var(--gold);border-bottom-color:rgba(240,192,0,.5)}
.panel-link.is-current{color:var(--gold)}
.panel-actions{display:flex;gap:10px;margin-top:16px;align-items:center}
.panel-login{flex:1 1 auto;text-align:center;min-height:48px;display:flex;align-items:center;justify-content:center;padding:13px 14px;border:1px solid var(--line);border-radius:5px;font:600 12px/1 var(--fbody);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.panel-signup{flex:1 1 auto;text-align:center;min-height:48px;display:flex;align-items:center;justify-content:center;padding:13px 14px;border-radius:5px;background:var(--gem);color:#08201F;font:700 12px/1 var(--fbody);letter-spacing:.09em;text-transform:uppercase;text-decoration:none}
.panel-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-dim)}
/* Solid sticky header variant (inner pages) */
.site-header--solid{position:sticky;background:rgba(16,8,6,.95)}
.site-header--solid.is-scrolled{background:rgba(16,8,6,.95)}
.site-header--solid .nav-link{min-height:44px;display:inline-flex;align-items:center;padding:0}
.site-header--solid .btn-login{transition:border-color .18s,color .18s}
.site-header--solid .btn-login:hover{color:var(--gold);border-color:var(--gold-core)}
.site-header--solid .btn-signup{transition:transform .16s}
.site-header--solid .btn-signup:hover{transform:translateY(-2px);color:#08201F}
.site-header--solid .menu-panel{background:rgba(16,8,6,.98)}
@media (max-width:859.98px){
  .header-nav{display:none}
  .btn-login{display:none}
  .menu-btn{display:inline-flex}
  .site-header.menu-open .menu-panel{display:block}
}

/* ─── Shared section shell ───────────────────────────────── */
.section-inner{max-width:1320px;margin:0 auto;padding:clamp(72px,9vw,130px) clamp(20px,5vw,64px)}
.kicker{margin:0 0 16px;font:600 11px/1 var(--fbody);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-core)}
.h2{margin:0;font:700 clamp(32px,4.4vw,54px)/1.06 var(--fdisp);letter-spacing:.01em;color:var(--ink)}
.band{background:var(--ground2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gold-strong{color:var(--gold);font-weight:600}

/* Ghost action button (bordered, raised background, arrow) */
.btn-ghost{display:inline-flex;align-items:center;gap:9px;padding:15px 22px;border:1px solid var(--line);border-radius:6px;background:rgba(36,21,18,.6);color:var(--ink);font:600 12px/1 var(--fbody);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:transform .16s,border-color .16s}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--gold-core);color:var(--ink)}
.btn-ghost svg{width:13px;height:9px;fill:none;stroke:currentColor;stroke-width:1.7}

/* ─── Footer ─────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--line);background:var(--ground)}
.footer-inner{max-width:1320px;margin:0 auto;padding:clamp(44px,6vw,72px) clamp(20px,5vw,64px)}
.footer-top{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px);justify-content:space-between;align-items:flex-start}
.footer-brand{display:flex;gap:16px;align-items:flex-start;max-width:34ch}
.footer-brand img{width:52px;height:52px;flex:none}
.footer-brand-name{margin:0 0 6px;font:700 16px/1.2 var(--fdisp);letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.footer-brand-desc{margin:0;font-size:13px;line-height:1.6;color:var(--ink-dim)}
.footer-nav{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,64px)}
.footer-col{min-width:120px}
.footer-col-title{margin:0 0 12px;font:600 10px/1 var(--fbody);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.footer-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col a{font-size:13.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(240,192,0,.35);padding-bottom:1px}
.footer-col a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.footer-bottom{margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;align-items:baseline}
.footer-bottom p{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-dim)}