@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{--ui-spacing-scale:1;font-family:'DM Sans',Arial,sans-serif;color:#ecf3ee;background:#091817;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 47% 18%,#12312e 0,#091817 45%,#071210 100%)}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #f0c979;outline-offset:3px}.app-shell{max-width:1600px;margin:auto;min-height:100vh;padding:0 calc(30px * var(--ui-spacing-scale));display:flex;flex-direction:column}.topbar{height:86px;display:flex;align-items:center;gap:calc(24px * var(--ui-spacing-scale));border-bottom:1px solid #29413c}.brand{display:flex;align-items:center;gap:calc(10px * var(--ui-spacing-scale));white-space:nowrap;font-family:'Space Grotesk',sans-serif;font-size:1.24rem;font-weight:700;letter-spacing:.14em}.brand strong{color:#deb971}.brand-mark{display:grid;place-items:center;width:35px;height:35px;border:1px solid #b49459;border-radius:9px;color:#e0bd78;font-size:1.55rem;line-height:1}.topbar-caption{font-size:.72rem;letter-spacing:.23em;color:#77928b;font-weight:700;margin-left:calc(22px * var(--ui-spacing-scale))}.header-stats{margin-left:auto;display:flex;gap:calc(30px * var(--ui-spacing-scale))}.header-stats>div{display:flex;flex-direction:column;align-items:center;gap:calc(2px * var(--ui-spacing-scale));min-width:49px}.stat-value{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:700;color:#f7f7ed}.stat-label{font-size:.61rem;letter-spacing:.15em;color:#739087;font-weight:700}.layout{display:grid;grid-template-columns:minmax(230px,270px) minmax(440px,1fr) minmax(260px,310px);gap:calc(24px * var(--ui-spacing-scale));padding:calc(30px * var(--ui-spacing-scale)) 0;flex:1}.panel{border:1px solid #29413d;background:linear-gradient(155deg,#122724,#0d201e);border-radius:18px;padding:calc(25px * var(--ui-spacing-scale)) calc(22px * var(--ui-spacing-scale))}.control-group{margin-top:calc(28px * var(--ui-spacing-scale))}.settings>.control-group:first-child{margin-top:0}.control-heading{display:flex;justify-content:space-between;align-items:center;gap:calc(8px * var(--ui-spacing-scale));margin-bottom:calc(12px * var(--ui-spacing-scale));font-size:.7rem;font-weight:700;letter-spacing:.13em;color:#ecf3ee}.control-hint{font-size:.64rem;color:#77948b}.position-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(5px * var(--ui-spacing-scale))}.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(7px * var(--ui-spacing-scale))}.choice-button{min-height:44px;border:1px solid #33524b;border-radius:8px;color:#b9c8c0;background:#16322d;font-size:.73rem;font-weight:700;transition:.18s ease}.choice-button:hover{background:#21443d;color:#fff}.choice-button[aria-pressed=true]{border-color:#d7b46e;color:#10221c;background:#dfbd78;box-shadow:0 0 0 2px #d7b46e22}.stack-grid .choice-button{font-size:.82rem}.assumption-card{display:flex;align-items:flex-start;gap:calc(11px * var(--ui-spacing-scale));border-top:1px solid #2d4741;margin-top:calc(39px * var(--ui-spacing-scale));padding-top:calc(20px * var(--ui-spacing-scale))}.assumption-icon{flex:0 0 20px;height:20px;border:1px solid #859e93;border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-style:italic;font-size:.8rem;color:#a9c0b4}.assumption-card p{margin:0;font-size:.77rem;line-height:1.55;color:#8fa99f}.assumption-card strong{font-size:.78rem;color:#e5ede5}.game{min-width:0;display:flex;flex-direction:column}.game-topline{display:flex;justify-content:flex-end;align-items:center;height:26px;margin:calc(1px * var(--ui-spacing-scale)) calc(4px * var(--ui-spacing-scale)) calc(10px * var(--ui-spacing-scale))}.spot-pill{font-size:.68rem;font-weight:700;letter-spacing:.12em;color:#c2d2c9;background:#1a3730;border:1px solid #35594d;border-radius:100px;padding:calc(8px * var(--ui-spacing-scale)) calc(11px * var(--ui-spacing-scale))}.table-wrap{height:360px;display:grid;place-items:center}.poker-table{position:relative;width:min(94%,660px);height:265px;border-radius:50%;border:12px solid #27483c;background:radial-gradient(ellipse at 50% 35%,#1c6152,#104c42 60%,#0c3b34);box-shadow:0 0 0 2px #5b6a4f,0 0 0 8px #0b211f,0 22px 35px #0007,inset 0 0 30px #092c27}.felt-ring{position:absolute;inset:11px;border:1px solid #79a18477;border-radius:50%}.felt-inner{position:absolute;inset:33px 44px;border:1px solid #e1d6a92d;border-radius:50%}.table-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(7px * var(--ui-spacing-scale));text-align:center}.table-center strong{font-family:'Space Grotesk',sans-serif;font-size:1.25rem;letter-spacing:-.025em;color:#eff9ed}.pot-size{font-size:.67rem;color:#d4bc82;border:1px solid #ccab6488;border-radius:100px;padding:calc(5px * var(--ui-spacing-scale)) calc(9px * var(--ui-spacing-scale));letter-spacing:.12em;font-weight:700}.seat{position:absolute;width:72px;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:calc(3px * var(--ui-spacing-scale));z-index:2}.seat-badge{height:39px;width:39px;border-radius:50%;background:#193a34;border:2px solid #628376;color:#b5c9bc;display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-size:.7rem;font-weight:700;box-shadow:0 3px 9px #061a17}.seat-name{background:#0c201e;border:1px solid #39584d;color:#a8c0b4;border-radius:5px;padding:calc(2px * var(--ui-spacing-scale)) calc(6px * var(--ui-spacing-scale));font-size:.61rem;font-weight:700;letter-spacing:.1em;white-space:nowrap}.seat.active .seat-badge{border-color:#e8bd67;background:#dcb66c;color:#1b2a21;box-shadow:0 0 0 5px #dbb76c28,0 3px 9px #061a17}.seat.active .seat-name{background:#e0bd77;color:#162821;border-color:#e0bd77}.seat.folded .seat-badge{opacity:.55}.seat.folded .seat-name{opacity:.65}.seat-utg{left:27%;top:-5%}.seat-hj{left:55%;top:-11%}.seat-co{left:86%;top:8%}.seat-btn{left:88%;top:89%}.seat-sb{left:53%;top:108%}.seat-bb{left:15%;top:84%}.dealer-button{position:absolute;left:76%;top:71%;width:22px;height:22px;border-radius:50%;background:#e7e4d0;color:#172c25;display:grid;place-items:center;font-size:.63rem;font-weight:800;box-shadow:0 2px 6px #0008}.decision-area{margin-top:0;background:#102521;border:1px solid #2a4840;border-radius:18px;padding:calc(23px * var(--ui-spacing-scale));display:grid;grid-template-columns:auto 1fr;column-gap:calc(22px * var(--ui-spacing-scale));row-gap:calc(20px * var(--ui-spacing-scale));align-items:center}.hand-display{display:flex;align-items:center;gap:calc(13px * var(--ui-spacing-scale))}.card-row{display:flex;align-items:center;min-width:110px}.playing-card{display:flex;flex-direction:column;justify-content:space-between;width:61px;height:84px;background:#f8f8ef;border:1px solid #fff;border-radius:7px;box-shadow:0 4px 12px #0007;padding:calc(5px * var(--ui-spacing-scale)) calc(6px * var(--ui-spacing-scale));color:#152a26;transform:rotate(-5deg)}.playing-card+ .playing-card{margin-left:-13px;transform:rotate(7deg)}.playing-card.red{color:#ba4338}.card-corner{font-family:'Space Grotesk',sans-serif;font-size:1.03rem;font-weight:700;line-height:.94}.card-corner span{display:block;font-size:.85rem}.card-suit{align-self:center;font-size:1.65rem;line-height:1}.hand-text{display:flex;flex-direction:column;min-width:72px}.hand-text small{font-size:.61rem;font-weight:700;letter-spacing:.14em;color:#809b90}.hand-text strong{font-family:'Space Grotesk',sans-serif;font-size:1.47rem;letter-spacing:-.06em;margin:calc(2px * var(--ui-spacing-scale)) 0;color:#f5f7ec}.hand-text small{color:#d1ae69}.decision-copy{min-width:0}.decision-copy h2{font-family:'Space Grotesk',sans-serif;font-size:1.22rem;letter-spacing:-.035em;margin:0 0 calc(5px * var(--ui-spacing-scale))}.decision-copy p{font-size:.78rem;color:#9fb5a9;margin:0}.action-row{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:calc(11px * var(--ui-spacing-scale))}.action-button{height:52px;border-radius:9px;font-weight:700;border:1px solid #557267;background:#223a33;color:#ecf3ed;font-size:.96rem;transition:transform .16s ease,background .16s ease,opacity .16s ease}.action-button:hover:not(:disabled){transform:translateY(-2px);background:#2d4b40}.action-button:disabled{cursor:default;opacity:.48}.raise-button{background:#dabb78;color:#142720;border-color:#e3c888}.raise-button:hover:not(:disabled){background:#f0cd83}.action-key{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;border-radius:4px;font-size:.64rem;margin-right:calc(7px * var(--ui-spacing-scale));opacity:.65}.next-button{grid-column:1/-1;background:transparent;color:#e5c482;border:1px solid #9f804a;border-radius:8px;height:43px;font-size:.84rem;font-weight:700}.next-button:hover{background:#2e3d2e}.next-button span{margin-left:calc(6px * var(--ui-spacing-scale))}.learning{display:flex;flex-direction:column}.range-section{margin-top:0}.range-grid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:calc(2px * var(--ui-spacing-scale));aspect-ratio:1/1}.range-cell{display:grid;place-items:center;min-width:0;border:1px solid #32524a;border-radius:2px;background:#19362f;color:#6e9281;font-family:'Space Grotesk',sans-serif;font-size:clamp(.46rem,.51vw,.64rem);font-weight:700;line-height:1;transition:background .2s ease,color .2s ease}.range-grid.revealed .range-cell.open{background:#bd9d5d;border-color:#e3bd70;color:#14261e}.range-grid.revealed .range-cell.fold{background:#152e2a;color:#81978a}.range-cell.current{outline:2px solid #fff8d9;outline-offset:-2px;z-index:1;color:#f9f5e8!important}.range-grid:not(.revealed) .range-cell.current{background:#496b5c}.range-legend{display:flex;justify-content:space-between;gap:calc(3px * var(--ui-spacing-scale));flex-wrap:wrap;margin-top:calc(12px * var(--ui-spacing-scale));color:#8fa79b;font-size:.61rem}.range-legend span{display:flex;align-items:center;gap:calc(4px * var(--ui-spacing-scale))}.legend-swatch{display:inline-block;width:9px;height:9px;border-radius:2px;border:1px solid #5b7669;background:#1a342d}.legend-swatch.open{background:#bd9d5d;border-color:#bd9d5d}.legend-swatch.current{background:#315448;border:2px solid #f8f0ce}.footer{display:flex;justify-content:space-between;gap:calc(18px * var(--ui-spacing-scale));border-top:1px solid #29413c;padding:calc(16px * var(--ui-spacing-scale)) 0 calc(18px * var(--ui-spacing-scale));color:#6d8b7f;font-size:.59rem;letter-spacing:.12em;font-weight:700}.footer-dot{color:#d6b473}kbd{font:inherit;color:#bacdc1;border:1px solid #466458;padding:calc(1px * var(--ui-spacing-scale)) calc(4px * var(--ui-spacing-scale));border-radius:3px}
@media(max-width:1180px){.layout{grid-template-columns:minmax(210px,250px) minmax(410px,1fr);gap:calc(18px * var(--ui-spacing-scale))}.learning{grid-column:1/-1}.range-section{max-width:420px;width:100%;align-self:center}.range-cell{font-size:.58rem}.table-wrap{height:330px}}@media(max-width:760px){.app-shell{padding:0 calc(16px * var(--ui-spacing-scale))}.topbar{height:76px;flex-wrap:wrap;gap:calc(8px * var(--ui-spacing-scale))}.topbar-caption{display:none}.brand{font-size:1.02rem;letter-spacing:.11em}.brand-mark{width:30px;height:30px}.header-stats{gap:calc(11px * var(--ui-spacing-scale))}.header-stats>div{min-width:34px}.stat-value{font-size:.98rem}.stat-label{font-size:.52rem}.layout{display:flex;flex-direction:column;padding-top:calc(18px * var(--ui-spacing-scale));gap:calc(18px * var(--ui-spacing-scale))}.settings{order:2}.game{order:1}.learning{order:3;display:flex}.control-group{margin-top:calc(20px * var(--ui-spacing-scale))}.assumption-card{margin-top:calc(22px * var(--ui-spacing-scale))}.table-wrap{height:280px}.poker-table{height:200px;border-width:9px;width:92%}.seat-badge{width:30px;height:30px;font-size:.59rem}.seat-name{font-size:.52rem}.seat{width:63px}.table-center strong{font-size:.95rem}.felt-inner{inset:25px 30px}.range-section{margin-top:0;max-width:420px;width:100%;align-self:center}.range-cell{font-size:clamp(.47rem,1.6vw,.7rem)}.footer{line-height:1.5}.footer>span:last-child{display:none}}@media(max-width:480px){.app-shell{padding:0 calc(12px * var(--ui-spacing-scale))}.header-stats{gap:calc(6px * var(--ui-spacing-scale))}.header-stats>div{min-width:30px}.brand{font-size:.89rem;gap:calc(5px * var(--ui-spacing-scale))}.brand-mark{width:28px;height:28px}.panel{padding:calc(20px * var(--ui-spacing-scale))}.table-wrap{height:260px}.poker-table{width:92%;height:178px}.seat-utg{top:-8%}.seat-hj{top:-14%}.seat-co{left:88%}.seat-sb{top:110%}.decision-area{grid-template-columns:1fr;gap:calc(13px * var(--ui-spacing-scale));padding:calc(17px * var(--ui-spacing-scale))}.hand-display{justify-content:center}.decision-copy{text-align:center}.action-row{grid-column:1}.next-button{grid-column:1}.playing-card{width:55px;height:76px}.footer{font-size:.52rem}}

/* Keep the training loop and its explanation together on narrow screens. */
.spot-pill{font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:calc(8px * var(--ui-spacing-scale));min-height:36px;transition:background .18s ease,border-color .18s ease}
.spot-pill:hover{background:#28473b;border-color:#d2ad68}
.game,.settings,.learning{scroll-margin-top:calc(16px * var(--ui-spacing-scale))}
::selection{background:#dabb78;color:#142720}
.stat-value{font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .game{order:1}
  .learning{order:2}
  .settings{order:3}
}
@media(prefers-reduced-motion:reduce){.spot-pill,.choice-button,.action-button,.range-cell{transition:none}}

/* Table format controls and the full-ring seating map. */

.format-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(7px * var(--ui-spacing-scale))}
.position-grid.nine-max{grid-template-columns:repeat(4,1fr)}
.poker-table.nine-max .seat{width:68px}
.poker-table.nine-max .seat-badge{width:35px;height:35px}
.poker-table.nine-max .seat-utg{left:8%;top:28%}
.poker-table.nine-max .seat-utg1{left:23%;top:-7%}
.poker-table.nine-max .seat-utg2{left:48%;top:-13%}
.poker-table.nine-max .seat-lj{left:73%;top:-7%}
.poker-table.nine-max .seat-hj{left:93%;top:26%}
.poker-table.nine-max .seat-co{left:93%;top:72%}
.poker-table.nine-max .seat-btn{left:74%;top:107%}
.poker-table.nine-max .seat-sb{left:48%;top:113%}
.poker-table.nine-max .seat-bb{left:20%;top:105%}
.poker-table.nine-max .dealer-button{left:65%;top:76%}

/* The result occupies the action row, so a second click needs no pointer travel. */
[hidden]{display:none!important}
.next-button{height:52px;border-radius:9px;font-size:.96rem;transition:background .16s ease}
.next-button.correct{background:#2b6b47;border-color:#64be80;color:#f2fff3}
.next-button.correct:hover{background:#357e53}
.next-button.incorrect{background:#864333;border-color:#d78165;color:#fff7f0}
.next-button.incorrect:hover{background:#a04e3b}

@media(max-width:760px){
  .poker-table.nine-max .seat{width:53px}
  .poker-table.nine-max .seat-badge{width:28px;height:28px;font-size:.52rem}
  .poker-table.nine-max .seat-name{font-size:.46rem;padding:calc(2px * var(--ui-spacing-scale)) calc(4px * var(--ui-spacing-scale))}
}
@media(max-width:480px){
  .poker-table.nine-max .seat-utg{left:8%;top:27%}
  .poker-table.nine-max .seat-utg1{left:24%;top:-8%}
  .poker-table.nine-max .seat-utg2{left:49%;top:-15%}
  .poker-table.nine-max .seat-lj{left:75%;top:-8%}
  .poker-table.nine-max .seat-hj{left:94%;top:27%}
  .poker-table.nine-max .seat-co{left:94%;top:72%}
  .poker-table.nine-max .seat-btn{left:76%;top:109%}
  .poker-table.nine-max .seat-sb{left:49%;top:114%}
  .poker-table.nine-max .seat-bb{left:19%;top:108%}
  .spot-pill{font-size:.58rem;letter-spacing:.06em;padding:calc(6px * var(--ui-spacing-scale)) calc(8px * var(--ui-spacing-scale));gap:calc(4px * var(--ui-spacing-scale))}
}
@media(max-width:360px){
  .action-button{font-size:.82rem;white-space:nowrap}
  .action-key{width:18px;height:18px;margin-right:calc(4px * var(--ui-spacing-scale));font-size:.58rem}
}

.button-lock{display:flex;align-items:center;gap:calc(11px * var(--ui-spacing-scale));min-height:46px;margin-top:calc(12px * var(--ui-spacing-scale));padding:calc(8px * var(--ui-spacing-scale)) calc(10px * var(--ui-spacing-scale));border:1px solid #33524b;border-radius:9px;background:#122b27;color:#e4eee6;font-size:.78rem;font-weight:700;cursor:pointer}
.button-lock:hover{border-color:#799785;background:#18352f}
.button-lock input{width:18px;height:18px;margin:0;accent-color:#dabb78;cursor:pointer}
.button-lock input:focus-visible{outline:3px solid #f0c979;outline-offset:3px}
.button-lock span{display:flex;flex-direction:column;gap:calc(2px * var(--ui-spacing-scale))}
.button-lock small{color:#9bb3a5;font-size:.68rem;font-weight:400}
.range-visibility{display:flex;align-items:center;gap:calc(9px * var(--ui-spacing-scale));min-height:44px;width:fit-content;margin-top:calc(8px * var(--ui-spacing-scale));color:#8fa79b;font-size:.61rem;cursor:pointer}
.range-visibility input{width:9px;height:9px;margin:0;accent-color:#dabb78;cursor:pointer}
.range-visibility input:focus-visible{outline:3px solid #f0c979;outline-offset:3px}
.dealer-button{transition:left .32s cubic-bezier(.2,.8,.2,1),top .32s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){.dealer-button{transition:none}}

/* Compact mode changes spacing without shrinking text or click targets. */
body.compact-mode{--ui-spacing-scale:.5}
.compact-mode header{display:none}
/* Keep headings available to screen readers, including live hand feedback. */
.compact-mode :is(h1,h2,h3,h4,h5,h6,.control-heading,.assumption-card strong){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.compact-mode .assumption-card br{display:none}

/* The second guess gets its own workspace; the reference grid stays compact. */
.boundary-toggle{margin-top:calc(24px * var(--ui-spacing-scale));align-items:flex-start}
.boundary-toggle input{flex:none;margin-top:2px}
.boundary-toggle small{line-height:1.5}
.boundary-summary{grid-column:1/-1;margin:0;color:#e4d19f;font-size:.84rem;line-height:1.5}
.boundary-range-note{margin:0;color:#afc7b8;font-size:.75rem;line-height:1.5}
.range-visibility:has(input:disabled){cursor:default;opacity:.65}
.boundary-launch{background:#dabb78;border-color:#e3c888;color:#142720}
.boundary-launch:hover{background:#f0cd83}
body:has(.boundary-dialog[open]){overflow:hidden}
.boundary-dialog{width:min(680px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;margin:auto;border:1px solid #577260;border-radius:16px;background:#102521;color:#ecf3ee;font:inherit;box-shadow:0 20px 65px #0008;overflow:hidden}
.boundary-dialog[open]{display:flex;flex-direction:column}
.boundary-dialog::backdrop{background:#030e0cce}
.boundary-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 16px;flex:none}
.boundary-header>div{min-width:0}
.boundary-header h2{margin:0;font-family:'Space Grotesk',sans-serif;font-size:1.4rem;font-weight:600;line-height:1.25;letter-spacing:-.025em}
.boundary-header p{margin:7px 0 0;color:#b6cbbd;font-size:.78rem;letter-spacing:.06em}
.boundary-close{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:-7px -8px 0 0;padding:0;border:0;border-radius:8px;background:transparent;color:#bed0c3}
.boundary-close:hover{background:#234238;color:#fff}
.boundary-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 24px 24px;scrollbar-width:thin;scrollbar-color:#78917c #102521}
.boundary-action-result{margin:0 0 12px;color:#a9dfb4;font-size:.9rem;font-weight:600;line-height:1.5}
.boundary-action-result.incorrect{color:#efb69f}
.boundary-prompt{margin:0 0 7px;font-size:1rem;font-weight:600;line-height:1.5}
.boundary-help{margin:0;color:#afc7b8;font-size:.83rem;line-height:1.5;max-width:65ch}
.boundary-grid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:2px;width:100%;max-width:596px;margin:20px auto 0}
.boundary-cell{display:grid;place-items:center;min-width:0;aspect-ratio:1;padding:0;border:1px solid #294b40;border-radius:3px;background:#132c27;color:#8fae9b;font-family:'Space Grotesk',sans-serif;font-size:.62rem;font-weight:600;line-height:1}
.boundary-cell.boundary-family{background:#315747;border-color:#809c82;color:#f6f6e8;font-size:.88rem}
button.boundary-family:hover:not(:disabled),.boundary-choice:hover:not(:disabled){background:#496e54;border-color:#f1cf89;color:#fff}
.boundary-current{outline:1px dashed #f3e6bf;outline-offset:-5px}
.boundary-grid.revealed .open,.boundary-choice.open{background:#bd9d5d;border-color:#d7b56f;color:#14261e}
.boundary-grid.revealed .fold,.boundary-choice.fold{background:#152e2a;border-color:#3c5b4d;color:#b3c7b8}
.boundary-cell:disabled,.boundary-choice:disabled{cursor:default;opacity:1}
.boundary-correct-choice{outline:3px solid #fff2c9;outline-offset:-3px}
.boundary-wrong-choice{outline:3px solid #f1a18a;outline-offset:-3px}
.boundary-touch-choices{display:none}
.boundary-choices-label{margin:20px 0 10px;color:#c1d4c6;font-size:.82rem;line-height:1.5}
.boundary-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:8px}
.boundary-choice{min-width:0;min-height:48px;padding:8px 2px;border:1px solid #809c82;border-radius:6px;background:#315747;color:#f6f6e8;font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:600}
.boundary-feedback{margin:20px 0 0;color:#b8e6c0;font-size:.94rem;line-height:1.5}
.boundary-feedback.incorrect{color:#f1b9a5}
.boundary-feedback strong{font-weight:600}
.boundary-feedback p{margin:6px 0 0;color:#c1d4c6;font-size:.83rem;line-height:1.6;overflow-wrap:break-word}
.boundary-footer{flex:none;padding:16px 24px;border-top:1px solid #345046;background:#102521}
.boundary-footer>button{width:100%;min-height:48px}
.boundary-none{padding:10px 12px;border:1px solid #78917c;border-radius:8px;background:transparent;color:#e0eadd;font-size:.88rem;font-weight:600}
.boundary-none:hover{background:#234238;border-color:#d7b56f}
.boundary-complete #boundary-next{background:#dabb78;color:#142720;border-color:#e3c888}
.boundary-dialog button:focus-visible{position:relative;z-index:1;outline:3px solid #f0c979;outline-offset:2px}
/* Compact mode never hides the question in the focused practice workspace. */
.compact-mode .boundary-header h2{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip-path:none;white-space:normal;border:0}
@media(max-width:699px),(max-height:600px),(pointer:coarse){
  .boundary-dialog{width:min(680px,calc(100% - 24px));max-height:calc(100dvh - 24px)}
  .boundary-header{padding:18px 16px 14px}
  .boundary-header h2{font-size:1.2rem}
  .boundary-body{padding:0 16px 20px}
  .boundary-grid{max-width:220px;margin-top:16px;gap:1px}
  .boundary-cell{font-size:.38rem;border-radius:1px}
  .boundary-cell.boundary-family{font-size:.43rem}
  .boundary-current{outline-offset:-2px}
  .boundary-correct-choice,.boundary-wrong-choice{outline-width:2px;outline-offset:-2px}
  .boundary-touch-choices{display:block}
  .boundary-footer{padding:12px 16px max(12px,env(safe-area-inset-bottom))}
}
@media(max-height:600px){
  /* Bring usable choices into view before the overview on short screens. */
  .boundary-body{display:flex;flex-direction:column}
  .boundary-touch-choices{order:1}
  .boundary-grid{order:2;flex:none}
  .boundary-grid{max-width:169px}
}