/* ============================================================================
   RobloxHub — Arabic, right to left
   ----------------------------------------------------------------------------
   Design brief: simple, no unusual colours, images carry the interest.

   So: white surfaces, a light grey page, thin grey borders, and one restrained
   blue used only for links and primary buttons. No accent bars, no offset
   shadows, no background pattern, no gradients. The previous version leaned on
   an orange accent and a hard "poster" shadow; both are gone.

   RTL is done with logical properties throughout -- margin-inline-start,
   padding-inline, inset-inline, border-inline-start. There is deliberately not a
   single `left:` or `right:` in the layout, so direction is decided once by the
   `dir` attribute and every component follows. Physical properties would each
   need their own RTL override, which is how mirrored layouts end up subtly wrong.
   ========================================================================= */

:root {
  --ink: #1a1d21;
  --ink-2: #4a5158;
  --ink-3: #7a838c;
  --paper: #ffffff;
  --surface: #f7f8fa;
  --surface-2: #eef0f3;
  --line: #e2e5ea;
  --line-2: #cfd4da;

  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-wash: #eff4ff;
  --ok: #157347;
  --warn-bg: #fff8e6;
  --warn-line: #e0b400;

  --radius: 10px;
  --radius-sm: 6px;

  --font: "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --gap: 20px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 16px/1.8 var(--font);
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4 { line-height: 1.35; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--paper);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus { inset-inline-start: 0; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ header */

.site-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 60;
}

.head-row { display: flex; align-items: center; gap: 14px; min-height: 62px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}

.brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent);
  flex: 0 0 auto;
}

.brand-text { font-size: 19px; font-weight: 700; }

.main-nav {
  display: flex;
  gap: 2px;
  margin-inline-start: auto;
  flex-wrap: wrap;
}

.main-nav a {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-2);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
}

.main-nav a:hover { background: var(--surface); color: var(--ink); }
.main-nav a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-dark); font-weight: 600; }

.icon-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink-2);
  flex: 0 0 auto;
  padding: 0;
}

.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--surface); color: var(--ink); }
.nav-toggle { display: none; }

.search-bar { display: none; padding-bottom: 14px; }
.search-bar.is-open { display: block; }

.search-bar input,
.search-page input {
  width: 100%;
  font: 16px var(--font);
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: inherit;
}

.search-bar input:focus,
.search-page input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* -------------------------------------------------------------------- cards */

.chip {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-dark);
  text-decoration: none;
  align-self: flex-start;
}

.chip.is-quiet { background: var(--surface-2); color: var(--ink-2); }

.meta {
  font-size: 13px;
  color: var(--ink-3);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: var(--gap);
}

.card,
.lead-card,
.mini {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.card:hover,
.lead-card:hover,
.mini:hover {
  border-color: var(--line-2);
  box-shadow: 0 2px 10px rgba(26, 29, 33, .07);
}

.card { display: flex; flex-direction: column; }

/* Covers are authored 16:9, so the ratio is declared and the image fills it
   without cropping. */
.card .shot,
.lead-card .shot,
.mini .shot { aspect-ratio: 16 / 9; background: var(--surface-2); }
.card .shot img,
.lead-card .shot img,
.mini .shot img { width: 100%; height: 100%; object-fit: cover; }

.card .body {
  padding: 15px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.card h3 { font-size: 17px; margin: 0; }
.card p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

.lead-card { display: block; }
.lead-card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.lead-card h2 { font-size: clamp(21px, 2.4vw, 27px); margin: 0; }
.lead-card p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

.mini { display: grid; grid-template-columns: 132px 1fr; gap: 0; align-items: stretch; }
.mini .shot { border-inline-end: 1px solid var(--line); }
.mini-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.mini h3 { font-size: 15.5px; margin: 0; }

/* --------------------------------------------------------------------- hero */

.hero { padding: 26px 0 6px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--gap);
  align-items: start;
}

.hero-side { display: grid; gap: 12px; }

/* ------------------------------------------------------------ section head */

.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 36px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.sec-head h2 { font-size: 19px; margin: 0; }
.sec-head .more { font-size: 14px; font-weight: 600; text-decoration: none; }
.sec-head .more:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ layout */

.page-body { padding: 24px 0 56px; }

.with-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 30px;
  align-items: start;
}

.rail { display: grid; gap: 18px; position: sticky; top: 80px; }

.rail-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.rail-box h2 {
  font-size: 15px;
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.rail-box ol { margin: 0; padding: 10px 16px 14px; padding-inline-start: 34px; }
.rail-box li { margin: 10px 0; font-size: 14.5px; }
.rail-box a { text-decoration: none; color: var(--ink); }
.rail-box a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ----------------------------------------------------------------- article */

.article-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px 30px;
}

.crumbs {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* The trailing item is the current page, so it is not a link and should not read
   as one. */
.crumbs > span:last-child {
  color: var(--ink-2);
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crumb-sep { color: var(--line-2); }

.article-head h1 {
  font-size: clamp(24px, 3.2vw, 34px);
  margin: 12px 0 12px;
}

.lede { font-size: 17px; color: var(--ink-2); margin: 0 0 14px; }

.article-head .meta { margin: 0 0 22px; }

.cover {
  margin: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.cover img { width: 100%; height: auto; }
.cover figcaption {
  font-size: 13px;
  color: var(--ink-3);
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.prose { font-size: 16.5px; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: 21px; margin-top: 1.8em; }
.prose h3 { font-size: 18px; margin-top: 1.5em; }
.prose ul, .prose ol { padding-inline-start: 26px; }
.prose li + li { margin-top: 6px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.prose code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 14.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  direction: ltr;
  display: inline-block;
}

.prose blockquote {
  margin: 1.6em 0;
  padding: 14px 18px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--accent);
}

.prose blockquote p { margin: 0; }

.spec-table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  background: var(--paper);
}

.spec-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table th,
.spec-table td {
  padding: 11px 14px;
  text-align: start;
  border-bottom: 1px solid var(--line);
}
.spec-table th { background: var(--surface); font-weight: 600; font-size: 14px; }
.spec-table tr:last-child td { border-bottom: 0; }

/* Codes are Latin strings inside Arabic prose: forced LTR so the characters do
   not reorder, which would make a code unusable. */
.code-cell { direction: ltr; text-align: start; font-family: "SFMono-Regular", Consolas, monospace; }

/* --------------------------------------------------------------- ad slots */

.ad-slot {
  --ad-h: 280px;
  --ad-h-mobile: 280px;
  display: block;
  margin: 26px 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* Height reserved before the ad loads, so the page does not shift. Layout
     stability is also what keeps a slot viewable, which is what CPM is priced
     against. */
  min-height: calc(var(--ad-h) + 24px);
}

.ad-label {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  padding: 6px 10px 0;
}

.ad-body { min-height: var(--ad-h); display: grid; place-items: center; }

.ad-slot.is-placeholder { background: var(--surface); border-style: dashed; }
.ad-placeholder-label { font-size: 13px; color: var(--ink-3); }

.ad-slot.is-sticky { position: sticky; top: 80px; }
.ad-slot.is-mobile-only { display: none; }

/* A 300x600 has no mobile form worth bidding on, so it is dropped rather than
   squeezed into a shape no advertiser buys. */
.ad-slot.is-desktop-only { display: block; }

.ad-anchor {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  margin: 0;
  min-height: 0;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  display: none;
}

.ad-anchor .ad-body { min-height: 60px; }

.ad-anchor .ad-dismiss {
  position: absolute;
  inset-inline-end: 6px;
  top: -28px;
  border: 1px solid var(--line-2);
  border-bottom: 0;
  background: var(--paper);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font: 500 12px var(--font);
  padding: 4px 12px;
  cursor: pointer;
  color: var(--ink-2);
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 16px var(--font);
  text-decoration: none;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}

.btn:hover { background: var(--accent-dark); color: #fff; }
.btn.is-wide { width: 100%; }
.btn.is-ghost { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.btn.is-ghost:hover { background: var(--surface); color: var(--ink); }

.btn[aria-disabled="true"] {
  background: var(--surface-2);
  color: var(--ink-3);
  cursor: not-allowed;
  pointer-events: none;
}

/* -------------------------------------------------------- call to action */

/* Separated from any ad above it by a labelled divider and enforced clearance.
   The placement policy prohibits ads that could be mistaken for a download link,
   so the real control sits in its own panel and looks like nothing else. */
.dl-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 40px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

.dl-sep::before, .dl-sep::after { content: ""; height: 1px; background: var(--line); flex: 1; }

.dl-panel {
  margin-top: 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px;
}

.dl-panel h2 { font-size: 19px; margin: 0 0 6px; }
.dl-panel .dl-note { margin: 0 0 16px; font-size: 15px; color: var(--ink-2); }

.dl-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.dl-facts div {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.dl-facts dt { font-size: 12px; color: var(--ink-3); margin: 0; }
.dl-facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; }

.dl-clear { height: 120px; }

/* ------------------------------------------------------ step (interstitial) */

.step-wrap { max-width: 720px; margin-inline: auto; }

.steps { display: flex; gap: 8px; margin-bottom: 22px; }

.step-pip {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

.step-pip.is-done { background: var(--accent-wash); color: var(--accent-dark); border-color: var(--accent-wash); }
.step-pip.is-now { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }

.step-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}

.step-card h1 { font-size: clamp(21px, 2.8vw, 27px); margin: 0 0 10px; }

.countdown-row { display: flex; align-items: center; gap: 16px; margin: 18px 0; }

.countdown {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: center;
}

.countdown-row p { margin: 0; font-size: 15px; color: var(--ink-2); }

.step-back { margin: 18px 0 0; font-size: 14.5px; }
.step-back a { text-decoration: none; }
.step-back a::before { content: "\2039\00a0"; }
.step-back a:hover { text-decoration: underline; }

/* The destination URL is Latin text inside an Arabic page: forced LTR so it reads
   correctly and can be checked before it is followed. */
.dest {
  direction: ltr;
  text-align: start;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13.5px;
  word-break: break-all;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  color: var(--ink-2);
}

.notice {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 14.5px;
  margin: 18px 0 0;
}

/* ------------------------------------------------------------------ footer */

.site-foot {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 32px 0 24px;
  margin-top: 36px;
}

.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 28px; }
.foot-brand { font-size: 17px; margin: 0 0 10px; }
.foot-grid h3 { font-size: 15px; margin: 0 0 12px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin: 8px 0; font-size: 14.5px; }
.foot-grid a { text-decoration: none; color: var(--ink-2); }
.foot-grid a:hover { color: var(--accent-dark); text-decoration: underline; }
.foot-blurb { font-size: 14.5px; color: var(--ink-2); margin: 0 0 10px; }

.foot-base {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ pager */

.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 34px 0 0; flex-wrap: wrap; }

.pager a, .pager span {
  border: 1px solid var(--line-2);
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 9px 15px;
  text-decoration: none;
  font-size: 14.5px;
  color: var(--ink);
}

.pager a:hover { background: var(--surface); }
.pager .is-current { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.pager .is-off { color: var(--ink-3); background: var(--surface); }

/* ----------------------------------------------------------------- search */

.search-page { max-width: 760px; }
.search-results { display: grid; gap: 12px; margin-top: 20px; }

.search-hit {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
  text-decoration: none;
  color: inherit;
}

.search-hit:hover { border-color: var(--line-2); }
.search-hit .chip { margin-bottom: 8px; }
.search-hit h3 { font-size: 16.5px; margin: 0 0 5px; }
.search-hit p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.search-none { color: var(--ink-2); }

/* ------------------------------------------------------------------ 404 */

.not-found { text-align: center; padding: 60px 0; }
.not-found .meta { justify-content: center; }
.not-found h1 { font-size: clamp(28px, 5vw, 46px); margin: 12px 0 14px; }
.not-found .lede { margin-inline: auto; max-width: 46ch; }
.not-found p:last-child { margin-top: 24px; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .with-rail { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .ad-slot.is-sticky,
  .ad-slot.is-desktop-only { display: none; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .head-row { flex-wrap: wrap; }
  .main-nav { display: none; width: 100%; margin: 0; }
  .main-nav.is-open { display: grid; padding-bottom: 12px; }
  .nav-toggle { display: grid; margin-inline-start: auto; }
  .article-card { padding: 20px; }
  .ad-slot.is-mobile-only { display: block; }
  .ad-anchor { display: block; }
  body { padding-bottom: 74px; }
  .dl-clear { height: 90px; }
}

@media (max-width: 560px) {
  .mini { grid-template-columns: 108px 1fr; }
  .step-card, .dl-panel { padding: 17px; }
  .countdown { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .ad-slot, .site-head, .site-foot, .rail, .dl-panel, .skip { display: none !important; }
}