/* PIXEL ORACLE - static */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --bg:#161028; --fg:#f4ecd6;
  --midnight:#161028; --forest:#2c5e3f; --parchment:#f4ecd6;
  --pixel-black:#0a0814; --pixel-gold:#f4c542; --pixel-cyan:#5fd7e6;
  --pixel-purple:#a25fd9; --pixel-red:#e25c3a; --card:#1f1735;
}
*{box-sizing:border-box;border-color:var(--pixel-gold);image-rendering:pixelated;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);font-family:'VT323',monospace;font-size:18px;line-height:1.4;min-height:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{font-family:'Press Start 2P',monospace;letter-spacing:.02em;line-height:1.2}
.font-pixel{font-family:'Press Start 2P',monospace}
.font-rpg{font-family:'VT323',monospace}

.container{max-width:1280px;margin:0 auto;padding:0 16px}
.max-5{max-width:1024px;margin:0 auto;padding:0 16px}
.max-7{max-width:1280px;margin:0 auto;padding:0 16px}

/* Layout */
.app{position:relative;min-height:100vh;display:flex;flex-direction:column;background:var(--midnight);overflow-x:hidden}
.starfield{position:fixed;inset:0;opacity:.6;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, var(--parchment) 1px, transparent 0),
    radial-gradient(1px 1px at 70% 80%, var(--pixel-cyan) 1px, transparent 0),
    radial-gradient(1px 1px at 40% 60%, var(--pixel-gold) 1px, transparent 0),
    radial-gradient(1px 1px at 85% 20%, var(--parchment) 1px, transparent 0),
    radial-gradient(1px 1px at 15% 75%, var(--pixel-cyan) 1px, transparent 0),
    radial-gradient(2px 2px at 55% 15%, var(--pixel-gold) 1px, transparent 0),
    radial-gradient(1px 1px at 90% 55%, var(--parchment) 1px, transparent 0),
    radial-gradient(1px 1px at 30% 90%, var(--pixel-purple) 1px, transparent 0);
  background-size:200px 200px;background-repeat:repeat;animation:scroll-stars 60s linear infinite;
}
@keyframes scroll-stars{from{background-position:0 0}to{background-position:-400px -400px}}
main{position:relative;flex:1;z-index:1}

/* CRT scanlines */
.crt::before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 2px,transparent 2px,transparent 4px);pointer-events:none;z-index:100;mix-blend-mode:multiply}
.crt::after{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.55) 100%);pointer-events:none;z-index:101}

/* Header */
header{position:relative;z-index:50;border-bottom:4px solid var(--pixel-gold);background:var(--pixel-black)}
header .row{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
header .brand{font-family:'Press Start 2P',monospace;color:var(--pixel-gold);font-size:14px;letter-spacing:.15em}
@media(min-width:768px){header .brand{font-size:18px}}
nav.desktop{display:none;gap:4px}
@media(min-width:768px){nav.desktop{display:flex}}
nav.desktop a{font-family:'Press Start 2P',monospace;font-size:10px;padding:8px 12px;color:var(--parchment);transition:.15s}
nav.desktop a:hover,nav.desktop a.active{background:var(--pixel-gold);color:var(--pixel-black)}
.menu-btn{display:block;background:none;border:none;color:var(--pixel-gold);font-family:'Press Start 2P',monospace;font-size:12px;cursor:pointer}
@media(min-width:768px){.menu-btn{display:none}}
.mobile-nav{display:none;border-top:4px solid var(--pixel-gold);background:var(--midnight)}
.mobile-nav.open{display:block}
@media(min-width:768px){.mobile-nav{display:none!important}}
.mobile-nav a{display:block;font-family:'Press Start 2P',monospace;font-size:12px;padding:12px 16px;color:var(--parchment);border-bottom:2px solid var(--forest)}
.mobile-nav a:hover{background:var(--pixel-gold);color:var(--pixel-black)}

/* Footer */
footer{border-top:4px solid var(--pixel-gold);background:var(--pixel-black);margin-top:64px;position:relative;z-index:1}
footer .inner{max-width:1280px;margin:0 auto;padding:32px 16px;text-align:center}
footer p.gold{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--pixel-gold)}
footer p.sub{margin-top:8px;color:rgba(244,236,214,.7);font-size:14px}
footer p.cyan{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--pixel-cyan);margin-top:16px}

/* Pixel borders */
.pixel-border{box-shadow:0 -4px 0 var(--pixel-gold),0 4px 0 var(--pixel-gold),-4px 0 0 var(--pixel-gold),4px 0 0 var(--pixel-gold),0 0 0 8px var(--pixel-black)}
.pixel-border-cyan{box-shadow:0 -4px 0 var(--pixel-cyan),0 4px 0 var(--pixel-cyan),-4px 0 0 var(--pixel-cyan),4px 0 0 var(--pixel-cyan),0 0 0 8px var(--pixel-black)}
.pixel-border-purple{box-shadow:0 -4px 0 var(--pixel-purple),0 4px 0 var(--pixel-purple),-4px 0 0 var(--pixel-purple),4px 0 0 var(--pixel-purple),0 0 0 8px var(--pixel-black)}

.rpg-panel{background:var(--card);border:4px solid var(--pixel-gold);outline:4px solid var(--pixel-black);box-shadow:inset 0 0 0 2px rgba(0,0,0,.4);padding:24px}
@media(min-width:768px){.rpg-panel{padding:40px}}

.pixel-btn{display:inline-block;font-family:'Press Start 2P',monospace;font-size:12px;padding:14px 20px;background:var(--pixel-gold);color:var(--pixel-black);border:4px solid var(--pixel-black);box-shadow:6px 6px 0 var(--pixel-black);cursor:pointer;text-transform:uppercase;transition:transform 80ms steps(2),box-shadow 80ms steps(2);text-align:center}
.pixel-btn:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--pixel-black)}
.pixel-btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--pixel-black)}
.pixel-btn-cyan{background:var(--pixel-cyan)}
.pixel-btn-purple{background:var(--pixel-purple);color:var(--parchment)}
.pixel-btn-red{background:var(--pixel-red);color:var(--parchment)}

/* HP bar */
.hp-bar{background:var(--pixel-black);border:2px solid var(--pixel-gold);height:14px;position:relative;overflow:hidden}
.hp-fill{height:100%;background:repeating-linear-gradient(90deg,var(--pixel-gold) 0 4px,#c9a32f 4px 8px)}
.hp-fill-cyan{background:repeating-linear-gradient(90deg,var(--pixel-cyan) 0 4px,#3da8b6 4px 8px)}
.hp-fill-red{background:repeating-linear-gradient(90deg,var(--pixel-red) 0 4px,#a8341e 4px 8px)}
.hp-fill-purple{background:repeating-linear-gradient(90deg,var(--pixel-purple) 0 4px,#6b3aa8 4px 8px)}

.statrow{display:flex;justify-content:space-between;font-family:'Press Start 2P',monospace;font-size:9px;color:var(--parchment);margin-bottom:4px}
.statrow .val{color:var(--pixel-gold)}

/* Animations */
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.float{animation:float 3s steps(8) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Hero */
.hero{position:relative;min-height:90vh;overflow:hidden;display:flex;align-items:center}
.hero-inner{position:relative;z-index:10;max-width:1024px;margin:0 auto;padding:80px 16px;text-align:center}
.hero h1{font-family:'Press Start 2P',monospace;color:var(--pixel-gold);font-size:20px;line-height:1.3;text-shadow:4px 4px 0 var(--pixel-black),8px 8px 0 var(--pixel-purple)}
@media(min-width:768px){.hero h1{font-size:40px}}
.hero p.lead{font-family:'VT323',monospace;color:var(--parchment);font-size:18px;margin:32px auto 0;max-width:640px}
@media(min-width:768px){.hero p.lead{font-size:24px}}
.hero .quest{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--pixel-cyan);margin-bottom:24px}
@media(min-width:768px){.hero .quest{font-size:12px}}
.hero .ctas{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.hero .start{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--pixel-gold);margin-top:48px}

/* Pixel moon */
.pixel-moon{position:absolute;right:32px;top:32px;display:grid;grid-template-columns:repeat(8,12px);gap:0;z-index:5}
.pixel-moon span{width:12px;height:12px}
@media(max-width:767px){.pixel-moon{right:16px;top:16px;grid-template-columns:repeat(8,8px)}.pixel-moon span{width:8px;height:8px}}

/* Mountains */
.mountains{position:absolute;bottom:0;left:0;width:100%;height:128px;z-index:1}
@media(min-width:768px){.mountains{height:192px}}

/* Section */
.section{position:relative;padding:80px 16px;z-index:1}
.section .head{text-align:center;margin-bottom:48px}
.section .eyebrow{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--pixel-cyan);margin-bottom:12px}
.section h2{font-family:'Press Start 2P',monospace;color:var(--pixel-gold);font-size:18px;text-shadow:3px 3px 0 var(--pixel-black)}
@media(min-width:768px){.section h2{font-size:28px}}
.section .sub{font-family:'VT323',monospace;color:rgba(244,236,214,.8);margin:16px auto 0;max-width:640px}

.grid{display:grid;gap:24px;grid-template-columns:repeat(1,1fr)}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){.grid.x4{grid-template-columns:repeat(4,1fr)}}
.grid-2{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:768px){.grid-2{grid-template-columns:repeat(2,1fr)}}

/* Zodiac card */
.card{position:relative;background:var(--card);padding:20px;margin:8px}
.card .top{display:flex;justify-content:space-between;font-family:'Press Start 2P',monospace;font-size:8px;color:var(--pixel-cyan);margin-bottom:12px}
.card .top .date{color:rgba(244,236,214,.7)}
.card .emoji{text-align:center;font-size:60px;color:var(--pixel-gold);text-shadow:4px 4px 0 var(--pixel-black);line-height:1;margin-bottom:8px}
.card h3{text-align:center;font-family:'Press Start 2P',monospace;font-size:14px;color:var(--pixel-gold)}
.card .cls{text-align:center;font-family:'Press Start 2P',monospace;font-size:8px;color:var(--pixel-cyan);margin-top:4px}
.card .preview{font-family:'VT323',monospace;color:rgba(244,236,214,.9);font-size:14px;border:2px solid var(--forest);padding:8px;background:rgba(10,8,20,.4);min-height:60px;margin:16px 0}
.card .stats{margin:16px 0}
.card .stats .row{margin-bottom:8px}

/* Quest board */
.quest-board{background:var(--card);border:4px solid var(--pixel-gold);outline:4px solid var(--pixel-black);padding:32px}
.quest-board .eyebrow{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--pixel-cyan);margin-bottom:8px}
.quest-board h2{font-family:'Press Start 2P',monospace;font-size:18px;color:var(--pixel-gold);margin-bottom:24px}
@media(min-width:768px){.quest-board h2{font-size:24px}}
.qgrid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:768px){.qgrid{grid-template-columns:repeat(3,1fr)}}
.qcard{display:block;background:var(--pixel-black);border:2px solid var(--pixel-gold);padding:16px;transition:.15s}
.qcard:hover{border-color:var(--pixel-cyan);transform:translateX(4px)}
.qcard .t{font-family:'Press Start 2P',monospace;font-size:12px;color:var(--pixel-gold);margin-bottom:8px}
.qcard p{font-family:'VT323',monospace;font-size:14px;color:rgba(244,236,214,.8)}
.qcard .accept{display:block;margin-top:12px;font-family:'Press Start 2P',monospace;font-size:8px;color:var(--pixel-cyan)}

/* VS */
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.vs .vs-label{text-align:center;font-family:'Press Start 2P',monospace;color:var(--pixel-red);font-size:28px;text-shadow:3px 3px 0 var(--pixel-black)}
@media(min-width:768px){.vs .vs-label{font-size:42px}}
.picker{text-align:center}
.picker .e{font-size:60px;color:var(--pixel-gold);text-shadow:3px 3px 0 var(--pixel-black)}
@media(min-width:768px){.picker .e{font-size:72px}}
.picker .nm{font-family:'Press Start 2P',monospace;font-size:12px;color:var(--pixel-gold);margin-top:8px}
.picker .cls{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--pixel-cyan)}
.picker select{margin-top:16px;width:100%;background:var(--pixel-black);color:var(--parchment);border:2px solid var(--pixel-gold);font-family:'Press Start 2P',monospace;font-size:10px;padding:8px;cursor:pointer}

.result{margin-top:32px}
.result .hdr{text-align:center;margin-bottom:24px}
.result .hdr .lbl{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--pixel-cyan)}
.result .hdr .pct{font-family:'Press Start 2P',monospace;font-size:18px;color:var(--pixel-gold);margin-top:8px}
@media(min-width:768px){.result .hdr .pct{font-size:28px}}
.result .verdict{font-family:'Press Start 2P',monospace;font-size:12px;color:var(--pixel-purple);margin-top:8px}
.result .narration{font-family:'VT323',monospace;color:rgba(244,236,214,.9);margin-top:24px;border-left:4px solid var(--pixel-gold);padding-left:16px}

/* Sign detail */
.sign-hero{display:grid;gap:32px;grid-template-columns:1fr;align-items:center}
@media(min-width:768px){.sign-hero{grid-template-columns:200px 1fr}}
.sign-hero .e{text-align:center;font-size:96px;color:var(--pixel-gold);text-shadow:4px 4px 0 var(--pixel-black);line-height:1}
.sign-hero .lvl{text-align:center;font-family:'Press Start 2P',monospace;font-size:10px;color:var(--pixel-cyan);margin-top:12px}
.sign-hero .cls{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--pixel-cyan);margin-bottom:8px}
.sign-hero h1{font-family:'Press Start 2P',monospace;color:var(--pixel-gold);font-size:24px}
@media(min-width:768px){.sign-hero h1{font-size:36px}}
.sign-hero .dates{font-family:'VT323',monospace;color:rgba(244,236,214,.8);margin-top:8px}
.sign-hero .quote{font-family:'VT323',monospace;color:var(--parchment);font-size:18px;margin-top:16px;border-left:4px solid var(--pixel-gold);padding-left:16px}
.inv li{font-family:'VT323',monospace;color:var(--parchment);margin-bottom:8px;list-style:none}
.inv .v-gold{color:var(--pixel-gold)} .inv .v-cyan{color:var(--pixel-cyan)} .inv .v-purple{color:var(--pixel-purple)}
.qjournal{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.qjournal{grid-template-columns:repeat(2,1fr)}}
.qjournal .item{background:var(--pixel-black);border:2px solid var(--forest);padding:16px}
.qjournal .item .row{display:flex;justify-content:space-between;margin-bottom:8px}
.qjournal .item .lbl{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--pixel-gold)}
.qjournal .item .pct{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--pixel-cyan)}

/* Quest list */
.quest-row{display:flex;flex-direction:column;gap:16px;background:var(--card);border:4px solid var(--pixel-gold);outline:4px solid var(--pixel-black);padding:20px;margin-bottom:16px}
@media(min-width:768px){.quest-row{flex-direction:row;align-items:center}}
.quest-row .num{font-family:'Press Start 2P',monospace;font-size:24px;color:var(--pixel-gold);width:48px;text-align:center}
.quest-row .body{flex:1}
.quest-row .meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:8px}
.quest-row .meta h3{font-family:'Press Start 2P',monospace;font-size:12px;color:var(--pixel-gold)}
.quest-row .meta .diff{font-family:'Press Start 2P',monospace;font-size:8px}
.quest-row .meta .xp{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--pixel-cyan)}
.quest-row .desc{font-family:'VT323',monospace;color:rgba(244,236,214,.9)}
.quest-row .reward{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--pixel-purple);margin-top:8px}
.diff-EASY{color:var(--pixel-cyan)} .diff-NORMAL{color:var(--pixel-gold)} .diff-HARD{color:var(--pixel-red)} .diff-EPIC{color:var(--pixel-purple)} .diff-BOSS{color:var(--pixel-red);animation:blink 1s steps(2) infinite}

/* Articles */
.articles{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:768px){.articles{grid-template-columns:repeat(2,1fr)}}
.articles article{background:var(--card);border:4px solid var(--pixel-gold);outline:4px solid var(--pixel-black);padding:24px}
.articles article.full{grid-column:1/-1}
.articles .chap{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--pixel-cyan);margin-bottom:8px}
.articles h2{font-family:'Press Start 2P',monospace;font-size:14px;color:var(--pixel-gold);margin-bottom:12px}
@media(min-width:768px){.articles h2{font-size:18px}}
.articles .excerpt{font-family:'VT323',monospace;color:rgba(244,236,214,.9);font-size:18px}
.articles .body{font-family:'VT323',monospace;color:rgba(244,236,214,.7);margin-top:16px;border-top:2px solid var(--forest);padding-top:12px}
.articles a.cont{display:inline-block;margin-top:16px;font-family:'Press Start 2P',monospace;font-size:10px;color:var(--pixel-purple)}
.articles a.cont:hover{color:var(--pixel-gold)}

.center{text-align:center}
.mt-10{margin-top:40px}
.mt-8{margin-top:32px}
.mb-6{margin-bottom:24px}
.back{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--pixel-cyan)}
.back:hover{color:var(--pixel-gold)}