@font-face {
  font-family: 'Morris';
  src: url('../assets/fonts/MorrisRomanBlack.ttf') format('truetype');
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
body { font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; -webkit-user-select: none; user-select: none; }

#viewport { position: fixed; inset: 0; background: #000; }

#stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 1024px; height: 768px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
}

#bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
#board, #fx, #hud, #screens { position: absolute; inset: 0; }
#fx { pointer-events: none; z-index: 30; }
#hud { z-index: 40; height: 112px; pointer-events: none; }
#hud * { pointer-events: auto; }
#screens { z-index: 60; pointer-events: none; }
#screens > * { pointer-events: auto; }

#loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #c8b48a; font-family: 'Morris', serif; font-size: 28px; letter-spacing: 1px; background: #000;
  z-index: 100;
}

/* ---------------- doors ---------------- */
.door {
  position: absolute; width: 110px; height: 110px; cursor: pointer;
}
.door img { position: absolute; inset: 0; width: 110px; height: 110px; }
.door-glow { opacity: 0; transition: opacity .25s ease; }
.door-item { opacity: 0; transition: opacity .2s ease .12s; width: 84px; height: 84px; left: 13px; top: 13px; }
.door-face { z-index: 3; }
.door.open { cursor: default; }
.board.blocked, #board.blocked { pointer-events: none; }
#board.blocked::after {
  content: ''; position: absolute; inset: 112px 0 0 0; background: rgba(120,0,0,0.12); pointer-events: none;
}

/* ---------------- monsters ---------------- */
.monster {
  position: absolute; width: 110px; height: 110px; z-index: 20; cursor: crosshair;
  display: flex; align-items: center; justify-content: center;
}
.monster-sprite { max-width: 150px; max-height: 150px; image-rendering: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.monster .effect { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.ready-glow { width: 130px !important; height: 130px !important; opacity: .9; pointer-events: none; }
.monster-anim { width: 110px !important; height: 110px !important; }
.hpbar { position: absolute; bottom: 4px; left: 15px; width: 80px; height: 11px; }
.hpbar img { position: absolute; left: 0; top: 0; width: 80px; height: 11px; }
.hp-front { transition: clip-path .25s ease; }

/* ---------------- effects ---------------- */
.effect { position: absolute; pointer-events: none; }
#fx .effect { transform: translate(-8px, -8px); }

/* ---------------- HUD ---------------- */
.hud-bar-img { position: absolute; left: 0; top: 0; width: 1024px; height: 102px; }
.hud-text {
  position: absolute; color: #fff; font-weight: bold; font-size: 24px;
  text-shadow: 1px 1px 2px #000; white-space: pre-line; line-height: 1.05;
}
.hud-health { color: #ff5252; }
.hud-label { font-size: 22px; }
.hud-message {
  width: 423px; height: 53px; left: 17px; top: 40px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 19px; color: #f3e6c8; text-shadow: 1px 1px 2px #000;
  font-family: 'Trebuchet MS', sans-serif;
}
#hud.powered .hud-message { color: #c3ec83; }
#hud.powered::before {
  content: ''; position: absolute; left: 8px; top: 8px; width: 445px; height: 85px;
  border: 3px solid #c3ec83; border-radius: 6px; box-shadow: 0 0 12px #c3ec83; pointer-events: none;
}

.inv-slot { position: absolute; width: 94px; height: 95px; }
.inv-bg { position: absolute; inset: 0; width: 94px; height: 95px; }
.inv-icon { position: absolute; left: 7px; top: 4px; width: 80px; height: 80px; display: none; }
.inv-sel { display: none; }
.inv-slot.equipped { z-index: 2; }
.inv-slot.equipped::after {
  content: ''; position: absolute; inset: -2px; border-radius: 9px;
  border: 3px solid #ffd34a;
  box-shadow: 0 0 14px 4px rgba(255,200,60,0.85), inset 0 0 12px rgba(255,205,70,0.5);
  pointer-events: none;
}
.inv-slot.equipped .inv-icon { filter: drop-shadow(0 0 5px rgba(255,210,90,0.9)); }
.inv-hpbar { position: absolute; left: 7px; bottom: 14px; width: 80px; height: 11px; }
.inv-hpbar img { position: absolute; left: 0; top: 0; width: 80px; height: 11px; }
.inv-dmg {
  position: absolute; right: 4px; top: 2px; min-width: 26px; padding: 0 3px; height: 18px;
  background: rgba(0,0,0,0.6); color: #ff6b6b; font-size: 13px; font-weight: bold;
  border-radius: 3px; text-align: center; line-height: 18px;
}
.abs-btn { position: absolute; width: 97px; height: 39px; cursor: pointer; }

.dmg-float {
  position: absolute; color: #ff3b3b; font-weight: bold; font-size: 26px;
  text-shadow: 1px 1px 2px #000; pointer-events: none;
}

/* ---------------- side action meters ---------------- */
.meters { position: absolute; inset: 0; pointer-events: none; z-index: 35; }
.meters.hidden { display: none; }
.meter {
  position: absolute; width: 60px; top: 122px; bottom: 16px;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: auto; cursor: pointer;
}
.meter-heal { left: 14px; }
.meter-charge { right: 14px; }
.meter-icon { font-size: 26px; margin-bottom: 6px; filter: drop-shadow(0 1px 2px #000); }
.meter-tube {
  position: relative; flex: 1; width: 42px; border-radius: 21px; overflow: hidden;
  background: rgba(0,0,0,0.55); border: 2px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.7);
}
.meter-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  transition: height .3s cubic-bezier(.2,.8,.2,1); border-radius: 0 0 19px 19px;
}
.meter-heal .meter-fill { background: linear-gradient(180deg, #ff8585, #b01010); box-shadow: inset 0 0 14px rgba(255,80,80,.9); }
.meter-charge .meter-fill { background: linear-gradient(180deg, #9fe0ff, #1565c0); box-shadow: inset 0 0 14px rgba(60,190,255,.9); }
.meter-name {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) rotate(-90deg);
  text-align: center; font-size: 13px; font-weight: bold; letter-spacing: 2px;
  color: rgba(255,255,255,0.85); text-shadow: 1px 1px 2px #000; pointer-events: none;
}
.meter-count { margin-top: 6px; font-size: 12px; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px #000; }
.meter:hover .meter-tube { border-color: rgba(255,255,255,0.5); }
.meter.full .meter-tube { animation: meterPulse 1s ease-in-out infinite; }
.meter-heal.full .meter-tube { border-color: #ff5b5b; box-shadow: 0 0 18px #ff3b3b, inset 0 2px 8px rgba(0,0,0,0.6); }
.meter-charge.full .meter-tube { border-color: #4fc3f7; box-shadow: 0 0 18px #29b6f6, inset 0 2px 8px rgba(0,0,0,0.6); }
.meter.spent { opacity: 0.5; cursor: default; }
.meter.spent:hover .meter-tube { border-color: rgba(255,255,255,0.22); }
@keyframes meterPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* yellow "choose your action" pulse (turn step 1) */
@keyframes yellowPulse {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(255,210,40,0.22); }
  50%      { box-shadow: 0 0 22px 8px rgba(255,210,40,0.50); }
}
.meter.await-action .meter-tube {
  animation: yellowPulse 0.85s ease-in-out infinite;
  border-color: rgba(255,210,40,0.9);
}
.monster.await-action {
  animation: yellowPulse 0.85s ease-in-out infinite;
  border-radius: 16px;
}

/* red "match these" pulse behind closed doors (turn step 2) */
@keyframes redPulse {
  0%, 100% { box-shadow: 0 0 6px 2px rgba(225,45,45,0.16); }
  50%      { box-shadow: 0 0 16px 6px rgba(235,35,35,0.42); }
}
.door.match-hint { animation: redPulse 1.05s ease-in-out infinite; border-radius: 10px; }

/* ---------------- screens ---------------- */
.menu-screen, .overlay-screen {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
}
.overlay-screen { background: rgba(0,0,0,0.78); flex-direction: column; gap: 14px; }
.overlay-screen.death { background: rgba(20,0,0,0.85); }

.menu-screen { flex-direction: column; }
.menu-buttons {
  position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.btn { cursor: pointer; transition: transform .08s ease, filter .08s ease; display: block; }
.btn:hover { transform: scale(1.05); filter: brightness(1.1); }
.btn:active { transform: scale(0.97); }

.help-inner, .board-inner, .death-inner, .pause-inner {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 24px; background-size: contain; background-repeat: no-repeat; background-position: center;
}
.help-img { max-width: 860px; max-height: 560px; }
.board-inner { width: 764px; height: 736px; justify-content: center; }
.score-list {
  width: 460px; color: #f3e6c8; font-family: 'Morris', serif; text-align: center;
  max-height: 440px; overflow: auto;
}
.score-list h2 { font-size: 40px; margin-bottom: 16px; color: #ffcf6b; }
.score-row { font-size: 26px; padding: 4px 0; }

.death-inner { width: 700px; min-height: 500px; justify-content: center; background-color: rgba(0,0,0,0.4); border-radius: 10px; }
.death-title { font-family: 'Morris', serif; font-size: 54px; color: #ff5b5b; text-shadow: 2px 2px 4px #000; margin-bottom: 8px; }
.death-stats { display: flex; gap: 50px; color: #f3e6c8; font-size: 22px; text-align: center; margin: 10px 0 18px; }
.death-stats h3 { color: #ffcf6b; margin-bottom: 8px; }
.death-stats .st { line-height: 1.8; }

.pause-inner { width: 360px; min-height: 420px; justify-content: center; gap: 18px; }
.toggle-row { display: flex; align-items: center; gap: 14px; }
.toggle-label { height: 40px; }
.toggle-text { color: #f3e6c8; font-family: 'Morris', serif; font-size: 20px; text-shadow: 1px 1px 2px #000; }
.toggle { width: 70px; cursor: pointer; }

.blood-screen {
  position: absolute; inset: 0; background: #000; opacity: 0; z-index: 55; pointer-events: none;
  transition: opacity 1.2s ease;
}
.blood-screen.show { opacity: 1; }