@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Patrick+Hand&display=swap');

/*
 * RESPONSIVE SCALING STRATEGY
 * ─────────────────────────────────────────────────────────────────
 * The viewport is a letterboxed 16:9 box.
 * At 1920×1080 the shorter dimension (height) is 1080px = 100vh.
 * 1vmin = min(vw, vh).  For a 16:9 screen 1vmin ≈ 1vh.
 *
 * All previously hard-coded px sizes are converted to vmin-based
 * clamp() values:
 *   clamp(min, preferred, max)
 * where preferred = (original_px / 1080) * 100vmin
 * and min/max guard against extreme viewport edges.
 *
 * Font sizes use a single CSS custom property --vp-scale so you
 * can still tweak --font-multiplier and have it cascade.
 * ─────────────────────────────────────────────────────────────────
 */

:root {
    --game-title: "Retcon Vera";
    --font-multiplier: 1.2;

    /* --- Positional Offsets --- */
    --sprite-bottom-offset: -45%;

    --font-main: 'Patrick Hand', cursive;
    --font-titles: 'Bangers', cursive;

    /* Borders & shadows scale with viewport */
    --comic-border-width: clamp(1px, 0.28vmin, 4px);
    --comic-border: var(--comic-border-width) solid #000;
    --comic-shadow-x: clamp(2px, 0.46vmin, 8px);
    --comic-shadow-y: clamp(2px, 0.46vmin, 8px);
    --comic-shadow: var(--comic-shadow-x) var(--comic-shadow-y) 0px rgba(0,0,0,0.2);

    /*
     * --vp-scale is the ratio of the current viewport's shorter
     * dimension vs the design baseline of 1080px.
     * 1vmin / 10.8 ≈ 1px at 1080px-tall screen.
     * Multiply any px value by --vp-scale to get its vmin equivalent.
     */
    --vp-scale: calc(1vmin / 10.8);
}

* { box-sizing: border-box; }

body, html {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    background: #111;
    font-family: var(--font-main);
    /* Base body font: ~1.2rem * 1.2 multiplier ≈ 23px at 1080p → ~2.1vmin */
    font-size: clamp(10px, calc(2.1vmin * var(--font-multiplier)), 32px);
    text-transform: uppercase;
}

#game-container {
    width: 100vw; height: 100vh;
    display: flex; align-items: center; justify-content: center;
}

#viewport {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: calc(100vh * 16 / 9);
    max-height: calc(100vw * 9 / 16);
    background: #222;
    overflow: hidden;
}

.screen {
    position: absolute;
    inset: 0;
    display: none;
    z-index: 10;
}

.screen.active { display: block; }

/* ── Scene & Sprites ────────────────────────────────────────── */
#scene-layer {
    position: absolute;
    inset: 0;
    background: #111;
    transition: opacity var(--fade-scene) ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
#scene-layer canvas, #scene-layer img {
    height: 100%;
    width: auto;
    display: block;
}

#sprite-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Sprite Anchor System */
.sprite-slot {
    position: absolute;
    bottom: var(--sprite-bottom-offset);
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: opacity var(--fade-sprite) ease;
}
.sprite-slot.left   { left: 20%; transform: translateX(-50%); }
.sprite-slot.center { left: 50%; transform: translateX(-50%); }
.sprite-slot.right  { left: 80%; transform: translateX(-50%); }

.sprite-slot img {
    width: auto;
    display: block;
    image-rendering: auto;
}

/* Placeholders — ~160×260px at 1080p → ~14.8 × 24vmin */
.sprite-placeholder {
    width: clamp(80px, 14.8vmin, 220px);
    height: clamp(130px, 24vmin, 360px);
    background: var(--color-placeholder-bg);
    border: clamp(1px, 0.19vmin, 3px) dashed var(--color-placeholder-border);
    border-radius: clamp(2px, 0.37vmin, 6px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: clamp(6px, 1.1vmin, 18px);
    text-align: center;
    gap: clamp(4px, 0.74vmin, 12px);
}
.sprite-placeholder .ph-icon  { font-size: clamp(14px, 2.6vmin, 40px); opacity: 0.6; }
.sprite-placeholder .ph-label { font-family: var(--font-ui); font-size: clamp(7px, 0.93vmin, 14px); letter-spacing: 0.1em; color: var(--color-accent); opacity: 0.8; word-break: break-all; }

/* Scene placeholder */
.scene-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #0d0d18 0%, #111120 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: clamp(5px, 0.93vmin, 15px);
}
.scene-placeholder .ph-icon  { font-size: clamp(18px, 3.3vmin, 54px); opacity: 0.3; }
.scene-placeholder .ph-label { font-family: var(--font-ui); font-size: clamp(7px, 1.02vmin, 16px); letter-spacing: 0.12em; color: var(--color-accent); opacity: 0.5; }


/* ── Dialogue Box (Speech Bubble) ─────────────────────────── */
#dialogue-box {
    position: absolute;
    bottom: 10%; left: 50%;
    transform: translateX(-50%);
    width: 60%; min-height: 16.5%;
    background: white;
    border: var(--comic-border);
    border-radius: clamp(16px, 3.7vmin, 60px);
    /* padding: ~25px 40px at 1080p */
    padding: clamp(10px, 2.3vmin, 36px) clamp(16px, 3.7vmin, 60px);
    z-index: 50;
    filter: drop-shadow(var(--comic-shadow));
}

#dialogue-box::after {
    content: '';
    position: absolute;
    top: clamp(-24px, -3vmin, -20px); left: 50%;
    transform: translateX(-50%);
    border-left:   clamp(8px, 1.39vmin, 20px) solid transparent;
    border-right:  clamp(8px, 1.39vmin, 20px) solid transparent;
    border-bottom: clamp(10px, 1.85vmin, 28px) solid black;
}

#dialogue-box::before {
    content: '';
    position: absolute;
    top: clamp(-20px, -2.5vmin, -17px); left: 50%;
    transform: translateX(-50%);
    border-left:   clamp(7px, 1.2vmin, 18px) solid transparent;
    border-right:  clamp(7px, 1.2vmin, 18px) solid transparent;
    border-bottom: clamp(9px, 1.67vmin, 26px) solid white;
    z-index: 2;
}

/* Character name tag — ~1.8rem * 1.2 ≈ 34px at 1080p → ~3.1vmin */
#name-tag {
    font-family: var(--font-titles);
    font-size: clamp(12px, calc(3.1vmin * var(--font-multiplier)), 48px);
    margin-bottom: clamp(2px, 0.46vmin, 8px);
    letter-spacing: 0.05em;
}

#dialogue-text {
    color: #000;
    line-height: 1.4;
    font-weight: bold;
}

/* Thought/inner monologue — no tail */
#dialogue-box[data-character="mc"]::after,
#dialogue-box[data-character="mc"]::before { display: none; }

/* Narration box */
#dialogue-box[data-character="n"] {
    background: #fffd82;
    border-radius: 0;
    transform: translateX(-50%) skew(-2deg);
    width: 60%;
}
#dialogue-box[data-character="n"] #name-tag { display: none; }
#dialogue-box[data-character="n"]::after,
#dialogue-box[data-character="n"]::before  { display: none; }


/* ── Choice Overlay ────────────────────────────────────────── */
#choice-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.7);
    display: none; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 100;
}
#choice-overlay.active { display: flex; }

#choice-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.39vmin, 20px);
    width: 100%;
}

/* choice-btn ~1.5rem*1.2 ≈ 29px → 2.7vmin; padding ~15px 40px */
.choice-btn {
    font-family: var(--font-titles);
    background: white;
    border: var(--comic-border);
    padding: clamp(8px, 1.39vmin, 20px) clamp(16px, 3.7vmin, 60px);
    margin: clamp(4px, 0.93vmin, 14px);
    font-size: clamp(11px, calc(2.7vmin * var(--font-multiplier)), 40px);
    cursor: pointer;
    transition: transform 0.1s;
    width: 100%;
    max-width: clamp(280px, 46.3vmin, 700px);
}
.choice-btn:hover { background: #ffde00; transform: scale(1.1) rotate(-1deg); }


/* ── UI Elements ────────────────────────────────────────────── */
#game-topbar {
    position: absolute;
    top: clamp(4px, 0.93vmin, 14px);
    right: clamp(4px, 0.93vmin, 14px);
    display: flex;
    gap: clamp(3px, 0.46vmin, 8px);
    opacity: 0; transition: opacity 0.3s;
}
#game-topbar.show { opacity: 1; }

/* topbar-btn: ~1.2rem*1.2 ≈ 23px → 2.1vmin; padding ~5px 15px */
.topbar-btn, .menu-btn {
    font-family: var(--font-titles);
    background: white;
    border: clamp(1px, 0.19vmin, 3px) solid black;
    padding: clamp(3px, 0.46vmin, 8px) clamp(7px, 1.39vmin, 22px);
    cursor: pointer;
    font-size: clamp(9px, calc(2.1vmin * var(--font-multiplier)), 32px);
}

/* continue arrow — ~1.5rem → 2.2vmin */
#continue-indicator {
    position: absolute;
    bottom: clamp(5px, 0.93vmin, 14px);
    right: clamp(14px, 2.78vmin, 42px);
    font-size: clamp(10px, 2.2vmin, 32px);
    color: #000;
    animation: bounce 0.5s infinite alternate;
    display: none;
}
#continue-indicator.show { display: block; }

@keyframes bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(clamp(-3px, -0.46vmin, -2px)); }
}


/* ── Menu Screen ────────────────────────────────────────────── */

/* Title Screen Character Art */
.menu-art-left,
.menu-art-right {
    position: absolute;
    width: 32%;
    height: 100%;
    z-index: 4;
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    pointer-events: none;
    filter: drop-shadow(clamp(3px,0.74vmin,12px) clamp(3px,0.74vmin,12px) 0px black);
    transition: transform 0.3s ease-out;
}

.menu-art-left {
    top: 15%; left: 6%;
    width: 38%; height: 55%;
    background-image: url('graphics/other/titlevera.png');
    transform: rotate(-3deg);
}

.menu-art-right {
    top: 30%; right: 5%;
    width: 38%; height: 55%;
    background-image: url('graphics/other/titlevera2.png');
    transform: rotate(3deg);
}

/* First (old) #screen-menu block is superseded by the second one below */
#screen-menu {
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Classic Comic Action Burst & Halftone Dots */
.menu-bg-art {
    position: absolute;
    inset: 0;
    background: #ff4444;
}

.menu-bg-art::after {
    content: '';
    position: absolute;
    inset: -50%;
    background: repeating-conic-gradient(
        #ff4444 0 15deg,
        #e63939 15deg 30deg
    );
    animation: spin-burst 60s linear infinite;
    transform-origin: center;
}

#screen-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    /* dot size and grid scale with viewport */
    background-image: radial-gradient(circle, rgba(0,0,0,0.25) clamp(1px,0.19vmin,3px), transparent clamp(1.5px,0.23vmin,4px));
    background-size: clamp(7px,1.3vmin,20px) clamp(7px,1.3vmin,20px);
    pointer-events: none;
    z-index: 1;
}

@keyframes spin-burst {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.menu-content {
    position: relative;
    z-index: 5;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Eyebrow label — ~1.5rem*1.2 ≈ 29px → 2.7vmin; padding ~5px 20px */
.menu-eyebrow {
    font-family: var(--font-titles);
    font-size: clamp(11px, calc(2.7vmin * var(--font-multiplier)), 42px);
    background: black;
    color: white;
    display: inline-block;
    padding: clamp(3px, 0.46vmin, 8px) clamp(9px, 1.85vmin, 28px);
    transform: rotate(-3deg);
    margin-bottom: clamp(-12px, -1.85vmin, -8px);
    position: relative;
    z-index: 10;
    border: var(--comic-border);
    box-shadow: clamp(2px,0.37vmin,6px) clamp(2px,0.37vmin,6px) 0px rgba(0,0,0,0.5);
}

/* Big title — ~7rem*1.2 ≈ 134px → 12.4vmin */
.menu-title {
    font-family: var(--font-titles);
    font-size: clamp(32px, calc(12.4vmin * var(--font-multiplier)), 190px);
    color: white;
    text-transform: uppercase;
    -webkit-text-stroke: clamp(1px, 0.28vmin, 5px) black;
    text-shadow:
        clamp(2px,0.46vmin,8px)   clamp(2px,0.46vmin,8px)   0px #ffde00,
        clamp(5px,0.93vmin,15px)  clamp(5px,0.93vmin,15px)  0px black;
    transform: rotate(-2deg);
    line-height: 1;
    margin-bottom: clamp(16px, 3.7vmin, 56px);
}

.menu-title-line { display: none; }

/* Menu buttons container */
.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.85vmin, 28px);
    margin-top: clamp(4px, 0.93vmin, 14px);
    width: 100%;
    max-width: clamp(160px, 32.4vmin, 490px);
}

/* Menu button — ~2rem*1.2 ≈ 38px → 3.5vmin; padding ~12px 30px */
.menu-btn {
    font-family: var(--font-titles);
    font-size: clamp(14px, calc(3.5vmin * var(--font-multiplier)), 54px);
    background: white;
    border: clamp(2px, 0.37vmin, 6px) solid black;
    padding: clamp(6px, 1.11vmin, 18px) clamp(12px, 2.78vmin, 44px);
    cursor: pointer;
    box-shadow: clamp(3px,0.56vmin,9px) clamp(3px,0.56vmin,9px) 0px black;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-transform: uppercase;
}

.menu-btn:nth-child(odd)  { transform: rotate(-2deg); }
.menu-btn:nth-child(even) { transform: rotate(1.5deg); }

/* Primary button — ~2.5rem*1.2 ≈ 48px → 4.4vmin; padding ~15px 30px */
.menu-btn.primary {
    background: #ffde00;
    font-size: clamp(18px, calc(4.4vmin * var(--font-multiplier)), 68px);
    padding: clamp(8px, 1.39vmin, 22px) clamp(12px, 2.78vmin, 44px);
}

.menu-btn:hover {
    transform: scale(1.1) rotate(0deg);
    background: #00e5ff;
    color: black;
    box-shadow: clamp(5px,0.93vmin,15px) clamp(5px,0.93vmin,15px) 0px black;
}
.menu-btn.primary:hover { background: #ff4444; color: white; }
.menu-btn:disabled {
    background: #ccc; color: #888;
    box-shadow: none; transform: none;
    cursor: not-allowed; border-color: #888;
}


/* ── Tesla Arc Canvas ───────────────────────────────────────── */
#tesla-arc-canvas {
    position: absolute;
    inset: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 3;
}

/* Version label — ~1.2rem → 1.76vmin */
.menu-version {
    position: absolute;
    bottom: clamp(6px, 1.39vmin, 20px);
    right: clamp(9px, 1.85vmin, 28px);
    font-family: var(--font-titles);
    font-size: clamp(8px, 1.76vmin, 26px);
    color: white;
    -webkit-text-stroke: clamp(0.5px, 0.09vmin, 1.5px) black;
    z-index: 5;
}


/* ── Social / Creator Bar ───────────────────────────────────── */
#social-bar {
    position: absolute;
    bottom: clamp(5px, 1.11vmin, 17px);
    left: clamp(6px, 1.3vmin, 20px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(3px, 0.56vmin, 9px);
}

/* Social label — ~1rem*1.2 ≈ 19px → 1.76vmin */
.social-label {
    font-family: var(--font-titles);
    font-size: clamp(8px, calc(1.76vmin * var(--font-multiplier)), 26px);
    background: #fffd82;
    color: #000;
    border: clamp(1px, 0.28vmin, 4px) solid #000;
    padding: clamp(1px, 0.19vmin, 3px) clamp(5px, 0.93vmin, 14px) clamp(1px, 0.19vmin, 3px) clamp(4px, 0.74vmin, 11px);
    transform: skew(-2deg) rotate(-1deg);
    box-shadow: clamp(1px,0.28vmin,4px) clamp(1px,0.28vmin,4px) 0px #000;
    letter-spacing: 0.05em;
    /* nudge right to clear avatar (scales with icon size) */
    margin-left: 0;
    white-space: nowrap;
}

.social-icons {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: clamp(4px, 0.74vmin, 11px);
}

/* Social icons — ~115×115px at 1080p → 10.6vmin */
.social-icon {
    display: flex;
    align-items: center; justify-content: center;
    width: clamp(36px, 10.6vmin, 160px);
    height: clamp(36px, 10.6vmin, 160px);
    background: white;
    border: clamp(1px, 0.28vmin, 4px) solid #000;
    box-shadow: clamp(2px,0.37vmin,6px) clamp(2px,0.37vmin,6px) 0px #000;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.12s ease,
                background 0.12s ease;
    text-decoration: none;
}

.social-icon img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    image-rendering: auto;
}

/* Avatar — ~150×150px at 1080p → 13.9vmin */
.social-icon.avatar-icon {
    width: clamp(48px, 13.9vmin, 210px);
    height: clamp(48px, 13.9vmin, 210px);
    cursor: default;
    transform: rotate(-2deg);
}

a.social-icon:hover {
    transform: scale(1.15) rotate(2deg);
    box-shadow: clamp(3px,0.56vmin,9px) clamp(3px,0.56vmin,9px) 0px #000;
    background: #ffde00;
}


/* ── Overlay screens ────────────────────────────────────────── */
#fade-overlay {
    position: absolute; inset: 0;
    background: black; opacity: 0;
    pointer-events: none; z-index: 99;
}

#toast {
    position: absolute;
    bottom: clamp(9px, 1.85vmin, 28px);
    left: clamp(9px, 1.85vmin, 28px);
    background: black; color: white;
    padding: clamp(5px, 0.93vmin, 14px) clamp(9px, 1.85vmin, 28px);
    transform: translateY(100px); transition: 0.3s;
}
#toast.show { transform: translateY(0); }

#confirm-dialog {
    display: none;
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.8);
    z-index: 200;
    align-items: center; justify-content: center;
}
#confirm-dialog.active { display: flex; }


/* ── Save / Load / Settings Screens ─────────────────────────── */
#screen-save, #screen-load, #screen-settings {
    background: #f0f0f0;
    z-index: 60;
    display: none;
    flex-direction: column;
}
#screen-save.active, #screen-load.active, #screen-settings.active { display: flex; }

.saveload-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: clamp(7px, 1.39vmin, 20px) clamp(14px, 2.78vmin, 42px);
    border-bottom: var(--comic-border);
    background: white;
}

/* ~3rem*1.2 ≈ 58px → 5.3vmin */
.saveload-title {
    font-family: var(--font-titles);
    font-size: clamp(18px, calc(5.3vmin * var(--font-multiplier)), 80px);
    -webkit-text-stroke: clamp(0.5px, 0.09vmin, 1.5px) black;
    color: #ffde00;
    text-shadow: clamp(1px,0.28vmin,5px) clamp(1px,0.28vmin,5px) 0px rgba(0,0,0,0.8);
    letter-spacing: 0.08em;
}
.saveload-title em { font-style: normal; }

/* ~1.5rem*1.2 ≈ 29px → 2.7vmin */
.saveload-close {
    font-family: var(--font-titles);
    font-size: clamp(11px, calc(2.7vmin * var(--font-multiplier)), 42px);
    background: white; border: var(--comic-border);
    padding: clamp(3px, 0.46vmin, 8px) clamp(9px, 1.85vmin, 28px);
    cursor: pointer; transition: transform 0.1s;
    box-shadow: clamp(1px,0.28vmin,4px) clamp(1px,0.28vmin,4px) 0px rgba(0,0,0,1);
}
.saveload-close:hover { background: #ff4444; color: white; transform: scale(1.1) rotate(2deg); }

/* Slot grid — gap/padding scale */
.slot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 2.3vmin, 35px);
    padding: clamp(14px, 2.78vmin, 42px);
    overflow-y: auto; flex: 1;
}

.save-slot {
    background: white; border: var(--comic-border);
    padding: clamp(7px, 1.39vmin, 20px);
    display: flex; flex-direction: column;
    gap: clamp(2px, 0.46vmin, 8px);
    cursor: pointer;
    min-height: clamp(60px, 11.1vmin, 168px);
    position: relative;
    box-shadow: var(--comic-shadow);
    transition: transform 0.1s, background 0.1s;
}
.save-slot:hover { transform: translateY(clamp(-3px,-0.46vmin,-2px)); background: #ffde00; }
.save-slot.empty { opacity: 0.7; justify-content: center; align-items: center; background: #ddd; box-shadow: none; }
.save-slot.empty:hover { opacity: 1; background: white; box-shadow: var(--comic-shadow); }

/* slot text — ~1.5rem → 2.2vmin */
.slot-number     { font-family: var(--font-titles); font-size: clamp(10px, 2.2vmin, 32px); color: #ff4444; -webkit-text-stroke: clamp(0.5px, 0.09vmin, 1.5px) black; }
.slot-scene      { font-weight: bold; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.slot-date       { font-size: clamp(7px, 0.83vmin, 13px); color: #555; }
.slot-empty-label{ font-family: var(--font-titles); font-size: clamp(10px, 2.2vmin, 32px); color: #666; }

.slot-delete-btn {
    position: absolute;
    top: clamp(2px, 0.46vmin, 8px);
    right: clamp(2px, 0.46vmin, 8px);
    background: #ff4444; color: white;
    border: clamp(1px, 0.19vmin, 3px) solid black;
    font-family: var(--font-titles);
    font-size: clamp(7px, 0.93vmin, 14px);
    cursor: pointer; display: none;
    padding: clamp(1px, 0.19vmin, 3px) clamp(4px, 0.74vmin, 11px);
}
.save-slot:hover .slot-delete-btn { display: block; }
.slot-delete-btn:hover { background: black; color: white; }


/* ── Settings Screen ─────────────────────────────────────────── */
.settings-body {
    padding: clamp(14px, 2.78vmin, 42px);
    overflow-y: auto;
    display: flex; flex-direction: column;
    gap: clamp(9px, 1.85vmin, 28px);
}
.settings-section {
    background: white; border: var(--comic-border);
    padding: clamp(9px, 1.85vmin, 28px);
    box-shadow: var(--comic-shadow);
}
/* ~2rem → 2.96vmin */
.settings-section-title {
    font-family: var(--font-titles);
    font-size: clamp(12px, 2.96vmin, 44px);
    border-bottom: clamp(1px, 0.28vmin, 4px) solid black;
    margin-bottom: clamp(7px, 1.39vmin, 20px);
}
.settings-row {
    display: flex; justify-content: space-between;
    margin-bottom: clamp(5px, 0.93vmin, 14px);
    font-weight: bold; align-items: center;
}


/* ── Confirm Dialog ─────────────────────────────────────────── */
.confirm-box {
    background: white; border: var(--comic-border);
    padding: clamp(14px, 2.78vmin, 42px);
    text-align: center; box-shadow: var(--comic-shadow);
    display: flex; flex-direction: column;
    gap: clamp(9px, 1.85vmin, 28px);
}

/* ~2rem*1.2 ≈ 38px → 3.5vmin */
.confirm-message {
    font-family: var(--font-titles);
    font-size: clamp(14px, calc(3.5vmin * var(--font-multiplier)), 54px);
}

.confirm-buttons {
    display: flex; justify-content: center;
    gap: clamp(9px, 1.85vmin, 28px); width: 100%;
}

/* ~1.5rem*1.2 ≈ 29px → 2.7vmin; padding ~10px 40px */
.confirm-btn {
    font-family: var(--font-titles);
    font-size: clamp(11px, calc(2.7vmin * var(--font-multiplier)), 42px);
    padding: clamp(5px, 0.93vmin, 14px) clamp(18px, 3.7vmin, 56px);
    cursor: pointer; border: var(--comic-border);
    transition: transform 0.1s; background: white;
    box-shadow: clamp(1px,0.28vmin,4px) clamp(1px,0.28vmin,4px) 0px rgba(0,0,0,1);
}
.confirm-btn.yes:hover { background: #55ff55; transform: scale(1.1) rotate(-2deg); }
.confirm-btn.no:hover  { background: #ff4444; color: white; transform: scale(1.1) rotate(2deg); }


/* ── Utility ─────────────────────────────────────────────────── */
.hidden { display: none !important; }




#subscription-wall-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
}
#subscription-wall-overlay.active {
  display: flex;
}
 
.subscription-wall-box {
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 16px;
  padding: 40px 36px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
 
.subscription-wall-lock {
  font-size: 2.8rem;
  line-height: 1;
}
 
.subscription-wall-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e2d9f3;
}
 
.subscription-wall-message {
  font-size: 0.92rem;
  color: rgba(220,220,240,0.75);
  line-height: 1.5;
  margin: 0;
}
 
.subscription-wall-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: #05CC47;
  color: #000;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  margin-top: 4px;
}
.subscription-wall-btn:hover  { background: #00e050; transform: translateY(-1px); }
.subscription-wall-btn:active { transform: translateY(0); }
 
.subscription-wall-status {
  font-size: 0.85rem;
  min-height: 1.2em;
  color: rgba(200,200,220,0.7);
  margin: 0;
}
.subscription-wall-status.error { color: #ff6b6b; }
 
.subscription-wall-link {
  font-size: 0.82rem;
  color: rgba(167,139,250,0.8);
  text-decoration: none;
  border-bottom: 1px dashed rgba(167,139,250,0.4);
  transition: color 0.15s;
}
.subscription-wall-link:hover { color: #a78bfa; }