/* Fixed widescreen composition; source gold/cyan console owns the chrome. */
#screen,
#screen:fullscreen {
  width: min(100vw, 177.916667dvh);
  aspect-ratio: 854/480;
}
#screen #field {
  bottom: auto;
  height: 46.8384074941452cqw;
}
#native-console-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  image-rendering: pixelated;
}
#native-console-shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
}
#screen.native-console #hud {
  inset: 0;
  height: 100%;
  background: none;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  z-index: 3;
}
#screen.native-console .hud-ridge,
#screen.native-console .hud-bolts {
  display: none;
}
#screen.native-console #hud > section,
#screen.native-console #map-panel,
#screen.native-console #portrait-frame,
#screen.native-console #commands,
#screen.native-console #menu-button {
  pointer-events: auto;
}
#screen.native-console #map-panel {
  left: 0.702576%;
  top: 73.125%;
  width: 14.754098%;
  height: 25.625%;
  padding: 0;
  border: 0;
  background: #000;
  box-shadow: none;
}
#screen.native-console #minimap {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
#screen.native-console #map-players {
  position: absolute;
  left: 0;
  right: 0;
  top: -21%;
  height: 16%;
  padding: 0;
  gap: 0.4cqw;
}
#screen.native-console #map-players button {
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 1.15cqw;
  color: #fff66a;
}
#screen.native-console #selection-panel {
  left: 29.508197%;
  top: 82.291667%;
  width: 30.210773%;
  height: 16.25%;
  padding: 0.3cqw 0.5cqw;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}
#screen.native-console #selection-title {
  font-size: 1.35cqw;
  padding: 0 0 0.4cqw;
  line-height: 1.2;
  color: #dbdd8d;
}
#screen.native-console #selection-stats {
  font-size: 1.2cqw;
  line-height: 1.4;
  text-align: center;
  color: #c4c7cf;
}
#screen.native-console #selection-extra {
  font-size: 1.12cqw;
  line-height: 1.25;
  margin: 0.3cqw 0;
  text-align: center;
  color: #65e464;
}
#screen.native-console #selection-grid {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.5cqw;
  height: 8.2cqw;
}
#screen.native-console #selection-grid button {
  height: 100%;
  padding: 0;
  border: 1px solid #afb8c2;
  background: #000;
  box-shadow: inset 0 0 0 1px #41657d;
}
#screen.native-console #selection-panel:has(#selection-grid:not(:empty)) #selection-title,
#screen.native-console #selection-panel:has(#selection-grid:not(:empty)) #selection-extra {
  display: none;
}
#screen.native-console #portrait-frame {
  left: 74.238876%;
  top: 88.75%;
  width: 6.791569%;
  height: 10.416667%;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: #02070e;
}
#screen.native-console #portrait {
  width: 100%;
  height: 100%;
}
#screen.native-console #portrait-label {
  display: none;
}
#screen.native-console #menu-button {
  position: absolute;
  left: 73.770492%;
  top: 82.5%;
  width: 7.259953%;
  height: 4.375%;
  padding: 0;
  font-size: 1.1cqw;
  line-height: 1;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #f6ed66;
}
#screen.native-console #commands {
  /* Source command cells: (504,359) + widescreen x214; 36x34, pitch 46x40. */
  left: 84.074941%;
  top: 74.791667%;
  width: 14.98829%;
  height: 23.75%;
  padding: 0;
  border: 0;
  background: none;
  grid-template-columns: repeat(3, 4.215457cqw);
  grid-template-rows: repeat(3, 3.981265cqw);
  gap: 0.702576cqw 1.17096cqw;
}
#screen.native-console #commands button {
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  line-height: 1;
  font-size: 1.05cqw;
  color: #f5f367;
  min-height: 0;
  overflow: hidden;
}
#screen.native-console #commands button[data-empty="true"] {
  visibility: hidden;
}
#screen.native-console #commands .command-name {
  display: none;
}
#screen.native-console #commands button kbd {
  font: 0.936768cqw / 1 monospace;
  right: 0.234192cqw;
  top: 0.234192cqw;
  margin: 0;
  padding: 0;
  z-index: 1;
  background: #020706c0;
  text-shadow: 1px 1px #000;
  pointer-events: none;
}
#screen.native-console #commands .command-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2.8cqw;
  line-height: 1;
  color: #f6f65d;
  text-shadow: 1px 1px #817d17;
}
#screen.native-console #commands canvas {
  flex: none;
  width: 4.215457cqw;
  height: 3.981265cqw;
  image-rendering: pixelated;
  object-fit: contain;
}
#screen.native-console #commands button[aria-pressed="true"] {
  outline: 1px solid #fff871;
}
#screen.native-console #commands button[data-action="2"] .command-name,
#screen.native-console #commands button[data-action="4"] .command-name,
#screen.native-console #commands button[data-action="r"] .command-name {
  display: block;
  position: absolute;
  bottom: 0;
  background: #000b;
  width: 100%;
  font-size: 0.95cqw;
}
#screen.native-console #tooltip {
  bottom: 28%;
  font-size: 1.2cqw;
  max-width: 40%;
  padding: 0.8cqw;
  border: 1px solid #2684bd;
  background: #030913f5;
  z-index: 4;
}
#screen.native-console #topbar {
  height: 5%;
  background: none;
  box-shadow: none;
  border: 0;
  padding: 0;
  display: block;
  z-index: 4;
}
#screen.native-console .resources {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  font-size: 1.35cqw;
  color: #65e464;
}
#screen.native-console .resources > span {
  position: absolute;
  top: 0.5cqw;
  white-space: nowrap;
}
#screen.native-console .resources .mineral {
  left: 84%;
}
#screen.native-console .resources .gas {
  left: 93%;
}
#screen.native-console .resources .supply {
  display: none;
}
#screen.native-console #stage {
  position: absolute;
  left: 25%;
  top: auto;
  bottom: 21%;
  width: 55%;
  max-width: none;
  text-align: center;
  font-size: 1.4cqw;
  overflow: visible;
}
#screen.native-console #timer {
  position: absolute;
  left: 52%;
  top: 0.65cqw;
  font-size: 1.5cqw;
  color: #c2c2d4;
}
#screen.native-console #leaderboard {
  top: 0.5%;
  left: 1%;
  width: 42%;
  font-size: 1.35cqw;
  line-height: 1.35;
  z-index: 2;
}
#screen.native-console #leaderboard .score {
  line-height: 1.3;
  white-space: nowrap;
}
#screen.native-console #selection-detail {
  font-size: 0.9cqw;
}

#screen.native-console #selection-unit-art {
  position: absolute;
  left: 1%;
  top: 5%;
  width: 25%;
  height: 82%;
  image-rendering: pixelated;
}
#screen.native-console .single-unit #selection-title,
#screen.native-console .single-unit #selection-stats,
#screen.native-console .single-unit #selection-extra {
  margin-left: 27%;
  text-align: center;
}
#screen.native-console #selection-panel.single-unit #selection-extra {
  margin-left: 27%;
  text-align: center;
}
#screen.native-console #map-panel {
  overflow: visible;
}

/* Native FONT glyphs keep their own bitmap widths instead of system-font metrics. */
#screen .bitmap-number {
  position: relative;
  color: transparent !important;
  text-shadow: none !important;
  display: inline-block;
  min-width: 0;
  line-height: 1;
  white-space: nowrap;
}
.native-number {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}
#screen #leaderboard .bitmap-number {
  position: relative;
  vertical-align: baseline;
  height: 1em;
}
#screen.native-console #timer {
  font-size: 2cqw;
}
/* Player-number tabs were a web overlay, not part of the source minimap frame. */
#screen.native-console #map-players {
  display: none;
}

#screen.native-console #minimap-controls {
  position: absolute;
  left: 0;
  top: 66.458333%;
  width: 15.925059%;
  height: 5%;
  display: flex;
  align-items: center;
  gap: 0.702576cqw;
  pointer-events: auto;
}
#screen.native-console #minimap-controls button {
  height: 100%;
  padding: 0;
  box-shadow: none;
  border: 0;
  background-color: transparent;
  background-size: 100% 100%;
  image-rendering: pixelated;
  filter: none;
}
#screen.native-console #minimap-terrain {
  width: 7.494145cqw;
  background-image: url("./dialog72/map-on.png");
}
#screen.native-console #minimap-terrain[aria-pressed="false"] {
  background-image: url("./dialog72/map-off.png");
}
#screen.native-console #minimap-players {
  width: 6.088993cqw;
  background-image: url("./dialog72/players.png");
}
#screen.native-console #menu-button {
  background: url("./dialog72/menu-button.png") center/100% 100% no-repeat;
  image-rendering: pixelated;
}
#screen.native-console #minerals,
#screen.native-console #gas {
  font-size: 2cqw;
}

/* Match original PCX apertures without stretching the minimap or portrait. */
#screen.native-console #map-panel {
  left: 0.58548%;
  top: 72.5%;
  width: 14.98829%;
  height: 26.666667%;
}
#screen.native-console #portrait-frame {
  left: 73.5363%;
  top: 87.083333%;
  width: 7.025761%;
  height: 11.666667%;
}
#screen.native-console #menu-button {
  left: 73.5363%;
  top: 81.25%;
  width: 7.494145%;
  height: 4.166667%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.468384cqw;
  padding: 0 0.702576cqw;
  overflow: hidden;
  white-space: nowrap;
}
#screen.native-console #menu-button kbd {
  font: 0.819672cqw / 1 monospace;
  margin: 0;
  color: #c8c898;
}
#screen.native-console #commands .command-name {
  left: 0.117096cqw;
  right: 0.117096cqw;
  bottom: 0.117096cqw;
  max-width: calc(100% - 0.234192cqw);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
#screen.native-console #selection-panel {
  left: 30.327869%;
  top: 81.458333%;
  width: 28.103044%;
  height: 17.083333%;
}

/* The housing owns the aperture; FONT labels only own their glyph width.
   Centers follow the two console ornaments at logical x356 and x469. */
.console-counter {
  display: contents;
}
#screen.native-console .console-counter {
  position: absolute;
  top: 74.166667%;
  height: 6.25%;
  display: grid;
  place-items: center;
  padding: 0.819672cqw 0.936768cqw 0.351288cqw;
  background: url("./counter-frame72.svg") center / 100% 100% no-repeat;
  z-index: 4;
  pointer-events: none;
}
#screen.native-console .console-counter-units {
  left: 37.704918%;
  width: 7.962529%;
}
#screen.native-console .console-counter-clock {
  left: 49.765808%;
  width: 10.30445%;
}
#screen.native-console .console-counter #unit-count,
#screen.native-console .console-counter #match-clock {
  position: relative;
  left: auto;
  top: auto;
  font-size: 1.405152cqw;
  line-height: 1;
  height: 1em;
  width: auto;
  color: #bfc3d0;
  text-align: center;
}
#screen.native-console .console-counter #unit-count {
  color: #59d35b;
}

/* Original role split: family wireframe on the left, Maple portrait on the right. */
#screen.native-console #selection-panel.single-unit {
  display: grid;
  grid-template-columns: 7.494145cqw minmax(0, 1fr);
  grid-template-rows: 1.75644cqw minmax(0, 1fr) 1.405152cqw;
  column-gap: 0.702576cqw;
  padding: 0.351288cqw 0.468384cqw;
}
#screen.native-console .single-unit #selection-unit-art {
  position: static;
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
  width: 7.494145cqw;
  height: 7.494145cqw;
  object-fit: contain;
  image-rendering: pixelated;
}
#screen.native-console .single-unit #selection-title,
#screen.native-console .single-unit #selection-stats,
#screen.native-console #selection-panel.single-unit #selection-extra {
  grid-column: 2;
  margin: 0;
  padding: 0;
  min-width: 0;
}
#screen.native-console .single-unit #selection-title {
  grid-row: 1;
  font-size: 1.405152cqw;
  line-height: 1.25;
  text-align: center;
}
#screen.native-console .single-unit #selection-stats {
  grid-row: 2;
  align-self: center;
  font-size: 1.171cqw;
  line-height: 1.4;
  text-align: center;
}
#screen.native-console #selection-panel.single-unit #selection-extra {
  grid-row: 3;
  align-self: center;
  font-size: 1.054cqw;
  line-height: 1;
  text-align: left;
}
#screen.native-console .single-unit #selection-grid {
  display: none;
}