
.billiardsDialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:radial-gradient(ellipse at 50% 45%,#263c50 0,#111e2d 55%,#070e19 100%);color:#e5edf6;box-shadow:none;font:14px/1.5 Arial,sans-serif;overflow:hidden;color-scheme:dark}.billiardsDialog::backdrop{background:#050a12}.billiardsDialog [hidden]{display:none!important}
.billiardsPanel{height:100%;width:100%;box-sizing:border-box;display:grid;grid-template-columns:80px minmax(0,1fr) 80px;grid-template-rows:72px 30px minmax(0,1fr) 58px 30px;gap:4px 12px;padding:10px 24px 12px;position:relative;margin:0}.billiardsPanel>*{min-width:0}.billiardsClose{position:absolute;right:22px;top:20px;width:38px;height:38px;border:1px solid #ffffff20;border-radius:12px;background:#ffffff08;color:#c4d0dd;font-size:23px;cursor:pointer;z-index:3}.billiardsEyebrow{position:absolute;left:24px;top:18px;color:#b5c5d1;font-size:8px;font-weight:700;letter-spacing:.22em}.billiardsPanel h2{position:absolute;left:24px;top:32px;margin:0;color:#e6c27b;font-size:17px;font-weight:800;letter-spacing:.03em}
.billiardsPlayers{grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:35px;max-width:560px;width:100%;justify-self:center;align-self:center;position:relative}.billiardsPlayers:after{content:'VS';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;color:#7e95aa;font-weight:800}.billiardsPlayers span{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;padding:9px 12px;border:1px solid #ffffff15;border-radius:12px;background:linear-gradient(#233344,#172534);color:#b9ccdc;text-align:center;font-size:12px;line-height:1.5;overflow-wrap:anywhere;box-sizing:border-box}.billiardsPlayers .isTurn{border-color:#dabc70;color:#fff0c7;box-shadow:0 0 22px #e4bb5320,inset 0 -3px #dabc70}.billiardsPlayers .isTurn:before{content:'';width:6px;height:6px;border-radius:50%;background:#e6c477;position:absolute;top:8px;right:8px}
.billiardsPanel [data-billiards-status]{grid-column:2;grid-row:2;color:#a1b6c7;margin:0;text-align:center;font-size:12px;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.billiardsBoardHost{grid-column:2;grid-row:3;min-height:0;min-width:0;width:100%;display:grid;place-items:center;background:transparent;border:0;border-radius:0;overflow:visible}.billiardsBoard{display:block;width:min(100%,calc((100dvh - 220px)*1.7857));height:auto;aspect-ratio:1000/560;max-width:1120px;touch-action:none;cursor:crosshair;filter:drop-shadow(0 20px 25px #0005)}
.billiardsAngleControl{display:none!important}.billiardsPowerControl{grid-column:1;grid-row:3;align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#7f98ad}.billiardsPowerControl output{color:#efcf8e;font-size:12px;font-weight:700}.billiardsPowerControl input{writing-mode:vertical-lr;direction:rtl;height:min(220px,36dvh);width:27px;accent-color:#dcb56a;cursor:ns-resize}.billiardsActions{grid-column:2;grid-row:4;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}.billiardsActions button{min-height:39px;padding:9px 16px;border:1px solid #ffffff18;border-radius:9px;background:#ffffff06;color:#a9bfd1;font:600 11px Arial;cursor:pointer}.billiardsActions button[data-billiards-shot]{background:linear-gradient(#efd49a,#c69d50);border-color:#f3dbaa;color:#30230d;min-width:135px;font-size:12px;box-shadow:0 4px 0 #715229}.billiardsActions button:hover{filter:brightness(1.12)}.billiardsActions button:disabled{opacity:.4;cursor:default}.billiardsPanel>small{grid-column:2;grid-row:5;text-align:center;align-self:center;color:#728ba0;font-size:11px}.billiardsDialog :is(button,input,canvas):focus-visible{outline:2px solid #e8c67f;outline-offset:4px}
@media(max-width:700px){.billiardsPanel{grid-template-columns:40px minmax(0,1fr) 8px;gap:3px 3px;padding:8px 8px 10px;grid-template-rows:65px 25px minmax(0,1fr) 80px 38px}.billiardsPlayers{gap:26px}.billiardsPlayers span{font-size:10px;min-height:46px;padding:8px}.billiardsPlayers:after{font-size:9px}.billiardsEyebrow,.billiardsPanel h2{display:none}.billiardsClose{right:7px;top:4px;width:25px;height:25px;font-size:17px;background:#0c1925;z-index:4}.billiardsBoard{width:min(100%,calc((100dvh - 240px)*1.7857))}.billiardsActions{gap:6px}.billiardsActions button{min-height:38px;padding:8px 10px;font-size:10px}.billiardsPowerControl{font-size:8px}.billiardsPowerControl input{height:min(180px,26dvh);width:22px}.billiardsPanel>small{font-size:10px;max-width:280px;justify-self:center}.billiardsPanel [data-billiards-status]{font-size:10px}}
@media(max-height:520px) and (orientation:landscape){.billiardsPanel{grid-template-rows:48px 20px minmax(0,1fr) 40px 20px;grid-template-columns:45px minmax(0,1fr) 45px;padding:4px 10px;gap:2px}.billiardsPlayers span{min-height:38px;padding:5px}.billiardsBoard{width:min(100%,calc((100dvh - 140px)*1.7857))}.billiardsActions button{min-height:30px;padding:5px 10px}.billiardsPowerControl input{height:110px}.billiardsEyebrow,.billiardsPanel h2{display:none}}

.billiardsBoardHost{position:relative}.billiardsSound{position:absolute;right:8px;bottom:0;border:1px solid #ffffff30;border-radius:20px;padding:7px 12px;background:#10262de8;color:#e3e9dd;font-size:11px;cursor:pointer}
