@import url('./fonts/fonts.css');
:root{--ink:#28243d;--muted:#817d8a;--paper:#f7f6f2;--orange:#f87549;--purple:#7461a9;--line:#e8e5e0}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:4px}button{border:0}button:disabled{cursor:default}a{color:inherit;text-decoration:none}.header{height:100px;margin:0 auto;max-width:1320px;padding:0 46px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:700;letter-spacing:-1.3px;display:flex;align-items:center;gap:10px}.brand-icon{background:var(--orange);border-radius:11px;font-size:33px;display:grid;place-items:center;width:40px;height:40px;color:var(--ink)}.brand-light{font-weight:400}.brand-dot{color:var(--orange)}nav{display:flex;gap:33px;height:100%;align-items:center}nav button{height:100%;background:none;font-size:13px;color:#89838b;position:relative}nav button.nav-active{color:var(--ink);font-weight:700}nav button.nav-active:after{content:'';height:3px;background:var(--orange);position:absolute;bottom:0;left:0;right:0}nav button span{margin-left:6px}.install{background:transparent;border:1px solid #d5d1d8;border-radius:9px;padding:11px 17px;font-weight:600;font-size:12px}.install:first-letter{font-size:17px}main{max-width:1230px;margin:auto;padding:0 28px}.intro{display:flex;justify-content:space-between;align-items:center;padding:48px 0 37px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;display:flex;gap:8px;align-items:center}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:var(--orange)}h1{font-family:'Space Grotesk',sans-serif;font-size:48px;line-height:1.12;letter-spacing:-2.1px;font-weight:500;margin:16px 0}h1>span{color:var(--purple)}h1 svg{width:40px;height:40px;stroke:var(--orange);stroke-width:4;margin-left:18px;vertical-align:middle;transform:rotate(10deg)}.intro p{color:var(--muted);margin:0;font-size:14px}.intro-note{display:flex;align-items:flex-start;gap:15px;position:relative;padding:0 44px 10px 20px;transform:rotate(-5deg);font-size:15px;line-height:1.6;color:#93869d}.intro-note strong{color:var(--ink);font-weight:500}.note-star{font-size:32px;color:var(--orange);line-height:1.2}.intro-note svg{position:absolute;width:65px;right:0;bottom:-25px;stroke:#a699ba;stroke-width:1.5;fill:none}.game-shell{background:#fff;border:1px solid var(--line);border-radius:17px;overflow:hidden;box-shadow:0 5px 30px #30233a03}.game-top{padding:18px 25px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.tabs{display:flex;background:#f3f2f5;border-radius:8px;padding:4px;gap:4px}.tabs button{background:transparent;padding:10px 16px;font-size:12px;border-radius:6px;color:var(--muted)}.tabs button.selected{background:#fff;box-shadow:0 1px 4px #25203410;color:var(--ink);font-weight:700}.local-badge{font-size:10px;color:#96909c;display:flex;align-items:center;gap:6px}.local-badge>span:first-child{height:5px;width:5px;background:#78a994;border-radius:50%}.game-layout{display:grid;grid-template-columns:1.3fr 1fr}.board-panel{padding:25px 29px 23px}.board-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}h2{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;letter-spacing:-.5px;margin:0 0 6px}.board-heading h2 span{color:var(--orange);margin-left:9px}.board-heading p{font-size:11px;color:var(--muted);margin:0}.icon-button{background:#f8f7f5;border:1px solid var(--line);height:32px;width:32px;border-radius:8px;font-size:20px}.bingo-letters{display:grid;grid-template-columns:repeat(5,1fr);text-align:center;color:var(--purple);font-family:'Space Grotesk',sans-serif;font-size:20px;letter-spacing:2px;font-weight:600;padding:0 0 11px}.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.cell{height:77px;min-width:0;background:#fbfaf8;border:1px solid #e9e6e1;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:5px;transition:transform .15s,background .15s;position:relative}.cell:hover:not(:disabled){transform:translateY(-2px);border-color:#bdb1d2}.cell.active{border:1.5px solid var(--purple);background:#f1edf8;box-shadow:0 0 0 2px #7461a909}.cell-icon{font-size:19px;line-height:1;color:#898092}.cell-name{font-size:9px;font-weight:600;line-height:1.25}.cell.done{background:#eaf3ed;border-color:#cbded0;color:#426e56}.cell.done .cell-icon{color:#426e56}.cell.free{background:var(--purple);border-color:var(--purple);color:#fff}.cell.free .cell-icon{color:#fff;font-size:27px}.cell.free .cell-name{font-size:8px;letter-spacing:1px}.cell.winning{box-shadow:inset 0 0 0 2px #69a980}.board-footer{display:flex;align-items:center;gap:14px;margin-top:17px;font-size:9px;color:#95909c}.board-footer>span{display:flex;align-items:center;gap:5px}.legend{width:7px;height:7px;background:#f9f8f5;border:1px solid #d9d4ce;border-radius:2px}.legend.marked{background:#b4d7bd;border-color:#b4d7bd}.board-footer .board-hint{margin-left:auto;font-size:8px}.challenge-panel{border-left:1px solid var(--line);background:#fcfbf9;padding:28px 29px;display:flex;flex-direction:column}.challenge-label{display:flex;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:1.25px;color:#8f859b;margin-bottom:24px}.challenge-label>span:last-child{font-size:10px;letter-spacing:0;color:#aaa1af}#challenge{flex:1;display:flex;flex-direction:column}.category{display:inline-flex;align-self:flex-start;border:1px solid #e6deee;background:#f1ebf7;border-radius:5px;padding:5px 8px;font-size:9px;font-weight:600;color:var(--purple)}.question{font-family:'Space Grotesk',sans-serif;font-size:24px;line-height:1.25;letter-spacing:-.7px;font-weight:500;margin:16px 0 10px}.question-context{font-size:12px;line-height:1.6;color:#8b8590;margin:0 0 19px}.answers{display:flex;flex-direction:column;gap:8px}.answer{text-align:left;border:1px solid #e5e0e7;background:#fff;border-radius:8px;display:flex;align-items:center;padding:11px 12px;font-size:11px;gap:11px;line-height:1.35;min-height:44px}.answer>span{border:1px solid #e9e4ec;border-radius:5px;width:23px;height:23px;display:grid;place-items:center;font-size:10px;flex-shrink:0;color:#a196ad}.answer:hover:not(:disabled),.answer.chosen{border-color:var(--purple);background:#f5f1fb}.answer.correct{border-color:#81af8e;background:#eef7ef}.answer.wrong{border-color:#e4a28e;background:#fff0e9}.answer:disabled{color:var(--ink)}.primary{background:var(--ink);color:#fff;border-radius:8px;padding:15px 18px;font-size:12px;font-weight:500;display:flex;justify-content:space-between;align-items:center;width:100%}.primary:disabled{opacity:.45}.submit{margin-top:17px}.challenge-bottom{font-size:9px;color:#9a939f;display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px}.challenge-bottom span{color:var(--orange);font-size:13px}.feedback{margin-top:12px;font-size:11px;line-height:1.6;padding:11px 13px;border-radius:7px;background:#edf4ec;color:#426b49}.feedback.error{background:#fff0e8;color:#975b45}.stats{border-top:1px solid var(--line);padding:22px 29px;display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:18px}.stats>div{display:flex;align-items:center;gap:11px}.stat-icon{height:36px;width:36px;border-radius:9px;display:grid;place-items:center;font-size:21px;flex-shrink:0}.peach{background:#ffede4;color:#d78a65}.lilac{background:#eee8f6;color:#8d75b2}.mint{background:#eaf2ec;color:#66947a}.stats strong{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:500}.stats small{font-family:'DM Sans',sans-serif;font-size:11px;color:#86808e;font-weight:400}.stats>div>div>span{display:block;font-size:9px;color:#9a939e;margin-top:3px}.stats .progress-stat{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:9px;padding-left:23px;border-left:1px solid var(--line)}.progress-stat>div:first-child{display:flex;align-items:center;justify-content:space-between}.stats .progress-stat span,.stats .progress-stat strong{font-size:10px;color:#8b8295;font-family:'DM Sans',sans-serif}.progress-track{height:5px;background:#f0edf3;border-radius:5px}.progress-track>div{height:5px;background:var(--purple);border-radius:5px;width:0;transition:width .3s}.bottom-strip{display:flex;justify-content:space-between;align-items:center;padding:22px 0}.bottom-strip>div{display:flex;gap:13px;align-items:center}.tip-icon{font-size:29px;color:#d29f69}.small-label{font-size:8px;letter-spacing:1.1px;font-weight:700;color:#a39584}.bottom-strip p{font-size:11px;margin:5px 0 0;color:#766e76}.bottom-tag{font-size:11px;color:#99909c;font-style:italic}footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:22px 0 27px;font-size:10px;color:#99909d}footer>span:first-child{font-weight:500;color:#746a7d}.footer-separator{margin:0 12px;color:#ccc5ce}.footer-star{margin-left:12px;color:var(--orange)}dialog{border:1px solid var(--line);border-radius:20px;padding:35px;max-width:480px;width:calc(100% - 32px);color:var(--ink);background:var(--paper);box-shadow:0 20px 100px #28243d33}dialog::backdrop{background:#28243d77;backdrop-filter:blur(3px)}.modal-close{position:absolute;right:16px;top:10px;background:none;font-size:26px}.modal-symbol{font-size:44px;color:var(--orange)}dialog h2{font-size:28px;margin:16px 0}dialog p,dialog li{font-size:14px;line-height:1.7;color:#777080}dialog li{margin:10px 0}dialog .primary{margin-top:24px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:14px 22px;border-radius:10px;background:var(--ink);color:#fff;box-shadow:0 4px 30px #0002;opacity:0;pointer-events:none;transition:opacity .2s;font-size:13px;z-index:5}#toast.visible{opacity:1}@media(min-width:1450px){main{padding:0 20px}.intro{padding-top:55px}.cell{height:85px}.challenge-panel{padding:30px 35px}.question{font-size:26px}}@media(max-width:900px){.header{padding:0 24px;height:80px}nav{gap:20px}main{padding:0 24px}h1{font-size:40px}.intro-note{padding-right:15px}.board-panel{padding:22px 18px}.challenge-panel{padding:25px 20px}.cell{height:73px}.cell-name{font-size:8px}.board-footer .board-hint{display:none}.stats{padding:20px 18px;gap:10px}.stats .progress-stat{padding-left:12px}.stats strong{font-size:18px}.stat-icon{height:30px;width:30px}.stats>div{gap:7px}.stats>div>div>span{font-size:8px}.question{font-size:21px}.game-layout{grid-template-columns:1.1fr 1fr}}@media(max-width:650px){.header{padding:0 18px;height:74px}.brand{font-size:23px}.brand-icon{height:33px;width:33px;font-size:28px}nav{display:none}.install{padding:9px 11px;font-size:11px}main{padding:0 15px}.intro{padding:30px 4px 25px}.intro-note{display:none}h1{font-size:36px;letter-spacing:-1.7px}h1 svg{width:28px;height:28px;margin-left:10px}.eyebrow{font-size:8px;letter-spacing:1.2px}.intro p{font-size:12px}.game-top{padding:12px}.tabs{flex:1}.tabs button{flex:1;padding:10px 8px;font-size:11px}.local-badge{display:none}.game-layout{grid-template-columns:1fr}.board-panel{padding:22px 16px}.board-heading{margin-bottom:16px}.board-heading h2{font-size:18px}.board{gap:6px}.cell{height:69px}.cell-name{font-size:8px}.cell-icon{font-size:18px}.board-footer{margin-top:15px}.challenge-panel{border-left:0;border-top:1px solid var(--line);padding:24px 20px}.challenge-label{margin-bottom:18px}.question{font-size:24px}.question-context{font-size:13px}.answer{font-size:12px;padding:12px}.challenge-bottom{padding-top:18px}.stats{grid-template-columns:repeat(3,1fr);padding:20px 14px;gap:18px 8px}.stats .progress-stat{grid-column:1/-1;border:0;padding:0}.stats strong{font-size:19px}.stats small{font-size:9px}.stat-icon{width:28px;height:30px;font-size:17px}.stats>div>div>span{font-size:7px}.bottom-strip{padding:21px 4px}.bottom-tag{display:none}.bottom-strip p{font-size:10px}footer{font-size:8px;padding:18px 3px}footer>span:last-child{max-width:120px;text-align:right;line-height:1.6}.footer-separator{margin:0 5px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.mobile-help{display:none}@media(max-width:650px){.mobile-help{display:block;background:none;padding:13px 0 0;color:var(--purple);font-size:12px;font-weight:600}}

/* Larger, more readable game text across screen sizes. */
.eyebrow{font-size:11px}.intro p{font-size:16px}
nav button{font-size:14px}.install{font-size:14px}
.tabs button{font-size:14px}.local-badge{font-size:12px}
h2{font-size:21px}.board-heading p{font-size:14px}
.cell{height:90px;gap:8px}.cell-icon{font-size:23px}
.cell-name{font-size:12px;line-height:1.3}.cell.free .cell-name{font-size:11px}
.board-footer{font-size:12px}.board-footer .board-hint{font-size:10px}
.challenge-label{font-size:11px;letter-spacing:.8px}.challenge-label>span:last-child{font-size:12px}
.category{font-size:12px}.question{font-size:28px;line-height:1.3}
.question-context{font-size:15px;line-height:1.65}
.answer{font-size:15px;line-height:1.45;min-height:54px;padding:12px}
.answer>span{font-size:12px;width:27px;height:27px}
.primary{font-size:15px;min-height:50px}.feedback{font-size:14px}
.challenge-bottom{font-size:12px;line-height:1.5}
.stats strong{font-size:24px}.stats small{font-size:13px}
.stats>div>div>span{font-size:12px;line-height:1.4}
.stats .progress-stat span,.stats .progress-stat strong{font-size:13px}
.small-label{font-size:11px}.bottom-strip p{font-size:14px}.bottom-tag{font-size:13px}
footer{font-size:12px;line-height:1.5}
@media(max-width:1000px) and (min-width:651px){
.game-layout{grid-template-columns:1fr 1fr}.board-panel{padding:23px 16px}
.cell{height:90px;padding:4px}.cell-name{font-size:11px}
.board-footer{gap:10px}.board-hint{display:none!important}
.stats{grid-template-columns:repeat(3,1fr)}
.stats .progress-stat{grid-column:1/-1;border:0;padding:0}
}
@media(max-width:650px){
.eyebrow{font-size:9px}.intro p{font-size:15px;line-height:1.5}
.install{font-size:13px}.mobile-help{font-size:14px}
.tabs button{font-size:13px}.board-heading h2{font-size:21px}
.board-heading p{font-size:13px;line-height:1.5}
.board-panel{padding:22px 12px}.board{gap:5px}
.cell{height:88px;padding:4px;gap:7px}.cell-name{font-size:11px;overflow-wrap:anywhere}
.cell-icon{font-size:23px}.cell.free .cell-name{font-size:10px;letter-spacing:.5px}
.board-footer{font-size:11px}.challenge-label{font-size:10px}
.question{font-size:26px}.question-context{font-size:15px}
.answer{font-size:15px}.challenge-bottom{font-size:12px}
.stats{grid-template-columns:1fr;gap:16px;padding:22px}
.stats strong{font-size:24px}.stats small{font-size:14px}
.stats>div{gap:12px}.stats>div>div>span{font-size:12px}
.stat-icon{width:36px;height:36px;font-size:21px}
.stats .progress-stat{grid-column:auto;padding-top:5px}
.small-label{font-size:10px}.bottom-strip p{font-size:13px;line-height:1.5}
footer{font-size:11px;gap:14px;align-items:flex-start;flex-wrap:wrap}
footer>span:last-child{max-width:none;text-align:left}
}

/* Game library and appearance controls. */
:root{color-scheme:light;--surface:#fff;--soft:#fcfbf9;--accent-soft:#f1edf8}
.header-actions{display:flex;gap:10px;align-items:center}.theme-toggle{width:42px;height:42px;border:1px solid #d5d1d8;border-radius:10px;background:transparent;font-size:23px;display:grid;place-items:center}
.game-picker{margin:0 0 26px}.picker-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}.picker-heading .eyebrow{font-size:10px;color:var(--muted);letter-spacing:1.3px}.picker-heading h2{font-size:25px;margin:9px 0 0}.picker-heading>span{font-size:12px;color:var(--muted)}
.model-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.model-card{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:20px;border:1px solid var(--line);background:var(--surface);border-radius:13px;position:relative;transition:border-color .15s,transform .15s}.model-card:hover{transform:translateY(-2px);border-color:var(--purple)}.model-card.selected{background:var(--accent-soft);border:1.5px solid var(--purple);padding:19.5px}.model-icon{font-size:30px;color:var(--purple);line-height:1}.model-card strong{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600}.model-card>span:not(.model-icon):not(.model-tag):not(.model-status){font-size:13px;line-height:1.5;color:var(--muted)}.model-tag{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-top:3px}.model-card .model-status{font-size:12px;color:var(--purple);margin-top:auto;padding-top:7px;font-weight:600}
.board-heading h2>#board-title{color:inherit;margin-left:0}.board.compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.board.compact .cell{height:125px}.board.compact .cell-name{font-size:15px}.board.compact .cell-icon{font-size:28px}.cell.target:after{content:'';position:absolute;right:7px;top:7px;width:5px;height:5px;border-radius:50%;background:var(--purple)}.cell.free.target:after{background:white}.mechanic-note{font-size:13px;line-height:1.6;color:var(--muted);margin-top:17px}.board-footer .board-hint{display:none}.calculation-hint,.habit-note{font-size:14px;line-height:1.65;padding:17px;border:1px dashed #c6bad9;background:var(--accent-soft);border-radius:9px;color:var(--purple);margin:8px 0 17px}.secondary-action{display:block;background:transparent;border:1px solid var(--line);width:100%;border-radius:9px;padding:14px;margin-top:12px;font-size:14px;line-height:1.5}.secondary-action:hover{border-color:var(--purple)}.credit-link{font-size:13px;color:var(--muted)}.credit-link strong{color:var(--purple);font-weight:600}.credit-link:hover{text-decoration:underline}footer{gap:18px;flex-wrap:wrap}
:root[data-theme='dark']{color-scheme:dark;--ink:#f1edf7;--muted:#b9b0c6;--paper:#181622;--surface:#242030;--soft:#211d2b;--accent-soft:#342b47;--line:#40384e;--purple:#c3a9ed;--orange:#ff9977}
[data-theme='dark'] .header-actions button{border-color:#584d67}
[data-theme='dark'] nav button{color:#b9b0c6}[data-theme='dark'] nav button.nav-active{color:var(--ink)}
[data-theme='dark'] .brand-icon{color:#28243d}
[data-theme='dark'] .intro-note{color:#c0b3cc}[data-theme='dark'] .intro-note svg{stroke:#c0b3cc}
[data-theme='dark'] .game-shell{background:var(--surface)}
[data-theme='dark'] .tabs{background:#181622}[data-theme='dark'] .tabs button.selected{background:#3a304c;color:#f1edf7}
[data-theme='dark'] .local-badge{color:var(--muted)}
[data-theme='dark'] .icon-button{background:#30293c;border-color:var(--line)}
[data-theme='dark'] .cell{background:#2a2535;border-color:#4b415b;color:#f1edf7}
[data-theme='dark'] .cell-icon{color:#c4b6d3}
[data-theme='dark'] .cell:hover:not(:disabled){border-color:#c3a9ed}
[data-theme='dark'] .cell.active{background:#403151;border-color:#c3a9ed}
[data-theme='dark'] .cell.done{background:#243e35;border-color:#5f8d74;color:#c8efcf}
[data-theme='dark'] .cell.done .cell-icon{color:#c8efcf}
[data-theme='dark'] .cell.free{background:#8062ab;border-color:#a48bc7;color:#fff}
[data-theme='dark'] .cell.free .cell-icon{color:#fff}
[data-theme='dark'] .board-footer{color:var(--muted)}
[data-theme='dark'] .legend{background:#2a2535;border-color:#78698b}[data-theme='dark'] .legend.marked{background:#77ae89;border-color:#77ae89}
[data-theme='dark'] .challenge-panel{background:var(--soft)}
[data-theme='dark'] .challenge-label,[data-theme='dark'] .challenge-label>span:last-child{color:#bfb0ce}
[data-theme='dark'] .category{background:#392e49;border-color:#625078;color:#d3bcf4}
[data-theme='dark'] .question-context{color:#bfb6c9}
[data-theme='dark'] .answer{background:#2b2536;border-color:#51465f;color:#f1edf7}
[data-theme='dark'] .answer>span{border-color:#665574;color:#d5c3e5}
[data-theme='dark'] .answer:hover:not(:disabled),[data-theme='dark'] .answer.chosen{background:#443253;border-color:#c3a9ed}
[data-theme='dark'] .answer.correct{background:#253f33;border-color:#77ae89}
[data-theme='dark'] .answer.wrong{background:#4b2e2b;border-color:#e7a28a}
[data-theme='dark'] .primary{background:#cbb6ec;color:#20172d}
[data-theme='dark'] .feedback{background:#263e31;color:#d2edcf}
[data-theme='dark'] .feedback.error{background:#4b302a;color:#ffd2bc}
[data-theme='dark'] .challenge-bottom{color:#bfb0ca}
[data-theme='dark'] .stats small,[data-theme='dark'] .stats>div>div>span,[data-theme='dark'] .stats .progress-stat span,[data-theme='dark'] .stats .progress-stat strong{color:#bfb3cc}
[data-theme='dark'] .peach{background:#4a312c;color:#f7b68f}[data-theme='dark'] .lilac{background:#3d2e50;color:#d4baf2}[data-theme='dark'] .mint{background:#283c32;color:#a2d3b2}
[data-theme='dark'] .progress-track{background:#41364e}
[data-theme='dark'] .bottom-strip p,[data-theme='dark'] .small-label,[data-theme='dark'] .bottom-tag,[data-theme='dark'] footer,[data-theme='dark'] footer>span:first-child{color:#bdb0c8}
[data-theme='dark'] .tip-icon{color:#ecc18a}
[data-theme='dark'] dialog p,[data-theme='dark'] dialog li{color:#c0b6cc}
[data-theme='dark'] .calculation-hint,[data-theme='dark'] .habit-note{border-color:#705c88}
[data-theme='dark'] #toast{background:#d4c4eb;color:#241b30}
@media(max-width:1000px){.model-card{padding:16px}.model-card.selected{padding:15.5px}.model-card strong{font-size:16px}.picker-heading>span{max-width:220px}.header{gap:18px}nav{gap:18px}}
@media(max-width:650px){.header{padding:0 14px;gap:8px}.header-actions{gap:7px}.theme-toggle{width:36px;height:36px;font-size:21px}.install{padding:9px;font-size:11px}.brand{gap:7px;font-size:21px}.brand-icon{width:30px;height:30px;font-size:25px}.picker-heading{align-items:flex-start;flex-direction:column;gap:8px}.picker-heading h2{font-size:23px}.picker-heading>span{max-width:none;font-size:12px}.picker-heading .eyebrow{font-size:8px}.model-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.model-card{padding:14px;gap:8px}.model-card.selected{padding:13.5px}.model-card strong{font-size:16px;line-height:1.3}.model-card>span:not(.model-icon):not(.model-tag):not(.model-status){font-size:12px}.model-icon{font-size:27px}.model-tag{font-size:9px;letter-spacing:.3px}.model-card .model-status{font-size:11px}.board.compact .cell{height:108px}.board.compact .cell-name{font-size:13px}.board.compact .cell-icon{font-size:25px}.board-heading h2{font-size:20px}.mechanic-note{font-size:12px}.credit-link{font-size:12px}footer{flex-direction:column;gap:10px}.intro{padding-bottom:25px}}

/* A short, accessible introduction before the first game. */
.intro-links{display:flex;align-items:center;gap:20px;margin-top:16px}.onboarding-link{background:transparent;color:var(--purple);padding:0;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px}.intro-links .mobile-help{padding:0}
.onboarding{max-width:640px;max-height:calc(100dvh - 40px);padding:30px;background:var(--surface);overflow-y:auto;overscroll-behavior:contain}
.welcome-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:23px}.welcome-brand{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:600;letter-spacing:-.7px}.welcome-close{background:var(--paper);border:1px solid var(--line);border-radius:50%;width:36px;height:36px;font-size:25px;line-height:1}
.welcome-progress{display:flex;gap:6px;align-items:center;margin-bottom:22px}.welcome-progress>span:not(.welcome-count){width:32px;height:4px;background:var(--line);border-radius:4px}.welcome-progress>span.filled{background:var(--purple)}.welcome-count{margin-left:auto;font-size:12px;color:var(--muted)}
.welcome-symbol{width:52px;height:52px;background:var(--accent-soft);border-radius:14px;display:grid;place-items:center;font-size:35px;color:var(--purple);margin-bottom:20px}.welcome-label{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:1.3px}
.onboarding h2{font-size:30px;line-height:1.2;letter-spacing:-.8px;margin:12px 0 20px;outline:none}.onboarding p{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 16px}.welcome-highlight{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--accent-soft);border-radius:12px;margin-top:20px}.welcome-highlight>span{color:var(--orange);font-size:24px}.welcome-highlight strong{font-size:15px}.welcome-highlight p{font-size:14px;margin:7px 0 0}
.welcome-models{display:grid;grid-template-columns:1fr 1fr;gap:12px}.welcome-models>div{display:flex;gap:12px;border:1px solid var(--line);padding:16px;border-radius:11px}.welcome-models>div>span{color:var(--purple);font-size:25px;line-height:1}.welcome-models h3{font-size:15px;line-height:1.4;margin:0 0 6px;font-weight:600}.welcome-models p{font-size:13px;line-height:1.6;margin:0}
.welcome-facts{padding:0;list-style:none;margin:0;display:flex;flex-direction:column;gap:16px}.welcome-facts li{margin:0;color:var(--ink);font-size:15px;line-height:1.6;padding-bottom:15px;border-bottom:1px solid var(--line)}.welcome-facts strong{display:block;margin-bottom:4px;font-weight:600}.welcome-facts span{display:block;font-size:14px;color:var(--muted)}.onboarding .welcome-reminder{font-size:12px;margin:15px 0 0}
.welcome-navigation{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:24px}.welcome-navigation .primary{width:auto;min-width:190px;gap:24px}.welcome-navigation .secondary-action{width:auto;min-width:85px;margin:0}.welcome-navigation [hidden],.welcome-bottom [hidden]{display:none!important}
.welcome-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line);margin-top:23px;padding-top:18px}.welcome-bottom button{padding:5px 0;background:none;color:var(--muted);font-size:12px}.welcome-bottom a{font-size:12px;color:var(--muted);margin-left:auto}.welcome-bottom a strong{color:var(--purple)}.welcome-bottom a:hover{text-decoration:underline}
[data-theme='dark'] .welcome-facts li{color:var(--ink)}[data-theme='dark'] .onboarding p{color:var(--muted)}
@media(max-width:650px){.intro-links{gap:18px;flex-wrap:wrap}.onboarding-link{font-size:14px}.onboarding{padding:22px 20px;max-height:calc(100dvh - 24px);width:calc(100% - 24px);border-radius:16px}.onboarding h2{font-size:26px}.welcome-top{margin-bottom:17px}.welcome-symbol{width:43px;height:43px;font-size:29px;margin-bottom:15px}.welcome-models{grid-template-columns:1fr;gap:9px}.welcome-models>div{padding:12px}.welcome-models h3{font-size:15px}.welcome-models p{font-size:13px}.welcome-label{font-size:9px;letter-spacing:.8px}.welcome-navigation{gap:10px}.welcome-navigation .primary{min-width:0;flex:1;padding:14px;font-size:14px;gap:12px}.welcome-navigation .secondary-action{min-width:70px;padding:13px 10px}.welcome-bottom{gap:12px;flex-wrap:wrap}.welcome-bottom a{font-size:11px}.welcome-highlight{padding:15px;gap:11px}.welcome-highlight>span{font-size:20px}}

/* A colourful concept-matching card, inspired by the supplied reference. */
@media(min-width:1100px){.model-picker{grid-template-columns:repeat(5,minmax(0,1fr))}.model-card{padding:16px}.model-card.selected{padding:15.5px}}
.concept-game{--concept-ink:#163563;--concept-muted:#6b84a4;--concept-bg:#fff;--concept-cell:#fcfefd;--concept-line:#dce7f5;--concept-soft:#eef6ff;--concept-green:#079c6b;--concept-done:#ddf8ec;background:var(--concept-bg);border-color:var(--concept-line);color:var(--concept-ink)}
.concept-game .game-top,.concept-game .challenge-panel,.concept-game .stats{border-color:var(--concept-line)}
.concept-game .board-heading h2,.concept-game .question,.concept-game .stats strong{color:var(--concept-ink)}
.concept-game .board-heading p,.concept-game .question-context,.concept-game .mechanic-note,.concept-game .board-footer{color:var(--concept-muted)}
.concept-game .challenge-panel{background:var(--concept-bg)}
.concept-game .bingo-letters{gap:7px;padding-bottom:8px;font-family:'DM Sans',sans-serif;font-size:24px;letter-spacing:0;font-weight:700}
.concept-game .bingo-letters>span{color:#fff;background:#147cf4;padding:9px 0;border-radius:9px}
.concept-game .bingo-letters>span:nth-child(2){background:#19b88b}.concept-game .bingo-letters>span:nth-child(3){background:#ffc738;color:#49370b}.concept-game .bingo-letters>span:nth-child(4){background:#fa615a}.concept-game .bingo-letters>span:nth-child(5){background:#9258d9}
.concept-game .cell{height:112px;background:var(--concept-cell);border:1px solid var(--concept-line);color:var(--concept-ink);gap:9px;opacity:1}
.concept-game .cell .cell-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:13px}
.concept-game .cell-icon svg{width:25px;height:25px;display:block}
.concept-game .cell-name{font-size:12px;font-weight:700;overflow-wrap:anywhere}
.concept-game .tone-green .cell-icon{background:#dbf8ec;color:#08a16b}.concept-game .tone-blue .cell-icon{background:#e3efff;color:#167cf4}.concept-game .tone-red .cell-icon{background:#ffe4de;color:#ef6254}.concept-game .tone-yellow .cell-icon{background:#fff3ce;color:#d99b08}.concept-game .tone-purple .cell-icon{background:#efe4ff;color:#8650d8}
.concept-game .cell.done{background:var(--concept-done);border:2px solid #14b987;color:var(--concept-ink)}
.concept-tick{position:absolute;right:4px;top:4px;width:19px;height:19px;display:grid;place-items:center;background:#09ae7c;color:white;border-radius:50%;font-size:14px;font-weight:700;line-height:1}
.concept-game .cell.free{background:linear-gradient(135deg,#148af3,#0760c7);border-color:#096cd6;color:white;box-shadow:inset 0 0 0 1px #ffd349}
.concept-game .cell.free .cell-icon{background:#fff3ce;color:#d99b08}
.concept-question-top{display:flex;justify-content:space-between;align-items:center;color:#3680c9;margin:0 0 25px;font-size:14px}.concept-timer{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;color:#0870d9}
.concept-game .challenge-label{display:none}.concept-game .question{font-weight:700;font-size:28px;line-height:1.35}.concept-game .question-context{margin-bottom:27px}
.concept-answers{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:15px 0 6px}.concept-game .concept-answers .answer{background:var(--concept-cell);border:1px solid var(--concept-line);color:var(--concept-muted);text-align:center;justify-content:center;min-height:75px;font-size:16px;font-weight:700;box-shadow:0 3px 0 #dce7f544;padding:12px}
.concept-game .concept-answers .answer:hover:not(:disabled){background:var(--concept-soft);border-color:#4b98e6}
.concept-game .concept-answers .answer.correct{background:#91d2b4;color:#164b39;border-color:#75c5a2}
.concept-game .concept-answers .answer.wrong{background:#ffe4de;color:#914337;border-color:#e6a296}
.concept-game .feedback{background:var(--concept-done);color:#0b704e;padding:17px;font-size:15px;line-height:1.6}.concept-game .feedback.error{background:#fff0e8;color:#975b45}
.concept-game .primary{background:linear-gradient(110deg,#14b889,#009463);color:#fff;font-weight:700;justify-content:center;gap:20px;font-size:16px;min-height:56px}.concept-game .submit[hidden]{display:none!important}
.concept-game .challenge-bottom{color:var(--concept-muted)}
[data-theme='dark'] .concept-game{--concept-ink:#e1edff;--concept-muted:#adbed4;--concept-bg:#202534;--concept-cell:#252e40;--concept-line:#405675;--concept-soft:#2b3b56;--concept-done:#234a3d}
[data-theme='dark'] .concept-game .tone-green .cell-icon{background:#214e40;color:#7fe5b8}[data-theme='dark'] .concept-game .tone-blue .cell-icon{background:#233f61;color:#85bdff}[data-theme='dark'] .concept-game .tone-red .cell-icon{background:#593a3a;color:#ffa293}[data-theme='dark'] .concept-game .tone-yellow .cell-icon{background:#514626;color:#ffe198}[data-theme='dark'] .concept-game .tone-purple .cell-icon{background:#483660;color:#d2adff}
[data-theme='dark'] .concept-question-top,[data-theme='dark'] .concept-timer{color:#93c5ff}[data-theme='dark'] .concept-game .feedback{color:#c1f2d9}[data-theme='dark'] .concept-game .feedback.error{background:#51352b;color:#ffcfb4}
[data-theme='dark'] .concept-game .concept-answers .answer.correct{background:#337d60;color:#ecfff7;border-color:#6abc98}[data-theme='dark'] .concept-game .concept-answers .answer.wrong{background:#5f3734;color:#ffd6cd;border-color:#b47d75}
@media(max-width:650px){.concept-game .cell{height:96px;gap:7px;padding:4px}.concept-game .cell-name{font-size:10px;line-height:1.25}.concept-game .cell .cell-icon{width:32px;height:32px;border-radius:11px}.concept-game .cell-icon svg{width:21px;height:21px}.concept-game .bingo-letters{font-size:20px;gap:5px}.concept-game .bingo-letters>span{padding:6px 0;border-radius:6px}.concept-game .cell.free .cell-name{font-size:10px}.concept-game .question{font-size:25px}.concept-game .concept-answers .answer{font-size:14px;min-height:68px}.concept-tick{height:16px;width:16px;font-size:12px;top:3px;right:3px}.concept-game .feedback{font-size:14px}.concept-question-top{font-size:13px}.concept-game .board-heading h2{font-size:21px}}
@media(max-width:650px){.concept-game .cell{padding:3px 1px}.concept-game .cell-name{letter-spacing:-.15px}}

/* Keep the onboarding actions on the same baseline and at equal height. */
.welcome-navigation{align-items:stretch}
.welcome-navigation .primary,.welcome-navigation .secondary-action{display:flex;align-items:center;justify-content:center;margin:0;min-height:52px;line-height:1.4}
@media(max-width:650px){.concept-game .cell-name.long-label{font-size:9px;letter-spacing:-.2px;overflow-wrap:normal}}

/* Mobingo: a bingo grid and a confident wordmark, in both themes. */
.brand .mobingo-logo,.welcome-brand .mobingo-logo{display:block;width:180px;height:43px;object-fit:contain;max-width:none}
.brand .logo-dark,.welcome-brand .logo-dark{display:none}
[data-theme='dark'] .brand .logo-light,[data-theme='dark'] .welcome-brand .logo-light{display:none}
[data-theme='dark'] .brand .logo-dark,[data-theme='dark'] .welcome-brand .logo-dark{display:block}
.welcome-brand .mobingo-logo{width:150px;height:36px}
.footer-wordmark{font-family:'Space Grotesk',sans-serif;font-size:18px;letter-spacing:-.7px;font-weight:700;color:var(--ink)}
@media(max-width:650px){.brand .mobingo-logo{width:146px;height:35px}.welcome-brand .mobingo-logo{width:140px;height:34px}}

/* Mobile app shell: one screen at a time, with a persistent navigation dock. */
.mobile-nav,.mobile-game-info,.mobile-header-help{display:none}
.mobile-dialog{max-width:440px;padding:28px 23px;max-height:calc(100dvh - 30px);overflow:auto;background:var(--surface)}
.mobile-dialog h2{font-size:24px;line-height:1.25;margin:8px 30px 20px 0}
.mobile-dialog p{font-size:15px;line-height:1.65;color:var(--muted)}
.mobile-dialog-close{position:absolute;right:12px;top:9px;width:34px;height:34px;font-size:25px;background:transparent;border-radius:50%}
.mobile-menu-actions .secondary-action{text-align:left;display:block;color:var(--ink)}
.mobile-menu-actions .mobile-progress-summary{font-size:14px;background:var(--accent-soft);padding:15px;border-radius:10px}
.mobile-credit{display:block;text-align:center;color:var(--purple);font-size:12px;line-height:1.6;margin-top:22px}
#mobile-result-content .feedback{font-size:15px;line-height:1.7;padding:16px}
#mobile-result-content .feedback>strong{display:none}
#mobile-result .primary{margin-top:20px}
@media(max-width:768px){
 body.app-body{height:100dvh;min-height:0;overflow:hidden;display:grid;grid-template-rows:calc(56px + env(safe-area-inset-top,0px)) minmax(0,1fr) calc(66px + env(safe-area-inset-bottom,0px))}
 .app-body .header{height:100%;width:100%;max-width:none;margin:0;padding:env(safe-area-inset-top,0px) 16px 0;gap:12px;background:var(--paper)}
 .app-body .header>nav,.app-body .header #install{display:none}
 .app-body .header .mobingo-logo{width:143px;height:35px}
 .app-body .header-actions{gap:9px}
 .app-body .theme-toggle,.mobile-header-help{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:transparent}
 .mobile-header-help{display:grid;place-items:center;font-size:18px;font-weight:600}
 .app-body>main{height:100%;min-height:0;width:100%;max-width:none;margin:0;padding:0;overflow:hidden}
 .app-body .intro,.app-body .bottom-strip,.app-body main>footer{display:none}
 .mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);height:100%;padding:5px 10px calc(5px + env(safe-area-inset-bottom,0px));gap:5px;border-top:1px solid var(--line);background:var(--surface);z-index:4}
 .mobile-nav button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:transparent;border-radius:10px;font-size:11px;font-weight:600;color:var(--muted);min-height:44px}
 .mobile-nav button>span{font-size:22px;line-height:1}
 .mobile-nav button.active{background:var(--accent-soft);color:var(--purple)}
 .app-body .game-picker{height:100%;max-width:570px;margin:0 auto;padding:19px 16px 15px;display:flex;flex-direction:column;gap:16px;min-height:0}
 .app-body .picker-heading{display:block;flex-shrink:0;margin:0}
 .app-body .picker-heading .eyebrow{font-size:8px;letter-spacing:1px}
 .app-body .picker-heading h2{font-size:26px;line-height:1.15;margin:6px 0 6px}
 .app-body .picker-heading>span{font-size:12px}
 .app-body .model-picker{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(5,minmax(0,1fr));gap:9px;flex:1;min-height:0}
 .app-body .model-card,.app-body .model-card.selected{display:grid;grid-template-columns:40px minmax(0,1fr) 18px;grid-template-rows:auto auto;align-content:center;gap:4px 12px;padding:10px 12px;min-height:0;transform:none}
 .app-body .model-icon{grid-column:1;grid-row:1/3;align-self:center;font-size:29px;line-height:1;text-align:center}
 .app-body .model-tag,.app-body .model-status{display:none}
 .app-body .model-card strong{grid-column:2;grid-row:1;font-size:16px;line-height:1.25}
 .app-body .model-card>span:not(.model-icon):not(.model-tag):not(.model-status){grid-column:2;grid-row:2;font-size:12px;line-height:1.35}
 .app-body .model-card:after{content:'↗';grid-column:3;grid-row:1/3;align-self:center;font-size:20px;color:var(--purple)}
 .app-body .game-shell{height:100%;max-width:600px;margin:0 auto;border:0;border-radius:0;display:flex;flex-direction:column;box-shadow:none;overflow:hidden;background:var(--surface)}
 .app-body[data-mobile-view=games] .game-shell{display:none}
 .app-body:not([data-mobile-view=games]) .game-picker{display:none}
 .app-body .game-top{flex:0 0 46px;padding:5px 12px;min-height:0;justify-content:center}
 .app-body .tabs{padding:3px;flex:1;max-width:440px}
 .app-body .tabs button{padding:7px 10px;font-size:12px;line-height:1.25;flex:1}
 .app-body .local-badge{display:none}
 .mobile-game-info{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 54px;min-height:0;padding:6px 16px;border-bottom:1px solid var(--line)}
 .mobile-game-info>div:first-child{min-width:0}
 .mobile-game-info strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:17px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .mobile-game-info span{display:block;font-size:11px;color:var(--muted);margin-top:3px}
 .mobile-game-tools{display:flex;gap:5px;flex-shrink:0}
 .mobile-game-tools button{height:34px;width:34px;background:transparent;border-radius:8px;font-size:21px;color:var(--purple)}
 .app-body .game-layout{display:flex;flex:1;min-height:0;overflow:hidden}
 .app-body .board-panel,.app-body .challenge-panel{flex:1;min-width:0;min-height:0;padding:15px 16px;display:flex;flex-direction:column;border:0;overflow:hidden}
 .app-body[data-mobile-view=challenge] .board-panel{display:none}
 .app-body[data-mobile-view=board] .challenge-panel{display:none}
 .app-body .board-heading,.app-body .mechanic-note,.app-body .board-hint,.app-body .stats{display:none}
 .app-body .bingo-letters{flex-shrink:0;padding-bottom:8px;gap:5px;font-size:19px}
 .app-body .concept-game .bingo-letters>span{padding:4px 0}
 .app-body .board{flex:1;min-height:0;gap:5px;grid-template-rows:repeat(5,minmax(0,1fr))}
 .app-body .board.compact{grid-template-rows:repeat(3,minmax(0,1fr))}
 .app-body .board .cell,.app-body .board.compact .cell{height:auto;min-height:0;padding:4px 2px;gap:5px;border-radius:8px}
 .app-body .board .cell-icon{font-size:22px;line-height:1}
 .app-body .board .cell-name{font-size:clamp(10px,2.7vw,14px);line-height:1.2;letter-spacing:-.1px}
 .app-body .board .cell-name.long-label{font-size:clamp(9px,2.4vw,12px)}
 .app-body .concept-game .cell .cell-icon{height:30px;width:30px;border-radius:10px}
 .app-body .concept-game .cell-icon svg{height:20px;width:20px}
 .app-body .board .free .cell-name{font-size:10px;letter-spacing:.2px}
 .app-body .board-footer{flex-shrink:0;margin-top:10px;font-size:10px;gap:18px}
 .app-body .challenge-label{font-size:9px;letter-spacing:.7px;margin:0 0 12px;flex-shrink:0}
 .app-body .challenge-label>span:last-child{font-size:10px}
 .app-body #challenge{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
 .app-body .category{font-size:10px;padding:4px 7px;line-height:1.3;flex-shrink:0}
 .app-body .question{font-size:clamp(18px,2.6dvh,23px);line-height:1.3;letter-spacing:-.5px;margin:13px 0 18px;flex-shrink:0}
 .app-body .question-context,.app-body .challenge-bottom,.app-body .calculation-hint{display:none}
 .app-body .answers{gap:9px;flex-shrink:0}
 .app-body .answer{font-size:14px;line-height:1.4;min-height:48px;padding:11px 12px;gap:10px}
 .app-body .answer>span{height:24px;width:24px;font-size:11px}
 .app-body .submit{margin-top:16px;min-height:48px;padding:13px 16px;font-size:14px;flex-shrink:0}
 .app-body #feedback{display:none}
 .app-body .habit-note{font-size:13px;line-height:1.5;padding:13px;margin:0 0 10px;flex-shrink:0}
 .app-body #skip{font-size:12px;padding:10px;min-height:40px;margin-top:10px}
 .app-body .concept-question-top{font-size:12px;margin:0 0 8px;flex-shrink:0}
 .app-body .concept-game .question-context{display:block;font-size:12px;line-height:1.5;margin:-7px 0 15px;color:var(--concept-muted)}
 .app-body .concept-answers{gap:10px;margin:4px 0 0}
 .app-body .concept-answers .answer{font-size:15px;min-height:76px;padding:12px;box-shadow:none}
 .app-body[data-mobile-type=numbers] .game-layout{flex-direction:column}
 .app-body[data-mobile-type=numbers] .game-layout .challenge-panel{display:flex;order:-1;flex:0 0 auto;padding:12px 16px 0;max-height:40%}
 .app-body[data-mobile-type=numbers] .game-layout .board-panel{display:flex;flex:1;padding-top:10px}
 .app-body[data-mobile-type=numbers] .challenge-label,.app-body[data-mobile-type=numbers] .bingo-letters,.app-body[data-mobile-type=numbers] .board-footer{display:none}
 .app-body[data-mobile-type=numbers] .question{font-size:clamp(17px,2.4dvh,22px);margin:0 0 8px}
 .app-body[data-mobile-type=numbers] .submit{margin:0 0 8px}
 .app-body[data-mobile-type=numbers] #challenge{overflow:auto;flex:0 1 auto}
 .app-body .mobile-dialog{max-width:440px;width:calc(100% - 24px)}
 .app-body #toast{bottom:calc(80px + env(safe-area-inset-bottom,0px));width:calc(100% - 32px);max-width:440px;text-align:center}
 .mobile-nav a:focus-visible,.mobile-nav button:focus-visible{outline-offset:-3px}
}
@media(max-width:768px) and (max-height:650px){
 body.app-body{grid-template-rows:calc(50px + env(safe-area-inset-top,0px)) minmax(0,1fr) calc(60px + env(safe-area-inset-bottom,0px))}
 .app-body .game-picker{padding:12px;gap:10px}
 .app-body .picker-heading .eyebrow{display:none}
 .app-body .picker-heading h2{font-size:22px;margin:0 0 5px}
 .app-body .picker-heading>span{font-size:11px}
 .app-body .model-picker{gap:7px}
 .app-body .model-card,.app-body .model-card.selected{padding:7px 10px;gap:3px 8px}
 .app-body .model-card strong{font-size:15px}
 .app-body .model-card>span:not(.model-icon):not(.model-tag):not(.model-status){font-size:11px}
 .app-body .game-top{flex-basis:42px}
 .mobile-game-info{flex-basis:48px;padding:5px 13px}
 .app-body .board-panel,.app-body .challenge-panel{padding:11px 13px}
 .app-body .question{font-size:18px;margin:9px 0 13px}
 .app-body .challenge-label{margin-bottom:8px}
 .app-body .answer{min-height:44px;padding:8px 10px;font-size:13px}
 .app-body .answers{gap:7px}
 .app-body .submit{margin-top:11px;min-height:44px;padding:11px 14px}
 .app-body .concept-answers .answer{min-height:62px;font-size:14px}
 .app-body .board .cell-icon{font-size:19px}
 .app-body .concept-game .cell .cell-icon{height:24px;width:24px;border-radius:8px}
 .app-body .concept-game .cell-icon svg{height:17px;width:17px}
 .app-body .habit-note{font-size:12px;padding:10px;margin-bottom:7px}
 .app-body .mobile-dialog p,.app-body #mobile-result-content .feedback{font-size:14px}
}

@media(max-width:768px){html.mobile-game{height:100%;overflow:hidden}}

/* Consistent vector icons for the two game modes. */
.tabs button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.tabs .mode-icon{width:18px;height:18px;flex:0 0 18px}
.tabs button>span{white-space:nowrap}

/* Mobile play keeps the whole card and the current question together. */
@media(max-width:768px){
 .mobile-nav{grid-template-columns:repeat(3,1fr)}
 .app-body .game-layout{flex-direction:column}
 .app-body[data-mobile-view=challenge] .game-layout .board-panel,
 .app-body[data-mobile-view=board] .game-layout .board-panel{display:flex;flex:0 0 43%;padding:8px 12px;min-height:0}
 .app-body[data-mobile-view=challenge] .game-layout .challenge-panel,
 .app-body[data-mobile-view=board] .game-layout .challenge-panel{display:flex;flex:1;padding:10px 12px;min-height:0;border-top:1px solid var(--line)}
 .app-body .board .cell{padding:3px 2px;gap:0}
 .app-body .board:not(.compact) .cell-icon{display:none}
 .app-body .board .cell-name{font-size:clamp(9px,2.6vw,12px);line-height:1.2}
 .app-body .board .cell-name.long-label{font-size:clamp(8px,2.3vw,10px)}
 .app-body .bingo-letters{font-size:13px;padding-bottom:4px;gap:5px}
 .app-body .concept-game .bingo-letters>span{padding:2px 0}
 .app-body .board-footer,.app-body .challenge-label,.app-body .category,.app-body .habit-note{display:none}
 .app-body .question{font-size:18px;line-height:1.3;margin:0 0 10px;letter-spacing:-.3px}
 .app-body .answers{gap:6px}
 .app-body .answer{font-size:13px;line-height:1.3;min-height:42px;padding:8px 10px}
 .app-body .answer>span{height:22px;width:22px}
 .app-body .submit{margin-top:9px;min-height:42px;padding:10px 12px;font-size:13px}
 .app-body .concept-question-top{font-size:10px;margin-bottom:6px}
 .app-body .concept-game .question-context{display:none}
 .app-body .concept-answers{gap:7px;margin:0}
 .app-body .concept-answers .answer{min-height:48px;font-size:13px;padding:8px}
 .app-body #skip{margin-top:6px;min-height:36px;padding:7px;font-size:12px}
 .app-body[data-mobile-type=numbers] .game-layout .challenge-panel{order:-1;flex:0 0 auto;border-top:0;max-height:38%;padding:10px 12px 0}
 .app-body[data-mobile-type=numbers] .game-layout .board-panel{flex:1;padding:8px 12px}
}
@media(max-width:768px) and (max-height:650px){
 .app-body .game-top{flex-basis:36px;padding:3px 10px}
 .app-body .mobile-game-info{flex-basis:42px;padding:4px 12px}
 .mobile-game-info strong{font-size:15px}
 .mobile-game-info span{font-size:10px}
 .app-body[data-mobile-view=challenge] .game-layout .board-panel,
 .app-body[data-mobile-view=board] .game-layout .board-panel{flex-basis:34%;padding:5px 10px}
 .app-body .bingo-letters{display:none}
 .app-body .board{gap:3px}
 .app-body .board .cell{border-radius:5px;padding:2px 1px}
 .app-body .game-layout .challenge-panel{padding:7px 10px}
 .app-body .question{font-size:16px;line-height:1.25;margin-bottom:7px}
 .app-body .answer{min-height:36px;padding:6px 8px;font-size:12px;gap:7px}
 .app-body .answer>span{height:20px;width:20px;font-size:10px}
 .app-body .answers{gap:5px}
 .app-body .submit{min-height:36px;padding:8px 10px;margin-top:7px}
 .app-body .concept-answers .answer{min-height:40px;padding:7px;font-size:12px}
 .app-body .concept-question-top{margin-bottom:4px}
 .app-body[data-mobile-type=numbers] .game-layout .board-panel{flex:1}
}

@media(max-width:768px) and (max-height:650px){.app-body[data-mobile-type=habits] .board.compact .cell-icon{display:none}}

/* Use the available play height for the card and answer targets. */
@media(max-width:768px){
 .app-body:not([data-mobile-type=numbers]) #challenge{display:flex;flex-direction:column}
 .app-body #challenge .answers{flex:1 0 auto;grid-auto-rows:minmax(min-content,1fr);margin-bottom:0}
 .app-body #challenge .answers .answer{height:100%}
 .app-body #challenge .question{flex-shrink:0}
 .app-body #challenge .submit{flex-shrink:0}
}
@media(max-width:768px) and (min-height:651px){
 .app-body:not([data-mobile-type=numbers])[data-mobile-view=challenge] .game-layout .board-panel{flex-basis:50%}
 .app-body .board .cell-name{font-size:clamp(10px,2.9vw,14px)}
 .app-body .board .cell-name.long-label{font-size:clamp(9px,2.6vw,12px)}
 .app-body .question{font-size:clamp(19px,2.5dvh,23px);margin-bottom:12px}
 .app-body .answer,.app-body .concept-answers .answer{font-size:clamp(14px,1.9dvh,17px);min-height:48px}
 .app-body .answers{gap:9px}
 .app-body .concept-question-top{font-size:12px;margin-bottom:9px}
 .app-body .submit{min-height:46px;font-size:15px;margin-top:10px}
}

.mobile-answer-notice{display:none}
@media(max-width:768px){
 .app-body .mobile-answer-notice{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:8px;padding:6px 0 0;font-size:12px;line-height:1.3;color:#087655}
 .app-body .mobile-answer-notice.is-error{color:#a05437}
 .app-body .mobile-answer-notice button{background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:12px;padding:5px 0;min-height:30px;flex-shrink:0}
 [data-theme='dark'] .app-body .mobile-answer-notice{color:#8be2b7}
 [data-theme='dark'] .app-body .mobile-answer-notice.is-error{color:#ffc2a2}
 .app-body #mobile-result-next{background:linear-gradient(110deg,#14b889,#009463);color:#fff}
}
@media(max-width:768px) and (max-height:650px){
 .app-body .mobile-answer-notice{padding-top:3px;font-size:11px}
 .app-body .mobile-answer-notice button{font-size:11px;min-height:26px;padding:3px 0}
}