:root{--bg-gradient:linear-gradient(135deg, #0f2027, #203a43, #2c5364);--glass-bg:#ffffff1a;--glass-border:#fff3;--glass-shadow:0 8px 32px 0 #0000005e;--text-main:#fff;--text-muted:#ffffffb3;--accent:#4facfe;--accent-hover:#00f2fe;--danger:#ff416c;--danger-hover:#ff4b2b}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);color:var(--text-main);flex-direction:column;min-height:100vh;font-family:Outfit,sans-serif;display:flex}#root{flex-direction:column;flex:1;display:flex}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:16px}button{cursor:pointer;border:none;outline:none;font-family:Outfit,sans-serif;font-weight:600;transition:all .3s}.btn-primary{background:linear-gradient(to right, var(--accent), var(--accent-hover));color:#fff;border-radius:30px;padding:12px 24px;box-shadow:0 4px 15px #00f2fe66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00f2fe99}.btn-danger{background:linear-gradient(to right, var(--danger), var(--danger-hover));color:#fff;border-radius:20px;padding:8px 16px;font-size:.9rem}.btn-danger:hover{transform:translateY(-2px)}.btn-large{padding:16px 40px;font-size:1.2rem}.room-info-toggle{width:40px;height:40px;color:var(--text-main);border-radius:12px;flex:0 0 40px;justify-content:center;align-items:center;display:inline-flex}.room-info-toggle:hover{color:var(--accent);transform:translateY(-1px)}.opponents-grid{flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:8px;width:100%;max-width:100%;min-height:112px;padding-bottom:12px;display:flex;overflow-x:hidden}.opponents-grid__empty{width:100%;min-height:100px;color:var(--text-muted);justify-content:center;align-items:center;display:flex}.player-block{flex:clamp(84px,18vw,220px);min-width:84px;max-width:100%}.dice-machine{flex:none;margin:0 auto;position:relative}.dice-machine__base{z-index:0;background:linear-gradient(#47515e 0%,#252b34 52%,#171b21 100%);border:1px solid #ffffff3d;border-radius:24px 24px 30px 30px;height:78px;position:absolute;inset:auto 0 0;box-shadow:inset 0 8px 10px #ffffff14,inset 0 -8px 12px #00000059,0 18px 28px #00000073}.dice-machine__tray{background:radial-gradient(#1b272d 0%,#10161a 72%);border:6px solid #20262e;border-radius:50%;width:210px;height:44px;position:absolute;top:-11px;left:50%;transform:translate(-50%);box-shadow:inset 0 5px 12px #000000a6,0 2px #ffffff1f}.dice-machine__dice-viewport{pointer-events:none;z-index:2;border-radius:48% 48% 18% 18%/34% 34% 12% 12%;position:absolute;left:50%;overflow:hidden;transform:translate(-50%)}.dice-machine__dice{opacity:1;z-index:1;perspective:420px;flex-wrap:wrap;justify-content:center;align-items:flex-end;transition:opacity .16s,filter .16s;display:flex;position:absolute;left:50%;transform:translate(-50%)}.dice-machine__dice--hidden{opacity:.68;filter:grayscale()brightness(1.85)blur(3px)}.dice-machine__die{transform-style:preserve-3d;transform-origin:50%;will-change:transform}.dice-cube{transform-style:preserve-3d;position:relative;transform:rotateX(-8deg)rotateY(10deg)}.dice-cube__face{transform-style:preserve-3d}.dice-cube__face:nth-child(3),.dice-cube__face:nth-child(4){background:linear-gradient(145deg,#e1e7eb,#cbd3d9)!important}.dice-cube__face:nth-child(5){background:linear-gradient(145deg,#fff,#f2f5f7)!important}.dice-cube__face:nth-child(6){background:linear-gradient(145deg,#d4dce1,#bac4cb)!important}.dice-machine__cover{z-index:4;cursor:default;opacity:1;background:linear-gradient(105deg,#ffffff57 0%,#bee0ef14 35%,#d9f2fc2e 72%,#ffffff6b 100%);border:2px solid #ddf4ffb3;border-bottom:7px solid #191f26e6;border-radius:48% 48% 18% 18%/34% 34% 12% 12%;padding:0;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .3s,background .22s,border-color .22s;position:absolute;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:inset 10px 0 18px #ffffff29,inset -10px 0 18px #4c69772e,0 8px 18px #0000004d}.dice-machine__cover--covered{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);background:linear-gradient(110deg,#7d8894d6,#343c45d1 55%,#68737fdb);border-color:#a3aeb98c #a3aeb98c #242a31;box-shadow:inset 12px 0 20px #ffffff14,inset -15px 0 22px #00000047,0 9px 20px #0006}.dice-machine__cover--lifted{opacity:.12;pointer-events:none;transform:translate(-50%,-150px)scale(.96)}.dice-machine--medium .dice-machine__cover--lifted{transform:translate(-50%,-82px)scale(.96)}.dice-machine--small .dice-machine__cover--lifted{transform:translate(-50%,-40px)scale(.96)}.dice-machine__cover--shaking{animation:.12s linear infinite machineShake}.dice-machine__shine{background:linear-gradient(#ffffffad,#ffffff0a);border-radius:50%;width:15%;height:64%;position:absolute;top:12%;left:12%;transform:rotate(4deg)}.dice-machine__rim{background:#10161b33;border-top:2px solid #ffffff47;border-radius:50%;height:12%;position:absolute;bottom:1px;left:5%;right:5%}.dice-machine__peek{z-index:8;color:#fff;white-space:nowrap;background:#0f161cd1;border:1px solid #ffffff59;border-radius:16px;align-items:center;gap:5px;padding:6px 12px;display:inline-flex;position:absolute;top:-34px;left:50%;transform:translate(-50%);box-shadow:0 5px 14px #00000059}.dice-machine__controls{z-index:7;pointer-events:none;justify-content:space-between;display:flex;position:absolute;bottom:15px;left:12px;right:12px}.dice-machine__control{color:#fff;pointer-events:auto;border:2px solid #ffffff4d;border-radius:12px;justify-content:center;align-items:center;gap:5px;width:70px;min-height:40px;display:inline-flex;box-shadow:inset 0 -4px #00000038,0 4px 8px #00000047}.dice-machine__control--roll{background:linear-gradient(#36c974,#168548)}.dice-machine__control--open{background:linear-gradient(#ffb13b,#d36a18)}.dice-machine__control:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 -2px #00000038,0 2px 4px #00000047}.dice-machine__control:disabled{cursor:not-allowed;filter:grayscale(.8);opacity:.45}@keyframes machineShake{0%{transform:translate(-50%)translate(0)rotate(0)}25%{transform:translate(-50%)translate(-4px,2px)rotate(-1.2deg)}50%{transform:translate(-50%)translate(3px,-2px)rotate(1deg)}75%{transform:translate(-50%)translate(-2px,-1px)rotate(-.7deg)}to{transform:translate(-50%)translate(0)rotate(0)}}@keyframes diceBounceA{0%{transform:translate(-18%)rotateX(0)rotateY(0)rotate(0)}28%{transform:translate3d(42%,-120%,16px)rotateX(145deg)rotateY(90deg)rotate(48deg)}62%{transform:translate3d(-38%,-38%,5px)rotateX(255deg)rotateY(210deg)rotate(154deg)}to{transform:translate(-18%)rotateX(360deg)rotateY(320deg)rotate(240deg)}}@keyframes diceBounceB{0%{transform:translate(22%,-8%)rotateX(15deg)rotateY(0)rotate(8deg)}34%{transform:translate3d(-55%,-72%,20px)rotateX(170deg)rotateY(155deg)rotate(-72deg)}72%{transform:translate3d(38%,-132%,8px)rotateX(285deg)rotateY(270deg)rotate(-168deg)}to{transform:translate(22%,-8%)rotateX(375deg)rotateY(360deg)rotate(-240deg)}}@keyframes diceBounceC{0%{transform:translate(0,0)rotateX(0)rotateY(20deg)rotate(0)}24%{transform:translate3d(58%,-58%,11px)rotateX(-105deg)rotateY(150deg)rotate(74deg)}58%{transform:translate3d(-48%,-140%,18px)rotateX(-235deg)rotateY(265deg)rotate(168deg)}to{transform:translate(0,0)rotateX(-360deg)rotateY(380deg)rotate(260deg)}}@keyframes diceBounceD{0%{transform:translate(-28%,-5%)rotateX(12deg)rotateY(10deg)rotate(-5deg)}38%{transform:translate3d(48%,-145%,22px)rotateX(190deg)rotateY(-120deg)rotate(115deg)}68%{transform:translate3d(-18%,-52%,7px)rotateX(275deg)rotateY(-245deg)rotate(210deg)}to{transform:translate(-28%,-5%)rotateX(372deg)rotateY(-350deg)rotate(350deg)}}@keyframes diceBounceE{0%{transform:translate(30%)rotateX(0)rotateY(-15deg)rotate(5deg)}30%{transform:translate3d(-44%,-105%,15px)rotateX(125deg)rotateY(-175deg)rotate(-90deg)}75%{transform:translate3d(52%,-42%,6px)rotateX(292deg)rotateY(-290deg)rotate(-205deg)}to{transform:translate(30%)rotateX(360deg)rotateY(-375deg)rotate(-355deg)}}.dice-tumble.dice-machine__die--0{animation:.43s cubic-bezier(.45,.05,.55,.95) infinite diceBounceA}.dice-tumble.dice-machine__die--1{animation:.51s cubic-bezier(.45,.05,.55,.95) -170ms infinite diceBounceB}.dice-tumble.dice-machine__die--2{animation:.47s cubic-bezier(.45,.05,.55,.95) -80ms infinite diceBounceC}.dice-tumble.dice-machine__die--3{animation:.54s cubic-bezier(.45,.05,.55,.95) -260ms infinite diceBounceD}.dice-tumble.dice-machine__die--4{animation:.455s cubic-bezier(.45,.05,.55,.95) -210ms infinite diceBounceE}@media (width<=390px){.dice-machine--with-base{transform-origin:bottom;margin-top:-18px;transform:scale(.92)}}input,select{border:1px solid var(--glass-border);color:#fff;background:#ffffff0d;border-radius:12px;width:100%;margin-bottom:16px;padding:12px 20px;font-family:Outfit,sans-serif;font-size:1rem;transition:border-color .3s}input:focus,select:focus{border-color:var(--accent);outline:none}input::placeholder{color:var(--text-muted)}select option{color:#fff;background:#203a43}@keyframes shake{0%{transform:translate(1px,1px)rotate(0)}10%{transform:translate(-1px,-2px)rotate(-1deg)}20%{transform:translate(-3px)rotate(1deg)}30%{transform:translate(3px,2px)rotate(0)}40%{transform:translate(1px,-1px)rotate(1deg)}50%{transform:translate(-1px,2px)rotate(-1deg)}60%{transform:translate(-3px,1px)rotate(0)}70%{transform:translate(3px,1px)rotate(-1deg)}80%{transform:translate(-1px,-1px)rotate(1deg)}90%{transform:translate(1px,2px)rotate(0)}to{transform:translate(1px,-2px)rotate(-1deg)}}.shaking{animation:.5s cubic-bezier(.36,.07,.19,.97) infinite both shake}@keyframes spinFast{0%{transform:rotate(0)scale(1)}50%{transform:rotate(180deg)scale(.9)}to{transform:rotate(360deg)scale(1)}}.spin-fast{animation:.2s linear infinite spinFast}
