/* ==========================================================================
   GIAO DIỆN GAME Ô ĂN QUAN - CHUẨN TỶ LỆ PC & MOBILE (60FPS GPU ACCELERATED)
   ========================================================================== */

:root {
    --oaq-cream: #f4ebd6;
    --oaq-cream-dark: #e2d4b5;
    --oaq-gold: #deb053;
    --oaq-gold-bright: #f7d569;
    --oaq-gold-dim: #9f8149;
    --oaq-red-top: #ef4527;
    --oaq-red-bot: #cd2914;
    --oaq-blue-top: #1b567f;
    --oaq-blue-bot: #103958;
    --oaq-ink: #241a13;
    --oaq-font: 'Be Vietnam Pro', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background-color: #19130f;
    color: #fffaf0;
    font-family: var(--oaq-font);
    overflow-x: hidden;
}

button {
    font-family: inherit;
    cursor: pointer;
    user-select: none;
}

/* ================= KHUNG SÂN KHẤU CHÍNH (VIEWPORT GAME) ================= */
.oaq-viewport {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.35s ease;
}

/* Lớp phủ tối nhẹ ấm để chữ và bàn cờ nổi khối sắc nét */
.oaq-viewport::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 48%, rgba(28, 20, 15, 0.36) 0%, rgba(18, 12, 9, 0.72) 100%);
    pointer-events: none;
    z-index: 0;
}

.oaq-viewport.is-board-screen {
    height: 100dvh;
    max-height: 100dvh;
}

.oaq-viewport.is-board-screen::before {
    background: radial-gradient(circle at 50% 50%, rgba(26, 17, 13, 0.42) 0%, rgba(16, 10, 8, 0.68) 100%);
}

/* Chủ đề ánh sáng động từ Cửa hàng */
.oaq-viewport[data-theme="theme_dem_hoi"]::before {
    background: radial-gradient(circle at 50% 45%, rgba(15, 29, 58, 0.48) 0%, rgba(8, 14, 30, 0.80) 100%);
}
.oaq-viewport[data-theme="theme_lang_gom"]::before {
    background: radial-gradient(circle at 50% 45%, rgba(62, 38, 16, 0.34) 0%, rgba(28, 17, 8, 0.70) 100%);
}

.oaq-screen {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    min-height: 100dvh;
    margin: 0 auto;
    padding:
        max(12px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    display: none;
    flex-direction: column;
    justify-content: space-between;
}

.oaq-screen.active {
    display: flex;
}

/* ================= CÁC NÚT TRÒN KEM VIỀN VÀNG ĐẶC TRƯNG ================= */
.oaq-round-btn {
    position: relative;
    width: clamp(44px, 5.2vw, 56px);
    height: clamp(44px, 5.2vw, 56px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fbf5e6 0%, #eadcc1 75%, #dac7a3 100%);
    border: 2.5px solid #bfa477;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.42), inset 0 0 0 2px rgba(255, 255, 255, 0.6);
    color: #291e16;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.oaq-round-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.oaq-round-btn:active {
    transform: scale(0.94);
}

.oaq-round-btn svg {
    width: 50%;
    height: 50%;
    stroke: #291e16;
}

.oaq-round-btn.is-muted {
    opacity: 0.72;
}
.oaq-round-btn.is-muted::after {
    content: "";
    position: absolute;
    width: 62%;
    height: 2.5px;
    background: #c9301e;
    transform: rotate(-42deg);
    border-radius: 2px;
}

.oaq-dot-notify {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    background: #ef3b24;
    border: 2px solid #fff6e5;
    border-radius: 50%;
}

/* ================= HỘP TIỀN XU XANH VIỀN VÀNG ================= */
.oaq-coin-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: clamp(46px, 5.6vw, 58px);
    padding: 4px 7px 4px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, #133c5d 0%, #0b263d 100%);
    border: 2px solid var(--oaq-gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.18);
}

.oaq-coin-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe27a 0%, #dfa028 75%, #a76f0f 100%);
    border: 1.5px solid #fff0b3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.oaq-coin-icon::after {
    content: "";
    width: 7px;
    height: 7px;
    background: #2f2008;
    border: 1px solid #ffea9f;
}

.oaq-coin-amount {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 800;
    color: #ffffff;
    min-width: 44px;
    letter-spacing: 0.3px;
}

.oaq-coin-plus {
    width: clamp(34px, 4vw, 42px);
    height: clamp(34px, 4vw, 42px);
    border-radius: 50%;
    border: none;
    background: linear-gradient(180deg, #f9be2d 0%, #df930f 100%);
    color: #251704;
    font-size: 22px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.55);
}

/* ==========================================================================
   1. MÀN HÌNH SẢNH CHÍNH (LOBBY - GIỐNG 100% ẢNH MẪU 4)
   ========================================================================== */
.oaq-lobby-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.oaq-profile-box {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    padding: 4px 10px 4px 4px;
    border-radius: 18px;
    transition: background 0.2s;
}
.oaq-profile-box:hover {
    background: rgba(255, 245, 220, 0.08);
}

.oaq-avatar-ring {
    width: clamp(68px, 7.6vw, 94px);
    height: clamp(68px, 7.6vw, 94px);
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(145deg, #f9dc82, #bd862b);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.52);
    flex-shrink: 0;
}

.oaq-avatar-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #4d3214;
}

.oaq-profile-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.oaq-player-name {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    color: #fff9ec;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    gap: 6px;
}

.oaq-rank-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    background: linear-gradient(180deg, #fae9c8 0%, #ebd2a4 100%);
    border: 1.5px solid #c89f5d;
    border-radius: 7px;
    padding: 3px 12px;
    color: #a92818;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.oaq-exp-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.oaq-exp-bar {
    width: clamp(92px, 10vw, 128px);
    height: 12px;
    border-radius: 999px;
    background: rgba(236, 214, 179, 0.85);
    border: 1.5px solid #b58d52;
    overflow: hidden;
    padding: 1px;
}

.oaq-exp-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #b56a38 0%, #8f491f 100%);
    transition: width 0.4s ease;
}

.oaq-exp-next {
    font-size: 12px;
    font-weight: 700;
    color: #f3ead7;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.oaq-top-actions {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.1vw, 14px);
}

.oaq-top-divider {
    width: 1px;
    height: 38px;
    background: rgba(235, 200, 125, 0.36);
    margin: 0 4px;
}

/* Thân Sảnh 2 Cột cân xứng có đường kẻ vàng kim giữa */
.oaq-lobby-body {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(18px, 3vw, 44px);
    margin-top: 8px;
}

.oaq-center-ornament {
    height: 82%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.oaq-center-ornament::before,
.oaq-center-ornament::after {
    content: "";
    flex: 1;
    width: 1.5px;
    background: linear-gradient(180deg, rgba(222,176,83,0.12), rgba(222,176,83,0.68), rgba(222,176,83,0.12));
}

.oaq-diamond-knot {
    width: 18px;
    height: 18px;
    border: 2px solid var(--oaq-gold);
    transform: rotate(45deg);
    margin: 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.oaq-diamond-knot::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--oaq-gold);
}

/* Cột Trái Sảnh */
.oaq-lobby-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.oaq-folk-kicker {
    font-size: clamp(13px, 1.35vw, 18px);
    font-weight: 700;
    letter-spacing: 0.34em;
    color: #9ec0dc;
    text-transform: uppercase;
    margin-bottom: 6px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.oaq-main-logo-title {
    margin: 0;
    font-size: clamp(40px, 5.4vw, 74px);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: 0.02em;
    color: #ef6345;
    background: linear-gradient(180deg, #ff7c5c 0%, #e65235 60%, #c93b20 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.72));
}

.oaq-main-tagline {
    margin: 10px 0 14px;
    font-size: clamp(15px, 1.55vw, 22px);
    font-weight: 600;
    color: #fff7e8;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.oaq-hero-illustration {
    width: 100%;
    max-width: 540px;
    height: auto;
    pointer-events: none;
    margin-top: 2px;
}

/* Cột Phải Sảnh (Các Nút Chế Độ Chơi) */
.oaq-lobby-right {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.2vh, 22px);
    width: 100%;
    max-width: 560px;
    justify-self: center;
}

.oaq-mode-card {
    position: relative;
    width: 100%;
    border-radius: 22px;
    padding: clamp(18px, 2.6vh, 28px) clamp(20px, 2.4vw, 32px);
    display: flex;
    align-items: center;
    gap: 20px;
    color: #ffffff;
    text-align: left;
    border: 2.5px solid var(--oaq-gold);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 3px rgba(255, 232, 175, 0.25);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.oaq-mode-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55), inset 0 0 0 3px rgba(255, 232, 175, 0.42);
}

.oaq-mode-card.is-ai {
    background: linear-gradient(180deg, var(--oaq-red-top) 0%, var(--oaq-red-bot) 100%);
    min-height: clamp(96px, 14vh, 132px);
}

.oaq-mode-card.is-online {
    background: linear-gradient(180deg, var(--oaq-blue-top) 0%, var(--oaq-blue-bot) 100%);
    min-height: clamp(86px, 12vh, 114px);
    overflow: hidden;
}

/* Họa tiết vân sóng góc dưới nút Online giống ảnh mẫu */
.oaq-mode-card.is-online::before,
.oaq-mode-card.is-online::after {
    content: "";
    position: absolute;
    bottom: -24px;
    width: 68px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(222, 176, 83, 0.35);
    box-shadow: 0 0 0 7px transparent, 0 0 0 9px rgba(222, 176, 83, 0.25);
    pointer-events: none;
}
.oaq-mode-card.is-online::before { left: 6px; }
.oaq-mode-card.is-online::after  { right: 6px; }

.oaq-mode-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.oaq-mode-sep {
    width: 2px;
    height: 54px;
    background: rgba(255, 224, 150, 0.52);
    flex-shrink: 0;
}

.oaq-mode-texts {
    flex: 1;
}

.oaq-mode-title {
    font-size: clamp(20px, 2.1vw, 28px);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.oaq-mode-sub {
    font-size: clamp(13px, 1.2vw, 17px);
    opacity: 0.92;
    margin-top: 3px;
}

/* Nút chọn Độ khó Dễ / Vừa / Khó nằm ngay trên thẻ Chơi Ngay */
.oaq-diff-pill {
    position: relative;
    z-index: 3;
    background: rgba(255, 255, 255, 0.16);
    border: 2px solid #f4b76b;
    color: #ffffff;
    border-radius: 999px;
    padding: 9px 20px;
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s;
}
.oaq-diff-pill:hover {
    background: rgba(255, 255, 255, 0.26);
}

/* Hàng 2 Nút Kem Bên Dưới (Hai Người & Luật Chơi) */
.oaq-submodes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.oaq-cream-card {
    background: linear-gradient(180deg, #f6eedc 0%, #eadbc0 100%);
    border: 2px solid #c7af83;
    border-radius: 18px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #211710;
    text-align: left;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38);
    transition: transform 0.14s ease;
}
.oaq-cream-card:hover {
    transform: translateY(-2px);
}

.oaq-cream-sep {
    width: 1.5px;
    height: 40px;
    background: #cab99b;
}

.oaq-cream-title {
    font-size: clamp(16px, 1.45vw, 20px);
    font-weight: 800;
    color: #1d140e;
}

.oaq-cream-sub {
    font-size: clamp(12px, 1.05vw, 15px);
    color: #4f4133;
    margin-top: 2px;
}

/* ==========================================================================
   2. MÀN HÌNH BÀN CHƠI (GAMEPLAY - GIỐNG 100% ẢNH MẪU 1 & 2)
   ========================================================================== */
.oaq-board-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.oaq-hud-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Bảng điểm Đối thủ phía trên (Cờ xanh nền đen) */
.oaq-score-banner {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 7px 14px 7px 18px;
    border-radius: 999px;
    background: rgba(24, 21, 19, 0.92);
    border: 2px solid #6b6156;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.52);
}

.oaq-score-banner.is-player {
    background: rgba(31, 18, 14, 0.92);
    border-color: #e85337;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 14px rgba(232, 83, 55, 0.25);
}

.oaq-score-banner.active-turn {
    box-shadow: 0 0 0 2px rgba(247, 213, 105, 0.55), 0 8px 20px rgba(0, 0, 0, 0.6);
}

.oaq-score-label {
    font-size: clamp(15px, 1.65vw, 22px);
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #f4efe6;
    white-space: nowrap;
}

.oaq-score-banner.is-player .oaq-score-label {
    color: #f15b3e;
}

.oaq-score-divider {
    width: 1.5px;
    height: 26px;
    background: rgba(255, 255, 255, 0.2);
}

.oaq-score-badge {
    min-width: 58px;
    padding: 4px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 900;
    text-align: center;
    color: #ffffff;
}

.oaq-score-banner.is-player .oaq-score-badge {
    background: #3b2319;
}

/* Vùng Bàn Cờ Trung Tâm */
.oaq-board-stage {
    position: relative;
    width: 100%;
    max-width: 1120px;
    margin: auto;
    padding: 8px 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.oaq-chalk-board {
    position: relative;
    width: 100%;
    aspect-ratio: 2.52 / 1;
    border-radius: 17.3% / 50%;
    border: none;
    background: transparent;
    overflow: visible;
}

/* Lòng bàn cờ khớp khít 100% đường cung phấn 2 đầu Ô Quan */
.oaq-board-inner {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.32fr 5fr 1.32fr;
    background: rgba(24, 14, 9, 0.22);
    box-shadow: inset 0 0 28px rgba(10, 6, 3, 0.32);
}

/* Lớp Canvas vẽ đường kẻ bằng nét phấn vôi trắng sần bụi trên sân thật */
.oaq-chalk-canvas {
    position: absolute;
    left: -14px;
    top: -14px;
    width: calc(100% + 28px);
    height: calc(100% + 28px);
    pointer-events: none;
    z-index: 3;
}

/* Skin Bàn Cờ Động từ Cửa Hàng */
.oaq-chalk-board[data-board="board_san_dinh"] .oaq-board-inner {
    background: linear-gradient(180deg, rgba(146, 34, 18, 0.90), rgba(108, 22, 11, 0.94));
    box-shadow: inset 0 0 24px rgba(45, 8, 3, 0.55), 0 14px 34px rgba(0, 0, 0, 0.52);
}
.oaq-chalk-board[data-board="board_dem_trang"] .oaq-board-inner {
    background: linear-gradient(180deg, rgba(14, 34, 62, 0.92), rgba(9, 22, 43, 0.95));
    box-shadow: inset 0 0 26px rgba(4, 10, 24, 0.6), 0 14px 34px rgba(0, 0, 0, 0.58);
}
.oaq-chalk-board[data-board="board_bat_trang"] .oaq-board-inner {
    background: linear-gradient(180deg, #efe7d4 0%, #dfd3b8 100%);
    box-shadow: inset 0 0 20px rgba(120, 98, 65, 0.25), 0 14px 34px rgba(0, 0, 0, 0.52);
}

/* 2 Ô Quan Bán Nguyệt Hai Đầu (Vạch ngăn đã vẽ bằng nét phấn thật trên Canvas) */
.oaq-quan-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

/* Lưới 10 Ô Dân ở Giữa (2 Hàng x 5 Cột - Vạch chia ô vẽ bằng nét phấn thật trên Canvas) */
.oaq-dan-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
}

.oaq-dan-cell {
    position: relative;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transition: background 0.16s ease;
    min-width: 0;
    min-height: 0;
}

/* Khung gợi ý các ô Dân có sỏi đến lượt chạm (Giống hệt Ảnh Mẫu 2) */
.oaq-dan-cell.is-playable::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 10px;
    border: 2.2px solid rgba(196, 158, 96, 0.56);
    pointer-events: none;
    transition: all 0.18s ease;
}
.oaq-dan-cell.is-playable {
    cursor: pointer;
}
.oaq-dan-cell.is-playable:hover::before {
    border-color: rgba(247, 213, 105, 0.9);
    background: rgba(247, 213, 105, 0.06);
}

/* Ô đang được chọn sáng vàng rực + Mũi tên cong hai đầu bên dưới (Giống hệt Ảnh Mẫu 1) */
.oaq-dan-cell.is-selected::before {
    inset: 4px;
    border: 3.2px solid #f7d569;
    background: radial-gradient(circle, rgba(247, 213, 105, 0.18) 0%, rgba(247, 213, 105, 0.04) 100%);
    box-shadow: 0 0 18px rgba(247, 213, 105, 0.65), inset 0 0 12px rgba(247, 213, 105, 0.35);
}

.oaq-curved-arrow {
    position: absolute;
    bottom: -29px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 26px;
    pointer-events: none;
    z-index: 8;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.72));
}

.oaq-curved-arrow.is-top {
    bottom: auto;
    top: -29px;
    transform: translateX(-50%) scaleY(-1);
}

/* Hiệu ứng nháy ô khi Sỏi rơi vào hoặc Ăn quân */
.oaq-cell-flash-drop {
    animation: cellPulseDrop 0.28s ease-out;
}
.oaq-cell-flash-capture {
    animation: cellPulseCapture 0.5s ease-out;
}
@keyframes cellPulseDrop {
    0%   { background-color: rgba(255, 224, 130, 0.34); }
    100% { background-color: transparent; }
}
@keyframes cellPulseCapture {
    0%   { background-color: rgba(241, 91, 62, 0.55); }
    100% { background-color: transparent; }
}

/* Khung vuông cân đối giữ nguyên tỷ lệ tự nhiên cho từng viên sỏi cuội (không bao giờ méo hình) */
.oaq-pebble-cluster {
    position: relative;
    width: min(86%, 116px);
    aspect-ratio: 1 / 1;
    max-height: 82%;
    margin-bottom: 8%;
    pointer-events: none;
    flex-shrink: 0;
}

.oaq-pebble-cluster.is-quan-cluster {
    position: absolute;
    inset: 10%;
    width: auto;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
}

.oaq-pebble-img {
    position: absolute;
    height: auto;
    pointer-events: none;
    user-select: none;
    transition: transform 0.18s ease;
}

/* Viên Đá Quan Lớn Đất Nung Khắc Vòng Phấn Trắng Chân Thực 3D */
.oaq-quan-stone-img {
    position: relative;
    width: clamp(48px, 6.8vw, 90px);
    max-width: 78%;
    height: auto;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

/* Nhãn Tròn Đen Viền Vàng Hiển Thị Số Sỏi Góc Dưới Phải Ô */
.oaq-count-badge {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: clamp(24px, 2.7vw, 35px);
    height: clamp(24px, 2.7vw, 35px);
    border-radius: 50%;
    background: #1d1712;
    border: 2px solid #c9b07c;
    color: #ffffff;
    font-size: clamp(12px, 1.25vw, 17px);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.oaq-quan-cell.is-left .oaq-count-badge {
    right: 12px;
    bottom: 14px;
}
.oaq-quan-cell.is-right .oaq-count-badge {
    left: 12px;
    right: auto;
    bottom: 14px;
}

/* Thanh Điều Khiển Dưới Bàn Chơi */
.oaq-board-bottombar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 20px;
    min-height: 76px;
}

.oaq-action-zone {
    display: flex;
    align-items: center;
    justify-content: center;
}

.oaq-hint-text {
    margin: 0;
    font-size: clamp(15px, 1.65vw, 22px);
    font-weight: 700;
    color: #fbf5e8;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.oaq-dir-picker {
    display: none;
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
}
.oaq-dir-picker.active {
    display: inline-flex;
}

.oaq-dir-btn {
    width: clamp(56px, 6.2vw, 76px);
    height: clamp(56px, 6.2vw, 76px);
    border-radius: 50%;
    background: linear-gradient(180deg, #ee603d 0%, #d94625 100%);
    border: 3.5px solid #dab568;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.52);
    transition: transform 0.14s ease;
}
.oaq-dir-btn:hover {
    transform: scale(1.06);
}
.oaq-dir-btn:active {
    transform: scale(0.95);
}

.oaq-dir-label {
    font-size: clamp(17px, 1.8vw, 24px);
    font-weight: 800;
    color: #fff9ec;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

/* Viên sỏi thật bay khi diễn hoạt rải quân */
.oaq-flying-pebble {
    position: fixed;
    width: 26px;
    height: auto;
    pointer-events: none;
    z-index: 99;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.65));
    transition: left 0.185s cubic-bezier(0.22, 0.8, 0.36, 1), top 0.185s cubic-bezier(0.22, 0.8, 0.36, 1);
}

/* Hiệu ứng Bàn Tay Đập Đất & Lùa Hốt Ô Quan Dân Gian */
.oaq-slap-hand {
    position: fixed;
    height: auto;
    pointer-events: none;
    z-index: 120;
    user-select: none;
    will-change: left, top, transform, opacity;
}

.oaq-slap-vfx {
    position: fixed;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 115;
}

.oaq-slap-ring {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 3px solid rgba(250, 244, 232, 0.78);
    box-shadow: 0 0 14px rgba(255, 236, 196, 0.45);
    transform: translate(-50%, -50%) scale(0.35);
    animation: oaqSlapRing 0.44s cubic-bezier(0.16, 0.86, 0.32, 1) forwards;
}

.oaq-chalk-puff {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(252, 248, 240, 0.88) 0%, rgba(226, 212, 190, 0.45) 55%, rgba(200, 180, 155, 0) 100%);
    transform: translate(-50%, -50%) scale(0.5);
    animation: oaqChalkPuff 0.48s cubic-bezier(0.16, 0.85, 0.34, 1) forwards;
}

@keyframes oaqSlapRing {
    0% {
        opacity: 0.92;
        transform: translate(-50%, -50%) scale(0.32);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.45);
    }
}

@keyframes oaqChalkPuff {
    0% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(0.55);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1.85);
    }
}

.oaq-board-slap-shake {
    animation: oaqBoardSlapShake 0.24s ease-out;
}

@keyframes oaqBoardSlapShake {
    0%   { transform: translate(0, 0); }
    22%  { transform: translate(-3px, 4px); }
    48%  { transform: translate(3px, -2.5px); }
    74%  { transform: translate(-1.5px, 1.5px); }
    100% { transform: translate(0, 0); }
}

.oaq-score-quan-pop {
    animation: oaqScoreQuanPop 0.52s cubic-bezier(0.22, 1.28, 0.36, 1);
}

@keyframes oaqScoreQuanPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); box-shadow: 0 0 24px rgba(247, 213, 105, 0.72); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   3. MÀN HÌNH CỬA HÀNG 4 TAB (GIỐNG 100% ẢNH MẪU 3)
   ========================================================================== */
.oaq-shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.oaq-shop-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.oaq-plaque-title {
    background: linear-gradient(180deg, #f8e8c4 0%, #ebd29f 100%);
    border: 2.5px solid #b58d4d;
    border-radius: 10px;
    padding: 8px 34px;
    color: #23180f;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 900;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
}

.oaq-shop-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(196, 60, 35, 0.55);
}

.oaq-shop-tab {
    border-radius: 14px;
    padding: 13px 10px;
    background: #dfd3bc;
    border: 2px solid #b9a787;
    color: #261b12;
    font-size: clamp(14px, 1.35vw, 19px);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s ease;
}

.oaq-shop-tab.active {
    background: linear-gradient(180deg, #cb3e24 0%, #ab2b15 100%);
    border-color: var(--oaq-gold);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.oaq-shop-subhead {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 8px;
}

.oaq-shop-subhead h3 {
    margin: 0;
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 800;
    color: #fff6e3;
}

.oaq-shop-subhead span {
    color: #dfd2bc;
    font-size: clamp(13px, 1.2vw, 17px);
}

.oaq-shop-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(210px, 1fr));
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.oaq-skin-card {
    position: relative;
    border-radius: 16px;
    border: 3px solid #dfd3bc;
    background: #2b211a;
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    overflow: hidden;
    min-height: 192px;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.oaq-skin-card.is-selected {
    border-color: var(--oaq-gold-bright);
    box-shadow: 0 0 0 2px rgba(247, 213, 105, 0.45), 0 8px 20px rgba(0,0,0,0.55);
}

.oaq-skin-card-name {
    position: relative;
    z-index: 2;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}

.oaq-skin-lock {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(20, 15, 12, 0.72);
    color: #fff6e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.oaq-skin-preview {
    width: 100%;
    height: 92px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.oaq-skin-btn {
    position: relative;
    z-index: 2;
    width: 82%;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1.5px solid #cbb99a;
    background: #e9e2d4;
    color: #201710;
    font-size: 15px;
    font-weight: 800;
}

.oaq-skin-btn.is-locked {
    background: linear-gradient(180deg, #eab13b 0%, #cf8f1c 100%);
    border-color: #ffe08a;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

/* Thanh Chi Tiết Vật Phẩm Đang Chọn Bên Dưới */
.oaq-shop-detail-bar {
    background: linear-gradient(180deg, #efe4cd 0%, #e4d5b7 100%);
    border: 2px solid #cbb58d;
    border-radius: 16px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #221710;
    margin-top: 8px;
}

.oaq-shop-detail-info h4 {
    margin: 0 0 3px;
    font-size: 20px;
    font-weight: 900;
}
.oaq-shop-detail-info p {
    margin: 0;
    font-size: 15px;
    color: #544535;
}

.oaq-shop-main-cta {
    min-width: 220px;
    padding: 13px 24px;
    border-radius: 14px;
    border: 2px solid #bfb39d;
    background: #ded9cf;
    color: #201710;
    font-size: 17px;
    font-weight: 800;
}
.oaq-shop-main-cta.can-buy {
    background: linear-gradient(180deg, #eab13b 0%, #cf8f1c 100%);
    border-color: #a86f0d;
    color: #ffffff;
}
.oaq-shop-main-cta.can-equip {
    background: linear-gradient(180deg, #1b567f 0%, #103958 100%);
    border-color: var(--oaq-gold);
    color: #ffffff;
}

.oaq-shop-promo-bar {
    background: linear-gradient(180deg, #efe4cd 0%, #e4d5b7 100%);
    border: 2px solid #cbb58d;
    border-radius: 14px;
    padding: 9px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #221710;
    margin-top: 8px;
}

.oaq-promo-btn {
    background: linear-gradient(180deg, #1c557e 0%, #113a59 100%);
    border: 2px solid var(--oaq-gold);
    color: #ffffff;
    border-radius: 11px;
    padding: 8px 22px;
    font-size: 15px;
    font-weight: 800;
}

.oaq-shop-trust-note {
    align-self: center;
    background: rgba(226, 214, 190, 0.85);
    color: #3d3124;
    padding: 4px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    margin-top: 6px;
}

/* ==========================================================================
   MODALS DÂN GIAN (LUẬT 7 BƯỚC, NHẬT KÝ, TỔNG KẾT VÁN, HỒ SƠ, XÁC NHẬN MUA)
   ========================================================================== */
.oaq-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 8, 6, 0.78);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 200;
}
.oaq-modal-backdrop.open {
    display: flex;
}

.oaq-modal-box {
    width: 100%;
    max-width: 580px;
    max-height: 90dvh;
    overflow-y: auto;
    background: linear-gradient(180deg, #f8efd9 0%, #eadac0 100%);
    border: 3px solid #be954c;
    border-radius: 22px;
    padding: 22px 24px;
    color: #241911;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.68);
}

.oaq-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1.5px solid #d1be9c;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.oaq-modal-head h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    color: #9e2a17;
}

.oaq-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #bca580;
    background: #fff8eb;
    font-size: 20px;
    font-weight: 800;
    color: #3d2c1e;
}

.oaq-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid #bfa882;
    background: #fffcf5;
    font-size: 15px;
    color: #221710;
    margin-bottom: 10px;
}

.oaq-btn-primary {
    padding: 11px 22px;
    border-radius: 12px;
    border: 2px solid var(--oaq-gold);
    background: linear-gradient(180deg, #e74325 0%, #c42812 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

.oaq-btn-secondary {
    padding: 11px 20px;
    border-radius: 12px;
    border: 1.5px solid #b59f7b;
    background: #e4d6bc;
    color: #2a1d13;
    font-size: 15px;
    font-weight: 700;
}

/* Thông báo Toast nổi mượt */
.oaq-toast {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(28, 20, 14, 0.95);
    border: 2px solid var(--oaq-gold);
    color: #fff8ea;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 350;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}
.oaq-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Khối Bài viết Chuẩn SEO & EEAT phía dưới cho Google Bot & Người đọc tìm hiểu */
.oaq-seo-drawer {
    background: #140f0c;
    border-top: 1px solid rgba(222, 176, 83, 0.25);
    color: #dfd3be;
    padding: 28px clamp(16px, 4vw, 60px);
}
.oaq-seo-inner {
    max-width: 1060px;
    margin: 0 auto;
    line-height: 1.7;
    font-size: 15px;
}
.oaq-seo-inner h2, .oaq-seo-inner h3 {
    color: #f3c46b;
}

/* ==========================================================================
   TỐI ƯU CHUYÊN BIỆT CHO MOBILE & TABLET (XOAY NGANG LANDSCAPE & CẦM DỌC PORTRAIT)
   ========================================================================== */

/* 1. ĐIỆN THOẠI XOAY NGANG (MOBILE LANDSCAPE - Chuẩn vàng giống 100% ảnh gốc App Store) */
@media (orientation: landscape) and (max-height: 560px) {
    .oaq-screen {
        padding:
            max(6px, env(safe-area-inset-top))
            max(16px, env(safe-area-inset-right))
            max(6px, env(safe-area-inset-bottom))
            max(16px, env(safe-area-inset-left));
    }

    /* Sảnh chính xoay ngang: Giữ nguyên 2 cột ngang vừa khít 1 màn hình */
    .oaq-avatar-ring {
        width: 48px;
        height: 48px;
    }
    .oaq-player-name {
        font-size: 15px;
    }
    .oaq-rank-tag {
        font-size: 10.5px;
        padding: 2px 8px;
    }
    .oaq-exp-bar {
        width: 78px;
        height: 9px;
    }
    .oaq-exp-next {
        font-size: 10px;
    }
    .oaq-coin-pill {
        height: 38px;
        padding: 3px 5px 3px 10px;
        gap: 7px;
    }
    .oaq-coin-icon {
        width: 20px;
        height: 20px;
    }
    .oaq-coin-amount {
        font-size: 15px;
        min-width: 32px;
    }
    .oaq-coin-plus {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
    .oaq-round-btn {
        width: 36px;
        height: 36px;
        border-width: 2px;
    }
    .oaq-top-divider {
        height: 26px;
    }
    .oaq-lobby-body {
        grid-template-columns: 0.92fr auto 1.08fr;
        gap: 16px;
        margin-top: 2px;
    }
    .oaq-center-ornament {
        min-height: 160px;
    }
    .oaq-folk-kicker {
        font-size: 10.5px;
        margin-bottom: 2px;
    }
    .oaq-main-logo-title {
        font-size: clamp(28px, 8.5dvh, 42px);
    }
    .oaq-main-tagline {
        font-size: 12.5px;
        margin: 4px 0 6px;
    }
    .oaq-hero-illustration {
        max-width: min(270px, 66dvh);
    }
    .oaq-lobby-right {
        gap: 8px;
    }
    .oaq-mode-card {
        padding: 9px 14px;
        border-radius: 16px;
        gap: 12px;
    }
    .oaq-mode-card.is-ai,
    .oaq-mode-card.is-online {
        min-height: 54px;
    }
    .oaq-mode-icon {
        width: 30px;
        height: 30px;
    }
    .oaq-mode-sep {
        height: 34px;
    }
    .oaq-mode-title {
        font-size: 16px;
    }
    .oaq-mode-sub {
        font-size: 11.5px;
    }
    .oaq-diff-pill {
        padding: 5px 12px;
        font-size: 13px;
    }
    .oaq-submodes-grid {
        gap: 8px;
    }
    .oaq-cream-card {
        padding: 8px 12px;
        border-radius: 14px;
        gap: 10px;
    }
    .oaq-cream-sep {
        height: 28px;
    }
    .oaq-cream-title {
        font-size: 13.5px;
    }
    .oaq-cream-sub {
        font-size: 11px;
    }

    /* Bàn chơi xoay ngang: Khóa khít 100dvh, hiện đủ Thanh trên + Bàn cờ + Thanh dưới 1 hàng */
    .oaq-screen[data-screen="board"] {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }
    .oaq-board-topbar {
        gap: 8px;
    }
    .oaq-hud-group {
        gap: 8px;
    }
    .oaq-score-banner {
        padding: 4px 10px 4px 12px;
        gap: 9px;
    }
    .oaq-score-banner svg {
        width: 18px;
        height: 22px;
    }
    .oaq-score-label {
        font-size: 14px;
    }
    .oaq-score-divider {
        height: 18px;
    }
    .oaq-score-badge {
        min-width: 38px;
        padding: 2px 10px;
        font-size: 16px;
    }
    .oaq-board-stage {
        flex: 1;
        padding: 2px 0 14px;
    }
    .oaq-chalk-board {
        width: min(100%, calc((100dvh - 110px) * 2.52));
        aspect-ratio: 2.52 / 1;
    }
    .oaq-dan-cell {
        padding: 4px;
    }
    .oaq-count-badge {
        width: 21px;
        height: 21px;
        font-size: 11px;
        right: 4px;
        bottom: 4px;
        border-width: 1.5px;
    }
    .oaq-quan-cell.is-left .oaq-count-badge {
        right: 8px;
        bottom: 8px;
    }
    .oaq-quan-cell.is-right .oaq-count-badge {
        left: 8px;
        bottom: 8px;
    }
    .oaq-curved-arrow {
        bottom: -21px;
        height: 19px;
    }
    .oaq-curved-arrow.is-top {
        top: -21px;
    }
    .oaq-board-bottombar {
        grid-template-columns: auto 1fr;
        min-height: 44px;
        gap: 14px;
    }
    .oaq-hint-text {
        font-size: 13.5px;
    }
    .oaq-dir-picker {
        gap: 14px;
    }
    .oaq-dir-btn {
        width: 42px;
        height: 42px;
        border-width: 2.5px;
    }
    .oaq-dir-btn svg {
        width: 22px;
        height: 22px;
    }
    .oaq-dir-label {
        font-size: 15px;
    }

    /* Cửa hàng xoay ngang */
    .oaq-plaque-title {
        padding: 5px 20px;
        font-size: 16px;
    }
    .oaq-shop-tabs {
        margin-top: 6px;
        padding-bottom: 6px;
        gap: 8px;
    }
    .oaq-shop-tab {
        padding: 7px 8px;
        font-size: 13px;
    }
    .oaq-shop-subhead {
        margin: 4px 0;
    }
    .oaq-shop-subhead h3 {
        font-size: 16px;
    }
    .oaq-skin-card {
        min-height: 132px;
        padding: 6px 8px 8px;
        gap: 5px;
    }
    .oaq-skin-preview {
        height: 60px;
    }
    .oaq-skin-btn {
        padding: 5px 8px;
        font-size: 12.5px;
    }
    .oaq-shop-detail-bar {
        padding: 7px 14px;
        margin-top: 4px;
    }
    .oaq-shop-promo-bar,
    .oaq-shop-trust-note {
        display: none;
    }
}

/* 2. TABLET DỌC & MÀN HÌNH NHỎ DỌC */
@media (max-width: 960px) and (orientation: portrait) {
    .oaq-lobby-body {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .oaq-center-ornament {
        display: none;
    }
    .oaq-hero-illustration {
        max-width: 320px;
    }
    .oaq-shop-cards {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
    .oaq-board-bottombar {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px;
    }
}

/* 3. ĐIỆN THOẠI CẦM DỌC (MOBILE PORTRAIT <= 640px) */
@media (max-width: 640px) and (orientation: portrait) {
    .oaq-screen {
        padding:
            max(10px, env(safe-area-inset-top))
            10px
            max(12px, env(safe-area-inset-bottom))
            10px;
    }

    /* Sảnh chính cầm dọc gọn đẹp */
    .oaq-lobby-topbar {
        gap: 10px;
    }
    .oaq-avatar-ring {
        width: 52px;
        height: 52px;
    }
    .oaq-player-name {
        font-size: 16px;
    }
    .oaq-rank-tag {
        font-size: 11px;
        padding: 2px 8px;
    }
    .oaq-exp-bar {
        width: 80px;
        height: 9px;
    }
    .oaq-top-actions {
        width: 100%;
        justify-content: space-between;
        gap: 6px;
    }
    .oaq-top-divider {
        display: none;
    }
    .oaq-coin-pill {
        height: 40px;
        padding: 3px 5px 3px 10px;
        gap: 6px;
    }
    .oaq-coin-amount {
        font-size: 16px;
        min-width: 32px;
    }
    .oaq-coin-plus {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }
    .oaq-round-btn {
        width: 38px;
        height: 38px;
        border-width: 2px;
    }
    .oaq-folk-kicker {
        font-size: 11px;
        letter-spacing: 0.22em;
    }
    .oaq-main-logo-title {
        font-size: 38px;
    }
    .oaq-main-tagline {
        font-size: 14px;
        margin: 6px 0 10px;
    }
    .oaq-hero-illustration {
        max-width: 255px;
    }
    .oaq-mode-card {
        padding: 14px 16px;
        gap: 12px;
        border-radius: 18px;
    }
    .oaq-mode-card.is-ai {
        min-height: 78px;
    }
    .oaq-mode-card.is-online {
        min-height: 72px;
    }
    .oaq-mode-sep {
        height: 40px;
    }
    .oaq-mode-title {
        font-size: 18px;
    }
    .oaq-diff-pill {
        padding: 7px 14px;
        font-size: 14px;
    }
    .oaq-submodes-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .oaq-cream-card {
        padding: 12px 10px;
        gap: 8px;
        border-radius: 14px;
    }
    .oaq-cream-sep {
        height: 30px;
    }
    .oaq-cream-title {
        font-size: 14px;
    }
    .oaq-cream-sub {
        font-size: 11.5px;
    }

    /* Bàn chơi cầm dọc: Không tràn nút ||, không gãy chữ MÁY · DỄ, ô Dân rộng rãi */
    .oaq-screen[data-screen="board"] {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }
    .oaq-board-topbar {
        gap: 5px;
        flex-wrap: nowrap;
    }
    .oaq-hud-group {
        gap: 5px;
        flex-shrink: 0;
    }
    .oaq-board-topbar .oaq-round-btn {
        width: 36px;
        height: 36px;
    }
    .oaq-board-topbar .oaq-score-banner {
        padding: 4px 8px 4px 10px;
        gap: 6px;
        min-width: 0;
    }
    .oaq-board-topbar .oaq-score-banner svg {
        width: 15px;
        height: 22px;
        flex-shrink: 0;
    }
    .oaq-board-topbar .oaq-score-label {
        font-size: 13px;
    }
    .oaq-board-topbar .oaq-score-divider {
        height: 18px;
    }
    .oaq-board-topbar .oaq-score-badge {
        min-width: 30px;
        padding: 2px 8px;
        font-size: 15px;
    }

    .oaq-board-stage {
        padding: 10px 0 28px;
    }
    .oaq-chalk-board {
        aspect-ratio: 1.80 / 1;
        border-radius: 14.5% / 50%;
    }
    .oaq-board-inner {
        grid-template-columns: 1.02fr 5fr 1.02fr;
    }
    .oaq-dan-cell {
        padding: 3px;
    }
    .oaq-dan-cell.is-playable::before {
        inset: 3px;
        border-radius: 7px;
    }
    .oaq-dan-cell.is-selected::before {
        inset: 2.5px;
        border-width: 2.6px;
    }
    .oaq-pebble-cluster {
        width: 92%;
        margin-bottom: 14px;
    }
    .oaq-quan-stone-img {
        width: 44px;
        max-width: 84%;
    }
    .oaq-count-badge {
        width: 19px;
        height: 19px;
        font-size: 10.5px;
        right: 3px;
        bottom: 3px;
        border-width: 1.5px;
    }
    .oaq-quan-cell.is-left .oaq-count-badge {
        right: 6px;
        bottom: 7px;
    }
    .oaq-quan-cell.is-right .oaq-count-badge {
        left: 6px;
        bottom: 7px;
    }
    .oaq-curved-arrow {
        bottom: -24px;
        height: 20px;
    }
    .oaq-curved-arrow.is-top {
        top: -24px;
    }

    .oaq-board-bottombar {
        gap: 12px;
        padding-bottom: 6px;
    }
    .oaq-board-bottombar .oaq-score-banner {
        padding: 5px 14px;
        gap: 10px;
    }
    .oaq-board-bottombar .oaq-score-badge {
        min-width: 42px;
        padding: 2px 12px;
        font-size: 18px;
    }
    .oaq-hint-text {
        font-size: 14px;
        padding: 0 6px;
    }
    .oaq-dir-btn {
        width: 54px;
        height: 54px;
    }
    .oaq-dir-label {
        font-size: 16px;
    }

    /* Cửa hàng cầm dọc */
    .oaq-plaque-title {
        padding: 6px 18px;
        font-size: 17px;
    }
    .oaq-shop-tabs {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .oaq-shop-tab {
        padding: 10px 8px;
        font-size: 13.5px;
    }
    .oaq-shop-subhead {
        flex-wrap: wrap;
        gap: 6px;
    }
    .oaq-shop-detail-bar {
        flex-direction: column;
        text-align: center;
        padding: 12px;
    }
    .oaq-shop-main-cta {
        width: 100%;
    }
    .oaq-shop-promo-bar {
        flex-direction: column;
        text-align: center;
    }
}