:root{
  --blood:#c0392b;
  --blood-bright:#e74c3c;
  --gold:#f5c542;
  --ink:#0a0a0c;
  --ink2:#15151c;
  --bone:#e8e2d0;
  --toxic:#7bd442;
  --violet:#6c2bd9;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#fff;
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;user-select:none;cursor:default;}
.hidden{display:none !important;}

#game{position:fixed;inset:0;display:block;cursor:crosshair;}

/* ---------- TITLE FONT ---------- */
.game-title,.panel-card h2,#banner,.stat-label,.sp-label,.menu-btn,.game-title .two{
  font-family:"Impact","Haettenschweiler","Arial Narrow Bold",sans-serif;
  letter-spacing:1px;
}

/* ---------- OVERLAYS ---------- */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;}
#mainMenu{
  background:linear-gradient(rgba(6,4,10,.55),rgba(6,4,10,.85)),url("assets/menu_bg.jpg");
  background-size:cover;background-position:center;
  animation:fadein .6s ease;
}
.menu-vignette{position:absolute;inset:0;box-shadow:inset 0 0 260px 60px rgba(0,0,0,.9);pointer-events:none;}
.menu-inner{position:relative;text-align:center;z-index:2;animation:riseUp .8s cubic-bezier(.2,.8,.2,1);}
.game-title{
  font-size:clamp(64px,13vw,190px);line-height:.85;color:#fff;
  text-shadow:0 0 24px rgba(192,57,43,.8),0 6px 0 #300, 0 0 60px rgba(0,0,0,.9);
  transform:skewX(-4deg);
}
.game-title .two{color:var(--blood-bright);text-shadow:0 0 30px var(--blood-bright),0 6px 0 #300;}
.subtitle{font-style:italic;letter-spacing:4px;color:var(--gold);margin-top:6px;
  font-size:clamp(14px,2.4vw,24px);text-shadow:0 2px 12px #000;}
.menu-buttons{display:flex;flex-direction:column;gap:14px;margin-top:46px;align-items:center;}
.menu-btn{
  min-width:290px;padding:15px 28px;font-size:22px;color:var(--bone);
  background:rgba(20,15,20,.72);border:2px solid rgba(245,197,66,.35);
  border-radius:2px;cursor:pointer;transition:transform .12s ease,background .2s,box-shadow .2s,border-color .2s;
  backdrop-filter:blur(6px);text-transform:uppercase;
}
.menu-btn:hover{transform:translateY(-2px) scale(1.03);background:rgba(40,20,20,.9);
  border-color:var(--gold);box-shadow:0 6px 30px rgba(0,0,0,.6);}
.menu-btn.primary{background:linear-gradient(180deg,var(--blood-bright),var(--blood));
  border-color:#ff8a7a;color:#fff;text-shadow:0 2px 6px #400;}
.menu-btn.primary:hover{box-shadow:0 0 34px rgba(231,76,60,.75);}
.menu-btn.danger{border-color:rgba(120,120,130,.4);color:#b9b9c4;}
.menu-btn.danger:hover{background:#2a0d0d;border-color:var(--blood);}
.studio{margin-top:52px;color:#8a8a95;letter-spacing:2px;font-size:14px;}

/* ---------- PANELS ---------- */
.panel{background:rgba(4,3,7,.82);backdrop-filter:blur(4px);animation:fadein .25s ease;}
.panel-card{
  position:relative;width:min(760px,92vw);max-height:88vh;overflow:auto;
  background:linear-gradient(180deg,#16121c,#0c0a10);
  border:2px solid rgba(245,197,66,.3);border-radius:6px;padding:34px 38px 30px;
  box-shadow:0 30px 90px rgba(0,0,0,.8),inset 0 0 60px rgba(108,43,217,.08);
  animation:riseUp .35s cubic-bezier(.2,.8,.2,1);
}
.panel-card h2{font-size:44px;color:var(--gold);text-align:center;margin-bottom:22px;
  text-shadow:0 0 24px rgba(245,197,66,.4);}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-bottom:26px;}
.how-grid>div{background:rgba(255,255,255,.03);border-left:3px solid var(--blood);padding:12px 14px;border-radius:4px;}
.how-grid b{color:var(--gold);font-size:16px;display:block;margin-bottom:5px;}
.how-grid p{color:#cfcfd6;font-size:14px;line-height:1.45;}
.how-grid i{color:var(--toxic);font-style:italic;}
.panel-card .menu-btn{display:block;margin:0 auto;}
.credits-body{text-align:center;margin-bottom:24px;}
.credits-body .big{font-size:34px;font-family:"Impact",sans-serif;color:#fff;letter-spacing:2px;}
.credits-body .big.sub{font-size:18px;color:var(--gold);font-style:italic;margin-bottom:8px;}
.credits-body hr{border:none;border-top:1px solid rgba(255,255,255,.12);margin:16px auto;width:60%;}
.credits-body p{color:#d7d7dd;margin:4px 0;}
.studio-credit{font-size:26px;color:var(--blood-bright);font-family:"Impact",sans-serif;letter-spacing:2px;
  text-shadow:0 0 20px rgba(231,76,60,.5);}
.credits-body .tiny{font-size:13px;color:#9a9aa4;line-height:1.6;}

/* ---------- EXIT ---------- */
#exitScreen{background:#000;flex-direction:column;}
.exit-inner{text-align:center;animation:fadein 1s ease;}
.exit-inner h2{font-family:"Impact",sans-serif;font-size:44px;color:var(--blood);letter-spacing:2px;margin-bottom:14px;}
.exit-inner p{color:#9a9aa4;margin-bottom:30px;font-size:17px;}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;}
#hud .ghost-btn,#hud #powerbar,#hud #selectedPower,#hud .pow-arrow{pointer-events:auto;}
#topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:18px;
  padding:10px 16px;background:linear-gradient(180deg,rgba(6,4,10,.85),rgba(6,4,10,0));}
.stat{display:flex;flex-direction:column;line-height:1.05;}
.stat-label{font-size:11px;letter-spacing:2px;color:var(--gold);opacity:.85;}
.stat-val{font-size:26px;font-weight:bold;color:#fff;font-family:"Impact",sans-serif;}
.stat-val.small{font-size:16px;}
.stat-val.gold{color:var(--gold);text-shadow:0 0 14px rgba(245,197,66,.5);}
.stat.combo{min-width:120px;}
.combo-meter{width:120px;height:9px;background:rgba(255,255,255,.12);border-radius:5px;overflow:hidden;margin-top:5px;}
#comboFill{height:100%;width:0%;background:linear-gradient(90deg,var(--blood-bright),var(--gold));transition:width .1s linear;}
#comboMult{color:var(--blood-bright);}
.stat.worship{min-width:150px;}
.worship-meter{width:150px;height:9px;background:rgba(255,255,255,.12);border-radius:5px;overflow:hidden;margin:3px 0;}
#worshipFill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),#fff);transition:width .3s;}
.stat.worship .stat-val{position:absolute;opacity:0;}
#pauseBtn{margin-left:auto;}
.ghost-btn{background:rgba(20,15,20,.7);border:1px solid rgba(245,197,66,.4);color:var(--bone);
  padding:8px 16px;border-radius:3px;font-size:15px;cursor:pointer;font-family:"Impact",sans-serif;letter-spacing:1px;}
.ghost-btn:hover{background:var(--blood);border-color:#ff8a7a;}

#selectedPower{position:absolute;top:64px;left:50%;transform:translateX(-50%);
  background:rgba(6,4,10,.7);border:1px solid rgba(245,197,66,.35);border-radius:30px;
  padding:6px 22px;text-align:center;backdrop-filter:blur(6px);white-space:nowrap;}
.sp-label{font-size:10px;letter-spacing:3px;color:var(--gold);}
#spName{font-size:20px;font-weight:bold;margin:0 8px;color:#fff;}
.sp-hint{font-size:12px;color:#b7b7c0;font-style:italic;}

/* ---------- POWER BAR ---------- */
#powerbar{position:absolute;left:54px;right:54px;bottom:0;display:flex;gap:6px;
  padding:10px 6px 12px;overflow-x:auto;overflow-y:hidden;
  background:linear-gradient(0deg,rgba(6,4,10,.92),rgba(6,4,10,0));
  scrollbar-width:thin;scrollbar-color:var(--blood) transparent;scroll-behavior:smooth;}
.pow-arrow{position:absolute;bottom:22px;z-index:22;width:42px;height:46px;
  display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;
  color:var(--gold);background:linear-gradient(180deg,rgba(40,20,20,.95),rgba(14,10,14,.95));
  border:1.5px solid rgba(245,197,66,.4);border-radius:8px;cursor:pointer;font-family:"Impact",sans-serif;
  transition:background .15s,transform .1s,box-shadow .15s;}
.pow-arrow:hover{background:var(--blood);border-color:#ff8a7a;box-shadow:0 0 16px rgba(231,76,60,.6);}
.pow-arrow:active{transform:scale(.92);}
.pow-arrow.left{left:8px;} .pow-arrow.right{right:8px;}
#powerbar::-webkit-scrollbar{height:8px;}
#powerbar::-webkit-scrollbar-thumb{background:var(--blood);border-radius:4px;}
.power-btn{flex:0 0 auto;width:76px;height:66px;border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,#1c1822,#0e0c12);border:1.5px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:transform .1s,border-color .15s,box-shadow .15s;position:relative;padding:4px;}
.power-btn:hover{transform:translateY(-4px);border-color:var(--gold);}
.power-btn.active{border-color:var(--blood-bright);box-shadow:0 0 18px rgba(231,76,60,.7),inset 0 0 14px rgba(231,76,60,.25);
  background:linear-gradient(180deg,#3a1414,#1a0c0c);}
.power-btn .pk{position:absolute;top:3px;left:5px;font-size:10px;color:var(--gold);font-weight:bold;opacity:.8;}
.power-btn .picon{font-size:22px;line-height:1;filter:drop-shadow(0 2px 3px #000);}
.power-btn .pname{font-size:9px;color:#cfcfd6;text-align:center;line-height:1;letter-spacing:.3px;}
.power-btn.active .pname{color:#fff;}

/* ---------- BANNER ---------- */
#banner{position:fixed;top:22%;left:50%;transform:translate(-50%,-50%) scale(.8);z-index:30;
  font-size:clamp(40px,8vw,96px);color:#fff;pointer-events:none;text-align:center;
  text-shadow:0 0 30px rgba(0,0,0,.9),0 4px 0 #000;letter-spacing:4px;
  animation:bannerPop 2.4s ease forwards;}
#banner.dawn{color:var(--gold);text-shadow:0 0 40px rgba(245,197,66,.7),0 4px 0 #402c00;}
#banner.dusk{color:#8a6cff;text-shadow:0 0 40px rgba(108,43,217,.7),0 4px 0 #1a0a3a;}

/* ---------- ANIMATIONS ---------- */
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes riseUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes bannerPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6);}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1.05);}
  80%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.1);}
}
@media (max-width:640px){
  .stat-label{font-size:9px}.stat-val{font-size:20px}
  #selectedPower{top:58px;padding:5px 14px}.sp-hint{display:none}
  .power-btn{width:64px;height:58px}
}