.practice-stage { min-height: 560px; }
[hidden] { display: none !important; }
.practice { max-width: 840px; }
#drill, #completion-title { scroll-margin-top: 100px; }
.practice h1 { margin-bottom: 20px; }
.practice-intro { max-width: 610px; }
.drill-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:36px; }
.drill-top p, .drill-top label { font-size:.85rem; color:var(--sand); }
.drill-top input { accent-color:var(--neon); width:18px; height:18px; vertical-align:middle; margin-right:6px; }
.practice-table { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hand-panel { background:var(--felt); border:1px solid var(--felt-light); border-radius:16px; padding:20px 12px; text-align:center; }
.practice .hand-label { color:var(--ivory); font:500 .9rem 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.1em; margin-bottom:18px; }
.cards { display:flex; gap:8px; justify-content:center; min-height:100px; }
.playing-card { display:flex; align-items:center; justify-content:center; width:70px; height:100px; border-radius:7px; background:var(--cream); color:#202020; font:600 1.9rem Georgia,serif; box-shadow:0 3px 8px #0003; }
.playing-card.red { color:#a52a26; }
.practice .hand-total { margin:16px 0 0; font:500 .85rem 'JetBrains Mono',monospace; color:var(--ivory); }
.practice #question { margin:28px 0 20px; }
.answers { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.answers button, .text-button { font:500 1rem 'DM Sans',sans-serif; cursor:pointer; }
.answers button { min-height:54px; color:var(--ivory); background:var(--graphite); border:1px solid var(--taupe); border-radius:8px; padding:12px; }
.answers button:last-child { grid-column:1 / -1; }
.answers button:hover:not([aria-disabled]) { background:var(--felt); border-color:var(--neon); }
.answers button[aria-disabled] { cursor:default; }
.answers button.correct { background:var(--neon); border-color:var(--neon); color:var(--felt); }
.answers button.incorrect { border:2px solid #f0978d; }
.feedback { color:var(--ivory); line-height:1.7; margin:22px 0; }
.practice button.btn-primary { cursor:pointer; border:0; }
.practice :focus-visible { outline:3px solid var(--neon); outline-offset:5px; }
.practice [tabindex="-1"]:focus { outline:none; }
.completion { padding:12px 0 36px; }
.practice #score { font:500 1.5rem 'DM Sans',sans-serif; color:var(--ivory); }
.practice .purchase-note { font-size:.85rem; }
.text-button { background:none; color:var(--sand); border:0; text-decoration:underline; text-underline-offset:4px; padding:12px 0; }
.practice-help { border-top:1px solid var(--felt-light); margin-top:36px; padding:24px 0 0; color:var(--sand); }
.practice-help summary { cursor:pointer; color:var(--ivory); }
.practice .practice-reference { font-size:.9rem; }
@media(max-width:560px) { .practice-table { gap:10px; } .cards { gap:4px; min-height:76px; } .playing-card { width:42px; height:76px; font-size:1.25rem; } .hand-panel { padding:16px 5px; } .drill-top { align-items:flex-start; flex-direction:column; gap:0; margin-bottom:18px; } .drill-top p { margin:0 0 12px; } .practice .btn-primary { padding:16px 20px; } }