/* beta.css - the beta launch page (owner 2026-10-16: "legendary, nothing like it"). Three acts: the gate (the next
   milestone, counted down on four minted gold coins: the page's signature), the road (a Silk Road over the land with three
   cities, the caravan standing on today, the fortress at its end), the gathering (how many players joined, heroes behind
   the count). Every date and number comes from site.json beta{} (Manager #25047). Keyframes are prefixed beta-. */

.beta-page { overflow: hidden; }

/* ---------- act one: the gate ---------- */
.beta-gate { position: relative; isolation: isolate; min-height: min(100dvh, 960px); display: grid; place-items: center; text-align: center; padding-block: 120px 80px; }
/* the sky fades into the page (no solid band, no seam with the section below) */
.beta-sky { position: absolute; inset: 0; z-index: -3; background: url("../img/art/A-03_hero.webp") 66% 32% / cover no-repeat; filter: brightness(.72) saturate(1.05);
  -webkit-mask-image: linear-gradient(#000 60%, transparent 100%); mask-image: linear-gradient(#000 60%, transparent 100%); }
[dir="rtl"] .beta-sky { transform: scaleX(-1); }
.beta-gate::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(50% 55% at 50% 58%, rgba(7, 11, 23, .62), rgba(7, 11, 23, .15) 75%), linear-gradient(180deg, rgba(7, 11, 23, .55), transparent 22%);
  -webkit-mask-image: linear-gradient(#000 60%, transparent 100%); mask-image: linear-gradient(#000 60%, transparent 100%); }
/* a slow field of stars over the sky */
.beta-stars { position: absolute; inset: 0 0 40%; z-index: -1; pointer-events: none; opacity: .7;
  background-image: radial-gradient(1.5px 1.5px at 12% 22%, #FFE7A3, transparent), radial-gradient(1px 1px at 28% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 30%, #FFE7A3, transparent), radial-gradient(1px 1px at 61% 8%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 77% 26%, #FFE7A3, transparent), radial-gradient(1px 1px at 88% 14%, #fff, transparent),
    radial-gradient(1px 1px at 6% 40%, #fff, transparent), radial-gradient(1.4px 1.4px at 93% 38%, #FFE7A3, transparent); }
/* the dunes in the foreground: two layers of night sand */
.beta-dunes { position: absolute; inset: auto 0 0; z-index: -1; height: clamp(90px, 12vw, 200px); pointer-events: none; }
.beta-dunes svg { display: block; width: 104%; max-width: none; height: 100%; margin-inline-start: -2%; }   /* base caps svg at 100%: the dune stopped short of the edge */
[dir="rtl"] .beta-dunes svg { transform: scaleX(-1); }
.dune-far { fill: var(--night-800); opacity: .7; }
.dune-near { fill: var(--night-900); }

.beta-gate-inner { position: relative; isolation: isolate; inline-size: 100%; min-inline-size: 0; }
/* one soft lantern glow behind the crest (no rays: the owner rejected light rays behind the logo) */
.beta-gate-inner::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(760px, 120vw); aspect-ratio: 1.6; translate: -50% -38%;
  pointer-events: none; background: radial-gradient(closest-side, rgba(244, 198, 92, .16), rgba(226, 169, 59, .05) 55%, transparent); }
.beta-crest { width: clamp(200px, 10rem + 10vw, 320px); height: auto; margin: 0 auto var(--sp-5); filter: drop-shadow(0 12px 28px rgba(4, 7, 16, .8)); }
.beta-title { font: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem)/1.05 var(--font-head); color: var(--sand-50); text-shadow: 0 4px 30px rgba(4, 7, 16, .9); }
.beta-title::after { content: ""; display: block; width: 168px; height: 12px; margin: 18px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='12' viewBox='0 0 168 12'%3E%3Cpath d='M0 6h70M98 6h70' stroke='%23E2A93B' stroke-width='1.4'/%3E%3Cpath d='M58 6h12M98 6h12' stroke='%23FFE7A3' stroke-width='2'/%3E%3Crect x='78' y='0' width='12' height='12' transform='rotate(45 84 6)' fill='none' stroke='%23F4C65C' stroke-width='1.4'/%3E%3Crect x='81' y='3' width='6' height='6' transform='rotate(45 84 6)' fill='%23F4C65C'/%3E%3C/svg%3E") no-repeat; }
.beta-next { margin-top: var(--sp-5); color: var(--sand-300); font-size: clamp(1rem, .9rem + .4vw, 1.25rem); text-shadow: 0 2px 12px rgba(4, 7, 16, .95), 0 0 2px rgba(4, 7, 16, .9); }

/* the signature: four minted gold coins count down; each new number flips onto its coin */
.tseals { display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 32px); margin: var(--sp-7) auto 0; }
.tseals[hidden] { display: none; }
.tseal { position: relative; overflow: hidden; display: grid; place-content: center; justify-items: center; gap: 2px;
  inline-size: clamp(62px, 1.5rem + 11vw, 158px); aspect-ratio: 1; border-radius: 50%; perspective: 600px;
  background: radial-gradient(circle at 50% 30%, var(--night-700), var(--night-950) 72%);
  box-shadow: 0 0 0 3px #3A2408, 0 0 0 5px var(--copper-500, #B47A1E), 0 0 0 6px #FFE7A3, inset 0 0 0 10px rgba(7, 11, 23, .6), inset 0 0 0 11px rgba(226, 169, 59, .45),
    inset 0 -14px 26px -10px rgba(226, 169, 59, .22), 0 26px 50px -22px #000; }
/* the milled rim: a ring of fine gold notches inside the edge */
.tseal::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 231, 163, .28) 0 2deg, transparent 2deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent 92%, #000 93%); mask: radial-gradient(closest-side, transparent 92%, #000 93%); }
/* a shimmer crosses the coin */
.tseal::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 231, 163, .2) 50%, transparent 62%); }
.tseal-num { display: block; overflow: hidden; height: 1em; font: clamp(1.75rem, 1rem + 3vw, 3.7rem)/1 var(--font-head); font-variant-numeric: tabular-nums;
  color: #F4C65C; text-shadow: 0 1px 0 #FFE7A3, 0 3px 0 #6B420C, 0 0 26px rgba(244, 198, 92, .35); }
.tseal-label { color: var(--sand-300); font-size: clamp(.6875rem, .6rem + .35vw, .875rem); font-weight: 600; letter-spacing: .08em; }
:lang(ar) .tseal-label { letter-spacing: 0; }

/* ---------- act two: the road ---------- */
.beta-road-sec { padding-block: var(--sp-8) var(--sp-9); }
.beta-road { position: relative; margin-top: var(--sp-9); aspect-ratio: 1200 / 300; }
.road-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
[dir="rtl"] .road-svg { transform: scaleX(-1); }
/* the land the road runs over */
.road-land { fill: url(#roadLandFill); }
.road-base { fill: none; stroke: rgba(226, 169, 59, .4); stroke-width: 3; stroke-dasharray: 3 14; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* the gold part keeps normal (scaling) strokes: non-scaling-stroke breaks app.js's pathLength=1 dash maths and the gold ran
   50 to 90 px past the caravan. The road box keeps the viewBox's 4:1 shape, so the scale stays uniform. */
.road-done, .road-done-halo { fill: none; stroke: url(#roadGold); stroke-width: 6; stroke-linecap: round; }
.road-done-halo { stroke: #F4C65C; stroke-opacity: .4; stroke-width: 20; filter: url(#roadSoft); }
/* the caravan stands on the road (its feet on the curve) */
.road-caravan { position: absolute; z-index: 3; width: clamp(84px, 8vw, 150px); height: auto; translate: -50% -84%; pointer-events: none;
  filter: drop-shadow(0 0 16px rgba(244, 198, 92, .3)) drop-shadow(0 10px 12px rgba(4, 7, 16, .8)); }
.road-caravan { transform: scaleX(-1); }   /* the render faces left; the road runs left to right */
[dir="rtl"] .road-caravan { transform: none; }
.road-stops { list-style: none; margin: 0; padding: 0; }
.road-stop { position: absolute; z-index: 2; translate: -50% -50%; }
.road-city { display: block; width: 28px; height: 28px; rotate: 45deg; background: #1A2648; border: 2px solid rgba(226, 169, 59, .55); box-shadow: 0 0 0 6px rgba(7, 11, 23, .8); transition: background .4s, box-shadow .4s; }
.road-stop.is-done .road-city { background: #E2A93B; border-color: #FFE7A3; box-shadow: 0 0 0 6px rgba(7, 11, 23, .8), 0 0 24px 4px rgba(244, 198, 92, .55); }
.road-stop.is-now .road-city { background: #F4C65C; border-color: #FFF3CC; }
/* the destination: a fortress medal, not one more diamond */
.road-city.is-fort, .road-stop.is-done .road-city.is-fort, .road-stop.is-now .road-city.is-fort { rotate: 0deg; width: auto; height: auto; background: none; border: 0; box-shadow: none; }
.road-city.is-fort .medal { --m: 64px; background-color: var(--night-900); box-shadow: 0 0 0 2px #3A2408, 0 0 0 3px rgba(255, 210, 120, .7), 0 0 0 9px rgba(7, 11, 23, .8), 0 0 26px 4px rgba(226, 169, 59, .3); }
.road-stop.is-now .road-city.is-fort .medal { color: #FFE7A3; }
.road-card { position: absolute; left: 50%; top: 52px; translate: -50% 0; width: max-content; max-width: 220px; display: grid; gap: 4px; text-align: center;
  padding: 10px 16px 12px; background: rgba(11, 17, 36, .86); box-shadow: 0 0 0 1px rgba(226, 169, 59, .22), 0 18px 36px -18px rgba(4, 7, 16, .9); backdrop-filter: blur(6px); }
.road-stop[data-stop="1"] .road-card { top: auto; bottom: 58px; }
.road-stop[data-stop="2"] .road-card { top: auto; bottom: 64px; }
/* the two end cards hang from their city towards the middle, so they never leave the screen (tablets and small laptops) */
.road-stop[data-stop="0"] .road-card { left: auto; right: auto; inset-inline-start: -24px; translate: none; text-align: start; justify-items: start; }
.road-stop[data-stop="2"] .road-card { left: auto; right: auto; inset-inline-end: -16px; translate: none; text-align: end; justify-items: end; }
.road-stop.is-now .road-card { box-shadow: 0 0 0 1px rgba(244, 198, 92, .6), 0 0 30px -6px rgba(244, 198, 92, .45), 0 18px 36px -18px rgba(4, 7, 16, .9); }
.road-card b { font: 1.25rem var(--font-head); color: var(--sand-50); }
.road-card time { color: var(--sand-300); font-size: .9375rem; }
.road-card small { justify-self: center; padding: 2px 10px; font-size: .8125rem; font-weight: 700; color: var(--text-3); box-shadow: inset 0 0 0 1px rgba(246, 238, 223, .16); }
.road-stop[data-stop="0"] .road-card small { justify-self: start; }
.road-stop[data-stop="2"] .road-card small { justify-self: end; }
:lang(ar) .road-card small { font-size: .875rem; }
.road-stop.is-done .road-card small { color: #1C0D00; background: #E2A93B; box-shadow: none; }
.road-stop.is-now .road-card small { color: #F4C65C; background: rgba(226, 169, 59, .12); box-shadow: inset 0 0 0 1px #F4C65C; }
.road-stop::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: none; opacity: 0;
  border: 1px solid rgba(244, 198, 92, .8); rotate: 45deg; }
@media (min-width: 720px) and (max-width: 1023px) { .road-card { max-width: 190px; padding: 8px 12px 10px; } .road-card b { font-size: 1.0625rem; } }

/* a spark of light runs along the gold road to the caravan and fades on it (owner 2026-10-16). app.js moves it along the
   real curve every frame (round, never stretched by the svg); four smaller sparks follow as its tail. */
.road-spark { position: absolute; z-index: 2; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #FFFFFF 0 30%, #FFE7A3 55%, rgba(244, 198, 92, 0) 72%);
  box-shadow: 0 0 10px 3px rgba(255, 220, 140, .65), 0 0 22px 6px rgba(244, 198, 92, .25); }
.road-spark.is-tail { width: 6px; height: 6px; margin: -3px 0 0 -3px; box-shadow: 0 0 8px 2px rgba(255, 220, 140, .45); }
@media (prefers-reduced-motion: reduce) { .road-spark { display: none; } }

/* on phones the road stands up: a vertical gold line with the three cities beside it */
@media (max-width: 719px) {
  .beta-gate { padding-block: 112px clamp(90px, 22vw, 120px); min-height: 0; }
  .beta-road { aspect-ratio: auto; margin-top: var(--sp-6); padding-inline-start: 46px; }
  .road-svg, .road-caravan { display: none; }
  .road-stops { position: relative; display: grid; gap: var(--sp-7); }
  .road-stops::before { content: ""; position: absolute; inset-inline-start: -32px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, #E2A93B, rgba(226, 169, 59, .2)); }
  .road-stop { position: relative; translate: none; left: auto !important; top: auto !important; }
  .road-city { position: absolute; inset-inline-start: -46px; top: 4px; width: 22px; height: 22px; }
  .road-city.is-fort { inset-inline-start: -52px; top: -4px; }
  .road-city.is-fort .medal { --m: 40px; }
  .road-card, .road-stop[data-stop] .road-card { position: static; translate: none; width: auto; max-width: none; text-align: start; justify-items: start; padding: 10px 14px; }
  .road-card small, .road-stop[data-stop] .road-card small { justify-self: start; }
  .road-stop::after { left: auto; inset-inline-start: -35px; top: 15px; margin: -15px 0 0; margin-inline-start: -15px; }
  /* the coin label fits the chord of the coin at its row ("Minutes" ran over the milled rim at 360 px) */
  .tseal-label { letter-spacing: 0; font-size: .6875rem; }
  .tseal-num { margin-top: -4px; }
  /* less empty night between the dunes and the road */
  .beta-gate { padding-bottom: 72px; }
  .beta-road-sec { padding-block: var(--sp-6) var(--sp-7); }
}
/* small phones: the four coins become a stack of two by two, twice the size, so each number and its label read at full size
   (in a row of four the coins were 64 px wide with 11 px labels) */
@media (max-width: 479px) {
  .tseals { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 14px 20px; }
  .tseals[hidden] { display: none; }
  .tseal { inline-size: clamp(116px, 33vw, 140px); gap: 4px; }
  .tseal-num { margin-top: 0; font-size: 2.75rem; }
  .tseal-label { font-size: .8125rem; letter-spacing: .04em; }
  :lang(ar) .tseal-label { font-size: .875rem; letter-spacing: 0; }
}

/* ---------- the founders and the top inviters ---------- */
.beta-founders { padding-block: var(--sp-8); }
.founders-wrap { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 900px) { .founders-wrap { grid-template-columns: 1fr minmax(0, 460px); gap: var(--sp-9); } }
.founders-lead { max-width: 46ch; color: var(--sand-300); font-size: 1.125rem; line-height: 1.7; margin-top: var(--sp-5); }
.founders-taken { margin-block: var(--sp-5) var(--sp-6); color: var(--text-2); }
/* the big gold number is the count at the end of the page; here the founders stay plain text */
.founders-taken b { font: 600 1.25rem var(--font-body-en, inherit); color: var(--text); margin-inline-end: 6px; }
.top-list { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-5) var(--sp-5); display: grid; gap: 4px; }
.top-list li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: var(--sp-3); padding: 10px 12px; background: rgba(13, 20, 41, .6); }
.top-rank { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 700; font-size: .875rem; color: var(--text-2); box-shadow: inset 0 0 0 1px rgba(246, 238, 223, .2); }
.top-list li.is-top .top-rank { color: #1C0D00; background: #E2A93B; box-shadow: none; }
/* the first inviter wears a small coin, like the countdown */
.top-list li.is-top1 .top-rank { background: radial-gradient(circle at 50% 30%, #FFF3CC, #E2A93B 70%); box-shadow: 0 0 0 2px #3A2408, 0 0 0 3px #FFE7A3; }
.top-list li.is-top3 .top-rank { background: #B47A1E; color: #1C0D00; }
.top-name { font: 1.125rem var(--font-display-latin); color: var(--sand-50); direction: ltr; text-align: start; }
.top-inv { color: #F6CF79; font-weight: 700; }
.top-inv small { color: var(--text-3); font-weight: 500; font-size: .875rem; }
.top-empty { display: block !important; text-align: center; color: var(--text-3); }
.top-list li { transition: background var(--t-base); }
.top-list li.is-top { background: linear-gradient(90deg, rgba(226, 169, 59, .16), rgba(13, 20, 41, .6) 70%); border-inline-start: 2px solid #E2A93B; }
[dir="rtl"] .top-list li.is-top { background: linear-gradient(270deg, rgba(226, 169, 59, .16), rgba(13, 20, 41, .6) 70%); }

/* ---------- act three: the gathering. The heroes who joined stand behind the count ---------- */
.beta-join { position: relative; isolation: isolate; padding-block: var(--sp-9) calc(var(--sp-9) + 60px); text-align: center; }
.beta-join::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(50% 60% at 50% 40%, rgba(226, 169, 59, .14), transparent 70%); }
/* hall_heroes.webp: the figures stand in the right part of a 2:1 picture; the offset brings their group to the centre */
.beta-join::after { content: ""; position: absolute; inset: auto 0 0; height: 640px; z-index: -1; pointer-events: none; opacity: .3;
  background: url("../img/art/hall_heroes.webp") calc(50% - 410px) 100% / 1280px 640px no-repeat;
  -webkit-mask-image: radial-gradient(55% 80% at 50% 70%, #000 40%, transparent 78%); mask-image: radial-gradient(55% 80% at 50% 70%, #000 40%, transparent 78%); }
.beta-join-inner { position: relative; }
.join-label { color: var(--sand-300); font-size: 1.125rem; }
.join-count { margin-top: var(--sp-2); font: clamp(4rem, 2rem + 9vw, 9rem)/1 var(--font-head); font-variant-numeric: tabular-nums;
  color: #F4C65C; text-shadow: 0 1px 0 #FFE7A3, 0 4px 0 #6B420C, 0 0 50px rgba(226, 169, 59, .35); }
.join-lead { max-width: 52ch; margin: var(--sp-5) auto 0; color: var(--text-2); }
.join-cta { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); justify-content: center; align-items: center; margin-top: var(--sp-7); }
.join-cta .link { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 719px) { .beta-join { padding-block: var(--sp-8) calc(var(--sp-8) + 90px); } .beta-join::after { height: 440px; background-size: 880px 440px; background-position: calc(50% - 282px) 100%; } }

/* numbers in the Latin display face in both languages (El Messiri digits are plain) */
.tseal-num, .join-count { font-family: var(--font-display-latin), var(--font-head); }
.beta-road-sec .section-title { text-align: center; }

/* ---------- motion (all opt-in) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .beta-stars { animation: beta-twinkle 5s ease-in-out infinite alternate; }
  @keyframes beta-twinkle { to { opacity: .35; } }
  .dune-far { animation: beta-dune-drift 28s ease-in-out infinite alternate; }
  @keyframes beta-dune-drift { from { translate: -1.5% 0; } to { translate: 1.5% 0; } }
  .beta-gate-inner::before { animation: beta-lantern 6s ease-in-out infinite alternate; }
  @keyframes beta-lantern { from { opacity: .75; scale: .96; } to { opacity: 1; scale: 1.04; } }
  /* the coins float out of step, a shimmer crosses each, and a new number flips onto its coin */
  .tseal { animation: beta-coin-float 6s ease-in-out infinite; }
  .tseal:nth-child(2) { animation-delay: -1.5s; } .tseal:nth-child(3) { animation-delay: -3s; } .tseal:nth-child(4) { animation-delay: -4.5s; }
  @keyframes beta-coin-float { 50% { translate: 0 -7px; } }
  .tseal::after { animation: beta-coin-shine 7s ease-in-out infinite; }
  .tseal:nth-child(2)::after { animation-delay: .35s; } .tseal:nth-child(3)::after { animation-delay: .7s; } .tseal:nth-child(4)::after { animation-delay: 1.05s; }
  @keyframes beta-coin-shine { 0% { opacity: 0; translate: -110% 0; } 8% { opacity: 1; } 22% { opacity: 1; translate: 110% 0; } 23%, 100% { opacity: 0; translate: 110% 0; } }
  .tseal-num.is-tick { animation: beta-coin-flip .5s cubic-bezier(.2, .9, .3, 1.2); }
  @keyframes beta-coin-flip { from { rotate: x 90deg; opacity: .25; } to { rotate: x 0deg; opacity: 1; } }
  /* the caravan walks to today and sways as it goes */
  .road-caravan { transition: left 1.6s cubic-bezier(.4, 0, .2, 1), top 1.6s cubic-bezier(.4, 0, .2, 1); animation: beta-caravan-sway 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
  @keyframes beta-caravan-sway { 25% { rotate: -2deg; } 75% { rotate: 2deg; } }
  .road-stop.is-now .road-city { animation: beta-city-pulse 2.2s ease-in-out infinite; }
  @keyframes beta-city-pulse { 50% { box-shadow: 0 0 0 6px rgba(7, 11, 23, .8), 0 0 0 14px rgba(244, 198, 92, .25), 0 0 34px 8px rgba(244, 198, 92, .5); } }
  .road-stop.is-now .road-city.is-fort { animation: none; }
  .road-stop.is-now::after { animation: beta-city-ring 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
  @keyframes beta-city-ring { 0% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 2.6; } }
  .road-city.is-fort .medal { animation: beta-fort-glow 3s ease-in-out infinite; }
  @keyframes beta-fort-glow { 50% { box-shadow: 0 0 0 2px #3A2408, 0 0 0 3px rgba(255, 231, 163, .95), 0 0 0 9px rgba(7, 11, 23, .8), 0 0 26px 6px rgba(244, 198, 92, .45); } }
  .top-list li { transition: background var(--t-base), translate var(--t-base) var(--ease); }
  .top-list li:hover { translate: 4px 0; }
  [dir="rtl"] .top-list li:hover { translate: -4px 0; }
  /* the heroes rise behind the count as it comes into view */
  @supports (animation-timeline: view()) {
    .beta-join::after { animation: beta-gather linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    @keyframes beta-gather { from { translate: 0 40px; opacity: 0; } to { translate: 0 0; opacity: .3; } }
  }
}

/* ================= the Founder's Banner (owner 2026-10-16) =================
   the real banner hangs from a gold pole, like the caravan's flag; the words and the call sit beside it */
.beta-banner { position: relative; padding-block: var(--sp-9, 96px); overflow: hidden;
  background: radial-gradient(60% 70% at 30% 50%, rgba(226, 169, 59, .12), transparent 70%); }
[dir="rtl"] .beta-banner { background: radial-gradient(60% 70% at 70% 50%, rgba(226, 169, 59, .12), transparent 70%); }
.banner-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-8, 64px); align-items: center; }
.banner-stage { position: relative; padding-top: 22px; }
.banner-pole { position: absolute; top: 0; inset-inline: -14px; height: 14px; border-radius: 7px;
  background: linear-gradient(180deg, #FFE7A3, #E2A93B 45%, #8A5A14); box-shadow: 0 6px 14px rgba(0, 0, 0, .6); }
.banner-pole::before, .banner-pole::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; translate: 0 -50%; rotate: 45deg;
  background: linear-gradient(135deg, #FFE7A3, #B07A22); box-shadow: 0 0 0 3px #0A1022, 0 0 14px rgba(244, 198, 92, .55); }
.banner-pole::before { inset-inline-start: -10px; }
.banner-pole::after { inset-inline-end: -10px; }
.banner-cloth { position: relative; padding: 10px; background: #070B16;
  box-shadow: 0 0 0 1px #E2A93B, 0 0 0 6px rgba(8, 12, 26, .95), 0 0 0 7px rgba(244, 198, 92, .45), 0 40px 80px -24px rgba(0, 0, 0, .95), 0 0 120px -30px rgba(244, 198, 92, .35);
  transform-origin: 50% 0; }
/* the banner's swallow-tail under the cloth */
.banner-cloth::after { content: ""; position: absolute; left: 50%; bottom: -34px; width: 60px; height: 34px; translate: -50% 0;
  background: linear-gradient(180deg, #E2A93B, #8A5A14); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 55%, 0 100%); }
.banner-cloth canvas { display: block; width: 100%; height: auto; }
.banner-lead { margin-top: var(--sp-4); color: var(--text-2); font-size: 1.125rem; line-height: 1.7; max-width: 46ch; }
.banner-points { display: grid; gap: var(--sp-4); margin: var(--sp-6) 0 var(--sp-7); padding: 0; list-style: none; }
.banner-points li { display: flex; align-items: center; gap: var(--sp-4); color: var(--sand-100, #EFE3C8); }
.banner-points .medal { --m: 44px; flex: none; }
@media (max-width: 899px) {
  .banner-wrap { grid-template-columns: minmax(0, 1fr); }
  .banner-stage { max-width: 620px; justify-self: center; width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  /* the banner sways a little in the wind */
  @keyframes beta-banner-sway { 0%, 100% { rotate: -.6deg; } 50% { rotate: .6deg; } }
  .banner-cloth { animation: beta-banner-sway 7s ease-in-out infinite; }
}

/* ---------- owner review 2026-10-16: the countdown is ONE gold strip of four cells (no coins) on every screen; the calls to
   action stand in the middle; "Download the game" is a smaller red plate under "Create your account" ---------- */
.tseals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: min(100%, 640px); margin: var(--sp-7) auto 0;
  border: 1px solid rgba(226, 169, 59, .7); background: linear-gradient(180deg, rgba(22, 34, 70, .92), rgba(10, 16, 36, .95));
  box-shadow: 0 0 0 4px rgba(8, 12, 26, .9), 0 0 0 5px rgba(226, 169, 59, .3), 0 26px 50px -22px #000; }
.tseals[hidden] { display: none; }
.tseal { inline-size: auto; aspect-ratio: auto; overflow: visible; gap: 6px; padding: clamp(12px, 2.2vw, 20px) 4px; border-radius: 0;
  background: none; box-shadow: none; animation: none; }
.tseal + .tseal { border-inline-start: 1px solid rgba(226, 169, 59, .35); }
.tseal::before, .tseal::after { content: none; }
.tseal-num { margin: 0; font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
.tseal-label, :lang(ar) .tseal-label { font-size: clamp(.8125rem, .75rem + .3vw, .9375rem); letter-spacing: 0; }
.join-cta { flex-direction: column; gap: var(--sp-4); }
.join-cta .btn-download { min-height: 0; }
@media (max-width: 767px) {
  .banner-text, .founders-text { text-align: center; }
  .banner-text .btn, .founders-text .btn { display: flex; width: fit-content; margin-inline: auto; }
  .banner-points { justify-items: start; text-align: start; }
}
/* phones: the sky is the 1280 px cut (404 KB -> 44 KB; Lighthouse LCP 5.6 s) */
@media (max-width: 767px) { .beta-sky { background-image: url("../img/art/A-03_hero_1280.webp"); } }