#site :is(#scale,#craft) .caseitem{position:relative;overflow:hidden;}
#site :is(#scale,#craft) .caseitem .pbar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--roxo);border-radius:0 2px 2px 0;}
#site :is(#scale,#craft) 
.cases{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:44px;}
#site :is(#scale,#craft) .casebig{position:relative;border-radius:20px;overflow:hidden;min-height:520px;border:1px solid var(--line);}
#site :is(#scale,#craft) .casebig .cimg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(130,0,255,.25),rgba(0,0,0,.06)),var(--card);display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:12px;}
#site :is(#scale,#craft) .casebig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.82));}
#site :is(#scale,#craft) .casebig .cc{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:36px;color:#fff;}
#site :is(#scale,#craft) .casebig .cres{font-weight:900;font-size:clamp(26px,3vw,40px);letter-spacing:-.02em;line-height:1.05;}
#site :is(#scale,#craft) .casebig .cinfo{color:rgba(255,255,255,.82);font-size:15px;margin-top:12px;max-width:46ch;}
#site :is(#scale,#craft) .casebig .cl{display:inline-block;margin-top:20px;font-weight:600;font-size:14px;border-bottom:2px solid var(--roxo);padding-bottom:2px;}
#site :is(#scale,#craft) .caselist{display:flex;flex-direction:column;gap:12px;}
#site :is(#scale,#craft) .caseitem{flex:1;border:1px solid var(--line);border-radius:14px;padding:22px;cursor:pointer;transition:all .2s;background:var(--card);}
#site :is(#scale,#craft) .caseitem:hover{border-color:rgba(130,0,255,.4);}
#site :is(#scale,#craft) .caseitem.on{border-color:var(--roxo);background:rgba(130,0,255,.06);}
#site :is(#scale,#craft) .caseitem .cb{font-weight:800;font-size:19px;letter-spacing:-.01em;}
#site :is(#scale,#craft) .caseitem .cn{color:var(--muted);font-size:13px;margin-top:4px;}
#site :is(#scale,#craft) .caseitem .cn{font-size:13px;font-weight:400;opacity:.55;margin-top:3px;letter-spacing:0}
#site :is(#scale,#craft) .cases{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:30px;align-items:stretch}
#site :is(#scale,#craft) .casebig{position:relative;min-height:570px;overflow:hidden;border-radius:0}
#site :is(#scale,#craft) .casebig .cimg{position:absolute;inset:0;aspect-ratio:auto;height:100%;width:100%;font-size:0;transition:opacity .3s}
#site :is(#scale,#craft) .casebig .cimg:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,#09061040 45%,#090610f2 100%)}
#site :is(#scale,#craft) .casebig .cc{position:relative;min-height:570px;height:100%;padding:35px;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;background:none;z-index:1;color:#f2f0ea}
#site :is(#scale,#craft) .casebig .cres{font-size:clamp(28px,3vw,43px);font-weight:500;line-height:1.1;color:#f2f0ea}
#site :is(#scale,#craft) .casebig .cinfo{font-size:16px;line-height:1.45;color:#d9d3df;max-width:55ch}
#site :is(#scale,#craft) .casebig .cl{align-self:flex-start;font-size:14px;color:#f2f0ea;background:none;border:0;border-bottom:1px solid #a543ff;padding:0 0 6px;cursor:pointer}
#site :is(#scale,#craft) .caselist{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
#site :is(#scale,#craft) .caseitem{flex:1;display:flex;align-items:center;gap:15px;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:20px 0;color:#737078;position:relative;overflow:hidden;font-family:inherit;cursor:pointer;min-height:0}
#site :is(#scale,#craft) .caseitem .cb{font-size:21px;font-weight:500;line-height:1.15}
#site :is(#scale,#craft) .caseitem.on{color:#0a0a0c;background:none;border-color:var(--line)}
#site :is(#scale,#craft) .case-index{font-size:11px;color:#8b8294}
#site :is(#scale,#craft) .caseitem .pbar{position:absolute;left:0;bottom:0;height:2px;background:#8200ff}
#site :is(#scale,#craft) .auto-cases .caseitem.on .pbar{animation:scale-case-progress 5s linear infinite}
#site :is(#scale,#craft) .auto-cases .caseitem.on .pbar{animation-duration:7s}
/* A single JS clock controls progress and case rotation. */
#site :is(#scale,#craft) .caseitem .pbar{display:block!important;position:absolute;left:0;bottom:0;width:100%;height:2px;background:#8200ff;transform:scaleX(0);transform-origin:left center;animation:none!important;transition:none!important;pointer-events:none}

#site #craft .caseitem{color:#aaa3b2;border-color:var(--line)}#site #craft .caseitem.on{color:#f2f0ea;border-color:var(--line)}
@media(max-width:680px){#site :is(#scale,#craft) .cases{display:grid;grid-template-columns:1fr;gap:25px}#site :is(#scale,#craft) .caselist{order:-1;flex-direction:row;overflow:auto;gap:20px}#site :is(#scale,#craft) .caseitem{flex:0 0 160px;min-height:80px}#site :is(#scale,#craft) .casebig,#site :is(#scale,#craft) .casebig .cc{min-height:530px}#site :is(#scale,#craft) .casebig .cc{padding:25px}}