/* A single navigation surface, shared by website and installed iPhone app. */
.bansho-ui .tab-strip{display:none!important}
.bansho-ui header{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:16px;padding:14px 0 12px;border-bottom:1px solid var(--line)}
.bansho-ui header .brand{display:grid;place-items:center;width:46px;height:46px;margin:0;border-radius:14px;background:var(--soft);color:var(--fg)}
.bansho-ui header .brand svg{display:block;width:24px;height:24px}
.bansho-ui header .exam-date[data-visible="true"]{order:0!important;width:auto!important;margin:0!important;padding:0!important;background:none!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.25;font-size:12px}
.bansho-ui header .exam-date #countdown{font-size:17px;letter-spacing:0;font-weight:650}
.bansho-ui header .exam-date time{color:var(--muted);font-size:12px}
.bansho-ui #menu-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:10px 14px;border-radius:14px;font-size:15px;background:var(--soft);border-color:transparent}
.bansho-ui #menu-toggle[hidden]{display:none}
.bansho-ui #account-status{grid-column:1/-1;order:4;margin:0;height:auto;line-height:1.3;font-size:12px;text-align:center}
.bansho-ui #account-status:empty,.bansho-ui #account-status[data-saved="true"]{display:none}
#app-menu{width:min(720px,calc(100vw - 40px));max-height:85dvh;padding:24px;border:1px solid var(--line);border-radius:24px;background:var(--bg);color:var(--fg);box-shadow:0 20px 80px #0003}
#app-menu::backdrop{background:#0006;backdrop-filter:blur(4px)}
#app-menu .menu-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
#app-menu h2{font-size:24px;margin:0}#app-menu h3{font-size:13px;color:var(--muted);font-weight:500;margin:0 0 10px}
#app-menu #menu-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;background:var(--soft);border:0}
#app-menu .menu-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#app-menu .menu-items,#app-menu #account-bar{display:grid;grid-template-columns:1fr;gap:8px;width:auto;order:0}
#app-menu .menu-items button{font-size:16px;min-height:48px;line-height:1.25;padding:12px;text-align:left;border-radius:12px;border:1px solid transparent;background:var(--soft);font-weight:500}
#app-menu .menu-items button[aria-current="page"]{background:var(--fg);color:var(--bg)}
#app-menu #online-logout{color:#af302a}
.bansho-ui main{padding-top:22px}
html[data-touch="true"] .keyboard-hint,html[data-touch="true"] kbd,html[data-touch="true"] .enter-key,html[data-touch="true"] #start .small{display:none!important}
/* Touch layouts keep ordinary questions and feedback in one comfortable viewport. */
@media(max-width:720px),(pointer:coarse){
 .bansho-ui{font-size:17px}
 .bansho-ui #app{padding:0 16px}
 .bansho-ui header{grid-template-columns:44px 1fr auto;gap:10px;padding:8px 0 10px}
 .bansho-ui header .brand{width:44px;height:44px;border-radius:12px}
 .bansho-ui header .exam-date #countdown{font-size:16px;white-space:nowrap}
 .bansho-ui header .exam-date time{font-size:12px}
 .bansho-ui #menu-toggle{gap:8px;min-height:44px;padding:8px 10px;font-size:14px;max-width:136px}
 .bansho-ui #current-page{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .bansho-ui #menu-toggle svg{flex:none;width:19px}
 .bansho-ui main{padding:16px 0;scrollbar-gutter:auto}
 .bansho-ui button,.bansho-ui select,.bansho-ui input{min-height:46px;font-size:17px}
 .bansho-ui button{border-radius:12px}
 .bansho-ui h1{font-size:26px;line-height:1.15}
 .bansho-ui .home-logo{width:210px;max-height:20dvh;margin-bottom:24px}
 .bansho-ui .home-menu{justify-content:center;padding-bottom:30px}
 .bansho-ui .level-card{min-height:66px;font-size:24px;padding:16px 22px;border-radius:18px}
 .bansho-ui .stats:has(+.practice-home){display:none}
 .bansho-ui .practice-home h1{font-size:24px;margin:0}
 .bansho-ui .practice-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
 .bansho-ui .practice-options button{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:83px;padding:10px 8px;border-radius:16px;background:var(--soft);border-color:transparent;box-shadow:none}
 .bansho-ui .practice-options button.selected{background:var(--fg);color:var(--bg)}
 .bansho-ui .practice-options button .mode-example{flex:none;min-height:27px;gap:6px}
 .bansho-ui .practice-options button .mode-label{font-size:15px;line-height:1.2;margin:0;min-height:0;flex:none;font-weight:500}
 .bansho-ui .practice-options button .mode-hanzi{font-size:28px}
 .bansho-ui .practice-options button .mode-pinyin{font-size:24px}
 .bansho-ui .practice-options button .mode-meaning{font-size:21px}
 .bansho-ui .practice-options button .mode-tones{font-size:23px}
 .bansho-ui .practice-options button .mode-icon{width:27px;height:27px}
 .bansho-ui .word-selection{margin:0;padding:10px 0;font-size:16px}
 .bansho-ui .word-selection summary{min-height:32px;display:flex;align-items:center;gap:8px;cursor:pointer}
 .bansho-ui .word-selection summary::before{content:'+';font-size:22px}
 .bansho-ui .word-selection[open] summary::before{content:'−'}
 .bansho-ui .word-selection .controls{gap:12px;padding:12px 0;font-size:15px}
 .bansho-ui .controls label{font-size:15px;gap:6px}
 .bansho-ui .controls input,.bansho-ui .controls select{min-height:46px;padding:10px}
 .bansho-ui #order{min-height:46px;height:auto;font-size:16px}
 .bansho-ui .start-row{margin:10px 0 0}
 .bansho-ui .start-row .primary{width:100%;min-height:52px;font-size:19px;padding:12px}
 .bansho-ui .study-top{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;font-size:16px}
 .bansho-ui .study-top #end{font-size:16px;padding:4px 0;text-align:left;min-height:40px}
 .bansho-ui .study-top>span:nth-child(2){grid-column:1;grid-row:2;font-size:16px;font-weight:600}
 .bansho-ui .study-top>span:last-child{grid-column:2;grid-row:1/3;font-size:15px;text-align:right}
 .bansho-ui .running-time{display:block;margin:6px 0 0;font-size:14px}
 .bansho-ui .study .track{margin:10px 0 0}
 .bansho-ui .study .question{height:clamp(105px,18dvh,155px);min-height:90px;padding:10px 42px;gap:8px}
 .bansho-ui .study .hanzi{font-size:60px}
 .bansho-ui .study .hanzi.long{font-size:38px}
 .bansho-ui .study .meaning-prompt{font-size:27px;line-height:1.25}
 .bansho-ui .study .pinyin-prompt{font-size:38px}
 .bansho-ui .study .choices{grid-template-columns:1fr;gap:10px}
 .bansho-ui .study .choice{min-height:55px;padding:12px 16px;font-size:19px;line-height:1.3}
 .bansho-ui .study .choice>span[lang="zh-CN"]{font-size:30px}
 .bansho-ui .word-star{width:44px;height:44px;font-size:28px}
 .bansho-ui .study .syllables{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .bansho-ui .study .syllable{min-width:0}
 .bansho-ui .study .syllable input{height:56px;font-size:25px;padding:10px;min-width:0;width:100%;border-radius:12px}
 .bansho-ui #answer-form[data-phase="typing"] .tones,.bansho-ui #answer-form[data-phase="typing"] #touch-check{display:none}
 .bansho-ui #answer-form[data-phase="tones"] #touch-done{display:none}
 .bansho-ui #answer-form[data-phase="tones"] .syllables{grid-template-columns:1fr;gap:12px}
 .bansho-ui #answer-form[data-phase="tones"] .syllable{display:grid;grid-template-columns:65px 1fr;gap:8px;align-items:center}
 .bansho-ui #answer-form[data-phase="tones"] .syllable input{font-size:21px;height:48px;padding:4px;text-align:center;border-color:transparent;background:var(--soft)}
 .bansho-ui .study .tones{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0}
 .bansho-ui .study .tones button{min-width:0;min-height:48px;padding:4px 0;font-size:13px;border-radius:10px}
 .bansho-ui .study .tone-shape{width:24px;height:22px}
 .bansho-ui .study-actions{gap:10px;margin-top:18px;flex-wrap:wrap}
 .bansho-ui .study-actions .primary,.bansho-ui #next{flex:1;min-height:52px;font-size:18px;background:var(--fg);color:var(--bg)}
 .bansho-ui .study .answered-question{height:85px;min-height:70px}
 .bansho-ui .study .feedback{padding:18px;margin-top:12px;font-size:18px;border-radius:18px}
 .bansho-ui .study .feedback strong{font-size:20px}
 .bansho-ui .study .feedback .answer,.bansho-ui .study .feedback .answer-hanzi{font-size:32px;margin-top:12px}
 .bansho-ui .study .feedback .muted{font-size:20px;line-height:1.4}
 .bansho-ui .study .components{font-size:16px;gap:8px;line-height:1.4}
 .bansho-ui .study .hint{font-size:16px}
 .bansho-ui .social-page h1{font-size:26px}
 .bansho-ui .social-controls label,.bansho-ui .board-rule,.bansho-ui .friend-name small{font-size:15px}
 .bansho-ui .daily-stat span,.bansho-ui .friend-presence{font-size:14px}
 .bansho-ui .daily-stat strong{font-size:26px}
 .bansho-ui .friends-code{font-size:23px}
 .bansho-ui .friend-row button{font-size:16px;padding:10px}
 .bansho-ui .board{font-size:16px}.bansho-ui .board th{font-size:13px}
 .bansho-ui .account-form label,.bansho-ui .settings label{font-size:16px}
 .bansho-ui dialog:not(#app-menu){padding:22px;border-radius:22px;font-size:17px}
 #app-menu{width:calc(100vw - 24px);padding:22px;max-height:88dvh;margin:auto auto 12px;border-radius:26px}
 #app-menu .menu-heading{margin-bottom:18px}
 #app-menu .menu-groups{grid-template-columns:1fr;gap:18px}
 #app-menu .menu-items,#app-menu #account-bar{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #app-menu h3{font-size:14px;margin-bottom:8px}
 #app-menu .menu-items button{min-height:48px;font-size:17px}
}
@media(max-width:370px){
 .bansho-ui #app{padding:0 12px}.bansho-ui header{gap:6px}.bansho-ui #menu-toggle{max-width:102px}
 .bansho-ui header .exam-date #countdown{font-size:14px}
 .bansho-ui .study .syllable input{font-size:20px}
 .bansho-ui #answer-form[data-phase="tones"] .syllable{grid-template-columns:52px 1fr;gap:5px}
}
@media(max-height:700px) and (max-width:720px){
 .bansho-ui main{padding-top:12px}
 .bansho-ui .practice-options{gap:8px;margin:12px 0}
 .bansho-ui .practice-options button{min-height:69px;padding:6px}
 .bansho-ui .practice-options button .mode-label{font-size:15px}
 .bansho-ui .study .question{height:90px;min-height:80px}
 .bansho-ui .study .choice{min-height:49px;padding:9px 14px}
 .bansho-ui .study .choices{gap:8px}
 .bansho-ui .study .answered-question{height:65px;min-height:60px}
}
#app-menu #community-menu{display:block}
@media(max-width:720px),(pointer:coarse){
 .bansho-ui .study .syllable{width:100%;max-width:none}
}
@media(max-height:520px) and (max-width:720px){
 .bansho-ui main{padding-top:8px;padding-bottom:8px}
 .bansho-ui .study-top{display:none}
 .bansho-ui .study .question{height:65px;min-height:60px;padding:4px 40px}
 .bansho-ui .study .hanzi{font-size:42px}
 .bansho-ui .study .track{margin-top:0}
 .bansho-ui .study-actions{margin-top:12px}
}
@media(max-height:600px) and (max-width:720px){
 .bansho-ui .practice-options button{min-height:48px;padding:10px 8px}
 .bansho-ui .practice-options button .mode-example{display:none}
 .bansho-ui .practice-options button .mode-label{font-size:16px}
}
/* Keep the actual focused fields attached below the changing question/feedback. */
#typing-panel[hidden]{display:none!important}
@media(max-width:720px),(pointer:coarse){
 .steady-typing #app{overflow:hidden}
 .steady-typing #main{min-height:0;padding:8px 0;overflow:auto}
 .steady-typing #typing-panel{flex:none;padding:8px 0 10px;border-top:1px solid var(--line);background:var(--bg)}
 #typing-panel .syllables{display:block;height:104px;overflow-y:auto;overscroll-behavior:contain;margin:0;scrollbar-width:thin}
 #typing-panel .syllable{display:grid;grid-template-columns:78px 1fr;gap:8px;align-items:center;width:100%;max-width:none;margin:0 0 8px}
 #typing-panel .syllable[hidden]{display:none}
 #typing-panel input{font-size:20px;height:46px;min-height:46px;padding:6px;width:100%;border-radius:10px;min-width:0}
 #typing-panel .tones{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0}
 #typing-panel .tones button{min-height:46px;min-width:0;padding:3px 0;border-radius:10px;font-size:12px}
 #typing-panel .tone-shape{width:24px;height:22px}
 #typing-panel .study-actions{display:flex;gap:10px;margin:6px 0 0}
 #typing-panel .study-actions button{min-height:48px;padding:10px 14px}
 #typing-panel .study-actions .primary{flex:1;font-size:18px}
 #typing-panel #character-form{padding-top:0}
 #typing-panel #character-answer{height:104px;font-size:30px;text-align:center}
 #typing-panel .answer-checked input{color:var(--muted)}
 .steady-typing .study-top{display:grid;grid-template-columns:1fr auto;gap:4px;font-size:14px}
 .steady-typing .study-top #end{min-height:32px;font-size:14px;padding:0}
 .steady-typing .study-top>span:nth-child(2){display:none}
 .steady-typing .study-top>span:last-child{grid-row:1;font-size:14px}
 .steady-typing .running-time{display:none}
 .steady-typing .study .track{margin-top:4px}
 .steady-typing .study .question,.steady-typing .study .answered-question{height:74px;min-height:74px;padding:4px 44px}
 .steady-typing .study .hanzi{font-size:46px}
 .steady-typing .study .meaning-prompt{font-size:23px}
 .steady-typing .study .feedback{display:grid;grid-template-columns:auto auto;justify-content:center;gap:4px 10px;padding:10px;margin:4px 0 0;font-size:17px;line-height:1.25}
 .steady-typing .study .feedback>strong,.steady-typing .study .feedback>.muted,.steady-typing .study .feedback>.components{grid-column:1/-1}
 .steady-typing .study .feedback:has(.answer-hanzi:empty) .correction{grid-column:1/-1}
 .steady-typing .study .feedback .study-actions{display:none}
 .steady-typing .study .feedback .answer,.steady-typing .study .feedback .answer-hanzi{font-size:25px;margin:0}
 .steady-typing .study .feedback .muted{font-size:18px}
 .steady-typing .study .feedback .components{font-size:14px;margin-top:2px}
 .steady-typing .study .feedback strong{font-size:17px}
 .steady-typing .study:has(.feedback) .question{display:none}
}
@media(max-width:370px){#typing-panel .syllable{grid-template-columns:56px 1fr;gap:6px}#typing-panel input{font-size:18px}}

/* Examples stay with the revealed word; vocabulary uses its own full-width row. */
.word-example { margin-top:12px; text-align:left; min-width:0; }
.word-list .word-example { grid-column:1/-1; grid-row:2; margin-top:0; }
.word-example button { min-height:44px; font-size:15px; border-radius:12px; }
.example-card { margin-top:10px; padding:20px; border:1px solid var(--line); border-radius:16px; box-shadow:0 4px 16px #00000008; font-size:18px; line-height:1.85; overflow-wrap:anywhere; }
.example-card[hidden] { display:none; }
.example-zh { font-size:clamp(26px,5vw,32px); line-height:1.7; }
.example-zh strong { text-decoration:underline; text-underline-offset:5px; }
.example-pinyin { margin:12px 0; font-size:18px; line-height:1.85; opacity:.75; }

.duel-create { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.duel-create label,.duel-syllables label,#duel-answer label { display:grid; gap:6px; }
.duel-create select,.duel-create input,#duel-answer input { width:100%; min-width:0; }
.duel-rule { grid-column:1/-1; margin:12px 0; line-height:1.6; }
.duel-score { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
.duel-player { display:grid; gap:6px; padding:16px; border:1px solid var(--line); border-radius:16px; }
.duel-player span { font-size:15px; }
.duel-prompt { font-size:30px; line-height:1.4; margin-bottom:20px; overflow-wrap:anywhere; }
.duel-syllables { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.duel-syllables>div { flex:1 1 100px; max-width:180px; }
#duel-countdown { font-size:80px; text-align:center; }
#duel-error { color:#b83939; margin:12px 0; }
#duel-skip,#duel-leave,#duel-next { margin-top:16px; }
#duel-invite-banner { display:block; margin:12px auto; }
#duel-invite-banner[hidden] { display:none; }
@media(max-width:480px){.duel-create{grid-template-columns:1fr;}.duel-score{gap:8px;}.duel-player{padding:12px;}}
.word-list .word-row > .zh { grid-column:1; grid-row:1; }
.word-list .word-row > .pinyin { grid-column:2; grid-row:1; }
.word-list .word-row > .gloss { grid-column:3; grid-row:1; }
.word-list .word-row > .word-star { grid-column:4; grid-row:1; }
.word-list .word-row > [data-speak] { grid-column:5; grid-row:1; }
.word-row .word-example button { width:auto; padding:8px 14px; font-size:15px; }
@media(max-width:720px){
 .word-list .word-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px 44px; }
 .word-list .word-row > .zh { white-space:normal; overflow-wrap:normal; word-break:normal; }
 .word-list .word-row > .gloss { grid-column:1/3; grid-row:2; }
 .word-list .word-row > .word-star { grid-column:3; grid-row:1/3; }
 .word-list .word-row > [data-speak] { grid-column:4; grid-row:1/3; }
 .word-list .word-example { grid-row:3; }
}

.controls label.include-starred,.duel-create label.include-starred {display:flex;align-items:center;gap:10px;}
.include-starred input[type=checkbox] {width:22px;height:22px;min-width:22px;margin:0;accent-color:var(--ink);}

.practice-options button .mode-recommendation { display:block; width:fit-content; align-self:center; margin:4px auto 0; padding:3px 9px; border-radius:999px; background:color-mix(in srgb,currentColor 10%,transparent); color:inherit; font-size:13px; font-weight:600; line-height:1.4; opacity:1; white-space:nowrap; }

/* Duels share the practice cards and keep setup, scores and actions distinct. */
.duel-page { max-width:880px; }
.duel-create { display:grid; grid-template-columns:1fr; gap:24px; }
.duel-create fieldset { min-width:0; margin:0; padding:0; border:0; }
.duel-create legend,.duel-friend-field,.duel-word-options>label { font-size:16px; font-weight:500; }
.duel-create legend { margin-bottom:12px; }
.duel-create .duel-friend-field { max-width:360px; gap:10px; }
.duel-create select,.duel-create input[type=number] { min-height:48px; padding:12px 14px; border-radius:12px; font-size:17px; }
.duel-level-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.duel-level-options button { display:grid; gap:8px; padding:18px 12px; background:var(--soft); border:1px solid transparent; border-radius:16px; font-size:24px; }
.duel-level-options button span { font-size:13px; font-weight:400; }
.duel-level-options button.selected { background:var(--fg); color:var(--bg); }
.duel-create .practice-options { margin:0; }
.duel-create .practice-options button { display:flex; flex-direction:column; justify-content:center; gap:10px; min-height:106px; }
.duel-create .practice-options .mode-label { min-height:0; margin:0; font-size:15px; }
.duel-create .practice-options kbd { display:none; }
.duel-word-options { display:grid; grid-template-columns:180px 1fr; align-items:end; gap:24px; }
.duel-create label.include-starred { display:flex; align-items:center; min-height:48px; gap:12px; font-weight:400; }
.duel-create .include-starred input[type=checkbox] { flex:0 0 22px; width:22px; min-height:22px; height:22px; accent-color:var(--fg); }
.duel-rules { margin:0; padding:16px 20px 16px 38px; background:var(--soft); border-radius:16px; font-size:15px; line-height:1.7; }
.duel-challenge { justify-self:start; min-width:180px; min-height:50px; }
.duel-summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.duel-summary span { padding:7px 12px; border-radius:999px; background:var(--soft); font-size:14px; }
.duel-score { gap:20px; margin:0 0 24px; }
.duel-player { min-width:0; gap:18px; padding:24px; background:var(--soft); border:1px solid transparent; box-shadow:0 6px 24px #00000008; border-radius:22px; }
.duel-player.is-you { border-color:var(--line); }
.duel-player-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.duel-player-head>strong { font-size:22px; overflow-wrap:anywhere; }
.duel-player .duel-status { font-size:13px; padding:5px 9px; border-radius:999px; background:var(--bg); }
.duel-player .duel-status.is-ready { background:var(--fg); color:var(--bg); }
.duel-progress { display:flex; align-items:baseline; gap:10px; }
.duel-progress>strong { font-size:38px; font-weight:500; }
.duel-progress small { font-size:22px; color:var(--muted); }
.duel-player progress { display:block; width:100%; height:7px; border:0; border-radius:999px; overflow:hidden; appearance:none; background:var(--line); accent-color:var(--fg); }
.duel-player progress::-webkit-progress-bar { background:var(--line); }
.duel-player progress::-webkit-progress-value { background:var(--fg); border-radius:999px; }
.duel-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; }
.duel-metrics dt { font-size:13px; color:var(--muted); margin-bottom:6px; }
.duel-metrics dd { font-size:21px; margin:0; font-variant-numeric:tabular-nums; }
.duel-page #duel-stage { padding:30px; margin:0; border-radius:22px; }
.duel-page #duel-stage:has(#duel-ready),.duel-page #duel-stage:has(#duel-countdown) { text-align:center; padding:36px 24px; }
.duel-page #duel-stage h2 { margin:0 0 24px; font-size:26px; line-height:1.3; }
.duel-page #duel-ready { min-width:160px; min-height:50px; }
.duel-page #duel-leave { margin-top:20px; }
@media(max-width:560px) {
 .duel-create { gap:22px; }
 .duel-level-options { gap:8px; }
 .duel-level-options button { font-size:21px; padding:16px 6px; }
 .duel-level-options button span { font-size:11px; }
 .duel-word-options { grid-template-columns:1fr; gap:14px; }
 .duel-word-options>label:first-child { max-width:180px; }
 .duel-challenge { width:100%; }
 .duel-score { gap:10px; }
 .duel-player { padding:16px 12px; gap:14px; border-radius:18px; }
 .duel-player-head>strong { font-size:19px; }
 .duel-player .duel-status { font-size:12px; }
 .duel-progress { gap:6px; }
 .duel-progress>strong { font-size:30px; }
 .duel-progress small { font-size:18px; }
 .duel-metrics { grid-template-columns:1fr; gap:10px; }
 .duel-metrics>div { display:flex; justify-content:space-between; gap:6px; align-items:baseline; }
 .duel-metrics dt { font-size:12px; margin:0; }
 .duel-metrics dd { font-size:17px; }
 .duel-page #duel-stage { padding:22px 16px; }
 .duel-page #duel-stage h2 { font-size:23px; }
}
/* Learner overview and spacious controls. */
.learner-progress { width:100%; }
.progress-highlights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:24px 0; }
.progress-highlights>div { display:grid; gap:8px; padding:24px; background:var(--soft); border-radius:22px; }
.progress-highlights strong { font-size:42px; font-weight:550; }
.progress-highlights span { font-size:16px; color:var(--muted); }
.progress-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.progress-card { min-width:0; padding:28px; border-radius:24px; background:var(--soft); }
.progress-card h2 { font-size:23px; margin:0 0 18px; }
.progress-card .row h2 { margin:0; }
.coverage-number { font-size:46px; margin:24px 0; }
.coverage-number span { font-size:17px; color:var(--muted); }
.progress-card progress { display:block; width:100%; height:18px; margin:24px 0; appearance:none; border:0; border-radius:999px; overflow:hidden; background:var(--line); accent-color:var(--fg); }
.progress-card progress::-webkit-progress-bar { background:var(--line); }
.progress-card progress::-webkit-progress-value { background:var(--fg); border-radius:999px; }
.activity-chart { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:14px; height:220px; }
.activity-day { display:grid; grid-template-rows:24px 1fr 24px; gap:12px; text-align:center; font-size:14px; }
.activity-column { display:flex; align-items:end; justify-content:center; min-height:0; }
.activity-column i { display:block; width:70%; border-radius:8px; background:var(--fg); opacity:.35; }
.activity-day.is-today .activity-column i { opacity:1; }
.activity-count { font-weight:600; }
.mock-progress { grid-column:1/-1; }
.mock-trend { width:100%; max-height:180px; margin-top:24px; }
.word-selection { border:0; background:var(--soft); border-radius:20px; padding:20px 24px; margin-top:24px; }
.word-selection summary { font-size:19px; font-weight:500; }
.word-selection .controls { display:grid; grid-template-columns:minmax(180px,1.6fr) minmax(110px,1fr) auto minmax(130px,1fr) minmax(195px,1.4fr); align-items:end; gap:20px; padding:22px 0 0; }
.word-selection .controls label { display:grid; gap:10px; font-size:15px; min-width:0; }
.word-selection .controls select,.word-selection .controls input[type=number],.word-selection .controls button { min-height:52px; font-size:18px; width:100%; min-width:0; padding:12px; border-radius:12px; }
.word-selection .controls .include-starred { display:flex; align-items:center; justify-content:flex-end; gap:12px; order:10; min-height:52px; white-space:nowrap; }
.word-selection .controls .include-starred input { flex:none; width:22px; height:22px; min-height:22px; accent-color:var(--fg); }
.word-selection .start-word input { width:90px; }
@media(min-width:900px) {
 .bansho-ui #app,.desktop #app { max-width:none; width:100%; padding:0 clamp(28px,4vw,80px); }
 .bansho-ui main,.desktop main { padding-top:30px; }
 .bansho-ui .home-menu,.desktop .home-menu { display:grid; grid-template-columns:minmax(280px,1fr) minmax(380px,1.2fr); gap:7vw; align-items:center; justify-content:stretch; width:100%; max-width:none; height:100%; min-height:500px; }
 .bansho-ui .home-logo,.desktop .home-logo { width:100%; max-width:600px; max-height:65dvh; margin:0 auto; }
 .bansho-ui .level-menu,.desktop .level-menu { gap:22px; }
 .bansho-ui .level-card,.desktop .level-card { min-height:clamp(110px,16dvh,170px); font-size:clamp(30px,2.5vw,44px); padding:26px 34px; border-radius:24px; }
 .bansho-ui h1,.desktop h1 { font-size:36px; }
 .bansho-ui .stats,.desktop .stats { gap:32px; margin-bottom:28px; padding-bottom:22px; }
 .bansho-ui .stat strong,.desktop .stat strong { font-size:38px; }
 .bansho-ui .stat>span,.desktop .stat>span { font-size:16px; }
 .bansho-ui .practice-options,.desktop .practice-options { gap:20px; margin:24px 0; }
 .bansho-ui .practice-options button,.desktop .practice-options button { min-height:clamp(140px,19dvh,210px); padding:24px 18px; border-radius:24px; }
 .bansho-ui .practice-options button .mode-hanzi,.desktop .practice-options button .mode-hanzi { font-size:48px; }
 .bansho-ui .practice-options button .mode-pinyin,.desktop .practice-options button .mode-pinyin { font-size:37px; }
 .bansho-ui .practice-options button .mode-meaning,.desktop .practice-options button .mode-meaning { font-size:29px; }
 .bansho-ui .practice-options button .mode-label,.desktop .practice-options button .mode-label { font-size:20px; margin-top:18px; }
 .bansho-ui .practice-options button .mode-icon,.desktop .practice-options button .mode-icon { width:42px; height:42px; }
 .bansho-ui .practice-options button .mode-tones,.desktop .practice-options button .mode-tones { font-size:35px; }
 .bansho-ui .start-row button,.desktop .start-row button { min-height:58px; min-width:200px; font-size:20px; }
 .bansho-ui .study,.desktop .study { max-width:1200px; }
 .bansho-ui .study .question,.desktop .study .question { height:clamp(180px,29dvh,300px); }
 .bansho-ui .study .hanzi,.desktop .study .hanzi { font-size:clamp(80px,10dvh,120px); }
 .bansho-ui .study .choice,.desktop .study .choice { min-height:84px; font-size:24px; padding:18px 24px; }
 .bansho-ui .study .choice>span[lang],.desktop .study .choice>span[lang] { font-size:42px; }
 .bansho-ui .social-page,.bansho-ui .duel-page,.desktop .social-page { max-width:none; }
 #app-menu { width:min(1100px,calc(100vw - 100px)); padding:38px; border-radius:30px; }
 #app-menu h2 { font-size:32px; } #app-menu h3 { font-size:18px; margin-bottom:18px; }
 #app-menu .menu-groups { gap:32px; } #app-menu .menu-items,#app-menu #account-bar { gap:14px; }
 #app-menu .menu-items button { min-height:68px; font-size:22px; padding:18px 22px; border-radius:18px; }
 .bansho-ui #menu-toggle { min-height:60px; font-size:20px; max-width:400px; }
 .bansho-ui header { grid-template-columns:60px minmax(200px,1fr) auto; gap:24px; padding:20px 0; }
 .bansho-ui header .brand { width:58px; height:58px; }
}
@media(max-width:1100px) { .word-selection .controls { grid-template-columns:repeat(2,minmax(0,1fr)); }.word-selection .controls .include-starred { grid-column:2; grid-row:1; white-space:normal; } }
@media(max-width:720px) {
 .progress-highlights { gap:8px; margin:18px 0; }.progress-highlights>div { padding:18px 12px; border-radius:16px; }.progress-highlights strong { font-size:30px; }.progress-highlights span { font-size:13px; }
 .progress-grid { grid-template-columns:1fr; gap:16px; }.progress-card { padding:22px 18px; }.progress-card h2 { font-size:20px; }.coverage-number { font-size:37px; }.coverage-number span { font-size:14px; }.activity-chart { gap:8px; height:190px; }
 .word-selection { padding:18px 14px; }.word-selection .controls { gap:16px 12px; }.word-selection .controls label { font-size:14px; }.word-selection .controls .include-starred { font-size:14px; }.word-selection .controls select,.word-selection .controls input[type=number] { font-size:17px; }
}
.duel-rating { display:flex; align-items:baseline; gap:18px; padding:24px 30px; margin-bottom:28px; background:var(--soft); border-radius:24px; }
.duel-rating>strong { font-size:50px; font-weight:550; }.duel-rating>span:first-child { font-size:22px; }.duel-rating>span:last-child { color:var(--muted); }
.duel-rated-choice { display:flex!important; align-items:center; gap:12px!important; font-size:17px; }.duel-rated-choice input { width:22px; height:22px; min-height:22px; accent-color:var(--fg); }
.duel-create #duel-selection { min-width:0; }.duel-create .word-selection { margin:0; }.duel-create .word-selection .controls .include-starred { justify-content:flex-end; }
.duel-create .word-selection .controls label { font-weight:400; }
.duel-player progress { height:22px; }.duel-player .duel-progress>strong { font-size:38px; }
.duel-score.is-racing { position:sticky; top:0; z-index:2; padding:12px 0; background:var(--bg); }
.duel-score.is-racing .duel-player { display:grid; grid-template-columns:1fr auto; gap:12px 20px; padding:18px 24px; }
.duel-score.is-racing .duel-player-head { grid-column:1; }.duel-score.is-racing .duel-progress { grid-column:2; grid-row:1; }
.duel-score.is-racing .duel-progress>strong { font-size:28px; }.duel-score.is-racing .duel-progress>span { display:none; }
.duel-score.is-racing progress { grid-column:1/-1; height:28px; }
.duel-score.is-racing .duel-metrics { display:none; }
.duel-page .duel-study { margin:0 auto; }.duel-page .duel-study .question { margin-top:0; }
.duel-page .duel-study .syllables { justify-content:center; }.duel-page .duel-study .tones { display:flex; gap:6px; }.duel-page .duel-study .tones button { flex:1; min-width:40px; }
.duel-page .duel-study .syllable { min-width:190px; max-width:300px; }.duel-page .duel-study .syllable input { width:100%; }
.duel-rating-change { display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:12px; margin:20px 0; font-size:20px; }.duel-rating-change strong { font-size:42px; }.duel-rating-change>span { font-size:24px; }
.duel-report { text-align:left; margin:24px 0; border-radius:18px; background:var(--soft); padding:20px; }
.duel-report summary { cursor:pointer; font-size:18px; }.duel-report ol { list-style:none; padding:0; margin:20px 0 0; }
.duel-report li { display:flex; align-items:start; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }.duel-report li:last-child { border-bottom:0; }
.duel-report li>div { display:grid; gap:7px; }.duel-report li strong { font-size:25px; font-weight:500; }.duel-report li span { font-size:16px; }
.duel-report .answer-outcome { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%; font-size:24px; background:var(--fg); color:var(--bg); }.duel-report .was-wrong .answer-outcome { background:#a73830; color:white; }.duel-report .missed-answer { color:#b8443b; overflow-wrap:anywhere; }
@media(max-width:720px) {
 .duel-rating { gap:10px; padding:20px; flex-wrap:wrap; }.duel-rating>strong { font-size:38px; }.duel-rating>span:first-child { font-size:18px; }.duel-rating>span:last-child { width:100%; font-size:14px; }
 .duel-score.is-racing { gap:8px; }.duel-score.is-racing .duel-player { padding:12px; grid-template-columns:1fr; gap:8px; }.duel-score.is-racing .duel-progress { grid-column:1; grid-row:2; }.duel-score.is-racing .duel-player-head>strong { font-size:17px; }.duel-score.is-racing .duel-status { display:none; }.duel-score.is-racing progress { height:20px; }
 .duel-page .duel-study .syllable { min-width:150px; }.duel-page .duel-study .tones button { min-width:24px; }.duel-report { padding:16px; }.duel-report summary { font-size:16px; }
}

.word-selection .controls #length{width:100%}.stat strong>span{font-size:20px;margin-left:6px}
/* Setup mirrors the level → exercise flow, keeping each screen short. */
.duel-create[data-step=level] .duel-tasks,.duel-create[data-step=level] #duel-selection,.duel-create[data-step=level] .duel-rated-choice,.duel-create[data-step=level] .duel-rules,.duel-create[data-step=level] .duel-challenge,.duel-create[data-step=level] #duel-setup-back { display:none!important; }
.duel-create[data-step=exercise] .duel-friend-field,.duel-create[data-step=exercise] .duel-levels,.duel-create[data-step=exercise] #duel-continue { display:none!important; }
.duel-page[data-setup=exercise] .duel-rating,.duel-page[data-setup=exercise] #duel-invitations { display:none; }
.duel-setup-navigation { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.duel-setup-navigation #duel-continue,.duel-setup-navigation .duel-challenge { margin-left:auto; min-width:180px; }
.duel-rules { padding:14px 18px; font-size:14px; }.duel-rules summary { cursor:pointer; }.duel-rules ul { margin:12px 0 0; padding-left:20px; }
.duel-create[data-step=exercise] { gap:14px; }.duel-create .practice-options { margin:0!important; gap:12px; }.duel-create .duel-tasks legend { display:none; }
@media(min-width:900px) {
 .bansho-ui .duel-create .practice-options button { min-height:clamp(94px,13dvh,150px); padding:14px; }
 .bansho-ui .duel-create .practice-options .mode-label { font-size:18px; margin-top:8px; }
 .bansho-ui .duel-create .practice-options .mode-hanzi { font-size:40px; }
 .bansho-ui .duel-create .practice-options .mode-pinyin { font-size:30px; }
 .duel-create .word-selection { padding:14px 20px; }.duel-create .word-selection .controls { padding-top:14px; }
 .duel-score.is-racing { margin-bottom:12px; padding:4px 0; }.duel-score.is-racing .duel-player { padding:12px 20px; }
 .duel-page #duel-stage:has(.duel-study) { padding:18px 24px; }.bansho-ui .duel-study .question { height:clamp(100px,17dvh,180px); min-height:100px; }
 .bansho-ui .duel-study .hanzi { font-size:clamp(65px,9dvh,90px); }.bansho-ui .duel-study .choice { min-height:64px; padding:12px 18px; }
}
@media(max-width:720px) {
 .duel-create[data-step=exercise] { gap:12px; }.bansho-ui .duel-create .practice-options button { min-height:76px; padding:8px; gap:4px; }
 .bansho-ui .duel-create .practice-options .mode-label { font-size:14px; }.duel-create .word-selection { padding:12px 14px; }
 .duel-rules { padding:10px 14px; font-size:13px; }.duel-create .duel-rated-choice { font-size:15px; }
 .duel-setup-navigation button { min-width:0!important; min-height:46px; }.duel-setup-navigation .duel-challenge { width:auto; padding:12px 28px; }
 .duel-page #duel-stage:has(.duel-study) { padding:14px 12px; }.duel-score.is-racing { margin-bottom:10px; }.duel-study .question { height:90px!important; min-height:70px!important; }
 .duel-study .choices { gap:8px; }.duel-study .choice { min-height:48px!important; }.bansho-ui .duel-study .syllables { display:flex; flex-wrap:wrap; overflow:visible; gap:10px; }.duel-page .duel-study .syllable { flex:1 1 145px; min-width:0; max-width:210px; }
}
.duel-create[hidden],#duel-invitations[hidden] { display:none!important; }
.duel-rating #duel-history { margin-left:auto; align-self:center; }
.duel-create #duel-change-exercise { display:none; }


.duel-history-pages { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:20px; }
#duel-invitations .friend-row { min-height:80px; justify-content:space-between; }
@media(max-width:720px){.duel-rating #duel-history{font-size:14px;padding:8px 12px}.duel-rating>span:last-of-type{width:auto}}

@media(max-width:720px){.duel-page:has(.is-racing) .duel-summary{display:none}.duel-score.is-racing .duel-player{grid-template-columns:1fr auto;gap:8px;padding:10px}.duel-score.is-racing .duel-progress{grid-column:2;grid-row:1}.duel-score.is-racing .duel-progress>strong{font-size:21px}.duel-score.is-racing .duel-player-head>strong{font-size:15px}}

/* Word controls and exercise cards remain visible together. */
.practice-exercises { display:none; }


#main:has(.practice-home) { padding-top:12px; padding-bottom:12px; }
#main:has(.practice-home)>.stats { margin:0 0 14px; padding:0 0 12px; }
#main:has(.practice-home)>.stats .stat { display:flex; align-items:baseline; gap:10px; }
#main:has(.practice-home)>.stats .stat strong { font-size:25px; }
.practice-home h1 { margin:0; }
.practice-home .practice-options { margin:14px 0!important; gap:12px!important; }
.practice-home .practice-options button { min-height:0!important; height:clamp(100px,17dvh,170px); padding:12px!important; }
.practice-home .practice-options .mode-label { margin-top:8px!important; }
.practice-home .word-selection { margin:10px 0 0; padding:12px 18px; }
.practice-home .start-row { margin:12px 0 0; }
#starred-question-count,#duel-starred-count { font-size:14px; color:var(--muted); white-space:nowrap; }
.example-zh { font-size:23px; line-height:1.9; }
.example-zh strong { font-size:1.45em; font-weight:650; text-decoration:none; }
.example-pinyin { font-size:17px; line-height:1.85; }
.example-translation { font-size:17px; line-height:1.7; }
@media(max-width:720px){
 .practice-home .practice-options { gap:8px!important; margin:10px 0!important; }
 .practice-home .practice-options button { height:clamp(67px,10.5dvh,90px); padding:6px!important; gap:3px!important; }
 .practice-home .practice-options .mode-label { font-size:14px!important; margin:0!important; }
 .practice-home .practice-options .mode-example { min-height:22px; }
 .practice-home .practice-options .mode-recommendation { font-size:10px; margin:0; }
 .practice-home .word-selection { padding:10px 14px; }
 .practice-home .start-row button { min-height:44px; padding:8px; }
 .example-zh { font-size:21px; }
}

.header-actions { display:flex; align-items:center; gap:10px; justify-self:end; }
#music-toggle { display:grid; place-items:center; padding:10px; width:46px; height:46px; min-height:44px; border-radius:14px; background:var(--soft); border-color:transparent; }
#music-toggle svg { width:22px; height:22px; }
.auth-home { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr); align-items:center; gap:clamp(30px,7vw,130px); min-height:calc(100dvh - 180px); max-width:1500px; margin:auto; }
.auth-home .home-logo { width:100%; max-width:650px; max-height:60dvh; object-fit:contain; margin:0; }
.auth-home .account-page { width:100%; max-width:460px; margin:0; }
.auth-home h1 { font-size:36px; margin:0 0 28px; }
.auth-home .account-form { gap:22px; }
.auth-home .account-form input { min-height:56px; font-size:19px; }
.auth-home .account-form button { min-height:54px; font-size:19px; }
[data-auth=guest] header { grid-template-columns:1fr auto; }
[data-auth=guest] header .brand,[data-auth=guest] header .exam-date { display:none!important; }
[data-auth=guest] .header-actions { grid-column:2; }
[data-auth=guest] #theme { min-width:108px; }
#duel-sync { display:flex; justify-content:flex-end; align-items:center; gap:10px; font-size:13px; color:var(--muted); margin:0 0 10px; }
#duel-sync[hidden]{display:none}
@media(max-width:720px){
 .header-actions { gap:5px; }#music-toggle { width:36px; padding:6px; }.bansho-ui header { gap:6px; }
 .bansho-ui #menu-toggle { padding:8px; gap:5px; }.bansho-ui #menu-toggle #current-page { max-width:62px; }
 .bansho-ui header .exam-date #countdown { font-size:12px; }
 .auth-home { grid-template-columns:1fr; gap:20px; min-height:0; padding:12px 6px; }
 .auth-home .auth-brand { text-align:center; }.auth-home .home-logo { width:230px; max-height:21dvh; }
 .auth-home .account-page { margin:auto; }.auth-home h1 { font-size:27px; margin-bottom:20px; }
 .auth-home .account-form { gap:16px; }
}

@media(min-width:900px){.practice-home .practice-options button{position:relative}.practice-home .practice-options .mode-recommendation{position:absolute;top:5px;right:8px;font-size:11px;margin:0;padding:2px 7px}}

.bansho-ui #app,.desktop #app{min-height:100dvh;display:flex;flex-direction:column}.bansho-ui header,.desktop header{flex-shrink:0}.bansho-ui main,.desktop main{flex:1;width:100%;min-width:0}.bansho-ui .home-menu,.desktop .home-menu{min-height:0}[data-screen=home] header .brand{visibility:hidden}

html:not(.bansho-ui) #app>header,html:not(.bansho-ui) .tab-strip{visibility:hidden}
.boot-screen{min-height:65dvh;display:grid;place-items:center}.boot-screen img{width:min(420px,75vw);height:auto}
.online-now{color:var(--muted);font-size:14px;text-align:center;margin-top:14px;line-height:1.5}.online-now::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#32a16f;margin-right:7px;vertical-align:middle}.online-now[hidden]{display:none}
.auth-brand,.home-brand{display:flex;flex-direction:column;align-items:center;min-width:0}
.home-brand .home-logo{margin-bottom:0}
@media(max-width:899px){.home-brand{margin-bottom:20px}}
.auth-home{row-gap:24px;grid-template-rows:1fr auto}
.auth-home>.online-now{grid-column:1/-1;margin:0;padding-bottom:18px}
@media(max-width:720px){.auth-home{grid-template-rows:auto;row-gap:20px}}
/* Membership uses the game's own character art and one clear checkout action. */
.bansho-ui #modal:has(.membership){width:min(900px,calc(100vw - 40px));max-width:none;max-height:92dvh;overflow:auto;padding:0;border:0;border-radius:28px;box-shadow:0 32px 120px #130d3055}
.bansho-ui #modal:has(.membership)::backdrop{background:#100d236b;backdrop-filter:blur(7px)}
.bansho-ui #modal:has(.membership) #close-modal{position:absolute;z-index:3;top:14px;right:16px;padding:7px 10px;border:0;background:transparent;color:var(--muted);font-size:12px}
.membership{--plan-accent:#6949aa;--plan-tint:#f2edf9;display:grid;grid-template-columns:40% 60%;color:var(--fg);background:var(--bg)}
.membership-hero{position:relative;min-height:540px;overflow:hidden;isolation:isolate;background:#201b32 url("/hskduel/paywall-background.webp") center/cover no-repeat}
.membership-hero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,#181324 2%,#181324e0 15%,transparent 50%);pointer-events:none}
.membership-character{position:absolute;width:125%;max-width:none;height:auto;left:-12.5%;top:36px;filter:drop-shadow(0 12px 28px #09071366);pointer-events:none}
.membership .membership-hero h2{position:absolute;z-index:2;bottom:32px;left:30px;right:26px;font-size:38px;line-height:1.08;letter-spacing:-1.2px!important;color:#fff7e8;margin:0;text-wrap:balance;font-weight:750}
.membership-content{min-width:0;padding:60px 32px 24px}
.membership-features{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.membership-features li{display:flex;align-items:center;gap:10px;margin:0;line-height:1.25}
.membership-features svg{width:23px;height:23px;flex:none;color:var(--plan-accent)}
.membership-features img{width:40px;height:40px;object-fit:contain;flex:none}.membership-features .membership-energy{width:36px;height:36px;margin:2px}.membership-features .membership-noads{grid-column:1/-1;justify-content:center;gap:8px}.membership-noads svg{width:18px;height:18px}.membership-features .membership-noads strong{font-size:11px;color:var(--muted)}
.membership-features strong{font-size:12px;font-weight:600}
.membership-plans{display:grid;gap:10px}
.membership-plans button{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:66px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--fg);text-align:left;transition:background .15s,border-color .15s}
.membership-plans button:hover{border-color:var(--plan-accent)}
.membership-plans button[aria-pressed=true]{border:2px solid var(--plan-accent);padding:13px 17px;background:var(--plan-tint);box-shadow:0 3px 12px #6949aa0d}
.membership-plans button:focus-visible,#membership-checkout:focus-visible{outline:3px solid var(--plan-accent);outline-offset:3px}
.plan-check{width:18px;height:18px;flex:none;border:1.5px solid var(--line);border-radius:50%}
[aria-pressed=true]>.plan-check{border:5px solid var(--plan-accent);background:var(--bg)}
.membership-plans strong{font-size:15px;font-weight:650}.plan-name{display:flex;flex-direction:column;gap:3px}
.plan-detail{font-size:11px;color:var(--muted)}
.membership .plan-price{margin-left:auto;display:flex;align-items:flex-end;flex-direction:column;gap:3px;font-size:22px;font-weight:700;letter-spacing:-.6px;white-space:nowrap}
.membership .plan-price small{font-size:11px;font-weight:450;letter-spacing:0;color:var(--muted)}
.plan-saving{position:absolute;right:14px;top:-9px;background:var(--plan-accent);color:#fff;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:650;line-height:1.2}
#membership-checkout{width:100%;margin-top:20px;min-height:52px;padding:14px 16px;border:0;border-radius:14px;background:var(--plan-accent);color:#fff;font-size:15px;font-weight:650;box-shadow:0 5px 0 #4a317d,0 9px 22px #6949aa20;transition:filter .15s,transform .15s}
#membership-checkout:not(:disabled):hover{filter:brightness(1.1);transform:translateY(-1px)}
#membership-checkout:disabled{opacity:.65;box-shadow:none;cursor:default}
.membership-rule{display:grid;font-size:11px;line-height:1.6;color:var(--muted);text-align:center;margin:16px auto 0;max-width:340px}
.membership-footer{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:16px}
.membership-footer a,.membership-footer button{font-size:11px;color:var(--muted);padding:0;border:0;background:none;text-decoration:none}.membership-footer a:hover{text-decoration:underline}
.membership-current{padding:24px;background:var(--soft);border-radius:18px;font-size:22px;margin:30px 0 20px}.membership-current span{display:block;margin-top:10px;font-size:14px}
.membership-paid .membership-hero{min-height:440px}.membership-paid #manage-billing{width:100%;border-radius:12px}
.membership-link{font-size:14px;padding:10px 20px;margin-top:0}.level-locked{opacity:.7}.level-menu .online-now{margin-top:0}#billing-error{color:#d65050;font-size:13px;margin-top:14px}#billing-error:empty{display:none}
html[data-theme=dark] .membership{--plan-accent:#aa88e6;--plan-tint:#292235}html[data-theme=dark] #membership-checkout,html[data-theme=dark] .plan-saving{color:#1c122c}
@media(max-width:650px){
 .bansho-ui #modal:has(.membership){width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:22px}
 .bansho-ui #modal:has(.membership) #close-modal{top:9px;right:10px;color:#fff7e8;background:#18132455;border-radius:12px}
 .membership{grid-template-columns:1fr}
 .membership-hero,.membership-paid .membership-hero{min-height:178px}
 .membership-character{width:235px;left:auto;right:-16px;top:3px;transform:rotate(-7deg)}
 .membership-hero::after{background:linear-gradient(90deg,#181324b3,transparent 75%)}
 .membership .membership-hero h2{left:22px;bottom:24px;right:auto;width:48%;font-size:29px;letter-spacing:-.8px!important;text-wrap:balance}
 .membership-content{padding:23px 20px 18px}
 .membership-features{gap:12px 10px;margin-bottom:23px}.membership-features li{gap:7px}.membership-features img{width:34px;height:34px}.membership-features .membership-energy{width:30px;height:30px}.membership-features svg{width:20px;height:20px}.membership-features strong{font-size:11px}
 .membership-plans{gap:10px}.membership-plans button{min-height:61px;padding:11px 13px;gap:10px}.membership-plans button[aria-pressed=true]{padding:10px 12px}.membership-plans strong{font-size:14px}.membership .plan-price{font-size:20px}
 #membership-checkout{margin-top:16px;min-height:49px;font-size:13px}.membership-rule{font-size:10px;margin-top:14px}.membership-footer{margin-top:13px}
 .home-menu .level-menu{gap:10px}
}

/* Local geometric English type, with native Chinese and pinyin fallbacks. */
@font-face{font-family:Bansho Sans;src:url('/fonts/montserrat-variable.woff2') format('woff2');font-weight:100 900;font-display:optional}
html.bansho-ui{font-family:var(--bansho-typeface,Arial),Arial,"PingFang SC","Microsoft YaHei",sans-serif;overflow-x:clip;scrollbar-width:none}
.bansho-ui body,.bansho-ui #app{overflow-x:clip}
.bansho-ui main,.bansho-ui dialog{scrollbar-width:none}
.bansho-ui::-webkit-scrollbar,.bansho-ui body::-webkit-scrollbar,.bansho-ui main::-webkit-scrollbar,.bansho-ui dialog::-webkit-scrollbar{display:none}
.bansho-ui .level-card,.bansho-ui h1,.bansho-ui h2,.bansho-ui .mode-label{letter-spacing:.025em}
.bansho-ui .level-card{font-size:clamp(20px,2.2vw,34px)}
.bansho-ui #theme{display:grid;place-items:center;width:46px;min-width:46px!important;height:46px;padding:10px;background:var(--soft);border:0;border-radius:14px}
.bansho-ui #theme svg{width:22px;height:22px}
.bansho-ui .study-top{font-size:clamp(20px,1.7vw,28px);gap:18px}
.bansho-ui .study-top #end,.bansho-ui .study-top>span:nth-child(2),.bansho-ui .study-top>span:last-child{font-size:inherit}
.word-example{text-align:center}.example-card{text-align:left}
.bansho-ui .practice-home .practice-options button{height:clamp(82px,13dvh,140px)}
.practice-home .word-selection .controls,.duel-create .word-selection .controls{gap:12px;padding:12px 0 0}
.practice-home .word-selection .controls input,.practice-home .word-selection .controls select,.practice-home .word-selection .controls button,.duel-create .word-selection .controls input,.duel-create .word-selection .controls select,.duel-create .word-selection .controls button{min-height:40px;font-size:16px;padding:8px}
.practice-home .word-selection .controls .include-starred{min-height:40px}
.duel-create .word-selection .controls{grid-template-columns:1fr 1fr auto 1fr}
.duel-create[data-step=level] .duel-friend-field,.duel-create[data-step=level] #duel-choose-friend,.duel-create[data-step=exercise] .duel-challenge{display:none!important}
.duel-create[data-step=friend] .duel-levels,.duel-create[data-step=friend] .duel-tasks,.duel-create[data-step=friend] #duel-selection,.duel-create[data-step=friend] .duel-rules,.duel-create[data-step=friend] #duel-continue,.duel-create[data-step=friend] #duel-choose-friend{display:none!important}
.duel-page[data-setup=friend] .duel-rating{display:none}
.duel-create[data-step=level] .duel-setup-navigation,.duel-create[data-step=exercise] .duel-setup-navigation,.duel-create[data-step=friend] .duel-setup-navigation{grid-column:1/-1}
#duel-send[hidden]{display:none}.duel-create .duel-level-options button{font-size:clamp(17px,2vw,26px)}
.duel-create .duel-rules{padding:4px 0}
.duel-history-result{display:flex;flex-direction:column;gap:6px;align-items:flex-end;margin-left:auto;white-space:nowrap}
.duel-outcome.win,.rating-delta.win,.duel-rating-change .win{color:#187449}
.duel-outcome.loss,.rating-delta.loss,.duel-rating-change .loss{color:#bd3434}
.duel-outcome.cancelled{color:#a85a08}
[data-theme=dark] .duel-outcome.win,[data-theme=dark] .rating-delta.win,[data-theme=dark] .duel-rating-change .win{color:#65d89b}
[data-theme=dark] .duel-outcome.loss,[data-theme=dark] .rating-delta.loss,[data-theme=dark] .duel-rating-change .loss{color:#ff8585}
[data-theme=dark] .duel-outcome.cancelled{color:#ffb75b}
.rating-delta{font-size:14px}.rating-history{margin:16px 0;background:var(--soft);border-radius:18px;padding:16px 22px}
.rating-history h2{font-size:18px;margin:0 0 8px}.rating-history svg{display:block;width:100%;max-height:190px;overflow:visible}
.rating-history text{fill:var(--muted);font:14px Bansho Sans,Arial,sans-serif}.rating-grid{stroke:var(--line);fill:none}.rating-line{stroke:var(--fg);stroke-width:2.5;fill:none;stroke-linejoin:round}.rating-history circle{fill:var(--fg)}.rating-empty{color:var(--muted);padding:12px 0}
@media(prefers-reduced-motion:no-preference){#app-menu[open]{animation:bansho-menu-in 220ms cubic-bezier(.16,1,.3,1)}@keyframes bansho-menu-in{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}}
@media(max-width:899px){
 .practice-home .word-selection .controls,.duel-create .word-selection .controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:8px}
 .practice-home .word-selection .controls label,.duel-create .word-selection .controls label{font-size:12px;gap:4px}
 .practice-home .word-selection .controls .include-starred{grid-column:2;grid-row:1;font-size:12px;white-space:normal;justify-content:start}
 .practice-home .word-selection .controls .include-starred input{width:20px;height:20px;min-height:20px}
 .duel-history-row{gap:10px}.duel-history-row>div:first-child{min-width:0}.duel-history-row>div:first-child>div{font-size:12px}.duel-history-result{font-size:14px}.rating-delta{font-size:11px}
}
@media(max-width:720px){
 .bansho-ui #theme{width:36px;min-width:36px!important;height:36px;padding:6px;border-radius:12px}.bansho-ui .header-actions{gap:4px}
 .bansho-ui .study-top{display:grid;font-size:18px;gap:6px}.bansho-ui .study-top>span:last-child{font-size:17px}.bansho-ui .study-top #end{font-size:18px}
 .steady-typing .study-top{font-size:16px}.steady-typing .study-top #end{font-size:16px}
 .duel-page .social-head h1,.practice-home h1{font-size:22px}.duel-create .duel-level-options button{font-size:17px}
 .duel-page .social-head{margin-bottom:14px}.duel-create[data-step=exercise]{gap:8px}
}

.tone-warning{display:flex;align-items:center;justify-content:center;gap:6px;color:#bd3434;font-size:14px;margin-top:8px}.tone-warning>span{display:inline-grid;place-items:center;background:#bd3434;color:#fff;width:18px;height:18px;border-radius:50%;font-weight:700}.tone-warning[hidden]{display:none}[data-theme=dark] .tone-warning{color:#ff8585}
/* Keep card labels inside the cards at short desktop heights. */
.bansho-ui .practice-home .practice-options button,.bansho-ui .duel-create .practice-options button{display:flex;flex-direction:column;justify-content:center;gap:5px!important;overflow:hidden}
.bansho-ui .practice-home .practice-options .mode-example,.bansho-ui .duel-create .practice-options .mode-example{min-height:30px!important;height:36px;flex:none;font-size:23px}
.bansho-ui .practice-home .practice-options .mode-hanzi,.bansho-ui .duel-create .practice-options .mode-hanzi{font-size:36px;line-height:1}
.bansho-ui .practice-home .practice-options .mode-pinyin,.bansho-ui .duel-create .practice-options .mode-pinyin{font-size:25px;line-height:1}
.bansho-ui .practice-home .practice-options .mode-label,.bansho-ui .duel-create .practice-options .mode-label{font-size:16px!important;margin:0!important;line-height:1.2}
@media(min-width:900px){.practice-home .word-selection .controls{grid-template-columns:1.3fr 1fr auto 1fr 1.2fr}.practice-home .word-selection .controls .include-starred{grid-column:auto;grid-row:auto}.practice-home .word-selection .controls label{font-size:13px}.practice-home .word-selection .controls .include-starred{white-space:normal}}

.bansho-ui .home-menu .level-card{min-height:clamp(70px,12dvh,130px)}

.leaderboard-tabs{display:flex;gap:10px;margin:0 0 24px}

.duel-review{display:none}.duel-create[data-step=friend] .duel-review{display:block;padding:20px;background:var(--soft);border-radius:16px;line-height:1.8}

.syllabus-label{font-size:14px;font-weight:600;letter-spacing:.06em;margin-top:8px;color:var(--muted)}
@media(min-width:900px){.home-brand .syllabus-label{position:fixed;left:clamp(28px,4vw,80px);top:34px;margin:0;font-size:16px}}

.attempt-friends{margin-top:24px;padding:20px;background:var(--soft);border-radius:18px}.attempt-friends h2{font-size:20px;margin:0}.comparison-match,.comparison-empty{font-size:14px;margin:12px 0;color:var(--muted)}.attempt-friends .board{margin-top:12px}.attempt-friends .board td,.attempt-friends .board th{padding:12px}
@media(max-width:720px){.attempt-friends{padding:14px}.attempt-friends h2{font-size:17px}.attempt-friends .board td,.attempt-friends .board th{padding:9px 5px;font-size:12px}}
.bansho-ui .completion h1{font-size:clamp(32px,3vw,46px);margin:0 0 22px}
.bansho-ui .completion .finish-rank strong{font-size:clamp(58px,6vw,84px)}
.bansho-ui .completion .finish-rank>span{font-size:28px}
.bansho-ui .completion .finish-board th{font-size:18px;padding:16px 12px}
.bansho-ui .completion .finish-board td{font-size:22px;padding:18px 12px;line-height:1.4}
.bansho-ui .completion .attempt-friends h2{font-size:24px}
.bansho-ui .completion .attempt-friends .board th{font-size:17px}
.bansho-ui .completion .attempt-friends .board td{font-size:20px}
.bansho-ui .completion .comparison-match{font-size:17px}
@media(max-width:720px){.bansho-ui .completion .finish-board th{font-size:12px;padding:12px 5px}.bansho-ui .completion .finish-board td{font-size:16px;padding:14px 5px}.bansho-ui .completion .attempt-friends h2{font-size:20px}.bansho-ui .completion .attempt-friends .board th{font-size:12px}.bansho-ui .completion .attempt-friends .board td{font-size:16px}.bansho-ui .completion .comparison-match{font-size:14px}}

/* Sync messages never join the header or move exercise controls. */
.bansho-ui #account-status,#duel-sync{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;max-width:min(380px,calc(100vw - 32px));padding:10px 14px;height:auto;margin:0;border:1px solid var(--line);border-radius:12px;background:var(--bg);box-shadow:0 4px 24px #0002;font-size:13px;line-height:1.5}
.bansho-ui #account-status{pointer-events:none}.bansho-ui #account-status[data-quiet=true]{display:none}

/* Selection expands below a stable exercise grid. */
#app-menu .menu-groups>section,#app-menu .menu-items,#app-menu #account-bar{min-width:0}
#app-menu .menu-items button{width:100%;min-width:0;max-width:100%;overflow-wrap:anywhere}
#app-menu #community-menu{display:block}
@media(min-width:721px) and (max-width:1100px){#app-menu{width:min(900px,calc(100vw - 48px));padding:28px}#app-menu .menu-groups{gap:20px}#app-menu .menu-items button{padding:14px;font-size:18px}}
@media(max-width:899px){
 .bansho-ui .practice-home .practice-options,.bansho-ui .duel-create .practice-options{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 .bansho-ui .practice-home .practice-options button,.bansho-ui .duel-create .practice-options button{height:76px!important;min-height:76px!important;padding:6px!important}
 .bansho-ui .practice-home .practice-options .mode-label,.bansho-ui .duel-create .practice-options .mode-label{font-size:13px!important}
 .bansho-ui .practice-home .practice-options .mode-example,.bansho-ui .duel-create .practice-options .mode-example{height:27px!important;min-height:27px!important}
 .practice-home .mode-recommendation{display:none!important}
 .practice-home .mode-tones,.duel-create .mode-tones{font-size:22px!important;letter-spacing:0!important}
 .practice-home .mode-icon,.duel-create .mode-icon{width:27px!important;height:27px!important}
}
@media(max-width:899px) and (max-height:740px){
 .bansho-ui .practice-home .practice-options button,.bansho-ui .duel-create .practice-options button{height:46px!important;min-height:46px!important}
 .bansho-ui .practice-home .practice-options .mode-example,.bansho-ui .duel-create .practice-options .mode-example{display:none!important}
 .bansho-ui .practice-home .practice-options .mode-label,.bansho-ui .duel-create .practice-options .mode-label{font-size:14px!important}
}
.duel-create .duel-friend-field{max-width:none;min-width:0}
.duel-friend-list{display:grid;gap:12px;max-height:42dvh;overflow:auto;scrollbar-width:none}
.duel-friend-option{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px!important;padding:18px;border:1px solid var(--line);border-radius:16px;cursor:pointer}
.duel-friend-option:has(input:checked){border-color:var(--fg);background:var(--soft)}
.duel-friend-option input{width:20px;height:20px;accent-color:var(--fg)}
.duel-friend-option strong{font-size:20px}.duel-friend-option .friend-record{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:15px}
.friend-rating{font-size:22px;font-weight:650;text-align:right}.friend-rating small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:4px}
.friend-record .win{color:#187449}.friend-record .loss{color:#bd3434}
[data-theme=dark] .friend-record .win{color:#65d89b}[data-theme=dark] .friend-record .loss{color:#ff8585}
@media(max-width:720px){.duel-friend-option{padding:14px;gap:10px!important}.duel-friend-option strong{font-size:17px}.duel-friend-option .friend-record{font-size:13px;gap:8px}.friend-rating{font-size:20px}}

@media(max-width:899px) and (max-height:740px){.practice-home .word-selection,.duel-create .word-selection{padding:8px 12px}.practice-home .start-row{margin-top:8px}.duel-create .duel-rules{font-size:13px}}

.duel-score.is-lobby .duel-metrics{display:none}.duel-score.is-lobby .duel-player{padding:20px}.duel-score.is-lobby{margin-bottom:16px}
.duel-create-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}.duel-public{margin-top:28px}.duel-public>.row{align-items:baseline}.duel-public>.row>span{color:var(--muted);font-size:14px}.duel-open-card{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(220px,1.5fr) auto;align-items:center;gap:18px;padding:18px 20px;margin:10px 0;border:1px solid var(--line);border-radius:16px}.duel-open-person,.duel-open-details{display:flex;flex-direction:column;gap:5px;min-width:0}.duel-open-person>span,.duel-open-details>span,.duel-public-empty{color:var(--muted);font-size:13px}.player-title{display:block;color:var(--muted);font-size:12px;font-weight:500;line-height:1.4}.duel-social{margin-top:24px;text-align:left}.duel-social-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:20px}.duel-friend-state{padding:9px 13px;border-radius:999px;background:var(--soft);font-size:13px}.duel-chat{border-top:1px solid var(--line);padding-top:18px}.duel-chat h3{margin:0 0 12px}.duel-messages{display:flex;flex-direction:column;gap:10px;max-height:320px;overflow:auto;padding:2px}.duel-message{align-self:flex-start;max-width:85%;padding:10px 13px;border-radius:14px;background:var(--soft)}.duel-message.is-you{align-self:flex-end;background:var(--fg);color:var(--bg)}.duel-message strong,.duel-message time{display:block;font-size:11px}.duel-message p{margin:4px 0;white-space:pre-wrap;overflow-wrap:anywhere}.duel-message time{opacity:.7}.duel-chat-empty{color:var(--muted)}#duel-message-form{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px;margin-top:14px}#duel-message{min-height:54px;max-height:130px;resize:vertical}
@media(max-width:720px){.duel-open-card{grid-template-columns:1fr auto;gap:12px;padding:14px}.duel-open-details{grid-column:1/-1;grid-row:2}.duel-open-card>button{grid-column:2;grid-row:1}.duel-message{max-width:92%}#duel-message-form{grid-template-columns:1fr}#duel-message-form button{justify-self:end}}

#app-menu{max-width:none}@media(min-width:721px){#app-menu{width:min(960px,calc(100vw - 64px))}}

/* Larger mobile labels and characters; geometry depends on viewport, never on the disclosure. */
@media(max-width:899px){
 .bansho-ui .practice-home .practice-options button,.bansho-ui .duel-create .practice-options button{height:86px!important;min-height:86px!important}
 .bansho-ui .practice-home .practice-options .mode-label,.bansho-ui .duel-create .practice-options .mode-label{font-size:16px!important;letter-spacing:0}
}
@media(max-width:899px) and (max-height:740px){
 .bansho-ui .practice-home .practice-options,.bansho-ui .duel-create .practice-options{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .bansho-ui .practice-home .practice-options button,.bansho-ui .duel-create .practice-options button{height:62px!important;min-height:62px!important;padding:5px!important}
}
@media(max-width:720px),(pointer:coarse){
 .bansho-ui .study .hanzi{font-size:clamp(72px,12dvh,94px);line-height:1.15}
 .bansho-ui .study .hanzi.long{font-size:52px}
 .bansho-ui.steady-typing #app,.bansho-ui.keyboard-open #app{position:fixed;top:var(--visual-top,0px);left:0;right:0;height:var(--visual-height,100dvh);min-height:0;max-height:var(--visual-height,100dvh);overflow:hidden;width:100%;display:flex;flex-direction:column}
 .bansho-ui.steady-typing #main,.bansho-ui.keyboard-open #main{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-top:6px;padding-bottom:6px;scroll-padding-bottom:14px}
 .bansho-ui.steady-typing #typing-panel{flex:0 0 auto;max-height:52%;overflow:auto;padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .bansho-ui.steady-typing .study .question{height:94px;min-height:94px;padding:4px 40px}
 .bansho-ui.steady-typing .study .hanzi{font-size:70px}
 .bansho-ui.steady-typing .study .hanzi.long{font-size:44px}
 .bansho-ui.steady-typing .study .feedback{margin-top:4px;padding:10px;font-size:18px}
 .bansho-ui.steady-typing .study .feedback .answer,.bansho-ui.steady-typing .study .feedback .answer-hanzi{font-size:30px}
 .bansho-ui.steady-typing .study .feedback .muted{font-size:20px}
 .bansho-ui.steady-typing #typing-panel input{font-size:23px}
 .bansho-ui.steady-typing #typing-panel #character-answer{font-size:34px}
}

/* Constrain the page itself; internal vertical lists remain scrollable. */
html.bansho-ui,.bansho-ui body{width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
.bansho-ui #app,.bansho-ui #main,.bansho-ui header,.bansho-ui main>section{min-width:0;max-width:100%}
@media(max-width:720px){
 .bansho-ui header{grid-template-columns:44px minmax(0,1fr) auto}
 .bansho-ui .header-actions,.bansho-ui header .exam-date{min-width:0}
 .bansho-ui .social-head{flex-wrap:wrap}
 .bansho-ui .board,.bansho-ui .finish-board{width:100%;table-layout:fixed}
 .bansho-ui .board th,.bansho-ui .board td,.bansho-ui .finish-board th,.bansho-ui .finish-board td{white-space:normal;overflow-wrap:anywhere}
 .bansho-ui .duel-summary{flex-wrap:wrap;min-width:0}
 .bansho-ui .duel-player-head>strong{min-width:0;overflow-wrap:anywhere}
 .bansho-ui .syllable{min-width:0}
}

.selection-excluded{font-size:12px!important;font-weight:400;color:var(--muted);margin-left:auto}.selection-excluded:empty{display:none}

@media(max-width:720px),(pointer:coarse){
 .steady-typing #typing-panel .syllables:not(:has(.syllable:nth-child(2):not([hidden]))){height:54px}
 .compact-typing.steady-typing header{height:58px;min-height:58px;padding:6px 0}
 .compact-typing.steady-typing header .exam-date #countdown{font-size:11px}
 .compact-typing.steady-typing header .exam-date time{font-size:10px}
 .compact-typing.steady-typing .study-top{display:none}
 .compact-typing.steady-typing .study .feedback .muted{grid-column:2;align-self:center}
 .compact-typing.steady-typing .study .feedback .correction{grid-column:1!important}
 .compact-typing.steady-typing .study .feedback .word-example{grid-column:1/-1;margin:4px 0 0}
 .compact-typing.steady-typing .study .feedback .answer-hanzi:not(:empty){grid-column:1/-1}
}

/* Keep presence outside the changing page and within the open navigation dialog. */
.bansho-ui header,#app-menu .menu-heading{position:relative}
.online-now[data-location=header]{position:absolute;bottom:2px;left:0;margin:0;font-size:11px;line-height:1.2;text-align:left}
.online-now[data-location=menu]{position:absolute;top:100%;left:0;margin:2px 0 0;font-size:11px;line-height:1.2;text-align:left}
.online-now[data-stale=true]::before{background:var(--muted)}
@media(max-width:720px){
 .online-now[data-location=header]{font-size:0;bottom:1px;line-height:11px}
 .online-now[data-location=header]::before{width:5px;height:5px;margin-right:3px}
 .online-now[data-location=header]::after{content:attr(data-count) ' online';font-size:10px}
}

/* Clear keyboard cues and readable vocabulary/example text. */
.home-menu .enter-key{font-size:22px;line-height:1.2;white-space:nowrap;flex-shrink:0}
.home-menu .level-card:not(.primary) .enter-key{font-size:30px}
.study .example-card{padding:24px;text-align:center;font-size:22px;line-height:1.6}
.study .example-card:not([hidden]){display:grid;align-content:center;justify-items:center;gap:12px;min-height:180px}
.study .example-zh{font-size:36px;line-height:1.65}
.study .example-pinyin{margin:0;font-size:24px;line-height:1.6}
.study .example-card>div{max-width:100%;min-width:0}
.word-list .word-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr) 44px 44px;padding:22px 0}
.word-list .word-row>.zh{font-size:34px;line-height:1.5}
.word-list .word-row>.pinyin{font-size:24px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.word-list .word-row>.gloss{font-size:22px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.word-list .word-number{font-size:14px}
.word-list .word-example button{font-size:18px;padding:10px 16px}
.vocab-tools input,.vocab-tools select{font-size:18px}
@media(max-width:720px){
 .study .example-card{padding:20px 16px;font-size:20px;min-height:160px}
 .study .example-zh{font-size:30px}.study .example-pinyin{font-size:21px}
 .word-list .word-row{grid-template-columns:minmax(0,1fr) 44px 44px;gap:8px 12px}
 .word-list .word-row>.zh{grid-column:1;grid-row:1;font-size:32px;overflow-wrap:anywhere}
 .word-list .word-row>.pinyin{grid-column:1;grid-row:2;font-size:22px}
 .word-list .word-row>.gloss{grid-column:1;grid-row:3;font-size:20px}
 .word-list .word-row>.word-star{grid-column:2;grid-row:1/4}
 .word-list .word-row>[data-speak]{grid-column:3;grid-row:1/4}
 .word-list .word-example{grid-row:4}
}
/* Give the phone's date and countdown a row of their own. */
@media(max-width:720px){
 .bansho-ui header{height:auto;min-height:124px;grid-template-columns:44px minmax(0,1fr);grid-template-rows:44px auto;gap:18px 12px;padding:10px 0 12px}
 .bansho-ui header .brand{grid-column:1;grid-row:1}
 .bansho-ui header .header-actions{grid-column:2;grid-row:1;gap:8px}
 .bansho-ui #menu-toggle{max-width:180px}
 .bansho-ui header .exam-date[data-visible=true]{grid-column:1/-1;grid-row:2;gap:4px;text-align:center;align-items:center}
 .bansho-ui header .exam-date[data-visible=true] time{font-size:13px}
 .bansho-ui header .exam-date[data-visible=true] #countdown{font-size:19px;white-space:normal}
 .online-now[data-location=header]{top:56px;bottom:auto}
 .compact-typing.steady-typing header{height:auto;min-height:98px;grid-template-rows:38px auto;gap:13px 10px;padding:6px 0}
 .compact-typing.steady-typing header .brand{height:36px;width:36px}
 .compact-typing.steady-typing header .exam-date[data-visible=true]{flex-direction:row;flex-wrap:wrap;gap:2px 10px}
 .compact-typing.steady-typing header .exam-date[data-visible=true] time{font-size:11px}
 .compact-typing.steady-typing header .exam-date[data-visible=true] #countdown{font-size:14px}
 .compact-typing.steady-typing .online-now[data-location=header]{top:46px}
 .bansho-ui[data-auth=guest] header{min-height:64px;grid-template-rows:44px;gap:0;padding:10px 0}
}
@media(max-width:720px) and (max-height:740px){
 .practice-home .word-selection .controls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:8px 0 0;align-items:end}
 .practice-home .word-selection .controls>label{min-width:0;margin:0}
 .practice-home .word-selection .controls>label:first-child{grid-column:1/4;grid-row:1}
 .practice-home .word-selection .controls .include-starred{grid-column:4/7;grid-row:1;align-self:center}
 .practice-home .word-selection label:has(#length){grid-column:1/3;grid-row:2}
 .practice-home .word-selection label:has(#start-at){grid-column:3/5;grid-row:2}
 .practice-home .word-selection #order{grid-column:5/7;grid-row:2;min-width:0;padding:8px 5px;gap:5px;font-size:12px}
 .practice-home .word-selection #order svg{width:20px;flex-shrink:0}
 .practice-home .word-selection .controls input:not([type=checkbox]),.practice-home .word-selection .controls select{min-height:40px;padding:8px;min-width:0}
 .practice-home .word-selection .start-word input{width:50px}
 .practice-home .word-selection #starred-question-count:empty{display:none}
}
@media(max-width:720px){
 .bansho-ui .home-menu{padding-bottom:0}
 .bansho-ui .home-menu .home-brand{margin-bottom:12px}
 .bansho-ui .home-menu .home-logo{width:210px;max-height:clamp(100px,16dvh,150px);object-fit:contain}
 .bansho-ui .home-menu .level-card{min-height:clamp(64px,9dvh,82px);padding:14px 20px}
}

/* Keep the first paint neutral until the server has checked the session. */
html[data-auth=loading] header{visibility:hidden}
html[data-auth=loading] .tab-strip{display:none}
html[data-theme=dark] .boot-screen img{filter:invert(1)}
html.bansho-ui[data-typeface=ready]{--bansho-typeface:Bansho Sans}

.duel-open-words summary{cursor:pointer;font-size:13px;padding:5px 0}.duel-open-words>div{display:flex;flex-wrap:wrap;gap:6px;max-height:150px;overflow:auto;margin-top:6px}.duel-open-words>div>span{padding:4px 8px;background:var(--soft);border-radius:8px;font-size:15px}

#duel-message{box-sizing:border-box;width:100%;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--fg);font:inherit;line-height:1.5}#duel-message:focus-visible{outline:2px solid var(--fg);outline-offset:2px}

/* Monochrome embers drift upwards behind the home and selection menus. */
.menu-dust{position:fixed;inset:0;overflow:hidden;pointer-events:none;user-select:none;color:var(--fg);z-index:0;display:none}
body>.menu-dust{color:#000}
[data-theme=dark] body>.menu-dust{color:#fff}
[data-auth=signed-in][data-screen=home] body>.menu-dust,
[data-auth=signed-in] body:has(.practice-home)>.menu-dust{display:block}
.bansho-ui #app{position:relative;z-index:1}
#app-menu>.menu-dust{position:absolute;color:var(--fg)}
#app-menu[open]>.menu-dust{display:block}
#app-menu>.menu-heading,#app-menu>.menu-groups,#app-menu>.online-now{position:relative;z-index:1}
.menu-dust>i{position:absolute;left:var(--dust-x);top:100%;width:var(--dust-size);height:var(--dust-size);border-radius:50%;background:currentColor;box-shadow:0 0 5px currentColor;opacity:0;animation:menu-dust-rise var(--dust-time) var(--dust-delay) linear infinite}
@keyframes menu-dust-rise{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{transform:translate3d(calc(var(--dust-drift)*-.2),-10dvh,0);opacity:var(--dust-opacity)}
  35%{transform:translate3d(calc(var(--dust-drift)*.45),-30dvh,0);opacity:calc(var(--dust-opacity)*.65)}
  58%{transform:translate3d(calc(var(--dust-drift)*.1),-55dvh,0);opacity:var(--dust-opacity)}
  80%{transform:translate3d(calc(var(--dust-drift)*.8),-80dvh,0);opacity:calc(var(--dust-opacity)*.75)}
  100%{transform:translate3d(var(--dust-drift),-105dvh,0);opacity:0}
}
@media(max-width:720px){.menu-dust>i:nth-child(n+29){display:none}}
@media(prefers-reduced-motion:reduce){.menu-dust{display:none!important}.menu-dust>i{animation:none}}


/* Arena: silver, ink, steel and a little atmosphere. */
html[data-screen="duels"] body>.menu-dust,html[data-screen="achievements"] body>.menu-dust{display:block}
html:has(.duel-page[data-status="racing"]) body>.menu-dust{display:none}
.duel-page{max-width:1120px;margin:auto;position:relative}.duel-page>h1,.duel-page .social-head h1{letter-spacing:-.04em;font-weight:650}
.duel-rating{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:26px;padding:30px 32px!important;background:radial-gradient(ellipse at 90% 10%,#96969620,transparent 60%),var(--soft);box-shadow:inset 0 1px 0 #ffffff12,0 15px 45px #00000008}
.duel-rating:after{content:'⚔';font-size:130px;position:absolute;right:22%;top:-40px;opacity:.045;pointer-events:none}.duel-rating>strong{font-size:64px;letter-spacing:-.07em;font-weight:550}.duel-rating>span:first-child{text-transform:uppercase;letter-spacing:.16em;font-size:11px}.duel-rating #duel-history{margin-left:auto}
.duel-create-actions{margin-top:22px}.duel-create-actions button{min-height:48px;padding:12px 24px;border-radius:14px}.duel-public{margin-top:38px}.duel-public>.row{border-bottom:1px solid var(--line);padding-bottom:14px}.duel-public h2{font-size:18px;letter-spacing:-.02em}
.duel-open-card{grid-template-columns:minmax(120px,.8fr) minmax(150px,1.4fr) minmax(130px,auto);padding:26px;gap:26px;border-radius:22px;background:linear-gradient(135deg,#88888809,transparent);box-shadow:0 12px 40px #00000005;transition:border-color .2s,transform .2s}
.duel-open-card:hover{border-color:var(--muted)}.duel-open-card.is-yours{border-style:dashed}.arena-avatar{display:grid;place-items:center;width:42px;height:42px;margin-bottom:8px;border:1px solid var(--line);border-radius:14px;color:var(--fg)!important;background:var(--soft);font-size:20px!important}
.duel-open-person strong{font-size:16px}.duel-open-actions{display:flex;flex-direction:column;gap:9px;min-width:180px}.duel-open-actions label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}.duel-open-actions select{min-height:40px;width:100%;font:inherit;font-size:14px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px}.duel-open-actions button{min-height:44px;border-radius:12px}.bot-unrated{font-size:11px;color:var(--muted);text-align:center}.duel-waiting{display:flex;align-items:center;gap:7px;margin-bottom:7px}.duel-waiting i{width:6px;height:6px;background:var(--fg);border-radius:50%;box-shadow:0 0 10px #aaaaaa;animation:arena-breathe 2.5s ease-in-out infinite}.duel-public-empty{padding:32px;text-align:center}.arena-empty-mark{font-size:44px;opacity:.2}.duel-public-empty p{margin:12px 0}
.duel-score{position:relative;gap:36px}.duel-score:after{content:'VS';position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:11px;letter-spacing:.1em;font-weight:700;border:1px solid var(--line);border-radius:50%;width:40px;height:40px;display:grid;place-items:center;background:var(--bg);z-index:1}
.duel-score .duel-player{border:1px solid var(--line);border-radius:24px;padding:24px;background:radial-gradient(ellipse at 20% 0%,#99999913,transparent 80%),var(--soft);box-shadow:inset 0 1px 0 #ffffff12}.duel-score .duel-player.is-you{border-color:var(--muted)}.duel-player .duel-progress>strong{font-size:44px;font-weight:500;letter-spacing:-.05em}.duel-player progress{height:6px!important;box-shadow:none}.duel-player .duel-player-head>strong{font-size:18px}.duel-status{font-size:10px;text-transform:uppercase;letter-spacing:.09em}.duel-summary{gap:8px;margin-bottom:22px}.duel-summary>span{font-size:11px;letter-spacing:.03em}
#duel-stage{border:1px solid var(--line);border-radius:26px;background:radial-gradient(ellipse at 50% 0%,#8888880d,transparent 75%);padding:30px}.duel-page[data-status="waiting"] #duel-stage{padding:44px 24px}.duel-page[data-status="waiting"] #duel-stage h2{font-weight:500;letter-spacing:-.04em;font-size:30px}#duel-ready{min-width:180px;min-height:52px;border-radius:14px}
#duel-countdown{font-size:82px;line-height:1.4;font-weight:450;letter-spacing:-.05em;width:150px;height:150px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);box-shadow:0 0 0 14px #88888807,0 0 0 28px #88888804;margin:30px auto;animation:arena-breathe 1s infinite}
.duel-result-seal{width:64px;height:64px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;font-size:34px;box-shadow:0 0 0 8px #88888808}.duel-outcome{font-size:38px;letter-spacing:-.04em;font-weight:550}.bot-result{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:22px}.bot-result>span{font-size:12px;color:var(--muted)}
@keyframes arena-breathe{50%{opacity:.5;box-shadow:0 0 0 8px #8888880a}}
@media(max-width:720px){.duel-rating{padding:20px!important;gap:10px}.duel-rating>strong{font-size:46px}.duel-rating #duel-history{margin-left:0}.duel-open-card{grid-template-columns:1fr;gap:18px;padding:20px}.duel-open-person{display:grid;grid-template-columns:44px 1fr;column-gap:12px}.arena-avatar{grid-row:1/4}.duel-open-details{grid-column:auto;grid-row:auto}.duel-open-actions{min-width:0;display:grid;grid-template-columns:1fr 1fr;align-items:end}.duel-open-actions .bot-unrated{grid-column:1/-1}.duel-open-actions [data-open-cancel]{grid-column:1/-1}.duel-score{gap:14px}.duel-score:after{width:28px;height:28px;font-size:8px}.duel-score .duel-player{padding:15px;border-radius:20px}.duel-player .duel-player-head>strong{font-size:15px}.duel-player .duel-progress>strong{font-size:32px}#duel-stage{padding:22px 16px}.duel-metrics dd{font-size:17px}.duel-outcome{font-size:30px}}
@media(prefers-reduced-motion:reduce){.duel-waiting i,#duel-countdown{animation:none}.duel-open-card{transition:none}}
/* Large, deliberate selectors with the same geometry as exercise cards. */
.bansho-ui .practice-home,.bansho-ui .duel-page{width:100%;max-width:1240px;margin-inline:auto}
.bansho-ui .practice-home[data-setup=exercise] #word-selection,.bansho-ui .practice-home[data-setup=exercise] #practice-exercises{display:none!important}
.bansho-ui .practice-home[data-setup=words]>.practice-options{display:none!important}
.bansho-ui .practice-home[data-setup=words] #word-selection{display:block!important}
.bansho-ui .practice-home[data-setup=words] #practice-exercises{display:inline-flex!important;margin:12px 0}
.bansho-ui .setup-words{border:0!important;padding:0!important;width:100%;margin:18px 0}
.bansho-ui .setup-words summary{display:none!important}.bansho-ui .setup-words details{border:0;padding:0;margin:0}
.setup-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 32px}.setup-steps button{text-align:left;padding:14px 16px;font-size:12px;background:transparent;color:var(--muted)}.setup-steps button>span{display:block;font-size:10px;letter-spacing:.2em;margin-bottom:8px}.setup-steps button[aria-current=step]{color:var(--fg);border-color:var(--accent,var(--fg));background:var(--soft)}
.setup-heading h2{font-size:clamp(26px,3vw,40px);font-weight:450;letter-spacing:-.035em;margin:0 0 24px}
.bansho-ui .setup-words .controls{display:grid!important;grid-template-columns:1fr;gap:18px;width:100%;margin:0;max-width:none}
.bansho-ui .setup-words .controls>[hidden]{display:none!important}.bansho-ui .setup-words .controls>label{font-size:15px;gap:14px;padding:26px 30px;border:1px solid var(--line);border-radius:24px;background:var(--soft);display:flex;flex-direction:column;align-items:stretch;min-height:160px;box-sizing:border-box}
.bansho-ui .setup-words .controls input[type=number],.bansho-ui .setup-words .controls select{font-size:clamp(28px,4vw,52px);min-height:84px;padding:12px 20px;border-radius:16px;max-width:100%;width:100%;background:var(--bg);color:var(--fg)}
.bansho-ui .setup-words .controls .start-word{display:flex;align-items:center;gap:24px}.bansho-ui .setup-words .start-word input{flex:1;min-width:0}.bansho-ui .setup-words .start-word span{font-size:40px}
.bansho-ui .setup-words .controls>button{height:auto;min-height:160px;font-size:30px;border-radius:24px;padding:26px;justify-content:center;gap:18px}
.bansho-ui .setup-words[data-field="4"] .controls{grid-template-columns:1fr 1fr}.bansho-ui .setup-words[data-field="4"] .controls>label,.bansho-ui .setup-words[data-field="4"] .controls>button{min-height:90px;padding:18px;font-size:16px}.bansho-ui .setup-words[data-field="4"] .controls input[type=number],.bansho-ui .setup-words[data-field="4"] .controls select{min-height:50px;font-size:24px;padding:8px}
.bansho-ui .setup-words .controls>.include-starred{flex-direction:row;align-items:center;min-height:65px;grid-column:1/-1}.setup-key{display:flex;gap:9px;align-items:center;font-size:11px;color:var(--muted);margin-top:20px}.setup-key>span{margin-left:15px}.setup-key kbd{border:1px solid var(--line);border-radius:5px;padding:3px 7px}
.bansho-ui .duel-create[data-step=exercise] #duel-selection,.bansho-ui .duel-create[data-step=exercise] .duel-rated-choice,.bansho-ui .duel-create[data-step=exercise] .duel-rules{display:none!important}
.bansho-ui .duel-create[data-step=words] .duel-levels,.bansho-ui .duel-create[data-step=words] .duel-tasks,.bansho-ui .duel-create[data-step=words] .duel-friend-field,.bansho-ui .duel-create[data-step=words] #duel-continue,.bansho-ui .duel-create[data-step=words] .duel-challenge{display:none!important}
.bansho-ui .duel-create[data-step=words]{display:block}.bansho-ui .duel-create[data-step=words] #duel-selection{display:block;grid-column:1/-1}.bansho-ui .duel-create[data-step=words] .duel-setup-navigation{display:flex;justify-content:space-between;margin-top:24px}.duel-rated-choice{padding:18px;border-radius:14px;background:var(--soft)}
.the-one-warning{display:grid;grid-template-columns:58px 1fr;gap:8px 16px;border:1px solid #b697df66;border-radius:18px;padding:18px;background:linear-gradient(125deg,#6c3d8225,transparent);text-align:left}.the-one-warning[hidden]{display:none}.the-one-warning img{grid-row:1/4;align-self:center;max-width:100%;border-radius:12px}.the-one-warning>span{grid-column:2;font-size:12px;line-height:1.5;color:var(--muted)}
#duel-finish-deadline{padding:12px 18px;border:1px solid #df905a66;border-radius:14px;background:#e08a3e14;color:var(--fg);font-variant-numeric:tabular-nums;margin:14px 0}
.bansho-ui .settings{max-width:1120px;width:100%;margin:auto}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:30px}.settings-panel{padding:28px;border:1px solid var(--line);border-radius:26px;background:var(--soft);box-shadow:0 12px 40px #00000009}.settings-panel h2{font-size:22px;margin:0 0 25px}.settings-panel .field{margin:20px 0}.settings-panel input[type=range]{width:100%;accent-color:var(--accent,var(--fg))}.settings-panel input[type=date]{width:100%;font-size:20px;padding:16px;box-sizing:border-box}
#app-menu{width:min(1100px,calc(100vw - 64px));max-height:85dvh;border-radius:30px;padding:32px;background:var(--bg);box-shadow:0 40px 140px #0009}#app-menu .menu-groups{gap:26px}#app-menu .menu-groups>section{padding:20px;border-radius:22px;background:var(--soft);border:1px solid var(--line)}#app-menu .menu-items button{min-height:55px;text-align:left;border-radius:14px;padding:14px 17px;font-size:16px}#app-menu .menu-items button[aria-current=page]{box-shadow:inset 3px 0 var(--accent,var(--fg))}#app-menu h3{font-size:12px;letter-spacing:.12em;margin:0 0 20px;color:var(--muted)}
@media(max-width:720px){.setup-steps{gap:4px;margin-bottom:20px}.setup-steps button{font-size:9px;padding:10px 7px}.setup-steps button>span{font-size:9px}.bansho-ui .setup-words .controls>label{padding:20px;min-height:145px}.bansho-ui .setup-words[data-field="4"] .controls{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.settings-panel{padding:22px}#app-menu{width:calc(100vw - 24px);padding:20px;max-height:90dvh}#app-menu .menu-groups{grid-template-columns:1fr;gap:14px}#app-menu .menu-groups>section{padding:16px}#app-menu .menu-items,#app-menu #account-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px}#app-menu .menu-items button{min-height:48px;font-size:13px;padding:12px}.the-one-warning{grid-template-columns:42px 1fr}}
@media(min-width:721px) and (max-height:850px){.setup-steps{margin-bottom:16px}.setup-heading h2{font-size:30px;margin-bottom:14px}.bansho-ui .setup-words{margin:12px 0}.bansho-ui .setup-words .controls>label{min-height:116px;padding:16px 22px;gap:8px}.bansho-ui .setup-words .controls input[type=number],.bansho-ui .setup-words .controls select{min-height:60px;font-size:36px;padding:8px 16px}.bansho-ui .setup-words .controls>button{min-height:116px}.setup-key{margin-top:10px}}
.bansho-ui .practice-home[data-setup=words] .start-row{position:sticky;bottom:8px;z-index:5;border-radius:14px;background:var(--bg);padding:6px 0}
.duel-page:has(#duel-create:not([hidden])) .duel-profile,.duel-page:has(#duel-create:not([hidden])) .duel-rating,.duel-page:has(#duel-create:not([hidden])) #duel-public{display:none}
@media(max-width:720px){.setup-key{display:none}.profile-medal .medal-tooltip{position:fixed;inset:auto 16px 20px;width:auto;max-width:none;z-index:100}}
/* Selection fields keep their tracks and DOM nodes when starred options change. */
.practice-home .practice-selection .controls{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.85fr) minmax(0,1.15fr);gap:16px;align-items:end;padding-top:18px}
.practice-home .practice-selection .controls>label,.practice-home .practice-selection .controls>#order{grid-column:auto;grid-row:auto;order:0;margin:0;min-width:0}
.practice-home .practice-selection .controls>label{font-size:14px;line-height:1.4;gap:8px}
.practice-home .practice-selection .controls input:not([type=checkbox]),.practice-home .practice-selection .controls select,.practice-home .practice-selection .controls>#order{min-height:46px;height:46px;min-width:0;font-size:16px;padding:10px 12px}
.practice-home .practice-selection .start-word{display:flex;align-items:center;gap:10px;min-width:0}
.practice-home .practice-selection .start-word input{width:80px;flex:0 1 80px}
.practice-home .practice-selection #start-word-preview{font-size:24px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.practice-home .practice-selection #order{gap:8px;justify-content:center;white-space:normal}
.practice-home .practice-selection #order svg{width:22px;flex-shrink:0}
.practice-selection .selection-options{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;min-height:44px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.practice-selection .selection-options .include-starred{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.4;min-height:28px;margin:0}
.practice-selection .include-starred input{width:20px;height:20px;min-height:20px;flex:none;accent-color:var(--fg)}
.practice-selection #starred-question-count{display:block;min-height:20px;line-height:20px;font-size:14px;white-space:normal}
.practice-selection summary{line-height:1.5}
.practice-selection .selection-excluded{display:inline-block;float:right;margin:2px 0 0 12px;font-size:13px!important;line-height:1.5}
.quit-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.quit-actions button{flex:1;min-height:48px;white-space:nowrap}
@media(max-width:720px){
 .practice-home .practice-selection .controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
 .practice-home .practice-selection .controls>label,.practice-home .practice-selection .controls>#order{grid-column:auto;grid-row:auto}
 .practice-home .practice-selection .controls>label{font-size:13px}
 .practice-selection .selection-options{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
 .practice-home .practice-selection #starred-question-count:empty{display:block}
 .practice-selection .selection-excluded{float:right;display:inline-block;margin:2px 0 0 8px;font-size:12px!important}
 .practice-selection .selection-excluded:empty{display:none}
}

.character-keyboard-warning{line-height:1.45;text-align:left;max-width:100%;overflow-wrap:anywhere}.character-keyboard-warning>span{flex:none}
#modal:has(.quit-actions)>#close-modal{display:none}

/* Subscription gates remain clickable so learners can inspect the plans. */
.bot-practice form{display:grid;gap:16px;min-width:min(320px,70vw)}
.bot-practice label{display:grid;gap:7px}.bot-practice select{width:100%;min-height:44px}
.subscription-locked{position:relative}.subscription-locked::after{content:'🔒';font-size:16px;margin-left:8px}
.story-node.subscription-locked::after{position:absolute;right:0;top:0;margin:0}
.story-node.subscription-locked .stage-lock{color:#f5d990;background:#392e24;border-radius:12px;padding:4px 9px}

/* Native image/link dragging must not expose complete sprite atlases. */
.bansho-ui img,.bansho-ui svg,.bansho-ui canvas,.bansho-ui video,.bansho-ui a{-webkit-user-drag:none}
.bansho-ui img,.bansho-ui svg,.bansho-ui canvas{user-select:none;-webkit-user-select:none}

.membership-rule>span{grid-area:1/1}.membership-rule-space{visibility:hidden;pointer-events:none}

.player-avatar-link,.player-name-link{padding:0!important;border:0!important;background:none!important;color:inherit;min-height:0;text-align:left}.player-name-link:hover{text-decoration:underline}.player-avatar-link{display:inline-flex;flex:none}.player-inspection{max-width:560px}.player-inspection-identity{display:flex;align-items:center;gap:18px;margin:24px 0}.player-inspection-identity .profile-icon{width:80px;height:80px}.player-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0 0}.player-stats>div{padding:14px;background:var(--soft);border-radius:14px}.player-stats dt{font-size:12px;color:var(--muted)}.player-stats dd{margin:5px 0 0;font-size:24px;font-weight:700}.country-flag[role=button]{cursor:pointer}.country-tooltip{position:fixed;z-index:99999;transform:translateX(-50%);max-width:180px;padding:8px 12px;border-radius:10px;background:var(--fg);color:var(--bg);font-size:12px;box-shadow:0 3px 15px #0003;pointer-events:none}dialog .country-tooltip{position:absolute}

.player-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}.player-stats>div{padding:10px}.player-stats dd{font-size:21px}.player-inspection-identity{margin:16px 0}.player-inspection .medal-showcase{min-height:0;margin:12px 0}.player-inspection .medal-emblem{max-width:90px}@media(max-width:560px){.player-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Compact navigation, grouped by what the learner wants to do. */
#app-menu.simple-menu{width:min(800px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:24px;border-radius:26px;overflow:auto}
#app-menu.simple-menu .menu-heading{margin:0 0 34px;align-items:center}
#app-menu.simple-menu .menu-heading h2{font-size:28px;line-height:1.2;margin:0}
#app-menu.simple-menu #menu-close{width:42px;height:42px;min-height:42px;padding:8px}
#app-menu.simple-menu .menu-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
#app-menu.simple-menu .menu-groups>section{padding:0;border:0;background:none;box-shadow:none}
#app-menu.simple-menu h3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px;padding:0 10px;color:var(--muted)}
#app-menu.simple-menu .menu-items,#app-menu.simple-menu #account-bar{display:flex;flex-direction:column;gap:3px;margin:0;padding:0}
#app-menu.simple-menu .menu-items button{min-height:42px;width:100%;padding:10px 12px;border:1px solid transparent;border-radius:12px;font-size:14px;text-align:left;line-height:1.35;margin:0;background:transparent;letter-spacing:normal}
#app-menu.simple-menu .menu-items button:hover,#app-menu.simple-menu .menu-items button:focus-visible{background:var(--soft);border-color:var(--line)}
#app-menu.simple-menu .menu-items button[aria-current=page]{background:var(--soft);color:var(--accent)}
#app-menu.simple-menu #menu-membership{display:flex;align-items:center;gap:14px;width:100%;min-height:74px;margin:22px 0 16px;padding:12px 20px;border:1px solid #d8b867;border-radius:18px;background:linear-gradient(115deg,#243e33,#14241e 65%,#483d22);color:#f9e7aa;box-shadow:inset 0 1px #fff2,0 7px 24px #0002;text-align:left}
#app-menu.simple-menu #menu-membership img{object-fit:contain;filter:drop-shadow(0 0 9px #eccb5877);flex-shrink:0}
#app-menu.simple-menu #menu-membership strong{font-size:20px;font-weight:650;letter-spacing:0;line-height:1.2}
#app-menu.simple-menu #menu-membership>span{margin-left:auto;font-size:26px}
#app-menu.simple-menu #menu-membership:hover{border-color:#ffe497;box-shadow:inset 0 1px #fff3,0 7px 24px #d8b86722}
#app-menu.simple-menu .menu-account{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;border-top:1px solid var(--line);padding-top:12px}
#app-menu.simple-menu .menu-account button{width:auto;flex:1;text-align:center;white-space:nowrap;font-size:13px}
.friend-duel-allowance{font-size:14px;color:var(--muted);text-align:center;margin:8px 0 18px}
@media(max-width:600px){#app-menu.simple-menu{padding:18px}#app-menu.simple-menu .menu-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}#app-menu.simple-menu .menu-groups>section:last-child{grid-column:1/-1}#app-menu.simple-menu #rewards-menu{display:grid;grid-template-columns:1fr 1fr}#app-menu.simple-menu #menu-membership{margin-top:16px;padding:10px 14px}#app-menu.simple-menu #menu-membership strong{font-size:18px}#app-menu.simple-menu .menu-account{display:grid;grid-template-columns:1fr 1fr}#app-menu.simple-menu .menu-account button{width:100%}}

#app-menu.simple-menu #rewards-menu [data-view=progress]{order:0}
#app-menu.simple-menu #online-progress{order:1}
#app-menu.simple-menu #online-achievements{order:2}
#app-menu.simple-menu #menu-collection{order:3}
#app-menu.simple-menu #menu-chests{order:4}

/* A soft sweep of light across the membership button. */
#app-menu.simple-menu #menu-membership{position:relative;overflow:hidden;isolation:isolate}
#app-menu.simple-menu #menu-membership::after{content:'';position:absolute;inset:-80% auto -80% -45%;width:28%;background:linear-gradient(90deg,transparent,#fff3 40%,#fff8 50%,#fff3 60%,transparent);transform:translateX(0) skewX(-22deg);animation:membership-shine 5.5s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes membership-shine{0%,18%{left:-45%;opacity:0}24%{opacity:.8}48%{left:120%;opacity:.8}55%,100%{left:120%;opacity:0}}
@media(prefers-reduced-motion:reduce){#app-menu.simple-menu #menu-membership::after{animation:none;display:none}}