:root{color:#f4f7ff;background:#10243a;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-height:100vh;background:linear-gradient(180deg,#19324d,#0f2235)}.app-shell{min-height:100vh;padding:12px 12px 20px}.top-row{margin:0 auto 12px;max-width:520px}.eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.75}.resource-shell{display:flex;align-items:center;gap:8px}.overview-card{margin-top:8px;padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:26px;background:radial-gradient(circle at top right,rgba(97,149,255,.28),transparent 30%),linear-gradient(180deg,#132235f5,#0b1421f5);box-shadow:0 16px 40px #0000003d}.overview-copy h1{margin:6px 0 8px;font-size:28px;line-height:1.05}.overview-copy p{margin:0;color:#f4f7ffc2;font-size:14px;line-height:1.5}.overview-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.metric-card{padding:12px 14px;border-radius:18px;background:#ffffff12}.metric-card span{display:block;margin-bottom:6px;color:#f4f7ffad;font-size:12px;text-transform:uppercase;letter-spacing:.04em}.metric-card strong{display:block;font-size:18px;line-height:1.2}.metric-card-wide{grid-column:1 / -1}.construction-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding:14px 16px;border:1px solid rgba(255,222,137,.18);border-radius:20px;background:linear-gradient(180deg,#36260ef5,#27190af5);color:#ffefcb}.construction-banner strong{display:block;margin-top:4px}.construction-banner-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.construction-banner-side button{border:0;border-radius:999px;padding:8px 12px;background:linear-gradient(180deg,#ffd874,#ffb545);color:#3e2410;font-weight:800;cursor:pointer}.status-screen{display:grid;place-items:center;min-height:100vh;padding:24px;color:#f4f7ff;text-align:center}.resource-bar{position:sticky;top:0;z-index:100;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 auto 12px;max-width:520px;flex:1}.language-button{border:1px solid rgba(255,255,255,.2);border-radius:999px;background:#0c1926e0;color:#f4f7ff;padding:10px 12px;font-size:12px;font-weight:800;cursor:pointer}.resource-pill{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:#0c1926e0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;font-weight:700}.resource-pill img{width:20px;height:20px}.map-frame{position:relative;margin:0 auto;max-width:520px;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 44px #00000052}.map-background{display:block;width:100%}.slot-layer{position:absolute;top:0;right:0;bottom:0;left:0}.slot{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;padding:0;cursor:pointer}.highlighted-target{position:relative;z-index:180!important;filter:drop-shadow(0 0 .8rem rgba(255,234,136,.9))}.building-stack{position:relative}.building-badges{position:absolute;left:50%;bottom:8%;display:flex;gap:6px;transform:translate(-50%)}.level-badge,.ready-badge{padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.level-badge{background:#111e2bdb;color:#f4f7ff}.ready-badge{background:#ffe46be0;color:#4a2c00}.building-image{display:block;width:100%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.18))}.build-sign{display:flex;flex-direction:column;align-items:center;gap:6px}.build-sign img{width:82%;display:block;filter:drop-shadow(0 8px 10px rgba(0,0,0,.22))}.build-sign span{padding:6px 10px;border-radius:999px;background:#351f0cdb;color:#fff4df;font-size:12px;font-weight:700;white-space:nowrap}.collect-glow{position:absolute;top:18%;right:20%;bottom:26%;left:20%;border-radius:999px;background:radial-gradient(circle,#ffe2696b,#ffe26900 72%);animation:pulse 1.8s ease-in-out infinite}.construction-fog{position:absolute;top:10%;right:8%;bottom:14%;left:8%;display:flex;align-items:center;justify-content:center}.construction-cloud{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle at 35% 45%,rgba(255,255,255,.9),transparent 36%),radial-gradient(circle at 60% 42%,rgba(230,245,255,.88),transparent 40%),radial-gradient(circle at 50% 62%,rgba(186,215,232,.88),transparent 45%),radial-gradient(circle at 45% 52%,rgba(128,160,186,.85),transparent 62%);filter:blur(10px);opacity:.95;animation:fog-drift 4.2s ease-in-out infinite}.construction-timer{position:relative;z-index:1;padding:8px 12px;border-radius:999px;background:#132130d1;color:#f6fbff;font-size:12px;font-weight:800}.error-banner{position:fixed;left:50%;bottom:16px;transform:translate(-50%);z-index:200;max-width:min(92vw,520px);padding:10px 14px;border-radius:16px;background:#7a1926f0;color:#fff;text-align:center;box-shadow:0 12px 30px #00000047}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:150;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:#060d1675}.tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:170;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:#04080e80}.tutorial-card{width:min(100%,520px);padding:18px;border-radius:24px;background:linear-gradient(180deg,#fff3d0,#f8d88d);color:#482b12;box-shadow:0 20px 50px #0000004d}.tutorial-progress{margin-bottom:8px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.tutorial-card p{margin:0;font-size:15px;line-height:1.5}.tutorial-actions{display:flex;justify-content:space-between;gap:10px;margin-top:16px}.tutorial-actions .ghost-button{background:#482b121f;color:#482b12}.tutorial-actions button:last-child{border:0;border-radius:14px;padding:10px 14px;background:linear-gradient(180deg,#6e56ff,#4d39d8);color:#fff;font-weight:700;cursor:pointer}.modal-card{width:min(100%,520px);padding:18px;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:linear-gradient(180deg,#19273afa,#0e1724fa);box-shadow:0 20px 50px #0000004d}.modal-header{display:flex;justify-content:space-between;gap:12px}.modal-header h2{margin:0 0 6px}.modal-header p{margin:0;color:#f4f7ffb8;font-size:14px;line-height:1.45}.ghost-button,.action-row button{border:0;border-radius:14px;padding:10px 14px;font-weight:700;cursor:pointer}.ghost-button{background:#ffffff14;color:#f4f7ff}.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}.stats-grid div,.cost-row{padding:12px 14px;border-radius:16px;background:#ffffff0f}.stats-grid span,.cost-row span{display:block;margin-bottom:6px;color:#f4f7ffad;font-size:12px;text-transform:uppercase;letter-spacing:.04em}.cost-row{margin-top:12px}.action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.action-row button{background:linear-gradient(180deg,#ffd874,#ffb545);color:#3e2410}@keyframes fog-drift{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1.04) translateY(-3px)}}@keyframes pulse{0%,to{opacity:.45}50%{opacity:.95}}@media(max-width:420px){.overview-copy h1{font-size:24px}.overview-metrics{grid-template-columns:1fr}.construction-banner{flex-direction:column;align-items:stretch}.construction-banner-side{align-items:stretch}.resource-bar{gap:6px}.resource-pill{padding:7px 8px;font-size:12px}.modal-header{flex-direction:column}}