/* CloudzFun: the extra languages and layout fixes (docs/delulu/ARCHITECTURE.md §5); the base CSS files stay unchanged;
   these rules follow the html:lang(ja) / html:lang(he) blocks in delulu.css. */

/* Nunito, the body font, in the Cyrillic (ru, uk) and Vietnamese subsets — same family name, so nothing else changes */
@font-face{font-family:Nunito;src:url('../assets/nunito-cyrillic.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Nunito;src:url('../assets/nunito-vietnamese.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

/* No country flags in the language menu (owner's decision 2026-10-01): a flag is a country, not a language (🇬🇧 for
   English, 🇪🇸 for Spanish, 🇸🇦 for Arabic…), 🇹🇼 next to 🇨🇳 is sensitive, and Windows shows them as "GB"/"BR" letters.
   The menu button keeps the language code ("EN ▾"), the list keeps the native names */
.landing-lang-picker summary>span[aria-hidden="true"],.landing-lang-panel a>span[aria-hidden="true"]{display:none}

/* "How it works" opens with the language list (script.js howItWorks). 16 languages took ~3 rows; with 28 its spacing
   pushed the explanation below the fold on 320–375 px phones, so the list is tighter (all locales) */
.locale-picker{gap:0 2px;margin:0 0 14px}.locale-picker a{padding:3px 6px;font-size:13px;line-height:1.5}

/* Result screen's invite button (sharing.css: white-space:nowrap) is sized for the Portuguese "Será que o resto concorda?
   Manda no grupo."; the control-arm text is longer in English & co. ("Will everyone else agree? Send it to the group
   chat.") and ran past the button and the screen (page 433 px wide on a 390 px phone) — let it wrap */
#screen-result .share-invite-cta{white-space:normal;text-align:center;text-wrap:balance}

/* "Invite your friends" popup: sharing.css sizes its share buttons at 18px with no narrow-phone rule (unlike the main
   share grid's max-width:370px one), so "WhatsApp" + icon was clipped below 414 px (132 px of content in 112 px at 320) */
#modal .invite-share .social-share-button{font-size:min(16px,4.3vw);gap:min(8px,1.6vw);padding:12px min(6px,1.2vw)}

/* Friend page pill "💌 {name} wants your opinion": the base nowrap + ellipsis can't work on a flex container, so a
   long owner name (up to 24 chars, e.g. "Alexandria Montgomery") cut the line mid-word, worst in long languages
   ("möchte deine Meinung hören"). Let it wrap between its parts: "💌 {name}" / "wants your opinion"; one line when it fits */
.friend-intro-pill{flex-wrap:wrap;justify-content:center;white-space:normal;text-align:center;row-gap:2px}

/* Floating "Share result ↓ ↓ ↓" pill (sharing.css: fixed, left:50% + translateX(-50%), 19px, nowrap, no max width):
   "Μοιράσου το αποτέλεσμα ↓ ↓ ↓" was 322 px on a 320 px phone. Centre it across the full width instead (so a wrap
   gets the whole width, not half), cap it at the screen, scale the text on narrow phones */
.share-scroll-cue{left:12px;right:12px;transform:none;width:max-content;max-width:calc(100% - 24px);margin:0 auto;font-size:min(19px,5.2vw);padding-left:min(22px,4vw);padding-right:min(22px,4vw);gap:min(12px,2.5vw);white-space:normal;text-align:center}
.share-scroll-cue span{white-space:nowrap}

/* Right-to-left (he, ar): delulu.css anchors the open language menu by its left edge, but the picker sits mid-header,
   so at 320 px the menu ran 28 px past the right edge (143–348). Anchored by its right edge it fits (16–221 at 320) */
[dir=rtl] .landing-lang-panel{left:auto;right:0}

/* The Delulu display font is Latin-only: headlines in other scripts use Nunito, then the system font */
html:is(:lang(ru),:lang(uk)) :is(h1,h2,h3,.display,.export-type,.invite-title){font-family:Delulu,Nunito,system-ui,sans-serif}
/* Vietnamese is Latin, so Delulu draws the base letters and only the accented ones (ế ư ơ ậ…) fell back — two fonts
   inside one word ("biết", "được"): Vietnamese headings use Nunito throughout */
html:lang(vi) :is(h1,h2,h3,.display,.export-type,.invite-title,.export-score strong,.meter-number){font-family:Nunito,system-ui,sans-serif;font-weight:900}

/* Chinese and Korean — like Japanese */
html:lang(zh-CN){--cjk-font:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",sans-serif}
html:lang(zh-TW){--cjk-font:"PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Noto Sans TC",sans-serif}
html:lang(ko){--cjk-font:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK KR","Noto Sans KR",sans-serif}
html:is(:lang(zh),:lang(ko)) body,html:is(:lang(zh),:lang(ko)) :is(button,input,h1,h2,h3,p,.scale-labels,.stat-label,.delulu-export-card,.invite-title){font-family:var(--cjk-font);letter-spacing:normal;line-break:strict}
html:lang(ko) body,html:lang(ko) :is(button,input,h1,h2,h3,p){word-break:keep-all}
html:is(:lang(zh),:lang(ko)) .question-head h1{font-size:clamp(22px,3.6svh,30px);line-height:1.35}
html:is(:lang(zh),:lang(ko)) .scale-labels{font-size:20px;line-height:1.4}
html:is(:lang(zh),:lang(ko)) :is(.export-type,.export-score strong){font-family:Delulu,Nunito,var(--cjk-font)}
html:is(:lang(zh),:lang(ko)) .export-subtitle{line-height:1.35}

/* Arabic, Hindi, Thai — like Hebrew. Tight negative tracking breaks Arabic letter joining and clips Devanagari/Thai
   marks, so letter-spacing is normal and headlines get room for the marks above and below the line. */
html:lang(ar){--script-font:system-ui,-apple-system,"Segoe UI","Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif}
html:lang(hi){--script-font:system-ui,-apple-system,"Nirmala UI","Kohinoor Devanagari","Noto Sans Devanagari",sans-serif}
html:lang(th){--script-font:system-ui,-apple-system,"Leelawadee UI","Thonburi","Noto Sans Thai",sans-serif}
html:is(:lang(ar),:lang(hi),:lang(th)) body,html:is(:lang(ar),:lang(hi),:lang(th)) :is(button,input,p,li,label,.scale-labels,.stat-label,.export-subtitle,.export-name,.invite-instructions){font-family:var(--script-font);letter-spacing:normal}
html:is(:lang(ar),:lang(hi),:lang(th)) :is(h1,h2,h3,.export-type,.invite-title,.export-score strong,.meter-number){font-family:Delulu,var(--script-font);letter-spacing:normal}
html:is(:lang(ar),:lang(hi),:lang(th)) :is(h1,h2,h3){line-height:1.35}