.favorite-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 62px;gap:10px;margin-top:18px;align-items:stretch}
.favorite-three .favorite-link{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:58px;width:100%;border:1px solid transparent;border-radius:16px;padding:10px 8px;text-decoration:none;font:inherit;font-weight:700;cursor:pointer}
.favorite-three .fav-0{background:#e9f1ff;color:#173f78;border-color:#b9cfec}
.favorite-three .fav-1{background:#e7f4ed;color:#245e43;border-color:#b6d6c3}
.favorite-three .fav-2{background:#f0eafa;color:#624480;border-color:#d1bfdf}
.favorite-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.favorite-three .favorite-link:hover{filter:brightness(.96)}
html[data-theme=soft] .favorite-three .fav-0{background:#e8f1f7;color:#405f69;border-color:#c3d6e1}
html[data-theme=soft] .favorite-three .fav-1{background:#e5f1eb;color:#365a4a;border-color:#c2d9cc}
html[data-theme=soft] .favorite-three .fav-2{background:#f0eaf3;color:#695675;border-color:#d7cadf}
.fav-editor{margin:14px 0;display:grid;gap:8px}.fav-editor h4{margin:0}
.mp-tabs button[aria-pressed=true]{background:var(--navy);color:white}
.my-mode .learning-cycle{display:none!important}
#mpDialog{width:min(720px,94vw);max-height:90vh;overflow:auto}
#mpDialog video{max-height:260px;width:100%;object-fit:contain;background:#111}
#mpDialog canvas{display:block;max-width:100%;height:auto;margin:16px auto;image-rendering:pixelated}
#mpDialog textarea{white-space:pre-wrap}
#mpError{color:var(--red);white-space:pre-wrap}
#main fieldset label:not(.preparation-toggle){display:block;margin:10px 0}
@media(max-width:480px){.favorite-three{gap:6px}.favorite-three .favorite-link{font-size:12px;padding:9px 5px;border-radius:12px}#mpDialog .actions .btn{flex:1 1 auto}.my-mode .actions{gap:8px}}
.ai-links.ai-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ai-links.ai-card-grid .ai-shortcuts{grid-column:1 / -1;justify-content:center}
.favorite-three .favorite-link>span:first-child{color:inherit}
@media(max-width:340px){.ai-links.ai-card-grid{grid-template-columns:1fr}}
/* Action hierarchy and accessible, text-labelled icons */
.mp-icon{width:20px;height:20px;flex:0 0 20px;vertical-align:middle}
.mp-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;line-height:1.5}
.mp-button>span{min-width:0}
.btn.mp-tone-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.mp-tone-blue{background:#eaf2fb;color:#174679;border-color:#bfd2e8}
.btn.mp-tone-green{background:#e9f5ed;color:#246044;border-color:#bad7c4}
.btn.mp-tone-danger{background:#fff2f2;color:#a12d39;border-color:#edc9cd}
.btn.mp-tone-purple{background:#f1ecfa;color:#634484;border-color:#d4c4e5}
.btn.mp-tone-neutral{background:#f7f9fc;color:var(--navy);border-color:var(--line)}
.btn.mp-button:hover{filter:brightness(.96)}
.btn.mp-tone-primary:hover{background:var(--navy-dark);color:white}
.actions.mp-create,.actions.mp-manage{justify-content:flex-start;gap:10px}
.mp-create{margin-bottom:24px}
.actions.mp-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;background:var(--sky);border:1px solid var(--line);border-radius:15px;padding:5px;margin:20px 0}
.mp-tabs .mp-button{width:100%;border:0;background:transparent;color:var(--navy);padding:11px 8px}
.mp-tabs .mp-button[aria-pressed=true]{background:var(--navy);color:white;box-shadow:0 2px 5px #16395c18}
.mp-count{display:inline-block;min-width:24px;padding:1px 7px;border-radius:20px;margin-left:5px;background:#dce8f4;font-size:13px;color:var(--navy)}
.mp-tabs [aria-pressed=true] .mp-count{background:#ffffff2e;color:white}
.mp-manage [data-mp=delete]{margin-left:auto}
.mp-achieved{display:flex;align-items:center;gap:7px;color:#246044;margin-top:12px}
.mp-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#main fieldset label.mp-choice{display:flex;align-items:flex-start;gap:10px;margin:0;padding:15px;border:1px solid var(--line);border-radius:12px;background:white;cursor:pointer}
#main fieldset label.mp-choice.is-selected{background:var(--sky);border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.mp-choice input{flex:none;margin-top:5px;accent-color:var(--navy)}
.mp-choice strong,.mp-choice small{display:block}
.mp-choice small{font-size:13px;font-weight:400;line-height:1.7;color:var(--muted);margin-top:5px}
.mp-use legend{padding:0 6px;font-weight:700;color:var(--navy)}
.mp-choice:focus-within{outline:3px solid #d58c00;outline-offset:3px}
.mp-output{gap:12px}.mp-exports{display:flex;gap:10px;flex-wrap:wrap}
html[data-theme=soft] .mp-tone-blue{background:#e8f1f7;color:#405f69;border-color:#c3d6e1}
html[data-theme=soft] .mp-tone-green{background:#e5f1eb;color:#365a4a;border-color:#c2d9cc}
html[data-theme=soft] .mp-tone-purple{background:#f0eaf3;color:#695675;border-color:#d7cadf}
html[data-theme=soft] .mp-tone-danger{background:#f7e9ec;color:#804756;border-color:#dfc8cc}
@media(max-width:600px){.mp-choices{grid-template-columns:1fr}.mp-create .mp-button{flex:1 1 auto}.mp-output>[data-mp=copy]{width:100%}.mp-exports{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);width:100%;gap:8px}.mp-exports .mp-button{width:100%;min-width:0;white-space:normal;padding:11px 7px}.mp-exports .mp-button>span{overflow-wrap:anywhere}.mp-tabs .mp-button{font-size:14px;gap:5px}.mp-tabs .mp-icon{width:17px;height:17px;flex-basis:17px}.mp-count{margin-left:2px;padding:1px 5px}.mp-manage .mp-button{font-size:14px;padding:10px}.mp-manage [data-mp=edit]{flex:1 1 auto}.mp-manage [data-mp=delete]{margin-left:0}}
@media(max-width:360px){.mp-tabs .mp-button{flex-direction:column;gap:4px}.mp-create{flex-direction:column;align-items:stretch}}

/* Favorites and Aichan share one responsive row. */
.favorite-three .favorite-link{height:60px;min-height:60px;font-size:16px}
.favorite-three .aichan-link{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;width:62px;height:60px;border:2px solid #b9e2ef;border-radius:20px;background:#f0fbff;text-decoration:none;overflow:hidden}
.favorite-three .aichan-link img{display:block;width:48px;height:48px;object-fit:contain}
.favorite-three .aichan-link:hover{background:#e4f5fb}
.ai-launch .same-chat-note{margin-top:20px}
.ai-links.ai-card-grid .ai-card{min-width:0}
.ai-links.ai-card-grid .ai-card-name{overflow-wrap:anywhere}
@media(max-width:600px){
 .favorite-three{grid-template-columns:repeat(3,minmax(0,1fr)) 46px;gap:6px;margin-top:12px}
 .favorite-three .favorite-link{height:48px;min-height:48px;padding:8px 4px;font-size:12px;gap:3px;border-radius:12px}
 .favorite-three .favorite-link>span:not(.favorite-name){display:none}
 .favorite-three .aichan-link{width:46px;height:48px;border-radius:15px}
 .favorite-three .aichan-link img{width:36px;height:36px}
 .ai-launch .same-chat-note{margin-top:16px}
}
html[data-theme=soft] .favorite-three .aichan-link{background:#eff6f6;border-color:#c2d8d8}

/* Keep choice controls beside their labels; allow readable text on narrow screens. */
#main fieldset label.preparation-toggle{display:flex;flex-direction:row;align-items:center;gap:10px;margin:0;min-height:44px}
#main .preparation-toggle input{flex:0 0 22px;margin:0}
#main .preparation-toggle span{min-width:0}
.mp-exports .mp-button{white-space:nowrap;min-width:max-content}
.mp-exports .mp-button>span{overflow-wrap:normal;white-space:nowrap}
@media(max-width:600px){.mp-exports{display:flex;flex-wrap:wrap;align-items:stretch}.mp-exports .mp-button{width:auto;flex:1 0 auto}.mp-exports [data-mp=text]{flex-basis:100%}.mp-exports [data-mp=qr]{flex-basis:100%}}

/* Three distinct registration routes, with a shared review-and-save form. */
#mpDialog [hidden]{display:none!important}
.mp-register-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}
#mpDialog .mp-register-method{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;padding:16px 12px;min-width:0;height:auto;border:2px solid transparent;border-radius:14px;line-height:1.5}
.mp-register-method .mp-icon{width:28px;height:28px;flex-basis:28px}
.mp-register-method strong,.mp-register-method small{display:block}
.mp-register-method strong{font-size:16px}.mp-register-method small{font-size:14px;font-weight:400;margin-top:5px}
#mpDialog .mp-register-camera{background:#edf4ff;color:#174679;border-color:#bfd2e8}
#mpDialog .mp-register-image{background:#e9f5ed;color:#246044;border-color:#bad7c4}
#mpDialog .mp-register-manual{background:#fff5e5;color:#74491b;border-color:#e9ce9e}
#mpDialog .mp-register-method[aria-pressed=true]{border-color:currentColor;box-shadow:0 0 0 1px currentColor}
#mpDialog .mp-register-method:focus-visible{outline:3px solid #d58c00;outline-offset:3px}
#mpDialog .mp-register-method>span{min-width:0}
#mpDialog #mpForm{margin-top:20px}
@media(max-width:600px){.mp-register-methods{grid-template-columns:minmax(0,1fr);gap:10px}#mpDialog .mp-register-method{flex-direction:row;align-items:center;padding:14px;gap:12px}.mp-register-method .mp-icon{flex:0 0 28px}}

/* Keep primary actions and selected tabs legible under both theme palettes. */
#main .mp-create .mp-button.mp-tone-primary{background:#07347b;color:#fff;border-color:#07347b}
#main .mp-create .mp-button.mp-tone-primary:hover{background:#05255a;color:#fff}
#main .mp-tabs .mp-button[aria-pressed=true]{background:#07347b;color:#fff;border-color:#07347b}
#main .mp-tabs .mp-button[aria-pressed=true]:hover{background:#05255a;color:#fff}
html[data-theme=soft] #main .mp-create .mp-button.mp-tone-primary,
html[data-theme=soft] #main .mp-tabs .mp-button[aria-pressed=true]{background:#d5e8df;color:#304f46;border-color:#58796e}
html[data-theme=soft] #main .mp-create .mp-button.mp-tone-primary:hover,
html[data-theme=soft] #main .mp-tabs .mp-button[aria-pressed=true]:hover{background:#c3dccf;color:#29483e}
#main .mp-tabs [aria-pressed=true] .mp-count{background:#ffffff2e;color:inherit}
html[data-theme=soft] #main .mp-tabs [aria-pressed=true] .mp-count{background:#bdd6c9;color:#29483e}

/* Make selecting a saved prompt the main visual focus. */
#main .mp-prompt-picker{margin:22px 0;padding:22px;background:#fff4dc;border:2px solid #bd7a16;border-left-width:6px;border-radius:18px;box-shadow:0 5px 16px #7547110d;gap:16px}
#main .mp-prompt-picker h3{display:flex;align-items:center;gap:9px;margin:0;color:#173f78;font-size:20px;line-height:1.5}
#main .mp-prompt-picker h3 .mp-icon{width:24px;height:24px;flex-basis:24px}
#main .mp-prompt-picker label{color:#593b16;font-weight:700;margin:0}
#main .mp-prompt-picker select.field{background:#fff;color:#173f78;border:2px solid #ad751e;min-height:54px;font-weight:700;margin-top:8px}
#main .mp-prompt-picker select.field:focus{outline:3px solid #185cac;outline-offset:3px;border-color:#185cac;box-shadow:none}
#main .mp-prompt-picker select.field:disabled{background:#eef1f3;color:#53616c;-webkit-text-fill-color:#53616c;opacity:1;border-color:#b6c0c7;cursor:not-allowed}
@media(max-width:600px){#main .mp-prompt-picker{padding:18px 14px;border-left-width:5px;gap:14px}#main .mp-prompt-picker h3{font-size:19px}}

/* UI v11: reference layouts for desktop and mobile. */
#main .mp-prompt-picker .mp-manage{margin:0;display:flex;flex-wrap:nowrap;gap:10px}
#main .mp-prompt-picker .mp-manage .mp-button{min-width:0}
#main .mp-prompt-picker .mp-manage [data-mp=delete]{margin-left:auto}
#main .mp-output-layout{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"copy exports" "preview preview";align-items:center;gap:10px;margin:10px 0 20px}
#main .mp-output-layout>[data-mp=copy]{grid-area:copy}
#main .mp-output-layout>.mp-full-preview{grid-area:preview;margin:0;min-width:0}
#main .mp-output-layout>.mp-exports{grid-area:exports;justify-content:flex-end;min-width:0}
@media(max-width:600px){
 #main .mp-prompt-picker .mp-manage{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
 #main .mp-prompt-picker .mp-manage .mp-button{padding:9px 7px;font-size:13px;gap:5px;width:100%;margin:0;min-height:46px}
 #main .mp-prompt-picker .mp-manage .mp-icon{width:16px;height:16px;flex-basis:16px}
 #main .mp-output-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "preview" "exports";gap:8px}
 #main .mp-output-layout>[data-mp=copy]{width:100%}
 #main .mp-output-layout>.mp-exports{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);width:100%;gap:8px}
 #main .mp-output-layout .mp-exports .mp-button{min-width:0;width:100%;padding:10px 6px;font-size:13px;gap:5px;white-space:normal}
 #main .mp-output-layout .mp-exports .mp-button>span{white-space:normal;overflow-wrap:anywhere}
 #main .mp-output-layout .mp-exports .mp-icon{width:16px;height:16px;flex-basis:16px}
}

/* v12: emphasize saved goals/words; separate word registration from the list. */
#goalsDialog #goalsList .goal-item{background:#fff1d9;border:2px solid #d7a957;border-left:6px solid #c58a2c;color:#41351f}
#wordBankDialog .bank-list{display:grid;gap:12px;padding:0;list-style:none}
#wordBankDialog .bank-list li.bank-card{background:#fff;border:3px solid #3f48cc;border-radius:16px;padding:14px;margin:10px 0;min-height:68px;color:#123b72;gap:12px;flex-wrap:wrap}
#wordBankDialog .bank-list li.bank-card.completed{border-color:#c8daec}
#wordBankDialog .bank-list li>span{min-width:0;flex:1 1 160px;overflow-wrap:anywhere}
#wordBankDialog .bank-list li small{color:#495664}
#wordBankDialog [hidden]{display:none!important}
#bankRegistrationPage{background:#f3f8fb;border:1px solid #c5d6df;border-radius:16px;padding:18px;margin:16px 0}
#bankRegistrationPage #bankForm{margin-top:18px}
#bankListPage h3{margin-top:22px}
html[data-theme=soft] #goalsDialog #goalsList .goal-item{background:#faf0d9;border-color:#d5bd84;border-left-color:#af8b43;color:#51452c}
@media(max-width:600px){#bankRegistrationPage{padding:14px}#wordBankDialog .bank-list li{padding:14px}#wordBankDialog .bank-list li>div{display:flex;gap:8px;flex-wrap:wrap}}

/* v13: four registration routes, including a pink capsule card. */
.mp-register-methods{grid-template-columns:repeat(2,minmax(0,1fr))}
#mpDialog .mp-register-capsule{background:#fce8ef;color:#713c50;border-color:#e6b4c5}
html[data-theme=soft] #mpDialog .mp-register-capsule{background:#f4e4eb;color:#674252;border-color:#d8b8c5}
#mpDialog .mp-capsule-template{display:inline-flex;align-items:center;gap:8px;background:#fce8ef;color:#713c50;border-color:#e6b4c5;white-space:normal;text-decoration:none}
@media(max-width:600px){.mp-register-methods{grid-template-columns:minmax(0,1fr)}}

/* v15: help disclosure and navigation on desktop/tablet. */
.feedback-heading{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.feedback-heading h3{margin:0;flex:0 1 auto}
.feedback-info{flex:0 0 44px;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--navy);font-size:25px;line-height:1;cursor:pointer}
.feedback-info[aria-expanded=true]{background:var(--navy);color:#fff}
#visualHelp[hidden],#qrHelp[hidden]{display:none!important}
@media(min-width:601px){
 #mobileNav{display:grid;grid-template-columns:repeat(4,minmax(0,180px));justify-content:center;position:fixed;left:0;bottom:0;width:100%;box-sizing:border-box;z-index:10;background:#fff;border-top:1px solid var(--line);padding:8px 12px max(8px,env(safe-area-inset-bottom));gap:8px;box-shadow:0 -4px 18px #284c6e12}
 #mobileNav button{border:0;border-top:3px solid transparent;border-radius:9px;background:#fff;color:var(--muted);font-size:16px;font-weight:700;min-height:66px;padding:5px 8px;white-space:nowrap}
 #mobileNav button span{display:block;font-size:21px;line-height:1.3}
 #mobileNav button[aria-current=page]{background:#edf4fc;color:#07347b;border-top-color:#ff9709}
 html[data-theme=soft] #mobileNav button[aria-current=page]{background:#e4f0e9;color:#355c4c;border-top-color:#b1cbbf}
 .shell{padding-bottom:120px}
 #toast{bottom:100px}
}

/* v16: unified native disclosures; controls and status messages stay visible. */
.app-help{margin:10px 0 16px;border:1px solid var(--line);border-radius:12px;background:var(--sky);color:var(--navy)}
.app-help>summary{min-height:44px;box-sizing:border-box;display:flex;align-items:center;gap:9px;padding:10px 14px;cursor:pointer;font-weight:700;list-style:none}
.app-help>summary::-webkit-details-marker{display:none}
.app-help>summary::before{content:'▸';flex:none}
.app-help[open]>summary::before{content:'▾'}
.app-help-content{padding:4px 14px 14px;color:var(--muted);line-height:1.8}
.app-help-content>p:last-child{margin-bottom:0}
.app-help-content .section{margin:8px 0}

/* v17: consistent neutral help cards in both themes. */
.app-help,html[data-theme="soft"] .app-help{background:#f3f4f5;border-color:#d9dde1;color:#3f4b57}
.app-help-content,html[data-theme="soft"] .app-help-content{color:#4f5963}
.help-bullets{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.help-bullets>li{position:relative;padding-left:1.1em;font-weight:400}
.help-bullets>li::before{content:'・';position:absolute;left:0;color:currentColor}

#mpDialog .mp-chat-action{margin:12px 0 16px}
#mpDialog .mp-chat-action .mp-tone-red{background:#ba1423;color:#fff;border-color:#ba1423;font-weight:700}
#mpDialog .mp-chat-action .mp-tone-red:hover{background:#97101d;color:#fff}
#mpDialog .mp-chat-action .mp-tone-red:focus-visible{outline:3px solid #ffbf47;outline-offset:3px}

#mpDialog .mp-extract-preview{margin:12px 0 0}
#mpDialog .mp-extract-preview>summary{font-weight:600;color:#153c70;cursor:pointer}
#mpDialog .mp-extract-preview label{display:block;margin-top:12px}
#mpDialog .mp-extract-text{display:block;width:100%;box-sizing:border-box;min-height:160px;max-height:320px;resize:vertical;margin-top:8px;font-size:14px;line-height:1.6}

/* v33: Mission option beside the copy action; wrap naturally on narrow screens. */
.prompt-copy-row{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.prompt-copy-row .mission-option{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:700;color:#123b72;margin:0}
.mission-option input[type="checkbox"]{width:22px;height:22px;flex:0 0 22px;accent-color:#173c7d;margin:0}
.mission-option:focus-within{outline:2px solid #3f48cc;outline-offset:3px;border-radius:4px}

/* v34: independently accessible goal actions and exclusive practice choices */
#topControls .goal-split{display:flex;align-items:stretch;min-width:0;flex:1}
#topControls .goal-split #goalsButton{flex:1;min-width:0;border-radius:13px 0 0 13px}
#topControls #goalCameraButton{flex:0 0 44px;min-width:44px;min-height:54px;padding:6px;border-radius:0 13px 13px 0;border-left:0;font-size:21px}
.practice-choice-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.practice-choice .practice-option{display:flex;align-items:center;justify-content:flex-start;text-align:left;gap:0;padding:14px;border:2px solid #c5d8ed;border-radius:12px;min-height:56px;cursor:pointer;background:#fff;color:#123b72;font-weight:700}
.practice-choice .practice-option:has(input:checked){background:#eaf3ff;border-color:#28549c}
.practice-choice .practice-option input[type=radio]{appearance:auto;-webkit-appearance:radio;width:22px;height:22px;flex:0 0 22px;accent-color:#28549c;margin:0;border-radius:50%}
.practice-choice .practice-option:focus-within{outline:2px solid #28549c;outline-offset:2px}
@media(max-width:600px){.practice-choice-options{grid-template-columns:1fr}#topControls .goal-split #goalsButton{font-size:14px;padding:8px 4px}#topControls #goalCameraButton{flex-basis:44px}}

/* v35: keep shared goal colors and a single divider between the two actions. */
#topControls #goalCameraButton{border-left:0!important}
.practice-choice .practice-option span{min-width:0;overflow-wrap:anywhere}

/* v37: one literal half-width space between the radio and its label. */
.practice-choice .practice-option .practice-option-space{white-space:pre;flex:0 0 auto}

/* v38: readable heading and optical alignment with Japanese label glyphs. */
.practice-choice legend{font-size:20px;font-weight:700;color:#123b72;line-height:1.4;margin-bottom:12px}
.practice-choice .practice-option input[type=radio]{align-self:center;position:relative;top:4px;padding:0}

/* v39: readable import preview and touch targets. */
#wordBankDialog .bank-bulk-section > .actions{display:grid;grid-template-columns:1fr;gap:12px}
#wordBankDialog .bank-bulk-section > .actions > .btn{width:100%;box-sizing:border-box}
#bankReview table{width:100%;border-collapse:collapse;table-layout:fixed;background:#fff}
#bankReview th,#bankReview td{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid #c8daec;overflow-wrap:anywhere}
#bankReview th{background:#f2f4f7;color:#173f76}
#bankReview h4:focus{outline:2px solid #759ad4;outline-offset:4px}
@media(min-width:600px){#wordBankDialog .bank-bulk-section > .actions{grid-template-columns:1fr 1fr}}
@media(max-width:599px){#wordBankDialog .bank-bulk-section,#bankReview{padding:12px}}
/* Header width adjustment: goals + camera : word bank = 5 : 3. */
#topControls .banner-learning-tools{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr)}
#topControls .goal-split{width:100%;min-width:0}
#topControls .goal-split #goalsButton{white-space:nowrap;gap:5px}
#topControls #wordBankButton{min-width:0;width:100%;padding:8px 4px;gap:4px}
#topControls #wordBankButton small{white-space:nowrap;font-size:14px}
#topControls #wordBankButton .bank-sprout{font-size:22px}
@media(max-width:360px){
 #topControls #goalCameraButton{flex-basis:36px;min-width:36px;font-size:18px}
 #topControls .goal-split #goalsButton{font-size:12px;padding:8px 2px;gap:3px}
 #topControls #goalsButton .goal-count{font-size:14px;min-width:24px;height:24px;line-height:24px}
 #topControls #wordBankButton small{font-size:12px}
 #topControls #wordBankButton .bank-sprout{font-size:18px}
}