/* ==========================================================================
   🎴 2-SIDED FLIPPABLE FLASHCARD (M3-07 DARK OLIVE GREEN EDITORIAL COLLECTIBLE)
   - Clean Artwork Squircle (Zero Text Slapped on Art)
   - 100% M3-07 Semantic Tokens (Seamless Dark & Light Mode)
   - Anti-Over-Bordering Discipline & 2-Stage 3D Flip Physics
   ========================================================================== */

.story-flippable-card {
    position: relative; width: 100%;
    display: grid; grid-template-columns: 100%;
    perspective: 1200px; -webkit-perspective: 1200px;
    cursor: pointer; user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.story-flippable-face {
    grid-area: 1 / 1;
    width: 100%; height: 100%; min-height: 0;
    border-radius: 24px;
    overflow: hidden; position: relative;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 10px;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    transform-origin: center center; will-change: transform, opacity;
    background: var(--m3-surface-container-high);
    border: 1px solid var(--m3-outline-variant);
    padding: 15px;
    color: var(--m3-on-surface);
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.22);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.story-flippable-face.is-face-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.story-flippable-face::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--m3-primary), transparent);
    opacity: 0.45; pointer-events: none;
}

.story-flippable-card.just-added .story-flippable-face {
    border-color: var(--m3-primary);
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.26), 0 0 0 1px var(--m3-primary);
}

.story-flippable-back {
    background: var(--m3-surface-container-high);
    border-color: var(--m3-primary);
    gap: 6px;
}

/* 1. Floating Top-Right Close Button & Inline Meta Labels */
.story-flip-icon-btn {
    position: absolute; top: 12px; right: 12px; z-index: 5;
    width: 28px; height: 28px; border-radius: 9999px; border: none;
    background: transparent; color: var(--m3-on-surface-variant); opacity: 0.58;
    font-size: 12px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.story-flip-icon-btn:hover, .story-flip-icon-btn:active {
    opacity: 1; background: var(--m3-error-container); color: var(--m3-on-error-container); transform: scale(0.92);
}

.story-flip-meta-inline {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}

.story-flip-pos-label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--m3-on-surface-variant); opacity: 0.85;
}

.story-flip-pos-dot {
    width: 5px; height: 5px; border-radius: 9999px;
    background: #486600; flex-shrink: 0;
}

.story-flip-new-badge {
    display: inline-flex; align-items: center; padding: 2px 8px;
    border-radius: 9999px; font-size: 10px; font-weight: 800;
    background: var(--m3-amber-container); color: var(--m3-amber-text);
}

/* 2. Minimalist Front Hero at Top of Card */
.story-flip-hero-minimal {
    display: flex; align-items: center; gap: 14px;
    padding: 0 26px 0 0;
}

.story-flip-word-thumb {
    width: 76px; height: 76px; border-radius: 18px;
    overflow: hidden; flex-shrink: 0;
    background: var(--m3-surface-container);
    border: 1px solid var(--m3-outline-variant);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14);
}

.story-flip-word-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

.story-flip-hero-text {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;
}

.story-flip-front-term {
    font-size: 24px; font-weight: 900; line-height: 1.12; letter-spacing: -0.025em;
    color: var(--m3-on-surface); word-break: break-word;
}

.story-flip-sub-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 2px;
}

.story-flip-audio-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 9999px; border: none;
    background: rgba(72, 102, 0, 0.1);
    color: #486600;
    font-size: 12px; font-weight: 800;
    cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease;
}
.story-flip-audio-pill.has-ipa {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
}
.story-flip-audio-pill:active { transform: scale(0.94); background: rgba(72, 102, 0, 0.18); }

/* 3. Editorial Watermark Quote Box (No Hard Left Bar) */
.story-flip-quote-minimal {
    position: relative;
    flex: 1;
    width: 100%; padding: 10px 14px 10px 26px;
    border-radius: 16px;
    background: var(--m3-surface-container);
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
}

.story-flip-quote-minimal::before {
    content: "“";
    position: absolute; top: 4px; left: 9px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 28px; font-weight: 700; line-height: 1;
    color: #486600; opacity: 0.28; pointer-events: none;
}

.story-flip-prompt-text {
    margin: 0;
    font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    font-size: 16.5px; font-weight: 500; font-style: italic;
    line-height: 1.42; color: var(--m3-on-surface-variant);
}

.story-flip-prompt-hl {
    font-style: normal; font-weight: 800;
    color: #486600;
    background: transparent;
    padding: 0 2px;
    border-bottom: 1.5px solid rgba(72, 102, 0, 0.45);
}

/* 4. Subtle Corner Flip Indicator */
.story-flip-hint-pill {
    align-self: flex-end;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
    color: var(--m3-on-surface-variant); opacity: 0.58;
}

/* 5. Back Face Layout & Meaning Hierarchy */
.story-flip-back-header {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-right: 28px; margin-bottom: 0;
}

.story-flip-back-main { display: flex; flex-direction: column; gap: 5px; flex: 1; justify-content: flex-start; }

.story-flip-back-term {
    font-size: 19px; font-weight: 900; color: var(--m3-on-surface); line-height: 1.15;
}

.story-flip-back-meaning {
    font-size: 17.5px; font-weight: 800; line-height: 1.25;
    color: var(--m3-on-surface); margin: 0 0 2px 0;
}

.story-flip-back-meaning-primary { color: #486600; font-weight: 900; }
.story-flip-back-meaning-rest { color: var(--m3-on-surface); font-weight: 700; }

/* 6. Back Face Soft Apple-Style Segmented Control Tabs */
.story-flip-tabs-bar {
    display: flex; align-items: center; gap: 4px; padding: 3px;
    border-radius: 11px; background: var(--m3-surface-container);
}

.story-flip-tab-btn {
    flex: 1; padding: 4.5px 8px; border-radius: 8px; border: none;
    font-size: 11.5px; font-weight: 700;
    color: var(--m3-on-surface-variant); background: transparent;
    cursor: pointer; transition: all 0.16s ease; text-align: center;
}

.story-flip-tab-btn.active {
    background: var(--m3-surface-container-highest);
    color: #486600;
    font-weight: 800;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.story-flip-tab-panel {
    position: relative;
    flex: 1;
    margin-top: 0; padding: 9px 26px 9px 12px; border-radius: 14px;
    background: var(--m3-surface-container);
    min-height: 58px;
    display: flex; flex-direction: column; justify-content: center;
}

.story-flip-corner-icon {
    position: absolute; bottom: 8px; right: 10px;
    color: var(--m3-on-surface-variant); opacity: 0.45;
    pointer-events: none;
}

.story-flip-back-ex-wrap {
    display: flex; flex-direction: column; gap: 4px;
}

.story-flip-back-ex-en {
    margin: 0; font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    font-size: 16px; font-weight: 600; font-style: italic;
    line-height: 1.42; color: var(--m3-on-surface);
}

.story-flip-back-ex-vi {
    margin: 0; font-size: 13px; font-weight: 600;
    line-height: 1.38; color: var(--m3-on-surface-variant);
}

.story-flip-back-ex-toggle {
    font-size: 10.5px; font-weight: 800; color: var(--m3-primary); margin-top: 2px;
}

.story-flip-usage-text {
    margin: 0; font-size: 13px; font-weight: 600;
    line-height: 1.45; color: var(--m3-on-surface);
}

.story-flip-synonym-wrap {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}

.story-flip-synonym-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 9999px; border: none;
    background: var(--m3-secondary-container);
    color: var(--m3-on-secondary-container);
    font-size: 12px; font-weight: 800; cursor: pointer;
    transition: transform 0.14s ease;
}
.story-flip-synonym-pill:active { transform: scale(0.94); }