:root {
	--bg: #08100d;
	--bg-2: #0d1814;
	--panel: #121f1a;
	--panel-2: #172821;
	--panel-3: #1d3229;
	--line: rgba(255, 255, 255, 0.07);
	--line-2: rgba(255, 255, 255, 0.13);
	--text: #eef5f1;
	--muted: #8fa69a;
	--dim: #5f776b;
	--gold: #f2c14e;
	--gold-2: #d9932b;
	--gold-ink: #2a1c00;
	--win: #3fd68b;
	--loss: #ff6464;
	--info: #5aa9ff;
	--felt-hi: #22935a;
	--felt: #136a40;
	--felt-lo: #0a3d25;
	--wood-1: #6d4321;
	--wood-2: #3b2312;
	--ink-red: #cf2f3e;
	--ink-black: #1b2030;
	--card-w: 70px;
	--card-h: 98px;
	--card-sw: 34px;
	--card-sh: 48px;
	--radius: 16px;
	--shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75);
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
	background:
		radial-gradient(1200px 600px at 50% -10%, rgba(34, 147, 90, 0.18), transparent 60%),
		radial-gradient(800px 500px at 100% 100%, rgba(242, 193, 78, 0.05), transparent 60%),
		var(--bg);
	background-attachment: fixed;
	color: var(--text);
	font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--gold); text-decoration: none; }
svg { flex: 0 0 auto; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.win { color: var(--win); }
.loss { color: var(--loss); }
.muted { color: var(--muted); }
::selection { background: rgba(242, 193, 78, 0.35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #24392f; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }

/* ---------- Thanh trên ---------- */
.topbar {
	position: sticky; top: 0; z-index: 30;
	display: flex; align-items: center; gap: 18px;
	padding: 10px 24px;
	background: rgba(8, 16, 13, 0.78);
	backdrop-filter: blur(14px) saturate(1.3);
	border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.2px; color: var(--text); }
.brand-mark {
	display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
	background: linear-gradient(145deg, #ffd977, var(--gold-2)); color: var(--gold-ink); font-size: 19px;
	box-shadow: 0 6px 16px -6px rgba(242, 193, 78, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.brand small { display: block; font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: 1.4px; text-transform: uppercase; margin-top: -3px; }
.nav { display: flex; gap: 2px; flex: 1; }
.nav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px; color: var(--muted); font-weight: 600; transition: color 0.15s, background 0.15s; }
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.nav a.active { color: var(--text); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.nav a.active svg { color: var(--gold); }
.userbox { display: flex; align-items: center; gap: 10px; }
.wallet {
	display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 999px;
	background: linear-gradient(180deg, rgba(242, 193, 78, 0.14), rgba(242, 193, 78, 0.05));
	border: 1px solid rgba(242, 193, 78, 0.28); font-weight: 800; color: var(--gold); white-space: nowrap;
}
.coin { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, var(--gold) 45%, var(--gold-2)); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12); display: inline-block; }
.me-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 600; }
.me-chip:hover { border-color: var(--line-2); }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; color: var(--muted); transition: all 0.15s; }
.icon-btn:hover { color: var(--text); border-color: var(--line-2); }

main { max-width: 1360px; margin: 0 auto; padding: 22px 24px 40px; }

/* ---------- Nút ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line-2);
	background: var(--panel-2); cursor: pointer; font-weight: 700; white-space: nowrap;
	transition: transform 0.08s, background 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.btn:hover:not(:disabled) { background: var(--panel-3); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.btn:disabled { opacity: 0.38; cursor: not-allowed; }
.btn.primary {
	background: linear-gradient(180deg, #ffd66e, var(--gold-2)); color: var(--gold-ink); border-color: transparent;
	box-shadow: 0 10px 22px -10px rgba(242, 193, 78, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffe08a, #e6a33a); }
.btn.success { background: linear-gradient(180deg, #4fe39a, #22a865); color: #04210f; border-color: transparent; box-shadow: 0 10px 22px -10px rgba(63, 214, 139, 0.8); }
.btn.danger { color: var(--loss); }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn.sm { padding: 6px 11px; font-size: 13px; border-radius: 9px; }
.btn.lg { padding: 13px 26px; font-size: 15px; border-radius: 14px; }
.btn kbd, .kbd {
	font: 700 10px/1 'Be Vietnam Pro', sans-serif; padding: 3px 5px; border-radius: 5px; min-width: 18px; text-align: center;
	background: rgba(0, 0, 0, 0.18); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); opacity: 0.85;
}
.kbd { background: var(--bg); color: var(--muted); border: 1px solid var(--line-2); }

.panel { background: linear-gradient(180deg, var(--panel), #0f1b16); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.panel h2, .panel h3 { margin: 0 0 14px; font-size: 16px; letter-spacing: -0.1px; display: flex; align-items: center; gap: 8px; }
.panel h3 svg { color: var(--gold); }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.field label { font-size: 13px; color: var(--muted); font-weight: 600; }
.input, .field input, .select {
	padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--bg); outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, .field input:focus, .select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.15); }
.error { color: var(--loss); font-size: 13px; min-height: 19px; }
.seg { display: inline-flex; background: rgba(0, 0, 0, 0.32); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 5px 11px; border-radius: 7px; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 700; }
.seg button.active { background: rgba(255, 255, 255, 0.12); color: #fff; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, 0.32); color: rgba(238, 245, 241, 0.85); white-space: nowrap; }
.pill.gold { background: var(--gold); color: var(--gold-ink); }
.pill.red { background: var(--loss); color: #fff; }
.pill.green { background: rgba(63, 214, 139, 0.18); color: var(--win); }
.pill.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--loss); box-shadow: 0 0 0 0 rgba(255, 100, 100, 0.7); animation: live 1.6s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 6px rgba(255, 100, 100, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 100, 100, 0); } }

/* ---------- Avatar ---------- */
.ava { position: relative; width: var(--s, 40px); height: var(--s, 40px); border-radius: 50%; flex: 0 0 auto; }
.ava-in { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #24392f; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); }
.ava-in svg, .ava-in img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ava.ring::before {
	content: ''; position: absolute; inset: -4px; border-radius: 50%;
	background: conic-gradient(var(--gold), #fff3c4, var(--gold-2), var(--gold));
	animation: spin 2.4s linear infinite;
}
.ava.ring .ava-in { box-shadow: 0 0 0 2px var(--felt-lo); }
@keyframes spin { to { transform: rotate(1turn); } }
.ava .bot-tag { position: absolute; right: -4px; bottom: -3px; z-index: 2; font-size: 9px; font-weight: 800; padding: 1px 4px; border-radius: 5px; background: #0b1511; color: var(--muted); border: 1px solid var(--line-2); }

/* ---------- Đăng nhập ---------- */
.auth { min-height: calc(100vh - 60px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 440px); gap: 48px; align-items: center; max-width: 1100px; margin: 0 auto; }
.auth-hero h1 { font-size: 46px; line-height: 1.08; letter-spacing: -1.2px; margin: 18px 0 14px; }
.auth-hero h1 em { font-style: normal; background: linear-gradient(90deg, #ffe08a, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-hero p { color: var(--muted); font-size: 16px; max-width: 520px; }
.auth-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; max-width: 540px; }
.auth-feat { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.auth-feat b { display: block; color: var(--text); font-size: 13px; }
.auth-feat svg { color: var(--gold); margin-top: 2px; }
.fan { position: relative; height: 150px; width: 300px; margin-left: 10px; }
.fan .card { position: absolute; bottom: 0; left: 110px; transform-origin: 50% 120%; animation: float 5s ease-in-out infinite; }
.fan .card:nth-child(1) { transform: rotate(-24deg); animation-delay: -1s; }
.fan .card:nth-child(2) { transform: rotate(-8deg); animation-delay: -2s; }
.fan .card:nth-child(3) { transform: rotate(8deg); animation-delay: -3s; }
.fan .card:nth-child(4) { transform: rotate(24deg); animation-delay: -4s; }
@keyframes float { 50% { translate: 0 -6px; } }
.auth-card { padding: 28px; }
.auth-card h2 { font-size: 22px; margin: 0 0 4px; }
.tabs { display: flex; background: var(--bg); border-radius: 12px; padding: 4px; margin: 18px 0; border: 1px solid var(--line); }
.tabs button { flex: 1; padding: 9px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; color: var(--muted); font-weight: 700; }
.tabs button.active { background: var(--panel-3); color: var(--text); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.6); }

/* ---------- Lá bài ---------- */
.card {
	--w: var(--card-w);
	position: relative; flex: 0 0 auto;
	width: var(--w); height: var(--card-h);
	border-radius: calc(var(--w) * 0.11);
	background: linear-gradient(160deg, #ffffff 0%, #fbf7ee 55%, #f1eadb 100%);
	color: var(--ink-black);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09), 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 16px -8px rgba(0, 0, 0, 0.7);
	user-select: none;
	transition: transform 0.16s var(--ease), box-shadow 0.16s, translate 0.16s var(--ease);
}
.card.red { color: var(--ink-red); }
.card .idx { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.card .idx b { font-size: calc(var(--w) * 0.27); font-weight: 800; letter-spacing: -0.06em; }
.card .idx i { font-style: normal; font-size: calc(var(--w) * 0.21); margin-top: 1px; }
.card .tl { top: 6%; left: 8%; }
.card .br { bottom: 6%; right: 8%; transform: rotate(180deg); }
.card .pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--w) * 0.5); line-height: 1; }
.card.ace .pip { font-size: calc(var(--w) * 0.72); }
.card.face .pip span {
	display: grid; place-items: center; width: 50%; height: 56%; border-radius: calc(var(--w) * 0.07);
	border: 1.5px solid currentColor; font-weight: 800; font-size: calc(var(--w) * 0.36); letter-spacing: -0.04em;
	background: linear-gradient(160deg, rgba(242, 193, 78, 0.28), rgba(242, 193, 78, 0.06));
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.card.face .pip span small { display: block; font-size: 0.5em; margin-top: -0.2em; }
.card.sm { --w: var(--card-sw); height: var(--card-sh); border-radius: 5px; }
.card.sm .br, .card.sm .pip { display: none; }
.card.sm .idx b { font-size: calc(var(--w) * 0.36); }
.card.sm .idx i { font-size: calc(var(--w) * 0.32); }
.card.sm .tl { top: 7%; left: 9%; }
.card.sm::after { content: attr(data-s); position: absolute; right: 8%; bottom: 4%; font-size: calc(var(--w) * 0.5); line-height: 1; }
.card.back {
	background:
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.22) 0 13%, transparent 14%),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.09) 0 2px, transparent 2px 7px),
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.09) 0 2px, transparent 2px 7px),
		linear-gradient(160deg, #a52637, #5f0f1c);
	box-shadow: inset 0 0 0 3px #f7f1e3, inset 0 0 0 4px rgba(0, 0, 0, 0.2), 0 8px 16px -8px rgba(0, 0, 0, 0.7);
}
.card.back::after { display: none; }
.card.eaten { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(242, 193, 78, 0.45), 0 8px 16px -8px rgba(0, 0, 0, 0.7); }
.card.eaten::before {
	content: 'ĂN'; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); z-index: 2;
	padding: 0 5px; border-radius: 5px; background: var(--gold); color: var(--gold-ink); font-size: 9px; font-weight: 800; line-height: 14px; letter-spacing: 0.5px;
}
.card.last { box-shadow: 0 0 0 2px #fff, 0 0 16px 2px rgba(255, 255, 255, 0.55); }
.card.last.edible { box-shadow: 0 0 0 3px var(--gold), 0 0 22px 5px rgba(242, 193, 78, 0.8); animation: bob 1.2s infinite var(--ease); }
.card.sent { outline: 2px dashed rgba(255, 255, 255, 0.55); outline-offset: -3px; }
@keyframes bob { 50% { translate: 0 -4px; } }
.card.drop { animation: drop 0.42s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-26px) scale(1.35) rotate(-10deg); } }
.card.drawn { animation: drawn 0.5s var(--ease); }
@keyframes drawn { from { opacity: 0; transform: translateY(-80px) rotate(8deg); } }
.card.pop { animation: pop 0.38s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(0.6); } }

/* ---------- Bàn chơi ---------- */
.game { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
.game-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.watch-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(90, 169, 255, 0.1); border: 1px solid rgba(90, 169, 255, 0.3); }
.watch-bar b { color: #cfe5ff; }
.rail {
	padding: 14px; border-radius: 150px;
	background: linear-gradient(180deg, var(--wood-1), var(--wood-2));
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 8px rgba(0, 0, 0, 0.5), 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}
.felt {
	position: relative; isolation: isolate;
	display: grid; gap: 12px 16px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
	grid-template-areas: '. top .' 'left center right' '. bottom .';
	grid-template-rows: auto 1fr auto;
	min-height: 470px; padding: 26px 46px;
	border-radius: 136px;
	background: radial-gradient(ellipse at 50% 38%, var(--felt-hi) 0%, var(--felt) 48%, var(--felt-lo) 100%);
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 -10px 30px rgba(0, 0, 0, 0.3);
}
.felt::before {
	content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0.35; mix-blend-mode: overlay; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.felt::after { content: ''; position: absolute; inset: 14px; border-radius: 124px; border: 1px solid rgba(255, 255, 255, 0.07); pointer-events: none; z-index: -1; }
.felt.n2 { grid-template-areas: '. top .' '. center .' '. bottom .'; }
.felt.n3 { grid-template-areas: '. . .' 'left center right' '. bottom .'; }
.spot { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.spot-top { grid-area: top; }
.spot-left { grid-area: left; align-self: center; }
.spot-right { grid-area: right; align-self: center; }
.spot-bottom { grid-area: bottom; }
.center { grid-area: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; }

.plate {
	position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 999px;
	background: rgba(6, 22, 14, 0.62); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(4px);
	box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.8); max-width: 100%; text-align: left;
}
.plate.turn { border-color: rgba(242, 193, 78, 0.6); box-shadow: 0 0 0 1px rgba(242, 193, 78, 0.35), 0 0 26px rgba(242, 193, 78, 0.25); }
.plate-info { min-width: 0; }
.pname { font-weight: 800; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmeta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.pdelta { font-weight: 800; font-size: 12px; white-space: nowrap; line-height: 1.2; margin-top: 2px; }
.pdelta:empty { display: none; }
.float-delta { position: absolute; right: 10px; top: -6px; font-weight: 800; font-size: 15px; pointer-events: none; animation: floatUp 1.6s var(--ease) forwards; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
@keyframes floatUp { from { opacity: 0; transform: translateY(8px) scale(0.8); } 15% { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-26px); } }

.fanned { display: flex; justify-content: center; height: calc(var(--card-sh) + 6px); }
.fanned .card { transform-origin: 50% 110%; }
.fanned .card + .card { margin-left: calc(var(--card-sw) * -0.62); }
.zone { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.zone-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(238, 245, 241, 0.5); }
.cards-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: var(--card-sh); }
.cards-row.empty { min-height: 0; }
.slot { width: var(--card-sw); height: var(--card-sh); border-radius: 5px; border: 1.5px dashed rgba(255, 255, 255, 0.14); }
.melds { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.meld { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.15s; }
.meld.target { border-color: var(--gold); background: rgba(242, 193, 78, 0.2); cursor: pointer; animation: bob 1.2s infinite var(--ease); box-shadow: 0 0 18px rgba(242, 193, 78, 0.4); }

.deck { position: relative; width: var(--card-w); height: var(--card-h); }
.deck .card { position: absolute; inset: 0; }
.deck .card:nth-child(2) { translate: 3px -3px; }
.deck .card:nth-child(3) { translate: 6px -6px; }
.deck-count { position: absolute; z-index: 3; right: -16px; bottom: -10px; min-width: 32px; padding: 3px 8px; border-radius: 999px; background: #0b1511; border: 1px solid var(--line-2); font-weight: 800; font-size: 13px; text-align: center; }
.status-pill { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(6, 22, 14, 0.66); border: 1px solid rgba(255, 255, 255, 0.08); max-width: 100%; }
.status-pill.mine { border-color: rgba(242, 193, 78, 0.55); background: rgba(60, 44, 6, 0.55); }
.status-pill b { display: block; font-size: 14px; line-height: 1.25; }
.status-pill small { display: block; font-size: 12px; color: rgba(238, 245, 241, 0.7); }
.rounds { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(238, 245, 241, 0.65); font-weight: 600; }
.rounds i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
.rounds i.on { background: var(--gold); box-shadow: 0 0 8px rgba(242, 193, 78, 0.7); }
.ticker { font-size: 12px; color: rgba(238, 245, 241, 0.8); min-height: 18px; text-align: center; animation: pop 0.3s var(--ease); }

.dock {
	position: relative; border-radius: 22px; padding: 14px 18px 12px;
	background: linear-gradient(180deg, rgba(23, 40, 33, 0.95), rgba(14, 26, 21, 0.95));
	border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
.dock.turn { border-color: rgba(242, 193, 78, 0.5); box-shadow: 0 0 0 1px rgba(242, 193, 78, 0.2), 0 0 40px -10px rgba(242, 193, 78, 0.35), var(--shadow); }
.dock-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dock-top .plate { background: rgba(0, 0, 0, 0.25); }
.dock-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hand { display: flex; justify-content: center; align-items: flex-end; padding: 26px 8px 10px; min-height: calc(var(--card-h) + 40px); overflow-x: auto; overflow-y: visible; }
.hand .card { cursor: pointer; }
.hand .card + .card { margin-left: calc(var(--card-w) * -0.24); }
.hand .card.gap { margin-left: 14px; }
@media (hover: hover) { .hand .card:hover { translate: 0 -8px; } .tcard:hover { transform: translateY(-3px); } }
.hand .card.sel { translate: 0 -22px; box-shadow: 0 0 0 3px var(--info), 0 14px 22px -8px rgba(0, 0, 0, 0.7); }
.hand .card.in-meld::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -8px; height: 3px; border-radius: 2px; background: var(--win); box-shadow: 0 0 8px rgba(63, 214, 139, 0.8); }
.hand.watch .card { cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; min-height: 46px; }
.hint { text-align: center; font-size: 12px; color: var(--muted); margin-top: 8px; min-height: 18px; }

.game-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 76px; }
.side-card { background: linear-gradient(180deg, var(--panel), #0f1b16); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.side-card h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; justify-content: space-between; }
.table-badge { display: flex; align-items: center; gap: 12px; }
.tier-gem { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #1b1300; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 16px -8px rgba(0, 0, 0, 0.8); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; margin-top: 12px; }
.kv span:nth-child(odd) { color: var(--muted); }
.kv span:nth-child(even) { text-align: right; font-weight: 700; }
.money-list { display: flex; flex-direction: column; gap: 8px; }
.money-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.money-row .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.money-row b { font-variant-numeric: tabular-nums; }
.log { display: flex; flex-direction: column; gap: 2px; font-size: 12px; max-height: 230px; overflow: auto; }
.log div { padding: 3px 0 3px 10px; border-left: 2px solid var(--line-2); color: var(--muted); }
.log div:last-child { color: var(--text); border-left-color: var(--gold); font-weight: 600; }
.shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; font-size: 12px; color: var(--muted); align-items: center; }

.toast {
	position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); z-index: 60;
	display: flex; align-items: center; gap: 10px;
	background: rgba(14, 26, 21, 0.96); border: 1px solid var(--line-2); color: #fff; padding: 11px 18px; border-radius: 14px;
	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.8); opacity: 0; transition: all 0.25s var(--ease); pointer-events: none;
	max-width: calc(100vw - 32px); font-weight: 600;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { border-color: rgba(255, 100, 100, 0.5); }
.toast.err svg { color: var(--loss); }
.toast svg { color: var(--win); }

/* ---------- Sảnh ---------- */
.lobby-hero {
	position: relative; overflow: hidden; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
	padding: 24px 28px; border-radius: 22px; margin-bottom: 20px;
	background: radial-gradient(600px 220px at 85% 0%, rgba(242, 193, 78, 0.18), transparent 70%), linear-gradient(120deg, #133b2a, #0d2119 60%);
	border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
.lobby-hero h1 { margin: 0; font-size: 26px; letter-spacing: -0.5px; }
.lobby-hero p { margin: 4px 0 0; color: var(--muted); }
.hero-stats { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stat { padding: 10px 16px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); min-width: 120px; }
.hero-stat .k { font-size: 11px; color: var(--muted); font-weight: 600; }
.hero-stat .v { font-size: 18px; font-weight: 800; }
.resume-bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; margin-bottom: 18px; background: linear-gradient(90deg, rgba(242, 193, 78, 0.16), rgba(242, 193, 78, 0.04)); border: 1px solid rgba(242, 193, 78, 0.4); }
.resume-bar .grow { flex: 1; }
.lobby-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.lobby-tools h2 { margin: 0; font-size: 18px; flex: 1; }
.tier-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tier-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; }
.tier-tabs button i { width: 10px; height: 10px; border-radius: 50%; }
.tier-tabs button.active { color: var(--text); border-color: var(--line-2); background: var(--panel-3); }
.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.tcard {
	position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; cursor: pointer;
	background: linear-gradient(180deg, var(--panel), #0e1915); border: 1px solid var(--line);
	transition: transform 0.18s var(--ease), border-color 0.18s, box-shadow 0.18s;
}
.tcard:hover { border-color: color-mix(in srgb, var(--tc) 55%, transparent); box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--tc) 60%, #000); }
.tcard.locked { opacity: 0.62; }
.tcard-head { display: flex; align-items: center; gap: 10px; }
.tcard-head .t { flex: 1; min-width: 0; }
.tcard-head b { display: block; font-size: 15px; }
.tcard-head small { color: var(--muted); font-size: 12px; }
.mini-felt {
	position: relative; height: 118px; border-radius: 60px; padding: 8px;
	background: linear-gradient(180deg, var(--wood-1), var(--wood-2));
}
.mini-felt .mf { position: absolute; inset: 7px; border-radius: 54px; background: radial-gradient(ellipse at 50% 40%, var(--felt-hi), var(--felt) 55%, var(--felt-lo)); display: grid; place-items: center; }
.mini-felt .stake { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.mini-felt .stake b { font-size: 20px; letter-spacing: -0.5px; }
.mini-felt .stake small { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; opacity: 0.75; }
.mini-felt .seat { position: absolute; z-index: 2; }
.mini-felt .seat.empty { width: 34px; height: 34px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.45); background: rgba(0, 0, 0, 0.3); display: grid; place-items: center; color: rgba(255, 255, 255, 0.7); font-size: 18px; font-weight: 300; }
.s-b { left: 50%; bottom: -12px; transform: translateX(-50%); }
.s-t { left: 50%; top: -12px; transform: translateX(-50%); }
.s-l { left: -10px; top: 50%; transform: translateY(-50%); }
.s-r { right: -10px; top: 50%; transform: translateY(-50%); }
.tcard-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tcard-foot { display: flex; align-items: center; gap: 10px; }
.tcard-foot .status { flex: 1; font-size: 12px; color: var(--muted); min-width: 0; }
.tcard-foot .status b { color: var(--text); }

.chip {
	--c: #3d7bd9; width: var(--size, 46px); height: var(--size, 46px); border-radius: 50%; flex: 0 0 auto;
	display: grid; place-items: center; font-weight: 800; font-size: calc(var(--size, 46px) * 0.27); color: #fff;
	background:
		radial-gradient(circle, var(--c) 0 52%, transparent 53%),
		repeating-conic-gradient(var(--c) 0 22deg, #fff 22deg 30deg),
		var(--c);
	box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.18), inset 0 0 0 calc(var(--size, 46px) * 0.2) rgba(255, 255, 255, 0.06), 0 6px 14px -6px rgba(0, 0, 0, 0.8);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.rules-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin-top: 22px; }
.rules ul { margin: 0; padding-left: 18px; color: #c4d4ca; font-size: 13px; }
.rules li { margin: 5px 0; }
.pay-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pay-table td { padding: 7px 0; border-bottom: 1px dashed var(--line-2); }
.pay-table td:last-child { text-align: right; font-weight: 800; }

/* ---------- Hồ sơ ---------- */
.profile { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.profile-card { text-align: center; }
.profile-card .ava { margin: 6px auto 14px; }
.profile-card h2 { justify-content: center; margin-bottom: 2px; }
.ava-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.ava-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); transition: all 0.15s; }
.ava-opt:hover { border-color: var(--line-2); color: var(--text); transform: translateY(-2px); }
.ava-opt.sel { border-color: var(--gold); color: var(--text); background: rgba(242, 193, 78, 0.08); box-shadow: 0 0 0 1px var(--gold); }
.upload-box { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; border: 1.5px dashed var(--line-2); background: var(--bg-2); }
.upload-box .grow { flex: 1; font-size: 13px; color: var(--muted); }
.row-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }

/* ---------- Thống kê / bảng ---------- */
.page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 18px; flex-wrap: wrap; }
.page-title h1 { margin: 0; font-size: 26px; letter-spacing: -0.5px; }
.page-title p { margin: 2px 0 0; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.tile { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--panel), #0f1b16); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.tile .ic { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); color: var(--muted); }
.tile .k { font-size: 12px; color: var(--muted); font-weight: 600; padding-right: 40px; }
.tile .v { font-size: 24px; font-weight: 800; margin-top: 4px; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.tile .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tile.hl { border-color: rgba(255, 100, 100, 0.4); background: radial-gradient(400px 120px at 0% 0%, rgba(255, 100, 100, 0.14), transparent 70%), linear-gradient(180deg, var(--panel), #0f1b16); }
.tile.hl .ic { background: rgba(255, 100, 100, 0.14); color: var(--loss); }
.tile.good .ic { background: rgba(63, 214, 139, 0.14); color: var(--win); }
.tile.gold .ic { background: rgba(242, 193, 78, 0.14); color: var(--gold); }
.two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart .grid-line { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.chart .axis { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.chart g.bar:hover rect.hit { fill: rgba(255, 255, 255, 0.04); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.bars .bar-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 110px; align-items: center; gap: 10px; padding: 6px 0; }
.bars .track { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.bars .fill { height: 100%; border-radius: 6px; }
.bars .val { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fact { background: rgba(0, 0, 0, 0.2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.fact .k { font-size: 12px; color: var(--muted); }
.fact .v { font-weight: 800; margin-top: 2px; }
.empty-state { text-align: center; padding: 50px 10px; color: var(--muted); }
.empty-state svg { color: var(--dim); margin-bottom: 8px; }
.skeleton { border-radius: 12px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 700; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap; font-size: 12px; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl tbody tr.click { cursor: pointer; transition: background 0.12s; }
.tbl tbody tr.click:hover { background: rgba(255, 255, 255, 0.03); }
.tbl tr.me-row { background: rgba(242, 193, 78, 0.08); }
.tbl .who { display: flex; align-items: center; gap: 10px; }
.tbl-wrap { overflow-x: auto; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 14px; }
.out { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.out-u, .out-nhat { background: rgba(63, 214, 139, 0.15); color: var(--win); }
.out-nhi { background: rgba(143, 166, 154, 0.16); color: #c9d8cf; }
.out-ba, .out-bet { background: rgba(255, 170, 90, 0.14); color: #ffb36b; }
.out-mom, .out-bi_u, .out-bo_cuoc { background: rgba(255, 100, 100, 0.14); color: var(--loss); }

.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; align-items: end; }
.pod { text-align: center; padding: 18px 12px; border-radius: 18px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); }
.pod .ava { margin: 0 auto 10px; }
.pod b { display: block; font-size: 15px; }
.pod .bal { font-weight: 800; color: var(--gold); margin-top: 4px; font-size: 17px; }
.pod.p1 { padding-top: 30px; border-color: rgba(242, 193, 78, 0.5); background: radial-gradient(300px 140px at 50% 0%, rgba(242, 193, 78, 0.2), transparent 70%), linear-gradient(180deg, var(--panel-2), var(--panel)); }
.pod .medal { font-size: 26px; line-height: 1; margin-bottom: 8px; }

/* ---------- Modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(2, 6, 4, 0.7); backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 50; padding: 16px; animation: fade 0.2s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-radius: 22px; width: min(700px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.9); animation: rise 0.28s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.modal h2 { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.modal-close { float: right; }
.result-banner { margin: -24px -24px 18px; padding: 26px 24px 20px; text-align: center; border-radius: 22px 22px 0 0; }
.result-banner.good { background: radial-gradient(500px 200px at 50% 0%, rgba(242, 193, 78, 0.35), transparent 70%); }
.result-banner.bad { background: radial-gradient(500px 200px at 50% 0%, rgba(255, 100, 100, 0.22), transparent 70%); }
.result-banner .title { font-size: 22px; font-weight: 800; }
.result-banner .big { font-size: 44px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin-top: 6px; }
.result-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
details.box { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: rgba(0, 0, 0, 0.15); }
details.box summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--muted); }
.detail-seat { padding: 12px 0; border-bottom: 1px solid var(--line); }
.detail-seat .head { display: flex; align-items: center; gap: 10px; }
.detail-seat .cards-row, .detail-seat .melds { justify-content: flex-start; margin-top: 8px; }
.t-preview { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.bot-list { display: flex; flex-direction: column; gap: 10px; }
.bot-list .row { display: flex; align-items: center; gap: 10px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

@media (max-width: 1200px) {
	.game { grid-template-columns: minmax(0, 1fr); }
	.game-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 1000px) {
	.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.two, .rules-grid, .profile { grid-template-columns: minmax(0, 1fr); }
	.auth { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 10px; }
	.auth-hero h1 { font-size: 34px; }
	.felt { padding: 22px 26px; }
}

/* ---------- Bổ sung chung ---------- */
.only-mobile { display: none !important; }
.ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.center-info { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.rounds .muted { margin-left: 4px; }
.waiting { display: inline-flex; gap: 6px; padding: 14px; }
.waiting span { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.waiting span:nth-child(2) { animation-delay: 0.2s; }
.waiting span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 50% { opacity: 0.25; transform: scale(0.8); } }
.btn.wide { min-width: 240px; }
.profile-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.two.tight { margin: 0; gap: 12px; }
.upload-box { margin-top: 16px; }
.upload-box b { color: var(--text); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details.panel > summary h3 { margin: 0; }
details.panel[open] > summary h3 { margin-bottom: 14px; }
details.panel > summary h3::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform 0.2s; }
details.panel:not([open]) > summary h3::after { transform: rotate(-90deg); }
.sheet-side { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.sheet-grip { display: none; }
.tabbar { display: none; }
.hlist { display: flex; flex-direction: column; gap: 8px; }
.hrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; }
.hrow .hmid { flex: 1; min-width: 0; }
.hrow .hmid b, .hrow .hright b { display: block; font-size: 14px; }
.hrow small { display: block; font-size: 12px; color: var(--muted); }
.hrow .hright { text-align: right; font-variant-numeric: tabular-nums; }
.hrow .out { min-width: 58px; text-align: center; }

/* ---------- Điện thoại ---------- */
@media (max-width: 760px) {
	:root { --card-w: 48px; --card-h: 68px; --card-sw: 26px; --card-sh: 37px; }
	main { padding: 14px 12px 24px; }
	.two, .rules-grid, .profile { grid-template-columns: minmax(0, 1fr); }
	.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.tile .v { font-size: 19px; }
	.facts { grid-template-columns: minmax(0, 1fr); }
	.bars .bar-row { grid-template-columns: 70px minmax(0, 1fr) 92px; }
	.only-mobile { display: inline-flex !important; }
	.hlist.only-mobile { display: flex !important; }
	.hide-mobile { display: none !important; }
	body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); font-size: 14px; }
	body.in-game { padding-bottom: 0; }
	.topbar { padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); }
	.topbar .nav { display: none; }
	.brand { font-size: 16px; }
	.brand-mark { width: 30px; height: 30px; font-size: 17px; }
	.wallet { padding: 5px 10px 5px 6px; font-size: 13px; }
	.icon-btn { width: 38px; height: 38px; }
	.me-chip { padding: 2px; }
	.me-chip .nm { display: none; }
	.userbox { margin-left: auto; gap: 6px; }
	.tabbar {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
		padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
		background: rgba(8, 16, 13, 0.92); backdrop-filter: blur(14px) saturate(1.3); border-top: 1px solid var(--line-2);
	}
	.tabbar.hidden { display: none; }
	.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 4px; border-radius: 12px; color: var(--muted); font-size: 11px; font-weight: 700; }
	.tabbar a.active { color: var(--gold); background: rgba(242, 193, 78, 0.08); }
	body.in-game .tabbar { display: none; }

	.btn { min-height: 42px; }
	.btn.sm { min-height: 36px; padding: 6px 10px; }
	.btn.lg { padding: 12px 18px; font-size: 15px; }
	.btn kbd { display: none; }
	.input, .field input, .select { font-size: 16px; padding: 12px 13px; }

	.auth { min-height: auto; padding: 8px 0 0; gap: 18px; }
	.auth-hero h1 { font-size: 30px; margin: 4px 0 10px; }
	.auth-hero p { font-size: 14px; }
	.auth-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
	.auth-feat { padding: 10px; font-size: 12px; }
	.auth-card { padding: 20px; }

	.lobby-hero { padding: 16px; gap: 12px; border-radius: 18px; }
	.lobby-hero .hero-text { flex: 1; min-width: 0; }
	.lobby-hero h1 { font-size: 20px; }
	.lobby-hero p { font-size: 13px; }
	.hero-stats { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.hero-stat { min-width: 0; padding: 8px 10px; }
	.hero-stat .v { font-size: 16px; }
	.resume-bar { padding: 12px; gap: 10px; flex-wrap: wrap; }
	.lobby-tools { gap: 10px; }
	.tier-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 2px 12px 4px; width: calc(100% + 24px); scrollbar-width: none; }
	.tier-tabs::-webkit-scrollbar { display: none; }
	.tier-tabs button { flex: 0 0 auto; padding: 8px 13px; }
	.tables { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.tcard { padding: 14px; }
	.mini-felt { height: 104px; }
	.rules-grid { gap: 12px; margin-top: 16px; }

	.game { gap: 10px; }
	.game-main { gap: 10px; }
	.game-side { display: none; }
	.spot .bot-tag { display: none; }
	.fanned { height: calc(var(--card-sh) * 0.8); }
	.fanned .card { --w: 20px; width: 20px; height: 29px; }
	.fanned .card + .card { margin-left: -13px; }
	.watch-bar { padding: 8px 10px; font-size: 13px; gap: 8px; }
	.rail { border-radius: 26px; padding: 7px; }
	.felt, .felt.n2, .felt.n3 {
		border-radius: 20px; padding: 10px 6px 12px; min-height: 0; gap: 8px 4px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-areas: 'left top right' 'center center center' 'bottom bottom bottom';
	}
	.felt.n2 { grid-template-areas: '. top .' 'center center center' 'bottom bottom bottom'; }
	.felt.n3 { grid-template-areas: 'left . right' 'center center center' 'bottom bottom bottom'; }
	.felt::after { border-radius: 15px; inset: 5px; }
	.spot-left, .spot-right { align-self: start; }
	.spot { gap: 5px; }
	.spot .plate { flex-direction: column; gap: 4px; padding: 6px 4px; border-radius: 14px; width: 100%; text-align: center; }
	.spot .plate .ava { --s: 36px !important; }
	.spot .plate-info { width: 100%; }
	.spot .pname { font-size: 11px; max-width: none; }
	.spot .pmeta { justify-content: center; gap: 3px; }
	.spot .pmeta .pill { padding: 1px 5px; font-size: 10px; }
	.zone-label { font-size: 9px; letter-spacing: 0.6px; }
	.cards-row { gap: 2px; }
	.discards { flex-wrap: nowrap; }
	.melds { gap: 4px; }
	.meld { padding: 2px; gap: 1px; }
	.center { flex-direction: row; flex-wrap: wrap; gap: 8px 12px; padding: 4px 0; }
	.center .deck { --card-w: 40px; --card-h: 56px; }
	.deck-count { right: -12px; bottom: -8px; font-size: 11px; min-width: 26px; padding: 2px 6px; }
	.center-info { align-items: flex-start; }
	.status-pill { padding: 5px 12px 5px 5px; gap: 8px; }
	.status-pill b { font-size: 13px; }
	.status-pill small { font-size: 11px; }
	.ticker { flex-basis: 100%; font-size: 11px; }

	.dock {
		position: sticky; bottom: 0; z-index: 20;
		margin: 0 -8px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
		border-radius: 18px 18px 0 0; border-bottom: 0;
		background: rgba(14, 26, 21, 0.97); backdrop-filter: blur(10px);
	}
	.dock-top { gap: 6px; flex-wrap: nowrap; }
	.dock-top .plate { flex: 1; min-width: 0; padding: 3px 8px 3px 3px; }
	.dock-top .plate .ava { --s: 32px !important; }
	.dock-top .pmeta .pill:nth-child(2) { display: none; }
	.dock-tools { gap: 4px; flex-wrap: nowrap; }
	.dock-tools .seg button { padding: 6px 8px; }
	.hand { padding: 22px 2px 8px; min-height: calc(var(--card-h) + 32px); justify-content: center; }
	.hand .card + .card { margin-left: calc(var(--card-w) * -0.34); }
	.hand .card.gap { margin-left: 4px; }
	.hand .card.sel { translate: 0 -16px; }
	.actions { gap: 8px; min-height: 42px; }
	.actions .btn.lg { flex: 1 1 0; padding: 12px 8px; min-width: 0; }
	.btn.wide { min-width: 0; }
	.hint { font-size: 11px; margin-top: 6px; min-height: 0; }

	.modal-bg { place-items: end center; padding: 0; }
	.modal {
		width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 22px 22px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
		animation: sheet 0.3s var(--ease); border-bottom: 0;
	}
	@keyframes sheet { from { transform: translateY(100%); } }
	.sheet-grip { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line-2); margin: -6px auto 12px; }
	.result-banner { margin: -18px -16px 14px; padding: 22px 16px 16px; }
	.sticky-actions { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); margin: 16px -16px calc(-16px - env(safe-area-inset-bottom)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); }
	.sticky-actions .btn { flex: 1 1 0; }
	.modal .two { gap: 16px; }

	.profile-card .ava { --s: 96px !important; }
	.ava-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
	.ava-opt { padding: 8px 2px; font-size: 10px; }
	.ava-opt .ava { --s: 52px !important; }
	.two.tight { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.upload-box { flex-wrap: wrap; }

	.page-title { margin-bottom: 14px; }
	.page-title h1 { font-size: 22px; }
	.page-title .select { width: 100%; }
	.panel { padding: 16px; border-radius: 16px; }
	.tbl th, .tbl td { padding: 9px 8px; }
	.tbl .who { gap: 8px; max-width: 150px; }
	.podium .pod { padding: 14px 6px; }
	.pod b { font-size: 13px; }
	.pod .bal { font-size: 15px; }
	.toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
	body.in-game .toast { bottom: calc(190px + env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
	:root { --card-w: 44px; --card-h: 63px; --card-sw: 23px; --card-sh: 33px; }
	.spot .plate .ava { --s: 30px !important; }
	.dock-tools .seg { display: none; }
}

/* ---------- Chat ---------- */
.chat-btn { position: relative; }
.chat-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--loss); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.chat-panel {
	position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 360px; height: min(540px, calc(100vh - 110px));
	display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
	background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); box-shadow: 0 30px 60px -16px rgba(0, 0, 0, 0.9);
	transform: translateY(20px) scale(0.98); opacity: 0; pointer-events: none; transition: all 0.22s var(--ease);
}
.chat-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.chat-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.cm { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.cm.mine { align-self: flex-end; flex-direction: row-reverse; }
.cm-body { min-width: 0; }
.cm-name { font-size: 11px; color: var(--muted); margin: 0 4px 2px; display: flex; gap: 4px; align-items: center; }
.cm.mine .cm-name { justify-content: flex-end; }
.cm-text { padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--panel-3); word-wrap: break-word; overflow-wrap: anywhere; }
.cm.mine .cm-text { border-radius: 14px 14px 4px 14px; background: linear-gradient(180deg, #ffd66e, var(--gold-2)); color: var(--gold-ink); font-weight: 600; }
.cm-emote { font-size: 32px; line-height: 1.1; }
.chat-emotes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 8px 10px 0; border-top: 1px solid var(--line); }
.chat-emotes button { font-size: 22px; padding: 4px 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; transition: transform 0.1s, background 0.15s; }
.chat-emotes button:hover { background: rgba(255, 255, 255, 0.06); }
.chat-emotes button:active { transform: scale(1.25); }
.chat-phrases { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px; scrollbar-width: none; }
.chat-phrases::-webkit-scrollbar { display: none; }
.chat-phrases button { flex: 0 0 auto; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.chat-form { display: flex; gap: 8px; padding: 8px 10px 12px; }
.chat-form input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); outline: none; }
.chat-form input:focus { border-color: var(--gold); }
.plate { overflow: visible; }
.bubble {
	position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 15; transform: translateX(-50%);
	max-width: 200px; width: max-content; padding: 7px 12px; border-radius: 14px; background: #fff; color: #1b2030;
	font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.7);
	animation: bubble 4.5s var(--ease) forwards; pointer-events: none; overflow-wrap: anywhere;
}
.bubble::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #fff; }
.bubble.emote { font-size: 28px; padding: 4px 10px; line-height: 1.1; }
@keyframes bubble { 0% { opacity: 0; transform: translate(-50%, 8px) scale(0.6); } 6% { opacity: 1; transform: translate(-50%, 0) scale(1.06); } 10% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -6px); } }
@media (max-width: 760px) {
	.chat-panel { left: 0; right: 0; bottom: 0; width: auto; height: 72vh; height: 72dvh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); opacity: 1; }
	.chat-panel.open { transform: none; }
	.chat-form input { font-size: 16px; }
	.chat-emotes button { font-size: 24px; padding: 6px 0; }
	.bubble { max-width: 140px; font-size: 11px; padding: 6px 9px; }
	.bubble.emote { font-size: 24px; }
	.spot .bubble { bottom: calc(100% + 4px); }
}

/* ---------- Chơi với bạn bè ---------- */
.friends-card {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px; margin-bottom: 18px;
	background: radial-gradient(500px 160px at 0% 0%, rgba(90, 169, 255, 0.16), transparent 70%), linear-gradient(180deg, var(--panel), #0f1b16);
	border: 1px solid rgba(90, 169, 255, 0.3);
}
.fc-text { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; }
.fc-text svg { color: var(--info); }
.fc-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.code-form { display: flex; gap: 8px; }
.code-input { width: 150px; text-transform: uppercase; letter-spacing: 3px; font-weight: 800; text-align: center; }
.code-input::placeholder { letter-spacing: 0; font-weight: 600; text-transform: none; }
.resume-bar.friends { border-color: rgba(90, 169, 255, 0.45); background: linear-gradient(90deg, rgba(90, 169, 255, 0.16), rgba(90, 169, 255, 0.04)); }
.bet-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 8px 0 16px; }
.bet-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; font-size: 12px; font-weight: 700; }
.bet-opt small { color: var(--muted); font-weight: 500; font-size: 10px; }
.bet-opt.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); background: rgba(242, 193, 78, 0.08); }
.bet-opt:disabled { opacity: 0.4; cursor: not-allowed; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.form-grid .eyebrow { margin-bottom: 8px; }
.seg.big { display: flex; }
.seg.big button { flex: 1; padding: 9px 6px; font-size: 13px; }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; font-size: 13px; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 13px; background: #2a4436; transition: background 0.2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.2s var(--ease); }
.switch-row input:checked + .switch { background: var(--win); }
.switch-row input:checked + .switch::after { transform: translateX(18px); }
.steps { padding-left: 20px; line-height: 1.8; }
.center-text { text-align: center; font-size: 12px; }
.room-wrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.room-head {
	text-align: center; padding: 24px 18px; border-radius: 22px;
	background: radial-gradient(500px 200px at 50% 0%, rgba(90, 169, 255, 0.2), transparent 70%), linear-gradient(180deg, #133b2a, #0d2119);
	border: 1px solid var(--line-2);
}
.room-code { display: flex; justify-content: center; gap: 8px; margin: 10px auto 12px; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; }
.room-code:active span { transform: scale(0.94); }
.room-code span { transition: transform 0.1s; }
.btn.copied { background: linear-gradient(180deg, #4fe39a, #22a865) !important; color: #04210f !important; }
.room-code span { display: grid; place-items: center; width: 44px; height: 56px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line-2); font-size: 28px; font-weight: 800; color: var(--gold); }
.room-meta { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.room-meta b { color: var(--text); }
.room-share { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.rseats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rseat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); min-width: 0; text-align: center; }
.rseat b { max-width: 100%; }
.rseat.empty { border-style: dashed; color: var(--muted); }
.rseat-empty { width: 60px; height: 60px; border-radius: 50%; border: 2px dashed var(--line-2); display: grid; place-items: center; font-size: 24px; color: var(--dim); }
.room-actions { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.waiting-host { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; padding-right: 8px; }
.turn-timer { flex: 0 0 auto; min-width: 38px; padding: 4px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); font-weight: 800; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.turn-timer.urgent { background: var(--loss); color: #fff; animation: bob 0.6s infinite; }
.cm-system { align-self: center; font-size: 11px; color: var(--muted); padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); }

/* ---------- Chống zoom / trôi trang ---------- */
html { touch-action: manipulation; overscroll-behavior: none; }
body { overscroll-behavior: none; }
.card, .hand, .btn, .chip, .tabbar, .seg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

@media (max-width: 760px) {
	.friends-card { padding: 14px; gap: 12px; }
	.fc-actions { width: 100%; }
	.fc-actions .btn.primary { flex: 1; }
	.code-form { flex: 1.2; }
	.code-input { width: 100%; min-width: 0; }
	.bet-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.form-grid { grid-template-columns: minmax(0, 1fr); }
	.room-code span { width: 40px; height: 50px; font-size: 24px; }
	.rseats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.room-actions { position: sticky; bottom: calc(66px + env(safe-area-inset-bottom)); padding: 10px 0; background: linear-gradient(180deg, transparent, var(--bg) 30%); }
	.room-actions .btn.lg { flex: 1; }

	/* Đang chơi: cố định đúng một màn hình, trang không cuộn/trôi; chỉ khu bàn được cuộn bên trong khi quá cao. */
	body.in-game { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
	body.in-game .topbar { position: relative; flex: 0 0 auto; }
	body.in-game main { flex: 1 1 auto; min-height: 0 !important; height: auto; overflow: hidden; display: flex; flex-direction: column; padding: 6px 8px 0; width: 100%; }
	body.in-game .game { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
	body.in-game .game-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
	body.in-game .rail { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	body.in-game .felt { min-height: 100%; }
	body.in-game .dock { flex: 0 0 auto; position: relative; margin-top: 0; }
	body.in-game .hand { overflow: visible; }
}

/* ---------- Quản trị ---------- */
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.admin-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-tools h3 { margin: 0; flex: 1; }
.admin-tools .input { flex: 1 1 260px; min-width: 0; }
.ulist { display: flex; flex-direction: column; gap: 8px; }
.urow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.urow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.urow-main small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urow-bal { text-align: right; display: flex; flex-direction: column; line-height: 1.2; }
.urow-bal b { color: var(--gold); }
.alog { display: flex; flex-direction: column; gap: 6px; max-height: 620px; overflow-y: auto; }
.alog-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.18); }
.alog-amt { min-width: 92px; font-weight: 800; }
.alog-main { flex: 1; min-width: 0; font-size: 13px; }
.alog-main small { display: block; color: var(--muted); font-size: 12px; }
.alog-after { font-size: 12px; white-space: nowrap; }
.adj-user { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); margin: 14px 0; }
.adj-sign button.plus { background: rgba(63, 214, 139, 0.22); color: var(--win); }
.adj-sign button.minus { background: rgba(255, 100, 100, 0.2); color: var(--loss); }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pick { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); font-size: 13px; font-weight: 700; cursor: pointer; }
.pick.sel { border-color: var(--gold); background: rgba(242, 193, 78, 0.12); color: var(--gold); }
.adj-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.adj-preview > div { padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; gap: 2px; }
.adj-preview b { font-size: 20px; }
@media (max-width: 1000px) { .admin-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
	.urow { flex-wrap: wrap; gap: 10px; }
	.urow-main { flex: 1 1 calc(100% - 120px); }
	.urow .btn { flex: 1 1 100%; }
	.alog-amt { min-width: 74px; font-size: 13px; }
	.alog-after { display: none; }
	.tabbar a { font-size: 10px; }
}

/* ---------- Độ khó máy + cảnh báo hạ phỏm ---------- */
.level-pick { display: flex; align-items: center; gap: 8px; }
.level-pick.in-modal { margin-bottom: 14px; }
.level-seg button { padding: 6px 11px; }
.meld-alert {
	display: flex; align-items: center; gap: 12px; margin: -2px 0 10px; padding: 12px 14px; border-radius: 14px;
	background: linear-gradient(90deg, #ffcf4d, #ff9f1c); color: #2a1600; box-shadow: 0 0 0 2px #fff3, 0 10px 30px -6px rgba(255, 170, 30, 0.75);
	animation: meldPulse 1.1s ease-in-out infinite;
}
.meld-alert b { display: block; font-size: 17px; font-weight: 900; letter-spacing: 0.4px; line-height: 1.2; }
.meld-alert small { display: block; font-size: 12.5px; font-weight: 600; opacity: 0.85; }
.meld-alert .ma-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(0, 0, 0, 0.14); animation: wiggle 1.1s ease-in-out infinite; }
.meld-alert.danger { background: linear-gradient(90deg, #ff6b6b, #e03131); color: #fff; box-shadow: 0 10px 30px -6px rgba(255, 80, 80, 0.75); }
.meld-alert.soon { background: linear-gradient(90deg, rgba(242, 193, 78, 0.22), rgba(242, 193, 78, 0.08)); color: var(--text); border: 1px solid rgba(242, 193, 78, 0.55); box-shadow: none; animation: none; }
.meld-alert.soon .ma-icon { color: var(--gold); animation: none; }
@keyframes meldPulse { 50% { transform: scale(1.015); box-shadow: 0 0 0 4px #fff5, 0 14px 36px -4px rgba(255, 170, 30, 0.95); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.dock.meld-turn { border-color: #ffb020; box-shadow: 0 0 0 2px rgba(255, 176, 32, 0.6), 0 0 50px -6px rgba(255, 176, 32, 0.7), var(--shadow); }
.dock.meld-turn .hand .card.in-meld { box-shadow: 0 0 0 3px var(--win), 0 0 16px 2px rgba(63, 214, 139, 0.75); translate: 0 -6px; }
.dock.meld-turn .hand .card.in-meld::after { height: 5px; bottom: -10px; }
.btn.glow { animation: btnGlow 1s ease-in-out infinite; }
@keyframes btnGlow { 50% { box-shadow: 0 0 0 4px rgba(63, 214, 139, 0.35), 0 0 26px rgba(63, 214, 139, 0.9); transform: translateY(-1px); } }
@media (max-width: 760px) {
	.level-pick { width: 100%; justify-content: space-between; }
	.level-seg { flex: 1; display: flex; }
	.level-seg button { flex: 1; padding: 7px 4px; white-space: nowrap; }
	.meld-alert { padding: 9px 10px; gap: 10px; margin-bottom: 8px; }
	.meld-alert b { font-size: 15px; }
	.meld-alert small { font-size: 11.5px; }
	.meld-alert .ma-icon { width: 36px; height: 36px; }
}

/* ================= Các game mới ================= */
.game-switch { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.game-switch::-webkit-scrollbar { display: none; }
.game-switch a { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-weight: 800; white-space: nowrap; }
.game-switch a.active { color: var(--text); border-color: rgba(242, 193, 78, 0.6); background: linear-gradient(180deg, rgba(242, 193, 78, 0.16), rgba(242, 193, 78, 0.04)); }
.gs-glyph { font-size: 20px; line-height: 1; font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif; }
.game-hero { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 22px; margin-bottom: 16px; border: 1px solid var(--line-2);
	background: radial-gradient(500px 200px at 0% 0%, color-mix(in srgb, var(--tint) 30%, transparent), transparent 70%), linear-gradient(120deg, #133b2a, #0d2119 70%); }
.game-hero h1 { margin: 0 0 4px; font-size: 24px; }
.game-hero p { margin: 0; color: var(--muted); font-size: 13px; }
.gh-glyph { flex: 0 0 auto; width: 68px; height: 68px; border-radius: 18px; display: grid; place-items: center; font-size: 40px; color: #fff; background: color-mix(in srgb, var(--tint) 75%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 24px -10px var(--tint); font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif; }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mode-card { display: flex; flex-direction: column; gap: 8px; }
.mode-card .eyebrow { margin-top: 6px; }
.mode-card.span2 { grid-column: 1 / -1; }
.stake-row { display: flex; gap: 6px; flex-wrap: wrap; }
.wide-btn { margin-top: 10px; width: 100%; }
.small-note { font-size: 12px; margin: 4px 0 0; }
.tier-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tier-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; }
.tier-opt small { color: var(--muted); font-size: 11px; }
.tier-opt.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); background: rgba(242, 193, 78, 0.08); }
.tier-opt:disabled { opacity: 0.4; cursor: not-allowed; }
body.in-arena .tabbar { display: none !important; }
body.in-arena { padding-bottom: 0 !important; }
.a-timer { flex: 0 0 auto; min-width: 42px; padding: 4px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); font-weight: 800; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.a-timer.urgent { background: var(--loss); color: #fff; animation: bob 0.6s infinite; }

/* Cờ */
.bgame { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; max-width: 1040px; margin: 0 auto; }
.bgame-main { display: flex; flex-direction: column; gap: 10px; align-items: center; min-width: 0; }
.btop { width: 100%; max-width: 620px; }
.bplate { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); position: relative; }
.bplate.turn { border-color: rgba(242, 193, 78, 0.6); box-shadow: 0 0 24px rgba(242, 193, 78, 0.2); }
.bplate .plate-info { flex: 1; min-width: 0; }
.caps { display: flex; flex-wrap: wrap; gap: 1px; max-width: 45%; justify-content: flex-end; }
.cap { font-size: 16px; line-height: 1; }
.cap.chess.up { color: #fff; text-shadow: 0 0 1px #000, 0 0 1px #000; }
.cap.chess.low { color: #111; text-shadow: 0 0 1px #fff; }
.cap.xiangqi { font-size: 12px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #f3e2c0; font-family: 'Noto Serif SC', 'SimSun', serif; }
.cap.xiangqi.up { color: #c62828; }
.cap.xiangqi.low { color: #1b1b1b; }
.side-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); }
.chess-w { background: #fff; }
.chess-b { background: #111; }
.xiangqi-r { background: #e03131; }
.xiangqi-b { background: #111; }
.board-wrap { width: 100%; max-width: 620px; }
.cboard { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 6px #3b2312, 0 0 0 8px #6d4321, 0 24px 40px -18px rgba(0, 0, 0, 0.9); }
.sq { position: relative; border: 0; padding: 0; margin: 0; display: grid; place-items: center; cursor: pointer; aspect-ratio: 1; }
.sq.light { background: #eedcb5; }
.sq.dark { background: #b5835a; }
.sq.last::before { content: ''; position: absolute; inset: 0; background: rgba(255, 210, 60, 0.42); }
.sq.sel::before { content: ''; position: absolute; inset: 0; background: rgba(90, 169, 255, 0.55); }
.sq.check::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 40, 40, 0.9), rgba(255, 40, 40, 0) 70%); }
.sq.target::after { content: ''; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(20, 60, 30, 0.45); }
.sq.capture::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; border: 4px solid rgba(20, 60, 30, 0.5); }
.cp { position: relative; z-index: 1; font-size: min(8.2vw, 54px); line-height: 1; font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif; transition: transform 0.12s; }
.cp.w { color: #fff; text-shadow: 0 0 1px #000, 0 0 2px #000, 0 2px 3px rgba(0, 0, 0, 0.5); }
.cp.b { color: #1a1a1a; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(255, 255, 255, 0.4); }
.sq.sel .cp { transform: scale(1.12); }
.sq .cf, .sq .cr { position: absolute; font-style: normal; font-size: 10px; font-weight: 800; opacity: 0.7; z-index: 1; }
.sq .cf { right: 3px; bottom: 1px; }
.sq .cr { left: 3px; top: 1px; }
.sq.light .cf, .sq.light .cr { color: #8a5a35; }
.sq.dark .cf, .sq.dark .cr { color: #f3e2c0; }
.xboard { position: relative; aspect-ratio: 9 / 10; border-radius: 12px; background: linear-gradient(160deg, #f1d9a6, #e2bf7f); box-shadow: 0 0 0 6px #3b2312, 0 0 0 8px #6d4321, 0 24px 40px -18px rgba(0, 0, 0, 0.9); }
.xboard svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #6b3e17; stroke-width: 0.035; fill: none; }
.xboard .river { fill: rgba(107, 62, 23, 0.55); stroke: none; font-size: 0.42px; text-anchor: middle; font-family: 'Noto Serif SC', 'SimSun', serif; }
.xpt { position: absolute; width: 10.6%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; padding: 0; background: transparent; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.xp { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: min(5.6vw, 34px); background: radial-gradient(circle at 35% 30%, #fff8e6, #f0d9a8 70%); box-shadow: inset 0 0 0 2px currentColor, inset 0 0 0 4px #f6e6c3, 0 3px 6px rgba(0, 0, 0, 0.45); font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', 'KaiTi', serif; transition: transform 0.12s; }
.xp.red { color: #c62828; }
.xp.blk { color: #1b1b1b; }
.xpt.sel .xp { transform: scale(1.12); box-shadow: inset 0 0 0 2px currentColor, inset 0 0 0 4px #f6e6c3, 0 0 0 3px #5aa9ff, 0 6px 12px rgba(0, 0, 0, 0.5); }
.xpt.last { box-shadow: 0 0 0 3px rgba(255, 190, 40, 0.85); }
.xpt.check .xp { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 4px #ff3b3b, 0 0 18px #ff3b3b; }
.xpt.target::after { content: ''; width: 34%; height: 34%; border-radius: 50%; background: rgba(30, 110, 50, 0.7); }
.xpt.capture .xp { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 4px rgba(30, 140, 60, 0.9); }
.bstatus { text-align: center; font-size: 15px; min-height: 22px; }
.bactions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; min-height: 44px; }
.draw-offer { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--gold); }
.bside { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 76px; }
.btools { display: flex; gap: 6px; flex-wrap: wrap; }
.movelist { display: grid; grid-template-columns: auto 1fr 1fr; gap: 2px 8px; font-size: 13px; max-height: 360px; overflow-y: auto; font-variant-numeric: tabular-nums; }
.movelist .mn { color: var(--dim); }
.movelist .mv.last { color: var(--gold); font-weight: 800; }
.promo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.promo { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border-radius: 14px; border: 1px solid var(--line-2); background: #b5835a; cursor: pointer; }
.promo .cp { font-size: 44px; }
.promo small { color: #fff; font-weight: 700; }

/* Poker */
.pgame { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: 'table side' 'dock side'; gap: 14px; max-width: 1180px; margin: 0 auto; }
.ptable-rail { grid-area: table; padding: 12px; border-radius: 200px; background: linear-gradient(180deg, var(--wood-1), var(--wood-2)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 30px 60px -20px rgba(0, 0, 0, 0.8); }
.ptable { position: relative; aspect-ratio: 16 / 9; border-radius: 190px; background: radial-gradient(ellipse at 50% 40%, var(--felt-hi), var(--felt) 50%, var(--felt-lo)); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 18px 40px rgba(0, 0, 0, 0.45); }
.pseat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 132px; z-index: 2; }
.pseat .plate { padding: 4px 10px 4px 4px; gap: 8px; width: 100%; }
.pseat .pname { font-size: 12px; }
.pchips { font-weight: 800; font-size: 12px; color: var(--gold); }
.pchips.big { font-size: 18px; }
.pchips small { font-size: 11px; color: var(--muted); font-weight: 600; }
.pseat.turn .plate { border-color: rgba(242, 193, 78, 0.8); box-shadow: 0 0 22px rgba(242, 193, 78, 0.45); }
.pseat.winner .plate { border-color: var(--win); box-shadow: 0 0 26px rgba(63, 214, 139, 0.6); }
.pseat.me { width: 150px; }
.pempty { padding: 8px 12px; border-radius: 999px; border: 1.5px dashed rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.45); font-size: 12px; font-weight: 700; }
.phole { display: flex; gap: 2px; }
.phole.folded { opacity: 0.35; filter: grayscale(0.6); }
.ptags { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; min-height: 0; }
.dealer-btn { width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #111; font-size: 11px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.pbet { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); font-size: 12px; font-weight: 800; }
.pwin { font-weight: 900; color: var(--win); text-shadow: 0 2px 6px #000; animation: floatUp 2.4s var(--ease) forwards; }
.pcenter { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 62%; }
.pstreet { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.pboard { display: flex; gap: 6px; }
.pboard .card { --w: min(9vw, 56px); height: calc(var(--w) * 1.4); }
.card.slotcard { background: rgba(0, 0, 0, 0.18); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.15); }
.ppot { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); font-weight: 800; color: var(--gold); }
.presult { font-size: 13px; text-align: center; background: rgba(0, 0, 0, 0.45); padding: 6px 12px; border-radius: 12px; }
.pdock { grid-area: dock; border-radius: 20px; padding: 12px 14px; background: linear-gradient(180deg, rgba(23, 40, 33, 0.97), rgba(14, 26, 21, 0.97)); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; }
.pdock.turn { border-color: rgba(242, 193, 78, 0.6); box-shadow: 0 0 36px -8px rgba(242, 193, 78, 0.5); }
.pdock-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pmine { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.pmycards { display: flex; gap: 4px; }
.pactions { display: flex; gap: 8px; align-items: center; }
.pactions .btn.lg { flex: 1 1 0; padding: 12px 6px; min-width: 0; }
.btn.danger-solid { background: rgba(255, 100, 100, 0.16); color: var(--loss); border-color: rgba(255, 100, 100, 0.35); }
.btn.allin { background: linear-gradient(180deg, #b48cff, #7b4fd6); color: #fff; border-color: transparent; }
.raise-panel { padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; gap: 8px; }
.raise-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.raise-panel input[type='range'] { width: 100%; accent-color: var(--gold); height: 28px; }
.pside { grid-area: side; align-self: start; position: sticky; top: 76px; }
.pside .log { max-height: 520px; }

@media (max-width: 1000px) {
	.bgame, .pgame { grid-template-columns: minmax(0, 1fr); }
	.pgame { grid-template-areas: 'table' 'dock' 'side'; }
	.bside, .pside { position: static; }
}
@media (max-width: 760px) {
	.game-switch { gap: 6px; margin: 0 -12px 12px; padding: 0 12px; }
	.game-switch a { padding: 9px 12px; font-size: 13px; }
	.game-hero { padding: 14px; gap: 12px; }
	.gh-glyph { width: 52px; height: 52px; font-size: 30px; border-radius: 14px; }
	.game-hero h1 { font-size: 20px; }
	.mode-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.tier-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.in-arena main { padding: 8px 8px 16px; }
	.bgame-main { gap: 8px; }
	.bplate { padding: 6px 10px 6px 6px; }
	.cp { font-size: 9.6vw; }
	.xp { font-size: 6.4vw; }
	.bactions .btn { flex: 1 1 auto; }
	.ptable-rail { border-radius: 40px; padding: 7px; }
	.ptable { aspect-ratio: 3 / 4.1; border-radius: 34px; }
	.pseat { width: 96px; }
	.pseat.me { width: 120px; }
	.pseat .plate { flex-direction: column; padding: 5px 4px; gap: 2px; border-radius: 14px; text-align: center; }
	.pseat .plate .ava { --s: 30px !important; }
	.pseat .pname { font-size: 10.5px; max-width: 88px; }
	.pseat .card.sm { --w: 24px; height: 34px; }
	.pseat .a-timer { position: absolute; top: -10px; right: -6px; min-width: 32px; font-size: 11px; padding: 2px 5px; }
	.pcenter { width: 84%; top: 46%; }
	.pboard { gap: 4px; }
	.pboard .card { --w: 13.5vw; }
	.pdock { position: sticky; bottom: 0; z-index: 10; margin: 0 -8px; border-radius: 18px 18px 0 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
	.pdock-top { gap: 8px; }
	.pmycards .card { --w: 46px; height: 64px; }
	.pchips.big { font-size: 16px; }
	.pactions { gap: 6px; }
	.pactions .btn.lg { font-size: 14px; padding: 12px 4px; }
}

/* ---------- Sửa tràn ngang trên điện thoại ---------- */
.menu-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); font-weight: 700; font-size: 15px; text-align: left; cursor: pointer; }
.menu-item.danger { color: var(--loss); }
@media (max-width: 760px) {
	/* Phần tử flex mặc định không co nhỏ hơn nội dung (min-width: auto) nên một hàng nút dài là đủ kéo cả khung tràn màn hình. */
	main, .game, .game-main, .rail, .felt, .dock, .dock-top, .bgame, .bgame-main, .pgame, .pdock, .room-wrap, .lobby-hero, .panel, .tcard { min-width: 0; max-width: 100%; }
	body.in-game main, body.in-arena main { width: 100%; overflow-x: clip; }
	.dock-top { flex-wrap: nowrap; }
	.dock-top .plate { flex: 1 1 auto; min-width: 0; }
	.dock-top .pname { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
	.dock-tools { flex: 0 0 auto; gap: 4px; }
	.dock-tools .btn.sm { padding: 6px 9px; min-height: 36px; font-size: 13px; }
	.dock-tools [data-act='menu'] { font-size: 20px; line-height: 1; padding: 4px 12px; }
	.meld-alert small { overflow-wrap: anywhere; }
	.actions .btn.lg { white-space: normal; line-height: 1.2; }
	.hand { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 760px) and (max-height: 720px) {
	/* Màn thấp (Safari hiện đủ thanh địa chỉ + thanh dưới): thu nhỏ các khối để khu bài và nút luôn nằm trong màn hình. */
	:root { --card-w: 44px; --card-h: 62px; }
	.meld-alert { padding: 7px 9px; }
	.meld-alert .ma-icon { width: 30px; height: 30px; }
	.meld-alert b { font-size: 14px; }
	.hand { padding-top: 18px; min-height: calc(var(--card-h) + 24px); }
	.dock .hint { display: none; }
	.dock-top .plate .ava { --s: 28px !important; }
}
.mobile-tools { display: none; }
@media (max-width: 1000px) {
	.mobile-tools { display: flex; justify-content: center; }
	.bside .btools { display: none; }
}
@media (max-width: 760px) {
	.ptable { aspect-ratio: 1 / 1.06; }
	.pseat { width: 88px; }
	.pseat.me { width: 108px; }
	.pseat .ptags .pill { font-size: 9.5px; padding: 1px 5px; }
	.pcenter { width: 78%; gap: 6px; top: 47%; }
	.pboard .card { --w: 12.6vw; }
	.pdock-top { flex-wrap: wrap; }
	.pmine { flex: 1 1 100%; }
	.pdock-top .dock-tools { flex: 1 1 100%; justify-content: flex-end; }
	.pmine .pname { font-size: 13px; }
	.raise-panel { padding: 8px 10px; }
}
@media (max-width: 760px) and (max-height: 720px) {
	.ptable { aspect-ratio: 1 / 0.98; }
	.pmycards .card { --w: 40px; height: 56px; }
	.pdock { gap: 8px; padding-top: 8px; }
}
.pseat.folded .plate { opacity: 0.5; }
@media (max-width: 760px) { .pseat .tag-fold { display: none; } }
/* ================= Bộ thành phần UI (ui.js) ================= */
.ui-toasts {
	position: fixed; z-index: 90; left: 50%; transform: translateX(-50%);
	top: calc(70px + env(safe-area-inset-top)); width: min(420px, calc(100vw - 24px));
	display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.ui-toast {
	position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: center; gap: 10px;
	padding: 11px 12px 11px 12px; border-radius: 16px; color: var(--text);
	background: rgba(18, 31, 26, 0.97); border: 1px solid var(--line-2); backdrop-filter: blur(10px);
	box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.85); animation: uiToastIn 0.32s var(--ease);
	transition: transform 0.2s, opacity 0.2s;
}
.ui-toast.leaving { animation: uiToastOut 0.22s ease forwards; }
.ui-toast.bump { animation: uiBump 0.3s var(--ease); }
@keyframes uiToastIn { from { opacity: 0; transform: translateY(-14px) scale(0.96); } }
@keyframes uiToastOut { to { opacity: 0; transform: translateY(-10px) scale(0.96); } }
@keyframes uiBump { 50% { transform: scale(1.03); } }
.ui-toast-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
.ui-toast.success .ui-toast-ic { background: rgba(63, 214, 139, 0.16); color: var(--win); }
.ui-toast.error .ui-toast-ic { background: rgba(255, 100, 100, 0.16); color: var(--loss); }
.ui-toast.warning .ui-toast-ic { background: rgba(242, 193, 78, 0.16); color: var(--gold); }
.ui-toast.info .ui-toast-ic { background: rgba(90, 169, 255, 0.16); color: var(--info); }
.ui-toast.error { border-color: rgba(255, 100, 100, 0.4); }
.ui-toast-body { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ui-toast-body b { display: block; font-size: 14px; }
.ui-toast-body span { color: rgba(238, 245, 241, 0.88); }
.ui-toast-act { flex: 0 0 auto; border: 0; border-radius: 9px; padding: 6px 10px; background: rgba(255, 255, 255, 0.1); color: var(--gold); font-weight: 800; cursor: pointer; }
.ui-toast-x { flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.ui-toast-x:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.ui-toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; animation: uiBar linear forwards; opacity: 0.7; }
.ui-toast.success .ui-toast-bar { background: var(--win); }
.ui-toast.error .ui-toast-bar { background: var(--loss); }
.ui-toast.warning .ui-toast-bar { background: var(--gold); }
.ui-toast.info .ui-toast-bar { background: var(--info); }
.ui-toast:hover .ui-toast-bar { animation-play-state: paused; }
@keyframes uiBar { to { transform: scaleX(0); } }

.ui-dialog-bg { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; background: rgba(2, 6, 4, 0.66); backdrop-filter: blur(6px); animation: fade 0.18s; }
.ui-dialog-bg.leaving { animation: uiFadeOut 0.18s forwards; }
@keyframes uiFadeOut { to { opacity: 0; } }
.ui-dialog {
	width: min(400px, 100%); padding: 24px 22px 18px; border-radius: 22px; text-align: center;
	background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2);
	box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.9); animation: uiPop 0.26s var(--ease);
}
.ui-dialog-bg.leaving .ui-dialog { animation: uiPopOut 0.18s forwards; }
@keyframes uiPop { from { opacity: 0; transform: translateY(10px) scale(0.94); } }
@keyframes uiPopOut { to { opacity: 0; transform: scale(0.96); } }
.ui-dialog-ic { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 18px; display: grid; place-items: center; background: rgba(90, 169, 255, 0.14); color: var(--info); }
.ui-dialog.danger .ui-dialog-ic { background: rgba(255, 100, 100, 0.15); color: var(--loss); }
.ui-dialog.warning .ui-dialog-ic { background: rgba(242, 193, 78, 0.15); color: var(--gold); }
.ui-dialog.success .ui-dialog-ic { background: rgba(63, 214, 139, 0.15); color: var(--win); }
.ui-dialog h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -0.2px; }
.ui-dialog p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ui-dialog-input { width: 100%; margin-top: 14px; padding: 12px 13px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font-size: 16px; outline: none; }
.ui-dialog-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.15); }
.ui-dialog-err { color: var(--loss); font-size: 13px; min-height: 18px; margin-top: 6px; text-align: left; }
.ui-dialog-btns { display: flex; gap: 10px; margin-top: 20px; }
.ui-dialog-btns .btn { flex: 1; padding: 12px 10px; font-size: 15px; }
.btn.danger-fill { background: linear-gradient(180deg, #ff7a7a, #e03131); color: #fff; border-color: transparent; box-shadow: 0 10px 22px -10px rgba(255, 80, 80, 0.8); }
@media (max-width: 760px) {
	.ui-toasts { top: calc(62px + env(safe-area-inset-top)); }
	.ui-dialog-bg { place-items: end center; padding: 0; }
	.ui-dialog { width: 100%; border-radius: 22px 22px 0 0; padding: 22px 18px calc(16px + env(safe-area-inset-bottom)); animation: sheet 0.28s var(--ease); }
	.ui-dialog-btns .btn { min-height: 48px; }
}

.brand-big { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; letter-spacing: -0.3px; margin-bottom: 6px; }
.brand-big .brand-mark { width: 38px; height: 38px; font-size: 22px; }
.game-switch a:nth-child(2) .gs-glyph { color: #ff6b6b; }
@media (max-width: 760px) {
	.auth .fan, .auth-feats { display: none; }
	.auth { padding-top: 4px; gap: 14px; }
	.auth-hero h1 { font-size: 24px; line-height: 1.2; margin: 6px 0 8px; }
	.auth-hero p { font-size: 13px; margin: 0; }
	.brand-big { font-size: 20px; margin-bottom: 2px; }
}

/* ================= Màn hình ngang ================= */
.land-only { display: none; }
@media (max-width: 760px), (pointer: coarse) { .land-only { display: contents; } }

/* Xoay cả trang 90° khi máy đang dọc (iPhone không khoá được hướng). Chiều rộng mới = chiều cao màn hình và ngược lại. */
html.force-landscape, html.force-landscape body { overflow: hidden; }
html.force-landscape body {
	position: fixed !important; inset: auto !important; top: 0 !important; left: 0 !important;
	width: 100vh !important; width: 100dvh !important; height: 100vw !important; min-height: 0 !important;
	transform-origin: top left; transform: rotate(90deg) translateY(-100%);
}

html.landscape { --card-w: 40px; --card-h: 56px; --card-sw: 21px; --card-sh: 30px; }
html.landscape body.in-game, html.landscape body.in-arena-table {
	position: fixed; inset: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0 !important;
}
html.landscape body.in-game .topbar, html.landscape body.in-arena-table .topbar,
html.landscape body.in-game .tabbar, html.landscape body.in-arena-table .tabbar { display: none !important; }
html.landscape body.in-game main, html.landscape body.in-arena-table main {
	flex: 1 1 auto; min-height: 0; max-width: none; width: 100%; padding: 6px 8px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right));
	display: flex; overflow: hidden;
}

/* Phỏm: bàn phủ kín màn hình, khu bài nổi đè dọc mép dưới */
html.landscape .game { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: stretch; }
html.landscape .game-side { display: none !important; }
html.landscape .game-main { position: relative; flex: 1; min-width: 0; min-height: 0; display: block; align-self: stretch; }
html.landscape .watch-bar { position: absolute; z-index: 6; top: 6px; left: 50%; transform: translateX(-50%); padding: 3px 10px; font-size: 12px; max-width: 70%; }
html.landscape .game-main > .rail { position: absolute; inset: 0; padding: 5px; border-radius: 24px; overflow: hidden; }
html.landscape .felt, html.landscape .felt.n2, html.landscape .felt.n3 {
	height: 100%; min-height: 0; border-radius: 20px; padding: 8px 10px 104px; gap: 4px 8px; overflow: hidden;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
	grid-template-areas: 'left top right' 'left center right' 'left bottom right';
}
html.landscape .felt.n2 { grid-template-areas: '. top .' '. center .' '. bottom .'; }
html.landscape .felt.n3 { grid-template-areas: 'left . right' 'left center right' 'left bottom right'; }
html.landscape .felt::after { inset: 4px; border-radius: 16px; }
html.landscape .spot-left, html.landscape .spot-right { align-self: center; }
html.landscape .fanned { display: none; }
html.landscape .spot { gap: 3px; }
html.landscape .spot .plate { flex-direction: row; padding: 3px 7px 3px 3px; gap: 5px; border-radius: 999px; width: auto; max-width: 100%; }
html.landscape .spot .plate .ava { --s: 28px !important; }
html.landscape .spot .pname { font-size: 11px; }
html.landscape .spot .pmeta .pill { font-size: 9.5px; padding: 0 5px; }
html.landscape .spot .bot-tag, html.landscape .zone-label { display: none; }
html.landscape .center { flex-direction: row; gap: 6px 12px; padding: 0; }
html.landscape .center .deck { --card-w: 34px; --card-h: 48px; }
html.landscape .status-pill { padding: 3px 12px 3px 3px; }
html.landscape .status-pill b { font-size: 13px; }
html.landscape .status-pill small, html.landscape .ticker { font-size: 11px; }
html.landscape .game-main > .dock {
	position: absolute; z-index: 5; left: 10px; right: 10px; bottom: 8px; margin: 0; padding: 0;
	background: none; border: 0; box-shadow: none; backdrop-filter: none; border-radius: 0; overflow: visible;
	display: grid; align-items: end; gap: 4px 10px; pointer-events: none;
	grid-template-columns: minmax(130px, 0.9fr) minmax(0, 3fr) minmax(112px, 0.8fr);
	grid-template-areas: 'alert alert alert' 'me hand actions';
}
html.landscape .game-main > .dock > * { pointer-events: auto; }
html.landscape .dock .meld-alert { grid-area: alert; justify-self: center; margin: 0; padding: 5px 12px; gap: 8px; max-width: 70%; }
html.landscape .meld-alert small { display: none; }
html.landscape .meld-alert b { font-size: 13px; }
html.landscape .meld-alert .ma-icon { width: 26px; height: 26px; }
html.landscape .dock-top { grid-area: me; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; flex-wrap: nowrap; min-width: 0; }
html.landscape .dock-top .plate { padding: 3px 8px 3px 3px; max-width: 100%; background: rgba(6, 22, 14, 0.78); }
html.landscape .dock-top .plate .ava { --s: 28px !important; }
html.landscape .dock-top .pname { font-size: 12px; max-width: 110px; }
html.landscape .dock-top .pmeta .pill { font-size: 9.5px; padding: 0 5px; }
html.landscape .dock-tools { margin: 0; gap: 4px; flex-wrap: wrap; }
html.landscape .dock-tools .btn.sm { min-height: 30px; padding: 4px 8px; font-size: 12px; }
html.landscape .dock-tools .btn.sm:not(.success):not(.primary) { background: rgba(6, 22, 14, 0.78); }
html.landscape .dock-tools .seg, html.landscape .dock-tools .hide-mobile { display: none !important; }
html.landscape .dock-tools [data-act='sortCycle'], html.landscape .dock-tools [data-act='menu'] { display: inline-flex !important; }
html.landscape .dock .hand {
	grid-area: hand; --card-w: 48px; --card-h: 67px; padding: 18px 2px 0; min-height: 0; justify-content: center; overflow: visible;
}
html.landscape .hand .card + .card { margin-left: calc(var(--card-w) * -0.3); }
html.landscape .hand .card.gap { margin-left: 4px; }
html.landscape .hand .card.sel { translate: 0 -14px; }
html.landscape .dock .actions { grid-area: actions; flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; }
html.landscape .dock .actions .btn.lg { flex: 0 0 auto; width: 100%; padding: 8px 6px; font-size: 13px; min-height: 36px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.8); }
html.landscape .dock .actions .waiting { justify-content: center; }
html.landscape .dock .hint, html.landscape .btn kbd { display: none; }
html.landscape .dock.turn, html.landscape .dock.meld-turn { box-shadow: none; border: 0; }
html.landscape .dock.meld-turn .hand .card.in-meld { translate: 0 -8px; }

/* Poker: bàn phủ kín màn hình, bài của mình góc trái dưới, nút góc phải dưới */
html.landscape .pgame { position: relative; flex: 1; min-height: 0; height: 100%; width: 100%; max-width: none; margin: 0; display: block; }
html.landscape .pside { display: none; }
html.landscape .ptable-rail { position: absolute; inset: 0; border-radius: 30px; padding: 6px; }
html.landscape .ptable { aspect-ratio: auto; height: 100%; border-radius: 26px; }
html.landscape .pseat { width: 104px; }
html.landscape .pseat .plate { flex-direction: row; padding: 2px 7px 2px 2px; gap: 4px; border-radius: 999px; }
html.landscape .pseat .plate .ava { --s: 26px !important; }
html.landscape .pseat .pname { font-size: 10.5px; max-width: 64px; }
html.landscape .pseat .card.sm { --w: 21px; height: 30px; }
html.landscape .pseat .ptags .pill { font-size: 9px; padding: 0 4px; }
html.landscape .pseat.me { width: 160px; }
html.landscape .pseat.me .pname { max-width: 90px; }
html.landscape .pseat .a-timer { position: absolute; top: -12px; right: -8px; min-width: 32px; font-size: 11px; padding: 2px 6px; }
html.landscape .pcenter { width: 52%; gap: 5px; top: 44%; }
html.landscape .pboard .card { --w: 40px; height: 56px; }
html.landscape .ppot { padding: 2px 10px; font-size: 12px; }
html.landscape .presult { font-size: 11px; padding: 3px 8px; }
html.landscape .pdock {
	position: absolute; inset: auto 12px 10px 12px; z-index: 5; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
	display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 10px; pointer-events: none;
}
html.landscape .pdock > * { pointer-events: auto; }
html.landscape .pdock-top { flex-direction: column; align-items: flex-start; gap: 5px; flex: 0 1 auto; max-width: 38%; }
html.landscape .pmine { flex: 0 0 auto; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 14px; background: rgba(6, 22, 14, 0.82); border: 1px solid var(--line); }
html.landscape .pmine .pname { font-size: 11px; }
html.landscape .pchips.big { font-size: 14px; }
html.landscape .pmycards .card { --w: 38px; height: 53px; }
html.landscape .pdock-top .dock-tools { flex: 0 0 auto; justify-content: flex-start; }
html.landscape .pdock-top .dock-tools .btn.sm { min-height: 30px; padding: 4px 8px; font-size: 12px; }
html.landscape .pdock-top .dock-tools .btn.sm:not(.success):not(.primary) { background: rgba(6, 22, 14, 0.82); }
html.landscape .pdock > .raise-panel { position: absolute; right: 0; bottom: 92px; width: 250px; padding: 8px 10px; background: rgba(6, 22, 14, 0.9); border: 1px solid var(--line); }
html.landscape .pdock > .pactions { flex: 0 0 auto; width: 250px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
html.landscape .pdock > .pactions .muted { grid-column: 1 / -1; text-align: right; background: rgba(6, 22, 14, 0.82); padding: 6px 10px; border-radius: 10px; }
html.landscape .pactions .btn.lg { padding: 8px 4px; font-size: 13px; min-height: 38px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.8); }

/* Cờ: bàn cờ trái chiếm hết chiều cao, thông tin phải */
html.landscape .bgame { flex: 1; min-height: 0; height: 100%; width: 100%; max-width: none; display: flex; }
html.landscape .bside { display: none; }
html.landscape .bgame-main {
	flex: 1; min-height: 0; display: grid; gap: 6px 10px; align-items: center;
	grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr);
	grid-template-areas: 'board opp' 'board status' 'board actions' 'board me' 'board tools';
}
html.landscape .bgame-main > .btop:first-child { grid-area: opp; }
html.landscape .bgame-main > .board-wrap { grid-area: board; height: 100%; max-height: calc(100vh - 16px); width: auto; max-width: none; aspect-ratio: 1; }
html.landscape.force-landscape .bgame-main > .board-wrap { max-height: calc(100vw - 16px); }
html.landscape .bgame-main > .board-wrap:has(.xboard) { aspect-ratio: 9 / 10; }
html.landscape .board-wrap .cboard, html.landscape .board-wrap .xboard { width: 100%; height: 100%; }
html.landscape .bgame-main > .btop:nth-child(3) { grid-area: me; }
html.landscape .bstatus { grid-area: status; font-size: 13px; }
html.landscape .bactions { grid-area: actions; min-height: 0; }
html.landscape .bgame-main > .mobile-tools { grid-area: tools; display: flex; align-self: end; flex-wrap: wrap; }
html.landscape .cp { font-size: calc((100vh - 30px) / 9.5); }
html.landscape.force-landscape .cp { font-size: calc((100vw - 30px) / 9.5); }
html.landscape .xp { font-size: calc((100vh - 30px) / 15); }
html.landscape.force-landscape .xp { font-size: calc((100vw - 30px) / 15); }
html.landscape .bplate { padding: 4px 8px 4px 4px; }
html.landscape .bplate .ava { --s: 30px !important; }
html.landscape .bgame { align-self: stretch; align-items: stretch; }
html.landscape .game-main:has(.meld-alert) .felt { padding-bottom: 142px; }
/* Các khối nổi của khu bài khi ngang: neo riêng từng góc để cột nút không đẩy cao phần giữa. */
html.landscape .game-main > .dock { inset: 0; left: 0; right: 0; bottom: 0; display: block; }
html.landscape .dock .meld-alert { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); max-width: 56%; white-space: nowrap; animation-name: none; }
html.landscape .dock-top { position: absolute; left: 12px; bottom: 10px; max-width: 22%; }
html.landscape .dock .hand { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); max-width: 58%; padding: 18px 2px 0; }
html.landscape .dock .actions { position: absolute; right: 12px; bottom: 10px; width: 116px; }
html.landscape .game-main:has(.meld-alert) .felt { padding-bottom: 138px; }

/* ---------- Khung nổi khi ngang: bám theo khung màn hình (% / top-bottom), không dùng vh vì khi xoay bằng CSS vh vẫn là chiều dọc ---------- */
html.landscape .chat-panel {
	left: auto !important; right: 8px; top: 8px; bottom: 8px; width: min(360px, 46%); height: auto !important; max-height: none;
	border-radius: 18px; padding-bottom: 0; transform: translateX(16px); opacity: 0;
}
html.landscape .chat-panel.open { transform: none; opacity: 1; }
html.landscape .chat-emotes { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; padding: 6px 8px 0; }
html.landscape .chat-emotes button { font-size: 18px; padding: 3px 0; }
html.landscape .chat-phrases { padding: 6px 8px; }
html.landscape .chat-form { padding: 6px 8px 8px; }
html.landscape .chat-head { padding: 8px 12px; }
html.landscape .modal-bg { place-items: center; padding: 8px; }
html.landscape .modal { width: min(560px, 100%); max-height: calc(100% - 4px); border-radius: 18px; padding: 16px 18px; animation: rise 0.25s var(--ease); }
html.landscape .sheet-grip { display: none; }
html.landscape .result-banner { margin: -16px -18px 10px; padding: 14px 16px 10px; }
html.landscape .result-banner .big { font-size: 28px; }
html.landscape .sticky-actions { position: sticky; bottom: -16px; margin: 10px -18px -16px; padding: 10px 18px; }
html.landscape .ui-dialog-bg { place-items: center; padding: 8px; }
html.landscape .ui-dialog { width: min(420px, 100%); max-height: calc(100% - 4px); overflow-y: auto; border-radius: 20px; padding: 16px 18px 14px; animation: uiPop 0.24s var(--ease); }
html.landscape .ui-dialog-ic { width: 44px; height: 44px; margin-bottom: 8px; }
html.landscape .ui-dialog-btns { margin-top: 14px; }
html.landscape .ui-toasts { top: 8px; width: min(380px, 60%); }

/* Poker ngang: bàn phía trên phủ hết bề ngang, dải điều khiển riêng ở đáy để không đè lên ghế */
html.landscape .ptable-rail { inset: 0 0 104px 0; }
html.landscape .pdock { inset: auto 8px 6px 8px; height: 92px; align-items: stretch; gap: 8px; }
html.landscape .pdock-top { flex: 0 0 auto; max-width: 34%; justify-content: flex-end; }
html.landscape .pdock > .raise-panel { position: static; flex: 1 1 auto; width: auto; min-width: 0; align-self: center; padding: 6px 10px; gap: 4px; }
html.landscape .raise-panel input[type='range'] { height: 22px; }
html.landscape .pdock > .pactions { width: 240px; align-self: center; }
html.landscape .pdock-top .dock-tools { flex-wrap: nowrap; }
html.landscape .pdock-top .dock-tools .btn.sm { padding: 4px 7px; font-size: 11.5px; }
html.landscape .pdock-top { flex: 0 0 36%; max-width: 36%; min-width: 0; }
html.landscape .pdock-top .dock-tools { flex-wrap: wrap; gap: 3px; max-width: 100%; }
html.landscape .pdock-top .dock-tools .btn.sm { padding: 3px 6px; font-size: 11px; min-height: 28px; gap: 3px; }
html.landscape .pdock > .raise-panel { position: relative; z-index: 0; }
html.landscape .pseat:not(.me) { margin-top: 16px; }
html.landscape .pdock > .raise-panel { padding: 4px 10px; gap: 2px; max-height: 88px; }
html.landscape .raise-top { gap: 6px; flex-wrap: nowrap; font-size: 12px; }
html.landscape .raise-top .pick { padding: 4px 9px; font-size: 12px; }
html.landscape .raise-panel input[type='range'] { height: 20px; margin: 0; }
html.landscape .pseat.me { margin-top: -8px; }
html.landscape .pdock > .raise-panel { inset: auto; right: auto; bottom: auto; }
html.landscape .pdock-top { flex-wrap: nowrap; justify-content: flex-end; }
html.landscape .pmycards .card { --w: 34px; height: 48px; }
html.landscape .pmine { padding: 3px 8px 3px 3px; }

/* ---------- Lá vừa bốc ---------- */
.card.new-card { box-shadow: 0 0 0 3px var(--info), 0 0 14px 2px rgba(90, 169, 255, 0.7), 0 8px 16px -8px rgba(0, 0, 0, 0.7); }
.card.new-card::before {
	content: 'MỚI'; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 3;
	padding: 0 6px; border-radius: 6px; background: var(--info); color: #04162b; font-size: 9px; font-weight: 900; line-height: 15px; letter-spacing: 0.5px;
}
.draw-reveal {
	position: fixed; z-index: 80; left: 50%; top: 42%; transform: translate(-50%, -50%); pointer-events: none;
	display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 22px 12px; border-radius: 20px;
	background: rgba(6, 22, 14, 0.88); border: 1px solid rgba(90, 169, 255, 0.5); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.9), 0 0 40px -6px rgba(90, 169, 255, 0.5);
	animation: drawReveal 1.5s var(--ease) forwards;
}
.draw-reveal .card { --w: 86px; height: 120px; box-shadow: 0 0 0 3px var(--info), 0 0 26px rgba(90, 169, 255, 0.8); }
.draw-reveal .dr-label { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.6px; text-transform: uppercase; }
.draw-reveal .dr-name { font-size: 18px; font-weight: 900; }
@keyframes drawReveal {
	0% { opacity: 0; transform: translate(-50%, -30%) scale(0.7); }
	14% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
	22% { transform: translate(-50%, -50%) scale(1); }
	78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	100% { opacity: 0; transform: translate(-50%, 40%) scale(0.5); }
}
html.landscape .draw-reveal { top: 40%; padding: 10px 18px 8px; }
html.landscape .draw-reveal .card { --w: 70px; height: 98px; }
@media (max-width: 760px) { html:not(.landscape) .dock-tools [data-orient] span { display: none; } }
html.landscape .menu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
html.landscape .menu-item { padding: 10px 12px; font-size: 13px; }
html.landscape .modal .seg.big button { padding: 6px; }
html.landscape .modal .eyebrow { margin-top: 8px !important; }
html.landscape .modal h2 { font-size: 17px; }

/* ---------- Chia bài, lá ăn được ---------- */
.deal-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 70; pointer-events: none; }
.deal-card { position: absolute; --w: 38px; width: 38px; height: 54px; border-radius: 6px; }
.card.deal-in { animation: dealIn 0.36s var(--ease) both; }
@keyframes dealIn { from { opacity: 0; transform: translateY(-40px) rotateY(90deg) scale(0.8); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.card.eat-match { box-shadow: 0 0 0 3px #3fd68b, 0 0 16px 2px rgba(63, 214, 139, 0.7), 0 8px 16px -8px rgba(0, 0, 0, 0.7); outline: 2px dashed #fff; outline-offset: -5px; translate: 0 -6px; }
.meld-alert.eat { background: linear-gradient(90deg, #4fe39a, #1fa863); color: #04210f; box-shadow: 0 0 0 2px #fff4, 0 10px 30px -6px rgba(63, 214, 139, 0.8); }
.meld-alert.eat .ma-icon { background: rgba(0, 0, 0, 0.12); }
.card.eat-match { translate: none; }
.draw-reveal { top: auto; bottom: 34%; padding: 8px 14px 6px; gap: 4px; animation-duration: 1.2s; }
.draw-reveal .card { --w: 54px; height: 76px; }
.draw-reveal .dr-name { font-size: 15px; }
.draw-reveal .dr-label { font-size: 11px; }
html.landscape .draw-reveal { top: auto; bottom: 30%; }
html.landscape .draw-reveal .card { --w: 48px; height: 67px; }