/* Rooftop cat: the whole screen is the city; the HUD floats over the night sky in light ink. */
body.rt {
  display: block; overflow: hidden; background: #07081a; touch-action: none; user-select: none; -webkit-user-select: none;
  --ink: #f6f0e6; --muted: rgba(246, 240, 230, .72); --faint: rgba(246, 240, 230, .5);
  --line: rgba(246, 240, 230, .28); --line-hover: rgba(246, 240, 230, .6); --btn-hover: rgba(255, 255, 255, .1); --bg: rgba(10, 10, 24, .45);
  color: var(--ink);
}
.rt-game { position: fixed; left: 0; top: 0; display: block; image-rendering: pixelated; image-rendering: crisp-edges; cursor: pointer; }

.rt-hud {
  position: fixed; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 18px 24px; pointer-events: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.rt-hud > * { pointer-events: auto; }
.rt-left { display: flex; align-items: flex-start; gap: 14px; }
.rt-home { color: var(--muted); }
.rt-scorebox { display: flex; flex-direction: column; gap: 2px; }
.rt-score { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.rt-best { font-size: 11px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; }
.rt-best b { font-weight: 400; color: var(--muted); }

.rt-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 0; }
.rt-moods { display: flex; gap: 6px; }
.rt-chip { padding: 6px 10px; font-size: 11px; color: var(--muted); --px-line: var(--line); --px-fill: var(--bg); }
.rt-chip:hover { color: var(--ink); --px-line: var(--line-hover); }
.rt-chip[aria-pressed="true"] { color: #1c1a17; --px-line: #e6c49c; --px-fill: #e6c49c; text-shadow: none; }
.rt-radio { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rt-now { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-right: 8px; min-width: 0; max-width: 260px; }
.rt-title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rt-artist { font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rt-btn { width: 34px; height: 34px; color: var(--ink); --px-fill: var(--bg); }
.rt-btn svg { width: 16px; height: 16px; }
.rt-btn .ic-pause { display: none; }
body.playing .rt-btn .ic-play { display: none; }
body.playing .rt-btn .ic-pause { display: block; }

.rt-card {
  position: fixed; left: 50%; top: 50%; translate: -50% -50%; z-index: 3;
  width: min(420px, calc(100vw - 32px)); padding: 22px 22px 16px; text-align: center;
  --px-fill: rgba(10, 10, 24, .82); --px-line: rgba(246, 240, 230, .3);
  animation: crate-in .25s ease both;
}
.rt-card[hidden] { display: none; }
.rt-card h1 { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 400; }
.rt-card p { margin: 12px 0 0; font-size: 12px; line-height: 1.65; color: var(--muted); }
.rt-go { margin-top: 18px; padding: 11px 26px; font-size: 13px; color: #1c1a17; --px-line: #e6c49c; --px-fill: #e6c49c; }
.rt-go:hover { --px-line: #f0d4b2; --px-fill: #f0d4b2; }
.rt-keys { font-size: 10px !important; color: var(--faint) !important; letter-spacing: .04em; }

.rt-credit { position: fixed; left: 24px; bottom: 14px; z-index: 2; margin: 0; font-size: 10px; color: var(--faint); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.rt-credit a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }

@media (max-width: 640px) {
  .rt-hud { padding: 12px 12px; flex-wrap: wrap; }
  .rt-right { width: 100%; align-items: stretch; }
  .rt-moods { justify-content: flex-end; }
  .rt-radio { justify-content: flex-end; }
  .rt-now { max-width: 50vw; }
  .rt-score { font-size: 26px; }
  .rt-credit { left: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
}