/* Crates + market v3 skin: esports-poster look on top of store.css. Loaded after home-v3.css. */
body.s3{--line:#ffffff17;--panel:#141617;--panel-2:#0f1112;--muted:#8f8c86;--accent:#ff6a1f;--accent-strong:#ff6a1f;--cut:12px;background:#0b0c0d}
.s3 .store-main{position:relative;max-width:1320px;padding-top:0}

/* Intro */
.s3 .store-intro{position:relative;isolation:isolate;margin:0 0 28px;padding:56px 0 34px;align-items:flex-end}
.s3 .store-intro:before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:radial-gradient(ellipse at 70% 20%,#ff6a1f1c,transparent 55%)}
html:has(body.s3),body.s3{overflow-x:clip}
.s3 .store-intro .v3-bigword{z-index:-1;left:auto;right:0;bottom:-2.4vw;font-size:clamp(110px,15vw,230px);-webkit-text-stroke-color:#ffffff0d}
.s3 .store-intro>div:not(.v3-bigword){position:relative;z-index:1}
.s3 .store-intro .eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 13px/1 Arial,sans-serif;letter-spacing:3px;color:var(--accent)}
.s3 .store-intro .eyebrow:before{content:'';width:28px;height:3px;background:var(--accent);transform:skewX(-30deg)}
.s3 .store-intro h1{font:900 clamp(46px,6vw,84px)/1.05 'Microsoft YaHei','PingFang SC',sans-serif;letter-spacing:-2px;margin:20px 0 14px;color:#fff}
.s3 .store-intro p{font-size:15px;line-height:1.8;color:#b9b4ac;max-width:620px}
.s3 .store-demo{border-radius:0;border:0;border-left:3px solid #e6b450;background:#e6b45012}

/* Buttons, chips, tabs */
.s3 .primary,.s3 .open-button,.s3 .trade-submit{border:0!important;border-radius:0!important;background:linear-gradient(90deg,#ff6a1f,#ff8a3d)!important;color:#111!important;font-weight:800;clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);transition:filter .15s,transform .15s}
.s3 .primary:hover,.s3 .open-button:hover{filter:brightness(1.08)}
.s3 .primary:disabled,.s3 .open-button:disabled{filter:grayscale(1) brightness(.6)}
.s3 .chip-button{border-radius:0!important;border:0!important;background:#ffffff0d;transform:skewX(-12deg);font-weight:700}
.s3 .chip-button>*{transform:skewX(12deg)}
.s3 .chip-button[aria-pressed=true]{background:var(--accent);color:#111}
.s3 .chip-button[aria-pressed=true] *{color:#111}
.s3 .result-link,.s3 .store-demo button{border-radius:0!important;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.s3 .market-views{gap:6px;border-bottom:0;margin-bottom:22px}
.s3 .market-views [role=tab]{padding:12px 22px;font-weight:700;color:#b9b4ac;background:#ffffff08;border-bottom:0;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.s3 .market-views [role=tab][aria-selected=true]{background:var(--accent);color:#111}
.s3 .market-views [role=tab][aria-selected=true] b{background:#11111126;color:#111}
.s3 .panel-tabs [role=tab],.s3 .trade-tabs [role=tab]{border-radius:0!important}
.s3 .panel-tabs [role=tab][aria-selected=true],.s3 .trade-tabs [role=tab][aria-selected=true]{box-shadow:inset 0 -3px 0 var(--accent)}
.s3 .search input,.s3 .sort,.s3 select,.s3 .qty input,.s3 .trade-form input{border-radius:0!important;background:#111314!important;border-color:#ffffff1f!important}

/* Cards: square + cut corner */
.s3 .product,.s3 .crate-pick,.s3 .pool-card,.s3 .result-card,.s3 .reel-card,.s3 .contents-item,.s3 .list-row{border-radius:0!important}
.s3 .product,.s3 .crate-pick{border:0!important;background:linear-gradient(160deg,#181b1c,#121415);clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);transition:transform .2s,background .2s}
.s3 .product{border-top:3px solid #ffffff14!important;padding:16px}
.s3 .product:hover,.s3 .crate-pick:hover{transform:translateY(-4px);background:linear-gradient(160deg,#1f2324,#151819)}
.s3 .product:hover{border-top-color:var(--accent)!important}
.s3 .product-art img,.s3 .product img{filter:drop-shadow(0 14px 16px #000b)}
.s3 .product-tag{border-radius:0!important;font-weight:800}
.s3 .crate-pick{border-left:3px solid transparent!important}
.s3 .crate-pick[aria-pressed=true],.s3 .crate-pick[aria-current=true],.s3 .crate-pick.active{border-left-color:var(--accent)!important;background:linear-gradient(90deg,#ff6a1f26,#141617 60%)}

/* Crate stage + panels */
.s3 .crate-panel,.s3 .odds,.s3 .pool,.s3 .crate-stage>div{border-radius:0!important}
.s3 .crate-panel{border:0!important;background:linear-gradient(160deg,#16191a,#101213);border-top:3px solid var(--accent)!important}
.s3 .crate-head h2{font-size:clamp(28px,3vw,40px);font-weight:900;letter-spacing:-1px;color:#fff}
.s3 .crate-art{filter:drop-shadow(0 20px 24px #000c)}
.s3 .reel-window{border-radius:0!important;border-color:#ffffff1a!important;background:#0b0c0d!important}
.s3 .pointer{background:var(--accent)!important;box-shadow:0 0 18px var(--accent)}

/* Dialogs */
.s3 dialog{border-radius:0!important;border:0!important;border-top:3px solid var(--accent)!important;background:#121415!important}
.s3 dialog::backdrop{background:#000c;backdrop-filter:blur(4px)}
.s3 .trade-top h2,.s3 .result-dialog h2{font-weight:900}

/* Wallet chips */
.s3 .store-wallet .wallet-chip,.s3 .store-wallet>*{border-radius:0!important;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}

@media(max-width:640px){
 .s3 .store-intro{padding-top:34px;padding-bottom:24px}
 .s3 .store-intro h1{font-size:46px}
 .s3 .market-views [role=tab]{padding:10px 16px}
}

/* Dialog internals: square everything, match the v3 tabs */
.s3 .trade-panel,.s3 .book,.s3 .chart,.s3 .chart-plot,.s3 .strip-item,.s3 .contents,.s3 .contents-item,.s3 .odds-table,.s3 .odds-row,.s3 .history-row,.s3 .book-row,.s3 .quantity,.s3 .pay-option,.s3 .buy-item,.s3 .result-grid>*,.s3 .reward-strip>*,.s3 .sound-controls{border-radius:0!important}
.s3 .trade-panel{border:0!important;background:#16191a!important;border-left:3px solid var(--accent)!important}
.s3 .chart{border-color:#ffffff12!important;background:#0f1112!important}
.s3 .trade-tabs{display:flex;gap:6px}
.s3 .trade-tabs [role=tab]{border:0!important;background:#ffffff0d!important;color:#cfcac2!important;font-weight:800;padding:8px 22px!important;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.s3 .trade-tabs [role=tab][aria-selected=true]{background:var(--accent)!important;color:#111!important;box-shadow:none}
.s3 .trade-tabs [role=tab]:focus-visible{outline:0;filter:brightness(1.15)}
.s3 dialog .close{border-radius:0!important;background:#ffffff0d!important;transition:background .15s}
.s3 dialog .close:hover{background:var(--accent)!important;color:#111!important}
.s3 main button,.s3 dialog button,.s3 .qty,.s3 .qty *{border-radius:0!important}
.s3 dialog button:not(.primary):not(.close):not([role=tab]){clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);background:#ffffff0d;border:0}
.s3 dialog button:not(.primary):not(.close):not([role=tab]):hover{background:#ffffff1f;color:#fff}
.s3 .qty{border-color:#ffffff1f!important}.s3 .qty button{clip-path:none!important;background:none!important}

/* Bigger opening stage: full-width panel, odds as a strip underneath */
.s3 #crate-stage{grid-template-columns:minmax(0,1fr)!important}
.s3 #crate-stage .odds{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 28px;padding:18px 24px!important;border:0!important;background:#141617!important;border-left:3px solid var(--accent)!important}
.s3 #crate-stage .odds h3{margin:0;font-size:16px}
.s3 #crate-stage .odds>p{grid-column:1/-1;grid-row:2;margin:0;font-size:12px}
.s3 #odds-list{display:flex;flex-wrap:wrap;gap:6px 26px;grid-row:1}
.s3 #odds-list .odds-row{border:0!important;padding:0!important;gap:8px;background:none!important}
.s3 #odds-list .odds-row b{font-size:16px}
.s3 .crate-head{padding:28px 32px!important}
.s3 .crate-head .crate-art{width:210px!important;height:170px!important}
.s3 #open-panel{padding:24px 28px 28px!important}
.s3 .reels{gap:12px}
.s3 .reel-window{height:290px!important}
.s3 .reels.multiple .reel-window{height:190px!important}
.s3 .reel-card{flex:0 0 210px!important;padding:14px 12px 16px!important;gap:8px!important}
.s3 .reel-card img{width:150px!important;height:150px!important}
.s3 .reel-card strong{font-size:15px!important;font-weight:700!important}
.s3 .reel-card .q-label{font-size:12px}
.s3 .reels.multiple .reel-card{flex-basis:150px!important;padding:10px 8px!important}
.s3 .reels.multiple .reel-card img{width:96px!important;height:96px!important}
.s3 .reels.multiple .reel-card strong{font-size:13px!important}
.s3 .reel-window::before,.s3 .reel-window::after{width:140px!important}
.s3 .reel-window .pointer{width:4px!important;box-shadow:0 0 24px 4px #ff6a1fb3!important}
.s3 .reel-window .pointer::before,.s3 .reel-window .pointer::after{content:'';position:absolute;left:50%;width:0;height:0;border:12px solid transparent;transform:translateX(-50%)}
.s3 .reel-window .pointer::before{top:0;border-top-color:var(--accent)}
.s3 .reel-window .pointer::after{bottom:0;border-bottom-color:var(--accent)}
.s3 .open-controls{margin-top:22px!important;align-items:center}
.s3 .open-button{min-width:340px!important;min-height:76px!important;font-size:22px!important}
.s3 .open-button small{font-size:13px;font-weight:600;opacity:.75}
.s3 #quantities button{min-width:56px;min-height:48px;font-size:18px;font-weight:800}
.s3 #quantities button[aria-pressed=true]{background:var(--accent);color:#111;border-color:var(--accent)}
@media(max-width:1000px){
 .s3 .reel-window{height:230px!important}.s3 .reel-card{flex-basis:160px!important}.s3 .reel-card img{width:110px!important;height:110px!important}
 .s3 .reels.multiple .reel-window{height:160px!important}.s3 .reels.multiple .reel-card{flex-basis:120px!important}.s3 .reels.multiple .reel-card img{width:76px!important;height:76px!important}
}
@media(max-width:640px){
 .s3 #crate-stage .odds{grid-template-columns:1fr;padding:16px!important}.s3 #crate-stage .odds>p{grid-row:auto}
 .s3 .crate-head{padding:20px!important}.s3 .crate-head .crate-art{width:120px!important;height:100px!important}
 .s3 #open-panel{padding:16px!important}
 .s3 .reel-window{height:200px!important}.s3 .reel-card{flex-basis:130px!important}.s3 .reel-card img{width:92px!important;height:92px!important}.s3 .reel-card strong{font-size:13px!important}
 .s3 .reels.multiple .reel-window{height:130px!important}.s3 .reels.multiple .reel-card{flex-basis:96px!important}.s3 .reels.multiple .reel-card img{width:60px!important;height:60px!important}
 .s3 .reel-window::before,.s3 .reel-window::after{width:50px!important}
 .s3 .open-button{min-width:0!important;width:100%;min-height:64px!important;font-size:19px!important}
}
.s3 #crate-stage .odds h3{grid-column:1;grid-row:1}.s3 #odds-list{grid-column:2}.s3 #crate-stage .odds .odds-more{grid-column:3;grid-row:1/3}
@media(max-width:640px){.s3 #crate-stage .odds h3,.s3 #odds-list,.s3 #crate-stage .odds .odds-more,.s3 #crate-stage .odds>p{grid-column:1;grid-row:auto}}

/* Pop-up opening: reels stay hidden on the page and appear as a modal while crates.js has body.opening */
.s3 #reels{display:none}
body.s3.opening{overflow:hidden}
body.s3.opening:before{content:'';position:fixed;inset:0;z-index:900;background:radial-gradient(ellipse at 50% 50%,#ff6a1f26,transparent 60%),#000000d9;backdrop-filter:blur(6px);animation:s3-fade .2s ease-out}
body.s3.opening #reels{display:grid;position:fixed;z-index:901;left:50%;top:50%;width:min(1180px,94vw);max-height:90vh;overflow:hidden;transform:translate(-50%,-50%);padding:64px 28px 30px;background:#121415;border-top:3px solid var(--accent);clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);box-shadow:0 30px 120px #000;animation:s3-pop .25s cubic-bezier(.2,.9,.3,1.2)}
body.s3.opening #reels:before{content:'OPENING';position:absolute;left:28px;top:22px;font:900 14px/1 Arial,sans-serif;letter-spacing:6px;color:var(--accent)}
body.s3.opening #reels:after{content:'';position:absolute;left:150px;right:28px;top:28px;height:2px;background:linear-gradient(90deg,#ff6a1f80,transparent)}
@keyframes s3-fade{from{opacity:0}}
@keyframes s3-pop{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}}
.s3 #open-panel{padding-top:20px!important}
.s3 .open-controls{justify-content:center;gap:28px;margin-top:6px!important}
@media(max-width:640px){
 body.s3.opening #reels{width:calc(100vw - 20px);padding:52px 12px 18px}
 body.s3.opening #reels:before{left:16px;top:18px;font-size:12px}body.s3.opening #reels:after{left:120px;right:16px;top:23px}
 .s3 .open-controls{flex-direction:column;align-items:stretch;gap:14px}
}