:root{--ink:#111;--paper:#fff;--muted:#555;--board:#4f9a2c;--book:#7b2cff;--no:#d92b2b;--on-dark:#fff;--on-dark-muted:#9a9a9a;--scrawl:"Nanum Pen Script", "Gaegu", cursive;--hand:"Gaegu", "Nanum Pen Script", cursive;--mono:ui-monospace, "SF Mono", monospace;--wobble:255px 15px 225px 15px / 15px 225px 15px 255px}html,body{height:100%;color:var(--on-dark);font:16px/1.4 var(--hand);background:#000;margin:0;overflow:hidden}button{font:inherit;cursor:pointer}body{--strip:150px;display:flex}body[data-cam=m]{--strip:25vw}body[data-cam=l]{--strip:40vw}#stage{height:100vh;width:min(calc(100vh * 550 / 400), calc(100vw - var(--strip)));flex:none;position:relative}#game,#game>*{width:100%;height:100%}#side{min-width:var(--strip);background:#000;flex-direction:column;flex:1;gap:10px;padding:12px 10px;display:flex;overflow:auto}.camwrap{aspect-ratio:4/3;border:2px solid var(--on-dark);border-radius:var(--wobble);flex:none;width:100%;max-width:240px;position:relative;overflow:hidden}#cam,#skel{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.status{min-height:3em;font:clamp(22px, 1.9vw, 30px)/1.15 var(--scrawl);color:var(--on-dark);word-break:keep-all;margin:0}.reconnect{border:2px solid var(--on-dark);border-radius:var(--wobble);color:var(--on-dark);font:20px var(--scrawl);background:0 0;align-self:flex-start;padding:4px 14px}.reconnect[hidden]{display:none}body[data-cam=m] .camwrap,body[data-cam=l] .camwrap{max-width:none}#stage{align-self:center}.cam-size{font:20px var(--scrawl);color:var(--on-dark-muted);flex-wrap:wrap;align-items:center;gap:2px 4px;display:flex}.cam-size span:first-child{color:var(--on-dark);margin-right:4px}.cam-size button{color:inherit;background:0 0;border:0;padding:0 2px}.cam-size button:hover{color:var(--on-dark)}.cam-size button[aria-pressed=true]{color:var(--on-dark);text-underline-offset:4px;-webkit-text-decoration:underline wavy;text-decoration:underline wavy}#side .lang-toggle{margin-top:auto}.credit{color:var(--on-dark-muted);word-break:keep-all;margin:0;font-size:13px;line-height:1.3}#details{flex-direction:column;gap:6px;display:flex}#details[hidden]{display:none}.buttons{flex-wrap:wrap;gap:6px;display:flex}.buttons button{border:1px solid var(--on-dark-muted);color:var(--on-dark);font:12px var(--mono);background:0 0;border-radius:4px;padding:2px 10px}#stats{font:11px/1.4 var(--mono);white-space:pre;color:var(--on-dark-muted);margin:0}#log{max-height:160px;font:10px/1.4 var(--mono);color:var(--on-dark-muted);margin:0;padding-left:18px;overflow:auto}.dhint{font:11px var(--mono);color:var(--on-dark-muted);margin:0}.lang-toggle{font:20px var(--scrawl);color:var(--on-dark-muted);align-items:center;gap:2px;display:flex}.lang-toggle button{color:inherit;background:0 0;border:0;padding:0 4px}.lang-toggle button[aria-pressed=true]{color:var(--on-dark);text-underline-offset:4px;-webkit-text-decoration:underline wavy;text-decoration:underline wavy}.i18n-empty{display:none}.intro{background:var(--paper);color:var(--ink);place-items:center;padding:40px 32px;display:grid;position:fixed;inset:0;overflow:auto}.intro[hidden]{display:none}.intro .intro-lang{color:#999;position:absolute;top:14px;right:24px}.intro .intro-lang button[aria-pressed=true]{color:var(--ink)}.intro .card{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:56px;width:min(1100px,100%);display:grid}.art-wrap{position:relative}.title-art{border:3px solid var(--ink);border-radius:var(--wobble);background:var(--paper);margin:0;overflow:hidden;transform:rotate(-1deg)}.title-art img{width:100%;height:auto;display:block}.title-tag{text-align:right;font:clamp(40px, 4.4vw, 64px)/1 var(--scrawl);color:var(--ink);margin:6px 12px 0 0;animation:2.4s ease-in-out infinite wiggle;transform:rotate(-5deg)}.intro .rule{font:clamp(34px, 3.2vw, 46px)/1.15 var(--scrawl);color:var(--ink);word-break:keep-all;margin:0 0 14px}.intro .rule b{font-weight:inherit;color:var(--board)}.intro .rule b+b,.intro .rule b:last-of-type{color:var(--no)}.intro .kn{color:var(--muted);margin:0 0 10px;font-size:18px}.intro .need{color:var(--ink);word-break:keep-all;margin:0 0 26px;font-size:19px;line-height:1.35}#ready{border:3px solid var(--ink);border-radius:var(--wobble);background:var(--ink);color:var(--paper);font:30px var(--scrawl);padding:8px 28px 10px;transition:transform .12s;transform:rotate(-1.5deg)}#ready:hover{transform:rotate(1deg)scale(1.03)}#ready:active{transform:rotate(0)scale(.97)}.intro .privacy{color:var(--muted);margin:14px 0 0;font-size:16px}.gate{background:var(--paper);color:var(--ink);text-align:center;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.gate[hidden]{display:none}.gate .card{max-width:380px}.gate .title-art{max-width:280px;margin:0 auto 24px}.gate-title{font:36px/1.1 var(--scrawl);word-break:keep-all;margin:0 0 10px}.gate-body{word-break:keep-all;margin:0 0 22px;font-size:18px;line-height:1.4}#copyLink{border:3px solid var(--ink);border-radius:var(--wobble);background:var(--ink);color:var(--paper);font:26px var(--scrawl);padding:6px 24px 8px;transition:transform .12s}#copyLink:hover{transform:rotate(-1deg)scale(1.03)}#copyLink:active{transform:scale(.97)}body.phone #stage,body.phone #side,body.phone #intro,body.phone #calib{display:none}.calib{background:#000;position:fixed;inset:0}.calib[hidden]{display:none}.bigcam{aspect-ratio:4/3;width:min(100vw,133.333vh);margin:auto;position:absolute;inset:0}#bigcam,#bigskel{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.step{z-index:1;border:2px solid var(--ink);border-radius:var(--wobble);background:var(--paper);color:var(--ink);font:22px var(--scrawl);margin:0;padding:2px 14px 4px;position:absolute;top:20px;left:20px;transform:rotate(-2deg)}.banner{border:3px solid var(--ink);border-radius:var(--wobble);background:var(--paper);width:max-content;max-width:min(90vw,900px);color:var(--ink);font:clamp(34px, 3.6vw, 54px)/1.1 var(--scrawl);text-align:center;word-break:keep-all;margin:0;padding:8px 28px 12px;position:absolute;top:72px;left:50%;transform:translate(-50%)rotate(-1deg)}.banner:empty{display:none}.banner.is-error{color:var(--no);border-color:var(--no)}.framing{gap:12px;margin:0;padding:0;list-style:none;display:flex;position:absolute;bottom:28px;left:50%;transform:translate(-50%)}.framing[hidden]{display:none}.framing li{border:3px solid var(--no);border-radius:var(--wobble);background:var(--paper);color:var(--no);font:clamp(28px, 2.6vw, 40px) var(--scrawl);padding:2px 18px 4px}.framing li:nth-child(2){transform:rotate(1.5deg)}.framing li:nth-child(3){transform:rotate(-1.5deg)}.framing li:before{content:"✕ "}.framing li.ok{border-color:var(--board);color:var(--board)}.framing li.ok:before{content:"✓ "}.startbtn{border:3px solid var(--ink);border-radius:var(--wobble);background:var(--paper);color:var(--ink);font:32px var(--scrawl);padding:6px 28px 8px;position:absolute;top:55%;left:50%;transform:translate(-50%,-50%)rotate(-1.5deg)}.startbtn[hidden]{display:none}.startbtn:hover{transform:translate(-50%,-50%)rotate(1deg)scale(1.03)}.startbtn:active{transform:translate(-50%,-50%)scale(.97)}.reconnect:hover{transform:rotate(-1deg)}.lang-toggle button:hover{color:var(--on-dark)}.intro .intro-lang button:hover{color:var(--ink)}button:focus-visible{outline:3px dashed var(--book);outline-offset:4px}@keyframes wiggle{0%,to{transform:rotate(-5deg)}50%{transform:rotate(-2deg)}}@media (width<=860px){.intro .card{grid-template-columns:1fr;gap:28px}}@media (prefers-reduced-motion:reduce){.title-tag{animation:none}}
