:root{--bg: #0f1310;--panel: #19211b;--line: #2b362d;--ink: #eef4ee;--dim: #9bb0a0;--accent: #5a9c6a;--accent2: #c9a24e;--good: #243029;--good-has: #2f4536;--bad: #5a2620}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(900px 560px at 50% -8%,#16241b,var(--bg));color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}#app{width:100%;max-width:560px;padding:12px 12px 30px}header{text-align:center;margin-bottom:6px}h1{margin:0;font-size:26px;letter-spacing:4px;font-weight:800;color:var(--accent)}.sub{margin:3px 0 0;color:var(--dim);font-size:15px}.bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center;margin:10px 0}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{background:none;border:none;color:var(--dim);padding:6px 13px;font:600 15px system-ui;cursor:pointer}.seg button.active{background:var(--accent);color:#07210e}.btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:7px 14px;border-radius:999px;font:700 15px system-ui;cursor:pointer}.btn:hover{border-color:var(--accent)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:var(--accent);color:#07210e;border-color:var(--accent)}.scoreboard{display:flex;gap:10px;justify-content:center;margin:8px 0}.readout{background:#0a0f0c;border:1px solid var(--line);border-radius:8px;padding:5px 16px;font:800 20px ui-monospace,monospace;color:var(--accent);min-width:92px;text-align:center}.readout span{color:var(--dim);font-size:12px;display:block;font-weight:600;letter-spacing:.5px}.stage{position:relative}.board{display:flex;flex-direction:column;gap:12px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}.panel h3{margin:0 0 10px;font-size:15px;letter-spacing:.5px;color:var(--dim);text-transform:uppercase;font-weight:700}.stock{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:6px}.good{display:flex;align-items:center;gap:5px;background:var(--good);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:14px;opacity:.55}.good.has{background:var(--good-has);opacity:1;border-color:var(--accent)}.good .ic{font-size:17px}.good .nm{color:var(--dim);flex:1}.good .qt{font:800 16px ui-monospace,monospace;color:var(--accent)}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}.tile{display:flex;flex-direction:column;align-items:center;gap:2px;background:#11180f;border:1px solid var(--line);border-radius:10px;padding:10px 6px;cursor:pointer;color:var(--ink)}.tile:hover{border-color:var(--accent2);background:#15200f}.tile .ic{font-size:24px}.tile .amt{font:800 15px ui-monospace,monospace;color:var(--accent2)}.tile .nm{font-size:13px;color:var(--dim)}.recipes{display:flex;flex-direction:column;gap:6px}.recipe{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#11180f;border:1px solid var(--line);border-radius:8px;padding:9px 12px;cursor:pointer;color:var(--ink);text-align:left}.recipe:hover:not(:disabled){border-color:var(--accent)}.recipe:disabled{opacity:.42;cursor:not-allowed}.recipe .rn{font:700 15px system-ui}.recipe .io{display:flex;align-items:center;gap:8px;font:700 15px ui-monospace,monospace}.recipe .in{color:#d8b46a}.recipe .out{color:var(--accent)}.recipe .arrow{color:var(--dim)}.panel.liberty{border-color:var(--accent);background:linear-gradient(180deg,#1b2a1f,var(--panel))}.panel.liberty .cost{margin:0 0 10px;font-size:15px;color:var(--dim)}.panel.liberty .cost b{color:var(--accent)}.bell{width:100%;font-size:16px;padding:12px;margin-bottom:8px}.advise{width:100%;color:var(--dim)}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#080e0ad1;border-radius:12px;backdrop-filter:blur(3px);z-index:5}.overlay.hidden{display:none}.card{background:var(--panel);border:1px solid var(--accent);border-radius:16px;padding:24px 28px;text-align:center;max-width:340px}.card h2{margin:0 0 6px;font-size:24px;color:var(--accent)}.card p{margin:6px 0;color:var(--dim);font-size:16px;line-height:1.5}.card p b{color:var(--ink)}.card .row{display:flex;gap:8px;justify-content:center;margin-top:16px}.hint{text-align:center;color:var(--dim);font-size:14px;margin-top:14px;line-height:1.5}