/* ========================================
   Tréning s Jednorožkom – Kawaii Unicorn Theme
   ======================================== */

/* --- Reset & Base --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', 'Segoe UI', Tahoma, sans-serif;
    background: linear-gradient(160deg, #e8d5f5 0%, #f5d5e0 30%, #d5e8f5 60%, #e0f5e8 100%);
    color: #4a3560;
    min-height: 100vh;
    padding: 16px;
    overflow-x: hidden;
}

/* --- Floating background decorations --- */
.bg-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bg-float {
    position: absolute;
    font-size: 2rem;
    opacity: 0.3;
    animation: floatDrift 20s ease-in-out infinite;
}

.bg-float-1 { top: 8%; left: 5%; animation-duration: 22s; font-size: 2.5rem; }
.bg-float-2 { top: 15%; right: 10%; animation-duration: 18s; animation-delay: -3s; }
.bg-float-3 { top: 40%; left: 8%; animation-duration: 25s; animation-delay: -7s; }
.bg-float-4 { top: 60%; right: 5%; animation-duration: 20s; animation-delay: -10s; }
.bg-float-5 { top: 75%; left: 15%; animation-duration: 23s; animation-delay: -5s; }
.bg-float-6 { top: 25%; right: 20%; animation-duration: 19s; animation-delay: -8s; }
.bg-float-7 { bottom: 10%; right: 12%; animation-duration: 24s; animation-delay: -12s; font-size: 2.5rem; }
.bg-float-8 { bottom: 25%; left: 20%; animation-duration: 21s; animation-delay: -2s; }

@keyframes floatDrift {
    0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
    25% { transform: translateY(-20px) translateX(10px) rotate(5deg); }
    50% { transform: translateY(-10px) translateX(-10px) rotate(-3deg); }
    75% { transform: translateY(-25px) translateX(5px) rotate(3deg); }
}

/* --- Screen containers --- */
.screen {
    display: none;
    max-width: 700px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 30px;
    padding: 28px 24px;
    box-shadow:
        0 8px 32px rgba(180, 140, 200, 0.2),
        0 2px 8px rgba(180, 140, 200, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    text-align: center;
    position: relative;
    z-index: 1;
    border: 2px solid rgba(220, 200, 240, 0.4);
}

.screen.active {
    display: block;
}

/* --- Mascot Header (main menu) --- */
.mascot-header {
    margin-bottom: 20px;
}

.mascot-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 8px;
    animation: gentleBounce 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(180, 140, 200, 0.3));
}

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

h1 {
    color: #7c5ba0;
    margin-bottom: 6px;
    font-size: 2.2rem;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(180, 140, 200, 0.2);
    letter-spacing: 0.5px;
}

.subtitle {
    color: #b08cc0;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

h2 {
    color: #7c5ba0;
    margin-bottom: 18px;
    font-size: 1.6rem;
    font-weight: 800;
}

/* --- Menu card --- */
.menu-card {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 24px 20px;
    border: 2px solid rgba(220, 200, 240, 0.3);
}

/* --- Profile / Input --- */
.profile-selection {
    margin-bottom: 16px;
}

.input-wrapper {
    position: relative;
    margin-bottom: 14px;
}

.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
}

#player-name {
    width: 100%;
    padding: 16px 16px 16px 46px;
    border: 2px solid #e0d0f0;
    border-radius: 20px;
    font-size: 1.2rem;
    font-family: 'Nunito', sans-serif;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    color: #4a3560;
    transition: all 0.3s ease;
}

#player-name::placeholder {
    color: #b8a0d0;
}

#player-name:focus {
    outline: none;
    border-color: #c8a0e8;
    box-shadow: 0 0 0 4px rgba(200, 160, 232, 0.2);
}

/* --- Emoji Password Grid --- */
.password-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #7c5ba0;
    margin-bottom: 12px;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.emoji-btn {
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
    border: 2px solid #e0d0f0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.emoji-btn:hover {
    border-color: #c8a0e8;
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(200, 160, 232, 0.3);
}

.emoji-btn:active {
    transform: scale(0.95);
}

.emoji-btn.selected {
    border-color: #a070d0;
    background: linear-gradient(135deg, #f0e0f8, #e0d0f8);
    box-shadow: 0 2px 10px rgba(160, 112, 208, 0.3);
}

.emoji-btn.selected::after {
    content: attr(data-order);
    position: absolute;
    top: -6px;
    right: -6px;
    background: #a070d0;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
}

.password-selection {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 1.5rem;
    min-height: 44px;
}

.password-slot {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #d0c0e0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    font-size: 1.4rem;
    color: #b8a0d0;
}

.password-slot.filled {
    border-style: solid;
    border-color: #a070d0;
    background: rgba(240, 224, 248, 0.6);
    color: inherit;
}

.password-arrow {
    color: #c8a0e8;
    font-size: 1.1rem;
    font-weight: 700;
}

.password-error {
    color: #d06080;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
    20%, 40%, 60%, 80% { transform: translateX(6px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

#password-confirm-btn {
    margin-bottom: 8px;
}

#password-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Logged in status --- */
.status-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f0e0f8, #e8d8f8);
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 700;
    color: #7c5ba0;
    margin-bottom: 14px;
    font-size: 1.05rem;
}

/* --- Session selection --- */
.session-selection {
    margin-bottom: 16px;
}

.session-label {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    color: #7c5ba0;
    margin-bottom: 10px;
}

#session-dropdown {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e0d0f0;
    border-radius: 20px;
    font-size: 1.1rem;
    font-family: 'Nunito', sans-serif;
    background: rgba(255, 255, 255, 0.8);
    color: #4a3560;
    margin-bottom: 14px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237c5ba0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    text-align: center;
    text-align-last: center;
}

#session-dropdown:focus {
    outline: none;
    border-color: #c8a0e8;
    box-shadow: 0 0 0 4px rgba(200, 160, 232, 0.2);
}

/* --- Buttons --- */
button {
    font-family: 'Nunito', sans-serif;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

button:active {
    transform: scale(0.95) !important;
}

.btn-magic {
    background: linear-gradient(135deg, #c8a0e8, #a080d0);
    color: white;
    padding: 16px 36px;
    margin: 8px 0;
    border-radius: 50px;
    font-size: 1.15rem;
    font-weight: 700;
    box-shadow:
        0 4px 16px rgba(168, 120, 208, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    display: inline-block;
}

@media (hover: hover) {
    .btn-magic:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(168, 120, 208, 0.45);
    }
}

.btn-start {
    background: linear-gradient(135deg, #90d8b0, #60c090);
    color: white;
    padding: 18px 40px;
    margin: 8px 0;
    border-radius: 50px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow:
        0 4px 16px rgba(96, 192, 144, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    display: inline-block;
    width: 100%;
}

@media (hover: hover) {
    .btn-start:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(96, 192, 144, 0.45);
    }
}

.btn-badges {
    background: linear-gradient(135deg, #f8d060, #e8b830);
    color: #6a4800;
    padding: 14px 32px;
    margin: 8px 0;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow:
        0 4px 16px rgba(232, 184, 48, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    display: inline-block;
}

@media (hover: hover) {
    .btn-badges:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(232, 184, 48, 0.4);
    }
}

.logout-wrapper {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(220, 200, 240, 0.4);
}

.btn-logout {
    background: none;
    color: #b0a0c0;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(180, 160, 200, 0.3);
}

@media (hover: hover) {
    .btn-logout:hover {
        color: #907080;
        border-color: rgba(180, 130, 160, 0.4);
        background: rgba(240, 220, 230, 0.3);
    }
}

.btn-back {
    background: linear-gradient(135deg, #c0c8d8, #a0a8b8);
    color: white;
    padding: 14px 32px;
    margin: 12px 0;
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(160, 168, 184, 0.3);
    display: inline-block;
}

@media (hover: hover) {
    .btn-back:hover {
        transform: translateY(-2px);
    }
}

/* --- Game screen header --- */
.header {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    padding: 8px 0 12px;
    border-bottom: 2px solid rgba(220, 200, 240, 0.4);
    gap: 6px;
}

.header-timer {
    text-align: center;
    margin-bottom: 4px;
}

.header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.info-badge {
    font-weight: 700;
    color: #7c5ba0;
    font-size: 1rem;
    background: rgba(240, 224, 248, 0.6);
    padding: 5px 12px;
    border-radius: 14px;
}

.info-badge-small {
    font-weight: 600;
    color: #9080a0;
    font-size: 0.9rem;
}

.score-badge {
    font-weight: 800;
    color: #d09020;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #fef8e0, #fdf0c8);
    padding: 5px 14px;
    border-radius: 14px;
    border: 1px solid rgba(232, 184, 48, 0.2);
}

.counter-badge {
    font-weight: 700;
    color: #7c5ba0;
    font-size: 0.95rem;
}

/* --- Quit button --- */
#quit-game-btn {
    position: fixed;
    top: 12px;
    left: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 44px;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    color: #9080a0;
    box-shadow: 0 2px 8px rgba(140, 120, 160, 0.2);
    z-index: 100;
    border: 2px solid rgba(220, 200, 240, 0.4);
    backdrop-filter: blur(4px);
}

@media (hover: hover) {
    #quit-game-btn:hover {
        background: rgba(255, 255, 255, 0.9);
        transform: scale(1.05);
    }
}

/* --- Timer --- */
#timer-display {
    display: inline-block;
    font-weight: 800;
    color: #c060a0;
    font-size: 1.6rem;
    padding: 6px 24px;
    border-radius: 30px;
    background: linear-gradient(135deg, #fce8f4, #f0d8ec);
    border: 2px solid rgba(200, 140, 180, 0.2);
    letter-spacing: 2px;
}

#timer-display.countdown {
    animation: timerPulse 1s ease-in-out infinite;
    background: linear-gradient(135deg, #fcd8e8, #f0c0d8);
    color: #d04880;
    border-color: rgba(208, 72, 128, 0.3);
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* --- Question card --- */
.question-card {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 24px 18px;
    border: 2px solid rgba(220, 200, 240, 0.3);
    margin-bottom: 10px;
}

.question-prompt {
    margin-bottom: 22px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border-radius: 16px;
    transition: background 0.15s;
}

.question-prompt:hover {
    background: rgba(180, 140, 220, 0.08);
}

.question-prompt:active {
    background: rgba(180, 140, 220, 0.18);
}

.tts-hint {
    font-size: 1rem;
    opacity: 0.45;
    line-height: 1;
    pointer-events: none;
    transition: opacity 0.15s;
}

.question-prompt:hover .tts-hint {
    opacity: 0.85;
}

.question-prompt p {
    font-size: 1.25rem;
    font-weight: 700;
    color: #4a3560;
    line-height: 1.6;
    max-width: 560px;
}

svg.grid-visual,
svg.shapes-visual {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(160, 120, 200, 0.18));
}

.question-prompt img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(180, 140, 200, 0.2);
}

/* --- Choices --- */
.choices-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 10px;
}

.choice {
    background: linear-gradient(160deg, #fff, #f8f0ff);
    border: 3px solid #e8d8f4;
    border-radius: 20px;
    padding: 18px 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    box-shadow: 0 3px 10px rgba(180, 140, 200, 0.12);
}

.choice p {
    font-size: 1.15rem;
    font-weight: 700;
    color: #5a4070;
    margin: 0;
}

@media (hover: hover) {
    .choice:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(180, 140, 200, 0.25);
        border-color: #c8a0e8;
        background: linear-gradient(160deg, #fff, #f0e0ff);
    }
}

.choice:active {
    transform: scale(0.96);
}

.choice img {
    max-width: 100%;
    margin-bottom: 8px;
    border-radius: 12px;
}

.choice svg.choice-shape {
    display: block;
    filter: drop-shadow(0 1px 3px rgba(120, 80, 160, 0.2));
}

/* --- Feedback --- */
.feedback {
    display: none;
    padding: 18px;
    margin: 12px 0;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1.15rem;
}

.feedback.correct {
    background: linear-gradient(135deg, #d8f5e4, #c0ecd0);
    color: #2a7050;
    border: 3px solid #80d8a0;
    font-size: 1.4rem;
    animation: correctPop 0.4s ease;
}

.feedback.wrong {
    background: linear-gradient(135deg, #fde8e0, #f8d8d0);
    color: #a05040;
    border: 3px solid #e8a898;
    font-size: 1.3rem;
    animation: wrongShake 0.4s ease;
}

.feedback-correct-answer {
    margin-top: 8px;
    font-size: 0.95rem;
    font-weight: 600;
}

.feedback-explanation {
    margin-top: 6px;
    font-size: 0.88rem;
    font-weight: 400;
    opacity: 0.85;
}

.btn-next-question {
    display: block;
    margin: 14px auto 0;
    padding: 8px 24px;
    background: rgba(255,255,255,0.25);
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 20px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-next-question:hover {
    background: rgba(255,255,255,0.4);
}

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

@keyframes wrongShake {
    0% { transform: translateX(0); opacity: 0; }
    20% { transform: translateX(-8px); opacity: 1; }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

/* --- Results screen --- */
.results-card {
    padding: 20px 10px;
}

.results-mascot {
    font-size: 4rem;
    display: block;
    margin-bottom: 12px;
    animation: gentleBounce 2s ease-in-out infinite;
}

.results-text {
    font-size: 1.2rem;
    color: #7c5ba0;
    font-weight: 600;
    margin-bottom: 10px;
}

.results-score {
    font-size: 3rem;
    font-weight: 800;
    color: #d09020;
    background: linear-gradient(135deg, #fef8e0, #fdf0c8);
    display: inline-block;
    padding: 12px 40px;
    border-radius: 24px;
    margin-bottom: 20px;
    border: 2px solid rgba(232, 184, 48, 0.3);
    box-shadow: 0 4px 16px rgba(232, 184, 48, 0.2);
}

/* --- Badges --- */
.badges-header {
    margin-bottom: 16px;
}

.badges-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 6px;
    animation: twinkle 2s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.15) rotate(10deg); opacity: 0.8; }
}

.badges-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.badge-item {
    background: linear-gradient(160deg, #fff, #f8f0ff);
    border-radius: 20px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(180, 140, 200, 0.15);
    border: 2px solid rgba(220, 200, 240, 0.4);
}

@media (hover: hover) {
    .badge-item:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 8px 24px rgba(180, 140, 200, 0.25);
        border-color: #c8a0e8;
    }
}

.badge-locked {
    cursor: default;
    opacity: 0.55;
    filter: grayscale(40%);
}

@media (hover: hover) {
    .badge-locked:hover {
        transform: none;
        box-shadow: 0 3px 12px rgba(180, 140, 200, 0.15);
        border-color: rgba(220, 200, 240, 0.4);
    }
}

.badge-item img {
    width: 100%;
    border-radius: 14px;
    margin-bottom: 8px;
}

/* --- Badge detail --- */
.badge-detail {
    text-align: center;
    padding: 24px;
}

.badge-detail video {
    max-width: 100%;
    border-radius: 20px;
    margin-bottom: 16px;
}

/* --- Badge unlock overlay --- */
.badge-unlock {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(248, 240, 255, 0.97);
    z-index: 1000;
    padding: 24px;
    text-align: center;
    overflow-y: auto;
    animation: unlockFadeIn 0.4s ease;
}

.badge-unlock video {
    max-width: min(360px, 90vw);
    max-height: 45vh;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(180, 140, 200, 0.35);
}

.badge-unlock h2 {
    font-size: 1.5rem;
    color: #9060c0;
    margin: 0;
}

.badge-unlock-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #6040a0;
    margin: 0;
}

.badge-unlock-desc {
    color: #888;
    margin: 0;
}

.badge-unlock-btn {
    margin-top: 8px;
}

@keyframes unlockFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* --- Session set buttons --- */
.question-set-selection {
    margin: 24px 0;
}

.set-btn {
    background: linear-gradient(135deg, #c8a0e8, #a080d0);
    color: white;
    border: none;
    padding: 14px 28px;
    margin: 8px 5px;
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 3px 12px rgba(168, 120, 208, 0.3);
}

@media (hover: hover) {
    .set-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 16px rgba(168, 120, 208, 0.4);
    }
}

.set-btn.active {
    background: linear-gradient(135deg, #90d8b0, #60c090);
    box-shadow: 0 0 16px rgba(96, 192, 144, 0.4);
}

/* --- Mobile responsive --- */
@media (max-width: 480px) {
    body {
        padding: 10px;
    }

    .screen {
        padding: 20px 16px;
        border-radius: 24px;
    }

    h1 {
        font-size: 1.8rem;
    }

    .mascot-icon {
        font-size: 3rem;
    }

    .choices-container {
        gap: 10px;
    }

    .choice {
        padding: 14px 10px;
    }

    .choice p {
        font-size: 1.05rem;
    }

    .question-prompt p {
        font-size: 1.1rem;
    }
}

/* --- Landscape on small devices --- */
@media (max-height: 500px) and (orientation: landscape) {
    body {
        padding: 8px;
    }

    .screen {
        padding: 14px 16px;
        border-radius: 20px;
    }

    .header {
        margin-bottom: 8px;
        padding: 4px 0 8px;
        gap: 3px;
    }

    .question-card {
        padding: 14px 14px;
    }

    .question-prompt {
        min-height: 50px;
        margin-bottom: 12px;
    }

    .choices-container {
        gap: 8px;
        margin-bottom: 6px;
    }

    .choice {
        padding: 10px 8px;
        min-height: 44px;
    }

    .mascot-icon {
        font-size: 2rem;
        margin-bottom: 4px;
    }

    .mascot-header {
        margin-bottom: 10px;
    }

    h1 { font-size: 1.5rem; margin-bottom: 4px; }
    .subtitle { font-size: 0.9rem; margin-bottom: 4px; }
}

/* ========================================
   Correct-answer particle burst
   ======================================== */
.kawaii-particle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 1.4rem;
    line-height: 1;
    will-change: transform, opacity;
    animation: kawaii-fly var(--dur, 0.9s) ease-out forwards;
}

@keyframes kawaii-fly {
    0%   { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 1; }
    60%  { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(1.1) rotate(var(--rot)); opacity: 0; }
}

/* --- Course selection grid --- */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    max-width: 600px;
    margin: 20px auto;
    padding: 0 16px;
}

.course-card {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(124, 91, 160, 0.15);
    border: 2px solid rgba(220, 200, 240, 0.4);
}

@media (hover: hover) {
    .course-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(124, 91, 160, 0.25);
        border-color: #c8a0e8;
    }
}

.course-card:active {
    transform: scale(0.96);
}

.course-card img {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    object-fit: cover;
    margin-bottom: 8px;
}

.course-card h3 {
    margin-top: 4px;
    font-size: 1rem;
    color: #4a3560;
    font-weight: 700;
}

.course-desc {
    font-size: 0.85rem;
    color: #8a7a9a;
    margin-top: 4px;
    font-weight: 600;
}

/* --- Parent link --- */
.parent-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 0.85rem;
    color: #9b7ec0;
    text-decoration: none;
}
.parent-link:hover {
    color: #6b4e8a;
    text-decoration: underline;
}

/* ============================================================
   WORLD MAP
   ============================================================ */

#world-map-panel {
    margin-bottom: 4px;
}

/* HUD strips above and below the map scroll area */
.world-map-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 2px;
}

.map-hud-btn {
    background: linear-gradient(135deg, #c8a0e8, #a080d0);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(168, 120, 208, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.map-hud-btn-secondary {
    background: rgba(255, 255, 255, 0.7);
    color: #7c5ba0;
    box-shadow: 0 2px 6px rgba(120, 100, 160, 0.12);
    border: 1.5px solid rgba(200, 180, 240, 0.5);
}

@media (hover: hover) {
    .map-hud-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(168, 120, 208, 0.4);
    }
    .map-hud-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.95);
    }
}

/* The scrollable map container */
#world-map-container {
    width: 100%;
    height: 320px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 18px;
    background: linear-gradient(135deg, #d0eaff 0%, #c8e0f8 30%, #d8f0e0 70%, #e8f0d0 100%);
    border: 2px solid rgba(160, 200, 240, 0.4);
    box-shadow: inset 0 2px 8px rgba(100, 160, 220, 0.15);
    /* Hide scrollbar but keep scrollable */
    scrollbar-width: thin;
    scrollbar-color: rgba(160, 130, 200, 0.4) transparent;
}

#world-map-container::-webkit-scrollbar {
    height: 4px;
}
#world-map-container::-webkit-scrollbar-track {
    background: transparent;
}
#world-map-container::-webkit-scrollbar-thumb {
    background: rgba(160, 130, 200, 0.4);
    border-radius: 2px;
}

/* Wide inner canvas — width set by JS */
#world-map-wrap {
    position: relative;
    height: 100%;
    min-width: 100%;
}

/* Stops container — position:static so absolutely-positioned stop children
   resolve to #world-map-wrap as their containing block */
#world-map-stops {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; /* stops re-enable per-element */
}

/* SVG path layer fills the whole wrap */
#world-map-path-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Parallax background layers */
.wm-parallax-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    will-change: transform;
}

#wm-layer-1 {
    background:
        radial-gradient(ellipse 80px 40px at 15% 25%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(ellipse 60px 30px at 35% 18%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(ellipse 90px 35px at 62% 28%, rgba(255,255,255,0.65) 0%, transparent 100%),
        radial-gradient(ellipse 55px 25px at 80% 20%, rgba(255,255,255,0.55) 0%, transparent 100%),
        linear-gradient(180deg, #b8deff 0%, #d8efff 45%, #e8f6ff 70%, transparent 100%);
    background-size: 600px 100%, 600px 100%, 600px 100%, 600px 100%, 100% 100%;
    background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}

#wm-layer-2 {
    background:
        radial-gradient(ellipse 120px 55px at 20% 85%, rgba(130,185,110,0.7) 0%, transparent 70%),
        radial-gradient(ellipse 90px 45px at 45% 90%, rgba(110,170,90,0.6) 0%, transparent 70%),
        radial-gradient(ellipse 110px 50px at 72% 83%, rgba(120,178,100,0.65) 0%, transparent 70%),
        radial-gradient(ellipse 80px 40px at 90% 88%, rgba(100,160,80,0.6) 0%, transparent 70%),
        linear-gradient(180deg, transparent 50%, rgba(160,210,140,0.45) 80%, rgba(130,190,110,0.65) 100%);
    background-size: 500px 100%, 500px 100%, 500px 100%, 500px 100%, 100% 100%;
    background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}

/* Stop nodes */
.map-stop {
    position: absolute;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -100%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease;
    pointer-events: auto;
}

.map-stop img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 3px 7px rgba(80, 60, 120, 0.28));
    border-radius: 10px;
    transition: filter 0.2s ease;
}

@media (hover: hover) {
    .map-stop:not(.locked):hover {
        transform: translate(-50%, -100%) scale(1.14);
    }
    .map-stop:not(.locked):hover img {
        filter: drop-shadow(0 5px 12px rgba(80, 60, 120, 0.4));
    }
}

.map-stop.available img {
    animation: mapStopPulse 2s ease-in-out infinite;
}

.map-stop.locked {
    cursor: default;
}

/* Number badge in top-right corner of each stop */
.map-stop-num {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #7c5ba0;
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    font-family: 'Nunito', sans-serif;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    pointer-events: none;
    line-height: 1;
}

.map-stop.completed .map-stop-num { background: #5ba07c; }
.map-stop.available  .map-stop-num { background: #e8a030; }
.map-stop.locked     .map-stop-num { background: #aaa; }

@keyframes mapStopPulse {
    0%, 100% { filter: drop-shadow(0 3px 7px rgba(80,60,120,0.28)) drop-shadow(0 0 6px rgba(96,192,144,0.5)); }
    50%       { filter: drop-shadow(0 3px 7px rgba(80,60,120,0.28)) drop-shadow(0 0 16px rgba(96,192,144,0.85)); }
}

/* Character element */
#world-map-character {
    position: absolute;
    /* feet at the point — shift up by full height */
    transform: translate(-50%, calc(-100% - 4px));
    pointer-events: none;
    z-index: 10;
    /* smooth glide when JS changes left/top */
    transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                top  0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Inner wrapper handles direction flip independently of position transform */
.char-inner {
    width: 56px;
    height: 56px;
    transition: transform 0.18s ease;
}

#world-map-character.facing-left .char-inner {
    transform: scaleX(-1);
}

#world-map-character img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: mapCharacterIdle 2.8s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(100, 80, 140, 0.35));
}

#world-map-character.walking img {
    animation: mapCharacterWalk 0.28s ease-in-out infinite;
}

@keyframes mapCharacterIdle {
    0%, 100% { transform: translateY(0)    rotate(-3deg) scaleY(1); }
    40%       { transform: translateY(-6px) rotate(2deg)  scaleY(0.96); }
    70%       { transform: translateY(-3px) rotate(-1deg) scaleY(0.98); }
}

@keyframes mapCharacterWalk {
    0%   { transform: translateY(0)     rotate(-5deg) scaleY(1);    }
    25%  { transform: translateY(-10px) rotate(3deg)  scaleY(0.9);  }
    50%  { transform: translateY(-4px)  rotate(-2deg) scaleY(0.97); }
    75%  { transform: translateY(-10px) rotate(4deg)  scaleY(0.9);  }
    100% { transform: translateY(0)     rotate(-5deg) scaleY(1);    }
}

/* Sprite animation mode — hide img, use .char-inner as the sprite canvas */
#world-map-character.sprite-mode img {
    display: none !important;
}
#world-map-character.sprite-mode .char-inner {
    background-repeat: no-repeat;
    background-size: auto 56px;
    background-position-y: center;
}

/* Session info popup — comic book thought bubble */
#map-session-popup {
    position: fixed;
    transform: translateX(-50%);
    transform-origin: bottom center;
    width: min(210px, 78vw);
    z-index: 600;
    text-align: center;
    animation: thinkBubblePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Clips content + provides visual bubble — tail sits outside this */
.map-popup-clip {
    background: #fff;
    border-radius: 20px;
    border: 2.5px solid #b898d8;
    padding: 11px 14px 10px;
    box-shadow: 3px 3px 0 #d8c0f8;
    max-height: 30vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Scrollable content area */
.map-popup-body {
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.map-popup-body-inner {
    /* auto-scroll animation applied by JS when content overflows */
}

@keyframes popupBodyScroll {
    0%, 12%  { transform: translateY(0); }
    70%, 82% { transform: translateY(var(--popup-scroll-dist, 0px)); }
    100%     { transform: translateY(0); }
}

@keyframes thinkBubblePop {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.1); }
    100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Thought-bubble tail: three descending circles */
.bubble-tail {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}
.bubble-tail span {
    display: block;
    background: #fff;
    border: 2px solid #b898d8;
    border-radius: 50%;
}
.bubble-tail span:nth-child(1) { width: 10px; height: 10px; }
.bubble-tail span:nth-child(2) { width:  7px; height:  7px; }
.bubble-tail span:nth-child(3) { width:  4px; height:  4px; }

.map-popup-close {
    position: absolute;
    top: 7px;
    right: 9px;
    background: none;
    border: none;
    font-size: 0.85rem;
    color: #c0a8d8;
    cursor: pointer;
    padding: 2px 5px;
    line-height: 1;
}

#map-session-popup h3 {
    color: #7c5ba0;
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 4px;
    padding-right: 16px;
}

.map-popup-stars {
    font-size: 1rem;
    margin-bottom: 4px;
    letter-spacing: 2px;
}

.map-popup-desc {
    font-size: 0.82rem;
    color: #7070a0;
    font-weight: 600;
    margin: 0 0 2px;
}

.map-popup-meta {
    font-size: 0.76rem;
    color: #a090b0;
    margin: 0 0 9px;
}


#map-session-popup {
    cursor: pointer;
}

/* ========================================
   Fullscreen world map when logged in (all screen sizes)

   ZOOM STRATEGY: zoom:2 on #world-map-container with width:50vw/height:50vh.
   The container's logical coordinate space is halved (50vw×50vh) and the browser
   scales it 2× visually to fill 100vw×100vh. Everything inside (wrap, stops,
   character, path, parallax) lives in the same halved logical space, so all JS
   coordinate math (scroll, parallax, popup) works unchanged.
   ======================================== */

/* Strip body padding when logged in */
body.is-logged-in {
    padding: 0;
}

/* Prevent body scroll only when world map is active (not course selection etc.) */
body.wm-active {
    overflow: hidden;
}

/* Strip the card — it's invisible behind the fixed map anyway */
body.is-logged-in #main-menu {
    max-width: 100%;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
}

body.is-logged-in .mascot-header {
    display: none;
}

body.is-logged-in .menu-card {
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
}

/* The map container is fixed and covers the full viewport via scale(2).
   50vw × 50vh logical → 100vw × 100vh visual.
   Using transform instead of zoom for iOS Safari compatibility
   (zoom on position:fixed is broken on iOS). Scroll math and parallax
   work unchanged — everything inside shares the same halved logical space. */
body.is-logged-in #world-map-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 50vw;
    height: 50vh;
    transform: scale(2);
    transform-origin: top left;
    z-index: 1;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

/* HUD bars are fixed overlays above the map (outside the zoomed container) */
body.is-logged-in .world-map-hud {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 12px 20px;
}

body.is-logged-in #world-map-hud-top {
    top: 0;
    background: linear-gradient(to bottom, rgba(30,10,50,0.45) 0%, transparent 100%);
}

body.is-logged-in #world-map-hud-bottom {
    bottom: 0;
    background: linear-gradient(to top, rgba(30,10,50,0.45) 0%, transparent 100%);
}

/* Hide player name badge — redundant when fullscreen */
body.is-logged-in #logged-in-status {
    display: none;
}


/* ── Map edge tap zones (left / right arrow navigation) ── */
.wm-nav-zone {
    display: none; /* hidden until logged in */
}

body.is-logged-in .wm-nav-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 12vw;
    z-index: 15; /* above map, below HUD (20) and popup */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    /* Subtle gradient fade from edge */
    color: rgba(255, 255, 255, 0.55);
    font-size: 14vw;
    font-weight: 300;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, background 0.15s;
    user-select: none;
}

body.is-logged-in #wm-nav-left {
    left: 0;
    background: linear-gradient(to right, rgba(20,5,40,0.22) 0%, transparent 100%);
}

body.is-logged-in #wm-nav-right {
    right: 0;
    background: linear-gradient(to left, rgba(20,5,40,0.22) 0%, transparent 100%);
}

@media (hover: hover) {
    body.is-logged-in .wm-nav-zone:hover {
        color: rgba(255, 255, 255, 0.85);
        background: linear-gradient(to right, rgba(20,5,40,0.38) 0%, transparent 100%);
    }
    body.is-logged-in #wm-nav-right:hover {
        background: linear-gradient(to left, rgba(20,5,40,0.38) 0%, transparent 100%);
    }
}

body.is-logged-in .wm-nav-zone:active {
    color: rgba(255, 255, 255, 1);
}