.character-art { display:block; background-image:var(--atlas); background-size:300% 200%; background-repeat:no-repeat; background-position:0 0; aspect-ratio:1; }
.character-cover { display:flex; align-items:flex-end; justify-content:center; width:min(80%,550px); max-width:none; border:0; box-shadow:none; margin:8% auto; }
.character-cover .character-art { width:40%; flex-shrink:0; filter:drop-shadow(0 5px 3px #07172290); }
.character-cover .character-art+.character-art { margin-left:-10%; }
.character-cover .character-art:nth-child(2) { z-index:1; transform:translateY(-8%); }
.pawn { --base:#e5ac62; width:5.65%; height:auto; aspect-ratio:1; border:0; border-radius:0; background:none; box-shadow:none; isolation:isolate; }
.pawn.purple,.character-portrait.purple { --base:#d6b0ff; }
.pawn.pink,.character-portrait.pink { --base:#ffc3d8; }
.pawn.blue,.character-portrait.blue { --base:#a9e1ff; }
.pawn.mummy,.character-portrait.mummy { --base:#b6eff3; }
.pawn::before { content:''; position:absolute; z-index:-1; left:8%; right:8%; top:61%; height:28%; border:2px solid var(--base); border-radius:50%; background:#163c43; box-shadow:0 3px 2px #071722b3; }
.pawn .character-art { position:absolute; width:108%; left:-4%; bottom:17%; border:0; border-radius:0; filter:drop-shadow(0 2px 1px #07172280); }
.pawn .pawn-label { position:absolute; bottom:-13%; right:-8%; border:1px solid var(--base); background:#102433; color:#fff0ce; width:19px; height:19px; border-radius:50%; display:grid; place-items:center; font-weight:bold; font-size:10px; line-height:1; }
.pawn .role-seal { position:absolute; top:12%; left:42%; width:24%; height:36%; border-radius:2px; object-fit:cover; transform:rotate(-9deg); }
.pawn.active { outline:0; }
.pawn.active::before { border-color:#fff0ce; box-shadow:0 0 0 3px #102433,0 0 0 5px #fff0ce,0 4px 4px #071722b3; }
.pawn.preview .character-art { opacity:.8; }
.pawn.preview::before { border-style:dashed; }
.pawn .character-art[data-pose="1"] { animation:character-greet .5s ease-out; }
.pawn .character-art[data-pose="2"] { animation:character-startled .42s ease-out; }
.pawn .character-art[data-pose="3"] { animation:character-cheer .65s ease-out; }
@keyframes character-greet { 0%,100%{transform:rotate(0)} 35%{transform:rotate(-7deg)} 70%{transform:rotate(5deg)} }
@keyframes character-startled { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5%)} 65%{transform:translateX(5%)} }
@keyframes character-cheer { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-17%)} 70%{transform:translateY(-4%)} }
.character-portrait { --base:#e5ac62; position:relative; flex:0 0 40px!important; width:40px; height:42px; align-self:center; border-bottom:3px solid var(--base); }
.character-portrait .character-art { width:40px; height:40px; }
.character-portrait .role-seal { position:absolute; left:17px; top:5px; width:10px; height:16px; border-radius:1px; }
.character-flight { position:fixed; z-index:100; width:64px; pointer-events:none; }
.calm .character-art,.reduced .character-art { animation:none!important; }
@media(max-width:699px) { .character-portrait { flex-basis:34px!important; width:34px; height:37px; } .character-portrait .character-art { width:34px; height:34px; } }
@media(prefers-reduced-motion:reduce) { .character-art { animation:none!important; } }