/* ══════════════════════════════════════════════════════════════════════════
   KunniBot — 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:#4b2ba8; --ink:#f0eaff; --ink-2:#a99ad6; --ink-3:#a99ad6; --ink-4:#8f7fc4;
  --line:#33246e; --line-2:#2e2170;
  --orange:#ff7a1f; --orange-d:#cc4d00;
  --azure:#22e8f0;  --azure-d:#0bb6cc;
  --pink:#ff3ea5;   --pink-d:#c41a72;
  --grass:#9bff4d;  --grass-d:#5cc21a;
  --sunny:#ffc93c;  --sunny-d:#d99400;
  --grape:#a06bff;  --grape-d:#6a2fd6;
}

/* ── 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,#0b0620 0%,#1d1150 26%,#150d38 58%,#1c1246 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%,#1c1246,transparent 70%),
    radial-gradient(92px 34px at 76% 8%,#1c1246,transparent 70%),
    radial-gradient(60px 24px at 40% 52%,#1c1246,transparent 70%),
    radial-gradient(80px 30px at 92% 40%,#1c1246,transparent 70%),
    radial-gradient(66px 26px at 22% 78%,#1c1246,transparent 70%)}

/* ── NAVBAR → the HUD bar ────────────────────────────────────────────────── */
.navbar{
  background:#1c1246!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:#1c1246!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:#4b2ba8!important;box-shadow:0 3px 0 #4b2ba8!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:#1c1246!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(160,107,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:#ff9d3d!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:#3a1a05!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:#33246e!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:#ff9d3d!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*="#ff9d3d"]{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:#4b2ba8;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}
}
