/* Hand-built 96 x 128 pixel frames. Every atlas uses the same registered body. */
.max-sprite{--max-face:url('assets/max/max-atlas-288x384.png');--max-blink:url('assets/max/max-grin-blink-atlas-288x384.png');display:block;width:120px;aspect-ratio:3/4;background:var(--max-face) 50% 50%/300% 300% no-repeat;image-rendering:pixelated;pointer-events:none;user-select:none;}
.max-sprite[data-emotion=bored],.max-sprite[data-emotion=deadpan]{--max-face:url('assets/max/max-bored-atlas-288x384.png');--max-blink:url('assets/max/max-bored-blink-atlas-288x384.png')}
.max-sprite[data-emotion=annoyed]{--max-face:url('assets/max/max-annoyed-atlas-288x384.png');--max-blink:url('assets/max/max-annoyed-blink-atlas-288x384.png')}
.max-sprite[data-emotion=surprised]{--max-face:url('assets/max/max-surprised-atlas-288x384.png');--max-blink:url('assets/max/max-surprised-blink-atlas-288x384.png')}
.max-sprite[data-idle=blink]{background-image:var(--max-blink)}
.max-sprite:is([data-emotion=grin],:not([data-emotion]))[data-idle=twitch]{background-image:url('assets/max/max-grin-twitch-atlas-288x384.png')}
.max-sprite[data-direction=up-left]{background-position:0% 0%}
.max-sprite[data-direction=up]{background-position:50% 0%}
.max-sprite[data-direction=up-right]{background-position:100% 0%}
.max-sprite[data-direction=left]{background-position:0% 50%}
.max-sprite[data-direction=front]{background-position:50% 50%}
.max-sprite[data-direction=right]{background-position:100% 50%}
.max-sprite[data-direction=down-left]{background-position:0% 100%}
.max-sprite[data-direction=down]{background-position:50% 100%}
.max-sprite[data-direction=down-right]{background-position:100% 100%}
.mascot-slot{pointer-events:none}
@media(max-width:760px){.mascot-slot .max-sprite{width:88px}}
/* Review sheet only: these controls are not part of the portfolio navigation. */
.character-study{max-width:1120px;margin:auto;padding:32px 32px 70px;background:var(--paper);color:var(--ink)}
.character-study header{display:flex;justify-content:space-between;gap:18px;align-items:center;border-bottom:1px solid var(--ink);padding-bottom:20px}
.character-study h1{font-size:clamp(40px,6vw,80px);font-weight:600;letter-spacing:-.075em;line-height:1.05;margin:36px 0 12px}
.character-study .study-intro{max-width:640px;font-size:16px;line-height:1.6;margin-bottom:30px}
.character-study .study-main{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0}
.character-study .study-stage{display:grid;place-items:center;min-height:300px;background:#e5e3d7;position:relative}
.character-study .study-stage .max-sprite{width:180px}
.character-study fieldset{padding:0;margin:0;border:0;min-width:0}
.character-study legend{font:12px var(--mono);margin-bottom:18px}
.character-study .direction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.character-study button{min-height:44px;padding:12px 8px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:12px var(--mono);cursor:pointer}
.character-study button:hover,.character-study button[aria-pressed=true]{background:var(--accent)}
.character-study .follow-button{width:100%;margin-top:10px}
.character-study .emotion-controls{margin-top:24px}
.character-study .emotion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.character-study .idle-controls{display:flex;gap:8px;margin-top:12px}.character-study .idle-controls button{flex:1}
.character-study button:disabled{opacity:.5;cursor:default}
.character-study button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.character-study .emotion-atlas{display:block;width:100%;height:auto;image-rendering:pixelated;background:#e5e3d7}
@media(prefers-reduced-motion:reduce){.max-sprite[data-idle]{background-image:var(--max-face)}}
.character-study .atlas-title{margin:34px 0 16px;font-size:26px;font-weight:500;letter-spacing:-.045em}
.character-study .atlas{display:block;width:min(100%,640px);height:auto;background:#e5e3d7;image-rendering:pixelated;margin:0 auto 22px}
.character-study .study-note{font-size:13px;line-height:1.6;max-width:620px;color:var(--muted);margin-top:16px}
@media(max-width:650px){.character-study{padding:22px 20px 50px}.character-study header{font-size:12px}.character-study .study-main{grid-template-columns:1fr;gap:20px}.character-study .study-stage{min-height:260px}.character-study .study-stage .max-sprite{width:160px}.character-study button{font-size:10px}.character-study .study-intro{font-size:14px}}