* {
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}

input,
textarea,
[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

/* Scrollbar (barra de navegação) styling */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.custom-scroll-yellow {
    max-height: 60vh;
    overflow-y: auto;
    text-align: left;
    padding-right: 10px;
    font-size: 1rem;
    color: var(--text-color);
}

.custom-scroll-yellow::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.custom-scroll-yellow::-webkit-scrollbar-track {
    background: rgba(27, 54, 93, 0.1);
    border-radius: 10px;
}

.custom-scroll-yellow::-webkit-scrollbar-thumb {
    background-color: #FFD200;
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.custom-scroll-yellow::-webkit-scrollbar-thumb:hover {
    background-color: #e5bd00;
}

::-webkit-scrollbar-track {
    background: rgba(27, 54, 93, 0.1); /* Matches theme */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #FFD200; /* Yellow */
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #e5bd00;
}

:root {
    --bg-color: #1B365D; /* Deep Blue fallback */
    --text-color: #333333;
    --modal-bg: rgba(163, 77, 77, 0.85);
    --modal-border: #FFD200; /* Yellow */
    --btn-primary: #8CC63F; /* Green */
    --btn-primary-hover: #7ab332;
    --btn-text: #ffffff;
    --btn-shadow: inset 0 -4px 0 #1B365D;
    --answer-bg: #FFFFFF;
    --answer-text: #333333;
    --answer-hover: #FFF0F5;
    --answer-border: #1B365D;
    --lifeline-bg: #F7941E; /* Orange */
    --lifeline-border: #1B365D;
    --progress-bg: #1B365D;
    --progress-fill: #F7941E;
    --question-bg: rgba(255, 255, 255, 0.85);
    --question-border: #F7941E;
    --question-text: #1B365D;
    --drawer-bg: rgba(255, 255, 255, 0.9);
}

body.dark-mode {
    filter: invert(1) hue-rotate(180deg);
}

body.dark-mode img,
body.dark-mode video {
    filter: invert(1) hue-rotate(180deg);
}

body.rabiscos-mode {
    --bg-color: #ffffff !important;
    --text-color: #000000 !important;
    --modal-bg: #ffffff !important;
    --modal-border: #000000 !important;
    --btn-primary: #ffffff !important;
    --btn-primary-hover: #e0e0e0 !important;
    --btn-text: #000000 !important;
    --btn-shadow: inset 0 -4px 0 #000000 !important;
    --answer-bg: #ffffff !important;
    --answer-text: #000000 !important;
    --answer-hover: #e0e0e0 !important;
    --answer-border: #000000 !important;
    --lifeline-bg: #ffffff !important;
    --lifeline-border: #000000 !important;
    --progress-bg: #ffffff !important;
    --progress-fill: #000000 !important;
    --question-bg: #ffffff !important;
    --question-border: #000000 !important;
    --question-text: #000000 !important;
    --drawer-bg: #ffffff !important;
    background-image: none !important;
    background-color: #ffffff !important;
}

body.rabiscos-mode #splash-screen {
    background-image: none !important;
    background-color: #ffffff !important;
}

body.rabiscos-mode * {
    color: #000000 !important;
    border-color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.rabiscos-mode img {
    filter: grayscale(100%) !important;
}

body.rabiscos-mode #question-section {
    border: 2px solid #000000 !important;
}

body.rabiscos-mode .answer-btn {
    border-width: 2px !important;
    border-style: solid !important;
}

body.rabiscos-mode .answer-btn .answer-letter {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}

body.rabiscos-mode .lifeline {
    border-width: 2px !important;
    border-style: solid !important;
}

body.rabiscos-mode #progress-container,
body.rabiscos-mode #splash-progress-container,
body.rabiscos-mode #timer-bar-container,
body.rabiscos-mode #minigame-timer-container {
    border-width: 2px !important;
    border-style: solid !important;
    background: #ffffff !important;
}

body.rabiscos-mode #progress-bar,
body.rabiscos-mode #splash-progress-bar,
body.rabiscos-mode #timer-bar,
body.rabiscos-mode #minigame-timer-bar {
    background: #000000 !important;
}

body.rabiscos-mode #stars-container,
body.rabiscos-mode #minigame-score-container {
    background: #ffffff !important;
    border-width: 2px !important;
    border-style: solid !important;
}

body.rabiscos-mode #stars-count,
body.rabiscos-mode #minigame-score-count {
    color: #000000 !important;
}

body.rabiscos-mode svg,
body.rabiscos-mode svg path,
body.rabiscos-mode svg polygon,
body.rabiscos-mode svg line,
body.rabiscos-mode svg rect,
body.rabiscos-mode svg circle {
    fill: none !important;
    stroke: #000000 !important;
    stroke-width: 2px !important;
}

body.rabiscos-mode #star-icon path,
body.rabiscos-mode #end-star-icon path,
body.rabiscos-mode .card-star path,
body.rabiscos-mode .locked-icon svg path,
body.rabiscos-mode .locked-icon svg rect,
body.rabiscos-mode .locked-icon svg circle,
body.rabiscos-mode #icon-sound-on polygon,
body.rabiscos-mode #icon-sound-off polygon {
     fill: #000000 !important;
}

body.rabiscos-mode #star-icon,
body.rabiscos-mode #end-star-icon {
    filter: none !important;
}

body.rabiscos-mode #minigame-score-icon polygon {
    fill: #000000 !important;
}


body.rabiscos-mode .action-btn,
body.rabiscos-mode .minigame-btn,
body.rabiscos-mode #btn-start-game,
body.rabiscos-mode #modal-close,
body.rabiscos-mode #modal-confirm,
body.rabiscos-mode #btn-restart,
body.rabiscos-mode #btn-acervo-end,
body.rabiscos-mode #minigame-tutorial-close,
body.rabiscos-mode #memory-tutorial-close {
    background-color: #ffffff !important;
    border: 2px solid #000000 !important;
    color: #000000 !important;
}

body.rabiscos-mode .action-btn:hover,
body.rabiscos-mode .minigame-btn:hover,
body.rabiscos-mode #btn-start-game:hover,
body.rabiscos-mode #modal-close:hover,
body.rabiscos-mode #modal-confirm:hover,
body.rabiscos-mode #btn-restart:hover,
body.rabiscos-mode #btn-acervo-end:hover,
body.rabiscos-mode #minigame-tutorial-close:hover,
body.rabiscos-mode #memory-tutorial-close:hover {
    background-color: #e0e0e0 !important;
}

body.rabiscos-mode #modal-content,
body.rabiscos-mode #end-screen-content,
body.rabiscos-mode #acervo-modal-content,
body.rabiscos-mode #minigame-modal-content,
body.rabiscos-mode #quick-sound-menu,
body.rabiscos-mode .answer-actions-content {
    background-image: none !important;
    background-color: #ffffff !important;
    border: 2px solid #000000 !important;
}

body.rabiscos-mode #question-transition-overlay .transition-numbers span {
    color: #ffffff !important;
    -webkit-text-stroke: 2px #000000 !important;
}

body.rabiscos-mode .slider:before {
    background-color: #000000 !important;
}

body.rabiscos-mode input:checked + .slider {
    background-color: #ffffff !important;
    border: 2px solid #000000 !important;
}

body.rabiscos-mode .slider {
    border: 2px solid #000000 !important;
    background-color: #ffffff !important;
}

body.rabiscos-mode .dicionario-header {
    background: #ffffff !important;
    border-bottom: 2px solid #000000 !important;
}

body.rabiscos-mode .bottom-nav {
    background: #ffffff !important;
    border-top: 2px solid #000000 !important;
}

body.rabiscos-mode .nav-btn {
    border-right: 1px solid #000000 !important;
}

body.rabiscos-mode .nav-btn:last-child {
    border-right: none !important;
}

body.rabiscos-mode .nav-btn.active {
    background: #e0e0e0 !important;
}

body.rabiscos-mode .badge-card {
    border: 2px solid #000000 !important;
}

body.rabiscos-mode .badge-card.locked {
    background: #ffffff !important;
}

body.rabiscos-mode .locked-text {
    color: #000000 !important;
}

body.rabiscos-mode .badge-ribbon {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

body.rabiscos-mode #overall-progress-fill,
body.rabiscos-mode .badge-progress-fill {
    background: #000000 !important;
}

body.rabiscos-mode .bar {
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    border-bottom: none !important;
}

body.rabiscos-mode .memory-card-front,
body.rabiscos-mode .memory-card-back {
    border: 2px solid #000000 !important;
    background: #ffffff !important;
}

body.rabiscos-mode .memory-tab {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

body.rabiscos-mode .memory-tab.active {
    background: #e0e0e0 !important;
}

body.rabiscos-mode .memory-tab.locked {
    background: #ffffff !important;
    color: #000000 !important;
}

body.rabiscos-mode .bar-correct {
    background: repeating-linear-gradient(
      45deg,
      #ffffff,
      #ffffff 10px,
      #000000 10px,
      #000000 20px
    ) !important;
}

body.rabiscos-mode .loading-dots div {
    background-color: #000000 !important;
}

body.rabiscos-mode ::-webkit-scrollbar-thumb,
body.rabiscos-mode .custom-scroll-yellow::-webkit-scrollbar-thumb {
    background-color: #000000 !important;
    border-color: #ffffff !important;
}

body.rabiscos-mode ::-webkit-scrollbar-thumb:hover,
body.rabiscos-mode .custom-scroll-yellow::-webkit-scrollbar-thumb:hover {
    background-color: #333333 !important;
}

body.rabiscos-mode ::-webkit-scrollbar-track,
body.rabiscos-mode .custom-scroll-yellow::-webkit-scrollbar-track {
    background: #ffffff !important;
}


body {
    margin: 0;
    padding: 0;
    font-family: 'Fredoka', 'Arial', sans-serif;
    background-color: #79d2c0;
    background-image: url('images/bg.png');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    transition: background-color 0.5s ease, color 0.5s ease;
}

html, body {
    overflow-x: hidden;
}

/* Question Transition Overlay */
#question-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10050;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#question-transition-overlay.show {
    opacity: 1;
    visibility: visible;
}

.transition-numbers {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.transition-numbers > span {
    position: absolute;
    font-size: 7rem;
    font-weight: 900;
    color: #FFD200;
    text-shadow: 4px 4px 0px #1B365D;
    -webkit-text-stroke: 3px #1B365D;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.8s ease;
}

.transition-numbers > span.text-transition {
    font-size: 4rem;
}

.transition-numbers .phase-label {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: none;
    -webkit-text-stroke: 0;
    margin-bottom: -4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    width: 100%;
}

.transition-numbers .phase-number {
    display: block;
    line-height: 0.9;
}

.transition-numbers > span.slide-in {
    transform: translateY(0);
    opacity: 1;
}

.transition-numbers > span.slide-out {
    transform: translateY(-100%);
    opacity: 0;
}

.transition-numbers > span.circle-effect {
    animation: circleAndScale 1s linear forwards;
}

.transition-numbers > span.explode-effect {
    animation: explodeAndFade 0.3s ease-out forwards;
}

@keyframes circleAndScale {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    50% { transform: scale(1.2) rotate(5deg); }
    75% { transform: scale(1.1) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes explodeAndFade {
    0% { transform: scale(1); opacity: 1; filter: brightness(1); }
    50% { transform: scale(5); opacity: 0.8; filter: brightness(2); }
    100% { transform: scale(20); opacity: 0; filter: brightness(3); }
}

.hidden-modal {
    display: none !important;
}

/* Studio Intro */
#studio-intro-screen {
    position: fixed;
    inset: 0;
    background: #000000;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.6s ease;
}

#studio-intro-screen.show {
    opacity: 1;
}

#studio-intro-screen.hide {
    opacity: 0;
}

.studio-intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: studioIntroPulse 1.8s ease-in-out infinite;
}

#studio-intro-logo {
    width: 200px;
    max-width: 70vw;
    filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.35));
}

@keyframes studioIntroPulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}


/* Splash Screen */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #79d2c0;
    background-image: url('images/bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    max-width: 400px;
}

#btn-start-game {
    background-color: var(--primary-color);
    color: var(--text-color);
    border: 4px solid var(--border-color);
    border-bottom: 8px solid var(--border-color);
    border-radius: 15px;
    cursor: pointer;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    transition: transform 0.2s, border-bottom-width 0.2s, background-color 0.2s;
}

#btn-start-game:hover {
    background-color: var(--hover-color);
    transform: translateY(-2px);
}

#btn-start-game:active {
    transform: translateY(4px);
    border-bottom-width: 4px;
}

#btn-start-game.bounce {
    animation: bounceBtn 2s infinite;
}

@keyframes bounceBtn {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

#splash-logo {
    width: 100%;
    max-width: 300px;
    animation: pulse 1.5s infinite ease-in-out;
}

#splash-progress-container {
    width: 100%;
    height: 20px;
    margin-top: 40px;
    background-color: rgba(255, 255, 255, 0.3);
    border: 3px solid #1B365D;
    border-radius: 10px;
    overflow: hidden;

}

#splash-progress-bar {
    height: 100%;
    width: 0%;
    background-color: #8CC63F;
    transition: width 0.1s linear;
}

#splash-loading-text {
    margin-top: 15px;
    color: #1B365D;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
    text-align: center;
}

#splash-footer {
    position: absolute;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1B365D;
    font-weight: bold;
    font-size: 0.9rem;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
    flex-direction: column;
    gap: 10px;
}

#splash-footer img {
    height: 30px;
    margin-left: 10px;
}

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

#game-container {
    width: 90%;
    max-width: 380px;
    background-size: cover;
    background-position: center center;
    padding: 20px;
    position: relative;
    height: 100dvh;
    display: none; /* Initially hidden to prevent FOUC, shown by JS */
    flex-direction: column;
    justify-content: start;
}

header {
    text-align: center;
    margin-bottom: 10px;
    position: relative;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 10px;
}

#stars-container {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 15px;
    border-radius: 20px;
    border: 2px solid #FFD200;

    position: fixed;
    top: 10px;
    left: 10px;
    transform: none;
    z-index: 1000;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#stars-container:hover {
    transform: scale(1.05);

}

#star-icon {
    width: 28px;
    height: 28px;
    fill: #FFD200;
    margin-right: 8px;
    filter: drop-shadow(0 0 5px #FFD200);
}

#stars-count {
    color: #FFD200;
    font-weight: bold;
    font-size: 1.4rem;
    transition: all 0.3s ease;
}

#minigame-score-container {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 15px;
    border-radius: 20px;
    border: 2px solid #F7941E;
    position: fixed;
    top: 10px;
    left: 120px; /* positioned next to stars */
    z-index: 1000;
    cursor: default;
    transition: transform 0.2s ease;
}

@keyframes minigameScoreShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-2px) rotate(-2deg); }
    40% { transform: translateX(2px) rotate(2deg); }
    60% { transform: translateX(-2px) rotate(-1deg); }
    80% { transform: translateX(2px) rotate(1deg); }
}

#minigame-score-container.powerup-available {
    animation: minigameScoreShake 0.5s ease-in-out;
}

#minigame-score-icon {
    width: 28px;
    height: 28px;
    fill: #F7941E;
    margin-right: 8px;
}

#minigame-score-count {
    color: #F7941E;
    font-weight: bold;
    font-size: 1.4rem;
    transition: all 0.3s ease;
}

#minigame-score-tooltip {
    top: calc(100% + 8px);
    bottom: auto;
    left: 10%;
    opacity: 0;
    visibility: hidden;
    white-space: normal;
    width: 240px;
    text-align: center;
    margin-bottom: 0;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}

#minigame-score-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(4px);
}

#minigame-score-tooltip::after {
    top: auto;
    bottom: 100%;
    left: 70%;
    border-color: transparent transparent #1B365D transparent;
}

/* Animation for when score increases */
@keyframes scoreBump {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); color: #8CC63F; }
    100% { transform: scale(1); }
}

.score-bump {
    animation: scoreBump 0.5s ease;
}

#btn-config, #btn-quick-sound {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.2s;
    color: var(--text-color);
    position: fixed;
    top: 10px;
    z-index: 999;
}

#btn-config svg, #btn-quick-sound svg {
    stroke: #1B365D;
}

#btn-config {
    right: 10px;
}

#btn-quick-sound {
    left: 10px;
    top: 50px;
    right: auto;
}

#btn-config:hover, #btn-quick-sound:hover {
    transform: scale(1.1);
}

#btn-config svg, #btn-quick-sound svg {
    width: 30px;
    height: 30px;
}

body.rabiscos-mode #btn-config svg, body.rabiscos-mode #btn-quick-sound svg {
    stroke: #000000 !important;
}

body.rabiscos-mode #btn-config,
body.rabiscos-mode #btn-quick-sound {
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    border-radius: 999px;
    padding: 6px;
}

#quick-sound-menu {
    position: fixed;
    top: 95px;
    left: 10px;
    right: auto;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    padding: 20px;
    border-radius: 15px;
    border: 3px solid #1B365D;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}


#quick-sound-menu:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.quick-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 1.1rem;
    color: #1B365D;
    font-weight: bold;
}

.menu-link {
    cursor: pointer;
    transition: transform 0.1s, filter 0.2s, color 0.2s;
    color: #1B365D;
}

.menu-item.menu-link {
    margin-top: 12px;
}

.menu-link:hover {
    transform: translateY(-2px);
    color: #1B365D;
}

.menu-link:active {
    transform: scale(0.95);
}

#btn-roleta-game.menu-link,
#btn-selos-conquistados-menu.menu-link,
#btn-memory-game.menu-link,
#btn-pairs-game.menu-link,
#btn-guess-game.menu-link,
#btn-find-expressions-game.menu-link,
#btn-ebook-expressoes.menu-link {
    border: none;
    border-radius: 0;
    padding: 14px 16px;
    margin: 0 -20px;
    width: calc(100% + 40px);
    justify-content: flex-start;
    gap: 10px;
    color: #FFFFFF;
    font-weight: 900;
}

#btn-roleta-game.menu-link {
    background: #9C27B0;
    margin-top: 8px;
}

#btn-roleta-game.menu-link:hover {
    color: #FFFFFF;
}

#btn-selos-conquistados-menu.menu-link {
    background: #E91E63;
}

#btn-memory-game.menu-link {
    background: #3F51B5;
}

#btn-pairs-game.menu-link {
    background: #009688;
}

#btn-guess-game.menu-link {
    background: linear-gradient(180deg, #1B365D, #2C5AA0);
}

#btn-find-expressions-game.menu-link {
    background: #2E8B57;
}

#btn-ebook-expressoes.menu-link {
    background: #FF9800;
    color: #FFFFFF;
}

#btn-ebook-expressoes.menu-link:hover {
    color: #FFFFFF;
}

#btn-reset-game.menu-link {
    background: transparent;
    color: #1B365D;
    border: none;
    margin-top: 12px;
    width: auto;
    padding: 0;
}

#btn-privacy-terms.menu-link {
    background: transparent;
    color: #1B365D;
    border: none;
    margin-top: 12px;
    width: auto;
    padding: 0;
}

.menu-item.menu-link > span {
    color: inherit !important;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900 !important;
}

.menu-item.menu-link svg {
    width: 26px;
    height: 26px;
}

@media (max-height: 720px) {
    #drawer-menu {
        padding: 12px 12px 14px 12px;
    }

    #drawer-menu h3 {
        font-size: 1.2rem;
        margin-bottom: 6px;
        padding-bottom: 6px;
    }

    .menu-item {
        margin-top: 10px;
        font-size: 0.95rem;
    }

    #btn-roleta-game.menu-link,
    #btn-selos-conquistados-menu.menu-link,
    #btn-memory-game.menu-link,
    #btn-pairs-game.menu-link,
    #btn-guess-game.menu-link,
    #btn-find-expressions-game.menu-link,
    #btn-ebook-expressoes.menu-link {
        padding-top: 11px;
        padding-bottom: 11px;
    }
}


#image-container {

    width: 190px;
    margin: 0 auto;
    display: inline-block;
}

#image-container img {
    max-width: 100%;
}

#main-logo {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
    display: block;
}

#progress-container {
    width: calc(95% - 15px); /* Leave room for icon */
    height: 15px;
    background-color: var(--progress-bg);
    border-radius: 10px;
    margin-top: 15px;
    border: 2px solid var(--modal-border);
    overflow: visible;
    position: relative;
    margin-right: 15px;
}

#progress-bar {
    height: 100%;
    width: 0%;
    background: repeating-linear-gradient(
        -45deg,
        #FFD200,
        #FFD200 10px,
        #FFE44D 10px,
        #FFE44D 20px
    ) !important;
    transition: width 0.3s ease-in-out;
    position: relative;
}

#lifelines {
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 10px;
    right: 0;
    left: 0;
    margin: 0 auto;
}

#lifelines .lifeline:first-child {
    margin-left: 8px;
}

.lifeline {
    background: var(--lifeline-bg);
    border: 3px solid var(--lifeline-border);
    color: var(--text-color);
    font-weight: bold;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    position: relative;
    --cooldown-progress: 100;
}

.lifeline svg {
    width: 28px;
    height: 28px;
    fill: var(--text-color);
}

.lifeline svg.lock-icon {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    fill: #1B365D;
    background: #FFD200;
    border-radius: 50%;
    border: 2px solid #1B365D;
    padding: 3px;
    z-index: 2;
    box-sizing: border-box;
}


.lifeline:hover:not(:disabled) {
    transform: scale(1.1) translateY(-2px);

}

.lifeline:active:not(:disabled) {
    transform: scale(0.95) translateY(2px);

}

.lifeline:disabled {
    background: #555;
    border-color: #444;
    cursor: not-allowed;
    transform: none;

    opacity: 0.7;
}

.lifeline:disabled svg {
    fill: #888;
}

.lifeline.cooldown-active {
    cursor: not-allowed;
    background: #555;
    border-color: #444;
    transform: none;
    opacity: 0.85;
}

.lifeline.cooldown-active::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(#8CC63F calc(var(--cooldown-progress) * 1%), rgba(140, 198, 63, 0.2) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    pointer-events: none;
}

.lifeline.cooldown-active svg {
    fill: #888;
}

.lifeline.cooldown-active:hover,
.lifeline.cooldown-active:active {
    transform: none;
}

.lifeline-reloaded-attention {
    animation: lifeline-reloaded-shake 0.7s ease;
}

@keyframes lifeline-reloaded-shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-4px) rotate(-4deg); }
    40% { transform: translateX(4px) rotate(4deg); }
    60% { transform: translateX(-3px) rotate(-3deg); }
    80% { transform: translateX(3px) rotate(3deg); }
    100% { transform: translateX(0); }
}

#question-section {
    padding: 0px;
    padding-bottom: 20px;
    border-radius: 30px;
    border: none;
    text-align: center;
    margin-bottom: 0;
    position: relative;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 15px;
}

#question-replay-warning {
    display: none;
    margin: 0px auto 5px;
    max-width: 90%;
    padding: 5px 10px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    background: rgb(255 250 205);
    color: var(--question-text);
    border: 2px solid rgba(247, 148, 30, 0.65);
    position: absolute;
    z-index: 99999999;
    top: 8px;
}

#question-image-frame {
    width: min(100%, 159px);
    aspect-ratio: 1 / 1;
    margin: 15px auto 0;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    background: rgba(27, 54, 93, 0.08);
}

#expression-image,
#image-skeleton {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
}

#expression-image {
    object-fit: contain;
    display: block;
    opacity: 1;
    transition: opacity 220ms ease;
}

#question-image-frame.is-loading #expression-image {
    opacity: 0;
}

#question-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-size: 1.5rem;
    margin: 0;
    color: var(--question-text);
    text-transform: uppercase;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.5);
    padding: 15px;
    box-sizing: border-box;
    padding-top: 0;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

#answers-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.answer-btn {
    background-color: var(--answer-bg);
    color: var(--answer-text);
    font-size: 1.1rem;
    padding: 15px;
    border-radius: 20px;
    border: 4px solid #1B365D;
    cursor: pointer;
    text-align: left;
    font-weight: bold;
    transition: background 0.3s, transform 0.1s;

}

.answer-btn:hover:not(:disabled) {
    background-color: var(--answer-hover);
    transform: translateY(-2px);

}

.answer-btn:active:not(:disabled) {
    transform: translateY(2px);

}

.answer-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;

    transform: none;
}

/* Added for hidden answers shadow */
.answer-btn.eliminated {
    background: transparent !important;
    border: 2px dashed #555 !important;
    color: transparent !important;
    pointer-events: none !important;

}

.answer-btn .answer-letter {
    color: #fff;
    font-weight: bold;
    margin-right: 10px;
    background-color: #19485D;
    border-radius: 100%;
    width: 15px;
    display: inline-flex;
    height: 15px;
    padding: 5px;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

@keyframes correct-flash {
    0% { background: linear-gradient(to right, #1a237e, #3f51b5); transform: scale(1); }
    50% { background: linear-gradient(to right, #00c853, #64dd17); transform: scale(1.05); }
    100% { background: linear-gradient(to right, #00c853, #64dd17); transform: scale(1); }
}

.correct-animation {
    animation: correct-flash 1s ease-in-out forwards !important;
    pointer-events: none;
}

.answer-btn.selected {

    border-color: var(--progress-fill);
    transform: scale(1.05);
    background-color: var(--answer-hover);
}

#answer-actions-wrapper {
    min-height: 80px;
    width: 100%;
    margin-top: 15px;
}

#answer-actions {
    width: 100%;
}

#answer-actions.hidden {
    display: none !important;
}

#timer-bar-container {
    width: 100%;
    height: 20px;
    background-color: #ddd;
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    border: 2px solid var(--modal-border);
}

#timer-bar {
    height: 100%;
    width: 100%;
    background-color: #8CC63F;
    transition: width 8s linear;
}

@keyframes timerColor {
    0% { background-color: #8CC63F; }
    50% { background-color: #FFD200; }
    100% { background-color: #E74C3C; }
}

.timer-animating {
    animation: timerColor forwards 8s linear;
}

#timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #1B365D;
    font-weight: bold;
    font-size: 0.9rem;
    pointer-events: none;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

.action-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    color: white;

    transition: transform 0.1s, border-bottom-width 0.1s, background-color 0.2s;
}

.action-btn:hover {
    transform: translateY(-2px);
}

.action-btn:active {
    transform: translateY(2px) !important;
    border-bottom-width: 1px !important;
    margin-bottom: 2px !important;
}

.action-btn.confirm {
    background-color: #8CC63F;
    border: 3px solid #1B365D;
    border-bottom: 4px solid #1B365D;
}

.action-btn.cancel {
    background-color: #E74C3C;
    border: 3px solid #1B365D;
    border-bottom: 4px solid #1B365D;
}

.hidden {
    display: none !important;
}

.hidden-desktop {
    display: none !important;
}

/* Animations */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px) scale(1.1); }
    60% { transform: translateY(-7px) scale(1.05); }
}

.star-bounce {
    animation: bounce 0.6s ease-out;
}

@keyframes popUp {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

button:active, .answer-btn:active, .lifeline:active {
    transform: scale(0.95) !important;
}

@keyframes slideUpFadeIn {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.slide-up-fade {
    animation: slideUpFadeIn 0.5s ease-out forwards;
}

/* Skeleton Loader */
.skeleton {
    animation: skeleton-shimmer 1.25s linear infinite;
    background: linear-gradient(110deg, #e2e5e7 25%, #f2f5f8 45%, #e2e5e7 65%);
    background-size: 200% 100%;
    border-radius: 30px;
}


@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


#image-skeleton {
    opacity: 0;
    transition: opacity 180ms ease;
}

#question-image-frame.is-loading #image-skeleton {
    opacity: 1;
}

/* Minigame Tutorial Overlay */
#minigame-tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10050;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#minigame-tutorial-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

#minigame-tutorial-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 400px;
    /* Position the content roughly below the score container */
    margin-top: -100px;
}

#minigame-tutorial-hand {
    animation: bounceHand 1s infinite;
    margin-bottom: 20px;
    position: absolute;
    top: 65px;
    right: 65px;
}

#minigame-tutorial-hand svg {
    width: 60px;
    height: 60px;
    stroke: #FFD200;
    transform: rotate(45deg);
}

@keyframes bounceHand {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

#minigame-tutorial-text {
    background: #1B365D;
    border: 4px solid #FFD200;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    color: #FFFFFF;
}

#minigame-tutorial-text p {
    font-size: 1.2rem;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

#minigame-tutorial-text p:first-child {
    font-size: 1.4rem;
    font-weight: bold;
    color: #8CC63F;
}

#minigame-tutorial-close,
#memory-tutorial-close {
    background: #8CC63F;
    color: #FFFFFF;
    border: 3px solid #1B365D;
    border-bottom: 4px solid #1B365D;
    padding: 10px 20px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
    transition: transform 0.1s, border-bottom-width 0.1s;
}

#minigame-tutorial-close:hover,
#memory-tutorial-close:hover {
    transform: translateY(-2px);
}

#minigame-tutorial-close:active,
#memory-tutorial-close:active {
    transform: translateY(2px) !important;
    border-bottom-width: 1px !important;
}

#memory-tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 15000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

#memory-tutorial-overlay.show {
    opacity: 1;
    visibility: visible;
}

#memory-tutorial-content {
    background: url('images/bg.png') center/cover;
    border: 4px solid #1B365D;
    border-radius: 20px;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    color: #1B365D;
}

#memory-tutorial-content p {
    font-size: 1.4rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.memory-tutorial-cards {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.memory-tutorial-card {
    width: 100px;
    height: 140px;
    border: 3px solid #1B365D;
    border-radius: 10px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.memory-tutorial-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.memory-tutorial-card-text {
    background-color: #f0f0f0;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

/* Highlighted state for the score container */
.highlighted-score {
    position: fixed !important;
    z-index: 10060 !important;
    background: #FFFFFF !important;
    border-color: #8CC63F !important;
}

.highlighted-score #minigame-score-count {
    color: #1B365D !important;
}

/* Drawer Menu (Glassmorphism) */
#minigame-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10050;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#drawer-overlay.show {
    opacity: 1;
    visibility: visible;
}

#drawer-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100dvh;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    padding: 12px 14px max(14px, env(safe-area-inset-bottom));
    transition: right 0.3s ease-in-out;
    z-index: 10001;
    border-left: 2px solid #1B365D;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #9C27B0 rgba(27, 54, 93, 0.15);
}

#drawer-menu::-webkit-scrollbar {
    width: 8px;
}

#drawer-menu::-webkit-scrollbar-track {
    background: rgba(27, 54, 93, 0.12);
    border-radius: 999px;
}

#drawer-menu::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #9C27B0, #3F51B5);
    border-radius: 999px;
}

#drawer-menu::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8E24AA, #3949AB);
}


#drawer-overlay.show #drawer-menu {
    right: 0;
}

#drawer-close {
    background: #F44336;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
    position: fixed;
    top: 10px;
    right: 312px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}


#drawer-close svg {
    width: 24px;
    height: 24px;
}


.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 1rem;
    color: #1B365D;
    font-weight: bold;
}

@media (max-height: 760px) {
    #drawer-menu {
        padding-top: 10px;
    }

    #drawer-menu h3 {
        display: none;
    }

    .menu-item {
        margin-top: 8px;
        font-size: 0.92rem;
    }

    .menu-item.menu-link svg {
        width: 22px;
        height: 22px;
    }

    #btn-roleta-game.menu-link,
    #btn-selos-conquistados-menu.menu-link,
    #btn-memory-game.menu-link,
    #btn-pairs-game.menu-link,
    #btn-guess-game.menu-link,
    #btn-ebook-expressoes.menu-link {
        padding: 10px 12px;
    }
}


/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--btn-primary);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

#lightning-flash-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lightning-flash-overlay.flash-active {
    opacity: 1;
    visibility: visible;
    animation: background-flicker 0.15s infinite alternate;
}

body.flash-active img {
    filter: invert(100%);
}

#lightning-animation {
    width: 300px;
    height: 300px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.flash-active #lightning-animation {
    animation: lightning-flicker 0.1s infinite alternate;
}

@keyframes lightning-flicker {
    0% { background-image: url('images/raio-1.png'); transform: scale(1) rotate(-15deg); opacity: 0.7; }
    33% { background-image: url('images/raio-2.png'); transform: scale(1.2) rotate(10deg); opacity: 1; }
    66% { background-image: url('images/raio-3.png'); transform: scale(0.8) rotate(-5deg); opacity: 0.9; }
    100% { background-image: url('images/raio-2.png'); transform: scale(1.1) rotate(15deg); opacity: 1; }
}

@keyframes background-flicker {
    0% { background: rgba(255, 255, 255, 0.3); }
    50% { background: rgba(255, 255, 255, 0.9); }
    100% { background: rgba(255, 255, 255, 0.6); }
}

/* Modals & End Screen */
#modal-overlay, #end-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10010;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background 5s ease-in-out;
    pointer-events: none;
}

#modal-overlay.show, #end-screen.show, #minigame-modal-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#minigame-modal-content {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 4px solid var(--modal-border);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    color: var(--text-color);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

#minigame-title {
    font-size: 2rem;
    color: #1B365D;
    margin-bottom: 10px;
}

#minigame-question-text {
    font-size: 1.5rem;
    color: #1B365D;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.8);
    padding: 15px;
    border-radius: 15px;
    border: 2px solid #1B365D;
}

#minigame-timer-container {
    width: 100%;
    height: 30px;
    background: #e0e0e0;
    border-radius: 15px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    border: 2px solid #1B365D;
}

#minigame-timer-bar {
    height: 100%;
    width: 100%;
    background-color: #8CC63F;
    transition: width 15s linear;
}

.minigame-timer-animating {
    animation: timerColor 15s forwards linear;
}

#minigame-timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #1B365D;
    font-size: 1.2rem;
    z-index: 2;
}

#minigame-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.minigame-btn {
    background: #FFD200;
    color: #1B365D;
    border: 2px solid #1B365D;
    border-bottom: 4px solid #1B365D;
    padding: 20px;
    font-size: 1.3rem;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
    transition: transform 0.1s, border-bottom-width 0.1s, background-color 0.2s;
    font-family: 'Fredoka', sans-serif;
}

.minigame-btn:active {
    transform: translateY(2px) !important;
    border-bottom-width: 2px !important;
}

.minigame-btn.correct {
    background: #8CC63F;
    color: white;
    border-color: #5a8a25;
}

.minigame-btn.wrong {
    background: #ff4b4b;
    color: white;
    border-color: #b52a2a;
}

#minigame-modal-overlay.show #minigame-modal-content {
    animation: popUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#modal-content, #end-screen > div, #acervo-modal-content {
    background: var(--modal-bg);
    background-image: url('images/bg.png');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 4px solid var(--modal-border);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    max-width: 95%;
    transform: scale(0); /* Start scaled down for popUp */

    color: var(--text-color);
}

#modal-overlay.show #modal-content, #end-screen.show {
    animation: popUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#end-screen {
    /* override the div wrapping logic to apply popUp animation to the whole container contents instead */
}

/* Wrap end screen contents for popUp animation */
#end-screen-content {
    background: var(--modal-bg);
    background-image: url('images/bg.png');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 4px solid var(--modal-border);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    max-width: 80%;
    transform: scale(0);

    color: var(--text-color);
}

#end-screen.show #end-screen-content {
    animation: popUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    max-height: 92vh;
    overflow-y: auto;
}

/* Audience Poll Chart */
.audience-poll-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 200px;
    margin-top: 20px;
    padding-bottom: 25px;
    border-bottom: 3px solid #1B365D;
    position: relative;
}


.bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    width: 20%;
    position: relative;
}

.bar-percentage {
    font-weight: bold;
    color: #1B365D;
    margin-bottom: 5px;
    font-size: 1.1rem;
    transition: color 0.3s;
}


.bar-container {
    width: 100%;
    height: 100%;
    background-color: rgba(27, 54, 93, 0.1);
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}


.bar {
    width: 100%;
    height: 0;
    transition: height 1.5s ease-out;
    border-radius: 10px 10px 0 0;
}

.bar-correct {
    background-color: #8CC63F; /* Green */

}

.bar-incorrect {
    background-color: #F7941E; /* Orange */

}

.bar-label {
    position: absolute;
    bottom: -25px;
    font-weight: bold;
    color: #1B365D;
    font-size: 1.2rem;
}


/* Loading Animation for Audience Poll */
.loading-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
}

.loading-dots div {
    width: 15px;
    height: 15px;
    background-color: #8CC63F;
    border-radius: 50%;
    animation: bounce 0.6s infinite alternate;
}

.loading-dots div:nth-child(2) {
    animation-delay: 0.2s;
    background-color: #F7941E;
}

.loading-dots div:nth-child(3) {
    animation-delay: 0.4s;
    background-color: #FFD200;
}

/* Specific "Entendido" button style for audience poll */
.btn-entendido {
    background-color: #FFD200 !important;
    color: #1B365D !important;
    border: 2px solid #1B365D !important;
    border-bottom: 4px solid #1B365D !important;
    font-weight: 900 !important;
    font-size: 1.3rem !important;

    padding: 12px 30px !important;
    transition: transform 0.1s, border-bottom-width 0.1s, background-color 0.2s !important;
}

.btn-entendido:hover {
    background-color: #ffd933 !important;
    transform: translateY(-2px) !important;
}

.btn-entendido:active {
    transform: translateY(2px) !important;
    border-bottom-width: 2px !important;
}

/* Acervo Modal Styles */
#acervo-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10005;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 15px;
    box-sizing: border-box;
}

#acervo-modal:not(.hidden-modal) {
    opacity: 1;
    visibility: visible;
}

#acervo-modal:not(.hidden-modal) #acervo-modal-content {
    animation: popUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#acervo-modal-content {
    width: 90%;
    max-width: 600px;
    height: 90vh;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    padding: 0; /* Remove padding to allow header/footer to touch edges */
    position: relative;
    overflow: hidden;
}

#acervo-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: #FFFFFF; /* Force white for contrast on blue */
    cursor: pointer;
    z-index: 10;
}

#acervo-close svg {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Dicionario Layout & Header */
.dicionario-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tab-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.hidden-tab {
    display: none !important;
}

#meus-selos-tab {
    padding: 20px;
}

.dicionario-header {
    background-color: #2b7bb9;
    background-image: linear-gradient(135deg, #1B365D 0%, #2b7bb9 100%); /* Texture-like gradient */
    position: relative;
    padding-top: 0px;
    padding-bottom: 0px;
    border-bottom: 4px solid var(--modal-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 16px 16px 0 0;
}

.banner-title {
    z-index: 3;
}

.banner-title h2 {
    color: #FFFFFF;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
    letter-spacing: 1px;
}

/* Badges Grid */
#badges-grid-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px 10px;
    background: rgba(255, 255, 255, 0.1);
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
    padding-bottom: 20px;
}

.roleta-selos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(80px, 1fr));
    gap: 10px;
}

.roleta-selo-card {
    background: #FFFFFF;
    border: 2px solid #1B365D;
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 90px;
}

.roleta-selo-card img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.roleta-selo-card.locked img {
    filter: grayscale(100%);
    opacity: 0.5;
}

.roleta-selo-label {
    margin-top: 6px;
    font-size: 0.65rem;
    text-align: center;
    color: #1B365D;
    font-weight: bold;
    line-height: 1.1;
}

#overall-progress-wrapper {
    padding: 10px 20px;
    text-align: center;
}

.overall-progress-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.overall-progress-track {
    flex-grow: 1;
    max-width: 340px;
    height: 15px;
    background: #EAEAEA;
    border-radius: 10px;
    border: 2px solid #1B365D;
    overflow: visible;
    position: relative;
}

#overall-progress-fill {
    border-radius: 10px 0px 0px 10px;
}

#roleta-selos-actions,
#roleta-selos-section {
    display: none !important;
}

#acervo-modal-content.acervo-roleta-mode #overall-progress-wrapper,
#acervo-modal-content.acervo-roleta-mode #badges-grid-container,
#acervo-modal-content.acervo-roleta-mode #meus-selos-tab,
#acervo-modal-content.acervo-roleta-mode .bottom-nav {
    display: none !important;
}

#acervo-modal-content.acervo-roleta-mode #dicionario-tab {
    display: flex;
    flex-direction: column;
}

#acervo-modal-content.acervo-roleta-mode {
    height: auto;
    max-height: 90vh;
}

#acervo-modal-content.acervo-roleta-mode .dicionario-layout,
#acervo-modal-content.acervo-roleta-mode .tab-content {
    height: auto;
}

#acervo-modal-content.acervo-roleta-mode #roleta-selos-actions {
    display: flex !important;
    order: 2;
    margin-top: 8px;
    margin-bottom: 16px;
}

#acervo-modal-content.acervo-roleta-mode #roleta-selos-section {
    display: block !important;
    order: 1;
}

/* Badge Card */
.badge-card {
    background: #FFFFFF;
    border-radius: 15px;
    border: 3px solid #FFFFFF;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 10px 10px; /* bottom padding for the ribbon */
    transition: transform 0.2s;
    cursor: pointer;
    min-height: 140px;
}

.badge-card:hover {
    transform: translateY(-5px);
}

.badge-card.locked {
    background: #1B365D;
    border-color: #FFFFFF;
    cursor: default;
}

.badge-card.locked:hover {
    transform: none;
}

.badge-ribbon {
    position: absolute;
    bottom: -15px; /* placed at the bottom */
    left: 50%;
    transform: translateX(-50%);
    background: #1B365D; /* blue background */
    border: 2px solid #FFFFFF; /* white border to match card */
    color: #FFFFFF; /* white text */
    font-size: 0.55rem;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 15px;
    white-space: nowrap;
    z-index: 2;
    text-transform: uppercase;
    text-align: center;
    max-width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 5px;
    width: 100%;
    justify-content: center;
}

.card-star {
    width: 15px;
    height: 15px;
    fill: #CCCCCC; /* Gray for unearned */
    stroke: #1B365D;
    stroke-width: 1px;
}

.card-star.active {
    fill: #FFD200; /* Yellow for earned */
}

.badge-icon {
    width: 100%;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.badge-icon svg {
    width: 100%;
    height: 100%;
}

.locked-icon {
    width: 40px;
    height: 40px;
    fill: #FFD200;
    margin-bottom: 10px;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.locked-text {
    font-size: 0.7rem;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    margin-top: 5px;
    line-height: 1.2;
}

.badge-progress-container {
    width: 90%;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}

.badge-progress-bar {
    flex-grow: 1;
    height: 12px;
    background: #EAEAEA;
    border: 2px solid #1B365D;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.badge-progress-fill {
    height: 100%;
    background: #8CC63F;
    width: 0%;
    transition: width 0.3s ease;
}

.badge-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.55rem;
    font-weight: bold;
    color: #1B365D;
}

.badge-phase-icon {
    width: 16px;
    height: 16px;
    fill: #EAEAEA;
    stroke: #1B365D;
    stroke-width: 2px;
}

.badge-phase-icon.completed {
    fill: #FFD200;
}

.badge-counter {
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFD200;
    -webkit-text-stroke: 1.5px #1B365D;
    text-shadow: 2px 2px 0px #1B365D;
    line-height: 1;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Pulse Animation for Gift Icon */
@keyframes pulseGift {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes scoreBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

.score-bounce {
    animation: scoreBounce 0.5s ease-in-out;
}

.gift-icon {
    animation: pulseGift 1.5s infinite ease-in-out;
}

.progress-gift-icon {
    position: absolute;
    right: -30px; /* Half of width to stick out */
    top: -15px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 10;
}

/* Flip Animation for Modals */
@keyframes flipIn {
    0% { transform: perspective(400px) rotateY(90deg); opacity: 0; }
    100% { transform: perspective(400px) rotateY(0deg); opacity: 1; }
}

.flip-animation {
    animation: flipIn 0.5s ease-out forwards !important;
}

/* Novo Jogo Styles */
#new-game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10005;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 15px;
    box-sizing: border-box;
}

#new-game-overlay:not(.hidden-modal) {
    opacity: 1;
    visibility: visible;
}

#new-game-overlay:not(.hidden-modal) #new-game-content {
    animation: popUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#new-game-content {
    width: 90%;
    max-width: 800px;
    height: 90vh;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: var(--modal-bg);
    background-image: url('images/bg.png');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    border: 4px solid var(--modal-border);
    border-radius: 20px;
}

#new-game-close:hover {
    transform: scale(1.1);
}

#new-game-close:active {
    transform: scale(0.95);
}

.life-heart {
    width: 30px;
    height: 30px;
    transition: fill 0.3s ease, transform 0.3s ease;
}

.life-heart.filled {
    fill: #E74C3C;
    stroke: #E74C3C;
}

.life-heart.empty {
    fill: none;
    stroke: #FFD200;
}

@keyframes heartbeat-fill {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.heart-fill-anim {
    animation: heartbeat-fill 0.5s ease-out;
}

/* Map Progression Styles */
.map-node {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #EAEAEA;
    border: 4px solid #1B365D;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: #1B365D;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    margin-bottom: 40px; /* Space between nodes */
    z-index: 2;
}

.map-node:hover:not(.locked) {
    transform: scale(1.1);
    background-color: #FFD200;
}

.map-node.completed {
    background-color: #8CC63F;
    color: white;
    border-color: #1B365D;
}

.map-node.current {
    background-color: #FFD200;
    border-color: #E74C3C;
    animation: bounceBtn 2s infinite;
}

.map-node.locked {
    background-color: #999;
    color: #ccc;
    border-color: #555;
    cursor: not-allowed;
}

.map-node.locked::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23555"><rect x="5" y="11" width="14" height="10" rx="2" ry="2" stroke="none"/><path d="M7 11V7a5 5 0 0110 0v4" fill="none" stroke="%23555" stroke-width="2"/></svg>');
    background-size: cover;
}

/* Connectors */
.map-connector {
    position: absolute;
    width: 10px;
    background-color: #1B365D;
    z-index: 1;
}

.map-connector.completed {
    background-color: #8CC63F;
}

/* Alternating path using CSS nth-child logic on the parent container */
/* We will use margins to create a zigzag */
.map-node-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
}

.map-node-wrapper:nth-child(even) .map-node {
    transform: translateX(50px);
}

.map-node-wrapper:nth-child(odd) .map-node {
    transform: translateX(-50px);
}

.map-node-wrapper:nth-child(even):hover .map-node:not(.locked) {
    transform: translateX(50px) scale(1.1);
}

.map-node-wrapper:nth-child(odd):hover .map-node:not(.locked) {
    transform: translateX(-50px) scale(1.1);
}

#new-game-map {
    position: relative;
    width: 100%;
}

/* Connectors lines between wrappers */
.map-path-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.path-line {
    fill: none;
    stroke: #1B365D;
    stroke-width: 8;
    stroke-dasharray: 10, 10;
}

.path-line.completed {
    stroke: #8CC63F;
    stroke-dasharray: none;
}

/* New Game Quiz Specific */
#new-game-answers-section .answer-btn {
    width: 100%;
}

.map-node.pulse-error {
    animation: pulseError 0.5s;
}

@keyframes pulseError {
    0% { transform: scale(1); background-color: #EAEAEA; }
    50% { transform: scale(1.1); background-color: #E74C3C; color: white; }
    100% { transform: scale(1); background-color: #EAEAEA; }
}

.map-node-wrapper:nth-child(even) .map-node.pulse-error {
    animation: pulseErrorEven 0.5s;
}

@keyframes pulseErrorEven {
    0% { transform: translateX(50px) scale(1); background-color: #EAEAEA; }
    50% { transform: translateX(50px) scale(1.1); background-color: #E74C3C; color: white; }
    100% { transform: translateX(50px) scale(1); background-color: #EAEAEA; }
}

.map-node-wrapper:nth-child(odd) .map-node.pulse-error {
    animation: pulseErrorOdd 0.5s;
}

@keyframes pulseErrorOdd {
    0% { transform: translateX(-50px) scale(1); background-color: #EAEAEA; }
    50% { transform: translateX(-50px) scale(1.1); background-color: #E74C3C; color: white; }
    100% { transform: translateX(-50px) scale(1); background-color: #EAEAEA; }
}

/* Rabiscos Mode overrides for New Game */
body.rabiscos-mode #new-game-overlay,
body.rabiscos-mode #new-game-content {
    background: #ffffff !important;
}
body.rabiscos-mode .life-heart {
    stroke: #000 !important;
}
body.rabiscos-mode .life-heart.filled {
    fill: #000 !important;
}
body.rabiscos-mode .map-node {
    background: #fff !important;
    border-color: #000 !important;
    color: #000 !important;
}
body.rabiscos-mode .map-node.completed {
    background: #e0e0e0 !important;
}
body.rabiscos-mode .map-node.current {
    border-style: dashed !important;
}
body.rabiscos-mode .path-line {
    stroke: #000 !important;
}

/* Memory Game Styles */
#memory-game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10005;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 15px;
    box-sizing: border-box;
}

#memory-game-overlay:not(.hidden-modal) {
    opacity: 1;
    visibility: visible;
}

#memory-game-overlay:not(.hidden-modal) #memory-game-content {
    animation: popUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#memory-game-content {
    width: 90%;
    max-width: 800px;
    height: 90vh;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: var(--modal-bg);
    background-image: url('images/bg.png');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    border: 4px solid var(--modal-border);
    border-radius: 20px;
}

#memory-close:hover {
    transform: scale(1.1);
}

#memory-close:active {
    transform: scale(0.95);
}

.memory-tabs-scroll {
    width: 100%;
    overflow-x: auto;
    /* Hide scrollbar for cleaner look */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.memory-tabs-scroll::-webkit-scrollbar {
    display: none;
}

.memory-tab {
    padding: 5px 10px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid #FFFFFF;
    border-radius: 15px;
    color: #FFFFFF;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.memory-tab.active {
    background: #FFD200;
    color: #1B365D;
    border-color: #1B365D;
}

.memory-tab.locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: #1B365D;
}

.memory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    perspective: 1000px;
}

@media (min-width: 601px) {
    .memory-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 15px;
    }
}

.memory-card {
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.memory-card.flipped {
    transform: rotateY(180deg);
}

@keyframes matchPop {
    0% { transform: rotateY(0deg) scale(1); filter: brightness(1); }
    50% { transform: rotateY(0deg) scale(1.15); filter: brightness(1.2); }
    100% { transform: rotateY(0deg) scale(1); filter: brightness(1); }
}

.memory-card.matched {
    transform: rotateY(0deg);
    opacity: 0.7;
    pointer-events: none;
    animation: matchPop 0.6s ease-out;
}

.memory-card-front, .memory-card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #1B365D;
    overflow: hidden;
    background: #FFFFFF;
}

.memory-card-back {
    background: #FFD200;
    background-image: url('images/bg.png');
    background-size: cover;
}

.memory-card-back img {
    width: 80%;
    height: auto;
}

.memory-card-back .star-icon {
    display: none;
    width: 80%;
    height: auto;
    fill: #FFD200;
    stroke: #1B365D;
    stroke-width: 2px;
}

.memory-card.matched .memory-card-back img {
    display: none;
}

.memory-card.matched .memory-card-back .star-icon {
    display: block;
}

.memory-tab-lock {
    width: 12px;
    height: 12px;
    margin-left: 5px;
    vertical-align: middle;
    fill: #FFD200;
}

.memory-card-front {
    transform: rotateY(180deg);
    padding: 5px;
    text-align: center;
}

.memory-card-front img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.memory-card-front p {
    font-size: 0.8rem;
    font-weight: bold;
    color: #1B365D;
    margin: 0;
    line-height: 1.1;
    word-break: break-word;
}

@media (min-width: 601px) {
    .memory-card-front p {
        font-size: 1rem;
    }
}

/* Bottom Navigation */
.bottom-nav {
    display: flex;
    background: #1B365D;
    border-top: 4px solid var(--modal-border);
    border-radius: 0 0 16px 16px;
}

.nav-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: #8e9bb0;
    padding: 15px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s;
}

.nav-btn:hover {
    background: rgba(255,255,255,0.1);
}

.nav-btn.active {
    color: #FFD200;
    background: rgba(255,210,0,0.1);

}

.nav-icon {
    width: 28px;
    height: 28px;
}

.nav-btn span {
    font-size: 0.75rem;
    font-weight: bold;
}

#acervo-search {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 2px solid var(--modal-border);
    font-size: 1.1rem;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.8);
    color: #333;
}

#acervo-list-container {
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    border-top: 2px solid rgba(0,0,0,0.1);
    padding-top: 10px;
}

#acervo-list {
    list-style: none;
    padding: 10px;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 15px;
    justify-content: center;
}

.acervo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 15px;
    border: 2px solid var(--modal-border);
    cursor: pointer;

    transition: transform 0.2s;
}

.acervo-item:hover {
    transform: scale(1.05);

}

.acervo-item img {
    width: 100%;
    aspect-ratio: 1.5 / 1;
    object-fit: cover;
    border-radius: 8px;
}

.acervo-item-info {
    display: block;
    text-align: center;
    margin-top: 8px;
}

.acervo-item-info strong {
    font-size: 0.95rem;
    color: #1B365D;
    text-transform: capitalize;
}

.acervo-item-info span {
    font-size: 0.85rem;
    color: var(--text-color);
}

#modal-title {
    color: #1B365D;
    margin-top: 0;
    font-size: 2rem;
    font-weight: 900;
}

#modal-overlay.privacy-terms-modal #modal-title {
    font-size: 1.4rem;
    text-align: left;
}

#modal-text {
    font-size: 0.95rem;
}

#modal-close, #modal-confirm, #btn-restart {
    background: #F7941E;
    color: var(--btn-text);
    border: 2px solid var(--modal-border);
    border-bottom: 4px solid var(--modal-border);
    padding: 10px 15px;
    min-height: 48px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, border-bottom-width 0.1s, background-color 0.2s;
}

#modal-close,
#modal-confirm {
    margin-top: 0;
}

#modal-close {

    background: #8e8e8e;
    color: #dadada;
    border: 2px solid #757575;
    border-bottom: 4px solid #757575;
}

#modal-close:hover, #modal-confirm:hover, #btn-restart:hover {
    background: #e5891d;
    transform: translateY(-2px);
}

#btn-acervo-end:hover {
    background: #e5bd00 !important;
    transform: translateY(-2px);
}
#btn-acervo-end:active {
    transform: translateY(2px) !important;
    border-bottom-width: 2px !important;
}
#modal-close:active, #modal-confirm:active, #btn-restart:active {
    transform: translateY(2px);
    border-bottom-width: 2px;
}


#end-errors-list img {
    width: 170px;
    height: 170px;
    max-width: 38vw;
    object-fit: contain;
    border-radius: 10px;
    border: 2px solid var(--modal-border);
    background: var(--question-bg);
}

#end-title {
    font-size: 3rem;
    color: #1B365D;
    font-weight: 900;
    margin-bottom: 5px;
}

#end-message {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

#end-message:empty {
    display: none;
}

.end-buttons-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.end-buttons-container #btn-restart {
    margin-top: 0;
}

/* Desktop Responsiveness */
@media (min-width: 601px) {
    #game-container {
        max-width: 800px;
    }

    #answers-section {
        grid-template-columns: repeat(4, 1fr);
    }

    #lifelines {
        flex-direction: column;
        top: 50%;
        bottom: auto;
        right: 20px;
        left: auto;
        transform: translateY(-50%);
        gap: 15px;
        margin: 0;
    }

    .end-buttons-container {
        gap: 20px;
    }
}

/* Mobile Responsiveness */
@media (max-width: 520px) {
    .banner-title h2 {
        font-size: 1.2rem;
    }
}

@media (max-width: 600px) {
    .transition-numbers span.text-transition {
        font-size: 3rem;
        -webkit-text-stroke: 2px #1B365D;
        text-shadow: 2px 2px 0px #1B365D;
    }

    #minigame-score-container {
        top: 10px;
        right: 50px;
        left: auto;
    }

    #image-container {
        width: 115px;
    }

    #answer-actions:not(.hidden) {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10005;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(3px);
    }

    #answer-actions:not(.hidden) .answer-actions-content {
        background: var(--modal-bg);
        background-image: url('images/bg.png');
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 4px solid var(--modal-border);
        padding: 30px;
        border-radius: 20px;
        text-align: center;
        width: 90%;
        max-width: 400px;

        animation: popUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    #answer-actions:not(.hidden) .hidden-desktop {
        display: block !important;
    }

    .confirm-question-mobile {
        color: var(--question-text);
        font-size: 1.2rem;
        margin-top: 0;
        margin-bottom: 10px;
        text-transform: uppercase;
        text-shadow: 1px 1px 0px #FFD200;
    }

    .confirm-answer-mobile {
        color: var(--text-color);
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 20px;
        background: rgba(255,255,255,0.5);
        padding: 10px;
        border-radius: 10px;
        border: 2px solid var(--modal-border);
    }

    #game-container {
        padding: 10px;
        width: 95%;
    }

    #question-text {
        font-size: 1.2rem;
    }

    .answer-btn {
        font-size: 14px;
        padding: 10px;
    }

    #lifelines {
        flex-wrap: wrap;
        gap: 10px;
    }

    .lifeline {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    #end-screen-content {
        width: 94%;
        max-width: 94%;
        padding: 14px 12px;
    }

    #end-logo {
        width: 84px !important;
        margin-bottom: 4px !important;
    }

    #end-title {
        font-size: 1.9rem;
    }

    #end-star-icon {
        width: 30px !important;
        height: 30px !important;
    }

    #end-stars-container {
        font-size: 1.5rem !important;
    }

    #end-message {
        font-size: 1rem;
    }

    #end-errors-container p {
        font-size: 1rem !important;
        margin: 4px 0 !important;
    }

    #end-errors-list {
        gap: 8px !important;
    }

    #end-errors-list img {
        width: 145px;
        height: 145px;
        max-width: 42vw;
    }

    #end-review-cta {
        margin-top: 8px !important;
        padding: 8px !important;
    }

    #btn-train-missed {
        font-size: 0.95rem !important;
        padding: 9px 12px !important;
    }

    .end-buttons-container {
        flex-wrap: wrap;
        gap: 8px;
    }

    .end-buttons-container #btn-restart,
    .end-buttons-container #btn-acervo-end {
        margin-top: 8px;
        min-height: 42px;
    }

    #pairs-game-content {
        width: 100%;
    }
}



@media (max-width: 340px) {


    #modal-title {
        font-size: 1.5rem;
    }

    .answer-btn {

        display: flex;
    }

    #answers-section {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #image-container {
        margin-top: 75px;
    }
}

/* Pares das Expressões */
.pairs-lang-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border: 2px solid #1B365D;
    border-radius: 15px;
    background: white;
    color: #1B365D;
    font-size: 1.2rem;
    font-family: 'Fredoka', sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s, background-color 0.2s;
    width: 100%;
}
.pairs-lang-btn:active {
    transform: scale(0.95);
}

.pair-btn {
    padding: 10px;
    border: 2px solid #EAEAEA;
    border-radius: 10px;
    background: white;
    color: #1B365D;
    font-size: 14px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    word-break: break-word;
}

.pair-btn.selected {
    background: #E1F5FE;
    border-color: #29B6F6;
    color: #0288D1;
}

.pair-btn.matched {
    background: #F5F5F5;
    border-color: #E0E0E0;
    color: #BDBDBD;
    cursor: default;
    opacity: 0.7;
}

.pair-btn.error {
    background: #FFEBEE;
    border-color: #EF5350;
    color: #C62828;
    animation: pair-shake 0.4s;
}

@keyframes pair-shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}
/* Pares das Expressões Game Overlay */
#pairs-game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:  10005;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 15px;
    box-sizing: border-box;
}

#pairs-game-overlay:not(.hidden-modal) {
    opacity: 1;
    visibility: visible;
}

#pairs-game-overlay:not(.hidden-modal) #pairs-game-content {
    animation: popUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#pairs-game-content {
    width: 90%;
    max-width: 800px;
    height: 90vh;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}

.empty-heart {
    fill: none !important;
    stroke: #555 !important;
}

/* Adivinhe as Expressões */
#guess-game-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

#guess-game-content {
    width: min(430px, 100%);
    max-height: min(92dvh, 780px);
    background: linear-gradient(180deg, #eaf2ff, #d6e6ff);
    border: 3px solid #1B365D;
    border-radius: 22px;
    padding: 18px 16px 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.35);
}

#guess-game-close {
    position: absolute;
    top: 12px;
    right: 12px;
    border: none;
    background: transparent;
    color: #1B365D;
    cursor: pointer;
}

#guess-game-close svg {
    width: 28px;
    height: 28px;
}

.guess-game-title {
    color: #1B365D;
    font-size: 1.45rem;
    margin: 4px 0;
    text-align: center;
}

.guess-game-subtitle {
    color: #2C5AA0;
    margin: 0 0 12px;
    font-weight: 600;
    font-size: 0.9rem;
}

.guess-card {
    width: 100%;
    height: 100%;
    perspective: 1200px;
    cursor: pointer;
}

.guess-game-swiper {
    width: min(300px, 100%);
    height: min(440px, 62dvh);
    padding: 6px 0 10px;
    overflow: visible;
}

.guess-game-swiper .swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guess-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.7s ease;
}

.guess-card.is-flipped .guess-card-inner {
    transform: rotateY(180deg);
}

.guess-card-face {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
    background-image: url('images/bg.png');
    background-size: cover;
    background-position: center;
}

.guess-card-front {
    border: 3px solid #8CC63F;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.guess-card-emoji {
    font-size: 25px;
    text-align: center;
    line-height: 1.15;
    background: rgba(255, 255, 255, 0.75);
    color: #1B365D;
    border-radius: 14px;
    padding: 10px 14px;
}

.guess-card-hint {
    margin-top: 20px;
    color: #2C5AA0;
    font-size: 0.9rem;
}

.guess-card-back {
    background: linear-gradient(rgba(27, 54, 93, 0.88), rgba(44, 90, 160, 0.88)), url('images/bg.png');
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    gap: 14px;
}

.guess-card-emoji-back {
    font-size: 22px;
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.35);
    max-width: 100%;
}

.guess-card-answer {
    font-size: clamp(1.15rem, 4.8vw, 1.7rem);
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

.guess-game-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.guess-game-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #1B365D;
    color: #FFD200;
    font-size: 1.4rem;
    cursor: pointer;
}

#guess-game-counter {
    min-width: 64px;
    text-align: center;
    color: #1B365D;
    font-weight: 700;
}

/* ROLETA MODAL STYLES */
.roleta-segment {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Create a 60-degree slice from the top center */
    clip-path: polygon(50% 50%, 21.1325% 0%, 78.8675% 0%);
    transform-origin: 50% 50%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15px; /* Adjust as needed for distance from edge */
}

.roleta-segment-content {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%); /* For 60deg slice centered at 50%, no extra rotation needed to center text relative to slice */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 80px;
}

.roleta-segment-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 5px;
}

.roleta-segment-text {
    font-size: 0.6rem;
    font-family: 'Fredoka', sans-serif;
    color: #1B365D;
    font-weight: bold;
    line-height: 1.1;
    word-wrap: break-word;
}

/* Colors for segments alternating */
.roleta-segment:nth-child(even) {
    background-color: #FFD200; /* Yellow */
}

.roleta-segment:nth-child(odd) {
    background-color: #8CC63F; /* Green */
}

.roleta-segment.roleta-winner-glow {
    animation: glow-pulse 1s infinite alternate;
    box-shadow: inset 0 0 0 2px #FFFFFF, 0 0 10px rgba(255, 255, 255, 0.9);
    z-index: 2;
}

.roleta-center-book {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: #1B365D;
    border-radius: 50%;
    border: 3px solid #FFD200;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    animation: pulse-roleta-center 1.5s ease-in-out infinite;
}

.roleta-winner-glow {
    animation: glow-pulse 1s infinite alternate;
}

#btn-roleta-spin {
    position: relative;
    background: linear-gradient(180deg, #b94ef0, #7d33c9);
    color: #FFF;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 15px 42px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    text-transform: uppercase;
    transform: translateY(0);
    box-shadow:
        0 8px 0 #4a2278,
        0 12px 16px rgba(0, 0, 0, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.35);
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

#btn-roleta-spin:hover {
    filter: brightness(1.05);
}

#btn-roleta-spin:active,
#btn-roleta-spin.is-pressed {
    transform: translateY(6px) scale(0.98);
    box-shadow:
        0 2px 0 #4a2278,
        0 6px 10px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body.rabiscos-mode #btn-roleta-spin {
    background: #ffffff !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
    box-shadow:
        0 6px 0 #000000,
        0 10px 14px rgba(0, 0, 0, 0.2) !important;
}

body.rabiscos-mode #btn-roleta-spin:hover {
    filter: none !important;
    background: #f2f2f2 !important;
}

body.rabiscos-mode #btn-roleta-spin:active,
body.rabiscos-mode #btn-roleta-spin.is-pressed {
    box-shadow:
        0 2px 0 #000000,
        0 5px 8px rgba(0, 0, 0, 0.2) !important;
}

@keyframes glow-pulse {
    from {
        box-shadow: 0 0 10px #FFF, 0 0 20px #FFD200;
    }
    to {
        box-shadow: 0 0 20px #FFF, 0 0 40px #FFD200;
    }
}
.hidden-modal {
    display: none !important;
}

.roleta-notification {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #FF3B30;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none; /* User prefers flat design */
}
.roleta-notification.hidden {
    display: none !important;
}


.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1B365D;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: 'Fredoka', sans-serif;
    white-space: nowrap;
    margin-bottom: 10px;
    z-index: 1000;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1B365D transparent transparent transparent;
}

#roleta-spin-tooltip {
    background-color: #FFFFFF;
    color: #1B365D;
    border: 2px solid #1B365D;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

#roleta-spin-tooltip::after {
    border-color: #FFFFFF transparent transparent transparent;
}

#roleta-spins-tooltip {
    top: calc(100% + 10px);
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
    white-space: normal;
    width: 250px;
    text-align: center;
    background-color: #FFFFFF;
    color: #1B365D;
    border: 2px solid #1B365D;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

#roleta-spins-tooltip::after {
    top: -12px;
    border-color: transparent transparent #FFFFFF transparent;
}

.lifeline-cooldown-tooltip {
    position: fixed;
    transform: translate(-50%, -100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    max-width: none;
    padding: 8px 12px;
    background-color: #1B365D;
    color: #fff;
    z-index: 3000;
    margin-bottom: 0;
    gap: 8px;
}

.lifeline-cooldown-tooltip .lifeline-timer-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    flex-shrink: 0;
}

.lifeline-cooldown-tooltip.show {
    opacity: 1;
}

.lifeline-cooldown-tooltip.edge-left::after {
    left: 18px;
    transform: translateX(0);
}

.lifeline-cooldown-tooltip.edge-right::after {
    left: calc(100% - 18px);
    transform: translateX(0);
}

@keyframes pulse-roleta-center {
    0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 rgba(255, 210, 0, 0.2); }
    50% { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 18px rgba(255, 210, 0, 0.8); }
    100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 rgba(255, 210, 0, 0.2); }
}

@keyframes pulse-new-game-btn {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(140, 198, 63, 0.2); }
    50% { transform: scale(1.08); box-shadow: 0 0 14px rgba(140, 198, 63, 0.95); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(140, 198, 63, 0.2); }
}

#btn-novo-jogo.pulse-unlocked-new-game {
    animation: pulse-new-game-btn 1.2s ease-in-out infinite;
}

body.game-reset-destroying {
    animation: gameDestroying 7s ease-in-out forwards;
}

body #modal-content,
body #modal-title,
body #modal-text,
body #modal-top-close,
body #modal-close,
body #modal-confirm {
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

@keyframes gameDestroying {
    0% { filter: none; opacity: 1; transform: scale(1); }
    30% { filter: saturate(1.4) contrast(1.2); transform: scale(1.01); }
    65% { filter: grayscale(1) contrast(1.4); opacity: 0.85; transform: scale(0.98) rotate(-0.2deg); }
    100% { filter: grayscale(1) blur(10px); opacity: 0; transform: scale(0.86) rotate(1deg); }
}

#modal-overlay.reset-destruction-active #modal-content.reset-destruction-modal {
    animation: resetModalShatter 4.2s ease forwards;
    transform-origin: center;
}

.reset-destruction-modal-content p {
    margin: 8px 0;
    color: #111;
    font-weight: 700;
}

.reset-destruction-modal-content {
    animation: resetWobble 0.36s ease-in-out infinite;
}

.reset-destruction-loader {
    width: 90%;
    height: 12px;
    margin: 14px auto;
    border-radius: 10px;
    border: 2px solid #2f2f2f;
    overflow: hidden;
    position: relative;
    background: #bdbdbd;
}

.reset-destruction-loader::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #111111, #4d4d4d, #9c9c9c);
    transform: translateX(-100%);
    animation: resetLoaderFill 4.2s linear forwards;
}

.reset-destruction-warning {
    font-size: 0.9rem;
    opacity: 0.85;
    color: #111;
}

#reset-destruction-overlay {
    position: fixed;
    inset: 0;
    z-index: 120000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255,87,34,0.35) 0%, rgba(24,24,24,0.92) 60%, rgba(0,0,0,0.98) 100%);
    transition: opacity 0.35s ease;
}

#reset-destruction-overlay.show {
    opacity: 1;
}

.reset-destruction-blast {
    position: absolute;
    width: 22vmin;
    height: 22vmin;
    border-radius: 50%;
    border: 6px solid rgba(255, 210, 0, 0.9);
    box-shadow: 0 0 35px rgba(255, 152, 0, 0.9);
    animation: resetBlastPulse 1.2s ease-in-out infinite;
}

.reset-destruction-text {
    position: relative;
    font-size: clamp(1.3rem, 4vw, 2.2rem);
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 152, 0, 0.95);
    animation: resetTextGlitch 0.45s steps(2, end) infinite;
}

@keyframes resetModalShatter {
    0% { transform: scale(1) rotate(0); filter: none; opacity: 1; }
    75% { transform: scale(1.01) rotate(-0.8deg); filter: saturate(1.15); opacity: 1; }
    100% { transform: scale(0.68) rotate(8deg); filter: blur(6px) grayscale(1); opacity: 0; }
}

@keyframes resetLoaderFill {
    100% { transform: translateX(0); }
}

@keyframes resetBlastPulse {
    0% { transform: scale(0.55); opacity: 0.95; }
    100% { transform: scale(2.8); opacity: 0; }
}

@keyframes resetTextGlitch {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, 1px); }
}

@keyframes resetWobble {
    0% { transform: translateX(0) rotate(0); }
    15% { transform: translateX(-2px) rotate(-1deg); }
    30% { transform: translateX(2px) rotate(1deg); }
    45% { transform: translateX(-1px) rotate(-0.6deg); }
    60% { transform: translateX(1px) rotate(0.6deg); }
    100% { transform: translateX(0) rotate(0); }
}

body.rabiscos-mode #btn-novo-jogo {
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
}

.roleta-segment-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 0px !important; /* Reset margin bottom since we want it below text */
}

body.rabiscos-mode #roleta-overlay {
    background-color: rgba(255, 255, 255, 0.97) !important;
}

body.rabiscos-mode #roleta-close,
body.rabiscos-mode #roleta-content,
body.rabiscos-mode #btn-selos-conquistados-roleta {
    color: #000000 !important;
}

body.rabiscos-mode #roleta-spins-counter {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

body.rabiscos-mode #roleta-pointer {
    border-top-color: #000000 !important;
}

body.rabiscos-mode #roleta-wheel {
    border-color: #000000 !important;
    background-color: #ffffff !important;
}

body.rabiscos-mode .roleta-segment:nth-child(even) {
    background-color: #f3f3f3;
}

body.rabiscos-mode .roleta-segment:nth-child(odd) {
    background-color: #dcdcdc;
}

body.rabiscos-mode .roleta-segment-text {
    color: #000000;
}

body.rabiscos-mode .roleta-center-book {
    background-color: #ffffff;
    border-color: #000000;
}

/* Encontre as Expressões */
#find-expressions-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(4px);
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

#find-expressions-content {
    width: min(96vw, 540px);
    height: min(96dvh, 960px);
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: none;
}

#find-expressions-close {
    position: absolute;
    top: 12px;
    right: 12px;
    border: none;
    background: rgba(0, 0, 0, 0.52);
    color: #ffffff;
    cursor: pointer;
    z-index: 4;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#find-expressions-close svg {
    width: 20px;
    height: 20px;
}

#find-expressions-task-hint {
    position: absolute;
    top: 12px;
    left: 12px;
    border: none;
    background: rgba(255, 210, 0, 0.95);
    color: #1B365D;
    cursor: pointer;
    z-index: 4;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 0 rgba(255, 210, 0, 0.65);
    animation: findHintPulse 1.4s infinite;
}

#find-expressions-task-hint svg {
    width: 22px;
    height: 22px;
}

#find-expressions-level-switch {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.find-level-btn {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.58);
    color: #ffffff;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    padding: 0;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.find-level-btn.active {
    background: #FFD200;
    color: #1B365D;
    border-color: rgba(255, 210, 0, 0.95);
}

.find-level-number {
    line-height: 1;
}

.find-level-chip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + -10px);
    transform: translateX(-50%);
    background: #ffffff;
    color: #000000;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: normal;
    padding: 2px 6px;
    white-space: nowrap;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.find-expressions-controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 4;
}

#find-expressions-pin-hud {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 999px;
    padding: 7px 10px 7px 7px;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

#find-expressions-pin-hud.is-dragging {
    cursor: grabbing;
}

.find-expressions-pin-hud-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    padding: 0;
}

.find-expressions-pin-hud-btn img {
    width: 23px;
    height: 23px;
    object-fit: contain;
}

.find-expressions-pin-hud-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.find-expressions-pin-hud-btn.pin-returned {
    animation: pinReturnedPulse 0.38s ease;
}

.find-expressions-pin-marker {
    position: absolute;
    width: 35px;
    height: 35px;
    transform: translate(-50%, -100%);
    user-select: none;
    touch-action: none;
    z-index: 3;
}

.find-expressions-pin-marker::before,
.find-expressions-pin-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    border: 4px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    transform: translate(-50%, -72%) scale(0.7);
    opacity: 0;
    pointer-events: none;
}

.find-expressions-pin-marker.is-dragging::before,
.find-expressions-pin-marker.is-dragging::after {
    animation: findPinHoldPulse 0.95s ease-out infinite;
}

.find-expressions-pin-marker.is-dragging::after {
    animation-delay: 0.28s;
}

.find-expressions-pin-marker img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.find-expressions-pin-marker.is-dragging {
    cursor: grabbing;
}

.find-expressions-pin-remove {
    position: absolute;
    top: 3px;
    left: calc(100% + 3px);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: #795548;
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.find-expressions-pin-remove.hidden {
    display: none;
}

@keyframes pinReturnedPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

@keyframes findPinHoldPulse {
    0% { transform: translate(-50%, -72%) scale(0.7); opacity: 0.85; }
    100% { transform: translate(-50%, -72%) scale(2.15); opacity: 0; }
}

.find-expressions-btn {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.58);
    color: #ffffff;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    padding: 0;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.find-expressions-btn svg {
    width: 20px;
    height: 20px;
}

.find-expressions-btn-reveal {
    background: rgba(46, 139, 87, 0.9);
    border-color: rgba(255, 255, 255, 0.55);
}

.find-expressions-btn-reveal.suggest-reveal {
    animation: findRevealSuggest 0.72s ease;
}

.find-expressions-btn-reveal.suggest-reveal-loop {
    animation: findRevealSuggest 1s ease-in-out infinite;
}

.find-expressions-btn-reveal.is-revealed {
    background: rgba(20, 90, 50, 0.9);
}

#find-expressions-stage {
    flex: 1;
    min-height: 0;
    border-radius: 22px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: #101820;
    overflow: hidden;
    touch-action: none;
    position: relative;
    aspect-ratio: 9 / 16;
    width: 100%;
    height: 100%;
}

#find-expressions-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center center;
    transition: transform 0.12s ease-out, filter 0.45s ease;
    will-change: transform;
}

#find-expressions-image.reveal-anim {
    animation: findRevealPulse 0.85s ease;
    filter: saturate(1.15) brightness(1.08);
}

#find-expressions-task-modal {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.56);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
}

#find-expressions-task-card {
    width: min(88%, 360px);
    background: #ffffff;
    border: 3px solid #1B365D;
    border-radius: 16px;
    padding: 14px;
    color: #1B365D;
}

#find-expressions-task-card h3 {
    margin: 0 0 10px 0;
    text-align: center;
}

#find-expressions-task-card p {
    margin: 0 0 10px 0;
    font-size: 13px;
    text-align: center;
    color: #333;
}

#find-expressions-task-card ul {
    margin: 0 0 12px 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#find-expressions-task-pages {
    position: relative;
}

.find-task-page {
    display: none;
}

.find-task-page.active {
    display: block;
}

#find-expressions-task-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 10px 0;
}

.find-task-nav-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #1B365D;
    background: #ffffff;
    color: #1B365D;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#find-task-bullets {
    display: flex;
    align-items: center;
    gap: 8px;
}

.find-task-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(27, 54, 93, 0.3);
    padding: 0;
    cursor: pointer;
}

.find-task-bullet.active {
    background: #1B365D;
}

#find-expressions-task-close {
    width: 100%;
    border: 2px solid #1B365D;
    border-radius: 12px;
    background: #FFD200;
    color: #1B365D;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    padding: 8px;
    cursor: pointer;
}

#find-expressions-next-level {
    width: 100%;
    border: 2px solid #2E8B57;
    border-radius: 12px;
    background: #2E8B57;
    color: #ffffff;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    padding: 8px;
    cursor: pointer;
    margin-bottom: 8px;
}

@keyframes findRevealPulse {
    0% { opacity: 0.45; transform: scale(1.03); }
    45% { opacity: 1; transform: scale(1); }
    70% { opacity: 0.8; transform: scale(1.015); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes findHintPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 210, 0, 0.6);
    }
    70% {
        transform: scale(1.06);
        box-shadow: 0 0 0 12px rgba(255, 210, 0, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 210, 0, 0);
    }
}

@keyframes findRevealSuggest {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 210, 0, 0.85); }
    40% { transform: scale(1.14); box-shadow: 0 0 0 12px rgba(255, 210, 0, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 210, 0, 0); }
}