/* Structure, planet and violet palette follow quadrator/lib/screens/first_screen.dart. */
#menu{background:#000;max-width:none;min-height:100dvh;margin:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);display:grid;place-items:center;color:#fff;font-family:Roboto,sans-serif}
/* Original proportions plus one additional row for the requested rules button. */
#menu .home-screen{width:min(420px,100%);height:724px;min-height:724px;padding:0 18px;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:0}
#menu .menu-planet{width:270px;height:auto;max-width:100%;object-fit:contain;flex-shrink:0}
#menu h1{font-size:35px;font-weight:700;letter-spacing:normal;line-height:1.2;color:#5b0f86;margin:0}
#menu .main-buttons{display:flex;flex-direction:column;align-items:center;gap:26px;flex-shrink:0}
#menu button,#menu .file-button{background:#5b0f86;color:#fff;border:0;border-radius:4px;font-size:14px;box-shadow:0 2px 4px #0005;min-height:44px;padding:10px 18px}
#menu button:hover{background:#7819aa}#menu button:disabled{opacity:.4}
#menu .main-buttons button{position:relative;width:max-content;min-height:28px;height:28px;padding:4px 16px;font-size:14px;line-height:20px;font-weight:500;flex-shrink:0}
/* Preserve a 44px pointer target around the original compact visible button. */
#menu .main-buttons button::before{content:"";position:absolute;inset:-8px 0}
#menu .rules-link{background:transparent;color:#2196f3;box-shadow:none;padding:6px 14px}
#menu .rules-link:hover{background:#2196f314}
#menu .menu-version{font-size:14px;line-height:20px;color:#fff;margin:26px 0 0}
#menu .menu-screen{width:min(690px,100%);padding:30px;align-self:start;margin:auto}
#menu .menu-screen.compact{width:min(440px,100%);display:flex;flex-direction:column;gap:18px}
#menu .menu-screen h2{font-size:25px;color:#a974ca;margin:22px 0}
#menu .menu-screen.compact h2{margin:10px 0}
#menu label{color:#b8e2f5}#menu select,#menu input{background:#090909;color:#fff;border-color:#5b0f86;border-radius:4px}
#menu details{border-color:#5b0f86}#menu summary{color:#b8e2f5}
#menu .form-grid{margin:18px 0}#menu .button-row{margin:8px 0}
@media(max-width:480px){#menu .menu-screen{padding:20px}#menu .form-grid{grid-template-columns:1fr}}
@media(max-height:640px){#menu .home-screen{height:620px;min-height:620px}#menu .menu-planet{width:210px}#menu .main-buttons{gap:18px}#menu .menu-version{margin-top:18px}}
/* Network lobby and replay lists follow RoboCities, with Quadrator's palette. */
#menu .network-screen,#menu .history-screen{width:min(760px,100%)}
#menu .network-block{border-top:1px solid #5b0f86;margin:22px 0;padding-top:18px}
#menu .network-block>button{margin-top:12px}
#menu #networkIdentity{display:grid;gap:14px}#menu p{overflow-wrap:anywhere}
#menu #networkCreateIdentity{margin:18px 0 26px;border-bottom:1px solid #5b0f86;padding-bottom:18px}
#menu #roomsList{display:flex;flex-direction:column;gap:10px;margin-top:14px}
#menu .room-row{text-align:left;width:100%;line-height:1.6}
#menu #networkCreateFields{margin:24px 0;border:1px solid #5b0f86;padding:18px}
#menu #networkCreateFields>label{margin:14px 0}
#menu .timeout-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#menu #networkSlots{gap:10px}
#menu #networkLog.error{color:#ff9999}
#menu .history-tabs{display:flex;gap:12px;margin-bottom:18px}
#menu .history-tabs button{flex:1;background:#1e1026;border:1px solid #5b0f86}
#menu .history-tabs button[aria-pressed="true"]{background:#5b0f86}
#menu .history-game-row{border:1px solid #5b0f86;border-radius:6px;padding:12px;margin:12px 0;background:#0a070c}
#menu .history-game-row .history-game{display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;background:transparent;padding:4px;box-shadow:none}
#menu .history-game-title{font-size:16px}#menu .history-game-meta{color:#bbb;font-size:13px;overflow-wrap:anywhere}
#menu .history-game-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#menu .history-game-actions button{flex:1;min-width:85px}
#menu #historyProgress{font-size:14px;color:#b8e2f5;min-height:22px}
#game #replayBar{flex-wrap:wrap;gap:2px;padding:4px;min-height:60px}
#game #replayBar .icon-button{min-width:38px}
#game #replayViewerLabel{font-size:11px;gap:0;color:#aaa}
#game #replayViewer{width:110px;min-height:32px;padding:3px;background:#000;border:1px solid #555;color:#fff}