/* ══════════════════════════════════════════════════════════════════════════
   MerisBot — 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:68.2028% 0.240124 353.58442;  --pc:100% 0 0;
  --s:61.2257% 0.229402 291.39323;  --sc:96% 0.02 290;
  --a:84.9829% 0.139639 209.39741;  --ac:18% 0.05 250;
  --rounded-btn:6px;    --rounded-box:8px;

  --navy:#5b2fd6; --ink:#f0eaff; --ink-2:#a99ad6; --ink-3:#a99ad6; --ink-4:#8f7fc4;
  --line:#241a52; --line-2:#2e2170;
  --orange:#ff2e97; --orange-d:#b81368;
  --azure:#2ee6ff;  --azure-d:#0eb4d6;
  --pink:#ff3fa4;   --pink-d:#c81f77;
  --grass:#3dff9e;  --grass-d:#16c46f;
  --sunny:#ffd23f;  --sunny-d:#d99a00;
  --grape:#8b5cff;  --grape-d:#5b2fd6;
}

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

/* ── the sky the rest of the site sits on ────────────────────────────────── */
/* The canvas (the area outside the flow, below a short page) takes its colour
   from the root element, NOT from body::before — that layer is position:fixed and
   only ever paints the viewport. Without this, daisyUI's own :root background
   showed through as a band under the footer. */
html{scroll-behavior:smooth;background:#0b0620!important;color-scheme:dark}
/* 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,#0b0620 0%,#1d1150 26%,#150d38 58%,#171040 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%,#171040,transparent 70%),
    radial-gradient(92px 34px at 76% 8%,#171040,transparent 70%),
    radial-gradient(60px 24px at 40% 52%,#171040,transparent 70%),
    radial-gradient(80px 30px at 92% 40%,#171040,transparent 70%),
    radial-gradient(66px 26px at 22% 78%,#171040,transparent 70%)}

/* ── NAVBAR → the HUD bar ────────────────────────────────────────────────── */
.navbar{
  background:#171040!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(5,2,20,.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:#171040!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:#2a1f63!important;color:var(--ink)!important;
  border-color:#5b2fd6!important;box-shadow:0 3px 0 #5b2fd6!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(5,2,20,.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:#171040!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(5,2,20,.45),
    0 0 24px rgba(139,92,255,.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:#ff5fb4!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:#251458!important;color:var(--grape)!important;border-color:#3d2a80!important}
.c-const {background:#2c0f33!important;color:var(--orange)!important;border-color:#7a3a10!important}
.c-simple{background:#0e2f10!important;color:var(--grass)!important;border-color:#2f6b1a!important}
.c-date  {background:#241a56!important;color:var(--ink-3)!important;border-color:#241a52!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:#ff5fb4!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*="#ff5fb4"]{color:var(--orange)!important}
main{position:relative;z-index:1}

/* ── FOOTER → the ground at the bottom of the night ──────────────────────── */
footer{
  background:linear-gradient(180deg,#1d1150,#0b0620)!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:#241a56;border-radius:999px}
*::-webkit-scrollbar-thumb{background:#5b2fd6;border-radius:999px;border:2px solid #241a56;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}
}
