@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
/* The physical question board is the desktop focal point. Keep an accessible
   HUD for face inspection and for narrow screens where the board can crop. */
@media(min-width:801px){body:not(.face) #question{opacity:0;pointer-events:none}}
:root{font-family:'Noto Sans KR',sans-serif;color:#494d40;background:#e4eddf;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #fff9;background:#fffefa;box-shadow:0 5px 14px #425e4210;border-radius:18px;min-height:46px;padding:0 18px;font-weight:700}button:hover{background:#f1f5e7}button:focus-visible{outline:3px solid #4d8c72;outline-offset:3px}button[aria-pressed=true]{background:#dae9d5}canvas{display:block;width:100vw;height:100dvh;touch-action:none}header{position:fixed;top:max(23px,env(safe-area-inset-top));left:30px;right:30px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}header>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-size:21px;font-weight:800;letter-spacing:-1px}.brand small{display:block;font-size:10px;letter-spacing:1px;font-weight:500;margin-top:3px;color:#71806d}.logo{font-family:'Jua',sans-serif;font-size:32px;color:#5d9c83;white-space:nowrap}.logo span{color:#d18f7e}.top{display:flex;align-items:center;gap:12px}.badge{padding:8px 12px;background:#fff9;border-radius:30px;font-size:11px;color:#76816d}.top button{font-size:12px;min-height:40px}#question{position:fixed;width:420px;left:50%;top:28px;transform:translateX(-50%);background:#fffdf5f2;padding:18px 25px 13px;border:1px solid #fff;border-radius:22px;box-shadow:0 8px 35px #4a654418;backdrop-filter:blur(10px);text-align:center}.eyebrow{font-size:10px;color:#89917e;letter-spacing:2px}h1{font-family:'Jua',sans-serif;font-size:27px;font-weight:400;margin:10px 0;color:#514d43;line-height:1.3}.question-bottom{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#8a8d7d}.timer{color:#60816d;display:flex;align-items:center;gap:3px}.timer>span{font-size:21px;font-weight:800}.timer small{font-size:10px}.progress{height:3px;background:#e9eddf;margin-top:9px;overflow:hidden;border-radius:3px}.progress i{display:block;height:100%;background:#83ae95;transition:width .2s linear}#note{position:fixed;right:28px;bottom:100px;color:#6a7866;font-size:10px;background:#fff9;padding:8px 12px;border-radius:15px}footer{position:fixed;left:30px;right:30px;bottom:max(24px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:16px}.help{font-size:11px;color:#5f705a;background:#fff9;padding:12px 16px;border-radius:14px;backdrop-filter:blur(6px)}kbd{font:inherit;font-weight:700}.help span{margin:0 7px;opacity:.4}.actions{display:flex;gap:8px}.actions button{font-size:15px}.actions button span{font-size:12px;margin-left:5px}#toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,10px);opacity:0;transition:opacity .2s,transform .2s;background:#fffdf5ed;border:1px solid white;border-radius:20px;padding:12px 23px;font-size:13px;pointer-events:none;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}#loading{position:fixed;inset:0;background:#e8eedf;display:grid;place-content:center;font-family:Jua,sans-serif;font-size:24px;transition:opacity .4s}#loading.done{opacity:0;pointer-events:none}#joystick{display:none;position:fixed;left:27px;bottom:90px;width:100px;height:100px;border-radius:50%;background:#fff6;border:2px solid #fff8;touch-action:none}#stick{position:absolute;width:42px;height:42px;left:27px;top:27px;border-radius:50%;background:#fffdfa;box-shadow:0 3px 12px #51694a22;pointer-events:none}@media(max-width:800px){header{left:18px;right:18px;top:max(15px,env(safe-area-inset-top))}.brand{font-size:17px}.brand small{display:none}.logo{font-size:28px}.badge{display:none}.top button{min-height:40px;padding:0 12px}#question{top:76px;width:min(350px,calc(100% - 32px));padding:13px 20px 10px}h1{font-size:23px}.eyebrow{font-size:9px}.help{display:none}footer{left:18px;right:18px;justify-content:flex-end;bottom:max(18px,env(safe-area-inset-bottom))}.actions{gap:6px}.actions button{padding:0 12px;min-height:46px}.actions button span{font-size:11px}#note{right:18px;bottom:76px;font-size:9px}#toast{bottom:140px;font-size:12px;max-width:90%;white-space:normal;text-align:center}#joystick{display:block}}
.brand{padding:8px 13px;background:#fffdf2c9;border:1px solid #fff9;border-radius:20px;backdrop-filter:blur(8px)}@media(max-width:800px){.brand{padding:7px 10px}#question .eyebrow{display:none}#question{padding:10px 16px}#question h1{font-size:21px;margin:5px 0}}
#participation{position:fixed;left:30px;bottom:88px;display:flex;gap:12px;align-items:center;background:#fffdf2e8;border:1px solid #fff;border-radius:19px;padding:5px 5px 5px 15px;box-shadow:0 4px 16px #43554012}#participationState{font-size:11px;color:#79866e}#participate{font-size:12px;min-height:44px;background:#e8efdf;box-shadow:none;padding:0 14px}#participate:disabled{opacity:.65;cursor:default}@media(max-width:800px){#participation{left:auto;right:18px;bottom:108px;gap:8px;padding-left:12px}#participationState{font-size:10px}#participate{font-size:11px;padding:0 11px}}