/* ===== THE LIFE OF A STONER — styles.css ===== */

@font-face{
  font-family:'Bebas';
  src:url('assets/fonts/bebasneue.woff2') format('woff2');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Oswald';
  src:url('assets/fonts/oswald-400.woff2') format('woff2');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Oswald';
  src:url('assets/fonts/oswald-600.woff2') format('woff2');
  font-weight:600; font-display:swap;
}
@font-face{
  font-family:'Oswald';
  src:url('assets/fonts/oswald-700.woff2') format('woff2');
  font-weight:700; font-display:swap;
}

:root{
  --weed:#7CFF6B;
  --weed-deep:#3fae2e;
  --purple:#9D4EDD;
  --purple-deep:#5a189a;
  --gold:#f5c542;
  --red:#ff3b3b;
  --ink:#07090a;
  --ink2:#0e1315;
  --panel:rgba(12,16,15,.78);
  --line:rgba(124,255,107,.22);
  --txt:#e9f5e6;
  --muted:#8fa08a;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;width:100%;overflow:hidden;background:var(--ink);}
body{
  font-family:'Oswald',sans-serif;
  color:var(--txt);
  cursor:crosshair;
  user-select:none;
  -webkit-font-smoothing:antialiased;
}
img{-webkit-user-drag:none;}

/* ---------- FX overlays ---------- */
#fx-canvas{position:fixed;inset:0;z-index:60;pointer-events:none;}
#grain{
  position:fixed;inset:-50%;z-index:61;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grainmove .6s steps(3) infinite;
}
@keyframes grainmove{
  0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}
  50%{transform:translate(3%,-2%)}75%{transform:translate(-2%,-3%)}100%{transform:translate(2%,2%)}
}
#vignette{position:fixed;inset:0;z-index:62;pointer-events:none;
  box-shadow:inset 0 0 240px 60px rgba(0,0,0,.85);}
#damage-flash{position:fixed;inset:0;z-index:63;pointer-events:none;background:var(--red);opacity:0;transition:opacity .12s;}
#fade{position:fixed;inset:0;z-index:70;pointer-events:none;background:#000;opacity:0;transition:opacity .35s;}
#fade.on{opacity:1;}

/* ---------- Screens ---------- */
.screen{position:fixed;inset:0;z-index:10;display:none;}
.screen.active{display:block;}

/* ---------- Buttons ---------- */
.btn{
  font-family:'Bebas',sans-serif;letter-spacing:1.5px;font-size:1.35rem;
  padding:.65em 1.4em;background:rgba(255,255,255,.04);color:var(--txt);
  border:1px solid var(--line);border-radius:2px;cursor:pointer;
  transition:transform .12s ease,background-color .18s,box-shadow .18s,color .18s,border-color .18s;
  position:relative;overflow:hidden;
}
.btn:hover{transform:translateX(6px);background:rgba(124,255,107,.1);border-color:var(--weed);box-shadow:-4px 0 0 var(--weed);}
.btn:active{transform:translateX(2px) scale(.99);}
.btn-primary{background:linear-gradient(90deg,var(--weed-deep),transparent);border-color:var(--weed);color:#eafff0;}
.btn-primary:hover{background:linear-gradient(90deg,var(--weed),transparent);box-shadow:-4px 0 0 var(--weed),0 0 22px rgba(124,255,107,.3);}
.btn-danger{border-color:rgba(255,59,59,.4);}
.btn-danger:hover{background:rgba(255,59,59,.14);border-color:var(--red);box-shadow:-4px 0 0 var(--red);}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.6);}

/* ---------- Main Menu ---------- */
.menu-bg{position:absolute;inset:0;background:url('assets/menu_bg.png') center/cover no-repeat;
  filter:saturate(1.1) brightness(.8);}
.menu-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,6,5,.92) 0%,rgba(4,6,5,.55) 55%,rgba(4,6,5,.2) 100%);}
.menu-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:0 clamp(30px,7vw,120px);max-width:900px;}
.menu-tag{font-size:1.1rem;letter-spacing:5px;text-transform:uppercase;color:var(--weed);
  opacity:0;animation:fadeUp .6s .1s forwards;}
.menu-title{font-family:'Bebas',sans-serif;font-size:clamp(4rem,12vw,10rem);line-height:.82;
  letter-spacing:2px;text-shadow:0 6px 40px rgba(0,0,0,.9);margin:.15em 0 .1em;
  opacity:0;animation:fadeUp .7s .25s forwards;}
.menu-title .hl{color:var(--weed);text-shadow:0 0 40px rgba(124,255,107,.5);}
.menu-buttons{display:flex;flex-direction:column;gap:14px;margin-top:26px;width:min(360px,80vw);
  opacity:0;animation:fadeUp .7s .5s forwards;}
.menu-buttons .btn{text-align:left;}
.menu-warn{margin-top:26px;color:var(--muted);font-size:.9rem;letter-spacing:1px;
  opacity:0;animation:fadeUp .7s .8s forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Doc pages (howto / credits) ---------- */
#screen-howto,#screen-credits,#screen-exit{background:radial-gradient(circle at 30% 20%,#12201a,#05070a 70%);}
.panel-scroll{position:relative;z-index:2;max-width:820px;margin:0 auto;height:100%;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:4vh clamp(24px,6vw,60px) 6vh;overflow-y:auto;overflow-x:hidden;}
.panel-scroll .btn{align-self:flex-start;flex:0 0 auto;margin-bottom:2vh;}
.page-title{font-family:'Bebas',sans-serif;font-size:clamp(2.6rem,7vw,5rem);color:var(--weed);
  letter-spacing:3px;margin-bottom:18px;text-shadow:0 0 30px rgba(124,255,107,.3);}
.doc{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--weed);
  border-radius:6px;padding:26px 30px;line-height:1.7;font-size:1.05rem;margin-bottom:24px;
  backdrop-filter:blur(10px);}
.doc h3{font-family:'Bebas',sans-serif;letter-spacing:2px;color:var(--gold);font-size:1.5rem;margin:16px 0 6px;}
.doc h3:first-child{margin-top:0;}
.doc b{color:var(--weed);}
.doc .em{color:var(--purple);}
.credits-logo{font-family:'Bebas',sans-serif;font-size:2.4rem;color:var(--gold);letter-spacing:2px;
  margin-bottom:16px;text-shadow:0 0 24px rgba(245,197,66,.4);}
.exit-inner{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;}
.exit-msg{font-size:1.3rem;line-height:1.8;color:var(--muted);}

/* ---------- GAME layout ---------- */
#screen-game{display:none;background:#000;}
#screen-game.active{display:grid;grid-template-rows:auto 1fr auto auto;height:100%;}

/* HUD */
#hud{display:flex;align-items:center;gap:18px;padding:8px 18px;z-index:20;
  background:linear-gradient(180deg,rgba(6,9,8,.96),rgba(6,9,8,.6));
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px);}
.hud-left{display:flex;align-items:center;gap:16px;}

/* SVG icon system */
.ico{display:inline-flex;align-items:center;justify-content:center;width:1.05em;height:1.05em;vertical-align:-.18em;line-height:0;}
.ico svg{width:100%;height:100%;display:block;}
.nav-btn .ni .ico,.nav-btn .ni{width:1.15em;height:1.15em;}
#choices .choice .ico{margin-right:.15em;}
.float-pop .ico{width:1em;height:1em;vertical-align:-.12em;}
.cash{font-family:'Bebas',sans-serif;font-size:1.9rem;color:var(--gold);letter-spacing:1px;
  text-shadow:0 0 18px rgba(245,197,66,.3);}
.cash-sym{opacity:.7;margin-right:1px;}
.day{font-family:'Bebas',sans-serif;font-size:1.15rem;color:var(--muted);letter-spacing:2px;}
.hud-meters{display:flex;gap:14px;flex:1;justify-content:center;flex-wrap:wrap;}
.meter{display:flex;align-items:center;gap:6px;}
.m-ico{display:inline-flex;width:1.15rem;height:1.15rem;align-items:center;justify-content:center;filter:drop-shadow(0 0 4px rgba(0,0,0,.8));}
.m-ico svg{width:100%;height:100%;}
.bar{width:clamp(60px,9vw,120px);height:9px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);}
.fill{height:100%;width:50%;border-radius:6px;transition:width .4s ease;}
.fill.health{background:linear-gradient(90deg,#ff5a5a,#ff2d2d);}
.fill.high{background:linear-gradient(90deg,var(--weed-deep),var(--weed));}
.fill.drunk{background:linear-gradient(90deg,#e0a94a,#ffd36b);}
.fill.heat{background:linear-gradient(90deg,#ff8a3b,#ff2020);}
.hud-right{display:flex;align-items:center;gap:14px;}
.stash{font-family:'Bebas',sans-serif;font-size:1.3rem;letter-spacing:1px;color:var(--weed);}
.hud-menu-btn{background:transparent;border:1px solid var(--line);color:var(--txt);font-size:1.2rem;
  width:38px;height:38px;border-radius:4px;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;justify-content:center;}
.hud-menu-btn svg{width:1.15rem;height:1.15rem;}
.stash .m-ico{width:1.2rem;height:1.2rem;}
.hud-menu-btn:hover{background:rgba(255,59,59,.15);border-color:var(--red);}
#btn-music:hover,#btn-sfx:hover{background:rgba(124,255,107,.15);border-color:var(--weed);}
.hud-menu-btn.muted{opacity:.4;text-decoration:line-through;}

/* Work shift minigame */
.work-order{font-family:'Bebas',sans-serif;letter-spacing:1px;font-size:1.35rem;color:var(--gold);margin-bottom:2px;}
.work-progress{color:var(--muted);font-size:.95rem;letter-spacing:1px;}

/* Game world / scene */
#game-world{position:relative;overflow:hidden;transition:filter .5s ease,transform .3s ease;}
#scene-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;
  transition:opacity .4s;transform:scale(1.04);animation:kenburns 26s ease-in-out infinite alternate;}
@keyframes kenburns{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
#game-world::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 30%,transparent 55%,rgba(4,6,5,.85) 100%);pointer-events:none;}
#portrait-wrap{position:absolute;right:clamp(10px,4vw,90px);bottom:0;height:96%;
  display:flex;align-items:flex-end;pointer-events:none;filter:drop-shadow(-20px 10px 30px rgba(0,0,0,.7));}
#portrait{height:100%;max-width:46vw;object-fit:contain;object-position:bottom;
  opacity:0;transform:translateY(30px) scale(.98);}
#portrait.show{opacity:1;transform:translateY(0) scale(1);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1);}
#floating-status{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;}
.float-pop{position:absolute;font-family:'Bebas',sans-serif;font-size:2rem;letter-spacing:1px;
  text-shadow:0 2px 10px rgba(0,0,0,.9);animation:floatpop 1.4s ease-out forwards;}
@keyframes floatpop{0%{opacity:0;transform:translateY(0) scale(.7)}
  15%{opacity:1;transform:translateY(-10px) scale(1.1)}100%{opacity:0;transform:translateY(-70px) scale(1)}}

/* High / Drunk world filters */
#game-world.is-high{filter:saturate(1.5) brightness(1.05) hue-rotate(12deg) contrast(1.05);}
#game-world.is-high.lvl2{filter:saturate(1.9) brightness(1.1) hue-rotate(24deg) blur(1px) contrast(1.02);}
#game-world.is-high.lvl3{filter:saturate(2.3) brightness(1.15) hue-rotate(40deg) blur(2.5px);}
#game-world.is-drunk{animation:kenburns 26s ease-in-out infinite alternate, sway 6s ease-in-out infinite;}
#game-world.is-drunk.lvl2{animation:kenburns 26s ease-in-out infinite alternate, sway 4s ease-in-out infinite;filter:blur(1px);}
#game-world.is-drunk.lvl3{animation:kenburns 26s ease-in-out infinite alternate, swayhard 3s ease-in-out infinite;filter:blur(2px) contrast(.95);}
@keyframes sway{0%,100%{transform:rotate(-.6deg) translateX(-4px)}50%{transform:rotate(.6deg) translateX(4px)}}
@keyframes swayhard{0%,100%{transform:rotate(-1.6deg) translateX(-12px) skewX(1deg)}50%{transform:rotate(1.6deg) translateX(12px) skewX(-1deg)}}
#game-world.shake{animation:kenburns 26s ease-in-out infinite alternate, shake .4s;}
@keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-10px,6px)}40%{transform:translate(9px,-7px)}60%{transform:translate(-7px,-4px)}80%{transform:translate(6px,5px)}}

/* Dialog box */
#dialog-box{position:relative;z-index:15;margin:0 clamp(10px,3vw,40px);
  background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--weed);
  border-radius:10px 10px 0 0;padding:16px 22px 14px;backdrop-filter:blur(12px);min-height:120px;
  box-shadow:0 -8px 40px rgba(0,0,0,.6);}
#speaker{font-family:'Bebas',sans-serif;font-size:1.5rem;letter-spacing:2px;color:var(--weed);
  text-transform:uppercase;margin-bottom:4px;min-height:1.2em;}
#speaker.narrator{color:var(--purple);}
#dialog-text{font-size:1.12rem;line-height:1.5;min-height:2.4em;color:#f2fbef;}
#choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
#choices .choice{font-family:'Oswald',sans-serif;font-weight:600;font-size:1rem;letter-spacing:.5px;
  padding:.5em 1.1em;background:rgba(124,255,107,.06);border:1px solid var(--line);color:var(--txt);
  border-radius:4px;cursor:pointer;transition:.14s;text-align:left;}
#choices .choice:hover{background:rgba(124,255,107,.16);border-color:var(--weed);transform:translateY(-2px);}
#choices .choice:active{transform:translateY(0);}
#choices .choice .cost{color:var(--gold);font-size:.9em;margin-left:6px;}
#choices .choice.warn{border-color:rgba(255,59,59,.4);}
#choices .choice.warn:hover{background:rgba(255,59,59,.14);border-color:var(--red);}
#choices .choice:disabled{opacity:.35;cursor:not-allowed;transform:none;}

/* Nav bar */
#nav-bar{display:flex;gap:8px;padding:10px clamp(10px,3vw,40px) 14px;overflow-x:auto;z-index:15;
  background:linear-gradient(0deg,rgba(6,9,8,.98),rgba(6,9,8,.4));border-top:1px solid rgba(124,255,107,.1);}
.nav-btn{flex:0 0 auto;font-family:'Oswald',sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.5px;
  padding:.55em 1em;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--muted);
  border-radius:30px;cursor:pointer;transition:.15s;white-space:nowrap;display:flex;align-items:center;gap:6px;}
.nav-btn .ni{font-size:1.05rem;}
.nav-btn:hover{color:var(--txt);border-color:var(--weed);background:rgba(124,255,107,.1);}
.nav-btn.current{color:var(--ink);background:var(--weed);border-color:var(--weed);font-weight:700;}

/* Combat HP bars in dialog */
.combat-hud{display:flex;justify-content:space-between;gap:20px;margin-bottom:10px;}
.combat-hud .side{flex:1;}
.combat-hud .cname{font-family:'Bebas',sans-serif;letter-spacing:1px;font-size:1.1rem;}
.combat-hud .cbar{height:12px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden;margin-top:3px;border:1px solid rgba(255,255,255,.1);}
.combat-hud .cbar > div{height:100%;transition:width .3s;}
.combat-hud .you .cbar>div{background:linear-gradient(90deg,var(--weed-deep),var(--weed));}
.combat-hud .foe .cbar>div{background:linear-gradient(90deg,#ff5a5a,#ff2020);}

/* toast */
#toast{position:fixed;top:70px;left:50%;transform:translateX(-50%) translateY(-20px);z-index:80;
  background:rgba(6,9,8,.95);border:1px solid var(--weed);color:var(--txt);padding:10px 20px;border-radius:6px;
  font-weight:600;letter-spacing:.5px;opacity:0;transition:.3s;pointer-events:none;box-shadow:0 8px 30px rgba(0,0,0,.6);}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.bad{border-color:var(--red);}
#toast.gold{border-color:var(--gold);color:var(--gold);}

/* scrollbars */
::-webkit-scrollbar{height:8px;width:8px;}
::-webkit-scrollbar-thumb{background:var(--weed-deep);border-radius:4px;}
::-webkit-scrollbar-track{background:transparent;}

@media(max-width:640px){
  .hud-meters{order:3;width:100%;justify-content:space-between;}
  #hud{flex-wrap:wrap;}
  #portrait{max-width:60vw;}
  #dialog-text{font-size:1rem;}
}