/* ══════════════════════════════════════════════════════════════════════════
   萌寵盃｜入口 + 賽事公布看板（正式樣式）
   ‧ 視覺沿用《團購小萌寵》奶油色系；彩虹只出現在描邊與獎盃徽章
   ‧ 手機直式、大字、主要 CTA 一次只有一個
   ‧ 版面規則：所有容器 width:100% + box-sizing:border-box + min-width:0
     ★ 一律不使用 100vw：有垂直捲軸時 100vw 會比 clientWidth 多出捲軸寬度而溢出
   ‧ 這支只新增 .mc-* / .cw-* / #cupScreen，不覆寫任何既有 class
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --mc-r1:#ffb3c1; --mc-r2:#ffd6a5; --mc-r3:#fdffb6; --mc-r4:#9bf6c0;
  --mc-r5:#a0d8ff; --mc-r6:#d0bdf4;
  --mc-ink:#8a5a2b; --mc-ink2:#a08a68; --mc-cream:#fffaf0; --mc-cream2:#fff5e6;
}

/* ── 常駐入口（HOME＝登入禮正下方、TRAVEL＝寵幣列與旅行紀念冊之間）── */
.mc-entry{
  position:relative; display:flex; align-items:center; gap:10px;
  width:100%; max-width:100%; box-sizing:border-box; padding:11px 13px; margin:10px 0 2px;
  border-radius:18px; cursor:pointer; text-align:left; overflow:hidden;
  background:
    linear-gradient(var(--mc-cream),var(--mc-cream2)) padding-box,
    linear-gradient(100deg,var(--mc-r1),var(--mc-r2),var(--mc-r3),var(--mc-r4),var(--mc-r5),var(--mc-r6)) border-box;
  border:2px solid transparent;
  box-shadow:0 2px 6px rgba(160,120,70,.13);
  font-family:inherit; -webkit-tap-highlight-color:transparent;
}
.mc-entry:active{ transform:translateY(1px); }
.mc-entry:focus-visible{ outline:3px solid var(--mc-r2); outline-offset:2px; }
/* Locked / Unlocked 共用同一張徽章，只靠 filter 差異，不另做未解鎖版美術 */
.mc-badge{
  display:block; flex:0 0 auto; width:36px; height:36px;
  background:url(icons/race/cup-badge.webp) center/contain no-repeat;
  filter:drop-shadow(0 1px 1.5px rgba(150,105,55,.22));
}
/* ★ 防超寬三件套：文字欄一定要能縮，長副標才不會把容器推出 viewport */
.mc-txt{ display:block; flex:1 1 auto; min-width:0; overflow:hidden; }
.mc-title{ display:block; font-size:16px; font-weight:900; letter-spacing:.5px; line-height:1.25;
  color:var(--mc-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-sub{ display:block; margin-top:2px; font-size:11.5px; color:var(--mc-ink2); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-bar{ display:block; margin-top:5px; height:4px; border-radius:3px; background:#e7ddcb;
  overflow:hidden; max-width:100%; }
.mc-bar i{ display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--mc-r2),var(--mc-r4)); }
.mc-go{ display:block; flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  background:#fdecd2; position:relative; }
.mc-go::after{ content:""; position:absolute; left:6px; top:6px; width:6px; height:6px;
  border-top:2px solid #b98c4e; border-right:2px solid #b98c4e; transform:rotate(45deg); }
/* ── 鎖頭 ────────────────────────────────────────────────────────────
   ⚠ 舊版鎖身是 15×9（寬高比 1.67）⇒ 看起來被橫向拉寬，不像鎖。
     而且外框 15×15 沒有 aspect-ratio，父層 flex 一改就會再變形。
   ★固定正方形盒 + 等比鎖身★：width＝height、aspect-ratio:1/1、
     align-self:center（不吃 flex 的 stretch），手機顯示 28px。 */
.mc-lock{
  display:block; flex:0 0 auto; align-self:center; position:relative; margin-left:5px;
  width:28px; height:28px; aspect-ratio:1/1;
}
.mc-lock::before{                                   /* 鎖環 */
  content:""; position:absolute; left:50%; top:4px; transform:translateX(-50%);
  width:14px; height:11px; border:2.5px solid #a3927a; border-bottom:0;
  border-radius:7px 7px 0 0;
}
.mc-lock::after{                                    /* 鎖身 */
  content:""; position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
  width:20px; height:15px; background:#a3927a; border-radius:4px;
}
/* 任何 icon 圖檔都不准被拉伸 */
.mc-entry img, #cupScreen img{ object-fit:contain; }
.mc-entry.is-locked{
  background:linear-gradient(#f7f2e8,#f2ebdd) padding-box,
             linear-gradient(100deg,#e2d8c8,#ded3c0) border-box;
  box-shadow:0 1px 4px rgba(160,120,70,.10);
}
.mc-entry.is-locked .mc-badge{
  filter:grayscale(1) brightness(1.06) contrast(.9) opacity(.62)
         drop-shadow(0 1px 1.5px rgba(150,130,105,.18));
}
.mc-entry.is-locked .mc-title{ color:#9c8a6d; }
.mc-entry.is-locked .mc-go{ display:none; }
body.mc-unlocked .mc-lock, body.mc-unlocked .mc-bar{ display:none !important; }

/* ── 萌寵盃頁 ───────────────────────────────────────────────────────── */
/* 進入萌寵盃時整個 #app 一起藏：.wrap 有 min-height:100vh，
   只藏 #gameScreen 的話 #app 仍會佔滿一個視窗高度，把看板推到畫面下方。 */
body.on-cup #app, body.on-cup #nav{ display:none !important; }
body:not(.on-cup) #cupScreen{ display:none !important; }
/* ★ index.html 的開機隱藏保護有 `#cupScreen{display:none}`(1,0,0)；
   這一行 (1,1,1) 才是實際開關，順序與 specificity 都要維持。 */
body.on-cup #cupScreen{ display:block; }

/* ★--cw-board 提到 :root★（2026-09-05 v0.60.963）
   原本它只定義在 #cupScreen 內，於是 html.on-cup / body.on-cup 想用同一個底色時
   var(--cw-board) 解不出來 ⇒ 根層變透明，橡皮筋一拉就露出下面的淡黃層。
   ★只搬這一個 token、值不變★；#cupScreen 照樣繼承得到，其餘 token 維持原位。 */
:root{ --cw-board:#f3e6cd; }

#cupScreen{
  --cw-wood:#b98a52; --cw-wood-d:#96693a;
  --cw-paper:#fffaf0; --cw-paper2:#fff4e2; --cw-line:#ead9bb;
  --cw-ink:#6d4a22; --cw-muted:#9c8767; --cw-gold:#e0a02c;
  --cw-green:#2e7d55; --cw-green-bg:#e4f1e8;
  /* ★必須自己是 positioned★（2026-09-04 真頁抓到的版面 P0）
     #pageBg 是 position:fixed; z-index:0 的房間底圖。#cupScreen 原本是 static，
     ⇒ 它的背景與所有【非 positioned 子元素】都會被 #pageBg 蓋掉：
       畫面上只剩下剛好帶 position:relative 的那幾張卡，其餘（最近一場、
       兩個入口、統計 chip、時間線）明明在 DOM 裡卻完全不顯示。
     這不是那幾個新元件的問題，所以修在容器 —— 一次解決現在與未來所有子元件。 */
  position:relative; z-index:1;
  box-sizing:border-box; width:100%; max-width:100%; min-height:100vh; min-height:100dvh;
  padding:0 0 calc(28px + env(safe-area-inset-bottom,0px));
  background:var(--cw-board); font-family:inherit; color:var(--cw-ink); overflow-x:clip;
}
#cupScreen *,#cupScreen *::before,#cupScreen *::after{ box-sizing:border-box; }

/* ★萌寵盃頂欄高度＝唯一真相★（2026-09-05）
   --cw-topbar-h 不含上安全區：padding 10+10 ＋ .cw-back 的 min-height 44 ＝ 64。
   頂欄自己用它當 min-height，需要「扣掉頂欄再撐滿」的頁面（未解鎖頁）用同一個值。 */
#cupScreen{ --cw-topbar-h:64px; }
.cw-top{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:10px;
  min-height:calc(var(--cw-topbar-h) + env(safe-area-inset-top,0px));
  /* ⚠ 修正紀錄：原本只補 top 的 safe-area，iPhone 橫置／瀏海機左右仍會被切。 */
  padding:calc(10px + env(safe-area-inset-top,0px))
          calc(14px + env(safe-area-inset-right,0px)) 10px
          calc(14px + env(safe-area-inset-left,0px));
  background:linear-gradient(180deg,var(--cw-wood),var(--cw-wood-d));
  box-shadow:0 3px 10px rgba(90,60,25,.28);
}
/* ★返回鍵：純 icon 改成【中文字 ＋ 返回符號】的藥丸★
   ⚠ 真頁 UI Gate 抓到的 P0：舊版是 36×36 的空 button，箭頭用 ::before 畫，
     唯一的中文只在看不見的 aria-label 裡。50+ 玩家在手機上認不出那是返回，
     只能靠瀏覽器上一頁或 iPhone 邊緣手勢 —— 在 PWA／全螢幕下兩者都沒有。
   ⇒ 沿用 app 既有成熟樣式 .mehub-back（index.html:1337）的視覺語言：
     chevron ＋ 明確寫出「回到哪裡」，不另建 navigation 元件。
   ⇒ 尺寸拉到 iOS 最小可點擊 44×44。 */
.cw-back{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:7px 15px 7px 12px;
  border:1px solid rgba(255,255,255,.55); border-radius:999px; cursor:pointer;
  background:rgba(255,250,240,.92); color:#5b4a34;
  font-family:inherit; font-size:14px; font-weight:800; white-space:nowrap;
  box-shadow:0 1px 5px rgba(120,90,40,.12);
  -webkit-tap-highlight-color:transparent;
}
.cw-back::before{
  content:""; flex:0 0 auto; width:9px; height:9px;
  border-left:3px solid var(--cw-wood-d); border-bottom:3px solid var(--cw-wood-d);
  border-radius:2px; transform:rotate(45deg);
}
.cw-top h1{
  margin:0; flex:1 1 auto; min-width:0; font-size:19px; font-weight:900; letter-spacing:2px;
  color:#fffaf0; text-shadow:0 1px 2px rgba(80,50,20,.45);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cw-topbadge{ flex:0 0 auto; width:30px; height:30px;
  background:url(icons/race/cup-badge.webp) center/contain no-repeat; }

.cw-body{ padding:14px 14px 0; display:flex; flex-direction:column; gap:14px; }
.cw-body > *{ min-width:0; }

.cw-h2{ display:flex; align-items:center; gap:8px; margin:2px 0 -4px;
  font-size:13px; font-weight:900; letter-spacing:.14em; color:#8a6a3c; }
.cw-h2::after{ content:""; flex:1 1 auto; height:2px; border-radius:2px;
  background:repeating-linear-gradient(90deg,#d9c39c 0 6px,transparent 6px 12px); }

/* ══ 賽事卡（美觀驗收退回後重整）══════════════════════════════
   退回理由：大面積白卡＋厚邊框＋每張卡頂上一顆紅色圖釘圓點，
   看起來像表單／後台，不像遊戲活動卡。
   改法：
     · 邊框變細、圓角收斂、陰影變輕 ⇒ 不再「厚重」
     · 拿掉沒有功能意義的紅色圖釘（那顆點不代表任何狀態）
     · 左緣加一條狀態色帶，用顏色分「進行中／即將開始／已結束」
     · 內距縮小，卡片不再有大片空白
   ★ 字級不縮：50+ 可讀性優先，只縮空白不縮字。 */
.cw-note{ position:relative; background:linear-gradient(180deg,var(--cw-paper),var(--cw-paper2));
  border:1px solid var(--cw-line); border-radius:16px; padding:12px 13px 12px 15px;
  box-shadow:0 2px 6px rgba(120,85,40,.10); overflow:hidden; }
/* 左緣狀態色帶取代紅色圖釘 */
.cw-note::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#e8d3a8,#d8bd88); }
.cw-note.is-hero{
  border-color:#f0d8a4; padding:14px 14px 13px 16px;
  background:linear-gradient(180deg,#fffdf4,#fff4dc);
  box-shadow:0 4px 14px rgba(180,130,40,.16);
}
.cw-note.is-hero::before{ width:5px; background:linear-gradient(180deg,#ffc866,#e79a1f); }
.cw-note.is-done::before{ background:linear-gradient(180deg,#dcd3c0,#c6bba4); }
.cw-note.is-soon::before{ background:linear-gradient(180deg,#9fd8b4,#4f9e74); }
.cw-note.is-done{ background:linear-gradient(180deg,#f6f0e2,#f1e9d8); }
.cw-note .cw-bar{ display:block; margin-top:11px; height:8px; border-radius:5px;
  background:#e7ddcb; overflow:hidden; }
.cw-note .cw-bar i{ display:block; height:100%; border-radius:5px;
  background:linear-gradient(90deg,var(--mc-r2),var(--mc-r4)); }

.cw-eyebrow{ font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--cw-muted); }
.cw-when{ margin:3px 0 0; font-size:22px; font-weight:900; line-height:1.25; color:var(--cw-ink); }
.cw-when.sm{ font-size:18px; }
.cw-when .cw-hm{ color:#c2761c; }
.cw-ask{ margin:7px 0 0; font-size:15px; line-height:1.6; color:#7b6141; }
.cw-ask b{ color:var(--cw-ink); }

/* ══ 主要操作鈕 ═══════════════════════════════════════════════
   退回理由：一顆巨大橘色按鈕佔掉整張卡的主要視覺，像後台 CTA。
   改法：高度從 14px 內距降到 11px、字級 17→16、圓角收斂，
   並改成「內容在上、操作在下」的層級，不再由按鈕主導畫面。
   ★ 仍維持 44px 以上的可點高度（16px 字 + 上下 11px + 邊框 ≈ 46px）。 */
.cw-cta{
  display:block; width:100%; max-width:100%; margin:11px 0 0; padding:11px 12px;
  border:0; border-radius:13px; cursor:pointer; font-family:inherit;
  font-size:16px; font-weight:900; letter-spacing:.6px; color:#fffaf0;
  background:linear-gradient(180deg,#3a9a68,#2e7d55);
  box-shadow:0 2px 0 #246142, 0 3px 8px rgba(40,90,60,.20);
  -webkit-tap-highlight-color:transparent;
}
.cw-cta:active{ transform:translateY(2px); box-shadow:0 0 0 #246142; }
/* 「現在觀看」：靠金色＋左側 LIVE 圓點抓注意力，不靠尺寸 */
.cw-cta.is-gold{ background:linear-gradient(180deg,#f5b845,#e09422);
  box-shadow:0 2px 0 #ab6f14, 0 3px 10px rgba(190,130,20,.28); color:#4a2f06; }
.cw-cta.is-gold::before{
  content:""; display:inline-block; width:8px; height:8px; margin-right:8px;
  border-radius:50%; background:#d8452f; vertical-align:1px;
  box-shadow:0 0 0 3px rgba(216,69,47,.22);
  animation:cwLiveDot 1.4s ease-in-out infinite;
}
@keyframes cwLiveDot{ 0%,100%{opacity:1} 50%{opacity:.45} }
@media (prefers-reduced-motion:reduce){ .cw-cta.is-gold::before{ animation:none; } }
.cw-cta2{
  display:block; width:100%; max-width:100%; margin:7px 0 0; padding:9px 12px;
  border:1px solid #ecdcc0; border-radius:12px; cursor:pointer; font-family:inherit;
  font-size:14.5px; font-weight:700; color:#96805f; background:transparent;
}
.cw-cta2:active{ background:#f6efe1; }
.cw-2col{ display:flex; gap:9px; margin-top:9px; }
.cw-2col > *{ flex:1 1 0; min-width:0; margin:0; }

.cw-state{ display:flex; align-items:center; gap:9px; margin:12px 0 0; padding:11px 12px;
  border-radius:14px; background:var(--cw-green-bg); color:var(--cw-green);
  font-size:15px; font-weight:800; line-height:1.4; }
.cw-state.is-warm{ background:#fdf0d8; color:#a9711a; }
.cw-state span{ min-width:0; }
.cw-tick{ flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:currentColor;
  position:relative; }
.cw-tick::after{ content:""; position:absolute; left:6px; top:4px; width:6px; height:11px;
  border-right:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(42deg); }

/* 寵物 chip：主顯寵物名、次顯「○○家」。玩家 UI 不出現 NPC／BOT／AI／電腦 */
.cw-pet{ display:flex; align-items:center; gap:9px; min-width:0; flex:1 1 auto; }
.cw-dot{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; position:relative;
  border:2px solid #fffaf0; box-shadow:0 1px 3px rgba(120,85,40,.28); }
.cw-dot::after{ content:attr(data-ini); position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:900;
  color:rgba(80,55,25,.62); }
.cw-dot.sm{ width:24px; height:24px; }
.cw-dot.sm::after{ font-size:10px; }
.cw-pname{ min-width:0; display:block; }
.cw-pname b{ display:block; font-size:15px; font-weight:800; color:var(--cw-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cw-pname i{ display:block; font-style:normal; font-size:11.5px; color:var(--cw-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cw-tag{ flex:0 0 auto; font-size:11px; font-weight:800; padding:2px 7px; border-radius:999px;
  background:#efe3cb; color:#8a6a3c; }
.cw-tag.me{ background:#d9edd9; color:#2e7d55; }

.cw-list{ list-style:none; margin:11px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.cw-row{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:12px;
  background:#fffdf7; border:1.5px solid var(--cw-line); min-width:0; }
.cw-row.is-me{ background:#f2fbf4; border-color:#bcdfc6; }
.cw-row.is-pick{ box-shadow:0 0 0 2px #f2c25a inset; }
.cw-row.win{ background:linear-gradient(180deg,#fff6de,#ffefc9); border-color:#eccf8c; }
.cw-rank{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:#efe3cb;
  color:#8a6a3c; font-size:13px; font-weight:900; display:flex; align-items:center;
  justify-content:center; font-variant-numeric:tabular-nums; }
.cw-row.win .cw-rank{ background:var(--cw-gold); color:#fffaf0; }
.cw-pickbtn{ flex:0 0 auto; border:1.5px solid #e3cf9f; background:#fff8e8; color:#a9711a;
  border-radius:999px; padding:6px 12px; font-size:13px; font-weight:800; cursor:pointer;
  font-family:inherit; white-space:nowrap; }
.cw-row.is-pick .cw-pickbtn{ background:var(--cw-gold); color:#fffaf0; border-color:var(--cw-gold); }
.cw-h2h{ flex:0 0 auto; font-size:12px; font-weight:700; color:var(--cw-muted);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

.cw-champ{ display:flex; align-items:center; gap:10px; margin:10px 0 0; padding:11px 12px;
  border-radius:14px; background:linear-gradient(180deg,#fff6de,#ffeec4);
  border:1.5px solid #eccf8c; min-width:0; }
.cw-champ > div{ min-width:0; font-size:15px; color:#8a6a3c; }
.cw-champ b{ font-size:17px; color:#94651a; }
.cw-champ i{ font-style:normal; font-size:11.5px; color:var(--cw-muted); display:block; }
.cw-badge-s{ flex:0 0 auto; width:30px; height:30px;
  background:url(icons/race/cup-badge.webp) center/contain no-repeat; }

.cw-memo{ margin:11px 0 0; padding:11px 12px; border-radius:13px; background:#fdf7ea;
  border:1.5px dashed #e3d2ae; font-size:14.5px; line-height:1.75; color:#7b6141; }
.cw-memo::before{ content:"這場的小回憶"; display:block; font-size:11.5px; font-weight:900;
  letter-spacing:.12em; color:#b39a6f; margin-bottom:4px; }
.cw-memo.is-empty{ color:#a2917a; font-style:italic; }

.cw-days{ display:flex; flex-direction:column; gap:8px; }
.cw-day{ display:flex; align-items:center; gap:10px; width:100%; max-width:100%; text-align:left;
  padding:12px; border:1.5px solid var(--cw-line); border-radius:14px; background:#fffdf7;
  cursor:pointer; font-family:inherit; margin:0; min-width:0; }
.cw-daymain{ flex:1 1 auto; min-width:0; }
.cw-date{ display:block; font-size:15px; font-weight:900; color:var(--cw-ink); }
.cw-sub2{ display:block; margin-top:2px; font-size:12.5px; color:var(--cw-muted); line-height:1.45;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cw-chev{ flex:0 0 auto; width:9px; height:9px; border-top:2.5px solid #c4ac82;
  border-right:2.5px solid #c4ac82; transform:rotate(45deg); }
.cw-hit{ display:inline-block; font-size:11.5px; font-weight:900; padding:1px 7px;
  border-radius:999px; background:#fdefc9; color:#a9711a; margin-left:6px; }

.cw-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:11px 0 0; }
.cw-stat{ padding:9px 10px; border-radius:12px; background:#fffdf7;
  border:1.5px solid var(--cw-line); min-width:0; }
.cw-stat i{ display:block; font-style:normal; font-size:11.5px; color:var(--cw-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cw-stat b{ display:block; margin-top:2px; font-size:16px; color:var(--cw-ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cw-medals{ display:flex; flex-direction:column; gap:8px; margin:11px 0 0; }
.cw-medal{ display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:13px;
  background:#fffdf7; border:1.5px solid var(--cw-line); min-width:0; }
.cw-medal.locked{ background:#f5efe3; border-color:#e6dcc8; }
.cw-mdisc{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; position:relative;
  background:conic-gradient(var(--mc-r1),var(--mc-r2),var(--mc-r3),var(--mc-r4),var(--mc-r5),var(--mc-r6),var(--mc-r1));
  box-shadow:inset 0 0 0 3px #fffdf7; }
.cw-mdisc::after{ content:""; position:absolute; inset:9px; border-radius:3px 3px 7px 7px;
  background:#f0b64a;
  clip-path:polygon(14% 0,86% 0,86% 42%,64% 66%,64% 82%,86% 82%,86% 100%,14% 100%,14% 82%,36% 82%,36% 66%,14% 42%); }
.cw-medal.locked .cw-mdisc{ background:#ded3c0; }
.cw-medal.locked .cw-mdisc::after{ background:#c3b49b; }
.cw-mtxt{ flex:1 1 auto; min-width:0; }
.cw-mtxt b{ display:block; font-size:14.5px; color:var(--cw-ink); }
.cw-mtxt i{ display:block; font-style:normal; margin-top:2px; font-size:12.5px;
  color:var(--cw-muted); line-height:1.5; }
.cw-mprog{ flex:0 0 auto; font-size:12px; font-weight:800; color:#a9711a;
  font-variant-numeric:tabular-nums; }

/* 誠實揭露：這不是正式美術／正式演出 */
.cw-ph{ margin:10px 0 0; padding:8px 10px; border-radius:11px; background:#f0ebdd;
  border:1px dashed #d5c7a8; font-size:11.5px; line-height:1.6; color:#8f7f61; }

/* ⚠ 這層 z-index:120 蓋掉 .cw-top(z-index:10) 的返回鍵 ⇒ 必須自己帶逃生口。 */
.cw-live{ position:fixed; inset:0; z-index:120; display:none; align-items:center;
  justify-content:center; background:rgba(60,44,26,.5);
  padding:calc(22px + env(safe-area-inset-top,0px))
          calc(22px + env(safe-area-inset-right,0px))
          calc(22px + env(safe-area-inset-bottom,0px))
          calc(22px + env(safe-area-inset-left,0px)); }
.cw-live.show{ display:flex; }
/* 明確的關閉鍵：44×44、避開瀏海／Dynamic Island／瀏覽器 UI。 */
.cw-liveclose{
  position:absolute; top:calc(10px + env(safe-area-inset-top,0px));
  right:calc(10px + env(safe-area-inset-right,0px));
  width:44px; height:44px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,250,240,.94); color:#6d4a22;
  font-family:inherit; font-size:20px; font-weight:900; line-height:44px; padding:0;
  box-shadow:0 2px 8px rgba(60,40,15,.28);
  -webkit-tap-highlight-color:transparent;
}
.cw-livecard{ width:100%; max-width:320px; padding:22px 18px 16px; border-radius:20px;
  text-align:center; border:2px solid transparent;
  background:linear-gradient(180deg,var(--cw-paper,#fffaf0),var(--cw-paper2,#fff4e2)) padding-box,
             linear-gradient(100deg,var(--mc-r1),var(--mc-r2),var(--mc-r3),var(--mc-r4),var(--mc-r5),var(--mc-r6)) border-box;
  box-shadow:0 14px 34px rgba(60,40,15,.34); }
.cw-livecard .cw-badge-s{ width:52px; height:52px; margin:0 auto 10px; }
.cw-livecard h3{ margin:0 0 6px; font-size:20px; color:#6d4a22; letter-spacing:1px; }
.cw-livecard p{ margin:0 0 14px; font-size:14px; color:#8a7a5f; line-height:1.7; }

/* Race placeholder（名次時間軸；不是正式演出）*/
.cw-track{ margin:11px 0 0; display:flex; flex-direction:column; gap:6px; }
.cw-lane{ display:flex; align-items:center; gap:8px; min-width:0; }
.cw-lanename{ flex:0 0 auto; width:62px; font-size:12px; font-weight:800; color:#7b6141;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cw-laneline{ flex:1 1 auto; min-width:0; height:10px; border-radius:6px; background:#eadfc7;
  position:relative; overflow:hidden; }
.cw-laneline i{ display:block; height:100%; border-radius:6px; width:0;
  background:linear-gradient(90deg,#f2c25a,#e0902c); transition:width .18s linear; }
@media (prefers-reduced-motion: reduce){ .cw-laneline i{ transition:none; } }

/* ══════════════════════════════════════════════════════════════════════
   萌寵盃｜全域 LIVE 通知（Batch 6）race-notify.js 使用
   ★ z-index 9990：在所有阻擋型 modal 之上，但【刻意低於】.server-block(99999)
     —— 伺服器不可用時整個遊戲停擺，那一層必須蓋過萌寵盃通知。
     不過通知層本來就只在「沒有阻擋型 modal」時才顯示，z 不是用來搶版面的。
   ★ 不鎖 body scroll、不推 history：關閉只靠自己的兩顆按鈕。
   ★ 寬度一律 min()／max-width，不得產生水平捲軸（375/390/430 都要過）。
   ══════════════════════════════════════════════════════════════════════ */
#raceNotify{ display:none; }
/* ══ LIVE 通知（美觀驗收退回後重整）═══════════════════════════
   退回理由：「一顆金色圓球＋大白框＋巨大橘按鈕」過於空洞，像系統對話框。
   改法：改成「賽事快訊卡」——
     · 上緣一條賽道色帶＋LIVE 圓點，一眼知道是萌寵盃
     · 圓球換成獎盃徽章（沿用既有 cup-badge 素材，不新增美術）
     · 標題與說明左右留白收斂，卡片變窄變緊
     · 按鈕降低高度、改為「主＋次」一行兩顆，不再獨佔整張卡
   ★ 字級維持 50+ 可讀；可點高度仍在 44px 以上。 */
#raceNotify.show{
  display:flex; position:fixed; inset:0; z-index:9990;
  align-items:center; justify-content:center;
  padding:calc(20px + env(safe-area-inset-top,0px))
          calc(16px + env(safe-area-inset-right,0px))
          calc(20px + env(safe-area-inset-bottom,0px))
          calc(16px + env(safe-area-inset-left,0px));
  background:rgba(52,36,22,.52); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
#raceNotify .rn-card{
  position:relative; width:100%; max-width:min(300px, calc(100vw - 32px));
  box-sizing:border-box; padding:16px 16px 14px; border-radius:18px; text-align:center;
  background:linear-gradient(180deg,#fffdf5,#fff2da);
  border:1px solid #f0dcae;
  box-shadow:0 14px 34px rgba(70,45,10,.30);
  overflow:hidden;
}
/* 上緣賽道色帶：讓它一眼是「萌寵盃的快訊」而不是系統對話框 */
#raceNotify .rn-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background:linear-gradient(90deg,#f0b352,#e2892a,#f0b352);
}
#raceNotify .rn-badge{
  width:42px; height:42px; margin:4px auto 8px;
  background:url(icons/race/cup-badge.webp) center/contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(150,105,55,.28));
}
#raceNotify .rn-title{
  margin:0 0 4px; font-size:18px; font-weight:900; line-height:1.35; color:#6d4a22;
  letter-spacing:.3px; overflow-wrap:anywhere;
}
#raceNotify .rn-body{
  margin:0 0 12px; font-size:14px; line-height:1.6; color:#8d7a5c; overflow-wrap:anywhere;
}
#raceNotify .rn-go,
#raceNotify .rn-later{
  display:block; width:100%; box-sizing:border-box; border:0; cursor:pointer;
  font-family:inherit; font-weight:800; border-radius:12px;
  -webkit-tap-highlight-color:transparent;
}
#raceNotify .rn-go{
  padding:11px 14px; font-size:16px; color:#4a2f06;
  background:linear-gradient(180deg,#f5b845,#e09422);
  box-shadow:0 2px 0 #ab6f14, 0 3px 10px rgba(190,130,20,.26);
}
#raceNotify .rn-go::before{
  content:""; display:inline-block; width:8px; height:8px; margin-right:8px;
  border-radius:50%; background:#d8452f; vertical-align:1px;
  box-shadow:0 0 0 3px rgba(216,69,47,.22);
  animation:cwLiveDot 1.4s ease-in-out infinite;
}
#raceNotify .rn-go:active{ transform:translateY(2px); box-shadow:0 0 0 #ab6f14; }
#raceNotify .rn-later{
  margin-top:6px; padding:9px 14px; font-size:14px;
  color:#96805f; background:transparent; border:1px solid #ecdcc0;
}
#raceNotify .rn-go:focus-visible,
#raceNotify .rn-later:focus-visible{ outline:2px solid #b5791e; outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  #raceNotify.show{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  #raceNotify .rn-go::before{ animation:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   LOCAL QA 控制面板（race-qa.js）
   ★ 只有 localhost + ?raceqa=1 才會建立這個節點；Production 不存在。
   ★ 樣式刻意醜且明顯標示「模擬資料」，避免與正式畫面混淆。
   ══════════════════════════════════════════════════════════════════════ */
#raceQaPanel{
  position:fixed; z-index:99998;
  left:calc(8px + env(safe-area-inset-left,0px));
  right:calc(8px + env(safe-area-inset-right,0px));
  bottom:calc(8px + env(safe-area-inset-bottom,0px));
  max-height:46vh; overflow:auto; -webkit-overflow-scrolling:touch;
  box-sizing:border-box; padding:8px 10px 10px;
  background:rgba(24,20,16,.94); color:#ffe6b8;
  border:2px solid #ffb43c; border-radius:12px;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
#raceQaPanel.mini{ max-height:34px; overflow:hidden; }
#raceQaPanel .qa-bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
#raceQaPanel .qa-bar b{ color:#ffb43c; letter-spacing:1px; }
#raceQaPanel .qa-min{ background:#3a2f22; color:#ffe6b8; border:1px solid #6d5738;
  border-radius:6px; padding:2px 9px; cursor:pointer; font:inherit; }
#raceQaPanel .qa-now{ margin-top:6px; color:#9ff2c0; overflow-wrap:anywhere; }
#raceQaPanel .qa-cfg{ color:#c9b79a; overflow-wrap:anywhere; }
#raceQaPanel .qa-play{ display:flex; gap:6px; margin:8px 0 4px; flex-wrap:wrap; }
#raceQaPanel .qa-g{ margin:8px 0 3px; color:#ffb43c; }
#raceQaPanel .qa-row{ display:flex; flex-wrap:wrap; gap:5px; }
#raceQaPanel button{ background:#3a2f22; color:#ffe6b8; border:1px solid #6d5738;
  border-radius:7px; padding:4px 8px; cursor:pointer; font:inherit;
  max-width:100%; overflow-wrap:anywhere; }
#raceQaPanel button:hover{ background:#4d3f2d; }
#raceQaPanel .qa-hot{ background:#8a4a12; border-color:#ffb43c; font-weight:700; }
#raceQaPanel .qa-note{ margin-top:9px; color:#e08a8a; line-height:1.55; }

/* ══════════════════════════════════════════════════════════════════════
   萌寵盃｜正式直式 Race Stage（Batch 7-B）race-live.js 使用
   ★ 取代舊的水平進度條 .cw-track / .cw-lane（那是 placeholder）。
   ★ 直式 9:16。寬度跟著容器，高度由 JS 依 9:16 設定 ⇒ 不用 100vw，
     不可能製造水平捲軸。
   ★ HUD 畫在 canvas 內部的上緣安全帶，不會蓋到寵物的競爭帶。
   ══════════════════════════════════════════════════════════════════════ */
.cw-body--stage{ padding-bottom:calc(18px + env(safe-area-inset-bottom,0px)); }
:root{
  /* LIVE 舞台上下要讓給誰：標題列 ＋ 底部操作 ＋ iPhone 安全區。
     用 env() 納入 layout 計算，不是「看起來差不多有留空」。 */
  --cw-chrome: calc(150px + env(safe-area-inset-top) + env(safe-area-inset-bottom));
}
.cw-stage{
  position:relative; box-sizing:border-box;
  /* ★ 直式 9:16 由 CSS 保證，不用 JS 算高度。
     ⚠ 真頁抓到（一）：原本 JS 在容器尺寸還沒穩定時就 stage.style.height = w*16/9，
       量到 362 卻套用在 347 的容器上 ⇒ 比例變成 0.539，而且之後不會自我修正。
       aspect-ratio 交給瀏覽器，任何寬度都正確，resize 也會跟著走。
     ⚠ 真頁抓到（二）P0：只寫 width:100% 會【只看寬度不看高度】——
       865 寬的視窗長出 1488 高的舞台，是可視高度的兩倍，
       於是頁面出現 1013px 垂直捲動，而畫在 canvas 頂端的 HUD 直接被捲出畫面。
       ⇒ 舞台寬度改成【寬度與高度取小者】：
          min(100%, 可用高度 × 9/16)
       這同時解決三件事：
          · 手機：整場比賽落在單一 viewport，不需要捲動
          · 平板／桌機：不會被粗暴放大，而是置中 letterbox，兩側留給版面
          · Safari 網址列收合：用 dvh 而非 vh，可視高度變化時舞台跟著走 */
  width:min(100%, calc((100dvh - var(--cw-chrome)) * 9 / 16));
  max-width:100%;
  max-height:calc(100dvh - var(--cw-chrome));
  margin-inline:auto;
  aspect-ratio:9/16;
  /* ★Desktop / 寬螢幕：舞台改用 16:9★（最小 responsive 適配，不是第二套 renderer）
     ⚠ 這是 Desktop 素材接不上的 root cause：舞台一直固定 9:16，
       16:9 底圖進 drawPlate 的 cover-fit 會被裁掉左右約 68%，corridor 完全對不上。
     race data（result / entrants / seed / official_script）兩邊完全相同，
     只有【視覺舞台比例 + 該裝置的 corridor + 螢幕常數】不同。
     斷點 900px：低於它一律走已 PASS 的 mobile 行為，不影響手機。 */
  border-radius:16px; overflow:hidden; background:#1d1a15;
  box-shadow:0 8px 22px rgba(90,60,20,.22);
}
@media (min-width: 900px){
  .cw-stage{
    aspect-ratio:16/9;
    width:min(100%, calc((100dvh - var(--cw-chrome)) * 16 / 9));
    max-height:calc(100dvh - var(--cw-chrome));
  }
}
.cw-stagecv{ display:block; width:100%; height:100%; }
/* dvh 降級：不支援 dvh 的瀏覽器退回 vh，仍然是「取小者」不會爆高。 */
@supports not (height: 100dvh){
  .cw-stage{
    width:min(100%, calc((100vh - var(--cw-chrome)) * 9 / 16));
    max-height:calc(100vh - var(--cw-chrome));
  }
}

/* 名次列：完賽才有內容；未完賽顯示「跑完才公布」 */
.cw-order{ display:flex; flex-direction:column; gap:5px; margin-top:11px; }
.cw-order.is-pending{ padding:10px 12px; background:#fdf6e6; border-radius:12px; }
.cw-orow{
  display:flex; align-items:center; gap:8px; min-width:0;
  padding:6px 10px; border-radius:10px; background:#fdf6e6;
}
.cw-orow.is-me{ background:linear-gradient(90deg,#fff2d4,#ffe6b4); }
.cw-orow b{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#fff; background:#c08a3a;
}
.cw-orow.is-me b{ background:#d9822b; }
.cw-oname{
  flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:800; color:#6d4a22;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   v0.60.826 UX closure：把萌寵盃從「設定頁」改回「一場比賽」
   ----------------------------------------------------------------------
   ★手機 UI 層級★（舊版的問題是全部都是同寬橫條，像後台）：
     主 CTA   .cw-cta        ── 只有「玩家現在真的要做的那件事」才用
     次要     .cw-mini       ── 小型文字鈕，寬度只包住文字
     資訊     .cw-pass/.cw-slim/.cw-chip ── ★不包成按鈕★
   ══════════════════════════════════════════════════════════════════════ */

/* 下一場萌寵盃主卡：進頁第一視覺 */
#cupScreen .cw-hero{
  position:relative; overflow:hidden;
  margin:10px 0 14px; padding:18px 16px 16px;
  border-radius:22px; text-align:center;
  background:linear-gradient(180deg,#fffaf0,#fff3dc);
  border:1px solid rgba(196,150,76,.28);
  box-shadow:0 6px 18px rgba(150,110,50,.13);
}
.cw-hero .cw-eyebrow{ font-size:13px; letter-spacing:.06em; color:#a9762c; margin-bottom:2px; }
.cw-hero .cw-when{ font-size:19px; font-weight:800; color:#5b4326; margin:2px 0 6px; }
.cw-hero .cw-hm{ color:#c8892a; }
.cw-ask.big{ font-size:15px; color:#6b5535; margin:8px 0 12px; line-height:1.5; }

/* 寵物本人：主卡的主角 */
#cupScreen .cw-fig{ height:112px; display:flex; align-items:flex-end; justify-content:center; margin:2px 0 4px; }
#cupScreen .cw-fig img{ max-height:112px; max-width:60%; object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(120,90,50,.22)); }
.cw-fig.is-rest img{ filter:drop-shadow(0 4px 8px rgba(120,90,50,.18)) saturate(.85); opacity:.9; }
.cw-fig.is-empty{ height:96px; opacity:.75; }
@keyframes cwHop{ 0%,100%{transform:translateY(0)} 30%{transform:translateY(-14px)} 55%{transform:translateY(0)} 75%{transform:translateY(-6px)} }
.cw-fig.is-in img{ animation:cwHop 2.4s ease-in-out infinite; }
.cw-fig.is-cheer img{ animation:cwHop .62s ease-in-out 3; }
@media (prefers-reduced-motion:reduce){ .cw-fig img{ animation:none !important; } }

/* 報名成功演出（1.8 秒後由 JS 收回；重新整理不會重播） */
#cupScreen .cw-cheer{ margin:4px 0 2px; }
#cupScreen .cw-cheer b{ display:block; font-size:22px; color:#c8892a; letter-spacing:.04em; }
#cupScreen .cw-cheer span{ display:block; font-size:15px; color:#6b5535; margin-top:2px; }
#cupScreen .cw-cheer i{ display:block; font-style:normal; font-size:13px; color:#9a7c4e; margin-top:4px; }
#cupScreen .cw-spark{ position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle,#ffe9a8,#f0b83f); pointer-events:none; opacity:0;
  animation:cwSpark 1.5s ease-out forwards; }
.cw-spark.s1{ left:18%; top:38%; animation-delay:.05s; }
.cw-spark.s2{ right:20%; top:30%; animation-delay:.22s; }
.cw-spark.s3{ left:30%; top:22%; animation-delay:.4s; }
.cw-spark.s4{ right:28%; top:46%; animation-delay:.58s; }
@keyframes cwSpark{ 0%{opacity:0;transform:scale(.4) translateY(6px)} 35%{opacity:1;transform:scale(1.15) translateY(-6px)} 100%{opacity:0;transform:scale(.7) translateY(-22px)} }
@media (prefers-reduced-motion:reduce){ .cw-spark{ animation:none; opacity:0; } }

/* 參賽證：reload 後從 server 還原 join 也是這一張（★資訊，不是按鈕★） */
/* ⚠ 真頁看到的問題：灰底＋虛線框讀起來像「未完成／已停用」，
   但這其實是【報名成功】的確認 —— 玩家最想確認的一件事。
   改成實心綠票券感：白底、綠邊、綠色左右缺口，並加一個明確的勾。
   ★仍然不是按鈕★（規格：資訊不包成按鈕），所以沒有 hover/按壓態。 */
#cupScreen .cw-pass{
  position:relative; margin:10px auto 12px; max-width:280px; padding:14px 18px;
  border-radius:16px; background:#fff;
  border:2px solid #2f7a4f;
  box-shadow:0 3px 12px rgba(47,122,79,.18);
}
/* 票券兩側的缺口，讓它一眼是「參賽證」而不是灰掉的按鈕 */
#cupScreen .cw-pass::before,
#cupScreen .cw-pass::after{
  content:""; position:absolute; top:50%; width:14px; height:14px;
  margin-top:-7px; border-radius:50%;
  background:#fff3dc; border:2px solid #2f7a4f;
}
#cupScreen .cw-pass::before{ left:-8px; clip-path:inset(0 0 0 50%); }
#cupScreen .cw-pass::after{ right:-8px; clip-path:inset(0 50% 0 0); }
#cupScreen .cw-pass b{
  display:block; font-size:19px; font-weight:900; color:#2f7a4f; letter-spacing:.5px;
}
#cupScreen .cw-pass b::before{
  content:"✓"; display:inline-block; margin-right:7px;
  width:22px; height:22px; line-height:22px; border-radius:50%;
  background:#2f7a4f; color:#fff; font-size:14px; font-weight:900; vertical-align:-3px;
}
#cupScreen .cw-pass span{ display:block; font-size:14px; color:#5b4326; margin-top:3px; }
#cupScreen .cw-pass i{ display:block; font-style:normal; font-size:12.5px; color:#7a6242; margin-top:5px; }

/* 記憶台詞：牠剛好想起來的一句（不是每次都有） */
#cupScreen .cw-recall{
  margin:2px auto 10px; max-width:290px; padding:9px 13px 9px 30px;
  position:relative; text-align:left; font-size:13.5px; line-height:1.55;
  color:#7a5f38; background:rgba(255,255,255,.6); border-radius:14px;
}
.cw-rq{ position:absolute; left:11px; top:8px; font-size:14px; opacity:.65; }
/* 記憶引號：改用 CSS 畫的小對話泡，正式 UI 不用 emoji */
.cw-rq::before{ content:''; }

/* 次要操作：小型文字鈕，★不做成整頁寬橫條★ */
#cupScreen .cw-mini{
  display:inline-block; width:auto; margin:2px auto 0; padding:7px 15px;
  font-size:13.5px; color:#8a6f45; background:transparent;
  border:0; border-radius:12px; text-decoration:underline; text-underline-offset:3px;
}
#cupScreen .cw-mini:active{ color:#5b4326; }
.cw-mini.inline{ text-decoration:none; background:rgba(255,255,255,.7);
  border:1px solid rgba(176,132,58,.32); padding:6px 12px; }

/* 一行摘要（最近一場／成就數）：資訊列，不是按鈕 */
#cupScreen .cw-slim{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 12px; padding:11px 14px; border-radius:16px;
  background:rgba(255,255,255,.66); border:1px solid rgba(176,132,58,.2);
}
#cupScreen .cw-slimtxt{ display:flex; flex-direction:column; text-align:left; min-width:0; }
#cupScreen .cw-slimtxt b{ font-size:14.5px; color:#5b4326; }
#cupScreen .cw-slimtxt i{ font-style:normal; font-size:12px; color:#9a7c4e; margin-top:2px; }

/* 底部兩個入口：歷史全部收在這後面，首頁不再無限變長 */
#cupScreen .cw-entries{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:2px; }
#cupScreen .cw-entry{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:13px 13px; border-radius:16px; text-align:left;
  background:rgba(255,255,255,.72); border:1px solid rgba(176,132,58,.22);
}
#cupScreen .cw-entry b{ font-size:14px; color:#5b4326; }
#cupScreen .cw-entry i{ font-style:normal; font-size:12px; color:#9a7c4e; }

/* 回憶頁：0 場的 empty state（不再是八個「還沒有」） */
#cupScreen .cw-empty{ text-align:center; padding:22px 18px 20px; border-radius:20px;
  background:linear-gradient(180deg,#fffaf0,#fff4e1); border:1px solid rgba(196,150,76,.22); }
#cupScreen .cw-empty b{ display:block; font-size:17px; color:#5b4326; margin:6px 0 6px; }
#cupScreen .cw-empty span{ display:block; font-size:13.5px; color:#8a6f45; line-height:1.6; margin-bottom:14px; }

/* 有紀錄後的小摘要（3～4 個，不是八個大框） */
#cupScreen .cw-chips{ display:flex; gap:8px; margin:2px 0 4px; flex-wrap:wrap; }
#cupScreen .cw-chip{ flex:1 1 auto; min-width:74px; padding:9px 10px; border-radius:14px; text-align:center;
  background:rgba(255,255,255,.7); border:1px solid rgba(176,132,58,.2); }
#cupScreen .cw-chip i{ display:block; font-style:normal; font-size:11.5px; color:#9a7c4e; }
#cupScreen .cw-chip b{ display:block; font-size:15px; color:#5b4326; margin-top:2px; }

/* 故事時間線：回憶頁的主體 */
#cupScreen .cw-tl{ position:relative; padding-left:6px; }
#cupScreen .cw-tlrow{ display:flex; gap:11px; padding:11px 0; border-bottom:1px dashed rgba(176,132,58,.22); }
.cw-tlrow:last-child{ border-bottom:0; }
#cupScreen .cw-tlicon{ flex:0 0 30px; height:30px; line-height:30px; text-align:center; font-size:16px;
  border-radius:50%; background:rgba(255,255,255,.8); border:1px solid rgba(176,132,58,.24); }
#cupScreen .cw-tlbody{ flex:1 1 auto; text-align:left; min-width:0; }
#cupScreen .cw-tlbody b{ display:block; font-size:14.5px; color:#5b4326; margin-bottom:3px; }
#cupScreen .cw-tlbody span{ display:block; font-size:13px; color:#7a5f38; line-height:1.6; }
.cw-tlbody .cw-mini{ margin-top:6px; }

/* 認識的對手 */
#cupScreen .cw-rivals{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#cupScreen .cw-rival{ padding:10px 12px; border-radius:14px; text-align:left;
  background:rgba(255,255,255,.68); border:1px solid rgba(176,132,58,.2); }
#cupScreen .cw-rival b{ display:block; font-size:14px; color:#5b4326; }
#cupScreen .cw-rival i{ font-style:normal; font-size:11.5px; color:#9a7c4e; }

/* ══════════════════════════════════════════════════════════════════════
   成就收藏｜可長大的架構（分類 → 章節 → 卡片）
   ----------------------------------------------------------------------
   ★頁面長度只跟「展開中的那一章」有關★，與成就總數無關 ⇒ 100/300 個也不會變長頁。
   ★不用灰圓 placeholder★：未解鎖是壓印在收藏冊上的獎章凹槽（silhouette），
     解鎖才真的點亮 —— 玩家看到的是收藏冊，不是資料列。
   ══════════════════════════════════════════════════════════════════════ */
#cupScreen .cw-achtop{
  padding:15px 16px 14px; border-radius:20px; margin-bottom:12px;
  background:linear-gradient(180deg,#fffaf0,#fdefd6);
  border:1px solid rgba(196,150,76,.26); box-shadow:0 5px 14px rgba(150,110,50,.1);
}
#cupScreen .cw-achtop b{ display:block; font-size:19px; color:#5b4326; letter-spacing:.02em; }
#cupScreen .cw-achtop span{ display:block; font-size:13px; color:#8a6f45; margin-top:5px; }
#cupScreen .cw-achtop i{ display:block; font-style:normal; font-size:12.5px; color:#9a7c4e; margin-top:3px; }
#cupScreen .cw-achtop u{ text-decoration:none; color:#c8892a; }

/* 分類：橫向滑動 */
#cupScreen .cw-tabs{
  display:flex; gap:7px; overflow-x:auto; padding:2px 2px 8px; margin:0 -2px 4px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cw-tabs::-webkit-scrollbar{ display:none; }
#cupScreen .cw-tab{
  flex:0 0 auto; padding:7px 13px; font-size:13px; border-radius:999px; white-space:nowrap;
  color:#8a6f45; background:rgba(255,255,255,.66); border:1px solid rgba(176,132,58,.24);
}
#cupScreen .cw-tab.on{ color:#5b4326; background:linear-gradient(180deg,#f7e3b6,#eecf90);
  border-color:rgba(176,132,58,.5); font-weight:700; }

/* 章節：accordion */
#cupScreen .cw-chap{
  display:flex; align-items:center; gap:9px; width:100%; margin:8px 0 0; padding:12px 14px;
  border-radius:16px; text-align:left;
  background:rgba(255,255,255,.6); border:1px solid rgba(176,132,58,.2);
}
#cupScreen .cw-chap.on{ background:rgba(255,255,255,.86); border-color:rgba(176,132,58,.4); }
#cupScreen .cw-caret{ color:#b39a6d; font-size:11px; width:12px; }
#cupScreen .cw-chap b{ flex:1 1 auto; font-size:14.5px; color:#5b4326; }
#cupScreen .cw-chap i{ font-style:normal; font-size:12px; color:#9a7c4e; }

/* 卡片 */
#cupScreen .cw-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:9px; }
#cupScreen .cw-badge{
  position:relative; padding:15px 12px 13px; border-radius:18px; text-align:center; overflow:hidden;
  background:linear-gradient(180deg,#fdf6e7,#f6ead2); border:1px solid rgba(176,132,58,.24);
}
.cw-badge.span2{ grid-column:span 2; }
.cw-badge .cw-bdisc{
  display:block; width:50px; height:50px; margin:0 auto 8px; line-height:50px; font-size:23px;
  border-radius:50%;
  /* 未解鎖＝壓在收藏冊上的凹槽 */
  background:radial-gradient(circle at 50% 38%, #efe2c6, #e2d2ae);
  box-shadow:inset 0 2px 5px rgba(120,92,48,.3), inset 0 -2px 3px rgba(255,255,255,.6);
  color:#b9a375;
}
.cw-badge.got .cw-bdisc{
  background:radial-gradient(circle at 50% 34%, #ffeaa8, #e9b446 62%, #cf9223);
  box-shadow:0 3px 9px rgba(190,140,40,.4), inset 0 -2px 4px rgba(150,105,20,.35);
  color:#fff;
}
#cupScreen .cw-badge b{ display:block; font-size:14px; color:#5b4326; line-height:1.35; }
.cw-badge.got b{ color:#7a5312; }
#cupScreen .cw-badge i{ display:block; font-style:normal; font-size:11.5px; color:#9a7c4e; margin-top:4px; line-height:1.55; }
#cupScreen .cw-badge em{ display:inline-block; font-style:normal; margin-top:7px; font-size:11px; color:#a9885a;
  background:rgba(233,180,70,.18); border-radius:8px; padding:2px 9px; }
#cupScreen .cw-badge u{ display:inline-block; margin-top:7px; font-size:11px; text-decoration:none; color:#a9885a;
  background:rgba(176,132,58,.12); border-radius:999px; padding:2px 10px; }
.cw-badge u.next{ background:rgba(233,180,70,.2); color:#9a6d16; }
.cw-badge:not(.got){ opacity:.9; }
.cw-badge:not(.got) b{ color:#8a7350; }
/* 隱藏故事：只給神秘感，不揭露條件 */
.cw-badge.mystery{ background:linear-gradient(180deg,#f3ecdd,#e9dfc9); }
.cw-badge.mystery .cw-bdisc{ color:#c3b28c; font-size:26px; }
.cw-badge.mystery b{ letter-spacing:.14em; color:#a3906a; }

/* 剛解鎖：翻牌一次（由 JS 加 .fresh，不會每次進頁重播） */
@keyframes cwFlip{ 0%{transform:rotateY(90deg) scale(.9); opacity:0} 60%{transform:rotateY(-8deg) scale(1.03); opacity:1} 100%{transform:none} }
.cw-badge.fresh{ animation:cwFlip .62s cubic-bezier(.2,.8,.3,1) both; }
@media (prefers-reduced-motion:reduce){ .cw-badge.fresh{ animation:none; } }

/* ── 平板：左側分類導覽 ＋ 右側內容，卡片 3～4 欄 ────────────────────
   ★不是把手機版等比放大★ */
@media (min-width:720px){
  #cupScreen .cw-body{ max-width:1040px; margin:0 auto; }
  .cw-achwrap{ display:grid; grid-template-columns:196px 1fr; gap:18px; align-items:start; }
  .cw-achwrap .cw-tabs{
    flex-direction:column; overflow:visible; gap:5px; padding:0;
    position:sticky; top:74px;
  }
  .cw-achwrap .cw-tab{ width:100%; text-align:left; border-radius:14px; padding:10px 14px; }
  .cw-grid{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .cw-badge.span2{ grid-column:span 1; }
}
@media (min-width:980px){
  .cw-grid{ grid-template-columns:repeat(4,1fr); }
  .cw-badge.span2{ grid-column:span 2; }
}

/* ── 成就四段狀態：平淡 → 快亮了 → 被點亮 → 穩定收藏 ─────────────────
   ★不是只換 opacity★：飽和度、邊框、內陰影、內部高光、外圈光暈、
     獎章材質、文字強調、進度條顏色都跟著走。 */
.cw-badge.ach--locked{ filter:saturate(.55); }
.cw-badge.ach--locked .cw-bdisc{
  background:radial-gradient(circle at 50% 38%, #ece2cc, #ddd0b4);
  box-shadow:inset 0 3px 6px rgba(120,92,48,.34), inset 0 -2px 3px rgba(255,255,255,.5);
  color:#c0b191;
}
.cw-badge.ach--locked b{ color:#93805e; }

/* 快完成：開始有一點暖光，但★絕不假裝已解鎖★ */
.cw-badge.ach--progress{
  filter:none;
  border-color:rgba(214,164,72,.55);
  background:linear-gradient(180deg,#fff7e6,#f8ecd4);
  box-shadow:0 2px 10px rgba(200,150,60,.14), inset 0 0 18px rgba(255,214,130,.28);
}
.cw-badge.ach--progress .cw-bdisc{
  background:radial-gradient(circle at 50% 36%, #f7e6bb, #e4d2a8);
  box-shadow:inset 0 2px 5px rgba(120,92,48,.22), 0 0 10px rgba(233,180,70,.3);
  color:#c9a45e;
}
.cw-badge.ach--progress u{ background:rgba(233,180,70,.26); color:#8a6212; }

/* 已點亮：正式色彩＋材質高光＋極弱呼吸光 */
.cw-badge.ach--unlocked{
  filter:none;
  background:linear-gradient(180deg,#fffaef,#f8edd6);
  border-color:rgba(206,155,60,.5);
  box-shadow:0 3px 12px rgba(190,145,55,.18);
}
.cw-badge.ach--unlocked .cw-bdisc{
  background:radial-gradient(circle at 46% 32%, #fff3c4, #ecb84c 55%, #cd8f1e);
  box-shadow:0 3px 10px rgba(190,140,40,.45), inset 0 -3px 5px rgba(140,96,16,.4),
             inset 0 3px 6px rgba(255,255,255,.55);
  color:#fff;
}
@keyframes cwBreath{ 0%,100%{box-shadow:0 3px 12px rgba(190,145,55,.18)} 50%{box-shadow:0 3px 15px rgba(214,164,72,.32)} }
.cw-badge.ach--unlocked{ animation:cwBreath 4.5s ease-in-out infinite; }

/* 重要里程碑／隱藏故事：多一圈暖金光（不是 RPG 紫橙裝） */
.cw-badge.ach--important.ach--unlocked{
  border-color:rgba(214,164,72,.7);
  box-shadow:0 4px 16px rgba(206,155,60,.3), 0 0 0 1px rgba(255,226,160,.7) inset;
}
.cw-badge.mystery.ach--unlocked{
  background:linear-gradient(180deg,#fff8ec,#f4e9d8);
}
.cw-badge.mystery.ach--unlocked .cw-bdisc::after{
  content:'✦'; position:absolute; margin-left:-32px; margin-top:-10px; font-size:11px; color:#f0d18a;
}

/* 剛解鎖：平淡 → 點亮 → 閃一下 → 穩定（約 1.4 秒，只播一次） */
@keyframes cwLight{
  0%{ filter:saturate(.4) brightness(.94); transform:scale(.94) }
  35%{ filter:saturate(1.25) brightness(1.16); transform:scale(1.04) }
  60%{ filter:saturate(1.05) brightness(1.05); transform:scale(1) }
  100%{ filter:none; transform:none }
}
@keyframes cwHalo{ 0%{opacity:0;transform:scale(.7)} 40%{opacity:.85;transform:scale(1.25)} 100%{opacity:0;transform:scale(1.7)} }
.cw-badge.is-new{ animation:cwLight 1.4s ease-out both; }
.cw-badge.is-new::before{
  content:''; position:absolute; left:50%; top:26px; width:50px; height:50px; margin-left:-25px;
  border-radius:50%; background:radial-gradient(circle,#ffeaa8 0%,rgba(255,214,120,.35) 45%,transparent 70%);
  animation:cwHalo 1.2s ease-out both; pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .cw-badge.ach--unlocked,.cw-badge.is-new,.cw-badge.is-new::before{ animation:none; }
}

/* ── 成長階段小標籤 ────────────────────────────────────────────────────
   ⚠ 這顆原本叫 .cw-stage —— 但 .cw-stage 在本檔上方【已經是 Race 的 9:16 舞台容器】。
     撞名的結果是它繼承了 962px 高的深色舞台樣式 ⇒ 主卡中央出現一大塊黑色。
     ★同一份 CSS 內的命名衝突比跨檔衝突更難發現★，所以改成專屬名稱。 */
#cupScreen .cw-lvtag{
  position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  font-size:11px; letter-spacing:.08em; color:#9a7c4e;
  background:rgba(255,255,255,.86); border:1px solid rgba(176,132,58,.24);
  border-radius:999px; padding:1px 9px; white-space:nowrap; line-height:1.5;
}

/* ── 正式頁面不得出現瀏覽器原生控制項 ──────────────────────────────────
   萌寵盃裡的每一顆 button 都要是遊戲 UI。這一條是保險絲：
   即使將來有人漏加 class，也不會掉回灰色原生按鈕。

   ★★ P0 修正（Human Visual Gate：桌機上返回鍵與主要按鈕「看起來不能按」）★★
   ─────────────────────────────────────────────────────────────────────
   root cause 不是配色太淡，是【這條保險絲把有樣式的按鈕一起洗掉了】：
     選擇器 `#cupScreen button` specificity = (1,0,1)
     被它壓過的  `.cw-back` / `.cw-cta` / `.cw-cta2` / `.cw-pickbtn` … = (0,1,0)
   而且這一條寫在檔案第 894 行、那些類別在 110～330 行 ⇒ 又晚又重。
   結果：
     ‧ background:transparent → .cw-back 的米白藥丸底、.cw-cta 的綠色實心【全部消失】
     ‧ border:0               → .cw-back 的白邊框消失，變成純文字
     ‧ color:inherit          → .cw-cta 的白字被換成繼承的棕字
   實測 computed style：.cw-back 的 background-color 是 rgba(0,0,0,0)、border-width 0px。
   所以玩家看到的「淡到看不出可以按」是這條規則造成的，不是設計選擇。

   修法：保險絲只負責「不要掉回原生外觀」這件事，
   把會覆蓋視覺的三個宣告（background／border／color）限縮到【沒有 class 的 button】。
   有 class 的按鈕一律由自己的規則決定長相。 */
#cupScreen button{
  -webkit-appearance:none; appearance:none; font:inherit;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
#cupScreen button:not([class]){
  background:transparent; border:0; color:inherit;
}

/* ── 生涯條：Fei ／ Lv ／ 段位 ／ EXP ──────────────────────────────────
   ★不是資料框★：它是角色卡的一部分，緊貼在 Fei 下面。 */
#cupScreen .cw-fig.big{ height:150px; margin-bottom:12px; }
#cupScreen .cw-fig.big img{ max-height:150px; max-width:74%; }
#cupScreen .cw-career{ margin:2px auto 12px; max-width:260px; }
#cupScreen .cw-crow{ display:flex; align-items:baseline; justify-content:center; gap:7px; }
#cupScreen .cw-crow b{ font-size:16px; color:#5b4326; }
#cupScreen .cw-clv{ font-size:15px; font-weight:800; color:#c8892a; letter-spacing:.02em; }
#cupScreen .cw-crank{
  font-size:11.5px; color:#8a6f45; letter-spacing:.06em;
  background:linear-gradient(180deg,#f7e7c2,#eed9a8);
  border:1px solid rgba(176,132,58,.34); border-radius:999px; padding:1px 9px;
}
#cupScreen .cw-cbar{
  height:7px; margin:7px 0 4px; border-radius:999px; overflow:hidden;
  background:rgba(176,132,58,.16); box-shadow:inset 0 1px 2px rgba(120,92,48,.18);
}
#cupScreen .cw-cbar i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#f0c766,#e0a02c);
  transition:width .7s cubic-bezier(.2,.8,.3,1);
}
#cupScreen .cw-cexp{ font-size:11px; color:#9a7c4e; letter-spacing:.03em; }

/* 階段小標籤要貼在 Fei 下面 ⇒ 容器必須是 positioned */
#cupScreen .cw-fig{ position:relative; }

/* ══════════════════════════════════════════════════════════════════════
   首頁壓縮：日期＋Fei＋LV＋段位＋EXP＋報名 ＝ 同一張「下一場參賽證」
   ----------------------------------------------------------------------
   ★不是靠刪內容變短★，是把本來就屬於同一件事的東西收成一個視覺群組，
   並把每一段的垂直間距收斂，讓 390×844 第一屏就能看到主卡全貌
   並露出下方的回憶／成就入口。
   ══════════════════════════════════════════════════════════════════════ */
#cupScreen .cw-hero{ margin:8px 0 10px; padding:14px 14px 12px; }
#cupScreen .cw-hero .cw-eyebrow{ font-size:12.5px; margin-bottom:0; }
#cupScreen .cw-hero .cw-when{ font-size:18px; margin:0 0 2px; }
#cupScreen .cw-fig.big{ height:132px; margin:2px 0 6px; }
#cupScreen .cw-fig.big img{ max-height:132px; max-width:56%; }
#cupScreen .cw-career{ margin:0 auto 10px; max-width:252px; }
#cupScreen .cw-cstage{
  font-size:10.5px; color:#a9906a; letter-spacing:.06em;
  background:rgba(255,255,255,.7); border:1px solid rgba(176,132,58,.2);
  border-radius:999px; padding:0 7px;
}
/* 報名區收短：只確認狀態，不佔主卡大面積 */
#cupScreen .cw-pass{ margin:0 auto 8px; max-width:284px; padding:9px 12px 8px; }
#cupScreen .cw-pass b{ font-size:16px; }
#cupScreen .cw-pass span{ font-size:13px; margin-top:1px; }
#cupScreen .cw-pass i{ font-size:11.5px; margin-top:2px; }
#cupScreen .cw-more{ top:3px; right:3px; height:24px; }
/* 記憶短句：一行 */
#cupScreen .cw-recall{ margin:0 auto 2px; padding:7px 12px 7px 28px; font-size:13px; }
#cupScreen .cw-ask.big{ font-size:14.5px; margin:4px 0 10px; }
/* 空狀態 */
#cupScreen .cw-slim.is-first{ align-items:flex-start; padding:10px 13px; }
#cupScreen .cw-slimicon{ flex:0 0 26px; font-size:16px; line-height:1.4; }
#cupScreen .cw-slim.is-first .cw-slimtxt i{ font-size:12px; line-height:1.55; }
/* 入口卡收短 */
#cupScreen .cw-entry{ padding:11px 12px; }

/* Fei 放大約 30%：★不加高主卡★，改成吃掉角色周圍原本的留白 */
#cupScreen .cw-fig.big{ height:150px; margin:-6px 0 2px; }
#cupScreen .cw-fig.big img{ max-height:150px; max-width:72%; }
#cupScreen .cw-hero .cw-when{ margin-bottom:0; }
#cupScreen .cw-career{ margin-top:-2px; }
/* 成就階數：不寫總階數 */
#cupScreen .cw-badge em.tier{
  background:rgba(176,132,58,.14); color:#8a6f45; margin-right:4px;
}

/* ── 變更報名的小卡（Bottom Sheet）─────────────────────────────────────
   ⚠ 這一段先前在整理成就 CSS 時被我連同舊區塊一起截掉了 ——
     結果 sheet 掉回文件流、直接顯示在首頁下方，按鈕也變回瀏覽器原生外觀。
     這就是「首頁莫名出現『這場要讓 Fei 休息嗎？』」的真正原因。
   平常完全不存在於視覺層；點 ⋯ 才由 JS 掛上來。 */
#cupScreen .cw-sheetwrap{
  position:fixed; left:0; right:0; top:0; bottom:0; z-index:60;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(60,44,24,.36); animation:cwFade .16s ease-out;
  /* 遮罩本身不可捲，也不把手勢傳給後面的頁面 */
  overscroll-behavior:none; touch-action:none;
}
/* 小卡內部要能正常捲 */
#cupScreen .cw-sheet{ touch-action:auto; }
@keyframes cwFade{ from{opacity:0} to{opacity:1} }
#cupScreen .cw-sheet{
  width:100%; max-width:430px; text-align:center;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));
  border-radius:24px 24px 0 0; background:linear-gradient(180deg,#fffaf0,#fff3dc);
  box-shadow:0 -8px 26px rgba(90,66,34,.26); animation:cwUp .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes cwUp{ from{transform:translateY(30px)} to{transform:translateY(0)} }
#cupScreen .cw-sheet b{ display:block; font-size:17px; color:#5b4326; }
#cupScreen .cw-sheet span{ display:block; font-size:13.5px; color:#8a6f45; margin:6px 0 16px; line-height:1.6; }
#cupScreen .cw-soft{
  display:block; width:100%; margin-top:9px; padding:12px 14px; font-size:14px;
  color:#8a6f45; background:rgba(255,255,255,.74); border:1px solid rgba(176,132,58,.28);
  border-radius:16px;
}
#cupScreen .cw-soft:active{ background:rgba(176,132,58,.12); }
@media (prefers-reduced-motion:reduce){
  #cupScreen .cw-sheetwrap,#cupScreen .cw-sheet{ animation:none; }
}

/* ⚠ Fei 放大時用了 margin-top:-6px 去偷空間 —— 那會把牠拉上去壓到日期文字。
   ★負值只能放在下緣★：往下收攏生涯列，絕不往上覆蓋標題。 */
#cupScreen .cw-fig.big{ height:150px; margin:4px 0 -8px; }
#cupScreen .cw-hero .cw-when{ margin:0 0 2px; }

/* ⚠ 這一段也是同一次截斷的受害者：只剩下後面的位置微調，
   base 規則（絕對定位、無邊框、透明底）整段消失 ⇒ ⋯ 會變成一顆有框的按鈕。
   由 tests/race-cup-css-contract.mjs 釘住。 */
#cupScreen .cw-more{
  position:absolute; right:6px; top:5px; width:30px; height:26px; padding:0;
  border:0; background:transparent; color:#b39a6d; font-size:17px; line-height:1;
  border-radius:10px; letter-spacing:.06em;
}
#cupScreen .cw-more:active{ background:rgba(176,132,58,.14); color:#7a5f38; }

/* ══════════════════════════════════════════════════════════════════════
   B 生涯結算／C 生涯收藏／D 玩家說明／E 美術 slot
   ══════════════════════════════════════════════════════════════════════ */

/* ── E：正式美術 slot（載不到就 remove，露出底下的 CSS 徽章）───────── */
#cupScreen .cw-art{ width:100%; height:100%; object-fit:contain; display:block; }
#cupScreen .cw-rankbadge{
  display:inline-block; width:44px; height:44px; border-radius:50%; overflow:hidden;
  /* fallback：正式 PNG 沒到齊時就是這顆暖色圓章，不會破圖 */
  background:radial-gradient(circle at 46% 34%, #fff3c4, #ecb84c 58%, #cd8f1e);
  box-shadow:0 2px 7px rgba(190,140,40,.35), inset 0 -2px 4px rgba(140,96,16,.32);
}
#cupScreen .cw-rankbadge.lg{ width:78px; height:78px; }
#cupScreen .cw-medal{
  display:inline-block; width:52px; height:52px; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 46% 34%, #fdf0cf, #e6d3a6);
  box-shadow:inset 0 2px 5px rgba(120,92,48,.24);
}
#cupScreen .cw-unbadge{
  display:inline-block; width:40px; height:40px; border-radius:12px; overflow:hidden; flex:0 0 40px;
  background:linear-gradient(180deg,#fdf6e7,#f2e5cb); border:1px solid rgba(176,132,58,.24);
}

/* ── B：生涯結算（一段完整演出）─────────────────────────────────── */
#cupScreen .cw-settle{
  margin:10px 0 12px; padding:18px 16px 16px; border-radius:22px; text-align:center;
  background:linear-gradient(180deg,#fffaf0,#fdefd6);
  border:1px solid rgba(196,150,76,.3); box-shadow:0 5px 16px rgba(150,110,50,.13);
}
#cupScreen .cw-seyebrow{ font-size:13px; color:#a9762c; }
#cupScreen .cw-srank{ font-size:26px; font-weight:800; color:#5b4326; margin:2px 0 6px; }
#cupScreen .cw-sexp{ font-size:15px; color:#c8892a; font-weight:700; margin-bottom:8px; }
#cupScreen .cw-sbar{
  height:9px; margin:0 auto 5px; max-width:260px; border-radius:999px; overflow:hidden;
  background:rgba(176,132,58,.16); box-shadow:inset 0 1px 2px rgba(120,92,48,.18);
}
#cupScreen .cw-sbar i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#f0c766,#e0a02c);
  transition:width 1.1s cubic-bezier(.2,.8,.3,1);
}
#cupScreen .cw-slv{ font-size:12px; color:#9a7c4e; }
#cupScreen .cw-sup{ margin-top:10px; font-size:17px; color:#5b4326; }
#cupScreen .cw-sup b{ color:#c8892a; }
#cupScreen .cw-srankup{
  display:flex; align-items:center; justify-content:center; gap:11px; margin-top:12px;
  padding:10px 14px; border-radius:16px; background:rgba(255,255,255,.72);
  border:1px dashed rgba(176,132,58,.45);
}
#cupScreen .cw-srankup i{ display:block; font-style:normal; font-size:11.5px; color:#9a7c4e; }
#cupScreen .cw-srankup b{ display:block; font-size:15px; color:#7a5312; }
#cupScreen .cw-snew{ margin-top:11px; }
#cupScreen .cw-snew i{ display:block; font-style:normal; font-size:11.5px; color:#9a7c4e; margin-bottom:5px; }
#cupScreen .cw-snewchip{
  display:inline-block; margin:0 4px 4px; padding:5px 12px; font-size:13px; color:#7a5312;
  border-radius:999px; background:linear-gradient(180deg,#f7e3b6,#eecf90);
  border:1px solid rgba(176,132,58,.42);
}
#cupScreen .cw-smemo{
  margin:12px auto 0; max-width:290px; padding:9px 13px; border-radius:14px;
  font-size:13px; line-height:1.6; color:#7a5f38; background:rgba(255,255,255,.66);
}
@keyframes cwRise{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
#cupScreen .cw-settle.is-fresh .cw-srank,
#cupScreen .cw-settle.is-fresh .cw-sexp,
#cupScreen .cw-settle.is-fresh .cw-sup,
#cupScreen .cw-settle.is-fresh .cw-srankup,
#cupScreen .cw-settle.is-fresh .cw-snew{ animation:cwRise .5s ease-out both; }
#cupScreen .cw-settle.is-fresh .cw-sexp{ animation-delay:.18s; }
#cupScreen .cw-settle.is-fresh .cw-sup{ animation-delay:.9s; }
#cupScreen .cw-settle.is-fresh .cw-srankup{ animation-delay:1.15s; }
#cupScreen .cw-settle.is-fresh .cw-snew{ animation-delay:1.4s; }
@media (prefers-reduced-motion:reduce){
  #cupScreen .cw-settle.is-fresh *{ animation:none !important; }
  #cupScreen .cw-sbar i{ transition:none; }
}

/* ── C：生涯收藏 ────────────────────────────────────────────────── */
#cupScreen .cw-cvhero{
  display:flex; align-items:center; gap:14px; padding:15px 16px; margin-bottom:12px;
  border-radius:20px; background:linear-gradient(180deg,#fffaf0,#fdefd6);
  border:1px solid rgba(196,150,76,.28);
}
#cupScreen .cw-cvid{ flex:1 1 auto; min-width:0; text-align:left; }
#cupScreen .cw-cvid b{ display:block; font-size:17px; color:#5b4326; }
#cupScreen .cw-cvid > span{
  display:inline-block; margin:4px 0 7px; font-size:11.5px; color:#8a6f45;
  background:linear-gradient(180deg,#f7e7c2,#eed9a8);
  border:1px solid rgba(176,132,58,.34); border-radius:999px; padding:1px 10px;
}
#cupScreen .cw-rankrow{ display:flex; gap:8px; }
#cupScreen .cw-rankcell{ flex:1 1 0; text-align:center; filter:saturate(.35); opacity:.55; }
#cupScreen .cw-rankcell.got{ filter:none; opacity:1; }
#cupScreen .cw-rankcell i{ display:block; font-style:normal; font-size:11px; color:#8a6f45; margin-top:3px; }
#cupScreen .cw-medalrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
#cupScreen .cw-medalcell{ text-align:center; filter:saturate(.3); opacity:.5; }
#cupScreen .cw-medalcell.got{ filter:none; opacity:1; }
#cupScreen .cw-medalcell i{ display:block; font-style:normal; font-size:11.5px; color:#8a6f45; margin-top:4px; }
#cupScreen .cw-unlist{ display:flex; flex-direction:column; gap:8px; }
#cupScreen .cw-unrow{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:14px;
  background:rgba(255,255,255,.7); border:1px solid rgba(176,132,58,.2);
}
#cupScreen .cw-unbody{ flex:1 1 auto; min-width:0; text-align:left; }
#cupScreen .cw-unbody b{ display:block; font-size:14px; color:#5b4326; }
#cupScreen .cw-unbody b em{ font-style:normal; font-size:11px; color:#a9885a;
  background:rgba(176,132,58,.14); border-radius:8px; padding:1px 7px; }
#cupScreen .cw-unbody i{ font-style:normal; font-size:11.5px; color:#9a7c4e; }

/* ── D：玩家說明 ───────────────────────────────────────────────── */
#cupScreen .cw-sheet.is-tall{ max-height:78vh; overflow-y:auto; }
#cupScreen .cw-howto{ text-align:left; margin:4px 0 14px; }
#cupScreen .cw-howto h4{ margin:14px 0 3px; font-size:14.5px; color:#5b4326; }
#cupScreen .cw-howto h4:first-child{ margin-top:4px; }
#cupScreen .cw-howto p{ margin:0; font-size:13px; line-height:1.75; color:#7a5f38; }
#cupScreen .cw-entry.wide{ width:100%; margin-top:10px; }
#cupScreen .cw-mini.center{ display:block; margin:12px auto 0; text-align:center; }

/* ── 段位參賽證外框：★純裝飾層，不參與版面、不吃點擊★ ─────────────────
   1200×760 橫向圖鋪滿主卡，用 object-fit:fill 保持與主卡同比例；
   因為圖本身四角裝飾收在角落、邊緣只有可重複細線，所以不會變形。
   z-index 壓在內容之下 ⇒ 不可能遮住 Fei／日期／LV／段位／EXP／報名狀態。 */
#cupScreen .cw-passframe{
  position:absolute; left:0; top:0; right:0; bottom:0;
  pointer-events:none; z-index:0; border-radius:22px; overflow:hidden;
}
/* ⚠ 這裡曾經寫 padding:22px 22px 18px —— 那是「猜一個內距」，
   跟外框實際的裝飾範圍無關，所以文字才會一直壓到葉片與底部圓章。
   正確做法見檔尾「主卡 content safe area」。 */
#cupScreen .cw-passframe .cw-art{ object-fit:fill; }
#cupScreen .cw-hero > *:not(.cw-passframe){ position:relative; z-index:1; }

/* ══════════════════════════════════════════════════════════════════════
   UX 收斂：減字、少重複、少長距離捲動、正式 UI 0 emoji
   ══════════════════════════════════════════════════════════════════════ */

/* ── 純 CSS 小圖示（取代 emoji；正式 PNG 到齊後再換）───────────────── */
#cupScreen .cw-eico, #cupScreen .cw-tico, #cupScreen .cw-slimicon, #cupScreen .cw-tlicon, #cupScreen .cw-rq{
  display:inline-block; position:relative;
}
#cupScreen .cw-eico{ width:22px; height:22px; margin-bottom:4px; border-radius:7px;
  background:linear-gradient(180deg,#f7e3b6,#eecf90); border:1px solid rgba(176,132,58,.34); }
#cupScreen .cw-eico::after{ content:''; position:absolute; inset:5px; border-radius:3px;
  background:rgba(122,83,18,.55); }
#cupScreen .cw-eico.ic-memory::after{ inset:6px 5px; border-radius:2px 4px 4px 2px; }
#cupScreen .cw-eico.ic-trophy::after{ inset:4px 6px 7px; border-radius:3px 3px 8px 8px; }
#cupScreen .cw-eico.ic-badge::after{ inset:4px; border-radius:50%; }
#cupScreen .cw-tico{ width:12px; height:12px; margin-right:5px; vertical-align:-1px;
  border-radius:4px; background:rgba(176,132,58,.42); }
#cupScreen .cw-tab.on .cw-tico{ background:#c8892a; }
#cupScreen .cw-slimicon{ width:0; margin:0; }
#cupScreen .cw-tlicon{ font-size:0; }
#cupScreen .cw-tlicon::after{ content:''; position:absolute; left:9px; top:9px;
  width:12px; height:12px; border-radius:50%; background:rgba(176,132,58,.5); }
#cupScreen .cw-tlicon.ic-cup::after{ background:#e0a02c; }
#cupScreen .cw-tlicon.ic-rest::after{ background:rgba(140,150,170,.5); }
#cupScreen .cw-rq{ width:13px; height:11px; border-radius:6px 6px 6px 2px;
  background:rgba(176,132,58,.3); top:1px; }
#cupScreen .cw-rq::before{ content:''; }

/* ── 三個入口：一排三張、小字一行 ───────────────────────────────── */
#cupScreen .cw-entries.three{ grid-template-columns:1fr 1fr 1fr; gap:8px; }
#cupScreen .cw-entries.three .cw-entry{ padding:11px 9px; align-items:center; text-align:center; }
#cupScreen .cw-entries.three .cw-entry b{ font-size:13px; }
#cupScreen .cw-entries.three .cw-entry i{ font-size:11px; line-height:1.4; }

/* ── 報名區：少一行，字距放鬆（50+ 玩家）──────────────────────────── */
#cupScreen .cw-pass b{ font-size:17px; }
#cupScreen .cw-pass i{ font-size:12.5px; margin-top:4px; }
#cupScreen .cw-slim.is-first{ align-items:center; }
#cupScreen .cw-slim.is-first .cw-slimtxt b{ font-size:14.5px; }

/* ── Bottom Sheet：頭尾固定，只有中間捲動 ─────────────────────────── */
body.cw-lock{ overflow:hidden !important; }
#cupScreen .cw-sheet.is-doc{
  display:flex; flex-direction:column; padding:0;
  /* ★iPhone Safe Area★
     ⚠ 原本是 max-height:82vh。iOS Safari 的 vh 把網址列高度也算進去，
       所以 82vh 在瀏海機上可能超出實際可視高度 ——
       底部「知道了」會被 Home Indicator 壓住，或整條被推出畫面外。
     改成兩者取小：
       ① 82dvh                                 → 動態可視高度
       ② 100dvh − 上安全區 − 24px 呼吸         → 頂端不會鑽進瀏海／Dynamic Island
     舊瀏覽器沒有 dvh 的降級寫在下面（不能只留 dvh，否則整條規則被丟掉）。 */
  max-height:82vh;
  max-height:min(82dvh, calc(100dvh - env(safe-area-inset-top,0px) - 24px));
  /* 捲到底不要把後面的頁面一起帶著捲（scroll chaining） */
  overscroll-behavior:contain;
}
#cupScreen .cw-shead{
  flex:0 0 auto; position:relative; padding:16px 46px 12px;
  border-bottom:1px solid rgba(176,132,58,.2);
}
#cupScreen .cw-shead b{ font-size:17px; color:#5b4326; }
#cupScreen .cw-sclose, #cupScreen .cw-sback{
  position:absolute; top:12px; width:30px; height:30px; border-radius:10px;
  background:rgba(176,132,58,.12);
}
#cupScreen .cw-sclose{ right:12px; }
#cupScreen .cw-sback{ left:12px; }
#cupScreen .cw-sclose::before, #cupScreen .cw-sclose::after,
#cupScreen .cw-sback::before{
  content:''; position:absolute; left:50%; top:50%; width:12px; height:2px;
  margin:-1px 0 0 -6px; border-radius:2px; background:#8a6f45;
}
#cupScreen .cw-sclose::before{ transform:rotate(45deg); }
#cupScreen .cw-sclose::after{ transform:rotate(-45deg); }
#cupScreen .cw-sback::before{ width:10px; height:10px; margin:-5px 0 0 -3px;
  background:transparent; border-left:2px solid #8a6f45; border-bottom:2px solid #8a6f45;
  transform:rotate(45deg); border-radius:0; }
#cupScreen .cw-sbody{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:4px 18px 12px; text-align:left;
  /* 內容捲到底之後不得把背景頁面一起捲動 */
  overscroll-behavior:contain;
}
#cupScreen .cw-sfoot{
  flex:0 0 auto; padding:12px 18px calc(16px + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(176,132,58,.2); background:rgba(255,250,240,.9);
}
#cupScreen .cw-sfoot .cw-cta{ margin:0; }
/* 50+ 玩家：說明文字放大、行距放鬆 */
#cupScreen .cw-howto h4{ font-size:15.5px; margin:16px 0 4px; }
#cupScreen .cw-howto p{ font-size:14px; line-height:1.85; }
#cupScreen .cw-exptab{ width:100%; margin:6px 0 10px; border-collapse:collapse; font-size:14px; }
#cupScreen .cw-exptab td{ padding:7px 10px; color:#7a5f38;
  border-bottom:1px dashed rgba(176,132,58,.28); }
#cupScreen .cw-exptab td:last-child{ text-align:right; color:#c8892a; font-weight:700; }

/* 第一場提示：一行、置中，不要被 space-between 推到右邊 */
#cupScreen .cw-slim.is-first{ justify-content:center; padding:12px 14px; }
#cupScreen .cw-slim.is-first .cw-slimtxt{ text-align:center; }
/* 入口小字不要換行 */
#cupScreen .cw-entries.three .cw-entry i{ white-space:nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   主卡：★乾淨 CSS 卡面★
   ----------------------------------------------------------------------
   2026-09-04 視覺二審：舊的參賽證外框 PNG（四條粗框線＋四角大果實葉片）
   視覺重量太大，整張 UI 變成「巨大相框」，而且是由 PNG 去決定卡片比例、
   可用寬高與內容能放哪裡 —— 那是本末倒置。

   ⇒ 現在改成：卡面（底色／圓角／細邊／陰影）全部由 CSS 負責；
     PNG 之後只做「裝飾 overlay」，中央大面積透明、不參與版面、不搶視覺。
   ⇒ 因此這裡不再有任何依外框反推的 padding，也不需要負 margin。
     版面只剩四個群組與一個 gap。
   ══════════════════════════════════════════════════════════════════════ */
#cupScreen .cw-hero.is-card{
  --pet:136px;
  --gap:10px;
  padding:18px 18px 16px;
  border-radius:24px; text-align:center;
  background:linear-gradient(180deg,#fffdf7,#fff5e4);
  border:1px solid rgba(196,150,76,.20);
  box-shadow:0 4px 14px rgba(150,110,50,.10);
}
/* 四個群組：日期／角色（Fei＋LV＋段位＋EXP）／狀態／心情 footer */
#cupScreen .cw-hero.is-card .cw-safe{
  display:flex; flex-direction:column; gap:var(--gap);
}
#cupScreen .cw-hero.is-card .cw-g{ display:flex; flex-direction:column; gap:4px; }
#cupScreen .cw-hero.is-card .cw-g-when{ gap:1px; }
#cupScreen .cw-hero.is-card .cw-g-mood{ gap:0; }

/* ★群組間距一律只由 flex gap 決定★：安全區補丁時代的負 margin 全部歸零 */
#cupScreen .cw-hero.is-card .cw-eyebrow,
#cupScreen .cw-hero.is-card .cw-when,
#cupScreen .cw-hero.is-card .cw-fig,
#cupScreen .cw-hero.is-card .cw-fig.big,
#cupScreen .cw-hero.is-card .cw-career,
#cupScreen .cw-hero.is-card .cw-pass,
#cupScreen .cw-hero.is-card .cw-cheer,
#cupScreen .cw-hero.is-card .cw-ask.big,
#cupScreen .cw-hero.is-card .cw-cta,
#cupScreen .cw-hero.is-card .cw-mini{ margin-top:0; margin-bottom:0; }
#cupScreen .cw-hero.is-card .cw-career,
#cupScreen .cw-hero.is-card .cw-pass{ margin-left:auto; margin-right:auto; }

#cupScreen .cw-hero.is-card .cw-fig.big{ height:var(--pet); }
#cupScreen .cw-hero.is-card .cw-fig.big img{ max-height:var(--pet); max-width:70%; }

/* 報名狀態：compact，兩行，⋯ 收在自己的右上角 */
#cupScreen .cw-hero.is-card .cw-pass{ position:relative; padding:7px 30px 7px 14px; }
#cupScreen .cw-hero.is-card .cw-pass b{ font-size:16.5px; line-height:1.35; }
#cupScreen .cw-hero.is-card .cw-pass i{ font-size:12.5px; margin-top:1px; line-height:1.35; }
#cupScreen .cw-hero.is-card .cw-pass .cw-more{ top:50%; right:2px; margin-top:-13px; }

/* ⚠ .cw-rq 的 base 規則本來是 position:absolute，但檔尾「純 CSS 小圖示」那段
   把它改成 position:relative（inline）⇒ 圖示回到文字流裡，
   而 .cw-recall 又還留著 padding-left:28px 的讓位空間，
   結果小圖示被推到句子中間、看起來像壓在字上。★這裡讓兩者一致★ */
#cupScreen .cw-hero.is-card .cw-rq{ margin-right:6px; }
#cupScreen .cw-hero.is-card .cw-cbar{ margin:6px 0 3px; }

@media (min-width:412px){ #cupScreen .cw-hero.is-card{ --pet:146px; } }
@media (min-width:700px){
  /* 平板：內容欄收窄，主卡不被拉成一整片橫幅；順帶解決收藏頁過寬 */
  #cupScreen .cw-body{ max-width:560px; margin-left:auto; margin-right:auto; }
  #cupScreen .cw-hero.is-card{ --pet:168px; --gap:12px; padding:22px 22px 20px; }
  #cupScreen .cw-hero.is-card .cw-when{ font-size:21px; }
  #cupScreen .cw-hero.is-card .cw-pass b{ font-size:18px; }
  #cupScreen .cw-hero.is-card .cw-pass i{ font-size:13.5px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ★★★ 2026-09-05 v0.60.966：萌寵盃改回「跟其他頁一樣的正常內頁」★★★
   ----------------------------------------------------------------------
   ⛔ 已作廢的舊做法（保留這段紀錄，避免日後有人再走同一條路）：
      2026-09-04 為了修「長按選字／下拉把頁面拖走／內容溢出」，萌寵盃自己建了一套
      app-like viewport：進場時把 html/body 改成 overflow:hidden（一度還加上
      height:100% 與 position:fixed），改由 #cupScreen 自己當捲動容器。
      這套結構在 iPhone 上連續踩了四個版本都沒收乾淨：
        v0.60.963 底部露淡黃 → v0.964 橡皮筋仍露 → v0.965 仍露 ＋ 返回要再拖一下。
      根本問題不是某一條 CSS 寫錯，而是【萌寵盃是全站唯一擁有自己 viewport
      lifecycle 的頁】：進出時改動 html/body 的 layout 屬性，iOS Safari 不會
      立即重算 layout viewport；而自建的 scroller 又要自己負責背景與 overscroll。
      寵物／旅行／任務／團購／我的這幾頁從來沒有這些問題 —— 因為它們就是普通頁。

   ✅ 現在的做法：萌寵盃不再有自己的 viewport lifecycle，跟其他頁完全一樣
      ‧ document（html/body）是【唯一的 page scroll owner】
      ‧ #cupScreen 就是一個普通 block，min-height:100dvh（與 .wrap 同型）
      ‧ .cw-top 維持 position:sticky —— 對 document 捲動本來就有效，返回鍵一直在
      ‧ #pageBg 仍是既有的 fixed 背景層（與其他頁同一個機制）
      ‧ 萌寵盃期間★不再切換 html/body 的 position / height / overflow★
      ⇒ 沒有自建 scroller、沒有 nested scroll、沒有 viewport 狀態要在返回時還原。
   ⚠ 工具限制：iOS rubber-band 與返回後 nav 是否即時歸位，headless Chrome
     無法重現，本輪不以 headless 宣告該兩項 PASS，待 production iPhone smoke。
   ══════════════════════════════════════════════════════════════════════ */
/* 只保留「不把手勢鏈到外層」這一條純行為屬性；不碰任何 layout 屬性。 */
html.on-cup, body.on-cup{ overscroll-behavior:none; }
/* 萌寵盃期間 root 的底色對齊背景圖的底色（純 paint 屬性，不是 layout 屬性，
   不會造成 iOS layout viewport 重排）；圖仍由 #pageBg 這個既有 fixed 層負責。
   ⚠ 這只是把「萬一露出」時的色差降到最小，★不宣稱能消除 iOS rubber-band★。 */
body.on-cup{ touch-action:manipulation; background-color:var(--cw-board); }
/* #cupScreen 維持檔頭那份宣告（position:relative; z-index:1; min-height:100dvh;
   padding-bottom:safe-area）＝與 .wrap 同型的普通內頁，這裡只補「不可選取」。 */
#cupScreen{
  touch-action:manipulation;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
/* ★放行輸入★：全域禁止選取不可以連帶讓輸入框不能選字、不能長按貼上 */
#cupScreen input, #cupScreen textarea,
#cupScreen [contenteditable=""], #cupScreen [contenteditable="true"]{
  user-select:text; -webkit-user-select:text; -webkit-touch-callout:default;
}
/* Bottom Sheet 是 fixed 覆蓋層，body.cw-lock 期間由它自己的 .cw-sbody 捲 */
#cupScreen .cw-sbody{ overscroll-behavior:contain; }

/* ══════════════════════════════════════════════════════════════════════
   P0｜解鎖頁：專屬安靜背景層
   ----------------------------------------------------------------------
   舊版直接把寵物房整張照片當背景，卡片又是暖米黃 ⇒ 前後景同一個亮度，
   卡片被埋進背景裡，整頁沒有層次。
   ⇒ 解鎖頁自己畫一層【比主頁更安靜】的暖杏漸層，
     再疊極淡的賽事元素（桂冠弧線、跑道弧、旗幟輪廓），全部低透明度；
     卡片改成奶油白，亮度明顯高過背景一階，加淡金細線與短距離柔影。
   ══════════════════════════════════════════════════════════════════════ */
#cupScreen .cw-lockbg{
  position:fixed; left:0; right:0; top:0; bottom:0; z-index:0; pointer-events:none;
  background:
    /* 跑道弧線（左下）與桂冠弧（右上）：極淡，不搶內容 */
    radial-gradient(120% 60% at 12% 104%, rgba(196,150,76,.10) 0 38%, transparent 39%),
    radial-gradient(105% 52% at 10% 106%, rgba(196,150,76,.08) 0 36%, transparent 37%),
    radial-gradient(58% 42% at 96% -6%, rgba(150,180,140,.14) 0 46%, transparent 47%),
    radial-gradient(46% 34% at 92% -2%, rgba(150,180,140,.10) 0 44%, transparent 45%),
    /* 旗幟輪廓：淡到只剩節奏感 */
    repeating-linear-gradient(122deg,
      rgba(255,255,255,.16) 0 12px, transparent 12px 24px),
    /* 底：暖杏 → 淡奶茶 */
    linear-gradient(170deg,#fbf0dc 0%,#f6e6cc 46%,#efdcc0 100%);
  background-size:auto,auto,auto,auto,100% 210px,auto;
  background-position:center,center,center,center,center top,center;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}
/* mobile 直式 crop／desktop・tablet 較寬 crop：同一套視覺系統 */
@media (min-width:700px){
  #cupScreen .cw-lockbg{ background-size:auto,auto,auto,auto,100% 300px,auto; }
}
/* ★★ 2026-09-05 未解鎖頁版面回歸修正 ★★
   ROOT CAUSE：舊值 min-height:56vh ＋ justify-content:flex-start，
     而 #cupScreen 是 min-height:100dvh ⇒ 卡片以下 40~55% 是空的，
     實機（375/390/430 都是）看起來像頁面沒載完。
   修法：讓未解鎖頁自己撐滿「可視高度扣掉頂欄」，內容整組垂直置中。
     ‧高度用 svh（工具列展開時的最小可視高度）＝任何 chrome 狀態都不會爆出捲軸；
       舊瀏覽器沒有 svh 就退回 vh，行為與今天一樣、不會壞。
     ‧頂欄高度用 --cw-topbar-h 這個【唯一真相】，.cw-top 自己也用同一個值，
       不再各寫各的魔術數字。 */
#cupScreen .cw-body.is-lock{
  position:relative; z-index:1;
  min-height:calc(100vh - var(--cw-topbar-h) - env(safe-area-inset-top,0px));
  min-height:calc(100svh - var(--cw-topbar-h) - env(safe-area-inset-top,0px));
  justify-content:center; padding-top:8px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
}
/* 未解鎖頁的內容組：徽章 → 卡片 → 一句世界觀 → 回去的路，
   用 clamp 控制彼此的呼吸，矮螢幕自動收緊、大螢幕自動放鬆，不寫死截圖用 px。 */
#cupScreen .cw-lockwrap{
  display:flex; flex-direction:column; align-items:stretch;
  gap:clamp(10px,2.2vh,20px); width:100%;
}
/* 鎖定徽章：沿用入口那張 cup-badge.webp，套與 .mc-entry.is-locked 同一組灰階，
   ★不新增任何美術素材★ */
#cupScreen .cw-lockmedal{
  position:relative; align-self:center;
  width:clamp(96px,min(30vw,17vh),150px); height:clamp(96px,min(30vw,17vh),150px);
  background:url(icons/race/cup-badge.webp) center/contain no-repeat;
  filter:grayscale(1) brightness(1.06) contrast(.92) opacity(.62)
         drop-shadow(0 3px 7px rgba(150,120,70,.20));
}
/* 鎖頭：與入口 .mc-lock 同一種畫法（純 CSS，不載圖），
   套一圈紙白底才不會糊進獎盃的灰階裡。 */
#cupScreen .cw-lockpin{
  position:absolute; right:-2px; bottom:0; width:34px; height:34px; border-radius:50%;
  background:#fffdf7; box-shadow:0 1px 4px rgba(140,110,60,.22);
}
#cupScreen .cw-lockpin::before{
  content:""; position:absolute; left:50%; top:7px; transform:translateX(-50%);
  width:14px; height:11px; border:2.5px solid #9b8a70; border-bottom:0; border-radius:7px 7px 0 0;
}
#cupScreen .cw-lockpin::after{
  content:""; position:absolute; left:50%; bottom:7px; transform:translateX(-50%);
  width:20px; height:14px; background:#9b8a70; border-radius:4px;
}
/* 進度數字：把「還差多少」變成畫面重心，不必再靠留白撐版面 */
#cupScreen .cw-lockcount{ margin:8px 0 0; line-height:1; color:#8a6a3c; }
#cupScreen .cw-lockcount b{ font-size:clamp(34px,9.5vw,46px); font-weight:900; color:#c2761c; letter-spacing:.02em; }
#cupScreen .cw-lockcount i{ font-style:normal; font-size:clamp(15px,4vw,19px); font-weight:800; margin-left:6px; color:#a08356; }
#cupScreen .cw-note.is-lockcard .cw-bar{ margin-top:9px; }
#cupScreen .cw-note.is-lockcard .cw-ask{ margin-top:9px; }
/* 世界觀一句話：既有玩家文案，靠它把版面下半段收尾，不是硬塞功能 */
#cupScreen .cw-lockintro{
  margin:0; text-align:center; font-size:clamp(12.5px,3.4vw,14px); line-height:1.75; color:#96805f;
}
@media (min-width:700px){
  #cupScreen .cw-body.is-lock{ max-width:560px; margin:0 auto; padding-top:20px; }
  #cupScreen .cw-lockwrap{ max-width:420px; margin:0 auto; }
}
/* 卡片：比背景至少高一階亮度＋淡金細線＋短距離柔影 */
#cupScreen .cw-note.is-lockcard{
  background:linear-gradient(180deg,#fffefb,#fffaf1);
  border:1px solid rgba(214,170,88,.55);
  box-shadow:0 6px 16px rgba(150,110,50,.14), 0 1px 0 rgba(255,255,255,.9) inset;
  border-radius:20px; padding:18px 18px 16px 20px;
}
#cupScreen .cw-note.is-lockcard::before{
  width:5px; background:linear-gradient(180deg,#ffd689,#e0a02c);
}
/* 進度條沿用現在的暖黃 → 嫩綠 */
#cupScreen .cw-note.is-lockcard .cw-bar{ background:#eee3cf; }

/* ── 名單凍結後的唯讀參賽證 ────────────────────────────────────────
   與可變更版同一顆票券，只把「可以動」的訊號拿掉：
   右上角不是 ⋯（暗示有選單），而是一顆帶字的「名單」出口。 */
.cw-pass.is-locked { border-color: #c9b98a; }
.cw-pass.is-locked > i { color: #8a7a52; }
.cw-pass.is-locked .cw-more {
  width: auto; min-width: 44px; height: 32px; padding: 0 10px;
  font-size: 13px; line-height: 32px; letter-spacing: .04em;
  border-radius: 16px; font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════
   v0.60.854｜Human Visual Gate：桌機操作辨識度與資訊密度
   ----------------------------------------------------------------------
   玩家（不是工程師）打開這一頁 1 秒內必須知道：
     「怎麼返回」「Fei 是參賽還是休息」「現在最主要按哪一顆」「回憶在哪」。
   前面那條 `#cupScreen button` 保險絲已修（見該處註解）——那是所有按鈕
   看起來不能按的 root cause。這一段補的是【層級】與【桌機密度】，
   不改配色語言、不改資訊內容、不改任何資料流程。
   ══════════════════════════════════════════════════════════════════════ */

/* ── ① 返回：真正的 navigation control ───────────────────────────────
   保留「← 返回遊戲」中文，44px hit target，與棕色 Header 有足夠對比。
   用 #cupScreen 前綴把 specificity 拉到保險絲之上，避免再被洗掉一次。 */
#cupScreen .cw-back{
  background:#fffaf0; color:#5b4a34;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 2px 6px rgba(70,44,12,.28);
  transition:background .12s ease, transform .08s ease, box-shadow .12s ease;
}
#cupScreen .cw-back:hover{ background:#fff; box-shadow:0 2px 9px rgba(70,44,12,.34); }
#cupScreen .cw-back:active{ transform:translateY(1px); background:#f6ead6;
  box-shadow:0 1px 3px rgba(70,44,12,.3); }
#cupScreen .cw-back:focus-visible{ outline:3px solid #ffd98a; outline-offset:2px; }

/* ── ② Primary CTA：整張主卡第一順位 ─────────────────────────────────
   filled + 立體邊，不靠陰影 alone；大字，50+ 一眼認得出可以按。 */
#cupScreen .cw-cta{
  color:#fffaf0; border:0;
  background:linear-gradient(180deg,#3a9a68,#2e7d55);
  box-shadow:0 3px 0 #246142, 0 4px 12px rgba(40,90,60,.26);
  transition:filter .12s ease, transform .08s ease, box-shadow .08s ease;
}
#cupScreen .cw-cta:hover{ filter:brightness(1.06); }
#cupScreen .cw-cta:active{ transform:translateY(3px); box-shadow:0 0 0 #246142; }
#cupScreen .cw-cta:focus-visible{ outline:3px solid #ffd98a; outline-offset:3px; }
#cupScreen .cw-cta[disabled]{ filter:grayscale(.5) opacity(.6); box-shadow:none; cursor:default; }
#cupScreen .cw-cta.is-gold{
  color:#4a2f06; background:linear-gradient(180deg,#f5b845,#e09422);
  box-shadow:0 3px 0 #ab6f14, 0 4px 13px rgba(190,130,20,.3);
}
#cupScreen .cw-cta.is-gold:active{ box-shadow:0 0 0 #ab6f14; }

/* ── ③ Secondary action：一眼看得出比 Primary 低一階，但仍是按鈕 ───── */
#cupScreen .cw-cta2,
#cupScreen .cw-mini{
  background:#fffdf6; color:#7a5f38;
  border:1.5px solid #e0cba2; border-radius:12px;
  transition:background .12s ease, border-color .12s ease, transform .08s ease;
}
#cupScreen .cw-cta2:hover,
#cupScreen .cw-mini:hover{ background:#fff7e8; border-color:#cbb083; }
#cupScreen .cw-cta2:active,
#cupScreen .cw-mini:active{ transform:translateY(1px); background:#f6ead6; }
#cupScreen .cw-cta2:focus-visible,
#cupScreen .cw-mini:focus-visible{ outline:3px solid #ffd98a; outline-offset:2px; }

/* ── ④ 參賽證：三層資訊權重 ──────────────────────────────────────────
   ① Fei 已報名（最大）→ ② 明天 20:00 開跑（暖金強調）→ ③ 名單公布（最小）
   溫暖的「明天要去比賽了」，所以：不倒數、不閃爍、不用紅色、不加動畫。 */
#cupScreen .cw-passwhen{
  display:block; margin-top:5px; font-style:normal;
  font-size:16px; font-weight:900; letter-spacing:.02em; color:#6d4a22;
}
#cupScreen .cw-passwhen .cw-hm{
  display:inline; font-size:20px; font-weight:900; color:#b0752a;
  letter-spacing:.04em; margin:0 2px;
}
/* 第三層要明顯比第二層輕 */
#cupScreen .cw-pass i{ color:#8a7355; }
/* 抬頭在已報名狀態退成上下文，不跟參賽證搶 */
#cupScreen .cw-when.is-quiet{ font-size:15px; font-weight:800; color:#8a6a3c; letter-spacing:.04em; }

/* ── ⑤ 變更入口：secondary，但看得出可以按（原本是看不懂的 ⋯）────── */
#cupScreen .cw-more{
  width:auto; min-width:44px; height:28px; padding:0 11px;
  font-size:12.5px; font-weight:800; line-height:26px; letter-spacing:.06em;
  color:#8a7355; background:#fffdf6;
  border:1px solid #e0cba2; border-radius:999px;
  transition:background .12s ease, color .12s ease;
}
#cupScreen .cw-more:hover{ background:#fff4e0; color:#6d4a22; }
#cupScreen .cw-more:active{ background:#f0e0c4; color:#5b4326; }
#cupScreen .cw-more:focus-visible{ outline:3px solid #ffd98a; outline-offset:2px; }

/* ── ⑥ Career 三入口：真的可以進去，就要看得出可以進去 ──────────────
   加邊界＋右下方向箭頭＋hover/focus，不用 emoji、不做 App 商城風。 */
#cupScreen .cw-entry{
  position:relative;
  border:1.5px solid #e6d3ac; border-radius:14px; background:#fffdf6;
  transition:background .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}
#cupScreen .cw-entry::after{
  content:""; position:absolute; right:11px; bottom:11px;
  width:7px; height:7px; border-top:2px solid #c4ac82; border-right:2px solid #c4ac82;
  transform:rotate(45deg); opacity:.85;
}
#cupScreen .cw-entry:hover{
  background:#fff7e8; border-color:#cbb083; box-shadow:0 3px 10px rgba(120,90,40,.14);
}
#cupScreen .cw-entry:active{ transform:translateY(1px); background:#f6ead6; }
#cupScreen .cw-entry:focus-visible{ outline:3px solid #ffd98a; outline-offset:2px; }

/* ── ⑦ 桌機密度：不是把手機卡等比放大 ────────────────────────────────
   目標＝常見桌機視窗首屏就看得到：Header → 下一場 → Fei → 生涯 →
   今日狀態 → 主要操作 → Career 入口的開頭。
   ★只收多餘留白，不縮字★（字級一律沿用，50+ 玩家要看得清楚）。 */
@media (min-width:1024px){
  /* 桌機 720p 的可用高度其實只有 ~550px（瀏覽器工具列吃掉約 170px）。
     實測收斂前首屏只看得到 4 個區塊中的 1 個 —— 主卡太高。
     ★只收留白與角色圖高度，字級一律不動★（50+ 玩家要看得清楚）。 */
  #cupScreen .cw-body{ max-width:600px; padding-top:12px; gap:10px; }
  #cupScreen .cw-hero.is-card{ --pet:96px; --gap:7px; padding:11px 24px 10px; }
  #cupScreen .cw-hero .cw-eyebrow{ margin-bottom:0; }
  #cupScreen .cw-hero .cw-when{ margin-top:1px; }
  #cupScreen .cw-fig.big{ height:92px; margin:-5px 0 0; }
  #cupScreen .cw-fig.big img{ max-height:92px; }
  #cupScreen .cw-career{ margin:0 auto 6px; }
  #cupScreen .cw-cbar{ margin:4px 0 2px; }
  #cupScreen .cw-pass{ margin:0 auto 6px; padding:9px 16px; }
  #cupScreen .cw-passwhen{ margin-top:3px; }
  #cupScreen .cw-recall{ margin:0 auto; padding:5px 12px; }
  #cupScreen .cw-cta{ margin-top:10px; padding:12px 14px; font-size:17px; }
  #cupScreen .cw-firstrun{ margin-bottom:0; padding:6px 14px 6px 16px; }
  #cupScreen .cw-entries.three{ gap:10px; }
  #cupScreen .cw-entry{ padding:11px 13px; }
}
/* 1440 以上再放一點呼吸，但欄寬不再長大——避免變成一整片橫幅 */
@media (min-width:1440px){
  #cupScreen .cw-body{ max-width:640px; }
  #cupScreen .cw-hero.is-card{ padding:20px 28px 18px; }
}

/* ── ⑧ 報名前的提醒小字：截止時間 ＋ 報名後不可取消 ────────────────── */
#cupScreen .cw-fine{
  margin:6px 0 0; font-size:12.5px; line-height:1.6; color:#8a7355;
}

/* ── ⑨「第一場」：從灰帶改成緞帶感的期待格 ─────────────────────────── */
/* ⚠ 舊版是一塊置中的大卡（標籤一行、文字一行），首頁被硬生生拉長一截。
   這句只是「這是第一次」的註腳，不是公告 ⇒ 收成單行、靠左、低高度。 */
#cupScreen .cw-firstrun{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:9px; text-align:left;
  margin:0 0 10px; padding:7px 14px 7px 16px; border-radius:13px;
  background:linear-gradient(135deg,#fff8e6 0%,#fdf0d4 100%);
  border:1.5px solid #e8d3a4;
  box-shadow:0 2px 8px rgba(150,110,40,.08);
}
/* 左緣的旗桿；右上的淡色圓當旗面，純 CSS，不載圖也不用 emoji */
#cupScreen .cw-firstrun::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,#e8c06a 0%,#d9a441 100%);
}
#cupScreen .cw-firstrun::after{
  content:""; position:absolute; right:-26px; top:-26px; width:82px; height:82px;
  border-radius:50%; background:rgba(217,164,65,.10);
}
#cupScreen .cw-frtag{
  flex:0 0 auto; display:inline-block; margin:0; padding:2px 9px; border-radius:999px;
  background:#d9a441; color:#fffaf0;
  font-size:11px; font-weight:900; letter-spacing:.14em;
}
#cupScreen .cw-firstrun b{
  display:block; min-width:0; font-size:14.5px; font-weight:900; color:#6d4a22;
  letter-spacing:.02em; line-height:1.35;
}


/* 名單／列表頭像：沿用週排行榜的寵物立繪；載不到就退回首字圓（::after 仍在底下） */
#cupScreen .cw-dot{ overflow:hidden; }
#cupScreen .cw-dotimg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 22%; z-index:1;
}

/* ══════════════════════════════════════════════════════════════════════
   今日賽程：場次卡（多場摺疊）
   ----------------------------------------------------------------------
   手機直式優先。多場時收合成一張張場次卡，一次只展開一場 ——
   否則 3 場就是 18 張寵物卡的長頁，50+ 玩家在手機上會迷路。
   卡面只留玩家真的需要的四件事：第幾場、幾點開跑、幾隻、我的寵物在不在。
   ══════════════════════════════════════════════════════════════════════ */
#cupScreen .cw-heat{
  margin:0 0 10px; border-radius:16px; overflow:hidden;
  background:#fffdf6; border:1.5px solid #e8d3a4;
  box-shadow:0 2px 8px rgba(150,110,40,.08);
}
#cupScreen .cw-heat.is-mine{ border-color:#cbb083; background:linear-gradient(180deg,#fffaee,#fffdf6); }
#cupScreen .cw-heat.is-open{ box-shadow:0 3px 12px rgba(150,110,40,.14); }

#cupScreen .cw-heathead{
  position:relative; display:grid; width:100%; text-align:left;
  grid-template-columns:1fr auto; grid-template-areas:"name time" "sub sub";
  gap:2px 10px; padding:13px 40px 13px 15px; background:transparent; border:0;
  transition:background .12s ease;
}
#cupScreen .cw-heathead:hover{ background:rgba(217,164,65,.07); }
#cupScreen .cw-heathead:active{ background:rgba(217,164,65,.13); }
#cupScreen .cw-heathead:focus-visible{ outline:3px solid #ffd98a; outline-offset:-3px; }

#cupScreen .cw-heatname{
  grid-area:name; font-size:18px; font-weight:900; color:#6d4a22; letter-spacing:.04em;
}
#cupScreen .cw-heattime{
  grid-area:time; align-self:center;
  font-size:16px; font-weight:900; color:#b0752a; letter-spacing:.03em; white-space:nowrap;
}
#cupScreen .cw-heatsub{
  grid-area:sub; margin-top:2px; font-size:13px; color:#9a7c4e; line-height:1.5;
}
/* 「Fei 在這一場」：低干擾，不做電競高亮框 */
#cupScreen .cw-heathead .cw-tag.me{
  grid-area:sub; justify-self:end; align-self:center; margin-left:8px;
  position:static; font-size:11.5px;
}
/* 展開箭頭：收合朝下、展開朝上 */
#cupScreen .cw-heathead .cw-chev{
  position:absolute; right:15px; top:50%; width:9px; height:9px; margin-top:-6px;
  border-top:2.5px solid #c4ac82; border-right:2.5px solid #c4ac82;
  transform:rotate(135deg); transition:transform .16s ease;
}
#cupScreen .cw-heat.is-open .cw-heathead .cw-chev{ transform:rotate(-45deg); margin-top:-2px; }
#cupScreen .cw-heat .cw-list{ margin:0; padding:0 11px 12px; gap:6px; }

#cupScreen .cw-fine.center{ text-align:center; margin:0 0 12px; }

/* ══════════════════════════════════════════════════════════════════════
   怎麼玩／詳細規則：由上往下的時間流
   ----------------------------------------------------------------------
   ⚠ 舊版用左右兩欄表格列時程，手機上要左右對照著讀，
     50+ 玩家在 375px 下會被斷成「報名／前一天／18:00」這種孤字。
     而且時程表講完之後又補一段「兩個 18:00 是不同日子」——同一條規則講兩次。
   改成單一路徑：一段只講一件事，關鍵時間才加粗，不做第二輪解釋。
   時間一律寫「晚上 6:00 / 晚上 8:00」；精確的 20:00 只出現在場次頁。
   ══════════════════════════════════════════════════════════════════════ */
#cupScreen .cw-howto .cw-lead{
  margin:0 0 2px; font-size:15px; line-height:1.85; color:#6d4a22;
}
/* 名次 ↔ EXP 對照：四行對齊，左名次右數值。
   刻意不做成四張卡片、不加粗分隔線、不加大留白 —— 它只是要能一眼上下掃。
   每一行自己 nowrap，所以「第 4～6 名」與「30 EXP」永遠不會被拆開。 */
#cupScreen .cw-howto .cw-exp{ margin:2px 0 4px; }
#cupScreen .cw-howto .cw-exp > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:5px 2px; border-bottom:1px dashed rgba(176,132,58,.22);
}
#cupScreen .cw-howto .cw-exp > div:last-child{ border-bottom:0; }
#cupScreen .cw-howto .cw-exp dt{
  margin:0; font-size:14.5px; color:#6d4a22; white-space:nowrap;
}
#cupScreen .cw-howto .cw-exp dd{
  margin:0; font-size:14.5px; font-weight:900; color:#b0752a; white-space:nowrap;
}
#cupScreen .cw-howto h4{
  margin:13px 0 3px; padding-left:10px; position:relative;
  font-size:15.5px; font-weight:900; color:#8a5a20; letter-spacing:.03em;
}
#cupScreen .cw-howto h4::before{
  content:""; position:absolute; left:0; top:.28em; bottom:.28em; width:4px;
  border-radius:2px; background:#d9a441;
}
#cupScreen .cw-howto p{
  margin:0 0 4px; font-size:14.5px; line-height:1.85; color:#6d4a22;
  /* ⚠ 這裡【不可以】用 word-break:keep-all。
     我原本以為它能避免孤字，實際相反：keep-all 會讓整串漢字變成一個
     不可斷開的區塊，於是「前想改幾次都可以。」整句被迫另起一行，
     把前面的「在」「晚上 6:00」各自擠成一行 —— 真頁截圖已確認。
     中文本來就該逐字換行，交給瀏覽器預設即可。 */
  line-break:strict; overflow-wrap:break-word;
}
#cupScreen .cw-howto p b{ color:#b0752a; font-weight:900; }

/* 只有一場：標題不是按鈕，不留 hover／箭頭的可點暗示 */
#cupScreen .cw-heat.is-solo .cw-heathead{ padding-right:15px; cursor:default; }
#cupScreen .cw-heat.is-solo .cw-heathead:hover{ background:transparent; }

/* 窄機（≤420px）：場次標題列的副標與「在這一場」標籤各自一行，避免互相擠壓。
   ★不縮字★，只改換行方式。 */
@media (max-width:420px){
  #cupScreen .cw-heathead{
    grid-template-columns:1fr auto;
    grid-template-areas:"name time" "sub sub" "tag tag";
    padding-right:34px;
  }
  #cupScreen .cw-heathead .cw-tag.me{
    grid-area:tag; justify-self:start; margin:4px 0 0;
  }
  #cupScreen .cw-heatsub{ overflow-wrap:anywhere; }
  #cupScreen .cw-heatname{ font-size:17px; }
}

/* ══════════════════════════════════════════════════════════════════════
   本場參賽名冊入口
   ----------------------------------------------------------------------
   ⚠ 原本是一顆普通 outline 小鈕，跟上方「已確定參賽」票券的完成度差太多，
     看起來像系統管理按鈕而不是「看看今天跟誰一起跑」。
   設計約束：延續萌寵盃的紙張＋暖木語言，但★不得比票券搶眼★
   ⇒ 用奶油紙底 + 暖金細框 + 左側小名冊書籤，不用實心色塊、不用獎盃金牌。
   整列都是 touch target（min-height 56px），右側柔和箭頭當進入提示。
   ══════════════════════════════════════════════════════════════════════ */
#cupScreen .cw-rosterlink{
  position:relative; display:flex; align-items:center; gap:11px;
  width:100%; max-width:100%; min-height:50px;
  margin:0 auto 6px; padding:7px 32px 7px 12px;
  text-align:left; border-radius:14px;
  background:linear-gradient(180deg,#fffdf6,#fdf6e6);
  border:1.5px solid #e3d0a6;
  box-shadow:0 1px 5px rgba(150,110,40,.09);
  transition:background .12s ease, border-color .12s ease, transform .08s ease;
}
#cupScreen .cw-rosterlink:hover{ background:#fff8ea; border-color:#cbb083; }
#cupScreen .cw-rosterlink:active{ transform:translateY(1px); background:#f7ecd8; }
#cupScreen .cw-rosterlink:focus-visible{ outline:3px solid #ffd98a; outline-offset:2px; }

/* 左側小書籤：純 CSS 的名冊感，不載圖、不用 emoji */
#cupScreen .cw-rlmark{
  flex:0 0 auto; width:19px; height:24px; border-radius:3px 5px 5px 3px;
  background:linear-gradient(180deg,#fffdf7,#f3e6cd);
  border:1.5px solid #d9c39c; position:relative;
}
#cupScreen .cw-rlmark::before,
#cupScreen .cw-rlmark::after{
  content:""; position:absolute; left:5px; right:5px; height:1.5px;
  border-radius:1px; background:rgba(176,132,58,.42);
}
#cupScreen .cw-rlmark::before{ top:6px; }
#cupScreen .cw-rlmark::after{ top:11px; right:8px; }

#cupScreen .cw-rltxt{ flex:1 1 auto; min-width:0; }
#cupScreen .cw-rltxt b{
  display:flex; align-items:baseline; gap:7px;
  font-size:15.5px; font-weight:900; color:#6d4a22; letter-spacing:.02em;
}
#cupScreen .cw-rltxt b em{
  font-style:normal; font-size:12.5px; font-weight:800; color:#a9711a;
  background:#fff2d8; border-radius:999px; padding:1px 8px; white-space:nowrap;
}
#cupScreen .cw-rosterlink .cw-chev{
  position:absolute; right:14px; top:50%; width:8px; height:8px; margin-top:-5px;
  border-top:2.5px solid #c4ac82; border-right:2.5px solid #c4ac82;
  transform:rotate(45deg);
}

/* 打開之後的名單也是同一套名冊語言：紙張底、暖框，不是系統列表 */
#cupScreen .cw-heat{ background:linear-gradient(180deg,#fffdf6,#fdf6e6); }
#cupScreen .cw-heat .cw-row{
  background:#fffdf7; border:1px solid rgba(217,195,156,.55);
  border-radius:12px;
}
#cupScreen .cw-heat .cw-row.is-me{
  background:linear-gradient(180deg,#f4fbf3,#eaf6e8); border-color:#bcdcb6;
}


/* ══════════════════════════════════════════════════════════════════════
   萌寵盃主會場背景
   ----------------------------------------------------------------------
   ★可讀性優先★：底圖上面永遠壓一層奶油色薄紗，中央比兩側再厚一點。
   這不是為了好看，是因為 UI 有些文字（例如「幫誰加油今天 06:00 開放。」）
   是直接畫在版面底色上、沒有卡片墊底的 —— 沒有薄紗就會掉到草地的
   黃綠色上，暖棕字對比不足。卡片本身維持不透明，所以卡內文字不受影響。
   ‧ 不用 background-attachment:fixed（iOS Safari 會抖動與破圖）
   ‧ 手機用 9:16 原生圖、桌機用 16:9 原生圖，兩張都不是彼此的裁切
   ══════════════════════════════════════════════════════════════════════ */
/* ★★ 2026-09-05 v0.60.964 hotfix：背景圖改成【固定框架層】★★
   實機回報：手指往下拖會露出上方的圖框邊界，往上拖會露出下方框架，
   而且頁面最底部有一條淡黃色（不是背景圖）。
   ROOT CAUSE：背景圖原本畫在【捲動容器 #cupScreen 自己身上】。
     ‧ 捲動容器的背景只在自己的 padding box 內繪製，iOS 橡皮筋把內容拉出
       容器範圍時，露出的就是「圖的邊界／容器底色 var(--cw-board)」，
       看起來就是一層框架與一條淡黃。
     ‧ 不能改用 background-attachment:fixed —— 上面既有註解已記錄
       「iOS Safari 會抖動與破圖」，那條結論保留。
   ⇒ 改用本專案已經驗證過的做法（#pageBg 與 .cw-lockbg 都是這樣做）：
     背景交給一個 position:fixed、鋪滿 viewport 的圖層（這裡用 ::before，
     不動 DOM、不改 race-cup.js），內容照常在它上面捲動。
     ★固定框架、內容可捲、拖到頂或底看到的都是同一張背景圖★。 */
/* ★★ 2026-09-05 v0.60.965：背景層必須在【捲動容器外面】★★
   v0.60.964 把背景放進 #cupScreen::before，headless 量到 position:fixed、尺寸也等於
   視窗，但★iPhone 實機仍然可以把畫面拉開露出純色★。
   ROOT CAUSE：::before 是【捲動容器自己的偽元素】，在 iOS 上它跟著那個 scroller
   的合成層走 —— 橡皮筋拖動的就是那一層，於是「固定背景」被一起拖走，
   拖出去的地方沒有東西畫，就露出 root/body 的純色。
   （這也正是這支檔案早年那條「background-attachment:fixed 會抖動與破圖」的同一個成因。）
   ⇒ 背景改掛在【body 層級、完全不在任何 scroller 內】的既有元素 #pageBg 上。
     它是 position:fixed; inset:0; z-index:0; pointer-events:none 的全域底圖層，
     不屬於 #cupScreen，橡皮筋拖不到它 ⇒ 拖到頂或底看到的永遠是同一張萌寵盃背景。
   ★不新增 DOM、不改 race-cup.js、不鎖手勢、不加任何 JS★ */
body.on-cup #pageBg{
  display:block !important;
  background-color:var(--cw-board);
  background-image:
    linear-gradient(180deg,
      rgba(253,246,233,.90) 0%,
      rgba(253,246,233,.72) 22%,
      rgba(253,246,233,.66) 52%,
      rgba(253,246,233,.86) 100%),
    url(race/ui/cup-lobby-mobile.webp);
  background-repeat:no-repeat, no-repeat;
  background-size:cover, cover;
  background-position:center top, center top;
}
/* 萌寵盃本體不再自己畫底色／底圖，讓 #pageBg 透出來（不透明會擋住它） */
body.on-cup #cupScreen{ background:transparent; }
@media (min-width:900px){
  body.on-cup #pageBg{
    background-image:
      /* 中央 UI 欄再多一層縱向薄紗，兩翼保留較多畫面細節 */
      linear-gradient(90deg,
        rgba(253,246,233,0) 0%,
        rgba(253,246,233,.55) 24%,
        rgba(253,246,233,.72) 38%,
        rgba(253,246,233,.72) 62%,
        rgba(253,246,233,.55) 76%,
        rgba(253,246,233,0) 100%),
      linear-gradient(180deg,
        rgba(253,246,233,.86) 0%,
        rgba(253,246,233,.58) 26%,
        rgba(253,246,233,.54) 60%,
        rgba(253,246,233,.82) 100%),
      url(race/ui/cup-lobby-desktop.webp);
    background-repeat:no-repeat, no-repeat, no-repeat;
    background-size:cover, cover, cover;
    background-position:center top, center top, center top;
  }
}
/* 沒有卡片墊底的說明字：給一層極淡的紙襯，確保任何底圖上都讀得清楚 */
#cupScreen .cw-fine.center{
  display:inline-block; width:auto; max-width:100%;
  padding:5px 12px; border-radius:999px;
  background:rgba(255,253,247,.86); color:#7a6242;
}
#cupScreen .cw-body > .cw-fine.center{ align-self:center; }

/* ══════════════════════════════════════════════════════════════════════
   生命感台詞：錨定在【寵物容器】的對話泡泡
   ----------------------------------------------------------------------
   ⚠ 上一版把泡泡放在主卡上、用 right/top 定位 ⇒ 桌機上它離 Fei 一大片空白，
     看起來像右側的系統 Toast，不像牠在說話。
   現在泡泡是 .cw-fig 的子元素，定位基準就是【寵物本身】：
     ‧ 寵物是置中的、寬度≈自己的高度（立繪接近 1:1）
     ‧ 所以「寵物右緣」= 50% + 立繪高度的一半
       ⇒ left: calc(50% + var(--figh) * .46 + 8px)，尾巴只留一小段呼吸
   --figh 每個斷點跟著 .cw-fig.big 的 height 一起給，換寵物圖也不用改座標。
   ★position:absolute ⇒ 完全不佔文件流高度★，首頁不會因為一句話變長。
   ══════════════════════════════════════════════════════════════════════ */
#cupScreen .cw-fig{ position:relative; overflow:visible; }
/* --pet 是主卡既有的寵物高度變數（412/700/1024 各有值）；
   立繪接近 1:1，所以「寵物右緣」≈ 50% + --pet 的一半。 */
#cupScreen .cw-fig{ --figh:var(--pet, 112px); }

#cupScreen .cw-fig .cw-recall{
  position:absolute; z-index:3; margin:0;
  left:calc(50% + var(--figh) * .46 + 8px);
  top:6%;
  width:max-content; max-width:min(240px, 42%);
  padding:7px 11px; text-align:left;
  font-size:12.5px; line-height:1.5; color:#7a5f38;
  background:#fffdf7; border:1.5px solid #e8d3a4; border-radius:13px;
  box-shadow:0 2px 7px rgba(150,110,40,.12);
}
/* 尾巴指向寵物 */
#cupScreen .cw-fig .cw-recall::after{
  content:""; position:absolute; left:-7px; top:13px;
  width:10px; height:10px; background:#fffdf7;
  border-left:1.5px solid #e8d3a4; border-bottom:1.5px solid #e8d3a4;
  transform:rotate(45deg); border-radius:0 0 0 3px;
}
#cupScreen .cw-fig .cw-recall .cw-rq{ display:none; }

/* ── 手機：★正常文件流★，不再用 absolute 疊在角色身上 ─────────────────
   ⛔ 舊做法（v0.60.965 以前）：泡泡是 position:absolute 掛在 .cw-fig 上，
      靠座標「閃避」寵物。只要台詞長度、立繪尺寸或字級任何一項變動就會壓上去；
      v0.60.965 實機就是泡泡直接壓在寵物的臉／頭上。
   ✅ 新做法：手機把 .cw-fig 變成直向 flex，泡泡用 order:-1 排在立繪【上方】，
      兩者各自佔自己的垂直空間 ⇒ ★結構上不可能重疊★。
      版面順序自然成為：標題 → 對話泡泡 → 間距 → 寵物。
      台詞 1／2／3 行由 flow 自然撐高，★不截字、不縮字級（維持 12.5px）★。
   ‧只在 ≤520px 生效，桌機／平板的側邊座標一行未動。 */
@media (max-width:520px){
  #cupScreen .cw-fig{
    flex-direction:column; align-items:center; justify-content:flex-end;
    height:auto; gap:8px;
    /* ⚠ 立繪區在幾個斷點有負 margin（-8px／-6px／-5px）把自己往上拉。
       泡泡改排到立繪【上方】之後，那個負值會讓泡泡去壓到「今晚的萌寵盃」標題。
       ⇒ 手機版把上下負 margin 歸零，並在泡泡上方留一點呼吸。 */
    margin-top:6px; margin-bottom:6px;
  }
  /* ⚠ 特異性：#cupScreen .cw-hero.is-card .cw-fig.big{height:var(--pet)} 是 (1,2,1)，
     必須用同級選擇器才蓋得過；否則高度仍被鎖成 136px，
     泡泡排上去就會溢出容器、壓到「今晚的萌寵盃」標題。 */
  #cupScreen .cw-fig.big,
  #cupScreen .cw-hero.is-card .cw-fig.big{ height:auto; margin-top:6px; margin-bottom:6px; }
  #cupScreen .cw-fig .cw-recall{
    /* ★relative 不是 static★：尾巴 ::after 要以泡泡自己為定位基準，
       設成 static 會讓尾巴掉到 .cw-fig 的底部（跑到寵物下面）。 */
    position:relative; order:-1;
    left:auto; right:auto; top:auto;
    width:auto; max-width:min(300px, 94%);
    margin:0 auto; padding:7px 12px;
    font-size:12.5px; text-align:center;
  }
  /* 尾巴：置中朝下指向寵物 */
  #cupScreen .cw-fig .cw-recall::after{
    left:50%; right:auto; top:auto; bottom:-6px; margin-left:-5px;
    transform:rotate(-45deg);
    border-left:1.5px solid #e8d3a4; border-bottom:1.5px solid #e8d3a4;
    border-radius:0 0 0 3px;
  }
  /* 立繪維持既有比例，只是不再需要替泡泡讓出側邊空間 */
  #cupScreen .cw-hero.is-card .cw-fig.big img{ max-height:var(--pet, 136px); }
}
/* 極窄機：讓位給主介面 —— 這句是低優先的生命感，不能擠壞主卡 */
@media (max-width:339px){
  #cupScreen .cw-fig .cw-recall{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Career 三入口：圖示升級
   ----------------------------------------------------------------------
   ⚠ 原本三顆都是同一個圓角方塊 + 一個色點，三個入口長得幾乎一樣，
     玩家得讀文字才分得出來，也跟遊戲其他手繪水彩美術不同級。
   在正式圖示到位前，先用純 CSS 畫出三個【可分辨的剪影】：
     回憶＝翻開的小冊子　成就＝帶緞帶的勳章　收藏＝木盒
   仍然不用 emoji，配色沿用暖木／暖金。
   ★正式美術到齊後，只要換掉 .cw-eico 的背景即可，結構不用動。★
   ══════════════════════════════════════════════════════════════════════ */
#cupScreen .cw-eico{
  width:30px; height:30px; margin-bottom:6px; border-radius:9px;
  background:linear-gradient(180deg,#fdf0d2,#f2dcae);
  border:1px solid rgba(176,132,58,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
#cupScreen .cw-eico::after{ content:''; position:absolute; }

/* 回憶：翻開的小冊子（中間書脊 + 兩頁） */
#cupScreen .cw-eico.ic-memory::after{
  inset:8px 6px; border-radius:1px;
  background:
    linear-gradient(90deg, rgba(122,83,18,.55) 0 45%, transparent 45% 55%, rgba(122,83,18,.55) 55% 100%);
}
#cupScreen .cw-eico.ic-memory::before{
  content:''; position:absolute; left:50%; top:7px; bottom:7px; width:1.5px;
  margin-left:-.75px; background:rgba(122,83,18,.75); border-radius:1px;
}
/* 成就：圓形勳章 + 下方兩條緞帶 */
#cupScreen .cw-eico.ic-trophy::after{
  inset:5px 9px 12px; border-radius:50%;
  background:rgba(122,83,18,.62);
}
#cupScreen .cw-eico.ic-trophy::before{
  content:''; position:absolute; left:9px; right:9px; bottom:5px; height:7px;
  background:
    linear-gradient(135deg, rgba(122,83,18,.5) 0 50%, transparent 50%) left/50% 100% no-repeat,
    linear-gradient(225deg, rgba(122,83,18,.5) 0 50%, transparent 50%) right/50% 100% no-repeat;
}
/* 收藏：木盒（盒蓋 + 盒身 + 中央扣） */
#cupScreen .cw-eico.ic-badge::after{
  inset:12px 6px 7px; border-radius:2px;
  background:rgba(122,83,18,.5);
}
#cupScreen .cw-eico.ic-badge::before{
  content:''; position:absolute; left:6px; right:6px; top:8px; height:5px;
  border-radius:2px 2px 0 0; background:rgba(122,83,18,.7);
  box-shadow:0 7px 0 -2px rgba(255,247,232,.85);
}


/* ══════════════════════════════════════════════════════════════════════
   幫萌寵加油：整列可點 ＋ 賽前小情報
   ----------------------------------------------------------------------
   ⚠ 六隻右側各一顆一模一樣的膠囊 ⇒ 讀起來像表單，不像在挑一隻想支持的萌寵。
   改成：整列就是選擇區（玩家不必瞄準小按鈕），右側放一句賽前小情報。
   選中時主視覺是「我正在幫牠加油」，取消降成列內小字。
   ★不加卡片、不加高度★：情報與按鈕都放在原本那一列的右側。
   ══════════════════════════════════════════════════════════════════════ */
#cupScreen .cw-heat .cw-row.is-tap{
  cursor:pointer; min-height:56px;
  transition:background .12s ease, border-color .12s ease, transform .07s ease;
}
#cupScreen .cw-heat .cw-row.is-tap:hover{ background:#fffaee; border-color:#e0c68f; }
#cupScreen .cw-heat .cw-row.is-tap:active{ transform:translateY(1px); background:#f9f0dd; }
#cupScreen .cw-heat .cw-row.is-tap:focus-visible{ outline:3px solid #ffd98a; outline-offset:2px; }

/* 賽前小情報：兩行小字，靠右，明顯低於萌寵本身 */
#cupScreen .cw-form{
  flex:0 0 auto; margin-left:auto; text-align:right; line-height:1.35;
}
#cupScreen .cw-form i{
  display:block; font-style:normal; font-size:10.5px; letter-spacing:.1em; color:#a8926a;
}
#cupScreen .cw-form b{
  display:block; font-size:13px; font-weight:900; color:#a9711a; white-space:nowrap;
}

/* 選中：整列亮起，右側是狀態不是 CTA */
#cupScreen .cw-heat .cw-row.is-pick{
  background:linear-gradient(180deg,#fff7e2,#fdefd0);
  border-color:#dfbf7d; box-shadow:0 2px 9px rgba(180,135,50,.18);
}
#cupScreen .cw-cheered{
  flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:9px;
}
#cupScreen .cw-cheered b{
  font-size:13px; font-weight:900; color:#a9711a; white-space:nowrap;
}
/* 取消：次要，不得比「已幫牠加油」醒目 */
#cupScreen .cw-uncheer{
  min-height:32px; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:800; color:#9a8a6a;
  background:rgba(255,255,255,.7); border:1px solid rgba(176,132,58,.35);
}
#cupScreen .cw-uncheer:hover{ background:#fff; color:#7a6242; }
#cupScreen .cw-uncheer:focus-visible{ outline:3px solid #ffd98a; outline-offset:2px; }

/* 一次性應援回饋：0.7 秒暖光，播完就停 */
#cupScreen .cw-heat .cw-row.is-fresh{ animation:cwCheerGlow .7s ease-out 1; }
@keyframes cwCheerGlow{
  0%   { box-shadow:0 0 0 0 rgba(224,160,44,.5); }
  60%  { box-shadow:0 0 0 12px rgba(224,160,44,0); }
  100% { box-shadow:0 2px 9px rgba(180,135,50,.18); }
}
@media (prefers-reduced-motion:reduce){
  #cupScreen .cw-heat .cw-row.is-fresh{ animation:none; }
  #cupScreen .cw-heat .cw-row.is-tap:active{ transform:none; }
}
#cupScreen .cw-tag.pick{ background:#fff0d0; color:#a9711a; }

/* 窄機：情報字級不再縮，改讓萌寵名字區可壓縮 */
@media (max-width:390px){
  #cupScreen .cw-heat .cw-row .cw-pet{ min-width:0; }
  #cupScreen .cw-form b{ font-size:12.5px; }
}


/* ══════════════════════════════════════════════════════════════════════
   正式圖示接線
   ----------------------------------------------------------------------
   ‧ 三入口：正式 webp 蓋在原本的 CSS 剪影上方。
     圖載不到時 artImg 會 remove 自己 ⇒ 底下的 CSS 剪影自然露出，永不破圖。
   ‧ 主卡生涯列：補上段位徽章（與生涯收藏頁同一張正式美術）。
   ══════════════════════════════════════════════════════════════════════ */
#cupScreen .cw-eico{ overflow:visible; }
#cupScreen .cw-eico .cw-art{
  position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px);
  object-fit:contain; z-index:2;
}
/* 有正式圖就把底板與 CSS 剪影收起來，只留手繪圖示 */
#cupScreen .cw-eico:has(.cw-art){
  background:transparent; border-color:transparent; box-shadow:none;
}
#cupScreen .cw-eico:has(.cw-art)::before,
#cupScreen .cw-eico:has(.cw-art)::after{ display:none; }

/* 主卡生涯列：段位徽章 */
#cupScreen .cw-career .cw-crow{ gap:8px; }
#cupScreen .cw-rankbadge.sm{
  flex:0 0 auto; display:inline-flex; width:26px; height:26px; position:relative;
  align-self:center;
}
#cupScreen .cw-rankbadge.sm .cw-art{ width:100%; height:100%; object-fit:contain; }


/* ══════════════════════════════════════════════════════════════════════
   Local QA 標示：角落 dev badge，不壓在遊戲畫面上
   ----------------------------------------------------------------------
   ⚠ 原本是整條黑色 footer 橫在畫面底部，像 DevTools 通知，
     直接破壞 Human Visual —— 測試模式不代表畫面可以不看。
   production 完全不會載到這個狀態（race-qa.js 四道鎖）。
   ══════════════════════════════════════════════════════════════════════ */
#raceQaPanel{
  position:fixed; left:auto; right:10px; bottom:10px; width:auto; max-width:min(340px, 92vw);
  border-radius:12px; opacity:.92;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  font-size:11.5px;
}
#raceQaPanel.is-min{
  width:auto; min-width:0; padding:4px 10px; opacity:.55; border-radius:999px;
}
#raceQaPanel.is-min:hover{ opacity:.95; }
#raceQaPanel .qa-bar{ font-size:11px; letter-spacing:.04em; }

/* ══════════════════════════════════════════════════════════════════════
   萌寵盃 Visual Contract：賽果與回放
   ----------------------------------------------------------------------
   與名單／加油頁共用同一套語言：紙張卡面、暖木細框、同一顆 .cw-row、
   同一組 avatar／「我的寵物」標示。只有情緒不同，DNA 相同。
   ══════════════════════════════════════════════════════════════════════ */
#cupScreen .cw-resultlist{
  margin:12px 0 0; padding:14px 13px 12px; border-radius:18px;
  background:linear-gradient(180deg,#fffdf6,#fdf6e6);
  border:1.5px solid #e8d3a4;
  box-shadow:0 2px 10px rgba(150,110,40,.10);
}
#cupScreen .cw-resultlist .cw-list{ margin:6px 0 0; gap:6px; }
#cupScreen .cw-resultlist .cw-row{
  background:#fffdf7; border:1px solid rgba(217,195,156,.55); border-radius:12px;
}
#cupScreen .cw-resultlist .cw-row.is-me{
  background:linear-gradient(180deg,#f4fbf3,#eaf6e8); border-color:#bcdcb6;
}
#cupScreen .cw-resultlist .cw-row.win{
  background:linear-gradient(180deg,#fff7e2,#fdefd0); border-color:#dfbf7d;
}
/* 冠軍在列內用一枚小徽章表示，不再另外開一張重複的冠軍卡 */
#cupScreen .cw-champtag{
  flex:0 0 auto; margin-left:auto;
  font-size:11.5px; font-weight:900; letter-spacing:.1em; color:#fffaf0;
  background:linear-gradient(180deg,#e6b451,#d09028);
  border-radius:999px; padding:3px 10px;
  box-shadow:0 1px 3px rgba(160,110,20,.3);
}

/* ── 回放入口：說清楚「再看一次哪一場」 ───────────────────────────── */
#cupScreen .cw-replaylink{
  position:relative; display:flex; align-items:center; gap:12px;
  width:100%; min-height:60px; margin:12px 0 0; padding:11px 34px 11px 13px;
  text-align:left; border-radius:16px;
  background:linear-gradient(180deg,#fffdf6,#fdf0d6);
  border:1.5px solid #e0c68f;
  box-shadow:0 2px 9px rgba(150,110,40,.12);
  transition:background .12s ease, transform .08s ease;
}
#cupScreen .cw-replaylink:hover{ background:#fff8ea; }
#cupScreen .cw-replaylink:active{ transform:translateY(1px); }
#cupScreen .cw-replaylink:focus-visible{ outline:3px solid #ffd98a; outline-offset:2px; }
/* 播放符號：純 CSS 三角，不新增美術 */
#cupScreen .cw-rpplay{
  flex:0 0 auto; position:relative; width:34px; height:34px; border-radius:50%;
  background:linear-gradient(180deg,#e6b451,#d09028);
  box-shadow:0 1px 4px rgba(160,110,20,.32);
}
#cupScreen .cw-rpplay::after{
  content:''; position:absolute; left:53%; top:50%; transform:translate(-50%,-50%);
  border-left:11px solid #fffaf0; border-top:7px solid transparent;
  border-bottom:7px solid transparent;
}
#cupScreen .cw-rptxt{ flex:1 1 auto; min-width:0; }
#cupScreen .cw-rptxt b{ display:block; font-size:15.5px; font-weight:900; color:#6d4a22; }
#cupScreen .cw-rptxt i{
  display:block; margin-top:2px; font-style:normal; font-size:12.5px; color:#9a7c4e;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#cupScreen .cw-replaylink .cw-chev{
  position:absolute; right:14px; top:50%; width:8px; height:8px; margin-top:-5px;
  border-top:2.5px solid #c4ac82; border-right:2.5px solid #c4ac82; transform:rotate(45deg);
}

/* ── ⑨ Desktop LIVE／Replay：比賽是主角，舞台不該被閱讀欄寬綁住 ────────
   ⚠ Desktop Human Visual FAIL 的 root cause：#cupScreen .cw-body 在 1024px
     以上被收成 600px —— 那條規則是為「首屏資訊密度」寫的，對閱讀型頁面正確，
     但 LIVE 頁的主體是 16:9 賽道：1190px 的視窗只給 572px 舞台，
     六寵 HUD 被壓到看不清，也不像在看一場比賽。
   ⇒ 只有 .cw-body--stage（LIVE / Replay）解除欄寬並收掉多餘 chrome，
     其他頁面完全不受影響（不是第二套版面系統）。 */
@media (min-width:900px){
  #cupScreen .cw-body.cw-body--stage{ max-width:min(1120px, 94vw); gap:12px; }
  .cw-body--stage{
    --cw-chrome: calc(112px + env(safe-area-inset-top) + env(safe-area-inset-bottom));
  }
}

/* 結果頁：寵物是視覺主角（與主卡同一套 petFigure 語言，不是第二套元件） */
#cupScreen .cw-settle .cw-sfig{ margin:2px 0 6px; }
#cupScreen .cw-settle .cw-fig.big{ height:118px; margin:0; }
#cupScreen .cw-settle .cw-fig.big img{ max-height:118px; }
@media (min-width:900px){
  #cupScreen .cw-settle .cw-fig.big{ height:148px; }
  #cupScreen .cw-settle .cw-fig.big img{ max-height:148px; }
}

/* 報名日抬頭的第二層：比賽時間仍然看得到，但不搶「今天要報名」這個主訊息 */
#cupScreen .cw-whensub{
  margin:2px 0 0; font-size:13.5px; font-weight:700; color:#a08356; letter-spacing:.02em;
}
#cupScreen .cw-whensub .cw-hm{ color:#8a6a35; }

/* 今日狀態短句：併進「第一次／最近一場」那一列的右側。
   ⚠ 它原本是主卡裡獨立的一整段，等於把首頁多推長一截，而且和左邊
     講的是同一件事。收成同一列之後，版面不變長、讀起來也連貫。 */
#cupScreen .cw-frnote{
  flex:0 1 auto; margin-left:auto; padding:3px 11px; border-radius:999px;
  background:rgba(255,255,255,.72); border:1px solid rgba(176,132,58,.22);
  font-style:normal; font-size:13px; font-weight:800; color:#7a5f38;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52%;
}
@media (max-width:479px){
  /* ★★ 2026-09-05 v0.60.963 hotfix ★★
     實機：「Fei 今晚也要…」被 ellipsis 裁掉，玩家看不到完整句子。
     ROOT CAUSE：這顆 chip 是 white-space:nowrap ＋ text-overflow:ellipsis ＋ max-width:46%，
       手機寬度不夠就直接裁字 —— 但這是【正式玩家文案】，不是裝飾標籤。
     ⇒ 手機改成「自己佔一整行、自然換行」，★不縮字級、不裁字★。 */
  #cupScreen .cw-firstrun{ flex-wrap:wrap; }
  #cupScreen .cw-frnote{
    flex:1 1 100%; max-width:100%; margin-left:0; margin-top:6px;
    white-space:normal; overflow:visible; text-overflow:clip; text-align:left;
    font-size:12.5px; padding:3px 10px;
  }
}

/* ══ 萌寵盃參賽票：同一個元件，三種決定狀態 ════════════════════════
   ⚠ 舊版只有「已報名」是票券，未決定是一句問句加兩顆橫跨整頁的大按鈕，
     休息又是第三種樣子 —— 同一個生命週期看起來像三個不同的網站。
   ⇒ 同尺寸、同位置、同 typography、同票券輪廓，只換狀態內容與 accent：
       is-ask（暖奶油／蜂蜜金・等你決定）
       預設   （綠色・已確認）
       is-rest（安靜米色・這次休息）
       is-shut（已截止・唯讀）                                        */
#cupScreen .cw-pass.is-ask{
  background:linear-gradient(180deg,#fffaf0,#fdf1d9);
  border-color:#dcae55; box-shadow:0 3px 12px rgba(176,132,58,.18);
}
#cupScreen .cw-pass.is-ask::before,
#cupScreen .cw-pass.is-ask::after{ border-color:#dcae55; }
#cupScreen .cw-pass.is-ask b{ color:#8a5f1c; }
#cupScreen .cw-pass.is-ask b::before{ content:"？"; background:#dcae55; color:#fffaf0; }

#cupScreen .cw-pass.is-rest,
#cupScreen .cw-pass.is-shut{
  background:#fffdf7; border-color:#d8c69c; box-shadow:0 2px 9px rgba(150,110,50,.10);
}
#cupScreen .cw-pass.is-rest::before, #cupScreen .cw-pass.is-rest::after,
#cupScreen .cw-pass.is-shut::before, #cupScreen .cw-pass.is-shut::after{ border-color:#d8c69c; }
#cupScreen .cw-pass.is-rest b, #cupScreen .cw-pass.is-shut b{ color:#7a6242; }
#cupScreen .cw-pass.is-rest b::before{ content:"☾"; background:#c9b78d; color:#fffdf7; }
#cupScreen .cw-pass.is-shut b::before{ content:"—"; background:#c9b78d; color:#fffdf7; }

/* 決定直接長在票上：主選擇是票內的蜂蜜金 CTA，不是橫跨整頁的長條 */
#cupScreen .cw-passcta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:11px 0 1px; flex-wrap:wrap;
}
#cupScreen .cw-tcta{
  flex:0 1 auto; min-height:44px; padding:0 26px; border-radius:999px;
  border:1.5px solid #c08a2a; background:linear-gradient(180deg,#f0bd57,#d9a441);
  color:#fffaf0; font-size:16px; font-weight:900; letter-spacing:.04em; cursor:pointer;
  box-shadow:0 3px 9px rgba(176,132,58,.28);
}
#cupScreen .cw-tcta:active{ transform:translateY(1px); }
#cupScreen .cw-tsec{
  flex:0 1 auto; min-height:44px; padding:0 16px; border-radius:999px;
  border:1px solid transparent; background:transparent;
  color:#8a7355; font-size:14px; font-weight:800; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
#cupScreen .cw-tsec:active{ color:#6d4a22; }
@media (max-width:479px){
  #cupScreen .cw-passcta{ gap:6px; }
  #cupScreen .cw-tcta{ padding:0 22px; font-size:15.5px; }
}

/* 主卡上的「我的寵物今晚跑不跑」：一句話＋小綠勾。
   ⚠ 不做成大卡、不搶「今晚 20:00 開跑」；沿用已報名那一套綠色語言，
     不新增第四種 badge。 */
#cupScreen .cw-mypart{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:4px 10px; margin:2px 0 10px; font-size:16px; font-weight:900; color:#2f7a4f;
}
#cupScreen .cw-mypart.is-rest{ color:#7a6242; }
#cupScreen .cw-mytick{
  display:inline-block; width:20px; height:20px; line-height:20px; border-radius:50%;
  background:#2f7a4f; color:#fff; font-style:normal; font-size:12px; font-weight:900;
  text-align:center; margin-right:5px; vertical-align:-3px;
}
#cupScreen .cw-mytick::before{ content:"✓"; }
#cupScreen .cw-mypart{ margin:0 0 8px; }
/* 今日賽程入口：每一場自己的加油狀態 */
#cupScreen .cw-rlme{
  flex:0 0 auto; padding:2px 8px; border-radius:999px;
  background:#e8f3ea; border:1px solid #b6d8c2; color:#2f7a4f;
  font-size:11.5px; font-weight:900; white-space:nowrap;
}
#cupScreen .cw-rlpick{
  flex:0 0 auto; padding:2px 9px; border-radius:999px;
  background:rgba(255,255,255,.7); border:1px solid rgba(176,132,58,.22);
  color:#9a8460; font-size:11.5px; font-weight:800; white-space:nowrap;
}
#cupScreen .cw-rlpick.is-on{ background:#fff4e0; border-color:#e0c187; color:#8a5f1c; }
@media (max-width:479px){
  #cupScreen .cw-rlme, #cupScreen .cw-rlpick{ font-size:11px; padding:1px 7px; }
  /* ★★ 2026-09-05 v0.60.966：緊湊【兩層】資訊列 ★★
     ⛔ v0.60.963 兩行但太鬆（列高 78px、大量留白）；
        v0.60.965 硬塞成單列，實機直接互相碰撞（標題被 chip 壓住）。
     ✅ 定案：緊湊兩層，行距壓到最小
          第一層：圖示 ＋ 本場參賽名單 ＋ ＞
          第二層：參賽狀態 chip ＋ 加油狀態 chip（左邊對齊標題，讓開圖示寬度）
     ★不縮字級、不截字、不重疊、也不製造大面積空白★
     箭頭是 absolute，明確對齊【第一層】的垂直中心，不會掉到兩層中間。 */
  #cupScreen .cw-rosterlink{
    flex-wrap:wrap; row-gap:4px; column-gap:9px;
    min-height:0; padding:8px 30px 8px 12px;
  }
  /* 第一層＝圖示 ＋ 標題：標題的 flex-basis 取「整列扣掉圖示與間距」，
     兩者相加剛好一整行 ⇒ 兩顆 chip 必然一起落到第二層，
     ★不是靠「剛好放不下」才換行★，也不會把圖示自己擠成一層。 */
  #cupScreen .cw-rlmark{ flex:0 0 auto; }
  #cupScreen .cw-rltxt{ flex:1 1 calc(100% - 28px); }
  #cupScreen .cw-rltxt b{ white-space:nowrap; }
  #cupScreen .cw-rosterlink .cw-chev{ right:12px; top:20px; margin-top:0; }
  #cupScreen .cw-rlme, #cupScreen .cw-rlpick{ order:2; padding:2px 8px; }
  #cupScreen .cw-rlme{ margin-left:30px; }
  #cupScreen .cw-mypart{ font-size:15px; }
}

/* ══════════════════════════════════════════════════════════════════════
   萌寵盃 Mobile Vertical Budget（★永久 UI 合約★）
   ----------------------------------------------------------------------
   驗收基準是 375×812 / 390×844 / 430×932，不是 Desktop 縮小版。
     ‧ 能同行就同行；能左右排就不要上下堆；能 compact row 就不要再開 section
     ‧ 同類收穫共用一個外框與標題，不是每一項各一張 hero 卡
     ‧ 一頁只能有一個 hero（Result 的 hero 是「寵物＋名次」）
     ‧ 間距表達層級，不是把頁面撐長：
         section gap 16–20px／card padding 14–18px／群組內 6–10px
     ‧ 允許捲動，但每一次捲動都必須換到新的資訊
   ★不得用縮小字級換頁面高度★：主客群是手機使用者，可讀性不能拿來交易。
   ══════════════════════════════════════════════════════════════════════ */

/* ══ 「這場留下的東西」：回憶／成就／收藏／EXP 的取得時刻 ══════════════
   ⚠ 第一版把收藏做成「圖一列、標題一列、名稱一列、說明一列」的大卡，
     Desktop 就已經把頁面拉長，手機每取得一項就被往下推半個螢幕。
   ⇒ 四種收穫一律 compact row：左邊一個小圖／小圓點，右邊兩行字。
     儀式感來自內容與質感，不是高度。 */
#cupScreen .cw-reveal{
  margin:10px auto 12px; max-width:420px; padding:13px 13px 12px;
  border-radius:18px; text-align:center;
  background:linear-gradient(180deg,#fffaf0,#fdefd6);
  border:1.5px solid #e0c187; box-shadow:0 5px 16px rgba(150,110,50,.15);
}
#cupScreen .cw-rvhead{
  font-size:12.5px; font-weight:900; letter-spacing:.16em; color:#a9762c; margin-bottom:9px;
}
#cupScreen .cw-rvitem{
  display:flex; align-items:center; gap:10px; text-align:left;
  padding:8px 11px; margin:0 0 6px; border-radius:13px;
  background:rgba(255,255,255,.74); border:1px solid rgba(176,132,58,.18);
  /* ⚠ 不用 fill-mode: both：這一頁會被 reconcile 反覆 render，
     元素每次都是新建的，帶 both 的 delay 會讓它一直停在 opacity:0
     —— 真頁實測整排收穫是空白的。沒有 fill-mode 時，動畫前後都是正常樣式。 */
  animation:cwRvIn .4s cubic-bezier(.2,.8,.3,1);
}
#cupScreen .cw-rvitem:nth-child(3){ animation-delay:.08s; }
#cupScreen .cw-rvitem:nth-child(4){ animation-delay:.16s; }
#cupScreen .cw-rvitem:nth-child(5){ animation-delay:.24s; }
@keyframes cwRvIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ #cupScreen .cw-rvitem{ animation:none; } }
#cupScreen .cw-rvitem > div{ min-width:0; }
#cupScreen .cw-rvitem i{
  flex:0 0 24px; width:24px; height:24px; border-radius:50%;
  background:#f3e2be; font-style:normal; text-align:center; line-height:24px; font-size:13px;
}
#cupScreen .cw-rvitem.is-memory i::before{ content:"❀"; color:#b0752a; }
#cupScreen .cw-rvitem.is-ach i::before{ content:"✦"; color:#c8892a; }
#cupScreen .cw-rvitem.is-exp i::before{ content:"↑"; color:#2f7a4f; }
#cupScreen .cw-rvitem b{
  display:block; font-size:12px; font-weight:900; color:#a9762c; letter-spacing:.04em;
}
#cupScreen .cw-rvitem span{
  display:block; font-size:14.5px; color:#5b4326; margin-top:1px; line-height:1.45;
}
/* 收藏列：左邊是那件收藏本身，右邊「新的生涯紀念物　名稱」同一行 */
#cupScreen .cw-rvitem.is-keep{
  background:radial-gradient(120% 160% at 12% 50%, #fff7e4 0%, rgba(255,255,255,.76) 68%);
  border-color:rgba(176,132,58,.30);
}
#cupScreen .cw-rvart{ flex:0 0 52px; width:52px; height:52px; display:block; }
#cupScreen .cw-rvart img{
  width:52px; height:52px; object-fit:contain;
  filter:drop-shadow(0 3px 7px rgba(150,110,50,.20));
}
#cupScreen .cw-rvitem.is-keep b em{
  font-style:normal; margin-left:8px; font-size:16px; font-weight:900; color:#5b4326;
  letter-spacing:0;
}
#cupScreen .cw-reveal .cw-tcta{ margin-top:5px; }
/* 入口上的小新標記：看過就消失，不永久掛 NEW */
#cupScreen .cw-entry.is-new{ position:relative; }
#cupScreen .cw-entry.is-new::after{
  content:""; position:absolute; top:9px; right:9px; width:9px; height:9px;
  border-radius:50%; background:#e0704f; box-shadow:0 0 0 2px #fffdf7;
}
@media (max-width:479px){
  #cupScreen .cw-reveal{ padding:12px 11px 11px; border-radius:16px; }
  #cupScreen .cw-rvitem{ padding:7px 9px; gap:9px; }
  #cupScreen .cw-rvart, #cupScreen .cw-rvart img{ width:46px; height:46px; flex-basis:46px; }
  /* ★字級不縮★：真的排不下時才讓「新的生涯紀念物」與名稱自然換行 */
  #cupScreen .cw-rvitem.is-keep b em{ margin-left:6px; }
}

/* 回放入口第二行：這一場是哪六隻。★不寫「6 隻」★——每一場本來就是六隻，
   數字不帶資訊；玩家想看的是名字。一行放不下就省略，不換行把卡片撐高。 */
#cupScreen .cw-rpwho{
  display:block; margin-top:2px; font-style:normal; font-size:12.5px; color:#9a8460;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:479px){ #cupScreen .cw-rpwho{ font-size:12px; } }

/* ══════════════════════════════════════════════════════════════════════════
   ★9/7 報名日 Lobby NEW UI｜selective port from race-core-fix（2026-09-07）★
   base = 正式 v0.60.976 / 0c26ae92
   ──────────────────────────────────────────────────────────────────────────
   ★全部 component / screen scoped：每一條選擇器都在 #cupScreen 之內★
   本區塊【沒有】任何 html / body(非 on-cup) / #pageBg 機制 / #app / .nav /
   viewport / display-mode / safe-area 規則 —— v0.60.976 Mobile Shell Golden
   Baseline 視為 frozen，本次不碰。
   只有下面「on-cup 專用背景資產」那一段會用到 body.on-cup #pageBg，
   而且 ★owner 不變、mechanism 不變，只換 on-cup 狀態下的圖★。

   ★沒有帶進來的東西★（刻意，不是漏掉）：
     ‧ STEP3–6：起跑閘門／賽道／runner／crown／HUD／頒獎 podium 與六款夜景
     ‧ STEP2 賽事準備 rebuild（非報名日 Lobby 直接依賴）
     ‧ .cw-cta / .cw-cta2 的全站按鈕改色（會影響非報名日畫面）
     ‧ #cupScreen::before 全視窗固定背景（MAIN v0.60.965 已證實會重引
       iPhone rubber-band 露色，永久禁止）
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Design System token（Lobby 規則直接引用，屬必要相依）───────────── */
#cupScreen{
  /* 主 shell：深夜藍 */
  --cw-navy:        #121d33;
  --cw-navy-2:      #1b2a47;
  --cw-navy-3:      #24365a;
  --cw-navy-scrim:  rgba(14,22,40,.72);   /* 壓在節慶背景上的可讀底 */
  /* 強調：暖金／琥珀（CTA、冠軍、重要狀態） */
  --cw-gold:        #f0b23c;
  --cw-gold-2:      #ffd479;
  --cw-gold-deep:   #b8791a;
  --cw-amber:       #e8873a;
  /* 可讀 surface：奶油／象牙 */
  --cw-cream:       #fdf6e7;
  --cw-cream-2:     #f6ebd6;
  /* 文字（★對比已實測★） */
  --cw-on-navy:     #f6efe0;   /* 深藍底主文字 */
  --cw-on-navy-2:   #c9d2e4;   /* 深藍底次要文字 */
  --cw-on-cream:    #3a2c18;   /* 奶油底主文字 */
  --cw-on-cream-2:  #6b5836;   /* 奶油底次要文字 */
  /* semantic accent：只做狀態，不搶主品牌 */
  --cw-me:          #ffcf6b;   /* 我的寵物 */
  --cw-live:        #57d07a;   /* 進行中 */
}
#cupScreen .cw-rosterlink{
  position:relative; display:flex; align-items:center; gap:11px;
  width:100%; max-width:100%; min-height:50px;
  margin:0 auto 6px; padding:7px 32px 7px 12px;
  text-align:left; border-radius:14px;
  background:linear-gradient(180deg,#22345a,#22345a);
  border:1.5px solid #e3d0a6;
  box-shadow:0 1px 5px rgba(150,110,40,.09);
  transition:background .12s ease, border-color .12s ease, transform .08s ease;
}
#cupScreen .cw-rosterlink:hover{ background:#fff8ea; border-color:rgba(240,178,60,.30); }
#cupScreen .cw-rosterlink:active{ transform:translateY(1px); background:#1e2f52; }
#cupScreen .cw-rosterlink:focus-visible{ outline:3px solid #ffd98a; outline-offset:2px; }
#cupScreen .cw-rlmark{
  flex:0 0 auto; width:19px; height:24px; border-radius:3px 5px 5px 3px;
  background:linear-gradient(180deg,#22345a,#1e2f52);
  border:1.5px solid #d9c39c; position:relative;
}
#cupScreen .cw-rlmark::before,
#cupScreen .cw-rlmark::after{
  content:""; position:absolute; left:5px; right:5px; height:1.5px;
  border-radius:1px; background:rgba(176,132,58,.42);
}
#cupScreen .cw-rlmark::before{ top:6px; }
#cupScreen .cw-rlmark::after{ top:11px; right:8px; }
#cupScreen .cw-rltxt{ flex:1 1 auto; min-width:0; }
#cupScreen .cw-rltxt b{
  display:flex; align-items:baseline; gap:7px;
  font-size:15.5px; font-weight:900; color:#f0b23c; letter-spacing:.02em;
}
#cupScreen .cw-rltxt b em{
  font-style:normal; font-size:12.5px; font-weight:800; color:#f0b23c;
  background:#1e2f52; border-radius:999px; padding:1px 8px; white-space:nowrap;
}
#cupScreen .cw-rosterlink .cw-chev{
  position:absolute; right:14px; top:50%; width:8px; height:8px; margin-top:-5px;
  border-top:2.5px solid rgba(240,178,60,.30); border-right:2.5px solid rgba(240,178,60,.30);
  transform:rotate(45deg);
}
#cupScreen .cw-passcta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:11px 0 1px; flex-wrap:wrap;
}
#cupScreen .cw-tcta{
  flex:0 1 auto; min-height:44px; padding:0 26px; border-radius:999px;
  border:1.5px solid #c08a2a; background:linear-gradient(180deg,#f0bd57,#d9a441);
  color:#fffaf0; font-size:16px; font-weight:900; letter-spacing:.04em; cursor:pointer;
  box-shadow:0 3px 9px rgba(176,132,58,.28);
}
#cupScreen .cw-tcta:active{ transform:translateY(1px); }
#cupScreen .cw-tsec{
  flex:0 1 auto; min-height:44px; padding:0 16px; border-radius:999px;
  border:1px solid transparent; background:transparent;
  color:#dcd3c1; font-size:14px; font-weight:800; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
#cupScreen .cw-tsec:active{ color:#6d4a22; }
#cupScreen .cw-mypart{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:4px 10px; margin:2px 0 10px; font-size:16px; font-weight:900; color:#8fe3ae;
}
#cupScreen .cw-mypart.is-rest{ color:#f1e7d4; }
#cupScreen .cw-mytick{
  display:inline-block; width:20px; height:20px; line-height:20px; border-radius:50%;
  background:#2f7a4f; color:#fff; font-style:normal; font-size:12px; font-weight:900;
  text-align:center; margin-right:5px; vertical-align:-3px;
}
#cupScreen .cw-mytick::before{ content:"✓"; }
#cupScreen .cw-mypart{ margin:0 0 8px; }
#cupScreen .cw-reveal .cw-tcta{ margin-top:5px; }
@keyframes cwAmbient{ from{ opacity:.42 } to{ opacity:.66 } }
#cupScreen .cw-today{
  display:flex; align-items:center; gap:11px; margin:0 0 12px; padding:12px 14px;
  border-radius:var(--cw-r-md);
  background:linear-gradient(180deg, rgba(38,57,95,.86), rgba(23,36,64,.90));
  border:1px solid rgba(240,178,60,.22); box-shadow:var(--cw-sh-panel);
}
#cupScreen .cw-todayico{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px;
  background:linear-gradient(180deg,var(--cw-gold-2),var(--cw-gold)) center/cover;
  box-shadow:0 4px 12px rgba(240,150,30,.30);
  position:relative;
}
#cupScreen .cw-todayico::after{
  content:"🐾"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1;
}
#cupScreen .cw-today.is-win .cw-todayico::after{ content:"👑"; }
#cupScreen .cw-today.is-podium .cw-todayico::after{ content:"🏅"; }
#cupScreen .cw-today.is-mile .cw-todayico::after{ content:"🎉"; }
#cupScreen .cw-todaytxt{ min-width:0; }
#cupScreen .cw-todaytxt b{ display:block; font-size:16px; font-weight:900; color:var(--cw-gold-2); }
#cupScreen .cw-todaytxt i{
  display:block; margin-top:2px; font-style:normal; font-size:14.5px; line-height:1.5;
  color:var(--cw-on-navy);
}
#cupScreen .cw-lobstage{
  position:relative; margin:2px 0 12px; padding:6px 4px 12px; text-align:center;
  /* ★不是實心 navy 卡★：只在中央加一點點聚光，讓底下的賽場透出來 */
  background:radial-gradient(120% 62% at 50% 46%, rgba(18,30,54,.42), rgba(12,20,36,0) 72%);
}
#cupScreen .cw-lobmeta{
  display:inline-flex; flex-direction:column; align-items:center; gap:1px; margin:0 0 6px;
  padding:7px 18px; border-radius:16px;
  background:rgba(12,20,36,.62); border:1px solid rgba(240,178,60,.42);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(4,8,16,.42);
}
#cupScreen .cw-lobmeta b{ font-size:19px; font-weight:900; letter-spacing:.06em; color:var(--cw-gold-2); }
#cupScreen .cw-lobmeta i{ font-style:normal; font-size:14.5px; font-weight:800; color:var(--cw-on-navy); }
#cupScreen .cw-lineup{
  display:flex; align-items:flex-end; justify-content:center; gap:2px;
  margin:2px 0 4px; padding:0 2px;
}
#cupScreen .cw-lu{
  position:relative; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center;
}
#cupScreen .cw-luart{
  display:flex; align-items:flex-end; justify-content:center;
  width:100%; height:74px;                 /* ★正規化：所有物種同一個框 */
}
#cupScreen .cw-luart img{
  max-height:100%; max-width:118%; width:auto; object-fit:contain;
  filter:drop-shadow(0 8px 10px rgba(4,8,16,.55));
}
#cupScreen .cw-luname{
  display:block; max-width:100%; margin-top:2px; font-size:12.5px; font-weight:800;
  color:var(--cw-on-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
#cupScreen .cw-lu.is-me{ flex:1.45 1 0; z-index:2; }
#cupScreen .cw-lu.is-me .cw-luart{ height:104px; }
#cupScreen .cw-lu.is-me .cw-luart::before{
  content:""; position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  width:96px; height:34px; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(255,206,110,.42), transparent 72%);
}
#cupScreen .cw-lu.is-me .cw-luname{ font-size:15px; color:var(--cw-gold-2); }
#cupScreen .cw-lume{
  display:inline-block; margin-top:2px; padding:1px 8px; border-radius:999px;
  text-decoration:none; font-size:11.5px; font-weight:900; color:#3b2708;
  background:linear-gradient(180deg,var(--cw-gold-2),var(--cw-gold));
}
#cupScreen .cw-cd{
  display:inline-flex; flex-direction:column; align-items:center; gap:0;
  margin:8px 0 4px; padding:8px 26px; border-radius:18px;
  background:rgba(12,20,36,.70); border:1px solid rgba(240,178,60,.46);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 8px 22px rgba(4,8,16,.46), inset 0 1px 0 rgba(255,255,255,.08);
}
#cupScreen .cw-cdlabel{ font-size:13px; font-weight:800; letter-spacing:.18em; color:var(--cw-on-navy-2); }
#cupScreen .cw-cdnum{
  font-size:34px; font-weight:900; letter-spacing:.06em; line-height:1.12;
  color:var(--cw-gold-2); font-variant-numeric:tabular-nums;
  text-shadow:0 2px 12px rgba(255,190,90,.36);
}
#cupScreen .cw-cdnum.is-soon{ color:#ffd479; animation:cwCdPulse 1s ease-in-out infinite; }
#cupScreen .cw-cd.is-live .cw-cdnum{ color:#8fe3ae; letter-spacing:.14em; }
#cupScreen .cw-lobsub{
  margin:4px 0 0; font-size:14.5px; font-weight:700; color:var(--cw-on-navy);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
#cupScreen .cw-lobtitle{ margin:0 0 6px; }
#cupScreen .cw-lobtitle b{
  display:block; font-size:29px; font-weight:900; letter-spacing:.16em;
  color:var(--cw-gold-2);
  text-shadow:0 2px 0 rgba(0,0,0,.55), 0 0 26px rgba(240,178,60,.36);
}
#cupScreen .cw-lobtitle i{
  display:block; margin-top:1px; font-style:normal; font-size:13.5px; font-weight:700;
  color:var(--cw-on-navy); text-shadow:0 1px 4px rgba(0,0,0,.85);
}
#cupScreen .cw-lobstage{ padding:2px 4px 6px; }
#cupScreen .cw-lobtitle{ margin:0 0 4px; }
#cupScreen .cw-lobtitle b{ font-size:26px; }
#cupScreen .cw-lobmeta{ padding:6px 16px; margin-bottom:2px; }
#cupScreen .cw-lobmeta b{ font-size:17px; }
#cupScreen .cw-lobmeta i{ font-size:14px; }
#cupScreen .cw-lineup{ margin:0; }
#cupScreen .cw-cd{ margin:6px 0 2px; padding:6px 24px; }
#cupScreen .cw-cdnum{ font-size:31px; }
#cupScreen .cw-lobsub{ margin:3px 0 0; font-size:14px; }
#cupScreen .cw-lhlabel{
  font-size:12.5px; font-weight:800; letter-spacing:.08em; color:var(--cw-on-navy-2);
}
#cupScreen .cw-lh{
  display:inline-flex; align-items:center; gap:5px; min-height:34px;
  padding:5px 11px; border-radius:999px; cursor:pointer; font-family:inherit;
  background:rgba(12,20,36,.62); border:1px solid rgba(255,255,255,.16); color:var(--cw-on-navy);
}
#cupScreen .cw-lh b{ font-size:13.5px; font-weight:900; }
#cupScreen .cw-lh i{ font-style:normal; font-size:12.5px; color:var(--cw-on-navy-2); }
#cupScreen .cw-lh u{
  text-decoration:none; font-size:11.5px; font-weight:900; color:#3b2708;
  background:linear-gradient(180deg,var(--cw-gold-2),var(--cw-gold));
  border-radius:999px; padding:0 6px;
}
#cupScreen .cw-lh.is-on{ border-color:rgba(240,178,60,.62); background:rgba(240,178,60,.16); }
#cupScreen .cw-lh.is-on i{ color:var(--cw-gold-2); }
#cupScreen .cw-back .cw-backtail{ display:inline; }
#cupScreen .cw-tcta,
#cupScreen .cw-cta:not(.is-gold){
  position:relative; isolation:isolate;
  min-height:54px; padding:0 30px; border-radius:16px; cursor:pointer;
  border:0; font-family:inherit; font-size:18.5px; font-weight:900;
  letter-spacing:.03em; line-height:1.2;
  color:#3b2708;
  /* ② 主體：暖金 → 橘，往下加深（光從上方來） */
  background:linear-gradient(180deg,#ffd88a 0%,#f7b23f 46%,#e8873a 100%);
  /* ③ 厚度：底部深金實邊 ＋ 外圍暖光；不是平面色塊 */
  box-shadow:
    0 4px 0 #a9640f,
    0 10px 22px rgba(232,135,58,.34),
    inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-tap-highlight-color:transparent;
  transition:transform .08s ease, box-shadow .08s ease;
}
#cupScreen .cw-tcta::after,
#cupScreen .cw-cta:not(.is-gold)::after{
  content:""; position:absolute; z-index:-1; inset:2px 3px auto; height:42%;
  border-radius:13px 13px 60% 60% / 13px 13px 22% 22%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  pointer-events:none;
}
#cupScreen .cw-tcta:active,
#cupScreen .cw-cta:not(.is-gold):active{
  transform:translateY(3px);
  box-shadow:0 1px 0 #a9640f, 0 4px 10px rgba(232,135,58,.30),
             inset 0 1px 0 rgba(255,255,255,.6);
}
#cupScreen .cw-tcta:focus-visible,
#cupScreen .cw-cta:focus-visible,
#cupScreen .cw-tsec:focus-visible,
#cupScreen .cw-cta2:focus-visible{ outline:3px solid var(--cw-gold-2); outline-offset:2px; }
#cupScreen .cw-tsec,
#cupScreen .cw-cta2{
  min-height:50px; padding:0 22px; border-radius:15px; cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:800; letter-spacing:.02em;
  color:var(--cw-gold-2);
  background:linear-gradient(180deg,rgba(36,54,90,.92),rgba(18,29,51,.92));
  border:1.5px solid rgba(255,212,121,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 3px 10px rgba(8,14,26,.38);
  text-decoration:none;
  transition:transform .08s ease, border-color .12s ease;
}
#cupScreen .cw-tsec:active,
#cupScreen .cw-cta2:active{ transform:translateY(2px); border-color:var(--cw-gold-2); color:var(--cw-gold-2); }
#cupScreen .cw-passcta{ gap:10px; margin-top:14px; }
#cupScreen .cw-passcta .cw-tcta{ flex:1 1 100%; }
#cupScreen .cw-passcta .cw-tsec{ flex:1 1 100%; }
#cupScreen .cw-lobstate{
  margin:0 0 10px; text-align:center; line-height:1.2;
}
#cupScreen .cw-lobstate b{
  display:block; font-size:27px; font-weight:900; letter-spacing:.02em;
  color:var(--cw-on-navy);
  text-shadow:0 2px 10px rgba(6,12,24,.85), 0 0 26px rgba(255,212,121,.20);
}
#cupScreen .cw-lobstate i{
  display:block; margin-top:5px; font-style:normal;
  font-size:16px; font-weight:800; letter-spacing:.04em; color:var(--cw-gold-2);
  text-shadow:0 2px 8px rgba(6,12,24,.8);
}
#cupScreen .cw-lobstage.is-signup .cw-lobstate b{ color:#ffe6ae; }
#cupScreen .cw-lobmeta{
  margin:0 0 10px; display:flex; align-items:baseline; justify-content:center;
  gap:8px; flex-wrap:wrap;
}
#cupScreen .cw-lobmeta b{ font-size:15px; letter-spacing:.1em; opacity:.9; }
#cupScreen .cw-lobmeta i{ font-size:16px; }
#cupScreen .cw-lineup{ align-items:flex-end; }
#cupScreen .cw-lu:not(.is-me){ opacity:.86; transform:translateY(6px) scale(.94); }
#cupScreen .cw-lu:not(.is-me) .cw-luname{ font-size:12.5px; color:var(--cw-on-navy-2); }
#cupScreen .cw-lu.is-me{ transform:translateY(-2px); }
#cupScreen .cw-lu.is-me .cw-luart::after{
  content:""; position:absolute; left:50%; bottom:-6px; translate:-50% 0;
  width:112%; height:34px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,196,92,.42), rgba(255,196,92,0));
  pointer-events:none; z-index:-1;
}
#cupScreen .cw-lu.is-me .cw-luart{ position:relative; }
#cupScreen .cw-lu.is-me .cw-lume{
  background:linear-gradient(180deg,#ffd88a,#f0a933); color:#3b2708;
  border:1px solid rgba(184,121,26,.6); box-shadow:0 2px 0 rgba(140,88,14,.7);
}
#cupScreen .cw-steps{
  list-style:none; margin:14px auto 2px; padding:0; max-width:340px;
  display:grid; gap:9px;
}
#cupScreen .cw-step{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:15px;
  background:linear-gradient(180deg,rgba(36,54,90,.86),rgba(18,29,51,.86));
  border:1px solid rgba(255,212,121,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 3px 12px rgba(8,14,26,.34);
}
#cupScreen .cw-stepico{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px;
  background:rgba(255,212,121,.14); border:1px solid rgba(255,212,121,.3);
  display:grid; place-items:center; font-size:16px;
}
#cupScreen .cw-stepico.is-signup::before{ content:"✏️"; }
#cupScreen .cw-stepico.is-race::before{ content:"🏁"; }
#cupScreen .cw-steptxt{ min-width:0; }
#cupScreen .cw-steptxt b{ display:block; font-size:16.5px; font-weight:900; color:var(--cw-on-navy); }
#cupScreen .cw-steptxt i{ display:block; font-style:normal; font-size:13.5px; font-weight:800; color:var(--cw-gold-2); }
#cupScreen .cw-tcta{ display:inline-flex; align-items:center; justify-content:center; gap:9px; }
#cupScreen .cw-ctapaw::before{ content:"🐾"; font-size:19px; line-height:1; }
#cupScreen .cw-ctago::before{ content:"›"; font-size:24px; font-weight:900; line-height:1; opacity:.8; }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-fig{
  position:relative; margin:2px auto 8px; width:min(168px,46vw);
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-fig img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 10px 18px rgba(6,12,24,.55));
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-fig::after{
  content:""; position:absolute; left:50%; bottom:-4px; translate:-50% 0;
  width:104%; height:30px; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(255,196,92,.40), rgba(255,196,92,0));
  pointer-events:none;
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)){
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  min-height:clamp(400px, 56svh, 560px);
  padding:14px 12px 4px;
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobstate{
  position:relative; margin:0 0 6px; padding:0;
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobstate b{
  font-size:clamp(26px, 7.4vw, 34px); line-height:1.16;
  background:linear-gradient(180deg,#fff3d2 0%,#ffd479 46%,#e9a833 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(90,54,8,.55)) drop-shadow(0 6px 18px rgba(6,12,24,.9));
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobstate::after{
  content:""; display:block; width:min(210px,62%); height:2px; margin:9px auto 0;
  background:linear-gradient(90deg,rgba(255,212,121,0),rgba(255,212,121,.85),rgba(255,212,121,0));
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobstate i{
  font-size:clamp(15px,4.2vw,17px); color:#ffe6ae; letter-spacing:.06em;
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-lobmeta,
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobmeta{
  margin:2px auto 0; padding:6px 16px; border-radius:999px;
  background:rgba(12,20,38,.52); border:1px solid rgba(255,212,121,.28);
  backdrop-filter:blur(2px);
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobmeta b{
  font-size:13.5px; letter-spacing:.14em; color:var(--cw-on-navy-2); opacity:1;
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobmeta i{ font-size:16px; color:#ffe6ae; }
#cupScreen .cw-solo{
  position:relative; margin:auto auto 2px; display:flex;
  flex-direction:column; align-items:center; gap:2px;
}
#cupScreen .cw-solo .cw-fig{ display:block; width:clamp(190px, 54vw, 260px); margin:0; }
#cupScreen .cw-solo .cw-fig img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 14px 22px rgba(4,9,20,.62));
}
#cupScreen .cw-solo .cw-fig::after{
  content:""; position:absolute; left:50%; bottom:26px; translate:-50% 0; z-index:-1;
  width:76%; height:38px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,196,92,.52), rgba(255,196,92,0));
  pointer-events:none;
}
#cupScreen .cw-soloname{
  display:inline-flex; align-items:baseline; gap:9px;
  margin-top:-4px; padding:7px 18px 8px; border-radius:13px;
  background:linear-gradient(180deg,rgba(36,54,90,.94),rgba(16,26,46,.94));
  border:1.5px solid rgba(255,212,121,.5);
  box-shadow:0 4px 14px rgba(4,9,20,.5), inset 0 1px 0 rgba(255,255,255,.10);
}
#cupScreen .cw-soloname b{ font-size:21px; font-weight:900; color:#ffe6ae; letter-spacing:.02em; }
#cupScreen .cw-soloname i{ font-style:normal; font-size:13px; font-weight:800; color:var(--cw-on-navy-2); }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass{
  max-width:min(360px,92vw); margin-inline:auto;
  background:linear-gradient(180deg,rgba(30,47,82,.90),rgba(16,26,46,.92));
  border:1.5px solid rgba(255,212,121,.42);
  box-shadow:0 8px 26px rgba(4,9,20,.5), inset 0 1px 0 rgba(255,255,255,.09);
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass b{ font-size:19px; }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass i{ font-size:13.5px; }
#cupScreen .cw-passcta .cw-tcta{
  min-height:62px; font-size:21px; border-radius:19px; padding:0 22px;
  box-shadow:0 5px 0 #a9640f, 0 14px 28px rgba(232,135,58,.40),
             inset 0 1px 0 rgba(255,255,255,.9);
}
#cupScreen .cw-passcta .cw-tcta:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 #a9640f, 0 5px 12px rgba(232,135,58,.34), inset 0 1px 0 rgba(255,255,255,.7);
}
#cupScreen .cw-ctapaw::before{ font-size:22px; }
#cupScreen .cw-todayhead{
  flex:1 0 100%; margin:0 0 6px; font-size:14px; font-weight:900;
  letter-spacing:.06em; color:var(--cw-gold-2);
}
#cupScreen .cw-todayhead::before{ content:"🐾"; margin-right:7px; font-size:14px; }
#cupScreen .cw-today{
  flex-wrap:wrap; max-width:min(420px,94vw); margin-inline:auto;
  background:linear-gradient(180deg,rgba(30,47,82,.72),rgba(16,26,46,.78));
  border:1px solid rgba(255,212,121,.26);
}
#cupScreen .cw-today .cw-todaytxt b{ font-size:17px; }
#cupScreen .cw-today .cw-todaytxt i{ font-size:14px; }
#cupScreen .cw-solo .cw-fig{ width:clamp(236px, 68vw, 320px); }
#cupScreen .cw-solo{ margin-top:6px; }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobmeta{ margin-bottom:2px; }
#cupScreen .cw-solo{ margin-top:auto; margin-bottom:auto; }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)){ min-height:clamp(360px, 50svh, 500px); }
#cupScreen .cw-solo .cw-fig img{
  max-height:none; max-width:100%; width:100%; height:auto; object-fit:contain;
}
#cupScreen .cw-solo{ position:relative; }
#cupScreen .cw-solo .cw-fig{ position:relative; z-index:1; }
#cupScreen .cw-solo .cw-fig::before{
  content:""; position:absolute; left:50%; bottom:5%; translate:-50% 0; z-index:-1;
  width:46%; height:16px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(3,7,16,.72), rgba(3,7,16,.28) 62%, rgba(3,7,16,0));
  filter:blur(1.5px); pointer-events:none;
}
#cupScreen .cw-solo .cw-fig::after{
  width:104%; height:52px; bottom:1%;
  background:
    radial-gradient(closest-side, rgba(255,206,120,.34), rgba(255,206,120,.10) 58%, rgba(255,206,120,0)),
    radial-gradient(closest-side, rgba(255,236,190,.22), rgba(255,236,190,0) 70%);
}
#cupScreen .cw-solo{ margin-bottom:calc(auto + 0px); }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-solo{ padding-bottom:6px; }
#cupScreen .cw-solo .cw-fig img{
  filter:drop-shadow(0 16px 20px rgba(3,8,18,.55)) saturate(.97) brightness(.985);
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass.is-ask{
  background:none; border:0; box-shadow:none; padding:0; max-width:min(360px,92vw);
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass.is-ask::before,
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass.is-ask::after{ display:none; }
#cupScreen .cw-passcta .cw-tsec{
  min-height:48px; font-size:15px; font-weight:800;
  color:var(--cw-on-navy-2);
  background:none; border:0; box-shadow:none;
  text-decoration:underline; text-decoration-color:rgba(201,210,228,.45);
  text-underline-offset:5px;
}
#cupScreen .cw-passcta .cw-tsec:active{ color:var(--cw-gold-2); transform:none; }
#cupScreen .cw-passcta{ gap:2px; }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass.is-shut{
  max-width:min(340px,92vw); margin-inline:auto;
  background:linear-gradient(180deg,rgba(24,38,66,.86),rgba(14,23,42,.90));
  border:1px solid rgba(255,212,121,.26); box-shadow:none;
}
#cupScreen{
  --cw-st-act:   #ffc55e;   /* 暖金橘：可行動 */
  --cw-st-event: #ffe9b8;   /* 暖白金：賽事時間 */
  --cw-st-calm:  #eae4d4;   /* 月光奶油白：休息 */
  --cw-st-done:  #b9a887;   /* 低彩金：已截止／已完成 */
  /* 每一種星期狀態各自指定「這一天的主 accent」與「標題漸層頂色」 */
  --cw-state-accent: var(--cw-st-act);
  --cw-state-top:    #fff3d2;
  --cw-state-glow:   rgba(255,196,92,.34);
}
#cupScreen .cw-lobstage.is-signup{ --cw-state-accent:var(--cw-st-act);   --cw-state-top:#fff3d2; --cw-state-glow:rgba(255,196,92,.34); }
#cupScreen .cw-lobstage.is-race  { --cw-state-accent:var(--cw-st-event); --cw-state-top:#fffaf0; --cw-state-glow:rgba(255,233,184,.40); }
#cupScreen .cw-lobstage.is-rest  { --cw-state-accent:var(--cw-st-calm);  --cw-state-top:#fdfbf4; --cw-state-glow:rgba(226,226,240,.26); }
#cupScreen .cw-lobstage.is-closed{ --cw-state-accent:var(--cw-st-done); --cw-state-glow:rgba(185,168,135,.20); }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobstate b{
  background:linear-gradient(180deg,var(--cw-state-top) 0%,var(--cw-state-accent) 52%,
                             color-mix(in srgb, var(--cw-state-accent) 74%, #8a5a10) 100%);
  -webkit-background-clip:text; background-clip:text;
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobstate i{ color:var(--cw-state-accent); }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobstate::after{
  background:linear-gradient(90deg,transparent,var(--cw-state-accent),transparent); opacity:.8;
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobmeta i{ color:var(--cw-state-event, var(--cw-st-event)); }
#cupScreen .cw-lobstage:not(:has(.cw-lineup))::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 52% at 50% 34%, var(--cw-state-glow), transparent 70%);
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)){ position:relative; }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) > *{ position:relative; z-index:1; }
#cupScreen .cw-lobstage.is-rest .cw-lobstate b::after{ content:" 🌙"; -webkit-text-fill-color:initial; }
#cupScreen .cw-lobstage.is-closed ~ .cw-hero .cw-pass .cw-passwhen,
#cupScreen .cw-lobstage.is-closed ~ .cw-hero .cw-pass .cw-hm{ color:var(--cw-st-done); }
#cupScreen .cw-lobstage.is-closed ~ .cw-hero .cw-pass.is-locked b{ color:var(--cw-st-done); }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass.is-shut{ max-width:min(354px,94vw); padding-inline:16px; }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobmeta{
  padding:3px 12px 4px; background:rgba(10,17,32,.34);
  border-color:rgba(255,212,121,.18); gap:6px;
}
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobmeta b{ font-size:11.5px; opacity:.82; }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) .cw-lobmeta i{ font-size:14px; opacity:.94; }
#cupScreen .cw-pass.is-ask .cw-passcta{ margin-top:0; }
#cupScreen .cw-tophow{
  flex:0 0 auto; margin-left:auto; min-height:44px; padding:0 15px;
  border-radius:13px; cursor:pointer; font-family:inherit;
  font-size:15px; font-weight:800; letter-spacing:.04em;
  color:var(--cw-gold-2);
  background:linear-gradient(180deg,rgba(36,54,90,.9),rgba(18,29,51,.9));
  border:1px solid rgba(255,212,121,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-tap-highlight-color:transparent;
}
#cupScreen .cw-tophow:active{ transform:translateY(1px); border-color:var(--cw-gold-2); }
#cupScreen .cw-tophow:focus-visible{ outline:3px solid var(--cw-gold-2); outline-offset:2px; }
#cupScreen .cw-tophow + .cw-topbadge{ margin-left:10px; }
#cupScreen .cw-solo{ padding-bottom:0; margin-bottom:auto; }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)){ padding-bottom:10px; }
#cupScreen .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero{ margin-top:2px; }

/* ══════════════════════════════════════════════════════════════════════════
   ★萌寵盃 on-cup 專用背景資產切換★（2026-09-07・極窄例外，經店長授權）
   ──────────────────────────────────────────────────────────────────────────
   ★owner 不變★：背景層仍然是既有的 #pageBg（body 層級、position:fixed、
     inset:0、z-index:0、pointer-events:none），不屬於任何 scroller。
   ★mechanism 不變★：沿用 v0.60.965 已在正式站驗證過的做法，
     不新增 DOM、不改 #pageBg 的 fixed/inset/size/position contract、
     不用 background-attachment:fixed、不用 synthetic scroll、不加 overlay 假遮。
   ★only asset / state-specific presentation change★：
     只有在 body.on-cup（＝玩家真的在萌寵盃畫面）時換成夜祭資產；
     非 on-cup 的任何畫面（寵物首頁／旅行／三消／PWA 首屏）行為 0 改變。

   ⚠ 為什麼不用 #cupScreen::before：
     MAIN race-cup.css 的 v0.60.965 註解已記錄正式實機證據 ——
     ::before 是捲動容器自己的偽元素，iPhone 橡皮筋會把它一起拖走，
     拖出去的地方露出純色。那個 bug 已經在正式站修掉，不得重新引入。
   ══════════════════════════════════════════════════════════════════════════ */
body.on-cup #pageBg{
  background-image:
    /* 前景：燈籠一角／花枝／旗角（中央透明，不擋內容）。
       ⚠ 前景層刻意也掛在 #pageBg 上，★不另外做 position:fixed 的前景元素★——
         那會是 scroller 內的圖層，正是被禁止的那一類。 */
    url(race/ui/cup-lobby-fg-mobile.webp),
    /* 讀性壓層：讓金字與深藍面板在夜景上仍然 ≥7:1 */
    radial-gradient(130% 58% at 50% 0%, rgba(78,110,175,.28), rgba(16,26,46,0) 62%),
    linear-gradient(180deg, rgba(11,18,33,.26) 0%, rgba(11,18,33,.42) 46%,
                            rgba(8,13,25,.72) 82%, rgba(8,13,25,.90) 100%),
    url(race/ui/cup-lobby-night-mobile.webp);
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:cover, cover, cover, cover;
  background-position:center center, center top, center top, center 22%;
}
@media (min-width:900px){
  body.on-cup #pageBg{
    background-image:
      url(race/ui/cup-lobby-fg-desktop.webp),
      radial-gradient(130% 58% at 50% 0%, rgba(78,110,175,.28), rgba(16,26,46,0) 62%),
      linear-gradient(180deg, rgba(11,18,33,.26) 0%, rgba(11,18,33,.42) 46%,
                              rgba(8,13,25,.72) 82%, rgba(8,13,25,.90) 100%),
      url(race/ui/cup-lobby-night-desktop.webp);
    background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
    background-size:cover, cover, cover, cover;
    background-position:center center, center top, center top, center 26%;
  }
}
/* 萌寵盃本體不自己畫底色／底圖，讓 #pageBg 透出來（MAIN 既有規則，這裡不改） */


/* ══ Lobby 表面配色（deep navy + gold）══════════════════════════════════
   ★每一條選擇器都被自動加上 `#cupScreen:has(.cw-body.is-lobby)` 範圍鎖★
   ⇒ 只有【大廳畫面】會變成夜祭配色；萌寵盃的其他頁（賽事準備／名單／結果／
     回憶／成就／生涯收藏）維持正式 v0.60.976 現狀，一個像素都不動。
   這是為了滿足「只帶 9/7 報名日 Lobby、不夾帶未完成 STEP1–6 presentation」。
   ══════════════════════════════════════════════════════════════════════ */
#cupScreen:has(.cw-body.is-lobby) .cw-hero{
  position:relative; overflow:hidden;
  margin:10px 0 14px; padding:18px 16px 16px;
  border-radius:22px; text-align:center;
  background:linear-gradient(180deg,#22345a,#22345a);
  border:1px solid rgba(196,150,76,.28);
  box-shadow:0 6px 18px rgba(150,110,50,.13);
}
#cupScreen:has(.cw-body.is-lobby) .cw-fig{ height:112px; display:flex; align-items:flex-end; justify-content:center; margin:2px 0 4px; }
#cupScreen:has(.cw-body.is-lobby) .cw-fig img{ max-height:112px; max-width:60%; object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(120,90,50,.22)); }
#cupScreen:has(.cw-body.is-lobby) .cw-cheer{ margin:4px 0 2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-cheer b{ display:block; font-size:22px; color:#f0b23c; letter-spacing:.04em; }
#cupScreen:has(.cw-body.is-lobby) .cw-cheer span{ display:block; font-size:15px; color:#f1e7d4; margin-top:2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-cheer i{ display:block; font-style:normal; font-size:13px; color:#dcd3c1; margin-top:4px; }
#cupScreen:has(.cw-body.is-lobby) .cw-spark{ position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle,#1b2a47,#f0b83f); pointer-events:none; opacity:0;
  animation:cwSpark 1.5s ease-out forwards; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass{
  position:relative; margin:10px auto 12px; max-width:280px; padding:14px 18px;
  border-radius:16px; background:#22345a;
  border:2px solid rgba(87,208,122,.34);
  box-shadow:0 3px 12px rgba(47,122,79,.18);
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass::before,
#cupScreen:has(.cw-body.is-lobby) .cw-pass::after{
  content:""; position:absolute; top:50%; width:14px; height:14px;
  margin-top:-7px; border-radius:50%;
  background:#22345a; border:2px solid rgba(87,208,122,.34);
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass::before{ left:-8px; clip-path:inset(0 0 0 50%); }
#cupScreen:has(.cw-body.is-lobby) .cw-pass::after{ right:-8px; clip-path:inset(0 50% 0 0); }
#cupScreen:has(.cw-body.is-lobby) .cw-pass b{
  display:block; font-size:19px; font-weight:900; color:#8fe3ae; letter-spacing:.5px;
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass b::before{
  content:"✓"; display:inline-block; margin-right:7px;
  width:22px; height:22px; line-height:22px; border-radius:50%;
  background:#2f7a4f; color:#fff; font-size:14px; font-weight:900; vertical-align:-3px;
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass span{ display:block; font-size:14px; color:#f6efe0; margin-top:3px; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass i{ display:block; font-style:normal; font-size:12.5px; color:#f1e7d4; margin-top:5px; }
#cupScreen:has(.cw-body.is-lobby) .cw-recall{
  margin:2px auto 10px; max-width:290px; padding:9px 13px 9px 30px;
  position:relative; text-align:left; font-size:13.5px; line-height:1.55;
  color:#f1e7d4; background:rgba(255,255,255,.085); border-radius:14px;
}
#cupScreen:has(.cw-body.is-lobby) .cw-mini{
  display:inline-block; width:auto; margin:2px auto 0; padding:7px 15px;
  font-size:13.5px; color:#dcd3c1; background:transparent;
  border:0; border-radius:12px; text-decoration:underline; text-underline-offset:3px;
}
#cupScreen:has(.cw-body.is-lobby) .cw-mini:active{ color:#5b4326; }
#cupScreen:has(.cw-body.is-lobby) .cw-entries{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-entry{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:13px 13px; border-radius:16px; text-align:left;
  background:rgba(255,255,255,.085); border:1px solid rgba(176,132,58,.22);
}
#cupScreen:has(.cw-body.is-lobby) .cw-entry b{ font-size:14px; color:#f6efe0; }
#cupScreen:has(.cw-body.is-lobby) .cw-entry i{ font-style:normal; font-size:12px; color:#dcd3c1; }
#cupScreen:has(.cw-body.is-lobby) .cw-fig.big{ height:150px; margin-bottom:12px; }
#cupScreen:has(.cw-body.is-lobby) .cw-fig.big img{ max-height:150px; max-width:74%; }
#cupScreen:has(.cw-body.is-lobby) .cw-career{ margin:2px auto 12px; max-width:260px; }
#cupScreen:has(.cw-body.is-lobby) .cw-cbar{
  height:7px; margin:7px 0 4px; border-radius:999px; overflow:hidden;
  background:rgba(176,132,58,.16); box-shadow:inset 0 1px 2px rgba(120,92,48,.18);
}
#cupScreen:has(.cw-body.is-lobby) .cw-cbar i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#f0c766,#e0a02c);
  transition:width .7s cubic-bezier(.2,.8,.3,1);
}
#cupScreen:has(.cw-body.is-lobby) .cw-cexp{ font-size:11px; color:#dcd3c1; letter-spacing:.03em; }
#cupScreen:has(.cw-body.is-lobby) .cw-fig{ position:relative; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero{ margin:8px 0 10px; padding:14px 14px 12px; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero .cw-eyebrow{ font-size:12.5px; margin-bottom:0; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero .cw-when{ font-size:18px; margin:0 0 2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-fig.big{ height:132px; margin:2px 0 6px; }
#cupScreen:has(.cw-body.is-lobby) .cw-fig.big img{ max-height:132px; max-width:56%; }
#cupScreen:has(.cw-body.is-lobby) .cw-career{ margin:0 auto 10px; max-width:252px; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass{ margin:0 auto 8px; max-width:284px; padding:9px 12px 8px; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass b{ font-size:16px; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass span{ font-size:13px; margin-top:1px; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass i{ font-size:11.5px; margin-top:2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-recall{ margin:0 auto 2px; padding:7px 12px 7px 28px; font-size:13px; }
#cupScreen:has(.cw-body.is-lobby) .cw-ask.big{ font-size:14.5px; margin:4px 0 10px; }
#cupScreen:has(.cw-body.is-lobby) .cw-entry{ padding:11px 12px; }
#cupScreen:has(.cw-body.is-lobby) .cw-fig.big{ height:150px; margin:-6px 0 2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-fig.big img{ max-height:150px; max-width:72%; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero .cw-when{ margin-bottom:0; }
#cupScreen:has(.cw-body.is-lobby) .cw-career{ margin-top:-2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-fig.big{ height:150px; margin:4px 0 -8px; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero .cw-when{ margin:0 0 2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-entry.wide{ width:100%; margin-top:10px; }
#cupScreen:has(.cw-body.is-lobby) .cw-mini.center{ display:block; margin:12px auto 0; text-align:center; }
#cupScreen:has(.cw-body.is-lobby) .cw-passframe{
  position:absolute; left:0; top:0; right:0; bottom:0;
  pointer-events:none; z-index:0; border-radius:22px; overflow:hidden;
}
#cupScreen:has(.cw-body.is-lobby) .cw-passframe .cw-art{ object-fit:fill; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero > *:not(.cw-passframe){ position:relative; z-index:1; }
#cupScreen:has(.cw-body.is-lobby) .cw-eico,
#cupScreen:has(.cw-body.is-lobby) .cw-tico,
#cupScreen:has(.cw-body.is-lobby) .cw-slimicon,
#cupScreen:has(.cw-body.is-lobby) .cw-tlicon,
#cupScreen:has(.cw-body.is-lobby) .cw-rq{
  display:inline-block; position:relative;
}
#cupScreen:has(.cw-body.is-lobby) .cw-eico{ width:22px; height:22px; margin-bottom:4px; border-radius:7px;
  background:linear-gradient(180deg,#1b2a47,#eecf90); border:1px solid rgba(176,132,58,.34); }
#cupScreen:has(.cw-body.is-lobby) .cw-eico::after{ content:''; position:absolute; inset:5px; border-radius:3px;
  background:rgba(122,83,18,.55); }
#cupScreen:has(.cw-body.is-lobby) .cw-eico.ic-memory::after{ inset:6px 5px; border-radius:2px 4px 4px 2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-eico.ic-trophy::after{ inset:4px 6px 7px; border-radius:3px 3px 8px 8px; }
#cupScreen:has(.cw-body.is-lobby) .cw-eico.ic-badge::after{ inset:4px; border-radius:50%; }
#cupScreen:has(.cw-body.is-lobby) .cw-entries.three{ grid-template-columns:1fr 1fr 1fr; gap:8px; }
#cupScreen:has(.cw-body.is-lobby) .cw-entries.three .cw-entry{ padding:11px 9px; align-items:center; text-align:center; }
#cupScreen:has(.cw-body.is-lobby) .cw-entries.three .cw-entry b{ font-size:13px; }
#cupScreen:has(.cw-body.is-lobby) .cw-entries.three .cw-entry i{ font-size:11px; line-height:1.4; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass b{ font-size:17px; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass i{ font-size:12.5px; margin-top:4px; }
#cupScreen:has(.cw-body.is-lobby) .cw-entries.three .cw-entry i{ white-space:nowrap; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card{
  --pet:136px;
  --gap:10px;
  padding:18px 18px 16px;
  border-radius:24px; text-align:center;
  background:linear-gradient(180deg,#22345a,#22345a);
  border:1px solid rgba(196,150,76,.20);
  box-shadow:0 4px 14px rgba(150,110,50,.10);
}
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-safe{
  display:flex; flex-direction:column; gap:var(--gap);
}
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-g{ display:flex; flex-direction:column; gap:4px; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-g-when{ gap:1px; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-g-mood{ gap:0; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-eyebrow,
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-when,
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-fig,
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-fig.big,
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-career,
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-pass,
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-cheer,
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-ask.big,
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-cta,
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-mini{ margin-top:0; margin-bottom:0; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-career,
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-pass{ margin-left:auto; margin-right:auto; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-fig.big{ height:var(--pet); }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-fig.big img{ max-height:var(--pet); max-width:70%; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-pass{ position:relative; padding:7px 30px 7px 14px; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-pass b{ font-size:16.5px; line-height:1.35; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-pass i{ font-size:12.5px; margin-top:1px; line-height:1.35; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-pass .cw-more{ top:50%; right:2px; margin-top:-13px; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-rq{ margin-right:6px; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-cbar{ margin:6px 0 3px; }
#cupScreen:has(.cw-body.is-lobby) .cw-note.is-lockcard .cw-ask{ margin-top:9px; }
#cupScreen:has(.cw-body.is-lobby) .cw-back{
  background:#22345a; color:#f1e7d4;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 2px 6px rgba(70,44,12,.28);
  transition:background .12s ease, transform .08s ease, box-shadow .12s ease;
}
#cupScreen:has(.cw-body.is-lobby) .cw-back:hover{ background:#fff; box-shadow:0 2px 9px rgba(70,44,12,.34); }
#cupScreen:has(.cw-body.is-lobby) .cw-back:active{ transform:translateY(1px); background:#1e2f52;
  box-shadow:0 1px 3px rgba(70,44,12,.3); }
#cupScreen:has(.cw-body.is-lobby) .cw-back:focus-visible{ outline:3px solid #ffd98a; outline-offset:2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-cta2,
#cupScreen:has(.cw-body.is-lobby) .cw-mini{
  background:#22345a; color:#f1e7d4;
  border:1.5px solid #e0cba2; border-radius:12px;
  transition:background .12s ease, border-color .12s ease, transform .08s ease;
}
#cupScreen:has(.cw-body.is-lobby) .cw-cta2:hover,
#cupScreen:has(.cw-body.is-lobby) .cw-mini:hover{ background:#fff7e8; border-color:rgba(240,178,60,.30); }
#cupScreen:has(.cw-body.is-lobby) .cw-cta2:active,
#cupScreen:has(.cw-body.is-lobby) .cw-mini:active{ transform:translateY(1px); background:#1e2f52; }
#cupScreen:has(.cw-body.is-lobby) .cw-cta2:focus-visible,
#cupScreen:has(.cw-body.is-lobby) .cw-mini:focus-visible{ outline:3px solid #ffd98a; outline-offset:2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-passwhen{
  display:block; margin-top:5px; font-style:normal;
  font-size:16px; font-weight:900; letter-spacing:.02em; color:#f0b23c;
}
#cupScreen:has(.cw-body.is-lobby) .cw-passwhen .cw-hm{
  display:inline; font-size:20px; font-weight:900; color:#f0b23c;
  letter-spacing:.04em; margin:0 2px;
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass i{ color:#dcd3c1; }
#cupScreen:has(.cw-body.is-lobby) .cw-when.is-quiet{ font-size:15px; font-weight:800; color:#dcd3c1; letter-spacing:.04em; }
#cupScreen:has(.cw-body.is-lobby) .cw-entry{
  position:relative;
  border:1.5px solid rgba(240,178,60,.30); border-radius:14px; background:#22345a;
  transition:background .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}
#cupScreen:has(.cw-body.is-lobby) .cw-entry::after{
  content:""; position:absolute; right:11px; bottom:11px;
  width:7px; height:7px; border-top:2px solid rgba(240,178,60,.30); border-right:2px solid rgba(240,178,60,.30);
  transform:rotate(45deg); opacity:.85;
}
#cupScreen:has(.cw-body.is-lobby) .cw-entry:hover{
  background:#22345a; border-color:rgba(240,178,60,.30); box-shadow:0 3px 10px rgba(120,90,40,.14);
}
#cupScreen:has(.cw-body.is-lobby) .cw-entry:active{ transform:translateY(1px); background:#1e2f52; }
#cupScreen:has(.cw-body.is-lobby) .cw-entry:focus-visible{ outline:3px solid #ffd98a; outline-offset:2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-firstrun{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:9px; text-align:left;
  margin:0 0 10px; padding:7px 14px 7px 16px; border-radius:13px;
  background:linear-gradient(135deg,#22345a 0%,#1e2f52 100%);
  border:1.5px solid #e8d3a4;
  box-shadow:0 2px 8px rgba(150,110,40,.08);
}
#cupScreen:has(.cw-body.is-lobby) .cw-firstrun::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,#e8c06a 0%,#d9a441 100%);
}
#cupScreen:has(.cw-body.is-lobby) .cw-firstrun::after{
  content:""; position:absolute; right:-26px; top:-26px; width:82px; height:82px;
  border-radius:50%; background:rgba(217,164,65,.10);
}
#cupScreen:has(.cw-body.is-lobby) .cw-firstrun b{
  display:block; min-width:0; font-size:14.5px; font-weight:900; color:#f0b23c;
  letter-spacing:.02em; line-height:1.35;
}
#cupScreen:has(.cw-body.is-lobby) .cw-fig{ position:relative; overflow:visible; }
#cupScreen:has(.cw-body.is-lobby) .cw-fig{ --figh:var(--pet, 112px); }
#cupScreen:has(.cw-body.is-lobby) .cw-fig .cw-recall{
  position:absolute; z-index:3; margin:0;
  left:calc(50% + var(--figh) * .46 + 8px);
  top:6%;
  width:max-content; max-width:min(240px, 42%);
  padding:7px 11px; text-align:left;
  font-size:12.5px; line-height:1.5; color:#f1e7d4;
  background:#22345a; border:1.5px solid #e8d3a4; border-radius:13px;
  box-shadow:0 2px 7px rgba(150,110,40,.12);
}
#cupScreen:has(.cw-body.is-lobby) .cw-fig .cw-recall::after{
  content:""; position:absolute; left:-7px; top:13px;
  width:10px; height:10px; background:#22345a;
  border-left:1.5px solid #e8d3a4; border-bottom:1.5px solid #e8d3a4;
  transform:rotate(45deg); border-radius:0 0 0 3px;
}
#cupScreen:has(.cw-body.is-lobby) .cw-fig .cw-recall .cw-rq{ display:none; }
#cupScreen:has(.cw-body.is-lobby) .cw-eico{
  width:30px; height:30px; margin-bottom:6px; border-radius:9px;
  background:linear-gradient(180deg,#1e2f52,#1b2a47);
  border:1px solid rgba(176,132,58,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
#cupScreen:has(.cw-body.is-lobby) .cw-eico::after{ content:''; position:absolute; }
#cupScreen:has(.cw-body.is-lobby) .cw-eico.ic-memory::after{
  inset:8px 6px; border-radius:1px;
  background:
    linear-gradient(90deg, rgba(122,83,18,.55) 0 45%, transparent 45% 55%, rgba(122,83,18,.55) 55% 100%);
}
#cupScreen:has(.cw-body.is-lobby) .cw-eico.ic-memory::before{
  content:''; position:absolute; left:50%; top:7px; bottom:7px; width:1.5px;
  margin-left:-.75px; background:rgba(122,83,18,.75); border-radius:1px;
}
#cupScreen:has(.cw-body.is-lobby) .cw-eico.ic-trophy::after{
  inset:5px 9px 12px; border-radius:50%;
  background:rgba(122,83,18,.62);
}
#cupScreen:has(.cw-body.is-lobby) .cw-eico.ic-trophy::before{
  content:''; position:absolute; left:9px; right:9px; bottom:5px; height:7px;
  background:
    linear-gradient(135deg, rgba(122,83,18,.5) 0 50%, transparent 50%) left/50% 100% no-repeat,
    linear-gradient(225deg, rgba(122,83,18,.5) 0 50%, transparent 50%) right/50% 100% no-repeat;
}
#cupScreen:has(.cw-body.is-lobby) .cw-eico.ic-badge::after{
  inset:12px 6px 7px; border-radius:2px;
  background:rgba(122,83,18,.5);
}
#cupScreen:has(.cw-body.is-lobby) .cw-eico.ic-badge::before{
  content:''; position:absolute; left:6px; right:6px; top:8px; height:5px;
  border-radius:2px 2px 0 0; background:rgba(122,83,18,.7);
  box-shadow:0 7px 0 -2px rgba(255,247,232,.85);
}
#cupScreen:has(.cw-body.is-lobby) .cw-cheered{
  flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:9px;
}
#cupScreen:has(.cw-body.is-lobby) .cw-cheered b{
  font-size:13px; font-weight:900; color:#f0b23c; white-space:nowrap;
}
#cupScreen:has(.cw-body.is-lobby) .cw-eico{ overflow:visible; }
#cupScreen:has(.cw-body.is-lobby) .cw-eico .cw-art{
  position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px);
  object-fit:contain; z-index:2;
}
#cupScreen:has(.cw-body.is-lobby) .cw-eico:has(.cw-art){
  background:transparent; border-color:transparent; box-shadow:none;
}
#cupScreen:has(.cw-body.is-lobby) .cw-eico:has(.cw-art)::before,
#cupScreen:has(.cw-body.is-lobby) .cw-eico:has(.cw-art)::after{ display:none; }
#cupScreen:has(.cw-body.is-lobby) .cw-career .cw-crow{ gap:8px; }
#cupScreen:has(.cw-body.is-lobby) .cw-settle .cw-fig.big{ height:118px; margin:0; }
#cupScreen:has(.cw-body.is-lobby) .cw-settle .cw-fig.big img{ max-height:118px; }
#cupScreen:has(.cw-body.is-lobby) .cw-whensub{
  margin:2px 0 0; font-size:13.5px; font-weight:700; color:#c3ccdf; letter-spacing:.02em;
}
#cupScreen:has(.cw-body.is-lobby) .cw-whensub .cw-hm{ color:#f1e7d4; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-ask{
  background:linear-gradient(180deg,#22345a,#1e2f52);
  border-color:#dcae55; box-shadow:0 3px 12px rgba(176,132,58,.18);
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-ask::before,
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-ask::after{ border-color:#dcae55; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-ask b{ color:#f0b23c; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-ask b::before{ content:"？"; background:#dcae55; color:#fffaf0; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-rest,
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-shut{
  background:#22345a; border-color:#d8c69c; box-shadow:0 2px 9px rgba(150,110,50,.10);
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-rest::before,
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-rest::after,
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-shut::before,
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-shut::after{ border-color:#d8c69c; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-rest b,
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-shut b{ color:#f1e7d4; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-rest b::before{ content:"☾"; background:#182541; color:#fffdf7; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-shut b::before{ content:"—"; background:#182541; color:#fffdf7; }
#cupScreen:has(.cw-body.is-lobby) .cw-passcta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:11px 0 1px; flex-wrap:wrap;
}
#cupScreen:has(.cw-body.is-lobby) .cw-entry.is-new{ position:relative; }
#cupScreen:has(.cw-body.is-lobby) .cw-entry.is-new::after{
  content:""; position:absolute; top:9px; right:9px; width:9px; height:9px;
  border-radius:50%; background:#e0704f; box-shadow:0 0 0 2px #22345a;
}
#cupScreen:has(.cw-body.is-lobby) .cw-top{
  background:linear-gradient(180deg, rgba(22,35,60,.97), rgba(15,24,43,.90));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(240,178,60,.30);
  box-shadow:0 8px 22px rgba(5,9,18,.45);
}
#cupScreen:has(.cw-body.is-lobby) .cw-top h1{
  font-size:20px; color:var(--cw-gold-2);
  text-shadow:0 1px 0 rgba(0,0,0,.55), 0 0 18px rgba(240,178,60,.26);
}
#cupScreen:has(.cw-body.is-lobby) .cw-back{
  background:rgba(255,255,255,.10); border:1px solid rgba(240,178,60,.38);
  color:var(--cw-on-navy); font-size:15px; box-shadow:none;
}
#cupScreen:has(.cw-body.is-lobby) .cw-back::before{ border-left-color:var(--cw-gold-2); border-bottom-color:var(--cw-gold-2); }
#cupScreen:has(.cw-body.is-lobby) .cw-back:active{ background:rgba(255,255,255,.18); }
#cupScreen:has(.cw-body.is-lobby) .is-cream .cw-eyebrow,
#cupScreen:has(.cw-body.is-lobby) .is-cream .cw-ask{ color:var(--cw-on-cream-2); }
#cupScreen:has(.cw-body.is-lobby) .is-cream .cw-when,
#cupScreen:has(.cw-body.is-lobby) .is-cream b{ color:var(--cw-on-cream); }
#cupScreen:has(.cw-body.is-lobby) .cw-eyebrow{ font-size:12.5px; letter-spacing:.12em; color:var(--cw-gold-2); opacity:.95; }
#cupScreen:has(.cw-body.is-lobby) .cw-when{ font-size:23px; color:var(--cw-on-navy); }
#cupScreen:has(.cw-body.is-lobby) .cw-when .cw-hm{ color:var(--cw-gold-2); }
#cupScreen:has(.cw-body.is-lobby) .cw-ask{ font-size:15.5px; color:var(--cw-on-navy-2); }
#cupScreen:has(.cw-body.is-lobby) .cw-ask b{ color:var(--cw-on-navy); }
#cupScreen:has(.cw-body.is-lobby) .cw-cstage,
#cupScreen:has(.cw-body.is-lobby) .cw-rlpick,
#cupScreen:has(.cw-body.is-lobby) .cw-chap,
#cupScreen:has(.cw-body.is-lobby) .cw-mini.inline{
  color:var(--cw-on-navy); border-color:rgba(240,178,60,.28);
}
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-hero{
  margin:0 0 12px; padding:0; border:0; background:none; box-shadow:none; overflow:visible;
}
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-hero .cw-safe{ padding:0 !important; }
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-hero .cw-career{
  /* Lv / 段位 / EXP：留著，但降到第三層 —— 一條細細的資訊列 */
  max-width:none; margin:0 0 10px; padding:8px 12px; border-radius:14px;
  background:rgba(12,20,36,.55); border:1px solid rgba(255,255,255,.08);
  opacity:.92;
}
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-hero .cw-cbar{ height:5px; }
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-hero .cw-cexp{ font-size:11px; }
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-hero .cw-cta{ font-size:19px; padding:16px 14px; }
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-hero .cw-safe{ display:flex; flex-direction:column; gap:8px; }
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-hero .cw-g-state{ order:1; }
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-hero .cw-g-pet{ order:2; }
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-hero .cw-g-mood{ order:3; }
#cupScreen:has(.cw-body.is-lobby) .cw-back .cw-backtail{ display:inline; }
#cupScreen:has(.cw-body.is-lobby) .cw-back,
#cupScreen:has(.cw-body.is-lobby) .cw-top .cw-back{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(240,178,60,.38) !important;
  color:var(--cw-on-navy) !important;
  box-shadow:none !important;
}
#cupScreen:has(.cw-body.is-lobby) .cw-back:active,
#cupScreen:has(.cw-body.is-lobby) .cw-top .cw-back:active{ background:rgba(255,255,255,.20) !important; }
#cupScreen:has(.cw-body.is-lobby) .cw-back:focus-visible{ outline:3px solid var(--cw-gold-2); outline-offset:2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-back::before{
  border-left-color:var(--cw-gold-2) !important;
  border-bottom-color:var(--cw-gold-2) !important;
}
#cupScreen:has(.cw-body.is-lobby) .cw-passcta{ gap:10px; margin-top:14px; }
#cupScreen:has(.cw-body.is-lobby) .cw-passcta .cw-tcta{ flex:1 1 100%; }
#cupScreen:has(.cw-body.is-lobby) .cw-passcta .cw-tsec{ flex:1 1 100%; }
#cupScreen:has(.cw-body.is-lobby) .cw-eyebrow.is-signup{
  display:inline-block; margin:0 0 6px; padding:7px 16px 8px;
  border-radius:11px; font-size:15px; font-weight:900; letter-spacing:.06em;
  color:#2b1c06;
  background:linear-gradient(180deg,#ffdd94,#f0b23c 60%,#dd9a24);
  border:1.5px solid rgba(184,121,26,.7);
  box-shadow:0 3px 0 rgba(140,88,14,.85), 0 6px 16px rgba(0,0,0,.28),
             inset 0 1px 0 rgba(255,255,255,.7);
  opacity:1;
}
#cupScreen:has(.cw-body.is-lobby) .cw-hero .cw-eyebrow.is-signup{ font-size:15px; color:#2b1c06; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-when b{ color:var(--cw-on-navy); font-weight:900; }
#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-when .cw-hm{ color:var(--cw-gold-2); font-weight:900; }
#cupScreen:has(.cw-body.is-lobby) .cw-entries{ margin-top:16px; }
#cupScreen:has(.cw-body.is-lobby) .cw-entry{
  background:linear-gradient(180deg,rgba(36,54,90,.9),rgba(18,29,51,.9));
  border:1px solid rgba(255,212,121,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 3px 12px rgba(8,14,26,.34);
}
#cupScreen:has(.cw-body.is-lobby) .cw-entry b{ color:var(--cw-on-navy); }
#cupScreen:has(.cw-body.is-lobby) .cw-entry i{ color:var(--cw-on-navy-2); }
#cupScreen:has(.cw-body.is-lobby) .cw-firstrun{
  background:linear-gradient(180deg,rgba(30,47,82,.72),rgba(18,29,51,.72));
  border:1px solid rgba(255,212,121,.20);
  box-shadow:none;
}
#cupScreen:has(.cw-body.is-lobby) .cw-firstrun b{ font-size:15px; font-weight:800; }
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-lobstage.is-bare ~ .cw-hero .cw-fig,
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-fig{
  display:block;
}
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-fig{
  position:relative; margin:2px auto 8px; width:min(168px,46vw);
}
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-fig img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 10px 18px rgba(6,12,24,.55));
}
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-fig::after{
  content:""; position:absolute; left:50%; bottom:-4px; translate:-50% 0;
  width:104%; height:30px; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(255,196,92,.40), rgba(255,196,92,0));
  pointer-events:none;
}
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-g-pet{ order:0; }
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-g-state{ order:1; }
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-lobmeta,
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) .cw-lobmeta{
  margin:2px auto 0; padding:6px 16px; border-radius:999px;
  background:rgba(12,20,38,.52); border:1px solid rgba(255,212,121,.28);
  backdrop-filter:blur(2px);
}
#cupScreen:has(.cw-body.is-lobby) .cw-solo .cw-fig{ display:block; width:clamp(190px, 54vw, 260px); margin:0; }
#cupScreen:has(.cw-body.is-lobby) .cw-solo .cw-fig img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 14px 22px rgba(4,9,20,.62));
}
#cupScreen:has(.cw-body.is-lobby) .cw-solo .cw-fig::after{
  content:""; position:absolute; left:50%; bottom:26px; translate:-50% 0; z-index:-1;
  width:76%; height:38px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,196,92,.52), rgba(255,196,92,0));
  pointer-events:none;
}
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-g-pet{ order:2; }
#cupScreen:has(.cw-body.is-lobby) .cw-body.has-stage > .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-g-state{ order:1; }
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass{
  max-width:min(360px,92vw); margin-inline:auto;
  background:linear-gradient(180deg,rgba(30,47,82,.90),rgba(16,26,46,.92));
  border:1.5px solid rgba(255,212,121,.42);
  box-shadow:0 8px 26px rgba(4,9,20,.5), inset 0 1px 0 rgba(255,255,255,.09);
}
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass b{ font-size:19px; }
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass i{ font-size:13.5px; }
#cupScreen:has(.cw-body.is-lobby) .cw-passcta .cw-tcta{
  min-height:62px; font-size:21px; border-radius:19px; padding:0 22px;
  box-shadow:0 5px 0 #a9640f, 0 14px 28px rgba(232,135,58,.40),
             inset 0 1px 0 rgba(255,255,255,.9);
}
#cupScreen:has(.cw-body.is-lobby) .cw-passcta .cw-tcta:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 #a9640f, 0 5px 12px rgba(232,135,58,.34), inset 0 1px 0 rgba(255,255,255,.7);
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-done{
  background:linear-gradient(180deg,rgba(58,80,42,.30),rgba(16,26,46,.92)),
             linear-gradient(180deg,rgba(30,47,82,.92),rgba(16,26,46,.94));
  border-color:rgba(255,212,121,.6);
  box-shadow:0 8px 30px rgba(4,9,20,.55), 0 0 0 1px rgba(255,212,121,.14),
             inset 0 1px 0 rgba(255,255,255,.12);
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-done b{
  font-size:23px; color:#ffe6ae;
  text-shadow:0 2px 10px rgba(255,180,60,.35);
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-done b::before{
  content:"✓"; display:inline-grid; place-items:center;
  width:26px; height:26px; margin-right:9px; border-radius:50%;
  background:linear-gradient(180deg,#8fe3ae,#3fae72); color:#0f2a1c;
  font-size:16px; font-weight:900; vertical-align:-4px;
  box-shadow:0 2px 0 rgba(20,80,50,.6);
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-done .cw-passwhen{
  display:block; margin-top:6px; font-size:19px; font-weight:900; color:var(--cw-on-navy);
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-done .cw-passwhen .cw-hm{ font-size:23px; color:var(--cw-gold-2); }
#cupScreen:has(.cw-body.is-lobby) .cw-passact{ display:block; margin:12px auto 0; min-width:160px; }
#cupScreen:has(.cw-body.is-lobby) .cw-entries{ max-width:min(460px,96vw); margin-inline:auto; gap:10px; }
#cupScreen:has(.cw-body.is-lobby) .cw-entry{
  border-radius:18px; padding:14px 10px 12px;
  border:1.5px solid rgba(255,212,121,.42);
  box-shadow:0 6px 18px rgba(4,9,20,.42), inset 0 1px 0 rgba(255,255,255,.09);
}
#cupScreen:has(.cw-body.is-lobby) .cw-entry:active{ transform:translateY(2px); }
#cupScreen:has(.cw-body.is-lobby) .cw-entry .cw-eico{
  filter:drop-shadow(0 3px 8px rgba(255,196,92,.28));
}
#cupScreen:has(.cw-body.is-lobby) .cw-entry b{ font-size:15.5px; }
#cupScreen:has(.cw-body.is-lobby) .cw-entry i{ font-size:12px; }
#cupScreen:has(.cw-body.is-lobby) .cw-solo .cw-fig{ width:clamp(236px, 68vw, 320px); }
#cupScreen:has(.cw-body.is-lobby) .cw-solo .cw-fig img{
  max-height:none; max-width:100%; width:100%; height:auto; object-fit:contain;
}
#cupScreen:has(.cw-body.is-lobby) .cw-solo .cw-fig{ position:relative; z-index:1; }
#cupScreen:has(.cw-body.is-lobby) .cw-solo .cw-fig::before{
  content:""; position:absolute; left:50%; bottom:5%; translate:-50% 0; z-index:-1;
  width:46%; height:16px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(3,7,16,.72), rgba(3,7,16,.28) 62%, rgba(3,7,16,0));
  filter:blur(1.5px); pointer-events:none;
}
#cupScreen:has(.cw-body.is-lobby) .cw-solo .cw-fig::after{
  width:104%; height:52px; bottom:1%;
  background:
    radial-gradient(closest-side, rgba(255,206,120,.34), rgba(255,206,120,.10) 58%, rgba(255,206,120,0)),
    radial-gradient(closest-side, rgba(255,236,190,.22), rgba(255,236,190,0) 70%);
}
#cupScreen:has(.cw-body.is-lobby) .cw-solo .cw-fig img{
  filter:drop-shadow(0 16px 20px rgba(3,8,18,.55)) saturate(.97) brightness(.985);
}
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass.is-ask{
  background:none; border:0; box-shadow:none; padding:0; max-width:min(360px,92vw);
}
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass.is-ask::before,
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass.is-ask::after{ display:none; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-ask b{
  display:block; font-size:20px; color:var(--cw-on-navy);
  text-shadow:0 2px 10px rgba(6,12,24,.9);
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-ask b::before{ display:none; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-ask i{
  font-size:14px; color:var(--cw-on-navy-2);
  text-shadow:0 1px 8px rgba(6,12,24,.9);
}
#cupScreen:has(.cw-body.is-lobby) .cw-passcta .cw-tsec{
  min-height:48px; font-size:15px; font-weight:800;
  color:var(--cw-on-navy-2);
  background:none; border:0; box-shadow:none;
  text-decoration:underline; text-decoration-color:rgba(201,210,228,.45);
  text-underline-offset:5px;
}
#cupScreen:has(.cw-body.is-lobby) .cw-passcta .cw-tsec:active{ color:var(--cw-gold-2); transform:none; }
#cupScreen:has(.cw-body.is-lobby) .cw-passcta{ gap:2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass.is-shut{
  max-width:min(340px,92vw); margin-inline:auto;
  background:linear-gradient(180deg,rgba(24,38,66,.86),rgba(14,23,42,.90));
  border:1px solid rgba(255,212,121,.26); box-shadow:none;
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-shut b{ font-size:18px; color:var(--cw-on-navy); }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-shut b::before{ display:none; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-shut .cw-passwhen{
  display:block; margin-top:5px; font-size:17px; font-weight:900; color:var(--cw-gold-2);
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-shut i{ font-size:13px; color:var(--cw-on-navy-2); }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-locked{
  max-width:min(360px,92vw); margin-inline:auto;
  background:linear-gradient(180deg,rgba(30,47,82,.90),rgba(16,26,46,.92));
  border:1.5px solid rgba(255,212,121,.42);
}
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-locked b{ font-size:21px; color:#ffe6ae; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-locked .cw-passwhen{
  display:block; margin-top:5px; font-size:18px; font-weight:900; color:var(--cw-on-navy);
}
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage.is-closed ~ .cw-hero .cw-pass .cw-passwhen,
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage.is-closed ~ .cw-hero .cw-pass .cw-hm{ color:var(--cw-st-done); }
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage.is-closed ~ .cw-hero .cw-pass.is-locked b{ color:var(--cw-st-done); }
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-pass.is-shut{ max-width:min(354px,94vw); padding-inline:16px; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-ask{ margin-top:0; }
#cupScreen:has(.cw-body.is-lobby) .cw-pass.is-ask .cw-passcta{ margin-top:0; }
#cupScreen:has(.cw-body.is-lobby) .cw-tophow{
  flex:0 0 auto; margin-left:auto; min-height:44px; padding:0 15px;
  border-radius:13px; cursor:pointer; font-family:inherit;
  font-size:15px; font-weight:800; letter-spacing:.04em;
  color:var(--cw-gold-2);
  background:linear-gradient(180deg,rgba(36,54,90,.9),rgba(18,29,51,.9));
  border:1px solid rgba(255,212,121,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-tap-highlight-color:transparent;
}
#cupScreen:has(.cw-body.is-lobby) .cw-tophow:active{ transform:translateY(1px); border-color:var(--cw-gold-2); }
#cupScreen:has(.cw-body.is-lobby) .cw-tophow:focus-visible{ outline:3px solid var(--cw-gold-2); outline-offset:2px; }
#cupScreen:has(.cw-body.is-lobby) .cw-top h1{ margin-right:8px; }
#cupScreen:has(.cw-body.is-lobby) .cw-tophow + .cw-topbadge{ margin-left:10px; }
#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero{ margin-top:2px; }
@media (min-width:412px){#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card{ --pet:146px; } }
@media (min-width:700px){
  /* 平板：內容欄收窄，主卡不被拉成一整片橫幅；順帶解決收藏頁過寬 */#cupScreen:has(.cw-body.is-lobby) .cw-body{ max-width:560px; margin-left:auto; margin-right:auto; }#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card{ --pet:168px; --gap:12px; padding:22px 22px 20px; }#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-when{ font-size:21px; }#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-pass b{ font-size:18px; }#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-pass i{ font-size:13.5px; }
}
@media (min-width:1024px){
  /* 桌機 720p 的可用高度其實只有 ~550px（瀏覽器工具列吃掉約 170px）。
     實測收斂前首屏只看得到 4 個區塊中的 1 個 —— 主卡太高。
     ★只收留白與角色圖高度，字級一律不動★（50+ 玩家要看得清楚）。 */#cupScreen:has(.cw-body.is-lobby) .cw-body{ max-width:600px; padding-top:12px; gap:10px; }#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card{ --pet:96px; --gap:7px; padding:11px 24px 10px; }#cupScreen:has(.cw-body.is-lobby) .cw-hero .cw-eyebrow{ margin-bottom:0; }#cupScreen:has(.cw-body.is-lobby) .cw-hero .cw-when{ margin-top:1px; }#cupScreen:has(.cw-body.is-lobby) .cw-fig.big{ height:92px; margin:-5px 0 0; }#cupScreen:has(.cw-body.is-lobby) .cw-fig.big img{ max-height:92px; }#cupScreen:has(.cw-body.is-lobby) .cw-career{ margin:0 auto 6px; }#cupScreen:has(.cw-body.is-lobby) .cw-cbar{ margin:4px 0 2px; }#cupScreen:has(.cw-body.is-lobby) .cw-pass{ margin:0 auto 6px; padding:9px 16px; }#cupScreen:has(.cw-body.is-lobby) .cw-passwhen{ margin-top:3px; }#cupScreen:has(.cw-body.is-lobby) .cw-recall{ margin:0 auto; padding:5px 12px; }#cupScreen:has(.cw-body.is-lobby) .cw-cta{ margin-top:10px; padding:12px 14px; font-size:17px; }#cupScreen:has(.cw-body.is-lobby) .cw-firstrun{ margin-bottom:0; padding:6px 14px 6px 16px; }#cupScreen:has(.cw-body.is-lobby) .cw-entries.three{ gap:10px; }#cupScreen:has(.cw-body.is-lobby) .cw-entry{ padding:11px 13px; }
}
@media (min-width:1440px){#cupScreen:has(.cw-body.is-lobby) .cw-body{ max-width:640px; }#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card{ padding:20px 28px 18px; }
}
@media (max-width:520px){#cupScreen:has(.cw-body.is-lobby) .cw-fig{
    flex-direction:column; align-items:center; justify-content:flex-end;
    height:auto; gap:8px;
    /* ⚠ 立繪區在幾個斷點有負 margin（-8px／-6px／-5px）把自己往上拉。
       泡泡改排到立繪【上方】之後，那個負值會讓泡泡去壓到「今晚的萌寵盃」標題。
       ⇒ 手機版把上下負 margin 歸零，並在泡泡上方留一點呼吸。 */
    margin-top:6px; margin-bottom:6px;
  }
  /#cupScreen:has(.cw-body.is-lobby) * ⚠ 特異性：#cupScreen .cw-hero.is-card .cw-fig.big{height:var(--pet)} 是 (1,2,1)，
     必須用同級選擇器才蓋得過；否則高度仍被鎖成 136px，
     泡泡排上去就會溢出容器、壓到「今晚的萌寵盃」標題。 */#cupScreen:has(.cw-body.is-lobby) .cw-fig.big,
  #cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-fig.big{ height:auto; margin-top:6px; margin-bottom:6px; }#cupScreen:has(.cw-body.is-lobby) .cw-fig .cw-recall{
    /* ★relative 不是 static★：尾巴 ::after 要以泡泡自己為定位基準，
       設成 static 會讓尾巴掉到 .cw-fig 的底部（跑到寵物下面）。 */
    position:relative; order:-1;
    left:auto; right:auto; top:auto;
    width:auto; max-width:min(300px, 94%);
    margin:0 auto; padding:7px 12px;
    font-size:12.5px; text-align:center;
  }
  /* 尾巴：置中朝下指向寵物 */#cupScreen:has(.cw-body.is-lobby) .cw-fig .cw-recall::after{
    left:50%; right:auto; top:auto; bottom:-6px; margin-left:-5px;
    transform:rotate(-45deg);
    border-left:1.5px solid #e8d3a4; border-bottom:1.5px solid #e8d3a4;
    border-radius:0 0 0 3px;
  }
  /* 立繪維持既有比例，只是不再需要替泡泡讓出側邊空間 */#cupScreen:has(.cw-body.is-lobby) .cw-hero.is-card .cw-fig.big img{ max-height:var(--pet, 136px); }
}
@media (max-width:339px){#cupScreen:has(.cw-body.is-lobby) .cw-fig .cw-recall{ display:none; }
}
@media (min-width:900px){#cupScreen:has(.cw-body.is-lobby) .cw-settle .cw-fig.big{ height:148px; }#cupScreen:has(.cw-body.is-lobby) .cw-settle .cw-fig.big img{ max-height:148px; }
}
@media (max-width:479px){
  /* ★★ 2026-09-05 v0.60.963 hotfix ★★
     實機：「Fei 今晚也要…」被 ellipsis 裁掉，玩家看不到完整句子。
     ROOT CAUSE：這顆 chip 是 white-space:nowrap ＋ text-overflow:ellipsis ＋ max-width:46%，
       手機寬度不夠就直接裁字 —— 但這是【正式玩家文案】，不是裝飾標籤。
     ⇒ 手機改成「自己佔一整行、自然換行」，★不縮字級、不裁字★。 */#cupScreen:has(.cw-body.is-lobby) .cw-firstrun{ flex-wrap:wrap; }#cupScreen:has(.cw-body.is-lobby) .cw-frnote{
    flex:1 1 100%; max-width:100%; margin-left:0; margin-top:6px;
    white-space:normal; overflow:visible; text-overflow:clip; text-align:left;
    font-size:12.5px; padding:3px 10px;
  }
}
@media (max-width:479px){#cupScreen:has(.cw-body.is-lobby) .cw-passcta{ gap:6px; }#cupScreen:has(.cw-body.is-lobby) .cw-tcta{ padding:0 22px; font-size:15.5px; }
}
@media (max-width:479px){#cupScreen:has(.cw-body.is-lobby) .cw-rlme,
  #cupScreen:has(.cw-body.is-lobby) .cw-rlpick{ font-size:11px; padding:1px 7px; }
  /* ★★ 2026-09-05 v0.60.966：緊湊【兩層】資訊列 ★★
     ⛔ v0.60.963 兩行但太鬆（列高 78px、大量留白）；
        v0.60.965 硬塞成單列，實機直接互相碰撞（標題被 chip 壓住）。
     ✅ 定案：緊湊兩層，行距壓到最小
          第一層：圖示 ＋ 本場參賽名單 ＋ ＞
          第二層：參賽狀態 chip ＋ 加油狀態 chip（左邊對齊標題，讓開圖示寬度）
     ★不縮字級、不截字、不重疊、也不製造大面積空白★
     箭頭是 absolute，明確對齊【第一層】的垂直中心，不會掉到兩層中間。 */#cupScreen:has(.cw-body.is-lobby) .cw-rosterlink{
    flex-wrap:wrap; row-gap:4px; column-gap:9px;
    min-height:0; padding:8px 30px 8px 12px;
  }
  /* 第一層＝圖示 ＋ 標題：標題的 flex-basis 取「整列扣掉圖示與間距」，
     兩者相加剛好一整行 ⇒ 兩顆 chip 必然一起落到第二層，
     ★不是靠「剛好放不下」才換行★，也不會把圖示自己擠成一層。 */#cupScreen:has(.cw-body.is-lobby) .cw-rlmark{ flex:0 0 auto; }#cupScreen:has(.cw-body.is-lobby) .cw-rltxt{ flex:1 1 calc(100% - 28px); }#cupScreen:has(.cw-body.is-lobby) .cw-rltxt b{ white-space:nowrap; }#cupScreen:has(.cw-body.is-lobby) .cw-rosterlink .cw-chev{ right:12px; top:20px; margin-top:0; }#cupScreen:has(.cw-body.is-lobby) .cw-rlme,
  #cupScreen:has(.cw-body.is-lobby) .cw-rlpick{ order:2; padding:2px 8px; }#cupScreen:has(.cw-body.is-lobby) .cw-rlme{ margin-left:30px; }#cupScreen:has(.cw-body.is-lobby) .cw-mypart{ font-size:15px; }
}
@media (min-width:1024px){#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby{
    display:grid; grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr);
    column-gap:26px; row-gap:14px; align-content:start;
    max-width:1240px; margin:0 auto; padding:18px 28px 30px;
  }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby > .cw-sign{ grid-column:1 / -1; margin:0; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby > *{ grid-column:2; margin-left:0; margin-right:0; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby > .cw-hero{
    grid-column:1; grid-row:2 / span 6; align-self:start; margin:0;
    padding:26px 26px 22px;
  }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby .cw-fig.big{ height:210px; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby .cw-fig.big img{ max-height:210px; max-width:62%; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby .cw-hero .cw-when{ font-size:26px; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby .cw-career{ max-width:340px; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby .cw-entries{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px){#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage > .cw-lobstage{
    grid-column:1; grid-row:1 / span 8; align-self:start; margin:0; padding:14px 10px 18px;
  }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage > .cw-hero{ grid-column:2; grid-row:auto; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage > *{ grid-column:2; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage > .cw-lobstage{ grid-column:1; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage .cw-lobtitle b{ font-size:40px; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage .cw-luart{ height:120px; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage .cw-lu.is-me .cw-luart{ height:168px; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage .cw-luname{ font-size:15px; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage .cw-lu.is-me .cw-luname{ font-size:19px; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage .cw-cdnum{ font-size:46px; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage .cw-lobmeta b{ font-size:23px; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage .cw-lobsub{ font-size:16px; }
}
@media (min-width:760px){#cupScreen:has(.cw-body.is-lobby)::before{
    background:
      radial-gradient(130% 58% at 50% 0%, rgba(78,110,175,.28), rgba(16,26,46,0) 62%),
      linear-gradient(180deg, rgba(11,18,33,.26) 0%, rgba(11,18,33,.42) 46%,
                              rgba(8,13,25,.72) 82%, rgba(8,13,25,.90) 100%),
      url(race/ui/cup-lobby-night-desktop.webp) center 26%/cover no-repeat,
      var(--cw-navy);
  }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby::after{ background-image:url(race/ui/cup-lobby-fg-desktop.webp); }
}
@media (max-width:430px){#cupScreen:has(.cw-body.is-lobby) .cw-back .cw-backtail{ display:none; }#cupScreen:has(.cw-body.is-lobby) .cw-back{ padding-left:11px; padding-right:13px; }#cupScreen:has(.cw-body.is-lobby) .cw-top{ gap:8px; }#cupScreen:has(.cw-body.is-lobby) .cw-top h1{ letter-spacing:1px; }
}
@media (max-width:360px){#cupScreen:has(.cw-body.is-lobby) .cw-top h1{
    white-space:normal; overflow:visible; text-overflow:clip;
    font-size:17px; line-height:1.2;
  }
}
@media (max-width:479px){#cupScreen:has(.cw-body.is-lobby) .cw-tcta{ font-size:18px; padding:0 22px; }#cupScreen:has(.cw-body.is-lobby) .cw-eyebrow.is-signup{ font-size:14.5px; padding:6px 14px 7px; }
}
@media (min-width:1024px){#cupScreen:has(.cw-body.is-lobby) .cw-passcta{ flex-wrap:nowrap; }#cupScreen:has(.cw-body.is-lobby) .cw-passcta .cw-tcta{ flex:1 1 auto; }#cupScreen:has(.cw-body.is-lobby) .cw-passcta .cw-tsec{ flex:0 0 auto; }
}
@media (min-width:1024px){#cupScreen:has(.cw-body.is-lobby) .cw-lobstate b{ font-size:38px; }#cupScreen:has(.cw-body.is-lobby) .cw-lobstate i{ font-size:19px; }
}
@media (max-width:479px){#cupScreen:has(.cw-body.is-lobby) .cw-lobstate b{ font-size:25px; }#cupScreen:has(.cw-body.is-lobby) .cw-lobstate i{ font-size:15px; }
}
@media (min-width:1024px){
  /* ① 主 CTA 永遠不得被壓到換行 */#cupScreen:has(.cw-body.is-lobby) .cw-tcta{ white-space:nowrap; flex:0 0 auto; min-width:max-content; }#cupScreen:has(.cw-body.is-lobby) .cw-tsec{ white-space:nowrap; flex:0 0 auto; }#cupScreen:has(.cw-body.is-lobby) .cw-passcta{ flex-wrap:wrap; justify-content:center; }#cupScreen:has(.cw-body.is-lobby) .cw-passcta .cw-tcta{ flex:1 1 100%; }#cupScreen:has(.cw-body.is-lobby) .cw-passcta .cw-tsec{ flex:1 1 100%; }

  /* ② compact 行程不要拉成橫幅 */#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage .cw-lobmeta{
    max-width:420px; margin-inline:auto; justify-content:center;
  }

  /* ③ 右欄＝操作欄：Fei 與 Action Zone 同一個視覺群組、一起置中 */#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage > .cw-hero{
    align-self:center; max-width:460px; margin-inline:auto;
  }#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-fig{
    width:200px; margin:0 auto 10px;
  }
  /* 左欄（夜景舞台）：狀態標題留在畫面上半，不被垂直置中拉到中央 */#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage > .cw-lobstage{ align-self:start; padding-top:18px; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage .cw-lobstate b{ font-size:34px; }
}
@media (min-width:1024px){
  /* Fei 在 desktop 要站在 Action Zone 上緣（吉祥物探出面板），
     不能懸在夜空中央——右欄很高，單純置中會讓牠看起來貼在牌樓上。 */#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-fig{
    width:176px; margin:0 auto -30px; position:relative; z-index:2;
  }#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)) ~ .cw-hero .cw-g-state{ position:relative; z-index:1; }
}
@media (min-width:1024px){#cupScreen:has(.cw-body.is-lobby) .cw-lobstage:not(:has(.cw-lineup)){ min-height:clamp(420px,62vh,620px); }#cupScreen:has(.cw-body.is-lobby) .cw-solo .cw-fig{ width:300px; }#cupScreen:has(.cw-body.is-lobby) .cw-body.is-lobby.has-stage > .cw-lobstate{ font-size:44px; }
}
@media (min-width:1024px){#cupScreen:has(.cw-body.is-lobby) .cw-solo .cw-fig{ width:340px; } }
@media (max-width:379px){#cupScreen:has(.cw-body.is-lobby) .cw-tophow{ padding:0 11px; font-size:14px; } }
/* ══════════════════════════════════════════════════════════════════════════
   v0.60.978｜① Fei / Lv 對比修正　② 萌寵盃白天／夜間場景
   ──────────────────────────────────────────────────────────────────────────
   ★全部 cup-scoped★：沒有一條動到 html / body 的全域 canvas、viewport、
   safe-area、status-bar、first-screen reveal、paw loader、bottom nav、manifest、SW。
   背景仍然由既有的 body.on-cup #pageBg 持有 —— owner 不變、fixed/inset/size/
   position 機制不變，只是多一個 cup-day / cup-night 狀態 class 決定載哪一組資產。
   （＝同一台電視只換畫面，不是重做一台電視。）
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 生涯列：Fei / Lv.1 在深藍夜景上必須讀得清楚 ──────────────────
   實機問題：`.cw-crow b` 是 #5b4326 深褐、`.cw-clv` 是 #c8892a 暗金，
   那是舊奶油卡時代的色票，壓在夜景上直接吃進背景。
   ★只改顏色與陰影，不動 EXP／LV／段位／成熟的資料與邏輯。★ */
#cupScreen:has(.cw-body.is-lobby) .cw-crow b{
  color:var(--cw-on-navy); font-weight:900; font-size:17px;
  text-shadow:0 1px 6px rgba(6,12,24,.9);
}
#cupScreen:has(.cw-body.is-lobby) .cw-clv{
  color:var(--cw-gold-2); font-weight:900;
  text-shadow:0 1px 6px rgba(6,12,24,.9);
}
#cupScreen:has(.cw-body.is-lobby) .cw-ctier,
#cupScreen:has(.cw-body.is-lobby) .cw-cstage{
  color:var(--cw-on-navy-2);              /* badge 不搶主角，但仍讀得到 */
  background:rgba(12,20,38,.55); border-color:rgba(255,212,121,.34);
}
#cupScreen:has(.cw-body.is-lobby) .cw-cexp{
  color:var(--cw-on-navy-2); text-shadow:0 1px 5px rgba(6,12,24,.85);
}
/* 生涯列本身給一層很輕的深藍襯底，讓它不論白天夜間都有穩定底 */
#cupScreen:has(.cw-body.is-lobby) .cw-career{
  background:linear-gradient(180deg,rgba(16,26,46,.52),rgba(16,26,46,.40));
  border:1px solid rgba(255,212,121,.20); border-radius:14px;
  padding:8px 12px 9px; max-width:290px;
}

/* ── ② 白天場景：同一個 #pageBg owner，只換資產 ─────────────────── */
body.on-cup.cup-day #pageBg{
  background-image:
    url(race/ui/cup-lobby-fg-day-mobile.webp),
    /* 白天的可讀性壓層：★不是把白天壓成晚上★，只在上下兩端加一點暖色薄紗，
       讓標題與 Action Zone 有穩定底；中段幾乎不動，天空與祭典看得清楚。 */
    linear-gradient(180deg, rgba(28,42,72,.34) 0%, rgba(28,42,72,.10) 26%,
                            rgba(24,36,62,.06) 54%, rgba(20,31,54,.30) 84%,
                            rgba(18,28,50,.44) 100%),
    url(race/ui/cup-lobby-day-mobile.webp);
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-size:cover, cover, cover;
  background-position:center center, center top, center 22%;
}
@media (min-width:900px){
  body.on-cup.cup-day #pageBg{
    background-image:
      url(race/ui/cup-lobby-fg-day-desktop.webp),
      linear-gradient(180deg, rgba(28,42,72,.34) 0%, rgba(28,42,72,.10) 26%,
                              rgba(24,36,62,.06) 54%, rgba(20,31,54,.30) 84%,
                              rgba(18,28,50,.44) 100%),
      url(race/ui/cup-lobby-day-desktop.webp);
    background-repeat:no-repeat, no-repeat, no-repeat;
    background-size:cover, cover, cover;
    background-position:center center, center top, center 26%;
  }
}

/* ── ③ 白天 readability token（只調文字／surface／shadow／scrim）────
   白天圖亮很多，夜間那組 token 直接沿用會讓暖金字吃進木頭與陽光。
   ⇒ 標題改用更高對比的奶油白＋較實的描邊陰影；
     面板不透明度提高一階；主 CTA 維持最醒目。
   ★不做兩套 UI★：位置、結構、元件、功能完全相同。 */
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-lobstate b{
  background:linear-gradient(180deg,#fffdf6 0%,#ffe9b0 48%,#e79a1f 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 2px 0 rgba(72,42,6,.62)) drop-shadow(0 4px 14px rgba(20,30,50,.75));
}
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-lobstate i{
  color:#fff3d6; text-shadow:0 2px 8px rgba(20,30,50,.9), 0 0 2px rgba(40,26,4,.55);
}
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-lobmeta{
  background:rgba(12,22,42,.62); border-color:rgba(255,212,121,.42);
}
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-lobmeta i{ color:#ffe9b8; }
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-pass,
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-today,
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-entry,
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-step{
  background:linear-gradient(180deg,rgba(24,40,72,.94),rgba(14,24,44,.95));
  border-color:rgba(255,212,121,.52);
  box-shadow:0 8px 26px rgba(6,14,30,.55), inset 0 1px 0 rgba(255,255,255,.10);
}
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-pass.is-ask b{
  color:#fffaf0; text-shadow:0 2px 10px rgba(12,22,42,.95);
}
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-pass.is-ask i{
  color:#eae2d2; text-shadow:0 1px 8px rgba(12,22,42,.95);
}
/* Fei 在白天背景上要和場景分離：外描邊 ＋ 更實的落地陰影 */
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-solo .cw-fig img{
  filter:drop-shadow(0 0 2px rgba(255,255,255,.55))
         drop-shadow(0 14px 18px rgba(8,16,32,.55)) saturate(1.02);
}
/* 生涯列白天要更實一點的底，否則會浮在亮地面上 */
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-career{
  background:linear-gradient(180deg,rgba(16,28,52,.72),rgba(14,24,44,.66));
  border-color:rgba(255,212,121,.36);
}
/* Header 在白天也要穩定（既有 .cw-top 是 navy 玻璃，白天再壓實一階） */
body.cup-day #cupScreen .cw-top{
  background:linear-gradient(180deg, rgba(16,28,52,.985), rgba(12,20,38,.94));
}

/* ── ④ 白天 readability：標題區局部 scrim（★不是全頁黑罩★）─────────
   render evidence 檢查結果：白天圖上半是明亮天空＋櫻花，
   金色漸層標題壓上去雖然讀得到，但 50+ 在手機上要多看半秒 —— 判 FAIL。
   ⇒ 只在【標題與日期那一塊】後面加一層很窄的柔和暗紗，
     兩側與下緣完全淡出，天空、櫻花、燈籠仍然看得見。
   允許手段：localized dark scrim / local gradient behind text。 */
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-lobstate::before{
  content:""; position:absolute; left:50%; top:-14px; translate:-50% 0; z-index:-1;
  /* ⚠ 第一版寫成 120% 100% 的漸層，在方框邊界還沒淡到 0 ⇒ 畫面上看得到一個硬邊方框。
     改成尺寸放大、alpha 在 62% 就完全歸零的柔和橢圓，只留中央那團暗紗。 */
  width:min(600px,160%); height:calc(100% + 84px);
  background:
    radial-gradient(52% 54% at 50% 48%,
      rgba(10,18,36,.60) 0%, rgba(10,18,36,.34) 34%,
      rgba(10,18,36,.12) 50%, rgba(10,18,36,0) 62%);
  pointer-events:none;
}
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-lobstate{ position:relative; z-index:1; }
/* 白天的次要文字（「這次休息」）壓在明亮地面上 ⇒ 給它可讀的底與更實的字色 */
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-passcta .cw-tsec{
  color:#fff3d6; font-weight:900;
  text-shadow:0 2px 8px rgba(10,18,36,.95);
  text-decoration-color:rgba(255,243,214,.6);
}
/* 白天的 Life Memory / 功能入口副標也拉一階，避免吃進亮背景 */
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-today .cw-todaytxt i,
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-entry i{ color:#dfe6f4; }
body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-todayhead{ color:#ffe9b8; }
/* 夜間也順手把「這次休息」再拉清楚一點（實機截圖偏暗） */
body.cup-night #cupScreen:has(.cw-body.is-lobby) .cw-passcta .cw-tsec{
  color:#e6ddcb; text-shadow:0 2px 8px rgba(6,12,24,.9);
}

/* ── ⑤ Desktop 白天：主標壓在明亮牌樓／天空上，對比不足（render evidence 判 FAIL）
   16:9 的標題字級是 mobile 的 1.3 倍，同一顆 scrim 相對就變小，
   而且 desktop 左欄正好落在最亮的區域。
   ⇒ 只在 ≥1024px 的白天把 scrim 放大並加深一階，並給文字更實的暗描邊。
   ★仍然是 localized scrim，不是全頁黑罩；夜間不受影響。★ */
@media (min-width:1024px){
  body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-lobstate::before{
    width:min(760px,190%); height:calc(100% + 120px);
    background:
      radial-gradient(50% 56% at 50% 48%,
        rgba(8,15,32,.74) 0%, rgba(8,15,32,.46) 34%,
        rgba(8,15,32,.16) 52%, rgba(8,15,32,0) 64%);
  }
  body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-lobstate b{
    filter:drop-shadow(0 2px 0 rgba(58,32,4,.85))
           drop-shadow(0 0 3px rgba(20,30,50,.9))
           drop-shadow(0 6px 18px rgba(12,20,38,.9));
  }
  body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-lobstate i{
    text-shadow:0 2px 10px rgba(10,18,36,.98), 0 0 3px rgba(30,20,4,.8);
  }
  body.cup-day #cupScreen:has(.cw-body.is-lobby) .cw-lobmeta{
    background:rgba(10,18,36,.72);
  }
}