/* 2026-11-07 🏮 三座樓（逍遙樓、聽雪樓、落霞樓）：樓主那一條、本週牌位的小按鈕、綜合牌位面板、樓主披風（js/louzhu.js、js/exp-ui.js 的 lzLine）
   每一座樓一個顏色：逍遙樓＝燈籠金紅、聽雪樓＝霜雪藍白、落霞樓＝晚霞橘紫（--lz-a 主色、--lz-b 第二色、--lz-ink 深色底） */
.lz-xiao { --lz-a: #f6c95a; --lz-b: #e0563a; --lz-ink: #2a0c10; --lz-glow: rgba(246, 201, 90, 0.45); }
.lz-ting { --lz-a: #bfe6ff; --lz-b: #6aa8e8; --lz-ink: #0c1a2c; --lz-glow: rgba(150, 210, 255, 0.45); }
.lz-luo { --lz-a: #ffb27a; --lz-b: #d0508a; --lz-ink: #2a0e1a; --lz-glow: rgba(255, 160, 110, 0.45); }

/* ── 樓裡那一條：👑 樓主＋綜合牌位 ── */
.lz-bar { --lz-a: #f6c95a; --lz-b: #e0563a; --lz-ink: #2a0c10; --lz-glow: rgba(246, 201, 90, 0.45);
  display: flex; align-items: center; gap: 10px; min-width: 0; margin: 6px 0; padding: 8px 12px; border-radius: 14px;
  color: #fff6e4; background: linear-gradient(100deg, var(--lz-ink) 0%, color-mix(in srgb, var(--lz-ink) 70%, var(--lz-b)) 100%);
  border: 1px solid color-mix(in srgb, var(--lz-a) 55%, transparent); box-shadow: 0 0 18px -8px var(--lz-glow), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.lz-bar.lz-xiao { --lz-a: #f6c95a; --lz-b: #e0563a; --lz-ink: #2a0c10; --lz-glow: rgba(246, 201, 90, 0.45); }
.lz-bar.lz-ting { --lz-a: #bfe6ff; --lz-b: #6aa8e8; --lz-ink: #0c1a2c; --lz-glow: rgba(150, 210, 255, 0.45); }
.lz-bar.lz-luo { --lz-a: #ffb27a; --lz-b: #d0508a; --lz-ink: #2a0e1a; --lz-glow: rgba(255, 160, 110, 0.45); }
.lz-bar.me { box-shadow: 0 0 0 2px var(--lz-a), 0 0 22px -6px var(--lz-glow); }
.lz-crown { flex: none; display: inline-grid; place-items: center; filter: drop-shadow(0 0 6px var(--lz-glow, rgba(246, 201, 90, 0.5))); }
.lz-lord { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.lz-lord-n { font-size: 17px; font-weight: 900; letter-spacing: 0.04em; color: var(--lz-a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-lord-s, .lz-lord-me { font-size: 12px; color: rgba(255, 246, 228, 0.78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-lord-me { color: color-mix(in srgb, var(--lz-a) 70%, #fff); }
.lz-bar .lz-open { flex: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lz-bar .lz-open .lz-open-s { display: none; } /* 2026-11-07 手機才寫短的（max-width: 520px） */
.lz-ship { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: middle;
  color: #0c1a2c; background: linear-gradient(180deg, #e6f6ff, #9fd0f6); }

/* ── 牌桌旁邊的「🏮 本週牌位」 ── */
.lz-chip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lz-chip .lz-chip-t { font-size: 13px; }

/* ── 面板 ── */
.lz { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lz-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.lz-head-n { font-size: 16px; color: var(--lz-a, #f6d78a); }
.lz-head-l { font-size: 18px; font-weight: 900; color: var(--lz-a, #f6d78a); }
.lz-hero { align-items: center; flex-wrap: nowrap; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(110deg, var(--lz-ink, #2a0c10), color-mix(in srgb, var(--lz-ink, #2a0c10) 60%, var(--lz-b, #e0563a)));
  border: 1px solid color-mix(in srgb, var(--lz-a, #f6c95a) 50%, transparent); box-shadow: 0 0 24px -10px var(--lz-glow, rgba(246, 201, 90, 0.5)); }
.lz-hero.me { box-shadow: 0 0 0 2px var(--lz-a, #f6c95a), 0 0 24px -8px var(--lz-glow, rgba(246, 201, 90, 0.5)); }
.lz-head-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lz-head-t small { color: rgba(255, 246, 228, 0.8); }
.lz-head-t .lz-head-l { font-size: 22px; overflow-wrap: anywhere; }
.lz h3.lz-h { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 16px; }
.lz-list, .lz-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lz-list li, .lz-mini li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(246, 215, 138, 0.14); }
.lz-list li.p1 { border-color: rgba(242, 196, 90, 0.7); background: rgba(242, 196, 90, 0.10); }
.lz-list li.p2 { border-color: rgba(201, 211, 226, 0.6); }
.lz-list li.p3 { border-color: rgba(208, 138, 76, 0.6); }
.lz-list li.me, .lz-mini li.me { border-color: rgba(110, 230, 160, 0.6); background: rgba(110, 230, 160, 0.12); }
.lz-no { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 900; font-size: 12px; color: #2a1004;
  background: linear-gradient(180deg, #fff1c0, #d9a640); }
.lz-list li:not(.p1):not(.p2):not(.p3) .lz-no { background: rgba(255, 255, 255, 0.16); color: inherit; }
.lz-nm { flex: 1 1 auto; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-v { flex: none; font-weight: 800; color: var(--lz-a, #f6d78a); white-space: nowrap; }
.lz-gs, .lz-n { flex: 0 1 auto; min-width: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-me { margin: 0; }
.lz-me b { color: var(--win, #6ee6a0); }
.lz-rule { margin: 0; }
.lz-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.lz-game { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(246, 215, 138, 0.16); }
.lz-game-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lz-game-me { color: var(--win, #6ee6a0); }
.lz-game-r { font-size: 11px; }
.lz-cape { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); border: 1px solid color-mix(in srgb, var(--lz-a, #f6c95a) 40%, transparent); }
.lz-cape p { margin: 0; }
.lz-cape-me.on b { color: var(--win, #6ee6a0); }
.lz-cape-me.off b { color: var(--warn, #ffcf5a); }
/* 2026-11-07 樓主披風自己升級：我的進度（資歷條） */
.lz-cape-mine { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--lz-a, #f6c95a) 35%, transparent); }
.lz-xp { position: relative; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(246, 215, 138, 0.22); }
.lz-xp i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #c88a24, #ffd860); }
.lz-xp-t { font-variant-numeric: tabular-nums; }
.lz-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lz-three-i { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 4px; border-radius: 12px; cursor: pointer;
  color: inherit; font: inherit; background: linear-gradient(180deg, var(--lz-ink), color-mix(in srgb, var(--lz-ink) 65%, var(--lz-b)));
  border: 1px solid color-mix(in srgb, var(--lz-a) 40%, transparent); }
.lz-three-i b { color: var(--lz-a); font-size: 14px; }
.lz-three-i small { font-size: 11px; opacity: 0.8; }
.lz-three-i span { max-width: 100%; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-three-i.on { box-shadow: 0 0 0 2px var(--lz-a); }
.lz-three-i:focus-visible { outline: 2px solid var(--lz-a); outline-offset: 2px; }

/* ── 裝備卡片：樓主披風（在位、不在位） ── */
.xg-lz .xg-lz-seat b { font-size: 14px; }
.xg-lz.on .xg-lz-seat b { color: #2f9a5c; }
.xg-lz.off .xg-lz-seat b { color: #c0661a; }
.lz-badge i { font-style: normal; }
.divine-badge.lz-badge.s2 { background: linear-gradient(135deg, #1f6a48, #3ab08a); color: #f4ffe8; } /* 雙城樓主（翠玉） */
.divine-badge.lz-badge.s3 { background: linear-gradient(135deg, #9a5a08, #ffd860); color: #3a1a00; } /* 三城樓主（金） */

[data-theme="night"] .xg-lz.on .xg-lz-seat b, .ax .xg-lz.on .xg-lz-seat b, .ax-sheet .xg-lz.on .xg-lz-seat b { color: #6ee6a0; }
[data-theme="night"] .xg-lz.off .xg-lz-seat b, .ax .xg-lz.off .xg-lz-seat b, .ax-sheet .xg-lz.off .xg-lz-seat b { color: #ffcf5a; }
@media (max-width: 520px) {
  .lz-bar { gap: 8px; padding: 7px 10px; }
  .lz-lord-n { font-size: 15px; }
  .lz-bar .lz-open .lz-open-l { display: none; }
  .lz-bar .lz-open .lz-open-s { display: inline; }
  .lz-chip .lz-chip-t { font-size: 12px; }
  .lz-three-i b { font-size: 13px; }
}