:root {
    --primary-color: #2e7d32;
    --secondary-color: #43a047;
    --background-color: #f1f8e9;
    --text-color: #433;
    --correct-color: #4caf50;
    --incorrect-color: #f44336;
    --timer-color: #e57370;
    --text-on-light-bg: #333;
    --text-on-dark-bg: white;
    --font-size-sm: clamp(0.8rem, 1.5vw, 1rem);
    --font-size-md: clamp(1rem, 2vw, 1.25rem);
    --font-size-lg: clamp(1.15rem, 2.25vw, 1.5rem);
    --font-size-xl: clamp(1rem, 3vw, 2rem);
}

@font-face { font-family: 'End'; src: url('End.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Result'; src: url('Result.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Viettay'; src: url('Viettay.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'ViettayBold'; src: url('ViettayBold.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background-color);
    background-image: url('Background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100svh;
    min-height: calc(var(--vh, 1vh) * 100);
    overflow-y: auto;
    position: relative;
    padding-top: 1vh;
}

#dim-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 14; display: none; opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
#dim-overlay.active { display: block; opacity: 1; }

/* Background chuyển cảnh mượt mà trong giao diện khi chơi */
.game-bg-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    overflow: hidden;
}
.game-bg-container.active {
    opacity: 1;
}
.game-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}
.game-bg-layer.visible {
    opacity: 1;
}

#evaluation-text {
    font-family: 'End', sans-serif;
    color: black;
    font-size: clamp(1rem, 4vw, 2rem);
    width: 100%; line-height: 1.2; margin: 0; padding: 0;
}

.letter-title {
    font-family: 'ViettayBold', cursive, sans-serif;
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    font-weight: bold;
    color: #1a0800;
    margin: 0 0 clamp(4px, 0.8vh, 10px) 0;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(255, 235, 200, 0.5);
    flex-shrink: 0;
}

.letter-body {
    font-family: 'Viettay', cursive, sans-serif;  
    font-size: clamp(0.95rem, 1.7vw, 1.22rem);
    line-height: 1.38;
    white-space: pre-wrap;
    color: #200a00;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(255, 240, 210, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(5px, 1.1vh, 11px);
    width: 100%;
}
.letter-body p {
    margin: 0;
    padding: 0;
}
.letter-body p:last-child {
    font-family: 'ViettayBold', cursive, sans-serif;
    font-size: clamp(1.0rem, 1.8vw, 1.28rem);
    color: #120400;
    font-weight: bold;
    margin-top: clamp(4px, 0.8vh, 8px);
}

.start-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; z-index: 30;
    background-image: url('Background0.jpg');
    background-size: cover; background-position: center;
    padding: 1rem; transition: opacity 1s ease-in-out;
}
.start-screen.hidden { opacity: 0; pointer-events: none; }
        
.logo-container {
    position: absolute; top: 1vh; left: 1vw;
    display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 35;
}
.logo-container img { width: clamp(60px, 10vw, 100px); height: auto; margin-bottom: 0.5vh; }
.logo-container p {
    font-size: clamp(0.6rem, 1.2vw, 0.9rem); font-weight: bold; color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); white-space: nowrap;
}

.author-info {
    position: absolute; bottom: 0.5vh; right: 1vw;
    font-size: clamp(0.6rem, 1.2vw, 0.9rem); font-weight: bold; color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); z-index: 35; white-space: nowrap;
}
        
.game-title-img {
    width: 90%; max-width: 600px; height: auto;
    animation: fadeInScale 2s ease-in-out forwards; margin-bottom: 2rem;
}
        
.start-btn {
    background-color: #4caf50; color: white;
    font-size: var(--font-size-lg); padding: 0.75em 2em;
    border: none; border-radius: 50px; cursor: pointer;
    transition: all 0.2s ease; box-shadow: 0 9px #388e3c;
    text-transform: uppercase; font-weight: 700;
    font-family: 'Press Start 2P', cursive;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeInScale 2s ease-in-out 0.5s forwards; opacity: 0;
}
.start-btn:hover { background-color: #43a047; box-shadow: 0 7px #388e3c; transform: translateY(2px); }
.start-btn:active { background-color: #388e3c; box-shadow: 2px 2px #388e3c; transform: translateY(7px); }

#mode-select-screen {
    position: fixed; inset: 0; z-index: 45; display: none;
    align-items: center; justify-content: center;
    padding: clamp(18px, 4vw, 42px); overflow: visible;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 231, 166, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(28, 47, 25, 0.20), rgba(11, 24, 15, 0.55)),
        url('Background0.jpg') center / cover no-repeat;
    opacity: 0; pointer-events: none; transition: opacity 0.45s ease;
}
#mode-select-screen.active { display: flex; opacity: 1; pointer-events: auto; }

.mode-select-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.16); backdrop-filter: blur(2px); }
.mode-select-content {
    position: relative; z-index: 1; width: min(94vw, 760px);
    display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.5vh, 16px);
}
.mode-select-heading {
    margin: 0; color: #fff8dc; font-family: 'Baloo 2', 'Nunito', cursive, sans-serif;
    font-weight: 800; font-size: clamp(1.4rem, 3.8vw, 2.3rem); line-height: 1.25; text-align: center;
    text-shadow: 0 3px 0 #5c2c06, 0 5px 0 #361702, 0 8px 18px rgba(0, 0, 0, 0.7); letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mode-select-subtitle {
    margin: 0 0 clamp(2px, 1vh, 8px); color: #fff;
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    font-size: clamp(0.85rem, 1.9vw, 1.15rem); font-weight: 700; text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85);
}
.mode-board {
    position: relative; width: min(58vw, 440px); aspect-ratio: 1166 / 1225;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.42)); transform-origin: center bottom;
    will-change: transform, opacity;
}
.mode-board-image { width: 100%; height: 100%; display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.mode-option {
    position: absolute; border: 0; background: transparent; color: #fffdf1;
    cursor: pointer; border-radius: 20px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; transform: translateY(0) scale(1);
    box-sizing: border-box;
    transition: transform 0.16s ease, filter 0.16s ease, background-color 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}
.mode-option::after {
    content: ''; position: absolute; inset: 6% 6%; border-radius: 20px;
    background: rgba(255, 224, 132, 0.05);
    box-shadow: inset 0 0 0 2px rgba(255, 246, 206, 0.12), 0 8px 18px rgba(74, 37, 10, 0.08);
    opacity: 0; transition: opacity 0.18s ease; pointer-events: none;
}
.mode-option:hover { transform: translateY(-3px) scale(1.015); filter: brightness(1.08) saturate(1.04); }
.mode-option:hover::after, .mode-option:focus-visible::after { opacity: 1; }
.mode-option:focus-visible { outline: 3px solid #ffe58a; outline-offset: 4px; }
.mode-option:active, .mode-option.pressed { transform: translateY(7px) scale(0.975); filter: brightness(0.85) saturate(0.92); transition-duration: 0.07s; }

.mode-option.dan, .mode-option.normal {
    top: 8%; height: 26%; left: 8%; width: 84%;
    padding: 0 20px 0 54px;
}
.mode-option.kiemlam, .mode-option.expert {
    top: 41%; height: 26%; left: 18%; width: 76%;
    padding: 0 40px 0 18px;
}
.mode-option-title {
    position: relative; z-index: 1; display: block; margin: 0;
    font-family: 'Baloo 2', 'Nunito', cursive, sans-serif; font-weight: 900;
    font-size: clamp(1.35rem, 3.6vw, 2.05rem);
    line-height: 1.2; letter-spacing: 0.05em;
    color: #ffffff;
    text-shadow: 0 2px 0 #542805, 0 4px 0 #2e1402, 0 6px 14px rgba(0, 0, 0, 0.7);
}
.mode-option-description {
    position: relative; z-index: 1; display: block;
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    font-size: clamp(0.72rem, 1.7vw, 0.96rem);
    line-height: 1.35; font-weight: 800;
    color: #fff9e6;
    text-shadow: 0 1px 3px rgba(35, 15, 3, 0.95), 0 2px 6px rgba(0, 0, 0, 0.8);
}
.mode-select-back {
    border: 0; background: rgba(30, 68, 30, 0.88); color: #fff8dc;
    padding: 0.72rem 1.5rem; border-radius: 999px; font-weight: 800;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.82rem, 1.8vw, 1.05rem); cursor: pointer;
    box-shadow: 0 5px 0 rgba(18, 36, 17, 0.75), 0 8px 18px rgba(0, 0, 0, 0.25);
    transition: transform 0.16s ease, filter 0.16s ease;
}
.mode-select-back:hover { transform: translateY(-2px); filter: brightness(1.1); }
.mode-select-back:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(18, 36, 17, 0.75), 0 4px 10px rgba(0, 0, 0, 0.2); }

@keyframes modeBackIn {
    0% { opacity: 0; transform: translateY(28px) scale(0.6); }
    60% { opacity: 1; transform: translateY(-5px) scale(1.08); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes boardShootUpFromBack {
    0% { opacity: 0; transform: translateY(110px) scale(0.08) rotate(-7deg); transform-origin: center bottom; }
    25% { opacity: 1; }
    65% { transform: translateY(-16px) scale(1.06) rotate(2.5deg); transform-origin: center bottom; }
    82% { transform: translateY(5px) scale(0.98) rotate(-1deg); transform-origin: center bottom; }
    94% { transform: translateY(-2px) scale(1.01) rotate(0.4deg); transform-origin: center bottom; }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); transform-origin: center bottom; }
}
@keyframes modeHeadingIn {
    from { opacity: 0; transform: translateY(-18px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

#mode-select-screen.active .mode-select-heading { animation: modeHeadingIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
#mode-select-screen.active .mode-select-subtitle { animation: modeHeadingIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both; }
#mode-select-screen.active .mode-select-back { animation: modeBackIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; }
#mode-select-screen.active .mode-board { animation: boardShootUpFromBack 0.82s cubic-bezier(0.25, 0.9, 0.35, 1) 0.38s both; }

/* Màn hình chọn chuyên đề Nhân dân */
#dan-topic-screen {
    position: fixed; inset: 0; z-index: 45; display: none;
    align-items: center; justify-content: center;
    padding: clamp(12px, 3vw, 32px); overflow: visible;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 231, 166, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(28, 47, 25, 0.20), rgba(11, 24, 15, 0.55)),
        url('Background0.jpg') center / cover no-repeat;
    opacity: 0; pointer-events: none; transition: opacity 0.38s ease;
}
#dan-topic-screen.active { display: flex; opacity: 1; pointer-events: auto; }

.dan-topics-content {
    position: relative; z-index: 1; width: min(94vw, 680px);
    display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.4vh, 16px);
}
.dan-topics-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.2vh, 12px);
    max-height: min(68vh, 520px);
    overflow-y: auto;
    padding: 4px 6px;
    box-sizing: border-box;
}
.dan-topic-card {
    position: relative;
    width: 100%;
    min-height: 72px;
    background-color: transparent;
    background-image: url('Textbox.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(8px, 1.2vh, 14px) clamp(16px, 3vw, 28px);
    box-sizing: border-box;
    text-align: left;
    transition: transform 0.16s ease, filter 0.16s ease;
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.38));
}
.dan-topic-card:hover {
    transform: translateY(-2px) scale(1.015);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.48)) brightness(1.1);
}
.dan-topic-card:active,
.dan-topic-card.pressed {
    transform: translateY(4px) scale(0.985);
    filter: brightness(0.88);
}
.dan-topic-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.dan-topic-title {
    font-family: 'Baloo 2', 'Nunito', cursive, sans-serif;
    font-weight: 800;
    font-size: clamp(0.95rem, 2.4vw, 1.3rem);
    line-height: 1.25;
    letter-spacing: 0.03em;
    color: #ffffff;
    text-shadow: 0 2px 0 #542805, 0 3px 0 #2e1402, 0 4px 8px rgba(0, 0, 0, 0.7);
}
.dan-topic-badge {
    background: #1b5e20;
    color: #e8f5e9;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.65rem, 1.6vw, 0.78rem);
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid #81c784;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.dan-topic-description {
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    font-size: clamp(0.68rem, 1.7vw, 0.86rem);
    line-height: 1.25;
    font-weight: 700;
    color: #fff9e6;
    text-shadow: 0 1px 3px rgba(35, 15, 3, 0.95), 0 2px 4px rgba(0, 0, 0, 0.8);
}
#dan-topic-screen.active .mode-select-heading { animation: modeHeadingIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both; }
#dan-topic-screen.active .mode-select-subtitle { animation: modeHeadingIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both; }
#dan-topic-screen.active .dan-topic-card { animation: modeHeadingIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both; }
#dan-topic-screen.active .mode-select-back { animation: modeBackIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both; }

/* Container logo và tên gói câu hỏi khi chơi game */
.logo-container.in-game-logo {
    position: absolute;
    top: 1vh;
    left: 1.2vw;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: clamp(100px, 18vw, 160px);
}
.logo-container.in-game-logo img {
    width: clamp(50px, 7.5vw, 85px);
    height: auto;
    margin-bottom: 0.3vh;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}
.logo-container.in-game-logo p {
    font-size: clamp(0.55rem, 1.1vw, 0.82rem);
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
    white-space: nowrap;
    line-height: 1.25;
}

/* Badge hiển thị chuyên đề đang chơi - nằm dưới chữ Chi cục Kiểm lâm tỉnh Tuyên Quang */
.active-mode-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: clamp(3px, 0.6vh, 6px);
    background: linear-gradient(135deg, rgba(20, 83, 45, 0.92), rgba(15, 60, 30, 0.95));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(134, 239, 172, 0.75);
    color: #f0fdf4;
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(0.60rem, 1.15vw, 0.80rem);
    line-height: 1.2;
    padding: clamp(2px, 0.35vh, 4px) clamp(8px, 1.1vw, 12px);
    border-radius: 999px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    z-index: 10;
}

@media (max-width: 520px) {
    #mode-select-screen { padding: 12px; }
    #dan-topic-screen { padding: 10px; }
    .dan-topic-card { min-height: 64px; padding: 6px 14px; }
    .dan-topic-title { font-size: clamp(0.88rem, 3.8vw, 1.05rem); }
    .dan-topic-description { font-size: clamp(0.64rem, 2.9vw, 0.76rem); }
    .mode-select-heading { font-size: clamp(1.15rem, 5.2vw, 1.45rem); }
    .mode-board { width: min(88vw, 380px); }
    .mode-option.dan, .mode-option.normal { left: 8%; width: 84%; padding: 2px 14px 2px 38px; }
    .mode-option.kiemlam, .mode-option.expert { left: 19%; width: 75%; padding: 2px 32px 2px 12px; }
    .mode-option-title { font-size: clamp(1.05rem, 4.8vw, 1.35rem); }
    .mode-option-description { font-size: clamp(0.66rem, 3.2vw, 0.82rem); }
}

.container {
    width: 100%; min-height: 100svh; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; padding: 1vh 2vw 2vh;
    position: relative; overflow-x: hidden;
}
#clock-container {
    position: absolute; top: 0vh; left: 50%; transform: translateX(-50%);
    z-index: 10; width: clamp(80px, 12vw, 120px); display: flex; justify-content: center; align-items: center;
}
#clock-frame { width: 100%; height: auto; }
#timer-container { position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%); }
#timer { font-size: clamp(1rem, 3.5vw, 2rem); font-weight: bold; color: #ffc107; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); }
        
.exit-btn, .replay-btn {
    position: absolute; left: 1vw; z-index: 25; cursor: pointer;
    background-color: transparent; border: none; box-shadow: none; padding: 0;
    width: clamp(40px, 8vw, 60px); height: auto; transition: transform 0.2s ease-in-out;
}
.exit-btn { bottom: 12vh; }
.replay-btn { bottom: 22vh; }
.exit-btn img, .replay-btn img { width: 100%; height: auto; display: block; }
.exit-btn:hover, .replay-btn:hover { transform: scale(1.1); background-color: transparent; box-shadow: none; }
.exit-btn:active, .replay-btn:active { transform: scale(1.05); background-color: transparent; box-shadow: none; }        

.quiz-wrapper {
    position: relative; width: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; padding-top: clamp(125px, 16vh, 175px); flex-grow: 1;
}
.question-frame {
    width: clamp(300px, 85vw, 900px); min-height: 150px; height: auto;
    background-image: url('Cauhoi.png'); background-size: 100% 100%; background-repeat: no-repeat;
    background-position: center; display: flex; justify-content: center; align-items: center;
    padding: 5% 8%; margin-bottom: 2rem;
}        
.question-card { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--text-color); overflow-y: auto; }
.question-text { font-size: clamp(1rem, 3.5vw, 1.5rem); font-weight: 600; line-height: 1.5; white-space: pre-wrap; padding: 0.5rem; }

.answers {
    width: clamp(300px, 90vw, 900px); display: grid; grid-template-columns: 1fr;
    gap: 0.75rem; z-index: 5; opacity: 0; transition: opacity 0.5s ease-in-out; padding: 0 1rem;
}
@media (orientation: landscape) { .answers { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
.answers.visible { opacity: 1; }
        
.answer-btn {
    background-color: transparent; color: var(--text-color); padding: 1rem; text-align: center;
    cursor: pointer; font-size: clamp(0.9rem, 2.8vw, 1.1rem); font-weight: 500; width: 100%;
    min-height: 72px; display: flex; justify-content: center; align-items: center; line-height: 1.4;
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, filter 0.2s, background-image 0.3s ease;
    border: none; background-image: url('Textbox.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
}
.answer-btn.show { opacity: 1; transform: translateY(0); }
.answer-btn:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.1); }
.answer-btn.correct { background-image: url('Textbox_Correct.png'); }
.answer-btn.incorrect { background-image: url('Textbox_Incorrect.png'); }
.answer-btn.disabled { pointer-events: none; opacity: 0.8; }

.chibi-assistant {
    position: fixed; bottom: 0; right: 0;
    width: clamp(140px, 16vw, 220px);
    aspect-ratio: 2 / 3;
    z-index: 15; pointer-events: none;
    overflow: hidden;
}
.chibi-assistant video,
.chibi-clip {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: bottom right;
    display: block;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
    pointer-events: none;
}
.chibi-clip.active {
    opacity: 1;
}
        
.next-btn {
    position: fixed; bottom: calc(env(safe-area-inset-bottom) + 12px); left: 50%; transform: translateX(-50%);
    background-color: transparent; border: none; cursor: pointer; z-index: 999; transition: transform 0.2s ease-in-out;
}
.next-btn img { width: clamp(56px, 9vw, 90px); height: auto; }
.next-btn:hover { transform: translateX(-50%) scale(1.1); }

@keyframes unrollHorizontal {
    0% {
        clip-path: inset(0 50% 0 50%);
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        clip-path: inset(0 0% 0 0%);
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.overlay-answer {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: clamp(300px, 80vw, 800px); height: auto; background-image: url('Dapan.png');
    background-size: 100% 100%; background-position: center; display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center; color: var(--text-color);
    font-size: var(--font-size-lg); font-weight: bold; z-index: 15; opacity: 0; pointer-events: none;
    padding: 4%; overflow: hidden; will-change: clip-path, opacity, transform;
}
.overlay-answer.active { animation: unrollHorizontal 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; pointer-events: auto; }
.overlay-text, #overlay-text { white-space: pre-wrap; opacity: 0; line-height: 1.4; font-size: clamp(1rem, 3.5vw, 1.5rem); }
#overlay-explanation { font-size: clamp(0.8rem, 2.5vw, 1.1rem); font-weight: normal; font-style: italic; color: var(--text-color); line-height: 1.5; margin-top: 10px; opacity: 0; transition: opacity 1s; }
#overlay-answer-content { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5%; height: 100%; width: 100%; }

#score-board {
    position: absolute;
    top: 0;
    right: 1.5vw;
    width: clamp(90px, 14vw, 145px);
    aspect-ratio: 1 / 1;
    z-index: 25;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.3s ease;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
#score-board.active { opacity: 1; }
.score-board-frame {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
.score-text-container {
    position: absolute;
    width: 76%;
    top: 64%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(1px, 0.3vh, 3px);
    user-select: none;
}
#correct-count, #incorrect-count {
    font-family: 'Baloo 2', 'Nunito', 'Segoe UI', cursive, sans-serif;
    font-weight: 800;
    font-size: clamp(0.70rem, 1.5vw, 1.15rem);
    line-height: 1.18;
    margin: 0;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
#correct-count {
    color: #4ade80;
    text-shadow: 0 1px 0 #064e3b, 0 2px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(74, 222, 128, 0.35);
}
#incorrect-count {
    color: #ff5252;
    text-shadow: 0 1px 0 #7f1d1d, 0 2px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(255, 82, 82, 0.35);
}

#menu-container { position: absolute; bottom: 2vh; left: 1vw; z-index: 35; display: flex; align-items: center; }
.menu-btn { background-color: transparent; border: none; cursor: pointer; width: clamp(40px, 8vw, 60px); height: auto; transition: transform 0.2s ease; display: flex; align-items: center; justify-content: center; z-index: 2; }
.menu-btn img { width: 100%; height: auto; }
.menu-btn:hover { transform: scale(1.1); }

#menu-tray {
    position: absolute; left: 100%; bottom: 0; display: flex; align-items: center; height: auto;
    opacity: 0; transform: translateX(-20%); pointer-events: none; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}
#menu-tray.active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.menu-tray-img { height: clamp(60px, 12vw, 85px); width: auto; display: block; }
.menu-buttons-container { position: absolute; top: 50%; left: 50%; transform: translate(-45%, -50%); display: flex; gap: 2.5vw; }
.tray-btn { background: none; border: none; cursor: pointer; width: clamp(25px, 4vw, 35px); transition: transform 0.2s ease; }
.tray-btn img { width: 100%; height: auto; }
.tray-btn:hover { transform: scale(1.1); }

@keyframes unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0% 0); } }
#about-me-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 680px);
    height: min(92vh, 850px);
    aspect-ratio: 1 / 1.28;
    max-width: calc(min(92vh, 850px) * 0.82);
    z-index: 40;
    background-image: url('Aboutme.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.75));
}
#about-me-overlay.active {
    opacity: 1;
    pointer-events: auto;
    animation: unroll 1.5s ease-out forwards;
}
#about-me-content {
    position: absolute;
    top: 19.5%;
    bottom: 19.5%;
    left: 19%;
    right: 19%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    padding: 2px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(90, 45, 15, 0.35) transparent;
    opacity: 0;
    transition: opacity 0.4s ease;
    user-select: none;
}
#about-me-content::-webkit-scrollbar {
    width: 5px;
}
#about-me-content::-webkit-scrollbar-thumb {
    background: rgba(90, 45, 15, 0.35);
    border-radius: 999px;
}
#about-me-content::-webkit-scrollbar-track {
    background: transparent;
}

#end-screen-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);
    display: none; justify-content: center; align-items: center; z-index: 50; opacity: 0; transition: opacity 1s ease-in-out;
}
#end-screen-overlay.active { display: flex; opacity: 1; }
#end-screen-container {
    width: 90%; max-width: 700px; height: auto; position: relative; background-image: url('End.webp');
    background-size: 100% 100%; background-repeat: no-repeat; background-position: center; padding: 5% 10%;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center;
    animation: fadeInScale 1s ease-in-out;
}
.result-frame { width: 100%; height: auto; display: grid; grid-template-columns: 1fr; gap: 1rem; position: relative; padding: 0 5%; }
.result-box { display: flex; justify-content: center; align-items: center; background-image: url('Sc.webp'); background-size: 100% 100%; background-repeat: no-repeat; min-height: 80px; padding: 2% 10%; margin-bottom: 1rem; }
.result-text { text-align: center; font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: bold; color: #333; line-height: 1.2; width: 100%; margin: 0; padding: 0; }
.evaluation-box-top { display: flex; justify-content: center; align-items: center; width: clamp(250px, 80%, 400px); height: auto; background-image: url('Sc.webp'); background-size: 100% 100%; background-repeat: no-repeat; min-height: 80px; padding: 2% 10%; margin-bottom: 3rem; }
#star-rating { display: flex; justify-content: center; align-items: center; margin-top: 1rem; margin-bottom: 1rem; }
.star { width: clamp(50px, 10vw, 70px); height: auto; margin: 0 5px; }

#end-buttons-container { position: absolute; bottom: 5%; display: flex; justify-content: center; gap: 1rem; }
#end-replay-btn, #end-exit-btn, .restart-btn {
    font-size: var(--font-size-md); padding: 0.75rem 1.5rem; border-radius: 8px; cursor: pointer;
    transition: all 0.2s ease; box-shadow: 0 4px #388e3c; font-weight: 700;
}
#end-replay-btn, .restart-btn { background-color: #4caf50; color: white; border: none; }
#end-exit-btn { background-color: #f44336; color: white; border: none; }
#end-replay-btn:hover, .restart-btn:hover { background-color: #43a047; transform: translateY(-2px); box-shadow: 0 6px #388e3c; }
#end-exit-btn:hover { background-color: #e53935; transform: translateY(-2px); box-shadow: 0 6px #c62828; }
#end-replay-btn:active, #end-exit-btn:active, .restart-btn:active { transform: translateY(2px); box-shadow: 0 2px #388e3c; }

@keyframes fadeInScale { 0% { transform: scale(0.1); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes zoomIn { 0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0; } 80% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

@media (max-width: 768px) {
    .chibi-assistant {
        width: clamp(80px, 22vw, 120px);
        aspect-ratio: 2 / 3;
        bottom: 0;
        right: 0;
    }
    .quiz-wrapper { padding-top: clamp(88px, 14vh, 120px); }
    #score-board {
        top: 0;
        right: 1vw;
        width: clamp(78px, 21vw, 105px);
    }
    #score-board .score-text-container {
        top: 64%;
        width: 76%;
    }
    #score-board #correct-count,
    #score-board #incorrect-count {
        font-size: clamp(0.62rem, 2.5vw, 0.85rem);
    }
    .logo-container.in-game-logo {
        top: 0.6vh;
        left: 1vw;
        max-width: clamp(92px, 25vw, 125px);
    }
    .logo-container.in-game-logo img {
        width: clamp(40px, 10vw, 55px);
        margin-bottom: 0.2vh;
    }
    .logo-container.in-game-logo p {
        font-size: clamp(0.48rem, 2.1vw, 0.65rem);
    }
    .active-mode-badge {
        font-size: clamp(0.50rem, 2.0vw, 0.65rem);
        padding: 2px 7px;
        margin-top: 2px;
        max-width: 105px;
    }
    #clock-container {
        top: 0.2vh;
        width: clamp(68px, 16vw, 90px);
    }
    .logo-container { top: 1.5vh; }
    .fade-out { opacity: 0; transition: opacity 0.5s ease-out; }
    .fade-in { opacity: 1; transition: opacity 0.5s ease-in; }

    /* Khung câu hỏi trên điện thoại */
    .question-frame {
        height: auto;
        min-height: 120px;
        width: clamp(280px, 94vw, 560px);
        padding: 5% 9%;
        margin-bottom: 0.6rem;
    }
    .question-card {
        max-height: 25vh;
        overflow-y: auto;
        scrollbar-width: thin;
    }
    .q-short .question-text {
        font-size: clamp(0.95rem, 3.6vw, 1.15rem);
        line-height: 1.38;
    }
    .q-medium .question-text {
        font-size: clamp(0.85rem, 3.2vw, 1.00rem);
        line-height: 1.34;
    }
    .q-long .question-text {
        font-size: clamp(0.75rem, 2.8vw, 0.88rem);
        line-height: 1.30;
    }
    .q-extra-long .question-text {
        font-size: clamp(0.68rem, 2.4vw, 0.78rem);
        line-height: 1.25;
    }

    /* Cuộn giấy đáp án trên màn hình dọc điện thoại - co giãn linh hoạt theo lượng chữ */
    .overlay-answer {
        width: min(92vw, 440px);
        height: auto;
        min-height: clamp(120px, 18vh, 155px);
        max-height: 75vh;
        padding: clamp(26px, 5.5vh, 40px) clamp(30px, 11vw, 48px);
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: min-height 0.3s ease-out, height 0.3s ease-out;
    }
    #overlay-answer-content {
        padding: 2px 4px;
        height: auto;
        max-height: calc(75vh - clamp(48px, 10vh, 76px));
        width: 100%;
        box-sizing: border-box;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(90, 45, 15, 0.35) transparent;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: height 0.3s ease-out;
    }
    #overlay-answer-content::-webkit-scrollbar {
        width: 4px;
    }
    #overlay-answer-content::-webkit-scrollbar-thumb {
        background: rgba(90, 45, 15, 0.35);
        border-radius: 999px;
    }

    /* Tự động tối ưu cỡ chữ theo độ dài đáp án (không ép cuộn giấy to sẵn từ đầu) */
    .overlay-answer.ans-short .overlay-text,
    .overlay-answer.ans-short #overlay-text {
        font-size: clamp(0.92rem, 3.8vw, 1.15rem);
        line-height: 1.36;
    }
    .overlay-answer.ans-short #overlay-explanation {
        font-size: clamp(0.80rem, 3.0vw, 0.95rem);
        line-height: 1.38;
        margin-top: 8px;
    }

    .overlay-answer.ans-medium .overlay-text,
    .overlay-answer.ans-medium #overlay-text {
        font-size: clamp(0.84rem, 3.4vw, 1.02rem);
        line-height: 1.32;
    }
    .overlay-answer.ans-medium #overlay-explanation {
        font-size: clamp(0.74rem, 2.7vw, 0.86rem);
        line-height: 1.34;
        margin-top: 8px;
    }

    .overlay-answer.ans-long .overlay-text,
    .overlay-answer.ans-long #overlay-text {
        font-size: clamp(0.76rem, 2.9vw, 0.90rem);
        line-height: 1.28;
    }
    .overlay-answer.ans-long #overlay-explanation {
        font-size: clamp(0.68rem, 2.4vw, 0.78rem);
        line-height: 1.30;
        margin-top: 6px;
    }

    .overlay-answer.ans-extra-long .overlay-text,
    .overlay-answer.ans-extra-long #overlay-text {
        font-size: clamp(0.70rem, 2.6vw, 0.82rem);
        line-height: 1.24;
    }
    .overlay-answer.ans-extra-long #overlay-explanation {
        font-size: clamp(0.62rem, 2.2vw, 0.72rem);
        line-height: 1.26;
        margin-top: 6px;
    }

    /* Đảm bảo nút Next không đè lên cuộn giấy */
    .next-btn {
        bottom: calc(env(safe-area-inset-bottom) + 10px);
        z-index: 1000;
    }
}
@media (min-width: 768px) { .result-frame { grid-template-columns: repeat(2, 1fr); } }

@media (max-height: 520px) and (orientation: landscape) {
    .quiz-wrapper { padding-top: 80px; }
    #score-board {
        top: 0;
        right: 1.5vw;
        width: 66px;
    }
    #score-board .score-text-container {
        top: 64%;
        width: 76%;
    }
    #score-board #correct-count,
    #score-board #incorrect-count {
        font-size: 0.65rem;
    }
    .logo-container.in-game-logo {
        top: 0.4vh;
        left: 1.2vw;
        max-width: 120px;
    }
    .logo-container.in-game-logo img {
        width: 36px;
        margin-bottom: 1px;
    }
    .logo-container.in-game-logo p {
        font-size: 0.50rem;
    }
    .active-mode-badge {
        font-size: 0.50rem;
        padding: 1px 6px;
        margin-top: 2px;
    }
    #clock-container {
        top: 0;
        width: 62px;
    }
    #timer {
        font-size: 1.2rem;
    }
}

/* ========================================================
   TRỢ LÝ NỮ KIỂM LÂM & KHUNG BONG BÓNG CHAT BUBBLECHAT.WEBP
   Thống nhất bố trí ở bên phải màn hình cả Desktop & Mobile
   Khung chat bubblechat.webp tự động điều chỉnh kích thước theo chữ
   ======================================================== */

.mode-chibi-guide {
    position: absolute;
    right: clamp(20px, 3.5vw, 60px);
    left: auto;
    bottom: 0;
    z-index: 50;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.35s ease;
}

/* Nhân vật Chibi và hiệu ứng cơ thể */
.chibi-character {
    position: relative;
    height: clamp(230px, 42vh, 390px);
    width: auto;
    aspect-ratio: 408 / 612;
    cursor: pointer;
    pointer-events: auto;
    transform-origin: 50% 90%;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.52));
    transition: filter 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.3s ease;
    will-change: transform, opacity;
}
.chibi-character:hover {
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.65)) brightness(1.05);
}

/* Hoạt ảnh khi vào màn chọn chế độ / chuyên đề: xuất hiện từ bên phải chào người chơi */
#mode-select-screen.active .chibi-character,
#dan-topic-screen.active .chibi-character {
    animation: chibiEnterGreetingRight 0.85s cubic-bezier(0.25, 0.9, 0.35, 1) 0.15s both;
}
#mode-select-screen.active .chibi-character.ready,
#dan-topic-screen.active .chibi-character.ready {
    animation: chibiBreathing 3.6s ease-in-out infinite;
}

@keyframes chibiEnterGreetingRight {
    0% {
        opacity: 0;
        transform: translate3d(35px, 25px, 0) perspective(700px) rotateY(24deg) rotate(3deg) scale(0.88);
    }
    55% {
        opacity: 1;
        transform: translate3d(-6px, -10px, 0) perspective(700px) rotateY(-6deg) rotate(-1.5deg) scale(1.02);
    }
    80% {
        transform: translate3d(2px, 3px, 0) perspective(700px) rotateY(2deg) rotate(0.8deg) scale(0.99);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) perspective(700px) rotateY(0deg) rotate(0deg) scale(1);
    }
}

@keyframes chibiBreathing {
    0%, 100% {
        transform: translateY(0) scaleY(1);
    }
    50% {
        transform: translateY(-5px) scaleY(1.014);
    }
}

/* Cử chỉ quay đầu ngẫu nhiên trong lúc đợi */
.chibi-character.turning-head {
    transform: perspective(650px) rotateY(-10deg) rotate(-1.5deg) scale(1.008);
    transition: transform 0.75s cubic-bezier(0.25, 0.9, 0.35, 1);
}

/* Cử chỉ giơ tay vén tóc bên tai mượt mà */
.chibi-character.touching-hair {
    transition: transform 0.9s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Canvas Rig hoạt hình 2D 60fps */
.chibi-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.chibi-character.rig-ready .chibi-canvas {
    opacity: 1;
}

.chibi-character.rig-ready .chibi-sprite {
    opacity: 0 !important;
    visibility: hidden;
}

/* Các layer sprite thành phần của nhân vật Chibi (fallback khi đang tải) */
.chibi-sprite {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    transition: opacity 0.24s ease, transform 0.24s ease;
    will-change: opacity, transform;
}

/* 1. Thân chính: Đứng ôm sổ Kiểm lâm */
.chibi-body-base {
    z-index: 1;
    opacity: 1;
}
.chibi-character.touching-hair .chibi-body-base {
    opacity: 0;
}

/* 2. Thân phụ: Giơ tay vuốt tóc */
.chibi-body-hair {
    z-index: 2;
    opacity: 0;
}
.chibi-character.touching-hair .chibi-body-hair {
    opacity: 1;
}

/* 3. Layer chớp mắt cong lông mi tự nhiên 100% */
.chibi-layer-eyes {
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.05s ease-in-out;
}
.chibi-character.blinking .chibi-layer-eyes {
    opacity: 1 !important;
}

/* 4. Layer miệng và các trạng thái */
.chibi-layer-mouth {
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    transform-origin: 48% 34%;
}

.chibi-character.mouth-original .chibi-layer-mouth {
    opacity: 0 !important;
}

.chibi-character.mouth-smile .chibi-layer-mouth {
    opacity: 1 !important;
    transform: scale(1);
}

.chibi-character.mouth-talking .chibi-layer-mouth {
    opacity: 1;
    animation: mouthTalkFlap 0.16s ease-in-out infinite alternate;
}

@keyframes mouthTalkFlap {
    0% {
        opacity: 0;
        transform: scale(1, 0.5);
    }
    45% {
        opacity: 0.45;
        transform: scale(1, 0.78);
    }
    100% {
        opacity: 0.98;
        transform: scale(1, 1);
    }
}

/* ========================================================
   KHUNG BONG BÓNG CHAT BẰNG HÌNH ẢNH BUBBLECHAT.WEBP
   Tự động điều chỉnh kích thước theo lượng chữ
   Chữ hiển thị 100% an toàn bên trong viền hồng và viền chấm
   ======================================================== */
.chibi-speech-bubble {
    position: absolute;
    bottom: clamp(170px, 30vh, 260px);
    right: clamp(90px, 12vw, 190px);
    --bubble-w: 430px;
    --bubble-h: 270px;
    --bubble-font-size: 0.84rem;
    width: var(--bubble-w);
    height: var(--bubble-h);
    padding-top: calc(var(--bubble-h) * 0.36);
    padding-bottom: calc(var(--bubble-h) * 0.25);
    padding-left: calc(var(--bubble-w) * 0.19);
    padding-right: calc(var(--bubble-w) * 0.19);
    box-sizing: border-box;
    background: transparent url('bubblechat.webp') no-repeat center center / 100% 100%;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.48));
    border: none;
    border-radius: 0;
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.72) translateY(18px);
    transform-origin: right bottom;
    transition: width 0.32s cubic-bezier(0.2, 0.9, 0.3, 1),
                height 0.32s cubic-bezier(0.2, 0.9, 0.3, 1),
                opacity 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
                transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
    z-index: 60;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.chibi-speech-bubble.active {
    opacity: 1 !important;
    transform: scale(1) translateY(0);
    animation: bubbleGentleFloat 4.2s ease-in-out infinite alternate;
}

.chibi-speech-bubble.closing {
    opacity: 0 !important;
    transform: scale(0.75) translateY(14px);
    pointer-events: none;
}

@keyframes bubbleGentleFloat {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(-5px);
        opacity: 1;
    }
}

/* Nút đóng nhanh lời thoại đặt tinh tế phía trên bên phải */
.chibi-bubble-close {
    position: absolute;
    top: 14%;
    right: 14%;
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid #ec407a;
    color: #c2185b;
    font-size: 0.8rem;
    font-weight: 900;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;
    z-index: 10;
    line-height: 1;
    padding: 0;
}
.chibi-bubble-close:hover {
    color: #880e4f;
    background: #fce4ec;
    transform: scale(1.18);
}

.speech-text {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 0;
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    font-size: var(--bubble-font-size, 0.82rem);
    line-height: var(--bubble-line-height, 1.28);
    color: #2e1402;
    font-weight: 700;
    white-space: pre-wrap;
    overflow: hidden;
    text-align: left;
    user-select: none;
    -webkit-user-select: none;
}

.speech-text strong,
.speech-text .highlight-title {
    color: #c2185b;
    font-weight: 900;
}

/* Hiệu ứng nổi bật card chuyên đề khi trợ lý đang giới thiệu */
.dan-topic-card.highlighted {
    transform: translateY(-4px) scale(1.025);
    filter: drop-shadow(0 0 16px rgba(255, 215, 64, 0.95)) brightness(1.15) !important;
    outline: 2.5px solid #ffd54f;
    outline-offset: 2px;
    transition: transform 0.25s ease, filter 0.25s ease, outline 0.25s ease;
}

/* ========================================================
   RESPONSIVE CHO TRỢ LÝ KIỂM LÂM & KHUNG CHAT
   ======================================================== */

/* Desktop (min-width: 851px): Bố trí bảng lựa chọn / chuyên đề bên trái, Trợ lý & Bong bóng thoại bên phải */
@media (min-width: 851px) {
    .mode-select-content {
        margin-left: clamp(20px, 4vw, 70px);
        margin-right: auto;
        align-items: center;
    }
    .dan-topics-content {
        margin-left: clamp(20px, 4vw, 70px);
        margin-right: auto;
        width: min(42vw, 470px);
        align-items: center;
    }
    .mode-board {
        width: min(38vw, 360px);
    }
    .mode-chibi-guide {
        right: clamp(20px, 3.5vw, 60px);
        bottom: 0;
    }
    .chibi-speech-bubble {
        right: clamp(30px, 5vw, 90px);
        bottom: clamp(170px, 30vh, 260px);
    }
}

/* Tablet (581px - 850px) */
@media (max-width: 850px) and (min-width: 581px) {
    .mode-chibi-guide {
        right: 12px;
        left: auto;
        bottom: 0;
        align-items: flex-end;
    }
    .chibi-character {
        height: clamp(190px, 32vh, 260px);
    }
    .chibi-speech-bubble {
        bottom: clamp(150px, 26vh, 210px);
        right: clamp(20px, 4vw, 70px);
        --bubble-w: min(390px, 58vw);
        --bubble-h: 260px;
    }
    .mode-select-content {
        margin-right: clamp(20px, 6vw, 80px);
    }
    .dan-topics-content {
        margin-right: clamp(20px, 6vw, 80px);
    }
}

/* Mobile Portrait (< 580px): Nhân vật và khung thoại bên phải, gọn gàng và không che khuất */
@media (max-width: 580px) {
    .mode-chibi-guide {
        right: 6px;
        left: auto;
        bottom: 0;
        align-items: flex-end;
        z-index: 55;
    }

    .chibi-character {
        height: clamp(165px, 27vh, 220px);
        transform-origin: 80% 90%;
        filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
    }

    /* Khi bong bóng đóng, nhân vật nép gọn gàng ở góc dưới phải */
    .mode-chibi-guide.bubble-hidden {
        transform: translate(10px, 8px) scale(0.72);
        transform-origin: right bottom;
        transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.3, 1);
        opacity: 0.92;
    }

    .chibi-speech-bubble {
        position: absolute;
        bottom: clamp(140px, 24vh, 200px);
        right: 4px;
        left: auto;
        margin-bottom: 0;
        --bubble-w: min(340px, 94vw);
        --bubble-h: 240px;
        transform-origin: right bottom;
        filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.65));
    }

    .chibi-bubble-close {
        top: 13%;
        right: 13%;
        width: 20px;
        height: 20px;
        font-size: 0.72rem;
    }

    .mode-select-content {
        margin-right: 0;
        width: 100%;
    }
    .dan-topics-content {
        margin-right: 0;
        width: 100%;
    }
    .dan-topics-grid {
        max-height: min(52vh, 380px);
    }
}

/* Mobile Landscape (chiều cao thấp) */
@media (max-height: 520px) and (orientation: landscape) {
    .mode-chibi-guide {
        right: 8px;
        left: auto;
        bottom: 0;
        align-items: flex-end;
    }
    .chibi-character {
        height: clamp(130px, 48vh, 185px);
    }
    .chibi-speech-bubble {
        bottom: clamp(195px, 68vh, 240px);
        right: clamp(40px, 6vw, 90px);
        --bubble-w: min(360px, 45vw);
        --bubble-h: 190px;
    }
}


/* ========================================================
   MODAL XÁC NHẬN DỪNG CHƠI / VỀ HOME / CHƠI LẠI
   ======================================================== */
.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.confirm-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.confirm-modal-box {
    position: relative;
    width: min(90vw, 440px);
    aspect-ratio: 291 / 161;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.85);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

.confirm-board-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.75));
}

.confirm-modal-content {
    position: relative;
    z-index: 2;
    width: 78%;
    height: 68%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    padding: 2px 8px;
}

.confirm-modal-message {
    margin: 0 0 clamp(8px, 1.8vh, 14px) 0;
    font-family: 'Baloo 2', 'Nunito', cursive, sans-serif;
    font-weight: 800;
    font-size: clamp(0.92rem, 3.1vw, 1.22rem);
    line-height: 1.32;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 2px 0 #542805, 0 3px 0 #2e1402, 0 4px 8px rgba(0, 0, 0, 0.7);
    word-break: break-word;
    user-select: none;
}

.confirm-modal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 6vw, 40px);
}

.confirm-action-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    width: clamp(44px, 9.5vw, 54px);
    height: clamp(44px, 9.5vw, 54px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, filter 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.confirm-action-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
    transition: transform 0.15s ease, filter 0.15s ease;
}

.confirm-action-btn:hover img {
    transform: scale(1.14);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.65)) brightness(1.08);
}

.confirm-action-btn:active img {
    transform: scale(0.92);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) brightness(0.95);
}

/* ========================================================
   CÁC NÚT LỰA CHỌN TRONG KHUNG CHAT CỦA TRỢ LÝ CHIBI
   ======================================================== */
.chibi-bubble-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
    opacity: 0;
    transform: scale(0.65);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
    pointer-events: auto;
}

.chibi-bubble-actions.visible {
    opacity: 1;
    transform: scale(1);
}

.chibi-action-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, filter 0.18s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.chibi-action-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
}

.chibi-action-btn:hover img {
    transform: scale(1.22);
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.65)) brightness(1.1);
}

.chibi-action-btn:active img {
    transform: scale(0.9);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* ========================================================
   MODAL BẢNG THÔNG TIN HƯỚNG DẪN & QUY TẮC TRÒ CHƠI
   Phóng to từ giữa màn hình ra (elastic zoom-in)
   Khung tre lá nhiệt đới, có con lăn cuộn đọc mượt mà
   ======================================================== */
.instruction-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

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

.instruction-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 12, 0.74);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.instruction-modal-box {
    position: relative;
    width: min(720px, 94vw);
    height: min(720px, 94vw, 88vh);
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.25);
    opacity: 0;
    transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.25), opacity 0.3s ease;
    user-select: none;
}

.instruction-modal-overlay.active .instruction-modal-box {
    transform: scale(1);
    opacity: 1;
}

.instruction-board-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.7));
}

.instruction-close-btn {
    position: absolute;
    top: 7%;
    right: 7%;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 248, 225, 0.95);
    border: 2px solid #5d4037;
    color: #b71c1c;
    font-size: 1.1rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
    line-height: 1;
    padding: 0;
}

.instruction-close-btn:hover {
    transform: scale(1.15) rotate(90deg);
    background: #ffebee;
    color: #d32f2f;
}

.instruction-close-btn:active {
    transform: scale(0.92);
}

.instruction-content-wrapper {
    position: absolute;
    top: 15.5%;
    bottom: 14%;
    left: 16%;
    right: 15%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
}

.instruction-scrollable {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 10px 8px 6px;
    box-sizing: border-box;
    color: #2e1402;
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    scrollbar-width: thin;
    scrollbar-color: #8d6e63 rgba(215, 195, 150, 0.4);
    -webkit-overflow-scrolling: touch;
}

.instruction-scrollable::-webkit-scrollbar {
    width: 7px;
}

.instruction-scrollable::-webkit-scrollbar-track {
    background: rgba(141, 110, 99, 0.12);
    border-radius: 8px;
}

.instruction-scrollable::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #a1887f, #5d4037);
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.instruction-scrollable::-webkit-scrollbar-thumb:hover {
    background: #4e342e;
}

.instruction-heading {
    font-family: 'Baloo 2', 'Nunito', cursive, sans-serif;
    font-size: clamp(1.15rem, 2.5vw, 1.45rem);
    font-weight: 900;
    text-align: center;
    color: #4a2810;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 4px rgba(74, 40, 16, 0.2);
}

.instruction-intro {
    font-size: clamp(0.78rem, 1.7vw, 0.86rem);
    line-height: 1.35;
    color: #3e2723;
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1.5px dashed rgba(141, 110, 99, 0.4);
    font-weight: 600;
}

.instruction-section {
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.38);
    border-radius: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(141, 110, 99, 0.22);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.instruction-sec-title {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-size: clamp(0.82rem, 1.8vw, 0.94rem);
    font-weight: 800;
    color: #1b5e20;
    margin-bottom: 4px;
    letter-spacing: 0.2px;
}

.instruction-sec-p {
    font-size: clamp(0.76rem, 1.6vw, 0.84rem);
    line-height: 1.35;
    color: #372412;
    margin: 3px 0;
    font-weight: 600;
}

.instruction-action-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 14px;
    margin-bottom: 8px;
    padding-top: 4px;
}

.instruction-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(180deg, #ffb300 0%, #f57c00 100%);
    border: 2px solid #ffe082;
    border-radius: 26px;
    padding: 8px 24px;
    color: #ffffff;
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-size: clamp(0.88rem, 2vw, 1.05rem);
    font-weight: 900;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(117, 43, 0, 0.85);
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(245, 124, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, filter 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.instruction-play-btn .btn-check-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.instruction-play-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 7px 18px rgba(245, 124, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.3);
    filter: brightness(1.08);
}

.instruction-play-btn:active {
    transform: translateY(1px) scale(0.96);
    box-shadow: 0 2px 6px rgba(245, 124, 0, 0.4);
}

@media (max-width: 580px) {
    .instruction-modal-box {
        width: 95vw;
        height: 92vw;
        max-height: 84vh;
    }
    .instruction-content-wrapper {
        top: 13%;
        bottom: 12.5%;
        left: 13%;
        right: 13%;
    }
    .instruction-close-btn {
        top: 6%;
        right: 6%;
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
    .chibi-bubble-actions {
        gap: 12px;
        margin-top: 4px;
    }
    .chibi-action-btn {
        width: 32px;
        height: 32px;
    }
}