/* ========================================= */
/* 1. BIẾN MÔI TRƯỜNG, THANH CUỘN VÀ NỀN     */
/* ========================================= */
:root {
    --game-bg-color: #2b0000;
    --game-board-color: #4a0000;
    --game-border-color: #ffd700;
    --game-text-color: #f1c40f;
    --game-btn-color: #d4af37;
    --game-btn-shadow: #8a6a1c;
    --game-btn-text-color: #2b0000;
    --game-bg-overlay: rgba(43, 0, 0, 0.34);
    --game-screen-start: rgba(74, 0, 0, 0.84);
    --game-screen-end: rgba(20, 0, 0, 0.94);
    --game-dialog-color: #2b0000;
    --game-modal-overlay: rgba(12, 0, 0, 0.9);
    --game-back-btn-color: #6b0000;
    --game-back-btn-text-color: #fff8dc;
    --game-back-btn-shadow: #3b0000;
    --game-panel-bg: rgba(20, 0, 0, 0.4);
    --game-panel-border: rgba(255, 215, 0, 0.3);
    --game-speed-box-bg: rgba(43, 0, 0, 0.8);
    --game-speed-box-border: rgba(255, 215, 0, 0.45);
    --card-red: #e74c3c;
    --card-black: #2d3436;
    --card-width: 45px;
    --card-height: 65px;
    --custom-card-back: url('../image/tranhba/matsau.png');
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #2b0000; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--game-border-color); border-radius: 4px; box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); }
::-webkit-scrollbar-thumb:hover { background: var(--game-text-color); }

* {
    scrollbar-width: thin;
    scrollbar-color: var(--game-border-color) #2b0000;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* SỬA LỖI: Cho phép chọn chữ lại đối với các ô nhập liệu/chat */
input, textarea {
    user-select: auto;
    -webkit-user-select: auto;
}

body {
    background-color: var(--game-bg-color);
    background-image: url('../image/web/bgweb.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* SỬA LỖI: Tự động co giãn khi thanh địa chỉ điện thoại ẩn/hiện */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background 0.5s ease, background-color 0.5s ease;
}

#bg-overlay {
    position: fixed;
    inset: 0;
    background: var(--game-bg-overlay);
    z-index: 0;
    display: block;
    pointer-events: none;
    transition: background 0.35s ease;
}

/* ========================================= */
/* TỐI ƯU HÓA HIỆU NĂNG (GPU ACCELERATION)   */
/* ========================================= */
.title-main, .btn-core::after, .winner-card-fx, .marquee-content {
    will-change: transform, background-position;
    transform: translateZ(0); /* Ép dùng Card đồ họa để chạy mượt trên Mobile */
}

/* ========================================= */
/* 2. MÀN HÌNH CHÍNH & TYPOGRAPHY            */
/* ========================================= */
.screen-container {
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, var(--game-screen-start) 0%, var(--game-screen-end) 100%);
    z-index: 10000;
    transition: background 0.35s ease;
}

#main-hub-screen { display: flex; }
#game-screen { background: transparent; z-index: 5000; }

.title-wrapper { text-align: center; margin-bottom: 40px; width: 100%; padding: 0 10px; }

.title-main {
    font-size: clamp(28px, 9vw, 42px);
    font-weight: 900;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--game-border-color), var(--game-text-color), #fff8dc, var(--game-text-color), var(--game-border-color));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text; /* CHUẨN HÓA CSS */
    -webkit-text-fill-color: transparent;
    color: transparent;    /* CHUẨN HÓA CSS */
    animation: shineEffect 3s linear infinite, waveEffect 3s ease-in-out infinite;
    line-height: 1.3;
    text-shadow: 0px 5px 15px rgba(0, 0, 0, 0.8);
    display: block;
}

@keyframes shineEffect { to { background-position: 200% center; } }
@keyframes waveEffect { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.title-sub {
    font-size: 13px;
    color: var(--game-text-color);
    letter-spacing: 6px;
    margin-top: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

/* ========================================= */
/* 3. NÚT BẤM (BUTTONS) & CHUYỂN CẢNH        */
/* ========================================= */
.menu-btn-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 15px;
}

.btn-core {
    width: 250px;
    height: 65px;
    background: var(--game-btn-color);
    color: var(--game-btn-text-color);
    border: none;
    border-radius: 35px;
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 8px 0px var(--game-btn-shadow), 0 15px 20px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.2s, color 0.2s;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.btn-core:active {
    box-shadow: 0 2px 0px var(--game-btn-shadow), 0 5px 10px rgba(0, 0, 0, 0.8);
    transform: translateY(6px);
}

.btn-core::after {
    content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg) translateX(-200%);
    animation: metalShineAnim 6s infinite;
}

@keyframes metalShineAnim { 0% { transform: skewX(-25deg) translateX(-200%); } 20% { transform: skewX(-25deg) translateX(400%); } 100% { transform: skewX(-25deg) translateX(400%); } }

.btn-back-hub {
    width: 200px; height: 50px; font-size: 16px; background: var(--game-back-btn-color); color: var(--game-back-btn-text-color);
    box-shadow: 0 6px 0px var(--game-back-btn-shadow), 0 10px 15px rgba(0, 0, 0, 0.5);
    margin-top: 30px; border: 1px solid var(--game-border-color);
}
.btn-back-hub:active { box-shadow: 0 2px 0px var(--game-back-btn-shadow), 0 5px 10px rgba(0, 0, 0, 0.5); }

.btn-scale-odd { animation: pulseA 1.5s infinite ease-in-out; }
.btn-scale-even { animation: pulseB 1.5s infinite ease-in-out; }

@keyframes pulseA { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes pulseB { 0%, 100% { transform: scale(1.05); } 50% { transform: scale(1); } }

#water-drop-fx {
    position: fixed; top: 50%; left: 50%; width: 10px; height: 10px;
    background: rgba(255, 215, 0, 0.9); border-radius: 50%;
    transform: translate(-50%, -50%) scale(0); z-index: 25000; pointer-events: none; display: none;
}
.water-drop-active { display: block !important; animation: liquidSplash 0.5s ease-out forwards; }
@keyframes liquidSplash { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(50); opacity: 0; } }

#glow-transition {
    position: fixed; inset: 0; background: var(--game-btn-color); z-index: 24000;
    opacity: 0; pointer-events: none; display: none;
}

/* ========================================= */
/* 4. CHỌN TƯỚNG & BÀN CỜ ĐUA XÌ             */
/* ========================================= */
.card-select-container { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; justify-items: center; margin: 0 auto; }
@keyframes shakeHover { 0% { transform: scale(1.1) rotate(-3deg); } 50% { transform: scale(1.1) rotate(3deg); } 100% { transform: scale(1.1) rotate(-3deg); } }

.selectable-card {
    width: 90px; height: 135px; background-color: transparent; background-size: auto 135%; background-position: center center;
    border-radius: 2px; display: flex; justify-content: center; align-items: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8); cursor: pointer; position: relative;
    border: none; filter: brightness(0.4);
    transition: filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; color: transparent;
}
.selectable-card:hover, .selectable-card:active {
    filter: brightness(1); animation: shakeHover 0.15s infinite; z-index: 10;
    box-shadow: 0 15px 30px rgba(255, 215, 0, 0.6), 0 0 15px var(--game-border-color);
}

.board-container {
    width: 95vw; max-width: 360px; aspect-ratio: 5 / 8; height: auto; max-height: 70vh;
    border: 4px solid var(--game-border-color); background: var(--game-board-color);
    border-radius: 16px; position: relative; overflow: hidden; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.9); margin: 0 auto;
}

.visual-grid { display: grid; grid-template-rows: repeat(7, 1fr); width: 100%; height: 100%; position: absolute; inset: 0; }
.visual-row { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid rgba(255, 215, 0, 0.1); }
.visual-cell { border-right: 1px solid rgba(255, 215, 0, 0.1); }
.visual-trap-cell { background: rgba(255, 215, 0, 0.05); border-right: none; }
#entity-layer { position: absolute; inset: 0; z-index: 10; }

.card-actor {
    width: 48px; height: 70px; background-color: transparent;
    border-radius: 2px; border: none; position: absolute;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.7); z-index: 50; background-size: auto 135%; background-position: center center; color: transparent;
}
.card-name-tag { position: absolute; top: -16px; font-size: 8px; color: var(--game-text-color); font-weight: 900; text-transform: uppercase; white-space: nowrap; text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.9); z-index: 55; }

.trap-actor {
    width: 48px; height: 70px; background-color: #2b0000; border: 2px solid var(--game-border-color);
    color: var(--game-border-color); border-radius: 2px; position: absolute; display: flex; justify-content: center;
    align-items: center; font-size: 20px; z-index: 40; background-size: auto 135%; background-position: center center; font-weight: bold;
}
.alert-trap { animation: trapSyncGlow 0.4s infinite alternate; cursor: pointer; pointer-events: auto; }
@keyframes trapSyncGlow { from { box-shadow: 0 0 2px transparent; } to { box-shadow: 0 0 25px var(--game-border-color); border-color: #ffffff; background: rgba(255, 215, 0, 0.2); } }

.bottom-control-area { margin-top: 15px; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 130px; }
.deck-wrapper-3d { width: 70px; height: 100px; perspective: 1000px; cursor: pointer; border-radius: 2px; border: none; box-shadow: 0 5px 15px rgba(0,0,0,0.8); }
.deck-rotator { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; will-change: transform; }
.deck-card-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 2px; border: none; display: flex; justify-content: center; align-items: center; font-size: 40px; color: transparent; background-size: auto 135%; background-position: center center; }
.face-back { background-image: url('../image/tranhba/matsau.png'); background-size: cover; background-position: center center; background-repeat: no-repeat; }
.face-front { background-color: transparent; transform: rotateY(180deg); }

#system-status-msg { color: var(--game-text-color); font-weight: 900; font-size: 13px; text-transform: uppercase; margin-top: 5px; text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.9); text-align: center; height: 35px; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 10px; }

/* ========================================= */
/* 5. MODAL (LỚP PHỦ) & CHIẾN THẮNG          */
/* ========================================= */
.fullscreen-overlay { position: fixed; inset: 0; background: var(--game-modal-overlay); display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 20000; transition: background 0.35s ease; }
.dialog-box { position: relative; background: var(--game-dialog-color); padding: 25px; border-radius: 15px; border: 2px solid var(--game-border-color); width: 360px; max-height: 85vh; overflow-y: auto; box-shadow: 0 0 30px var(--game-panel-border); transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.close-btn { position: absolute; top: 12px; right: 15px; font-size: 12px; color: var(--game-text-color); cursor: pointer; font-weight: bold; line-height: 1; }

.victory-headline { font-size: 45px; font-weight: 900; color: var(--game-text-color); text-shadow: 0 0 30px var(--game-text-color); animation: victoryPulseAnim 1s infinite alternate; margin-bottom: 20px; text-align: center; }
@keyframes victoryPulseAnim { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
#victory-card-podium { height: 150px; display: flex; justify-content: center; align-items: center; margin: 20px 0; }
.winner-card-fx { animation: victoryFloatAnim 2s infinite ease-in-out !important; position: relative; overflow: hidden; box-shadow: 0 0 40px var(--game-border-color) !important; border: none !important; border-radius: 2px; margin: 0 !important; top: auto !important; left: auto !important; }
.winner-card-fx::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.9), transparent); transform: skewX(-20deg) translateX(-150%); animation: winnerShineLoop 1.5s infinite linear; }
@keyframes winnerShineLoop { 0% { transform: skewX(-20deg) translateX(-150%); } 100% { transform: skewX(-20deg) translateX(150%); } }
@keyframes victoryFloatAnim { 0%, 100% { transform: translateY(0) scale(2); } 50% { transform: translateY(-25px) scale(2.1); } }
#victory-player-name { color: #ffffff; font-size: 20px; font-weight: 900; text-transform: uppercase; text-align: center; margin-top: 30px; margin-bottom: 40px; line-height: 1.5; text-shadow: 0 0 10px #ffd700; }
.btn-row { display: flex; gap: 15px; }

/* ========================================= */
/* 6. GAME THÙNG BÁCH HÍ (ARCADE)            */
/* ========================================= */
.arcade-container {
    position: relative; width: 95vw; max-width: 380px; height: 90vh; max-height: 850px; background: #1a0000;
    border: 4px solid var(--game-border-color); border-radius: 15px; box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
    display: flex; flex-direction: column; overflow: hidden;
}
.game-header-bar { width: 100%; height: 40px; padding: 0 15px; background: #3b0000; border-bottom: 2px solid var(--game-border-color); display: flex; justify-content: space-between; align-items: center; color: var(--game-text-color); font-weight: bold; flex-shrink: 0; z-index: 5; }
.canvas-area { flex-grow: 1; position: relative; background: #000; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.canvas-area canvas { width: 100%; height: 100%; object-fit: fill; background: #0a0000; touch-action: none; display: block; }
.arcade-controls-panel { height: 190px; flex-shrink: 0; background: #2b0000; border-top: 4px solid var(--game-border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 25px; box-sizing: border-box; padding-bottom: 50px; }

.dpad-container { display: grid; grid-template-columns: 55px 55px 55px; grid-template-rows: 55px 55px; gap: 8px; pointer-events: auto; }
.ctrl-btn { background: rgba(255, 215, 0, 0.15); border: 3px solid rgba(255, 215, 0, 0.7); border-radius: 12px !important; color: rgba(255, 255, 255, 0.95); font-size: 28px; display: flex; justify-content: center; align-items: center; user-select: none; touch-action: manipulation; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); }
.ctrl-btn:active { background: rgba(255, 215, 0, 0.8); transform: scale(0.92); color: #000; }
.btn-up-class { grid-column: 2; grid-row: 1; } .btn-left-class { grid-column: 1; grid-row: 2; } .btn-down-class { grid-column: 2; grid-row: 2; } .btn-right-class { grid-column: 3; grid-row: 2; }

.action-container { display: flex; align-items: flex-end; pointer-events: auto; }
.btn-a-class { width: 80px; height: 80px; border-radius: 50% !important; background: rgba(255, 215, 0, 0.15); border: 4px solid rgba(255, 215, 0, 0.7); color: rgba(255, 255, 255, 0.95); font-size: 36px; font-weight: bold; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); touch-action: manipulation; }
.btn-a-class:active { background: rgba(255, 215, 0, 0.8); transform: scale(0.9); color: #000; }

.game-over-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 20000; }
.game-over-text { font-size: 38px; color: #e74c3c; font-weight: 900; text-shadow: 0 0 15px #ff0000; margin-bottom: 10px; text-transform: uppercase; }
.final-score-text { font-size: 22px; color: #fff; margin-bottom: 30px; font-weight: bold; }
.btn-row,
.game-over-btn-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
.btn-row .btn-core,
.game-over-btn-row .btn-core {
    width: 120px !important;
    height: 50px !important;
    margin: 0 !important;
    font-size: 14px !important;
}
.btn-row .btn-back-hub,
.game-over-btn-row .btn-back-hub {
    margin-top: 0 !important;
}

/* ========================================= */
/* 7. SETTINGS & KHO NHẠC TIÊN CUNG          */
/* ========================================= */
.custom-input-field { width: 100%; padding: 15px; border-radius: 10px; border: 2px solid var(--game-back-btn-color); background: rgba(0, 0, 0, 0.32); color: #ffffff; font-size: 14px; outline: none; text-align: center; margin: 20px 0; transition: border-color 0.3s, box-shadow 0.3s; }
.custom-input-field:focus { border-color: var(--game-border-color); box-shadow: 0 0 15px var(--game-border-color); }
.settings-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--game-text-color); font-weight: bold; font-size: 14px; }
.settings-row input[type="color"] { width: 50px; height: 30px; border: 1px solid #ffffff; background: transparent; cursor: pointer; }
.settings-row input[type="range"] { width: 120px; accent-color: var(--game-border-color); }
.file-label { background: var(--game-back-btn-color); padding: 5px 10px; border-radius: 5px; cursor: pointer; border: 1px solid var(--game-border-color); font-size: 12px; color: var(--game-back-btn-text-color); display: inline-block; text-align: center; }
#settings-trigger-btn { position: fixed; top: 15px; right: 15px; font-size: 28px; z-index: 25000; cursor: pointer; text-shadow: 0 0 10px #000; }

.music-carousel-wrapper { width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; display: flex; gap: 0; padding-bottom: 10px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
.music-carousel-wrapper::-webkit-scrollbar { width: 0; height: 0; display: none; background: transparent; }
.music-carousel-wrapper.is-dragging { cursor: grabbing; user-select: none; }
.music-page { min-width: 100%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 0 5px; }
.pagination-container { display: flex; justify-content: center; gap: 5px; margin-top: 10px; margin-bottom: 15px; flex-wrap: wrap; align-items: center; }
.page-btn { background: var(--game-back-btn-color); color: var(--game-back-btn-text-color); border: 1px solid var(--game-border-color); border-radius: 4px; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: bold; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.page-btn.active { background: var(--game-border-color); color: var(--game-btn-text-color); border-color: var(--game-border-color); }

.music-item-row { background: var(--game-panel-bg); padding: 10px; border-radius: 8px; border: 1px solid var(--game-border-color); display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; }
.music-left-group { display: flex; align-items: center; gap: 10px; width: 55%; overflow: hidden; }
.music-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: var(--game-border-color); display: none; }
.delete-mode-active .music-checkbox { display: inline-block; }
.music-name-txt { font-weight: bold; font-size: 13px; color: var(--game-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s; }
.music-actions-grid { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; }
.music-actions-row { display: flex; gap: 10px; width: 100%; justify-content: space-between; }
.btn-music-config { width: 28px; height: 30px; border-radius: 5px; font-weight: bold; cursor: pointer; font-size: 12px; transition: all 0.3s ease; border: 1px solid var(--game-border-color); background: var(--game-back-btn-color); color: var(--game-back-btn-text-color); }

@keyframes rgbBorderGlow { 0% { border-color: #ff0000; box-shadow: 0 0 15px #ff0000; } 33% { border-color: #ffd700; box-shadow: 0 0 15px #ffd700; } 66% { border-color: #ff8c00; box-shadow: 0 0 15px #ff8c00; } 100% { border-color: #ff0000; box-shadow: 0 0 15px #ff0000; } }
.music-row-rgb { animation: rgbBorderGlow 2.5s linear infinite !important; background: #2a0000 !important; transform: scale(1.02); z-index: 2; }
.music-row-rgb .music-name-txt { color: #ffffff !important; text-shadow: 0 0 8px #ffffff; }
.music-row-dimmed { background: #0a0000 !important; border-color: #333 !important; opacity: 0.6; }
.music-row-dimmed .music-name-txt { color: #666 !important; }
.btn-shuffle-active { background: var(--game-btn-color) !important; color: var(--game-btn-text-color) !important; box-shadow: 0 0 20px var(--game-btn-color), 0 5px 0 var(--game-btn-shadow) !important; animation: pulseA 1.5s infinite ease-in-out; }

.stealth-player-panel { background: rgba(20, 0, 0, 0.85); border: 1px solid var(--game-panel-border); border-radius: 12px; padding: 12px 15px; margin-top: 15px; display: flex; flex-direction: column; gap: 8px; transition: background 0.35s ease, border-color 0.35s ease; }
.stealth-btn { background: transparent; border: none; color: var(--game-text-color); font-weight: bold; cursor: pointer; outline: none; transition: transform 0.1s; }
.stealth-btn:active { transform: scale(0.8); }
.btn-play-stealth { width: 35px; height: 35px; border-radius: 50%; background: var(--game-btn-color); color: var(--game-btn-text-color); display: flex; justify-content: center; align-items: center; box-shadow: 0 0 10px var(--game-border-color); font-size: 16px; }
.stealth-time { font-family: monospace; color: var(--game-text-color); font-size: 9px !important; -webkit-text-size-adjust: none; }
.stealth-seek { flex: 1; height: 4px; border-radius: 2px; accent-color: var(--game-border-color); cursor: pointer; background: #444; -webkit-appearance: none; appearance: none; }
.stealth-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--game-btn-color); box-shadow: 0 0 5px #000; }
.speed-drag-box, #btn-skip-ad { font-size: 9px !important; -webkit-text-size-adjust: none; }
.speed-drag-box { background: var(--game-speed-box-bg); border: 1px dashed var(--game-speed-box-border); padding: 2px 4px; border-radius: 4px; font-weight: bold; color: var(--game-text-color); cursor: ew-resize; user-select: none; touch-action: none; text-align: center; transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease; }

@keyframes marquee-rtl { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
.marquee-container { width: 100%; overflow: hidden; white-space: nowrap; position: relative; margin-bottom: 10px; }
.marquee-content { display: inline-block; animation: marquee-rtl 7s linear infinite; font-size: 12px; color: var(--game-text-color); font-weight: bold; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); }

/* ========================================= */
/* HIỆU ỨNG CẢNH BÁO QUẢNG CÁO YOUTUBE       */
/* ========================================= */
.marquee-ad-alert {
    animation: none !important;
    transform: translateX(0) !important;
    color: var(--game-text-color) !important;
    cursor: pointer !important;
    text-shadow: 0 0 10px var(--game-text-color), 0 0 15px var(--game-text-color) !important;
    transition: transform 0.1s;
}
.marquee-ad-alert:active { transform: scale(0.95) !important; }

/* ========================================= */
/* TRÌNH PHÁT NỔI (FLOATING PLAYER)          */
/* ========================================= */
.floating-player-container {
    position: fixed;
    top: 30px;
    left: 20px;
    width: 280px;
    background: var(--game-panel-bg);
    border: 2px solid var(--game-border-color);
    border-radius: 12px;
    z-index: 30000;
    overflow: visible;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    touch-action: none;
    transition: opacity 0.3s ease;
    container-type: inline-size;
    container-name: floatingplayer;
}
.floating-player-container.hidden-mode {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0) !important;
}

/* Chế độ Video */
.floating-player-container.video-mode { aspect-ratio: 16 / 9; height: auto; border-radius: 8px; overflow: hidden; background: var(--game-panel-bg); border: 2px solid var(--game-border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
.video-mode .audio-only-element { display: none !important; }

/* Chế độ Audio (Tàng hình khung ngoài, nhường chỗ cho Dialog Box bên trong) */
.floating-player-container.audio-mode { 
    width: auto !important; 
    height: auto !important; 
    aspect-ratio: auto; 
    border: none !important; 
    background: transparent !important; 
    box-shadow: none !important; 
    overflow: visible !important;
}
.audio-mode .video-only-element { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }

.floating-controls { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; transition: opacity 0.3s ease; z-index: 10; pointer-events: none; }
.floating-controls > * { pointer-events: auto; }

/* HIỆU ỨNG DOUBLE TAP VIDEO YOUTUBE */
.video-tap-zone { position: absolute; top: 0; width: 50%; height: 100%; z-index: 15; display: flex; justify-content: center; align-items: center; }
#video-tap-left { left: 0; }
#video-tap-right { right: 0; }
.video-center-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px !important; height: 50px !important; font-size: 20px !important; z-index: 25; background: rgba(0,0,0,0.6) !important; color: #fff !important; border: 2px solid var(--game-border-color) !important; box-shadow: 0 0 15px rgba(0,0,0,0.8) !important; transition: opacity 0.3s, transform 0.1s !important; cursor: pointer; }
.video-center-play-btn:active { transform: translate(-50%, -50%) scale(0.85); }
.ripple-effect { opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px; text-shadow: 0 0 5px #000; background: rgba(0,0,0,0.4); width: 100%; height: 100%; border-radius: 50%; transform: scale(0.5); pointer-events: none; }
.ripple-effect.active { animation: ytRipple 0.4s ease-out forwards; }
.ripple-circle { width: 35px; height: 35px; border-radius: 50%; background: rgba(255,255,255,0.3); margin-bottom: 5px; animation: pulseA 0.4s infinite; }
@keyframes ytRipple { 0% { opacity: 1; transform: scale(0.8); border-radius: 50%; } 50% { opacity: 1; transform: scale(1); border-radius: 30%; } 100% { opacity: 0; transform: scale(1.2); border-radius: 0; } }

/* ========================================= */
/* 8. MA SÓI & ONLINE (TỤ NGHĨA ĐƯỜNG)       */
/* ========================================= */
.diff-btn { width: 100%; height: 50px; margin-bottom: 12px; font-size: 16px; font-weight: bold; color: #2b0000; border: none; border-radius: 25px; cursor: pointer; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5); transition: transform 0.1s; }
.diff-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.diff-1 { background: #2ecc71; } .diff-2 { background: #f1c40f; } .diff-3 { background: #e67e22; } .diff-4 { background: #e74c3c; color: #fff; }

.tab-btn-group { display: flex; gap: 10px; margin-bottom: 20px; }
.tab-btn { flex: 1; padding: 12px 0; background: var(--game-back-btn-color); color: var(--game-back-btn-text-color); border: 1px solid var(--game-border-color); border-radius: 8px; font-weight: bold; cursor: pointer; }
.tab-btn.active { background: var(--game-btn-color); color: var(--game-btn-text-color); }
.tab-content { display: none; text-align: left; font-size: 14px; line-height: 1.6; color: #fff8dc; }
.tab-content.active { display: block; }
.rule-hl { color: var(--game-text-color); font-weight: bold; }

.name-inputs-wrapper { display: flex; flex-direction: column; gap: 15px; width: 85%; max-width: 320px; margin: 0 auto; }
.name-inputs-wrapper input { width: 100%; padding: 15px; border-radius: 10px; border: 2px solid var(--game-border-color); background: rgba(0, 0, 0, 0.32); color: #ffffff; font-size: 16px; outline: none; text-align: center; opacity: 0; box-shadow: 0 0 5px var(--game-border-color); transition: box-shadow 0.3s ease; }
.name-inputs-wrapper input:focus { box-shadow: 0 0 20px var(--game-border-color); }

#online-access-status {
    margin-top: 12px !important;
    margin-bottom: 18px !important;
}

.game-grid-5 { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; }
.game-slot-btn { background: #1a0000; border: 2px solid var(--game-border-color); color: var(--game-text-color); padding: 15px; border-radius: 10px; font-weight: bold; font-size: 16px; cursor: pointer; text-transform: uppercase; transition: transform 0.1s, box-shadow 0.1s; box-shadow: 0 4px 0 #8a6a1c; }
.game-slot-btn:active { transform: translateY(4px); box-shadow: 0 0px 0 #8a6a1c; }
.aolang-route-panel {
    width: 100%;
    max-width: 360px;
    padding: 14px;
    border: 1px solid var(--game-border-color);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.34);
    box-shadow: 0 0 20px var(--game-panel-border);
    display: grid;
    gap: 14px;
    text-align: center;
}
.aolang-route-panel p {
    color: #fff8dc;
    font-size: 13px;
    line-height: 1.5;
}
.aolang-game-choice-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}
.aolang-game-choice-card {
    width: 100%;
    min-height: 56px;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff8dc;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.aolang-game-choice-card:hover,
.aolang-game-choice-card.is-selected {
    border-color: var(--game-border-color);
    background: rgba(212, 175, 55, 0.16);
    transform: translateY(-1px);
}
.aolang-game-choice-card:disabled {
    cursor: not-allowed;
    opacity: 0.52;
    transform: none;
}
.aolang-game-choice-title {
    display: block;
    font-size: 14px;
    font-weight: 900;
    color: var(--game-text-color);
}
.aolang-game-choice-sub {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #f5deb3;
}
.aolang-game-choice-badge {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 5px 7px;
    border-radius: 6px;
    border: 1px solid currentColor;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    color: #2ecc71;
}
.aolang-game-choice-card:disabled .aolang-game-choice-badge {
    color: #b9a581;
}
.aolang-create-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid rgba(212, 175, 55, 0.42);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.32);
    color: #fff8dc;
}
.aolang-create-head strong {
    color: var(--game-text-color);
    font-size: 16px;
}
.aolang-create-kicker {
    color: #f5deb3;
    font-size: 11px;
    line-height: 1.3;
}
.aolang-icon-btn {
    width: 36px;
    min-width: 36px;
    height: 34px;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
}

.ww-day-bg { background: radial-gradient(circle at center, #2c3e50 0%, #000000 100%) !important; }
.ww-night-bg { background: radial-gradient(circle at center, #0B0C10 0%, #000000 100%) !important; }

.lobby-panel { display: flex; flex-direction: column; gap: 15px; text-align: left; }
.lobby-info-box { background: rgba(0, 0, 0, 0.5); padding: 15px; border-radius: 8px; border: 1px dashed var(--game-border-color); display: flex; justify-content: space-between; align-items: center; }
.player-list-container { max-height: 120px; overflow-y: auto; background: rgba(0, 0, 0, 0.28); padding: 10px; border-radius: 5px; border: 1px solid var(--game-back-btn-color); }
.player-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: bold; font-size: 14px; color: #fff; padding: 5px; border-radius: 4px; }
.player-status-dot { width: 10px; height: 10px; background: #2ecc71; border-radius: 50%; box-shadow: 0 0 5px #2ecc71; margin-right: 10px; }

.chat-box-container { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.chat-messages { height: 150px; background: rgba(0, 0, 0, 0.34); border: 1px solid var(--game-back-btn-color); border-radius: 5px; padding: 10px; overflow-y: auto; font-size: 13px; }
.chat-msg { margin-bottom: 5px; line-height: 1.4; }
.chat-msg .sender { color: var(--game-border-color); font-weight: bold; }
.chat-input-row { display: flex; gap: 5px; }
.chat-input { flex: 1; padding: 10px; background: rgba(0, 0, 0, 0.24); border: 1px solid var(--game-border-color); color: #fff; border-radius: 5px; outline: none; }
.copy-icon-btn { width: 28px; height: 26px; min-width: 28px; padding: 0; margin: 0; font-size: 16px; line-height: 1; background: #4b2b00; color: #fff8dc; border: 1px solid var(--game-border-color); border-radius: 5px; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; }
.public-room-card { background: rgba(0,0,0,0.6); padding: 8px; margin-bottom: 7px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid rgba(212,175,55,0.35); border-radius: 6px; }
.public-room-title { color:#fff; font-size: 14px; line-height: 1.4; }
.public-room-meta { color:#f1c40f; font-size: 12px; }
.public-room-game { color:#2ecc71; font-size: 11px; border: 1px solid #2ecc71; border-radius: 4px; padding: 2px 5px; margin-left: 4px; white-space: nowrap; }
.aolang-context-menu {
    position: fixed;
    z-index: 26000;
    min-width: 210px;
    padding: 6px;
    border: 1px solid var(--game-border-color);
    border-radius: 8px;
    background: rgba(18, 10, 8, 0.98);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
    color: #fff8dc;
    font-size: 13px;
}
.aolang-context-item,
.aolang-context-subtitle {
    width: 100%;
    min-height: 34px;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #fff8dc;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: context-menu;
}
.aolang-context-item:hover,
.aolang-context-subtitle:hover {
    background: rgba(212, 175, 55, 0.18);
    color: var(--game-text-color);
}
.aolang-context-submenu {
    position: relative;
}
.aolang-context-submenu-panel {
    position: absolute;
    top: -6px;
    left: calc(100% + 6px);
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--game-border-color);
    border-radius: 8px;
    background: rgba(18, 10, 8, 0.98);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
    display: none;
}
.aolang-context-submenu:hover .aolang-context-submenu-panel {
    display: block;
}
.aolang-admin-dialog {
    width: min(94vw, 820px);
    max-height: 88vh;
}
.aolang-rename-dialog {
    width: min(92vw, 360px);
}
.aolang-rename-note {
    color: #f5deb3;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 12px;
}
.aolang-rename-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.aolang-rename-actions .btn-core {
    flex: 1;
    height: 42px;
    margin: 0;
}
.aolang-admin-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.aolang-admin-stat,
.aolang-admin-room,
.aolang-admin-player {
    border: 1px solid rgba(212, 175, 55, 0.38);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.34);
    padding: 10px;
}
.aolang-admin-stat strong,
.aolang-admin-room strong,
.aolang-admin-player strong {
    color: var(--game-text-color);
}
.aolang-admin-body {
    display: grid;
    gap: 10px;
}
.aolang-admin-section-title {
    color: var(--game-border-color);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    margin: 6px 0;
}
.aolang-admin-room-head,
.aolang-admin-player-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.aolang-admin-meta {
    color: #f5deb3;
    font-size: 12px;
    line-height: 1.45;
    margin-top: 4px;
}
.aolang-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.aolang-admin-mini-btn {
    width: auto;
    min-width: 72px;
    height: 30px;
    margin: 0;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 11px;
    box-shadow: none;
}
.aolang-player-action-name {
    border: 0;
    background: transparent;
    color: #fff8dc;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    padding: 0;
    display: inline;
}
.aolang-player-action-name:hover {
    color: var(--game-text-color);
    text-decoration: underline;
}

.ww-card { display: inline-block; width: 80px; height: 110px; background: #2b0000; border: 2px solid var(--game-border-color); border-radius: 8px; margin: 5px; line-height: 110px; text-align: center; font-weight: bold; font-size: 14px; color: #fff; vertical-align: top; cursor: pointer; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); transition: transform 0.3s; }
.ww-card:hover { transform: scale(1.05); }
.ww-card.facedown { background: url('../image/web/Locket_1772905974882_44.jpg') center/cover; color: transparent; }

.ww-target-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; max-height: 200px; overflow-y: auto; }
.ww-target-btn { background: var(--game-dialog-color); border: 2px solid var(--game-back-btn-color); color: #fff; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: bold; text-align: center; transition: all 0.2s; }
.ww-target-btn.selected { border-color: var(--game-border-color); background: rgba(255, 215, 0, 0.2); box-shadow: 0 0 15px var(--game-border-color); }
.ww-target-btn.dead { opacity: 0.3; pointer-events: none; text-decoration: line-through; }

.ww-timer-text { font-size: 30px; font-weight: 900; color: #e74c3c; text-align: center; text-shadow: 0 0 10px #e74c3c; margin: 10px 0; }
.ww-transition-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 40px; font-weight: 900; color: #fff; text-shadow: 0 0 20px #fff; text-align: center; z-index: 30000; pointer-events: none; opacity: 0; }
/* ========================================= */
/* CSS CHO HỆ THỐNG PHÒNG CHỜ ESPORTS        */
/* ========================================= */

/* Trạng thái mặc định của các nút chọn */
.ww-mode-btn, .ww-vis-btn {
    transition: all 0.3s ease;
}

/* Trạng thái nút khi được chọn (Hiệu ứng Dính/Sáng lên) */
.ww-mode-btn.active, .ww-vis-btn.active {
    background: #2ecc71 !important;
    color: #fff !important;
    border: 1px solid #27ae60 !important;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.5) !important;
    transform: scale(1.05);
}

/* Nút xác nhận bị KHÓA (Khi chưa chọn gì) */
.btn-locked {
    background: #222 !important;
    color: #555 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 0.7;
}

/* Nút xác nhận được MỞ KHÓA (Sẵn sàng bấm) */
.btn-unlocked {
    background: #e74c3c !important;
    color: #fff !important;
    cursor: pointer !important;
    box-shadow: 0 4px 0 #c0392b !important;
    animation: pulseGlow 1.5s infinite; /* Hiệu ứng chớp nháy nhẹ gây chú ý */
}

/* Hiệu ứng nhịp đập cho nút mở khóa */
@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

/* Làm đẹp thanh cuộn cho Danh sách phòng Công khai */
#ww-public-rooms-list::-webkit-scrollbar {
    width: 6px;
}
#ww-public-rooms-list::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3);
    border-radius: 5px;
}
#ww-public-rooms-list::-webkit-scrollbar-thumb {
    background: #d4af37;
    border-radius: 5px;
}
/* ========================================= */
/* CSS DÀNH RIÊNG CHO KHU VỰC HÀNG XÉN       */
/* ========================================= */
.swipe-container {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; gap: 20px; padding-bottom: 10px;
    -ms-overflow-style: none; scrollbar-width: none; width: 100%; max-width: 360px;
}
.swipe-container::-webkit-scrollbar { display: none; }

.swipe-page {
    min-width: 100%; scroll-snap-align: center; display: flex; flex-direction: column;
    gap: 15px; max-height: 55vh; overflow-y: auto; padding-right: 5px;
}
.swipe-page::-webkit-scrollbar { width: 4px; }
.swipe-page::-webkit-scrollbar-thumb { background: var(--game-back-btn-color); border-radius: 4px; }

.shop-card {
    background: var(--game-dialog-color); border: 1px solid var(--game-border-color);
    border-radius: 12px; padding: 15px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.shop-img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; margin-bottom: 12px; background: rgba(0, 0, 0, 0.26); border: 1px solid var(--game-border-color); }
.shop-title { color: var(--game-border-color); font-size: 18px; margin-bottom: 8px; font-weight: bold; }
.shop-desc { color: var(--game-text-color); font-size: 13px; line-height: 1.5; margin-bottom: 15px; font-style: italic; }
.btn-order { background: var(--game-btn-color); color: var(--game-btn-text-color); width: 100%; height: 40px; font-size: 15px; box-shadow: 0 4px 0 var(--game-btn-shadow); }

.dot-nav { display: flex; justify-content: center; gap: 8px; margin-bottom: 15px; }
.dot { width: 10px; height: 10px; background: #555; border-radius: 50%; transition: 0.3s; }
.active-dot { background: var(--game-border-color); box-shadow: 0 0 8px var(--game-border-color); }
/* ========================================= */
/* CSS DÙNG CHUNG CHO PROFILE NHÂN SỰ & SHOP */
/* ========================================= */

.profile-card { 
    background: var(--game-dialog-color); 
    border: 2px solid var(--game-border-color); 
    border-radius: 15px; 
    padding: 20px; 
    text-align: left; 
    box-shadow: 0 0 20px var(--game-panel-border); 
    margin-bottom: 10px; /* Đã chỉnh lại thành 10px cho gọn */
    width: 100%; 
    max-width: 360px; 
}
.profile-name { color: var(--game-border-color); font-size: 24px; margin-bottom: 5px; text-transform: uppercase; text-align: center; text-shadow: 0 0 10px var(--game-border-color); }
.profile-title { color: var(--game-text-color); font-size: 14px; margin-bottom: 15px; text-align: center; font-style: italic; }
.role-desc { color: var(--game-text-color); font-size: 13px; line-height: 1.5; text-align: center;}

/* Đồng bộ theme cho toàn bộ màn hình route và modal chi tiết */
.screen-container .dialog-box {
    background: var(--game-dialog-color) !important;
    border-color: var(--game-border-color) !important;
    box-shadow: 0 0 20px var(--game-panel-border) !important;
}
.screen-container .music-item-row {
    background: var(--game-panel-bg) !important;
    border: 1px solid var(--game-border-color) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.screen-container .music-name-txt,
.screen-container .title-sub,
.screen-container .profile-title,
.screen-container .role-desc {
    color: var(--game-text-color) !important;
}
.screen-container .profile-card {
    background: var(--game-dialog-color) !important;
    border-color: var(--game-border-color) !important;
    box-shadow: 0 0 20px var(--game-panel-border) !important;
}
.screen-container .profile-name {
    color: var(--game-border-color) !important;
    text-shadow: 0 0 10px var(--game-border-color) !important;
}
.screen-container .profile-card .hidden-detail,
.screen-container .shop-item .profile-card > div:not(.hidden-detail),
#detail-profile-desc,
#detail-profile-desc p,
#detail-profile-desc div,
#detail-profile-desc span,
#detail-profile-desc li,
#detail-profile-desc strong,
#detail-profile-desc em {
    color: var(--game-text-color) !important;
}
.screen-container .profile-card .hidden-detail,
#detail-profile-desc,
#detail-profile-desc p,
#detail-profile-desc div,
#detail-profile-desc span,
#detail-profile-desc li,
#detail-profile-desc strong,
#detail-profile-desc em {
    white-space: pre-line;
    word-break: normal;
    overflow-wrap: break-word;
}
.screen-container .btn-music-config {
    background: var(--game-back-btn-color) !important;
    color: var(--game-back-btn-text-color) !important;
    border: 1px solid var(--game-border-color) !important;
    box-shadow: none !important;
}
.screen-container .page-btn {
    background: var(--game-back-btn-color) !important;
    color: var(--game-back-btn-text-color) !important;
    border-color: var(--game-border-color) !important;
}
.screen-container .page-btn.active {
    background: var(--game-border-color) !important;
    color: var(--game-btn-text-color) !important;
}
.screen-container .hidden-detail img,
#overlay-profile-detail img {
    border-color: var(--game-border-color) !important;
}
#overlay-profile-detail .dialog-box {
    background: var(--game-dialog-color) !important;
    border-color: var(--game-border-color) !important;
    box-shadow: 0 0 20px var(--game-panel-border) !important;
}
#overlay-profile-detail .profile-name {
    color: var(--game-border-color) !important;
    text-shadow: 0 0 10px var(--game-border-color) !important;
}
#overlay-profile-detail .profile-title {
    color: var(--game-text-color) !important;
    border-bottom-color: var(--game-back-btn-color) !important;
}
#detail-profile-media {
    width: 100%;
    margin: 0 0 18px;
}
.detail-media-frame {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    border: 2px solid var(--game-border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.35);
    background: rgba(0, 0, 0, 0.18);
}
.detail-media-frame[data-media-type="image"] {
    aspect-ratio: 1 / 1;
}
.detail-media-frame[data-media-type="video"] {
    aspect-ratio: 16 / 9;
}
.detail-media-frame img,
.detail-media-frame video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.2);
}
.detail-media-caption {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: var(--game-text-color);
}
#overlay-profile-detail .btn-core {
    background: var(--game-btn-color) !important;
    color: var(--game-btn-text-color) !important;
    box-shadow: 0 5px 0 var(--game-btn-shadow) !important;
}

/* Đồng bộ thêm cho các màn hình con trong Hội Thao */
#snake-screen .game-over-text,
#tetris-screen .game-over-text,
#chicken-screen .game-over-text,
#ww-phase-title {
    color: var(--game-border-color) !important;
    text-shadow: 0 0 10px var(--game-border-color) !important;
}
#snake-screen .final-score-text,
#tetris-screen .final-score-text,
#chicken-screen .final-score-text,
#ww-game-area p {
    color: var(--game-text-color) !important;
}
#chicken-screen .arcade-container,
#chicken-screen .game-header-bar,
#ww-game-area {
    border-color: var(--game-border-color) !important;
}
#ww-game-area {
    background: var(--game-panel-bg) !important;
}
#btn-a-tetris,
#chicken-screen .game-over-overlay .btn-core.ui-btn:not(.btn-back-hub) {
    background: var(--game-btn-color) !important;
    color: var(--game-btn-text-color) !important;
    border-color: var(--game-btn-shadow) !important;
    box-shadow: 0 5px 0 var(--game-btn-shadow) !important;
}

/* Ép thẻ profile-card kích thước chuẩn, không bị giãn vỡ khi nhét vào khung chia trang */
.auto-paginate-container .profile-card {
    margin-bottom: 12px !important; /* Khoảng cách giữa 3 người vừa phải */
    width: 100% !important;
    max-width: 360px !important;
    flex: 0 0 auto !important; /* Tuyệt đối không cho phép tự động phình to hay teo nhỏ */
    height: auto !important;
}

/* Fix lỗi padding của khung chia trang dạng Flex (dọc) */
.auto-paginate-container[data-layout="flex"] .music-page {
    justify-content: flex-start !important; /* Ép thẻ nằm từ trên xuống, không bị đẩy rớt ra giữa */
    padding-top: 5px !important;
}

/* ========================================= */
/* CÁC THÀNH PHẦN CŨ (DỰ PHÒNG & HÀNG XÉN)   */
/* ========================================= */

/* CSS Công nghệ Vuốt "Nam Châm" (Scroll Snapping cũ) */
.magnet-slider {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; width: 100%; max-width: 400px;
    padding-bottom: 15px; scrollbar-width: none;
}
.magnet-slider::-webkit-scrollbar { display: none; }
.magnet-page { flex: 0 0 100%; scroll-snap-align: center; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 5px; }

/* Style card cho Hàng Xén */
.shop-card {
    background: var(--game-dialog-color); border: 1px solid var(--game-border-color); border-radius: 8px; padding: 10px; text-align: center; box-shadow: 0 4px 0 var(--game-btn-shadow);
}
.shop-card img { width: 100%; max-height: 120px; object-fit: contain; margin-bottom: 8px; border-radius: 5px; border: 1px solid var(--game-border-color); }
.shop-card h3 { color: var(--game-border-color); font-size: 14px; margin-bottom: 5px; }
.shop-card p { color: var(--game-text-color); font-size: 12px; margin-bottom: 10px; }

/* ========================================= */
/* HIỆU ỨNG TẢI DỮ LIỆU (GLOBAL LOADER)      */
/* ========================================= */
.global-loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999999;
    flex-direction: column;
}
.global-loader-overlay.active { display: flex; }
.loader {
    display: inline-block;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    position: relative;
    border: 4px solid var(--game-border-color);
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: zafox-spin 1.5s linear infinite;
}
.loader::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 26px;
    height: 26px;
    border: 4px solid var(--card-red);
    border-top-color: transparent;
    border-radius: 50%;
    animation: zafox-spin-reverse 1s linear infinite;
}
@keyframes zafox-spin {
    from { transform: rotate(0); }
    to { transform: rotate(1turn); }
}
@keyframes zafox-spin-reverse {
    from { transform: rotate(0); }
    to { transform: rotate(-1turn); }
}