/* Larp Liquidity — one page, one wordmark, one order book. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: #05070c;
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
               system-ui, sans-serif;
}

#book {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#wordmark {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: 0;
  padding: 0 .5em;
  transform: translate(-50%, -50%)
             translate(var(--px, 0px), var(--py, 0px))
             scale(var(--s, 1));
  will-change: transform;

  font-size: clamp(2.9rem, 11.5vw, 9.5rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .95;
  text-align: center;
  white-space: nowrap;
  color: #f4f7fd;
  /* a quiet halo in the text's own color, plus a dark drop for legibility */
  text-shadow:
    0 0 14px rgba(244, 247, 253, .40),
    0 0 44px rgba(244, 247, 253, .18),
    0 3px 26px rgba(0, 0, 0, .85);

  pointer-events: none;

  transition:
    top .9s cubic-bezier(.22, .9, .3, 1),
    font-size .9s cubic-bezier(.22, .9, .3, 1),
    text-shadow .9s ease;
}

/* once the user is on the desk, the logo gets out of the way.
   `.5em` tracks the transitioning font-size, keeping the -50% translate
   anchored near the top the whole way. */
#wordmark.docked {
  top: calc(1.05rem + .5em);
  font-size: clamp(1.35rem, 4.2vw, 2.1rem);
  text-shadow:
    0 0 8px rgba(244, 247, 253, .32),
    0 0 22px rgba(244, 247, 253, .12),
    0 2px 12px rgba(0, 0, 0, .8);
}

@media (max-width: 540px) {
  #wordmark:not(.docked) { white-space: normal; }
}

/* ---------- the desk: inventory + P&L ---------- */

#desk {
  position: fixed;
  left: 50%;
  bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 16px);
  z-index: 3;

  display: flex;
  gap: clamp(.9rem, 4vw, 1.6rem);
  align-items: center;
  padding: .62rem 1.15rem;

  background: rgba(9, 13, 20, .72);
  border: 1px solid rgba(190, 205, 230, .15);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5);

  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  pointer-events: none;

  opacity: 0;
  visibility: hidden;
  transition:
    opacity .7s ease .35s,
    transform .7s cubic-bezier(.2, .9, .3, 1) .35s,
    visibility 0s 1.1s;
}
#desk.on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: .35s, .35s, .35s;
}

#desk .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  min-width: 4.2rem;
}
#desk .lbl {
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(190, 205, 230, .5);
}
#desk .val {
  font-size: .95rem;
  color: #e8edf6;
  font-variant-numeric: tabular-nums;
}
#desk .val.pos { color: #19e68c; }
#desk .val.neg { color: #ff4d61; }

/* ---------- end-session button ---------- */

#endBtn {
  position: fixed;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: calc(1rem + env(safe-area-inset-right, 0px));
  z-index: 4;

  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(190, 205, 230, .18);
  background: rgba(9, 13, 20, .72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color: rgba(190, 205, 230, .75);
  font: 15px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  opacity: 0;
  visibility: hidden;
  transform: scale(.8);
  transition:
    opacity .5s ease .5s,
    transform .5s cubic-bezier(.2, .9, .3, 1) .5s,
    visibility 0s 1.1s,
    color .2s ease,
    border-color .2s ease;
}
#endBtn.on {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition-delay: .5s, .5s, .5s, 0s, 0s;
}
#endBtn:hover, #endBtn:focus-visible {
  color: #ff4d61;
  border-color: rgba(255, 77, 97, .5);
  outline: none;
}
#endBtn:active { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  #wordmark, #desk, #endBtn { transition: none; }
}