* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f7ff;
    color: #152033;
}

.leoleo-body {
    min-height: 100vh;
}

.screen {
    min-height: 100vh;
    padding: 32px;
}

.screen-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card {
    width: min(100%, 980px);
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(32, 50, 90, 0.12);
    padding: 42px;
}

.hero-card {
    text-align: center;
}

.brand {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 12px;
}

.brand.small {
    font-size: 30px;
    margin-bottom: 4px;
}

h1 {
    margin: 0;
    font-size: 46px;
    line-height: 1.1;
}

.subtitle {
    margin: 18px auto 34px;
    font-size: 22px;
    color: #5b667a;
}

.meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.meta-button {
    min-height: 180px;
    border: 0;
    border-radius: 26px;
    background: linear-gradient(180deg, #fff6cf, #ffd968);
    box-shadow: 0 12px 24px rgba(181, 137, 22, 0.18);
    cursor: pointer;
    font-size: 26px;
    color: #2b2100;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.meta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 28px rgba(181, 137, 22, 0.24);
}

.meta-button strong,
.meta-button small {
    display: block;
}

.meta-button small {
    margin-top: 10px;
    font-size: 18px;
}

.robux-icon {
    display: block;
    font-size: 42px;
    margin-bottom: 8px;
}

.practice-layout {
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
    min-height: 100vh;
    padding: 28px 0;
}

.top-panel {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
}

.score-box {
    background: #ffffff;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 10px 28px rgba(32, 50, 90, 0.1);
}

.score-label {
    color: #5b667a;
    font-size: 18px;
    font-weight: 700;
}

.score-number {
    font-size: 38px;
    font-weight: 900;
    margin: 4px 0 14px;
}

.progress {
    width: 100%;
    height: 18px;
    border-radius: 999px;
    background: #e6eaf5;
    overflow: hidden;
}

.progress > div {
    height: 100%;

    border-radius: 999px;

    background: linear-gradient(
        90deg,
        #15803d,
        #22c55e,
        #86efac
    );

    transition: width 0.25s ease;
}

.game-card {
    position: relative;
    min-height: 560px;
    background: #ffffff;
    border-radius: 32px;
    box-shadow: 0 18px 45px rgba(32, 50, 90, 0.12);
    padding: 34px 44px 40px;
    text-align: center;
}

.audio-button {
    position: absolute;
    top: 28px;
    right: 32px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: 0;
    background: #2878ff;
    color: #fff;
    font-size: 42px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(40, 120, 255, 0.25);
}

.instruction {
    font-size: 28px;
    font-weight: 800;
    color: #4e5b70;
    margin-top: 22px;
}

.question-text {
    margin: 18px auto 30px;
    font-size: 124px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 6px;
    color: #14213d;
}

.options-grid {
    display:grid;
    grid-template-columns:repeat(4, 220px);
    justify-content:center;
    gap:24px;
    margin:0 auto 24px;
}

.option-button {
    min-height: 120px;

    border: 0;
    border-radius: 24px;

    background: linear-gradient(180deg,#3b82f6,#2563eb);

    color: #ffffff;

    font-size: 48px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        inset 0 -5px 0 rgba(0,0,0,.12),
        0 10px 22px rgba(37,99,235,.22);

    transition:
        transform .1s ease,
        filter .1s ease;
}

.option-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.message-box-top{
    margin:0 0 12px 0;

    font-size:26px;
    font-weight:800;

    text-align:center;

    color:#4e5b70;
}

.claim-area {
    margin-top: 22px;
}

.claim-button,
.primary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 0 34px;
    border: 0;
    border-radius: 22px;
    background: #22b14c;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.hidden {
    display: none !important;
}

@media (max-width: 900px) {
    .top-panel,
    .meta-grid,
    .options-grid {
        grid-template-columns: 1fr;
    }

    .question-text {
        font-size: 86px;
    }
}

/* =========================
   MENU
========================= */

.menu-layout{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
}

.menu-card{
    width:100%;
    max-width:700px;
    background:#ffffff;
    border-radius:30px;
    padding:50px;
    text-align:center;
    box-shadow:0 10px 40px rgba(0,0,0,.08);
}

.menu-logo{
    font-size:80px;
    margin-bottom:10px;
}

.menu-title{
    font-size:56px;
    margin:0;
    color:#1e293b;
}

.menu-subtitle{
    margin-top:10px;
    font-size:24px;
    color:#64748b;
}

.menu-buttons{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.menu-button{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:90px;
    border-radius:20px;
    text-decoration:none;
    font-size:30px;
    font-weight:700;
    transition:.2s;
}

.menu-button:hover{
    transform:scale(1.02);
}

.menu-button.primary{
    background:#2563eb;
    color:#fff;
}

.menu-button.secondary{
    background:#facc15;
    color:#111827;
}

/* =========================
   PRACTICA LIBRE DE SILABAS
========================= */

.back-menu-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-direction:row;
    white-space:nowrap;
    gap:10px;

    min-height:62px;
    padding:0 26px;

    border-radius:20px;

    background:linear-gradient(180deg,#ffd84d,#facc15);

    color:#111827;
    font-size:22px;
    font-weight:900;
    text-decoration:none;

    box-shadow:
        0 10px 22px rgba(250,204,21,.22),
        inset 0 -4px 0 rgba(0,0,0,.08);

    transition:.15s ease;
}

.free-card{
    gap:22px;
}

.syllable-group{
    width:100%;

    margin-bottom:34px;
}

.syllable-group-title{
    font-size:24px;
    font-weight:900;
    color:#334155;
    margin-bottom:12px;
}

.free-options-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:16px;
}

.free-syllable-button{
    min-height:95px;
    border:0;
    border-radius:22px;
    background:#2563eb;
    color:#fff;
    font-size:42px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(37,99,235,.22);
    transition:.15s ease;
}

.free-syllable-button:hover{
    transform:scale(1.04);
}

.free-syllable-button.active{
    background:#22c55e;
    transform:scale(.96);
}

.hidden-question{
    display:none;
}

.child-name{
    margin-top:6px;
    font-size:18px;
    font-weight:700;
    color:#64748b;
}

.top-actions{
    display:flex;
    align-items:center;
    gap:18px;
}

.login-form{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:28px;
}

.login-input{
    width:100%;
    min-height:70px;
    border:3px solid #dbeafe;
    border-radius:18px;
    padding:0 22px;
    font-size:26px;
    font-weight:700;
    text-align:center;
    outline:none;
}

.login-input:focus{
    border-color:#2563eb;
}

.login-button{
    border:0;
    cursor:pointer;
    font-size:26px;
}

.top-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;
}

.top-actions .score-box{
    min-width:320px;
}

@media (max-width: 900px) {
    .top-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .top-actions .score-box{
        min-width:0;
    }
}

.score-robux{
    display:flex;
    align-items:center;
    gap:10px;
}

.score-robux img{
    width:42px;
    height:42px;
    object-fit:contain;
}

.instruction-steps{
    width:fit-content;

    margin:10px auto 42px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;

    text-align:left;
}

.options-grid{
    margin-top:30px;
}

.inline-robux{
    width:34px;
    height:34px;
    vertical-align:middle;
    object-fit:contain;
    margin-left:4px;
}

.lower-option{
    display:block;

    margin-top:6px;

    font-size:.55em;
    font-weight:900;

    color:#dbeafe;

    text-transform:none;
}