/* Every portrait cell is square and shown in full, including its cloak. */
.portrait,.portrait.personal,.avatar-options .portrait,.avatar-options .portrait.personal {
  background-image:url('/static/art/portraits-cloaks.png');
  background-size:400% 300%;background-position:0 0;background-repeat:no-repeat;
  background-clip:padding-box;border-radius:12px;aspect-ratio:1;
}
.avatar-options .portrait {height:auto;width:100%;border-radius:12px;}
.sidebar-bottom .portrait,.character-mini .portrait {width:48px;height:48px;flex-shrink:0;}
.mobile-character .portrait {width:32px;height:32px;}
.avatar-options input:focus-visible + .portrait {outline:3px solid #346f76;outline-offset:3px;}
.photo-studio {padding:18px;border:1px solid #ccd9b8;border-radius:12px;background:#f0f5e5;margin:20px 0;}
.photo-studio h3 {font-size:20px;margin:0 0 8px;}
.photo-studio p {margin:10px 0 0;line-height:1.6;}
.photo-actions {display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;}
.photo-upload {cursor:pointer;display:inline-block;position:relative;}
#photoUpload {width:1px;height:1px;margin:0;}
#characterForm .form-grid {grid-template-columns:minmax(0,1fr);}
.photo-upload:focus-within {outline:2px solid #346f76;outline-offset:3px;}
#cameraPreview,#photoPreview {display:block;width:100%;max-height:290px;object-fit:contain;background:#e0ead4;border-radius:10px;margin-top:14px;}
#cameraPreview {transform:scaleX(-1);}
.item-art {display:block;flex:0 0 64px;width:64px;height:64px;background-image:url('/static/art/equipment-sunlit.png');background-size:300% 200%;background-repeat:no-repeat;border-radius:10px;}
.item-staff {background-position:0 0;}.item-sword {background-position:50% 0;}.item-sunblade {background-position:100% 0;}
.item-chime {background-position:0 100%;}.item-cloak-pin {background-position:50% 100%;}.item-tonic {background-position:100% 100%;}
.inventory-item {gap:12px;}.inventory-item>div {flex:1;min-width:0;}.inventory-item button {flex-shrink:0;}
#tonicControls {display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
#tonicControls p {flex:1;}
.creature-art {width:min(100%,290px);aspect-ratio:1;margin:0 auto 18px;background-image:url('/static/art/creatures-sunlit.png');background-size:300% 100%;background-repeat:no-repeat;border-radius:24px;box-shadow:0 8px 28px #61894320;}
.creature-0 {background-position:0 0;}.creature-1 {background-position:50% 0;}.creature-2 {background-position:100% 0;}
.creature-art.settled {box-shadow:0 0 0 3px #aecf8970;}
@media(max-width:560px){.inventory-item{flex-wrap:wrap;}.inventory-item button{margin-left:auto;}.item-art{width:52px;height:52px;flex-basis:52px;}.photo-studio{padding:13px;}.photo-actions .primary{width:100%;}}