*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:#0a0a0a;color:#e0e0e0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;user-select:none;overflow:hidden}body{font-size:14px}button{font-family:inherit;cursor:pointer}input{font-family:inherit}canvas{display:block}#app{position:fixed;inset:0}#toast-host{position:fixed;top:12px;left:50%;transform:translate(-50%);z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:6px;align-items:center}.toast{background:#141414eb;border:1px solid #444;padding:8px 14px;border-radius:6px;font-size:13px;color:#ddd;box-shadow:0 4px 14px #0009;animation:toast-in .2s ease-out,toast-out .4s ease-in 2.4s forwards}.toast.error{border-color:#dc143c;color:#ff8a96}.toast.success{border-color:#2e8b57;color:#98fb98}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-out{to{opacity:0;transform:translateY(-8px)}}.login-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 10%,rgba(140,0,0,.4),transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(0,60,0,.3),transparent 60%),linear-gradient(180deg,#0a0a0a,#1a0a0a);display:flex;align-items:center;justify-content:center}.login-card{width:360px;background:#0f0f12f2;border:1px solid #2a2a2a;border-radius:10px;padding:28px 28px 24px;box-shadow:0 10px 40px #000c,inset 0 1px #ffffff0d}.login-logo{font-family:Courier New,monospace;font-size:32px;font-weight:700;letter-spacing:6px;color:#dc143c;text-align:center;text-shadow:0 0 8px rgba(220,20,60,.6);margin:0 0 4px}.login-sub{text-align:center;color:#888;font-size:11px;letter-spacing:2px;margin-bottom:22px}.tabs{display:flex;margin-bottom:18px;border-bottom:1px solid #2a2a2a}.tabs button{flex:1;background:transparent;border:none;padding:10px 0;color:#888;font-size:13px;font-weight:600;letter-spacing:1px;border-bottom:2px solid transparent;text-transform:uppercase}.tabs button.active{color:#dc143c;border-bottom-color:#dc143c}.field{margin-bottom:14px}.field label{display:block;font-size:11px;color:#999;letter-spacing:1px;margin-bottom:4px;text-transform:uppercase}.field input{width:100%;padding:10px 12px;border:1px solid #333;background:#0d0d10;color:#e0e0e0;border-radius:4px;font-size:14px}.field input:focus{outline:none;border-color:#dc143c}.submit-btn{width:100%;padding:11px;margin-top:6px;background:linear-gradient(180deg,#c41e3a,#8b0000);border:1px solid #5a0000;color:#fff;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:13px;border-radius:4px;transition:filter .1s}.submit-btn:hover{filter:brightness(1.15)}.submit-btn:disabled{opacity:.5;cursor:not-allowed}#auth-error{color:#ff8a96;font-size:12px;min-height:16px;margin-top:10px;text-align:center}.hint{color:#555;font-size:11px;text-align:center;margin-top:16px}.demo-divider{display:flex;align-items:center;gap:10px;margin:18px 0 12px;color:#555;font-size:11px}.demo-divider:before,.demo-divider:after{content:"";flex:1;height:1px;background:#333}.demo-btn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;background:linear-gradient(180deg,#2a2a2a,#181818);border:1px solid #444;border-left:4px solid #ffd166;color:#e0e0e0;border-radius:4px;cursor:pointer;text-align:left;transition:filter .1s,border-color .1s}.demo-btn:hover:not(:disabled){filter:brightness(1.2);border-color:#ffd166}.demo-btn:disabled{opacity:.5;cursor:not-allowed}.demo-btn .demo-ico{font-size:18px;color:#ffd166;width:24px;text-align:center}.demo-btn .demo-text{display:flex;flex-direction:column;gap:2px}.demo-btn .demo-title{font-weight:700;font-size:14px;letter-spacing:.5px}.demo-btn .demo-sub{color:#999;font-size:11px}.hud{position:absolute;pointer-events:none;color:#e0e0e0;font-size:12px;text-shadow:0 1px 2px rgba(0,0,0,.9)}.hud.tl{top:12px;left:12px}.hud.tr{top:12px;right:12px;text-align:right}.hud.bl{bottom:56px;left:12px}.bars{display:flex;flex-direction:column;gap:6px}.bar{display:grid;grid-template-columns:18px 1fr 36px;align-items:center;gap:6px;background:#0000008c;border:1px solid #333;padding:3px 6px;border-radius:3px;min-width:180px}.bar .icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-weight:700}.bar .track{height:10px;background:#222;border-radius:2px;overflow:hidden}.bar .fill{height:100%;transition:width .2s linear}.bar .val{font-family:Courier New,monospace;font-size:11px;text-align:right;color:#ddd}.actionbar{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;gap:4px;pointer-events:auto}.slot{width:50px;height:50px;background:#000000a6;border:2px solid #444;border-radius:4px;display:flex;align-items:center;justify-content:center;position:relative;color:#ddd;font-weight:700;cursor:pointer}.slot.active{border-color:#dc143c;box-shadow:0 0 8px #dc143c99}.slot .key{position:absolute;top:2px;left:4px;font-size:9px;color:#888;font-weight:400}.slot .glyph{font-size:24px;line-height:1}.slot .count{position:absolute;bottom:2px;right:4px;font-size:10px;color:#aaa}.slot.empty{color:#555}.minimap{position:absolute;bottom:12px;right:12px;width:160px;height:160px;background:#000000b3;border:1px solid #444;border-radius:4px}.time-panel{background:#0000008c;border:1px solid #333;padding:6px 10px;border-radius:3px;display:inline-block}.time-panel .clock{font-family:Courier New,monospace;font-size:14px}.time-panel .day{font-size:11px;color:#aaa}.panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0f0f12f5;border:1px solid #333;border-radius:8px;padding:16px;box-shadow:0 8px 40px #000c;pointer-events:auto;min-width:420px;max-height:80vh;overflow:auto;z-index:50}.panel h2{margin:0 0 12px;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:#dc143c}.panel .close{position:absolute;top:10px;right:14px;background:none;border:none;color:#888;font-size:16px}.panel .close:hover{color:#dc143c}.inv-grid{display:grid;grid-template-columns:repeat(4,56px);gap:6px}.inv-slot{width:56px;height:56px;background:#0a0a0a;border:1px solid #333;border-radius:3px;display:flex;align-items:center;justify-content:center;position:relative;font-size:22px;color:#ddd;cursor:pointer}.inv-slot.dragover{border-color:#dc143c;background:#dc143c1a}.inv-slot .count{position:absolute;bottom:2px;right:4px;font-size:10px;color:#aaa}.inv-slot .dur{position:absolute;bottom:2px;left:4px;font-size:10px;color:#777}.inv-slot.empty{color:#555}.inv-row{margin-bottom:16px}.inv-row .label{font-size:11px;color:#888;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}.tooltip{position:absolute;background:#000000f2;border:1px solid #444;padding:8px 10px;border-radius:4px;font-size:12px;pointer-events:none;z-index:200;min-width:140px;max-width:240px}.tooltip .name{color:#fff;font-weight:700;margin-bottom:4px}.tooltip .meta{color:#aaa;font-size:11px}.recipe-list{display:flex;flex-direction:column;gap:6px}.recipe{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;background:#0006;border:1px solid #2a2a2a;padding:8px 10px;border-radius:3px;cursor:pointer}.recipe:hover{border-color:#555}.recipe.disabled{opacity:.5;cursor:not-allowed}.recipe .ico{font-size:22px;text-align:center}.recipe .ingredients{font-size:11px;color:#aaa}.recipe .missing{color:#ff8a96}.recipe button{background:#2e8b57;color:#fff;border:0;padding:4px 10px;border-radius:3px;font-size:11px}.recipe button:disabled{background:#333;color:#888}.progress{height:4px;background:#222;border-radius:2px;overflow:hidden;margin-top:8px}.progress>.fill{height:100%;background:#2e8b57;width:0;transition:width .05s linear}.build-palette{display:flex;gap:6px;flex-wrap:wrap}.build-tile{width:56px;height:56px;border:1px solid #444;background:#0a0a0a;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#aaa;flex-direction:column;cursor:pointer}.build-tile.selected{border-color:#dc143c;background:#dc143c26;color:#fff}.build-tile .ico{font-size:22px;margin-bottom:2px}.overlay{position:absolute;inset:0;background:#50000099;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:100}.overlay h1{color:#fff;font-size:48px;letter-spacing:8px;margin:0;text-shadow:0 0 16px rgba(220,20,60,.8)}.overlay p{color:#ddd;margin:12px 0 24px}.overlay button{padding:10px 20px;background:#dc143c;color:#fff;border:0;border-radius:4px;font-weight:700}.dmg-flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,rgba(180,0,0,.5) 100%);opacity:0;transition:opacity .15s;z-index:80}.dmg-flash.show{opacity:1}.server-browser{width:min(900px,96vw);max-height:86vh;background:#0f0f12f5;border:1px solid #2a2a2a;border-radius:10px;padding:0;box-shadow:0 10px 40px #000c;overflow:hidden;display:flex;flex-direction:column}.sb-header{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:linear-gradient(180deg,#1a1018,#0a0a10);border-bottom:1px solid #2a2a2a}.sb-logo{font-family:Courier New,monospace;font-size:24px;font-weight:700;color:#dc143c;letter-spacing:5px}.sb-user{color:#aaa;font-size:13px}.logout-btn{background:none;border:0;color:#aaa;text-decoration:underline;cursor:pointer}.logout-btn:hover{color:#dc143c}.sb-card{padding:18px 22px 22px;overflow:auto}.list-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px}.list-toolbar button{background:#1a1a1a;color:#ccc;border:1px solid #333;padding:6px 14px;border-radius:3px;cursor:pointer}.list-toolbar button:hover{border-color:#555}.lobby-list{display:flex;flex-direction:column;gap:6px}.lobby-row{display:grid;grid-template-columns:1fr 1fr auto auto;gap:12px;align-items:center;background:#0d0d10;border:1px solid #2a2a2a;padding:10px 14px;border-radius:4px;cursor:pointer}.lobby-row:hover{border-color:#dc143c}.lobby-row-demo{border-color:#ffd166;background:linear-gradient(90deg,#1a1612,#0d0d10 60%);position:relative}.lobby-row-demo:before{content:"▶";position:absolute;left:-10px;top:50%;transform:translateY(-50%);color:#ffd166;font-size:14px}.lobby-row-demo:hover{border-color:#ffd166}.badge-demo{background:#ffd166;color:#1a1612;font-size:9px;padding:1px 5px;margin-left:6px;border-radius:2px;letter-spacing:.5px;vertical-align:middle}.lobby-name{color:#fff;font-weight:700;font-size:14px}.lobby-meta{display:flex;gap:8px;align-items:center;font-size:12px;color:#aaa}.lobby-code{font-family:Courier New,monospace;color:#98fb98;background:#0a0a0a;padding:2px 6px;border-radius:2px;font-size:11px}.lobby-host{color:#888;font-size:11px}.lobby-count{color:#98fb98;font-family:Courier New,monospace}.status{font-size:11px;padding:2px 8px;border-radius:3px;text-transform:uppercase}.status-waiting{background:#2a4a3a;color:#98fb98}.status-running{background:#4a2a2a;color:#ff8a96}.status-closed{background:#444;color:#888}.lock{font-size:13px}.error-text{color:#ff8a96!important}.api-error{background:#280808b3;border:1px solid #6a1c1c;border-left:4px solid #dc143c;padding:16px 18px;border-radius:4px;color:#ffb4be;margin-top:12px}.api-error-title{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#ff8a96;margin-bottom:6px}.api-error-msg{font-size:12px;color:#ffb4be;margin-bottom:10px}.api-error-hint{font-size:11px;color:#ddd;line-height:1.6}.api-error-hint ul{margin:6px 0 0;padding-left:18px}.api-error-hint code{background:#1a1010;padding:1px 5px;border-radius:2px;color:#ffd166}.create-form .field{margin-bottom:14px}.create-form input[type=text],.create-form input[type=password]{width:100%;padding:9px 12px;background:#0d0d10;color:#ddd;border:1px solid #333;border-radius:3px;font-size:14px}.create-form input[type=range]{width:100%}.pw-modal-bg{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:200}.pw-modal{background:#0f0f12fa;border:1px solid #333;padding:24px;border-radius:8px;width:360px}.pw-modal h2{margin:0 0 12px;font-size:16px;color:#fff}.pw-modal input{width:100%;padding:9px 12px;background:#0a0a0a;color:#ddd;border:1px solid #333;border-radius:3px;font-size:14px;margin:10px 0}.pw-error{color:#ff8a96;font-size:12px;min-height:14px}.pw-buttons{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.pw-buttons button{padding:7px 16px;border-radius:3px;border:0;cursor:pointer;font-size:13px}.btn-cancel{background:#333;color:#ddd}.btn-ok{background:#2e8b57;color:#fff}.lobby-room{width:min(900px,96vw)}.lobby-card{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;background:#0f0f12f2;border:1px solid #2a2a2a;padding:18px;border-radius:8px}.lobby-info .row{display:flex;gap:8px;align-items:center;margin-bottom:14px}.lobby-info label{color:#888;font-size:11px;letter-spacing:1px;text-transform:uppercase;min-width:100px}.lobby-info input[type=text]{background:#0a0a0a;color:#fff;border:1px solid #333;padding:6px 10px;border-radius:3px;flex:1}.lobby-info input[type=text]:disabled{color:#888;border-color:#222}.join-code{font-family:Courier New,monospace;color:#98fb98;background:#0a0a0a;padding:4px 10px;border-radius:3px;font-size:13px;letter-spacing:1px}.lobby-info button{background:#1a1a1a;color:#ccc;border:1px solid #333;padding:6px 12px;border-radius:3px;cursor:pointer}.lobby-info button:hover{border-color:#555}.lobby-info .submit-btn{width:100%}.btn-cancel{background:#444!important;color:#ddd}.member-list,.chat-panel{background:#0000004d;border:1px solid #2a2a2a;border-radius:4px;padding:10px 12px}.member-list h3,.chat-panel h3{margin:0 0 8px;font-size:12px;color:#888;letter-spacing:2px;text-transform:uppercase}.member-list ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.member-list li{display:flex;gap:6px;align-items:center;padding:6px 8px;background:#0006;border-radius:3px;font-size:13px}.host-badge{background:#dc143c;color:#fff;font-size:9px;padding:1px 5px;border-radius:2px;letter-spacing:1px}.me-badge{background:#2e8b57;color:#fff;font-size:9px;padding:1px 5px;border-radius:2px;letter-spacing:1px;margin-left:auto}.member-email{color:#ddd}.chat-log{height:140px;overflow-y:auto;background:#0a0a0a;border-radius:3px;padding:6px 8px;font-size:12px}.chat-line{color:#ddd;padding:1px 0}.chat-panel input{width:100%;margin-top:8px;padding:6px 8px;background:#0a0a0a;border:1px solid #333;color:#ddd;border-radius:3px;font-size:12px}