@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');
:root{font-family:Nunito,system-ui,sans-serif;color:#213547;background:#e9e5d9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #2669ae;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.48}#app{min-height:100dvh;max-width:480px;margin:auto;background:#f8f4e9;box-shadow:0 0 40px #39445219;position:relative;padding:0 16px calc(92px + env(safe-area-inset-bottom))}.top{padding:22px 0 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.eyebrow{font-size:11px;letter-spacing:.16em;color:#6c8492;font-weight:900;text-transform:uppercase}.title{font-size:27px;line-height:1.1;margin:2px 0 0;font-weight:900;letter-spacing:-.04em}.top-right{display:flex;gap:8px}.small-icon{border:1px solid #d7dfde;background:#fff;border-radius:15px;min-width:44px;height:44px;color:#345366;font-size:18px}.resource-bar{background:#fff;border:1px solid #e1e7e3;border-radius:22px;padding:12px;display:flex;gap:8px;box-shadow:0 6px 18px #6071770d}.resource{min-width:0;flex:1;text-align:center}.resource+.resource{border-left:1px solid #edf0eb}.resource strong{display:block;font-size:16px;line-height:1.2;font-weight:900;white-space:nowrap}.resource span{font-size:10px;color:#6d7d85;font-weight:800;letter-spacing:.03em}.hero{margin:14px 0;padding:16px 18px;background:linear-gradient(110deg,#275d75,#417f85);border-radius:24px;color:#fff;min-height:92px;display:flex;justify-content:space-between;align-items:center;gap:10px;box-shadow:0 9px 20px #285c7540}.hero h2{font-size:17px;line-height:1.25;margin:4px 0 0}.hero p{font-size:12px;opacity:.85;margin:5px 0 0}.hero .star{font-size:42px;color:#ffda7b;line-height:1}.section-head{display:flex;align-items:center;justify-content:space-between;margin:20px 2px 10px}.section-head h2{font-size:18px;margin:0;font-weight:900}.pill{background:#e8eff0;color:#50727d;font-size:11px;font-weight:900;padding:6px 10px;border-radius:99px}.board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#e9e2d4;padding:10px;border:2px solid #d6ccba;border-radius:27px;box-shadow:inset 0 3px 8px #786d561a,0 10px 20px #786d561c;touch-action:none}.cell{aspect-ratio:1;background:#f7f2e8;border:2px dashed #ddd3c3;border-radius:18px;display:grid;place-items:center;position:relative;color:#9a9a8e;min-width:0;padding:0;transition:transform .15s,background .15s,border-color .15s}.cell.filled{border:2px solid #fff;background:linear-gradient(#fffefb,#f2eddf);box-shadow:0 4px 8px #5b604b22}.cell.selected{border:3px solid #37a5a2;background:#e9fbf5;transform:scale(1.035)}.cell.match{border-color:#71b976;background:#f0fff0}.cell .tier{position:absolute;top:5px;left:7px;font-size:10px;font-weight:900;color:#64777f}.cell .job{position:absolute;bottom:3px;right:5px;font-size:10px;color:#447284;font-weight:900;background:#fff9;border-radius:8px;padding:0 3px} .robot{width:85%;height:84%;object-fit:contain;object-position:center;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 3px 2px #263c4a24)}.robot.busy{opacity:.45}.board-tip{text-align:center;color:#7d8582;font-size:12px;margin:11px 0 17px}.actions{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}.btn{min-height:54px;border:0;border-radius:17px;font-weight:900;padding:9px 14px;line-height:1.15}.btn.primary{background:#edb65c;color:#3c382e;box-shadow:0 5px 0 #c99546}.btn.secondary{background:#fff;color:#305d6c;border:1px solid #dce5df;box-shadow:0 4px 0 #dce5df}.btn:active{transform:translateY(2px);box-shadow:none}.btn small{display:block;font-size:10px;opacity:.72;margin-top:3px}.card{background:#fff;border:1px solid #e2e7e2;border-radius:22px;padding:17px;margin:12px 0;box-shadow:0 5px 18px #6578790b}.card h3{margin:0 0 5px;font-size:17px}.card p{margin:3px 0;color:#687d81;font-size:13px}.card .row{display:flex;justify-content:space-between;gap:10px;align-items:center}.card .btn{min-height:44px;margin-top:12px}.cost{font-size:13px;font-weight:800;color:#526c72}.muted{color:#75858b}.progress{height:10px;background:#e7eeeb;border-radius:99px;overflow:hidden;margin:14px 0}.progress span{height:100%;display:block;background:#57b7a3;border-radius:99px}.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:480px;width:100%;display:flex;background:#fff;border-top:1px solid #e4e8e4;padding:8px 5px calc(8px + env(safe-area-inset-bottom));z-index:5}.nav button{flex:1;border:0;background:none;color:#7d8b8d;font-size:10px;font-weight:900;padding:5px 0;min-height:49px}.nav button.active{color:#248179}.nav .ico{display:block;font-size:20px;line-height:22px;margin-bottom:3px}.sheet-back{position:fixed;inset:0;background:#1b2f3b77;z-index:10;display:flex;align-items:flex-end;justify-content:center}.sheet{width:min(480px,100%);max-height:85dvh;overflow:auto;background:#fffdf7;border-radius:28px 28px 0 0;padding:18px 20px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -15px 40px #1b2f3b33}.sheet .handle{width:45px;height:5px;background:#d6d9d4;border-radius:99px;margin:0 auto 14px}.sheet h2{margin:0 0 4px;font-size:22px}.sheet p{color:#6c7d80;font-size:14px;margin:5px 0 16px}.jobs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.jobs button{border:1px solid #dce4e0;border-radius:13px;background:#f5f8f5;min-height:46px;color:#35576a;font-weight:800}.jobs button.current{background:#dcf2eb;border-color:#65bba8}.toast{position:fixed;z-index:20;left:50%;bottom:calc(85px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(440px,calc(100% - 24px));background:#324f5a;color:white;padding:13px 16px;border-radius:13px;text-align:center;box-shadow:0 8px 25px #0003}.login{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px}.login .mascot{font-size:74px}.login h1{font-size:33px;margin:12px 0}.login p{color:#6c7d80;max-width:300px}.login .btn{width:100%;max-width:320px;margin:6px}.tab-intro{margin:7px 2px 20px;color:#6b7c7f;font-size:14px}.model-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.model-card{text-align:center;margin:0;padding:12px}.model-card .robot{height:80px;width:80px;margin:auto}.model-card.locked{opacity:.48}.model-card strong{display:block}.model-card small{color:#718589}.meta{font-size:12px;color:#607981;margin:9px 2px}@media(max-width:350px){#app{padding-left:10px;padding-right:10px}.board{gap:5px;padding:7px}.cell{border-radius:14px}.nav button{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Fixed art sizes outside the board prevent flexible rows from covering labels. */
.sheet .row .robot{flex:none;width:72px;height:72px;margin-left:12px}
.sheet .row{display:flex;align-items:center;justify-content:space-between}
.login .mascot .robot{width:110px;height:110px;margin:auto}
.cell{user-select:none;cursor:grab}
.cell.drag-source .robot{opacity:.25}
.cell[data-production="coins"]{--job-bg:#d0f1d1;--job-border:#7cb889}
.cell[data-production="parts"]{--job-bg:#ffe0b8;--job-border:#dda873}
.cell[data-production="energy"]{--job-bg:#c5e3ff;--job-border:#81b5e1}
.cell[data-production="research"]{--job-bg:#e6d4f8;--job-border:#b997d6}
.cell[data-production="scout"]{--job-bg:#b6eee6;--job-border:#75c2b9}
.cell.filled[data-production]:not([data-production=""]):not(.selected):not(.match):not(.drop-target){background:var(--job-bg);border:3px solid var(--job-border)}
.cell.drop-target{border:3px solid #37a5a2;background:#dcf2eb}
.robot.drag-ghost{position:fixed;z-index:30;pointer-events:none;transition:none;filter:drop-shadow(0 10px 8px #263c4a44)}
.cell .job{white-space:nowrap;background:#fffef4;padding:1px 4px;right:3px;bottom:2px;line-height:1.3}
.cell.assembling{border-color:#a5aeb7;background:#edf0f3;cursor:wait}
.cell.assembling .robot{opacity:.5;transform:translateY(-5px)}
.merge-status{position:absolute;bottom:19px;left:5px;right:5px;color:#645024;font-size:11px;font-weight:900;line-height:1.1}
.merge-track{display:block;height:4px;margin-top:3px;border-radius:4px;background:#ddcfad;overflow:hidden}
.merge-fill{display:block;height:100%;background:#bb8534;transform-origin:left;transform:scaleX(0)}
.cell .merge-time{display:inline-block;margin-top:4px;padding:2px 5px;border-radius:8px;background:#fff;color:#447284;font-variant-numeric:tabular-nums}
.merge-dialog-back{align-items:center;padding:16px}
.merge-dialog{max-width:400px;border-radius:26px;text-align:center;padding:26px 22px}
.merge-dialog h2{margin-top:10px}
.merge-portrait .robot{width:90px;height:90px;margin:18px auto}
.merge-dialog-status .merge-track{height:8px;margin-bottom:12px}
.merge-dialog-status .merge-time{display:inline-block;border-radius:16px;padding:8px 22px;background:#6b542b;color:#fff;font-size:38px;font-weight:900;font-variant-numeric:tabular-nums;margin-bottom:18px}
.merge-dialog .btn{width:100%}
.speed-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.speed-options .btn{padding:12px 6px;min-height:64px;font-size:13px}
.speed-options small{display:block;font-variant-numeric:tabular-nums}
.free-speed{margin-top:10px}
.merge-dialog .speed-note{font-size:12px;margin:10px 0;color:#6b6458}
.cell.assembling .merge-status{bottom:5px}
.cell.assembling .job{display:none}
.workshop-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0;text-align:center;touch-action:pan-y}
.workshop-navigation h2{font-size:18px;margin:0 0 4px}
.workshop-navigation span{font-size:11px;color:#6d7d85}
.workshop-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.workshop-dots i{width:7px;height:7px;background:#d4d9d3;border-radius:50%}
.workshop-dots i.current{background:#397e83}
.locked-workshop{padding:28px 20px;text-align:center;border:2px dashed #d6ccba;border-radius:27px;background:#f2eddf;touch-action:pan-y}
.locked-workshop p{color:#65777c;font-size:14px;line-height:1.5}
.workshop-building{display:block;font-size:72px;color:#397e83}
.locked-workshop .btn{width:100%}
.mastery-card{border-color:#c2d9ce;background:#f4faf3}
.mastery-progress{display:block;width:100%;height:10px;margin-top:12px;accent-color:#397e83;border:0;border-radius:10px;overflow:hidden}
.mastery-progress::-webkit-progress-bar{background:#dde9df}
.mastery-progress::-webkit-progress-value{background:#397e83}
.mastery-card small{display:block;color:#65777c;line-height:1.5}
.city-repairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px}
.city-repair{padding:16px 10px;background:#eee9dd;border:1px solid #d6ccba;border-radius:18px;text-align:center}
.city-repair.restored{background:#f5fbef;border-color:#b4cda6}
.city-completed{margin:16px 0}
.city-completed-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;margin:6px 0}
.city-completed-row strong{font-size:14px}
.storage-card h4{margin:16px 0 8px}
.storage-card .row{margin:6px 0;font-size:14px}
.storage-card details{margin-top:16px;font-size:14px}
.storage-card summary{cursor:pointer;padding:8px 0}
.storage-level{margin-top:12px;padding-top:12px;border-top:1px solid #dce4e0}
.telegram-launch{display:block;text-decoration:none;min-height:44px}
.city-repair strong,.city-repair span{display:block;font-size:13px}
.city-repair span{font-size:11px;color:#65777c;margin-top:5px}
.repair-symbol{font-size:38px;height:64px;color:#94948b}
.restored .repair-symbol{color:#397e83}
.city-lamp{height:64px;position:relative;margin:0 auto 8px;width:60px}
.lamp-post{position:absolute;left:28px;top:19px;height:43px;width:5px;background:#647780;border-radius:3px}
.lamp-light{position:absolute;left:17px;top:4px;width:27px;height:25px;background:#a6ada9;border:4px solid #647780;border-radius:8px}
.restored .lamp-light{background:#ffe285;box-shadow:0 0 22px 8px #ffe28580}
.nav button{min-width:0;font-size:9px;flex-basis:0}
.stats-totals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stats-total{margin:0;padding:15px;min-width:0}
.stats-total span,.stats-total strong,.stats-total small{display:block}
.stats-total span{font-size:12px;color:#687d81}
.stats-total strong{font-size:18px;margin:6px 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stats-total small{color:#687d81;font-size:11px}
.stats-robot{display:flex;align-items:center;width:100%;text-align:left;gap:14px;padding:14px;margin:10px 0;color:inherit}
.stats-robot .robot{width:60px;height:64px;flex-shrink:0}
.stats-robot-info{min-width:0;flex:1}
.stats-robot-info strong,.stats-robot-info span,.stats-robot-info small{display:block}
.stats-robot-info strong{font-size:14px;margin-bottom:5px}
.stats-robot-info span,.stats-robot-info small{font-size:12px;line-height:1.5;color:#687d81}
.stats-robot-info small{color:#397e83}
.stats-timer .merge-track{max-width:170px;margin:5px 0}
.cell .tier,.cell .job,.cell .merge-status{z-index:1}
.cell .tier{background:#fffdf5e8;border-radius:5px;padding:1px 3px;top:3px;left:3px}
.cell.assembling .robot{height:68%;opacity:.55;transform:translateY(-8px)}
.merge-portrait .robot{width:140px;height:140px;margin:12px auto}
.sheet .row .robot{width:100px;height:110px;flex-shrink:0}
.model-card .robot{width:110px;max-width:100%;height:110px}
.login .mascot .robot{width:170px;height:170px}
.crate-dialog-back{align-items:center;padding:12px}
.crate-dialog{max-width:410px;border-radius:26px;text-align:center}
.crate-dialog .btn{width:100%;margin-top:12px}
.crate-wheel-frame{position:relative;width:min(280px,100%);aspect-ratio:1;margin:22px auto}
.crate-wheel{position:absolute;inset:0;border:6px solid #c89946;border-radius:50%;background:repeating-conic-gradient(from -18deg,#f4e5c6 0deg 36deg,#dcebe7 36deg 72deg);box-shadow:0 6px 16px #263c4a22}
.crate-pointer{position:absolute;z-index:2;top:-18px;left:50%;transform:translateX(-50%);font-size:29px;color:#a15e27;text-shadow:0 2px #fff}
.crate-wheel-robot{position:absolute;width:42px;height:57px;transform:translate(-50%,-50%)}
.crate-wheel-robot .robot{width:42px;height:42px}
.crate-wheel-robot span{font-size:9px;font-weight:900;white-space:nowrap;color:#304e5a}
.crate-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#397e83;color:#ffe285;border:3px solid #c89946;border-radius:50%;width:46px;height:46px;font-size:28px;line-height:40px}
.crate-result{min-height:38px;font-size:14px;color:#397e83}
.crate-result .robot{width:94px;height:100px;margin:0 auto 8px}
.crate-result strong,.crate-result span{display:block;line-height:1.5}
.crate-odds{font-size:12px;color:#536d76;text-align:left;margin:18px 0}
.crate-odds summary{cursor:pointer;text-align:center;font-weight:800}
.crate-odds .row{display:flex;justify-content:space-between;margin:8px 0}
