/* 新大廳與內頁（站長 2026-10-19）
   大廳：左上玩家資料、右上簽到與信箱、中間輪播與遊戲卡片、下方功能列、右下儲值與客服。
   手機直式、手機橫拿、電腦版同一種排法；橫的時候輪播在左、遊戲卡片在右。
   內頁：放在大廳背景上的一個金框視窗，右上角 ✕ 回大廳。
   租用者上傳的背景（/brand/bg）會蓋過這裡的預設背景。 */
body.lobby, body.inner, body.entry { min-height: 100vh; min-height: 100dvh;
  background: #0b0605 url(/static/lobby/bg_portrait.webp) center top / cover fixed; }
@media (min-aspect-ratio: 1/1) { body.lobby, body.inner, body.entry { background-image: url(/static/lobby/bg_landscape.webp); } }
.ico { display: inline-block; width: 2.4em; height: 2.4em; background: center / contain no-repeat; flex: none; }
.ico.nav_rank { background-image: url(ui/nav_rank.webp); } .ico.nav_social { background-image: url(ui/nav_social.webp); }
.ico.nav_achieve { background-image: url(ui/nav_achieve.webp); } .ico.nav_shop { background-image: url(ui/nav_shop.webp); }
.ico.nav_records { background-image: url(ui/nav_records.webp); } .ico.nav_faq { background-image: url(ui/nav_faq.webp); }
.ico.nav_more { background-image: url(ui/nav_more.webp); } .ico.nav_account { background-image: url(ui/nav_account.webp); }
.ico.nav_tickets { background-image: url(ui/nav_tickets.webp); } .ico.nav_support { background-image: url(ui/nav_support.webp); }
.ico.nav_mail { background-image: url(ui/nav_mail.webp); } .ico.nav_checkin { background-image: url(ui/nav_checkin.webp); }
.ico.nav_settings { background-image: url(ui/nav_settings.webp); } .ico.nav_deposit { background-image: url(ui/nav_deposit.webp); }
.ico.gift { background-image: url(ui/gift.webp); }
.ico-coin { display: inline-block; width: 1.4em; height: 1.4em; background: center / contain no-repeat url(ui/coin.webp); flex: none; }
.dot { position: absolute; top: -.2em; right: -.1em; min-width: 1.3em; height: 1.3em; padding: 0 .3em; border-radius: 99px; background: #e0201a;
  color: #fff; font: 800 .7rem/1.3em var(--ui); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #1a0805; }

/* ===== 大廳 ===== */
.lb { max-width: 1280px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) calc(76px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.lb-top { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 14px;
  background: linear-gradient(rgba(40,18,8,.92), rgba(16,7,4,.92)); border: 1px solid rgba(255,217,138,.5); min-height: 58px; }
.lb-who { display: flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; color: var(--text); }
.lb-avatar { position: relative; width: 46px; height: 46px; flex: none; }
.lb-avatar img { position: absolute; inset: 7px; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.lb-avatar::after { content: ""; position: absolute; inset: 0; background: center / contain no-repeat url(ui/avatar_frame.webp); }
.lb-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lb-name { max-width: 100%; line-height: 1.2; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-name b { white-space: nowrap; }
.lv { font: 800 .7rem var(--ui); color: #2a1000; background: var(--gold2); border-radius: 6px; padding: 0 5px; }
.lb-coins { display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 6px; border-radius: 99px; background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,217,138,.45); text-decoration: none; color: #fff; font-variant-numeric: tabular-nums; }
.lb-coins strong { font-size: .95rem; }
.lb-coins .plus { width: 1.3em; height: 1.3em; display: grid; place-items: center; border-radius: 50%; background: var(--gold2); color: #2a1000; font-weight: 900; font-size: .85rem; }
.lb-tr { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.lb-ib { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; border: 0; background: none; padding: 0 2px; cursor: pointer;
  color: #ffe6a6; text-decoration: none; font: 800 .66rem/1.2 var(--ui); text-shadow: 0 1px 2px #000; max-width: 5.2em; text-align: center; }
.lb-ib .ico { width: 2.2em; height: 2.2em; font-size: 1rem; }
.lb-ib span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lb-ib:disabled { opacity: .55; cursor: default; }

.lb-jp { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.lb-jp .jp-main { display: flex; align-items: center; justify-content: center; gap: .5em; height: 2.4em; border-radius: 99px; color: #fff;
  background: linear-gradient(#7a0f0a, #3a0604); border: 2px solid #f2b53c; box-shadow: inset 0 0 .6em rgba(0,0,0,.6), 0 0 .6em rgba(255,180,60,.35); }
.lb-jp .jp-main i { width: 1.8em; height: 1.8em; background: center / contain no-repeat; }
.lb-jp .jp-main small { color: #ffe6a6; font: 800 .8em var(--ui); }
.lb-jp .jp-main b { font: 900 1.35em var(--ui); text-shadow: 0 0 .4em #ff9a1f; font-variant-numeric: tabular-nums; }
.lb-jp .jp-sub { display: flex; gap: 4px; }
.lb-jp .jp-sub span { flex: 1; display: flex; align-items: center; justify-content: center; gap: .25em; padding: .1em .3em; border-radius: 99px;
  background: rgba(30,10,4,.85); border: 1px solid rgba(255,217,138,.4); min-width: 0; }
.lb-jp .jp-sub i { width: 1.2em; height: 1.2em; background: center / contain no-repeat; flex: none; }
.lb-jp .jp-sub small { color: #ffe6a6; font: 800 .72em var(--ui); white-space: nowrap; }
.lb-jp .jp-sub b { color: #fff; font: 900 .85em var(--ui); white-space: nowrap; font-variant-numeric: tabular-nums; }
.jpi-grand { background-image: url(ui/jp_grand.webp); } .jpi-major { background-image: url(ui/jp_major.webp); }
.jpi-minor { background-image: url(ui/jp_minor.webp); } .jpi-mini { background-image: url(ui/jp_mini.webp); }
.lb .ticker { margin-top: 6px; }
.lb .ticker:empty, .lb .ticker span:empty { display: none; }

.lb-main { flex: 1; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.lb-msgs:empty { display: none; }
.lb-msgs p { margin: 0 0 6px; }
.carousel { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 8 / 3; background: #1a0b06;
  border: 1px solid rgba(255,217,138,.45); box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.cs-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cs-track::-webkit-scrollbar { display: none; }
.cs-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; display: block; color: #fff; text-decoration: none; }
.cs-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-cap { position: absolute; left: 5%; top: 50%; transform: translateY(-50%); max-width: 45%; display: flex; flex-direction: column; gap: .2em; text-shadow: 0 2px 6px #000, 0 0 2px #000; }
.cs-cap b { font: 700 clamp(1.1rem, 4.4vw, 2.2rem) var(--display); color: #ffe6a6; line-height: 1.1; }
.cs-cap small { font-size: clamp(.7rem, 2.2vw, 1rem); color: #fff3d0; }
.cs-dots { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.cs-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.45); cursor: pointer; }
.cs-dots button.on { background: var(--gold); width: 18px; border-radius: 99px; }

.lb-games h2 { margin: .3em 0 .4em; }
.lb .games { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.game.card-ad { position: relative; padding: 0; overflow: hidden; aspect-ratio: 2 / 3; border: 2px solid rgba(255,217,138,.55); border-radius: 14px;
  background: #1a0b06; box-shadow: 0 6px 18px rgba(0,0,0,.55); transition: transform .12s; }
.game.card-ad:active { transform: scale(.97); }
.game.card-ad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ga-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26% 8% 8%; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: linear-gradient(transparent, rgba(0,0,0,.82) 55%); text-align: center; }
.ga-cap b { font: 700 1.15rem var(--display); color: #ffe6a6; text-shadow: 0 2px 4px #000; line-height: 1.15; }
.ga-cap small { font: 900 .82rem var(--ui); color: #fff; background: linear-gradient(#e0201a, #8a0d08); border: 1px solid #ffd98a; border-radius: 99px; padding: 1px 10px; }
.ga-cap small.jp { background: rgba(0,0,0,.6); font-weight: 700; }
.game-wrap .fav { z-index: 2; }
.lb .board { background: rgba(12,6,4,.6); border: 1px solid var(--line); border-radius: 12px; padding: 4px 10px; }

.lb-fab { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: calc(146px + env(safe-area-inset-bottom)); z-index: 5;
  width: 50px; height: 50px; display: grid; place-items: center; }
.lb-fab .ico { width: 50px; height: 50px; }
.lb-deposit { position: fixed; right: max(10px, env(safe-area-inset-right)); bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 5;
  width: 128px; height: 56px; display: grid; place-items: center; text-decoration: none; background: center / 100% 100% no-repeat url(ui/btn_gold.webp);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); animation: glow 2.4s ease-in-out infinite; }
.lb-deposit span { font: 900 1.05rem var(--ui); color: #3a1500; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
@keyframes glow { 50% { filter: drop-shadow(0 0 12px rgba(255,200,80,.85)); } }
.lb-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: space-around; align-items: flex-end;
  padding: 4px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  background: linear-gradient(rgba(40,18,8,.95), rgba(10,5,3,.98)); border-top: 2px solid rgba(255,217,138,.6); }
.lb-nav > a, .lb-nav > button { position: relative; flex: 1; max-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 0; background: none; padding: 2px 0; cursor: pointer; color: #ffe6a6; text-decoration: none; font: 800 .7rem/1.2 var(--ui); text-shadow: 0 1px 2px #000; }
.lb-nav .ico { width: 40px; height: 40px; }
.lb-nav .wide-only { display: none; }

/* 底部彈出面板（更多、設定） */
.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.6); }
.sheet[hidden] { display: none; }
.sheet-box { position: relative; width: min(100%, 560px); max-height: 80vh; overflow: auto; padding: 22px 16px max(18px, env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0; background: linear-gradient(#2a1208, #120704); border: 2px solid var(--gold2); border-bottom: 0; animation: up .2s ease-out; }
@keyframes up { from { transform: translateY(30%); opacity: .4; } }
.sheet-x { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; cursor: pointer; background: center / contain no-repeat url(ui/close.webp); }
.sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; }
.sheet-grid a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: #ffe6a6; font: 800 .78rem var(--ui); text-align: center; }
.sheet-grid .ico { width: 48px; height: 48px; }
.sheet h3 { margin: 0 0 8px; font: 700 1.1rem var(--display); color: var(--gold); }
.sheet-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sheet-langs a { padding: 5px 12px; border-radius: 99px; border: 1px solid var(--gold2); text-decoration: none; font-weight: 800; }
.sheet-langs a.on { background: var(--gold2); color: #2a1000; }
.sheet-links { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }

/* 橫拿手機、平板、電腦：輪播在左、遊戲在右；功能列多放紀錄、常見問題 */
@media (min-aspect-ratio: 1/1) and (min-width: 600px) {
  .lb-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); grid-template-rows: auto 1fr; gap: 14px; align-items: start; }
  .lb-msgs { grid-column: 1 / -1; }
  .carousel { grid-column: 1; }
  .lb-games { grid-column: 2; grid-row: 2 / span 2; }
  .lb-games h2 { margin-top: 0; }
  .lb .games { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .lb-nav .wide-only { display: flex; }
  .lb-nav { justify-content: center; gap: 2%; padding-right: 170px; }
  .lb-deposit { bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 7; width: 150px; height: 62px; }
  .lb-fab { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {      /* 手機橫拿：高度很矮，卡片橫向排一列 */
  .lb .games { grid-auto-flow: column; grid-auto-columns: 128px; grid-template-columns: none; overflow-x: auto; padding-bottom: 4px; }
  .lb-games > h2:nth-of-type(2), .lb-games .board, .lb-games > p.muted { display: none; }
  .lb-nav .ico { width: 32px; height: 32px; }
}
@media (min-width: 1100px) { .lb { padding-left: 24px; padding-right: 24px; } }

/* ===== 內頁：大廳背景上的金框視窗 ===== */
body.inner .top { position: sticky; max-width: 760px; margin: max(8px, env(safe-area-inset-top)) auto 0; border-radius: 16px 16px 0 0;
  background: linear-gradient(#3a1a0a, #1d0c06); border: 2px solid var(--gold2); border-bottom: 1px solid rgba(255,217,138,.35); }
body.inner .top > a:first-child { font-size: 0; width: 34px; height: 34px; order: 3; flex: none; background: center / contain no-repeat url(ui/close.webp); }
body.inner .top > a:first-child::after { content: ""; }
body.inner .top > div:first-of-type { flex: 1; text-align: center; font: 700 1.1rem var(--display); color: var(--gold); }
body.inner main.wrap { max-width: 760px; margin: 0 auto max(16px, env(safe-area-inset-bottom)); min-height: 60vh; background: rgba(20,9,5,.94);
  border: 2px solid var(--gold2); border-top: 0; border-radius: 0 0 16px 16px; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
body.inner .card { background: rgba(255,217,138,.05); }
body.inner .btn-gold { background: center / 100% 100% no-repeat url(ui/btn_gold.webp); color: #3a1500; }
body.inner footer.legal { max-width: 760px; margin: 0 auto; }

/* ===== 登入、年齡確認、維護 ===== */
body.entry main.wrap { margin-top: max(5vh, env(safe-area-inset-top)); background: rgba(20,9,5,.9); border: 2px solid var(--gold2); border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.6); }

/* ===== 各頁專用的小圖 ===== */
.plans .plan { position: relative; padding-top: 64px !important; }
.plans .plan::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 56px; height: 56px;
  background: center / contain no-repeat url(ui/coins_s.webp); }
.plans .plan:nth-child(2)::before { background-image: url(ui/coins_m.webp); }
.plans .plan:nth-child(n+3)::before { background-image: url(ui/coins_l.webp); width: 64px; }
.board li:nth-child(-n+3) span::before { content: ""; display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -.35em; margin-right: .3em;
  background: center / contain no-repeat url(ui/medal_gold.webp); }
.board li:nth-child(2) span::before { background-image: url(ui/medal_silver.webp); }
.board li:nth-child(3) span::before { background-image: url(ui/medal_bronze.webp); }
.ach li { position: relative; padding-left: 3.4em !important; min-height: 3em; }
.ach li::before { content: ""; position: absolute; left: .3em; top: 50%; transform: translateY(-50%); width: 2.6em; height: 2.6em;
  background: center / contain no-repeat url(ui/badge_off.webp); }
.ach li.on::before { background-image: url(ui/badge_on.webp); }
p.empty { text-align: center; padding-top: 120px; background: center 8px / 110px no-repeat url(ui/chest_empty.webp); }
.hero-ill { display: block; width: 120px; margin: 0 auto 8px; }

/* ===== 電腦版大廳（站長 2026-10-19 第二版）：整個大廳做成 16:9 置中，螢幕再寬也不會被拉散 ===== */
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .lb { width: min(100vw, 177.78vh); width: min(100vw, 177.78dvh); max-width: none; height: 100vh; height: 100dvh; min-height: 0;
    padding: 10px 18px 0; display: flex; flex-direction: column; overflow: hidden; }
  .lb-top { flex: none; }
  /* 彩金四個等級併成一條，放中間，不拉伸 */
  .lb-jp { flex-direction: row; justify-content: center; align-items: center; gap: 8px; }
  .lb-jp .jp-main { padding: 0 1.4em; }
  .lb-jp .jp-sub span { flex: 0 0 auto; padding: .2em .9em; }
  .lb .ticker { flex: none; max-width: 760px; width: 100%; margin: 6px auto 0; }
  .lb-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr); grid-template-rows: auto minmax(0, 1fr);
    gap: 16px; align-items: stretch; margin: 10px 0 0; }
  .lb-msgs { grid-column: 1 / -1; }
  .carousel { grid-column: 1; grid-row: 2; align-self: center; width: 100%; }
  .lb-games { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-height: 0; }
  .lb-games h2 { margin: 0 0 8px; }
  .lb .games { flex: 1; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: min-content; align-content: start; overflow-y: auto; gap: 14px; }
  .lb-games > h2:nth-of-type(2), .lb-games .board, .lb-games > p.muted { display: none; }     /* 本週排行在「排行」頁看 */
  .lb-nav { position: static; flex: none; margin: 10px -18px 0; justify-content: center; gap: 3%; padding-right: 190px; }
  .lb-deposit { position: absolute; right: 18px; bottom: 10px; }
  .lb { position: relative; }
  .lb-fab { position: absolute; right: 30px; bottom: 86px; }
}