/* ═══ EXP MVP ── 視覺基準:settlement-flow.html / status-panel.html ═══ */
:root{
  --ink:#0E1017; --panel:#161A26; --panel2:#1C2132; --line:#2A3048;
  --glow-line:rgba(111,211,199,.4);
  --text:#E9ECF5; --dim:#8B93AC;
  --gold:#F2C14E; --storm:#6FD3C7; --purple:#B58CFF; --danger:#FF6B6B;
  /* 2026-07-14:稀有度改版專用色,獨立於上面幾個(--storm 會隨裝備稱號主題變動,
     --gold/--purple 在別處也被拿來當「金色系/紫色系」通用強調色使用)——稀有度
     顏色不該因為玩家換了什麼稱號主題,或別的 UI 元件借用同一色系,就跟著變動。
     C/R/SR/UR 對應 藍/紫/橙/金:R 沿用 --purple、UR 沿用 --gold(本來就固定不
     隨主題變,顏色也剛好符合,不用另外開新變數);C/SR 是新增/搬家,才需要專屬
     的 --rar-c / --rar-sr。 */
  --rar-c:#6FA8FF; --rar-sr:#FFA94D;
  /* 怨念卡牌(2026-07):未淨化詞條「偏紅粉色系」專用色,跟既有 --danger(純紅,NEW 徽章用)
     跟 SOC 的粉色(那個是屬性專屬色,語意不同)都分開,避免混用混淆。 */
  --card-bad:#FF6B9E;
}
body.theme_gold{ --storm:#F2C14E; --glow-line:rgba(242,193,78,.4); }
body.theme_purple{ --storm:#B58CFF; --glow-line:rgba(181,140,255,.4); }
body.theme_danger{ --storm:#FF8B8B; --glow-line:rgba(255,107,107,.4); }

*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--ink); font-family:'Noto Sans TC',sans-serif; color:var(--text);
  min-height:100vh; padding-bottom:24px;
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(111,211,199,.08), transparent),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(181,140,255,.05), transparent);
}
.wrap{max-width:430px;margin:0 auto;padding:22px 14px 20px;}

/* 開站遮罩:HTML 一載入就蓋住畫面(不等 CSS/JS),init() 判斷完成後才淡出、掀開底下正確的畫面 */
#bootCover{
  position:fixed;inset:0;z-index:9999;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .25s ease;
}
#bootCover.hide{opacity:0;pointer-events:none;}
#bootCover .boot-logo{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.32em;color:var(--storm);
  opacity:.8;animation:boot-pulse 1.6s ease-in-out infinite;
}
@keyframes boot-pulse{0%,100%{opacity:.4;}50%{opacity:.9;}}
button{font-family:'Noto Sans TC',sans-serif;cursor:pointer;}
.mono{font-family:'JetBrains Mono',monospace;}

/* ── 頂欄 ── */
.appbar{display:flex;justify-content:space-between;align-items:center;padding:4px 2px 16px;}
.appbar .logo{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.32em;color:var(--storm);}
.appbar .logo::before{content:"◈ ";}
.appbar .sub{font-size:10px;color:var(--dim);letter-spacing:.08em;}
.we-banner{
  margin-bottom:14px;padding:8px 14px;border:1px solid rgba(242,193,78,.4);border-radius:10px;
  background:rgba(242,193,78,.06);font-size:11.5px;color:var(--gold);
  font-weight:700;letter-spacing:.06em;display:none;
}
.we-banner.on{display:block;}

/* ── 舞台:角色狀態摘要(整塊可點,開「角色」面板)── */
.hero-summary{
  display:flex;align-items:center;gap:13px;margin-bottom:16px;padding:14px 16px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;cursor:pointer;
  transition:border-color .15s,transform .15s;position:relative;
}
.hero-summary:hover{border-color:var(--glow-line);}
.hero-summary:active{transform:scale(.99);}
.hero-summary::after{
  content:"▸";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--dim);font-size:13px;opacity:.6;
}
.hs-ava{width:56px;height:56px;border-radius:50%;flex-shrink:0;overflow:hidden;background:linear-gradient(180deg,#3A4462,#2B3350);display:grid;place-items:center;font-size:28px;box-shadow:0 0 14px rgba(111,211,199,.15);}
.hs-ava img{width:100%;height:100%;object-fit:cover;}
.hs-mid{flex:1;min-width:0;padding-right:18px;}
.hs-mid .b-who h3{font-size:15px;}
.hs-radar{flex-shrink:0;width:100px;height:100px;display:flex;align-items:center;justify-content:center;}

/* ── HUD 按鈕列(圖鑑/技能/戰史/兌換所,開對應面板)── */
/* 手機適配追加:HUD 從4顆長到5顆(卡冊)後,4欄格線讓第5顆擠到第二排,
   多一整排高度會把手機版整頁撐到超過螢幕高度、變成可捲動。改成5欄讓5顆擠一排。 */
.hud-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0 4px;}
.hud-btn{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 4px 10px;background:var(--panel);border:1px solid var(--line);border-radius:13px;
  color:var(--dim);transition:border-color .15s,color .15s;
}
.hud-btn:hover{border-color:var(--glow-line);color:var(--storm);}
.hud-ico{font-size:19px;}
.hud-label{font-size:10.5px;font-weight:700;letter-spacing:.04em;}
.hud-badge{
  position:absolute;top:-6px;right:-4px;font-size:9px;color:var(--dim);background:var(--panel2);
  border:1px solid var(--line);border-radius:99px;padding:1.5px 6px;letter-spacing:.02em;white-space:nowrap;
}

/* ── 輸入畫面 ── */
.vent-card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.vent-card h1{font-size:18px;font-weight:900;letter-spacing:.04em;line-height:1.5;}
.vent-card .hint{font-size:11.5px;color:var(--dim);margin-top:6px;line-height:1.8;}
.vent-card textarea{
  width:100%;min-height:120px;margin-top:14px;padding:13px 14px;resize:vertical;
  background:var(--ink);border:1px solid var(--line);border-radius:12px;color:var(--text);
  font-family:'Noto Sans TC',sans-serif;font-size:16px;line-height:1.8;
}
.vent-card textarea:focus{outline:none;border-color:var(--glow-line);}
/* 字數提示(2026-07-17):平常隱形,打到 1600 字才浮現,接近上限轉金、超過轉紅。
   後端 /api/settle 有 2000 字硬上限,這裡只是提早告知,擋下「貼長文送出才報錯」的體驗。 */
.vent-count{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;
  color:var(--dim);text-align:right;margin-top:5px;min-height:13px;
  opacity:0;transition:opacity .2s;
}
.vent-count.show{opacity:1;}
.vent-count.near{color:var(--gold);}
.vent-count.over{color:var(--danger);font-weight:700;}
.btn-main{
  width:100%;margin-top:14px;padding:14px 0;border-radius:12px;
  border:1px solid var(--glow-line);background:rgba(111,211,199,.08);color:var(--storm);
  font-size:14px;font-weight:900;letter-spacing:.18em;text-indent:.18em;transition:background .2s;
}
.btn-main:hover{background:rgba(111,211,199,.16);}
.btn-main:disabled{opacity:.45;cursor:wait;}
.quota-note{font-size:10.5px;color:var(--dim);margin-top:10px;text-align:center;line-height:1.7;}
.mode-pill{
  display:inline-block;margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.14em;border:1px solid var(--line);border-radius:99px;padding:2px 9px;color:var(--dim);
}
.mode-pill.mock{color:var(--gold);border-color:rgba(242,193,78,.4);}

/* ── 結算過場卡 ── */
.settle{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5);margin-bottom:16px;
}
.settle-band{
  text-align:center;padding:12px 0 11px;
  background:linear-gradient(90deg, transparent, rgba(111,211,199,.12), transparent);
  border-bottom:1px solid var(--line);
}
.settle-band .en{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.4em;text-indent:.4em;color:var(--storm);}
.settle-band .zh{font-size:17px;font-weight:900;letter-spacing:.3em;text-indent:.3em;margin-top:3px;}
.chain-note{
  text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gold);
  padding:7px 0;border-bottom:1px dashed var(--line);letter-spacing:.2em;
}
.ev{padding:16px 20px 14px;position:relative;border-bottom:1px dashed var(--line);}
.ev h2{font-size:16.5px;font-weight:900;line-height:1.45;padding-right:82px;}
.stamp{
  position:absolute;right:16px;top:15px;border:2px solid var(--danger);color:var(--danger);
  font-weight:900;font-size:11px;letter-spacing:.08em;padding:4px 7px 3px;border-radius:5px;
  transform:rotate(7deg);background:rgba(255,107,107,.06);opacity:0;text-align:center;line-height:1.4;
}
.rows{padding:6px 0 4px;}
.row{
  display:flex;align-items:center;gap:12px;padding:11px 20px;
  border-bottom:1px solid rgba(42,48,72,.5);opacity:0;transform:translateX(-8px);
}
.row:last-child{border-bottom:none;}
.row .tag{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;color:var(--dim);width:64px;flex-shrink:0;line-height:1.5;}
.row .body{flex:1;}
.row .main{font-size:14px;font-weight:700;}
.row .sub{font-size:11px;color:var(--dim);margin-top:2px;line-height:1.6;}
.row .num{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:16px;color:var(--gold);flex-shrink:0;}
.row .num.teal{color:var(--storm);font-size:13px;}
.row.exp .main{font-family:'JetBrains Mono',monospace;font-size:24px;color:var(--gold);}
.row.exp .sub{font-family:'JetBrains Mono',monospace;font-size:10px;}
.attr-chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{
  font-size:12px;font-weight:700;padding:4px 11px;border-radius:99px;
  background:var(--panel2);border:1px solid rgba(111,211,199,.4);color:var(--storm);
  font-family:'JetBrains Mono',monospace;
}
.skill-lv{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--storm);}
.lvup{color:var(--gold);font-weight:900;}
.item-line{display:flex;align-items:flex-start;gap:9px;margin-top:7px;}
.item-line:first-child{margin-top:0;}
.item-line .dot{
  min-width:30px;height:30px;padding:0 8px;border-radius:8px;background:var(--ink);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:4px;font-size:14px;flex-shrink:0;
  font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--dim);
}
.rar-zh{font-size:10px;font-weight:500;letter-spacing:.08em;opacity:.85;}
.item-line .iname{font-size:13px;font-weight:700;}
.item-line .iflavor{font-size:10.5px;color:var(--dim);margin-top:1px;line-height:1.5;}
.item-line .iconvert{font-size:10px;color:var(--dim);opacity:.65;margin-top:2px;line-height:1.5;}
.item-line.r-C .dot{border-color:var(--rar-c);color:var(--rar-c);}
.item-line.r-C .iname{color:var(--rar-c);}
.item-line.r-R .dot{border-color:var(--purple);color:var(--purple);}
.item-line.r-R .iname{color:var(--purple);}
.item-line.r-SR .dot{border-color:var(--rar-sr);color:var(--rar-sr);}
.item-line.r-SR .iname{color:var(--rar-sr);}
.item-line.r-UR .dot{border-color:var(--gold);color:var(--gold);box-shadow:0 0 10px rgba(242,193,78,.4);}
.item-line.r-UR .iname{color:var(--gold);}
/* 結算畫面入口(card guideline §4.3):播放鏈自然結束後才 append 的小字連結,
   跟 .iconvert 同一個縮排、更小更淡一階,不搶原本掉落物資訊的視覺重量。 */
.loot-card-link{
  display:inline-block;margin-top:6px;padding:3px 10px;font-size:10px;
  color:var(--storm);background:none;border:1px dashed var(--glow-line);border-radius:99px;
  cursor:pointer;
}
.loot-card-link:disabled{opacity:.55;cursor:default;border-style:solid;}
.row.comment{background:rgba(111,211,199,.04);}
.row.comment .sub{color:var(--text);font-size:12px;}
.row.syslog .sub{font-family:'JetBrains Mono',monospace;font-size:10.5px;line-height:1.9;}
.row.syslog .sub::before{content:"";}
.title-award{
  margin:12px 20px 4px;padding:11px 14px;border:1px solid rgba(242,193,78,.5);border-radius:11px;
  background:rgba(242,193,78,.07);font-size:12.5px;color:var(--gold);font-weight:700;
  opacity:0;line-height:1.7;
}
.cta{padding:16px 20px 18px;opacity:0;display:flex;gap:10px;}
.btn{
  flex:1;padding:13px 0;border-radius:12px;border:1px solid rgba(111,211,199,.5);
  background:rgba(111,211,199,.08);color:var(--storm);
  font-size:13.5px;font-weight:900;letter-spacing:.12em;text-indent:.12em;transition:background .2s;
}
.btn:hover{background:rgba(111,211,199,.16);}
.btn.ghost{
  flex:0 0 auto;padding:13px 14px;border-color:var(--line);background:transparent;color:var(--dim);
  font-size:11px;font-weight:700;letter-spacing:.02em;text-indent:0;
}
/* ── 結算逐步播放:.seq 元素先隱藏,JS 依序加 .shown ── */
.seq{opacity:0;transform:translateX(-8px);}
.seq.shown{opacity:1;transform:none;transition:opacity .47s ease,transform .47s ease;}
.stamp.shown{animation:stampIn .6s cubic-bezier(.2,1.6,.4,1) forwards;}
@keyframes stampIn{from{transform:rotate(7deg) scale(2.6);opacity:0;}60%{transform:rotate(7deg) scale(.96);opacity:.92;}to{transform:rotate(7deg) scale(1);opacity:.92;}}
@keyframes rowIn{to{opacity:1;transform:none;}}

/* SR/UR 物品出場 highlight(一次性,亮完回到恆亮外框) */
.item-line.hl.r-SR{animation:hlSR 1.27s ease-out;}
.item-line.hl.r-UR{animation:hlUR 1.27s ease-out;}
@keyframes hlSR{
  0%{background:rgba(255,169,77,0);}
  30%{background:rgba(255,169,77,.16);box-shadow:0 0 22px rgba(255,169,77,.5);border-radius:10px;}
  100%{background:transparent;box-shadow:none;}
}
@keyframes hlUR{
  0%{background:rgba(242,193,78,0);}
  30%{background:rgba(242,193,78,.16);box-shadow:0 0 24px rgba(242,193,78,.55);border-radius:10px;}
  100%{background:transparent;box-shadow:none;}
}

/* 稱號取得 highlight(一次性金色亮起) */
.title-award.hl{animation:titleGlow 1.47s ease-out;}
@keyframes titleGlow{
  0%{box-shadow:0 0 0 rgba(242,193,78,0);}
  25%{box-shadow:0 0 26px rgba(242,193,78,.6);background:rgba(242,193,78,.16);}
  100%{box-shadow:none;background:rgba(242,193,78,.07);}
}

/* 關懷模式 */
.care{
  background:var(--panel);border:1px solid rgba(255,107,107,.4);border-radius:16px;padding:24px 22px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);line-height:2;
}
.care h2{font-size:16px;font-weight:900;color:var(--text);margin-bottom:10px;}
.care p{font-size:13px;color:var(--text);margin-bottom:10px;}
.care .res{font-size:12px;color:var(--dim);border-top:1px solid var(--line);padding-top:12px;margin-top:6px;}
.care .res b{color:var(--storm);}

/* ── 狀態面板 ── */
.panelbox{
  background:rgba(22,26,38,.85);backdrop-filter:blur(8px);
  border:1px solid var(--glow-line);border-radius:16px;overflow:hidden;position:relative;
  box-shadow:0 0 0 1px rgba(111,211,199,.1),0 0 40px rgba(111,211,199,.12),0 24px 70px rgba(0,0,0,.6);
  animation:summon .5s cubic-bezier(.2,1.3,.4,1);
}
@keyframes summon{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}}
.panelbox::before,.panelbox::after{
  content:"";position:absolute;width:16px;height:16px;border:2px solid var(--storm);opacity:.7;
}
.panelbox::before{top:8px;left:8px;border-right:none;border-bottom:none;border-radius:4px 0 0 0;}
.panelbox::after{bottom:8px;right:8px;border-left:none;border-top:none;border-radius:0 0 4px 0;}
.b-top{
  display:flex;justify-content:space-between;padding:13px 18px 11px;border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;color:var(--storm);
}
.b-who h3{font-size:18px;font-weight:900;display:flex;align-items:center;gap:8px;}
.b-who h3 .edit{font-size:10px;color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin:-8px 0;background:none;}
.b-who .t{
  font-size:10.5px;color:var(--gold);border:1px solid rgba(242,193,78,.4);display:inline-block;
  border-radius:99px;padding:2.5px 10px;margin-top:5px;font-weight:700;background:rgba(242,193,78,.05);
}
.b-who .t.none{color:var(--dim);border-color:var(--line);}
.b-who .cls{margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);letter-spacing:.12em;}
.b-who .cls span{color:var(--storm);}
.b-lv{display:flex;align-items:center;gap:12px;padding:4px 18px 16px;}
.b-lv .n{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);flex-shrink:0;}
.b-lv .n b{font-size:22px;color:var(--text);margin-left:3px;}
.b-bar{flex:1;height:9px;background:var(--panel2);border:1px solid var(--line);border-radius:99px;overflow:hidden;}
.b-fill{height:100%;background:linear-gradient(90deg,#3D8F86,var(--storm));border-radius:99px;box-shadow:0 0 10px rgba(111,211,199,.5);transition:width .9s cubic-bezier(.3,.9,.3,1);}
.b-lvpct{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);flex-shrink:0;}
.b-sec{
  padding:10px 18px 8px;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--dim);
  letter-spacing:.26em;display:flex;align-items:center;gap:10px;
}
.b-sec::after{content:"";flex:1;height:1px;background:var(--line);}
.b-stats{padding:2px 18px 8px;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;}
/* 狀態面板骨架佔位:第一次進站沒快取時先畫這個,不要空白畫面乾等遠端 DB */
.pskel{
  background:linear-gradient(90deg,var(--panel2) 25%,rgba(255,255,255,.07) 37%,var(--panel2) 63%);
  background-size:400% 100%;border-radius:8px;animation:pskel-shimmer 1.4s ease infinite;
}
@keyframes pskel-shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}
.pskel-ava{width:64px;height:64px;border-radius:13px;flex-shrink:0;}
.pskel-line{border-radius:5px;}
.pskel-bar{height:9px;border-radius:99px;margin:4px 18px 16px;}
.pskel-stats-wrap{padding:2px 18px 18px;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;}
.pskel-stat{height:38px;}
.b-stat .r1{display:flex;justify-content:space-between;align-items:baseline;}
.b-stat .nm-wrap{display:inline-flex;align-items:baseline;gap:5px;}
.b-stat .nm{font-size:12.5px;font-weight:700;}
/* 金色只保留給「剛剛新增」的經驗徽章(見 .gain-pill);hot(目前最高屬性)一律用 --storm 標示,
   不再跟「剛拿到經驗」共用金色,避免兩種意義混在一起 */
.gain-pill{
  display:inline-block;padding:1px 6px;border:1px solid rgba(242,193,78,.55);border-radius:99px;
  background:rgba(242,193,78,.08);color:var(--gold);font-size:9px;font-weight:700;
  font-family:'JetBrains Mono',monospace;letter-spacing:.02em;white-space:nowrap;
}
.b-stat .vl{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:var(--storm);}
.b-stat .vl.hot{color:var(--storm);}
.b-stat .bar{height:5px;background:var(--panel2);border-radius:99px;overflow:hidden;margin-top:4px;}
.b-stat .fl{height:100%;background:linear-gradient(90deg,#3D8F86,var(--storm));border-radius:99px;transition:width .8s ease;}
.b-stat .fl.hot{background:linear-gradient(90deg,var(--storm),#B8F5EC);box-shadow:0 0 8px rgba(111,211,199,.5);}
.b-note{grid-column:1/-1;font-size:10.5px;color:var(--dim);line-height:1.8;padding-top:2px;}
.b-note b{color:var(--storm);font-weight:700;}
.skill-list{padding:2px 18px 20px;display:flex;flex-direction:column;gap:8px;}
.skill-item{
  background:var(--panel2);border:1px solid var(--line);border-radius:11px;
  padding:10px 13px;cursor:pointer;transition:border-color .15s;
}
.skill-item:hover{border-color:var(--glow-line);}
.skill-item .s-head{display:flex;align-items:center;gap:11px;}
.skill-item .s-ico{font-size:18px;flex-shrink:0;}
.skill-item .s-main{min-width:0;flex:1;}
.skill-item .s-name{font-size:13px;font-weight:700;}
.skill-item .s-lv{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--storm);flex-shrink:0;text-align:right;}
.skill-item .s-lv.max{color:var(--gold);}
.skill-item .s-lv .xp{display:block;font-size:9px;color:var(--dim);margin-top:2px;}
.skill-item .s-chevron{font-size:9px;color:var(--dim);flex-shrink:0;margin-left:2px;transition:transform .2s ease;}
.skill-item.open .s-chevron{transform:rotate(180deg);}
/* 點技能卡展開「技能說明」,不切畫面,原地手風琴展開 */
.skill-item .s-more{max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease;}
.skill-item.open .s-more{max-height:200px;opacity:1;margin-top:9px;}
.skill-item .s-more-inner{font-size:11.5px;color:var(--text);line-height:1.7;padding-top:9px;border-top:1px dashed var(--line);}
.empty{padding:14px 18px;font-size:12px;color:var(--dim);line-height:1.8;}
.titles-wrap{padding:2px 18px 10px;display:flex;flex-wrap:wrap;gap:7px;}
.title-tag{
  font-size:11px;font-weight:700;padding:4.5px 12px;border-radius:99px;
  border:1px solid var(--line);color:var(--dim);background:none;letter-spacing:.03em;
}
.title-tag.owned{color:var(--gold);border-color:rgba(242,193,78,.5);background:rgba(242,193,78,.05);}
.title-tag.worn{outline:2px solid rgba(242,193,78,.6);outline-offset:1px;}
.title-tag.locked{opacity:.55;border-style:dashed;}
.footer3{margin-top:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);}
.f-cell{padding:14px 8px 16px;text-align:center;border-right:1px solid var(--line);}
.f-cell:last-child{border-right:none;}
.f-num{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;}
.f-label{font-size:10px;color:var(--dim);letter-spacing:.12em;margin-top:4px;}

/* ── 圖鑑/戰史/兌換所(面板內容)── 這些原本活在有 14px 外距的 .wrap 底下,現在
   直接放進沒有 padding 的 .panel-body,所以在這裡各自補上 18px 左右外距。 ── */
.crystal-bar{
  display:flex;gap:6px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:10px 13px;margin:0 18px 12px;font-size:11px;
  font-family:'JetBrains Mono',monospace;color:var(--dim);align-items:center;
}
.crystal-bar b{color:var(--storm);}

/* ═══ 兌換所(§6 追加輪,2026-07-15):六屬性口味餅乾列表 ═══════════════ */
.shop-cookie-desc{padding:0 18px 12px;font-size:11px;color:var(--dim);line-height:1.7;font-style:italic;}
.shop-cookie-list{display:flex;flex-direction:column;gap:8px;padding:0 18px;}
.shop-cookie-row{
  display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;
}
.shop-cookie-badge{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.shop-cookie-main{flex:1;min-width:0;}
.shop-cookie-name{font-size:12.5px;font-weight:700;color:var(--text);}
.shop-cookie-hold{font-size:10.5px;color:var(--dim);margin-top:2px;}
/* Tim 2026-07-17 回饋(兩輪):第一次改法(main 固定寬度)雖然讓「不」對齊「花」,
   但也讓整行內容縮短、右邊留一大截空白,因為 main 不再是 flex:1 去吃滿剩餘空間。
   改回 main:flex:1(吃滿剩餘寬度,行內容照舊撐滿整行、不留空白),真正解法是把
   「價格+按鈕」或「說明文字」包進同一個固定寬度的 .shop-cookie-right 容器——這樣
   不管容器裡放的是哪一種內容,這個容器的起始 x 座標都固定(容器寬度固定+又是
   main:flex:1 後面唯一的固定寬度區塊,永遠貼齊行的右邊界),「花」跟「不」自然對齊,
   同時整行還是撐滿到右邊界,不會留白。 */
.shop-cookie-right{
  flex-shrink:0;width:172px;display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.shop-cookie-price{
  font-size:10.5px;color:var(--dim);font-family:'JetBrains Mono',monospace;white-space:nowrap;
}
.shop-cookie-btn{
  flex-shrink:0;padding:7px 16px;border-radius:99px;font-size:12px;font-weight:700;border:none;
  background:linear-gradient(180deg,#3D8F86,var(--storm));color:var(--ink);cursor:pointer;
}
.shop-cookie-btn:disabled{opacity:.4;cursor:default;background:var(--panel2);color:var(--dim);}
.shop-cookie-note{
  font-size:10.5px;color:var(--dim);font-style:italic;line-height:1.4;
}
.shop-quota-info{
  margin:14px 18px 0;font-size:11px;color:var(--dim);text-align:center;
  font-family:'JetBrains Mono',monospace;
}
.shop-quota-info.quota-empty{color:var(--danger);font-weight:700;}
.shop-quota-note{margin:6px 18px 14px;font-size:11px;color:var(--gold);text-align:center;line-height:1.6;cursor:pointer;}
.shop-quota-note:hover{text-decoration:underline;}
/* ═══ 拉新系統(referral guideline §3.2):兌換所常駐邀請行 ═══════════════ */
.shop-invite-row{
  margin:8px 18px 6px;padding:9px 12px;border-radius:10px;font-size:11.5px;color:var(--storm);
  text-align:center;background:rgba(111,211,199,.08);border:1px solid rgba(111,211,199,.35);cursor:pointer;
}
.shop-invite-row:hover{background:rgba(111,211,199,.16);}
.shop-invite-count{color:var(--dim);margin-left:6px;}
/* 提醒文案(2026-07-16 Tim 要求加):底部 margin 16px(比照 .shop-quota-note/.codex-pager
   的既有慣例)——額度沒用完時這一行變成面板裡最後一個元素,底距太小會跟 .panelbox::after
   那個絕對定位的右下角裝飾角括號重疊(常駐邀請行本身先前就撞過一次,見上面的 fix)。 */
.shop-invite-hint{margin:0 18px 16px;font-size:10.5px;color:var(--dim);text-align:center;line-height:1.6;font-style:italic;}

/* ═══ 圖鑑/戰史 翻頁列(階段 3:固定頁數的真分頁,取代舊的「載入更多」)══════ */
.codex-pager{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:4px 18px 16px;
}
.pager-btn{
  flex:0 0 auto;padding:13px 16px;font-size:11.5px;font-weight:700;min-height:44px;
  color:var(--dim);background:none;border:1px dashed var(--line);border-radius:10px;
  cursor:pointer;transition:color .15s,border-color .15s;
}
.pager-btn:hover:not(:disabled){color:var(--storm);border-color:var(--storm);}
.pager-btn:disabled{opacity:.4;cursor:default;}
.pager-label{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--dim);
  letter-spacing:.05em;flex:1;text-align:center;
}

/* ══ SR/UR 華麗特效 ══════════════════════════════════ */
/* SR 稀有度方格:持續發亮(不閃爍) */
.item-line.r-SR .dot{
  box-shadow:0 0 12px rgba(255,169,77,.85), 0 0 26px rgba(255,169,77,.4);
}
.item-line.r-UR .dot{animation:urShine 1.8s ease-in-out infinite;}
@keyframes urShine{
  0%,100%{box-shadow:0 0 8px rgba(242,193,78,.55);}
  50%{box-shadow:0 0 18px rgba(242,193,78,1), 0 0 36px rgba(242,193,78,.6);}
}
@keyframes twinkle{
  0%,100%{opacity:.2;transform:scale(.7) rotate(0deg);}
  50%{opacity:1;transform:scale(1.35) rotate(25deg);}
}
/* 戰報結算列:SR/UR 物品名稱旁的星光 */
.item-line.r-SR .iname::after{content:" ✦";color:var(--rar-sr);animation:twinkle 1.5s ease-in-out infinite;display:inline-block;}
.item-line.r-UR .iname::after{content:" ✦";color:var(--gold);animation:twinkle 1.2s ease-in-out infinite;display:inline-block;}
.codex-filter{display:flex;gap:6px;flex-wrap:wrap;margin:0 18px 11px;}
.codex-filter .cf{
  padding:5px 12px;border-radius:99px;border:1px solid var(--line);background:none;
  color:var(--dim);font-size:10.5px;font-weight:700;letter-spacing:.03em;
}
.codex-filter .cf.on{color:var(--storm);border-color:var(--glow-line);background:rgba(111,211,199,.06);}
.codex-filter .sep{width:1px;background:var(--line);margin:2px 4px;}
.codex-filter .cf-label{
  font-size:10px;color:var(--dim);letter-spacing:.15em;align-self:center;
  min-width:38px;font-family:'JetBrains Mono',monospace;
}
.codex-page{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px 16px;margin:0 18px 10px;
}
.codex-page .pg{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--dim);letter-spacing:.2em;display:flex;justify-content:space-between;}
.codex-page .bt{margin-top:9px;padding-top:9px;border-top:1px dashed rgba(42,48,72,.6);}
.codex-page .bt:first-of-type{border-top:none;}
.codex-page .bn{font-size:13.5px;font-weight:700;display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.codex-page .bn .vs{font-size:10px;color:var(--danger);border:1px solid rgba(255,107,107,.5);border-radius:5px;padding:1px 6px;flex-shrink:0;}
.codex-page .bx{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gold);margin-top:3px;}
.codex-page .orig{
  font-size:11px;color:var(--dim);margin-top:6px;line-height:1.7;
  border-left:2px solid var(--line);padding-left:9px;display:none;
}
.codex-page .orig.show{display:block;}
.codex-page .toggle-orig{
  background:none;border:none;color:var(--dim);font-size:10px;text-decoration:underline;
  padding:12px 10px;margin:0 -10px;min-height:44px;
}
/* 2026-07-15 修正:z-index 原本是 99,比 panel-overlay(190)/confirm-overlay(210) 都低——
   任何面板或詳情彈窗開著的時候,背景動作(例如卡冊裡按「結晶兌換」失敗)跳出的錯誤 toast
   會被蓋在面板背景之下完全看不到,只有關掉面板之後才「補見」,運氣不好 2.6 秒的顯示時間
   還沒關完面板就先消失,使用者根本看不到任何錯誤原因。改成蓋過目前最高層(tut-layer 300),
   toast 不管在哪一層之上按出錯誤都一定看得到。 */
.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:320;
  background:var(--panel2);border:1px solid var(--glow-line);color:var(--text);
  border-radius:12px;padding:11px 18px;font-size:12.5px;box-shadow:0 12px 40px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .25s;max-width:86vw;text-align:center;line-height:1.6;
}
.toast.show{opacity:1;}

/* ── 登入/註冊 ── */
.auth-overlay{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:flex;align-items:center;justify-content:center;padding:20px;
  background-image:radial-gradient(ellipse 70% 45% at 50% 0%, rgba(111,211,199,.08), transparent);
}
.auth-card{
  width:100%;max-width:360px;background:var(--panel);border:1px solid var(--glow-line);
  border-radius:16px;padding:28px 26px;box-shadow:0 0 40px rgba(111,211,199,.12),0 24px 70px rgba(0,0,0,.6);
  animation:summon .5s cubic-bezier(.2,1.3,.4,1);
}
.auth-logo{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--storm);}
.auth-card h1{font-size:19px;font-weight:900;margin-top:12px;}
.auth-sub{font-size:11px;color:var(--dim);margin-top:4px;margin-bottom:18px;}
.auth-card input{
  width:100%;margin-bottom:10px;padding:12px 13px;
  background:var(--ink);border:1px solid var(--line);border-radius:11px;color:var(--text);
  font-family:'Noto Sans TC',sans-serif;font-size:16px;
}
.auth-card input:focus{outline:none;border-color:var(--glow-line);}
.auth-switch{
  width:100%;margin-top:12px;background:none;border:none;color:var(--dim);
  font-size:11.5px;text-decoration:underline;
}
.auth-err{margin-top:10px;font-size:12px;color:var(--danger);text-align:center;min-height:16px;line-height:1.6;}
.logout-link{background:none;border:none;color:var(--dim);font-size:10px;text-decoration:underline;padding:12px 8px;margin:-12px 0 -12px 8px;}

/* account guideline §3.1:記住帳號一鍵登入的金色主按鈕(跟 .btn-main 共用版型,只換色系,
   呼應 .auth-guest/.mode-pill.mock 已經在用的金色=特殊/優先動作語彙) */
.auth-resume-btn{
  border-color:rgba(242,193,78,.55);
  background:linear-gradient(180deg,rgba(242,193,78,.22),rgba(242,193,78,.1));color:var(--gold);
}
.auth-resume-btn:hover{background:linear-gradient(180deg,rgba(242,193,78,.3),rgba(242,193,78,.15));}
.auth-resume-btn:disabled{opacity:.5;cursor:wait;}

/* account guideline §3.2:撞名即時提示 ✓/✗(liveNameCheck 共用,註冊表單 + 改名 overlay 都用) */
.name-hint{font-size:11px;margin:-6px 0 10px;min-height:14px;line-height:1.5;text-align:left;}
.name-hint.name-ok{color:var(--storm);}
.name-hint.name-bad{color:var(--danger);}

/* ═══ 戰鬥過場動畫(結算中...+ 進度條)═══════════════════════ */
.battle-overlay{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(10,12,18,.92);backdrop-filter:blur(4px);
  visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s .35s;
}
.battle-overlay.on{visibility:visible;opacity:1;transition:opacity .35s ease;}
.battle-stage{text-align:center;}

.battle-label .en{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.4em;text-indent:.4em;color:var(--storm);}
.battle-label .zh{font-size:16px;font-weight:900;letter-spacing:.3em;text-indent:.3em;margin-top:5px;}
.bdots i{display:inline-block;font-style:normal;animation:bdot 1.2s infinite;}
.bdots i:nth-child(2){animation-delay:.2s;}
.bdots i:nth-child(3){animation-delay:.4s;}
@keyframes bdot{0%,60%,100%{opacity:.2;}30%{opacity:1;}}

/* 假進度條:後端實際跑多久沒辦法即時回報,用漸進趨緩的曲線一直往前爬(JS 算百分比),
   真正結果回來才一口氣補到 100%,見 app.js 的 startBattleFx/endBattleFx。 */
.battle-progress{width:240px;margin:26px auto 0;}
.battle-bar{height:10px;background:var(--panel2);border:1px solid var(--line);border-radius:99px;overflow:hidden;}
.battle-fill{height:100%;width:0;background:linear-gradient(90deg,#3D8F86,var(--storm));border-radius:99px;box-shadow:0 0 10px rgba(111,211,199,.5);transition:width .25s linear;}
.battle-pct{margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:.08em;}

/* ═══ 結算畫面:等級進度條 + 升級動畫 ═══════════════════════ */
.lv-progress{padding:14px 20px 12px;border-top:1px dashed var(--line);position:relative;}
.lv-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.lv-head .lv-tag{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;color:var(--dim);}
.lv-head .lv-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);}
.lv-head .lv-num b{font-size:20px;color:var(--text);margin-left:3px;display:inline-block;}
.lv-head .lv-num.bump b{animation:lvbump .67s cubic-bezier(.2,1.8,.4,1);color:var(--gold);}
@keyframes lvbump{0%{transform:scale(1);}40%{transform:scale(1.45);}100%{transform:scale(1);}}
.lv-head .lv-exp{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);}
.lv-bar{height:9px;background:var(--panel2);border:1px solid var(--line);border-radius:99px;overflow:hidden;}
.lv-fill{height:100%;width:0;background:linear-gradient(90deg,#3D8F86,var(--storm));border-radius:99px;box-shadow:0 0 10px rgba(111,211,199,.5);}
.lv-burst{
  position:absolute;right:18px;top:6px;font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:12px;letter-spacing:.12em;color:var(--gold);opacity:0;pointer-events:none;
  text-shadow:0 0 12px rgba(242,193,78,.6);
}
.lv-burst.show{animation:lvburst 1.47s cubic-bezier(.2,1.4,.4,1) forwards;}
@keyframes lvburst{
  0%{opacity:0;transform:scale(.3) translateY(4px);}
  18%{opacity:1;transform:scale(1.15) translateY(0);}
  38%{transform:scale(1);}
  80%{opacity:1;}
  100%{opacity:0;transform:scale(1) translateY(-8px);}
}

/* 技能升級:LEVEL UP 彈出(先跑完經驗值,JS 再加 .pop) */
.lvup{display:inline-block;opacity:0;text-shadow:0 0 10px rgba(242,193,78,.55);}
.lvup.pop{animation:lvupPop .73s cubic-bezier(.2,1.8,.4,1) forwards;}
@keyframes lvupPop{
  0%{opacity:0;transform:scale(.2) rotate(-8deg);}
  60%{opacity:1;transform:scale(1.25) rotate(3deg);}
  100%{opacity:1;transform:scale(1) rotate(0);}
}

@media (prefers-reduced-motion: reduce){
  .seq{opacity:1 !important;transform:none !important;transition:none !important;}
  .stamp,.stamp.shown{animation:none !important;opacity:.92 !important;transform:rotate(7deg) !important;}
  .lvup{opacity:1 !important;}
  .lvup.pop{animation:none !important;}
  .item-line.hl,.title-award.hl{animation:none !important;}
  .panelbox{animation:none;}
  .bdots i{animation:none !important;opacity:1 !important;}
  .battle-fill{transition:none !important;}
  .panel-card{animation:none !important;opacity:1 !important;transform:none !important;}
  .settle-modal{animation:none !important;opacity:1 !important;transform:none !important;}
  .card-flip-inner{transition:none !important;}
  .ritual-shake{animation:none !important;}
  .ritual-glow-in{animation:none !important;}
}

/* ═══ 戰鬥結算 modal(全螢幕過場:頭尾固定、中段捲動)═══ */
.settle-overlay{
  position:fixed;inset:0;z-index:130;display:none;
  background:rgba(10,12,18,.92);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:20px;
}
.settle-overlay.on{display:flex;}
.settle-modal{
  margin:0;max-width:480px;width:100%;max-height:88vh;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(10px);animation:panelIn .2s ease forwards;
}
.settle-modal .settle-band{flex-shrink:0;}
.settle-scroll{overflow-y:auto;flex:1;min-height:0;}
.settle-foot{
  flex-shrink:0;display:flex;gap:10px;padding:14px 20px 16px;
  border-top:1px solid var(--line);
}
/* referral guideline §4.1:結算畫面 footer 加第三顆「分享戰報」鈕之後,手機窄螢幕
   三顆一排容易擠爆——ghost 按鈕縮減內距/字級,主按鈕(查看角色)仍維持 flex:1 吃剩餘寬度。 */
.settle-foot .btn.ghost{padding:13px 10px;}
@media (max-width:400px){
  .settle-foot{gap:6px;padding:14px 12px calc(16px + env(safe-area-inset-bottom));}
  .settle-foot .btn.ghost{font-size:9.5px;padding:12px 6px;}
}
@media (max-width:640px){
  .settle-overlay{padding:0;align-items:stretch;}
  .settle-modal{max-width:none;max-height:none;height:100vh;height:100dvh;border-radius:0;}
  /* iPhone home indicator 不要壓在結算按鈕列上;沒有瀏海的機器 env() 是 0,等於沒加 */
  .settle-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom));}
}

/* ═══ 創角覆蓋層(選牛/馬 → 選公/母,存檔後不可再改)═══════════ */
.dress-overlay{
  position:fixed;inset:0;z-index:150;background:rgba(10,12,18,.92);backdrop-filter:blur(4px);
  display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:20px 12px 34px;
}
.dress-overlay.on{display:flex;}
.dress-card{
  width:100%;max-width:420px;background:var(--panel);border:1px solid var(--glow-line);
  border-radius:16px;overflow:hidden;box-shadow:0 0 40px rgba(111,211,199,.12),0 24px 70px rgba(0,0,0,.6);
  animation:summon .4s cubic-bezier(.2,1.3,.4,1);
}
.dress-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);}
.dress-title{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;color:var(--storm);}

/* ═══ 通用確認彈窗(UI 改版後暫無呼叫者,保留供之後其他二次確認情境使用)═══ */
.confirm-overlay{
  position:fixed;inset:0;z-index:210;background:rgba(10,12,18,.92);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.confirm-overlay.on{display:flex;}
.confirm-card{
  width:100%;max-width:340px;background:var(--panel);border:1px solid var(--glow-line);
  border-radius:16px;padding:22px 20px;box-shadow:0 0 40px rgba(111,211,199,.12),0 24px 70px rgba(0,0,0,.6);
  animation:summon .35s cubic-bezier(.2,1.3,.4,1);
}
.confirm-msg{font-size:13.5px;line-height:1.7;color:var(--text);text-align:center;}
.confirm-msg b{color:var(--storm);}
.confirm-btns{display:flex;gap:10px;margin-top:18px;}
.confirm-btns button{flex:1;padding:11px 0;border-radius:11px;font-size:13.5px;font-weight:700;}
.confirm-cancel{background:none;border:1px solid var(--line);color:var(--dim);}
.confirm-ok{background:linear-gradient(180deg,#3D8F86,var(--storm));border:none;color:var(--ink);}
.confirm-ok:disabled{opacity:.4;cursor:not-allowed;}
/* account guideline §3.2:改名 overlay(第一個真正使用 .confirm-card 的呼叫者)── 標題 + 輸入框 */
.confirm-title{font-size:14.5px;font-weight:900;text-align:center;color:var(--text);margin-bottom:14px;}
.confirm-card input{
  width:100%;margin-bottom:4px;padding:12px 13px;
  background:var(--ink);border:1px solid var(--line);border-radius:11px;color:var(--text);
  font-family:'Noto Sans TC',sans-serif;font-size:16px;
}
.confirm-card input:focus{outline:none;border-color:var(--glow-line);}

/* account guideline §4.3/§4.4:Email 綁定(個人面板)+ Email 驗證碼登入(登入畫面)共用 */
.email-desc{font-size:12px;line-height:1.6;color:var(--dim);text-align:center;margin-bottom:12px;}
/* Tim 2026-07-17 回報:這行原本用負的 margin-top(仿照 .name-hint 貼在輸入框下面的
   排法),但這裡上面是顆有 margin-top 撐開間距的按鈕(.btn-main),不是輸入框,負值反而
   把這行拉到跟按鈕擠在一起、視覺上疊在一起。改成一般正的間距。 */
.email-resend-note{font-size:11px;color:var(--dim);margin:10px 0 4px;text-align:center;}
.email-resend-note a{color:var(--storm);text-decoration:underline;}
.email-status{
  font-size:11.5px;color:var(--dim);margin-top:4px;display:flex;align-items:center;gap:8px;
}
.email-status.bound{color:var(--storm);}
.email-bind-btn{
  background:none;border:none;color:var(--gold);font-size:11.5px;text-decoration:underline;padding:0;
}
/* Tim 2026-07-17 追加回饋:「已綁定」本身是顆按鈕(點了開小 modal 看 email),
   顏色要跟原本純文字時一樣繼承 .email-status.bound 的 storm 色,不要變成預設按鈕黑字 */
.email-status-btn{
  background:none;border:none;padding:0;font-size:11.5px;color:inherit;text-decoration:underline;cursor:pointer;
}

/* ═══ 面板系統(第一層,UI 改版)═══════════════════════════════
   z-index 由低到高:battle-overlay(120) < settle-overlay(130) < dress-overlay(150)
   < panel-overlay(190) < auth-overlay(200) < confirm-overlay/item-lore-overlay(210,第二層「詳情」)
   < tut-layer(300,新手引導 chrome,壓過所有東西——它是引導用的疊層,不是視窗,不佔兩層鐵律的名額)
   < toast(320,見下方 .toast 說明,故意蓋過所有東西,不然錯誤訊息會被面板/彈窗蓋住看不到)。
   鐵律:同時只開一個面板;詳情永遠疊在面板之上;永不出現第三層。 ═══════════ */
.panel-overlay{
  position:fixed;inset:0;z-index:190;display:none;
  background:rgba(0,0,0,.55);align-items:center;justify-content:center;
  overflow-y:auto;padding:20px;
}
.panel-overlay.on{display:flex;}
body.panel-open{overflow:hidden;}
.panel-card{
  width:100%;max-width:480px;max-height:82vh;display:flex;flex-direction:column;
  opacity:0;transform:translateY(10px);animation:panelIn .2s ease forwards;
}
@keyframes panelIn{to{opacity:1;transform:none;}}
.panel-head{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
/* 觸控目標 ≥44px(階段 4 要求):視覺上維持小巧的 ✕,但整顆按鈕的可點範圍撐到 44×44 */
.panel-close{
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:none;color:var(--dim);border-radius:10px;
  width:44px;height:44px;font-size:13px;line-height:1;flex-shrink:0;
}
.panel-close:hover{color:var(--storm);border-color:var(--glow-line);}
.panel-body{overflow-y:auto;flex:1;}
@media (max-width:640px){
  .panel-overlay{padding:0;align-items:stretch;}
  .panel-card{max-width:none;max-height:none;height:100vh;height:100dvh;border-radius:0;}
  /* 面板內容最底下留同樣的呼吸空間(panel-body 是捲動容器,墊在內容底) */
  .panel-body{padding-bottom:env(safe-area-inset-bottom);}
  /* 全螢幕時 .panelbox 四角裝飾框貼著實體螢幕邊緣——iPhone 螢幕四角是物理圓弧裁切,
     原本固定 8px 內縮完全不夠,角框(尤其下方那個)會被圓角吃掉一截、跑到可視範圍外。
     這裡疊加 safe-area-inset,把角框往內推開圓弧與 Home 指示條的範圍。 */
  .panelbox::before{top:calc(env(safe-area-inset-top,0px) + 8px);left:calc(env(safe-area-inset-left,0px) + 8px);}
  .panelbox::after{bottom:calc(env(safe-area-inset-bottom,0px) + 8px);right:calc(env(safe-area-inset-right,0px) + 8px);}
}

/* ═══ 圖鑑物品格子(階段 3:固定 5×6=30 格的真分頁,不足補 .blank 空格子)═══ */
.item-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:0 18px 16px;
}
.item-cell{
  position:relative;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:8px 3px 7px;display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;transition:transform .15s ease,border-color .15s ease;
}
/* 圖鑑「NEW」徽章:標記這次(或上次還沒打開圖鑑前)新掉落、還沒看過的物品。
   故意用 --danger(紅)而不是稀有度/屬性色系,避免跟格子本身的顏色混在一起分不清楚。 */
.item-cell .new-badge{
  position:absolute;top:-6px;right:-6px;z-index:1;
  background:var(--danger);color:#fff;font-size:8px;font-weight:800;letter-spacing:.02em;
  padding:2px 5px;border-radius:99px;line-height:1.2;
  box-shadow:0 0 0 2px var(--panel2),0 0 8px rgba(255,107,107,.5);
}
.item-cell:active{transform:scale(.96);}
.item-cell.blank{background:none;border:1px dashed var(--line);cursor:default;}
.item-cell.blank:active{transform:none;}
.item-cell-ico{width:34px;height:34px;display:flex;align-items:center;justify-content:center;}
.item-cell-ico svg{display:block;image-rendering:pixelated;}
.item-cell-name{font-size:9px;font-weight:700;text-align:center;line-height:1.3;color:var(--text);}
.item-cell.r-C{border-color:rgba(111,168,255,.35);}
.item-cell.r-C .item-cell-name{color:var(--rar-c);}
.item-cell.r-R{border-color:rgba(181,140,255,.35);}
.item-cell.r-R .item-cell-name{color:var(--purple);}
.item-cell.r-SR{border-color:rgba(255,169,77,.4);}
.item-cell.r-SR .item-cell-name{color:var(--rar-sr);}
.item-cell.r-UR{border-color:rgba(242,193,78,.55);box-shadow:0 0 14px rgba(242,193,78,.15);}
.item-cell.r-UR .item-cell-name{color:var(--gold);}

/* ═══ 圖鑑物品詳情彈窗(點格子後,展開多角度描述)═══════════ */
.item-lore-card{
  width:100%;max-width:380px;max-height:82vh;overflow-y:auto;background:var(--panel);
  border:1px solid var(--glow-line);border-radius:16px;padding:22px 20px 20px;position:relative;
  box-shadow:0 0 40px rgba(111,211,199,.12),0 24px 70px rgba(0,0,0,.6);
  animation:summon .35s cubic-bezier(.2,1.3,.4,1);
}
/* 觸控目標 ≥44px(手機適配階段2):視覺維持 26px 圓鈕,用透明外擴把熱區撐到 44×44 */
.lore-close{
  position:absolute;top:5px;right:5px;width:44px;height:44px;border-radius:50%;
  border:none;background:none;color:var(--dim);font-size:12px;line-height:1;
}
.lore-close::before{
  content:"";position:absolute;inset:9px;border:1px solid var(--line);border-radius:50%;
}
.lore-head{display:flex;gap:14px;align-items:center;margin-bottom:14px;padding-right:24px;}
.lore-ico{flex-shrink:0;width:64px;height:64px;display:flex;align-items:center;justify-content:center;}
.lore-ico svg{display:block;image-rendering:pixelated;}
.lore-name{font-size:15.5px;font-weight:900;line-height:1.35;color:var(--text);}
.lore-name.r-C{color:var(--rar-c);}
.lore-name.r-R{color:var(--purple);}
.lore-name.r-SR{color:var(--rar-sr);}
.lore-name.r-UR{color:var(--gold);}
.lore-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.lore-tag{
  font-size:9.5px;font-family:'JetBrains Mono',monospace;color:var(--dim);
  border:1px solid var(--line);border-radius:99px;padding:3px 8px;
}
.lore-tag.rar-C{color:var(--rar-c);border-color:rgba(111,168,255,.4);}
.lore-tag.rar-R{color:var(--purple);border-color:rgba(181,140,255,.4);}
.lore-tag.rar-SR{color:var(--rar-sr);border-color:rgba(255,169,77,.4);}
.lore-tag.rar-UR{color:var(--gold);border-color:rgba(242,193,78,.5);}
.lore-regen-btn{
  display:block;width:100%;margin-bottom:12px;padding:7px 0;font-size:11px;
  color:var(--dim);background:none;border:1px dashed var(--line);border-radius:8px;
  cursor:pointer;transition:color .15s,border-color .15s;
}
.lore-regen-btn:hover:not(:disabled){color:var(--storm);border-color:var(--storm);}
.lore-regen-btn:disabled{opacity:.5;cursor:default;}
.lore-flavor{
  font-size:12.5px;color:var(--dim);font-style:italic;line-height:1.7;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px dashed var(--line);
}
.lore-sec-b{font-size:12.5px;line-height:1.75;color:var(--text);margin-bottom:12px;}
.lore-src{font-size:10px;color:var(--dim);margin-top:14px;font-family:'JetBrains Mono',monospace;opacity:.75;}
/* 圖鑑詳情彈窗入口(card guideline §4.3):生成/查看怨念卡,兩種狀態共用同一顆按鈕樣式。 */
.lore-card-btn{
  display:block;width:100%;margin-top:14px;padding:11px 0;border-radius:10px;border:none;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;cursor:pointer;
  background:linear-gradient(180deg,#3D8F86,var(--storm));color:var(--ink);
}
.lore-card-btn:disabled{opacity:.5;cursor:default;}

/* ═══ 怨念卡冊(card guideline §3):一次一張 + 左右切換 + CSS 3D 翻面 ═══════════
   z-index 上跟其他面板一樣活在 panel-overlay(190)裡,不佔用兩層鐵律的第 2 層名額
   ——翻面是同一張卡的原地變化,不是開新視窗。 ═══════════════════════════ */
.cards-total{padding:14px 18px 0;font-size:11px;color:var(--dim);font-family:'JetBrains Mono',monospace;letter-spacing:.06em;}
.card-viewer{display:flex;align-items:center;gap:8px;padding:12px 14px 4px;}
.card-nav-btn{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel2);color:var(--dim);font-size:13px;
}
.card-nav-btn:disabled{opacity:.35;}
.card-nav-btn:not(:disabled):hover{color:var(--storm);border-color:var(--glow-line);}
.card-flip-outer{flex:1;min-width:0;perspective:1400px;cursor:pointer;}
.card-flip-inner{
  position:relative;width:100%;min-height:480px;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.4,.2,.2,1);
}
.card-flip-inner.flipped{transform:rotateY(180deg);}
.card-face{
  position:absolute;inset:0;backface-visibility:hidden;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px 16px 14px;
}
/* 捲動穿透(手機適配階段2):面板內捲動區捲到頂/底就停,不外傳給背景頁面 */
.panel-body,.settle-scroll,.card-face,.item-lore-card,.panel-overlay,.dress-overlay{
  overscroll-behavior:contain;
}
.card-front{transition:border-color .3s,box-shadow .3s;}
.card-front.purified{border-color:rgba(242,193,78,.6);box-shadow:0 0 20px rgba(242,193,78,.15);}
.card-back{transform:rotateY(180deg);}
.card-index-label{
  text-align:center;padding:9px 0 16px;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;color:var(--dim);letter-spacing:.1em;
}

/* 怨念卡冊固定拉滿版面高度(2026-07-15 三修,§7 驗收回饋第二輪):Tim 指出卡片本體
   內容太長本來就靠 .card-face 的 overflow-y:auto 自己捲動,外層卡冊面板自己那圈捲動
   沒有意義,乾脆固定拉滿。用 flex 鏈路把 .panel-card--cards 扣掉頭尾/總數列/篩選列
   之後剩下的高度整條讓給卡片本體,取代前兩輪 JS 量測高度(算法本質是猜,遇到內容
   換行/文字變長就會偏掉)。手機版(≤640px)維持既有 .panel-card{height:100vh} 全螢幕
   處理不動,這裡的 88vh 只補桌機/平板尺寸。 */
@media (min-width:641px){
  .panel-card--cards{height:88vh;max-height:88vh;}
}
.panel-card--cards .panel-body{display:flex;flex-direction:column;overflow:hidden;}
.panel-card--cards #cardViewerWrap{flex:1;min-height:0;display:flex;flex-direction:column;}
.panel-card--cards .card-viewer{flex:1;min-height:0;align-items:stretch;}
.panel-card--cards .card-nav-btn{align-self:center;}
.panel-card--cards .card-flip-outer{height:100%;}
.panel-card--cards .card-flip-inner{height:100%;}

/* 卡片正面:淨化狀態只用「一顆」角標表示(2026-07-15 修正,原本序號列裡還多一顆
   狀態 pill,已淨化時兩顆同時出現、位置又對不齊,改成只留這一顆,未淨化/已淨化共用同一個
   位置與寫法,只有顏色跟文字不同)。
   2026-07-15 二次修正(Tim 回報改了高度數字還是沒對齊):真正的根因不是「高度數字不
   一樣」,是角標原本用 position:absolute(top/right)獨立定位,跟分享鈕所在的
   .card-serial-row flex 排版完全是兩套不同的定位系統,就算兩顆的 height 數字調成一樣,
   絕對定位那顆還是不保證會落在 flex 那排的同一條垂直中線上。改成角標直接搬進
   .card-serial-row 裡當分享鈕的兄弟元素,兩個都交給同一個 flex 容器的
   align-items:center 對齊——這樣才是真的「同一條線上」,不是兩組獨立數字湊出來的巧合。 */
.card-status-stamp,.card-share-btn{
  height:24px;box-sizing:border-box;display:inline-flex;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:800;letter-spacing:.05em;
  padding:0 10px;border-radius:99px;line-height:1;
}
.card-status-stamp{
  background:rgba(255,107,158,.12);color:var(--card-bad);border:1px solid rgba(255,107,158,.4);
}
.card-status-stamp.purified{
  background:rgba(242,193,78,.15);color:var(--gold);border-color:rgba(242,193,78,.5);
}
.card-serial-row{display:flex;align-items:center;justify-content:space-between;}
.card-serial{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:.06em;}
/* 分享鈕+淨化狀態角標現在是同一個右側群組(card guideline §4.2 的分享鈕 + 上面的角標),
   靠 .card-serial-actions 這層 flex 容器讓兩顆真正對齊在同一條線上,gap 控制間距。
   appearance:none 是防呆——避免 Safari 對 <button> 疊自己的預設內距蓋掉這裡設的高度。 */
.card-serial-actions{display:flex;align-items:center;gap:8px;}
.card-share-btn{
  appearance:none;-webkit-appearance:none;
  background:var(--panel2);color:var(--storm);border:1px solid var(--glow-line);cursor:pointer;
}
.card-share-btn:disabled{opacity:.5;}
.card-share-btn:not(:disabled):hover{box-shadow:0 0 10px rgba(111,211,199,.25);}
.card-drop-line{
  font-size:10.5px;color:var(--dim);line-height:1.6;margin-top:9px;padding-bottom:11px;
  border-bottom:1px dashed var(--line);
}
.card-item-block{margin-top:11px;}
.card-item-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.card-item-ico{display:flex;justify-content:center;margin-bottom:9px;}
.card-item-ico svg{display:block;image-rendering:pixelated;}
.card-item-name{font-size:15px;font-weight:900;text-align:center;line-height:1.35;margin-bottom:8px;}
.card-item-name.r-C{color:var(--rar-c);}
.card-item-name.r-R{color:var(--purple);}
.card-item-name.r-SR{color:var(--rar-sr);}
.card-item-name.r-UR{color:var(--gold);}
/* §7 追加輪:已淨化卡正面的名稱是超渡版,金色——跟稀有度色的 .r-{rarity} 系列平行,
   purified 狀態優先權比稀有度色高(cardFrontHtml() 已淨化時只會加這個 class,不會
   同時加 r-{rarity})。 */
.card-item-name.purified{color:var(--gold);}
.card-flavor{font-size:12px;color:var(--dim);font-style:italic;line-height:1.65;margin-bottom:11px;}
.card-lore{font-size:12px;line-height:1.75;color:var(--text);margin-bottom:12px;}
.card-terms{display:flex;flex-direction:column;gap:5px;}
.card-term{font-size:11px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--ink);}
.card-term.bad{color:var(--card-bad);border-color:rgba(255,107,158,.35);}
.card-term.good{color:var(--gold);border-color:rgba(242,193,78,.4);}
.card-flip-hint{text-align:center;font-size:10px;color:var(--dim);margin-top:12px;letter-spacing:.08em;}

/* 卡片背面 */
.card-back-inner{display:flex;flex-direction:column;height:100%;min-height:448px;}
.card-back-center{align-items:center;justify-content:center;text-align:center;padding:30px 14px;}
.card-back-title{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;color:var(--storm);
  text-align:center;margin-bottom:16px;
}
.ritual-item-row{
  display:flex;justify-content:space-between;align-items:center;font-size:12.5px;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:12px;
}
.ritual-hold{color:var(--dim);font-size:11px;}
.ritual-btn{width:100%;padding:11px 0;border-radius:10px;font-size:13px;font-weight:700;margin-bottom:14px;border:none;}
.ritual-use{background:linear-gradient(180deg,#3D8F86,var(--storm));color:var(--ink);}
.ritual-exchange{background:var(--panel2);border:1px solid var(--glow-line);color:var(--storm);}
.ritual-exchange:disabled{opacity:.4;}
.ritual-exchange-info{font-size:10.5px;color:var(--dim);text-align:center;margin-bottom:4px;font-family:'JetBrains Mono',monospace;}
.ritual-exchange-info.quota-empty{color:var(--danger);font-weight:700;}
.ritual-quota-note{font-size:10.5px;color:var(--gold);text-align:center;margin-top:6px;line-height:1.6;cursor:pointer;}
.ritual-quota-note:hover{text-decoration:underline;}
.ritual-locked-msg{font-size:13px;color:var(--dim);line-height:1.8;margin-bottom:18px;}
.ritual-codex-link{
  margin-top:auto;padding-top:14px;background:none;border:none;color:var(--storm);
  font-size:11.5px;text-decoration:underline;align-self:center;
}

/* §7 追加輪(2026-07-15):已淨化卡背面=「封存的怨念」,原版怨念內容(原名/原引言/
   原詞條)的存放處——正面已經是完整超渡版(上面的 .card-item-name.purified 等),
   不再需要「原詞條劃線→翻轉詞條」的對照表寫法,這裡單純顯示原貌。名稱/引言/詞條
   共用正面本來就有的 .card-item-name/.card-flavor/.card-terms 樣式,只多兩個
   小地方:置頂的灰字小標,跟讓引言在卡背置中(卡背容器本身沒有全域置中,正面的
   .card-flavor 平常靠內容區塊的排版對齊,搬到卡背要自己補一個置中)。 */
.card-sealed-label{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.15em;
  color:var(--dim);text-align:center;margin-bottom:14px;
}
.card-sealed-flavor{text-align:center;}
.card-purified-at{margin-top:18px;text-align:center;font-size:10px;color:var(--dim);font-family:'JetBrains Mono',monospace;}

/* 淨化成功儀式感:卡片抖動 → 翻回正面(JS 直接切 class,不靠這裡)→ 金框/章淡入,純 CSS animation */
@keyframes cardShake{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}
.ritual-shake{animation:cardShake .3s ease;}
@keyframes cardGlowIn{from{box-shadow:0 0 0 rgba(242,193,78,0);}to{box-shadow:0 0 20px rgba(242,193,78,.15);}}
.ritual-glow-in{animation:cardGlowIn .7s ease;}

@media (max-width:520px){
  .card-flip-inner{min-height:420px;}
  .card-back-inner{min-height:388px;}
}

/* 創角:兩步驟(先選牛/馬,再從該動物選公/母)*/
.cc-card{max-width:380px;}
.cc-title{text-align:center;font-size:17px;font-weight:900;padding:22px 16px 4px;letter-spacing:.02em;margin:0;}
.cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px;position:relative;z-index:1;}
.cc-opt{
  background:linear-gradient(180deg,#39425F,#2A3250);border:1px solid var(--line);border-radius:14px;
  padding:18px 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;
  min-height:150px;transition:border-color .15s,box-shadow .15s,transform .15s;
}
.cc-opt:hover{border-color:var(--glow-line);box-shadow:0 0 14px rgba(111,211,199,.25);transform:translateY(-2px);}
.cc-opt:active{transform:translateY(0);}
.cc-opt:disabled{opacity:.5;pointer-events:none;}
.cc-opt img{width:100%;max-width:140px;height:auto;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));}
/* 牛/馬頭圖示:透明背景直接放在深色卡片上,兩張圖用同一個縮放比例裁切(馬臉本來就比牛頭窄長),
   這裡只設寬度上限防溢出,不設高度上限,才不會把兩張圖硬壓成同高;卡片本身靠 grid 自動等高 */
.cc-opt img.cc-icon-img{width:auto;height:auto;max-width:140px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));}
.cc-label{font-size:14px;font-weight:700;color:var(--text);letter-spacing:.04em;}
.cc-back{
  display:block;width:calc(100% - 32px);margin:0 16px 18px;padding:10px 0;border-radius:11px;
  border:1px solid var(--line);background:transparent;color:var(--dim);font-size:12px;
}

/* 訪客直接開始 */
.auth-guest{
  width:100%;margin-top:10px;padding:12px 0;border-radius:12px;
  border:1px dashed rgba(242,193,78,.5);background:rgba(242,193,78,.06);color:var(--gold);
  font-size:13px;font-weight:900;letter-spacing:.14em;text-indent:.14em;
}
.auth-guest:disabled{opacity:.5;}

/* ═══ 新手引導教學層(階段 3;z-index 300,見上方面板系統註解)═══════════════
   #tutLayer 本身 pointer-events:none 且空的時候不佔位(:empty);裡面動態塞
   兩種東西:.tut-intercept(吃掉點擊的攔截層,.hole 版用 clip-path 在目標 rect 上開洞,
   洞內的點擊直接落到底下真正的元素)+ .tut-spot/.tut-bubble(聚光燈框+提示氣泡,
   純視覺,不吃點擊)。.tut-spot 用 box-shadow 0 0 0 9999px 的老招一次畫出「除了目標
   以外全部變暗」的效果,不用另外疊一層暗色背景。 ═══════════════════════ */
#tutLayer{position:fixed;inset:0;z-index:300;pointer-events:none;}
#tutLayer:empty{display:none;}
.tut-intercept{position:fixed;inset:0;pointer-events:auto;background:transparent;}
.tut-spot{
  position:fixed;border:2px solid var(--gold);border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(10,12,18,.6),0 0 18px rgba(242,193,78,.45);
  animation:tutBreathe 2.4s ease-in-out infinite;
}
@keyframes tutBreathe{
  0%,100%{box-shadow:0 0 0 9999px rgba(10,12,18,.6),0 0 12px rgba(242,193,78,.3);}
  50%{box-shadow:0 0 0 9999px rgba(10,12,18,.6),0 0 26px rgba(242,193,78,.65);}
}
.tut-bubble{
  position:fixed;max-width:260px;background:var(--panel);border:1px solid var(--glow-line);
  border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.65;color:var(--text);
  box-shadow:0 12px 32px rgba(0,0,0,.55);pointer-events:none;visibility:hidden;z-index:1;
}
.tut-bubble.ready{visibility:visible;}
.tut-bubble .hint{margin-top:8px;font-size:10px;color:var(--dim);}
.tut-bubble::after{
  content:"";position:absolute;left:var(--arrow-left,20px);width:10px;height:10px;
  background:var(--panel);border:1px solid var(--glow-line);transform:translateX(-50%) rotate(45deg);
}
.tut-bubble[data-placement="above"]::after{bottom:-6px;border-top:none;border-left:none;}
.tut-bubble[data-placement="below"]::after{top:-6px;border-bottom:none;border-right:none;}
@media (prefers-reduced-motion: reduce){
  .tut-spot{animation:none !important;}
}

/* ═══ 觸控裝置:取消 hover 殘留(2026-07 手機適配輪)═══
   觸控點擊會讓 :hover 黏住。這裡把主要互動元件的 hover 效果限定在
   「真的有游標」的裝置。:active 效果全部保留不動。 */
@media (hover:none){
  .hud-btn:hover{border-color:var(--line);color:var(--dim);}
  .hero-summary:hover{border-color:var(--line);}
  .skill-item:hover{border-color:var(--line);}
  .btn-main:hover{background:rgba(111,211,199,.08);}
  .btn:hover{background:rgba(111,211,199,.08);}
  .shop-invite-row:hover{background:rgba(111,211,199,.08);}
  .shop-quota-note:hover,.ritual-quota-note:hover{text-decoration:none;}
}