:root{
  --wood-dark:#2b1c14;
  --wood:#4a3223;
  --wood-light:#6b4a33;
  --parchment:#f3e2c2;
  --cream:#fbf1dd;
  --ember:#e2a24d;
  --ember-soft:#f0c987;
  --ink:#2b1c14;
  --shadow:rgba(20,10,5,0.55);
  --font-pixel:'Press Start 2P', monospace;
  --font-body:'Baloo 2', sans-serif;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:#150d09;
  overflow:hidden;
  font-family:var(--font-body);
  image-rendering:pixelated;
  -webkit-user-select:none;
  user-select:none;
}

#game-wrap{
  position:relative;
  width:960px;
  height:600px;
  margin:0 auto;
  top:50%;
  transform-origin:center center;
  transform:translateY(-50%) scale(var(--ui-scale,1));
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
  border-radius:10px;
  overflow:hidden;
  background:#000;
}

#game-canvas{
  position:absolute;
  top:0;left:0;
  width:960px;
  height:600px;
  image-rendering:pixelated;
  cursor:pointer;
}

.overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:rgba(20,12,8,0.55);
  backdrop-filter:blur(2px);
  transition:opacity .35s ease;
}
.overlay.hidden{ display:none; }

/* ---------- Loading ---------- */
/* ---------- Loading (legacy id no longer in DOM, splash overlay replaces it) ---------- */
.logo-img{
  width:300px;
  image-rendering:pixelated;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,0.6));
}
.logo-float{ animation:floaty 3.2s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-10px); }
}
/* ---------- Menu ---------- */
#menu-screen{ background:rgba(20,12,8,0.35); }
.menu-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.img-btn{
  width:200px;height:58px;
  background-size:100% 100%;
  background-repeat:no-repeat;
  border:none;
  cursor:pointer;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,0.4));
  transition:transform .12s ease, filter .12s ease;
  padding:0;
}
.img-btn:hover{ transform:scale(1.06) translateY(-2px); filter:drop-shadow(0 6px 10px rgba(0,0,0,0.5)) brightness(1.12); }
.img-btn:active{ transform:scale(0.96) translateY(1px); filter:brightness(0.9); }
.img-btn.small{ width:150px;height:44px; margin-top:10px;}
.menu-highscore{
  font-family:var(--font-pixel);
  font-size:11px;
  color:var(--ember-soft);
  text-shadow:2px 2px 0 rgba(0,0,0,0.5);
  margin-top:4px;
}

/* ---------- HUD ---------- */
#hud{
  position:absolute; inset:0;
  pointer-events:none;
  font-family:var(--font-pixel);
}
#hud.hidden{ display:none; }
.hud-top-left, .hud-top-right{
  position:absolute; top:14px;
  display:flex; align-items:center; gap:10px;
}
.hud-top-left{ left:14px; flex-direction:column; align-items:flex-start; }
.hud-top-right{ right:14px; }
.score-pill{
  background:var(--wood-dark);
  border:3px solid var(--ember);
  border-radius:12px;
  padding:8px 14px;
  color:var(--cream);
  font-size:14px;
  display:flex; gap:8px; align-items:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
}
.score-label{ color:var(--ember-soft); font-size:9px; }
.combo-stars{
  display:flex; gap:2px; height:20px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.combo-stars img{ width:20px;height:20px; opacity:0; transition:opacity .2s ease, transform .2s ease;}
.escape-pill{
  background:var(--wood-dark);
  border:3px solid #a8442f;
  border-radius:12px;
  padding:8px 10px;
  display:flex; gap:4px; align-items:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
}
.escape-pill img{ width:16px;height:16px; opacity:0.25; }
.escape-pill img.lost{ opacity:1; filter:drop-shadow(0 0 3px #ff6a4d); }
.icon-btn{
  width:44px;height:44px;
  background-size:100% 100%;
  border:none;
  cursor:pointer;
  pointer-events:all;
  display:flex; align-items:center;justify-content:center;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.4));
  transition:transform .12s ease;
}
.icon-btn:hover{ transform:scale(1.08); }
.icon-btn:active{ transform:scale(0.92); }
.icon-btn.big{ width:64px;height:64px; }
.icon-img{ width:60%; height:60%; }

/* ---------- Panels (pause / options / about) ---------- */
.panel{
  background:linear-gradient(180deg,var(--wood) 0%, var(--wood-dark) 100%);
  border:5px solid var(--wood-light);
  border-radius:16px;
  padding:24px 30px;
  min-width:380px;
  max-width:460px;
  box-shadow:0 16px 40px rgba(0,0,0,0.6), inset 0 0 0 3px rgba(0,0,0,0.25);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.panel-title{
  font-family:var(--font-pixel);
  font-size:16px;
  color:var(--ember-soft);
  text-shadow:2px 2px 0 rgba(0,0,0,0.5);
  margin-bottom:6px;
}
.pause-buttons, .gameover-buttons{
  display:flex; gap:22px; margin-top:6px;
}
.labeled-icon-btn{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer;
}
.labeled-icon-btn span{
  font-family:var(--font-pixel);
  font-size:9px;
  color:var(--cream);
  text-shadow:1px 1px 0 rgba(0,0,0,0.6);
}
.labeled-icon-btn .icon-btn{ pointer-events:none; }

.option-tabs{ display:flex; gap:14px; margin-bottom:4px; }
.tab-icon{ width:40px;height:40px; opacity:0.55; }
.tab-icon:first-child{ opacity:1; filter:drop-shadow(0 0 6px var(--ember)); }

.option-row{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  background:rgba(0,0,0,0.2);
  border-radius:10px;
  padding:8px 12px;
}
.option-label{
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  color:var(--parchment);
  flex:1;
}
.vol-stepper{ display:flex; align-items:center; gap:6px; }
.vol-stepper span{ font-family:var(--font-pixel); font-size:9px; color:var(--cream); width:34px; text-align:center;}
.arrow-btn{ width:26px;height:26px; cursor:pointer; transition:transform .1s ease;}
.arrow-btn:hover{ transform:scale(1.15); }
.arrow-btn:active{ transform:scale(0.9); }
.toggle-btn, .checkbox-btn{ width:52px;height:auto; cursor:pointer; transition:transform .1s ease;}
.checkbox-btn{ width:30px; }
.toggle-btn:hover, .checkbox-btn:hover{ transform:scale(1.08); }

.about-row{
  font-family:var(--font-body);
  font-weight:600;
  font-size:13.5px;
  color:var(--parchment);
  display:flex; align-items:center; gap:10px;
  text-align:left;
  line-height:1.4;
}
.paw-icon{ width:22px;height:22px; flex-shrink:0; }

/* ---------- Game Over ---------- */
.gameover-frame{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  animation:popin .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes popin{
  0%{ transform:scale(0.7); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
.gameover-art{ width:340px; image-rendering:pixelated; filter:drop-shadow(0 10px 24px rgba(0,0,0,0.6)); }
.gameover-stats{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:-14px; }
.stat-row{
  font-family:var(--font-pixel);
  font-size:13px;
  color:var(--cream);
  text-shadow:2px 2px 0 rgba(0,0,0,0.6);
}
.stars-earned{ display:flex; gap:6px; margin-top:2px; }
.stars-earned .star-icon{ width:30px;height:30px; image-rendering:pixelated; opacity:0.22; filter:grayscale(1); transform:scale(0.85); transition:all .3s ease; }
.stars-earned .star-icon.earned{ opacity:1; filter:drop-shadow(0 0 6px #ffd76a); transform:scale(1); }

/* ---------- Cinematic Splash ---------- */
.splash-overlay{
  position:absolute; inset:0;
  z-index:100;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  transition-property: opacity;
  transition-timing-function: ease;
  opacity:1;
}
.splash-overlay.faded-out{
  opacity:0;
  pointer-events:none;
}
.splash-content{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  opacity:0;
  transition-property: opacity;
  transition-timing-function: ease;
}
.splash-content.visible{ opacity:1; }

.splash-logo{
  width:260px;
  image-rendering:pixelated;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,0.7));
}
.splash-madewith{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin-top:4px;
}
.splash-line-engine{
  font-family:var(--font-pixel);
  font-size:12px;
  color:var(--ember-soft);
  letter-spacing:1px;
  text-shadow:2px 2px 0 rgba(0,0,0,0.6);
}
.splash-line-studio{
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  color:#9a8570;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.splash-role{
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  color:#9a8570;
  letter-spacing:4px;
  text-transform:uppercase;
}
.splash-name{
  font-family:var(--font-pixel);
  font-size:22px;
  color:var(--cream);
  text-shadow:3px 3px 0 rgba(0,0,0,0.6);
  margin-top:4px;
}
.splash-tagline{
  font-family:var(--font-body);
  font-style:italic;
  font-weight:600;
  font-size:16px;
  color:var(--parchment);
  text-shadow:2px 2px 0 rgba(0,0,0,0.55);
  max-width:480px;
  text-align:center;
  line-height:1.5;
  padding:0 20px;
}

@media (max-width: 1000px){
  #game-wrap{ width:100vw; }
}