/* =========================================================
   BOT ARENA BLASTER - STYLESHEET
   Neon Cyberpunk Glassmorphism Aesthetics
   ========================================================= */

:root {
    --font-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
    --font-main: 'Nunito', system-ui, sans-serif;

    --bg-dark: #070914;
    --card-bg: rgba(15, 23, 42, 0.75);
    --card-border: rgba(255, 255, 255, 0.12);
    
    --neon-blue: #00f0ff;
    --neon-pink: #ff007f;
    --neon-purple: #9d4edd;
    --neon-green: #39ff14;
    --neon-yellow: #ffd700;
    --neon-orange: #ff6b00;
    --neon-red: #ff3366;

    --glow-blue: 0 0 15px rgba(0, 240, 255, 0.5);
    --glow-pink: 0 0 15px rgba(255, 0, 127, 0.5);
    --glow-green: 0 0 15px rgba(57, 255, 20, 0.5);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-dark);
    color: #ffffff;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Background animated grid */
.bg-grid-glow {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: 
        radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.8) 0%, #050710 100%),
        linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    animation: bgPulse 10s ease-in-out infinite alternate;
}

@keyframes bgPulse {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(30deg); }
}

/* App Wrapper — bố cục chung nằm ở site-chrome.css, ở đây chỉ giữ phần riêng.
 * Dùng dvh: trên iOS/Android thanh địa chỉ ăn vào 100vh, khiến hàng vũ khí và
 * nút bắn dưới đáy bị đẩy khuất ra ngoài màn hình. */
body > .app-wrapper {
    height: 100vh;
    height: 100dvh;
    position: relative;
}

/* Header Navbar — cao theo nội dung, không chốt 60px: trên điện thoại nằm ngang
   thanh này chiếm hẳn 1/6 màn hình mà phần đệm thu nhỏ lại cũng không ăn thua. */
.unified-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(10, 14, 29, 0.8);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--card-border);
    z-index: 10;
}

.unified-nav .btn-home {
    background: linear-gradient(135deg, #00f0ff, #0072ff);
    border-color: #00f0ff;
    color: #050515;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
    text-decoration: none;
}

.unified-nav .btn-home:hover {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
    color: #ffffff;
    text-decoration: none;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-icon {
    font-size: 1.8rem;
    color: var(--neon-blue);
    text-shadow: var(--glow-blue);
}

.brand-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Buttons */
.btn {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, var(--neon-pink), #e6005c);
    border-color: var(--neon-pink);
    box-shadow: 0 4px 15px rgba(255, 0, 127, 0.4);
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(255, 0, 127, 0.6);
    background: linear-gradient(135deg, #ff1a8c, #ff0055);
}

.btn-cyber {
    background: linear-gradient(135deg, var(--neon-blue), #00a8ff);
    color: #000;
    border-color: var(--neon-blue);
    font-weight: 800;
    box-shadow: 0 4px 15px rgba(0, 240, 255, 0.4);
}

.btn-cyber:hover {
    box-shadow: 0 6px 22px rgba(0, 240, 255, 0.7);
    color: #000;
}

.btn-toggle {
    border-color: rgba(0, 240, 255, 0.4);
}

.btn-toggle.active {
    background: rgba(0, 240, 255, 0.25);
    border-color: var(--neon-blue);
    color: var(--neon-blue);
    box-shadow: var(--glow-blue);
}

/* Main Viewport */
.game-viewport {
    flex: 1 1 auto;
    /* Không có min-height:0 thì canvas cũ (cao bằng nội dung) sẽ chống cho khung
     * này giãn ra, đẩy footer xuống dưới đáy màn hình. */
    min-height: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 20px;
}

/* Canvas Game View */
#game-canvas {
    display: block;
    background: transparent;
    cursor: crosshair;
}

/* HUD Overlay */
.hud-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 5;
}

/* Lưới 1fr–auto–1fr thay cho space-between: cột giữa mới thực sự nằm giữa màn
   hình dù hộp trái và hộp phải rộng khác nhau, và hai cột ngoài co lại theo
   nhau nên không có hộp nào lấn sang hộp kia khi màn hình hẹp. */
.hud-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 12px;
}

.hud-top > .player-status { justify-self: start; }
.hud-top > .hud-center { justify-self: center; }
.hud-top > .hud-right { justify-self: end; }

/* HUD Glass Box */
.hud-box {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 12px 18px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Chỉ hàng vũ khí cần nhận click. Trước đây mọi hộp HUD đều bắt chuột, nên trên
 * màn hình nhỏ — nơi chúng chiếm gần hết bề ngang — bấm để bắn vào khu vực đó
 * lại không ăn. */
.weapon-slots-bar { pointer-events: auto; }

/* Health Bar HUD */
.player-status {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    max-width: 100%;
    width: 260px;
}

.avatar-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    box-shadow: var(--glow-blue);
}

.status-details {
    flex: 1;
    /* min-width:0 mới cho phép ellipsis của tên nhân vật hoạt động; thiếu nó thì
       chữ đẩy rộng ra và tràn khỏi nền hộp HUD. */
    min-width: 0;
}

.bar-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 4px;
}

/* Tên nhân vật đổi theo ngôn ngữ ("Human Special Forces" dài hơn bản tiếng
   Việt), để tự xuống dòng thì nó đội chỉ số máu lên và hộp HUD cao vống lên. */
#player-name-hud {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#hp-text { flex-shrink: 0; }

.health-track {
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.health-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ff3366, #39ff14);
    border-radius: 6px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
}

/* Wave & Score Stats */
.hud-center {
    text-align: center;
}

.wave-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--neon-yellow);
    letter-spacing: 1px;
}

.bots-remaining {
    font-size: 0.9rem;
    color: #cbd5e1;
    margin-top: 2px;
}

.hud-right {
    display: flex;
    gap: 16px;
}

.stat-item {
    text-align: right;
}

.stat-val {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
}

.stat-lbl {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Active Weapon HUD */
.hud-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* 4-Weapon Quick Switch Slots */
.weapon-slots-bar {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
}

.weapon-slot {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Chiều rộng cố định để bốn ô bằng nhau: tên súng dịch ra tiếng Anh dài
       ngắn khác nhau ("Pistol" vs "Rocket Launcher") sẽ kéo ô rộng hẹp lệch. */
    width: 78px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.weapon-slot:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.weapon-slot.active {
    background: rgba(0, 240, 255, 0.2);
    border-color: var(--neon-blue);
    box-shadow: var(--glow-blue);
    transform: translateY(-4px);
}

.slot-num {
    position: absolute;
    top: 3px;
    left: 6px;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--neon-yellow);
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 5px;
    border-radius: 6px;
}

.slot-icon {
    font-size: 1.4rem;
    color: var(--neon-blue);
    margin-top: 4px;
}

.weapon-slot.active .slot-icon {
    color: #fff;
    text-shadow: var(--glow-blue);
}

.slot-name {
    font-family: var(--font-display);
    font-size: 0.72rem;
    line-height: 1.15;
    font-weight: 700;
    color: #e2e8f0;
    margin-top: 2px;
    text-align: center;
}

.slot-ammo {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--neon-yellow);
}

/* Active Buff Badges */
.buff-container {
    display: flex;
    gap: 8px;
}

.buff-badge {
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(0, 240, 255, 0.15);
    border: 1px solid var(--neon-blue);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--neon-blue);
    display: flex;
    align-items: center;
    gap: 6px;
    animation: buffPop 0.3s ease;
}

@keyframes buffPop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Touch Controls for Mobile/Tablet */
.touch-controls {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    display: none; /* Auto-detected via JS touch query */
}

.touch-joystick-zone {
    position: absolute;
    bottom: 30px;
    left: 30px;
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    pointer-events: auto;
    touch-action: none;
}

.joystick-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    background: var(--neon-blue);
    border-radius: 50%;
    box-shadow: var(--glow-blue);
    pointer-events: none;
}

.touch-fire-btn {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-pink), #e6005c);
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--glow-pink);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.2rem;
    color: white;
    pointer-events: auto;
    touch-action: none;
}

/* Modals Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 7, 16, 0.85);
    backdrop-filter: blur(12px);
    display: flex;
    /* Không dùng align-items:center: khi thẻ cao hơn màn hình (điện thoại nằm
     * ngang) nó sẽ tràn cả hai đầu và không cuộn tới được nút BẮT ĐẦU CHƠI.
     * margin:auto trên thẻ con vừa căn giữa vừa cho cuộn khi thiếu chỗ. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--card-border);
    border-radius: 28px;
    padding: 32px;
    max-width: 600px;
    width: 100%;
    margin: auto;
    flex-shrink: 0;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.25);
}

.modal-overlay.active .modal-card {
    transform: scale(1);
}

.modal-icon {
    font-size: 3.5rem;
    margin-bottom: 12px;
    color: var(--neon-yellow);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.modal-title {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #fff, var(--neon-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-subtitle {
    color: #94a3b8;
    margin-bottom: 24px;
    font-size: 1.05rem;
}

/* Game Mode Selection Grid */
.mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.mode-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px 16px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.mode-card:hover {
    background: rgba(0, 240, 255, 0.12);
    border-color: var(--neon-blue);
    transform: translateY(-4px);
    box-shadow: var(--glow-blue);
}

.mode-card.selected {
    background: rgba(0, 240, 255, 0.2);
    border-color: var(--neon-blue);
    box-shadow: var(--glow-blue);
}

.mode-icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
}

.mode-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
}

.mode-desc {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 4px;
}

/* Khối chọn trang bị & độ khó trong màn hình bắt đầu. Trước đây viết bằng style
   nội dòng nên media query không thu gọn được, mà đây lại là hai khối chiếm chỗ
   nhiều nhất trong modal. */
.setup-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 20px;
}

.setup-label {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--neon-blue);
    margin-bottom: 8px;
}

.setup-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.setup-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.setup-label-inline {
    color: #94a3b8;
    font-weight: 700;
}

.btn-play {
    font-size: 1.3rem;
    padding: 14px 40px;
    border-radius: 20px;
}

/* Shop Items Grid */
.shop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    margin: 20px 0;
}

.shop-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.shop-item-icon {
    font-size: 2rem;
    color: var(--neon-yellow);
}

.shop-item-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
}

.shop-item-level {
    font-size: 0.8rem;
    color: var(--neon-blue);
}

.shop-buy-btn {
    width: 100%;
    padding: 6px;
    font-size: 0.85rem;
    border-radius: 8px;
    margin-top: 4px;
}

/* High Score List */
.score-table {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
}

.score-table th, .score-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.score-table th {
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.85rem;
}

.score-table td {
    font-family: var(--font-display);
    font-size: 1.1rem;
}

/* Floating Toast Notifications
   Là con giữa của .hud-overlay (flex column, space-between) với margin-bottom:auto,
   nên nó luôn nằm ngay dưới hàng HUD trên và trên hàng vũ khí — không cần đoán
   toạ độ top cho từng cỡ màn hình như bản cũ (top: 80px cố định, phủ đúng lên
   chữ "ĐỢT 1" và số bot còn lại). */
.toast-msg {
    align-self: center;
    margin: 12px 0 auto;
    max-width: 100%;
    text-align: center;
    transform: translateY(-20px);
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--neon-blue);
    box-shadow: var(--glow-blue);
    padding: 10px 24px;
    border-radius: 30px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    z-index: 200;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.toast-msg.show {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   RESPONSIVE
   Sân đấu do canvas tự co giãn (xem resizeCanvas trong game.js);
   phần dưới đây lo cho HUD, cụm điều khiển cảm ứng và các modal
   để chúng không đè lên nhau khi màn hình hẹp hoặc thấp.
   ========================================================= */

/* Tai thỏ / thanh gạt home của iPhone khi xoay ngang ăn vào hai mép, nên HUD
   phải lùi vào theo vùng an toàn thay vì dùng số cố định. */
.hud-overlay {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* ---------- Màn hình vừa: laptop nhỏ, tablet ngang ---------- */
@media (max-width: 1024px) {
    .hud-overlay { padding-top: 12px; }
    .hud-box { padding: 10px 14px; border-radius: 14px; }
    .player-status { width: 220px; gap: 12px; }
    .avatar-badge { width: 38px; height: 38px; font-size: 1.15rem; }
    .bar-header { font-size: 0.85rem; }
    .wave-title { font-size: 1.15rem; }
    .stat-val { font-size: 1.2rem; }
    .weapon-slot { width: 66px; padding: 6px 4px; }
    .slot-icon { font-size: 1.2rem; }
}

/* ---------- Điện thoại ngang & tablet dựng ----------
   Ở đây chỗ trống theo chiều dọc mới là thứ hiếm, nên HUD phải mỏng lại chứ
   không chỉ hẹp lại. */
@media (max-width: 760px), (max-height: 560px) {
    .hud-overlay { padding-top: 10px; }
    .hud-top { gap: 8px; }
    .hud-box { padding: 7px 10px; border-radius: 12px; }

    .player-status { width: 190px; gap: 8px; }
    .avatar-badge { width: 30px; height: 30px; font-size: 0.95rem; }
    .avatar-badge span { font-size: 1rem !important; }
    .bar-header { font-size: 0.72rem; gap: 8px; margin-bottom: 3px; }
    /* Tên nhân vật dài nhất trong tiếng Việt là "Đặc Nhiệm Con Người" — cắt bớt
       thay vì cho nó đẩy thanh máu vỡ hàng. */
    #player-name-hud {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .health-track { height: 8px; }

    .wave-title { font-size: 0.95rem; }
    .bots-remaining { font-size: 0.7rem; }
    .hud-right { gap: 10px; }
    .stat-val { font-size: 1rem; }
    .stat-lbl { font-size: 0.6rem; }
    .stat-item[style] { margin-left: 8px !important; }

    .weapon-slots-bar { gap: 5px; padding: 6px 8px; }
    .weapon-slot { width: 46px; padding: 5px 4px; border-radius: 10px; }
    .slot-num { font-size: 0.6rem; top: 2px; left: 4px; padding: 0 4px; }
    .slot-icon { font-size: 1.05rem; margin-top: 6px; }
    /* Tên súng là thứ đầu tiên bỏ được: đã có icon, số phím và số đạn. */
    .slot-name { display: none; }
    .slot-ammo { font-size: 0.68rem; margin-top: 2px; }

    .buff-badge { padding: 4px 8px; font-size: 0.72rem; }
    .toast-msg { font-size: 0.9rem; padding: 7px 14px; margin-top: 8px; }
}

/* ---------- Màn hình thấp: điện thoại nằm ngang ----------
   Ở chiều cao 390px, header + footer + khoảng đệm ăn mất gần 40% màn hình và
   sân đấu chỉ còn một dải hẹp. Thu gọn khung trang lại để trả chỗ cho canvas. */
/* Chọn theo .app-wrapper để thắng được các quy tắc cùng tên trong site-chrome.css
   — tệp đó nạp sau, nên một selector một lớp ở đây sẽ thua dù nằm trong media
   query. */
@media (max-height: 560px) {
    body > .app-wrapper { padding: 6px 8px 8px; gap: 6px; }
    .app-wrapper > .unified-nav { padding: 4px 10px; border-radius: 14px; }
    .app-wrapper .nav-home { height: 28px; padding: 0 8px; border-radius: 9px; }
    .app-wrapper .nav-home img { height: 19px; }
    .app-wrapper .unified-nav .btn { padding: 5px 9px; font-size: 0.85rem; }
    .app-wrapper .unified-nav .brand-icon { font-size: 1.2rem; }
    .app-wrapper .unified-nav .brand-title { font-size: 1rem; }
    .app-wrapper > .site-footer { padding: 0; }
    .app-wrapper .lang-flag-btn { padding: 2px 6px; }
    .app-wrapper .lang-flag-btn img { width: 20px; height: 13px; }
    .game-viewport { border-radius: 14px; }
}

/* ---------- Điện thoại dựng ---------- */
@media (max-width: 560px) {
    .hud-overlay {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
    .stat-lbl { display: none; }
    #player-name-hud { display: none; }
    .bar-header { justify-content: flex-end; }
    /* Bỏ tên rồi thì hộp máu chỉ cần đủ cho avatar và thanh máu — nhường chỗ để
       hộp "ĐỢT / Bot còn lại" ở giữa không phải xuống bốn dòng. */
    .player-status { width: 130px; gap: 6px; }
    .wave-title, .bots-remaining { white-space: nowrap; }
    .weapon-slot { width: 42px; }
    .toast-msg { font-size: 0.82rem; }
}

/* ---------- Cụm điều khiển cảm ứng ----------
   Cần gạt nằm góc trái dưới, đúng chỗ hàng vũ khí vẫn đứng. Trên máy cảm ứng
   đưa hàng vũ khí vào giữa để nó lọt vào khoảng trống giữa cần gạt và nút bắn,
   còn huy hiệu buff xếp lên trên thay vì nằm cạnh nút bắn. */
body.is-touch .hud-bottom {
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
}

body.is-touch .buff-container { flex-wrap: wrap; justify-content: center; }

.touch-joystick-zone {
    left: max(30px, env(safe-area-inset-left));
    bottom: max(30px, env(safe-area-inset-bottom));
}

.touch-fire-btn {
    right: max(40px, env(safe-area-inset-right));
    bottom: max(40px, env(safe-area-inset-bottom));
}

@media (max-width: 900px), (max-height: 560px) {
    .touch-joystick-zone { width: 116px; height: 116px; }
    .joystick-knob { width: 44px; height: 44px; margin-top: -22px; margin-left: -22px; }
    .touch-fire-btn { width: 74px; height: 74px; font-size: 1.8rem; }
}

/* Hẹp tới mức hàng vũ khí căn giữa vẫn chạm vào cần gạt thì cho nó nổi hẳn lên
   phía trên hai nút điều khiển (cần gạt cao 116px + khoảng hở). */
@media (max-width: 620px) {
    body.is-touch .hud-bottom { margin-bottom: 150px; }
}

/* Màn hình laptop 600–700px chiều cao vẫn chưa đủ chỗ cho thẻ bắt đầu. */
@media (max-height: 700px) {
    .modal-icon { display: none; }
    .modal-title { font-size: 1.5rem; }
    .modal-subtitle { font-size: 0.88rem; margin-bottom: 12px; }
    .mode-card { padding: 10px; }
    .mode-desc { font-size: 0.78rem; }
    .setup-box { padding: 8px 10px; margin-bottom: 10px; }
    .setup-row { margin-bottom: 10px; }
    .btn-play { font-size: 1.05rem; padding: 9px 28px; }
}

/* ---------- Modal ----------
   Thẻ bắt đầu cao khoảng 950px, vượt quá màn hình laptop 768px nên nút BẮT ĐẦU
   CHƠI nằm dưới mép. Thu dần theo chiều cao thật của cửa sổ. */
@media (max-height: 1000px) {
    .modal-card { padding: 22px 26px; }
    .modal-icon { font-size: 2.4rem; margin-bottom: 6px; }
    .modal-title { font-size: 1.7rem; }
    .modal-subtitle { font-size: 0.95rem; margin-bottom: 16px; }
    .mode-grid { gap: 12px; margin-bottom: 16px; }
    .mode-card { padding: 14px 12px; }
    .mode-icon { font-size: 1.8rem; margin-bottom: 4px; }
    .setup-box { padding: 10px 12px; margin-bottom: 14px; }
    .setup-row { margin-bottom: 14px; }
    .modal-card .btn { font-size: 0.9rem; padding: 7px 12px; }
    .btn-play { font-size: 1.15rem; padding: 11px 32px; }
}

@media (max-width: 620px) {
    .modal-card { padding: 20px 16px; border-radius: 22px; }
    .modal-icon { font-size: 2.2rem; }
    .modal-title { font-size: 1.35rem; }
    .modal-subtitle { font-size: 0.88rem; margin-bottom: 14px; }
    /* Vẫn để hai cột: xếp một cột thì thẻ chế độ đẩy modal cao thêm gần 200px
       và nút bắt đầu lại rơi khỏi màn hình. Bỏ dòng mô tả là đủ gọn. */
    .mode-grid { gap: 8px; margin-bottom: 14px; }
    .mode-card { padding: 12px 8px; }
    .mode-icon { font-size: 1.5rem; margin-bottom: 2px; }
    .mode-name { font-size: 0.92rem; }
    .mode-desc { display: none; }
    .shop-grid { grid-template-columns: 1fr; gap: 10px; }
    .shop-item { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .shop-buy-btn { width: auto; padding: 6px 18px; }
    /* Hàng nút trang bị/độ khó tự xuống dòng thay vì tràn ngang. */
    .modal-card .btn { font-size: 0.88rem; padding: 7px 12px; }
    .setup-btns { gap: 6px; }
    .setup-label { font-size: 0.85rem; }
}

/* Điện thoại nằm ngang: chiều cao chỉ còn ~390px, modal phải gọn hết mức thì
   nút BẮT ĐẦU CHƠI mới nằm trong tầm nhìn. */
@media (max-height: 500px) {
    .modal-overlay { padding: 10px; }
    .modal-card { padding: 12px 16px; border-radius: 18px; }
    /* Biểu tượng và câu mô tả là phần trang trí — bỏ trước, giữ lại phần bé
       thật sự phải bấm. */
    .modal-icon { display: none; }
    .modal-title { font-size: 1.1rem; margin-bottom: 4px; }
    .modal-subtitle { display: none; }
    .mode-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
    .mode-card { padding: 8px 10px; border-radius: 14px; }
    .mode-icon { font-size: 1.2rem; margin-bottom: 2px; }
    .mode-name { font-size: 0.9rem; }
    .mode-desc { display: none; }
    .setup-box { padding: 8px 10px; margin-bottom: 8px; border-radius: 14px; }
    .setup-label { font-size: 0.75rem; margin-bottom: 6px; }
    .setup-btns { gap: 6px; }
    .setup-row { margin-bottom: 8px; gap: 6px; }
    .setup-label-inline { font-size: 0.8rem; }
    .modal-card .btn { font-size: 0.78rem; padding: 5px 9px; border-radius: 10px; }
    .btn-play { font-size: 1rem; padding: 9px 24px; border-radius: 14px; }
    .shop-grid { margin: 10px 0; }
}