@font-face{font-family:Learn;src:url('/assets/fonts/Inter-Share-500.ttf')}@font-face{font-family:Learn;src:url('/assets/fonts/Inter-Share-800.ttf');font-weight:800}
:root{color-scheme:dark;--gold:#ffda58;--ink:#f5f2e8;--muted:#a8b6ac;--line:#ffffff20}*{box-sizing:border-box}body{margin:0;background:#0b100e;color:var(--ink);font:15px Learn,system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.top{max-width:1060px;margin:auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between}.top img{width:130px;display:block}.quiet{background:none;border:0;color:var(--muted);padding:12px;font-size:13px}.quiet span{border:1px solid #778378;border-radius:50%;margin-left:6px;padding:0 5px}main{max-width:940px;margin:0 auto;padding:4px 24px 24px}.steps{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px 0 26px}.steps button{display:flex;align-items:center;gap:10px;padding:7px 0;background:none;border:0;color:#819286;font-weight:800;font-size:13px}.steps button[aria-current]{color:var(--ink)}.steps b{display:grid;place-items:center;border:1px solid #43564a;border-radius:50%;width:30px;height:30px}.steps button[aria-current] b{background:var(--gold);color:#101510;border-color:var(--gold)}.steps button.done b{color:#9be0b2;border-color:#9be0b2}.steps i{width:70px;height:1px;background:#334439}.lesson{border:1px solid #3c5142;border-radius:22px;overflow:hidden;background:#111b16;box-shadow:0 24px 90px #0004}.lesson-heading{padding:28px 20px 22px;text-align:center}.lesson-heading h1{font-size:36px;line-height:1.08;letter-spacing:-1.4px;margin:0 0 10px;font-weight:800;outline:none}.lesson-heading p{margin:0;color:var(--muted);line-height:1.5}.felt{position:relative;background:radial-gradient(ellipse at 50% 30%,#214d3a,#102b20 85%);border-top:1px solid #64846640;border-bottom:1px solid #64846640;padding:28px;min-height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}.felt:before{content:'';position:absolute;inset:10px;border:1px solid #c5b16c20;border-radius:55%;pointer-events:none}.hand-options{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%;position:relative}.hand-choice{display:flex;align-items:center;flex-direction:column;gap:18px;padding:24px 10px;background:#061b134d;border:1px solid #8aa68b60;border-radius:14px;color:var(--ink);transition:background .15s,transform .15s}.hand-choice:hover{background:#34583d;transform:translateY(-3px)}.hand-choice:disabled{transform:none}.hand-choice.correct{background:#244f31;border:2px solid #a6e9a6}.hand-choice.wrong{border-color:#ec9d80;opacity:.6}.hand-choice strong{font-size:14px}.cards{display:flex;align-items:center;justify-content:center;gap:7px;position:relative}.card{width:48px;height:68px;border-radius:7px;background:#f7f1df;color:#18231e;border:1px solid #fff9;box-shadow:0 4px 0 #0003;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:6px 8px;font-style:normal;flex-shrink:0}.card b{font:800 24px/1 Learn,system-ui}.card i{font-style:normal;font-size:23px;line-height:1;align-self:flex-end}.card.red{color:#b63837}.card.back{background:repeating-linear-gradient(45deg,#294439,#294439 4px,#1c3329 4px,#1c3329 8px);border:2px solid #bba675;align-items:center;justify-content:center;color:#cfbd86}.card.back i{align-self:center}.card.empty{border:1px dashed #71947c66;background:#0001;box-shadow:none}.card.pick{cursor:pointer;transition:transform .15s,box-shadow .15s}.card.pick[aria-pressed=true]{transform:translateY(-8px);outline:3px solid var(--gold);outline-offset:2px}.card.best{outline:3px solid var(--gold);outline-offset:2px}.card.unused{opacity:.28}.card-group{text-align:center;position:relative}.label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#bbccbb;display:block;margin-bottom:14px}.selection{font-size:13px;color:var(--gold);margin:0;min-height:18px}.below{padding:20px 28px 24px}#feedback{margin:0 0 16px;text-align:center;min-height:23px;color:#c1d0bf;line-height:1.5}#feedback.good{color:#b6e8b6}#feedback.warn{color:#ffd1ad}.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.primary,.secondary{display:flex;justify-content:center;align-items:center;min-height:48px;border-radius:8px;padding:12px 24px;font-weight:800;font-size:14px;text-decoration:none;border:1px solid transparent;min-width:170px}.primary{background:var(--gold);color:#121710}.primary:disabled{opacity:.4}.primary:hover:enabled{background:#ffe88f}.secondary{background:#ffffff06;border-color:#60705f;color:var(--ink)}.preview-note{text-align:center;color:#6c8173;font-size:11px;margin:18px 0}.opponent{display:flex;align-items:center;gap:12px}.opponent img{width:42px;height:42px;object-fit:cover;border:1px solid #bea86b;border-radius:50%}.opponent .cards{gap:4px}.opponent .card{width:29px;height:40px;padding:4px}.opponent .card b{font-size:14px}.opponent .card i{font-size:14px}.opponent-name{font-size:12px;color:#c6d3c6}.pot{font-size:13px;background:#0c2018b0;border:1px solid #ccb96550;padding:7px 16px;border-radius:20px;color:var(--gold)}.hand-bottom{display:flex;width:100%;justify-content:center;gap:32px;align-items:center}.bank{font-size:12px;color:#bdcbbd}.bank strong{display:block;color:white;font-size:22px;margin-top:4px}.felt.play{gap:15px;padding:22px;min-height:320px}.win-title{font-size:26px;color:var(--gold);margin:0;font-weight:800}.summary{color:#d0decd;font-size:13px;text-align:center;margin:0}.rules-top{display:flex;justify-content:space-between;align-items:center}.rules-top h2{font-size:24px;margin:0}dialog{background:#142019;border:1px solid #627455;border-radius:16px;color:var(--ink);padding:24px;width:min(500px,calc(100vw - 28px));max-height:85dvh;overflow:auto;line-height:1.6}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}dialog p{font-size:14px;color:#c1cdbc}details{border-top:1px solid var(--line);padding:14px 0}summary{cursor:pointer;font-weight:800;font-size:14px}li{font-size:14px}.action-note{font-size:12px;color:#a8bca9;margin:0;text-align:center}
@media(max-width:600px){.top{padding:14px 18px}.top img{width:108px}main{padding:0 12px 16px}.steps{gap:9px;margin:6px 0 16px}.steps i{width:22px}.steps button{font-size:12px;gap:7px}.steps b{width:26px;height:26px}.lesson{border-radius:16px}.lesson-heading{padding:22px 14px 18px}.lesson-heading h1{font-size:28px;letter-spacing:-1px}.lesson-heading p{font-size:13px}.felt{padding:20px 14px;gap:22px;min-height:285px}.hand-options{grid-template-columns:1fr;gap:12px}.hand-choice{padding:14px 10px;gap:10px}.hand-choice strong{font-size:12px}.cards{gap:6px}.card{width:43px;height:59px;padding:5px 7px}.card b{font-size:22px}.card i{font-size:21px}.below{padding:16px}.actions{gap:8px;flex-wrap:nowrap}.actions>*{flex:1;min-width:0;padding:12px 10px}.actions:has(a){flex-wrap:wrap}.actions:has(a) a{flex-basis:100%}#feedback{font-size:13px;margin-bottom:12px;min-height:36px}.felt.play{padding:18px 10px;min-height:300px;gap:15px}.label{margin-bottom:12px}.hand-bottom{gap:22px}.preview-note{margin:12px 0;font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none;scroll-behavior:auto}}

.felt.intro{padding:22px 28px;gap:20px}.goal{text-align:center;position:relative}.goal strong{display:block;margin-top:13px;color:var(--gold);font-size:14px}.goal p{margin:6px 0 0;font-size:13px;color:#c1d0bf}.rank-list{position:relative;list-style:none;padding:0;margin:0;width:100%;max-width:580px}.rank-list li{display:grid;grid-template-columns:20px 1fr 146px 42px;gap:10px;align-items:center;border-top:1px solid #ffffff16;padding:7px 0;font-size:12px}.rank-number{color:#8ba392;font-size:11px}.rank-list .cards{gap:4px}.rank-list .card{width:26px;height:34px;padding:3px 4px;border-radius:4px;box-shadow:none}.rank-list .card b{font-size:12px}.rank-list .card i{font-size:12px}.rank-tag{font-size:10px;color:var(--gold);text-align:right}.rank-list li:last-child .rank-tag{color:#edab95}
@media(max-width:600px){.felt.intro{padding:16px 14px;gap:15px}.intro .goal .card{width:37px;height:48px}.goal p{font-size:11px}.rank-list li{grid-template-columns:14px 1fr 116px 30px;gap:5px;padding:5px 0;font-size:11px}.rank-list .cards{gap:3px}.rank-list .card{width:21px;height:29px;padding:2px 3px}.rank-list .card b,.rank-list .card i{font-size:11px}.rank-tag{font-size:9px}}
@media(max-width:600px){.lesson:has(.intro) .lesson-heading{padding:16px 12px 12px}.lesson:has(.intro) .below{padding:10px 14px 14px}.lesson:has(.intro) #feedback{min-height:0;margin-bottom:10px;font-size:12px}.rank-list li{padding:4px 0}}

.ranking-caption{position:relative;margin:0 0 -10px;color:#c1d0bf;font-size:11px;text-transform:uppercase;letter-spacing:1px}

/* Phones, while you go through the lesson (Shaun, 2026-10-17): no Muck GTO menu bar, and the lesson's buttons stay at the
   bottom of the screen: the card is exactly the screen's height, its middle scrolls by itself, the button bar sits under it. */
@media(max-width:600px){
.gto-sub{display:none}
main.learn-context{padding-bottom:12px}
.learn-context .lesson{display:flex;flex-direction:column;height:calc(100dvh - 77px - 12px)}   /* header 65 + 12 above, 12 below: exactly the screen */
.learn-context .felt{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-bottom:0}   /* a shadow, not a rule, under scrolling rows */
.learn-context .lesson-heading{padding:16px 14px 12px}
.learn-context .felt{justify-content:flex-start;gap:14px;padding:14px}.learn-context .felt>:first-child{margin-top:auto}.learn-context .felt>:last-child{margin-bottom:auto}   /* centred while it fits, from the top when it scrolls (centring cut the top off) */
.learn-context .below{flex:none;position:relative;z-index:1;border-top:0;box-shadow:0 -10px 18px -10px rgb(0 0 0 / .65);padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.lesson:has(.intro) .below{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.preview-note{display:none}
}