/* Responsive Reset & Base */
html { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
body { font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; text-align: center; background-color: #e6f7ff; margin: 0; padding: 0; user-select: none; height: 100%; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }

.app-container {
    width: 95vw;
    height: 95vh;
    max-width: none;
    margin: auto;
    border-radius: 3vh;
    padding: 2vh 3vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
}

/* Specific Container Styles */
#game-container {
    background: linear-gradient(to bottom, #ffe0b2, #fff3e0);
    border: 0.8vh solid #ffcc00;
    box-shadow: 0 1vh 0 #e6b800, 0 2vh 4vh rgba(0,0,0,0.15);
    display: none;
    justify-content: space-between;
}
#setup-container {
    background: white;
    border: 0.8vh solid #4CAF50;
    box-shadow: 0 1vh 0 #2e7d32, 0 2vh 4vh rgba(0,0,0,0.15);
    display: none;
    justify-content: center;
}
#results-container {
    background: white;
    border: 0.8vh solid #2196F3;
    box-shadow: 0 1vh 0 #1976D2;
    display: none;
    justify-content: center;
}

/* Scalable Typography & Elements */
.safari-header { font-size: clamp(1.5rem, 4vh, 3rem); color: #d32f2f; margin-bottom: 1vh; text-shadow: 2px 2px 0 #ffeb3b; line-height: 1.2; flex-shrink: 0; }

.top-bar-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5vh;
    flex-shrink: 0;
}

.level-badge { background: #4CAF50; color: white; padding: 0.5vh 2vw; border-radius: 4vh; font-weight: bold; display: inline-block; font-size: clamp(0.8rem, 2vh, 1.5rem); box-shadow: 0 0.5vh 1vh rgba(0,0,0,0.2); margin: 0; }

#timer-container { width: 100%; height: 2vh; background: #c8e6c9; border-radius: 2vh; margin: 1vh 0; border: 0.4vh solid #81c784; overflow: hidden; flex-shrink: 0; }
#timer-bar { width: 0%; height: 100%; background: #2e7d32; border-radius: 1.5vh; transition: width 0.1s linear; }

.problem-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 2vw;
    flex-grow: 1; /* Allow to expand */
    min-height: 15vh;
}

.prestige-badge {
    font-size: clamp(1.5rem, 6vw, 4rem);
    min-width: 8vw;
    opacity: 0;
    transition: all 0.5s ease;
    filter: drop-shadow(0 0 10px gold);
}
.prestige-badge.visible {
    opacity: 1;
    transform: scale(1.2);
}

.som {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: clamp(2.5rem, 12vw, 6rem);
    margin: 1vh 0;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    line-height: 1.1;
    text-shadow: 0.3vh 0.3vh 0 rgba(0,0,0,0.1);
}

.split-header {
    font-size: clamp(2rem, 5vh, 4rem);
    font-weight: normal;
    color: #555;
    margin: 0;
    line-height: 1;
}

.split-body {
    font-size: clamp(4rem, 10vh, 8rem);
    font-weight: bold;
    color: #E65100;
    margin: 0;
    line-height: 1;
}

input {
    font-family: 'Comic Sans MS', sans-serif;
    font-size: clamp(2.5rem, 12vw, 6rem);
    width: 30vw;
    max-width: 300px;
    text-align: center;
    border: 0.8vh solid #ff9800;
    border-radius: 2vh;
    outline: none;
    background: #fffde7;
    color: #e65100;
    box-shadow: inset 0 0.5vh 1vh rgba(0,0,0,0.1);
    margin-bottom: 1vh;
    flex-shrink: 0;
}
input:focus { border-color: #ff5722; box-shadow: 0 0 2vh rgba(255,87,34,0.5); }
input:disabled { opacity: 1; -webkit-text-fill-color: #d32f2f; color: #d32f2f; background: #fffde7; }

#feedback-message { font-size: clamp(1rem, 2.5vh, 2rem); color: #4CAF50; min-height: 4vh; margin: 0.5vh 0; font-weight: bold; flex-shrink: 0; }
#animal-collection { font-size: clamp(1.5rem, 4vh, 4rem); min-height: 5vh; word-wrap: break-word; line-height: 1.2; width: 100%; }
#helper-text { font-size: clamp(0.8rem, 1.5vh, 1.2rem); color: #757575; margin-top: 0.5vh; height: 2vh; flex-shrink: 0; }
.focus-mode { border-color: #f44336 !important; background-color: #ffebee !important; }
.celebration-message { color: #e65100; font-size: clamp(2rem, 4vh, 3rem); margin-top: 2vh; font-weight: bold; }

#bottom-collections {
    display: flex;
    justify-content: center;
    gap: 4vw;
    width: 100%;
    margin-top: 2vh;
    flex-shrink: 1; /* Allow shrinking if needed */
    overflow: hidden;
}

.collection-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1.5vh;
    padding: 1vh;
    border: 2px dashed #ffb74d;
}

.collection-header {
    font-size: clamp(0.8rem, 1.5vh, 1.2rem);
    font-weight: bold;
    color: #e65100;
    margin-bottom: 0.5vh;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.setup-section { margin-bottom: 3vh; flex-shrink: 0; }
.setup-section h3 { color: #2e7d32; font-size: clamp(1.5rem, 3vh, 2.5rem); margin-bottom: 1.5vh; }
.options-grid { display: flex; flex-wrap: wrap; gap: 1.5vh; justify-content: center; }
.option-btn {
    background: #e8f5e9;
    border: 0.4vh solid #81c784;
    border-radius: 2vh;
    padding: 2vh 4vw;
    font-size: clamp(1.5rem, 3vh, 2.5rem);
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
    color: #2e7d32;
    transition: all 0.2s;
}
.option-btn:hover { background: #c8e6c9; transform: translateY(-0.3vh); }
.option-btn.selected { background: #4CAF50; color: white; border-color: #2e7d32; box-shadow: 0 0.5vh 0 #1b5e20; }

#start-btn {
    background: #ff9800;
    color: white;
    border: none;
    padding: 2vh 5vw;
    font-size: clamp(1.5rem, 3vh, 3rem);
    border-radius: 4vh;
    cursor: pointer;
    margin-top: 3vh;
    box-shadow: 0 0.8vh 0 #e65100;
    font-family: inherit;
    opacity: 0.5;
    pointer-events: none;
    transition: all 0.2s;
    flex-shrink: 0;
}
#start-btn.active { opacity: 1; pointer-events: all; }
#start-btn:active { transform: translateY(0.8vh); box-shadow: none; }

/* .config-row removed in favor of direct flex in parent */
.config-item { background: #fffde7; padding: 1vh 1vw; border-radius: 1.5vh; border: 0.3vh solid #ffeb3b; text-align: left; }
.config-item.compact {
    flex: 1 1 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.config-item label { display: block; font-weight: bold; color: #f57f17; font-size: clamp(0.9rem, 2vh, 1.2rem); margin-bottom: 0.5vh; white-space: nowrap; }
.config-item input, .config-item select {
    font-size: clamp(1rem, 2.5vh, 1.5rem);
    width: 100%;
    padding: 0.5vh;
    border: 0.3vh solid #fbc02d;
    border-radius: 1vh;
    text-align: center;
    box-sizing: border-box;
    background: white;
}
.config-desc-compact {
    font-size: clamp(0.6rem, 1.2vh, 0.9rem);
    color: #666;
    margin-top: 0.5vh;
    line-height: 1.1;
    max-height: 2.4em;
    overflow: hidden;
}

#stop-btn { background: #d32f2f; color: white; border: none; padding: 1.5vh 3vw; border-radius: 3vh; font-size: clamp(1rem, 2vh, 1.5rem); font-weight: bold; cursor: pointer; border-bottom: 0.5vh solid #b71c1c; }
#stop-btn:active { transform: translateY(0.5vh); border-bottom: none; }

#pause-btn { background: #2196F3; color: white; border: none; padding: 1.5vh 3vw; border-radius: 3vh; font-size: clamp(1rem, 2vh, 1.5rem); font-weight: bold; cursor: pointer; border-bottom: 0.5vh solid #1565C0; }
#pause-btn:active { transform: translateY(0.5vh); border-bottom: none; }

#pause-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.9); z-index: 20; display: none; align-items: center; justify-content: center; flex-direction: column; border-radius: 3vh; }
.pause-title { font-size: clamp(3rem, 6vh, 5rem); color: #2196F3; margin-bottom: 3vh; font-weight: bold; }
#resume-btn { background: #4CAF50; color: white; border: none; padding: 2vh 5vw; font-size: clamp(2rem, 4vh, 3rem); border-radius: 4vh; cursor: pointer; box-shadow: 0 0.8vh 0 #2e7d32; }

#parent-save-btn { background: #673AB7; color: white; border: none; padding: 1.5vh 4vw; font-size: clamp(1rem, 2.5vh, 2rem); border-radius: 4vh; cursor: pointer; margin-top: 1vh; box-shadow: 0 0.6vh 0 #4527A0; font-family: inherit; }
#parent-save-btn:active { transform: translateY(0.6vh); box-shadow: none; }

#to-parent-btn { position: absolute; top: 2vh; left: 2vw; background: #ddd; border: none; padding: 1vh 1.5vw; border-radius: 1.5vh; font-size: clamp(0.8rem, 1.5vh, 1.2rem); cursor: pointer; }

.stat-box { font-size: clamp(1.2rem, 2.5vh, 2rem); margin: 1vh 0; color: #333; }
.stat-val { font-weight: bold; color: #2196F3; }
#restart-btn { background: #2196F3; color: white; border: none; padding: 1.5vh 4vw; font-size: clamp(1.2rem, 2.5vh, 2rem); border-radius: 4vh; cursor: pointer; margin-top: 2vh; box-shadow: 0 0.6vh 0 #0d47a1; }
#restart-btn:active { transform: translateY(0.6vh); box-shadow: none; }

.badge-card {
    background: white;
    padding: 0.5vh;
    border-radius: 1vh;
    width: 100%;
    max-width: none;
    text-align: center;
    font-size: clamp(0.7rem, 1.5vh, 1rem);
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid #ccc;
    box-sizing: border-box;
}
.badge-card.level { border-color: #E91E63; background: #fce4ec; }
.badge-card.session { border-color: #2196F3; background: #e3f2fd; }
.badge-card.life { border-color: #FF9800; background: #fff3e0; }

.badge-card .desc {
    font-size: clamp(0.6rem, 1.2vh, 0.8rem);
    color: #666;
    margin-top: 0.2vh;
    line-height: 1;
}

#reset-stats-btn {
    background: #ffebee;
    color: #d32f2f;
    border: 0.3vh solid #ef5350;
    padding: 1vh 2vw;
    font-size: clamp(0.8rem, 1.5vh, 1.2rem);
    border-radius: 2vh;
    cursor: pointer;
    margin-top: 1vh;
    font-family: inherit;
    align-self: center;
}
#reset-stats-btn:hover { background: #ffcdd2; }

.split-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-size: clamp(3rem, 8vw, 6rem); /* Responsive base size */
}
.split-top {
    margin-bottom: 0.2em;
    font-weight: bold;
    font-size: 1em;
}
.split-legs {
    display: flex;
    gap: 0.5em;
    color: #555;
    font-size: 0.6em;
    font-weight: normal;
}
.split-bottom {
    display: flex;
    gap: 1.5em;
    margin-top: 0.2em;
    font-weight: bold;
    font-size: 1em;
}
.split-sentence {
    font-size: 0.3em;
    color: #555;
    margin-top: 0.5em;
    font-weight: normal;
    text-align: center;
}

#level-badge-collection {
    display: flex;
    justify-content: center;
    gap: 10px;
    min-height: 5vh;
    flex-wrap: wrap;
    width: 100%;
}

.collected-level-badge {
    position: relative;
    font-size: 2.5rem;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.2));
}

.badge-count {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: #E91E63;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}