/* Practice Lab additions: real card faces, drill/stats tabs, statistics panel.
 * Loaded after practice.css so it can extend without editing that file. */

/* ---------------------------------------------------------------- cards -- */
.playing-card {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 9px;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.42));
}
.playing-card.is-black { color: #16241f; }
.playing-card.is-red { color: #c0392b; }

.pc-face { fill: #fdf6e6; }
.pc-bevel { fill: none; stroke: rgba(17, 34, 29, 0.14); stroke-width: 0.7; }

.pc-rank,
.pc-face-letter {
  fill: currentColor;
  font-family: "Bodoni 72", Didot, Georgia, serif;
  font-weight: 700;
}
.pc-rank { font-size: 15px; letter-spacing: -0.04em; }
.pc-suit-sm { fill: currentColor; font-size: 11px; }
.pc-pip { fill: currentColor; font-size: 19px; }

.pc-ace-ring { fill: none; stroke: currentColor; stroke-width: 0.9; opacity: 0.42; }
.pc-ace-suit { fill: currentColor; font-size: 40px; }

.pc-face-panel { fill: rgba(17, 34, 29, 0.045); stroke: currentColor; stroke-width: 0.7; opacity: 0.9; }
.pc-face-rule { fill: none; stroke: currentColor; stroke-width: 0.5; opacity: 0.4; }
.pc-face-suit { fill: currentColor; font-size: 22px; }
.pc-face-letter { font-size: 34px; letter-spacing: -0.05em; }

.pc-back-field { fill: #123f34; }
.pc-back-rule { fill: none; stroke: rgba(244, 233, 207, 0.5); stroke-width: 0.8; }

/* The dealt card sits in a fixed-height stage so the layout never jumps. */
.card-stage {
  display: grid;
  place-items: center;
  min-height: min(46vh, 330px);
  padding: 4px 0 2px;
}
.card-stage .playing-card { width: min(196px, 54vw); }

.card-dealt { animation: card-deal 0.26s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes card-deal {
  from { opacity: 0; transform: translateY(-13px) rotate(-3.5deg) scale(0.93); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card-dealt { animation: none; }
}

/* --------------------------------------------------------------- tabs --- */
.practice-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(2, 17, 14, 0.42);
}
.practice-tabs button {
  min-height: 46px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
}
.practice-tabs button[aria-selected="true"] {
  color: var(--ink);
  background: var(--cream);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

/* --------------------------------------------------------------- stats -- */
.stats-panel { display: grid; gap: 12px; }
.stats-panel[hidden] { display: none; }

.stat-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.stat-hero article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(2, 17, 14, 0.38);
}
.stat-hero span {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.stat-hero strong {
  font: 700 clamp(1.5rem, 6vw, 2.1rem)/1 "Bodoni 72", Didot, serif;
}
.stat-hero small { color: var(--muted); font-size: 0.62rem; }
.stat-hero .is-flame strong { color: var(--yellow); }

.stats-card {
  padding: clamp(16px, 4vw, 24px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(10, 54, 44, 0.95), rgba(4, 27, 23, 0.97));
}
.stats-card h3 {
  margin: 4px 0 14px;
  font: 700 1.35rem/1 "Bodoni 72", Didot, Georgia, serif;
  letter-spacing: -0.02em;
}

/* Trend: one bar per recent session, newest on the right. */
.trend {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 88px;
  padding-top: 4px;
}
.trend div {
  flex: 1;
  min-width: 0;
  min-height: 3px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--green), rgba(93, 204, 139, 0.28));
}
.trend div.is-perfect { background: linear-gradient(180deg, var(--yellow), rgba(229, 185, 75, 0.3)); }
.trend div.is-weak { background: linear-gradient(180deg, var(--red), rgba(226, 85, 62, 0.28)); }
.trend-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Per-rank accuracy, weakest first — the "drill this next" view. */
.rank-rows { display: grid; gap: 8px; }
.rank-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 46px;
  gap: 11px;
  align-items: center;
}
.rank-row b {
  font: 700 1.05rem/1 "Bodoni 72", Didot, serif;
  text-align: center;
}
.rank-row i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
}
.rank-row i span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--green);
  transition: width 0.3s ease;
}
.rank-row.is-weak i span { background: var(--red); }
.rank-row.is-mid i span { background: var(--yellow); }
.rank-row em {
  color: var(--muted);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stats-empty {
  padding: 26px 20px;
  color: var(--muted);
  text-align: center;
  line-height: 1.55;
}
.stats-empty strong {
  display: block;
  margin-bottom: 6px;
  color: var(--cream);
  font: 700 1.3rem/1.1 "Bodoni 72", Didot, Georgia, serif;
}

.stats-foot {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.5;
}
.stats-reset {
  margin-top: 10px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}
.stats-reset:active { background: rgba(255, 255, 255, 0.07); }

@media (min-width: 620px) {
  .stat-hero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- plans -- */
.pro-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-self: center;
  min-width: min(100%, 290px);
}
.pro-plan {
  display: grid;
  gap: 3px;
  padding: 15px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(2, 17, 14, 0.34);
  text-align: center;
  text-decoration: none;
  color: var(--cream);
}
.pro-plan span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pro-plan strong {
  font: 700 clamp(1.6rem, 7vw, 2.2rem)/1 "Bodoni 72", Didot, serif;
  letter-spacing: -0.03em;
}
.pro-plan em {
  color: var(--muted);
  font-size: 0.62rem;
  font-style: normal;
}
.pro-plan.is-featured {
  border-color: var(--yellow);
  background: rgba(229, 185, 75, 0.09);
}
.pro-plan.is-featured strong { color: var(--yellow); }
.pro-plan:active { transform: scale(0.98); }
.pro-plans.is-single { grid-template-columns: 1fr; }
.pro-plans.is-single .pro-plan { padding: 19px 22px; }