/* EcoSim homepage: simulation-first layout, sharing the production Alpha 0.1.1 controls and immutable WEB-3 WASM/JS shader assets. No engine changes. */ .home-viewer .simulator-home { max-width: 1400px; padding-top: 18px; padding-bottom: 22px; } .home-viewer .viewer-intro { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 12px; } .home-viewer .viewer-title { min-width: 0; } .home-viewer .viewer-title h1 { font-size: clamp(1.65rem, 2.75vw, 2.35rem); line-height: 1.08; letter-spacing: -.05em; margin: 0; } .home-viewer .viewer-title p { color: #a9c2ad; font-size: .87rem; line-height: 1.4; margin: 5px 0 0; } .home-viewer .viewer-intro .pill { white-space: nowrap; flex-shrink: 0; } .home-viewer .sim-shell { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 9px; border: 1px solid #426448; border-radius: 13px; background: #102119; box-shadow: 0 24px 70px #02090572; } .home-viewer .sim-topbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 4px; margin: 0 0 7px; color: #a5c6a1; font: 700 .69rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .07em; } .home-viewer .sim-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; padding-bottom: 7px; } .home-viewer .sim-shell .controls { display: flex; align-items: center; gap: 6px 14px; flex: 1 1 auto; flex-wrap: wrap; margin: 0; padding: 5px 8px; background: #09180f; border: 1px solid #304c37; border-radius: 7px; color: #e3d5a2; font: 600 .75rem/1.25 ui-monospace, SFMono-Regular, Consolas, monospace; } .home-viewer .sim-shell .controls > * { white-space: nowrap; } .home-viewer .sim-shell .exploration-controls { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; flex-wrap: wrap; color: #d9c784; font: .74rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; } .home-viewer .sim-shell button, .home-viewer .sim-shell select { font: inherit; color: #e6c378; background: #203127; border: 1px solid #887345; border-radius: 5px; padding: 5px 8px; } .home-viewer .sim-shell button { cursor: pointer; min-width: 72px; } .home-viewer .sim-shell button:hover:not(:disabled) { background: #2e4535; } .home-viewer .sim-shell button:disabled, .home-viewer .sim-shell select:disabled { opacity: .55; cursor: default; } .home-viewer .sim-shell button:focus-visible, .home-viewer .sim-shell select:focus-visible { outline: 2px solid #b7e08b; outline-offset: 3px; } .home-viewer .sim-shell .quackens { color: #ffe067; } .home-viewer .sim-shell .foxes { color: #ffa04a; } .home-viewer .sim-shell #exploration-note { max-width: 260px; color: #afc8aa; } .home-viewer .sim-shell .world-view { position: relative; min-width: 0; } .home-viewer .sim-shell canvas#world { display: block; width: 100%; height: min(64vh, 700px); min-height: 290px; background: #173723; image-rendering: pixelated; border: 1px solid #6a6545; border-radius: 6px; box-sizing: border-box; touch-action: none; user-select: none; } .home-viewer .sim-shell canvas#world:focus-visible { outline: 2px solid #b7e08b; outline-offset: 3px; } .home-viewer .sim-shell [hidden] { display: none !important; } .home-viewer .sim-shell #inspector { position: absolute; right: 10px; top: 10px; width: min(320px, 42%); max-height: calc(100% - 20px); display: flex; flex-direction: column; box-sizing: border-box; padding: 12px; background: #09100def; border: 1px solid #887345; color: #e3e8df; } .home-viewer .sim-shell #inspector h2 { font-size: 15px; line-height: 1.3; margin: 0 0 10px; color: #e6c378; } .home-viewer .sim-shell #inspector[data-species="1"] h2 { color: #ffe067; } .home-viewer .sim-shell #inspector[data-species="2"] h2 { color: #ffa04a; } .home-viewer .sim-shell #inspector-body { min-height: 0; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; padding: 8px 0; margin: 8px 0 0; background: transparent; color: #e3e8df; font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; } .home-viewer .sim-shell .inspector-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .home-viewer .sim-shell .inspector-actions button { padding: 6px; min-width: 0; font-size: 12px; } .home-viewer .sim-shell .input-help { margin: 5px 2px 0; color: #aabfb0; font: .72rem/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; } .home-viewer .sim-shell #status { box-sizing: border-box; height: 23px; min-height: 23px; overflow: hidden; white-space: pre; text-overflow: ellipsis; margin: 5px 0 0; padding: 3px 8px; background: #09100dcc; border-radius: 5px; color: #afc6b7; font: 10px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; } .home-viewer .sim-shell #status[data-error="true"] { height: auto; min-height: 23px; max-height: 100px; overflow: auto; white-space: pre-wrap; color: #ffb8a9; border: 1px solid #8a4943; } .home-viewer .viewer-footnote { margin: 8px 2px 0; color: #94ad98; font-size: .75rem; line-height: 1.35; } .home-viewer .viewer-footnote a { color: #cbe9b1; text-decoration: underline; text-underline-offset: 3px; } /* A tall enough desktop viewport gets an immersive, single-screen viewer. The canvas is the flexible area; toolbar and inspector remain fully usable. Short / narrow viewports use ordinary document scrolling, not clipped UI. */ @media (min-width: 900px) and (min-height: 640px) { .home-viewer .site-header .wrap { max-width: 1400px; } .home-viewer .site-header .nav { height: 60px; } .home-viewer .simulator-home { display: flex; flex-direction: column; height: calc(100dvh - 60px); min-height: 0; padding-top: 10px; padding-bottom: 10px; } .home-viewer .viewer-intro { flex: 0 0 auto; flex-wrap: nowrap; margin-bottom: 9px; } .home-viewer .viewer-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; } .home-viewer .viewer-title h1 { font-size: clamp(1.5rem, 2.35vw, 2rem); } .home-viewer .viewer-title p { margin: 0; } .home-viewer .sim-shell { flex: 1 1 0; min-height: 0; } .home-viewer .sim-shell .world-view { flex: 1 1 0; min-height: 0; } .home-viewer .sim-shell canvas#world { height: 100%; min-height: 0; } .home-viewer .sim-shell .sim-topbar, .home-viewer .sim-shell .sim-toolbar, .home-viewer .sim-shell .input-help, .home-viewer .sim-shell #status { flex-shrink: 0; } .home-viewer .viewer-footnote { flex-shrink: 0; margin-top: 6px; } .home-viewer .site-footer { display: none; } } /* Don't force tiny canvas or hide controls on compact laptops and phones. */ @media (max-width: 899px), (max-height: 639px) { .home-viewer .sim-shell .controls { flex: 1 1 100%; } .home-viewer .sim-shell .exploration-controls { flex: 1 1 100%; } .home-viewer .sim-shell canvas#world { height: min(60vh, 650px); min-height: 280px; } } @media (max-width: 600px) { .home-viewer .simulator-home { padding-top: 18px; } .home-viewer .viewer-title h1 { font-size: 1.75rem; } .home-viewer .viewer-intro .pill { font-size: .66rem; } .home-viewer .sim-shell { padding: 7px; border-radius: 10px; } .home-viewer .sim-shell canvas#world { height: 55vh; min-height: 260px; } .home-viewer .sim-shell #inspector { width: min(300px, 80%); } .home-viewer .sim-topbar span:last-child { display: none; } } /* Simulation HUD overlays the world so all desktop viewport height goes to the canvas. */ .home-viewer .sim-shell .world-view { isolation: isolate; } .home-viewer .sim-hud { position:absolute; top:10px; left:11px; right:11px; z-index:3; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; gap:10px; pointer-events:none; font:600 .77rem/1.35 ui-monospace,SFMono-Regular,Consolas,monospace; } .home-viewer .sim-hud > * { pointer-events:auto; min-width:0; } .home-viewer .hud-populations, .home-viewer .hud-clock, .home-viewer .sim-hud .controls, .home-viewer .hud-locators { background:#08190fee; border:1px solid #426344; border-radius:7px; box-shadow:0 3px 12px #0006; backdrop-filter:blur(5px); } .home-viewer .hud-populations { justify-self:start; padding:8px 11px; display:grid; gap:3px; } .home-viewer .hud-populations span { display:flex; justify-content:space-between; gap:16px; white-space:nowrap; } .home-viewer .hud-center { justify-self:center; display:grid; justify-items:center; gap:5px; } .home-viewer .hud-clock { padding:7px 12px; color:#e6c378; white-space:nowrap; text-align:center; letter-spacing:.025em; } .home-viewer .hud-clock b { color:#f7e3a8; font-size:.95rem; font-variant-numeric:tabular-nums; } .home-viewer .sim-shell .sim-hud .controls { display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:7px; width:max-content; max-width:100%; flex:initial; margin:0; padding:5px 7px; color:#e3d5a2; font-size:.76rem; white-space:nowrap; } .home-viewer .sim-hud .controls label { display:inline-flex; align-items:center; gap:5px; } .home-viewer .sim-hud .controls button { min-width:62px; } .home-viewer .sim-hud #playback-state { color:#c3d8b8; font-size:.68rem; } .home-viewer .hud-locators { justify-self:end; padding:5px; max-width:260px; } .home-viewer .sim-shell .sim-hud .exploration-controls { display:flex; align-items:center; justify-content:flex-end; gap:5px; flex:initial; flex-wrap:nowrap; } .home-viewer .sim-hud .exploration-controls button { min-width:0; font-size:.73rem; white-space:nowrap; } .home-viewer .sim-hud #exploration-note { display:block; padding:5px 3px 2px; color:#cce0c5; font-size:.68rem; line-height:1.4; max-width:230px; } .home-viewer .sim-hud #exploration-note:empty { display:none; } .home-viewer .sim-shell #inspector { top:105px; right:12px; max-height:calc(100% - 118px); z-index:2; } /* Narrower screens get an in-frame HUD strip to avoid overlaps. */ @media (max-width:990px) { .home-viewer .sim-shell .world-view { display:flex; flex-direction:column; } .home-viewer .sim-shell .sim-hud { position:relative; inset:auto; order:0; display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:7px; padding:0 0 7px; } .home-viewer .sim-hud .hud-center { order:1; } .home-viewer .sim-hud .hud-populations { order:0; } .home-viewer .sim-hud .hud-locators { order:2; } .home-viewer .sim-shell canvas#world { order:3; flex:1 1 auto; } .home-viewer .sim-shell #inspector { top:116px; max-height:calc(100% - 130px); } } @media (max-width:650px) { .home-viewer .sim-shell .sim-hud { justify-content:center; } .home-viewer .sim-hud .hud-center { order:0; width:100%; } .home-viewer .sim-hud .hud-populations { order:1; width:100%; } .home-viewer .sim-hud .hud-locators { order:2; width:100%; max-width:none; } .home-viewer .sim-hud .exploration-controls { justify-content:center; } .home-viewer .sim-shell #inspector { top:235px; max-height:calc(100% - 250px); } } /* Some compact desktop widths need normal scrolling rather than a tiny canvas. */ @media (min-width:900px) and (max-width:990px) and (min-height:640px) { .home-viewer .simulator-home { height:auto; min-height:calc(100dvh - 60px); } .home-viewer .sim-shell { flex:none; } .home-viewer .sim-shell .world-view { flex:none; } .home-viewer .sim-shell canvas#world { height:min(64vh,700px); min-height:290px; } } /* Top-right fullscreen toggle sits ABOVE the den/nest locator panel. */ .home-viewer .sim-hud .hud-locators { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; backdrop-filter: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .home-viewer .sim-hud .hud-locators .exploration-controls { padding: 5px; background: #08190fee; border: 1px solid #426344; border-radius: 7px; box-shadow: 0 3px 12px #0006; backdrop-filter: blur(5px); } .home-viewer .sim-hud .fullscreen-toggle { min-width: 0; width: 34px; height: 32px; padding: 0; font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; background: #08190fee; border: 1px solid #69905c; border-radius: 6px; box-shadow: 0 3px 12px #0008; cursor: pointer; } .home-viewer .sim-hud .fullscreen-toggle:hover:not(:disabled) { background: #284631; } .home-viewer .sim-hud .fullscreen-toggle[aria-pressed="true"] { border-color: #b7e08b; } .home-viewer .sim-hud .fullscreen-toggle:disabled { opacity: .5; cursor: default; } .home-viewer .sim-hud .hud-locators #exploration-note:not(:empty) { background: #08190fee; border: 1px solid #426344; border-radius: 6px; padding: 5px 7px; } /* The actual Fullscreen API expands the world, HUD and inspector together. Keep the fullscreen button within the same top-right overlay. */ .home-viewer .sim-shell .world-view:fullscreen { display: block !important; position: relative; width: 100vw; height: 100dvh; margin: 0; padding: 0; overflow: hidden; background: #0b1712; } .home-viewer .sim-shell .world-view:fullscreen canvas#world { display: block; width: 100%; height: 100%; min-height: 0; max-height: none; order: initial; border: 0; border-radius: 0; } .home-viewer .sim-shell .world-view:fullscreen .sim-hud { position: absolute; inset: 12px 12px auto !important; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 0; z-index: 3; } .home-viewer .sim-shell .world-view:fullscreen .hud-locators { justify-self: end; order: initial; } .home-viewer .sim-shell .world-view:fullscreen #inspector { top: 116px; right: 12px; max-height: calc(100% - 128px); } /* Smaller fullscreen viewports still keep the upper-right exit button visible. Reflow other HUD panels without placing them off-screen. */ @media (max-width: 990px) { .home-viewer .sim-shell .world-view:fullscreen .sim-hud { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; } .home-viewer .sim-shell .world-view:fullscreen .hud-populations { grid-area: 1 / 1; } .home-viewer .sim-shell .world-view:fullscreen .hud-locators { grid-area: 1 / 2 / span 2; width: auto; } .home-viewer .sim-shell .world-view:fullscreen .hud-center { grid-area: 2 / 1; justify-self: start; width: auto; } } @media (max-width: 650px) { .home-viewer .sim-shell .world-view:fullscreen .sim-hud { grid-template-columns: minmax(0, 1fr) auto; } .home-viewer .sim-shell .world-view:fullscreen .hud-center { order: initial; justify-items: start; } .home-viewer .sim-shell .world-view:fullscreen .hud-populations { order: initial; width: auto; } .home-viewer .sim-shell .world-view:fullscreen .hud-locators { order: initial; max-width: 175px; align-items: flex-end; } .home-viewer .sim-shell .world-view:fullscreen .hud-locators .exploration-controls { flex-wrap: wrap; justify-content: flex-end; } .home-viewer .sim-shell .world-view:fullscreen #inspector { top: 165px; max-height: calc(100% - 180px); } } /* Web speed selector: an ordinary DOM popover, not a blocking native