:root{--white: #f4f4f2;--black: #121214;--blue: #b0cee0;--pink: #e6bec6;--yellow: #e8dcaa;--green: #bad6ba;--purple: #ccbedc;color:var(--white);background:var(--black);font-family:Avenir Next,Segoe UI,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--black)}button,input{font:inherit;color:inherit}button{background:none;border:none;padding:0;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}#view{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}#view.fps{cursor:none!important}#reticle{position:fixed;left:50%;top:50%;z-index:3;width:8px;height:8px;margin-left:-4px;margin-top:-4px;border-radius:50%;background:var(--white);box-shadow:0 0 0 1px var(--black);pointer-events:none}#reticle.hot{background:#d4c68a}#duck{position:fixed;left:0;top:0;z-index:1;width:312px;height:200px;transform-origin:0 0;overflow:hidden;background:var(--black);pointer-events:none}#duck.off{visibility:hidden}#duck iframe{width:100%;height:100%;border:0;pointer-events:none}.hud{-webkit-user-select:none;user-select:none}.top{position:fixed;top:28px;right:28px;z-index:2;text-align:right}.label{display:block;color:var(--blue);font-size:12px;letter-spacing:.18em;font-weight:600}#code{display:inline-block;margin-top:4px;font-size:22px;letter-spacing:.16em;font-weight:700;cursor:pointer}#share{display:block;margin:10px 0 0 auto;color:var(--blue);font-size:11px;font-weight:600;letter-spacing:.14em}#share:hover{color:var(--white)}.portraits{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;gap:10px;text-shadow:1px 0 0 var(--black),-1px 0 0 var(--black),0 1px 0 var(--black),0 -1px 0 var(--black)}.portrait{width:46px;height:46px;border:2px solid var(--white);background:transparent;color:var(--white);font-weight:700;font-size:15px;text-shadow:inherit}.portrait.on{color:var(--black)}.portrait.self{box-shadow:0 0 0 2px var(--white)}.portrait.hot{outline:2px solid var(--white);outline-offset:3px}.menu{position:fixed;left:36px;bottom:32px;z-index:2;text-shadow:1px 0 0 var(--black),-1px 0 0 var(--black),0 1px 0 var(--black),0 -1px 0 var(--black)}.menu button,.menu input{text-shadow:inherit}#play{display:flex;align-items:center;gap:14px;font-size:clamp(52px,8vw,88px);font-weight:700;letter-spacing:-.05em;line-height:.9}#join,#leave,#screen,#options,#video-debug,#face-mode,#mouth-tune,#nose-tune,#light-tune,#lobby-cam,#lobby-set,#lobby-reset,#lobby-copy,#apply-config{display:block;margin-top:10px;font-size:15px;font-weight:600;letter-spacing:.16em;opacity:.86}#leave{position:fixed;top:76px;left:36px;margin:0;z-index:2}#options[aria-pressed=true],#screen[aria-pressed=true],#face-mode[aria-pressed=true],#lobby-cam[aria-pressed=true],#mouth-tune[aria-pressed=true],#nose-tune[aria-pressed=true],#light-tune[aria-pressed=true]{color:var(--yellow)}#options-panel{max-height:min(46vh,520px);margin-top:4px;padding-left:12px;overflow:auto}#sound-row,#look-panel,#mouth-panel,#nose-panel,#light-panel{width:min(280px,100%);margin-top:8px}#look-panel .mouth-row{grid-template-columns:92px 1fr 44px}#look-last{margin:8px 0 0;color:var(--yellow);font-size:11px;font-weight:600;letter-spacing:.08em}#light-panel .mouth-row{grid-template-columns:52px 1fr 64px}#light-panel input[type=color]{width:100%;height:16px;padding:0;border:0;background:transparent;cursor:pointer}.mouth-row{display:grid;grid-template-columns:78px 1fr 44px;align-items:center;gap:8px;margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.06em}.mouth-row input[type=range]{width:100%;margin:0;accent-color:var(--yellow)}.mouth-val{text-align:right;color:var(--yellow);letter-spacing:0;font-variant-numeric:tabular-nums}#lobby-help,#light-help{margin:12px 0 0;max-width:280px;color:var(--blue);font-size:11px;font-weight:600;letter-spacing:.12em;line-height:1.45}#lobby-coords{-webkit-user-select:text;user-select:text;margin:8px 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:600;letter-spacing:0;line-height:1.45;white-space:pre;color:var(--yellow)}.skin-pick{margin-top:16px}.skin-pick .label{margin-bottom:8px}.skins{display:flex;gap:6px}.skins button{width:22px;height:22px;border:2px solid var(--black);box-shadow:0 0 0 1px var(--white)}.skins button[aria-pressed=true]{box-shadow:0 0 0 3px var(--white)}#join:hover,#leave:hover,#screen:hover,#options:hover,#video-debug:hover,#face-mode:hover,#mouth-tune:hover,#nose-tune:hover,#light-tune:hover,#play:hover,#code:hover,#lobby-cam:hover,#lobby-set:hover,#lobby-reset:hover,#lobby-copy:hover{opacity:1}#seat-label{margin:14px 0 0;color:var(--blue);font-size:12px;letter-spacing:.18em;font-weight:600}#join-form{display:flex;gap:12px;align-items:center;margin-top:16px}#join-form[hidden],[hidden]{display:none!important}#code-input{width:168px;background:transparent;border:none;border-bottom:2px solid var(--white);padding:6px 0;font-size:18px;letter-spacing:.14em;outline:none}#code-input::placeholder{color:#f4f4f259}#join-form button{font-size:13px;letter-spacing:.16em;font-weight:700}#status{min-height:1.2em;margin:12px 0 0;font-size:12px;letter-spacing:.14em;font-weight:600;color:var(--blue)}#status[data-kind=bad]{color:var(--pink)}.hint{position:fixed;top:28px;left:36px;right:260px;z-index:2;margin:0;color:var(--blue);font-size:11px;letter-spacing:.18em;font-weight:600;line-height:1.45}.move{display:none;position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:3;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,52px);gap:8px;touch-action:none;-webkit-user-select:none;user-select:none}.move button{border:2px solid var(--white);background:#121214b8;font-size:22px;font-weight:700;line-height:1}.move button:active{background:var(--white);color:var(--black)}.move button[data-zoom=in]{grid-column:1;grid-row:1}.move button[data-move=KeyW]{grid-column:2;grid-row:1}.move button[data-zoom=out]{grid-column:3;grid-row:1}.move button[data-move=KeyA]{grid-column:1;grid-row:2}.move button[data-move=KeyD]{grid-column:3;grid-row:2}.move button[data-move=KeyS]{grid-column:2;grid-row:2}.tag{position:fixed;left:0;top:0;z-index:2;padding:3px 7px;border:2px solid var(--white);background:#121214b8;color:var(--white);font-size:13px;font-weight:700;letter-spacing:.08em;pointer-events:none}.tag.hot{background:var(--white);color:var(--black)}.sink{position:fixed;top:0;left:0;width:160px;height:120px;opacity:0;pointer-events:none}.face-debug{position:fixed;left:16px;top:64px;z-index:4;width:220px;padding:8px;border:2px solid var(--white);background:#121214e0;-webkit-user-select:none;user-select:none;visibility:hidden;pointer-events:none}.face-debug.on{visibility:visible;pointer-events:auto}body.in-call .face-debug{top:112px}.face-debug-state{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.14em}.face-debug-state[data-kind=wait]{color:var(--blue)}.face-debug-state[data-kind=ok]{color:var(--green)}.face-debug-state[data-kind=held]{color:var(--yellow)}.face-debug-state[data-kind=bad]{color:var(--pink)}.face-debug-stage{position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden;background:#000;transform:scaleX(-1)}.face-debug-stage video,.face-debug-stage canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.face-debug-stage canvas{pointer-events:none}.face-debug-foot{display:flex;gap:8px;align-items:flex-start;margin-top:8px}#face-debug-grid{width:64px;height:80px;flex:none;image-rendering:pixelated;background:var(--pink)}.face-debug-key{margin:0;color:var(--blue);font-size:10px;font-weight:600;letter-spacing:.08em;line-height:1.35}@media(max-width:800px){.top{top:16px;right:16px;max-width:46%}#code{font-size:16px}.portraits{top:auto;bottom:calc(200px + env(safe-area-inset-bottom));right:16px;transform:none;flex-direction:row}.menu{left:16px;bottom:calc(200px + env(safe-area-inset-bottom))}#play{font-size:42px}#leave{top:16px;left:16px}body.in-call .face-debug{top:148px}.hint{top:48px;left:16px;right:58%;line-height:1.35}body.in-call .portraits{bottom:calc(16px + env(safe-area-inset-bottom));flex-direction:column}.move:not([hidden]){display:grid}}@media(pointer:coarse){.move:not([hidden]){display:grid}.menu{bottom:calc(200px + env(safe-area-inset-bottom))}}#tune{position:fixed;top:112px;right:12px;z-index:6;width:240px;max-height:min(80vh,720px);display:flex;flex-direction:column;background:#121214f0;border:2px solid var(--white);color:var(--white)}#tune-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 8px 10px;cursor:grab;letter-spacing:.16em;font-size:12px;font-weight:700;-webkit-user-select:none;user-select:none;touch-action:none}#tune-apply{margin:0 8px 8px;letter-spacing:.12em;font-size:11px;font-weight:700;text-align:left}#tune-head button{letter-spacing:.12em;font-size:11px;font-weight:700}#tune-body{overflow:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 8px 10px}#tune details{margin-top:2px}#tune summary{cursor:pointer;padding:5px 0;letter-spacing:.12em;font-size:11px;font-weight:700;list-style:none}#tune summary::-webkit-details-marker{display:none}#tune details[open]>summary{color:var(--yellow)}#tune details details{margin-left:8px}.tune-group{margin:10px 0 0;color:var(--blue);font-size:10px;font-weight:700;letter-spacing:.12em}.tune-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center;margin-top:8px;min-width:0;font-size:10px;font-weight:600;letter-spacing:.06em}.tune-row input[type=range]{grid-column:1 / -1;width:100%;min-width:0;max-width:100%;margin:0;accent-color:var(--yellow)}.tune-row input[type=color]{grid-column:1 / -1;width:100%;height:16px;padding:0;border:0;background:transparent;cursor:pointer}.tune-row input[type=checkbox]{accent-color:var(--yellow);justify-self:start}.tune-val{color:var(--yellow);letter-spacing:0;font-variant-numeric:tabular-nums;-webkit-user-select:text;user-select:text}
