:root {
--bg: #0F212E; --panel: #15293a; --panel2: #1a3347;
--text: #e8eef4; --muted: #8fa3b5;
/* Brand tokens (2026-10-25): single source for brand colours.
--accent/--accent2 keep their names as compatibility aliases so
existing uses pick up the brand gradient automatically. */
--brand1: #6c5ce7; --brand2: #00cec9;
--accent: #6c5ce7; --accent2: #00cec9;
--accent-grad: linear-gradient(120deg,#6c5ce7,#00cec9);
--gold: #c9a227; --gold2: #8b6914;
--gold-grad: linear-gradient(120deg,#c9a227,#8b6914);
--border: rgba(255,255,255,.08); --danger: #e17055;
/* Radius / shadow / motion tokens (2026-11-01 reskin batch 1, sketch v3
standard): one ladder for the whole shell — xs 10 / sm 14 / md 18 /
lg 24 / xl 28 / sheet 30 / full pill. */
--r-xs: 10px; --r-sm: 14px; --r-md: 18px; --r-lg: 24px; --r-xl: 28px;
--r-sheet: 30px; --r-full: 999px;
--sh-card: 0 10px 30px rgba(2,10,18,.26);
--sh-pop: 0 24px 60px rgba(2,10,18,.48);
--sh-bar: 0 14px 38px rgba(2,10,18,.42);
--spring: cubic-bezier(.32,1.28,.36,1);
--spring-sheet: cubic-bezier(.32,1.35,.36,1);
--green: #00c853;
--hover: rgba(255,255,255,.06);
/* fix3: EGDD (js/egdd.js) reads var(--input) for its button face; it was
never defined on the main site, so the dark fallback #16283a shipped
with var(--text) on top — dark-on-dark in light theme. Define it per
theme (dark value == the old fallback, so dark rendering is unchanged). */
--input: #16283a;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
background: var(--bg); color: var(--text); display: block; min-height: 100vh; height: 100vh; min-height: 100vh; }
/* 2026-10-25 wave-8 group 3 (SicBo body 高度全站根治): the body rule above
locks every page to exactly 100vh. On bp-pad game pages that eats the
bottom padding reserve (bet-panel.css body.bp-pad padding-bottom, and
sicbobattle's own 320px): the reserve lands INSIDE the 100vh box instead
of after the content, so footers/rules slide under the fixed bet bar —
the sixth-wave root cause, previously worked around per-page only in
sicbobattle/index.html. height:auto here restores document flow for ALL
bp-pad pages at once (including the 7 bp-pad pages that do not load
bet-panel.css: abysspearls, dragonhoard, drill, gemcascade,
luckylanterns, neonfruits, numberbomb); min-height:100vh above still
fills short pages. Non-bp-pad pages (incl. the main-site sidebar
layout) keep height:100vh untouched. Specificity (0,1,1) beats the plain
body rule (0,0,1) regardless of stylesheet load order. */
body.bp-pad, body.bp-pad-tall { height: auto; }
/* Main site only: sidebar layout needs flex row on body. Game pages use normal document flow. */
body.has-sidebar { display: flex; }
.sidebar { width: 232px; background: var(--panel); border-right: 1px solid var(--border);
padding: 20px 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0;
height: 100vh; height: 100vh; max-height: 100vh; height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
overscroll-behavior: contain; }
.logo { font-size: 22px; font-weight: 800; padding: 6px 10px 16px; letter-spacing: 1px;
display: flex; align-items: center; gap: 10px; }
.logo span.wordmark { color: var(--text); }
.logo .wordmark > span { color: var(--accent2); }
.logo-badge { width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto; object-fit: contain; }
/* 1win-style profile card at top of sidebar */
.side-profile { display: flex; align-items: center; gap: 11px; padding: 10px 12px; margin: 2px 0 8px;
background: linear-gradient(135deg, rgba(108,92,231,.16), rgba(0,206,201,.08));
border: 1px solid rgba(108,92,231,.35); border-radius: var(--r-md); cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.side-profile:hover { border-color: rgba(255,213,74,.5); box-shadow: 0 4px 18px rgba(108,92,231,.25);
transform: translateY(-1px); }
.sp-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none;
border: 2px solid rgba(255,213,74,.55); box-shadow: 0 0 10px rgba(255,213,74,.25); }
.sp-info { flex: 1; min-width: 0; }
.sp-name { font-size: 14px; font-weight: 800; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-uid { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sp-uid span { color: var(--accent2); font-weight: 700; }
.sp-go { color: var(--muted); font-size: 20px; font-weight: 300; }
.nav-item { display: flex; align-items: center; width: 100%; text-align: left; background: none; border: none;
color: var(--muted); padding: 10px 12px; border-radius: 10px; font-size: 15px; cursor: pointer;
position: relative; }
.nav-item .nic { width: 20px; height: 20px; margin-right: 11px; flex: 0 0 auto; }
.nav-item .nbadge { position: absolute; top: 6px; right: 8px; min-width: 20px; height: 20px;
padding: 0 6px; border-radius: 10px; background: #ff3b30; color: #fff;
font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(255,59,48,.5); }
.drawer-item { display: flex; align-items: center; gap: 11px; }
.drawer-item .nic { width: 20px; height: 20px; flex: 0 0 auto; }
.theme-btn .nic { width: 18px; height: 18px; vertical-align: -3px; margin-right: 2px; }
.nav-item:hover { background: var(--panel2); color: var(--text); }
.nav-item.active { background: var(--accent); color: #fff; }
/* fix8: drawer mirrors the sidebar — only the current view is highlighted. */
.drawer-item.active { background: var(--accent); color: #fff; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.side-foot select { background: var(--panel2); color: var(--text); border: 1px solid var(--border);
border-radius: 8px; padding: 8px; }
.main { flex: 1; padding: 28px; min-width: 0; }
/* Desktop top bar (1win style) */
.mainwrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dtopbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center;
justify-content: space-between; gap: 10px; padding: 10px 28px;
background: rgba(15,33,46,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border); }
.dt-left { display: flex; align-items: center; min-width: 0; }
.dt-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
color: var(--muted); letter-spacing: .04em; }
.dt-live .dot { width: 8px; height: 8px; border-radius: 50%; background: #00e701;
box-shadow: 0 0 8px rgba(0,231,1,.7); animation: livePulse 2s ease-in-out infinite; }
.dt-right { display: flex; align-items: center; gap: 10px; }
.dt-bell { position: relative; }
.dt-avatar { width: 36px; height: 36px; border-radius: 50%; padding: 0; border: 2px solid rgba(255,213,74,.5);
background: var(--panel2); cursor: pointer; overflow: hidden; flex: none;
transition: border-color .15s ease, box-shadow .15s ease; }
.dt-avatar:hover { border-color: #ffd54a; box-shadow: 0 0 12px rgba(255,213,74,.35); }
.dt-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) { .dtopbar { display: none; } }
[data-theme="light"] .dtopbar { background: rgba(255,255,255,.9); }
[data-theme="light"] .side-profile { background: linear-gradient(135deg, rgba(108,92,231,.1), rgba(0,168,163,.06)); }
.hero { background: linear-gradient(135deg, var(--accent), #341f97); border-radius: var(--r-lg);
padding: 22px 24px; margin-bottom: 18px; }
.hero h1 { margin: 0 0 6px; font-size: 24px; }
.hero p { margin: 0; color: #dfe6ff; }
h2.sec { font-size: 20px; margin: 26px 0 12px; }
.secrow { display: flex; align-items: baseline; justify-content: space-between; }
.secrow h2.sec { margin-bottom: 12px; }
.seclink { font-size: 13px; color: var(--accent2); cursor: pointer; white-space: nowrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
/* Casino-style hero */
.casino-hero { position: relative; overflow: hidden; border-radius: var(--r-lg); margin-bottom: 8px;
background: radial-gradient(1200px 400px at 20% -10%, rgba(108,92,231,.45), transparent 60%),
radial-gradient(900px 380px at 90% 110%, rgba(0,206,201,.28), transparent 60%),
linear-gradient(180deg, #141a30, #0e1320);
border: 1px solid var(--border); }
.casino-hero-glow { position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.015) 26px 28px); }
.casino-hero-inner { position: relative; padding: 8px 12px; }
.casino-badge { display: none; font-size: 11px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: #0e1320; background: linear-gradient(90deg, #00cec9, #6c5ce7);
padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; }
.casino-hero h1 { margin: 0 0 4px; font-size: clamp(15px, 3vw, 18px); font-weight: 800; }
.casino-hero h1 span { color: var(--accent2); }
.casino-hero p { margin: 0; color: var(--muted); font-size: 12px; max-width: 560px; }
.casino-cta { font-size: 13px; padding: 8px 20px; box-shadow: 0 6px 24px rgba(108,92,231,.45); }
.casino-stats { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.casino-stats .stat b { display: block; font-size: 15px; color: #fff; }
.casino-stats .stat span { font-size: 10px; color: var(--muted); }
/* Premium casino game cards — Stake/BC.game style */
.casino-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* 游戏网格：横竖屏自适应 */
@media (orientation: landscape) and (max-width: 900px) {
.casino-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }
}
@media (min-width: 901px) and (max-width: 1200px) {
.casino-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1201px) {
.casino-grid { grid-template-columns: repeat(6, 1fr); }
}
/* 超宽屏：增加列数，不拉伸卡片 */
@media (min-width: 1600px) {
.casino-grid { grid-template-columns: repeat(8, 1fr); }
}
@media (orientation: portrait) and (max-width: 480px) {
.casino-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
.gcard { cursor: pointer; }
.gtile { position: relative; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden;
background: linear-gradient(160deg, #151c3a, #0a0e1a);
border: 1px solid rgba(255,255,255,.08);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.gcard:hover .gtile { transform: translateY(-4px);
border-color: rgba(255,213,74,.6);
box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 26px rgba(255,213,74,.16); }
.gtile img { width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .25s ease; }
.gcard:hover .gtile img { transform: scale(1.06); }
/* sheen sweep on hover */
.gtile::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.25) 50%, transparent 58%);
transform: translateX(-130%); }
.gcard:hover .gtile::after { animation: gsheen .65s ease; }
@keyframes gsheen { to { transform: translateX(130%); } }
/* gold play button overlay */
.gplay-overlay { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
background: radial-gradient(circle at 50% 45%, rgba(4,6,16,.12), rgba(4,6,16,.55));
opacity:0; transition: opacity .2s ease; }
.gcard:hover .gplay-overlay { opacity:1; }
.gplay-btn { width:58px; height:58px; border-radius:50%; flex:none;
background: linear-gradient(180deg,#ffe082,#d4a017);
display:flex; align-items:center; justify-content:center;
font-size:20px; color:#231800; padding-left:5px;
box-shadow: 0 4px 22px rgba(255,213,74,.65), inset 0 1px 0 rgba(255,255,255,.5);
transform: scale(.75); transition: transform .2s cubic-bezier(.2,1.6,.4,1); }
.gcard:hover .gplay-btn { transform: scale(1); }
.gtile-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
font-size: 52px; font-weight: 800; color: #fff;
background: linear-gradient(135deg, #6c5ce7, #00cec9); }
.gtile-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 9px;
background: linear-gradient(transparent, rgba(0,0,0,.85));
font-size: 13px; font-weight: 800; color: #fff; letter-spacing: .2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A组第2项（2026-10-28，桌面）：最新上架等卡片标题不再单行截断。
方案抉择：双行 clamp 胜于加宽卡片——加宽卡片等于减少网格列数
（≥1201px 的 6 列、≥1600px 的 8 列），会改变整站首页密度；
双行 clamp 只动标题层，卡片尺寸/列数/悬停动效全不动，且
title 属性悬停提示仍保留。超长标题（>2 行，如极长英文名）
仍以省略号收尾 + title 提示兜底。仅桌面断点生效，移动端
维持单行省略（窄屏三列下双行标题会吃掉过多图面）。 */
@media (min-width: 721px) {
.gtile-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; line-height: 1.35; }
}
/* max-win gold badge */
.gmax-tag { position: absolute; top: 8px; right: 8px; z-index:2; font-size: 11px; font-weight: 800;
background: linear-gradient(180deg, rgba(34,25,5,.94), rgba(18,13,3,.94));
border: 1px solid rgba(255,213,74,.55); color: #ffd54a; padding: 3px 9px; border-radius: 999px;
text-shadow: 0 0 8px rgba(255,213,74,.4); }
.gexcl { position: absolute; top: 8px; left: 8px; z-index:2; width: 30px; height: 30px; border-radius: 50%;
background: rgba(10,14,26,.85); border: 1px solid rgba(255,213,74,.4);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 12px rgba(255,213,74,.25); }
.gexcl img { width: 20px; height: 20px; }
.gmeta { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; gap: 8px; }
.gplays { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.gplays .dot { width: 7px; height: 7px; border-radius: 50%; background: #00e701; flex: none; animation: livePulse 2s ease-in-out infinite; }
.gfee-inline { font-size: 11px; font-weight: 700; color: #ffd54a; white-space: nowrap;
background: rgba(255,213,74,.1); border: 1px solid rgba(255,213,74,.3);
padding: 2px 8px; border-radius: 999px; }
/* ---- Homepage banner carousel (BC.game style) ---- */
.bcarousel { position: relative; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 14px; box-shadow: var(--sh-card);
border: 1px solid var(--border); background: #0a0e1a; }
.bc-slides { position: relative; aspect-ratio: 21/7; min-height: 120px; }
.bc-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; cursor: pointer; }
.bc-slide.on { opacity: 1; z-index: 1; }
.bc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 20px 40px;
background: linear-gradient(transparent, rgba(0,0,0,.75)); }
/* E2: caption above the artwork, dots above the caption, so neither the
baked-in banner artwork nor the pagination can cover the title/subtitle.
(If the large handwritten wordmark is baked into the banner image itself,
no CSS layer can move it — that image needs replacing in the admin banner
editor; see the handoff note.) */
.bc-title { font-size: clamp(18px, 3.4vw, 30px); font-weight: 900; color: #fff; letter-spacing: .3px;
text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.bc-sub { font-size: clamp(12px, 2vw, 15px); color: #ffd54a; margin-top: 4px; font-weight: 600; }
.bc-dots { position: absolute; bottom: 12px; left: 0; right: 0; z-index: 3;
display: flex; justify-content: center; gap: 7px; }
.bc-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35);
cursor: pointer; transition: all .2s ease;
/* E2: larger tap target without changing the visible dot (content-box). */
padding: 6px; background-clip: content-box; }
.bc-dot.on { background: #ffd54a; width: 24px; border-radius: 999px;
box-shadow: 0 0 8px rgba(255,213,74,.6); }
/* A组第1项（2026-10-28，桌面）：轮播指示点不再压在横幅标语上。
根因：.bc-dots 绝对定位在幻灯片底部（bottom:12px），而横幅图的
内置标语（如 WHERE PLAYERS WIN）也贴在图底居中，两者同处一区，
居中圆点正好压住标语中部。右移/上移都只能赌标语位置，无法保证
不压别的内置文字；最稳妥是桌面端把指示点移出图片区，放到图片
下方的独立条带里（.bcarousel 内、.bc-slides 之后正常流布局），
图片区从此没有任何覆盖层。移动端（≤720px）维持原覆盖式不变，
本规则只在桌面断点生效；.bc-cap 的底部留白保持不动，避免
opt-in 标题层位置变化。 */
@media (min-width: 721px) {
.bc-dots { position: static; padding: 10px 0 12px; background: #0a0e1a; }
}
/* ---- Recent big wins ticker ---- */
.bwticker { display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
background: rgba(255,255,255,.03); border: 1px solid var(--border);
border-radius: var(--r-full); padding: 6px 8px 6px 12px; overflow: hidden; }
.bw-label { font-size: 12px; font-weight: 700; color: var(--accent2); white-space: nowrap; flex: none;
display: inline-flex; align-items: center; gap: 5px; }
.bw-viewport { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.bw-track { display: inline-flex; gap: 34px; white-space: nowrap; padding-right: 34px;
animation: bwscroll 30s linear infinite; }
.bwticker:hover .bw-track { animation-play-state: paused; }
@keyframes bwscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bw-item { font-size: 13px; color: var(--muted); }
.bw-item b { color: var(--text); }
.bw-item em { color: #00e701; font-style: normal; font-weight: 800; }
@media (max-width: 640px) {
.bc-slides { aspect-ratio: 16/8; min-height: 110px; }
/* Narrow container crops cover images left+right; banner artwork is text-left,
so anchor left to keep the baked-in wordmark (e.g. EGC) visible. */
.bc-slide img { object-position: left center; }
.bc-cap { padding: 20px 14px 36px; }
/* Bigger dot touch targets (visual dot unchanged via content-box clip). */
.bc-dot { padding: 7px; background-clip: content-box; }
.bwticker { padding: 8px 10px; }
.bw-item { font-size: 12px; }
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.live-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #ff4444; background: rgba(255,68,68,0.12); border: 1px solid rgba(255,68,68,0.3); border-radius: 4px; padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.live-badge .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff4444; animation: livePulse 1.5s ease-in-out infinite; }
.gplays.live-pulse .dot { animation: livePulse 1.5s ease-in-out infinite; }
@media (max-width: 640px) {
.casino-hero-inner { padding: 32px 22px; }
.casino-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gtile { border-radius: 10px; }
.gtile-title { font-size: 12px; padding: 20px 8px 7px; }
.gplays { font-size: 11px; }
.gplay-btn { width: 44px; height: 44px; font-size: 16px; }
.gmax-tag { font-size: 10px; padding: 2px 7px; top: 6px; right: 6px; }
.gexcl { width: 24px; height: 24px; top: 6px; left: 6px; }
.gexcl img { width: 16px; height: 16px; }
.gfee-inline { font-size: 10px; }
}
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-card);
padding: 16px; }
.card h3 { margin: 0 0 6px; font-size: 16px; }
.card p { color: var(--muted); font-size: 13px; margin: 0 0 12px; min-height: 36px; }
.btn { background: var(--accent); color: #fff; border: none; border-radius: var(--r-full);
padding: 10px 18px; font-size: 14px; cursor: pointer; }
.btn:hover { filter: brightness(1.1); }
/* fix3: ghost buttons must carry the theme text colour — .btn's white text
on the light-theme --panel2 (#e9edf5) made the header/sidebar "Log in"
button (and every other ghost button) invisible in light theme. */
.btn.ghost { background: var(--panel2); color: var(--text); }
.post { background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
padding: 14px 16px; margin-bottom: 12px; }
.post .who { font-weight: 700; font-size: 13px; color: var(--accent2); }
.post .when { color: var(--muted); font-size: 12px; margin-left: 8px; }
.post .body { margin-top: 6px; white-space: pre-wrap; }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab { background: var(--panel2); border: none; color: var(--muted); padding: 8px 16px;
border-radius: 8px; cursor: pointer; }
.tab.active { background: var(--accent); color: #fff; }
#chatlog { background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
height: 320px; overflow-y: auto; padding: 12px; margin-bottom: 10px; }
#chatlog div { margin-bottom: 6px; font-size: 14px; }
.chatbox { background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
height: 340px; overflow-y: auto; padding: 12px; margin-bottom: 10px; }
.chatbox div { margin-bottom: 6px; font-size: 14px; }
.chatline b { color: var(--accent2); }
/* WhatsApp/Telegram-style message bubbles */
.msgrow { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.msgrow.mine { justify-content: flex-end; }
.bubble { max-width: 75%; padding: 8px 12px; border-radius: 14px; background: var(--panel2);
border: 1px solid var(--border); border-bottom-left-radius: 4px; word-wrap: break-word; }
.msgrow.mine .bubble { background: linear-gradient(135deg, #6c5ce7, #5a4bd6); border-color: transparent;
border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; color: #fff; }
.bwho { font-size: 12px; font-weight: 700; color: var(--accent2); margin-bottom: 2px; }
.msgrow.mine .bwho { display: none; }
.btext { font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.btime { font-size: 10px; opacity: 0.6; text-align: right; margin-top: 2px; }
.row { display: flex; gap: 8px; }
input, textarea, select { background: var(--panel2); border: 1px solid var(--border);
color: var(--text); border-radius: 8px; padding: 10px; font-size: 14px; width: 100%; }
textarea { resize: vertical; min-height: 70px; }
/* Batch 5: the rule above gives every width:100%, which stretched
checkboxes/radios across the row and squeezed their label into one
character per line (contract signing on mobile). Reset them. */
input:where([type="checkbox"], [type="radio"]) { width: 18px; height: 18px; padding: 0;
flex: 0 0 auto; margin: 0; accent-color: var(--accent); vertical-align: middle; }
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex;
align-items: center; justify-content: center; z-index: 50; }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-pop);
padding: 24px; width: 360px; max-width: 92vw; max-height: 86vh; max-height: 86dvh; overflow-y: auto; }
.modal h2 { margin: 0 0 16px; font-size: 18px; }
.modal-box { background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
padding: 20px; width: 480px; max-width: 92vw; max-height: 86vh; max-height: 86dvh; overflow-y: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal .fld { margin-bottom: 12px; }
.modal .fld label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
/* Compact language checkbox grid (upload modal) */
.langgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.langgrid label { font-size: 12px; margin: 0 !important; display: flex !important; align-items: center; gap: 5px; white-space: nowrap; }
.err { color: var(--danger); font-size: 13px; min-height: 18px; margin: 8px 0; }
.muted { color: var(--muted); font-size: 13px; }
.hidden { display: none !important; }
.contact-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.contact-row svg { width: 20px; height: 20px; color: var(--accent2); flex: 0 0 auto; }
.contact-row a { color: var(--text); text-decoration: none; font-size: 15px; word-break: break-all; }
.contact-row a:hover { color: var(--accent2); }
.social-row { display: flex; gap: 12px; margin-top: 14px; }
.social-btn { width: 46px; height: 46px; border-radius: 13px; background: var(--panel2);
border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
transition: transform .12s ease, border-color .12s ease; }
.social-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.social-btn svg { width: 22px; height: 22px; color: var(--text); }
/* Post media */
.filebtn { cursor: pointer; }
.media-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.media-preview:empty { display: none; }
.media-preview img, .media-preview video { width: 84px; height: 84px; object-fit: cover;
border-radius: 8px; border: 1px solid var(--border); background: #000; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px; margin-top: 10px; }
.media-grid img, .media-grid video { width: 100%; border-radius: 10px; max-height: 340px;
object-fit: cover; background: #000; }
.media-grid img { cursor: zoom-in; }
/* ---- Mobile chrome: slim header + bottom tab bar (desktop keeps sidebar) ---- */
.mheader, .tabbar { display: none; }
.drawer-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50;
display: flex; justify-content: flex-end; }
.drawer-back.hidden { display: none; }
.drawer { width: 280px; max-width: 80vw; height: 100%; max-height: 100vh; max-height: 100dvh; height: 100vh; height: 100dvh; background: var(--panel);
padding: 16px; animation: drawerIn .25s ease; overflow-y: auto; overscroll-behavior: contain;
-webkit-overflow-scrolling: touch; scrollbar-width: thin;
border-radius: var(--r-xl) 0 0 var(--r-xl); }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-head { display: flex; justify-content: space-between; align-items: center;
font-weight: bold; margin-bottom: 12px; }
.drawer-item { display: block; width: 100%; text-align: left; padding: 12px 14px;
background: none; border: none; border-radius: 12px; color: inherit;
font-size: 15px; cursor: pointer; margin-bottom: 4px; }
.drawer-item:hover { background: var(--hover); }
.sheet-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50;
display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--panel); border: 1px solid var(--border); border-bottom: none;
border-radius: 18px 18px 0 0; width: 100%; max-width: 560px;
padding: 8px 16px calc(16px + max(env(safe-area-inset-bottom, 0px), var(--eg-sa-bottom, 0px))); }
.sheet-item { display: block; width: 100%; text-align: left; background: none; border: none;
color: var(--text); padding: 14px 8px; font-size: 16px; cursor: pointer;
border-bottom: 1px solid var(--border); }
.sheet-item:last-child { border-bottom: none; }
.sheet-item select { width: 100%; }
@media (max-width: 720px) {
body { flex-direction: column; padding-bottom: calc(78px + max(env(safe-area-inset-bottom, 0px), var(--eg-sa-bottom, 0px))); }
.sidebar { display: none; }
.mheader { display: flex; position: sticky; top: 0; z-index: 30; align-items: center;
justify-content: space-between; padding: 6px 12px;
background: rgba(15,33,46,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border); }
.mlogo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; flex-shrink: 0; }
.mlogo img { width: auto; height: 18px; border-radius: 0; }
.mright { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.mright .mwal-wrap { min-width: 0; }
.mheader .iconbtn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 4px; }
.mheader .mlogin { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.mlogin { padding: 7px 14px; font-size: 13px; max-width: 40vw; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
/* Floating capsule dock (reverted 2026-10-16 per user: prettier than flat bar) */
.tabbar { display: flex; position: fixed; left: 12px; right: 12px; margin: 0 auto;
bottom: calc(12px + max(env(safe-area-inset-bottom, 0px), var(--eg-sa-bottom, 0px))); z-index: 40;
background: rgba(21,41,58,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, .08); border-radius: 34px;
padding: 4px 10px; gap: 2px; align-items: flex-end;
box-shadow: var(--sh-bar); max-width: calc(100vw - 24px); min-width: min(360px, calc(100vw - 24px)); }
.tab { flex: 1 1 0; min-width: 0; background: none; border: none; color: #8e8e93;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
font-size: 11px; font-weight: 500; padding: 6px 4px 5px; cursor: pointer;
min-height: 48px;
border-radius: 20px; transition: background .2s ease, color .2s ease, transform .12s ease;
-webkit-tap-highlight-color: transparent; position: relative; white-space: nowrap; }
.tab .tic { position: relative; display: flex; }
.tab svg { width: 24px; height: 24px; }
.tab.active { color: #fff; background: var(--accent-grad); }
.tab.active svg { color: #fff; }
.tab:active { transform: scale(.94); }
/* Center home button: prominent raised circle (5-tab layout) */
.tab.tab-center { flex: 0 0 auto; min-width: 0; padding: 0; margin: 0 2px;
background: none; min-height: 0; overflow: visible; }
.tab.tab-center .chome { width: 62px; height: 62px; border-radius: 50%;
background: linear-gradient(135deg, #2dd4bf, #0ea5e9);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
color: #fff; margin-top: -28px;
border: 3px solid #15293a;
box-shadow: 0 6px 20px rgba(45, 212, 191, .45);
transition: transform .15s ease, box-shadow .2s ease; }
.tab.tab-center .chome svg { width: 24px; height: 24px; }
.tab.tab-center .chome-lbl { font-size: 10px; font-weight: 700; line-height: 1; }
.tab.tab-center:active .chome { transform: scale(.92); }
.tab.tab-center.active { background: none; color: #fff; }
.tab.tab-center.active .chome { box-shadow: 0 6px 24px rgba(45, 212, 191, .65), 0 0 0 3px rgba(45, 212, 191, .35); }
.tab.tab-center:not(.active) .chome { filter: saturate(.75) brightness(.92); }
.tab .dot-ind { display: none; }
/* Sliding active indicator (batch 1): gradient capsule glides between
tabs; center home tab keeps its own glow, indicator fades out there. */
.tabbar-ind { position: absolute; top: 4px; bottom: 4px; left: 0; z-index: 0;
border-radius: var(--r-full); background: var(--accent-grad); opacity: 0;
transition: transform .5s var(--spring), width .5s var(--spring), opacity .3s ease; }
.tabbar.has-ind .tab { background: transparent; }
.tabbar.has-ind .tab.active { background: transparent; }
.tab { z-index: 1; }
[data-theme="light"] .tabbar { background: rgba(255, 255, 255, .94); border: 1px solid rgba(0, 0, 0, .08); }
[data-theme="light"] .tab.active { color: #fff; }
.tab .nbadge { position: absolute; top: -6px; right: -12px; min-width: 20px; height: 20px;
padding: 0 6px; border-radius: 10px; background: #ff3b30; color: #fff;
font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(255,59,48,.5); }
.main { padding: 16px; padding-bottom: 110px; }
.hero { padding: 16px; }
.hero h1 { font-size: 20px; }
}
/* Short landscape phones: tighten hero */
@media (max-height: 500px) and (max-width: 920px) {
.hero { padding: 18px; margin-bottom: 16px; }
.hero h1 { font-size: 20px; }
h2.sec { margin: 18px 0 10px; }
}
/* ---- Texas Hold'em ---- */
.ptable { background: radial-gradient(ellipse at center, #0d5c2e 0%, #083a1d 70%); border-radius: 120px; padding: 30px; margin: 16px 0; color: #fff; position: relative; min-height: 420px; }
.pcommunity { text-align: center; margin-bottom: 18px; }
.ppot { font-size: 18px; font-weight: bold; margin-bottom: 8px; }
.pcomm-cards { display: flex; gap: 8px; justify-content: center; min-height: 70px; }
.pstreet { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; opacity: .7; margin-top: 6px; }
.pcard { width: 48px; height: 68px; background: #fff; color: #111; border-radius: 8px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.pcard.red { color: #c00; }
.pcard.back { background: repeating-linear-gradient(45deg, #7a1f1f, #7a1f1f 6px, #5c1515 6px, #5c1515 12px); }
.pseats { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pseat { background: rgba(0,0,0,.45); border-radius: 12px; padding: 10px 14px; min-width: 130px; text-align: center; border: 2px solid transparent; }
.pseat.acting { border-color: #ffd54a; box-shadow: 0 0 12px #ffd54a88; }
.pseat.folded { opacity: .45; }
.pseat.me { background: rgba(90,40,160,.5); }
.pname { font-weight: bold; margin-bottom: 6px; font-size: 14px; }
.pcards { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; min-height: 40px; }
.pcards .pcard { width: 36px; height: 52px; font-size: 13px; }
.pstack { font-size: 14px; }
.pbet { color: #ffd54a; font-size: 13px; }
.pallin { color: #ff5252; font-weight: bold; font-size: 12px; }
.pactions { display: flex; gap: 8px; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
.pactions button { padding: 10px 18px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; }
.pactions button.danger { background: #c62828; color: #fff; }
.pwinners { text-align: center; font-size: 18px; margin: 12px 0; }
.plog { font-size: 12px; opacity: .7; max-height: 100px; overflow-y: auto; margin-top: 12px; }
.pwaiting { text-align: center; padding: 60px; font-size: 18px; }
/* ---- Public profile page tabs (fix5 8g: the old fixed overlay and its
.prof-* card styles are gone; the public profile is a normal SPA view
reusing .prof-hero/.statgrid. Only the tab styles remain.) ---- */
.prof-tabs { display: flex; gap: 8px; margin: 16px 0 10px; position: relative; }
.ptab { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 8px 18px; font: inherit; font-size: 14px; cursor: pointer; }
.ptab.active { background: linear-gradient(135deg, #6c5ce7, #00cec9); color: #fff; border-color: transparent; font-weight: 700; }
.ptab-ind { position: absolute; bottom: -6px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, #6c5ce7, #00cec9); transition: left .32s var(--spring), width .32s var(--spring); }
/* ---- Own profile view (preview-aligned) ---- */
.prof-hero { background: linear-gradient(140deg, rgba(108,92,231,.30), rgba(0,206,201,.14) 60%, rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 20px 16px; text-align: center; margin-bottom: 12px; box-shadow: var(--sh-card); }
.prof-hero .avwrap { position: relative; width: 92px; height: 92px; margin: 0 auto 10px; }
.prof-hero .avwrap img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.25); }
.prof-hero .avph { width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(135deg, #6c5ce7, #00cec9); display: flex; align-items: center; justify-content: center; font-size: 38px; color: #fff; border: 3px solid rgba(255,255,255,.25); box-sizing: border-box; }
.prof-hero .avedit { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #6c5ce7, #00cec9); border: 2px solid var(--bg); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.prof-hero .nm { font-size: 20px; font-weight: 900; }
.prof-hero .uid { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.badgerow { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 12px; }
.statbox { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 6px; text-align: center; }
.statbox b { display: block; font-size: 16px; margin-bottom: 2px; }
.statbox span { font-size: 11.5px; color: var(--muted); }
@media (max-width: 560px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }
.prof-actions { display: flex; gap: 9px; margin-bottom: 14px; }
.prof-actions .btn { flex: 1; }
.listrow { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; text-align: left; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 14px; margin-bottom: 9px; color: var(--text); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.listrow .sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.listrow .chev { margin-left: auto; color: var(--muted); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 14.5px; }
.setrow:last-child { border-bottom: none; }
.setrow .chev { color: var(--muted); font-size: 13px; }
.btn.danger { background: #ef4444; color: #fff; border: none; font-weight: 700; }
.bigbtn { width: 100%; padding: 14px; font-size: 15px; }
/* ---- Escrow page (fix batch 2): collapsible create + folded orders ---- */
.esc2-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; color: var(--text); font: inherit; padding: 2px 0 10px; cursor: pointer; text-align: left; }
.esc2-head .ttl { display: flex; align-items: center; gap: 8px; font-size: 16px; white-space: nowrap; }
.esc2-head .esc2-sum { flex: 1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.esc2-head .esc2-chev { color: var(--muted); font-size: 20px; transition: transform .25s var(--spring); flex: none; }
.esc2-order .esc2-chev { float: right; color: var(--muted); font-size: 18px; transition: transform .25s var(--spring); }
.esc2-order.open .esc2-chev { transform: rotate(90deg); }
/* Small game cards */
.gcard.small .gcover { height: 90px; }
.gcard.small .gmeta h3 { font-size: 14px; margin: 6px 0 4px; }
.gcard.small .gmeta { padding: 8px; }
.glang { font-size: 10px; background: #333; border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.gexclusive { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px;
background: rgba(0,0,0,.65); color: #ffd54a; font-size: 10px; font-weight: bold;
padding: 3px 8px; border-radius: 20px; border: 1px solid #ffd54a55; }
.gexclusive img { width: 14px; height: 14px; }
.gcover { position: relative; }
/* ---- X-like tweet cards (EG style: rounded, purple/blue) ---- */
.tweet { background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
padding: 14px 16px; margin-bottom: 12px; cursor: pointer; transition: border-color .15s; }
.tweet:hover { border-color: #4a5fc1; }
.tweet-head { display: flex; gap: 10px; align-items: flex-start; }
.tweet-main { flex: 1; min-width: 0; }
.tweet-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.tweet-name { font-weight: 700; cursor: pointer; }
.tweet-name:hover { text-decoration: underline; }
.tweet-handle, .tweet-time { color: var(--muted); }
.tweet-badge { font-size: 12px; }
.tweet-hot { font-size: 11px; background: linear-gradient(135deg,#ff6b6b,#ff9f43); color: #fff;
border-radius: 10px; padding: 1px 8px; font-weight: 700; }
.tweet-body { margin: 6px 0 4px; white-space: pre-wrap; font-size: 14.5px; line-height: 1.5; word-break: break-word; }
/* fix3: allow wrapping — with all action buttons present (reply/repost/
like/views/share/report + the gold Translate button) the row's
min-content (~370px) exceeds narrow .tweet-main widths, so the last
(gold) button was pushed past the card and the screen's right edge,
showing only its tail ("…slate"). Wrapping keeps every action on-card;
wide layouts are unchanged (the row fits one line there). */
.tweet-actions { display: flex; justify-content: space-between; flex-wrap: wrap; row-gap: 2px; max-width: 420px; margin-top: 10px; }
.tact.trbtn { color: var(--gold, #f0b90b); font-weight: 600; }
.tr-box { margin-top: 8px; padding: 8px 12px; background: rgba(240,185,11,.08); border-left: 3px solid var(--gold, #f0b90b); border-radius: 6px; font-size: 14px; }
.tr-box .tr-label { font-size: 12px; color: var(--gold, #f0b90b); margin-bottom: 4px; }
.tact { display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
color: var(--muted); font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.tact:hover { background: rgba(108,92,231,.12); color: var(--accent2); }
.tact.on-like { color: #ff6b8a; }
.tact.on-repost { color: #2ed573; }
.tact.on-bookmark { color: var(--gold); }
.tact .cnt { min-width: 18px; }
/* feed tabs */
.feedtabs { display: flex; gap: 4px; margin-bottom: 14px; background: var(--panel);
border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.feedtab { flex: 1; background: none; border: none; color: var(--muted); padding: 9px;
border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 600; }
.feedtab.active { background: var(--accent); color: #fff; }
/* fix7 L7 item 4: the <=720px dock rules for .tab (column layout, 48px
min-height, 20px radius, nowrap) are unscoped and leak into the
community tab bar — its five capsules ballooned and pressed down over
the content below (worst on the DM tab). Re-pin the community bar to a
compact segmented row on every viewport. */
#view-community .tabs { position: relative; z-index: 1; align-items: stretch; }
#view-community .tabs .tab { flex: 1 1 0; min-width: 0; min-height: 40px; height: auto;
flex-direction: row; align-items: center; justify-content: center;
padding: 8px 4px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
background: var(--panel2); color: var(--muted); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
#view-community .tabs .tab.active { background: var(--accent); color: #fff; }
/* feed filter banner (fix6: hashtag / bookmarks modes) */
.feed-filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; }
.feed-filter-label { font-weight: 700; font-size: 14px; color: var(--accent2); }
/* compose FAB + full-screen compose page (fix6 redesign) */
.compose-fab { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px));
z-index: 150; width: 52px; height: 52px; border: none; border-radius: 50%; cursor: pointer;
background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(108,92,231,.45); }
.compose-fab:active { transform: scale(.94); }
@media (min-width: 1024px) { .compose-fab { bottom: 28px; right: 28px; } }
.compose-back { position: fixed; inset: 0; z-index: 240; background: var(--bg); display: flex; justify-content: center;
height: 100%; height: 100dvh; }
.compose-page { width: 100%; max-width: 640px; height: 100%; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
/* fix7 L7-3a: poll box and settings card are plain block-flow siblings in
.compose-body; pin explicit stacking so a repaint race in the iOS
overflow-scroller can never paint one over the other. */
.compose-body { position: relative; }
#pollbox { position: relative; z-index: 1; }
.compose-settings { position: relative; z-index: 0; }
.compose-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
padding-top: calc(10px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--border); }
.compose-title { flex: 1; text-align: center; font-size: 16px; }
.compose-head .btn { min-width: 76px; }
.compose-head .btn:disabled { opacity: .45; cursor: default; }
.compose-body { flex: 1; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; }
.compose-body .composer { margin-bottom: 10px; }
.compose-body textarea { min-height: 120px; }
.compose-foot { border-top: 1px solid var(--border); padding: 10px 14px; margin-top: 0;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
.compose-settings { margin-top: 14px; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--panel); }
.compose-set-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.compose-set-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; }
/* composer */
.composer { background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
padding: 14px 16px; margin-bottom: 16px; }
.composer-row { display: flex; gap: 10px; }
.composer textarea { flex: 1; min-height: 64px; background: var(--panel2); border: 1px solid var(--border);
border-radius: 12px; color: inherit; padding: 10px 12px; font-size: 14.5px; resize: vertical; font-family: inherit; }
.composer-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.char-ring { width: 28px; height: 28px; transform: rotate(-90deg); }
.char-ring .bg { stroke: var(--border); }
.char-ring .fg { stroke: var(--accent2); stroke-linecap: round; transition: stroke-dashoffset .2s; }
.char-ring.over .fg { stroke: #ff6b6b; }
/* skeleton */
.skel { border-radius: 16px; padding: 14px 16px; margin-bottom: 12px;
background: linear-gradient(90deg, var(--panel) 25%, var(--panel2) 50%, var(--panel) 75%);
background-size: 200% 100%; animation: shimmer 1.2s infinite; min-height: 110px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty-feed { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-feed .big { font-size: 44px; margin-bottom: 12px; }
/* thread modal */
.thread-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 60;
display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 5vh 12px; }
.thread-back.hidden { display: none; }
.thread-box { width: 100%; max-width: 600px; background: var(--bg); border: 1px solid var(--border);
border-radius: 18px; padding: 16px; }
.reply { display: flex; gap: 10px; padding: 12px 4px; border-top: 1px solid var(--border); }
.reply-box { display: flex; gap: 8px; margin-top: 12px; }
.reply-box input { flex: 1; background: var(--panel2); border: 1px solid var(--border);
border-radius: 20px; padding: 9px 14px; color: inherit; font-size: 14px; }
.gfee { font-size: 11px; color: #ffd54a; background: #3a3220; padding: 2px 8px; border-radius: 10px; }
/* Horizontal scrollable category chips */
.catchips { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 10px;
scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 100%;
-ms-overflow-style: none; }
.catchips::-webkit-scrollbar { display: none; }
.catchips { scroll-snap-type: x proximity; }
.catchip { flex: none; display: inline-flex; align-items: center; gap: 6px;
background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
padding: 8px 14px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; cursor: pointer;
white-space: nowrap; transition: all .15s ease; scroll-snap-align: start; }
.catchip .ci { font-size: 15px; line-height: 1; }
.catchip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Sliding chip indicator (batch 1): lives inside the scroll content so it
follows horizontal scrolling for free; active chip goes transparent. */
.catchips, .subchips { position: relative; }
.chip-ind { position: absolute; left: 0; z-index: 0; border-radius: var(--r-full);
background: var(--accent-grad); transition: transform .45s var(--spring), width .45s var(--spring), top .3s ease, height .3s ease; }
.catchip, .subchip { position: relative; z-index: 1; }
.catchips.has-ind .catchip.active, .subchips.has-ind .subchip.active { background: transparent; border-color: transparent; }
/* Subcategory slider (under EG Originals, smaller) */
.subchips { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 8px;
scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 100%; -ms-overflow-style: none; }
.subchips::-webkit-scrollbar { display: none; }
.subchips { scroll-snap-type: x proximity; }
.subchip { flex: none; display: inline-flex; align-items: center; gap: 4px;
background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
padding: 5px 10px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; cursor: pointer;
white-space: nowrap; transition: all .15s ease; scroll-snap-align: start; min-height: 32px; }
.subchip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Provider text-badge logos (Slots subcategory slider — no hotlinked images) */
.provbadge { display: inline-flex; align-items: center; justify-content: center;
min-width: 36px; height: 24px; padding: 0 8px; border-radius: 6px;
background: var(--pbg, #5d6b87); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.subchip.active .provbadge { background: rgba(255,255,255,.28); }
.subchip .ei { width: 18px; height: 18px; flex: none; vertical-align: -2px; }
/* Game search */
.gtools { margin: 12px 0 4px; }
.gtools input { width: 100%; max-width: 340px; background: var(--panel2); border: 1px solid var(--border);
color: var(--text); border-radius: var(--r-md); padding: 10px 14px; font-size: 14px; }
.gtools input::placeholder { color: var(--muted); }
/* Light theme */
[data-theme="light"] {
--bg: #f2f4f9; --panel: #ffffff; --panel2: #e9edf5;
--text: #1a2030; --muted: #5d6b87;
--accent: #6c5ce7; --accent2: #00a8a3;
--border: #dbe1ee; --danger: #d63031;
/* fix3: white-alpha hover washes are invisible on light surfaces. */
--hover: rgba(15,33,46,.06);
--input: #e9edf5;
}
/* E组 2026-10-28：字标图已透明化，浅色主题下白字需转黑，否则在白底上隐形。 */
[data-theme="light"] .logo img, [data-theme="light"] .mlogo img, [data-theme="light"] .auth-logo img { filter: brightness(0); }
[data-theme="light"] .casino-hero { background: linear-gradient(135deg, #6c5ce7, #341f97); }
[data-theme="light"] .casino-hero h1, [data-theme="light"] .casino-hero p,
[data-theme="light"] .casino-hero .stat b, [data-theme="light"] .casino-hero .stat span { color: #fff; }
[data-theme="light"] .gtile-title { background: linear-gradient(transparent, rgba(0,0,0,.82)); color: #fff; }
[data-theme="light"] .tabbar { background: rgba(255,255,255,.94); border-top: 1px solid rgba(0,0,0,.08); }
[data-theme="light"] .tab { color: #8e8e93; }
[data-theme="light"] .tab.active { color: var(--accent); background: transparent; }
[data-theme="light"] .tab.active svg { color: #007aff; }
[data-theme="light"] .tab { color: #8a93a8; }
[data-theme="light"] .tab.active { color: #1a2030; }
[data-theme="light"] .mheader { background: rgba(255,255,255,.92); }
.theme-btn { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none;
color: var(--muted); padding: 10px 12px; border-radius: 10px; font-size: 15px; cursor: pointer; }
.theme-btn:hover { background: var(--panel2); color: var(--text); }
.mmenu { display: none; } /* redundant: desktop has sidebar, mobile has dock "更多" */
/* Pinned official announcements */
.post.pinned { border: 1px solid var(--accent); background: linear-gradient(135deg, rgba(108,92,231,.12), transparent); }
.pin-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pin-head b { color: var(--accent2); }
.post-admin { margin-left: auto; display: inline-flex; gap: 6px; }
.btn.xs { padding: 3px 10px; font-size: 12px; }
.btn.ghost.danger { color: var(--danger); }
/* Rich text in posts/chat */
.post .body a, .btext a, .tweet-body a { color: var(--accent2); text-decoration: underline; word-break: break-all; }
.post .body code, .btext code { background: var(--panel2); padding: 1px 6px; border-radius: 4px; font-size: 13px; }
.post .body blockquote, .btext blockquote { border-left: 3px solid var(--accent); margin: 6px 0; padding: 4px 10px; color: var(--muted); }
/* User badges (16px SVG after nickname) */
.ubadge { width:16px; height:16px; margin-left:3px; vertical-align:-3px; }
.tier-card { border:2px solid var(--border); border-radius:12px; padding:12px; margin:8px 0; cursor:pointer; }
.tier-card.sel { border-color:#7c4dff; box-shadow:0 0 12px rgba(124,77,255,.35); }
.dur-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.dur-btn { padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:var(--panel2); cursor:pointer; font-size:13px; }
.dur-btn.sel { border-color:#7c4dff; background:rgba(124,77,255,.15); font-weight:700; }
/* ===== Professional auth modal (compact) ===== */
.auth-modal { position: relative; max-width: 340px; width: 100%; padding: 20px 20px 16px; }
.auth-close { position: absolute; top: 8px; right: 8px; border: none; background: none;
color: var(--muted); font-size: 16px; cursor: pointer; padding: 6px; border-radius: 8px; }
.auth-close:hover { background: var(--hover); color: var(--text); }
.auth-logo { text-align: center; margin-bottom: 8px; }
.auth-logo img { width: auto; height: auto; animation: dragon-float 3s ease-in-out infinite; }
.auth-title { text-align: center; margin: 0 0 2px; font-size: 18px; font-weight: 700; }
.auth-sub { text-align: center; margin: 0 0 12px; font-size: 12px; }
.auth-modal .fld { margin-bottom: 10px; }
.auth-modal .fld label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.auth-modal .fld input { width: 100%; padding: 9px 12px; font-size: 14px; border-radius: 10px;
border: 1.5px solid var(--border); background: var(--bg); color: var(--text); box-sizing: border-box; }
.auth-modal .fld input:focus { outline: none; border-color: #7c4dff; box-shadow: 0 0 0 3px rgba(124,77,255,.15); }
.auth-modal .fld .req { color: #e74c3c; }
.fld-hint { font-size: 12px; margin-top: 4px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px !important; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
border: none; background: none; font-size: 18px; cursor: pointer; padding: 4px; opacity: .6; }
.pw-toggle:hover { opacity: 1; }
.pw-bar { height: 4px; background: var(--border); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.pw-bar #pwfill { height: 100%; width: 0; border-radius: 2px; transition: width .3s, background .3s; }
.auth-links { text-align: right; margin: -4px 0 10px; font-size: 12px; }
.auth-submit { width: 100%; padding: 10px; font-size: 15px; font-weight: 700; border-radius: 12px; }
.auth-switch { text-align: center; margin: 10px 0 0; font-size: 12px; }
.auth-switch a { color: #7c4dff; font-weight: 600; text-decoration: none; }
.auth-social { display: flex; justify-content: center; gap: 12px; margin-top: 10px; align-items: center; }
.auth-social button { display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%; border: none; background: #fff;
cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.auth-social button:hover { transform: translateY(-1px); }
.auth-social button:disabled { opacity: .5; cursor: wait; transform: none; }
.err { color: #e74c3c; font-size: 13px; }
/* ===== Dragon logo loading animation (Community) ===== */
.dragon-loader { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column;
align-items: center; justify-content: center; background: var(--bg); border-radius: 12px;
transition: opacity .5s ease; }
.dragon-loader.fade-out { opacity: 0; pointer-events: none; }
/* ===== Telegram Web style: chat list ===== */
.tg-chatlist { display: flex; flex-direction: column; gap: 2px; }
.tg-chatitem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
cursor: pointer; border: none; background: none; color: inherit; width: 100%; text-align: left; }
.tg-chatitem:hover { background: var(--panel2); }
.tg-chatitem.active { background: var(--panel2); }
.tg-chatitem .tg-av { flex: none; }
.tg-chatmain { flex: 1; min-width: 0; }
.tg-chatname { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.tg-chatname .tg-type { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: var(--panel2);
color: var(--muted); font-weight: 400; }
.tg-chatname .tg-type.chan { background: #1a3a5c; color: #4fc3f7; }
.tg-chatname .tg-type.grp { background: #1a4a2e; color: #69f0ae; }
.tg-chatprev { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-chatmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.tg-chattime { font-size: 11px; color: var(--muted); }
.tg-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #6c5ce7;
color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* ===== Telegram Web style: date dividers ===== */
.tg-datediv { text-align: center; margin: 12px 0; }
.tg-datediv span { display: inline-block; padding: 4px 12px; border-radius: 12px;
background: var(--panel2); color: var(--muted); font-size: 12px; }
/* ===== Telegram Web style: input bar ===== */
.tg-inputbar { display: flex; align-items: center; gap: 8px; background: var(--panel);
border: 1px solid var(--border); border-radius: 24px; padding: 6px 6px 6px 16px; margin-top: 10px; }
.tg-inputbar input { flex: 1; border: none; background: none; color: inherit; font-size: 14px; outline: none; }
.tg-inputbar .tg-attach { border: none; background: none; font-size: 20px; cursor: pointer; opacity: .7; padding: 4px; }
.tg-inputbar .tg-attach:hover { opacity: 1; }
.tg-sendbtn { width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
background: linear-gradient(135deg, #6c5ce7, #5a4bd6); color: #fff; font-size: 18px;
display: flex; align-items: center; justify-content: center; flex: none; }
/* ===== Unified create chooser modal ===== */
.tg-choose { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.tg-choose button { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px;
border: 1px solid var(--border); background: var(--panel2); color: inherit; cursor: pointer;
font-size: 15px; text-align: left; }
.tg-choose button:hover { border-color: var(--accent); }
.tg-choose .tg-cicon { font-size: 28px; }
.tg-choose .tg-cdesc { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* ---- Game detail modal (Stake-style) ---- */
#gdetail { width: 520px; padding: 0; overflow: hidden; max-height: 90vh; max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.gd { position: relative; display: flex; flex-direction: column; max-height: 86vh; max-height: 86dvh; }
.gd-close { position: absolute; top: 10px; right: 10px; z-index: 10; width: 32px; height: 32px;
border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 14px;
cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gd-close:hover { background: rgba(0,0,0,.8); }
.gd-body { overflow-y: auto; flex: 1; }
.gd-cover { position: relative; height: 210px; background: #1b2030; }
.gd-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gd-cover-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
font-size: 72px; font-weight: 800; color: #fff;
background: linear-gradient(135deg, var(--accent), #341f97); }
.gd-badge { position: absolute; top: 12px; left: 12px; background: #1a8cff; color: #fff;
font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 20px;
box-shadow: 0 2px 10px rgba(26,140,255,.5); letter-spacing: .5px; }
.gd-save { position: absolute; bottom: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%;
border: none; background: rgba(0,0,0,.55); font-size: 18px; cursor: pointer;
display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.gd-save:hover { transform: scale(1.1); }
/* ---- Game detail modal: landscape fix (2026-10-16) ---- */
@media (orientation: landscape) and (max-height: 500px) {
#gdetail { width: min(520px, 92vw); max-height: 92vh; max-height: 92dvh; overflow-y: auto; }
.gd-cover { height: 120px; }
.gd-body { padding: 12px 16px !important; }
.gd-actions { position: sticky; bottom: 0; background: var(--card); padding: 10px 16px; }
}
.gd-save.on { background: rgba(255,80,110,.25); }
.gd-body { padding: 18px 20px 22px; }
.gd .gd-title { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.gd-meta { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.gd-desc { font-size: 14px; margin: 0 0 16px; line-height: 1.6; }
.gd-cap-note { font-size: 12px; margin: 0 0 14px; opacity: .65; line-height: 1.5; }
.gd-modes { display: flex; gap: 12px; margin-bottom: 18px; }
.gd .gd-mode { flex: 1; padding: 14px; font-size: 16px; font-weight: 700; border-radius: 12px; }
.gd-sec { font-size: 15px; font-weight: 700; margin: 18px 0 10px; }
/* Publisher row above the leaderboard: 24px circular avatar + name + muted tag */
.gd-pub { display: flex; align-items: center; gap: 8px; margin: 14px 0 2px; font-size: 13px; color: var(--muted); }
.gd-pub img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.gd-pub-name { font-weight: 600; color: var(--text); }
.gd-pub-tag { font-size: 11px; opacity: .8; border: 1px solid var(--border); border-radius: 8px; padding: 1px 7px; }
/* ---- Unified game page header: [back] [icon + name centered] [balance / sound / lang] ---- */
.gh-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gh-back {
background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
min-width: 44px; height: 44px; font-size: 18px; color: var(--text); cursor: pointer;
display: flex; align-items: center; justify-content: center; flex: none; padding: 0 10px;
}
.gh-back:active { transform: scale(.94); }
.gh-center { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.gh-center img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.gh-center h1 { margin: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-right { display: flex; align-items: center; gap: 8px; flex: none; }
.gh-balwrap { font-size: 12px; white-space: nowrap; }
.gh-balwrap b { color: var(--accent); }
.gh-sound {
background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
font-size: 16px; padding: 6px 10px; cursor: pointer; color: var(--text); flex: none;
/* D2: 44x44 minimum touch target (game header sound/language buttons,
shared by ~26 game pages); layout structure unchanged. */
min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.gh-lang {
padding: 6px 8px; border-radius: 10px; background: var(--panel); color: var(--text);
border: 1px solid var(--border); font-size: 12px; max-width: 104px; flex: none;
/* D2: same 44x44 minimum touch target as .gh-sound. */
min-width: 44px; min-height: 44px;
}
@media (max-width: 640px) {
/* Balance pill: 80px cap + nowrap used to spill long balances over neighbours;
widen the cap and clip gracefully with an ellipsis instead. */
/* A组第7项（2026-10-28，≤640px）：余额省略号真正生效。
根因：.gh-balwrap 是 flex 容器，text-overflow 对 flex 容器本身
不生效；且旧规则只写了 .gh-balwrap .gh-bal（站内无此结构——
红灯页的 .gh-bal 是 .gh-head 的直接子级，不在 wrap 内），而
其余 33 个游戏页的余额内层是 ap-bal/bac-bal/br-bal 等 div，
作为 flex 子项默认 min-width:auto 拒绝收缩，于是超长余额被
外层 overflow:hidden 硬裁、没有 …。修法（类名无关，一次覆盖
全部页）：内层 div 给 min-width:0 + flex 收缩 + nowrap +
overflow:hidden + text-overflow:ellipsis；嵌套一层（如 sicbo/
dice 的 .dbal 内层 div）同样处理；红灯页独立的 .gh-bal 也补
齐三件套。>640px 的 .gh-balwrap { white-space:nowrap } 原样不动。 */
.gh-balwrap { display: flex; font-size: 11px; max-width: 120px; min-width: 0; padding: 2px 6px; overflow: hidden; text-overflow: ellipsis; }
.gh-balwrap > div { min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gh-balwrap > div > div { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gh-balwrap .gh-bal, .gh-bal { font-size: 11px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@media (max-width: 420px) {
.gh-head { gap: 8px; margin-bottom: 10px; }
.gh-center h1 { font-size: 16px; }
.gh-center img { width: 26px; height: 26px; }
}
.gd-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.gd-rules { margin: 4px 0; }
.gd-rules summary { cursor: pointer; color: var(--accent2); font-size: 14px; }
.gd-rules p { font-size: 14px; white-space: pre-wrap; line-height: 1.6; }
.gd-reco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gd-admin { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.gd-admin .row { margin-top: 4px !important; }
/* Volunteer program: docs table + banker mode (item 4). */
.doc-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc-tbl th { text-align: left; padding: 8px 10px; background: var(--card2, #1b2030); font-size: 14px; }
.doc-tbl td { padding: 8px 10px; border-top: 1px solid var(--border, #2a3040); vertical-align: top; }
.doc-tbl ul { margin: 4px 0; padding-left: 20px; }
.doc-tbl li { margin: 3px 0; }
.risk-box { border: 2px solid #e5484d; border-radius: 12px; padding: 12px 14px; margin-top: 12px; background: rgba(229,72,77,.08); }
.risk-box h4 { margin: 0 0 8px; color: #e5484d; font-size: 15px; }
.risk-box p { margin: 0; font-size: 13px; line-height: 1.7; }
.mode-card h3 { margin-top: 0; }
.banker-badge { display: inline-block; background: #b8860b; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 12px; margin-left: 8px; }
.logo-badge, .mlogo img { animation: dragon-float 3s ease-in-out infinite; }
@keyframes dragon-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* ---- Landscape adaptation: short screens ---- */
@media (orientation: landscape) and (max-height: 500px) {
.sidebar { width: 200px; padding: 12px 10px; gap: 4px; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
.logo { font-size: 18px; padding: 4px 8px 10px; }
.logo-badge { width: 28px; height: 28px; }
.nav-item { padding: 8px 10px; font-size: 14px; border-radius: 8px; }
.drawer { width: 250px; padding: 12px; }
.drawer-item { padding: 10px 12px; font-size: 14px; margin-bottom: 2px; }
.casino-hero-inner { padding: 8px 12px; }
.casino-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.sidebar { width: 180px; }
.tab { padding: 4px 2px 3px; font-size: 9px; }
/* Unified game header spans full width in landscape two-column layouts */
.gh-head { grid-column: 1 / -1; }
/* Modals fit short screens */
.modal-box { max-height: 92vh; max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
/* Game overlay for TG Mini App (fullscreen iframe, no page jump) */
#game-overlay { position: fixed; inset: 0; z-index: 100; background: var(--bg);
display: flex; flex-direction: column; animation: overlayIn .25s ease; }
#game-overlay.hidden { display: none; }
@keyframes overlayIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
#game-overlay .go-bar { display: flex; align-items: center; gap: 12px;
padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top));
background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; }
#game-overlay .go-back { background: var(--panel2); border: none; color: var(--text);
width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer;
display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#game-overlay .go-title { font-weight: 700; font-size: 16px; flex: 1; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
#game-overlay iframe { flex: 1; border: none; width: 100%; background: var(--bg); }
/* @mentions */
.mention { color: #4da6ff; text-decoration: none; font-weight: 600; cursor: pointer; }
.mention:hover { text-decoration: underline; }
/* Notification bell badge */
.nbadge {
position: absolute; top: -6px; right: -6px;
background: #ff4444; color: #fff; font-size: 10px; font-weight: 700;
min-width: 16px; height: 16px; line-height: 16px; text-align: center;
border-radius: 8px; padding: 0 4px;
}
.iconbtn { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px 8px; }
/* Notification list */
.notif-list { max-height: 60vh; max-height: 60dvh; overflow-y: auto; }
.notif-item {
padding: 12px 16px; border-bottom: 1px solid var(--border, #eee);
cursor: pointer; font-size: 14px;
}
.notif-item:hover { background: var(--hover, #f5f5f5); }
.notif-item.unread { background: rgba(99, 102, 241, 0.12); font-weight: 500; border-left: 3px solid var(--accent, #6366f1); }
/* ---- Public profile modal (legacy) ----
* .pubprofile-body is still used by the market modal body, so it stays.
* The .pubprofile-box / .pp-* overlay rules were removed in fix5's audit
* round: the overlay they styled was deleted with the old profile modal
* and nothing referenced them anymore. */
.pubprofile-body { overflow-y: auto; padding: 16px; }
/* ---- Telegram Mini App adaptation ---- */
/* Use TG stable viewport height when available (set by /js/tg-miniapp.js) */
:root { --tg-vh: 100vh; --tg-vh: 100dvh; }
.tg-app .main { min-height: var(--tg-vh); }
/* Prevent pull-to-refresh / overscroll conflicts inside TG */
.tg-app, .tg-app body { overscroll-behavior-y: none; }
/* Game overlay fills TG viewport exactly */
/* 2026-11-01 batch 0: subtract the TG client chrome reserve (contentSafeArea)
so the iframe's bottom strip is not hidden under Telegram's own UI. */
.tg-app #game-overlay { height: calc(var(--tg-vh) - var(--tg-csa-bottom, 0px)); max-height: calc(var(--tg-vh) - var(--tg-csa-bottom, 0px)); }
/* Bottom dock: prefer Telegram's measured safe-area (more accurate than env() in webview) */
.tg-app .tabbar { bottom: calc(10px + var(--eg-sa-bottom, env(safe-area-inset-bottom, 0px))); }
/* Community composer + chat input above home indicator */
.tg-app .composer-bar, .tg-app .chat-inputbar {
padding-bottom: calc(8px + var(--eg-sa-bottom, env(safe-area-inset-bottom, 0px))); }
/* No horizontal scroll anywhere in Mini App */
.tg-app, .tg-app body { overflow-x: hidden; max-width: 100vw; }
/* Larger touch targets in TG */
.tg-app button, .tg-app .btn { -webkit-tap-highlight-color: transparent; }
/* Game pages: 100vh is wrong inside TG webview (includes TG chrome area) — use measured viewport */
.tg-app .bg-page, .tg-app .dt-page, .tg-app .hl-page, .tg-app .kn-page,
.tg-app .lb-page, .tg-app .mn-page, .tg-app .pl-page, .tg-app .wh-page {
min-height: var(--tg-vh);
}
/* Sticky bet panel clears the TG bottom safe area */
.tg-app .bp-sticky-wrap {
padding-bottom: calc(10px + var(--eg-sa-bottom, env(safe-area-inset-bottom, 0px)));
}
/* Wallet modal sheet clears TG safe area */
.tg-app #wmodal-back { padding-bottom: var(--eg-sa-bottom, 0px); }
/* ---- Marketplace ---- */
.mkt-fee-banner { border:1px solid var(--gold2,#d4af37); border-radius:12px; padding:10px 14px; margin-bottom:12px; background:linear-gradient(180deg,rgba(212,175,55,.08),transparent); }
.mkt-fee-title { font-weight:700; margin-bottom:6px; }
.mkt-fee-grid { display:flex; gap:14px; flex-wrap:wrap; font-size:13px; }
.mkt-fee-grid span:first-child { color:var(--muted); margin-right:4px; }
.mkt-free { color:#3aa655; font-weight:700; }
.mkt-fee-box { border:1px dashed var(--gold2,#d4af37); border-radius:10px; padding:10px 12px; margin:10px 0; background:rgba(212,175,55,.05); }
.mkt-fee-row { display:flex; justify-content:space-between; padding:3px 0; font-size:13px; }
.mkt-fee-row.total { border-top:1px solid var(--border); margin-top:4px; padding-top:6px; font-size:14px; }
.mkt-toolbar { margin-bottom:12px; }
.mkt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.mkt-card { border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; background:var(--card); position:relative; }
.mkt-card:active { transform:scale(.98); }
.mkt-thumb { aspect-ratio:1; background:#222; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.mkt-thumb img { width:100%; height:100%; object-fit:cover; }
.mkt-noimg { font-size:40px; opacity:.5; }
.mkt-card-body { padding:6px 8px; }
.mkt-card-title { font-weight:600; font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; min-height:34px; }
.mkt-price { color:var(--gold2,#d4af37); font-size:14px; }
.mkt-caution { color:#e6a23c; font-size:11px; margin-top:4px; }
.mkt-pin-badge { position:absolute; top:6px; right:6px; font-size:16px; }
.mkt-mode-tag { font-size:11px; padding:2px 8px; border-radius:8px; }
.mkt-mode-tag.free { background:rgba(58,166,85,.15); color:#3aa655; }
.mkt-mode-tag.escrow { background:rgba(212,175,55,.15); color:var(--gold2,#d4af37); }
.mkt-detail-imgs { display:flex; gap:8px; overflow-x:auto; }
.mkt-detail-imgs img { height:120px; border-radius:8px; cursor:pointer; }
.mkt-seller-card { display:flex; gap:10px; align-items:center; border:1px solid var(--border); border-radius:10px; padding:8px; margin:10px 0; cursor:pointer; }
.mkt-order { border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin-bottom:8px; cursor:pointer; background:var(--card); }
.mkt-st { font-size:12px; padding:2px 10px; border-radius:10px; }
.mkt-st-locked { background:rgba(90,140,255,.15); color:#5a8cff; }
.mkt-st-shipped { background:rgba(230,162,60,.15); color:#e6a23c; }
.mkt-st-completed { background:rgba(58,166,85,.15); color:#3aa655; }
.mkt-st-disputed { background:rgba(227,51,51,.15); color:#e33; }
.mkt-st-cancelled { background:rgba(128,128,128,.15); color:#888; }
.mkt-dispute-box { border:1px solid #e33; border-radius:10px; padding:8px 10px; margin:8px 0; font-size:13px; background:rgba(227,51,51,.06); }
.mkt-up-imgs { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.mkt-up-imgs img { width:60px; height:60px; object-fit:cover; border-radius:8px; }
.fld { margin-bottom:10px; }
.fld label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
@media (max-width:480px) { .mkt-grid { grid-template-columns:repeat(2,1fr); } }
.page-loader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 16px;
background: var(--bg); transition: opacity 0.5s; }
.page-loader.fade-out { opacity: 0; pointer-events: none; }
/* ---- Shared rotate hint for portrait-only game pages (2026-10-16) ----
Add ...
right after on pages that
are fundamentally portrait. Hidden by default; shown only in landscape
on short screens. */
.rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
.rotate-hint {
display: flex; position: fixed; inset: 0; z-index: 99999;
background: rgba(8, 10, 20, .97);
flex-direction: column; align-items: center; justify-content: center;
gap: 14px; padding: 24px; text-align: center;
color: #fff; font-size: 20px; font-weight: 800; line-height: 1.6;
}
.rotate-hint .rh-ico { font-size: 56px; animation: rh-spin 2.4s ease-in-out infinite; }
@keyframes rh-spin {
0%, 100% { transform: rotate(-14deg); }
50% { transform: rotate(14deg); }
}
.rotate-hint small { display: block; font-size: 13px; font-weight: 400; color: #9aa3c0; margin-top: 6px; }
}
.gd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 4px; padding: 10px 4px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 12px; }
.gd-stat { text-align: center; min-width: 0; }
.gd-stat b { display: block; font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; }
.gd-stat span { font-size: 11px; color: var(--muted); }
/* ===== Telegram-style chat header ===== */
.tg-chatheader { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
background: var(--panel); border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0;
position: sticky; top: 0; z-index: 5; }
.tg-chatheader .tg-chatname { font-size: 15px; }
.tg-chatheader .tg-chatprev { font-size: 12px; color: var(--accent2); }
/* ===== Telegram-style reply bar ===== */
.tg-replybar { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
background: var(--panel2); border-left: 3px solid var(--accent); margin: 8px 0 0;
border-radius: 0 8px 8px 0; font-size: 13px; }
.tg-replyinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tg-replyinfo b { color: var(--accent2); font-size: 12px; }
.tg-replyinfo span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===== Telegram-style pinned message banner ===== */
.tg-pinbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
background: var(--panel2); border-bottom: 1px solid var(--border);
cursor: pointer; font-size: 13px; }
.tg-pinlabel { color: var(--accent); font-weight: 700; font-size: 12px; flex: none; }
.tg-pintext { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
/* ===== Telegram-style reply quote in bubble ===== */
.bquote { border-left: 3px solid var(--accent); padding: 4px 8px; margin-bottom: 6px;
background: rgba(0,0,0,0.15); border-radius: 0 8px 8px 0; font-size: 12px;
display: flex; flex-direction: column; gap: 2px; }
.bquote b { color: var(--accent2); }
.bquote span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===== Bubble metadata (time + read receipts) ===== */
.bmeta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; }
.bviews { font-size: 11px; opacity: 0.6; }
.rcheck { font-size: 12px; color: var(--muted); letter-spacing: -2px; }
.rcheck.read { color: #4fc3f7; }
/* ===== Message action button (reply) ===== */
.msgact { border: none; background: none; color: var(--muted); cursor: pointer;
font-size: 16px; padding: 4px 6px; border-radius: 8px; opacity: 0; transition: opacity 0.2s; flex: none; }
.msgrow:hover .msgact { opacity: 0.7; }
.msgact:hover { opacity: 1 !important; background: var(--panel2); }
/* ===== Telegram broadcast style (channels) ===== */
.tg-broadcast .msgrow { justify-content: flex-start; }
.tg-broadcast-bubble { max-width: 90%; background: var(--panel2); border: 1px solid var(--border); }
.tg-broadcast-row { margin-bottom: 12px; }
/* ===== Message bubble tails (Telegram style) ===== */
.msgrow:not(.mine) .bubble { border-top-left-radius: 4px; position: relative; }
.msgrow.mine .bubble { border-top-right-radius: 4px; position: relative; }
/* ===== Chatbox improvements ===== */
.chatbox { background: var(--bg); border-radius: 0 0 12px 12px; }
/* ===== fix7 L6-1b/4: chat pane height chain + mobile DM switching =====
Root cause of the dead message-area scrolling: .chatbox is a flex child
(inline flex:1) inside columns that had NO definite height, so the flex
chain resolved against content height — the log grew with the page and
never scrolled internally (worst in mobile webviews, where vh units
additionally shift under the browser toolbar; dvh used with vh
fallback). The pane now owns a bounded height, the log takes the
remaining space with min-height:0 (without it a flex child refuses to
shrink below content size and overflow never engages), and the input
bar stays a normal flex sibling — never an overlay — so the last
message can always be scrolled clear of it. */
.chatpane { display: flex; flex-direction: column;
height: min(66vh, 680px); height: min(66dvh, 680px); min-height: 340px; }
#groupchatview { display: flex; flex-direction: column;
height: min(66vh, 680px); height: min(66dvh, 680px); min-height: 340px; }
.chatpane .chatbox, #groupchatview .chatbox {
flex: 1 1 auto; min-height: 0; height: auto; margin-bottom: 0;
overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Conversation-list row: the time must never be squeezed or covered by
name-row badges (L6-4④). */
.tg-chatname { min-width: 0; overflow: hidden; }
.tg-chatname .ubadge { flex: none; }
.tg-chattime { flex: none; white-space: nowrap; }
/* DM list column layout lives here, not inline: the inline display:flex
it used to carry outranked the mobile show/hide rules below. */
#ctab-dm .dm-listcol { display: flex; flex-direction: column; }
/* Same for the chat column's flex:1 — inline it outranked the mobile
flex:none below, and its flex-basis:0% then outranked the pane height. */
#ctab-dm .dm-chatcol { flex: 1; }
/* Mobile DM (L6-4③): Telegram-style single pane — list OR conversation,
never stacked. Desktop keeps the two-column layout untouched. */
@media (max-width: 760px) {
#ctab-dm .dm-wrap { flex-direction: column; flex-wrap: nowrap; }
#ctab-dm .dm-listcol { flex: 1 1 auto; min-width: 0; }
#ctab-dm .dm-chatcol { display: none; }
/* flex:none matters: the column's inline flex:1 sets flex-basis:0%,
which outranks height in a column flex parent and would let the
pane grow with content again (the L6-1b disease in miniature). */
#ctab-dm.dm-open .dm-chatcol { display: flex; flex: none; min-width: 0; width: 100%;
height: min(74vh, 760px); height: min(74dvh, 760px); }
#ctab-dm.dm-open .dm-listcol { display: none; }
.chatpane, #groupchatview { height: min(74vh, 760px); height: min(74dvh, 760px); }
}
/* ---- 设备适配增强 (2026-10-17) ---- */
/* 平板 */
@media (min-width: 641px) and (max-width: 1024px) {
.nav-item .lbl { font-size: 13px; }
#gdetail { width: min(640px, 94vw); }
}
/* 刘海屏安全区 */
@supports (padding: env(safe-area-inset-bottom)) {
.dock { padding-bottom: calc(8px + max(env(safe-area-inset-bottom, 0px), var(--eg-sa-bottom, 0px))); }
.modal { padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--eg-sa-bottom, 0px)); }
}
/* Telegram Mini App */
.tg-app .dtopbar { display: none; }
.tg-app #gdetail { max-height: 94vh; max-height: 94dvh; }
/* 横屏：侧边栏固定，内部独立滚动 */
@media (orientation: landscape) and (min-width: 721px) {
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
height: 100vh; height: 100dvh;
height: 100vh; height: 100dvh;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
flex-shrink: 0;
scrollbar-width: thin;
z-index: 40;
}
body { padding-left: 232px; }
.main { margin-left: 0; }
}
/* 横屏手机（宽度小但横屏）：也显示固定侧边栏 */
@media (orientation: landscape) and (max-width: 720px) and (min-height: 360px) {
.sidebar {
display: flex !important;
position: sticky;
top: 0;
width: 200px;
min-width: 200px;
height: 100vh; height: 100dvh;
height: 100vh; height: 100dvh;
max-height: 100vh; max-height: 100dvh;
max-height: 100vh; max-height: 100dvh;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
flex-shrink: 0;
scrollbar-width: thin;
}
body { padding-bottom: 0 !important; }
.tabbar { display: none !important; }
}
/* ============ 统一投注按钮系统 (Stake 级手感) ============
覆盖所有游戏的投注/开始/旋转/兑现主按钮：
大按钮、清晰禁用态、按压缩放反馈、loading 转圈态。
游戏专属 CSS 在此之后加载，可按需覆盖。 */
.eg-bet,
.nb-start, .nb-cashout,
.bg-play, .kn-play, .wh-spin,
.hl-start, .hl-cashout,
.dt-start, .dt-cashout, .ml-cashout,
.pk-start, .pk-cashout,
.ck-cross,
.hr-betbtn, .yt-betbtn, .nn-betbtn, .sg-betbtn,
.sl-spin-btn, .rl-btn.spin,
.sn-btn-roll, .brawl-confirm {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
padding: 14px 28px;
border: none;
border-radius: 12px;
background: linear-gradient(180deg, #2ed573 0%, #25b862 100%);
color: #fff;
font-size: 16px;
font-weight: 800;
letter-spacing: .3px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
box-shadow: 0 4px 14px rgba(46, 213, 115, .35), inset 0 1px 0 rgba(255,255,255,.25);
transition: transform .08s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
}
/* 兑现类按钮用蓝色区分 */
.nb-cashout, .hl-cashout, .dt-cashout, .ml-cashout, .pk-cashout {
background: linear-gradient(180deg, #2f6df6 0%, #2459d6 100%);
box-shadow: 0 4px 14px rgba(47, 109, 246, .35), inset 0 1px 0 rgba(255,255,255,.25);
}
.eg-bet:hover, .nb-start:hover, .nb-cashout:hover,
.bg-play:hover, .kn-play:hover, .wh-spin:hover,
.hl-start:hover, .hl-cashout:hover,
.dt-start:hover, .dt-cashout:hover, .ml-cashout:hover,
.pk-start:hover, .pk-cashout:hover, .ck-cross:hover,
.hr-betbtn:hover, .yt-betbtn:hover, .nn-betbtn:hover, .sg-betbtn:hover,
.sl-spin-btn:hover, .rl-btn.spin:hover,
.sn-btn-roll:hover, .brawl-confirm:hover { filter: brightness(1.08); }
/* 按压缩放：点击反馈 */
.eg-bet:active, .nb-start:active, .nb-cashout:active,
.bg-play:active, .kn-play:active, .wh-spin:active,
.hl-start:active, .hl-cashout:active,
.dt-start:active, .dt-cashout:active, .ml-cashout:active,
.pk-start:active, .pk-cashout:active, .ck-cross:active,
.hr-betbtn:active, .yt-betbtn:active, .nn-betbtn:active, .sg-betbtn:active,
.sl-spin-btn:active, .rl-btn.spin:active,
.sn-btn-roll:active, .brawl-confirm:active { transform: scale(.96); }
/* 清晰禁用态 */
.eg-bet:disabled, .nb-start:disabled, .nb-cashout:disabled,
.bg-play:disabled, .kn-play:disabled, .wh-spin:disabled,
.hl-start:disabled, .hl-cashout:disabled,
.dt-start:disabled, .dt-cashout:disabled, .ml-cashout:disabled,
.pk-start:disabled, .pk-cashout:disabled, .ck-cross:disabled,
.hr-betbtn:disabled, .yt-betbtn:disabled, .nn-betbtn:disabled, .sg-betbtn:disabled,
.sl-spin-btn:disabled, .rl-btn.spin:disabled,
.sn-btn-roll:disabled, .brawl-confirm:disabled {
opacity: .45;
cursor: not-allowed;
box-shadow: none;
transform: none;
filter: grayscale(.4);
}
/* loading 转圈态：按钮文字变透明，中央转圈 */
.eg-bet.is-loading, .nb-start.is-loading, .nb-cashout.is-loading,
.bg-play.is-loading, .kn-play.is-loading, .wh-spin.is-loading,
.hl-start.is-loading, .hl-cashout.is-loading,
.dt-start.is-loading, .dt-cashout.is-loading, .ml-cashout.is-loading,
.pk-start.is-loading, .pk-cashout.is-loading, .ck-cross.is-loading,
.hr-betbtn.is-loading, .yt-betbtn.is-loading, .nn-betbtn.is-loading, .sg-betbtn.is-loading,
.sl-spin-btn.is-loading, .rl-btn.spin.is-loading,
.sn-btn-roll.is-loading, .brawl-confirm.is-loading {
color: transparent !important;
pointer-events: none;
}
.eg-bet.is-loading::after, .nb-start.is-loading::after, .nb-cashout.is-loading::after,
.bg-play.is-loading::after, .kn-play.is-loading::after, .wh-spin.is-loading::after,
.hl-start.is-loading::after, .hl-cashout.is-loading::after,
.dt-start.is-loading::after, .dt-cashout.is-loading::after, .ml-cashout.is-loading::after,
.pk-start.is-loading::after, .pk-cashout.is-loading::after, .ck-cross.is-loading::after,
.hr-betbtn.is-loading::after, .yt-betbtn.is-loading::after, .nn-betbtn.is-loading::after, .sg-betbtn.is-loading::after,
.sl-spin-btn.is-loading::after, .rl-btn.spin.is-loading::after,
.sn-btn-roll.is-loading::after, .brawl-confirm.is-loading::after {
content: "";
position: absolute;
width: 22px; height: 22px;
border: 3px solid rgba(255,255,255,.35);
border-top-color: #fff;
border-radius: 50%;
animation: eg-bet-spin .7s linear infinite;
}
@keyframes eg-bet-spin { to { transform: rotate(360deg); } }
/* 通用 loading 态：任何按钮加 .is-loading 即显示转圈 */
button.is-loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
button.is-loading::after {
content: "";
position: absolute;
width: 20px; height: 20px;
border: 3px solid rgba(255,255,255,.35);
border-top-color: #fff;
border-radius: 50%;
animation: eg-bet-spin .7s linear infinite;
}
/* Stake-style chat (2026-10-18) */
#chatlog, .chatbox, #livechat-msgs {
background: #0f1420 !important;
border: 1px solid #1e2a3a !important;
}
#chatlog .msg, .chatbox .msg {
padding: 8px 12px;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
#chatlog .msg .who, .chatbox .msg .who {
font-weight: 700;
font-size: 13px;
color: #7aa2ff;
cursor: pointer;
}
#chatlog .msg .time, .chatbox .msg .time {
font-size: 11px;
color: #5a6a7a;
margin-left: 8px;
}
#chatlog .msg .text, .chatbox .msg .text {
font-size: 14px;
line-height: 1.5;
margin-top: 2px;
word-break: break-word;
}
@media (max-width: 720px) {
/* Ensure main content has enough bottom padding for tabbar */
.mainwrap { padding-bottom: calc(90px + max(env(safe-area-inset-bottom, 0px), var(--eg-sa-bottom, 0px))); }
}
/* ============ 侧边栏去顶部：横屏小高度下隐藏顶部个人中心，保留底部 #authbtn ============ */
@media (orientation: landscape) and (max-height: 500px) {
.side-profile { display: none !important; }
}
/* ============ Plan B：横屏小高度首页游戏列表模式 ============ */
.side-toggle { display: none; }
#home-listmode { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
/* --- 56px 窄图标边栏（可折叠） --- */
body.planb { padding-left: 56px !important; }
body.planb.sb-open { padding-left: 232px !important; }
body.planb .sidebar {
width: 56px !important; min-width: 56px !important;
padding: 8px 6px !important; align-items: center;
}
body.planb.sb-open .sidebar {
width: 232px !important; min-width: 232px !important;
padding: 20px 14px !important; align-items: stretch;
}
body.planb .sidebar .logo { display: none; }
.side-toggle {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 12px; flex: none;
background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
}
body.planb.sb-open .side-toggle svg { transform: rotate(180deg); }
body.planb .sidebar .nav-item {
justify-content: center; padding: 0 !important;
width: 44px; height: 44px; border-radius: 12px;
}
body.planb.sb-open .sidebar .nav-item { width: auto; height: auto; padding: 10px 12px !important; justify-content: flex-start; }
body.planb .sidebar .nav-item .lbl { display: none; }
body.planb.sb-open .sidebar .nav-item .lbl { display: inline; }
body.planb .sidebar .nav-item .nic { margin: 0 !important; width: 22px; height: 22px; }
body.planb .sidebar .side-foot { padding: 6px 0 0; align-items: center; }
body.planb.sb-open .sidebar .side-foot { align-items: stretch; }
body.planb .sidebar .theme-btn span { display: none; }
body.planb.sb-open .sidebar .theme-btn span { display: inline; }
body.planb .sidebar .theme-btn { justify-content: center; padding: 10px 0; width: 44px; }
body.planb.sb-open .sidebar .theme-btn { justify-content: flex-start; width: auto; }
body.planb .sidebar #langsel { display: none; }
body.planb.sb-open .sidebar #langsel { display: block; }
/* 底部 #authbtn：窄栏下只保留头像圆钮 */
body.planb .sidebar #authbtn {
width: 40px; height: 40px; border-radius: 50%;
padding: 0 !important; font-size: 0 !important; overflow: hidden;
}
body.planb.sb-open .sidebar #authbtn {
width: auto; height: auto; border-radius: 10px; font-size: inherit !important;
}
body.planb .sidebar #authbtn::after {
content: ''; display: block; width: 20px; height: 20px; margin: auto;
background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0bec5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
body.planb .sidebar #authbtn[data-i18n-keep]::after { display: none; }
body.planb .sidebar #authbtn[data-i18n-keep] img,
body.planb .sidebar #authbtn[data-i18n-keep] span { width: 40px !important; height: 40px !important; }
/* --- 首页列表模式：去掉 banner/横滑，6 列网格铺满 --- */
body.planb #view-home .casino-hero,
body.planb #view-home #home-carousel,
body.planb #view-home #bigwins-ticker,
body.planb #view-home .secrow,
body.planb #view-home #popular,
body.planb #view-home #newest,
body.planb #view-home h2.sec,
body.planb #view-home #recposts { display: none !important; }
body.planb #view-home #home-listmode {
display: flex !important; flex-direction: column; gap: 10px;
}
.lm-topbar { display: flex; gap: 10px; align-items: center; }
#lm-search {
flex: 1; min-width: 0; min-height: 44px;
background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
padding: 10px 14px; color: var(--text); font-size: 14px;
}
.lm-bal {
min-height: 44px; padding: 10px 16px; border: 0; border-radius: 10px;
background: linear-gradient(135deg, #c9a227, #8b6914); color: #0F212E;
font-weight: 800; font-size: 14px; white-space: nowrap;
}
.lm-cats { padding-bottom: 4px; }
.lm-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 10px; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 700px) {
.lm-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
/* Big-win broadcast ticker (homepage) */
.bw-ticker { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px;
border: 1px solid rgba(212, 175, 55, .5); border-radius: var(--r-md);
background: linear-gradient(90deg, rgba(212,175,55,.17), rgba(212,175,55,.04));
box-shadow: 0 8px 26px rgba(212,175,55,.13), var(--sh-card);
overflow: hidden; }
.bw-ticker.hidden { display: none; }
.bw-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
background: linear-gradient(135deg, #f3d27a, #d4af37); color: #241a02;
font-weight: 800; font-size: 12px; letter-spacing: .6px; white-space: nowrap;
padding: 5px 11px; border-radius: var(--r-full); }
.bw-track-wrap { flex: 1; overflow: hidden; }
.bw-track { display: inline-flex; gap: 28px; white-space: nowrap; animation: bw-scroll 32s linear infinite; will-change: transform; }
.bw-track-wrap:hover .bw-track { animation-play-state: paused; }
@keyframes bw-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bw-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tx-2); white-space: nowrap; }
.bw-item .bw-user { color: var(--tx-1); font-weight: 700; }
.bw-item .bw-profit { color: #4ade80; font-weight: 800; }
.bw-item .bw-mult { color: #e8c35a; font-weight: 700; font-size: 12px;
border: 1px solid rgba(212,175,55,.4); border-radius: 20px; padding: 0 7px; }
/* In-game big-win toast (BetPanel pages) */
.bw-toast { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
z-index: 2000; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
padding: 10px 16px; border-radius: 999px; font-size: 13px; white-space: nowrap; overflow: hidden;
color: #fff; background: rgba(15, 33, 46, .94); border: 1px solid rgba(212,175,55,.5);
box-shadow: 0 8px 28px rgba(0,0,0,.45); pointer-events: none;
opacity: 0; transition: opacity .35s ease; }
.bw-toast.show { opacity: 1; }
.bw-toast .bw-profit { color: #4ade80; font-weight: 800; }
.bw-toast .bw-mult { color: #e8c35a; font-weight: 700; }
/* Contracts modal + seal */
.contract-modal { max-width: 640px; width: calc(100vw - 24px); }
.contract-body { max-height: 46vh; max-height: 46dvh; overflow-y: auto; padding: 12px; border: 1px solid var(--border);
border-radius: 12px; background: rgba(255,255,255,.02); font-size: 13.5px; line-height: 1.7; }
.contract-seal-row { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; min-height: 8px; }
.contract-seal { width: 96px; height: 96px; flex: 0 0 auto; transform: rotate(-8deg); opacity: .92; }
.contract-uid { font-weight: 700; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.contract-sign { margin-top: 10px; }
/* Live bets feed (homepage) */
.livebets-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: #4ade80; margin-right: 8px; vertical-align: 1px;
box-shadow: 0 0 8px rgba(74,222,128,.8); animation: lbPulse 1.6s ease-in-out infinite; }
@keyframes lbPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.livebets-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px;
max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: thin; padding-right: 2px; }
.livebets-head, .livebet-row { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1.4fr) repeat(3, minmax(0,.9fr)) minmax(0,.6fr);
gap: 8px; align-items: center; padding: 8px 12px; font-size: 13px; }
.livebets-head { color: rgba(255,255,255,.45); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.livebet-row { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
border-radius: 10px; min-height: 44px; }
.livebet-row.lb-new { animation: lbSlideIn .45s ease; border-color: rgba(74,222,128,.35); }
@keyframes lbSlideIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.livebet-row .lb-user { color: #e8c35a; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.livebet-row .lb-game { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.75); }
.livebet-row .lb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.livebet-row .lb-payout.lb-win { color: #4ade80; font-weight: 700; }
.livebet-row .lb-payout.lb-loss { color: rgba(255,255,255,.4); }
.livebet-row .lb-mult { color: #e8c35a; }
.livebets-empty { text-align: center; color: rgba(255,255,255,.35); font-size: 13px; padding: 18px 0; }
/* A组第3项（2026-10-28，桌面）：实时投注表派彩/时间两列过紧。
根因：原 gap 仅 8px，且派彩列（.9fr）与时间列（.6fr）无最小宽度，
大额派彩（如 $8,097,871,913.49 这类长数字）会把时间列挤到
贴边。桌面端列距 8px→18px、左右内边距 12px→16px，并给派彩列
110px、时间列 52px 的最小宽度（其余列仍可收缩，用户名/游戏名
本来就有省略号兜底）；时间单元格补右对齐 + 不换行，与表头
的右对齐一致。仅桌面断点生效，≤560px 的横向滚动布局不动。 */
@media (min-width: 721px) {
.livebets-head, .livebet-row { gap: 8px 18px; padding: 8px 16px;
grid-template-columns: minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,.9fr) minmax(0,.9fr) minmax(110px,.9fr) minmax(52px,.6fr); }
.livebet-row .lb-time { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
}
@media (max-width: 560px) {
/* D6: the header is no longer hidden on narrow screens, and rows no
longer re-grid into a compact layout where the time cell wrapped onto
its own row with no field label. Instead the feed keeps its 6-column
layout and scrolls horizontally, so every column keeps its header. */
.livebets-list { overflow-x: auto; }
.livebets-head, .livebet-row { min-width: 560px; }
.livebet-row { font-size: 12.5px; }
}
/* ---- Betting view (sportsbook · stake/bc.game-style list, own brand) ---- */
/* Segmented Live / Upcoming tabs */
.sbk-seg { display: flex; gap: 0; margin: 4px 0 10px; background: rgba(255,255,255,.04);
border: 1px solid var(--border); border-radius: 14px; padding: 4px; }
.sbk-seg button { flex: 1; min-height: 44px; border: 0; background: transparent; color: var(--muted);
border-radius: 10px; font-size: 14.5px; font-weight: 800; cursor: pointer; display: flex;
align-items: center; justify-content: center; gap: 8px; -webkit-tap-highlight-color: transparent; }
.sbk-seg button.on { background: var(--accent-grad); color: #fff;
box-shadow: 0 3px 12px rgba(42,157,143,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.sbk-seg .n { font-size: 11px; font-weight: 800; background: rgba(255,255,255,.12);
border-radius: 10px; padding: 2px 8px; }
.sbk-seg button.on .n { background: rgba(255,255,255,.22); }
.sbk-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5c5c; flex: none;
box-shadow: 0 0 8px rgba(255,92,92,.9); animation: sbkBlink 1.4s ease-in-out infinite; }
@keyframes sbkBlink { 50% { opacity: .3; } }
/* League groups */
.sbk-group { margin-bottom: 18px; }
.sbk-ghead { display: flex; align-items: center; gap: 8px; padding: 10px 4px 8px;
font-size: 13.5px; font-weight: 800; color: var(--text); }
.sbk-ghead .ic { font-size: 17px; }
.sbk-ghead .cnt { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 700;
background: rgba(255,255,255,.06); border-radius: 10px; padding: 3px 10px; }
.sbk-list { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.sbk-match { display: grid; grid-template-columns: 66px minmax(0,1fr) auto; gap: 10px; align-items: center;
padding: 12px; border-bottom: 1px solid var(--border); }
.sbk-match:last-child { border-bottom: 0; }
.sbk-time { font-size: 11px; color: var(--muted); line-height: 1.55; text-align: center; }
.sbk-time b { display: block; font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.sbk-live { color: #ff5c5c; font-weight: 900; font-size: 11px; display: flex;
align-items: center; gap: 5px; justify-content: center; text-transform: uppercase; letter-spacing: .4px; }
.sbk-teams { min-width: 0; }
.sbk-team { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; line-height: 1.75; display: flex; align-items: center; gap: 8px; }
.sbk-team .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sbk-odds { display: flex; gap: 6px; }
.sbk-odd { min-width: 60px; min-height: 56px; padding: 6px 8px; border-radius: 10px; cursor: pointer;
background: rgba(42,157,143,.08); border: 1px solid rgba(42,157,143,.28); color: var(--text);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
-webkit-tap-highlight-color: transparent; transition: transform .12s ease, background .12s ease; }
.sbk-odd .k { font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.sbk-odd .v { font-size: 15.5px; font-weight: 900; color: #ffd54a; font-variant-numeric: tabular-nums; }
.sbk-odd:active { transform: scale(.93); background: rgba(42,157,143,.22); }
@media (max-width: 430px) {
.sbk-match { grid-template-columns: 1fr; gap: 9px; }
.sbk-time { text-align: left; display: flex; gap: 8px; align-items: center; }
.sbk-time b { display: inline; }
.sbk-odds { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.sbk-odd { min-width: 0; }
}
/* Legacy mini cards (live-markets preview) */
.sports-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
padding: 14px; margin-bottom: 12px; }
.sports-card .sp-league { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.sports-card .sp-teams { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.sports-card .sp-time { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.sp-odds { display: flex; gap: 8px; }
.sp-odd { flex: 1; min-height: 48px; border-radius: 10px; cursor: pointer;
background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .3);
color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
font-size: 12px; -webkit-tap-highlight-color: transparent; }
.sp-odd b { font-size: 17px; color: #4ade80; }
.sp-odd:active { transform: scale(.96); background: rgba(74, 222, 128, .2); }
.bet-card { cursor: pointer; }
.bet-card .gtitle { font-size: 13px; font-weight: 600; margin-top: 8px; }
.bet-card .gsub { font-size: 11px; color: var(--muted); margin-top: 2px; }
/* ---- Sports bet slip (modal) ---- */
#sportsbet-modal { padding: 4px 2px; }
.slip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.slip-head h2 { margin: 0; font-size: 18px; font-weight: 900; }
.slip-close { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border);
background: var(--bg); color: var(--muted); font-size: 17px; cursor: pointer; flex: none; }
.slip-close:active { transform: scale(.94); }
.slip-sel { background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
padding: 13px 14px; margin-bottom: 14px; }
.slip-league { font-size: 11px; color: var(--muted); text-transform: uppercase;
letter-spacing: .5px; margin-bottom: 5px; }
.slip-teams { font-size: 15.5px; font-weight: 800; margin-bottom: 9px; line-height: 1.45; }
.slip-teams .vs { color: var(--muted); font-weight: 600; font-size: 12.5px; margin: 0 5px; }
.slip-pick { display: flex; justify-content: space-between; align-items: center;
background: rgba(74,222,128,.07); border: 1px solid rgba(74,222,128,.25);
border-radius: 10px; padding: 9px 12px; }
.slip-pick .pk { font-size: 14px; font-weight: 800; color: #4ade80; }
.slip-pick .od { font-size: 21px; font-weight: 900; color: #ffd54a; font-variant-numeric: tabular-nums; }
#sportsbet-modal input[type="number"] { width: 100%; min-height: 48px; font-size: 18px;
padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border);
background: var(--bg); color: var(--text); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
#sportsbet-modal .sp-quick { display: flex; gap: 8px; margin-bottom: 6px; }
#sportsbet-modal .sp-quick button { flex: 1; min-height: 44px; border-radius: 8px;
background: var(--bg); border: 1px solid var(--border); color: var(--text);
font-size: 14px; font-weight: 700; cursor: pointer; }
#sportsbet-modal .sp-quick button:active { transform: scale(.94); background: var(--hover); }
.slip-row { display: flex; justify-content: space-between; align-items: center;
font-size: 13.5px; color: var(--muted); margin: 9px 0; }
.slip-row b { color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; }
.slip-row b.win { color: #4ade80; font-size: 19px; font-weight: 900; }
.slip-go { width: 100%; min-height: 52px; margin-top: 8px; border: 0; border-radius: 12px;
background: var(--accent-grad); color: #fff; font-size: 16px; font-weight: 900; cursor: pointer;
box-shadow: 0 4px 16px rgba(42,157,143,.35); }
.slip-go:active { transform: scale(.98); }
/* 体育项目筛选 chips */
.sp-league-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sp-league-tabs::-webkit-scrollbar { display: none; }
.sp-league-tab { flex: 0 0 auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #9fb2c5; font-size: 13px; font-weight: 700; border-radius: 22px; padding: 0 16px; cursor: pointer; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.sp-league-tab.on { background: var(--accent-grad); color: #fff; border-color: transparent;
box-shadow: 0 3px 12px rgba(42,157,143,.35); }
/* Sidebar legal footer: hidden by default, shown only in landscape */
.side-legal { display: none; padding: 10px 10px 4px; font-size: 11px; line-height: 1.6;
color: var(--muted, #888); text-align: center; }
.side-legal a { color: var(--muted, #888); text-decoration: none; }
.side-legal a:hover { color: var(--text); }
.side-legal-links { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 2px; }
/* Landscape: move footer into sidebar, hide bottom footer */
@media (orientation: landscape) and (min-width: 700px) {
#site-footer { display: none !important; }
.side-legal { display: block; }
}
/* ---- Global reduced-motion + tabular figures (2026-10-25) ---- */
/* Decorative loops stop and reveal durations collapse; results themselves
are never skipped — only their animation is shortened. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Tabular figures for money / multiplier / bet / countdown values so
digits never jitter in width while counting. */
.sb-num, [id$="-bal-val"], .sc-bal-val, .sc-betamt b, .livebet-row,
.sl-bal-val, .sl-bet-val, .sl-win-val, .lb-mult, .lb-payout,
.sg-count, .nn-countdown, .fp-countdown, .ld-countdown, .hl-countdown,
.fp-bignum, .ld-bignum, .hl-bignum {
font-variant-numeric: tabular-nums;
}
/* Language custom dropdown (batch 1: replaces the drawer's native select) */
.lang-dd { position: relative; display: block; }
.lang-dd-btn { display: flex; align-items: center; gap: 8px; width: 100%;
background: var(--panel2); border: 1px solid var(--border); color: var(--text);
border-radius: var(--r-full); padding: 10px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.lang-dd-btn .lang-dd-cur { flex: 1; text-align: left; }
.lang-dd-btn svg { flex: none; color: var(--muted); transition: transform .3s var(--spring); }
.lang-dd.open .lang-dd-btn svg { transform: rotate(180deg); }
.lang-dd-list { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 70;
background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
box-shadow: var(--sh-pop); padding: 6px; max-height: 46vh; max-height: 46dvh; overflow-y: auto;
opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none;
transition: opacity .2s ease, transform .3s var(--spring); }
.lang-dd.open .lang-dd-list { opacity: 1; transform: none; pointer-events: auto; }
.lang-dd-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
background: none; border: none; color: var(--text); font-size: 14px;
padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; min-height: 44px; }
.lang-dd-item:hover { background: var(--hover); }
.lang-dd-item .ck { margin-left: auto; color: var(--accent2); font-weight: 800; visibility: hidden; }
.lang-dd-item.sel .ck { visibility: visible; }
.lang-dd-item.sel { color: var(--accent2); font-weight: 700; }
/* Drawer personal block (batch 3: mobile entry into the profile view) */
.drawer-profile { display: flex; align-items: center; gap: 12px; width: calc(100% - 24px);
margin: 4px 12px 10px; padding: 12px 14px; text-align: left; cursor: pointer;
background: linear-gradient(135deg, rgba(108,92,231,.16), rgba(0,206,201,.10));
border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--text); }
.drawer-profile .sp-avatar { width: 44px; height: 44px; }
.drawer-profile .dp-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drawer-profile .dp-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-profile .dp-handle { font-size: 12px; color: var(--muted); }
.drawer-profile .dp-chev { color: var(--muted); flex: none; }
.bw-ticker .bw-profit { color: #e8c35a; font-weight: 800; }
/* Settings Center (batch 4) */
.set-card { margin-bottom: 14px; padding: 18px; }
.set-card h3 { margin: 0 0 10px; font-size: 16px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 10px 0; border-top: 1px solid var(--border); }
.set-row:first-of-type { border-top: none; }
.set-coins { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.set-coin { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
background: var(--panel2); border: 1px solid var(--border); color: var(--text);
border-radius: var(--r-full); font-size: 13px; font-weight: 600; cursor: pointer; min-height: 38px; }
.set-coin.sel { border-color: var(--accent2); color: var(--accent2); }
/* Content report sheet (batch 5) */
.report-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.report-reason { background: var(--panel2); border: 1px solid var(--border); color: var(--text);
border-radius: var(--r-md); padding: 13px 10px; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 48px; }
.report-reason.sel { border-color: var(--accent2); color: var(--accent2);
background: rgba(0,206,201,.08); }
/* Live placeholder card (batch 5: unified component, copy unchanged) */
.live-soon { grid-column: 1 / -1; text-align: center; padding: 42px 20px;
background: var(--panel); border: 1.5px dashed rgba(255,255,255,.16);
border-radius: var(--r-lg); color: var(--text); }
.live-soon-ic { font-size: 38px; margin-bottom: 12px; opacity: .75; }
.live-soon-ic svg { width: 38px; height: 38px; }
.live-soon-t { font-size: 16px; font-weight: 700; }
/* ============ fix3 (2026-11-02): light-theme compatibility sweep ============
Every rule below is scoped to [data-theme="light"] unless noted, so the
dark theme renders byte-identically. All were reproduced in a headless
light-theme render before fixing (white-on-white / dark-on-dark pairs). */
/* --- Splash / page loaders follow the theme (was: hard #0F212E full-screen
navy on light pages). The white hand-written wordmark gets the same
brightness(0) treatment the header/auth logos already use in light. --- */
[data-theme="light"] #splash, [data-theme="light"] #pageloader { background: var(--bg); }
[data-theme="light"] #splash img, [data-theme="light"] #pageloader img,
[data-theme="light"] .dragon-loader img, [data-theme="light"] .page-loader img { filter: brightness(0); }
[data-theme="light"] .splash-slogan .ss-base { color: rgba(26,32,48,.22); }
[data-theme="light"] #dragonloader > div:nth-child(2) { border-color: rgba(26,32,48,.18) !important; border-top-color: var(--accent) !important; }
/* --- Chat surfaces: the Stake-style chat block forced #0f1420 !important
while message text inherits var(--text) — dark-on-dark in light theme. --- */
[data-theme="light"] #chatlog, [data-theme="light"] .chatbox, [data-theme="light"] #livechat-msgs {
background: var(--panel) !important; border-color: var(--border) !important; }
[data-theme="light"] #chatlog .msg, [data-theme="light"] .chatbox .msg { border-bottom-color: rgba(15,33,46,.06); }
[data-theme="light"] #chatlog .msg .who, [data-theme="light"] .chatbox .msg .who { color: var(--accent); }
[data-theme="light"] #chatlog .msg .time, [data-theme="light"] .chatbox .msg .time { color: var(--muted); }
/* --- Live bets feed: header/game/loss text and row surfaces were
white-alpha (invisible on light); gold accents were too pale to read. --- */
[data-theme="light"] .livebets-head { color: var(--muted); }
[data-theme="light"] .livebet-row { background: rgba(15,33,46,.04); border-color: rgba(15,33,46,.09); }
[data-theme="light"] .livebet-row .lb-game { color: var(--text); }
[data-theme="light"] .livebet-row .lb-payout.lb-loss { color: var(--muted); }
[data-theme="light"] .livebets-empty { color: var(--muted); }
[data-theme="light"] .livebet-row .lb-user, [data-theme="light"] .livebet-row .lb-mult { color: #a87f14; }
/* --- Gold/green accent text that sits directly on the page background --- */
[data-theme="light"] .bw-item .bw-mult, [data-theme="light"] .bw-ticker .bw-profit { color: #a87f14; }
[data-theme="light"] .bw-item em { color: #0a9d3c; }
[data-theme="light"] .gfee-inline { color: #a87f14; background: rgba(201,162,39,.14); border-color: rgba(201,162,39,.45); }
[data-theme="light"] .sbk-odd .v { color: #a87f14; }
[data-theme="light"] .sp-odd b { color: #0a8a54; }
[data-theme="light"] .slip-pick .pk, [data-theme="light"] .slip-row b.win { color: #0a8a54; }
/* --- White-alpha surfaces that vanished on light backgrounds --- */
[data-theme="light"] .sbk-seg { background: var(--panel2); }
[data-theme="light"] .sbk-seg .n { background: rgba(15,33,46,.08); }
[data-theme="light"] .sbk-seg button.on .n { background: rgba(255,255,255,.22); }
[data-theme="light"] .sbk-ghead .cnt { background: var(--panel2); }
[data-theme="light"] .sp-league-tab:not(.on) { background: var(--panel2); border-color: var(--border); color: var(--muted); }
[data-theme="light"] .gd-stats { background: rgba(15,33,46,.04); }
[data-theme="light"] .doc-tbl th { background: var(--panel2); }
[data-theme="light"] .live-soon { border-color: rgba(15,33,46,.25); }
[data-theme="light"] .bcarousel { background: var(--panel); }
@media (min-width: 721px) {
[data-theme="light"] .bc-dots { background: var(--panel); }
}
[data-theme="light"] .ht-verify { color: var(--accent); }
/* --- Betting "Sports" header note (BOTH themes): the note inherits
.seclink's nowrap, so its ~500px min-content widened the whole page on
phones (measured layout width 598px on a 390px viewport). Let it wrap. --- */
.secrow > span { min-width: 0; }
#sports-src-note { white-space: normal; text-align: right; }
/* --- Footer clearance (BOTH themes): the floating tab bar (12px offset +
~62px bar + 28px raised centre button) plus the safe-area inset must
clear the footer links; the old flat 100px padding ignored the inset,
so on safe-area phones the bar ate the difference and half-covered the
About/Help/Privacy row. Same --eg-sa-bottom convention as the tab bar. --- */
@media (max-width: 720px) {
#site-footer { padding-bottom: calc(118px + max(env(safe-area-inset-bottom, 0px), var(--eg-sa-bottom, 0px))) !important; }
}
/* ============ fix4 (2026-11-02): game sub-pages follow the light theme ====
The main site got its light theme in fix3, but game sub-pages set their
own page backgrounds (body gradients / flat navy in per-page