:root { --ink:#173738; --muted:#667c78; --cream:#fffaf0; --paper:#fffdf7; --line:#193f3c; --green:#43c875; --green-dark:#168355; --lime:#b8ec63; --orange:#ff8b3d; --orange-dark:#d75b22; --yellow:#ffd35d; --blue:#50c8d7; --red:#df584b; --shadow:0 7px 0 rgba(20,57,55,.18); font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif; color:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:#dcefdc; }
button,input,select { font:inherit; }
button { color:inherit; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:4px solid #40aedd; outline-offset:2px; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:100; padding:.8rem 1rem; background:white; border:2px solid var(--line); }
.skip-link:focus { top:1rem; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app { min-height:100vh; }
.menu-screen { min-height:100vh; display:grid; grid-template-columns:minmax(330px,520px) 1fr; overflow:hidden; background:linear-gradient(145deg,#fffaf0 0 42%,#9adf8a 42%); }
.menu-card { z-index:2; align-self:center; padding:clamp(2rem,7vw,6rem); padding-right:2rem; }
.logo-mark { width:84px; height:84px; display:grid; place-items:center; transform:rotate(-5deg); background:var(--orange); border:4px solid var(--line); border-radius:24px; box-shadow:7px 7px 0 var(--line); }
.logo-mark span { color:white; font:900 25px ui-monospace,monospace; transform:rotate(5deg); }
.eyebrow,.panel-kicker { letter-spacing:.13em; font-weight:900; font-size:.73rem; text-transform:uppercase; }
h1 { font:900 clamp(3rem,7vw,6.4rem)/.82 ui-rounded,"Trebuchet MS",sans-serif; letter-spacing:-.075em; margin:1.8rem 0 1.4rem; }
h1 em { color:var(--orange); font-style:normal; }
.menu-copy { max-width:390px; font-size:1.15rem; line-height:1.5; color:#506b68; }
.menu-actions { display:grid; max-width:330px; gap:.75rem; margin-top:2rem; }
.button { min-height:48px; border:2px solid var(--line); border-radius:14px; padding:.75rem 1.15rem; font-weight:900; letter-spacing:.03em; cursor:pointer; box-shadow:0 4px 0 var(--line); transition:transform .12s,box-shadow .12s; }
.button:hover { transform:translateY(-2px); box-shadow:0 6px 0 var(--line); }
.button:active { transform:translateY(3px); box-shadow:0 1px 0 var(--line); }
.button-primary,.button-run { background:var(--orange); color:#fff; }
.button-secondary { background:var(--yellow); }
.button-quiet { background:white; }
.button-danger { background:#ffe7e3; color:#922e27; }
.inline-message { min-height:1.5rem; color:var(--red); font-weight:800; }
.menu-landscape { position:relative; min-height:100vh; overflow:hidden; }
.sun { position:absolute; width:140px;height:140px;border-radius:50%;background:#ffe47b;right:11%;top:8%;box-shadow:0 0 0 16px rgba(255,228,123,.25); }
.cloud,.world-cloud { position:absolute; width:110px;height:30px;border-radius:30px;background:#fff;opacity:.85; }
.cloud:before,.cloud:after,.world-cloud:before,.world-cloud:after { content:"";position:absolute;background:inherit;border-radius:50%;width:45px;height:45px;left:18px;bottom:0; }
.cloud:after,.world-cloud:after { width:60px;height:60px;left:50px; }
.cloud-a { top:12%;left:7%;}.cloud-b{top:26%;right:4%;transform:scale(.7)}
.hill { position:absolute;border-radius:50% 50% 0 0;bottom:-15%;transform:rotate(-6deg); }
.hill-back { width:110%;height:60%;left:-5%;background:#47b96c; }.hill-front{width:120%;height:43%;left:-8%;background:#8adb52;bottom:-10%;}
.tiny-road { position:absolute;bottom:16%;left:-5%;width:110%;height:13%;background:#e9c894;transform:rotate(-8deg);border-block:7px solid #f9e5b8; }
.tiny-factory,.tiny-shop { position:absolute;z-index:2;filter:drop-shadow(8px 10px 0 rgba(25,63,60,.18)); }
.tiny-factory{left:16%;bottom:34%;width:180px;height:120px;background:#f6d36a;border:4px solid var(--line);clip-path:polygon(0 35%,30% 35%,30% 12%,48% 32%,48% 10%,68% 35%,100% 35%,100% 100%,0 100%);}
.tiny-shop{right:12%;bottom:19%;width:150px;height:130px;background:#fff7de;border:4px solid var(--line);display:grid;place-items:center;font-weight:900;}
.tiny-shop:before{content:"";position:absolute;top:-25px;width:170px;height:45px;background:repeating-linear-gradient(90deg,var(--orange) 0 24px,#fff 24px 48px);border:4px solid var(--line);transform:skew(-12deg);}
.tiny-truck{position:absolute;z-index:3;bottom:23%;left:46%;font-size:65px;color:var(--orange);transform:rotate(-8deg);text-shadow:4px 4px var(--line);}
.topbar { position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto auto minmax(150px,1.3fr) repeat(3,minmax(100px,1fr));gap:1px;background:var(--line);border-bottom:3px solid var(--line); }
.topbar>* { background:#fffaf0; padding:.65rem 1rem; }
.icon-button { border:0;cursor:pointer;font-size:1.35rem;font-weight:900;min-width:52px; }
.date-block,.resource { display:flex;flex-direction:column;justify-content:center; }
.date-block span,.resource span { color:var(--muted);font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em; }
.date-block strong,.resource strong { font:900 1rem ui-monospace,monospace;white-space:nowrap; }
.resource-cash { background:var(--yellow); }.resource-cash strong{font-size:1.25rem;}
.game-layout { display:grid;grid-template-columns:minmax(330px,.9fr) minmax(480px,1.3fr);gap:1rem;padding:1rem;max-width:1500px;margin:auto;padding-bottom:110px; }
.panel { background:var(--paper);border:3px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden; }
.panel-kicker { min-height:48px;padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--line);background:#eff7e8; }
.pill { background:white;border:2px solid var(--line);padding:.2rem .55rem;border-radius:999px; }
.world { position:relative;min-height:430px;overflow:hidden;background:#7ed7e4;isolation:isolate; }
.world-sky { position:absolute;inset:0 0 45%;background:linear-gradient(#64ccdc,#b9ecde);z-index:-3; }
.world-ground { position:absolute;inset:39% -15% -30%;background:#7ed956;transform:rotate(-5deg);z-index:-2; }
.road { position:absolute;width:140%;height:120px;left:-20%;top:61%;background:#dfbd89;border-block:9px solid #f7dfb2;transform:rotate(-5deg);z-index:-1; }
.world-cloud.c1{top:11%;left:10%;transform:scale(.7)}.world-cloud.c2{top:18%;right:8%;transform:scale(.45)}
.building { position:absolute;border:3px solid var(--line);border-radius:5px;box-shadow:8px 10px 0 rgba(23,55,56,.2);font-size:.65rem;font-weight:900;text-align:center; }
.building b { position:absolute;bottom:8px;left:0;right:0; }
.factory { width:145px;height:120px;left:7%;top:40%;background:#f2c85e;clip-path:polygon(0 27%,25% 27%,25% 9%,45% 26%,45% 8%,67% 27%,100% 27%,100% 100%,0 100%);padding-top:80px; }
.chimney { position:absolute;width:20px;height:55px;background:#e16f42;right:15px;top:0;border:3px solid var(--line); }
.warehouse{width:145px;height:105px;left:37%;top:56%;background:#eff0da;}.warehouse:before{content:"";position:absolute;left:-9px;top:-29px;width:155px;height:45px;background:#e7e9d1;border:3px solid var(--line);transform:skew(-19deg)}
.warehouse .door{position:absolute;left:45px;bottom:0;width:55px;height:65px;background:repeating-linear-gradient(#9db4ae 0 10px,#c5d5ce 10px 13px);border:3px solid var(--line)}
.box-stack{position:absolute;right:6px;bottom:22px;font-size:30px;color:#bd763a}.shop{width:115px;height:110px;right:7%;top:40%;background:#fff2d0;padding-top:75px}.awning{position:absolute;left:-6px;top:-12px;width:121px;height:35px;background:repeating-linear-gradient(90deg,var(--orange) 0 18px,#fff 18px 36px);border:3px solid var(--line)}
.delivery-truck{position:absolute;top:66%;left:22%;font-size:45px;color:var(--orange);text-shadow:2px 2px var(--line);z-index:4}.founder{position:absolute;right:28%;bottom:7%;display:grid;text-align:center;place-items:center;font-size:28px}.founder span{color:#734626}.founder i{display:block;width:27px;height:35px;background:var(--orange);border:3px solid var(--line);border-radius:8px}.founder b{font-size:.55rem;background:white;border:2px solid var(--line);padding:2px 6px;border-radius:8px;margin-top:3px}
.news-card { display:flex;gap:.8rem;padding:1rem;background:#fff;border-top:3px solid var(--line);min-height:105px;}.news-icon{display:grid;place-items:center;flex:0 0 42px;height:42px;background:var(--yellow);border:2px solid var(--line);border-radius:12px;font-size:1.5rem}.news-card small{display:block;color:var(--orange-dark);font-weight:900;letter-spacing:.1em}.news-card strong{display:block;margin:.1rem 0}.news-card p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.35}
.control-column{min-width:0}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:.7rem}.tab{min-height:44px;border:2px solid var(--line);border-radius:12px;background:#fff;font-weight:900;cursor:pointer;box-shadow:0 3px var(--line)}.tab.active{background:var(--yellow);transform:translateY(2px);box-shadow:0 1px var(--line)}
.tab-content{display:grid;gap:.8rem}.card{background:var(--paper);border:2px solid var(--line);border-radius:18px;box-shadow:0 4px 0 rgba(23,55,56,.16);overflow:hidden}.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem;border-bottom:1px solid #cfddd7}.card-header h2,.card-header h3{margin:0;font-size:1.05rem}.card-header p{margin:.15rem 0 0;color:var(--muted);font-size:.8rem}.card-body{padding:1rem}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.metric{padding:.75rem;border:1px solid #c7d9d2;border-radius:12px;background:#f7fbf4}.metric span{display:block;color:var(--muted);font-size:.72rem;font-weight:800}.metric strong{font:900 1rem ui-monospace}.control-row{display:grid;grid-template-columns:1fr minmax(150px,1fr);align-items:center;gap:1rem;padding:.7rem 0;border-bottom:1px dashed #d3ded9}.control-row:last-child{border:0}.control-row label{font-weight:900}.control-row label small{display:block;color:var(--muted);font-weight:600}.stepper{display:grid;grid-template-columns:42px 1fr 42px}.stepper button,.stepper input,.select{height:42px;border:2px solid var(--line);background:white;text-align:center;font-weight:900}.stepper button{cursor:pointer;background:#eef5e8}.stepper button:first-child{border-radius:10px 0 0 10px}.stepper button:last-child{border-radius:0 10px 10px 0}.stepper input{width:100%;border-inline:0}.select{width:100%;border-radius:10px;padding:0 .5rem}.forecast{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;background:#e5f6ec;border:2px solid #2d8c62;border-radius:12px}.forecast strong{font:900 1.2rem ui-monospace}.callout{padding:.8rem;border-left:5px solid var(--blue);background:#e8f7f8;border-radius:8px;font-size:.85rem}.locked{filter:saturate(.4);opacity:.72}.action-dock{position:fixed;z-index:15;bottom:0;left:0;right:0;display:flex;justify-content:flex-end;align-items:center;gap:1.5rem;padding:.75rem max(1rem,calc((100vw - 1470px)/2));background:rgba(255,253,247,.95);border-top:3px solid var(--line);backdrop-filter:blur(8px)}.action-dock>div{text-align:right}.action-dock span,.action-dock small{display:block;color:var(--muted);font-size:.72rem}.action-dock strong{font:900 1.05rem ui-monospace}.button-run{min-width:210px;padding:.55rem 1.4rem}.button-run span{font-size:1rem;color:#fff}.button-run small{color:#ffe8d9}
.toast{position:fixed;z-index:100;left:50%;bottom:105px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--line);color:white;border-radius:12px;padding:.75rem 1rem;font-weight:800;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-backdrop{position:fixed;z-index:50;inset:0;background:rgba(12,35,34,.7);display:grid;place-items:center;padding:1rem}.modal{width:min(620px,100%);max-height:92vh;overflow:auto;background:var(--paper);border:3px solid var(--line);border-radius:22px;box-shadow:10px 12px 0 rgba(0,0,0,.25)}.modal-header{padding:1.2rem;border-bottom:2px solid var(--line);background:#eff7e8}.modal-header h2{margin:0}.modal-body{padding:1.2rem}.modal-actions{display:flex;justify-content:flex-end;gap:.7rem;padding:1rem;border-top:1px solid #d4dfda}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}.result-stat{padding:.7rem;background:#f0f5eb;border-radius:10px}.result-stat span{display:block;color:var(--muted);font-size:.7rem}.result-stat strong{font:900 .95rem ui-monospace}.explanations{padding-left:1.2rem}.explanations li{margin:.6rem 0}.progress-track{height:12px;border:2px solid var(--line);border-radius:10px;overflow:hidden}.progress-track i{display:block;height:100%;background:var(--orange);width:0}.animation-stage{text-align:center;padding:2rem}.animation-stage .big-icon{font-size:5rem;display:block;animation:bob .8s infinite alternate}.animation-stage h3{margin:.5rem}.animation-stage p{color:var(--muted)}
@keyframes bob{to{transform:translateY(-12px)}}
@keyframes drive{from{transform:translateX(-180px)}to{transform:translateX(430px)}}
.world.running .delivery-truck{animation:drive 2s linear infinite}
@media (max-width:900px){.menu-screen{grid-template-columns:1fr}.menu-card{align-self:start;padding:3rem 2rem}.menu-landscape{min-height:48vh}.game-layout{grid-template-columns:1fr}.world{min-height:330px}.topbar{grid-template-columns:auto auto repeat(3,1fr)}.hide-small{display:none}.resource{padding:.55rem}.world-card{order:2}}
@media (max-width:560px){.menu-card{padding:2rem 1.2rem}.menu-landscape{min-height:43vh}h1{font-size:3.4rem}.topbar{grid-template-columns:38px 52px repeat(4,minmax(0,1fr))}.topbar>*{padding:.45rem .22rem}.topbar .hide-small{display:flex}.resource strong,.date-block strong{font-size:.62rem}.resource-cash strong{font-size:.69rem}.resource span,.date-block span{font-size:.48rem}.game-layout{padding:.6rem;padding-bottom:115px}.world{min-height:290px}.factory{transform:scale(.75);transform-origin:left center}.warehouse{transform:scale(.72);transform-origin:center}.shop{transform:scale(.75);transform-origin:right center}.tabs{overflow-x:auto;grid-template-columns:repeat(4,minmax(92px,1fr))}.grid-2,.result-grid{grid-template-columns:1fr 1fr}.control-row{grid-template-columns:1fr}.action-dock{justify-content:space-between;gap:.6rem}.button-run{min-width:170px}.action-dock>div{text-align:left}.modal-actions{flex-wrap:wrap}.modal-actions .button{flex:1}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}}