*{box-sizing:border-box}body{margin:0;font-family:Trebuchet MS,Verdana,sans-serif;background:#2b2340;color:#2b2340}.hidden{display:none!important}.row{display:flex;gap:8px;align-items:center}.row.wrap{flex-wrap:wrap}.hint{font-size:12px;color:#7a7295;font-weight:400}#join{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-start;justify-content:center;background:radial-gradient(circle at 50% 30%,#4a3b73,#2b2340);z-index:30;overflow-y:auto;padding:24px 0}.join-card{background:#fff7dd;border:4px solid #f3c016;border-radius:16px;padding:24px 28px;width:min(440px,92vw);box-shadow:0 12px 40px #00000073}.join-card h1{margin:0 0 4px;color:#6447b0}.tagline{margin:0 0 16px;font-size:14px;color:#55487a}.join-card label{display:block;font-weight:700;font-size:13px;margin:12px 0 4px}.join-card input{width:100%;padding:8px 10px;border:2px solid #c9b8e8;border-radius:8px;font:inherit;background:#fff}.join-card .row input{flex:1}.join-card button{font:inherit;font-weight:700;padding:8px 14px;background:#6447b0;color:#fff;border:none;border-radius:8px;cursor:pointer}.join-card button:hover:not(:disabled){background:#4f3590}.join-card button:disabled{background:#b6abd6;cursor:default}#join-btn{width:100%;margin-top:16px;padding:12px;font-size:16px}.status{min-height:18px;font-size:12px;margin-top:6px}.status.error{color:#c0392b}.status.ok{color:#1e8449}#preview-wrap{display:flex;justify-content:center;margin:12px 0 4px}#preview{width:150px;height:150px;background:#efe6ff;border:2px dashed #c9b8e8;border-radius:12px;display:flex;align-items:center;justify-content:center}#preview canvas{max-width:146px;max-height:146px;width:auto;height:auto;border-radius:12px}.preview-empty{font-size:12px;color:#9a8fc0}.fallback{margin-top:10px}.fallback button{background:#f3c016;color:#4a3b10;padding:6px 10px;font-size:12px;margin-top:6px}.fallback button:hover{background:#ddae08}#stage{position:fixed;top:0;right:0;bottom:0;left:0;display:flex}#game{flex:1;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden}#game canvas{border-radius:8px;max-width:100%;max-height:100%}#sidebar{width:220px;flex-shrink:0;background:#fff7dd;border-left:4px solid #f3c016;padding:14px;overflow-y:auto;display:flex;flex-direction:column}#sidebar h2{margin:0 0 10px;font-size:16px;color:#6447b0}#participants{list-style:none;margin:0;padding:0;flex:1}#participants li{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;cursor:pointer;font-size:13px}#participants li:hover{background:#f4e8bb}#participants li img,#participants li canvas{width:28px;height:28px;border-radius:50%;background:#efe6ff;object-fit:cover}#participants .me{font-weight:700}.controls-help{font-size:11px;color:#7a7295;margin-top:10px;line-height:1.7}#mute-btn{margin-top:8px;font:inherit;font-size:12px;padding:6px 10px;border:none;border-radius:8px;background:#efe6ff;color:#6447b0;cursor:pointer}#mute-btn:hover{background:#e2d3fb}#chat{position:absolute;left:12px;bottom:12px;width:min(340px,40vw);display:flex;flex-direction:column;gap:6px;z-index:10}#messages{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:3px}#messages .msg{background:#fff7ddeb;border-radius:8px;padding:4px 8px;font-size:13px;width:fit-content;max-width:100%}#messages .msg b{color:#6447b0}#messages .sys{font-size:11px;color:#d9cfff;padding:1px 4px}#chat-input{padding:8px 10px;border:2px solid #f3c016;border-radius:10px;font:inherit;background:#fff7ddf2}#emoji-bar{display:flex;gap:4px}#emoji-bar button{font-size:16px;padding:3px 7px;background:#fff7ddeb;border:2px solid #f3c016;border-radius:8px;cursor:pointer}#emoji-bar button:hover{transform:scale(1.15)}#rating{position:absolute;right:240px;bottom:12px;background:#fff7dd;border:3px solid #f3c016;border-radius:14px;padding:10px 14px;z-index:11;box-shadow:0 6px 24px #00000059}#rating span{font-weight:700;font-size:13px;color:#6447b0;display:block;margin-bottom:6px}#rating-buttons{display:flex;gap:4px}#rating-buttons button{width:28px;height:28px;font:inherit;font-size:12px;font-weight:700;background:#efe6ff;color:#6447b0;border:2px solid #c9b8e8;border-radius:8px;cursor:pointer}#rating-buttons button:hover{background:#6447b0;color:#fff}#rating-buttons button.picked{background:#f3c016;border-color:#b8900a;color:#4a3b10}#scores{margin:0;padding-left:20px;font-size:12px;color:#55487a}#scores li{padding:2px 0}#toast{position:absolute;left:50%;bottom:70px;transform:translate(-50%);background:#6447b0;color:#fff;padding:8px 18px;border-radius:999px;font-size:13px;box-shadow:0 4px 16px #00000059;z-index:12;pointer-events:none;transition:opacity .3s}#prompt{position:absolute;left:50%;top:16px;transform:translate(-50%);background:#2b2340e0;color:#ffe89a;padding:6px 16px;border-radius:999px;font-size:13px;z-index:12;pointer-events:none}#modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#140e2699;display:flex;align-items:center;justify-content:center}.modal-card{background:#fff7dd;border:4px solid #f3c016;border-radius:16px;padding:20px 24px;width:min(420px,90vw)}.modal-card h3{margin:0 0 8px;color:#6447b0}.modal-card p{font-size:14px;line-height:1.5}.modal-card .row{justify-content:space-between;margin-top:14px}#modal-link{font-weight:700;color:#6447b0;font-size:14px}#modal-close{font:inherit;padding:6px 12px;border:none;border-radius:8px;background:#6447b0;color:#fff;cursor:pointer}