/* BOSS WORK - css/a11y.css : Arabic / RTL, accessibility options (html classes set by js/a11y.js), settings grid, credits roll. */

/* ---------- Arabic: font stack, no letter-spacing (it breaks joined letters), canvases never mirror ---------- */
html[lang=ar] {
  --ar: "Cairo", "Tajawal", "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", sans-serif;
  --font-ui: var(--ar); --font-cute: var(--ar); --font-round: var(--ar);
  --font-display: "Cairo", Impact, "Segoe UI", Tahoma, sans-serif;
}
html[lang=ar] body, html[lang=ar] button { font-family: var(--ar); }
html[lang=ar] #stage * { letter-spacing: 0 !important; }
html[dir=rtl] canvas, html[dir=rtl] .ww-hostbox, html[dir=rtl] .hud-bar, html[dir=rtl] .hud-prog, html[dir=rtl] .hud-clock,
html[dir=rtl] input[type=range] { direction: ltr; }
html[lang=ar] .tt-title, html[lang=ar] .tt-title * { direction: ltr; }          /* the logo stays the logo */
html[lang=ar] .tt-title .tt-sub { direction: rtl; }
html[lang=ar] .sm-rows .v { text-align: left; }
html[lang=ar] .ww-cmd .w, html[lang=ar] .ww-banner, html[lang=ar] .cd-day, html[lang=ar] .sm-wrap h2, html[lang=ar] .hud-day b, html[lang=ar] .crd-roll .big { font-weight: 900; }

/* ---------- settings: two columns in landscape so the longer list fits 720 ---------- */
.ov-card.set-card { max-height: calc(100% - 24px); overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; row-gap: 8px; min-width: 860px; padding-top: 20px; padding-bottom: 20px; }
.ov-card.set-card > h2 { margin: 0; font-size: 38px; }
.ov-card.set-card > h2, .ov-card.set-card > .btns, .ov-card.set-card > h4 { grid-column: 1 / -1; }
.ov-card.set-card > h4 { margin: 6px 0 0; font: 900 14px var(--font-cute, var(--font-ui)); letter-spacing: .14em; color: #ff9fc2; }
.set-lang { display: flex; gap: 8px; }
.set-lang button { min-width: 76px; padding: 8px 12px; font: 800 16px var(--font-ui); }
.set-lang button[aria-pressed=true] { background: linear-gradient(#ffb0cf, #ff86b4); }
.set-lang button[lang=ar] { font-family: "Cairo", "Tajawal", "Segoe UI", Tahoma, sans-serif; }
html.portrait .ov-card.set-card { grid-template-columns: 1fr; min-width: 0; width: 680px; transform: none; max-height: calc(100% - 60px); }
html.portrait .ov-card.set-card .row { font-size: 21px; } html.portrait .ov-card.set-card .row small { font-size: 15px; }
html.portrait .ov-card.set-card input[type=checkbox] { width: 30px; height: 30px; }

/* ---------- larger text ---------- */
html.a11y-big .ov-card, html.a11y-big .sm-wrap, html.a11y-big .vm-wrap, html.a11y-big .toast, html.a11y-big .cd-wrap { zoom: 1.2; }
html.a11y-big .ov-card.set-card { zoom: 1.08; }
html.a11y-big #hud { zoom: 1.12; }
html.a11y-big .tt-menu { zoom: 1.15; }
html.a11y-big .hm-card .ds, html.a11y-big .hm-note, html.a11y-big .hm-forecast { font-size: 1.15em; }
html.a11y-big .crd-roll { font-size: 1.2em; }
html.portrait.a11y-big #hud { zoom: 1.08; }

/* ---------- bigger touch targets ---------- */
html.a11y-touch #stage button { min-height: 60px; min-width: 60px; }
html.a11y-touch .btn { padding: 16px 26px; font-size: 1.1em; }
html.a11y-touch .ov-card input[type=checkbox] { width: 34px; height: 34px; }
html.a11y-touch .ov-card input[type=range] { height: 34px; }
html.a11y-touch .hud-pause { transform: scale(1.35); transform-origin: top right; }

/* ---------- colorblind-safe cues: blue = good, orange = bad, and every cue also has a shape ---------- */
html.a11y-cb { --good: #2f7fd6; --bad: #e07a10; --calm: #5aa7ff; }
html.a11y-cb .sm-rows .v.good, html.a11y-cb .sm-ledger b.down, html.a11y-cb .hud-pop.down, html.a11y-cb .hm-result .big.down, html.a11y-cb .mg-ok { color: #3d8fe8 !important; }
html.a11y-cb .sm-rows .v.bad, html.a11y-cb .sm-ledger b.up, html.a11y-cb .hud-pop.up, html.a11y-cb .hm-result .big.up, html.a11y-cb .mg-bad { color: #f08a1c !important; }
html.a11y-cb .sm-rows .v.good::before, html.a11y-cb .mg-ok::before, html.a11y-cb .toast.good::before { content: '\2713\00a0'; }
html.a11y-cb .sm-rows .v.bad::before, html.a11y-cb .mg-bad::before, html.a11y-cb .toast.bad::before { content: '\2717\00a0'; }
html.a11y-cb .sm-ledger b.down::before, html.a11y-cb .hud-pop.down::before, html.a11y-cb .hm-result .big.down::before { content: '\25BC\00a0'; font-size: .7em; vertical-align: .15em; }
html.a11y-cb .sm-ledger b.up::before, html.a11y-cb .hud-pop.up::before, html.a11y-cb .hm-result .big.up::before { content: '\25B2\00a0'; font-size: .7em; vertical-align: .15em; }
html.a11y-cb .toast.good { border-color: #3d8fe8 !important; } html.a11y-cb .toast.bad { border-color: #f08a1c !important; }
html.a11y-cb .wk-card.done { border-color: #3d8fe8; }
html.a11y-cb .ww-heart.lost { opacity: .35; filter: grayscale(1); }

/* ---------- credits roll (js/credits.js) ---------- */
.crd { position: absolute; inset: 0; pointer-events: auto; overflow: hidden; background: #ffe9f1; z-index: 6; animation: nbf-fade .6s ease both; }
.crd canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.crd-mask { position: absolute; top: 0; bottom: 0; left: 50%; width: 640px; transform: translateX(-50%); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 14%, #000 86%, transparent 100%); }
.crd-roll { position: absolute; left: 0; right: 0; top: 0; text-align: center; color: #3a2433; font-family: var(--font-cute, var(--font-ui)); will-change: transform; }
.crd-roll section { margin: 0 auto 96px; padding: 0 20px; }
.crd-roll h3 { margin: 0 0 12px; font: 900 18px var(--font-cute, var(--font-ui)); letter-spacing: .3em; color: #ff4f86; }
.crd-roll .big { font: 400 64px/1.05 var(--font-display); color: #fff; -webkit-text-stroke: 3px #3a2433; paint-order: stroke fill; text-shadow: 0 5px 0 #3a2433; }
.crd-roll .nm { font: 900 30px/1.2 var(--font-cute, var(--font-ui)); }
.crd-roll .ds { font: 700 17px/1.45 var(--font-ui); color: #7a5068; margin-bottom: 14px; }
.crd-roll .logo { font: 400 92px/0.9 var(--font-display); color: #ff6f9a; -webkit-text-stroke: 4px #3a2433; paint-order: stroke fill; text-shadow: 0 7px 0 #3a2433; direction: ltr; }
.crd-roll .heart { display: inline-block; width: 64px; height: 64px; margin-top: 14px; }
.crd-ui { position: absolute; top: 18px; right: 18px; display: flex; gap: 10px; align-items: center; }
html[dir=rtl] .crd-ui { right: auto; left: 18px; }
html.portrait .crd-ui { top: 96px; }   /* below the achievement toasts that can pop during the roll */
.crd-ui small { font: 800 13px var(--font-ui); color: #a0708a; letter-spacing: .08em; }
html.portrait .crd-mask { width: 680px; top: 300px; bottom: 300px; }
html.portrait .crd-roll .big { font-size: 58px; }

/* title: CREDITS pill under INTRO */
.tt-credits { top: 84px; }
html.portrait .tt-credits { top: 104px; }

/* RTL: signed numbers keep their sign in front (−8.0, +3, 45%) */
html[dir=rtl] .sm-ledger b, html[dir=rtl] .sm-rows .v, html[dir=rtl] .hud-pop, html[dir=rtl] .hm-card .ft .st, html[dir=rtl] .hm-result .big,
html[dir=rtl] .hud-smain b, html[dir=rtl] .cd-stress { direction: ltr; unicode-bidi: isolate; }
html[dir=rtl] .tt-menu button small, html[dir=rtl] .tt-menu .pg-galbtn small { margin-left: 0; margin-right: 12px; }   /* gap between the label and its tag in RTL */
html[dir=rtl] .tt-menu .md-row button small { margin-right: 0; }