/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; height:100%; }

body {
    font-family: 'Fredoka', sans-serif;
    background: #e8e3da;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── CSS Variables ─────────────────────────────────────── */
:root {
    --cream:    #faf8f4;
    --cream2:   #f0ece4;
    --ink:      #18150f;
    --ink2:     #4a4035;
    --ink3:     #9a9088;
    --purple:   #6d28d9;
    --purple-l: #ede9fe;
    --lime:     #15803d;
    --lime-l:   #dcfce7;
    --coral:    #c2410c;
    --coral-l:  #ffedd5;
    --sky:      #0369a1;
    --sky-l:    #e0f2fe;
    --pink:     #be185d;
    --pink-l:   #fce7f3;
    --amber:    #b45309;
    --amber-l:  #fef3c7;
    --teal:     #0f766e;
    --teal-l:   #ccfbf1;
    --shadow-border: 4px 4px 0 var(--ink);
}

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes heroFloat {
    0%,100% { transform: translateY(0) rotate(-2deg) scale(1); }
    50%      { transform: translateY(-10px) rotate(2deg) scale(1.06); }
}
@keyframes bounceIn {
    0%   { transform: scale(0) rotate(-8deg); opacity:0; }
    60%  { transform: scale(1.12) rotate(3deg); opacity:1; }
    80%  { transform: scale(0.95) rotate(-1deg); }
    100% { transform: scale(1) rotate(0); opacity:1; }
}
@keyframes fadeUp {
    from { transform: translateY(14px); opacity:0; }
    to   { transform: translateY(0);    opacity:1; }
}
@keyframes popIn {
    0%   { transform: scale(0.75) translateY(6px); opacity:0; }
    70%  { transform: scale(1.05) translateY(-2px); opacity:1; }
    100% { transform: scale(1) translateY(0); opacity:1; }
}
@keyframes wiggle {
    0%,100% { transform: rotate(0); }
    25%     { transform: rotate(-14deg); }
    75%     { transform: rotate(14deg); }
}
@keyframes pulseGlow {
    0%,100% { box-shadow: var(--shadow-border); }
    50%     { box-shadow: 4px 4px 0 var(--ink), 0 0 20px rgba(109,40,217,.35); }
}
@keyframes toastIn {
    from { transform: translateX(-50%) translateY(-60px) scale(.9); opacity:0; }
    to   { transform: translateX(-50%) translateY(0)     scale(1);  opacity:1; }
}
@keyframes toastOut {
    from { transform: translateX(-50%) translateY(0)     scale(1);   opacity:1; }
    to   { transform: translateX(-50%) translateY(-60px) scale(.85); opacity:0; }
}
@keyframes confettiFall {
    0%   { transform: translateY(-10px) rotate(0deg);   opacity:1; }
    100% { transform: translateY(130px) rotate(720deg); opacity:0; }
}
@keyframes particleBurst {
    0%   { transform: translate(0,0) scale(1); opacity:1; }
    100% { transform: translate(var(--tx),var(--ty)) scale(0); opacity:0; }
}
@keyframes countUp {
    from { transform: scale(1.4); color: gold; }
    to   { transform: scale(1);   color: inherit; }
}
@keyframes barPulse {
    0%,100% { opacity:1; }
    50%     { opacity:.55; }
}
@keyframes staggerIn {
    from { opacity:0; transform: translateY(10px) scale(.95); }
    to   { opacity:1; transform: translateY(0)    scale(1); }
}
@keyframes orbitFloat {
    0%,100% { transform: translateY(0)    rotate(0deg); }
    50%     { transform: translateY(-8px) rotate(180deg); }
}
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes slideUp {
    from { transform: translateY(20px); opacity:0; }
    to   { transform: translateY(0);    opacity:1; }
}

/* ── App shell ─────────────────────────────────────────── */
.app {
    width: 100%;
    max-width: 430px;
    height: 100svh;
    height: 100vh;
    background: var(--cream);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

@media (min-width: 500px) {
    .app {
        height: min(100vh, 900px);
        border-radius: 28px;
        box-shadow: 0 32px 64px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
        overflow: hidden;
    }
}

/* ── Screens ───────────────────────────────────────────── */
.screen { display:none; flex-direction:column; height:100%; overflow:hidden; }
.screen.active { display:flex; animation: slideUp .35s cubic-bezier(.34,1.2,.64,1); }

/* ── Toast ─────────────────────────────────────────────── */
.toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-80px);
    z-index: 9999;
    background: var(--ink);
    color: #fff;
    border-radius: 16px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    pointer-events: none;
}
.toast.show  { animation: toastIn  .35s cubic-bezier(.34,1.56,.64,1) forwards; }
.toast.hide  { animation: toastOut .25s ease-in forwards; }

/* ── Confetti ──────────────────────────────────────────── */
.confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
}

/* ── SETTINGS SCREEN ───────────────────────────────────── */

/* Hero header */
.hero-header {
    background: var(--purple);
    flex-shrink: 0;
    padding: 28px 20px 22px;
    border-bottom: 3px solid var(--ink);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.hero-orb {
    position: absolute;
    animation: orbitFloat 2.5s ease-in-out infinite;
    opacity: .75;
}
.orb-1 { top:12px; right:18px;  font-size:18px; animation-duration:2.2s; animation-delay:0s; }
.orb-2 { top:18px; right:60px;  font-size:14px; animation-duration:3.1s; animation-delay:.4s; }
.orb-3 { top:8px;  right:110px; font-size:12px; animation-duration:2.7s; animation-delay:.8s; }
.hero-emoji {
    font-size: 52px;
    display: block;
    margin-bottom: 10px;
    animation: heroFloat 3s ease-in-out infinite;
}
.hero-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    letter-spacing: .2px;
}
.hero-subtitle {
    color: rgba(255,255,255,.75);
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
}

/* Scrollable body */
.settings-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 15px 0;
    min-height: 0;
}

/* Block */
.block { margin-bottom: 20px; animation: staggerIn .35s both; }
.block:nth-child(1) { animation-delay:.05s; }
.block:nth-child(2) { animation-delay:.1s; }
.block:nth-child(3) { animation-delay:.15s; }

.block-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink2);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Character grid */
.char-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}
.char-card {
    background: #fff;
    border: 3px solid #ddd8cf;
    border-radius: 18px;
    padding: 13px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    position: relative;
    overflow: visible;
    transition: all .18s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 2px 2px 0 #ddd8cf;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.char-card:active { transform: scale(.96); }
.char-card.selected {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 4px 4px 0 var(--char-color, var(--ink));
    border-color: var(--char-color, var(--ink));
    background: var(--char-bg, var(--cream2));
    animation: bounceIn .45s cubic-bezier(.34,1.56,.64,1);
}
.char-check {
    position: absolute;
    top: -7px; right: -7px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--char-color, var(--ink));
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
    font-weight: 900;
    opacity: 0;
    transform: scale(0);
    transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.char-card.selected .char-check {
    opacity: 1;
    transform: scale(1);
    animation: bounceIn .3s cubic-bezier(.34,1.56,.64,1);
}
.char-emoji {
    font-size: 28px;
    line-height: 1;
    transition: transform .2s;
}
.char-card.selected .char-emoji {
    animation: none;
}
.char-name {
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: var(--ink2);
    line-height: 1.2;
    transition: color .15s;
}
.char-card.selected .char-name { color: var(--char-color, var(--ink)); }

/* Steps grid */
.steps-grid {
    display: flex;
    gap: 8px;
}
.step-btn {
    flex: 1;
    padding: 14px 4px;
    border-radius: 16px;
    border: 3px solid #ddd8cf;
    background: #fff;
    color: var(--ink2);
    font-size: 17px;
    font-weight: 700;
    font-family: 'Fredoka', sans-serif;
    cursor: pointer;
    box-shadow: 2px 2px 0 #ddd8cf;
    transition: all .15s cubic-bezier(.34,1.56,.64,1);
    -webkit-tap-highlight-color: transparent;
}
.step-btn.step-active {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
    box-shadow: 3px 3px 0 #666;
    transform: translateY(-2px);
}
.step-sub {
    font-size: 9px;
    font-weight: 600;
    margin-top: 1px;
    opacity: .7;
}

/* Length grid */
.len-grid {
    display: flex;
    gap: 8px;
}
.len-btn {
    flex: 1;
    padding: 13px 6px;
    border-radius: 16px;
    border: 3px solid #ddd8cf;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #ddd8cf;
    transition: all .15s cubic-bezier(.34,1.56,.64,1);
    -webkit-tap-highlight-color: transparent;
}
.len-btn.len-active {
    border-color: var(--len-color, var(--purple));
    background: var(--len-bg, var(--purple-l));
    box-shadow: 4px 4px 0 var(--len-color, var(--purple));
    transform: translateY(-2px);
}
.len-btn.len-active .len-emoji { animation: heroFloat 2s ease-in-out infinite; }
.len-emoji { font-size: 24px; }
.len-label { font-size: 12px; font-weight: 700; color: var(--ink2); font-family: 'Fredoka', sans-serif; }
.len-btn.len-active .len-label { color: var(--len-color, var(--purple)); }
.len-sub   { font-size: 9px; color: var(--ink3); font-weight: 600; }

/* Optional section */
.optional-wrap { animation: staggerIn .35s .2s both; margin-bottom: 12px; }
.optional-toggle {
    width: 100%;
    padding: 13px 15px;
    border-radius: 15px;
    border: 2.5px dashed #ccc8be;
    background: #fff;
    color: var(--ink3);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Fredoka', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    box-shadow: 2px 2px 0 #ddd8cf;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}
.toggle-arrow {
    display: inline-block;
    font-size: 18px;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.toggle-arrow.open { transform: rotate(180deg); }
.optional-content {
    display: none;
    animation: fadeUp .2s ease-out;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
}
.optional-content.open { max-height: 500px; }
.opt-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink3);
    text-transform: uppercase;
    letter-spacing: .4px;
    padding-left: 4px;
}
textarea, input[type="text"] {
    width: 100%;
    background: #fff;
    border: 3px solid #ddd8cf;
    border-radius: 14px;
    padding: 11px 13px;
    color: var(--ink);
    font-size: 14px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 500;
    resize: none;
    outline: none;
    box-shadow: 2px 2px 0 #ddd8cf;
    transition: border-color .15s;
    line-height: 1.6;
}
textarea:focus, input[type="text"]:focus { border-color: var(--purple); }

/* Token row */
.token-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    font-size: 14px;
    color: var(--ink3);
    font-weight: 600;
    margin-bottom: 8px;
}
.token-num { font-size: 20px; font-weight: 700; color: var(--ink2); }
.token-label { font-size: 13px; }

.cta-spacer { height: 90px; }

/* CTA */
.cta-wrap {
    flex-shrink: 0;
    padding: 14px 15px;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
    background: linear-gradient(to top, var(--cream) 75%, transparent);
    margin-top: -40px;
    position: relative;
    z-index: 10;
}
.cta-btn {
    width: 100%;
    padding: 17px;
    border-radius: 20px;
    border: 3px solid var(--ink);
    background: var(--purple);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Fredoka', sans-serif;
    letter-spacing: .2px;
    cursor: pointer;
    box-shadow: var(--shadow-border);
    transition: all .12s cubic-bezier(.34,1.2,.64,1);
    animation: pulseGlow 2s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.cta-btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.cta-btn:disabled {
    background: #e8e4df;
    border-color: #ccc;
    color: var(--ink3);
    cursor: not-allowed;
    animation: none;
    box-shadow: none;
}

/* ── STORY SCREEN ──────────────────────────────────────── */

/* Top bar */
.story-topbar {
    flex-shrink: 0;
    background: var(--purple);
    padding: 12px 14px 10px;
    border-bottom: 3px solid var(--ink);
    transition: background .3s;
}
.topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}
.topbar-back {
    background: rgba(0,0,0,.18);
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 11px;
    padding: 6px 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Fredoka', sans-serif;
    cursor: pointer;
    transition: all .12s;
    -webkit-tap-highlight-color: transparent;
}
.topbar-back:active { transform: scale(.95); }

.topbar-stats { display: flex; gap: 7px; align-items: center; }

.streak-badge {
    background: rgba(255,255,255,.18);
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 10px;
    padding: 4px 10px;
    display: none;
    align-items: center;
    gap: 4px;
    animation: popIn .3s cubic-bezier(.34,1.56,.64,1);
}
.streak-badge.show { display: flex; }
.streak-fire { font-size: 13px; }
#streak-count { font-size: 13px; font-weight: 700; color: #fff; }

.xp-badge {
    background: rgba(0,0,0,.18);
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 10px;
    padding: 5px 11px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
#xp-count { transition: transform .2s; }
#xp-count.pop { animation: countUp .3s ease-out; }

/* Segmented progress */
.progress-segs {
    display: flex;
    gap: 4px;
    margin-bottom: 5px;
}
.seg {
    flex: 1;
    height: 8px;
    min-width: 4px;
    border-radius: 5px;
    background: rgba(0,0,0,.2);
    transition: background .4s ease;
}
.seg.filled {
    background: #fff;
    box-shadow: 0 0 6px rgba(255,255,255,.5);
}
.seg.pulse { animation: barPulse 1s ease-in-out 3; }
.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: rgba(255,255,255,.65);
    font-weight: 600;
}

/* Story scroll */
.story-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px 0;
    min-height: 0;
}

/* Story card */
.story-card {
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 22px;
    padding: 20px 18px;
    box-shadow: 5px 5px 0 var(--ink);
    position: relative;
    transition: opacity .28s ease, transform .28s ease;
}
.story-card.fading {
    opacity: 0;
    transform: translateY(8px) scale(.97);
}
.char-bubble {
    position: absolute;
    top: -16px; left: 18px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 3px solid var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 2px 2px 0 var(--ink);
    animation: heroFloat 3s ease-in-out infinite;
}
.story-text {
    font-size: 15px;
    line-height: 1.85;
    color: var(--ink);
    font-weight: 500;
    margin-top: 8px;
}

/* Loading */
.story-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px;
    color: var(--ink3);
    font-size: 14px;
    font-weight: 600;
}
.spinner {
    width: 22px; height: 22px;
    border: 3px solid #e9ecef;
    border-top-color: var(--purple);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Choices */
.choices-wrap {
    flex-shrink: 0;
    padding: 10px 14px;
    padding-bottom: max(18px, env(safe-area-inset-bottom, 18px));
}
.choices-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink3);
    text-align: center;
    margin-bottom: 9px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.choices-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    position: relative;
}

/* Choice button */
.choice-btn {
    background: #fff;
    border: 3px solid #ddd8cf;
    border-radius: 18px;
    padding: 13px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    min-height: 72px;
    box-shadow: 3px 3px 0 #ddd8cf;
    transition: all .18s cubic-bezier(.34,1.4,.64,1);
    font-family: 'Fredoka', sans-serif;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    animation: staggerIn .3s both;
}
.choice-btn:nth-child(2) { animation-delay:.06s; }
.choice-btn:nth-child(3) { animation-delay:.12s; }
.choice-btn:nth-child(4) { animation-delay:.18s; }

.choice-btn.chosen {
    transform: translate(2px,2px);
    box-shadow: 2px 2px 0 var(--choice-color, var(--ink));
    border-color: var(--choice-color, var(--ink));
    background: var(--choice-bg, var(--cream2));
}
.choice-btn.unchosen { opacity: .38; }
.choice-btn:disabled { cursor: default; }

.choice-emoji {
    font-size: 24px;
}
.choice-btn.chosen .choice-emoji { animation: wiggle .5s ease-in-out; }
.choice-text {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    text-align: center;
}
.choice-btn.chosen .choice-text { color: var(--choice-color, var(--ink)); }

/* Finish button */
.finish-btn {
    grid-column: 1 / -1;
    padding: 17px;
    border-radius: 20px;
    border: 3px solid var(--ink);
    background: var(--lime);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Fredoka', sans-serif;
    cursor: pointer;
    box-shadow: var(--shadow-border);
    animation: pulseGlow 2s ease-in-out infinite, staggerIn .3s both;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.finish-btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }

/* Particle burst */
.particle-burst {
    position: absolute;
    pointer-events: none;
    z-index: 10;
}
.particle {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 50%;
    animation: particleBurst .5s ease-out forwards;
}

/* ── ENDING CARD ───────────────────────────────────────── */
.ending-card {
    text-align: center;
    padding: 12px 6px 20px;
    animation: popIn .5s cubic-bezier(.34,1.56,.64,1);
}
.ending-trophy {
    font-size: 58px;
    animation: heroFloat 2s ease-in-out infinite;
    margin-bottom: 10px;
}
.ending-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}
.ending-sub {
    font-size: 14px;
    color: var(--ink2);
    font-weight: 500;
    margin-bottom: 18px;
}
.ending-stats {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.ending-stat {
    flex: 1;
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 18px;
    padding: 16px 8px;
    box-shadow: 4px 4px 0 var(--ink);
    animation: staggerIn .4s both;
}
.ending-stat:nth-child(2) { animation-delay:.1s; }
.ending-stat-icon { font-size: 26px; margin-bottom: 4px; animation: heroFloat 2.5s ease-in-out infinite; }
.ending-stat-val   { font-size: 22px; font-weight: 700; color: var(--ink); }
.ending-stat-label { font-size: 10px; color: var(--ink3); font-weight: 700; text-transform: uppercase; letter-spacing:.3px; }
.moral-lesson {
    background: var(--purple-l);
    border: 3px solid var(--purple);
    border-radius: 16px;
    padding: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--purple);
    margin-bottom: 16px;
    display: none;
}
.show-story-btn {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: 3px solid var(--ink);
    background: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Fredoka', sans-serif;
    color: var(--ink);
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--ink);
    transition: all .12s;
    margin-bottom: 10px;
    -webkit-tap-highlight-color: transparent;
}
.show-story-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.final-story {
    background: var(--cream2);
    border: 3px solid var(--ink);
    border-radius: 16px;
    padding: 16px;
    text-align: left;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink2);
    margin-bottom: 10px;
    animation: fadeUp .25s ease-out;
}

/* ── PAYWALL ───────────────────────────────────────────── */
.paywall-inner {
    flex: 1;
    overflow-y: auto;
    padding: 40px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.paywall-icon { font-size: 56px; animation: heroFloat 2.5s ease-in-out infinite; }
.paywall-title { font-size: 26px; font-weight: 700; color: var(--ink); }
.paywall-text  { font-size: 14px; color: var(--ink2); font-weight: 500; max-width: 280px; }
.paywall-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}
.paywall-card {
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 20px;
    padding: 20px 12px;
    box-shadow: 4px 4px 0 var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.paywall-card-icon { font-size: 32px; }
.paywall-card h3  { font-size: 16px; font-weight: 700; color: var(--ink); }
.paywall-card p   { font-size: 12px; color: var(--ink3); font-weight: 500; }
.secondary-btn {
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 16px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Fredoka', sans-serif;
    color: var(--ink);
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--ink);
    transition: all .12s;
    -webkit-tap-highlight-color: transparent;
}
.secondary-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }