@font-face {
    font-family: 'NgiwaMontserrat';
    src: url('../montserrat/Montserrat-Regular.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
    font-display: block;
}

@font-face {
    font-family: 'NgiwaMontserrat';
    src: url('../montserrat/Montserrat-SemiBold.otf') format('opentype');
    font-style: normal;
    font-weight: 600;
    font-display: block;
}

@font-face {
    font-family: 'NgiwaMontserrat';
    src: url('../montserrat/Montserrat-Bold.otf') format('opentype');
    font-style: normal;
    font-weight: 700;
    font-display: block;
}

@font-face {
    font-family: 'NgiwaMontserrat';
    src: url('../montserrat/Montserrat-ExtraBold.otf') format('opentype');
    font-style: normal;
    font-weight: 800;
    font-display: block;
}

@font-face {
    font-family: 'NgiwaMontserratAlt';
    src: url('../montserrat/MontserratAlternates-ExtraBold.otf') format('opentype');
    font-style: normal;
    font-weight: 800;
    font-display: block;
}

@font-face {
    font-family: 'NgiwaMontserratAlt';
    src: url('../montserrat/MontserratAlternates-Bold.otf') format('opentype');
    font-style: normal;
    font-weight: 700;
    font-display: block;
}

.redirect-body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: #f0f3f7;
}

.redirect-message {
    margin: 0;
    color: #334155;
    font-family: 'NgiwaMontserrat', 'Segoe UI', Tahoma, sans-serif;
    font-weight: 700;
}

/* --- CONTROL SUPERIOR: LOGO SIEMPRE CENTRADO --- */
html, body {
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
}

body.pseudo-fullscreen-body {
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

#NGIWA_GAME_CONTAINER {
    max-width: 500px;
    max-height: calc(100dvh - 24px);
    font-family: 'NgiwaMontserrat', 'Segoe UI', Tahoma, sans-serif !important;
}

#NGIWA_GAME_CONTAINER.pseudo-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 3000002 !important;
}

#APP_UPDATE_BANNER {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 3000001;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.94);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
}

#APP_UPDATE_BANNER.is-visible {
    display: flex;
}

#APP_UPDATE_TEXT {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

#APP_UPDATE_ACTIONS {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#APP_UPDATE_REFRESH_BTN,
#APP_UPDATE_DISMISS_BTN {
    border: none;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

#APP_UPDATE_REFRESH_BTN {
    background: #58cc02;
    color: white;
    box-shadow: 0 4px 0 #46a302;
}

#APP_UPDATE_DISMISS_BTN {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

#FS_CONTROL_WRAPPER {
    position: absolute;
    top: calc(15px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10001;
}

.btn-fs-v96 {
    position: absolute;
    left: 20px;
    background: rgba(88, 204, 2, 0.9);
    border: 2px solid white;
    color: white;
    border-radius: 10px;
    width: 35px;
    height: 35px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.header-logo-v96 { width: 104px; pointer-events: none; }
#EXIT_GAME_BTN { position: absolute; top: calc(15px + env(safe-area-inset-top, 0px)); right: calc(15px + env(safe-area-inset-right, 0px)); width: 35px; height: 35px; background: rgba(0,0,0,0.7); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 22px; cursor: pointer; z-index: 1000001; border: 2px solid white; transition: 0.2s; }
#EXIT_GAME_BTN:hover { background: #ff4b4b; }

#GAME_AUDIO_BTN {
    border: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1cb0f6;
    color: white;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 0 #1899d6;
}

#GAME_AUDIO_BTN.is-speaking {
    background: #f59e0b;
    box-shadow: 0 4px 0 #b45309;
}

#VOICE_SELECTOR_BOX {
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 8px;
    background: #f8fafc;
}

#DICTATION_SELECTOR_BOX {
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px;
    margin: 10px 0 8px 0;
    background: #f8fafc;
}

#VOICE_SELECTOR_TITLE {
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
}

#DICTATION_SELECTOR_TITLE {
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
}

.voice-select-row {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.voice-opt-btn {
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 800;
    cursor: pointer;
    background: #cbd5e1;
    color: #334155;
}

.voice-opt-btn.active {
    background: #1cb0f6;
    color: #ffffff;
}

.voice-mic-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 800;
    cursor: pointer;
    background: #58cc02;
    color: #ffffff;
    margin-top: 10px;
    box-shadow: 0 4px 0 #46a302;
}

#VOICE_SELECTOR_STATUS {
    display: block;
    margin-top: 8px;
    color: #475569;
    min-height: 18px;
}

#VOICE_DICTATION_SELECTOR_STATUS {
    display: block;
    margin-top: 8px;
    color: #475569;
    min-height: 18px;
}

.screen-v96 { display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0; flex-direction: column; }

#START_OVERLAY { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 2000000; display: flex; flex-direction: column; align-items: center; justify-content: center; }

#BTN_START_TEXT {
    margin-top: 24px;
    background: #58cc02;
    color: white;
    border: none;
    padding: 18px 34px;
    border-radius: 22px;
    font-weight: 900;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 6px 0 #46a302;
}
#PURPOSE_SC { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; z-index: 500000; display: none; flex-direction: column; align-items: center; padding: calc(100px + env(safe-area-inset-top, 0px)) 30px calc(30px + env(safe-area-inset-bottom, 0px)) 30px; box-sizing: border-box; text-align: center; overflow-y: auto; }
.purpose-box { background: #f1f5f9; padding: 20px; border-radius: 25px; border: 2px solid #e2e8f0; margin-bottom: 20px; }
.quote-text { font-style: italic; color: #475569; margin: 15px 0; border-left: 4px solid #58cc02; padding-left: 10px; text-align: left; }

#MAP_VIEW_V96 { background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1BOZAsuzaW1wTz53JFSkQRsXQLxFflvAi25NPKl5h9_b4cFat3Ok16F9rFHMGoOggokPXm4RP_c5KagN2HHERLYNlgKMJVBJBqbPLufFWHmv43utaPqXbtlGbmSgv5SDKh7S-DUcPICykpq-JB3gLI2C7a98lfE4TsrbcH-jLa0Vrw5EtY6wzueEoLHx0/w640-h348/Gemini_Generated_Image_b6dal5b6dal5b6da.png'); background-size: cover; background-position: center bottom; z-index: 50; }
#MAP_LEFT_RAIL { display: none; }
#MAP_STAGE_HEADER { position: absolute; left: 12px; right: 12px; top: calc(126px + env(safe-area-inset-top, 0px)); z-index: 9200; background: rgba(88, 204, 2, 0.95); border-radius: 16px; padding: 10px 12px; color: #ffffff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); }
#MAP_STAGE_LABEL { font-size: 11px; font-weight: 900; letter-spacing: 0.3px; opacity: 0.9; text-transform: uppercase; }
#MAP_STAGE_TITLE { font-size: 23px; font-weight: 900; margin-top: 2px; margin-right: 74px; }
#MAP_GUIDE_BTN { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; border-radius: 12px; padding: 8px 10px; font-size: 11px; font-weight: 900; color: #2f5b00; background: #d9f99d; cursor: pointer; box-shadow: 0 3px 0 #84cc16; }
.map-scroll-container { width: 100%; height: 100%; overflow-y: scroll; position: absolute; background: rgba(0, 0, 0, 0.4); scroll-behavior: smooth; scrollbar-width: none; }
.map-scroll-container::-webkit-scrollbar { display: none; }
.map-path-v96 { padding: 198px 0 100px 0; display: flex; flex-direction: column-reverse; align-items: center; min-height: 12000px; position: relative; }
#MAP_RESOURCE_BAR {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(66px + env(safe-area-inset-top, 0px));
    z-index: 9250;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.map-resource-pill {
    border: 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 8px;
    border-radius: 16px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0,0,0,0.24);
}

.map-resource-pill.streak { background: rgba(234, 88, 12, 0.95); }
.map-resource-pill.gems { background: rgba(37, 99, 235, 0.95); }
.map-resource-pill.energy { background: rgba(236, 72, 153, 0.95); }
.map-resource-pill.energy.is-low { animation: energyPulseV96 1.1s ease-in-out infinite; }

.map-resource-icon {
    font-size: 18px;
    line-height: 1;
}

.map-resource-icon-img {
    width: 18px;
    height: 18px;
    margin-right: 0;
    vertical-align: middle;
}

@keyframes energyPulseV96 {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}
#MAP_INFO_PANEL {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 88px;
    z-index: 9300;
}

.map-panel-v96 {
    display: none;
    border-radius: 16px;
    padding: 11px 12px;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    backdrop-filter: blur(8px);
}

.map-panel-head-v96 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.map-panel-toggle-v96 {
    border: 1px solid rgba(255,255,255,0.55);
    background: rgba(15,23,42,0.28);
    color: #ffffff;
    border-radius: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    line-height: 22px;
    font-weight: 900;
    cursor: pointer;
}

.map-panel-v96.is-collapsed {
    padding-top: 9px;
    padding-bottom: 9px;
}

.map-panel-v96.is-collapsed .map-panel-value,
.map-panel-v96.is-collapsed .map-panel-meta {
    display: none;
}

.map-panel-v96.active {
    display: block;
}

.map-invite-alert-btn-v96 {
    margin-top: 8px;
    width: 100%;
    border: 1px solid rgba(250,204,21,0.7);
    border-radius: 12px;
    padding: 9px 10px;
    background: rgba(250,204,21,0.2);
    color: #fef3c7;
    font-size: 12px;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
}

#MAP_PANEL_STREAK { background: rgba(234, 88, 12, 0.88); }
#MAP_PANEL_CHALLENGE { background: rgba(14, 116, 144, 0.88); }
#MAP_PANEL_PLAYER { background: rgba(30, 64, 175, 0.88); }

.map-panel-title {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.9;
}

.map-panel-value {
    font-size: 16px;
    font-weight: 900;
    margin-top: 4px;
}

.map-panel-meta {
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.95;
    line-height: 1.3;
}

#MAP_BOTTOM_BAR {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 9350;
    display: grid;
    grid-template-columns: 52px repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}

.map-tab-btn {
    border: 0;
    border-radius: 12px;
    padding: 10px 8px;
    font-weight: 900;
    font-size: 12px;
    cursor: pointer;
    color: #e2e8f0;
    background: rgba(255,255,255,0.1);
}

.map-tab-btn.active {
    background: #58cc02;
    color: #ffffff;
    box-shadow: 0 4px 0 #46a302;
}

.map-home-btn {
    padding: 8px;
    background: #1cb0f6;
    color: #ffffff;
    box-shadow: 0 4px 0 #1899d6;
}

.map-home-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.racha-icon-inline-v96 {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: -3px;
    margin-right: 4px;
}

.racha-icon-fill-v96 {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.map-icon-only-btn-v96 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

#MAP_TAB_STREAK.map-icon-only-btn-v96 {
    font-size: 0;
}

#MAP_LEFT_RAIL .map-icon-only-btn-v96 {
    min-height: 52px;
}

#MAP_LEFT_RAIL .map-icon-only-btn-v96 .racha-icon-fill-v96 {
    width: 34px;
    height: 34px;
}

#MAP_BOTTOM_BAR .map-icon-only-btn-v96 .racha-icon-fill-v96 {
    width: 26px;
    height: 26px;
}

.racha-animated-word-v96 {
    display: inline-block;
    color: #facc15;
    letter-spacing: 1.4px;
    animation: rachaPulseV96 1.2s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.45);
}

@keyframes rachaPulseV96 {
    0% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 0.9; }
}

.streak-card-v96 {
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 16px;
    padding: 14px;
    color: #e2e8f0;
}

.streak-card-v96.highlight {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.28), rgba(245, 158, 11, 0.22));
    border-color: rgba(251,191,36,0.55);
}

.streak-label-v96 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 900;
    opacity: 0.9;
}

.streak-value-v96 {
    margin-top: 6px;
    font-size: 24px;
    font-weight: 900;
    color: #f8fafc;
}

.streak-meta-v96 {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
    color: #cbd5e1;
}

.streak-week-v96 {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.streak-day-v96 {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(30, 41, 59, 0.85);
    color: #94a3b8;
    text-align: center;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 800;
}

.streak-day-v96.done {
    background: rgba(34,197,94,0.22);
    border-color: rgba(34,197,94,0.6);
    color: #bbf7d0;
}

.streak-month-label-v96 {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 800;
    color: #e2e8f0;
}

.streak-month-grid-v96 {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.streak-month-cell-v96 {
    min-height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,0.35);
    background: rgba(30, 41, 59, 0.72);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.streak-month-cell-v96.head {
    min-height: 24px;
    border: 0;
    background: transparent;
    font-size: 10px;
    color: #cbd5e1;
}

.streak-month-cell-v96.done {
    background: rgba(34,197,94,0.18);
    border-color: rgba(34,197,94,0.5);
    color: #dcfce7;
}

.streak-month-cell-v96.start {
    background: rgba(250,204,21,0.22);
    border-color: rgba(250,204,21,0.7);
    color: #fef08a;
}

.streak-month-cell-v96.muted {
    opacity: 0.35;
}

.streak-months-track-v96 {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.streak-month-pill-v96 {
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(59,130,246,0.45);
    background: rgba(30,64,175,0.22);
    color: #bfdbfe;
    font-size: 11px;
    font-weight: 700;
}

.streak-invite-row-v96 {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.streak-invite-input-v96 {
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,0.45);
    background: rgba(15,23,42,0.9);
    color: #f8fafc;
    padding: 10px;
    font-size: 13px;
}

.streak-invite-input-v96::placeholder {
    color: #94a3b8;
}

.streak-invite-btn-v96 {
    border: 0;
    border-radius: 10px;
    padding: 0 12px;
    font-weight: 900;
    font-size: 12px;
    color: #082f49;
    background: #38bdf8;
    cursor: pointer;
}

.streak-podium-section-v96 {
    margin-top: 10px;
}

.streak-podium-label-v96,
.streak-podium-rest-label-v96 {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #cbd5e1;
}

.streak-podium-rest-label-v96 {
    margin-top: 10px;
}

.streak-podium-container-v96 {
    --color-oro: #f1c40f;
    --color-plata: #bdc3c7;
    --color-bronce: #e67e22;
    --color-texto-nombre: #2c3e50;
    --rank-1-bottom: 150px;
    --rank-2-bottom: 112px;
    --rank-3-bottom: 98px;
    --rank-2-side: 7%;
    --rank-3-side: 7%;
    position: relative;
    width: 100%;
    max-width: 460px;
    height: 336px;
    margin: 10px auto 0;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(15,23,42,0.25), rgba(15,23,42,0.45)), url('../ICONOS%20EJERCICIOS/RACHA/PODIO%20RACHA.png') no-repeat center bottom;
    background-size: contain;
    overflow: hidden;
}

.streak-podium-empty-v96 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #cbd5e1;
    font-size: 12px;
    padding: 16px;
    box-sizing: border-box;
}

.streak-podium-entry-v96 {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
    animation: podiumFloatV96 2.8s ease-in-out infinite;
}

.streak-podium-entry-v96:hover {
    transform: scale(1.08) translateY(-8px);
}

.streak-podium-entry-v96.rank-1-v96:hover {
    transform: translateX(-50%) scale(1.08) translateY(-8px);
}

.streak-podium-avatar-v96 {
    width: auto;
    display: block;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.35));
}

.streak-podium-charwrap-v96 {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 6px;
}

.streak-podium-champion-v96,
.profile-league-champion-v96 {
    margin-bottom: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.82);
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.streak-podium-entry-v96.rank-1-v96 .streak-podium-avatar-v96 {
    max-height: 126px;
}

.streak-podium-entry-v96.rank-2-v96 .streak-podium-avatar-v96,
.streak-podium-entry-v96.rank-3-v96 .streak-podium-avatar-v96 {
    max-height: 102px;
}

.streak-podium-namebox-v96 {
    width: 132px;
    padding: 7px 10px;
    border-radius: 12px;
    border: 2px solid rgba(203, 213, 225, 0.75);
    background: rgba(255, 255, 255, 0.94);
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.streak-podium-name-v96 {
    min-width: 0;
    max-width: 100%;
    text-align: center;
    font-weight: 900;
    font-size: 12px;
    color: var(--color-texto-nombre);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.streak-podium-score-v96 {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 800;
    color: #4b5563;
}

.rank-1-v96 {
    bottom: var(--rank-1-bottom);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.rank-2-v96 {
    bottom: var(--rank-2-bottom);
    left: var(--rank-2-side);
    z-index: 2;
    animation-delay: 0.15s;
}

.rank-3-v96 {
    bottom: var(--rank-3-bottom);
    right: var(--rank-3-side);
    z-index: 1;
    animation-delay: 0.3s;
}

.rank-1-v96 .streak-podium-namebox-v96 {
    border-color: rgba(241, 196, 15, 0.85);
}

.rank-2-v96 .streak-podium-namebox-v96,
.rank-3-v96 .streak-podium-namebox-v96 {
    width: 116px;
}

.rank-2-v96 .streak-podium-namebox-v96 {
    border-color: rgba(189, 195, 199, 0.85);
}

.rank-3-v96 .streak-podium-namebox-v96 {
    border-color: rgba(230, 126, 34, 0.9);
}

@keyframes podiumFloatV96 {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

.streak-friends-list-v96 {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.streak-top10-list-v96 {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.streak-top10-row-v96 {
    border: 1px solid rgba(148,163,184,0.28);
    border-radius: 10px;
    background: rgba(15,23,42,0.7);
    padding: 7px 8px;
    font-size: 11px;
    color: #cbd5e1;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.streak-friend-row-v96 {
    border: 1px solid rgba(148,163,184,0.3);
    border-radius: 12px;
    padding: 8px;
    background: rgba(15,23,42,0.75);
}

.streak-friend-top-v96 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.streak-friend-chip-v96 {
    border-radius: 999px;
    border: 1px solid rgba(34,197,94,0.5);
    background: rgba(22,163,74,0.18);
    color: #dcfce7;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 700;
}

.streak-friend-role-v96 {
    font-size: 11px;
    color: #93c5fd;
    font-weight: 700;
}

.streak-friend-status-v96 {
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.5);
    color: #cbd5e1;
    background: rgba(71,85,105,0.3);
}

.streak-friend-status-v96.accepted {
    border-color: rgba(34,197,94,0.6);
    color: #bbf7d0;
    background: rgba(34,197,94,0.15);
}

.streak-friend-status-v96.rejected {
    border-color: rgba(239,68,68,0.65);
    color: #fecaca;
    background: rgba(239,68,68,0.14);
}

.streak-friend-status-v96.pending {
    border-color: rgba(250,204,21,0.7);
    color: #fde68a;
    background: rgba(250,204,21,0.15);
}

.streak-friend-code-v96 {
    margin-top: 6px;
    font-size: 11px;
    color: #cbd5e1;
}

.streak-friend-actions-v96 {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.streak-action-btn-v96 {
    border: 0;
    border-radius: 9px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.streak-action-btn-v96.accept {
    background: #22c55e;
    color: #052e16;
}

.streak-action-btn-v96.reject {
    background: #ef4444;
    color: #fef2f2;
}

.streak-action-btn-v96.delete {
    background: #334155;
    color: #e2e8f0;
}

/* --- PROFILE SCREEN STYLES --- */
#PROFILE_SC_V96 {
    background: #071a2b;
    z-index: 26000;
    display: none;
}

.profile-card-v96 {
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 16px;
    padding: 14px;
    color: #e2e8f0;
}

.profile-card-v96.highlight {
    background: linear-gradient(135deg, rgba(30,144,255,0.22), rgba(99,102,241,0.18));
    border-color: rgba(99,102,241,0.5);
}

.profile-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 900;
    color: #cbd5e1;
    opacity: 0.9;
}

.profile-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
}

.profile-stat-row:last-child {
    margin-bottom: 0;
}

.profile-stat-item {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.profile-stat-icon {
    font-size: 24px;
    margin-bottom: 6px;
}

.profile-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 4px;
    font-weight: 800;
}

.profile-stat-value {
    font-size: 18px;
    font-weight: 900;
    color: #f8fafc;
}

.profile-economy-tabs {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.profile-economy-tab {
    flex: 1;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(30, 41, 59, 0.7);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.profile-avatar-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 10px;
}

.profile-avatar-btn {
    border: 1px solid rgba(56, 189, 248, 0.48);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(2, 132, 199, 0.24);
    color: #e0f2fe;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.profile-avatar-btn.ghost {
    border-color: rgba(148, 163, 184, 0.4);
    background: rgba(30, 41, 59, 0.55);
    color: #cbd5e1;
}

.profile-economy-tab.active {
    border-color: rgba(56, 189, 248, 0.75);
    background: rgba(2, 132, 199, 0.24);
    color: #f0f9ff;
}

.profile-economy-panel {
    display: none;
    margin-top: 10px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    padding: 10px;
    background: rgba(15, 23, 42, 0.6);
}

.profile-economy-panel.active {
    display: block;
}

.profile-settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.profile-settings-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-settings-field label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #cbd5e1;
    font-weight: 800;
}

.profile-settings-field input {
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 10px;
    padding: 9px 10px;
    background: rgba(15, 23, 42, 0.75);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    outline: none;
}

.profile-settings-field input:focus {
    border-color: rgba(56, 189, 248, 0.65);
}

.profile-settings-field input[readonly] {
    color: #94a3b8;
}

.profile-device-chip {
    border: 1px solid rgba(34, 197, 94, 0.55);
    background: rgba(22, 163, 74, 0.18);
    color: #bbf7d0;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 800;
    align-self: flex-start;
}

.profile-device-chip.is-warn {
    border-color: rgba(245, 158, 11, 0.58);
    background: rgba(146, 64, 14, 0.28);
    color: #fde68a;
}

.profile-device-chip.is-danger {
    border-color: rgba(239, 68, 68, 0.58);
    background: rgba(127, 29, 29, 0.35);
    color: #fecaca;
}

.profile-settings-actions {
    margin-top: 8px;
}

.profile-settings-save {
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    background: #38bdf8;
    color: #082f49;
    box-shadow: 0 4px 0 #0ea5e9;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.profile-settings-title {
    margin-top: 12px;
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.profile-update-check-box {
    margin-top: 8px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.55);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-update-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.profile-update-label {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
}

.profile-update-status {
    font-size: 12px;
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
    display: none;
}

.profile-update-status:not(:empty) {
    display: block;
}

.profile-update-checking {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

.profile-update-available {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
    font-weight: 700;
}

.profile-update-ok {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.profile-update-error {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.profile-update-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.profile-update-actions .profile-settings-save {
    flex: 1;
    min-width: 120px;
}

.profile-sessions-list {
    margin-top: 8px;
    display: grid;
    gap: 8px;
    max-height: 170px;
    overflow-y: auto;
    padding-right: 2px;
}

.profile-session-item {
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.62);
    padding: 8px 9px;
}

.profile-session-item.current {
    border-color: rgba(34, 197, 94, 0.55);
    background: rgba(22, 163, 74, 0.22);
}

.profile-session-title {
    color: #f8fafc;
    font-size: 12px;
    font-weight: 900;
}

.profile-session-meta {
    margin-top: 3px;
    color: #cbd5e1;
    font-size: 11px;
    line-height: 1.35;
}

.profile-session-action {
    margin-top: 7px;
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: 8px;
    background: rgba(2, 132, 199, 0.18);
    color: #e0f2fe;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 8px;
    cursor: pointer;
}

.profile-session-action.warn {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(127, 29, 29, 0.35);
    color: #fecaca;
}

.profile-economy-row {
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 6px;
}

.profile-economy-row:last-child {
    margin-bottom: 0;
}

.profile-redeem-btn {
    margin-top: 6px;
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    background: #22c55e;
    color: #052e16;
    box-shadow: 0 4px 0 #16a34a;
}

.profile-redeem-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
}

.profile-redeem-option {
    width: 100%;
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: 10px;
    padding: 10px;
    background: rgba(2, 132, 199, 0.15);
    color: #e0f2fe;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.profile-redeem-option strong {
    color: #f8fafc;
}

.profile-redeem-option.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(30, 41, 59, 0.45);
}

.profile-redeem-status {
    min-height: 16px;
    margin-top: 8px;
    color: #93c5fd;
    font-size: 11px;
    font-weight: 700;
}

.profile-achievement-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(34,197,94,0.4);
    border-radius: 12px;
    color: #f8fafc;
}

.profile-achievement-badge.locked {
    border-color: rgba(255,255,255,0.12);
    opacity: 0.6;
}

.profile-league-podium-v96 {
    --league-r1-bottom: 104px;
    --league-r1-side: 31%;
    --league-r2-bottom: 5px;
    --league-r3-bottom: 54px;
    --league-r2-side: 23%;
    --league-r3-side: 19%;
    position: relative;
    width: 99%;
    max-width: 429px;
    height: 320px;
    margin: 10px auto 0;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(15,23,42,0.22), rgba(15,23,42,0.44)), url('../ICONOS%20EJERCICIOS/RACHA/PODIO%20RACHA.png') no-repeat center bottom;
    background-size: contain;
    overflow: hidden;
}

.profile-league-empty-v96 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #cbd5e1;
    font-size: 12px;
    padding: 10px;
    box-sizing: border-box;
}

.profile-league-entry-v96 {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: podiumFloatV96 2.8s ease-in-out infinite;
}

.profile-league-entry-v96.rank-1-v96 {
    bottom: var(--league-r1-bottom);
    left: var(--league-r1-side);
    transform: translateX(-50%);
    width: 142px;
    z-index: 3;
}

.profile-league-entry-v96.rank-2-v96 {
    bottom: var(--league-r2-bottom);
    left: var(--league-r2-side);
    width: 112px;
    z-index: 2;
    animation-delay: 0.15s;
}

.profile-league-entry-v96.rank-3-v96 {
    bottom: var(--league-r3-bottom);
    right: var(--league-r3-side);
    width: 112px;
    z-index: 1;
    animation-delay: 0.3s;
}

.profile-league-charwrap-v96 {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 6px;
}

.profile-league-avatar-v96 {
    width: auto;
    display: block;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.32));
}

.profile-league-entry-v96.rank-1-v96 .profile-league-avatar-v96 {
    max-height: 116px;
}

.profile-league-entry-v96.rank-2-v96 .profile-league-avatar-v96,
.profile-league-entry-v96.rank-3-v96 .profile-league-avatar-v96 {
    max-height: 92px;
}

.profile-league-namebox-v96 {
    width: 132px;
    padding: 7px 10px;
    border-radius: 12px;
    border: 2px solid rgba(203, 213, 225, 0.75);
    background: rgba(255, 255, 255, 0.94);
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.profile-league-name-v96 {
    min-width: 0;
    max-width: 100%;
    text-align: center;
    font-weight: 900;
    font-size: 12px;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-league-score-v96 {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 800;
    color: #4b5563;
}

.profile-league-entry-v96.rank-1-v96 .profile-league-namebox-v96 {
    border-color: rgba(241, 196, 15, 0.85);
}

.profile-league-entry-v96.rank-2-v96 .profile-league-namebox-v96,
.profile-league-entry-v96.rank-3-v96 .profile-league-namebox-v96 {
    width: 108px;
}

.profile-league-entry-v96.rank-2-v96 .profile-league-namebox-v96 {
    border-color: rgba(189, 195, 199, 0.85);
}

.profile-league-entry-v96.rank-3-v96 .profile-league-namebox-v96 {
    border-color: rgba(230, 126, 34, 0.9);
}

.profile-league-list-v96 {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-league-top10-title-v96 {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #cbd5e1;
    margin-bottom: 2px;
}

.profile-league-row-v96 {
    border: 1px solid rgba(148,163,184,0.28);
    border-radius: 10px;
    background: rgba(15,23,42,0.7);
    padding: 7px 8px;
    font-size: 11px;
    color: #cbd5e1;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    opacity: 0;
    transform: translateY(10px);
    animation: leagueRowRevealV96 0.42s ease forwards;
}

.profile-league-row-v96.me {
    border-color: rgba(56,189,248,0.7);
    color: #e0f2fe;
    background: rgba(14,116,144,0.3);
}

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

.node-btn-v96 { width: 66px; height: 66px; background: #2d3748; border: 4px solid #1a202c; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #718096; font-weight: 900; font-size: 22px; margin: 35px 0; position: relative; z-index: 70; box-shadow: 0 5px 0 #111; cursor: default; transition: 0.3s; }
.node-active-v96 { background: #58cc02 !important; border-color: white !important; color: white !important; box-shadow: 0 0 20px rgba(88, 204, 2, 0.6), 0 5px 0 #46a302 !important; cursor: pointer !important; }
.node-active-v96:active { transform: translateY(3px); box-shadow: 0 2px 0 #46a302 !important; }
.node-mission-v96 { background: #ffc800 !important; border-color: #ffffff !important; color: #333 !important; border-radius: 18px !important; width: 85px !important; height: 65px !important; transform: scale(1.1); box-shadow: 0 6px 0 #d9a000 !important; }
.mission-tag { position: absolute; top: -25px; background: #ff4b4b; color: white; font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 900; }

@media (max-width: 420px) {
    #MAP_INFO_PANEL {
        bottom: 86px;
    }

    .map-panel-value {
        font-size: 15px;
    }

    .map-tab-btn {
        font-size: 11px;
        padding: 9px 6px;
    }

    .streak-value-v96 {
        font-size: 22px;
    }

    .streak-week-v96 {
        gap: 6px;
    }

    .streak-month-grid-v96 {
        gap: 4px;
    }

    .streak-podium-container-v96 {
        --rank-1-bottom: 132px;
        --rank-2-bottom: 98px;
        --rank-3-bottom: 86px;
        --rank-2-side: 2%;
        --rank-3-side: 2%;
        height: 296px;
    }

    .streak-podium-entry-v96.rank-1-v96 .streak-podium-avatar-v96 {
        max-height: 110px;
    }

    .streak-podium-entry-v96.rank-2-v96 .streak-podium-avatar-v96,
    .streak-podium-entry-v96.rank-3-v96 .streak-podium-avatar-v96 {
        max-height: 88px;
    }

    .streak-podium-namebox-v96 {
        width: 120px;
        padding: 6px 8px;
    }

    .rank-2-v96 .streak-podium-namebox-v96,
    .rank-3-v96 .streak-podium-namebox-v96 {
        width: 98px;
    }

    .streak-podium-name-v96 {
        font-size: 12px;
    }

    .streak-podium-score-v96 {
        font-size: 10px;
    }

    .profile-league-podium-v96 {
        --league-r1-bottom: 126px;
        --league-r2-bottom: 88px;
        --league-r3-bottom: 74px;
        --league-r2-side: 1%;
        --league-r3-side: 1%;
        height: 286px;
    }

    .profile-league-entry-v96.rank-1-v96 .profile-league-avatar-v96 {
        max-height: 102px;
    }

    .profile-league-entry-v96.rank-2-v96 .profile-league-avatar-v96,
    .profile-league-entry-v96.rank-3-v96 .profile-league-avatar-v96 {
        max-height: 82px;
    }

    .profile-league-namebox-v96 {
        width: 120px;
        padding: 6px 8px;
    }

    .profile-league-entry-v96.rank-2-v96 .profile-league-namebox-v96,
    .profile-league-entry-v96.rank-3-v96 .profile-league-namebox-v96 {
        width: 96px;
    }

    .profile-league-name-v96 {
        font-size: 10px;
    }

    .profile-league-score-v96 {
        font-size: 10px;
    }

    #MAP_BOTTOM_BAR {
        grid-template-columns: 48px repeat(3, minmax(0, 1fr));
    }
}

.node-audio-btn {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid white;
    background: #1cb0f6;
    color: white;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 0 #1899d6;
    z-index: 90;
}

#MENTOR_SPEECH_MAP {
    --mentor-accent: #58cc02;
    --mentor-grad-start: #ffffff;
    --mentor-grad-end: #ecfeff;
    position: absolute;
    bottom: 210px;
    right: 30px;
    background: linear-gradient(135deg, var(--mentor-grad-start), var(--mentor-grad-end));
    padding: 12px;
    border-radius: 18px;
    border: 3px solid var(--mentor-accent);
    width: 230px;
    z-index: 11000;
    display: none;
    box-shadow: 0 10px 24px rgba(0,0,0,0.22);
    pointer-events: auto;
}

#MENTOR_SPEECH_MAP::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 40px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid var(--mentor-accent);
}

#MENTOR_SPEECH_MAP.mentor-theme-sunrise {
    --mentor-accent: #f97316;
    --mentor-grad-start: #fff7ed;
    --mentor-grad-end: #ffedd5;
}

#MENTOR_SPEECH_MAP.mentor-theme-jungle {
    --mentor-accent: #16a34a;
    --mentor-grad-start: #f0fdf4;
    --mentor-grad-end: #dcfce7;
}

#MENTOR_SPEECH_MAP.mentor-theme-ocean {
    --mentor-accent: #2563eb;
    --mentor-grad-start: #eff6ff;
    --mentor-grad-end: #dbeafe;
}

.mentor-speech-head-v96 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 8px;
}

.mentor-speech-actions-v96 {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mentor-speech-actions-v96 button {
    border: 1px solid rgba(15, 23, 42, 0.22);
    background: #ffffff;
    color: #0f172a;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    padding: 0;
    cursor: pointer;
    line-height: 22px;
    font-weight: 900;
}

.mentor-speech-body-v96 {
    color: #0f172a;
    font-weight: 800;
    font-size: 13px;
    line-height: 1.32;
}

#MENTOR_SPEECH_MAP.is-minimized .mentor-speech-body-v96 {
    display: none;
}

#MENTOR_SPEECH_MAP.is-minimized .mentor-speech-head-v96 {
    margin-bottom: 0;
}

.ui-footer-v96 { background: white; border-top: 4px solid #f1f5f9; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); min-height: 185px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; z-index: 2000; }
.chat-box-v96 { background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 20px; padding: 12px; width: 95%; text-align: center; min-height: 80px; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #334155; }

.option-card { border: 2px solid #e5e5e5; border-radius: 15px; padding: 20px 10px; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 0 #e5e5e5; background: white; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 60px; }
.option-selected { border-color: #1cb0f6 !important; background: #ddf4ff !important; box-shadow: 0 4px 0 #1899d6 !important; }
#PROGRESS_BAR { width:0%; height:100%; background:#58cc02; transition:0.4s; }

#GAME_SC_V96 {
    display: none;
    flex-direction: column;
    overflow: hidden;
}

#GAME_HEADER_V96,
#GAME_ACTIONS_V96 {
    flex-shrink: 0;
}

#GAME_ECONOMY_HEADER {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#GAME_HEADER_PROGRESS_ROW {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.game-economy-pill {
    border: 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 14px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.game-economy-pill.gems { background: rgba(37, 99, 235, 0.95); }
.game-economy-pill.energy { background: rgba(236, 72, 153, 0.95); }
.game-economy-pill.energy.is-low { animation: energyPulseV96 1.1s ease-in-out infinite; }

.game-economy-icon {
    font-size: 16px;
    line-height: 1;
}

#GAME_CONTENT_V96 {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
}

#GAME_QUESTION_CARD {
    width: min(100%, 420px);
    box-sizing: border-box;
}

#GAME_STATUS_ROW {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0 20px 10px;
    font-size: 12px;
    font-weight: 900;
    color: #334155;
}

#GAME_ENERGY_LEFT {
    border-radius: 999px;
    padding: 5px 10px;
    background: rgba(236, 72, 153, 0.12);
    color: #9d174d;
}

#GAME_ENERGY_LEFT.is-low {
    background: rgba(239, 68, 68, 0.2);
    color: #991b1b;
}

#GAME_READING_CARD {
    display: none;
    width: min(100%, 420px);
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#GAME_INSTR {
    margin-top: 0;
    line-height: 1.2;
    font-family: 'NgiwaMontserratAlt', 'NgiwaMontserrat', 'Segoe UI', Tahoma, sans-serif;
    font-weight: 800;
}

#CURRENT_NGIWA_WORD {
    display: inline-block;
    width: 100%;
    font-size: clamp(24px, 5vw, 42px) !important;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-family: 'NgiwaMontserratAlt', 'NgiwaMontserrat', 'Segoe UI', Tahoma, sans-serif;
    font-weight: 800;
    letter-spacing: 0.3px;
}

#OPTIONS_GRID {
    width: min(100%, 420px);
    box-sizing: border-box;
}

#CHECK_BTN {
    width: min(100%, 420px) !important;
    margin: 0 auto;
    display: block;
}

#GAME_MODAL { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.96); z-index: 100000; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; box-sizing: border-box; }

.level-result-copy-v96 {
    color: #64748b;
    font-size: 18px;
    line-height: 1.45;
    margin-bottom: 16px;
}

.level-result-stats-v96 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 420px);
    margin: 0 auto;
}

.level-result-stat-v96 {
    border-radius: 16px;
    border: 3px solid #e2e8f0;
    background: #ffffff;
    padding: 10px 8px;
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    animation: level-result-card-in-v96 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.level-result-stat-v96:nth-child(1) {
    animation-delay: 0.06s;
}

.level-result-stat-v96:nth-child(2) {
    animation-delay: 0.14s;
}

.level-result-stat-v96:nth-child(3) {
    animation-delay: 0.22s;
}

.level-result-stat-v96.xp {
    border-color: #facc15;
}

.level-result-stat-v96.accuracy {
    border-color: #58cc02;
}

.level-result-stat-v96.time {
    border-color: #1cb0f6;
}

.level-result-stat-label-v96 {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #64748b;
}

.level-result-stat-value-v96 {
    margin-top: 6px;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}

.level-result-stat-v96.xp .level-result-stat-value-v96 {
    color: #ca8a04;
}

.level-result-stat-v96.accuracy .level-result-stat-value-v96 {
    color: #3f9b00;
}

.level-result-stat-v96.time .level-result-stat-value-v96 {
    color: #0284c7;
}

@keyframes level-result-card-in-v96 {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
#IN_GAME_DIALOG {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000001;
    background: rgba(15, 23, 42, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

#IN_GAME_DIALOG_CARD {
    width: min(100%, 400px);
    background: #ffffff;
    border-radius: 18px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.35);
    padding: 18px;
    box-sizing: border-box;
}

#IN_GAME_DIALOG_TITLE {
    margin: 0 0 8px 0;
    color: #0f172a;
    font-size: 20px;
}

#IN_GAME_DIALOG_MESSAGE {
    margin: 0;
    color: #334155;
    line-height: 1.45;
    font-weight: 600;
}

#IN_GAME_DIALOG_ACTIONS {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#IN_GAME_DIALOG_CANCEL,
#IN_GAME_DIALOG_CONFIRM {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 800;
    cursor: pointer;
}

#IN_GAME_DIALOG_CANCEL {
    background: #e2e8f0;
    color: #334155;
}

#IN_GAME_DIALOG_CONFIRM.primary {
    background: #58cc02;
    color: #ffffff;
}

.streak-pending-btn-v96 {
    margin-top: 8px;
    border: 1px solid rgba(250,204,21,0.7);
    border-radius: 10px;
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    background: rgba(250,204,21,0.18);
    color: #fde68a;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

#IN_GAME_DIALOG_CONFIRM.danger {
    background: #ef4444;
    color: #ffffff;
}

#TRANSITION_LAYER { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.active-transition { opacity: 1 !important; pointer-events: all !important; }

#TRANSLATE_EXERCISE {
    margin-top: 4px;
}

#FREE_WRITE_EXERCISE,
#MATCHING_EXERCISE,
#LISTEN_SELECT_EXERCISE {
    margin-top: 6px;
    width: min(100%, 420px);
}

#FREE_WRITE_INPUT {
    width: 100%;
    border: 2px solid #cbd5e1;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    background: #ffffff;
    font-family: 'NgiwaMontserrat', 'Segoe UI', Tahoma, sans-serif;
}

#FREE_WRITE_TEXTAREA {
    display: none;
    width: 100%;
    min-height: 132px;
    border: 2px solid #cbd5e1;
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    color: #0f172a;
    background: #ffffff;
    resize: vertical;
    box-sizing: border-box;
    font-family: 'NgiwaMontserrat', 'Segoe UI', Tahoma, sans-serif;
}

#FREE_WRITE_HINT,
#MATCHING_PROMPT,
#LISTEN_SELECT_STATUS {
    margin-top: 8px;
    color: #475569;
    font-size: 14px;
    min-height: 20px;
}

#TRANSLATE_DESTINATION,
#TRANSLATE_ORIGIN {
    width: 100%;
    min-height: 56px;
    padding: 10px;
    border-radius: 14px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

#TRANSLATE_DESTINATION {
    border: 2px dashed #94a3b8;
    background: #f8fafc;
    margin-bottom: 10px;
}

#TRANSLATE_ORIGIN {
    border: 2px solid #e2e8f0;
    background: #ffffff;
}

.word-chip {
    border: none;
    border-radius: 10px;
    padding: 8px 10px;
    background: #1cb0f6;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
    font-family: 'NgiwaMontserrat', 'Segoe UI', Tahoma, sans-serif;
}

.word-chip.destination {
    background: #58cc02;
}

.translate-placeholder {
    color: #64748b;
    font-size: 14px;
}

#VOICE_DICTATION_EXERCISE {
    margin-top: 6px;
    width: min(100%, 420px);
}

#VOICE_DICTATE_BTN {
    border: none;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 900;
    font-size: 15px;
    cursor: pointer;
    background: #1cb0f6;
    color: #ffffff;
    box-shadow: 0 4px 0 #1899d6;
}

#VOICE_DICTATE_BTN.listening {
    background: #ef4444;
    box-shadow: 0 4px 0 #b91c1c;
}

#VOICE_DICTATION_STATUS {
    margin-top: 10px;
    color: #334155;
    font-size: 14px;
    min-height: 20px;
}

#VOICE_TRANSCRIPT_TEXT {
    margin-top: 8px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 10px;
    min-height: 44px;
    color: #0f172a;
    background: #f8fafc;
    text-align: left;
    font-weight: 700;
    word-break: break-word;
    font-family: 'NgiwaMontserrat', 'Segoe UI', Tahoma, sans-serif;
}

#MATCHING_GRID {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}

.matching-column {
    display: grid;
    gap: 10px;
}

.matching-card {
    border: 2px solid #cbd5e1;
    border-radius: 14px;
    background: #ffffff;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: 'NgiwaMontserrat', 'Segoe UI', Tahoma, sans-serif;
}

.matching-card.selected {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.matching-card.matched {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
}

.matching-word {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    text-align: left;
}

.matching-image img,
.listen-select-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    background: #f8fafc;
}

.matching-image-label,
.listen-select-label {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #334155;
    text-align: center;
}

.matching-card.matching-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    background: #f8fafc;
}

.matching-card.matching-text .matching-image-label {
    margin-top: 0;
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
}

#LISTEN_SELECT_PLAY_BTN {
    border: none;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 900;
    font-size: 15px;
    cursor: pointer;
    background: #1cb0f6;
    color: #ffffff;
    box-shadow: 0 4px 0 #1899d6;
}

.listen-select-card {
    padding: 10px;
    text-align: center;
}

#GAME_PROGRESS_TEXT,
#GAME_ENERGY_LEFT,
#GAME_READING_CARD,
#TRANSLATE_DESTINATION,
#TRANSLATE_ORIGIN,
#FREE_WRITE_INPUT,
#FREE_WRITE_TEXTAREA,
#FREE_WRITE_HINT,
#VOICE_DICTATION_STATUS,
.option-card,
#CHECK_BTN {
    font-family: 'NgiwaMontserrat', 'Segoe UI', Tahoma, sans-serif;
}

@media (max-width: 900px) {
    body {
        padding: 8px;
    }

    #NGIWA_GAME_CONTAINER {
        width: min(100%, 560px) !important;
        height: min(100dvh - 16px, 100%) !important;
    }

    #MATCHING_GRID {
        grid-template-columns: 1fr;
    }

    #PURPOSE_SC {
        padding: 88px 20px 20px 20px;
    }

    .map-path-v96 {
        padding: 130px 0 90px 0;
        min-height: 9000px;
    }
}

@media (max-width: 768px) {
    body {
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
        display: flex;
        align-items: stretch;
        justify-content: stretch;
    }

    #NGIWA_GAME_CONTAINER {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #APP_UPDATE_BANNER {
        top: calc(10px + env(safe-area-inset-top, 0px));
        left: 10px;
        right: 10px;
        padding: 12px;
    }

    .header-logo-v96 {
        width: 128px;
    }

    .btn-fs-v96,
    #EXIT_GAME_BTN {
        width: 40px;
        height: 40px;
    }

    #PURPOSE_SC {
        padding: calc(76px + env(safe-area-inset-top, 0px)) 18px 18px 18px;
    }

    .purpose-box {
        padding: 16px;
        border-radius: 18px;
    }

    .ui-footer-v96 {
        min-height: 170px;
        padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)) 14px;
    }

    .chat-box-v96 {
        width: 100%;
        min-height: 72px;
        font-size: 15px;
    }

    #FLOW_BTN_V96 {
        width: 100%;
        max-width: 320px;
        padding: 14px 20px !important;
    }

    #MENTOR_OVERLAY > div {
        gap: 12px;
        padding: 0 14px;
        box-sizing: border-box;
    }

    #MENTOR_OVERLAY img {
        max-height: 220px !important;
        max-width: 42vw;
        object-fit: contain;
    }

    #MENTOR_SPEECH_MAP {
        width: min(190px, calc(100vw - 40px));
        right: 14px;
        bottom: 190px;
        font-size: 13px;
        padding: 12px;
    }

    #HOME_MAP_BTN {
        left: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .map-path-v96 {
        padding: 130px 0 120px 0;
        min-height: 7200px;
    }

    .node-btn-v96 {
        width: 60px;
        height: 60px;
        font-size: 20px;
        margin: 28px 0;
    }

    .node-mission-v96 {
        width: 78px !important;
        height: 60px !important;
    }

    #GAME_MODAL {
        padding: 22px;
    }

    #GAME_MODAL #MODAL_TITLE {
        font-size: 26px !important;
    }

    #GAME_MODAL #MODAL_TEXT {
        font-size: 16px !important;
    }

    .level-result-copy-v96 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .level-result-stats-v96 {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .level-result-stat-v96 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
    }

    .level-result-stat-value-v96 {
        margin-top: 0;
        font-size: 26px;
    }

    #CURRENT_NGIWA_WORD {
        font-size: clamp(30px, 8vw, 42px) !important;
        word-break: break-word;
    }

    #GAME_READING_CARD {
        font-size: 14px;
        padding: 14px !important;
    }

    #OPTIONS_GRID {
        gap: 12px !important;
        padding: 0 !important;
    }

    .option-card {
        min-height: 54px;
        padding: 16px 10px;
    }

    #CHECK_BTN {
        padding: 18px !important;
        font-size: 18px !important;
    }

    #PLAYER_ADMIN_OVERLAY {
        padding: 16px;
    }

    #PLAYER_ADMIN_OVERLAY > div,
    #HOME_OPTIONS_OVERLAY {
        width: min(92vw, 560px) !important;
        box-sizing: border-box;
    }

    #START_OVERLAY img:first-child,
    #WELCOME_OVERLAY img,
    #FAREWELL_OVERLAY img {
        width: min(180px, 55vw) !important;
    }

    #GAME_CONTENT_V96 {
        justify-content: flex-start !important;
        padding-top: 8px !important;
    }

    #GAME_QUESTION_CARD {
        padding: 20px !important;
        border-radius: 22px !important;
        margin: 10px auto !important;
    }
}

@media (max-width: 480px) {
    #APP_UPDATE_BANNER {
        flex-direction: column;
        align-items: stretch;
    }

    #APP_UPDATE_ACTIONS {
        width: 100%;
    }

    #APP_UPDATE_REFRESH_BTN,
    #APP_UPDATE_DISMISS_BTN {
        width: 100%;
    }

    #LOGIN_OVERLAY,
    #START_OVERLAY,
    #WELCOME_OVERLAY,
    #FAREWELL_OVERLAY {
        padding: 18px;
        box-sizing: border-box;
    }

    #LOGIN_OVERLAY h2,
    #WELCOME_OVERLAY h2,
    #FAREWELL_OVERLAY h2 {
        font-size: 24px;
        line-height: 1.2;
    }

    #GOOGLE_LOGIN_BTN,
    #BTN_START_TEXT,
    #CHECK_BTN {
        width: 100%;
        max-width: 320px;
    }

    #BTN_START_TEXT {
        padding: 18px 20px !important;
        font-size: 18px !important;
    }

    #OPTIONS_GRID {
        grid-template-columns: 1fr !important;
    }

    #GAME_HEADER_V96 {
        padding: 16px !important;
        padding-top: calc(54px + env(safe-area-inset-top, 0px)) !important;
    }

    #GAME_ECONOMY_HEADER {
        gap: 6px;
    }

    .game-economy-pill {
        font-size: 12px;
        padding: 7px 8px;
    }

    #GAME_STATUS_ROW {
        padding: 0 14px 8px;
        font-size: 11px;
    }

    #GAME_CONTENT_V96 {
        padding: 14px !important;
        gap: 12px !important;
    }

    #GAME_ACTIONS_V96 {
        padding: 18px 14px calc(18px + env(safe-area-inset-bottom, 0px)) 14px !important;
    }

    #MENTOR_OVERLAY > div {
        flex-direction: column;
        align-items: center;
    }

    #MENTOR_OVERLAY img {
        max-height: 160px !important;
        max-width: 58vw;
    }

    #MENTOR_SPEECH_MAP {
        width: min(170px, calc(100vw - 28px));
        right: 10px;
        bottom: 162px;
        font-size: 12px;
    }

    #HOME_MAP_BTN {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    #SELECTED_MENTOR_IMG_96 {
        max-width: 145px;
    }

    #HOME_OPTIONS_OVERLAY button {
        width: 100%;
        margin: 8px 0 !important;
    }

    #GAME_QUESTION_CARD {
        width: 100% !important;
        min-width: 0 !important;
    }

    #OPTIONS_GRID {
        width: 100% !important;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    #FS_CONTROL_WRAPPER {
        top: calc(10px + env(safe-area-inset-top, 0px));
    }

    .btn-fs-v96 {
        left: 12px;
    }

    #EXIT_GAME_BTN {
        top: calc(10px + env(safe-area-inset-top, 0px));
        right: 12px;
    }

    #LOGIN_OVERLAY h2,
    #WELCOME_OVERLAY h2,
    #FAREWELL_OVERLAY h2,
    #WELCOME_TITLE,
    #MENTOR_TITLE,
    #GAME_INSTR {
        font-size: clamp(22px, 6vw, 28px) !important;
    }

    #LOGIN_OVERLAY p,
    #WELCOME_OVERLAY p,
    #FAREWELL_OVERLAY p,
    #PURPOSE_SC p,
    #TXT_P_BODY,
    #TXT_P_QUOTE {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    #GOOGLE_LOGIN_BTN {
        min-height: 48px;
        font-size: 16px;
    }

    #GOOGLE_LOGIN_STATUS {
        min-height: 36px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .offline-blocked-notice {
        margin: 8px auto 2px;
        padding: 9px 12px;
        max-width: 320px;
        border-radius: 10px;
        border: 1px solid rgba(239, 68, 68, 0.65);
        background: linear-gradient(135deg, rgba(127, 29, 29, 0.88) 0%, rgba(153, 27, 27, 0.78) 100%);
        color: #fecaca;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.3;
        text-align: center;
        box-shadow: 0 6px 18px rgba(127, 29, 29, 0.45);
        letter-spacing: 0.2px;
    }

    #START_OVERLAY,
    #WELCOME_OVERLAY,
    #FAREWELL_OVERLAY,
    #LOGIN_OVERLAY {
        justify-content: center;
        text-align: center;
    }

    #START_OVERLAY img:first-child,
    #WELCOME_OVERLAY img,
    #FAREWELL_OVERLAY img {
        margin-bottom: 16px !important;
    }

    #PURPOSE_SC {
        justify-content: flex-start;
    }

    #PURPOSE_SC button,
    #BTN_START_TEXT {
        width: 100%;
        max-width: 320px;
    }

    #INTRO_SC_V96 > div:first-child {
        align-items: flex-end !important;
        padding-top: 78px !important;
        min-height: 0;
    }

    #INTRO_SC_V96 > div:first-child img {
        max-height: 34vh !important;
        width: auto;
    }

    .ui-footer-v96 {
        min-height: 190px;
        justify-content: flex-start;
        gap: 10px;
    }

    .chat-box-v96 {
        padding: 10px;
        border-radius: 16px;
    }

    #GAME_CONTENT_V96 {
        justify-content: flex-start !important;
    }

    #GAME_INSTR {
        margin-bottom: 4px !important;
    }

    #GAME_QUESTION_CARD {
        padding: 18px !important;
        margin: 8px auto !important;
    }

    #USER_IN_V96 {
        width: 100% !important;
        margin-top: 10px;
        box-sizing: border-box;
    }

    #MAP_USER_96 {
        font-size: 14px;
        padding: 8px 14px !important;
        max-width: calc(100vw - 40px);
        word-break: break-word;
        text-align: center;
    }

    #MENTOR_OVERLAY {
        padding: 76px 12px 18px 12px;
        box-sizing: border-box;
        justify-content: flex-start !important;
    }


/* ==============================================================
   UI REFACTOR V2026 - TOKENS + LEGIBILIDAD + MICROINTERACCIONES
   ============================================================ */
:root {
    --ngiwa-color-primary: #58cc02;
    --ngiwa-color-secondary: #1cb0f6;
    --ngiwa-color-contrast: #0f172a;
    --ngiwa-color-surface: rgba(15, 23, 42, 0.74);
    --ngiwa-color-surface-soft: rgba(15, 23, 42, 0.58);
    --ngiwa-color-stroke: rgba(255, 255, 255, 0.18);
    --ngiwa-color-text-main: #f8fafc;
    --ngiwa-color-text-muted: rgba(248, 250, 252, 0.82);

    --ngiwa-radius-card: 16px;
    --ngiwa-radius-button: 24px;
    --ngiwa-radius-chip: 999px;

    --ngiwa-shadow-sm: 0 6px 14px rgba(2, 6, 23, 0.20);
    --ngiwa-shadow-md: 0 12px 26px rgba(2, 6, 23, 0.26);
    --ngiwa-shadow-lg: 0 18px 38px rgba(2, 6, 23, 0.32);

    --ngiwa-line-body: 1.45;
    --ngiwa-line-tight: 1.2;
}

body,
#NGIWA_GAME_CONTAINER,
#NGIWA_GAME_CONTAINER * {
    font-family: 'NgiwaMontserrat', 'Segoe UI', Tahoma, sans-serif !important;
}

body,
p,
small,
label,
input,
textarea,
select,
li,
#MODAL_TEXT,
#IN_GAME_DIALOG_MESSAGE,
#GAME_INSTR,
#GAME_PROGRESS_TEXT,
#PROFILE_SETTINGS_STATUS,
#PROFILE_REDEEM_STATUS {
    font-weight: 400 !important;
    line-height: var(--ngiwa-line-body) !important;
}

h1,
h2,
h3,
h4,
#MODAL_TITLE,
#PROFILE_SCREEN_TITLE_TEXT,
#STREAK_SCREEN_TITLE_TEXT,
#WELCOME_TITLE,
#MAP_STAGE_TITLE {
    font-weight: 800 !important;
    line-height: var(--ngiwa-line-tight) !important;
    letter-spacing: 0.2px;
}

button,
#CHECK_BTN,
#MODAL_BTN,
#BTN_START_TEXT,
.auth-btn,
.voice-opt-btn,
.profile-settings-save,
.profile-redeem-btn,
#APP_UPDATE_REFRESH_BTN,
#APP_UPDATE_DISMISS_BTN,
#MAP_GUIDE_BTN,
#VOICE_MIC_PERMISSION_BTN {
    font-weight: 600 !important;
    border-radius: var(--ngiwa-radius-button) !important;
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    -webkit-tap-highlight-color: transparent;
}

button:active,
#CHECK_BTN:active,
#MODAL_BTN:active,
#BTN_START_TEXT:active,
.auth-btn:active,
.voice-opt-btn:active,
.profile-settings-save:active,
.profile-redeem-btn:active,
#APP_UPDATE_REFRESH_BTN:active,
#APP_UPDATE_DISMISS_BTN:active,
#MAP_GUIDE_BTN:active,
#VOICE_MIC_PERMISSION_BTN:active {
    transform: scale(0.95) !important;
}

/* Superficies principales con glassmorphism para profundidad */
.map-panel-v96,
.streak-card-v96,
.profile-card-v96,
.profile-economy-panel,
#GAME_QUESTION_CARD,
#GAME_READING_CARD,
#IN_GAME_DIALOG_CARD,
#VOICE_SELECTOR_BOX,
#DICTATION_SELECTOR_BOX,
.chat-box-v96,
#HOME_SUPPORT_PANEL {
    border-radius: var(--ngiwa-radius-card) !important;
    border: 1px solid var(--ngiwa-color-stroke) !important;
    box-shadow: var(--ngiwa-shadow-md) !important;
    backdrop-filter: blur(12px) saturate(1.08);
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

/* Overlays y modales con más contraste para legibilidad */
#GAME_MODAL,
#LOGIN_OVERLAY,
#START_OVERLAY,
#WELCOME_OVERLAY,
#FAREWELL_OVERLAY,
#HOME_OPTIONS_OVERLAY,
#IN_GAME_DIALOG {
    background: linear-gradient(180deg, rgba(8, 15, 30, 0.72) 0%, rgba(8, 15, 30, 0.86) 100%) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#IN_GAME_DIALOG_CARD,
#GAME_MODAL > div,
#HOME_OPTIONS_OVERLAY > div,
#PLAYER_ADMIN_OVERLAY > div {
    background: var(--ngiwa-color-surface) !important;
    color: var(--ngiwa-color-text-main) !important;
}

/* Jerarquía visual: bajar peso de banners secundarios */
#APP_UPDATE_BANNER {
    background: rgba(15, 23, 42, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: var(--ngiwa-shadow-sm) !important;
    padding: 10px 12px !important;
}

#APP_UPDATE_TEXT {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ngiwa-color-text-muted) !important;
}

#MAP_INVITE_ALERT_BTN,
#STREAK_PENDING_INVITES_BTN {
    opacity: 0.88;
    font-weight: 600 !important;
    box-shadow: var(--ngiwa-shadow-sm) !important;
}

/* Coherencia de radios y elevación en piezas clave */
.option-card,
#MAP_STAGE_HEADER,
#MAP_BOTTOM_BAR,
#MAP_RESOURCE_BAR,
#MENTOR_SPEECH_MAP,
#PROFILE_REDEEM_OPTIONS,
#PROFILE_SESSIONS_LIST,
#STREAK_CALENDAR,
#STREAK_MONTH_CALENDAR,
#STREAK_FRIENDS_LIST,
#STREAK_PODIUM,
#PROFILE_LEAGUE_LIST,
#PROFILE_LEAGUE_PODIUM {
    border-radius: var(--ngiwa-radius-card) !important;
    box-shadow: var(--ngiwa-shadow-sm);
}

/* Botones primarios más consistentes */
#CHECK_BTN,
#MODAL_BTN,
#BTN_START_TEXT,
.profile-settings-save,
.profile-redeem-btn,
#APP_UPDATE_REFRESH_BTN {
    box-shadow: 0 8px 18px rgba(88, 204, 2, 0.28) !important;
}

/* Legibilidad extra en paneles oscuros */
#MAP_PANEL_STREAK,
#MAP_PANEL_CHALLENGE,
#MAP_PANEL_PLAYER,
#MENTOR_SPEECH_BODY,
#PROFILE_SETTINGS_STATUS,
#PROFILE_REDEEM_STATUS,
#STREAK_STATUS_TEXT,
#STREAK_TOP_INFO,
#MAP_PLAYER_STATS {
    color: #f8fafc !important;
}

/* Reduce movimiento para accesibilidad si usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    button,
    .option-card,
    #CHECK_BTN,
    .profile-settings-save,
    .profile-redeem-btn {
        transition: none !important;
    }
}

/* ==============================================================
   MOBILE POLISH PASS - HIT TARGETS + DENSIDAD VISUAL
   ============================================================ */
@media (max-width: 768px) {
    /* Hit-area mínimo recomendado para táctil */
    button,
    .auth-btn,
    .map-left-btn,
    .map-tab-btn,
    .profile-economy-tab,
    .profile-settings-save,
    .profile-redeem-btn,
    #CHECK_BTN,
    #GAME_AUDIO_BTN,
    #MAP_GUIDE_BTN,
    #HOME_MAP_BTN,
    #APP_UPDATE_REFRESH_BTN,
    #APP_UPDATE_DISMISS_BTN {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Más aire para lectura del contenido principal */
    #GAME_STATUS_ROW {
        margin-bottom: 6px;
    }

    #GAME_PROGRESS_TEXT,
    #GAME_ENERGY_LEFT {
        letter-spacing: 0.2px;
        font-weight: 600 !important;
    }

    #GAME_INSTR {
        font-size: clamp(18px, 4.4vw, 22px) !important;
        line-height: 1.3 !important;
    }

    /* Opciones más táctiles y separadas */
    .option-card {
        min-height: 64px !important;
        padding: 16px 12px !important;
        border-radius: 16px !important;
    }

    #OPTIONS_GRID {
        gap: 14px !important;
    }

    /* Banners y chips secundarios menos dominantes */
    #MAP_INVITE_ALERT_BTN,
    #STREAK_PENDING_INVITES_BTN {
        font-size: 12px !important;
        padding: 10px 12px !important;
        opacity: 0.82 !important;
    }

    #APP_UPDATE_BANNER {
        opacity: 0.92;
    }
}

@media (max-width: 480px) {
    /* En pantallas muy chicas, priorizar el contenido educativo */
    #APP_UPDATE_BANNER {
        padding: 8px 10px !important;
    }

    #APP_UPDATE_TEXT {
        font-size: 11px !important;
    }

    #GAME_PROGRESS_TEXT,
    #GAME_ENERGY_LEFT {
        font-size: 12px !important;
    }

    #CHECK_BTN {
        min-height: 52px !important;
        font-size: 17px !important;
    }

    .profile-economy-tab {
        font-size: 13px !important;
    }
}
    #MENTOR_OVERLAY > div {
        width: 100%;
        gap: 8px;
    }

    #MENTOR_OVERLAY p {
        margin-top: 8px;
        font-size: 17px !important;
    }

    #MENTOR_SPEECH_MAP {
        bottom: 150px;
        right: 8px;
        width: min(160px, calc(100vw - 24px));
        border-radius: 16px;
    }

    #HOME_MAP_BTN {
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        left: 10px;
        width: 44px;
        height: 44px;
    }

    #HOME_MAP_BTN svg {
        width: 24px;
        height: 24px;
    }

    #MAP_VIEW_V96 > div[style*="bottom: 15px; right: 15px;"] {
        width: 120px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .map-scroll-container {
        overscroll-behavior: contain;
    }

    .map-path-v96 {
        padding: 116px 0 104px 0;
        min-height: 6400px;
    }

    .node-btn-v96 {
        margin: 24px 0;
    }

    #GAME_SC_V96 > div:nth-child(2) {
        justify-content: flex-start !important;
        gap: 8px;
    }

    #GAME_SC_V96 > div:nth-child(2) > div {
        margin: 10px auto 14px auto !important;
        width: min(100%, 260px);
        min-width: 0 !important;
        padding: 20px 14px !important;
        box-sizing: border-box;
    }

    #OPTIONS_GRID {
        margin-top: 4px;
    }

    .option-card {
        border-radius: 14px;
        box-shadow: 0 3px 0 #e5e5e5;
    }

    #PLAYER_ADMIN_OVERLAY > div,
    #HOME_OPTIONS_OVERLAY {
        border-radius: 16px !important;
        padding: 16px !important;
    }

    #PLAYER_IMPORT_AREA {
        min-height: 90px !important;
    }
}

@media (max-height: 720px) and (orientation: landscape) {
    #NGIWA_GAME_CONTAINER {
        width: min(100vw, 980px) !important;
        max-width: 980px !important;
        height: 100dvh !important;
        border-radius: 0 !important;
    }

    .header-logo-v96 {
        width: 110px;
    }

    .ui-footer-v96 {
        min-height: 132px;
        padding-bottom: 10px;
    }

    #INTRO_SC_V96 > div:first-child img {
        max-height: 240px !important;
    }

    #MENTOR_OVERLAY img {
        max-height: 150px !important;
    }

    .map-path-v96 {
        min-height: 5600px;
    }
}

.ngiwa-secondary-text {
    display: block;
    margin-top: 6px;
    color: #0f766e;
    font-weight: 700;
}

/* --- Jerarquia tipografica --- */
h1     { font-family: 'NgiwaMontserratAlt', 'NgiwaMontserrat', sans-serif; font-weight: 800; }
h2     { font-weight: 700; }
h3     { font-weight: 600; }
th     { font-weight: 700; }
td     { font-weight: 400; }
button { font-weight: 600; }
label  { font-weight: 400; }

/* --- Twemoji inline --- */
img.emoji {
    height: 1em;
    width: 1em;
    vertical-align: -0.15em;
    display: inline-block;
    pointer-events: none;
    user-select: none;
}

#ENERGY_PANEL_OVERLAY {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(2, 12, 35, 0.62);
    z-index: 3000000;
    padding: 18px;
    box-sizing: border-box;
}

#ENERGY_PANEL_CARD {
    width: min(92vw, 430px);
    max-height: min(88dvh, 760px);
    overflow: auto;
    border-radius: 22px;
    background: #f8fafc;
    border: 2px solid #dbeafe;
    box-shadow: 0 20px 48px rgba(2, 12, 35, 0.36);
    padding: 18px 16px 16px;
    position: relative;
    color: #0f172a;
}

#ENERGY_PANEL_CLOSE {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: white;
    color: #475569;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

#ENERGY_PANEL_TITLE {
    margin: 0;
    text-align: center;
    color: #0c4a6e;
    font-size: 24px;
}

#ENERGY_PANEL_STATUS_ROW {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#ENERGY_PANEL_VALUE {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
    font-weight: 700;
    border-radius: 12px;
    padding: 8px 12px;
}

#ENERGY_PANEL_GEMS_ROW {
    color: #0369a1;
    font-weight: 700;
}

#ENERGY_AUTO_PROGRESS_WRAP {
    margin-top: 14px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: white;
    padding: 12px;
}

#ENERGY_AUTO_PROGRESS_LABEL {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
}

#ENERGY_AUTO_PROGRESS_TRACK {
    margin-top: 8px;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

#ENERGY_AUTO_PROGRESS_FILL {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f472b6, #fb7185);
    transition: width 0.35s ease;
}

#ENERGY_AUTO_TIMER {
    margin-top: 8px;
    color: #475569;
    font-size: 12px;
    line-height: 1.35;
}

#ENERGY_PANEL_ACTIONS {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

#ENERGY_QUICK_RECHARGE_BTN,
#ENERGY_AUTO_CLAIM_BTN,
#ENERGY_FREE_4H_BTN {
    border: none;
    border-radius: 12px;
    padding: 11px 12px;
    font-weight: 800;
    cursor: pointer;
}

#ENERGY_QUICK_RECHARGE_BTN {
    background: #0ea5e9;
    color: white;
}

#ENERGY_AUTO_CLAIM_BTN {
    background: #10b981;
    color: white;
}

#ENERGY_FREE_4H_BTN {
    background: #f97316;
    color: white;
}

#ENERGY_AUTO_CLAIM_BTN[disabled] {
    background: #94a3b8;
    cursor: not-allowed;
}

#ENERGY_FREE_4H_BTN[disabled] {
    background: #94a3b8;
    cursor: not-allowed;
}

#ENERGY_FREE_4H_TIMER {
    margin-top: 10px;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

#ENERGY_PANEL_COST_ROW {
    margin-top: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

#ENERGY_PANEL_OPTIONS {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.energy-panel-option {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    color: #0f172a;
    font-weight: 700;
    cursor: pointer;
}

.energy-panel-option:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.energy-panel-option-left {
    color: #334155;
}

.energy-panel-option-right {
    color: #0284c7;
}

/* ── Diamond Challenges Panel ─────────────────────────────── */
#DIAMOND_CHALLENGES_OVERLAY {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(2, 12, 35, 0.62);
    z-index: 3000000;
    padding: 18px;
    box-sizing: border-box;
}

#DIAMOND_CHALLENGES_CARD {
    width: min(92vw, 430px);
    max-height: min(88dvh, 600px);
    overflow: auto;
    border-radius: 22px;
    background: #f8fafc;
    border: 2px solid #dbeafe;
    box-shadow: 0 20px 48px rgba(2, 12, 35, 0.36);
    padding: 18px 16px 16px;
    position: relative;
    color: #0f172a;
}

#DIAMOND_CHALLENGES_CLOSE {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: white;
    color: #475569;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

#DIAMOND_CHALLENGES_TITLE {
    margin: 0;
    text-align: center;
    color: #0c4a6e;
    font-size: 24px;
    font-weight: 800;
}

#DIAMOND_CHALLENGES_STATUS {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dc-status-row {
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dc-pending-pill {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
    font-weight: 800;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 16px;
}

.dc-gems-row {
    color: #0369a1;
    font-weight: 700;
    font-size: 14px;
}

.dc-progress-wrap {
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: white;
    padding: 12px;
}

.dc-progress-label {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
}

.dc-progress-track {
    margin-top: 8px;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.dc-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f472b6, #fb7185);
    transition: width 0.35s ease;
}

.dc-progress-timer {
    margin-top: 8px;
    color: #475569;
    font-size: 12px;
    line-height: 1.35;
}

.dc-actions {
    display: grid;
    gap: 8px;
}

.dc-action-btn {
    border: none;
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 900;
    color: white;
    cursor: pointer;
}

.dc-action-btn-primary {
    background: #0ea5e9;
}

.dc-action-btn-secondary {
    background: #10b981;
}

.dc-action-btn-tertiary {
    background: #f97316;
}

.dc-action-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

.dc-cost-row {
    margin-top: 2px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.dc-options-wrap {
    display: grid;
    gap: 8px;
}

.dc-section-title {
    font-size: 13px;
    font-weight: 900;
    color: #334155;
    margin: 0;
}

.dc-group-wrap {
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: white;
    padding: 12px;
}

.dc-empty {
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px 14px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.dc-reward-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 10px 12px;
}

.dc-reward-info {
    flex: 1;
    min-width: 0;
}

.dc-reward-title {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
}

.dc-reward-amount {
    font-size: 15px;
    font-weight: 900;
    color: #0ea5e9;
    margin-top: 4px;
}

.dc-reward-countdown {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    margin-top: 3px;
}

.dc-claim-btn {
    width: auto;
    min-width: 138px;
    background: #0ea5e9;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background 0.2s;
}

.dc-claim-btn:hover {
    background: #0284c7;
}

.dc-claim-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

.dc-milestone {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    line-height: 1.5;
}

.dc-timeout-note {
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-align: left;
}

/* ═══════════════════════════════════════════════════════════════
   DAILY DONE OVERLAY
   ═══════════════════════════════════════════════════════════════ */
#DAILY_DONE_OVERLAY {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(2, 12, 35, 0.68);
    z-index: 3200000;
    padding: 0;
    box-sizing: border-box;
    animation: fadeInOverlay .22s ease;
}
#DAILY_DONE_CARD {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 28px 28px 0 0;
    padding: 0 0 28px;
    box-shadow: 0 -12px 48px rgba(2,12,35,.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: slideUpCard .3s cubic-bezier(.22,.68,0,1.2);
}
.daily-done-banner {
    width: 100%;
    min-height: 120px;
    background: linear-gradient(135deg, #58cc02 0%, #1cb0f6 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 12px 0 0;
}
.daily-done-mentor {
    height: 120px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.18));
}
.daily-done-confetti {
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 28px;
    letter-spacing: 6px;
    pointer-events: none;
    animation: bounce 1.2s infinite alternate;
}
.daily-done-title {
    font-size: 21px;
    font-weight: 900;
    color: #0f172a;
    text-align: center;
    margin: 18px 20px 12px;
    line-height: 1.3;
}
.daily-done-list {
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.daily-done-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 14px;
    padding: 10px 14px;
}
.daily-done-check {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.daily-done-row-text {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: #166534;
}
.daily-done-row-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.daily-done-bar-track {
    height: 8px;
    border-radius: 999px;
    background: #dcfce7;
    overflow: hidden;
}
.daily-done-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: #16a34a;
}
.daily-done-bar-label {
    font-size: 12px;
    color: #15803d;
    font-weight: 600;
}
.daily-done-cta {
    width: calc(100% - 40px);
    padding: 16px;
    border-radius: 16px;
    border: none;
    background: #58cc02;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .5px;
    cursor: pointer;
    box-shadow: 0 4px 0 #3fa000;
    transition: transform .1s, box-shadow .1s;
}
.daily-done-cta:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #3fa000;
}

/* ═══════════════════════════════════════════════════════════════
   STREAK COMMIT OVERLAY
   ═══════════════════════════════════════════════════════════════ */
#STREAK_COMMIT_OVERLAY {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(2, 12, 35, 0.68);
    z-index: 3200000;
    padding: 0;
    box-sizing: border-box;
    animation: fadeInOverlay .22s ease;
}
#STREAK_COMMIT_CARD {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 28px 28px 0 0;
    padding: 28px 20px 28px;
    box-shadow: 0 -12px 48px rgba(2,12,35,.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: slideUpCard .3s cubic-bezier(.22,.68,0,1.2);
}
.streak-commit-icon {
    font-size: 52px;
    line-height: 1;
}
.streak-commit-title {
    font-size: 19px;
    font-weight: 900;
    color: #0f172a;
    text-align: center;
    margin: 0;
    line-height: 1.35;
}
.streak-commit-options {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.streak-commit-tier {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 12px 14px;
    cursor: pointer;
    background: #f8fafc;
    transition: border-color .15s, background .15s, transform .1s;
    text-align: left;
    width: 100%;
}
.streak-commit-tier:hover {
    border-color: #f97316;
    background: #fff7ed;
    transform: translateY(-1px);
}
.streak-commit-tier.selected {
    border-color: #f97316;
    background: #fff7ed;
}
.streak-commit-tier-icon {
    font-size: 28px;
    flex-shrink: 0;
}
.streak-commit-tier-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.streak-commit-tier-days {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}
.streak-commit-tier-reward {
    font-size: 13px;
    font-weight: 600;
    color: #ea580c;
}
.streak-commit-skip {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 8px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   FRIEND CHALLENGE OVERLAY
   ═══════════════════════════════════════════════════════════════ */
#FRIEND_CHALLENGE_OVERLAY {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(2, 12, 35, 0.68);
    z-index: 3200000;
    padding: 0;
    box-sizing: border-box;
    animation: fadeInOverlay .22s ease;
}
#FRIEND_CHALLENGE_CARD {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 28px 28px 0 0;
    padding: 28px 20px 28px;
    box-shadow: 0 -12px 48px rgba(2,12,35,.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: slideUpCard .3s cubic-bezier(.22,.68,0,1.2);
}
.friend-challenge-avatars {
    display: flex;
    align-items: center;
    gap: 18px;
}
.friend-challenge-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.friend-challenge-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fbbf24;
    background: #fef9c3;
}
.friend-challenge-avatar-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    max-width: 80px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.friend-challenge-vs {
    font-size: 32px;
}
.friend-challenge-title {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    text-align: center;
    margin: 0;
    line-height: 1.3;
}
.friend-challenge-sub {
    font-size: 14px;
    color: #64748b;
    text-align: center;
    margin: 0;
    line-height: 1.4;
}
.friend-challenge-rewards {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.fc-reward-chip {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1.5px solid #fbbf24;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 15px;
    font-weight: 800;
    color: #92400e;
}
.friend-challenge-congrats {
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    border: none;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 0 #b45309;
    transition: transform .1s, box-shadow .1s;
}
.friend-challenge-congrats:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #b45309;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideUpCard {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-6px); }
}