:root{font-family:Arial,Helvetica,sans-serif;color:#e9e8d7;background:#1c2622}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#45544a,#18211d 75%);min-height:100vh}header{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:15px 22px;background:#59675a;border-bottom:5px solid #303b32;color:#f6f2db;font-size:12px;letter-spacing:1.6px}.brand{font-weight:900;font-size:20px}#connection{color:#e8cc84}main{max-width:1480px;margin:auto;padding:24px}.panel{background:#647163;border:2px solid #9da798;box-shadow:inset 0 0 0 4px #4a584d,0 10px 28px #0005;border-radius:5px;padding:24px;margin-bottom:16px}.center{text-align:center;max-width:650px;margin:6vh auto}.muted{color:#c9d1c5}h1{font-size:clamp(28px,5vw,58px);letter-spacing:4px;margin:12px 0}h2{margin:0 0 16px;font-size:20px;letter-spacing:2px}button,input,select{font:inherit;border-radius:3px;padding:12px;border:2px solid #26342c}button{background:#d5c69b;color:#17241c;font-weight:800;cursor:pointer}button:hover{background:#f1dfad}button:disabled{opacity:.45;cursor:not-allowed}input,select{background:#e6e9df;color:#15231a;width:100%;margin:6px 0 14px}label{display:block;text-align:left;font-size:12px;letter-spacing:1px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.row>*{flex:1}.status{padding:12px;background:#24372c;color:#b8e1b0;border:1px solid #82927e;margin:10px 0}.error{color:#ffb7a8}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.instrument{background:#27372e;padding:18px;border:5px solid #4b584c;box-shadow:inset 0 0 0 2px #9a9c82;text-align:center}.instrument .value{font-size:clamp(22px,3vw,42px);color:#b5e5a8;font-family:monospace;margin:20px 0}.instrument small{letter-spacing:1px;color:#c8d0bd}.console{display:grid;grid-template-columns:2fr 1fr;gap:14px}.lights{display:flex;justify-content:space-around;gap:8px;flex-wrap:wrap}.light{width:17px;height:17px;border-radius:50%;background:#a6d78d;box-shadow:0 0 12px #91e66a}.light.warn{background:#d7a34f;box-shadow:0 0 12px #d7a34f}.list{display:grid;gap:8px}.person{background:#334339;padding:10px;border:1px solid #819182;display:flex;justify-content:space-between;gap:12px}.tag{color:#d9c68d}.actions{display:flex;gap:10px;flex-wrap:wrap}.actions button{flex:1;min-width:120px}.danger{background:#b97366}.small{font-size:12px}.hidden{display:none}@media(max-width:850px){header{padding:12px}.brand{font-size:14px}.grid,.console{grid-template-columns:1fr}main{padding:12px}.panel{padding:17px}.row{display:block}}

/* Reactor No. 4 v0.1.3 modal controls */
.modal-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(9,17,13,.78);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}
.modal-panel{width:min(100%,470px);margin:0;padding:28px;background:#647163;border:2px solid #c3c4aa;box-shadow:inset 0 0 0 4px #4a584d,0 25px 75px #000b;text-align:left}
.modal-kicker{font-size:11px;letter-spacing:2px;color:#d8d4b9;margin:0 0 20px}.modal-panel h2{border-bottom:1px solid #a8b29f;padding-bottom:14px}.modal-panel>p{line-height:1.5}.modal-panel input{font-size:20px;letter-spacing:6px}.modal-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}.modal-actions button{min-width:110px}.modal-panel .error:empty{display:none}

/* Reactor No. 4 v0.2 — core controls and diagnostics */
input[type=range]{accent-color:#c5d39b;cursor:pointer;padding:0;height:26px;margin-top:12px}.ops-log{background:#24372c;padding:12px;max-height:280px;overflow:auto;font:12px/1.6 monospace}.ops-log p{border-bottom:1px solid #496050;padding-bottom:7px}.briefing{padding:14px;background:#293b31;border-left:4px solid #d5c69b}.crew-grid{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:700px){.crew-grid{grid-template-columns:1fr}}

/* v0.2.1 developer testing */
.dev-tools{margin-top:20px;border-top:1px solid #a2ad9f;padding-top:16px}.dev-tools summary{cursor:pointer;font-weight:bold;letter-spacing:1px;padding:8px 0}.dev-tools input{max-width:180px}.dev-preview{margin-top:16px;max-width:420px;background:#25362d;border:2px solid #a2ad9f;padding:20px}.dev-preview h2{font-size:17px}.dev-preview p{line-height:1.5}

/* v0.2.2 startup and compact two-column roster */
.startup-indicator{font-size:12px;letter-spacing:2px;color:#d8e5c5;margin:24px 0 10px}.startup-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#d8e5c5;margin-right:8px;animation:startupPulse 1.1s ease-in-out infinite alternate}@keyframes startupPulse{from{opacity:.2}to{opacity:1}}
.roster-count{font-size:12px;font-weight:400;letter-spacing:1px;color:#d6dcca;margin-left:12px}.roster-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}.roster-person{background:#334339;border:1px solid #819182;display:flex;justify-content:space-between;align-items:center;gap:10px;min-width:0;padding:8px 11px}.roster-details{display:flex;flex-direction:column;min-width:0;gap:4px}.roster-details strong{font-size:13px;overflow-wrap:anywhere}.roster-details .tag{font-size:11px;overflow-wrap:anywhere}.roster-status{font-size:10px;letter-spacing:.5px;flex-shrink:0;border:1px solid #a6b9a2;padding:5px 6px;color:#e2e8d9}.roster-status.simulated{color:#e6d19b;border-color:#c5af73}@media(max-width:700px){.roster-grid{grid-template-columns:1fr}}

.reactor-update-notice{position:fixed;z-index:9999;bottom:16px;left:16px;right:16px;max-width:440px;padding:16px;border:2px solid #d5c49a;background:#293b33;color:#eee8d2;box-shadow:0 8px 25px #0008;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14px}.reactor-update-notice strong{width:100%;letter-spacing:1px}.reactor-update-notice span{flex:1 1 180px}.reactor-update-notice button{font-size:12px;padding:9px 12px}

/* v0.2.4 compact active reactor screen; lobby roster is hidden in JS */
@media(min-width:900px){
 body:has(#screen.reactor-active){height:100vh;overflow:hidden}
 body:has(#screen.reactor-active) main{height:calc(100vh - 65px);overflow:hidden;padding:9px 14px}
 #screen.reactor-active{height:100%;display:flex;flex-direction:column;gap:8px;min-height:0}
 #screen.reactor-active>.row{flex:0 0 auto;gap:8px}
 #screen.reactor-active .panel{padding:11px 15px;margin-bottom:0}
 #screen.reactor-active h2{font-size:13px;margin-bottom:6px}
 #screen.reactor-active p{margin:5px 0}
 #screen.reactor-active .status{padding:6px}
 #screen.reactor-active>.grid{flex:0 0 auto;gap:8px}
 #screen.reactor-active .instrument{padding:7px;border-width:3px}
 #screen.reactor-active .instrument .value{font-size:clamp(19px,2.1vw,29px);margin:7px 0}
 #screen.reactor-active .console{flex:1 1 auto;min-height:0;gap:8px}
 #screen.reactor-active .console>.panel{min-height:0;overflow:auto}
 #screen.reactor-active .ops-log{max-height:min(20vh,150px)}
 #screen.reactor-active input[type=range]{margin:5px 0 7px}
 #screen.reactor-active button{padding:8px}
 #screen.reactor-active #adminOverlay{position:fixed;inset:5vh 8vw;z-index:50;overflow:auto;box-shadow:0 0 0 100vmax #0009}
}

/* v0.2.6 — separate crew joining flow */
.landing-actions{justify-content:center;align-items:center;gap:14px;margin:22px 0 14px;}
.landing-actions>div{flex:0 1 220px;}
.landing-actions button{width:100%;min-height:52px;}
.crew-join-fields{max-width:420px;margin:22px auto;text-align:left;}
.crew-join-fields label{display:block;margin-bottom:15px;}
.crew-join-fields input{width:100%;box-sizing:border-box;}
.join-actions{justify-content:center;gap:12px;margin-top:16px;}
@media(max-width:520px){.landing-actions{flex-direction:column;}.landing-actions>div{width:100%;flex:auto;}.join-actions{flex-wrap:wrap;}}


/* v0.2.8 — app-like mobile viewport, no page-level pull-to-refresh */
html { overscroll-behavior: none; }
@media (max-width: 899px) and (pointer: coarse) {
  html, body { width: 100%; height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
  body { position: fixed; inset: 0; touch-action: pan-x pan-y; }
  #app { height: 100%; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  #app > header { flex: 0 0 auto; padding-top: max(12px, env(safe-area-inset-top)); }
  #screen { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  #screen.reactor-active { overscroll-behavior: contain; }
  .modal-backdrop { overscroll-behavior: contain; overflow-y: auto; }
  input, select, textarea { font-size: max(16px, 1em); }
}