/* Self-hosted OFL fonts: rounded brand voice, precise Traditional Chinese learning text. */
@font-face{font-family:"Formo Nunito";src:url("fonts/nunito-variable-v1.woff2") format("woff2");font-style:normal;font-weight:200 1000;font-display:swap}
@font-face{font-family:"Formo Huninn";src:url("fonts/huninn-regular-v1.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Formo Noto TC";src:url("fonts/noto-sans-tc-ui-v1.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
:root{
  --formo-ui:"Formo Nunito","Formo Noto TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --formo-display:"Formo Nunito","Formo Huninn","Formo Noto TC","PingFang TC",sans-serif;
  --formo-learning:"Formo Noto TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --font-geist-sans:var(--formo-ui);
  --font-geist-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
body[data-formo-page]{font-family:var(--formo-ui);font-synthesis:none}
body[data-formo-page] :is(button,input,select,textarea){font-family:var(--formo-ui)}
body[data-formo-page] :is(h1,h2,h3){font-family:var(--formo-display);font-weight:600;letter-spacing:-.015em;line-height:1.12}
body[data-formo-page] :is(.brand,.brand-word){font-family:"Formo Nunito",sans-serif;font-weight:800;letter-spacing:-.035em}
body[data-formo-page="home"] :is(.hero-copy h1,.friends-copy h2,.cloud-copy h2,.formo-copy h2,.clock-copy h2,.finale-copy h2,.modal-copy h2){font-family:var(--formo-display);font-weight:600;line-height:1.12;letter-spacing:-.015em}
body[data-formo-page="home"] .hero-copy h1 span{letter-spacing:.025em;line-height:1.3}
body[data-formo-page="home"] :is(.hero-body,.friends-copy>p:last-child,.cloud-copy>p:last-child,.formo-body){font-size:clamp(14px,1.1vw,18px);line-height:1.8;letter-spacing:.015em;text-wrap:balance}
body[data-formo-page="adventure"] :is(.hero h1,.section-heading h2,.final-cta h2){font-weight:600;line-height:1.12;letter-spacing:-.015em}
body[data-formo-page="adventure"] .hero h1{font-size:clamp(48px,5.6vw,82px)}
body[data-formo-page="adventure"] .section-heading h2{font-size:clamp(38px,4.7vw,68px)}
body[data-formo-page="adventure"] :is(.hero h1 em,.section-heading em){font-weight:600}
body[data-formo-page="wordverse"]{--sans:var(--formo-ui);--serif:var(--formo-display)}
body[data-formo-page="wordverse"] :is(.intro h1,.preview h2,.modal-card h2){font-weight:600;line-height:1.14;letter-spacing:-.015em}
body[data-formo-page="innovation"] :is(.editorial h1,.log-page h1){font-weight:600;line-height:1.12;letter-spacing:-.015em}
body[data-formo-page="innovation"] .portal-copy strong{font-family:"Formo Nunito",sans-serif;font-weight:800;line-height:1.05;letter-spacing:-.035em}
body[data-formo-page="game"] :is(.hero h1,.page h1,.demo-cinematic .hero h1,.demo-cinematic .page h1,.demo-cinematic .head h2){font-family:var(--formo-display);font-weight:600;line-height:1.12;letter-spacing:-.015em}
body[data-formo-page="game"] .demo-cinematic .hero h1{font-size:clamp(48px,5.3vw,78px)}
/* Learning glyphs retain complete strokes and clear Bopomofo forms. */
body[data-formo-page="wordverse"] :is(.word-card,.choice button strong){font-family:var(--formo-learning);font-weight:650}
body[data-formo-page="innovation"] :is(.prompt,.word-choice,.memory-word,.sentence-runtime,.constellation){font-family:var(--formo-learning);font-weight:650;letter-spacing:0}
body[data-formo-page="game"] :is(.glyph,.pieces,.piece,.slot,.char,.memory,.observe,.answer-row,.flash-target,.choices,.target-char,.balloons,.cloze,.detective,.memory-gap,.innovation-choices,.butterfly-sentence,.planet-sentence){font-family:var(--formo-learning);letter-spacing:0}
body[data-formo-page="game"] :is(.memory button,.answer-row button,.choices button,.innovation-choices button){font-family:var(--formo-learning);font-weight:650}
@media(max-width:720px){
 /* Keep the moving portal text inside the phone while retaining a subtle reveal. */
 body[data-formo-page="home"] .formo-copy{translate:calc(38px - var(--formo-reveal,0) * 38px) 0}
 body[data-formo-page="home"] :is(.hero-body,.friends-copy>p:last-child,.cloud-copy>p:last-child,.formo-body){font-size:12px;line-height:1.65}
 body[data-formo-page="home"] .hero-copy h1{font-size:clamp(34px,10.5vw,46px);word-break:keep-all}
 body[data-formo-page="home"] :is(.hero-copy h1,.friends-copy h2,.cloud-copy h2,.formo-copy h2,.clock-copy h2,.finale-copy h2){line-height:1.14;letter-spacing:-.01em}
 body[data-formo-page="adventure"] .hero h1{font-size:clamp(30px,10vw,44px)}
 body[data-formo-page="innovation"] .editorial h1{font-size:clamp(34px,10.3vw,43px)}
 body[data-formo-page="game"] .demo-cinematic .hero h1{font-size:clamp(28px,8.6vw,38px)}
 body[data-formo-page="worlds"] h1,body[data-formo-page="characters"] h1{font-size:clamp(38px,11.2vw,66px)}
}

/* User-approved sun/moon logo; brand asset is separate from gameplay characters. */
body[data-formo-page] .brand-logo{display:block;width:44px;height:44px;object-fit:contain;flex-shrink:0}
body[data-formo-page="home"] .finale-cta .brand-logo{width:36px;height:36px}
body[data-formo-page="wordverse"] .brand .brand-logo{width:36px;height:36px;filter:none}
body[data-formo-page] .site-brand{display:flex;align-items:center;gap:9px;min-width:0}
@media(max-width:720px){
 body[data-formo-page] .brand-logo{width:36px;height:36px}
 body[data-formo-page="worlds"] header{gap:12px}
 body[data-formo-page="characters"] .site-brand{max-width:52%;gap:6px}
 body[data-formo-page="characters"] .site-brand b{font-size:13px;line-height:1.35}
 body[data-formo-page="characters"] header nav{gap:10px;white-space:nowrap}
}