/* 像素 RPG 電子名片 — 骨架 (古銅色 + 木頭質感) */
:root{
  --ws:3.6; /* 跑圖世界縮放倍率,實際值由 app.js enterMap() 依地圖動態覆寫 */
  --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-color:#100804; /* 純色 fallback:iOS 過捲回彈區/漸層外一律深色,防上下露白 */
  background: radial-gradient(ellipse at top, #2a1a10 0%, #100804 100%);
  background-color:#100804;
  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; }
/* 冒險頁專用:切到冒險分頁時放寬容器(見 app.js 分頁切換,toggle .wrap-adv class),
   讓寬螢幕/桌機能把地圖畫面做大,並讓下面 .adv-body 有空間併排側欄 */
.wrap.wrap-adv{ max-width:960px; }
.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; }
/* ===== 冒險頁主欄+側欄排版:窄螢幕(手機)疊直,寬螢幕併排(比照 demo 桌機版面) =====
   側欄裡的 advHud/advQuick/worldChat 是 app.js 動態插進 #advSkill/#log 前後,
   因為那兩個元素現在的父層就是 .adv-sidebar,不用額外改 JS 插入邏輯。 */
.adv-body{ display:flex; flex-direction:column; gap:10px; }
.adv-main{ display:flex; flex-direction:column; min-width:0; }
.adv-sidebar{ display:flex; flex-direction:column; gap:10px; min-width:0; }
@media (min-width: 820px){
  .adv-body{ flex-direction:row; align-items:flex-start; }
  .adv-main{ flex:1.9; }
  .adv-sidebar{ flex:1; }
  .adv-sidebar .log{ flex:1; min-height:160px; height:auto; }
}
/* ===== 跑圖即時戰鬥(2026-07-22 改版:换成 demo 驗證過的版本,含真正撞牆碰撞)
   viewport(可視窗,固定比例)+ world(比視窗大,可捲動,用 % 座標系);
   碰撞比對內嵌數字網格(MAPS[].mask,見 app.js),不靠圖片讀取,不受 file:///https 影響。===== */
.arena-frame{ position:relative; margin-bottom:10px; }
.viewport{
  position:relative;
  width:100%;
  aspect-ratio: 16/9;
  border:3px solid var(--bronze);
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:inset 0 0 0 2px #1a0a04, inset 0 0 30px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.5);
  background:#000;
  image-rendering:pixelated;
}
.viewport.fading{ filter:brightness(0.15); transition:filter .3s; }
.world{
  position:absolute; top:0; left:0;
  background-size:cover; background-position:center;
  image-rendering:pixelated;
}
.hero{
  position:absolute;
  width:calc(7.7% / var(--ws)); aspect-ratio: 56/88;
  background-size:contain; background-repeat:no-repeat; background-position:bottom center;
  transform-origin:bottom center;
  transform:translate(-50%,-100%);
  z-index:5;
  filter:drop-shadow(1px 2px 2px rgba(0,0,0,0.6));
}
.hero.face-left{ transform:translate(-50%,-100%) scaleX(-1); }
.hero.attacking{ animation:heroAttack 0.22s; }
.hero.face-left.attacking{ animation:heroAttackL 0.22s; }
@keyframes heroAttack{ 30%{ transform:translate(-50%,-100%) scale(1.12) translateX(4px); } }
@keyframes heroAttackL{ 30%{ transform:translate(-50%,-100%) scaleX(-1) scale(1.12) translateX(4px); } }
.mob{
  position:absolute;
  aspect-ratio: 1 / 1;
  background-size:contain; background-repeat:no-repeat; background-position:bottom center;
  cursor:pointer;
  transform:translate(-50%,-100%);
  transition:left 1.1s ease-in-out, top 1.1s ease-in-out, transform .1s;
  z-index:4;
}
.mob::before{ content:""; position:absolute; inset:-55%; } /* 擴大可點擊範圍,不影響外觀 */
.mob.face-left{ transform:translate(-50%,-100%) scaleX(-1); }
.mob:hover{ filter:brightness(1.15); }
.mob.dying{ animation:mobDie .5s forwards; }
@keyframes mobDie{ to{ opacity:0; transform:translate(-50%,-100%) scale(0.6) translateY(10px); } }
.mob.hurt{ animation:mobHurt .2s; }
@keyframes mobHurt{ 50%{ filter:brightness(2) saturate(0); } }
.mob-tag{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  width:60px; text-align:center; pointer-events:none;
}
.mob.face-left .mob-tag{ transform:translateX(-50%) scaleX(-1); } /* 抵銷父層鏡射,文字不跟著翻 */
.mob-name{ font-size:9px; color:var(--text); text-shadow:1px 1px 0 #000; white-space:nowrap; }
.mob-hpbar{ height:5px; background:#1a0e08; border:1px solid #000; border-radius:2px; overflow:hidden; margin-top:1px; }
.mob-hpfill{ height:100%; background:var(--hp); width:100%; transition:width .2s; }
.dmg-float{
  position:absolute;
  font-size:13px; font-weight:bold;
  color:#fff2d8; text-shadow:1px 1px 0 #000, 0 0 4px rgba(0,0,0,0.8);
  pointer-events:none;
  animation:dmgFloat .7s ease-out forwards;
  z-index:8;
}
.dmg-float.crit{ color:#ffd23b; font-size:16px; }
.dmg-float.player-hit{ color:var(--hp); }
@keyframes dmgFloat{ 0%{ transform:translateY(0); opacity:1; } 100%{ transform:translateY(-28px); opacity:0; } }
.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;
}
.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; }

/* ========== ③假喊話世界頻道(冒險頁戰鬥紀錄下方) ========== */
.world-chat{ margin-top:6px; border:2px solid #000; background:#050d18; }
.wc-title{
  font-size:10px; text-align:center; padding:2px 0;
  color:var(--gold-hi); background:#0a1a2c;
  border-bottom:1px solid #1a3048; letter-spacing:2px;
}
.wc-body{
  height:72px; overflow-y:auto;
  padding:4px 8px; font-size:10px; line-height:1.7;
  color:var(--text-dim);
}
.wc-line{ word-break:break-all; }
.wc-tag{ color:#5aa0e0; }
.sc-a{ color:#ffd85e; } .sc-b{ color:#8affa2; }
.sc-c{ color:#ff9ecb; } .sc-d{ color:#9ecbff; }

/* ============================================================
   開場儀式整合案(2026-07-19):B線儀式頁 + 選角板
   ============================================================ */
/* --- B線:碰卡未綁定全螢幕儀式頁(開場風格深底,取代舊對話框) --- */
.bind-ceremony{
  position:fixed; inset:0; background:#04070c;
  display:none; align-items:center; justify-content:center;
  z-index:2300; padding:16px; text-align:center;
}
.bc-title{
  font-size:20px; color:var(--gold-hi); letter-spacing:6px;
  text-shadow:0 0 14px rgba(255,216,94,0.35);
}
.bc-sub{ font-size:11px; color:var(--text-dim); letter-spacing:2px; margin:12px 0 28px; }
.bc-login{ width:100%; max-width:260px; }
.bc-guest{
  margin-top:20px; font-size:10px; color:var(--text-dim);
  text-decoration:underline; cursor:pointer;
}

/* --- 防閃爍遮罩(2026-07-19):碰卡進入時最先蓋上,z 最高;判定完才掀 --- */
.card-boot-veil{ display:none; }
html.card-boot .card-boot-veil{
  display:flex; position:fixed; inset:0; background:#04070c;
  align-items:center; justify-content:center; z-index:2500;
}
.cbv-text{
  font-size:11px; color:var(--text-dim); letter-spacing:4px;
  animation: cbvPulse 1.6s ease-in-out infinite;
}
@keyframes cbvPulse{ 0%,100%{ opacity:0.35; } 50%{ opacity:1; } }

/* --- 訪客導流列(2026-07-19):訪客=純名片展示,底部固定「試玩導流+持卡人登入」 --- */
.guest-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:1500;
  display:none; flex-direction:column; align-items:center; gap:6px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(4,7,12,0.96) 70%, rgba(4,7,12,0));
}
.gb-join{ width:100%; max-width:280px; }
.gb-owner{
  font-size:9px; color:var(--text-dim);
  text-decoration:underline; cursor:pointer;
}

/* --- 安裝引導頁(2026-07-19):綁定完成後「把冒險裝進口袋」 --- */
.install-guide{
  position:fixed; inset:0; background:rgba(4,7,12,0.92);
  display:none; align-items:center; justify-content:center;
  z-index:2350; padding:16px; text-align:center;
}
.ig-title{
  font-size:18px; color:var(--gold-hi); letter-spacing:5px;
  text-shadow:0 0 14px rgba(255,216,94,0.35);
}
.ig-sub{ font-size:10px; color:var(--text-dim); letter-spacing:1px; line-height:1.9; margin:14px 0 22px; }
.ig-install{ width:100%; max-width:260px; }
.ig-steps{
  font-size:10px; color:var(--text); line-height:2.1; letter-spacing:1px;
  border:1px dashed var(--text-dim); border-radius:6px;
  padding:10px 14px; display:inline-block;
}
.ig-later{
  margin-top:22px; font-size:10px; color:var(--text-dim);
  text-decoration:underline; cursor:pointer;
}
.ig-rescue{ margin-top:14px; font-size:8px; color:var(--text-dim); opacity:0.7; letter-spacing:1px; }

/* --- 選角板:底板 474×569,所有元素用 % 對位 ---
   ※ 對位微調只改本區 %,不用動 JS。座標基準=底板原圖像素/474(x)或/569(y) */
.race-overlay{
  position:fixed; inset:0; background:#04070c; /* 全不透明,遊戲畫面不透出 */
  display:none; align-items:center; justify-content:center;
  z-index:2200; padding:8px;
}
.race-board{
  position:relative;
  width:min(100%, calc(92vh * 474 / 569), 480px);
  aspect-ratio:474/569;
  user-select:none; -webkit-touch-callout:none;
}
.rb-bg{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
/* 左卷軸:種族介紹文案 */
.rb-scroll{
  position:absolute; left:10%; top:24%; width:31%; height:48%;
  display:flex; flex-direction:column; justify-content:center; gap:3.5%;
  text-align:center; pointer-events:none;
}
.rb-title { font-size:clamp(11px,3.4vw,15px); color:#4a3014; letter-spacing:2px; flex:none; }
.rb-phrase{ font-size:clamp(9px,2.6vw,12px);  color:#7a2c14; }
.rb-hint  { font-size:clamp(8px,2.3vw,10px);  color:#6a4a26; }
.rb-line  { font-size:clamp(8px,2.4vw,11px);  color:#5a3a1c; }
.rb-route { font-size:clamp(8px,2.4vw,11px);  color:#2c5a2c; }
.rb-trait { font-size:clamp(8px,2.2vw,10px);  color:#6a4a26; }
.rb-tip   { font-size:clamp(7px,2vw,9px);     color:#8a6a3a; }
/* 卷軸跑馬燈:介紹文案由下往上循環(內容重複兩份+位移 -50% = 無縫循環)
   速度調 rbMarquee 秒數;文字行數在 app.js 的 RACE_PICKS intro 陣列 */
.rb-marquee{
  position:relative; flex:1; width:100%; overflow:hidden; margin-top:4%;
  -webkit-mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.rb-marquee-inner{
  display:flex; flex-direction:column;
  animation:rbMarquee 16s linear infinite;
}
.rb-mq-block{ display:flex; flex-direction:column; gap:7px; padding:16px 0; }
@keyframes rbMarquee{
  from{ transform:translateY(0); }
  to  { transform:translateY(-50%); }
}
/* 六種族圖示(左列:王族/騎士/法師;右列:精靈/黑暗精靈/半獸人) */
.rb-icon{
  position:absolute; width:11%; image-rendering:pixelated; cursor:pointer;
  filter:brightness(0.8); transition:filter .15s;
}
.rb-icon.sel{ filter:brightness(1.25) drop-shadow(0 0 6px rgba(255,216,94,0.9)); }
.rb-icon.locked{ filter:grayscale(1) brightness(0.4); cursor:default; }
.rb-royal  { left:51.9%; top:16.3%; }
.rb-knight { left:50.8%; top:27.4%; }
.rb-mage   { left:48.7%; top:36.2%; }
.rb-elf    { left:85.2%; top:17.2%; }
.rb-darkelf{ left:84.8%; top:27.6%; }
.rb-orc    { left:84.0%; top:36.6%; }
/* 石台立繪(掛機英雄小人,底邊貼齊石台面) */
.rb-hero{
  position:absolute; left:74.3%; top:53.5%;
  height:22%; width:auto; max-width:24%; object-fit:contain;
  transform:translate(-50%,-100%);
  image-rendering:pixelated; pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(140,200,255,0.35));
}
/* 性別標誌(女標原圖較大,統一以高度定尺寸) */
.rb-gender{
  position:absolute; height:4.8%; width:auto;
  transform:translate(-50%,-50%);
  image-rendering:pixelated; cursor:pointer;
  filter:brightness(0.7); transition:filter .15s;
}
.rb-gender.sel{ filter:brightness(1.3) drop-shadow(0 0 5px rgba(255,216,94,0.9)); }
.rb-male  { left:61.0%; top:61.9%; }
.rb-female{ left:95.3%; top:61.9%; }
/* 骰子(疊在底板烙印骰子上,點擊擲骰) */
.rb-dice{
  position:absolute; left:75.6%; top:72.0%; width:10.5%;
  transform:translate(-50%,-50%);
  image-rendering:pixelated; cursor:pointer;
}
.rb-dice.roll{ animation:rbRoll .5s ease; }
@keyframes rbRoll{
  0%  { transform:translate(-50%,-50%) rotate(0deg)   scale(1); }
  50% { transform:translate(-50%,-50%) rotate(220deg) scale(1.3); }
  100%{ transform:translate(-50%,-50%) rotate(360deg) scale(1); }
}
/* 六維數值框(底板只有英文標籤,框與數字由此補上)
   左列 Strength/Dexterity/Constitution,右列 Wisdom/Charisma/Intelligence */
.rb-stat{
  position:absolute; transform:translate(-50%,-50%);
  min-width:4.6%; padding:0 1px; text-align:center;
  font-size:clamp(7px,1.9vw,9px); line-height:1.35; color:#ffe9b0;
  background:rgba(8,12,18,0.88); border:1px solid #5a4a2a; border-radius:2px;
}
.rb-stat.bonus{ color:#8affa2; border-color:#7a8a3a; } /* 含骰子加點=綠字 */
.rb-l0{ left:68.6%; top:65.9%; } /* Strength */
.rb-l1{ left:68.6%; top:68.9%; } /* Dexterity */
.rb-l2{ left:68.6%; top:71.9%; } /* Constitution */
.rb-r0{ left:82.4%; top:65.9%; } /* Wisdom(對映「運」) */
.rb-r1{ left:82.4%; top:68.9%; } /* Charisma */
.rb-r2{ left:82.4%; top:71.9%; } /* Intelligence */
/* 名字輸入(疊在底板烙印名字框上,透明底) */
.rb-name{
  position:absolute; left:74.5%; top:76.8%; width:23%; height:3.4%;
  background:transparent; border:none; outline:none;
  color:#ffe9b0; font-family:inherit; font-size:clamp(8px,2.4vw,11px);
  text-align:center;
}
.rb-name::placeholder{ color:#7a705a; }
/* OK / CANCEL 透明熱區(按鈕圖已烙印在底板) */
.rb-ok, .rb-cancel{ position:absolute; cursor:pointer; border-radius:2px; }
.rb-ok    { left:75.5%; top:83.5%; width:16.5%; height:5%; }
.rb-cancel{ left:74.5%; top:88.8%; width:17.5%; height:5%; }
.rb-ok:active, .rb-cancel:active{ background:rgba(255,255,255,0.14); }
/* 提示浮字(未選種族按OK/擲骰時) */
.rb-flash{
  position:absolute; left:50%; top:5%; transform:translateX(-50%);
  background:rgba(0,0,0,0.82); border:1px solid var(--gold);
  color:#ffd85e; font-size:10px; padding:4px 10px; border-radius:2px;
  opacity:0; pointer-events:none; transition:opacity .2s;
  white-space:nowrap; z-index:5;
}
.rb-flash.show{ opacity:1; }

/* 卡片狀態提示(查無此卡 / 尚未綁定 / 讀取失敗) */
.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; }


/* ============================================================
   冒險者履歷（名片頁下方）& 冒險頁技能面板
   ============================================================ */
.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,
.eq-slot img, .inv-slot img{
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  touch-action: manipulation;
}
.eq-slot img{ pointer-events: none; }
/* 全站圖片一律禁止長按存圖選單(遊戲 UI 沒有存圖需求;iOS Safari 需 !important 保險) */
img{
  -webkit-touch-callout: none;
  -webkit-user-drag: 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; } }