html,body{color:#1b1b1b;background:#5aa9ff;height:100%;margin:0;font-family:Trebuchet MS,system-ui,sans-serif;font-weight:700;overflow:hidden}#app,#app canvas{width:100%;height:100%;display:block}button,input{font:inherit}.btn{color:#1b1b1b;cursor:pointer;background:#ffd23f;border:3px solid #1b1b1b;border-radius:14px;padding:10px 18px;font-size:17px;box-shadow:0 4px #1b1b1b}.btn:hover:not(:disabled){background:#fd6;transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #1b1b1b}.btn:disabled{opacity:.6;cursor:default}.btn-big{width:100%;padding:14px;font-size:22px}.btn-quiet{background:#fffdf5}.field{box-sizing:border-box;background:#fff;border:3px solid #1b1b1b;border-radius:12px;width:100%;padding:10px 14px;font-size:18px}.field.code{text-transform:uppercase;letter-spacing:.3em;text-align:center}.menu{background:#1b1b1b33;place-items:center;padding:16px;display:grid;position:fixed;inset:0;overflow:auto}.menu[hidden]{display:none}.menu-panel{background:#fffdf5;border:4px solid #1b1b1b;border-radius:22px;flex-direction:column;gap:12px;width:min(460px,100%);padding:22px;display:flex;box-shadow:0 8px #1b1b1b}.menu-title{text-align:center;color:#ff5a5f;-webkit-text-stroke:2px #1b1b1b;margin:0;font-size:44px;transform:rotate(-2deg)}.menu-sub{text-align:center;margin:0}.menu-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.menu-row .field{flex:1;min-width:120px}.menu-error{color:#d62828;text-align:center;min-height:1.2em;margin:0}.menu-help summary{cursor:pointer}.controls{border-collapse:collapse;width:100%;font-size:14px}.controls td,.controls th{text-align:left;border-bottom:2px solid #eee4cc;padding:3px 4px}.small{font-size:13px;font-weight:400}.room-code{letter-spacing:.25em;text-align:center;-webkit-user-select:all;user-select:all;font-size:52px}.lobby-list{margin:0;padding:0;list-style:none}.lobby-list li{border:3px solid #1b1b1b;border-left:14px solid var(--player);background:#fff;border-radius:12px;align-items:center;gap:8px;margin:6px 0;padding:8px 12px;display:flex}.tag{color:#fff;background:#1b1b1b;border-radius:8px;padding:1px 8px;font-size:12px}.hud{pointer-events:none;position:fixed;inset:0}.hud-bar{justify-content:center;gap:12px;padding:0 12px;display:flex;position:absolute;bottom:12px;left:0;right:0}.hud-card{background:#fffdf5eb;border:3px solid #1b1b1b;border-radius:16px;align-items:center;gap:8px;min-width:130px;padding:8px 12px;display:flex;box-shadow:0 4px #1b1b1b}.hud-card.me{outline:4px solid var(--player)}.hud-card.out{opacity:.45}.hud-face{background:var(--player);border:3px solid #1b1b1b;border-radius:18px;width:34px;height:44px}.hud-name{font-size:13px}.hud-percent{-webkit-text-stroke:1.5px #1b1b1b;font-size:30px;line-height:1}.hud-percent.shake{animation:.3s shake}.hud-stocks{color:var(--player);-webkit-text-stroke:1px #1b1b1b;letter-spacing:2px}.hud-meter{background:#eee4cc;border:2px solid #1b1b1b;border-radius:6px;height:8px;margin-top:3px;overflow:hidden}.hud-meter-fill{background:#7ccf4a;height:100%}.ult-ready .hud-meter-fill{background:#ffd23f;animation:.6s infinite alternate glow}.ult-ready .hud-name:after{content:" · ULTI!";color:#e0a100}.hud-center{text-align:center;color:#ffd23f;-webkit-text-stroke:4px #1b1b1b;width:100%;font-size:110px;position:absolute;top:28%}.hud-center.pop{animation:.45s ease-out pop}.hud-status{text-align:center;color:#fff;-webkit-text-stroke:1px #1b1b1b;width:100%;font-size:20px;position:absolute;top:14px}.result{background:#fffdf5;border:4px solid #1b1b1b;border-radius:22px;flex-direction:column;align-items:center;gap:14px;width:min(460px,100% - 32px);padding:22px;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px #1b1b1b}.result-title{-webkit-text-stroke:1.5px #1b1b1b;text-align:center;margin:0;font-size:40px}.result-table{border-collapse:collapse;font-size:18px}.result-table td,.result-table th{text-align:center;padding:4px 14px}@keyframes shake{25%{transform:translate(-3px,1px)rotate(-3deg)}50%{transform:translate(3px,-1px)rotate(3deg)}75%{transform:translate(-2px)rotate(-1deg)}}@keyframes pop{0%{opacity:0;transform:scale(2)}to{opacity:1;transform:scale(1)}}@keyframes glow{0%{filter:brightness()}to{filter:brightness(1.4)}}@media (max-width:640px){.hud-card{min-width:0;padding:6px 8px}.hud-face{display:none}.hud-percent{font-size:22px}}
