/* ==========================================================================
   kaixiangwangcsgo2.com — 开箱模拟器样式
   机制：垂直级联滚轮锁定 + 3D 卡牌翻转揭晓（区别于参考站的横向滚动条）
   ========================================================================== */

.sim{display:grid;grid-template-columns:296px minmax(0,1fr);gap:var(--gap);align-items:start}

/* ---------- 左：箱子选择 ---------- */
.picker{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;position:sticky;top:78px}
.picker-hd{padding:13px 15px;border-bottom:1px solid var(--line);background:var(--panel2)}
.picker-hd h2{margin:0;font-size:14.5px;display:flex;align-items:center;gap:8px}
.picker-hd h2::before{content:"";width:3px;height:14px;background:var(--lime);border-radius:2px}
.picker-hd .inp{width:100%;margin-top:10px}
.picker-f{padding:10px 15px;border-bottom:1px solid var(--line);display:flex;gap:6px;
  flex-wrap:wrap;background:var(--panel)}
.picker-f .chip{padding:5px 11px;font-size:12px}
.picker-list{max-height:min(56vh,520px);overflow-y:auto;padding:9px;display:grid;gap:7px}
.picker-list::-webkit-scrollbar{width:6px}
.picker-list::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.pk{display:grid;grid-template-columns:52px minmax(0,1fr);gap:11px;align-items:center;
  padding:8px;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;
  transition:.15s;background:transparent;text-align:left;font-family:inherit;width:100%}
.pk:hover{background:var(--panel2);border-color:var(--line)}
.pk.on{background:var(--lime-dim);border-color:var(--lime)}
.pk img{width:52px;height:40px;object-fit:contain}
.pk .pn{font-size:12.5px;font-weight:700;color:var(--txt);line-height:1.4;
  overflow-wrap:anywhere}
.pk .pm{font-size:10.5px;color:var(--txt3);margin-top:2px;font-family:var(--mono)}
.pk.on .pn{color:var(--lime)}
.picker-empty{padding:26px 12px;text-align:center;color:var(--txt3);font-size:12.5px}

/* ---------- 主台 ---------- */
.machine{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.machine-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--line);background:var(--panel2);
  flex-wrap:wrap}
.machine-hd .mh-l{display:flex;align-items:center;gap:11px;min-width:0}
.machine-hd img{width:58px;height:44px;object-fit:contain;flex:none}
.machine-hd .mh-t{min-width:0}
.machine-hd b{display:block;font-size:15px;font-weight:800;overflow-wrap:anywhere}
.machine-hd span{font-size:11.5px;color:var(--txt3);font-family:var(--mono)}
.machine-hd .mh-r{display:flex;gap:7px;align-items:center;flex-wrap:wrap}

/* 滚轮区 */
.reelbox{position:relative;background:
  radial-gradient(ellipse 60% 90% at 50% 50%,rgba(185,255,60,.05),transparent 70%),var(--bg2);
  padding:clamp(14px,2.6vw,24px) clamp(12px,2.4vw,22px)}
.reel{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(7px,1.4vw,13px);height:clamp(132px,20vw,176px);overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:11px}
.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;height:34px;z-index:3;
  pointer-events:none}
.reel::before{top:0;background:linear-gradient(var(--panel),transparent)}
.reel::after{bottom:0;background:linear-gradient(transparent,var(--panel))}
.rcol{position:relative;overflow:hidden;border-radius:var(--r-sm)}
.rcol .strip{display:flex;flex-direction:column;gap:9px;will-change:transform}
.cell{height:calc((clamp(132px,20vw,176px) - 22px - 18px)/1.6);flex:none;
  display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r-sm);border-left-width:3px;padding:4px}
.cell img{max-height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.5))}
.cell.win{background:var(--panel3);border-left-width:4px;
  box-shadow:inset 0 0 0 1px rgba(185,255,60,.35),0 0 18px -4px var(--lime)}
.cell.win img{filter:drop-shadow(0 0 12px rgba(185,255,60,.5))}
/* 中奖线 */
.reel-line{position:absolute;left:clamp(12px,2.4vw,22px);right:clamp(12px,2.4vw,22px);
  top:50%;height:2px;transform:translateY(-50%);z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--lime),transparent);opacity:.5}
.reel-line::before,.reel-line::after{content:"";position:absolute;top:50%;
  width:8px;height:8px;border:2px solid var(--lime);transform:translateY(-50%) rotate(45deg)}
.reel-line::before{left:-4px}
.reel-line::after{right:-4px}
.reel.is-run .rcol .strip{animation:roll .52s linear infinite}
@keyframes roll{to{transform:translateY(-50%)}}
.reel.is-lock .rcol:nth-child(1) .strip{animation-play-state:paused}
.reel.is-lock .rcol:nth-child(2) .strip{animation-play-state:paused}
.reel.is-lock .rcol:nth-child(3) .strip{animation-play-state:paused}

/* 揭晓卡 */
.result{margin-top:clamp(14px,2.2vw,20px);display:grid;
  grid-template-columns:minmax(0,1fr);gap:var(--gap);align-items:start}
.rcard{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;
  align-items:center;padding:clamp(15px,2.4vw,22px);background:var(--panel2);
  border:1px solid var(--line);border-top:3px solid var(--ac,var(--lime));
  border-radius:var(--r);min-height:132px}
.rcard.empty-r{display:flex;align-items:center;justify-content:center;
  color:var(--txt3);font-size:13.5px;text-align:center;border-top-color:var(--line);
  min-height:120px;padding:22px}
.rcard .win{position:absolute;left:14px;top:-11px;font-size:10.5px;font-weight:900;
  letter-spacing:.16em;padding:3px 10px;border-radius:4px;background:var(--ac,var(--lime));
  color:#07130A;text-transform:uppercase}
.rcard .rimg{width:clamp(104px,15vw,158px);aspect-ratio:1;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 112%,var(--ac-dim,rgba(185,255,60,.15)),transparent 70%);
  border-radius:var(--r);perspective:900px}
.rcard .rimg img{max-height:100%;width:auto;object-fit:contain;transform-style:preserve-3d;
  animation:flip .78s cubic-bezier(.2,.85,.3,1)}
@keyframes flip{0%{transform:rotateY(-92deg) scale(.86);opacity:0}
  60%{opacity:1}100%{transform:none;opacity:1}}
.rcard .rt{min-width:0}
.rcard h3{margin:0 0 9px;font-size:clamp(16px,2.2vw,22px);font-weight:800;line-height:1.3;
  overflow-wrap:anywhere}
.rcard .rmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;
  margin-top:12px}
.rcard .rmeta>div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px 11px}
.rcard .rmeta b{display:block;font-family:var(--mono);font-size:13.5px;font-weight:800;
  color:var(--lime);line-height:1.35;overflow-wrap:anywhere}
.rcard .rmeta span{display:block;font-size:10.5px;color:var(--txt3);margin-top:2px}
.rcard .rfx{display:none}
.rcard.fx-cov,.rcard.fx-spe{animation:glowPulse 1.5s ease-out}
@keyframes glowPulse{0%{box-shadow:0 0 0 0 var(--ac)}70%{box-shadow:0 0 0 16px transparent}
  100%{box-shadow:0 0 0 0 transparent}}

/* 控制区 */
.ctrl{display:flex;gap:9px;flex-wrap:wrap;padding:14px 16px;border-top:1px solid var(--line);
  background:var(--panel2);align-items:center}
.ctrl .sp{flex:1}
.hint{font-size:12px;color:var(--txt3);padding:0 16px 14px;background:var(--panel2);
  line-height:1.7}
.hint b{color:var(--lime)}
.hint kbd{font-size:11px;padding:1px 5px}

/* ---------- 十连网格 ---------- */
.ten{margin-top:var(--gap);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.ten-hd{padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel2);
  font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap}
.ten-hd small{color:var(--txt3);font-weight:600;font-size:11.5px}
.ten-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;padding:14px}
.tc{background:var(--panel2);border:1px solid var(--line);border-top:2px solid var(--ac,var(--lime));
  border-radius:var(--r-sm);padding:9px;opacity:0;transform:scale(.9)}
.tc.in{animation:pop .42s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes pop{to{opacity:1;transform:none}}
.tc[data-tier="3"],.tc[data-tier="4"]{box-shadow:0 0 0 1px var(--ac),0 0 20px -4px var(--ac)}
.tc img{height:54px;width:100%;object-fit:contain;margin:4px 0 7px}
.tc .tn{font-size:10.5px;font-weight:600;line-height:1.35;height:2.7em;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.tc .tt{font-size:10px;font-weight:800;margin-top:5px;color:var(--ac,var(--lime))}

/* ---------- 统计 / 库存 ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.stat-grid>div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 13px}
.stat-grid b{display:block;font-family:var(--mono);font-size:19px;font-weight:900;
  color:var(--lime);line-height:1.25}
.stat-grid span{font-size:11.5px;color:var(--txt2);display:block;margin-top:2px}

.hist{display:grid;gap:9px}
.hi{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;
  align-items:center;font-size:12.5px}
.hi .hn{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hi .hb{height:8px;border-radius:4px;background:var(--panel3);overflow:hidden;
  grid-column:span 1}
.hi .hb i{display:block;height:100%;background:var(--ac);min-width:2px}
.hi .hv{font-family:var(--mono);text-align:right;font-weight:700;color:var(--ac);font-size:12px}
.hi .hd{font-family:var(--mono);text-align:right;font-size:11.5px;color:var(--txt3)}

.inv{display:grid;gap:8px;max-height:420px;overflow-y:auto;padding-right:4px}
.inv::-webkit-scrollbar{width:6px}
.inv::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.iv{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px;background:var(--panel2);border:1px solid var(--line);
  border-left:3px solid var(--ac,var(--lime));border-radius:var(--r-sm)}
.iv img{width:44px;height:34px;object-fit:contain}
.iv .ivn{font-size:12px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.iv .ivm{font-size:10.5px;color:var(--txt3);font-family:var(--mono);margin-top:2px}
.iv .ivt{font-size:10px;font-weight:800;color:var(--ac);text-align:right;white-space:nowrap}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .sim{grid-template-columns:1fr}
  .picker{position:static}
  .picker-list{max-height:280px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .reel{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ten-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:11px}
  .rcard{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px}
  .rcard .rmeta{width:100%}
  .rcard .rt{text-align:center}
}
@media (max-width:520px){
  .picker-list{grid-template-columns:1fr}
  .reel{padding:8px;gap:6px}
  .ten-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-grid{grid-template-columns:1fr 1fr}
  .ctrl{gap:7px;padding:12px}
  .ctrl .btn{flex:1 1 46%;min-width:0}
  .ctrl .sp{display:none}
}