/* ===== Pok Deng theme: lacquer maroon + felt green + gold ===== */
:root {
--bg: #1c0f12;
--bg-2: #241316;
--panel: #2b181b;
--panel-2: #351e22;
--line: #4a2a2f;
--ink: #f3e9d8;
--ink-dim: #bfae98;
--gold: #d9a93f;
--gold-2: #f0c96a;
--gold-ink: #2a1a05;
--felt: #13573a;
--felt-2: #0d4029;
--felt-edge: #5a3a1c;
--pos: #6fd39a;
--neg: #ff7a73;
--warn: #f2b84b;
--radius: 14px;
--radius-sm: 9px;
--shadow: 0 10px 30px rgba(0,0,0,.45);
--font-display: "Kanit", "Sarabun", system-ui, sans-serif;
--font-body: "Sarabun", "Kanit", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
background:
radial-gradient(1200px 600px at 80% -10%, rgba(217,169,63,.08), transparent 60%),
radial-gradient(900px 500px at -10% 110%, rgba(19,87,58,.18), transparent 60%),
var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
a { color: var(--gold-2); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 6px; }
strong { font-weight: 600; }
/* ===== Shell & top bar ===== */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; gap: 24px;
padding: 10px 24px;
background: rgba(28,15,18,.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
width: 34px; height: 34px; border-radius: 9px;
display: grid; place-items: center;
background: linear-gradient(145deg, var(--gold-2), var(--gold));
color: var(--gold-ink); font-family: var(--font-display); font-weight: 700; font-size: 18px;
box-shadow: inset 0 -2px 0 rgba(0,0,0,.2);
}
.brand-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: .01em; }
.nav-links { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav-links a {
color: var(--ink-dim); padding: 7px 12px; border-radius: 8px;
font-family: var(--font-display); font-size: 15px;
}
.nav-links a:hover { color: var(--ink); background: var(--panel); text-decoration: none; }
.nav-links a.active { color: var(--gold-2); background: var(--panel-2); }
.user-area { display: flex; align-items: center; gap: 12px; }
.user-name { color: var(--ink-dim); font-size: 14px; }
.balance-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px 5px 8px; border-radius: 999px;
background: var(--panel-2); border: 1px solid var(--line);
font-family: var(--font-display); font-weight: 500; color: var(--gold-2);
}
.balance-badge:hover { text-decoration: none; border-color: var(--gold); }
.chip-dot {
width: 16px; height: 16px; border-radius: 50%;
background: radial-gradient(circle, var(--gold-2) 0 35%, var(--gold) 36% 60%, #fff3 61% 70%, var(--gold) 71%);
box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.content { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px; }
#blazor-error-ui {
display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
padding: 12px 20px; background: #5b1a1a; color: #fff; box-shadow: var(--shadow);
}
#blazor-error-ui .reload { color: var(--gold-2); margin-left: 8px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }
/* ===== Buttons & inputs ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 9px 16px; border-radius: var(--radius-sm);
border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
font-family: var(--font-display); font-size: 15px; font-weight: 500;
cursor: pointer; transition: transform .08s, background .15s, border-color .15s, opacity .15s;
text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--gold); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-gold {
background: linear-gradient(180deg, var(--gold-2), var(--gold));
color: var(--gold-ink); border-color: #b88a2a;
box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
}
.btn-gold:hover { filter: brightness(1.06); border-color: var(--gold-2); }
.btn-quiet { background: transparent; }
.btn-danger { background: #6a2020; border-color: #8a2e2e; }
.btn-danger:hover { background: #7e2626; border-color: var(--neg); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-lg { padding: 13px 24px; font-size: 18px; }
.btn-block { width: 100%; }
.input {
width: 100%; padding: 10px 12px; border-radius: var(--radius-sm);
border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
font: inherit;
}
.input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,169,63,.18); }
.input::placeholder { color: #8d7b6a; }
select.input { cursor: pointer; }
.input-sm { padding: 6px 9px; font-size: 14px; }
.grow { flex: 1; min-width: 160px; }
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-dim); cursor: pointer; }
.check input { accent-color: var(--gold); width: 16px; height: 16px; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-dim); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.alert { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 15px; border: 1px solid; }
.alert-error { background: rgba(255,122,115,.1); border-color: rgba(255,122,115,.4); color: #ffc2bd; }
.alert-ok { background: rgba(111,211,154,.1); border-color: rgba(111,211,154,.4); color: #bff0d3; }
.muted { color: var(--ink-dim); }
.small { font-size: 13px; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.hint { font-size: 13px; color: #9d8a76; margin: 8px 0 0; }
/* ===== Page scaffolding ===== */
.page { display: flex; flex-direction: column; gap: 20px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head p { margin: 4px 0 0; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.title-xl { font-size: clamp(26px, 3vw, 34px); margin: 0; }
.section-title { font-size: 19px; margin: 8px 0 12px; color: var(--ink); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters .input { width: auto; }
.filters .grow { width: auto; }
.empty {
padding: 40px 20px; text-align: center; color: var(--ink-dim);
border: 1px dashed var(--line); border-radius: var(--radius);
}
.center-msg { min-height: 50vh; display: grid; place-items: center; text-align: center; color: var(--ink-dim); gap: 12px; }
.spinner {
width: 36px; height: 36px; border-radius: 50%;
border: 3px solid var(--line); border-top-color: var(--gold);
animation: spin .8s linear infinite; margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ===== Lobby ===== */
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.room-card {
display: flex; flex-direction: column; gap: 12px;
padding: 16px; border-radius: var(--radius);
background: linear-gradient(180deg, var(--panel-2), var(--panel));
border: 1px solid var(--line);
transition: border-color .15s, transform .15s;
}
.room-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.room-card.is-system { border-left: 3px solid var(--felt); }
.room-card h3 { font-size: 18px; margin: 0; }
.rc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--ink-dim); letter-spacing: .05em; }
.tag {
display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px;
background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-dim);
}
.tag-lock { color: var(--warn); border-color: rgba(242,184,75,.4); }
.tag-gold { color: var(--gold-2); border-color: rgba(217,169,63,.5); }
.rc-stakes { font-family: var(--font-display); font-size: 15px; color: var(--gold-2); }
.rc-seats { display: flex; gap: 5px; align-items: center; }
.seat-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line); }
.seat-dot.on { background: var(--pos); border-color: var(--pos); }
.rc-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
.status { font-size: 13px; padding: 2px 9px; border-radius: 999px; background: var(--bg-2); }
.st-waiting { color: var(--ink-dim); }
.st-betting { color: var(--gold-2); background: rgba(217,169,63,.12); }
.st-playerturn { color: var(--pos); background: rgba(111,211,154,.12); }
.st-dealerturn { color: #9fc7ff; background: rgba(159,199,255,.12); }
.st-result { color: #e8b7ff; background: rgba(232,183,255,.12); }
/* ===== Modal ===== */
.modal-backdrop {
position: fixed; inset: 0; z-index: 100;
background: rgba(10,4,6,.72); backdrop-filter: blur(3px);
display: grid; place-items: center; padding: 20px;
animation: fade .15s ease-out;
}
.modal {
width: min(560px, 100%); max-height: 90vh; overflow: auto;
background: var(--panel); border: 1px solid var(--line);
border-radius: 18px; padding: 24px; box-shadow: var(--shadow);
animation: pop .18s ease-out;
}
.modal-sm { width: min(420px, 100%); }
.modal h2 { font-size: 22px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
/* ===== Auth ===== */
.auth-wrap { min-height: calc(100vh - 120px); display: grid; place-items: center; padding: 20px; }
.auth-card {
width: min(420px, 100%); padding: 32px 28px 26px;
background: linear-gradient(180deg, var(--panel-2), var(--panel));
border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 28px; text-align: center; margin-bottom: 4px; }
.auth-card > p { text-align: center; margin-top: 0; }
.auth-fan { position: relative; height: 96px; margin: -6px auto 14px; width: 160px; }
.fan-card {
position: absolute; left: 50%; bottom: 0; width: 56px; height: 80px; margin-left: -28px;
border-radius: 7px; background: #fbf6ec; color: #1c0f12; border: 1px solid #d8ccb7;
display: grid; place-items: center; font-size: 24px; font-family: var(--font-display);
box-shadow: 0 6px 14px rgba(0,0,0,.4); transform-origin: 50% 120%;
}
.fan-card:nth-child(1) { transform: rotate(-18deg); }
.fan-card:nth-child(2) { transform: rotate(0deg); color: #b3232b; }
.fan-card:nth-child(3) { transform: rotate(18deg); }
.auth-switch { text-align: center; margin-top: 16px; color: var(--ink-dim); font-size: 14px; }
/* ===== Room page ===== */
.room-page { display: flex; flex-direction: column; gap: 14px; }
.room-top { display: flex; align-items: center; gap: 12px; }
.room-title { flex: 1; min-width: 0; }
.room-title h1 { font-size: 22px; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallet-mini { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-display); color: var(--gold-2); line-height: 1.2; }
.wallet-mini strong { font-size: 18px; }
.room-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.table-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* ไอคอนปุ่มกลม */
.icon-btn {
position: relative; flex-shrink: 0;
width: 42px; height: 42px; border-radius: 50%;
display: inline-grid; place-items: center;
background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s, transform .08s;
}
.icon-btn:hover { border-color: var(--gold); text-decoration: none; }
.icon-btn:active { transform: scale(.94); }
.icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.icon-btn.lg { width: 50px; height: 50px; }
.icon-btn.is-live { background: rgba(111,211,154,.18); border-color: var(--pos); color: var(--pos); }
.icon-btn.is-off { background: rgba(255,122,115,.16); border-color: rgba(255,122,115,.6); color: var(--neg); }
.icon-btn[data-speaking] { box-shadow: 0 0 0 3px rgba(111,211,154,.45); }
.back-btn { color: var(--ink-dim); }
.badge {
position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px;
border-radius: 999px; background: var(--neg); color: #fff; font-size: 11px; font-weight: 600;
display: grid; place-items: center; line-height: 1; border: 2px solid var(--bg);
}
.badge-voice { background: var(--pos); color: #0d2a1b; }
.mobile-actions { display: none; gap: 8px; }
.icon { display: block; flex-shrink: 0; }
/* ===== โต๊ะกลม ===== */
.table-stage {
--rx: 45%; --ry: 42%; /* รัศมีวงที่นั่ง */
--brx: 27%; --bry: 24%; /* รัศมีวงชิปเดิมพันบนโต๊ะ */
--seat-w: 124px;
position: relative; width: 100%; aspect-ratio: 16 / 10;
margin: 34px 0 44px;
}
.felt {
position: absolute; inset: 11% 10%;
border-radius: 50%;
background:
radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.09), transparent 60%),
repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 2px, transparent 2px 5px),
radial-gradient(ellipse at center, var(--felt), var(--felt-2));
border: 12px solid var(--felt-edge);
box-shadow:
inset 0 0 0 2px rgba(217,169,63,.45), inset 0 0 70px rgba(0,0,0,.5),
0 0 0 3px #3b2412, 0 18px 40px rgba(0,0,0,.55);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
padding: 4% 12%;
transition: box-shadow .3s;
}
.felt.phase-betting { box-shadow: inset 0 0 0 2px var(--gold-2), inset 0 0 70px rgba(0,0,0,.5), 0 0 0 3px #3b2412, 0 18px 40px rgba(0,0,0,.55); }
.has-dealer .felt { justify-content: flex-start; padding-top: 3%; }
.has-dealer .table-center { margin-top: auto; margin-bottom: auto; }
.dealer-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dealer-tag {
font-family: var(--font-display); font-size: 13px; padding: 2px 12px; border-radius: 999px;
background: rgba(0,0,0,.35); color: var(--gold-2); border: 1px solid rgba(217,169,63,.4);
}
.hand { display: flex; align-items: center; justify-content: center; }
.hand .pcard + .pcard { margin-left: -14px; }
.hand-empty { width: 40px; height: 57px; border-radius: 6px; border: 2px dashed rgba(255,255,255,.18); }
.hand-empty + .hand-empty { margin-left: 6px; }
.hand-label {
font-size: 12px; padding: 1px 9px; border-radius: 999px; white-space: nowrap;
background: rgba(0,0,0,.5); color: var(--ink);
}
.hand-label.big { font-size: 14px; font-family: var(--font-display); color: var(--gold-2); }
.table-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px; width: min(280px, 100%); }
.pvp-mark { font-family: var(--font-display); font-size: 13px; color: rgba(255,255,255,.55); letter-spacing: .02em; }
.phase-name { font-family: var(--font-display); font-size: 18px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.countdown { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--gold-2); text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.timebar { width: 100%; height: 5px; border-radius: 999px; background: rgba(0,0,0,.35); overflow: hidden; }
.timebar > div { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width .4s linear; }
.banner {
padding: 4px 14px; border-radius: 999px; font-family: var(--font-display); font-size: 14px;
background: rgba(0,0,0,.45); color: var(--gold-2); border: 1px solid rgba(217,169,63,.45);
animation: pop .2s ease-out; max-width: 100%;
}
/* ที่นั่งรอบโต๊ะ: ตำแหน่งจาก --cx/--cy (cos/sin ของมุม) ที่คำนวณในหน้า Room */
.seat-slot {
position: absolute; z-index: 2;
left: calc(50% + var(--cx) * var(--rx));
top: calc(50% + var(--cy) * var(--ry));
transform: translate(-50%, -50%);
width: var(--seat-w);
display: flex; flex-direction: column; align-items: center; gap: 3px;
text-align: center;
transition: left .4s ease, top .4s ease;
}
.seat-slot.mine { --seat-w: 150px; z-index: 3; }
.avatar {
position: relative; width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center;
font-family: var(--font-display); font-size: 20px; font-weight: 600; color: #fff;
background: radial-gradient(circle at 35% 30%, hsl(var(--h, 20) 55% 52%), hsl(var(--h, 20) 50% 30%));
border: 2px solid rgba(243,233,216,.8);
box-shadow: 0 4px 12px rgba(0,0,0,.5);
transition: box-shadow .15s, border-color .2s, filter .2s;
}
.seat-slot.mine .avatar { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(217,169,63,.35), 0 4px 12px rgba(0,0,0,.5); }
.avatar.ghost { background: rgba(0,0,0,.25); border: 2px dashed rgba(255,255,255,.25); color: rgba(255,255,255,.35); box-shadow: none; font-size: 22px; }
.avatar-mic {
position: absolute; right: -4px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%;
display: grid; place-items: center; background: var(--pos); color: #0d2a1b; border: 2px solid var(--bg);
}
.avatar-mic.off { background: var(--neg); color: #fff; }
.seat-slot[data-speaking] .avatar { border-color: var(--pos); box-shadow: 0 0 0 4px rgba(111,211,154,.4), 0 0 20px rgba(111,211,154,.6); }
.seat-name {
max-width: 100%; padding: 1px 9px; border-radius: 999px;
background: rgba(0,0,0,.55); font-family: var(--font-display); font-size: 13px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seat-slot.mine .seat-name { background: var(--gold); color: var(--gold-ink); }
.seat-info { display: flex; gap: 4px; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 18px; }
.state-pill { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.45); color: rgba(255,255,255,.75); }
.state-pill.ready { background: rgba(217,169,63,.25); color: var(--gold-2); }
.state-pill.thinking { animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; } }
.empty-slot { opacity: .55; }
.empty-slot .seat-name { color: var(--ink-dim); }
.seat.out-win .avatar { border-color: var(--pos); box-shadow: 0 0 0 4px rgba(111,211,154,.35), 0 0 24px rgba(111,211,154,.55); }
.seat.out-lose .avatar { filter: grayscale(.6) brightness(.8); }
.float-net {
position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
font-family: var(--font-display); font-size: 18px; font-weight: 700; white-space: nowrap;
text-shadow: 0 2px 6px rgba(0,0,0,.7);
animation: floatUp 1.6s ease-out both;
}
.float-net.up { color: var(--pos); }
.float-net.down { color: var(--neg); }
@keyframes floatUp { from { opacity: 0; transform: translate(-50%, 14px) scale(.7); } 30% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } to { transform: translate(-50%, 0) scale(1); } }
/* ชิปที่วางบนโต๊ะหน้าที่นั่ง */
.table-bet {
position: absolute; z-index: 1;
left: calc(50% + var(--cx) * var(--brx));
top: calc(50% + var(--cy) * var(--bry));
transform: translate(-50%, -50%);
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 9px 2px 4px; border-radius: 999px;
background: rgba(0,0,0,.5); color: var(--gold-2);
font-family: var(--font-display); font-size: 13px;
animation: chipIn .35s cubic-bezier(.2,.9,.3,1.4) both;
}
.table-bet.tb-win { box-shadow: 0 0 0 2px var(--pos), 0 0 14px rgba(111,211,154,.5); color: var(--pos); }
.table-bet.tb-lose { opacity: .45; }
@keyframes chipIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }
/* ===== แผงควบคุมด้านล่างโต๊ะ ===== */
.controls {
padding: 14px 16px; border-radius: var(--radius);
background: var(--panel); border: 1px solid var(--line);
display: flex; flex-direction: column; gap: 10px;
}
.bet-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bet-submit { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 220px; }
.bet-submit .bet-input { flex: 1; min-width: 90px; }
.chip-rack { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
display: grid; place-items: center; cursor: pointer;
font-family: var(--font-display); font-size: 13px; font-weight: 600; color: #fff;
background:
radial-gradient(circle, #7a1d2a 0 48%, transparent 49%),
repeating-conic-gradient(#7a1d2a 0 30deg, #f3e9d8 30deg 45deg);
border: 2px solid rgba(0,0,0,.35);
box-shadow: 0 3px 0 rgba(0,0,0,.4);
transition: transform .1s, box-shadow .1s;
}
.chip:nth-child(2) { background: radial-gradient(circle, #1f4f86 0 48%, transparent 49%), repeating-conic-gradient(#1f4f86 0 30deg, #f3e9d8 30deg 45deg); }
.chip:nth-child(3) { background: radial-gradient(circle, #1a6a42 0 48%, transparent 49%), repeating-conic-gradient(#1a6a42 0 30deg, #f3e9d8 30deg 45deg); }
.chip:nth-child(4) { background: radial-gradient(circle, #222 0 48%, transparent 49%), repeating-conic-gradient(#222 0 30deg, #f3e9d8 30deg 45deg); }
.chip:nth-child(5) { background: radial-gradient(circle, #6b3fa0 0 48%, transparent 49%), repeating-conic-gradient(#6b3fa0 0 30deg, #f3e9d8 30deg 45deg); }
.chip:nth-child(6) { background: radial-gradient(circle, #9a6a12 0 48%, transparent 49%), repeating-conic-gradient(#9a6a12 0 30deg, #f3e9d8 30deg 45deg); }
.chip:hover { transform: translateY(-2px); }
.chip.selected { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--gold-2), 0 5px 0 rgba(0,0,0,.4); }
.bet-input { width: 140px; }
.control-line { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.decide { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.decide-hand { display: flex; gap: 10px; align-items: center; }
.decide-btns { display: flex; gap: 10px; }
.decide-btns .btn { min-width: 110px; }
.result-line { font-family: var(--font-display); font-size: 18px; padding: 10px 14px; border-radius: var(--radius-sm); text-align: center; display: flex; gap: 10px; justify-content: center; }
.result-win { background: rgba(111,211,154,.12); color: var(--pos); }
.result-lose { background: rgba(255,122,115,.12); color: var(--neg); }
.result-draw { background: rgba(255,255,255,.06); color: var(--ink); }
/* ===== คอลัมน์ข้าง (เดสก์ท็อป) / แผ่นเลื่อน (มือถือ) ===== */
.side-col { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 76px; }
.sheet-head, .sheet-backdrop { display: none; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.panel-title { font-size: 16px; margin: 0 0 10px; color: var(--gold-2); }
.chat { display: flex; flex-direction: column; gap: 10px; }
.chat-log {
height: 280px; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 6px;
padding: 8px; background: var(--bg-2); border-radius: var(--radius-sm); font-size: 14px;
overscroll-behavior: contain;
}
.msg { word-break: break-word; }
.msg.sys { color: #9d8a76; font-size: 13px; font-style: italic; }
.who { color: var(--gold-2); font-weight: 600; margin-right: 6px; }
.chat-input { display: flex; gap: 8px; }
.rules { font-size: 14px; color: var(--ink-dim); }
.rules summary { cursor: pointer; color: var(--ink); font-family: var(--font-display); }
.rules ul { padding-left: 18px; margin: 8px 0 0; }
.rules li { margin: 3px 0; }
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 200;
padding: 10px 18px; border-radius: 999px; max-width: calc(100vw - 32px);
background: var(--panel-2); border: 1px solid var(--gold); color: var(--ink);
box-shadow: var(--shadow); animation: pop .2s ease-out;
}
/* ===== ป๊อปอัปผลแพ้ชนะ ===== */
.result-pop-backdrop {
position: fixed; inset: 0; z-index: 150;
display: grid; place-items: center; padding: 20px;
background: rgba(10,4,6,.55); backdrop-filter: blur(3px);
animation: fade .2s ease-out;
}
.result-pop {
position: relative; overflow: hidden; isolation: isolate;
width: min(340px, 100%); padding: 28px 22px 20px; border-radius: 24px; text-align: center;
background: linear-gradient(180deg, var(--panel-2), var(--panel));
border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.6);
display: flex; flex-direction: column; align-items: center; gap: 8px;
animation: popIn .5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes popIn { from { opacity: 0; transform: scale(.6) translateY(30px); } }
.rp-win { border-color: var(--gold); background: linear-gradient(180deg, #4a3212, #2b181b 70%); }
.rp-lose { border-color: rgba(255,122,115,.5); background: linear-gradient(180deg, #3d1518, #241316 70%); animation: popIn .4s ease-out both, shake .45s .35s ease-in-out; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.rp-burst {
position: absolute; z-index: -1; left: 50%; top: 70px; width: 520px; height: 520px; margin: -260px 0 0 -260px;
background: repeating-conic-gradient(rgba(240,201,106,.16) 0 10deg, transparent 10deg 20deg);
border-radius: 50%; opacity: 0;
-webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%);
mask-image: radial-gradient(circle, #000 20%, transparent 65%);
}
.rp-win .rp-burst { opacity: 1; animation: spin 14s linear infinite; }
.rp-title {
font-family: var(--font-display); font-weight: 700; font-size: 54px; line-height: 1.05;
}
.rp-win .rp-title {
background: linear-gradient(180deg, #fff3c4, var(--gold-2) 45%, var(--gold) 80%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 3px 0 rgba(0,0,0,.35));
}
.rp-lose .rp-title { color: var(--neg); }
.rp-draw .rp-title { color: var(--ink); }
.rp-special {
font-family: var(--font-display); font-size: 15px; padding: 3px 14px; border-radius: 999px;
background: var(--gold); color: var(--gold-ink); animation: pop .3s .25s both;
}
.rp-amount { font-family: var(--font-display); font-size: 38px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-amount small { font-size: 16px; font-weight: 500; color: var(--ink-dim); }
.rp-win .rp-amount { color: var(--pos); }
.rp-lose .rp-amount { color: var(--neg); }
.rp-deng {
position: absolute; top: 16px; right: 14px;
width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1;
border: 3px double currentColor; transform: rotate(14deg);
animation: stamp .45s .35s cubic-bezier(.2,1.6,.4,1) both;
}
.rp-win .rp-deng { color: var(--gold-2); background: rgba(217,169,63,.12); }
.rp-lose .rp-deng { color: var(--neg); background: rgba(255,122,115,.1); }
@keyframes stamp { from { opacity: 0; transform: rotate(14deg) scale(2.4); } }
.rp-hands { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 8px; }
.rp-hands > div { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 10px; background: rgba(0,0,0,.28); min-width: 0; }
.rp-hands strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.rp-quiet {
margin-top: 2px; padding: 4px 8px; border: none; background: none; cursor: pointer;
font: inherit; font-size: 12px; color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px;
}
.rp-quiet:hover { color: var(--ink); }
/* ===== แถบผลลัพธ์เล็ก (แพ้/เสมอ) ไม่บังโต๊ะ จางหายเอง ===== */
.result-bar {
position: fixed; z-index: 140; left: 50%;
top: calc(env(safe-area-inset-top, 0px) + 70px);
width: min(420px, calc(100% - 24px)); transform: translateX(-50%);
padding: 10px 14px; border-radius: 14px; cursor: pointer;
background: rgba(36,19,22,.94); border: 1px solid var(--line);
box-shadow: 0 10px 28px rgba(0,0,0,.45); backdrop-filter: blur(4px);
display: flex; flex-direction: column; gap: 4px;
animation: rbIn .3s ease-out both, rbOut .5s 4s ease-in forwards;
}
.rb-lose { border-left: 4px solid var(--neg); }
.rb-draw { border-left: 4px solid var(--ink-dim); }
.rb-win { border-left: 4px solid var(--gold); }
.rb-head { display: flex; align-items: baseline; gap: 10px; }
.rb-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.rb-lose .rb-title, .rb-lose .rb-amount { color: var(--neg); }
.rb-win .rb-title, .rb-win .rb-amount { color: var(--pos); }
.rb-amount { font-family: var(--font-display); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rb-amount small { font-size: 12px; font-weight: 500; color: var(--ink-dim); }
.rb-deng { margin-left: auto; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--ink-dim); }
.rb-detail { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--ink-dim); }
.rb-detail b { color: var(--ink); font-weight: 500; }
@keyframes rbIn { from { opacity: 0; transform: translate(-50%, -12px); } }
@keyframes rbOut { to { opacity: 0; transform: translate(-50%, -8px); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
.result-bar { animation: rbOut .01s 4s forwards; }
}
/* ตั้งค่าการแสดงผลแพ้ชนะ */
.choice-grid.choice-grid-3 { grid-template-columns: repeat(3, 1fr); }
.me-settings { padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.confetti { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.confetti span {
position: absolute; top: -12px; left: calc(var(--i) * 5.6% + 1%);
width: 8px; height: 13px; border-radius: 2px; background: var(--gold-2);
animation: confetti 1.9s calc(var(--i) * 70ms) ease-in both;
}
.confetti span:nth-child(3n+1) { background: var(--pos); width: 6px; }
.confetti span:nth-child(3n+2) { background: #ff8fa3; height: 9px; }
.confetti span:nth-child(4n) { background: #9fc7ff; }
@keyframes confetti {
from { transform: translateY(0) rotate(0); opacity: 1; }
to { transform: translateY(480px) rotate(calc(var(--i) * 97deg + 360deg)); opacity: 0; }
}
/* ===== Playing cards ===== */
.pcard {
--w: 58px;
position: relative; width: var(--w); height: calc(var(--w) * 1.42);
border-radius: 8px; flex-shrink: 0;
box-shadow: 0 4px 10px rgba(0,0,0,.4);
animation: deal .35s cubic-bezier(.2,.8,.3,1) both;
animation-delay: calc(var(--i, 0) * 110ms);
}
.pcard.sm { --w: 40px; border-radius: 6px; }
.pcard.face { background: #fbf6ec; border: 1px solid #d8ccb7; font-family: var(--font-display); }
.pcard.red { color: #b3232b; }
.pcard.black { color: #1c1416; }
.pcard.back {
background:
repeating-linear-gradient(45deg, rgba(217,169,63,.35) 0 2px, transparent 2px 7px),
repeating-linear-gradient(-45deg, rgba(217,169,63,.35) 0 2px, transparent 2px 7px),
#6b1824;
border: 3px solid #fbf6ec;
}
.corner { position: absolute; font-size: 13px; line-height: 1; text-align: center; font-weight: 600; }
.corner.tl { top: 4px; left: 5px; }
.corner.br { bottom: 4px; right: 5px; transform: rotate(180deg); }
.pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; }
.pcard.sm .corner { font-size: 10px; top: 3px; left: 3px; }
.pcard.sm .corner.br { top: auto; left: auto; bottom: 3px; right: 3px; }
.pcard.sm .pip { font-size: 17px; }
@keyframes deal { from { opacity: 0; transform: translateY(-24px) rotate(-8deg) scale(.9); } }
/* ===== Wallet ===== */
.wallet-hero {
display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
padding: 24px; border-radius: 18px;
background: linear-gradient(135deg, #3a1f14, var(--panel) 60%);
border: 1px solid rgba(217,169,63,.35);
}
.balance-big { font-family: var(--font-display); font-size: clamp(32px, 5vw, 46px); color: var(--gold-2); line-height: 1.1; }
.bonus-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.package-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.package {
display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--radius);
background: var(--panel); border: 1px solid var(--line); position: relative;
}
.package.featured { border-color: var(--gold); background: linear-gradient(180deg, rgba(217,169,63,.1), var(--panel)); }
.package h3 { font-size: 17px; margin: 0; }
.pkg-chips { font-family: var(--font-display); font-size: 26px; color: var(--gold-2); }
.package .btn { margin-top: auto; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data th { font-family: var(--font-display); font-weight: 500; color: var(--ink-dim); background: var(--panel-2); position: sticky; top: 0; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: rgba(255,255,255,.025); }
table.data .num, .num { text-align: right; font-variant-numeric: tabular-nums; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.adjust { display: flex; gap: 6px; align-items: center; }
.adjust .input { width: 110px; }
.status-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; background: var(--bg-2); }
.st-pending { color: var(--warn); background: rgba(242,184,75,.12); }
.st-paid { color: var(--pos); background: rgba(111,211,154,.12); }
.st-cancelled { color: var(--ink-dim); }
.st-expired { color: var(--neg); background: rgba(255,122,115,.1); }
.pay { text-align: center; }
.fake-qr { width: 200px; height: 200px; margin: 12px auto; display: block; border-radius: 10px; }
.pay-summary { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; text-align: left; }
.pay-summary > div { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background: var(--bg-2); }
/* ===== History / stats ===== */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.stat > span:first-child, .stat .muted { display: block; font-size: 13px; }
.stat strong { font-family: var(--font-display); font-size: 24px; display: block; }
.mini-hand { display: inline-flex; gap: 3px; }
.mini {
display: inline-block; padding: 0 5px; border-radius: 4px; background: #fbf6ec; color: #1c1416;
font-family: var(--font-display); font-size: 12px; line-height: 20px;
}
.mini.red { color: #b3232b; }
/* ===== Tabs & leaderboard ===== */
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); width: fit-content; flex-wrap: wrap; }
.tab {
padding: 7px 14px; border-radius: 9px; border: none; background: transparent; color: var(--ink-dim);
font-family: var(--font-display); font-size: 14px; cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.active { background: var(--panel-2); color: var(--gold-2); }
.leader-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.leader-list li {
display: flex; align-items: center; gap: 14px; padding: 12px 16px;
border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line);
}
.rank {
width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
font-family: var(--font-display); font-weight: 600; background: var(--bg-2); color: var(--ink-dim);
}
.lname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvalue { font-family: var(--font-display); color: var(--gold-2); font-variant-numeric: tabular-nums; }
.top1 { border-color: var(--gold) !important; background: linear-gradient(90deg, rgba(217,169,63,.14), var(--panel)) !important; }
.top1 .rank { background: var(--gold); color: var(--gold-ink); }
.top2 .rank { background: #c9c3b8; color: #222; }
.top3 .rank { background: #b8743a; color: #fff; }
/* ===== Room rule tags ===== */
.rc-rules { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 4px; }
.tag-dealer { color: #f3d27a; border-color: rgba(217,169,63,.45); background: rgba(217,169,63,.08); }
.tag-pvp { color: #9fe0bb; border-color: rgba(111,211,154,.45); background: rgba(111,211,154,.08); }
.tag-fee { color: #f0b6a0; border-color: rgba(230,140,110,.45); background: rgba(230,140,110,.08); }
.fee-hint { display: flex; flex-direction: column; gap: 2px; color: #f0c9a0; }
.tag-draw { color: #c7d8ff; border-color: rgba(159,199,255,.35); }
.tag-two { color: #ffc6a8; border-color: rgba(255,170,130,.4); }
.tag-voice { color: #e8b7ff; border-color: rgba(232,183,255,.4); }
/* ===== Create-room choices ===== */
.choice { border: none; padding: 0; margin: 0; min-width: 0; }
.choice legend { font-size: 14px; color: var(--ink-dim); margin-bottom: 6px; padding: 0; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-opt {
display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
padding: 12px; border-radius: var(--radius-sm); cursor: pointer;
background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); font: inherit;
transition: border-color .15s, background .15s;
}
.choice-opt strong { font-family: var(--font-display); font-weight: 500; font-size: 15px; }
.choice-opt span { font-size: 13px; color: var(--ink-dim); line-height: 1.4; }
.choice-opt:hover { border-color: var(--gold); }
.choice-opt.on { border-color: var(--gold); background: rgba(217,169,63,.12); box-shadow: inset 0 0 0 1px var(--gold); }
.choice-opt.on strong { color: var(--gold-2); }
/* ===== PvP table center ===== */
/* ===== Voice ===== */
.voice { display: flex; flex-direction: column; gap: 10px; }
.voice .panel-title { margin-bottom: 0; }
.voice .alert { margin: 0; }
.voice .hint { margin: 0; }
.voice-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.voice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.voice-list li {
display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px;
background: var(--bg-2); font-size: 14px; transition: background .15s;
}
.vname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex-shrink: 0; transition: background .1s, box-shadow .1s; }
.voice-list li[data-speaking] { background: rgba(111,211,154,.12); }
.voice-list li[data-speaking] .vdot { background: var(--pos); box-shadow: 0 0 0 4px rgba(111,211,154,.25); }
.voice-list li.muted-peer .vdot { background: var(--neg); }
.mic {
font-size: 10px; padding: 1px 6px; border-radius: 999px; margin-left: 4px;
background: rgba(111,211,154,.2); color: var(--pos); font-family: var(--font-body);
}
.mic.off { background: rgba(255,122,115,.18); color: var(--neg); }
@media (max-width: 520px) {
.choice-grid { grid-template-columns: 1fr; }
.choice-grid.choice-grid-3 { grid-template-columns: 1fr; }
}
/* ===== สถานะการเชื่อมต่อเสียง ===== */
.vstate { display: block; font-size: 11px; line-height: 1.3; }
.vstate.ok { color: var(--pos); }
.vstate.wait { color: var(--warn); }
.vstate.bad { color: var(--neg); }
.tap-to-hear {
position: fixed; left: 50%; top: 76px; transform: translateX(-50%); z-index: 120;
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px; border-radius: 999px; border: none; cursor: pointer;
background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink);
font-family: var(--font-display); font-size: 15px; box-shadow: var(--shadow);
animation: pop .25s ease-out, pulse 1.6s 0.3s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(217,169,63,.25), var(--shadow); } }
/* ===== หน้าเลือกเกม ===== */
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.game-card {
position: relative; overflow: hidden; isolation: isolate;
display: flex; flex-direction: column; gap: 14px; padding: 22px;
border-radius: 22px; color: var(--ink); text-decoration: none;
background: linear-gradient(160deg, var(--panel-2), var(--panel));
border: 1px solid var(--line); box-shadow: var(--shadow);
transition: transform .18s, border-color .18s, box-shadow .18s;
}
.game-card:hover { text-decoration: none; transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.game-card::before {
content: ""; position: absolute; z-index: -1; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1;
border-radius: 50%; opacity: .5; filter: blur(10px);
}
.game-pokdeng::before { background: radial-gradient(circle, rgba(19,87,58,.8), transparent 70%); }
.game-kaoke::before { background: radial-gradient(circle, rgba(217,169,63,.45), transparent 70%); }
.game-art { position: relative; height: 130px; display: flex; justify-content: center; align-items: flex-end; }
.gc-card {
position: absolute; bottom: 0; left: 50%;
width: 72px; height: 102px; margin-left: -36px; border-radius: 9px;
background: #fbf6ec; color: #1c1416; border: 1px solid #d8ccb7;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
font-family: var(--font-display); box-shadow: 0 8px 18px rgba(0,0,0,.45);
transform-origin: 50% 130%;
transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * 16deg));
transition: transform .25s ease;
}
.gc-card.red { color: #b3232b; }
.gc-card b { font-size: 26px; line-height: 1; }
.gc-card i { font-style: normal; font-size: 22px; line-height: 1; }
.game-card:hover .gc-card { transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * 22deg)) translateY(-4px); }
.game-body h2 { font-size: 28px; margin: 0 0 4px; }
.game-body p { margin: 0 0 10px; }
.game-meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-dim); margin-bottom: 10px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.live-dot.on { background: var(--pos); box-shadow: 0 0 0 4px rgba(111,211,154,.2); animation: blink 1.6s ease-in-out infinite; }
.game-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.game-cta { margin-top: auto; align-self: stretch; }
.back-link { display: inline-block; font-size: 14px; color: var(--ink-dim); margin-bottom: 4px; }
/* ===== เก้าเก ===== */
.pot {
display: flex; flex-direction: column; align-items: center; gap: 0;
padding: 6px 16px 8px; border-radius: 16px; background: rgba(0,0,0,.35);
border: 1px solid rgba(217,169,63,.3); min-width: 120px;
}
.pot-label { font-size: 12px; color: rgba(255,255,255,.65); }
.pot-amount { font-family: var(--font-display); font-size: 24px; color: var(--gold-2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pot-chips { display: flex; height: 0; overflow: visible; position: relative; top: -18px; }
.pot-chips i {
width: 22px; height: 22px; border-radius: 50%; margin: 0 -4px;
background: radial-gradient(circle, #7a1d2a 0 45%, transparent 46%), repeating-conic-gradient(#7a1d2a 0 30deg, #f3e9d8 30deg 45deg);
border: 2px solid rgba(0,0,0,.35); opacity: 0; transform: scale(.4);
transition: opacity .3s, transform .3s cubic-bezier(.2,1.4,.4,1);
}
.pot-chips i:nth-child(2) { background: radial-gradient(circle, #1f4f86 0 45%, transparent 46%), repeating-conic-gradient(#1f4f86 0 30deg, #f3e9d8 30deg 45deg); transition-delay: .06s; }
.pot-chips i:nth-child(3) { background: radial-gradient(circle, #1a6a42 0 45%, transparent 46%), repeating-conic-gradient(#1a6a42 0 30deg, #f3e9d8 30deg 45deg); transition-delay: .12s; }
.pot.has-pot .pot-chips i { opacity: 1; transform: none; }
.pot.has-pot { padding-top: 12px; }
.dealer-btn {
position: absolute; left: -5px; top: -4px; width: 18px; height: 18px; border-radius: 50%;
display: grid; place-items: center; font-size: 10px; font-weight: 700;
background: #fbf6ec; color: #1c1416; border: 2px solid var(--bg);
}
.seat-slot.to-act .avatar { border-color: var(--gold-2); box-shadow: 0 0 0 4px rgba(240,201,106,.45), 0 0 22px rgba(240,201,106,.55); animation: turnPulse 1.2s ease-in-out infinite; }
@keyframes turnPulse { 50% { box-shadow: 0 0 0 7px rgba(240,201,106,.2), 0 0 26px rgba(240,201,106,.4); } }
.seat-slot.folded .avatar { filter: grayscale(1) brightness(.6); }
.seat-slot.folded .hand { opacity: .35; }
.kk-actions { flex-wrap: wrap; }
.swap-box { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.swap-pick { display: flex; gap: 10px; justify-content: center; }
.swap-card {
padding: 0; border: none; background: none; cursor: pointer; border-radius: 10px;
transition: transform .15s;
}
.swap-card .pcard { animation: none; }
.swap-card:hover { transform: translateY(-4px); }
.swap-card.picked { transform: translateY(-12px); }
.swap-card.picked .pcard { box-shadow: 0 0 0 3px var(--gold-2), 0 10px 20px rgba(0,0,0,.5); }
.swap-box .decide-btns { width: 100%; justify-content: center; }
/* ===== ลุ้นไพ่ (เปิดเองทีละใบ) ===== */
.squeeze { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sq-cards { display: flex; gap: 14px; justify-content: center; padding: 8px 4px 2px; }
.sq-card {
--w: 74px;
position: relative; flex-shrink: 0; width: var(--w); height: calc(var(--w) * 1.42);
padding: 0; border: none; background: none; cursor: pointer; border-radius: 9px;
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
animation: deal .35s cubic-bezier(.2,.8,.3,1) both;
transition: transform .18s ease;
}
.sq-card .pcard { --w: 74px; position: absolute; inset: 0; animation: none; }
.sq-card .sq-back {
z-index: 1; transform-origin: 100% 100%;
box-shadow: 0 6px 14px rgba(0,0,0,.45);
transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.sq-card.closed:hover { transform: translateY(-3px); }
.sq-card.closed:hover .sq-back { transform: rotate(-4deg); }
/* แง้ม: ยกหลังไพ่จากมุมขวาล่าง เห็นมุมซ้ายบน (ตัวเลขกับดอก) */
.sq-card.peek .sq-back { transform: rotate(-26deg) translate(-6px, 8px); box-shadow: 0 12px 22px rgba(0,0,0,.55); }
.sq-card.peek .pcard.face { filter: brightness(.92); }
/* เปิด: หลังไพ่ปลิวออก หน้าไพ่พลิกขึ้น */
.sq-card.open .sq-back { transform: translate(-40%, -130%) rotate(-50deg); opacity: 0; pointer-events: none; }
.sq-card.open .pcard.face { animation: flipIn .45s ease both; }
.sq-hint {
position: absolute; z-index: 2; left: 50%; bottom: 7px; transform: translateX(-50%);
padding: 0 7px; border-radius: 999px; font-size: 11px; line-height: 18px;
background: rgba(0,0,0,.6); color: #fff; pointer-events: none;
animation: blink 1.6s ease-in-out infinite;
}
.select-mode .sq-card.open:hover { transform: translateY(-4px); }
.sq-card.picked { transform: translateY(-12px); }
.sq-card.picked .pcard.face { box-shadow: 0 0 0 3px var(--gold-2), 0 10px 20px rgba(0,0,0,.5); }
.sq-actions { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; }
.sq-pref { align-self: flex-start; font-size: 12px; opacity: .8; gap: 6px; }
.sq-pref input { width: 14px; height: 14px; }
/* พลิกหงายตอนเปิดไพ่ (เจ้ามือ / คนอื่นตอนสรุปผล / ไพ่เราตอนเปิดเอง) */
.pcard.flip { animation: flipIn .5s ease both; animation-delay: calc(var(--i, 0) * 140ms); }
@keyframes flipIn {
from { transform: perspective(500px) rotateY(90deg) scale(.95); filter: brightness(.6); }
to { transform: perspective(500px) rotateY(0) scale(1); }
}
/* ===== เสือมังกร / บาคาร่า ===== */
.house-center { gap: 6px; }
.duel { display: flex; align-items: center; justify-content: center; gap: 14px; }
.duel-side {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 6px 10px 8px; border-radius: 14px; background: rgba(0,0,0,.25); min-width: 96px;
border: 1px solid transparent;
}
.duel-side.left .duel-name { color: #9fc7ff; }
.duel-side.right .duel-name { color: #ff9b95; }
.duel-name { font-family: var(--font-display); font-size: 15px; }
.duel-score { font-family: var(--font-display); font-size: 16px; color: #fff; animation: pop .3s var(--rd, 0s) both; }
.duel-side.won { animation: winGlow .5s var(--rd, 0s) both; }
@keyframes winGlow { to { border-color: var(--gold-2); box-shadow: 0 0 0 2px rgba(240,201,106,.4), 0 0 26px rgba(240,201,106,.45); background: rgba(217,169,63,.14); } }
.duel-vs { font-family: var(--font-display); font-size: 18px; color: rgba(255,255,255,.4); }
.banner.late { animation: pop .3s var(--rd, 0s) both; }
.float-net.late { animation-delay: var(--rd, 0s); }
.result-line.late { animation: pop .3s var(--rd, 0s) both; }
.bet-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.bet-board.closed .spot { opacity: .75; }
.spot {
position: relative; min-height: 84px; padding: 10px 8px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
border-radius: 14px; cursor: pointer; color: #fff; font: inherit;
border: 2px solid rgba(255,255,255,.15);
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.15)), var(--felt-2);
transition: transform .1s, border-color .15s, box-shadow .2s;
}
.spot:not(:disabled):hover { transform: translateY(-2px); border-color: var(--gold-2); }
.spot:not(:disabled):active { transform: scale(.97); }
.spot:disabled { cursor: default; }
.spot-dragon, .spot-player, .spot-playerpair { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.2)), #1f4f86; }
.spot-tiger, .spot-banker, .spot-bankerpair { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.2)), #8a2330; }
.spot-dttie, .spot-bactie { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.2)), #1a6a42; }
.spot-name { font-family: var(--font-display); font-size: 18px; }
.spot-odds { font-size: 12px; opacity: .75; }
.spot-mine {
display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 1px 8px 1px 3px;
border-radius: 999px; background: rgba(0,0,0,.45); color: var(--gold-2); font-family: var(--font-display); font-size: 13px;
}
.spot-total { font-size: 11px; opacity: .7; }
.spot.hit { border-color: var(--gold-2); box-shadow: 0 0 0 2px rgba(240,201,106,.5), 0 0 20px rgba(240,201,106,.45); animation: pulse 1.4s ease-in-out infinite; }
.road { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 4px; }
.road-dot {
width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
font-size: 11px; font-family: var(--font-display); color: #fff;
}
.road-left { background: #1f4f86; }
.road-right { background: #8a2330; }
.road-tie { background: #1a6a42; }
/* ===== ไพ่แคง ===== */
.piles { display: flex; align-items: flex-end; gap: 14px; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pile-label { font-size: 11px; color: rgba(255,255,255,.7); }
.pile-stack { animation: none; box-shadow: 2px 2px 0 #4a1219, 4px 4px 0 #3a0e14, 0 6px 12px rgba(0,0,0,.45); }
.kaeng-mark { width: auto; padding: 0 5px; border-radius: 999px; background: var(--neg); color: #fff; font-size: 9px; }
.hand.fan .pcard.sm + .pcard.sm { margin-left: -24px; }
/* ===== โฮลเด็ม ===== */
.board { display: flex; gap: 5px; justify-content: center; }
.board-slot { width: 40px; height: 57px; }
.blind-tag {
display: inline-block; margin-left: 3px; padding: 0 5px; border-radius: 999px;
background: rgba(255,255,255,.15); font-size: 10px; font-family: var(--font-body);
}
/* ===== แบล็กแจ็ก ===== */
.bj-hands { display: flex; gap: 8px; justify-content: center; }
.bj-hand { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px; border-radius: 10px; border: 1px solid transparent; }
.bj-hand.active { border-color: var(--gold-2); background: rgba(217,169,63,.12); }
.bj-hand.bust .hand { opacity: .5; }
.bj-hand.bj-win .hand-label { background: rgba(111,211,154,.3); }
.bj-hand.bj-lose .hand-label { background: rgba(255,122,115,.3); }
.blackjack .dealer-zone .hand-label.big { min-width: 70px; text-align: center; }
/* ===== ลูกเต๋า ===== */
.die {
--s: 44px;
display: inline-grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
width: var(--s); height: var(--s); padding: calc(var(--s) * .14); border-radius: calc(var(--s) * .2);
background: linear-gradient(145deg, #ffffff, #e9e1d2); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 5px 12px rgba(0,0,0,.45);
animation: dieIn .45s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--rd, 0s) + var(--i, 0) * 120ms);
}
.die i { width: 72%; height: 72%; margin: auto; border-radius: 50%; }
.die i.on { background: #1c1416; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.die.one i.on, .die.four i.on { background: #b3232b; }
.die.ghost { opacity: .25; animation: none; }
.die.mini { --s: 30px; animation: none; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
@keyframes dieIn { from { opacity: 0; transform: translateY(-14px) rotate(-40deg) scale(.6); } }
.dice-row { display: flex; gap: 10px; justify-content: center; }
.dice-row.big .die { --s: 58px; animation: none; }
.dice-row.big .die:nth-child(2) { transform: translateY(-14px) rotate(8deg); }
.dice-row.big .die:nth-child(3) { transform: rotate(-10deg); }
.game-art .dice-row.big { position: absolute; bottom: 10px; left: 0; right: 0; }
/* ถ้วยเขย่า: เขย่าไป ShakeSeconds แล้วยกขึ้น */
.bowl-area { position: relative; display: grid; place-items: center; min-height: 86px; padding: 8px 18px; }
.bowl {
position: absolute; inset: -4px 0 0 0; margin: auto; width: 170px; height: 92px;
border-radius: 90px 90px 26px 26px;
background: radial-gradient(ellipse at 35% 25%, #e7c472, #b07f24 55%, #6c4a10);
box-shadow: inset 0 -8px 16px rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.5);
transform-origin: 50% 100%;
}
.bowl::after { content: ""; position: absolute; left: 50%; top: -12px; width: 26px; height: 16px; margin-left: -13px; border-radius: 10px 10px 4px 4px; background: #8b6118; }
.bowl-area.reveal .bowl { animation: shakeBowl .24s ease-in-out 0s 8, liftBowl .55s cubic-bezier(.5,0,.3,1) var(--rd, 2s) forwards; }
@keyframes shakeBowl { 25% { transform: translateX(-9px) rotate(-5deg); } 75% { transform: translateX(9px) rotate(5deg); } }
@keyframes liftBowl { to { transform: translateY(-150%) rotate(-14deg); opacity: 0; } }
.bowl-area.reveal .dice-row .die { animation-delay: calc(var(--rd, 2s) + .2s + var(--i, 0) * 120ms); }
.dice-total { font-family: var(--font-display); font-size: 16px; color: #fff; }
.dice-total strong { font-size: 26px; color: var(--gold-2); margin-left: 4px; }
.dice-total.late, .spot.hit.late { animation-delay: var(--rd, 0s); }
.dice-total.late { animation: pop .3s var(--rd, 0s) both; }
/* กระดานไฮโล */
.hilo-main { grid-template-columns: repeat(3, 1fr); }
.hilo-singles { grid-template-columns: repeat(6, 1fr); gap: 6px; }
.hilo-singles .spot { min-height: 70px; padding: 6px 2px; }
.hl-low, .hl-odd { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.2)), #1f4f86; }
.hl-high, .hl-even { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.2)), #8a2330; }
.hl-eleven { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.2)), #1a6a42; }
.hl-triple { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.2)), #6b3fa0; }
.road-hl-h { background: #8a2330; font-size: 9px; }
.road-hl-l { background: #1f4f86; font-size: 9px; }
.road-hl-e { background: #1a6a42; }
.road-hl-t { background: #6b3fa0; font-size: 9px; }
/* ===== ไพ่เวียด ===== */
.trick { min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.trick-cards .pcard + .pcard { margin-left: -16px; }
.trick-cards .pcard { animation: trickIn .3s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes trickIn { from { opacity: 0; transform: translateY(26px) scale(.8); } }
.trick-label { font-size: 13px; color: #fff; text-align: center; }
.trick-empty { font-size: 13px; color: rgba(255,255,255,.6); }
.card-count { position: relative; display: inline-flex; align-items: center; }
.card-count .pcard.sm { --w: 26px; animation: none; }
.card-count b {
position: absolute; right: -10px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px;
display: grid; place-items: center; font-size: 11px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
}
.card-count.low b { background: var(--neg); color: #fff; border-color: var(--neg); animation: blink 1s ease-in-out infinite; }
.state-pill.cut { background: rgba(255,122,115,.25); color: #ffc2bd; }
.tl-hand {
display: flex; justify-content: center; padding: 16px 12px 4px; overflow-x: auto; scrollbar-width: none;
border-radius: 14px; transition: background .2s;
}
.tl-hand::-webkit-scrollbar { display: none; }
.tl-hand.my-turn { background: rgba(217,169,63,.08); box-shadow: inset 0 0 0 1px rgba(217,169,63,.35); }
.tl-card {
flex-shrink: 0; padding: 0; border: none; background: none; cursor: pointer; border-radius: 8px;
transition: transform .12s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tl-card + .tl-card { margin-left: -26px; }
.tl-card .pcard { animation-duration: .3s; animation-delay: calc(var(--i, 0) * 35ms); }
.tl-card:hover { transform: translateY(-4px); }
.tl-card.picked { transform: translateY(-14px); }
.tl-card.picked .pcard { box-shadow: 0 0 0 3px var(--gold-2), 0 8px 16px rgba(0,0,0,.5); }
.tl-status { text-align: center; min-height: 20px; }
/* ===== โฮลเด็ม No Limit ===== */
.stack {
font-family: var(--font-display); font-size: 12px; line-height: 1.2; padding: 1px 8px; border-radius: 999px;
background: rgba(0,0,0,.5); color: var(--gold-2); font-variant-numeric: tabular-nums;
}
.stack.allin { background: var(--neg); color: #fff; animation: blink 1.2s ease-in-out infinite; }
.side-pots { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 320px; }
.raise-box {
display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px;
background: rgba(0,0,0,.2); border: 1px solid var(--line);
}
.raise-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.raise-quick .btn { flex: 1; min-width: 64px; }
.raise-slider { width: 100%; accent-color: var(--gold); height: 28px; cursor: pointer; }
.raise-go { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.raise-go .bet-input { flex: 1; min-width: 100px; }
.buyin { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg-2); }
.buyin summary { cursor: pointer; font-family: var(--font-display); color: var(--gold-2); }
.buyin[open] summary { margin-bottom: 8px; }
.buyin.must { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217,169,63,.2); }
.sq-pref-row { display: flex; gap: 14px; flex-wrap: wrap; }
/* ===== น้ำเต้าปูปลา ===== */
.die.nt-die { display: grid; place-items: center; padding: calc(var(--s) * .08); --s: 52px; }
.die.nt-die .nt-icon { width: 100%; height: 100%; }
.die.nt-die.ghost { opacity: .3; }
.dice-row.big .die.nt-die { --s: 62px; }
.nt-board { grid-template-columns: repeat(3, 1fr); }
.nt-spot { min-height: 104px; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.15)), #f3e9d8; color: #2a1a05; }
.nt-spot .spot-name { color: #2a1a05; font-size: 16px; }
.nt-spot .nt-icon { filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.nt-spot.nt-1 { background: linear-gradient(180deg, #fff6e2, #f1dcae); }
.nt-spot.nt-2 { background: linear-gradient(180deg, #ffe9e7, #f5c4c0); }
.nt-spot.nt-3 { background: linear-gradient(180deg, #e8f3ff, #bcd9f5); }
.nt-spot.nt-4 { background: linear-gradient(180deg, #fff0e2, #f5cfa9); }
.nt-spot.nt-5 { background: linear-gradient(180deg, #ffece4, #f7c7b0); }
.nt-spot.nt-6 { background: linear-gradient(180deg, #fff3dc, #f6d49a); }
.nt-spot .spot-mine { background: rgba(28,15,18,.85); }
.nt-spot .spot-total { color: #5b3a12; opacity: .85; }
.nt-hits { font-family: var(--font-display); font-size: 12px; padding: 0 8px; border-radius: 999px; background: #1a6a42; color: #fff; }
.road-nt { display: inline-flex; gap: 1px; padding: 2px 4px; border-radius: 999px; background: rgba(255,255,255,.08); }
/* ===== เชิญเพื่อน ===== */
.invite-btn { color: var(--gold-2); }
.invite-modal p { margin-top: 0; }
.invite-link { display: flex; gap: 8px; margin: 10px 0; }
.invite-link .input { font-size: 14px; }
.invite-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-line { background: #06c755; border-color: #05a948; color: #fff; }
.btn-line:hover { background: #05b34c; border-color: #fff; text-decoration: none; }
.invite-card {
width: min(420px, 100%); padding: 26px; border-radius: 18px; text-align: center;
background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.invite-card h1 { font-size: 22px; margin: 0; }
/* ===== โปรไฟล์ ===== */
a.user-name { color: var(--ink-dim); }
a.user-name:hover { color: var(--gold-2); }
.profile-hero {
display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 20px; border-radius: 18px;
background: linear-gradient(135deg, #3a1f14, var(--panel) 60%); border: 1px solid rgba(217,169,63,.35);
}
.profile-avatar {
width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
font-size: 44px; font-family: var(--font-display); color: #fff;
background: radial-gradient(circle at 35% 30%, hsl(var(--h, 20) 55% 52%), hsl(var(--h, 20) 50% 30%));
border: 3px solid var(--gold-2); box-shadow: 0 8px 20px rgba(0,0,0,.45);
}
.profile-main { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.profile-main h1 { font-size: 28px; margin: 0; }
.profile-sub { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.profile-bio { margin: 0; color: var(--ink); }
.xp { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.xp-bar { height: 8px; border-radius: 999px; background: rgba(0,0,0,.35); overflow: hidden; }
.xp-bar > div { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: 999px; transition: width .5s ease; }
.profile-edit { display: flex; flex-direction: column; gap: 12px; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; }
.avatar-pick {
aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--line); background: var(--bg-2);
font-size: 24px; cursor: pointer; display: grid; place-items: center; color: var(--ink); font-family: var(--font-display);
transition: transform .1s, border-color .15s;
}
.avatar-pick:hover { transform: scale(1.08); border-color: var(--gold); }
.avatar-pick.on { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(217,169,63,.3); background: rgba(217,169,63,.15); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.badge-card {
position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 14px;
background: var(--panel); border: 1px solid var(--line); filter: grayscale(1); opacity: .55;
}
.badge-card.on { filter: none; opacity: 1; border-color: rgba(217,169,63,.5); background: linear-gradient(180deg, rgba(217,169,63,.12), var(--panel)); }
.badge-icon { font-size: 30px; line-height: 1.1; }
.badge-progress { position: absolute; top: 10px; right: 12px; font-size: 11px; color: var(--ink-dim); }
.lname { color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
a.lname:hover { color: var(--gold-2); text-decoration: none; }
.lavatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); font-size: 16px; flex-shrink: 0; }
/* ===== ภารกิจ ===== */
.mission-list { display: flex; flex-direction: column; gap: 10px; }
.mission {
display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px;
background: var(--panel); border: 1px solid var(--line);
}
.mission.done { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217,169,63,.15); }
.mission.claimed { opacity: .6; }
.mission.bonus { background: linear-gradient(90deg, rgba(217,169,63,.12), var(--panel)); }
.mission-icon { font-size: 30px; width: 40px; text-align: center; flex-shrink: 0; }
.mission-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mission-reward { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); color: var(--gold-2); white-space: nowrap; }
/* ===== ทัวร์นาเมนต์ ===== */
.tourney-bar {
display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 14px; border-radius: 12px;
background: var(--panel); border: 1px solid rgba(217,169,63,.35); font-size: 14px;
}
.tourney-bar.reg { border-color: var(--pos); background: rgba(111,211,154,.08); }
.tourney-prize { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.stack.out { background: rgba(255,255,255,.12); color: var(--ink-dim); }
.standings { padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.standings ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.standings li { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 8px; }
.standings li.me { background: rgba(217,169,63,.15); }
.standings .rank { width: 26px; height: 26px; font-size: 13px; }
.standings .lvalue { margin-left: auto; }
/* ===== ประกาศทั้งเว็บ ===== */
.site-announcement {
padding: 8px 20px; text-align: center; font-size: 14px;
background: linear-gradient(90deg, rgba(217,169,63,.18), rgba(217,169,63,.08)); color: var(--gold-2);
border-bottom: 1px solid rgba(217,169,63,.35);
}
/* ===== กระเป๋าชิป: โค้ดและรายละเอียดแพ็กเกจ ===== */
.promo-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.promo-row .input { flex: 1; min-width: 180px; }
.pkg-breakdown { list-style: none; margin: 0 0 6px; padding: 0; font-size: 13px; color: var(--ink-dim); }
.redeem { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.redeem .panel-title, .redeem p { margin: 0; }
.st-refunded { color: #e8b7ff; background: rgba(232,183,255,.12); }
/* ===== ผู้ดูแล ===== */
.admin-page { gap: 16px; }
.admin-nav {
display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 12px;
background: var(--panel); border: 1px solid var(--line);
}
.admin-nav a { padding: 7px 12px; border-radius: 9px; color: var(--ink-dim); font-family: var(--font-display); font-size: 14px; }
.admin-nav a:hover { color: var(--ink); text-decoration: none; background: var(--panel-2); }
.admin-nav a.active { color: var(--gold-2); background: var(--panel-2); }
.stat > span.small { display: block; margin-top: 2px; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.mini-chart { padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.mini-chart-head { display: flex; justify-content: space-between; align-items: baseline; }
.bars { height: 110px; display: flex; align-items: flex-end; gap: 3px; }
.bar { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--gold); opacity: .85; transition: opacity .15s; }
.bar:hover { opacity: 1; }
.bars-green .bar { background: var(--pos); }
.bars-blue .bar { background: #6fa8ff; }
.bars-axis { display: flex; justify-content: space-between; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: rgba(217,169,63,.06); }
.admin-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-dim); }
.promo-form { display: flex; flex-direction: column; gap: 10px; }
.edit-table .input-sm { min-width: 80px; }
.edit-table .num { text-align: right; }
.edit-table .new-row td { background: rgba(111,211,154,.05); }
.settings-list { display: flex; flex-direction: column; gap: 8px; }
.setting-row {
display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
}
.setting-input { display: flex; gap: 8px; align-items: center; min-width: 260px; flex: 1; max-width: 520px; }
.setting-input .input { flex: 1; }
.admin-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.admin-room { display: flex; flex-direction: column; gap: 10px; }
.admin-room.closing { opacity: .6; }
.admin-room-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.admin-room-players { display: flex; flex-wrap: wrap; gap: 6px; }
.player-chip {
display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px;
background: var(--bg-2); border: 1px solid var(--line); font-size: 13px;
}
.player-chip .icon-btn { width: 24px; height: 24px; }
/* ===== ตัวเลือกยอดเดิมพัน (BetPicker) ===== */
.bet-picker { flex: 1; min-width: 0; }
.bp-desktop { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bp-mobile { display: none; }
.bp-step {
width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-size: 22px; line-height: 1;
}
.bp-step:disabled { opacity: .35; }
.bp-amount {
flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 999px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
border: 1px solid rgba(217,169,63,.5); background: rgba(0,0,0,.3); color: var(--gold-2);
font-family: var(--font-display);
}
.bp-amount strong { font-size: 18px; }
.bp-amount small { font-size: 10px; color: var(--ink-dim); font-family: var(--font-body); white-space: nowrap; }
.bp-go { height: 44px; padding: 0 16px; flex-shrink: 0; }
.bp-sheet {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
display: flex; flex-direction: column; gap: 14px;
padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
background: var(--bg-2); border-top: 1px solid var(--line); border-radius: 20px 20px 0 0;
box-shadow: 0 -12px 40px rgba(0,0,0,.55); animation: sheetUp .22s ease-out;
}
.bp-backdrop { display: block; z-index: 95; }
.bp-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.bp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; justify-items: center; }
.bp-grid .chip { width: 64px; height: 64px; font-size: 15px; }
.bp-custom { display: flex; gap: 10px; align-items: center; }
.bp-custom .input { flex: 1; font-size: 16px; }
@keyframes sheetUp { from { transform: translateY(100%); } }
/* ===== แถบย่อ/ขยายแผงควบคุม (มือถือ) ===== */
.dock-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dock-handle { display: none; }
/* ===== คนที่หมอบ: ถ้าไม่หมอบจะได้อะไร ===== */
.whatif {
padding: 8px 12px; border-radius: 10px; text-align: center; font-size: 14px;
background: rgba(159,199,255,.1); border: 1px dashed rgba(159,199,255,.45); color: #cfe2ff;
animation: pop .3s ease-out both;
}
/* ===== ปุ่มเสียง + อีโมจิบนโต๊ะ ===== */
.table-tools {
position: absolute; z-index: 6; top: -30px; right: 0;
display: flex; gap: 6px; align-items: flex-start;
}
.table-tools .icon-btn { width: 34px; height: 34px; font-size: 16px; }
.sound-btn.is-off { opacity: .6; }
.react-wrap { position: relative; }
.react-pop {
position: absolute; top: 40px; right: 0; z-index: 20;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px;
background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
animation: pop .15s ease-out;
}
.react-pick {
width: 42px; height: 42px; border: none; border-radius: 10px; background: transparent; font-size: 24px; cursor: pointer;
transition: transform .1s, background .1s;
}
.react-pick:hover { background: rgba(255,255,255,.08); transform: scale(1.15); }
.reaction {
position: absolute; z-index: 8; left: 50%; top: -6px; font-size: 34px; pointer-events: none;
filter: drop-shadow(0 3px 4px rgba(0,0,0,.5));
animation: reactFloat 3.4s ease-out forwards;
}
@keyframes reactFloat {
0% { opacity: 0; transform: translate(-50%, 10px) scale(.4); }
12% { opacity: 1; transform: translate(-50%, -18px) scale(1.25); }
25% { transform: translate(-50%, -22px) scale(1); }
80% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -60px) scale(1); }
}
/* ===== เพื่อน ===== */
.friend-list { display: flex; flex-direction: column; gap: 8px; }
.friend {
display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
background: var(--panel); border: 1px solid var(--line);
}
.friend.online { border-color: rgba(111,211,154,.35); }
.friend-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.friend-body a { color: var(--ink); }
.friend .lavatar { position: relative; width: 38px; height: 38px; font-size: 20px; }
.presence-dot {
position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%;
background: var(--line); border: 2px solid var(--panel);
}
.friend.online .presence-dot { background: var(--pos); }
.badge-inline {
display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
background: var(--neg); color: #fff; font-size: 12px; vertical-align: middle;
}
/* ===== ติดตั้งแอป ===== */
.install-card {
display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
background: linear-gradient(90deg, rgba(217,169,63,.14), var(--panel)); border: 1px solid rgba(217,169,63,.4);
}
.install-card img { border-radius: 10px; flex-shrink: 0; }
.install-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* ===== ตรวจสอบความยุติธรรม ===== */
.fair-result { display: flex; flex-direction: column; gap: 12px; }
.fair-hash { word-break: break-all; font-size: 13px; padding: 8px; border-radius: 8px; background: var(--bg-2); }
.fair-deck { display: flex; flex-wrap: wrap; gap: 6px; }
.fair-card {
position: relative; min-width: 42px; padding: 6px 6px 4px; border-radius: 6px; text-align: center;
background: #fbf6ec; color: #1c1416; font-family: var(--font-display); font-size: 15px;
}
.fair-card.red { color: #b3232b; }
.fair-card i { position: absolute; top: -8px; left: -6px; font-style: normal; font-size: 10px; min-width: 18px; padding: 0 3px;
border-radius: 999px; background: var(--panel-2); color: var(--ink-dim); }
.fair-die { padding: 6px 12px; border-radius: 8px; background: #fff; color: #1c1416; font-family: var(--font-display); font-size: 18px; }
.fair-die small { font-size: 12px; color: #5b3a12; }
/* ===== Responsive ===== */
@media (max-width: 980px) {
.room-layout { grid-template-columns: 1fr; }
/* ไอคอนแชท/ไมค์บนแถบหัวโต๊ะ */
.mobile-actions { display: flex; }
/* คอลัมน์ข้างกลายเป็นแผ่นเลื่อนขึ้นจากด้านล่าง */
.side-col {
position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 90;
max-height: 82vh; max-height: 82dvh; overflow-y: auto; overscroll-behavior: contain;
padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
background: var(--bg-2); border-top: 1px solid var(--line);
border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.55);
transform: translateY(105%); visibility: hidden;
transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s;
}
.side-col.open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.side-col::before {
content: ""; display: block; width: 44px; height: 5px; border-radius: 999px;
background: var(--line); margin: 0 auto 8px;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: -10px; z-index: 1; background: var(--bg-2); padding: 4px 0 8px; }
.sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,.5); animation: fade .2s ease-out; }
.side-col[data-tab="chat"] .voice, .side-col[data-tab="chat"] .rules { display: none; }
.side-col[data-tab="voice"] .chat { display: none; }
.side-col .panel { border: none; background: transparent; padding: 4px 2px; }
.chat-log { height: 46vh; height: 46dvh; }
.chat-input .input { font-size: 16px; } /* กัน iOS ซูมตอนแตะช่องพิมพ์ */
/* แผงเดิมพันติดขอบล่างจอ กดง่ายด้วยนิ้วโป้ง */
.controls {
position: sticky; bottom: 0; z-index: 20;
border-radius: 16px 16px 0 0; margin: 0 -12px -16px;
padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
background: rgba(43,24,27,.985);
box-shadow: 0 -8px 24px rgba(0,0,0,.45);
max-height: 52vh; max-height: 52dvh; overflow-y: auto; overscroll-behavior: contain;
}
/* แถบดึง: กดเพื่อย่อแผงให้เหลือแถบเดียว เห็นโต๊ะเต็ม ๆ */
.dock-handle {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: -8px -12px 0; padding: 4px 12px 6px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dock-grip { width: 40px; height: 5px; border-radius: 999px; background: var(--line); }
.dock-text::after { content: "ย่อ"; font-size: 11px; color: var(--ink-dim); }
.dock-toggle:checked ~ :not(.dock-handle) { display: none !important; }
.dock-toggle:checked ~ .dock-handle { margin-bottom: -6px; }
.dock-toggle:checked ~ .dock-handle .dock-grip { background: var(--gold); }
.dock-toggle:checked ~ .dock-handle .dock-text::after { content: "แตะเพื่อแสดงแผงควบคุม"; color: var(--gold-2); }
.dock-toggle:focus-visible ~ .dock-handle { outline: 2px solid var(--gold-2); border-radius: 8px; }
}
@media (max-width: 720px) {
.topbar { flex-wrap: wrap; gap: 10px; padding: 8px 12px; }
.nav-links { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.content { padding: 12px 12px 16px; }
.row2 { grid-template-columns: 1fr; }
.user-name { display: none; }
.title-xl { font-size: 24px; }
.room-top { gap: 8px; }
.room-title h1 { font-size: 17px; }
.room-title .rc-rules .tag:nth-child(n+3) { display: none; }
.wallet-mini strong { font-size: 15px; }
.icon-btn { width: 38px; height: 38px; }
/* โต๊ะแนวตั้งสำหรับจอมือถือ */
.table-stage {
--rx: 38%; --ry: 43%;
--brx: 21%; --bry: 25%;
--seat-w: 84px;
aspect-ratio: 3 / 4; margin: 26px 0 36px;
}
.felt { inset: 9% 14%; border-width: 8px; padding: 6% 10%; }
.seat-slot.mine { --seat-w: 120px; }
.avatar { width: 38px; height: 38px; font-size: 16px; }
.seat-name { font-size: 11px; padding: 0 7px; }
.hand-label { font-size: 10px; padding: 0 6px; }
.state-pill { font-size: 10px; padding: 0 6px; }
.pcard { --w: 46px; }
.pcard.sm { --w: 30px; }
.pcard.sm .pip { font-size: 13px; }
.pcard.sm .corner { font-size: 8px; }
.hand .pcard + .pcard { margin-left: -12px; }
.hand .pcard.sm + .pcard.sm { margin-left: -10px; }
.phase-name { font-size: 14px; }
.countdown { font-size: 22px; }
.banner { font-size: 12px; padding: 3px 10px; }
.table-bet { font-size: 11px; padding: 1px 7px 1px 3px; }
.table-bet .chip-dot { width: 12px; height: 12px; }
.float-net { font-size: 15px; top: -20px; }
.chip { width: 44px; height: 44px; font-size: 11px; }
.chip-rack { gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; width: 100%; }
.chip-rack::-webkit-scrollbar { display: none; }
.bet-row { gap: 8px; }
.bet-submit { min-width: 0; width: 100%; }
.bet-input { font-size: 16px; }
.controls .hint { display: none; }
.decide { gap: 8px; }
.decide-btns { width: 100%; }
.decide-btns .btn { flex: 1; min-width: 0; }
/* ตัวเลือกยอดแบบย่อ */
.bp-desktop { display: none; }
.bp-mobile { display: flex; gap: 6px; align-items: center; }
/* แผงควบคุมกะทัดรัด */
.controls { gap: 8px; padding-top: 8px; }
.btn-lg { padding: 10px 12px; font-size: 15px; }
.decide { gap: 6px; }
.decide-hand { gap: 6px; font-size: 13px; }
.decide-hand strong { font-size: 14px; }
.decide-btns .btn { padding: 11px 6px; }
.control-line { gap: 8px; font-size: 14px; }
.control-line .hint { display: none; }
.sq-pref, .sq-pref-row { font-size: 11px; }
.sq-pref-row { gap: 10px; }
.result-line { font-size: 15px; padding: 6px 10px; }
.road { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.road::-webkit-scrollbar { display: none; }
.bet-row { flex-wrap: nowrap; }
/* ไพ่ลุ้นเล็กลง */
.sq-card, .sq-card .pcard { --w: 50px; }
.sq-cards { gap: 8px; padding-top: 2px; }
.sq-actions { gap: 6px; }
.sq-actions .muted { display: none; }
.swap-box { gap: 6px; }
/* กระดานแทงเล็กลง */
.bet-board { gap: 5px; }
.spot { min-height: 52px; padding: 5px 3px; border-radius: 10px; gap: 0; }
.spot-name { font-size: 14px; }
.spot-odds { font-size: 10px; }
.spot-mine { font-size: 11px; padding: 0 6px 0 2px; }
.spot-total { display: none; }
.hilo-singles .spot { min-height: 44px; }
.nt-spot { min-height: 66px; }
.nt-spot .nt-icon { width: 34px; height: 34px; }
.nt-hits { font-size: 10px; }
/* โป๊กเกอร์ */
.raise-box { padding: 8px; gap: 6px; }
.raise-quick .btn { min-width: 0; padding: 5px 4px; font-size: 12px; }
.raise-go .bet-input { min-width: 80px; }
.buyin { padding: 8px 10px; }
/* โต๊ะเตี้ยลงให้เหลือที่ให้แผงควบคุม */
.table-stage { aspect-ratio: 5 / 6; margin: 22px 0 26px; }
.table-stage.house, .table-stage.hilo { aspect-ratio: 1 / 1; }
.result-pop { padding: 24px 18px 18px; }
.rp-title { font-size: 46px; }
.rp-amount { font-size: 32px; }
}
@media (max-width: 720px) {
.game-grid { grid-template-columns: 1fr; }
.game-art { height: 110px; }
.gc-card { width: 62px; height: 88px; margin-left: -31px; }
.pot { min-width: 90px; padding: 4px 10px 6px; }
.pot-amount { font-size: 18px; }
.kk-actions .btn { padding: 11px 8px; font-size: 15px; }
.sq-card, .sq-card .pcard { --w: 60px; }
.sq-cards { gap: 10px; padding-top: 4px; }
.sq-actions .muted { width: 100%; }
.board-slot { width: 30px; height: 43px; }
.board { gap: 3px; }
.hand.fan .pcard.sm + .pcard.sm { margin-left: -21px; }
.duel { gap: 6px; }
.duel-side { min-width: 0; padding: 4px 6px 6px; }
.duel-vs { font-size: 13px; }
.spot { min-height: 70px; }
.spot-name { font-size: 16px; }
.bet-board.bac { grid-template-columns: repeat(3, 1fr); }
.piles { gap: 8px; }
.die { --s: 36px; }
.die.mini { --s: 24px; }
.bowl { width: 140px; height: 76px; }
.bowl-area { min-height: 70px; }
.hilo-singles { gap: 4px; }
.hilo-singles .spot { min-height: 58px; }
.hilo-singles .spot-mine, .hilo-singles .spot-total { font-size: 10px; }
.bj-hands { gap: 4px; }
.nt-spot { min-height: 88px; }
.profile-hero { padding: 14px; }
.profile-avatar { width: 68px; height: 68px; font-size: 34px; }
.mission { gap: 10px; padding: 12px; flex-wrap: wrap; }
.mission-body { min-width: 60%; }
.tourney-prize { margin-left: 0; }
.nt-spot .nt-icon { width: 44px; height: 44px; }
.die.nt-die { --s: 44px; }
.invite-actions { grid-template-columns: 1fr; }
.tl-hand { padding: 14px 4px 2px; justify-content: flex-start; }
.table-tools { top: -26px; }
.table-tools .icon-btn { width: 30px; height: 30px; font-size: 14px; }
.reaction { font-size: 28px; }
.tl-card .pcard { --w: 44px; }
.tl-card + .tl-card { margin-left: -21px; }
.trick-cards .pcard + .pcard { margin-left: -12px; }
}
@media (max-width: 380px) {
.table-stage { --seat-w: 74px; --rx: 37%; }
.avatar { width: 34px; height: 34px; }
}
/* ============================================================
มือถือ/แท็บเล็ต: หน้าโต๊ะเป็นหน้าจอเดียวแบบแอปเกม (ไม่เลื่อนทั้งหน้า)
หัวโต๊ะ (สูงคงที่) → โต๊ะ (ยืดเต็มพื้นที่ที่เหลือ) → แผงควบคุม (ติดล่าง เลื่อนเฉพาะในแผง)
ใช้ :has() ซ่อนแถบเมนูของเว็บเฉพาะหน้าที่มีโต๊ะ
============================================================ */
@media (max-width: 980px) {
html:has(.room-page), body:has(.room-page) { height: 100%; overflow: hidden; overscroll-behavior: none; }
.shell:has(.room-page) { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.shell:has(.room-page) > .topbar,
.shell:has(.room-page) > .site-announcement { display: none; }
.shell:has(.room-page) > .content {
flex: 1; min-height: 0; max-width: none; padding: 0;
display: flex; flex-direction: column;
}
.room-page {
flex: 1; min-height: 0; gap: 0;
display: flex; flex-direction: column;
padding-top: env(safe-area-inset-top);
}
/* หัวโต๊ะแถวเดียว */
.room-top {
flex: 0 0 auto; gap: 6px; padding: 6px 8px;
background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.room-title h1 { font-size: 15px; margin: 0; }
.room-title h1 .code { display: none; }
.room-title .rc-rules { flex-wrap: nowrap; overflow: hidden; margin: 1px 0 0; }
.room-title .rc-rules .tag { font-size: 10px; padding: 0 6px; white-space: nowrap; }
.wallet-mini { font-size: 12px; }
.wallet-mini .muted { display: none; }
.wallet-mini strong { font-size: 14px; }
.room-top .icon-btn { width: 34px; height: 34px; }
.mobile-actions { gap: 4px; }
.tourney-bar {
flex: 0 0 auto; border-radius: 0; border-width: 0 0 1px; padding: 5px 10px; font-size: 12px;
flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.tourney-bar::-webkit-scrollbar { display: none; }
.tourney-prize { margin-left: 0; flex-wrap: nowrap; }
/* โต๊ะกินพื้นที่ที่เหลือทั้งหมด */
/* align-items: stretch สำคัญ: กฎเดสก์ท็อปตั้ง start ไว้ ทำให้คอลัมน์โต๊ะหดเหลือครึ่งจอ */
.room-layout { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.table-col { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.table-col > .controls { width: 100%; }
/* กันกฎเดสก์ท็อป (grid 2 คอลัมน์ / align-items: start) ทุกกรณี */
.shell:has(.room-page) .room-layout { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100%; }
.shell:has(.room-page) .table-col { width: 100% !important; max-width: none !important; align-self: stretch !important; }
.shell:has(.room-page) .table-stage { width: 100% !important; align-self: stretch !important; }
.shell:has(.room-page) .table-col > .controls { width: 100% !important; align-self: stretch !important; box-sizing: border-box; }
.table-stage {
flex: 1 1 auto; min-height: 180px; width: 100%;
aspect-ratio: auto !important; margin: 0 !important;
}
.table-stage.house, .table-stage.hilo { aspect-ratio: auto !important; }
.felt { inset: 13% 11% 9%; }
.table-tools { top: 6px; right: 6px; }
/* แผงควบคุมติดล่าง ไม่ลอยทับโต๊ะอีกต่อไป */
.controls {
position: relative; bottom: auto; flex: 0 0 auto;
margin: 0; max-height: 46%;
border-radius: 16px 16px 0 0; border-width: 1px 0 0;
padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
}
.dock-handle { margin: -4px -10px 0; padding: 2px 10px 4px; }
.dock-toggle:checked ~ .dock-handle { margin-bottom: -2px; }
/* แถวตัวเลือกยอดและปุ่มต่าง ๆ ใช้แบบย่อบนทุกจอเล็ก */
.bp-desktop { display: none; }
.bp-mobile { display: flex; gap: 6px; align-items: center; }
.controls .hint { display: none; }
.tap-to-hear { top: calc(52px + env(safe-area-inset-top)); }
}
/* มือถือทั่วไป: ที่นั่ง/ไพ่พอดีโต๊ะที่เตี้ยลง */
@media (max-width: 720px) {
/* โต๊ะเตี้ยกว่าเดิม: บีบวงที่นั่งแนวตั้ง ไม่ให้ที่นั่งบนสุด/ล่างสุดล้นทับหัวโต๊ะหรือแผงควบคุม */
.table-stage { --rx: 40%; --ry: 34%; --brx: 22%; --bry: 17%; --seat-w: 80px; }
.seat-slot.mine { --seat-w: 112px; }
.seat-slot { gap: 2px; }
.avatar { width: 34px; height: 34px; font-size: 15px; }
.seat-slot .hand .pcard { --w: 40px; }
.seat-slot .hand .pcard.sm { --w: 26px; }
.hand .pcard.sm + .pcard.sm { margin-left: -9px; }
.hand .pcard + .pcard { margin-left: -12px; }
.hand-empty { width: 26px; height: 37px; }
.table-center { gap: 3px; }
.phase-name { font-size: 13px; }
.countdown { font-size: 18px; }
.timebar { height: 4px; }
.banner { font-size: 11px; padding: 2px 9px; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pot { min-width: 76px; padding: 3px 8px 4px; }
.table-center .board { margin-bottom: 8px; }
.pot-chips { top: -14px; }
.pot.has-pot { padding-top: 10px; }
.pot-amount { font-size: 16px; }
.board-slot { width: 26px; height: 37px; }
.dealer-zone { gap: 3px; }
.dealer-tag { font-size: 11px; padding: 1px 8px; }
.duel-side { padding: 3px 5px 4px; }
.die { --s: 32px; }
.die.nt-die { --s: 38px; }
.bowl { width: 124px; height: 66px; }
.bowl-area { min-height: 60px; padding: 4px 10px; }
.float-net { font-size: 14px; top: -18px; }
/* แผงควบคุม: ปุ่มหลักใหญ่พอกดด้วยนิ้วโป้ง ส่วนอื่นเล็กลง */
.controls { gap: 6px; }
.decide { flex-wrap: nowrap; }
.decide-hand { flex-direction: column; align-items: flex-start; gap: 0; flex-shrink: 0; max-width: 34%; }
.decide-hand .muted { font-size: 10px; }
.decide-hand strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.decide-btns { flex: 1; width: auto; gap: 6px; }
.decide-btns .btn { flex: 1; min-width: 0; padding: 12px 4px; font-size: 14px; }
.kk-actions { flex-wrap: nowrap; }
.result-line { padding: 5px 8px; font-size: 14px; }
.sq-card, .sq-card .pcard { --w: 44px; }
.sq-cards { gap: 6px; padding-top: 0; }
.squeeze { gap: 4px; }
.swap-box { gap: 4px; }
.tl-hand { padding: 12px 2px 0; }
.tl-card .pcard { --w: 40px; }
.tl-card + .tl-card { margin-left: -19px; }
.spot { min-height: 46px; }
.hilo-singles .spot { min-height: 40px; }
.nt-spot { min-height: 58px; }
.nt-spot .nt-icon { width: 30px; height: 30px; }
.road-dot { width: 18px; height: 18px; font-size: 9px; }
.raise-slider { height: 22px; }
.sq-pref, .sq-pref-row { font-size: 10px; }
}
/* จอเล็กมาก: ประหยัดที่หัวโต๊ะ */
@media (max-width: 380px) {
.room-top .icon-btn { width: 30px; height: 30px; }
.room-title .rc-rules { display: none; }
.mobile-actions .icon-btn:last-child { display: none; } /* ปุ่มห้องเสียงและกติกา เข้าได้จากแท็บในแผ่นแชท */
}
/* มือถือแนวนอน: โต๊ะซ้าย แผงควบคุมขวา */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px) {
.room-top { padding: 3px 8px; }
.room-title .rc-rules { display: none; }
.table-col { flex-direction: row; }
.table-stage { flex: 1 1 58%; min-height: 0; }
.controls {
flex: 0 0 42%; max-height: none; height: 100%; overflow-y: auto;
border-radius: 0; border-width: 0 0 0 1px;
padding: 6px 10px calc(6px + env(safe-area-inset-bottom)) 10px;
}
.felt { inset: 12% 13%; }
/* ความสูงจอน้อย: ใช้ที่นั่ง/ไพ่ขนาดเล็กเหมือนมือถือแนวตั้ง และบีบวงที่นั่งแนวตั้ง */
.table-stage { --rx: 41%; --ry: 33%; --brx: 24%; --bry: 18%; --seat-w: 76px; }
.seat-slot.mine { --seat-w: 100px; }
.seat-slot { gap: 1px; }
.avatar { width: 28px; height: 28px; font-size: 13px; border-width: 2px; }
.avatar-mic { width: 16px; height: 16px; }
.seat-name { font-size: 10px; padding: 0 6px; }
.seat-info { min-height: 14px; }
.state-pill, .hand-label { font-size: 9px; padding: 0 5px; }
.seat-slot .hand .pcard { --w: 30px; }
.seat-slot .hand .pcard.sm { --w: 22px; }
.hand .pcard + .pcard { margin-left: -10px; }
.hand .pcard.sm + .pcard.sm { margin-left: -8px; }
.table-bet { font-size: 10px; padding: 0 6px 0 2px; }
.table-bet .chip-dot { width: 11px; height: 11px; }
.table-center { gap: 2px; width: min(220px, 100%); }
.board .pcard.sm, .board-slot { --w: 24px; width: 24px; height: 34px; }
.pot { min-width: 70px; padding: 2px 8px 3px; }
.pot.has-pot { padding-top: 8px; }
.pot-amount { font-size: 14px; }
.phase-name { font-size: 12px; }
.countdown { font-size: 15px; }
.banner { font-size: 10px; padding: 1px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.table-tools { top: 4px; right: 4px; }
.table-tools .icon-btn { width: 28px; height: 28px; font-size: 13px; }
/* แผงขวา: ปุ่มหลักเรียงแถวเดียวเต็มความกว้าง */
.controls { gap: 6px; }
.decide { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 4px; }
.decide-hand { flex-direction: row; max-width: none; gap: 6px; align-items: baseline; }
.decide-btns { width: 100%; flex-wrap: nowrap; }
.decide-btns .btn { flex: 1; min-width: 0; padding: 10px 4px; font-size: 13px; }
.sq-card, .sq-card .pcard { --w: 40px; }
.sq-actions .muted { display: none; }
.bp-desktop { display: none; }
.bp-mobile { display: flex; gap: 6px; align-items: center; }
}
/* จอเล็ก: ชิปเดิมพันติดมุมขวาบนของรูปผู้เล่น (ไม่ยื่นเข้ากลางโต๊ะไปทับไพ่กลาง/ป้าย) */
@media (max-width: 720px), (max-width: 980px) and (orientation: landscape) and (max-height: 520px) {
.table-bet {
left: calc(50% + var(--cx) * var(--rx));
top: calc(50% + var(--cy) * var(--ry));
transform: translate(10px, -62px);
z-index: 4; padding: 0 6px 0 2px; font-size: 10px;
animation: chipPop .3s cubic-bezier(.2,.9,.3,1.4) both;
}
.table-bet .chip-dot { width: 11px; height: 11px; }
@keyframes chipPop { from { opacity: 0; } }
}
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px) {
.table-bet { transform: translate(8px, -50px); }
}
/* มือถือจอเตี้ย: บีบวงที่นั่งแนวตั้งอีก */
@media (max-width: 720px) and (max-height: 700px) {
.table-stage { --ry: 30%; }
.seat-slot.mine .hand .pcard { --w: 34px; }
.controls { max-height: 44%; }
}
/* แผงควบคุมเตี้ยลง: ไพ่ลุ้นกับปุ่ม "เปิดทีเดียว" อยู่แถวเดียวกัน */
@media (max-width: 980px) {
.squeeze { flex-direction: row; justify-content: center; align-items: center; gap: 10px; }
.squeeze .sq-actions { flex-direction: column; gap: 4px; }
.squeeze.select-mode { flex-direction: column; }
}
/* จอเตี้ย (มือถือจอเล็กแนวตั้ง / มือถือแนวนอน): ตรงกลางโต๊ะกะทัดรัด ไพ่คว่ำของคนอื่นเล็กลง */
@media (max-width: 720px) and (max-height: 700px), (max-width: 980px) and (orientation: landscape) and (max-height: 520px) {
.pot-label { display: none; }
.pot { min-width: 0; padding: 1px 10px 2px; }
.pot.has-pot { padding-top: 7px; }
.pot-chips { display: none; }
.pot.has-pot { padding-top: 2px; }
.table-center .board { margin-bottom: 4px; }
.phase-name { display: none; }
.timebar { height: 3px; }
.countdown { font-size: 14px; }
.seat-slot:not(.mine) .hand .pcard.back { --w: 18px; }
.seat-slot:not(.mine) .hand .pcard.back + .pcard.back { margin-left: -8px; }
.seat-slot.mine .hand .pcard { --w: 30px; }
.seat-info { min-height: 0; }
.sq-pref, .sq-pref-row { display: none; }
.controls { gap: 4px; }
.sq-card, .sq-card .pcard { --w: 36px; }
}
/* ===== ปุ่มโป๊กเกอร์แบบแอปมือถือ (PokerActionBar) ===== */
.pab-row { display: flex; gap: 8px; width: 100%; }
.pab-btn {
flex: 1; min-width: 0; min-height: 56px; padding: 6px 4px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
border-radius: 14px; border: none; cursor: pointer; color: #fff;
font-family: var(--font-display); line-height: 1.1;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.35);
transition: transform .08s, filter .15s;
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pab-btn span { font-size: 17px; font-weight: 600; }
.pab-btn small { font-size: 13px; font-weight: 500; opacity: .92; font-variant-numeric: tabular-nums; }
.pab-btn:active { transform: translateY(2px) scale(.98); box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); }
.pab-btn:disabled { opacity: .5; cursor: not-allowed; }
.pab-fold { background: linear-gradient(180deg, #8b2b33, #6a1d24); }
.pab-call { background: linear-gradient(180deg, #2f9a64, #1f7449); }
.pab-call.is-allin, .pab-allin { background: linear-gradient(180deg, #d9453c, #a52a23); }
.pab-raise-go { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink); }
.pab-back { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); box-shadow: none; flex: 0 0 34%; }
/* แผงเลือกยอดเรส */
.pab-raise { display: flex; flex-direction: column; gap: 8px; animation: pop .15s ease-out; }
.pab-raise-amount { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pab-raise-amount > div { flex: 1; text-align: center; display: flex; flex-direction: column; }
.pab-raise-amount strong { font-family: var(--font-display); font-size: 26px; color: var(--gold-2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pab-step {
width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-size: 24px; line-height: 1;
}
.pab-step:disabled { opacity: .35; }
.pab-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pab-preset {
display: flex; flex-direction: column; align-items: center; gap: 0; padding: 7px 4px; border-radius: 10px; cursor: pointer;
border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font-family: var(--font-display);
}
.pab-preset span { font-size: 14px; }
.pab-preset small { font-size: 11px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.pab-preset.on { border-color: var(--gold); background: rgba(217,169,63,.18); box-shadow: inset 0 0 0 1px var(--gold); }
.pab-preset.allin span { color: var(--neg); }
/* สั่งล่วงหน้าตอนยังไม่ถึงตา */
.pab-wait { font-size: 12px; color: var(--ink-dim); text-align: center; }
.pab-pre { gap: 6px; }
.pab-pre-btn {
flex: 1; min-width: 0; min-height: 44px; padding: 6px 4px; border-radius: 12px; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 6px;
border: 1px dashed var(--line); background: rgba(0,0,0,.2); color: var(--ink-dim);
font-family: var(--font-display); font-size: 13px; line-height: 1.15;
-webkit-tap-highlight-color: transparent;
}
.pab-pre-btn i { width: 14px; height: 14px; flex-shrink: 0; border-radius: 4px; border: 2px solid currentColor; }
.pab-pre-btn.on { border-style: solid; border-color: var(--gold); color: var(--gold-2); background: rgba(217,169,63,.14); }
.pab-pre-btn.on i { background: var(--gold); border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--panel); }
@media (max-width: 380px) {
.pab-btn span { font-size: 15px; }
.pab-btn small { font-size: 12px; }
.pab-pre-btn { font-size: 12px; }
}
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px) {
.pab-btn { min-height: 46px; }
.pab-presets { grid-template-columns: repeat(6, 1fr); }
.pab-raise-amount strong { font-size: 20px; }
}
/* ตอนเปิดแผงเรส: ซ่อนไพ่ลุ้น/ช่องติ๊กชั่วคราว ให้แผงสูงได้มากขึ้น ปุ่มยืนยันไม่ถูกตัด */
.controls:has(.pab-raise) .squeeze,
.controls:has(.pab-raise) .sq-pref,
.controls:has(.pab-raise) .sq-pref-row,
.controls:has(.pab-raise) .whatif { display: none; }
@media (max-width: 980px) {
.shell:has(.room-page) .controls:has(.pab-raise) { max-height: 64%; }
.pab-presets .pab-preset { padding: 5px 4px; }
.pab-raise { gap: 6px; }
}
/* =====================================================================
ปุ่มเล่นทุกเกมแบบ X-Poker: กลุ่มปุ่มใหญ่ทรงมน ไม่มีแผงลิ้นชัก
สีตามความหมาย: แดง = หมอบ/ยอมเสีย (อยู่ซ้ายสุด) · เขียว = ตาม/เช็ค/อยู่/ผ่าน · ทอง = เกทับ/จั่ว/ปุ่มหลัก
===================================================================== */
.dock-toggle, .dock-handle { display: none !important; }
.controls .decide-btns .btn,
.controls .control-line .btn-lg,
.controls .swap-box .btn-lg,
.controls .bp-go {
min-height: 54px; padding: 6px 10px; border-radius: 14px; border: none;
font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.15;
color: #fff; white-space: normal;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.35);
transition: transform .08s, filter .15s;
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.controls .decide-btns .btn:active,
.controls .control-line .btn-lg:active,
.controls .swap-box .btn-lg:active,
.controls .bp-go:active { transform: translateY(2px) scale(.98); box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); }
.controls .decide-btns .btn:disabled,
.controls .control-line .btn-lg:disabled,
.controls .swap-box .btn-lg:disabled { opacity: .45; }
/* ทอง: ปุ่มหลัก (เกทับ จั่ว ลงไพ่ เข้าร่วม ลงเดิมพัน) */
.controls .decide-btns .btn-gold,
.controls .control-line .btn-gold.btn-lg,
.controls .swap-box .btn-gold,
.controls .bp-go { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink); }
/* เขียว: ตาม เช็ค อยู่ ผ่าน หยุด */
.controls .decide-btns .btn-quiet,
.controls .swap-box .btn-quiet.btn-lg { background: linear-gradient(180deg, #2f9a64, #1f7449); color: #fff; }
/* แดง: หมอบ แคง ยอมเสีย และวางไว้ซ้ายสุดเสมอ */
.controls .decide-btns .btn-danger { background: linear-gradient(180deg, #8b2b33, #6a1d24); order: -1; }
.controls .decide-btns { display: flex; gap: 8px; }
.controls .decide-btns .btn { flex: 1; min-width: 0; }
/* ข้อความประกอบปุ่ม (ไพ่ในมือ / ต้องจ่าย) เป็นแถบเล็กเหนือกลุ่มปุ่ม */
.controls .decide { flex-direction: column; align-items: stretch; gap: 6px; }
.controls .decide-hand { flex-direction: row; justify-content: center; align-items: baseline; gap: 6px; max-width: none; font-size: 13px; }
.controls .decide-hand strong { font-size: 14px; color: var(--gold-2); }
.controls .control-line { align-items: center; }
.controls .control-line .btn-lg { flex: 0 0 auto; min-width: 42%; }
/* ตัวเลือกยอดเดิมพัน: ปุ่มลงเดิมพันใหญ่แบบเดียวกัน */
.controls .bp-go { min-width: 112px; }
.controls .bp-amount { height: 54px; border-radius: 14px; }
.controls .bp-step { width: 44px; height: 44px; }
/* มือถือ: ไม่มีแผง/กรอบ ปุ่มวางเป็นกลุ่มลอยใต้โต๊ะ */
@media (max-width: 980px) {
.shell:has(.room-page) .controls {
background: transparent !important; border: none !important; box-shadow: none !important;
border-radius: 0 !important; max-height: none !important; overflow: visible !important;
padding: 4px 10px calc(10px + env(safe-area-inset-bottom)) !important; gap: 8px;
}
/* ตัวหนังสือรอง/ช่องติ๊กเล็กลง ให้ปุ่มเด่น */
.controls .control-line > span, .controls .control-line > div { font-size: 13px; }
.controls .sq-pref, .controls .sq-pref-row { justify-content: center; opacity: .75; }
.controls .road { justify-content: center; }
}
@media (max-width: 380px) {
.controls .decide-btns .btn, .controls .control-line .btn-lg, .controls .swap-box .btn-lg { font-size: 14px; min-height: 50px; }
}
/* =====================================================================
เมนูบนมือถือ: แถบล่าง 5 ปุ่ม + แถบบนเหลือโลโก้กับยอดชิป
คอมพิวเตอร์ใช้เมนูบนเหมือนเดิม ในโต๊ะเกมซ่อนแถบล่าง
===================================================================== */
.bottom-nav { display: none; }
@media (max-width: 720px) {
.topbar { flex-wrap: nowrap; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 14px 8px; }
.topbar .nav-links, .topbar .user-name, .topbar .logout-form { display: none !important; }
.topbar .user-area { margin-left: auto; }
.brand-mark { width: 30px; height: 30px; font-size: 16px; }
.brand-name { font-size: 18px; }
.bottom-nav {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
display: grid; grid-template-columns: repeat(5, 1fr);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
background: rgba(24,12,15,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0,0,0,.35);
}
.bn-item {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
min-height: 50px; padding: 4px 2px; border-radius: 12px;
color: var(--ink-dim); font-family: var(--font-display); font-size: 11px; line-height: 1.1;
-webkit-tap-highlight-color: transparent; transition: color .15s, background .15s;
}
.bn-item:hover { text-decoration: none; color: var(--ink); }
.bn-item.active { color: var(--gold-2); }
.bn-item.active .icon { filter: drop-shadow(0 0 6px rgba(240,201,106,.45)); }
.bn-item { position: relative; }
.bn-item.active::before {
content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold-2);
}
.bn-icon { position: relative; display: inline-flex; }
.nav-badge {
position: absolute; top: -6px; right: -12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
display: grid; place-items: center; font-size: 10px; font-family: var(--font-body); font-weight: 600;
background: var(--neg); color: #fff; border: 2px solid rgba(24,12,15,.96);
}
/* เว้นที่ท้ายหน้าให้พ้นแถบล่าง */
.shell:has(.bottom-nav) > .content { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
.shell:has(.bottom-nav) .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
/* ในโต๊ะเกม: ไม่มีแถบล่าง (มีปุ่มย้อนกลับที่หัวโต๊ะ) */
.shell:has(.room-page) .bottom-nav { display: none; }
.shell:has(.room-page) > .content { padding-bottom: 0; }
}
/* ===== หน้า "ฉัน" ===== */
.me-page { max-width: 560px; margin: 0 auto; gap: 14px; }
.me-card {
display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; color: var(--ink);
background: linear-gradient(135deg, #3a1f14, var(--panel) 65%); border: 1px solid rgba(217,169,63,.35);
}
.me-card:hover { text-decoration: none; border-color: var(--gold); }
.me-avatar { width: 64px; height: 64px; font-size: 32px; }
.me-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.me-info strong { font-family: var(--font-display); font-size: 20px; }
.me-balance { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); color: var(--gold-2); font-size: 16px; }
.me-menu { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.me-menu a {
display: flex; align-items: center; gap: 14px; padding: 15px 16px; color: var(--ink); font-size: 15px;
border-bottom: 1px solid var(--line);
}
.me-menu a:last-child { border-bottom: none; }
.me-menu a:hover, .me-menu a:active { text-decoration: none; background: var(--panel-2); }
.me-menu a > .icon:first-child { color: var(--gold-2); }
.me-menu a > span { flex: 1; }
.me-menu a > .icon:last-child { color: var(--ink-dim); }
.me-logout .btn { min-height: 48px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* =====================================================================
ฝากเงิน / บัญชีธนาคาร / ตรวจสลิป
ใช้โทเคนเดิมของระบบ: --panel --line --gold --gold-2 --radius ฯลฯ
===================================================================== */
.dep-page { width: 100%; max-width: 640px; margin: 0 auto; }
.dep-page > .back-link { margin-bottom: -12px; }
/* บัตรบัญชี: เลขบัญชีเป็นสิ่งที่ลูกค้าต้องอ่าน/คัดลอก จึงเด่นที่สุด */
.dep-bank-card {
position: relative; display: grid; gap: 2px;
padding: 16px 18px; border-radius: var(--radius);
background: linear-gradient(135deg, #3a1f14, var(--panel) 65%);
border: 1px solid var(--line);
}
.dep-bank-name { font-size: 14px; color: var(--ink-dim); }
.dep-bank-no {
font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.2;
color: var(--gold-2); font-variant-numeric: tabular-nums; letter-spacing: .03em; overflow-wrap: anywhere;
}
.dep-bank-owner { font-family: var(--font-display); font-weight: 500; }
.dep-bank-compact { padding: 10px 14px; margin: 4px 0 10px; }
.dep-bank-compact .dep-bank-no { font-size: 20px; }
.dep-house-list { display: grid; gap: 10px; }
.dep-house { cursor: pointer; padding-right: 150px; transition: border-color .15s; }
.dep-house:hover { border-color: var(--gold); }
.dep-house.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.dep-copy { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); }
@media (max-width: 520px) {
.dep-house { padding-right: 18px; }
.dep-copy { position: static; transform: none; justify-self: start; margin-top: 8px; }
}
/* ขั้นตอนเป็นลำดับจริง (โอน → กรอกยอด → แนบสลิป) จึงใส่เลข */
.dep-steps { list-style: none; counter-reset: dep; padding: 0; margin: 0; display: grid; gap: 24px; }
.dep-steps > li { counter-increment: dep; position: relative; padding-left: 40px; }
.dep-steps > li::before {
content: counter(dep); position: absolute; left: 0; top: 0;
width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
font-family: var(--font-display); font-weight: 600; font-size: 14px;
background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink);
}
.dep-steps h2 { font-size: 17px; margin: 3px 0 10px; }
.dep-amount { font-family: var(--font-display); font-size: 24px; font-variant-numeric: tabular-nums; }
/* ช่องแนบสลิป: ทั้งกล่องกดได้ */
.dep-drop {
position: relative; display: grid; justify-items: center; gap: 4px;
padding: 28px 16px; border-radius: var(--radius); text-align: center; cursor: pointer;
background: var(--bg-2); border: 2px dashed var(--line); color: var(--ink);
transition: border-color .15s;
}
.dep-drop:hover, .dep-drop:focus-within { border-color: var(--gold); }
.dep-drop strong { font-family: var(--font-display); color: var(--gold-2); }
.dep-drop.has { border-style: solid; padding: 10px; }
.dep-drop img { max-width: 100%; max-height: 360px; border-radius: var(--radius-sm); }
.dep-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dep-warn { margin: 0; line-height: 1.6; }
.dep-warn a { color: inherit; text-decoration: underline; }
.dep-confirm { align-items: flex-start; color: var(--ink); }
.dep-confirm input { margin-top: 4px; flex-shrink: 0; }
.dep-empty { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 28px 18px; }
.dep-empty p { margin: 0; }
/* ยอดที่ต้องโอนของคำสั่งแพ็กเกจ */
.dep-order {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 16px 18px; border-radius: var(--radius);
border: 1px solid var(--gold); background: linear-gradient(180deg, rgba(217,169,63,.12), var(--panel));
}
.dep-order > div { display: grid; gap: 2px; min-width: 0; }
.dep-order-amount {
font-family: var(--font-display); font-size: clamp(30px, 8vw, 38px); line-height: 1.1;
color: var(--gold-2); font-variant-numeric: tabular-nums;
}
.dep-order + .muted { margin: -12px 0 0; }
/* ปุ่มส่งสลิปติดล่างจอบนมือถือ เหนือแถบเมนูล่าง (สูง 63px) */
@media (max-width: 720px) {
.dep-submit {
position: sticky; z-index: 5;
bottom: calc(63px + env(safe-area-inset-bottom));
margin: -8px -4px 0; padding: 10px 4px;
background: linear-gradient(to top, var(--bg) 75%, rgba(28,15,18,0));
}
}
/* สถานะหลังส่งคำขอ */
.dep-status {
text-align: center; padding: 28px 20px; border-radius: 18px;
background: var(--panel); border: 1px solid var(--line);
}
.dep-status h2 { font-size: 22px; margin: 10px 0 4px; }
.dep-status p { margin: 0; }
.dep-status-pending { border-color: rgba(242,184,75,.5); }
.dep-status-pending h2 { color: var(--warn); }
.dep-status-approved { border-color: rgba(111,211,154,.5); }
.dep-status-approved h2 { color: var(--pos); }
.dep-status-rejected { border-color: rgba(255,122,115,.45); }
.dep-status-rejected h2 { color: var(--neg); }
.dep-status .modal-actions { justify-content: center; }
.dep-facts { display: grid; margin: 14px 0; text-align: left; }
.dep-facts > div {
display: flex; justify-content: space-between; gap: 14px;
padding: 7px 0; border-bottom: 1px solid var(--line);
}
.dep-facts > div:last-child { border-bottom: 0; }
.dep-facts dt { color: var(--ink-dim); font-size: 14px; }
.dep-facts dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dep-slip-full { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: var(--radius-sm); }
/* ทางเข้าฝากเงินในหน้ากระเป๋า */
.dep-entry { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.dep-entry .panel-title { margin-bottom: 2px; }
.dep-entry p { margin: 0; }
.wallet-pending { display: block; margin: 0; }
.wallet-pending:hover { text-decoration: none; filter: brightness(1.1); }
/* ผู้ดูแล: หน้าตรวจสลิป สลิปซ้าย ข้อมูลขวา */
.modal.dep-review { width: min(980px, 100%); max-height: 94vh; }
.dep-review h2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dep-review-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.dep-review-slip {
display: grid; place-items: start center; overflow: auto; max-height: 72vh;
padding: 8px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line);
}
.dep-review-slip .center-msg { min-height: 200px; }
.dep-review-slip img { max-width: 100%; border-radius: 6px; cursor: zoom-in; }
.dep-review-slip img.zoom { max-width: none; width: 180%; cursor: zoom-out; }
.dep-sub { font-size: 14px; color: var(--ink-dim); margin: 14px 0 4px; }
.dep-checklist { padding-left: 20px; margin: 12px 0; line-height: 1.7; }
.dep-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.dep-reason {
padding: 5px 11px; border-radius: 999px; cursor: pointer;
background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-dim);
font: inherit; font-size: 13px;
}
.dep-reason:hover { border-color: var(--gold); color: var(--ink); }
.dep-reason.on { border-color: var(--gold); color: var(--gold-2); background: rgba(217,169,63,.12); }
@media (max-width: 760px) {
.dep-review-grid { grid-template-columns: 1fr; }
.dep-review-slip { max-height: 55vh; }
.modal.dep-review { padding: 16px; }
}
/* =====================================================================
รายการแบบฟีด: ใช้แทนตารางในหน้าผู้เล่น อ่านง่ายบนมือถือ
ซ้าย = อะไร/เมื่อไร ขวา = ตัวเลข แถวล่าง = สถานะและปุ่ม
===================================================================== */
.feed {
list-style: none; margin: 0; padding: 0 16px;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.feed-item {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px;
padding: 12px 0; border-bottom: 1px solid var(--line);
}
.feed-item:last-child { border-bottom: 0; }
.feed-main { display: grid; gap: 1px; min-width: 0; }
.feed-main > strong { font-family: var(--font-display); font-weight: 500; overflow-wrap: anywhere; }
.feed-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-side { display: grid; justify-items: end; align-content: start; gap: 1px; text-align: right; }
.feed-side > strong { font-family: var(--font-display); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.feed-side .small { white-space: nowrap; }
.feed-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.feed-actions:empty { display: none; }
a.status-pill:hover { text-decoration: none; filter: brightness(1.15); }
.feed-day { font-size: 14px; font-weight: 500; color: var(--ink-dim); margin: 0 0 -12px; }
.feed-more { margin-top: -8px; }
/* แพ็กเกจบนมือถือ: 2 คอลัมน์ กระชับขึ้น */
@media (max-width: 600px) {
.wallet-page .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wallet-page .package { padding: 12px; gap: 6px; }
.wallet-page .package h3 { font-size: 15px; }
.wallet-page .package .tag { align-self: flex-start; font-size: 11px; }
.wallet-page .pkg-chips { font-size: 22px; margin: 0; }
.wallet-page .pkg-breakdown { font-size: 12px; padding-left: 0; list-style: none; margin: 0; }
.wallet-hero { padding: 18px; }
.wallet-hero .bonus-actions, .dep-entry .bonus-actions { width: 100%; }
.wallet-hero .bonus-actions .btn, .dep-entry .bonus-actions .btn { flex: 1; }
.feed { padding: 0 12px; }
}
/* =====================================================================
ตาราง table.data.data-cards: บนจอแคบแต่ละแถวกลายเป็นการ์ด
ป้ายหัวคอลัมน์มาจาก data-label ของแต่ละช่อง (ไม่ใช้ชื่อ .stack เพราะชนกับป้ายชิปในโฮลเด็ม)
===================================================================== */
@media (max-width: 720px) {
.table-wrap:has(> table.data-cards) { border: 0; background: transparent; overflow: visible; }
table.data-cards thead { display: none; }
table.data-cards, table.data-cards tbody, table.data-cards tr { display: block; width: 100%; }
table.data-cards tr {
padding: 8px 14px; margin-bottom: 10px;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
table.data-cards tbody tr:hover { background: var(--panel); }
table.data-cards tr.new-row { border-style: dashed; }
table.data.data-cards td {
display: grid; grid-template-columns: minmax(84px, 38%) minmax(0, 1fr); column-gap: 12px;
justify-items: end; align-items: start;
padding: 6px 0; border: 0; border-bottom: 1px solid rgba(74,42,47,.5);
text-align: right; white-space: normal; overflow-wrap: anywhere;
}
table.data.data-cards td:last-child { border-bottom: 0; }
table.data-cards td > * { grid-column: 2; }
table.data-cards td[data-label]::before {
content: attr(data-label); grid-column: 1; grid-row: 1 / span 4;
justify-self: start; text-align: left; color: var(--ink-dim); font-size: 13px;
}
table.data.data-cards td:not([data-label]) { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
table.data-cards td.actions { padding-top: 10px; }
table.data-cards td.actions .btn { flex: 1; }
table.data-cards td:empty { display: none; }
table.data-cards td[colspan] { justify-content: center; color: var(--ink-dim); }
table.data-cards .mini-hand { flex-wrap: wrap; justify-content: flex-end; }
table.data-cards .input { width: 100%; }
table.data-cards input[type="checkbox"] { justify-self: end; }
}
/* =====================================================================
มือถือ: ปรับทุกหน้าทั่วไป (ไม่แตะหน้าโต๊ะเกม ซึ่งมีชุดของตัวเองแล้ว)
===================================================================== */
@media (max-width: 720px) {
.page { gap: 16px; }
.title-xl { font-size: 24px; }
.section-title { font-size: 17px; margin: 4px 0 0; }
.panel { padding: 14px; }
.empty { padding: 28px 16px; }
/* หัวหน้า: ปุ่มเต็มแถว กดง่าย */
.page-head { align-items: stretch; }
.page-head > div:first-child { flex: 1 1 100%; }
.head-actions { width: 100%; }
.head-actions .btn { flex: 1; }
/* แท็บ/เมนูผู้ดูแล: เลื่อนแนวนอนแทนการตัดบรรทัด */
.tabs, .admin-nav {
width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar, .admin-nav::-webkit-scrollbar { display: none; }
.tab, .admin-nav a { flex: 0 0 auto; white-space: nowrap; }
.tabs .tab { flex: 1 0 auto; }
/* ตัวเลขสรุป 2 คอลัมน์ */
.stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat { padding: 12px; }
.stat strong { font-size: 20px; overflow-wrap: anywhere; }
/* ตัวกรอง: ช่องค้นหาเต็มแถว ตัวเลือกแบ่งกัน */
.filters { gap: 8px; }
.filters .grow { flex: 1 1 100%; width: 100%; }
.filters select.input { flex: 1 1 40%; }
.filters .btn { flex: 1 1 auto; }
.promo-row .input { min-width: 0; }
.pager { justify-content: center; }
.admin-actions-grid { grid-template-columns: 1fr; }
.setting-row { flex-direction: column; align-items: stretch; gap: 8px; }
/* ป้องกัน iOS ซูมตอนแตะช่องกรอก (ตัวอักษรต้อง ≥ 16px) */
.input, .input-sm, select.input { font-size: 16px; }
/* ปุ่มสูงพอให้นิ้วกดโดน (เฉพาะหน้าทั่วไป หน้าโต๊ะเกมมีขนาดของตัวเอง) */
.page .btn, .modal .btn { min-height: 42px; }
.page .btn-sm, .modal .btn-sm { min-height: 36px; padding: 6px 12px; }
/* หน้าต่างป๊อปอัปเป็นแผ่นเลื่อนขึ้นจากล่าง */
.modal-backdrop { place-items: end center; padding: 0; }
.modal {
width: 100%; max-height: 90vh; border-radius: 20px 20px 0 0; border-bottom: 0;
padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
animation: sheet .22s ease-out;
}
.modal-sm { width: 100%; }
.modal-actions .btn { flex: 1; }
.leader-list li { padding: 10px 12px; gap: 10px; }
.profile-main h1 { font-size: 22px; }
.profile-hero > .btn, .profile-actions { width: 100%; }
.badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.badge-card { padding: 12px; }
}
@keyframes sheet { from { transform: translateY(40px); opacity: .4; } }
/* =====================================================================
เพื่อน: แถวเพื่อน + ปุ่มแชท/ชวนเล่น
===================================================================== */
.friend { flex-wrap: wrap; }
.friend > .lavatar { color: inherit; }
.friend > .lavatar:hover { text-decoration: none; }
a.friend-body { flex: 1 1 160px; color: var(--ink); gap: 1px; }
a.friend-body:hover { text-decoration: none; }
a.friend-body:hover strong { color: var(--gold-2); }
.friend-last { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-last.unread { color: var(--ink); font-weight: 600; }
.friend-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.chat-btn { color: var(--gold-2); width: 38px; height: 38px; }
.chat-btn:hover { text-decoration: none; }
.friend-x { width: 30px; height: 30px; background: transparent; border-color: transparent; color: var(--ink-dim); }
.friend-x:hover { color: var(--neg); border-color: rgba(255,122,115,.4); }
.profile-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* ตัวเลขแจ้งเตือนบนเมนูคอมพิวเตอร์ */
.nav-links .nav-badge {
display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
border-radius: 999px; background: var(--neg); color: #fff; font-family: var(--font-body);
font-size: 11px; font-weight: 600; vertical-align: 1px;
}
/* จุดออนไลน์บนอวตารในแชท/หน้าต่างชวน */
.chat-head .lavatar, .invite-friend .lavatar { position: relative; }
.lavatar.online .presence-dot, .invite-friend.online .presence-dot { background: var(--pos); }
/* =====================================================================
แชทกับเพื่อน: คอมพิวเตอร์เป็นกล่องกลางหน้า มือถือเต็มจอแบบแอปแชท
===================================================================== */
.chat-page {
width: 100%; max-width: 720px; margin: 0 auto;
height: calc(100vh - 140px); min-height: 420px;
display: flex; flex-direction: column; overflow: hidden;
background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
}
.chat-head {
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.chat-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.chat-who:hover { text-decoration: none; }
.chat-who .lavatar { width: 40px; height: 40px; font-size: 21px; }
.chat-who-text { display: grid; min-width: 0; line-height: 1.3; }
.chat-who-text strong { font-family: var(--font-display); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-note { padding: 8px 14px; font-size: 14px; background: rgba(255,122,115,.1); color: #ffc2bd; border-bottom: 1px solid var(--line); }
.chat-note.ok { background: rgba(111,211,154,.1); color: #bff0d3; }
.chat-note a { margin-left: 6px; }
.chat-thread {
flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
display: flex; flex-direction: column-reverse; gap: 6px;
padding: 14px 12px; background: var(--bg-2);
}
.bubble-row { display: flex; }
.bubble-row.mine { justify-content: flex-end; }
.bubble {
max-width: 78%; padding: 8px 12px 6px; border-radius: 16px 16px 16px 4px;
background: var(--panel-2); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45;
}
.mine .bubble {
border-radius: 16px 16px 4px 16px;
background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink);
}
.bubble time, .invite-bubble time { display: block; margin-top: 2px; font-size: 11px; opacity: .65; text-align: right; }
.invite-bubble {
display: grid; gap: 4px; justify-items: start; max-width: 80%; padding: 12px 14px 8px; border-radius: 14px;
border: 1px solid var(--gold); background: linear-gradient(180deg, rgba(217,169,63,.16), var(--panel));
}
.invite-bubble strong { font-family: var(--font-display); font-weight: 500; color: var(--gold-2); }
.invite-bubble time { justify-self: end; }
.chat-day { display: flex; justify-content: center; margin: 8px 0 4px; }
.chat-day span { padding: 2px 10px; border-radius: 999px; background: var(--panel); color: var(--ink-dim); font-size: 12px; }
.chat-empty { margin: auto; max-width: 320px; text-align: center; color: var(--ink-dim); display: grid; gap: 10px; justify-items: center; }
.chat-more { align-self: center; margin-bottom: 6px; }
.chat-thread .center-msg { min-height: 0; margin: auto; }
.chat-compose { padding: 8px 10px 10px; background: var(--panel); border-top: 1px solid var(--line); }
.quick-replies { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.quick-replies::-webkit-scrollbar { display: none; }
.quick {
flex: 0 0 auto; padding: 5px 12px; border-radius: 999px; cursor: pointer;
background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 14px;
}
.quick:hover { border-color: var(--gold); }
@media (max-width: 720px) {
.shell:has(.chat-page) .bottom-nav { display: none; }
.chat-page {
position: fixed; inset: 0; z-index: 45; height: 100dvh; max-width: none; min-height: 0;
border: 0; border-radius: 0;
}
.chat-head { padding: calc(8px + env(safe-area-inset-top)) 10px 8px; gap: 8px; }
.chat-head .icon-btn { width: 38px; height: 38px; }
.chat-compose { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.bubble { max-width: 84%; }
}
/* =====================================================================
แจ้งเตือนข้อความ/คำชวนจากเพื่อน (ทุกหน้า)
===================================================================== */
.chat-toasts {
position: fixed; z-index: 250; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
width: min(420px, calc(100vw - 20px)); display: grid; gap: 8px; pointer-events: none;
}
.chat-toast {
pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px;
border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); box-shadow: var(--shadow);
animation: pop .2s ease-out;
}
.chat-toast.invite { border-color: var(--gold); background: linear-gradient(180deg, rgba(217,169,63,.18), var(--panel-2)); }
.chat-toast .lavatar { width: 36px; height: 36px; font-size: 19px; }
.chat-toast-body { flex: 1; min-width: 0; display: grid; color: var(--ink); line-height: 1.35; }
.chat-toast-body:hover { text-decoration: none; }
.chat-toast-body strong { font-family: var(--font-display); font-weight: 500; }
.chat-toast-body span { color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-x { background: none; border: 0; color: var(--ink-dim); cursor: pointer; padding: 6px; display: grid; place-items: center; }
.toast-x:hover { color: var(--ink); }
@media (min-width: 721px) {
.chat-toasts { left: auto; right: 20px; top: 72px; transform: none; }
}
/* =====================================================================
หน้าต่างชวนเพื่อนในโต๊ะ: รายชื่อเพื่อนกดชวนได้ทันที
===================================================================== */
.invite-friends { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; margin: 4px 0 6px; }
.invite-friend { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-2); }
.invite-friend .lavatar { width: 34px; height: 34px; font-size: 18px; }
.invite-friend-name { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.invite-or { font-size: 14px; font-weight: 500; color: var(--ink-dim); margin: 16px 0 4px; }
/* =====================================================================
ค้นหา + ชิปตัวกรอง (หน้าเลือกเกมและล็อบบี้)
===================================================================== */
.find-bar { display: grid; gap: 10px; }
.find-row { display: flex; gap: 8px; }
.search-box {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
height: 46px; padding: 0 6px 0 14px; border-radius: 999px; cursor: text;
background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-dim);
transition: border-color .15s, box-shadow .15s;
}
.search-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,169,63,.18); color: var(--gold-2); }
.search-box input {
flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
color: var(--ink); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
}
.search-box input::placeholder { color: #8d7b6a; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-clear {
display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
background: var(--panel-2); border: 0; color: var(--ink-dim); cursor: pointer;
}
.search-clear:hover { color: var(--ink); }
.filter-btn { position: relative; height: 46px; border-radius: 999px; padding: 0 16px; }
.chip-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.chip-row::-webkit-scrollbar { display: none; }
.fchip {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-dim);
font-family: var(--font-display); font-size: 14px; white-space: nowrap; cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
.fchip:hover { color: var(--ink); border-color: var(--gold); }
.fchip.on { background: rgba(217,169,63,.16); border-color: var(--gold); color: var(--gold-2); }
.fchip-n { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.chip-sep { flex: 0 0 1px; align-self: stretch; margin: 6px 2px; background: var(--line); }
.link-btn { background: none; border: 0; padding: 0; color: var(--gold-2); font: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
/* แผ่นตัวกรอง */
.filter-sheet h2 { margin-bottom: 14px; }
.fgroup { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; display: grid; gap: 8px; }
.fgroup legend { padding: 0; margin-bottom: 8px; font-size: 14px; color: var(--ink-dim); }
.fgroup-opts { display: flex; flex-wrap: wrap; gap: 6px; }
/* =====================================================================
หน้าเลือกเกม
===================================================================== */
.resume-bar {
display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius);
border: 1px solid rgba(111,211,154,.45); background: linear-gradient(90deg, rgba(111,211,154,.12), var(--panel));
color: var(--ink);
}
.resume-bar:hover { text-decoration: none; border-color: var(--pos); }
.resume-text { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.resume-text strong { font-family: var(--font-display); font-weight: 500; }
.resume-text .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-card .game-go { display: none; }
/* =====================================================================
ล็อบบี้
===================================================================== */
.lobby-summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -6px 0 -8px; }
.room-card .rc-top h3 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rc-line .rc-stakes { margin: 0; }
.rc-status { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-buttons { display: flex; gap: 6px; }
.room-card.is-full { opacity: .7; }
.lobby-dock { display: none; }
@media (max-width: 720px) {
/* แถบค้นหาติดใต้แถบบนตอนเลื่อน */
.picker-page .find-bar, .lobby-page .find-bar {
position: sticky; z-index: 20; top: calc(47px + env(safe-area-inset-top));
margin: -6px -12px; padding: 8px 12px 10px;
background: rgba(28,15,18,.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* การ์ดเกมแบบแถวกะทัดรัด: รูปเล็กซ้าย ชื่อ/คำอธิบายขวา แตะทั้งการ์ดได้ */
.game-grid { grid-template-columns: 1fr; gap: 10px; }
.game-card {
flex-direction: row; align-items: center; gap: 14px; padding: 12px 12px 12px 8px;
border-radius: 16px; box-shadow: none;
}
.game-card:hover { transform: none; box-shadow: none; }
.game-card:active { background: var(--panel-2); }
.game-card::before { width: 40%; inset: -70% auto auto -15%; }
.game-art { flex: 0 0 76px; width: 76px; height: 76px; }
.game-art .gc-card {
width: 38px; height: 54px; margin-left: -19px; border-radius: 5px;
box-shadow: 0 4px 10px rgba(0,0,0,.4); transform-origin: 50% 140%;
}
.game-art .gc-card b { font-size: 15px; }
.game-art .gc-card i { font-size: 13px; }
.game-art .dice-row { gap: 3px; }
.game-art .dice-row.big { bottom: 16px; }
.game-art .dice-row.big .die, .game-art .dice-row.big .die.nt-die { --s: 24px; }
.game-body { flex: 1; min-width: 0; }
.game-body h2 { font-size: 19px; margin: 0 0 2px; }
.game-body p {
margin: 0 0 4px; font-size: 13px; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.game-meta { margin: 0; font-size: 12px; }
.game-tags, .game-cta { display: none; }
.game-card .game-go { display: block; flex-shrink: 0; color: var(--ink-dim); }
/* ล็อบบี้ */
.lobby-actions-top { display: none; }
.lobby-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
.room-grid { grid-template-columns: 1fr; gap: 10px; }
.room-card { padding: 12px 14px; gap: 8px; }
.room-card:hover { transform: none; }
.room-card h3 { font-size: 17px; }
.room-card .rc-rules {
flex-wrap: nowrap; overflow: hidden; margin: 0;
-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.room-card .rc-rules .tag { flex-shrink: 0; white-space: nowrap; }
.room-card .seat-dot { width: 9px; height: 9px; }
.rc-buttons .btn { min-width: 64px; }
.lobby-dock {
display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px;
position: sticky; z-index: 15; bottom: calc(63px + env(safe-area-inset-bottom));
margin: -8px 0 0; padding: 12px 0 4px;
background: linear-gradient(to top, var(--bg) 70%, rgba(28,15,18,0));
}
}
@media (max-width: 400px) {
.filter-btn > span:not(.badge) { display: none; }
.filter-btn { padding: 0 14px; }
}
/* =====================================================================
ล็อบบี้: ห้องแบบช่องตาราง (มือถือ 2 คอลัมน์ จอกว้างขึ้น 3 คอลัมน์ คอมหลายคอลัมน์)
===================================================================== */
.lobby-page .room-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.room-tile {
position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px;
padding: 12px; border-radius: var(--radius);
background: linear-gradient(170deg, var(--panel-2), var(--panel)); border: 1px solid var(--line);
transition: border-color .15s, transform .15s;
}
.room-tile:hover { border-color: var(--gold); }
.room-tile.is-system { border-top: 3px solid var(--felt); }
.room-tile.is-full { opacity: .62; }
.rt-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rt-name {
flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 500; font-size: 15px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rt-lock {
flex-shrink: 0; padding: 1px 7px; border-radius: 999px; font-size: 11px;
color: var(--warn); border: 1px solid rgba(242,184,75,.4); background: rgba(242,184,75,.08);
}
.rt-stake {
font-family: var(--font-display); font-size: 18px; line-height: 1.25; color: var(--gold-2);
font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.rt-seats { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rt-dots { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.rt-dots .seat-dot { width: 9px; height: 9px; }
.rt-count { flex-shrink: 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rt-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.rt-tags .tag { font-size: 11px; padding: 1px 7px; white-space: nowrap; }
.rt-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-width: 0; margin-top: auto; }
.rt-foot .status { font-size: 12px; padding: 1px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-foot .code { flex-shrink: 0; font-size: 11px; }
.rt-actions { display: flex; gap: 6px; }
.rt-actions .btn { flex: 1; }
.rt-actions .btn-quiet:not(:last-child) { flex: 0 0 auto; }
/* ช่องใส่เลขห้อง */
.code-tile { align-items: stretch; justify-content: center; border-style: dashed; background: var(--panel); text-align: center; }
.rt-lockmark {
align-self: center; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
background: var(--bg-2); color: var(--gold-2); font-family: var(--font-display); font-size: 18px;
}
.code-tile .rt-name { flex: 0 0 auto; }
.rt-code { text-align: center; letter-spacing: .08em; padding: 8px; font-family: ui-monospace, Consolas, monospace; }
@media (max-width: 720px) {
.lobby-page .room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.room-tile { padding: 10px; gap: 5px; border-radius: 12px; }
.room-tile:hover { transform: none; }
.rt-name { font-size: 14px; }
.rt-stake { font-size: 16px; }
.rt-tags {
flex-wrap: nowrap; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent);
}
.rt-tags:empty { display: none; }
.rt-actions .btn-sm { min-height: 34px; padding: 4px 8px; }
.code-tile .rt-code { font-size: 16px; }
}
@media (max-width: 540px) {
.lobby-page .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ───────── ไพ่ดัมมี่ ─────────
เฉพาะส่วนที่เกมอื่นไม่มี: กองทิ้งแบบกางให้เลือกเก็บ, กองลงเกิด, ป้ายหัว
ส่วนอื่นใช้คลาสเดิม (pile, pot, tl-hand, tl-card, card-count, seat) */
.dm-piles { display: flex; align-items: flex-end; justify-content: center; gap: 14px; max-width: 100%; }
/* กองทิ้ง: กางซ้อนแนวนอน ใบบนสุดอยู่ขวา เลื่อนได้เมื่อยาว */
.dm-discard {
position: relative; display: flex; align-items: flex-end;
min-width: 44px; max-width: min(46vw, 340px);
overflow-x: auto; padding: 14px 4px 20px; scrollbar-width: none;
}
.dm-discard::-webkit-scrollbar { display: none; }
.dm-discard .pile-label { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; }
.dm-dcard {
position: relative; flex-shrink: 0; padding: 0; border: none; background: none; cursor: pointer;
border-radius: 6px; transition: transform .12s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.dm-dcard + .dm-dcard { margin-left: -24px; }
.dm-dcard .pcard { animation: none; }
.dm-dcard:disabled { cursor: default; }
.dm-dcard:not(:disabled):hover { transform: translateY(-4px); }
.dm-dcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* ใบที่เลือกเก็บยกสูงมีกรอบทอง ใบที่ทับอยู่ (จะเข้ามือด้วย) ยกเล็กน้อย */
.dm-dcard.picked { transform: translateY(-12px); z-index: 2; }
.dm-dcard.picked .pcard { box-shadow: 0 0 0 3px var(--gold-2), 0 8px 16px rgba(0,0,0,.5); }
.dm-dcard.comes { transform: translateY(-6px); }
.dm-dcard.comes .pcard { box-shadow: 0 0 0 1px var(--gold); }
.dm-head {
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 18px;
color: var(--gold-ink); background: var(--gold); white-space: nowrap; pointer-events: none;
}
/* กองลงเกิดบนโต๊ะ: แตะเพื่อเลือกเป็นเป้าฝาก */
.dm-melds { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 4px 2px; }
.dm-meld {
display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
padding: 7px 9px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--panel); color: inherit; font: inherit; cursor: pointer;
}
.dm-meld:disabled { cursor: default; }
.dm-meld.fits { border-color: var(--gold); }
.dm-meld.picked { border-color: var(--gold-2); box-shadow: 0 0 0 2px var(--gold-2); }
.dm-meld:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dm-meld-cards { display: flex; }
.dm-mc + .dm-mc { margin-left: -26px; }
.dm-mc .pcard { animation: none; }
/* แถบสีใต้ใบบอกว่าใครวาง (แต้มใบนั้นเป็นของคนวาง) hue เดียวกับอวตาร */
.dm-mc .pcard { border-bottom: 3px solid hsl(var(--h) 60% 55%); }
.dm-mc.by-me .pcard { border-bottom-width: 5px; }
.dm-meld-label { font-size: 12px; white-space: nowrap; }
/* มือของเรา */
.dm-hand-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.tl-card.dm-special .pcard { box-shadow: inset 0 0 0 2px var(--gold); }
.dm-knock { background: var(--neg); color: #fff; }
@media (max-width: 560px) {
.dm-discard { max-width: 58vw; }
.dm-dcard + .dm-dcard { margin-left: -20px; }
.dm-mc + .dm-mc { margin-left: -20px; }
}
@media (prefers-reduced-motion: reduce) { .dm-dcard { transition: none; } }
/* ===== บิงโก =====
เดสก์ท็อป: โต๊ะผ้าสักหลาดสี่เหลี่ยม แสดงทุกแผ่นพร้อมกัน
มือถือ (≤980px): จอเดียวแบบแอป = แถบขานเลขติดบน → แผ่นของเรา (เลื่อนเฉพาะส่วนนี้) → ปุ่มหลักติดล่าง
จุดเด่นเดียวคือลูกที่เพิ่งออก สีตามคอลัมน์ ส่วนอื่นเงียบและอ่านง่าย */
.bingo-page {
--b: #3f7fc4; --i: #c8463f; --n: #e9dfc9; --g: #3f9a5a; --o: #d9a93f;
}
.col-b { --c: var(--b); } .col-i { --c: var(--i); } .col-n { --c: var(--n); } .col-g { --c: var(--g); } .col-o { --c: var(--o); }
/* ───────── แถบขานเลข ───────── */
.bingo-stage {
position: relative; margin: 38px 0 12px; padding: 14px 16px;
border-radius: 22px; border: 10px solid var(--felt-edge);
background:
radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.08), transparent 60%),
repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 2px, transparent 2px 5px),
radial-gradient(ellipse at center, var(--felt), var(--felt-2));
box-shadow: inset 0 0 0 2px rgba(217,169,63,.45), inset 0 0 60px rgba(0,0,0,.45), 0 0 0 3px #3b2412, 0 18px 40px rgba(0,0,0,.5);
display: flex; flex-direction: column; gap: 8px;
}
.bingo-stage .table-tools { top: -44px; }
.bg-call-btn.is-off { opacity: .55; }
.bg-caller { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; }
.bg-count { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: rgba(255,255,255,.85); }
.bg-count strong { font-family: var(--font-display); font-size: 20px; color: var(--gold-2); }
.bg-phase { color: rgba(255,255,255,.65); font-size: 12px; }
.bg-prize-chip { display: none; }
.bg-ball {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
font-family: var(--font-display); line-height: 1; color: #1c1416;
/* ลูกบิงโกแบบคลาสสิก: ลูกสีตามคอลัมน์ วงขาวตรงกลางใส่ตัวเลข + เงาวาว */
background:
radial-gradient(circle at 30% 22%, rgba(255,255,255,.6) 0 8%, transparent 9%),
radial-gradient(circle at 50% 50%, #fff 0 56%, var(--c, #999) 57% 100%);
box-shadow: inset 0 -4px 8px rgba(0,0,0,.28), 0 3px 8px rgba(0,0,0,.45);
}
.bg-ball small { font-size: 9px; opacity: .7; }
.bg-ball b { font-size: 15px; }
.bg-ball.big { width: 92px; height: 92px; animation: bgDrop .45s cubic-bezier(.2,1.4,.4,1) both; }
.bg-ball.big small { font-size: 16px; }
.bg-ball.big b { font-size: 38px; }
.bg-ball.ghost { color: rgba(255,255,255,.55); animation: none; background: rgba(0,0,0,.25); border: 2px dashed rgba(255,255,255,.25); box-shadow: none; }
.bg-ball.ghost small { font-size: 11px; letter-spacing: .08em; }
@keyframes bgDrop {
0% { transform: translateY(-40px) scale(.6); opacity: 0; }
100% { transform: none; opacity: 1; }
}
.bg-recent { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.bg-recent .bg-ball:nth-child(n+2) { opacity: .8; }
.bg-recent .bg-ball:nth-child(n+4) { opacity: .55; }
.bg-prize { display: flex; align-items: center; gap: 12px; }
.bg-paytable { border-collapse: collapse; font-size: 12px; color: rgba(255,255,255,.75); }
.bg-paytable td { padding: 1px 8px; }
.bg-paytable td:last-child { text-align: right; font-family: var(--font-display); color: var(--gold-2); }
.bg-paytable tr.on { background: rgba(217,169,63,.22); color: #fff; }
.bg-paytable tr.on td:first-child { border-radius: 6px 0 0 6px; }
.bg-paytable tr.on td:last-child { border-radius: 0 6px 6px 0; }
.bg-pattern { display: flex; flex-direction: column; align-items: center; gap: 3px; color: rgba(255,255,255,.8); }
.bg-mini { display: grid; grid-template-columns: repeat(5, 7px); gap: 2px; }
.bg-mini i { width: 7px; height: 7px; border-radius: 2px; background: rgba(255,255,255,.15); }
.bg-mini i.on { background: var(--gold-2); }
.bingo-stage .banner { align-self: center; text-align: center; }
/* ───────── ส่วนกลาง ───────── */
.bg-scroll { display: flex; flex-direction: column; gap: 10px; }
.bg-tabs { display: none; }
.bg-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.bg-cards.n-1 { grid-template-columns: minmax(0, 320px); justify-content: center; }
.bg-card {
padding: 8px; border-radius: var(--radius-sm); background: #fbf6ec; color: #1c1416;
box-shadow: 0 6px 16px rgba(0,0,0,.4); transition: box-shadow .2s;
}
.bg-card.hot { box-shadow: 0 0 0 3px var(--gold-2), 0 6px 16px rgba(0,0,0,.4); }
.bg-card.won { box-shadow: 0 0 0 3px var(--pos), 0 6px 16px rgba(0,0,0,.4); }
.bg-card-head { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-bottom: 3px; }
.bg-card-head span {
text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 22px;
border-radius: 5px; background: var(--c); color: #1c1416;
}
.bg-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.bg-cell {
position: relative; aspect-ratio: 1; padding: 0; border: 1px solid #e0d4bd; border-radius: 6px;
background: #fff; color: #1c1416; font: 600 15px var(--font-display); cursor: default;
-webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
.bg-cell:disabled { opacity: 1; }
.bg-cell.free { color: var(--gold); background: #f5ecd6; font-size: 1.1em; }
.bg-cell.callable { cursor: pointer; background: #fff4d6; border-color: var(--gold); }
.bg-cell.marked::after {
content: ""; position: absolute; inset: 14%; border-radius: 50%;
background: rgba(200,70,63,.55); mix-blend-mode: multiply;
}
.bg-cell.free.marked::after { display: none; }
.bg-cell.just.marked::after { animation: bgDab .35s ease-out; }
.bg-cell.wait { border: 2px dashed var(--i); }
.bg-cell.win { background: #d9f2df; border-color: var(--g); }
.bg-cell.win::after { background: rgba(63,154,90,.6); }
.bg-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@keyframes bgDab { from { transform: scale(1.6); opacity: 0; } to { transform: none; opacity: 1; } }
.bg-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding-top: 6px; font-size: 13px; }
.bg-foot-btn {
flex: 1; min-height: 32px; padding: 4px 10px; border-radius: 8px; border: 1px solid #d8ccb7;
background: #fff; color: #5b3a12; font: 500 13px var(--font-body); cursor: pointer;
}
.bg-foot-btn.neg { color: #b3232b; flex: 0 0 auto; }
.bg-foot-btn:disabled { opacity: .5; }
.bg-wait-pill, .bg-win-pill {
padding: 2px 12px; border-radius: 999px; font-family: var(--font-display); font-size: 14px; color: #fff;
}
.bg-wait-pill { background: var(--i); animation: blink 1s ease-in-out infinite; }
.bg-win-pill { background: var(--g); }
.bg-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px; text-align: center; }
.bg-empty-card { display: grid; grid-template-columns: repeat(5, 34px); gap: 4px; opacity: .85; }
.bg-empty-card span {
display: grid; place-items: center; height: 34px; border-radius: 7px;
font: 700 17px var(--font-display); color: #1c1416; background: var(--c);
}
/* ผู้เล่นคนอื่น เรียงคนที่ใกล้บิงโกก่อน */
.bg-players { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-player {
position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px;
border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 13px;
}
.bg-player.hot { border-color: var(--neg); }
.bg-player.won { border-color: var(--pos); }
.bg-player .avatar.sm { width: 26px; height: 26px; font-size: 12px; border-width: 1px; }
.bg-player-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* กระดานเลขที่ออก 5 แถว × 15 */
.bg-board-wrap { border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); padding: 8px 10px; }
.bg-board-wrap summary { cursor: pointer; font-size: 13px; color: var(--ink-dim); }
.bg-board { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; overflow-x: auto; }
.bg-board-row { display: grid; grid-template-columns: 22px repeat(15, minmax(20px, 1fr)); gap: 3px; }
.bg-board-letter { display: grid; place-items: center; border-radius: 5px; font: 600 12px var(--font-display); color: #1c1416; background: var(--c); }
.bg-board-n {
display: grid; place-items: center; height: 22px; border-radius: 5px; font-size: 11px;
color: rgba(255,255,255,.35); background: rgba(255,255,255,.05);
}
.bg-board-n.on { color: var(--gold-ink); background: var(--gold); font-weight: 600; }
.bg-board-n.last { background: var(--gold-2); box-shadow: 0 0 0 2px #fff; }
/* ───────── แผงล่าง ───────── */
.bg-controls .control-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bg-ctl-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bg-ctl-info strong { font-family: var(--font-display); font-size: 16px; }
.bg-buy { min-width: 150px; }
.bg-mark-btn { flex-shrink: 0; }
.bg-ctl-wait { margin: 4px 0; text-align: center; }
/* การ์ดเกมในหน้าเลือกเกม */
.gc-balls { display: flex; gap: 6px; align-items: flex-end; margin-bottom: 18px; }
.gc-ball {
width: 46px; height: 46px; border-radius: 50%;
display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
font-family: var(--font-display); color: #1c1416;
background:
radial-gradient(circle at 30% 22%, rgba(255,255,255,.6) 0 8%, transparent 9%),
radial-gradient(circle at 50% 50%, #fff 0 56%, var(--c, #999) 57% 100%);
box-shadow: inset 0 -4px 8px rgba(0,0,0,.28), 0 6px 14px rgba(0,0,0,.45);
}
.gc-ball small { font-size: 10px; } .gc-ball b { font-size: 18px; }
.gc-ball:nth-child(2) { transform: translateY(-10px); }
.gc-ball:nth-child(4) { transform: translateY(-6px); }
.gc-balls .col-b { --c: #3f7fc4; } .gc-balls .col-i { --c: #c8463f; } .gc-balls .col-n { --c: #e9dfc9; }
.gc-balls .col-g { --c: #3f9a5a; } .gc-balls .col-o { --c: #d9a93f; }
/* หน้าเลือกเกมบนมือถือ: รูปเกมเหลือกล่อง 76×76 จัดเป็นลูกบอล 3 ลูกซ้อนกันแทนแถว 5 ลูก */
@media (max-width: 720px) {
.game-art .gc-balls { position: absolute; inset: 0; margin: 0; display: block; }
.game-art .gc-ball { position: absolute; width: 36px; height: 36px; transform: none; box-shadow: inset 0 -3px 6px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.4); }
.game-art .gc-ball small { font-size: 8px; }
.game-art .gc-ball b { font-size: 14px; }
.game-art .gc-ball:nth-child(1) { left: 2px; bottom: 6px; }
.game-art .gc-ball:nth-child(2) { left: 20px; top: 6px; z-index: 2; }
.game-art .gc-ball:nth-child(3) { right: 2px; bottom: 6px; z-index: 1; }
.game-art .gc-ball:nth-child(n+4) { display: none; }
}
/* ============================================================
มือถือ/แท็บเล็ต: จอเดียวแบบแอป
============================================================ */
@media (max-width: 980px) {
/* แถบขานเลข: ติดบน สูงคงที่ */
.bingo-page .bingo-stage {
flex: 0 0 auto; margin: 0; padding: 8px 10px;
border: none; border-radius: 0 0 18px 18px; gap: 6px;
box-shadow: inset 0 -2px 0 rgba(217,169,63,.45), 0 6px 16px rgba(0,0,0,.4);
}
.bingo-page .bingo-stage .table-tools { top: 6px; right: 8px; }
.bg-caller {
grid-template-columns: auto 1fr; grid-template-areas: "ball count" "recent recent";
gap: 6px 10px;
}
.bg-caller > .bg-ball.big { grid-area: ball; width: 66px; height: 66px; }
.bg-ball.big small { font-size: 12px; }
.bg-ball.big b { font-size: 28px; }
.bg-count { grid-area: count; padding-right: 118px; } /* เว้นที่ให้ปุ่มเสียง/ขานเลข/อีโมจิมุมขวาบน */
.bg-count strong { font-size: 18px; }
.bg-prize { display: none; }
.bg-prize-chip {
display: inline-block; align-self: flex-start; max-width: 100%; margin-top: 2px;
padding: 1px 9px; border-radius: 999px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--gold-2); background: rgba(0,0,0,.35); border: 1px solid rgba(217,169,63,.45);
}
.bg-recent { grid-area: recent; }
.bg-recent:empty { display: none; }
.bg-recent .bg-ball { width: 30px; height: 30px; }
.bg-recent .bg-ball small { font-size: 8px; }
.bg-recent .bg-ball b { font-size: 12px; }
.bingo-stage .timebar { height: 4px; }
.bingo-stage .banner {
align-self: stretch; padding: 3px 10px; font-size: 13px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ส่วนกลาง: ส่วนเดียวที่เลื่อนได้ */
.bingo-page .bg-scroll {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding: 10px 10px 14px; gap: 10px;
}
/* ห้ามลูกในคอลัมน์หดตัว: แถวที่เลื่อนแนวนอนได้จะถูกบีบจนสูงเป็นศูนย์ */
.bingo-page .bg-scroll > * { flex-shrink: 0; }
/* แท็บแผ่น: เห็นภาพรวมทุกแผ่นด้วยแผนที่จุดเล็ก ๆ แตะเพื่อสลับ */
.bg-tabs { display: flex; gap: 6px; }
.bg-tab {
flex: 1 1 0; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 5px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
color: var(--ink); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bg-tab .bg-mini { grid-template-columns: repeat(5, 5px); gap: 1px; }
.bg-tab .bg-mini i { width: 5px; height: 5px; border-radius: 1px; }
.bg-tab-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; min-width: 0; }
.bg-tab-text b { font-size: 12px; font-weight: 600; }
.bg-tab-text small { font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.bg-tab.on { border-color: var(--gold-2); background: var(--panel-2); box-shadow: 0 0 0 1px var(--gold-2); }
.bg-tab.hot { border-color: var(--neg); }
.bg-tab.hot small { color: var(--neg); font-weight: 600; }
.bg-tab.won { border-color: var(--pos); }
.bg-tab.won small { color: var(--pos); font-weight: 600; }
/* แผ่นใหญ่ทีละแผ่น ขนาดพอดีความสูงจอ เห็นทั้งแผ่นโดยไม่ต้องเลื่อน */
.bg-cards, .bg-cards.n-1 { display: flex; justify-content: center; }
.bg-cards:not(.n-1) .bg-card:not(.focus) { display: none; }
.bg-card {
width: min(100%, 440px, max(230px, calc(100dvh - 400px)));
padding: 8px; border-radius: 14px;
}
.bg-card-head span { font-size: clamp(15px, 4.4vw, 20px); line-height: 1.5; }
.bg-grid { gap: 4px; }
.bg-cell { font-size: clamp(15px, 5vw, 24px); border-radius: 8px; }
/* ผู้เล่นคนอื่น: แถวเดียวเลื่อนแนวนอน */
.bg-players { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 10px; }
.bg-players::-webkit-scrollbar { display: none; }
/* แผงล่าง: สั้น ปุ่มใหญ่ */
.bingo-page .bg-controls { max-height: none; padding-top: 10px; }
.bg-buy { min-height: 50px; min-width: 44%; font-size: 17px; }
.bg-ctl-info strong { font-size: 15px; }
.bg-mark-btn { min-height: 40px; }
.bingo-page .result-line { margin: 2px 0; }
}
/* มือถือจอสั้น: ย่อลูกใหญ่ และซ่อนแถบข้อความ (ข้อมูลเดียวกันอยู่บนแผ่นและแถวผู้เล่นแล้ว) */
@media (max-width: 980px) and (max-height: 700px) {
.bg-caller > .bg-ball.big { width: 56px; height: 56px; }
.bg-ball.big b { font-size: 24px; }
.bingo-stage .banner { display: none; }
}
/* จอเตี้ย (มือถือแนวนอน): ย่อแถบขานเลขลงอีก */
@media (max-width: 980px) and (max-height: 520px) {
.bg-caller > .bg-ball.big { width: 50px; height: 50px; }
.bg-ball.big b { font-size: 22px; }
.bg-recent { display: none; }
.bingo-stage .banner { display: none; }
.bg-card { width: min(100%, max(220px, calc(100dvh - 200px))); }
}
@media (prefers-reduced-motion: reduce) {
.bg-ball.big, .bg-cell.just.marked::after, .bg-wait-pill { animation: none; }
}
/* ตรวจยอดชิป (ต่อท้าย app.css) */
.recon-panel {
margin: 16px 0 20px;
}
.recon-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.recon-head .panel-title {
margin: 0;
}
.recon-panel .alert {
margin: 8px 0 12px;
}
/* ถอนเงิน (ต่อท้าย app.css) */
.wd-page .stat-row {
margin: 14px 0;
}
.wd-panel {
margin-top: 14px;
}
.wd-panel .form {
max-width: 360px;
}
.wd-checks {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.wd-checks li::before {
display: inline-block;
width: 1.4em;
font-weight: 700;
}
.wd-checks li.ok::before {
content: "✓";
color: var(--pos);
}
.wd-checks li.todo::before {
content: "•";
color: var(--neg);
}
.wd-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin: 6px 0;
}
.wd-actions .input-sm {
min-width: 150px;
flex: 1;
}
.wd-kyc {
margin-top: 10px;
padding: 12px;
border-radius: 10px;
background: var(--bg-2);
}
.wd-kyc p {
margin: 0 0 8px;
}
.wd-sub {
font-size: 14px;
margin: 16px 0 6px;
color: var(--ink-dim);
}
.wd-history {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.wd-history li {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
font-size: 14px;
}
.kyc-card {
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px;
margin: 10px 0;
}
.kyc-card.selected {
border-color: var(--gold);
}
.kyc-meta {
display: grid;
grid-template-columns: max-content 1fr;
gap: 4px 12px;
font-size: 14px;
margin: 8px 0;
}
.kyc-check {
display: flex;
flex-direction: column;
gap: 6px;
margin: 10px 0;
}
.kyc-check label {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 14px;
cursor: pointer;
}
.kyc-check input {
margin-top: 3px;
accent-color: var(--gold);
}
/* ปุ่มหลักและแท็บในหน้ากระเป๋า */
.wallet-main-actions {
display: flex;
gap: 10px;
margin: 12px 0 8px;
flex-wrap: wrap;
}
.wallet-main-actions .btn {
min-width: 140px;
}
.btn-outline {
background: transparent;
color: var(--gold-2);
border: 1.5px solid var(--gold);
}
.btn-outline:hover {
background: rgba(217,169,63,.1);
}
.wallet-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
padding: 4px;
margin: 16px 0 14px;
border-radius: 14px;
background: var(--panel);
border: 1px solid var(--line);
position: sticky;
top: env(safe-area-inset-top, 0px);
z-index: 5;
}
.wallet-tab {
padding: 11px 8px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--ink-dim);
font: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.wallet-tab:hover {
color: var(--ink);
}
.wallet-tab.active {
background: var(--panel-2);
color: var(--gold-2);
box-shadow: inset 0 -2px 0 var(--gold);
}
@media (max-width: 640px) {
.wallet-main-actions .btn {
flex: 1;
min-width: 0;
}
.wallet-tab {
font-size: 14px;
padding: 10px 4px;
}
}
/* หน้าความปลอดภัยแอดมิน */
.backup-codes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 8px;
margin: 10px 0 14px;
}
.backup-codes code {
padding: 8px 10px;
border-radius: 8px;
background: var(--bg-2);
font-size: 15px;
letter-spacing: .5px;
text-align: center;
}
/* =====================================================================
ล็อบบี้: รูปโต๊ะย่อในการ์ดห้อง (LobbyTableArt)
สีผ้าตามระดับเดิมพัน ที่นั่งรอบโต๊ะ = คนที่นั่งจริง
===================================================================== */
.lt {
--lt-felt: #13573a; --lt-felt-hi: #22805a; --lt-felt-lo: #0a3524;
--lt-rail: linear-gradient(160deg, #7c5431, #4a2d14 70%);
position: relative; aspect-ratio: 16 / 10; container-type: inline-size;
margin: -2px -2px 4px;
}
.lt-mid {
--lt-felt: #1a4d61; --lt-felt-hi: #2b7690; --lt-felt-lo: #0d2e3c;
}
.lt-high {
--lt-felt: #5a1a2b; --lt-felt-hi: #86304a; --lt-felt-lo: #330b16;
--lt-rail: linear-gradient(160deg, #d9ac4c, #8a5f1c 55%, #b98a35);
}
.lt-table {
position: absolute; inset: 14% 12%; border-radius: 50%; padding: 3.4cqw;
background: var(--lt-rail);
box-shadow: inset 0 1.5px 0 rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.35), 0 8px 16px rgba(0,0,0,.5);
transition: transform .18s ease;
}
.lt-felt {
position: relative; width: 100%; height: 100%; border-radius: 50%;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6cqw;
background: radial-gradient(ellipse 70% 60% at 50% 38%, var(--lt-felt-hi), var(--lt-felt) 58%, var(--lt-felt-lo));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 22px rgba(0,0,0,.55);
filter: saturate(.5) brightness(.72);
transition: filter .2s ease;
}
/* เส้นวงในผ้าเหมือนโต๊ะจริง */
.lt-felt::before {
content: ""; position: absolute; inset: 16% 13%; border-radius: 50%;
border: 1px solid rgba(255,255,255,.1);
}
.lt-live .lt-felt, .room-tile:hover .lt-felt, .room-tile:focus-within .lt-felt { filter: none; }
.room-tile:hover .lt-table { transform: translateY(-2px); }
/* ไพ่กลางโต๊ะ: มีคนเล่น = กางสามใบ, ว่าง = วางเป็นกอง */
.lt-cards { position: relative; width: 9cqw; aspect-ratio: 5 / 7; }
.lt-cards i {
position: absolute; inset: 0; border-radius: 1cqw;
background:
repeating-linear-gradient(45deg, rgba(240,201,106,.22) 0 1px, transparent 1px 3px),
linear-gradient(160deg, #8e2a37, #561521);
border: 1px solid #f0c96a; box-shadow: 0 1px 3px rgba(0,0,0,.5);
transform-origin: 50% 110%;
transition: transform .25s ease;
}
.lt-cards i:nth-child(1) { transform: translate(-1px, 1px); }
.lt-cards i:nth-child(2) { transform: translate(0, 0); }
.lt-cards i:nth-child(3) { transform: translate(1px, -1px); }
.lt-live .lt-cards i:nth-child(1) { transform: rotate(-18deg); }
.lt-live .lt-cards i:nth-child(3) { transform: rotate(18deg); }
/* ที่นั่ง */
.lt-seat {
position: absolute; transform: translate(-50%, -50%);
width: max(16px, 11.5cqw); aspect-ratio: 1; border-radius: 50%;
display: grid; place-items: center; overflow: hidden;
background: rgba(28,15,18,.82); border: 1.5px dashed rgba(243,233,216,.26);
font-family: var(--font-display); font-size: max(9px, 6cqw); line-height: 1; color: #fff;
}
.lt-seat.on {
border: 1.5px solid var(--gold-2);
background: radial-gradient(circle at 35% 30%, hsl(var(--h, 20) 55% 52%), hsl(var(--h, 20) 50% 30%));
box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
/* จำนวนคน เขียนบนผ้ากลางโต๊ะใต้ไพ่ (แทนแถวจุดที่นั่งเดิม) */
.lt-count {
position: relative; font-family: var(--font-display); font-size: max(10px, 5.2cqw); font-weight: 500;
line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
color: rgba(243,233,216,.72); text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.lt-count.is-live { color: #bff0d3; }
.lt-count.is-full { color: #ffc2bd; }
.lt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* รูปโต๊ะแสดงที่นั่งแล้ว ซ่อนแถวจุดที่นั่งเดิมในการ์ด */
.room-tile .rt-seats { display: none; }
@media (max-width: 720px) {
.lt { margin: -2px -2px 2px; }
}
@media (prefers-reduced-motion: reduce) {
.lt-table, .lt-felt, .lt-cards i { transition: none; }
.room-tile:hover .lt-table { transform: none; }
}
/* เวลาค่าเข้าห้องแบบรายรอบ บนหัวโต๊ะ */
.entry-timer { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-display); line-height: 1.2; color: var(--ink-dim); }
.entry-timer strong { font-size: 15px; font-variant-numeric: tabular-nums; color: #f0c9a0; }
.entry-timer.warn strong { color: #ff8a7a; animation: entry-pulse 1.2s ease-in-out infinite; }
@keyframes entry-pulse { 50% { opacity: .45; } }
@media (max-width: 640px) { .entry-timer .small { display: none; } .entry-timer strong { font-size: 13px; } }
/* ═══════════ าษาสีของชิป: ทอง = ชิปจริง, เงิน = ชิปจำลอง ═══════════
คัดลอกทั้งไฟล์นี้ไปต่อท้าย wwwroot/app.css (หรือเพิ่ม ใน App.razor) */
:root {
--chip-gold-1: #f6d77a;
--chip-gold-2: #c9962b;
--chip-silver-1: #eef1f5;
--chip-silver-2: #9aa3ae;
}
/* เหรียญเงิน: ใช้ chip-dot เดิม (ทอง) แล้วเปลี่ยนเป็นโทนเงิน ไม่ต้องรู้ว่าเหรียญเดิมวาดด้วยอะไร */
.chip-dot.silver {
filter: grayscale(1) brightness(1.35);
}
/* ── ป้ายยอดมุมขวาบน ── */
.chip-badges {
display: inline-flex;
align-items: center;
gap: .35rem;
text-decoration: none;
color: inherit;
}
.chip-pill {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .3rem .65rem;
border-radius: 999px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .10);
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
transition: opacity .2s, transform .2s;
}
.chip-pill.real {
color: var(--chip-gold-1);
border-color: rgba(233, 185, 73, .45);
background: linear-gradient(135deg, rgba(246, 215, 122, .14), rgba(201, 150, 43, .08));
}
.chip-pill.dim {
opacity: .45;
transform: scale(.94);
}
@media (max-width: 420px) {
.chip-pill {
padding: .25rem .5rem;
font-size: .85rem;
}
}
/* ── หน้ากระเป๋า: สองแผง ── */
.purse {
border-radius: 18px;
padding: 1.1rem 1.1rem 1rem;
margin-bottom: 1rem;
border: 1px solid rgba(255, 255, 255, .08);
}
.purse-real {
background: radial-gradient(120% 90% at 100% 0%, rgba(246, 215, 122, .18), transparent 60%), linear-gradient(160deg, rgba(201, 150, 43, .16), rgba(0, 0, 0, .15));
border-color: rgba(233, 185, 73, .40);
box-shadow: 0 0 0 1px rgba(233, 185, 73, .08) inset, 0 10px 30px -18px rgba(233, 185, 73, .55);
}
.purse-play {
background: linear-gradient(160deg, rgba(238, 241, 245, .06), rgba(0, 0, 0, .12));
border-color: rgba(200, 206, 214, .18);
}
.purse-head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: .75rem;
margin-bottom: .75rem;
}
.purse-label {
display: flex;
align-items: center;
gap: .4rem;
margin: 0;
font-weight: 600;
letter-spacing: .02em;
}
.purse-amount {
margin: .15rem 0 .1rem;
font-size: clamp(2rem, 8vw, 2.6rem);
font-weight: 800;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.purse-real .purse-amount {
background: linear-gradient(180deg, var(--chip-gold-1), var(--chip-gold-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.purse-play .purse-amount {
color: var(--chip-silver-1);
}
.purse-empty {
text-align: center;
padding: .5rem 0 .25rem;
}
.purse-empty .btn {
margin-top: .5rem;
}
.purse-clubs {
display: grid;
gap: .6rem;
margin-bottom: .6rem;
}
.club-card {
border-radius: 14px;
padding: .75rem .85rem;
background: rgba(0, 0, 0, .22);
border: 1px solid rgba(233, 185, 73, .22);
}
.club-card.off {
opacity: .7;
}
.club-card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: .5rem;
}
.club-card-top strong {
display: block;
}
.club-card-amount {
display: flex;
align-items: center;
gap: .35rem;
font-size: 1.25rem;
font-weight: 700;
color: var(--chip-gold-1);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.club-card-actions {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-top: .6rem;
}
.club-card-actions .btn {
flex: 1 1 auto;
text-align: center;
}
/* ── ล็อบบี้: ห้องชิปจริงขอบทอง ── */
.room-tile.is-real {
border-color: rgba(233, 185, 73, .55) !important;
box-shadow: 0 0 0 1px rgba(233, 185, 73, .15) inset, 0 8px 24px -16px rgba(233, 185, 73, .6);
}
.tag .chip-dot {
vertical-align: -1px;
}
/* ── บัญชีที่ต้องโอนให้ผู้เล่น (หน้าต่างจ่ายถอน) ปุ่มไม่ทับตัวเลข ทั้งมือถือและคอม ── */
.pay-to {
display: grid;
gap: .5rem;
justify-items: stretch;
text-align: left;
}
.pay-to-card {
display: grid;
gap: .15rem;
padding: .7rem .85rem;
border-radius: 12px;
background: rgba(0, 0, 0, .25);
border: 1px solid rgba(233, 185, 73, .35);
}
.pay-to-bank {
font-size: .85rem;
opacity: .8;
}
.pay-to-no {
font-size: 1.35rem;
font-weight: 800;
letter-spacing: .02em;
color: var(--chip-gold-1);
font-variant-numeric: tabular-nums;
user-select: all;
word-break: break-all;
}
.pay-to-name {
font-weight: 600;
}
.pay-to-actions {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.pay-to-actions .btn {
flex: 1 1 8rem;
}
/* ═══════════ โหมดหลังบ้าน (จัดการคลับ / เอเย่นต์): โทนฟ้าเขียว + สต็อกเป็นกล่อง ไม่ใช่เหรียญ ═══════════ */
:root {
--stock-1: #6fe3d0;
--stock-2: #1f9e8e;
}
/* ไอคอนสต็อก: กล่องสี่เหลี่ยมมุมมน มีฝากล่อง */
.stock-dot {
display: inline-block;
width: .95em;
height: .8em;
border-radius: 3px;
background: linear-gradient(180deg, var(--stock-1), var(--stock-2));
box-shadow: inset 0 .22em 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(0, 0, 0, .25);
vertical-align: -.05em;
flex: none;
}
.chip-pill.stock {
color: var(--stock-1);
border-color: rgba(111, 227, 208, .45);
background: linear-gradient(135deg, rgba(111, 227, 208, .14), rgba(31, 158, 142, .08));
}
.chip-pill-label {
font-weight: 500;
opacity: .8;
font-size: .85em;
}
.backoffice {
--bo-accent: var(--stock-1);
}
.bo-banner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem .75rem;
padding: .6rem .85rem;
margin-bottom: .9rem;
border-radius: 12px;
background: linear-gradient(90deg, rgba(111, 227, 208, .16), rgba(31, 158, 142, .06));
border: 1px solid rgba(111, 227, 208, .35);
font-size: .9rem;
}
.bo-banner > span:nth-child(2) {
flex: 1 1 14rem;
}
.bo-head {
margin-bottom: .75rem;
}
.bo-head .title-xl {
margin-bottom: .25rem;
}
.bo-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
gap: .6rem;
margin-bottom: 1rem;
}
.bo-stat {
display: grid;
gap: .15rem;
text-align: left;
padding: .75rem .85rem;
border-radius: 14px;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .08);
color: inherit;
font: inherit;
cursor: pointer;
transition: border-color .15s, transform .15s;
}
.bo-stat:hover {
border-color: rgba(111, 227, 208, .45);
transform: translateY(-1px);
}
.bo-stat strong {
font-size: 1.45rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1.15;
}
.bo-stat-label {
display: flex;
align-items: center;
gap: .35rem;
font-size: .85rem;
opacity: .85;
}
.bo-stat-sub {
font-size: .78rem;
opacity: .65;
}
.bo-stat-stock {
background: linear-gradient(160deg, rgba(111, 227, 208, .14), rgba(31, 158, 142, .05));
border-color: rgba(111, 227, 208, .40);
}
.bo-stat-stock strong {
color: var(--stock-1);
}
.bo-stat-alert {
border-color: rgba(235, 87, 87, .6);
background: rgba(235, 87, 87, .08);
}
.bo-stat-alert strong {
color: #ff8a8a;
}
/* แท็บโหมดหลังบ้าน: ไฮไลต์เป็นฟ้าเขียวแทนทอง */
.backoffice .bo-nav .tab.on {
color: var(--stock-1);
border-color: rgba(111, 227, 208, .5);
box-shadow: inset 0 -2px 0 var(--stock-1);
}
/* คอม: เมนูแท็บย้ายไปซ้าย ใช้พื้นที่จอกว้าง */
@media (min-width: 900px) {
.bo-layout {
display: grid;
grid-template-columns: 12.5rem minmax(0, 1fr);
gap: 1.25rem;
align-items: start;
}
.bo-nav {
position: sticky;
top: 4.5rem;
display: flex;
flex-direction: column;
gap: .25rem;
overflow: visible;
padding: .4rem;
}
.bo-nav .tab {
justify-content: flex-start;
text-align: left;
width: 100%;
white-space: nowrap;
}
.backoffice .bo-nav .tab.on {
box-shadow: inset 3px 0 0 var(--stock-1);
}
}
/* ═══════════ รายชื่อสมาชิก (หน้าจัดการคลับ): ค้นหาสด + ปุ่มจัดการในแต่ละแถว ═══════════ */
.member-search {
position: sticky;
top: 3.75rem;
z-index: 2;
display: grid;
gap: .3rem;
padding: .5rem 0 .6rem;
background: inherit;
backdrop-filter: blur(6px);
}
.member-search .input {
font-size: 1rem;
}
.member-list {
display: grid;
gap: .5rem;
}
.member-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "main chips" "actions actions";
gap: .35rem .75rem;
padding: .65rem .8rem;
border-radius: 12px;
background: rgba(255, 255, 255, .035);
border: 1px solid rgba(255, 255, 255, .07);
}
.member-row.off {
opacity: .6;
}
.member-main {
grid-area: main;
display: grid;
min-width: 0;
}
.member-main strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.member-chips {
grid-area: chips;
display: flex;
align-items: center;
gap: .3rem;
font-weight: 700;
color: var(--chip-gold-1);
font-variant-numeric: tabular-nums;
}
.member-actions {
grid-area: actions;
display: flex;
flex-wrap: wrap;
gap: .35rem;
}
@media (min-width: 700px) {
.member-row {
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas: "main chips actions";
align-items: center;
}
.member-actions {
justify-content: flex-end;
}
}
.member-picked {
display: flex;
justify-content: space-between;
align-items: center;
gap: .5rem;
padding: .55rem .75rem;
border-radius: 10px;
border: 1px solid rgba(111, 227, 208, .45);
background: rgba(111, 227, 208, .08);
}
.member-pick-list {
display: grid;
gap: .25rem;
max-height: 16rem;
overflow-y: auto;
padding: .25rem;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, .08);
}
.member-pick {
display: flex;
gap: .4rem;
align-items: baseline;
width: 100%;
padding: .5rem .6rem;
border: 0;
border-radius: 8px;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.member-pick:hover {
background: rgba(111, 227, 208, .10);
}
.quick-amounts {
display: flex;
flex-wrap: wrap;
gap: .35rem;
}
.quick-amounts .btn {
flex: 1 1 4rem;
}
/* ═════════ รายงาน (ระบบ / คลับ / เอเย่นต์) ═════════ */
.report-range { display: grid; gap: .6rem; margin: .5rem 0 1rem; }
.report-custom { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.report-custom .input { width: auto; min-width: 9.5rem; }
.report-h { font-size: 1rem; font-weight: 700; margin: 1.1rem 0 .5rem; color: var(--ink-dim); }
.report-stats .bo-stat { cursor: default; }
.report-stats .bo-stat:hover { transform: none; border-color: rgba(255, 255, 255, .08); }
.report-stats .bo-stat-stock:hover { border-color: rgba(111, 227, 208, .40); }
.report-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin: 1rem 0 .6rem; }
.report-filter { display: flex; align-items: center; gap: .5rem; }
.report-filter .input { width: auto; min-width: 14rem; }
.report-note { margin-top: .75rem; max-width: 70ch; }
table.data tfoot td { border-top: 1px solid var(--line); }
@media (max-width: 720px) {
table.data-cards tfoot { display: block; }
table.data-cards tfoot tr { display: block; }
}
/* ═════════ เกมปิดปรับปรุง ═════════ */
.game-card.is-closed { opacity: .6; }
.game-card.is-closed .game-cta { visibility: hidden; }
.closed-pill { display: inline-block; margin-left: .4rem; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
color: #ffcf7a; background: rgba(255, 180, 60, .12); border: 1px solid rgba(255, 180, 60, .45); vertical-align: middle; }
/* ═════════ ที่มารายได้ / เจ้ามือ ═════════ */
.report-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
.house-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.house-actions .input { width: 10rem; }
/* =====================================================================
ขัดเกลา รอบ 1: ไพ่อ่านง่ายทุกขนาด · ตัวเลขชิปไม่กระดิก · กดบนมือถือไว · หน้าจอเชื่อมต่อใหม่
วางต่อท้าย app.css ทับกฎเดิมโดยไม่ต้องไล่แก้ทีละเกม
===================================================================== */
/* ---------- ไพ่: ขนาดตัวอักษรตามความกว้างไพ่ แทนค่าคงที่ ----------
เดิมมุมไพ่ 13px ดอกกลาง 26px ตายตัว พอไพ่บนมือถือเหลือ 22–34px ตัวอักษรจึงล้นทับกัน
ตัวไพ่เป็น container ให้ลูกข้างในใช้หน่วย cqw (1% ของความกว้างไพ่)
(คุณสมบัติของตัว .pcard เองใช้ var(--w) เพราะ cqw อ้างถึง container ชั้นนอก ไม่ใช่ตัวมันเอง) */
.pcard { container-type: inline-size; }
.pcard.face {
background: linear-gradient(160deg, #fffaf0 0%, #f4ebd8 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 10px rgba(0,0,0,.4);
}
.pcard .corner,
.pcard.sm .corner { font-size: clamp(9px, 26cqw, 17px); font-weight: 700; letter-spacing: -.04em; }
.pcard .corner.tl,
.pcard.sm .corner.tl { top: 6cqw; left: 7cqw; right: auto; }
.pcard .corner.br,
.pcard.sm .corner.br { top: auto; left: auto; bottom: 6cqw; right: 7cqw; }
.pcard .pip,
.pcard.sm .pip { font-size: clamp(12px, 46cqw, 34px); }
/* ไพ่ขนาดกลาง (มือถือ): ตัดมุมล่างขวา ให้ที่ดอกกลางเต็มขึ้น */
@container (max-width: 48px) {
.corner.br { display: none; }
.corner.tl { font-size: 33cqw; }
.pip { padding: 34cqw 0 0 18cqw; font-size: 52cqw; }
}
/* ไพ่เล็ก (ไพ่คนอื่น / กองกลางบนจอเตี้ย): แบบแอปเกม ตัวเลขใหญ่ ดอกใหญ่ใต้ตัวเลข ไม่มีดอกกลาง
อ่านออกแม้ไพ่ซ้อนกันจนเห็นแค่ครึ่งซ้าย */
@container (max-width: 36px) {
.pip { display: none; }
.corner.tl { top: 8cqw; left: 6cqw; font-size: 44cqw; line-height: .96; letter-spacing: -.1em; }
}
/* หลังไพ่: ขอบบางลงตามขนาด มีตราทองตรงกลาง */
.pcard.back {
border-width: clamp(2px, calc(var(--w) * .06), 4px);
background:
radial-gradient(circle, var(--gold-2) 0 calc(var(--w) * .08), #6b1824 calc(var(--w) * .08 + .5px) calc(var(--w) * .14), transparent calc(var(--w) * .14 + .5px)),
repeating-linear-gradient(45deg, rgba(217,169,63,.32) 0 2px, transparent 2px 7px),
repeating-linear-gradient(-45deg, rgba(217,169,63,.32) 0 2px, transparent 2px 7px),
#6b1824;
box-shadow: inset 0 0 0 1px rgba(217,169,63,.5), 0 4px 10px rgba(0,0,0,.4);
}
/* ---------- ตัวเลขชิป: ตัวเลขกว้างเท่ากัน ยอดเปลี่ยนแล้วไม่กระดิก ---------- */
.balance-badge, .wallet-mini strong, .table-bet, .countdown, .float-net,
.hand-label, .chip { font-variant-numeric: tabular-nums; }
/* ---------- การแตะบนมือถือ: ตัดดีเลย์ซูมแตะสองครั้ง และเห็นชัดว่ากดโดนแล้ว ---------- */
.btn, .icon-btn, .chip, .bn-item {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); filter: brightness(.92); }
/* ---------- หน้าจอเชื่อมต่อใหม่ (แทนข้อความภาษาอังกฤษของ Blazor) ----------
Blazor ใส่คลาส components-reconnect-* ให้ #components-reconnect-modal เอง (คลาส retrying / resume-failed มีใน .NET รุ่นใหม่) */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-resume-failed,
#components-reconnect-modal.components-reconnect-rejected {
display: grid; place-items: center;
position: fixed; inset: 0; z-index: 2000; padding: 24px;
background: rgba(10,4,6,.62); backdrop-filter: blur(4px);
}
.reconnect-card {
width: min(320px, 100%); padding: 22px 20px 18px; text-align: center;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow);
}
.reconnect-card h2 { font-size: 18px; margin: 0; }
.reconnect-card p { margin: 0; color: var(--ink-dim); font-size: 14px; }
.reconnect-card .btn { margin-top: 4px; min-width: 160px; }
.rc-state { display: none; flex-direction: column; align-items: center; gap: 10px; }
.components-reconnect-show .rc-show,
.components-reconnect-retrying .rc-show,
.components-reconnect-failed .rc-failed,
.components-reconnect-resume-failed .rc-failed,
.components-reconnect-rejected .rc-rejected { display: flex; }
.reconnect-dots { display: flex; gap: 7px; height: 16px; align-items: center; }
.reconnect-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); animation: rcDot 1s ease-in-out infinite; }
.reconnect-dots i:nth-child(2) { animation-delay: .15s; }
.reconnect-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes rcDot { 50% { transform: translateY(-5px); background: var(--gold-2); } }
/* =====================================================================
ขัดเกลา รอบ 2: เมนูบนคอม (เพิ่มเติม + เมนูบัญชี) · หน้าเลือกเกม
===================================================================== */
/* ---------- เมนูบน: แถวเดียวเสมอ ---------- */
.nav-links { flex-wrap: nowrap; align-items: center; min-width: 0; }
.nav-links > a { white-space: nowrap; }
/* เมนูแบบกดเปิด ใช้ ทำงานได้โดยไม่ต้องเป็น interactive (ปิดเมื่อคลิกข้างนอกด้วยสคริปต์ใน App.razor) */
.nav-menu { position: relative; }
.nav-menu > summary {
list-style: none; cursor: pointer; user-select: none;
display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
color: var(--ink-dim); padding: 7px 10px 7px 12px; border-radius: 8px;
font-family: var(--font-display); font-size: 15px;
-webkit-tap-highlight-color: transparent;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover, .nav-menu[open] > summary { color: var(--ink); background: var(--panel); }
.nav-more:has(.active) > summary { color: var(--gold-2); background: var(--panel-2); }
.nm-caret { transform: rotate(90deg); transition: transform .15s; opacity: .7; }
.nav-menu[open] .nm-caret { transform: rotate(-90deg); }
.menu-pop {
position: absolute; z-index: 50; top: calc(100% + 8px); left: 0;
min-width: 230px; padding: 6px;
display: grid; gap: 2px;
background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 16px 40px rgba(0,0,0,.55);
animation: pop .14s ease-out;
}
.menu-pop.menu-end { left: auto; right: 0; }
.menu-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.menu-pop .logout-form { margin: 0; }
.menu-pop .menu-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 12px; border-radius: 8px; border: 0; background: none;
color: var(--ink); font-family: var(--font-body); font-size: 15px; text-align: left;
cursor: pointer; white-space: nowrap; text-decoration: none;
}
.menu-pop .menu-item .icon { color: var(--ink-dim); }
.menu-pop .menu-item:hover { background: var(--panel-2); text-decoration: none; }
.menu-pop .menu-item.active { color: var(--gold-2); background: transparent; }
.menu-pop .menu-item.active .icon { color: var(--gold-2); }
/* เมนูบัญชี: อวตารตัวอักษรแรก + ชื่อ */
.user-menu > summary { padding: 3px 8px 3px 3px; border-radius: 999px; gap: 8px; border: 1px solid transparent; }
.user-menu > summary:hover, .user-menu[open] > summary { border-color: var(--line); }
.um-avatar {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
display: grid; place-items: center;
font-family: var(--font-display); font-size: 14px; font-weight: 600; color: #fff;
background: radial-gradient(circle at 35% 30%, hsl(var(--h, 20) 55% 52%), hsl(var(--h, 20) 50% 30%));
border: 2px solid rgba(243,233,216,.7);
}
.user-menu .user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
/* คอมจอเล็ก/แท็บเล็ต: เหลือแค่อวตาร ไม่ให้แถบบนตกบรรทัด */
@media (max-width: 1180px) {
.user-menu .user-name { display: none; }
.topbar { gap: 16px; }
}
@media (max-width: 900px) {
.nav-links > a, .nav-menu > summary { padding: 7px 8px; font-size: 14px; }
}
/* มือถือ: ใช้แท็บ ฉัน ที่แถบล่างแทนเมนูบัญชี */
@media (max-width: 720px) {
.topbar .user-menu { display: none; }
}
/* ---------- หน้าเลือกเกม ---------- */
/* สีประจำกลุ่มเกม: ไพ่เล่นกันเอง = สักหลาดเขียว, เล่นกับระบบ = แดงครั่ง, โป๊กเกอร์ = น้ำเงิน, ลูกเต๋า = อำพัน, บิงโก = ม่วง */
.game-card { --glow: rgba(19,87,58,.75); }
.game-dragontiger, .game-baccarat, .game-blackjack { --glow: rgba(150,30,45,.75); }
.game-holdem, .game-nlholdem, .game-sitngo { --glow: rgba(35,75,150,.7); }
.game-hilo, .game-namtao { --glow: rgba(217,150,40,.55); }
.game-bingo { --glow: rgba(120,60,170,.65); }
.game-card::before { background: radial-gradient(circle, var(--glow), transparent 70%); }
/* พัดไพ่: กางกว้างเท่ากันไม่ว่าจะมีกี่ใบ (เดิมใบละ 16° พอ 5 ใบเลยล้นกรอบบนมือถือ) */
.game-art .gc-card { --fan: min(20deg, calc(56deg / var(--n))); transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * var(--fan))); }
.game-card:hover .gc-card { transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * var(--fan) * 1.35)) translateY(-4px); }
@media (min-width: 721px) {
/* การ์ดเล็กลง จอ 1280 ได้ 4 คอลัมน์ เห็นเกมมากขึ้นโดยไม่ต้องเลื่อน */
.game-grid { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.game-card { padding: 18px; gap: 10px; border-radius: 18px; }
.game-art { height: 104px; }
.game-art .gc-card { width: 60px; height: 86px; margin-left: -30px; border-radius: 8px; }
.game-art .gc-card b { font-size: 22px; }
.game-art .gc-card i { font-size: 18px; }
.game-body h2 { font-size: 22px; }
.game-body p {
font-size: 14px; line-height: 1.5; min-height: 3em;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.game-meta { font-size: 13px; margin-bottom: 8px; }
.game-tags .tag { font-size: 12px; }
/* ปุ่มทองซ้ำกัน 14 ปุ่มแย่งสายตากันเอง: ให้เป็นปุ่มเงียบ แล้วค่อยเป็นทองตอนชี้การ์ดนั้น
ทองเต็มเก็บไว้ให้ "กลับไปโต๊ะ" ที่สำคัญกว่า */
.game-card .game-cta {
background: transparent; color: var(--gold-2); border-color: var(--line); box-shadow: none;
padding: 8px 14px; font-size: 14px;
}
.game-card:hover .game-cta, .game-card:focus-visible .game-cta {
background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink); border-color: #b88a2a;
}
}
/* เกมที่มีคนเล่นอยู่ เด่นขึ้นเล็กน้อย */
.game-card.is-live { border-color: rgba(111,211,154,.32); }
.game-card.is-live .game-meta { color: var(--pos); }
.game-card.is-closed { opacity: .6; }
@media (max-width: 720px) {
.game-art .gc-card { --fan: min(14deg, calc(40deg / var(--n))); }
/* สระบน/วรรณยุกต์ของบรรทัดที่ 3 โผล่มาใต้บรรทัด 2 เมื่อบรรทัดชิดเกิน */
.game-body p { line-height: 1.5; }
}
/* =====================================================================
แนว E พรีเมียม 3D ("lux") : หน้าหลักแบบเวทีคลับ
ภาพ 3D มาจาก Art3D.cs (SVG) ส่วนนี้คือฉาก ม่าน พื้นหินอ่อน กรอบทอง ปุ่ม
===================================================================== */
:root {
--lux-ink: #06090f;
--lux-gold: linear-gradient(135deg, #fff3c4 0%, #e8c46a 22%, #a5741c 45%, #f7dc8f 62%, #b88a2a 80%, #fff0b8 100%);
--lux-gold-v: linear-gradient(180deg, #fff3c4 0%, #f0cf75 30%, #b88a2a 60%, #f7dc8f 80%, #8a5a10 100%);
--lux-hair: rgba(232, 196, 106, .55);
--lux-text: #ecdcb4;
--font-lux: "Chonburi", "Kanit", serif;
}
.content:has(> .lux-home) { max-width: none; padding: 0; }
.lux-home {
position: relative; isolation: isolate; overflow: hidden;
min-height: calc(100dvh - 64px);
padding: 20px clamp(16px, 4vw, 48px) 28px;
display: flex; flex-direction: column; align-items: center; gap: 18px;
background:
radial-gradient(ellipse 55% 45% at 50% 34%, rgba(40, 72, 130, .55), transparent 70%),
repeating-linear-gradient(60deg, rgba(212, 175, 90, .045) 0 1px, transparent 1px 30px),
repeating-linear-gradient(-60deg, rgba(212, 175, 90, .045) 0 1px, transparent 1px 30px),
var(--lux-ink);
}
.lux-home::after { /* ขอบภาพมืด */
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(ellipse at 50% 42%, transparent 45%, rgba(0, 0, 0, .75));
}
.lux-home > * { position: relative; z-index: 1; }
.lux-stage { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; }
/* ม่านกำมะหยี่ขอบทอง */
.lux-curtain {
position: absolute; top: 0; width: clamp(48px, 12vw, 170px); height: 76%;
background:
linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, rgba(0,0,0,.55)),
repeating-linear-gradient(90deg, #22040c 0, #6e1426 13px, #9a2238 18px, #4a0a18 26px, #22040c 34px);
box-shadow: inset -6px 0 20px rgba(0,0,0,.6);
}
.lux-curtain.left { left: 0; border-radius: 0 0 100% 0 / 0 0 100% 0; }
.lux-curtain.right { right: 0; border-radius: 0 0 0 100% / 0 0 0 100%; }
.lux-curtain::before { /* ขอบทองด้านบน + พู่ */
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34px;
background: var(--lux-gold-v) top / 100% 20px no-repeat,
repeating-linear-gradient(90deg, #e8c46a 0 2px, transparent 2px 5px) 0 20px / 100% 14px no-repeat;
box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
/* พื้นหินอ่อนดำ เส้นทองฝังขอบ */
.lux-floor {
position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
border-top: 2px solid #e8c46a; box-shadow: 0 -1px 14px rgba(240,201,106,.45);
background:
radial-gradient(ellipse 50% 30% at 50% 0%, rgba(240,201,106,.16), transparent 70%),
repeating-linear-gradient(115deg, transparent 0 70px, rgba(255,255,255,.04) 71px 72px, transparent 73px 150px),
repeating-linear-gradient(35deg, transparent 0 110px, rgba(255,255,255,.025) 111px 112px, transparent 113px 210px),
linear-gradient(180deg, #121828, #04060b);
}
.lux-spark {
position: absolute; width: 9px; height: 9px; background: #fff3c4;
clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
animation: luxSpark 3s ease-in-out infinite;
}
@keyframes luxSpark { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
@keyframes luxSheen { 0% { transform: translateX(-160%) skewX(-20deg); } 50%, 100% { transform: translateX(420%) skewX(-20deg); } }
@keyframes luxRays { to { transform: rotate(360deg); } }
@keyframes luxPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,201,106,.6), 0 10px 24px rgba(0,0,0,.6); } 50% { box-shadow: 0 0 0 10px rgba(240,201,106,0), 0 10px 24px rgba(0,0,0,.6); } }
/* ตัวหนังสือทอง */
.lux-goldtext {
font-family: var(--font-lux); line-height: 1.25;
background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 2px 0 rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(240,201,106,.35));
}
/* โปรไฟล์ */
.lux-profile { align-self: stretch; display: flex; align-items: center; gap: 12px; }
.lux-avatar {
width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; position: relative;
display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 27px; color: #fff;
background: radial-gradient(circle at 35% 30%, hsl(var(--h, 140) 55% 58%), hsl(var(--h, 140) 50% 26%));
box-shadow: 0 0 0 3px #e8c46a, 0 0 0 5px #07090f, 0 0 0 6px var(--lux-hair), 0 8px 18px rgba(0,0,0,.7);
}
.lux-who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.lux-who strong { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: #fff; }
.lux-id {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(217,169,63,.45); background: rgba(8,11,20,.6); color: #e8d6a8; font: 500 13px var(--font-body, "Sarabun", sans-serif);
min-height: 30px; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.lux-id-ok { color: var(--pos, #6fd39a); }
.lux-role { font-family: var(--font-display); font-size: 12px; color: var(--gold-2); max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* กลับไปโต๊ะ */
.lux-resume {
align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 16px;
background: rgba(8, 20, 14, .75); border: 1px solid rgba(111,211,154,.5); color: var(--ink); text-decoration: none;
}
.lux-resume-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lux-resume-text small { color: var(--ink-dim); }
/* ปุ่ม */
.lux-btn-gold, .lux-btn-black, .lux-quick {
position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 48px; padding: 0 24px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 17px;
text-decoration: none; cursor: pointer; white-space: nowrap;
}
.lux-btn-gold, .lux-quick {
background: var(--lux-gold); color: #2a1a05; border: 0;
box-shadow: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -4px 0 rgba(90,55,5,.45), 0 0 0 1px #7a4f0a, 0 10px 24px rgba(0,0,0,.6);
}
.lux-btn-gold::after, .lux-quick::after { /* แสงวาบ */
content: ""; position: absolute; top: -20%; left: 0; width: 26%; height: 140%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
animation: luxSheen 4.5s ease-in-out infinite;
}
.lux-btn-black {
background: linear-gradient(180deg, #2a2f3d, #0a0c13); border: 1.5px solid #c9a24a; color: var(--gold-2); font-weight: 600;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px rgba(0,0,0,.6);
}
.lux-btn-gold.sm, .lux-btn-black.sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.lux-quick { animation: luxPulse 2.6s ease-in-out infinite; align-self: center; }
.lux-medal {
width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 2px; cursor: pointer; flex-shrink: 0;
background: var(--lux-gold); box-shadow: 0 6px 14px rgba(0,0,0,.6); color: var(--gold-2);
display: grid; place-items: center;
}
.lux-medal > .icon { width: 100%; height: 100%; padding: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2c3242, #07090f); }
/* ป้ายคลับ: กรอบโค้งทอง + รัศมีแสงหมุน */
.lux-showcase { display: flex; flex-direction: column; align-items: center; gap: 24px; position: relative; }
.lux-showcase::before {
content: ""; position: absolute; left: 50%; top: 52%; width: 560px; height: 560px; margin: -280px 0 0 -280px; z-index: -1; border-radius: 50%;
background: repeating-conic-gradient(rgba(240,201,106,.16) 0 3deg, transparent 3deg 12deg);
-webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%); mask-image: radial-gradient(circle, #000 18%, transparent 62%);
animation: luxRays 60s linear infinite;
}
.lux-deco { display: flex; align-items: center; gap: 12px; font-size: 22px; }
.lux-deco i { width: 54px; height: 1.5px; background: linear-gradient(90deg, transparent, #e8c46a); position: relative; }
.lux-deco i:last-child { transform: scaleX(-1); }
.lux-deco i::after { content: ""; position: absolute; right: -4px; top: -3.5px; width: 8px; height: 8px; transform: rotate(45deg); background: var(--lux-gold); }
.lux-arch-row { display: flex; align-items: center; gap: clamp(10px, 4vw, 40px); }
.lux-arch {
position: relative; display: block; width: 240px; padding: 3px; border-radius: 120px 120px 18px 18px;
background: var(--lux-gold); text-decoration: none; color: inherit;
box-shadow: 0 30px 60px rgba(0,0,0,.75), 0 0 70px rgba(240,201,106,.22);
}
.lux-arch-gem { position: absolute; top: -12px; left: 50%; margin-left: -12px; width: 24px; height: 24px; transform: rotate(45deg); background: var(--lux-gold); box-shadow: 0 0 0 3px #07090f, 0 0 16px rgba(240,201,106,.7); z-index: 2; }
.lux-arch-in {
position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 26px 12px 16px; border-radius: 117px 117px 15px 15px;
background: radial-gradient(ellipse at 50% 30%, #1b2a4a, #070b16 75%);
box-shadow: inset 0 0 0 6px #070b16, inset 0 0 0 7px var(--lux-hair);
}
.lux-arch-in::after { content: ""; position: absolute; top: -20%; left: 0; width: 26%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); animation: luxSheen 7s ease-in-out 1s infinite; }
.lux-arch-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; font-size: 13px; color: #c8b78f; }
.lux-arch-stats span { white-space: nowrap; }
.lux-arch-stats .on { color: var(--pos, #6fd39a); }
.lux-arch-code { font-family: var(--font-display); font-size: 14px; color: var(--lux-text); letter-spacing: .06em; }
.lux-arch-empty { font-size: 96px; line-height: 1.1; color: #e8c46a; opacity: .7; }
/* แท่นแล็กเกอร์ดำ */
.lux-podiums { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 6vw, 120px); width: 100%; flex-wrap: wrap; }
.lux-podium { position: relative; display: flex; flex-direction: column; align-items: center; width: clamp(160px, 22vw, 250px); text-decoration: none; transition: transform .2s; }
.lux-podium:hover { transform: translateY(-4px); }
.lux-podium::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -14px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse, rgba(240,201,106,.35), transparent 70%); z-index: -1; }
.lux-podium-prop { position: relative; z-index: 1; margin-bottom: -26px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.lux-podium-prop svg { width: 100%; height: auto; display: block; }
.lux-podium-top { width: 100%; height: 36px; position: relative; clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #3a4152, #121621); }
.lux-podium-top::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 2px; background: var(--lux-gold); }
.lux-podium-face {
position: relative; overflow: hidden; width: 100%; height: 64px; display: grid; place-items: center; font-size: clamp(18px, 2.4vw, 26px);
background: linear-gradient(180deg, #171b27, #05070c); border-top: 2px solid #e8c46a; border-bottom: 2px solid #8a5a10;
box-shadow: 0 16px 30px rgba(0,0,0,.7);
}
.lux-podium-face::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(232,196,106,.35); }
.lux-podium-face::after { content: ""; position: absolute; top: -20%; left: 0; width: 26%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); animation: luxSheen 6s ease-in-out 2s infinite; }
/* ทางลัด: เหรียญดำขอบทอง ไอคอน 3D โผล่พ้นขอบ */
.lux-shortcuts { display: flex; justify-content: center; gap: clamp(14px, 6vw, 56px); width: 100%; margin-top: 6px; }
.lux-shortcuts a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--lux-text); font-family: var(--font-display); font-size: 13px; min-width: 64px; }
.lux-medallion {
width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
background: radial-gradient(circle at 35% 25%, #2c3242, #05070c 75%);
box-shadow: 0 0 0 2px #e8c46a, 0 8px 16px rgba(0,0,0,.7);
}
.lux-medallion svg { margin-top: -18px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.6)); transition: transform .2s; }
.lux-shortcuts a:hover .lux-medallion svg { transform: translateY(-3px) scale(1.05); }
.lux-foot { margin: 6px 0 0; font-size: 13px; color: #9a8c6c; text-align: center; }
.lux-foot a { color: #c8b78f; }
@media (max-width: 720px) {
.lux-home { min-height: calc(100dvh - 56px - 82px - env(safe-area-inset-bottom)); padding-top: 14px; gap: 14px; }
.lux-arch { width: 214px; }
.lux-arch svg.art3d { width: 128px; height: auto; }
.lux-showcase::before { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
.lux-podiums { gap: 10px; flex-wrap: nowrap; }
.lux-quick { order: 3; flex-basis: 100%; max-width: 320px; margin-top: 4px; }
.lux-podiums { flex-wrap: wrap; }
.lux-podium { width: calc(50% - 5px); max-width: 190px; }
.lux-shortcuts { gap: 4px; justify-content: space-around; }
.lux-medallion { width: 54px; height: 54px; }
.lux-medallion svg { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
.lux-spark, .lux-showcase::before, .lux-quick, .lux-btn-gold::after, .lux-quick::after, .lux-arch-in::after, .lux-podium-face::after { animation: none !important; }
}
/* =====================================================================
แนว E พรีเมียม: ล็อบบี้ (.lux-lobby)
ใช้ markup เดิมของ Lobby.razor เกือบทั้งหมด แค่แต่งทับด้วยคลาสนี้
===================================================================== */
.shell:has(.lux-lobby) {
background:
radial-gradient(ellipse 60% 40% at 50% 0%, rgba(40, 72, 130, .45), transparent 70%),
repeating-linear-gradient(60deg, rgba(212, 175, 90, .04) 0 1px, transparent 1px 30px),
repeating-linear-gradient(-60deg, rgba(212, 175, 90, .04) 0 1px, transparent 1px 30px),
var(--lux-ink);
}
.lux-lobby { --bg: var(--lux-ink); }
.lux-lobby-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.lux-lobby-head .lux-medal { text-decoration: none; }
.lux-lobby-title { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.lux-lobby-title .lux-deco { font-size: clamp(20px, 2.6vw, 28px); max-width: 100%; }
.lux-lobby-title .lux-goldtext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lux-lobby .lobby-blurb { margin: 0; font-size: 13px; color: #9a8c6c; }
/* แถบเลือกเกม */
.lux-gametabs {
display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 12px; margin: 0 -2px;
scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(217,169,63,.4) transparent;
}
.lux-gtab {
position: relative; flex: 0 0 auto; width: 100px; scroll-snap-align: start;
display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px;
border-radius: 16px; text-decoration: none; color: #d8cdb2;
background: linear-gradient(180deg, #1a1f2c, #0a0c13); border: 1px solid rgba(217,169,63,.3);
transition: transform .15s, box-shadow .15s;
}
.lux-gtab:hover { transform: translateY(-2px); text-decoration: none; }
.lux-gtab.on {
color: var(--gold-2); border-color: transparent;
background: radial-gradient(ellipse at 50% 0%, #3a3018, #0b0d14 70%);
box-shadow: 0 0 0 2px #e8c46a, 0 0 22px rgba(240,201,106,.35);
}
.lux-gtab.is-closed { opacity: .5; }
.lux-gtab-art { height: 46px; display: grid; place-items: center; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.lux-gtab-name { max-width: 100%; font-family: var(--font-display); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lux-gtab-live {
position: absolute; top: 6px; right: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
display: grid; place-items: center; font: 600 11px var(--font-display); color: #fff;
background: linear-gradient(180deg, #3fd18a, #127a4a); box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
/* ค้นหา ตัวกรอง ระดับเดิมพัน */
.lux-lobby .search-box { background: rgba(8,11,20,.75); border-color: rgba(217,169,63,.4); }
.lux-lobby .search-box:focus-within { border-color: #e8c46a; box-shadow: 0 0 0 3px rgba(240,201,106,.15); }
.lux-lobby .fchip {
background: rgba(8,11,20,.7); border: 1px solid rgba(217,169,63,.35); color: #d8cdb2;
}
.lux-lobby .fchip.on {
background: var(--lux-gold); border-color: transparent; color: #2a1a05; font-weight: 600;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 12px rgba(0,0,0,.4);
}
.lux-lobby .btn-quiet { background: linear-gradient(180deg, #2a2f3d, #0a0c13); border: 1px solid #c9a24a; color: var(--gold-2); }
.lux-lobby .btn-gold {
background: var(--lux-gold); color: #2a1a05; border: 0;
box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(90,55,5,.4), 0 6px 14px rgba(0,0,0,.45);
}
.lux-lobby .btn-gold:disabled, .lux-lobby .lux-btn-gold:disabled, .lux-lobby .lux-btn-black:disabled { filter: grayscale(.7) brightness(.7); cursor: not-allowed; }
.lux-lobby select.input { background-color: rgba(8,11,20,.75); border-color: rgba(217,169,63,.4); }
/* การ์ดห้อง: แล็กเกอร์ดำ ขอบทอง */
.lux-lobby .room-tile {
border-radius: 18px; border: 1px solid rgba(232,196,106,.38);
background: linear-gradient(180deg, #1a1f2c, #07090f);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.55);
}
.lux-lobby .room-tile:hover { border-color: #e8c46a; box-shadow: 0 0 0 1px #e8c46a, 0 14px 30px rgba(0,0,0,.6), 0 0 24px rgba(240,201,106,.18); }
.lux-lobby .room-tile.is-live { border-color: rgba(111,211,154,.45); }
.lux-lobby .room-tile.is-real { box-shadow: inset 0 0 0 1px rgba(240,201,106,.25), 0 12px 24px rgba(0,0,0,.55); }
.lux-lobby .room-tile.is-system { border-top: 1px solid rgba(232,196,106,.38); }
.lux-lobby .code-tile { background: rgba(8,11,20,.7); border-style: dashed; }
.lux-lobby .rt-lockmark { background: var(--lux-gold); color: #2a1a05; }
.lux-lobby .rt-stake { background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lux-lobby .rt-code { background: rgba(0,0,0,.35); border-color: rgba(217,169,63,.45); }
/* โต๊ะจิ๋ว: ขอบแล็กเกอร์ดำ + เส้นทอง ผ้ามีแสงกลาง */
.lux-lobby .lt { --lt-rail: linear-gradient(160deg, #3a4152, #0b0d14 60%, #262b38); }
.lux-lobby .lt-high { --lt-rail: linear-gradient(160deg, #fff0b8, #b88a2a 45%, #6e4608 70%, #f7dc8f); }
.lux-lobby .lt-table { box-shadow: 0 0 0 1.5px #e8c46a, inset 0 1.5px 0 rgba(255,255,255,.2), 0 10px 18px rgba(0,0,0,.6); }
.lux-lobby .lt-felt { box-shadow: inset 0 0 0 1px rgba(232,196,106,.45), inset 0 0 22px rgba(0,0,0,.55); }
.lux-lobby .lt-seat.on { border: 2px solid #e8c46a; box-shadow: 0 0 0 1px #07090f, 0 3px 6px rgba(0,0,0,.6); }
.lux-lobby .lt-seat:not(.on) { border-color: rgba(232,196,106,.4); background: rgba(6,9,15,.8); }
/* ปุ่มติดล่างจอบนมือถือ */
@media (max-width: 720px) {
.lux-lobby-head { grid-template-columns: auto 1fr auto; gap: 10px; }
.lux-lobby-head::after { content: ""; width: 44px; } /* ถ่วงให้ป้ายทองอยู่กลางจอ */
.lux-lobby .lobby-blurb { display: none; }
.lux-gtab { width: 84px; padding: 8px 4px 6px; }
.lux-gtab-art svg { width: 48px; height: auto; }
.lux-lobby .lobby-dock { background: linear-gradient(to top, var(--lux-ink) 70%, rgba(6,9,15,0)); }
.lux-lobby .lobby-dock > button { width: 100%; min-height: 50px; }
}
.lux-lobby .find-bar { background: linear-gradient(180deg, rgba(6,9,15,.96), rgba(6,9,15,.88)); }
/* =====================================================================
แนว E พรีเมียม: โต๊ะเกม 3D (.room-page.lux-room)
ใช้กับทุกเกมที่ใช้โครง table-stage / felt / seat-slot ได้ แค่เติมคลาส lux-room ที่ room-page
===================================================================== */
.shell:has(.lux-room) {
background:
radial-gradient(ellipse 70% 50% at 50% 42%, rgba(23, 120, 76, .22), transparent 70%),
radial-gradient(ellipse 80% 40% at 50% 0%, rgba(40, 72, 130, .35), transparent 70%),
var(--lux-ink);
}
.lux-room { --bg: var(--lux-ink); --bg-2: #0b0e17; --panel: #10131c; --panel-2: #171b27; --line: rgba(232,196,106,.28); }
/* หัวโต๊ะ: กระจกดำ เส้นทอง */
.lux-room .room-top {
background: linear-gradient(180deg, rgba(20,26,40,.92), rgba(6,9,15,.88));
border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, #e8c46a, transparent) 1;
}
.lux-room .room-title h1 { color: #fff; }
.lux-room .wallet-mini strong { background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lux-room .room-top .icon-btn {
background: radial-gradient(circle at 35% 30%, #2c3242, #07090f); border: 0; color: var(--gold-2);
box-shadow: 0 0 0 2px #e8c46a, 0 4px 10px rgba(0,0,0,.6);
}
/* ฉากอารีนา: ลำแสงสปอตไลต์จากด้านบน */
.lux-room .table-stage::before {
content: ""; position: absolute; inset: -14% -20% 0; z-index: 0; pointer-events: none;
background: repeating-conic-gradient(from 150deg at 50% -40%, rgba(255,243,196,.07) 0 2.5deg, transparent 2.5deg 11deg);
-webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
animation: luxBeam 6s ease-in-out infinite;
}
@keyframes luxBeam { 50% { opacity: .65; } }
/* โต๊ะ 3D: ตัวผ้าและขอบวาดด้วย ::before/::after ที่เอียงไปด้านหลัง ส่วนไพ่และตัวหนังสือบนโต๊ะยังตรงอ่านง่าย */
.lux-room .felt {
background: none; border: 0; box-shadow: none; isolation: isolate; z-index: 1;
}
.lux-room .felt::before, .lux-room .felt::after {
content: ""; position: absolute; border-radius: 50%; pointer-events: none;
transform: perspective(1100px) rotateX(12deg); transform-origin: 50% 100%;
}
.lux-room .felt::before { /* ราวหนังดำ + เส้นทอง + ความหนาโต๊ะ + เงาบนพื้น */
inset: -18px; z-index: -2;
background:
radial-gradient(ellipse 60% 40% at 50% 8%, rgba(255,255,255,.16), transparent 70%),
linear-gradient(90deg, #07090f, #262b38 18%, #3a4152 50%, #262b38 82%, #07090f);
box-shadow:
inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.6),
0 0 0 2px #e8c46a,
0 12px 0 #020305, 0 12px 0 2px #6e4608,
0 34px 50px rgba(0,0,0,.85);
}
.lux-room .felt::after { /* ผ้าสักหลาด + ไฟวงใน */
inset: 0; z-index: -1;
background:
radial-gradient(ellipse at 50% 38%, rgba(255,255,255,.12), transparent 55%),
repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 22px),
repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 22px),
radial-gradient(ellipse at 50% 40%, #24a066, #0d5a36 58%, #05301c);
box-shadow: 0 0 0 3px #f0c96a, 0 0 18px 3px rgba(240,201,106,.45), inset 0 0 22px rgba(240,201,106,.35), inset 0 0 60px rgba(0,0,0,.6);
animation: luxNeon 3s ease-in-out infinite;
}
@keyframes luxNeon { 50% { box-shadow: 0 0 0 3px #f7dc8f, 0 0 26px 5px rgba(240,201,106,.6), inset 0 0 26px rgba(240,201,106,.45), inset 0 0 60px rgba(0,0,0,.6); } }
.lux-room .felt.phase-betting::after { box-shadow: 0 0 0 3px #fff3c4, 0 0 30px 6px rgba(240,201,106,.7), inset 0 0 26px rgba(240,201,106,.5), inset 0 0 60px rgba(0,0,0,.6); }
/* ป้ายบนโต๊ะ */
.lux-room .dealer-tag, .lux-room .banner {
background: rgba(6,9,15,.78); border: 1px solid #c9a24a; color: var(--gold-2);
box-shadow: 0 0 14px rgba(240,201,106,.25);
}
.lux-room .phase-name { font-family: var(--font-display); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.lux-room .countdown { background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 3px rgba(0,0,0,.8)); }
.lux-room .timebar { background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px rgba(232,196,106,.3); }
.lux-room .timebar > div { background: var(--lux-gold); box-shadow: 0 0 10px rgba(240,201,106,.7); }
.lux-room .pvp-mark { color: rgba(240,201,106,.45); font-family: var(--font-lux); }
/* ที่นั่ง: อวตารกรอบทอง ป้ายชื่อดำขอบทอง */
.lux-room .avatar {
border: 0;
box-shadow: 0 0 0 3px #e8c46a, 0 0 0 4.5px #07090f, 0 0 0 5.5px rgba(232,196,106,.5), 0 8px 16px rgba(0,0,0,.7),
inset 0 -6px 12px rgba(0,0,0,.35), inset 0 4px 8px rgba(255,255,255,.2);
}
.lux-room .avatar.ghost { box-shadow: none; border: 2px dashed rgba(232,196,106,.45); background: rgba(6,9,15,.6); color: rgba(240,201,106,.6); }
.lux-room .seat-slot.mine .avatar { box-shadow: 0 0 0 3px #fff3c4, 0 0 0 5px #b88a2a, 0 0 22px rgba(240,201,106,.55), 0 8px 16px rgba(0,0,0,.7); }
.lux-room .seat-slot[data-speaking] .avatar { box-shadow: 0 0 0 3px var(--pos), 0 0 20px rgba(111,211,154,.7); }
.lux-room .seat.out-win .avatar { box-shadow: 0 0 0 3px var(--pos), 0 0 26px rgba(111,211,154,.75); }
.lux-room .seat-name {
border-radius: 8px; background: linear-gradient(180deg, #1a1f2c, #06090f); border: 1px solid #c9a24a; color: #f3e9d8;
}
.lux-room .seat-slot.mine .seat-name { background: var(--lux-gold); color: #2a1a05; border-color: transparent; font-weight: 600; }
/* สถานะเป็นป้ายสี */
.lux-room .state-pill { font-family: var(--font-display); font-weight: 600; padding: 1px 9px; border-radius: 7px; background: linear-gradient(180deg, #c8d0dc, #6a7488); color: #10141c; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.lux-room .state-pill.ready { background: linear-gradient(180deg, #3fd18a, #127a4a); color: #062a18; }
.lux-room .state-pill.thinking { background: linear-gradient(180deg, #ffd77a, #d0901c); color: #3a2205; }
.lux-room .hand-label { background: rgba(6,9,15,.82); border: 1px solid rgba(232,196,106,.5); color: var(--gold-2); }
/* ชิปเดิมพันบนโต๊ะ: ชิปซ้อนสามชั้น */
.lux-room .table-bet { background: rgba(6,9,15,.72); border: 1px solid rgba(232,196,106,.35); color: #fff; padding-left: 5px; }
.lux-room .table-bet .chip-dot {
width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
background: radial-gradient(circle, #fff 0 22%, #e23b4e 24%);
border: 2px dashed #fff; box-sizing: border-box;
box-shadow: 0 2px 0 #9a1428, 0 4px 0 #55060f, 0 6px 0 #9a1428, 0 8px 6px rgba(0,0,0,.5);
transform: translateY(-4px) scaleY(.82);
}
/* แผงควบคุม: กระจกดำขอบทอง ปุ่มนูน */
.lux-room .controls {
background: linear-gradient(180deg, rgba(20,24,36,.96), rgba(6,9,15,.98));
border: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(232,196,106,.7), transparent) 1;
box-shadow: 0 -10px 30px rgba(0,0,0,.5);
}
.lux-room .controls .btn-gold {
background: var(--lux-gold); color: #2a1a05; border: 0;
box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -5px 0 rgba(90,55,5,.4), 0 5px 0 #5a3a05, 0 10px 18px rgba(0,0,0,.5);
}
.lux-room .controls .decide-btns .btn-quiet {
background: linear-gradient(180deg, #5fe0a0, #16865a); color: #04281a; border: 0; font-weight: 700;
box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.25), 0 5px 0 #0a4a30, 0 10px 18px rgba(0,0,0,.5);
}
.lux-room .controls .btn-quiet { background: linear-gradient(180deg, #2a2f3d, #0a0c13); border: 1px solid #c9a24a; color: var(--gold-2); }
.lux-room .controls .btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 2px 0 rgba(0,0,0,.5); }
@media (max-width: 720px) {
.lux-room .felt::before { inset: -12px; box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.6), 0 0 0 2px #e8c46a, 0 8px 0 #020305, 0 8px 0 2px #6e4608, 0 24px 36px rgba(0,0,0,.85); }
.lux-room .avatar { box-shadow: 0 0 0 2px #e8c46a, 0 0 0 3.5px #07090f, 0 6px 12px rgba(0,0,0,.7); }
}
@media (prefers-reduced-motion: reduce) {
.lux-room .felt::after, .lux-room .table-stage::before { animation: none; }
}
/* ───────── lux-room: ส่วนเฉพาะเกม ───────── */
/* โป๊กเกอร์: ปุ่มนูนสามสี + กองกลางกรอบทอง */
.lux-room .pab-btn { box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -5px 0 rgba(0,0,0,.28), 0 5px 0 rgba(0,0,0,.55), 0 10px 18px rgba(0,0,0,.45); }
.lux-room .pab-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 2px 0 rgba(0,0,0,.55); }
.lux-room .pab-fold { background: linear-gradient(180deg, #3a3f4c, #11141c); border: 1px solid #c9a24a; color: #f3e9d8; }
.lux-room .pab-call { background: linear-gradient(180deg, #5fe0a0, #16865a); color: #04281a; }
.lux-room .pab-raise-go { background: var(--lux-gold); color: #2a1a05; }
.lux-room .pab-step { background: radial-gradient(circle at 35% 30%, #2c3242, #07090f); border: 0; color: var(--gold-2); box-shadow: 0 0 0 2px #e8c46a, 0 4px 10px rgba(0,0,0,.6); }
.lux-room .pab-raise-amount strong { background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lux-room .pot { background: rgba(6,9,15,.75); border: 1px solid #c9a24a; box-shadow: 0 0 18px rgba(240,201,106,.25); }
.lux-room .pot-amount { background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lux-room .board-slot { border-color: rgba(232,196,106,.4); }
/* เกมแทงช่อง (ไฮโล น้ำเต้า บาคาร่า เสือมังกร): ช่องเป็นแผ่นนูนขอบทอง */
.lux-room .spot {
border: 1.5px solid rgba(232,196,106,.45);
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -4px 0 rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.45);
}
.lux-room .spot:not(:disabled):hover { border-color: #f0c96a; box-shadow: 0 0 0 1px #f0c96a, 0 0 18px rgba(240,201,106,.35), 0 6px 14px rgba(0,0,0,.45); }
/* ชิปเลือกยอด (BetPicker) ให้ดูเป็นชิปหนา */
.lux-room .chip { box-shadow: 0 3px 0 rgba(0,0,0,.45), 0 6px 10px rgba(0,0,0,.4); }
/* แผงข้าง (แชท/ห้องเสียง/กติกา) บนคอม */
.lux-room .room-layout > aside, .lux-room .panel {
background: linear-gradient(180deg, rgba(20,24,36,.95), rgba(6,9,15,.97));
border-color: rgba(232,196,106,.32);
}
/* =====================================================================
lux-room: แอนิเมชันแจกไพ่และชิป
- ไพ่ของแต่ละที่นั่งบินออกจากกลางโต๊ะไปหาที่นั่ง เรียงทีละใบตาม --i
- ชิปเดิมพันไถลจากที่นั่งลงโต๊ะ ตอนจบตา: ชิปที่ชนะไหลกลับเข้าที่นั่ง ชิปที่แพ้ไหลไปหาเจ้ามือ/กลางโต๊ะ
ระยะทางคิดจากตำแหน่งที่นั่ง (--cx/--cy) คูณรัศมีวงที่นั่งในหน่วยของโต๊ะ (cqw/cqh)
===================================================================== */
.lux-room .table-stage:not(.house):not(.hilo) { container-type: size; }
.lux-room .table-stage {
--rxq: 45cqw; --ryq: 42cqh; /* วงที่นั่ง (เท่ากับ --rx/--ry) */
--bxq: 27cqw; --byq: 24cqh; /* วงชิปเดิมพัน (เท่ากับ --brx/--bry) */
}
@media (max-width: 720px) {
.lux-room .table-stage { --rxq: 40cqw; --ryq: 34cqh; --bxq: 22cqw; --byq: 17cqh; }
}
/* แจกไพ่ */
.lux-room .seat-slot .hand .pcard:not(.flip) {
animation-name: luxDeal; animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .25, 1);
animation-delay: calc(var(--i, 0) * 140ms); animation-fill-mode: both;
}
@keyframes luxDeal {
from {
opacity: 0;
transform: translate(calc(var(--cx, 0) * var(--rxq) * -1), calc(var(--cy, 0) * var(--ryq) * -1)) rotate(-28deg) scale(.55);
}
20% { opacity: 1; }
to { opacity: 1; transform: none; }
}
.lux-room .dealer-zone .hand .pcard:not(.flip) {
animation-name: luxDealUp; animation-duration: .45s; animation-delay: calc(var(--i, 0) * 140ms); animation-fill-mode: both;
}
@keyframes luxDealUp { from { opacity: 0; transform: translateY(18cqh) rotate(20deg) scale(.6); } 20% { opacity: 1; } }
/* ลงเดิมพัน: ชิปไถลจากที่นั่งลงโต๊ะ */
.lux-room .table-bet { animation: luxChipIn .45s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes luxChipIn {
from {
opacity: 0;
transform: translate(calc(-50% + var(--cx, 0) * (var(--rxq) - var(--bxq))), calc(-50% + var(--cy, 0) * (var(--ryq) - var(--byq)))) scale(.5);
}
30% { opacity: 1; }
}
/* จบตา: ชนะ = เรืองเขียวแล้วไหลกลับเข้าที่นั่ง, แพ้ = ไหลไปหาเจ้ามือ (หรือกลางโต๊ะถ้าเล่นกันเอง) */
.lux-room .table-bet.tb-win { animation: luxChipWin 1.9s ease-in .2s both; opacity: 1; }
@keyframes luxChipWin {
0% { transform: translate(-50%, -50%) scale(1); }
25% { transform: translate(-50%, -50%) scale(1.18); }
55% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% {
opacity: 0;
transform: translate(calc(-50% + var(--cx, 0) * (var(--rxq) - var(--bxq))), calc(-50% + var(--cy, 0) * (var(--ryq) - var(--byq)))) scale(.6);
}
}
.lux-room .table-bet.tb-lose { animation: luxChipLose 1.1s ease-in .5s both; opacity: 1; }
@keyframes luxChipLose {
to {
opacity: 0;
transform: translate(calc(-50% - var(--cx, 0) * var(--bxq)), calc(-50% - var(--cy, 0) * var(--byq))) scale(.5);
}
}
.lux-room .has-dealer .table-bet.tb-lose { animation-name: luxChipToDealer; }
@keyframes luxChipToDealer {
to {
opacity: 0;
transform: translate(calc(-50% - var(--cx, 0) * var(--bxq)), calc(-50% - var(--cy, 0) * var(--byq) - 30cqh)) scale(.5);
}
}
/* ตัวเลขได้/เสียลอยขึ้นช้าลงหน่อย ให้ตรงจังหวะชิปมาถึง */
.lux-room .float-net { animation-duration: 2s; animation-delay: .9s; }
@media (prefers-reduced-motion: reduce) {
.lux-room .seat-slot .hand .pcard, .lux-room .dealer-zone .hand .pcard, .lux-room .table-bet { animation: none !important; }
.lux-room .table-bet.tb-lose { opacity: .45; }
}
/* ───────── lux: ป๊อปอัป/แถบผลแพ้ชนะ (อยู่นอก .room-page จึงจับผ่าน .shell:has(.lux-room)) ───────── */
.shell:has(.lux-room) .result-pop-backdrop { background: rgba(2, 4, 8, .62); }
.shell:has(.lux-room) .result-pop {
border: 0; padding: 30px 22px 20px;
background: radial-gradient(ellipse at 50% 0%, #1b2a4a, #070b16 70%);
box-shadow: 0 0 0 2px #e8c46a, 0 0 0 5px #07090f, 0 0 0 6px rgba(232,196,106,.45), 0 30px 70px rgba(0,0,0,.75);
}
.shell:has(.lux-room) .result-pop::before { /* เพชรทองบนกรอบ */
content: ""; position: absolute; top: -1px; left: 50%; width: 18px; height: 18px; margin-left: -9px;
transform: translateY(-50%) rotate(45deg); background: var(--lux-gold); box-shadow: 0 0 12px rgba(240,201,106,.7);
}
.shell:has(.lux-room) .rp-win { background: radial-gradient(ellipse at 50% 0%, #3a3018, #0b0d14 72%); box-shadow: 0 0 0 2px #fff3c4, 0 0 0 5px #b88a2a, 0 0 40px rgba(240,201,106,.45), 0 30px 70px rgba(0,0,0,.75); }
.shell:has(.lux-room) .rp-lose { background: radial-gradient(ellipse at 50% 0%, #2a1418, #0b0d14 72%); }
.shell:has(.lux-room) .rp-win .rp-title, .shell:has(.lux-room) .rp-draw .rp-title {
font-family: var(--font-lux); font-weight: 400;
background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 3px 0 rgba(0,0,0,.85)) drop-shadow(0 0 18px rgba(240,201,106,.45));
}
.shell:has(.lux-room) .rp-lose .rp-title { font-family: var(--font-lux); font-weight: 400; color: #ff8a80; }
.shell:has(.lux-room) .rp-special { background: var(--lux-gold); color: #2a1a05; }
.shell:has(.lux-room) .rp-deng { box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
.shell:has(.lux-room) .rp-win .rp-deng { background: radial-gradient(circle at 35% 30%, #fff3c4, #d8a033 70%); color: #3a2205; border-color: #8a5a10; }
.shell:has(.lux-room) .rp-hands > div { background: rgba(255,255,255,.04); border: 1px solid rgba(232,196,106,.25); }
.shell:has(.lux-room) .result-pop .btn-gold {
background: var(--lux-gold); color: #2a1a05; border: 0; min-height: 50px; border-radius: 999px; font-weight: 700;
box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -4px 0 rgba(90,55,5,.4), 0 5px 0 #5a3a05, 0 10px 18px rgba(0,0,0,.5);
}
.shell:has(.lux-room) .result-bar {
background: linear-gradient(180deg, rgba(20,24,36,.97), rgba(6,9,15,.97));
box-shadow: 0 0 0 1px rgba(232,196,106,.45), 0 14px 30px rgba(0,0,0,.6);
}
/* ───────── lux: เจ้ามือจ่ายชิปให้คนที่ชนะ (ชิปบินจากเจ้ามือมาที่กองเดิมพันก่อน แล้วค่อยไหลเข้าที่นั่งทั้งกอง) ───────── */
.lux-room .has-dealer .table-bet.tb-win::after {
content: ""; position: absolute; left: 4px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
background: radial-gradient(circle, #fff 0 22%, #d8a033 24%); border: 2px dashed #fff3c4; box-sizing: border-box;
box-shadow: 0 2px 0 #8a5a10, 0 4px 0 #6e4608, 0 0 12px rgba(240,201,106,.8);
animation: luxPayout .7s cubic-bezier(.3, .7, .3, 1) both;
}
@keyframes luxPayout {
from {
opacity: 0;
transform: translate(calc(var(--cx, 0) * var(--bxq) * -1), calc(var(--cy, 0) * var(--byq) * -1 - 30cqh)) scale(.6);
}
15% { opacity: 1; }
85% { opacity: 1; transform: translate(10px, -6px) scale(1.1); }
to { opacity: 0; transform: translate(10px, -6px) scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
.lux-room .has-dealer .table-bet.tb-win::after { display: none; }
}
/* =====================================================================
แนว E พรีเมียม ทั้งเว็บ: เปลี่ยนโทนพื้นฐาน (ดำน้ำเงิน + ทอง) ให้ทุกหน้าเข้าชุดเดียวกัน
ภารกิจ โปรไฟล์ กระเป๋า เพื่อน อันดับ ประวัติ คลับ ความปลอดภัย ฯลฯ ใช้ตัวแปรเหล่านี้อยู่แล้ว
===================================================================== */
:root {
--bg: #06090f;
--bg-2: #0b0e17;
--panel: #10131c;
--panel-2: #181c28;
--line: rgba(232, 196, 106, .22);
--ink-dim: #b9ad92;
--felt-edge: #2a2f3d;
--shadow: 0 14px 34px rgba(0, 0, 0, .6);
}
body {
background:
radial-gradient(1100px 520px at 50% -8%, rgba(40, 72, 130, .38), transparent 65%),
radial-gradient(900px 500px at -10% 110%, rgba(19, 87, 58, .16), transparent 60%),
repeating-linear-gradient(60deg, rgba(212, 175, 90, .03) 0 1px, transparent 1px 30px),
repeating-linear-gradient(-60deg, rgba(212, 175, 90, .03) 0 1px, transparent 1px 30px),
var(--bg);
background-attachment: fixed;
}
/* แถบบน / แถบล่าง */
.topbar { background: rgba(8, 10, 16, .9); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(232,196,106,.75), transparent) 1; }
.brand-mark { background: var(--lux-gold) !important; color: #2a1a05 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 10px rgba(0,0,0,.5); }
.brand-name { font-family: var(--font-lux); font-weight: 400; background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links a.active { background: rgba(232,196,106,.12); box-shadow: inset 0 -2px 0 #e8c46a; }
@media (max-width: 720px) {
.bottom-nav { background: rgba(6, 9, 15, .96); border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(232,196,106,.7), transparent) 1; }
.bn-item.active::before { background: var(--lux-gold); box-shadow: 0 0 10px rgba(240,201,106,.7); }
}
/* หัวข้อ */
.title-xl {
font-family: var(--font-lux); font-weight: 400; line-height: 1.3;
background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 2px 0 rgba(0,0,0,.8));
}
.section-title { display: flex; align-items: center; gap: 10px; color: var(--gold-2); }
.section-title::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; transform: rotate(45deg); background: var(--lux-gold); box-shadow: 0 0 8px rgba(240,201,106,.6); }
/* กล่องและการ์ดทั่วไป: แล็กเกอร์ดำ เส้นทองบาง */
.panel, .stat, .mission, .friend, .leader-list li, .me-menu, .data-cards > *, .setting-row, .purse:not(.purse-real) {
background: linear-gradient(180deg, #171b27, #0b0e17);
border-color: var(--line);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.45);
}
.panel-title { color: var(--gold-2); }
/* ปุ่ม */
.btn { background: linear-gradient(180deg, #232836, #0f121a); border-color: rgba(232,196,106,.32); }
.btn:hover { border-color: #e8c46a; }
.btn-quiet { background: linear-gradient(180deg, #1c2130, #0b0d14); }
.btn-gold {
position: relative; overflow: hidden;
background: var(--lux-gold); color: #2a1a05; border-color: transparent; font-weight: 600;
box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(90,55,5,.4), 0 4px 0 #5a3a05, 0 8px 16px rgba(0,0,0,.45);
}
.btn-gold:hover { filter: brightness(1.06); border-color: transparent; }
.btn-gold:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 2px 0 #5a3a05; }
.btn-gold::after {
content: ""; position: absolute; top: -20%; left: 0; width: 24%; height: 140%; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
animation: luxSheen 5s ease-in-out infinite;
}
.btn-gold:disabled::after { display: none; }
.btn-danger { background: linear-gradient(180deg, #7a2228, #4a1015); border-color: rgba(255,122,115,.45); }
/* ช่องกรอก แท็บ ป้าย */
.input { background-color: rgba(0, 0, 0, .35); border-color: var(--line); }
.input:focus { border-color: #e8c46a; box-shadow: 0 0 0 3px rgba(240,201,106,.16); }
.tabs, .wallet-tabs { background: rgba(6, 9, 15, .8); border-color: var(--line); }
.tab.active, .wallet-tab.active { background: var(--lux-gold) !important; color: #2a1a05 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.tag { border-color: rgba(232,196,106,.28); }
.status-pill { background: rgba(255,255,255,.06); border: 1px solid rgba(232,196,106,.22); }
table.data th { color: var(--gold-2); background: #141824; }
table.data tr:hover td { background: rgba(232,196,106,.04); }
/* ภารกิจ */
.mission-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 26px;
background: radial-gradient(circle at 35% 25%, #2c3242, #05070c 75%); box-shadow: 0 0 0 2px #e8c46a, 0 6px 12px rgba(0,0,0,.6); }
.mission-icon svg { margin-top: -10px; filter: drop-shadow(0 5px 5px rgba(0,0,0,.6)); }
.mission.done { border-color: #e8c46a; box-shadow: 0 0 0 1px #e8c46a, 0 0 22px rgba(240,201,106,.22), 0 10px 24px rgba(0,0,0,.45); }
.mission.bonus { background: radial-gradient(ellipse at 0% 50%, rgba(240,201,106,.16), transparent 60%), linear-gradient(180deg, #171b27, #0b0e17); }
.mission-reward { background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.xp-bar { background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 1px rgba(232,196,106,.25); }
.xp-bar > div { background: var(--lux-gold); box-shadow: 0 0 10px rgba(240,201,106,.6); }
/* หน้า "ฉัน" และโปรไฟล์ */
.me-card {
background: radial-gradient(ellipse at 0% 0%, rgba(40,72,130,.5), transparent 60%), linear-gradient(180deg, #171b27, #07090f);
border: 0; box-shadow: 0 0 0 1.5px #e8c46a, 0 0 0 4px #07090f, 0 0 0 5px rgba(232,196,106,.4), 0 14px 30px rgba(0,0,0,.6);
}
.me-avatar, .profile-avatar {
border: 0 !important;
box-shadow: 0 0 0 3px #e8c46a, 0 0 0 5px #07090f, 0 0 0 6px rgba(232,196,106,.5), 0 8px 18px rgba(0,0,0,.7) !important;
}
.me-balance { background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.me-menu a:hover, .me-menu a:active { background: rgba(232,196,106,.06); }
.me-menu a > .icon:first-child { filter: drop-shadow(0 0 6px rgba(240,201,106,.4)); }
/* อันดับ: ที่ 1–3 เป็นเหรียญ ทอง เงิน ทองแดง */
.top1 { background: radial-gradient(ellipse at 0% 50%, rgba(240,201,106,.18), transparent 60%), linear-gradient(180deg, #171b27, #0b0e17) !important; border-color: #e8c46a !important; }
.top1 .rank { background: var(--lux-gold); color: #2a1a05; box-shadow: 0 0 12px rgba(240,201,106,.6); }
.leader-list li:nth-child(2) .rank { background: linear-gradient(135deg, #ffffff, #c8d0dc 45%, #7c869a); color: #15181f; }
.leader-list li:nth-child(3) .rank { background: linear-gradient(135deg, #ffd7b0, #c07a3a 50%, #6e3a14); color: #2a1206; }
.lvalue { background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* เพื่อน */
.friend.online { border-color: rgba(111,211,154,.4); box-shadow: inset 3px 0 0 var(--pos), 0 10px 24px rgba(0,0,0,.45); }
@media (prefers-reduced-motion: reduce) { .btn-gold::after { animation: none; } }
/* =====================================================================
แนว E พรีเมียม: เมนูบน (คอม) และแถบเมนูล่าง (มือถือ) ใช้ไอคอน 3D
===================================================================== */
.nav-links > a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; transition: transform .15s, background .15s; }
.nl-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.55)) saturate(.75) brightness(.9); transition: filter .15s, transform .15s; }
.nl-ic svg { width: 28px; height: 28px; }
.nav-links > a:hover .nl-ic, .nav-links > a.active .nl-ic { filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(240,201,106,.45)); transform: translateY(-2px) scale(1.06); }
.nav-links > a.active { color: var(--gold-2); }
@media (max-width: 1100px) and (min-width: 721px) {
.nl-ic { display: none; }
.nav-links > a { padding: 7px 10px; }
}
/* ไม่ขีดเส้นใต้ในป้ายคลับหน้าหลัก */
.lux-arch, .lux-arch * { text-decoration: none !important; }
@media (max-width: 720px) {
.bottom-nav {
padding: 4px 6px calc(6px + env(safe-area-inset-bottom));
border-radius: 18px 18px 0 0;
background: linear-gradient(180deg, rgba(24,28,40,.97), rgba(6,9,15,.98));
box-shadow: 0 -1px 0 rgba(232,196,106,.55), 0 -10px 28px rgba(0,0,0,.6);
border-top: 0;
}
.bn-item { min-height: 60px; gap: 1px; padding: 2px; color: #a99d82; }
.bn-item .bn-icon { width: 44px; height: 40px; display: grid; place-items: center; border-radius: 50%; transition: transform .2s; }
.bn-item .bn-icon svg { width: 34px; height: 34px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.55)) saturate(.6) brightness(.82); transition: filter .2s; }
.bn-item.active { color: var(--gold-2); }
.bn-item.active .bn-icon { transform: translateY(-10px); }
.bn-item.active .bn-icon::before { /* เหรียญทองรองไอคอนที่เลือกอยู่ */
content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 50%;
background: radial-gradient(circle at 35% 25%, #2c3242, #05070c 75%);
box-shadow: 0 0 0 2px #e8c46a, 0 0 16px rgba(240,201,106,.55), 0 6px 12px rgba(0,0,0,.6);
}
.bn-item.active .bn-icon svg { filter: drop-shadow(0 4px 4px rgba(0,0,0,.6)); }
.bn-item.active::before { display: none; }
.bn-item.active span:last-child { margin-top: -8px; font-weight: 600; }
/* เว้นที่ด้านล่างให้แถบเมนูที่สูงขึ้น */
.shell:has(.bottom-nav) > .content { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.content:has(> .lux-home) { padding-bottom: 0; }
.lux-home { padding-bottom: calc(96px + env(safe-area-inset-bottom)); min-height: 100dvh; }
}
/* =====================================================================
หน้าหลักให้ตรงแบบร่าง (E · หน้าหลัก): หน้านี้ไม่มีแถบเมนูของเว็บ
หัวหน้าเป็นโปรไฟล์ + ของขวัญ + เมนู + ยอดชิป, แถวล่างเป็นทางลัด 3D
===================================================================== */
.shell:has(.lux-home) > .topbar,
.shell:has(.lux-home) .bottom-nav,
.shell:has(.lux-home) > .site-announcement { display: none !important; }
.shell:has(.lux-home) > .content { padding: 0 !important; max-width: none; }
.lux-home {
min-height: 100vh; min-height: 100dvh;
padding-top: calc(14px + env(safe-area-inset-top));
padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.lux-profile { align-items: flex-start; }
.lux-top-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.lux-top-btns { display: flex; gap: 8px; }
.lux-medal { text-decoration: none; }
.lux-medal > svg.art3d { width: 100%; height: 100%; padding: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2c3242, #07090f); }
.lux-menu { position: relative; }
.lux-menu > summary { list-style: none; cursor: pointer; }
.lux-menu > summary::-webkit-details-marker { display: none; }
.lux-menu .menu-pop { top: calc(100% + 10px); z-index: 60; }
.lux-wallet { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lux-pill {
display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 7px; border-radius: 999px; text-decoration: none;
background: rgba(8, 11, 20, .72); border: 1px solid rgba(217, 169, 63, .55); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
font-family: var(--font-display); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums;
}
.lux-pill:hover { text-decoration: none; border-color: #e8c46a; }
.lux-pill.gold b { color: var(--gold-2); font-weight: 600; }
.lux-pill.silver b { color: #e6eefc; font-weight: 600; }
.lux-plus {
width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
background: var(--lux-gold); color: #2a1a05; font: 700 18px/1 var(--font-display);
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
/* พู่ทองที่ม่าน */
.lux-curtain::after {
content: ""; position: absolute; top: 84%; width: 20px; height: 40px; border-radius: 10px 10px 6px 6px;
background: var(--lux-gold); box-shadow: 0 4px 10px rgba(0,0,0,.6);
}
.lux-curtain.left::after { right: 6px; }
.lux-curtain.right::after { left: 6px; }
@media (max-width: 720px) {
.lux-home { gap: 12px; padding-left: 14px; padding-right: 14px; }
.lux-avatar { width: 58px; height: 58px; font-size: 24px; }
.lux-who strong { font-size: 16px; }
.lux-role { max-width: 40vw; }
.lux-quick { display: none; } /* แบบร่างมือถือไม่มีปุ่มนี้ (ทางลัดอยู่ที่แท่นล็อบบี้) */
.lux-podiums { flex-wrap: nowrap; }
.lux-podium { width: calc(50% - 5px); }
.lux-shortcuts { margin-top: auto; padding-top: 4px; }
.lux-foot { display: none; } /* ลิงก์วงเงินอยู่ในเมนูขวาบนแทน */
}
.lux-menu > summary.lux-medal {
width: 44px; height: 44px; padding: 2px; border-radius: 50%; display: grid; place-items: center;
background: var(--lux-gold); color: var(--gold-2); font-size: 0;
}
.lux-menu > summary.lux-medal:hover, .lux-menu[open] > summary.lux-medal { background: var(--lux-gold); }
.lux-menu > summary.lux-medal > .icon { width: 100%; height: 100%; padding: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2c3242, #07090f); }
/* ป้ายเลเวลใต้อวตารหน้าหลัก (เลเวลจริงจาก ProfileService) */
a.lux-avatar { text-decoration: none; }
.lux-lv {
position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
padding: 0 8px; border-radius: 999px; white-space: nowrap;
background: var(--lux-gold); color: #2a1a05; font: 700 11px/1.5 var(--font-display);
box-shadow: 0 2px 6px rgba(0,0,0,.6);
}
/* เมนูขวาบนของหน้าหลักต้องลอยเหนือป้ายคลับและแท่น (ลูกทุกตัวของ .lux-home มี z-index: 1 เท่ากัน ตัวที่อยู่ทีหลังจึงทับ) */
.lux-home > .lux-profile { z-index: 30; }
.lux-menu .menu-pop { background: linear-gradient(180deg, #1a1f2c, #0b0e17); box-shadow: 0 0 0 1px rgba(232,196,106,.45), 0 18px 40px rgba(0,0,0,.75); }
/* =====================================================================
หน้าเลือกเกมแบบบล็อก (แบบร่าง C) : .lux-picker
===================================================================== */
.lux-picker { gap: 16px; }
.lp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lp-hello { color: var(--ink-dim); font-size: 15px; }
.lp-search { width: min(340px, 100%); border-radius: 999px; background: rgba(8,11,20,.75); border-color: rgba(217,169,63,.4); }
.lp-cats .fchip { background: rgba(8,11,20,.7); border: 1px solid rgba(217,169,63,.35); color: #d8cdb2; }
.lp-cats .fchip.on { background: var(--lux-gold); border-color: transparent; color: #2a1a05; font-weight: 600; }
.lp-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 168px; grid-auto-flow: dense; gap: 16px; }
.lp-tile {
--c1: #1f7a4d; --c2: #0f4a31;
position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; padding: 16px;
display: flex; flex-direction: column; justify-content: space-between;
color: #fff; text-decoration: none;
background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 50%), linear-gradient(160deg, var(--c1), var(--c2));
box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 12px 28px rgba(0,0,0,.45);
transition: transform .18s, box-shadow .18s;
}
.lp-tile:hover { text-decoration: none; transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 2px rgba(240,201,106,.7), 0 16px 32px rgba(0,0,0,.55); }
.grp-pvp { --c1: #1f7a4d; --c2: #0f4a31; }
.grp-house { --c1: #a3263a; --c2: #5e1220; }
.grp-poker { --c1: #2a56a8; --c2: #152f66; }
.grp-dice { --c1: #c98a1b; --c2: #7a4f0a; }
.grp-bingo { --c1: #7b3fb0; --c2: #40205f; }
.lp-tile.is-closed { filter: grayscale(.6) brightness(.7); }
.lp-glyph { position: absolute; right: -14px; bottom: -44px; z-index: -1; font-size: 170px; line-height: 1; color: rgba(255,255,255,.08); font-family: var(--font-display); pointer-events: none; }
.lp-sweep { position: absolute; top: -50%; left: 0; width: 22%; height: 200%; z-index: -1; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); animation: lpSweep 5s ease-in-out infinite; pointer-events: none; }
@keyframes lpSweep { 0% { transform: translateX(-150%) rotate(20deg); } 55%, 100% { transform: translateX(450%) rotate(20deg); } }
@keyframes lpFloat { 50% { transform: translateY(-6px); } }
/* เกมเด่น */
.lp-featured { grid-column: span 2; grid-row: span 2; justify-content: flex-end; gap: 10px; padding: 26px; }
.lp-feat-art { position: absolute; right: 26px; top: 22px; animation: lpFloat 5s ease-in-out infinite; filter: drop-shadow(0 14px 16px rgba(0,0,0,.45)); }
.lp-feat-art svg { width: clamp(150px, 18vw, 220px); height: auto; }
.lp-badge { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: rgba(240,201,106,.95); color: #2a1a05; font: 500 14px var(--font-display); }
.lp-feat-title { font: 700 clamp(36px, 4.5vw, 56px)/1 var(--font-display); text-shadow: 0 3px 12px rgba(0,0,0,.35); }
.lp-feat-meta { font-size: 15px; color: rgba(255,255,255,.88); max-width: 46ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-feat-cta {
align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 50px; padding: 0 24px; border-radius: 14px;
background: #fff; color: var(--c2); font: 600 18px var(--font-display); box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
/* ทัวร์นาเมนต์ */
.lp-tourney { grid-column: span 2; padding: 20px 22px; }
.lp-tour-head { display: flex; align-items: center; gap: 8px; font: 500 16px var(--font-display); }
.lp-tour-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.lp-tour-body small { display: block; font-size: 13px; color: rgba(255,255,255,.82); }
.lp-tour-body strong { display: block; font: 700 clamp(28px, 3vw, 38px)/1.1 var(--font-display); }
.lp-seats { display: flex; gap: 6px; margin-top: 8px; }
.lp-seats i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.25); }
.lp-seats i.on { background: #fff; }
.lp-tour-cta { flex-shrink: 0; padding: 11px 18px; border-radius: 12px; background: #fff; color: var(--c2); font: 600 15px var(--font-display); }
/* ภารกิจ */
.lp-missions { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; }
.lp-ring { width: 76px; height: 76px; flex-shrink: 0; }
.lp-mis-text { display: flex; flex-direction: column; gap: 2px; }
.lp-mis-text strong { font: 600 19px var(--font-display); }
.lp-mis-text small { font-size: 13px; color: rgba(255,255,255,.9); }
/* บล็อกเกม */
.lp-live { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.3); font-size: 12px; color: rgba(255,255,255,.82); }
.lp-live.on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 3px rgba(111,211,154,.25); }
.lp-game-art { position: absolute; right: 12px; top: 34px; animation: lpFloat 4s ease-in-out infinite; filter: drop-shadow(0 8px 8px rgba(0,0,0,.4)); }
.lp-tile:nth-child(odd) .lp-game-art { animation-delay: -2s; }
.lp-game-title { font: 600 20px var(--font-display); text-shadow: 0 2px 8px rgba(0,0,0,.35); position: relative; }
@media (max-width: 720px) {
.lp-head { align-items: stretch; }
.lp-search { width: 100%; }
.lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; gap: 12px; }
.lp-featured { grid-column: span 2; grid-row: span 2; padding: 18px; }
.lp-feat-art { right: 16px; top: 14px; }
.lp-feat-art svg { width: 150px; }
.lp-feat-meta { font-size: 13px; }
.lp-feat-cta { height: 44px; font-size: 16px; padding: 0 18px; }
.lp-tourney { grid-column: span 2; padding: 16px; }
.lp-missions { flex-direction: column; justify-content: center; gap: 4px; text-align: center; }
.lp-missions .lp-mis-text { align-items: center; }
.lp-ring { width: 58px; height: 58px; }
.lp-mis-text strong { font-size: 16px; }
.lp-game-art svg { width: 72px; height: auto; }
.lp-game-title { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .lp-sweep, .lp-feat-art, .lp-game-art { animation: none; } }
@media (max-width: 720px) { .lp-head { flex-direction: column; align-items: stretch; gap: 10px; } }
/* =====================================================================
ล็อบบี้แต่ละเกม: แบนเนอร์ประจำเกม + แผ่นเลือกระดับเดิมพัน + การ์ดห้อง
===================================================================== */
.lux-lobby-head { grid-template-columns: auto 1fr; align-items: start; }
.lux-lobby-head::after { display: none !important; }
.ll-hero {
--c1: #1f7a4d; --c2: #0f4a31;
position: relative; overflow: hidden; isolation: isolate; min-height: 150px; border-radius: 22px;
display: flex; align-items: flex-end; gap: 16px; padding: 18px 20px 18px 190px;
background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 50%), linear-gradient(160deg, var(--c1), var(--c2));
box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(232,196,106,.35), 0 14px 30px rgba(0,0,0,.5);
}
.ll-hero-art { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); animation: llFloat 5s ease-in-out infinite; filter: drop-shadow(0 12px 14px rgba(0,0,0,.45)); }
@keyframes llFloat { 50% { transform: translateY(calc(-50% - 6px)); } }
.ll-hero-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; color: #fff; }
.ll-hero-text small { font: 500 13px var(--font-display); color: rgba(255,255,255,.75); letter-spacing: .04em; }
.ll-hero-text strong { font: 700 clamp(30px, 3.6vw, 44px)/1.05 var(--font-display); text-shadow: 0 3px 12px rgba(0,0,0,.35); }
.ll-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.85); }
.ll-hero .lobby-blurb { color: rgba(255,255,255,.75); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ll-hero-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.ll-btn-white, .ll-btn-outline {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 20px;
border-radius: 14px; font: 600 16px var(--font-display); cursor: pointer; white-space: nowrap;
}
.ll-btn-white { background: #fff; color: var(--c2); border: 0; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.ll-btn-outline { background: rgba(0,0,0,.15); color: #fff; border: 1.5px solid rgba(255,255,255,.75); }
.ll-btn-white:disabled, .ll-btn-outline:disabled { opacity: .5; cursor: not-allowed; }
/* แผ่นเลือกระดับเดิมพัน */
.ll-tiers {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px;
border-radius: 16px; background: rgba(8,11,20,.75); border: 1px solid rgba(217,169,63,.4);
}
.ll-tier {
min-height: 52px; border: 0; border-radius: 12px; cursor: pointer; background: transparent; color: #c8b78f;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 6px;
font-family: var(--font-display); transition: background .15s, color .15s;
}
.ll-tier span { font-size: 15px; font-weight: 600; }
.ll-tier small { font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ll-tier:hover { color: #fff; background: rgba(255,255,255,.04); }
.ll-tier.on { background: var(--lux-gold); color: #2a1a05; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 12px rgba(0,0,0,.4); }
.ll-tier.tier-high:not(.on) span { color: #f7dc8f; }
/* การ์ดห้อง: โต๊ะจิ๋วใหญ่ขึ้น ปุ่มนั่งเต็มความกว้าง */
.lux-lobby .room-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.lux-lobby .room-tile { gap: 6px; padding: 12px 12px 14px; }
.lux-lobby .rt-actions { margin-top: 4px; }
.lux-lobby .rt-actions .btn-gold { min-height: 40px; border-radius: 999px; font-size: 15px; }
.lux-lobby .rt-actions .btn-quiet { min-height: 40px; border-radius: 999px; }
.lux-lobby .rt-foot .status { background: rgba(255,255,255,.06); border: 1px solid rgba(232,196,106,.2); }
@media (max-width: 720px) {
.lux-lobby-head { gap: 10px; }
.ll-hero { min-height: 112px; padding: 14px 14px 14px 112px; gap: 8px; border-radius: 18px; }
.ll-hero-art { left: 8px; }
.ll-hero-art svg { width: 96px; height: auto; }
.ll-hero-text strong { font-size: 26px; }
.ll-hero .lobby-blurb { display: none; }
.ll-tier { min-height: 46px; }
.ll-tier span { font-size: 13px; }
.ll-tier small { font-size: 10px; }
.lux-lobby .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .ll-hero-art { animation: none; } }
@media (max-width: 720px) { .ll-hero-actions { display: none !important; } }
/* =====================================================================
โต๊ะตามแบบร่าง E: โต๊ะทรงลู่วิ่ง ไฟอารีนา ป้ายสถานะเหนือหัว ไพ่ 3D ชิปซ้อน ตัวเลือกยอดแบบแผงเลื่อน
===================================================================== */
/* โต๊ะทรงลู่วิ่ง (ปลายโค้งครึ่งวงกลม) แทนวงรี */
.lux-room .felt, .lux-room .felt::before, .lux-room .felt::after { border-radius: 9999px; }
/* แถวไฟสปอตไลต์ด้านบนแบบอารีนา */
.lux-room .table-stage::after {
content: ""; position: absolute; left: 4%; right: 4%; top: 0; height: 26px; z-index: 0; pointer-events: none;
background: radial-gradient(circle at 50% 50%, #fff3c4 0 3px, rgba(255,243,196,.55) 4px, rgba(240,201,106,.15) 8px, transparent 12px) 0 0 / 52px 26px repeat-x;
filter: drop-shadow(0 0 6px rgba(255,243,196,.6));
animation: luxBeam 6s ease-in-out infinite;
}
/* ที่นั่ง: ป้ายสถานะลอยเหนือหัว ป้ายชื่อติดใต้อวตาร */
.lux-room .seat-slot.seat:not(.mine) .seat-info { order: -2; margin-bottom: -6px; position: relative; z-index: 2; min-height: 0; }
.lux-room .seat-slot.seat .avatar { order: -1; }
.lux-room .seat-name { margin-top: -6px; position: relative; z-index: 1; font-size: 12px; padding: 1px 10px; }
.lux-room .state-pill { font-size: 11px; line-height: 1.5; }
/* ไพ่ของเรา: ใบใหญ่ อยู่เหนืออวตาร (ซ้อนขอบโต๊ะ) */
.lux-room .seat-slot.mine .hand { order: -3; margin-bottom: -14px; position: relative; z-index: 3; filter: drop-shadow(0 0 14px rgba(240,201,106,.35)); }
.lux-room .seat-slot.mine .hand .pcard { --w: 62px; }
.lux-room .seat-slot.mine .hand .pcard + .pcard { margin-left: -20px; }
.lux-room .seat-slot.mine .seat-info { order: 5; }
.lux-room .seat-slot.mine .hand-label { background: var(--lux-gold); color: #2a1a05; border: 0; font-weight: 700; padding: 2px 12px; }
@media (max-width: 720px) {
.lux-room .seat-slot.mine .hand .pcard { --w: 54px; }
.lux-room .seat-slot.mine .hand .pcard + .pcard { margin-left: -18px; }
}
@media (max-width: 720px) and (max-height: 700px) {
.lux-room .seat-slot.mine .hand .pcard { --w: 44px; }
}
/* ไพ่ 3D: มีความหนาที่ขอบ + แสงเงาวาว */
.lux-room .pcard.face {
box-shadow: 1.5px 2px 0 #cfc3aa, 3px 4px 0 #8a7a62, 0 10px 16px rgba(0,0,0,.5);
background-image: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 38%), linear-gradient(160deg, #fffaf0, #efe4cc);
}
.lux-room .pcard.back { box-shadow: 1.5px 2px 0 #3a0a14, 3px 4px 0 #1c0408, 0 8px 14px rgba(0,0,0,.5); }
/* ชิปเดิมพันบนโต๊ะ: กองชิป 3 ชั้น ตัวเลขขาวลอย ไม่มีกรอบ */
.lux-room .table-bet { background: none; border: 0; padding: 0; gap: 4px; font-size: 13px; font-weight: 700; text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,.8); }
.lux-room .table-bet .chip-dot {
width: 20px; height: 20px; border-width: 2.5px;
background: radial-gradient(circle, #fff 0 20%, #e23b4e 22%);
box-shadow: 0 3px 0 #9a1428, 0 3px 0 1.5px #fff, 0 6px 0 #9a1428, 0 6px 0 1.5px rgba(255,255,255,.8), 0 9px 0 #55060f, 0 12px 8px rgba(0,0,0,.55);
transform: translateY(-6px) scaleY(.8);
}
.lux-room .table-bet.tb-win .chip-dot { background: radial-gradient(circle, #fff 0 20%, #2fb070 22%); box-shadow: 0 3px 0 #14683e, 0 6px 0 #0a4a30, 0 0 14px rgba(111,211,154,.8); }
/* ─── ตัวเลือกยอดเดิมพันบนมือถือ: ซ้ายปุ่มด่วน ขวาแผงเลื่อนแนวตั้งมีชิปเป็นที่จับ ─── */
@media (max-width: 980px) {
.bet-picker .bp-mobile { display: grid !important; grid-template-columns: 1fr 112px; gap: 8px; align-items: stretch; width: 100%; }
.bp-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1.25fr; gap: 6px; }
.bp-q {
min-height: 44px; border-radius: 12px; border: 0; cursor: pointer;
background: linear-gradient(180deg, #5fe0a0, #16865a); color: #04281a; font: 700 15px var(--font-display);
box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.25), 0 4px 0 #0a4a30;
}
.bp-q:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 2px 0 #0a4a30; }
.bp-quick .bp-go { grid-column: 1 / -1; height: auto; min-height: 50px; font-size: 18px; font-weight: 700; border-radius: 14px; }
.bp-slider {
display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
background: linear-gradient(180deg, rgba(26,32,50,.98), rgba(6,10,20,.98)); border: 1px solid rgba(232,196,106,.55);
box-shadow: 0 8px 18px rgba(0,0,0,.5);
}
.bp-slider-head { display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 5px 4px; border-bottom: 1px solid rgba(232,196,106,.35); background: linear-gradient(180deg, rgba(255,255,255,.07), transparent); }
.bp-slider .bp-step {
width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; border: 0; padding: 0; font-size: 18px; line-height: 1;
background: radial-gradient(circle at 35% 30%, #2c3242, #07090f); color: var(--gold-2); box-shadow: 0 0 0 1.5px #e8c46a;
}
.bp-val { flex: 1; min-width: 0; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.bp-val strong { font: 700 20px var(--font-display); color: var(--gold-2); font-variant-numeric: tabular-nums; }
.bp-val small { font-size: 9px; color: rgba(255,255,255,.55); white-space: nowrap; }
.bp-track {
position: relative; flex: 1; min-height: 76px; display: grid; place-items: center;
background:
linear-gradient(0deg, rgba(240,201,106,.28) 0 var(--p), transparent var(--p)) 50% 0 / 6px 100% no-repeat,
repeating-linear-gradient(180deg, transparent 0 10px, rgba(255,255,255,.07) 10px 12px);
}
.bp-track input[type=range] {
-webkit-appearance: none; appearance: none; writing-mode: vertical-lr; direction: rtl;
width: 56px; height: 100%; min-height: 76px; margin: 0; background: transparent; cursor: grab; touch-action: none;
}
.bp-track input[type=range]::-webkit-slider-runnable-track { background: transparent; }
.bp-track input[type=range]::-moz-range-track { background: transparent; }
.bp-track input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; width: 46px; height: 46px; border-radius: 50%; border: 0;
background: radial-gradient(circle, #f4efe4 0 30%, #15181f 31% 36%, transparent 37%), repeating-conic-gradient(#15181f 0 15deg, #f4efe4 15deg 30deg);
box-shadow: 0 3px 0 #05060a, 0 6px 10px rgba(0,0,0,.6), 0 0 0 2px #e8c46a;
}
.bp-track input[type=range]::-moz-range-thumb {
width: 46px; height: 46px; border-radius: 50%; border: 0;
background: radial-gradient(circle, #f4efe4 0 30%, #15181f 31% 36%, transparent 37%), repeating-conic-gradient(#15181f 0 15deg, #f4efe4 15deg 30deg);
box-shadow: 0 3px 0 #05060a, 0 6px 10px rgba(0,0,0,.6), 0 0 0 2px #e8c46a;
}
}
/* ชิปเลือกยอด: เพิ่มความหนาให้ดูเป็นชิปจริง */
.lux-room .chip, .bp-sheet .chip { box-shadow: 0 3px 0 rgba(0,0,0,.55), 0 6px 10px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: reduce) { .lux-room .table-stage::after { animation: none; } }
@media (max-width: 980px) {
.bet-picker .bp-slider { grid-column: 2; grid-row: 1; }
.bet-picker .bp-quick { grid-column: 1; grid-row: 1; }
}
.lux-room .seat-slot.mine .hand { margin-bottom: 2px; }
/* ชิปของเราขยับไปขวาของไพ่ ไม่ทับไพ่ใบใหญ่ */
.lux-room .table-bet.mine { left: calc(50% + 74px); top: calc(50% + var(--cy) * var(--ry) - 10px); }
/* =====================================================================
โป๊กเกอร์: แผงเรสตามแบบร่าง (ปุ่มลัดซ้าย + แผงเลื่อนแนวตั้งขวา) และปุ่มหลัก 3D
===================================================================== */
.pab-raise-grid { display: grid; grid-template-columns: 1fr 116px; gap: 8px; align-items: stretch; }
.pab-raise-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pab-raise-left .pab-row { margin-top: auto; }
.pab-presets { gap: 6px; }
.lux-room .pab-preset {
border: 0; border-radius: 12px; min-height: 48px; color: #04281a;
background: linear-gradient(180deg, #5fe0a0, #16865a);
box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.25), 0 4px 0 #0a4a30;
}
.lux-room .pab-preset span { font: 700 14px var(--font-display); }
.lux-room .pab-preset small { color: rgba(4,40,26,.8); font-weight: 600; }
.lux-room .pab-preset.on { box-shadow: 0 0 0 2px #fff3c4, 0 0 14px rgba(240,201,106,.7), inset 0 2px 0 rgba(255,255,255,.55), 0 4px 0 #0a4a30; }
.lux-room .pab-preset.allin { background: linear-gradient(180deg, #ff6b6b, #b3232b); color: #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.25), 0 4px 0 #5e0a16; }
.lux-room .pab-preset.allin span { color: #fff; }
.lux-room .pab-preset.allin small { color: rgba(255,255,255,.85); }
.lux-room .pab-preset:active { transform: translateY(2px); }
.lux-room .pab-back { background: linear-gradient(180deg, #2a2f3d, #0a0c13); border: 1px solid #c9a24a; color: var(--gold-2); box-shadow: 0 4px 0 rgba(0,0,0,.5); }
.lux-room .pab-allin { background: linear-gradient(180deg, #ff6b6b, #b3232b); color: #fff; }
/* แผงเลื่อนแนวตั้ง */
.pab-slider {
display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
background: linear-gradient(180deg, rgba(26,32,50,.98), rgba(6,10,20,.98)); border: 1px solid rgba(232,196,106,.55);
box-shadow: 0 8px 18px rgba(0,0,0,.5);
}
.pab-slider-head { display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 5px 4px; border-bottom: 1px solid rgba(232,196,106,.35); background: linear-gradient(180deg, rgba(255,255,255,.07), transparent); }
.pab-slider .pab-step {
width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 0; padding: 0; font-size: 18px; line-height: 1;
background: radial-gradient(circle at 35% 30%, #2c3242, #07090f); color: var(--gold-2); box-shadow: 0 0 0 1.5px #e8c46a;
}
.pab-slider-val { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.pab-slider-val small { font-size: 10px; color: rgba(255,255,255,.6); }
.pab-slider-val strong { font: 700 19px var(--font-display); color: var(--gold-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pab-slider-val strong.neg { color: #ff8a80; }
.pab-track {
position: relative; flex: 1; min-height: 96px; display: grid; place-items: center;
background:
linear-gradient(0deg, rgba(240,201,106,.3) 0 var(--p), transparent var(--p)) 50% 0 / 6px 100% no-repeat,
repeating-linear-gradient(180deg, transparent 0 10px, rgba(255,255,255,.07) 10px 12px);
}
.pab-track .raise-slider {
-webkit-appearance: none; appearance: none; writing-mode: vertical-lr; direction: rtl;
width: 56px; height: 100%; min-height: 96px; margin: 0; background: transparent; cursor: grab; touch-action: none;
}
.pab-track .raise-slider::-webkit-slider-runnable-track { background: transparent; }
.pab-track .raise-slider::-moz-range-track { background: transparent; }
.pab-track .raise-slider::-webkit-slider-thumb {
-webkit-appearance: none; width: 46px; height: 46px; border-radius: 50%; border: 0;
background: radial-gradient(circle, #f4efe4 0 30%, #15181f 31% 36%, transparent 37%), repeating-conic-gradient(#1b4596 0 15deg, #f4efe4 15deg 30deg);
box-shadow: 0 3px 0 #0b2154, 0 6px 10px rgba(0,0,0,.6), 0 0 0 2px #e8c46a;
}
.pab-track .raise-slider::-moz-range-thumb {
width: 46px; height: 46px; border-radius: 50%; border: 0;
background: radial-gradient(circle, #f4efe4 0 30%, #15181f 31% 36%, transparent 37%), repeating-conic-gradient(#1b4596 0 15deg, #f4efe4 15deg 30deg);
box-shadow: 0 3px 0 #0b2154, 0 6px 10px rgba(0,0,0,.6), 0 0 0 2px #e8c46a;
}
.pab-slider-max { padding: 3px 4px 5px; text-align: center; font-size: 10px; color: rgba(255,255,255,.55); }
/* แผงควบคุมของโป๊กเกอร์ทึบ ไม่ให้ป้ายชื่อบนโต๊ะทะลุมาทับตัวเลข */
.lux-room .controls:has(.pab-raise) { background: linear-gradient(180deg, #141824, #06090f); position: relative; z-index: 25; }
@media (max-width: 720px) {
.pab-raise-grid { grid-template-columns: 1fr 104px; gap: 6px; }
.lux-room .pab-preset { min-height: 44px; }
.pab-track, .pab-track .raise-slider { min-height: 84px; }
}
/* หัวแผงเลื่อนโป๊กเกอร์: ตัวเลขเต็มแถวบน ปุ่ม − + แถวล่าง ไม่ให้เบียดกัน */
.pab-slider-head { flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding: 6px 4px; }
.pab-slider-val { order: -1; flex: 0 0 100%; }
.pab-slider-val small { font-size: 11px; }
.pab-slider-val strong { font-size: 22px; }
/* ######################################################################
อันดับ · เข้าสู่ระบบ/สมัคร · ป๊อปอัปผล (เดิมคือไฟล์ app.lux-pages.css)
###################################################################### */
/* =====================================================================
แนว E พรีเมียม: อันดับ (แท่นโพเดียม) · เข้าสู่ระบบ/สมัคร · ป๊อปอัปผล
วางต่อท้าย app.css (ต้องอยู่หลังบล็อกแนว E เดิม)
===================================================================== */
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ───────── อันดับ ───────── */
.lb-page { max-width: 760px; margin: 0 auto; }
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lb-head .title-xl { margin: 0; }
.lb-podium {
--rise: cubic-bezier(.2, .8, .2, 1);
list-style: none; margin: 34px 0 26px; padding: 0; position: relative;
display: grid; grid-template-columns: 1fr 1.18fr 1fr; grid-template-areas: "p2 p1 p3";
align-items: end; gap: clamp(6px, 2.4vw, 18px);
}
/* แสงไฟส่องแท่นที่ 1 */
.lb-podium::before {
content: ""; position: absolute; left: 50%; bottom: 0; width: 70%; height: 130%; transform: translateX(-50%);
background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(240, 201, 106, .2), transparent 70%);
pointer-events: none; z-index: 0;
}
/* เงาพื้นใต้แท่นทั้งชุด */
.lb-podium::after {
content: ""; position: absolute; left: 4%; right: 4%; bottom: -16px; height: 28px; border-radius: 50%;
background: radial-gradient(ellipse, rgba(0, 0, 0, .7), transparent 70%); z-index: -1;
}
.lb-place { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.lb-p1 { grid-area: p1; --metal: var(--lux-gold); --metal-v: var(--lux-gold-v); --edge: #e8c46a; --plinth-h: 128px; --av: 84px; }
.lb-p2 { grid-area: p2; --metal: linear-gradient(135deg, #ffffff, #c8d0dc 45%, #7c869a 70%, #e9edf3); --metal-v: linear-gradient(180deg, #ffffff, #c8d0dc 45%, #7c869a 75%, #e9edf3); --edge: #c8d0dc; --plinth-h: 94px; --av: 66px; }
.lb-p3 { grid-area: p3; --metal: linear-gradient(135deg, #ffd7b0, #c07a3a 50%, #6e3a14 75%, #e6a56a); --metal-v: linear-gradient(180deg, #ffd7b0, #c07a3a 50%, #6e3a14 80%, #e6a56a); --edge: #c07a3a; --plinth-h: 70px; --av: 60px; }
.lb-person {
display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%;
text-decoration: none; color: inherit; padding-bottom: 10px;
animation: lbPop .45s ease-out .55s both;
}
.lb-person:focus-visible { outline: 2px solid #e8c46a; outline-offset: 4px; border-radius: 12px; }
.lb-trophy { margin-bottom: -10px; position: relative; z-index: 2; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .6)); }
.lb-ring {
padding: 3px; border-radius: 50%; background: var(--metal);
box-shadow: 0 0 0 3px #07090f, 0 10px 20px rgba(0, 0, 0, .7);
}
.lb-p1 .lb-ring { box-shadow: 0 0 0 3px #07090f, 0 0 26px rgba(240, 201, 106, .45), 0 10px 20px rgba(0, 0, 0, .7); }
.lb-avatar {
width: var(--av); height: var(--av); border-radius: 50%; display: grid; place-items: center;
font-family: var(--font-display); font-size: calc(var(--av) * .44); color: #fff;
background: radial-gradient(circle at 35% 28%, hsl(var(--h) 45% 42%), hsl(var(--h) 55% 12%) 78%);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), inset 0 -6px 12px rgba(0, 0, 0, .45);
}
.lb-name {
margin-top: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-family: var(--font-display); font-size: 15px; color: var(--lux-text);
}
.lb-value {
font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px;
background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lb-value small { font-weight: 400; font-size: 11px; }
.lb-p1 .lb-name { font-size: 17px; }
.lb-p1 .lb-value { font-size: 18px; }
/* แท่นแล็กเกอร์ดำ: ผิวบนเป็นสี่เหลี่ยมคางหมู ขอบทอง/เงิน/ทองแดงตามอันดับ */
.lb-plinth {
position: relative; width: 100%; height: var(--plinth-h); display: grid; place-items: center;
background: linear-gradient(180deg, #1b2030, #05070c 85%);
border-top: 2px solid var(--edge);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 30px rgba(0, 0, 0, .7);
transform-origin: 50% 100%;
animation: lbRise .7s var(--rise) both;
}
.lb-plinth::before {
content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
background: linear-gradient(180deg, #3a4152, #161a25);
}
.lb-plinth::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(232, 196, 106, .22); pointer-events: none; }
.lb-p2 .lb-plinth { animation-delay: .1s; }
.lb-p3 .lb-plinth { animation-delay: .18s; }
.lb-p1 .lb-plinth { animation-delay: .26s; }
.lb-num {
font-family: var(--font-lux); font-weight: 400; line-height: 1; font-size: calc(var(--plinth-h) * .42);
background: var(--metal-v); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .85));
}
@keyframes lbRise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes lbPop { from { transform: translateY(14px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.lb-rest { margin-top: 8px; }
.lb-rest .lavatar { margin-right: 8px; }
.lb-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; text-align: center; color: var(--ink-dim); }
.lb-empty-art { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .6)) grayscale(.35); opacity: .9; }
@media (max-width: 520px) {
.lb-head { flex-direction: column; align-items: stretch; }
.lb-head .tabs { width: 100%; }
.lb-head .tab { flex: 1; }
.lb-podium { margin-top: 26px; }
.lb-p1 { --plinth-h: 104px; --av: 66px; }
.lb-p2 { --plinth-h: 78px; --av: 52px; }
.lb-p3 { --plinth-h: 60px; --av: 48px; }
.lb-trophy svg { width: 46px; height: 46px; }
.lb-name { font-size: 13px; }
.lb-p1 .lb-name { font-size: 14px; }
.lb-value { font-size: 13px; }
.lb-p1 .lb-value { font-size: 15px; }
}
/* ───────── เข้าสู่ระบบ / สมัคร ───────── */
.lux-auth { position: relative; isolation: isolate; }
/* แสงไฟเวทีด้านหลังการ์ด */
.lux-auth::before {
content: ""; position: absolute; left: 50%; top: 50%; width: min(760px, 120vw); height: 620px;
transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
background: radial-gradient(ellipse 50% 45% at 50% 40%, rgba(40, 72, 130, .4), transparent 70%),
radial-gradient(ellipse 30% 22% at 50% 12%, rgba(240, 201, 106, .14), transparent 70%);
}
.lux-auth .auth-card {
position: relative; padding-top: 22px; border: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(40, 72, 130, .45), transparent 60%), linear-gradient(180deg, #171b27, #07090f);
box-shadow: 0 0 0 1.5px #e8c46a, 0 0 0 4px #07090f, 0 0 0 5px rgba(232, 196, 106, .4), 0 22px 44px rgba(0, 0, 0, .7);
}
.auth-prop { display: flex; justify-content: center; margin: -78px auto 2px; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .65)); }
.lux-auth { padding-top: 72px; }
.lux-auth .auth-card h1 {
font-family: var(--font-lux); font-weight: 400; font-size: 30px; line-height: 1.3;
background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .8));
}
.auth-age { margin: 2px 0 4px; }
.auth-note { margin: 14px 0 0; text-align: center; font-size: 12px; line-height: 1.6; color: #9a8c6c; }
@media (max-width: 520px) {
.auth-prop svg { width: 160px; height: auto; }
.auth-prop { margin-top: -64px; }
.lux-auth { padding-top: 60px; }
}
/* ───────── ป๊อปอัปผล: เลิกใช้สีแดงเลือดหมูของธีมเก่า ───────── */
.rp-win {
border-color: #e8c46a;
background: radial-gradient(ellipse at 50% 0%, rgba(240, 201, 106, .25), transparent 65%), linear-gradient(180deg, #1a1f2d, #07090f);
}
.rp-lose { background: linear-gradient(180deg, #2a1418, #0b0e17 70%); }
.rp-win .rp-title, .rp-win .rp-amount {
font-family: var(--font-lux); font-weight: 400;
background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ######################################################################
โปรไฟล์ · กระเป๋าชิป (เดิมคือไฟล์ app.lux-pages-2.css)
###################################################################### */
/* =====================================================================
แนว E พรีเมียม: โปรไฟล์ (เหรียญเลเวล + ชั้นวางเหรียญตรา) · กระเป๋าชิป
วางต่อท้าย app.css (หลัง app.lux-pages.css)
===================================================================== */
/* ───────── โปรไฟล์: ส่วนหัว ───────── */
.profile-hero {
border: 0; border-radius: 20px; padding: 22px;
background: radial-gradient(ellipse at 0% 0%, rgba(40, 72, 130, .5), transparent 60%), linear-gradient(180deg, #171b27, #07090f);
box-shadow: 0 0 0 1.5px #e8c46a, 0 0 0 4px #07090f, 0 0 0 5px rgba(232, 196, 106, .4), 0 16px 34px rgba(0, 0, 0, .6);
}
.profile-avatar-wrap { position: relative; flex-shrink: 0; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); }
.profile-avatar {
background: radial-gradient(circle at 35% 28%, hsl(var(--h, 20) 45% 42%), hsl(var(--h, 20) 55% 12%) 78%);
}
/* เหรียญเลเวลหกเหลี่ยมทองเกาะมุมอวตาร */
.lv-medal {
position: absolute; right: -8px; bottom: -6px; width: 40px; height: 44px;
display: grid; place-items: center;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
background: var(--lux-gold);
}
.lv-medal::before {
content: ""; position: absolute; inset: 3px;
clip-path: inherit; background: linear-gradient(180deg, #1b2030, #05070c);
}
.lv-medal b {
position: relative; font-family: var(--font-lux); font-weight: 400; font-size: 17px; line-height: 1;
background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.profile-name {
font-family: var(--font-lux); font-weight: 400; font-size: 30px; line-height: 1.25;
background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .8));
overflow-wrap: anywhere;
}
/* ───────── โปรไฟล์: ชั้นวางเหรียญตรา ───────── */
.badge-shelf {
list-style: none; margin: 0 0 8px; padding: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 14px 12px;
}
.medal-card {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 16px 10px 14px; text-align: center; border-radius: 16px;
background: linear-gradient(180deg, #131722, #090b12);
border: 1px solid rgba(232, 196, 106, .12);
}
.medal-card.on {
background: radial-gradient(ellipse 70% 55% at 50% 30%, rgba(240, 201, 106, .14), transparent 70%), linear-gradient(180deg, #171b27, #0b0e17);
border-color: rgba(232, 196, 106, .4);
}
/* เหรียญ: ขอบนอกเป็นวงความคืบหน้า (--p = 0..1) ปลดล็อกแล้วขอบเป็นทองเต็มวง */
.medal {
position: relative; width: 78px; height: 78px; padding: 4px; border-radius: 50%; margin-bottom: 12px;
background: conic-gradient(#e8c46a calc(var(--p, 0) * 1turn), rgba(255, 255, 255, .07) 0);
}
.medal::after { /* แท่นเงาใต้เหรียญ */
content: ""; position: absolute; left: 8%; right: 8%; bottom: -12px; height: 10px; border-radius: 50%;
background: radial-gradient(ellipse, rgba(0, 0, 0, .75), transparent 70%);
}
.medal-face {
width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
font-size: 32px; line-height: 1;
background: radial-gradient(circle at 38% 30%, #2c3242, #05070c 78%);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -6px 12px rgba(0, 0, 0, .6);
filter: grayscale(1); opacity: .5;
}
.medal-card.on .medal {
padding: 5px; background: var(--lux-gold);
box-shadow: 0 0 0 2px #07090f, 0 0 22px rgba(240, 201, 106, .35);
}
.medal-card.on .medal::after { background: radial-gradient(ellipse, rgba(240, 201, 106, .35), transparent 70%); }
.medal-card.on .medal-face {
filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .6)); opacity: 1;
background: radial-gradient(circle at 38% 30%, #3a3018, #120d04 80%);
box-shadow: inset 0 0 0 1px rgba(255, 243, 196, .5), inset 0 -6px 12px rgba(0, 0, 0, .55);
}
.medal-card.on:hover .medal { transform: translateY(-2px) rotate(-4deg); transition: transform .2s; }
.medal-title { font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--ink-dim); }
.medal-card.on .medal-title { color: var(--lux-text); }
.medal-hint {
font-size: 12px; line-height: 1.45; color: #8d8268;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.medal-progress { margin-top: 2px; font-size: 11px; color: #c8b78f; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
.profile-hero { padding: 18px 16px; }
.profile-name { font-size: 24px; }
.badge-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.medal-card { padding: 12px 6px 10px; }
.medal { width: 62px; height: 62px; }
.medal-face { font-size: 26px; }
.medal-title { font-size: 12.5px; }
.medal-hint { display: none; } /* จอเล็ก: แตะเพื่อดูไม่ได้ จึงซ่อนคำอธิบาย ให้เหลือชื่อ + ความคืบหน้า */
}
/* ───────── กระเป๋าชิป ───────── */
.purse-head { align-items: center; }
.purse-info { flex: 1; min-width: 180px; }
.purse-art { flex-shrink: 0; display: grid; place-items: center; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.purse-label { font-family: var(--font-display); color: var(--lux-text); }
.purse-real {
border: 0; border-radius: 20px;
background: radial-gradient(ellipse 80% 70% at 100% 0%, rgba(240, 201, 106, .16), transparent 60%), linear-gradient(180deg, #1a1f2d, #07090f);
box-shadow: 0 0 0 1.5px #e8c46a, 0 0 0 4px #07090f, 0 0 0 5px rgba(232, 196, 106, .4), 0 16px 34px rgba(0, 0, 0, .6);
}
.purse-real .purse-amount, .purse-play .purse-amount { font-family: var(--font-lux); font-weight: 400; }
.purse-real .purse-amount { background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.purse-play .purse-amount {
background: linear-gradient(180deg, #ffffff, #c8d0dc 45%, #7c869a 75%, #e9edf3);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.club-card { background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15)); border-color: rgba(232, 196, 106, .22); }
.club-card-top { align-items: center; gap: 10px; }
.club-card-emblem { flex-shrink: 0; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .6)); }
.club-card-name { flex: 1; min-width: 0; }
.club-card-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-card-amount { font-family: var(--font-display); background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.club-card-amount svg { flex-shrink: 0; }
/* จุดชิปในรายการเคลื่อนไหว: คงเป็น CSS (รายการยาว ไม่ใช้ SVG ทีละแถว) แต่เติมขอบหนาให้ดูเป็นชิป */
.feed .chip-dot, .wallet-tab .chip-dot {
display: inline-block; vertical-align: -2px;
box-shadow: 0 2px 0 #7a4e0a, 0 3px 4px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
}
@media (max-width: 520px) {
.purse-art svg { width: 48px; height: 48px; }
.purse-head .bonus-actions { width: 100%; }
.purse-head .bonus-actions .btn { flex: 1; }
}
/* ######################################################################
หน้าคลับ ฝาก-ถอน (เดิมคือไฟล์ app.lux-pages-3.css)
###################################################################### */
/* =====================================================================
แนว E พรีเมียม: หน้าคลับ (เข้าคลับ · การ์ดคลับ · ฝาก · ถอน · รายการเงิน)
วางต่อท้าย app.css (หลัง app.lux-pages-2.css)
===================================================================== */
/* ปุ่มทองที่กดไม่ได้: เดิมเป็นทองซีดจนดูเหมือนปุ่มเสีย เปลี่ยนเป็นปุ่มดำขอบทองจาง อ่านออกว่า "ยังกดไม่ได้" */
.btn-gold:disabled {
opacity: 1; filter: none; transform: none;
background: linear-gradient(180deg, #1c2130, #0b0d14); color: rgba(232, 196, 106, .55);
box-shadow: inset 0 0 0 1px rgba(232, 196, 106, .25);
}
.link-btn {
background: none; border: 0; padding: 0; cursor: pointer;
font: inherit; font-size: 13px; color: #c8b78f; text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--gold-2); }
.field-label { font-size: 14px; color: var(--ink-dim); }
/* ───────── เข้าคลับ ───────── */
.lux-join { position: relative; padding-right: 96px; }
.lux-join h2 { margin-top: 0; }
.lux-join-art { position: absolute; top: -14px; right: 18px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.lux-join .filters .input { flex: 1 1 180px; }
/* ───────── การ์ดคลับ ───────── */
.club-panel { padding: 18px; border-radius: 18px; margin-bottom: 14px; }
.club-panel.off { opacity: .75; }
.club-head { display: flex; align-items: center; gap: 12px; }
.club-head-emblem { flex-shrink: 0; margin: -6px 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
.club-head-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.club-head-name {
font-family: var(--font-display); font-size: 19px; color: var(--lux-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.club-head-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.club-head-meta .code { padding: 1px 7px; border-radius: 6px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(232, 196, 106, .18); }
.club-head-bal { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.club-head-bal > span { font-size: 12px; color: var(--ink-dim); }
.club-head-bal strong {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-lux); font-weight: 400; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums;
background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ฝาก / ถอน / ใช้โค้ด: แท็บชุดเดียว แผงที่เปิดอยู่เป็นทอง */
.club-seg {
display: flex; gap: 4px; padding: 4px; margin-top: 14px; border-radius: 12px;
background: rgba(0, 0, 0, .45); border: 1px solid var(--line);
}
.club-seg .seg {
flex: 1; padding: 10px 6px; border: 0; border-radius: 9px; cursor: pointer;
background: transparent; color: var(--ink-dim); font-family: var(--font-display); font-size: 15px;
}
.club-seg .seg:hover { color: var(--ink); }
.club-seg .seg.on { background: var(--lux-gold); color: #2a1a05; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 8px rgba(0, 0, 0, .45); }
.club-seg .seg:focus-visible { outline: 2px solid #e8c46a; outline-offset: 2px; }
.club-links { display: flex; justify-content: flex-end; gap: 16px; margin-top: 8px; font-size: 13px; }
.club-links a { color: #c8b78f; }
.club-panel > .form, .club-panel > .filters { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
/* ───────── ฝาก: ขั้นตอนจริง 3 ขั้น ───────── */
.cash-steps {
list-style: none; margin: 0; padding: 0; counter-reset: step;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.cash-steps li {
counter-increment: step; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
text-align: center; font-size: 12.5px; line-height: 1.4; color: var(--ink-dim);
}
.cash-steps li::before {
content: counter(step); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
font-family: var(--font-display); font-weight: 600; font-size: 14px; color: #2a1a05;
background: var(--lux-gold); box-shadow: 0 0 0 3px #07090f, 0 0 0 4px rgba(232, 196, 106, .4);
}
/* เส้นเชื่อมระหว่างขั้น */
.cash-steps li + li::after {
content: ""; position: absolute; top: 14px; right: calc(50% + 22px); width: calc(100% - 36px); height: 1px;
background: linear-gradient(90deg, rgba(232, 196, 106, .1), rgba(232, 196, 106, .5));
}
/* ───────── บัตรบัญชีธนาคาร (แทนพื้นน้ำตาลแดงของธีมเก่า) ───────── */
.dep-bank-card {
border-radius: 16px; overflow: hidden;
background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(40, 72, 130, .35), transparent 70%), linear-gradient(135deg, #1d2333, #0b0e17 70%);
border: 1px solid rgba(232, 196, 106, .18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 18px rgba(0, 0, 0, .45);
}
.dep-bank-name { font-size: 13px; color: #c8b78f; }
.dep-bank-no { background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dep-bank-owner { color: var(--lux-text); }
.dep-house:hover { border-color: rgba(232, 196, 106, .5); }
.dep-house.on { border-color: #e8c46a; box-shadow: 0 0 0 1px #e8c46a, 0 0 22px rgba(240, 201, 106, .18), 0 8px 18px rgba(0, 0, 0, .45); }
.dep-house:focus-visible { outline: 2px solid #e8c46a; outline-offset: 3px; }
.dep-check { display: none; }
.dep-house.on .dep-check {
display: grid; place-items: center; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
background: var(--lux-gold); box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.dep-house.on .dep-check::before {
content: ""; width: 9px; height: 5px; margin-top: -2px;
border: solid #2a1a05; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.dep-mine { cursor: default; }
/* ───────── ถอน ───────── */
.amount-row { display: flex; gap: 8px; }
.amount-row .input { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 20px; font-variant-numeric: tabular-nums; }
.amount-row .btn { flex-shrink: 0; }
/* ───────── รายการฝาก-ถอน (แทนตาราง) ───────── */
.cash-feed { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cash-item {
display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px;
background: linear-gradient(180deg, #171b27, #0b0e17); border: 1px solid var(--line);
box-shadow: inset 3px 0 0 var(--accent, #e8c46a), 0 8px 18px rgba(0, 0, 0, .4);
}
.cash-item.k-in { --accent: var(--pos); }
.cash-item.k-out { --accent: #e8c46a; }
.cash-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cash-kind { font-family: var(--font-display); font-weight: 600; color: var(--accent); }
.cash-club { flex: 1; min-width: 0; color: var(--ink-dim); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cash-amounts { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cash-baht { font-family: var(--font-display); font-size: 22px; color: var(--lux-text); font-variant-numeric: tabular-nums; }
.cash-baht small { font-size: 13px; color: var(--ink-dim); font-weight: 400; }
.cash-chips { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.cash-note { margin: 0; font-size: 13px; color: #9a8c6c; }
.cash-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.cash-id { font-size: 12px; color: #8d8268; font-variant-numeric: tabular-nums; }
.cash-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 520px) {
.lux-join { padding-right: 16px; }
.lux-join-art { top: -10px; right: 10px; }
.lux-join-art svg { width: 48px; height: 48px; }
.club-panel { padding: 14px; }
.club-head-emblem svg { width: 46px; height: auto; }
.club-head-name { font-size: 17px; }
.club-head-bal strong { font-size: 20px; }
.cash-steps li { font-size: 11.5px; }
.club-panel .row2 { grid-template-columns: 1fr; }
}
/* ######################################################################
บัญชีธนาคาร · ตัวเลขคำนวณ · กำหนดโอน (เดิมคือไฟล์ app.lux-pages-4.css)
###################################################################### */
/* =====================================================================
แนว E พรีเมียม: บัญชีธนาคารของฉัน (บัตรตัวอย่างสด) · ตัวเลขคำนวณชิป/บาท ตอนฝาก-ถอน
วางต่อท้าย app.css (หลัง app.lux-pages-3.css)
===================================================================== */
/* ───────── ตัวเลขคำนวณใต้ช่องยอด ───────── */
.cash-preview { font-size: 13px; color: #9a8c6c; font-variant-numeric: tabular-nums; }
.cash-preview b {
font-family: var(--font-display); font-size: 16px; font-weight: 600;
background: var(--lux-gold-v); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ───────── บัตรบัญชีใหญ่ (หน้าบัญชีธนาคาร) ───────── */
.bank-page { max-width: 560px; }
.bank-hero {
position: relative; aspect-ratio: 1.75; max-width: 420px; width: 100%;
align-content: end; gap: 4px; padding: 22px 24px;
border-radius: 20px; border: 0;
background:
radial-gradient(ellipse 70% 90% at 100% 0%, rgba(40, 72, 130, .55), transparent 65%),
repeating-linear-gradient(120deg, rgba(232, 196, 106, .035) 0 2px, transparent 2px 14px),
linear-gradient(135deg, #20283a, #0a0d15 72%);
box-shadow: 0 0 0 1.5px #e8c46a, 0 0 0 4px #07090f, 0 0 0 5px rgba(232, 196, 106, .4), 0 20px 40px rgba(0, 0, 0, .65);
}
/* ชิปการ์ดทอง */
.bank-hero-chip {
position: absolute; top: 24px; left: 24px; width: 44px; height: 34px; border-radius: 7px;
background:
linear-gradient(90deg, transparent 32%, rgba(90, 55, 5, .45) 32% 34%, transparent 34% 66%, rgba(90, 55, 5, .45) 66% 68%, transparent 68%),
linear-gradient(0deg, transparent 46%, rgba(90, 55, 5, .45) 46% 54%, transparent 54%),
var(--lux-gold);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 4px rgba(0, 0, 0, .5);
}
.bank-hero .dep-bank-name { font-size: 14px; }
.bank-hero .dep-bank-no { font-size: clamp(22px, 6.4vw, 30px); letter-spacing: .06em; }
.bank-hero .dep-bank-owner { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-hero.is-draft .dep-bank-no, .bank-hero.is-draft .dep-bank-owner, .bank-hero.is-draft .dep-bank-name { opacity: .55; }
.bank-lock {
position: absolute; top: 26px; right: 22px; padding: 2px 10px; border-radius: 999px; font-size: 12px;
color: #c8b78f; background: rgba(0, 0, 0, .45); border: 1px solid rgba(232, 196, 106, .3);
}
/* คำเตือนปกติ ไม่ใช่ข้อผิดพลาด: ใช้กรอบทองแทนกล่องแดง */
.dep-notice {
margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.6;
color: var(--lux-text); background: rgba(240, 201, 106, .07); border: 1px solid rgba(232, 196, 106, .3);
}
.dep-confirm { margin: 14px 0 4px; align-items: flex-start; line-height: 1.5; }
.dep-confirm input { margin-top: 3px; flex-shrink: 0; }
@media (max-width: 520px) {
.bank-hero { padding: 18px; }
.bank-hero-chip { top: 18px; left: 18px; width: 38px; height: 29px; }
.bank-lock { top: 20px; right: 16px; }
}
/* กำหนดเวลาที่คลับต้องโอนเงินถอน */
.cash-due {
margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5;
color: var(--lux-text); background: rgba(240, 201, 106, .07); border: 1px solid rgba(232, 196, 106, .25);
}
.cash-due b { color: var(--gold-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.cash-due.late { color: #ffb3ad; background: rgba(255, 122, 115, .08); border-color: rgba(255, 122, 115, .35); }
/* ######################################################################
โต๊ะขนาดคงที่ ทุกเกม (เดิมคือไฟล์ app.lux-table-fixed.css)
###################################################################### */
/* =====================================================================
โต๊ะขนาดคงที่ (หน้าเกมที่มีคลาส .tbl-fixed) วางต่อท้าย app.css
มือถือแนวตั้ง: โต๊ะกินพื้นที่ทั้งหมดเหนือแถบปุ่ม แถบปุ่มสูงคงที่แถวเดียวทุกช่วงของเกม
โต๊ะจึงไม่ยืด/หดตามช่วงลงเดิมพัน → ตัดสินใจ → ผล อีกต่อไป
===================================================================== */
/* บั๊กเดิม: กฎแถบเมนูล่างของแนว E (padding-bottom 92px) ทับหน้าเกม ทั้งที่แถบเมนูถูกซ่อนอยู่ */
@media (max-width: 720px) {
.shell:has(.room-page) > .content { padding-bottom: 0; }
}
/* ไพ่ของเราลุ้นที่ที่นั่ง (ทุกขนาดจอ) */
.lux-room .seat-slot.mine .squeeze { order: -3; gap: 0; position: relative; z-index: 4; margin-bottom: 2px; }
.lux-room .seat-slot.mine .sq-cards { gap: 6px; padding: 0; }
.lux-room .seat-slot.mine .sq-card,
.lux-room .seat-slot.mine .sq-card .pcard { --w: 60px; }
.lux-room .seat-slot.mine .sq-card { filter: drop-shadow(0 0 12px rgba(240, 201, 106, .35)); }
.lux-room .seat-slot.mine .sq-actions { display: none; } /* ปุ่ม "เปิดไพ่" อยู่ในแถบปุ่มแทน */
/* ปุ่มรอง (เปิดไพ่ ดับเบิล แยกไพ่): ดำขอบทอง ไม่ใช้เขียว (เขียว = อยู่/หยุด) */
.controls .decide-btns .dk-open { flex: .8; order: -1; }
.controls .decide-btns .dk-open,
.controls .decide-btns .dk-alt {
color: var(--gold-2);
background: linear-gradient(180deg, #232836, #0f121a);
box-shadow: inset 0 0 0 1px rgba(232, 196, 106, .45), 0 3px 0 #05070c;
}
/* สวิตช์ เปิดไพ่อัตโนมัติ บนแถบเครื่องมือโต๊ะ */
.table-tools .auto-open {
width: auto !important; padding: 0 10px; border-radius: 999px; cursor: pointer;
font: 600 12px var(--font-display); color: #c8b78f; white-space: nowrap;
}
.table-tools .auto-open.on { color: #2a1a05; background: var(--lux-gold); border-color: transparent; }
.table-tools .auto-open:has(input:focus-visible) { outline: 2px solid #e8c46a; outline-offset: 2px; }
@media (max-width: 720px) and (orientation: portrait) {
.room-page.tbl-fixed { --dock: calc(64px + env(safe-area-inset-bottom)); }
.room-page.tbl-fixed .table-col { position: relative; }
/* โต๊ะ: เว้นที่ให้แถบปุ่มเท่าเดิมเสมอ จึงขนาดคงที่ */
.shell:has(.room-page.tbl-fixed) .table-stage { flex: 1 1 auto; margin: 0 0 var(--dock) !important; }
/* แถบปุ่ม: ลอยติดล่าง สูงคงที่ ไม่ดันโต๊ะ */
.shell:has(.room-page.tbl-fixed) .table-col > .controls {
position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 20;
height: var(--dock); max-height: none !important; overflow: visible !important;
padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
display: flex; flex-direction: column; justify-content: center; gap: 0;
background: linear-gradient(180deg, rgba(6, 9, 15, .75), rgba(6, 9, 15, .96)) !important;
border-top: 1px solid rgba(232, 196, 106, .25) !important;
}
.room-page.tbl-fixed .controls .hint,
.room-page.tbl-fixed .controls .decide-hand { display: none !important; }
.room-page.tbl-fixed .controls > p, .room-page.tbl-fixed .controls .control-line { margin: 0; font-size: 13px; text-align: center; justify-content: center; }
.room-page.tbl-fixed .controls .result-line { margin: 0; padding: 10px 8px; }
/* ปุ่มทุกช่วงสูงเท่ากัน */
.room-page.tbl-fixed .controls .decide-btns .btn,
.room-page.tbl-fixed .controls .control-line .btn,
.room-page.tbl-fixed .controls .bp-go,
.room-page.tbl-fixed .bp-q { min-height: 52px; height: 52px; padding: 4px 6px; }
.room-page.tbl-fixed .controls .decide-btns { gap: 6px; }
.room-page.tbl-fixed .controls .decide-btns .btn { font-size: 15px; }
/* ลงเดิมพัน: แถวเดียว [ขั้นต่ำ][×2][×5][ลงเดิมพัน 10] */
.room-page.tbl-fixed .bet-picker .bp-mobile { display: block !important; }
.room-page.tbl-fixed .bp-quick { display: grid; grid-template-columns: 1fr 1fr 1fr 1.7fr; grid-template-rows: 52px; gap: 6px; }
.room-page.tbl-fixed .bp-quick .bp-go { grid-column: auto; font-size: 16px; border-radius: 14px; }
.room-page.tbl-fixed .bp-q {
border-radius: 14px; font: 700 15px var(--font-display); color: var(--gold-2);
background: linear-gradient(180deg, #232836, #0f121a);
box-shadow: inset 0 0 0 1px rgba(232, 196, 106, .45), 0 3px 0 #05070c;
}
.room-page.tbl-fixed .bp-q:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(232, 196, 106, .45), 0 1px 0 #05070c; }
/* แผงเลื่อนยอด (แบบร่าง E): ลอยขวาเหนือแถบปุ่ม ทับขอบโต๊ะเฉพาะช่วงลงเดิมพัน */
.room-page.tbl-fixed .bp-slider {
position: absolute; right: 8px; bottom: calc(100% + 8px); width: 104px; z-index: 21;
}
.room-page.tbl-fixed .bp-track,
.room-page.tbl-fixed .bp-track input[type=range] { min-height: 150px; }
/* ไพ่ลุ้นที่ที่นั่งบนมือถือ */
.lux-room .seat-slot.mine .sq-card,
.lux-room .seat-slot.mine .sq-card .pcard { --w: 50px; }
}
/* สรุปคนบนโต๊ะ ใต้ชื่อช่วงเกมกลางโต๊ะ */
.seat-count {
display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
font-size: 12px; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums;
}
.seat-count span { padding: 1px 9px; border-radius: 999px; background: rgba(0, 0, 0, .4); white-space: nowrap; }
.seat-count b { color: var(--gold-2); font-weight: 600; }
/* =====================================================================
เกมกระดานแทง (ไฮโล ฯลฯ): .tbl-fixed.dock-board
แผงล่างสูงกว่าเกมไพ่เพราะมีกระดานแทงอยู่ตลอด แต่ยังสูงคงที่ทุกช่วง
===================================================================== */
/* ผลย้อนหลังบนโต๊ะ มุมซ้ายบน (ทุกขนาดจอ) */
.table-road {
position: absolute; top: 10px; left: 10px; z-index: 6; max-width: calc(100% - 140px);
display: flex; flex-wrap: nowrap; gap: 3px; padding: 4px 6px; border-radius: 999px;
overflow-x: auto; scrollbar-width: none;
background: rgba(0, 0, 0, .45); border: 1px solid rgba(232, 196, 106, .2);
}
.table-road::-webkit-scrollbar { display: none; }
.table-road .road-dot { flex-shrink: 0; width: 20px; height: 20px; font-size: 9px; }
@media (max-width: 720px) and (orientation: portrait) {
.room-page.tbl-fixed.dock-board { --dock: calc(152px + env(safe-area-inset-bottom)); }
.shell:has(.room-page.dock-board) .table-col > .controls { justify-content: flex-start; gap: 5px; }
/* กระดาน: ความสูงช่องตายตัว */
.room-page.dock-board .bet-board { gap: 5px; flex-shrink: 0; }
.room-page.dock-board .bet-board .spot { min-height: 0; height: 44px; padding: 2px; }
.room-page.dock-board .hilo-singles .spot { height: 40px; }
.room-page.dock-board .spot-name { font-size: 14px; line-height: 1.1; }
.room-page.dock-board .spot-odds { font-size: 10px; }
/* แถวล่างสุด: สูงคงที่ สลับเนื้อหาตามช่วง */
/* แถวชิป/ผล/รอ: ลอยเหนือกระดาน (ทับขอบล่างโต๊ะ) แผงล่างจะเหลือแค่กระดาน */
.room-page.dock-board .dock-row {
position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); z-index: 21;
height: 48px; display: flex; align-items: center; justify-content: center;
padding: 0 8px; border-radius: 14px;
background: rgba(6, 9, 15, .86); border: 1px solid rgba(232, 196, 106, .3);
}
.room-page.dock-board .dock-row > * { width: 100%; }
.room-page.dock-board .dock-row > p { margin: 0; text-align: center; font-size: 13px; }
.room-page.dock-board .dock-row .result-line { padding: 8px; }
/* เลือกชิป: แถวชิปเลื่อนแนวนอน + ปุ่มล้าง (ไม่ใช้แผงเลื่อนลอย เพราะกระดานต้องเห็นทั้งหมด) */
.room-page.dock-board .bet-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.room-page.dock-board .bet-row .bp-mobile { display: none !important; }
.room-page.dock-board .bet-row .bp-desktop { display: flex !important; flex: 1; min-width: 0; }
.room-page.dock-board .bet-row .chip-rack {
flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 3px 2px;
}
.room-page.dock-board .bet-row .chip-rack::-webkit-scrollbar { display: none; }
.room-page.dock-board .bet-row .chip { flex-shrink: 0; width: 40px; height: 40px; font-size: 11px; }
.room-page.dock-board .bet-row .btn { flex-shrink: 0; height: 40px; }
/* ป้ายผลย้อนหลังบนมือถือ: เว้นที่ให้ปุ่มเสียง/อีโมจิทางขวา */
.room-page.tbl-fixed .table-road { top: 8px; left: 8px; max-width: calc(100% - 110px); }
}
/* ผลย้อนหลังน้ำเต้า (ไอคอน) บนโต๊ะ */
.table-road.road .road-nt { flex-shrink: 0; }
/* =====================================================================
เกมถือไพ่ (ไพ่แคง เก้าเก ไพ่เวียด ดัมมี่ โป๊กเกอร์): .tbl-fixed.dock-hand
แผงล่างสูงคงที่ต่อเกม: จองแถวไพ่ในมือไว้ด้านบน แถวปุ่มติดล่างเสมอ
ข้อความประกอบ/แผงเสริม (รอใคร, ไพ่ในมือ, เรส, ซื้อชิป, อันดับ) ลอยเหนือแผง ไม่ดันโต๊ะ
===================================================================== */
@media (max-width: 720px) and (orientation: portrait) {
.room-page.tbl-fixed.dock-hand { --dock: calc(var(--dock-h, 150px) + env(safe-area-inset-bottom)); }
.room-page.dh-kaeng { --dock-h: 64px; --hand-h: 70px; }
.room-page.dh-kaoke { --dock-h: 64px; } /* เก้าเก: ไพ่ลุ้น/เลือกเปลี่ยนที่ที่นั่ง แผงเหลือแถวเดียว */
.room-page.dh-poker { --dock-h: 64px; } /* โป๊กเกอร์: ไพ่ลุ้นที่ที่นั่ง แผงเหลือแถวปุ่มแถวเดียวแบบป๊อกเด้ง */
.room-page.dh-tl { --dock-h: 64px; --hand-h: 80px; }
.room-page.dh-dummy { --dock-h: 64px; --hand-h: 80px; }
.shell:has(.room-page.dock-hand) .table-col > .controls { justify-content: flex-end; gap: 6px; }
.room-page.dock-hand .controls > * { flex-shrink: 0; }
/* แถวลุ้นไพ่ในแผง: ไพ่กับปุ่มเปิดทีเดียวอยู่แถวเดียวกัน */
.room-page.dock-hand .controls .squeeze { flex-direction: row; justify-content: center; align-items: center; gap: 8px; }
.room-page.dock-hand .controls .sq-card,
.room-page.dock-hand .controls .sq-card .pcard { --w: 50px; }
.room-page.dock-hand .controls .sq-actions { flex-direction: column; gap: 2px; }
.room-page.dock-hand .controls .sq-actions .muted { display: none; }
.room-page.dock-hand .controls .swap-box { gap: 6px; }
/* ไพ่ของเราอยู่ในแผงแล้ว ไม่ต้องซ้ำบนโต๊ะระหว่างลุ้น */
.room-page.dh-kaeng:has(.controls .squeeze) .seat-slot.mine .hand,
.room-page.dh-kaoke:has(.controls .squeeze) .seat-slot.mine .hand,
.room-page.dh-poker:has(.controls .squeeze) .seat-slot.mine .hand { display: none; }
/* ข้อความ/แผงเสริมลอยเหนือแผงปุ่ม */
.room-page.dock-hand .controls .decide-hand { display: flex !important; }
.room-page.dock-hand .controls .pab-wait,
.room-page.dock-hand .controls .decide-hand,
.room-page.dock-hand .controls .swap-box > .muted {
position: absolute; left: 50%; bottom: calc(100% + 8px + var(--float-base, 0px)); transform: translateX(-50%); z-index: 22;
width: max-content; max-width: calc(100% - 24px); margin: 0; padding: 4px 12px; border-radius: 999px;
gap: 6px; align-items: center; font-size: 12.5px; text-align: center;
background: rgba(6, 9, 15, .82); border: 1px solid rgba(232, 196, 106, .3); color: var(--lux-text);
}
.room-page.dock-hand .controls > .whatif,
.room-page.dock-hand .controls > .standings,
.room-page.dock-hand .controls > details.buyin {
position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); z-index: 22;
max-height: 42vh; overflow: auto; background: rgba(11, 14, 23, .96);
}
/* แผงเรสโป๊กเกอร์ (แบบแอปโป๊กเกอร์): ปุ่มลัดเป็นแถวเดียวในแผงล่าง แทนที่แถวไพ่ชั่วคราว
แผงเลื่อนลอยขวาเหนือแผง แถวล่าง [ย้อนกลับ][เรส X] ไม่มีอะไรลอยทับที่นั่งของเรา */
.room-page.dock-hand .pab-raise-grid { display: block; }
.room-page.dock-hand .controls:has(.pab-raise) .squeeze { display: none; }
.room-page.dock-hand .pab-raise { gap: 8px; }
.room-page.dock-hand .pab-presets { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.room-page.dock-hand .pab-preset {
min-height: 0; height: 52px; padding: 2px; border-radius: 10px;
color: var(--gold-2); background: linear-gradient(180deg, #232836, #0f121a);
box-shadow: inset 0 0 0 1px rgba(232, 196, 106, .4), 0 2px 0 #05070c;
}
.room-page.dock-hand .pab-preset span { font-size: 12px; line-height: 1.15; }
.room-page.dock-hand .pab-preset small { font-size: 10.5px; }
.room-page.dock-hand .pab-preset.on { color: #2a1a05; background: var(--lux-gold); box-shadow: 0 0 0 1px #fff3c4, 0 2px 0 #05070c; }
.room-page.dock-hand .pab-preset.allin { color: #fff; background: linear-gradient(180deg, #d9453c, #a52a23); box-shadow: 0 2px 0 #5a120e; }
.room-page.dock-hand .pab-slider { position: absolute; right: 8px; bottom: calc(100% + 8px); width: 104px; z-index: 22; }
.room-page.dock-hand .pab-row .pab-btn { min-height: 52px; }
/* โป๊กเกอร์: ป้าย "รอ X ตัดสินใจ" ลอยทับที่นั่งของเราพอดี ซ่อนไว้ (ที่นั่งคนนั้นมีวงนับเวลา/ป้ายกำลังคิดอยู่แล้ว) */
.room-page.dh-poker .controls .pab-wait,
.room-page.dh-kaoke .controls .pab-wait,
.room-page.dh-kaoke .controls .swap-box > .muted { display: none; }
/* ไพ่บนที่นั่งตอนเปิดไพ่จบตา: ย่อให้เท่าที่นั่งอื่น ไม่ทับกลางโต๊ะ */
.room-page.dh-poker .seat-slot.mine .hand .pcard { --w: 40px; }
.room-page.dock-hand .tl-hand { padding-top: 12px; }
}
/* น้ำเต้า / บาคาร่า / เสือมังกร: ความสูงแผงตามจำนวนแถวของกระดาน */
@media (max-width: 720px) and (orientation: portrait) {
.room-page.tbl-fixed.dock-nt { --dock: calc(138px + env(safe-area-inset-bottom)); }
.room-page.dock-nt .bet-board .nt-spot { height: 60px; }
.room-page.tbl-fixed.dock-house { --dock: calc(118px + env(safe-area-inset-bottom)); }
.room-page.tbl-fixed.dock-house:has(.bet-board.dt) { --dock: calc(80px + env(safe-area-inset-bottom)); }
.room-page.dock-house .bet-board .spot { height: 50px; }
.room-page.dock-house .bet-board.dt .spot { height: 64px; }
}
/* =====================================================================
บิงโก: โครงเดิมเป็นแบบแอปอยู่แล้ว (ขานเลขติดบน กลางเลื่อนได้)
เพิ่มแค่ให้แผงล่างสูงคงที่ทุกช่วง แผ่นบิงโกจะได้ไม่ขยับขึ้นลงตอนเปลี่ยนช่วง
===================================================================== */
.bg-count .seat-count { justify-content: flex-start; margin-top: 2px; }
@media (max-width: 980px) {
.bingo-page .bg-controls {
flex: 0 0 auto; height: calc(68px + env(safe-area-inset-bottom)); max-height: none;
display: flex; flex-direction: column; justify-content: center;
padding: 6px 10px calc(6px + env(safe-area-inset-bottom)) !important; overflow: hidden;
}
.bingo-page .bg-controls .hint { display: none; }
.bingo-page .bg-controls .control-line { margin: 0; }
.bingo-page .bg-controls .result-line { margin: 0; padding: 8px; }
.bingo-page .bg-ctl-info { min-width: 0; }
.bingo-page .bg-ctl-info strong, .bingo-page .bg-ctl-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* =====================================================================
โป๊กเกอร์ (ลิมิต / No Limit): ไพ่ลุ้นที่ที่นั่งแบบป๊อกเด้ง แผงล่างแถวเดียว 64px
ตอนเรส: [½ กอง][เต็มกอง][ALL-IN][ย้อน][เรส X] ในแถวเดียว + แผงเลื่อนลอยขวา (เลือกยอดอื่นได้จากแผงเลื่อน)
===================================================================== */
@media (max-width: 720px) and (orientation: portrait) {
.room-page.dh-poker .pab-raise { gap: 0; }
.room-page.dh-poker .pab-raise-left { display: flex; gap: 4px; align-items: stretch; }
.room-page.dh-poker .pab-presets { flex: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.room-page.dh-poker .pab-preset:nth-child(1),
.room-page.dh-poker .pab-preset:nth-child(2),
.room-page.dh-poker .pab-preset:nth-child(4) { display: none; }
.room-page.dh-poker .pab-raise-left .pab-row { flex: 2.3; gap: 4px; width: auto; }
.room-page.dh-poker .pab-back { flex: 0 0 52px; padding: 0 2px; }
.room-page.dh-poker .pab-back span { font-size: 12px; }
.room-page.dh-poker .pab-raise-left .pab-btn span { font-size: 15px; }
}
/* ชิปเดิมพันของเรา: ย้ายไปซ้ายของรูป ไม่ทับไพ่ที่ลุ้นอยู่เหนือรูป (ทุกเกมที่ใช้โต๊ะคงที่) */
@media (max-width: 720px) and (orientation: portrait) {
.room-page.tbl-fixed .table-bet.mine {
left: calc(50% + var(--cx) * var(--rx));
top: calc(50% + var(--cy) * var(--ry));
transform: translate(calc(-100% - 30px), 8px);
}
}
/* ######################################################################
ประสิทธิภาพบนมือถือ
###################################################################### */
/* แสงวาบบนปุ่มทอง: เดิมวิ่งตลอดทุกปุ่มทั้งเว็บ (หน้าที่มีปุ่มทองเยอะจะกินแบตและกระตุก)
ตอนนี้วิ่งเองเฉพาะปุ่มหลักขนาดใหญ่ ปุ่มอื่นวาบครั้งเดียวตอนชี้เมาส์ */
.btn-gold::after { animation: none; transform: translateX(-160%) skewX(-20deg); }
.btn-gold:hover::after { animation: luxSheen 1.4s ease-out 1; }
.btn-gold.btn-lg::after, .bp-go::after { animation: luxSheen 5s ease-in-out infinite; }
.btn-gold:disabled::after { animation: none; }
/* พื้นหลังลาย: เดิมใช้ background-attachment: fixed ซึ่งทำให้วาดใหม่ทั้งจอทุกครั้งที่เลื่อน (Android)
และ iOS ไม่รองรับ ย้ายไปไว้ชั้นแยกที่ติดจอแทน หน้าตาเหมือนเดิม */
body { background: var(--bg); background-attachment: scroll; }
body::before {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(1100px 520px at 50% -8%, rgba(40, 72, 130, .38), transparent 65%),
radial-gradient(900px 500px at -10% 110%, rgba(19, 87, 58, .16), transparent 60%),
repeating-linear-gradient(60deg, rgba(212, 175, 90, .03) 0 1px, transparent 1px 30px),
repeating-linear-gradient(-60deg, rgba(212, 175, 90, .03) 0 1px, transparent 1px 30px);
}
/* ######################################################################
ให้รู้สึกเป็นแอปเกม: ไม่เลือกข้อความ ไม่มีเมนูกดค้าง ไม่มีกรอบไฮไลต์ตอนแตะ ไม่ดึงหน้าเด้ง ไม่ซูมตอนแตะสองครั้ง
(สคริปต์ใน App.razor กันคลิกขวา ลากรูป และซูมสองนิ้ว/Ctrl อีกชั้น)
###################################################################### */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
touch-action: manipulation; /* แตะสองครั้งไม่ซูม และปุ่มตอบสนองทันที ไม่หน่วง 300ms */
overscroll-behavior: none; /* ไม่ดึงลงเพื่อรีเฟรช / ไม่เด้งขอบแบบหน้าเว็บ */
}
body {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none; /* iOS: กดค้างไม่ขึ้นเมนูคัดลอก/บันทึกรูป */
-webkit-tap-highlight-color: transparent;
}
img, svg, a {
-webkit-user-drag: none;
}
/* ที่ยังต้องเลือก/คัดลอกได้ */
input, textarea, select, [contenteditable], .selectable, .code, .fair-page, .admin-page, .backoffice {
-webkit-user-select: text;
user-select: text;
-webkit-touch-callout: default;
}
/* ช่องพิมพ์บน iOS: ตัวอักษรต่ำกว่า 16px จะซูมเข้าเองตอนแตะ */
@media (max-width: 720px) {
input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select {
font-size: max(16px, 1em);
}
}
/* ######################################################################
เกมถือไพ่ (ไพ่แคง ไพ่เวียด ดัมมี่): โต๊ะเต็มจอ แผงล่างแถวเดียว 64px
ไพ่ในมือลอยทับขอบล่างของโต๊ะ (ตรงที่นั่งของเรา) แบบแอปไพ่ทั่วไป
ข้อความประกอบ (เลือกชุดได้/ลงไม่ได้, ไพ่ในมือ X แต้ม) เป็นป้ายเล็กเหนือแถวไพ่
###################################################################### */
@media (max-width: 720px) and (orientation: portrait) {
.room-page.dock-hand:has(.controls > .squeeze, .controls > .tl-hand) { --float-base: var(--hand-h, 0px); }
/* แถวไพ่ในมือ */
.room-page.dock-hand .controls > .squeeze,
.room-page.dock-hand .controls > .tl-hand {
position: absolute; left: 4px; right: 4px; bottom: calc(100% + 6px); z-index: 21; margin: 0;
}
.room-page.dock-hand .controls > .tl-hand { background: none; box-shadow: none; padding: 12px 2px 0; }
.room-page.dock-hand .controls > .tl-hand.my-turn .tl-card { filter: drop-shadow(0 0 6px rgba(240, 201, 106, .45)); }
.room-page.dh-kaeng .controls .sq-card,
.room-page.dh-kaeng .controls .sq-card .pcard { --w: 46px; }
/* ป้ายเหนือแถวไพ่ */
.room-page.dock-hand .controls > .tl-status {
position: absolute; left: 50%; transform: translateX(-50%); z-index: 22;
bottom: calc(100% + 8px + var(--hand-h, 0px));
width: max-content; max-width: calc(100% - 24px); margin: 0; padding: 3px 12px; border-radius: 999px;
background: rgba(6, 9, 15, .82); border: 1px solid rgba(232, 196, 106, .3);
}
.room-page.dock-hand .controls > .tl-status:empty { display: none; }
.room-page.dh-dummy .controls > .dm-hand-head {
position: absolute; left: 8px; right: 8px; z-index: 22; margin: 0;
bottom: calc(100% + 38px + var(--hand-h, 0px));
}
.room-page.dh-kaeng .controls .decide > .muted {
position: absolute; left: 50%; transform: translateX(-50%); z-index: 22;
bottom: calc(100% + 8px + var(--float-base, 0px));
width: max-content; max-width: calc(100% - 24px); padding: 3px 12px; border-radius: 999px; font-size: 12.5px;
background: rgba(6, 9, 15, .82); border: 1px solid rgba(232, 196, 106, .3);
}
/* ระหว่างถือไพ่ ที่นั่งของเราถูกแถวไพ่ทับอยู่แล้ว ซ่อนไว้ไม่ให้รก (ช่วงยังไม่แจกไพ่ยังเห็นตามปกติ) */
.room-page.dock-hand:has(.controls > .squeeze, .controls > .tl-hand) .seat-slot.mine,
.room-page.dock-hand:has(.controls > .squeeze, .controls > .tl-hand) .table-bet.mine { visibility: hidden; }
/* แถวปุ่มเดียว: ข้อความรอยาว ๆ ไม่ตัดขึ้นบรรทัดใหม่ */
.room-page.dock-hand .controls > p.muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-page.dock-hand .controls .control-line > div { min-width: 0; }
.room-page.dock-hand .controls .control-line strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
}