/* ============================================================
   股票大亂鬥 · 全員全市場純度 ROI 競賽
   設計語言：盤房 Trading Floor（報紙編輯感 × 交易終端）
   規格：docs/dev/design/01-tokens.md、02-motion.md
   ============================================================ */

/* ---------- 自架字型 ----------
   CSP 是 default-src 'self'（serve.py 沒有 font-src 指令，回落到 default-src），
   Google Fonts 之類的外部來源一律被擋，字型只能同源。中文完全交給系統字，
   這裡只下載 latin 子集（unicode-range 讓瀏覽器在沒有拉丁字時根本不抓）。 */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- 語意層（盤房日場）----------
     既有變數全部指向這一層。改膚只改這裡，不必動下面 6,000 行元件樣式。 */
  --paper: #f2eee6;
  --paper-sunk: #e9e2d3;
  --sheet: #fbf8f2;
  --sheet-raised: #ffffff;
  --sheet-top: #ffffff;
  --rule-hair: #dfd8ca;
  --rule-strong: #8f897c;
  --ink-1: #1a1713;
  --ink-2: #57503f;
  --ink-3: #6b6457;
  --brass: #835f13;
  --brass-deep: #6e4e0f;
  --brass-wash: #f1e7d2;
  --on-brass: #ffffff;
  --gain: #0e7354;
  --loss: #b4322b;
  --caution: #98500a;
  --info: #1f5f7a;
  --on-gain: #ffffff;
  --on-loss: #ffffff;
  /* 深底（報頭／hero／toast）上的漲跌色：兩套主題共用，日場的深色 gain/loss 在
     暗底上只有 2 點多的對比，直接沿用會看不見。 */
  --gain-on-dark: #3fae84;
  --loss-on-dark: #e06a5e;
  --masthead: #221e18;
  --masthead-ink: #ede7da;
  --masthead-muted: #a79c87;

  /* ---------- 相容層：既有變數名一個都不改名，只換值 ---------- */
  --canvas: var(--paper);
  --inset: var(--paper-sunk);
  --overlay: var(--sheet);
  --bg: var(--canvas);
  --bg-soft: var(--inset);
  --card: var(--overlay);
  --ink: var(--ink-1);
  --ink-soft: var(--ink-2);
  --ink-faint: var(--ink-3);
  --hairline: var(--rule-hair);
  --line: var(--hairline);
  --line-strong: var(--rule-strong);
  --brand: var(--brass);
  --primary: var(--brand);
  --primary-strong: var(--brass-deep);
  --primary-soft: var(--brass-wash);
  --up: var(--gain);
  --down: var(--loss);
  /* 損益方向色：預設綠漲紅跌；html[data-pnl="tw"]（設定「紅漲綠跌」）對調。
     只有「漲跌／賺賠／買賣」用這組；錯誤、刪除、狀態點仍用 --up/--down。 */
  --pnl-up: var(--up);
  --pnl-down: var(--down);
  --pnl-up-on-dark: var(--gain-on-dark);
  --pnl-down-on-dark: var(--loss-on-dark);
  --pnl-on-up: var(--on-gain);
  --pnl-on-down: var(--on-loss);
  --amber: var(--caution);
  --warn: var(--amber);
  --blue: var(--info);
  --nav: var(--masthead);
  --nav-ink: var(--masthead-ink);
  --nav-muted: var(--masthead-muted);
  --sidebar-bg: linear-gradient(180deg, #2a241b 0%, #1a1610 100%);

  /* 市場配置色：色相與明度兩軸分離，六色排成明度階梯（相鄰 ≥ 1.26:1），
     不可只靠色相區分，圖例必須同時有色塊與中文市場名。 */
  --alloc-crypto: #a68423;
  --alloc-tw: #b9562c;
  --alloc-cash: #695f4f;
  --alloc-fund: #495126;
  --alloc-us: #523518;
  --alloc-uk: #451a17;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-overlay: 14px;
  --control-h: 40px;

  /* ---------- 間距（4px 基數）---------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* ---------- 字級 ---------- */
  /* 字級用 rem（1rem = 瀏覽器根字級，預設 16px）：寫死 px 的話使用者在瀏覽器
     設定裡調大字級完全不會生效（只有整頁縮放有效）。渲染結果與原本的 px 值相同。 */
  --fs-micro: 0.6875rem;   /* 11px */
  --lh-micro: 1.5;
  --ls-micro: 0.08em;
  --fs-caption: 0.8125rem; /* 13px */
  --lh-caption: 1.6;
  --ls-caption: 0.01em;
  --fs-body: 1rem;         /* 16px */
  --lh-body: 1.7;
  --ls-body: 0;
  --fs-lead: 1.125rem;     /* 18px */
  --lh-lead: 1.65;
  --ls-lead: 0;
  --fs-h3: 1.25rem;        /* 20px */
  --lh-h3: 1.45;
  --ls-h3: -0.005em;
  --fs-h2: 1.625rem;       /* 26px */
  --lh-h2: 1.3;
  --ls-h2: -0.01em;
  --fs-h1: 2.125rem;       /* 34px */
  --lh-h1: 1.2;
  --ls-h1: -0.015em;
  --fs-display: 2.875rem;  /* 46px */
  --lh-display: 1.1;
  --ls-display: -0.02em;

  /* ---------- Elevation ----------
     陰影帶棕不用純黑：純黑在暖底上會發灰。 */
  --surface-1: var(--sheet);
  --surface-2: var(--sheet-raised);
  --surface-3: var(--sheet-top);
  --elev-1: 0 1px 2px rgba(58, 42, 20, 0.05), 0 1px 3px rgba(58, 42, 20, 0.04);
  --elev-2: 0 2px 4px rgba(58, 42, 20, 0.06), 0 8px 20px rgba(58, 42, 20, 0.07);
  --elev-3: 0 4px 10px rgba(58, 42, 20, 0.08), 0 18px 40px rgba(58, 42, 20, 0.14);
  --shadow: var(--elev-2);
  --shadow-sm: var(--elev-1);
  --shadow-lg: var(--elev-3);

  /* ---------- 焦點環 ----------
     內圈隔離帶 + 外圈黃銅的雙環，任何背景上都能達 3:1。 */
  --ring-color: var(--brass);

  /* ---------- 動效 ----------
     時長：微互動 150–300ms；退場 ≈ 進場的 60%，讓「離開」比「到達」更果斷。 */
  --dur-0: 90ms;
  --dur-1: 150ms;
  --dur-2: 220ms;
  --dur-3: 320ms;
  --dur-exit: 130ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --stagger: 40ms;

  /* ---------- Arc 動態 token ----------
     出處：Arc（github.com/kuratlielia/arc-library，MIT）registry/foundation.css 與
     motion-tokens.ts。Arc 是 React + Motion，這裡只搬曲線與時長，給原生 transition／WAAPI 用。
     --ease-arc-spring 是 bounce .15 的彈簧以 linear() 取樣，必須配 --dur-spring 才是原本的手感；
     不支援 linear() 的瀏覽器由下方 @supports 退回 --ease-out。 */
  --ease-arc-spring: linear(0, 0.0258, 0.09, 0.1763, 0.2732, 0.3724, 0.4683, 0.5573, 0.6376, 0.7082, 0.7689, 0.8202, 0.8628, 0.8976, 0.9256, 0.9476, 0.9648, 0.9778, 0.9875, 0.9945, 0.9994, 1.0026, 1.0047, 1.0058, 1.0062, 1.0062, 1.0059, 1.0055, 1.0049, 1.0043, 1.0036, 1.0031, 1.0025, 1.002, 1.0016, 1.0013, 1);
  --ease-arc-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-arc-landing: cubic-bezier(0.12, 0.8, 0.16, 1);
  --dur-spring: 580ms;
  --dur-press: 100ms;

  /* 深底（側欄／報頭／行動版導覽）上的黃銅：日場的 --brass #835f13 對深墨底
     只有 2.85:1，深底一律改用夜場黃銅。兩套主題共用，studio 不必重複定義。 */
  --brass-on-dark: #d9a425;

  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC",
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", "PingFang TC", "Microsoft JhengHei", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100%;
  overscroll-behavior-x: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* 本站數字密度遠高於長文：等寬數字全域預設開，排行榜與損益表才不會跳動。 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* 股票代號／市場代碼走等寬，數字的 0 帶斜線、1 有襯腳，辨識度高。 */
.num,
.symbol,
.ticker,
.mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.symbol,
.ticker,
.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* 全站單一焦點環：內圈隔離帶 + 外圈黃銅，任何背景上都達 3:1。
   深色報頭區域內把主色反轉成亮黃銅，否則日場的深黃銅對 --nav 只有 2.85:1。 */
.sidebar,
.mobile-nav,
.toast {
  --ring-color: var(--brass-on-dark);
}

/* 焦點環用 outline 而不是 box-shadow。
   box-shadow 版本（`:where(...)` 只有 0,1,0 特異性）會被元件自己的 box-shadow 蓋掉：
   `.primary-button { box-shadow: none }` (0,1,0，源序在後)、`.nav-item.is-active`、
   `.auth-tab.is-active`、`.room-tab.is-active`、`.chat-react-btn.is-reacted`、
   `.emoji-select-btn.is-selected` 全都會贏，結果是最常被鍵盤操作的按鈕根本沒有焦點指示。
   outline 是沒有人會去設的獨立屬性，用它當不可被搶的底線；offset 產生的空隙由元素
   自己的背景填滿，等同雙環的隔離帶效果。 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ring-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.is-up {
  color: var(--pnl-up);
}

.is-down {
  color: var(--pnl-down);
}

.is-warn {
  color: var(--warn);
}

[hidden] {
  display: none !important;
}

@supports not (transition-timing-function: linear(0, 1)) {
  :root { --ease-arc-spring: var(--ease-out); }
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font-family: inherit;
  /* 不可低於 16px：iOS Safari 會在 focus 時自動放大整頁，放大後不會縮回來。 */
  font-size: var(--fs-body);
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------- 文字流裡的 inline 圖示 ----------
   取代原本當圖示用的 emoji。刻意不寫成裸的 [data-icon] svg：那與既有的
   .icon-button svg / .heading-icon svg 特異性相同（0,1,1），誰寫在後面誰贏，
   會依檔案順序意外蓋掉既有尺寸。新用法一律加 class="inline-icon"。 */
.inline-icon {
  display: inline-flex;
  align-items: center;
  flex: none;
  vertical-align: -0.14em;
}

.inline-icon svg {
  width: 1.05em;
  height: 1.05em;
}

/* ---------- Lucian 動畫圖示（<lucian-*> 自訂元素，shadow DOM） ----------
   shadow DOM 內的 svg 吃不到上面的 `xxx svg` 尺寸規則，改用繼承自父層的 --li-size。
   動畫在最近的 button / a 被 hover、focus 時播放；prefers-reduced-motion 時 runtime 自動停用。 */
[data-lucian] { --li-size: 1.05em; }
.emoji-icon { --li-size: 1.1em; }
.emoji-icon [data-lucian] { --li-size: inherit; }
.nav-item [data-lucian] { --li-size: 19px; opacity: 0.85; }
.mobile-menu [data-lucian], .heading-icon [data-lucian] { --li-size: 19px; }
.icon-button [data-lucian] { --li-size: 18px; }
.primary-button [data-lucian] { --li-size: 16px; }
.user-menu-item [data-lucian] { --li-size: 18px; }
.twc-draw-icon-wrap [data-lucian] { --li-size: 18px; display: block; }
.twc-draw-lock [data-lucian] { --li-size: 11px; display: block; }
@media (max-width: 860px) {
  .mobile-nav-item [data-lucian] { --li-size: 20px; transition: transform 0.15s ease; }
  .mobile-nav-item.is-active [data-lucian] { transform: translateY(-1px); }
}

/* ---------- 按鈕組的滑動色塊（lib/slidePills.ts） ----------
   選中按鈕的底色改由群組的 ::before 畫，切換時色塊平滑移到新按鈕，顏色也跟著漸變。
   全部走 transform / 尺寸 / 顏色的 transition；沒有彈跳（曲線不超過終點）。 */
[data-slide-host] { position: relative; }
[data-slide-host][data-slide-on]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sp-w, 0px);
  height: var(--sp-h, 0px);
  transform: translate(var(--sp-x, 0px), var(--sp-y, 0px));
  box-sizing: border-box;
  background: var(--sp-bg, transparent);
  border: var(--sp-bw, 0px) solid var(--sp-bc, transparent);
  border-radius: var(--sp-r, 0px);
  box-shadow: var(--sp-sh, none);
  opacity: var(--sp-o, 0);
  pointer-events: none;
  z-index: 0;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.35s ease,
    border-color 0.35s ease,
    border-radius 0.35s ease,
    box-shadow 0.35s ease,
    opacity 0.2s ease;
}
[data-slide-host][data-slide-static]::before { transition: none; }
[data-slide-host][data-slide-on] [data-slide-item] {
  position: relative;
  z-index: 1;
  /* 背景與陰影也漸變：舊按鈕的底色在色塊離開時淡回來，新按鈕的底色在色塊抵達時淡出。 */
  transition: color 0.3s ease, background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.15s ease;
}
[data-slide-host][data-slide-on] [data-slide-item].is-active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-motion="off"] [data-slide-host]::before,
html[data-motion="off"] [data-slide-host] [data-slide-item] { transition: none; }
@media (prefers-reduced-motion: reduce) {
  [data-slide-host]::before,
  [data-slide-host] [data-slide-item] { transition: none !important; }
}

/* ---------- 下單成功回饋（lib/tradeFx.ts） ----------
   特效直接做在持倉清單的列上：買入＝該列蹦出；賣出＝該列縮小消失（部分賣出只閃金光）。 */
tr.is-pop-in > td {
  animation: row-pop-in 0.55s cubic-bezier(0.34, 1.45, 0.64, 1) both, row-flash-brand 1.6s ease-out both;
}
@keyframes row-pop-in {
  from { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; }
  to { opacity: 1; transform: scale(1); }
}
@keyframes row-flash-brand {
  from { background-color: color-mix(in srgb, var(--primary) 34%, transparent); }
  to { background-color: transparent; }
}
tr.is-vanishing > td {
  animation: row-vanish 0.5s cubic-bezier(0.55, 0, 0.75, 0.2) both;
  background-color: color-mix(in srgb, #f4af2d 30%, transparent);
}
@keyframes row-vanish {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.55); }
}
tr.is-coin-flash > td { animation: row-flash-gold 1.2s ease-out both; }
@keyframes row-flash-gold {
  from { background-color: color-mix(in srgb, #f4af2d 36%, transparent); }
  to { background-color: transparent; }
}
html[data-motion="off"] tr.is-pop-in > td,
html[data-motion="off"] tr.is-vanishing > td,
html[data-motion="off"] tr.is-coin-flash > td { animation: none; }
@media (prefers-reduced-motion: reduce) {
  tr.is-pop-in > td, tr.is-vanishing > td, tr.is-coin-flash > td { animation: none !important; }
}

/* 狀態圓點（取代 🟢🔴🟡）：用 CSS 畫，不值得為了一個圓做一個 SVG。
   顏色一律 currentColor，語意由外層的 .is-up / .is-down / .is-warn 決定。 */
.inline-dot::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  margin-right: 0.4em;
  background: currentColor;
}

/* ===================== 整體骨架 ===================== */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 252px;
  position: fixed;
  inset: 0 auto 0 0;
  background: var(--sidebar-bg);
  color: var(--nav-ink);
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  /* 內容比視窗高時要能捲：1366x768 這種常見尺寸下，側欄原本是直接被切掉，
     最底下的版本／更新日誌按鈕整個落在畫面外，點不到也捲不到。 */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 40;
  transition: transform 0.24s ease;
}

.main-content {
  flex: 1;
  min-width: 0;
  margin-left: 252px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-content {
  padding: 26px 30px 60px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

/* ===================== 側欄 ===================== */

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--nav-ink);
  text-decoration: none;
  padding: 2px 8px 10px;
  flex: none;
}

.brand:hover {
  text-decoration: none;
}

/* 報頭標記：兩根 K 線的自繪 monogram。深墨側欄上用亮黃銅描邊而非實心底
   —— 實心塊配光暈是舊主題的語彙，紙面／終端語言裡報頭應該是「刻上去的」。 */
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--brass-on-dark) 55%, transparent);
  color: var(--brass-on-dark);
  font-size: 24px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: none;
}

.brand strong {
  display: block;
  font-size: 16.5px;
  line-height: 1.25;
}

.brand small {
  display: block;
  color: var(--nav-muted);
  font-size: 11.5px;
}

.primary-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  position: relative;
  /* 撐開剩餘高度，讓 .sidebar-footer 永遠貼在最底下 */
  flex: 1 0 auto;
}

/* 滑動藥丸：整個側欄只有這一個元素在動，換頁時它從舊項滑到新項，
   取代原本「底色瞬間從 A 跳到 B」的硬切。位置由 syncNavPill() 量測後寫成 CSS 變數
   （不能用 :nth-child 純 CSS 算：nav-label 夾在中間、admin 項是條件顯示、登出項行高不同）。 */
.primary-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--pill-h, 40px);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brass-on-dark) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--brass-on-dark);
  opacity: var(--pill-o, 0);
  transform: translateY(var(--pill-y, 0px));
  /* Arc 的 morph／snappy 手感：指示器帶一點點彈性落定，而不是等速滑到底。 */
  transition:
    transform var(--dur-spring) var(--ease-arc-spring),
    height var(--dur-spring) var(--ease-arc-spring),
    opacity var(--dur-1) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}

/* 首次定位（或側欄剛展開）時不要從 y=0 滑過來。 */
.primary-nav.no-anim::after {
  transition: none;
}

.nav-label {
  margin: 7px 10px 3px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--nav-muted);
  text-transform: uppercase;
}

.nav-label:not(:first-of-type) {
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 7px 12px;
  /* 觸控下限明寫出來，不要靠內距與行高剛好湊到——側欄字級為了塞得下被調小過一次，
     下次再調就會無聲掉到 36px 以下。 */
  min-height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--nav-ink);
  font-size: 13.5px;
  text-align: left;
  transition: color var(--dur-1) var(--ease-out);
  /* 底色交給 .primary-nav::after 那顆滑動藥丸，item 本身只負責文字與圖示，
     所以必須浮在藥丸上方。 */
  position: relative;
  z-index: 1;
}

.nav-unread-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--down);
  color: var(--on-loss);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--down) 45%, transparent);
  animation: pulse-badge 2s infinite ease-in-out;
}

.mobile-nav-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-unread-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--down);
  color: var(--on-loss);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--down) 50%, transparent);
  border: 1px solid var(--card);
}

@keyframes pulse-badge {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

.nav-item svg {
  width: 19px;
  height: 19px;
  opacity: 0.85;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--nav-ink);
}

.nav-item.is-active {
  background: transparent;
  color: var(--brass-on-dark);
  font-weight: 600;
  box-shadow: none;
  opacity: 1;
}

.nav-item.is-active::before {
  display: none;
}

.sidebar-footer {
  margin-top: auto;
  padding: 10px 8px 2px;
  flex: none;
}

.mini-tip {
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.tip-spark {
  color: var(--brass-on-dark);
  font-size: 16px;
  line-height: 1.3;
}

.mini-tip strong {
  display: block;
  color: var(--nav-ink);
  font-size: 13px;
}

.mini-tip small {
  display: block;
  color: var(--nav-muted);
  font-size: 11.5px;
  line-height: 1.5;
  margin-top: 2px;
}

.version-label {
  margin: 14px 8px 0;
  color: var(--nav-muted);
  font-size: 11px;
  letter-spacing: 0;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: calc(100% - 16px);
}

.version-label:hover,
.version-label:focus-visible {
  color: var(--canvas);
  text-decoration: underline;
}

/* 有沒看過的更新：版本號本身提亮，旁邊掛「NEW」。打開更新日誌後由 app.js 收掉。 */
.version-label.has-update {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nav-ink);
}

.version-new-badge {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--down);
  color: var(--on-loss);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 16px;
  text-decoration: none;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--down) 45%, transparent);
  animation: pulse-badge 2s infinite ease-in-out;
}

/* 行動版側欄收在選單鈕後面，NEW 看不到，所以在選單鈕右上角補一個紅點。 */
.mobile-menu {
  position: relative;
}

.menu-update-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--down);
  border: 2px solid var(--card);
}

/* ===================== 頂欄 ===================== */

.workspace-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 12px 30px;
}

.breadcrumb {
  font-size: 13.5px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb i {
  font-style: normal;
  color: var(--line-strong);
}

.breadcrumb strong {
  color: var(--ink);
  font-weight: 600;
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sync-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
}

.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}

.sync-state.is-pending .sync-dot {
  background: var(--amber);
  animation: pulse 1.1s ease-in-out infinite;
}

.sync-state.is-error {
  color: var(--down);
  border-color: color-mix(in srgb, var(--down) 35%, transparent);
}

.sync-state.is-error .sync-dot {
  background: var(--down);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.icon-button {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--dur-1) var(--ease-arc-standard),
    color var(--dur-1) var(--ease-arc-standard),
    border-color var(--dur-1) var(--ease-arc-standard),
    scale var(--dur-spring) var(--ease-arc-spring);
}

.icon-button svg {
  width: 18px;
  height: 18px;
}

.icon-button:hover {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--brand);
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--brand);
  color: var(--on-brass);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  align-items: center;
  justify-content: center;
}

.mobile-menu svg {
  width: 19px;
  height: 19px;
}

/* ===================== 頁面區塊 ===================== */

.page-view {
  display: none;
}

.page-view.is-active {
  display: block;
}

/* 進場動畫掛在 .is-page-enter，不掛在 .is-active。
   掛在 .is-active 的代價是：任何讓這條規則重新 match 的 class 變動都會讓瀏覽器
   把 page-enter 當成全新動畫再播一次。v1.0.40–v1.0.45 就是這樣——View Transitions
   結束後移除 html.is-vt，下面那條 animation: none 不再 match，剛落定的頁面立刻掉回
   opacity: 0 / translateY(10px) 再淡進來，每次換頁都抖一下。
   現在改成由 swapPageView() 明確決定誰要播：沒有 View Transitions 才加 .is-page-enter，
   有的話交給 ::view-transition-new(page-stage)，兩者永遠只有一個在演。 */
.page-view.is-page-enter {
  animation: page-enter var(--dur-2) var(--ease-out) both;
}

/* 進場：從下方 10px 推上來 + 淡入。10px 是刻意選小的——夠讀出「新內容到達」的方向，
   又不會在長頁面上像整頁在跳。只動 transform / opacity，兩者都在 compositor 上跑。
   用 transform: none 而非 translateY(0)：動畫結束後移除 transform，元素才不會一直是
   獨立合成層，也避免 position: fixed 的子孫被困在 containing block 裡。 */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes page-exit {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-4px); }
}

/* 舊名保留：專案其他地方仍在用 fadeIn。 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 轉場只作用在內容區：側欄與頂欄是「框」，不該跟著閃。 */
.page-content {
  view-transition-name: page-stage;
}

::view-transition-old(page-stage) {
  animation: page-exit var(--dur-exit) var(--ease-in) both;
}

::view-transition-new(page-stage) {
  animation: page-enter var(--dur-2) var(--ease-out) both;
}

/* 預設的 root 交叉淡出會讓整頁（含側欄）一起閃，關掉。 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ===================== Skeleton 佔位 ===================== */

.skel {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--bg-soft) 25%,
    var(--line) 37%,
    var(--bg-soft) 63%
  );
  background-size: 400% 100%;
  /* 300ms 之前完全透明：資料很快回來時使用者不會看到骨架一閃而過（那比沒有骨架更糟）。
     用 animation-delay 做延遲，不用 setTimeout —— 專案規範禁止未清除的計時器。 */
  opacity: 0;
  animation:
    skel-appear var(--dur-1) var(--ease-out) 300ms both,
    skel-sweep 1400ms linear 300ms infinite;
}

@keyframes skel-appear {
  to { opacity: 1; }
}

/* 用 background-position 掃描而不是 opacity 脈動：前者讀成「載入中」，後者讀成「壞掉了」。 */
@keyframes skel-sweep {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

/* 尺寸要等於真實內容的高度，這是避免內容抵達時跳版的全部關鍵。 */
.skel-line { height: 14px; margin: 8px 0; }
.skel-line.is-short { width: 42%; }
.skel-title { height: 22px; width: 38%; margin: 0 0 12px; }
.skel-card { height: 128px; margin-bottom: var(--s3); }
.skel-row { height: 44px; margin-bottom: 6px; }

/* ===================== 列表 stagger ===================== */

/* 進場時依序浮現。上限 8 項：40ms × 8 = 320ms 尾延遲，加上 220ms 本體約 540ms 收尾，
   還在「一眼掃完」的範圍；超過 8 項的長尾會讀成卡頓，所以不再加延遲。

   閘門是 .is-entering 而不是 .is-active：.is-active 會一直掛著，30 秒自動刷新重繪
   列表時每張卡都是新元素，規則一 match 就再播一次整片 stagger——那是「畫面自己在抖」。
   .is-entering 只在「這次換頁進來」的期間有，由 swapPageView() 掛上、route() 跑完
   且動畫播完後由 endEntering() 收掉。

   排除 .skel：骨架有自己的延遲淡入與掃描動畫（.skel 的 specificity 比這裡低，
   不排除的話會被整條 animation 覆蓋掉，骨架就不掃描了）。 */
.page-view.is-entering.stagger-in > *:not(.skel),
.page-view.is-entering .stagger-in > *:not(.skel) {
  animation: stagger-item var(--dur-2) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

/* index 用 :nth-child() 靜態指派，上限 8；第 9 個以後全部吃 --i: 7。
   用 CSS 變數而不是在 JS 樣板字串裡插 style="--i:n"：後者會把「第幾個」寫進 HTML，
   連帶污染 renderIfChanged() 的內容指紋，列表一換順序就永遠判定為「有變」。 */
.stagger-in > *:nth-child(1) { --i: 0; }
.stagger-in > *:nth-child(2) { --i: 1; }
.stagger-in > *:nth-child(3) { --i: 2; }
.stagger-in > *:nth-child(4) { --i: 3; }
.stagger-in > *:nth-child(5) { --i: 4; }
.stagger-in > *:nth-child(6) { --i: 5; }
.stagger-in > *:nth-child(7) { --i: 6; }
.stagger-in > *:nth-child(n + 8) { --i: 7; }

@keyframes stagger-item {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.view-header {
  margin: 0 0 16px;
}

.welcome-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--primary);
  text-transform: none;
  font-weight: 600;
}

.welcome-row h1,
.view-header h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  font-weight: 700;
}

.wave {
  color: var(--amber);
}

.page-subtitle {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.record-actions {
  display: flex;
  gap: 10px;
  flex: none;
}

/* ===================== 按鈕 ===================== */

.primary-button,
.secondary-button,
.outlined-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--control-h);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  /* Arc Button：按下時快速縮小、放開時用彈簧回彈。用獨立的 scale 屬性而不是 transform，
     不會跟元件自己的 transform（hover 上浮之類）互相覆蓋。 */
  transition:
    background var(--dur-1) var(--ease-arc-standard),
    border-color var(--dur-1) var(--ease-arc-standard),
    color var(--dur-1) var(--ease-arc-standard),
    scale var(--dur-spring) var(--ease-arc-spring);
}

.primary-button {
  background: var(--brand);
  color: var(--on-brass);
  box-shadow: none;
}

.primary-button:hover {
  background: var(--primary-strong);
}

.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled),
.outlined-button:active:not(:disabled),
.icon-button:active:not(:disabled) {
  scale: 0.97;
  transition-duration: var(--dur-1), var(--dur-1), var(--dur-1), var(--dur-press);
  transition-timing-function: var(--ease-arc-standard);
}

.primary-button svg {
  width: 16px;
  height: 16px;
}

.secondary-button {
  background: var(--card);
  border-color: var(--line-strong);
  color: var(--ink);
}

.secondary-button:hover {
  background: var(--bg-soft);
  border-color: var(--line-strong);
}

.outlined-button {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-soft);
  font-weight: 500;
}

.outlined-button:hover {
  background: var(--bg-soft);
  color: var(--ink);
}

/* ===================== 主數字帶（儀表板 A 區） =====================
   不包卡片、不置中：左對齊 + 大字 + 上下 hairline，就是「編輯感」的全部技術含量。
   原本這裡是兩張等寬卡（總資產卡 + 配置卡），主數字被卡片邊框框住、
   競賽的唯一量尺（純度 ROI）還被藏在 studio 專屬的隱藏元素裡。 */

.stage-band {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--s5) 0;
  margin: 0 0 var(--s5);
}

.stage-band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}

.stage-band-meta {
  font-size: var(--fs-caption);
  color: var(--ink-faint);
  display: inline-flex;
  align-items: baseline;
  gap: var(--s1);
}

.stage-hello {
  color: var(--ink-soft);
}

.stage-sep {
  color: var(--ink-faint);
  opacity: 0.6;
  margin: 0 0.35em;
}

.stage-band-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin: var(--s3) 0 var(--s4);
}

.stage-label {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* 主數字：正負由 .is-up / .is-down 上色，不加漸層、不加陰影、不加發光。 */
.stage-value {
  margin: 2px 0 0;
  font-size: clamp(2.75rem, 9vw, 4.5rem); /* 44–72px */
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  /* 黃銅在儀表板只出現這一次：數字底下一條短規尺線。 */
  border-bottom: 3px solid var(--brand);
  display: inline-block;
  padding-bottom: 2px;
}

.stage-sub {
  margin: var(--s2) 0 0;
  font-size: var(--fs-caption);
  color: var(--ink-faint);
}

.stage-aside {
  text-align: right;
  min-width: 200px;
  padding-bottom: var(--s1);
}

.stage-aside-label {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
}

.stage-aside-value {
  margin: 2px 0 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--s1);
}

.stage-aside-value small {
  font-size: var(--fs-caption);
  font-weight: 500;
}

.stage-aside-note {
  margin: var(--s1) 0 0;
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  line-height: 1.5;
  max-width: 34ch;
  margin-left: auto;
}

/* 次級統計是一整行句子，不是三張卡。 */
.stage-facts {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
  line-height: 1.8;
}

.stage-facts strong {
  color: var(--ink);
  font-weight: 600;
}

.stage-facts strong.is-up { color: var(--pnl-up); }
.stage-facts strong.is-down { color: var(--pnl-down); }

.stage-faint {
  color: var(--ink-faint);
}

.stage-note {
  margin: var(--s2) 0 0;
  font-size: var(--fs-micro);
}

/* ===================== 配置 rail（儀表板 B 區） ===================== */

.alloc-rail {
  margin: 0 0 var(--s6);
}

.alloc-rail-label {
  margin: 0 0 var(--s2);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  color: var(--ink-faint);
  text-transform: uppercase;
}

.alloc-rail .alloc-bar-wrap {
  margin: 0 0 var(--s2);
}

.alloc-rail .alloc-legend {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .stage-band-main {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s3);
  }

  .stage-aside {
    text-align: left;
    min-width: 0;
  }

  .stage-aside-value {
    justify-content: flex-start;
  }

  .stage-aside-note {
    margin-left: 0;
  }

  .alloc-rail .alloc-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s1) var(--s3);
  }
}

/* ===================== Hero 區 ===================== */

.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  margin-bottom: 24px;
  align-items: start;
}

.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sidebar-bg);
  color: var(--nav-ink);
  padding: 24px 26px;
  box-shadow: var(--shadow-lg);
}

.hero-card::after {
  content: "";
  display: block;
  position: absolute;
  right: -70px;
  top: -70px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 35%, transparent), transparent 70%);
}

.hero-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--nav-muted);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 3px 10px;
  border-radius: 999px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 8px color-mix(in srgb, var(--up) 80%, transparent);
}

.header-tools .status-pill,
.room-hero-card .status-pill,
.modal-header .status-pill {
  color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

.hero-label {
  margin: 18px 0 2px;
  font-size: 13px;
  color: var(--nav-muted);
  font-weight: 500;
}

.hero-value {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.hero-caption {
  margin: 4px 0 0;
  color: var(--nav-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.hero-card .is-up {
  color: var(--pnl-up-on-dark);
}

.hero-card .is-down {
  color: var(--pnl-down-on-dark);
}

.hero-daily-pnl-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.hero-daily-pnl-row span {
  font-size: 13px;
  color: var(--nav-muted);
}

.hero-daily-pnl-row strong {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hero-daily-pnl-row small {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hero-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin: 18px 0 14px;
}

.hero-foot {
  display: flex;
  gap: 40px;
}

.hero-foot div span {
  display: block;
  font-size: 12px;
  color: var(--nav-muted);
}

.hero-foot strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* 4% 目標卡 */

.quick-card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}

.card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.card-heading h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

.heading-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex: none;
}

.heading-icon svg {
  width: 19px;
  height: 19px;
}

.quick-text {
  margin: 14px 0 16px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
}

.quick-text b {
  color: var(--ink);
  font-size: 15px;
}

.inline-input {
  width: 62px;
  border: 0;
  border-bottom: 2px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: 14.5px;
  text-align: center;
  padding: 1px 2px;
  border-radius: 0;
}

/* 邊框與底色兩種焦點都要；只有 outline: none 限縮到非鍵盤焦點，
   否則會把全站的 focus ring 一起殺掉。 */
.inline-input:focus:not(:focus-visible) {
  outline: none;
}

.inline-input:focus {
  border-bottom-color: var(--primary);
}

.quick-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.metric-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: none;
}

.metric-icon.income-icon {
  background: var(--primary-soft);
  color: var(--primary);
}

.metric-icon.investment-icon {
  background: var(--brass-wash);
  color: var(--amber);
}

.quick-metric small {
  display: block;
  font-size: 11.5px;
  color: var(--ink-faint);
}

.quick-metric strong {
  display: block;
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
}

/* ===================== 區塊標題 ===================== */

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin: var(--s6) 0 var(--s2);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--hairline);
}

.section-heading h2 {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  /* 中文標題不套負字距：負值會讓方塊字黏在一起 */
  letter-spacing: 0;
}

.as-of {
  font-size: 12.5px;
  color: var(--ink-faint);
}

.filter-tabs {
  position: relative;
  display: inline-flex;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

/* 滑動指示器。用 transition 而不是 @keyframes —— transition 對「值沒有改變」是完全的
   no-op，這是房間分頁籤那幾組整段 innerHTML 重建時不重播動畫的根本保證。
   這裡的 width 確實是 layout 屬性，但 ::after 是 position: absolute 的孤立元素，
   改它不會讓任何兄弟或父層重排；而分頁籤寬度差很多（「本週」vs「本週即時戰況榜」），
   純 translateX 涵蓋不了，所以這是「不動 layout 屬性」的唯一豁免。 */
.filter-tabs::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  height: calc(100% - 6px);
  width: var(--tab-w, 0px);
  border-radius: 999px;
  background: var(--primary);
  opacity: var(--tab-o, 0);
  transform: translateX(var(--tab-x, 0px));
  transition:
    transform var(--dur-spring) var(--ease-arc-spring),
    width var(--dur-spring) var(--ease-arc-spring),
    opacity var(--dur-1) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}

.filter-tabs.no-anim::after {
  transition: none;
}

.filter-tab {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12.5px;
  padding: 5px 13px;
  border-radius: 999px;
  font-weight: 600;
  transition: color var(--dur-1) var(--ease-out);
}

/* 底色交給指示器，active 只改文字顏色。 */
.filter-tab.is-active {
  background: transparent;
  color: var(--on-brass);
}

/* 不在 .filter-tabs 容器裡的獨立分頁籤（房間清單、成就分頁等）沒有指示器可用，
   維持實心底色，否則會完全看不出哪個被選中。 */
:not(.filter-tabs) > .filter-tab.is-active {
  background: var(--primary);
}

.period-toggle-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  background: var(--bg-soft);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
}

.period-toggle-wrap .filter-tab {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-weight: 700;
  font-size: 13.5px;
}

.holdings-heading {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.holdings-filter-tabs {
  flex-wrap: wrap;
  max-width: 100%;
}

.order-budget-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.quick-cash-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.table-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.chat-quick-tags {
  padding: 0;
  background: transparent;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ===================== 資產卡片 ===================== */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* 紙面主題靠 hairline 分層，不靠陰影；陰影會讓整頁浮成一面「卡片牆」。 */
  box-shadow: none;
}

/* ===================== 總覽退休進度卡 ===================== */

.retire-card {
  padding: 20px 22px;
  margin-top: var(--s4);
  margin-bottom: var(--s5);
}

.retire-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--hairline);
}

.retire-header h2 {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--ink);
}

.retire-empty {
  padding: var(--s5) var(--s3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
}

.retire-empty p {
  color: var(--ink-soft);
  margin: 0;
  font-size: var(--fs-caption);
}

.retire-progress-wrap {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s3) 0 var(--s4);
}

.retire-progress {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
  position: relative;
}

.retire-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--primary);
  transition: width var(--dur-3) var(--ease-out);
}

.retire-progress-pct {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  min-width: 44px;
  text-align: right;
}

.retire-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s3);
}

.retire-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--s3);
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.retire-label {
  font-size: var(--fs-caption);
  color: var(--ink-faint);
  margin: 0 0 var(--s1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.retire-value {
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: var(--lh-lead);
  color: var(--ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.retire-sub {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  margin: var(--s1) 0 0;
  line-height: var(--lh-micro);
}

.retire-sub:empty {
  display: none;
}

.asset-card {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.asset-card:hover {
  border-color: var(--brand);
  box-shadow: none;
}

.asset-card.is-dim {
  opacity: 0.72;
}

.asset-main {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin: 16px 0 6px;
}

.asset-qty {
  font-size: 13px;
  color: var(--ink-faint);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}

.asset-price {
  font-size: 21px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.asset-change {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.asset-change.is-up {
  color: var(--pnl-up);
}

.asset-change.is-down {
  color: var(--pnl-down);
}

.asset-change.is-neutral {
  color: var(--ink-faint);
}

.asset-prev-close {
  font-size: 11.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.asset-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed var(--line-strong);
  padding-top: 10px;
  margin-top: auto;
}

.asset-value-row span {
  font-size: 12.5px;
  color: var(--ink-faint);
}

.asset-value-row strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.asset-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.5;
}

.asset-list {
  margin-top: 10px;
  border-top: 1px dashed var(--line-strong);
}

.asset-list-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.asset-list-row:last-child {
  border-bottom: 0;
}

.al-symbol {
  font-weight: 700;
}

.al-qty {
  color: var(--ink-soft);
  text-align: right;
}

.al-price {
  color: var(--ink-faint);
  text-align: right;
  min-width: 58px;
}

.al-value {
  text-align: right;
  min-width: 78px;
}

/* ===================== 歷史紀錄 ===================== */

.history-card {
  padding: 20px 22px;
}

.history-chart {
  width: 100%;
}

.history-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

.empty-hint {
  margin: 0;
  padding: 34px 0;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13.5px;
}

.history-table {
  margin-top: 14px;
  overflow-x: auto;
}

.history-chart-plot {
  position: relative;
}

/* 橫向拖曳用來逐筆查看，直向仍交給頁面捲動 */
.history-chart-plot svg {
  touch-action: pan-y;
  cursor: crosshair;
  border-radius: var(--radius-sm);
}

.history-chart-plot svg:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.chart-value-label {
  fill: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.chart-crosshair {
  stroke: var(--ink-faint);
  stroke-width: 1;
}

.chart-hover-dot {
  fill: var(--primary);
  stroke: var(--card);
  stroke-width: 2;
}

.chart-tooltip {
  position: absolute;
  z-index: 2;
  min-width: 168px;
  max-width: 240px;
  padding: 9px 12px;
  margin-left: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.chart-tooltip.is-flipped {
  margin-left: 0;
  transform: translateX(calc(-100% - 12px));
}

.chart-tooltip[hidden] {
  display: none;
}

.chart-tooltip-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.chart-tooltip-date {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 1px;
}

.chart-tooltip-meta {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 4px;
}

/* 窄螢幕：提示框改放在圖表下方，不蓋住折線 */
@media (max-width: 640px) {
  .chart-tooltip,
  .chart-tooltip.is-flipped {
    position: static;
    margin: 8px 0 0;
    max-width: none;
    transform: none;
  }
}

.history-table-details {
  margin-top: 12px;
}

.history-table-details summary {
  cursor: pointer;
  width: fit-content;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 4px 0;
}

.history-table-details[hidden] {
  display: none;
}

/* ===================== 圖表 SVG ===================== */

.grid-line {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.axis-label {
  fill: var(--ink-faint);
  font-size: 11px;
}

.chart-area {
  fill: color-mix(in srgb, var(--brand) 12%, transparent);
}

.chart-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.roi-line {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-dot {
  fill: var(--primary);
  stroke: var(--overlay);
  stroke-width: 2;
}

.target-line {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-dasharray: 7 5;
}

.retire-line {
  stroke: var(--blue);
  stroke-width: 2;
  stroke-dasharray: 5 5;
}

.retire-label {
  fill: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.chart-legend {
  display: flex;
  gap: 18px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}

.legend-line::before,
.legend-dash::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}

.legend-line::before {
  background: var(--primary);
}

.legend-dash::before {
  background: repeating-linear-gradient(90deg, var(--amber) 0 6px, transparent 6px 10px);
}

.market-code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.market-btn.is-active .market-code {
  color: inherit;
  opacity: 0.85;
}

/* 表格裡的標的欄：代碼用等寬、名稱降一級壓在下面，一格裝兩層資訊。 */
.holding-sym {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-weight: 600;
}

.holding-name {
  display: block;
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  font-weight: 400;
  margin-top: 1px;
}

/* 桌機不出現水平捲軸：欄位擠了就隱藏次要欄，不橫捲。 */
@media (max-width: 1180px) and (min-width: 861px) {
  .col-optional {
    display: none;
  }
}

/* ===================== 表格 ===================== */

.history-table table,
.table-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.history-table th,
.table-card th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}

.history-table td,
.table-card td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.history-table tr:last-child td,
.table-card tr:last-child td {
  border-bottom: 0;
}

.history-table tbody tr:hover,
.table-card tbody tr:hover {
  background: var(--bg-soft);
}

/* ===================== 匯率統整 ===================== */

.fx-summary-card {
  padding: 22px 24px;
}

.fx-chart-card {
  padding: 22px 24px 20px;
  margin-bottom: 18px;
}

.fx-chart-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.fx-chart-heading h2 {
  margin: 4px 0 0;
  font-size: 20px;
}

.fx-chart-subtitle {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.fx-chart-selector {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 190px;
}

.fx-chart-selector label {
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.fx-chart-select {
  min-height: 38px;
  padding: 7px 32px 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--bg-soft);
  color: var(--ink);
  font-weight: 700;
}

/* 只留邊框變色；outline 交給全站的焦點環，
   原本這裡用 20% 透明的黃銅（約 1.5:1）把它蓋掉了。 */
.fx-chart-select:focus {
  border-color: var(--primary);
}

.fx-chart-select:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.fx-chart {
  margin-top: 20px;
}

.fx-chart-canvas {
  min-width: 0;
  overflow: hidden;
  padding: 12px 10px 0 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--inset) 0%, var(--overlay) 100%);
}

.fx-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 260px;
}

.fx-chart-grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.fx-chart-axis-label {
  fill: var(--ink-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.fx-chart-area {
  fill: color-mix(in srgb, var(--brand) 10%, transparent);
}

.fx-chart-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fx-chart-point {
  stroke: var(--overlay);
  stroke-width: 2;
}

.fx-chart-point.is-current {
  fill: var(--primary);
  filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--brand) 25%, transparent));
}

.fx-chart-point.is-high {
  fill: var(--amber);
}

.fx-chart-point.is-low {
  fill: var(--down);
}

.fx-chart-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.fx-chart-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
}

.fx-chart-stat span {
  color: var(--ink-faint);
  font-size: 11.5px;
  font-weight: 600;
}

.fx-chart-stat small {
  color: var(--ink-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.fx-chart-stat strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.fx-chart-stat.is-current {
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
  background: var(--primary-soft);
}

.fx-chart-stat.is-current strong {
  color: var(--primary-strong);
}

.fx-chart-stat.is-high strong {
  color: var(--amber);
}

.fx-chart-stat.is-low strong {
  color: var(--down);
}

.fx-chart-reading {
  margin: 13px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.fx-chart-reading strong {
  color: var(--ink);
}

.fx-chart-reading.is-high strong:nth-of-type(2) {
  color: var(--amber);
}

.fx-chart-reading.is-low strong:nth-of-type(2) {
  color: var(--down);
}

.fx-chart-reading.is-flat strong:nth-of-type(2),
.fx-chart-reading.is-mid strong:nth-of-type(2) {
  color: var(--primary-strong);
}

.fx-summary-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.fx-table-wrap {
  overflow-x: auto;
}

.fx-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.fx-table-wrap th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}

.fx-table-wrap td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.fx-table-wrap tr:last-child td {
  border-bottom: 0;
}

.fx-table-wrap tbody tr:hover {
  background: var(--bg-soft);
}

.fx-table-wrap td:first-child {
  min-width: 110px;
}

.fx-table-wrap td small {
  display: block;
  color: var(--ink-faint);
  font-size: 11.5px;
  margin-top: 2px;
}

.fx-rate-row.is-unavailable {
  opacity: 0.58;
}

.fx-data-note {
  margin-top: 14px;
}

/* ===================== 重大市場新聞 ===================== */

.section-link {
  color: var(--primary-strong);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.market-news-card {
  padding: 20px 22px;
}

.news-page-card {
  padding: 22px 24px;
}

.market-news-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.news-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.news-filter-tab {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 700;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.news-filter-tab:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
}

.news-filter-tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-brass);
}

.market-news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.market-news-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.market-news-item:hover {
  border-color: var(--line-strong);
  background: var(--card);
  box-shadow: var(--shadow);
}

.news-score-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 2px;
  color: var(--ink-faint);
  line-height: 1;
}

.news-score-block strong {
  font-size: 1.38rem;
  font-weight: 800;
  color: var(--ink-soft);
}

.news-score-block span {
  font-size: 11px;
}

.news-score-block small {
  flex-basis: 100%;
  margin-top: 5px;
  font-size: 10px;
  color: var(--ink-faint);
}

.news-item-body {
  min-width: 0;
}

.news-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--ink-faint);
  font-size: 11.5px;
}

.news-category-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--primary-strong);
  font-size: 11px;
  font-weight: 700;
}

/* 分層徽章：總經與政策永遠排在最前面，顏色要一眼認得出層級 */
.news-tier-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--ink-faint) 12%, transparent);
  color: var(--ink-soft);
}

.news-tier-badge.news-tier-1 {
  background: color-mix(in srgb, var(--down) 12%, transparent);
  color: var(--down);
}

.news-tier-badge.news-tier-2 {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
}

.news-tier-badge.news-tier-3 {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
}

.news-item-title {
  margin: 5px 0 3px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

.news-item-body a:hover {
  text-decoration: none;
}

.news-item-body a:hover .news-item-title {
  color: var(--primary-strong);
}

.news-item-summary {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.news-source-link {
  align-self: center;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.news-source-link:hover {
  color: var(--primary-strong);
}

.market-news-item.news-score-critical {
  border-color: var(--hairline);
  background: transparent;
  box-shadow: none;
}

.news-score-critical .news-score-block strong {
  color: var(--down);
  text-shadow: none;
}

.news-score-critical .news-item-title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-shadow: none;
}

.market-news-item.news-score-high {
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}

.news-score-high .news-score-block strong {
  color: var(--warn);
  text-shadow: 0 0 10px color-mix(in srgb, var(--warn) 22%, transparent);
}

.news-score-high .news-item-title {
  color: var(--warn);
  font-size: 1.05rem;
  font-weight: 750;
}

.news-score-medium .news-score-block strong {
  color: var(--blue);
}

.news-score-low {
  opacity: 0.86;
}

/* ===================== 計算機 ===================== */

.calc-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 22px;
  align-items: start;
}

.calc-form {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 78px;
}

.calc-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

.calc-field input {
  width: 100%;
  min-height: var(--control-h);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  background: var(--bg-soft);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* 邊框與底色兩種焦點都要；只有 outline: none 限縮到非鍵盤焦點，
   否則會把全站的 focus ring 一起殺掉。 */
.calc-field input:focus:not(:focus-visible) {
  outline: none;
}

.calc-field input:focus {
  border-color: var(--primary);
  background: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.calc-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.calc-actions .primary-button,
.calc-actions .secondary-button {
  flex: 1;
}

.calc-results {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.result-summary {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 24px;
}

.result-summary h2 {
  margin: 0 0 10px;
  font-size: 17px;
}

.result-summary p {
  margin: 6px 0;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.result-summary .highlight {
  color: var(--primary-strong);
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.result-note {
  font-size: 12.5px !important;
  color: var(--ink-faint) !important;
  margin-left: 26px !important;
}

.chart-card,
.table-card {
  padding: 20px 22px;
}

.chart-card svg {
  width: 100%;
  height: auto;
  display: block;
}

.wide-table-card {
  overflow-x: auto;
}

.highlight-row td {
  background: var(--primary-soft) !important;
}

.highlight-row .highlight {
  color: var(--primary-strong);
  font-weight: 800;
}

.retired-section td {
  background: var(--inset);
}

td.muted,
.muted {
  color: var(--ink-faint);
  font-weight: 500;
}

/* ===================== 設定頁 ===================== */

/* 最多兩欄：四張小卡剛好 2×2；可用寬度不到兩張 300px 時自動收成一欄。
   同一排的卡片拉成等高，底邊才會對齊。 */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(300px, calc((100% - 24px) / 2)), 1fr));
  gap: 24px;
  align-items: stretch;
}

.settings-card {
  padding: 22px 24px;
}

/* 內容比一般設定卡高很多的卡（外部連結、管理員）獨佔一整排，不去撐高隔壁卡。 */
.settings-card-wide {
  grid-column: 1 / -1;
}

/* 標題與右上角的圖示同一列。原本沒有 flex，窄卡片時圖示會掉到標題底下自成一行。 */
.settings-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.settings-card-heading h2 {
  margin: 0;
  font-size: 17px;
}

.setting-rows {
  display: flex;
  flex-direction: column;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.setting-row:last-child {
  border-bottom: 0;
}

.setting-row strong {
  display: block;
  font-size: 14px;
}

.setting-row small {
  display: block;
  color: var(--ink-faint);
  font-size: 12px;
  margin-top: 1px;
}

.setting-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex: none;
  font-variant-numeric: tabular-nums;
}

.setting-value.is-ok {
  color: var(--primary-strong);
}

.settings-footnote {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.6;
}

.settings-footnote code {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 12px;
  color: var(--primary-strong);
}

.settings-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ===================== 行動版底部導覽 ===================== */

.mobile-nav {
  display: none;
}

/* ===================== 登入閘門 ===================== */

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    radial-gradient(1000px 500px at 85% -10%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 55%),
    var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 32px 34px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.auth-brand strong {
  display: block;
  font-size: 17px;
}

.auth-brand small {
  display: block;
  color: var(--ink-faint);
  font-size: 12px;
}

.auth-card h1 {
  margin: 0 0 6px;
  font-size: 22px;
}

.auth-lead {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.65;
}

.auth-tabs {
  display: flex;
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 18px;
}

.auth-tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 0;
  border-radius: 8px;
}

.auth-tab.is-active {
  background: var(--card);
  color: var(--primary-strong);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--nav) 10%, transparent);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-field span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

.form-field input {
  width: 100%;
  min-height: var(--control-h);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14.5px;
  background: var(--bg-soft);
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* 邊框與底色兩種焦點都要；只有 outline: none 限縮到非鍵盤焦點，
   否則會把全站的 focus ring 一起殺掉。 */
.form-field input:focus:not(:focus-visible) {
  outline: none;
}

.form-field input:focus {
  border-color: var(--primary);
  background: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.auth-submit {
  margin-top: 6px;
  width: 100%;
  padding: 11px 0;
  font-size: 15px;
}

.auth-error {
  margin: 14px 0 0;
  min-height: 20px;
  color: var(--down);
  font-size: 13px;
  text-align: center;
}

/* ===================== Toast（Arc Toast stack） =====================
   容器只負責定位，本身不吃點擊；每則 toast 絕對定位、從底部往上疊。
   收合時後面的 toast 從上緣縮小，只露出一條邊（--toast-y／--toast-s 由 app.js 的
   layoutToasts() 寫入）；滑鼠移上去或鍵盤聚焦時整疊展開，計時器同時暫停。 */

.toast-region {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 34px;
  margin-inline: auto;
  width: min(92vw, 520px);
  height: 0;
  z-index: 200;
  pointer-events: none;
}

.toast {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  background: var(--nav);
  color: var(--nav-ink);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  pointer-events: auto;
  cursor: default;
  transform-origin: 50% 0;
  transform: translateY(var(--toast-y, 0px)) scale(var(--toast-s, 1));
  opacity: var(--toast-o, 1);
  transition:
    transform var(--dur-spring) var(--ease-arc-spring),
    opacity var(--dur-2) var(--ease-out),
    filter var(--dur-2) var(--ease-out);
}

button.toast { cursor: pointer; }

/* 疊在後面的那幾則退半步：稍暗，讓最新那則一眼可辨 */
.toast[data-front="false"]:not([data-expanded="true"]) {
  filter: brightness(0.92);
}

@starting-style {
  .toast {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
}

.toast.is-leaving {
  opacity: 0;
  transform: translateY(var(--toast-y, 0px)) scale(calc(var(--toast-s, 1) * 0.94));
  pointer-events: none;
  transition:
    transform var(--dur-2) var(--ease-arc-standard),
    opacity var(--dur-exit) var(--ease-arc-standard);
}

/* 同一句話在最前面時不再疊一則，改成輕輕彈一下，表示「又發生了一次」 */
.toast.is-bumped {
  animation: toast-bump var(--dur-3) var(--ease-arc-standard);
}

@keyframes toast-bump {
  40% { scale: 1.04; }
}

/* ===================== 好友週榜 & 模擬交易 樣式 ===================== */

.metrics-3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  padding: 20px 22px;
}

.stat-label {
  font-size: 13px;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
}

.stat-caption {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 0;
}

.friend-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.inline-form {
  display: flex;
  gap: 10px;
  flex: 1;
  max-width: 460px;
}

.inline-form input {
  flex: 1;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font-size: 14px;
}

.podium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.podium-card {
  padding: 24px 20px;
  border-radius: 18px;
  text-align: center;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.podium-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(58, 42, 20, 0.06);
}

.podium-1 {
  border: 2px solid var(--brand);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, transparent) 0%, var(--card) 100%);
}

.podium-2 {
  border: 2px solid var(--line-strong);
  background: linear-gradient(180deg, color-mix(in srgb, var(--line-strong) 8%, transparent) 0%, var(--card) 100%);
}

.podium-3 {
  border: 2px solid color-mix(in srgb, var(--brand) 55%, var(--hairline));
  background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 8%, transparent) 0%, var(--card) 100%);
}

.podium-rank-badge {
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  margin-bottom: 8px;
}

.podium-username {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
}

.badge-roi {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.badge-roi.positive {
  background: color-mix(in srgb, var(--pnl-up) 12%, transparent);
  color: var(--pnl-up);
  border: 1px solid color-mix(in srgb, var(--pnl-up) 28%, transparent);
}

.badge-roi.negative {
  background: color-mix(in srgb, var(--pnl-down) 12%, transparent);
  color: var(--pnl-down);
  border: 1px solid color-mix(in srgb, var(--pnl-down) 28%, transparent);
}

.badge-roi.neutral {
  background: color-mix(in srgb, var(--line-strong) 12%, transparent);
  color: var(--ink-soft);
  border: 1px solid color-mix(in srgb, var(--line-strong) 28%, transparent);
}

/* 皇冠榮譽徽章 Crown Badge */
.crown-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.crown-hall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.crown-hall-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
}

.badge-sold {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 6px;
}

.podium-meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-faint);
}

.trading-layout {
  display: grid;
  /* minmax(0, 1fr) 而不是 1fr：grid item 的 min-width 預設是 auto，
     裡面那張持倉表就會把整欄撐出容器外（1440px 下溢出 175px）。 */
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 32px;
}

.market-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 14px 0 16px;
}

.market-btn {
  padding: 9px 8px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.market-btn.is-active {
  background: var(--brand);
  color: var(--on-brass);
  border-color: var(--brand);
}

.quote-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.quote-search-row input {
  flex: 1;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font-size: 14px;
}

.quote-preview-box {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}

.quote-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.quote-sym-tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--line);
  color: var(--ink-faint);
  margin-left: 6px;
}

.quote-price {
  font-size: 18px;
  font-weight: 700;
}

.quote-change {
  font-size: 12.5px;
  font-weight: 600;
  margin-left: 6px;
}

.quote-prev-close {
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-left: 6px;
  font-weight: normal;
  font-variant-numeric: tabular-nums;
}

.quote-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-faint);
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}

.quote-nav-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.45;
}

.action-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.action-btn {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.action-btn.is-buy.is-active {
  background: var(--pnl-up);
  color: var(--pnl-on-up);
  border-color: var(--pnl-up);
}

.action-btn.is-sell.is-active {
  background: var(--pnl-down);
  color: var(--pnl-on-down);
  border-color: var(--pnl-down);
}

.order-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.order-preview-card {
  background: var(--bg);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
}

.preview-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.preview-row:last-child {
  margin-bottom: 0;
}

.full-width {
  width: 100%;
}

.friend-modal-gate {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  backdrop-filter: blur(4px);
}

.friend-modal-card {
  background: var(--card);
  border-radius: 20px;
  max-width: 640px;
  width: 100%;
  padding: 26px;
  box-shadow: 0 20px 40px rgba(58, 42, 20, 0.25);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.modal-header h2 {
  margin: 6px 0 0;
  font-size: 20px;
}

.changelog-modal-card {
  max-width: 560px;
}

.changelog-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.changelog-release {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
}

.changelog-release.is-current {
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent);
}

.changelog-release-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.changelog-release-head strong {
  font-size: 16px;
  color: var(--ink);
}

.changelog-release-head time {
  font-size: 12px;
  color: var(--ink-faint);
}

.changelog-lead {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.changelog-release ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.changelog-release li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}

.alloc-bar-wrap {
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  /* 段與段之間留 2px 的頁底色當分隔：六色是同色相的明度階梯，相鄰只有 1.26–1.35:1，
     直接貼合時右半邊那幾段深棕在小尺寸下會連成一塊。加了分隔每段對分隔線 ≥ 3.26:1。 */
  gap: 2px;
  background: var(--overlay);
  margin: 12px 0 16px;
}

/* 顏色不得單獨承載語意（SC 1.4.1）：每段再疊一層 pattern，
   色弱、單色列印與夜場的低相鄰對比都還讀得出來。pattern 用 CSS 畫，不需要圖檔。 */
.alloc-seg-cash,
.alloc-seg-tw,
.alloc-seg-us,
.alloc-seg-uk,
.alloc-seg-crypto,
.alloc-seg-fund {
  transition: width var(--dur-3) var(--ease-out);
  background-repeat: repeat;
}

.alloc-seg-cash {
  background-color: var(--alloc-cash);
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--canvas) 55%, transparent) 0 1px,
    transparent 1px 4px
  );
}

.alloc-seg-tw {
  background-color: var(--alloc-tw);
  background-image: repeating-linear-gradient(
    0deg,
    color-mix(in srgb, var(--canvas) 45%, transparent) 0 1px,
    transparent 1px 5px
  );
}

.alloc-seg-us {
  background-color: var(--alloc-us);
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--canvas) 40%, transparent) 0 2px,
    transparent 2px 6px
  );
}

.alloc-seg-uk {
  background-color: var(--alloc-uk);
  background-image:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--canvas) 34%, transparent) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--canvas) 34%, transparent) 0 1px, transparent 1px 5px);
}

.alloc-seg-crypto {
  background-color: var(--alloc-crypto);
  background-image: radial-gradient(
    color-mix(in srgb, var(--ink) 38%, transparent) 1px,
    transparent 1px
  );
  background-size: 5px 5px;
}

.alloc-seg-fund {
  background-color: var(--alloc-fund);
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--canvas) 38%, transparent) 0 2px,
    transparent 2px 7px
  );
}

.alloc-legend {
  display: flex;
  gap: 16px;
  font-size: 12.5px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.alloc-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
}

.alloc-dot-cash { background: var(--alloc-cash); }
.alloc-dot-tw { background: var(--alloc-tw); }
.alloc-dot-us { background: var(--alloc-us); }
.alloc-dot-uk { background: var(--alloc-uk); }
.alloc-dot-crypto { background: var(--alloc-crypto); }
.alloc-dot-fund { background: var(--alloc-fund); }

.alloc-chip-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 全部持倉配置清單：股票名稱／占比／報酬三欄固定順序 */
.alloc-table-wrap {
  overflow-x: auto;
}

.alloc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.alloc-table th {
  text-align: left;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.alloc-table td {
  padding: 10px 12px;
  border-radius: 0;
  background: var(--bg);
  border-bottom: 2px solid var(--card);
}

.alloc-table td.alloc-col-name {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.alloc-table td.alloc-col-roi {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.alloc-table th.alloc-col-weight,
.alloc-table td.alloc-col-weight,
.alloc-table th.alloc-col-roi,
.alloc-table td.alloc-col-roi {
  text-align: right;
  white-space: nowrap;
}

.alloc-table td.alloc-col-weight {
  font-weight: 700;
}

.alloc-table .holding-company-name {
  margin-left: 6px;
  font-size: 12px;
  color: var(--ink-faint);
}

/* 玩家檔案的稱號牆 */
.profile-title-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-title-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--chip-color, var(--brand));
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--brand)) 35%, transparent);
  background: color-mix(in srgb, var(--chip-color, var(--brand)) 10%, transparent);
}

.profile-title-chip.is-equipped {
  border-width: 2px;
  box-shadow: 0 1px 3px rgba(58, 42, 20, 0.08);
}

.sold-best-box {
  margin-top: 20px;
  padding: 14px;
  border-radius: 12px;
  background: var(--brass-wash);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  color: var(--primary-strong);
  font-size: 13.5px;
}



/* ===================== 定期定額 (DCA) 與 交易微調樣式 ===================== */

.dca-card {
  padding: 24px 28px;
  margin-bottom: 32px;
  border-radius: var(--radius);
}

.dca-top-row {
  margin-bottom: 18px;
}

.dca-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.dca-fields input,
.dca-fields select {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--card);
  font-size: 14px;
  min-height: 42px;
}

.dca-fields input {
  flex: 1 1 160px;
}

.dca-fields select {
  flex: 0 0 auto;
}

.dca-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.dca-plan-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: 14px;
}

.dca-plan-info strong {
  font-size: 15px;
  color: var(--ink);
}

.dca-plan-info small {
  display: block;
  color: var(--ink-faint);
  margin-top: 2px;
}

.dca-plan-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 微調彈窗樣式 */
.adjust-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.adjust-info-box {
  padding: 12px 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.adjust-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.adjust-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}

.cards-grid {
  gap: 20px;
  margin-bottom: 24px;
}

.stat-value {
  font-size: 26px;
  margin: 10px 0 6px;
}

.trading-layout {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 28px;
  margin-bottom: 36px;
}

/* 1280px 以下下單面板與持倉表並排會把表格擠爆，改成上下堆疊讓表格拿到整個寬度。
   單欄一樣要寫 minmax(0, 1fr)：grid item 的 min-width 預設是 auto，寫 1fr 仍然
   會被裡面的寬表撐出容器外。 */
@media (max-width: 1279px) {
  .trading-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 這三張表的欄位語意都不可省略（數量／平均成本／現價／市值／損益／交易明細），
   1024–1279px 之間欄位會擠爆容器。body 有 overflow-x: hidden，不給捲動的話
   內容是被「切掉且拿不回來」，比捲動更糟。≥1280px 不會溢出所以不會出現捲軸；
   ≤860px 則已經轉成卡片清單（那裡有 overflow-x: visible !important 覆蓋）。 */
.holdings-table-wrap,
.trades-table-wrap,
.leaderboard-table-wrap {
  overflow-x: auto;
}

.order-card {
  padding: 26px 28px;
}

.holdings-card {
  padding: 26px 28px;
}

/* 持倉分類小計看板與市場損益標籤 */
.holdings-summary-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 7%, transparent) 0%, var(--bg-soft) 100%);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}

.holdings-summary-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.holdings-summary-metrics {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.holdings-metric-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.holdings-metric-item small {
  font-size: 11px;
  color: var(--ink-faint);
  font-weight: 600;
}

.holdings-metric-item strong {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.holdings-subtotal-row {
  background: var(--bg-soft);
  font-weight: 700;
  border-top: 2px solid var(--line-strong) !important;
}

.holdings-subtotal-row td {
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.trades-history-card {
  padding: 26px 28px;
}

.table-wrap table th,
.holdings-table-wrap table th,
.trades-table-wrap table th {
  padding: 12px 14px;
  font-size: 13.5px;
}

.table-wrap table td,
.holdings-table-wrap table td,
.trades-table-wrap table td {
  padding: 14px 14px;
  font-size: 14px;
}

.podium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.podium-card {
  padding: 26px 22px;
  border-radius: 18px;
}

.btn-adjust {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-adjust:hover {
  background: var(--bg);
  color: var(--primary);
  border-color: var(--primary);
}

.alloc-summary-card {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.metrics-4-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 0;
  border-bottom: 0;
}

.holdings-book-wrap {
  width: 100%;
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 16px 12px;
}

.holdings-book {
  width: 100%;
  border-collapse: collapse;
}

.holdings-book th {
  font-size: 11px;
  color: var(--ink-faint);
  font-weight: 500;
  text-align: left;
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--hairline);
}

.holdings-book td {
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}

.holdings-book .num {
  text-align: right;
}

.market-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

.leaderboard-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.leaderboard-table-wrap th {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-faint);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--hairline);
}

.leaderboard-table-wrap td {
  padding: 8px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}

/* 自己那一列改成左側黃銅直條，不再整列上底色 —— 原本的 --inset 底色與 hover
   的底色是同一個值，滑過別人那列會看起來像自己換了位置。 */
.leaderboard-table-wrap tr.is-self {
  background: transparent;
}

.leaderboard-table-wrap tr.is-self > td:first-child {
  box-shadow: inset 3px 0 0 var(--brand);
}

@media (max-width: 900px) {
  .metrics-4-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.btn-preset {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--ink-faint);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-preset:hover {
  background: var(--line);
  color: var(--ink);
  border-color: var(--brand);
}

/* 開關 Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--line-strong);
  transition: .2s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .2s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: var(--brand);
}

input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* ===================== 排行榜與資料表格統一排版 ===================== */
.leaderboard-table-wrap table,
.champions-table-wrap table,
.friends-table-wrap table,
.holdings-table-wrap table,
.trades-table-wrap table,
.history-table table,
.admin-codes-table-wrap table,
.admin-users-table-wrap table,
.table-card table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.leaderboard-table-wrap th,
.champions-table-wrap th,
.friends-table-wrap th,
.holdings-table-wrap th,
.trades-table-wrap th,
.admin-codes-table-wrap th,
.admin-users-table-wrap th {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  vertical-align: middle;
  /* 表頭對齊必須跟著該欄的資料走，數字欄的表頭靠左是最明顯的業餘感來源。 */
  text-align: left;
}

.leaderboard-table-wrap td,
.champions-table-wrap td,
.friends-table-wrap td,
.holdings-table-wrap td,
.trades-table-wrap td,
.admin-codes-table-wrap td,
.admin-users-table-wrap td {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
  .leaderboard-table-wrap tbody tr:hover,
  .champions-table-wrap tbody tr:hover,
  .friends-table-wrap tbody tr:hover,
  .holdings-table-wrap tbody tr:hover,
  .trades-table-wrap tbody tr:hover,
  .admin-codes-table-wrap tbody tr:hover,
  .admin-users-table-wrap tbody tr:hover {
    background: var(--inset);
  }
}

/* 數字欄一律靠右等寬，表頭跟著同一側；文字欄維持靠左。
   .num 由 app.js 在渲染時加在數字欄的 th/td 上。 */
.leaderboard-table-wrap th.num,
.champions-table-wrap th.num,
.friends-table-wrap th.num,
.holdings-table-wrap th.num,
.trades-table-wrap th.num,
.history-table th.num,
.admin-codes-table-wrap th.num,
.admin-users-table-wrap th.num,
.table-card th.num,
.leaderboard-table-wrap td.num,
.champions-table-wrap td.num,
.friends-table-wrap td.num,
.holdings-table-wrap td.num,
.trades-table-wrap td.num,
.history-table td.num,
.admin-codes-table-wrap td.num,
.admin-users-table-wrap td.num,
.table-card td.num,
.lb-num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 管理後台：左表單、右邀請碼清單。右欄用 minmax(0, 1fr)，
   不然不換行的表格會把 1fr 撐到比容器還寬，右半邊的欄位直接被切掉。 */
.admin-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.admin-layout > .card {
  min-width: 0;
}

.admin-codes-table-wrap {
  overflow-x: auto;
}

/* 備註與兌換紀錄是唯一會長的欄，讓它換行，其他欄維持一行。 */
.admin-codes-table-wrap td.admin-code-note-cell {
  white-space: normal;
  min-width: 180px;
}

/* 邀請碼清單預設收合：碼一多整個後台會被拉得很長。 */
.admin-codes-summary {
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
  border-radius: var(--radius-sm);
}

.admin-codes-summary::-webkit-details-marker {
  display: none;
}

.admin-codes-summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

.admin-codes-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.admin-codes-toggle-text::before {
  content: "展開";
}

.admin-codes-collapse[open] .admin-codes-toggle-text::before {
  content: "收合";
}

.admin-codes-toggle .inline-icon {
  transition: transform 0.2s ease;
}

.admin-codes-collapse[open] .admin-codes-toggle .inline-icon {
  transform: rotate(180deg);
}

.admin-codes-collapse[open] > .admin-codes-summary {
  margin-bottom: 16px;
}

.admin-code-redemptions {
  margin-top: 4px;
}

.admin-code-redemptions > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-soft);
  width: fit-content;
}

.admin-code-redemptions-list {
  margin-top: 4px;
}

.admin-code-redemptions-list > span {
  white-space: nowrap;
}

/* 表頭釘在「捲動容器」的頂端，top 必須是 0。
   這幾個 wrap 有 overflow-x: auto（1024–1280px 之間欄位會擠爆容器，不給捲動的話
   內容是被切掉且拿不回來），而 CSS 規定只要有一軸不是 visible，另一軸就會算成 auto
   —— 容器因此變成自己的捲動容器，sticky 是相對「它」而不是相對視窗。
   之前把 top 設成 command bar 的高度（63px），結果表頭往下掉 63px 直接蓋住前兩列資料。
   容器沒有限制高度、不會垂直捲動，所以 top: 0 等於表頭停在原位，不會蓋到任何東西。 */
.leaderboard-table-wrap thead th,
.holdings-table-wrap thead th,
.trades-table-wrap thead th,
.admin-users-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--canvas);
}

.lb-rank-cell {
  text-align: center;
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 14px;
  width: 58px;
}

.lb-player-cell {
  text-align: left;
  font-size: 14px;
}

.lb-player-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 100%;
}

.lb-player-name {
  font-weight: 700;
  color: var(--ink);
}

.lb-num-cell {
  text-align: right;
}

.lb-week-trades {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  line-height: 1.2;
  max-width: 110px;
  margin: 0 auto;
}

.lb-trade-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.lb-trade-mark.is-buy {
  color: var(--pnl-up);
  background: color-mix(in srgb, var(--pnl-up) 12%, transparent);
}

.lb-trade-mark.is-sell {
  color: var(--pnl-down);
  background: color-mix(in srgb, var(--pnl-down) 12%, transparent);
}

.lb-trade-mark.is-none {
  color: var(--ink-faint);
  background: color-mix(in srgb, var(--line-strong) 16%, transparent);
  font-weight: 600;
}

.friend-period-trades {
  margin-bottom: 4px;
}

.friend-period-trades-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.friend-period-trades-summary small {
  color: var(--ink-faint);
  font-size: 11px;
}

.friend-period-trades-table {
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--line-strong) 28%, transparent);
  border-radius: 12px;
}

.friend-period-trades-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.friend-period-trades-table th,
.friend-period-trades-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 18%, transparent);
  white-space: nowrap;
}

.friend-period-trades-table th {
  font-size: 11px;
  color: var(--ink-faint);
  font-weight: 700;
  background: color-mix(in srgb, var(--line-strong) 8%, transparent);
}

.friend-period-trades-table tbody tr:last-child td {
  border-bottom: none;
}

.lb-center-cell {
  text-align: center;
}

/* ===================== 管理後台樣式 ===================== */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 20px 0 24px;
}

.admin-stats-grid .stat-card {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card);
}

.admin-stats-grid .stat-card h3 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.admin-code-badge {
  font-family: monospace;
  font-weight: 700;
  font-size: 13.5px;
  padding: 4px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--primary-strong);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.5px;
}

.admin-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.admin-status-tag.is-active {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--up);
}

.admin-status-tag.is-disabled {
  background: color-mix(in srgb, var(--ink-faint) 12%, transparent);
  color: var(--ink-faint);
}

.admin-status-tag.is-exhausted {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--warn);
}

.admin-status-tag.is-expired {
  background: color-mix(in srgb, var(--down) 12%, transparent);
  color: var(--down);
}

.btn-icon-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-icon-inline:hover {
  background: var(--bg-soft);
  color: var(--ink);
  border-color: var(--line-strong);
}

/* ===================== 榮譽殿堂（競賽成就） ===================== */
.titles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.title-shop-card {
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.title-shop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(58, 42, 20, 0.08);
}

.title-shop-card.is-equipped {
  border-color: var(--brand);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, transparent) 0%, var(--card) 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 15%, transparent);
}

.user-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  letter-spacing: 0.2px;
  margin-right: 4px;
  vertical-align: middle;
}

.user-title-badge.is-emperor {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 22%, transparent), color-mix(in srgb, var(--down) 16%, transparent));
  color: var(--primary-strong);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 15%, transparent);
}

.title-shop-card.is-emperor {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, transparent) 0%, var(--card) 100%);
}

.title-shop-card.is-emperor.is-equipped {
  border-color: var(--brand);
  box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 22%, transparent);
}

.rarity-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
}

.rarity-pill.common { background: var(--inset); color: var(--ink-faint); }
.rarity-pill.rare { background: color-mix(in srgb, var(--ink-soft) 10%, transparent); color: var(--ink-soft); }
.rarity-pill.epic { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); }
.rarity-pill.legendary { background: var(--brass-wash); color: var(--brand); }
.rarity-pill.mythic { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.rarity-pill.imperial { background: color-mix(in srgb, var(--brand) 20%, transparent); color: var(--primary-strong); }

/* ===================== 大亂鬥即時聊天室與願望清單樣式 ===================== */
.chat-room-card {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.chat-quick-bar {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.chat-quick-label {
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.chat-quick-bar .chat-quick-tags {
  flex: 1;
  min-width: 0;
}

.chat-phrase-manage-btn {
  flex: none;
  white-space: nowrap;
}

.chat-attach-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-size: 17px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.chat-attach-button:hover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  transform: translateY(-1px);
}

.visually-hidden-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.chat-image-preview,
.bug-image-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font-size: 12px;
}

.chat-image-preview img,
.bug-image-preview img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
}

.chat-image-preview span,
.bug-image-preview span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-image-link {
  display: block;
  /* 上限要設在連結上，而且要用純 px：氣泡寬度是量內容的 max-content，圖片自己的 max-width 不會縮小它
     （含百分比的 min(280px, 100%) 在量內容寬度時會被當成沒有上限）。原圖 320px 會讓氣泡撐到 322px，
     圖片卻只畫 280px，右邊多出一截空白。容器比 280px 窄時，區塊本來就會縮到容器寬。 */
  max-width: 280px;
  margin-bottom: 6px;
  /* 訊息框是 white-space: pre-wrap；範本裡 <a> 與 <img> 之間的換行縮排會被保留成空白行，
     讓圖片上下各多出一行高度。連結內不需要保留空白。 */
  white-space: normal;
}

.chat-image {
  display: block;
  width: auto;
  max-width: min(280px, 100%);
  max-height: 240px;
  border: 1px solid color-mix(in srgb, var(--ink-faint) 25%, transparent);
  border-radius: 10px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.65);
}

.chat-text-content {
  display: block;
}

.community-modal-card {
  max-width: 560px;
}

.modal-help-text {
  margin: -8px 0 16px;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.5;
}

.chat-phrase-form {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.chat-phrase-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--bg);
}

.chat-phrase-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 18px;
}

.chat-phrase-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-soft);
}

.chat-phrase-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.chat-phrase-item > small {
  color: var(--ink-faint);
  white-space: nowrap;
}

.chat-phrase-remove {
  width: 26px;
  height: 26px;
  color: var(--down);
}

.chat-msg-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 82%;
}

.chat-msg-row.is-self {
  margin-left: auto;
  flex-direction: row-reverse;
}

.chat-msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink-soft);
  color: var(--overlay);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.chat-msg-row.is-self .chat-msg-avatar {
  background: var(--brand);
}

.chat-msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-msg-row.is-self .chat-msg-body {
  align-items: flex-end;
}

.chat-author-info {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11.5px;
  color: var(--ink-faint);
}

.chat-author-name {
  font-weight: 700;
  color: var(--ink-soft);
}

.chat-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  /* 保留換行：使用者本來就能打多行，更新公告也是一行一條重點。
     pre-wrap 不會影響單行訊息，但會讓連續空白照原樣顯示，所以送出前已由
     _normalize_chat_content trim 過。 */
  white-space: pre-wrap;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.chat-msg-row.is-self .chat-bubble {
  background: var(--brass-wash);
  color: var(--ink);
  border-color: var(--brand);
  border-bottom-right-radius: 2px;
}

.chat-msg-row.is-other .chat-bubble {
  border-bottom-left-radius: 2px;
}

.chat-msg-row.is-flash .chat-bubble {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 35%, transparent);
}

/* 純圖片訊息不要訊息框：圖片直接放在對話裡，只留引用與表情。
   框的顏色寫在 .is-self／.is-other／.has-mention-me 上，所以這裡要用同等或更高的選擇器蓋掉。 */
.chat-msg-row .chat-bubble.is-media-only,
.chat-msg-row.is-self .chat-bubble.is-media-only,
.chat-msg-row.has-mention-me .chat-bubble.is-media-only {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 12px;
}

.chat-bubble.is-media-only {
  width: fit-content;
  max-width: 100%;
}

.chat-bubble.is-media-only .chat-image-link {
  margin-bottom: 0;
  width: fit-content;
}

.chat-bubble.is-media-only .chat-image {
  border-radius: 12px;
}

.chat-msg-row.is-action-target .chat-bubble.is-media-only {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 28%, transparent);
}

.chat-edited-tag {
  color: var(--ink-faint);
  font-size: 10.5px;
}

.chat-quote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 100%;
  padding: 6px 10px;
  border: 0;
  border-left: 3px solid var(--line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  color: var(--ink-soft);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.chat-quote strong {
  font-size: 11px;
  color: var(--ink-soft);
}

.chat-quote span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

.chat-quote.is-missing {
  cursor: default;
  border-left-color: var(--line-strong);
  color: var(--ink-faint);
}

.chat-msg-row.is-self .chat-quote {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-left-color: var(--brand);
}

.chat-msg-row.is-self .chat-quote strong {
  color: var(--ink-soft);
}

.chat-msg-row.is-action-target .chat-bubble {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 28%, transparent);
}

.chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.chat-msg-row.is-self .chat-reactions {
  justify-content: flex-end;
}

.chat-action-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: transparent;
}

.chat-action-menu {
  position: fixed;
  z-index: 81;
  min-width: 220px;
  max-width: calc(100vw - 16px);
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--nav) 18%, transparent);
}

.chat-action-emojis,
.chat-action-cmds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.chat-action-cmds {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.chat-action-menu .chat-react-btn {
  width: 36px;
  height: 36px;
  font-size: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-action-menu .chat-tool-btn {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}

.chat-tool-btn,
.chat-react-btn {
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink-soft);
  border-radius: 999px;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  line-height: 1.4;
}

.chat-react-btn {
  padding: 2px 7px;
  font-size: 13px;
}

.chat-tool-btn:hover,
.chat-react-btn:hover {
  border-color: var(--line-strong);
  background: var(--bg-soft);
}

.chat-react-btn.is-reacted,
.chat-react-btn.has-count {
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  border-color: color-mix(in srgb, var(--blue) 35%, transparent);
}

.chat-react-btn.is-reacted {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 25%, transparent);
}

.chat-compose-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 0;
  background: var(--card);
  border-top: 1px solid var(--line);
}

.chat-compose-hint-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-compose-hint-body small {
  color: var(--blue);
  font-weight: 700;
}

.chat-compose-hint-body span {
  font-size: 12px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mention 標籤與高亮 */
.mention-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
  transition: all 0.15s ease;
  vertical-align: baseline;
}

.mention-tag:hover {
  background: color-mix(in srgb, var(--blue) 22%, transparent);
}

.chat-msg-row.is-self .mention-tag {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}

.mention-tag.mention-me {
  background: color-mix(in srgb, var(--brand) 22%, transparent) !important;
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--brand) 25%, transparent);
}

.chat-msg-row.is-self .mention-tag.mention-me {
  color: var(--brand) !important;
}

.mention-tag.mention-item {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
}

.mention-tag.mention-item:hover {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
}

.chat-msg-row.is-self .mention-tag.mention-item {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}

.chat-mention-jump-banner {
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 24px;
  background: var(--brand);
  color: var(--on-brass);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--warn) 45%, transparent);
  animation: slideDownMentionAlert 0.25s ease-out;
  max-width: 90%;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--on-brass) 30%, transparent);
}

.chat-mention-jump-banner strong {
  color: var(--on-brass);
  text-decoration: underline;
}

.btn-mention-jump {
  background: color-mix(in srgb, var(--on-brass) 25%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-brass) 60%, transparent);
  color: var(--on-brass);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-mention-jump:hover {
  background: var(--overlay);
  color: var(--brand);
}

.btn-mention-close {
  background: none;
  border: none;
  color: color-mix(in srgb, var(--on-brass) 85%, transparent);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-mention-close:hover {
  color: var(--on-brass);
}

@keyframes slideDownMentionAlert {
  from {
    opacity: 0;
    transform: translate(-50%, -12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.chat-msg-row.has-mention-me {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border-radius: 12px;
  padding: 4px 8px;
  margin: -4px -8px;
  border-left: 3px solid var(--brand);
}

.chat-msg-row.has-mention-me .chat-bubble {
  border-color: var(--brand);
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 25%, transparent);
  background: var(--brass-wash);
}

.chat-msg-row.is-self.has-mention-me .chat-bubble {
  background: var(--brass-wash);
  border-color: var(--brand);
}

.btn-mention-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink-faint);
  cursor: pointer;
  line-height: 1.2;
  transition: all 0.15s ease;
  margin-left: 4px;
}

.btn-mention-inline:hover {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
  border-color: var(--blue);
}

.mention-autocomplete-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 14px;
  right: 14px;
  max-height: 180px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 -4px 20px rgba(58, 42, 20, 0.15);
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 4px;
  -webkit-overflow-scrolling: touch;
}

.mention-user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.12s ease;
}

.mention-user-item:hover,
.mention-user-item.is-selected {
  background: var(--bg-soft);
  color: var(--primary-strong);
}

.mention-user-item .mention-item-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink-soft);
  color: var(--overlay);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.chat-command-item .mention-item-avatar {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  font-size: 14px;
}

.chat-command-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-command-copy > div,
.chat-command-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-command-copy small,
.chat-command-copy > span {
  color: var(--ink-faint);
}

.chat-command-copy > span {
  font-size: 11px;
}

.mention-item-option {
  cursor: pointer;
}

.mention-item-option .mention-item-avatar {
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  color: inherit;
  font-size: 13px;
}

.mention-group-title {
  padding: 5px 12px 3px;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 700;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

/* 願望清單樣式：單欄條列，方便快速掃描與操作 */
.wishlist-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.wish-card {
  padding: 18px 20px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.wish-list-item {
  display: grid;
  grid-template-columns: minmax(210px, 1.05fr) minmax(180px, 1.7fr) minmax(210px, auto);
  align-items: center;
  gap: 14px;
}

.wish-list-item .wish-note {
  min-width: 0;
}

.wish-list-item .wish-footer {
  grid-column: 3;
  grid-row: 1;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.wish-list-item .wish-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.bug-board-card {
  padding: 22px 24px;
}

.bug-board-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.bug-board-heading h2 {
  margin: 4px 0 4px;
  font-size: 22px;
}

.bug-board-heading .page-subtitle {
  margin: 0;
}

.bug-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 16px;
  color: var(--ink-faint);
  font-size: 12px;
}

.bug-status-legend span,
.bug-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bug-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
}

.bug-status-dot.open { background: var(--warn); }
.bug-status-dot.in-progress { background: var(--blue); }
.bug-status-dot.resolved { background: var(--up); }
.bug-status-dot.closed { background: var(--ink-faint); }

.bug-reports-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bug-report-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
  border-radius: 12px;
  background: var(--bg-soft);
}

.bug-report-item.bug-status-in_progress { border-left-color: var(--blue); }
.bug-report-item.bug-status-resolved { border-left-color: var(--up); }
.bug-report-item.bug-status-closed { border-left-color: var(--ink-faint); }

.wish-card.is-flash {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 45%, transparent);
  border-color: var(--brand);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.bug-report-item.is-flash {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 45%, transparent);
  border-top-color: var(--brand);
  border-right-color: var(--brand);
  border-bottom-color: var(--brand);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.bug-report-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.bug-report-title-row h3 {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
}

.bug-status-badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.bug-status-badge.open { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.bug-status-badge.in_progress { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.bug-status-badge.resolved { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }
.bug-status-badge.closed { color: var(--ink-soft); background: var(--inset); }

.bug-report-details {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
}

.bug-report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--ink-faint);
  font-size: 11px;
}

.bug-admin-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--ink-faint);
  font-size: 11px;
}

.bug-admin-status select {
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
}

.bug-report-attachment {
  display: flex;
  align-items: flex-start;
}

.bug-attachment-link img {
  display: block;
  width: 128px;
  max-height: 128px;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
}

.bug-upload-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bug-attach-label {
  align-self: flex-start;
  font-size: 13px;
}

.wish-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(58, 42, 20, 0.06);
}

.wish-card.is-completed {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, transparent) 0%, var(--card) 100%);
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}

.wish-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.wish-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.wish-card.is-completed .wish-title {
  text-decoration: line-through;
  color: var(--ink-soft);
}

.wish-status-badge {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}

.wish-status-badge.pending {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}

.wish-status-badge.completed {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--up);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}

.wish-target-val {
  font-size: 13.5px;
  color: var(--brand);
  font-weight: 700;
}

.wish-note {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  flex: 1;
}

.wish-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.wish-author {
  font-size: 11.5px;
  color: var(--ink-faint);
}

.wish-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 12px;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}

/* 已加油＝實心愛心。全套圖示都是 stroke-only，這是唯一需要 fill 變體的地方：
   愛心的「滿／空」本身就是狀態語意，只靠顏色會讓色弱使用者分不出來。 */
.btn-like.is-liked svg {
  fill: currentColor;
}

.btn-like.is-liked {
  background: color-mix(in srgb, var(--down) 10%, transparent);
  border-color: color-mix(in srgb, var(--down) 30%, transparent);
  color: var(--down);
  font-weight: 700;
}

.btn-like:hover {
  border-color: var(--down);
  color: var(--down);
}

/* ============================================================
   📱 行動裝置極致體驗與排版優化 (Mobile Responsive & Ergonomics)
   ============================================================ */

@media (max-width: 1080px) {
  .cards-grid {
    grid-template-columns: 1fr 1fr;
  }

  .fx-card {
    grid-column: 1 / -1;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  /* 1. 防止 iOS Safari 聚焦時縮放畫面 */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .fx-chart-heading {
    flex-direction: column;
    gap: 12px;
  }

  .fx-chart-selector {
    width: 100%;
    min-width: 0;
  }

  .fx-chart-select {
    width: 100%;
  }

  .fx-chart-canvas {
    padding-left: 0;
  }

  .fx-chart-svg {
    min-height: 220px;
  }

  /* 手機所有功能改由底欄提供，不保留可聚焦的側欄抽屜。 */
  .sidebar {
    display: none;
  }

  .main-content {
    margin-left: 0 !important;
    min-height: 100vh;
  }

  .mobile-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
  }

  .topbar {
    padding: 8px 14px;
    height: 48px;
    gap: 10px;
    min-width: 0;
  }

  .topbar-actions {
    min-width: 0;
    flex-shrink: 0;
  }

  .breadcrumb {
    display: none;
  }

  /* 3. 頁面內容排版與安全區域 (避開底部導覽列) */
  .page-content {
    padding: 14px 12px calc(78px + env(safe-area-inset-bottom, 12px)) !important;
    max-width: 100% !important;
  }

  html,
  body,
  .app-shell,
  .main-content,
  .page-content {
    overflow-x: hidden;
    max-width: 100%;
  }

  body {
    touch-action: pan-y pinch-zoom;
  }

  input,
  select,
  textarea,
  button {
    touch-action: manipulation;
  }

  /* 4. 現代玻璃擬態大亂鬥風格底部導覽列 */
  .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
    background: color-mix(in srgb, var(--nav) 95%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 20px rgba(58, 42, 20, 0.25);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    min-height: calc(62px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav::-webkit-scrollbar {
    display: none;
  }

  .mobile-nav-item {
    flex: 0 0 72px;
    width: 72px;
    min-width: 72px;
    border: 0;
    background: transparent;
    color: var(--nav-muted);
    padding: 7px 4px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    scroll-snap-align: start;
  }

  .mobile-nav-item:active {
    transform: none;
  }

  .mobile-nav-item svg {
    width: 20px;
    height: 20px;
    transition: transform 0.15s ease;
  }

  .mobile-nav-item small {
    font-size: 10px;
    letter-spacing: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav-item.is-active {
    color: var(--brass-on-dark);
    font-weight: 700;
  }

  .mobile-nav-item.is-active svg {
    transform: translateY(-1px);
  }

  /* 5. 卡片與標題排版最佳化 */
  .card,
  .hero-card,
  .stat-card,
  .order-card,
  .holdings-card,
  .trades-history-card,
  .settings-card,
  .alloc-summary-card,
  .friends-list-card,
  .leaderboard-card,
  .create-code-card,
  .codes-list-card,
  .users-list-card,
  .welcome-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
  }

  .welcome-row h1,
  .view-header h1 {
    font-size: 20px !important;
    line-height: 1.3;
  }

  .page-subtitle {
    font-size: 12.5px;
    line-height: 1.45;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .hero-value {
    font-size: clamp(26px, 7vw, 34px) !important;
    font-weight: 800;
  }

  .hero-foot {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding-top: 12px;
    margin-top: 14px;
    border-top: 1px solid var(--line);
  }

  .hero-foot > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .hero-foot span {
    font-size: 11px;
    color: var(--ink-faint);
  }

  .hero-foot strong {
    font-size: 13.5px;
  }

  /* 6. 指標 4 格與管理數據在手機上以 2x2 排列 */
  .metrics-4-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .metrics-4-grid .stat-card {
    padding: 12px 14px !important;
  }

  .metrics-4-grid .stat-card h3 {
    font-size: 18px !important;
  }

  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* 7. 大亂鬥天梯與週榜競技 */
  .podium-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .podium-card {
    padding: 16px 16px 14px !important;
    border-radius: 14px !important;
  }

  .filter-tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    gap: 4px;
    background: var(--bg-soft);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--line);
  }

  .filter-tab {
    flex: 1 1 calc(33.33% - 6px);
    min-width: 0;
    text-align: center;
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
  }

  .period-toggle-wrap {
    gap: 6px;
  }

  .period-toggle-wrap .filter-tab {
    flex: 1 1 calc(33.33% - 6px);
    padding: 8px 4px;
    font-size: 12px;
  }

  .friend-actions-bar {
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* 8. 交易面板與市場切換按鈕 */
  .trading-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

  .market-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: 6px;
  }

  .market-btn {
    min-height: 42px;
    padding: 8px 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    border-radius: 9px;
  }

  .quote-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .quote-search-row input {
    flex: 1 1 160px;
    min-width: 0;
    min-height: 42px;
  }

  .quote-search-row button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 16px;
    white-space: nowrap;
  }

  .order-fields {
    grid-template-columns: 1fr;
  }

  .cards-grid {
    grid-template-columns: 1fr !important;
  }

  .market-news-card {
    padding: 14px !important;
  }

  .market-news-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .news-filter-tabs {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .news-filter-tab {
    flex: 0 0 auto;
    min-height: 36px;
  }

  .market-news-item {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .news-source-link {
    grid-column: 2;
    align-self: start;
  }

  .news-score-block strong {
    font-size: 1.2rem;
  }

  .news-score-critical .news-item-title {
    font-size: 1.04rem;
  }

  /* 9. 寬表格改成直向卡片，不再左右滑 */
  .table-wrap,
  .leaderboard-table-wrap,
  .holdings-table-wrap,
  .trades-table-wrap,
  .admin-codes-table-wrap,
  .admin-users-table-wrap,
  .history-table,
  .table-card,
  .champions-table-wrap,
  .wide-table-card,
  .fx-table-wrap {
    overflow-x: visible !important;
    width: 100%;
    max-width: 100%;
  }

  .leaderboard-table-wrap table,
  .champions-table-wrap table,
  .holdings-table-wrap table,
  .trades-table-wrap table,
  .friend-period-trades-table table,
  .history-table table,
  .table-card table,
  .admin-codes-table-wrap table,
  .admin-users-table-wrap table,
  .wide-table-card table,
  .fx-table-wrap table {
    display: block;
    width: 100%;
  }

  .leaderboard-table-wrap thead,
  .champions-table-wrap thead,
  .holdings-table-wrap thead,
  .trades-table-wrap thead,
  .friend-period-trades-table thead,
  .history-table thead,
  .table-card thead,
  .admin-codes-table-wrap thead,
  .admin-users-table-wrap thead,
  .wide-table-card thead,
  .fx-table-wrap thead {
    display: none;
  }

  .leaderboard-table-wrap tbody,
  .champions-table-wrap tbody,
  .holdings-table-wrap tbody,
  .trades-table-wrap tbody,
  .friend-period-trades-table tbody,
  .history-table tbody,
  .table-card tbody,
  .admin-codes-table-wrap tbody,
  .admin-users-table-wrap tbody,
  .wide-table-card tbody,
  .fx-table-wrap tbody {
    display: block;
  }

  .leaderboard-table-wrap tbody tr,
  .champions-table-wrap tbody tr,
  .holdings-table-wrap tbody tr,
  .trades-table-wrap tbody tr,
  .friend-period-trades-table tbody tr,
  .history-table tbody tr,
  .table-card tbody tr,
  .admin-codes-table-wrap tbody tr,
  .admin-users-table-wrap tbody tr,
  .wide-table-card tbody tr,
  .fx-table-wrap tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    width: 100%;
    margin: 0;
    padding: 12px 0;
    /* 手機上一列一張圓角卡正是「AI 卡片牆」的典型。改成連續清單：
       透明底 + 下方 hairline，跟已經做對的 .wishlist-list / .bug-reports-list 一致。 */
    border: 0;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
  }

  .leaderboard-table-wrap tbody tr:hover,
  .holdings-table-wrap tbody tr:hover,
  .trades-table-wrap tbody tr:hover {
    background: transparent;
  }

  /* 卡片模式下數字仍要靠右：td 已經是 flex column，靠 align-items 收右緣。 */
  .leaderboard-table-wrap td.num,
  .holdings-table-wrap td.num,
  .trades-table-wrap td.num,
  .history-table td.num,
  .table-card td.num,
  .fx-table-wrap td.num,
  .lb-num-cell {
    align-items: flex-end;
    text-align: right;
  }

  .leaderboard-table-wrap td,
  .champions-table-wrap td,
  .holdings-table-wrap td,
  .trades-table-wrap td,
  .friend-period-trades-table td,
  .history-table td,
  .table-card td,
  .admin-codes-table-wrap td,
  .admin-users-table-wrap td,
  .wide-table-card td,
  .fx-table-wrap td,
  .leaderboard-table-wrap table td,
  .holdings-table-wrap table td,
  .trades-table-wrap table td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0 !important;
    width: auto;
    padding: 0 !important;
    border-bottom: 0 !important;
    white-space: normal !important;
    text-align: left;
    font-size: 13px !important;
    overflow-wrap: anywhere;
  }

  .leaderboard-table-wrap td[data-label]::before,
  .champions-table-wrap td[data-label]::before,
  .holdings-table-wrap td[data-label]::before,
  .trades-table-wrap td[data-label]::before,
  .friend-period-trades-table td[data-label]::before,
  .history-table td[data-label]::before,
  .table-card td[data-label]::before,
  .admin-codes-table-wrap td[data-label]::before,
  .admin-users-table-wrap td[data-label]::before,
  .wide-table-card td[data-label]::before,
  .fx-table-wrap td[data-label]::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-faint);
    letter-spacing: 0.02em;
  }

  .holdings-table-wrap td:first-child,
  .trades-table-wrap td:first-child,
  .leaderboard-table-wrap td.lb-player-cell,
  .admin-codes-table-wrap td:first-child,
  .admin-users-table-wrap td:nth-child(2),
  .table-card td:last-child {
    grid-column: 1 / -1;
  }

  .lb-rank-cell,
  .lb-num-cell,
  .lb-center-cell,
  .lb-player-cell {
    text-align: left;
    width: auto;
  }

  .alloc-bar-wrap {
    width: 100%;
  }

  .holdings-summary-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .holdings-summary-metrics {
    width: 100%;
    justify-content: space-between;
  }

  .holdings-table-wrap tfoot,
  .trades-table-wrap tfoot {
    display: block;
  }

  .holdings-table-wrap tfoot tr.holdings-subtotal-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 12px 0 0;
    padding: 12px 0;
    border: 0;
    border-top: 1px solid var(--hairline);
    border-radius: 0;
    background: transparent;
  }

  .holdings-table-wrap tfoot tr.holdings-subtotal-row td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none !important;
    padding: 2px 0 !important;
  }

  /* 10. 彈窗 Bottom Sheet 模式 */
  .friend-modal-gate,
  .auth-gate {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .friend-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 12px)) !important;
    max-height: 86vh !important;
    /* 進出場改由檔尾「Arc 動態」的 transition 負責（手機版是從底部滑上、關閉時滑回去） */
  }

  .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 24px 20px calc(28px + env(safe-area-inset-bottom, 12px)) !important;
    max-height: 92vh !important;
    overflow-y: auto;
    animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .modal-header h2 {
    font-size: 18px;
  }

  /* 11. Toast 浮動位置調整至底部導覽列上方（位置掛在堆疊容器上，個別 toast 只管字級與內距） */
  .toast-region {
    bottom: calc(118px + env(safe-area-inset-bottom, 10px));
    width: min(90vw, calc(100% - 24px));
  }
  .toast {
    font-size: 13px;
    padding: 8px 16px;
  }

  /* 12. 定期定額與未來推演計算機排版 */
  .dca-fields {
    flex-direction: column;
    align-items: stretch;
  }
  .dca-fields input,
  .dca-fields select,
  .dca-fields button {
    width: 100% !important;
  }
  .dca-plan-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .dca-plan-actions {
    width: 100%;
    justify-content: space-between;
  }

  .calc-layout {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .calc-form {
    position: static !important;
  }

  .settings-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-layout {
    grid-template-columns: 1fr !important;
  }

  .rooms-explore-grid {
    grid-template-columns: 1fr !important;
  }

  .pass-perks-grid {
    grid-template-columns: 1fr !important;
  }

  .titles-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .wishlist-list {
    gap: 12px !important;
  }

  .wish-list-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .wish-list-item .wish-footer {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
  }

  .chat-room-card {
    height: calc(100vh - 185px) !important;
    height: calc(100dvh - 185px) !important;
    max-height: calc(100vh - 185px) !important;
    max-height: calc(100dvh - 185px) !important;
    min-height: 380px;
  }

  .chat-header {
    padding: 10px 12px !important;
    gap: 8px;
  }

  .chat-header > div:first-child {
    min-width: 0;
    gap: 6px !important;
  }

  .chat-header > div:first-child small,
  .chat-header #chatSyncState {
    display: none;
  }

  .chat-header strong {
    font-size: 13px !important;
    line-height: 1.3;
  }

  .chat-quick-bar {
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 7px 10px;
    gap: 6px;
  }

  .chat-quick-label {
    flex: none;
    font-size: 10.5px;
  }

  .chat-quick-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .chat-quick-tags::-webkit-scrollbar {
    display: none;
  }

  .chat-quick-tags > .btn-preset {
    flex: 0 0 auto;
  }

  .chat-quick-bar .chat-quick-tags {
    flex: 1 1 auto;
    flex-basis: auto;
  }

  .chat-quick-bar .btn-preset,
  .chat-phrase-manage-btn {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 12px;
  }

  .chat-phrase-manage-btn {
    flex: none;
    margin-left: 0;
  }

  .chat-messages-wrap {
    padding: 14px 10px !important;
    gap: 10px !important;
  }

  .chat-msg-row {
    max-width: 96% !important;
    gap: 7px;
  }

  .chat-msg-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .chat-bubble {
    padding: 9px 11px;
    font-size: 14px;
  }

  .chat-input-bar {
    padding: 8px 10px !important;
    gap: 7px !important;
  }

  .chat-input-bar #chatInputText {
    min-width: 0;
    min-height: 42px;
    padding: 10px 12px !important;
    font-size: 16px !important;
  }

  .chat-input-bar .primary-button {
    min-height: 42px;
  }

  .chat-input-bar .primary-button {
    padding: 8px 12px !important;
  }

  .bug-board-card {
    padding: 18px 14px;
  }

  .bug-board-heading {
    flex-direction: column;
  }

  .bug-board-heading .primary-button {
    width: 100%;
  }

  .bug-report-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bug-report-attachment {
    order: -1;
  }

  .bug-attachment-link img {
    width: 100%;
    max-width: 220px;
  }

  /* 行動版觸控目標：交易紀錄的修改／刪除、聊天室表情、篩選分頁等主要操作
     在桌面版只有 20–28px，這裡統一拉到 40px（桌面版不受影響）。 */
  .btn-adjust,
  .btn-icon-inline,
  .filter-tab,
  .chat-react-btn {
    min-height: 40px;
    padding-block: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* .btn-preset 漏在上面那組觸控補丁之外：375px 下實測只有 24px
     （下單面板的「25%」「50%」「100% 全部現金」）。
     這條必須是獨立規則 —— 上面那組四個選擇器的換行格式被
     tests/test_frontend_hardening.py 的 regex 釘住了，不可以把它加進去。 */
  .btn-preset {
    min-height: 40px;
    padding-block: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-icon-inline,
  .chat-react-btn {
    min-width: 40px;
  }

}

@media (max-width: 420px) {
  .hero-foot {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }

  .metrics-4-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-stats-grid {
    grid-template-columns: 1fr !important;
  }

  .fx-chart-summary {
    grid-template-columns: 1fr;
  }
}

/* 房間表單、Emoji 選擇器與成員管理樣式 */
.room-emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.emoji-select-btn {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 22px;
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emoji-select-btn:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.emoji-select-btn.is-selected {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent);
  transform: scale(1.05);
}

.room-type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.room-type-btn {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  color: var(--ink-soft);
}

.room-type-btn:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.room-type-btn.is-active {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-color: var(--brand);
  color: var(--brand);
  font-weight: 700;
}

.room-members-manage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 2px;
  border-radius: 8px;
}

.room-member-manage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}



/* ============================== 房間制排位與通行證樣式 ============================== */

.room-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.room-tab:hover {
  border-color: var(--brand);
  color: var(--ink);
}

.room-tab.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brass);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 25%, transparent);
}

.room-tab-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.room-tab.is-active .room-tab-badge {
  background: color-mix(in srgb, var(--on-brass) 25%, transparent);
  color: var(--on-brass);
}

.nav-item-vip {
  color: var(--amber);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  margin: 4px 0;
}

.nav-item-vip-icon {
  font-size: 16px;
}

.nav-item-vip-pill {
  font-size: 10px;
  padding: 1px 5px;
  margin-left: auto;
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  color: var(--brass-on-dark);
}

.lb-grace-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.lb-spectator-notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  color: var(--blue);
  font-size: 13px;
  line-height: 1.5;
}

.lb-spectators {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 12px;
}

.lb-spectators summary {
  cursor: pointer;
  font-weight: 600;
}

.lb-spectators ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.lb-spectators li {
  margin: 4px 0;
}

.lb-spectators small {
  color: var(--ink-faint);
  margin-left: 4px;
}

.vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 20%, transparent) 0%, color-mix(in srgb, var(--warn) 20%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  color: var(--brand);
  font-size: 11px;
  font-weight: 750;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.rooms-explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  max-height: 480px;
  overflow-y: auto;
  padding: 4px 2px;
}

.room-explore-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: all 0.2s ease;
}

.room-explore-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}

.room-explore-card.is-member {
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, transparent) 0%, var(--card) 100%);
}

.sponsorship-order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  margin-bottom: 8px;
}

/* 排行榜玩家名稱：點下去看玩家檔案（成就／稱號／持倉總報酬） */
.player-name-button {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.player-name-button:hover {
  text-decoration: underline;
}

/* 折線圖的軸標與最後一點數值：SVG 用 viewBox 等比縮小，字級要比一般 .axis-label 大 */
.roi-axis-label {
  fill: var(--ink-faint);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.roi-last-value {
  /* 描邊墊在字底下，萬一數值落在折線或格線上仍然讀得到 */
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 4px;
  stroke-linejoin: round;
  font-variant-numeric: tabular-nums;
}

/* 持倉一覽內嵌的每日報酬率折線圖 */
.roi-series-inline {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.roi-series-body svg {
  display: block;
  width: 100%;
  height: auto;
}

.roi-series-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.roi-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-faint);
  cursor: pointer;
  transition: all 0.15s ease;
}

.roi-legend-item::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 4px;
  border-radius: 2px;
  background: var(--ink-faint); /* 次線灰 */
}

.roi-legend-item.is-active {
  color: var(--ink);
  border-color: var(--brand);
  background: var(--card);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(58, 42, 20, 0.08);
}

.roi-legend-item.is-active::before {
  background: var(--brand); /* 主線 brand */
}

.roi-positive {
  color: var(--pnl-up);
  fill: var(--pnl-up);
}

.roi-negative {
  color: var(--pnl-down);
  fill: var(--pnl-down);
}

.grid-line.zero-line {
  stroke: var(--ink-faint);
  stroke-width: 1.5;
  stroke-dasharray: none;
}

/* ===================== 帳號選單（右上角頭像） ===================== */

.avatar {
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.avatar img,
.chat-msg-avatar img,
.mention-item-avatar img,
.lb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.chat-msg-avatar,
.mention-item-avatar {
  overflow: hidden;
}

/* 排位榜名字前的小頭像：沒有照片就是姓名首字。 */
.lb-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  vertical-align: middle;
  margin-right: 6px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.user-menu {
  position: relative;
}

.user-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(280px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--overlay);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-lg);
}

.user-menu-panel[hidden] {
  display: none;
}

.user-menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.user-menu-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  font-size: 17px;
  cursor: default;
}

.user-menu-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-menu-who strong,
.user-menu-who small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-who small {
  color: var(--ink-faint);
  font-size: 12px;
}

.user-menu-item,
.user-menu-theme {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.user-menu-item:hover,
.user-menu-theme:hover {
  background: var(--bg-soft);
}

.user-menu-item [data-icon] {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: none;
}

.user-menu-item [data-icon] svg {
  width: 18px;
  height: 18px;
}

.user-menu-item.is-danger {
  color: var(--down);
  margin-top: 6px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding-top: 12px;
}

.user-menu-label {
  margin: 8px 10px 4px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.user-menu-theme.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  font-weight: 700;
}

.theme-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  border: 1px solid var(--line-strong);
}

.theme-swatch-playful { background: linear-gradient(135deg, #f2eee6 50%, #835f13 50%); }
.theme-swatch-studio { background: linear-gradient(135deg, #070707 50%, #d4af37 50%); }
.theme-swatch-classic { background: linear-gradient(135deg, #eef4f0 50%, #147e4b 50%); }

/* ===================== 設定頁：大頭照 ===================== */

.avatar-editor-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.avatar-preview {
  width: 88px;
  height: 88px;
  font-size: 34px;
  cursor: default;
  flex: none;
}

.avatar-editor-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.avatar-crop-card {
  width: min(380px, calc(100vw - 24px));
}

.avatar-crop-hint {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* 裁切區：照片畫在 canvas 上，上面蓋一層不吃事件的方框與九宮格輔助線。 */
.avatar-crop-stage {
  position: relative;
  width: min(280px, 100%);
  aspect-ratio: 1;
  margin: 14px auto 12px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #ffffff;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.avatar-crop-stage.is-dragging {
  cursor: grabbing;
}

.avatar-crop-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.avatar-crop-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95), inset 0 0 0 3px rgba(0, 0, 0, 0.4);
  background:
    linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.55) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.55) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.55) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.55) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.55) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.55) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.55) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.55) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}

.avatar-crop-zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-soft);
}

.avatar-crop-zoom input[type="range"] {
  flex: 1;
  accent-color: var(--primary);
}

.avatar-crop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* ===================== 玩家檔案：大頭照、備註名稱 ===================== */

.profile-avatar {
  width: 120px;
  height: 120px;
  flex: none;
  margin-left: auto;
  margin-right: 12px;
  border-radius: var(--radius-overlay);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 48px;
  font-weight: 700;
  border: 1px solid var(--line-strong);
}

.profile-avatar[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .profile-avatar {
    width: 88px;
    height: 88px;
    font-size: 36px;
  }
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-head-main {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 16px; /* 跟右邊的大頭照隔開 */
}

.profile-lastseen {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.profile-lastseen[hidden] {
  display: none;
}

/* 備註：一小列，寬度跟標題區一樣（頭像左邊），沒有外框與說明文字。 */
.profile-alias-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.profile-alias-form input {
  flex: 1 1 0;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--card);
}

.profile-alias-form .primary-button,
.profile-alias-form .outlined-button {
  height: 32px;
  min-height: 0;
  padding: 0 12px;
  font-size: 13px;
  flex: none;
}

.profile-alias-form [hidden] {
  display: none;
}

/* ===================== 設定頁：K 線顏色 ===================== */

.kline-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kline-preset {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.kline-preset.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  font-weight: 700;
}

.kline-custom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.kline-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}

.kline-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.kline-dot-up { background: var(--kl-up); }
.kline-dot-down { background: var(--kl-down); }

.kline-preview {
  width: 120px;
  height: 44px;
  margin-left: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.kline-preview line {
  stroke-width: 1.5;
}

/* 盤房夜場：黑金白配色。
   底一律是近純黑的階梯（page → sheet → raised → top），強調色只有一支金，文字是白。
   任何「放在這些底色上的字」都必須是亮色：button / input / select 沒有指定 color 時瀏覽器
   會給近黑的 buttontext，深底上等於隱形，所以下面對表單元件補了一條零特異性的預設白字。
   暗底上陰影不可見，所以 elevation 改用「surface 提亮 + 描邊」表達高度。 */
html[data-theme="studio"] {
  color-scheme: dark;

  --paper: #070707;
  --paper-sunk: #000000;
  --sheet: #101010;
  --sheet-raised: #161616;
  --sheet-top: #1d1d1d;
  --rule-hair: #2a2a2a;
  --rule-strong: #8a7b4d;
  --ink-1: #fafaf7;
  --ink-2: #d2cfc6;
  --ink-3: #a09c90;
  --brass: #d4af37;
  --brass-deep: #f0cd5a;
  --brass-wash: #1f1a0b;
  /* 金色底一律配純黑字：白字對 #D4AF37 只有 2.2:1，黑字有 9:1 以上。 */
  --on-brass: #000000;
  --gain: #45c08e;
  --loss: #f0695d;
  --caution: #f0a43a;
  /* 點綴色：黑金仍是主調，這幾支只用在小面積（圖示、標籤、配置色、資訊提示），
     明度都拉到 7:1 以上，黑底上當文字也讀得出來。 */
  --info: #6cb6f0;
  --accent-sky: #6cb6f0;
  --accent-teal: #3fd0c4;
  --accent-violet: #b69cff;
  --accent-rose: #ff8aa0;
  --accent-orange: #ff9a5c;
  --on-gain: #000000;
  --on-loss: #000000;
  --masthead: #000000;
  --masthead-ink: #f5f2ea;
  --masthead-muted: #a8a496;
  --brass-on-dark: #d4af37;
  --gain-on-dark: #45c08e;
  --loss-on-dark: #f0695d;

  /* 舊版把 --card 綁成 var(--canvas)，卡片與頁底完全同色，等於沒有卡片；
     也把 --brand 綁成 var(--ink)，夜場等於沒有品牌色。兩個都在這裡修掉。 */
  --card: var(--overlay);
  --sidebar-bg: var(--nav);

  /* 市場配置色：金、珊瑚、天藍、紫、青、白，色相拉開又同時保有明度差，
     pattern 與圖例文字照舊保留（不能只靠顏色辨識）。 */
  --alloc-cash: #f5f2ea;
  --alloc-crypto: #f0c24b;
  --alloc-tw: #ff8a6b;
  --alloc-fund: #3fd0c4;
  --alloc-us: #6cb6f0;
  --alloc-uk: #b69cff;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-overlay: 20px;

  --surface-1: var(--sheet);
  --surface-2: var(--sheet-raised);
  --surface-3: var(--sheet-top);
  --elev-1: 0 0 0 1px var(--hairline);
  --elev-2: 0 0 0 1px var(--line-strong);
  --elev-3: 0 0 0 1px var(--line-strong), 0 24px 48px rgba(0, 0, 0, 0.7);
}

/* 表單元件預設白字。:where() 讓整條規則特異性為 0，任何元件自己指定的 color 都能蓋過它，
   只有「沒人指定」的那批（過去是黑字壓黑底）會落到這裡。 */
:where(html[data-theme="studio"]) :where(button, input, select, textarea, option, optgroup) {
  color: var(--ink-1);
}

:where(html[data-theme="studio"]) ::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

/* ---- 夜場的色彩點綴 ----
   主色維持黑與金；這裡只在「裝飾性、小面積」的地方加色相，讓畫面不是單一金色。
   漲跌、警示這些有語意的顏色不在此處，維持原本的用法。 */

/* 頁面右上一抹金光，卡片左上一點金暈：只是氛圍，不影響文字底色對比（都低於 10% 不透明度）。 */
html[data-theme="studio"] body {
  background-image: radial-gradient(900px 420px at 88% -8%, rgba(212, 175, 55, 0.11), transparent 70%);
  background-repeat: no-repeat;
}

html[data-theme="studio"] .card {
  background-image: radial-gradient(130% 90% at 0% 0%, rgba(212, 175, 55, 0.06), transparent 55%);
}

/* 金色元件改金屬漸層（金底上的字仍是純黑）。 */
html[data-theme="studio"] .primary-button,
html[data-theme="studio"] .brand-mark,
html[data-theme="studio"] .avatar {
  background: linear-gradient(135deg, #f3d36b 0%, #d4af37 52%, #b88f22 100%);
}

html[data-theme="studio"] .primary-button:hover {
  background: linear-gradient(135deg, #f8e08a 0%, #e3c04e 52%, #c89c2b 100%);
}

/* 側欄圖示：沒選中時各自一個色相，選中時回到金色（由 .is-active 的 color 接手）。 */
html[data-theme="studio"] .nav-item:not(.is-active) [data-icon] { color: var(--ic, var(--nav-ink)); }
html[data-theme="studio"] .nav-item[data-view="dashboard"] { --ic: #f0c24b; }
html[data-theme="studio"] .nav-item[data-view="trading"] { --ic: var(--accent-teal); }
html[data-theme="studio"] .nav-item[data-view="leaderboard"] { --ic: var(--accent-orange); }
html[data-theme="studio"] .nav-item[data-view="achievements"] { --ic: var(--accent-violet); }
html[data-theme="studio"] .nav-item[data-view="community"] { --ic: var(--accent-sky); }
html[data-theme="studio"] .nav-item[data-view="chart"] { --ic: var(--accent-rose); }
html[data-theme="studio"] .nav-item[data-view="fx"] { --ic: var(--accent-teal); }
html[data-theme="studio"] .nav-item[data-view="news"] { --ic: var(--accent-sky); }
html[data-theme="studio"] .nav-item[data-view="calculator"] { --ic: var(--accent-violet); }
html[data-theme="studio"] .nav-item[data-view="settings"] { --ic: #cfcabd; }

/* 小圖示方塊：同一個形狀、不同色相。 */
html[data-theme="studio"] .metric-icon.income-icon {
  background: color-mix(in srgb, var(--accent-teal) 16%, transparent);
  color: var(--accent-teal);
}

html[data-theme="studio"] .metric-icon.investment-icon {
  background: color-mix(in srgb, var(--accent-violet) 16%, transparent);
  color: var(--accent-violet);
}

/* ============================================================
   輕鬆競賽（classic）：v1.0.39 的圓潤綠意介面，保留給習慣舊版的使用者。
   只覆寫語意層，相容層（--canvas / --card / --primary …）自動跟著換。

   色值取自 v1.0.39 的 `:root`（commit aa0b95d），只有七個值做了「同色相、
   最小幅度加深」的無障礙修正 —— 舊版那幾個值實測不過 WCAG，原樣搬回來等於
   把剛修好的對比問題再裝一次。修正前→後與實測值：
     --ink-faint   #8aa094 → #617169   2.50 → 4.62
     --up          #0d9c5a → #0a7f49   3.18 → 4.54
     --down        #d2453f → #c5403b   4.04 → 4.52
     --amber       #d97706 → #a75b04   2.86 → 4.55
     --primary     #168a52 → #147e4b   3.93 → 4.58（白字在它上面也從 4.38 → 5.10）
     --line-strong #d3e0d8 → #848d88   1.22 → 3.06（控制項邊界）
   其餘色值與 v1.0.39 完全相同。
   ============================================================ */
html[data-theme="classic"] {
  --paper: #eef4f0;
  /* 舊版的 --bg-soft 比 --bg 更亮（不是更暗），這裡照搬以維持原本的層次感 */
  --paper-sunk: #f7faf8;
  --sheet: #ffffff;
  --sheet-raised: #ffffff;
  --sheet-top: #ffffff;
  --rule-hair: #e3ece6;
  --rule-strong: #848d88;
  --ink-1: #17251d;
  --ink-2: #4d6157;
  --ink-3: #617169;
  --brass: #147e4b;
  --brass-deep: #0f6e40;
  --brass-wash: #e6f4ec;
  --on-brass: #ffffff;
  --gain: #0a7f49;
  --loss: #c5403b;
  --caution: #a75b04;
  --info: #0e7490;
  --on-gain: #ffffff;
  --on-loss: #ffffff;
  --masthead: #0c2a1c;
  --masthead-ink: #dcebe2;
  --masthead-muted: #9fc4ae;
  /* 深墨綠側欄上的強調色：品牌綠在它上面看不見，用舊版的亮綠 */
  --brass-on-dark: #3ddc90;

  --sidebar-bg: linear-gradient(180deg, #14402c 0%, #0c2a1c 100%);

  /* 舊版的六色彩虹配置條。色相彼此可分辨，但對背景只有 1.9–3.8:1，
     所以 pattern 疊層與圖例文字一律保留（見 .alloc-seg-*）。 */
  --alloc-cash: #10b981;
  --alloc-tw: #3b82f6;
  --alloc-us: #8b5cf6;
  --alloc-uk: #ef4444;
  --alloc-crypto: #f59e0b;
  --alloc-fund: #06b6d4;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-overlay: 18px;

  --surface-1: var(--sheet);
  --surface-2: var(--sheet-raised);
  --surface-3: var(--sheet-top);
  --elev-1: 0 1px 3px rgba(18, 48, 32, 0.06), 0 4px 16px rgba(18, 48, 32, 0.06);
  --elev-2: var(--elev-1);
  --elev-3: 0 8px 30px rgba(18, 48, 32, 0.14);

  /* 字體不覆寫：三套主題共用 :root 的 IBM Plex Sans + 系統中文字。
     v1.0.39 原本是純系統字體堆疊，換回去會讓字母寬度與行高跟另外兩套差一點點
     （實測 nav-item 42px vs 43px、章節標題 58px vs 59px、表格欄寬差 1–2px），
     而「三套只差顏色與風格、尺寸完全一致」是比字體懷舊更重要的約束。 */
}

/* 下面這幾條是把「盤房改版時寫死掉的外觀」在 classic 底下還原回 v1.0.39。
   它們不是 token 能表達的（圓形 vs 方形、有沒有漸層、有沒有陰影）。 */

/* 卡片回到有陰影的浮起感 */
html[data-theme="classic"] .card {
  box-shadow: var(--elev-1);
}

html[data-theme="classic"] .asset-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--elev-3);
}

/* 圓形圖示鈕 */
html[data-theme="classic"] .icon-button {
  border-radius: 50%;
}

html[data-theme="classic"] .icon-button:hover {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--brand);
}

/* 主要按鈕的綠色漸層與光暈 */
html[data-theme="classic"] .primary-button {
  background: linear-gradient(135deg, #1c9c61, #127a49);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(18, 122, 73, 0.28);
}

html[data-theme="classic"] .primary-button:hover {
  background: linear-gradient(135deg, #178c56, #0f6e40);
}

/* 側欄 active 的綠色漸層藥丸（盤房版是銅色直條） */
html[data-theme="classic"] .primary-nav::after {
  background: linear-gradient(135deg, #1f9c63, #14804d);
  box-shadow: 0 4px 14px rgba(20, 128, 77, 0.35);
  border-radius: var(--radius-sm);
}

html[data-theme="classic"] .nav-item.is-active {
  color: #ffffff;
}

/* 品牌標記回到實心圓角塊 */
html[data-theme="classic"] .brand-mark {
  background: linear-gradient(135deg, #2fbf7a, #147e4b);
  border-color: transparent;
  border-radius: 12px;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(47, 191, 122, 0.35);
}

/* 頭像回到綠色漸層 */
html[data-theme="classic"] .avatar {
  background: linear-gradient(135deg, #2fbf7a, #0f6e40);
  color: #ffffff;
}

/* 章節標題在舊版沒有規尺線。只拿掉線，內距留著——三套主題的垂直節奏要一致。 */
html[data-theme="classic"] .section-heading {
  border-bottom-color: transparent;
}

/* 舊版的分頁籤是實心綠膠囊，指示器沿用但換色 */
html[data-theme="classic"] .filter-tabs::after {
  background: var(--primary);
}

html[data-theme="studio"] .theme-fun {
  display: none !important;
}

/* 三套主題的字級、行高與所有尺寸一律相同，只差在顏色與形狀。
   （夜場原本是「桌機高密度」：--fs-body 15px、行高 1.5、控制項 32px、側欄 220px…
   切過去整個版面會縮一圈，讀起來像換了一套 app 而不是換了個配色。） */
html[data-theme="studio"] body {
  background: var(--canvas);
}

html[data-theme="studio"] .sidebar {
  background: var(--nav);
  color: var(--nav-ink);
}

html[data-theme="studio"] .brand-mark {
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--on-brass);
  box-shadow: none;
}

html[data-theme="studio"] .nav-item {
  border-radius: var(--radius-sm);
  color: var(--nav-ink);
}

html[data-theme="studio"] .nav-item:hover {
  background: color-mix(in srgb, var(--nav-ink) 8%, transparent);
  color: var(--nav-ink);
}

html[data-theme="studio"] .nav-item.is-active {
  background: transparent;
  color: var(--brass-on-dark);
  box-shadow: none;
}

/* 左側直條現在由 .primary-nav::after 那顆滑動藥丸的 inset box-shadow 提供，
   夜場不需要再畫第二根（畫了會變成兩條且不會跟著滑）。 */
html[data-theme="studio"] .nav-item.is-active::before {
  display: none;
}

html[data-theme="studio"] .nav-unread-badge {
  background: var(--down);
  color: var(--on-loss);
  box-shadow: none;
  animation: none;
}

html[data-theme="studio"] .workspace-head {
  background: var(--canvas);
  backdrop-filter: none;
}

html[data-theme="studio"] .topbar {
  background: var(--canvas);
}

html[data-theme="studio"] .sync-state {
  background: var(--card);
  border-color: var(--line);
  border-radius: var(--radius-sm);
}

html[data-theme="studio"] .icon-button {
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
}

html[data-theme="studio"] .avatar {
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--on-brass);
  box-shadow: none;
}

html:not([data-theme="studio"]) .theme-studio-only {
  display: none !important;
}

html[data-theme="studio"] .primary-button {
  background: var(--brand);
  color: var(--on-brass);
  box-shadow: none;
}

html[data-theme="studio"] .primary-button:hover {
  background: var(--primary-strong);
}

/* 分頁籤、篩選鈕：圓角方塊而不是膠囊，滑動指示器的圓角要跟著一起改。 */
html[data-theme="studio"] .filter-tabs,
html[data-theme="studio"] .news-filter-tab,
html[data-theme="studio"] .filter-tab,
html[data-theme="studio"] .filter-tabs::after {
  border-radius: var(--radius-sm);
}

/* 選中態交給基礎樣式：.filter-tab 靠滑動指示器（金底黑字），.news-filter-tab 是實心金底。 */

/* 卡片是實心圓角方塊：比頁底亮一階，加一條細描邊。 */
html[data-theme="studio"] .card,
html[data-theme="studio"] .holdings-book-wrap {
  background: var(--card);
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

html[data-theme="studio"] .status-pill {
  color: var(--ink-soft);
  background: var(--card);
  border-color: var(--line);
  border-radius: var(--radius-sm);
}

html[data-theme="studio"] .status-dot {
  background: var(--ink-faint);
  box-shadow: none;
}

html[data-theme="studio"] .badge-roi {
  border-radius: 8px;
  background: transparent;
  border-color: transparent;
}

html[data-theme="studio"] .badge-roi.positive { color: var(--pnl-up); }
html[data-theme="studio"] .badge-roi.negative { color: var(--pnl-down); }
html[data-theme="studio"] .badge-roi.neutral { color: var(--ink-faint); }

html[data-theme="studio"] .market-btn,
html[data-theme="studio"] .action-btn {
  border-radius: var(--radius-sm);
  background: var(--sheet-raised);
  color: var(--ink);
}

html[data-theme="studio"] .market-btn:hover,
html[data-theme="studio"] .action-btn:hover {
  border-color: var(--brand);
}

html[data-theme="studio"] .market-btn.is-active {
  background: var(--brand);
  color: var(--on-brass);
  border-color: var(--brand);
}

html[data-theme="studio"] .auth-gate {
  background: var(--canvas);
}

html[data-theme="studio"] .auth-card,
html[data-theme="studio"] .friend-modal-card {
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-lg);
  background: var(--overlay);
}

html[data-theme="studio"] .toast {
  background: var(--overlay);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}

html[data-theme="studio"] .user-menu-theme.is-active {
  background: var(--brass-wash);
}

html[data-theme="studio"] .lb-avatar,
html[data-theme="studio"] .chat-msg-avatar,
html[data-theme="studio"] .mention-item-avatar {
  border-radius: var(--radius-sm);
}

@media (max-width: 860px) {
  html[data-theme="studio"] .mobile-nav-item.is-active {
    color: var(--brass-on-dark);
  }

}

/* 漲跌／警示色在表格裡要贏過 `.holdings-table-wrap td { color: var(--ink) }`。
   兩者特異性相同 (0,1,1)，所以靠「後寫的贏」—— 這組必須留在所有表格規則之後。
   （沒有這一段的話，日漲跌欄的紅綠完全不會顯示。） */
td.is-up,
th.is-up {
  color: var(--pnl-up);
}

td.is-down,
th.is-down {
  color: var(--pnl-down);
}

td.is-warn,
th.is-warn {
  color: var(--warn);
}

.broker-overlap-list { list-style: none; padding: 0; margin: 8px 0; font-size: 13px; }
.broker-overlap-list li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.broker-overlap-list:empty { display: none; }

/* 外部連結卡：多個連結項目直排，項目之間用細線分隔；新增券商只要多一個 .integration-item。
   卡片夠寬（整排寬的桌機版）時改成並排，分隔線改成直的。 */
#integrationsCard { container-type: inline-size; }
.integration-list { display: flex; flex-direction: column; margin-top: 8px; }
.integration-item { padding: 16px 0 18px; border-top: 1px solid var(--line); min-width: 0; }
.integration-item:first-child { border-top: 0; padding-top: 10px; }
.integration-item:last-child { padding-bottom: 4px; }

@container (min-width: 640px) {
  .integration-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
  .integration-item,
  .integration-item:first-child,
  .integration-item:last-child { border-top: 0; padding: 10px 0 4px; }
  .integration-item:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 28px; }
  .integration-item:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 18px; }
  /* 停用提示在直排時有 34px 上下留白，並排後會讓兩欄高度差太多 */
  .integration-item .empty-hint { padding: 18px 0; }
}

/* 網域搬家：舊網址 retire.piea.uk 才顯示（橫幅常駐 + 每次開啟的彈窗） */
.domain-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 30px;
  background: color-mix(in srgb, var(--warn) 16%, var(--card));
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
}
.domain-notice[hidden] { display: none; }
.domain-notice > .inline-icon { flex: 0 0 auto; color: var(--warn); }
.domain-notice p { margin: 0; flex: 1; min-width: 0; }
.domain-notice strong { margin-right: 8px; }
.domain-notice-link { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.domain-notice-go {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  text-decoration: none;
  white-space: nowrap;
}
.domain-notice-go:hover { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.domain-move-card { max-width: 480px; }
.domain-move-deadline {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}
.domain-move-deadline strong { color: var(--warn); font-size: 15px; }
.domain-move-list { margin: 0 0 16px; padding-left: 20px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.domain-move-list strong { color: var(--ink); }
.domain-move-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.domain-move-actions .primary-button { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; }
.auth-domain-notice {
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.auth-domain-notice[hidden] { display: none; }
.auth-domain-notice strong { color: var(--ink); margin-right: 6px; }
@media (max-width: 860px) {
  .domain-notice { padding: 8px 14px; font-size: 12.5px; align-items: flex-start; }
}
.integration-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.integration-head .inline-icon { flex: 0 0 auto; margin-top: 2px; }
.integration-head h3 { margin: 0; font-size: 15px; }
.integration-head p { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* ============================== 程式化交易 API 金鑰 ============================== */
.api-key-current {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.api-key-value {
  display: block;
  word-break: break-all;
  font-family: monospace;
  font-size: 13px;
  user-select: all;
  padding: 8px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}

.api-key-snippet {
  white-space: pre-wrap;
  font-size: 12px;
  overflow-x: auto;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: monospace;
  margin: 8px 0;
}

/* ============================================================
   動效關閉：系統的 prefers-reduced-motion 與使用者自選的 data-motion="off"
   走同一組規則。全站只有這一處能關動效，不要在別的地方再寫第二份。

   關掉的是「動的過程」，不是功能與終態——所有動畫都壓成 1ms 而不是 none，
   這樣 animationend / Animation.finished 仍然會觸發，靠動畫結束來收尾的邏輯
   （關 modal、移除進場 class）不會卡死。這是「動畫關閉時功能一律不得失效」
   的成本必須付的地方。
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *,
  html:not([data-motion="full"]) *::before,
  html:not([data-motion="full"]) *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

/* 「輕微」：保留淡入淡出，關掉所有位移、縮放與 stagger。
   位移與 scale 是造成前庭不適的主因，純 opacity 幾乎不會。 */
html[data-motion="lite"] {
  --stagger: 0ms;
  --dur-3: var(--dur-2);
  --ease-spring: var(--ease-out);
}

html[data-motion="lite"] .page-view.is-page-enter {
  animation-name: fade-only;
}

/* View Transitions 的偽元素掛在根元素身上，不是它的後代——中間有空格的
   `html[data-motion="lite"] ::view-transition-new(...)` 永遠不會 match。
   v1.0.40 起 lite 的換頁一直照樣帶著位移，就是漏在這個空格上。
   退場也要一起換：page-exit 帶 translateY(-4px)。 */
html[data-motion="lite"]::view-transition-new(page-stage) {
  animation-name: fade-only;
}

html[data-motion="lite"]::view-transition-old(page-stage) {
  animation-name: fade-out-only;
}

html[data-motion="lite"] .page-view.is-entering.stagger-in > *:not(.skel),
html[data-motion="lite"] .page-view.is-entering .stagger-in > *:not(.skel) {
  animation-name: fade-only;
  animation-delay: 0ms;
}

/* 常駐的無限動畫在 lite 直接停掉：它們是裝飾，不帶資訊。
   骨架本身仍然顯示（它是載入狀態的資訊），只是不掃描、不淡入。 */
html[data-motion="lite"] .skel {
  animation: none;
  opacity: 1;
}

/* 指示器的滑動在 lite 保留但縮短：它帶著「現在選中哪個」的空間資訊，
   關掉會退回瞬間硬切，反而少了訊息。 */
html[data-motion="lite"] .primary-nav::after,
html[data-motion="lite"] .filter-tabs::after {
  transition-duration: var(--dur-1);
  transition-timing-function: var(--ease-out);
}

html[data-motion="lite"] .card:hover,
html[data-motion="lite"] .room-explore-card:hover,
html[data-motion="lite"] button:active {
  transform: none !important;
  scale: none !important;
}

@keyframes fade-only {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out-only {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* off 時骨架也要看得到（它是狀態，不是動效），上面的 1ms 規則會讓它直接到終態。 */
html[data-motion="off"] .skel {
  opacity: 1;
}

/* ============================================================
   切換主題的那一幀：把 transition 全部關掉。
   換主題會讓全站每個 color / background / border-color 的宣告都變值，而全站有
   350+ 個元素掛著顏色類 transition —— 不擋的話一次切換會同時起 40 條以上的
   transition（實測排位榜 43 條），每條都要重繪一塊區域，使用者看到的就是「頓一下」。
   只關 transition 不關 animation：animation 的收尾（Animation.finished）有程式在等，
   而 transition 沒有任何程式依賴 transitionend（已全檔確認 0 處）。
   這個 class 由 swapThemeAttribute() 掛上，下一幀就移除。
   ============================================================ */
html.is-theme-swapping *,
html.is-theme-swapping *::before,
html.is-theme-swapping *::after {
  transition: none !important;
}

/* ===================== 房間：沒加入房間的說明、用代碼加入 ===================== */

.roomless-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.55;
}
.roomless-hint > .inline-icon { flex: 0 0 auto; color: var(--brand); }
.roomless-hint p { margin: 0; flex: 1 1 280px; min-width: 0; }
.roomless-hint strong { display: block; }
.roomless-hint-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.roomless-hint-actions button { font-size: 12.5px; padding: 6px 14px; min-height: 36px; }

.join-room-code-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.join-room-code-form label { font-size: 13px; font-weight: 700; color: var(--ink); flex: 0 0 auto; }
.join-room-code-form input {
  flex: 1 1 140px;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font-size: 13.5px;
}
.join-room-code-form #joinRoomCodeInput { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.join-room-code-form button { font-size: 13px; padding: 8px 14px; flex: 0 0 auto; }
.join-room-code-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-faint); }

/* ===================== 聊天室頻道（全服／房間） ===================== */

.chat-channel-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.chat-channel-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  max-width: 180px;
}
.chat-channel-tab span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-channel-tab:hover { color: var(--ink); border-color: var(--line-strong); }
.chat-channel-tab.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brass);
}

/* ===================== 歷屆週冠軍名冊：全員報酬 ===================== */

.week-returns-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  min-height: 28px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  background: transparent;
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
}
.week-returns-toggle:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.week-returns-toggle .inline-icon { transition: transform var(--dur-1) var(--ease-out); }
.week-returns-toggle[aria-expanded="true"] .inline-icon { transform: rotate(180deg); }
.week-returns-row > td { background: var(--bg-soft); padding: 10px 12px 14px; }
.week-returns-table { width: 100%; font-size: 13px; }
.week-returns-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 2px 0 6px;
}
.week-returns-table tr.is-self td { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.week-returns-spectator { color: var(--ink-faint); font-weight: 600; }
.week-returns-note { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-faint); }

@media (max-width: 860px) {
  /* 名冊在手機上變成兩欄卡片；展開的全員報酬要橫跨整張卡，否則被塞進半欄直排成一個字一行 */
  .leaderboard-table-wrap tbody tr.week-returns-row { grid-template-columns: 1fr; padding: 0 0 12px; }
  .leaderboard-table-wrap tr.week-returns-row > td {
    grid-column: 1 / -1;
    display: block;
    padding: 10px 12px 12px !important;
  }
  .week-returns-table caption { display: block; }
  .leaderboard-table-wrap .week-returns-table tbody tr { padding: 10px 8px; }
  .week-returns-table tr.is-self { background: color-mix(in srgb, var(--brand) 9%, transparent); }
  .week-returns-table tr.is-self td { background: transparent; }
  .week-returns-toggle { margin: 6px 0 0; }
}

/* ============================================================
   Arc 動態（v1.2.3）
   出處：Arc（github.com/kuratlielia/arc-library，MIT）的 Dialog、Slot text、Accordion。
   Arc 是 React + Motion 元件；本站 CSP 只允許同源腳本、也沒有建置流程，所以只移植
   它的時長、曲線與互動手法，改寫成原生 CSS transition 與 Web Animations API。
   刻意不搬：Arc foundation.css 把全站焦點環拿掉，本站的 :focus-visible 規則保持不變。
   ============================================================ */

/* ---------- 彈窗：淡入＋彈簧上浮，關閉時有退場（Arc Dialog） ----------
   開關仍然只靠 hidden 屬性：app.js 十幾個開關點與焦點管理（盯 hidden 的 MutationObserver）
   一行都不用改。退場靠 display 的離散過渡（transition-behavior: allow-discrete）：
   設成 hidden 之後元素會多留 150ms 把退場演完才真的 display: none。
   不支援的瀏覽器（舊 Firefox）照舊瞬間開關，功能不受影響。 */
.friend-modal-gate {
  opacity: 1;
  transition:
    opacity var(--dur-2) var(--ease-out),
    display var(--dur-2) allow-discrete;
}

.friend-modal-card {
  transition:
    opacity var(--dur-1) var(--ease-out),
    transform var(--dur-spring) var(--ease-arc-spring);
}

@starting-style {
  .friend-modal-gate:not([hidden]) {
    opacity: 0;
  }
  .friend-modal-gate:not([hidden]) .friend-modal-card {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
}

/* 退場：比進場短而果斷；退場中點擊直接穿透，觸發鈕可以立刻再打開 */
.friend-modal-gate[hidden] {
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 150ms var(--ease-arc-standard),
    display 150ms allow-discrete;
}

.friend-modal-gate[hidden] .friend-modal-card {
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transition:
    opacity 150ms var(--ease-arc-standard),
    transform 150ms var(--ease-arc-standard);
}

/* 手機版是底部抽屜：從下緣滑上來，關閉時滑回去（原本關閉是瞬間消失） */
@media (max-width: 860px) {
  .friend-modal-card {
    transition:
      opacity var(--dur-1) var(--ease-out),
      transform 420ms var(--ease-out);
  }
  @starting-style {
    .friend-modal-gate:not([hidden]) .friend-modal-card {
      opacity: 1;
      transform: translateY(100%);
    }
  }
  .friend-modal-gate[hidden] .friend-modal-card {
    opacity: 1;
    transform: translateY(100%);
    transition: transform 200ms var(--ease-in);
  }
  .friend-modal-gate[hidden] {
    transition:
      opacity 200ms var(--ease-arc-standard),
      display 200ms allow-discrete;
  }
}

/* 輕微動效：只淡入淡出，不位移不縮放 */
html[data-motion="lite"] .friend-modal-card {
  transform: none !important;
}

/* ---------- 數字逐位捲動（Arc Slot text） ----------
   app.js 的 setRollingText() 只在數字真的變了、而且是完整動效時才產生這些節點；
   捲完會換回純文字，平常 DOM 裡看不到 .roll。 */
.roll {
  display: inline-flex;
  align-items: baseline;
  white-space: pre;
  font-variant-numeric: tabular-nums;
}

.roll-slot {
  position: relative;
  display: inline-block;
}

/* 捲軸視窗固定 1.5em、對齊字形中線，跟元素自己的行高無關：
   行高很大的地方（總資產那行是 1.8）若讓視窗跟著行高走，捲到一半會同時露出上下兩個完整數字。
   每格也是 1.5em，靜止時鄰格的字完全落在視窗外；上下 25% 羽化，捲動中的字是淡出而不是被切掉。 */
.roll-window {
  position: absolute;
  left: -0.08em;
  right: -0.08em;
  top: 50%;
  height: 1.5em;
  margin-top: -0.75em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}

.roll-sizer {
  visibility: hidden;
}

.roll-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform;
}

.roll-cell {
  display: block;
  height: 1.5em;
  line-height: 1.5em;
}

.roll-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- <details> 平滑展開（Arc Accordion） ----------
   漸進增強：支援 ::details-content 與 interpolate-size 的瀏覽器才有高度動畫，
   其餘照舊瞬間開合。interpolate-size 只開在 details 上，不影響全站其他 height: auto。 */
@supports selector(::details-content) {
  details {
    interpolate-size: allow-keywords;
  }
  details::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition:
      block-size var(--dur-3) var(--ease-arc-standard),
      opacity var(--dur-2) var(--ease-out),
      content-visibility var(--dur-3) allow-discrete;
  }
  details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* 動效關閉時按鈕不縮放（其餘 transition 已被上面的 1ms 規則壓掉） */
html[data-motion="off"] :is(.primary-button, .secondary-button, .outlined-button, .icon-button):active {
  scale: none;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) :is(.primary-button, .secondary-button, .outlined-button, .icon-button):active {
    scale: none;
  }
}

/* ============================== 看盤頁 ============================== */

/* 圖表在左、自選清單在右（約佔 1/4）。清單與圖表同高、自己捲動；窄螢幕才改成上下排。 */
.chart-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
  grid-template-areas: "pane list";
  gap: 14px;
  align-items: start;
  margin-bottom: 32px;
}

.chart-layout > .chart-pane { grid-area: pane; }
.chart-layout > .chart-list-card { grid-area: list; }

/* 自選清單改放左邊（寬螢幕）；窄螢幕仍是上下排，不受影響。 */
.chart-layout.is-list-left {
  grid-template-columns: minmax(240px, 1fr) minmax(0, 3fr);
  grid-template-areas: "list pane";
}

@media (max-width: 960px) {
  .chart-layout,
  .chart-layout.is-list-left {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "pane" "list";
  }
}

/* 看盤頁滿版：K 線越寬，一次看得到的根數越多。其他頁的 1180px 上限不動。 */
.page-content.is-wide {
  max-width: none;
  padding-left: 16px;
  padding-right: 16px;
}

/* 麵包屑已經標示頁名；大標題收掉讓圖表第一屏就完整露出。保留在 DOM 給螢幕閱讀器。 */
.chart-view-header {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.chart-strip {
  padding: 12px 14px;
}

.chart-strip-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 10px;
}

.chart-strip-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.chart-strip-title h2 {
  margin: 0;
  font-size: 16px;
}

.chart-pane,
.chart-list-card {
  padding: 16px 20px;
  min-width: 0;
}

/* 圖表卡左右留白收小：每少 1px，K 線區就多 1px */
.chart-pane {
  padding-left: 12px;
  padding-right: 12px;
}

.chart-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.chart-pane-sub {
  margin-left: 8px;
  font-size: 12px;
  color: var(--ink-faint);
}

.chart-open-link {
  text-decoration: none;
  white-space: nowrap;
}

.chart-stage {
  height: clamp(440px, calc(100vh - 340px), 880px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
}

.chart-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

html[data-pnl="tw"] {
  --pnl-up: var(--down);
  --pnl-down: var(--up);
  --pnl-up-on-dark: var(--loss-on-dark);
  --pnl-down-on-dark: var(--gain-on-dark);
  --pnl-on-up: var(--on-loss);
  --pnl-on-down: var(--on-gain);
}

/* 紅漲綠跌：TradingView 小工具不接受顏色參數，轉 180 度色相把紅綠對調。黑、白、灰不受影響。 */
.chart-frame.is-tw-colors {
  filter: hue-rotate(180deg);
}

.chart-unavailable {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}

.chart-unavailable p {
  margin: 0;
  max-width: 420px;
  color: var(--ink-faint);
  font-size: 14px;
}

.chart-unavailable .secondary-button {
  text-decoration: none;
}

.chart-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
}

.chart-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin: 0;
}

.chart-add-form select,
.chart-add-form input {
  min-width: 0;
  color: var(--ink);
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font-size: 14px;
}

.chart-items {
  position: relative; /* renderChartList 用 offsetTop 把目前這檔捲到中間 */
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 高度跟圖表區對齊（圖表區 = clamp(440px, 100vh - 340px, 880px)，再加標題列與表單的高度） */
  max-height: clamp(360px, calc(100vh - 340px), 800px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.chart-item {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.chart-item.is-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand) inset;
}

.chart-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}

.chart-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chart-item-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.chart-item-market {
  font-size: 11px;
  color: var(--ink-faint);
}

.chart-item-name {
  font-size: 12px;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
}

.chart-tag-holding {
  background: var(--brand);
  color: var(--on-brass);
  border-color: var(--brand);
}

.chart-item-remove {
  flex: none;
  width: 34px;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 0 10px 10px 0;
}

.chart-item-remove:hover,
.chart-item-remove:focus-visible {
  color: var(--ink);
}

.chart-item-main:focus-visible,
.chart-item-remove:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

@media (max-width: 960px) {
  .chart-items {
    max-height: 320px;
  }
}

@media (max-width: 640px) {
  .page-content.is-wide {
    padding-left: 10px;
    padding-right: 10px;
  }
  .chart-add-form {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .chart-pane,
  .chart-list-card {
    padding: 12px;
  }
  .chart-stage {
    height: clamp(360px, 62vh, 520px);
  }
  .chart-pane-head {
    flex-wrap: wrap;
  }
}

/* ============================== 台股自建圖表（chart-lw.js） ============================== */

.twc {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.twc-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.twc-intervals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.twc-interval {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.twc-interval:hover {
  color: var(--ink);
}

.twc-interval.is-active {
  background: var(--brand);
  color: var(--on-brass);
}

.twc-interval:focus-visible,
.twc-retry:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.twc-status {
  font-size: 12px;
  color: var(--ink-faint);
}

.twc-status[data-tone="live"] {
  color: var(--up);
}

.twc-status[data-tone="warn"] {
  color: var(--down);
}

.twc-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 8px 12px 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-height: 24px;
}

.twc-name {
  font-size: 13px;
}

.twc-ohlc i {
  margin-right: 3px;
  font-style: normal;
  color: var(--ink-faint);
}

.twc-chart {
  position: relative;
  flex: 1;
  min-height: 0;
}

.twc-msg {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: var(--ink-faint);
  background: var(--card);
}

.twc-retry {
  padding: 6px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}

/* ============================== 新手教學 ============================== */

.topbar-tutorial {
  position: relative;
  width: 34px;
  height: 34px;
}

.tutorial-unread-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--down);
  border: 2px solid var(--card);
}

.topbar-tutorial.has-unseen {
  color: var(--brand);
  border-color: var(--brand);
}

.tutorial-modal-card {
  max-width: 760px;
}

.tutorial-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tutorial-lead {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.tut-step {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
}

.tut-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.tut-step-head h3 {
  margin: 0;
  font-size: 16px;
}

.tut-step-no {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brass);
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tut-points {
  margin: 0 0 12px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}

.tut-figure-wrap {
  margin: 4px 0 12px;
}

.tut-figure {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* 箭頭與標籤用固定的醒目橘紅：日場夜場都看得到，不跟主題色走 */
.tut-hl {
  fill: none;
  stroke: #e4572e;
  stroke-width: 3;
}

.tut-arrow {
  stroke: #e4572e;
  stroke-width: 3;
  stroke-linecap: round;
}

.tut-head {
  fill: #e4572e;
}

.tut-chip {
  fill: #e4572e;
}

.tut-chip-text {
  fill: #fff;
  font-size: 15px;
  font-weight: 700;
}

.tut-go {
  font-size: 13px;
}

.tut-author {
  padding: 14px 18px;
  border-left: 4px solid var(--brand);
  border-radius: 0 12px 12px 0;
  background: var(--bg-soft);
}

.tut-author h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--brand);
}

.tut-author p {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink);
}

.tut-author .tut-author-sign {
  margin: 0;
  text-align: right;
  color: var(--ink-soft);
}

.tut-badge {
  fill: #fff;
}

.tut-badge-text {
  fill: #e4572e;
  font-weight: 800;
}

.tut-note {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* 圖上的編號與說明清單一一對應 */
.tut-numbered {
  list-style: none;
  padding-left: 0;
  counter-reset: tutno;
}

.tut-numbered > li {
  counter-increment: tutno;
  position: relative;
  padding-left: 28px;
}

.tut-numbered > li::before {
  content: counter(tutno);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e4572e;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tut-figure-wrap {
  overflow-x: auto;
}

/* 章節跳轉列：捲動時固定在教學視窗頂端 */
.tut-jump {
  position: sticky;
  top: -1px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.tut-jump-btn {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.tut-jump-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.tut-step {
  scroll-margin-top: 56px;
}

@media (max-width: 640px) {
  /* 手機上章節列改成單列橫向滑動，不要占掉兩排高度 */
  .tut-jump {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tut-jump-btn {
    flex: none;
  }
}

@media (max-width: 640px) {
  .tut-step {
    padding: 14px;
  }
}


/* 註冊／忘記密碼：驗證碼輸入框加「寄送驗證碼」按鈕 */
.auth-code-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.auth-code-row input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: monospace;
  letter-spacing: 3px;
  text-align: center;
}

.auth-code-row .auth-send-code {
  flex: none;
  white-space: nowrap;
}

/* ============================== 戰友投票 ============================== */

.poll-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 投票頁頁首：說明文字吃剩下的寬度（窄螢幕自己換行），金幣與建立按鈕固定靠右，不被擠到下一行 */
.poll-head-text {
  flex: 1 1 360px;
  min-width: 0;
}

.poll-head-actions {
  flex: none;
}

.poll-kind-tabs {
  margin-bottom: 14px;
}

.poll-coin {
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.poll-rules {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  font-size: 13.5px;
  line-height: 1.7;
}

.poll-rules summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--brand);
}

.poll-rules ol {
  margin: 8px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.poll-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.poll-section-title {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.poll-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.poll-card.is-ended {
  opacity: 0.88;
}

.poll-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.poll-card-head h3 {
  margin: 0;
  flex: 1 1 220px;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.poll-manage {
  display: flex;
  gap: 6px;
}

.poll-mini {
  font-size: 12.5px;
  padding: 5px 12px;
}

.poll-mini.is-danger {
  color: var(--down);
  border-color: var(--down);
}

.poll-note,
.poll-condition,
.poll-result {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.poll-condition {
  color: var(--ink);
}

.poll-result {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--ink);
}

.poll-meta {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.6;
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poll-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.poll-option:disabled {
  cursor: default;
}

.poll-option.is-mine {
  border-color: var(--brand);
  font-weight: 700;
}

.poll-option-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  pointer-events: none;
  transition: width 0.3s ease;
}

.poll-option-label,
.poll-option-count {
  position: relative;
}

.poll-option-count {
  flex: none;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.poll-state {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-soft);
  color: var(--ink-soft);
}

.poll-state.is-open {
  background: color-mix(in srgb, var(--up) 16%, transparent);
  color: var(--up);
}

.poll-state.is-void {
  color: var(--down);
}

.poll-sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
}

.poll-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
}

.poll-side.is-yes {
  border-left: 4px solid var(--up);
}

.poll-side.is-no {
  border-left: 4px solid var(--down);
}

.poll-side.is-mine {
  outline: 2px solid var(--brand);
}

.poll-side.is-winner {
  background: color-mix(in srgb, var(--brand) 14%, var(--bg-soft));
}

.poll-side-label {
  font-size: 14px;
}

.poll-side-total {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.poll-side-sub,
.poll-side-note {
  font-size: 12px;
  color: var(--ink-soft);
}

.poll-side-mine {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
}

.poll-side .poll-mini {
  align-self: flex-start;
  margin-top: 4px;
}

.poll-pool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  text-align: center;
}

.poll-pool small {
  font-size: 11px;
  color: var(--ink-faint);
}

.poll-pool strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.poll-bet-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--brand);
  border-radius: 12px;
}

.poll-bet-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
}

.poll-bet-form input {
  width: 130px;
}

.poll-chips {
  display: flex;
  gap: 6px;
}

.poll-bet-hint {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--ink-faint);
}

.poll-create-card {
  max-width: 520px;
}

.poll-create-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.poll-create-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

.poll-direction {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.poll-direction label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.poll-opt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poll-opt-title {
  font-size: 13px;
  font-weight: 600;
}

#pollOptRows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.poll-opt-row {
  display: flex;
  gap: 6px;
}

.poll-opt-row input {
  flex: 1;
}

.poll-create-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.poll-create-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .poll-sides {
    grid-template-columns: 1fr;
  }

  .poll-pool {
    flex-direction: row;
    gap: 8px;
    padding: 2px 0;
  }

  .poll-bet-form input {
    width: 100%;
  }
}

/* 戰友交流的分頁籤（聊天室、心願清單池、BUG 清單）窄螢幕放不下一排：改成可橫向滑動，指示器跟著內容一起捲 */
@media (max-width: 640px) {
  .community-tabs {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .community-tabs .filter-tab {
    flex: none;
    white-space: nowrap;
  }
}

/* ===================== 新版本提示條 =====================
   app.js 偵測到後端換版時出現在畫面上方；倒數結束自動重整，使用者也可以按「立即更新」或「稍後」。 */
.update-banner {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  max-width: min(92vw, 520px);
  z-index: 210;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 18px;
  background: var(--nav);
  color: var(--nav-ink);
  font-size: 13.5px;
  line-height: 1.45;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}

.update-banner button {
  font: inherit;
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--brass);
  color: var(--on-brass);
}

.update-banner button.update-banner-later {
  background: transparent;
  color: inherit;
  border-color: currentColor;
  opacity: 0.85;
}

.update-banner button:focus-visible {
  outline: 2px solid var(--on-brass);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .update-banner { animation: update-banner-in var(--dur-2) var(--ease-out); }
}

@keyframes update-banner-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* 持倉清單上方的資產分佈比重長條（沿用 .alloc-bar-wrap／.alloc-legend） */
.holdings-alloc {
  padding: 4px 4px 0;
}
.holdings-alloc .alloc-legend {
  margin-bottom: 14px;
}

/* 目標比例與再平衡建議（持倉清單） */
.rebalance-panel { padding: 4px 4px 16px; }
.rebalance-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; }
.rebalance-sum { margin-right: auto; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rebalance-sum.is-warn { color: var(--warn); }
.rebalance-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rebalance-table th, .rebalance-table td { padding: 6px 8px; text-align: left; font-variant-numeric: tabular-nums; }
.rebalance-input { width: 80px; padding: 4px 8px; font: inherit; color: var(--ink); background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.rebalance-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }

/* 排行榜：獎盃獨立一行，放在名字下方 */
.lb-trophy-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.podium-card .lb-trophy-line { justify-content: center; }
.lb-player-cell .lb-trophy-line { padding-left: 32px; }

/* ============ 名牌特效（榮譽殿堂兌換，排行榜名字上顯示） ============
   套在 .player-name-button（排行榜）或 .fx-preview（商城預覽）上，
   只作用在名字文字（.fx-text 與 strong），不動稱號徽章、備註的小字與 @帳號，也不加底框。
   顏色依主題調整：日場／輕鬆競賽（淺色底）用較深的飽和色，夜場（深色底）用亮色。 */
.fx-fx_gold    { --fx1: #8a5a00; --fx2: #c98f00; --fx3: #f2c230; --fx-glow: transparent; }
.fx-fx_neon    { --fx1: #0e7490; --fx2: #0891b2; --fx3: #22d3ee; --fx-glow: rgba(14, 165, 233, 0.45); }
.fx-fx_flame   { --fx1: #c2300a; --fx2: #e8590c; --fx3: #f59e0b; --fx-glow: rgba(234, 88, 12, 0.35); }
.fx-fx_aurora  { --fx1: #059669; --fx2: #0284c7; --fx3: #7c3aed; --fx4: #db2777; --fx-glow: transparent; }
.fx-fx_frost   { --fx1: #1d6fa5; --fx2: #3b9be0; --fx3: #7cc4f5; --fx-glow: rgba(59, 155, 224, 0.4); }
html[data-theme="studio"] .fx-fx_gold   { --fx1: #b8860b; --fx2: #ffd76a; --fx3: #fff6c8; }
html[data-theme="studio"] .fx-fx_neon   { --fx1: #b9fbff; --fx2: #5ee7ff; --fx3: #22d3ee; --fx-glow: #0ea5e9; }
html[data-theme="studio"] .fx-fx_flame  { --fx1: #ff3d00; --fx2: #ff8a00; --fx3: #ffd24a; --fx-glow: rgba(255, 90, 0, 0.65); }
html[data-theme="studio"] .fx-fx_aurora { --fx1: #34d399; --fx2: #38bdf8; --fx3: #a78bfa; --fx4: #f472b6; }
html[data-theme="studio"] .fx-fx_frost  { --fx1: #4aa8e8; --fx2: #8fd8ff; --fx3: #e0f7ff; --fx-glow: rgba(150, 220, 255, 0.8); }

.fx-fx_frost .fx-text, .fx-fx_frost strong,
.fx-fx_neon .fx-text, .fx-fx_neon strong,
.fx-fx_gold .fx-text, .fx-fx_gold strong,
.fx-fx_flame .fx-text, .fx-fx_flame strong,
.fx-fx_aurora .fx-text, .fx-fx_aurora strong,
.fx-preview .fx-text {
  font-weight: 800;
}
.fx-preview { margin: 10px 0 4px; font-size: 20px; padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); text-align: center; }

/* 流金：金色漸層，光澤橫向掃過 */
.fx-fx_gold .fx-text, .fx-fx_gold strong {
  background: linear-gradient(100deg, var(--fx1) 0%, var(--fx2) 30%, var(--fx3) 48%, var(--fx2) 66%, var(--fx1) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: fx-sheen 3.2s linear infinite;
}
@keyframes fx-sheen { from { background-position: 120% 0; } to { background-position: -100% 0; } }

/* 霓虹：青藍發光，呼吸般明滅 */
.fx-fx_neon .fx-text, .fx-fx_neon strong {
  color: var(--fx1); -webkit-text-fill-color: var(--fx1);
  text-shadow: 0 0 4px var(--fx-glow), 0 0 10px var(--fx-glow);
  animation: fx-neon 2.4s ease-in-out infinite;
}
@keyframes fx-neon {
  0%, 100% { text-shadow: 0 0 4px var(--fx-glow), 0 0 10px var(--fx-glow); }
  50% { text-shadow: 0 0 2px var(--fx-glow), 0 0 5px var(--fx-glow); }
}

/* 烈焰：橘紅漸層，火光閃動 */
.fx-fx_flame .fx-text, .fx-fx_flame strong {
  background: linear-gradient(0deg, var(--fx1) 0%, var(--fx2) 45%, var(--fx3) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 4px var(--fx-glow));
  animation: fx-flicker 1.6s ease-in-out infinite;
}
@keyframes fx-flicker {
  0%, 100% { filter: drop-shadow(0 0 4px var(--fx-glow)); }
  35% { filter: drop-shadow(0 -1px 7px var(--fx-glow)); }
  70% { filter: drop-shadow(0 0 3px var(--fx-glow)); }
}

/* 極光：四色流動 */
.fx-fx_aurora .fx-text, .fx-fx_aurora strong {
  background: linear-gradient(90deg, var(--fx1), var(--fx2), var(--fx3), var(--fx4), var(--fx1));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: fx-aurora 6s linear infinite;
}
@keyframes fx-aurora { from { background-position: 0 0; } to { background-position: 300% 0; } }

/* 冰晶：冰藍漸層，邊緣光點閃爍 */
.fx-fx_frost .fx-text, .fx-fx_frost strong {
  background: linear-gradient(180deg, var(--fx3) 0%, var(--fx2) 55%, var(--fx1) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 2px var(--fx-glow));
  animation: fx-frost 2.8s ease-in-out infinite;
}
@keyframes fx-frost {
  0%, 100% { filter: drop-shadow(0 0 2px var(--fx-glow)); }
  50% { filter: drop-shadow(0 0 6px var(--fx-glow)); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-fx_gold .fx-text, .fx-fx_gold strong, .fx-fx_neon .fx-text, .fx-fx_neon strong,
  .fx-fx_flame .fx-text, .fx-fx_flame strong, .fx-fx_aurora .fx-text, .fx-fx_aurora strong,
  .fx-fx_frost .fx-text, .fx-fx_frost strong { animation: none; }
}

/* CARDS:START — 名片背景：排行榜整列／領獎台卡片
   榮譽殿堂五張（sakura/leek/chip/gold/rocket，Grok image_gen 生成）；本期自動款式見下方 PERIODFX 區塊（Colab 生成）。
   插畫在 web/public/cards/*.webp，主體在右端、左側留白。
   上面疊一層 CSS 動畫特效；左側加一層與卡片底色相同的漸層遮罩，確保列上文字清楚。
   排名表整列與領獎台卡片：插畫滿版（cover）；窄螢幕的清單卡也是滿版，卡片大小與沒裝備名片的人相同。 */
.fx-row-sakura { --fxc: #f06292; --fx-img: radial-gradient(ellipse 5px 3px at 18px 12px, rgba(255,150,185,0.9) 62%, transparent 72%), radial-gradient(ellipse 4px 2.6px at 70px 30px, rgba(255,150,185,0.85) 62%, transparent 72%), radial-gradient(ellipse 5px 3px at 102px 8px, rgba(255,150,185,0.85) 62%, transparent 72%), radial-gradient(ellipse 4.5px 2.8px at 40px 58px, rgba(255,150,185,0.9) 62%, transparent 72%), radial-gradient(ellipse 5px 3px at 92px 72px, rgba(255,150,185,0.85) 62%, transparent 72%), radial-gradient(ellipse 4px 2.6px at 10px 80px, rgba(255,150,185,0.8) 62%, transparent 72%), radial-gradient(ellipse 3.6px 2.4px at 60px 84px, rgba(255,150,185,0.75) 62%, transparent 72%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/sakura.webp); --fx-rep: repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat; --fx-sz: 120px 90px, 120px 90px, 120px 90px, 120px 90px, 120px 90px, 120px 90px, 120px 90px, 100% 100%, cover; --fx-pos: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, right center; --fx-sz-to: 120px 90px, 120px 90px, 120px 90px, 120px 90px, 120px 90px, 120px 90px, 120px 90px, 100% 100%, cover; --fx-pos-to: -120px 90px, -120px 90px, -120px 90px, -120px 90px, -120px 90px, -120px 90px, -120px 90px, 0 0, right center; animation: fx-card-sakura 16s linear infinite !important; }
.fx-row-chip { --fxc: #06b6d4; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(130,255,255,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(120,255,255,.26) 0%, rgba(120,255,255,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/chip.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 46% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-card-chip 7s alternate linear infinite !important; }
.fx-row-rocket { --fxc: #3b82f6; --fx-img: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.34) 55%, rgba(255,255,255,0)), linear-gradient(90deg, rgba(255,255,255,0), rgba(190,220,255,.3) 55%, rgba(255,255,255,0)), linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28) 55%, rgba(255,255,255,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/rocket.webp); --fx-rep: repeat-x, repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 260px 2px, 340px 2px, 200px 2px, 100% 100%, cover; --fx-pos: 0 24%, 0 52%, 0 80%, 0 0, right center; --fx-sz-to: 260px 2px, 340px 2px, 200px 2px, 100% 100%, cover; --fx-pos-to: -260px 24%, -340px 52%, -200px 80%, 0 0, right center; animation: fx-card-rocket 3s linear infinite !important; }
.fx-row-leek { --fxc: #43a047; --fx-img: radial-gradient(circle, rgba(220,255,160,.55) 0 2px, transparent 3px), radial-gradient(circle, rgba(255,255,255,.5) 0 1.5px, transparent 2.5px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/leek.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-card-leek 14s linear infinite !important; }
.fx-row-gold { --fxc: #e0a100; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,246,200,.26) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,250,210,.5) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/gold.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-card-gold 9s linear infinite !important; }

@keyframes fx-card-sakura {
  from { background-position: var(--fx-pos); background-size: var(--fx-sz); }
  to   { background-position: var(--fx-pos-to); background-size: var(--fx-sz-to); }
}
@keyframes fx-card-chip {
  from { background-position: var(--fx-pos); background-size: var(--fx-sz); }
  to   { background-position: var(--fx-pos-to); background-size: var(--fx-sz-to); }
}
@keyframes fx-card-rocket {
  from { background-position: var(--fx-pos); background-size: var(--fx-sz); }
  to   { background-position: var(--fx-pos-to); background-size: var(--fx-sz-to); }
}
@keyframes fx-card-leek {
  from { background-position: var(--fx-pos); background-size: var(--fx-sz); }
  to   { background-position: var(--fx-pos-to); background-size: var(--fx-sz-to); }
}
@keyframes fx-card-gold {
  from { background-position: var(--fx-pos); background-size: var(--fx-sz); }
  to   { background-position: var(--fx-pos-to); background-size: var(--fx-sz-to); }
}

tr.fx-row,
.leaderboard-table-wrap tbody tr.fx-row,
div.fx-row-preview,
.podium-card.fx-row,
html[data-theme] .podium-card.fx-row {
  background-color: color-mix(in srgb, var(--fxc) 8%, var(--card));
  background-image: var(--fx-img);
  background-size: var(--fx-sz);
  background-position: var(--fx-pos);
  background-repeat: var(--fx-rep);
}
@media (prefers-reduced-motion: reduce) {
  .fx-row-sakura, .fx-row-chip, .fx-row-rocket, .fx-row-leek, .fx-row-gold { animation: none !important; }
}

tr.fx-row > td,
.leaderboard-table-wrap tbody tr.fx-row > td { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fxc) 40%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--fxc) 40%, transparent); }
tr.fx-row > td:first-child,
.leaderboard-table-wrap tbody tr.fx-row > td:first-child { box-shadow: inset 6px 0 0 var(--fxc), inset 0 1px 0 color-mix(in srgb, var(--fxc) 40%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--fxc) 40%, transparent); }

/* 領獎台卡片：插畫滿版（cover），主體在右端；卡片大小與沒裝備名片時相同 */
.podium-card.fx-row { isolation: isolate; overflow: hidden; }
.podium-card.fx-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--card) 84%, transparent) 0%, color-mix(in srgb, var(--card) 72%, transparent) 55%, color-mix(in srgb, var(--card) 22%, transparent) 100%);
}
.podium-card.fx-row,
html[data-theme] .podium-card.fx-row {
  position: relative;
  border-color: var(--fxc);
  box-shadow: 0 0 0 1px var(--fxc), 0 6px 18px color-mix(in srgb, var(--fxc) 22%, transparent);
}

/* 商城預覽：用 div 模擬一列 */
div.fx-row-preview {
  margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; font-size: 14px; text-align: left; color: var(--ink); border: 0; min-height: 84px;
  box-shadow: inset 6px 0 0 var(--fxc), inset 0 1px 0 color-mix(in srgb, var(--fxc) 40%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--fxc) 40%, transparent);
}

/* 窄螢幕：整列變成一張清單卡；大小與其他人相同，框線與左側色條畫在整列上 */
@media (max-width: 860px) {
  .leaderboard-table-wrap tbody tr.fx-row {
    box-shadow: inset 6px 0 0 var(--fxc), inset 0 1px 0 color-mix(in srgb, var(--fxc) 40%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--fxc) 40%, transparent);
  }
  .leaderboard-table-wrap tbody tr.fx-row > td,
  .leaderboard-table-wrap tbody tr.fx-row > td:first-child { box-shadow: none; }
}
/* PERIODFX:START — 本期自動稱號的名牌與名片（tools/cards/gen_period_css.py 產生，勿手改）。不進商城。 */
.fx-park { --fx1: color-mix(in srgb, #6b4f2a 82%, black); --fx2: color-mix(in srgb, #8d6b3e 82%, black); --fx3: color-mix(in srgb, #c4a574 82%, black); --fx-glow: color-mix(in srgb, #8d6b3e 40%, transparent); }
html[data-theme="studio"] .fx-park { --fx1: color-mix(in srgb, #6b4f2a 62%, white); --fx2: color-mix(in srgb, #8d6b3e 62%, white); --fx3: color-mix(in srgb, #c4a574 62%, white); --fx-glow: color-mix(in srgb, #8d6b3e 70%, transparent); }
.fx-mansion { --fx1: color-mix(in srgb, #8a5a00 82%, black); --fx2: color-mix(in srgb, #d4a017 82%, black); --fx3: color-mix(in srgb, #ffe08a 82%, black); --fx-glow: color-mix(in srgb, #d4a017 40%, transparent); }
html[data-theme="studio"] .fx-mansion { --fx1: color-mix(in srgb, #8a5a00 62%, white); --fx2: color-mix(in srgb, #d4a017 62%, white); --fx3: color-mix(in srgb, #ffe08a 62%, white); --fx-glow: color-mix(in srgb, #d4a017 70%, transparent); }
.fx-tentpark { --fx1: color-mix(in srgb, #4b5563 82%, black); --fx2: color-mix(in srgb, #6b7280 82%, black); --fx3: color-mix(in srgb, #cbd5e1 82%, black); --fx-glow: color-mix(in srgb, #6b7280 40%, transparent); }
html[data-theme="studio"] .fx-tentpark { --fx1: color-mix(in srgb, #4b5563 62%, white); --fx2: color-mix(in srgb, #6b7280 62%, white); --fx3: color-mix(in srgb, #cbd5e1 62%, white); --fx-glow: color-mix(in srgb, #6b7280 70%, transparent); }
.fx-penthouse { --fx1: color-mix(in srgb, #0e7490 82%, black); --fx2: color-mix(in srgb, #22d3ee 82%, black); --fx3: color-mix(in srgb, #fbbf24 82%, black); --fx-glow: color-mix(in srgb, #22d3ee 40%, transparent); }
html[data-theme="studio"] .fx-penthouse { --fx1: color-mix(in srgb, #0e7490 62%, white); --fx2: color-mix(in srgb, #22d3ee 62%, white); --fx3: color-mix(in srgb, #fbbf24 62%, white); --fx-glow: color-mix(in srgb, #22d3ee 70%, transparent); }
.fx-rainruin { --fx1: color-mix(in srgb, #312e81 82%, black); --fx2: color-mix(in srgb, #6366f1 82%, black); --fx3: color-mix(in srgb, #94a3b8 82%, black); --fx-glow: color-mix(in srgb, #6366f1 40%, transparent); }
html[data-theme="studio"] .fx-rainruin { --fx1: color-mix(in srgb, #312e81 62%, white); --fx2: color-mix(in srgb, #6366f1 62%, white); --fx3: color-mix(in srgb, #94a3b8 62%, white); --fx-glow: color-mix(in srgb, #6366f1 70%, transparent); }
.fx-goldestate { --fx1: color-mix(in srgb, #92400e 82%, black); --fx2: color-mix(in srgb, #f59e0b 82%, black); --fx3: color-mix(in srgb, #fde68a 82%, black); --fx-glow: color-mix(in srgb, #f59e0b 40%, transparent); }
html[data-theme="studio"] .fx-goldestate { --fx1: color-mix(in srgb, #92400e 62%, white); --fx2: color-mix(in srgb, #f59e0b 62%, white); --fx3: color-mix(in srgb, #fde68a 62%, white); --fx-glow: color-mix(in srgb, #f59e0b 70%, transparent); }
.fx-weekrocket { --fx1: color-mix(in srgb, #e11d48 82%, black); --fx2: color-mix(in srgb, #f59e0b 82%, black); --fx3: color-mix(in srgb, #7c3aed 82%, black); --fx-glow: color-mix(in srgb, #f59e0b 40%, transparent); }
html[data-theme="studio"] .fx-weekrocket { --fx1: color-mix(in srgb, #e11d48 62%, white); --fx2: color-mix(in srgb, #f59e0b 62%, white); --fx3: color-mix(in srgb, #7c3aed 62%, white); --fx-glow: color-mix(in srgb, #f59e0b 70%, transparent); }
.fx-retirenow { --fx1: color-mix(in srgb, #b45309 82%, black); --fx2: color-mix(in srgb, #f59e0b 82%, black); --fx3: color-mix(in srgb, #fcd34d 82%, black); --fx-glow: color-mix(in srgb, #f59e0b 40%, transparent); }
html[data-theme="studio"] .fx-retirenow { --fx1: color-mix(in srgb, #b45309 62%, white); --fx2: color-mix(in srgb, #f59e0b 62%, white); --fx3: color-mix(in srgb, #fcd34d 62%, white); --fx-glow: color-mix(in srgb, #f59e0b 70%, transparent); }
.fx-weekgod { --fx1: color-mix(in srgb, #a16207 82%, black); --fx2: color-mix(in srgb, #eab308 82%, black); --fx3: color-mix(in srgb, #fde68a 82%, black); --fx-glow: color-mix(in srgb, #eab308 40%, transparent); }
html[data-theme="studio"] .fx-weekgod { --fx1: color-mix(in srgb, #a16207 62%, white); --fx2: color-mix(in srgb, #eab308 62%, white); --fx3: color-mix(in srgb, #fde68a 62%, white); --fx-glow: color-mix(in srgb, #eab308 70%, transparent); }
.fx-mumleek { --fx1: color-mix(in srgb, #4d7c0f 82%, black); --fx2: color-mix(in srgb, #84cc16 82%, black); --fx3: color-mix(in srgb, #6b5878 82%, black); --fx-glow: color-mix(in srgb, #84cc16 40%, transparent); }
html[data-theme="studio"] .fx-mumleek { --fx1: color-mix(in srgb, #4d7c0f 62%, white); --fx2: color-mix(in srgb, #84cc16 62%, white); --fx3: color-mix(in srgb, #6b5878 62%, white); --fx-glow: color-mix(in srgb, #84cc16 70%, transparent); }
.fx-monthdiamond { --fx1: color-mix(in srgb, #0891b2 82%, black); --fx2: color-mix(in srgb, #a78bfa 82%, black); --fx3: color-mix(in srgb, #67e8f9 82%, black); --fx-glow: color-mix(in srgb, #a78bfa 40%, transparent); }
html[data-theme="studio"] .fx-monthdiamond { --fx1: color-mix(in srgb, #0891b2 62%, white); --fx2: color-mix(in srgb, #a78bfa 62%, white); --fx3: color-mix(in srgb, #67e8f9 62%, white); --fx-glow: color-mix(in srgb, #a78bfa 70%, transparent); }
.fx-printgod { --fx1: color-mix(in srgb, #047857 82%, black); --fx2: color-mix(in srgb, #10b981 82%, black); --fx3: color-mix(in srgb, #facc15 82%, black); --fx-glow: color-mix(in srgb, #10b981 40%, transparent); }
html[data-theme="studio"] .fx-printgod { --fx1: color-mix(in srgb, #047857 62%, white); --fx2: color-mix(in srgb, #10b981 62%, white); --fx3: color-mix(in srgb, #facc15 62%, white); --fx-glow: color-mix(in srgb, #10b981 70%, transparent); }
.fx-parkdev { --fx1: color-mix(in srgb, #3e4c59 82%, black); --fx2: color-mix(in srgb, #64748b 82%, black); --fx3: color-mix(in srgb, #8fa399 82%, black); --fx-glow: color-mix(in srgb, #64748b 40%, transparent); }
html[data-theme="studio"] .fx-parkdev { --fx1: color-mix(in srgb, #3e4c59 62%, white); --fx2: color-mix(in srgb, #64748b 62%, white); --fx3: color-mix(in srgb, #8fa399 62%, white); --fx-glow: color-mix(in srgb, #64748b 70%, transparent); }
.fx-buffettking { --fx1: color-mix(in srgb, #9333ea 82%, black); --fx2: color-mix(in srgb, #db2777 82%, black); --fx3: color-mix(in srgb, #06b6d4 82%, black); --fx-glow: color-mix(in srgb, #db2777 40%, transparent); }
html[data-theme="studio"] .fx-buffettking { --fx1: color-mix(in srgb, #9333ea 62%, white); --fx2: color-mix(in srgb, #db2777 62%, white); --fx3: color-mix(in srgb, #06b6d4 62%, white); --fx-glow: color-mix(in srgb, #db2777 70%, transparent); }
.fx-yearlegend { --fx1: color-mix(in srgb, #c2410c 82%, black); --fx2: color-mix(in srgb, #f59e0b 82%, black); --fx3: color-mix(in srgb, #fde047 82%, black); --fx-glow: color-mix(in srgb, #f59e0b 40%, transparent); }
html[data-theme="studio"] .fx-yearlegend { --fx1: color-mix(in srgb, #c2410c 62%, white); --fx2: color-mix(in srgb, #f59e0b 62%, white); --fx3: color-mix(in srgb, #fde047 62%, white); --fx-glow: color-mix(in srgb, #f59e0b 70%, transparent); }
.fx-truegod { --fx1: color-mix(in srgb, #c2410c 82%, black); --fx2: color-mix(in srgb, #f97316 82%, black); --fx3: color-mix(in srgb, #fbbf24 82%, black); --fx-glow: color-mix(in srgb, #f97316 40%, transparent); }
html[data-theme="studio"] .fx-truegod { --fx1: color-mix(in srgb, #c2410c 62%, white); --fx2: color-mix(in srgb, #f97316 62%, white); --fx3: color-mix(in srgb, #fbbf24 62%, white); --fx-glow: color-mix(in srgb, #f97316 70%, transparent); }
.fx-annualpanic { --fx1: color-mix(in srgb, #7f1d1d 82%, black); --fx2: color-mix(in srgb, #dc2626 82%, black); --fx3: color-mix(in srgb, #fca5a5 82%, black); --fx-glow: color-mix(in srgb, #dc2626 40%, transparent); }
html[data-theme="studio"] .fx-annualpanic { --fx1: color-mix(in srgb, #7f1d1d 62%, white); --fx2: color-mix(in srgb, #dc2626 62%, white); --fx3: color-mix(in srgb, #fca5a5 62%, white); --fx-glow: color-mix(in srgb, #dc2626 70%, transparent); }
.fx-leekascend { --fx1: color-mix(in srgb, #6d28d9 82%, black); --fx2: color-mix(in srgb, #8b5cf6 82%, black); --fx3: color-mix(in srgb, #65a30d 82%, black); --fx-glow: color-mix(in srgb, #8b5cf6 40%, transparent); }
html[data-theme="studio"] .fx-leekascend { --fx1: color-mix(in srgb, #6d28d9 62%, white); --fx2: color-mix(in srgb, #8b5cf6 62%, white); --fx3: color-mix(in srgb, #65a30d 62%, white); --fx-glow: color-mix(in srgb, #8b5cf6 70%, transparent); }
.fx-deepcore { --fx1: color-mix(in srgb, #7f1d1d 82%, black); --fx2: color-mix(in srgb, #b91c1c 82%, black); --fx3: color-mix(in srgb, #f97316 82%, black); --fx-glow: color-mix(in srgb, #b91c1c 40%, transparent); }
html[data-theme="studio"] .fx-deepcore { --fx1: color-mix(in srgb, #7f1d1d 62%, white); --fx2: color-mix(in srgb, #b91c1c 62%, white); --fx3: color-mix(in srgb, #f97316 62%, white); --fx-glow: color-mix(in srgb, #b91c1c 70%, transparent); }
.fx-lasttail { --fx1: color-mix(in srgb, #78502e 82%, black); --fx2: color-mix(in srgb, #a47148 82%, black); --fx3: color-mix(in srgb, #c4a574 82%, black); --fx-glow: color-mix(in srgb, #a47148 40%, transparent); }
html[data-theme="studio"] .fx-lasttail { --fx1: color-mix(in srgb, #78502e 62%, white); --fx2: color-mix(in srgb, #a47148 62%, white); --fx3: color-mix(in srgb, #c4a574 62%, white); --fx-glow: color-mix(in srgb, #a47148 70%, transparent); }
.fx-bottomboss { --fx1: color-mix(in srgb, #374151 82%, black); --fx2: color-mix(in srgb, #6b7280 82%, black); --fx3: color-mix(in srgb, #9ca3af 82%, black); --fx-glow: color-mix(in srgb, #6b7280 40%, transparent); }
html[data-theme="studio"] .fx-bottomboss { --fx1: color-mix(in srgb, #374151 62%, white); --fx2: color-mix(in srgb, #6b7280 62%, white); --fx3: color-mix(in srgb, #9ca3af 62%, white); --fx-glow: color-mix(in srgb, #6b7280 70%, transparent); }
.fx-brokerdad { --fx1: color-mix(in srgb, #c2410c 82%, black); --fx2: color-mix(in srgb, #ea580c 82%, black); --fx3: color-mix(in srgb, #eab308 82%, black); --fx-glow: color-mix(in srgb, #ea580c 40%, transparent); }
html[data-theme="studio"] .fx-brokerdad { --fx1: color-mix(in srgb, #c2410c 62%, white); --fx2: color-mix(in srgb, #ea580c 62%, white); --fx3: color-mix(in srgb, #eab308 62%, white); --fx-glow: color-mix(in srgb, #ea580c 70%, transparent); }
.fx-tradegremlin { --fx1: color-mix(in srgb, #db2777 82%, black); --fx2: color-mix(in srgb, #ea580c 82%, black); --fx3: color-mix(in srgb, #7c3aed 82%, black); --fx-glow: color-mix(in srgb, #ea580c 40%, transparent); }
html[data-theme="studio"] .fx-tradegremlin { --fx1: color-mix(in srgb, #db2777 62%, white); --fx2: color-mix(in srgb, #ea580c 62%, white); --fx3: color-mix(in srgb, #7c3aed 62%, white); --fx-glow: color-mix(in srgb, #ea580c 70%, transparent); }
.fx-feeson { --fx1: color-mix(in srgb, #a16207 82%, black); --fx2: color-mix(in srgb, #ca8a04 82%, black); --fx3: color-mix(in srgb, #dc2626 82%, black); --fx-glow: color-mix(in srgb, #ca8a04 40%, transparent); }
html[data-theme="studio"] .fx-feeson { --fx1: color-mix(in srgb, #a16207 62%, white); --fx2: color-mix(in srgb, #ca8a04 62%, white); --fx3: color-mix(in srgb, #dc2626 62%, white); --fx-glow: color-mix(in srgb, #ca8a04 70%, transparent); }
.fx-surferrekt { --fx1: color-mix(in srgb, #0369a1 82%, black); --fx2: color-mix(in srgb, #0ea5e9 82%, black); --fx3: color-mix(in srgb, #f97316 82%, black); --fx-glow: color-mix(in srgb, #0ea5e9 40%, transparent); }
html[data-theme="studio"] .fx-surferrekt { --fx1: color-mix(in srgb, #0369a1 62%, white); --fx2: color-mix(in srgb, #0ea5e9 62%, white); --fx3: color-mix(in srgb, #f97316 62%, white); --fx-glow: color-mix(in srgb, #0ea5e9 70%, transparent); }
.fx-shortsniper { --fx1: color-mix(in srgb, #0d9488 82%, black); --fx2: color-mix(in srgb, #14b8a6 82%, black); --fx3: color-mix(in srgb, #db2777 82%, black); --fx-glow: color-mix(in srgb, #14b8a6 40%, transparent); }
html[data-theme="studio"] .fx-shortsniper { --fx1: color-mix(in srgb, #0d9488 62%, white); --fx2: color-mix(in srgb, #14b8a6 62%, white); --fx3: color-mix(in srgb, #db2777 62%, white); --fx-glow: color-mix(in srgb, #14b8a6 70%, transparent); }
.fx-sellwrong { --fx1: color-mix(in srgb, #15803d 82%, black); --fx2: color-mix(in srgb, #64748b 82%, black); --fx3: color-mix(in srgb, #dc2626 82%, black); --fx-glow: color-mix(in srgb, #64748b 40%, transparent); }
html[data-theme="studio"] .fx-sellwrong { --fx1: color-mix(in srgb, #15803d 62%, white); --fx2: color-mix(in srgb, #64748b 62%, white); --fx3: color-mix(in srgb, #dc2626 62%, white); --fx-glow: color-mix(in srgb, #64748b 70%, transparent); }
.fx-dumbvalley { --fx1: color-mix(in srgb, #475569 82%, black); --fx2: color-mix(in srgb, #64748b 82%, black); --fx3: color-mix(in srgb, #ef4444 82%, black); --fx-glow: color-mix(in srgb, #64748b 40%, transparent); }
html[data-theme="studio"] .fx-dumbvalley { --fx1: color-mix(in srgb, #475569 62%, white); --fx2: color-mix(in srgb, #64748b 62%, white); --fx3: color-mix(in srgb, #ef4444 62%, white); --fx-glow: color-mix(in srgb, #64748b 70%, transparent); }
.fx-lieflat { --fx1: color-mix(in srgb, #475f86 82%, black); --fx2: color-mix(in srgb, #6b88b8 82%, black); --fx3: color-mix(in srgb, #9bb0c9 82%, black); --fx-glow: color-mix(in srgb, #6b88b8 40%, transparent); }
html[data-theme="studio"] .fx-lieflat { --fx1: color-mix(in srgb, #475f86 62%, white); --fx2: color-mix(in srgb, #6b88b8 62%, white); --fx3: color-mix(in srgb, #9bb0c9 62%, white); --fx-glow: color-mix(in srgb, #6b88b8 70%, transparent); }
.fx-chillmonk { --fx1: color-mix(in srgb, #a16207 82%, black); --fx2: color-mix(in srgb, #ca8a04 82%, black); --fx3: color-mix(in srgb, #4d7c0f 82%, black); --fx-glow: color-mix(in srgb, #ca8a04 40%, transparent); }
html[data-theme="studio"] .fx-chillmonk { --fx1: color-mix(in srgb, #a16207 62%, white); --fx2: color-mix(in srgb, #ca8a04 62%, white); --fx3: color-mix(in srgb, #4d7c0f 62%, white); --fx-glow: color-mix(in srgb, #ca8a04 70%, transparent); }
.fx-sleepingcash { --fx1: color-mix(in srgb, #4338ca 82%, black); --fx2: color-mix(in srgb, #6366f1 82%, black); --fx3: color-mix(in srgb, #06b6d4 82%, black); --fx-glow: color-mix(in srgb, #6366f1 40%, transparent); }
html[data-theme="studio"] .fx-sleepingcash { --fx1: color-mix(in srgb, #4338ca 62%, white); --fx2: color-mix(in srgb, #6366f1 62%, white); --fx3: color-mix(in srgb, #06b6d4 62%, white); --fx-glow: color-mix(in srgb, #6366f1 70%, transparent); }
.fx-saltking { --fx1: color-mix(in srgb, #ea580c 82%, black); --fx2: color-mix(in srgb, #f59e0b 82%, black); --fx3: color-mix(in srgb, #dc2626 82%, black); --fx-glow: color-mix(in srgb, #f59e0b 40%, transparent); }
html[data-theme="studio"] .fx-saltking { --fx1: color-mix(in srgb, #ea580c 62%, white); --fx2: color-mix(in srgb, #f59e0b 62%, white); --fx3: color-mix(in srgb, #dc2626 62%, white); --fx-glow: color-mix(in srgb, #f59e0b 70%, transparent); }
.fx-lostsea { --fx1: color-mix(in srgb, #0369a1 82%, black); --fx2: color-mix(in srgb, #14b8a6 82%, black); --fx3: color-mix(in srgb, #7dd3fc 82%, black); --fx-glow: color-mix(in srgb, #14b8a6 40%, transparent); }
html[data-theme="studio"] .fx-lostsea { --fx1: color-mix(in srgb, #0369a1 62%, white); --fx2: color-mix(in srgb, #14b8a6 62%, white); --fx3: color-mix(in srgb, #7dd3fc 62%, white); --fx-glow: color-mix(in srgb, #14b8a6 70%, transparent); }
.fx-mediannpc { --fx1: color-mix(in srgb, #475569 82%, black); --fx2: color-mix(in srgb, #64748b 82%, black); --fx3: color-mix(in srgb, #94a3b8 82%, black); --fx-glow: color-mix(in srgb, #64748b 40%, transparent); }
html[data-theme="studio"] .fx-mediannpc { --fx1: color-mix(in srgb, #475569 62%, white); --fx2: color-mix(in srgb, #64748b 62%, white); --fx3: color-mix(in srgb, #94a3b8 62%, white); --fx-glow: color-mix(in srgb, #64748b 70%, transparent); }
.fx-bgnpc { --fx1: color-mix(in srgb, #6b7280 82%, black); --fx2: color-mix(in srgb, #9ca3af 82%, black); --fx3: color-mix(in srgb, #78716c 82%, black); --fx-glow: color-mix(in srgb, #9ca3af 40%, transparent); }
html[data-theme="studio"] .fx-bgnpc { --fx1: color-mix(in srgb, #6b7280 62%, white); --fx2: color-mix(in srgb, #9ca3af 62%, white); --fx3: color-mix(in srgb, #78716c 62%, white); --fx-glow: color-mix(in srgb, #9ca3af 70%, transparent); }
.fx-busyflat { --fx1: color-mix(in srgb, #ea580c 82%, black); --fx2: color-mix(in srgb, #f97316 82%, black); --fx3: color-mix(in srgb, #6366f1 82%, black); --fx-glow: color-mix(in srgb, #f97316 40%, transparent); }
html[data-theme="studio"] .fx-busyflat { --fx1: color-mix(in srgb, #ea580c 62%, white); --fx2: color-mix(in srgb, #f97316 62%, white); --fx3: color-mix(in srgb, #6366f1 62%, white); --fx-glow: color-mix(in srgb, #f97316 70%, transparent); }
.fx-profitgo { --fx1: color-mix(in srgb, #ca8a04 82%, black); --fx2: color-mix(in srgb, #db2777 82%, black); --fx3: color-mix(in srgb, #0891b2 82%, black); --fx-glow: color-mix(in srgb, #db2777 40%, transparent); }
html[data-theme="studio"] .fx-profitgo { --fx1: color-mix(in srgb, #ca8a04 62%, white); --fx2: color-mix(in srgb, #db2777 62%, white); --fx3: color-mix(in srgb, #0891b2 62%, white); --fx-glow: color-mix(in srgb, #db2777 70%, transparent); }
.fx-knifecatch { --fx1: color-mix(in srgb, #dc2626 82%, black); --fx2: color-mix(in srgb, #f97316 82%, black); --fx3: color-mix(in srgb, #fb7185 82%, black); --fx-glow: color-mix(in srgb, #f97316 40%, transparent); }
html[data-theme="studio"] .fx-knifecatch { --fx1: color-mix(in srgb, #dc2626 62%, white); --fx2: color-mix(in srgb, #f97316 62%, white); --fx3: color-mix(in srgb, #fb7185 62%, white); --fx-glow: color-mix(in srgb, #f97316 70%, transparent); }
.fx-paperrich { --fx1: color-mix(in srgb, #ca8a04 82%, black); --fx2: color-mix(in srgb, #16a34a 82%, black); --fx3: color-mix(in srgb, #eab308 82%, black); --fx-glow: color-mix(in srgb, #16a34a 40%, transparent); }
html[data-theme="studio"] .fx-paperrich { --fx1: color-mix(in srgb, #ca8a04 62%, white); --fx2: color-mix(in srgb, #16a34a 62%, white); --fx3: color-mix(in srgb, #eab308 62%, white); --fx-glow: color-mix(in srgb, #16a34a 70%, transparent); }
.fx-usdtwarrior { --fx1: color-mix(in srgb, #047857 82%, black); --fx2: color-mix(in srgb, #10b981 82%, black); --fx3: color-mix(in srgb, #34d399 82%, black); --fx-glow: color-mix(in srgb, #10b981 40%, transparent); }
html[data-theme="studio"] .fx-usdtwarrior { --fx1: color-mix(in srgb, #047857 62%, white); --fx2: color-mix(in srgb, #10b981 62%, white); --fx3: color-mix(in srgb, #34d399 62%, white); --fx-glow: color-mix(in srgb, #10b981 70%, transparent); }
.fx-cryptofd { --fx1: color-mix(in srgb, #0e7490 82%, black); --fx2: color-mix(in srgb, #0891b2 82%, black); --fx3: color-mix(in srgb, #6c7ea8 82%, black); --fx-glow: color-mix(in srgb, #0891b2 40%, transparent); }
html[data-theme="studio"] .fx-cryptofd { --fx1: color-mix(in srgb, #0e7490 62%, white); --fx2: color-mix(in srgb, #0891b2 62%, white); --fx3: color-mix(in srgb, #6c7ea8 62%, white); --fx-glow: color-mix(in srgb, #0891b2 70%, transparent); }
.fx-cryptojail { --fx1: color-mix(in srgb, #0891b2 82%, black); --fx2: color-mix(in srgb, #7c3aed 82%, black); --fx3: color-mix(in srgb, #db2777 82%, black); --fx-glow: color-mix(in srgb, #7c3aed 40%, transparent); }
html[data-theme="studio"] .fx-cryptojail { --fx1: color-mix(in srgb, #0891b2 62%, white); --fx2: color-mix(in srgb, #7c3aed 62%, white); --fx3: color-mix(in srgb, #db2777 62%, white); --fx-glow: color-mix(in srgb, #7c3aed 70%, transparent); }
.fx-nightowlus { --fx1: color-mix(in srgb, #4338ca 82%, black); --fx2: color-mix(in srgb, #6366f1 82%, black); --fx3: color-mix(in srgb, #e11d48 82%, black); --fx-glow: color-mix(in srgb, #6366f1 40%, transparent); }
html[data-theme="studio"] .fx-nightowlus { --fx1: color-mix(in srgb, #4338ca 62%, white); --fx2: color-mix(in srgb, #6366f1 62%, white); --fx3: color-mix(in srgb, #e11d48 62%, white); --fx-glow: color-mix(in srgb, #6366f1 70%, transparent); }
.fx-uswolf { --fx1: color-mix(in srgb, #2563eb 82%, black); --fx2: color-mix(in srgb, #7c3aed 82%, black); --fx3: color-mix(in srgb, #60a5fa 82%, black); --fx-glow: color-mix(in srgb, #7c3aed 40%, transparent); }
html[data-theme="studio"] .fx-uswolf { --fx1: color-mix(in srgb, #2563eb 62%, white); --fx2: color-mix(in srgb, #7c3aed 62%, white); --fx3: color-mix(in srgb, #60a5fa 62%, white); --fx-glow: color-mix(in srgb, #7c3aed 70%, transparent); }
.fx-twvalue { --fx1: color-mix(in srgb, #15803d 82%, black); --fx2: color-mix(in srgb, #0284c7 82%, black); --fx3: color-mix(in srgb, #22c55e 82%, black); --fx-glow: color-mix(in srgb, #0284c7 40%, transparent); }
html[data-theme="studio"] .fx-twvalue { --fx1: color-mix(in srgb, #15803d 62%, white); --fx2: color-mix(in srgb, #0284c7 62%, white); --fx3: color-mix(in srgb, #22c55e 62%, white); --fx-glow: color-mix(in srgb, #0284c7 70%, transparent); }
.fx-fundguard { --fx1: color-mix(in srgb, #15803d 82%, black); --fx2: color-mix(in srgb, #22c55e 82%, black); --fx3: color-mix(in srgb, #ca8a04 82%, black); --fx-glow: color-mix(in srgb, #22c55e 40%, transparent); }
html[data-theme="studio"] .fx-fundguard { --fx1: color-mix(in srgb, #15803d 62%, white); --fx2: color-mix(in srgb, #22c55e 62%, white); --fx3: color-mix(in srgb, #ca8a04 62%, white); --fx-glow: color-mix(in srgb, #22c55e 70%, transparent); }
.fx-etfmaster { --fx1: color-mix(in srgb, #b45309 82%, black); --fx2: color-mix(in srgb, #ca8a04 82%, black); --fx3: color-mix(in srgb, #eab308 82%, black); --fx-glow: color-mix(in srgb, #ca8a04 40%, transparent); }
html[data-theme="studio"] .fx-etfmaster { --fx1: color-mix(in srgb, #b45309 62%, white); --fx2: color-mix(in srgb, #ca8a04 62%, white); --fx3: color-mix(in srgb, #eab308 62%, white); --fx-glow: color-mix(in srgb, #ca8a04 70%, transparent); }
.fx-fundfish { --fx1: color-mix(in srgb, #b45309 82%, black); --fx2: color-mix(in srgb, #d97706 82%, black); --fx3: color-mix(in srgb, #64748b 82%, black); --fx-glow: color-mix(in srgb, #d97706 40%, transparent); }
html[data-theme="studio"] .fx-fundfish { --fx1: color-mix(in srgb, #b45309 62%, white); --fx2: color-mix(in srgb, #d97706 62%, white); --fx3: color-mix(in srgb, #64748b 62%, white); --fx-glow: color-mix(in srgb, #d97706 70%, transparent); }
.fx-teagent { --fx1: color-mix(in srgb, #9d174d 82%, black); --fx2: color-mix(in srgb, #db2777 82%, black); --fx3: color-mix(in srgb, #be185d 82%, black); --fx-glow: color-mix(in srgb, #db2777 40%, transparent); }
html[data-theme="studio"] .fx-teagent { --fx1: color-mix(in srgb, #9d174d 62%, white); --fx2: color-mix(in srgb, #db2777 62%, white); --fx3: color-mix(in srgb, #be185d 62%, white); --fx-glow: color-mix(in srgb, #db2777 70%, transparent); }
.fx-ukslow { --fx1: color-mix(in srgb, #7d2638 82%, black); --fx2: color-mix(in srgb, #3e7654 82%, black); --fx3: color-mix(in srgb, #a16207 82%, black); --fx-glow: color-mix(in srgb, #3e7654 40%, transparent); }
html[data-theme="studio"] .fx-ukslow { --fx1: color-mix(in srgb, #7d2638 62%, white); --fx2: color-mix(in srgb, #3e7654 62%, white); --fx3: color-mix(in srgb, #a16207 62%, white); --fx-glow: color-mix(in srgb, #3e7654 70%, transparent); }
.fx-uktour { --fx1: color-mix(in srgb, #475569 82%, black); --fx2: color-mix(in srgb, #64748b 82%, black); --fx3: color-mix(in srgb, #0369a1 82%, black); --fx-glow: color-mix(in srgb, #64748b 40%, transparent); }
html[data-theme="studio"] .fx-uktour { --fx1: color-mix(in srgb, #475569 62%, white); --fx2: color-mix(in srgb, #64748b 62%, white); --fx3: color-mix(in srgb, #0369a1 62%, white); --fx-glow: color-mix(in srgb, #64748b 70%, transparent); }
.fx-uninvestor { --fx1: color-mix(in srgb, #0891b2 82%, black); --fx2: color-mix(in srgb, #16a34a 82%, black); --fx3: color-mix(in srgb, #ea580c 82%, black); --fx-glow: color-mix(in srgb, #16a34a 40%, transparent); }
html[data-theme="studio"] .fx-uninvestor { --fx1: color-mix(in srgb, #0891b2 62%, white); --fx2: color-mix(in srgb, #16a34a 62%, white); --fx3: color-mix(in srgb, #ea580c 62%, white); --fx-glow: color-mix(in srgb, #16a34a 70%, transparent); }
.fx-eatdust { --fx1: color-mix(in srgb, #78716c 82%, black); --fx2: color-mix(in srgb, #a8a29e 82%, black); --fx3: color-mix(in srgb, #a16207 82%, black); --fx-glow: color-mix(in srgb, #a8a29e 40%, transparent); }
html[data-theme="studio"] .fx-eatdust { --fx1: color-mix(in srgb, #78716c 62%, white); --fx2: color-mix(in srgb, #a8a29e 62%, white); --fx3: color-mix(in srgb, #a16207 62%, white); --fx-glow: color-mix(in srgb, #a8a29e 70%, transparent); }
.fx-chillchamp { --fx1: color-mix(in srgb, #ca8a04 82%, black); --fx2: color-mix(in srgb, #ea580c 82%, black); --fx3: color-mix(in srgb, #eab308 82%, black); --fx-glow: color-mix(in srgb, #ea580c 40%, transparent); }
html[data-theme="studio"] .fx-chillchamp { --fx1: color-mix(in srgb, #ca8a04 62%, white); --fx2: color-mix(in srgb, #ea580c 62%, white); --fx3: color-mix(in srgb, #eab308 62%, white); --fx-glow: color-mix(in srgb, #ea580c 70%, transparent); }
.fx-crowncurse { --fx1: color-mix(in srgb, #b45309 82%, black); --fx2: color-mix(in srgb, #c2410c 82%, black); --fx3: color-mix(in srgb, #ca8a04 82%, black); --fx-glow: color-mix(in srgb, #c2410c 40%, transparent); }
html[data-theme="studio"] .fx-crowncurse { --fx1: color-mix(in srgb, #b45309 62%, white); --fx2: color-mix(in srgb, #c2410c 62%, white); --fx3: color-mix(in srgb, #ca8a04 62%, white); --fx-glow: color-mix(in srgb, #c2410c 70%, transparent); }
.fx-lonebet { --fx1: color-mix(in srgb, #3a0ca3 82%, black); --fx2: color-mix(in srgb, #7209b7 82%, black); --fx3: color-mix(in srgb, #f72585 82%, black); --fx-glow: color-mix(in srgb, #7209b7 40%, transparent); }
html[data-theme="studio"] .fx-lonebet { --fx1: color-mix(in srgb, #3a0ca3 62%, white); --fx2: color-mix(in srgb, #7209b7 62%, white); --fx3: color-mix(in srgb, #f72585 62%, white); --fx-glow: color-mix(in srgb, #7209b7 70%, transparent); }
.fx-onebagzz { --fx1: color-mix(in srgb, #475569 82%, black); --fx2: color-mix(in srgb, #64748b 82%, black); --fx3: color-mix(in srgb, #94a3b8 82%, black); --fx-glow: color-mix(in srgb, #64748b 40%, transparent); }
html[data-theme="studio"] .fx-onebagzz { --fx1: color-mix(in srgb, #475569 62%, white); --fx2: color-mix(in srgb, #64748b 62%, white); --fx3: color-mix(in srgb, #94a3b8 62%, white); --fx-glow: color-mix(in srgb, #64748b 70%, transparent); }
.fx-allinbro { --fx1: color-mix(in srgb, #e11d48 82%, black); --fx2: color-mix(in srgb, #f59e0b 82%, black); --fx3: color-mix(in srgb, #7c3aed 82%, black); --fx-glow: color-mix(in srgb, #f59e0b 40%, transparent); }
html[data-theme="studio"] .fx-allinbro { --fx1: color-mix(in srgb, #e11d48 62%, white); --fx2: color-mix(in srgb, #f59e0b 62%, white); --fx3: color-mix(in srgb, #7c3aed 62%, white); --fx-glow: color-mix(in srgb, #f59e0b 70%, transparent); }
.fx-whaledead { --fx1: color-mix(in srgb, #164e63 82%, black); --fx2: color-mix(in srgb, #0e7490 82%, black); --fx3: color-mix(in srgb, #5eead4 82%, black); --fx-glow: color-mix(in srgb, #0e7490 40%, transparent); }
html[data-theme="studio"] .fx-whaledead { --fx1: color-mix(in srgb, #164e63 62%, white); --fx2: color-mix(in srgb, #0e7490 62%, white); --fx3: color-mix(in srgb, #5eead4 62%, white); --fx-glow: color-mix(in srgb, #0e7490 70%, transparent); }
.fx-spreadkid { --fx1: color-mix(in srgb, #0284c7 82%, black); --fx2: color-mix(in srgb, #06b6d4 82%, black); --fx3: color-mix(in srgb, #22d3ee 82%, black); --fx-glow: color-mix(in srgb, #06b6d4 40%, transparent); }
html[data-theme="studio"] .fx-spreadkid { --fx1: color-mix(in srgb, #0284c7 62%, white); --fx2: color-mix(in srgb, #06b6d4 62%, white); --fx3: color-mix(in srgb, #22d3ee 62%, white); --fx-glow: color-mix(in srgb, #06b6d4 70%, transparent); }
.fx-hotpotpos { --fx1: color-mix(in srgb, #9a3412 82%, black); --fx2: color-mix(in srgb, #c2410c 82%, black); --fx3: color-mix(in srgb, #ea580c 82%, black); --fx-glow: color-mix(in srgb, #c2410c 40%, transparent); }
html[data-theme="studio"] .fx-hotpotpos { --fx1: color-mix(in srgb, #9a3412 62%, white); --fx2: color-mix(in srgb, #c2410c 62%, white); --fx3: color-mix(in srgb, #ea580c 62%, white); --fx-glow: color-mix(in srgb, #c2410c 70%, transparent); }
.fx-buyonly { --fx1: color-mix(in srgb, #6d28d9 82%, black); --fx2: color-mix(in srgb, #8b5cf6 82%, black); --fx3: color-mix(in srgb, #64748b 82%, black); --fx-glow: color-mix(in srgb, #8b5cf6 40%, transparent); }
html[data-theme="studio"] .fx-buyonly { --fx1: color-mix(in srgb, #6d28d9 62%, white); --fx2: color-mix(in srgb, #8b5cf6 62%, white); --fx3: color-mix(in srgb, #64748b 62%, white); --fx-glow: color-mix(in srgb, #8b5cf6 70%, transparent); }
.fx-soldtoohigh { --fx1: color-mix(in srgb, #db2777 82%, black); --fx2: color-mix(in srgb, #ea580c 82%, black); --fx3: color-mix(in srgb, #eab308 82%, black); --fx-glow: color-mix(in srgb, #ea580c 40%, transparent); }
html[data-theme="studio"] .fx-soldtoohigh { --fx1: color-mix(in srgb, #db2777 62%, white); --fx2: color-mix(in srgb, #ea580c 62%, white); --fx3: color-mix(in srgb, #eab308 62%, white); --fx-glow: color-mix(in srgb, #ea580c 70%, transparent); }
.fx-herosunk { --fx1: color-mix(in srgb, #1e293b 82%, black); --fx2: color-mix(in srgb, #ca8a04 82%, black); --fx3: color-mix(in srgb, #64748b 82%, black); --fx-glow: color-mix(in srgb, #ca8a04 40%, transparent); }
html[data-theme="studio"] .fx-herosunk { --fx1: color-mix(in srgb, #1e293b 62%, white); --fx2: color-mix(in srgb, #ca8a04 62%, white); --fx3: color-mix(in srgb, #64748b 62%, white); --fx-glow: color-mix(in srgb, #ca8a04 70%, transparent); }
.fx-sellair { --fx1: color-mix(in srgb, #64748b 82%, black); --fx2: color-mix(in srgb, #94a3b8 82%, black); --fx3: color-mix(in srgb, #0ea5e9 82%, black); --fx-glow: color-mix(in srgb, #94a3b8 40%, transparent); }
html[data-theme="studio"] .fx-sellair { --fx1: color-mix(in srgb, #64748b 62%, white); --fx2: color-mix(in srgb, #94a3b8 62%, white); --fx3: color-mix(in srgb, #0ea5e9 62%, white); --fx-glow: color-mix(in srgb, #94a3b8 70%, transparent); }
.fx-floorcutter { --fx1: color-mix(in srgb, #374151 82%, black); --fx2: color-mix(in srgb, #6b7280 82%, black); --fx3: color-mix(in srgb, #dc2626 82%, black); --fx-glow: color-mix(in srgb, #6b7280 40%, transparent); }
html[data-theme="studio"] .fx-floorcutter { --fx1: color-mix(in srgb, #374151 62%, white); --fx2: color-mix(in srgb, #6b7280 62%, white); --fx3: color-mix(in srgb, #dc2626 62%, white); --fx-glow: color-mix(in srgb, #6b7280 70%, transparent); }
.fx-clickmonster { --fx1: color-mix(in srgb, #0d9488 82%, black); --fx2: color-mix(in srgb, #0284c7 82%, black); --fx3: color-mix(in srgb, #7c3aed 82%, black); --fx-glow: color-mix(in srgb, #0284c7 40%, transparent); }
html[data-theme="studio"] .fx-clickmonster { --fx1: color-mix(in srgb, #0d9488 62%, white); --fx2: color-mix(in srgb, #0284c7 62%, white); --fx3: color-mix(in srgb, #7c3aed 62%, white); --fx-glow: color-mix(in srgb, #0284c7 70%, transparent); }
.fx-zenallin { --fx1: color-mix(in srgb, #b45309 82%, black); --fx2: color-mix(in srgb, #d97706 82%, black); --fx3: color-mix(in srgb, #f59e0b 82%, black); --fx-glow: color-mix(in srgb, #d97706 40%, transparent); }
html[data-theme="studio"] .fx-zenallin { --fx1: color-mix(in srgb, #b45309 62%, white); --fx2: color-mix(in srgb, #d97706 62%, white); --fx3: color-mix(in srgb, #f59e0b 62%, white); --fx-glow: color-mix(in srgb, #d97706 70%, transparent); }
.fx-diyetf { --fx1: color-mix(in srgb, #047857 82%, black); --fx2: color-mix(in srgb, #10b981 82%, black); --fx3: color-mix(in srgb, #34d399 82%, black); --fx-glow: color-mix(in srgb, #10b981 40%, transparent); }
html[data-theme="studio"] .fx-diyetf { --fx1: color-mix(in srgb, #047857 62%, white); --fx2: color-mix(in srgb, #10b981 62%, white); --fx3: color-mix(in srgb, #34d399 62%, white); --fx-glow: color-mix(in srgb, #10b981 70%, transparent); }
.fx-neversell { --fx1: color-mix(in srgb, #0369a1 82%, black); --fx2: color-mix(in srgb, #0ea5e9 82%, black); --fx3: color-mix(in srgb, #7dd3fc 82%, black); --fx-glow: color-mix(in srgb, #0ea5e9 40%, transparent); }
html[data-theme="studio"] .fx-neversell { --fx1: color-mix(in srgb, #0369a1 62%, white); --fx2: color-mix(in srgb, #0ea5e9 62%, white); --fx3: color-mix(in srgb, #7dd3fc 62%, white); --fx-glow: color-mix(in srgb, #0ea5e9 70%, transparent); }
.fx-balancer { --fx1: color-mix(in srgb, #475569 82%, black); --fx2: color-mix(in srgb, #64748b 82%, black); --fx3: color-mix(in srgb, #0891b2 82%, black); --fx-glow: color-mix(in srgb, #64748b 40%, transparent); }
html[data-theme="studio"] .fx-balancer { --fx1: color-mix(in srgb, #475569 62%, white); --fx2: color-mix(in srgb, #64748b 62%, white); --fx3: color-mix(in srgb, #0891b2 62%, white); --fx-glow: color-mix(in srgb, #64748b 70%, transparent); }
.fx-flexgod { --fx1: color-mix(in srgb, #db2777 82%, black); --fx2: color-mix(in srgb, #8b5cf6 82%, black); --fx3: color-mix(in srgb, #3b82f6 82%, black); --fx-glow: color-mix(in srgb, #8b5cf6 40%, transparent); }
html[data-theme="studio"] .fx-flexgod { --fx1: color-mix(in srgb, #db2777 62%, white); --fx2: color-mix(in srgb, #8b5cf6 62%, white); --fx3: color-mix(in srgb, #3b82f6 62%, white); --fx-glow: color-mix(in srgb, #8b5cf6 70%, transparent); }
.fx-bentopro { --fx1: color-mix(in srgb, #c2410c 82%, black); --fx2: color-mix(in srgb, #ea580c 82%, black); --fx3: color-mix(in srgb, #f97316 82%, black); --fx-glow: color-mix(in srgb, #ea580c 40%, transparent); }
html[data-theme="studio"] .fx-bentopro { --fx1: color-mix(in srgb, #c2410c 62%, white); --fx2: color-mix(in srgb, #ea580c 62%, white); --fx3: color-mix(in srgb, #f97316 62%, white); --fx-glow: color-mix(in srgb, #ea580c 70%, transparent); }
.fx-secondbest { --fx1: color-mix(in srgb, #64748b 82%, black); --fx2: color-mix(in srgb, #94a3b8 82%, black); --fx3: color-mix(in srgb, #475569 82%, black); --fx-glow: color-mix(in srgb, #94a3b8 40%, transparent); }
html[data-theme="studio"] .fx-secondbest { --fx1: color-mix(in srgb, #64748b 62%, white); --fx2: color-mix(in srgb, #94a3b8 62%, white); --fx3: color-mix(in srgb, #475569 62%, white); --fx-glow: color-mix(in srgb, #94a3b8 70%, transparent); }
.fx-eversecond { --fx1: color-mix(in srgb, #475569 82%, black); --fx2: color-mix(in srgb, #94a3b8 82%, black); --fx3: color-mix(in srgb, #0ea5e9 82%, black); --fx-glow: color-mix(in srgb, #94a3b8 40%, transparent); }
html[data-theme="studio"] .fx-eversecond { --fx1: color-mix(in srgb, #475569 62%, white); --fx2: color-mix(in srgb, #94a3b8 62%, white); --fx3: color-mix(in srgb, #0ea5e9 62%, white); --fx-glow: color-mix(in srgb, #94a3b8 70%, transparent); }
.fx-rank2chill { --fx1: color-mix(in srgb, #64748b 82%, black); --fx2: color-mix(in srgb, #06b6d4 82%, black); --fx3: color-mix(in srgb, #7c3aed 82%, black); --fx-glow: color-mix(in srgb, #06b6d4 40%, transparent); }
html[data-theme="studio"] .fx-rank2chill { --fx1: color-mix(in srgb, #64748b 62%, white); --fx2: color-mix(in srgb, #06b6d4 62%, white); --fx3: color-mix(in srgb, #7c3aed 62%, white); --fx-glow: color-mix(in srgb, #06b6d4 70%, transparent); }
.fx-bronzeking { --fx1: color-mix(in srgb, #b45309 82%, black); --fx2: color-mix(in srgb, #d97706 82%, black); --fx3: color-mix(in srgb, #92400e 82%, black); --fx-glow: color-mix(in srgb, #d97706 40%, transparent); }
html[data-theme="studio"] .fx-bronzeking { --fx1: color-mix(in srgb, #b45309 62%, white); --fx2: color-mix(in srgb, #d97706 62%, white); --fx3: color-mix(in srgb, #92400e 62%, white); --fx-glow: color-mix(in srgb, #d97706 70%, transparent); }
.fx-thirdokay { --fx1: color-mix(in srgb, #b45309 82%, black); --fx2: color-mix(in srgb, #c2410c 82%, black); --fx3: color-mix(in srgb, #78350f 82%, black); --fx-glow: color-mix(in srgb, #c2410c 40%, transparent); }
html[data-theme="studio"] .fx-thirdokay { --fx1: color-mix(in srgb, #b45309 62%, white); --fx2: color-mix(in srgb, #c2410c 62%, white); --fx3: color-mix(in srgb, #78350f 62%, white); --fx-glow: color-mix(in srgb, #c2410c 70%, transparent); }
.fx-tanhua { --fx1: color-mix(in srgb, #c2410c 82%, black); --fx2: color-mix(in srgb, #f97316 82%, black); --fx3: color-mix(in srgb, #dc2626 82%, black); --fx-glow: color-mix(in srgb, #f97316 40%, transparent); }
html[data-theme="studio"] .fx-tanhua { --fx1: color-mix(in srgb, #c2410c 62%, white); --fx2: color-mix(in srgb, #f97316 62%, white); --fx3: color-mix(in srgb, #dc2626 62%, white); --fx-glow: color-mix(in srgb, #f97316 70%, transparent); }
.fx-blankfirst { --fx1: color-mix(in srgb, #a16207 82%, black); --fx2: color-mix(in srgb, #ca8a04 82%, black); --fx3: color-mix(in srgb, #78716c 82%, black); --fx-glow: color-mix(in srgb, #ca8a04 40%, transparent); }
html[data-theme="studio"] .fx-blankfirst { --fx1: color-mix(in srgb, #a16207 62%, white); --fx2: color-mix(in srgb, #ca8a04 62%, white); --fx3: color-mix(in srgb, #78716c 62%, white); --fx-glow: color-mix(in srgb, #ca8a04 70%, transparent); }
.fx-goodkarma { --fx1: color-mix(in srgb, #ca8a04 82%, black); --fx2: color-mix(in srgb, #eab308 82%, black); --fx3: color-mix(in srgb, #ea580c 82%, black); --fx-glow: color-mix(in srgb, #eab308 40%, transparent); }
html[data-theme="studio"] .fx-goodkarma { --fx1: color-mix(in srgb, #ca8a04 62%, white); --fx2: color-mix(in srgb, #eab308 62%, white); --fx3: color-mix(in srgb, #ea580c 62%, white); --fx-glow: color-mix(in srgb, #eab308 70%, transparent); }
.fx-zerohero { --fx1: color-mix(in srgb, #475569 82%, black); --fx2: color-mix(in srgb, #64748b 82%, black); --fx3: color-mix(in srgb, #0ea5e9 82%, black); --fx-glow: color-mix(in srgb, #64748b 40%, transparent); }
html[data-theme="studio"] .fx-zerohero { --fx1: color-mix(in srgb, #475569 62%, white); --fx2: color-mix(in srgb, #64748b 62%, white); --fx3: color-mix(in srgb, #0ea5e9 62%, white); --fx-glow: color-mix(in srgb, #64748b 70%, transparent); }
.fx-tenthedge { --fx1: color-mix(in srgb, #0891b2 82%, black); --fx2: color-mix(in srgb, #06b6d4 82%, black); --fx3: color-mix(in srgb, #7c3aed 82%, black); --fx-glow: color-mix(in srgb, #06b6d4 40%, transparent); }
html[data-theme="studio"] .fx-tenthedge { --fx1: color-mix(in srgb, #0891b2 62%, white); --fx2: color-mix(in srgb, #06b6d4 62%, white); --fx3: color-mix(in srgb, #7c3aed 62%, white); --fx-glow: color-mix(in srgb, #06b6d4 70%, transparent); }
.fx-justpassed { --fx1: color-mix(in srgb, #15803d 82%, black); --fx2: color-mix(in srgb, #22c55e 82%, black); --fx3: color-mix(in srgb, #16a34a 82%, black); --fx-glow: color-mix(in srgb, #22c55e 40%, transparent); }
html[data-theme="studio"] .fx-justpassed { --fx1: color-mix(in srgb, #15803d 62%, white); --fx2: color-mix(in srgb, #22c55e 62%, white); --fx3: color-mix(in srgb, #16a34a 62%, white); --fx-glow: color-mix(in srgb, #22c55e 70%, transparent); }
.fx-top10zen { --fx1: color-mix(in srgb, #16a34a 82%, black); --fx2: color-mix(in srgb, #0891b2 82%, black); --fx3: color-mix(in srgb, #8b5cf6 82%, black); --fx-glow: color-mix(in srgb, #0891b2 40%, transparent); }
html[data-theme="studio"] .fx-top10zen { --fx1: color-mix(in srgb, #16a34a 62%, white); --fx2: color-mix(in srgb, #0891b2 62%, white); --fx3: color-mix(in srgb, #8b5cf6 62%, white); --fx-glow: color-mix(in srgb, #0891b2 70%, transparent); }
.fx-park .fx-text, .fx-park strong,
.fx-mansion .fx-text, .fx-mansion strong,
.fx-tentpark .fx-text, .fx-tentpark strong,
.fx-penthouse .fx-text, .fx-penthouse strong,
.fx-rainruin .fx-text, .fx-rainruin strong,
.fx-goldestate .fx-text, .fx-goldestate strong,
.fx-weekrocket .fx-text, .fx-weekrocket strong,
.fx-retirenow .fx-text, .fx-retirenow strong,
.fx-weekgod .fx-text, .fx-weekgod strong,
.fx-mumleek .fx-text, .fx-mumleek strong,
.fx-monthdiamond .fx-text, .fx-monthdiamond strong,
.fx-printgod .fx-text, .fx-printgod strong,
.fx-parkdev .fx-text, .fx-parkdev strong,
.fx-buffettking .fx-text, .fx-buffettking strong,
.fx-yearlegend .fx-text, .fx-yearlegend strong,
.fx-truegod .fx-text, .fx-truegod strong,
.fx-annualpanic .fx-text, .fx-annualpanic strong,
.fx-leekascend .fx-text, .fx-leekascend strong,
.fx-deepcore .fx-text, .fx-deepcore strong,
.fx-lasttail .fx-text, .fx-lasttail strong,
.fx-bottomboss .fx-text, .fx-bottomboss strong,
.fx-brokerdad .fx-text, .fx-brokerdad strong,
.fx-tradegremlin .fx-text, .fx-tradegremlin strong,
.fx-feeson .fx-text, .fx-feeson strong,
.fx-surferrekt .fx-text, .fx-surferrekt strong,
.fx-shortsniper .fx-text, .fx-shortsniper strong,
.fx-sellwrong .fx-text, .fx-sellwrong strong,
.fx-dumbvalley .fx-text, .fx-dumbvalley strong,
.fx-lieflat .fx-text, .fx-lieflat strong,
.fx-chillmonk .fx-text, .fx-chillmonk strong,
.fx-sleepingcash .fx-text, .fx-sleepingcash strong,
.fx-saltking .fx-text, .fx-saltking strong,
.fx-lostsea .fx-text, .fx-lostsea strong,
.fx-mediannpc .fx-text, .fx-mediannpc strong,
.fx-bgnpc .fx-text, .fx-bgnpc strong,
.fx-busyflat .fx-text, .fx-busyflat strong,
.fx-profitgo .fx-text, .fx-profitgo strong,
.fx-knifecatch .fx-text, .fx-knifecatch strong,
.fx-paperrich .fx-text, .fx-paperrich strong,
.fx-usdtwarrior .fx-text, .fx-usdtwarrior strong,
.fx-cryptofd .fx-text, .fx-cryptofd strong,
.fx-cryptojail .fx-text, .fx-cryptojail strong,
.fx-nightowlus .fx-text, .fx-nightowlus strong,
.fx-uswolf .fx-text, .fx-uswolf strong,
.fx-twvalue .fx-text, .fx-twvalue strong,
.fx-fundguard .fx-text, .fx-fundguard strong,
.fx-etfmaster .fx-text, .fx-etfmaster strong,
.fx-fundfish .fx-text, .fx-fundfish strong,
.fx-teagent .fx-text, .fx-teagent strong,
.fx-ukslow .fx-text, .fx-ukslow strong,
.fx-uktour .fx-text, .fx-uktour strong,
.fx-uninvestor .fx-text, .fx-uninvestor strong,
.fx-eatdust .fx-text, .fx-eatdust strong,
.fx-chillchamp .fx-text, .fx-chillchamp strong,
.fx-crowncurse .fx-text, .fx-crowncurse strong,
.fx-lonebet .fx-text, .fx-lonebet strong,
.fx-onebagzz .fx-text, .fx-onebagzz strong,
.fx-allinbro .fx-text, .fx-allinbro strong,
.fx-whaledead .fx-text, .fx-whaledead strong,
.fx-spreadkid .fx-text, .fx-spreadkid strong,
.fx-hotpotpos .fx-text, .fx-hotpotpos strong,
.fx-buyonly .fx-text, .fx-buyonly strong,
.fx-soldtoohigh .fx-text, .fx-soldtoohigh strong,
.fx-herosunk .fx-text, .fx-herosunk strong,
.fx-sellair .fx-text, .fx-sellair strong,
.fx-floorcutter .fx-text, .fx-floorcutter strong,
.fx-clickmonster .fx-text, .fx-clickmonster strong,
.fx-zenallin .fx-text, .fx-zenallin strong,
.fx-diyetf .fx-text, .fx-diyetf strong,
.fx-neversell .fx-text, .fx-neversell strong,
.fx-balancer .fx-text, .fx-balancer strong,
.fx-flexgod .fx-text, .fx-flexgod strong,
.fx-bentopro .fx-text, .fx-bentopro strong,
.fx-secondbest .fx-text, .fx-secondbest strong,
.fx-eversecond .fx-text, .fx-eversecond strong,
.fx-rank2chill .fx-text, .fx-rank2chill strong,
.fx-bronzeking .fx-text, .fx-bronzeking strong,
.fx-thirdokay .fx-text, .fx-thirdokay strong,
.fx-tanhua .fx-text, .fx-tanhua strong,
.fx-blankfirst .fx-text, .fx-blankfirst strong,
.fx-goodkarma .fx-text, .fx-goodkarma strong,
.fx-zerohero .fx-text, .fx-zerohero strong,
.fx-tenthedge .fx-text, .fx-tenthedge strong,
.fx-justpassed .fx-text, .fx-justpassed strong,
.fx-top10zen .fx-text, .fx-top10zen strong { font-weight: 800; }
.fx-mansion .fx-text, .fx-mansion strong,
.fx-goldestate .fx-text, .fx-goldestate strong,
.fx-weekgod .fx-text, .fx-weekgod strong,
.fx-chillmonk .fx-text, .fx-chillmonk strong,
.fx-bgnpc .fx-text, .fx-bgnpc strong,
.fx-paperrich .fx-text, .fx-paperrich strong,
.fx-etfmaster .fx-text, .fx-etfmaster strong,
.fx-teagent .fx-text, .fx-teagent strong,
.fx-eatdust .fx-text, .fx-eatdust strong,
.fx-chillchamp .fx-text, .fx-chillchamp strong,
.fx-hotpotpos .fx-text, .fx-hotpotpos strong,
.fx-buyonly .fx-text, .fx-buyonly strong,
.fx-balancer .fx-text, .fx-balancer strong,
.fx-secondbest .fx-text, .fx-secondbest strong,
.fx-rank2chill .fx-text, .fx-rank2chill strong,
.fx-thirdokay .fx-text, .fx-thirdokay strong { background: linear-gradient(100deg, var(--fx1) 0%, var(--fx2) 30%, var(--fx3) 48%, var(--fx2) 66%, var(--fx1) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: fx-sheen 3.2s linear infinite; }
.fx-tentpark .fx-text, .fx-tentpark strong,
.fx-rainruin .fx-text, .fx-rainruin strong,
.fx-retirenow .fx-text, .fx-retirenow strong,
.fx-shortsniper .fx-text, .fx-shortsniper strong,
.fx-usdtwarrior .fx-text, .fx-usdtwarrior strong,
.fx-cryptofd .fx-text, .fx-cryptofd strong,
.fx-uswolf .fx-text, .fx-uswolf strong,
.fx-uninvestor .fx-text, .fx-uninvestor strong,
.fx-lonebet .fx-text, .fx-lonebet strong,
.fx-bentopro .fx-text, .fx-bentopro strong { color: var(--fx2); -webkit-text-fill-color: var(--fx2); text-shadow: 0 0 4px var(--fx-glow), 0 0 10px var(--fx-glow); animation: fx-neon 2.4s ease-in-out infinite; }
.fx-penthouse .fx-text, .fx-penthouse strong,
.fx-printgod .fx-text, .fx-printgod strong,
.fx-buffettking .fx-text, .fx-buffettking strong,
.fx-yearlegend .fx-text, .fx-yearlegend strong,
.fx-lostsea .fx-text, .fx-lostsea strong,
.fx-profitgo .fx-text, .fx-profitgo strong,
.fx-twvalue .fx-text, .fx-twvalue strong,
.fx-fundguard .fx-text, .fx-fundguard strong,
.fx-whaledead .fx-text, .fx-whaledead strong,
.fx-spreadkid .fx-text, .fx-spreadkid strong,
.fx-diyetf .fx-text, .fx-diyetf strong,
.fx-goodkarma .fx-text, .fx-goodkarma strong,
.fx-top10zen .fx-text, .fx-top10zen strong { background: linear-gradient(90deg, var(--fx1), var(--fx2), var(--fx3), var(--fx1)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: fx-aurora 6s linear infinite; }
.fx-park .fx-text, .fx-park strong,
.fx-monthdiamond .fx-text, .fx-monthdiamond strong,
.fx-parkdev .fx-text, .fx-parkdev strong,
.fx-leekascend .fx-text, .fx-leekascend strong,
.fx-lieflat .fx-text, .fx-lieflat strong,
.fx-sleepingcash .fx-text, .fx-sleepingcash strong,
.fx-mediannpc .fx-text, .fx-mediannpc strong,
.fx-fundfish .fx-text, .fx-fundfish strong,
.fx-ukslow .fx-text, .fx-ukslow strong,
.fx-uktour .fx-text, .fx-uktour strong,
.fx-onebagzz .fx-text, .fx-onebagzz strong,
.fx-sellair .fx-text, .fx-sellair strong,
.fx-floorcutter .fx-text, .fx-floorcutter strong,
.fx-neversell .fx-text, .fx-neversell strong,
.fx-eversecond .fx-text, .fx-eversecond strong,
.fx-zerohero .fx-text, .fx-zerohero strong,
.fx-justpassed .fx-text, .fx-justpassed strong { background: linear-gradient(180deg, var(--fx3) 0%, var(--fx2) 55%, var(--fx1) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 2px var(--fx-glow)); animation: fx-frost 2.8s ease-in-out infinite; }
.fx-weekrocket .fx-text, .fx-weekrocket strong,
.fx-truegod .fx-text, .fx-truegod strong,
.fx-deepcore .fx-text, .fx-deepcore strong,
.fx-saltking .fx-text, .fx-saltking strong,
.fx-crowncurse .fx-text, .fx-crowncurse strong,
.fx-allinbro .fx-text, .fx-allinbro strong,
.fx-zenallin .fx-text, .fx-zenallin strong,
.fx-tanhua .fx-text, .fx-tanhua strong { background: linear-gradient(0deg, var(--fx1) 0%, var(--fx2) 45%, var(--fx3) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 4px var(--fx-glow)); animation: fx-flicker 1.6s ease-in-out infinite; }
.fx-mumleek .fx-text, .fx-mumleek strong,
.fx-annualpanic .fx-text, .fx-annualpanic strong,
.fx-tradegremlin .fx-text, .fx-tradegremlin strong,
.fx-sellwrong .fx-text, .fx-sellwrong strong,
.fx-dumbvalley .fx-text, .fx-dumbvalley strong,
.fx-busyflat .fx-text, .fx-busyflat strong,
.fx-cryptojail .fx-text, .fx-cryptojail strong,
.fx-nightowlus .fx-text, .fx-nightowlus strong,
.fx-herosunk .fx-text, .fx-herosunk strong,
.fx-clickmonster .fx-text, .fx-clickmonster strong,
.fx-flexgod .fx-text, .fx-flexgod strong,
.fx-bronzeking .fx-text, .fx-bronzeking strong,
.fx-tenthedge .fx-text, .fx-tenthedge strong { color: var(--fx2); -webkit-text-fill-color: var(--fx2); text-shadow: none; animation: fx-glitch 3.2s steps(1) infinite; }
.fx-lasttail .fx-text, .fx-lasttail strong,
.fx-bottomboss .fx-text, .fx-bottomboss strong,
.fx-brokerdad .fx-text, .fx-brokerdad strong,
.fx-feeson .fx-text, .fx-feeson strong,
.fx-surferrekt .fx-text, .fx-surferrekt strong,
.fx-knifecatch .fx-text, .fx-knifecatch strong,
.fx-soldtoohigh .fx-text, .fx-soldtoohigh strong,
.fx-blankfirst .fx-text, .fx-blankfirst strong { display: inline-block; color: var(--fx2); -webkit-text-fill-color: var(--fx2); text-shadow: 0 1px 0 color-mix(in srgb, var(--fx3) 55%, transparent); animation: fx-shake 3.2s ease-in-out infinite; }
@keyframes fx-glitch {
  0%, 88%, 100% { text-shadow: none; }
  90% { text-shadow: -2px 0 var(--fx1), 2px 0 var(--fx3); }
  93% { text-shadow: 2px 1px var(--fx1), -2px -1px var(--fx3); }
  96% { text-shadow: -1px 0 var(--fx1), 1px 0 var(--fx3); }
}
@keyframes fx-shake {
  0%, 82%, 100% { transform: none; }
  85% { transform: translateX(-1.5px) rotate(-1deg); }
  88% { transform: translateX(1.5px) rotate(1deg); }
  91% { transform: translateX(-1px); }
  94% { transform: translateX(1px); }
}
@keyframes fx-pcard {
  from { background-position: var(--fx-pos); background-size: var(--fx-sz); }
  to   { background-position: var(--fx-pos-to); background-size: var(--fx-sz-to); }
}
.fx-row-park { --fxc: #8d6b3e; --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(196,165,116,.7) 60%, transparent 72%), radial-gradient(circle, rgba(196,165,116,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/park-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos: 0 0, 40px 0, 0 0, right center; --fx-sz-to: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos-to: -130px 95px, -45px 65px, 0 0, right center; animation: fx-pcard 15s normal linear infinite !important; }
.fx-row-mansion { --fxc: #d4a017; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,246,200,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,246,200,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/mansion-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-tentpark { --fxc: #64748b; --fx-img: linear-gradient(90deg, rgba(200,220,255,0), rgba(200,220,255,.32) 55%, rgba(200,220,255,0)), linear-gradient(90deg, rgba(200,220,255,0), rgba(200,220,255,.24) 55%, rgba(200,220,255,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/tentpark-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-penthouse { --fxc: #22d3ee; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(130,255,255,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(130,255,255,.28) 0%, rgba(130,255,255,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/penthouse-anim.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-pcard 7s alternate linear infinite !important; }
.fx-row-rainruin { --fxc: #6366f1; --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(180,190,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(180,190,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/rainruin-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos: 0 0, 0 0, 0 0, right center; --fx-sz-to: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos-to: -32px 120px, -20px 90px, 0 0, right center; animation: fx-pcard 1.4s normal linear infinite !important; }
.fx-row-goldestate { --fxc: #f59e0b; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,246,200,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,246,200,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/goldestate-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-weekrocket { --fxc: #f43f5e; --fx-img: linear-gradient(90deg, rgba(255,210,120,0), rgba(255,210,120,.32) 55%, rgba(255,210,120,0)), linear-gradient(90deg, rgba(255,210,120,0), rgba(255,210,120,.24) 55%, rgba(255,210,120,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/weekrocket-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-retirenow { --fxc: #f59e0b; --fx-img: radial-gradient(circle, rgba(255,236,170,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,236,170,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/retirenow-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-pcard 14s normal linear infinite !important; }
.fx-row-weekgod { --fxc: #eab308; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,240,190,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,240,190,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/weekgod-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-mumleek { --fxc: #65a30d; --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(200,240,160,.7) 60%, transparent 72%), radial-gradient(circle, rgba(200,240,160,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/mumleek-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos: 0 0, 40px 0, 0 0, right center; --fx-sz-to: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos-to: -130px 95px, -45px 65px, 0 0, right center; animation: fx-pcard 15s normal linear infinite !important; }
.fx-row-monthdiamond { --fxc: #38bdf8; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(220,240,255,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(220,240,255,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/monthdiamond-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-printgod { --fxc: #10b981; --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(180,255,210,.7) 60%, transparent 72%), radial-gradient(circle, rgba(180,255,210,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/printgod-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos: 0 0, 40px 0, 0 0, right center; --fx-sz-to: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos-to: -130px 95px, -45px 65px, 0 0, right center; animation: fx-pcard 15s normal linear infinite !important; }
.fx-row-parkdev { --fxc: #64748b; --fx-img: linear-gradient(90deg, rgba(210,225,215,0), rgba(210,225,215,.32) 55%, rgba(210,225,215,0)), linear-gradient(90deg, rgba(210,225,215,0), rgba(210,225,215,.24) 55%, rgba(210,225,215,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/parkdev-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-buffettking { --fxc: #a855f7; --fx-img: radial-gradient(circle, rgba(240,200,255,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(240,200,255,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/buffettking-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-pcard 14s normal linear infinite !important; }
.fx-row-yearlegend { --fxc: #f97316; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,240,180,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,240,180,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/yearlegend-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-truegod { --fxc: #f97316; --fx-img: radial-gradient(circle, rgba(255,220,160,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,220,160,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/truegod-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-pcard 14s normal linear infinite !important; }
.fx-row-annualpanic { --fxc: #dc2626; --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(255,140,140,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(255,140,140,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/annualpanic-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos: 0 0, 0 0, 0 0, right center; --fx-sz-to: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos-to: -32px 120px, -20px 90px, 0 0, right center; animation: fx-pcard 1.4s normal linear infinite !important; }
.fx-row-leekascend { --fxc: #8b5cf6; --fx-img: radial-gradient(circle, rgba(235,225,255,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(235,225,255,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/leekascend-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-pcard 14s normal linear infinite !important; }
.fx-row-deepcore { --fxc: #b91c1c; --fx-img: radial-gradient(circle, rgba(255,120,60,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,120,60,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/deepcore-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-pcard 14s normal linear infinite !important; }
.fx-row-lasttail { --fxc: #a47148; --fx-img: linear-gradient(90deg, rgba(230,210,180,0), rgba(230,210,180,.32) 55%, rgba(230,210,180,0)), linear-gradient(90deg, rgba(230,210,180,0), rgba(230,210,180,.24) 55%, rgba(230,210,180,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/lasttail-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-bottomboss { --fxc: #6b7280; --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(200,205,215,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(200,205,215,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/bottomboss-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos: 0 0, 0 0, 0 0, right center; --fx-sz-to: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos-to: -32px 120px, -20px 90px, 0 0, right center; animation: fx-pcard 1.4s normal linear infinite !important; }
.fx-row-brokerdad { --fxc: #ea580c; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255,170,90,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(255,170,90,.28) 0%, rgba(255,170,90,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/brokerdad-anim.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-pcard 7s alternate linear infinite !important; }
.fx-row-tradegremlin { --fxc: #db2777; --fx-img: linear-gradient(90deg, rgba(255,160,220,0), rgba(255,160,220,.32) 55%, rgba(255,160,220,0)), linear-gradient(90deg, rgba(255,160,220,0), rgba(255,160,220,.24) 55%, rgba(255,160,220,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/tradegremlin-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-feeson { --fxc: #ca8a04; --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(255,220,120,.7) 60%, transparent 72%), radial-gradient(circle, rgba(255,220,120,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/feeson-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos: 0 0, 40px 0, 0 0, right center; --fx-sz-to: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos-to: -130px 95px, -45px 65px, 0 0, right center; animation: fx-pcard 15s normal linear infinite !important; }
.fx-row-surferrekt { --fxc: #0ea5e9; --fx-img: linear-gradient(90deg, rgba(190,235,255,0), rgba(190,235,255,.32) 55%, rgba(190,235,255,0)), linear-gradient(90deg, rgba(190,235,255,0), rgba(190,235,255,.24) 55%, rgba(190,235,255,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/surferrekt-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-shortsniper { --fxc: #14b8a6; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(120,255,230,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(120,255,230,.28) 0%, rgba(120,255,230,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/shortsniper-anim.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-pcard 7s alternate linear infinite !important; }
.fx-row-sellwrong { --fxc: #16a34a; --fx-img: linear-gradient(90deg, rgba(200,255,210,0), rgba(200,255,210,.32) 55%, rgba(200,255,210,0)), linear-gradient(90deg, rgba(200,255,210,0), rgba(200,255,210,.24) 55%, rgba(200,255,210,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/sellwrong-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-dumbvalley { --fxc: #64748b; --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(200,205,215,.7) 60%, transparent 72%), radial-gradient(circle, rgba(200,205,215,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/dumbvalley-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos: 0 0, 40px 0, 0 0, right center; --fx-sz-to: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos-to: -130px 95px, -45px 65px, 0 0, right center; animation: fx-pcard 15s normal linear infinite !important; }
.fx-row-lieflat { --fxc: #6b88b8; --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(230,240,255,.7) 60%, transparent 72%), radial-gradient(circle, rgba(230,240,255,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/lieflat-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos: 0 0, 40px 0, 0 0, right center; --fx-sz-to: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos-to: -130px 95px, -45px 65px, 0 0, right center; animation: fx-pcard 15s normal linear infinite !important; }
.fx-row-chillmonk { --fxc: #ca8a04; --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(200,240,170,.7) 60%, transparent 72%), radial-gradient(circle, rgba(200,240,170,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/chillmonk-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos: 0 0, 40px 0, 0 0, right center; --fx-sz-to: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos-to: -130px 95px, -45px 65px, 0 0, right center; animation: fx-pcard 15s normal linear infinite !important; }
.fx-row-sleepingcash { --fxc: #6366f1; --fx-img: radial-gradient(circle, rgba(200,220,255,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(200,220,255,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/sleepingcash-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-pcard 14s normal linear infinite !important; }
.fx-row-saltking { --fxc: #f59e0b; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,220,150,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,220,150,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/saltking-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-lostsea { --fxc: #0ea5e9; --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(200,240,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(200,240,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/lostsea-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos: 0 0, 0 0, 0 0, right center; --fx-sz-to: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos-to: -32px 120px, -20px 90px, 0 0, right center; animation: fx-pcard 1.4s normal linear infinite !important; }
.fx-row-mediannpc { --fxc: #64748b; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(220,225,235,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(220,225,235,.28) 0%, rgba(220,225,235,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/mediannpc-anim.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-pcard 7s alternate linear infinite !important; }
.fx-row-bgnpc { --fxc: #9ca3af; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(235,230,220,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(235,230,220,.28) 0%, rgba(235,230,220,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/bgnpc-anim.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-pcard 7s alternate linear infinite !important; }
.fx-row-busyflat { --fxc: #f97316; --fx-img: linear-gradient(90deg, rgba(255,200,170,0), rgba(255,200,170,.32) 55%, rgba(255,200,170,0)), linear-gradient(90deg, rgba(255,200,170,0), rgba(255,200,170,.24) 55%, rgba(255,200,170,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/busyflat-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-profitgo { --fxc: #db2777; --fx-img: radial-gradient(circle, rgba(255,235,180,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,235,180,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/profitgo-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-pcard 14s normal linear infinite !important; }
.fx-row-knifecatch { --fxc: #ef4444; --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(255,180,160,.7) 60%, transparent 72%), radial-gradient(circle, rgba(255,180,160,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/knifecatch-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos: 0 0, 40px 0, 0 0, right center; --fx-sz-to: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos-to: -130px 95px, -45px 65px, 0 0, right center; animation: fx-pcard 15s normal linear infinite !important; }
.fx-row-paperrich { --fxc: #16a34a; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,240,190,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,240,190,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/paperrich-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-usdtwarrior { --fxc: #10b981; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(150,255,210,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(150,255,210,.28) 0%, rgba(150,255,210,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/usdtwarrior-anim.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-pcard 7s alternate linear infinite !important; }
.fx-row-cryptofd { --fxc: #0891b2; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(180,240,255,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(180,240,255,.28) 0%, rgba(180,240,255,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/cryptofd-anim.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-pcard 7s alternate linear infinite !important; }
.fx-row-cryptojail { --fxc: #7c3aed; --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(200,180,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(200,180,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/cryptojail-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos: 0 0, 0 0, 0 0, right center; --fx-sz-to: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos-to: -32px 120px, -20px 90px, 0 0, right center; animation: fx-pcard 1.4s normal linear infinite !important; }
.fx-row-nightowlus { --fxc: #4f46e5; --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(190,195,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(190,195,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/nightowlus-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos: 0 0, 0 0, 0 0, right center; --fx-sz-to: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos-to: -32px 120px, -20px 90px, 0 0, right center; animation: fx-pcard 1.4s normal linear infinite !important; }
.fx-row-uswolf { --fxc: #3b82f6; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(200,215,255,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(200,215,255,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/uswolf-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-twvalue { --fxc: #16a34a; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(190,255,210,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(190,255,210,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/twvalue-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-fundguard { --fxc: #22c55e; --fx-img: radial-gradient(circle, rgba(200,255,200,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(200,255,200,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/fundguard-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-pcard 14s normal linear infinite !important; }
.fx-row-etfmaster { --fxc: #ca8a04; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,240,170,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,240,170,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/etfmaster-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-fundfish { --fxc: #d97706; --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(240,220,180,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(240,220,180,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/fundfish-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos: 0 0, 0 0, 0 0, right center; --fx-sz-to: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos-to: -32px 120px, -20px 90px, 0 0, right center; animation: fx-pcard 1.4s normal linear infinite !important; }
.fx-row-teagent { --fxc: #db2777; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,200,225,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,200,225,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/teagent-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-ukslow { --fxc: #7d2638; --fx-img: linear-gradient(90deg, rgba(235,210,170,0), rgba(235,210,170,.32) 55%, rgba(235,210,170,0)), linear-gradient(90deg, rgba(235,210,170,0), rgba(235,210,170,.24) 55%, rgba(235,210,170,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/ukslow-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-uktour { --fxc: #64748b; --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(210,225,240,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(210,225,240,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/uktour-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos: 0 0, 0 0, 0 0, right center; --fx-sz-to: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos-to: -32px 120px, -20px 90px, 0 0, right center; animation: fx-pcard 1.4s normal linear infinite !important; }
.fx-row-uninvestor { --fxc: #0891b2; --fx-img: radial-gradient(circle, rgba(200,240,255,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(200,240,255,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/uninvestor-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-pcard 14s normal linear infinite !important; }
.fx-row-eatdust { --fxc: #a8a29e; --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(230,220,200,.7) 60%, transparent 72%), radial-gradient(circle, rgba(230,220,200,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/eatdust-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos: 0 0, 40px 0, 0 0, right center; --fx-sz-to: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos-to: -130px 95px, -45px 65px, 0 0, right center; animation: fx-pcard 15s normal linear infinite !important; }
.fx-row-chillchamp { --fxc: #eab308; --fx-img: linear-gradient(90deg, rgba(255,235,170,0), rgba(255,235,170,.32) 55%, rgba(255,235,170,0)), linear-gradient(90deg, rgba(255,235,170,0), rgba(255,235,170,.24) 55%, rgba(255,235,170,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/chillchamp-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-crowncurse { --fxc: #c2410c; --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(255,210,140,.7) 60%, transparent 72%), radial-gradient(circle, rgba(255,210,140,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/crowncurse-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos: 0 0, 40px 0, 0 0, right center; --fx-sz-to: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos-to: -130px 95px, -45px 65px, 0 0, right center; animation: fx-pcard 15s normal linear infinite !important; }
.fx-row-lonebet { --fxc: #7209b7; --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(220,180,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(220,180,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/lonebet-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos: 0 0, 0 0, 0 0, right center; --fx-sz-to: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos-to: -32px 120px, -20px 90px, 0 0, right center; animation: fx-pcard 1.4s normal linear infinite !important; }
.fx-row-onebagzz { --fxc: #64748b; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(220,228,236,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(220,228,236,.28) 0%, rgba(220,228,236,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/onebagzz-anim.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-pcard 7s alternate linear infinite !important; }
.fx-row-allinbro { --fxc: #e11d48; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255,190,150,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(255,190,150,.28) 0%, rgba(255,190,150,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/allinbro-anim.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-pcard 7s alternate linear infinite !important; }
.fx-row-whaledead { --fxc: #0e7490; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(170,220,215,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(170,220,215,.28) 0%, rgba(170,220,215,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/whaledead-anim.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-pcard 7s alternate linear infinite !important; }
.fx-row-spreadkid { --fxc: #06b6d4; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(190,235,250,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(190,235,250,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/spreadkid-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-hotpotpos { --fxc: #c2410c; --fx-img: radial-gradient(circle, rgba(255,210,180,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,210,180,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/hotpotpos-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-pcard 14s normal linear infinite !important; }
.fx-row-buyonly { --fxc: #8b5cf6; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(230,220,245,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(230,220,245,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/buyonly-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-soldtoohigh { --fxc: #ea580c; --fx-img: radial-gradient(circle, rgba(255,200,150,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,200,150,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/soldtoohigh-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-pcard 14s normal linear infinite !important; }
.fx-row-herosunk { --fxc: #ca8a04; --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(230,200,120,.7) 60%, transparent 72%), radial-gradient(circle, rgba(230,200,120,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/herosunk-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos: 0 0, 40px 0, 0 0, right center; --fx-sz-to: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos-to: -130px 95px, -45px 65px, 0 0, right center; animation: fx-pcard 15s normal linear infinite !important; }
.fx-row-sellair { --fxc: #94a3b8; --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(225,235,242,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(225,235,242,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/sellair-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos: 0 0, 0 0, 0 0, right center; --fx-sz-to: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos-to: -32px 120px, -20px 90px, 0 0, right center; animation: fx-pcard 1.4s normal linear infinite !important; }
.fx-row-floorcutter { --fxc: #6b7280; --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(210,210,215,.7) 60%, transparent 72%), radial-gradient(circle, rgba(210,210,215,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/floorcutter-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos: 0 0, 40px 0, 0 0, right center; --fx-sz-to: 130px 95px, 85px 65px, 100% 100%, cover; --fx-pos-to: -130px 95px, -45px 65px, 0 0, right center; animation: fx-pcard 15s normal linear infinite !important; }
.fx-row-clickmonster { --fxc: #0284c7; --fx-img: linear-gradient(90deg, rgba(150,240,230,0), rgba(150,240,230,.32) 55%, rgba(150,240,230,0)), linear-gradient(90deg, rgba(150,240,230,0), rgba(150,240,230,.24) 55%, rgba(150,240,230,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/clickmonster-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-zenallin { --fxc: #d97706; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255,220,150,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(255,220,150,.28) 0%, rgba(255,220,150,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/zenallin-anim.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-pcard 7s alternate linear infinite !important; }
.fx-row-diyetf { --fxc: #10b981; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(190,250,220,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(190,250,220,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/diyetf-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-neversell { --fxc: #0ea5e9; --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(210,235,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(210,235,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/neversell-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos: 0 0, 0 0, 0 0, right center; --fx-sz-to: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos-to: -32px 120px, -20px 90px, 0 0, right center; animation: fx-pcard 1.4s normal linear infinite !important; }
.fx-row-balancer { --fxc: #64748b; --fx-img: radial-gradient(circle, rgba(225,232,240,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(225,232,240,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/balancer-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-pcard 14s normal linear infinite !important; }
.fx-row-flexgod { --fxc: #8b5cf6; --fx-img: linear-gradient(90deg, rgba(240,190,255,0), rgba(240,190,255,.32) 55%, rgba(240,190,255,0)), linear-gradient(90deg, rgba(240,190,255,0), rgba(240,190,255,.24) 55%, rgba(240,190,255,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/flexgod-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-bentopro { --fxc: #ea580c; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,215,170,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,215,170,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/bentopro-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-secondbest { --fxc: #94a3b8; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(225,230,238,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(225,230,238,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/secondbest-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-eversecond { --fxc: #94a3b8; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(220,230,240,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(220,230,240,.28) 0%, rgba(220,230,240,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/eversecond-anim.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-pcard 7s alternate linear infinite !important; }
.fx-row-rank2chill { --fxc: #06b6d4; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(200,240,250,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(200,240,250,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/rank2chill-anim.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-bronzeking { --fxc: #d97706; --fx-img: linear-gradient(90deg, rgba(240,200,150,0), rgba(240,200,150,.32) 55%, rgba(240,200,150,0)), linear-gradient(90deg, rgba(240,200,150,0), rgba(240,200,150,.24) 55%, rgba(240,200,150,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/bronzeking-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-thirdokay { --fxc: #c2410c; --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(245,210,170,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(245,210,170,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/thirdokay.webp); --fx-rep: no-repeat, repeat, no-repeat, no-repeat; --fx-sz: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos: 100% 0, 0 0, 0 0, right center; --fx-sz-to: 280% 100%, 110px 80px, 100% 100%, cover; --fx-pos-to: 0% 0, -110px 0, 0 0, right center; animation: fx-pcard 9s normal linear infinite !important; }
.fx-row-tanhua { --fxc: #f97316; --fx-img: radial-gradient(circle, rgba(255,190,130,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,190,130,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/tanhua-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-pcard 14s normal linear infinite !important; }
.fx-row-blankfirst { --fxc: #ca8a04; --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(230,220,180,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(230,220,180,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/blankfirst-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos: 0 0, 0 0, 0 0, right center; --fx-sz-to: 120px 120px, 70px 90px, 100% 100%, cover; --fx-pos-to: -32px 120px, -20px 90px, 0 0, right center; animation: fx-pcard 1.4s normal linear infinite !important; }
.fx-row-goodkarma { --fxc: #eab308; --fx-img: radial-gradient(circle, rgba(255,235,170,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,235,170,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/goodkarma-anim.webp); --fx-rep: repeat, repeat, no-repeat, no-repeat; --fx-sz: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos: 0 0, 30px 0, 0 0, right center; --fx-sz-to: 140px 100px, 90px 70px, 100% 100%, cover; --fx-pos-to: 0 -100px, 30px -70px, 0 0, right center; animation: fx-pcard 14s normal linear infinite !important; }
.fx-row-zerohero { --fxc: #64748b; --fx-img: linear-gradient(90deg, rgba(225,235,245,0), rgba(225,235,245,.32) 55%, rgba(225,235,245,0)), linear-gradient(90deg, rgba(225,235,245,0), rgba(225,235,245,.24) 55%, rgba(225,235,245,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/zerohero-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-tenthedge { --fxc: #06b6d4; --fx-img: linear-gradient(90deg, rgba(180,240,250,0), rgba(180,240,250,.32) 55%, rgba(180,240,250,0)), linear-gradient(90deg, rgba(180,240,250,0), rgba(180,240,250,.24) 55%, rgba(180,240,250,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/tenthedge-anim.webp); --fx-rep: repeat-x, repeat-x, no-repeat, no-repeat; --fx-sz: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos: 0 28%, 40px 72%, 0 0, right center; --fx-sz-to: 240px 2px, 320px 2px, 100% 100%, cover; --fx-pos-to: -240px 28%, -280px 72%, 0 0, right center; animation: fx-pcard 3.6s normal linear infinite !important; }
.fx-row-justpassed { --fxc: #22c55e; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(190,240,210,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(190,240,210,.28) 0%, rgba(190,240,210,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/justpassed-anim.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-pcard 7s alternate linear infinite !important; }
.fx-row-top10zen { --fxc: #0891b2; --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(200,250,230,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(200,250,230,.28) 0%, rgba(200,250,230,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/top10zen-anim.webp); --fx-rep: no-repeat, no-repeat, no-repeat, no-repeat; --fx-sz: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos: 100% 0, 100% 50%, 0 0, right center; --fx-sz-to: 260% 100%, 22% 100%, 100% 100%, cover; --fx-pos-to: 0% 0, 100% 50%, 0 0, right center; animation: fx-pcard 7s alternate linear infinite !important; }
.fx-still.fx-row-park { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(196,165,116,.7) 60%, transparent 72%), radial-gradient(circle, rgba(196,165,116,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/park.webp); }
.fx-still.fx-row-mansion { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,246,200,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,246,200,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/mansion.webp); }
.fx-still.fx-row-tentpark { --fx-img: linear-gradient(90deg, rgba(200,220,255,0), rgba(200,220,255,.32) 55%, rgba(200,220,255,0)), linear-gradient(90deg, rgba(200,220,255,0), rgba(200,220,255,.24) 55%, rgba(200,220,255,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/tentpark.webp); }
.fx-still.fx-row-penthouse { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(130,255,255,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(130,255,255,.28) 0%, rgba(130,255,255,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/penthouse.webp); }
.fx-still.fx-row-rainruin { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(180,190,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(180,190,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/rainruin.webp); }
.fx-still.fx-row-goldestate { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,246,200,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,246,200,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/goldestate.webp); }
.fx-still.fx-row-weekrocket { --fx-img: linear-gradient(90deg, rgba(255,210,120,0), rgba(255,210,120,.32) 55%, rgba(255,210,120,0)), linear-gradient(90deg, rgba(255,210,120,0), rgba(255,210,120,.24) 55%, rgba(255,210,120,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/weekrocket.webp); }
.fx-still.fx-row-retirenow { --fx-img: radial-gradient(circle, rgba(255,236,170,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,236,170,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/retirenow.webp); }
.fx-still.fx-row-weekgod { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,240,190,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,240,190,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/weekgod.webp); }
.fx-still.fx-row-mumleek { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(200,240,160,.7) 60%, transparent 72%), radial-gradient(circle, rgba(200,240,160,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/mumleek.webp); }
.fx-still.fx-row-monthdiamond { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(220,240,255,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(220,240,255,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/monthdiamond.webp); }
.fx-still.fx-row-printgod { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(180,255,210,.7) 60%, transparent 72%), radial-gradient(circle, rgba(180,255,210,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/printgod.webp); }
.fx-still.fx-row-parkdev { --fx-img: linear-gradient(90deg, rgba(210,225,215,0), rgba(210,225,215,.32) 55%, rgba(210,225,215,0)), linear-gradient(90deg, rgba(210,225,215,0), rgba(210,225,215,.24) 55%, rgba(210,225,215,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/parkdev.webp); }
.fx-still.fx-row-buffettking { --fx-img: radial-gradient(circle, rgba(240,200,255,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(240,200,255,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/buffettking.webp); }
.fx-still.fx-row-yearlegend { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,240,180,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,240,180,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/yearlegend.webp); }
.fx-still.fx-row-truegod { --fx-img: radial-gradient(circle, rgba(255,220,160,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,220,160,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/truegod.webp); }
.fx-still.fx-row-annualpanic { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(255,140,140,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(255,140,140,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/annualpanic.webp); }
.fx-still.fx-row-leekascend { --fx-img: radial-gradient(circle, rgba(235,225,255,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(235,225,255,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/leekascend.webp); }
.fx-still.fx-row-deepcore { --fx-img: radial-gradient(circle, rgba(255,120,60,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,120,60,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/deepcore.webp); }
.fx-still.fx-row-lasttail { --fx-img: linear-gradient(90deg, rgba(230,210,180,0), rgba(230,210,180,.32) 55%, rgba(230,210,180,0)), linear-gradient(90deg, rgba(230,210,180,0), rgba(230,210,180,.24) 55%, rgba(230,210,180,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/lasttail.webp); }
.fx-still.fx-row-bottomboss { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(200,205,215,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(200,205,215,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/bottomboss.webp); }
.fx-still.fx-row-brokerdad { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255,170,90,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(255,170,90,.28) 0%, rgba(255,170,90,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/brokerdad.webp); }
.fx-still.fx-row-tradegremlin { --fx-img: linear-gradient(90deg, rgba(255,160,220,0), rgba(255,160,220,.32) 55%, rgba(255,160,220,0)), linear-gradient(90deg, rgba(255,160,220,0), rgba(255,160,220,.24) 55%, rgba(255,160,220,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/tradegremlin.webp); }
.fx-still.fx-row-feeson { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(255,220,120,.7) 60%, transparent 72%), radial-gradient(circle, rgba(255,220,120,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/feeson.webp); }
.fx-still.fx-row-surferrekt { --fx-img: linear-gradient(90deg, rgba(190,235,255,0), rgba(190,235,255,.32) 55%, rgba(190,235,255,0)), linear-gradient(90deg, rgba(190,235,255,0), rgba(190,235,255,.24) 55%, rgba(190,235,255,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/surferrekt.webp); }
.fx-still.fx-row-shortsniper { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(120,255,230,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(120,255,230,.28) 0%, rgba(120,255,230,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/shortsniper.webp); }
.fx-still.fx-row-sellwrong { --fx-img: linear-gradient(90deg, rgba(200,255,210,0), rgba(200,255,210,.32) 55%, rgba(200,255,210,0)), linear-gradient(90deg, rgba(200,255,210,0), rgba(200,255,210,.24) 55%, rgba(200,255,210,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/sellwrong.webp); }
.fx-still.fx-row-dumbvalley { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(200,205,215,.7) 60%, transparent 72%), radial-gradient(circle, rgba(200,205,215,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/dumbvalley.webp); }
.fx-still.fx-row-lieflat { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(230,240,255,.7) 60%, transparent 72%), radial-gradient(circle, rgba(230,240,255,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/lieflat.webp); }
.fx-still.fx-row-chillmonk { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(200,240,170,.7) 60%, transparent 72%), radial-gradient(circle, rgba(200,240,170,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/chillmonk.webp); }
.fx-still.fx-row-sleepingcash { --fx-img: radial-gradient(circle, rgba(200,220,255,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(200,220,255,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/sleepingcash.webp); }
.fx-still.fx-row-saltking { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,220,150,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,220,150,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/saltking.webp); }
.fx-still.fx-row-lostsea { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(200,240,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(200,240,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/lostsea.webp); }
.fx-still.fx-row-mediannpc { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(220,225,235,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(220,225,235,.28) 0%, rgba(220,225,235,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/mediannpc.webp); }
.fx-still.fx-row-bgnpc { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(235,230,220,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(235,230,220,.28) 0%, rgba(235,230,220,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/bgnpc.webp); }
.fx-still.fx-row-busyflat { --fx-img: linear-gradient(90deg, rgba(255,200,170,0), rgba(255,200,170,.32) 55%, rgba(255,200,170,0)), linear-gradient(90deg, rgba(255,200,170,0), rgba(255,200,170,.24) 55%, rgba(255,200,170,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/busyflat.webp); }
.fx-still.fx-row-profitgo { --fx-img: radial-gradient(circle, rgba(255,235,180,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,235,180,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/profitgo.webp); }
.fx-still.fx-row-knifecatch { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(255,180,160,.7) 60%, transparent 72%), radial-gradient(circle, rgba(255,180,160,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/knifecatch.webp); }
.fx-still.fx-row-paperrich { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,240,190,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,240,190,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/paperrich.webp); }
.fx-still.fx-row-usdtwarrior { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(150,255,210,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(150,255,210,.28) 0%, rgba(150,255,210,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/usdtwarrior.webp); }
.fx-still.fx-row-cryptofd { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(180,240,255,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(180,240,255,.28) 0%, rgba(180,240,255,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/cryptofd.webp); }
.fx-still.fx-row-cryptojail { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(200,180,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(200,180,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/cryptojail.webp); }
.fx-still.fx-row-nightowlus { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(190,195,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(190,195,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/nightowlus.webp); }
.fx-still.fx-row-uswolf { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(200,215,255,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(200,215,255,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/uswolf.webp); }
.fx-still.fx-row-twvalue { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(190,255,210,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(190,255,210,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/twvalue.webp); }
.fx-still.fx-row-fundguard { --fx-img: radial-gradient(circle, rgba(200,255,200,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(200,255,200,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/fundguard.webp); }
.fx-still.fx-row-etfmaster { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,240,170,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,240,170,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/etfmaster.webp); }
.fx-still.fx-row-fundfish { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(240,220,180,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(240,220,180,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/fundfish.webp); }
.fx-still.fx-row-teagent { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,200,225,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,200,225,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/teagent.webp); }
.fx-still.fx-row-ukslow { --fx-img: linear-gradient(90deg, rgba(235,210,170,0), rgba(235,210,170,.32) 55%, rgba(235,210,170,0)), linear-gradient(90deg, rgba(235,210,170,0), rgba(235,210,170,.24) 55%, rgba(235,210,170,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/ukslow.webp); }
.fx-still.fx-row-uktour { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(210,225,240,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(210,225,240,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/uktour.webp); }
.fx-still.fx-row-uninvestor { --fx-img: radial-gradient(circle, rgba(200,240,255,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(200,240,255,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/uninvestor.webp); }
.fx-still.fx-row-eatdust { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(230,220,200,.7) 60%, transparent 72%), radial-gradient(circle, rgba(230,220,200,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/eatdust.webp); }
.fx-still.fx-row-chillchamp { --fx-img: linear-gradient(90deg, rgba(255,235,170,0), rgba(255,235,170,.32) 55%, rgba(255,235,170,0)), linear-gradient(90deg, rgba(255,235,170,0), rgba(255,235,170,.24) 55%, rgba(255,235,170,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/chillchamp.webp); }
.fx-still.fx-row-crowncurse { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(255,210,140,.7) 60%, transparent 72%), radial-gradient(circle, rgba(255,210,140,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/crowncurse.webp); }
.fx-still.fx-row-lonebet { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(220,180,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(220,180,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/lonebet.webp); }
.fx-still.fx-row-onebagzz { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(220,228,236,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(220,228,236,.28) 0%, rgba(220,228,236,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/onebagzz.webp); }
.fx-still.fx-row-allinbro { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255,190,150,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(255,190,150,.28) 0%, rgba(255,190,150,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/allinbro.webp); }
.fx-still.fx-row-whaledead { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(170,220,215,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(170,220,215,.28) 0%, rgba(170,220,215,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/whaledead.webp); }
.fx-still.fx-row-spreadkid { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(190,235,250,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(190,235,250,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/spreadkid.webp); }
.fx-still.fx-row-hotpotpos { --fx-img: radial-gradient(circle, rgba(255,210,180,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,210,180,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/hotpotpos.webp); }
.fx-still.fx-row-buyonly { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(230,220,245,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(230,220,245,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/buyonly.webp); }
.fx-still.fx-row-soldtoohigh { --fx-img: radial-gradient(circle, rgba(255,200,150,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,200,150,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/soldtoohigh.webp); }
.fx-still.fx-row-herosunk { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(230,200,120,.7) 60%, transparent 72%), radial-gradient(circle, rgba(230,200,120,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/herosunk.webp); }
.fx-still.fx-row-sellair { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(225,235,242,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(225,235,242,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/sellair.webp); }
.fx-still.fx-row-floorcutter { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(210,210,215,.7) 60%, transparent 72%), radial-gradient(circle, rgba(210,210,215,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/floorcutter.webp); }
.fx-still.fx-row-clickmonster { --fx-img: linear-gradient(90deg, rgba(150,240,230,0), rgba(150,240,230,.32) 55%, rgba(150,240,230,0)), linear-gradient(90deg, rgba(150,240,230,0), rgba(150,240,230,.24) 55%, rgba(150,240,230,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/clickmonster.webp); }
.fx-still.fx-row-zenallin { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255,220,150,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(255,220,150,.28) 0%, rgba(255,220,150,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/zenallin.webp); }
.fx-still.fx-row-diyetf { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(190,250,220,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(190,250,220,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/diyetf.webp); }
.fx-still.fx-row-neversell { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(210,235,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(210,235,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/neversell.webp); }
.fx-still.fx-row-balancer { --fx-img: radial-gradient(circle, rgba(225,232,240,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(225,232,240,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/balancer.webp); }
.fx-still.fx-row-flexgod { --fx-img: linear-gradient(90deg, rgba(240,190,255,0), rgba(240,190,255,.32) 55%, rgba(240,190,255,0)), linear-gradient(90deg, rgba(240,190,255,0), rgba(240,190,255,.24) 55%, rgba(240,190,255,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/flexgod.webp); }
.fx-still.fx-row-bentopro { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,215,170,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,215,170,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/bentopro.webp); }
.fx-still.fx-row-secondbest { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(225,230,238,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(225,230,238,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/secondbest.webp); }
.fx-still.fx-row-eversecond { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(220,230,240,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(220,230,240,.28) 0%, rgba(220,230,240,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/eversecond.webp); }
.fx-still.fx-row-rank2chill { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(200,240,250,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(200,240,250,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/rank2chill.webp); }
.fx-still.fx-row-bronzeking { --fx-img: linear-gradient(90deg, rgba(240,200,150,0), rgba(240,200,150,.32) 55%, rgba(240,200,150,0)), linear-gradient(90deg, rgba(240,200,150,0), rgba(240,200,150,.24) 55%, rgba(240,200,150,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/bronzeking.webp); }
.fx-still.fx-row-tanhua { --fx-img: radial-gradient(circle, rgba(255,190,130,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,190,130,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/tanhua.webp); }
.fx-still.fx-row-blankfirst { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(230,220,180,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(230,220,180,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/blankfirst.webp); }
.fx-still.fx-row-goodkarma { --fx-img: radial-gradient(circle, rgba(255,235,170,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,235,170,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/goodkarma.webp); }
.fx-still.fx-row-zerohero { --fx-img: linear-gradient(90deg, rgba(225,235,245,0), rgba(225,235,245,.32) 55%, rgba(225,235,245,0)), linear-gradient(90deg, rgba(225,235,245,0), rgba(225,235,245,.24) 55%, rgba(225,235,245,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/zerohero.webp); }
.fx-still.fx-row-tenthedge { --fx-img: linear-gradient(90deg, rgba(180,240,250,0), rgba(180,240,250,.32) 55%, rgba(180,240,250,0)), linear-gradient(90deg, rgba(180,240,250,0), rgba(180,240,250,.24) 55%, rgba(180,240,250,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/tenthedge.webp); }
.fx-still.fx-row-justpassed { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(190,240,210,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(190,240,210,.28) 0%, rgba(190,240,210,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/justpassed.webp); }
.fx-still.fx-row-top10zen { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(200,250,230,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(200,250,230,.28) 0%, rgba(200,250,230,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/top10zen.webp); }
@media (prefers-reduced-motion: reduce) {
  .fx-row-park { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(196,165,116,.7) 60%, transparent 72%), radial-gradient(circle, rgba(196,165,116,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/park.webp); }
  .fx-row-mansion { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,246,200,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,246,200,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/mansion.webp); }
  .fx-row-tentpark { --fx-img: linear-gradient(90deg, rgba(200,220,255,0), rgba(200,220,255,.32) 55%, rgba(200,220,255,0)), linear-gradient(90deg, rgba(200,220,255,0), rgba(200,220,255,.24) 55%, rgba(200,220,255,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/tentpark.webp); }
  .fx-row-penthouse { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(130,255,255,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(130,255,255,.28) 0%, rgba(130,255,255,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/penthouse.webp); }
  .fx-row-rainruin { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(180,190,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(180,190,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/rainruin.webp); }
  .fx-row-goldestate { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,246,200,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,246,200,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/goldestate.webp); }
  .fx-row-weekrocket { --fx-img: linear-gradient(90deg, rgba(255,210,120,0), rgba(255,210,120,.32) 55%, rgba(255,210,120,0)), linear-gradient(90deg, rgba(255,210,120,0), rgba(255,210,120,.24) 55%, rgba(255,210,120,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/weekrocket.webp); }
  .fx-row-retirenow { --fx-img: radial-gradient(circle, rgba(255,236,170,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,236,170,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/retirenow.webp); }
  .fx-row-weekgod { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,240,190,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,240,190,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/weekgod.webp); }
  .fx-row-mumleek { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(200,240,160,.7) 60%, transparent 72%), radial-gradient(circle, rgba(200,240,160,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/mumleek.webp); }
  .fx-row-monthdiamond { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(220,240,255,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(220,240,255,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/monthdiamond.webp); }
  .fx-row-printgod { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(180,255,210,.7) 60%, transparent 72%), radial-gradient(circle, rgba(180,255,210,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/printgod.webp); }
  .fx-row-parkdev { --fx-img: linear-gradient(90deg, rgba(210,225,215,0), rgba(210,225,215,.32) 55%, rgba(210,225,215,0)), linear-gradient(90deg, rgba(210,225,215,0), rgba(210,225,215,.24) 55%, rgba(210,225,215,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/parkdev.webp); }
  .fx-row-buffettking { --fx-img: radial-gradient(circle, rgba(240,200,255,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(240,200,255,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/buffettking.webp); }
  .fx-row-yearlegend { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,240,180,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,240,180,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/yearlegend.webp); }
  .fx-row-truegod { --fx-img: radial-gradient(circle, rgba(255,220,160,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,220,160,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/truegod.webp); }
  .fx-row-annualpanic { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(255,140,140,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(255,140,140,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/annualpanic.webp); }
  .fx-row-leekascend { --fx-img: radial-gradient(circle, rgba(235,225,255,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(235,225,255,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/leekascend.webp); }
  .fx-row-deepcore { --fx-img: radial-gradient(circle, rgba(255,120,60,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,120,60,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/deepcore.webp); }
  .fx-row-lasttail { --fx-img: linear-gradient(90deg, rgba(230,210,180,0), rgba(230,210,180,.32) 55%, rgba(230,210,180,0)), linear-gradient(90deg, rgba(230,210,180,0), rgba(230,210,180,.24) 55%, rgba(230,210,180,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/lasttail.webp); }
  .fx-row-bottomboss { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(200,205,215,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(200,205,215,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/bottomboss.webp); }
  .fx-row-brokerdad { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255,170,90,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(255,170,90,.28) 0%, rgba(255,170,90,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/brokerdad.webp); }
  .fx-row-tradegremlin { --fx-img: linear-gradient(90deg, rgba(255,160,220,0), rgba(255,160,220,.32) 55%, rgba(255,160,220,0)), linear-gradient(90deg, rgba(255,160,220,0), rgba(255,160,220,.24) 55%, rgba(255,160,220,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/tradegremlin.webp); }
  .fx-row-feeson { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(255,220,120,.7) 60%, transparent 72%), radial-gradient(circle, rgba(255,220,120,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/feeson.webp); }
  .fx-row-surferrekt { --fx-img: linear-gradient(90deg, rgba(190,235,255,0), rgba(190,235,255,.32) 55%, rgba(190,235,255,0)), linear-gradient(90deg, rgba(190,235,255,0), rgba(190,235,255,.24) 55%, rgba(190,235,255,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/surferrekt.webp); }
  .fx-row-shortsniper { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(120,255,230,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(120,255,230,.28) 0%, rgba(120,255,230,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/shortsniper.webp); }
  .fx-row-sellwrong { --fx-img: linear-gradient(90deg, rgba(200,255,210,0), rgba(200,255,210,.32) 55%, rgba(200,255,210,0)), linear-gradient(90deg, rgba(200,255,210,0), rgba(200,255,210,.24) 55%, rgba(200,255,210,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/sellwrong.webp); }
  .fx-row-dumbvalley { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(200,205,215,.7) 60%, transparent 72%), radial-gradient(circle, rgba(200,205,215,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/dumbvalley.webp); }
  .fx-row-lieflat { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(230,240,255,.7) 60%, transparent 72%), radial-gradient(circle, rgba(230,240,255,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/lieflat.webp); }
  .fx-row-chillmonk { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(200,240,170,.7) 60%, transparent 72%), radial-gradient(circle, rgba(200,240,170,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/chillmonk.webp); }
  .fx-row-sleepingcash { --fx-img: radial-gradient(circle, rgba(200,220,255,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(200,220,255,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/sleepingcash.webp); }
  .fx-row-saltking { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,220,150,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,220,150,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/saltking.webp); }
  .fx-row-lostsea { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(200,240,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(200,240,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/lostsea.webp); }
  .fx-row-mediannpc { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(220,225,235,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(220,225,235,.28) 0%, rgba(220,225,235,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/mediannpc.webp); }
  .fx-row-bgnpc { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(235,230,220,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(235,230,220,.28) 0%, rgba(235,230,220,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/bgnpc.webp); }
  .fx-row-busyflat { --fx-img: linear-gradient(90deg, rgba(255,200,170,0), rgba(255,200,170,.32) 55%, rgba(255,200,170,0)), linear-gradient(90deg, rgba(255,200,170,0), rgba(255,200,170,.24) 55%, rgba(255,200,170,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/busyflat.webp); }
  .fx-row-profitgo { --fx-img: radial-gradient(circle, rgba(255,235,180,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,235,180,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/profitgo.webp); }
  .fx-row-knifecatch { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(255,180,160,.7) 60%, transparent 72%), radial-gradient(circle, rgba(255,180,160,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/knifecatch.webp); }
  .fx-row-paperrich { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,240,190,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,240,190,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/paperrich.webp); }
  .fx-row-usdtwarrior { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(150,255,210,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(150,255,210,.28) 0%, rgba(150,255,210,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/usdtwarrior.webp); }
  .fx-row-cryptofd { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(180,240,255,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(180,240,255,.28) 0%, rgba(180,240,255,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/cryptofd.webp); }
  .fx-row-cryptojail { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(200,180,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(200,180,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/cryptojail.webp); }
  .fx-row-nightowlus { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(190,195,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(190,195,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/nightowlus.webp); }
  .fx-row-uswolf { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(200,215,255,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(200,215,255,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/uswolf.webp); }
  .fx-row-twvalue { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(190,255,210,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(190,255,210,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/twvalue.webp); }
  .fx-row-fundguard { --fx-img: radial-gradient(circle, rgba(200,255,200,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(200,255,200,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/fundguard.webp); }
  .fx-row-etfmaster { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,240,170,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,240,170,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/etfmaster.webp); }
  .fx-row-fundfish { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(240,220,180,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(240,220,180,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/fundfish.webp); }
  .fx-row-teagent { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,200,225,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,200,225,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/teagent.webp); }
  .fx-row-ukslow { --fx-img: linear-gradient(90deg, rgba(235,210,170,0), rgba(235,210,170,.32) 55%, rgba(235,210,170,0)), linear-gradient(90deg, rgba(235,210,170,0), rgba(235,210,170,.24) 55%, rgba(235,210,170,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/ukslow.webp); }
  .fx-row-uktour { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(210,225,240,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(210,225,240,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/uktour.webp); }
  .fx-row-uninvestor { --fx-img: radial-gradient(circle, rgba(200,240,255,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(200,240,255,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/uninvestor.webp); }
  .fx-row-eatdust { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(230,220,200,.7) 60%, transparent 72%), radial-gradient(circle, rgba(230,220,200,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/eatdust.webp); }
  .fx-row-chillchamp { --fx-img: linear-gradient(90deg, rgba(255,235,170,0), rgba(255,235,170,.32) 55%, rgba(255,235,170,0)), linear-gradient(90deg, rgba(255,235,170,0), rgba(255,235,170,.24) 55%, rgba(255,235,170,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/chillchamp.webp); }
  .fx-row-crowncurse { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(255,210,140,.7) 60%, transparent 72%), radial-gradient(circle, rgba(255,210,140,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/crowncurse.webp); }
  .fx-row-lonebet { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(220,180,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(220,180,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/lonebet.webp); }
  .fx-row-onebagzz { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(220,228,236,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(220,228,236,.28) 0%, rgba(220,228,236,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/onebagzz.webp); }
  .fx-row-allinbro { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255,190,150,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(255,190,150,.28) 0%, rgba(255,190,150,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/allinbro.webp); }
  .fx-row-whaledead { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(170,220,215,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(170,220,215,.28) 0%, rgba(170,220,215,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/whaledead.webp); }
  .fx-row-spreadkid { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(190,235,250,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(190,235,250,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/spreadkid.webp); }
  .fx-row-hotpotpos { --fx-img: radial-gradient(circle, rgba(255,210,180,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,210,180,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/hotpotpos.webp); }
  .fx-row-buyonly { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(230,220,245,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(230,220,245,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/buyonly.webp); }
  .fx-row-soldtoohigh { --fx-img: radial-gradient(circle, rgba(255,200,150,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,200,150,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/soldtoohigh.webp); }
  .fx-row-herosunk { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(230,200,120,.7) 60%, transparent 72%), radial-gradient(circle, rgba(230,200,120,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/herosunk.webp); }
  .fx-row-sellair { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(225,235,242,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(225,235,242,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/sellair.webp); }
  .fx-row-floorcutter { --fx-img: radial-gradient(ellipse 4px 2.6px, rgba(210,210,215,.7) 60%, transparent 72%), radial-gradient(circle, rgba(210,210,215,.45) 0 1.4px, transparent 2.4px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/floorcutter.webp); }
  .fx-row-clickmonster { --fx-img: linear-gradient(90deg, rgba(150,240,230,0), rgba(150,240,230,.32) 55%, rgba(150,240,230,0)), linear-gradient(90deg, rgba(150,240,230,0), rgba(150,240,230,.24) 55%, rgba(150,240,230,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/clickmonster.webp); }
  .fx-row-zenallin { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255,220,150,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(255,220,150,.28) 0%, rgba(255,220,150,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/zenallin.webp); }
  .fx-row-diyetf { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(190,250,220,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(190,250,220,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/diyetf.webp); }
  .fx-row-neversell { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(210,235,255,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(210,235,255,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/neversell.webp); }
  .fx-row-balancer { --fx-img: radial-gradient(circle, rgba(225,232,240,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(225,232,240,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/balancer.webp); }
  .fx-row-flexgod { --fx-img: linear-gradient(90deg, rgba(240,190,255,0), rgba(240,190,255,.32) 55%, rgba(240,190,255,0)), linear-gradient(90deg, rgba(240,190,255,0), rgba(240,190,255,.24) 55%, rgba(240,190,255,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/flexgod.webp); }
  .fx-row-bentopro { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,215,170,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(255,215,170,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/bentopro.webp); }
  .fx-row-secondbest { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(225,230,238,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(225,230,238,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/secondbest.webp); }
  .fx-row-eversecond { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(220,230,240,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(220,230,240,.28) 0%, rgba(220,230,240,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/eversecond.webp); }
  .fx-row-rank2chill { --fx-img: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(200,240,250,.3) 50%, transparent 58%, transparent 100%), radial-gradient(circle, rgba(200,240,250,.55) 0 1.6px, transparent 2.6px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/rank2chill.webp); }
  .fx-row-bronzeking { --fx-img: linear-gradient(90deg, rgba(240,200,150,0), rgba(240,200,150,.32) 55%, rgba(240,200,150,0)), linear-gradient(90deg, rgba(240,200,150,0), rgba(240,200,150,.24) 55%, rgba(240,200,150,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/bronzeking.webp); }
  .fx-row-tanhua { --fx-img: radial-gradient(circle, rgba(255,190,130,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,190,130,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/tanhua.webp); }
  .fx-row-blankfirst { --fx-img: repeating-linear-gradient(105deg, transparent 0 12px, rgba(230,220,180,.3) 12px 13px, transparent 13px 26px), radial-gradient(circle, rgba(230,220,180,.35) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/blankfirst.webp); }
  .fx-row-goodkarma { --fx-img: radial-gradient(circle, rgba(255,235,170,.55) 0 1.6px, transparent 2.6px), radial-gradient(circle, rgba(255,235,170,.4) 0 1.2px, transparent 2.2px), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/goodkarma.webp); }
  .fx-row-zerohero { --fx-img: linear-gradient(90deg, rgba(225,235,245,0), rgba(225,235,245,.32) 55%, rgba(225,235,245,0)), linear-gradient(90deg, rgba(225,235,245,0), rgba(225,235,245,.24) 55%, rgba(225,235,245,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/zerohero.webp); }
  .fx-row-tenthedge { --fx-img: linear-gradient(90deg, rgba(180,240,250,0), rgba(180,240,250,.32) 55%, rgba(180,240,250,0)), linear-gradient(90deg, rgba(180,240,250,0), rgba(180,240,250,.24) 55%, rgba(180,240,250,0)), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/tenthedge.webp); }
  .fx-row-justpassed { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(190,240,210,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(190,240,210,.28) 0%, rgba(190,240,210,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/justpassed.webp); }
  .fx-row-top10zen { --fx-img: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(200,250,230,.24) 50%, transparent 60%, transparent 100%), radial-gradient(circle at 93% 50%, rgba(200,250,230,.28) 0%, rgba(200,250,230,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 74%, transparent) 46%, color-mix(in srgb, var(--card) 0%, transparent) 78%), url(../cards/top10zen.webp); }
  .fx-row-park,
  .fx-row-mansion,
  .fx-row-tentpark,
  .fx-row-penthouse,
  .fx-row-rainruin,
  .fx-row-goldestate,
  .fx-row-weekrocket,
  .fx-row-retirenow,
  .fx-row-weekgod,
  .fx-row-mumleek,
  .fx-row-monthdiamond,
  .fx-row-printgod,
  .fx-row-parkdev,
  .fx-row-buffettking,
  .fx-row-yearlegend,
  .fx-row-truegod,
  .fx-row-annualpanic,
  .fx-row-leekascend,
  .fx-row-deepcore,
  .fx-row-lasttail,
  .fx-row-bottomboss,
  .fx-row-brokerdad,
  .fx-row-tradegremlin,
  .fx-row-feeson,
  .fx-row-surferrekt,
  .fx-row-shortsniper,
  .fx-row-sellwrong,
  .fx-row-dumbvalley,
  .fx-row-lieflat,
  .fx-row-chillmonk,
  .fx-row-sleepingcash,
  .fx-row-saltking,
  .fx-row-lostsea,
  .fx-row-mediannpc,
  .fx-row-bgnpc,
  .fx-row-busyflat,
  .fx-row-profitgo,
  .fx-row-knifecatch,
  .fx-row-paperrich,
  .fx-row-usdtwarrior,
  .fx-row-cryptofd,
  .fx-row-cryptojail,
  .fx-row-nightowlus,
  .fx-row-uswolf,
  .fx-row-twvalue,
  .fx-row-fundguard,
  .fx-row-etfmaster,
  .fx-row-fundfish,
  .fx-row-teagent,
  .fx-row-ukslow,
  .fx-row-uktour,
  .fx-row-uninvestor,
  .fx-row-eatdust,
  .fx-row-chillchamp,
  .fx-row-crowncurse,
  .fx-row-lonebet,
  .fx-row-onebagzz,
  .fx-row-allinbro,
  .fx-row-whaledead,
  .fx-row-spreadkid,
  .fx-row-hotpotpos,
  .fx-row-buyonly,
  .fx-row-soldtoohigh,
  .fx-row-herosunk,
  .fx-row-sellair,
  .fx-row-floorcutter,
  .fx-row-clickmonster,
  .fx-row-zenallin,
  .fx-row-diyetf,
  .fx-row-neversell,
  .fx-row-balancer,
  .fx-row-flexgod,
  .fx-row-bentopro,
  .fx-row-secondbest,
  .fx-row-eversecond,
  .fx-row-rank2chill,
  .fx-row-bronzeking,
  .fx-row-thirdokay,
  .fx-row-tanhua,
  .fx-row-blankfirst,
  .fx-row-goodkarma,
  .fx-row-zerohero,
  .fx-row-tenthedge,
  .fx-row-justpassed,
  .fx-row-top10zen { animation: none !important; }
  .fx-park .fx-text, .fx-park strong,
  .fx-mansion .fx-text, .fx-mansion strong,
  .fx-tentpark .fx-text, .fx-tentpark strong,
  .fx-penthouse .fx-text, .fx-penthouse strong,
  .fx-rainruin .fx-text, .fx-rainruin strong,
  .fx-goldestate .fx-text, .fx-goldestate strong,
  .fx-weekrocket .fx-text, .fx-weekrocket strong,
  .fx-retirenow .fx-text, .fx-retirenow strong,
  .fx-weekgod .fx-text, .fx-weekgod strong,
  .fx-mumleek .fx-text, .fx-mumleek strong,
  .fx-monthdiamond .fx-text, .fx-monthdiamond strong,
  .fx-printgod .fx-text, .fx-printgod strong,
  .fx-parkdev .fx-text, .fx-parkdev strong,
  .fx-buffettking .fx-text, .fx-buffettking strong,
  .fx-yearlegend .fx-text, .fx-yearlegend strong,
  .fx-truegod .fx-text, .fx-truegod strong,
  .fx-annualpanic .fx-text, .fx-annualpanic strong,
  .fx-leekascend .fx-text, .fx-leekascend strong,
  .fx-deepcore .fx-text, .fx-deepcore strong,
  .fx-lasttail .fx-text, .fx-lasttail strong,
  .fx-bottomboss .fx-text, .fx-bottomboss strong,
  .fx-brokerdad .fx-text, .fx-brokerdad strong,
  .fx-tradegremlin .fx-text, .fx-tradegremlin strong,
  .fx-feeson .fx-text, .fx-feeson strong,
  .fx-surferrekt .fx-text, .fx-surferrekt strong,
  .fx-shortsniper .fx-text, .fx-shortsniper strong,
  .fx-sellwrong .fx-text, .fx-sellwrong strong,
  .fx-dumbvalley .fx-text, .fx-dumbvalley strong,
  .fx-lieflat .fx-text, .fx-lieflat strong,
  .fx-chillmonk .fx-text, .fx-chillmonk strong,
  .fx-sleepingcash .fx-text, .fx-sleepingcash strong,
  .fx-saltking .fx-text, .fx-saltking strong,
  .fx-lostsea .fx-text, .fx-lostsea strong,
  .fx-mediannpc .fx-text, .fx-mediannpc strong,
  .fx-bgnpc .fx-text, .fx-bgnpc strong,
  .fx-busyflat .fx-text, .fx-busyflat strong,
  .fx-profitgo .fx-text, .fx-profitgo strong,
  .fx-knifecatch .fx-text, .fx-knifecatch strong,
  .fx-paperrich .fx-text, .fx-paperrich strong,
  .fx-usdtwarrior .fx-text, .fx-usdtwarrior strong,
  .fx-cryptofd .fx-text, .fx-cryptofd strong,
  .fx-cryptojail .fx-text, .fx-cryptojail strong,
  .fx-nightowlus .fx-text, .fx-nightowlus strong,
  .fx-uswolf .fx-text, .fx-uswolf strong,
  .fx-twvalue .fx-text, .fx-twvalue strong,
  .fx-fundguard .fx-text, .fx-fundguard strong,
  .fx-etfmaster .fx-text, .fx-etfmaster strong,
  .fx-fundfish .fx-text, .fx-fundfish strong,
  .fx-teagent .fx-text, .fx-teagent strong,
  .fx-ukslow .fx-text, .fx-ukslow strong,
  .fx-uktour .fx-text, .fx-uktour strong,
  .fx-uninvestor .fx-text, .fx-uninvestor strong,
  .fx-eatdust .fx-text, .fx-eatdust strong,
  .fx-chillchamp .fx-text, .fx-chillchamp strong,
  .fx-crowncurse .fx-text, .fx-crowncurse strong,
  .fx-lonebet .fx-text, .fx-lonebet strong,
  .fx-onebagzz .fx-text, .fx-onebagzz strong,
  .fx-allinbro .fx-text, .fx-allinbro strong,
  .fx-whaledead .fx-text, .fx-whaledead strong,
  .fx-spreadkid .fx-text, .fx-spreadkid strong,
  .fx-hotpotpos .fx-text, .fx-hotpotpos strong,
  .fx-buyonly .fx-text, .fx-buyonly strong,
  .fx-soldtoohigh .fx-text, .fx-soldtoohigh strong,
  .fx-herosunk .fx-text, .fx-herosunk strong,
  .fx-sellair .fx-text, .fx-sellair strong,
  .fx-floorcutter .fx-text, .fx-floorcutter strong,
  .fx-clickmonster .fx-text, .fx-clickmonster strong,
  .fx-zenallin .fx-text, .fx-zenallin strong,
  .fx-diyetf .fx-text, .fx-diyetf strong,
  .fx-neversell .fx-text, .fx-neversell strong,
  .fx-balancer .fx-text, .fx-balancer strong,
  .fx-flexgod .fx-text, .fx-flexgod strong,
  .fx-bentopro .fx-text, .fx-bentopro strong,
  .fx-secondbest .fx-text, .fx-secondbest strong,
  .fx-eversecond .fx-text, .fx-eversecond strong,
  .fx-rank2chill .fx-text, .fx-rank2chill strong,
  .fx-bronzeking .fx-text, .fx-bronzeking strong,
  .fx-thirdokay .fx-text, .fx-thirdokay strong,
  .fx-tanhua .fx-text, .fx-tanhua strong,
  .fx-blankfirst .fx-text, .fx-blankfirst strong,
  .fx-goodkarma .fx-text, .fx-goodkarma strong,
  .fx-zerohero .fx-text, .fx-zerohero strong,
  .fx-tenthedge .fx-text, .fx-tenthedge strong,
  .fx-justpassed .fx-text, .fx-justpassed strong,
  .fx-top10zen .fx-text, .fx-top10zen strong { animation: none; transform: none; }
}
/* PERIODFX:END */
/* CARDS:END */

/* 排行榜表格：報酬率與交鋒的數字加大（領獎台的報酬率標籤一併加大） */
.leaderboard-table-wrap td.lb-num-cell .badge-roi { font-size: 15px; font-weight: 700; padding: 3px 11px; }
.leaderboard-table-wrap .lb-trade-mark { font-size: 14px; padding: 3px 10px; min-width: 54px; }
.leaderboard-table-wrap .lb-week-trades { max-width: 150px; gap: 6px; }
.podium-card .badge-roi { font-size: 16px; font-weight: 700; padding: 3px 12px; }
/* 名片列上的「持倉一覽」按鈕墊一層卡片底色，疊在插畫上也看得清楚（位置與大小不變） */
.leaderboard-table-wrap tbody tr.fx-row .outlined-button { background: color-mix(in srgb, var(--card) 84%, transparent); }

/* 代號對到多個市場時的選單（看盤加入表單、下單面板共用） */
.symbol-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
}

.symbol-choices-hint {
  flex: 1 0 100%;
  font-size: 12px;
  color: var(--ink-faint);
}

.symbol-choice,
.symbol-choice-cancel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}

.symbol-choice:hover,
.symbol-choice:focus-visible {
  border-color: var(--brand);
}

.symbol-choice-cancel {
  color: var(--ink-faint);
}

.symbol-choice-market,
.symbol-choice-name {
  font-size: 11px;
  color: var(--ink-faint);
}

/* 自選清單列右側的現價與日漲跌 */
.chart-item-quote {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  padding: 0 4px 0 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart-item-price {
  font-size: 13px;
  font-weight: 600;
}

.chart-item-change {
  font-size: 12px;
}

/* 自選清單的市場篩選：窄欄位裡單行排完，計數縮小跟在名稱後 */
.chart-filter-tabs {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  margin-top: 8px;
}

.chart-filter-tabs .filter-tab {
  flex: 1 1 auto;
  padding: 6px 4px;
  font-size: 12px;
  white-space: nowrap;
}

.chart-filter-count {
  margin-left: 3px;
  font-size: 10px;
  opacity: 0.75;
}

/* ============================== 台股自建圖表：技術指標選單與圖例 ============================== */

.twc-ind-menu {
  position: relative;
  margin-left: auto;
}

/* 浮動面板：錨在工具列按鈕的右緣，高度有上限（.chart-stage 有 overflow:hidden，不能超出舞台） */
.twc-ind-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: min(300px, calc(100vw - 32px));
  max-height: min(360px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 13px;
}

.twc-ind-panel:focus {
  outline: none;
}

.twc-ind-section + .twc-ind-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.twc-ind-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
}

.twc-ind-check {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  cursor: pointer;
}

.twc-ind-check input {
  margin: 0;
  accent-color: var(--brand);
}

.twc-ind-note {
  font-size: 11px;
  color: var(--ink-faint);
}

.twc-ind-periods {
  margin: 4px 0 6px;
}

.twc-ind-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.twc-ind-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.twc-ind-remove {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--ink-faint);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.twc-ind-remove:hover {
  color: var(--ink);
}

.twc-ind-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.twc-ind-add label {
  font-size: 12px;
  color: var(--ink-faint);
}

.twc-ind-input {
  width: 76px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  /* 沿用全域 input 的 16px（iOS 聚焦時不會自動放大頁面） */
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
}

.twc-ind-input:disabled {
  opacity: 0.5;
}

.twc-ind-btn {
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.twc-ind-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.twc-ind-remove:focus-visible,
.twc-ind-btn:focus-visible,
.twc-ind-input:focus-visible,
.twc-ind-check input:focus-visible,
.twc-ind-panel:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.twc-ind-error {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--down);
}

.twc-ind-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* 圖例的指標數值：小字，前面一個色塊對應線色 */
.twc-ind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: var(--ink-faint);
}

.twc-ind b {
  font-weight: 600;
  color: var(--ink);
}

.twc-ind-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* ============================== 台股自建圖表：畫圖工具（v2.3.0） ============================== */

/* 工具列在圖表左側（桌面）；圖表本體與價格軸、時間軸的位置不變 */
.twc-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.twc-main {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.twc-draw {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-height: 100%;
  padding: 6px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--line);
}

.twc-draw-btn {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
}

.twc-draw-btn:hover {
  color: var(--ink);
  border-color: var(--line);
}

.twc-draw-btn.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brass);
}

/* 鎖住的工具仍可點（點擊顯示「通行證專屬」提示），只是視覺上淡化 */
.twc-draw-btn.is-locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.twc-draw-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.twc-draw-icon {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.twc-draw-icon-wrap svg {
  display: block;
  width: 18px;
  height: 18px;
}

.twc-draw-lock {
  position: absolute;
  right: 1px;
  bottom: 1px;
  display: inline-flex;
  width: 11px;
  height: 11px;
}

.twc-draw-lock svg {
  display: block;
  width: 11px;
  height: 11px;
}

.twc-draw-sep {
  flex: 0 0 auto;
  width: 20px;
  height: 1px;
  margin: 4px 0;
  background: var(--line);
}

/* 建立中的操作提示：浮在圖表上方中央，不接收滑鼠事件 */
.twc-draw-hint {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}

/* 選取圖形後的屬性列：圖表左上角 */
.twc-draw-style {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  max-width: calc(100% - 16px);
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.twc-draw-swatches,
.twc-draw-widths {
  display: flex;
  align-items: center;
  gap: 4px;
}

.twc-draw-swatch {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.twc-draw-swatch.is-active {
  border-color: var(--ink);
}

.twc-draw-width {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.twc-draw-width span {
  display: block;
  width: 16px;
  border-radius: 2px;
  background: var(--ink);
}

.twc-draw-width.is-active {
  border-color: var(--line-strong);
  background: var(--bg);
}

.twc-draw-del {
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--down);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* 文字圖形的輸入框：放在點擊位置；字級沿用全域 input（16px，iOS 聚焦不會放大） */
.twc-draw-text {
  position: absolute;
  z-index: 6;
  width: min(220px, calc(100% - 16px));
  padding: 4px 8px;
  border: 1px solid var(--brand);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-body);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.twc-draw-text::placeholder {
  color: var(--ink-faint);
}

/* 畫圖模式與拖曳：游標與觸控手勢交給畫圖（touch-action: none 避免瀏覽器接走平移） */
.twc-chart.is-drawing,
.twc-chart.is-drawing * {
  cursor: crosshair;
}

.twc-chart.is-drawing,
.twc-chart.is-dragging {
  touch-action: none;
}

.twc-chart.is-dragging,
.twc-chart.is-dragging * {
  cursor: grabbing;
  user-select: none;
}

.twc-chart.is-over-drawing,
.twc-chart.is-over-drawing * {
  cursor: move;
}

/* 窄螢幕：工具列改為圖表上方的水平捲動列，圖表高度幾乎不變 */
@media (max-width: 640px) {
  .twc-body {
    flex-direction: column;
  }

  .twc-draw {
    flex-direction: row;
    max-height: none;
    padding: 4px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    gap: 4px;
  }

  .twc-draw-sep {
    width: 1px;
    height: 20px;
    margin: 0 4px;
  }

  .twc-draw-style {
    top: 4px;
    left: 4px;
  }
}

/* 自選清單：拖曳排序與拖曳換邊 */
.chart-strip-title {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.chart-grip {
  color: var(--ink-faint);
  font-size: 16px;
  line-height: 1;
}

.chart-layout.is-panel-dragging,
.chart-layout.is-panel-dragging * {
  cursor: grabbing;
}

.chart-layout.is-panel-dragging > .chart-list-card {
  box-shadow: 0 0 0 2px var(--brand) inset;
}

.chart-item-grip {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: -2px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.chart-item-grip:hover {
  color: var(--ink);
}

.chart-item.is-dragging {
  position: relative;
  z-index: 3;
  opacity: 0.95;
  border-color: var(--brand);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.chart-item.is-dragging .chart-item-grip {
  cursor: grabbing;
}

/* ---------- 看盤切換標的時的載入動畫 ---------- */
.twc { position: relative; }
.twc-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.twc-progress[data-on="1"] { opacity: 1; }
.twc-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  animation: twc-progress-run 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes twc-progress-run {
  from { transform: translateX(-100%); }
  to { transform: translateX(270%); }
}

.twc-skel {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: var(--card);
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.twc-skel[data-leaving="1"] { opacity: 0; }
.twc-skel-col {
  position: absolute;
  top: 6%;
  bottom: 6%;
  width: calc(100% / 44 - 4px);
  animation: twc-skel-in 0.4s ease-out both;
  animation-delay: calc(var(--i) * 8ms);
}
.twc-skel-wick, .twc-skel-body, .twc-skel-vol {
  position: absolute;
  display: block;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.twc-skel-wick { left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; }
.twc-skel-body { left: 0; right: 0; border-radius: 3px; background: color-mix(in srgb, var(--ink) 13%, transparent); }
.twc-skel-vol { left: 0; right: 0; bottom: 0; border-radius: 2px 2px 0 0; }
.twc-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--card) 70%, #fff) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: twc-skel-sweep 1.5s ease-in-out infinite;
}
@keyframes twc-skel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes twc-skel-sweep { to { transform: translateX(100%); } }

/* 換週期重載：舊圖先壓暗，不清空。 */
.twc-chart > div:not(.twc-msg):not(.twc-skel) { transition: opacity 0.2s ease; }
.twc-chart[data-loading="refresh"] > div:not(.twc-msg):not(.twc-skel) { opacity: 0.45; }

/* 圖例：換標的時整列淡入；資料未到前用脈動色塊佔位。 */
.twc-legend { animation: twc-legend-in 0.28s ease-out both; }
@keyframes twc-legend-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.twc-pulse {
  display: inline-block;
  width: 54px;
  height: 11px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 11%, transparent);
  animation: twc-pulse 1.2s ease-in-out infinite;
}
.twc-pulse:nth-of-type(2) { animation-delay: 0.1s; }
.twc-pulse:nth-of-type(3) { animation-delay: 0.2s; }
@keyframes twc-pulse { 50% { opacity: 0.4; } }

html[data-motion="off"] .twc-progress::before,
html[data-motion="off"] .twc-skel::after,
html[data-motion="off"] .twc-skel-col,
html[data-motion="off"] .twc-legend,
html[data-motion="off"] .twc-pulse { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .twc-progress::before, .twc-skel::after, .twc-skel-col, .twc-legend, .twc-pulse { animation: none !important; }
  .twc-skel::after { display: none; }
}

/* 排行榜切換：新榜還沒到時，舊榜淡出變暗並顯示細進度條（150ms 內載完就不會閃） */
.lb-switch-bar{height:2px;margin:0 0 8px;border-radius:2px;overflow:hidden;opacity:0;transition:opacity .15s ease;position:relative}
.lb-switch-bar::after{content:"";position:absolute;inset:0;width:40%;background:var(--accent,#6c8cff);border-radius:2px;transform:translateX(-100%)}
.lb-switch-bar.is-on{opacity:1;transition-delay:.15s}
.lb-switch-bar.is-on::after{animation:lb-switch-run 1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes lb-switch-run{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.podium-grid,.leaderboard-table-wrap{transition:opacity .3s ease,filter .3s ease}
.podium-grid.is-switching,.leaderboard-table-wrap.is-switching{opacity:.35;filter:saturate(.6);pointer-events:none}
.lb-fade-in{animation:lb-fade-in .35s ease both}
@keyframes lb-fade-in{from{opacity:0}to{opacity:1}}
html[data-motion="off"] .lb-switch-bar.is-on::after{animation:none;width:100%;transform:none}
html[data-motion="off"] .podium-grid,html[data-motion="off"] .leaderboard-table-wrap{transition:none}
html[data-motion="off"] .lb-fade-in{animation:none}
@media (prefers-reduced-motion:reduce){.lb-fade-in{animation:none}.lb-switch-bar.is-on::after{animation:none;width:100%;transform:none}.podium-grid,.leaderboard-table-wrap{transition:none}}

/* 玩家檔案頂部：玩家裝備的名片當背景（含動畫特效），名字套名牌特效；樣式與排行榜同一份 .fx-row-<款式>／.fx-<款式> */
header.profile-fx-head.fx-row {
  background-color: color-mix(in srgb, var(--fxc) 8%, var(--card));
  background-image: var(--fx-img);
  background-size: var(--fx-sz);
  background-position: var(--fx-pos);
  background-repeat: var(--fx-rep);
  padding: 14px 16px;
  border-radius: 14px;
  min-height: 132px;
  box-shadow: inset 6px 0 0 var(--fxc), 0 0 0 1px color-mix(in srgb, var(--fxc) 40%, transparent);
}
header.profile-fx-head.fx-row .icon-button,
header.profile-fx-head.fx-row .profile-avatar { background-color: color-mix(in srgb, var(--card) 82%, transparent); }
header.profile-fx-head.fx-row .profile-lastseen { color: var(--ink-soft); }

/* ============ 手機版修整（2026-11-04，web/tests/e2e/mobile_audit.py 逐頁檢查） ============ */
@media (max-width: 860px) {
  /* 分頁籤不換行：換行時滑動指示器會變成跨兩列的大色塊。放不下就橫向捲動，不縮字。 */
  .filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tabs > .filter-tab {
    flex: 1 0 auto;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
  }
  /* 翻頁鈕（‹ ›）不要搶寬度 */
  .filter-tabs > .filter-tab[aria-label="上一頁"],
  .filter-tabs > .filter-tab[aria-label="下一頁"] { flex: 0 0 auto; padding-left: 8px; padding-right: 8px; }

  /* 區塊標題旁的分頁籤／狀態膠囊放不下時換到下一行、滿寬 */
  .section-heading { flex-wrap: wrap; align-items: flex-end; row-gap: 8px; }
  .section-heading > .filter-tabs { flex: 1 1 100%; }

  /* 定期定額表單在手機是直欄：flex-basis 會變成高度，改回自然高度 */
  .dca-fields input,
  .dca-fields select,
  .dca-fields button { flex: 0 0 auto; }

  /* 未來推演的動作鈕：三顆擠一列會把字折成三行，改成可換行、每顆至少 140px 寬 */
  .calc-actions { flex-wrap: wrap; }
  .calc-actions .primary-button,
  .calc-actions .secondary-button,
  .calc-actions > button { flex: 1 1 140px; white-space: nowrap; }

  /* 排位房分頁：兩顆平分一列，不把「全服總排位榜」折成兩行 */
  #roomTabsWrap { flex-wrap: nowrap !important; width: 100%; }
  #roomTabsWrap > .filter-tab { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
  .room-switcher-card > div > div:last-child { width: 100%; }
  .room-switcher-card > div > div:last-child > button { flex: 1 1 auto; justify-content: center; white-space: nowrap; }

  /* 名片列：插畫在手機是滿版，數字與標籤墊一層卡片底色才讀得到 */
  .leaderboard-table-wrap tbody tr.fx-row .badge-roi,
  .leaderboard-table-wrap tbody tr.fx-row .lb-trade-mark,
  .leaderboard-table-wrap tbody tr.fx-row td::before {
    background-color: color-mix(in srgb, var(--card) 86%, transparent);
    border-radius: 999px;
  }
  .leaderboard-table-wrap tbody tr.fx-row td::before { padding: 1px 6px; }
}
@media (max-width: 420px) {
  /* 最窄螢幕：房間分頁的「(全員)」「(唯讀)」小字收起來 */
  #roomTabsWrap > .filter-tab > span[style] { display: none; }
  #roomTabsWrap > .filter-tab { padding: 5px 8px !important; gap: 4px !important; font-size: 12px !important; }
}