/* The look follows gravity3d: deep navy, Georgia, a gold wordmark and an
   orange reset. Written for this game, not copied. */

:root {
  background: #05070d;
  color: #e9efff;
  font-family: Georgia, "Times New Roman", serif;
}

body {
  margin: 0;
  overflow: hidden;
}

.topbar {
  align-items: center;
  background: rgba(9, 16, 30, 0.9);
  border-bottom: 1px solid #26364f;
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  height: 64px;
  left: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 18px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
}

.topbar > * {
  flex-shrink: 0;
}

.wordmark {
  color: #f4c96b;
  font-size: 24px;
  margin-right: auto;
}

.control {
  min-width: 126px;
}

.topbar .q-field__control,
.q-menu {
  background: #111c2e;
}

.topbar .q-field--outlined .q-field__control:before,
.topbar .q-field--outlined .q-field__control:hover:before {
  border-color: #3f5878;
}

.topbar .q-field__label,
.topbar .q-field__native,
.topbar .q-field__marginal,
.q-menu .q-item {
  color: #e9efff;
}

.q-menu .q-item--active,
.q-menu .q-item:hover {
  background: #223a59;
  color: #f4c96b;
}

/* On a touch screen Quasar opens a select's options in a dialog, not a menu:
   the same colours, or the options are pale text on white. */
.q-select__dialog {
  background: #111c2e;
}

.q-select__dialog .q-field__control {
  background: #0d1424;
}

.q-select__dialog .q-field__native,
.q-select__dialog .q-item {
  color: #e9efff;
}

.q-select__dialog .q-item--active,
.q-select__dialog .q-item:hover {
  background: #223a59;
  color: #f4c96b;
}

/* Built with color=None: Quasar's palette is !important inside a cascade
   layer, and only not asking for a colour lets this rule apply. */
.topbar .q-btn.reset {
  background: #d88447 !important;
  color: #10131b !important;
}

/* Toggles in the header: quiet when off, gold when on. */
.topbar .q-btn.auto,
.topbar .q-btn.detector,
.topbar .q-btn.particles,
.topbar .q-btn.debug {
  color: #9fb6d8 !important;
}

.topbar .q-btn.auto.on,
.topbar .q-btn.detector.on,
.topbar .q-btn.particles.on,
.topbar .q-btn.debug.on {
  background: #f4c96b !important;
  color: #10131b !important;
}

.detector-box {
  align-items: center;
  display: flex;
  gap: 10px;
  padding: 0 6px;
}

.detector-label {
  color: #9fb6d8;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.detector-slider {
  width: 120px;
}

.detector-slider .q-slider__track,
.detector-slider .q-slider__selection {
  color: #f0964f;
}

.topbar .q-btn.describe {
  color: #f4c96b !important;
}

.scene-picker {
  min-width: 170px;
}

/* --- the story panel -------------------------------------------------------
   DOM, not canvas: renderer.js stays a drawing surface. It sits at the bottom
   of the window, over the absorbing band - on top it would hide the packet,
   on the right the goal. */
.story {
  background: rgba(9, 16, 30, 0.95);
  border: 1px solid #3f5878;
  border-top: 3px solid #f4c96b;
  bottom: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  font-family: Georgia, "Times New Roman", serif;
  left: 50%;
  max-height: 42vh;
  overflow-y: auto;
  padding: 14px 18px 12px;
  position: fixed;
  transform: translateX(-50%);
  width: min(740px, calc(100vw - 32px));
  z-index: 3;
}

.story-title {
  color: #f4c96b;
  font-size: 19px;
  margin-bottom: 6px;
}

.story-won {
  color: #9ee9aa;
  font-size: 15px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.story-text {
  color: #dce8ff;
  font-size: 15px;
  line-height: 1.55;
}

.story-anchor {
  border-left: 2px solid #f4c96b;
  color: #cfd8ea;
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  margin-top: 10px;
  padding-left: 12px;
}

.story-actions {
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.story .q-btn.story-go {
  background: #d88447 !important;
  color: #10131b !important;
  font-family: Georgia, "Times New Roman", serif;
}

.story .q-btn.story-more {
  color: #9fb6d8 !important;
  font-family: Georgia, "Times New Roman", serif;
}

.story-note {
  color: #8b9bb7;
  font-size: 13px;
}

/* --- the Description dialog -------------------------------------------------- */
.q-card.description {
  background: #0d1424 !important;
  border: 1px solid #3f5878;
  border-top: 3px solid #f4c96b;
  color: #dce8ff;
  font-family: Georgia, "Times New Roman", serif;
  max-width: min(92vw, 760px);
  padding: 22px 26px 14px;
}

.description-title {
  color: #f4c96b;
  font-size: 23px;
  margin-bottom: 4px;
}

.description-heading {
  color: #8b9bb7;
  font-size: 12px;
  letter-spacing: 0.14em;
  margin-top: 14px;
  text-transform: uppercase;
}

.description-text {
  color: #dce8ff;
  font-size: 15px;
  line-height: 1.6;
}

.description .q-btn.description-close {
  align-self: flex-end;
  color: #9fb6d8 !important;
}

/* --- the Patreon login and the locked screen ------------------------------------
   Drawn by tojin_entitlements/ui.py with its own class names, so the flow reads
   the same in every Tojin game; the colours are this game's. */
.tojin-account {
  gap: 4px;
}

.tojin-tier {
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  white-space: nowrap;
}

.tojin-tier-guest {
  border: 1px solid #3f5878;
  color: #9fb6d8;
}

.tojin-tier-explorer {
  background: rgba(244, 201, 107, 0.16);
  border: 1px solid #f4c96b;
  color: #f4c96b;
}

.tojin-check {
  color: #9ee9aa;
  font-size: 18px;
}

.topbar .q-btn.tojin-connect {
  color: #f4c96b !important;
}

.topbar .q-btn.tojin-logout {
  color: #9fb6d8 !important;
}

.q-card.description.explorer {
  max-width: min(92vw, 520px);
}

.tojin-gate {
  gap: 10px;
  padding: 8px 4px;
  text-align: center;
}

.tojin-gate-icon {
  color: #f4c96b;
  font-size: 40px;
}

.tojin-gate-title {
  color: #f4c96b;
  font-size: 22px;
}

.tojin-gate-lead {
  color: #dce8ff;
  font-size: 14px;
  line-height: 1.5;
}

.tojin-gate-soon {
  color: #8b9bb7;
  font-size: 13px;
  font-style: italic;
}

.tojin-gate-actions {
  gap: 8px;
  justify-content: center;
}

.q-btn.tojin-gate-unlock {
  background: #f4c96b !important;
  color: #10131b !important;
  font-family: Georgia, "Times New Roman", serif;
}

/* --- "buy me a coffee" --------------------------------------------------------- */
.topbar .q-btn.coffee-button {
  color: #f4c96b !important;
}

.q-card.description.coffee {
  max-width: min(92vw, 560px);
}

.coffee-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 8px 0;
}

.coffee-code {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coffee-caption {
  color: #8b9bb7;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* White ground with a quiet zone: banking apps read dark-on-light codes most reliably. */
.coffee-qr {
  background: #fff;
  border-radius: 10px;
  line-height: 0;
  padding: 6px;
}

.coffee-qr svg {
  display: block;
  height: 176px;
  width: 176px;
}

.coffee-account {
  color: #f4c96b;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* --- the YouTube channel and the how-to video (app/youtube.py) -------------------
   The channel sits beside the coffee: a small muted text link, not another button
   in a header that is already dense. The how-to video closes the Description. */
.topbar .youtube-link {
  color: #9fb6d8;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.description .howto-link {
  align-self: flex-start;
  color: #f4c96b;
  font-size: 15px;
  margin-top: 14px;
  text-decoration: none;
}

.topbar .youtube-link:hover,
.description .howto-link:hover {
  color: #f4c96b;
  text-decoration: underline;
}

/* Pinned to the window so the canvas origin is the window origin. */
#quantum-canvas {
  display: block;
  height: 100vh;
  inset: 0;
  position: fixed;
  touch-action: none;
  width: 100vw;
}

/* --- phones (brief phase 14) ---------------------------------------------------
   The same query as COMPACT_QUERY in renderer.js, so the header and the canvas
   switch together; a desktop window never matches it, so nothing above changes
   for one. The header keeps every control but drops the words of its buttons
   (the icons stay; the words are in the tooltips and the Description) and the
   floating labels of its selects: one row in landscape, and in portrait three -
   the play controls, then scene, language and Reset, then the scene's detector
   or delay. renderer.js measures the header's real bottom, lays the scene and
   the panels out below it, and gives the story panel its slot through
   --story-x/y/w/h: beside or under the scene, never on it. */
@media (max-width: 600px), (max-height: 500px) {
  .topbar {
    align-content: center;
    flex-wrap: wrap;
    gap: 2px 4px;
    height: auto;
    min-height: 44px;
    overflow: visible;
    padding: 3px 8px;
  }

  .wordmark {
    font-size: 16px;
    margin-right: auto;
  }

  /* Touch targets of 36 px: every control of the header, the slider included. */
  .topbar .q-btn {
    min-height: 36px;
    min-width: 36px;
    padding: 0 6px;
  }

  /* Icon-only buttons; Reset has no icon and keeps its word. Quasar's .block is
     display: block !important inside its cascade layer, which no rule here can
     beat, so the word is folded to nothing instead of hidden. */
  .topbar .q-btn:not(.reset) .q-btn__content > .block {
    font-size: 0;
    overflow: hidden;
    width: 0;
  }

  .topbar .q-btn .q-icon.on-left {
    margin-right: 0;
  }

  .topbar .q-btn.reset {
    padding: 0 10px;
  }

  .tojin-tier {
    font-size: 11px;
    padding: 1px 8px;
  }

  /* The chip already says Explorer. */
  .topbar .tojin-check {
    display: none;
  }

  .topbar .q-field__label {
    display: none;
  }

  .topbar .q-field__control,
  .topbar .q-field__marginal,
  .topbar .q-field__native {
    height: 36px;
    min-height: 36px;
  }

  .topbar .q-field--labeled .q-field__control-container,
  .topbar .q-field--labeled .q-field__native {
    padding-bottom: 0;
    padding-top: 0;
  }

  .topbar .q-field__native {
    font-size: 14px;
  }

  .control {
    min-width: 0;
  }

  .scene-picker {
    flex: 1 1 110px;
    min-width: 100px;
  }

  .detector-box {
    gap: 6px;
    padding: 0 4px;
  }

  .detector-label {
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  /* A gap for the thumb, which stands out of the track's left end at 0. */
  .detector-slider {
    justify-content: center;
    margin-left: 8px;
    min-height: 36px;
    width: 76px;
  }

  /* The story panel sits in the slot beside or under the scene, never on it,
     opaque over the status panel it covers; its buttons stay in view while the
     text scrolls under them. */
  .story {
    background: #09101e;
    bottom: auto;
    display: flex;
    flex-direction: column;
    left: var(--story-x, 8px);
    max-height: var(--story-h, 45vh);
    padding: 10px 12px 10px;
    top: var(--story-y, 50vh);
    transform: none;
    width: var(--story-w, calc(100vw - 16px));
  }

  .story-title {
    font-size: 16px;
    margin-bottom: 2px;
    order: 0;
  }

  .story-won {
    font-size: 13px;
    order: 1;
  }

  .story .story-actions {
    background: #09101e;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin: 2px 0 6px;
    order: 2;
    padding: 2px 0;
    position: sticky;
    top: -10px;
    z-index: 1;
  }

  .story .story-actions .q-btn {
    font-size: 13px;
    min-height: 32px;
    padding: 0 10px;
  }

  .story-text,
  .story-anchor {
    order: 3;
  }

  .story-text {
    font-size: 14px;
    line-height: 1.45;
  }

  .story-anchor {
    font-size: 13px;
  }
}

/* Portrait phones: the play controls, then scene, language and Reset, then the detector or the delay. */
@media (max-width: 600px) and (orientation: portrait) {
  .topbar::before,
  .topbar::after {
    content: "";
    flex-basis: 100%;
    height: 0;
  }

  .topbar::before {
    order: 10;
  }

  .topbar > .scene-picker,
  .topbar > .control,
  .topbar > .reset {
    order: 20;
  }

  .topbar::after {
    order: 30;
  }

  /* The channel link would push the play controls onto a row of their own and
     shrink the scene; on a portrait phone it stays out of the header (the
     how-to video is still in the Description). Landscape keeps it: it fits. */
  .topbar > .youtube-link {
    display: none;
  }

  .topbar > .detector-box {
    flex: 1 1 auto;
    order: 40;
  }

  .topbar > .detector-box .detector-slider {
    flex: 1 1 auto;
  }
}