:root{--bg:#15121a;--panel:rgba(28,23,33,.92);--ink:#f3ece0;--muted:#b3a897;--gold:#d4ad55;--stole:#8a5cc0;--led:#ff4a3d;--line:rgba(212,173,85,.28);--font-display:"Jua","Gowun Dodum",system-ui,sans-serif;--font-body:"Gowun Dodum",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color-scheme:dark}[hidden]{display:none!important}html,body{height:100%;margin:0}*{box-sizing:border-box}:root{padding:0}body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;overflow:hidden;-webkit-tap-highlight-color:transparent}#stage{position:fixed;inset:0}#stage canvas{display:block;touch-action:none}.hud{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:calc(env(safe-area-inset-top,0px) + 14px) calc(env(safe-area-inset-bottom,0px) + 16px)}.hud>*{pointer-events:auto}.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}.top>*{pointer-events:auto}.sign{font-family:var(--font-display);line-height:1.25}.sign b{display:block;font-size:20px;letter-spacing:.02em}.sign span{font-size:12.5px;color:var(--muted);font-family:var(--font-body);font-variant-numeric:tabular-nums}.sign .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--led);box-shadow:0 0 8px var(--led);margin-right:6px;vertical-align:1px}.btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}button{font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer}button:hover{border-color:var(--gold)}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}button.primary{background:var(--gold);color:#1d160c;border-color:var(--gold);font-weight:600}.bottom{display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}.bottom>*{pointer-events:auto}.prompt{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px 16px;text-align:center;max-width:min(520px,100%);line-height:1.5}.prompt kbd{font-family:var(--font-body);font-weight:600;border:1px solid var(--gold);color:var(--gold);border-radius:8px;padding:0 6px;margin-right:4px}.hint{font-size:12.5px;color:var(--muted);text-align:center}#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 76px);transform:translate(-50%);max-width:min(460px,calc(100% - 32px));background:#2a1e1e;border:1px solid rgba(255,74,61,.5);border-radius:16px;padding:12px 16px;line-height:1.55;text-align:center;font-size:14px;z-index:20}#roomUi{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:calc(env(safe-area-inset-top,0px) + 14px) calc(env(safe-area-inset-bottom,0px) + 16px)}#roomUi>*{pointer-events:auto}.roomHead{display:flex;flex-direction:column;gap:6px}.roomFoot{display:flex;flex-direction:column;gap:10px}.roomTop{display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none}.roomTop>*{pointer-events:auto}.roomTop .sign b{font-size:17px}.bubble{align-self:center;margin-top:8px;max-width:min(560px,100%);background:#f6efe2;color:#241b14;border-radius:20px;padding:14px 18px;font-family:var(--font-display);font-size:18px;line-height:1.6;position:relative;box-shadow:0 8px 24px #0006;text-wrap:pretty}.bubble:after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-9px;border:9px solid transparent;border-bottom:0;border-top-color:#f6efe2}.bubble{min-height:3.2em}.bubble.safety{background:#fff;border:2px solid #c0392b}.bubble .who{display:block;font-family:var(--font-body);font-size:11.5px;letter-spacing:.08em;color:#7b6250;margin-bottom:2px}.chat{align-self:center;width:min(560px,100%);display:flex;flex-direction:column;gap:8px}.chat .guide{font-size:13px;color:var(--gold);text-align:center}.chat form{display:flex;gap:8px}.chat input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px 14px}.chat input:disabled{opacity:.5}.penance{align-self:center;width:min(360px,100%);border:1px solid var(--gold);border-radius:16px;padding:12px 16px;background:linear-gradient(180deg,#8a5cc038,#1c1721eb);text-align:center}.penance small{display:block;font-size:11.5px;letter-spacing:.14em;color:var(--gold);margin-bottom:4px}.penance p{margin:0;font-family:var(--font-display);font-size:16px;line-height:1.55}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0a080dd1;z-index:30;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px;overflow-y:auto}.card{width:min(480px,100%);background:#1d1823;border:1px solid var(--line);border-radius:24px;padding:28px 24px;display:flex;flex-direction:column;gap:14px;line-height:1.65}.card h1{margin:0;font-family:var(--font-display);font-size:30px;font-weight:700;text-wrap:balance}.card h2{margin:0;font-family:var(--font-display);font-size:22px}.card p{margin:0;color:var(--muted);font-size:14px}.card .notice{border-left:3px solid var(--stole);padding:4px 0 4px 12px;color:var(--ink)}.card .eyebrow{font-size:11.5px;letter-spacing:.16em;color:var(--gold)}.hist{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto}.hist article{border:1px solid var(--line);border-radius:16px;padding:10px 12px}.hist time{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}.hist .q{margin:4px 0;color:var(--ink);font-size:14px}.hist .a{margin:0;font-size:13px;color:var(--gold)}.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .35s;z-index:25}@media (prefers-reduced-motion:reduce){#fade{transition:none}}@media (max-width:520px){.bubble{font-size:16px}.card h1{font-size:26px}}.logo{letter-spacing:.02em}.logo em{font-style:normal;color:var(--gold)}.idleCounter{align-self:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:#1d160c;background:#f2c94c;border-radius:999px;padding:6px 14px;text-align:center}.idleCounter.danger{background:#e5484d;color:#fff;animation:idlePulse 1s ease-in-out infinite}@keyframes idlePulse{50%{opacity:.7}}@media (prefers-reduced-motion:reduce){.idleCounter.danger{animation:none}}#netStatus{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 96px);transform:translate(-50%);max-width:calc(100% - 32px);background:#2b2433;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:8px 16px;font-size:13px;z-index:22;text-align:center}#nameTags{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}.nameTag{position:absolute;left:0;top:0;padding:3px 9px;border-radius:999px;background:#120e16b8;color:#fff3dc;font-size:13px;font-weight:600;white-space:nowrap;border:1px solid rgba(255,243,220,.18)}#nameBtn b{color:var(--gold);font-weight:600}#nameInput{font:inherit;font-size:17px;color:var(--ink);background:#14101a;border:1px solid var(--line);border-radius:16px;padding:10px 12px}.card .rule{font-size:12.5px}.card .error{color:#ff9b8a;font-size:13.5px}#roomUi.legend .sign b{color:#f3d27a;text-shadow:0 0 12px rgba(243,210,122,.6)}#roomUi.legend .penance{border-color:#f3d27a;box-shadow:0 0 28px #f3d27a8c,inset 0 0 18px #f3d27a26;background:linear-gradient(180deg,#f3d27a47,#281e12f0)}#roomUi.legend .penance small{color:#f3d27a}.faceCard{width:min(640px,100%);max-height:calc(100dvh - 32px);overflow:auto}.faceWork{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}#faceGrid{width:min(384px,100%);aspect-ratio:1;image-rendering:pixelated;touch-action:none;cursor:crosshair;border-radius:16px;border:1px solid var(--line)}.faceSide{display:flex;flex-direction:column;gap:8px;align-items:flex-start;flex:1 1 150px;min-width:0}.faceSide small,#faceGalleryWrap small{color:var(--muted);font-size:12px}#facePreview{width:64px;height:64px;border-radius:50%}.swatches{display:flex;gap:6px;flex-wrap:wrap}.swatch{width:34px;height:34px;padding:0;border-radius:8px;background:var(--c);border:2px solid var(--line)}.swatch.eraser{background:repeating-conic-gradient(#3a3340 0 25%,#2a2430 0 50%) 0 0/10px 10px}.swatch[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}.swatch.own{background:var(--c);position:relative}.swatch.own:after{content:"내";position:absolute;inset:auto 2px 1px auto;font-size:10px;color:#fff;text-shadow:0 0 2px #000}.ownRow{display:flex;gap:6px;flex-wrap:wrap;flex-basis:100%}.swatch.addOwn{background:transparent;color:var(--muted);font-size:18px;line-height:1;border-style:dashed}.ownPick{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;padding-left:4px}.ownPick input{width:34px;height:34px;padding:0;border:2px solid var(--line);border-radius:8px;background:none;cursor:pointer}.faceGallery{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.faceThumb{position:relative}.faceThumb button{padding:3px;border-radius:16px;line-height:0}.faceThumb canvas{width:48px;height:48px;image-rendering:pixelated}.faceThumb .del{position:absolute;top:-6px;right:-6px;width:20px;height:20px;padding:0;font-size:13px;line-height:18px;border-radius:50%}.card .check{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--muted)}.brushes{display:flex;gap:6px}.brushes button{padding:6px 10px;font-size:13px}.brushes button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}.nameTag.withFace{pointer-events:auto;cursor:pointer}.nameTag.withFace:after{content:" ✎";color:var(--gold)}.playerMenu{position:fixed;z-index:25;display:flex;flex-direction:column;gap:6px;min-width:170px;padding:12px;background:#1d1823;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 24px #00000073}.playerMenu b{font-size:14px;color:var(--gold)}.playerMenu button{text-align:left}.emoteBar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.emoteBar button{position:relative;overflow:hidden;min-width:74px;padding:8px 14px;background:#1d18238c;border-color:#d4ad5559;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.emoteBar button kbd{font-family:var(--font-body);font-size:10.5px;color:var(--muted);margin-right:6px}.emoteBar button .fill{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--gold)}.emoteBar button:disabled{opacity:.45;cursor:default}.emoteBar button.active{opacity:1;border-color:var(--gold);color:var(--gold)}#inquiryText{font:inherit;font-size:15px;line-height:1.6;color:var(--ink);background:#14101a;border:1px solid var(--line);border-radius:16px;padding:10px 12px;resize:vertical;min-height:120px}.kinds{display:flex;gap:6px;flex-wrap:wrap}.kinds label{display:inline-flex;align-items:center;gap:6px;font-size:14px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer}.kinds input{accent-color:var(--gold);margin:0}.kinds label:has(input:checked){border-color:var(--gold);color:var(--gold)}.chanBtn{display:block;margin-top:6px;font:inherit;font-size:12.5px;color:var(--ink);background:#120e1699;border:1px solid var(--line);border-radius:999px;padding:4px 12px;cursor:pointer}.chanBtn:hover{border-color:var(--gold)}.chanList{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto}.chanRow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:10px 12px}.chanRow b{font-size:15px;min-width:52px}.chanRow.here{border-color:var(--gold)}.chanRow .meter{height:6px;border-radius:3px;background:#ffffff14;overflow:hidden}.chanRow .meter i{display:block;height:100%;background:var(--gold)}.chanRow small{display:block;color:var(--muted);font-size:12px;margin-top:4px;font-variant-numeric:tabular-nums}.chanRow button{font:inherit;font-size:13.5px}.fbBtn{align-self:flex-end;font-size:12.5px;padding:5px 12px;background:#120e1699}#fbText{font:inherit;font-size:15px;line-height:1.6;color:var(--ink);background:#14101a;border:1px solid var(--line);border-radius:16px;padding:10px 12px;resize:vertical}.fbLabel{color:var(--muted);font-size:12px;margin-bottom:-8px}.card .fbAnswer{color:var(--ink);font-size:13.5px;border-left:3px solid var(--line);padding-left:10px;max-height:120px;overflow-y:auto}
