/* oz-theme.css — the Occupy Arena design system, applied (DESIGN.md).
 *
 * WHY (26 Sep 2026). The owner: «شكل الموقع حاسه قديم وباين انه AI مش
 * بريميوم». Looked at as a visitor, page by page, the site spent its energy on
 * decoration: navy with purple, blue and teal glows drifting under every page, a
 * pointer spotlight of dots, gradient text flowing through three colours, a
 * glowing bar before every section title, six accent colours, rainbow icons,
 * buttons with a gradient and a halo. Those are the look every generated site
 * has. The venue is dark, exact and physical; so is this.
 *
 * WHAT IT DOES. It is loaded AFTER a page's own <style>, so it is the last word
 * on the tokens and on the decorative layer, and one file changes every page
 * that links it (the colour block had been copied into nine pages). It removes
 * decoration; it never removes a feature: the scope and its eye, the first-run
 * questions, the booking strip, every section, stay where they were.
 *
 * The rules and the reasons are in DESIGN.md at the repo root; the tokens there
 * and here are the same numbers.
 */

/* ---------------------------------------------------------------- tokens */
:root{
  --bg:#0C0E12;               /* canvas: every page floor */
  --surface:#14171C;          /* panels, cards */
  --surface-2:#1B1F26;        /* a sheet or menu on a panel */
  --glass:#14171C;            /* the old translucent panel fill, now the surface */
  --glass2:#1B1F26;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  --hi:#F2F4F7; --mid:#B4BCC8; --lo:#8A93A1;
  --cyan:#34E0F0;             /* the signal: the ONE accent */
  --signal:#34E0F0; --signal-press:#22C7D6; --on-signal:#051B1F;
  --signal-wash:rgba(52,224,240,.10);
  /* THE SHAPES (DESIGN.md radii): a panel is 16, a field 12. Pages declared
     18 and 20 for panels and 13 or 14 for fields; this file loads after their
     own <style>, so this is their answer. */
  --radius:16px; --radius-sm:12px; --r:16px;
  /* THE SAME TOKENS UNDER THE NAMES PAGES GAVE THEM. Most already held these
     values; /live's --panel and /agents' --card were still navy, and two
     pages' cards were the old translucent glass. One value each. */
  --panel:var(--surface); --card:var(--surface); --surface-raised:var(--surface-2);
  --txt:var(--hi); --accent:var(--signal);
  --ok:#3BE0A0; --green:#3BE0A0; --line2:var(--line-2);
}
html,body{background:var(--bg)}
/* THE FOCUS RING, ONE FOR EVERY PAGE (7 Oct 2026). A page that drew none showed the browser's own
   (/join did): the venue's ring is the signal colour, two pixels out. :where() keeps it at zero
   specificity, so a page that draws its own ring still has the last word. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ---------------------------------------------------- native controls */
/* A native select and its list in the theme's colours: seven pages filled
   them navy (#1B2338) and four drew the chosen option gold (#FFCE4A, which
   DESIGN.md keeps for status: hold, low battery). Selected is the signal.
   A page's own class for a field still wins where it sets its own fill. */
select{background-color:var(--surface);color:var(--hi)}
select option,select optgroup{background-color:var(--surface-2);color:var(--hi)}
select option:checked,select option:hover{background-color:var(--surface-2);color:var(--signal)}
input::placeholder,textarea::placeholder{color:var(--lo);opacity:1}   /* the pages' own rule names input and textarea */

/* -------------------------------------------------------------- scrollbars */
/* Owner, 27 Sep: «السكرول بقا شكلها وحش». With no rule, Windows draws its own
   light grey bar down the side of a dark page: the one bright stripe on the
   screen, brighter than any button. The bar is now the canvas with a quiet thumb
   in the hairline colour; it says where you are and nothing else, and it is
   never the signal colour (the accent is for what you press).
   Standard properties first (Chrome 121+, Edge, Firefox); the -webkit- pieces
   are what Safari reads. color-scheme makes every native control dark too. */
:root{color-scheme:dark}
html{scrollbar-width:thin;scrollbar-color:var(--line-2) var(--bg)}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background-color:var(--line-2);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.28)}
.daychips::-webkit-scrollbar-thumb,.daychips::-webkit-scrollbar-thumb:hover{background-color:var(--line-2)!important}
html .daychips{scrollbar-color:var(--line-2) transparent}

/* ------------------------------------------ the decorative layer, removed */
/* Three colour fields drifting under the page, a dot spotlight chasing the
   pointer, a dark vignette over everything: ambience, not information. */
.aurora,.dotfield,.vignette{display:none!important}

/* Gradient text flowing through cyan, blue and violet: the wordmark's ARENA is
   the signal colour, flat; the slogan is quiet secondary type. */
.grad{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  color:var(--signal)!important;-webkit-text-fill-color:currentColor;animation:none!important}
.slogan.grad{color:var(--mid)!important}

/* A section's title is enough. The small tracked label with a glowing bar sat
   above all twenty of them — the most generated-looking rhythm there is. */
.section .eyebrow{display:none!important}
.eyebrow::before{display:none!important}
.eyebrow{color:var(--lo);letter-spacing:0;text-transform:none;font-size:14px}

/* Section backgrounds that were glows. */
#experience{background:none!important}

/* ----------------------------------------------------------------- buttons */
/* Flat signal, dark label, no halo. The press still moves (oz-press). */
.btn-primary{background:var(--signal)!important;color:var(--on-signal)!important;box-shadow:none!important}
.btn-primary:hover{background:var(--signal-press)!important;box-shadow:none!important}
.btn-ghost{background:transparent!important;border:1px solid var(--line-2)!important;color:var(--hi)!important}
.btn-ghost:hover{border-color:var(--hi)!important}

/* ----------------------------------------------------------- panels, cards */
/* A panel is the surface and a hairline. No glass, no glow, no gradient fill,
   no light sweeping across it on hover. */
.door,.firstrun,.modal-box,.tonight,.vestcard,.map-card,.ref-card,.mm-form{
  background:var(--surface)!important;border:1px solid var(--line)!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.modal-box{background:var(--surface-2)!important}
.oz-sheen::before{display:none!important}

/* One icon colour at rest. Several colours in one row read as a sticker sheet. */
.d-ic,.mode-ico,.hud-ic,.bc-ic,.ozi-i{color:var(--mid)!important}
.btn .ozi-i{color:inherit!important}

/* Round avatars were a blue-violet gradient. */
.av,.pav,.rev .who .av{background:var(--surface-2)!important;color:var(--hi)!important}

/* ------------------------------------------------------------------- hero */
/* The scope and its eye stay: they are the venue's own. The HUD dressing
   around them goes: corner brackets, tracked caps, coordinates and a measured
   ground size. The address and "a match is on" are facts a visitor uses, so
   they stay, as plain small type. */
.scopebox::before{display:none!important}
#hudCoord{display:none!important}
.hud-read{font:600 13px/1.3 inherit!important;letter-spacing:0!important;text-transform:none!important;color:var(--lo)!important}
.hud-read bdi{font:700 13px/1 'Rajdhani',system-ui,sans-serif!important;letter-spacing:0!important}
.hud-live.on .dot{box-shadow:none!important}
#scopeWrap,#scopeWrap.glow{filter:none!important}
/* The eye's iris was a second accent, blue (#4F8CFF), and its lids and socket
   the old navy. It is the signal colour now, like everything else that looks
   back at you, and the lids close in the canvas colour. SVG paint set by
   attribute gives way to any stylesheet rule, so the markup is untouched. */
#eyeball>circle:first-child{fill:#1FB8C8}
#irisG stop:first-child{stop-color:#A6F3FA}
#irisG stop:last-child{stop-color:#139FAE}
#scope circle[stroke="#4F8CFF"]{stroke:var(--signal);opacity:.35}
#scope ellipse[fill="#0c1424"]{fill:#0E1116}
#lidTop,#lidBot{fill:var(--bg)}

/* The numbers strip ("2 arenas · 18 modes · ∞ matches") is the stock row of
   every generated landing page, and ∞ is not a number the venue has. */
.stats-row{display:none!important}

/* -------------------------------------------------------------------- nav */
/* One solid bar on the canvas colour with a hairline under it: no blur, no
   navy tint. The shop link was gold, a second accent in a row of equals. The
   sign-in chip is drawn by oz-id.js at run time, so these carry !important. */
nav{background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid var(--line)!important}
.nav-rewards{color:inherit!important;font-weight:inherit!important}
#ozIdChip{border-color:var(--line-2)!important;background:transparent!important;color:var(--hi)!important}
#ozIdChip:hover{background:var(--surface)!important;border-color:var(--hi)!important}
#ozIdChip .oz-avc{background:var(--surface-2)!important;color:var(--hi)!important;box-shadow:none!important}

/* The vest card's title was gold Orbitron in capitals: a second accent, and the
   wordmark's face on a label. It is a card title (Cairo 700, main ink). The
   reading-progress line along the top was a three-colour gradient; it is the
   signal colour, flat. (27 Sep 2026, found photographing the English page.) */
.vestcard h4{font:700 16px/1.3 'Cairo',system-ui,sans-serif!important;letter-spacing:0!important;
  color:var(--hi)!important;text-transform:none!important}
#progress{background:var(--signal)!important}

/* ------------------------------------------------- Arabic is never spaced */
/* DESIGN.md: letter-spacing is ALWAYS 0 in Arabic, because it breaks the
   joining. Pages set tracked labels in their own styles (the Brand Guardian
   found them on shop, control, booking, live, profile and the home footer,
   5 Oct 2026), so this answers once for all of them on an Arabic page. A run
   marked left-to-right (a code, a number in <bdi>) keeps its own spacing. */
html[dir="rtl"] body *:not([dir="ltr"]):not(bdi):not(code):not(kbd):not(samp){letter-spacing:0!important}

/* ------------------------------------------------------------- headlines */
/* Owner, 27 Sep: «لسه حاسس الواجهه محتاجه حاجه تخليها تنطق شوية كدا واحسها
   مريحه». The voice is in the type: every section headline, in both languages,
   is set in Changa (a compact Kufi, squared like the kit; oz-fonts.css says why
   it beat six others). Bold, never letter-spaced, never capitals. Titles,
   labels and reading text stay Cairo; OCCUPY ARENA stays Orbitron, because a
   wordmark is not a headline. The page's own rules set h2 in Cairo or Orbitron
   with !important, so this names body to outrank them. */
body h2,body.ar h2{font-family:var(--oz-headline,'Changa','Cairo',system-ui,sans-serif)!important;
  font-weight:700!important;letter-spacing:0!important;text-transform:none!important}
/* A PAGE'S OWN TITLE IN ARABIC is a headline too (5 Oct 2026, the finish-gate review): /howto set
   «اتعلم الزون في 5 دقايق» in Orbitron, which has no Arabic, so it fell to the system font. The
   wordmark keeps Orbitron. */
html[dir="rtl"] body h1:not(.wordmark){font-family:var(--oz-headline,'Changa','Cairo',system-ui,sans-serif)!important;
  letter-spacing:0!important;text-transform:none!important}
.h-title{line-height:1.2}

/* Reading text is Cairo REGULAR now that the face exists (it used to fall to
   the 600 cut, a shade heavy for a paragraph). Labels and titles set their own
   weights and keep them. */
body.ar{font-weight:400}

/* ----------------------------------------------------------- page titles */
/* A page's two-tone title in the header ("إزاي تلعب", "متجر المكافآت") is
   written in the page's language; in Arabic it is set in the Arabic face, not
   in the wordmark's Orbitron, and never letter-spaced. The venue's wordmark
   itself (OCCUPY ARENA) is untouched. */
html[lang="ar"] .brand [data-i18n],[dir="rtl"] .brand [data-i18n]{font-family:'Cairo',system-ui,sans-serif!important;letter-spacing:0!important}