html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: monospace;
    overflow: hidden; /* 防止整體出現雙重滾動 */
}

body {
    display: flex;
}

/* === sidebar：改成 3 欄網格 === */
.sidebar{
    width: 200px;
    background: rgb(238,238,78);
    display: grid;

    /* 1-三欄固定 50px 高度的網格（跟之前相同） */
    grid-template-columns: repeat(3, 50px);
    grid-auto-rows: 50px;

    gap: 10px;
    padding: 20px 0;              /* 上下留 20px，左右 0 */

    /* 2-重點：整個網格置中，且每格內容也置中 */
    justify-content: center;      /* 置中整個 grid */
    justify-items: center;        /* 置中每個 cell 裡的 img */
}

/* 原本圖片的 hover 動畫、大小不變 */
.sidebar img{
    width: 50px;
    height: 50px;
    transition: transform .2s ease;
}

.sidebar img:hover{
    cursor: pointer;
    transform: scale(1.1);
}

.topnav {
    background-color: pink;
    height: 60px;
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    justify-content: flex-start;
    position: relative;
    flex-shrink: 0;
}

.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* 保證只有 gamefield 滾動 */
}

.gamefield {
  flex: 1;

  /* 換成草皮貼圖；auto 重複鋪滿任何尺寸 */
  background-image: url("Textures/grass.jpg");
  background-repeat: repeat;           /* 不想平鋪可用 no-repeat */
  /* 若草圖很大也可加 background-size: 100% 100%;（視需求）*/

  width: 2000px;
  height: 1500px;
  overflow: auto;
  position: relative;
}

.container-scroll {
    flex: 1;
    overflow: auto;
}

.sidebar img {
    width: 50px;
    height: 50px;
    margin-top: 10px;
    transition: transform 0.2s ease;
}

.sidebar img:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.topnav img {
    width: 50px;
    height: 50px;
    margin: 0 5px;
    /*
    position: absolute;----如果要很多 img 水平排列就不可以用 absolute
    left: 10px;
    top: 10px;
    */
}

.topnav img:hover {
    cursor: pointer;
}

/* 顯示木頭數量的字體大小 */
.topnav_font {
  font-size: 28px;   /* 想多大就寫多大，例如 28px 或 2rem */
  font-weight: bold; /* 可選：加粗讓數字更醒目 */
}

.clone-image {
    position: absolute;
    pointer-events: none;
    opacity: 0.6;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 50px;
    height: 50px;
}

/* 在 gamefield 的 png 被點擊 */
.selected-image {
    /*outline: 4px solid rgb(224, 109, 117); /* 外框比圖片大 */
    /*outline: 4px solid rgba(255, 0, 0, .45);   /* 45 % 不透明的紅色 */
    outline: 4px solid rgba(96, 237, 108, 0.45);   /* 45 % 不透明的紅色 */
    box-sizing: border-box;
    border-radius: 5px;
}

/* 兩個 png 對齊線 */
.align-line {
    position: absolute;
    background-color: rgba(255, 0, 0, 0.3);
    z-index: 999;
    pointer-events: none;
}

/* popup */
.context-menu {
  position: absolute;
  background-color: white;
  border: 1px solid gray;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  z-index: 3000; /* 確定壓過其他彈窗 */
  width: 100px;
  display: none;
}

.menu-item {
  padding: 8px;
  cursor: pointer;
}

.menu-item:hover {
  background-color: lightgray;
}

/* cloud 上傳 */
.cloud-popup{
  position:fixed;          /* 脫離 flex 版面計算 */
  inset:0;                 /* top:0; right:0; bottom:0; left:0; 的簡寫 */
  width:100vw;             /* 保險起見，用視口單位 */
  height:100vh;
  background:rgba(0,0,0,.7);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:2000;            /* 比 .context-menu(2000) 還大也無妨 */
}

.cloud-popup-content {
    margin:auto;             /* double insure 置中 */
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto;
    position: relative;
}

.cloud-map-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.cloud-map-list img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border 0.3s;
}

.cloud-map-list img:hover {
  border: 3px solid #4CAF50;
}

.close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}

/* === map size popup（和 cloud-popup 幾乎一樣） === */
.size-popup {
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,.7);
  z-index:2000;
}

.size-popup-content {
  background:#fff;
  border-radius:8px;
  padding:20px 30px;
  max-width:90%;
  text-align:center;
  position:relative;
}

.size-form label {
  cursor:pointer;
  line-height:2;
}

.btn-confirm {
  padding:6px 20px;
  border:none;
  border-radius:4px;
  background:#4CAF50;
  color:#fff;
  cursor:pointer;
}

.btn-confirm:hover {
  background:#3c9641;
}

/* === intro popup（地圖進場說明） === */
.intro-popup {
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,.7);
  z-index:2500; /* 比 size-popup 再高一層，確保最先顯示 */
}

.intro-popup-content {
  background:#fff;
  border-radius:8px;
  padding:20px 30px;
  max-width:90%;
  text-align:center;
  position:relative;
}

.intro-buttons {
  margin-top:14px;
}

/* NPC 不要搶到滑鼠事件，也避免選取反白 */
/*
.npc {
  user-select: none;
}
*/
/* ========= 目標箭頭：浮動動畫 & 置於士兵之上 ========= */
@keyframes arrow-bob {
  0%   { transform: translateY( 0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY( 0); }
}

.arrow-marker {                /* 套在 <img> 上的 class */
  animation : arrow-bob 0.8s ease-in-out infinite;
  z-index   : 1600;            /* 比 .red-zone(1500) 還高 */
  pointer-events: none;        /* 不阻擋滑鼠 */
}

.worker { pointer-events:none; user-select:none; }
.soldier{ pointer-events:auto; }

/* ===== 拖曳框選士兵 ===== */
.select-box{
  position:absolute;
  border:2px solid #3cff00;   /* 綠色外框，可自行調色 */
  background:rgba(60,255,0,.15);
  pointer-events:none;        /* 不能擋到滑鼠事件 */
  z-index:9999;               /* 永遠蓋在最上層 */
}

/* 以下是 textarea */
#editCode{
  width:100%;
  height:550px;
  font-family:monospace;
  font-size:28px;
  display:block;          /* 關鍵：不要再當 inline-block */
  box-sizing:border-box;  /* （可選）計入 padding / border */
}

/* ===== 血條容器（預設隱藏） ===== */
.healthbar {
  position: absolute;
  height: 10px;          /* 想改高度就改這裡 */
  pointer-events: none;  /* 讓滑鼠穿透 */
  display: none;         /* 沒受傷前整條都不顯示 */
}

/* 紅色底（damage.png） */
.healthbar-damage,
.healthbar-health {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

/* 綠色覆蓋層（health.png）——會動態改 width */
.healthbar-health {
  transition: width .15s linear;  /* 損血時有個平滑動畫 */
}

/* --- textarea 行號 --- */
.code-wrapper{                /* 讓行號和 textarea 並排 */
  display:flex;               
  font-family:monospace;       /* 與 textarea 字型一致 */
}

.line-numbers{                /* 行號欄本身 */
  user-select:none;            /* 不能選取 */
  text-align:right;            
  padding:4px 8px 0 4px;      /* 右對齊、留左右間距 */
  color:#888;
  background:#f4f4f4;
  border-right:1px solid #ddd;
}

.line-numbers span{
  display:block;
  line-height:inherit;   /* 跟父元素一致 */
  margin:0;              /* 保險起見，避免瀏覽器插入預設 margin */
}

/* 半透明紅圈 (Red Alert) —— 只在拖曳時暫時顯示 */
.red-zone{
  position:absolute;
  width:300px;                 /* 直徑 = 150px × 2 */
  height:300px;
  pointer-events:none;         /* 讓滑鼠穿透 */
  opacity:.35;                 /* 半透明 */
  z-index:1200;                /* 蓋在建築上，但低於選單/彈窗 */
}

/* === Fog of War ================================ */
.fog-layer{
  position:absolute;
  inset:0;                 /* 貼滿整個 gamefield */
  pointer-events:none;     /* 讓滑鼠事件穿透 */
  z-index: 1500;           /* 高於地形 & 建築，低於選單/彈窗 */
}

.fog-tile{
  position:absolute;
  width:200px; height:200px;      /* 霧顆粒大小；想更細就改小 */
  /*background:#000;*/
  background:#2b2a2a;                /* 純黑霧；改成 rgba(0,0,0,.7) = 灰霧 */
}

/* ===== 士兵生產倒數--冷卻 ===== */
.cooldown-text{
  position: absolute;
  /* 不要背景與邊框 -------------------------------- */
  background: transparent;   /* 或直接刪掉這行 */
  border: none;

  padding: 0;                /* 留 0 或保留原來 2px 皆可 */
  font: 700 28px Impact;
  line-height: 1;
  color: #fff;               /* 白字 */

  /* 可選：加 1px 黑色描邊，在淺色草皮上仍清楚 */
  -webkit-text-stroke: 1px #000;   /* Chrome / Edge / Safari */
  /* text-shadow 亦可：
  text-shadow: 0 0 2px #000, 0 0 3px #000;
  */

  pointer-events: none;
  z-index: 1550;
  transform: translateX(-50%);
}

.projectile{
  pointer-events:none;
  z-index:5;
}

/* ======== Modal Overlay----win lose popup ======== */
.modal{
  position:fixed; left:0; top:0; width:100%; height:100%;
  background:#71a7d7;  
  display:none;             /* 預設隱藏 */
  align-items:center; justify-content:center;
  z-index:9999;
}
/* ======== Modal Box ======== */
.modal-content{
  background:rgba(120, 235, 168, 0.6);
  border-radius:12px;
  padding:40px 60px;
  box-shadow:0 0 15px rgba(0,0,0,.5);
  text-align:center;
  color:#fff;
  animation:pop 0.25s ease-out;
}
@keyframes pop{
  from{ transform:scale(.8); opacity:0; }
  to  { transform:scale(1); opacity:1; }
}
.modal-content h2{
  margin:0 0 24px;
  font-size:32px;
  letter-spacing:2px;
}
.modal-content button{
  padding:8px 28px;
  font-size:18px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  background:#ffb400;
  color:#000;
  transition:filter .2s;
}
.modal-content button:hover{
  filter:brightness(1.1);
}