:root{color-scheme:dark;--bg:#101a1b;--panel:#182426;--line:#304244;--muted:#96a9a9;--ink:#e5eeea;--mint:#b5e6bc;--accent:#d5e8a2;font-family:Segoe UI,Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}header,main{max-width:1540px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:30px 38px}.brand{display:flex;gap:15px;align-items:center}.mark{font-size:45px;color:var(--mint)}h1{font-size:23px;letter-spacing:3px;margin:0;font-weight:650}h1 span{font-weight:300;color:var(--mint)}p{margin:6px 0 0}.brand p{color:var(--muted);font-size:12px;letter-spacing:1px}.connection{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.connection small{color:var(--muted);font-size:11px}.badge{font-size:10px;letter-spacing:1.5px;border:1px solid var(--line);padding:8px 13px;border-radius:20px}.connected{color:var(--mint)}.reconnecting{color:#ead6a0}.disconnected{color:#e3a998}main{padding:0 38px 25px}.environment{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:21px 25px}.section-label,.dish-heading{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.section-label>span{float:right;letter-spacing:0}.sliders{display:grid;grid-template-columns:repeat(5,1fr);gap:35px;margin-top:24px}.slider label{display:flex;justify-content:space-between;font-size:13px;gap:8px}.slider output{font-variant-numeric:tabular-nums;color:var(--accent)}input[type=range]{width:100%;margin:18px 0 4px;accent-color:var(--mint);cursor:pointer}input:disabled{opacity:.4}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:19px 0}.toolbar>div{display:flex;gap:7px;align-items:center}button{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:10px 17px;font:inherit;font-size:12px;cursor:pointer}button:hover{border-color:var(--mint)}button.active,#pause{background:var(--mint);color:#16271d;border-color:var(--mint)}button:disabled{opacity:.4;cursor:default}.separator{height:20px;width:1px;background:var(--line);margin:0 10px}.speed-label{font-size:11px;color:var(--muted);margin-right:8px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px}.dish-panel,aside{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}.dish-heading{padding:18px 22px;display:flex;justify-content:space-between}.canvas-wrap{position:relative;background:radial-gradient(ellipse at center,#1f3734,#142526);margin:0 16px;border:1px solid #47625a;border-radius:40px;overflow:hidden;height:clamp(360px,55vh,720px)}canvas{display:block;width:100%;height:100%}footer{display:flex;justify-content:space-between;gap:10px;padding:16px 22px;font-size:10px;color:var(--muted)}footer i{display:inline-block;background:var(--mint);width:6px;height:6px;border-radius:50%;margin-right:6px}aside{padding:22px}.population{display:flex;flex-direction:column;gap:5px;padding:30px 0 24px;border-bottom:1px solid var(--line)}.population>span{font-size:12px;color:var(--muted)}.population strong{font-size:64px;letter-spacing:-3px;line-height:1.1;font-weight:400;color:var(--accent);font-variant-numeric:tabular-nums}.population small{font-size:9px;color:var(--muted);letter-spacing:2px}dl{margin:22px 0}dl>div{display:flex;justify-content:space-between;gap:10px;margin:14px 0;font-size:12px}dt{color:var(--muted)}dd{margin:0;font-variant-numeric:tabular-nums}.server{border-top:1px solid var(--line);padding-top:17px;display:flex;flex-direction:column;gap:10px;font-size:10px;color:var(--muted)}.server span{display:flex;justify-content:space-between}.server b{font-weight:400;color:var(--mint)}.note{font-size:11px;line-height:1.65;color:var(--muted);margin-top:20px}#message{font-size:12px;color:var(--muted);min-height:24px;padding-top:17px}#message.error{color:#ffc4b5}#extinction{position:absolute;top:45%;width:100%;text-align:center;color:#ffd4ba;font-size:23px}#extinction small{font-size:12px}
@media(max-width:1000px){header{padding:22px}main{padding:0 22px 22px}.sliders{gap:18px;grid-template-columns:repeat(3,1fr)}.workspace{grid-template-columns:minmax(0,1fr) 240px}.section-label>span{display:none}footer{flex-direction:column}.connection small{display:none}}
@media(max-width:700px){header{gap:12px}h1{font-size:16px;letter-spacing:2px}.brand p{font-size:10px}.mark{font-size:30px}.badge{font-size:8px;padding:7px}.sliders{grid-template-columns:repeat(2,1fr)}.workspace{grid-template-columns:1fr}.canvas-wrap{height:420px}.toolbar{gap:10px;flex-wrap:wrap}button{padding:10px 12px}.population{padding:15px 0}.population strong{font-size:48px}aside dl{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.dish-heading{font-size:9px}.speed-label{display:none}}
.view-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 18px 12px;font-size:11px;color:var(--muted)}.view-tools button{padding:5px 12px}.view-tools label{display:flex;align-items:center;gap:4px;margin-left:5px}.canvas-wrap{height:clamp(440px,67vh,850px);border-radius:15px}#dish{touch-action:none;cursor:grab}#dish:active{cursor:grabbing}.population{padding:16px 0}.population strong{font-size:48px}dl>div{margin:10px 0}.workspace{align-items:start}#colonies{display:grid;gap:6px;margin-top:15px;max-height:240px;overflow:auto}#colonies button{text-align:left;font-size:11px;padding:8px 9px}dialog{color:var(--ink);background:#172629;border:1px solid #4b6762;border-radius:18px;width:min(780px,94vw);max-height:90vh;padding:28px;box-shadow:0 25px 100px #0009}dialog::backdrop{background:#030d11bf;backdrop-filter:blur(5px)}.dialog-heading{display:flex;justify-content:space-between;align-items:start}.dialog-heading small{color:var(--mint);font-size:10px;letter-spacing:2px}.dialog-heading h2{font-size:27px;font-weight:450;margin:10px 0}.dialog-heading button{font-size:24px;padding:0 10px}.dialog-intro,.dialog-note{color:var(--muted);font-size:12px;line-height:1.6}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:20px 0}.form-grid label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#c1d0cb}.form-grid input,.form-grid select{width:100%;padding:10px 12px;background:#0b1c20;color:var(--ink);border:1px solid #3b5653;border-radius:6px;font:inherit}.form-grid input:focus,.form-grid select:focus{outline:1px solid var(--mint)}dialog h3{font-size:14px;font-weight:500;margin-top:24px}details{border-top:1px solid var(--line);padding-top:18px}summary{cursor:pointer;color:var(--mint);font-size:13px}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin:20px 0}#create-world{background:var(--mint);color:#142720}#world-error{color:#ffb8a8;font-size:13px}.dialog-note{display:block}@media(max-width:700px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}dialog{padding:20px}.view-tools{font-size:10px}#colonies{max-height:160px}}
aside{max-height:calc(clamp(440px,67vh,850px) + 115px);overflow:auto}#colonies{max-height:155px;margin-bottom:18px}.population{margin-bottom:18px}.view-tools #zoom-label{min-width:34px;text-align:center}@media(max-width:700px){aside{max-height:none}}

/* Поле занимает всю ширину своей области, без вложенной рамки чашки. */
header,main{max-width:none}header{padding:16px 20px}main{padding:0 16px 12px}
.canvas-wrap{margin:0;border:0;border-radius:0;height:calc(100dvh - 310px);min-height:380px}
.workspace{gap:12px}.dish-panel{border-radius:6px}.dish-heading{padding:10px 16px}
.environment{padding:12px 18px}.sliders{margin-top:12px}input[type=range]{margin-top:10px}
.workspace:fullscreen{display:block;background:#102523;width:100vw;height:100vh}
.workspace:fullscreen aside,.workspace:fullscreen .dish-heading,.workspace:fullscreen footer{display:none}
.workspace:fullscreen .dish-panel{border:0;border-radius:0;height:100vh}
.workspace:fullscreen .view-tools{height:44px;padding:6px 12px}
.workspace:fullscreen .canvas-wrap{height:calc(100dvh - 44px);min-height:0}
@media(max-width:700px){.canvas-wrap{height:65dvh;min-height:320px}main{padding:0 8px 12px}}

#colony-card{position:absolute;right:12px;top:12px;width:min(340px,calc(100% - 24px));max-height:calc(100% - 30px);overflow:auto;padding:16px;background:#102724f2;border:1px solid #83b69c;border-radius:10px;box-shadow:0 8px 30px #0005}
#colony-card[hidden]{display:none}#colony-card h3{margin:0 28px 8px 0;font-size:16px}#colony-card p,#colony-card small{font-size:11px;color:#a9c2b4;line-height:1.5}#colony-card dl{margin:14px 0}#colony-card dl>div{font-size:11px;gap:12px}#colony-card dd{text-align:right;white-space:nowrap}#close-colony{position:absolute;right:8px;top:8px;padding:2px 8px;font-size:18px}

.form-grid small{font-size:11px;line-height:1.45;color:#91aaa2;font-weight:400}

/* Просторная карта и естественная высота содержимого, одна прокрутка страницы. */
.workspace{grid-template-columns:minmax(0,1fr)}
.canvas-wrap{height:auto;min-height:0;overflow:visible}
#dish{height:max(640px,82dvh)}
aside{max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 28px;align-items:start}
aside>.section-label{grid-column:1/-1}#colonies{max-height:none;overflow:visible;margin:0}
aside dl{margin:0}aside .population{margin:0;padding-top:0}.server{grid-column:1/-1}
#colony-card{position:relative;top:auto;right:auto;width:100%;max-height:none;overflow:visible;border-radius:0;box-shadow:none}
#colony-card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
#evolution-panel{margin:12px 0;padding:10px 0;border-top:1px solid #38564d;border-bottom:1px solid #38564d}
#evolution-panel summary{font-size:12px}
#evolution-panel p,#evolution-panel small{display:block;margin:8px 0;color:#a9c2b4;font-size:11px;line-height:1.45}
.evolution-gene-label{display:flex;align-items:center;gap:8px;font-size:11px;color:#c1d0cb}
.evolution-gene-label select{min-width:0;padding:5px 7px;color:var(--ink);background:#0b1c20;border:1px solid #3b5653;border-radius:5px;font:inherit}
#evolution-chart{display:block;width:100%;height:125px;margin:8px 0;background:#0c2020;border-radius:6px}
#evolution-lineages{font-size:11px;color:#c1d0cb}#evolution-lineages ol{margin:5px 0 5px 20px;padding:0}#evolution-lineages li{margin:4px 0}
.workspace:fullscreen #dish{height:100%}
.workspace:fullscreen #colony-card{position:absolute;top:12px;right:12px;width:340px}
.workspace:fullscreen #colony-card dl{display:block}
@media(max-width:700px){#dish{height:max(560px,80dvh)}aside{display:block}aside>*{margin-bottom:16px}#colony-card dl{grid-template-columns:1fr}aside dl{display:block}}

aside{display:block}aside .population{margin:12px 0 20px}aside dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 28px;margin:20px 0}#colonies{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:12px}

/* Статистика снова справа; её высота не ограничена и собственного скролла нет. */
.workspace{grid-template-columns:minmax(0,1fr) 280px;align-items:start}
aside{display:block;max-height:none;overflow:visible}
aside dl{display:block;margin:20px 0}#colonies{grid-template-columns:1fr;max-height:none;overflow:visible}
@media(max-width:850px){.workspace{grid-template-columns:minmax(0,1fr) 220px}aside{padding:14px}.view-tools{padding-left:10px;padding-right:10px}}
@media(max-width:560px){.workspace{grid-template-columns:minmax(0,1fr) 170px;gap:8px}aside{padding:10px}aside dl>div{flex-direction:column;gap:3px}.population strong{font-size:38px}#colonies button{padding:6px;font-size:10px}}

#extinction{padding:16px;background:#142321e8;top:30%;pointer-events:none}#extinction-reason{display:inline-block;max-width:600px;line-height:1.6;margin:12px}

#colony-achievements{display:grid;gap:8px;margin:14px 0;color:#a8bba9;font-size:12px}.achievement{border:1px solid #758448;border-radius:6px;padding:10px;background:#778e1920}.achievement strong{display:block;color:#e1dfa0;margin-bottom:6px}.achievement small{display:block}

dl>div[hidden]{display:none}

.size-layers{display:flex;gap:12px;flex-wrap:wrap;padding:10px 16px;background:#10272a;color:#c2d6cc;font-size:12px}.size-layers label{display:flex;align-items:center;gap:4px}.size-layers small{flex-basis:100%;color:#9eafa6}.size-layers label:nth-of-type(1){color:#a5cbd4}.size-layers label:nth-of-type(2){color:#91d9b4}.size-layers label:nth-of-type(3){color:#ecd395}

.live-limits{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:14px;margin-bottom:16px;border:1px solid #355047;border-radius:8px;background:#142827}.live-limits label{display:grid;gap:5px;font-size:12px;color:#c6d9cd}.live-limits input{width:145px;padding:8px;color:#e8efdf;background:#0d2021;border:1px solid #4b6657;border-radius:5px}.live-limits small{flex-basis:100%;color:#9eafa6;line-height:1.5}.live-limits span{font-size:12px;color:#d9ce9b}

.android-download{color:var(--mint);font-size:12px;padding:10px;border:1px solid var(--line);border-radius:8px;text-decoration:none}
@media(max-width:700px){
header{padding:16px;gap:12px;flex-wrap:wrap}main{padding:0 12px 20px}.connection{align-items:flex-start}
.workspace{grid-template-columns:minmax(0,1fr)}aside{padding:16px}aside dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}aside dl>div{min-width:0}
.sliders{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.section-label>span{float:none;display:block;margin-top:8px}
.toolbar{flex-wrap:wrap;gap:10px}.toolbar>div{display:flex;flex-wrap:wrap;gap:6px}.view-tools{flex-wrap:wrap;gap:8px}
#dish{height:62dvh;min-height:320px}.live-limits label{flex:1;min-width:130px}.live-limits input{width:100%}
#colony-card{max-width:100%}.form-grid{grid-template-columns:1fr}button{min-height:40px}
}

/* Рабочие органы управления лежат поверх единого поля микроскопа. */
.canvas-wrap>.environment{position:absolute;z-index:5;left:12px;right:12px;top:10px;border:0;background:transparent;padding:0;pointer-events:none}.canvas-wrap>.environment .section-label{display:none}.canvas-wrap>.environment .sliders{grid-template-columns:repeat(5,minmax(70px,1fr));gap:10px;margin:0}.canvas-wrap>.environment .slider{pointer-events:auto;padding:3px 7px;border-radius:8px;background:#07181755;backdrop-filter:blur(2px)}.canvas-wrap>.environment .slider label{font-size:10px;text-shadow:0 1px 3px #000}.canvas-wrap>.environment input[type=range]{height:8px;margin:4px 0 0;opacity:.72}.sim-controls{position:absolute;z-index:7;left:12px;top:72px;display:flex;gap:5px}.sim-controls button{width:38px;height:34px;padding:0;border:0;background:#07181788;backdrop-filter:blur(3px);font-size:12px}.sim-controls button.active{color:#dff5ba;box-shadow:inset 0 -2px #b5e6bc}.toolbar>div:first-child:empty{display:none}.server-metrics{position:absolute;z-index:6;right:12px;bottom:12px;width:190px;margin:0;padding:7px 10px;border:0;background:#07181778;backdrop-filter:blur(3px)}.server-metrics summary{font-size:10px;color:#c9ddcf;cursor:pointer}.server-metrics:not([open])>*:not(summary){display:none}.server-metrics[open]{width:min(420px,calc(100% - 24px));padding:12px}.server-metrics[open] #metrics-chart{height:72px}.server-metrics p,.server-metrics small{font-size:10px}.stat-extra{display:none}aside.show-extra .stat-extra{display:flex}#toggle-stats{width:100%;margin-top:12px;padding:8px}.workspace:fullscreen .environment,.workspace:fullscreen .sim-controls,.workspace:fullscreen .server-metrics{display:block}.workspace:fullscreen .canvas-wrap{position:relative}
.speed-explanation{display:none}
@media(max-width:700px){.canvas-wrap>.environment{left:5px;right:5px;top:5px}.canvas-wrap>.environment .sliders{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}.canvas-wrap>.environment .slider{padding:2px 3px}.canvas-wrap>.environment .slider label{display:block;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.canvas-wrap>.environment .slider output{float:right}.sim-controls{left:6px;top:49px}.sim-controls button{width:34px;height:30px}.server-metrics{right:6px;bottom:6px;width:155px}aside .note{display:none}.view-tools label,.size-layers small{display:none}.view-tools{padding-bottom:5px}.size-layers{padding:5px 8px;font-size:10px}}

.evolution-overview{margin:0 0 16px;padding:16px 20px 14px;border:1px solid #42685b;border-radius:12px;background:linear-gradient(112deg,#122b28 0%,#172a29 62%,#282e27 100%);box-shadow:inset 0 1px #ffffff0a}
.evolution-overview-head{display:grid;grid-template-columns:minmax(240px,330px) minmax(0,1fr);gap:20px;align-items:center}
.evolution-illustration{display:block;width:100%;height:auto;overflow:visible}.evolution-illustration text{fill:#a9c2b4;font:9px system-ui,sans-serif;text-anchor:middle}
.evolution-overview-copy{position:relative;min-width:0}.evolution-kicker{display:block;color:#91b8a0;font-size:9px;letter-spacing:1.7px}.evolution-stage-number{position:absolute;right:0;top:0;color:#c3dd9c;font-size:10px;letter-spacing:1.2px;font-weight:700}
.evolution-overview h2{margin:6px 0 4px;color:#e4f0df;font-size:clamp(18px,2vw,25px);font-weight:550}.evolution-overview-copy p{margin:0;color:#b4c6b8;font-size:12px;line-height:1.45}
.evolution-stage-track{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:14px 0 10px;padding:0;list-style:none}
.evolution-stage-track li{position:relative;z-index:1;display:flex;align-items:center;gap:7px;min-width:0;color:#758d82;font-size:10px;line-height:1.25}
.evolution-stage-track li::before{content:attr(data-number);flex:0 0 23px;width:23px;height:23px;display:grid;place-items:center;border:1px solid #52675e;border-radius:50%;background:#152522;color:#9bb1a4;font-size:10px}
.evolution-stage-track li.reached{color:#b7d3c0}.evolution-stage-track li.reached::before{border-color:#74b895;color:#d9f3de;background:#23503f}.evolution-stage-track li.current{color:#e1e9bd;font-weight:650}.evolution-stage-track li.current::before{border-color:#d4d77c;background:#c5cf78;color:#203328;box-shadow:0 0 0 4px #c5cf7820}
.evolution-stage-evidence{padding-top:9px;border-top:1px solid #ffffff15;color:#93ac9e;font-size:10px;line-height:1.45}
@media(max-width:780px){.evolution-overview{padding:12px}.evolution-overview-head{grid-template-columns:1fr;gap:4px}.evolution-illustration{width:min(100%,360px);margin:auto}.evolution-stage-track{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 5px}.evolution-stage-track li{font-size:9px}}
@media(max-width:430px){.evolution-stage-track{grid-template-columns:repeat(2,minmax(0,1fr))}.evolution-stage-number{position:static;display:block;margin-top:5px}.evolution-overview h2{margin-top:4px}}

.server-metrics{margin-bottom:16px;padding:16px;border:1px solid var(--line);border-radius:10px}.server-metrics p{line-height:1.8;font-size:13px}.server-metrics small{color:var(--muted);line-height:1.6}#metrics-chart{display:block;width:100%;height:100px;margin:12px 0;background:#102223}
.world-presets{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px 14px;margin:18px 0;padding:16px;border:1px solid #55705d;border-radius:10px;background:#102522}.world-presets label{display:grid;gap:7px;font-size:12px;color:#c9dacd}.world-presets select{padding:10px;background:#0b1c20;color:var(--ink);border:1px solid #587067;border-radius:6px}.world-presets p{grid-column:1/-1;color:#a9bba9;font-size:12px;line-height:1.55}.world-presets button{align-self:end;background:#263d30}details+details{margin-top:10px}@media(max-width:700px){.world-presets{grid-template-columns:1fr}.world-presets p{grid-column:1}}