/* ==========================================================
   STILLHOOD ($STILL) — 16-bit RPG landing
   Pure CSS, no build step.
   ========================================================== */

:root{
  --night:#0a1410;
  --night-2:#0e1c15;
  --panel:#12261c;
  --panel-2:#0c1a13;
  --border:#f4ecd8;
  --green:#3fbf50;
  --green-dk:#1d6b2b;
  --lime:#8fe34a;
  --gold:#ffcc33;
  --gold-dk:#c98a12;
  --red:#e03a2f;
  --cream:#f4ecd8;
  --muted:#9db08f;
  --sky-1:#0a1024;
  --sky-2:#132a3a;
  --px: 4px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:96px}

body{
  margin:0;
  background:var(--night);
  color:var(--cream);
  font-family:'VT323', 'Courier New', monospace;
  font-size:23px;
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:none;
}

img{max-width:100%; display:block; image-rendering:pixelated; image-rendering:crisp-edges}

h1,h2,h3,.px{font-family:'Press Start 2P', 'VT323', monospace; line-height:1.6; letter-spacing:.5px}

a{color:var(--gold); text-decoration:none}

kbd{
  font-family:'Press Start 2P',monospace; font-size:9px; background:#000;
  border:2px solid var(--cream); padding:3px 6px; color:var(--cream)
}

/* ---------- global overlays ---------- */
.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:9000;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply; opacity:.55;
}

.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 30px);
  background:#000; border:3px solid var(--gold); color:var(--gold);
  font-family:'Press Start 2P',monospace; font-size:10px; padding:14px 18px;
  z-index:9500; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  box-shadow:0 0 0 3px #000;
}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ---------- title screen ---------- */
.title-screen{
  position:fixed; inset:0; z-index:9800; background:#050a08;
  display:flex; align-items:center; justify-content:center; text-align:center;
  transition:opacity .35s ease;
}
.title-screen.hidden{opacity:0; pointer-events:none}
.ts-inner{padding:24px; max-width:560px}
.ts-cat{width:150px; margin:0 auto 20px; animation:bob 1.6s steps(2,end) infinite}
.ts-logo{
  font-size:clamp(26px,7vw,54px); margin:0; color:var(--green);
  text-shadow:0 4px 0 var(--green-dk), 0 8px 0 #000;
}
.ts-ticker{font-family:'Press Start 2P',monospace; font-size:14px; color:var(--gold); margin:18px 0 6px}
.ts-sub{font-family:'Press Start 2P',monospace; font-size:9px; color:var(--muted); margin:0 0 34px; letter-spacing:2px}
.ts-start{
  font-family:'Press Start 2P',monospace; font-size:12px; color:var(--cream);
  background:none; border:none; cursor:pointer; padding:10px;
  animation:blink 1s steps(2,end) infinite;
}
.ts-copy{font-family:'Press Start 2P',monospace; font-size:7px; color:#3f5a45; margin-top:40px}

@keyframes blink{50%{opacity:0}}
@keyframes bob{50%{transform:translateY(-8px)}}

/* ---------- HUD ---------- */
.hud{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  background:#0a1410;                 /* solid — never backdrop-filter (breaks fixed children) */
  border-bottom:4px solid var(--cream);
  box-shadow:0 4px 0 #000;
}
.hud-inner{
  max-width:1240px; margin:0 auto; padding:8px 16px;
  display:flex; align-items:center; gap:16px;
}
.hud-char{display:flex; align-items:center; gap:10px; flex-shrink:0}
.portrait-mini{
  width:44px; height:44px; border:3px solid var(--cream); background:#000;
  display:block; overflow:hidden; flex-shrink:0;
}
.portrait-mini img{width:100%; height:100%; object-fit:cover; object-position:center 18%}
.hud-meta{display:flex; flex-direction:column; gap:4px}
.hud-name{font-family:'Press Start 2P',monospace; font-size:9px; color:var(--cream)}
.hud-bar{display:block; width:86px; height:9px; background:#3a0d0d; border:2px solid var(--cream)}
.hud-bar i{display:block; height:100%; background:linear-gradient(#ff6b5e,#c81f14)}

.hud-gold{
  display:flex; align-items:center; gap:7px; flex-shrink:0;
  font-family:'Press Start 2P',monospace; font-size:10px; color:var(--gold);
}
.coin{
  width:13px; height:13px; background:var(--gold); border:2px solid var(--gold-dk);
  border-radius:50%; box-shadow:inset -3px -3px 0 rgba(0,0,0,.25);
  animation:spinCoin 1.4s steps(4,end) infinite;
}
@keyframes spinCoin{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.25)}}
.gold-label{color:var(--gold-dk)}

.menu{margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.menu a{
  font-family:'Press Start 2P',monospace; font-size:9px; color:var(--cream);
  padding:6px 2px; position:relative;
}
.menu a:hover{color:var(--gold)}
.menu a:hover::before{content:'\25B6'; position:absolute; left:-13px; color:var(--gold)}
.menu .menu-buy{color:#0a1410; background:var(--gold); padding:8px 12px; box-shadow:3px 3px 0 var(--gold-dk)}
.menu .menu-buy:hover{color:#0a1410; background:#ffe066}
.menu .menu-buy:hover::before{display:none}

.sound-btn{
  font-family:'Press Start 2P',monospace; font-size:9px; cursor:pointer;
  background:#000; color:var(--muted); border:2px solid var(--muted); padding:8px 10px; flex-shrink:0;
}
.sound-btn.on{color:var(--lime); border-color:var(--lime)}

.burger{display:none; background:none; border:none; cursor:pointer; padding:8px; flex-shrink:0}
.burger span{display:block; width:26px; height:4px; background:var(--cream); margin:4px 0}

/* ---------- world / hero ---------- */
.world{
  position:relative; min-height:100vh; padding:130px 16px 90px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; isolation:isolate;
}
.sky{position:absolute; inset:0; background:linear-gradient(#060a18 0%, var(--sky-1) 38%, var(--sky-2) 78%, #1d3a30 100%); z-index:-6}
.moon{
  position:absolute; top:9%; right:11%; width:76px; height:76px; background:#f7f3d8;
  border-radius:50%; box-shadow:0 0 0 10px rgba(247,243,216,.09), 0 0 60px 18px rgba(247,243,216,.14);
}
.moon::after{content:''; position:absolute; top:16px; left:14px; width:18px; height:18px; background:#ded9bd; border-radius:50%; box-shadow:26px 18px 0 -4px #ded9bd, 8px 40px 0 -7px #ded9bd}
.stars{position:absolute; inset:0}
.stars i{position:absolute; width:3px; height:3px; background:#fff; animation:twinkle 3s steps(2,end) infinite}
@keyframes twinkle{50%{opacity:.15}}

.hills{position:absolute; left:-5%; right:-5%; z-index:-5}
.hills-far{
  bottom:16%; height:220px; background:#12332a;
  clip-path:polygon(0 100%,0 62%,9% 40%,18% 58%,27% 30%,37% 52%,47% 26%,58% 50%,68% 34%,79% 56%,90% 38%,100% 60%,100% 100%);
}
.hills-near{
  bottom:12%; height:170px; background:#0d2620; z-index:-4;
  clip-path:polygon(0 100%,0 70%,12% 48%,23% 66%,34% 42%,46% 62%,58% 44%,71% 64%,84% 46%,100% 68%,100% 100%);
}
.trees{
  position:absolute; left:0; right:0; height:200px; z-index:-3;
  display:flex; align-items:flex-end; justify-content:space-around;
}
.trees-far{bottom:13%; opacity:.5}
.trees-near{bottom:9%; z-index:-2}
.tree{
  background:var(--c); flex:0 0 auto;
  clip-path:polygon(50% 0,100% 34%,74% 34%,100% 62%,76% 62%,100% 88%,57% 88%,57% 100%,43% 100%,43% 88%,0 88%,24% 62%,0 62%,26% 34%,0 34%);
}

.ground{
  position:absolute; left:0; right:0; bottom:0; height:12%; z-index:-1;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 8px, transparent 8px 16px),
    linear-gradient(#2f6b33 0 14px, #1d4a26 14px 100%);
  border-top:4px solid #4b9142;
}
.coin-rain{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.coin-rain b{
  position:absolute; top:-20px; width:14px; height:14px; background:var(--gold);
  border:3px solid var(--gold-dk); border-radius:50%;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.3);
  animation:fall linear infinite;
}
@keyframes fall{
  0%{transform:translateY(-30px) scaleX(1)}
  50%{transform:translateY(50vh) scaleX(.2)}
  100%{transform:translateY(105vh) scaleX(1)}
}

.world-content{position:relative; max-width:900px; width:100%}
.game-logo{
  font-size:clamp(26px,7.5vw,64px); margin:0 0 18px; color:var(--cream);
  text-shadow:0 5px 0 var(--green-dk), 0 10px 0 #000, 0 0 26px rgba(63,191,80,.35);
}
.game-logo span{color:var(--green)}
.tagline{font-size:clamp(22px,3.2vw,30px); color:var(--cream); margin:0 0 6px; line-height:1.3}
.tagline b{color:var(--gold)}

.hero-cat{position:relative; margin:10px auto 6px; width:min(340px,72vw)}
.hero-cat img{width:100%; animation:bob 1.8s steps(2,end) infinite; filter:drop-shadow(0 0 22px rgba(255,204,51,.22))}
.cat-shadow{
  width:60%; height:14px; margin:-6px auto 0; background:rgba(0,0,0,.45);
  border-radius:50%; filter:blur(3px);
}

.ca-box{
  display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
  background:var(--panel-2); border:4px solid var(--cream); box-shadow:5px 5px 0 #000;
  padding:12px 16px; margin:14px 0 22px; cursor:pointer; max-width:100%;
}
.ca-box:hover{border-color:var(--gold)}
.ca-label{font-family:'Press Start 2P',monospace; font-size:8px; color:var(--muted)}
.ca-value{font-size:21px; color:var(--gold); word-break:break-all; letter-spacing:.5px}
.ca-copy{font-family:'Press Start 2P',monospace; font-size:8px; color:var(--lime)}

.actions,.join-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.btn{
  font-family:'Press Start 2P',monospace; font-size:10px; color:var(--cream);
  background:var(--panel); border:4px solid var(--cream); box-shadow:5px 5px 0 #000;
  padding:14px 16px; cursor:pointer; display:inline-block; transition:transform .06s;
}
.btn:hover{background:var(--green-dk); color:#fff}
.btn:active{transform:translate(4px,4px); box-shadow:1px 1px 0 #000}
.btn-gold{background:var(--gold); color:#0a1410; border-color:#fff8dd}
.btn-gold:hover{background:#ffe066; color:#0a1410}

.scroll-hint{
  position:relative; margin-top:34px; font-family:'Press Start 2P',monospace;
  font-size:9px; color:var(--muted); animation:blink 1.4s steps(2,end) infinite;
}

/* ---------- sections ---------- */
.section{max-width:1100px; margin:0 auto; padding:76px 16px}
.sec-title{
  font-size:clamp(12px,2.4vw,17px); color:var(--gold); margin:0 0 30px; text-align:center;
  text-shadow:0 3px 0 #000;
}
.panel{
  background:var(--panel); border:4px solid var(--cream); box-shadow:6px 6px 0 #000;
  padding:22px;
}

/* ---------- dialogue ---------- */
.dialogue{
  display:flex; gap:20px; align-items:stretch; cursor:pointer;
  background:linear-gradient(#132b4d,#0b1c34); border:4px solid var(--cream);
  box-shadow:6px 6px 0 #000, inset 0 0 0 4px #0b1c34, inset 0 0 0 6px #4d7ab8;
  padding:20px; min-height:230px;
}
.dlg-portrait{
  flex:0 0 116px; width:116px; height:116px; border:4px solid var(--cream);
  background:#000; overflow:hidden;
}
.dlg-portrait img{width:100%; height:100%; object-fit:cover; object-position:center 15%}
.dlg-body{flex:1; display:flex; flex-direction:column; min-width:0}
.dlg-speaker{font-family:'Press Start 2P',monospace; font-size:10px; color:var(--gold); margin:2px 0 14px}
.dlg-text{font-size:25px; margin:0; min-height:130px; color:#fff; line-height:1.35}
.dlg-text .cursor{color:var(--gold)}
.dlg-foot{display:flex; justify-content:space-between; align-items:flex-end; margin-top:auto}
.dlg-progress{font-family:'Press Start 2P',monospace; font-size:8px; color:#7fa3d6}
.dlg-next{color:var(--gold); font-size:22px; animation:blink 1s steps(2,end) infinite}
.dlg-next.hide{visibility:hidden}
.dlg-hint{text-align:center; font-family:'Press Start 2P',monospace; font-size:8px; color:var(--muted); margin-top:16px}

/* ---------- quests ---------- */
.quests{list-style:none; margin:0; padding:0}
.quests li{
  display:flex; gap:14px; align-items:flex-start; padding:14px 6px;
  border-bottom:2px dashed rgba(244,236,216,.18);
}
.quests li:last-child{border-bottom:none}
.q-mark{font-family:'Press Start 2P',monospace; font-size:12px; flex-shrink:0; width:22px}
.q-done .q-mark{color:var(--lime)}
.q-fail .q-mark{color:var(--red)}
.q-wip .q-mark{color:var(--gold); animation:blink 1.2s steps(2,end) infinite}
.q-body{flex:1; min-width:0}
.q-name{font-family:'Press Start 2P',monospace; font-size:11px; margin:0 0 6px; color:var(--cream)}
.q-done .q-name{text-decoration:line-through; color:var(--muted)}
.q-note{margin:0; color:var(--muted); font-size:21px}
.q-tag{font-family:'Press Start 2P',monospace; font-size:8px; padding:5px 8px; border:2px solid currentColor; flex-shrink:0}
.q-done .q-tag{color:var(--lime)}
.q-fail .q-tag{color:var(--red)}
.q-wip .q-tag{color:var(--gold)}

/* ---------- inventory ---------- */
.inv-wrap{display:grid; grid-template-columns:1.35fr 1fr; gap:22px; align-items:start}
.inv-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:18px}
.slot{
  aspect-ratio:1; background:var(--panel-2); border:3px solid #5c7a5f;
  display:flex; align-items:center; justify-content:center; font-size:30px;
  cursor:pointer; position:relative; transition:transform .06s;
}
.slot:hover,.slot.active{border-color:var(--gold); background:#1a3524; transform:translateY(-3px)}
.slot.locked{color:#3f5a45; cursor:default}
.slot.locked:hover{transform:none; border-color:#5c7a5f; background:var(--panel-2)}
.inv-detail{min-height:230px}
.inv-d-name{font-family:'Press Start 2P',monospace; font-size:11px; color:var(--gold); margin:0 0 10px; line-height:1.5}
.inv-d-type{font-family:'Press Start 2P',monospace; font-size:8px; color:var(--lime); margin:0 0 14px}
.inv-d-desc{margin:0; color:var(--cream); font-size:22px}

/* ---------- stats ---------- */
.stats-wrap{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch}
.stat-head{display:flex; gap:14px; align-items:center; margin-bottom:20px; padding-bottom:16px; border-bottom:3px solid rgba(244,236,216,.2)}
.stat-head img{width:64px; height:64px; border:3px solid var(--cream); background:#000; object-fit:cover; object-position:center 15%}
.stat-name{font-family:'Press Start 2P',monospace; font-size:12px; margin:0 0 8px; color:var(--cream)}
.stat-class{font-family:'Press Start 2P',monospace; font-size:8px; margin:0; color:var(--muted)}
.stat-lines{list-style:none; margin:0; padding:0}
.stat-lines li{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.st-key{font-family:'Press Start 2P',monospace; font-size:9px; width:96px; flex-shrink:0; color:var(--cream)}
.st-bar{flex:1; height:14px; background:#0a1a10; border:2px solid var(--cream); overflow:hidden}
.st-bar i{display:block; height:100%; width:0; background:repeating-linear-gradient(90deg,var(--lime) 0 6px,var(--green) 6px 12px); transition:width 1.1s steps(20,end)}
.st-val{font-family:'Press Start 2P',monospace; font-size:9px; width:46px; text-align:right; color:var(--gold); flex-shrink:0}

.scores{list-style:none; margin:0; padding:0}
.scores li{padding:16px 4px; border-bottom:2px dashed rgba(244,236,216,.18)}
.scores li:last-child{border-bottom:none}
.sc-val{display:block; font-family:'Press Start 2P',monospace; font-size:20px; color:var(--gold); margin-bottom:8px}
.sc-key{display:block; font-size:21px; color:var(--muted)}

/* ---------- market ---------- */
.market{text-align:center}
.market-idle{font-family:'Press Start 2P',monospace; font-size:11px; color:var(--cream); line-height:2; margin:14px 0}
.market-idle span{display:block; font-family:'VT323',monospace; font-size:22px; color:var(--muted); margin-top:10px}
.market-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(244,236,216,.2)}
.market-grid li{background:var(--panel); padding:20px 10px}
.mk-label{display:block; font-family:'Press Start 2P',monospace; font-size:8px; color:var(--muted); margin-bottom:12px}
.mk-value{display:block; font-family:'Press Start 2P',monospace; font-size:13px; color:var(--gold); word-break:break-all}
.mk-value.up{color:var(--lime)}
.mk-value.down{color:var(--red)}

/* ---------- tutorial ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px}
.steps li{position:relative; padding-top:34px}
.step-n{
  position:absolute; top:-18px; left:16px; font-family:'Press Start 2P',monospace; font-size:14px;
  background:var(--gold); color:#0a1410; padding:9px 11px; border:3px solid #0a1410; box-shadow:3px 3px 0 #000;
}
.steps h3{font-size:11px; color:var(--lime); margin:0 0 12px}
.steps p{margin:0; color:var(--cream); font-size:21px}

/* ---------- footer ---------- */
.footer{
  text-align:center; padding:60px 16px 50px; border-top:4px solid var(--cream);
  background:var(--night-2);
}
.foot-cat{width:78px; margin:0 auto 18px; animation:bob 2.2s steps(2,end) infinite}
.foot-tag{font-family:'Press Start 2P',monospace; font-size:14px; color:var(--gold); margin:0 0 16px; text-shadow:0 3px 0 #000}
.foot-ca{font-size:20px; color:var(--muted); margin:0 0 22px; word-break:break-all}
.foot-disc{max-width:660px; margin:0 auto 18px; font-size:18px; color:#63775a; line-height:1.5}
.foot-copy{font-family:'Press Start 2P',monospace; font-size:8px; color:#3f5a45; margin:0}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .inv-wrap,.stats-wrap{grid-template-columns:1fr}
  .inv-grid{grid-template-columns:repeat(5,1fr)}
  .market-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:820px){
  body{font-size:21px}
  .burger{display:block; margin-left:auto}
  .hud-gold{margin-left:auto}
  .menu{
    position:fixed; top:var(--hud-h,69px); left:0; right:0; bottom:0;
    background:#0a1410; border-top:4px solid var(--cream);
    flex-direction:column; align-items:stretch; gap:0; padding:10px 0;
    margin-left:0; overflow-y:auto;
    transform:translateX(100%); transition:transform .22s ease;
  }
  .menu.open{transform:translateX(0)}
  .menu a{padding:18px 24px; font-size:11px; border-bottom:2px dashed rgba(244,236,216,.16)}
  .menu a:hover::before{display:none}
  .menu .menu-buy{margin:16px 24px; text-align:center; border-bottom:none}
  .hud-inner{gap:10px}
  .hud-name{display:none}
  .section{padding:56px 14px}
  .dialogue{flex-direction:column; gap:14px}
  .dlg-portrait{flex:0 0 92px; width:92px; height:92px}
  .dlg-text{font-size:22px; min-height:150px}
  .quests li{flex-wrap:wrap}
  .market-grid{grid-template-columns:1fr}
  .trees{height:130px}
}

@media (max-width:480px){
  .inv-grid{grid-template-columns:repeat(4,1fr); gap:9px}
  .portrait-mini{width:38px; height:38px}
  .hud-bar{width:64px}
  .moon{width:52px; height:52px; top:7%}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}