/* ── OVERLAYS ── */
.overlay{
  display:none;position:fixed;inset:0;z-index:30;
  background:rgba(4,2,12,0.72);backdrop-filter:blur(5px);
  flex-direction:column;justify-content:flex-end;
}
.overlay.open{display:flex;}
.opanel{
  border-radius:16px 16px 0 0;
  background:linear-gradient(180deg,rgba(16,8,36,0.99),rgba(10,5,24,0.99));
  border-top:1px solid rgba(160,110,240,0.28);
  box-shadow:0 -8px 36px rgba(0,0,0,0.65);
  display:flex;flex-direction:column;
  animation:slideUp .28s cubic-bezier(0.34,1.4,0.64,1);
}
.opanel.hist{height:80vh;}
.opanel.full{height:88vh;}
.ohead{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;
  border-bottom:1px solid rgba(120,80,160,0.18);flex-shrink:0;
}
.otitle{color:#e0c0ff;font-weight:700;font-size:17px;display:flex;align-items:center;gap:7px;}
.ocls{
  background:rgba(255,255,255,0.07);border:1px solid rgba(180,140,255,0.2);
  border-radius:7px;color:#c090ff;padding:4px 13px;
  cursor:pointer;font-family:inherit;font-size:15px;transition:background .15s;
}
.ocls:hover{background:rgba(255,255,255,0.12);}
.obody{flex:1;overflow-y:auto;padding:12px 14px;scrollbar-width:thin;scrollbar-color:rgba(120,70,180,0.25) transparent;}
.obody::-webkit-scrollbar{width:3px;}
.obody::-webkit-scrollbar-thumb{background:rgba(120,70,180,0.3);border-radius:2px;}

/* ── HISTORY ── */
.htabs{display:flex;padding:8px 12px 0;gap:6px;border-bottom:1px solid rgba(120,80,160,0.14);flex-shrink:0;}
.htab{
  background:transparent;border:1px solid rgba(120,80,160,0.2);
  border-radius:6px 6px 0 0;color:rgba(160,120,200,0.45);
  padding:5px 12px 7px;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:600;transition:all .15s;
}
.htab.active{background:rgba(120,70,200,0.32);border-color:rgba(160,110,240,0.48);color:#e0c0ff;}
.lentry{
  display:flex;align-items:flex-start;gap:7px;
  padding:8px 10px;margin-bottom:4px;
  border-radius:0 7px 7px 0;
  animation:fadeIn .2s ease both;
}
.ltag{font-size:14px;font-weight:700;border-radius:3px;padding:2px 6px;flex-shrink:0;margin-top:1px;color:#080610;}
.ltime{color:rgba(180,150,220,0.5);font-size:14px;flex-shrink:0;margin-top:1px;white-space:nowrap;}
.ltext{font-size:15px;line-height:1.6;}
.le-s{background:rgba(200,150,50,0.16);border:1px solid rgba(220,180,80,0.22);border-left:2px solid #fbbf24;}
.le-s .ltag{background:#fbbf24;color:#1e1b4b;font-weight:700;}.le-s .ltext{color:#fef08a;}
.le-sy{background:rgba(50,140,180,0.13);border:1px solid rgba(56,160,200,0.18);border-left:2px solid #38a0c8;}
.le-sy .ltag{background:#38a0c8;}.le-sy .ltext{color:#80c8e8;}
.le-b{background:rgba(180,40,40,0.16);border:1px solid rgba(200,56,56,0.18);border-left:2px solid #c83838;}
.le-b .ltag{background:#c83838;}.le-b .ltext{color:#f06060;}
.le-l{background:rgba(40,180,80,0.13);border:1px solid rgba(56,200,100,0.18);border-left:2px solid #38c878;}
.le-l .ltag{background:#38c878;}.le-l .ltext{color:#70e0a0;}

/* ── CHAR ── */
.secttitle{color:#f59e0b;font-size:14px;letter-spacing:.12em;margin-bottom:9px;border-bottom:1px solid rgba(245,158,11,0.25);padding-bottom:3px;}
.attrg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
.abox{background:rgba(255,255,255,0.04);border:1px solid rgba(120,80,160,0.18);border-radius:8px;padding:9px;text-align:center;}
.aname{color:rgba(180,150,220,0.5);font-size:14px;letter-spacing:.07em;margin-bottom:3px;}
.aval{color:#e8d0ff;font-size:23px;font-weight:700;}
.amod{color:#c090ff;font-size:14px;}
.skillrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.stag{background:rgba(120,70,200,0.18);border:1px solid rgba(160,110,240,0.25);border-radius:16px;padding:4px 11px;font-size:14px;color:#c090ff;cursor:default;}
.stag.used{opacity:.38;text-decoration:line-through;}
.eqrow{font-size:15px;line-height:2;color:rgba(180,150,210,0.7);}

/* ── INVENTORY ── */
.invg{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px;}
.islot{
  background:rgba(255,255,255,0.04);border:1px solid rgba(120,80,160,0.18);
  border-radius:8px;padding:8px 5px;text-align:center;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:66px;position:relative;transition:all .15s;
}
.islot:not(.empty):hover{border-color:rgba(160,110,240,0.48);background:rgba(120,70,200,0.14);}
.islot.empty{opacity:.22;cursor:default;}
.islot.sel{border-color:rgba(200,150,255,0.65);background:rgba(140,80,220,0.2);}
.iico{font-size:22px;}
.iname{font-size:14px;color:rgba(180,150,220,0.72);line-height:1.3;}
.iqty{position:absolute;bottom:4px;right:5px;font-size:14px;color:#c090ff;font-weight:700;}
.idetail{background:rgba(255,255,255,0.04);border:1px solid rgba(120,80,160,0.18);border-radius:9px;padding:13px;display:none;}
.idetail.show{display:block;animation:fadeIn .2s ease;}
.idetail h4{color:#e0c0ff;font-size:16px;margin-bottom:6px;}
.idetail p{color:rgba(180,150,210,0.72);font-size:15px;line-height:1.6;margin-bottom:9px;}
.iacts{display:flex;gap:7px;flex-wrap:wrap;}
.iact{
  background:rgba(120,70,200,0.28);border:1px solid rgba(160,110,240,0.35);
  border-radius:6px;color:#e0c0ff;padding:5px 14px;cursor:pointer;
  font-family:inherit;font-size:15px;transition:all .15s;
}
.iact:hover{background:rgba(140,90,220,0.48);}
.iact.drop{background:rgba(200,50,50,0.2);border-color:rgba(220,70,70,0.38);color:#f07070;}
.iact.drop:hover{background:rgba(200,50,50,0.35);}

/* ── QUEST ── */
.qcard{background:rgba(255,255,255,0.04);border:1px solid rgba(120,80,160,0.18);border-radius:9px;padding:13px;margin-bottom:9px;border-left:3px solid;}
.qcard.active{border-left-color:#f59e0b;}
.qcard.complete{border-left-color:#38c878;opacity:.65;}
.qtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.qtitle{color:#e0c0ff;font-size:15px;font-weight:700;}
.qstatus{font-size:14px;padding:2px 8px;border-radius:8px;font-weight:600;}
.qs-a{background:rgba(245,158,11,0.15);color:#f59e0b;}
.qs-c{background:rgba(40,180,80,0.2);color:#38c878;}
.qdesc{color:rgba(180,150,210,0.62);font-size:15px;line-height:1.6;margin-bottom:7px;}
.qreward{font-size:14px;color:#f39c12;font-weight:600;margin-bottom:6px;}
.qprog-lbl{font-size:14px;color:rgba(160,130,200,0.48);margin-bottom:5px;}
.qpbar{height:4px;background:rgba(255,255,255,0.07);border-radius:2px;overflow:hidden;}
.qpfil{height:100%;background:linear-gradient(90deg,#706010,#c0a010);border-radius:2px;transition:width .4s;}
/* Phase 5-E — 任務卡進階樣式 */
.qcard.locked{border-left-color:rgba(120,80,160,0.3);opacity:.5;}
.qs-l{background:rgba(120,80,160,0.15);color:rgba(180,140,220,0.55);}
.qstage-tag{font-size:13px;color:rgba(220,190,80,.80);margin:5px 0 4px;letter-spacing:.02em;}
.qguide{font-size:13px;color:rgba(100,200,180,.75);margin-top:5px;}
.qhistory{margin-top:8px;border-left:2px solid rgba(120,80,160,0.25);padding-left:10px;}
.qhist-entry{display:flex;gap:6px;margin-bottom:5px;align-items:flex-start;}
.qhist-dot{color:rgba(180,130,240,.55);font-size:10px;margin-top:4px;flex-shrink:0;}
.qhist-text{font-size:13px;color:rgba(180,150,210,.65);line-height:1.55;}
.qhist-fold{margin-top:8px;border:none;background:transparent;}
.qhist-fold[open]>.qhist-summary{color:rgba(160,120,200,.7);}
.qhist-summary{font-size:13px;color:rgba(140,100,180,.55);cursor:pointer;list-style:none;padding:3px 0;letter-spacing:.02em;}
.qhist-summary::-webkit-details-marker{display:none;}
.qhist-summary::before{content:"▶ ";font-size:10px;}
.qhist-fold[open] .qhist-summary::before{content:"▼ ";}

/* ── DICE ── */
#dicepop{
  display:none;position:fixed;inset:0;z-index:50;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,0.56);backdrop-filter:blur(4px);
}
#dicepop.show{display:flex;}
.dicebox{
  background:rgba(16,9,32,0.97);border:2px solid rgba(160,110,240,0.4);
  border-radius:14px;padding:28px 40px;text-align:center;
  box-shadow:0 0 36px rgba(120,70,200,0.38);
  animation:diceIn .28s cubic-bezier(0.34,1.4,0.64,1);
}
.dicelbl{color:rgba(180,150,220,0.55);font-size:15px;letter-spacing:.1em;margin-bottom:9px;}
.dicenum{font-size:71px;font-weight:700;color:#ead0ff;line-height:1;margin-bottom:8px;}
.diceres{font-size:16px;font-weight:600;}
.dr-suc{color:#38c878;}.dr-fail{color:#e04040;}.dr-crit{color:#ffd700;}

/* ── MICRO DICE TRAY（1+3 混合版動態骰子：一般攻擊用） ── */
#micro-dice-tray{
  display:none;align-items:center;justify-content:center;gap:8px;
  margin:0 auto 6px;padding:5px 14px;width:fit-content;max-width:96%;
  background:rgba(16,9,32,0.85);border:1px solid rgba(160,110,240,0.35);
  border-radius:999px;backdrop-filter:blur(3px);
  font-size:13px;color:rgba(220,200,255,0.85);
  animation:mdIn .18s ease-out;
}
#micro-dice-tray.show{display:flex;}
@keyframes mdIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
#md-lbl{color:rgba(180,150,220,0.65);letter-spacing:.05em;}
#md-dice{font-weight:700;color:#ead0ff;min-width:2.4em;display:inline-block;text-align:center;}
#md-res{font-weight:600;}
#md-res.md-suc{color:#38c878;}
#md-res.md-fail{color:#e04040;}

/* ── BATTLE RESULT POPUP ── */
#batpop{
  display:none;position:fixed;inset:0;z-index:55;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,0.65);backdrop-filter:blur(6px);
}
#batpop.show{display:flex;}
.batbox{
  width:min(340px,90vw);
  background:linear-gradient(160deg,rgba(20,10,38,0.99),rgba(10,6,22,0.99));
  border:1px solid rgba(160,110,240,0.35);
  border-radius:18px;overflow:hidden;
  box-shadow:0 0 48px rgba(80,40,160,0.5);
  animation:diceIn .32s cubic-bezier(0.34,1.4,0.64,1);
}
.bat-header{
  background:linear-gradient(135deg,rgba(180,40,40,0.28),rgba(120,30,30,0.18));
  border-bottom:1px solid rgba(200,60,60,0.2);
  padding:18px 20px 14px;text-align:center;
}
.bat-header .enemy-icon{font-size:42px;display:block;margin-bottom:6px;}
.bat-header .victory-lbl{
  font-size:15px;letter-spacing:.2em;color:rgba(200,160,255,0.5);
  margin-bottom:4px;
}
.bat-header .enemy-name{
  font-size:21px;font-weight:700;color:#ead0ff;
}
.bat-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(160,110,240,0.3),transparent);margin:0;}
.bat-rewards{padding:16px 20px;}
.bat-reward-title{
  font-size:14px;letter-spacing:.14em;color:#f39c12;font-weight:600;
  margin-bottom:12px;
}
.bat-reward-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;margin-bottom:7px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(150,100,200,0.14);
  border-radius:8px;
}
.bat-reward-row .rw-label{font-size:15px;color:rgba(180,150,220,0.6);display:flex;align-items:center;gap:7px;}
.bat-reward-row .rw-val{font-size:16px;font-weight:700;}
.rw-xp{color:#fbbf24;text-shadow:0 0 4px rgba(251,191,36,0.3);}
.rw-gold{color:#f59e0b;text-shadow:0 0 4px rgba(245,158,11,0.3);}
.rw-loot{color:#70e0a0;}
.bat-xpbar-wrap{padding:0 20px 14px;}
.bat-xpbar-lbl{display:flex;justify-content:space-between;font-size:14px;color:#f39c12;margin-bottom:5px;}
.bat-xpbar-track{height:6px;background:rgba(255,255,255,0.07);border-radius:3px;overflow:hidden;}
.bat-xpbar-fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,#706010,#c0a010);
  transition:width 1s ease;
}
.bat-quest-notice{
  margin:0 20px 14px;
  background:rgba(40,180,80,0.12);
  border:1px solid rgba(56,200,100,0.25);
  border-radius:8px;padding:9px 13px;
  font-size:15px;color:#70e0a0;
  display:none;
}
.bat-quest-notice.show{display:block;}
.bat-footer{padding:14px 20px 18px;display:flex;gap:8px;}
.bat-btn{
  flex:1;border-radius:10px;padding:11px 8px;
  cursor:pointer;font-size:15px;font-weight:700;font-family:inherit;
  letter-spacing:.06em;transition:all .15s;border:1px solid;
}
.bat-btn.continue{
  background:rgba(120,70,200,0.32);
  border-color:rgba(160,110,240,0.45);
  color:#e0c0ff;
}
.bat-btn.continue:hover{background:rgba(140,90,220,0.5);}
.bat-btn.view-inv{
  background:rgba(50,120,200,0.2);
  border-color:rgba(70,140,220,0.35);
  color:#80b8e8;
}
.bat-btn.view-inv:hover{background:rgba(50,120,200,0.35);}

/* === 商店 Overlay === */
#shop-gold {
  color: #f59e0b;
  font-weight: bold;
}
#shop-gold.insufficient {
  color: #ef4444;
  animation: flash 0.4s ease 2;
}
@keyframes flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
.shop-item-locked {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(1);
}
.shop-price-warn {
  color: #ef4444;
  font-size: 0.85em;
  font-weight: bold;
}
.islot .s-eqtag {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 11px;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  border-radius: 3px;
  padding: 0px 4px;
  font-weight: bold;
  pointer-events: none;
}
/* 已擁有/數量 角標 */
.islot .s-owned {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 11px;
  background: rgba(20, 180, 160, 0.22);
  border: 1px solid rgba(30, 210, 190, 0.4);
  color: #5eead4;
  border-radius: 3px;
  padding: 0px 4px;
  font-weight: 700;
  pointer-events: none;
  line-height: 1.6;
}