/* ═══════════════════════════════════════════════════════════
   NOOTEN BASE — shared fonts + backdrop + nav for the static pages
   Deploy to: /var/www/shared/base.css
   Served at: https://nootenhome.com/shared/base.css
   Used by: index.html (home) and nootenhome_news.html (news).
   The forum has its own boards.css (same look, same fonts).

   Requires the self-hosted font files at /var/www/shared/fonts/
   (the same woff2 files the forum already serves from its /fonts/).
═══════════════════════════════════════════════════════════ */

/* ── SELF-HOSTED FONTS ──────────────────────────────────────
   Replaces the old Google Fonts <link> + cdnfonts @import so the
   pages don't depend on third-party font CDNs. */
@font-face{font-family:'Poppins';src:url('fonts/poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('fonts/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('fonts/poppins-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Noto Sans JP';src:url('fonts/notojp-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Noto Sans JP';src:url('fonts/notojp-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Noto Sans JP';src:url('fonts/notojp-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'DotGothic16';src:url('fonts/dotgothic16.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'VCR OSD Mono';src:url('fonts/vcr.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}

.kanji{font-family:'DotGothic16',sans-serif !important;}
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --vcr:'VCR OSD Mono','Poppins',monospace;
  --blue:#6ea8ff;--pink:#ff4fd8;--purple:#b56bff;
  --dim:#9db7ff;--bg:#050b14;
  --panel:rgba(10,15,25,0.72);--border:rgba(255,255,255,0.06);
}
body{font-family:'Poppins','Noto Sans JP',sans-serif;background:var(--bg);color:#e6eefc;min-height:100vh;overflow-x:hidden;position:relative;}

/* Backdrop base. The detailed neon skyline is injected by nooten-ui.js
   (#nooBg) and recolors per theme; this is just the dark vignette behind
   it, and a no-JS fallback. nooten-ui.js also overrides this !important. */
body::before{content:"";position:fixed;inset:0;z-index:-4;
  background:radial-gradient(ellipse at 50% 6%,transparent,color-mix(in srgb,var(--bg) 74%,transparent) 92%);}

/* .clouds + body::after scanlines + their keyframes now live in nooten-ui.js —
   it's the single owner of all ambient/decorative layers, perf-gated by
   data-perf so home and forum can't drift apart again. (AUDIT §5.1/§6a) */

/* ── NAV ─────────────────────────────────────────────────── */
.nav{position:sticky;top:0;backdrop-filter:blur(14px);background:rgba(5,10,18,0.6);padding:16px 24px;border-bottom:1px solid var(--border);z-index:200;}
.nav-inner{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.logo{font-family:var(--vcr);font-weight:800;letter-spacing:2px;color:#eaf2ff;text-decoration:none;animation:logoFlicker 4s infinite;text-shadow:0 0 10px rgba(120,200,255,0.6),0 0 25px rgba(120,200,255,0.35);font-size:clamp(14px,2vw,18px);flex-shrink:0;}
.logo .kanji{color:var(--blue);text-shadow:0 0 12px rgba(110,168,255,0.8),0 0 22px rgba(255,255,255,0.25);}
@keyframes logoFlicker{0%,100%{opacity:1;}90%{opacity:1;}91%{opacity:0.7;}92%{opacity:1;}94%{opacity:0.4;}96%{opacity:1;}}
.links{display:flex;align-items:center;}
.links a{color:#cfe0ff;margin-left:18px;text-decoration:none;font-size:14px;transition:color 0.2s;}
.links a:hover{color:var(--blue);}
.links a.active{color:var(--pink);border-bottom:1px solid var(--pink);padding-bottom:2px;}
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:7px 9px;cursor:pointer;flex-shrink:0;}
.nav-hamburger span{display:block;width:18px;height:2px;background:var(--dim);border-radius:2px;transition:all 0.25s;}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-drawer{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:199;background:rgba(5,10,18,0.97);backdrop-filter:blur(20px);flex-direction:column;padding:80px 28px 28px;gap:6px;overflow-y:auto;}
.nav-drawer.open{display:flex;}
.nav-drawer a{color:#cfe0ff;text-decoration:none;font-size:18px;font-weight:600;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.06);}
.nav-drawer a.active{color:var(--pink);}

/* ── MODAL ───────────────────────────────────────────────── */
/* Single shared modal look for index.html + nootenhome_news.html (was
   byte-duplicated in both pages' inline <style>). Stays mounted with
   display:flex always and animates via opacity/visibility/transform so
   open/close can fade+scale instead of snapping — toggle the "open"
   class, nothing else. */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.82);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity 0.22s ease,visibility 0.22s ease;}
.modal.open{opacity:1;visibility:visible;}
.modal-box{max-width:900px;width:100%;background:linear-gradient(180deg,rgba(17,23,38,0.98),rgba(9,13,22,0.98));padding:24px;border-radius:16px;color:#e6eefc;border:1px solid rgba(110,168,255,0.22);max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.55),0 0 40px rgba(110,168,255,0.1);transform:scale(0.94) translateY(10px);transition:transform 0.24s cubic-bezier(.2,.8,.3,1.1);}
.modal.open .modal-box{transform:scale(1) translateY(0);}
.modal-close{float:right;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);color:#e6eefc;padding:5px 13px;border-radius:20px;cursor:pointer;font-family:var(--vcr);font-size:10px;letter-spacing:1.5px;transition:all 0.2s;}
.modal-close:hover{background:rgba(255,79,216,0.16);border-color:var(--pink);color:var(--pink);box-shadow:0 0 12px rgba(255,79,216,0.25);}
@media (max-width:768px){.modal-box{padding:16px;border-radius:12px;}.modal-box iframe{height:220px !important;}}
@media (prefers-reduced-motion: reduce){.modal,.modal-box{transition:none;}}

/* ── ANIME SPOTLIGHT ─────────────────────────────────────── */
/* Was news-page-only inline CSS; now shared so the homepage can mount
   the same widget (see NootenUI.mountSpotlight in nooten-ui.js). */
.anime-spotlight{margin-top:10px;background:rgba(255,255,255,0.03);border-radius:10px;border:1px solid var(--border);overflow:hidden;position:relative;}
.spotlight-hdr{display:flex;justify-content:space-between;align-items:center;padding:9px 12px 0;}
.spotlight-lbl{font-family:var(--vcr);font-size:9px;color:var(--purple);letter-spacing:2px;opacity:.8;}
.spotlight-roll{font-family:var(--vcr);font-size:8px;color:var(--dim);letter-spacing:1px;background:none;border:1px solid rgba(255,255,255,0.08);border-radius:4px;padding:3px 7px;cursor:pointer;transition:all 0.2s;}
.spotlight-roll:hover{background:rgba(181,107,255,0.12);color:var(--purple);border-color:rgba(181,107,255,0.3);}
.spotlight-roll.spinning{animation:rollSpin 0.4s linear infinite;}
@keyframes rollSpin{from{opacity:1;}50%{opacity:0.2;}to{opacity:1;}}
.spotlight-img-wrap{position:relative;width:100%;height:140px;overflow:hidden;margin-top:8px;}
.spotlight-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s ease;}
.spotlight-img-wrap:hover .spotlight-img{transform:scale(1.04);}
.spotlight-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,10,20,0.92) 0%,rgba(5,10,20,0.2) 60%,transparent 100%);}
.spotlight-score{position:absolute;top:8px;right:8px;font-family:var(--vcr);font-size:10px;background:rgba(0,0,0,0.75);color:#ffd700;padding:3px 7px;border-radius:5px;letter-spacing:1px;}
.spotlight-body{padding:8px 12px 12px;}
.spotlight-title{font-size:12px;font-weight:700;color:#e6eefc;line-height:1.3;margin-bottom:4px;cursor:pointer;transition:color 0.2s;}
.spotlight-title:hover{color:var(--blue);}
.spotlight-meta{font-family:var(--vcr);font-size:9px;color:var(--dim);letter-spacing:1px;opacity:.6;margin-bottom:6px;}
.spotlight-synopsis{font-size:11px;color:#cce0ff;line-height:1.5;opacity:.75;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.spotlight-mal-btn{display:inline-block;margin-top:8px;font-family:var(--vcr);font-size:9px;padding:4px 10px;border-radius:5px;background:rgba(110,168,255,0.12);border:1px solid rgba(110,168,255,0.25);color:var(--blue);text-decoration:none;letter-spacing:1px;transition:all 0.2s;}

/* reduced-motion handling for clouds/scanlines is centralized in nooten-ui.js */