/* Layout: the page is the game's Investment Terminal window. Title bar and
   menu bar on top, the lobby (main menu), the trading floor that breaks into
   the chart, ledger panes, and the ticker plus status bar at the bottom. */

/* App bar: window title bar + classic menu bar */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 50;
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 30px;
  padding: 0 6px 0 10px;
  background: linear-gradient(180deg, var(--title-top) 0%, var(--title-mid) 45%, var(--title-bottom) 100%);
  border-top: 1px solid #5a6f92;
  border-bottom: 1px solid #0b1628;
}

.titlebar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-right: auto;
  font-size: 0.86rem;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}

.titlebar__app {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #c9d3e4;
}

/* Title in the wordmark colors with a thin dark outline, like the game's title. */
.wordmark-text {
  font-weight: 700;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}

.wordmark-text__a {
  color: var(--green);
}

.wordmark-text__b {
  color: var(--gold);
}

.winbtns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.winbtns i {
  width: 22px;
  height: 18px;
  background: linear-gradient(180deg, #9aa3b5, #6c768b);
  border: 1px solid #3b4456;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.winbtns i.winbtns__close {
  background: linear-gradient(180deg, #c8656a, #93373c);
  border-color: #5a1f23;
}

.menubar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 8px;
  background: var(--status);
  border-bottom: 1px solid var(--chrome-edge);
}

.menubar__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  font-size: 0.9rem;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
}

.menubar__toggle:hover,
.menubar__toggle[aria-expanded="true"] {
  background: var(--sel-mid);
  border-color: var(--sel-edge);
}

.menubar__bars,
.menubar__bars::before,
.menubar__bars::after {
  display: block;
  width: 14px;
  height: 2px;
  background: currentColor;
}

.menubar__bars {
  position: relative;
}

.menubar__bars::before,
.menubar__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menubar__bars::before { top: -5px; }
.menubar__bars::after { top: 5px; }

.menubar__list {
  display: flex;
  flex-wrap: wrap;
}

.menubar__list a {
  display: block;
  padding: 8px 12px;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--text);
  border: 1px solid transparent;
}

.menubar__list a:hover {
  color: #fff;
  background: linear-gradient(180deg, var(--sel-top), var(--sel-bottom));
  border-color: var(--sel-edge);
}

.menubar .order-btn {
  margin-left: auto;
}

/* Small screens: the menu bar collapses into a drop-down menu. */
@media (max-width: 859px) {
  .titlebar__app {
    display: none;
  }

  .js .menubar__toggle {
    display: inline-flex;
  }

  .js .menubar__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 8px;
    min-width: 230px;
    padding: 3px;
    background: var(--status);
    border: 1px solid var(--chrome-edge);
    box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.45);
  }

  .js [data-nav-open] .menubar__nav {
    display: block;
  }

  .js .menubar__list {
    flex-direction: column;
  }

  .js .menubar__list a {
    padding: 10px 12px;
  }
}

/* Lobby: the game's main menu */
.lobby {
  display: grid;
  grid-template-areas: "mast" "ops" "statement" "status";
  gap: 32px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px var(--gutter) 56px;
}

.lobby__mast { grid-area: mast; }
.lobby__statement { grid-area: statement; }
.lobby__status { grid-area: status; }
.lobby__ops { grid-area: ops; }

.lobby__mast {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.lobby__title {
  width: min(100%, 520px);
  padding-bottom: 14px;
  border-bottom: 2px solid #3d4a61;
}

.lobby__tagline {
  font-family: var(--font-heavy);
  font-size: clamp(0.95rem, 3.4vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cfb66f;
}

.lobby__lede {
  max-width: 46ch;
  color: #aeb8c9;
}

@media (min-width: 960px) {
  .lobby {
    grid-template-columns: 0.82fr 1.18fr;
    grid-template-areas:
      "mast mast"
      "statement statement"
      "status ops";
    gap: 36px 44px;
    padding-top: 36px;
  }
}

/* Trading floor: full-bleed chart, the one section that breaks the frame */
.floor {
  position: relative;
  background: var(--chart) url("../assets/img/chart-bg.svg") right center / cover no-repeat;
  border-top: 1px solid var(--chrome-edge);
  border-bottom: 1px solid var(--chrome-edge);
}

.floor__inner {
  display: grid;
  gap: 32px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 44px var(--gutter) 52px;
}

.floor__brief {
  display: grid;
  align-content: start;
  gap: 20px;
}

/* On phones the game comes right after the intro, before the scoreboard. */
@media (max-width: 959px) {
  .floor__brief {
    display: contents;
  }

  .floor__brief > .pane-head { order: 1; }
  .floor__brief > .pane-lede { order: 2; }
  .floor__inner > .pong { order: 3; }
  .floor__brief > .scoreboard { order: 4; }
  .floor__brief > .keys { order: 5; }
}

@media (min-width: 960px) {
  .floor__inner {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 48px;
    align-items: start;
    padding: 64px var(--gutter);
  }
}

/* Ledger panes */
.pane {
  border-bottom: 1px solid var(--rule-soft);
}

.pane__inner {
  display: grid;
  gap: 24px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 52px var(--gutter);
}

.pane__inner--narrow {
  max-width: 900px;
}

.pane--prospectus {
  background: rgba(15, 20, 31, 0.7);
}

@media (min-width: 960px) {
  .pane__inner {
    padding: 72px var(--gutter);
  }

  .pane__inner--split {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 48px;
  }
}

/* Footer: fine print, then the game's ticker and status bars */
.site-footer__inner {
  display: grid;
  gap: 10px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px var(--gutter) 28px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-size: 0.88rem;
}

.site-footer__links a {
  display: inline-block;
  padding: 6px 0;
  color: var(--label);
}

.site-footer__links a:hover {
  color: var(--text);
}

.statusbar {
  font-size: 0.78rem;
  color: var(--label);
}

.statusbar__ticker {
  overflow: hidden;
  white-space: nowrap;
  background: #0d1421;
  border-top: 1px solid var(--chrome-edge);
}

.statusbar__track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}

.statusbar__track span {
  padding: 6px 16px;
}

.statusbar__track b {
  font-weight: 400;
  color: var(--label);
}

.statusbar__track em {
  font-style: normal;
}

.statusbar__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 14px;
  background: var(--status);
  border-top: 1px solid var(--chrome-edge);
}

.statusbar__online {
  color: var(--green);
  text-transform: uppercase;
}

.statusbar__online::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  vertical-align: 1px;
  background: var(--green);
  border-radius: 50%;
}

.statusbar__right time {
  margin-left: 12px;
  font-family: var(--font-num);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .statusbar__track {
    animation: none;
  }
}

/* On larger screens the status bar is docked to the bottom, like the game. */
@media (min-width: 760px) {
  body {
    padding-bottom: 58px;
  }

  .statusbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
  }
}

/* Language switch in the menu bar, like a toolbar toggle */
.lang-switch {
  margin-left: auto;
}

.lang-switch ul {
  display: flex;
  gap: 2px;
}

.lang-switch a {
  display: block;
  padding: 5px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--label);
  border: 1px solid transparent;
}

.lang-switch a:hover {
  color: var(--text);
  border-color: var(--rule);
}

.lang-switch a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(180deg, var(--sel-top), var(--sel-bottom));
  border-color: var(--sel-edge);
}

.menubar .lang-switch + .order-btn {
  margin-left: 0;
}