/* ════════════════════════════════════════════════════════════════════════
   game-ui.css — "Aurora Arcade" design system dùng chung cho 9 game surface
   (PC | iPad | Mobile). Mobile-first, mọi kích thước fluid bằng clamp(),
   safe-area aware — mục tiêu: KHÔNG THỂ vỡ layout ở bất kỳ viewport nào.

   Cách dùng trong view:
     1. <link href="~/css/game-ui.css" />
     2. Đặt theme:  .gx-app { --gx-a:#…; --gx-b:#…; --gx-bg1:#…; --gx-bg2:#…; }
     3. Markup khung: .gx-app > .gx-top / .gx-timer / .gx-stage / .gx-tray
     4. Overlay:      .gx-overlay > .gx-card  (id start/gameOver giữ nguyên cho engine)
   Mỗi view chỉ còn: theme vars + CSS board riêng của game (class engine sinh ra).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Theme mặc định (view override) ─────────────────────────────────────── */
.gx-app {
    --gx-a:   #8B7CFF;              /* accent chính (nút, giá trị HUD)        */
    --gx-b:   #FF7AC8;              /* accent phụ (gradient nút)              */
    --gx-bg1: #191436;              /* nền trên                               */
    --gx-bg2: #2C1B52;              /* nền dưới                               */
    --gx-glow: rgba(139,124,255,.5);/* quầng sáng accent                      */
    --gx-ink: #FFFFFF;              /* chữ chính trên nền tối                 */
    --gx-dim: rgba(255,255,255,.62);/* chữ phụ                                */
    --gx-glass:   rgba(255,255,255,.10);
    --gx-glass-2: rgba(255,255,255,.16);
    --gx-line:    rgba(255,255,255,.22);
    --gx-r:  clamp(14px, 2.2vw, 22px);
    --gx-r-lg: clamp(20px, 3vw, 30px);
    --gx-gap: clamp(6px, 1.2vw, 12px);
    --gx-pad: clamp(8px, 1.6vw, 16px);
    --gx-ok:  #3EE6B0;
    --gx-bad: #FF6E7E;
    --gx-warn:#FFC94D;
}

/* ── Khung app: full màn hình, cột dọc, safe-area ───────────────────────── */
.gx-app {
    position: relative;
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: var(--gx-gap);
    box-sizing: border-box;
    padding: max(env(safe-area-inset-top, 8px), 8px)
             max(env(safe-area-inset-right, 8px), 10px)
             max(env(safe-area-inset-bottom, 8px), 10px)
             max(env(safe-area-inset-left, 8px), 10px);
    color: var(--gx-ink);
    font-family: 'Fredoka', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', sans-serif;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}
.gx-app *, .gx-app *::before, .gx-app *::after { box-sizing: border-box; }

/* Nền aurora: 2 lớp gradient + blob sáng, vẽ cố định phía sau */
.gx-app::before {
    content: '';
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(1100px 520px at 85% -10%, color-mix(in srgb, var(--gx-a) 42%, transparent), transparent 62%),
        radial-gradient(900px 560px at -12% 68%, color-mix(in srgb, var(--gx-b) 30%, transparent), transparent 60%),
        radial-gradient(700px 420px at 55% 118%, color-mix(in srgb, var(--gx-a) 22%, transparent), transparent 65%),
        linear-gradient(178deg, var(--gx-bg1) 0%, var(--gx-bg2) 100%);
}
/* Hạt sao lấp lánh */
.gx-app::after {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.9), transparent),
        radial-gradient(1px 1px at 32% 8%,  rgba(255,255,255,.7), transparent),
        radial-gradient(1.6px 1.6px at 56% 24%, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 74% 12%, rgba(255,255,255,.6), transparent),
        radial-gradient(1.2px 1.2px at 88% 32%, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 22% 52%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.3px 1.3px at 68% 58%, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 42% 78%, rgba(255,255,255,.45), transparent),
        radial-gradient(1.2px 1.2px at 90% 82%, rgba(255,255,255,.55), transparent);
}

/* ── Topbar: back + tiêu đề + HUD chips + công cụ — 1 hàng, không bao giờ vỡ ── */
.gx-top {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1vw, 10px);
    flex-shrink: 0;
    min-width: 0;
}
.gx-back {
    flex-shrink: 0;
    width:  clamp(34px, 8vw, 42px);
    height: clamp(34px, 8vw, 42px);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--gx-glass);
    border: 1px solid var(--gx-line);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--gx-ink); text-decoration: none;
    font-weight: 800; font-size: clamp(.9rem, 2.4vw, 1.05rem);
    transition: transform .15s, background .15s;
}
.gx-back:active { transform: scale(.92); background: var(--gx-glass-2); }
.gx-title { min-width: 0; flex-shrink: 1; display: flex; flex-direction: column; line-height: 1.2; }
.gx-title h1 {
    margin: 0; min-width: 0;
    font-size: clamp(.88rem, 2.6vw, 1.18rem); font-weight: 800; color: var(--gx-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gx-sub { font-size: clamp(.58rem, 1.7vw, .72rem); color: var(--gx-dim); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* HUD chips: dải cuộn ngang khi chật — không bao giờ tràn dòng */
.gx-chips {
    display: flex; align-items: center;
    gap: clamp(4px, .8vw, 8px);
    min-width: 0; flex: 1;
    justify-content: flex-end;
    overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 2px 0;
}
.gx-chips::-webkit-scrollbar { display: none; }
.gx-chip {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 4px;
    padding: clamp(4px, .9vw, 7px) clamp(8px, 1.4vw, 13px);
    border-radius: 999px;
    background: var(--gx-glass);
    border: 1px solid var(--gx-line);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font-size: clamp(.68rem, 1.9vw, .85rem); font-weight: 800; color: var(--gx-ink);
    white-space: nowrap;
}
.gx-chip b, .gx-chip .val { font-weight: 800; color: var(--gx-warn); font-style: normal; }
.gx-chip.hearts { letter-spacing: 1px; font-size: clamp(.58rem, 1.6vw, .72rem); }
@keyframes hud-bump { 0%,100% { transform: scale(1); } 45% { transform: scale(1.4); } }
.hud-bump { display: inline-block; animation: hud-bump .32s ease; }

/* Nút mute / BXH trong topbar */
.gx-tools { display: flex; gap: clamp(4px, .8vw, 8px); flex-shrink: 0; align-items: center; }
.gx-app .mute-btn, .gx-app .lb-btn {
    padding: clamp(4px, .9vw, 7px) clamp(7px, 1.3vw, 12px);
    background: var(--gx-glass);
    border: 1px solid var(--gx-line);
    color: var(--gx-ink);
    font-size: clamp(.6rem, 1.7vw, .74rem); font-weight: 700;
    font-family: inherit; cursor: pointer; white-space: nowrap;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.gx-app .lb-btn { color: var(--gx-warn); border-color: color-mix(in srgb, var(--gx-warn) 45%, transparent); }

/* ── Timer: rãnh kính + thanh phát sáng ─────────────────────────────────── */
.gx-timer {
    flex-shrink: 0;
    width: 100%; height: clamp(7px, 1.2vw, 10px);
    border-radius: 999px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.12);
    overflow: hidden;
}
.gx-timer > div { height: 100%; width: 100%; border-radius: 999px; transition: width .1s linear;
    background: linear-gradient(90deg, var(--gx-ok), #7CF7D4); box-shadow: 0 0 12px var(--gx-ok); }
.gx-timer > div.urgent   { background: linear-gradient(90deg, #FF9D5C, var(--gx-warn)); box-shadow: 0 0 12px var(--gx-warn); }
.gx-timer > div.critical { background: linear-gradient(90deg, #FF4D6A, #FF8A5C); box-shadow: 0 0 14px var(--gx-bad); animation: gx-timer-pulse .3s infinite; }
@keyframes gx-timer-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ── Sân khấu & khay ────────────────────────────────────────────────────── */
.gx-stage { flex: 1; min-height: 0; position: relative; }
.gx-panel {
    border-radius: var(--gx-r-lg);
    background: var(--gx-glass);
    border: 1px solid var(--gx-line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.gx-tray { flex-shrink: 0; min-width: 0; }

/* ── Overlay hệ thống (start / game-over / tutorial) ────────────────────── */
.gx-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column; align-items: center;
    padding: max(env(safe-area-inset-top, 14px), 14px) 14px
             max(env(safe-area-inset-bottom, 14px), 14px);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background:
        radial-gradient(900px 500px at 80% -8%, color-mix(in srgb, var(--gx-a) 38%, transparent), transparent 60%),
        radial-gradient(700px 480px at 6% 80%, color-mix(in srgb, var(--gx-b) 26%, transparent), transparent 58%),
        linear-gradient(178deg, color-mix(in srgb, var(--gx-bg1) 94%, black), color-mix(in srgb, var(--gx-bg2) 94%, black));
    animation: gx-fade .25s ease;
}
@keyframes gx-fade { from { opacity: 0; } to { opacity: 1; } }
.gx-card {
    margin: auto;                          /* căn giữa mà vẫn cuộn được khi tràn */
    width: min(100%, 480px);
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: clamp(18px, 4vw, 30px) clamp(14px, 3.4vw, 26px);
    border-radius: var(--gx-r-lg);
    background: rgba(255,255,255,.09);
    border: 1px solid var(--gx-line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3);
    animation: gx-pop .3s cubic-bezier(.175,.885,.32,1.3);
}
@keyframes gx-pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.gx-hero { font-size: clamp(3rem, 9vw, 4.4rem); line-height: 1.1; margin-bottom: 6px;
    filter: drop-shadow(0 8px 22px var(--gx-glow)); animation: gx-float 2.6s ease-in-out infinite; }
@keyframes gx-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.gx-h1 {
    font-size: clamp(1.4rem, 4.6vw, 2rem); font-weight: 800; line-height: 1.25; margin-bottom: 6px;
    background: linear-gradient(92deg, #fff 10%, color-mix(in srgb, var(--gx-a) 60%, white), var(--gx-b));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gx-p { font-size: clamp(.82rem, 2.4vw, .95rem); color: var(--gx-dim); line-height: 1.7; margin-bottom: 14px; max-width: 40ch; }
.gx-stat { font-size: clamp(.92rem, 2.6vw, 1.08rem); color: var(--gx-warn); font-weight: 700; margin-bottom: 12px; line-height: 1.8; }
.gx-stat b { color: #fff; }

/* Nút chính: viên kẹo gradient phát sáng */
.gx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: clamp(11px, 2.4vw, 15px) clamp(24px, 5vw, 34px);
    border: none; border-radius: 999px; cursor: pointer; text-decoration: none;
    font-family: inherit; font-weight: 800; color: #fff;
    font-size: clamp(.92rem, 2.6vw, 1.05rem);
    background: linear-gradient(135deg, var(--gx-a), var(--gx-b));
    box-shadow: 0 10px 26px var(--gx-glow), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.22);
    transition: transform .18s cubic-bezier(.175,.885,.32,1.4), filter .18s, box-shadow .18s;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    -webkit-tap-highlight-color: transparent;
}
.gx-btn:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.07); }
.gx-btn:active { transform: translateY(1px) scale(.97); filter: brightness(.95); }
.gx-btn.ok { background: linear-gradient(135deg, #17C99A, #43D9B8); box-shadow: 0 10px 26px rgba(62,230,176,.4), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.22); }
.gx-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: clamp(7px, 1.7vw, 10px) clamp(16px, 3.4vw, 22px);
    border-radius: 999px; cursor: pointer; text-decoration: none;
    background: var(--gx-glass); border: 1px solid var(--gx-line);
    color: var(--gx-ink); font-family: inherit; font-weight: 700;
    font-size: clamp(.76rem, 2.1vw, .86rem);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: transform .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.gx-btn-ghost:active { transform: scale(.96); background: var(--gx-glass-2); }
.gx-btnrow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.gx-note { font-size: clamp(.7rem, 2vw, .8rem); color: var(--gx-dim); font-weight: 600;
    background: var(--gx-glass); border: 1px solid var(--gx-line);
    padding: 4px 14px; border-radius: 999px; margin: 6px 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Nhập tên + lưu điểm ────────────────────────────────────────────────── */
.gx-namerow { display: flex; gap: 8px; margin: 8px 0 4px; width: 100%; max-width: 380px; flex-wrap: wrap; justify-content: center; }
.gx-input {
    flex: 1 1 170px; min-width: 0;
    padding: clamp(10px, 2.2vw, 12px) 16px;
    border-radius: 999px; border: 1.5px solid var(--gx-line);
    background: rgba(0,0,0,.25); color: #fff; outline: none;
    font-family: inherit; font-size: 1rem; font-weight: 600; text-align: center;
    transition: border-color .2s, background .2s;
}
.gx-input::placeholder { color: rgba(255,255,255,.4); }
.gx-input:focus { border-color: var(--gx-a); background: rgba(0,0,0,.35); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gx-a) 30%, transparent); }
.gx-save {
    flex-shrink: 0;
    padding: clamp(10px, 2.2vw, 12px) 20px;
    border: none; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-weight: 800; font-size: .9rem; color: #063F2E;
    background: linear-gradient(135deg, #4BF0BE, #17C99A);
    box-shadow: 0 8px 20px rgba(62,230,176,.35), inset 0 -3px 0 rgba(0,0,0,.16);
    transition: transform .15s, filter .15s;
}
.gx-save:active { transform: scale(.96); }
.gx-save:disabled { opacity: .55; cursor: default; }

/* ── Bảng xếp hạng trong overlay (bảng trắng cho dễ đọc) ────────────────── */
.gx-lb { width: 100%; max-width: 420px; margin-top: 10px; max-height: min(240px, 32dvh); overflow-y: auto;
    background: rgba(255,255,255,.97); border-radius: 16px; padding: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.gx-lb-title { font-size: .86rem; font-weight: 800; color: #3A3357; text-align: center; margin-bottom: 6px; }

/* ── Tutorial khung chung (scene bên trong do từng game style) ──────────── */
.gx-tut { text-align: center; max-width: 380px; width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; }
.gx-tut-scene {
    width: min(100%, 250px); height: 150px; margin: 0 auto 12px;
    position: relative; border-radius: 16px; overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
    border: 1px solid var(--gx-line);
}
.gx-tut-label { font-size: clamp(.78rem, 2.2vw, .86rem); color: var(--gx-ink); font-weight: 600; margin: 4px 0 12px; line-height: 1.55; }
#tutDots, .gx-tut-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.tut-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); transition: all .3s; display: inline-block; }
.tut-dot.active { background: var(--gx-warn); transform: scale(1.35); box-shadow: 0 0 8px var(--gx-warn); }
.gx-tut-actions { display: flex; gap: 10px; justify-content: center; align-items: center; }

/* ── Toast nhỏ (loadingToast / wrongToast / shuffleToast dạng chung) ────── */
.gx-toast {
    position: fixed; left: 50%; bottom: max(env(safe-area-inset-bottom, 18px), 18px);
    transform: translateX(-50%) translateY(20px);
    padding: 9px 20px; border-radius: 999px; z-index: 300;
    background: rgba(10,8,26,.88); color: #fff; font-weight: 700; font-size: .84rem;
    border: 1px solid var(--gx-line); backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
    white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
}
.gx-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Hiệu ứng phổ biến engine sinh ra (confetti/burst/score-popup chung) ── */
.gx-fx-popup { position: absolute; pointer-events: none; z-index: 58; font-weight: 800;
    font-size: clamp(1.05rem, 2.8vw, 1.35rem); animation: gx-fx-float .9s cubic-bezier(.2,.8,.3,1) forwards; }
.gx-fx-popup.correct { color: var(--gx-ok); text-shadow: 0 0 14px color-mix(in srgb, var(--gx-ok) 70%, transparent); }
.gx-fx-popup.wrong   { color: var(--gx-bad); text-shadow: 0 0 14px color-mix(in srgb, var(--gx-bad) 70%, transparent); }
@keyframes gx-fx-float { 0% { transform: translateY(0) scale(.5); opacity: 0; }
    20% { transform: translateY(-6px) scale(1.2); opacity: 1; } 100% { transform: translateY(-54px) scale(.85); opacity: 0; } }
.gx-fx-burst { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); z-index: 60;
    font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; color: var(--gx-warn); pointer-events: none; white-space: nowrap;
    text-shadow: 0 0 18px color-mix(in srgb, var(--gx-warn) 75%, transparent); animation: gx-fx-burst 1s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes gx-fx-burst { 0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.5); }
    20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.3); } 100% { opacity: 0; transform: translateX(-50%) translateY(-80px) scale(.9); } }
.gx-fx-confetti { position: absolute; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; z-index: 55;
    animation: gx-fx-confetti 1s ease-out forwards; }
@keyframes gx-fx-confetti { 0% { transform: translate(0,0) rotate(0) scale(1); opacity: 1; }
    100% { transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(.3); opacity: 0; } }

/* Trung hoà lớp clay cũ của game-tokens.css trong khung gx (specificity 0,4,0 > 0,3,0) */
:root[data-device] .gx-app .mute-btn,
:root[data-device] .gx-app .lb-btn {
    border: 1px solid var(--gx-line);
    border-radius: 999px;
    box-shadow: none;
    transition: transform .15s, background .15s;
}
:root[data-device] .gx-app .mute-btn:hover,
:root[data-device] .gx-app .lb-btn:hover { transform: translateY(-1px); filter: none; background: var(--gx-glass-2); }
:root[data-device] .gx-app .mute-btn:active,
:root[data-device] .gx-app .lb-btn:active { transform: scale(.95); box-shadow: none; }
:root[data-device] .gx-app .lb-btn { border-color: color-mix(in srgb, var(--gx-warn) 45%, transparent); }

/* ── Scale theo thiết bị (data-device do _Layout stamp) ─────────────────── */
:root[data-device="ipad"] .gx-app { --gx-gap: clamp(10px, 1.4vw, 16px); --gx-pad: clamp(12px, 2vw, 20px); }
:root[data-device="ipad"] .gx-card { width: min(100%, 560px); }
:root[data-device="pc"]   .gx-app { max-width: 1180px; margin: 0 auto; }
:root[data-device="pc"]   .gx-card { width: min(100%, 520px); }
:root[data-device="pc"]   .gx-chips { overflow: visible; }

/* Màn hình rất lùn (điện thoại xoay ngang): overlay dồn lên trên cho khỏi kẹt bàn phím */
@media (max-height: 560px) {
    .gx-overlay { justify-content: flex-start; }
    .gx-card { margin: 0 auto auto; }
    .gx-hero { font-size: 2.2rem; margin-bottom: 2px; }
}