/* The Characters page: a 3D stage beside each character's description. */
.char-list{display:grid;gap:0;border-top:1px solid var(--line)}
.char{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding:56px 0;border-bottom:1px solid var(--line)}
.char.flip .char-stage{order:2}
.char-stage{position:relative;aspect-ratio:4/5;max-height:640px;width:100%;border:1px solid var(--line);background:radial-gradient(ellipse 70% 55% at 50% 58%,#2a2f27 0%,#161a15 55%,#0c0f0c 100%);overflow:hidden}
.char[data-status=playable] .char-stage{border-top:2px solid var(--s-playable)}
.char[data-status=in-development] .char-stage{border-top:2px solid var(--s-in-development)}
.char-stage model-viewer{width:100%;height:100%;--poster-color:transparent;background:transparent;outline:none}
.char-stage model-viewer:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.char-loading{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff10}
.char-loading span{display:block;height:100%;width:30%;background:var(--accent);animation:char-load 1.4s ease-in-out infinite}
.is-loaded .char-loading,.is-failed .char-loading{display:none}
@keyframes char-load{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.char-hint{position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8f9b82;pointer-events:none;transition:opacity .4s}
.char-stage:not(.is-loaded) .char-hint{opacity:0}
.char-stage.is-soon img{position:absolute;inset:8% 10% 12%;width:80%;height:80%;object-fit:contain;opacity:.9}
.char-soon{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.char-soon b{display:block;font-family:Impact,"Arial Narrow",sans-serif;font-size:26px;font-weight:400;letter-spacing:.06em;color:var(--s-in-development);margin-bottom:4px}
.char-text .eyebrow{margin-bottom:12px}
.char-text h3{font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(40px,4.4vw,62px);font-weight:400;line-height:1;letter-spacing:.02em;margin-bottom:18px}
.char-note{font-size:13px;color:var(--muted);margin-top:12px}
.char-text dl{margin:26px 0 0;display:grid;gap:16px}
.char-text dl div{display:grid;grid-template-columns:110px 1fr;gap:16px}
.char-text dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--accent);padding-top:4px}
.char-text dd{margin:0;font-size:15px;color:#d5d9cc;line-height:1.55}
.char-text blockquote{margin:28px 0 0;border-left:3px solid var(--accent);background:var(--panel-2);padding:16px 20px}
.char-text blockquote p{font-size:17px;font-style:italic;color:var(--ink);line-height:1.45}
.char-size{font-family:monospace;font-size:11px;color:#8f9b82;margin-top:16px;letter-spacing:.06em}
.char-intro{max-width:760px}
.char-intro p{color:var(--muted);font-size:16px}
.char-intro p+p{margin-top:16px}
.char-intro strong{color:var(--ink)}
@media(max-width:900px){
  .char,.char.flip{grid-template-columns:1fr;gap:26px;padding:40px 0}
  .char.flip .char-stage{order:0}
  .char-stage{aspect-ratio:1/1;max-height:none}
  .char-text dl div{grid-template-columns:1fr;gap:4px}
  .char-text dt{padding-top:0}
}