/* English copy is wider than Chinese copy. These rules are loaded only for /en pages. */
html[lang="en"]{overflow-x:hidden}
html[lang="en"] body{overflow-wrap:break-word;word-break:normal}
html[lang="en"] button,html[lang="en"] a,html[lang="en"] input,html[lang="en"] textarea{font-family:"DM Sans","Segoe UI",Arial,sans-serif}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] p,html[lang="en"] small,html[lang="en"] strong{min-width:0;max-width:100%}

/* Header and navigation */
html[lang="en"] .site-header{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:18px;width:min(1240px,calc(100% - 32px))!important;max-width:1240px!important;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
html[lang="en"] .site-header .brand{white-space:nowrap}
html[lang="en"] .brand-mark{flex:0 0 auto;width:38px;min-width:38px;overflow:hidden;font-size:15px;white-space:nowrap}
html[lang="en"] .nav{min-width:0;max-width:100%;gap:3px;justify-self:center}
html[lang="en"] .nav a{min-width:0;height:auto;min-height:42px;padding:7px 11px;font-size:12px;line-height:1.15;text-align:center;white-space:normal}
html[lang="en"] .profile-btn{max-width:180px;min-width:0;line-height:1.15;text-align:center;white-space:normal}
html[lang="en"] .lang-switch{flex:0 0 auto}
html[lang="en"] .header-actions{justify-self:end;display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;max-width:100%}
html[lang="en"] .header-actions .lang-switch{width:auto!important;max-width:none;padding:8px 12px!important}
html[lang="en"] .header-actions .profile-btn{justify-self:auto;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Homepage */
html[lang="en"] .home-hero{grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:28px;padding-left:44px;padding-right:44px}
html[lang="en"] .home-hero-copy{min-width:0}
html[lang="en"] .home-hero h1{font-size:clamp(43px,4.7vw,66px);line-height:1.04;letter-spacing:-.045em;overflow-wrap:normal}
html[lang="en"] .home-actions{flex-wrap:wrap}
html[lang="en"] .home-actions a{height:auto;min-height:52px;line-height:1.2;text-align:center}
html[lang="en"] .daily-items a{grid-template-columns:34px minmax(0,1fr) auto}
html[lang="en"] .daily-items strong,html[lang="en"] .daily-items small{overflow-wrap:anywhere}
html[lang="en"] .quick-card{grid-template-columns:auto minmax(0,1fr) auto;height:auto}
html[lang="en"] .quick-card h3{font-size:20px;line-height:1.18;overflow-wrap:anywhere}
html[lang="en"] .quick-card p{overflow-wrap:anywhere}
html[lang="en"] .recommend-card{height:auto;min-height:330px}
html[lang="en"] .recommend-card h3{font-size:19px;line-height:1.2;overflow-wrap:anywhere;padding-right:26px}
html[lang="en"] .recommend-card p{height:auto;min-height:58px}
html[lang="en"] .growth-card{grid-template-columns:auto minmax(0,1fr) auto}
html[lang="en"] .growth-copy h2{line-height:1.2}

/* Game, test and training lobbies */
html[lang="en"] .games-masthead>div:first-child{min-width:0;max-width:760px}
html[lang="en"] .games-masthead h1{font-size:clamp(38px,4.5vw,58px);line-height:1.06;overflow-wrap:normal}
html[lang="en"] .filter-buttons button{height:auto;min-height:46px;line-height:1.15;white-space:normal;text-align:left}
html[lang="en"] .games-page .game-card{height:auto;min-height:190px}
html[lang="en"] .game-card .game-body{min-width:0}
html[lang="en"] .game-card .game-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
html[lang="en"] .game-card h3{font-size:17px;line-height:1.2;overflow-wrap:anywhere}
html[lang="en"] .game-card .tags span{line-height:1.2;overflow-wrap:anywhere}
html[lang="en"] .game-card p{-webkit-line-clamp:3;overflow-wrap:anywhere}
html[lang="en"] .game-card .game-card-footer{align-items:flex-end;flex-wrap:wrap}
html[lang="en"] .game-card .player-count,html[lang="en"] .game-card .game-card-footer .play-btn{height:auto;line-height:1.15;white-space:normal}
html[lang="en"] .rec-card{height:auto;min-height:205px}
html[lang="en"] .rec-card .rec-name{line-height:1.2;overflow-wrap:anywhere}

/* Individual games and tests */
html[lang="en"] .play-hero>div:first-child{min-width:0;max-width:820px}
html[lang="en"] .play-hero h1{font-size:clamp(38px,5vw,62px);line-height:1.04;overflow-wrap:normal}
html[lang="en"] .hero-symbol{flex:0 0 auto;font-size:110px;margin-right:10px}
html[lang="en"] .game-intro h2,html[lang="en"] .result h2{line-height:1.16;overflow-wrap:anywhere}
html[lang="en"] .primary,html[lang="en"] .secondary,html[lang="en"] .quiz-option,html[lang="en"] .answer{height:auto;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
html[lang="en"] .section-title{gap:12px;flex-wrap:wrap}
html[lang="en"] .section-title h2{line-height:1.16}
html[lang="en"] .review-top{flex-wrap:wrap}
html[lang="en"] [class$="-hero"] h1,html[lang="en"] [class*="-hero "] h1{line-height:1.06;overflow-wrap:normal}
html[lang="en"] [class$="-result"] h2,html[lang="en"] [class*="-report"] h2{line-height:1.18;overflow-wrap:anywhere}
html[lang="en"] [class*="-actions"]{flex-wrap:wrap}
html[lang="en"] [class*="-actions"] button,html[lang="en"] [class*="-actions"] a{height:auto;min-height:44px;line-height:1.2;white-space:normal;text-align:center}

/* Account, leaderboard and admin */
html[lang="en"] .features-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
html[lang="en"] .feature-card h3,html[lang="en"] .activity-title{overflow-wrap:anywhere}
html[lang="en"] .rank-tabs button{height:auto;min-height:42px;line-height:1.15;white-space:normal}
html[lang="en"] .rank-board-head{grid-template-columns:minmax(0,1fr) auto}
html[lang="en"] .admin-stats article{min-width:0}
html[lang="en"] .admin-stats small{line-height:1.2;overflow-wrap:anywhere}
html[lang="en"] .admin-tabs button,html[lang="en"] .admin-action{height:auto;line-height:1.15;white-space:normal}
html[lang="en"] .admin-toolbar>div{min-width:0}
html[lang="en"] .auth-card h2,html[lang="en"] .auth-card p,html[lang="en"] .auth-submit{line-height:1.2;overflow-wrap:anywhere}

@media(max-width:1100px){
  html[lang="en"] .site-header{grid-template-columns:1fr auto;gap:10px 12px;padding-top:10px;padding-bottom:12px}
  html[lang="en"] .site-header .brand{grid-column:1;grid-row:1}
  html[lang="en"] .site-header .header-actions{grid-column:2;grid-row:1}
  html[lang="en"] .nav{grid-column:1/-1;grid-row:2;width:100%;justify-content:center;overflow-x:auto;scrollbar-width:none}
  html[lang="en"] .nav a{flex:0 0 auto;white-space:nowrap}
  html[lang="en"] .home-hero{grid-template-columns:1fr}
  html[lang="en"] .daily-plan{max-width:680px}
  html[lang="en"] .growth-card{grid-template-columns:auto minmax(0,1fr)}
  html[lang="en"] .growth-card button{grid-column:1/-1;width:100%}
}
@media(max-width:700px){
  html[lang="en"] .site-header{padding-left:12px;padding-right:12px}
  html[lang="en"] .site-header .brand{font-size:16px}
  html[lang="en"] .site-header .profile-btn{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html[lang="en"] .nav{justify-content:flex-start}
  html[lang="en"] .nav a{font-size:11px;padding:7px 10px}
  html[lang="en"] .home-hero{padding:29px 19px}
  html[lang="en"] .home-hero h1{font-size:38px}
  html[lang="en"] .quick-card{grid-template-columns:auto minmax(0,1fr)}
  html[lang="en"] .quick-card>b{grid-column:2;justify-self:start;white-space:normal}
  html[lang="en"] .games-masthead h1{font-size:36px;max-width:75%}
  html[lang="en"] .games-masthead p{max-width:76%}
  html[lang="en"] .game-card .game-header{grid-template-columns:minmax(0,1fr) auto}
  html[lang="en"] .play-hero{padding:27px 20px}
  html[lang="en"] .play-hero h1{font-size:37px;max-width:100%}
  html[lang="en"] .hero-symbol{font-size:48px;margin-left:8px}
  html[lang="en"] .admin-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
  html[lang="en"] .games-masthead h1,html[lang="en"] .games-masthead p{max-width:100%}
  html[lang="en"] .games-mascots{display:none}
  html[lang="en"] .play-hero{display:block}
  html[lang="en"] .hero-symbol{display:none}
  html[lang="en"] .admin-stats{grid-template-columns:1fr}
}