/* ============================================================
   GAME — Game area, word display, falling letters
   ============================================================ */

/* ── Game area ───────────────────────────────────────────── */
#game-area {
    background:    var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow:    var(--shadow-inset);
    position:      relative;
    overflow:      hidden;
}

/* Danger zone indicator at bottom */
#game-area::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(169, 83, 69, 0.12), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Subtle corner motif via pseudo-element */
#game-area::before {
    content:    '';
    position:   absolute;
    width:      40px;
    height:     40px;
    border:     1px solid var(--color-gold-pale);
    opacity:    0.6;
    pointer-events: none;
    top:    8px;
    left:   8px;
    border-right: none;
    border-bottom: none;
    z-index: 2;
}

/* ── Falling letter ──────────────────────────────────────── */
.falling-letter {
    position:    absolute;
    top:         0;
    left:        0;
    font-family: 'Noto Sans Brahmi', var(--font-brahmi), serif;
    font-size:   var(--brahmi-size-fall);
    color:       var(--color-primary);
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    min-width:   1.7em;
    min-height:  1.7em;
    padding:     0.16em;
    text-align:  center;
    line-height: 1;
    border:      1px solid rgba(196, 154, 82, 0.45);
    border-radius: 50%;
    background:  rgba(255, 253, 248, 0.92);
    box-shadow:  0 5px 16px rgba(48, 40, 32, 0.14);
    pointer-events: none;
    will-change: transform;
    transform-origin: center center;
    transition: color 0.3s ease, filter 0.3s ease;
    z-index: 10;  /* Above game area decorations */

    /* Subtle gold glow */
    filter: drop-shadow(0 0 8px rgba(196, 154, 82, 0.50));

    /* Entry fade-in */
    animation: letter-enter 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.falling-letter.danger-zone {
    color: var(--color-danger);
    border-color: rgba(169, 83, 69, 0.55);
    filter: drop-shadow(0 0 12px rgba(169, 83, 69, 0.70));
    animation: danger-pulse 0.6s ease-in-out infinite;
}

.falling-letter.fade-out {
    animation: letter-exit 0.3s ease forwards;
}

/* ── Word zone ───────────────────────────────────────────── */
#word-zone {
    background:     var(--color-surface);
    border-bottom:  1px solid var(--color-border);
    padding:        var(--space-4) var(--space-5) var(--space-4);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-2);
    flex-shrink:    0;
}

.word-zone__label {
    font-size:      var(--fs-xs);
    color:          var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight:    var(--fw-medium);
}

/* ── Current line of the passage ──────────────────────────── */
#target-word {
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         0.1em 0.4em;
    flex-wrap:   wrap;
    width:       100%;
    max-width:   46rem;
    min-height:  3.75rem;
    padding:     0.05em 0.1em;
    font-size:   var(--brahmi-size-target);
    line-height: 1.3;
    overflow:    visible;
}

.passage-word {
    display: inline-flex;
    align-items: center;
    padding: 0.04em 0.12em;
    border-radius: var(--radius-sm);
    color: var(--color-letter-inactive);
    white-space: nowrap;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.passage-word.is-current {
    background: rgba(196, 154, 82, 0.12);
    box-shadow: inset 0 -2px 0 var(--color-gold-light);
}

/* A word caught without a miss is joined back into its written form. */
.passage-word.is-joined {
    color:       var(--color-letter-active);
    text-shadow: 0 0 12px rgba(196, 154, 82, 0.30);
}

/* Punctuation is shown in place but is never a falling letter. */
.passage-punct {
    color:      inherit;
    transition: color 350ms ease;
}

.passage-word.is-done .passage-punct {
    color: var(--color-letter-active);
}

.target-unit {
    font-family: 'Noto Sans Brahmi', var(--font-brahmi), serif;
    font-size:   var(--brahmi-size-target);
    color:       var(--color-letter-inactive);
    transition:  color 350ms var(--transition-slow),
                 text-shadow 350ms ease;
    cursor:      default;
    line-height: 1.25;
    min-inline-size: 0.72em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dependent Brahmi signs need a base glyph to remain visible on their own. */
.target-unit.is-sign,
.falling-letter.is-sign,
.key-char.is-sign {
    letter-spacing: 0;
}

.target-unit.is-complete {
    color:       var(--color-letter-active);
    text-shadow: 0 0 12px rgba(196, 154, 82, 0.30);
}

.target-unit.is-missed {
    color: var(--color-danger-light);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(169, 83, 69, 0.55);
}

.target-unit.is-next {
    color:       var(--color-letter-current);
    animation:   next-pulse 1.5s ease-in-out infinite;
}

/* ── Hindi line ──────────────────────────────────────────── */
#target-hindi {
    display:     flex;
    flex-wrap:   wrap;
    justify-content: center;
    gap:         0.25em 0.4em;
    font-family: 'Noto Sans Devanagari', 'Hind', var(--font-hindi), sans-serif;
    font-size:   var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    min-height:  1.8rem;
    letter-spacing: 0.02em;
}

/* Each Hindi word stays covered until its Brahmi word is completed. */
.hindi-word {
    padding:       0 0.3em;
    border-radius: var(--radius-sm);
    color:         transparent;
    background:    var(--color-surface-alt);
    transition:    color 500ms ease, background 500ms ease;
}

.hindi-word.is-revealed {
    color:      var(--color-text);
    background: transparent;
}

/* ── Word completion animation ───────────────────────────── */
.word-complete-anim {
    animation: word-complete 600ms var(--transition-slow) forwards;
}

/* ── Unit arrival animation ──────────────────────────────── */
.unit-arrive {
    animation: unit-arrive 350ms var(--transition-spring) forwards;
}