/* =========================================================
   STUDARIA — SPEAKING FLASHCARDS (Hybrid Mode)
   ========================================================= */

.speaking-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 40px;
    padding: 60px 20px;

    background: radial-gradient(circle at center,
        #e8e3d8 0%,
        #dcd6c9 40%,
        #d4cec0 100%
    );

    min-height: 70vh;
    border-radius: 24px;

    box-shadow:
        0 20px 40px rgba(0,0,0,0.08),
        inset 0 0 40px rgba(0,0,0,0.05);

    animation: fadeIn 0.6s ease;
}

/* CARD */
.speaking-card {
    width: 420px;
    min-height: 300px;

    background: #f7f3eb;
    border: 2px solid var(--sand);
    border-radius: 22px;

    box-shadow:
        0 10px 28px rgba(0,0,0,0.12),
        0 4px 10px rgba(0,0,0,0.06);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 40px 20px;

    transform-style: preserve-3d;
    backface-visibility: hidden;

    transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s ease;
}

/* FLIP ANIMATION */
.speaking-card.flip {
    transform: rotateY(90deg);
    opacity: 0;
}

.speaking-card.unflip {
    transform: rotateY(0deg);
    opacity: 1;
}

/* SHRINK IN NORMAL MODE */
body:not(.fullscreen-game) .speaking-card {
    transform: scale(0.85);
}

/* FULL SIZE IN FULLSCREEN */
body.fullscreen-game .speaking-card {
    transform: scale(1);
}

/* TEXT */
.speaking-word {
    font-family: var(--serif);
    font-size: 3rem;
    color: var(--espresso);
    text-align: center;
    margin-bottom: 12px;
}

.speaking-phonetic {
    font-family: var(--sans);
    font-size: 1.1rem;
    color: var(--text-soft);
    text-align: center;
    letter-spacing: 0.5px;
}

/* BUTTONS */
.speaking-controls {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

/* START SCREEN */
.classroom-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 80px 20px;
    gap: 20px;

    text-align: center;
    animation: fadeIn 0.6s ease;
}

.classroom-start p {
    max-width: 420px;
    line-height: 1.5;
}

/* FULLSCREEN FIXES */
body.fullscreen-game {
    overflow: hidden;
    background: #dcd6c9;
}

body.fullscreen-game .nav-shell,
body.fullscreen-game .menu-panel,
body.fullscreen-game .game-hero {
    display: none !important;
}

body.fullscreen-game #game-view {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    padding: 0 !important;
    margin: 0 !important;

    background: radial-gradient(circle at center,
        #e8e3d8 0%,
        #dcd6c9 40%,
        #d4cec0 100%
    );

    border-radius: 0 !important;
    box-shadow: none !important;

    z-index: 999;
}

/* LOGO + EXIT */
.studaria-logo {
    position: fixed;
    top: 24px;
    left: 32px;
    font-family: var(--serif);
    font-size: 1.6rem;
    letter-spacing: 2px;
    color: var(--espresso);
    opacity: 0.85;
    z-index: 1001;
    display: none;
}

body.fullscreen-game .studaria-logo {
    display: block !important;
}

#exit-fullscreen {
    position: fixed;
    top: 24px;
    right: 32px;

    background: #b89f7a;
    color: white;
    border-radius: 8px;
    padding: 10px 20px;
    border: none;

    font-family: var(--sans);
    cursor: pointer;
    transition: background 0.25s ease;

    display: none;
}

body.fullscreen-game #exit-fullscreen {
    display: block !important;
}

#exit-fullscreen:hover {
    background: #a88f6a;
}

#exit-fullscreen {
    display: none;
}

/* ANIMATION */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* TONES */

.tone1 { color: #d9534f; }  /* red */
.tone2 { color: #f0ad4e; }  /* amber */
.tone3 { color: #5bc0de; }  /* teal */
.tone4 { color: #5cb85c; }  /* green */
.tone0 { color: #999; }     /* neutral */