.crate-shop { margin:18px 0 30px; }
.crate-selector { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:20px 0; }
.crate-selector>button { position:relative; display:flex; align-items:center; gap:15px; min-width:0; padding:14px 20px; text-align:left; border:1px solid #ffffff14; border-radius:18px; background:var(--surface); transition:border-color .2s,background .2s; }
.crate-selector>button:hover { border-color:#d5b87570; }.crate-selector>button.selected { border-color:#d5b875; background:linear-gradient(120deg,#d5b87513,transparent),var(--surface); }
.crate-selector img { width:76px; height:64px; object-fit:contain; flex:none; filter:drop-shadow(0 5px 6px #0005); }.crate-selector span { display:grid; gap:7px; min-width:0; }.crate-selector strong { font:500 clamp(17px,2vw,23px)/1.2 var(--font-display); color:var(--text); }.crate-selector small { font-size:10px; color:var(--muted); }
.crate-selector-pending { position:absolute; right:10px; top:-8px; font-size:9px; background:#d5b875; color:#201a10; border-radius:10px; padding:4px 8px; }.crate-selector button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.crate-christmas .crate-hero { border-color:#c4ab6c7a; background:radial-gradient(ellipse at 10% 50%,#33b38e27,transparent 60%),radial-gradient(ellipse at 100% 0,#9c254928,transparent 55%),#111f1d; }
.crate-christmas .crate-art-halo { border-color:#d7c88f50; box-shadow:0 0 70px #44c9ab1a,inset 0 0 60px #44c9ab10; }
.crate-christmas .crate-art-label { color:#b7e4ce; border-color:#74c5a848; background:#162b24; }.crate-christmas .crate-headline-odds>span { color:#b7e4ce; }.crate-christmas .crate-hero h3 { color:#f5dfad; }
.crate-dialog.crate-christmas { border-color:#a8d2b66b; background:radial-gradient(ellipse at 0 0,#32ab8823,transparent 65%),radial-gradient(ellipse at 100% 0,#a3314520,transparent 60%),#111d1b; }
.crate-christmas .crate-awaiting { color:#b7e4ce; }.crate-christmas .crate-awaiting img { object-fit:contain; }.crate-christmas .crate-sound input { accent-color:#a9d8bc; }
.rarity-common { --rarity:#a8c8bf; --rarity-rgb:168,200,191; }
.crate-hero { display:grid; grid-template-columns:1fr 1.15fr; align-items:center; gap:24px; padding:32px; overflow:hidden; border:1px solid #ba8de85e; border-radius:26px; background:radial-gradient(ellipse at 8% 45%,#a44dd32a,transparent 60%),radial-gradient(ellipse at 100% 0,#a62d4620,transparent 50%),#191620; }
.crate-art { position:relative; display:grid; place-items:center; min-width:0; isolation:isolate; }
.crate-art>img { position:relative; width:min(100%,340px); height:auto; filter:drop-shadow(0 15px 20px #0007); animation:crate-hover 6s ease-in-out infinite; }
.crate-art-halo { position:absolute; width:85%; aspect-ratio:1; border:1px solid #b780d52b; border-radius:50%; box-shadow:0 0 50px #9c48d413,inset 0 0 50px #9c48d413; }
.crate-art-halo::after { content:"✦"; position:absolute; top:0; left:20%; color:#e1b668; font-size:22px; }
.crate-art-label { position:relative; padding:6px 14px; border:1px solid #c196e72e; background:#231c2e; color:#c7acd9; border-radius:20px; font-size:10px; }
.crate-eyebrow { color:#ddba82; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.crate-hero h3 { margin:9px 0 14px; font:600 clamp(27px,4vw,37px)/1.12 var(--font-display); color:#f4e2c0; }
.crate-hero-copy>p { color:var(--muted); font-size:13px; line-height:1.8; margin:0 0 18px; }
.crate-headline-odds { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.crate-headline-odds>span { display:grid; gap:5px; padding:10px 14px; border:1px solid #c6a06130; border-radius:12px; color:#c5a9db; font-size:10px; background:#0d0d142c; }
.crate-headline-odds b { font:500 25px var(--font-display); color:#efce8b; }
.crate-price { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:16px 0 12px; color:#ffd071; }
.crate-price>strong { font-size:17px; }.crate-price>span { font-size:11px; color:var(--muted); }
.crate-open-button { width:100%; }.crate-hero-copy>.crate-fine-print { font-size:10px; margin:12px 0 0; }.crate-fine-print strong { color:#dfc799; }
.crate-shortage,.crate-pending-note { display:block; color:#dfb79b; font-size:11px; line-height:1.7; margin-top:9px; }
.crate-last { display:flex; align-items:center; gap:13px; width:100%; text-align:left; margin:14px 0; padding:14px 18px; border:1px solid #bd92d632; border-radius:16px; background:#a679cb08; }.crate-last:hover { border-color:#bd92d677; }
.crate-last img { width:42px; height:42px; border-radius:50%; }.crate-last>span { display:grid; gap:4px; }.crate-last small,.crate-last span>span { color:var(--muted); font-size:10px; }.crate-last strong { font-size:13px; }.crate-last>b { margin-left:auto; color:#d7b2f1; }
.crate-contents { margin-top:24px; }.crate-contents summary { cursor:pointer; font:500 21px var(--font-display); color:var(--text); padding:8px 0; }.crate-contents summary>span { float:right; color:var(--muted); font:400 11px var(--font); padding-top:7px; }
.crate-contents>p { font-size:11px; line-height:1.8; color:var(--muted); max-width:700px; }
.crate-odds-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.rarity-uncommon { --rarity:#6ab7cc; --rarity-rgb:106,183,204; }.rarity-rare { --rarity:#8786f6; --rarity-rgb:135,134,246; }.rarity-epic { --rarity:#d68aef; --rarity-rgb:214,138,239; }.rarity-legendary { --rarity:#e8bd62; --rarity-rgb:232,189,98; }
.crate-odds-item { display:flex; align-items:center; gap:12px; min-width:0; padding:12px; border:1px solid rgba(var(--rarity-rgb),.25); border-left:3px solid var(--rarity); border-radius:13px; background:linear-gradient(120deg,rgba(var(--rarity-rgb),.07),transparent 85%),var(--surface); }
.crate-odds-item img { width:56px; height:56px; border-radius:50%; flex:none; }.crate-odds-item>div { min-width:0; display:grid; gap:4px; }.crate-odds-item small { font-size:9px; color:var(--rarity); }.crate-odds-item strong { font-size:12px; }.crate-odds-item span { font-size:9px; color:var(--muted); }.crate-odds-item>b { margin-left:auto; color:var(--rarity); font-size:12px; white-space:nowrap; }
.crate-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:#07060cd9; backdrop-filter:blur(12px); }
body.crate-open { overflow:hidden; }
.crate-dialog { width:min(920px,100%); min-width:0; max-height:calc(100dvh - 40px); overflow-y:auto; padding:25px; border:1px solid #b285da6b; border-radius:24px; background:radial-gradient(ellipse at 50% 0,#8b49b51c,transparent 75%),#15131d; box-shadow:0 20px 100px #0009; animation:avatar-skins-in .25s ease both; }
.crate-dialog>header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:25px; }.crate-dialog h2 { font:500 27px var(--font-display); margin:7px 0 0; }.crate-close { width:34px; height:34px; flex:none; border-radius:50%; font-size:25px; background:#ffffff08; color:var(--muted); }
.crate-dialog>footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid #ffffff08; margin-top:18px; padding-top:15px; font-size:10px; color:var(--muted); }
.crate-sound { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }.crate-sound input { accent-color:#c6a0e7; }
.crate-awaiting { display:grid; place-items:center; min-height:240px; color:#c3abd3; font-size:13px; }.crate-awaiting img { animation:crate-hover 2s ease-in-out infinite; filter:drop-shadow(0 0 18px #b454dc33); }
.crate-reel-viewport { position:relative; overflow:hidden; height:200px; border:1px solid #b393d02e; border-radius:16px; background:#0b0b11; isolation:isolate; }
.crate-reel-viewport::after { content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(90deg,#0b0b11e8,transparent 12%,transparent 88%,#0b0b11e8); pointer-events:none; }
.crate-reel { display:flex; gap:10px; padding:15px 0; width:max-content; will-change:transform; }
.crate-reel-card { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:0 0 132px; width:132px; height:168px; padding:12px 6px; gap:8px; text-align:center; background:radial-gradient(ellipse at 50% 80%,rgba(var(--rarity-rgb),.15),transparent 85%),#181821; border:1px solid rgba(var(--rarity-rgb),.3); border-bottom:3px solid var(--rarity); border-radius:11px; }
.crate-reel-card img { width:82px; height:82px; border-radius:50%; }.crate-reel-card strong { font-size:10px; line-height:1.3; }.crate-reel-card small { font-size:8px; color:var(--rarity); }
.crate-reel-pointer { position:absolute; z-index:3; left:50%; top:0; bottom:0; width:2px; background:linear-gradient(#efca7e,#efca7e1a 20%,#efca7e1a 80%,#efca7e); pointer-events:none; }.crate-reel-pointer::before { content:""; position:absolute; top:0; left:-7px; border-left:8px solid transparent; border-right:8px solid transparent; border-top:12px solid #f0cb7f; }
.crate-winning-card { box-shadow:inset 0 0 25px rgba(var(--rarity-rgb),.2); border-color:var(--rarity); }
.crate-skip { display:block; margin:14px auto 0; font-size:11px; color:var(--muted); padding:8px 12px; }.crate-skip:hover { color:var(--text); }
.crate-result { text-align:center; padding:20px 0 0; animation:avatar-skins-in .35s ease both; }.crate-result-portrait img { width:110px; height:110px; border-radius:50%; box-shadow:0 0 30px rgba(var(--rarity-rgb),.2); margin-bottom:12px; }.crate-result>.crate-eyebrow { display:block; color:var(--rarity); }.crate-result h3 { font:500 29px var(--font-display); margin:9px 0; color:var(--rarity); }.crate-result>p { color:var(--muted); font-size:12px; line-height:1.8; margin:9px auto 16px; max-width:480px; }
.crate-refund { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 13px; margin-top:5px; border:1px solid #dfbd6040; border-radius:12px; color:#f1cb7d; background:#dfbd6009; font-size:13px; }
.crate-result-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }.crate-result>small { display:block; font-size:9px; color:var(--faint); margin-top:15px; }.crate-open-error { text-align:center; padding:45px 15px; }.crate-open-error p { color:var(--muted); font-size:13px; line-height:1.8; }
.crate-result-portrait { display:flex; justify-content:center; }
.crate-shop :is(button,summary):focus-visible,.crate-dialog :is(button,input):focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@keyframes crate-hover { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-7px) rotate(1deg); } }
@media(max-width:800px) { .crate-hero { grid-template-columns:1fr 1.2fr; padding:22px; gap:15px; }.crate-art>img { width:100%; }.crate-odds-grid { grid-template-columns:1fr; } }
@media(max-width:560px) { .crate-hero { grid-template-columns:1fr; padding:20px; border-radius:20px; }.crate-art>img { width:220px; }.crate-art-halo { width:190px; }.crate-art-label { font-size:9px; }.crate-headline-odds { gap:8px; }.crate-headline-odds>span { flex:1; padding:10px; }.crate-hero-copy>p { font-size:12px; }.crate-contents summary { font-size:18px; }.crate-contents summary>span { float:none; display:block; font-size:10px; }.crate-odds-item { padding:10px; gap:8px; }.crate-odds-item img { width:45px; height:45px; }.crate-odds-item strong { font-size:11px; }.crate-odds-item>b { font-size:11px; }.crate-odds-item span { font-size:8px; }.crate-backdrop { padding:10px; }.crate-dialog { padding:17px 12px; max-height:calc(100dvh - 20px); border-radius:18px; }.crate-dialog h2 { font-size:22px; }.crate-dialog>header { margin-bottom:18px; }.crate-reel-card { width:110px; flex-basis:110px; }.crate-result-actions { flex-direction:column; }.crate-result h3 { font-size:25px; }.crate-result>p { font-size:11px; }.crate-refund { font-size:11px; } }
@media(max-width:800px) { .crate-selector { grid-template-columns:1fr; gap:10px; }.crate-selector>button { gap:14px; padding:10px 16px; }.crate-selector img { width:64px; height:54px; }.crate-selector strong { font-size:20px; }.crate-selector small { font-size:10px; }.crate-selector-pending { right:8px; font-size:8px; } }
@media(prefers-reduced-motion:reduce) { .crate-art>img,.crate-awaiting img,.crate-dialog,.crate-result { animation:none; } }
.crate-office .crate-hero { border-color:#cbb68480; background:radial-gradient(ellipse at 8% 45%,#6c9fc436,transparent 65%),radial-gradient(ellipse at 100% 0,#c7a25920,transparent 60%),#172636; }
.crate-office .crate-art-halo { border-color:#d4bf8850; box-shadow:0 0 70px #6295be25,inset 0 0 60px #6295be12; }
.crate-office .crate-art-label { color:#c2d9e8; border-color:#87afc64b; background:#22394b; }
.crate-office .crate-headline-odds>span { color:#bfd8e9; }.crate-office .crate-hero h3 { color:#f3dfb0; }
.crate-dialog.crate-office { border-color:#cbb68480; background:radial-gradient(ellipse at 0 0,#6c9fc429,transparent 65%),radial-gradient(ellipse at 100% 0,#c7a2591c,transparent 60%),#152332; }
.crate-office .crate-awaiting { color:#c2d9e8; }.crate-office .crate-sound input { accent-color:#d4ba80; }