/*
 * base.css — CORE. Global tokens, resets, global element rules, page background,
 * the main column (.app) and the shared component classes that several features
 * render (number cells, live dot, empty-state row, shared keyframes).
 * Values are copied verbatim from the specs (spec 01 §2–§3, spec 04 §6, spec 06 §1);
 * minified 8-digit hex colours are kept as-is. Feature files load after this one.
 *
 * Root stacking order (spec 01 §5.1, effective z-index, high → low). Feature CSS
 * must use exactly these values:
 *   2147483647  copy-helper textarea (inline style, core/ui.js copyText)
 *   9999        #historyHoverTooltip                    grid.css
 *   5000        #sessionNoticeModal                     auth.css
 *   4300        #pwaInstallPrompt                       pwa.css
 *   1100        #customerServiceModal                   header.css
 *   1000        #authModal                              auth.css
 *    980        .kugou-toast                            kugou.css
 *    900        .kugou-android-tabbar (!important)      kugou.css
 *    820        .kugou-modal                            kugou.css
 *    790        #analyticsV2Workspace (≤767)            advanced.css
 *    700        #referralModal (never opened)           member.css
 *    680        .desktop-download-actions (≥768)        header.css
 *    600        #addRoomModal, #roomRankModal           member.css
 *    510        #analyticsV2Workspace (≥768)            advanced.css
 *    500        .desktop-side-panel                     panels.css
 *    430        #copyToast                              header.css
 *    420        #pullRefresh                            pwa.css
 *    300        #wideHistoryView                        grid.css
 *    160 (170)  .auth-menu (member popover inside)      header.css / member.css
 *     90        #roomLoading                            header.css
 *  40 / 30      column menu / room search dropdown      roombar.css
 *     20        .vip-data-lock                          grid.css
 *  4 (70)       .host-picker (host dropdown inside)     header.css
 *  4 / 3        .trend-rows / .history-value, .trend-head, .trend-line
 *      1        .app-brand, .history-trace-line
 * .app is NOT a stacking context, except while body.auth-locked /
 * body.session-alert-open give it filter + transform (spec 01 §3.1, quirk Q15).
 */

/* ------------------------------------------------------------------ */
/* Tokens (spec 01 §2.1)                                              */
/* ------------------------------------------------------------------ */
:root {
  color-scheme: dark;
  --bg: #101827;
  --panel: rgba(15, 25, 40, .92);
  --line: rgba(238, 214, 152, .24);
  --gold: #f5d88e;
  --muted: #b8c4d6;
  --text: #fff7df;
  --keyboard-inset: 0px;
  font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif;
}

/*
 * Reference geometry of the desktop layout (spec 01 §3.3). Informational tokens for
 * feature CSS; the original writes these expressions literally, which is equivalent.
 *   left column width W = min(100vw, 56.25vh)  (9:16 column; .app uses min(100%, 56.25vh))
 *   right area starts at W + 12px, is 100vw − W − 24px wide
 */
@media (min-width: 768px) {
  :root {
    --app-column-width: min(100vw, 56.25vh);
    --side-area-left: calc(min(100vw, 56.25vh) + 12px);
    --side-area-width: calc(100vw - min(100vw, 56.25vh) - 24px);
  }
}

/* ------------------------------------------------------------------ */
/* Resets and global element rules (spec 01 §2.2 – order matters)     */
/* ------------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(circle at 48% -8%, rgba(77, 177, 207, .26), transparent 310px), linear-gradient(180deg, #172a46, #0c111d 62%);
}

button,
input,
select {
  font: inherit;
}

/* Written after `font: inherit`, so every button defaults to weight 800. */
button {
  min-height: 36px;
  border: 1px solid rgba(245, 216, 142, .56);
  border-radius: 8px;
  padding: 0 12px;
  background: linear-gradient(180deg, #755321, #2d2418);
  color: #fff4ce;
  font-weight: 800;
}

input,
select {
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 8px;
  padding: 0 11px;
  background: #fffffff0;
  color: #182235;
  font-weight: 800;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
  pointer-events: auto;
}

/* ------------------------------------------------------------------ */
/* Main column (spec 01 §3.1)                                         */
/* ------------------------------------------------------------------ */
.app {
  width: min(100%, 750px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) 10px 18px;
  background: #070e1957;
  box-shadow: 0 0 0 1px #f5d88e14, 0 28px 80px #00000042;
}

/* Desktop: 9:16 column pinned to the left (1920×1080 → 607.5px wide). */
@media (min-width: 768px) {
  .app {
    width: min(100%, 56.25vh);
    margin: 0;
  }
}

body.keyboard-open .app {
  padding-bottom: calc(18px + var(--keyboard-inset, 0px));
}

/* Login gate: .app becomes a stacking context + containing block of its fixed children (Q15). */
body.auth-locked .app {
  filter: blur(8px);
  transform: translateZ(0);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* "Account offline" card: 7px, not 8px (quirk Q16). */
body.session-alert-open .app {
  filter: blur(7px);
  transform: translateZ(0);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ------------------------------------------------------------------ */
/* Headings, paragraphs, unused legacy classes                        */
/* ------------------------------------------------------------------ */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 30px;
  line-height: 1.15;
}

h2 {
  font-size: 18px;
}

.section-title span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Present in the original but never used by the page. */
.panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--panel);
}

/*
 * GLOBAL section margin quirk (spec 01 §2.2, Q11): affects .spell-section (also 12px),
 * .history-panel (overridden to 10px), .trend-panel (overridden to 0), #wideHistoryView
 * (NOT overridden: 12px gap above the fixed overlay), section.member-card,
 * section.customer-service-dialog, section.analytics-v2-mobile-layout, section.kugou-modal.
 */
section {
  margin-top: 12px;
}

input.is-error {
  border-color: #ff6262;
  box-shadow: 0 0 0 2px #ff62623d;
}

.section-title {
  margin: 0 2px 8px;
}

/* ------------------------------------------------------------------ */
/* Body states that change the column padding (order = original order) */
/* ------------------------------------------------------------------ */

/* First (overridden) bottom-tab rule – kept because the original has it (Q12). */
body.has-kugou-tabbar .app {
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

/* Manxiang Android shell (UA contains ManxiangApp). */
body.is-manxiang-app {
  padding-top: 0;
  overflow-x: hidden;
}

body.is-manxiang-app .app {
  padding-bottom: 68px;
}

/* Effective bottom-tab rule: 68px (also beats keyboard-open). */
body.has-kugou-tabbar .kugou-android-tabbar ~ .app,
body.has-kugou-tabbar .app {
  padding-bottom: 68px;
}

@media (max-width: 360px) {
  .app {
    padding-inline: 8px;
  }
}

/* ------------------------------------------------------------------ */
/* Shared: live dot + empty row (host dropdown AND room search)       */
/* ------------------------------------------------------------------ */
.room-live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #62f78c;
  box-shadow: 0 0 5px #62f78cfa, 0 0 11px #62f78c9e;
  animation: roomLiveDotPulse 1.35s ease-in-out infinite;
}

@keyframes roomLiveDotPulse {
  0%,
  to {
    opacity: .72;
    box-shadow: 0 0 3px #62f78cbd, 0 0 7px #62f78c5c;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 6px #62f78c, 0 0 14px #62f78cd1;
  }
}

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

.room-empty {
  padding: 10px;
  color: #fff7dfb8;
  font-size: 13px;
  font-weight: 700;
}

/* Shared spinner keyframes: #roomLoading orbit (header) and #pullRefresh (pwa). */
@keyframes roomLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------------------ */
/* Shared: number cells (spec 04 §6, spec 06 §1.2 – keep this order)  */
/* Used by the main/wide grids, desktop side panels, advanced grids   */
/* and badges, the frequency table and the kugou mini grid.           */
/* ------------------------------------------------------------------ */
.history-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-right: 1px solid var(--history-line, #d7dbe4);
  border-bottom: 1px solid var(--history-line, #d7dbe4);
  border-radius: 0;
  display: grid;
  place-items: center;
  background: var(--num-bg, #20334e);
  background-clip: padding-box;
  color: var(--num-fg, #fff);
  font-family: Helvetica Neue, Arial, PingFang SC, Microsoft YaHei, sans-serif;
  font-size: 16px;
  font-weight: 380;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  box-shadow: none;
  overflow: hidden;
}

.history-value {
  position: relative;
  z-index: 3;
  line-height: 1;
}

.history-cell.num-9 {
  font-size: 16px;
  font-weight: 500;
  background: #fff;
  line-height: 1;
}

.pending-countdown {
  --num-bg: #ffffff;
  --num-fg: #d51f2a;
  --num-border: #e4e7ef;
  color: #d51f2a;
  background: #fff;
  font-weight: 900;
  font-size: 110%;
  animation: pendingTextBlink 1s step-end infinite;
}

.num-1,
.num-2,
.num-7,
.num-8 {
  --num-bg: #ffffff;
  --num-fg: #2b2f39;
  --num-border: #d7dbe4;
}

.num-3 {
  --num-bg: #ef2dff;
  --num-fg: #ffffff;
  --num-border: #d7dbe4;
}

.num-4 {
  --num-bg: #e9342e;
  --num-fg: #ffffff;
  --num-border: #d7dbe4;
}

.num-5 {
  --num-bg: #227bd7;
  --num-fg: #ffffff;
  --num-border: #d7dbe4;
}

.num-6 {
  --num-bg: #ffd12f;
  --num-fg: #684100;
  --num-border: #d7dbe4;
}

.num-9 {
  --num-bg: linear-gradient(135deg, #ff39f6, #37d8ff, #60ff9b, #ffe45f, #ff6a3d, #ff39f6);
  --num-fg: #000000;
  --num-border: #d7dbe4;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .48);
}

.history-nine-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ff39f6, #37d8ff 22%, #60ff9b 43%, #ffe45f 62%, #ff6a3d 80%, #ff39f6);
}

.num-9:after {
  display: none;
}

@keyframes pendingTextBlink {
  0%,
  49% {
    color: #d51f2a;
    text-shadow: 0 0 8px rgba(213, 31, 42, .42);
  }
  50%,
  to {
    color: #d51f2a94;
    text-shadow: 0 0 4px rgba(213, 31, 42, .2);
  }
}

/*
 * Highlight mode (second click on a 3/4/5/6/9 card, spec 03 §3.3): applies to EVERY
 * .history-cell on the page (grids, side panels, advanced badges, kugou) – quirk Q7.
 */
body[data-highlight-number] .history-cell:not(.pending-countdown) {
  filter: brightness(.6) saturate(.5);
  transition: filter .15s;
}

body[data-highlight-number="3"] .history-cell.num-3,
body[data-highlight-number="4"] .history-cell.num-4,
body[data-highlight-number="5"] .history-cell.num-5,
body[data-highlight-number="6"] .history-cell.num-6,
body[data-highlight-number="9"] .history-cell.num-9 {
  filter: none;
  box-shadow: 0 0 6px 2px currentColor;
  z-index: 2;
  position: relative;
}

body[data-highlight-number] .history-cell.pending-countdown {
  filter: none;
}