/* ══════════════════════════════════════════════════════
   PlumbMate Flashcard Theme — Shared across all units
   Detects unit automatically via flashcard-theme.js
   ══════════════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ── CSS Variables (set dynamically by JS per unit) ── */
:root {
    --fc-primary: #3b82f6;
    --fc-primary-light: #eff6ff;
    --fc-primary-dark: #1e40af;
    --fc-bg: #eef3fa;
    --fc-grid-color: rgba(59,130,246,0.06);
    --fc-grid-strong: rgba(59,130,246,0.10);
    --fc-navy: #1a2744;
    --fc-navy-light: #243556;
    --fc-text-dark: #1e293b;
    --fc-text-mid: #475569;
    --fc-text-light: #94a3b8;
    --fc-green: #22c55e;
    --fc-green-dark: #16a34a;
    --fc-red: #ef4444;
    --fc-card-bg: rgba(255,255,255,0.92);
    --fc-card-border: rgba(59,130,246,0.08);
    --fc-shadow-sm: 0 2px 8px rgba(26,39,68,0.06);
    --fc-shadow-md: 0 8px 32px rgba(26,39,68,0.10);
    --fc-shadow-lg: 0 16px 48px rgba(26,39,68,0.16);
    --fc-radius: 16px;
}

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

body {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif !important;
    background: var(--fc-bg) !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    color: var(--fc-text-dark);
    position: relative;
}

/* ── Blueprint Grid Background (injected by JS) ── */
#flashcard-blueprint-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}

/* Ensure content sits above background */
.header, .progress-bar, .progress-text, .container, .stats {
    position: relative; z-index: 1;
}

/* ── Header ── */
.header {
    text-align: center;
    margin-bottom: 28px;
}

.header a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--fc-primary) !important;
    text-decoration: none !important;
    margin-bottom: 16px !important;
    opacity: 1 !important;
    font-weight: 600;
    font-size: 0.9em;
    background: var(--fc-card-bg);
    backdrop-filter: blur(12px);
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid var(--fc-card-border);
    transition: all 0.2s !important;
}
.header a:hover { 
    background: var(--fc-primary-light); 
    border-color: var(--fc-primary);
    transform: translateX(-3px);
}

/* Unit Icon Badge (injected by JS above title) */
.unit-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    font-size: 2em;
    background: var(--fc-card-bg);
    backdrop-filter: blur(12px);
    border: 2px solid var(--fc-primary);
    border-radius: 50%;
    margin-bottom: 14px;
    box-shadow: 0 4px 20px rgba(59,130,246,0.12);
}

.header h1 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.8em !important;
    font-weight: 800 !important;
    color: var(--fc-navy) !important;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.header p {
    font-size: 1em !important;
    color: var(--fc-text-mid) !important;
    font-weight: 500;
    opacity: 1 !important;
}

/* ── Progress Bar ── */
.progress-bar {
    background: rgba(255,255,255,0.6) !important;
    backdrop-filter: blur(8px);
    border-radius: 20px !important;
    height: 8px !important;
    margin: 0 auto 6px !important;
    max-width: 600px;
    overflow: hidden;
    border: 1px solid var(--fc-card-border);
}

.progress-fill {
    background: linear-gradient(90deg, var(--fc-primary), var(--fc-primary-dark)) !important;
    height: 100%;
    border-radius: 20px;
    transition: width 0.4s ease-out !important;
}

.progress-text {
    text-align: center;
    color: var(--fc-text-mid) !important;
    margin-top: 6px !important;
    margin-bottom: 20px;
    font-size: 0.92em !important;
    font-weight: 600;
}

/* ── Container ── */
.container {
    max-width: 700px;
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Flashcard ── */
/* NOTE: We deliberately avoid preserve-3d + backface-visibility because
   iOS Safari/Chrome ignores backface-visibility when any child element
   creates a stacking context. Instead we use a JS-driven two-phase flip
   that rotates each face separately — works on all browsers. */

.flashcard-container {
    margin-bottom: 28px;
}

.flashcard {
    position: relative;
    width: 100%;
    height: 380px;
    cursor: pointer;
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 40px 28px;
    border-radius: var(--fc-radius) !important;
    text-align: center;
    /* JS controls transform and opacity for the flip animation */
    will-change: transform, opacity;
}

/* ── Card Front — Paper texture ── */
.card-front {
    background: 
        linear-gradient(135deg, #fefefe 0%, #f8f6f3 50%, #faf9f7 100%) !important;
    color: var(--fc-text-dark) !important;
    border: 1.5px solid var(--fc-card-border) !important;
    box-shadow: 
        var(--fc-shadow-md),
        inset 0 1px 0 rgba(255,255,255,0.8),
        inset 0 -1px 0 rgba(0,0,0,0.02) !important;
}

/* Paper grain overlay removed — SVG filters inside preserve-3d break
   backface-visibility on iOS Safari/Chrome. The texture was opacity 0.025
   (invisible) so there is no visual change. */

/* ── Card Back — Unit-coloured ── */
.card-back {
    background: linear-gradient(135deg, var(--fc-primary), var(--fc-primary-dark)) !important;
    color: white !important;
    border: none !important;
    box-shadow: var(--fc-shadow-lg) !important;
}

.card-face h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.6em !important;
    line-height: 1.4;
    font-weight: 700;
    color: var(--fc-navy);
}

.card-face p {
    font-size: 1.3em !important;
    line-height: 1.6;
    white-space: pre-line;
    font-weight: 500;
}

.card-back h2, .card-back p { color: white !important; }

/* ── Flip Hint ── */
.flip-hint {
    margin-top: auto !important;
    position: static !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    text-align: center;
    font-size: 0.74em !important;
    font-weight: 500;
    font-style: normal !important;
    letter-spacing: 0.3px;
    padding-top: 12px;
    width: 100%;
}

.card-front .flip-hint {
    color: var(--fc-text-light) !important;
    background: none !important;
}

.card-back .flip-hint {
    color: rgba(255,255,255,0.5) !important;
    background: none !important;
}

/* ── Buttons ── */
.controls {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

button {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    padding: 13px 26px !important;
    font-size: 0.95em !important;
    border-radius: 12px !important;
    cursor: pointer;
    transition: all 0.25s ease !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    position: relative;
    z-index: 1;
}

button:hover {
    transform: translateY(-2px) !important;
}

button:active {
    transform: translateY(0) !important;
}

button:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}
button:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Primary: Previous / Next — navy solid */
.btn-prev, .btn-next {
    background: var(--fc-navy) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(26,39,68,0.20) !important;
}
.btn-prev:hover, .btn-next:hover {
    background: var(--fc-navy-light) !important;
    box-shadow: 0 6px 20px rgba(26,39,68,0.28) !important;
}

/* Primary: I Know This — success green solid */
.btn-known {
    background: linear-gradient(135deg, var(--fc-green), var(--fc-green-dark)) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(34,197,94,0.25) !important;
}
.btn-known:hover {
    box-shadow: 0 6px 20px rgba(34,197,94,0.35) !important;
}

/* Ghost: Shuffle — outline only */
.btn-shuffle {
    background: transparent !important;
    color: var(--fc-primary) !important;
    border: 2px solid var(--fc-primary) !important;
    box-shadow: none !important;
}
.btn-shuffle:hover {
    background: var(--fc-primary-light) !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.12) !important;
}

/* Ghost: Reset — outline red */
.btn-reset {
    background: transparent !important;
    color: var(--fc-red) !important;
    border: 2px solid var(--fc-red) !important;
    box-shadow: none !important;
}
.btn-reset:hover {
    background: rgba(239,68,68,0.06) !important;
    box-shadow: 0 4px 12px rgba(239,68,68,0.10) !important;
}

/* ── Stats Bar ── */
.stats {
    display: flex;
    justify-content: space-around;
    background: var(--fc-card-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--fc-text-dark) !important;
    padding: 22px !important;
    border-radius: var(--fc-radius) !important;
    margin-top: 20px;
    border: 1px solid var(--fc-card-border);
    box-shadow: var(--fc-shadow-sm);
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-family: 'Outfit', sans-serif !important;
    font-size: 2em !important;
    font-weight: 800 !important;
    display: block;
    color: var(--fc-navy) !important;
    line-height: 1.1;
}

.stat-label {
    font-size: 0.8em !important;
    font-weight: 600;
    color: var(--fc-text-light) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 1 !important;
    margin-top: 4px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    body { padding: 14px; }

    .header h1 { font-size: 1.35em !important; }
    .header p { font-size: 0.9em !important; }

    .unit-icon-badge { width: 52px; height: 52px; font-size: 1.6em; }

    .flashcard { height: 320px; }

    .card-face { padding: 24px 24px 20px; }
    .card-face h2 { font-size: 1.25em !important; }
    .card-face p { font-size: 1.1em !important; }

    button { padding: 11px 18px !important; font-size: 0.88em !important; }

    .stats {
        flex-direction: column;
        gap: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}