:root{--panel: rgba(30, 25, 19, .76);--panel-solid: rgba(36, 30, 23, .93);--border: rgba(255, 255, 255, .09);--shadow: 0 10px 34px rgba(0, 0, 0, .5);--text: #f5efe4;--dim: #b1a695;--good: #8fc47f;--warn: #e6c069;--bad: #cb6a4c;--money: #edc47e;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#23201a;font-family:ui-rounded,SF Pro Rounded,Nunito,Avenir Next,system-ui,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased}#app{position:relative;width:100vw;height:100vh}#game{display:block;width:100%;height:100%}#hud{position:absolute;inset:0;pointer-events:none;padding:18px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;gap:12px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);backdrop-filter:blur(10px) saturate(1.2)}#stats{grid-column:1;grid-row:1;justify-self:start;display:flex;gap:22px;align-items:baseline;font-variant-numeric:tabular-nums}#stats .big{font-size:24px;font-weight:800;letter-spacing:-.01em}#stats [data-money]{color:var(--money)}#stats [data-lost]{color:var(--bad)}#stats .label{color:var(--dim);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:1px}#orders{grid-column:2;grid-row:1 / span 2;justify-self:end;width:258px;display:flex;flex-direction:column;gap:9px}.order{position:relative;background:var(--panel-solid);border:1px solid var(--border);border-radius:14px;padding:10px 12px 10px 15px;box-shadow:var(--shadow);overflow:hidden;animation:ticket-in .28s cubic-bezier(.2,1.2,.4,1)}.order:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent, var(--good))}@keyframes ticket-in{0%{opacity:0;transform:translate(24px) scale(.96)}}.order .name{font-weight:700;font-size:15px;display:flex;justify-content:space-between;align-items:baseline}.order .name span:last-child{color:var(--money);font-size:13px;font-weight:800}.order .steps{color:var(--dim);font-size:11px;margin-top:3px;line-height:1.4}.order .bar{height:6px;border-radius:4px;background:#ffffff1a;margin-top:8px;overflow:hidden}.order .bar>div{height:100%;border-radius:4px;background:var(--accent, var(--good));transition:width .12s linear}#log{grid-column:1;grid-row:2;align-self:end;justify-self:start;font-size:14px;font-weight:600;color:var(--dim);display:flex;flex-direction:column;gap:3px;text-shadow:0 2px 10px rgba(0,0,0,.8)}#log>div{animation:log-in .2s ease-out}@keyframes log-in{0%{opacity:0;transform:translateY(6px)}}@keyframes help-fade{to{opacity:.22}}#banner{position:absolute;inset:0;display:none;place-items:start center;padding-top:88px;pointer-events:none}#banner.show{display:grid}#banner .card{background:var(--panel-solid);border:1px solid var(--border);border-radius:20px;padding:22px 34px;text-align:center;box-shadow:var(--shadow);backdrop-filter:blur(10px);animation:ticket-in .35s cubic-bezier(.2,1.2,.4,1)}#banner h1{margin:0 0 8px;font-size:28px;font-weight:800;letter-spacing:-.02em}#banner p{margin:5px 0;color:var(--dim);font-size:14px}#menu{position:absolute;inset:0;display:none;place-items:center;background:#14100c73;backdrop-filter:blur(3px);pointer-events:none}#menu.show{display:grid}#menu .card{min-width:340px;background:var(--panel-solid);border:1px solid var(--border);border-radius:20px;padding:24px 26px 18px;box-shadow:var(--shadow);backdrop-filter:blur(12px);animation:ticket-in .22s cubic-bezier(.2,1.2,.4,1)}#menu h1{margin:0 0 16px;font-size:24px;font-weight:800;letter-spacing:-.02em}#menu ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px}#menu li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 14px;border-radius:12px;border:1px solid transparent;font-size:15px;font-weight:600;color:var(--dim)}#menu li.selected{background:#ffffff17;border-color:var(--border);color:var(--text)}#menu li em{font-style:normal;font-size:11px;color:var(--dim);opacity:.75}#notice{position:absolute;left:24px;bottom:168px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:#f0b24a;text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none}.connection{align-self:center;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8d8f9c}.connection.online{color:#8fd694}.connection.connecting{color:#f0b24a}.connection.offline{color:#e2584b}.connection:empty{display:none}#join{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#0c0d12d1;backdrop-filter:blur(6px);z-index:40}#join.open{display:flex}.join-card{width:320px;padding:28px 30px 24px;border-radius:18px;background:#191b22;border:1px solid #2c2f3a;box-shadow:0 24px 60px #00000080;color:#e8e6e1}.join-card h1{margin:0 0 22px;font-size:34px;letter-spacing:-.02em}.join-card label{display:block;margin-bottom:14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8d8f9c}.join-card input,.join-card select{display:block;width:100%;margin-top:6px;padding:10px 12px;border-radius:10px;border:1px solid #343846;background:#11131a;color:#e8e6e1;font:inherit;font-size:15px;text-transform:none;letter-spacing:normal;box-sizing:border-box}.join-card input:focus,.join-card select:focus{outline:none;border-color:#6f8fd6}#join-room{text-transform:uppercase;letter-spacing:.14em}.join-actions{display:flex;gap:8px;margin-top:20px}.join-card button{flex:1;padding:11px 12px;border-radius:10px;border:1px solid #343846;background:#22252f;color:#e8e6e1;font:inherit;font-weight:600;cursor:pointer}.join-card button.primary{background:#3f6f52;border-color:#4e8a66}.join-card button:hover{filter:brightness(1.12)}.join-hint{margin:16px 0 0;font-size:12px;color:#6f717d;line-height:1.5}.controls{margin-top:18px;padding-top:16px;border-top:1px solid #2f323d;display:flex;flex-direction:column;gap:7px}.controls-row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:8px;font-size:12px}.controls-row span{color:#8d8f9c;letter-spacing:.04em}.controls-head i{min-width:64px;font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6f717d;text-align:center}.controls-note{margin:12px 0 0;font-size:12px;line-height:1.6;color:#8d8f9c}.banner-keys{margin:12px 0 0!important;font-size:12px;color:#7e808b}.banner-keys span{display:inline-block;padding:1px 6px;margin-right:2px;border-radius:4px;background:#ffffff0f;color:#a2a4ad;font-size:11px;font-weight:600}.key{display:inline-block;padding:2px 7px;border-radius:5px;background:#23262f;border:1px solid #333744;color:#cfd2da;font-weight:600;font-size:11px;white-space:nowrap}.or{color:#8d8f9c}.controls-row b{min-width:64px;padding:3px 7px;border-radius:6px;background:#23262f;border:1px solid #333744;color:#cfd2da;font-weight:600;font-size:11px;text-align:center;white-space:nowrap}