:root{color-scheme:dark;--ink:#f8f7ff;--muted:#a5a4bf;--panel:#16162a;--violet:#8b5cf6;--cyan:#30d8ff;--pink:#ff4fb3;font-family:Outfit,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 50% -10%,#332360 0,#111225 42%,#080913 100%);margin:0}body:before{content:"";pointer-events:none;opacity:.18;background-image:linear-gradient(#ffffff0a 1px,#0000 1px),linear-gradient(90deg,#ffffff0a 1px,#0000 1px);background-size:36px 36px;position:fixed;inset:0;mask-image:linear-gradient(#000,#0000 72%)}button{font:inherit}.app-shell{flex-direction:column;min-height:100vh;padding:22px clamp(16px,3vw,52px) 18px;display:flex;overflow:hidden}.topbar{border-bottom:1px solid #ffffff1f;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:102px;display:grid}.brand-stack{flex-direction:column;justify-content:center;align-items:flex-start;display:flex}.brand{text-transform:uppercase;letter-spacing:-.03em;align-items:center;gap:7px;font-size:clamp(1.3rem,2vw,1.8rem);display:flex}.brand strong{color:var(--cyan)}.brand-ball{aspect-ratio:1;background:radial-gradient(circle at 35% 30%,#a98cff,#6d28d9 42%,#211044 75%);border-radius:50%;width:30px;box-shadow:0 0 18px #8b5cf6b3}.topbar p{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:0;font-size:.75rem}.counter{color:var(--muted);text-transform:uppercase;justify-self:end;font-family:DM Mono,monospace;font-size:.76rem}.counter span{color:var(--cyan);font-size:1.25rem;font-weight:700}.draw-layout{grid-template-columns:minmax(190px,1fr) minmax(440px,2.25fr) minmax(190px,1fr);align-items:start;gap:clamp(18px,2vw,38px);width:100%;max-width:1660px;margin:auto;padding:14px 0 10px;display:grid}.roster{background:linear-gradient(145deg,#1e1e39eb,#0e0f1fe6);border:1px solid #ffffff1f;border-radius:20px;min-width:0;padding:18px;box-shadow:0 18px 50px #00000040}.right-column{flex-direction:column;min-width:0;height:min(75vh,760px);min-height:590px;display:flex}.action-block{gap:12px;margin-top:auto;display:grid}.name-list{gap:5px;margin:0;padding:0;list-style:none;display:grid}.name-list li{color:#d8d6e8;border:1px solid #0000;border-radius:10px;grid-template-columns:30px 1fr;align-items:center;gap:8px;min-height:45px;padding:7px 10px;transition:background 90ms,border-color 90ms,transform 90ms,color 90ms;display:grid}.name-list li span{color:#666784;font:400 .65rem DM Mono,monospace}.name-list li strong{text-overflow:ellipsis;white-space:nowrap;font-size:clamp(.86rem,1.05vw,1rem);overflow:hidden}.name-list li.is-active{color:#fff;background:linear-gradient(90deg,#30d8ff3d,#8b5cf61f);border-color:#30d8ffb3;transform:translate(5px);box-shadow:0 0 22px #30d8ff26}.roster-right .name-list li.is-active{transform:translate(-5px)}.name-list li.is-winner{background:linear-gradient(90deg,#ff4fb366,#8b5cf666);border-color:#fff;animation:.65s ease-in-out 3 winnerPulse;box-shadow:0 0 26px #ff4fb366}.game{text-align:center;grid-template-rows:auto auto;grid-template-columns:minmax(0,500px);justify-content:center;align-items:center;min-width:0;display:grid}.scoreboard{border-left:2px solid var(--cyan);align-items:center;gap:9px;min-height:24px;margin:7px 0 0 38px;padding-left:10px;display:flex}.score-label{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font:400 .57rem DM Mono,monospace}.scoreboard strong{color:var(--cyan);letter-spacing:.13em;text-shadow:0 0 12px;font:500 .82rem DM Mono,monospace}.alley{--ball-travel:calc(300px - min(75vh,760px));perspective:1100px;grid-area:1/1;width:min(100%,500px);height:min(75vh,760px);min-height:590px;margin-inline:auto;position:relative}.back-wall{z-index:4;pointer-events:none;place-items:center;height:13%;display:grid;position:absolute;top:4%;left:12%;right:12%}.back-neon{color:#0000;-webkit-text-stroke:1px #ff4fb357;letter-spacing:.04em;font-size:clamp(1.7rem,4vw,3.4rem);font-style:italic;font-weight:800;transform:skew(-8deg)}.lane{background:#111 url(/images/bowling-lane-player-view.png) 50%/cover no-repeat;border:1px solid #ffffff2e;border-radius:24px 24px 8px 8px;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 0 70px #02040e66,0 25px 65px #00000073,0 0 32px #4377ff1f}.lane:before{content:"";z-index:0;transform-origin:50% 21%;will-change:transform;background:url(/images/bowling-lane-player-view.png) 50%/cover no-repeat;position:absolute;inset:-1px;mask-image:linear-gradient(#0000 0 19%,#0000002e 27%,#000 44%)}.lane:after{content:"";z-index:1;pointer-events:none;background:linear-gradient(#04050f0f,#0000 45%,#05030f26);position:absolute;inset:0}.lane-marks{display:none}.pins{z-index:3;filter:drop-shadow(0 7px 5px #000000a3);will-change:translate,scale;width:180px;transition:opacity .16s,filter .16s;position:absolute;top:14.5%;left:50%;translate:-50%;scale:.62}.pins img{width:100%;height:auto;display:block}.ball{z-index:5;aspect-ratio:1;filter:drop-shadow(0 18px 14px #0000008c);will-change:translate,scale,opacity;width:clamp(104px,12vw,148px);position:absolute;bottom:0;left:50%;translate:-50%;scale:1}.ball canvas{width:100%;height:100%;display:block}.impact-burst{z-index:7;aspect-ratio:1;opacity:0;pointer-events:none;width:72%;position:absolute;top:-9%;left:50%;transform:translate(-50%)scale(.08)}.impact-burst>img{object-fit:contain;opacity:0;filter:brightness(1.08)contrast(1.08);width:100%;height:100%;position:absolute;inset:0}.impact-flash{z-index:2;aspect-ratio:1;opacity:0;background:#fff;border-radius:50%;width:18%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 24px 10px #fff,0 0 70px 36px #30d8ffd9,0 0 110px 55px #ff4fb380}.impact-particles,.impact-particles i{position:absolute;inset:0}.impact-particles i{background:linear-gradient(#fff,var(--cyan));opacity:0;transform-origin:50% 0;border-radius:999px;width:5px;height:24px;top:50%;left:50%}.impact-particles i:first-child{--angle:-82deg;--distance:155px}.impact-particles i:nth-child(2){--angle:-63deg;--distance:180px}.impact-particles i:nth-child(3){--angle:-43deg;--distance:150px}.impact-particles i:nth-child(4){--angle:-21deg;--distance:190px}.impact-particles i:nth-child(5){--angle:5deg;--distance:170px}.impact-particles i:nth-child(6){--angle:31deg;--distance:185px}.impact-particles i:nth-child(7){--angle:54deg;--distance:160px}.impact-particles i:nth-child(8){--angle:79deg;--distance:195px}.impact-particles i:nth-child(9){--angle:108deg;--distance:145px}.impact-particles i:nth-child(10){--angle:142deg;--distance:175px}.impact-particles i:nth-child(11){--angle:184deg;--distance:150px}.impact-particles i:nth-child(12){--angle:222deg;--distance:190px}.winner{z-index:9;opacity:0;backdrop-filter:blur(12px);pointer-events:none;background:#0f0c23db;border:1px solid #ffffffbf;border-radius:18px;width:min(86%,560px);padding:20px 24px;position:absolute;top:21%;left:50%;transform:translate(-50%,15px)scale(.72);box-shadow:0 0 55px #ff4fb3a6}.winner span{color:#ddd8ed;text-transform:uppercase;letter-spacing:.15em;font:500 .65rem DM Mono,monospace;display:block}.winner strong{background:linear-gradient(90deg,var(--cyan),#fff,var(--pink));color:#0000;-webkit-background-clip:text;background-clip:text;margin-top:6px;font-size:clamp(1.65rem,4.2vw,3.8rem);line-height:1;display:block}.is-rolling .lane:before{animation:8s cubic-bezier(.18,.5,.28,1) forwards cameraFollow}.is-rolling .pins{translate:-50%;scale:.62}.is-rolling .ball{animation:8s linear forwards travelBall}.is-impact .pins{opacity:0;filter:blur(8px)brightness(1.8)}.is-impact .impact-burst{animation:1.85s cubic-bezier(.1,.72,.18,1) forwards burstStage}.is-impact .impact-burst>img{animation:2.7s cubic-bezier(.1,.72,.18,1) forwards smokeCloud}.is-impact .impact-flash{animation:.42s ease-out forwards impactFlash}.is-impact .impact-particles i{animation:1.05s cubic-bezier(.12,.7,.25,1) forwards particleFly}.is-finished .winner{animation:.72s cubic-bezier(.16,1.25,.3,1) forwards revealWinner}.is-finished .back-neon{color:var(--pink);-webkit-text-stroke:0;text-shadow:0 0 15px var(--pink),0 0 38px var(--pink)}.start-button{color:#0b0b17;cursor:pointer;background:linear-gradient(145deg,var(--cyan),#8fffd9 52%,var(--pink));border:1px solid #ffffff3d;border-radius:18px;justify-content:center;align-items:center;gap:12px;width:100%;min-height:82px;margin:0;padding:15px 14px;transition:transform .2s,filter .2s;display:flex;box-shadow:0 10px 35px #30d8ff3d}.start-button span{letter-spacing:.08em;font-size:1.45rem;font-weight:800}.start-button small{border-left:1px solid #0a0a1442;padding-left:12px;font-size:.72rem}.start-button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-3px)}.start-button:disabled{cursor:wait;filter:saturate(.35)}.hint{color:var(--muted);text-align:left;margin:0;padding-inline:5px;font-size:.76rem;line-height:1.45}@keyframes travelBall{0%{opacity:1;translate:-50%;scale:1}96%{opacity:1}to{translate:-50% var(--ball-travel);opacity:0;scale:.42}}@keyframes cameraFollow{0%{transform:scale(1)}to{transform:scale(1.32)}}@keyframes burstStage{0%{opacity:0;transform:translate(-50%)scale(.08)}8%{opacity:1}42%{opacity:1;transform:translate(-50%)scale(1.03)}to{opacity:.62;transform:translate(-50%)scale(1.22)}}@keyframes smokeCloud{0%{opacity:0;transform:scale(.05)rotate(-5deg)}12%{opacity:1}55%{opacity:.98;transform:scale(1)rotate(1deg)}to{opacity:.54;filter:brightness(.78)blur(2px);transform:scale(1.2)rotate(3deg)}}@keyframes impactFlash{0%{opacity:0;transform:translate(-50%,-50%)scale(.05)}28%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(5)}}@keyframes particleFly{0%{opacity:0;transform:rotate(var(--angle)) translateY(0) scaleY(.3)}18%{opacity:1}to{opacity:0;transform:rotate(var(--angle)) translateY(calc(var(--distance) * -1)) scaleY(1)}}@keyframes revealWinner{0%{opacity:0;filter:blur(8px);transform:translate(-50%,22px)scale(.68)}to{opacity:1;filter:blur();transform:translate(-50%)scale(1)}}@keyframes winnerPulse{50%{filter:brightness(1.45)}}@media (width<=820px){.topbar{grid-template-columns:1fr auto}.topbar p{display:none}.draw-layout{grid-template-columns:1fr 1fr;align-items:start;max-width:720px}.game{grid-area:1/1/auto/-1}.roster-left{grid-column:1}.right-column{grid-column:2;height:auto;min-height:0}.action-block{margin-top:18px}.alley{height:min(72vh,700px)}.name-list li{min-height:42px}}@media (width<=540px){.app-shell{padding:14px 12px}.topbar{min-height:55px}.counter{font-size:.62rem}.counter span{font-size:1rem}.draw-layout{gap:9px;padding-top:18px}.roster{border-radius:13px;padding:9px}.name-list li{grid-template-columns:20px 1fr;gap:3px;min-height:38px;padding:5px}.name-list li strong{font-size:.72rem}.name-list li span{font-size:.55rem}.game{grid-template-columns:1fr}.alley{--ball-travel:-300px;grid-column:1;height:560px;min-height:500px}.start-button{gap:6px;min-height:68px;padding:10px 7px}.start-button span{font-size:1.05rem}.start-button small{padding-left:6px;font-size:.62rem}.winner{width:88%;padding:14px 10px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}