body { background:#15271e; }
.character-lab { max-width:1120px; margin:auto; padding:32px 24px; }
.character-lab header { margin-bottom:24px; }
.character-lab h1 { font:500 clamp(28px,4vw,44px)/1.2 Georgia,serif; margin:.35em 0; }
.character-lab h2 { font-size:1rem; }
.character-lab p { color:#c2cdb7; }
.character-lab a { color:#f0d295; }
.character-controls { display:flex; align-items:end; flex-wrap:wrap; gap:12px; padding:18px; border:1px solid #668160; border-radius:12px; background:#223b2b; }
.character-controls label { display:grid; gap:6px; font-size:.9rem; }
.character-controls select { min-height:42px; }
.character-controls p { width:100%; margin:4px 0 0; }
.character-controls button[aria-pressed="true"] { background:#ced594; color:#243324; }
.character-stages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:28px 0; }
.character-stages > section { min-width:0; text-align:center; }
.character-stage { position:relative; height:280px; overflow:hidden; border-radius:16px; border:2px solid #789058; background:radial-gradient(ellipse at 50% 65%,#d1c290 0 48%,#88a55f 49% 100%); }
.character-stage .pawn.self { left:50%; top:58%; transition:none; }
.character-stages.enlarged .character-renderer { scale:1.36; }
.character-stages.narrow { width:340px; max-width:100%; grid-template-columns:1fr; margin-inline:auto; }
@media(max-width:650px){ .character-lab{padding:18px 14px;} .character-stages{grid-template-columns:1fr;} .character-stage{height:220px;} .character-controls{gap:10px;} }