.join-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:24px 20px;font-family:system-ui,-apple-system,sans-serif;color:#fff;gap:0}.join-screen__logo{font-size:28px;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:8px}.join-screen__subtitle{font-size:14px;color:#6b7280;margin-bottom:40px}.join-screen__form{display:flex;flex-direction:column;width:100%;max-width:360px;gap:16px}.join-screen__label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af}.join-screen__input{height:64px;background:#1c1c27;border:1.5px solid #2d2d3d;border-radius:12px;color:#fff;font-size:24px;font-weight:700;text-align:center;letter-spacing:.15em;padding:0 16px;outline:none;-webkit-appearance:none;transition:border-color .15s ease;caret-color:#7c3aed}.join-screen__input--nickname{font-size:18px;letter-spacing:.02em}.join-screen__input:focus{border-color:#7c3aed}.join-screen__input:disabled{opacity:.5}.join-screen__button{height:64px;background:#7c3aed;border:none;border-radius:12px;color:#fff;font-size:18px;font-weight:700;letter-spacing:.02em;cursor:pointer;-webkit-appearance:none;transition:background .1s ease,transform .1s ease;margin-top:8px;touch-action:manipulation}.join-screen__button:active{background:#6d28d9;transform:scale(.98)}.join-screen__button:disabled{opacity:.5;cursor:default}.join-screen__error{font-size:14px;color:#ef4444;text-align:center;min-height:20px;padding:4px 0}.join-screen__spinner{display:inline-block;width:20px;height:20px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:8px}@keyframes spin{to{transform:rotate(360deg)}}.gp{position:fixed;inset:0;background:#0d0d1a;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;font-family:system-ui,-apple-system,sans-serif;color:#fff;display:flex;flex-direction:column}.gp__topbar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top,12px) 16px 8px;gap:10px;flex-shrink:0}.gp__topbar-player{display:flex;align-items:center;gap:10px}.gp__topbar-btns{display:flex;align-items:center;gap:6px}.gp__topbar-btn{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;background:#ffffff14;border:1.5px solid rgba(255,255,255,.15);border-radius:10px;color:#ffffff8c;font-size:18px;letter-spacing:.04em;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background 80ms,color 80ms,border-color 80ms}.gp__topbar-btn--pressed{background:#ffffff2e;color:#ffffffe6}.gp__topbar-btn--pending{background:#ff505040;border-color:#ff505099;color:#ffa0a0f2}.gp__color-dot{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.25);flex-shrink:0}.gp__player-label{font-size:20px;font-weight:600;letter-spacing:.03em;color:#fffc}.gp__controls{flex:1;display:flex;align-items:center;justify-content:space-around;padding:12px 20px env(safe-area-inset-bottom,20px);gap:16px}.gp--portrait .gp__controls{flex-direction:row;align-items:flex-end;padding-bottom:max(env(safe-area-inset-bottom,20px),24px)}.gp--landscape .gp__controls{flex-direction:row;align-items:center;padding-left:max(env(safe-area-inset-left,16px),24px);padding-right:max(env(safe-area-inset-right,16px),24px)}.gp__dpad{width:45vmin;height:45vmin;background:#1a1a2e;border-radius:14px;border:2px solid rgba(255,255,255,.08);position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center}.gp--landscape .gp__dpad{width:38vmin;height:38vmin}.gp__dpad-arrow{position:absolute;width:0;height:0;transition:opacity 80ms;opacity:.4}.gp__dpad-arrow--up{top:12%;left:50%;transform:translate(-50%);border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:16px solid #fff}.gp__dpad-arrow--down{bottom:12%;left:50%;transform:translate(-50%);border-left:10px solid transparent;border-right:10px solid transparent;border-top:16px solid #fff}.gp__dpad-arrow--left{left:12%;top:50%;transform:translateY(-50%);border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:16px solid #fff}.gp__dpad-arrow--right{right:12%;top:50%;transform:translateY(-50%);border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid #fff}.gp__dpad-arrow--active{opacity:1}.gp__dpad-sector{position:absolute;inset:0;border-radius:12px;pointer-events:none;overflow:hidden}.gp__dpad-sector-fill{position:absolute;background:#ffffff12;transition:opacity 80ms;opacity:0}.gp__dpad-sector-fill--up{top:0;left:0;right:0;height:50%;clip-path:polygon(50% 50%,0% 0%,100% 0%)}.gp__dpad-sector-fill--down{bottom:0;left:0;right:0;height:50%;clip-path:polygon(50% 50%,0% 100%,100% 100%)}.gp__dpad-sector-fill--left{top:0;left:0;bottom:0;width:50%;clip-path:polygon(50% 50%,0% 0%,0% 100%)}.gp__dpad-sector-fill--right{top:0;right:0;bottom:0;width:50%;clip-path:polygon(50% 50%,100% 0%,100% 100%)}.gp__dpad-sector-fill--active{opacity:1}.gp__buttons{width:45vmin;height:45vmin;position:relative;flex-shrink:0}.gp--landscape .gp__buttons{width:38vmin;height:38vmin}.gp__btn{position:absolute;width:18vmin;height:18vmin;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;letter-spacing:.04em;color:#000000d9;cursor:pointer;transform-origin:center;transition:transform 80ms,filter 80ms;-webkit-tap-highlight-color:transparent}.gp--landscape .gp__btn{width:15vmin;height:15vmin}.gp__btn--top{top:0;left:50%;transform:translate(-50%)}.gp__btn--right{right:0;top:50%;transform:translateY(-50%)}.gp__btn--bottom{bottom:0;left:50%;transform:translate(-50%)}.gp__btn--left{left:0;top:50%;transform:translateY(-50%)}.gp__btn--pressed.gp__btn--top{transform:translate(-50%) scale(.9);filter:brightness(.8)}.gp__btn--pressed.gp__btn--right{transform:translateY(-50%) scale(.9);filter:brightness(.8)}.gp__btn--pressed.gp__btn--bottom{transform:translate(-50%) scale(.9);filter:brightness(.8)}.gp__btn--pressed.gp__btn--left{transform:translateY(-50%) scale(.9);filter:brightness(.8)}.gp__btn--X{background:#48f}.gp__btn--B{background:#f44}.gp__btn--A{background:#4c4}.gp__btn--Y{background:#fc0}