/* Inner pages (pages_src/ -> tools/build_pages.py): news, download, events, server status.
   One page head for all; each page then uses the shared components (components.css). */

/* ================= PAGE HEAD ================= */
.page-head { position: relative; isolation: isolate; padding-block: calc(96px + var(--sp-8)) var(--sp-8); overflow: hidden;
  background: radial-gradient(60% 120% at 80% 0%, rgba(43, 76, 160, .28), transparent 70%), var(--night-950); }
.page-head::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 169, 59, .5), transparent); }
.page-mark { position: absolute; z-index: -1; inset-block-start: 116px; inset-inline-end: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  width: 190px; height: 190px; opacity: .08; pointer-events: none; }
.page-title { font-size: var(--fs-h1, clamp(2.5rem, 1.8rem + 2.6vw, 4rem)); color: var(--sand-50); }
.page-lead { margin-top: var(--sp-3); max-width: 60ch; color: var(--sand-300); font-size: 1.125rem; }
.page-body { padding-block: var(--sp-8) var(--sp-9); }
.muted { color: var(--text-3); font-size: .875rem; }

/* ================= EVENTS TIMELINE ================= */
.timeline { margin-top: var(--sp-6); display: grid; gap: var(--sp-7); }
.tl-day h2 { font-size: 1.375rem; color: var(--sand-50); margin-bottom: var(--sp-4); }
.tl-day h2 small { margin-inline-start: var(--sp-3); color: var(--text-3); font: 500 .875rem var(--font-body); }
.tl-list { list-style: none; padding: 0; position: relative; display: grid; gap: var(--sp-3); }
.tl-list::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 119px; width: 1px; background: linear-gradient(rgba(226, 169, 59, .5), rgba(226, 169, 59, .1)); }
.tl-item { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-6); align-items: start; }
.tl-time { padding-top: var(--sp-4); text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-time small { display: block; color: var(--text-3); font-weight: 500; font-size: .8125rem; }
.tl-item::before { content: ""; position: absolute; inset-inline-start: 115px; top: 24px; width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--copper-500); box-shadow: 0 0 0 3px var(--night-950); }
.tl-card { padding: var(--sp-4) var(--sp-5); display: grid; gap: 6px; }
.tl-card .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.tl-card h3 { font-size: 1.1875rem; }
.tl-where { color: var(--text-2); font-size: .9375rem; }
.tl-state { font-size: .875rem; font-weight: 600; color: var(--copper-300); }
.tl-item.is-live::before { background: var(--turq-500); box-shadow: 0 0 0 3px var(--night-950), 0 0 12px 2px rgba(43, 184, 166, .6); }
.tl-item.is-live .tl-card { box-shadow: inset 0 0 0 1px rgba(43, 184, 166, .45), 0 24px 48px -24px rgba(4, 7, 16, .9); }
.tl-item.is-live .tl-state { color: var(--turq-300); }
.tl-item.is-ended { opacity: .5; }
.tl-item.is-ended::before { background: var(--night-600); }
.tl-item.is-ended .tl-state { color: var(--text-3); }
.tl-msg { padding: var(--sp-7); text-align: center; color: var(--text-3); }
.tl-tz { margin-top: var(--sp-6); }
.tag-pvp { background-image: url("../img/brand/tag-maintenance.webp"); }
.tag-boss { background-image: url("../img/brand/tag-special.webp"); }
.tag-activity { background-image: url("../img/brand/tag-news.webp"); }
.tag-server { background-image: url("../img/brand/tag-notice.webp"); }
@media (max-width: 599px) {
  .tl-list::before, .tl-item::before { display: none; }
  .tl-item { grid-template-columns: 1fr; gap: var(--sp-2); }
  .tl-time { padding-top: 0; text-align: start; }
}

/* ================= SERVER STATUS ================= */
.stat-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: var(--sp-5); }
.stat dt { color: var(--text-3); font-size: .8125rem; }
.stat dd { margin: var(--sp-2) 0 0; display: flex; align-items: center; gap: var(--sp-3); font: 600 1.75rem/1.1 var(--font-body); font-variant-numeric: tabular-nums; }
.stat .live { width: 12px; height: 12px; }
.stat-updated { margin-top: var(--sp-4); }
.legend { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); }
@media (min-width: 900px) { .legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.legend > div { padding: var(--sp-5); }
.legend h3 { display: flex; align-items: center; gap: var(--sp-3); font-size: 1.25rem; margin-bottom: var(--sp-2); }
.legend p { color: var(--text-2); }

/* ================= DOWNLOAD ================= */
.dl-grid { display: grid; gap: var(--sp-5); align-items: stretch; }
@media (min-width: 960px) { .dl-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.dl-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-7) var(--sp-6); text-align: center; }
.dl-card .fw-mark { display: block; width: 120px; height: 120px; margin: 0 auto var(--sp-5); filter: drop-shadow(0 12px 24px rgba(4, 7, 16, .8)); }
.dl-card .btn { margin-block: var(--sp-5) var(--sp-4); }
.dl-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--sp-4); width: 100%; max-width: 560px; margin-top: var(--sp-2);
  padding-top: var(--sp-5); border-top: 1px solid rgba(226, 169, 59, .25); color: var(--text-3); font-size: .8125rem; }
.dl-meta span { display: grid; gap: 4px; }
.dl-meta b { color: var(--text); font-weight: 600; font-size: .9375rem; }
.steps { list-style: none; padding: 0; display: grid; grid-auto-rows: 1fr; gap: var(--sp-3); }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: center; padding: var(--sp-5) var(--sp-6); }
.steps h3 { font-size: 1.125rem; margin-bottom: 4px; }
.steps p { color: var(--text-2); font-size: .9375rem; }

/* ================= NEWS (full list) ================= */
.news-page .tabs { margin-bottom: var(--sp-5); }
.news-page .news-list a { grid-template-columns: auto 1fr auto; align-items: center; padding-block: var(--sp-5);
  border-bottom: 1px solid rgba(246, 238, 223, .06); }
.news-page .news-list .t { grid-column: auto; }
.news-page .news-list .x { grid-column: 2 / -1; color: var(--text-2); font-size: .9375rem; }
@media (max-width: 599px) { .news-page .news-list a { grid-template-columns: 1fr auto; } .news-page .news-list .t, .news-page .news-list .x { grid-column: 1 / -1; } }

/* ================= MOBILE (checked at 390 px in real iframes, not a narrowed window) ================= */
.dl-grid > *, .steps li > div, .tl-card { min-width: 0; }
.dl-card .section-title { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem); }
@media (max-width: 767px) {
  .page-head { padding-block: calc(84px + var(--sp-6)) var(--sp-6); }
  .page-mark { inset-block-start: 84px; inset-inline-end: var(--gutter); width: 112px; height: 112px; opacity: .06; }
  .page-lead { font-size: 1rem; }
  .page-body { padding-block: var(--sp-6) var(--sp-8); }
  .dl-card { padding: var(--sp-6) var(--sp-4); }
  .dl-card .fw-mark { width: 96px; height: 96px; }
  .dl-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-2); }
  .steps li { padding: var(--sp-4); gap: var(--sp-4); }
  .steps .medal { --m: 48px; }
  .stat dd { font-size: 1.5rem; }
}

/* ================= LEGAL (terms, privacy): one readable column ================= */
.legal > * { max-width: 72ch; }
.legal-note { display: inline-block; margin-bottom: var(--sp-6); padding: 6px 12px; border-radius: 2px; color: var(--copper-300); font-size: .875rem;
  background: rgba(226, 169, 59, .1); box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .35); }
.legal h2 { margin: var(--sp-7) 0 var(--sp-3); font-size: 1.5rem; color: var(--sand-50); }
.legal h2:first-of-type { margin-top: 0; }
.legal ul { display: grid; gap: var(--sp-2); padding-inline-start: 1.2em; color: var(--text-2); }
.legal li::marker { color: var(--copper-500); }
.legal p { color: var(--text-2); margin-top: var(--sp-3); }

/* ================= GUIDE ================= */
.guide-page .tabs { margin-bottom: var(--sp-6); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--sp-4); align-items: stretch; }
@media (min-width: 720px) { .guide-grid { grid-auto-rows: 1fr; } }   /* one size for every card when they stand side by side (owner 2026-10-16) */
.guide-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); }
.guide-card[hidden] { display: none; }
.guide-top { display: flex; align-items: center; gap: var(--sp-4); }
.guide-top .medal { --m: 52px; }
.guide-top h2 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); color: var(--sand-50); }
.guide-lead { color: var(--sand-300); font-size: 1rem; line-height: 1.6; }
.guide-facts { list-style: none; padding: var(--sp-4) 0 0; margin: 0; display: grid; gap: var(--sp-3); box-shadow: inset 0 1px 0 rgba(246, 238, 223, .12); }
.guide-facts li { position: relative; padding-inline-start: 22px; color: var(--text-2); font-size: .9375rem; line-height: 1.6; }
.guide-facts li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 7px; height: 7px; background: #E2A93B; rotate: 45deg; }
.guide-card .link { align-self: flex-start; margin-top: auto; }
.guide-more { margin-top: var(--sp-7); color: var(--text-3); text-align: center; }
@media (max-width: 599px) { .guide-card { padding: var(--sp-5); } }

/* ================= NEWS (drawn from news.json) ================= */
.news-empty { padding: var(--sp-7) 0; color: var(--text-3); text-align: center; }
.news-page .news-list li.is-lead a { display: block; padding-top: 0; }
.news-page .news-list li.is-lead .tag { display: inline-block; vertical-align: middle; margin-inline-end: var(--sp-3); }
.news-page .news-list li.is-lead time { vertical-align: middle; }
.news-page .news-list li.is-lead .t { display: block; margin-top: var(--sp-3); }
.news-page .news-list li.is-lead .x { display: block; margin-top: var(--sp-2); max-width: 70ch; }
.news-page .news-list .lead-media { grid-column: 1 / -1; position: relative; display: block; aspect-ratio: 21 / 9; margin-bottom: var(--sp-4); overflow: hidden; clip-path: var(--clip-cut); background: var(--night-800); }
.news-page .news-list .lead-media > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.news-page .news-list .lead-media .char { position: absolute; bottom: 0; inset-inline-end: 8%; height: 96%; width: auto; object-fit: contain; filter: drop-shadow(0 20px 24px rgba(4, 7, 16, .65)); }
.news-page .news-list li.is-lead .t { font-family: var(--font-head); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

/* ================= ONE NEWS ITEM (article.html?n=slug) ================= */
.art-head { position: relative; isolation: isolate; min-height: min(78vh, 680px); display: flex; align-items: flex-end; padding-block: calc(96px + var(--sp-8)) var(--sp-8); overflow: hidden; }
.art-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.art-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--night-950) 4%, rgba(7, 11, 24, .55) 45%, rgba(7, 11, 24, .25) 100%), linear-gradient(90deg, rgba(7, 11, 24, .85), transparent 65%); }
[dir="rtl"] .art-head::before { background: linear-gradient(0deg, var(--night-950) 4%, rgba(7, 11, 24, .55) 45%, rgba(7, 11, 24, .25) 100%), linear-gradient(-90deg, rgba(7, 11, 24, .85), transparent 65%); }
.art-figure { position: absolute; z-index: -1; bottom: 0; inset-inline-end: max(var(--gutter), calc((100vw - var(--container)) / 2)); height: 88%; width: auto; max-width: 46%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 24px 30px rgba(4, 7, 16, .7)); }
.art-head .container { width: 100%; }
.art-head .page-title, .art-head .page-lead { max-width: 22ch; }
.art-head .page-lead { max-width: 54ch; }
.art-back { display: inline-block; margin-bottom: var(--sp-5); color: var(--text-2); font-size: .9375rem; }
[dir="rtl"] .art-back:hover { color: var(--copper-300); }
.art-meta { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); color: var(--text-2); font-size: .9375rem; }
.art-wrap { padding-block: var(--sp-8) var(--sp-9); }
.art-body { max-width: 68ch; }
.art-body p { color: var(--sand-200, #e9dfcb); font-size: 1.125rem; line-height: 1.85; }
.art-body p + p { margin-top: var(--sp-5); }
.art-body p:first-child::first-letter { float: inline-start; font-family: var(--font-head); font-size: 3.4em; line-height: .9; margin-inline-end: .12em; color: #E2A93B; }
:lang(ar) .art-body p:first-child::first-letter { float: none; font-size: inherit; margin: 0; color: inherit; }
.art-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-8); }
.art-step { display: grid; gap: 6px; padding: var(--sp-5) var(--sp-6); transition: box-shadow var(--t-base); }
.art-step small { color: var(--text-3); font-size: .8125rem; }
.art-step span { font-family: var(--font-head); font-size: 1.125rem; color: var(--sand-50); }
.art-step:hover span { color: var(--copper-300); }
.art-step.is-next { text-align: end; }
.art-missing { padding-block: calc(96px + var(--sp-9)) var(--sp-9); text-align: center; }
.art-missing .link { display: inline-block; margin-top: var(--sp-5); }
@media (max-width: 767px) { .art-figure { opacity: .35; max-width: 70%; } .art-nav { grid-template-columns: 1fr; } .art-step.is-next { text-align: start; } }

/* ================= 404 (served by nginx / Laravel for any missing page) ================= */
.lost { position: relative; isolation: isolate; min-height: 100dvh; display: grid; align-items: center; overflow: hidden; text-align: center; }
.lost-bg { position: absolute; inset: 0; z-index: -2; background: url("../img/art/A-03_hero_1280.webp") center 40% / cover; filter: brightness(.45) saturate(.9); }
.lost::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 50%, rgba(7, 11, 23, .35), rgba(7, 11, 23, .92)); }
.lost-inner { padding-block: 140px 80px; }
.lost-code { font: clamp(7rem, 4rem + 14vw, 14rem)/.9 var(--font-head); color: transparent; -webkit-text-stroke: 2px #E2A93B; opacity: .85; margin-bottom: var(--sp-4); }
.lost .page-title::after { margin-inline: auto; }
.lost .page-lead { margin-inline: auto; }
.lost-cta { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); justify-content: center; align-items: center; margin-top: var(--sp-7); }

/* the download steps stand on a gold road (owner 2026-10-16). The road runs in its own lane beside the cards; it is drawn as
   one segment per step, inside that step, under its medal - so the medal stays over the road even when the scroll reveal
   turns each card into its own layer. A short gold arm joins each medal to its card. */
.dl-road { --lane: 84px; --mid: 34px; --gap: var(--sp-3); position: relative; padding-inline-start: var(--lane); }
.dl-road li { grid-template-columns: 1fr; position: relative; }
.dl-road li::before { content: ""; position: absolute; z-index: 1; pointer-events: none; width: 3px;
  inset-inline-start: calc(var(--mid) - var(--lane)); translate: -50% 0; top: calc(var(--gap) / -2 - 1px); bottom: calc(var(--gap) / -2 - 1px);
  background: linear-gradient(180deg, #F6CF79, #E2A93B); box-shadow: 0 0 12px rgba(244, 198, 92, .4); transform-origin: top; }
[dir="rtl"] .dl-road li::before { translate: 50% 0; }
.dl-road li:first-child::before { top: 50%; }
.dl-road li:last-child::before { bottom: 50%; }
.dl-road .medal { --m: 52px; position: absolute; z-index: 2; inset-inline-start: calc(var(--mid) - var(--lane) - var(--m) / 2); top: 50%; translate: 0 -50%;
  box-shadow: 0 0 0 5px var(--night-900), 0 0 0 6px rgba(226, 169, 59, .45); }
.dl-road .medal::after { content: ""; position: absolute; top: 50%; inset-inline-start: calc(100% + 5px); width: calc(var(--lane) - var(--mid) - var(--m) / 2 - 5px); height: 2px; translate: 0 -50%;
  background: linear-gradient(90deg, #E2A93B, rgba(226, 169, 59, .35)); }
[dir="rtl"] .dl-road .medal::after { background: linear-gradient(-90deg, #E2A93B, rgba(226, 169, 59, .35)); }
@media (prefers-reduced-motion: no-preference) {
  .dl-road li::before { animation: road-down .5s linear both; }
  .dl-road li:nth-child(1)::before { animation-delay: .5s; } .dl-road li:nth-child(2)::before { animation-delay: 1s; }
  .dl-road li:nth-child(3)::before { animation-delay: 1.5s; } .dl-road li:nth-child(4)::before { animation-delay: 2s; }
  @keyframes road-down { from { scale: 1 0; } }
  .dl-road .medal { animation: stop-pop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
  .dl-road li:nth-child(1) .medal { animation-delay: .4s; } .dl-road li:nth-child(2) .medal { animation-delay: .9s; }
  .dl-road li:nth-child(3) .medal { animation-delay: 1.4s; } .dl-road li:nth-child(4) .medal { animation-delay: 1.9s; }
  @keyframes stop-pop { from { scale: .3; opacity: 0; } }
}
/* a comet runs the road from stop to stop (owner 2026-10-16: the spark on every road); the steps are equal height (grid 1fr),
   so from this medal (50%) to the next one is 100% + the gap. Inside the step, so it passes under the medals. */
.dl-road li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; pointer-events: none; width: 5px; height: 34px; margin-top: -34px; opacity: 0;
  inset-inline-start: calc(var(--mid) - var(--lane)); translate: -50% 0; top: 50%; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 231, 163, 0), #FFE7A3 75%, #FFFFFF); box-shadow: 0 6px 12px 2px rgba(255, 220, 140, .55); }
[dir="rtl"] .dl-road li:not(:last-child)::after { translate: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .dl-road li:not(:last-child)::after { animation: dl-comet 3.6s cubic-bezier(.45, 0, .55, 1) 2.6s infinite; }
  .dl-road li:nth-child(2)::after { animation-delay: 3.5s; } .dl-road li:nth-child(3)::after { animation-delay: 4.4s; }
  @keyframes dl-comet { 0% { top: 50%; opacity: 0; } 3% { opacity: 1; } 22% { opacity: 1; } 25% { top: calc(150% + var(--gap)); opacity: 0; } 100% { top: calc(150% + var(--gap)); opacity: 0; } }
}
@media (max-width: 599px) { .dl-road { --lane: 64px; --mid: 24px; } .dl-road .medal { --m: 42px; } }

/* ---------- questions and answers (faq.html, Manager #28112): three groups of plain open/close answers ---------- */
.faq { display: grid; gap: var(--sp-8); max-width: 820px; margin-inline: auto; }
.faq-group { display: grid; gap: var(--sp-3); }
.faq-title { margin-bottom: var(--sp-2); font-size: var(--fs-h3); color: var(--sand-50); }
.faq-item { padding: 0; }
.faq-item summary { position: relative; display: flex; align-items: center; min-height: 56px; padding: var(--sp-3) var(--sp-5); padding-inline-end: 52px;
  color: var(--text); font-weight: 600; font-size: 1.0625rem; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; inset-inline-end: var(--sp-5); top: 50%; translate: 0 -50%; color: #F4C65C; font: 400 1.5rem/1 var(--font-body); }
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:focus-visible { outline: 2px solid var(--copper-300); outline-offset: -2px; }
.faq-item[open] summary { color: #F4C65C; }
.faq-item p { margin: 0; padding: 0 var(--sp-5) var(--sp-4); color: var(--text-2); line-height: 1.75; }
.faq-item .link { display: inline-flex; align-items: center; min-height: 44px; margin: calc(var(--sp-2) * -1) var(--sp-5) var(--sp-3); }

/* lists drawn after the data arrives (news, events): the page body is at least one screen tall, so the footer starts below the fold and does not jump up and down while the list loads (Lighthouse CLS 0.67 / 0.27) */
main > .page-body:has([data-news=list], #timeline) { min-height: 100svh; }