/* ===== 模拟抽奖：与站点统一的深色面板风格 =====
 * 配色/圆角/间距全部复用 style.css 的变量与组件规范（--panel / --bg2 / --line / --accent / --accent2）
 */
.lot-wrap{ display:flex; flex-direction:column; gap:14px; }

/* 玩法切换（同 .chip 规范，选中态同侧边栏导航） */
.lot-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.lot-tab{
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:10px; cursor:pointer; font-size:13px;
  border:1px solid var(--line,#232d47); background:var(--panel,#151c2e); color:var(--txt2,#9aa3bd);
  transition:background .15s, color .15s, border-color .15s;
}
.lot-tab:hover{ background:var(--panel2,#1c2540); color:var(--txt,#e8ecf7); }
.lot-tab.active{
  background:linear-gradient(90deg,rgba(255,138,61,.18),rgba(255,138,61,.04));
  border-color:rgba(255,138,61,.45); color:#fff; font-weight:600;
  box-shadow:inset 3px 0 0 var(--accent,#ff8a3d);
}

/* 主舞台（同 .panel 规范） */
.lot-frame{ display:block; }
.lot-inner{
  background:linear-gradient(180deg,var(--panel,#151c2e),var(--bg2,#0f1524));
  border:1px solid var(--line,#232d47); border-radius:14px; padding:18px;
}
.lot-titlebar{ display:flex; align-items:baseline; gap:10px; margin-bottom:4px; flex-wrap:wrap; }
.lot-titlebar .t{ font-size:16px; font-weight:700; color:var(--txt,#e8ecf7); }
.lot-titlebar .s{ font-size:12px; color:var(--txt2,#9aa3bd); line-height:1.6; }
.lot-rule{ height:1px; margin:12px 0 14px; background:var(--line,#232d47); }

/* 控制区 */
.lot-ctl{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.lot-btn{
  padding:9px 16px; border-radius:10px; cursor:pointer; font-size:13px; white-space:nowrap;
  border:1px solid var(--line,#232d47); background:var(--panel,#151c2e); color:var(--txt2,#9aa3bd);
  transition:all .15s;
}
.lot-btn:hover{ border-color:var(--accent,#ff8a3d); color:var(--txt,#e8ecf7); }
.lot-btn:active{ transform:translateY(1px); }
.lot-btn.gold{
  border-color:transparent; color:#fff; font-weight:600;
  background:linear-gradient(135deg,#ff8a3d,#ff6a2b);
  box-shadow:0 4px 14px rgba(255,120,50,.28);
}
.lot-btn.gold:hover{ filter:brightness(1.08); }
.lot-btn.wood{
  border-color:rgba(79,140,255,.45); background:rgba(79,140,255,.13); color:#8ab4ff;
}
.lot-btn.wood:hover{ border-color:var(--accent2,#4f8cff); color:#fff; }
.lot-btn:disabled{ opacity:.45; cursor:not-allowed; }
.lot-n{ width:96px; }
.lot-select, .lot-input{
  padding:8px 12px; border-radius:10px; font-size:13px; font-family:inherit; outline:none;
  border:1px solid var(--line,#232d47); background:var(--bg2,#0f1524); color:var(--txt,#e8ecf7);
  transition:border-color .15s;
}
.lot-select:focus, .lot-input:focus{ border-color:var(--accent2,#4f8cff); }
.lot-select option{ background:var(--bg2,#0f1524); }
.lot-select{ min-width:220px; }
.lot-hint{ font-size:12px; color:var(--muted,#5a6480); line-height:1.7; }
.lot-hint b{ color:var(--accent,#ff8a3d); font-weight:700; }

/* 结果格（深色卡片 + 稀有度描边） */
.lot-stage{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0 6px; }
.lot-slot{
  position:relative; width:92px; height:92px; border-radius:12px; flex:none;
  background:linear-gradient(180deg,var(--panel2,#1c2540),var(--bg2,#0f1524));
  border:1px solid var(--line,#232d47);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:6px; overflow:hidden; transition:box-shadow .2s;
}
.lot-slot.big{ width:132px; height:132px; }
.lot-slot .nm{ font-size:11.5px; font-weight:600; color:var(--txt,#e8ecf7); line-height:1.25; word-break:break-all; }
.lot-slot.big .nm{ font-size:13.5px; }
.lot-slot .qt{ margin-top:4px; font-size:11px; font-weight:700; color:var(--txt2,#9aa3bd); }
.lot-slot .pp{ margin-top:3px; font-size:10px; color:var(--muted,#5a6480); }
.lot-slot.r-uncommon{ border-color:rgba(52,211,153,.55); box-shadow:0 0 12px rgba(52,211,153,.18); }
.lot-slot.r-rare{ border-color:rgba(79,140,255,.6); box-shadow:0 0 14px rgba(79,140,255,.2); }
.lot-slot.r-epic{ border-color:rgba(167,139,250,.6); box-shadow:0 0 16px rgba(167,139,250,.22); }
.lot-slot.r-legend{
  border-color:rgba(255,138,61,.75);
  background:linear-gradient(180deg,rgba(255,138,61,.14),var(--bg2,#0f1524));
  box-shadow:0 0 20px rgba(255,138,61,.28);
}
.lot-slot.r-legend .nm{ color:#ffcf8a; }
.lot-slot.fail{ opacity:.6; }
.lot-slot.fail .nm{ color:var(--muted,#5a6480); }
.lot-anim{ animation:lotPop .34s cubic-bezier(.2,1.4,.5,1) both; }
@keyframes lotPop{ from{ transform:scale(.5); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* 概率条（熔炼合成链） */
.lot-bars{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.lot-bar{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--txt2,#9aa3bd); }
.lot-bar .lb{ width:230px; flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lot-bar .track{ flex:1; height:10px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.lot-bar .fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,#ffb066,#ff8a3d); }
.lot-bar .fill.g{ background:linear-gradient(90deg,#5eead4,#34d399); }
.lot-bar .fill.r{ background:linear-gradient(90deg,#ff8080,#e5484d); }
.lot-bar .pv{ width:80px; flex:none; text-align:right; font-weight:700; color:var(--txt,#e8ecf7); font-variant-numeric:tabular-nums; }

/* 统计 / 面板（同 .panel） */
.lot-cols{ display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.lot-col{ flex:1 1 340px; min-width:300px; }
.lot-panel{
  background:linear-gradient(180deg,var(--panel,#151c2e),var(--bg2,#0f1524));
  border:1px solid var(--line,#232d47); border-radius:14px; padding:18px;
}
.lot-panel h4{ font-size:14px; font-weight:600; margin-bottom:12px; color:var(--txt,#e8ecf7); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lot-panel h4 .sub{ font-size:11.5px; font-weight:400; color:var(--muted,#5a6480); }
.lot-kv{ display:flex; gap:24px; flex-wrap:wrap; margin-bottom:12px; }
.lot-kv .k{ font-size:12px; color:var(--muted,#5a6480); }
.lot-kv .v{ font-size:19px; font-weight:700; color:var(--txt,#e8ecf7); font-variant-numeric:tabular-nums; }

.lot-tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
.lot-tbl th{
  text-align:left; padding:9px 10px; color:var(--txt2,#9aa3bd); font-weight:600; font-size:12px;
  border-bottom:1px solid var(--line,#232d47); white-space:nowrap;
}
.lot-tbl td{ padding:9px 10px; border-bottom:1px solid rgba(255,255,255,.04); color:var(--txt,#e8ecf7); vertical-align:middle; }
.lot-tbl td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.lot-tbl tbody tr:hover td{ background:rgba(255,255,255,.025); }
.lot-tbl tbody tr:last-child td{ border-bottom:none; }
.lot-scroll{ max-height:420px; overflow:auto; }
.lot-empty{ padding:22px; text-align:center; color:var(--muted,#5a6480); font-size:12.5px; }

.rarity-tag{
  display:inline-block; padding:2px 7px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap;
}
.rarity-tag.r-common{ background:rgba(139,147,171,.18); color:#9aa3bd; }
.rarity-tag.r-uncommon{ background:rgba(52,211,153,.16); color:#4ade80; }
.rarity-tag.r-rare{ background:rgba(79,140,255,.16); color:#7aa9ff; }
.rarity-tag.r-epic{ background:rgba(167,139,250,.16); color:#b79bfb; }
.rarity-tag.r-legend{ background:rgba(255,138,61,.18); color:#ffb066; }

.lot-src{ font-size:11.5px; color:var(--muted,#5a6480); line-height:1.7; }
.lot-src a{ color:var(--accent2,#4f8cff); text-decoration:none; }
.lot-src a:hover{ text-decoration:underline; }

.lot-detail summary{ cursor:pointer; font-size:13px; color:var(--txt2,#9aa3bd); }
.lot-search{ width:100%; max-width:280px; }
.lot-poolhead{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; }

/* 排序切换（同 .chip） */
.lot-sortbar{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--txt2,#9aa3bd); margin:4px 0 8px; }
.lot-sortbtn{
  padding:5px 11px; border-radius:999px; cursor:pointer; font-size:12px;
  border:1px solid var(--line,#232d47); background:transparent; color:var(--txt2,#9aa3bd);
  transition:all .15s;
}
.lot-sortbtn:hover{ color:var(--txt,#e8ecf7); border-color:var(--accent2,#4f8cff); }
.lot-sortbtn.on{
  background:rgba(79,140,255,.13); border-color:rgba(79,140,255,.45); color:#fff; font-weight:600;
}
.lot-sortbtn:disabled{ opacity:.45; cursor:not-allowed; }
.lot-subtag{
  display:inline-block; margin-left:4px; padding:1px 6px; border-radius:4px;
  font-size:10.5px; background:rgba(139,147,171,.16); color:#8b93ab; white-space:nowrap;
}

@media (max-width:640px){
  .lot-slot{ width:74px; height:74px; }
  .lot-slot.big{ width:110px; height:110px; }
  .lot-bar .lb{ width:140px; }
}