:root{color:#2b211d;background:#e7f4ee;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px}button{border:0;border-radius:8px;color:#fffaf5;background:#4a2a22;box-shadow:0 12px 26px #44282238;cursor:pointer;font:inherit;font-weight:800;min-height:44px;padding:0 22px}button:hover{background:#5a3429}button:active{transform:translateY(1px)}input{width:100%;min-height:44px;border:1px solid rgb(74 42 34 / 20%);border-radius:8px;background:#fffdf8;color:#2b211d;font:inherit;font-weight:900;letter-spacing:0;padding:0 12px;text-transform:uppercase}#game-canvas{display:block;width:100vw;height:100vh;outline:none}.hud{position:fixed;z-index:5;display:flex;gap:10px;pointer-events:none}.hud-top{top:14px;right:14px;left:14px;align-items:center;justify-content:space-between}.hud-bottom{right:14px;bottom:14px;left:14px;align-items:flex-end;justify-content:center}.brand,.hud-pill,.status-card{border:1px solid rgb(88 57 42 / 16%);border-radius:8px;background:#fffdf8db;box-shadow:0 12px 30px #3b2b231f;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:9px;height:42px;padding:0 13px;font-weight:900}.brand-mark{width:20px;height:20px;border:4px solid #4a2a22;border-radius:50%;background:linear-gradient(90deg,#fffdfa 0,#fffdfa 48%,#bd8161 52%,#bd8161)}.hud-pill{display:flex;align-items:center;justify-content:center;min-width:78px;min-height:42px;padding:0 14px;font-size:14px;font-weight:800}#objective{max-width:min(56vw,620px);text-align:center}.status-card{display:grid;grid-template-columns:18px auto auto 82px;align-items:center;gap:8px;min-width:260px;height:48px;padding:0 12px;font-size:13px;font-weight:800}.status-card .avatar-dot{width:18px;height:18px;border:3px solid #4a2a22;border-radius:50%}.bubu-card .avatar-dot{background:#fffdfa}.dudu-card .avatar-dot{background:#bd8161}.meter{width:82px;height:8px;overflow:hidden;border-radius:999px;background:#4a2a221f}.meter span{display:block;width:100%;height:100%;border-radius:inherit;background:#71ba8c;box-shadow:0 0 12px #71ba8c6b;transform-origin:left center;transition:transform .12s ease,background .14s ease,box-shadow .14s ease}.menu,.result{position:fixed;z-index:10;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 38%,rgb(255 255 255 / 58%),transparent 42%),#e4f4ea8f;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.menu[hidden],.result[hidden]{display:none}.menu-panel,.result-panel{display:grid;justify-items:center;gap:16px;width:min(520px,100%);border:1px solid rgb(88 57 42 / 16%);border-radius:8px;background:#fffdf8eb;box-shadow:0 26px 70px #3b2b232e;padding:26px;text-align:center}.menu-title,.result-title{color:#39251e;font-size:28px;font-weight:950;line-height:1.08}.menu-subtitle,.result-kicker,.result-meta{color:#7c655c;font-size:13px;font-weight:900;text-transform:uppercase}.character-select{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}.level-select{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}.character-option{display:grid;grid-template-columns:46px auto;align-items:center;justify-items:start;min-height:72px;border:2px solid transparent;background:#fffaf3;color:#39251e;box-shadow:none;padding:10px 12px}.character-option.selected{border-color:#4a2a22;background:#f4eadf}.level-option{display:grid;align-content:center;gap:4px;min-height:58px;border:2px solid transparent;background:#fffaf3;color:#39251e;box-shadow:none;padding:8px 10px}.level-option span{color:#7c655c;font-size:11px;font-weight:950;text-transform:uppercase}.level-option strong{overflow:hidden;font-size:13px;line-height:1.05;text-overflow:ellipsis;white-space:nowrap}.level-option.selected{border-color:#4a2a22;background:#f4eadf}.character-face{position:relative;width:42px;height:42px;border:4px solid #4a2a22;border-radius:48% 48% 44% 44%}.character-face:before,.character-face:after{position:absolute;top:16px;width:5px;height:5px;border-radius:50%;background:#4a2a22;content:""}.character-face:before{left:12px}.character-face:after{right:12px}.bubu-face{background:radial-gradient(circle at 28% 68%,#ffb2a5 0 18%,transparent 19%),radial-gradient(circle at 72% 68%,#ffb2a5 0 18%,transparent 19%),#fffdf8}.dudu-face{background:radial-gradient(circle at 28% 68%,#ffc86e 0 18%,transparent 19%),radial-gradient(circle at 72% 68%,#ffc86e 0 18%,transparent 19%),#c98764}.room-actions{display:grid;gap:10px;width:100%}.join-row{display:grid;grid-template-columns:1fr auto;gap:10px;width:100%}.room-output{display:flex;align-items:center;gap:10px;min-height:42px;border:1px solid rgb(74 42 34 / 14%);border-radius:8px;background:#f7efe4;padding:0 14px;font-size:14px;font-weight:900}.room-output[hidden],.menu-error[hidden]{display:none}.menu-error{width:100%;border:1px solid rgb(177 76 70 / 26%);border-radius:8px;background:#fff0ed;color:#803b31;font-size:13px;font-weight:800;padding:10px 12px}.touch-controls{position:fixed;z-index:6;right:18px;bottom:82px;left:18px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.touch-controls[hidden]{display:none}.move-stick{position:relative;width:124px;height:124px;border:1px solid rgb(74 42 34 / 15%);border-radius:50%;background:#fffdf87a;box-shadow:0 18px 42px #3b2b2324;pointer-events:auto;touch-action:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .16s ease,transform .16s ease}.move-stick:active{background:#fffdf89e;transform:scale(1.015)}.move-knob{position:absolute;top:37px;left:37px;width:50px;height:50px;border:4px solid #4a2a22;border-radius:50%;background:#fffdf8;box-shadow:0 10px 22px #3b2b232e;transition:box-shadow .14s ease}.action-cluster{display:flex;align-items:center;gap:12px;pointer-events:auto}.touch-button{position:relative;width:68px;height:68px;min-height:68px;border:1px solid rgb(74 42 34 / 18%);border-radius:50%;background:#fffdf8c2;box-shadow:0 18px 42px #3b2b2329;padding:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .16s ease,box-shadow .16s ease,transform .12s ease}.touch-button:active{background:#fffdf8eb;box-shadow:0 10px 26px #3b2b232e;transform:translateY(1px) scale(.985)}.ability-button:before{position:absolute;top:18px;right:18px;bottom:18px;left:18px;border:4px solid #64bddc;border-radius:50%;box-shadow:0 0 0 6px #64bddc2e;content:"";animation:ability-ready 1.6s ease-in-out infinite}.ability-button:after{position:absolute;top:21px;left:25px;width:18px;height:18px;border-top:4px solid #64bddc;border-left:4px solid #64bddc;content:"";transform:rotate(45deg)}.player-dudu .ability-button:before{border-color:#efb842;box-shadow:0 0 0 6px #efb84233;animation-name:ability-ready-dudu}.player-dudu .ability-button:after{border-color:#efb842}.interact-button:before,.interact-button:after{position:absolute;border-radius:999px;background:#4a2a22;content:""}.interact-button:before{top:18px;left:30px;width:8px;height:24px}.interact-button:after{right:22px;bottom:18px;left:22px;height:8px}@keyframes ability-ready{0%,to{box-shadow:0 0 0 5px #64bddc24}50%{box-shadow:0 0 0 9px #64bddc3d}}@keyframes ability-ready-dudu{0%,to{box-shadow:0 0 0 5px #efb84224}50%{box-shadow:0 0 0 9px #efb8423d}}@media (max-width: 720px){.hud-top{display:grid;grid-template-columns:1fr auto}#objective{grid-column:1 / -1;order:3;max-width:none;min-height:38px}.hud-bottom{display:grid;grid-template-columns:1fr;bottom:12px}.status-card{width:min(100%,360px);min-width:0}.menu-panel,.result-panel{padding:20px}.character-select,.level-select,.join-row{grid-template-columns:1fr}.touch-controls{bottom:126px}.move-stick{width:108px;height:108px}.move-knob{top:32px;left:32px;width:44px;height:44px}.touch-button{width:58px;height:58px;min-height:58px}}