/* First Person & the Void Age. Same portal identity and editorial dials as The Void Sentinel, Kingfisher Isle
   and New horizons: it relies on /landing.css, /navigation.css and /patch-notes-feature.css for tokens, fonts and nav.
   Class prefix fp-, body class first-person. */
.first-person { color-scheme: dark; --article-width: 1180px; }
.fp-heading,.fp-cover,.fp-parts,.fp-nav,.fp-story { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.fp-heading { padding:28px 0 30px; }
.fp-heading .back-link { margin-bottom:8px; }
.fp-heading h1 { margin:10px 0 14px; color:var(--gold-hi); font:400 clamp(48px,7vw,84px)/1.05 var(--display); }
.fp-deck { max-width:680px; font-size:clamp(18px,2vw,22px); line-height:1.6; color:#d0c5dd; margin:0 0 16px; }
.fp-upcoming { max-width:46rem; margin:0 0 6px; padding:1rem 1.2rem; border-left:3px solid var(--gold); background:#ddb46512; color:#eddbb7; }
.fp-link { display:inline-flex; align-items:center; min-height:44px; font-weight:600; text-underline-offset:5px; }

/* Screenshots: the frame, the enlarge link and the caption. */
.fp-shot { margin:24px 0; min-width:0; background:#08060d; border:1px solid var(--article-rule); border-radius:10px; overflow:hidden; }
.fp-shot a { display:block; }
.fp-shot img { display:block; width:100%; height:auto; object-fit:contain; }
.fp-shot a:focus-visible { outline-offset:-4px; }
.fp-shot figcaption { padding:12px 16px; color:#bdb1cd; font-size:13px; line-height:1.55; }
.fp-shot-natural img { width:auto; max-width:100%; margin-inline:auto; }
.fp-pixel { image-rendering:pixelated; }
.fp-cover .fp-shot { margin:0; }
.fp-cover img { max-height:600px; object-fit:cover; object-position:50% 50%; }

/* The four parts of the update. */
.fp-parts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:24px; }
.fp-parts a { display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--void-2); border:1px solid var(--article-rule); border-radius:10px; overflow:hidden; }
.fp-parts a:hover { border-color:var(--purple-hi); }
.fp-parts img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:50% 40%; background:#09050b; }
.fp-parts strong { display:block; padding:14px 16px 4px; color:var(--gold-hi); font:400 22px/1.2 var(--display); }
.fp-parts a > span:last-child { display:block; padding:0 16px 16px; color:#bdb1cd; font-size:14px; line-height:1.55; }

.fp-nav { display:flex; gap:8px 26px; flex-wrap:wrap; padding:22px 0; border-bottom:1px solid var(--article-rule); }
.fp-nav a { display:flex; align-items:center; min-height:44px; font-size:14px; text-decoration:none; }
.fp-nav a:hover { color:var(--gold-hi); text-decoration:underline; }

/* Sections. */
.fp-part { margin:0; padding:64px 0 0; color:#a99cb9; font:600 13px/1.4 var(--body); letter-spacing:.12em; text-transform:uppercase; }
.fp-part + .fp-section { padding-top:18px; }
.fp-section { padding:58px 0; border-bottom:1px solid var(--article-rule); scroll-margin-top:90px; }
.fp-section h2 { margin:0 0 22px; font:400 clamp(32px,4vw,48px)/1.15 var(--display); }
.fp-section h3 { font:600 18px/1.4 var(--body); margin:30px 0 10px; color:var(--text); scroll-margin-top:90px; }
.fp-section p { max-width:74ch; font-size:16px; line-height:1.8; color:#c2b7cf; margin:0 0 20px; }
.fp-section strong { color:var(--text); }
.fp-section .fp-lead { font-size:20px; color:#e1d7eb; max-width:64ch; }
.fp-section .fp-note { margin:12px 0 0; font-size:14px; color:#a99cb9; }
.fp-section .fp-facts + p { margin-top:20px; }

.fp-facts { display:grid; gap:14px; margin:20px 0 0; }
.fp-facts-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fp-facts-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.fp-facts-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.fp-facts div { min-width:0; padding:16px 18px; background:var(--void-2); border:1px solid var(--article-rule); border-radius:10px; }
.fp-facts dt { color:#a99cb9; font-size:13px; line-height:1.45; margin:0 0 6px; }
.fp-facts dd { margin:0; color:var(--gold-hi); font:400 24px/1.2 var(--display); overflow-wrap:anywhere; }

.fp-list { max-width:74ch; margin:8px 0 28px; padding:0; list-style:none; }
.fp-list li { padding:12px 0 12px 22px; border-left:2px solid var(--purple); color:#c2b7cf; line-height:1.75; overflow-wrap:break-word; }
.fp-list li + li { margin-top:8px; }

.fp-photo-grid,.fp-grid-3 { display:grid; gap:20px; margin:24px 0; align-items:start; }
.fp-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fp-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fp-photo-grid .fp-shot,.fp-grid-3 .fp-shot { margin:0; }
.fp-feature { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:36px; align-items:center; margin:24px 0; }
.fp-feature .fp-shot { margin:0; }
.fp-feature h3 { margin-top:0; }
.fp-feature .fp-list { margin:0; }
.fp-copy-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 36px; margin:8px 0 10px; }
.fp-copy-columns h3 { margin-top:12px; }

.fp-callout { margin:22px 0; padding:20px 24px; background:var(--void-2); border-left:3px solid var(--purple); border-radius:0 10px 10px 0; }
.fp-callout-gold { border-left-color:var(--gold); }
.fp-section .fp-callout h3 { margin:0 0 8px; color:var(--gold-hi); }
.fp-section .fp-callout p { margin:0; }
.fp-section .fp-callout p + p { margin-top:10px; }

/* Cards side by side: three (the sidebar panels, the mouse look modes) or two (fp-cards-2, currently unused). */
.fp-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:8px; }
.fp-cards-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fp-cards article { min-width:0; padding:22px 22px 20px; background:var(--void-2); border:1px solid var(--article-rule); border-radius:12px; }
.fp-cards h3, .fp-cards h4 { margin:0 0 8px; color:var(--gold-hi); font:400 24px/1.25 var(--display); }
.fp-section .fp-cards p { font-size:15px; line-height:1.7; margin-bottom:14px; }
.fp-section .fp-cards p:last-child { margin-bottom:0; }
.fp-cards .fp-default { display:inline-block; margin-left:6px; padding:1px 8px; border:1px solid var(--gold); border-radius:999px; color:var(--gold-hi); font:600 11px/1.6 var(--body); letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; }

/* Tables. Wide ones scroll inside their own box at phone width, never the page. */
.fp-table-wrap { max-width:100%; overflow-x:auto; margin:18px 0 26px; }
.fp-table-wrap .fp-table { margin:0; }
.fp-table { width:100%; max-width:880px; border-collapse:collapse; margin:18px 0 26px; font-size:15px; line-height:1.55; }
.fp-table caption { text-align:left; color:#a99cb9; font-size:14px; padding:0 0 10px; }
.fp-table th,.fp-table td { padding:11px 14px; border-bottom:1px solid var(--article-rule); vertical-align:top; text-align:left; color:#c2b7cf; }
.fp-table thead th { color:var(--gold-hi); background:var(--void-2); font-size:13px; font-weight:600; }
.fp-table tbody th { color:#e1d7eb; font-weight:500; }
.fp-table td.fp-num { color:var(--gold-hi); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fp-table tr.fp-group th { padding-top:20px; color:var(--purple-hi); font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; background:transparent; }
.fp-items { max-width:none; min-width:760px; }
.fp-items tbody th { white-space:nowrap; min-width:15em; }
.fp-items tbody th img { display:inline-block; width:48px; height:32px; margin:-6px 10px -6px 0; vertical-align:middle; }
.fp-items td.fp-num { white-space:normal; }
kbd { display:inline-block; min-width:1.6em; padding:1px 7px; border:1px solid var(--article-rule); border-bottom-width:2px; border-radius:5px; background:#1b1425; color:var(--text); font:600 13px/1.5 var(--body); text-align:center; }
code.fp-chat { padding:2px 6px; border-radius:5px; background:#1b1425; color:#eddbb7; font:500 14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; overflow-wrap:anywhere; }

/* Items. */
.fp-pieces { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; }
.fp-pieces-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.fp-piece { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; padding:16px 12px; background:radial-gradient(circle at 50% 35%,#2a1f3d,var(--void-2) 72%); border:1px solid var(--article-rule); border-radius:10px; text-align:center; }
.fp-piece img { display:block; width:96px; height:64px; }
.fp-section .fp-piece p { margin:0; font-size:14px; line-height:1.5; }
.fp-piece p strong { display:block; color:var(--gold-hi); font:400 19px/1.25 var(--display); }
.fp-piece p span { display:block; color:#c2b7cf; }

#preview { padding-bottom:48px; }
#preview h2 { font-size:30px; }
#preview p { font-size:14px; }

.fp-lightbox { color:var(--text); background:var(--void); border:1px solid var(--article-rule); border-radius:10px; padding:20px; width:fit-content; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); }
.fp-lightbox::backdrop { background:rgba(0,0,0,.88); }
.fp-lightbox form { display:flex; justify-content:flex-end; margin-bottom:12px; }
.fp-lightbox button { background:var(--void-2); color:var(--text); border:1px solid var(--purple-hi); border-radius:6px; min-height:44px; padding:8px 18px; font:600 14px var(--body); cursor:pointer; }
.fp-lightbox img { max-width:100%; max-height:calc(100dvh - 180px); width:auto; height:auto; display:block; margin:auto; }
.fp-lightbox img.fp-pixel-view { image-rendering:pixelated; }
.fp-lightbox p { font-size:14px; line-height:1.6; margin:16px 0 0; max-width:80ch; }

.first-person .vs-nav-play { color:#211624; }

@media(max-width:1000px) {
  .fp-parts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fp-facts-5 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .fp-cards { grid-template-columns:minmax(0,1fr); }
  .fp-cards-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fp-pieces-5 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:820px) {
  .fp-grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fp-feature { grid-template-columns:minmax(0,1fr); gap:20px; }
  .fp-cards-2 { grid-template-columns:minmax(0,1fr); }
  .fp-copy-columns { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:640px) {
  .fp-heading,.fp-cover,.fp-parts,.fp-nav,.fp-story { width:calc(100% - 32px); }
  .fp-heading { padding-top:18px; }
  .fp-heading h1 { font-size:46px; }
  .fp-cover img { aspect-ratio:4/3; object-fit:cover; object-position:50% 50%; }
  .fp-parts { grid-template-columns:minmax(0,1fr); gap:10px; }
  .fp-parts a { display:grid; grid-template-columns:112px minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:14px; align-items:start; }
  .fp-parts img { grid-row:1 / span 2; height:100%; min-height:84px; aspect-ratio:auto; }
  .fp-parts strong { padding:12px 12px 2px 0; font-size:19px; }
  .fp-parts a > span:last-child { padding:0 12px 12px 0; font-size:13px; }
  .fp-nav { gap:0 22px; padding-block:14px; }
  .fp-section { padding:38px 0; }
  .fp-part { padding-top:44px; }
  .fp-section .fp-lead { font-size:18px; }
  .fp-facts-3,.fp-facts-4,.fp-facts-5 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .fp-facts div { padding:13px 14px; }
  .fp-facts dd { font-size:20px; }
  .fp-photo-grid,.fp-grid-3 { grid-template-columns:minmax(0,1fr); gap:16px; }
  .fp-pieces, .fp-pieces-5 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .fp-piece { padding:12px 6px; }
  .fp-piece img { width:72px; height:48px; }
  .fp-piece p strong { font-size:16px; }
  .fp-section .fp-piece p { font-size:12px; }
  .fp-table { font-size:14px; }
  .fp-table th,.fp-table td { padding:9px 8px; }
  .fp-callout { padding:16px 16px; }
  #preview h2 { font-size:26px; }
  /* The 21 rewards stack as one card per item on phones: name, then a labelled line per column. */
  .fp-table-wrap:has(.fp-items) { overflow-x:visible; }
  .fp-items { display:block; min-width:0; }
  .fp-items thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .fp-items tbody, .fp-items tr, .fp-items tbody th, .fp-items td { display:block; }
  .fp-items tbody tr { padding:12px 0; border-bottom:1px solid var(--article-rule); }
  .fp-items tbody tr.fp-group { padding:0; border-bottom:0; }
  .fp-items tbody th, .fp-items td { padding:2px 0; border-bottom:0; }
  .fp-items tbody th { white-space:normal; padding-bottom:6px; font-size:16px; }
  .fp-items tr.fp-group th { padding:22px 0 6px; }
  .fp-items td { display:grid; grid-template-columns:8.5em minmax(0,1fr); gap:10px; }
  .fp-items td::before { content:attr(data-label); color:#a99cb9; font-size:13px; }
}
@media(max-width:400px) {
  .fp-heading h1 { font-size:40px; }
  .fp-piece p strong { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) { .first-person *, .first-person *::before, .first-person *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }