body{background:#0e0e0e;color:#eee;font-family:Inter,system-ui,sans-serif}
.learn-context{padding-top:24px;padding-bottom:48px}.learn-context .context-toolbar,.learn-context .steps,.learn-context .lesson{max-width:none;margin-left:auto;margin-right:auto}
.context-toolbar{display:flex;align-items:center;justify-content:space-between;color:#aeb0b4;font-size:13px}.context-toolbar .quiet{color:#dfc483}
.learn-context .steps{justify-content:flex-start;margin-top:8px;margin-bottom:20px}.steps i{background:#333}.steps b{border-color:#444}.steps button{color:#888}.steps button[aria-current] b{background:#ffd34f}.steps button.done b{border-color:#d8bd7c;color:#d8bd7c}
.learn-context .lesson{border:1px solid #303030;border-radius:10px;background:#141414;box-shadow:none}.lesson-heading{text-align:left;padding:24px 28px 20px}.lesson-heading h2{font-size:30px;letter-spacing:-1px;line-height:1.1;margin:0 0 8px;font-weight:800;outline:none}.lesson-heading p{color:#b6b6b6}
.felt,.felt.play{background:#111;border-color:#292929}.felt:before{display:none}.felt.intro{gap:18px}.goal{padding:0 0 8px}.goal strong{color:#dec383}.goal p,.ranking-caption{color:#bbb}.rank-list{max-width:680px}.rank-list li{border-color:#2b2b2b}.rank-list li:first-child{background:#17211a}.rank-list li:last-child{background:#241b1b}.rank-list li{padding:8px 10px}.rank-tag{color:#d9bf80}.hand-choice{background:#191919;border-color:#3a3a3a;border-radius:8px}.hand-choice:hover{background:#242424}.hand-choice.correct{background:#1d3022}.card:not(.empty):not(.back){color:white;border:0;box-shadow:none}.card.suit-s{background:#4b4f55}.card.suit-d{background:#2c5fd0}.card.suit-c{background:#2e9a4c}.card.suit-h{background:#c8313b}.card.back{background:repeating-linear-gradient(45deg,#3a2a5c 0 6px,#2d2047 6px 12px);border-color:#77628b}.card.empty{background:#202020;border-color:#444}.below{border-top:1px solid #262626}.primary{background:linear-gradient(#ffdf72,#ffcc3e);border-radius:7px}.secondary{background:#232323;border-color:#444}.label,.bank,.opponent-name{color:#aaa}.pot{background:#26221a;border-color:#655538}.preview-note{color:#777}.rules-top h2{font-family:Inter,system-ui}dialog{background:#191919;border-color:#444}
@media(max-width:600px){.learn-context{padding:12px 12px 30px}.context-toolbar{font-size:11px}.learn-context .steps{justify-content:center;margin-bottom:12px}.lesson-heading,.lesson:has(.intro) .lesson-heading{padding:18px 14px 14px}.lesson-heading h2{font-size:26px}.rank-list li{padding:5px 4px}.learn-context .lesson{border-radius:8px}.felt.intro{padding:16px 10px}.context-toolbar .quiet{padding:10px 4px}}

/* The steps and Rules sit in the lesson box's header, on the right (Shaun, 2026-10-15: "move the top stuff to inside that
   box header on the right"); on phones they wrap under the title. */
.learn-context{padding-top:24px}
.learn-context .lesson-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.learn-context .lh-side{display:flex;align-items:center;gap:22px}
.learn-context .lesson-heading .steps{margin:0}
.learn-context .lh-side .quiet{color:#dfc483;font-size:13px}
@media(max-width:600px){
 .learn-context{padding-top:12px}
 .learn-context .lh-side{width:100%;justify-content:space-between;gap:10px}
 .learn-context .lh-side .quiet{padding:8px 0;white-space:nowrap}
 .learn-context .lh-side .quiet span{display:none}
 .learn-context .lesson-heading .steps{gap:6px}
 .learn-context .lesson-heading .steps button{white-space:nowrap;gap:5px;font-size:12px}
 .learn-context .lesson-heading .steps b{width:24px;height:24px}
 .learn-context .lesson-heading .steps i{width:10px}
 /* The river hands: bigger cards; Best / Worst under the hand's name instead of a column of their own ("the cards are
    too small, and the best/worst take up valuable space on the right") */
 .rank-list li{grid-template-columns:16px 1fr auto;grid-template-rows:auto auto;column-gap:8px;row-gap:0;padding:7px 6px}
 .rank-list li .rank-number{grid-row:1 / 3}
 .rank-list li > strong{grid-column:2;grid-row:1;align-self:end;font-size:13px}
 .rank-list li .rank-tag{grid-column:2;grid-row:2;align-self:start;text-align:left;font-size:11px}
 .rank-list li > .cards{grid-column:3;grid-row:1 / 3;gap:3px}
 .rank-list .card{width:31px;height:42px;padding:3px 4px}
 .rank-list .card b,.rank-list .card i{font-size:14px}
}

/* Under the rankings: why trips, straights and quads never reach the river */
.ranking-note{max-width:680px;margin:0;color:var(--muck-text-2);font-size:13px;line-height:1.6;text-align:center}

/* Teach the shape of the game before asking the player to read a hand. */
.learn-context .felt.basics{align-items:stretch;gap:28px;padding:36px clamp(24px,4vw,64px);min-height:430px}
.basics-opening{max-width:780px}
.basics-opening h3{font-size:clamp(23px,2.4vw,34px);letter-spacing:-.8px;line-height:1.2;margin:0 0 12px;color:#f4f2e9}
.basics-opening p{margin:0;color:#a6aaa5;line-height:1.6}
.basics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.basics-item{border-top:1px solid #3a403b;padding-top:18px}
.basics-number{color:#d6bd76;font-size:11px;letter-spacing:2px}
.basics-item h4{font-size:18px;letter-spacing:-.3px;margin:10px 0}
.basics-item p{font-size:14px;line-height:1.7;color:#b3b9b1;margin:0;max-width:360px}
.basics-low{border-left:3px solid #758c76;padding:3px 0 3px 18px;max-width:920px}
.basics-low strong{font-size:14px;color:#dce5d8}
.basics-low p{font-size:14px;line-height:1.7;color:#b3b9b1;margin:6px 0 0}
.basics-win{font-size:14px;color:#d6bd76;line-height:1.6;margin:0}
@media(max-width:600px){
 .learn-context .felt.basics{padding:22px 18px;gap:22px;min-height:0}
 .basics-opening h3{font-size:24px}
 .basics-opening p,.basics-item p,.basics-low p,.basics-win{font-size:13px}
 .basics-grid{grid-template-columns:1fr;gap:18px}
 .basics-item{padding-top:14px;display:grid;grid-template-columns:26px 1fr;column-gap:8px}
 .basics-number{grid-row:1 / 3;padding-top:3px}
 .basics-item h4{font-size:16px;margin:0 0 6px}
 .basics-item p{grid-column:2;max-width:none}
 .basics-low{padding-left:13px}
}