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

*{margin:0;padding:0;box-sizing:border-box;}
body{background:#000;overflow:hidden;font-family:'Press Start 2P',monospace;}

#game-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;display:block;}

/* ── LOADING ── */
#loading-screen{
  position:fixed;inset:0;z-index:1000;
  background:radial-gradient(ellipse at 50% 40%, #1a2a4a 0%, #0d1a2e 60%, #060e1a 100%);
  display:flex;align-items:center;justify-content:center;
}
.loading-inner{text-align:center;color:#fff;}

.title-line1{
  font-size:clamp(2rem,6vw,4.5rem);
  color:#FFD700;
  text-shadow:0 0 20px #FFD700,0 0 40px #FF8C00,4px 4px 0 #8B4500;
  letter-spacing:4px;
  animation:titleGlow 2s ease-in-out infinite;
}
.title-line2{
  font-size:clamp(1rem,3vw,2.5rem);
  color:#FF5252;
  text-shadow:2px 2px 0 #8B0000;
  margin-bottom:2rem;
  letter-spacing:8px;
}
@keyframes titleGlow{
  0%,100%{text-shadow:0 0 20px #FFD700,0 0 40px #FF8C00,4px 4px 0 #8B4500;}
  50%{text-shadow:0 0 40px #FFD700,0 0 80px #FF8C00,0 0 120px #FFAA00,4px 4px 0 #8B4500;}
}

/* Pokéball loader */
.pokeball-wrap{margin:1.5rem auto;}
.pokeball{width:72px;height:72px;position:relative;margin:0 auto;animation:pbSpin 1s linear infinite;}
@keyframes pbSpin{to{transform:rotate(360deg);}}
.pb-top{position:absolute;top:0;width:72px;height:36px;background:#E74C3C;border-radius:36px 36px 0 0;}
.pb-bot{position:absolute;bottom:0;width:72px;height:36px;background:#fff;border-radius:0 0 36px 36px;}
.pb-mid{position:absolute;top:50%;transform:translateY(-50%);width:72px;height:7px;background:#222;z-index:2;}
.pb-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:18px;background:#fff;border:4px solid #222;border-radius:50%;z-index:3;}

/* Load bar */
.load-bar-bg{
  width:240px;height:10px;background:#1a2a4a;border:2px solid #4a6a9a;
  border-radius:5px;margin:1.2rem auto;overflow:hidden;
}
.load-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#FFD700,#FF8C00);border-radius:5px;transition:width 0.1s;}

.loading-text{font-size:0.55rem;color:#6a8aaa;margin-bottom:1.2rem;animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}

#start-btn{
  display:none;
  font-family:'Press Start 2P',monospace;
  background:#FFD700;color:#000;
  border:none;padding:0.9rem 2rem;font-size:0.7rem;
  cursor:pointer;
  box-shadow:0 4px 0 #8B6300,0 0 20px #FFD70080;
  transition:transform 0.1s,box-shadow 0.1s;
  animation:btnPulse 1.2s ease-in-out infinite;
}
#start-btn:hover{transform:translateY(2px);box-shadow:0 2px 0 #8B6300,0 0 30px #FFD700;}
@keyframes btnPulse{
  0%,100%{box-shadow:0 4px 0 #8B6300,0 0 20px #FFD70080;}
  50%{box-shadow:0 4px 0 #8B6300,0 0 40px #FFD700,0 0 60px #FF8C00;}
}

/* ── HUD ── */
#hud{position:fixed;top:0;left:0;width:100%;z-index:100;pointer-events:none;}
#hud-bar{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(0,0,0,0.82);border-bottom:2px solid #FFD700;
  padding:0.45rem 1rem;font-size:0.5rem;color:#fff;
}
.hud-stat{white-space:nowrap;}
.hud-center{color:#FFD700;}
#controls-bar{
  text-align:center;background:rgba(0,0,0,0.55);
  color:#556;font-size:0.38rem;padding:0.25rem;letter-spacing:1px;
}
#message-box{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:rgba(10,14,24,0.95);border:2px solid #FFD700;
  color:#fff;padding:0.8rem 1.5rem;font-size:0.55rem;
  text-align:center;max-width:75vw;
  animation:msgSlide 0.3s ease;pointer-events:none;
}
@keyframes msgSlide{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}

/* ── DIALOG BOX ── */
#dialog-box{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  width:min(92vw,640px);
  background:#F8F4E8;border:4px solid #584030;border-radius:8px;
  padding:1.2rem 1.5rem 1rem;
  font-size:0.6rem;color:#220000;line-height:1.8;
  z-index:150;
  box-shadow:4px 4px 0 #584030,0 0 20px rgba(0,0,0,0.4);
  animation:dialogIn 0.25s ease;
}
@keyframes dialogIn{from{opacity:0;transform:translateX(-50%) translateY(20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
#dialog-text{min-height:2.4em;}
.dialog-continue{
  text-align:right;font-size:0.6rem;color:#584030;
  animation:dialogArrow 0.8s ease-in-out infinite;
}
@keyframes dialogArrow{0%,100%{opacity:1;transform:translateY(0);}50%{opacity:0.5;transform:translateY(3px);}}

/* ── INTERACT HINT ── */
#interact-hint{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%);
  background:rgba(10,14,24,0.88);border:2px solid #FFD700;border-radius:6px;
  color:#FFD700;padding:0.35rem 0.9rem;font-size:0.42rem;
  z-index:120;pointer-events:none;
  animation:hintPulse 1.5s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{opacity:1;}50%{opacity:0.6;}}


/* ── BATTLE SCREEN ── */
#battle-screen{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:stretch;justify-content:center;
  background:#000;animation:battleFade 0.4s ease;
}
@keyframes battleFade{from{opacity:0;}to{opacity:1;}}

.battle-root{
  width:100%; height: 100%;
  display:flex;flex-direction:column;
  background:#000;
}

/* Arena top half */
.battle-arena{
  flex:1;
  background:linear-gradient(180deg, #6BAACC 0%, #6BAACC 55%, #7DBE6A 55%, #5A9A4A 100%);
  position:relative;
  min-height:55vh;
}

/* Enemy info box — top left */
.enemy-info{
  position:absolute;top:12px;left:12px;
}
/* Player info box — bottom right */
.player-info{
  position:absolute;bottom:12px;right:12px;
}

.info-box{
  background:#F0E8D0;border:3px solid #584030;
  border-radius:4px;padding:0.5rem 0.8rem;
  font-size:0.5rem;min-width:170px;
  box-shadow:3px 3px 0 #584030;
}
.info-name{font-size:0.6rem;color:#220000;margin-bottom:0.3rem;white-space:nowrap;}
.hp-row{display:flex;align-items:center;gap:0.4rem;margin-bottom:0.2rem;}
.hp-label{font-size:0.45rem;color:#880000;font-weight:bold;}
.hp-track{flex:1;height:7px;background:#888;border-radius:3px;overflow:hidden;border:1px solid #555;}
.hp-fill{height:100%;background:linear-gradient(90deg,#4caf50,#388e3c);border-radius:3px;transition:width 0.5s ease,background 0.3s;}
.hp-num{font-size:0.42rem;color:#444;text-align:right;}

/* Sprite wrap with platform */
.enemy-sprite-wrap{
  position:absolute;right:60px;top:30px;
  display:flex;flex-direction:column;align-items:center;
}
.player-sprite-wrap{
  position:absolute;left:60px;bottom:40px;
  display:flex;flex-direction:column;align-items:center;
}
.sprite-shadow{
  width:70px;height:14px;
  background:rgba(0,0,0,0.25);border-radius:50%;
  margin-top:-4px;
}
.battle-sprite{
  font-size:clamp(3.5rem,8vw,6rem);
  filter:drop-shadow(2px 4px 6px rgba(0,0,0,0.4));
  animation:spriteBob 1.2s ease-in-out infinite;
}
.enemy-spr{ animation-delay:0s; }
.player-spr{ animation-delay:0.6s; }
@keyframes spriteBob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

/* Bottom battle UI */
.battle-bottom{
  display:flex;flex-direction:column;
  background:#303050;border-top:4px solid #FFD700;
  min-height:45vh;
}
.battle-textbox{
  flex:1;background:#F8F4E8;margin:0.5rem;
  border:3px solid #584030;border-radius:4px;
  padding:0.8rem 1rem;
  font-size:0.6rem;color:#220000;
  display:flex;align-items:center;
  min-height:60px;
  box-shadow:inset 2px 2px 4px rgba(0,0,0,0.1);
}
.battle-actions{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0.4rem;margin:0.5rem;
}
.act-btn{
  font-family:'Press Start 2P',monospace;
  font-size:0.45rem;
  background:#F8F4E8;border:3px solid #584030;border-radius:4px;
  padding:0.6rem 0.4rem;cursor:pointer;
  box-shadow:3px 3px 0 #584030;
  color:#220000;line-height:1.6;
  transition:transform 0.1s,box-shadow 0.1s;
}
.act-btn:hover{ background:#FFD700; }
.act-btn:active{ transform:translate(2px,2px);box-shadow:1px 1px 0 #584030; }
.act-special{ border-color:#1565C0; }
.act-special:hover{ background:#E3F2FD; }
.act-heal{ border-color:#2E7D32; }
.act-heal:hover{ background:#E8F5E9; }
.act-flee{ border-color:#C62828; }
.act-flee:hover{ background:#FFEBEE; }

/* ── JUMPSCARE ── */
#jumpscare-screen{
  position:fixed;inset:0;z-index:999;
  display:none;align-items:center;justify-content:center;
  background:#000;
}
#js-inner{
  text-align:center;
  animation:jsShake 0.08s ease infinite;
}
@keyframes jsShake{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  25%{transform:translate(-8px,-8px) rotate(-3deg);}
  75%{transform:translate(8px,8px) rotate(3deg);}
}
#js-face{
  font-size:clamp(8rem,25vw,22rem);
  animation:jsFaceIn 0.25s cubic-bezier(0.34,1.56,0.64,1) forwards;
  filter:drop-shadow(0 0 30px #ff0000);
}
@keyframes jsFaceIn{from{transform:scale(0) rotate(-180deg);}to{transform:scale(1) rotate(0);}  }
#js-text{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(1.5rem,5vw,3.5rem);
  color:#FF1744;
  text-shadow:0 0 20px #FF1744,0 0 40px #FF1744;
  margin-top:0.5rem;
  animation:textFlash 0.15s linear infinite;
}
#js-sub{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(0.6rem,2vw,1rem);
  color:#ff6666;margin-top:0.8rem;
  opacity:0.85;
}
@keyframes textFlash{0%,100%{opacity:1;}50%{opacity:0.7;}}

/* ── OVERLAYS (Game Over / Win) ── */
#gameover-screen,#win-screen{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,0.92);
  display:none;align-items:center;justify-content:center;
}
.overlay-box{
  text-align:center;
  animation:overlayIn 0.5s ease;
}
@keyframes overlayIn{from{opacity:0;transform:scale(0.85);}to{opacity:1;transform:scale(1);}}
.overlay-title{font-size:clamp(1.5rem,5vw,3.5rem);text-shadow:4px 4px 0 #000;margin-bottom:1.2rem;}
.overlay-title.red{color:#FF1744;text-shadow:4px 4px 0 #8B0000,0 0 20px #FF1744;}
.overlay-title.gold{color:#FFD700;text-shadow:4px 4px 0 #8B6300,0 0 30px #FFD700;}
.overlay-sub{font-size:0.6rem;color:#aaa;margin-bottom:0.5rem;}
.overlay-btn{
  font-family:'Press Start 2P',monospace;
  background:#FFD700;color:#000;border:none;
  padding:0.9rem 2rem;font-size:0.7rem;cursor:pointer;
  margin-top:1.5rem;box-shadow:0 4px 0 #8B6300;
  transition:transform 0.1s,box-shadow 0.1s;
}
.overlay-btn:hover{transform:translateY(2px);box-shadow:0 2px 0 #8B6300;}