/* ===== Graphic: character select card ===== */
.px-card{background:var(--surface);padding:18px;box-shadow:0 -4px 0 var(--accent),0 4px 0 var(--accent),-4px 0 0 var(--accent),4px 0 0 var(--accent),10px 10px 0 #05040C}
.px-top{display:flex;justify-content:space-between;font:400 .62rem/1 "Press Start 2P",monospace;color:var(--accent);margin-bottom:16px}
.px-body{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:start}
.sprite{width:120px;height:120px;display:block;background:#0B0918;box-shadow:inset 0 0 0 4px #2E2856}
.px-name{font:400 .95rem/1.55 "Press Start 2P",monospace;color:#fff;margin-bottom:8px;overflow-wrap:anywhere}
.px-class{font-size:.9rem;color:var(--muted);margin-bottom:8px}
.stat{display:grid;grid-template-columns:34px minmax(0,1fr) 22px;align-items:center;gap:8px;font:400 .52rem "Press Start 2P",monospace;margin:7px 0}
.bar{height:10px;background:#0B0918;box-shadow:0 0 0 2px #2E2856}
.bar i{display:block;height:100%;background:var(--c)}
.px-foot{margin-top:18px;text-align:center;font:400 .66rem "Press Start 2P",monospace;color:var(--accent2);animation:px-blink 1.1s step-end infinite}
/* Hard on/off blink: never half-transparent, so the text always meets contrast when shown */
@keyframes px-blink{50%{visibility:hidden}}
@media (max-width:420px){.px-body{grid-template-columns:84px minmax(0,1fr)}.sprite{width:84px;height:84px}}
/* Character: 8-bit arcade, graphic left */
body[data-gen="character"]{--paper:#120F24;--surface:#1D1838;--ink:#F2F0FF;--muted:#ABA5D3;--line:#3A3366;--chip:#2A234E;
  --accent:#FFD23F;--accent2:#3DDC97;--action:#DE2C5F;--on-action:#fff;--display:"Press Start 2P",monospace;--radius:0px;--pill:0px;--btn:0px;--good:#3DDC97;--warn:#FFD23F;
  color-scheme:dark;background-image:radial-gradient(#ffffff26 1px,transparent 1.3px),radial-gradient(#ffffff12 1px,transparent 1.3px);background-size:40px 40px,17px 17px;background-position:0 0,9px 13px}
body[data-gen="character"] .hero{grid-template-columns:minmax(0,440px) minmax(0,1fr);grid-template-areas:"feat head" "feat controls"}
body[data-gen="character"] h1{font-size:clamp(1.3rem,2.8vw,2rem);line-height:1.45;font-weight:400;letter-spacing:0;color:var(--accent);text-shadow:4px 4px 0 #6B2A8C}
body[data-gen="character"] .panel{border:0;box-shadow:0 -4px 0 var(--line),0 4px 0 var(--line),-4px 0 0 var(--line),4px 0 0 var(--line)}
body[data-gen="character"] .field legend{font:400 .6rem/1.6 "Press Start 2P",monospace;color:var(--accent2)}
body[data-gen="character"] .opt[aria-pressed="true"]{background:var(--accent);color:#120F24;border-color:var(--accent)}
body[data-gen="character"] .btn{border:0;box-shadow:0 -3px 0 var(--line),0 3px 0 var(--line),-3px 0 0 var(--line),3px 0 0 var(--line);margin:3px}
body[data-gen="character"] .btn.primary{box-shadow:0 -3px 0 #B8234A,0 3px 0 #B8234A,-3px 0 0 #B8234A,3px 0 0 #B8234A,0 7px 0 #7D1633}
body[data-gen="character"] .feat-meta .why{display:none}
body[data-gen="character"] .list{border-top:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
body[data-gen="character"] .row{background:var(--surface);border:0;box-shadow:0 -3px 0 var(--line),0 3px 0 var(--line),-3px 0 0 var(--line),3px 0 0 var(--line)}
body[data-gen="character"] .row.on{box-shadow:0 -3px 0 var(--accent),0 3px 0 var(--accent),-3px 0 0 var(--accent),3px 0 0 var(--accent)}
body[data-gen="character"] .row.on::before{display:none}
body[data-gen="character"] .row-name{font-size:.8rem;line-height:1.6;font-weight:400;font-stretch:100%}
body[data-gen="character"] .badge{border-radius:0;font:400 .5rem/1.4 "Press Start 2P",monospace;background:#352C64;color:var(--accent)}
body[data-gen="character"] .results-head h2,body[data-gen="character"] .prose h2,body[data-gen="character"] .side h2{font-weight:400;font-size:.95rem;line-height:1.5;color:var(--accent)}
@media (min-width:600px) and (max-width:880px){html body[data-gen="character"] .list{grid-template-columns:repeat(2,minmax(0,1fr))}}