.avf-flashcards {
  border: 2px solid #ccc;
  padding: 20px;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
  font-family: sans-serif;
}
.avf-card-front, .avf-card-back {
  font-size: 24px;
  padding: 20px;
  background: #f9f9f9;
  margin: 10px 0;
  border-radius: 8px;
}
.avf-controls button {
  margin: 5px;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
}
.avf-score {
  margin-top: 10px;
  font-weight: bold;
}

/* === Dashboard layout (tiles side-by-side) === */
.afd-dashboard-wrap{ width:100%; max-width:1200px; margin:0 auto; }

.afd-dashboard-wrap .afd-dash-grid{
  display:flex !important;      /* fallback + override theme */
  flex-wrap:wrap;
  gap:18px;
}

.afd-dashboard-wrap .afd-tile{
  flex:1 1 260px;               /* 260px min tile width, then fill row */
  max-width:100%;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}

.afd-dashboard-wrap .afd-tile-inner{ padding:22px; text-align:center; }
.afd-dashboard-wrap .afd-tile-title{ margin:4px 0 10px; font-size:22px; line-height:1.2; }
.afd-dashboard-wrap .afd-tile-count{ margin:0 0 14px; color:#666; font-size:14px; }
.afd-dashboard-wrap .afd-start-btn{ padding:8px 18px; border-radius:8px; }

/* Use CSS Grid when available */
@supports (display:grid){
  .afd-dashboard-wrap .afd-dash-grid{
    display:grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:18px;
  }
  .afd-dashboard-wrap .afd-tile{ flex:none; }
}

/* Mobile */
@media (max-width:640px){
  .afd-dashboard-wrap .afd-tile{ flex:1 1 100%; }
}

/* Modal (if you’re using the modal player) */
.afd-modal{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:99999; padding:20px; }
.afd-modal-card{ background:#fff; width:100%; max-width:760px; border-radius:16px; padding:20px 20px 24px; position:relative; }
.afd-close{ position:absolute; top:10px; right:12px; background:#eee; border:0; border-radius:999px; width:36px; height:36px; font-size:20px; cursor:pointer; }
.afd-modal-title{ margin:0 36px 14px 0; font-size:22px; }
/* === Membership locks === */
.afd-dashboard-wrap .afd-tile.is-locked {
  position: relative;
  filter: grayscale(0.2);
  opacity: 0.85;
}
.afd-dashboard-wrap .afd-tile.is-locked::after {
  content: "🔒 Pro Members Only";
  position: absolute;
  top: 10px; right: 12px;
  font-size: 13px;
  padding: 4px 8px;
  background: #222; color: #fff;
  border-radius: 999px;
}
.afd-dashboard-wrap .afd-tile.is-locked .afd-start-btn[disabled]{
  background:#ccc; border-color:#bbb; color:#333; cursor:not-allowed;
}
.afd-locked-msg { padding:14px; border:1px solid #f1d5d5; background:#fff6f6; border-radius:8px; }
/* =========================================
   TEXT FLASHCARDS (avf/afd) — FINAL POPUP STYLES
   ========================================= */

/* Theme knobs */
:root{
  --avf-front-bg:#E8F5FF;     /* front = soft blue   */
  --avf-back-bg:#FFF5A8;      /* back  = soft yellow */
  --avf-text:#0F172A;         /* dark text           */
  --avf-shadow:0 24px 72px rgba(0,0,0,.22);
}

/* Keep dashboard in a grid */
.afd-dashboard-wrap .afd-dash-grid{ display:flex!important; flex-wrap:wrap; gap:18px; }
@supports (display:grid){
  .afd-dashboard-wrap .afd-dash-grid{
    display:grid!important;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:18px;
  }
}

/* Modal shell */
.afd-modal{
  position:fixed; inset:0; background:rgba(15,23,42,.60);
  display:none; align-items:center; justify-content:center;
  z-index:99999; padding:24px;
}
.afd-modal-card{
  background:#fff; width:100%; max-width:1400px;   /* wider popup */
  border-radius:22px; padding:28px 28px 32px; position:relative;
  box-shadow:var(--avf-shadow);
}
.afd-modal-title{ margin:0 44px 18px 0; font-size:28px; color:var(--avf-text); }
.afd-close{
  position:absolute; top:14px; right:16px; width:40px; height:40px;
  background:#f1f5f9; border:0; border-radius:999px; font-size:20px; cursor:pointer;
}
.afd-close:hover{ background:#e2e8f0; }

/* WIDE RECTANGULAR CARD inside the popup */
.afd-modal-card .avf-card-front,
.afd-modal-card .avf-card-back{
  display:flex; align-items:center; justify-content:center; text-align:center;

  /* width-first sizing → rectangle */
  width:clamp(860px, 80vw, 1240px) !important;
  aspect-ratio:16/10 !important;          /* wider than tall */
  min-height:0 !important; height:auto !important; /* override any tall min-heights */

  margin:12px auto; padding:40px 48px !important;
  border-radius:20px; line-height:1.25; font-weight:700; color:var(--avf-text);
  font-size:clamp(28px, 3.4vw, 58px) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  white-space:normal !important; word-break:normal !important;
}
.afd-modal-card .avf-card-front{ background:var(--avf-front-bg); }
.afd-modal-card .avf-card-back { background:var(--avf-back-bg);  }

/* Controls */
.avf-controls{ margin-top:18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.avf-controls button{
  padding:10px 18px; font-size:16px; font-weight:600;
  border-radius:10px; border:1px solid rgba(0,0,0,.08); background:#fff;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.avf-controls button:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.12); }
.avf-controls button:nth-child(2){ background:#F59E0B; border-color:#eab308; color:#111; }

/* Responsive */
@media (max-width:900px){
  .afd-modal-card{ max-width:96vw; }
  .afd-modal-card .avf-card-front,
  .afd-modal-card .avf-card-back{
    width:92vw !important;
    aspect-ratio:4/5 !important;         /* a bit taller for phones */
    padding:24px !important;
    font-size:clamp(22px, 7.2vw, 40px) !important;
    border-radius:18px;
  }
}
/* ===== HOTFIX: keep text-card wide but inside the modal (avf/afd only) ===== */

.afd-modal-card{
  max-width: min(96vw, 1280px) !important;   /* wider modal but still viewport-safe */
}

.afd-modal-card .avf-card-front,
.afd-modal-card .avf-card-back{
  box-sizing: border-box !important;
  width: clamp(680px, 72vw, 1100px) !important;   /* wide rectangle */
  max-width: calc(100% - 64px) !important;        /* never push past modal padding */
  height: auto !important;
  min-height: 360px !important;                   /* restore sensible height */
  aspect-ratio: auto !important;                  /* remove forced ratio that broke layout */
  margin: 0 auto 16px !important;                 /* center it */
  padding: 32px 40px !important;

  text-align: center !important;
  line-height: 1.3 !important;
  font-size: clamp(28px, 3vw, 52px) !important;   /* big, but won’t overflow */
  white-space: normal !important;
  word-break: normal !important;
}

/* If the screen is short, scale a bit smaller */
@media (max-height: 720px){
  .afd-modal-card .avf-card-front,
  .afd-modal-card .avf-card-back{
    font-size: clamp(24px, 2.6vw, 44px) !important;
    padding: 24px 30px !important;
    min-height: 320px !important;
  }
}

/* Phones */
@media (max-width: 640px){
  .afd-modal-card{ max-width: 96vw !important; }
  .afd-modal-card .avf-card-front,
  .afd-modal-card .avf-card-back{
    width: 92vw !important;
    min-height: 360px !important;
    padding: 22px !important;
    font-size: clamp(22px, 7vw, 38px) !important;
  }
}