/* ══════════════════════════════════════════════════════════════════════════
   Mexterbot — NIGHT ARCADE SKIN for the blog, the articles and the privacy page.
   Loaded last in <head> on each of those pages, so it wins the cascade over
   the daisyUI CDN theme and the per-page inline <style> blocks. No markup in
   those pages is restructured; this only re-dresses them to match / and /app.
   Palette matches the rest of the site.
   ══════════════════════════════════════════════════════════════════════════ */

:root,[data-theme="night"]{
  /* daisyUI base, retoned to the night arcade (OKLCH triplets). These decide
     every bg-base-*/text-base-content the CDN paints on the privacy page and
     the article shells, so they must move with the palette or that copy goes
     dark-on-dark. */
  --b1:23% 0.09 292;    --b2:20% 0.085 292;    --b3:16% 0.08 292;
  --bc:92% 0.03 300;
  --n:23% 0.09 292;     --nc:92% 0.03 300;
  --p:70% 0.17 45;      --pc:100% 0 0;
  --s:80% 0.14 195;     --sc:18% 0.05 250;
  --a:85% 0.15 95;      --ac:20% 0.06 80;
  --rounded-btn:999px;  --rounded-box:22px;

  --navy:#84724f; --ink:#f9f6f0; --ink-2:#cebea2; --ink-3:#cebea2; --ink-4:#c1ab82;
  --line:#594e39; --line-2:#594d38;
  --orange:#f67c28; --orange-d:#915c3b;
  --azure:#22e8f0;  --azure-d:#0bb6cc;
  --pink:#ff3ea5;   --pink-d:#c41a72;
  --grass:#9bff4d;  --grass-d:#5cc21a;
  --sunny:#f7c644;  --sunny-d:#9a7d3f;
  --grape:#eac880;  --grape-d:#cf9e36;
}

/* ── type: the blog pages force Courier site-wide, so answer it in kind ───── */
*,::before,::after,input,textarea,select,button{
  font-family:'Nunito',ui-rounded,'Segoe UI',system-ui,sans-serif!important}
h1,h2,h3,h4,.nav-label,.chip,.neon-static,.nav-card,.navbar a{
  font-family:'Fredoka','Nunito',sans-serif!important}

/* ── the sky the rest of the site sits on ────────────────────────────────── */
html{scroll-behavior:smooth}
/* short pages (privacy, single articles) otherwise left the grass footer floating
   mid-screen with dead space under it — pin it to the bottom instead */
body{background:transparent!important;color:var(--ink-2);
  min-height:100vh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
body > footer{flex:none}
body::before{
  content:"";position:fixed;inset:0;z-index:-3;
  background:linear-gradient(180deg,#14120e 0%,#342e24 26%,#24211a 58%,#2e2a21 100%)}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.85;
  background-image:radial-gradient(70px 28px at 10% 14%,#2e2a21,transparent 70%),
    radial-gradient(92px 34px at 76% 8%,#2e2a21,transparent 70%),
    radial-gradient(60px 24px at 40% 52%,#2e2a21,transparent 70%),
    radial-gradient(80px 30px at 92% 40%,#2e2a21,transparent 70%),
    radial-gradient(66px 26px at 22% 78%,#2e2a21,transparent 70%)}

/* ── NAVBAR → the HUD bar ────────────────────────────────────────────────── */
.navbar{
  background:#2e2a21!important;backdrop-filter:none!important;
  border:4px solid var(--navy)!important;border-radius:999px!important;
  box-shadow:0 6px 0 var(--navy),0 14px 24px rgba(12,11,8,.18);
  max-width:1120px;margin:14px auto 0;padding:8px 10px 8px 14px;min-height:60px}
.navbar .btn-ghost{background:transparent!important;border:0!important}
.navbar .font-bold{color:var(--ink)!important;font-size:19px;font-weight:600!important}
.navbar a{text-transform:none!important;letter-spacing:0!important}

/* ── BUTTONS → press-down toys ───────────────────────────────────────────── */
.neon-static{
  background:var(--orange)!important;color:#fff!important;
  border:3px solid var(--orange-d)!important;border-radius:999px!important;
  box-shadow:0 5px 0 var(--orange-d)!important;
  padding:12px 22px!important;font-size:13px!important;font-weight:600!important;
  letter-spacing:.02em!important;text-transform:none!important;
  transition:transform .1s ease,box-shadow .1s ease,filter .15s ease!important}
.neon-static:hover{filter:brightness(1.07);background:var(--orange)!important;color:#fff!important;
  box-shadow:0 5px 0 var(--orange-d)!important}
.neon-static:active{transform:translateY(4px);box-shadow:0 1px 0 var(--orange-d)!important}

/* ── BRAND WORDMARK ──────────────────────────────────────────────────────── */
.gradient-text{
  background:none!important;-webkit-background-clip:border-box!important;
  background-clip:border-box!important;color:var(--ink)!important;font-weight:600!important}

/* ── SIDEBAR: article list ───────────────────────────────────────────────── */
.nav-label{color:var(--ink-3)!important;font-weight:900!important;letter-spacing:.14em!important}
.nav-card{
  background:#2e2a21!important;color:var(--ink-2)!important;
  border:2.5px solid var(--line-2)!important;border-radius:16px!important;
  box-shadow:0 3px 0 var(--line-2);padding:11px 13px!important;
  font-size:12.5px!important;font-weight:500!important;letter-spacing:.01em!important;
  transition:transform .14s ease,background .14s ease,border-color .14s ease!important}
.nav-card:hover{background:#433d32!important;color:var(--ink)!important;
  border-color:#84724f!important;box-shadow:0 3px 0 #84724f!important;transform:translateY(-2px)}
.nav-card .dot{width:10px!important;height:10px!important;border:2px solid #fff;
  box-shadow:0 0 0 1.5px rgba(12,11,8,.15)}
/* the current article is marked with an inline background in the markup */
.nav-card[style]{background:var(--orange)!important;color:#fff!important;
  border-color:var(--orange-d)!important;box-shadow:0 3px 0 var(--orange-d)!important}

/* ── ARTICLE CARDS ───────────────────────────────────────────────────────── */
.post{
  background:#2e2a21!important;border:3px solid var(--line-2)!important;border-left-width:9px!important;
  border-radius:22px!important;padding:24px 26px!important;
  box-shadow:0 5px 0 var(--line-2),0 14px 26px rgba(12,11,8,.45),
    0 0 24px rgba(234,200,128,.12)!important;
  scroll-margin-top:96px}
.post h2{color:var(--ink)!important;font-size:1.5rem!important;font-weight:600!important}
/* a heading carrying a strategy accent keeps it — `.post h2` would otherwise
   outrank the bare `.t-*` classes on specificity and flatten them all to navy */
.post h2.t-rules{color:var(--grape)!important}
.post h2.t-const{color:var(--orange)!important}
.post h2.t-simple{color:var(--grass)!important}
.post h2.t-btc{color:#f79d45!important}
.post p{color:var(--ink-2)!important;font-weight:600;line-height:1.7!important;font-size:15px}
.post ul{color:var(--ink-2)!important}
.post li{color:var(--ink-2)!important;font-weight:600;line-height:1.65!important}
.post b,.post strong{color:var(--ink)!important;font-weight:800}

.a-rules  {border-left-color:var(--grape)!important}
.a-const  {border-left-color:var(--orange)!important}
.a-plain  {border-left-color:var(--azure)!important}
.a-emerald{border-left-color:var(--grass)!important}

/* ── CHIPS → neon pills ──────────────────────────────────────────────────── */
.chip{border-radius:999px!important;padding:4px 11px!important;font-size:10px!important;
  font-weight:800!important;border:2px solid transparent}
.c-rules {background:#393328!important;color:var(--grape)!important;border-color:#675a43!important}
.c-const {background:#231b16!important;color:var(--orange)!important;border-color:#4b3b31!important}
.c-simple{background:#0e2f10!important;color:var(--grass)!important;border-color:#2f6b1a!important}
.c-date  {background:#3a352b!important;color:var(--ink-3)!important;border-color:#594e39!important}

/* inline emphasis colours, brightened for the violet-black ground */
.t-rules {color:var(--grape)!important}
.t-const {color:var(--orange)!important}
.t-simple{color:var(--grass)!important}
.t-btc   {color:#f79d45!important}

/* ── page furniture ──────────────────────────────────────────────────────── */
h1{color:var(--ink)!important}
.text-base-content\/30,.text-base-content\/40,.text-base-content\/50,.text-base-content\/60{
  color:var(--ink-3)!important}
a[style*="#f79d45"]{color:var(--orange)!important}
main{position:relative;z-index:1}

/* ── FOOTER → the ground at the bottom of the night ──────────────────────── */
footer{
  background:linear-gradient(180deg,#342e24,#14120e)!important;
  border-top:4px solid var(--grape-d)!important;color:var(--ink-2)!important;
  margin-top:56px;position:relative;z-index:1}
footer p{color:var(--ink-2)!important;font-weight:700}
footer a{color:var(--azure)!important;font-weight:900}

/* ── chunky scrollbars, same as the app ──────────────────────────────────── */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:#3a352b;border-radius:999px}
*::-webkit-scrollbar-thumb{background:#84724f;border-radius:999px;border:2px solid #3a352b;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--azure);background-clip:content-box}

@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

@media(max-width:900px){
  .navbar{margin:10px 12px 0;border-radius:28px!important}
  .post{padding:20px 18px!important;border-left-width:8px!important}
}