/* 3XE Fuzhou Mahjong — responsive styles (phones in any orientation, tablets, desktop, TV) */
:root {
  --red: #b3121c; --red-deep: #5a0710; --ink: #1b0f0a; --gold: #f6c945; --gold-2: #d99a1c; --ivory: #f7f1e1;
  --blue: #1d5fc4; --blue-deep: #0b3f9e; --green: #17803d; --text: #fff6e0; --muted: #e8d3a8a0;
  --glass: rgba(28, 6, 8, 0.72); --glass-b: rgba(246, 201, 69, 0.28); --radius: 14px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', sans-serif;
  --serif: Georgia, 'Noto Serif SC', 'Songti SC', serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #1a0205; }
html, body { margin: 0; height: 100%; color: var(--text); font-family: var(--font); font-size: 15px; overscroll-behavior: none; }
body { min-height: 100dvh; }
#bg { position: fixed; inset: 0; background: var(--theme-page-bg, var(--art-bg, url('/assets/bg-dragon.svg'))) center/cover no-repeat; z-index: -1; transition: background-image .5s ease; }
#bg::before { content: ''; position: absolute; inset: -12%; opacity: var(--theme-particle-opacity, 0); pointer-events: none;
  background-image: radial-gradient(circle, var(--theme-particle, #fff) 0 2px, transparent 3px); background-size: 54px 54px; animation: themeDrift 16s linear infinite; }
#bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 0, 2, 0.38)); }
@keyframes themeDrift { to { transform: translate3d(54px, 108px, 0); } }

html[data-ui-theme='lunar-new-year'] { --theme-page-bg: url('/assets/art/themes/lunar-new-year.webp'); --red:#bf1425; --theme-particle:#ffd85e; --theme-particle-opacity:.28; }
html[data-ui-theme='valentine'] { --theme-page-bg: url('/assets/art/themes/valentine.webp'); --red:#b91f53; --gold:#ffd0dc; --theme-particle:#ff9fbd; --theme-particle-opacity:.28; }
html[data-ui-theme='fourth-july'] { --theme-page-bg: url('/assets/art/themes/fourth-july.webp'); --red:#b42035; --gold:#fff1c9; --theme-particle:#e8f0ff; --theme-particle-opacity:.22; }
html[data-ui-theme='halloween'] { --theme-page-bg: url('/assets/art/themes/halloween.webp'); --red:#963600; --gold:#ffad32; --theme-particle:#ff7a16; --theme-particle-opacity:.22; }
html[data-ui-theme='thanksgiving'] { --theme-page-bg: url('/assets/art/themes/thanksgiving.webp'); --red:#82320f; --gold:#ffc263; --theme-particle:#ffb351; --theme-particle-opacity:.20; }
html[data-ui-theme='christmas'] { --theme-page-bg: url('/assets/art/themes/christmas.webp'); --red:#a51e2c; --gold:#f3d788; --theme-particle:#fff; --theme-particle-opacity:.38; }
html[data-ui-theme='business-dark'] { --theme-page-bg: url('/assets/art/themes/business-dark.webp'); --red:#173d38; --red-deep:#0b1b1c; --gold:#d1b574; --text:#f5f1e8; --muted:#c4c1b8aa; --glass:rgba(14,18,22,.86); --glass-b:rgba(209,181,116,.28); }
html[data-ui-theme='business-light'] { color-scheme: light; --theme-page-bg: url('/assets/art/themes/business-light.webp'); --red:#1d5f69; --red-deep:#133c43; --gold:#946d27; --gold-2:#b18b49; --text:#202a2d; --muted:#536268; --glass:rgba(255,255,255,.89); --glass-b:rgba(123,96,48,.28); }
html[data-ui-theme='business-light'] #bg::after { background: linear-gradient(#f8f5ee33,#edf1ee99); }
html[data-ui-theme='business-light'] .topbar { background:linear-gradient(#fffffff5,#f5f1e8e8); box-shadow:0 3px 18px #37474f22; }
html[data-ui-theme='business-light'] .bottomnav { background:linear-gradient(#fffffff5,#f1eee6f5); }
html[data-ui-theme='business-light'] .dropdown, html[data-ui-theme='business-light'] .toast { background:#fffdf8f5; }
html[data-ui-theme='business-light'] .modal { background:linear-gradient(#fffdfaf8,#f1eee8f8); }
html[data-ui-theme='business-light'] .input { background:#fff; border-color:#68787c44; }
html[data-ui-theme='business-light'] .topnav a .ui-icon, html[data-ui-theme='business-light'] .icon-btn .ui-icon { color:#51666b; }
html[data-ui-theme='business-light'] .token-chip { background:linear-gradient(#fff8df,#e7d5a5); color:#684a13; }
html[data-ui-theme='business-dark'] .topbar { background:linear-gradient(#11171af2,#0e1316e8); }
html[data-ui-theme='business-dark'] .bottomnav { background:linear-gradient(#151b1ef5,#0b0f11f5); }
a { color: var(--gold); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); margin: 0.2em 0 0.5em; letter-spacing: 0.02em; }
h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; }
[hidden] { display: none !important; }
.muted { color: var(--muted); } .small { font-size: 0.85rem; } .center { text-align: center; justify-content: center; }
.row { display: flex; gap: 8px; align-items: center; } .row.end { justify-content: flex-end; margin-top: 12px; } .row.wrap { flex-wrap: wrap; }
.pos { color: #6be38a; } .neg { color: #ff7a6a; }

.boot { position: fixed; inset: 0; display: grid; place-items: center; align-content: center; gap: 24px; }
.boot img { width: min(420px, 80vw); }
.spinner { width: 42px; height: 42px; border: 4px solid #fff3; border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
body.offline::before { content: 'Reconnecting…'; position: fixed; top: calc(var(--safe-t) + 6px); left: 50%; transform: translateX(-50%); background: #c0392b; color: #fff; padding: 4px 14px; border-radius: 99px; z-index: 999; font-size: 0.8rem; }

/* ---------- buttons & inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 10px; border: 1px solid #ffffff2a;
  background: linear-gradient(#ffffff1c, #ffffff08); color: var(--text); font-weight: 600; min-height: 40px; transition: transform 0.08s, filter 0.2s; white-space: nowrap; }
.btn:hover { filter: brightness(1.15); } .btn:active { transform: translateY(1px) scale(0.98); } .btn:disabled { opacity: 0.5; pointer-events: none; }
.btn.primary { background: linear-gradient(#e0333d, #9c0f18); border-color: #ff8a7a66; box-shadow: 0 3px 0 #5a0710, 0 6px 14px #0006; }
.btn.gold { background: linear-gradient(#ffe38a, #d99a1c); color: #3a1a02; border-color: #fff4c0; box-shadow: 0 3px 0 #8a5a06; }
.btn.danger { background: linear-gradient(#7a1a1a, #4a0a0a); }
.btn.ghost { background: transparent; border-color: #ffffff22; }
.btn.win { background: radial-gradient(circle at 50% 30%, #ffe98a, #e8a410); color: #5a1a00; border: 2px solid #fff4c0; font-size: 1.15rem; box-shadow: 0 0 22px #ffd23a, 0 4px 0 #8a5a06; animation: pulse 1s infinite; }
.btn.claim { background: linear-gradient(#2a74e8, #0b3f9e); border-color: #9cc4ff88; box-shadow: 0 3px 0 #06245a; }
.btn.big { padding: 12px 22px; font-size: 1.05rem; min-height: 48px; }
.btn.sm { padding: 5px 10px; min-height: 30px; font-size: 0.85rem; border-radius: 8px; }
@keyframes pulse { 50% { transform: scale(1.06); box-shadow: 0 0 34px #ffd23a, 0 4px 0 #8a5a06; } }
.icon-btn { background: none; border: 0; font-size: 1.4rem; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; }
.icon-btn:hover { background: #ffffff14; }
.input { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid #ffffff30; background: #0006; color: var(--text); font: inherit; outline: none; }
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px #f6c94533; }
select.input { appearance: auto; }
.form { display: grid; gap: 12px; } .form label { display: grid; gap: 5px; font-size: 0.88rem; color: var(--muted); }
.field { display: grid; gap: 6px; font-size: 0.88rem; color: var(--muted); }
.check { display: flex !important; grid-auto-flow: column; gap: 8px; align-items: center; color: var(--text) !important; }
.check input { width: 20px; height: 20px; accent-color: var(--red); }
.seg { display: inline-flex; background: #0005; border-radius: 10px; padding: 3px; gap: 3px; border: 1px solid #ffffff1e; }
.seg.wrap { flex-wrap: wrap; } .seg button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; min-height: 36px; }
.seg button.on { background: linear-gradient(#e0333d, #9c0f18); color: #fff; }
.seg.small button { padding: 4px 9px; min-height: 30px; font-size: 0.85rem; }
.glass { background: var(--glass); border: 1px solid var(--glass-b); border-radius: var(--radius); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px #0008; }
.pill { padding: 3px 10px; border-radius: 99px; background: #ffffff18; font-size: 0.78rem; }
.pill.waiting { background: #1f7a3a; } .pill.playing, .pill.post { background: #8a5a06; }
.badge { position: absolute; top: -4px; right: -6px; background: #e3261a; color: #fff; font-size: 0.68rem; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; font-style: normal; }
.alert { background: #7a1a1a; padding: 8px 12px; border-radius: 8px; margin: 8px 0; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #777; } .dot.on { background: #3ddc6a; box-shadow: 0 0 6px #3ddc6a; }
.empty { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--muted); }

/* ---------- ranks ---------- */
.rank { font-size: 0.7rem; font-weight: 800; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.rank-bronze { background: linear-gradient(#e0a070, #8a5024); color: #2a1004; }
.rank-silver { background: linear-gradient(#f4f6fa, #9aa4b4); color: #1a2030; }
.rank-gold { background: linear-gradient(#fff0a0, #d9a01c); color: #3a2002; }
.rank-pro { background: linear-gradient(#8ad0ff, #1d5fc4); color: #fff; }
.rank-master { background: linear-gradient(#ff9ae0, #8a1ae0); color: #fff; box-shadow: 0 0 10px #c46aff; }
.rank-bot { background: #555; color: #ddd; }

/* ---------- avatars ---------- */
.avatar { --s: 44px; width: var(--s); height: var(--s); border-radius: 50%; display: inline-block; position: relative; flex: none; background: #0004; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar.frame-gold { box-shadow: 0 0 0 3px #f6c945, 0 0 12px #f6c945; }
.avatar.frame-jade { box-shadow: 0 0 0 3px #2ecc71, 0 0 12px #2ecc71; }
.avatar.frame-fire { box-shadow: 0 0 0 3px #ff5a1a, 0 0 16px #ff8a1a; animation: fire 1.2s infinite alternate; }
@keyframes fire { to { box-shadow: 0 0 0 3px #ffb01a, 0 0 22px #ff3a1a; } }

/* ---------- app shell ---------- */
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: calc(8px + var(--safe-t)) calc(14px + var(--safe-r)) 8px calc(14px + var(--safe-l));
  background: linear-gradient(#3a0408ee, #2a0306cc); border-bottom: 1px solid var(--glass-b); backdrop-filter: blur(8px); }
.brand { flex: none; display: grid; place-items: center; }
.brand img { width: clamp(130px, 12vw, 190px); height: 48px; object-fit: contain; display: block; filter: drop-shadow(0 4px 10px #0009); }
.topnav { display: flex; gap: 4px; flex: 1; justify-content: center; }
.topnav a { position: relative; padding: 8px 12px; border-radius: 10px; color: var(--text); display: flex; gap: 6px; align-items: center; font-weight: 600; font-size: 0.92rem; }
.topnav a.on, .topnav a:hover { background: #ffffff14; color: var(--gold); }
.ui-icon { width: 19px; height: 19px; flex: none; display: block; }
.topnav a .ui-icon { color: #d6b574; filter: drop-shadow(0 1px 3px #0008); transition: transform .18s ease, color .18s ease; }
.topnav a:hover .ui-icon, .topnav a.on .ui-icon { color: var(--gold); transform: translateY(-1px); }
.icon-btn .ui-icon { width: 22px; height: 22px; color: #e7d7b4; }
.top-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.token-chip { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border-radius: 99px; border: 1px solid #f6c94566; background: linear-gradient(#3a1a02, #1a0a00); font-weight: 800; color: var(--gold); }
.token-chip img { width: 26px; } .token-chip i { font-style: normal; background: var(--gold); color: #3a1a02; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.me-btn { background: none; border: 0; padding: 0; border-radius: 50%; }
.bottomnav { display: none; }
main#view { padding: 16px calc(16px + var(--safe-r)) calc(90px + var(--safe-b)) calc(16px + var(--safe-l)); max-width: 1280px; margin: 0 auto; }
#view.full { padding: 0; max-width: none; }
.dropdown { position: fixed; z-index: 200; min-width: 230px; background: #2a0508f5; border: 1px solid var(--glass-b); border-radius: 12px; padding: 8px; box-shadow: 0 12px 30px #000a; display: grid; }
.dropdown a, .dropdown > button { padding: 10px 12px; border-radius: 8px; color: var(--text); background: none; border: 0; text-align: left; }
.dropdown a:hover, .dropdown > button:hover { background: #ffffff12; }
.dd-head { display: flex; gap: 10px; align-items: center; padding: 6px 8px 10px; border-bottom: 1px solid #ffffff18; margin-bottom: 6px; }
.dd-head small { display: block; color: var(--muted); }
.dd-langs { display: flex; gap: 4px; padding: 6px 8px; } .dd-langs button { flex: 1; border: 1px solid #ffffff22; background: none; border-radius: 6px; padding: 5px 0; }
.dd-langs button.on { background: var(--red); }

@media (max-width: 1120px) and (min-width: 861px) {
  .topbar { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .brand img { width: 112px; height: 44px; }
  .topnav { gap: 1px; }
  .topnav a { gap: 4px; padding: 7px 6px; font-size: 0.8rem; }
  .topnav a .ui-icon { width: 17px; height: 17px; }
  .top-right { gap: 3px; }
}

@media (max-width: 860px) {
  .topnav { display: none; }
  .brand img { width: 128px; height: 38px; }
  .bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: linear-gradient(#2a0306f0, #1a0204); border-top: 1px solid var(--glass-b);
    padding: 4px var(--safe-r) calc(4px + var(--safe-b)) var(--safe-l); backdrop-filter: blur(8px); }
  .bottomnav a { flex: 1; display: grid; justify-items: center; padding: 6px 0; color: var(--muted); position: relative; font-size: 0.7rem; }
  .bottomnav a .nav-icon { width: 30px; height: 25px; display: grid; place-items: center; }
  .bottomnav a .ui-icon { width: 22px; height: 22px; stroke-width: 1.9; }
  .bottomnav a em { font-style: normal; } .bottomnav a.on { color: var(--gold); }
  .bottomnav .badge { right: calc(50% - 22px); top: 0; }
  .top-right .icon-btn { display: none; }
}

/* ---------- toasts & modals ---------- */
#toasts { position: fixed; top: calc(var(--safe-t) + 64px); right: 12px; z-index: 400; display: grid; gap: 8px; width: min(360px, calc(100vw - 24px)); pointer-events: none; }
.toast { pointer-events: auto; background: #2a0508f2; border: 1px solid var(--glass-b); border-left: 4px solid var(--gold); padding: 10px 12px; border-radius: 10px; box-shadow: 0 8px 22px #000a; animation: tin 0.25s ease-out; }
.toast.error { border-left-color: #ff4a3a; } .toast.out { opacity: 0; transform: translateX(30px); transition: 0.3s; }
.toast-actions { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }
@keyframes tin { from { opacity: 0; transform: translateX(30px); } }
.modal-wrap { position: fixed; inset: 0; z-index: 300; background: #000a; display: grid; place-items: center; padding: 16px; animation: fin 0.2s; overflow-y: auto; }
.modal-wrap.out { opacity: 0; transition: 0.2s; }
@keyframes fin { from { opacity: 0; } }
.modal { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: linear-gradient(#3a060bf8, #22030af8); border: 1px solid var(--glass-b);
  border-radius: 16px; padding: 22px; box-shadow: 0 20px 50px #000; animation: pop 0.22s cubic-bezier(0.3, 1.4, 0.6, 1); }
.modal.narrow { width: min(420px, 100%); } .modal.wide { width: min(760px, 100%); }
@keyframes pop { from { transform: scale(0.9); opacity: 0; } }
.modal-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 1.6rem; color: var(--muted); z-index: 2; }

/* ---------- login ---------- */
.login-page { min-height: 100dvh; display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: 24px; align-items: center; padding: calc(20px + var(--safe-t)) 5vw calc(20px + var(--safe-b)); max-width: 1200px; margin: 0 auto; }
.login-art { display: grid; place-items: center; }
.login-emblem { width: min(520px, 42vw); filter: drop-shadow(0 20px 40px #000c); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-14px) rotate(2deg); } }
.login-card { padding: 26px; display: grid; gap: 12px; }
.login-logo { width: 100%; max-width: 360px; margin: 0 auto; display: block; }
.tagline { text-align: center; color: var(--muted); margin: 0; }
.lang-pills { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.lang-pills button { border: 1px solid #ffffff26; background: #0003; padding: 4px 10px; border-radius: 99px; font-size: 0.8rem; }
.lang-pills button.on { background: var(--red); border-color: var(--gold); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: #0005; border-radius: 10px; padding: 3px; }
.tabs button { border: 0; background: none; padding: 9px; border-radius: 8px; font-weight: 700; color: var(--muted); }
.tabs button.on { background: linear-gradient(#e0333d, #9c0f18); color: #fff; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.8rem; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #ffffff22; }
.social { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.social-btn { background: #fff; color: #222; border: 0; } .social-btn.x, .social-btn.apple { background: #000; color: #fff; border: 1px solid #444; }
.social-btn.facebook { background: #1877f2; color: #fff; } .social-btn.facebook svg path { fill: #fff; }
@media (max-width: 760px) {
  .login-page { grid-template-columns: 1fr; padding-top: calc(10px + var(--safe-t)); }
  .login-art { display: none; }
}

/* ---------- lobby ---------- */
.page { display: grid; gap: 16px; }
.hero { background-image: linear-gradient(90deg, #1c0407ee 25%, #1c040788), var(--art-lobby, none); background-size: cover; background-position: center; }
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 20px 26px; min-height: 200px; }
.hero-dragon { width: clamp(120px, 22vw, 240px); filter: drop-shadow(0 10px 20px #000a); animation: float 7s ease-in-out infinite; }
.hero h1 { font-size: clamp(1.4rem, 3.4vw, 2.4rem); background: linear-gradient(#fff5c0, #f6c945 50%, #d08a10); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
.hero p { color: var(--muted); margin: 4px 0 14px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.has-art-lobby .hero { min-height: 270px; grid-template-columns: minmax(38%, 1fr) minmax(360px, .8fr); background-image: linear-gradient(90deg, transparent 28%, #12030588 55%, #120305ed 82%), var(--art-lobby); background-position: center; }
.has-art-lobby .hero .hero-dragon, .has-art-lobby .hero .lantern { display: none; }
.has-art-lobby .hero .hero-text { grid-column: 2; padding: 18px; text-shadow: 0 2px 12px #000; }
.lantern { position: absolute; width: 46px; top: -8px; animation: sway 4s ease-in-out infinite; transform-origin: top center; opacity: 0.95; }
.lantern.l1 { right: 26px; } .lantern.l2 { right: 86px; width: 36px; animation-delay: -1.5s; }
@keyframes sway { 50% { transform: rotate(5deg); } }
.announce { background: linear-gradient(90deg, #8a5a06, #5a0710); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--glass-b); }
.lobby-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.panel { padding: 16px; } .panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.panel-head h2 { margin: 0; }
.room-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.room-card { text-align: left; background: linear-gradient(#ffffff12, #ffffff05); border: 1px solid #ffffff1c; border-radius: 12px; padding: 12px; display: grid; gap: 8px; transition: 0.15s; }
.room-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.rc-top { display: flex; justify-content: space-between; gap: 6px; align-items: center; } .rc-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-seats { display: flex; gap: 6px; } .empty-seat { width: 30px; height: 30px; border-radius: 50%; border: 2px dashed #ffffff40; display: inline-block; }
.rc-meta { display: flex; gap: 10px; font-size: 0.8rem; color: var(--muted); } .rc-meta .code { margin-left: auto; font-family: monospace; }
.rc-meta .ante { color: var(--gold); }
.side { display: grid; gap: 12px; }
.daily { display: flex; align-items: center; gap: 10px; } .daily img { width: 40px; animation: spin3d 3s linear infinite; } .daily div { flex: 1; display: grid; }
@keyframes spin3d { 50% { transform: rotateY(180deg); } }
.friend-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.fs-item { background: none; border: 0; display: grid; justify-items: center; gap: 3px; width: 60px; position: relative; }
.fs-item small { font-size: 0.7rem; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-item i { position: absolute; top: 0; right: 4px; font-style: normal; }
.link-card { display: flex; align-items: center; gap: 10px; color: var(--text); } .link-card span { margin-left: auto; font-size: 1.4rem; color: var(--gold); }
.create-form .pin-input { font-size: 1.6rem; letter-spacing: 0.5em; text-align: center; font-family: monospace; }
@media (max-width: 860px) {
  .lobby-grid { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; text-align: center; padding: 16px; }
  .hero-dragon { width: 120px; margin: 0 auto; }
  .hero-actions { justify-content: center; } .hero-actions .btn { flex: 1 1 140px; }
  .lantern { display: none; }
  .has-art-lobby .hero { grid-template-columns: 1fr; min-height: 310px; align-items: end; background-image: linear-gradient(0deg, #120305ef 0%, #12030588 48%, transparent 78%), var(--art-lobby); background-position: 36% center; }
  .has-art-lobby .hero .hero-text { grid-column: 1; padding: 10px 0 0; }
}

/* ---------- tokens / promo ---------- */
.coin-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 16px; }
.rain-coin { position: absolute; top: -40px; animation: rain linear forwards; }
@keyframes rain { to { transform: translateY(620px) rotate(540deg); opacity: 0.2; } }
.buy-tokens h2, .promo h2 { text-align: center; } .h-coin { width: 30px; vertical-align: middle; }
.packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0; }
.package { position: relative; display: grid; justify-items: center; gap: 2px; padding: 16px 8px 12px; border-radius: 14px; border: 1px solid #f6c94555;
  background: linear-gradient(#4a1a04, #220a00); animation: pop 0.4s calc(var(--i) * 0.07s) both; transition: 0.15s; }
.package:hover { transform: translateY(-3px) scale(1.03); border-color: var(--gold); box-shadow: 0 0 20px #f6c94566; }
.package b { font-size: 1.6rem; color: var(--gold); } .package .price { margin-top: 6px; background: linear-gradient(#e0333d, #9c0f18); padding: 4px 12px; border-radius: 99px; font-weight: 800; }
.package.featured { border-color: var(--gold); }
.ribbon { position: absolute; top: -9px; background: var(--gold); color: #3a1a02; font-size: 0.7rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.stack { position: relative; height: 44px; width: 60px; } .stack img { position: absolute; width: 38px; left: calc(10px + var(--k) * 3px); bottom: calc(var(--k) * 5px); }
.promo { text-align: center; display: grid; gap: 10px; justify-items: center; }
.promo-art { width: calc(100% + 44px); height: 190px; margin: -22px -22px 4px; border-radius: 16px 16px 26px 26px; background-position: center 62%; background-size: cover; box-shadow: inset 0 -34px 34px #22030af8, 0 8px 24px #0008; }
.promo.has-promo-art h2 { margin-top: -12px; position: relative; z-index: 1; }
.promo-dragon { width: 150px; animation: float 4s ease-in-out infinite; }
.promo-balance { display: flex; align-items: center; gap: 10px; font-size: 2.2rem; font-weight: 900; color: var(--gold); } .promo-balance img { width: 48px; animation: spin3d 2s linear infinite; }
.promo-gifts { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; } .promo-gifts img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 4px 8px #000b); animation: bob 1.4s ease-in-out infinite; } .promo-gifts img:nth-child(2n) { animation-delay: -0.7s; }
@keyframes bob { 50% { transform: translateY(-8px) scale(1.1); } }

/* ---------- profile modal / generic lists ---------- */
.profile-modal { display: grid; gap: 14px; }
.pm-head { display: flex; gap: 14px; align-items: center; } .pm-head h2 { margin: 0 0 4px; } .bio { margin: 6px 0 0; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .stats div { background: #0004; border-radius: 10px; padding: 8px; text-align: center; display: grid; }
.stats b { font-size: 1.2rem; color: var(--gold); } .stats small { color: var(--muted); font-size: 0.72rem; }
.pm-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .pm-actions.subtle { opacity: 0.8; }
.recent { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; } .recent li { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; } .recent li b { margin-left: auto; }
details summary { cursor: pointer; color: var(--gold); }
.list { display: grid; gap: 8px; }
.list-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #ffffff0a; border: 1px solid #ffffff12; }
.list-row .grow { flex: 1; min-width: 0; } .list-row .grow b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-row .grow small { color: var(--muted); }

/* ---------- tiles (carved ivory face, ivory body, blue 3XE back) ---------- */
.tile { --w: 40px; --e: calc(var(--w) * 0.13); position: relative; display: inline-block; width: var(--w); height: calc(var(--w) * 1.36); flex: none;
  border-radius: calc(var(--w) * 0.14); user-select: none;
  background: linear-gradient(180deg, #f3ead3 0%, #dccca6 58%, var(--tb1, #2f7fe8) 60%, var(--tb2, #0b3f9e) 100%);
  box-shadow: 0 calc(var(--w) * 0.05) calc(var(--w) * 0.12) #000a, inset 0 -1px 0 #0006; }
.tile .face { position: absolute; inset: 0 0 var(--e) 0; border-radius: calc(var(--w) * 0.13); overflow: hidden;
  background: var(--art-tile-face, linear-gradient(162deg, #fffef9 0%, #f8f1df 42%, #ede2c6 100%)) center / 100% 100% no-repeat;
  box-shadow: inset 0 calc(var(--w) * 0.035) 0 #ffffffd0, inset calc(var(--w) * 0.03) 0 calc(var(--w) * 0.04) #ffffff90,
    inset calc(var(--w) * -0.03) calc(var(--w) * -0.05) calc(var(--w) * 0.08) #a08a5a66; border: 1px solid #c8b58a; }
.tile .face::after { content: ''; position: absolute; inset: 1.5% 2%; background: center / contain no-repeat; }
.tile.back { background: linear-gradient(180deg, var(--tb1, #2f7fe8), var(--tb2, #0b3f9e)); }
.tile.back .face { border-color: #06246a;
  background: var(--art-tile-back, radial-gradient(ellipse at 40% 25%, #9ccaff 0%, var(--tb1, #2f7fe8) 38%, var(--tb2, #0b3f9e) 100%)) center / 100% 100% no-repeat;
  box-shadow: inset 0 calc(var(--w) * 0.04) 0 #ffffff70, inset 0 0 0 calc(var(--w) * 0.05) #ffffff22, inset 0 calc(var(--w) * -0.06) calc(var(--w) * 0.1) #0006; }
.tile.back .face::after { content: '3XE'; inset: 0; display: grid; place-items: center; color: #fff8e0; font: 900 calc(var(--w) * 0.33) / 1 Georgia, serif;
  text-shadow: 0 1px 0 #c9a24a, 0 2px 3px #0008; background: none; }
.has-art-tile-back .tile.back .face::after { content: none; }
.tile.gold .face { box-shadow: 0 0 0 2px var(--gold) inset, inset 0 0 calc(var(--w) * 0.25) #ffd23a99, inset 0 calc(var(--w) * 0.035) 0 #fff; background-color: #fff6cf; }
.tile.gold { box-shadow: 0 0 calc(var(--w) * 0.28) #ffd23acc, 0 calc(var(--w) * 0.05) calc(var(--w) * 0.12) #000a; }
.tile.gold::after { content: '金'; position: absolute; top: calc(var(--w) * -0.12); right: calc(var(--w) * -0.12); background: linear-gradient(#ffe98a, #d99a1c); color: #6a1a00; z-index: 2;
  font: 900 calc(var(--w) * 0.26) / 1 var(--serif); width: calc(var(--w) * 0.42); height: calc(var(--w) * 0.42); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 1px 3px #000a; }
.tile.xs { --w: 16px; box-shadow: none; } .tile.xs.gold::after { display: none; }
.tile.sm { --w: 26px; } .tile.md { --w: 42px; }
.tile.dc { --w: var(--dw, 24px); } .tile.dc.gold::after { display: none; }
.tile.dc.last .face { box-shadow: 0 0 0 2px #ff4a3a inset, 0 0 12px #ff4a3a; animation: lastd 1s infinite alternate; }
@keyframes lastd { to { box-shadow: 0 0 0 2px #ffd23a inset, 0 0 16px #ffd23a; } }
.tb-red { --tb1: #e0333d; --tb2: #7a0a10; } .tb-green { --tb1: #2ecc71; --tb2: #0a5a2a; }
.tb-black { --tb1: #555; --tb2: #0a0a0a; } .tb-gold { --tb1: #ffe98a; --tb2: #b8700a; }

/* ---------- table ---------- */
body.fullview { overflow: hidden; }
.table { position: fixed; inset: 0; display: grid; overflow: hidden; transition: padding-right .25s ease;
  grid-template-columns: minmax(96px, 17vw) 1fr minmax(96px, 17vw);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: 'bar bar bar' 'left top right' 'left board right' 'me me me';
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); gap: 4px; --hw: 44px; --dw: 22px; --b: 60px; }
.table::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#0000, #0007), var(--theme-table-art, var(--art-bg, url('/assets/bg-dragon.svg'))) center/cover; }
/* the felt table sits under the board: wooden rim + gold trim, or the AI 'table-felt' art when present */
.board::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); transform: translate(-50%, -50%);
  border-radius: 28px; background: var(--felt, radial-gradient(circle at 50% 45%, #1a8a54 0%, #0f6b40 45%, #08452a 100%));
  box-shadow: inset 0 0 50px #000b, inset 0 0 0 2px #ffffff14, 0 0 0 9px #4a1e0a, 0 0 0 11px #c9a24a, 0 0 0 13px #3a1406, 0 18px 40px #000d; }
.has-art-felt .board::before { background: var(--theme-felt, var(--art-felt)) center/cover; box-shadow: 0 18px 40px #000d; }
.board::after { content: '福'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 900 min(40cqw, 40cqh) / 1 var(--serif); color: #ffffff08; pointer-events: none; }
.theme-jade { --felt: radial-gradient(circle, #20a07a, #0a4a3a); } .theme-night { --felt: radial-gradient(circle, #24357a, #0a1240); }
.theme-sakura { --felt: radial-gradient(circle, #d0608a, #7a2046); } .theme-gold { --felt: radial-gradient(circle, #c9971b, #6a4a02); }
.theme-lunar-new-year { --theme-table-art:url('/assets/art/themes/lunar-new-year.webp'); --theme-felt:radial-gradient(circle,#9c1722,#430408); }
.theme-valentine { --theme-table-art:url('/assets/art/themes/valentine.webp'); --theme-felt:radial-gradient(circle,#9d3457,#401225); }
.theme-fourth-july { --theme-table-art:url('/assets/art/themes/fourth-july.webp'); --theme-felt:radial-gradient(circle,#243b67,#0d172d); }
.theme-halloween { --theme-table-art:url('/assets/art/themes/halloween.webp'); --theme-felt:radial-gradient(circle,#5d3313,#1a1007); }
.theme-thanksgiving { --theme-table-art:url('/assets/art/themes/thanksgiving.webp'); --theme-felt:radial-gradient(circle,#6d3516,#2c160b); }
.theme-christmas { --theme-table-art:url('/assets/art/themes/christmas.webp'); --theme-felt:radial-gradient(circle,#175742,#08251d); }
.theme-business-light { --theme-table-art:url('/assets/art/themes/business-light.webp'); --theme-felt:radial-gradient(circle,#eee8db,#c7bda9); color:#1f2b2e; }
.theme-business-dark { --theme-table-art:url('/assets/art/themes/business-dark.webp'); --theme-felt:radial-gradient(circle,#2e3435,#111516); }
.tbl-bar { grid-area: bar; display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: linear-gradient(#000a, #0000); z-index: 5; }
.tbl-title { display: grid; min-width: 0; flex: 1; } .tbl-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.tbl-title small { color: var(--muted); font-size: 0.72rem; }
.tbl-tools { display: flex; gap: 4px; }
.tool { position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid #ffffff22; background: #0006; display: grid; place-items: center; font-size: 1.05rem; }
.tool .ui-icon { width:20px; height:20px; }
.tool.on { background: linear-gradient(#2ecc71, #0a7a3a); border-color: #9fffc4; } .tool.danger { background: #5a0a0a; }
.tool.media-tool.off { color:#b8aaa5; }
.tool.media-tool.off::after { content:''; position:absolute; width:24px; height:2px; border-radius:2px; background:#ff665c; transform:rotate(-43deg); box-shadow:0 0 2px #000; }
.token-mini { width: auto; padding: 0 8px; display: flex; gap: 4px; color: var(--gold); font-weight: 800; } .token-mini img { width: 20px; }
.mobile-more { display:grid; }
.mobile-actions { display:grid; gap:8px; margin-top:14px; } .mobile-actions .btn .ui-icon { width:19px; height:19px; }
.volume-range { width:100%; accent-color:var(--gold); }

.seat-slot { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; z-index: 3; }
.pos-top { grid-area: top; } .pos-left { grid-area: left; } .pos-right { grid-area: right; }
.table[data-n='2'] .pos-left, .table[data-n='2'] .pos-right, .table[data-n='3'] .pos-top { display: none; }
.seat { display: grid; justify-items: center; gap: 4px; text-align: center; max-width: 100%; }
.pos-top .seat { grid-template-columns: auto auto; grid-template-areas: 'b m' 'x x'; align-items: center; column-gap: 10px; text-align: left; justify-items: start; }
.pos-top .seat .bubble { grid-area: b; } .pos-top .seat .seat-meta { grid-area: m; } .pos-top .seat .exposed { grid-area: x; justify-self: center; }
.seat-meta { display: grid; gap: 3px; justify-items: inherit; min-width: 0; }
.seat-name { font-weight: 700; font-size: 0.88rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-sub { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; justify-content: inherit; font-size: 0.72rem; }
.seat-sub .st { color: var(--muted); } .tour { color: var(--gold); font-weight: 700; }
.opp-hand { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--muted); }
.mini-back { width: 12px; height: 16px; border-radius: 2px; background: linear-gradient(#4aa3ff, #0b3f9e); border: 1px solid #f7f1e1; }
.exposed { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 100%; }
.meld { display: inline-flex; gap: 1px; padding: 2px; background: #0004; border-radius: 4px; }
.flowers { display: inline-flex; align-items: center; gap: 1px; padding: 2px 4px; background: #5a3a0044; border-radius: 4px; } .flowers b { font-size: 0.7rem; color: var(--gold); margin-left: 3px; }
.seat.empty .empty-bubble { display: grid; place-items: center; font-size: 1.6rem; color: #fff6; border: 2px dashed #ffffff44; background: #0003; }

.bubble { --p: 0; position: relative; width: var(--b); height: var(--b); border-radius: 50%; padding: 3px; flex: none; cursor: pointer; transition: width 0.3s, height 0.3s; }
.bubble .avatar { width: 100%; height: 100%; }
.bubble.turn { background: conic-gradient(#ffd23a calc(var(--p) * 360deg), #ffffff22 0); box-shadow: 0 0 18px #ffd23a88; }
.bubble.turn .avatar { box-shadow: 0 0 0 2px #1a0204; }
.vid-slot { position: absolute; inset: 3px; border-radius: 50%; overflow: hidden; pointer-events: none; }
.vid-slot video { width: 100%; height: 100%; object-fit: cover; } video.mirror { transform: scaleX(-1); }
.bubble.has-video { width: calc(var(--b) * 1.55); height: calc(var(--b) * 1.55); } .bubble.has-video .avatar { opacity: 0; }
.dealer-chip, .wind-chip, .mic-chip { position: absolute; font-style: normal; font-weight: 900; font-family: var(--serif); display: grid; place-items: center; border-radius: 50%; box-shadow: 0 1px 3px #000; }
.dealer-chip { top: -4px; left: -4px; width: 22px; height: 22px; background: linear-gradient(#ffe98a, #d99a1c); color: #7a1a00; font-size: 0.8rem; }
.wind-chip { bottom: -4px; left: -4px; width: 20px; height: 20px; background: #f7f1e1; color: #1a1f3a; font-size: 0.72rem; }
.mic-chip { bottom: -4px; right: -4px; width: 20px; height: 20px; background: #2ecc71; font-size: 0.6rem; }
.mic-chip .ui-icon { width:11px; height:11px; color:#071b0d; stroke-width:2.5; }
.rtc-chip { position:absolute; top:-2px; right:-2px; width:10px; height:10px; border-radius:50%; background:#f0a62b; border:2px solid #19080a; box-shadow:0 0 6px #f0a62b; }
.rtc-chip.connected { background:#39d66f; box-shadow:0 0 7px #39d66f; }
.rtc-chip.failed, .rtc-chip.disconnected, .rtc-chip.closed { background:#ff5147; box-shadow:0 0 7px #ff5147; }

.board { grid-area: board; position: relative; display: grid; place-items: center; min-height: 0; min-width: 0; }
.board { container-type: size; } .board-inner { position: relative; z-index: 1; width: calc(min(100cqw, 100cqh) - 16px); height: calc(min(100cqw, 100cqh) - 16px); }
.pond { position: absolute; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2px; justify-content: center; }
.pond-me { left: 20%; right: 20%; top: 68%; bottom: 1%; }
.pond-top { left: 20%; right: 20%; top: 1%; bottom: 68%; align-content: flex-end; }
.pond-left { left: 1%; right: 69%; top: 20%; bottom: 20%; align-content: center; }
.pond-right { left: 69%; right: 1%; top: 20%; bottom: 20%; align-content: center; }
.center-info { position: absolute; left: 32%; right: 32%; top: 32%; bottom: 32%; display: grid; place-items: center; align-content: center; gap: 4px; background: #0005; border-radius: 16px; border: 1px solid #f6c94544; padding: 4px; text-align: center; }
.gold-box { display: grid; justify-items: center; gap: 3px; } .gold-box span { font-size: 0.72rem; color: var(--gold); font-weight: 800; }
.gold-box .tile { --w: min(42px, 9cqmin); }
.ci-stats { display: flex; gap: 8px; font-size: 0.72rem; color: var(--muted); flex-wrap: wrap; justify-content: center; }
.ci-turn { font-size: 0.74rem; font-weight: 700; display: flex; gap: 4px; align-items: center; } .ci-turn.mine { color: var(--gold); }
.dir { display: inline-block; color: var(--gold); } .dir-me { transform: rotate(90deg); } .dir-top { transform: rotate(-90deg); } .dir-left { transform: rotate(180deg); }
.board-overlay { position: absolute; inset: 0; display: grid; place-items: center; z-index: 6; padding: 8px; overflow-y: auto; }

.wait-panel { width: min(460px, 100%); padding: 16px; display: grid; gap: 10px; text-align: center; }
.wait-panel h3 { margin: 0; } .wait-panel h3 small { color: var(--muted); font-family: monospace; }
.countdown { font-size: 1.5rem; font-weight: 900; color: var(--gold); animation: pulse 1s infinite; }
.share-box { display: flex; gap: 6px; } .share-box .input { font-size: 0.78rem; padding: 7px; }
.pin-note { background: #8a5a0655; border: 1px solid #f6c94566; padding: 8px; border-radius: 10px; font-size: 0.85rem; }
.pin-big { font-family: monospace; font-size: 1.5rem; letter-spacing: 0.3em; color: var(--gold); display: block; }

.post-panel { width: min(560px, 100%); display: grid; gap: 10px; }
.st-post .board-inner { opacity: 0.2; }
.post-panel .glass, .wait-panel.glass { background: rgba(26, 4, 7, 0.94); }
.result { padding: 14px; text-align: center; display: grid; gap: 8px; animation: pop 0.3s; } .result h2 { margin: 0; font-size: 1.15rem; }
.pot-win { color: var(--gold); font-weight: 800; margin: 0; }
.win-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.score-list { display: grid; gap: 4px; } .score-list div { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; background: #0003; }
.score-list div.w { background: #8a5a0666; } .score-list b { margin-left: auto; }
.ad-box { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; cursor: pointer; border: 1px solid var(--glass-b); }
.ad-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-label { position: absolute; z-index: 4; top: 8px; right: 8px; background: #000c; color: #fff; padding: 3px 8px; border: 1px solid #ffffff33; border-radius: 6px; font-size: 0.75rem; }
.house-ad { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 16px; background: radial-gradient(circle at 30% 50%, #a3121b, #2a0306); }
.ha-dragon { width: 42%; animation: float 3s ease-in-out infinite; }
.ha-text { position: relative; z-index: 2; display: grid; gap: 8px; }
.ha-text b { font-size: 1.55rem; line-height: 1; color: #ffe18a; font-family: var(--serif); text-shadow: 0 2px 8px #000; }
.ha-text span { font-size: 1.35rem; filter: drop-shadow(0 2px 3px #000); }
.ha-text small { color: #fff; font-size: 0.84rem; line-height: 1.38; text-shadow: 0 1px 4px #000; }
.post-actions { display: flex; gap: 10px; justify-content: center; padding: 10px; flex-wrap: wrap; } .post-actions p { margin: 4px; }

.me-area { grid-area: me; display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'info exposed' 'hand hand' 'actions actions'; gap: 4px 10px; padding: 4px 8px 6px; align-items: center; z-index: 4; }
.me-info { grid-area: info; display: flex; gap: 8px; align-items: center; } .me-info .bubble { --b: 46px; }
.me-exposed { grid-area: exposed; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; min-width: 0; }
.hand-wrap { grid-area: hand; display: flex; justify-content: center; min-width: 0; }
.hand { display: flex; gap: 2px; align-items: flex-end; justify-content: center; }
.hand.two-rows { flex-wrap: wrap; max-width: calc(var(--hw) * 9 + 40px); }
.hand .tile { --w: var(--hw); cursor: pointer; transition: transform 0.12s; }
.hand.active .tile:hover { transform: translateY(-6px); }
.hand .tile.sel { transform: translateY(-14px); } .hand .tile.sel .face { box-shadow: 0 0 0 2px #ff4a3a, 0 0 14px #ff4a3a; }
.hand .tile.drawn { animation: drawin 0.3s ease-out; } .hand .gap { width: calc(var(--hw) * 0.35); }
@keyframes drawin { from { transform: translateY(-30px); opacity: 0; } }
.actions { grid-area: actions; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; min-height: 42px; }
.hint { color: var(--muted); font-size: 0.8rem; } .hint.waits { display: flex; gap: 2px; align-items: center; }
.claim-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; background: #000a; border: 1px solid var(--gold); padding: 8px 10px; border-radius: 12px; animation: pop 0.2s; position: relative; }
.claim-box small { color: var(--muted); }
.chow-opt .tile { margin: 0 -1px; }
.timer-bar { position: relative; width: 70px; height: 5px; border-radius: 3px; background: #ffffff22; overflow: hidden; } .timer-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff4a3a, #ffd23a); width: 100%; }
.tour-badge { background: linear-gradient(#ffe98a, #d99a1c); color: #5a1a00; font-weight: 900; padding: 4px 10px; border-radius: 99px; font-size: 0.8rem; }

.chat-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 92vw); background: var(--glass); border-left: 1px solid var(--glass-b); z-index: 20; box-shadow:-12px 0 30px #0007; backdrop-filter:blur(18px);
  display: grid; grid-template-rows: auto 1fr auto auto; transform: translateX(105%); transition: transform 0.25s; padding: var(--safe-t) var(--safe-r) var(--safe-b) 0; }
.chat-open .chat-drawer { transform: none; }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid #ffffff18; }
.chat-head > div { display:grid; gap:2px; } .chat-head b { display:flex; align-items:center; gap:7px; } .chat-head b .ui-icon { width:18px; } .chat-head small { color:var(--muted); font-size:.7rem; }
.chat-list { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.msg { display: flex; gap: 8px; align-items: flex-start; } .msg p { margin: 2px 0 0; background: #ffffff14; padding: 6px 10px; border-radius: 4px 12px 12px 12px; word-break: break-word; }
.msg.mine { flex-direction: row-reverse; text-align: right; } .msg.mine p { background: #9c0f18; border-radius: 12px 4px 12px 12px; }
.msg b { font-size: 0.75rem; color: var(--gold); } .msg b time { color:var(--muted); font:500 .64rem var(--font); margin-left:4px; } .msg-av { background: none; border: 0; padding: 0; }
.msg.sys { justify-content: center; font-size: 0.76rem; color: var(--muted); text-align: center; }
.tr-toggle { background: none; border: 0; color: #9cc4ff; font-size: 0.7rem; padding: 2px 0; }
.quick { display: flex; gap: 6px; overflow-x: auto; padding: 6px 10px; } .quick button { flex: none; border: 1px solid #ffffff22; background: #ffffff0c; border-radius: 99px; padding: 5px 10px; font-size: 0.78rem; }
.chat-form { display: flex; gap: 6px; padding: 8px 10px; } .chat-form .input { min-width:0; }
.speech { position: fixed; z-index: 30; max-width: 180px; background: #fff; color: #222; padding: 6px 10px; border-radius: 12px; font-size: 0.82rem; box-shadow: 0 4px 12px #0008; animation: pop 0.2s; pointer-events: none; }

.gift-targets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.gt { background: none; border: 2px solid transparent; border-radius: 12px; padding: 6px; display: grid; justify-items: center; gap: 2px; min-width: 70px; }
.gt.on { border-color: var(--gold); background: #f6c94522; } .gt small { font-size: 0.7rem; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 10px 0; }
.gift { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; border: 1px solid #ffffff22; background: #ffffff0c; }
.gift:hover { border-color: var(--gold); transform: scale(1.04); } .gift span { font-size: 2rem; } .gift small { font-size: 0.72rem; text-align: center; } .gift b { color: var(--gold); font-size: 0.8rem; }
.invite-list { display: grid; gap: 8px; } .inv-row { display: flex; align-items: center; gap: 10px; } .inv-row span { flex: 1; }

/* fx layer */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 250; overflow: hidden; }
.fx { position: absolute; transform: translate(-50%, -50%); line-height: 1; filter: drop-shadow(0 4px 6px #0008); }
.fx-banner { font-family: var(--serif); font-weight: 900; white-space: nowrap; -webkit-text-stroke: 2px #3a0a00; text-shadow: 0 4px 0 #3a0a00, 0 0 30px #ff8a1a; }
.callout { display: inline-block; padding: 8px 18px; border-radius: 14px; font: 900 1.6rem var(--serif); background: linear-gradient(#2a74e8, #0b3f9e); color: #fff; border: 2px solid #fff; white-space: nowrap; }
.callout.win { background: linear-gradient(#ffe98a, #d99a1c); color: #5a1a00; font-size: 2rem; } .callout.pung { background: linear-gradient(#e0333d, #9c0f18); } .callout.chow { background: linear-gradient(#2ecc71, #0a7a3a); }

/* table: portrait phones */
@media (min-width: 900px) {
  .table.chat-open { padding-right:calc(360px + var(--safe-r)); }
}
@media (orientation: portrait) {
  .table { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: 'bar bar bar' 'left top right' 'board board board' 'me me me'; --b: 46px; gap: 2px; }
  .table[data-n='2'] { grid-template-areas: 'bar bar bar' 'top top top' 'board board board' 'me me me'; }
  .table[data-n='3'] { grid-template-areas: 'bar bar bar' 'left right right' 'board board board' 'me me me'; grid-template-columns: 1fr 1fr 1fr; }
  .table[data-n='3'] .pos-left { grid-column: 1 / 3; } .table[data-n='3'] .pos-right { grid-column: 3 / 4; }
  .pos-top .seat { grid-template-columns: auto; grid-template-areas: 'b' 'm' 'x'; justify-items: center; text-align: center; }
  .seat-name { max-width: 30vw; font-size: 0.78rem; }
  .exposed .tile.sm { --w: 16px; } .exposed .flowers .tile { display: none; }
  .tbl-tools .tool { width: 34px; height: 34px; font-size: 0.95rem; } .tbl-tools .token-mini { display: none; }
  .me-info .seat-meta { display: none; } .me-info .bubble { --b: 40px; }
  .chat-drawer { top: auto; left: 0; width: auto; height: 62dvh; border-left: 0; border-top: 1px solid var(--glass-b); border-radius: 16px 16px 0 0; transform: translateY(105%); padding: 0 var(--safe-r) var(--safe-b) var(--safe-l); }
  .me-exposed .tile.sm { --w: 20px; }
}
@media (max-width: 520px) {
  .tbl-bar { gap:3px; padding:3px 5px; }
  .tbl-bar > .icon-btn { width:34px; height:38px; }
  .tbl-tools { gap:2px; }
  .tbl-tools .tool { width:38px; height:38px; border-radius:9px; }
  .tbl-tools .secondary-tool, .tbl-tools .token-mini { display:none; }
  .tbl-tools .mobile-more { display:grid; }
  .tbl-title b { font-size:.78rem; } .tbl-title small { font-size:.62rem; }
  .wait-panel { padding:12px; gap:8px; }
  .share-box { display:grid; grid-template-columns:1fr 1fr; }
  .share-box .input { grid-column:1 / -1; }
  .chat-drawer { height:min(70dvh, 620px); }
  .quick { scrollbar-width:none; }
}
@media (max-width: 360px) {
  .tbl-tools .tool { width:35px; }
  .tbl-title { display:none; }
}
/* short landscape phones */
@media (orientation: landscape) and (max-height: 500px) {
  .table { --b: 42px; grid-template-columns: minmax(80px, 14vw) 1fr minmax(80px, 14vw); gap: 2px; }
  .tbl-bar { padding: 2px 6px; } .tool { width: 32px; height: 32px; font-size: 0.9rem; }
  .seat-sub .rank { display: none; } .exposed .tile.sm { --w: 16px; } .me-exposed .tile.sm { --w: 18px; }
  .me-area { grid-template-columns: auto 1fr auto; grid-template-areas: 'info exposed actions' 'hand hand hand'; padding: 2px 6px; gap: 2px 8px; }
  .tbl-tools .token-mini { display: none; }
  .me-info .seat-meta { display: none; } .me-info .bubble { --b: 38px; }
  .actions { min-height: 0; flex-wrap: nowrap; } .actions .btn { min-height: 32px; padding: 4px 10px; } .actions .btn.big { font-size: 0.95rem; }
  .pos-top .seat { grid-template-areas: 'b m x'; grid-template-columns: auto auto auto; }
  .claim-box { padding: 3px 6px; gap: 5px; } .claim-box small { display: none; }
}
/* big screens / TV */
@media (min-width: 1600px) and (min-height: 900px) {
  html { font-size: 18px; } .table { --b: 84px; } .tile.sm { --w: 32px; }
}

/* ---------- other pages ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tabbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tabbar button { border: 1px solid #ffffff22; background: #0004; padding: 8px 14px; border-radius: 99px; font-weight: 600; position: relative; }
.tabbar button.on { background: var(--red); border-color: var(--gold); }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 10px; align-items: end; margin-bottom: 14px; }
.podium > div { text-align: center; display: grid; justify-items: center; gap: 4px; padding: 14px 6px; border-radius: 14px 14px 4px 4px; }
.podium .p1 { background: linear-gradient(#f6c94566, #8a5a0633); padding-top: 22px; } .podium .p2 { background: linear-gradient(#c0c8d466, #5a627033); } .podium .p3 { background: linear-gradient(#cd7f3266, #5a321033); }
.podium .medal { font-size: 1.8rem; }
.leader-row .place { width: 30px; text-align: center; font-weight: 900; color: var(--gold); font-size: 1.1rem; }
.rank-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.rank-ladder div { background: #0004; border-radius: 10px; padding: 10px; display: grid; gap: 4px; justify-items: start; font-size: 0.82rem; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.shop-item { display: grid; justify-items: center; gap: 6px; padding: 12px; border-radius: 14px; background: linear-gradient(#ffffff10, #ffffff04); border: 1px solid #ffffff1c; text-align: center; }
.shop-item .preview { height: 90px; display: grid; place-items: center; width: 100%; border-radius: 10px; overflow: hidden; }
.shop-item .preview .theme-swatch { width: 100%; height: 100%; }
.price-tag { color: var(--gold); font-weight: 800; }
.chat-page { display: grid; grid-template-columns: 300px 1fr; gap: 12px; height: calc(100dvh - 140px); }
.threads { overflow-y: auto; padding: 8px; } .thread { width: 100%; text-align: left; border: 0; background: none; }
.thread.on .list-row { border-color: var(--gold); }
.convo { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.convo-head { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid #ffffff18; }
.convo-list { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 760px) {
  .chat-page { grid-template-columns: 1fr; height: calc(100dvh - 150px); }
  .chat-page.has-convo .threads { display: none; } .chat-page:not(.has-convo) .convo { display: none; }
}
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat-card { padding: 14px; display: grid; gap: 4px; } .stat-card b { font-size: 1.6rem; color: var(--gold); } .stat-card small { color: var(--muted); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.85rem; } table.data th, table.data td { padding: 7px 6px; border-bottom: 1px solid #ffffff14; text-align: left; }
table.data th { color: var(--gold); font-weight: 700; } .table-wrap { overflow-x: auto; }
.rules ol li { margin-bottom: 10px; line-height: 1.5; }
.tile-legend { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.avatar-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.avatar-picker button { background: none; border: 3px solid transparent; border-radius: 50%; padding: 2px; aspect-ratio: 1; }
.avatar-picker button.on { border-color: var(--gold); } .avatar-picker .avatar { width: 100%; height: 100%; }
.theme-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.theme-panel-head p { margin:0; max-width:680px; }
.theme-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:14px; }
.theme-choice { position:relative; overflow:hidden; min-height:150px; padding:0; border:1px solid var(--glass-b); border-radius:14px; background:#10080b; color:#fff; text-align:left; box-shadow:0 7px 18px #0005; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.theme-choice:hover { transform:translateY(-2px); }
.theme-choice.on { border:2px solid var(--gold); box-shadow:0 0 0 3px #f6c94522,0 10px 24px #0008; }
.theme-choice-art { position:absolute; inset:0; background:linear-gradient(135deg,#7c0712,#1d0306); background-size:cover; background-position:center; }
.theme-choice-art::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 25%,#090508ef 88%); }
.theme-choice > span:nth-child(2) { position:absolute; z-index:1; left:13px; right:38px; bottom:11px; display:grid; gap:2px; }
.theme-choice b { font:700 1rem var(--serif); }
.theme-choice small { color:#f5e8d5c7; }
.theme-choice > i { position:absolute; z-index:2; right:11px; top:10px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#0009; color:var(--gold); font-style:normal; font-weight:900; }
@media (max-width:540px) { .theme-picker { grid-template-columns:1fr 1fr; } .theme-choice { min-height:125px; } }

/* ---------- desktop downloads ---------- */
.downloads-page { max-width:1050px; margin:0 auto; }
.download-hero { display:flex; align-items:center; gap:20px; padding:24px 28px; }
.download-hero h1 { margin:0 0 5px; font-size:clamp(1.5rem,4vw,2.3rem); }
.download-hero p { margin:0; color:var(--muted); }
.download-mark { width:70px; height:70px; display:grid; place-items:center; border-radius:18px; background:linear-gradient(#e23b45,#8f1019); color:white; box-shadow:0 8px 24px #0006; flex:none; }
.download-mark .ui-icon { width:38px; height:38px; }
.download-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.download-card { position:relative; overflow:hidden; padding:24px; display:grid; gap:10px; justify-items:start; }
.download-card.recommended { border-color:var(--gold); box-shadow:0 0 0 2px #f6c94522,0 12px 36px #0008; }
.download-card .ribbon { position:absolute; top:12px; right:-34px; transform:rotate(38deg); width:140px; text-align:center; padding:4px; background:var(--gold); color:#3b2200; font-size:.68rem; font-weight:900; }
.platform-logo { width:48px; height:48px; display:grid; place-items:center; border-radius:13px; background:#ffffff14; color:var(--gold); font-size:1.8rem; }
.download-card h2 { margin:0; } .download-card p { margin:0; color:var(--muted); line-height:1.45; } .download-card small { color:var(--muted); }
.download-card .btn { margin-top:auto; } .download-card .btn .ui-icon { width:19px; }
.download-card.pending { opacity:.72; }
.download-notes { padding:18px 22px; } .download-notes p { margin:0; color:var(--muted); }
@media (max-width:680px) { .download-grid { grid-template-columns:1fr; } .download-hero { padding:18px; } .download-mark { width:56px; height:56px; } }
.t-card { display: grid; gap: 8px; padding: 14px; } .t-card .row { flex-wrap: wrap; }

/* art sprites */
.fx img.sprite { width: 1.6em; height: auto; display: block; }
.house-ad.art { justify-content: flex-end; padding: 18px; background: var(--art-ad) center/cover; isolation: isolate; }
.house-ad.art::before { content: ''; position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg, transparent 18%, #17020566 43%, #120204ed 72%, #090102fa 100%); }
.house-ad.art .ha-dragon { display: none; }
.house-ad.art .ha-text { width: min(55%, 290px); padding: 15px 16px; border: 1px solid #ffd86988; border-radius: 13px; background: linear-gradient(145deg, #230407e8, #090102e0); box-shadow: 0 12px 28px #000b, inset 0 1px 0 #ffffff16; backdrop-filter: blur(5px); }
.house-ad.art .ha-text .btn { width: 100%; color: #3b1900; text-shadow: none; }
@media (max-width: 560px) {
  .house-ad.art { padding: 10px; }
  .house-ad.art::before { background: linear-gradient(90deg, #12020455, #120204f0 58%, #090102fa); }
  .house-ad.art .ha-text { width: 62%; padding: 10px 11px; gap: 5px; }
  .house-ad.art .ha-text b { font-size: 1.15rem; }
  .house-ad.art .ha-text span { font-size: 1rem; }
  .house-ad.art .ha-text small { font-size: 0.7rem; line-height: 1.25; }
}