/* 像素 RPG 電子名片 — 骨架 (古銅色 + 木頭質感) */
:root{
  --bronze:#a06840;
  --bronze-hi:#d49060;
  --bronze-dk:#5a3820;
  --gold:#c89058;
  --gold-hi:#e8b878;
  --wood:#8b5a2b;
  --wood-dk:#5c3818;
  --text:#f5e4be;
  --text-dim:#c9a878;
  --hp:#e53b3b;
  --mp:#3b6ee5;
  --exp:#4be569;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{
  min-height:100%;
  font-family: 'Zpix', 'Press Start 2P', 'Courier New', monospace;
  background: radial-gradient(ellipse at top, #2a1a10 0%, #100804 100%);
  color:var(--text);
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
}
body{ padding:20px 8px 40px; display:flex; justify-content:center; }
.wrap{ display:flex; flex-direction:column; gap:14px; width:100%; max-width:400px; align-items:center; }
.card{
  position:relative;
  width:100%;
  aspect-ratio: 1536 / 2752;
  background-image: url("assets/frame5.png");
  background-size: 100% 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.65));
}
.ov{ position:absolute; }
[contenteditable]{ outline:none; }
[contenteditable]:focus{
  background:rgba(255,208,80,0.2);
  box-shadow: 0 0 0 2px var(--gold-hi);
  border-radius:2px;
}

/* ========== 冒險家 名字（金屬會員名牌） ========== */
.ov-name{
  top: 8.5%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
  min-width: 100px;
  max-width: 60%;
  text-align:center;
  color: #fff2d8;
  font-size: clamp(11px, 3.2vw, 13px);
  letter-spacing: 3px;
  text-shadow: 1px 1px 0 #2a1810, 0 0 4px rgba(0,0,0,0.5);
  padding: 2px 22px;
  min-height: 18px;
  white-space: nowrap;
  background:
    linear-gradient(180deg,
      #d4b070 0%,
      #a67840 30%,
      #7a4820 55%,
      #a67840 80%,
      #d4b070 100%);
  border: 2px solid #3a1e10;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 #f0d090,
    inset 0 -1px 0 #4a2810,
    inset 2px 0 0 rgba(255,220,150,0.35),
    inset -2px 0 0 rgba(0,0,0,0.35),
    0 2px 0 #1a0a04,
    0 4px 8px rgba(0,0,0,0.55);
  position: relative;
}
.ov-name::before, .ov-name::after{
  content:"";
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:6px; height:6px;
  background: radial-gradient(circle at 30% 30%, #ffe7a0 0%, #a06830 50%, #3a1e10 100%);
  border-radius:50%;
  box-shadow: 0 0 0 1px #1a0a04, inset 0 -1px 0 rgba(0,0,0,0.5);
}
.ov-name::before{ left: 4px; }
.ov-name::after{ right: 4px; }
.ov-name:empty::before{
  content: attr(data-placeholder);
  color: rgba(255,255,255,0.35);
  opacity: 0.9;
  position:static;
  transform:none;
  width:auto; height:auto;
  background:none;
  box-shadow:none;
  border-radius:0;
}

/* ========== 角色資訊 (第一個大面板) ========== */
.ov-info{
  top: 16%;
  left: 7%;
  right: 7%;
  width: auto;
  height: 15%;
  padding: 3px 6px 4px;
  display:flex;
  flex-direction:column;
  gap: 3px;
}
.info-top{
  display:flex;
  gap: 6px;
  min-height: 0;
  flex: 1 1 0;
  overflow: hidden;
}
.ov-info .avatar-box{
  position:relative;
  flex: 0 0 auto;
  width: 24%;
  aspect-ratio: 1 / 1;
  align-self: stretch;
  max-height: 100%;
  background: #1a1210;
  border:3px solid var(--bronze);
  box-shadow:
    inset 0 0 0 1px #3a1e10,
    inset 0 0 0 2px var(--bronze-hi),
    2px 2px 0 #2a1810;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border-radius:3px;
}
.ov-info .avatar-box img{
  width:100%; height:100%; object-fit:cover;
  image-rendering:pixelated;
  display:none;
}
.ov-info .avatar-box.has-img img{ display:block; }
.ov-info .avatar-box.has-img .avatar-hint{ display:none; }
.avatar-hint{
  font-size:9px;
  color: var(--gold-hi);
  background: rgba(0,0,0,0.55);
  padding: 2px 5px;
  border-radius:2px;
  text-shadow: 1px 1px 0 #000;
}

.stats-grid{
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: 0 8px;
  padding: 0 4px;
  font-size: clamp(8px, 2vw, 10px);
  align-content: stretch;
  overflow: hidden;
}
/* 8 項屬性用 2x4，第 8 格是轉職 */
.stats-grid .locked-field{
  color: var(--gold-hi);
  opacity: 0.95;
  cursor: default;
}
.stats-grid .locked-field.dev-editable{
  cursor: text;
  outline: 1px dashed var(--gold-hi);
}
.job-title-line{
  font-size: 10px;
  color: var(--gold-hi);
  text-align:center;
  padding:2px 0;
  letter-spacing:1px;
}
.stats-grid .s{
  display:flex; align-items:center; gap:4px;
  line-height:1;
  white-space:nowrap;
}
.stats-grid .s span{ color: var(--text); opacity:0.9; }
.stats-grid .s b{
  color: var(--gold-hi);
  font-weight:normal;
  text-shadow: 1px 1px 0 #000;
  cursor:text;
  min-width: 18px;
}

.bars{
  flex: 0 0 auto;
  display:flex; flex-direction:column;
  gap: 2px;
}
.bar-row{
  display:flex; align-items:center; gap:6px;
  font-size:10px;
}
.bar-row label{
  width:26px;
  color: var(--gold-hi);
  text-shadow:1px 1px 0 #000;
  font-weight:bold;
}
.bar{
  flex:1;
  height:9px;
  background:#0a0a0a;
  border:1px solid #000;
  position:relative;
  overflow:hidden;
  border-radius:2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.bar .fill{ height:100%; width:100%; transition: width 0.3s steps(20); }
.bar.hp .fill{ background: linear-gradient(to bottom, #ff9090, var(--hp) 45%, #7a1414); }
.bar.mp .fill{ background: linear-gradient(to bottom, #82a4ff, var(--mp) 45%, #1b3a89); }
.bar.exp .fill{ background: linear-gradient(to bottom, #a2ffb0, var(--exp) 45%, #1b7a2a); }
.bar span{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:#fff;
  text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
  letter-spacing:1px;
}

/* ========== 公司 ========== */
.ov-company{
  top: 36%;
  left: 8%;
  right: 8%;
  width: auto;
  height: 12.5%;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap: 10px;
  padding: 4px 6px;
}
.company-logo{
  position:relative;
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  background:#1a1210;
  border:2px solid var(--bronze);
  box-shadow: inset 0 0 0 1px #3a1e10, inset 0 0 0 2px var(--bronze-hi);
  border-radius:3px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.company-logo img{
  width:100%; height:100%;
  object-fit:contain;
  image-rendering:pixelated;
  display:none;
}
.company-logo.has-img img{ display:block; }
.company-logo.has-img .logo-hint{ display:none; }
.logo-hint{
  color: var(--gold-hi);
  font-size: 9px;
  letter-spacing:1px;
  text-shadow: 1px 1px 0 #000;
}
.reset-logo{
  position:absolute;
  top:-6px; right:-6px;
  width:16px; height:16px;
  background:rgba(0,0,0,0.85);
  color:var(--gold-hi);
  font-size:9px;
  border:1px solid var(--gold);
  border-radius:50%;
  cursor:pointer;
  display:none;
  padding:0;
  line-height:1;
  z-index:3;
}
.company-logo.has-img .reset-logo{ display:block; }

.company-text{
  flex: 1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
  min-width:0;
}
.ov-company .c-line1{
  color: #fff2d8;
  font-size: clamp(12px, 3.6vw, 15px);
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #3a1e10, 2px 2px 0 rgba(0,0,0,0.5);
}
.ov-company .c-line2{
  color: var(--gold-hi);
  font-size: clamp(9px, 2.6vw, 11px);
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #3a1e10;
}

/* ========== 技能：圖示 + 名稱條 ========== */
.ov-skills{
  top: 55%;
  left: 6%;
  right: 6%;
  width: auto;
  height: 21.5%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: column;
  gap: 2px 8px;
  padding: 6px 3% 6px 3%;
}
.skill-row{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width:0;
  padding: 2px 4px;
}
.skill-icon{
  flex: 0 0 auto;
  width: 30px; height: 30px;
  background-size: 100% 100%;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  border: 2px solid var(--bronze-dk);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #1a0a04;
  cursor:pointer;
  background-color: #2a1810;
  transition: transform 0.08s;
}
.skill-row.empty .skill-icon{
  background: radial-gradient(circle at 30% 30%, #5a4030 0%, #2a1810 80%);
}
.skill-icon:hover{ transform: scale(1.1); }
.skill-name{
  flex: 1 1 auto;
  min-width:0;
  color: var(--gold-hi);
  font-size: clamp(12px, 3.2vw, 14px);
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000;
  padding: 1px 3px;
  border-radius: 2px;
  outline: none;
  cursor: text;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height:1.1;
}
.skill-name:empty::before{
  content: "填入技能";
  color: var(--text-dim);
  opacity: 0.55;
}
.skill-name:focus{
  background: rgba(255,208,80,0.18);
  box-shadow: 0 0 0 1px var(--gold-hi);
  white-space: normal;
  overflow: visible;
}

/* ========== 個人簡介(原裝備欄位置,同框) ========== */
.ov-bio{
  top: 80%;
  left: 6%;
  right: 6%;
  width: auto;
  height: 17%;
  padding: 2.5% 3%;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;   /* 保留換行 */
  word-break: break-word;
  overflow: hidden;
  cursor: text;
}
.ov-bio:empty::before{
  content: attr(data-placeholder);
  color: rgba(255,255,255,0.35);
  border-radius:4px;
}

/* ========== 掛機打怪面板 ========== */
.hunt-card{
  width:100%;
  background:
    repeating-linear-gradient(90deg, #6b4a2a 0 24px, #5a3818 24px 26px, #6b4a2a 26px 48px),
    #6b4a2a;
  border: 4px solid var(--bronze);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #1a0a04, inset 0 0 0 4px var(--bronze-dk), 0 6px 20px rgba(0,0,0,0.6);
  padding: 14px 12px 12px;
}
.hunt-title{
  text-align:center; color: var(--gold-hi);
  font-size:14px; letter-spacing:3px;
  margin-bottom:10px; text-shadow: 2px 2px 0 #000;
}
.map-select{ display:flex; gap:6px; justify-content:center; margin-bottom:10px; flex-wrap:wrap; }
.map-btn{
  flex:1; min-width:88px; padding:5px 3px;
  font-size:10px; font-family:inherit;
  background: #3a2010; color: var(--text);
  border: 2px solid var(--bronze); border-radius:3px;
  cursor:pointer; line-height:1.3; text-align:center;
  box-shadow: inset 0 0 0 1px #1a0a04;
}
.map-btn .m-name{ display:block; color: var(--gold-hi); text-shadow: 1px 1px 0 #000; letter-spacing:1px; }
.map-btn .m-lv{ display:block; font-size:9px; opacity:0.8; margin-top:2px; }
.map-btn.active{
  background: var(--bronze); color: #fff;
  border-color: var(--bronze-hi);
  box-shadow: inset 0 0 0 1px #1a0a04, 0 0 8px rgba(212,144,96,0.6);
}
.map-btn.active .m-name{ color:#fff2d8; }
/* 冒險 UI 框:戰鬥畫面嵌在金框黑窗內;黑窗座標沒對準微調下方 % 值 */
.adv-stage{
  position:relative;
  width:100%;
  aspect-ratio: 572 / 688;
  background: url("assets/ui/adv_frame.png") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  margin-bottom: 8px;
}
.adv-stage .arena{
  position:absolute;
  left:4.7%; top:14.9%; width:88.2%; height:41%;
  margin:0; border:none; border-radius:0;
}
.arena{
  position:relative;
  height: 170px;
  background-image: url("assets/maps/whisper_isle.png");
  background-size: cover;
  background-position: center;
  background-color: #14281a;
  image-rendering: pixelated;
  border:2px solid #000;
  border-radius:2px;
  margin-bottom:10px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding: 8px 20px 14px;
}
.hero-side, .mob-side{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.sprite{
  position:relative;
  width:64px; height:64px;
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center bottom;
  image-rendering:pixelated;
}
/* 冒險角色放大(83 → 125,約 +50%) */
.sprite.hero{
  width:125px; height:125px;
}
.sprite.hero{ animation: breathe 2.2s ease-in-out infinite; transform-origin: bottom center; }
.sprite.mob{ animation: breathe 2s ease-in-out infinite; transform-origin: bottom center; }
@keyframes breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-2px) scaleY(1.03); }
}
.sprite.hero.attack{ animation: hAtk 0.4s steps(3) forwards; }
.sprite.mob.hurt{ animation: mHurt 0.35s steps(2) 2; }
@keyframes hAtk {
  0%   { transform: translateX(0) rotate(0deg); }
  35%  { transform: translateX(55px) rotate(-18deg); }
  55%  { transform: translateX(85px) rotate(12deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
/* 精靈為遠程：不前衝，改小幅後座 */
.sprite.hero.attack.ranged{ animation: hShoot 0.3s ease-out forwards; }
@keyframes hShoot {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(-8px); }
  100% { transform: translateX(0); }
}
@keyframes mHurt { 50% { filter: brightness(2.5) sepia(1) hue-rotate(-40deg); transform:translateX(6px); } }

/* ===== 種族攻擊特效（assets/effects/，由 app.js playAtkFx 生成） ===== */
.atk-fx{
  position:absolute;
  width:56px; height:56px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  image-rendering:pixelated;
  pointer-events:none;
  z-index:5;
}
/* 近戰：疊在怪物身上，彈出後淡出 */
.atk-fx.melee{
  top:-6px; left:50%;
  margin-left:-28px;
  animation: fxPop 0.32s ease-out both;
}
@keyframes fxPop{
  0%   { opacity:0; transform: scale(0.5) rotate(-15deg); }
  25%  { opacity:1; transform: scale(1.15) rotate(0deg); }
  70%  { opacity:1; transform: scale(1); }
  100% { opacity:0; transform: scale(1.08); }
}
/* 遠程：箭矢由英雄側飛向怪物（--fly 由 JS 依版面計算） */
.atk-fx.arrow{
  width:44px; height:44px;
  animation: fxArrow 0.26s linear both;
}
@keyframes fxArrow{
  0%   { opacity:0; transform: translateX(0); }
  12%  { opacity:1; }
  88%  { opacity:1; transform: translateX(var(--fly, 140px)); }
  100% { opacity:0; transform: translateX(calc(var(--fly, 140px) + 12px)); }
}
/* 怪物反擊撲擊 */
.sprite.mob.lunge{ animation: mLunge 0.35s ease-out; }
@keyframes mLunge{
  0%   { transform: translateX(0); }
  35%  { transform: translateX(-42px); }
  100% { transform: translateX(0); }
}
/* 英雄受擊閃白 */
.sprite.hero.hurtflash{ animation: hHurt 0.3s steps(2) 2; }
@keyframes hHurt{ 50% { filter: brightness(2.4); transform: translateX(-5px); } }
.mob-hp{
  visibility:hidden; /* 預設隱藏，有怪物時由 app.js 顯示 */
  width:64px; height:6px;
  background:#000; border:1px solid #444; overflow:hidden;
  visibility:hidden; /* 預設隱藏，有怪物時由 JS 顯示 */
}
.mob-hp .fill{ height:100%; background: linear-gradient(to bottom, #ff9090, var(--hp), #7a1414); }
.mob-name{
  font-size:9px; color:var(--gold-hi);
  background:rgba(0,0,0,0.7);
  padding:1px 5px; text-shadow: 1px 1px 0 #000;
}
.hunt-status{
  text-align:center;
  font-size:11px;
  color: var(--gold-hi);
  padding:4px 0 8px;
  letter-spacing:1px;
  text-shadow:1px 1px 0 #000;
}
.hunt-status.searching{
  animation: statusPulse 1.2s ease-in-out infinite;
}
@keyframes statusPulse{
  0%,100%{ opacity:0.55; }
  50%{ opacity:1; }
}
.sprite.hero.wander{
  animation: wander 3.6s ease-in-out infinite;
}
@keyframes wander{
  0%   { transform: translateX(0) scaleX(1); }
  25%  { transform: translateX(35px) scaleX(1); }
  48%  { transform: translateX(35px) scaleX(-1); }
  75%  { transform: translateX(-15px) scaleX(-1); }
  98%  { transform: translateX(-15px) scaleX(1); }
  100% { transform: translateX(0) scaleX(1); }
}
.hunt-status{
  text-align:center;
  font-size:11px;
  color: var(--gold-hi);
  padding:4px 0 8px;
  letter-spacing:1px;
  text-shadow:1px 1px 0 #000;
}
.hunt-status.searching{
  animation: statusPulse 1.2s ease-in-out infinite;
}
@keyframes statusPulse{
  0%,100%{ opacity:0.55; }
  50%{ opacity:1; }
}
.sprite.hero.wander{
  animation: wander 3.6s ease-in-out infinite;
}
@keyframes wander{
  0%   { transform: translateX(0) scaleX(1); }
  25%  { transform: translateX(35px) scaleX(1); }
  48%  { transform: translateX(35px) scaleX(-1); }
  75%  { transform: translateX(-15px) scaleX(-1); }
  98%  { transform: translateX(-15px) scaleX(1); }
  100% { transform: translateX(0) scaleX(1); }
}
.hunt-controls{ display:flex; gap:5px; justify-content:center; margin-bottom:8px; }
.pixel-btn{
  font-family:inherit; font-size:11px;
  padding:8px 12px;
  background: linear-gradient(var(--bronze), var(--bronze-dk));
  color:#fff2d8; border:2px solid var(--bronze-hi); border-radius:3px;
  cursor:pointer; letter-spacing:1px;
  box-shadow: inset 0 0 0 1px #1a0a04, 0 2px 0 #1a0a04;
  text-shadow: 1px 1px 0 #1a0a04;
}
.pixel-btn:hover{ background: linear-gradient(var(--bronze-hi), var(--bronze)); }
.pixel-btn:active{ transform: translateY(2px); box-shadow: inset 0 0 0 1px #1a0a04; }
.log{
  background:#050d18; border:2px solid #000;
  padding:6px 8px; height:80px;
  overflow-y:auto; font-size:10px; line-height:1.6;
  color:var(--text-dim);
}
.log .l-hit{ color:#ffb466; }
.log .l-crit{ color:#ff6666; }
.log .l-gold{ color:var(--gold-hi); }
.log .l-lvl{ color:#8affa2; font-weight:bold; }

/* 卡片狀態提示(查無此卡 / 尚未綁定 / 讀取失敗) */
.card-status-overlay{ position:fixed; inset:0; background: rgba(0,0,0,0.85); display:none; align-items:center; justify-content:center; z-index:2100; padding:16px; }
.card-status-inner{
  background: linear-gradient(#12314a, #0a2033);
  border: 4px solid var(--gold);
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #a07800, 0 8px 20px rgba(0,0,0,0.8);
  padding: 20px; width: 100%; max-width: 320px; text-align:center;
}
.card-status-title{
  color: var(--gold-hi); font-size: 15px;
  letter-spacing: 2px; text-shadow: 1px 1px 0 #000;
  margin-bottom: 10px;
}
.card-status-msg{ color: var(--text); font-size: 11px; line-height:1.7; }
.card-status-actions{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.card-status-actions .pixel-btn{ width:100%; }
.card-status-actions .pixel-btn.secondary{ background: linear-gradient(#3a3a3a,#1a1a1a); border-color:#666; }

/* 持卡人編輯模式banner + 名片頁雲端專屬欄位(任務公告/聯絡方式) */
.card-owner-banner{
  width:100%; text-align:center; font-size:10px; color: var(--gold-hi);
  background: rgba(200,144,88,0.15); border:1px solid var(--gold);
  border-radius:3px; padding:6px 8px; margin-bottom:8px; line-height:1.6;
}
.card-extra{ width:100%; display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.ce-row{
  background: linear-gradient(#2a1a10,#1a0e08); border:2px solid var(--bronze);
  border-radius:3px; padding:8px 10px;
}
.ce-label{ font-size:10px; color: var(--gold-hi); margin-bottom:4px; letter-spacing:1px; }
.ce-val{ font-size:11px; color: var(--text); line-height:1.6; white-space:pre-wrap; word-break:break-word; cursor:text; }
.ce-val:empty::before{ content: attr(data-placeholder); color: rgba(255,255,255,0.35); }
.ce-val[contenteditable="false"]{ cursor:default; }

/* 訪客/非持卡人在雲端模式下:鎖定編輯視覺(名片對訪客唯讀) */
.locked-visual{ cursor:default !important; }
.locked-visual .avatar-hint, .locked-visual .logo-hint{ display:none !important; }
.locked-visual .reset-avatar, .locked-visual .reset-logo{ display:none !important; }

/* 彈窗 */
.modal{ position:fixed; inset:0; background: rgba(0,0,0,0.78); display:none; align-items:center; justify-content:center; z-index:2000; padding:16px; }
.modal.open{ display:flex; }
.modal-inner{
  background: linear-gradient(#12314a, #0a2033);
  border: 4px solid var(--gold);
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #a07800, 0 8px 20px rgba(0,0,0,0.8);
  padding: 16px; width: 100%; max-width: 320px;
}
.modal-title{
  color: var(--gold-hi); font-size: 14px;
  text-align:center; margin-bottom: 12px;
  letter-spacing: 2px; text-shadow: 1px 1px 0 #000;
}
.modal label{ display:block; color: var(--text); margin: 8px 0 4px; font-size:11px; }
.modal input{
  width:100%; background:#050d18;
  border:2px solid #a07800; border-radius:2px;
  color:var(--text); padding:6px;
  font-family:inherit; font-size:12px;
}
.icon-picker{
  display:grid; grid-template-columns: repeat(4,1fr); gap:6px;
  padding:6px; background:#050d18;
  border:2px solid #a07800; border-radius:2px;
  max-height:200px; overflow-y:auto;
}
.icon-choice{
  aspect-ratio:1/1;
  background: rgba(30,40,55,0.6);
  border: 2px solid transparent;
  border-radius:3px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:2px; overflow:hidden;
}
.icon-choice img{ width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.icon-choice.empty-choice{ color: var(--text-dim); font-size:10px; }
.icon-choice.active{
  border-color: var(--gold-hi);
  box-shadow: 0 0 0 1px var(--gold-hi), 0 0 8px rgba(255,208,80,0.5);
}
.modal-btns{ display:flex; gap:8px; justify-content:center; margin-top:14px; }

/* ========== 職業下拉 ========== */
.job-select{
  background: #0a1c2c;
  color: var(--gold-hi);
  border: 1px solid var(--gold);
  padding: 0 3px;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-shadow: 1px 1px 0 #000;
  border-radius: 2px;
  outline: none;
  min-width: 50px;
  max-width: 100%;
}
.job-select:focus{
  box-shadow: 0 0 0 2px var(--gold-hi);
}
.job-select:disabled{
  cursor: not-allowed;
  opacity: 0.7;
}
.job-select option{
  background:#0a1c2c;
  color:var(--gold-hi);
}

/* 頭像右下角小按鈕：重置到職業預設 */
.avatar-box .reset-avatar{
  position:absolute;
  bottom:2px; right:2px;
  background: rgba(0,0,0,0.75);
  color: var(--gold-hi);
  font-size: 8px;
  padding: 1px 3px;
  border: 1px solid var(--gold);
  border-radius:2px;
  cursor:pointer;
  z-index:3;
  display:none;
}
.avatar-box.user-upload .reset-avatar{ display:block; }

/* ============================================================
   分頁 Tabs
   ============================================================ */
.tabs{
  display:flex;
  width:100%;
  max-width:400px;
  gap:4px;
  padding:6px;
  background:linear-gradient(180deg, #2a1810 0%, #1a0f08 100%);
  border:2px solid var(--bronze-dk);
  border-radius:4px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}
.tab{
  flex:1;
  font-family: inherit;
  font-size: clamp(10px, 2.6vw, 12px);
  padding: 8px 2px;
  color: var(--text-dim);
  background: linear-gradient(180deg, #3a2818 0%, #241610 100%);
  border: 2px solid var(--bronze-dk);
  border-radius: 3px;
  cursor:pointer;
  transition: all 0.15s;
  letter-spacing: 1px;
  white-space: nowrap;
}
.tab:hover{ color: var(--text); }
.tab.active{
  color: #fff2d8;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--bronze) 60%, var(--bronze-dk) 100%);
  border-color: var(--gold-hi);
  text-shadow: 1px 1px 0 var(--bronze-dk);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.4), 0 0 8px rgba(232,184,120,0.4);
}
.page{ display:none; width:100%; }
.page.active{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }

/* ============================================================
   商人頁
   ============================================================ */
.shop-frame, .ach-frame, .set-frame{
  width:100%;
  max-width:400px;
  background: linear-gradient(180deg, #3d2818 0%, #2a1810 100%);
  border: 3px solid var(--bronze-dk);
  border-radius:6px;
  padding: 12px 12px 16px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.6), 0 6px 14px rgba(0,0,0,0.6);
  color: var(--text);
}
.shop-title, .ach-title, .set-title{
  text-align:center;
  font-size: clamp(12px, 3.2vw, 14px);
  color: var(--gold-hi);
  text-shadow: 1px 1px 0 var(--bronze-dk);
  padding: 6px 0 10px;
  letter-spacing: 2px;
}
/* 商人選擇列 (武器 / 防具 / 雜貨) */
.npc-select{
  display:flex;
  gap:6px;
  margin-bottom:10px;
}
.npc-choice{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:8px 4px 6px;
  font-family:inherit;
  font-size: clamp(9px, 2.4vw, 11px);
  color: var(--text-dim);
  background: linear-gradient(180deg, #3a2818 0%, #241610 100%);
  border: 2px solid var(--bronze-dk);
  border-radius: 4px;
  cursor:pointer;
  transition: all 0.15s;
}
.npc-choice:hover{ color: var(--text); border-color: var(--bronze); }
.npc-choice.active{
  color:#fff2d8;
  background: linear-gradient(180deg, rgba(232,184,120,0.25) 0%, var(--bronze-dk) 100%);
  border-color: var(--gold-hi);
  box-shadow: 0 0 8px rgba(232,184,120,0.35);
}
.npc-choice .npc-face{
  width:44px; height:44px;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.npc-choice .npc-lbl{
  letter-spacing:1px;
  white-space:nowrap;
}
.shop-npc{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  background: rgba(0,0,0,0.35);
  border:2px solid var(--bronze-dk);
  border-radius:4px;
  margin-bottom:10px;
}
.npc-sprite{
  width:96px;
  height:96px;
  flex-shrink:0;
  background-image: url("assets/shop/npc_weapon.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: npc-bob 2.2s ease-in-out infinite;
}
@keyframes npc-bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
.npc-bubble{
  flex:1;
  font-size: clamp(11px, 2.8vw, 13px);
  line-height: 1.5;
  color: var(--text);
  background: linear-gradient(180deg, #4a3220 0%, #2f1e10 100%);
  border:2px solid var(--gold);
  border-radius:4px;
  padding:8px 10px;
  position:relative;
}
.npc-bubble::before{
  content:"";
  position:absolute;
  left:-8px; top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-right-color: var(--gold);
}
.shop-wallet{
  text-align:right;
  font-size: 12px;
  color: var(--gold-hi);
  padding: 2px 6px 8px;
}
.shop-wallet b{ font-size: 14px; color:#ffd97a; }
.shop-tabs{
  display:flex;
  gap:4px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.shop-tab{
  flex:1;
  min-width: 80px;
  font-family: inherit;
  font-size: clamp(9px, 2.4vw, 11px);
  padding: 6px 2px;
  color: var(--text-dim);
  background: linear-gradient(180deg, #3a2818 0%, #241610 100%);
  border: 2px solid var(--bronze-dk);
  border-radius: 3px;
  cursor:pointer;
}
.shop-tab.active{
  color: #fff2d8;
  background: linear-gradient(180deg, var(--bronze) 0%, var(--bronze-dk) 100%);
  border-color: var(--gold);
}
.shop-goods{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:8px;
  margin-bottom:12px;
}
.good{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  background: rgba(0,0,0,0.35);
  border:2px solid var(--bronze-dk);
  border-radius:4px;
  cursor:pointer;
  transition: all 0.15s;
}
.good:hover{ border-color: var(--gold-hi); background: rgba(232,184,120,0.1); }
.good.locked{ opacity:0.5; cursor:not-allowed; }
.good .g-icon{
  width:36px; height:36px;
  background-size: contain;
  background-position:center;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  flex-shrink:0;
}
.good .g-info{ flex:1; min-width:0; }
.good .g-name{ font-size: 11px; color: var(--text); }
.good .g-price{ font-size: 10px; color: var(--gold-hi); margin-top:2px; }
.shop-inv-title{
  text-align:center;
  font-size: 11px;
  color: var(--gold-hi);
  padding:8px 0 6px;
  letter-spacing: 1px;
}
.shop-inv{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:4px;
  padding:6px;
  background: rgba(0,0,0,0.4);
  border:2px inset var(--bronze-dk);
  border-radius:3px;
  min-height: 60px;
}
.inv-slot{
  aspect-ratio: 1;
  background: rgba(0,0,0,0.3);
  border:1px solid var(--bronze-dk);
  border-radius:2px;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering:pixelated;
  cursor:pointer;
  position:relative;
}
.inv-slot .q{
  position:absolute;
  right:1px; bottom:1px;
  font-size: 8px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  background: rgba(0,0,0,0.7);
  padding: 0 2px;
  border-radius: 2px;
}

/* ============================================================
   成就頁
   ============================================================ */
.ach-stats{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:6px;
  margin-bottom: 10px;
}
.ach-stat{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 6px 10px;
  background: rgba(0,0,0,0.35);
  border:2px solid var(--bronze-dk);
  border-radius:3px;
}
.ach-stat span{ font-size:11px; color: var(--text-dim); }
.ach-stat b{ font-size:13px; color: var(--gold-hi); }
.ach-sub{
  text-align:center;
  font-size:11px;
  color:var(--gold);
  padding:6px 0 8px;
  letter-spacing:1px;
}
.ach-badges{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:6px;
}
.badge{
  padding: 8px 6px;
  background: rgba(0,0,0,0.35);
  border:2px solid var(--bronze-dk);
  border-radius:3px;
  text-align:center;
  opacity:0.35;
  transition: all 0.2s;
}
.badge.unlocked{
  opacity:1;
  border-color: var(--gold-hi);
  background: linear-gradient(180deg, rgba(232,184,120,0.15), rgba(160,104,64,0.2));
  box-shadow: 0 0 8px rgba(232,184,120,0.3);
}
.badge .b-ico{ font-size:22px; line-height:1; }
.badge .b-name{ font-size:10px; margin-top:4px; color:var(--text); }
.badge .b-desc{ font-size:9px; color:var(--text-dim); margin-top:2px; line-height:1.3; }

/* ============================================================
   設定頁
   ============================================================ */
.set-block{
  padding: 10px;
  margin-bottom: 10px;
  background: rgba(0,0,0,0.3);
  border:2px solid var(--bronze-dk);
  border-radius:4px;
}
.set-lbl{
  font-size: 12px;
  color: var(--gold-hi);
  margin-bottom: 8px;
  letter-spacing:1px;
}
.slot-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.slot-row .pixel-btn{ flex:1; min-width: 90px; font-size: 11px; padding: 8px 4px; }
.slot-row .job-select{ flex:1; padding: 6px; font-family: inherit; font-size: 11px; background:#241610; color:var(--text); border:2px solid var(--bronze-dk); border-radius:3px; }
.slot-btn.active{
  background: linear-gradient(180deg, var(--gold-hi), var(--bronze));
  color:#fff2d8;
  border-color: var(--gold-hi);
}
.set-hint{
  font-size: 10px;
  color: var(--text-dim);
  margin-top:6px;
  text-align:center;
}
.pixel-btn.danger{
  background: linear-gradient(180deg, #a03030 0%, #601010 100%);
  border-color: #ff6060;
  color:#ffe0e0;
}
.job-path{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:8px;
  font-size:11px;
}
.job-path .jp-row{
  display:flex;
  justify-content:space-between;
  padding:4px 8px;
  background:rgba(0,0,0,0.3);
  border-left:3px solid var(--bronze-dk);
}
.job-path .jp-row.done{ border-left-color: var(--gold-hi); color: var(--gold-hi); }
.job-path .jp-row.current{ border-left-color:#4be569; color:#c9ffcc; }
.job-path .jp-row.locked{ opacity:0.5; }
.job-path .jp-lv{ color: var(--text-dim); font-size:10px; }
.fix-hint{ font-size:10px; color: var(--text-dim); margin-bottom:8px; line-height:1.5; }
#charFixer{ display:flex; flex-direction:column; gap:4px; max-height: 240px; overflow-y:auto; }
.fixer-row{
  display:flex; align-items:center; gap:6px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.3);
  border:1px solid var(--bronze-dk);
  border-radius:2px;
  font-size: 10px;
}
.fixer-row .fx-preview{
  width:32px; height:32px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border:1px solid var(--bronze-dk);
  flex-shrink:0;
}
.fixer-row .fx-label{ flex:1; color: var(--text); min-width: 90px; }
.fixer-row select{
  flex:1;
  font-family: inherit;
  font-size: 10px;
  padding: 2px;
  background: #241610;
  color: var(--text);
  border:1px solid var(--bronze-dk);
}


/* ============================================================
   冒險者履歷（名片頁下方）& 冒險頁技能面板
   ============================================================ */
.resume-frame{
  width:100%;
  background:
    repeating-linear-gradient(90deg, #6b4a2a 0 24px, #5a3818 24px 26px, #6b4a2a 26px 48px),
    #6b4a2a;
  border: 4px solid var(--bronze);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #1a0a04, inset 0 0 0 4px var(--bronze-dk), 0 6px 20px rgba(0,0,0,0.6);
  padding: 12px 12px 10px;
}
.resume-title{
  text-align:center; color: var(--gold-hi);
  font-size:13px; letter-spacing:3px;
  margin-bottom:10px; text-shadow: 2px 2px 0 #000;
}
.grade-row{
  display:flex; gap:6px; justify-content:center;
  margin-bottom:10px;
}
.grade{
  flex:1; max-width:60px;
  background:#3a2010;
  border:2px solid var(--bronze-dk); border-radius:3px;
  box-shadow: inset 0 0 0 1px #1a0a04;
  text-align:center; padding:4px 0 5px;
}
.g-lbl{ display:block; font-size:10px; color:var(--text-dim); letter-spacing:1px; }
.g-val{ display:block; font-size:16px; margin-top:2px; text-shadow:1px 1px 0 #000; }
.g-S{ color:#ffd75e; } .g-A{ color:#8affa2; } .g-B{ color:#7ec8ff; }
.g-C{ color:#c9a878; } .g-D{ color:#8a7a6a; }

.resume-skill, .adv-skill{
  display:flex; align-items:center; gap:10px;
  background:#3a2010;
  border:2px solid var(--bronze-dk); border-radius:3px;
  box-shadow: inset 0 0 0 1px #1a0a04;
  padding:6px 8px;
}
.adv-skill{ margin-bottom:8px; }
.adv-skill:empty{ display:none; }
.resume-skill .skill-icon, .adv-skill .skill-icon{
  width:34px; height:34px; cursor:default;
}
.resume-skill .skill-icon:hover, .adv-skill .skill-icon:hover{ transform:none; }
.rs-name{
  color:var(--gold-hi); font-size:13px; letter-spacing:1px;
  text-shadow:1px 1px 0 #000;
}
.rs-lv{ color:#8affa2; font-size:11px; margin-left:2px; }
.as-cd{ color:var(--text-dim); font-size:10px; margin-left:4px; }
.rs-desc{ color:var(--text-dim); font-size:10px; margin-top:2px; line-height:1.4; }
.rs-text, .as-text{ min-width:0; }

.log .l-skill{ color:#c79bff; }

/* ===== 異世界狀態頁補充 ===== */
.status-head{
  display:flex; gap:6px; justify-content:center;
  margin-bottom:10px;
}
.status-head span{
  background:#3a2010; color:var(--gold-hi);
  border:2px solid var(--bronze-dk); border-radius:3px;
  box-shadow: inset 0 0 0 1px #1a0a04;
  font-size:11px; letter-spacing:1px;
  padding:4px 10px; text-shadow:1px 1px 0 #000;
}
.status-sub{
  text-align:center; color:var(--text-dim);
  font-size:10px; letter-spacing:2px; margin:8px 0 6px;
}
.status-skills{ display:flex; flex-direction:column; gap:6px; }

/* ===== 階級徽章 & 六維點數微調 ===== */
.rank-badge{ font-weight:bold; }
.grade{ max-width:54px; } /* 六格並排時稍微縮窄 */

/* ===== 種族特性短語 ===== */
.race-trait{
  text-align:center; color:var(--gold-hi);
  font-size:11px; letter-spacing:2px;
  margin:2px 0 8px; opacity:0.85;
  text-shadow:1px 1px 0 #000;
}

/* ============================================================
   分頁像素圖示（assets/ui/tab_*.png，32×32 透明背景）
   圖示在上、文字在下；圖檔缺少時只顯示文字，不會破版
   ============================================================ */
.tab{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:3px; padding:6px 2px;
}
.tab::before{
  content:"";
  width:32px; height:32px;
  background-size:100% 100%;
  background-repeat:no-repeat;
  image-rendering:pixelated;
}
.tab[data-tab="card"]::before{    background-image:url("assets/ui/tab_card.png"); }
.tab[data-tab="status"]::before{  background-image:url("assets/ui/tab_status.png"); }
.tab[data-tab="adv"]::before{     background-image:url("assets/ui/tab_adv.png"); }
.tab[data-tab="shop"]::before{    background-image:url("assets/ui/tab_shop.png"); }
.tab[data-tab="bag"]::before{     background-image:url("assets/ui/tab_bag.png"); }
.tab[data-tab="setting"]::before{ background-image:url("assets/ui/tab_setting.png"); }
.tab.active::before{ filter: drop-shadow(0 0 2px rgba(255,220,140,0.8)); }

/* ============================================================
   共用:像素感頁面外框 + 木牌名牌
   套法:外框加 class="px-frame",內部第一個元素放 <div class="px-plate">標題</div>
   (商人/設定頁之後想套同風格,直接加同樣 class 即可)
   ============================================================ */
.px-frame{
  position:relative;
  border: 4px solid var(--bronze);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #1a0a04, inset 0 0 0 4px var(--bronze-dk), 0 6px 20px rgba(0,0,0,0.6);
  margin-top: 16px;   /* 留空間給突出的木牌 */
  padding-top: 24px;
}
.px-plate{
  position:absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 22px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--bronze) 100%);
  border: 2px solid #1a0a04;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--gold-hi), 0 3px 0 rgba(0,0,0,0.5);
  color: #2a1408;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: bold;
  letter-spacing: 3px;
  white-space: nowrap;
  z-index: 2;
  image-rendering: pixelated;
}
/* 木牌兩側鉚釘 */
.px-plate::before, .px-plate::after{
  content:"";
  position:absolute; top:50%; transform:translateY(-50%);
  width:4px; height:4px;
  background: var(--bronze-dk);
  box-shadow: 0 0 0 1px #1a0a04;
}
.px-plate::before{ left:6px; }
.px-plate::after{ right:6px; }

/* ============================================================
   背包頁:人形裝備盤(底圖 assets/ui/equip_panel.png)
   格子座標在 app.js 的 EQUIP_SLOTS(以底圖 681x1024 的 % 定位)
   ============================================================ */
.equip-doll{
  position:relative;
  width:100%;
  aspect-ratio: 681 / 1024;
  background: url("assets/ui/equip_panel.png") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  margin-bottom: 8px;
}
.eq-slot{ position:absolute; border-radius:4px; }
.eq-slot.locked{ cursor:default; }
.eq-slot.empty{ cursor:pointer; }
.eq-slot.empty:hover{ box-shadow: inset 0 0 0 2px rgba(255,216,115,0.45); }
.eq-slot.filled{
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.eq-slot.filled:hover{ box-shadow: inset 0 0 0 2px var(--gold-hi); }
.eq-slot.filled img{
  width:72%; height:72%; object-fit:contain;
  image-rendering:pixelated;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
}
.eq-plus{
  position:absolute; right:4px; bottom:2px;
  font-size:10px; color:#ffd873; text-shadow:1px 1px 0 #000;
}

/* ============================================================
   背包頁(裝備欄:持有清單點擊替換 + 道具)
   ============================================================ */
/* 背包外框:預設沿用 .shop-frame 樣式,若 assets/ui/panel_wood.png 存在
   則鋪上木紋底圖(demo 圖,正式木紋圖同名覆蓋即可,不需改程式) */
.bag-frame{
  background-image: url("assets/ui/panel_wood.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.bag-sub{
  font-size:11px; color: var(--accent, #ffd873);
  margin:10px 0 6px; letter-spacing:2px;
}
.bag-equips{ display:flex; flex-direction:column; gap:8px; }
.bag-group{ display:flex; flex-direction:column; gap:5px; }
.bag-group-lbl{
  font-size:10px; color: var(--gold-hi, #ffd873);
  letter-spacing:2px; opacity:.9;
}
.bag-eq{
  position:relative;
  display:flex; align-items:center; gap:8px;
  background: rgba(0,0,0,.35);
  border:2px solid #3a3a52; border-radius:4px;
  padding:6px 8px;
}
.bag-eq.clickable{ cursor:pointer; transition: transform .08s, border-color .08s; }
.bag-eq.clickable:hover{ transform: translateX(2px); border-color:#6a6a8a; }
.bag-eq.on{
  border-color:#ffd873;
  box-shadow: inset 0 0 6px rgba(255,216,115,.25);
  cursor:default;
}
.bag-eq-on{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:9px; color:#ffd873; letter-spacing:1px;
  border:1px solid #ffd873; border-radius:3px; padding:2px 4px;
  background: rgba(0,0,0,.4);
}
.bag-eq.empty{ opacity:.5; }
.bag-eq-ico{
  width:40px; height:40px; flex:none;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  image-rendering:pixelated;
}
.bag-eq-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bag-eq-txt b{ font-size:12px; }
.bag-eq-txt span{ font-size:10px; opacity:.75; }
.plus{ color:#ffd873; }
/* 強化鐵砧卡(v7 起掛在武器/防具商人的「⚒ 強化」分頁) */
.enh-card{
  flex:1; text-align:center;
  background: rgba(0,0,0,.35);
  border:2px solid #3a3a52; border-radius:4px;
  padding:8px 6px 10px;
  background-image:url("assets/ui/anvil.png");
  background-repeat:no-repeat;
  background-position:center 82%;
  background-size:44px;
  image-rendering:pixelated;
}
.enh-head{ font-size:13px; margin-bottom:4px; }
.enh-max{ font-size:10px; opacity:.6; margin-left:2px; }
.enh-info{ font-size:10px; opacity:.85; margin:2px 0; }
.enh-btn{ margin-top:26px; }
.enh-btn:disabled{ opacity:.4; pointer-events:none; }
/* 商店「⚒ 強化」分頁的鐵砧卡:佔滿商品區寬度 */
.forge-card{
  width:100%;
  grid-column: 1 / -1; /* shop-goods 若為 grid 也能撐滿 */
  padding-bottom:14px;
}
/* 背包格裡的未裝備裝備:金框標示,點擊換上 */
.inv-slot.gear{
  border-color: var(--gold);
  box-shadow: inset 0 0 4px rgba(255,216,115,0.35);
}
.inv-slot.gear:hover{ border-color: var(--gold-hi); }
.inv-slot .q.plus-q{ color:#ffd873; }
.bag-msg{
  margin:8px 0 2px; padding:6px 8px;
  font-size:11px; text-align:center;
  background: rgba(0,0,0,.3);
  border:1px dashed #3a3a52; border-radius:4px;
  min-height:16px;
}
/* 強化成功/失敗回饋 */
.enh-card.enh-ok{ animation: enhOk 0.6s ease-out; }
@keyframes enhOk{
  0%  { box-shadow: 0 0 0 0 rgba(255,216,115,0); }
  30% { box-shadow: 0 0 18px 4px rgba(255,216,115,.9); border-color:#ffd873; filter:brightness(1.6); }
  100%{ box-shadow: 0 0 0 0 rgba(255,216,115,0); }
}
.enh-card.enh-fail{ animation: enhFail 0.45s ease-out; }
@keyframes enhFail{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); filter:brightness(.6) saturate(.3); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); filter:brightness(.6) saturate(.3); }
  80%{ transform:translateX(3px); }
}

/* ============================================================
   像素風確認視窗(pixelConfirm)— 貼到 style.css 最後即可
   ============================================================ */
.pxm-overlay{
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.pxm-overlay.show{ display: flex; }
.pxm-box{
  background: #a4713c;
  border: 4px solid #3a2416;
  box-shadow: inset 0 0 0 3px #c9924f, 0 6px 0 rgba(0,0,0,.35);
  border-radius: 6px;
  padding: 18px 16px 14px;
  max-width: 320px; width: 100%;
  image-rendering: pixelated;
}
.pxm-msg{
  color: #fff3d6;
  text-shadow: 1px 1px 0 #3a2416;
  font-size: 15px; line-height: 1.6;
  text-align: center;
  margin-bottom: 14px;
  word-break: break-word;
}
.pxm-btns{ display: flex; gap: 12px; justify-content: center; }
.pxm-btn{
  font: inherit; font-size: 15px;
  color: #fff3d6; text-shadow: 1px 1px 0 #3a2416;
  border: 3px solid #3a2416; border-radius: 4px;
  padding: 8px 22px;
  cursor: pointer;
  box-shadow: 0 3px 0 #3a2416;
}
.pxm-btn:active{ transform: translateY(2px); box-shadow: 0 1px 0 #3a2416; }
.pxm-ok{ background: #6d8f3c; }
.pxm-cancel{ background: #8a5a2b; }
/* ============================================================
   全站滾動條木質化(戰鬥日誌 #log 等所有可捲動區塊)
   ============================================================ */
/* Firefox */
*{ scrollbar-width: thin; scrollbar-color: #8a5a2b #2a1a0e; }
/* Chrome / Edge / Safari */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: #2a1a0e; border-radius: 5px; }
::-webkit-scrollbar-thumb{
  background: #8a5a2b;
  border: 2px solid #3a2416;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover{ background: #a4713c; }

/* ============================================================
   冒險頁迷你 HUD(HP/MP/EXP)— DOM 由 app.js initAdvHud() 建立
   ============================================================ */
.adv-hud{
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(42,26,14,.55);
  border: 3px solid #3a2416;
  border-radius: 6px;
  padding: 6px 8px;
  margin: 6px 0;
}
.ah-row{ display: flex; align-items: center; gap: 6px; }
.ah-label{
  width: 34px; flex: none;
  font-size: 11px; font-weight: bold;
  color: #fff3d6; text-shadow: 1px 1px 0 #3a2416;
}
.ah-bar{
  flex: 1; height: 10px;
  background: #2a1a0e;
  border: 2px solid #3a2416;
  border-radius: 4px;
  overflow: hidden;
}
.ah-fill{ height: 100%; width: 0%; transition: width .25s; }
.ah-hp  .ah-fill{ background: linear-gradient(#e05545, #a52c20); }
.ah-mp  .ah-fill{ background: linear-gradient(#4a7de0, #2c4fa5); }
.ah-exp .ah-fill{ background: linear-gradient(#7fd24a, #4a9420); }
.ah-text{
  width: 64px; flex: none; text-align: right;
  font-size: 11px;
  color: #fff3d6; text-shadow: 1px 1px 0 #3a2416;
}

/* ========== 冒險頁快捷道具列(HUD 下方一排藥水,點擊直接喝) ========== */
.adv-quick{
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: rgba(42,26,14,.55);
  border: 3px solid #3a2416;
  border-radius: 6px;
  padding: 6px 8px;
  margin: 6px 0;
}
.aq-slot{
  position: relative; flex: none;
  width: 40px; height: 40px;
  background-color: #2a1a0e;
  background-size: 28px 28px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #6b4a2b;
  border-radius: 4px;
  cursor: pointer;
  image-rendering: pixelated;
}
.aq-slot:active{ transform: translateY(1px); }
.aq-slot.empty{ filter: grayscale(1) brightness(.55); cursor: default; }
.aq-slot .q{
  position: absolute; right: 1px; bottom: 0;
  font-size: 10px; font-weight: bold;
  color: #ffd85e; text-shadow: 1px 1px 0 #3a2416;
}
.aq-msg{
  flex: 1 1 100%;
  min-height: 14px;
  font-size: 11px;
  color: #fff3d6; text-shadow: 1px 1px 0 #3a2416;
}

/* 長按看數據:擋掉手機長按跳出的系統選單(iOS 下載圖片/Android 右鍵) */
.eq-slot, .inv-slot, .aq-slot{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.eq-slot img{ pointer-events: none; }



/* ============================================================
   v8 裝備擴充:商品數據列 / 限定標籤 / 灰顯 / 背包不可用標記
   ============================================================ */
/* 商品卡:加成數據小字(攻/防/魔) */
.good .g-bonus{ font-size: 10px; color: #9fd47a; margin-top:1px; }
/* 種族/職業限定標籤 */
.good .g-limit{
  font-size: 9px; color: #e0a050;
  border: 1px solid #e0a050; border-radius: 3px;
  padding: 0 3px; margin-left: 4px; vertical-align: 1px;
}
/* 非本種族/職業:灰顯,仍可點(會給提示訊息) */
.good.race-locked{ opacity: 0.45; filter: grayscale(0.7); }
.good.race-locked:hover{ border-color: var(--bronze-dk); background: rgba(0,0,0,0.35); }
/* 背包中不符限定的裝備(換種族後留在包裡):角落警示 */
.inv-slot.cant-use{ filter: grayscale(0.8); }
.inv-slot.cant-use::after{
  content:"✕"; position:absolute; right:2px; top:0;
  font-size:10px; color:#e06050; text-shadow:1px 1px 0 #000;
}

/* ============================================================
   狀態頁下半部:戰鬥數據(左全身圖 + 右數據列)
   ============================================================ */
.combat-panel{ display:flex; gap:10px; align-items:stretch; margin-top:6px; }
.combat-hero{
  width:110px; min-height:140px; flex:none;
  background-color: rgba(0,0,0,0.25);
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border:2px solid var(--bronze-dk);
  border-radius:4px;
}
.combat-stats{ flex:1; display:flex; flex-direction:column; gap:4px; justify-content:center; min-width:0; }
.cb-row{
  display:flex; align-items:baseline; gap:6px;
  background: rgba(0,0,0,0.25);
  border:1px solid var(--bronze-dk);
  border-radius:4px;
  padding:4px 8px;
}
.cb-lbl{ font-size:11px; color:var(--text); width:58px; flex:none; }
.cb-val{ font-size:13px; color:var(--gold-hi); }
.cb-sub{ font-size:9px; color:#b9a98d; opacity:0.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================
   開場畫面(過渡版,兩段式)
   第一層 .intro-boot:黑底偽載入(進度條 + 點擊加載世界)
   第二層 .intro-title:GIF 標題(contain 原比例 letterbox)+ 進入異世界
   ============================================================ */
.intro-overlay{
  position: fixed; inset: 0; z-index: 3000;
  background: #0a0a14;
  opacity: 1; transition: opacity 0.6s ease;
}
.intro-overlay.fade-out{ opacity: 0; pointer-events: none; }

/* --- 第一層:偽載入(使用者像素圖 UI:boot_text_*、boot_bar_*)--- */
.intro-boot{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px;
  cursor: pointer;
  transition: opacity 0.5s ease;
}
.intro-boot.hide{ opacity: 0; pointer-events: none; }
.boot-text{
  font-family: inherit;
  font-size: clamp(16px, 2.6vw, 26px); letter-spacing: 3px;
  color: #3fd6f0; /* 青色,取自使用者 UI 圖 */
  text-shadow: 2px 2px 0 #041e33, -2px 2px 0 #041e33, 2px -2px 0 #041e33, -2px -2px 0 #041e33,
               0 0 10px rgba(63, 214, 240, 0.55); /* 深藍描邊 + 微光暈 */
  min-height: 1.6em; /* 點點增減時不跳版 */
  user-select: none;
}
.boot-bar{
  /* CSS 手繪像素風進度條,配色取自使用者 UI 圖:青色填充/深藍空槽/藏青雙層框 */
  width: min(420px, 72vw); height: 20px;
  background: #114468;                       /* 空槽深藍 */
  border: 3px solid #063558;                 /* 內框 */
  box-shadow: 0 0 0 3px #0a5c8c,             /* 外框亮邊 */
              inset 0 3px 0 rgba(0,0,0,0.35);/* 槽內上緣陰影 */
  image-rendering: pixelated;
}
.boot-fill{
  height: 100%; width: 0%;
  background: linear-gradient(180deg, #8feef8 0%, #46b5d5 18%, #29cded 40%, #29cded 82%, #1899c4 100%); /* 青色填充+頂部亮線 */
  transition: width 0.18s steps(3);          /* 階梯式前進,像素感 */
}
.boot-enter{
  font-family: inherit;
  font-size: clamp(18px, 2.8vw, 30px); letter-spacing: 5px;
  color: #e8442e; /* 紅色,取自使用者 UI 圖 */
  text-shadow: 2px 2px 0 #2a0705, -2px 2px 0 #2a0705, 2px -2px 0 #2a0705, -2px -2px 0 #2a0705,
               0 0 10px rgba(232, 68, 46, 0.5);
  animation: introBlink 1.4s steps(2, jump-none) infinite;
  user-select: none;
  visibility: hidden;
}
.boot-enter.show{ visibility: visible; }

/* --- 第二層:GIF 標題 --- */
.intro-title{
  position: absolute; inset: 0;
  background: url("assets/ui/intro.gif") center / contain no-repeat;
  display: flex; align-items: flex-end; justify-content: center;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 3s ease; /* 緩慢淡入標題,讓開場BGM先醞釀 */
}
.intro-title.show{ opacity: 1; pointer-events: auto; }
.intro-enter{
  margin-bottom: 12vh;
  font-family: inherit;
  font-size: clamp(20px, 3.2vw, 34px); letter-spacing: 6px;
  color: #ffe9a8;
  text-shadow: 3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000;
  animation: introBlink 1.4s steps(2, jump-none) infinite;
  user-select: none;
  visibility: hidden;
}
.intro-enter.show{ visibility: visible; }
@keyframes introBlink{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.15; } }