/* Oonaii visual language. This file is distributed independently in each Site. */
.oonaii-header,.oonaii-footer{--shell-ink:#302b3b;--shell-muted:#77717e;--shell-purple:#6348db;--shell-line:#e3ded5;box-sizing:border-box;width:100%;max-width:1120px;margin-inline:auto;font-family:"Trebuchet MS",system-ui,sans-serif;color:var(--shell-ink)}
header.oonaii-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px 20px;border-bottom:1px solid var(--shell-line);position:relative;z-index:8}
.oonaii-header .oonaii-identity{display:flex;align-items:center;gap:22px;min-width:0}
.oonaii-header .oonaii-brand,.oonaii-footer .oonaii-brand{display:inline-block;width:auto;height:auto;background:none;box-shadow:none;border:0;border-radius:0;padding:0;text-decoration:none;color:var(--shell-purple);font-size:30px;font-weight:900;letter-spacing:-1.8px;line-height:1.15;white-space:nowrap}
.oonaii-brand>span{color:var(--shell-ink);position:static;font:inherit}
.oonaii-context{display:flex;align-items:center;gap:10px;border-left:1px solid var(--shell-line);padding-left:22px;min-width:0;color:var(--shell-ink);text-decoration:none;font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.1px}
.oonaii-mark{display:grid;place-items:center;flex:none;width:29px;height:29px;background:#eee8fc;border-radius:9px;font-size:17px;color:#6348db;letter-spacing:0}
.oonaii-header[data-game="ajedrez"] .oonaii-mark{background:#e1eadc;color:#42594b}.oonaii-header[data-game="geografia"] .oonaii-mark{background:#e0edf0;color:#47636a}
.oonaii-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.oonaii-catalog{display:inline-flex;align-items:center;min-height:44px;color:var(--shell-muted);text-decoration:none;font-size:11px;font-weight:700;white-space:nowrap}
.oonaii-account{position:relative;text-align:left;font-size:11px;line-height:1.5;color:var(--shell-muted)}
.oonaii-account>summary{display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer;border:1px solid var(--shell-line);border-radius:30px;padding:9px 12px;min-height:40px;background:#fffefa;white-space:nowrap;user-select:none}
.oonaii-account>summary::-webkit-details-marker{display:none}.oonaii-account>summary:after{content:"⌄";font-size:11px;color:#9a92a3;margin-left:3px}
.oonaii-session-dot{width:6px;height:6px;background:#b0a9b7;border-radius:50%;flex:none}.oonaii-account[data-session="signed-in"] .oonaii-session-dot{background:#759b56}
.oonaii-account-panel{position:absolute;right:0;top:calc(100% + 10px);width:250px;max-width:calc(100vw - 40px);padding:18px;background:#fffefa;border:1px solid var(--shell-line);border-radius:16px;box-shadow:0 12px 35px #302b3b18;z-index:30;color:var(--shell-ink)}
.oonaii-account-panel strong{display:block;font-size:13px;margin:0 0 8px}.oonaii-account-panel p{font-size:12px;line-height:1.6;color:var(--shell-muted);margin:0 0 8px}.oonaii-account-panel a{display:block;min-height:44px;padding:12px 0 5px;font-size:12px;font-weight:700;color:var(--shell-purple);text-decoration:none}
.oonaii-header button.oonaii-help{display:grid;place-items:center;flex:none;min-height:40px;width:40px;height:40px;margin:0;padding:0;border:1px solid var(--shell-line);border-radius:50%;background:transparent;color:var(--shell-ink);font:700 15px "Trebuchet MS",system-ui,sans-serif;box-shadow:none}
.oonaii-header a:hover,.oonaii-footer a:hover{color:var(--shell-purple);text-decoration:underline;text-underline-offset:4px}
.oonaii-header :is(a,button,summary):focus-visible,.oonaii-footer a:focus-visible{outline:3px solid #aa91ed;outline-offset:4px}
footer.oonaii-footer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px;padding:26px 28px;margin-top:40px;border-top:1px solid var(--shell-line);text-align:left;font-size:11px;line-height:1.6}
.oonaii-footer .oonaii-brand{font-size:25px}.oonaii-footer-copy p{margin:0;color:var(--shell-muted);font-size:11px;line-height:1.7}.oonaii-footer-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:5px}.oonaii-footer-links a{display:inline-flex;align-items:center;min-height:36px;color:var(--shell-muted);font-size:11px;text-decoration:none}.oonaii-footer-meta{font-size:10px;color:var(--shell-muted);white-space:nowrap}
@media(max-width:720px){header.oonaii-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:18px 20px 14px}.oonaii-header .oonaii-identity{display:contents}.oonaii-header .oonaii-brand{grid-row:1;grid-column:1;font-size:28px;justify-self:start}.oonaii-actions{grid-row:1;grid-column:2;gap:8px}.oonaii-catalog{display:none}.oonaii-context{grid-row:2;grid-column:1/-1;padding-left:0;border-left:0;font-size:12px;gap:8px}.oonaii-mark{width:25px;height:25px;font-size:15px;border-radius:8px}.oonaii-account>summary{padding:8px 10px;font-size:10px;min-height:40px}.oonaii-header[data-game="portal"] .oonaii-context{display:none}.oonaii-account-panel{right:0;width:240px}.oonaii-header button.oonaii-help{width:40px;min-height:40px}footer.oonaii-footer{grid-template-columns:1fr;gap:12px;padding:24px 20px;margin-top:30px}.oonaii-footer .oonaii-brand{font-size:24px}.oonaii-footer-meta{font-size:10px}.oonaii-footer-links{gap:4px 16px}}
@media(prefers-reduced-motion:reduce){.oonaii-header *,.oonaii-footer *{scroll-behavior:auto}}

.oonaii-language-control{display:flex;align-items:center;flex:none}.oonaii-language-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.oonaii-language-control select{width:106px;min-height:44px;margin:0;padding:8px 9px;border:1px solid #e3ded5;border-radius:12px;background:#fffefa;color:#504564;font:700 11px "Trebuchet MS",system-ui,sans-serif}.oonaii-header .oonaii-actions{gap:10px}
@media(max-width:720px){header.oonaii-header{grid-template-columns:minmax(0,1fr) auto auto;gap:10px}.oonaii-header .oonaii-actions{display:contents}.oonaii-header .oonaii-brand{grid-column:1;grid-row:1}.oonaii-header .oonaii-account{grid-column:2;grid-row:1;justify-self:end}.oonaii-header .oonaii-help{grid-column:3;grid-row:1}.oonaii-header .oonaii-context,.oonaii-header[data-game="portal"] .oonaii-context{display:flex;grid-column:1/3;grid-row:2}.oonaii-header .oonaii-language-control{grid-column:3;grid-row:2;justify-self:end}.oonaii-language-control select{width:100px;min-height:44px;font-size:11px}.oonaii-header[data-game="portal"] .oonaii-account{grid-column:2/4}.oonaii-context{min-width:0;overflow-wrap:anywhere}.oonaii-header .oonaii-help{min-height:44px;width:44px;height:44px}}

.oonaii-modal-language{justify-content:flex-end;margin-bottom:12px}.oonaii-account>summary{min-height:44px}

/* The portal owns this copy of the same account-panel visual treatment. */
.oonaii-header .oonaii-account-panel{box-sizing:border-box;width:280px;max-width:calc(100vw - 40px);padding:16px;border:1px solid #e3ded5;border-radius:14px;background:#fffefa;box-shadow:0 10px 30px #302b3b22;font:12px/1.6 system-ui;color:#302b3b;white-space:normal;overflow-wrap:anywhere}
.oonaii-account-panel p{font:12px/1.6 system-ui;margin:0 0 8px;color:#77717e}
.oonaii-account-panel button,.oonaii-account-panel a{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:6px 0;padding:10px 8px;border:1px solid #e3ded5;border-radius:9px;background:#fffefa;color:#6348db;font:700 12px/1.4 system-ui;text-align:center;text-decoration:none;box-shadow:none;white-space:normal}
.oonaii-account-panel [hidden]{display:none!important}.oonaii-account-panel button:disabled{opacity:.6;cursor:wait}.oonaii-account-panel [data-google-button]{min-width:0;max-width:100%}
.oonaii-account-panel :is(a,button):focus-visible{outline:3px solid #aa91ed;outline-offset:2px}
.oonaii-account-panel [data-language-sync]:empty{display:none}
html:is([lang="zh-Hans"],[lang="ja"]) #title{font-size:clamp(42px,8vw,88px);line-height:1.12;letter-spacing:-.02em}html:is([lang="zh-Hans"],[lang="ja"]) #title em{white-space:nowrap}

@media(max-width:380px){header.oonaii-header{grid-template-columns:minmax(0,1fr) auto 44px}.oonaii-header .oonaii-context,.oonaii-header[data-game="portal"] .oonaii-context{grid-column:1;grid-row:2}.oonaii-header .oonaii-language-control{grid-column:2/4;grid-row:2}}

html[lang="ja"]{line-break:strict;word-break:normal}html[lang="ja"] .oonaii-account-panel{line-height:1.65}
html[lang="ja"] #title em{display:block;white-space:nowrap}html[lang="ja"] #title{font-size:clamp(38px,7vw,80px);line-height:1.2;overflow-wrap:anywhere}

/* This project's own Arabic layout. Geometry is kept separate from text direction. */
html[lang="ar"]{font-family:Tahoma,Arial,system-ui,sans-serif}
html[lang="ar"] body,html[lang="ar"] .oonaii-header,html[lang="ar"] .oonaii-footer{font-family:Tahoma,Arial,system-ui,sans-serif}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .eyebrow,html[lang="ar"] .tag{letter-spacing:0}
html[lang="ar"] p,html[lang="ar"] li{line-height:1.8}
html[lang="ar"] .oonaii-account{text-align:right}
html[lang="ar"] .oonaii-account-panel{right:auto;left:0;text-align:right}
html[lang="ar"] .oonaii-brand{direction:ltr;unicode-bidi:isolate}
html[lang="ar"] .turn-name,html[lang="ar"] .choice>span,html[lang="ar"] [data-user-text],html[lang="ar"] input[type="text"]{unicode-bidi:plaintext}
html[lang="ar"] .oonaii-language-control select{direction:rtl}
html[lang="ar"] [data-language-select] option{unicode-bidi:plaintext}

html[lang="ar"] #title{font-size:clamp(44px,8vw,84px);line-height:1.3;letter-spacing:0}html[lang="ar"] .oonaii-context{border-left:0;border-right:1px solid var(--shell-line);padding-left:0;padding-right:22px}
html[lang="ar"] .doodle{right:auto;left:15%}@media(max-width:900px){html[lang="ar"] .doodle{left:2%}}