/*--· · ─────── · CONFIG & SCALING VARIABLES · ─────── · ·*/
:root {
    --scale: 1.5;

    /* Base Dimensions (Multiplied by scale variables) */
    --lang-max-width: calc(520px * var(--scale));
    --lang-gap: calc(16px * var(--scale));
    
    --lang-card-padding-v: calc(16px * var(--scale));
    --lang-card-padding-h: calc(24px * var(--scale));
    --lang-card-gap: calc(20px * var(--scale));
    --lang-card-radius: calc(22px * var(--scale));
    --lang-card-border: calc(2.5px * var(--scale));

    --lang-flag-width: calc(100px * var(--scale));
    --lang-flag-height: calc(64px * var(--scale));

    --lang-title-size: calc(24px * var(--scale));
    --lang-divider-height: calc(2px * var(--scale));
    --lang-divider-margin: calc(6px * var(--scale));
    --lang-author-size: calc(15px * var(--scale));

    --lang-banner-padding-v: calc(8px * var(--scale));
    --lang-banner-padding-h: calc(28px * var(--scale));
    --lang-banner-radius: calc(14px * var(--scale));
    --lang-banner-label-size: calc(13px * var(--scale));
    --lang-banner-val-size: calc(18px * var(--scale));
}

/*--· · ─────── · LANGUAGE OVERLAY · ─────── · ·*/
#langOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    padding: 20px 10px; 
}

#langOverlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Container */
#langBox {
    width: 100%;
    max-width: calc(var(--lang-max-width) + 60px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: var(--lang-gap);
    user-select: none;

    /* Enables scrolling while keeping horizontal box-shadows visible */
    overflow-y: auto;
    overflow-x: hidden;

    /* Padding around cards gives room for box-shadow glow */
    padding: 20px; 
    box-sizing: border-box;
}

#langOverlay,
#langOverlay * {
    font-family: "manga", sans-serif !important;
}

/* Language Selection Card */
.lang-card {
    display: flex;
    align-items: center;
    gap: var(--lang-card-gap);
    background: rgba(0, 0, 0, 0.55);
    border: var(--lang-card-border) solid rgba(255, 255, 255, 0.25);
    border-radius: var(--lang-card-radius);
    corner-shape: squircle;
    padding: var(--lang-card-padding-v) var(--lang-card-padding-h);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

.lang-card:hover {
    background: rgba(45, 45, 45, 0.75);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
}

.lang-card:active {
    transform: scale(0.98);
}

/* Active Selected Language Card */
.lang-card.active-lang {
    border-color: rgba(255, 255, 255, 0.95);
    background: rgba(70, 70, 70, 0.85);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    cursor: default;
}

.lang-card.active-lang:hover {
    transform: none;
}

/* Flag Image */
.lang-flag-img {
    width: var(--lang-flag-width);
    height: var(--lang-flag-height);
    object-fit: cover;
    flex-shrink: 0;
    image-rendering: pixelated;
}

/* Info Section inside Card */
.lang-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.lang-card-title {
    color: #fff;
    font-size: var(--lang-title-size);
    line-height: 1.2;
}

.lang-card-divider {
    height: var(--lang-divider-height);
    background: rgba(255, 255, 255, 0.35);
    margin: var(--lang-divider-margin) 0;
}

.lang-card-author {
    color: #ddd;
    font-size: var(--lang-author-size);
}

/* Current Language Display Banner at Bottom */
.lang-current-banner {
    margin-top: calc(4px * var(--scale));
    align-self: center;
    background: rgba(0, 0, 0, 0.65);
    border: calc(2px * var(--scale)) solid rgba(255, 255, 255, 0.35);
    border-radius: var(--lang-banner-radius);
    padding: var(--lang-banner-padding-v) var(--lang-banner-padding-h);
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.lang-current-label {
    font-size: var(--lang-banner-label-size);
    display: block;
    opacity: 0.85;
}

.lang-current-val {
    font-size: var(--lang-banner-val-size);
    display: block;
}

/* Body Scroll Lock */
body.lang-open {
    overflow: hidden;
}