/*======================================================
    全域設定
======================================================*/

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: "Noto Sans TC", sans-serif;
}

body.screen-darken {
  animation: darkFlash 1s ease-out forwards;
}

@font-face {
  font-family: "PixelZH";
  src: url("https://cdn.jsdelivr.net/gh/kicyou/fonts/zpix.woff2") format("woff2");
}

.pixel, .shop, .hud, .monster-stat, .pixel-btn {
  font-family: "PixelZH", monospace !important;
  image-rendering: pixelated;
}


button,
img,
div {
  outline: none !important;
  user-select: none;
}


/*======================================================
    荒野背景（可點擊攻擊怪物）
======================================================*/

.wild-area {
  position: absolute;
  inset: 0;
  background: url('img/wild.jpg') center/cover no-repeat;
  cursor: pointer;
  z-index: 0;
  transition: filter 0.6s ease;
}

.wild-area.screen-darken {
  animation: darkFlash 1s ease-out forwards;
}

@keyframes darkFlash {
  0% { filter: brightness(100%); }
  100% { filter: brightness(20%); }
}


/*======================================================
    玩家 HUD
======================================================*/

.hud {
  position: absolute;


  font-family: "PixelFont";
  color: #fff;
  z-index: 10;

  top: 10px;
  left: 10px;

  width: 200px;

  line-height: 1.6;
  image-rendering: pixelated;

  padding: 20px 24px !important;
  font-size: 20px !important;
  border: 5px solid #3d250e !important;

  background: rgba(0, 0, 0, 0.55);
  box-shadow:
    inset 0 0 0 4px #7a4c20,
    inset 0 0 0 8px #3d250e;
}

.hud-row {
  margin-bottom: 8px;
}

.hud-row.stage {
  font-size: 22px !important;
  color: #ffea57 !important;
  text-shadow:
    3px 3px 0 #000,
    -3px 3px 0 #000,
    3px -3px 0 #000,
    -3px -3px 0 #000;
}


/*======================================================
    商店 UI（像素木牌）
======================================================*/

.shop {
  position: fixed;

  top: 0px;
  right: 0px;
  bottom: 0px;

  width: 280px;

  padding: 18px 16px 20px 16px;

  overflow-y: auto;
  overflow-x: hidden;

  background: #c49a6c;
  image-rendering: pixelated;
  color: #fff;
  z-index: 12;

  /* 四邊木框 — 基於左框風格完整複製 */
  border: 6px solid #3d250e;

  /* 內部層次陰影 — 完全保留你原本美術風格 */
  box-shadow:
    inset 0 0 0 4px #513115,
    inset 0 0 0 8px #2b1a0a,
    inset 0 0 15px #000,
    0 0 15px rgba(0,0,0,0.55);

  /* 原本的木紋背景 */
  background-image:
    repeating-linear-gradient(
      90deg,
      #caa676,
      #caa676 6px,
      #c49a6c 6px,
      #c49a6c 12px
    );

}


.shop::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);  /* 美化，選擇性 */
}

/* 滾動條 */
.shop::-webkit-scrollbar {
  width: 12px;
}
.shop::-webkit-scrollbar-thumb {
  background: #7a4c20;
  border: 2px solid #c49a6c;
}

/* 商店內區塊 */
.shop-item {
  padding: 12px 2px;
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
}

.shop-item, .shop-info {
  word-break: break-all;
  white-space: normal;
}

.shop-info div,
.shop-item span {
  font-size: 16px;
  color: #fff;
}

.pixel-line,
.shop-item {
  border-bottom: 4px solid #2b1a0a !important;
}

.shop h1 {
  font-size: 30px;
  color: #fcd86d;
  margin: 10px 0 0px 0;
  text-shadow:
    3px 3px 0 #000,
    -3px 3px 0 #000,
    3px -3px 0 #000,
    -3px -3px 0 #000;
}

.shop h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0 6px 0;
  color: #ffe9a6;
  text-shadow:
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000;
}


/* Pixel Button */
.pixel-btn {
  font-family: "PixelFont";
  padding: 8px;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
  transition: 0.05s;
  image-rendering: pixelated;
  font-size: 18px !important;
  border: 4px solid #000 !important;
  background: #ffe372 !important;
}

.pixel-btn:hover {
  background: #fff08c !important;
}

.pixel-btn:active {
  transform: translateY(2px);
  background: #ffc947;
}

.boss-btn {
  background: #ff5a5a !important;
  color: #fff !important;
}


/*======================================================
    怪物圖片
======================================================*/

.monster-img {
  position: absolute;
  width: 260px;
  height: auto;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  image-rendering: pixelated;
}

/* 出生動畫 */
.spawn-fade {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translate(-50%, -55%) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}


/*======================================================
    怪物 HP / ATK 顯示
======================================================*/

.monster-stat {
  position: absolute;
  transform: translateX(-50%);

  top: 23%;
  left: 50%;
  font-family: "PixelNES";
  font-size: 22px;
  
  pointer-events: none;
  user-select: none;
  z-index: 20;

  font-weight: 900;
  color: rgb(255, 234, 0) !important;
  text-shadow:
    3px 3px 0 #000,
    -3px 3px 0 #000,
    3px -3px 0 #000,
    -3px -3px 0 #000;
}

/* HP 條 */
.monster-hp-bar {
  position: absolute;
  left: 50%;
  top: 29%;
  transform: translateX(-50%);
  width: 260px;
  height: 18px;
  background: #00000066;
  border: 3px solid #fff;
  border-radius: 8px;
  image-rendering: pixelated;
}

.monster-hp {
  height: 100%;
  background: linear-gradient(90deg, #ff4a4a, #ff8f8f);
  border-radius: 8px;
}

#monsterStatText:focus,
.monster-stat:focus {
  outline: none !important;
}

/*======================================================
    怪物攻擊倒數條
======================================================*/

.monster-timer-bar {
  position: absolute;
  left: 50%;
  top: 33%;
  transform: translateX(-50%);
  width: 260px;
  height: 12px;
  background: #5c3d00;
  border: 3px solid #ffffff;
  border-radius: 8px;
  image-rendering: pixelated;
}

.monster-timer {
  width: 100%;
  height: 100%;
  background: #ffcc00;
  border-radius: 6px;
}


/*======================================================
    關卡進度條
======================================================*/

.stage-progress-bar {
  position: absolute;
  left: 50%;
  top: 37%;
  transform: translateX(-50%);
  width: 260px;
  height: 10px;
  background: #1d1d1d;
  border: 3px solid #fff;
  border-radius: 6px;
  image-rendering: pixelated;
}

.stage-progress {
  width: 0%;
  height: 100%;
  background: #1aff7a;
  border-radius: 6px;
}


/*======================================================
    浮動文字
======================================================*/

.damage-floating {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  font-family: "PixelFont";
  font-size: 22px;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
}

.damage-anim {
  animation: dmgFloat 1s ease-out;
}

@keyframes dmgFloat {
  0% { opacity: 1; transform: translate(-50%, -10px); }
  100% { opacity: 0; transform: translate(-50%, -60px); }
}


/*======================================================
    加血效果文字
======================================================*/

.heal-floating {
  position: absolute;
  left: 50%;
  bottom: 140px;
  transform: translateX(-50%);
  font-family: "PixelFont";
  color: #00ff00;
  font-size: 20px;
  opacity: 0;
  pointer-events: none;
}

.heal-animation {
  animation: healFloat 1s ease-out;
}

@keyframes healFloat {
  0% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -40px); }
}


/*======================================================
    玩家死亡字樣
======================================================*/

.death-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  font-family: "PixelFont";
  font-size: 48px;
  color: #ff0000;
  opacity: 0;
  display: none;
  z-index: 30;
  animation: deathPop 1.2s ease-out forwards;
}

@keyframes deathPop {
  0% { opacity: 0; transform: translate(-50%, -20px) scale(0.5); }
  100% { opacity: 1; transform: translate(-50%, -20px) scale(1); }
}


/*======================================================
    怪物受擊 / 攻擊動畫
======================================================*/

.hit-flash {
  animation: flashRed 0.15s ease;
}

@keyframes flashRed {
  0% { filter: brightness(200%) hue-rotate(-60deg); }
  100% { filter: none; }
}

.monster-bump {
  animation: monsterBump 0.15s ease-out;
}

@keyframes monsterBump {
  0%   { transform: translate(-50%, -50%); }
  40%  { transform: translate(calc(-50% - 10px), -50%); }
  100% { transform: translate(-50%, -50%); }
}



/*======================================================
    死亡爆裂特效
======================================================*/

#explosionContainer {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
}

.explosion-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: yellow;
  border-radius: 50%;
  animation: explode 0.55s ease-out forwards;
  image-rendering: pixelated;
}

@keyframes explode {
  from { transform: translate(0,0) scale(1); opacity: 1; }
  to   { transform: translate(var(--tx), var(--ty)) scale(0.1); opacity: 0; }
}


/*======================================================
    遊戲結束畫面
======================================================*/

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items:center;
  justify-content:center;
  z-index: 50;
}

/* =============================
   RPG 木製結束面板
============================= */
.overlay-content {
  background: #c49a6c !important;
  padding: 32px 48px !important;
  border-radius: 0 !important;

  border: 6px solid #3d250e !important;
  box-shadow:
    inset 0 0 0 4px #513115,
    inset 0 0 0 8px #2b1a0a,
    inset 0 0 12px #000,
    0 0 25px rgba(0,0,0,0.6);

  font-family: "PixelZH" !important;
  font-size: 20px;
  text-align:center;
  image-rendering: pixelated;
}

.overlay-content h2 {
  font-size: 32px !important;
  margin-bottom: 12px;
  color: #ffeb77;
  text-shadow:
    3px 3px 0 #000,
    -3px 3px 0 #000,
    3px -3px 0 #000,
    -3px -3px 0 #000;
}

.overlay-content p {
  color: #fff7d1;
  margin-bottom: 22px;
}



/*======================================================
    其他
======================================================*/

img:focus,
button:focus,
div:focus {
  outline: none !important;
}

.pixel {
  font-family: "PressStart2P", monospace;
  image-rendering: pixelated;
  letter-spacing: 1px;
  text-shadow:
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000;
}

.death-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 9999;
}

.death-mask.active {
  opacity: 1;
  background: rgba(0,0,0,0.6);
}

/* =======================================
   遊戲開始介紹 Overlay
======================================= */

.intro-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.start-btn {
  margin-top: 20px;
  font-size: 20px;
}


.intro-panel {
  width: 850px;              
  padding: 15px 15px;
  background: #c49a6c;
  border: 6px solid #3d250e;

  box-shadow:
    inset 0 0 0 4px #513115,
    inset 0 0 0 8px #2b1a0a,
    inset 0 0 12px #000,
    0 0 18px rgba(0,0,0,0.6);

  text-align: center;
  color: #fff7d1;
  font-family: "PixelZH";
  image-rendering: pixelated;
}


.intro-title {
  font-size: 30px;
  color: #ffe177;
  margin-bottom: 6px;
  text-shadow:
    3px 3px 0 #000,
    -3px 3px 0 #000,
    3px -3px 0 #000,
    -3px -3px 0 #000;
}

.intro-subtitle {
  font-size: 20px;
  margin-bottom: 12px;
  color: #ffb85a;
}

.intro-text {
  line-height: 1.45;
  font-size: 15px;
  margin-bottom: 16px;
  color: #fff3d0;
}


/* 測試按鈕：木框 + 黃底 + 白字 */
.auto-test-btn {
  background: #ffd44d !important;
  border: 4px solid #3d250e !important;
  color: #ffffff !important;
  font-size: 18px !important;
  margin-top: 6px;
  margin-bottom: 6px;
  image-rendering: pixelated;
  box-shadow:
    inset 0 0 0 3px #7a4c20,
    inset 0 0 0 6px #3d250e;
}

.auto-test-btn:active {
  transform: translateY(2px);
  background: #ffbf00 !important;
}

/* =============================
      BOSS 戰提示面板
============================= */
.boss-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items:center;
  justify-content:center;
  z-index: 9999;
}

.boss-panel {
  width: 640px;
  padding: 32px 40px;
  background: #c49a6c;
  border: 6px solid #3d250e;

  box-shadow:
    inset 0 0 0 4px #513115,
    inset 0 0 0 8px #2b1a0a,
    inset 0 0 12px #000,
    0 0 18px rgba(0,0,0,0.6);

  text-align: center;
  color: #fff7d1;
}

.boss-title {
  font-size: 30px;
  margin-bottom: 18px;
  color: #ffe177;
  text-shadow:
      3px 3px 0 #000,
      -3px 3px 0 #000,
      3px -3px 0 #000,
      -3px -3px 0 #000;
}

.boss-text {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.boss-btn-row {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.boss-enter {
  background: #ff5e5e !important;
  color: #fff !important;
}

.boss-cancel {
  background: #ffe372 !important;
  color: #000 !important;
}

.shop-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.top-right-buttons {
  position: fixed;
  top: 12px;
  right: 300px;  /* 與你的商店固定距離 */
  display: flex;
  flex-direction: column; /* ★ 讓 Auto 在上、Boss 在下 */
  gap: 8px;
  z-index: 9999;
}

.mini-test, .boss-mini {
  width: 80px;
  height: 34px;
  font-size: 16px !important;
  image-rendering: pixelated;
}

.mini-test {
  background: #ffd858 !important;
  color: #000000 !important;
}

.boss-mini {
  background: #ff6a6a !important;
  color: #000000 !important;
}

/* ==========================================================
   Auto / Boss 按鈕區 —— 貼在商店左側，不使用 fixed！
   ========================================================== */
.shop-buttons {
  position: absolute;
  top: 15px;
  right: 330px; /* 與商店寬度一致 → 貼在商店左邊 */
  display: flex;
  flex-direction: column; /* Auto 在上，Boss 在下 */
  gap: 8px;
  z-index: 5;
}

.shop-buttons .pixel-btn {
  width: 85px;
  text-align: center;
  padding: 6px 0;
  font-size: 16px !important;
  image-rendering: pixelated;
}

.mini-test {
  background: #ffd858 !important;
  color: #000;
}

.boss-mini {
  background: #ff6a6a !important;
  color: #fff;
}