/**
 * Giao diện Mobile — chỉ áp dụng khi js/mobile.js gắn lớp .mobile vào <html>.
 * Bố cục chơi ngang: bàn chiếm gần hết màn hình, nút điều khiển nằm ở mép trong tầm ngón cái.
 */

html.mobile, html.mobile body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}
html.mobile body { position: fixed; inset: 0; }
html.mobile #canvas-container { touch-action: none; }
html.mobile button, html.mobile select, html.mobile input { touch-action: manipulation; }

/* ---------- Thanh trên: nút menu + bảng điểm thu gọn ---------- */
html.mobile .top-bar {
    height: 36px;
    padding: 4px calc(8px + env(safe-area-inset-left)) 0 calc(8px + env(safe-area-inset-left));
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, rgba(10, 14, 22, 0.92) 0%, rgba(10, 14, 22, 0) 100%);
}
html.mobile .scoreboard-container { gap: 6px; margin: 0 auto; }
html.mobile .player-card {
    min-width: 0;
    padding: 2px 8px;
    border-radius: 9px;
    border-width: 1.5px;
    max-width: 38vw;
}
html.mobile .player-card.active-turn { transform: none; box-shadow: 0 0 8px var(--gold-glow); }
html.mobile .ball-indicator { width: 14px; height: 14px; min-width: 14px; flex-shrink: 0; margin-right: 6px; }
html.mobile .player-name {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 24vw;
}
html.mobile .player-stats { display: none; }
html.mobile .player-info { flex: 1 1 auto; min-width: 0; overflow: hidden; }
html.mobile .score-badge { flex-shrink: 0; }
html.mobile .score-badge { font-size: 18px; margin-left: 6px; min-width: 22px; }
html.mobile .match-header { padding: 2px 8px; border-radius: 8px; }
html.mobile .match-title { font-size: 9px; letter-spacing: 0.5px; }
html.mobile .target-score { font-size: 9px; }

.m-round-btn {
    width: 32px; height: 32px; min-width: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 16px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

/* ---------- Menu ☰ ---------- */
.m-drawer {
    position: absolute;
    top: 40px;
    left: calc(8px + env(safe-area-inset-left));
    width: min(320px, 70vw);
    max-height: calc(100% - 50px);
    overflow-y: auto;
    background: rgba(14, 19, 30, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 10px;
    z-index: 60;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.m-drawer.hidden { display: none; }
.m-drawer-title { font-size: 12px; font-weight: 800; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; }
html.mobile .m-drawer .m-drawer-group { display: flex; flex-wrap: wrap; gap: 6px; }
html.mobile .m-drawer .select-control { width: 100%; font-size: 14px; padding: 9px 10px; }
html.mobile .m-drawer .btn-icon { font-size: 13px; padding: 9px 12px; }
html.mobile .m-drawer .camera-modes { width: 100%; justify-content: space-between; }
html.mobile .m-drawer .cam-btn { flex: 1; padding: 8px 4px; font-size: 12px; }

/* ---------- Thông báo & huy hiệu ---------- */
html.mobile .banner-container { top: 40px; max-width: 70vw; }
html.mobile .event-banner { font-size: 12px; padding: 5px 14px; }
html.mobile .online-room-badge { font-size: 11px; padding: 3px 10px; }
html.mobile .ai-status-badge { top: 40px; right: 120px; font-size: 11px; padding: 4px 10px; }
html.mobile .side-card {
    top: 42px; left: 78px; width: min(250px, 42vw);
    padding: 8px 10px; max-height: 55vh; overflow-y: auto;
}
html.mobile .card-title { font-size: 11px; margin-bottom: 4px; }
html.mobile .card-desc { font-size: 11px; margin-bottom: 6px; }
html.mobile .side-card .btn-group { flex-wrap: wrap; gap: 4px; }
html.mobile .side-card .btn-small { font-size: 11px; padding: 5px 8px; }

.m-thick-pill {
    position: absolute;
    left: 50%;
    bottom: 42px;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    background: rgba(10, 14, 22, 0.8);
    border: 1px solid rgba(245, 158, 11, 0.5);
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 15;
}

/* ---------- Thanh dưới: chỉ còn tinh chỉnh ngắm (giữa) và lực + chọc (phải) ---------- */
html.mobile .bottom-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0; top: 0;
    padding: 0;
    background: none;
    pointer-events: none;
    display: block;
}
html.mobile .center-controls {
    position: absolute;
    left: 50%;
    bottom: calc(4px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    gap: 4px;
    pointer-events: auto;
}
html.mobile .fine-aim-group { padding: 2px 4px; gap: 4px; border-radius: 16px; }
html.mobile #btn-aim-left, html.mobile #btn-aim-right {
    width: 52px; height: 30px; font-size: 16px; padding: 0; border-radius: 14px;
}
/* Biểu cảm online: cột dọc bên trái, phía trên nút Ép-phê (không đè dòng độ dày cắt bi) */
html.mobile .online-emote-bar {
    position: absolute;
    transform: none;
    left: calc(14px + env(safe-area-inset-left));
    bottom: calc(118px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
    border-radius: 14px;
}
html.mobile .online-emote-bar.hidden { display: none; }
html.mobile .emote-btn { font-size: 17px; padding: 2px 6px; }

html.mobile .power-controls {
    position: absolute;
    right: calc(8px + env(safe-area-inset-right));
    top: 40px;
    bottom: calc(6px + env(safe-area-inset-bottom));
    width: 100px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}
html.mobile .power-meter-box {
    flex: 1;
    min-height: 0;
    padding: 6px 8px;
    border-radius: 12px;
    width: 64px;
}
html.mobile .power-meter-box .widget-title { font-size: 9px; margin-bottom: 2px; }
html.mobile .power-track { flex: 1; height: auto; min-height: 60px; width: 34px; border-radius: 12px; margin: 4px 0; }
html.mobile .power-fill { border-radius: 12px; }
html.mobile .power-val-label { font-size: 12px; }
html.mobile #btn-shoot {
    width: 92px; height: 92px; min-height: 92px;
    border-radius: 50%;
    padding: 0;
    font-size: 17px;
}

/* ---------- Nút mở "Điều khiển cơ" (cột trái) ---------- */
.m-spin-btn {
    position: absolute;
    left: calc(8px + env(safe-area-inset-left));
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: 64px;
    padding: 6px 4px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: var(--card-bg);
    color: var(--text-main);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    cursor: pointer;
    z-index: 20;
}
.m-mini-ball {
    width: 32px; height: 32px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0%, #dcdcdc 50%, #999 100%);
    position: relative; display: block;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.45);
}
.m-mini-tip {
    position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; margin: -4px 0 0 -4px;
    border-radius: 50%; background: #e53e3e; border: 1px solid #fff;
}
.m-spin-label { font-size: 10px; font-weight: 700; color: var(--text-muted); }
.m-elev-label { font-size: 10px; color: #38bdf8; font-weight: 700; }

/* ---------- Bảng "Điều khiển cơ" trượt từ dưới lên ---------- */
.m-sheet {
    position: absolute;
    left: calc(78px + env(safe-area-inset-left));
    right: 118px;
    bottom: calc(6px + env(safe-area-inset-bottom));
    max-height: calc(100% - 46px);
    background: rgba(14, 19, 30, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    z-index: 50;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
    display: flex; flex-direction: column;
}
.m-sheet.hidden { display: none; }
.m-sheet-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 8px 0 12px;
    font-size: 11px; font-weight: 800; color: var(--gold); letter-spacing: 1px; text-transform: uppercase;
}
.m-sheet-head .m-round-btn { width: 28px; height: 28px; min-width: 28px; font-size: 13px; }
.m-sheet-body {
    display: flex;
    gap: 8px;
    padding: 6px 8px 8px;
    overflow-x: auto;
    overflow-y: auto;
    align-items: stretch;
}
html.mobile .m-sheet .widget-card { padding: 8px; border-radius: 12px; min-width: 128px; flex: 0 0 auto; justify-content: flex-start; }
html.mobile .m-sheet .widget-title { font-size: 9px; margin-bottom: 4px; text-align: center; }
html.mobile .m-sheet .english-readout { font-size: 10px; margin: 4px 0; text-align: center; }
html.mobile .m-sheet .btn-small { font-size: 11px; padding: 5px 8px; }
html.mobile .m-sheet .elevation-card { min-width: 150px; }
html.mobile .m-sheet .elevation-quick-buttons .elev-btn { padding: 6px 4px; font-size: 11px; }
html.mobile .m-sheet .thickness-card {
    flex: 1 1 260px;
    min-width: 240px;
    margin: 0;
    padding: 8px;
    border-radius: 12px;
}
html.mobile .m-sheet .thickness-header { flex-wrap: wrap; gap: 4px; }
html.mobile .m-sheet .thickness-title { font-size: 10px; }
html.mobile .m-sheet .thickness-badge { font-size: 10px; }
html.mobile .m-sheet .thickness-quick-buttons { flex-wrap: wrap; gap: 4px; }
html.mobile .m-sheet .thick-btn, html.mobile .m-sheet .thick-btn-side { padding: 7px 8px; font-size: 12px; min-width: 38px; }

/* ---------- Hộp thoại ---------- */
html.mobile .modal-content {
    width: 94vw;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 12px 14px;
    border-radius: 12px;
}
html.mobile .modal-title { font-size: 15px; }
html.mobile .modal-body { font-size: 12px; }
html.mobile .form-input { font-size: 16px; } /* >=16px để iOS không tự phóng to khi gõ */
html.mobile .big-room-code { font-size: 32px; }

/* ---------- Nhắc xoay ngang (màn hình dọc) ---------- */
.m-rotate { display: none; }
html.mobile.m-portrait .m-rotate {
    display: flex;
    position: fixed; inset: 0;
    z-index: 200;
    background: rgba(8, 11, 18, 0.97);
    flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    text-align: center; padding: 24px;
}
.m-rotate-icon { font-size: 54px; animation: m-rot 1.6s ease-in-out infinite; }
.m-rotate-text { font-size: 17px; font-weight: 700; color: var(--text-main); }
@keyframes m-rot { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(90deg); } }

/* Màn hình ngang rất thấp (< 360px cao) */
@media (max-height: 360px) {
    html.mobile #btn-shoot { width: 78px; height: 78px; min-height: 78px; font-size: 15px; }
    html.mobile .power-controls { width: 86px; }
}

/* Thanh trượt lực gốc chỉ dùng để lưu giá trị — ẩn trên mobile (lộ ra thành vạch xanh ở đầu thanh lực) */
html.mobile .power-slider-hidden { display: none; }

/* ================== CHUYỂN QUA LẠI 2 BỐ CỤC ================== */
/* Nút riêng của bố cục gọn: ẩn khi đang ở bố cục máy tính */
html:not(.mobile) .m-only,
html:not(.mobile) .m-drawer,
html:not(.mobile) .m-sheet { display: none !important; }
html.mobile .fine-aim-label { display: none; }

/* ================== MÀN HÌNH VỪA (bố cục máy tính thu gọn) ================== */
/* 1200–1440px: thu nhỏ chữ & khoảng cách để thanh trên không tràn và bảng dưới không quá cao */
@media (max-width: 1440px) {
    html:not(.mobile) .top-bar { padding: 8px 12px; gap: 8px; }
    html:not(.mobile) .top-controls { gap: 6px; }
    html:not(.mobile) .btn-icon { padding: 6px 9px; font-size: 12px; }
    html:not(.mobile) .select-control { padding: 6px 8px; font-size: 12px; max-width: 190px; }
    html:not(.mobile) .scoreboard-container { gap: 8px; }
    html:not(.mobile) .player-card { min-width: 0; padding: 6px 10px; max-width: 250px; }
    html:not(.mobile) .ball-indicator { flex-shrink: 0; }
    html:not(.mobile) .player-info { flex: 1 1 auto; min-width: 0; overflow: hidden; }
    html:not(.mobile) .player-stats { overflow: hidden; text-overflow: ellipsis; }
    html:not(.mobile) .score-badge { flex-shrink: 0; }
    html:not(.mobile) .player-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
    html:not(.mobile) .player-stats { font-size: 10px; white-space: nowrap; }
    html:not(.mobile) .score-badge { font-size: 26px; min-width: 34px; margin-left: 8px; }
    html:not(.mobile) .match-header { padding: 4px 10px; }
    html:not(.mobile) .match-title { font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
    html:not(.mobile) .target-score { white-space: nowrap; }
    html:not(.mobile) .banner-container { top: 70px; }
    html:not(.mobile) .side-card, html:not(.mobile) .ai-status-badge { top: 70px; }

    html:not(.mobile) .bottom-bar { padding: 10px 14px; gap: 8px; }
    html:not(.mobile) .widget-card { padding: 10px; }
    html:not(.mobile) .widget-title { font-size: 11px; margin-bottom: 6px; }
    html:not(.mobile) .thickness-quick-buttons { gap: 4px; }
    html:not(.mobile) .thick-btn, html:not(.mobile) .thick-btn-side { padding: 5px 8px; font-size: 12px; }
    html:not(.mobile) .cam-btn { padding: 5px 10px; }
    html:not(.mobile) .power-track { height: 118px; }
    html:not(.mobile) .power-controls { gap: 10px; }
    html:not(.mobile) .btn-shoot { padding: 13px 20px; font-size: 15px; }
}
@media (max-width: 1280px) {
    html:not(.mobile) .player-stats { display: none; }
    html:not(.mobile) .player-name { max-width: 130px; }
    html:not(.mobile) .select-control { max-width: 160px; }
    html:not(.mobile) .widget-card .english-readout { font-size: 10px; }
}
/* Màn hình máy tính thấp (≤ 820px cao): giảm chiều cao các bảng dưới */
@media (max-height: 820px) {
    html:not(.mobile) .power-track { height: 96px; }
    html:not(.mobile) .elevation-visual-container { display: none; }
    html:not(.mobile) .widget-card { padding: 8px; }
    html:not(.mobile) .english-ball-container { width: 160px; height: 160px; }
}

/* ===== Nút mở bảng "Cue controls" nằm ở cột phải, ngay TRÊN thanh lực (bản trước: góc dưới bên trái) ===== */
html.mobile .power-controls .m-spin-btn {
    position: static;
    flex: 0 0 auto;
    width: 64px;
}
/* Bảng điều khiển cơ: bỏ khoảng trống bên trái dành cho nút cũ, mở sát cột phải */
.m-sheet { left: calc(8px + env(safe-area-inset-left)); }
/* Biểu cảm online: xuống góc dưới bên trái (chỗ nút cũ) */
html.mobile .online-emote-bar { bottom: calc(8px + env(safe-area-inset-bottom)); }
@media (max-height: 360px) {
    html.mobile .power-controls .m-spin-btn { padding: 4px; gap: 2px; }
    html.mobile .power-controls .m-mini-ball { width: 26px; height: 26px; }
}

/* ===== Bảng "Cue controls" nhìn xuyên: thấy đường cơ / đường đi bi cái phía sau khi chỉnh đầu cơ =====
 * Nền bảng và các thẻ bên trong gần trong suốt, bỏ hiệu ứng làm mờ (blur) vì nó che mất đường ngắm.
 * Chữ được thêm bóng đổ để vẫn đọc rõ trên mặt nỉ xanh.
 */
.m-sheet {
    background: rgba(14, 19, 30, 0.28);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
    transition: background 0.15s, opacity 0.15s;
}
html.mobile .m-sheet .widget-card,
html.mobile .m-sheet .thickness-card {
    background: rgba(18, 24, 38, 0.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
html.mobile .m-sheet .elevation-visual-container { background: rgba(0, 0, 0, 0.15); }
html.mobile .m-sheet .m-sheet-head,
html.mobile .m-sheet .widget-title,
html.mobile .m-sheet .english-readout,
html.mobile .m-sheet .elevation-readout,
html.mobile .m-sheet .thickness-title { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6); }
/* Quả bi ép-phê hơi trong để thấy đường cơ ngay sau nó, chấm đỏ giữ đậm */
html.mobile .m-sheet .english-ball-container { opacity: 0.85; }

/* Đang kéo / chạm giữ trong bảng (chỉnh ép-phê, góc nâng): bảng càng trong hơn nữa */
.m-sheet.m-adjusting { background: rgba(14, 19, 30, 0.08); }
html.mobile .m-sheet.m-adjusting .widget-card,
html.mobile .m-sheet.m-adjusting .thickness-card { background: rgba(18, 24, 38, 0.06); }
html.mobile .m-sheet.m-adjusting .english-ball-container { opacity: 0.6; }
/* Khung ép-phê rộng cố định: dòng chữ "Right english 0.52 | Follow 0.53" dài ra khi kéo
   không còn làm khung giãn và quả bi xê dịch dưới ngón tay */
html.mobile .m-sheet .m-sheet-body > .widget-card:first-child { flex: 0 0 150px; width: 150px; min-width: 150px; }
html.mobile .m-sheet .english-readout { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Cột điểm bên trái bàn (mobile): điểm mục tiêu -> bi trắng -> bi vàng ===== */
.m-score-col {
    position: absolute;
    left: calc(8px + env(safe-area-inset-left));
    top: 46px;
    width: 116px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 12;
    pointer-events: auto;
}
html.mobile .m-score-col .match-header {
    margin: 0;
    padding: 5px 6px;
    border-radius: 10px;
    text-align: center;
}
html.mobile .m-score-col .match-title { font-size: 8px; letter-spacing: 0.5px; white-space: nowrap; }
html.mobile .m-score-col .target-score { font-size: 12px; font-weight: 800; color: var(--gold); white-space: normal; line-height: 1.2; }
html.mobile .m-score-col .player-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 5px 7px;
    border-radius: 10px;
    display: flex;
    align-items: center;
}
html.mobile .m-score-col .player-name { font-size: 10px; max-width: none; }
html.mobile .m-score-col .score-badge { font-size: 22px; margin-left: 4px; min-width: 24px; text-align: right; }
html.mobile .m-score-col .ball-indicator { margin-right: 5px; }
/* Biểu cảm online: lưới nhỏ ở cuối cột */
html.mobile .m-score-col .online-emote-bar {
    position: static;
    transform: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
}
html.mobile .m-score-col .online-emote-bar.hidden { display: none; }
html.mobile .m-score-col .emote-btn { font-size: 16px; padding: 2px 0; }
/* Thanh trên giờ chỉ còn nút menu ☰ */
html.mobile .top-bar .scoreboard-container { display: none; }
/* Bảng bài tập mẫu mở bên phải cột điểm */
html.mobile .side-card { left: calc(132px + env(safe-area-inset-left)); }
@media (max-height: 340px) {
    .m-score-col { top: 42px; gap: 4px; }
    html.mobile .m-score-col .score-badge { font-size: 19px; }
    html.mobile .m-score-col .match-title { display: none; }
}
/* Tên người chơi trong cột điểm: xuống tối đa 2 dòng thay vì bị cắt "Player 1..." */
html.mobile .m-score-col .player-name {
    white-space: normal;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* ===== Cột điểm tối giản: chỉ số mục tiêu + chấm bi + điểm; không chữ mô tả, không biểu cảm ===== */
.m-score-col { width: 64px; gap: 5px; }
.m-target-num {
    text-align: center;
    font-size: 18px;
    font-weight: 900;
    color: var(--gold);
    background: var(--card-bg);
    border: 1px solid var(--card-border, rgba(255,255,255,0.14));
    border-radius: 10px;
    padding: 3px 0;
    line-height: 1.2;
}
html.mobile .m-score-col .player-info { display: none; }
html.mobile .m-score-col .player-card { padding: 5px 6px; justify-content: space-between; }
html.mobile .m-score-col .ball-indicator { width: 16px; height: 16px; min-width: 16px; margin-right: 0; }
html.mobile .m-score-col .score-badge { font-size: 22px; margin-left: 0; min-width: 0; }
/* Bỏ hàng biểu tượng cảm xúc (chat) trên mobile */
html.mobile .online-emote-bar { display: none !important; }
html.mobile .side-card { left: calc(80px + env(safe-area-inset-left)); }
@media (max-height: 340px) {
    .m-target-num { font-size: 16px; }
    html.mobile .m-score-col .score-badge { font-size: 19px; }
}

/* ===== Thanh dưới (mobile): [◀] % [▶] [1/1][3/4][1/2][1/3][1/4][1/8][⇋] — không còn dòng chữ mô tả ===== */
html.mobile .m-thick-pill { display: none !important; }
html.mobile .m-sheet .thickness-card { display: none; }   /* nút độ dày đã ra thanh dưới */
html.mobile .fine-aim-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    flex-wrap: nowrap;
}
html.mobile #btn-aim-left, html.mobile #btn-aim-right { width: 42px; height: 32px; font-size: 15px; }
.m-thick-pct {
    min-width: 42px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    transition: opacity 0.2s;
}
html.mobile .fine-aim-group .thickness-quick-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    margin: 0 0 0 4px;
}
html.mobile .fine-aim-group .thick-btn,
html.mobile .fine-aim-group .thick-btn-side {
    height: 32px;
    min-width: 34px;
    padding: 0 4px;
    font-size: 12px;
    border-radius: 10px;
}
/* Nút con mắt (bật/tắt dự đoán đường bi) — bên phải cùng hàng nút độ dày */
.m-traj-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 38px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.m-traj-eye svg { display: block; pointer-events: none; }
html.mobile .fine-aim-group #btn-ai-hint {
    height: 32px;
    min-width: 38px;
    padding: 0 6px;
    margin-left: 3px;
    border-radius: 10px;
    font-size: 16px;
    flex-shrink: 0;
}
html.mobile .fine-aim-group #btn-ai-hint.hidden { display: none; }
@media (max-width: 700px) {
    html.mobile #btn-aim-left, html.mobile #btn-aim-right { width: 36px; }
    html.mobile .fine-aim-group #btn-ai-hint { min-width: 32px; padding: 0 4px; font-size: 14px; }
    .m-traj-eye { min-width: 32px; padding: 0 4px; }
    html.mobile .fine-aim-group .thick-btn,
    html.mobile .fine-aim-group .thick-btn-side { min-width: 30px; font-size: 11px; padding: 0 2px; }
    .m-thick-pct { min-width: 36px; font-size: 13px; }
}

/* ===== Cột điểm: chấm bi ở TRÊN, điểm ở DƯỚI (thay cho nằm ngang) ===== */
html.mobile .m-score-col .player-card {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 5px 4px 3px;
}
html.mobile .m-score-col .ball-indicator { margin: 0; }
html.mobile .m-score-col .score-badge { margin: 0; text-align: center; line-height: 1.05; }

/* ===== Bảng Practice Mode (mobile): nút ✕ thu gọn thành nút nhỏ "🎯 Practice" ===== */
html.mobile #practice-panel { padding-right: 38px; }
.m-card-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px; height: 26px; min-width: 26px;
    font-size: 13px;
}
html.mobile #practice-panel.m-collapsed { display: none; }
.m-practice-pill {
    position: absolute;
    left: calc(80px + env(safe-area-inset-left));
    top: 46px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    z-index: 15;
    cursor: pointer;
}
.m-practice-pill.hidden { display: none; }

/* ===== Nút menu ☰ ở cột phải, chính giữa phía trên nút English / thanh lực; 2 cột trái-phải cân nhau ===== */
html.mobile .top-bar { display: none; }               /* thanh trên đã trống (bảng điểm -> cột trái, ☰ -> cột phải) */
html.mobile .power-controls { top: calc(8px + env(safe-area-inset-top)); }
.m-score-col { top: calc(8px + env(safe-area-inset-top)); }
html.mobile .power-controls #m-menu-btn { flex: 0 0 auto; width: 40px; height: 40px; min-width: 40px; font-size: 19px; }
/* Bảng menu mở ra bên TRÁI cột phải, ngang hàng nút ☰ */
.m-drawer {
    left: auto;
    right: calc(118px + env(safe-area-inset-right));
    top: calc(8px + env(safe-area-inset-top));
    max-height: calc(100% - 16px);
}
html.mobile .banner-container { top: 10px; }
html.mobile .side-card, .m-practice-pill { top: calc(8px + env(safe-area-inset-top)); }
@media (max-height: 340px) {
    .m-score-col { top: calc(6px + env(safe-area-inset-top)); }
    html.mobile .power-controls { top: calc(6px + env(safe-area-inset-top)); gap: 4px; }
    html.mobile .power-controls #m-menu-btn { width: 34px; height: 34px; min-width: 34px; font-size: 16px; }
}

/* ===== Cột phải gọn hơn: nút SHOOT nhỏ lại, thanh POWER hẹp lại ===== */
html.mobile .power-controls { width: 76px; gap: 6px; }
html.mobile .power-controls .m-spin-btn { width: 62px; padding: 5px 3px; }
html.mobile .power-meter-box { width: 50px; padding: 5px 4px; border-radius: 10px; }
html.mobile .power-meter-box .widget-title { font-size: 8px; letter-spacing: 0.5px; }
html.mobile .power-track { width: 22px; border-radius: 10px; }
html.mobile .power-fill { border-radius: 10px; }
html.mobile .power-val-label { font-size: 11px; }
html.mobile #btn-shoot { width: 68px; height: 68px; min-height: 68px; font-size: 13px; letter-spacing: 0.5px; }
/* Bảng menu / Cue controls bám sát mép cột phải mới */
.m-drawer { right: calc(92px + env(safe-area-inset-right)); }
.m-sheet { right: 92px; }
@media (max-height: 360px) {
    html.mobile .power-controls { width: 72px; }
    html.mobile #btn-shoot { width: 60px; height: 60px; min-height: 60px; font-size: 12px; }
}

/* Nút mở bảng chỉnh cơ: bỏ chữ "English" (chỉ còn quả bi điểm chạm + số độ nâng cơ) */
html.mobile .m-spin-btn .m-spin-label { display: none; }

/* Nút chọn đầu cơ và khung thanh lực cùng bề rộng */
html.mobile .power-controls .m-spin-btn,
html.mobile .power-controls .power-meter-box {
    box-sizing: border-box;
    width: 56px;
    min-width: 56px;
    max-width: 56px;
}

/* Nút SHOOT rộng bằng cột thanh lực (56px) — cả cột phải gọn thành 60px */
html.mobile .power-controls { width: 60px; }
html.mobile #btn-shoot,
html.mobile .power-controls #btn-shoot {
    box-sizing: border-box;
    width: 56px; height: 56px; min-width: 56px; min-height: 56px; max-width: 56px;
    font-size: 11px; letter-spacing: 0;
}
.m-drawer { right: calc(76px + env(safe-area-inset-right)); }
.m-sheet { right: 76px; }
@media (max-height: 360px) {
    html.mobile .power-controls { width: 60px; }
    html.mobile #btn-shoot { width: 56px; height: 56px; min-height: 56px; font-size: 11px; }
}

/* ===== Cột điểm: nằm chính giữa theo chiều dọc, ô rộng 56px bằng cột phải (đối xứng 2 bên) ===== */
.m-score-col,
html.mobile .m-score-col {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    left: calc(8px + env(safe-area-inset-left));
}
@media (max-height: 340px) {
    .m-score-col { top: 50%; }
}
html.mobile .m-score-col .player-card,
.m-target-num { box-sizing: border-box; width: 56px; }
/* lề trái = lề phải (10px) */
.m-score-col, html.mobile .m-score-col { left: calc(10px + env(safe-area-inset-left)); }

/* ===== Cột chat nhanh (online): dọc, ngay bên phải cột điểm, chính giữa theo chiều dọc ===== */
html.mobile .ui-overlay > .online-emote-bar:not(.hidden) {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: calc(10px + 56px + 6px + env(safe-area-inset-left));
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 40px;
    box-sizing: border-box;
    gap: 2px;
    padding: 4px 2px;
    border-radius: 12px;
    z-index: 12;
}
html.mobile .ui-overlay > .online-emote-bar .emote-btn { font-size: 18px; padding: 3px 0; width: 100%; }
@media (max-height: 340px) {
    html.mobile .ui-overlay > .online-emote-bar .emote-btn { font-size: 15px; padding: 1px 0; }
}

/* ===== Chat nhanh (online): ngay DƯỚI cột điểm, rộng 56px, lưới 2 cột; cả khối điểm + chat nằm giữa chiều dọc ===== */
html.mobile .m-score-col > .online-emote-bar:not(.hidden) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    position: static;
    transform: none;
    width: 56px;
    box-sizing: border-box;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    margin-top: 1px;
}
html.mobile .m-score-col > .online-emote-bar .emote-btn { font-size: 17px; padding: 2px 0; width: 100%; line-height: 1.2; }
@media (max-height: 340px) {
    html.mobile .m-score-col > .online-emote-bar .emote-btn { font-size: 14px; padding: 1px 0; }
}
html.mobile .m-score-col > .online-emote-bar .emote-btn:last-child { grid-column: 1 / -1; }   /* 🎯 nằm giữa hàng cuối */

/* ===== Cột điểm & cột lực gọn hơn (44px) để bàn rộng thêm; nút mở bảng chỉnh cơ nhỏ lại ===== */
.m-score-col, html.mobile .m-score-col { width: 44px; gap: 5px; }
html.mobile .m-score-col .player-card,
.m-target-num { width: 44px; }
.m-target-num { font-size: 15px; padding: 3px 0; border-radius: 9px; }
html.mobile .m-score-col .player-card { padding: 4px 2px 3px; border-radius: 9px; }
html.mobile .m-score-col .ball-indicator { width: 13px; height: 13px; min-width: 13px; }
html.mobile .m-score-col .score-badge { font-size: 17px; }
html.mobile .m-score-col > .online-emote-bar:not(.hidden) { width: 44px; padding: 2px; }
html.mobile .m-score-col > .online-emote-bar .emote-btn { font-size: 13px; padding: 1px 0; }

html.mobile .power-controls { width: 46px; gap: 5px; }
html.mobile .power-controls #m-menu-btn { width: 34px; height: 34px; min-width: 34px; font-size: 16px; }
html.mobile .power-controls .m-spin-btn,
html.mobile .power-controls .power-meter-box { width: 44px; min-width: 44px; max-width: 44px; }
html.mobile .power-controls .m-spin-btn { padding: 3px 2px; gap: 1px; border-radius: 9px; }
html.mobile .power-controls .m-mini-ball { width: 22px; height: 22px; }
html.mobile .m-elev-label { font-size: 9px; }
html.mobile .power-meter-box { padding: 4px 2px; border-radius: 9px; }
html.mobile .power-meter-box .widget-title { font-size: 7px; letter-spacing: 0.3px; }
html.mobile .power-track { width: 16px; }
html.mobile .power-val-label { font-size: 10px; }
html.mobile #btn-shoot,
html.mobile .power-controls #btn-shoot { width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-width: 44px; font-size: 9px; }
.m-drawer { right: calc(62px + env(safe-area-inset-right)); }
.m-sheet { right: 62px; }
html.mobile .side-card, .m-practice-pill { left: calc(64px + env(safe-area-inset-left)); }
@media (max-height: 360px) {
    html.mobile .power-controls { width: 46px; }
    html.mobile #btn-shoot { width: 44px; height: 44px; min-height: 44px; font-size: 9px; }
}

/* ===== Nút Replay ngay dưới nút SHOOT (cột phải) ===== */
html.mobile .power-controls #btn-replay-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    min-width: 0;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 10px;
    font-size: 15px;
    white-space: nowrap;
}
@media (max-height: 340px) {
    html.mobile .power-controls #btn-replay-nav { height: 26px; min-height: 26px; }
}

/* Nhóm nút menu không còn nút nào (đã chuyển hết sang hàng Setup) */
html.mobile .m-drawer .m-drawer-group.m-empty { display: none; }
html.mobile .m-drawer .m-drawer-group > .camera-modes { flex: 1 1 100%; }

/* ===== Nút "🎯 Practice" (bảng Practice đã thu gọn): nằm trong cột điểm bên trái, ngoài mặt bàn ===== */
.m-score-col .m-practice-pill {
    position: static;
    width: 100%;
    padding: 4px 0 3px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.1;
}
.m-score-col .m-practice-pill.hidden { display: none; }
.m-practice-pill .m-pp-ico { font-size: 16px; }
.m-practice-pill .m-pp-txt { font-size: 9px; font-weight: 800; letter-spacing: 0.3px; color: var(--gold); }

/* ===== Ô "Room · lượt đánh" (online) nằm ở đầu cột điểm bên trái, ngoài mặt bàn ===== */
.m-score-col .online-room-badge {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 3px 2px;
    border-radius: 10px;
    text-align: center;
    line-height: 1.1;
    box-shadow: none;
    backdrop-filter: none;
}
.m-score-col .online-room-badge > span:first-child { font-size: 0; }          /* ẩn chữ "Room: " */
.m-score-col .online-room-badge > span:first-child::before {
    content: 'ROOM'; display: block; font-size: 7px; font-weight: 800; letter-spacing: 0.5px; color: var(--text-muted);
}
.m-score-col .online-room-badge .room-code-tag { font-size: 12px; }
.m-score-col .online-room-badge .turn-tag { font-size: 0; padding: 2px 0; border-radius: 6px; }   /* chữ dài -> nhãn ngắn */
.m-score-col .online-room-badge .turn-tag.my-turn::after { content: 'YOUR TURN'; font-size: 7px; font-weight: 800; }
.m-score-col .online-room-badge .turn-tag.opp-turn::after { content: 'WAIT'; font-size: 7px; font-weight: 800; }

/* ===== Match Setup trên mobile: 2 cột để vừa một màn hình (không phải cuộn mới thấy Start Match) ===== */
html.mobile #setup-modal .modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
    align-items: end;
}
html.mobile #setup-modal .form-group { margin: 0; }
html.mobile #setup-modal .form-group.hidden { display: none; }
html.mobile #setup-modal #btn-setup-start { grid-column: 1 / -1; margin-top: 6px !important; }
html.mobile #setup-modal .modal-header { margin-bottom: 6px; }

/* Mobile: nút nghiêng Aim View nằm bên trái cột lực/SHOOT (cột trái đã có bảng điểm) */
html.mobile .aim-tilt-control {
    left: auto;
    right: calc(env(safe-area-inset-right, 0px) + 66px);
    top: 46%;
    padding: 4px;
    gap: 3px;
}
html.mobile .aim-tilt-btn { width: 36px; height: 32px; }

/* Hàng nút độ dày cắt bi trong bảng "Cue controls" (mobile) */
html.mobile .m-sheet .m-sheet-thick { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
html.mobile .m-sheet .m-st-fine { display: flex; align-items: center; justify-content: center; gap: 8px; }
html.mobile .m-sheet .m-st-pct { min-width: 44px; text-align: center; font-weight: 800; font-size: 15px; color: #fbbf24; text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
html.mobile .m-sheet .m-st-quick { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
html.mobile .m-sheet .m-st-btn { min-width: 38px; padding: 7px 8px; font-size: 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.18); background: rgba(31,36,48,0.85); color: #e2e8f0; touch-action: manipulation; }
html.mobile .m-sheet .m-st-btn.active { background: #f59e0b; color: #111; border-color: #f59e0b; }
html.mobile .m-sheet .m-st-btn.thick-btn-side { border-color: rgba(96,165,250,0.6); color: #93c5fd; }
/* Bảng "Cue controls" có lại thẻ độ dày (chỉ phần tiêu đề + hàng nút riêng; thanh % và nút gốc vẫn ở thanh dưới) */
html.mobile .m-sheet .thickness-card { display: flex; flex-direction: column; }
html.mobile .m-sheet .thickness-card .thickness-bar-container { display: none; }
html.mobile.m-sheet-open .fine-aim-group { visibility: hidden; }
/* Vòng chọn điểm chạm trong bảng Cue controls (mobile): vừa thẻ, vẫn vẽ đúng tỉ lệ 0.5R */
html.mobile .m-sheet .english-ball-container { width: min(170px, 30vh); height: min(170px, 30vh); } /* thật to, vừa khung ép-phê 188px */

/* =====================================================================
 * MÀN HÌNH ĐỨNG (portrait) trên điện thoại
 *   trên cùng : [điểm mục tiêu][điểm trắng][điểm vàng] ............ [☰]
 *   giữa      : bàn DỰNG DỌC (camera nhìn trên xoay 90°), băng ngắn ở trên / dưới
 *   dưới      : hàng độ dày [◀ % ▶][1/1 … 1/8][⇋][👁][💡] (tự xuống hàng)
 *               hàng lực    [nút Cue controls][===== POWER (ngang) =====][SHOOT][⏪]
 * ===================================================================== */
html.mobile.m-portrait .m-rotate { display: none !important; }   /* không còn bắt xoay ngang */

/* Cột điểm -> hàng ngang trên cùng */
html.mobile.m-portrait .m-score-col {
    top: calc(6px + env(safe-area-inset-top));
    left: calc(6px + env(safe-area-inset-left));
    right: 56px;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
}
html.mobile.m-portrait .m-score-col > * { flex: 0 0 auto; }
html.mobile.m-portrait .m-score-col .player-card { flex-direction: row; gap: 6px; padding: 4px 10px; min-width: 64px; }
html.mobile.m-portrait .m-score-col .score-badge { font-size: 20px; }
html.mobile.m-portrait .m-score-col .match-header { display: flex; align-items: center; padding: 4px 10px; }
html.mobile.m-portrait .ui-overlay > .online-emote-bar:not(.hidden),
html.mobile.m-portrait .m-score-col .online-emote-bar:not(.hidden) { flex-direction: row; }

/* Cột phải -> hàng lực dưới cùng; ☰ tách lên góc trên phải */
html.mobile.m-portrait .power-controls {
    top: auto !important;
    left: calc(6px + env(safe-area-inset-left));
    right: calc(6px + env(safe-area-inset-right));
    bottom: calc(6px + env(safe-area-inset-bottom));
    width: auto;
    height: 64px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
html.mobile.m-portrait .power-controls #m-menu-btn {
    position: fixed;
    top: calc(6px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
    width: 40px; height: 40px; min-width: 40px;
    z-index: 30;
}
html.mobile.m-portrait .power-controls .m-spin-btn { width: 56px; height: 60px; padding: 4px; gap: 2px; justify-content: center; }
html.mobile.m-portrait .power-meter-box {
    flex: 1 1 auto;
    width: auto;
    height: 60px;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
}
html.mobile.m-portrait .power-meter-box .widget-title { display: none; }
html.mobile.m-portrait .power-track {
    flex: 1 1 auto;
    width: auto !important;
    height: 30px !important;
    min-height: 0;
    margin: 0;
}
/* Thanh lực nằm ngang: phần đã nạp lực tô từ TRÁI sang (main.js đặt width theo % khi thanh nằm ngang) */
html.mobile.m-portrait .power-fill { top: 0; bottom: 0; left: 0; right: auto; height: 100% !important; }
html.mobile.m-portrait .power-val-label { min-width: 38px; text-align: right; }
html.mobile.m-portrait #btn-shoot { width: 64px; height: 64px; min-height: 64px; font-size: 13px; flex: 0 0 auto; }
html.mobile.m-portrait .power-controls #btn-replay-nav { width: 40px; height: 40px; min-height: 40px; flex: 0 0 auto; }

/* Hàng độ dày: ngay trên hàng lực, tự xuống hàng khi màn hẹp */
html.mobile.m-portrait .center-controls {
    left: calc(6px + env(safe-area-inset-left));
    right: calc(6px + env(safe-area-inset-right));
    bottom: calc(76px + env(safe-area-inset-bottom));
    transform: none;
    display: flex;
    justify-content: center;
}
html.mobile.m-portrait .fine-aim-group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 5px;
    max-width: 100%;
}
html.mobile.m-portrait .fine-aim-group .thickness-quick-buttons { margin: 0; }

/* Bảng Cue controls: trải hết chiều ngang, nằm trên hàng lực, cuộn được */
html.mobile.m-portrait .m-sheet {
    left: calc(6px + env(safe-area-inset-left)) !important;
    right: calc(6px + env(safe-area-inset-right)) !important;
    bottom: calc(76px + env(safe-area-inset-bottom));
    max-height: 64vh;
}
html.mobile.m-portrait .m-sheet .m-sheet-body { flex-wrap: wrap; justify-content: center; overflow-y: auto; }

/* Menu ☰: mở dưới nút, sát mép phải */
html.mobile.m-portrait .m-drawer {
    right: calc(6px + env(safe-area-inset-right));
    top: calc(52px + env(safe-area-inset-top));
    width: min(320px, 86vw);
    max-height: calc(100% - 140px);
}
/* Bảng Practice / mô tả drill / nút Practice: dưới hàng điểm */
html.mobile.m-portrait .side-card,
html.mobile.m-portrait .m-practice-pill {
    left: calc(6px + env(safe-area-inset-left)) !important;
    top: calc(56px + env(safe-area-inset-top)) !important;
    max-width: calc(100vw - 12px);
}
/* Nút nghiêng Aim View: mép phải, giữa màn hình */
html.mobile.m-portrait .aim-tilt-control { right: calc(6px + env(safe-area-inset-right)); top: 45%; }

/* --- Dọc: ghi đè các kích thước cố định của cột phải / cột điểm (bố cục ngang) --- */
html.mobile.m-portrait .m-score-col { transform: none !important; bottom: auto; }
html.mobile.m-portrait .m-score-col .player-card { width: auto; }
html.mobile.m-portrait .power-controls { width: auto !important; }
html.mobile.m-portrait .power-controls .m-spin-btn { width: 56px; min-width: 56px; max-width: 56px; }
html.mobile.m-portrait .power-controls .power-meter-box { width: auto; min-width: 0; max-width: none; flex: 1 1 auto; }
html.mobile.m-portrait #btn-shoot,
html.mobile.m-portrait .power-controls #btn-shoot {
    width: 72px; min-width: 72px; max-width: 72px; height: 60px; min-height: 60px;
    border-radius: 30px; font-size: 14px; letter-spacing: 0.5px;
}

/* Hàng độ dày 2 dòng: [◀ % ▶ ⇋ 👁] rồi [1/1 … 1/8] chia đều chiều ngang */
html.mobile.m-portrait .fine-aim-group { padding: 6px; gap: 5px; width: 100%; box-sizing: border-box; }
html.mobile.m-portrait .fine-aim-group .thickness-quick-buttons { display: contents; }
html.mobile.m-portrait #btn-aim-left { order: 1; }
html.mobile.m-portrait #m-thick-pct { order: 2; align-self: center; }
html.mobile.m-portrait #btn-aim-right { order: 3; }
html.mobile.m-portrait #btn-flip-side { order: 4; margin-left: 10px; }
html.mobile.m-portrait #m-traj-eye { order: 5; }
html.mobile.m-portrait #btn-ai-hint { order: 6; }
html.mobile.m-portrait .fine-aim-group::after { content: ''; order: 9; flex: 0 0 100%; height: 0; }
html.mobile.m-portrait .fine-aim-group .thick-btn { order: 10; flex: 1 1 0; min-width: 0; padding-left: 0; padding-right: 0; }
html.mobile.m-portrait .power-fill { background: linear-gradient(90deg, #10b981 0%, #f59e0b 60%, #ef4444 100%); }

/* --- Dọc: hàng dưới gọn 44px, cân với nút Replay --- */
html.mobile.m-portrait .power-controls { height: 44px; gap: 6px; }
html.mobile.m-portrait .power-controls .m-spin-btn { width: 52px; min-width: 52px; max-width: 52px; height: 44px; min-height: 44px; padding: 2px; flex-direction: row; gap: 4px; }
html.mobile.m-portrait .power-controls .m-spin-btn .m-mini-ball { width: 20px; height: 20px; }
html.mobile.m-portrait .power-controls .power-meter-box { height: 44px; padding: 2px 8px; }
html.mobile.m-portrait .power-track { height: 16px !important; border-radius: 8px; }
html.mobile.m-portrait .power-fill { border-radius: 8px; }
html.mobile.m-portrait .power-val-label { font-size: 12px; }
html.mobile.m-portrait #btn-shoot,
html.mobile.m-portrait .power-controls #btn-shoot {
    width: 64px; min-width: 64px; max-width: 64px; height: 44px; min-height: 44px;
    border-radius: 22px; font-size: 12px; letter-spacing: 0.3px;
}
html.mobile.m-portrait .power-controls #btn-replay-nav { width: 44px; height: 44px; min-height: 44px; }
html.mobile.m-portrait .center-controls { bottom: calc(56px + env(safe-area-inset-bottom)); }
html.mobile.m-portrait .m-sheet { bottom: calc(56px + env(safe-area-inset-bottom)); }

/* --- Dọc: nút đầu cơ chỉ còn quả bi lớn, bỏ chữ góc nâng --- */
html.mobile.m-portrait .power-controls .m-spin-btn .m-mini-ball { width: 38px; height: 38px; }
html.mobile.m-portrait .power-controls .m-spin-btn .m-mini-tip { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
html.mobile.m-portrait .power-controls .m-spin-btn .m-elev-label { display: none; }
html.mobile.m-portrait .power-controls .m-spin-btn { width: 44px; min-width: 44px; max-width: 44px; padding: 0; justify-content: center; }

/* --- Dọc: ☰ ở góc trên TRÁI, bảng điểm ở giữa, menu mở từ bên trái --- */
html.mobile.m-portrait .power-controls #m-menu-btn { left: calc(8px + env(safe-area-inset-left)); right: auto; }
html.mobile.m-portrait .m-score-col {
    left: calc(56px + env(safe-area-inset-left)) !important;
    right: calc(56px + env(safe-area-inset-right));
    justify-content: center;
}
html.mobile.m-portrait .m-drawer { left: calc(6px + env(safe-area-inset-left)); right: auto; }

/* Ô góc nâng cơ (thực tế) ngay sau nút con mắt; cam = cơ đang bị nâng tự động để vượt băng / bi phía sau */
.m-elev-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 40px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 10px;
    border: 1px solid rgba(56, 189, 248, 0.55);
    background: rgba(56, 189, 248, 0.10);
    color: #38bdf8;
    font-weight: 800;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.m-elev-pill.m-elev-raised { color: #f59e0b; border-color: rgba(245, 158, 11, 0.6); background: rgba(245, 158, 11, 0.12); }
@media (max-width: 700px) { .m-elev-pill { min-width: 36px; padding: 0 4px; font-size: 12px; } }
html.mobile.m-portrait #m-elev-pill { order: 5; margin-left: 6px; }

/* --- Dọc: bỏ hàng nút 1/1 … 1/8 (thanh độ dày còn 1 dòng); ☰ nằm cuối hàng lực, menu mở lên từ góc dưới phải --- */
html.mobile.m-portrait .fine-aim-group .thick-btn { display: none !important; }
html.mobile.m-portrait .fine-aim-group::after { display: none; }
html.mobile.m-portrait .power-controls #m-menu-btn {
    position: static;
    order: 20;
    left: auto; right: auto; top: auto;
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 10px;
    flex: 0 0 auto;
}
html.mobile.m-portrait .m-score-col {
    left: calc(6px + env(safe-area-inset-left)) !important;
    right: calc(6px + env(safe-area-inset-right));
}
html.mobile.m-portrait .m-drawer {
    left: auto;
    right: calc(6px + env(safe-area-inset-right));
    top: auto;
    bottom: calc(56px + env(safe-area-inset-bottom));
    max-height: calc(100% - 120px);
}

/* --- Dọc: bảng điểm nằm trong menu ☰ (ngay dưới tiêu đề) --- */
.m-drawer .m-score-col.m-score-in-menu {
    position: static !important;
    transform: none !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    width: auto !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
    margin: 2px 0 10px;
}
html.mobile.m-portrait .side-card,
html.mobile.m-portrait .m-practice-pill { top: calc(6px + env(safe-area-inset-top)) !important; }
html.mobile.m-portrait .m-drawer .m-practice-pill { position: static !important; top: auto !important; left: auto !important; }

/* --- Nút SHOOT: máy ngang hiện chữ, máy dọc thành nút TRÒN 44px với biểu tượng cơ chọc bi --- */
#btn-shoot .m-shoot-ico { display: none; }
html.mobile.m-portrait #btn-shoot .m-shoot-txt { display: none; }
html.mobile.m-portrait #btn-shoot .m-shoot-ico { display: block; width: 26px; height: 26px; }
html.mobile.m-portrait #btn-shoot,
html.mobile.m-portrait .power-controls #btn-shoot {
    width: 44px; min-width: 44px; max-width: 44px; height: 44px; min-height: 44px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}

html.mobile .m-sheet .eng-lvl { width: 21px; height: 24px; font-size: 11px; }
html.mobile .m-sheet .eng-sign { width: 26px; height: 24px; font-size: 11px; }

html.mobile .m-sheet .english-readout { white-space: pre-line; line-height: 1.35; }

html.mobile .m-sheet .english-steppers { white-space: normal; overflow: visible; }
html.mobile .m-sheet .eng-step { width: 28px; height: 24px; font-size: 12px; }
html.mobile .m-sheet .eng-step-val { min-width: 74px; font-size: 10px; }

/* Hàng tip có thêm 2 mũi tên -> khung ép-phê rộng hơn (khung góc nâng vẫn đủ chỗ) */
html.mobile .m-sheet .m-sheet-body > .widget-card:first-child { flex: 0 0 188px; width: 188px; min-width: 188px; }
html.mobile .m-sheet .eng-preset-row { gap: 2px; }
html.mobile .m-sheet .eng-preset-row .eng-step { width: 22px; height: 24px; font-size: 11px; }
html.mobile .m-sheet .eng-lvl { width: 20px; }
html.mobile .m-sheet .eng-sign { width: 24px; }

/* ===== Điện thoại DỰNG ĐỨNG: bảng Cue controls gần như toàn màn hình =====
   Thẻ độ dày lên TRÊN CÙNG, quả bi chọn tip / ép-phê trải hết bề ngang màn hình, góc nâng ở dưới (cuộn nếu thiếu chỗ) */
html.mobile.m-portrait .m-sheet {
    top: calc(6px + env(safe-area-inset-top));
    max-height: none;
}
html.mobile.m-portrait .m-sheet .m-sheet-body {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
    overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0;
}
html.mobile.m-portrait .m-sheet .m-sheet-body > * { flex: 0 0 auto; }
html.mobile.m-portrait .m-sheet .m-sheet-body > .thickness-card { order: -1; width: auto; }
html.mobile.m-portrait .m-sheet .m-sheet-body > .widget-card:first-child { flex: 0 0 auto; width: auto; min-width: 0; }
html.mobile.m-portrait .m-sheet .m-sheet-body > .elevation-card { width: auto; min-width: 0; }
html.mobile.m-portrait .m-sheet .english-ball-container {
    width: min(calc(100vw - 44px), 58vh); height: min(calc(100vw - 44px), 58vh);
}
html.mobile.m-portrait .m-sheet .english-tip { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
html.mobile.m-portrait .m-sheet .widget-title { font-size: 11px; }
html.mobile.m-portrait .m-sheet .english-readout { font-size: 13px; }
html.mobile.m-portrait .m-sheet .eng-preset-row { gap: 6px; }
html.mobile.m-portrait .m-sheet .eng-preset-row .eng-step,
html.mobile.m-portrait .m-sheet .eng-lvl,
html.mobile.m-portrait .m-sheet .eng-sign { width: 36px; height: 34px; font-size: 14px; }

/* Nút mở lại bảng Practice trên thanh độ dày, ngay sau nút Gợi ý AI */
html.mobile .fine-aim-group #btn-practice-show {
    height: 32px; min-width: 38px; padding: 0 6px; margin-left: 3px;
    border-radius: 10px; font-size: 16px; flex-shrink: 0;
}
html.mobile .fine-aim-group #btn-practice-show.hidden { display: none; }
html.mobile.m-portrait #btn-practice-show { order: 7; }