/* Fluid EVOLVE Build 002: immersive fixed-viewport UI. The solver canvas stays mounted and visible. */
:root{--fluid-safe-top:env(safe-area-inset-top,0px);--fluid-safe-bottom:env(safe-area-inset-bottom,0px)}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:#050f1c}
[hidden]{display:none!important}
.intro,.notes,body>footer{display:none!important}
.header{position:fixed;z-index:28;top:calc(var(--fluid-safe-top) + 10px);left:12px;width:auto;height:auto;max-width:calc(100vw - 196px);padding:0;border:0;background:transparent;pointer-events:none}
.header .identity{pointer-events:auto;gap:8px;padding:5px 10px 5px 6px;border:1px solid #44627a8a;border-radius:13px;background:rgba(5,18,32,.73);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:14px;letter-spacing:.03em}
.header .identity .mark{width:32px;height:32px;font-size:19px;border-radius:9px}
.header .identity small{font-size:7px;letter-spacing:.08em}
.header nav{display:none}
.layout,.sim-column,.stage{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;padding:0!important;display:block!important;min-height:0!important}
.layout{z-index:1}
.stage{border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden;background:#030e1b}
#fluid{display:block;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;touch-action:none}
.stage-head,.stage-legend{display:none!important}
.overlay-actions{position:fixed;z-index:35;top:calc(var(--fluid-safe-top) + 10px);right:12px;display:flex;align-items:center;gap:6px}
.overlay-actions button{min-height:42px;padding:8px 12px;border:1px solid #5484a78c;border-radius:12px;background:rgba(7,26,44,.84);color:#ddf6ff;box-shadow:0 3px 24px #0008;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:12px}
.overlay-actions button[aria-expanded=true]{color:#7ee8ff;background:rgba(18,56,78,.96);border-color:#68bedb}
.overlay-actions button:hover{background:#19445a}
.stage-controls{position:fixed;z-index:24;bottom:calc(10px + var(--fluid-safe-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 20px);display:flex;flex-wrap:nowrap;gap:7px;padding:7px;background:rgba(6,22,37,.80);border:1px solid #4a7c9b80;border-radius:16px;box-shadow:0 14px 42px #0009;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.stage-controls button{flex:none;min-height:42px;padding:9px 13px;white-space:nowrap;font-size:12px}
.metrics{position:fixed;top:calc(var(--fluid-safe-top) + 63px);left:12px;right:auto;z-index:18;width:max-content;max-width:calc(100vw - 24px);display:flex;gap:5px;margin:0}
.metrics>div{flex:0 1 auto;padding:6px 10px;border:1px solid #456b8880;border-radius:9px;background:rgba(4,19,33,.64);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:left}
.metrics strong{font-size:14px;line-height:1.1}
.metrics span{margin-top:2px;font-size:8px;letter-spacing:.04em}
#status{position:fixed;z-index:18;bottom:calc(75px + var(--fluid-safe-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 20px);min-height:0;margin:0;padding:6px 11px;border:1px solid #325a737a;border-radius:11px;background:rgba(5,19,34,.68);font-size:11px;line-height:1.35;text-align:center;pointer-events:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.settings{position:fixed;z-index:42;top:calc(var(--fluid-safe-top) + 112px);right:12px;bottom:auto;left:auto;width:min(340px,calc(100vw - 24px));max-width:none;max-height:min(65dvh,585px);margin:0!important;overflow:auto;overscroll-behavior:contain;border:1px solid #477e9bba;border-radius:15px;background:rgba(9,25,41,.90);box-shadow:0 18px 60px #000a;backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px);scrollbar-width:thin;scrollbar-color:#417692 transparent}
.settings-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-bottom:1px solid #365970a8}
.settings-top h2{font-size:15px;margin-top:1px}
.settings-top small{font-size:8px}
#settings-close{min-height:34px;padding:4px 10px;background:#142f43;color:#c4edff}
.panel-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:7px 9px;background:rgba(6,19,32,.75)}
.panel-tabs button{min-width:0;min-height:35px;padding:5px 1px;border:1px solid transparent;border-radius:8px;font-size:10px;color:#94bacd;background:transparent}
.panel-tabs button[aria-selected=true]{color:#dcf8ff;border-color:#397b9d;background:#19465c}
.settings .control-group{padding:13px 14px 15px;border:0}
.settings .section-head{margin-bottom:11px}
.settings .section-head h3{font-size:12px}
.settings .section-head span{font-size:8px}
.settings .slider-line{margin-bottom:11px}
.settings .slider-line>span{margin-bottom:4px;font-size:11px}
.settings input[type=range]{min-height:30px}
.settings .inputs-2{gap:8px}
.settings select{min-height:38px;padding:7px;font-size:12px}
.settings .pad-row{gap:13px;margin-bottom:11px}
.settings #gravity-pad{width:96px;height:96px}
.settings .pad-row p{font-size:10px}
.settings .actions{gap:6px}
.settings .actions button{min-height:36px;font-size:10px;padding:7px 5px}
.settings .micro-stats{margin-top:10px}
.bottom.shell{position:fixed;z-index:44;top:calc(var(--fluid-safe-top) + 112px);right:12px;bottom:auto;left:auto;width:min(440px,calc(100vw - 24px));max-height:65dvh;overflow:auto;margin:0;padding:18px;display:block;border:1px solid #4b7f9a;border-radius:15px;background:rgba(7,25,41,.95);box-shadow:0 16px 65px #000b;backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px)}
.bottom.shell>div+div{border-left:0;border-top:1px solid #426179;margin-top:20px;padding:18px 0 0}
.bottom.shell h2{font-size:18px}
.bottom.shell p{font-size:11px}
@media(max-width:600px){
 .header{top:calc(var(--fluid-safe-top) + 8px);left:8px;max-width:calc(100vw - 170px)}
 .header .identity{gap:6px;padding:4px 7px 4px 4px;font-size:12px}
 .header .identity .mark{width:29px;height:29px}
 .header .identity small{display:none}
 .overlay-actions{top:calc(var(--fluid-safe-top) + 8px);right:8px;gap:4px}
 .overlay-actions button{padding:7px 9px;min-height:39px;font-size:11px}
 .metrics{top:calc(var(--fluid-safe-top) + 57px);left:8px;right:8px;max-width:calc(100vw - 16px);gap:4px}
 .metrics>div{flex:1 1 0;padding:5px 6px;min-width:0}
 .metrics strong{font-size:12px}
 .metrics span{font-size:7px;white-space:nowrap}
 .stage-controls{bottom:calc(7px + var(--fluid-safe-bottom));width:calc(100vw - 16px);max-width:440px;gap:5px;padding:6px;border-radius:14px}
 .stage-controls button{flex:1 1 0;min-width:0;min-height:43px;padding:7px 3px;font-size:11px;white-space:normal}
 #status{bottom:calc(69px + var(--fluid-safe-bottom));font-size:10px;max-width:calc(100vw - 16px)}
 .settings,.bottom.shell{top:calc(var(--fluid-safe-top) + 101px);right:8px;width:min(325px,calc(100vw - 16px));max-height:min(62dvh,530px)}
}
@media(max-width:350px){.header .identity{font-size:10px}.overlay-actions button{font-size:10px;padding:7px}.metrics>div{padding:4px}}
@media(prefers-reduced-transparency:reduce){.settings,.bottom.shell,.stage-controls,.overlay-actions button{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0c2032}}