/* A small license button leaves room for the mech; the full live card opens on tap. */ #main-menu #pilot-compact { display:none; } #main-menu #pilot-license-dialog { box-sizing:border-box; width:min(320px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); margin:auto; padding:36px 10px 10px; overflow-y:auto; border:1px solid #547777; border-top:2px solid var(--ui-cyan); border-radius:4px; background:#0b1c22; color:var(--ui-text); } #pilot-license-dialog::backdrop { background:#020a10bd; } #main-menu #pilot-license-close { position:absolute; top:0; right:0; width:36px; height:36px; border:0; background:none; color:var(--ui-text); font:26px/1 var(--ui-font); cursor:pointer; } #main-menu .pilot-license-content { display:grid; gap:8px; } #main-menu #pilot-license-dialog .pilot-card { width:100%; } @media (max-width:1024px) { #main-menu { --edge:10px; } #main-menu #pilot-compact { display:flex; align-items:center; gap:8px; box-sizing:border-box; width:100%; min-height:44px; padding:4px 8px; border:1px solid #547777a6; border-top:2px solid var(--rank-color); border-radius:3px; background:#0c2025e8; color:var(--ui-text); text-align:left; cursor:pointer; } #main-menu #pilot-compact .pilot-emblem { width:27px; height:31px; } #main-menu #pilot-compact .pilot-emblem b { font-size:17px; margin-top:-7px; } #main-menu #pilot-compact strong { min-width:0; overflow:hidden; text-overflow:ellipsis; font:650 13px/1.2 var(--ui-font); } #main-menu #pilot-license-dialog .pilot-body { padding:8px 10px; } #main-menu #pilot-license-dialog .pilot-emblem { width:38px; height:43px; } #main-menu #pilot-license-dialog .pilot-emblem b { font-size:24px; margin-top:-10px; } #main-menu #pilot-license-dialog .pilot-name { font-size:18px; } #main-menu #pilot-license-dialog .pilot-id { display:block; } #main-menu #pilot-license-dialog .pilot-highlights { padding:8px 0; } #main-menu #pilot-license-dialog .pilot-highlights dd { font-size:23px; } #main-menu:not([data-loadout-editor]) #menu-lobby { height:100dvh; min-height:320px; grid-template-columns:150px minmax(0,1fr) 154px; grid-template-rows:34px minmax(0,1fr) 84px; gap:8px 12px; padding:var(--edge); } #main-menu .brand-main { font-size:26px; } #main-menu .brand-sub { margin-top:2px; font-size:6px; letter-spacing:.16em; } #main-menu .lobby-resources { width:218px; grid-template-columns:minmax(0,1fr) auto 34px; gap:0; } #main-menu .pilot-wallet { min-height:34px; padding:0 8px; gap:6px; } #main-menu .pilot-wallet > span { font-size:8px; } #main-menu .pilot-wallet strong { font-size:14px; } #main-menu #btn-shop { min-height:34px; padding:0 9px; gap:6px; font-size:9px; } #main-menu #btn-shop .menu-action-icon { width:13px; height:13px; } #main-menu .lobby-resources .gear-btn { width:34px; height:34px; } #main-menu .lobby-resources .gear-btn svg { width:16px; height:16px; } #main-menu:not([data-loadout-editor]) .lobby-left { display:flex; grid-column:1; grid-row:2; gap:8px; align-self:start; } #main-menu:not([data-loadout-editor]) .daily-quests { grid-column:3; grid-row:2; align-self:start; padding:0; } #main-menu .daily-quests h2 { font-size:14px; } #main-menu :is(#daily-quests-toggle,#daily-checkin-toggle) { min-height:40px; padding:8px; gap:5px; } #main-menu :is(#daily-quests-count,#daily-checkin-status) { font-size:10px; } #main-menu :is(#daily-quests-toggle,#daily-checkin-toggle) svg { width:12px; height:12px; } #main-menu .loadout-card-name { min-height:34px; padding:6px 8px; } #main-menu .loadout-card-name strong, #main-menu .loadout-card-name #back-equipped { font-size:10px; } #main-menu .loadout-mount-slots { gap:3px; } #main-menu #loadout-mount-slots .loadout-mount-slot { width:100%; height:30px; min-height:0; } #main-menu .loadout-mount-slot img { width:24px; height:26px; } #main-menu:not([data-loadout-editor]) .mech-roster { grid-column:1 / 3; grid-row:3; width:min(100%,400px); align-self:end; padding:0; } #main-menu #mech-thumbnails { --thumb-gap:6px; --thumb-popout:22px; } #main-menu .mech-thumbnail { aspect-ratio:2.5; } #main-menu .mech-thumb-name { padding:4px 6px; } #main-menu .mech-thumb-name strong { font-size:10px; } #main-menu .mech-lock { font-size:8px; } #main-menu:not([data-loadout-editor]) .lobby-bottom { position:static; grid-column:3; grid-row:3; display:grid; grid-template-columns:1fr 1fr; gap:4px; align-self:end; margin:0; } #main-menu .lobby-bottom .menu-mode { grid-column:1 / -1; grid-row:1; padding:0; background:none; border:0; } #main-menu .lobby-bottom .menu-mode h2 { margin:0; font:8px var(--ui-mono); text-align:center; } #main-menu .tutorial-btn { grid-column:1; grid-row:2; min-height:40px; padding:6px; margin:0; font-size:9px; } #main-menu .tutorial-btn .menu-action-icon, #main-menu .play-btn::after { display:none; } #main-menu .lobby-bottom .play-btn { grid-column:2; grid-row:2; min-height:40px; padding:6px; font-size:18px; } #main-menu:not([data-loadout-editor]) .mech-arrow { position:absolute; top:68%; width:32px; height:36px; margin:0; transform:translateY(-50%); } #main-menu .mech-prev { left:calc(var(--edge) + 158px); } #main-menu .mech-next { right:calc(var(--edge) + 162px); } #main-menu .mech-arrow span { width:9px; height:9px; } #main-menu .career-last { padding:6px; } #main-menu .career-last :is(.career-card-head,#career-stats) { display:none; } #main-menu .career-card-result { margin:0 0 5px; gap:4px; } #main-menu #career-placement { font-size:20px; } #main-menu #career-total { font-size:9px; margin-left:2px; } #main-menu #career-gold { font-size:10px; } #main-menu #btn-battle-summary { min-height:30px; padding:4px; font-size:8px; } #main-menu .career-dialog header, #main-menu .career-dialog .career-content, #main-menu .career-dialog footer { padding:12px; } #main-menu .career-dialog h2 { font-size:24px; } #main-menu .career-dialog .career-stat-group dl > div { padding:9px; } #main-menu .career-dialog .career-stat-group dt { font-size:11px; } #main-menu .career-dialog .career-stat-group dd { font-size:23px; } #main-menu[data-loadout-editor] #menu-lobby { height:100dvh; min-height:320px; grid-template-columns:140px minmax(0,1fr) 162px; grid-template-rows:34px minmax(0,1fr) 100px; gap:8px 12px; padding:var(--edge); } #main-menu #loadout-editor-back { min-height:34px; padding:4px 10px; gap:10px; font-size:22px; } #main-menu #loadout-editor-back span { font-size:20px; } #main-menu .loadout-editor-heading { padding:8px; } #main-menu .loadout-editor-heading h2 { font-size:19px; } #main-menu #loadout-editor-art .shop-stage { height:90px; } #main-menu #loadout-editor-art .shop-stage img { padding:10px 2px; } #main-menu #loadout-editor-art .shop-stage-label { top:7px; left:8px; right:8px; font-size:6px; } #main-menu .loadout-editor-caption { gap:4px; padding:0 8px 8px; } #main-menu .loadout-editor-caption strong { font-size:13px; } #main-menu .loadout-editor-caption > span { font-size:8px; } #main-menu #loadout-editor-detail .shop-item-info { padding:10px; } #main-menu #loadout-editor-detail #shop-item-name { margin:6px 0 10px; font-size:22px; } #main-menu #loadout-editor-detail #shop-item-summary { font-size:11px; line-height:1.45; margin-bottom:10px; } #main-menu #loadout-editor-detail .shop-detail { margin-top:10px; } #main-menu #loadout-editor-detail .shop-stats { gap:6px; } #main-menu #loadout-editor-detail .shop-stats dt { font-size:8px; } #main-menu #loadout-editor-detail .shop-stats dd { font-size:12px; } #main-menu #loadout-editor-detail .shop-equipment-progress { margin-top:10px; } #main-menu #loadout-editor-detail .shop-skill { grid-template-columns:24px minmax(0,1fr); padding:8px 0; gap:6px; } #main-menu #loadout-editor-detail .shop-skill-icon { width:24px; height:24px; } #main-menu #loadout-editor-detail .shop-skill strong { font-size:12px; } #main-menu #loadout-editor-detail .shop-skill p { font-size:11px; } #main-menu #loadout-editor-rack { padding:4px 8px 8px; } #main-menu #loadout-editor-slots { margin-top:6px; } #main-menu #loadout-editor-slots .loadout-mount-slot { height:28px; } #main-menu #loadout-editor-rack > p { margin-top:6px; font-size:9px; } #main-menu .loadout-editor-roster-heading { margin-bottom:2px; } #main-menu .loadout-editor-roster-heading h2 { font-size:11px; } #main-menu #loadout-editor-list .shop-products { gap:7px; padding:20px 0 4px; } #main-menu #loadout-editor-list .shop-product { flex-basis:122px; width:122px; height:64px; } #main-menu #loadout-editor-list .shop-product strong { padding:9px 18px 5px 5px; font-size:9px; } #main-menu #loadout-editor-list .shop-product small { top:3px; right:3px; padding:2px; font-size:7px; } #main-menu #loadout-editor-list .shop-product-check { right:6px; bottom:5px; font-size:11px; } #main-menu .loadout-editor-action { min-height:36px; padding:8px; gap:5px; font-size:11px; } #main-menu #loadout-buy-cost { font-size:10px; } #main-menu #loadout-editor-feedback { font-size:10px; } } @media (min-width:560px) and (max-width:1024px) and (max-height:360px) { #main-menu:not([data-loadout-editor]) #menu-lobby { grid-template-rows:34px minmax(0,1fr) 74px; } #main-menu :is(#daily-quests-toggle,#daily-checkin-toggle) { min-height:34px; padding:6px 8px; } #main-menu .daily-quests h2 { font-size:13px; } #main-menu .loadout-card-name { min-height:28px; } #main-menu #loadout-mount-slots .loadout-mount-slot { height:24px; } #main-menu #loadout-mount-slots img { height:22px; } } @media (max-width:559px) { #main-menu:not([data-loadout-editor]) #menu-lobby { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:36px auto minmax(150px,1fr) auto auto auto; min-height:560px; gap:10px; } #main-menu .brand-main { font-size:24px; } #main-menu #menu-lobby > .lobby-resources { grid-column:2; grid-row:1; width:100%; order:0; } #main-menu .pilot-wallet { padding:0 6px; } #main-menu .pilot-wallet > span { display:none; } #main-menu #btn-shop { padding:0 6px; } #main-menu #btn-shop .menu-action-icon { display:none; } #main-menu:not([data-loadout-editor]) .lobby-left { grid-column:1; grid-row:2 / 4; order:0; } #main-menu:not([data-loadout-editor]) #menu-lobby > .daily-quests { grid-column:2; grid-row:2; order:0; } #main-menu:not([data-loadout-editor]) #menu-lobby > .mech-roster { grid-column:1 / -1; grid-row:5; width:100%; order:0; } #main-menu:not([data-loadout-editor]) #menu-lobby > .lobby-bottom { grid-column:1 / -1; grid-row:6; order:0; } #main-menu .lobby-bottom .menu-mode h2 { font-size:9px; } #main-menu .lobby-bottom .play-btn { min-height:42px; font-size:22px; } #main-menu .tutorial-btn { min-height:42px; font-size:11px; } #main-menu:not([data-loadout-editor]) .mech-arrow { position:relative; top:auto; grid-column:1 / -1; grid-row:3; order:0; align-self:end; margin-bottom:10px; transform:none; } #main-menu .mech-prev { left:auto; } #main-menu .mech-next { right:auto; } #main-menu[data-loadout-editor] #menu-lobby { height:auto; min-height:100dvh; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:36px 140px auto auto auto; gap:10px; } #main-menu[data-loadout-editor] #menu-lobby > .lobby-resources { grid-column:2; grid-row:1; } #main-menu[data-loadout-editor] .mech-inspection { grid-column:1 / -1; grid-row:2; height:140px; } #main-menu[data-loadout-editor] #loadout-editor-preview { grid-column:1; grid-row:3; max-height:240px; } #main-menu[data-loadout-editor] #loadout-editor-detail { grid-column:2; grid-row:3; max-height:240px; } #main-menu[data-loadout-editor] #loadout-editor-roster { grid-column:1 / -1; grid-row:4; } #main-menu[data-loadout-editor] #menu-lobby > .lobby-bottom { grid-column:1 / -1; grid-row:5; position:sticky; bottom:var(--edge); } #main-menu[data-loadout-editor] #loadout-editor-actions { gap:6px; } #main-menu #loadout-editor-detail #shop-item-name { font-size:20px; } #main-menu #loadout-editor-art .shop-stage { height:80px; } #main-menu .loadout-editor-action { min-height:40px; } } /* Keep the projected equipment cards and leaders floating at every size. */ #main-menu #menu-lobby > .hangar-loadout { position:absolute; inset:0; grid-column:auto; grid-row:auto; align-self:stretch; display:block; width:100%; height:100%; margin:0; pointer-events:none; } #main-menu #menu-lobby .loadout-callout { position:absolute; left:var(--callout-x,63%); top:var(--callout-y,19%); width:222px; max-width:none; } #main-menu #menu-lobby .loadout-leader { display:block; position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; } #main-menu #menu-lobby .loadout-leader[hidden] { display:none; } @media (max-width:1024px) { #main-menu #menu-lobby .loadout-callout { width:112px; } #main-menu #menu-lobby .mount-callout { width:140px; } #main-menu #menu-lobby .loadout-leader { opacity:.75; } #main-menu:not([data-loadout-editor]) #menu-lobby > .mech-inspection { grid-column:2; grid-row:2; position:relative; inset:auto; height:100%; min-height:0; margin:0; } } @media (max-width:559px) { #main-menu:not([data-loadout-editor]) #menu-lobby > .mech-inspection { grid-column:1 / -1; grid-row:3; height:100%; margin:0 40px; order:0; } }