/* Shared site-shell markup; scoped styling keeps the game independent. */
@font-face{font-family:SiteInter;src:url('site-assets/inter-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
body{padding-top:84px}
.site-chrome{font-family:SiteInter,system-ui,sans-serif;font-size:16px;line-height:1.5;color:#334155}
.site-chrome *{box-sizing:border-box}
.site-chrome a{color:inherit;text-decoration:none;transition:color .2s}
.site-chrome a:hover{color:#1e293b}
.site-chrome a:focus-visible,.site-chrome button:focus-visible{outline:3px solid #2563eb;outline-offset:4px}
.site-chrome p,.site-chrome h2,.site-chrome ul{margin:0}
.site-chrome ul{padding:0;list-style:none}
.site-chrome img{display:block;width:auto;height:28px}
.site-chrome picture{display:block;flex-shrink:0}
.site-chrome svg{display:block;width:20px;height:20px}
.site-chrome .max-w-7xl{max-width:1280px;margin:auto;padding-left:40px;padding-right:40px}
.site-chrome .flex,.site-chrome .inline-flex{display:flex}
.site-chrome .items-center{align-items:center}
.site-chrome .justify-between{justify-content:space-between}
.site-chrome .gap-3{gap:12px}
.site-chrome .gap-2{gap:8px}
.site-chrome .gap-4{gap:16px}
.site-chrome .font-serif{font-family:Georgia,'Times New Roman',serif}
.site-chrome .font-semibold{font-weight:600}
.site-chrome .text-lg{font-size:18px}
.site-chrome .text-accent{color:#1e293b}
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;border-bottom:1px solid #abb5c5;background:white}
#navbar.shadow-sm{box-shadow:0 1px 3px #0000001a}
#navbar .nav-row{height:84px}
#navbar .nav-logo{height:36px}
#navbar .nav-brand{font-size:23.2px;color:#0f172a;letter-spacing:-.025em}
#navbar .nav-links{display:flex;gap:42.4px;align-items:center;font-weight:500;font-size:16px}
#navbar .auth-dashboard{display:none}
#mobile-menu-btn{display:none;background:none;border:0;border-radius:4px;padding:10px;color:#334155}
#mobile-menu{display:none}
.site-footer{background:#1e3a5f;color:#fff}
.site-footer a{color:#fff}
.site-footer a:hover{color:#fff}
.site-footer a:focus-visible{outline-color:#fff}
.site-footer>.max-w-7xl{padding-top:56px;padding-bottom:56px}
.site-footer .footer-grid{display:grid;grid-template-columns:1.8fr 1.3fr .9fr 1fr;gap:40px;margin-bottom:48px}
.site-footer .mb-4{margin-bottom:16px}
.site-footer h2{font-size:14px;font-weight:500;margin-bottom:20px;letter-spacing:.025em}
.site-footer p,.site-footer li{font-size:14px;line-height:1.625}
.site-footer li+li{margin-top:10px}
.site-footer .border-t{border-top:1px solid #ffffff1a;padding-top:32px;font-size:14px}
.site-footer a{overflow-wrap:anywhere}
.site-footer .w-4{width:16px;height:16px}
@media(max-width:1023px){.site-chrome .max-w-7xl{padding-left:32px;padding-right:32px}#navbar .nav-links{gap:24px}.site-footer .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){body{padding-top:72px}#navbar .nav-row{height:72px}#navbar .nav-logo{height:32px}#navbar .nav-brand{font-size:19.2px}#navbar .nav-links{display:none}#mobile-menu-btn{display:block}#mobile-menu:not(.hidden){display:flex;flex-direction:column;gap:12px;padding-bottom:20px;max-height:calc(100svh - 72px);overflow:auto}#mobile-menu a{padding:6px 0}.site-chrome .max-w-7xl{padding-left:24px;padding-right:24px}.site-footer .border-t{flex-direction:column;text-align:center}}
@media(max-width:639px){.site-footer .footer-grid{grid-template-columns:1fr}.site-footer>.max-w-7xl{padding-top:48px;padding-bottom:32px}}
@media(max-width:480px){.shell,.game{min-height:calc(100svh - 72px)}}
@media(max-width:480px) and (max-height:760px){.board{transform:translateX(-50%) scale(.71)}.board-wrap{height:285px}}

/* Match the HSK Tests footer typography and responsive spacing. */
@font-face{font-family:SiteInter;src:url('site-assets/inter-latin-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:SiteInter;src:url('site-assets/inter-latin-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:SiteInter;src:url('site-assets/inter-latin-600.woff2') format('woff2');font-weight:600;font-display:swap}
.site-footer .font-light{font-weight:300}
.site-footer li{line-height:1.5}
.site-footer .font-medium{font-weight:500}
.site-footer>.max-w-7xl{padding:56px 24px}
.site-footer .border-t{flex-direction:column;text-align:left}
@media(min-width:640px){.site-footer>.max-w-7xl{padding-left:32px;padding-right:32px}.site-footer .border-t{flex-direction:row}}
@media(min-width:1024px){.site-footer>.max-w-7xl{padding-left:40px;padding-right:40px}}

@media(min-width:768px) and (max-width:1023px){
 #navbar .nav-links{display:none}
 #mobile-menu-btn{display:block}
 #mobile-menu:not(.hidden){display:flex;flex-direction:column;gap:12px;padding-bottom:20px}
 #mobile-menu a{padding:6px 0}
}

/* Match the shared navigation dimensions, including reserved account width. */
#navbar .nav-brand{line-height:28px}
#navbar .nav-links{line-height:20px;gap:42.4px}
#navbar .auth-login,#navbar .auth-dashboard{min-width:92px}
#mobile-menu{font-size:14px;line-height:20px;font-weight:500}
#mobile-menu-btn{padding:8px;line-height:24px}
#mobile-menu-btn:hover{background:#e2e8f0}
@media(min-width:640px) and (max-width:1023px){#navbar .max-w-7xl{padding-left:32px;padding-right:32px}}
@media(min-width:641px) and (max-width:767px){body{padding-top:84px}#navbar .nav-row{height:84px}#navbar .nav-logo{height:36px}#navbar .nav-brand{font-size:23.2px}}

/* Use the same auth.js state class as every other site page. */
html.auth-signed-in #navbar .auth-login{display:none!important}
html.auth-signed-in #navbar .auth-dashboard{display:inline-flex!important}