:root{--bg: #0e1117;--panel: #171c26;--panel-2: #212836;--border: #2b3446;--text: #e6e9ef;--muted: #8a93a6;--accent: #d9a441;--accent-2: #3b82f6;--danger: #ef4444;--ok: #22c55e}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}button{font:inherit;cursor:pointer;border:1px solid var(--border);background:var(--panel-2);color:var(--text);border-radius:10px;padding:12px 16px;min-height:44px;transition:filter .1s ease}button:hover:not(:disabled){filter:brightness(1.15)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);color:#1a1206;border-color:var(--accent);font-weight:700}button.accent{background:var(--accent-2);border-color:var(--accent-2);color:#fff}button.ghost{background:transparent}button.danger{background:var(--danger);border-color:var(--danger);color:#fff}input{font:inherit;width:100%;padding:12px 14px;min-height:44px;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text)}input:focus{outline:2px solid var(--accent-2)}.center{height:100%;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}.card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px}.card.wide{max-width:720px}.title{font-size:26px;font-weight:800;letter-spacing:.5px}.title .spark{color:var(--accent)}.subtitle{color:var(--muted);font-size:14px;margin-top:-6px}.row{display:flex;gap:10px;align-items:center}.row.between{justify-content:space-between}.grow{flex:1}.error{color:var(--danger);font-size:14px}.muted{color:var(--muted)}.link{color:var(--accent-2);background:none;border:none;padding:0;min-height:auto}.stats{display:flex;gap:16px;flex-wrap:wrap}.stat{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:8px 12px}.stat b{display:block;font-size:18px}.stat span{color:var(--muted);font-size:12px}.matchlist{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}.matchitem{display:flex;justify-content:space-between;align-items:center;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px}.lb{width:100%;border-collapse:collapse}.lb th,.lb td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);font-size:14px}.lb th{color:var(--muted);font-weight:600}.game-root{position:fixed;top:0;right:0;bottom:0;left:0}#pixi-holder{position:absolute;top:0;right:0;bottom:0;left:0}#pixi-holder canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.hud>*{pointer-events:auto}.topbar{position:absolute;top:0;left:0;right:0;display:flex;gap:10px;align-items:center;padding:8px 10px;background:linear-gradient(#0e1117ee,#0e111700)}.res{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-weight:700}.res .dot{width:12px;height:12px;border-radius:50%}.res .dot.food{background:var(--ok)}.res .dot.gold{background:var(--accent)}.res .dot.pop{background:var(--accent-2)}.actionbar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:10px;background:linear-gradient(#0e111700,#0e1117ee)}.actionbar .sel{align-self:center;color:var(--muted);font-size:13px;margin-right:8px}.actionbar button{min-width:96px}.banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:28px 32px;text-align:center;display:flex;flex-direction:column;gap:12px;min-width:280px}.banner h2{font-size:28px}.banner.win h2{color:var(--ok)}.banner.lose h2{color:var(--danger)}.hint{position:absolute;top:54px;left:50%;transform:translate(-50%);background:#000a;border:1px solid var(--border);border-radius:10px;padding:6px 12px;font-size:13px;color:var(--accent)}.reslabel{color:var(--muted);font-weight:400;font-size:12px;margin-left:2px}.objective{background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--muted)}.objective b{color:var(--accent)}.iconbtn{min-width:44px;padding:10px}.sel.tip{color:var(--text)}.sel.resinfo{color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 14px;display:inline-flex;align-items:center;gap:8px}.resmeter{display:inline-block;width:90px;height:8px;background:#0008;border:1px solid var(--border);border-radius:99px;overflow:hidden;vertical-align:middle}.resmeter-fill{display:block;height:100%;border-radius:99px}.legend-dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:1.5px solid #0008;vertical-align:-1px;margin:0 2px}.help-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#05080ca8;display:flex;align-items:center;justify-content:center;padding:14px;z-index:30}.help-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:22px;max-width:620px;width:100%;max-height:88%;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.help-card h3{font-size:20px}.help-card h4{font-size:14px;margin-bottom:4px;color:var(--accent)}.help-goal{background:var(--panel-2);border-left:3px solid var(--accent);border-radius:8px;padding:10px 12px}.help-legend{display:flex;gap:14px;flex-wrap:wrap;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:14px}.help-steps{padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14.5px}.help-controls{display:flex;gap:18px;flex-wrap:wrap}.help-controls>div{flex:1;min-width:220px}.help-controls ul{padding-left:18px;font-size:13.5px;color:var(--muted);display:flex;flex-direction:column;gap:4px}@media (max-width: 700px){.objective{display:none}}@media (max-width: 560px){.actionbar button{min-width:72px;padding:10px;font-size:13px}.res{padding:5px 10px;font-size:14px}.reslabel{display:none}.topbar{flex-wrap:wrap}}