/* Case workshop, transparent sprites and simultaneous reward reveals. */
.crate-workshop { margin: 0 0 24px; padding: 20px; border: 1px solid #3b365a; background: linear-gradient(125deg,#19162d,#101624); border-radius: 14px; }
.crate-workshop-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.crates-section-eyebrow { color:#b7a4fa; font-size:10px; letter-spacing:1.2px; font-weight:800; }
.crate-workshop h3 { margin:5px 0 0; font-size:22px; color:#f5f1ff; }
#crateChargeTimer { color:#a6efca; font-size:12px; text-align:right; }
.crate-workshop-note { color:#afb7cc; font-size:12px; line-height:1.65; margin:12px 0 18px; max-width:850px; }
.crate-workshop-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.crate-upgrade { display:flex; flex-direction:column; min-width:0; padding:15px; border:1px solid #343750; border-radius:10px; background:#121827; }
.crate-upgrade.is-owned { border-color:#397964; background:#112522; }
.crate-upgrade-title { display:flex; align-items:center; gap:8px; color:#baa5ff; }
.crate-upgrade-title h4 { margin:0; font-size:14px; color:#f1efff; }
.crate-upgrade p { margin:12px 0; font-size:12px; line-height:1.6; color:#b2bdd0; }
.crate-upgrade-requirement { margin-top:auto; margin-bottom:10px; font-size:11px; color:#99aec8; }
.crate-secondary-button { padding:9px; border:1px solid #745bd3; border-radius:7px; background:#342852; color:#f3ecff; font-size:12px; font-weight:750; cursor:pointer; min-height:40px; }
.crate-secondary-button:disabled { opacity:.55; cursor:default; border-color:#3a4255; background:#1d2534; }
.crate-secondary-button:not(:disabled):hover { background:#503979; }
#cratesCardsGrid .crate-shop-card { padding:18px; border-radius:12px; border:1px solid #34394f; border-top:3px solid var(--crate-color); background:linear-gradient(160deg,#171e2e,#0c111e); box-shadow:0 6px 16px #0003; }
#cratesCardsGrid .crate-card-topline { gap:8px; min-height:24px; }
#cratesCardsGrid .crate-card-kicker { font-size:10px; color:#b8c4d9; letter-spacing:.5px; }
#cratesCardsGrid .crate-card-status { white-space:nowrap; font-size:9px; color:var(--crate-color); }
.crate-sprite-scene { width:100%; min-height:176px; display:grid; place-items:center; position:relative; margin:0 0 10px; background:radial-gradient(ellipse at center, color-mix(in srgb,var(--crate-color) 14%,transparent),transparent 65%); }
.crate-sprite-scene img { width:160px; height:160px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 8px 5px #0006); transition:transform .2s; }
.crate-shop-card:hover .crate-sprite-scene img { transform:translateY(-4px); }
#cratesCardsGrid .crate-card-title { font-family:inherit; font-size:19px; line-height:1.3; color:#f1f5ff; margin:0 0 10px; text-align:left; }
#cratesCardsGrid .crate-card-desc { font-size:12px; line-height:1.6; min-height:58px; margin:0 0 14px; color:#b0bdd1; text-align:left; }
#cratesCardsGrid .crate-card-drops-preview { min-height:28px; gap:5px; margin-bottom:16px; }
#cratesCardsGrid .crate-drop-badge { border-radius:5px; padding:5px 7px; font-size:10px; background:#ffffff07; color:#cbd6e8; border:1px solid #ffffff12; }
#cratesCardsGrid .crate-card-price-row { margin-top:auto; gap:6px; }
#cratesCardsGrid .btn-open-crate { min-height:42px; padding:10px; color:#09111c; border-radius:7px; font-size:12px; box-shadow:none; gap:7px; }
#crateRouletteModal .crate-modal-box { width:min(820px,96vw); max-width:820px; max-height:90dvh; overflow:auto; padding:22px; border:1px solid #555174; border-radius:16px; background:linear-gradient(155deg,#1b1930,#0e1523 55%); box-shadow:0 24px 90px #000a; scrollbar-width:thin; scrollbar-color:#38d6a7 #08130f; scrollbar-gutter:stable; overscroll-behavior:contain; }
#crateRouletteModal .crate-modal-box::-webkit-scrollbar { width:11px; }
#crateRouletteModal .crate-modal-box::-webkit-scrollbar-track { background:#07110e; border-left:1px solid #1c3c33; }
#crateRouletteModal .crate-modal-box::-webkit-scrollbar-thumb { min-height:54px; border:2px solid #07110e; border-radius:7px; background:linear-gradient(180deg,#66f2c2,#20a982); box-shadow:inset 0 0 0 1px #a3ffde55,0 0 8px #21d49a44; }
#crateRouletteModal .crate-modal-box::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#8affd7,#32c99b); }
#crateRouletteModal .crate-modal-box::-webkit-scrollbar-corner { background:#07110e; }
#crateRouletteModal .crate-modal-header { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-right:36px; border-bottom:1px solid #ffffff12; margin-bottom:14px; }
#crateRouletteModal .crate-modal-title { font-family:inherit; font-size:22px; line-height:1.3; color:#f4f2ff; min-width:0; }
#crateRouletteModal .btn-close-modal-icon { width:36px; height:36px; }
.crate-modal-charge { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:12px; color:#aabbce; margin-bottom:16px; }
.crate-modal-charge strong { color:#99f1ca; margin-left:5px; }
.crate-opening-stage { display:block; min-width:0; padding:8px 0; }
.crate-opening-stage .crate-roulette-viewport { height:174px; margin:0; border:2px solid #05080d; border-radius:9px; background:linear-gradient(90deg,#050a12 0%,transparent 16%,transparent 84%,#050a12 100%),radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--crate-color) 15%,transparent),transparent 43%),#08111c; box-shadow:inset 0 0 28px #000c,0 0 0 1px color-mix(in srgb,var(--crate-color) 35%,transparent); }
.crate-opening-stage .crate-roulette-track { will-change:transform; gap:10px; padding:0 12px; }
.crate-opening-stage .crate-roulette-item-card { width:126px; height:140px; border:2px solid #080b11; border-top-color:var(--item-color); border-radius:7px; background:linear-gradient(155deg,color-mix(in srgb,var(--item-color) 13%,#172033),#0b1220 72%); box-shadow:inset 0 0 0 1px #ffffff0d,0 4px 0 #05070c; }
.crate-opening-stage .crate-roulette-item-card.winner { animation:none; border-color:var(--reward-color,var(--item-color)); box-shadow:inset 0 0 0 1px #ffffff30,0 0 22px color-mix(in srgb,var(--item-color) 70%,transparent),0 4px 0 #05070c; }
.crate-opening-stage .crate-roulette-center-marker { width:2px; background:#ffd447; box-shadow:0 0 12px #ffd447,0 0 30px #ffd44788; }
.crate-opening-stage .crate-roulette-marker-label { top:7px; padding:4px 8px; border-radius:3px; background:#ffd447; color:#171006; font-size:8px; font-weight:900; }
.crate-opening-stage .crate-item-icon { font-size:32px; }
.crate-opening-stage .crate-item-name { font-family:inherit; font-size:11px; line-height:1.3; }
.crate-opening-stage .crate-item-rarity { font-family:inherit; font-size:8px; border-radius:3px; }
.crate-roulette-stack { display:grid; gap:9px; }
.crate-reel { position:relative; min-width:0; }
.crate-reel-label { position:absolute; z-index:14; left:8px; top:7px; padding:3px 7px; border:1px solid #ffffff20; border-radius:3px; background:#071019dd; color:#aebbd0; font-size:8px; font-weight:900; letter-spacing:.7px; pointer-events:none; }
.crate-spin-heading { margin:0 0 14px; text-align:center; }
.crate-spin-heading > span { color:var(--crate-color); font-size:10px; font-weight:900; letter-spacing:1.4px; }
.crate-spin-heading h2 { margin:5px 0 3px; color:#f5f7ff; font-size:20px; }
.crate-spin-heading p { margin:0; color:#98a9c0; font-size:11px; }
.crate-roulette-stack.lanes-3 .crate-roulette-viewport { height:126px; }
.crate-roulette-stack.lanes-3 .crate-roulette-item-card { width:112px; height:102px; }
.crate-roulette-stack.lanes-3 .crate-item-icon { font-size:24px; margin-bottom:4px; }
.crate-roulette-stack.lanes-3 .crate-item-name { font-size:9px; }
.crate-roulette-stack.lanes-5 { gap:7px; }
.crate-roulette-stack.lanes-5 .crate-roulette-viewport { height:91px; }
.crate-roulette-stack.lanes-5 .crate-roulette-item-card { width:102px; height:72px; padding:4px; }
.crate-roulette-stack.lanes-5 .crate-item-icon { font-size:20px; margin:0 0 3px; }
.crate-roulette-stack.lanes-5 .crate-item-name { font-size:8px; }
.crate-roulette-stack.lanes-5 .crate-item-rarity { display:none; }
.crate-results-grid { display:grid; grid-template-columns:repeat(var(--result-columns,1),minmax(0,1fr)); gap:8px; margin-top:10px; }
.crate-results-grid.slots-3 { --result-columns:3; }
.crate-results-grid.slots-5 { --result-columns:5; }
.crate-result-card { min-width:0; display:grid; grid-template-columns:38px minmax(0,1fr); grid-template-rows:auto 1fr; gap:3px 9px; align-items:center; padding:9px; border:1px solid color-mix(in srgb,var(--reward-color) 62%,#273247); border-radius:7px; background:color-mix(in srgb,var(--reward-color) 8%,#101827); animation:crate-reward-reveal .3s ease-out both; animation-delay:calc(var(--slot)*.06s); }
.crate-result-card > span { grid-column:1/-1; color:#95a6be; font-size:8px; letter-spacing:.8px; }
.crate-result-card > i { grid-row:2; font-size:25px; text-align:center; filter:drop-shadow(0 0 7px currentColor); }
.crate-result-card strong { display:block; color:#f2f5ff; font-size:10px; line-height:1.35; }
.crate-result-card p { margin:3px 0 0; color:#afbdd1; font-size:9px!important; line-height:1.35!important; overflow-wrap:anywhere; }
.crate-spin-results { display:none; margin-top:14px; padding-top:14px; border-top:1px solid #ffffff16; }
.crate-spin-results h3 { display:flex; justify-content:center; align-items:center; gap:8px; margin:0 0 10px; color:#f6e5a4; font-size:16px; }
.crate-result-close { width:100%; min-height:48px; margin-top:12px; border-radius:7px; background:linear-gradient(180deg,#74f3b9,#2dba87)!important; color:#06150f!important; font-size:13px; font-weight:900; box-shadow:0 0 20px #31d99a3d!important; }
.is-finished .crate-spin-results { display:block; animation:crate-reward-reveal .28s ease-out both; }
.is-finished .crate-spin-heading,.is-finished .crate-roulette-stack { display:none; }
.is-opening .crate-spin-results { display:none; }
.is-opening .crate-roulette-marker-label { animation:crate-marker-pulse .38s ease-in-out infinite alternate; }
#crateRouletteModal.is-reveal-mode .crate-modal-header,
#crateRouletteModal.is-reveal-mode .crate-modal-charge,
#crateRouletteModal.is-reveal-mode .crate-batch-row,
#crateRouletteModal.is-reveal-mode .crate-roulette-controls,
#crateRouletteModal.is-reveal-mode .crate-odds-panel { display:none!important; }
#crateRouletteModal.is-reveal-mode .crate-modal-box { width:min(900px,96vw); max-width:900px; }
#crateRouletteModal.is-reveal-mode .crate-opening-stage { padding:0; }
.crate-opening-stage.slots-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.crate-opening-stage.slots-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.crate-reveal-card { min-width:0; min-height:192px; border:1px solid #3d3e59; border-radius:10px; background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--crate-color) 12%,#121a28),#111725); display:flex; flex-direction:column; align-items:center; padding:12px 8px; text-align:center; }
.slots-1 .crate-reveal-card { max-width:320px; width:100%; margin:auto; }
.crate-slot-number { font-size:9px; letter-spacing:1px; color:#a1afc6; margin-bottom:8px; }
.crate-reveal-card img { width:120px; height:120px; max-width:100%; object-fit:contain; image-rendering:pixelated; }
.crate-reveal-card strong { font-size:12px; line-height:1.5; color:#edf2ff; }
.crate-reveal-card p { font-size:11px; line-height:1.5; margin:8px 0 0; color:#b8c6dd; overflow-wrap:anywhere; }
#crateRouletteModal .crate-reveal-card p { font-size:11px!important; line-height:1.5!important; }
.crate-reward-icon { font-size:42px; margin:20px 0; }
.has-rewards .crate-reveal-card { border-color:var(--reward-color); animation:crate-reward-reveal .3s ease-out both; }
.is-opening .crate-reveal-card img { animation:crate-seal-pulse .65s ease-in-out infinite alternate; animation-delay:calc(var(--slot)*.06s); }
.crate-batch-row { display:flex; align-items:center; justify-content:center; gap:18px; margin:20px 0 12px; font-size:12px; color:#b9c6dd; }
.crate-batch-controls { display:flex; gap:6px; }
.crate-batch-button { min-width:50px; min-height:40px; padding:8px 11px; border:1px solid #465169; border-radius:7px; background:#182234; color:#b8c7db; font-weight:800; cursor:pointer; }
.crate-batch-button.active { border-color:#a38aff; color:#eee6ff; background:#453269; }
.crate-batch-button:disabled { opacity:.4; cursor:default; }
#crateRouletteModal .crate-roulette-controls { display:flex; flex-direction:column; align-items:stretch; margin-top:8px; }
#crateRouletteModal .btn-spin-crate { font-family:inherit; border-radius:8px; font-size:14px; min-height:48px; padding:12px; white-space:normal; }
#crateRouletteModal .btn-spin-crate:disabled { background:#263449!important; color:#94a4ba!important; box-shadow:none!important; cursor:not-allowed; opacity:.75; }
.crate-open-status { margin:9px 0 15px; min-height:18px; font-size:11px; color:#b6c5dc; text-align:center; }
.crate-odds-panel { border-top:1px solid #ffffff17; padding-top:15px; }
.crate-odds-panel summary,.crate-history-panel summary { font-size:14px; font-weight:750; color:#dbe7ff; cursor:pointer; min-height:30px; }
.crate-odds-row { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:10px; align-items:center; font-size:12px; padding:10px 4px; border-bottom:1px solid #ffffff0b; color:#c4d0e5; }
.crate-odds-row strong { color:#eee6ff; font-variant-numeric:tabular-nums; }
#crateOddsNote { font-size:11px; line-height:1.6; color:#9eadc5; margin:12px 0 0; }
.crate-history-panel { border:1px solid #313b50; border-radius:12px; padding:16px; margin-top:24px; background:#101827; }
.crate-history-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #ffffff10; }
.crate-history-row img { object-fit:contain; image-rendering:pixelated; flex-shrink:0; }
.crate-history-row div { flex:1; min-width:0; }
.crate-history-row strong { font-size:12px; color:#dbe6fb; }
.crate-history-row p,.crate-history-empty { margin:6px 0 0; color:#a3b5cd; font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.crate-history-row time { color:#8e9bb2; font-size:10px; }
.crate-batch-button:focus-visible,.crate-secondary-button:focus-visible,.crate-odds-panel summary:focus-visible,.crate-history-panel summary:focus-visible { outline:2px solid #c5b4ff; outline-offset:3px; }
@keyframes crate-seal-pulse { from { transform:translateY(1px) rotate(-2deg); filter:brightness(1); } to { transform:translateY(-4px) rotate(2deg); filter:brightness(1.3); } }
@keyframes crate-reward-reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes crate-marker-pulse { from { transform:translateX(-50%) scale(.94); } to { transform:translateX(-50%) scale(1.06); } }
@media(max-width:1050px) { .crate-workshop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
 .crate-workshop { padding:14px; } .crate-workshop-heading { align-items:flex-start; } .crate-workshop h3 { font-size:19px; } .crate-workshop-grid { gap:8px; } .crate-upgrade { padding:11px; } .crate-upgrade-title { align-items:flex-start; } .crate-upgrade-title h4 { font-size:12px; } .crate-upgrade p { font-size:11px; } .crates-section-eyebrow { font-size:8px; }
 #cratesCardsGrid .crate-shop-card { padding:14px; } #cratesCardsGrid .crate-card-title { font-size:18px; } #cratesCardsGrid .crate-card-desc { min-height:0; } .crate-sprite-scene { min-height:152px; } .crate-sprite-scene img { width:144px; height:144px; }
 #crateRouletteModal .crate-modal-box { padding:15px; width:calc(100vw - 20px); max-height:92dvh; } #crateRouletteModal .crate-modal-title { font-size:19px; } .crate-modal-charge { font-size:10px; } .crate-opening-stage .crate-roulette-viewport { height:154px; } .crate-opening-stage .crate-roulette-item-card { width:108px; height:124px; } .crate-roulette-stack.lanes-3 .crate-roulette-viewport { height:112px; } .crate-roulette-stack.lanes-3 .crate-roulette-item-card { width:96px; height:90px; } .crate-roulette-stack.lanes-5 .crate-roulette-viewport { height:82px; } .crate-roulette-stack.lanes-5 .crate-roulette-item-card { width:90px; height:64px; } .crate-results-grid.slots-5 { --result-columns:2; } .crate-result-card { grid-template-columns:30px minmax(0,1fr); padding:7px; } .crate-result-card > i { font-size:21px; } .crate-batch-row { gap:10px; font-size:11px; } .crate-odds-row { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .crate-sprite-scene img,.crate-reveal-card,.crate-result-card,.crate-roulette-track,.crate-roulette-marker-label { transition:none!important; animation:none!important; } .is-opening .crate-reveal-card img { animation:none!important; } }