/* ============================================================
   SCREENS — Start, tutorial, pause, game over, level complete
   ============================================================ */

/* ── Start screen ────────────────────────────────────────── */
.start-logo {
    font-family: var(--font-brahmi);
    font-size:   4rem;
    color:       var(--color-gold);
    line-height: 1;
    margin-bottom: var(--space-3);
    filter: drop-shadow(0 2px 12px rgba(196,154,82,0.35));
}
.start-title {
    font-size:      var(--fs-2xl);
    font-weight:    var(--fw-bold);
    color:          var(--color-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}
.start-subtitle {
    font-size:   var(--fs-base);
    color:       var(--color-text-muted);
    margin-bottom: var(--space-6);
}
.start-actions {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-4);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
    padding:        var(--space-3) var(--space-10);
    background:     var(--color-primary);
    color:          #FFFDF8;
    border:         1px solid var(--color-primary-dark);
    border-radius:  var(--radius-lg);
    font-size:      var(--fs-lg);
    font-weight:    var(--fw-semibold);
    letter-spacing: 0.04em;
    box-shadow:     var(--shadow-md);
    transition:     background var(--transition-fast),
                    transform  var(--transition-fast),
                    box-shadow var(--transition-fast);
}
.btn-primary:hover {
    background: var(--color-primary-light);
    transform:  translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    padding:       var(--space-2) var(--space-6);
    background:    transparent;
    color:         var(--color-text-muted);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size:     var(--fs-sm);
    transition:    background var(--transition-fast), color var(--transition-fast);
}
.btn-secondary:hover {
    background: var(--color-surface-alt);
    color:      var(--color-text);
}

/* ── Level picker ────────────────────────────────────────── */
.level-select {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-2);
}
.level-select__label {
    font-size:      var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color:          var(--color-text-muted);
}
.level-picker {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             var(--space-2);
}
.level-chip {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    border:        1px solid var(--color-border);
    background:    var(--color-surface);
    color:         var(--color-text-muted);
    font-size:     var(--fs-base);
    font-weight:   var(--fw-semibold);
    transition:    background   var(--transition-fast),
                   color        var(--transition-fast),
                   border-color var(--transition-fast);
}
.level-chip:hover {
    background:   var(--color-surface-alt);
    color:        var(--color-text);
    border-color: var(--color-border-strong);
}
.level-chip.is-selected {
    background:   var(--color-gold-pale);
    color:        var(--color-primary);
    border-color: var(--color-gold);
    box-shadow:   0 0 0 3px rgba(196, 154, 82, 0.20);
}

/* ── Preferences (sound, key hints) ──────────────────────── */
.pref-rows {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             var(--space-3) var(--space-6);
}
.pref-row {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    font-size:   var(--fs-sm);
    color:       var(--color-text-muted);
}
.sound-toggle-btn,
.hints-toggle-btn {
    height:        36px;
    border-radius: var(--radius-sm);
    border:        1px solid var(--color-border);
    background:    var(--color-surface);
    color:         var(--color-text-muted);
    font-size:     var(--fs-base);
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    all var(--transition-fast);
}
.sound-toggle-btn { width: 36px; }
.hints-toggle-btn {
    min-width:   48px;
    padding:     0 var(--space-3);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-semibold);
    color:       var(--color-primary);
    border-color: var(--color-gold);
    background:  var(--color-gold-pale);
}
.hints-toggle-btn.is-off {
    color:        var(--color-text-light);
    border-color: var(--color-border);
    background:   var(--color-surface);
}
.sound-toggle-btn:hover { background: var(--color-surface-alt); }
.sound-toggle-btn.sound-off {
    color:   var(--color-text-light);
    opacity: 0.6;
}

.home-link {
    font-size:       var(--fs-sm);
    color:           var(--color-text-muted);
    text-decoration: none;
    border-bottom:   1px solid transparent;
    transition:      color var(--transition-fast), border-color var(--transition-fast);
}
.home-link:hover,
.home-link:focus-visible {
    color:        var(--color-primary);
    border-color: var(--color-gold-light);
}

/* ── Tutorial ────────────────────────────────────────────── */
.tutorial-steps {
    text-align:   left;
    list-style:   none;
    margin-bottom: var(--space-6);
}
.tutorial-steps li {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-3);
    padding:     var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    font-size:   var(--fs-base);
    color:       var(--color-text);
}
.tutorial-steps li:last-child { border-bottom: none; }
.step-num {
    width:           26px;
    height:          26px;
    border-radius:   50%;
    background:      var(--color-primary);
    color:           #FFFDF8;
    font-size:       var(--fs-xs);
    font-weight:     var(--fw-bold);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    margin-top:      2px;
}
.tutorial-demo {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             var(--space-2);
    padding:         var(--space-4);
    margin-bottom:   var(--space-4);
    background:      var(--color-surface-alt);
    border-radius:   var(--radius-lg);
    border:          1px solid var(--color-border);
}
.demo-char {
    font-family: var(--font-brahmi);
    font-size:   2.5rem;
    color:       var(--color-primary);
    animation:   tutorial-fall 2s ease-in-out infinite;
}
.demo-arrow { color: var(--color-gold); font-size: var(--fs-xl); }
.demo-key {
    font-family:   var(--font-brahmi);
    font-size:     1.5rem;
    padding:       var(--space-2) var(--space-4);
    border:        1px solid var(--color-gold);
    border-radius: var(--radius-md);
    background:    var(--color-gold-pale);
    color:         var(--color-primary);
}
@keyframes tutorial-fall {
    0%   { transform: translateY(-12px); opacity: 0.6; }
    50%  { transform: translateY(8px);   opacity: 1;   }
    100% { transform: translateY(-12px); opacity: 0.6; }
}

/* ── Pause / Game over / Level complete ──────────────────── */
.screen-title {
    font-size:      var(--fs-2xl);
    font-weight:    var(--fw-bold);
    color:          var(--color-primary);
    margin-bottom:  var(--space-2);
}
.screen-title--spaced { margin-top: var(--space-3); }
.screen-subtitle {
    font-size:     var(--fs-base);
    color:         var(--color-text-muted);
    margin-bottom: var(--space-6);
}
.score-display {
    font-size:     var(--fs-4xl);
    font-weight:   var(--fw-bold);
    color:         var(--color-gold);
    margin:        var(--space-3) 0;
    line-height:   1;
}
.score-label {
    font-size:      var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color:          var(--color-text-muted);
}
.score-label--spaced { margin-top: var(--space-4); }
.score-best {
    font-size:   var(--fs-xl);
    font-weight: var(--fw-semibold);
    color:       var(--color-gold);
}
.screen-actions {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-3);
    margin-top:     var(--space-6);
}
.screen-actions__row {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             var(--space-2);
}

/* The sentence just written, shown on the level-complete card */
.lc-passage {
    padding:       var(--space-4);
    background:    var(--color-surface-alt);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.lc-passage__brahmi {
    font-size:   var(--fs-xl);
    line-height: 1.7;
    color:       var(--color-primary);
    overflow-wrap: anywhere;
}
.lc-passage__hindi {
    margin-top:  var(--space-2);
    font-size:   var(--fs-base);
    color:       var(--color-text);
}

/* HUD (in-game header content) */
#screen-hud { display: flex; }