:root {
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: #293f36; background: #edf0e1; font-synthesis: none;
  --ink: #293f36; --teal: #178a78; --paper: #f6f1de; --coral: #ca6852; --gold: #dfb45d;
  --cut: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
* { box-sizing: border-box; }
html,body,#game { margin: 0; width: 100%; height: 100%; overflow: hidden; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; color: inherit; touch-action: manipulation; }
button:focus-visible { outline: 3px solid #e69a36; outline-offset: -4px; }
button:disabled { cursor: wait; opacity: .55; }
[hidden] { display: none !important; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#game { position: relative; touch-action: manipulation; user-select: none; }
#viewport,#labels { position: absolute; inset: 0; overflow: hidden; }
#viewport canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#labels { pointer-events: none; touch-action: none; }
.city-label { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 44px; min-width: 74px; padding: 0; border: 0; background: transparent; pointer-events: auto; font-size: 10px; font-weight: 800; white-space: nowrap; }
.city-name { display: flex; align-items: center; gap: 4px; background: #f8f3e5f5; padding: 5px 9px; clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); border-bottom: 2px solid #b9b79a; }
.city-label.base .city-name { background: #3e5849f5; color: #fff0c4; border-color: #233e32; }
.city-reward { display: flex; gap: 5px; background: #edcf88ed; padding: 3px 6px; clip-path: polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); }
.city-label svg { width: 13px; height: 13px; stroke-width: 2; }
.city-label.empty .city-name { opacity: .7; }
.city-label.empty .city-reward { display: none; }
.city-label:active { filter: brightness(1.15); }
.city-shield { color: #edf5d1; background: #3b6051; padding: 2px 5px; display: flex; gap: 3px; align-items: center; font-size: 9px; }
.city-alert { position: relative; width: 74px; background: #f4e5c4; color: #725027; text-align: center; padding: 2px 4px 5px; font-size: 8px; }
.city-alert i { position: absolute; bottom: 0; left: 0; height: 3px; background: #bf9139; }.city-alert.danger i { background: #965479; }.city-alert.danger { color: #814164; background: #f1d6de; }
.city-label.metropolis .city-name { background: #ede2b5; border-color: #b19a67; font-size: 12px; }
#alert-status { position: absolute; bottom: calc(126px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 8px 13px; background: #f4e5c4ed; color: #74552b; clip-path: var(--cut); font-size: 10px; font-weight: 750; pointer-events: none; white-space: nowrap; }
#alert-status>div { height: 3px; background: #79552722; margin-top: 5px; }#alert-status i { height: 3px; display: block; background: #bf9139; }#alert-status.danger { background: #edd2dded; color: #814164; }#alert-status.danger i { background: #965479; }
.group-signal { position: absolute; display: flex; gap: 4px; align-items: center; padding: 3px 5px; background: #f7efdde0; clip-path: polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); }
.group-signal svg { width: 13px; height: 13px; }
.group-signal .signal-fuel { color: #946921; }.group-signal .signal-weapon { color: #a15736; }.group-signal .signal-shield { color: #227865; }
.group-signal .low { opacity: .4; }
#hud { position: absolute; left: 24px; right: 24px; top: calc(20px + env(safe-area-inset-top)); z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.match-brand { width: 108px; height: auto; }
.zone-status { position: absolute; left: 50%; top: 0; transform: translateX(-50%); min-width: 195px; padding: 10px 23px 12px; text-align: center; background: #f7f2e3f5; clip-path: var(--cut); box-shadow: inset 0 -3px #adb6a0, inset 0 2px #fff9; }
.zone-status>span { font-size: 11px; font-weight: 750; }
.zone-status strong { display: block; font-size: 29px; line-height: 1.3; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.zone-track { height: 3px; background: #738b6333; margin-top: 3px; overflow: hidden; }
.zone-track i { height: 100%; display: block; background: var(--teal); }
.zone-status.danger { background: #f6dccc; color: #a34132; }.zone-status.danger i { background: var(--coral); }
.icon-button { width: 46px; height: 46px; border: 0; display: grid; place-items: center; clip-path: var(--cut); background: var(--paper); box-shadow: inset 0 -3px #a8b098; pointer-events: auto; }
.icon-button:active,.utility-button:active { transform: translateY(2px); }
#match-status { position: absolute; top: calc(81px + env(safe-area-inset-top)); left: 24px; display: flex; align-items: center; gap: 6px; z-index: 3; font-size: 11px; font-weight: 700; background: #f7f2e3e8; padding: 7px 10px; clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.live-dot { width: 6px; height: 6px; background: var(--coral); transform: rotate(45deg); }
#utilities { position: absolute; left: 20px; right: 20px; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; z-index: 4; pointer-events: none; }
.utility-button { flex: 0 0 60px; height: 60px; border: 0; display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; background: #f7f2e3f5; clip-path: var(--cut); box-shadow: inset 0 -4px #a8b098; pointer-events: auto; font-size: 11px; font-weight: 750; }
.utility-button[aria-pressed=true] svg { opacity: .4; }
#supply-status { display: flex; gap: 3px; padding: 10px 13px 12px; background: #f7f2e3f5; clip-path: var(--cut); box-shadow: inset 0 -3px #a8b098; }
.supply-meter { width: 116px; padding: 0 7px; }.supply-meter>div:first-child { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 750; }
.supply-meter svg { width: 16px; height: 16px; }.supply-meter b { margin-left: auto; font-size: 10px; font-variant-numeric: tabular-nums; }
.meter { height: 5px; background: #31472b22; margin-top: 7px; }.meter i { display: block; height: 100%; background: #b18a3d; }
#fuel-range { display: block; font-size: 9px; margin-top: 4px; color: #737258; font-variant-numeric: tabular-nums; }
.weapons .meter i { background: #9b6950; }.supply-meter.depleted { color: #7c8471; }.supply-meter.low .meter i { background: var(--coral); }
#defense-status { position: absolute; bottom: calc(90px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 6px; padding: 6px 10px; clip-path: var(--cut); background: #315d4be8; color: #f5eed2; font-size: 11px; font-weight: 700; pointer-events: none; }
#defense-status svg { width: 18px; height: 18px; }
#hint { position: absolute; left: 50%; top: calc(126px + env(safe-area-inset-top)); max-width: 80%; transform: translate(-50%,-5px); opacity: 0; z-index: 5; background: #2b443df0; color: #fff4d9; clip-path: var(--cut); padding: 11px 18px; font-size: 12px; font-weight: 650; text-align: center; transition: opacity .15s,transform .15s; pointer-events: none; }
#hint.visible { opacity: 1; transform: translate(-50%,0); }
#reward { position: absolute; left: 50%; bottom: calc(172px + env(safe-area-inset-bottom)); z-index: 4; transform: translateX(-50%); color: #fff4d9; background: #315d4bf2; clip-path: var(--cut); padding: 10px 17px; font-size: 12px; font-weight: 800; white-space: nowrap; pointer-events: none; opacity: 0; }
#reward.pop { opacity: 1; }
#waypoint { position: absolute; z-index: 3; background: #f8e3adec; border: 0; clip-path: var(--cut); min-height: 44px; padding: 7px 13px; display: flex; align-items: center; gap: 6px; box-shadow: inset 0 -3px #bba374; max-width: 175px; }
#waypoint svg { width: 20px; height: 20px; flex: 0 0 20px; }#waypoint span { font-size: 11px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#waypoint.zone-target { background: #f2d0be; box-shadow: inset 0 -3px #cb8b73; }
#hit-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 2; box-shadow: inset 0 0 100px #d85d473f; opacity: 0; transition: opacity .25s; }#hit-vignette.flash { opacity: 1; }
.overlay { position: absolute; inset: 0; z-index: 10; overflow: auto; touch-action: pan-y; }
.intro { background: #f1efdef5; padding: 40px 7vw; display: flex; align-items: center; }
.intro::before { content: ''; position: absolute; inset: 0; background: #d9e3c7; clip-path: polygon(74% 0,100% 0,100% 100%,43% 100%); pointer-events: none; }
.intro::after { content: ''; position: absolute; inset: 0; background: #c5d7b552; clip-path: polygon(100% 8%,100% 100%,67% 100%); pointer-events: none; }
.intro-layout { position: relative; z-index: 1; width: min(1120px,100%); margin: auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: 45px; align-items: center; }
.intro-copy { min-width: 0; }h1 { margin: 0; }h1 img { display: block; width: min(420px,100%); height: auto; }
.intro-meta { display: flex; gap: 9px; align-items: center; color: #69775e; font-size: 12px; font-weight: 600; margin: 25px 0; }
.how-to { list-style: none; counter-reset: steps; padding: 0; margin: 28px 0 32px; display: grid; gap: 13px; }
.how-to li { counter-increment: steps; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.how-to li::before { content: counter(steps); display: grid; place-items: center; background: #d8dfc8; width: 26px; height: 26px; flex: 0 0 26px; clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); font-size: 11px; font-weight: 800; }
.intro-art { width: 100%; height: auto; stroke: none; }
.primary-button { min-height: 58px; width: min(330px,100%); border: 0; clip-path: var(--cut); background: #217d67; color: #fff2d1; font-size: 14px; font-weight: 800; padding: 0 22px; box-shadow: inset 0 -5px #175a49,inset 0 2px #47a183; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.primary-button:hover { background: #198d74; }.primary-button:active { transform: translateY(2px); box-shadow: inset 0 -3px #175a49; }
.text-button { border: 0; background: transparent; min-height: 44px; padding: 10px 5px; font-size: 12px; font-weight: 700; color: #54715d; text-decoration: underline; text-underline-offset: 4px; }
#fresh-button { display: block; margin-top: 8px; }#load-error { font-size: 12px; max-width: 330px; color: #a44332; }
.modal-layer { display: flex; align-items: center; justify-content: center; padding: 25px; background: #18382e99; backdrop-filter: blur(4px); }
.map-panel,.small-panel { max-height: 100%; overflow: auto; background: var(--paper); padding: 28px; border: 2px solid #d5dac2; border-top: 5px solid #fbf9e9; box-shadow: 8px 8px 0 #173a3030; clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
.map-panel { width: min(580px,100%); }.small-panel { width: min(450px,100%); text-align: center; padding: 34px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }.panel-heading h2 { margin: 0; font-size: 28px; }.panel-heading .icon-button { background: #dfe5ce; }
.small-panel h2 { font-size: 38px; margin: 14px 0; letter-spacing: -.04em; }.small-panel p { font-size: 12px; line-height: 1.85; color: #65745e; margin: 15px 0 25px; }
.small-panel .primary-button,.map-panel .primary-button { width: 100%; justify-content: center; }.small-panel .text-button { margin-top: 10px; }
.panel-note,.small-panel .panel-note { font-size: 11px; color: #65745e; text-align: center; margin: 15px 0; }
#schematic { margin: 20px 0 15px; background: #e2e7cf; border: 1px solid #b5c2a1; overflow: hidden; }
#schematic svg { width: 100%; height: auto; display: block; aspect-ratio: 1; stroke: none; }#schematic text { pointer-events: none; }
.map-key { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center; font-size: 10px; font-weight: 650; }.map-key>span { display: flex; align-items: center; gap: 5px; }.map-key svg { width: 15px; height: 15px; }
.map-key i { display: inline-block; width: 10px; height: 10px; }.you-key { background: #148d79; clip-path: polygon(50% 0,100% 30%,80% 100%,20% 100%,0 30%); }.circle-key { border: 2px solid var(--coral); border-radius: 50%; }.next-key { border: 2px dashed #537d68; border-radius: 50%; }
.result-stats { display: flex; justify-content: space-around; gap: 8px; padding: 20px 0; margin: 10px 0 26px; border-block: 1px solid #b5c2a1; }.result-stats strong { display: block; font-size: 27px; font-variant-numeric: tabular-nums; }.result-stats span { display: block; font-size: 10px; color: #65745e; margin-top: 4px; }
#result-mark { width: 62px; height: 62px; background: #dae3c6; clip-path: var(--cut); margin: 0 auto; display: grid; place-items: center; color: var(--teal); }#result-mark svg { width: 37px; height: 37px; }.lost #result-mark { color: var(--coral); background: #efddc5; }
@media(max-width:700px) {
  .intro { padding: 35px 28px; }.intro-layout { grid-template-columns: 1fr; gap: 20px; max-width: 400px; }.intro-copy { position: relative; z-index: 2; }h1 img { width: 300px; }.intro-meta { font-size: 11px; margin: 18px 0; }.how-to { margin: 24px 0; gap: 11px; }.how-to li { font-size: 12px; }.intro-art { width: 220px; justify-self: end; margin: -8px -15px -16px 0; }.intro::before { clip-path: polygon(100% 30%,100% 100%,4% 100%); }
  #hud { left: 13px; right: 13px; top: calc(13px + env(safe-area-inset-top)); }.match-brand { width: 77px; margin-top: 5px; }.zone-status { min-width: 152px; padding: 8px 13px 10px; }.zone-status>span { font-size: 9px; }.zone-status strong { font-size: 25px; }.icon-button { width: 44px; height: 44px; }#match-status { left: 13px; top: calc(82px + env(safe-area-inset-top)); font-size: 9px; padding: 6px 8px; }
  #utilities { left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); gap: 7px; }.utility-button { flex-basis: 48px; height: 56px; font-size: 10px; }#supply-status { padding: 10px 4px 12px; flex: 0 1 240px; }.supply-meter { width: 50%; padding: 0 6px; }.supply-meter>div:first-child { font-size: 9px; gap: 3px; }.supply-meter svg { width: 13px; height: 13px; }.supply-meter b { font-size: 9px; }
  #hint { top: calc(116px + env(safe-area-inset-top)); font-size: 11px; width: max-content; max-width: 85%; }#reward { font-size: 11px; }.city-label { font-size: 9px; }.city-name { padding: 4px 7px; }.city-label svg { width: 12px; height: 12px; }
  .modal-layer { padding: 15px; }.map-panel,.small-panel { padding: 21px; }.small-panel h2 { font-size: 34px; }.small-panel p { font-size: 11px; }.map-key { font-size: 9px; gap: 9px 12px; }.result-stats strong { font-size: 24px; }.result-stats span { font-size: 9px; }
}
@media(max-width:360px) {
  .intro { padding: 28px 23px; }.intro-art { width: 150px; margin-top: -4px; }.how-to { gap: 8px; margin: 18px 0; }.how-to li { font-size: 11px; }.intro-meta { font-size: 10px; margin: 14px 0; }h1 img { width: 255px; }.primary-button { min-height: 54px; font-size: 13px; }
  .match-brand { width: 57px; }.zone-status { min-width: 141px; }.supply-meter>div:first-child>svg { display: none; }#supply-status { padding-inline: 3px; }.supply-meter { padding-inline: 5px; }#reward { font-size: 10px; }
}
@media(max-height:560px) and (min-width:650px) {
  #reward { left: 20px; bottom: 90px; max-width: calc(50% - 140px); white-space: normal; transform: none; padding: 8px 12px; }#reward.pop { animation: none; }
  .intro { padding: 25px 5vw; }.intro-layout { grid-template-columns: 1fr 1fr; gap: 35px; max-width: 850px; }h1 img { width: 280px; }.intro-meta { margin: 12px 0; font-size: 10px; }.how-to { gap: 8px; margin: 17px 0; }.how-to li { font-size: 11px; }.primary-button { min-height: 50px; }.intro-art { width: 100%; margin: 0; }
  .map-panel { width: 640px; display: grid; grid-template-columns: 1fr 245px; grid-template-rows: auto auto auto auto; gap: 10px 20px; padding: 19px; }.map-panel .panel-heading { grid-column: 1; grid-row: 1; }.map-panel #schematic { grid-column: 2; grid-row: 1/5; margin: 0; width: 245px; height: 245px; }.map-panel .map-key { grid-column: 1; grid-row: 2; justify-content: flex-start; }.map-panel .panel-note { grid-column: 1; grid-row: 3; margin: 0; }.map-panel .primary-button { grid-column: 1; grid-row: 4; font-size: 12px; }
  .small-panel { padding: 18px 28px; }.small-panel h2 { font-size: 29px; margin: 5px 0; }.small-panel p { margin: 8px 0 14px; }.small-panel .text-button { margin-top: 2px; }#result-mark { display: none; }.result-stats { margin: 8px 0 16px; padding: 12px 0; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }#reward.pop { animation: none; opacity: 1; transform: translateX(-50%); } }

/* Group identity and readable, restrained field UI. */
input,select { font: inherit; color: var(--ink); border: 1px solid #919d8e; background: #fffdf3; min-height: 44px; padding: 10px 12px; border-radius: 0; }
input:focus-visible,select:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.intro { background: #e8ebe2ed; }.intro::before { background: #c3ccc1; }.intro-art { filter: saturate(.55); }
.profile-summary { width: min(330px,100%); display: flex; align-items: center; gap: 9px; min-height: 50px; margin: 0 0 14px; padding: 9px 10px; background: #f6f5e9; border: 1px solid #a7b0a0; font-size: 12px; text-align: left; }
.profile-summary>span:last-child { margin-left: auto; max-width: 90px; font-size: 10px; color: #546252; text-align: right; }
.team-swatch { display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; background: var(--team,#287d79); border: 1px solid #0002; }
#group-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.profile-panel { text-align: left; }.profile-panel h2 { text-align: center; font-size: 30px; }
.profile-panel label,.profile-panel legend { font-size: 12px; font-weight: 700; }.profile-panel>label { display: block; margin: 14px 0 7px; }
.profile-panel>input,.profile-panel>select { width: 100%; }
#group-colors { padding: 8px 0 0; border: 0; margin: 17px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.color-choice { position: relative; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.color-choice input { position: absolute; inset: 0; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.color-choice span { width: 30px; height: 30px; display: block; background: var(--team); border: 3px solid #f6f1de; box-shadow: 0 0 0 1px #a7ada0; }
.color-choice input:checked+span { box-shadow: 0 0 0 3px #293f36; }.color-choice input:focus-visible+span { outline: 3px solid #e69a36; outline-offset: 4px; }
#profile-preview { width: 108px; height: 108px; display: block; margin: 0 auto; stroke: none; background: #d9dfd1; border-bottom: 3px solid #9daa99; }
.preview-coat { fill: var(--team,#287d79); }.preview-cap,.preview-hood { display: none; }
#profile-preview[data-appearance=cap] .preview-cap,#profile-preview[data-appearance=hood] .preview-hood { display: block; }
#profile-preview:not([data-appearance=hair]) .preview-hair { display: none; }
.profile-panel .text-button { display: block; margin-inline: auto; }
#leaderboard { position: absolute; right: 24px; top: calc(80px + env(safe-area-inset-top)); width: 196px; z-index: 4; background: #f5f2e6eb; clip-path: var(--cut); font-size: 11px; }
#rank-toggle { display: flex; align-items: center; gap: 8px; justify-content: space-between; width: 100%; min-height: 44px; border: 0; background: transparent; font-size: 11px; font-weight: 750; padding: 8px 12px; }
#rank-summary { font-size: 10px; color: #526352; }#rank-toggle::after { content: '−'; }#rank-toggle[aria-expanded=false]::after { content: '+'; }
#rank-list { margin: 0; padding: 0 10px 6px; list-style: none; }
#rank-list li,#player-rank { display: flex; align-items: center; gap: 7px; min-height: 27px; font-variant-numeric: tabular-nums; }
#rank-list .rank-number { width: 16px; color: #687363; font-size: 10px; }#rank-list .rank-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rank-list li.mine { background: #dae2d3; font-weight: 800; }#rank-list .rank-size { margin-left: auto; }
#player-rank { border-top: 1px solid #a4ac9a55; padding: 6px 12px; font-weight: 750; font-size: 10px; }
#leaderboard.collapsed #rank-list,#leaderboard.collapsed #player-rank { display: none; }
.group-signal { border-bottom: 2px solid var(--team); max-width: 202px; height: 25px; font-size: 10px; font-weight: 700; }
.group-signal .signal-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-signal svg,.group-signal .signal-kind { flex-shrink: 0; }
.group-signal .signal-kind { font-size: 8px; font-weight: 500; color: #656e60; }
.group-signal.infected { background: #e4dfe4eb; }
#combat-status { position: absolute; left: 24px; top: calc(119px + env(safe-area-inset-top)); max-width: 260px; z-index: 3; pointer-events: none; background: #4b3c36ed; color: #f9ead3; padding: 9px 12px; font-size: 11px; line-height: 1.5; clip-path: var(--cut); }
#weapon-help { display: block; background: transparent; border: 0; text-align: left; cursor: pointer; pointer-events: auto; min-height: 50px; }
.supply-heading { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 750; }
.meter { display: block; }#weapon-effect,#fuel-range { display: block; margin-top: 4px; font-size: 9px; line-height: 1.3; color: #59634f; white-space: nowrap; }
.supply-meter { width: 154px; }
@media(max-width:700px) {
  #leaderboard { width: 167px; right: 13px; top: calc(109px + env(safe-area-inset-top)); }
  #leaderboard.collapsed { width: 144px; }#rank-toggle { font-size: 10px; padding: 7px 10px; gap: 5px; }
  #combat-status { top: calc(166px + env(safe-area-inset-top)); left: 13px; max-width: calc(100% - 26px); font-size: 10px; }
  #hint { top: calc(210px + env(safe-area-inset-top)); font-size: 10px; }
  #supply-status { flex-basis: 280px; }.supply-meter { width: 50%; min-width: 0; }.supply-heading { font-size: 9px; gap: 3px; }
  #weapon-effect,#fuel-range { font-size: 8px; white-space: normal; min-height: 20px; }
  #defense-status { bottom: calc(106px + env(safe-area-inset-bottom)); }#alert-status { bottom: calc(141px + env(safe-area-inset-bottom)); }#reward { bottom: calc(182px + env(safe-area-inset-bottom)); }
  .group-signal { font-size: 9px; }.group-signal .signal-name { max-width: 74px; }.group-signal .signal-kind { font-size: 7px; }
  #rank-list { max-height: 86px; overflow-y: auto; scrollbar-width: thin; }
  .profile-panel { padding: 18px 22px; }.profile-panel h2 { margin: 4px 0 9px; }#profile-preview { width: 80px; height: 80px; }
  .profile-summary { font-size: 11px; }.intro-art { width: 170px; }
}
@media(max-width:360px) { .supply-heading>svg { display: none; }#leaderboard.collapsed { width: 132px; }#rank-toggle { font-size: 9px; } }
@media(max-height:560px) and (min-width:650px) {
  #leaderboard { right: 12px; width: 173px; top: 73px; }#rank-list li { min-height: 22px; }
  #combat-status { top: 110px; max-width: 190px; font-size: 10px; }#hint { top: 110px; max-width: 40%; }
  .intro-layout { align-items: start; }.intro-art { align-self: center; }.intro { align-items: flex-start; }
}