/* [Claude Code 2026-08-10] wolves_game_town 玩家大廳樣式（無框架、無 build）
 *
 * 2026-08-10 改版：對齊使用者提供的運營站示意圖 —— 淺色底 + 深藍 header/footer、
 * banner 輪播、卡列導覽、右側公告欄、四欄 footer。
 * 2026-08-13：導覽收斂成「館別卡列 → 全部遊戲（館別 tab + 分類 tab）」——
 * 原本的「分類卡列」與「分區式精選」跟底部的牆做同一件事，8 款的規模下純粹是重複。
 * 🔴 只有「遊戲層（iframe 全螢幕）」維持深色：那是遊戲自己的舞台，白底會夾出一圈亮邊。
 */
:root{
  /* 版面 */
  --bg:#f4f6fb; --card:#ffffff; --line:#e5e9f5; --line2:#eef1f9;
  --ink:#1b2140; --soft:#5b6486; --mute:#8b93b0;
  /* 深色帶（header / footer / 遊戲層） */
  --deep:#131a3a; --deep2:#212a5c; --deepline:#2e3768;
  /* 主色 */
  --accent:#5b6cff; --accent2:#a259ff; --gold:#f5c451; --gold2:#e8a020;
  --ok:#1e9e63; --danger:#e3564a;
  --shadow:0 2px 10px rgba(27,33,64,.06);
  --shadow2:0 8px 26px rgba(27,33,64,.12);
  /* 分類主題色（沒有 accent 時的封面漸層退回這組） */
  --c-fish:#2f8fef; --c-slot:#f0932b; --c-crash:#f2703a; --c-bingo:#7b3fe4;
  --c-lotto:#e8437f; --c-casual:#17b3c4; --c-chess:#2e9e5b; --c-other:#6c7dff;
}
*{box-sizing:border-box}

/* 🔴 [Claude Code 2026-08-08] 這條一定要在最前面：
 * HTML 的 hidden 屬性是靠 UA 樣式的 display:none 生效，
 * 只要作者 CSS 給了 display（我們的 .mask / #gameLayer 都是 display:flex），hidden 就完全失效。
 * 少了這行，遊戲層與登入框會從一進站就蓋在畫面上（黑畫面 + 返回列）。 */
[hidden]{display:none !important}

html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,"Segoe UI","Microsoft JhengHei","Noto Sans TC",sans-serif;
  line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h2,h3,h4{margin:0}
ul{margin:0;padding:0;list-style:none}

/* ---------------------------------------------------------------- 頂部 */
.top{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:22px;
  padding:10px 22px;background:linear-gradient(120deg,var(--deep),var(--deep2));
  color:#fff;box-shadow:0 2px 14px rgba(19,26,58,.28)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .logo{font-size:26px;filter:drop-shadow(0 2px 6px rgba(245,196,81,.5))}
.bname{font-size:17px;line-height:1.15;display:flex;flex-direction:column}
.bname b{font-weight:800;letter-spacing:.2px}
.bname em{font-style:normal;font-size:11px;color:#9aa4d6;letter-spacing:1px}
.nav{display:flex;gap:4px;font-size:14.5px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:7px 12px;border-radius:8px;color:#cfd5f5;white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px;flex:none}
.who .nick{color:#cfd5f5}
.bal{font-weight:800;color:var(--gold)}
.cur{color:#8d96c8;font-size:12px}

.btn{font:inherit;padding:8px 18px;border-radius:9px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#3b2a05;
  font-size:14px;font-weight:700;box-shadow:0 2px 8px rgba(232,160,32,.3)}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.28);
  color:#cfd5f5;box-shadow:none;font-weight:500}
.btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------------------------------------------------------------- 版心 */
main{max-width:1280px;margin:0 auto;padding:18px 22px 8px}
section{scroll-margin-top:78px}          /* 錨點捲動不被 sticky header 蓋住 */
/* 🔴 推薦位那三排的 rail 上面多了 10px（見下方 `.strip .rail` 的說明），
 * 所以標題的下緣留白從 12px 收成 4px，整體高度跟改之前一樣。 */
.sec-head{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.strip .sec-head{margin-bottom:4px}
.sec-head h2{font-size:17px;font-weight:800}
.sec-head .count{color:var(--mute);font-size:13px}
.sec-head .more{margin-left:auto;color:var(--accent);font-size:13px;cursor:pointer}
.sec-head .more:hover{text-decoration:underline}

/* ---------------------------------------------------------------- Banner */
.hero{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow2);
  aspect-ratio:1180/280;min-height:170px;background:#2b1f5e}
.slides{display:flex;height:100%;transition:transform .45s ease}
.slide{flex:0 0 100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;
  color:#fff;padding:20px;position:relative}
.slide h3{font-size:clamp(20px,3.4vw,38px);font-weight:800;letter-spacing:.5px;
  text-shadow:0 3px 14px rgba(0,0,0,.3)}
.slide p{margin:0;font-size:clamp(12px,1.5vw,16px);color:rgba(255,255,255,.86)}
.slide .cta{margin-top:6px;padding:9px 26px;border-radius:99px;cursor:pointer;border:none;
  font:inherit;font-weight:800;background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#3b2a05;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.slide .deco{position:absolute;font-size:clamp(40px,9vw,110px);opacity:.22;pointer-events:none}
.slide .deco.l{left:6%;top:50%;transform:translateY(-50%) rotate(-12deg)}
.slide .deco.r{right:6%;top:50%;transform:translateY(-50%) rotate(12deg)}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;
  border-radius:50%;border:none;cursor:pointer;background:rgba(10,12,30,.42);color:#fff;
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center}
.arrow:hover{background:rgba(10,12,30,.68)}
.arrow.left{left:14px} .arrow.right{right:14px}
.dots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:7px;justify-content:center;z-index:2}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer}
.dots i.on{background:#fff;width:20px;border-radius:99px}

/* ---------------------------------------------------------------- 熱門 / 最新（橫向捲） */
.strip{margin:0 0 22px}
/* [Claude Code 2026-08-13] 🔴 `padding-top` 是**功能不是留白**：卡片 hover 會往上抬 4px
 * （`.card:hover .art` 的 translateY），而這一排是橫向捲動容器 ——
 * CSS 規定「一軸不是 visible，另一軸的 visible 就會變成 auto」→ 寫了 `overflow-x:auto`
 * 就等於**上下也會裁切**，抬起來的那 4px 加陰影會被切掉一條（使用者回報「ICON 上面被切掉」）。
 * 🔴 不要為了版面緊湊把它改回 2px；要調整間距請動 `.strip` 的 margin。
 * 下方同理：8px 只夠陰影、不夠抬升，一併給到 12px。 */
.strip .rail{display:flex;gap:12px;overflow-x:auto;padding:10px 2px 12px;scrollbar-width:thin}
.mini{flex:0 0 132px;cursor:pointer}
.mini .art{aspect-ratio:1/1}
.mini .tile{font-size:20px}
.mini .gsym{font-size:44px}
.mini .name{font-size:13px}

/* ---------------------------------------------------------------- 遊戲卡
 * [Claude Code 2026-08-13] 程序化封面。**封面上只有圖，字一律在圖外面。**
 *
 * 兩次改版的來龍去脈（別再改回去）：
 *   ① 最早：封面吃「**分類**」的 emoji + 顏色。分類只有 5 種而遊戲越來越多
 *      → 6 款 slot 長得一模一樣（同一顆 🎰、同一片橘），玩家分不出哪張是哪款。
 *      而且「一顆 emoji 浮在純色漸層正中央」就是**圖還沒載出來的 placeholder 構圖**。
 *      → 解法是把「遊戲自己的符號與主題色」接上來（hub 的 emoji / accent），不是換配色。
 *   ② 第一版改完把**名字與 RTP 疊在封面上**（暗角 scrim + 右上角 chips）——
 *      使用者看了實機說不要那種，指定要「⭐ 最新上架」那排的版型。
 *      → 現在封面上只有圖（主符號置中 + 底紋 + 亮角），名字與 RTP 落在封面外的白底上。
 *      實務上也比較好：封面不用為了壓字留一塊暗角，小尺寸（推薦位 132px）也不會擠成一團。
 *
 * 🔴 `.card` 與 `.mini` 共用這一整段（差別只有尺寸，見上面「熱門 / 最新」那幾行覆寫）。
 *    HTML 也共用 `artHTML()` —— 兩邊各寫一份一定會漂掉。
 */
.wall{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}
.card,.mini{cursor:pointer}

/* 封面：正方形的一張「圖」。整段只負責圖，不放任何文字 */
.card .art,.mini .art{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  isolation:isolate;box-shadow:var(--shadow);transition:transform .14s,box-shadow .14s;
  background:var(--c1);                       /* 🔴 fallback：舊瀏覽器沒有漸層也不會變透明 */
  background:linear-gradient(145deg,var(--c1),var(--c2))}
.card:hover .art,.mini:hover .art{transform:translateY(-4px);box-shadow:var(--shadow2)}

/* ① 底紋：符號鋪滿 + 傾斜。這層才是「這不是 placeholder」的關鍵 */
.card .tile,.mini .tile{position:absolute;inset:-25%;display:grid;grid-template-columns:repeat(4,1fr);
  align-content:center;transform:rotate(-14deg);opacity:.13;font-size:30px;line-height:1.9;
  text-align:center;color:#000;pointer-events:none;user-select:none}
/* ② 亮角：讓平漸層有立體感 */
.card .glow,.mini .glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 8%,rgba(255,255,255,.42),transparent 58%)}
/* ③ 主符號：置中放大帶陰影（字移出封面後，置中才是對的重心） */
.card .gsym,.mini .gsym{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:62px;line-height:1;filter:drop-shadow(0 5px 10px rgba(0,0,0,.34));pointer-events:none}
/* ④ 真的有縮圖時疊在最上面；載不出來時 JS 會把它移除，露出下面這幾層 */
.card .cimg,.mini .cimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;z-index:1}
.card .flag,.mini .flag{position:absolute;left:8px;top:8px;z-index:4;font-size:10px;font-weight:800;
  padding:2px 8px;border-radius:6px;color:#fff;background:var(--danger);letter-spacing:.6px}
.card .flag.new,.mini .flag.new{background:var(--ok)}
/* ⑤ hover 才出現的「這可以點」訊號（原本只有位移 3px，沒有任何 affordance） */
.card .play{position:absolute;inset:0;z-index:5;display:flex;align-items:center;
  justify-content:center;background:rgba(8,10,26,.42);opacity:0;transition:opacity .14s}
.card:hover .play{opacity:1}
.card .play b{background:#fff;color:#12163a;font-size:13px;font-weight:800;
  padding:8px 20px;border-radius:99px;box-shadow:0 6px 18px rgba(0,0,0,.3)}

/* 封面外面：名字 + RTP / 波動。置中對齊「⭐ 最新上架」那排 */
.card .name,.mini .name{margin-top:8px;text-align:center;font-weight:700;font-size:14.5px;
  color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .meta{margin-top:4px;display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.badge{font-size:11px;padding:1px 7px;border-radius:99px;background:var(--line2);color:var(--soft)}
.badge.gold{background:rgba(232,160,32,.14);color:#a9740c}
.badge.off{background:rgba(227,86,74,.12);color:var(--danger)}
/* 維護中 / 幣別不支援：🔴 用去彩度不用 opacity —— 彩色封面調透明度還是彩的，
 * 看起來只是「淡了一點」；抽掉顏色才一眼看出「這張不能點」。
 * 🔴 只灰**封面**，底下的「維護中」紅字要留著（那正是玩家要看的原因）。 */
.card.off{cursor:not-allowed}
.card.off .art{filter:grayscale(.88) brightness(.92)}
.card.off .name{color:var(--mute)}
.card.off:hover .art{transform:none;box-shadow:var(--shadow)}
.card.off .play{display:none}
/* 館別小標（封面右上角）。只放 emoji，全名在 title ——
 * 卡面剛清乾淨，這裡再塞「精品館」三個字就前功盡棄。 */
.card .tflag,.mini .tflag{position:absolute;right:7px;top:7px;z-index:4;
  width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;background:rgba(8,10,26,.42);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(3px);cursor:help}

/* ---------------------------------------------------------------- 分類 tab */
.allgames{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px;box-shadow:var(--shadow)}
/* [Claude Code 2026-08-13] 館別列（tier）—— 比分類 tab 大一級、放在它上面。
 * 這兩排是**兩個不同的軸**（館別 = 美術投資、分類 = 玩法），視覺上要看得出層級差，
 * 否則玩家會以為是同一排被拆成兩行。 */
.tiers{display:flex;gap:8px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none}
.tiers::-webkit-scrollbar{display:none}
.tier{white-space:nowrap;padding:8px 18px;border-radius:11px;cursor:pointer;font-size:14.5px;
  font-weight:700;color:var(--soft);background:#f2f4fc;border:1px solid transparent}
.tier:hover{color:var(--ink);background:#e9ecf9}
.tier.on{background:linear-gradient(135deg,var(--deep),var(--deep2));color:#fff}
.tier-note{margin:0 0 12px;font-size:12.5px;color:var(--mute);padding-left:2px}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:0 0 12px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{white-space:nowrap;padding:6px 15px;border-radius:99px;border:1px solid var(--line);
  color:var(--soft);cursor:pointer;font-size:14px;background:#fafbff}
.tab:hover{border-color:var(--accent);color:var(--accent)}
.tab.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
.empty-note{color:var(--mute);font-size:13.5px;padding:18px 4px}

/* ---------------------------------------------------------------- 底部：公告 + 架構說明
 * [Claude Code 2026-08-13] 原本是右側 sticky 側欄（`.mid` 兩欄 grid），
 * 使用者要求版面攤平成「上 → 中 → 下」，所以移到最下面、改成整幅寬。
 * 🔴 整幅寬之後公告要**分成兩欄**：1280px 一行只放一則的話，
 *    文字左邊擠一團、右邊一大片空白，讀起來比原本的窄側欄還糟。 */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:15px 18px;box-shadow:var(--shadow);margin-top:18px}
/* 🔴 **固定 2 欄，不要用 auto-fit**。用 `auto-fit + minmax(320px,1fr)` 在 1280px 會排成
 *    **3 欄**，而下面「最後兩則不畫線」的規則只有在 2 欄時才等於「每欄的最後一則」——
 *    3 欄時第 3 則底下沒東西卻仍畫著線（實測到的斷線就是這樣來的）。
 *    欄數固定，收邊線的規則才可能寫對。 */
.news ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
.news li{display:flex;gap:9px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
/* 🔴 分欄之後不能用 `:last-child` 收邊線 —— 那只收掉整份的最後一則，
 *    另一欄的最後一則底下仍留著一條斷掉的線。2 欄 + row-major 流向下，
 *    「每一欄的最後一則」恆等於「整份的最後兩則」（奇數則也成立）。 */
.news li:nth-last-child(-n+2){border-bottom:none}
.news .tagn{flex:none;font-size:11px;font-weight:700;padding:1px 7px;border-radius:6px;
  background:rgba(91,108,255,.12);color:var(--accent);height:fit-content;margin-top:2px}
.news .txt{flex:1;min-width:0}
.news .d{display:block;color:var(--mute);font-size:11.5px}
/* 架構說明：整幅寬之後改成**橫幅**（icon 在左、文字在中、箭頭在右）。
 * 原本的直式置中卡是為了 316px 側欄設計的，拉到 1280px 會變成一大片紫色配三行小字。 */
.promo{display:flex;align-items:center;gap:16px;margin-top:16px;padding:16px 22px;
  border-radius:16px;background:linear-gradient(120deg,#2b1f5e,#4a2f8f);color:#fff;
  box-shadow:var(--shadow);transition:filter .12s}
.promo:hover{filter:brightness(1.12)}
.promo .promo-ico{font-size:30px;flex:none;line-height:1}
.promo .promo-t{flex:1;min-width:0}
.promo .promo-t b{display:block;font-size:15.5px}
.promo .promo-t span{display:block;color:rgba(255,255,255,.78);font-size:12.5px;margin-top:2px}
.promo .promo-go{flex:none;font-size:22px;color:rgba(255,255,255,.6)}

/* ---------------------------------------------------------------- footer */
.foot{margin-top:34px;background:linear-gradient(120deg,var(--deep),var(--deep2));color:#c3cbf0}
.foot-cols{max-width:1280px;margin:0 auto;padding:30px 22px 20px;display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));font-size:13px}
.foot-cols h4{color:#fff;font-size:14px;margin-bottom:9px}
.foot-cols p{margin:0 0 6px}
.foot-cols b{color:#fff}
.foot-cols a{display:block;padding:3px 0;color:#c3cbf0}
.foot-cols a:hover{color:var(--gold)}
.foot-bar{border-top:1px solid var(--deepline);text-align:center;padding:12px;
  font-size:12px;color:#8d96c8}

/* ---------------------------------------------------------------- 登入 */
.mask{position:fixed;inset:0;background:rgba(12,15,35,.6);display:flex;align-items:center;
  justify-content:center;z-index:40;padding:16px}
.modal{background:var(--card);border-radius:16px;padding:22px;width:100%;max-width:350px;
  box-shadow:0 20px 50px rgba(10,14,40,.4)}
.modal h3{margin:0 0 6px;font-size:19px}
.fld{display:block;margin:10px 0}
.fld span{display:block;font-size:12.5px;color:var(--soft);margin-bottom:4px}
.fld input{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line);
  background:#fbfcff;color:var(--ink);font:inherit}
.fld input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,108,255,.14)}
.row{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.modal .btn.ghost{border-color:var(--line);color:var(--soft)}
.modal .btn.ghost:hover{background:var(--line2);color:var(--ink)}
.hint{color:var(--mute);font-size:12.5px;margin:0}
.err{color:var(--danger);font-size:13px;min-height:20px}

/* ---------------------------------------------------------------- 遊戲層 / toast */
/* 🔴 [Claude Code 2026-08-13] 用 **id** 不用 `.game` class：這條是「蓋住整頁」的規則
 * （fixed + inset:0 + z-index:50），只要任何地方出現一個 `class="… game"` 就會被它劫持，
 * 而且症狀是「整頁變一塊色塊」，完全看不出跟 CSS 有關（2026-08-12 線上踩到：
 * 行為歷程的 `class="me-tag game"` 標籤把整個大廳蓋掉）。
 * 全螢幕層只有一個 → 綁 id 就不會再被撞到。 */
#gameLayer{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column}
.gamebar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#12162a;
  border-bottom:1px solid #2e3768;font-size:14px;color:#eef0f8;
  padding-top:calc(8px + env(safe-area-inset-top))}
.gamebar .hint{color:#8d96c8}
.gamebar .spacer{flex:1}
#gameLayer iframe{flex:1;width:100%;border:0;background:#000}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;
  background:#212a5c;color:#fff;padding:11px 18px;border-radius:11px;font-size:14px;
  max-width:88vw;box-shadow:var(--shadow2)}

/* ---------------------------------------------------------------- RWD */
@media (max-width:720px){
  main{padding:14px 12px 4px}
  .top{gap:12px;padding:9px 12px}
  .nav{display:none}                       /* 手機收掉導覽，靠分類卡列走 */
  .bname em{display:none}
  .hero{aspect-ratio:16/9;min-height:150px}
  .wall{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  /* 手機的卡窄很多（~150px）→ 主符號與標題跟著縮，不然名字會被 ellipsis 吃掉 */
  .card .gsym{font-size:46px}
  .card .tile{font-size:22px}
  .card .name{font-size:13.5px}
  .badge{font-size:10.5px}
  .allgames,.panel{padding:12px}
  /* 🔴 公告在窄螢幕會塌成一欄 → 「最後兩則不畫線」的規則要收回來，
     否則倒數第二則的分隔線會莫名其妙不見（一欄時它不在底部）。 */
  /* 窄螢幕塌成一欄 → 收邊線的規則要跟著回到 `:last-child`，
     不然倒數第二則的分隔線會莫名其妙不見（一欄時它不在底部）。 */
  .news ul{grid-template-columns:1fr}
  .news li:nth-last-child(-n+2){border-bottom:1px dashed var(--line)}
  .news li:last-child{border-bottom:none}
  .promo{padding:14px 16px;gap:12px}
}

/* ---------------------------------------------------------------- 個人中心
 * [Claude Code 2026-08-10] 點頂列名字打開的 modal：總覽 / 遊戲紀錄 / 帳務明細。
 * 🔴 列表區固定高度 + 內部捲動 —— 筆數多寡不該把整個 modal 撐到超出畫面。 */
.who .nick{cursor:pointer;border-bottom:1px dashed rgba(207,213,245,.45);padding-bottom:1px}
.who .nick:hover{color:#fff;border-bottom-color:#fff}

.modal.wide{max-width:620px}
.me-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.me-head h3{font-size:19px}
.me-bal{display:flex;align-items:baseline;gap:8px;margin:12px 0 4px;padding:12px 14px;
  background:linear-gradient(120deg,#eef0ff,#f7f8ff);border:1px solid var(--line);border-radius:12px}
.me-bal .lbl{font-size:12.5px;color:var(--soft)}
.me-bal b{font-size:24px;letter-spacing:.3px}
.me-bal .cur{font-size:12.5px;color:var(--mute)}

.tabs{display:flex;gap:6px;margin:14px 0 10px;border-bottom:1px solid var(--line)}
.tabs .tab{background:none;border:none;font:inherit;font-size:14px;color:var(--soft);
  padding:7px 12px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

.tabbody{height:300px;overflow-y:auto}
.me-tbl{width:100%;border-collapse:collapse;font-size:13px}
.me-tbl th{position:sticky;top:0;background:#fafbff;text-align:left;padding:7px 8px;
  border-bottom:1px solid var(--line);font-size:12px;color:var(--soft);white-space:nowrap}
.me-tbl td{padding:7px 8px;border-bottom:1px solid var(--line2);vertical-align:top}
.me-tbl tr:hover td{background:#fafbff}
.me-empty{color:var(--mute);font-size:13.5px;padding:26px 4px;text-align:center}
.me-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 🔴 台灣慣例：紅=賺、綠=賠（跟西方相反，見頂層 CLAUDE.md） */
.me-up{color:#d33a4b;font-weight:600}
.me-down{color:#1f9254;font-weight:600}
.me-tag{display:inline-block;padding:1px 7px;border-radius:99px;font-size:11.5px;
  background:var(--line2);color:var(--soft)}
.me-tag.live{background:#fff2d6;color:#a06a06}
/* 🔴 [Claude Code 2026-08-13] 這顆的修飾詞叫 `t-game` **不可以叫 `game`** ——
 * `.game` 是遊戲全螢幕層（`position:fixed;inset:0;z-index:50`），
 * 一個 `class="me-tag game"` 的小標籤會直接變成蓋住整頁的方塊（線上真的發生過，
 * 玩家點「行為歷程」整頁變空白）。修飾詞一律加前綴，不要用會撞到版面層的通用字。 */
.me-tag.t-game{background:#e8ecff;color:#3b4bb8}

/* [Claude Code 2026-08-11] 行為歷程：一條由新到舊的時間軸（遊戲那幾趟 + 可選的帳務明細）。
 * 🔴 用「列」不用表格：兩種事情的欄位根本不同，硬塞成同一組欄位會有一半的格子是空的。 */
.me-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 8px}
.me-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--soft);cursor:pointer}
.me-chk input{accent-color:var(--accent);cursor:pointer}
.fd{border:1px solid var(--line);border-radius:10px;margin-bottom:6px;background:#fff}
.fd.led{background:#fcfcff}
.fd-hd{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-size:13px}
.fd-hd.plain{cursor:default}
.fd:not(.led) .fd-hd:hover{background:#fafbff}
.fd-t{color:var(--mute);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.fd-main{flex:1;min-width:0}
.fd-main b{font-weight:600}
.fd-sub{display:block;color:var(--soft);font-size:12px;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-amt{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.fd-go{color:var(--mute);font-size:12px;white-space:nowrap}
.fd-go.bal{font-variant-numeric:tabular-nums}
.fd.open .fd-go{color:var(--accent)}
.fd-body{border-top:1px solid var(--line2);padding:8px 10px;background:#fbfcff;
  border-radius:0 0 10px 10px;overflow-x:auto}
.me-tbl.bets{font-size:12.5px}
.bet-detail{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.bet-detail h4{font-size:13px;margin-bottom:6px}
.btn.ghost.sm{padding:2px 8px;font-size:12px}

.me-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.me-card{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}
.me-card .k{font-size:12px;color:var(--soft)}
.me-card .v{font-size:19px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .modal.wide{max-width:100%}
  .tabbody{height:56vh}
}