/* vietnamese */
@font-face {
    font-family: 'Patrick Hand';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(LDI1apSQOAYtSuYWp8ZhfYe8UcLLq7s.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Patrick Hand';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(LDI1apSQOAYtSuYWp8ZhfYe8UMLLq7s.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Patrick Hand';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(LDI1apSQOAYtSuYWp8ZhfYe8XsLL.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Cài đặt chung & Biến màu --- */
:root {
    --bs-body-font-family: 'Patrick Hand', cursive, sans-serif;
    --soft-blue: #4FC3F7;
    --soft-red: #E57373;
    --soft-green: #81C784;
    --soft-purple: #BA68C8;
    --soft-yellow: #FFF176;
    --soft-orange: #FFB74D;
    --soft-cream: #FFF8E1;
    --frame-color: #FFCC80;
}

/* Lớp phủ làm mờ nền */
.bg-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.5); /* Giảm độ đục xuống một chút để thấy nền rõ hơn */
    backdrop-filter: blur(4px);
    z-index: -1;
}

/* --- Các Class Tiện ích Tùy chỉnh --- */
.bg-soft-blue { background-color: var(--soft-blue) !important; }
.bg-soft-red { background-color: var(--soft-red) !important; }
.bg-soft-green { background-color: var(--soft-green) !important; }
.bg-soft-purple { background-color: var(--soft-purple) !important; }
.bg-soft-yellow { background-color: var(--soft-yellow) !important; }
.bg-soft-orange { background-color: var(--soft-orange) !important; }
.bg-soft-cream { background-color: var(--soft-cream) !important; }

.text-soft-red { color: var(--soft-red) !important; }
.border-soft-orange { border-color: var(--soft-orange) !important; }
.border-dashed { border-style: dashed !important; border-width: 2px !important;}

.shadow-soft-orange { box-shadow: 0 8px 20px rgba(255, 167, 38, 0.3) !important; }
.shadow-sm-inset { box-shadow: inset 0 2px 5px rgba(0,0,0,0.05) !important; }
.text-shadow-white { text-shadow: 2px 2px 0px #fff; }
.text-shadow-soft { text-shadow: 2px 2px 0px #fff, 0 4px 8px rgba(0,0,0,0.1); }
.fw-900 { font-weight: 900; }


/* --- Các Thành phần Đặc thù --- */

/* Nút Icon */
.btn-icon {
    width: 50px; height: 50px; border-radius: 12px; border: none;
    font-size: 1.5rem; color: white; transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btn-icon:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }

/* Bóng bay điểm số */
.custom-balloon {
    position: absolute;
    top: 80px;
    width: 85px;
    height: 105px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    left: 80px;
}
.balloon-green {
    background: linear-gradient(135deg, #AED581, #7CB342);
    box-shadow: 0 5px 15px rgba(124, 179, 66, 0.4) !important;
}
.balloon-red {
    background: linear-gradient(135deg, #DCA0A0, #B06A6A);
    box-shadow: 0 5px 15px rgba(179, 66, 66, 0.4) !important;
    left: auto;
    right: 80px;
}
.custom-balloon::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 10vh;
    background: rgba(255,255,255,0.7);
}

/* Khung Bảng Câu Hỏi */
.quiz-frame { background-color: var(--frame-color); }

.awning-wave {
    height: 45px; background: #FFECB3;
    border-radius: 20px 20px 0 0;
    margin-bottom: -15px; position: relative; z-index: 2;
    mask-image: radial-gradient(circle at 20px 0%, transparent 20px, black 21px);
    mask-size: 40px 25px; mask-position: bottom; mask-repeat: repeat-x;
    -webkit-mask-image: radial-gradient(circle at 20px 0%, transparent 20px, black 21px);
    -webkit-mask-size: 40px 25px; -webkit-mask-position: bottom; -webkit-mask-repeat: repeat-x;
}

.quiz-legs { background-color: var(--frame-color); }

.deco-balloon {
    position: absolute; top: -40px; font-size: 5rem; z-index: 1;
    opacity: 0.6; filter: saturate(0.7);
}
.deco-balloon.start-0 { left: -20px !important; transform: rotate(-15deg); }
.deco-balloon.end-0 { right: -20px !important; transform: rotate(15deg); }

/* Nút Lego */
.lego-btn {
    color: white !important; border: none;
    padding-top: 1rem; padding-bottom: 1rem; padding-left: 2rem;
    font-size: 1.5rem; position: relative; transition: all 0.2s;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.lego-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.15); }
.lego-btn:active { transform: translateY(2px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

.lego-btn::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.25) 25%, transparent 30%);
    background-size: 25px 25px; background-position: 10px 10px;
    border-radius: inherit; pointer-events: none;
}

.btn-skip:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 167, 38, 0.4) !important; }
.btn-skip:active { transform: translateY(2px); box-shadow: 0 4px 8px rgba(255, 167, 38, 0.3) !important;}

/* --- Responsive Fixes (Tinh chỉnh cho Mobile) --- */
@media (max-width: 991.98px) {
    .game-wrapper { height: auto !important; overflow-y: auto !important; padding-top: 60px !important; }
    .col-left-mobile, .col-right-mobile {
        flex-direction: row !important; justify-content: space-evenly !important;
        align-items: flex-end !important; margin-bottom: 30px;
    }
    .slide-container-mobile { transform: scale(0.9); }
    .score-tower-mobile { margin-bottom: 0 !important; transform: scale(0.9); }
    .score-rooster-mobile { margin-bottom: 0 !important; padding-bottom: 0 !important; transform: scale(0.9); }
    .rooster-big-img { transform: scale(0.9); }
    .deco-balloon { display: none; }
    .user-bar-mobile { width: auto; left: 50% !important; transform: translateX(-50%); top: 10px !important; margin: 0 !important;}
    .quiz-section-mobile { margin-bottom: 50px; }
    .question-box-mobile { font-size: 1.5rem !important; padding: 1.5rem !important;}
    .lego-btn { font-size: 1.3rem; padding-left: 1.5rem; }
    .footer-mobile .btn-skip { font-size: 1.3rem !important; padding: 0.8rem 2rem !important;}
}

body {
    background-image: url(../images/bg-playground.jpg);
    background-size: cover;
    font-family: var(--bs-body-font-family);
}
#welcomeScreen,
#man_vongquay,
#man_trochoi {
    width: 100% !important
}

#welcomeScreen,
#man_vongquay {
    /*display: none !important;*/
}
#man_trochoi {
    /*display: block !important;*/
}
#options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 16px;
}
#options button {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1.25rem;
    --bs-btn-border-radius: var(--bs-border-radius-lg);
    --bs-btn-font-family: ;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    color: black !important;
    border: none;
    padding-left: 2rem;
    position: relative;
    transition: all 0.2s;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    border-radius: var(--bs-border-radius-xl) !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    font-weight: bold;
    text-align: left;
    width: 100%;
    display: inline-block;
    line-height: var(--bs-btn-line-height);
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: var(--soft-cream);

    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(50% - 16px);
}
#options button:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#options button:not([disabled]):hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}

#options button + button {
}

#options button.correct {
    background-color: var(--soft-green) !important;
}
#options button.wrong {
    background-color: var(--soft-red) !important;
}

.vongquay {
    width: 70vh;
    height: 70vh;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
.vq-footer {
    display: block;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 80%;
    margin-top: 20px
}
.bar-wrapper {
    max-width: 600px;
    margin: 0 auto;
}
.bar {
    margin-left: auto;
    margin-right: auto;
}
.result {
    color: #E84AED;
    text-shadow: 2px 2px 2px #fff, 0 4px 8px rgba(0,0,0,0.1);
}

#wheel {
    box-shadow: none;
    background: none;
 }
.right {
    top: auto;
    bottom: 25px;
    right: 20px;
    background: none;
    padding: 0;
    box-shadow: none;
    width: 320px;
    max-height: none;
    z-index: 10;
}
.left {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 300px;
    max-height: 100vh;
    background: rgba(255,255,255,0.3);
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    overflow: hidden;
}
#lopname {
    background: none;
    padding: 3px;
    border-radius: 6px;
    text-align: center;
    color: #0369a1;
}
#reset_games {
    background-color: var(--soft-red);
}
.btn_r {
    background-color: var(--soft-blue);
}
.config-button {
    position: fixed;
    z-index: 998;
    top: 30px;
    right: 30px;
    border: none;
    background: none;
    color: #666;
}
.config-button:hover {
    color: #444;
}
.config-button svg {
    width: 50px;
    height: 50px;
}
.settings-panel {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
}

.settings-panel .wrapper {
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}