/*
 * Phong cách "navy + vàng" (cùng ngôn ngữ với Vòng quay may mắn / Truyện tương tác) cho layout game chung (components/layouts/game.blade.php).
 * File RIÊNG, nạp SAU khối <style> của layout nên cùng độ ưu tiên vẫn thắng - các game (đường đua, ghép hình, gắp thú, hộp bí mật) KHÔNG phải sửa CSS riêng.
 *
 * Nguyên tắc: CHỈ đổi màu / bóng / viền, KHÔNG đổi kích thước hộp (width/height/padding/border-width) vì JS của các game tự tính cỡ sân chơi theo kích thước thật.
 * Tranh sân chơi của bé (thú, hộp quà, tủ gắp, đường đua) giữ nguyên màu tươi; chỉ khung ngoài + chữ nằm trực tiếp trên nền được đổi.
 * Bảng màu: vàng #fbd56a / #e0a82e, nâu viền #7a5a12, chữ sáng #eef1ff, navy #1b2160 -> #0c1030. Nền nằm ở games/partials/world-backdrop.blade.php.
 */

/* =====================================================================================================================
 * 1) MENU NỔI (mọi trang dùng layout game: game, truyện, vòng quay...)
 * ===================================================================================================================== */
.gl-menu .gl-fab { color: #fff; background: linear-gradient(#2a3290, #161b5a); border-color: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px rgba(12, 16, 48, .5), 0 6px 18px rgba(0, 0, 0, .5); }
.gl-menu .gl-fab:hover { filter: brightness(1.12); }
.gl-menu.open .gl-fab { background: linear-gradient(#3a44b0, #1f2578); }
.gl-menu .gl-tip { background: #0c1030; color: #fbd56a; border: 1px solid rgba(251, 213, 106, .45); }
.gl-menu .gl-tip::after { background: #0c1030; border: 1px solid rgba(251, 213, 106, .45); border-bottom: 0; border-right: 0; }
.gl-menu .gl-tip.down::after { transform: rotate(225deg); }

.gl-menu .gl-panel {
    /* các biến --tui-* chỉ đổi BÊN TRONG panel: toàn bộ ô/nút dùng var(--tui-*) tự chuyển sang tông tối */
    --tui-surface: #0f1347; --tui-surface-2: rgba(255, 255, 255, .06); --tui-border: rgba(251, 213, 106, .26);
    --tui-muted: rgba(238, 241, 255, .62); --tui-text: #eef1ff;
    color: #eef1ff; background: linear-gradient(180deg, #1b2160, #0c1030); border-color: rgba(251, 213, 106, .45);
    box-shadow: 0 0 0 1px rgba(251, 213, 106, .14), 0 24px 54px rgba(0, 0, 0, .6);
}
.gl-menu .gl-head { background: linear-gradient(135deg, #232a78, #0f1347); border-bottom: 1px solid rgba(251, 213, 106, .3); }
.gl-menu .gl-head::after { background: linear-gradient(90deg, transparent, #fbd56a 30%, #fbd56a 70%, transparent); height: 2px; bottom: -2px; }
.gl-menu .gl-head-txt strong { color: #fbd56a; letter-spacing: .04em; }
.gl-menu .gl-head-ico { background: rgba(251, 213, 106, .14); box-shadow: inset 0 0 0 1px rgba(251, 213, 106, .4); }
.gl-menu .gl-close { background: rgba(255, 255, 255, .1); color: #f6e9bd; }
.gl-menu .gl-close:hover { background: rgba(251, 213, 106, .25); }
.gl-menu .gl-av { color: #3b2600; background: linear-gradient(#fde68a, #e0a82e); box-shadow: 0 0 0 3px rgba(251, 213, 106, .45), 0 3px 8px rgba(0, 0, 0, .4); }
.gl-menu .gl-btn { background: rgba(255, 255, 255, .07); color: #f6e9bd; border-color: rgba(251, 213, 106, .35); }
.gl-menu .gl-btn:hover { border-color: #fbd56a; color: #fff3cf; background: rgba(251, 213, 106, .14); }
.gl-menu .gl-btn.pri { color: #3b2600; border-color: transparent; background: linear-gradient(#fde68a, #e0a82e); box-shadow: 0 0 0 2px #7a5a12; }
.gl-menu .gl-btn.pri:hover { filter: brightness(1.07); background: linear-gradient(#fde68a, #e0a82e); color: #3b2600; }
.gl-menu .gl-btn.out { color: #fca5a5; }
.gl-menu .gl-btn.out:hover { border-color: #f87171; background: rgba(239, 68, 68, .14); color: #fecaca; }
.gl-menu .gl-home { color: #3b2600; background: linear-gradient(#fde68a, #e0a82e); border: 0; box-shadow: 0 0 0 2px #7a5a12; }
.gl-menu .gl-home:hover { filter: brightness(1.07); }
.gl-menu .gl-tile { color: #eef1ff; }
.gl-menu .gl-tile:hover, .gl-menu .gl-tile:focus-visible { box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }
.gl-menu .gl-dock button:hover { border-color: #fbd56a; background: rgba(251, 213, 106, .16); }
.gl-menu .gl-panel a:focus-visible, .gl-menu .gl-panel button:focus-visible, .gl-menu .gl-fab:focus-visible { outline: 2px solid #fbd56a; outline-offset: 2px; }

/* =====================================================================================================================
 * 2) KHUNG THẺ chung của layout (.gl-card) + khung viền vàng cho iframe (Hộp bí mật)
 * ===================================================================================================================== */
.gl-card { border-color: #fbd56a; box-shadow: 0 0 0 2px #7a5a12, 0 7px 0 2px #5a420e, 0 22px 38px rgba(0, 0, 0, .5); }
.gl-bd .gl-rim { margin: 4px 8px 12px; border-color: #fbd56a; box-shadow: 0 0 0 2px #7a5a12, 0 6px 0 2px #5a420e, 0 20px 38px rgba(0, 0, 0, .55), 0 0 44px rgba(251, 213, 106, .14); }

/* Chữ nằm TRỰC TIẾP trên nền (khách/hết lượt/hướng dẫn...) phải sáng - thẻ trắng bên trong game vẫn giữ chữ tối như cũ */
.gl-bd .gl-stage > div > .text-center, .gl-bd .gl-stage .rg-lock { color: #eef1ff; }
.gl-bd .gl-stage > div > .text-center .tui-muted, .gl-bd .gl-stage .rg-lock .tui-muted { color: rgba(238, 241, 255, .72); }
.gl-bd .gl-stage > div > div > p.tui-muted { color: rgba(238, 241, 255, .72); }
.gl-bd .gl-stage > div > div > p.tui-muted a { color: #fbd56a; }

/* =====================================================================================================================
 * 3) ĐƯỜNG ĐUA VUI VẺ (livewire/racing-game.blade.php)
 * ===================================================================================================================== */
.gl-bd .rg-viewport { border-color: #fbd56a; box-shadow: 0 0 0 2px #7a5a12, 0 6px 0 2px #5a420e, 0 22px 40px rgba(0, 0, 0, .55), 0 0 46px rgba(251, 213, 106, .16); }
.gl-bd .rg-quota { color: rgba(238, 241, 255, .72); }
.gl-bd .rg-quota a { color: #fbd56a; }
.gl-bd .rg-root > .rg-cue { color: #fbd56a; text-shadow: 0 1px 8px rgba(251, 213, 106, .35); }
.gl-bd .rg-controls > .rg-hint { color: rgba(238, 241, 255, .72); }
.gl-bd .rg-chip { background: linear-gradient(#fde68a, #e0a82e); color: #3b2600; border-color: #7a5a12; }
.gl-bd .rg-pill, .gl-bd .rg-soundbtn { border-color: rgba(251, 213, 106, .7); background: rgba(255, 255, 255, .92); color: #3b2600; }
.gl-bd .rg-pill[aria-pressed="true"] { background: linear-gradient(#fde68a, #e0a82e); border-color: #7a5a12; color: #3b2600; }
.gl-bd .rg-btn { box-shadow: 0 6px 0 #d9577f, 0 10px 22px rgba(255, 111, 168, .28), 0 0 0 2px rgba(255, 243, 196, .55); }

/* =====================================================================================================================
 * 4) GHÉP HÌNH (livewire/shape-matching-game.blade.php)
 * ===================================================================================================================== */
.gl-bd .sg-block { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .95), 0 0 0 3px #fbd56a, 0 0 0 5px #7a5a12, 0 8px 0 5px #5a420e, 0 22px 38px rgba(0, 0, 0, .5); }
.gl-bd .sg-note { color: rgba(238, 241, 255, .72); }
.gl-bd .sg-note a { color: #fbd56a; }
.gl-bd .sg-score-pill { box-shadow: 0 0 0 2px #fbd56a, 0 0 0 4px #7a5a12, 0 8px 16px rgba(0, 0, 0, .4); }
.gl-bd .sg-chars { background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(251, 213, 106, .5); }
.gl-bd .sg-chars-label { color: #f6e9bd; }
.gl-bd .sg-char-btn { box-shadow: 0 0 0 1px rgba(251, 213, 106, .6); }

/* =====================================================================================================================
 * 5) GẮP THÚ (games/claw-machine.blade.php)
 * ===================================================================================================================== */
.gl-bd .cm-ask { border-color: rgba(251, 213, 106, .8); box-shadow: 0 0 0 2px #fbd56a, 0 0 0 4px #7a5a12, 0 12px 26px rgba(0, 0, 0, .45); }
.gl-bd .cm-cab { background: linear-gradient(165deg, #2a3175 0%, #1b2160 48%, #101451 100%);
    box-shadow: 0 0 0 2px #fbd56a, 0 5px 0 2px #7a5a12, 0 20px 36px rgba(0, 0, 0, .55), 0 0 44px rgba(251, 213, 106, .14), inset 0 2px 0 rgba(255, 255, 255, .22); }
.gl-bd .cm-root::before { background-image: radial-gradient(rgba(251, 213, 106, .1) 1.6px, transparent 1.9px); }

/* =====================================================================================================================
 * 6) HỘP BÍ MẬT - khung iframe (livewire/mystery-box-game.blade.php dùng class .gl-rim); phần trong iframe dùng nền ở world-backdrop.
 * ===================================================================================================================== */