:root {
    --bg: #0f172a; /* slate-900 */
    --card: #111827; /* gray-900 */
    --card-raised: #1f2937; /* gray-800 */
    --text: #e5e7eb; /* gray-200 */
    --accent: #60a5fa; /* blue-400 */
    --accent-2: #34d399; /* emerald-400 */
    --bad: #f87171; /* red-400 */
    --muted: #94a3b8; /* slate-400 */
    --gold: #fbbf24; /* amber-400 */
    /* Responsive cell width for side panels/phones */
    --cell: clamp(110px, 38vw, 180px);
    /* Default card aspect ratio (width / height) */
    --card-ratio: 3 / 2;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    background: radial-gradient(1200px 600px at 80% -10%, #1e293b, transparent), var(--bg);
    color: var(--text);
}
.container {
    max-width: 1100px; margin: 0 auto; padding: 24px; display: grid; gap: 16px;
}
header { display: grid; gap: 8px; }
h1 { font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem); margin: 0; letter-spacing: .3px; }
.toolbar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
    border: 1px solid rgba(255,255,255,.08);
    padding: 12px; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
select, button {
    background: var(--card);
    color: var(--text);
    border: 1px solid rgba(255,255,255,.12);
    padding: 10px 12px; border-radius: 12px; font-size: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
button { cursor: pointer; transition: transform .06s ease, background .2s ease; }
button:hover { transform: translateY(-1px); background: var(--card-raised); }
button:active { transform: translateY(0); }
.stats { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
    
/* Responsive grid that adapts for side-by-side play on phones */
.grid {
    display: grid;
    gap: 12px;
    /* Flexible grid that adapts to narrow sidebars and phones */
    grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr));
    align-content: start;
}
    
    
@media (orientation: landscape) and (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
  }
  .card {
    position: relative;
    perspective: 1000px;
    /* Use aspect-ratio instead of fixed height so cards scale in a narrow sidebar */
    aspect-ratio: var(--card-ratio);
    height: auto;
    min-height: 100px;
    border-radius: 16px;
  }
}
    
@media (max-width: 500px) {
    .container { padding: 8px; gap: 12px; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
    .card { height: 90px; }
}    

.card {
    position: relative; perspective: 1000px; height: 140px; border-radius: 16px; outline: none;
}
.face {
    position: absolute; inset: 0; border-radius: 16px; padding: 12px; border: 1px solid rgba(255,255,255,.12);
    display: grid; place-items: center; text-align: center; backface-visibility: hidden;
    transform-style: preserve-3d; transition: transform .5s ease, background .3s ease, border-color .3s ease;
}
.front { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)), var(--card);
    box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.back { background: linear-gradient(180deg, rgba(96,165,250,.12), rgba(96,165,250,.04)), var(--card-raised);
    transform: rotateY(180deg); 
}
    
.content { font-size: 14px; line-height: 1.35; letter-spacing: .2px; }
.ref { font-weight: 700; font-size: 16px; letter-spacing: .3px; }
    
.card { position: relative; perspective: 1000px; height: 140px; border-radius: 12px; }
.face { position: absolute; inset: 0; border-radius: 12px; padding: 8px; border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; text-align: center; backface-visibility: hidden; transform-style: preserve-3d; transition: transform .5s ease; font-size: 14px; }
.front { background: var(--card); }
.back { background: var(--card-raised); transform: rotateY(180deg); }
.card.flipped .front { transform: rotateY(180deg); }
.card.flipped .back { transform: rotateY(360deg); }

/* Cheat mode: visually keep all cards flipped but still clickable */
.cheat .card .front { transform: rotateY(180deg) !important; }
.cheat .card .back  { transform: rotateY(360deg) !important; }

.matched-text { font-size: 12px; margin-top: 4px; color: var(--accent-2); }
.x-mark { font-size: 20px; color: var(--bad); font-weight: bold; }
/* Side-panel & small phone tweaks */
@media (max-width: 480px) {
    :root { --cell: clamp(120px, 48vw, 160px); }
    .container { padding: 16px; }
}
/* Very narrow sidebars */
@media (max-width: 360px) {
    :root { --cell: clamp(110px, 45vw, 140px); }
}
/* Landscape phones with short height (split-screen) */
@media (max-height: 420px) and (orientation: landscape) {
    :root { --card-ratio: 16 / 9; }
}

.card.matched .front, .card.matched .back {
    border-color: rgba(52,211,153,.6); background: linear-gradient(180deg, rgba(52,211,153,.20), rgba(52,211,153,.06)), var(--card);
}
    
.pill { padding: 4px 8px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(255,255,255,.14); color: var(--muted); }
.accent { color: var(--accent); }
.good { color: var(--accent-2); }
.bad { color: var(--bad); }
    
.footer { display: flex; gap: 10px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
.stars { display: inline-flex; gap: 2px; }
.star { filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Cross-out style for matched reference card */
.card.crossed .back {
    position: relative;
    filter: grayscale(0.6) opacity(0.8);
  }
  .card.crossed .back::after {
    content: '✗';
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 64px; font-weight: 900; color: var(--bad);
    text-shadow: 0 2px 6px rgba(0,0,0,.45);
    pointer-events: none;
  }
  /* Reference appended under the verse text on the verse card */
  .ref-inline { margin-top: 6px; opacity: .95; }