/* =========================================================
   BridgeTrainer — Full CSS (instant MCQ feedback enabled)
   Paste this entire file as /bridge-trainer/style.css
   ========================================================= */

/* ---- Theme tokens ---- */
:root{
  --bg1:#f6fff7; --bg2:#e9f7ee;
  --glass:#ffffffcc;            /* translucent panels */
  --text:#0e2b1d; --muted:#2e5a40;
  --accent:#1a7f4b; --accent-2:#14a36c; /* success/brand */
  --danger:#ab2c3d;                             /* error */
  --stroke:#00000014; --shadow:0 12px 28px rgba(0,0,0,.08);
  --radius:16px;
  --focus:#276ef1; /* focus ring */
}

/* ---- Resets / base ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background: linear-gradient(135deg,var(--bg1),var(--bg2));
}

/* ---- Header ---- */
.app-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 18px;
  background:var(--glass); backdrop-filter: blur(6px);
  border-bottom:1px solid var(--stroke);
}
.brand{display:flex; align-items:center; gap:10px}
.brand .logo{font-size:28px}
.brand h1{font-size:20px; margin:0}
.top-actions{display:flex; gap:10px; align-items:center}

/* ---- Buttons ---- */
.btn{
  appearance:none; border:1px solid var(--stroke); background:white;
  padding:10px 14px; border-radius:12px; cursor:pointer;
  box-shadow:var(--shadow); text-decoration:none; color:inherit;
  transition:transform .06s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.btn.subtle{background:#ffffffaa}
.btn.danger{background:#ffe9ec; border-color:#ffd1d7; color:#7e0b1c}

/* ---- Layout ---- */
.layout{display:grid; grid-template-columns: 320px 1fr; gap:18px; padding:18px; max-width:1400px; margin:auto}
.sidebar{display:flex; flex-direction:column; gap:18px}
.panel{
  background:var(--glass); border:1px solid var(--stroke);
  box-shadow:var(--shadow); border-radius:var(--radius); padding:14px;
}
.panel h2{margin:4px 0 10px 0; font-size:16px}
.block{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}

/* ---- Quiz grid ---- */
.quiz-container{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}
.card{
  display:flex; flex-direction:column; gap:12px;
  background:white; border:1px solid var(--stroke); box-shadow:var(--shadow);
  border-radius:var(--radius); padding:14px; min-height:260px;
}

/* Meta badges */
.card-head .meta{display:flex; gap:6px; flex-wrap:wrap}
.badge{
  font-size:12px; background:#f1faf4; color:var(--accent);
  border:1px solid #d8efe2; padding:3px 8px; border-radius:999px
}
.badge.difficulty{color:#845400; background:#fff7e6; border-color:#ffe5b3}
.badge.id{color:#3b3b3b; background:#f3f3f3; border-color:#e7e7e7}

/* Prompt text */
.card-body .prompt{margin:6px 0 8px 0; line-height:1.35; font-weight:600; font-size:18px}

/* ---- Hands (suit colored) ---- */
.hand{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:13px; background:#f7fbf9; border:1px dashed #d9ece1;
  padding:6px 8px; border-radius:10px; margin:2px 0
}
/* custom inline tags created in JS */
.hand s{color:#c41e3a; text-decoration:none} /* hearts */
.hand c{color:#1e3ac4; text-decoration:none} /* spades */
.hand d{color:#d4a017; text-decoration:none} /* diamonds */
.hand h{color:#0f7a4f; text-decoration:none} /* clubs */

/* ---- Options (instant feedback) ---- */
.options{display:grid; gap:8px}
.options button{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  text-align:left; padding:10px 12px; border-radius:12px;
  border:1px solid var(--stroke); background:#fbfffc; cursor:pointer;
  transition:transform .05s ease, background .1s ease, outline-color .1s ease;
}
.options button:active{ transform:scale(0.995) }
.options button:focus-visible{ outline:2px solid var(--focus) }

.options button .choice{ flex:1 }
.options button .mark{
  width:22px; height:22px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
  border:1px solid transparent; opacity:0; /* hidden until answered */
}

/* wrong click */
.options button.is-wrong{
  outline:2px solid var(--danger); background:#fff6f7;
}
.options button.is-wrong .mark{
  opacity:1; color:#8a0f1e; border-color:#f2bcc3;
}
.options button.is-wrong .mark::before{ content:"✗"; }

/* correct click */
.options button.is-correct{
  outline:2px solid var(--accent-2); background:#f4fff8;
}
.options button.is-correct .mark{
  opacity:1; color:#0d7a4f; border-color:#bfead5;
}
.options button.is-correct .mark::before{ content:"✓"; }

/* reveal the real correct answer after a wrong try */
.options button.show-correct{
  outline:2px dashed var(--accent-2);
}

/* hide free-typing + Check for pure MCQ flow (can be overridden) */
.free-input, .btn.check{ display:none !important; }

/* ---- Card footer ---- */
.card-foot{display:flex; gap:10px; align-items:center; justify-content:flex-start}
.explain-wrap{margin-left:auto}
.explain-wrap summary{cursor:pointer; color:var(--muted)}
.explanation{white-space:pre-wrap; line-height:1.35}

/* ---- Progress ---- */
.progress-wrap{display:flex; flex-direction:column; gap:8px}
.progress-bar{height:10px; border-radius:999px; background:#e9f3ed; border:1px solid #d6e6dc; overflow:hidden}
.progress-bar .fill{height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.progress-text{font-size:12px; color:var(--muted)}

/* ---- Tiny footer note ---- */
.footer-note{opacity:.7; font-size:12px; text-align:center; margin-top:8px}

/* ---- Responsive ---- */
@media (max-width: 980px){
  .layout{grid-template-columns: 1fr}
  .quiz-container{grid-template-columns: 1fr}
}

/* ---- Print (quick handouts) ---- */
@media print{
  .app-header, .sidebar, .btn, .footer-note{ display:none !important }
  .layout{ padding:0; margin:0 }
  .quiz-container{ grid-template-columns: 1fr }
  .card{ box-shadow:none; border:1px solid #ddd; page-break-inside:avoid }
}

/* ---- Accessibility helpers ---- */
::selection{ background:#c9f3de }
a:focus-visible{ outline:2px solid var(--focus); outline-offset:2px }