/* ═══════════════════════════════════════════════════════
   FLASHCARD — 6 modes, countdown, romaji fade, scramble,
   shadow, ambient audio, weak-card review
   ═══════════════════════════════════════════════════════ */

/* ── Quiz-style topbar ────────────────────────────────── */
.fg-topbar {
    background: var(--lejp-surface);
    border: 2px solid var(--lejp-border);
    border-radius: var(--lejp-radius);
    padding: 10px 14px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fg-progress-bar  { flex:1; height:12px; background:var(--lejp-border); border-radius:20px; overflow:hidden; }
.fg-progress-fill { height:100%; width:0%; background:#f59e0b; border-radius:20px; transition:width .35s cubic-bezier(.4,0,.2,1); }
.fg-stat-pill     { padding:5px 10px; background:var(--lejp-border); border-radius:20px; font-size:12px; font-weight:700; white-space:nowrap; flex-shrink:0; font-family:monospace; color:var(--lejp-text); }
.fg-stat-pill--xp { background:#fef3c7; color:#b45309; }

/* ── Completed banner (shown on reload if already finished) ──── */
.fg-completed-banner {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--lejp-primary-lt); border: 2px solid var(--lejp-primary);
    border-radius: var(--lejp-radius); padding: 16px 18px; margin-bottom: 1.5rem;
}
.fg-completed-banner__icon { font-size: 1.6rem; line-height: 1; }
.fg-completed-banner__body { flex: 1; min-width: 200px; }
.fg-completed-banner__title {
    font-family: var(--ej-font,'Nunito',system-ui,sans-serif); font-weight: 700;
    color: var(--lejp-primary-dk, var(--lejp-primary)); margin-bottom: 2px;
}
.fg-completed-banner__sub {
    font-size: .85rem; color: var(--lejp-text); margin: 0; opacity: .8;
}
.fg-completed-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Ambient audio button (inline in topbar) ──────────── */
.fg-ambient-btn {
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    border:2px solid var(--lejp-border); background:var(--lejp-surface);
    font-size:.9rem; cursor:pointer; display:flex; align-items:center;
    justify-content:center; transition:all .15s;
}
.fg-ambient-btn:hover         { border-color:var(--lejp-primary); background:var(--lejp-primary-lt); }
.fg-ambient-btn.active        { border-color:#059669; background:#d1fae5; }

/* ── 6-mode tab grid ──────────────────────────────────── */
.fg-modes {
    display:grid; grid-template-columns:repeat(6,1fr); gap:6px;
    margin-bottom:1.75rem; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.fg-mode-btn {
    padding:8px 3px; border:2px solid var(--lejp-border);
    border-radius:var(--lejp-radius-sm); background:var(--lejp-surface);
    cursor:pointer; text-align:center; transition:all .18s;
    font-family:var(--ej-font,'Nunito',system-ui,sans-serif); position:relative;
}
.fg-mode-btn:hover:not(.locked) { border-color:var(--lejp-primary); background:var(--lejp-primary-lt); }
.fg-mode-btn.active    { border-color:var(--lejp-primary); background:var(--lejp-primary-lt); }
.fg-mode-btn.locked    { opacity:1; cursor:not-allowed; background:#f8fafc; border-color:#e2e8f0; filter:grayscale(.5); }
.fg-mode-btn.locked .fg-mode-btn__label { color:var(--lejp-muted); }
.fg-mode-btn.completed { border-color:#059669; }
.fg-mode-btn__icon  { font-size:1.15rem; display:block; margin-bottom:3px; }
.fg-mode-btn__label { font-size:.6rem; font-weight:800; color:var(--lejp-text); display:block; line-height:1.2; }
.fg-lock-icon  { position:absolute; top:4px; right:5px; font-size:.65rem; }
.fg-done-badge {
    display:none; position:absolute; top:3px; left:4px;
    font-size:.55rem; background:#059669; color:#fff;
    border-radius:100px; padding:1px 4px; font-weight:900; line-height:1.6;
}
.fg-mode-btn.completed .fg-done-badge { display:block; }

/* ── Speed Round countdown bar ────────────────────────── */
.fg-countdown-wrap { margin-bottom:.75rem; display:none; }
.fg-countdown-bar  { height:7px; background:var(--lejp-border); border-radius:4px; overflow:hidden; }
.fg-countdown-fill {
    height:100%; width:100%; border-radius:4px;
    background:linear-gradient(90deg,#059669,#f59e0b);
    transform-origin:left center;
    transition:width linear;
}
.fg-countdown-fill.urgent { background:#e11d48; }
.fg-countdown-secs { font-size:.7rem; font-weight:800; color:var(--lejp-muted); text-align:right; margin-top:2px; }

/* ── Flip card scene ──────────────────────────────────── */
.fg-scene { perspective:1100px; margin-bottom:1.25rem; cursor:pointer; }
.fg-card  {
    position:relative; width:100%; padding-top:58%;
    transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,0,.2,1);
    border-radius:var(--lejp-radius); box-shadow:0 8px 32px rgba(0,0,0,.1);
}
.fg-card.flipped { transform:rotateY(180deg); }
.fg-face {
    position:absolute; inset:0; border-radius:var(--lejp-radius);
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; padding:2rem 1.5rem; text-align:center; gap:.5rem;
}
.fg-face--front {
    background:linear-gradient(135deg,#5b21b6 0%,#7c3aed 50%,#8b5cf6 100%);
    color:#fff;
}
.fg-phrase      { font-size:clamp(1.1rem,5vw,1.9rem); font-weight:900; line-height:1.25; color:#fff; }
.fg-front-label { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.fg-tap-hint    { font-size:.78rem; color:rgba(255,255,255,.5); margin-top:.25rem; }
.fg-speak-btn {
    background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
    color:#fff; padding:5px 14px; border-radius:20px; cursor:pointer;
    font-size:.78rem; font-weight:700;
    font-family:var(--ej-font,'Nunito',system-ui,sans-serif);
    transition:background .15s; margin-top:2px;
    display:inline-flex; align-items:center; gap:4px;
}
.fg-speak-btn:hover { background:rgba(255,255,255,.32); }
.fg-speak-btn.speaking { background:rgba(255,255,255,.45); }
.fg-face--back  { background:#fff; border:2px solid var(--lejp-border); color:var(--lejp-text); transform:rotateY(180deg); }
.fg-jp-main { font-size:clamp(1.3rem,5vw,2rem); font-weight:900; line-height:1.2; }
.fg-rom     { font-size:.88rem; color:var(--lejp-muted); font-style:italic; transition:opacity .5s; }
.fg-rom-hint { font-size:.68rem; color:var(--lejp-primary); font-style:normal; margin-top:-2px; }
.fg-rom-toggle {
    font-size:.7rem; color:var(--lejp-primary); cursor:pointer;
    background:none; border:none; font-family:inherit;
    text-decoration:underline; padding:0; display:none;
    font-style:normal;
}
.fg-divider { width:36px; height:2px; background:var(--lejp-border); border-radius:1px; margin:.3rem 0; }
.fg-ex      { font-size:.82rem; color:var(--lejp-muted); line-height:1.55; max-width:38ch; }

/* ── Quiz-style navigation buttons ───────────────────── */
.fg-nav-row   { display:flex; gap:10px; margin-bottom:1.25rem; }
.fg-nav-speed { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:1.25rem; }

.fg-btn-ghost, .fg-btn-primary, .fg-btn-danger, .fg-btn-warn, .fg-btn-indigo {
    padding:11px 14px; font-size:.9rem; font-weight:700;
    border-radius:var(--lejp-radius-sm); cursor:pointer;
    font-family:var(--ej-font,'Nunito',system-ui,sans-serif);
    transition:all .1s; flex:1; display:flex; align-items:center;
    justify-content:center; gap:6px; line-height:1.3; text-align:center; min-height:48px;
}
.fg-btn-ghost   { background:transparent; border:2px solid var(--lejp-border); border-bottom:4px solid #cbd5e1; color:var(--lejp-muted); }
.fg-btn-ghost:hover:not(:disabled)  { background:#f8fafc; border-color:#cbd5e1; }
.fg-btn-ghost:active:not(:disabled) { transform:translateY(3px); border-bottom-width:1px; }
.fg-btn-ghost:disabled { opacity:.45; cursor:not-allowed; }

.fg-btn-primary { background:#047857; color:#fff; border:none; border-bottom:4px solid #065f46; }
.fg-btn-primary:hover:not(:disabled)  { background:#047857; }
.fg-btn-primary:active:not(:disabled) { transform:translateY(3px); border-bottom-width:1px; }
.fg-btn-primary:disabled { background:var(--lejp-border); border-bottom:4px solid #cbd5e1; color:var(--lejp-muted); cursor:not-allowed; }

.fg-btn-danger  { background:transparent; border:2px solid #e11d48; border-bottom:4px solid #be123c; color:#e11d48; }
.fg-btn-danger:hover:not(:disabled)  { background:#ffe4e6; }
.fg-btn-danger:active:not(:disabled) { transform:translateY(3px); border-bottom-width:1px; }
.fg-btn-danger:disabled { opacity:.45; cursor:not-allowed; }

.fg-btn-warn    { background:transparent; border:2px solid #d97706; border-bottom:4px solid #b45309; color:#d97706; }
.fg-btn-warn:hover:not(:disabled)  { background:#fef3c7; }
.fg-btn-warn:active:not(:disabled) { transform:translateY(3px); border-bottom-width:1px; }
.fg-btn-warn:disabled { opacity:.45; cursor:not-allowed; }

.fg-btn-indigo  { background:var(--lejp-primary); color:#fff; border:none; border-bottom:4px solid #4338ca; flex:0; padding:11px 22px; }
.fg-btn-indigo:hover:not(:disabled)  { background:#4338ca; }
.fg-btn-indigo:active:not(:disabled) { transform:translateY(3px); border-bottom-width:1px; }

/* ── Live bar + stats ─────────────────────────────────── */
.fg-live-bar { display:flex; justify-content:center; align-items:center; min-height:26px; margin-bottom:.6rem; }
.fg-streak   { font-size:.88rem; font-weight:900; color:#ea580c; }
.fg-stats    { display:flex; justify-content:center; gap:20px; margin-bottom:1.25rem; flex-wrap:wrap; }
.fg-stat     { display:flex; flex-direction:column; align-items:center; gap:2px; }
.fg-stat__num   { font-size:1.4rem; font-weight:900; color:var(--lejp-primary); }
.fg-stat__label { font-size:.72rem; color:var(--lejp-muted); font-weight:700; }

/* ── Keyboard hint ────────────────────────────────────── */
.fg-key-hint { text-align:center; font-size:.75rem; color:var(--lejp-muted); margin-bottom:1rem; }
.fg-key-hint kbd { display:inline-block; padding:2px 6px; border:1px solid var(--lejp-border); border-radius:4px; background:#f8fafc; font-size:.72rem; font-family:monospace; }

/* ── Match Game ───────────────────────────────────────── */
.fg-match-intro  { text-align:center; padding:1rem 0 1.25rem; font-size:.95rem; color:var(--lejp-muted); font-weight:600; }
.fg-match-grid   { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:1rem; }
.fg-match-round-label { grid-column:1/-1; text-align:center; font-size:.78rem; font-weight:800; color:var(--lejp-muted); margin-bottom:2px; }
.fg-match-tile {
    padding:.9rem .75rem; border:2px solid var(--lejp-border); border-bottom:4px solid #cbd5e1;
    border-radius:var(--lejp-radius-sm); background:var(--lejp-surface);
    font-family:var(--ej-font,'Nunito',system-ui,sans-serif); font-size:.9rem; font-weight:700;
    cursor:pointer; text-align:center; transition:all .18s;
    min-height:56px; display:flex; align-items:center; justify-content:center; line-height:1.35; user-select:none;
}
.fg-match-tile:hover:not(.matched):not(.wrong-flash) { border-color:var(--lejp-primary); background:var(--lejp-primary-lt); }
.fg-match-tile.selected { border-color:var(--lejp-primary); background:var(--lejp-primary-lt); transform:scale(1.03); box-shadow:0 4px 12px rgba(79,70,229,.2); }
.fg-match-tile.matched  { border-color:#059669; background:#d1fae5; color:#047857; cursor:default; opacity:.8; border-bottom-color:#047857; }
.fg-match-tile.wrong-flash { border-color:#e11d48; background:#ffe4e6; animation:fgWrongShake .35s ease; }
.fg-match-stats { display:flex; justify-content:center; gap:20px; font-size:.85rem; font-weight:700; color:var(--lejp-muted); margin-bottom:1rem; }
@keyframes fgWrongShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ── Word Scramble (Mode 5) ───────────────────────────── */
.fg-scramble-card {
    background:var(--lejp-surface); border:2px solid var(--lejp-border);
    border-radius:var(--lejp-radius); padding:1.5rem 1.25rem;
    margin-bottom:1.25rem; text-align:center;
    box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.fg-scramble-label { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--lejp-muted); margin:0 0 .75rem; }
.fg-scramble-jp  { font-size:clamp(1.15rem,4.5vw,1.7rem); font-weight:900; color:var(--lejp-text); margin:0 0 .2rem; line-height:1.25; }
.fg-scramble-rom { font-size:.82rem; color:var(--lejp-muted); font-style:italic; margin:0 0 .3rem; }
.fg-scramble-div { width:32px; height:2px; background:var(--lejp-border); border-radius:1px; margin:.35rem auto .5rem; }
.fg-scramble-ex  { font-size:.8rem; color:var(--lejp-muted); line-height:1.5; margin:0 0 1rem; }
.fg-scramble-tray {
    min-height:52px; border:2px dashed var(--lejp-border); border-radius:var(--lejp-radius-sm);
    display:flex; flex-wrap:wrap; gap:5px; padding:8px 10px;
    margin:0 0 .75rem; align-items:center; background:#f8fafc;
    transition:border-color .2s, background .2s;
}
.fg-scramble-tray.correct { border-color:#059669; background:#d1fae5; border-style:solid; }
.fg-scramble-tray.wrong   { border-color:#e11d48; background:#ffe4e6; border-style:solid; animation:fgWrongShake .35s ease; }
.fg-scramble-tray-hint    { font-size:.78rem; color:var(--lejp-muted); pointer-events:none; }
.fg-scramble-tiles { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:.75rem; min-height:44px; }
.fg-tile {
    padding:6px 11px; background:var(--lejp-surface);
    border:2px solid var(--lejp-border); border-bottom:3px solid #cbd5e1;
    border-radius:var(--lejp-radius-sm); font-family:var(--ej-font,'Nunito',system-ui,sans-serif);
    font-size:.88rem; font-weight:700; cursor:pointer; transition:all .1s; user-select:none;
}
.fg-tile:hover   { border-color:var(--lejp-primary); background:var(--lejp-primary-lt); }
.fg-tile:active  { transform:translateY(2px); border-bottom-width:1px; }
.fg-tile.in-tray { border-color:var(--lejp-primary); background:var(--lejp-primary-lt); border-bottom-color:#4338ca; }
.fg-scramble-feedback { font-size:.88rem; font-weight:800; padding:.5rem .75rem; border-radius:var(--lejp-radius-sm); margin:0; min-height:1.2rem; }
.fg-scramble-feedback:empty { padding:0; }
.fg-scramble-correct { background:#d1fae5; color:#166534; }
.fg-scramble-wrong   { background:#ffe4e6; color:#e11d48; }
.fg-scramble-hint    { background:#fef3c7; color:#92400e; }
.fg-scramble-actions { display:flex; gap:8px; margin-bottom:.75rem; }

/* ── Shadow Mode (Mode 6) ────────────────────────────── */
.fg-shadow-card {
    background:var(--lejp-surface); border:2px solid var(--lejp-border);
    border-radius:var(--lejp-radius); padding:2rem 1.5rem;
    margin-bottom:1.25rem; text-align:center;
    box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.fg-shadow-label   { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--lejp-muted); margin:0 0 1rem; }
.fg-shadow-phrase  { font-size:clamp(1.1rem,5vw,1.75rem); font-weight:900; color:var(--lejp-text); line-height:1.3; margin:0 0 .5rem; }
.fg-shadow-jp      { font-size:clamp(.95rem,3.5vw,1.15rem); font-weight:700; color:var(--lejp-primary); margin:0 0 .25rem; }
.fg-shadow-rom     { font-size:.82rem; color:var(--lejp-muted); font-style:italic; margin:0 0 .25rem; }
.fg-shadow-ex      { font-size:.8rem; color:var(--lejp-muted); line-height:1.5; margin:.5rem 0 1.25rem; }
.fg-shadow-controls { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:1rem; }
.fg-shadow-play, .fg-shadow-record {
    padding:10px 18px; border-radius:var(--lejp-radius-sm); font-weight:700; cursor:pointer;
    font-family:var(--ej-font,'Nunito',system-ui,sans-serif); font-size:.88rem;
    transition:all .1s; display:inline-flex; align-items:center; gap:6px;
}
.fg-shadow-play   { background:var(--lejp-primary-lt); color:var(--lejp-primary); border:2px solid var(--lejp-primary); border-bottom:3px solid #4338ca; }
.fg-shadow-play:hover   { background:#dde4ff; }
.fg-shadow-play:active  { transform:translateY(2px); border-bottom-width:1px; }
.fg-shadow-record { background:#fff0f3; color:#e11d48; border:2px solid #e11d48; border-bottom:3px solid #be123c; }
.fg-shadow-record:hover  { background:#ffe4e6; }
.fg-shadow-record:active { transform:translateY(2px); border-bottom-width:1px; }
.fg-shadow-record:disabled { opacity:.45; cursor:not-allowed; }
.fg-shadow-playback { width:100%; margin:.5rem 0; border-radius:var(--lejp-radius-sm); display:none; }
.fg-shadow-rate-label { font-size:.78rem; font-weight:700; color:var(--lejp-muted); margin-bottom:.6rem; }
.fg-shadow-rate-row   { display:flex; gap:10px; }

/* ── Complete + Retake screens ────────────────────────── */
.fg-complete { text-align:center; padding:1.5rem 1rem 1rem; }
.fg-complete__emoji { font-size:3rem; display:block; margin-bottom:.75rem; }
.fg-complete__title { font-size:1.2rem; font-weight:900; color:var(--lejp-text); margin:0 0 .4rem; }
.fg-complete__sub   { font-size:.9rem; color:var(--lejp-muted); margin:0 0 1.25rem; }
.fg-complete__actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.fg-complete__actions .fg-btn-ghost,
.fg-complete__actions .fg-btn-primary,
.fg-complete__actions .fg-btn-indigo { flex:0; white-space:nowrap; }
.fg-review-prompt {
    margin:1rem 0 0; padding:.85rem 1rem; border-radius:var(--lejp-radius-sm);
    background:#fef3c7; border:1.5px solid #f59e0b;
    font-size:.85rem; font-weight:700; color:#92400e;
    display:none;
}

.fg-retake-card    { text-align:center; padding:2rem 1.25rem 1.5rem; }
.fg-retake-emoji   { font-size:3rem; display:block; margin-bottom:.75rem; }
.fg-retake-title   { font-size:1.2rem; font-weight:900; color:var(--lejp-text); margin:0 0 .4rem; }
.fg-retake-sub     { font-size:.9rem; color:var(--lejp-muted); margin:0 0 1rem; line-height:1.5; }
.fg-retake-warning {
    background:#fef3c7; border:1.5px solid #f59e0b; border-radius:var(--lejp-radius-sm);
    padding:.7rem 1rem; font-size:.83rem; font-weight:700; color:#92400e;
    line-height:1.5; margin-bottom:1.25rem; text-align:left;
}
.fg-retake-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.fg-retake-actions .fg-btn-ghost,
.fg-retake-actions .fg-btn-danger { flex:0; white-space:nowrap; }

/* ── Article banner ───────────────────────────────────── */
.lejp-article-banner {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:14px; padding:16px 18px; background:#e0e7ff; border:2px solid #4f46e5;
    border-radius:14px; margin-bottom:20px; position:relative; z-index:2;
}
.lejp-article-banner__icon  { font-size:1.4rem; flex-shrink:0; line-height:1; margin-top:2px; }
.lejp-article-banner__body  { flex:1; }
.lejp-article-banner__title { font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#4f46e5; margin-bottom:3px; }
.lejp-article-banner__text  { font-size:.88rem; font-weight:700; color:#0f172a; line-height:1.4; margin-bottom:8px; }
.lejp-article-banner__link  { display:inline-flex; align-items:center; gap:5px; background:#4f46e5; color:#fff; font-size:.78rem; font-weight:800; padding:6px 14px; border-radius:100px; text-decoration:none; transition:opacity .15s; }
.lejp-article-banner__link:hover { opacity:.85; }
.lejp-article-banner__dismiss { background:none; border:none; cursor:pointer; padding:4px; color:#94a3b8; font-size:1.1rem; line-height:1; border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; transition:color .15s,background .15s; flex-shrink:0; }
.lejp-article-banner__dismiss:hover { color:#0f172a; background:rgba(0,0,0,.06); }
.lejp-article-banner__restore { display:none; align-items:center; gap:6px; background:none; border:1.5px dashed rgba(79,70,229,.4); border-radius:8px; padding:5px 10px; cursor:pointer; font-size:.72rem; font-weight:700; color:#4f46e5; margin-bottom:12px; transition:border-color .15s,background .15s; }
.lejp-article-banner__restore:hover { border-color:#4f46e5; background:#e0e7ff; }
.lejp-article-banner__restore.visible { display:flex; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width:520px) {
    .fg-card { padding-top: 85% !important; } /* Boost vertical space on mobile to fit multiple translation lines */
    .fg-face { padding: 1.25rem 1rem !important; gap: 0.35rem !important; justify-content: center !important; }
    
    .fg-jp-main { font-size: clamp(1.15rem, 5vw, 1.45rem) !important; line-height: 1.35 !important; }
    .fg-phrase { font-size: clamp(1.1rem, 4.8vw, 1.35rem) !important; line-height: 1.3 !important; }
    .fg-rom { font-size: 0.78rem !important; }
    .fg-ex { font-size: 0.75rem !important; line-height: 1.45 !important; max-width: 100% !important; }
    .fg-divider { margin: 0.2rem 0 !important; }
    
    .fg-modes { grid-template-columns:repeat(3,1fr); }
    .fg-mode-btn__icon  { font-size:1rem; }
    .fg-mode-btn__label { font-size:.56rem; }
    .fg-nav-speed { grid-template-columns:1fr; }
    .fg-match-tile  { font-size:.82rem; padding:.75rem .5rem; }
    .fg-shadow-controls { flex-direction:column; align-items:stretch; }
    .fg-shadow-rate-row { flex-direction:column; }
    .fg-scramble-actions { flex-direction:column; }
}

/* ── Card size modifiers ──────────────────────────────────
   For topics whose Japanese/example text runs long, apply one of
   these on .fg-card (via $lejp_card_size in flashcard-shell.php)
   instead of repeating the whole mobile media query per template. */
@media (max-width:520px) {
    .fg-card--tall    { padding-top: 95%  !important; }
    .fg-card--taller  { padding-top: 105% !important; }
    .fg-card--tallest { padding-top: 110% !important; }

    .fg-card--taller .fg-jp-main,
    .fg-card--tallest .fg-jp-main { font-size: clamp(1.1rem, 4.8vw, 1.35rem) !important; line-height: 1.35 !important; }
    .fg-card--taller .fg-phrase,
    .fg-card--tallest .fg-phrase { font-size: clamp(1.05rem, 4.5vw, 1.3rem) !important; line-height: 1.3 !important; }

    .fg-card--tallest .fg-jp-main { font-size: clamp(1.05rem, 4.5vw, 1.3rem) !important; }
    .fg-card--tallest .fg-phrase  { font-size: clamp(1.05rem, 4.5vw, 1.28rem) !important; }
}
@media (prefers-reduced-motion:reduce) { .fg-card { transition:none; } }

/* ═══════════════════════════════════════════════════════
   TABBED STUDY GUIDE — view-switcher + guide-card content
   Tokens delegate to the global --lejp-* set where possible;
   indigo/red/amber are new fg-only accents (no site-wide
   equivalent), matching the hex values used by the practice
   and quiz engines' guide cards for visual consistency.
   ═══════════════════════════════════════════════════════ */
:root {
    --fg-indigo:     #4f46e5;
    --fg-indigo-dk:  #3730a3;
    --fg-indigo-lt:  #eef2ff;
    --fg-amber:      #f59e0b;
    --fg-amber-lt:   #fef3c7;
    --fg-red:        #ef4444;
    --fg-red-lt:     #fef2f2;
    --fg-surface:    var(--lejp-surface, #ffffff);
    --fg-bg:         var(--lejp-bg, #f7f9fc);
    --fg-border:     var(--lejp-border, rgba(0,0,0,.08));
    --fg-border-hi:  rgba(0,0,0,.15);
    --fg-ink:        var(--lejp-text, #1e293b);
    --fg-ink-2:      #475569;
    --fg-ink-3:      #94a3b8;
    --fg-radius:     var(--lejp-radius, 16px);
    --fg-radius-sm:  var(--lejp-radius-sm, 10px);
    --fg-mono:       'JetBrains Mono', monospace;
}

/* ── Dashboard navigation tabs (tabbed Study Guide variant only) ── */
.fg-view-switcher {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}
.fg-switch-btn {
    flex: 1;
    padding: 14px;
    font-size: .95rem;
    font-weight: 700;
    border-radius: var(--fg-radius);
    cursor: pointer;
    font-family: var(--ej-font,'Nunito',system-ui,sans-serif);
    border: 2px solid var(--fg-border);
    background: var(--fg-surface);
    color: var(--fg-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.fg-switch-btn.active {
    background: var(--fg-indigo);
    color: #fff;
    border-color: var(--fg-indigo-dk);
    box-shadow: 0 4px 12px rgba(79,70,229,0.2);
}

/* ── View panels (tabbed Study Guide variant only) ─────────── */
.fg-panel { display: none; }
.fg-panel.active { display: block; animation: fgPanelFade 0.3s ease forwards; }
@keyframes fgPanelFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Study guide panel content (tabbed Study Guide variant only) ── */
.fg-guide-card {
    background: var(--fg-surface);
    border: 2px solid var(--fg-border);
    border-radius: var(--fg-radius);
    padding: 24px;
    margin-bottom: 24px;
}
.fg-guide-card h2 { font-size: 1.4rem; color: var(--fg-indigo); margin-top: 0; border-bottom: 2px solid var(--fg-indigo-lt); padding-bottom: 8px; }
.fg-guide-card h3 { font-size: 1.1rem; color: var(--fg-ink); margin: 18px 0 10px; }
.fg-guide-card h4 { font-size: 1rem; color: var(--fg-ink-2); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: 0.02em; }

/* Vocabulary grid block */
.fg-vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fg-vocab-item { background: var(--fg-bg); border: 1px solid var(--fg-border); padding: 12px 14px; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; }
.fg-vocab-en { font-family: var(--fg-mono); font-weight: 700; color: var(--fg-indigo); font-size: .95rem; }
.fg-vocab-jp { font-size: .82rem; color: var(--fg-ink-2); font-weight: 600; }

/* Functional phrase items */
.fg-phrase-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.fg-phrase-item { background: var(--fg-bg); border-left: 4px solid var(--fg-indigo); padding: 12px 16px; border-radius: 0 8px 8px 0; }
.fg-phrase-en { font-weight: 700; color: var(--fg-ink); font-size: .95rem; margin-bottom: 4px; }
.fg-phrase-jp { font-size: .85rem; color: var(--fg-ink-2); }

/* Comparative styling cards (naturalness blocks) */
.fg-compare-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
@media (min-width: 640px) { .fg-compare-grid { grid-template-columns: 1fr 1fr; } }
.fg-compare-card { padding: 14px 16px; border-radius: var(--fg-radius); border: 2px solid var(--fg-border); position: relative; }
.fg-compare-card--bad { background: var(--fg-red-lt); border-color: var(--fg-red); color: #991b1b; }
.fg-compare-card--good { background: var(--lejp-primary-lt, #e8fcd8); border-color: var(--lejp-primary, #58cc02); color: #166534; }
.fg-compare-badge { font-family: var(--fg-mono); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; display: block; }

/* Common error containers */
.fg-mistake-block { background: var(--fg-bg); border: 2px solid var(--fg-border); border-left: 4px solid var(--fg-red); border-radius: var(--fg-radius); padding: 16px; margin-bottom: 16px; }
.fg-mistake-title { font-weight: 700; color: var(--fg-ink); margin-bottom: 8px; font-size: 1.05rem; }

/* Dialogue flow container */
.fg-dialogue-wrap { background: var(--fg-bg); border: 1px solid var(--fg-border); border-radius: var(--fg-radius); padding: 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.fg-line { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px dashed var(--fg-border); }
.fg-line:last-child { border-bottom: none; padding-bottom: 0; }
.fg-speaker { font-family: var(--fg-mono); font-weight: 700; color: var(--fg-indigo); font-size: 0.85rem; text-transform: uppercase; }
.fg-text-en { font-weight: 600; color: var(--fg-ink); font-size: .95rem; }
.fg-text-jp { font-size: .82rem; color: var(--fg-ink-2); }

/* Practice-template rendering box */
.fg-template-box { background: linear-gradient(135deg, var(--fg-indigo-lt), #f3e8ff); border: 2px dashed var(--fg-indigo); border-radius: var(--fg-radius); padding: 18px; font-size: .95rem; line-height: 1.6; color: var(--fg-ink); font-weight: 600; margin-bottom: 16px; }

/* Header intro paragraph (tabbed Study Guide variant only) */
.fg-header-intro { font-size: .95rem; color: var(--fg-ink-2); margin: 6px 0 0; line-height: 1.5; }

/* Widen the activity column when the Study Guide tab is present —
   the default 760px .lejp-activity-wrap width (and flashcard's own
   600px inline override, suppressed in flashcard-shell.php when
   tabbed) is too narrow for vocab grids / dialogue blocks / compare
   cards. Matches quiz-engine.css's .lejp-quiz-tabbed treatment. */
.lejp-activity-wrap.fg-tabbed {
    max-width: 1000px;
    margin: 0 auto;
}