/* CSGO 开箱模拟器 - 深色电竞风 */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#0d1117; --panel:#151c26; --panel2:#1b2430; --line:#263243;
  --txt:#dbe4ef; --dim:#8494a8; --acc:#ff9d2e; --acc2:#ffb75e;
  --mil:#4b69ff; --res:#8847ff; --cla:#d32ce6; --cov:#eb4b4b; --spe:#ffd700;
}
body { background:var(--bg); color:var(--txt); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; min-height:100vh; }
.wrap { max-width:1180px; margin:0 auto; padding:0 18px; }
.hidden { display:none !important; }
a { color:inherit; text-decoration:none; }
b { color:var(--acc2); }

/* 顶栏 */
.topbar { background:#0a0e13; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.topbar .wrap { display:flex; align-items:center; gap:26px; height:60px; }
.logo { font-size:22px; font-weight:900; color:#fff; letter-spacing:1px; }
.logo span { color:var(--acc); }
.topbar nav { display:flex; gap:20px; flex:1; }
.topbar nav a { color:var(--dim); font-size:15px; padding:4px 2px; }
.topbar nav a:hover, .topbar nav a.active { color:var(--acc); border-bottom:2px solid var(--acc); }
.badge { font-size:12px; color:#7ee0a3; border:1px solid #2c5c42; background:#10241a; padding:4px 10px; border-radius:20px; white-space:nowrap; }

/* Hero */
.hero { background:linear-gradient(160deg,#131a24 0%,#0d1117 60%),radial-gradient(600px 200px at 70% 0%,rgba(255,157,46,.12),transparent); border-bottom:1px solid var(--line); padding:34px 0 26px; text-align:center; }
.hero h1 { font-size:34px; color:#fff; letter-spacing:2px; }
.hero h1::after { content:""; display:block; width:70px; height:3px; background:var(--acc); margin:12px auto 0; }
.hero p { margin-top:12px; color:var(--dim); font-size:15px; }
.hero-tips { margin-top:10px; font-size:12px; color:#6c7a8c; }

/* 区块 */
main { padding:26px 0 50px; }
.sec-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.sec-head h2, .sec-head h3 { color:#fff; font-size:20px; border-left:4px solid var(--acc); padding-left:10px; }
.sec-head h3 small { font-size:12px; color:var(--dim); font-weight:400; margin-left:8px; }
#caseSearch { background:var(--panel2); border:1px solid var(--line); color:var(--txt); padding:9px 14px; border-radius:8px; width:240px; font-size:14px; outline:none; }
#caseSearch:focus { border-color:var(--acc); }

/* 箱子卡片 */
.case-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.case-card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px 10px 14px; text-align:center; cursor:pointer; transition:.18s; }
.case-card:hover { transform:translateY(-3px); border-color:var(--acc); box-shadow:0 8px 22px rgba(255,157,46,.15); }
.case-card img { width:110px; height:83px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.case-card .cn { margin-top:10px; font-size:14px; color:#fff; font-weight:700; }
.case-card .en { font-size:11px; color:var(--dim); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.case-card .cnt { display:inline-block; margin-top:7px; font-size:11px; color:var(--acc2); background:rgba(255,157,46,.1); border-radius:10px; padding:2px 9px; }

/* 开箱布局 */
.open-layout { display:grid; grid-template-columns:1fr 330px; gap:16px; margin-bottom:18px; }
@media (max-width:900px){ .open-layout { grid-template-columns:1fr; } }

.roulette-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 18px 16px; }
.r-window { position:relative; overflow:hidden; height:150px; background:#0a0e14; border:1px solid var(--line); border-radius:8px; }
.r-marker { position:relative; margin:0 auto -1px; width:2px; height:18px; background:var(--acc); z-index:5; box-shadow:0 0 8px var(--acc); }
.r-strip { position:absolute; top:15px; left:0; display:flex; gap:10px; will-change:transform; }
.r-item { flex:0 0 140px; width:140px; height:120px; background:var(--panel2); border:1px solid var(--line); border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.r-item img { width:120px; height:70px; object-fit:contain; }
.r-item .nm { font-size:11px; color:var(--dim); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.r-item.t0 { border-color:rgba(75,105,255,.55); } .r-item.t1 { border-color:rgba(136,71,255,.6); }
.r-item.t2 { border-color:rgba(211,44,230,.6); } .r-item.t3 { border-color:rgba(235,75,75,.7); }
.r-item.t4 { border-color:rgba(255,215,0,.8); box-shadow:0 0 14px rgba(255,215,0,.25) inset; }
.open-btns { display:flex; gap:12px; margin-top:16px; }
.btn-main { flex:1; background:linear-gradient(135deg,#ff9d2e,#f07b1e); color:#1a1206; font-size:19px; font-weight:900; letter-spacing:6px; border:none; border-radius:8px; padding:14px 0; cursor:pointer; transition:.15s; }
.btn-main:hover { filter:brightness(1.1); }
.btn-main:disabled { filter:grayscale(.6); cursor:not-allowed; }
.btn-sub { background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:0 22px; font-size:15px; cursor:pointer; }
.btn-sub:hover { border-color:var(--acc); color:var(--acc); }
.btn-ghost { background:none; border:1px solid var(--line); color:var(--dim); border-radius:8px; padding:8px 16px; cursor:pointer; font-size:14px; }
.btn-ghost:hover { color:var(--acc); border-color:var(--acc); }
.r-hint { margin-top:12px; font-size:12px; color:var(--dim); text-align:center; }

/* 概率面板 */
.odds-panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; }
.odds-panel h3 { color:#fff; font-size:16px; margin-bottom:14px; }
.odds-row { margin-bottom:12px; }
.odds-row label { display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; }
.odds-row label .rn { font-weight:700; }
.odds-row label .rv { color:var(--dim); }
.odds-row input[type=range] { width:100%; accent-color:var(--acc); }
.odds-btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.btn-mini { background:var(--panel2); border:1px solid var(--line); color:var(--txt); font-size:12px; border-radius:6px; padding:6px 10px; cursor:pointer; }
.btn-mini:hover { border-color:var(--acc); color:var(--acc); }
.odds-note { margin-top:12px; font-size:11px; color:#66758a; line-height:1.7; }

/* 道具一览 */
.items-card, .inv-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:18px; }
.tier-title { font-size:14px; font-weight:800; margin:16px 0 10px; display:flex; align-items:center; gap:8px; }
.tier-title .dot { width:10px; height:10px; border-radius:2px; }
.tier-title .pc { font-weight:400; font-size:12px; color:var(--dim); }
.item-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px; }
.item-cell { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:10px 6px 8px; text-align:center; cursor:pointer; transition:.15s; position:relative; }
.item-cell:hover { transform:translateY(-2px); }
.item-cell.off { opacity:.3; filter:grayscale(1); }
.item-cell img { width:110px; height:66px; object-fit:contain; }
.item-cell .nm { font-size:11px; color:var(--txt); margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-cell .off-tag { position:absolute; top:4px; right:4px; font-size:10px; color:#ff6b6b; display:none; }
.item-cell.off .off-tag { display:block; }

/* 库存 */
.pill { background:rgba(255,157,46,.12); color:var(--acc2); border-radius:10px; font-size:12px; padding:2px 10px; margin-left:8px; vertical-align:2px; }
.inv-stats { display:flex; gap:8px; flex-wrap:wrap; }
.inv-stats span { font-size:12px; padding:3px 10px; border-radius:10px; background:var(--panel2); }
.inv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px; margin-top:14px; }
.inv-empty { color:var(--dim); font-size:13px; padding:20px 0; text-align:center; }

/* 结果弹窗 */
.modal { position:fixed; inset:0; background:rgba(5,8,12,.82); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal-box { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:30px 34px; text-align:center; min-width:340px; max-width:92vw; animation:pop .25s ease; }
@keyframes pop { from { transform:scale(.85); opacity:0; } to { transform:scale(1); opacity:1; } }
.res-wear { color:var(--dim); font-size:13px; margin-bottom:6px; }
.res-img { width:280px; max-width:70vw; margin:8px auto; filter:drop-shadow(0 8px 20px rgba(0,0,0,.6)); animation:shine 1.6s ease infinite alternate; }
@keyframes shine { from { filter:drop-shadow(0 4px 12px rgba(255,255,255,.1)); } to { filter:drop-shadow(0 4px 22px rgba(255,255,255,.35)); } }
.res-name { font-size:19px; font-weight:800; color:#fff; }
.res-float { font-size:12px; color:var(--dim); margin-top:4px; }
.res-btns { display:flex; gap:10px; justify-content:center; margin-top:20px; }
.res10 { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:6px; }
.res10 .mini { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:8px 4px; }
.res10 .mini img { width:86px; height:52px; object-fit:contain; }
.res10 .mini .nm { font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

footer { border-top:1px solid var(--line); background:#0a0e13; padding:26px 0 30px; color:#66758a; font-size:12px; line-height:2; }