/* Mobile layout and readability improvements. */
.xp-challenge-count b{font-weight:inherit}
@media(max-width:1023px){
 html,body{font-size:19px;line-height:1.6}
 header{padding:12px 16px 0;gap:10px 12px}
 header nav{justify-content:flex-start;gap:18px;scrollbar-width:thin}
 header .nav{flex:none;font-size:17px;letter-spacing:-.4px;min-height:56px}
 header .nav span{font-size:14px;margin-left:3px;padding:2px 4px}
 .admin-entry .secondary{font-size:18px}
 .small-link{font-size:17px}
 .account-bar,.account-bar b,.account-bar small,.account-bar a,.account-bar button{font-size:16px}
 .primary,.secondary,.small-link,.filter,select,input,dialog button{font-size:18px}
 select,input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],.catalog-tools input,.catalog-tools select,.contact-player select,.catalog-filters input,.catalog-filters select,.catalog-preview-controls select{font-size:18px;min-height:52px}
 .training-overview>summary{font-size:19px;padding:14px 0}
 .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,43%);align-items:start;gap:16px 8px;padding:16px 0 30px;min-height:0}
 .intro-copy{display:contents}
 .intro .eyebrow{grid-column:1/-1;grid-row:1;font-size:13px;max-width:none;letter-spacing:1px;line-height:1.6}
 .intro h1{grid-column:1;grid-row:2;align-self:center;font-size:clamp(40px,10.8vw,72px);line-height:1;letter-spacing:-.6px;margin:10px 0}
 .intro h1 em{font-size:.84em}
 .intro p{grid-column:1/-1;font-size:19px;line-height:1.7}
 .intro .brand-promise{font-size:23px;max-width:none;margin-top:0}
 .nmc-hero{grid-column:2;grid-row:2;justify-self:end;align-self:start;width:100%;height:auto;aspect-ratio:1;margin:0;padding-top:8px}
 .nmc-mark{width:100%;height:auto;aspect-ratio:1;border-radius:12px}
 .nmc-hero .orbit{display:none}
 .nmc-hero .art-sticker{font-size:clamp(11px,3vw,18px);right:0;bottom:-7px;padding:9px 10px;box-shadow:2px 3px 0 #000}
 .xp-heading{display:flex;flex-wrap:nowrap;align-items:center;gap:14px;margin-bottom:16px}
 .xp-heading>h2,.xp-heading>.xp-challenge-count{flex:1;min-width:0}
 .xp-heading h2{font-size:30px;line-height:1.2}
 .xp-heading h2 span{display:block;font-size:16px;line-height:1.5;margin:8px 0 0;letter-spacing:0}
 .xp-heading>.xp-challenge-count{font-size:17px;line-height:1.4;text-align:center;white-space:normal;border:1px solid #ae4859;border-radius:16px;padding:12px 8px;background:#28131a;color:#ffd4dc}
 .xp-challenge-count b{display:block;font-family:var(--display);font-size:58px;font-weight:700;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
 .xp-grid{gap:12px}
 .xp-wallet{padding:18px 14px;min-height:185px;align-content:center}
 .wallet-eyebrow{font-size:17px;line-height:1.4;letter-spacing:.2px}
 .wallet-eyebrow>span{font-size:16px;display:block;margin-top:5px}
 .wallet-value{font-size:48px;line-height:1.1}
 .wallet-value>span{font-size:21px}
 .xp-wallet.total{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;border-color:#d45567;box-shadow:inset 4px 0 #f23b53;background:linear-gradient(145deg,#30151d,#16161c)}
 .xp-wallet.total .wallet-value{font-size:70px;position:relative;z-index:1}
 .xp-wallet.total .wallet-eyebrow{font-size:16px}
 .xp-wallet.total .wallet-spark{font-size:48px;top:10px;right:8px;opacity:.55}
 .xp-wallet p{font-size:16px;line-height:1.5}
 .xp-wallet .xp-coin{width:44px;height:44px}
 .xp-rules,.xp-rules summary,.xp-rules summary>span,.xp-rules-content p,.xp-rules table{font-size:17px}
 .gesture-picker-summary strong{font-size:23px}
 .gesture-picker-summary>span:first-child,.gesture-picker-action{font-size:18px}
 .section-heading h2,.history-head h2{font-size:26px}
 .section-heading h2 span{font-size:17px}
 .drill-info b{font-size:21px}
 .drill-info small,.level-mini,.level,.xp-card-bonus{font-size:17px}
 .gesture-catalog .filter{font-size:18px}
 .mode-tabs button{font-size:18px;min-height:64px}
 .animation-controls label,.animation-controls select,.animation-controls button{font-size:18px}
 .animation-controls p{font-size:17px}
 .movement-detail,.movement-detail p,.movement-detail>span{font-size:19px;line-height:1.65}
 .stage-label,.stage-label span:last-child,.stage-bottom{font-size:16px;letter-spacing:0}
 .instruction p,.gesture-note,.contact-intro,.contact-action{font-size:20px;line-height:1.7}
 .instruction>span{font-size:18px;width:34px;height:34px}
 .contact-eyebrow,.contact-badge,.contact-legend,.contact-note{font-size:17px}
 .contact-heading h3{font-size:27px}
 .contact-label{font-size:22px}
 .contact-player label,.contact-controls .secondary,.contact-navigation .secondary{font-size:18px}
 .ranking-filters label,.ranking-filters select,.ranking-filters button,.ranking-table th,.ranking-table td{font-size:18px}
 .ranking-context p,.ranking-context>span,.local-note,.empty p,.record-row,.history-row time,.history-row span{font-size:18px}
 .records-intro p{font-size:20px}
 .mobile-table-hint{font-size:17px}
 dialog label,dialog p,.settings-note,#catalog-count{font-size:18px!important}
 .gate-card p,.gate-card .check,.gate-card form>label:not(.check),.save-result p,.check,.result-actions button{font-size:18px}
 footer,footer .small-link,.footer-brand b,footer>span:nth-child(2){font-size:16px}

}
@media(min-width:600px) and (max-width:1023px){
 .intro{grid-template-columns:minmax(0,1fr) 280px;gap:20px 28px}
 .nmc-hero{width:250px}
 .intro p{grid-column:1;max-width:34em}
 .nmc-hero{grid-row:2 / span 3}
 .intro h1{font-size:72px}
}
@media(max-width:359px){
 header nav{gap:16px}
 .intro{grid-template-columns:minmax(0,1fr) 122px}
 .intro h1{font-size:36px}
 .xp-wallet{padding:16px 10px}
 .wallet-eyebrow,.xp-wallet.total .wallet-eyebrow{font-size:15px}
 .wallet-value{font-size:44px}
 .xp-wallet.total .wallet-value{font-size:60px}
}