@font-face{font-family:Roboto;src:url('/assets/fonts/roboto-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Roboto;src:url('/assets/fonts/roboto-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:MaterialIcons;src:url('/assets/fonts/materialicons-regular.otf') format('opentype');font-display:block}
:root{--bar-button:max(45px,5.26dvh)}
body:has(#game:not([hidden])){overflow:hidden;background:#000}
#game{position:fixed;inset:0;background:#000;color:#fff;font-family:Roboto,sans-serif;display:flex;flex-direction:column}
.material-icon{font-family:MaterialIcons;font-weight:400;font-style:normal;font-size:24px;line-height:1;display:inline-block;white-space:nowrap;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
#game .icon-button{display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:0;background:#000;min-width:var(--bar-button);min-height:var(--bar-button);color:#fff;flex-shrink:0}
#game .icon-button:hover{background:#151515}
#game button:disabled{opacity:.45}
#game .game-top{position:relative;display:flex;justify-content:space-evenly;align-items:center;gap:0;padding:env(safe-area-inset-top) 6px 0;border:0;background:#000;min-height:calc(var(--bar-button)*1.4 + env(safe-area-inset-top));height:auto;flex-shrink:0}
.resource-control{display:flex;align-items:center;justify-content:center;gap:4px;font-size:18px;white-space:nowrap}
#energy{color:#dffd33}#matter{color:#f18928}#hack{color:#0fee21}
#game #board{position:relative;inset:auto;flex:1;min-height:0;width:100%;touch-action:none}
#game .game-bottom{display:flex;justify-content:space-evenly;align-items:center;min-height:calc(var(--bar-button)*1.2 + env(safe-area-inset-bottom));padding:0 6px env(safe-area-inset-bottom);background:#000;flex-shrink:0;gap:4px}
#game #endTurn{display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;min-width:98px;min-height:var(--bar-button);margin:0;padding:3px 4px;border:0;border-radius:0;background:#000;color:#fff;font-size:15px;line-height:1.5;font-weight:400}
#game #endTurn.submitted{color:#5b0f86;opacity:1}
#selectionHint{position:absolute;bottom:calc(var(--bar-button)*1.3 + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:94%;padding:5px 12px;margin:0;background:#000c;color:#fff;font-size:14px;text-align:center;pointer-events:none}
.classic-dialog{background:#000;color:#fff;border:1px solid #505050;border-radius:0;font-family:Roboto,sans-serif;width:min(460px,94vw);padding:24px;max-height:88dvh}
.classic-dialog button{background:#000;color:#fff;border:0;border-radius:0;font-weight:400;font-size:20px}
.classic-dialog button:hover{background:#161616}
.classic-dialog h2{font-weight:400;font-size:22px;margin:0 0 20px}
.classic-dialog input,.classic-dialog select{background:#111;color:#fff;border-color:#777;border-radius:0}
.classic-dialog label,.classic-dialog p{color:#ccc}
#help{width:min(720px,95vw)}.classic-dialog .rule h3{color:#fff}.classic-dialog .rule p{color:#ccc}
.classic-dialog.menu-dialog{width:min(380px,94vw);padding:15px 20px}
.menu-dialog>button,#choiceButtons>button{display:block;width:100%;margin:10px 0;padding:8px 0}
#toolsDialog{width:min(590px,96vw)}
#toolsDialog #panel{position:static;inset:auto;width:auto;padding:0;border:0;background:#000;overflow:visible}
#toolsDialog .close-dialog{float:right;font-size:22px;padding:0 8px}
#toolsDialog #cellInfo{min-height:0;color:#ccc}#toolsDialog .action-grid button{font-size:14px;border:1px solid #333}
#toolsDialog #draftInfo,#toolsDialog #forecast,#toolsDialog .muted{color:#aaa}
#toolsDialog .file-button{background:#000;color:#fff;border:0;border-radius:0}
#amountDialog input{margin:10px 0;font-size:22px}#amountRange{accent-color:#5b0f86}
#replayBar button{background:#000;border:0;border-radius:0;color:#fff;font:inherit}
#notice{background:#000;border-color:#777;color:#fff;border-radius:0;bottom:calc(var(--bar-button)*1.35 + env(safe-area-inset-bottom));z-index:50}
#notice.error{background:#260000;border-color:#c44}
@media(min-width:760px){#game .game-bottom{justify-content:center;gap:7px}#game .game-top{justify-content:center;gap:65px}}
@media(max-width:380px){#game .game-bottom{gap:0;padding-left:0;padding-right:0}#game #endTurn{min-width:85px;font-size:16px}.resource-control{gap:2px}}
