/* Fiefdom: one war room console. The chrome is his reference's dense terminal,
   the colour and every object in it are his pixel banner's. Nothing here is a
   bordered CSS box: every frame, strip, chip and key is a generated plate,
   nine sliced through border-image. */

@font-face {
  font-family: "Pixeloid";
  src: url("/fonts/PixeloidSans.ttf") format("truetype");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Pixeloid";
  src: url("/fonts/PixeloidSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: block;
}
@font-face {
  font-family: "Pixeloid Mono";
  src: url("/fonts/PixeloidMono.ttf") format("truetype");
  font-weight: 400;
  font-display: block;
}

:root {
  color-scheme: dark;

  --ink: #0d0905;
  --ink-deep: #070402;
  --field: #17100a;
  --field-lit: #1f160d;
  --gold: #d8a33c;
  --gold-bright: #f3d98a;
  --gold-dim: #8a6a28;
  --vermilion: #c6442a;
  --parchment: #f2e6b4;
  --grass: #89951c;
  --river: #1e84b4;
  --stone: #9a9a93;

  --gap-rail: 14px;
  --gap-band: 16px;
  --pad-module: 26px;
  --pad-strip: 22px;

  --face: "Pixeloid", "Courier New", monospace;
  --face-mono: "Pixeloid Mono", "Courier New", monospace;

  --size-label: 18px;
  --size-body: 18px;
  --size-value: 27px;
  --size-title: 18px;
  --size-big: 54px;
  --size-huge: 72px;

  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--ink-deep);
  color: var(--parchment);
  font-family: var(--face);
  font-size: var(--size-body);
  line-height: 1.5;
  -webkit-font-smoothing: none;
  overflow-x: hidden;
}

body::before {
  /* the lattice wallpaper the reference keeps behind every frame */
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("/img/wallpaper.png");
  background-size: 192px 192px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

body::after {
  /* the glass: scanlines and a vignette over the whole console */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.22) 0 1px,
      rgba(0, 0, 0, 0) 1px 3px
    ),
    radial-gradient(130% 120% at 50% 45%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.72) 100%);
}

img {
  image-rendering: pixelated;
}

/* ---------------------------------------------------------------- the console */

.console {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 352px minmax(0, 1fr) 372px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "band band band"
    "left centre right";
  gap: var(--gap-rail);
  padding: var(--gap-rail);
  height: 100dvh;
  min-height: 740px;
}

/* ------------------------------------------------------------------ head band */

.band {
  grid-area: band;
  display: grid;
  grid-template-columns: 392px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 10px var(--gap-band);
  align-items: stretch;
}

.ident {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px var(--pad-strip);
  border: 16px solid transparent;
  border-image: url("/img/frame-module.png") 32 fill / 16px / 0 stretch;
}

.ident__mark {
  width: 64px;
  height: 64px;
  flex: none;
}

.ident__wordmark {
  display: block;
  width: 232px;
  height: auto;
}

.ident__ticker {
  margin: 6px 0 0;
  font-size: var(--size-label);
  color: var(--gold);
  letter-spacing: 0.08em;
}

.ident__sub {
  color: var(--gold-dim);
  margin-left: 10px;
}

.cycle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-band);
}

.cycle__cell {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px var(--pad-strip);
  border: 12px solid transparent;
  border-image: url("/img/frame-cell.png") 24 fill / 12px / 0 stretch;
  min-width: 0;
}

.cycle__no {
  font-size: 44px;
  line-height: 1;
  color: var(--gold-bright);
  flex: none;
}

.cycle__words {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--size-label);
  color: var(--parchment);
}

.cycle__sub {
  color: var(--gold-dim);
  font-size: var(--size-label);
}

.realmline {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  align-items: center;
  margin: 0;
  padding: 10px var(--pad-strip);
  border: 10px solid transparent;
  border-image: url("/img/strip-title.png") 20 fill / 10px / 0 stretch;
  font-size: var(--size-label);
  color: var(--gold);
  letter-spacing: 0.06em;
}

.realmline__state {
  color: var(--vermilion);
  margin-left: auto;
}

/* --------------------------------------------------------------------- rails */

.rail {
  display: grid;
  gap: var(--gap-rail);
  min-height: 0;
}

.rail--left {
  grid-area: left;
  grid-template-rows: minmax(0, 1.05fr) minmax(0, 1fr) auto;
}

.rail--right {
  grid-area: right;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.centre {
  grid-area: centre;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--gap-rail);
  min-height: 0;
  min-width: 0;
}

/* ------------------------------------------------------------------- modules */

.module {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  border: 16px solid transparent;
  border-image: url("/img/frame-module.png") 32 fill / 16px / 0 stretch;
}

.module__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 11px var(--pad-strip);
  border: 10px solid transparent;
  border-image: url("/img/strip-title.png") 20 fill / 10px / 0 stretch;
  font-size: var(--size-title);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.module__dots {
  letter-spacing: 0.1em;
  color: var(--ink);
  opacity: 0.6;
}

.module__body {
  padding: var(--pad-module);
  min-height: 0;
  overflow: hidden;
}

.module__foot {
  margin: 0;
  padding: 10px var(--pad-module) 14px;
  font-size: var(--size-label);
  color: var(--gold-dim);
  border-top: 2px dotted rgba(216, 163, 60, 0.35);
  overflow-wrap: anywhere;
}

.module__note {
  margin: 8px 0 0;
  font-size: var(--size-label);
  color: var(--gold-dim);
}

.scroller {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
  overscroll-behavior: auto;
}

/* ------------------------------------------------------------------ the split */

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-label);
}

.ledger th {
  text-align: left;
  padding: 7px 14px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ledger th + th {
  text-align: right;
}

.ledger td {
  padding: 9px 14px;
  border-bottom: 2px dotted rgba(216, 163, 60, 0.3);
  color: var(--parchment);
}

.ledger td:first-child {
  color: var(--gold-bright);
  font-family: var(--face-mono);
  width: 5em;
}

.ledger td + td {
  text-align: right;
  color: var(--gold);
}

/* ---------------------------------------------------------------- the dossier */

.dossier {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.dossier__crest {
  width: 112px;
  height: 128px;
  display: block;
}

.dossier__name {
  margin: 0;
  font-size: var(--size-value);
  font-weight: 700;
  color: var(--gold-bright);
  overflow-wrap: anywhere;
}

.dossier__trait {
  display: inline-block;
  margin: 8px 0 0;
  padding: 5px 16px;
  background: var(--gold);
  color: var(--ink);
  font-size: var(--size-label);
  letter-spacing: 0.08em;
}

.dossier__rows {
  grid-column: 1 / -1;
  display: grid;
  gap: 2px;
  margin-top: 6px;
}

.dossier__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 2px dotted rgba(216, 163, 60, 0.28);
  font-size: var(--size-label);
}

.dossier__row b {
  color: var(--gold-bright);
  font-family: var(--face-mono);
  font-weight: 400;
}

.dossier__row span {
  color: var(--gold-dim);
}

.empty {
  margin: 0;
  color: var(--gold-dim);
  font-size: var(--size-label);
}

/* ------------------------------------------------------------------- the list */

.fief-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: 0;
  border-bottom: 2px dotted rgba(216, 163, 60, 0.26);
  color: var(--parchment);
  font-family: var(--face);
  font-size: var(--size-label);
  text-align: left;
  cursor: pointer;
}

.fief-row:hover,
.fief-row:focus-visible {
  background: var(--field-lit);
  outline: none;
}

.fief-row[aria-current="true"] {
  background: var(--gold);
  color: var(--ink);
}

.fief-row img {
  width: 40px;
  height: 46px;
}

.fief-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.fief-row i {
  font-style: normal;
  font-family: var(--face-mono);
  color: var(--gold-bright);
}

.fief-row[aria-current="true"] i {
  color: var(--ink);
}

/* ------------------------------------------------------------------ viewport */

.viewport {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  border: 22px solid transparent;
  border-image: url("/img/frame-viewport.png") 44 fill / 22px / 0 stretch;
}

.viewport__rail {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px var(--pad-strip);
  border: 10px solid transparent;
  border-image: url("/img/strip-title.png") 20 fill / 10px / 0 stretch;
  min-width: 0;
}

.viewport__name {
  font-size: var(--size-title);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  flex: none;
}

.chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 12px solid transparent;
  border-image: url("/img/chip-off.png") 24 fill / 12px / 0 stretch;
  background: none;
  color: var(--gold-bright);
  font-family: var(--face);
  font-size: var(--size-label);
  letter-spacing: 0.06em;
  cursor: pointer;
}

.chip em {
  font-style: normal;
  font-family: var(--face-mono);
  color: var(--gold-dim);
}

.chip[aria-current="true"] {
  border-image: url("/img/chip-on.png") 24 fill / 12px / 0 stretch;
  color: var(--ink);
}

.chip[aria-current="true"] em {
  color: var(--ink);
}

.chip:focus-visible {
  outline: 3px solid var(--parchment);
  outline-offset: 2px;
}

.drawer-key {
  display: none;
}

.viewport__glass {
  position: relative;
  min-height: 0;
  min-width: 0;
  background: #0a1510;
  overflow: hidden;
}

#realm-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.viewport__hint {
  position: absolute;
  left: 20px;
  bottom: 16px;
  margin: 0;
  padding: 8px 18px;
  background: rgba(13, 9, 5, 0.82);
  color: var(--gold);
  font-size: var(--size-label);
  pointer-events: none;
  transition: opacity 0.3s;
}

.viewport__hint[hidden] {
  display: none;
}

/* --------------------------------------------------------------------- views */

.view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 34px;
  background: rgba(13, 9, 5, 0.94);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}

.view[hidden] {
  display: none;
}

.view h3 {
  margin: 0 0 10px;
  font-size: var(--size-value);
  color: var(--gold-bright);
  letter-spacing: 0.04em;
}

.view p {
  margin: 0 0 18px;
  max-width: 62ch;
  color: var(--parchment);
}

.view__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}

.sheet {
  padding: 26px;
  border: 14px solid transparent;
  border-image: url("/img/parchment.png") 28 fill / 14px / 0 stretch;
  color: #3a2a12;
}

.sheet h4 {
  margin: 0 0 10px;
  font-size: var(--size-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b4a16;
}

.sheet p,
.sheet li {
  color: #3a2a12;
  font-size: var(--size-body);
}

.sheet ol,
.sheet ul {
  margin: 0;
  padding-left: 1.4em;
}

/* ------------------------------------------------------------------- the form */

.form {
  display: grid;
  gap: 20px;
  max-width: 560px;
}

.field {
  display: grid;
  gap: 8px;
}

.field > span {
  font-size: var(--size-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.field input,
.field select {
  min-height: 52px;
  padding: 0 18px;
  background: var(--field);
  border: 3px solid var(--gold-dim);
  color: var(--parchment);
  font-family: var(--face);
  font-size: var(--size-body);
}

.field input:focus,
.field select:focus {
  outline: 3px solid var(--gold-bright);
  outline-offset: 1px;
}

.traits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.trait-key {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 12px 18px;
  border: 12px solid transparent;
  border-image: url("/img/chip-off.png") 24 fill / 12px / 0 stretch;
  background: none;
  color: var(--gold-bright);
  font-family: var(--face);
  font-size: var(--size-label);
  text-align: left;
  cursor: pointer;
}

.trait-key small {
  color: var(--gold-dim);
  font-size: var(--size-label);
}

.trait-key[aria-pressed="true"] {
  border-image: url("/img/chip-on.png") 24 fill / 12px / 0 stretch;
  color: var(--ink);
}

.trait-key[aria-pressed="true"] small {
  color: var(--ink);
}

/* ------------------------------------------------------------------ the night */

.countdown {
  margin: 0;
  font-family: var(--face-mono);
  font-size: var(--size-big);
  line-height: 1.05;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
}

.season {
  display: grid;
  gap: 10px;
}

.season__track {
  position: relative;
  height: 26px;
  background: var(--field);
  border: 3px solid var(--gold-dim);
  overflow: hidden;
}

.season__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--gold);
}

.season__legend {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-label);
  color: var(--gold-dim);
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100%;
  min-height: 120px;
}

.bars__bar {
  flex: 1 1 0;
  min-width: 8px;
  background: var(--gold);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 0 2px,
    rgba(0, 0, 0, 0) 2px 6px
  );
}

.bars__bar--top {
  background-color: var(--vermilion);
}

/* --------------------------------------------------------------- the treasury */

.treasury__figure {
  margin: 0 0 18px;
  font-size: var(--size-label);
  color: var(--gold-dim);
}

.treasury__figure b {
  display: block;
  font-family: var(--face-mono);
  font-size: var(--size-value);
  color: var(--gold-bright);
  font-weight: 400;
}

.slot {
  display: grid;
  gap: 6px;
  padding: 16px 20px;
  border: 12px solid transparent;
  border-image: url("/img/plate-sunken.png") 24 fill / 12px / 0 stretch;
}

.slot__label {
  font-size: var(--size-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.slot__value {
  font-family: var(--face-mono);
  font-size: var(--size-label);
  color: var(--gold-bright);
  overflow-wrap: anywhere;
  min-width: 0;
  user-select: all;
}

.keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 12px solid transparent;
  border-image: url("/img/key.png") 24 fill / 12px / 0 stretch;
  background: none;
  color: var(--gold-bright);
  font-family: var(--face);
  font-size: var(--size-label);
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}

.key:active,
.key--pressed {
  border-image: url("/img/key-press.png") 24 fill / 12px / 0 stretch;
  transform: translateY(2px);
}

.key[disabled],
.key[aria-disabled="true"] {
  color: var(--gold-dim);
  cursor: not-allowed;
  filter: saturate(0.4) brightness(0.72);
}

.key:focus-visible {
  outline: 3px solid var(--parchment);
  outline-offset: 2px;
}

.key img {
  width: 22px;
  height: 22px;
  flex: none;
}

.key--wide {
  grid-column: 1 / -1;
}

/* ----------------------------------------------------------- the chronicle */

.module--chronicle {
  grid-template-rows: auto minmax(0, 1fr);
}

.module--chronicle .module__body {
  padding: 14px var(--pad-module);
}

.chronicle {
  display: flex;
  align-items: center;
  gap: 42px;
  height: 46px;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--size-label);
  color: var(--parchment);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.chronicle__line {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.chronicle__when {
  color: var(--vermilion);
  font-family: var(--face-mono);
}

.chronicle__who {
  color: var(--gold-bright);
}

/* --------------------------------------------------------------- the phone */

@media (max-width: 1100px) {
  .console {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "band"
      "centre"
      "left"
      "right";
    height: auto;
    min-height: 100dvh;
  }

  .band {
    grid-template-columns: minmax(0, 1fr);
  }

  .ident {
    grid-row: auto;
  }

  .realmline {
    grid-column: 1;
  }

  .cycle {
    grid-template-columns: minmax(0, 1fr);
  }

  .centre {
    grid-template-rows: 62dvh auto;
  }

  .rail--left,
  .rail--right {
    grid-template-rows: none;
    grid-auto-rows: auto;
  }

  .module {
    min-height: 220px;
  }

  .scroller {
    max-height: 420px;
  }

  /* the views stop being an overlay on a phone: they are their own screen */
  .view {
    position: absolute;
  }

  .drawer-key {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-left: auto;
    padding: 0 22px;
    border: 12px solid transparent;
    border-image: url("/img/key.png") 24 fill / 12px / 0 stretch;
    background: none;
    color: var(--gold-bright);
    font-family: var(--face);
    font-size: var(--size-label);
    cursor: pointer;
  }

  .chips {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--ink);
    border: 3px solid var(--gold-dim);
  }

  .chips[hidden] {
    display: none;
  }

  .viewport__rail {
    position: relative;
  }

  .keys {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  :root {
    --pad-module: 20px;
    --pad-strip: 18px;
  }

  .cycle__no {
    font-size: 36px;
  }

  .countdown {
    font-size: 36px;
  }

  .ident {
    gap: 14px;
  }

  .ident__wordmark {
    width: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}