/* Muck GTO Learn's quick start (assets/learn-refresh.js; Shaun, 2026-10-19). The cards and blocks are the articles'
   (assets/card-visuals.css), the table is the trainer's (assets/hand-review.css); this is the page around them. lq- */
.learn-context .felt.lq{align-items:stretch;justify-content:flex-start;gap:var(--muck-space-5,20px);padding:var(--muck-space-6,28px)}
.lq .acd-box{margin:0}
.lq-col{display:flex;flex-direction:column;gap:var(--muck-space-5,20px);min-width:0}
.lq-more{margin:0;color:var(--muck-text-3);font-size:13px}
.lq-more a{color:var(--muck-gold-muted);text-decoration:none}
.lq-more a:hover{color:var(--muck-gold)}
.lq-count{margin:0;color:var(--muck-text-3);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* what wins: the best hand and the rules on the left, the ladder on the right */
.lq-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--muck-space-6,28px);align-items:start}
.lq-nuts{width:auto}
.lq-facts{display:grid;gap:var(--muck-space-4,16px);margin:0;padding:0;list-style:none;counter-reset:lq}
.lq-facts li{display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:14px;line-height:1.45;color:var(--muck-text-2)}
.lq-facts li::before{counter-increment:lq;content:counter(lq);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--muck-surface-3);color:var(--muck-gold);font-size:12px;font-weight:800}
.lq-facts b{display:block;margin-bottom:2px;color:var(--muck-text);font-size:15px}

/* spot the winner: each hand is a button */
.lq-stage{display:flex;flex-direction:column;gap:var(--muck-space-3,12px);max-width:560px}
.lq-choice{width:100%;margin:0;padding-left:10px;padding-right:10px;border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.lq-choice:hover:enabled{background:var(--muck-surface-2)}
.lq-choice:focus-visible{outline:3px solid var(--muck-gold);outline-offset:-3px}
.lq-choice:disabled{cursor:default;color:inherit}
.lq-choice.lq-wrong{opacity:.5}

/* pick your five: the cards are buttons */
.lq-build{max-width:560px}
.lq-build button.acd{padding:0;border:0;cursor:pointer;transition:transform var(--muck-dur-fast,120ms) var(--muck-ease,ease),box-shadow var(--muck-dur-fast,120ms) var(--muck-ease,ease)}
.lq-build button.acd:focus-visible{outline:3px solid var(--muck-gold);outline-offset:2px}
.lq-build button.acd:disabled{cursor:default}
.lq-build .acd.lq-picked{transform:translateY(-5px);box-shadow:0 0 0 2px var(--muck-gold),0 0 14px #ffd34f66}
.lq-build .acd.lq-picked.is-out{transform:none;box-shadow:0 1px 0 #0006}
.lq-build .lq-count{margin-top:var(--muck-space-4,16px)}

/* play a hand: the trainer's table, Larry's face in his seat */
.lq-spot{width:100%;max-width:520px;margin:0 auto}
.lq-face{width:24px;height:24px;margin-bottom:3px;border-radius:50%;object-fit:cover}
.lq-done{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:var(--muck-space-6,28px);align-items:start}
/* The trainer's table is drawn at article size (assets/hand-review.css: 520px, 26px cards); this panel is three times
   that wide, so on a wide screen it's the same table half as big again, centred (Shaun, 2026-10-21: "why is this
   board/cards so small?"). zoom keeps every proportion and the text sharp. */
@media (min-width:900px) and (min-height:860px){
  .lq-spot{zoom:1.25}
  .lq-done{grid-template-columns:minmax(0,650px) minmax(0,1fr)}
}
/* ...and half as big again where the screen is tall enough; short windows keep the article size, so Check and Bet
   stay in view */
@media (min-width:900px) and (min-height:1000px){
  .lq-spot{zoom:1.5}
  .lq-done{grid-template-columns:minmax(0,780px) minmax(0,1fr)}
}
.lq-deeper h3{margin:0 0 6px;color:var(--muck-text);font-size:15px}
.lq-deeper ul{margin:0;padding:0;list-style:none}
.lq-deeper a{display:block;padding:10px 0;border-top:1px solid var(--muck-line);color:var(--muck-text);text-decoration:none}
.lq-deeper a b{display:block;font-size:14px}
.lq-deeper a span{display:block;margin-top:2px;color:var(--muck-text-3);font-size:12px}
.lq-deeper a:hover b{color:var(--muck-gold)}
.lq-deeper a:focus-visible{outline:3px solid var(--muck-gold);outline-offset:2px}

@media(max-width:900px){.lq-intro,.lq-done{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.learn-context .felt.lq{gap:var(--muck-space-4,16px);padding:14px}}
@media(max-width:360px){.lq-face{display:none}}   /* the narrowest phones: his seat would touch the pot */
/* Spot the winner (2026-10-23, "such a wasted use of space"): the two hands side by side as big tiles you tap, the ladder
   beside them to check against; on phones the tiles stack and the ladder follows */
.lq-quiz{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:var(--muck-space-6,28px);align-items:start}
.lq-quiz .lq-stage{max-width:none}
.lq-quiz .lq-versus{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:var(--muck-space-4,16px);margin:0;padding:0;border:0;background:none}   /* side by side only when five big cards fit in each (Shaun, 2026-10-23: "seems to get cut off") */
.lq-quiz .lq-versus .acd-vrow,.lq-quiz .lq-versus .acd-vrow+.acd-vrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--muck-space-4,16px);min-height:200px;padding:var(--muck-space-6,28px) var(--muck-space-4,16px);border:1px solid var(--muck-line-strong);border-radius:var(--muck-radius-lg,12px);background:var(--muck-surface-1);text-align:center}
.lq-quiz .lq-choice:hover:enabled{border-color:var(--muck-gold-muted);background:var(--muck-surface-2)}
.lq-quiz .lq-versus .acd-vrow.is-win{border-color:var(--muck-gold);box-shadow:0 0 0 1px var(--muck-gold)}
.lq-quiz .lq-versus .acd-who{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muck-text-3)}
.lq-quiz .lq-versus .acd-tag{min-height:22px}
.lq-quiz .lq-versus .acd-row{gap:8px;justify-content:center}
.lq-quiz .lq-versus .acd--lg{width:58px;height:80px;border-radius:7px}
.lq-quiz .lq-versus .acd--lg b{font-size:26px}
.lq-quiz .lq-versus .acd--lg i{font-size:22px}
.lq-quiz .lq-versus figcaption{grid-column:1 / -1;margin:0;text-align:center;font-size:16px}
.lq-quiz .lq-ladder{margin:0}
@media(max-width:900px){.lq-quiz{grid-template-columns:1fr}}
@media(max-width:600px){.lq-quiz .lq-versus{grid-template-columns:minmax(0,1fr)}.lq-quiz .lq-versus .acd-vrow,.lq-quiz .lq-versus .acd-vrow+.acd-vrow{min-height:0;padding:var(--muck-space-4,16px)}.lq-quiz .lq-versus .acd--lg{width:46px;height:64px}.lq-quiz .lq-versus .acd--lg b{font-size:21px}.lq-quiz .lq-versus .acd--lg i{font-size:18px}}