/* Muck GTO Learn's two-minute explainer (assets/learn-explainer.js; Shaun, 2026-10-24). Six beats, one idea each, big
   taps. Cards are the articles' (card-visuals.css, acd-) in the player's Cards setting (card-faces.css). qs- */
.qs{box-sizing:border-box;max-width:820px;margin:0 auto;padding:var(--muck-space-4) var(--muck-space-4) var(--muck-space-7,48px);color:var(--muck-text);font-family:var(--muck-font)}
.qs *,.qs *::before,.qs *::after{box-sizing:border-box}

/* a thin line for where you are, and a way straight to the tables */
.qs-top{display:flex;align-items:center;gap:var(--muck-space-4);margin-bottom:var(--muck-space-6)}
.qs-progress{flex:1;height:4px;border-radius:var(--muck-radius-pill);background:var(--muck-surface-3);overflow:hidden}
.qs-progress i{display:block;height:100%;width:0;background:var(--muck-gold);border-radius:inherit;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.qs-skip{color:var(--muck-text-2);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.qs-skip:hover{color:var(--muck-gold)}
.qs-final .qs-skip{visibility:hidden}

.qs-stage{display:flex;flex-direction:column;align-items:center;gap:var(--muck-space-6);text-align:center}
.qs-head{display:flex;flex-direction:column;gap:var(--muck-space-2);max-width:620px}
.qs-title{margin:0;font-size:clamp(30px,6vw,48px);line-height:1.05;letter-spacing:-.035em;font-weight:800}
.qs-title:focus{outline:none}
.qs-sub{margin:0;color:var(--muck-text-2);font-size:clamp(15px,2.4vw,18px);line-height:1.5}
.qs-body{display:flex;flex-direction:column;align-items:center;gap:var(--muck-space-5);width:100%}
.qs-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--muck-space-3);min-height:60px;width:100%}
.qs-say{flex-basis:100%;min-height:22px;margin:0;color:var(--muck-text-2);font-size:15px}
.qs-say.good{color:var(--muck-green)}.qs-say.warn{color:var(--muck-gold)}
.qs-next.mk-btn{min-width:200px;min-height:52px;font-size:17px;white-space:nowrap}

/* cards: big, and a smaller size for the choices */
.qs-row{display:flex;gap:clamp(6px,1.6vw,12px);justify-content:center}
.qs .qs-c.acd--lg{--w:clamp(48px,13vw,92px);width:var(--w);height:calc(var(--w) * 1.4);border-radius:calc(var(--w) * .12);flex-direction:column;gap:2px}
.qs .qs-c.acd--lg b{font-size:calc(var(--w) * .42)}.qs .qs-c.acd--lg i{font-size:calc(var(--w) * .34)}
.qs .qs-c.qs-c--sm{--w:clamp(30px,7.5vw,38px)}
.qs .qs-c{transition:transform .17s ease,opacity .25s ease,box-shadow .25s ease}
.qs .qs-c.qs-turn{transform:rotateY(90deg)}
.qs .qs-c.qs-lit{transform:translateY(-6px);box-shadow:0 0 0 3px var(--muck-gold),0 10px 22px #ffd34f40}
.qs .qs-c.qs-dim{opacity:.32}

/* 2. the ladder */
.qs-ladder{width:100%;max-width:420px;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.qs-ladder li{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--muck-line);border-radius:10px;background:var(--muck-surface-1);text-align:left;transition:opacity .4s ease,transform .4s ease}
.qs-ladder li b{font-size:16px}
.qs-rank{color:var(--muck-text-3);font-weight:800;font-size:13px}
.qs-ladder li.qs-out{opacity:0;transform:translateX(24px) scale(.96)}
.qs-ladder.is-muck li:first-child{border-color:var(--muck-gold);background:color-mix(in srgb,var(--muck-gold) 10%,var(--muck-surface-1))}
.qs-ladder.is-muck li:first-child .qs-rank{color:var(--muck-gold)}
.qs-ladder.is-muck li:first-child b::after{content:'  BEST';color:var(--muck-gold);font-size:11px;letter-spacing:.12em}
.qs-ladder.is-muck li:last-child b::after{content:'  WORST';color:var(--muck-text-3);font-size:11px;letter-spacing:.12em}

/* 3. tap the winner: two whole hands, each one big button */
.qs-count{margin:0;color:var(--muck-text-3);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.qs-duel{display:flex;flex-direction:column;align-items:center;gap:var(--muck-space-3);width:100%}
.qs-vs{color:var(--muck-text-3);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.qs-hand{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:560px;padding:16px;border:2px solid var(--muck-line-strong);border-radius:16px;background:var(--muck-surface-1);color:inherit;font:inherit;cursor:pointer;transition:border-color .2s,transform .15s,opacity .3s}
.qs-hand:hover:enabled{border-color:var(--muck-gold-muted);transform:translateY(-2px)}
.qs-hand:focus-visible{outline:3px solid var(--muck-gold);outline-offset:3px}
.qs-hand:disabled{cursor:default}
.qs-hand.is-win{border-color:var(--muck-gold);box-shadow:0 0 0 4px #ffd34f22}
.qs-hand.is-lose{opacity:.4}
.qs-hand-tag{color:var(--muck-text-3);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* 4. your cards are optional */
.qs-seven{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--muck-space-5)}
.qs-group{display:flex;flex-direction:column;align-items:center;gap:8px}
.qs-label{color:var(--muck-text-3);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.qs-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--muck-space-3);width:100%;max-width:720px}
.qs-choice{padding:14px 8px;border:2px solid var(--muck-line-strong);border-radius:14px;background:var(--muck-surface-1);cursor:pointer;transition:border-color .2s,transform .15s,opacity .3s}
.qs-choice .qs-row{gap:3px}
.qs-choice:hover:enabled{border-color:var(--muck-gold-muted);transform:translateY(-2px)}
.qs-choice:focus-visible{outline:3px solid var(--muck-gold);outline-offset:3px}
.qs-choice:disabled{cursor:default}
.qs-choice.is-win{border-color:var(--muck-gold);box-shadow:0 0 0 4px #ffd34f22}
.qs-choice.is-lose{opacity:.4}

/* 5. the hand: the trainer's table, bigger */
.qs-table{width:100%;max-width:520px;margin:0}
/* the trainer's table is drawn at article size (520px, small cards): scaled up where there's room, so it reads as a real table */
@media(min-width:760px){.qs-table{zoom:1.4}}
.qs-face{width:38px;height:38px;margin-bottom:4px;border-radius:50%;object-fit:cover;border:2px solid var(--muck-gold-muted)}
.qs-table .hr-card.qs-lit{box-shadow:0 0 0 2px var(--muck-gold),0 6px 14px #ffd34f40;transform:translateY(-3px)}
.qs-table .hr-card.qs-dim{opacity:.35}

/* the hand keeps one layout street to street: the line under the title and Bella's line each hold two lines' room, so
   a longer one doesn't push the table and buttons (Shaun, 2026-10-24: "keep the text 1 or 2 lines so it doesnt jump up
   and down as we go through each street") */
.qs-stage[data-beat="5"] .qs-title{white-space:nowrap}
.qs-stage[data-beat="5"] .qs-sub{min-height:3em}
.qs-stage[data-beat="5"] .qs-say{min-height:2.9em;line-height:1.45}

/* 6. play */
.qs-final-box{display:flex;flex-direction:column;align-items:center;gap:var(--muck-space-5);width:100%;max-width:560px}
.qs-play.mk-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:96px;font-size:28px;font-weight:800;letter-spacing:-.01em}
.qs-play small{font-size:13px;font-weight:600;opacity:.75;letter-spacing:0}
.qs-got{display:grid;gap:8px;width:100%;margin:0;padding:0;list-style:none;text-align:left}
.qs-got li{display:grid;grid-template-columns:26px 1fr;column-gap:12px;align-items:center;padding:10px 14px;border:1px solid var(--muck-line);border-radius:12px;background:var(--muck-surface-1)}
.qs-got li::before{content:'✓';grid-row:span 2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--muck-gold);color:var(--muck-gold-ink);font-weight:800}
.qs-got b{font-size:15px}.qs-got span{color:var(--muck-text-2);font-size:13px}
.qs-also{display:flex;gap:10px;align-items:center;margin:0;color:var(--muck-text-3);font-size:13px}
.qs-link{padding:0;border:0;background:none;color:var(--muck-text-2);font:inherit;text-decoration:none;cursor:pointer}
.qs-link:hover{color:var(--muck-gold)}
.qs-final .qs-foot{display:none}

@media(max-width:600px){
 .qs-stage{gap:var(--muck-space-4)}
 .qs-choices{grid-template-columns:1fr;gap:8px}
 .qs-next.mk-btn{flex:1;min-width:0}
 /* each beat fits a phone screen with its button: smaller cards where there are many, tighter boxes */
 .qs-title{font-size:30px}
 .qs-ladder{gap:4px}.qs-ladder li{padding:7px 12px}.qs-ladder li b{font-size:15px}
 .qs-hand{padding:10px;gap:6px}
 .qs .qs-duel .qs-c.acd--lg{--w:44px}
 .qs-seven{flex-wrap:nowrap;gap:12px}
 .qs-seven .qs-row{gap:4px}
 .qs .qs-seven .qs-c.acd--lg{--w:34px}
 .qs-choice{padding:8px}
}
@media(prefers-reduced-motion:reduce){.qs *{transition:none}}