/* ================================
   Masri Lernkarten — Style (complete) v1.3
================================ */

/* variables */
:root{
  --bg: #f6fbf7;
  --card-bg: rgba(255,255,255,0.95);
  --accent: #2f7a45; /* green */
  --muted: #6b6b6b;
  --max-width: 940px;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
  --flower: url("images/nature_mix.jpg");
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
  background-image: var(--flower);
  background-size: cover;
  background-position:center 60%;
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* top */
.topbar{
  background:linear-gradient(180deg,#1f6c3f,#2f7a45);
  color:white;
  padding:18px 12px;
  box-shadow:0 4px 8px rgba(0,0,0,0.08);
}
.top-inner{max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px}
.top-inner h1{margin:0;font-size:28px;letter-spacing:0.5px}
.controls-inline{display:flex;align-items:center;gap:8px}
.select-small{padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.08);background:white}

/* page */
.page{max-width:var(--max-width);margin:20px auto;padding:16px}
.selector{margin-bottom:14px}
.selector label{display:block;margin-bottom:6px;color:var(--muted)}
#cardSelect{width:100%;padding:12px;border-radius:12px;border:2px solid rgba(0,0,0,0.08);background:rgba(255,255,255,0.9)}

/* card */
.card-wrap{display:flex;justify-content:center;align-items:flex-start}
.card{
  width:100%;
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  margin-bottom:16px;
  transition:transform 200ms ease, box-shadow 200ms ease;
  position:relative;
  overflow:hidden;
}

/* state borders */
.card.flagged{border-left:8px solid #2b6dff}
.card.known{border-left:8px solid #2f7a45}
.card.unknown{border-left:8px solid #d24b4b}

/* meta row */
.card-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.card-cat{font-weight:700;color:var(--accent)}
.card-id{font-size:13px;color:var(--muted)}

/* content */
.card-de{font-size:28px;margin:6px 0;color:#0c2b17}
.card-u{font-size:18px;font-style:italic;margin-bottom:10px;color:#2b5b3a}
.card-ar{font-size:20px;direction:rtl;text-align:right;margin-top:6px;color:#0b2d1b}

/* audio */
.audio-row{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.audio-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
audio{width:100%;display:block}

/* answer */
.answer{background:#f8fff6;border-radius:10px;padding:12px;margin-top:12px}
.hidden{display:none}

/* buttons */
.btn{
  background:var(--accent);
  color:#fff;border:0;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;
}
.btn.small{padding:6px 10px;font-size:14px;border-radius:8px}
.btn:active{transform:translateY(1px)}
.muted{color:var(--muted)}

/* helpers */
.status{max-width:var(--max-width);margin:6px auto;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,0.6);color:var(--muted)}
.footer{text-align:center;padding:12px;color:var(--muted)}

/* swipe animation helper */
.card.moving{transition:none}
.card.swipe-left{transform:translateX(-110%);transition:transform 260ms ease}
.card.swipe-right{transform:translateX(110%);transition:transform 260ms ease}

/* responsive */
@media (max-width:760px){
  .top-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .card-de{font-size:22px}
  .card-u{font-size:16px}
  .card-ar{font-size:20px}
}