/**
 * Tower of Destiny — PWA Install Prompt Styles
 */

/* ── Overlay backdrop ──────────────────────────────────────────────────────── */
#tod-pwa-install-overlay {
    position:         fixed;
    inset:            0;
    z-index:          99999;
    background:       rgba( 0, 0, 0, 0.75 );
    display:          flex;
    align-items:      flex-end;   /* slide up from bottom on mobile */
    justify-content:  center;
    padding:          1rem;
    opacity:          0;
    transition:       opacity 0.3s ease;
    /* Prevent the game from receiving touch events while the overlay is open */
    touch-action:     none;
}

#tod-pwa-install-overlay.tod-pwa-install-overlay--visible {
    opacity: 1;
}

#tod-pwa-install-overlay.tod-pwa-install-overlay--hiding {
    opacity: 0;
}

/* ── Inner card ────────────────────────────────────────────────────────────── */
.tod-pwa-install-inner {
    background:       #1a1a2e;
    border:           1px solid #7b5ea7;
    border-radius:    12px;
    box-shadow:       0 0 32px rgba( 123, 94, 167, 0.5 ), 0 8px 32px rgba( 0, 0, 0, 0.6 );
    width:            100%;
    max-width:        480px;
    padding:          1.5rem;
    transform:        translateY( 40px );
    transition:       transform 0.3s ease;
    color:            #e0d6f0;
    font-family:      inherit;
}

#tod-pwa-install-overlay.tod-pwa-install-overlay--visible .tod-pwa-install-inner {
    transform: translateY( 0 );
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.tod-pwa-install-header {
    display:        flex;
    align-items:    center;
    gap:            0.75rem;
    margin-bottom:  1rem;
    border-bottom:  1px solid rgba( 123, 94, 167, 0.4 );
    padding-bottom: 0.75rem;
}

.tod-pwa-install-icon {
    font-size:   2rem;
    line-height: 1;
    flex-shrink: 0;
}

.tod-pwa-install-title {
    font-size:      1.15rem;
    font-weight:    700;
    color:          #f0d080;
    margin:         0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow:    0 0 8px rgba( 240, 208, 128, 0.5 );
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
.tod-pwa-install-body {
    margin-bottom: 1.25rem;
}

.tod-pwa-install-desc {
    font-size:     0.9rem;
    line-height:   1.6;
    color:         #c8bfe0;
    margin:        0 0 1rem;
}

.tod-pwa-install-steps {
    list-style:    none;
    padding:       0;
    margin:        0 0 0.75rem;
    counter-reset: tod-step;
}

.tod-pwa-install-steps li {
    counter-increment: tod-step;
    display:           flex;
    align-items:       flex-start;
    gap:               0.75rem;
    font-size:         0.88rem;
    line-height:       1.5;
    color:             #d8cef0;
    padding:           0.5rem 0;
    border-bottom:     1px solid rgba( 123, 94, 167, 0.2 );
}

.tod-pwa-install-steps li:last-child {
    border-bottom: none;
}

.tod-pwa-install-steps li::before {
    content:          counter( tod-step );
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    min-width:        1.6rem;
    height:           1.6rem;
    background:       #7b5ea7;
    color:            #fff;
    border-radius:    50%;
    font-size:        0.8rem;
    font-weight:      700;
    flex-shrink:      0;
    margin-top:       0.1rem;
}

.tod-pwa-install-steps strong {
    color: #f0d080;
}

/* iOS Share icon */
.tod-pwa-install-share-icon {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            1.4rem;
    height:           1.4rem;
    background:       #0a84ff;
    color:            #fff;
    border-radius:    4px;
    font-size:        0.9rem;
    vertical-align:   middle;
    margin:           0 0.1rem;
}

.tod-pwa-install-note {
    font-size:  0.8rem;
    color:      #9888b8;
    margin:     0.5rem 0 0;
    font-style: italic;
}

/* ── Footer buttons ────────────────────────────────────────────────────────── */
.tod-pwa-install-footer {
    display:         flex;
    gap:             0.75rem;
    justify-content: flex-end;
    flex-wrap:       wrap;
}

.tod-pwa-install-btn {
    padding:       0.5rem 1.1rem;
    border-radius: 6px;
    font-size:     0.85rem;
    font-weight:   600;
    cursor:        pointer;
    border:        none;
    transition:    background 0.15s ease, transform 0.1s ease;
    font-family:   inherit;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tod-pwa-install-btn:active {
    transform: scale( 0.97 );
}

/* Primary — Install */
.tod-pwa-install-btn--primary {
    background: #7b5ea7;
    color:      #fff;
    width:      100%;
    padding:    0.65rem 1.1rem;
    font-size:  0.95rem;
    margin-bottom: 0.5rem;
}

.tod-pwa-install-btn--primary:hover {
    background: #9070c0;
}

/* Secondary — Maybe Later */
.tod-pwa-install-btn--secondary {
    background: rgba( 123, 94, 167, 0.25 );
    color:      #c8bfe0;
    border:     1px solid rgba( 123, 94, 167, 0.5 );
}

.tod-pwa-install-btn--secondary:hover {
    background: rgba( 123, 94, 167, 0.4 );
}

/* Ghost — Don't Show Again */
.tod-pwa-install-btn--ghost {
    background: transparent;
    color:      #7a6a9a;
    border:     1px solid rgba( 123, 94, 167, 0.25 );
}

.tod-pwa-install-btn--ghost:hover {
    color:      #9888b8;
    border-color: rgba( 123, 94, 167, 0.5 );
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media ( min-width: 600px ) {
    #tod-pwa-install-overlay {
        align-items: center;  /* centre vertically on larger screens */
    }
}