:root{
  --bg:#14110a; --panel:#1d190f; --panel2:#262013; --line:#3a2f17;
  --gold:#d4af37; --gold2:#f4d061; --ink:#f3ead2; --mut:#a99a72;
  --fold:#c62828; --check:#f9a825; --limp:#ef6c00; --call:#2e7d32;
  --raise:#9c27b0; --b3:#5e35b1; --b4:#00bcd4; --jam:#1E90FF;
  --good:#37b24d; --bad:#e03131;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* hidden must always win — landscape #drill{display:grid} was overriding it,
   leaving two trainer screens stacked after a portrait→landscape rotation */
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);
  font-family:-apple-system,Roboto,Segoe UI,system-ui,sans-serif;
  font-size:17px;
  display:flex;flex-direction:column;overscroll-behavior:none}
h1,h2{margin:0;font-weight:800}
button{font:inherit;cursor:pointer;border:none;border-radius:12px}

#top{display:flex;align-items:center;gap:12px;padding:13px 18px;
  background:linear-gradient(180deg,#1d190f,#14110a);border-bottom:1px solid var(--line)}
#brand{width:60px;height:60px;object-fit:contain}
#titles h1{font-size:25px;background:linear-gradient(90deg,var(--gold2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
#sub{font-size:13px;color:var(--mut);letter-spacing:.08em;text-transform:uppercase}
#homebtn{margin-left:auto}

.screen{flex:1;overflow-y:auto;padding:18px;-webkit-overflow-scrolling:touch}
.ghost{background:transparent;color:var(--gold);border:1px solid var(--line);padding:12px 18px;font-size:16px}
.ghost.danger{color:#e88}
.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1407;
  font-weight:800;padding:18px 22px;width:100%;font-size:20px}
.primary.danger{background:linear-gradient(180deg,#ef6a6a,#c62828);color:#fff}
.primary.good{background:linear-gradient(180deg,#69db7c,#2f9e44);color:#06210d}

/* ---- discovery / sections ---- */
#discovery{font-size:15px;color:var(--mut);margin-bottom:16px;line-height:1.55}
#discovery b{color:var(--ink)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:18px;margin-bottom:16px}
.card .crow{display:flex;align-items:center;gap:12px}
.card h2{font-size:22px}
.badge{font-size:12px;font-weight:800;padding:4px 11px;border-radius:20px;letter-spacing:.05em}
.badge.ready{background:#13351b;color:#69db7c;border:1px solid #2f9e44}
.badge.partial{background:#3a2e0c;color:var(--gold2);border:1px solid var(--gold)}
.badge.missing{background:#3a1010;color:#ff8787;border:1px solid #c62828}
.card .meta{font-size:15px;color:var(--mut);margin:11px 0;line-height:1.6}
.card .warn{font-size:14px;color:#ffb84d;margin-top:6px;line-height:1.5}
.card .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.card .acts button{padding:14px 22px;background:var(--panel2);color:var(--gold2);
  border:1px solid var(--line);font-weight:700;font-size:17px}
.card .acts button:disabled{opacity:.35}
.ioRow{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}

/* ---- drill ---- */
#dbar{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;color:var(--mut);margin-bottom:10px;text-align:center}
#dctx{max-width:100%;font-size:24px;font-weight:800;color:var(--gold2);line-height:1.25}
#dscore{white-space:nowrap}
#dscore{color:var(--gold2);font-weight:700}
#timerwrap{height:8px;background:var(--panel2);border-radius:8px;overflow:hidden;margin-bottom:22px}
#timerbar{height:100%;width:100%;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .1s linear}
#handcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:38px 26px;text-align:center;margin-bottom:22px}
#hand{font-size:74px;font-weight:900;letter-spacing:.02em;line-height:1.05;
  background:linear-gradient(180deg,var(--gold2),var(--gold));-webkit-background-clip:text;
  background-clip:text;color:transparent}
#hand span{color:inherit}
#handsub{color:var(--mut);font-size:16px;margin-top:8px;text-transform:uppercase;letter-spacing:.1em}
#answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#answers button{padding:22px;font-size:21px;font-weight:800;color:#fff;border:1px solid rgba(255,255,255,.15)}
#answers button:active{transform:scale(.97)}
#mixbars{margin:8px 0 18px}
.mixrow{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:16px}
.mixrow .lab{width:80px;font-weight:700}
.mixrow .track{flex:1;height:22px;background:var(--panel2);border-radius:8px;overflow:hidden}
.mixrow .fill{height:100%}
.mixrow .pct{width:58px;text-align:right;color:var(--mut)}
#verdict{font-size:18px;line-height:1.55;margin-bottom:16px;padding:16px;
  border-radius:14px;background:var(--panel)}
#verdict.good{border:1px solid #2f9e44}#verdict.bad{border:1px solid #c62828}
#endBtn,#fnext,#fend,#qend{margin-top:16px}

/* ---- flashcard ---- */
#fctx{font-size:24px;font-weight:800;color:var(--gold2);margin-bottom:12px;line-height:1.3;text-align:center}
#fimgwrap{background:#000;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-align:center}
#fimg{max-width:100%;max-height:78vh;object-fit:contain}
#fsummary{font-size:15px;font-weight:600;color:var(--gold2);line-height:1.35;text-align:center;margin-top:10px}
#fsummary:empty{display:none}
#fgrade{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}

/* ULT solver screenshot revealed after answering a drill */
#dimgwrap{background:#000;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-align:center;margin-bottom:10px}
#dimg{max-width:100%;max-height:42vh;object-fit:contain;display:block;margin:0 auto}

/* ULT compact mode: table screenshot takes the space the big hand card would —
   fold the hand into the scenario bar instead so buttons still fit unscrolled. */
#dhand{font-size:24px;font-weight:800;color:var(--gold);white-space:nowrap}
#drill.compact #handcard{display:none}
#drill.compact #dbar{flex-direction:row;flex-wrap:wrap;justify-content:center;text-align:center;column-gap:10px}
#drill.compact #timerwrap{margin-bottom:10px}

/* ---- concept quiz ---- */
#qbar{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;color:var(--mut);margin-bottom:12px;text-align:center}
#qtopic{max-width:100%;font-size:22px;font-weight:800;color:var(--gold2);line-height:1.25}
#qscore{color:var(--gold2);font-weight:700}
#qcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:26px;margin-bottom:18px}
#qtext{font-size:27px;font-weight:800;line-height:1.4;text-align:center}
#qanswers{display:grid;gap:12px}
#qanswers button{padding:18px 20px;font-size:18px;font-weight:700;text-align:left;
  background:var(--panel2);color:var(--ink);border:1px solid var(--line);line-height:1.35}
#qanswers button:active{transform:scale(.99)}
#qanswers button.qok{background:#13351b;border-color:#2f9e44;color:#b2f2bb}
#qanswers button.qbad{background:#3a1010;border-color:#c62828;color:#ffc9c9}
#qverdict{font-size:18px;line-height:1.55;margin:14px 0;padding:16px;border-radius:14px;background:var(--panel)}
#qverdict.good{border:1px solid #2f9e44}#qverdict.bad{border:1px solid #c62828}

/* ---- review ---- */
#revsummary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
.stat .big{font-size:40px;font-weight:900;color:var(--gold2)}
.stat .lbl{font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
#revleaks h3{font-size:17px;color:var(--gold);margin:18px 0 8px}
.leak{display:flex;justify-content:space-between;font-size:16px;padding:9px 0;border-bottom:1px solid var(--line)}
.leak .n{color:#ff8787;font-weight:700}

/* ---- responsive: tablets ---- */
@media (min-width:680px){
  .screen{max-width:820px;margin:0 auto;width:100%}
  #titles h1{font-size:30px}
  #hand{font-size:96px}
  #qtext{font-size:31px}
  #answers{grid-template-columns:repeat(4,1fr)}
  #revsummary{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1024px){ .screen{max-width:960px} }

/* ---- responsive: landscape phones ---- hand + answers side by side ---- */
@media (orientation:landscape) and (max-height:560px){
  #handcard{padding:18px;margin-bottom:14px}
  #hand{font-size:54px}
  #drill{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:
    "bar bar" "timer timer" "hand ans" "rev rev" "end end";
    column-gap:18px;align-content:start}
  #dbar{grid-area:bar}#timerwrap{grid-area:timer}#handcard{grid-area:hand;align-self:center}
  #answers{grid-area:ans;grid-template-columns:1fr 1fr}
  #reveal{grid-area:rev}#endBtn{grid-area:end}
  #fimg{max-height:62vh}
}

/* ---- PFS — Pairrd postflop sequence trainer ---- */
#pfbar{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;color:var(--mut);margin-bottom:10px;text-align:center}
#pfbar #pfctx{max-width:100%;font-size:24px;font-weight:800;color:var(--gold2);line-height:1.25}
#pfbar #pfscore{white-space:nowrap}
#pftimerwrap{height:8px;background:var(--panel2);border-radius:8px;overflow:hidden;margin-bottom:12px}
#pftimerbar{height:100%;width:100%;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .1s linear}
#pfimgwrap{background:#000;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-align:center;margin-bottom:10px}
#pfimg{max-width:100%;max-height:46vh;object-fit:contain;display:block;margin:0 auto}
#pfsub{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:10px;text-align:center}
#pfpicked{min-height:24px;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:8px}
#pfpicked .chip{padding:5px 12px;border-radius:20px;font-weight:800;font-size:13px;color:#fff}
#pfanswers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#pfanswers button{padding:18px 8px;font-size:16px;font-weight:800;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:12px}
#pfanswers button:disabled{opacity:.4}
#pfanswers button:active{transform:scale(.97)}
#pfmix .mixrow .lab{width:118px}
#pfverdict{font-size:17px;line-height:1.5;margin:14px 0;padding:16px;border-radius:14px;background:var(--panel)}
#pfverdict.good{border:1px solid #2f9e44}
#pfverdict.bad{border:1px solid #c62828}
#pfverdict.part{border:1px solid var(--gold)}