html,body{color:#fff4e0;background:#0d1330;height:100%;margin:0;font-family:Nunito,system-ui,sans-serif;overflow:hidden}canvas#game{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block;position:fixed;inset:0}#banner{background:#141a33eb;border-radius:14px;align-items:center;gap:12px;padding:10px 16px;font-family:"Baloo 2",system-ui,sans-serif;font-weight:600;display:flex;position:fixed;top:16px;left:50%;transform:translate(-50%)}#banner[hidden]{display:none}#banner button{font:inherit;color:#3a1a06;cursor:pointer;background:linear-gradient(#ffb760,#ff9a3d);border:0;border-radius:10px;padding:6px 12px;box-shadow:0 3px #c8641f}#ui{background:#0d133073;place-items:center;padding:16px;display:grid;position:fixed;inset:0;overflow-y:auto}#ui[hidden]{display:none}.panel{box-sizing:border-box;background:#141a33f2;border-radius:20px;gap:12px;width:min(560px,100%);padding:24px;display:grid;box-shadow:0 12px 40px #00000059}#screen-menu,#screen-create{width:min(380px,100%)}.panel h1{color:#ffb760;text-align:center;margin:0;font:800 48px/1 "Baloo 2",system-ui,sans-serif}.panel h2{margin:0;font:800 28px/1.1 "Baloo 2",system-ui,sans-serif}.panel h3{margin:0;font:800 18px "Baloo 2",system-ui,sans-serif}.sub,.hint{opacity:.75;margin:0;font-size:14px}.panel label{gap:4px;font-weight:700;display:grid}.panel label.check{align-items:center;gap:8px;font-weight:600;display:flex}.panel input:not([type=checkbox]),.panel select{color:#fff4e0;background:#0d1330;border:2px solid #3a4470;border-radius:10px;min-width:0;padding:8px 10px;font:600 16px Nunito,system-ui,sans-serif}.panel select:disabled{opacity:.7}.panel button{color:#fff4e0;cursor:pointer;background:#2c3566;border:0;border-radius:12px;padding:7px 14px;font:700 17px "Baloo 2",system-ui,sans-serif;box-shadow:0 3px #1a2044}.panel button:hover{filter:brightness(1.15)}.panel button.primary{color:#3a1a06;background:linear-gradient(#ffb760,#ff9a3d);font-size:21px;box-shadow:0 4px #c8641f}.row{gap:8px;display:flex}.row input{text-align:center;letter-spacing:4px;text-transform:uppercase;width:92px}.row button{flex:1}.head{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.head h2{flex:1}.code{letter-spacing:4px;color:#ffe066;background:#0d1330;border-radius:10px;padding:0 12px;font:800 26px "Baloo 2",system-ui,sans-serif}.teams{grid-template-columns:1fr 1fr;gap:12px;display:grid}.team{border:2px dashed #0000;border-radius:14px;align-content:start;gap:8px;min-height:150px;padding:10px;display:grid}.team.red{background:#e8574a2e}.team.blue{background:#4a7de82e}.team.red h3{color:#ff8a7e}.team.blue h3{color:#8eb0ff}.team.over{border-color:#ffe066}.team ul,ul.rooms{gap:6px;margin:0;padding:0;list-style:none;display:grid}.team li,ul.rooms li{background:#0d133099;border:2px solid #0000;border-radius:10px;align-items:center;gap:6px;min-width:0;padding:6px 8px;display:flex}.team li[draggable=true]{cursor:grab}.team li.me{border-color:#fff4e080}.team li.over{border-color:#ffe066}.team li.dragging{opacity:.4}.role{color:#1b2133;background:#fff4e0;border-radius:6px;padding:0 6px;font:800 12px "Baloo 2",system-ui,sans-serif}.pname{text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:800;overflow:hidden}.rname{opacity:.7;font-size:12px}.tag{background:#2c3566;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:800}.roles{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.roles button{padding:6px 4px;font-size:14px}.roles button.on{color:#1b2133;background:#ffe066;box-shadow:0 3px #b89a2a}.settings{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;display:grid}ul.rooms{max-height:320px;overflow-y:auto}ul.rooms li.empty{opacity:.7;justify-content:center}.shake{animation:.3s shake;border-color:#e8574a!important}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}@media (max-width:520px){.teams,.roles{grid-template-columns:1fr 1fr}.rname{display:none}}.panel select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23FFB760' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;padding-right:36px}.panel select:disabled{cursor:default;background-image:none;padding-right:10px}.panel select:focus-visible,.panel input:focus-visible{border-color:#ffb760;outline:none}.panel input[type=checkbox]{appearance:none;cursor:pointer;background:#0d1330;border:2px solid #3a4470;border-radius:8px;flex:none;place-items:center;width:24px;height:24px;margin:0;transition:background .12s,border-color .12s;display:grid}.panel input[type=checkbox]:after{content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1.5 4.5 4.5 7.5 10.5 1.5' fill='none' stroke='%233A1A06' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% no-repeat;width:12px;height:9px;transition:transform .12s;transform:scale(0)}.panel input[type=checkbox]:checked{background:linear-gradient(#ffb760,#ff9a3d);border-color:#c8641f}.panel input[type=checkbox]:checked:after{transform:scale(1)}.panel input[type=checkbox]:disabled{opacity:.6;cursor:default}.panel input[type=checkbox]:focus-visible{border-color:#ffe066}.panel label.check{cursor:pointer}.notice{background:#e8574a2e;border:2px solid #e8574a;border-radius:12px;margin:0;padding:10px 12px;font-size:14px;font-weight:700}