:root{
  --ink:#f6ecdc; --mute:#c9b79d; --gold:#ffd76a; --panel:rgba(28,20,14,.78); --line:rgba(255,220,170,.16);
  --btn:#5a3f2a; --btnH:#6e4e35; --acc:#7cc35a; --red:#e2513f;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0e0a07;color:var(--ink);font-family:Rubik,system-ui,sans-serif;user-select:none;-webkit-user-select:none}
#c{position:fixed;inset:0;width:100vw;height:100vh;display:block;cursor:crosshair;image-rendering:pixelated}
.hidden{display:none!important}
kbd{font-family:'Pixelify Sans',monospace;font-size:.85em;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-bottom-width:2px;border-radius:4px;padding:0 5px;margin:0 1px}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(4px);box-shadow:0 4px 18px rgba(0,0,0,.35)}
#hudL{position:absolute;left:14px;top:12px;padding:10px 14px;min-width:230px}
.money{display:flex;align-items:center;gap:8px;font-family:'Pixelify Sans',monospace;font-size:30px;font-weight:700;color:var(--gold);line-height:1;margin-bottom:8px;text-shadow:0 2px 0 #6b4a12}
.money.inline{font-size:24px;margin:0}
.coin{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe9a0,#e0a81e);color:#7a4f00;font-size:17px;text-shadow:none;box-shadow:inset 0 -2px 0 #b07c0c}
.row{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:5px}
.lbl{color:var(--mute);width:58px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.num{font-variant-numeric:tabular-nums;color:var(--ink);min-width:62px;text-align:right}
.bar{flex:1;height:12px;background:rgba(0,0,0,.5);border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.bar.small{height:8px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(#a26a35,#7a4a1f);border-radius:6px;transition:width .12s}
.bar.red i{background:linear-gradient(#ff6a4f,#b8261a)}
#hudC{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.miniBox{padding:4px;border-radius:8px}
#mini{display:block;width:min(560px,42vw);aspect-ratio:320/54;image-rendering:pixelated;border-radius:4px}
#queueInfo b{color:var(--ink)}
.slim{padding:5px 12px;font-size:13px;color:var(--mute);border-radius:20px}
.danger{display:none;align-items:center;gap:10px;color:#ffb3a6;font-weight:700;width:260px;animation:pulse .6s infinite alternate}
.danger.on{display:flex}
.danger .bar{height:10px}
@keyframes pulse{from{box-shadow:0 0 0 rgba(226,81,63,0)}to{box-shadow:0 0 18px rgba(226,81,63,.7)}}
#hudR{position:absolute;right:14px;top:12px;display:flex;gap:8px;align-items:center;pointer-events:auto}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:7px 12px;font-size:13px;cursor:pointer}
.chip b{font-family:'Pixelify Sans',monospace;color:var(--gold);letter-spacing:2px;font-size:16px}
#hint{position:absolute;left:50%;top:44%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:7px 16px;font-size:13px;color:var(--mute);transition:opacity 1s;white-space:nowrap}
#hint b{color:var(--ink)}

/* Buttons */
.btn{font:inherit;font-weight:500;color:var(--ink);background:var(--btn);border:1px solid rgba(255,255,255,.12);border-bottom:3px solid rgba(0,0,0,.35);border-radius:10px;padding:8px 14px;cursor:pointer;transition:background .12s,transform .06s}
.btn:hover:not(:disabled){background:var(--btnH)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:default}
.btn.icon{width:40px;height:40px;padding:0;font-size:17px;display:grid;place-items:center}
.btn.primary{background:#4f8a34}.btn.primary:hover:not(:disabled){background:#5d9d3f}
.btn.big{font-size:16px;padding:12px 18px;width:100%}
.shopBtn{height:40px;font-family:'Pixelify Sans',monospace;font-size:17px;background:#4f8a34}
.shopBtn:hover{background:#5d9d3f!important}

/* Toasts */
#toasts{position:fixed;left:50%;top:140px;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:40}
.toast{background:rgba(28,20,14,.92);border:1px solid var(--line);border-radius:10px;padding:8px 16px;font-size:14px;animation:tin .25s ease-out}
.toast b{color:var(--gold)}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}}

/* Modals */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,5,3,.6);backdrop-filter:blur(3px);z-index:30;padding:20px}
.sheet{background:linear-gradient(#2e2219,#221811);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.6);width:min(940px,100%);max-height:100%;display:flex;flex-direction:column}
.sheetHead{display:flex;align-items:center;gap:16px;padding:16px 20px 10px}
.sheetHead h2{margin:0;font-family:'Pixelify Sans',monospace;font-size:28px;flex:1}
.close{background:transparent;border-color:transparent}
.tabs{display:flex;gap:6px;padding:0 20px 12px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tab{font:inherit;font-size:14px;background:transparent;color:var(--mute);border:1px solid transparent;border-radius:20px;padding:6px 14px;cursor:pointer}
.tab:hover{color:var(--ink)}
.tab.on{background:rgba(255,255,255,.08);border-color:var(--line);color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;padding:16px 20px;overflow:auto}
.card{background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.card.maxed{opacity:.6}
.cardTop{display:flex;gap:12px;align-items:center}
.ico{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.07);display:grid;place-items:center;font-size:24px;flex:none}
.cardTop h3{margin:0;font-size:16px}
.pips{display:flex;gap:3px;margin-top:4px}
.pips i{width:12px;height:5px;border-radius:2px;background:rgba(255,255,255,.12)}
.pips i.f{background:var(--acc)}
.desc{font-size:13px;color:var(--mute);line-height:1.4;min-height:36px}
.eff{font-size:13px;background:rgba(255,255,255,.05);border-radius:8px;padding:6px 9px;font-variant-numeric:tabular-nums}
.eff b{color:var(--acc)}
.buy{display:flex;align-items:center;justify-content:center;gap:6px;font-family:'Pixelify Sans',monospace;font-size:17px;background:#4f8a34}
.buy:hover:not(:disabled){background:#5d9d3f!important}
.buy.poor{background:#5a3f2a}
.sheetFoot{padding:0 20px 14px;font-size:12.5px;color:var(--mute)}

/* Menu */
.menuSheet{width:min(440px,100%);padding:28px 30px;text-align:center;align-items:stretch;gap:4px}
.logo{margin:0;font-family:'Pixelify Sans',monospace;font-size:54px;line-height:.95;color:#b8743a;text-shadow:0 4px 0 #4a2a10,0 0 30px rgba(184,116,58,.35);letter-spacing:2px}
.logo span{display:block;color:var(--gold);font-size:.62em;letter-spacing:10px;text-shadow:0 3px 0 #6b4a12}
.logo.small{font-size:42px;color:var(--red);text-shadow:0 4px 0 #4a1610}
.sub{color:var(--mute);margin:10px 0 18px;font-size:14px}
.field{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mute);margin-bottom:12px;text-align:left}
input{font:inherit;color:var(--ink);background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;flex:1;min-width:0}
input:focus{border-color:rgba(255,215,106,.5)}
.menuBtns{display:flex;flex-direction:column;gap:8px}
.joinRow{display:flex;gap:8px}
.joinRow input{text-transform:uppercase;font-family:'Pixelify Sans',monospace;font-size:20px;letter-spacing:4px;text-align:center;width:50%}
.joinRow .btn{width:50%}
.status{min-height:20px;font-size:13.5px;color:var(--gold);margin:10px 0 0}
.howto{display:grid;gap:5px;font-size:12.5px;color:var(--mute);margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
#overT{color:var(--mute);line-height:1.6;margin:12px 0 18px}
#overT b{color:var(--gold)}

.rainBox{display:none;color:#bfe0ff}
.rainBox.on{display:block}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute);margin:-4px 0 12px;cursor:pointer;text-align:left}
.chk input{flex:none;width:16px;height:16px;accent-color:#4f8a34}
#buildWrap{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:auto}
#buildBar{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;backdrop-filter:blur(4px)}
.bb{font:inherit;position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:74px;padding:6px 8px 5px;background:rgba(255,255,255,.05);color:var(--ink);border:1px solid transparent;border-radius:10px;cursor:pointer}
.bb:hover{background:rgba(255,255,255,.1)}
.bb.on{border-color:var(--gold);background:rgba(255,215,106,.14)}
.bb.poor .bc{color:#ff9b8a}
.bb .bi{font-size:18px;line-height:1.1}
.bb .bn{font-size:11px;white-space:nowrap}
.bb .bc{font-size:11px;color:var(--gold);font-family:'Pixelify Sans',monospace}
.bb kbd{position:absolute;top:3px;left:4px;font-size:9px;padding:0 3px}
#buildTip{background:rgba(28,20,14,.92);border:1px solid var(--line);border-radius:10px;padding:6px 12px;font-size:12.5px;color:var(--ink)}