/* play.css - the play pages (owner review 2026-10-16: "a legendary, unique design for every page").
   download = the open city gate, status = the watchtower at night, events = the war calendar.
   Loads after pages.css and overrides it. Decoration only: remove this file and the pages still work and read the same.
   Every animation sits in prefers-reduced-motion: no-preference, moves transform/opacity only, and is named play-*. */

/* ================= DOWNLOAD: the open city gate ================= */
.gate-head { text-align: center; padding-block-end: var(--sp-9); }
.gate-head .container { display: grid; justify-items: center; }
.gate-head .page-lead { margin-inline: auto; color: var(--sand-50); text-shadow: 0 2px 12px rgba(4, 7, 16, .9); }
.gate-head .btn { margin-block-start: var(--sp-6); }
.gate-head .page-title::after { margin-inline: auto; }
.gate-ver { margin-top: var(--sp-3); color: var(--text-2); font: 400 .9375rem/1.4 var(--font-head); text-shadow: 0 1px 8px rgba(4, 7, 16, .9); }
.gate-ver b { color: var(--gold-2); font: 600 1rem var(--font-body); font-variant-numeric: tabular-nums lining-nums; }
.dl-gate { position: absolute; z-index: -1; inset-block: calc(84px + var(--sp-5)) 0; left: 50%; translate: -50% 0; width: min(680px, calc(100% - 76px));
  perspective: 900px; pointer-events: none; }
/* the world seen through the arch: the night road and the city, darkened where the title sits */
.dl-gate-arch { position: absolute; inset: 0; overflow: hidden; border: 2px solid rgba(226, 169, 59, .6); border-block-end: 0; border-radius: 50% 50% 0 0 / 38% 38% 0 0;
  background: radial-gradient(58% 30% at 50% 24%, rgba(4, 7, 16, .78), rgba(4, 7, 16, .35) 60%, transparent 85%),
    linear-gradient(180deg, rgba(4, 7, 16, .2), rgba(4, 7, 16, .45) 45%, rgba(4, 7, 16, .88)),
    url("../img/art/A-03_hero_1280.webp") 68% 42% / cover no-repeat;
  box-shadow: 0 0 0 12px rgba(13, 20, 41, .55), 0 0 0 13px rgba(226, 169, 59, .22), inset 0 0 80px rgba(4, 7, 16, .8); }
.dl-gate-arch::before { content: ""; position: absolute; inset: 20px 20px 0; border: 1px solid rgba(226, 169, 59, .28); border-block-end: 0; border-radius: inherit; }
/* the city answers the Download button: its lamps flare through the open gate while the button is pointed at or focused */
.dl-gate-arch::after { content: ""; position: absolute; inset: 0; opacity: 0; border-radius: inherit;
  background: radial-gradient(70% 45% at 50% 100%, rgba(244, 198, 92, .5), transparent 70%), radial-gradient(40% 30% at 50% 0, rgba(255, 231, 163, .22), transparent);
  box-shadow: inset 0 0 0 2px rgba(255, 231, 163, .55); }
.gate-head:has(.btn-download:is(:hover, :focus-visible)) .dl-gate-arch::after { opacity: 1; }
.gate-head:has(.btn-download:is(:hover, :focus-visible)) .dl-gate::after { scale: 1.35; }
/* the keystone */
.dl-gate::after { content: ""; position: absolute; top: -11px; left: 50%; width: 20px; height: 20px; translate: -50% 0; rotate: 45deg;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-3)); box-shadow: 0 0 0 4px var(--night-950), 0 0 0 5px rgba(226, 169, 59, .5), 0 0 22px rgba(244, 198, 92, .7); }
/* the stone pillars */
.dl-gate::before { content: ""; position: absolute; bottom: 0; left: -30px; right: -30px; height: 58%;
  background: repeating-linear-gradient(180deg, var(--night-700) 0 26px, var(--night-900) 26px 28px) left / 30px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--night-700) 0 26px, var(--night-900) 26px 28px) right / 30px 100% no-repeat; }
/* the two door leaves: only drawn when motion is allowed, and they swing open on load */
.dl-gate-door { display: none; position: absolute; inset-block: 0; width: 50%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 40%, rgba(255, 255, 255, .04)), repeating-linear-gradient(90deg, var(--night-700) 0 38px, var(--night-900) 38px 40px); }
.dl-gate-door:nth-child(2) { left: 0; transform-origin: left center; border-radius: 100% 0 0 0 / 38% 0 0 0; box-shadow: inset -1px 0 0 rgba(226, 169, 59, .5); }
.dl-gate-door:nth-child(3) { right: 0; transform-origin: right center; border-radius: 0 100% 0 0 / 0 38% 0 0; box-shadow: inset 1px 0 0 rgba(226, 169, 59, .5); }

/* the requirements plaque */
.dl-card { padding-block: var(--sp-7); gap: var(--sp-3); }
.dl-card .section-title { margin: 0; }
.dl-need { color: var(--text-2); }
.dl-meta { gap: 0; margin-top: var(--sp-4); padding-block: var(--sp-2); border-block: 1px solid rgba(226, 169, 59, .35); font-size: .875rem; }
.dl-meta span { position: relative; padding: var(--sp-3) var(--sp-2); }
.dl-meta b { white-space: nowrap; color: var(--gold-2); font-size: 1rem; font-variant-numeric: tabular-nums lining-nums; }
@media (min-width: 600px) {
  .dl-meta span + span::before { content: ""; position: absolute; inset-block: 22%; inset-inline-start: 0; width: 1px; background: rgba(226, 169, 59, .25); }
}
@media (max-width: 599px) {
  .gate-head .container { grid-template-columns: minmax(0, 1fr); padding-inline: calc(var(--gutter) + 30px); }
  /* owner review 2026-10-16: everything sits inside the arch, below its curve */
  .gate-head { padding-block: calc(84px + var(--sp-6) + 96px) var(--sp-8); }
  .gate-head .page-title { font-size: clamp(1.9rem, 1.4rem + 3vw, 2.4rem); }
  .gate-head .page-lead { max-width: 28ch; }
  .dl-gate { width: calc(100% - 20px); }
  .gate-head .btn { max-width: 100%; }
  .dl-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the road to the gate (drawn by pages.css): the last stop is the destination and shines */
.dl-road li:last-child .medal { box-shadow: 0 0 0 5px var(--night-900), 0 0 0 6px rgba(244, 198, 92, .8), 0 0 26px 4px rgba(244, 198, 92, .5); }
/* one column under the gate: the plaque, then the road */
@media (min-width: 960px) { .dl-grid { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin-inline: auto; } }

/* ================= STATUS: the watchtower at night ================= */
.st-head { padding-block-end: 0; }
.st-head .page-title.tower-label { margin: 0; color: var(--text-3); font: 600 1rem/1.4 var(--font-body); letter-spacing: .02em; }
:lang(ar) .st-head .page-title.tower-label { letter-spacing: 0; }
.tower { --fire: var(--turq-500); --fire-hi: var(--turq-300); --fire-glow: rgba(43, 184, 166, .42);
  position: relative; isolation: isolate; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: end; gap: var(--sp-7);
  padding: var(--sp-6) var(--sp-7) 0; background: linear-gradient(180deg, rgba(13, 20, 41, .2), rgba(13, 20, 41, .85)); }
.tower[data-status="maintenance"] { --fire: var(--copper-500); --fire-hi: var(--gold-1); --fire-glow: rgba(226, 169, 59, .4); }
.tower[data-status="offline"] { --fire: var(--ember-500); --fire-hi: var(--gold-1); --fire-glow: rgba(229, 83, 61, .4); }
/* before the first answer: a dim gold ember, never a turquoise "online" fire */
.tower[data-status="checking"] { --fire: var(--gold-4); --fire-hi: var(--gold-3); --fire-glow: rgba(226, 169, 59, .16); }
.tower[data-status="checking"] .tower-fire { scale: .55; translate: -50% 26px; opacity: .8; }
.tower[data-status="checking"] .tower-sparks { display: none; }
/* the horizon: dune and wall silhouettes, and the pool of light the fire throws on the ground */
.tower::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; bottom: 0; height: 96px; pointer-events: none;
  background: radial-gradient(60% 100% at 18% 100%, var(--night-950) 60%, transparent 61%), radial-gradient(50% 90% at 78% 100%, var(--night-900) 60%, transparent 61%),
    radial-gradient(30% 70% at 130px 100%, var(--fire-glow), transparent); }
[dir="rtl"] .tower::before { background: radial-gradient(60% 100% at 82% 100%, var(--night-950) 60%, transparent 61%), radial-gradient(50% 90% at 22% 100%, var(--night-900) 60%, transparent 61%),
    radial-gradient(30% 70% at calc(100% - 130px) 100%, var(--fire-glow), transparent); }
.tower-art { position: relative; width: 200px; height: 290px; justify-self: center; }
.tower-glow { position: absolute; z-index: -1; top: -110px; left: 50%; width: 340px; height: 340px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, var(--fire-glow), transparent); }
.tower-fire { position: absolute; top: 12px; left: 50%; width: 64px; height: 76px; translate: -50% 0; }
.tower-fire i { position: absolute; bottom: 0; left: 50%; border-radius: 50% 0 50% 50%; rotate: -45deg; transform-origin: 50% 50%; }
.tower-fire i:nth-child(1) { width: 52px; height: 52px; margin-left: -26px; background: var(--fire); box-shadow: 0 0 34px 8px var(--fire-glow); }
.tower-fire i:nth-child(2) { width: 34px; height: 34px; margin-left: -17px; bottom: 4px; background: var(--fire-hi); }
.tower-fire i:nth-child(3) { width: 16px; height: 16px; margin-left: -8px; bottom: 8px; background: var(--sand-50); }
.tower-sparks { position: absolute; top: 0; left: 50%; width: 90px; height: 70px; translate: -50% 0; pointer-events: none; }
.tower-sparks i { position: absolute; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--fire-hi); box-shadow: 0 0 6px 1px var(--fire-glow); opacity: 0; }
.tower-sparks i:nth-child(1) { left: 22%; } .tower-sparks i:nth-child(2) { left: 46%; } .tower-sparks i:nth-child(3) { left: 63%; } .tower-sparks i:nth-child(4) { left: 80%; }
.tower-bowl { position: absolute; top: 84px; left: 50%; width: 104px; height: 24px; translate: -50% 0;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-4)); clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%); }
.tower-body { position: absolute; top: 106px; bottom: 0; left: 50%; width: 150px; translate: -50% 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .07), transparent 45%, rgba(0, 0, 0, .4)), repeating-linear-gradient(180deg, var(--night-700) 0 24px, var(--night-900) 24px 26px);
  clip-path: polygon(0 0, 16% 0, 16% 10px, 30% 10px, 30% 0, 42% 0, 42% 10px, 58% 10px, 58% 0, 70% 0, 70% 10px, 84% 10px, 84% 0, 100% 0, 100% 28px, 88% 28px, 97% 100%, 3% 100%, 12% 28px, 0 28px); }
.tower-body::before { content: ""; position: absolute; inset: 0 0 auto; height: 28px; box-shadow: inset 0 -2px 0 rgba(226, 169, 59, .55); }
.tower-body::after { content: ""; position: absolute; top: 62px; left: 50%; width: 16px; height: 40px; translate: -50% 0; border-radius: 8px 8px 0 0;
  background: var(--fire); box-shadow: 0 0 18px 4px var(--fire-glow); }
.tower-camps { position: absolute; z-index: -1; inset-inline: 30% 4%; bottom: 10px; height: 40px; pointer-events: none; }
.tower-camps i { position: absolute; bottom: 0; width: 9px; height: 12px; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; opacity: .25;
  background: radial-gradient(60% 60% at 50% 80%, var(--sand-50), var(--fire-hi) 45%, var(--fire)); box-shadow: 0 0 12px 3px var(--fire-glow); }
.tower-camps i::after { content: ""; position: absolute; inset: auto -6px -3px; height: 3px; border-radius: 2px; background: var(--night-600); }
.tower-camps i:nth-child(1) { inset-inline-start: 4%; bottom: 6px; } .tower-camps i:nth-child(2) { inset-inline-start: 19%; bottom: 18px; scale: .8; }
.tower-camps i:nth-child(3) { inset-inline-start: 37%; bottom: 2px; } .tower-camps i:nth-child(4) { inset-inline-start: 55%; bottom: 22px; scale: .7; }
.tower-camps i:nth-child(5) { inset-inline-start: 71%; bottom: 8px; scale: .9; } .tower-camps i:nth-child(6) { inset-inline-start: 90%; bottom: 20px; scale: .75; }
.tower[data-status="online"] .tower-camps i { opacity: 1; }
.tower[data-status="maintenance"] .tower-camps i:nth-child(odd) { opacity: .7; }
.tower:is([data-status="offline"], [data-status="checking"]) .tower-camps i { box-shadow: none; }
.tower-text { padding-block-end: var(--sp-7); min-width: 0; }
.tower-state { margin-block: var(--sp-2) var(--sp-3); color: var(--fire-hi); font: 400 clamp(2.75rem, 1.8rem + 3.4vw, 5rem)/1 var(--font-head); text-shadow: 0 0 28px var(--fire-glow); }
:lang(ar) .tower-state { letter-spacing: 0; line-height: 1.3; }
.tower .stat-updated { margin: 0; }
.tower-count { display: grid; gap: var(--sp-1, 4px); align-self: center; padding-inline-start: var(--sp-6); margin-block-end: var(--sp-6); border-inline-start: 1px solid rgba(226, 169, 59, .35); }
.tower-count b { color: var(--gold-2); font: 600 clamp(3rem, 2rem + 3vw, 5rem)/1 var(--font-body); font-variant-numeric: tabular-nums lining-nums; text-shadow: 0 0 24px rgba(244, 198, 92, .3); }
.tower-count span { color: var(--text-2); }
.st-head::after { z-index: 1; }
.st-lead { margin: 0 0 var(--sp-6); }
.st-main .stat-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.stat dt { font-size: .875rem; }
/* the three beacons below: the one that burns now is lit, the two others are dark */
.legend .live { width: 14px; height: 14px; }
.st-main:has(.tower[data-status="online"]) .legend > :not([data-status="online"]),
.st-main:has(.tower[data-status="maintenance"]) .legend > :not([data-status="maintenance"]),
.st-main:has(.tower[data-status="offline"]) .legend > :not([data-status="offline"]) { background-color: rgba(13, 20, 41, .55); border-color: rgba(226, 169, 59, .15); }
.st-main:has(.tower[data-status="online"]) .legend > :not([data-status="online"]) :is(h3, p),
.st-main:has(.tower[data-status="maintenance"]) .legend > :not([data-status="maintenance"]) :is(h3, p),
.st-main:has(.tower[data-status="offline"]) .legend > :not([data-status="offline"]) :is(h3, p) { color: var(--text-2); }
.st-main:has(.tower[data-status="online"]) .legend > :not([data-status="online"]) .live,
.st-main:has(.tower[data-status="maintenance"]) .legend > :not([data-status="maintenance"]) .live,
.st-main:has(.tower[data-status="offline"]) .legend > :not([data-status="offline"]) .live { opacity: .35; box-shadow: none; }
.st-main:has(.tower[data-status="online"]) .legend > [data-status="online"] { --lit: rgba(43, 184, 166, .2); }
.st-main:has(.tower[data-status="maintenance"]) .legend > [data-status="maintenance"] { --lit: rgba(226, 169, 59, .2); }
.st-main:has(.tower[data-status="offline"]) .legend > [data-status="offline"] { --lit: rgba(229, 83, 61, .2); }
.legend > [data-status] { background-image: linear-gradient(180deg, var(--lit, transparent), transparent 65%); }
.st-main:has(.tower[data-status="online"]) .legend > [data-status="online"] .live,
.st-main:has(.tower[data-status="maintenance"]) .legend > [data-status="maintenance"] .live,
.st-main:has(.tower[data-status="offline"]) .legend > [data-status="offline"] .live { width: 18px; height: 18px; box-shadow: 0 0 14px 2px currentColor; }
.st-main:has(.tower[data-status="online"]) .legend > [data-status="online"],
.st-main:has(.tower[data-status="maintenance"]) .legend > [data-status="maintenance"],
.st-main:has(.tower[data-status="offline"]) .legend > [data-status="offline"] { outline: 1px solid rgba(244, 198, 92, .7); outline-offset: -1px; }
@media (max-width: 899px) {
  .tower { grid-template-columns: 200px minmax(0, 1fr); }
  .tower-count { grid-column: 2; margin-block-end: var(--sp-6); }
  .tower-art { grid-row: 1 / span 2; }
}
@media (max-width: 699px) {
  .tower { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-4) 0; }
  .tower-text { order: 1; padding-block-end: 0; }
  .tower-count { order: 2; grid-column: auto; justify-items: center; margin: 0; padding: var(--sp-4) var(--sp-6) 0; border-inline-start: 0; border-block-start: 1px solid rgba(226, 169, 59, .35); }
  .tower-art { order: 3; grid-row: auto; width: 180px; height: 250px; }
  .tower-camps { inset-inline: 4%; height: 30px; }
}

/* ================= EVENTS: the war calendar ================= */
/* the head clips the beacon glow on phones (no sideways scroll) */
.st-head { overflow: hidden; }

/* the boss at the gate of the week (a cut-out already in the site's images), standing on the head's gold line */
.ev-boss { position: absolute; z-index: -1; bottom: 0; inset-inline-end: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  width: 240px; aspect-ratio: 871 / 1000; background: url("../img/features/dragon-caves.webp") center bottom / contain no-repeat;
  filter: drop-shadow(0 14px 22px rgba(4, 7, 16, .85)); pointer-events: none; }
.ev-boss::before { content: ""; position: absolute; z-index: -1; inset: 20% -20% -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(229, 83, 61, .28), transparent); }
[dir="rtl"] .ev-boss { scale: -1 1; }
@media (max-width: 1023px) { .ev-boss { display: none; } }

/* the filters are the brand's brush banners */
.ev-tabs { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-3); overflow-x: auto; padding: var(--sp-3) var(--sp-4);
  background: rgba(13, 20, 41, .7); border-block: 1px solid rgba(226, 169, 59, .28); scroll-snap-type: x proximity; }
.ev-tabs .tab { flex: none; min-inline-size: 44px; min-block-size: 44px; padding: 8px 18px; text-align: center; scroll-snap-align: start;
  color: var(--text-2); font: 400 1.0625rem/1.2 var(--font-head); background: center / 100% 100% no-repeat; }
.ev-tabs .tab:hover { color: var(--text); }
.ev-tabs .tab[aria-selected="true"] { color: var(--sand-50); text-shadow: 0 1px 2px rgba(4, 7, 16, .8); }
.ev-tabs .tab[aria-selected="true"]::after { display: none; }
.ev-tabs .tab[data-kind="all"][aria-selected="true"] { background-image: url("../img/brand/tag-event.webp"); color: #2A1704; text-shadow: none; }
.ev-tabs .tab[data-kind="pvp"][aria-selected="true"] { background-image: url("../img/brand/tag-maintenance.webp"); }
.ev-tabs .tab[data-kind="boss"][aria-selected="true"] { background-image: url("../img/brand/tag-special.webp"); }
.ev-tabs .tab[data-kind="activity"][aria-selected="true"] { background-image: url("../img/brand/tag-news.webp"); }
.ev-tabs .tab[data-kind="server"][aria-selected="true"] { background-image: url("../img/brand/tag-notice.webp"); }
@media (max-width: 599px) {
  .ev-tabs { gap: var(--sp-2); padding-inline: var(--sp-3); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  [dir="rtl"] .ev-tabs { -webkit-mask-image: linear-gradient(-90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(-90deg, #000 calc(100% - 28px), transparent); }
  .ev-tabs .tab { padding-inline: 14px; }
}

.tl-day h2 { display: flex; align-items: center; gap: var(--sp-3); font-size: 1.625rem; }
/* the fixed top bar (~96 px) never covers a day title or a card the page scrolls to (Manager-93 #39462) */
#timeline, .tl-day h2, .tl-item { scroll-margin-top: 120px; }
.tl-day h2::before { content: ""; flex: none; width: 13px; height: 13px; rotate: 45deg; background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
  box-shadow: 0 0 0 3px var(--night-950), 0 0 0 4px rgba(226, 169, 59, .5), 0 0 14px rgba(244, 198, 92, .5); }
.tl-day h2::after { content: ""; flex: 1 1 24px; min-width: 24px; height: 1px; background: linear-gradient(90deg, rgba(226, 169, 59, .55), transparent); }
[dir="rtl"] .tl-day h2::after { background: linear-gradient(-90deg, rgba(226, 169, 59, .55), transparent); }
.tl-day h2 small { margin-inline-start: 0; }
.tl-list::before { width: 2px; background: repeating-linear-gradient(180deg, rgba(226, 169, 59, .7) 0 7px, transparent 7px 15px); }
.tl-time { font: 600 1.25rem/1.3 var(--font-body); font-variant-numeric: tabular-nums lining-nums; color: var(--sand-50); white-space: nowrap; }
.tl-time small { font-size: .875rem; }
.tl-item::before { z-index: 2; width: 12px; height: 12px; inset-inline-start: 114px; top: 23px; background: var(--gold-3); box-shadow: 0 0 0 3px var(--night-950), 0 0 10px rgba(244, 198, 92, .55); }
/* Arabic times carry ص / م: a wider time column, the road moved with it */
@media (min-width: 600px) {
  :lang(ar) .tl-item { grid-template-columns: 112px 1fr; }
  :lang(ar) .tl-list::before { inset-inline-start: 135px; }
  :lang(ar) .tl-item::before { inset-inline-start: 130px; }
}
/* the live event: a turquoise "now" ring rides out of its lantern (drawn only with motion) */
.tl-item.is-live::after { content: ""; display: none; position: absolute; z-index: 1; inset-inline-start: 114px; top: 23px; width: 12px; height: 12px; rotate: 45deg;
  border: 2px solid var(--turq-300); opacity: 0; pointer-events: none; }
@media (min-width: 600px) { :lang(ar) .tl-item.is-live::after { inset-inline-start: 130px; } }

/* each banner shows its contender: the game's own bosses, fighters and forts at the card's end */
.tl-card { overflow: clip; border-inline-start: 2px solid rgba(226, 169, 59, .5); }
.tl-card > * { position: relative; z-index: 1; }
.tl-card::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 42%; pointer-events: none; opacity: .5;
  background: var(--art, none) 60% 18% / auto 170% no-repeat;
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent); mask-image: linear-gradient(to left, #000 35%, transparent); }
[dir="rtl"] .tl-card::after { scale: -1 1; }
/* the FunWorld mark is never mirrored */
[dir="rtl"] .tl-card:has(.tag-server)::after { scale: none; -webkit-mask-image: linear-gradient(to right, #000 35%, transparent); mask-image: linear-gradient(to right, #000 35%, transparent); }
.tl-card:has(.tag-boss) { --art: url("../img/features/dragon-caves.webp"); }
.tl-card:has(.tag-pvp) { --art: url("../img/cards/cn-glaive__1__wstand.webp"); }
.tl-card:has(.tag-activity) { --art: url("../img/features/fortress.webp"); }
.tl-card:has(.tag-server) { --art: url("../img/brand/fw-mark.webp"); }
.tl-card:has(.tag-pvp)::after { background-size: auto 190%; background-position: 50% 30%; }
.tl-card:has(.tag-server)::after { background-size: auto 120%; background-position: 70% 50%; opacity: .3; }
/* each boss kind shows its own icon from the client (ActivityHandler atlas: World Boss = icon_boss_the_gioi, Unique Boss =
   icon_treo_may, MultiActivityList rows 3 and 26); the cross-server boss has no client icon, so the FunWorld mark (Manager-93 #39462) */
.tl-card.kind-worldboss { --art: url("../img/events/worldboss.webp"); }
.tl-card.kind-uniqueboss { --art: url("../img/events/uniqueboss.webp"); }
.tl-card.kind-crossboss { --art: url("../img/brand/fw-mark.webp"); }
.tl-card.kind-worldboss::after, .tl-card.kind-uniqueboss::after { background-size: auto 92%; background-position: 70% 50%; opacity: .45; }
.tl-card.kind-crossboss::after { background-size: auto 120%; background-position: 70% 50%; opacity: .3; }
/* the FunWorld mark stays a faint watermark even on the highlighted next event (that rule lifts the art to .9) */
.tl-card.kind-crossboss::after, .tl-card:has(.tag-server)::after { opacity: .3 !important; }
[dir="rtl"] .tl-card.kind-crossboss::after { scale: none; -webkit-mask-image: linear-gradient(to right, #000 35%, transparent); mask-image: linear-gradient(to right, #000 35%, transparent); }
.tl-item.is-live .tl-card { border-inline-start-color: var(--turq-500); }
.tl-card h3 { font-size: 1.3125rem; }
/* ended: the card dims, the text stays readable */
.tl-item.is-ended { opacity: 1; }
.tl-item.is-ended .tl-card { border-inline-start-color: var(--night-600); background-color: rgba(13, 20, 41, .5); }
.tl-item.is-ended .tl-card::after { opacity: .2; filter: grayscale(1); }
.tl-item.is-ended :is(h3, .tl-time) { color: var(--text-2); }
.tl-item.is-ended .tag { filter: saturate(.4); }
.tl-msg { border: 1px dashed rgba(226, 169, 59, .35); background: rgba(13, 20, 41, .6); }

/* the next battle: the first live or upcoming event on the page takes the spotlight */
.tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item:is(.is-live, .is-upcoming):not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item) {
  --next: 1; }
.tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item:is(.is-live, .is-upcoming):not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item) .tl-card {
  min-height: 168px; align-content: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-7);
  box-shadow: 0 0 0 1px rgba(226, 169, 59, .7), 0 0 0 6px var(--night-900), 0 0 0 7px rgba(226, 169, 59, .3), 0 30px 60px -30px rgba(4, 7, 16, .95); }
.tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item:is(.is-live, .is-upcoming):not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item) .tl-card::after { opacity: .9; width: 48%; }
.tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item:is(.is-live, .is-upcoming):not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item) .tl-card h3 {
  font: 400 clamp(1.625rem, 1.2rem + 1.4vw, 2.125rem)/1.15 var(--font-head); color: var(--sand-50); }
:lang(ar) .tl-card h3 { letter-spacing: 0; }
.tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item.is-upcoming:not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item) .tl-state { color: var(--gold-2); font-size: 1rem; }
.tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item.is-live:not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item) .tl-state { font-size: 1rem; }
.tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item:is(.is-live, .is-upcoming):not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item)::before {
  width: 18px; height: 18px; inset-inline-start: 111px; top: 30px; }
.tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item.is-live:not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item)::after { width: 18px; height: 18px; inset-inline-start: 111px; top: 30px; }
@media (min-width: 600px) {
  :lang(ar) .tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item:is(.is-live, .is-upcoming):not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item)::before,
  :lang(ar) .tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item.is-live:not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item)::after { inset-inline-start: 127px; }
}
/* the next battle's banner: a gold glint crosses it (drawn only with motion) */
.tl-card::before { content: ""; display: none; position: absolute; z-index: 0; inset-block: 0; inset-inline-start: 0; width: 38%; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 231, 163, .16) 48%, rgba(255, 231, 163, .3) 52%, transparent 80%); }
@media (max-width: 599px) {
  .tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item:is(.is-live, .is-upcoming):not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item) .tl-card { padding: var(--sp-5); min-height: 140px; }
  .tl-card::after { width: 50%; }
  .tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item:is(.is-live, .is-upcoming):not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item) .tl-card::after { opacity: .45; width: 40%; }
  .tl-card:has(.tag-pvp)::after { background-size: auto 140%; background-position: 50% 10%; }
}

/* ================= MOTION ================= */
@media (prefers-reduced-motion: no-preference) {
  /* download: the doors swing open on the city, then the keystone breathes */
  .dl-gate-door { display: block; animation: play-door-l 1.6s cubic-bezier(.2, .8, .2, 1) .4s both; }
  .dl-gate-door:nth-child(3) { animation-name: play-door-r; }
  @keyframes play-door-l { from { rotate: y 0deg; } to { rotate: y -80deg; opacity: .85; } }
  @keyframes play-door-r { from { rotate: y 0deg; } to { rotate: y 80deg; opacity: .85; } }
  .dl-gate-arch { animation: play-gate-rise 1.2s cubic-bezier(.2, .9, .3, 1) both; }
  @keyframes play-gate-rise { from { opacity: 0; scale: .94 1; } }
  .dl-gate::after { animation: play-key-shine 3.2s ease-in-out 2s infinite; }
  @keyframes play-key-shine { 50% { scale: 1.25; } }
  /* status: the fire flickers, the glow breathes, sparks rise */
  .tower-glow { animation: play-beacon-glow 2.6s ease-in-out infinite; }
  @keyframes play-beacon-glow { 50% { scale: 1.15; opacity: .65; } }
  .tower-fire i:nth-child(1) { animation: play-flame 1.1s ease-in-out infinite alternate; }
  .tower-fire i:nth-child(2) { animation: play-flame .8s ease-in-out .2s infinite alternate; }
  .tower-fire i:nth-child(3) { animation: play-flame .6s ease-in-out .1s infinite alternate; }
  @keyframes play-flame { from { scale: .92 1; translate: -1px 0; } to { scale: 1.06 1.12; translate: 1px -3px; } }
  .tower[data-status="offline"] .tower-fire i:nth-child(1) { animation-duration: .45s; }
  .tower[data-status="checking"] .tower-fire i { animation-duration: 2.4s; }
  .tower-sparks i { animation: play-spark 2.4s ease-out infinite; }
  .tower-sparks i:nth-child(2) { animation-delay: .6s; } .tower-sparks i:nth-child(3) { animation-delay: 1.2s; } .tower-sparks i:nth-child(4) { animation-delay: 1.8s; }
  @keyframes play-spark { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 1; } 100% { translate: 6px -64px; opacity: 0; } }
  .legend .live { animation: play-beacon-dot 2s ease-in-out infinite; transition: opacity var(--t-base, .25s); }
  .st-main:has(.tower[data-status="online"]) .legend > :not([data-status="online"]) .live,
  .st-main:has(.tower[data-status="maintenance"]) .legend > :not([data-status="maintenance"]) .live,
  .st-main:has(.tower[data-status="offline"]) .legend > :not([data-status="offline"]) .live { animation: none; }
  /* the camp fires flicker, each on its own beat; dark camps stay still */
  .tower-camps i { transition: opacity .8s ease; animation: play-camp 1.3s ease-in-out infinite alternate; }
  .tower-camps i:nth-child(2) { animation-delay: .3s; animation-duration: 1s; } .tower-camps i:nth-child(3) { animation-delay: .7s; }
  .tower-camps i:nth-child(4) { animation-delay: .15s; animation-duration: 1.6s; } .tower-camps i:nth-child(5) { animation-delay: .5s; animation-duration: .9s; }
  .tower-camps i:nth-child(6) { animation-delay: .9s; }
  .tower:is([data-status="offline"], [data-status="checking"]) .tower-camps i { animation: none; }
  @keyframes play-camp { from { translate: 0 1px; } to { translate: 0 -2px; } }
  /* download: the city light swells in while the button is pointed at */
  .dl-gate-arch::after { transition: opacity .5s ease; }
  .dl-gate::after { transition: scale .4s cubic-bezier(.2, .9, .3, 1.4); }
  @keyframes play-beacon-dot { 50% { scale: 1.3; } }

  /* events: the boss breathes, the chosen banner pops, the next battle's art and lantern breathe */
  .ev-boss { animation: play-boss-breathe 4s ease-in-out infinite; }
  @keyframes play-boss-breathe { 50% { translate: 0 -5px; } }
  .ev-tabs .tab[aria-selected="true"] { animation: play-tab-pop .35s cubic-bezier(.2, .9, .3, 1.4) both; }
  @keyframes play-tab-pop { from { scale: .9; } }
  .tl-item.is-live::before { animation: play-lantern 1.6s ease-in-out infinite; }
  @keyframes play-lantern { 50% { scale: 1.35; } }
  .tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item:is(.is-live, .is-upcoming):not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item)::before { animation: play-lantern 2.2s ease-in-out infinite; }
  .tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item:is(.is-live, .is-upcoming):not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item) .tl-card::after { animation: play-art-breathe 6s ease-in-out infinite; }
  @keyframes play-art-breathe { 50% { translate: 0 -4px; } }
  .tl-item.is-live::after { display: block; animation: play-now-ring 2.4s ease-out infinite; }
  @keyframes play-now-ring { 0% { scale: 1; opacity: .9; } 100% { scale: 2.8; opacity: 0; } }
  .tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item:is(.is-live, .is-upcoming):not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item) .tl-card::before {
    display: block; animation: play-glint 5s cubic-bezier(.4, 0, .2, 1) 1.2s infinite; }
  @keyframes play-glint { 0% { translate: -110% 0; opacity: 0; } 8% { opacity: 1; } 30% { translate: 290% 0; opacity: 1; } 34%, 100% { translate: 290% 0; opacity: 0; } }
  [dir="rtl"] .tl-day:not(.tl-day:has(.tl-item:is(.is-live, .is-upcoming)) ~ .tl-day) .tl-item:is(.is-live, .is-upcoming):not(.tl-item:is(.is-live, .is-upcoming) ~ .tl-item) .tl-card::before {
    animation-name: play-glint-rtl; }
  @keyframes play-glint-rtl { 0% { translate: 110% 0; opacity: 0; } 8% { opacity: 1; } 30% { translate: -290% 0; opacity: 1; } 34%, 100% { translate: -290% 0; opacity: 0; } }
  .tl-card { transition: translate var(--t-base); }
  .tl-item:hover .tl-card { translate: 0 -3px; }
}
@media (max-width: 599px) { .tl-item.is-live::after { display: none !important; } }