:root{color-scheme:dark;font-family:Inter,Segoe UI,sans-serif;background:#101820;color:#f4f6fa}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;align-items:center;padding:24px 4vw;border-bottom:1px solid #ffffff16}.brand{font-weight:750;letter-spacing:-.5px}.brand small{display:block;color:#8a9cae;font-size:11px;letter-spacing:2px;margin-top:8px}header>span{font-size:13px;color:#58e0bc}main.host{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:36px;padding:32px 4vw}.heading{display:flex;align-items:center;justify-content:space-between;gap:12px}h1{font-size:clamp(24px,3vw,40px);letter-spacing:-1px}h2{font-size:36px;line-height:1.1;letter-spacing:-1px}p{color:#a4b4c4;line-height:1.6;font-size:14px}canvas{width:100%;background:#15232e;border:1px solid #314351;border-radius:18px}aside{padding:22px;background:#1b2935;border-radius:20px}#qr{width:100%;border-radius:12px;display:block;margin:22px 0}a{color:#58e0bc;word-break:break-all;font-size:13px}select{width:100%;padding:10px;margin-top:8px;background:#101820;color:white;border:1px solid #415465;border-radius:8px}.eyebrow{font-size:11px;letter-spacing:3px;color:#58e0bc}.muted{font-size:12px;color:#8293a5}#players{display:flex;gap:12px;flex-wrap:wrap}#players span{padding:9px 14px;border:1px solid;border-radius:25px;font-size:13px}.controller main{max-width:500px;margin:auto;text-align:center;padding:30px 24px}.controller h1{font-size:30px}#orb{width:55px;height:55px;border-radius:50%;background:#8192a3;margin:20px auto;box-shadow:0 0 40px #ffffff15}.buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}button{padding:13px 17px;border:1px solid #455a6a;border-radius:12px;background:#263b49;color:white;font:inherit;font-size:14px;cursor:pointer}button:first-child{background:#58e0bc;color:#10251f;border:0}#pad{height:240px;max-width:320px;margin:25px auto;border:1px solid #435b6c;border-radius:30px;position:relative;touch-action:none;background:radial-gradient(circle,#243d4e,#15232e);display:grid;place-items:center}#pad span{position:absolute;bottom:16px;font-size:12px;color:#8a9cae;pointer-events:none}#stick{width:58px;height:58px;background:#ffffff25;border:2px solid #ffffff75;border-radius:50%;pointer-events:none}@media(max-width:800px){main.host{grid-template-columns:1fr}aside{max-width:400px}.heading{flex-wrap:wrap}header{padding:18px}h2{font-size:28px}}
[hidden]{display:none!important}#lobby{text-align:left;padding-top:35px}#lobby label{display:block;margin:25px 0 10px}#name{display:block;width:100%;padding:16px;border:1px solid #455a6a;border-radius:12px;background:#1b2935;color:white;font:inherit;font-size:20px}#start{width:100%;margin-top:20px;background:#58e0bc;color:#10251f;font-weight:700}button:disabled{opacity:.5}.controller .buttons{min-height:44px}
#round-status{font-size:23px;color:#58e0bc;font-weight:700;margin:8px 0 18px}#ready{min-width:220px;background:#58e0bc;color:#10251f}
/* Общий экран: игровое поле и приглашение, без боковой панели. */
.game-screen{height:100dvh;overflow:hidden;background:#101820;display:grid;place-items:center}
.arena{position:relative;width:min(calc(100vw - 48px),calc((100dvh - 48px)*5/3));aspect-ratio:5/3;border:1px solid #314351;border-radius:28px;overflow:hidden;box-shadow:0 20px 70px #00000030}
.game-screen #map{display:block;width:100%;height:100%;border:0;border-radius:27px;background:#15232e}
.join-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:18px;padding:24px;background:#101820ed;border:1px solid #ffffff16;border-radius:18px;color:#f4f6fa;text-decoration:none}
.join-card #qr{width:min(30vw,42dvh,360px);height:auto;margin:0;border-radius:8px}
.join-card span{font-size:clamp(14px,1.5vw,21px);white-space:nowrap;font-weight:600}
.game-screen #round-status{position:absolute;top:14px;left:50%;transform:translateX(-50%);margin:0;padding:8px 20px;border-radius:30px;background:#101820cc;color:#fff;font-size:clamp(22px,3vw,36px);font-variant-numeric:tabular-nums}
.connection-error{position:absolute;top:15px;left:15px;padding:10px 15px;background:#101820ef;color:#ffad66;border-radius:10px}
@media(max-width:600px){.arena{width:min(calc(100vw - 24px),calc((100dvh - 24px)*5/3));border-radius:20px}.join-card{padding:12px;gap:10px}.join-card #qr{width:min(34vw,32dvh)}}