:root { --bg:#f5f2ea; --card:#fffdf8; --ink:#202c39; --muted:#75818a; --line:#e5dfd2; --green:#2f8f68; --green-soft:#e6f3ea; --amber:#f0a93d; --amber-soft:#fff1d7; --red:#c9584b; --blue:#315f78; --shadow:0 9px 28px rgba(32,44,57,.07); }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { padding:18px 14px 112px; }
button, input, select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
#app { max-width:760px; margin:0 auto; }
.topbar, .world-strip, .card-heading, .section-heading, .result-line, .player-row, .enterprise-row, .opportunity-row, .news-row, .plan-dock { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.topbar { align-items:flex-start; gap:16px; }
.eyebrow, .hero-kicker { margin:0 0 5px; color:var(--green); font-size:10px; font-weight:900; letter-spacing:.12em; }
h1, h2, h3, p { margin-top:0; }
h1 { margin-bottom:5px; font-size:25px; line-height:1.1; }
h2 { margin-bottom:5px; font-size:20px; }
h3 { margin-bottom:5px; font-size:15px; }
.subtitle, .hint, small { color:var(--muted); }
.subtitle { max-width:580px; margin-bottom:0; font-size:13px; line-height:1.4; }
.profile-chip { flex:0 0 auto; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid var(--line); border-radius:999px; padding:8px 11px; background:rgba(255,253,248,.8); color:var(--blue); font-size:11px; font-weight:800; }
.world-strip { margin:16px 0 12px; padding:9px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,253,248,.7); color:var(--muted); font-size:12px; }
.world-strip strong { color:var(--ink); }
.event-banner { margin:16px 0 10px; padding:13px 15px; border:1px solid #f0d198; border-radius:15px; background:var(--amber-soft); color:#765124; }
.event-banner strong, .event-banner span { display:block; }
.event-banner span { margin-top:4px; font-size:12px; line-height:1.4; }
.event-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.event-tags span { display:inline-block; margin:0; padding:4px 7px; border-radius:999px; background:rgba(255,255,255,.55); font-size:10px; }
.hero-card { display:flex; justify-content:space-between; gap:14px; align-items:center; min-height:174px; margin:0 0 14px; padding:21px; overflow:hidden; border:1px solid #e8d9bc; border-radius:24px; background:linear-gradient(135deg,#fff8e7 0%,#ffe8b8 100%); box-shadow:var(--shadow); }
.hero-card h2 { max-width:390px; font-size:23px; }
.hero-card p { max-width:440px; margin-bottom:0; color:#765124; font-size:13px; line-height:1.45; }
.city-illustration { position:relative; flex:0 0 105px; font-size:65px; line-height:1; filter:drop-shadow(0 8px 6px rgba(90,75,44,.12)); }
.city-illustration span { position:absolute; right:0; bottom:-2px; font-size:35px; }
.city-illustration i { position:absolute; right:21px; top:-9px; font-style:normal; font-size:28px; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:13px; }
.stat-card { min-width:0; padding:12px; border-radius:14px; background:#edf5ef; }
.stat-card:nth-child(2) { background:#fff3dc; }
.stat-card:nth-child(3) { background:#e9f1f5; }
.stat-card:nth-child(4) { background:#f4e9e3; }
.stat-card span, .stat-card small { display:block; font-size:10px; }
.stat-card strong { display:block; margin:6px 0 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; }
.card { margin-bottom:11px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:0 4px 13px rgba(32,44,57,.04); }
.card p:last-child { margin-bottom:0; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.card-heading { align-items:flex-start; margin-bottom:9px; }
.card-heading h3 { margin-bottom:0; }
.section-heading { align-items:flex-end; margin:3px 0 12px; }
.section-heading h2 { margin-bottom:0; }
.section-heading .hint { margin-bottom:0; font-size:12px; }
.opportunity-row, .player-row, .enterprise-row, .news-row { padding:10px 0; border-bottom:1px solid var(--line); }
.opportunity-row:last-child, .player-row:last-child, .enterprise-row:last-child, .news-row:last-child { border-bottom:0; }
.opportunity-row strong, .player-row strong, .enterprise-row strong, .news-row strong { display:block; font-size:13px; }
.opportunity-row small, .player-row small, .enterprise-row small { display:block; margin-top:3px; font-size:10px; }
.leaderboard-highlight { margin:0 -8px; padding-right:8px; padding-left:8px; border-radius:10px; background:var(--green-soft); }
.warehouse-stats { grid-template-columns:repeat(4,1fr); }
.warehouse-card { padding-top:4px; }
.warehouse-row { display:grid; grid-template-columns:32px 1fr auto auto; align-items:center; gap:9px; padding:11px 0; border-bottom:1px solid var(--line); outline:none; cursor:pointer; transition:background .15s ease, padding .15s ease; }
.warehouse-row:last-child { border-bottom:0; }
.warehouse-row:hover, .warehouse-row:focus-visible { background:#f4f8f4; }
.warehouse-row.selected { padding-right:8px; padding-left:8px; border-radius:10px; background:var(--green-soft); }
.warehouse-icon { display:grid; width:30px; height:30px; place-items:center; border-radius:9px; background:var(--amber-soft); }
.warehouse-name { min-width:0; }
.warehouse-name strong, .warehouse-name small { display:block; }
.warehouse-name strong { font-size:12px; }
.warehouse-name small { margin-top:3px; color:var(--muted); font-size:10px; }
.warehouse-quantity, .warehouse-value { white-space:nowrap; font-size:12px; }
.warehouse-value { color:var(--green); font-weight:800; }
.warehouse-action-card { border-color:#c9ded0; background:linear-gradient(120deg,#fbfff9,#fffdf8); }
.warehouse-action-grid { display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:9px; margin:12px 0; }
.warehouse-action-grid label { min-width:0; color:var(--muted); font-size:10px; }
.warehouse-action-grid small { display:block; margin-top:4px; font-size:9px; }
.empty-state { padding:18px 2px 10px; text-align:center; }
.empty-state p { margin:6px 0 12px; }
.result-line { padding:8px 0; }
.quick-actions { display:flex; flex-wrap:wrap; gap:8px; }
.newcomer-card { border-color:#bcdcc5; background:linear-gradient(120deg,#f4fff6,#fffdf8); }
.newcomer-card p { color:#4f6b59; font-size:12px; line-height:1.45; }
.pill { display:inline-block; padding:4px 7px; border-radius:999px; background:#edf0f1; color:var(--muted); font-size:10px; font-weight:800; white-space:nowrap; }
.pill.good { background:var(--green-soft); color:var(--green); }
.pill.warn { background:var(--amber-soft); color:#9a681e; }
.pill.bad { background:#fae5e2; color:var(--red); }
.positive { color:var(--green); }
.negative { color:var(--red); }
.muted { color:var(--muted); font-size:11px; }
.game-nav { display:flex; gap:5px; margin:14px 0 11px; padding:4px; overflow-x:auto; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.46); }
.game-tab { flex:0 0 auto; padding:9px 11px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-size:11px; font-weight:800; }
.game-tab.active { background:var(--ink); color:#fff; }
.market-card { padding-top:7px; }
.market-table-wrap { overflow-x:auto; }
.market-table { width:100%; min-width:610px; border-collapse:collapse; font-size:12px; }
.market-table th { padding:4px 8px 9px; color:var(--muted); font-size:10px; text-align:left; white-space:nowrap; }
.market-table th:not(:first-child), .market-table td:not(:first-child) { text-align:right; }
.market-table-row { border-top:1px solid var(--line); outline:none; cursor:pointer; transition:background .15s ease; }
.market-table-row:hover, .market-table-row:focus-visible { background:#f4f8f4; }
.market-table-row.selected { background:var(--green-soft); }
.market-table td { padding:11px 8px; vertical-align:middle; }
.market-table td strong, .market-table td small { display:block; }
.market-table td small { margin-top:3px; color:var(--muted); font-size:9px; }
.market-name, .market-price { display:flex; align-items:center; min-width:0; gap:6px; }
.market-name strong { display:block; font-size:12px; }
.market-name small, .market-price small { display:block; color:var(--muted); font-size:9px; }
.market-name-text { min-width:0; text-align:left; }
.market-icon { display:inline-grid; width:27px; height:27px; flex:0 0 27px; place-items:center; border-radius:8px; background:var(--amber-soft); }
.market-cart-btn { display:inline-grid; width:27px; height:27px; flex:0 0 27px; place-items:center; padding:0; border:1px solid #c9ded0; border-radius:8px; background:var(--green-soft); color:var(--green); font-size:13px; line-height:1; transition:transform .15s ease, background .15s ease; }
.market-cart-btn:hover, .market-cart-btn:focus-visible { transform:scale(1.08); background:#d2ebda; outline:none; }
.market-action-card { border-color:#c9ded0; background:linear-gradient(120deg,#fbfff9,#fffdf8); }
.market-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:12px 0; }
.market-action-grid label { color:var(--muted); font-size:10px; }
.market-action-grid small { display:block; margin-top:4px; font-size:9px; }
.market-actions { display:flex; flex-wrap:wrap; gap:8px; }
.market-note { margin:11px 0 0; font-size:11px; line-height:1.4; }
.market-modal-backdrop { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:16px; background:rgba(20,32,39,.42); backdrop-filter:blur(3px); }
.market-modal { width:min(100%, 430px); max-height:calc(100vh - 32px); overflow:auto; padding:14px; border:1px solid #c9ded0; border-radius:16px; background:var(--card); box-shadow:0 18px 55px rgba(20,32,39,.25); }
.market-close-btn { display:grid; width:30px; height:30px; flex:0 0 30px; place-items:center; padding:0; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--muted); font-size:20px; line-height:1; }
.market-close-btn:hover, .market-close-btn:focus-visible { border-color:var(--green); color:var(--green); outline:none; }
.market-order-book { margin-top:13px; padding-top:11px; border-top:1px solid var(--line); }
.market-order-book h4 { margin:0; font-size:12px; }
.market-order-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.market-order-row:last-child { border-bottom:0; }
.market-order-row strong, .market-order-row small { display:block; }
.market-order-row strong { font-size:11px; }
.market-order-row small { margin-top:3px; color:var(--muted); font-size:9px; }
.order-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.order-row:last-child { border-bottom:0; }
.order-row strong, .order-row small { display:block; }
.order-row strong { font-size:12px; }
.order-row small { margin-top:3px; color:var(--muted); font-size:10px; }
.tiny-input, .form-grid label { color:var(--muted); font-size:9px; }
input, select { width:100%; min-height:35px; margin-top:4px; padding:6px 7px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); outline:none; }
input:focus, select:focus { border-color:var(--green); box-shadow:0 0 0 2px rgba(47,143,104,.12); }
.enterprise-row { align-items:center; }
.enterprise-row > div:first-child { min-width:0; }
.enterprise-row .pill { margin-top:6px; }
.enterprise-actions { display:flex; flex:0 0 auto; gap:5px; }
.form-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.news-row { align-items:flex-start; gap:10px; }
.news-row p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.35; }
.news-tick { display:grid; width:30px; height:30px; flex:0 0 30px; place-items:center; border-radius:9px; background:var(--green-soft); color:var(--green); font-size:11px; font-weight:900; }
.achievement-list { display:flex; flex-wrap:wrap; gap:7px; }
.primary-btn, .secondary-btn, .selected-btn { min-height:38px; padding:8px 12px; border:0; border-radius:10px; font-size:12px; font-weight:800; }
.primary-btn { background:var(--green); color:#fff; box-shadow:0 5px 12px rgba(47,143,104,.2); }
.secondary-btn { border:1px solid var(--line); background:var(--card); color:var(--ink); }
.selected-btn { background:var(--green-soft); color:var(--green); }
.small { min-height:32px; padding:6px 8px; font-size:10px; }
.compact { min-height:35px; padding:7px 10px; }
.text-btn { padding:4px 0; border:0; background:none; color:var(--green); font-size:11px; font-weight:800; }
.plan-dock { position:fixed; z-index:10; right:0; bottom:0; left:0; padding:10px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); border-top:1px solid var(--line); background:rgba(245,242,234,.94); backdrop-filter:blur(12px); }
.plan-dock > div { min-width:0; }
.plan-dock strong { display:block; max-width:440px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.turn-label { display:block; color:var(--muted); font-size:10px; }
.plan-dock.dirty { border-top-color:var(--amber); }
.toast { position:fixed; z-index:20; right:14px; bottom:76px; left:14px; display:none; max-width:600px; margin:auto; padding:12px 14px; border-radius:12px; background:var(--ink); color:#fff; font-size:13px; box-shadow:var(--shadow); }
.toast.visible { display:block; }
.toast.error { background:var(--red); }
.hidden { display:none !important; }
@media (max-width:620px) { body { padding:10px 7px 104px; } #app { width:100%; } .topbar { flex-direction:column; gap:7px; } .profile-chip { align-self:flex-start; max-width:100%; } .world-strip { flex-wrap:wrap; margin:10px 0 8px; padding:7px 9px; gap:5px 10px; font-size:10px; } .event-banner { margin:10px 0 8px; padding:10px 11px; } .event-banner span { font-size:10px; } .event-tags { margin-top:6px; } .event-tags span { padding:3px 5px; font-size:8px; } h1 { font-size:21px; } h2 { font-size:17px; } h3 { font-size:13px; } .subtitle { font-size:11px; } .hero-card { min-height:125px; padding:13px; } .hero-card h2 { font-size:18px; } .hero-card p { font-size:11px; } .city-illustration { transform:scale(.68); transform-origin:right center; } .stat-grid, .warehouse-stats { grid-template-columns:repeat(2,1fr); } .stat-card { padding:9px; } .stat-card strong { font-size:13px; } .two-col { grid-template-columns:1fr; } .card { padding:10px; border-radius:13px; } .card-heading, .section-heading { flex-wrap:wrap; gap:7px; } .market-card { padding:4px; } .market-table-wrap { overflow-x:hidden; } .market-table { min-width:0; table-layout:fixed; font-size:10px; } .market-table th { padding:3px 3px 6px; font-size:8px; line-height:1.15; white-space:normal; overflow-wrap:anywhere; } .market-table th:nth-child(1), .market-table td:nth-child(1) { width:39%; } .market-table th:nth-child(2), .market-table td:nth-child(2) { width:17%; } .market-table th:nth-child(3), .market-table td:nth-child(3) { width:22%; } .market-table th:nth-child(4), .market-table td:nth-child(4) { width:22%; } .market-table td { padding:8px 3px; overflow-wrap:anywhere; } .market-table td strong { font-size:10px; } .market-table td small { margin-top:2px; font-size:8px; } .market-name { gap:3px; } .market-name strong { font-size:10px; line-height:1.15; } .market-name small { font-size:8px; } .market-icon, .market-cart-btn { width:22px; height:22px; flex-basis:22px; border-radius:6px; font-size:11px; } .market-action-grid, .warehouse-action-grid { grid-template-columns:1fr 1fr; gap:7px; margin:9px 0; } .warehouse-action-grid label:last-child { grid-column:1 / -1; } .market-actions { gap:5px; } .market-actions button { flex:1 1 135px; min-height:34px; padding:7px 8px; font-size:10px; } .market-modal-backdrop { padding:8px; } .market-modal { max-height:calc(100vh - 16px); padding:10px; border-radius:13px; } .form-grid { grid-template-columns:repeat(2,1fr); } .enterprise-row { align-items:flex-start; } .enterprise-actions { flex-direction:column; } .warehouse-row { grid-template-columns:27px 1fr auto; gap:6px; padding:8px 0; } .warehouse-icon { width:25px; height:25px; font-size:12px; } .warehouse-name strong { font-size:10px; } .warehouse-name small { font-size:8px; } .warehouse-quantity, .warehouse-value { font-size:10px; } .warehouse-value { grid-column:2 / -1; justify-self:end; } .game-nav { gap:2px; margin:9px 0 8px; padding:3px; } .game-tab { padding:7px 8px; font-size:9px; } .plan-dock { padding:7px max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); gap:7px; } .plan-dock strong { font-size:9px; } .turn-label { font-size:8px; } .plan-dock .primary-btn { min-height:32px; padding:6px 8px; font-size:10px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }