#bootScreen{position:absolute;inset:0;z-index:60;background:#000;display:grid;place-items:center;padding:28px;text-align:center}#bootScreen[hidden],#nameForm[hidden],#bootCard[hidden]{display:none}
#bootCard{max-width:800px}#bootEyebrow{color:#a9b8ab;font-size:clamp(11px,2vw,15px);letter-spacing:.22em}#bootTitle{font-size:clamp(28px,7vw,72px);letter-spacing:.1em;line-height:1.2;color:#f0eddf;margin:20px 0}#bootSubtitle{font-size:clamp(14px,3vw,24px);color:#c4cfba;letter-spacing:.18em}#bootNext{position:absolute;right:24px;bottom:22px;background:transparent;border:1px solid #61645e;color:#c1c8bb;border-radius:5px;padding:10px 16px;font-size:11px}
#nameForm{width:min(100%,440px);text-align:left}#nameForm h1{font-size:26px;line-height:1.3;color:#e8dfc6}#nameForm p{font-size:12px;line-height:1.8;color:#a2b1a8}#nameForm label,.onlinePanel label{display:block;font-size:11px;letter-spacing:.08em;margin-bottom:8px}#nameForm input,.onlinePanel input,.onlinePanel select{font:inherit;color:#edf1df;background:#15221c;border:1px solid #667b67;border-radius:5px;padding:12px;width:100%;min-width:0;outline-offset:4px;user-select:text;-webkit-user-select:text}#nameForm button{width:100%;margin-top:16px;background:#bccb9d;color:#142017;font-weight:bold;border:0;padding:14px;border-radius:5px}#nameError{min-height:22px;color:#ffa9a9!important}
.onlineLaunch{display:flex;justify-content:space-between;align-items:center;width:min(500px,100%);padding:14px 16px;margin-top:12px;border:1px solid #8cae8a;background:linear-gradient(100deg,#1c382ee8,#142323ed);border-radius:5px;color:#d5e9c6;font-size:12px;font-weight:bold;letter-spacing:.10em}.onlineLaunch small{font-weight:normal;font-size:9px;color:#91bfa8}.profileName{font-size:10px;color:#b4c3ac;margin-top:10px;display:flex;gap:12px;align-items:center}.profileName button{min-height:30px;padding:3px 8px;background:none;border:1px solid #60725a;color:#bcc7b3;border-radius:4px;font-size:9px}
#mpScreen{z-index:40;background:#050c0bf2}#mpScreen[hidden],#mpLobby[hidden],#mpBrowser[hidden],#mpWait[hidden],#mpHud[hidden]{display:none}
.onlinePanel{width:min(650px,100%);margin:auto;text-align:left}.onlinePanel h2{font-size:clamp(24px,4vw,38px);margin:12px 0;color:#d6dfbf}.onlinePanel p{font-size:12px;color:#a9bbb0;line-height:1.7}.onlinePanel button{border:1px solid #769175;background:#233e30;color:#e1ecd2;border-radius:5px;padding:11px 15px;font-size:12px}.onlinePanel button:disabled{opacity:.5;cursor:wait}.onlinePanel button:hover:not(:disabled){background:#38543c}.onlineRow{display:flex;gap:10px;align-items:end;margin:14px 0}.onlineRow>*{flex:1;min-width:0}.onlineRow label{margin:0}.onlineRow label input,.onlineRow label select{margin-top:8px}.onlineHeader{display:flex;align-items:center;justify-content:space-between;gap:16px}.onlineHeader button{flex:0;background:#171e19}.onlineCaption{font-size:10px;letter-spacing:.16em;color:#baac81}#mpStatus{min-height:22px;font-size:12px;line-height:1.5;color:#e4ca90}#mpRooms{display:grid;gap:8px;max-height:220px;overflow:auto}.onlineRoom{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #3b5346;background:#11241b;padding:12px;border-radius:5px}.onlineRoom strong{font-size:13px;display:block}.onlineRoom small{display:block;font-size:10px;color:#a1b799;margin-top:5px}#mpCode{user-select:text;-webkit-user-select:text;font-size:28px;letter-spacing:.2em;color:#edddaa;padding:18px 10px;background:#11251b;text-align:center;border:1px dashed #8b9e70;border-radius:6px}#mpRoster{list-style:none;padding:0;display:grid;gap:8px}#mpRoster li{background:#17271f;padding:12px;border-left:3px solid #91b07b;color:#e3e7d7;font-size:12px}.onlineFoot{font-size:10px!important;color:#91a396!important}
#mpWait{position:absolute;inset:0;z-index:35;display:grid;place-content:center;gap:18px;text-align:center;padding:24px;background:#020807c9;backdrop-filter:blur(4px)}#mpWait b{font-size:clamp(20px,4vw,34px);color:#e4e8cf}#mpWait span{font-size:12px;color:#b5c7b7}#mpWait button{margin:auto;padding:12px 18px;border:1px solid #a9b090;color:#d5debb;background:#253526;border-radius:5px}
#mpHud{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:9;max-width:50%;color:#d0e6b8;background:#0b1d17d9;border:1px solid #6f987d;padding:7px 12px;font-size:10px;pointer-events:none;text-align:center}.remoteLabel{position:absolute;z-index:6;pointer-events:none;transform:translate(-50%,-100%);white-space:nowrap;border-radius:4px;padding:5px 8px;color:#e1efcd;background:#0c211bd9;border:1px solid #8ea789;font-size:10px}.remoteLabel[hidden]{display:none}
@media(max-width:550px){.onlineRow{flex-wrap:wrap}.onlineRow>*{flex-basis:42%}.onlinePanel button{font-size:11px;padding:10px}#mpHud{top:125px;max-width:80%;font-size:9px}#mpCode{font-size:24px}.onlineLaunch{font-size:10px}.onlineLaunch small{font-size:8px}}
.heroColorPanel{width:min(500px,100%);margin:16px 0 20px;padding:13px 14px;background:#101c19d9;border:1px solid #59675b;border-radius:7px}.heroColorHeading{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.1em;color:#b5bda8}.heroColorHeading strong{color:#e9dac4;font-size:10px}#heroColorOptions{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:12px 0}.heroColorSwatch{display:flex;flex-direction:column-reverse;align-items:center;gap:7px;border:1px solid;border-radius:5px;padding:9px 3px 7px;background:#16211e;color:#b8c8be;font-size:9px;min-width:0}.heroColorSwatch span{display:block;width:20px;height:20px;border-radius:4px;box-shadow:inset 0 1px 3px #ffffff35,0 3px 0 #0005}.heroColorSwatch[aria-pressed=true]{background:#354738;color:#fff9e7;outline:2px solid #ebe0bf;outline-offset:2px}.heroColorPanel>small{display:block;font-size:9px;line-height:1.6;color:#91a69c}@media(max-width:400px){#heroColorOptions{grid-template-columns:repeat(3,1fr)}}

/* Multiplayer rules are kept together in both the browser and waiting room. */
#mpScreen{overflow-y:auto;align-items:flex-start;padding:28px 20px}.onlinePanel{width:min(760px,100%)}
.mpSetup{border:1px solid #506b59;border-radius:9px;padding:12px 18px;background:linear-gradient(135deg,#172e25,#0c1815);margin:12px 0 20px}.mpSetup .onlineRow{margin:6px 0 12px}.mpSetup select{font-size:12px}.mpCheck{display:flex!important;align-items:center;gap:12px;letter-spacing:0!important;padding:10px 0;cursor:pointer}.mpCheck input{width:19px!important;height:19px;flex:0 0 19px;accent-color:#c2d39c}.mpCheck span{font-size:13px;color:#e5ead9}.mpCheck small{display:block;font-size:10px;color:#9eb6a7;margin-top:5px;line-height:1.5}
#mpEntitySettings{border:1px solid #637a60;border-radius:7px;padding:12px 14px;margin:10px 0}#mpEntitySettings[hidden]{display:none}#mpEntitySettings legend{font-size:10px;letter-spacing:.12em;color:#e3cc95;padding:0 8px}.mpDifficulty{display:grid!important;grid-template-columns:145px 1fr 35px;align-items:center;gap:14px;margin:0!important;min-height:48px;letter-spacing:0!important}.mpDifficulty span{font-size:12px}.mpDifficulty input{padding:0!important;accent-color:#c9dc9b;height:24px}.mpDifficulty output{background:#071510;border:1px solid #607b55;border-radius:5px;text-align:center;padding:7px 0;color:#e6e7bd;font-size:13px;font-variant-numeric:tabular-nums}.mpPresets{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.mpPresets button{font-size:10px;padding:8px 12px}.onlinePanel :focus-visible{outline:2px solid #e2d29d;outline-offset:4px}.mpSetup input:disabled,.mpSetup select:disabled{opacity:.65;cursor:not-allowed}body.machinePlaying #mpHud{top:77px}
@media(max-width:550px){#mpScreen{padding:18px 12px}.mpSetup{padding:10px 12px}.mpDifficulty{grid-template-columns:108px 1fr 30px;gap:7px}.mpDifficulty span{font-size:10px}body.machinePlaying #mpHud{top:170px}}

/* A focused control must scroll its panel, never shift the entire game viewport. */
#game{overflow:clip}#mpScreen{position:fixed;touch-action:pan-y;overscroll-behavior:contain}.onlinePanel{margin:0 auto}