@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101b1c;--panel:#142123;--line:#ffffff12;--text:#eef2e6;--muted:#a0b1aa;--lime:#d4ed8b;--serif:Georgia,'Times New Roman',serif;font-family:'DM Sans',system-ui,sans-serif;font-size:14px;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--lime);outline-offset:4px}button{color:inherit}button:disabled{opacity:.45}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:12px;letter-spacing:.16em;font-size:20px;font-weight:600}.brandmark{color:var(--lime);font-size:36px;line-height:1;transform:rotate(-35deg);display:inline-block}.brand-caption{font-size:10px;letter-spacing:.16em;color:var(--muted);font-weight:400;border-left:1px solid #ffffff21;padding-left:21px;margin-left:12px}.top-actions{display:flex;align-items:center;gap:12px}.world-tag{color:var(--muted);font-size:12px;margin-right:19px;display:flex;align-items:center;gap:9px}.world-tag i,.save-status i{height:5px;width:5px;border-radius:50%;background:var(--lime)}.icon-button{width:33px;height:33px;background:transparent;border:1px solid #ffffff20;border-radius:50%;font-size:16px}.icon-button:hover{background:#ffffff12}.icon-button.on{color:var(--lime);border-color:var(--lime)}.shell{display:grid;grid-template-columns:minmax(0,1fr) 315px;min-height:690px;height:calc(100svh - 120px);max-height:1200px}.world{position:relative;overflow:hidden;background:#09242b;min-height:600px}.world>canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline-offset:-4px}.stage-bar{position:absolute;top:26px;left:32px;right:32px;display:flex;align-items:center;gap:16px;width:max-content;max-width:calc(100% - 64px);pointer-events:none}.stage{display:flex;align-items:center;gap:8px;color:#819c98;font-size:12px;white-space:nowrap}.stage span{width:25px;height:25px;display:grid;place-items:center;border:1px solid #ffffff25;border-radius:50%;font-size:10px}.stage.active{color:var(--lime)}.stage.active span{background:var(--lime);border-color:var(--lime);color:#223028}.stage.done{color:#d9e5c9}.stage-bar b{height:1px;width:36px;background:#ffffff24}.scene-heading{position:absolute;left:36px;top:99px;pointer-events:none;max-width:80%}.eyebrow{font-size:10px;font-weight:500;letter-spacing:.17em;color:var(--muted)}.scene-heading .eyebrow{color:#b2cbc0}.scene-heading h1{font-family:var(--serif);font-size:clamp(30px,3.25vw,52px);font-weight:400;letter-spacing:-.04em;margin:13px 0 10px;line-height:1.08}.scene-heading p{color:#b4c9c1;font-size:14px;margin:0;line-height:1.5}.compass{position:absolute;right:34px;top:100px;text-align:center;color:#99b5ab;opacity:.65;font-size:9px}.compass div{font-size:43px;font-weight:400;line-height:1.2}.world-bottom{position:absolute;bottom:27px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.legend{display:flex;gap:20px;font-size:10px;color:#a8c1b6}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:5px;height:5px;border-radius:50%}.food-dot{background:#d8e889;box-shadow:0 0 5px #d8e889}.friend-dot{background:#85d7d2}.danger-dot{background:#e59b77}.scale{display:flex;flex-direction:column;gap:6px;text-align:center;color:#91ada6;font-size:9px}.scale span{height:6px;width:55px;border:1px solid #91ada67a;border-top:0}.sidebar{padding:24px 25px 0;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin}.organism-header{display:flex;justify-content:space-between;align-items:center}.generation{border:1px solid #ffffff19;border-radius:4px;padding:4px 6px;color:#adbcad;font-size:9px;letter-spacing:.06em}.specimen{height:145px;position:relative;margin:10px 0 0;flex-shrink:0;background:radial-gradient(ellipse,#a3cc8a09,transparent 70%)}.specimen canvas{width:100%;height:100%;object-fit:contain}.specimen-cross{position:absolute;font-size:12px;color:#59746b}.top-left{top:16px;left:10px}.bottom-right{bottom:18px;right:10px}.specimen-id{position:absolute;bottom:11px;left:10px;color:#698578;font-size:8px;letter-spacing:.14em}.name-row{display:flex;justify-content:space-between;align-items:center;margin:0 0 19px}.name-row h2{font-family:var(--serif);font-size:30px;font-style:italic;letter-spacing:-.03em;font-weight:400;margin:0 0 4px}.name-row p{font-size:11px;color:var(--muted);margin:0}.name-row>span{font-size:36px;color:#c1d7a4}.vitality>div:first-child{display:flex;justify-content:space-between;font-size:11px;margin-bottom:9px;color:var(--muted)}.track{height:3px;background:#ffffff10;overflow:hidden;border-radius:5px}.track i{height:100%;width:100%;background:var(--lime);display:block;transition:width .3s}.resources{display:grid;grid-template-columns:1fr 1fr;margin:20px 0 21px;padding-bottom:20px;border-bottom:1px solid var(--line);gap:16px}.resources>div{display:grid;grid-template-columns:26px 1fr;row-gap:4px}.resource-icon{grid-row:span 2;color:var(--lime);font-size:24px}.resource-icon.soft{color:#a5c8c1;font-size:21px}.resources strong{font-size:22px;font-weight:500;line-height:1}.resources div>span:last-child{font-size:10px;color:var(--muted)}.section-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-label>span:last-child:not(.eyebrow){font-size:10px;color:var(--muted)}.trait-summary{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;margin:0 0 19px}.mini-trait{display:flex;align-items:center;gap:7px;color:#b1c0b2;font-size:11px}.mini-trait .levels{margin-left:auto;display:flex;gap:3px}.levels i{height:4px;width:8px;background:#ffffff14;border-radius:2px}.levels i.filled{background:var(--lime)}.primary{display:flex;width:100%;align-items:center;justify-content:space-between;border:1px solid transparent;background:var(--lime);color:#253027;border-radius:5px;padding:13px 15px;font-size:12px;font-weight:600;gap:15px;min-height:42px}.primary:hover{background:#e1f4b2}.primary span{font-size:18px;line-height:1}.button-footnote{text-align:center;font-size:9px;color:#81988b;line-height:1.4;margin:9px 0 20px}.next-stage{padding:17px 16px;background:#0d1a1bb3;border:1px solid #ffffff0c;border-radius:6px}.next-stage h3{font-family:var(--serif);font-size:19px;font-weight:400;margin:0 0 7px}.next-stage p{font-size:10px;color:var(--muted);line-height:1.6;margin:0 0 14px}.next-stage .track{height:3px}.next-stage .track i{width:0}.secondary{border:1px solid #a1b78355;background:transparent;border-radius:4px;color:var(--lime);padding:10px 12px;font-size:12px}.next-stage .secondary{margin-top:13px;width:100%;display:flex;justify-content:space-between}.field-note{padding:22px 0 15px}.field-note .eyebrow{font-size:9px;color:#6f8a7f}.field-note .eyebrow span{float:right}.field-note p{font-family:var(--serif);font-size:13px;font-style:italic;color:#a8bda9;line-height:1.5;margin:9px 0}.save-status{display:flex;align-items:center;gap:7px;margin-top:auto;border-top:1px solid var(--line);padding:14px 0;font-size:9px;color:#728e80}.save-status i{width:4px;height:4px;opacity:.5}.save-status button{margin-left:auto;padding:0;border:0;background:none;color:#90a492;font-size:9px;text-decoration:underline;text-underline-offset:3px}.footer{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:9px 29px;color:#8da298;border-top:1px solid var(--line);font-size:10px}.key{color:#b7c5b5;font-size:9px}.footer-divider{margin:0 9px;color:#486358}#world-time{font-size:9px;letter-spacing:.1em}.footer button{background:none;border:0;padding:0;font-size:10px;color:#b4c5b0}.start-hint{position:absolute;bottom:110px;left:15%;right:15%;text-align:center;pointer-events:none;transition:opacity .6s}.tiny-line{display:block;width:26px;height:1px;background:var(--lime);margin:auto;opacity:.6}.start-hint p{color:#d1ddbf;font-family:var(--serif);font-style:italic;font-size:18px;margin:14px 0 9px}.start-hint>span:last-child{font-size:9px;color:#97afa3;letter-spacing:.08em}.toast{position:absolute;left:50%;top:80px;transform:translate(-50%,-5px);opacity:0;transition:.25s;background:#132625f0;border:1px solid #9ab77666;border-radius:30px;padding:11px 20px;color:#e6edce;font-size:12px;text-align:center;pointer-events:none;max-width:85%;width:max-content;z-index:2}.toast.show{opacity:1;transform:translate(-50%,0)}.action-hint{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);font-size:12px;background:#101d1fe6;border-radius:4px;color:var(--lime);padding:9px 15px;text-align:center;pointer-events:none;display:none;width:max-content;max-width:90%}.action-hint.visible{display:block}.pause-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#081e24b0;backdrop-filter:blur(7px);z-index:5}.pause-overlay h2{font-family:var(--serif);font-size:40px;font-weight:400;margin:16px 0 28px}.pause-overlay button{width:200px}.touch-actions{display:none;position:absolute;right:20px;bottom:65px;gap:10px}.touch-actions button{border-radius:50%;height:57px;width:57px;border:1px solid #cde49e55;background:#12282dcc;color:var(--lime);font-size:12px;touch-action:manipulation}.modal{width:min(780px,94vw);padding:36px;background:#152527;color:var(--text);border:1px solid #476256;border-radius:12px;box-shadow:0 25px 100px #0008;max-height:92svh;overflow:auto}.modal::backdrop{background:#02191bc9;backdrop-filter:blur(8px)}.modal h2{font-family:var(--serif);font-size:35px;font-weight:400;letter-spacing:-.035em;margin:12px 0}.modal-intro{font-size:14px;color:var(--muted);margin-bottom:26px;line-height:1.6}.close{position:absolute;right:18px;top:13px;font-size:27px;color:var(--muted);background:none;border:0}.editor-layout{display:grid;grid-template-columns:42% 1fr;gap:30px}.editor-organism{display:flex;flex-direction:column;align-items:center;background:#0c1e2066;border-radius:8px;padding:0 20px 23px}.editor-organism canvas{width:100%;height:195px;object-fit:contain}.editor-organism label{font-size:12px;color:var(--muted);margin-bottom:8px}.editor-organism input{text-align:center;width:100%;border:0;border-bottom:1px solid #4b6654;background:transparent;color:var(--text);padding:7px 2px;font-family:var(--serif);font-style:italic;font-size:25px}.palette-label{margin-top:20px}.palette{display:flex;gap:12px;margin-top:13px}.palette button{height:23px;width:23px;border-radius:50%;border:3px solid #152527;outline:1px solid transparent}.palette button.selected{outline-color:var(--text)}.dna-available{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-bottom:15px}.dna-available strong{color:var(--lime);font-weight:500}.trait-option{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--line);align-items:center}.trait-option .trait-icon{font-size:23px;color:var(--lime);width:27px;text-align:center}.trait-option .trait-copy{flex:1}.trait-option h3{font-size:14px;margin:0 0 4px;font-weight:500}.trait-option p{font-size:11px;line-height:1.5;color:var(--muted);margin:0}.trait-option button{min-width:57px;font-size:12px;background:#263b2e;color:var(--lime);border:1px solid #9eba7155;border-radius:4px;padding:8px}.trait-option .level-label{color:#738e7d;font-size:10px;margin-left:7px}.modal-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:28px;padding-top:22px}.modal-footer>span{font-size:11px;color:var(--muted);line-height:1.5}.modal-footer .primary{width:auto;min-width:180px}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px 35px}.guide-grid article>span{color:var(--lime);font-size:12px}.guide-grid h3{font-family:var(--serif);font-size:22px;font-weight:400;margin:8px 0}.guide-grid p,.guide-end,.small-modal p{font-size:14px;line-height:1.75;color:var(--muted);margin:0}.guide-end{margin:25px 0 10px}.credits{font-size:11px;line-height:1.6;color:#7e998d;border-top:1px solid var(--line);padding-top:17px}.guide-modal>.primary{margin-top:25px;width:190px}.small-modal{width:min(470px,92vw)}.small-modal>.primary{margin-top:27px}.small-modal .modal-footer .primary{min-width:0}
@media(min-height:900px) and (min-width:901px){.specimen{height:190px}.sidebar{padding-top:30px}.name-row{margin-bottom:25px}.resources{margin-top:25px;margin-bottom:25px}.field-note{padding-top:30px}.next-stage{padding:22px 16px}}
@media(max-width:1100px){.brand-caption{display:none}.shell{grid-template-columns:minmax(0,1fr) 280px}.sidebar{padding:22px 20px 0}.stage-bar{left:24px;gap:10px}.stage-bar b{width:23px}.scene-heading{left:26px}.compass{right:23px}.legend{gap:13px}.world-bottom{left:24px;right:24px}.scene-heading h1{font-size:38px}#world-time{display:none}}
@media(max-width:760px){.topbar{height:64px;padding:0 18px}.brand{font-size:16px;gap:8px}.brandmark{font-size:30px}.top-actions{gap:8px}.world-tag{display:none}.shell{display:flex;flex-direction:column;height:auto;max-height:none;min-height:0}.world{height:70svh;min-height:510px}.sidebar{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;overflow:visible;border-left:0;padding:25px 24px 10px}.organism-header{grid-column:1}.specimen{grid-column:1;grid-row:2/5;height:165px}.name-row{grid-column:1}.vitality{grid-column:1}.resources{grid-column:1;grid-row:7}.adaptations{grid-column:2;grid-row:1/6}.next-stage{grid-column:2;grid-row:6/9}.field-note{grid-column:1}.save-status{grid-column:1/-1;margin-top:18px}.stage-bar{top:23px;left:22px;right:22px}.scene-heading{top:89px;left:24px}.scene-heading h1{font-size:36px}.compass{top:95px}.scene-heading p{font-size:12px}.legend{font-size:9px}.scale{display:none}.world-bottom{bottom:20px}.start-hint{bottom:130px;left:8%;right:8%}.start-hint p{font-size:16px}.footer{padding:13px 18px}.touch-actions{display:flex}.action-hint{bottom:130px}.trait-summary{grid-template-columns:1fr;gap:12px;margin-top:25px}.button-footnote{font-size:10px;line-height:1.6}.trait-summary .mini-trait{font-size:12px}.modal{padding:28px}.editor-layout{grid-template-columns:1fr;gap:20px}.editor-organism canvas{height:130px}.editor-organism{padding:0 20px 18px}.editor-organism input{width:75%}.palette-label{margin-top:14px}.modal h2{font-size:30px}.modal-footer{flex-wrap:wrap}.modal-footer .primary{width:100%}.guide-grid{gap:20px;grid-template-columns:1fr}.guide-grid h3{font-size:21px}.guide-grid p{font-size:13px}.guide-end{font-size:13px}.small-modal .modal-footer{flex-wrap:nowrap}.small-modal .modal-footer .primary{width:auto}.toast{top:61px;font-size:11px}}
/* Readable field labels and a game surface that fits the window. */
.shell{min-height:500px}.world{min-height:0}.brand-caption,.world-tag,.eyebrow,.generation,.specimen-id,.resources div>span:last-child,.section-label>span:last-child:not(.eyebrow),.button-footnote,.field-note .eyebrow,.save-status,.save-status button,.footer,.key,.footer button,#world-time,.start-hint>span:last-child,.legend,.scale,.trait-option .level-label,.credits{font-size:12px}
.stage{font-size:13px}.stage span{font-size:12px}.name-row p,.vitality>div:first-child,.mini-trait,.primary,.secondary,.next-stage p,.trait-option p,.modal-footer>span,.editor-organism label{font-size:14px}.scene-heading p,.modal-intro,.guide-grid p,.guide-end,.small-modal p{font-size:16px}.field-note p{font-size:15px}.resources{margin:16px 0;padding-bottom:16px}.resources strong{font-size:24px}.brand-caption{font-size:11px}.next-stage .section-label{gap:8px}.next-stage .eyebrow{font-size:11px;letter-spacing:.1em}.trait-summary{grid-template-columns:1fr}.mini-trait .levels{margin-left:auto}.specimen-id{font-size:10px}.footer{gap:10px}.button-footnote{line-height:1.55}.toast{font-size:14px}.stage-bar{background:linear-gradient(90deg,#122d2bb0,transparent);border-radius:20px;padding:3px 8px 3px 0}.scene-heading{text-shadow:0 2px 18px #102a28}.compass span{font-size:12px}
@media(min-width:761px) and (max-height:850px){.specimen{height:100px}.sidebar{padding-top:20px}.field-note{display:none}.name-row{margin-bottom:15px}.adaptations .section-label{margin-bottom:10px}.trait-summary{grid-template-columns:1fr 1fr;column-gap:9px;row-gap:11px;margin-bottom:15px}.mini-trait{font-size:12px;gap:5px}.mini-trait .levels{gap:2px}.levels i{width:5px}.button-footnote{margin-bottom:15px;font-size:12px}.next-stage{padding:14px}.next-stage p{font-size:13px}.sidebar .eyebrow{font-size:11px}.save-status{gap:5px;font-size:10px;flex-shrink:0}.save-status button{font-size:11px}}
@media(max-width:1100px){.stage-bar b{width:16px}.stage-bar{gap:9px}.legend{font-size:11px;gap:12px}.topbar{padding:0 22px}.scene-heading p{font-size:14px}}
@media(max-width:760px){.shell{min-height:0}.world{min-height:510px}.sidebar{overflow:visible}.trait-summary{grid-template-columns:1fr}.footer>span{font-size:10px}.key{font-size:10px}.stage{font-size:12px}.stage-bar b{width:13px}.stage-bar{max-width:calc(100% - 32px);gap:7px}.stage span{width:23px;height:23px}.scene-heading{max-width:75%}.scene-heading p{max-width:250px;font-size:14px}.start-hint>span:last-child{font-size:11px}.compass{right:17px}.save-status{font-size:11px}.save-status button{font-size:12px}.next-stage p{font-size:13px}.section-label>span:last-child:not(.eyebrow){font-size:11px}.next-stage .section-label{flex-wrap:wrap}.legend{font-size:11px;gap:14px}.modal-footer>span,.trait-option p{font-size:13px}}
@media(max-width:390px){.sidebar{padding:24px 16px;column-gap:18px}.topbar{padding:0 14px}.brand{font-size:14px}.top-actions{gap:6px}.stage-bar b{width:7px}.stage-bar{left:18px}.stage{gap:5px;font-size:11px}.world-bottom{left:18px}.footer .footer-divider{margin:0 4px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}