:root{--bg: #0b0e16;--surface: #131826;--surface-2: #1a2033;--border: #262d42;--text: #edeff5;--text-muted: #8891a8;--accent-gold: #d9a441;--accent-teal: #5fe1d0;--danger: #e2695e;--font-display: "Space Grotesk", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-tap-highlight-color:transparent}button,input,textarea{font-family:inherit}:focus-visible{outline:2px solid var(--accent-teal);outline-offset:2px}.app{position:relative;height:100dvh;width:100%;overflow:hidden}.world-host{position:absolute;top:0;right:0;bottom:0;left:0}.world-host canvas{display:block;touch-action:none}.topbar{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;padding-top:max(16px,env(safe-area-inset-top));background:linear-gradient(to bottom,rgba(11,14,22,.9),transparent);pointer-events:none}.wordmark{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:.01em;pointer-events:auto}.legend{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 12px;pointer-events:auto;white-space:nowrap}.legend-swatch{width:36px;height:6px;border-radius:3px;background:linear-gradient(to right,var(--accent-gold),var(--surface-2));flex-shrink:0}.panel{position:absolute;top:0;right:0;bottom:0;z-index:20;width:320px;background:var(--surface);border-left:1px solid var(--border);padding:76px 20px 20px;overflow-y:auto}.panel.empty{display:flex;align-items:center;justify-content:center;text-align:center}.panel-hint{color:var(--text-muted);font-size:13px;padding:0 20px}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.coords{font-family:var(--font-mono);font-size:13px;color:var(--text-muted)}.icon-btn{background:none;border:none;color:var(--text-muted);font-size:22px;line-height:1;padding:4px 8px;cursor:pointer;border-radius:6px}.icon-btn:hover{background:var(--surface-2);color:var(--text)}.status-badge{display:inline-block;font-size:11px;font-weight:500;padding:4px 10px;border-radius:999px;margin-bottom:14px;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}.status-free{color:var(--accent-gold);border-color:color-mix(in srgb,var(--accent-gold) 40%,var(--border))}.status-owned{color:var(--accent-teal);border-color:color-mix(in srgb,var(--accent-teal) 40%,var(--border))}.status-rejected{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--border))}.price{font-family:var(--font-display);font-size:32px;font-weight:600;margin-bottom:18px}.price-inline{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--accent-gold)}.prompt-text{font-size:13px;color:var(--text-muted);font-style:italic;margin-bottom:12px}.asset-preview{width:100%;max-width:160px;border-radius:10px;border:1px solid var(--border);image-rendering:pixelated;margin-bottom:14px;display:block}.btn-primary{width:100%;padding:11px;border-radius:10px;border:none;background:var(--accent-teal);color:#08211d;font-weight:600;font-size:14px;cursor:pointer}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{width:100%;padding:11px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:14px;cursor:pointer}.btn-ghost{padding:11px 16px;border-radius:10px;border:none;background:none;color:var(--text-muted);font-size:14px;cursor:pointer}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#040509a6;display:flex;align-items:flex-end;justify-content:center}.modal-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:20px 20px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}.modal-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}.field-label{font-size:12px;color:var(--text-muted);margin-top:8px}.modal-card input,.modal-card textarea{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);font-size:14px;resize:vertical}.error-text{color:var(--danger);font-size:13px}.generating-text{color:var(--text-muted);font-size:14px;padding:12px 0}.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:8px}.modal-actions .btn-primary{width:auto;padding:11px 20px}@media (max-width: 767px){.legend{display:none}.panel{top:auto;left:0;right:0;bottom:0;width:auto;max-height:55dvh;border-left:none;border-top:1px solid var(--border);border-radius:20px 20px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom))}.panel.empty{display:none}}@media (min-width: 768px){.modal-overlay{align-items:center}.modal-card{border-radius:16px}}.help-wrap{position:relative;display:inline-flex;margin-left:5px;vertical-align:middle}.help-dot{width:15px;height:15px;border-radius:50%;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);font-size:10px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0}.help-dot:hover{color:var(--text);border-color:var(--accent-teal)}.help-bubble{position:fixed;width:220px;z-index:200;background:#05070c;border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:12px;line-height:1.45;color:var(--text);font-weight:400;text-align:left;white-space:normal;box-shadow:0 8px 24px #0009}.statusbar{position:absolute;top:56px;left:0;right:0;z-index:15;display:flex;gap:8px;padding:0 14px;pointer-events:none}.stat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:7px 11px;display:flex;flex-direction:column;gap:2px;pointer-events:auto}.stat-label{font-size:10px;color:var(--text-muted);display:flex;align-items:center;text-transform:uppercase;letter-spacing:.04em}.stat-value{font-family:var(--font-display);font-size:17px;font-weight:600}.stat-sub{color:var(--text-muted);font-size:12px;font-weight:400}.resource-list{display:flex;gap:8px;font-family:var(--font-mono);font-size:13px}.res-gold{color:var(--accent-gold)}.res-stone{color:#9aa5bd}.res-metal{color:#7fb2d9}.ranking{position:absolute;left:14px;bottom:14px;z-index:15;max-width:260px}.ranking-toggle{background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:12px;padding:8px 12px;cursor:pointer}.ranking-list{margin-top:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;max-height:45dvh;overflow-y:auto}.ranking-head{font-size:11px;color:var(--text-muted);margin-bottom:8px;display:flex;align-items:center}.ranking-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px}.rank-pos{color:var(--text-muted);font-family:var(--font-mono);font-size:11px;width:18px}.rank-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-cells{font-family:var(--font-display);font-weight:600;color:var(--accent-teal)}.modal-title{font-family:var(--font-display);font-size:18px;margin:0 0 4px}.muted-text{color:var(--text-muted);font-size:13px;line-height:1.5;margin:6px 0 12px}.muted-text.small{font-size:11px}.section-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 8px;display:flex;align-items:center}.structure-line{font-size:14px;display:flex;align-items:center;margin:4px 0 12px}.link-btn{background:none;border:none;color:var(--text-muted);font-size:13px;cursor:pointer;pointer-events:auto;padding:4px 8px}.link-btn:hover{color:var(--text)}.build-list{display:flex;flex-direction:column;gap:6px}.build-option{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:9px 11px;color:var(--text);font-size:13px;cursor:pointer;text-align:left}.build-option.is-disabled{opacity:.4;cursor:not-allowed}.build-option:not(.is-disabled):hover{border-color:var(--accent-teal)}.build-name{display:flex;align-items:center;min-width:0}.build-cost{display:flex;gap:7px;font-family:var(--font-mono);font-size:11px;flex-shrink:0}@media (max-width: 767px){.statusbar{top:52px;padding:0 10px;gap:6px}.stat{padding:6px 9px;flex:1}.stat-value{font-size:15px}.resource-list{font-size:11px;gap:5px}.ranking{bottom:auto;top:118px;left:10px}.ranking-list{max-height:34dvh}}.topbar-right{display:flex;align-items:center;gap:4px;pointer-events:auto}.online-kpi{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-muted);font-family:var(--font-mono);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px 10px;margin-right:4px}.online-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-teal);box-shadow:0 0 6px var(--accent-teal)}.toast{position:absolute;left:50%;transform:translate(-50%);bottom:24px;z-index:55;background:var(--surface);border:1px solid var(--accent-teal);border-radius:10px;padding:10px 16px;font-size:13px;max-width:90vw;text-align:center;box-shadow:0 8px 24px #00000080}.modal-card.shop{gap:0}.shop-section{padding:4px 0 16px;border-bottom:1px solid var(--border)}.shop-section:last-child{border-bottom:none;padding-bottom:4px}.qty-row{display:flex;align-items:center;gap:14px;margin-bottom:10px}.qty-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:17px;cursor:pointer}.qty-value{font-family:var(--font-display);font-size:19px;font-weight:600;min-width:40px;text-align:center}.color-grid{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:8px}.color-swatch{width:36px;height:36px;border-radius:9px;border:2px solid transparent;cursor:pointer}.color-swatch.active{border-color:var(--text)}.btn-ghost.full{width:100%;margin-top:8px}.protected-note{color:var(--accent-teal)}@media (max-width: 767px){.toast{bottom:auto;top:120px}.online-kpi{font-size:11px;padding:3px 8px}}.lang-btn{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;border:1px solid var(--border);border-radius:6px;padding:3px 7px}.free-note{color:var(--accent-teal)}.pending-note{color:var(--accent-gold)}
