:root{--case-cyan:#19c7ff;--case-blue:#1977ff;--case-panel:rgba(7,17,31,.82);--case-line:rgba(89,205,255,.18)}
.cases-page{min-height:100vh;background:#030912;color:#f5fbff;overflow-x:hidden}
.cases-main{position:relative;padding-top:124px;padding-bottom:72px}
.cases-hero{min-height:540px;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.92fr);align-items:center;gap:24px;position:relative}
.cases-kicker{display:inline-flex;align-items:center;gap:10px;color:#73dfff;font-size:12px;font-weight:800;letter-spacing:.24em;margin-bottom:22px}
.cases-kicker:before{content:"";width:36px;height:1px;background:currentColor;box-shadow:0 0 14px currentColor}
.cases-copy h1{font:800 clamp(42px,5.4vw,76px)/1.03 Unbounded,sans-serif;letter-spacing:-.055em;margin:0;max-width:780px}
.cases-copy h1 em{font-style:normal;color:transparent;background:linear-gradient(100deg,#2ccaff,#68a4ff);background-clip:text;-webkit-background-clip:text}
.cases-copy>p{max-width:650px;margin:25px 0 30px;color:#98aabd;font-size:17px;line-height:1.7}
.cases-stats-row{display:flex;align-items:stretch;gap:12px;max-width:900px}.cases-stats{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));flex:1;min-width:0;border:1px solid var(--case-line);background:linear-gradient(135deg,rgba(14,32,53,.86),rgba(4,13,24,.72));border-radius:18px;overflow:hidden;box-shadow:0 20px 70px rgba(0,0,0,.26)}
.cases-stats div{padding:19px 20px;position:relative}.cases-stats div+div:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--case-line)}
.cases-stats small,.cases-stats span{display:block;color:#71879b;font-size:11px}.cases-stats small{text-transform:uppercase;letter-spacing:.11em;font-weight:700}.cases-stats strong{display:inline-block;margin:6px 6px 0 0;font:700 25px/1 Unbounded,sans-serif;color:#e8faff}
.case-object-wrap{position:relative;display:grid;place-items:center;min-height:460px;isolation:isolate}
.case-object{position:relative;z-index:2;width:min(100%,540px);filter:drop-shadow(0 32px 35px rgba(0,0,0,.75)) drop-shadow(0 0 28px rgba(21,168,255,.22));animation:caseFloat 5s ease-in-out infinite}
.case-aura{position:absolute;z-index:-1;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(12,183,255,.25),rgba(16,104,255,.07) 45%,transparent 70%);filter:blur(10px);animation:auraPulse 3.8s ease-in-out infinite}
.case-platform{position:absolute;bottom:56px;width:74%;height:44px;border-radius:50%;background:radial-gradient(ellipse,rgba(29,181,255,.28),rgba(0,0,0,.8) 55%,transparent 72%);filter:blur(4px)}
@keyframes caseFloat{50%{transform:translateY(-13px)}}@keyframes auraPulse{50%{transform:scale(1.12);opacity:.72}}
.case-opening{position:relative;margin-top:24px;padding:34px;border:1px solid var(--case-line);border-radius:24px;background:linear-gradient(150deg,rgba(8,22,38,.92),rgba(4,11,20,.94));text-align:center;box-shadow:0 30px 100px rgba(0,0,0,.34);overflow:hidden}
.case-opening:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(25,196,255,.035),transparent);pointer-events:none}
.roulette-shell{position:relative;margin:0 auto 28px;max-width:980px;padding:6px;border-radius:18px;background:linear-gradient(90deg,rgba(25,119,255,.14),rgba(25,199,255,.36),rgba(25,119,255,.14));box-shadow:0 0 42px rgba(15,160,255,.12)}
.roulette-viewport{overflow:hidden;border-radius:13px;background:#030912;padding:15px 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.roulette-track{display:flex;gap:12px;width:max-content;transform:translate3d(0,0,0);will-change:transform}
.roulette-track.spinning{transition:transform 7s cubic-bezier(.08,.68,.05,1)}
.roulette-card{width:184px;min-height:104px;flex:0 0 184px;display:flex;align-items:center;justify-content:center;padding:14px;border:1px solid rgba(101,197,255,.16);border-radius:13px;background:linear-gradient(145deg,#0d1a29,#07101b);color:#bdd0e2;font-weight:800;box-shadow:inset 0 1px rgba(255,255,255,.035)}
.roulette-card.winner{border-color:#40d5ff;color:#fff;background:radial-gradient(circle at 50% 0,rgba(31,195,255,.24),transparent 70%),#0a1725;box-shadow:inset 0 0 24px rgba(33,189,255,.14),0 0 28px rgba(33,189,255,.15)}
.roulette-pointer{position:absolute;z-index:5;left:50%;top:-5px;bottom:-5px;width:2px;background:#65deff;box-shadow:0 0 14px #1bc6ff,0 0 34px #1b7cff;transform:translateX(-50%)}
.roulette-pointer:before,.roulette-pointer:after{content:"";position:absolute;left:50%;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent}.roulette-pointer:before{top:0;border-top:11px solid #8be7ff}.roulette-pointer:after{bottom:0;border-bottom:11px solid #8be7ff}
.case-result{margin:4px auto 24px;max-width:620px;padding:22px;border-radius:17px;border:1px solid rgba(83,205,255,.22);background:rgba(12,29,47,.72);animation:resultIn .45s ease both}.case-result small{color:#6ad9ff;letter-spacing:.18em;font-weight:800}.case-result strong{display:block;margin:10px 0 7px;font:700 clamp(24px,4vw,38px)/1.15 Unbounded,sans-serif}.case-result p{margin:0;color:#97aabd}.case-result[data-tone="money"]{border-color:rgba(78,225,148,.38)}.case-result[data-tone="coins"]{border-color:rgba(255,207,77,.38)}.case-result[data-tone="privilege"]{border-color:rgba(178,109,255,.46)}
@keyframes resultIn{from{opacity:0;transform:translateY(10px) scale(.97)}}
.case-message{min-height:24px;margin:0 0 14px;color:#ff8f9d;font-weight:700}.case-open-button{position:relative;display:inline-flex;align-items:center;gap:17px;border:0;border-radius:14px;padding:17px 27px;background:linear-gradient(110deg,#169cff,#18cfff);color:#00111d;cursor:pointer;box-shadow:0 12px 35px rgba(20,178,255,.28);transition:.22s transform,.22s filter,.22s opacity}.case-open-button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}.case-open-button:disabled{cursor:not-allowed;opacity:.42;filter:saturate(.4)}.case-open-button span{font:800 16px Unbounded,sans-serif}.case-open-button small{font-weight:700;color:rgba(0,17,29,.65)}.case-note{max-width:730px;margin:18px auto 0;color:#5f7488;font-size:12px;line-height:1.55}
.case-chances{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.case-chances div{display:grid;grid-template-columns:10px auto 1fr;align-items:center;gap:10px;padding:16px 18px;border-radius:14px;border:1px solid rgba(91,178,230,.11);background:rgba(6,16,28,.68)}.case-chances i{width:8px;height:8px;border-radius:50%;box-shadow:0 0 12px currentColor}.chance-empty{color:#6d7f90;background:currentColor}.chance-money{color:#48d793;background:currentColor}.chance-coins{color:#ffd059;background:currentColor}.chance-priv{color:#b273ff;background:currentColor}.case-chances strong{font:700 17px Unbounded,sans-serif}.case-chances span{color:#8195a8;font-size:13px}
.case-inventory-open{width:176px;flex:none;display:flex;align-items:center;justify-content:center;gap:11px;border:1px solid rgba(75,207,255,.25);border-radius:18px;background:linear-gradient(145deg,rgba(15,43,67,.94),rgba(7,22,38,.94));color:#eefdff;cursor:pointer;box-shadow:0 20px 60px rgba(0,0,0,.25);transition:.22s transform,.22s border-color,.22s background}.case-inventory-open:hover{transform:translateY(-2px);border-color:rgba(75,207,255,.55);background:linear-gradient(145deg,rgba(18,59,88,.98),rgba(8,29,48,.98))}.case-inventory-open>span:last-child{display:grid;gap:5px;text-align:left}.case-inventory-open strong{font:700 13px Unbounded,sans-serif}.case-inventory-open small{color:#79a1b9;font-size:11px}.case-inventory-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(73,214,255,.32);border-radius:11px;color:#61ddff;font-size:22px;background:rgba(19,171,229,.1);box-shadow:inset 0 0 18px rgba(32,186,244,.1)}
body.inventory-open{overflow:hidden}.case-inventory-modal{position:fixed;z-index:10000;inset:0;display:grid;place-items:center;padding:24px}.case-inventory-modal[hidden]{display:none}.case-inventory-backdrop{position:absolute;inset:0;border:0;background:rgba(0,5,11,.82);backdrop-filter:blur(9px);cursor:default}.case-inventory-dialog{position:relative;width:min(1050px,100%);max-height:min(760px,calc(100vh - 48px));overflow:auto;padding:30px;border:1px solid rgba(75,207,255,.25);border-radius:24px;background:radial-gradient(circle at 50% 0,rgba(24,139,201,.14),transparent 38%),linear-gradient(145deg,#091827,#040c16);box-shadow:0 40px 130px rgba(0,0,0,.72);animation:inventoryIn .25s ease both}.case-inventory-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:25px;margin-bottom:24px}.case-inventory-dialog .cases-kicker{margin-bottom:9px}.case-inventory-dialog h2{margin:0;font:700 clamp(25px,3.4vw,38px)/1.15 Unbounded,sans-serif}.case-inventory-dialog header p{margin:10px 0 0;color:#7e94a8}.case-inventory-close{display:grid;place-items:center;width:42px;height:42px;flex:none;border:1px solid rgba(99,196,243,.17);border-radius:12px;background:rgba(255,255,255,.035);color:#ccecff;font-size:28px;cursor:pointer}.case-inventory-close:hover{background:rgba(37,186,239,.14)}
.case-inventory-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.case-inventory-card{position:relative;min-height:190px;overflow:hidden;padding:20px;border:1px solid rgba(113,205,255,.16);border-radius:18px;background:radial-gradient(circle at 50% 0,rgba(74,185,255,.13),transparent 62%),linear-gradient(145deg,rgba(15,35,55,.98),rgba(5,14,25,.98));box-shadow:inset 0 1px rgba(255,255,255,.035);cursor:pointer;transition:.22s transform,.22s border-color}.case-inventory-card:hover,.case-inventory-card.selected{transform:translateY(-3px);border-color:rgba(90,217,255,.48)}.case-inventory-card>div{display:grid;align-content:start;gap:10px;min-width:0}.case-inventory-server{width:max-content;padding:5px 8px;border-radius:7px;background:rgba(35,171,226,.11);color:#59d4ff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.15em}.case-inventory-card strong{font:700 17px/1.4 Unbounded,sans-serif}.case-inventory-card small{color:#74899c;line-height:1.55}.case-inventory-card button{position:absolute;z-index:2;left:18px;right:18px;bottom:18px;transform:translateY(12px);opacity:0;border:0;border-radius:11px;padding:12px 14px;background:linear-gradient(110deg,#169cff,#20d1f1);color:#00131d;font-weight:900;cursor:pointer;transition:.2s opacity,.2s transform,.2s filter}.case-inventory-card:hover button,.case-inventory-card.selected button,.case-inventory-card:focus-within button{opacity:1;transform:none}.case-inventory-card button:hover:not(:disabled){filter:brightness(1.1)}.case-inventory-card button:disabled{opacity:.45;cursor:wait}.case-inventory-empty{margin:0;padding:38px;text-align:center;border:1px dashed rgba(105,185,229,.18);border-radius:15px;color:#70869a}.case-inventory-message{min-height:22px;margin:16px 0 0;color:#74e5ba;font-weight:700}@keyframes inventoryIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
@media(max-width:900px){.cases-main{padding-top:105px}.cases-hero{grid-template-columns:1fr;text-align:center}.cases-copy>p{margin-left:auto;margin-right:auto}.cases-stats-row{margin:auto}.case-object-wrap{min-height:350px}.case-object{width:min(88vw,450px)}.case-platform{bottom:24px}.case-chances{grid-template-columns:repeat(2,1fr)}.case-inventory-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cases-main{padding-top:88px}.cases-hero{min-height:0}.cases-copy h1{font-size:34px}.cases-copy>p{font-size:14px}.cases-stats-row{display:grid}.cases-stats{grid-template-columns:1fr}.cases-stats div{padding:14px 16px}.cases-stats div+div:before{top:0;right:16px;bottom:auto;width:auto;height:1px}.case-inventory-open{width:100%;min-height:72px}.case-object-wrap{min-height:285px}.case-opening{padding:22px 12px;border-radius:18px}.roulette-card{width:142px;flex-basis:142px;min-height:88px;font-size:13px}.case-open-button{width:100%;justify-content:center}.case-chances{grid-template-columns:1fr 1fr}.case-chances div{grid-template-columns:8px auto;gap:8px}.case-chances span{grid-column:2}.case-note{font-size:11px}.case-inventory-modal{padding:10px}.case-inventory-dialog{padding:20px 14px;max-height:calc(100vh - 20px);border-radius:18px}.case-inventory-dialog>header{gap:12px}.case-inventory-list{grid-template-columns:1fr}.case-inventory-card{min-height:180px}.case-inventory-card button{opacity:0}.case-inventory-card.selected button{opacity:1}}
@media(prefers-reduced-motion:reduce){.case-object,.case-aura{animation:none}}