/* Spoiler Vault Overlay — Base Styles (themes live in css/themes/) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&family=Rajdhani:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Archivo+Black&family=JetBrains+Mono:wght@500;600&family=IBM+Plex+Sans+Condensed:wght@500;600;700&display=swap');
@import url('themes/cyber-rose.css?v=1');
@import url('themes/ghost-shell.css?v=1');
@import url('themes/night-drop.css?v=1');
@import url('themes/steel-post.css?v=1');
@import url('themes/broadcaster.css?v=1');

:root {
    --sv-accent: #FF2E63;
    --sv-accent-light: #FF8FA3;
    --sv-accent-dark: #C9184A;
    --sv-accent-glow: rgba(255, 46, 99, 0.45);
    --sv-bg-panel: rgba(20, 8, 14, 0.94);
    --sv-bg-glass: rgba(32, 12, 22, 0.82);
    --sv-bg-elevated: rgba(48, 18, 32, 0.6);
    --sv-text-primary: #ffffff;
    --sv-text-secondary: #e8b8c6;
    --sv-text-muted: #a06b7e;
    --sv-border: rgba(255, 46, 99, 0.28);
    --sv-border-subtle: rgba(255, 255, 255, 0.06);
    --sv-radius: 16px;
    --sv-radius-sm: 10px;
    --sv-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 46, 99, 0.12);
    --sv-widget-offset-x: 24px;
    --sv-widget-offset-y: 24px;
    --sv-widget-scale: 1;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent !important;
    font-family: 'DM Sans', 'Rajdhani', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

#vault-root {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* ── Widget positioning ─────────────────────────────────────── */

#vault-widget {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transform-origin: center;
    z-index: 10;
}

#vault-reveal-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: min(520px, 40vw);
    z-index: 20;
}

#vault-toast {
    position: absolute;
    z-index: 30;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

#vault-toast.toast-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Position anchors — widget + reveal container + toast share the corner */
#vault-root.pos-top-left #vault-widget { top: var(--sv-widget-offset-y); left: var(--sv-widget-offset-x); }
#vault-root.pos-top-left #vault-reveal-container { top: calc(var(--sv-widget-offset-y) + 64px); left: var(--sv-widget-offset-x); align-items: flex-start; }
#vault-root.pos-top-left #vault-toast { top: var(--sv-widget-offset-y); left: var(--sv-widget-offset-x); }

#vault-root.pos-top-center #vault-widget { top: var(--sv-widget-offset-y); left: 50%; transform: translateX(-50%) scale(var(--sv-widget-scale)); }
#vault-root.pos-top-center #vault-reveal-container { top: calc(var(--sv-widget-offset-y) + 64px); left: 50%; transform: translateX(-50%); align-items: center; }
#vault-root.pos-top-center #vault-toast { top: var(--sv-widget-offset-y); left: 50%; transform: translateX(-50%); }
#vault-root.pos-top-center #vault-toast.toast-visible { transform: translateX(-50%); }

#vault-root.pos-top-right #vault-widget { top: var(--sv-widget-offset-y); right: var(--sv-widget-offset-x); }
#vault-root.pos-top-right #vault-reveal-container { top: calc(var(--sv-widget-offset-y) + 64px); right: var(--sv-widget-offset-x); align-items: flex-end; }
#vault-root.pos-top-right #vault-toast { top: var(--sv-widget-offset-y); right: var(--sv-widget-offset-x); }

#vault-root.pos-middle-left #vault-widget { top: 50%; left: var(--sv-widget-offset-x); transform: translateY(-50%) scale(var(--sv-widget-scale)); }
#vault-root.pos-middle-left #vault-reveal-container { top: 50%; left: var(--sv-widget-offset-x); transform: translateY(calc(-50% + 48px)); align-items: flex-start; }
#vault-root.pos-middle-left #vault-toast { top: 50%; left: var(--sv-widget-offset-x); }

#vault-root.pos-middle-right #vault-widget { top: 50%; right: var(--sv-widget-offset-x); transform: translateY(-50%) scale(var(--sv-widget-scale)); }
#vault-root.pos-middle-right #vault-reveal-container { top: 50%; right: var(--sv-widget-offset-x); transform: translateY(calc(-50% + 48px)); align-items: flex-end; }
#vault-root.pos-middle-right #vault-toast { top: 50%; right: var(--sv-widget-offset-x); }

#vault-root.pos-bottom-left #vault-widget { bottom: var(--sv-widget-offset-y); left: var(--sv-widget-offset-x); }
#vault-root.pos-bottom-left #vault-reveal-container { bottom: calc(var(--sv-widget-offset-y) + 64px); left: var(--sv-widget-offset-x); align-items: flex-start; flex-direction: column-reverse; }
#vault-root.pos-bottom-left #vault-toast { bottom: var(--sv-widget-offset-y); left: var(--sv-widget-offset-x); }

#vault-root.pos-bottom-center #vault-widget { bottom: var(--sv-widget-offset-y); left: 50%; transform: translateX(-50%) scale(var(--sv-widget-scale)); }
#vault-root.pos-bottom-center #vault-reveal-container { bottom: calc(var(--sv-widget-offset-y) + 64px); left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
#vault-root.pos-bottom-center #vault-toast { bottom: var(--sv-widget-offset-y); left: 50%; transform: translateX(-50%); }
#vault-root.pos-bottom-center #vault-toast.toast-visible { transform: translateX(-50%); }

#vault-root.pos-bottom-right #vault-widget { bottom: var(--sv-widget-offset-y); right: var(--sv-widget-offset-x); }
#vault-root.pos-bottom-right #vault-reveal-container { bottom: calc(var(--sv-widget-offset-y) + 64px); right: var(--sv-widget-offset-x); align-items: flex-end; flex-direction: column-reverse; }
#vault-root.pos-bottom-right #vault-toast { bottom: var(--sv-widget-offset-y); right: var(--sv-widget-offset-x); }

/* Non-centered anchors apply scale directly */
#vault-root.pos-top-left #vault-widget,
#vault-root.pos-top-right #vault-widget,
#vault-root.pos-bottom-left #vault-widget,
#vault-root.pos-bottom-right #vault-widget {
    transform: scale(var(--sv-widget-scale));
}
#vault-root.pos-top-left #vault-widget { transform-origin: top left; }
#vault-root.pos-top-right #vault-widget { transform-origin: top right; }
#vault-root.pos-bottom-left #vault-widget { transform-origin: bottom left; }
#vault-root.pos-bottom-right #vault-widget { transform-origin: bottom right; }

/* ── Widget internals ───────────────────────────────────────── */

.vault-widget-icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.vault-widget-icon svg {
    width: 100%;
    height: 100%;
}

.vault-widget-icon .lock-body {
    fill: var(--sv-accent);
}

.vault-widget-icon .lock-shackle {
    stroke: var(--sv-accent-light);
    stroke-width: 2.2;
    stroke-linecap: round;
    fill: none;
}

.vault-widget-icon .lock-keyhole {
    fill: var(--sv-bg-panel);
    stroke: var(--sv-bg-panel);
    stroke-width: 1.4;
    stroke-linecap: round;
}

.vault-widget-text {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    white-space: nowrap;
}

#vault-count {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.vault-widget-label {
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: lowercase;
}

/* Widget flash on bank */
@keyframes vault-flash {
    0% { filter: brightness(1); }
    25% { filter: brightness(2.2) drop-shadow(0 0 18px var(--sv-accent-glow)); }
    100% { filter: brightness(1); }
}

#vault-widget.widget-flash {
    animation: vault-flash 0.8s ease;
}

@keyframes vault-pulse {
    0%, 100% { transform: scale(var(--sv-widget-scale)); }
    50% { transform: scale(calc(var(--sv-widget-scale) * 1.08)); }
}

#vault-widget.widget-flash #vault-widget-icon {
    animation: vault-icon-wiggle 0.8s ease;
}

@keyframes vault-icon-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-12deg); }
    60% { transform: rotate(9deg); }
}

/* ── Hint cards ─────────────────────────────────────────────── */

.vault-hint-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.vault-card-accent {
    position: relative;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--sv-accent-dark) 0%, var(--sv-accent) 45%, var(--sv-accent-light) 100%);
    box-shadow: 0 0 16px var(--sv-accent-glow);
}

.vault-hint-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vault-hint-author {
    font-weight: 700;
    color: var(--sv-accent-light);
}

.vault-hint-author::before {
    content: '\f023';
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
    margin-right: 7px;
    font-size: 0.82em;
    color: var(--sv-accent);
}

.vault-hint-time {
    color: var(--sv-text-muted);
    font-size: 0.8em;
    font-weight: 500;
}

.vault-hint-text {
    color: var(--sv-text-primary);
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.vault-hint-text .decrypt-char {
    display: inline-block;
}

/* ── Entrance animations ────────────────────────────────────── */

@keyframes sv-card-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sv-card-slide-up-in {
    from { opacity: 0; transform: translateY(36px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sv-card-pop-in {
    0% { opacity: 0; transform: scale(0.6); }
    60% { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

.vault-hint-card.anim-fade { animation: sv-card-fade-in 0.55s ease both; }
.vault-hint-card.anim-slide-up { animation: sv-card-slide-up-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.vault-hint-card.anim-pop { animation: sv-card-pop-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.vault-hint-card.anim-typewriter,
.vault-hint-card.anim-decrypt { opacity: 0; }
.vault-hint-card.anim-typewriter.card-visible,
.vault-hint-card.anim-decrypt.card-visible { opacity: 1; }

/* ── Exit animation ─────────────────────────────────────────── */

@keyframes sv-card-exit {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-14px); }
}

.vault-hint-card.card-exiting {
    animation: sv-card-exit 0.4s ease both;
}

/* ── Size variants ──────────────────────────────────────────── */

#vault-root.size-small #vault-widget { font-size: 0.85rem; padding: 8px 14px; }
#vault-root.size-small #vault-count { font-size: 1.25rem; }
#vault-root.size-small .vault-hint-card { font-size: 0.85rem; }

#vault-root.size-standard #vault-widget { font-size: 1rem; padding: 10px 18px; }
#vault-root.size-standard #vault-count { font-size: 1.6rem; }
#vault-root.size-standard .vault-hint-card { font-size: 1rem; }

#vault-root.size-large #vault-widget { font-size: 1.2rem; padding: 13px 22px; }
#vault-root.size-large #vault-count { font-size: 2rem; }
#vault-root.size-large .vault-hint-card { font-size: 1.15rem; }

.vault-hint-card {
    font-size: 1rem;
}