*{box-sizing:border-box}html,body{color:#e8eaf0;background:#15171c;height:100%;margin:0;font-family:system-ui,-apple-system,Apple SD Gothic Neo,Malgun Gothic,sans-serif;overflow:hidden}[hidden]{display:none!important}#join{justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.join-card{background:#222631;border-radius:12px;flex-direction:column;gap:12px;width:280px;padding:28px 24px;display:flex;box-shadow:0 10px 30px #0006}.join-card h1{text-align:center;margin:0 0 4px;font-size:24px}.join-card input,.join-card button{font:inherit;border:1px solid #3a4050;border-radius:8px;padding:10px 12px}.join-card input{color:inherit;background:#15171c}.join-card button{color:#fff;cursor:pointer;background:#4c6ef5;border-color:#4c6ef5}.join-card button:disabled{opacity:.45;cursor:default}.join-error{color:#ff8787;margin:0;font-size:13px}.join-room{text-align:center;overflow-wrap:anywhere;margin:-4px 0 0;font-size:16px;font-weight:600}.join-desc{color:#aab0bf;text-align:center;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;margin:-6px 0 2px;font-size:13px;line-height:1.45}.join-home{color:#91a7ff;text-align:center;font-size:13px}#game,#viewport{position:fixed;inset:0}#viewport canvas{z-index:1;touch-action:none;display:block;position:absolute;top:0;left:0}.css3d-layer{z-index:0;pointer-events:none;position:absolute;top:0;left:0}.label-layer{z-index:2;pointer-events:none;position:absolute;top:0;left:0}.player-label{color:#fff;white-space:nowrap;background:#0000008c;border-radius:4px;padding:2px 8px;font-size:12px}.desk-badge{color:#0b1020;white-space:nowrap;pointer-events:none;background:#4cc2ffe6;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:700}.desk-badge[hidden]{display:none}.mark{pointer-events:none;width:44px;height:44px;position:relative}.mark-ring{border:3px solid var(--c);opacity:0;border-radius:50%;animation:1.2s ease-out infinite mark-ring;position:absolute;inset:0}.mark-ring+.mark-ring{animation-delay:.6s}.mark-label{background:var(--c);color:#fff;white-space:nowrap;text-shadow:0 1px 2px #00000080;border-radius:4px;margin-bottom:2px;padding:1px 6px;font-size:12px;font-weight:700;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}@keyframes mark-ring{0%{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1)}}#hud{z-index:10;pointer-events:none;position:absolute;inset:0}.room-title{max-width:260px;color:inherit;font:inherit;text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;pointer-events:auto;background:#00000080;border:0;border-radius:6px;padding:6px 10px;font-size:14px;font-weight:600;position:absolute;top:12px;left:12px;overflow:hidden}.room-title:after{content:" ▾";opacity:.6;font-weight:400}.room-title:empty{display:none}.room-info{z-index:1;pointer-events:auto;background:#14161ceb;border-radius:10px;flex-direction:column;gap:8px;width:260px;padding:12px;font-size:13px;display:flex;position:absolute;top:46px;left:12px;box-shadow:0 6px 20px #0006}.room-info p{margin:0}.room-info-desc{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45}.room-info-code{color:#aab0bf}.room-info-code span{color:#e8eaf0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.room-info-actions{gap:6px;display:flex}.room-info-actions button{color:inherit;font:inherit;cursor:pointer;background:#2b3040;border:1px solid #3a4050;border-radius:6px;padding:6px 10px}.room-info-actions .room-info-invite{color:#fff;background:#4c6ef5;border-color:#4c6ef5;flex:1}.player-count{background:#00000080;border-radius:6px;padding:6px 10px;font-size:13px;position:absolute;top:46px;left:12px}.toasts{flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%)}.toast{background:#14161cd9;border-radius:8px;padding:8px 14px;font-size:13px}.chat{-webkit-backdrop-filter:blur(6px);pointer-events:auto;background:#00000073;border:1px solid #0000;border-radius:8px;flex-direction:column;width:320px;height:274px;transition:border-color .12s;display:flex;position:absolute;bottom:12px;right:12px;overflow:hidden}.chat:focus-within{border-color:#74c0fc}.chat-header{border-bottom:1px solid #ffffff1f;flex:none;align-items:center;gap:6px;height:24px;padding:0 4px 0 8px;font-size:12px;display:flex}.chat-title{color:#c8ccd6;flex:1}.chat-unread{color:#fff;text-align:center;background:#4c6ef5;border-radius:999px;min-width:18px;padding:1px 6px;font-size:11px;line-height:1.4}.chat-unread[hidden]{display:none}.chat-toggle{width:20px;height:20px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:4px;padding:0;font-size:12px;line-height:1}.chat-toggle:hover{background:#ffffff1f}.chat[data-collapsed=true]{width:auto;min-width:120px;height:auto}.chat[data-collapsed=true] .chat-header{border-bottom:0}.chat[data-collapsed=true] .chat-log,.chat[data-collapsed=true] .chat-input{display:none}.chat-log{flex:1;min-height:0;padding:6px 8px;font-size:13px;line-height:1.4;overflow-y:auto}.chat-message{overflow-wrap:anywhere}.chat-message[data-kind=system]{color:#9aa0ad;font-style:italic}.chat-input{width:100%;height:28px;color:inherit;font:inherit;background:#00000040;border:0;border-top:1px solid #ffffff1f;outline:none;flex:none;padding:0 8px;font-size:13px}.speech-bubble{pointer-events:none}.speech-bubble-body{color:#1c1e24;white-space:normal;overflow-wrap:anywhere;transform-origin:50% 100%;background:#fff;border-radius:10px;width:max-content;max-width:220px;margin-bottom:8px;padding:5px 10px;font-size:13px;line-height:1.35;transition:opacity .3s;animation:.15s ease-out bubble-in;position:relative}.speech-bubble-body:after{content:"";border:6px solid #0000;border-top-color:#fff;border-bottom:0;margin-left:-6px;position:absolute;bottom:-6px;left:50%}.speech-bubble.hiding .speech-bubble-body{opacity:0}@keyframes bubble-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.yt-holder{pointer-events:none;background:#000;width:1280px;height:720px}.yt-wrap{background:#000;width:1280px;height:720px;position:relative}.yt-wrap iframe,.yt-wrap>div:not(.share-status){pointer-events:none;border:0;width:100%;height:100%;display:block}.yt-wrap video{object-fit:contain;pointer-events:none;background:#000;width:100%;height:100%;display:block}.yt-wrap.sharing>:not(video):not(.share-status){display:none}.yt-wrap>.share-status{color:#fff;text-align:center;pointer-events:none;background:#0009;justify-content:center;align-items:center;padding:40px;font-size:44px;display:flex;position:absolute;inset:0}.focus-overlay{z-index:5;pointer-events:auto;background:#000000bf;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.focus-close{color:#fff;width:36px;height:36px;font:inherit;cursor:pointer;background:#ffffff26;border:0;border-radius:50%;padding:0;font-size:22px;line-height:36px;transition:background .12s;position:absolute;top:16px;right:16px}.focus-close:hover{background:#ffffff4d}.focus-hint{opacity:.6;pointer-events:none;font-size:13px;line-height:36px;position:absolute;top:16px;right:64px}.focus-frame{aspect-ratio:16/9;background:#000;width:min(90vw,160vh)}.focus-frame .yt-wrap{width:100%;height:100%}.badge-row{align-items:center;gap:6px;display:flex;position:absolute;top:80px;left:12px}.sync-indicator{color:#fff;background:#4c6ef5bf;border-radius:6px;padding:4px 8px;font-size:12px}.sync-indicator[hidden]{display:none}.controller-badge{background:#00000080;border-radius:6px;padding:6px 10px;font-size:13px}.controller-badge[data-active=true]{color:#ffd43b}.control-hint{color:#fff;white-space:nowrap;pointer-events:none;background:#000000a6;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700}.control-hint[hidden]{display:none}.hud-top-right{align-items:center;gap:8px;display:flex;position:absolute;top:12px;right:12px}.help-button{color:#fff;width:34px;height:34px;font:inherit;cursor:pointer;pointer-events:auto;background:#0000008c;border:0;border-radius:50%;padding:0;font-size:17px;font-weight:700}.help-button:hover{background:#000000bf}.sound-toggle{color:#fff;width:34px;height:34px;font:inherit;cursor:pointer;pointer-events:auto;background:#0000008c;border:0;border-radius:50%;padding:0;font-size:16px}.sound-toggle[aria-pressed=true]{background:#fa5252}.crosshair{pointer-events:none;background:#ffffff59;border:1px solid #0006;border-radius:50%;width:4px;height:4px;margin:-2px 0 0 -2px;position:absolute;top:50%;left:50%}.focus-overlay:not([hidden])~#hud .crosshair{display:none}.focus-overlay:not([hidden])~#hud .hud-top-right{top:60px}.share-retry{color:#fff;font:inherit;cursor:pointer;pointer-events:auto;background:#4c6ef5;border:0;border-radius:8px;padding:8px 14px;font-size:14px;position:absolute;top:56px;right:12px}.focus-overlay:not([hidden])~#hud .share-retry{top:104px}.control-panel{-webkit-backdrop-filter:blur(6px);pointer-events:auto;background:#14161cd9;border-radius:10px;flex-direction:column;gap:8px;width:520px;padding:10px 12px;font-size:13px;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.cp-load,.cp-share,.cp-row{align-items:center;gap:6px;display:flex}.cp-opts{align-items:center;gap:14px;display:flex}.cp-opts label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:4px;display:inline-flex}.cp-opts input[type=checkbox]{cursor:pointer;margin:0}@media (width<=1183px){.control-panel{width:auto;max-width:520px;margin:0 auto;left:12px;right:344px;transform:none}.cp-row{flex-wrap:wrap}}.control-panel input[type=text]{min-width:0;color:inherit;font:inherit;background:#15171c;border:1px solid #3a4050;border-radius:6px;flex:1;padding:6px 8px}.control-panel button{color:inherit;font:inherit;white-space:nowrap;cursor:pointer;background:#2b3040;border:1px solid #3a4050;border-radius:6px;padding:6px 10px}.cp-paste{white-space:nowrap}.control-panel button[type=submit]{color:#fff;background:#4c6ef5;border-color:#4c6ef5}.control-panel button:disabled{opacity:.45;cursor:default}.cp-play{min-width:72px}.control-panel .cp-share button[data-sharing=true]{color:#fff;background:#fa5252;border-color:#fa5252}.cp-seek{flex:1;min-width:0}.cp-time{text-align:right;font-variant-numeric:tabular-nums;color:#c4c8d2;min-width:92px}.emote-menu{pointer-events:none;background:radial-gradient(circle,#0000 38px,#00000073 40px);border-radius:50%;width:240px;height:240px;margin:-120px 0 0 -120px;position:absolute;top:50%;left:50%}.emote-slot{color:#fff;width:76px;height:76px;font:inherit;pointer-events:none;background:#14161cd9;border:2px solid #ffffff59;border-radius:50%;margin:-38px 0 0 -38px;padding:0;font-size:15px;font-weight:700;position:absolute}.emote-slot:before{opacity:.6;font-size:11px;font-weight:400;display:block}.emote-up{top:20%;left:50%}.emote-up:before{content:"1"}.emote-down{top:80%;left:50%}.emote-down:before{content:"2"}.emote-right{top:50%;left:80%}.emote-right:before{content:"3"}.emote-left{top:50%;left:20%}.emote-left:before{content:"4"}.emote-slot[data-active=true]{color:#111;background:#ffd43b;border-color:#ffd43b;transform:scale(1.12)}.key-legend{color:#fff;pointer-events:none;background:#00000073;border-radius:8px;max-width:calc(100vw - 380px);padding:6px 10px;font-size:12px;line-height:1.8;position:absolute;bottom:12px;left:12px}.key-legend[hidden]{display:none}.key-legend kbd{min-width:1.4em;font:inherit;text-align:center;background:#ffffff24;border:1px solid #ffffff59;border-radius:5px;padding:0 6px;font-weight:600;display:inline-block}.focus-overlay:not([hidden])~#hud .key-legend{display:none}@media (pointer:coarse){.key-legend{display:none}}@media (width<=1183px){#hud[data-panel="1"] .key-legend{bottom:120px}}.help-legend-hide{cursor:pointer;align-items:center;gap:6px;margin-top:12px;font-size:13px;display:flex}.help-overlay{z-index:20;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.help-card{color:#fff;background:#14161cf5;border-radius:12px;max-height:90vh;padding:18px 22px;overflow:auto;box-shadow:0 10px 30px #00000080}.help-card h2{margin:0 0 12px;font-size:18px}.help-table{border-collapse:collapse;font-size:14px}.help-table th,.help-table td{text-align:left;border-bottom:1px solid #ffffff1a;padding:5px 12px}.help-table th{opacity:.6;font-size:12px}.help-table td:first-child{white-space:nowrap;color:#ffd43b;font-weight:700}.help-close{color:#fff;font:inherit;cursor:pointer;background:#4c6ef5;border:0;border-radius:8px;margin:14px 0 0 auto;padding:8px 18px;font-size:14px;display:block}
