/* Base + shared components. Logical properties only, so RTL locales flip for free.
   Shape rule (one system): containers and buttons cut two opposite corners at 45deg;
   icon frames are the diamond "seal" from the logo; character frames are arches. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body { background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.65 var(--font-body); overflow-x: hidden; text-rendering: optimizeLegibility; }
/* fixed grain over everything (never on a scrolling element) */
body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--copper-300); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: var(--sp-4); top: -60px; z-index: var(--z-drawer); padding: var(--sp-2) var(--sp-4); background: var(--copper-500); color: var(--night-950); font-weight: 600; }
.skip-link:focus { top: var(--sp-3); }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
/* direction glyphs (sign in/out): the sprite holds a mirrored twin, the page shows the one for its direction (never a CSS flip) */
html[dir="rtl"] .icon-ltr, html:not([dir="rtl"]) .icon-rtl { display: none; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sp-9) calc(var(--sp-9) + var(--sp-4)); }
.section-title { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.section-lead { color: var(--text-2); max-width: 52ch; }
.eyebrow { display: block; margin-bottom: var(--sp-3); color: var(--copper-300); font: 500 .875rem/1 var(--font-body); letter-spacing: .02em; }

/* ---------- buttons: the owner's FunWorld plates (assets/img/brand/btn-*.webp, from FunWorld/Btn-*.png) ----------
   9-slice: the ornate ends stay whole (slice 40 of the 112 px plate), the middle stretches to any label, in any language */
.btn { --h: 52px; --plate: url("../img/brand/btn-gold.webp"); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  height: var(--h); padding-inline: var(--sp-4); border-style: solid; border-width: 0 calc(var(--h) * .36);
  font: 600 1rem/1 var(--font-body); letter-spacing: .01em; white-space: nowrap;
  transition: filter var(--t-base) var(--ease); }
.btn-primary, .btn-download, .btn-green { padding-inline: calc(var(--h) * .42); border-image: var(--plate) 0 40 fill / 0 calc(var(--h) * .36) stretch;
  filter: drop-shadow(0 8px 12px rgba(4, 7, 16, .65)); }
/* labels: bold body face (Marcellus has no bold and read faint on gold), a size up, pressed into the plate */
.btn-primary, .btn-download, .btn-green { font: 600 1.0625rem/1 var(--font-body); letter-spacing: .01em; }
.btn-lg.btn-primary, .btn-lg.btn-download, .btn-lg.btn-green { font-size: 1.1875rem; }

/* gold plate labels (owner 2026-10-16: "clearer"): cream letters with a dark brown outline, like the red and green plates (dark ink drowned in the gold texture) */
.btn-primary { color: #FFF7E0; text-shadow: 0 0 2px #3A1E00, 0 1px 2px #2A1400, 0 0 7px rgba(50, 25, 0, .9); }
.btn-download { --plate: url("../img/brand/btn-red.webp"); color: #FFF1D2; text-shadow: 0 1px 0 rgba(70, 8, 0, .9), 0 0 10px rgba(255, 190, 90, .35); }
.btn-green { --plate: url("../img/brand/btn-green.webp"); color: #F2FFF4; text-shadow: 0 1px 2px rgba(0, 40, 10, .8); }
.btn-primary:hover, .btn-download:hover, .btn-green:hover { filter: brightness(1.1) drop-shadow(0 10px 14px rgba(4, 7, 16, .7)); translate: 0 -1px; }
.btn:active { translate: 0 2px; }
.btn:focus-visible { outline: 2px solid var(--copper-300); outline-offset: 3px; }
.btn-lg { --h: 60px; padding-inline: var(--sp-7); font-size: 1.0625rem; }
.btn .icon { width: 22px; height: 22px; }
.link { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--copper-700); text-decoration-thickness: 1px; text-underline-offset: 6px;
  transition: text-decoration-color var(--t-base), color var(--t-base); }
.link:hover { color: var(--copper-300); text-decoration-color: var(--copper-300); }

/* ---------- type tag (news category): the owner's brush strokes (assets/img/brand/tag-*.webp) ---------- */
.tag { display: inline-block; min-width: 92px; padding: 6px 16px 7px; text-align: center; font: 600 .75rem/1 var(--font-body); letter-spacing: .02em;
  color: #FFF6E8; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); background: center / 100% 100% no-repeat; }
.tag-event { background-image: url("../img/brand/tag-event.webp"); color: #2A1704; text-shadow: none; }
.tag-update { background-image: url("../img/brand/tag-update.webp"); color: #2A1704; text-shadow: none; }
.tag-news { background-image: url("../img/brand/tag-news.webp"); }
.tag-maintenance { background-image: url("../img/brand/tag-maintenance.webp"); }
.tag-notice { background-image: url("../img/brand/tag-notice.webp"); }
.tag-special { background-image: url("../img/brand/tag-special.webp"); }

/* ---------- medallion (icon frame): the FW mark's build, gold rim, deep-blue face, gold glyph ---------- */
.medal { --m: 56px; box-sizing: border-box; display: inline-grid; place-items: center; width: var(--m); height: var(--m); flex: none; border-radius: 50%; color: #F4C65C;
  border: 2px solid #E2A93B; background: radial-gradient(circle at 50% 30%, #2A55B8 0%, #15306F 55%, #0C1C46 100%);
  box-shadow: 0 0 0 2px #3A2408, 0 0 0 3px rgba(226, 169, 59, .55), 0 10px 20px -6px rgba(4, 7, 16, .8), inset 0 2px 6px rgba(255, 255, 255, .12);
  transition: box-shadow var(--t-base), color var(--t-base); }
/* no filter / transform on the glyph: either one turns the SVG into a low-res bitmap (the "pixelated" icons);
   the thin Phosphor outline gets a little stroke of its own colour so it stays smooth at small sizes */
.medal .icon { width: 50%; height: 50%; stroke: currentColor; stroke-width: 6; stroke-linejoin: round; shape-rendering: geometricPrecision; }
a.medal:hover, a:hover > .medal { color: #FFE08A; box-shadow: 0 0 0 2px #3A2408, 0 0 0 3px rgba(255, 210, 120, .9), 0 0 14px 2px rgba(226, 169, 59, .35), inset 0 2px 6px rgba(255, 255, 255, .16); }
.medal:focus-visible { outline: 2px solid var(--copper-300); outline-offset: 5px; }
.socials .medal { --m: 40px; }

/* ---------- diamond seal (icon frame) ---------- */
.seal { --seal: 48px; --seal-ring: var(--line); --seal-fill: var(--night-800); position: relative; isolation: isolate;
  display: inline-grid; place-items: center; width: var(--seal); height: var(--seal); flex: none; color: var(--text-2); transition: color var(--t-base); }
.seal::before, .seal::after { content: ""; position: absolute; z-index: -1; transform: rotate(45deg); transition: background var(--t-base), border-color var(--t-base); }
.seal::before { inset: 14.6%; border: 1px solid var(--seal-ring); }
.seal::after { inset: 23%; background: var(--seal-fill); }
.seal .icon { width: 40%; height: 40%; }
a:hover > .seal, button:hover > .seal, .seal:hover { --seal-ring: var(--copper-500); color: var(--text); }
a:hover > .seal::before, button:hover > .seal::before, .seal:hover::before { transform: rotate(135deg); }
.seal:focus-visible { outline: 0; --seal-ring: var(--copper-300); color: var(--text); }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: var(--z-header); transition: background var(--t-base), box-shadow var(--t-base); }

/* the whole top bar is one translucent framed strip */
.header-row { display: flex; align-items: center; gap: var(--sp-6); height: 64px; margin-top: 12px; padding-inline: 14px 8px; border-radius: 2px;
  background: rgba(11, 17, 36, .42); box-shadow: inset 0 0 0 1px rgba(246, 238, 223, .12); backdrop-filter: blur(10px);
  transition: background var(--t-base), box-shadow var(--t-base); }
.site-header.is-solid .header-row { background: rgba(11, 17, 36, .9); box-shadow: inset 0 0 0 1px rgba(246, 238, 223, .16), 0 12px 30px -12px rgba(4, 7, 16, .8); }
.logo { display: flex; align-items: center; gap: var(--sp-3); }
.logo-mark { display: block; width: auto; height: 46px; filter: drop-shadow(0 2px 6px rgba(4, 7, 16, .8)); }
.logo-img { display: block; width: auto; height: 44px; filter: drop-shadow(0 2px 6px rgba(4, 7, 16, .7)); }
.logo-word { font: 1.375rem/1 var(--font-display-latin); letter-spacing: .06em; color: var(--copper-300); white-space: nowrap; }
.nav { display: none; gap: 2px; }
.nav a { position: relative; display: flex; align-items: center; height: 64px; padding-inline: 12px; color: var(--text-2); font-weight: 500; font-size: .9375rem; transition: color var(--t-base); }
.nav a:hover, .nav a[aria-current] { color: var(--text); }
.nav a[aria-current]::after { content: ""; position: absolute; inset: auto 12px -1px; height: 2px; background: var(--copper-500); }
.header-tools { display: flex; align-items: center; gap: var(--sp-4); margin-inline-start: auto; }
/* the header CTA: small plate, crisp text (owner 2026-10-16: smaller and clearer) */
.header-tools .btn { --h: 38px; padding-inline: 18px; font-size: .9375rem; font-weight: 700; letter-spacing: 0; }
.header-tools .btn-primary { color: #FFF7E0; text-shadow: 0 0 2px #3A1E00, 0 1px 2px #2A1400, 0 0 7px rgba(50, 25, 0, .9); }
.header-login { display: none; color: var(--text-2); font-weight: 500; font-size: .9375rem; transition: color var(--t-base); }
.header-login:hover { color: var(--text); }
.header-login[aria-current], .footer-bottom a[aria-current] { color: var(--copper-300); }
.lang { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 6px; height: 44px; color: var(--text-2); font-size: .875rem; font-weight: 500; }
.lang-btn:hover { color: var(--text); }
.lang-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 200px; padding: var(--sp-2); background: var(--night-800); list-style: none;
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 48px rgba(4, 7, 16, .55);
  opacity: 0; visibility: hidden; translate: 0 -6px; transition: opacity var(--t-base) var(--ease), visibility var(--t-base); }
.lang.is-open .lang-menu { opacity: 1; visibility: visible; translate: 0 0; }
.lang-menu a { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 9px 12px; color: var(--text-2); font-size: .9375rem; }
.lang-menu a:hover { background: var(--night-700); color: var(--text); }
.lang-menu a[aria-current] { color: var(--copper-300); }
.lang-menu .soon { font-size: .75rem; color: var(--text-3); }
.burger { width: 44px; height: 44px; display: grid; place-items: center; color: var(--text); }
.burger .icon { width: 26px; height: 26px; }
@media (min-width: 1024px) { .nav, .header-login { display: inline-flex; } .burger { display: none; } }
@media (max-width: 479px) { .header-tools .btn { display: none; } }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: grid; grid-template-columns: 1fr min(86vw, 360px); visibility: hidden; }
.drawer-scrim { background: rgba(7, 11, 23, .72); opacity: 0; transition: opacity var(--t-base); }
.drawer-panel { position: relative; background: var(--night-800); padding: var(--sp-8) var(--sp-6) var(--sp-6); display: grid; align-content: start; gap: var(--sp-1);
  translate: 100% 0; }
[dir="rtl"] .drawer { grid-template-columns: min(86vw, 360px) 1fr; }
[dir="rtl"] .drawer-panel { order: -1; translate: -100% 0; }
.drawer.is-open { visibility: visible; }
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer.is-open .drawer-panel { translate: 0 0; }
.drawer-close { position: absolute; top: var(--sp-4); inset-inline-end: var(--sp-4); width: 40px; height: 40px; display: grid; place-items: center; }
.drawer-close .icon { width: 24px; height: 24px; }
.drawer-panel > a:not(.btn) { padding: 14px 0; color: var(--text); font: 1.375rem var(--font-head); }
.drawer-panel .btn { margin-top: var(--sp-5); }

/* ---------- footer ---------- */
.site-footer { background: var(--night-950); padding-block: var(--sp-8) var(--sp-6); box-shadow: inset 0 1px 0 var(--line); }
.footer-top { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .footer-top { grid-template-columns: auto 1fr auto; } }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
@media (min-width: 900px) { .footer-nav { justify-content: center; } }
.footer-nav a { color: var(--text-2); font-weight: 500; transition: color var(--t-base); }
.footer-nav a:hover { color: var(--text); }
.socials { display: flex; gap: var(--sp-4); }
.socials .seal { --seal: 44px; --seal-fill: var(--night-950); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between; margin-top: var(--sp-7); padding-top: var(--sp-5);
  box-shadow: inset 0 1px 0 var(--line); color: var(--text-3); font-size: .875rem; }
.footer-bottom nav { display: flex; gap: var(--sp-5); }
.footer-bottom a:hover { color: var(--text-2); }

/* ---------- image protection (deterrent; docs/IMAGE_PROTECTION.md) ---------- */
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.no-save { position: relative; }
.no-save::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* Arabic letters join: any letter-spacing breaks the joins and stretches the Kufi headings */
:lang(ar) * { letter-spacing: 0 !important; }

/* never wider than the screen: media scale down, a plate button may wrap its label on a narrow phone */
img, svg, video { max-width: 100%; }
@media (max-width: 420px) { .btn-lg { --h: 54px; } .btn-lg.btn-primary, .btn-lg.btn-download, .btn-lg.btn-green { font-size: 1.0625rem; } .btn { max-width: 100%; } }

/* Arabic plate labels (owner 2026-10-16: the body font looked wrong on the gold plate): the heading face, engraved */
:lang(ar) .btn-primary, :lang(ar) .btn-download, :lang(ar) .btn-green { font-family: "El Messiri", var(--font-body); font-weight: 600; font-size: 1.125rem; line-height: 1; padding-bottom: 2px; }
:lang(ar) .btn-primary { color: #FFF7E0; text-shadow: 0 0 2px #3A1E00, 0 1px 2px #2A1400, 0 0 7px rgba(50, 25, 0, .9); }
:lang(ar) .header-tools .btn { font-size: 1.0625rem; }

/* motion after the rules it extends (a block earlier in the file would lose the cascade) */
@media (prefers-reduced-motion: no-preference) {
  /* the button plates lift and press, the seal diamond turns: animated only for visitors who allow motion */
  .btn { transition: translate var(--t-fast) var(--ease), filter var(--t-base) var(--ease); }
  .seal::before, .seal::after { transition: transform var(--t-base) var(--ease), background var(--t-base), border-color var(--t-base); }
  /* the language menu drops in and the phone drawer slides in */
  .lang-menu { transition: opacity var(--t-base) var(--ease), translate var(--t-base) var(--ease), visibility var(--t-base); }
  .drawer-panel { transition: translate var(--t-base) var(--ease); }
}

/* ---------- phones (owner #27363 "improve the whole site on phones"): every control a finger hits is at least 44 x 44 px
   (WCAG 2.5.5). Touch screens and narrow windows only, so the desktop layout keeps its tight lines ---------- */
.drawer-close { width: 44px; height: 44px; }
@media (pointer: coarse), (max-width: 899px) {
  .lang-btn { min-width: 44px; justify-content: center; }
  .tab { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .footer-nav { gap: 0 var(--sp-5); }
  .footer-nav a, .footer-bottom nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .footer-bottom { align-items: center; }
}

/* owner 2026-10-21: English only for now (tools/build_pages.py ARABIC = False): no language menu */
[data-only-en] .lang { display: none; }