/*
 * โครงรอบหน้า — หัวเว็บ ลิ้นชักเมนูซ้าย แถบเมนูด่วนของมือถือ
 *
 * มาร์กอัปและ CSS หลักอยู่ใน lobby/style.css (.site-header, .insidebarleft, #account-actions-mobile)
 * ไฟล์นี้ทับเฉพาะจุดที่ทำให้สามส่วนนี้พูดภาษาเดียวกับหน้าใน (member.css):
 *   - สีตัวอักษรที่ผูกกับธีมน้ำเงิน (#b8c8e8 #d0d8f0 #a0aac0) → ตัวแปรสีตัวอักษรของธีม
 *   - เมนูที่กำลังอยู่ต้องรู้ว่าอยู่หน้าไหน (ของเดิมไม่มีสถานะ active เลย)
 *   - ปุ่มแฮมเบอร์เกอร์ของเดิมกระดิกไม่หยุด (animation infinite) — การเคลื่อนไหวต้องบอกสถานะ
 *     จึงเหลือแค่เปลี่ยนเป็นกากบาทตอนเปิด
 *   - ลิ้นชักมีกล่องเบอร์+ยอดเงินของสมาชิก และตัดเส้นเรืองแสงขอบขวาของเดิม (box-shadow 6 ชั้น)
 */

/* ── หัวเว็บ ─────────────────────────────────────────────────── */

.site-header__hamburger span {
    animation: none !important;
}

.site-header__hamburger span:first-child,
.site-header__hamburger span:nth-child(3) {
    width: 20px;
}

.site-header__hamburger span:nth-child(2) {
    width: 25px;
}

.site-header__nav-item {
    color: var(--ink-soft);
    font-weight: 500;
}

.site-header__nav-item.router-link-exact-active {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.site-header__nav-item.router-link-exact-active i {
    color: var(--gold-light) !important;
    -webkit-text-fill-color: var(--gold-light) !important;
}

.site-header__cta-btn--outline {
    color: var(--ink);
}

.site-header__refresh-btn {
    color: var(--ink-muted);
}

.site-header__phone,
.site-header__balance {
    font-variant-numeric: tabular-nums;
}

/* เงินเข้า — แสงทองแผ่ออกจากตัวเลขครั้งเดียวแล้วหาย (layout ใส่ class is-up 1.4 วิ) */
.site-header__balance.is-up #wallet,
.drawer-user__balance.is-up {
    animation: balance-up 1.2s var(--m-ease) both;
}

@keyframes balance-up {
    0%   { color: var(--gold-light); text-shadow: 0 0 0 rgba(var(--m-accent-rgb), 0); transform: scale(1); }
    18%  { text-shadow: 0 0 18px rgba(var(--m-accent-rgb), .9); transform: scale(1.08); }
    100% { color: inherit; text-shadow: 0 0 0 rgba(var(--m-accent-rgb), 0); transform: scale(1); }
}

.site-header__balance #wallet,
.drawer-user__balance { display: inline-block; }

/* บรรทัดแยกกระเป๋า/ในเกม ใต้ยอดรวมในลิ้นชัก — โผล่เฉพาะตอนมีเงินในเกม */
.drawer-user__split {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

/* ── เปลี่ยนหน้าแบบมีทิศทาง — เข้าหน้าลูกเลื่อนจากขวา กลับเลื่อนจากซ้าย (app.vue + middleware/direction) ── */

.page-forward-enter-active,
.page-forward-leave-active,
.page-back-enter-active,
.page-back-leave-active {
    transition: opacity .18s var(--m-ease), transform .24s var(--m-ease);
}

.page-forward-enter-from { opacity: 0; transform: translateX(28px); }
.page-forward-leave-to   { opacity: 0; transform: translateX(-14px); }
.page-back-enter-from    { opacity: 0; transform: translateX(-28px); }
.page-back-leave-to      { opacity: 0; transform: translateX(14px); }

/* หน้าที่มี animation เข้าของตัวเอง (m-in) ไม่ต้องเล่นซ้อน — ไม่งั้นเลื่อนเฉียง */
.page-forward-enter-active :is(.m-page, .lt-page, .lt-bet),
.page-back-enter-active :is(.m-page, .lt-page, .lt-bet) {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .page-forward-enter-active,
    .page-forward-leave-active,
    .page-back-enter-active,
    .page-back-leave-active { transition: opacity .12s; }

    .page-forward-enter-from,
    .page-forward-leave-to,
    .page-back-enter-from,
    .page-back-leave-to { transform: none; }

    .site-header__balance.is-up #wallet,
    .drawer-user__balance.is-up { animation: none; }
}

/* ── ลิ้นชักเมนูซ้าย ─────────────────────────────────────────── */

.insidebarleft {
    width: 292px;
    left: -300px;
    border-right: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 8px 0 40px rgba(0, 0, 0, .5);
    overflow-y: auto;
}

.insidebarleft.active::before,
.insidebarleft.active::after {
    display: none;
}

.insidebarleft > a {
    padding: 22px 22px 12px;
    border-bottom: 0;
}

.drawer-user {
    margin: 4px 14px 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid var(--m-line);
}

.drawer-user__phone {
    display: block;
    font-size: var(--text-sm);
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}

.drawer-user__balance {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gold-light);
}

.drawer-user__balance small {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ink-muted);
}

.insidebarleft ul {
    padding: 6px 14px 20px;
}

.insidebarleft li a,
.insidebarleft li button {
    padding: 12px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink-soft);
}

.insidebarleft i {
    width: 34px;
    margin-right: 6px;
    opacity: .8;
}

.insidebarleft li a.router-link-exact-active {
    background: rgba(var(--m-accent-rgb), .14);
    color: var(--gold-light);
}

.insidebarleft li a.router-link-exact-active i {
    color: var(--gold-light);
    -webkit-text-fill-color: var(--gold-light);
    opacity: 1;
}

.overlaysidebar {
    background: rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ── แถบเมนูด่วนของมือถือ ────────────────────────────────────── */

#account-actions-mobile .-left-wrapper,
#account-actions-mobile .-right-wrapper {
    border-top: 2px solid rgba(255, 255, 255, .4);
}

#account-actions-mobile .-item-wrapper .-text {
    font-size: 13px;
    font-weight: 500;
}

.-selected h5 {
    font-size: 13px;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .insidebarleft,
    .site-header__hamburger span {
        transition-duration: .001ms !important;
    }
}