*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Chrome only. Everything inside the screen is painted from the game's
     own palette (secpal.pcc) and must not be tinted by any of this. */
  --chrome:  #17181a;
  --panel:   #1e2023;
  --rule:    #2f3237;
  --ink:     #e6e4e0;
  --ink-mid: #9aa0a6;
  --ink-low: #6d737a;
  --accent:  #bf9300;              /* palette 56, the map's own amber */
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

html, body { height: 100%; }
body {
  margin: 0; background: var(--chrome); color: var(--ink);
  font: 400 13px/1.5 var(--mono); overflow: hidden;
  display: grid; grid-template-columns: 1fr 17rem;
}

/* The screen. Background is palette index 0 - black - so the chrome must
   not bleed into it: this is what the gauge actually draws onto. */
#screen { position: relative; background: #000; overflow: hidden; }
#view { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#view:active { cursor: grabbing; }

#scale {
  position: absolute; left: 1rem; bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
  color: var(--ink-mid); font-size: 11px; letter-spacing: .08em;
  text-shadow: 0 0 4px #000, 0 0 4px #000;
}
#barline { height: 0; border-top: 2px solid var(--ink-mid); }

aside {
  background: var(--panel); border-left: 1px solid var(--rule);
  padding: 1rem; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1rem;
}

h1 { font: 700 15px/1.2 var(--mono); margin: 0; letter-spacing: .02em; }
#key { color: var(--ink-low); font-size: 11px; letter-spacing: .14em; margin: .2rem 0 0; }

select {
  width: 100%; font: 400 12px var(--mono); padding: .45rem .5rem;
  background: var(--chrome); color: var(--ink); border: 1px solid var(--rule);
}
select:focus-visible, #view:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

dl#stats {
  margin: 0; display: grid; grid-template-columns: 1fr auto;
  gap: .3rem .75rem; font-size: 12px;
}
dl#stats dt { color: var(--ink-low); }
dl#stats dd {
  margin: 0; text-align: right; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.note {
  border-top: 1px solid var(--rule); padding-top: .8rem;
  color: var(--ink-low); font-size: 11px; line-height: 1.6;
}
.note b { color: var(--ink-mid); font-weight: 500; }

kbd {
  display: inline-block; min-width: 1.5em; text-align: center;
  border: 1px solid var(--rule); border-bottom-width: 2px;
  padding: .1em .35em; margin-right: .15em; border-radius: 3px;
  background: var(--chrome); color: var(--ink-mid); font: 400 11px var(--mono);
}
.keys { display: grid; grid-template-columns: auto 1fr; gap: .35rem .6rem; font-size: 11px; }
.keys span:nth-child(even) { color: var(--ink-low); align-self: center; }

@media (max-width: 700px) {
  body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  aside { border-left: 0; border-top: 1px solid var(--rule); max-height: 45vh; }
}