/* A collectible character portrait, with sharing as the primary action. */
.screen.summary{width:min(100%,520px);height:100dvh;min-height:480px;padding:12px 22px max(10px,env(safe-area-inset-bottom));gap:8px}
.summary .summary-top{min-height:36px;height:36px;flex-shrink:0;justify-content:space-between}
.result-eyebrow{font-size:11px;letter-spacing:.12em;font-weight:800;color:var(--muted)}
.summary-controls{display:flex;align-items:center}
.summary-controls .text-button{width:40px;font-size:16px}
.summary .result-content{padding:0;min-height:0;display:block;flex:1}
.summary .score-panel{height:100%;display:grid;grid-template-rows:minmax(130px,1fr) auto;gap:0;text-align:center;position:relative;border:2px solid var(--ink);border-radius:3px;background:#efeede;box-shadow:4px 4px 0 var(--ink);overflow:hidden}
.portrait-stage{position:relative;min-height:0;width:100%;height:100%;display:grid;place-items:center;isolation:isolate}
.portrait-stage::before{content:'';position:absolute;width:72%;aspect-ratio:1;border-radius:50%;background:var(--acid);z-index:-1;max-height:90%;max-width:90%}
.portrait-stage::after{content:'✳';position:absolute;left:8%;bottom:9%;font-size:34px;transform:rotate(12deg);color:var(--ink);z-index:-1}
.result-character{display:block;width:96%;height:100%;min-height:0;max-height:390px;object-fit:contain;padding:16px 6px 0;filter:drop-shadow(0 3px 0 #17191818)}
.score-stamp{position:absolute;right:10px;top:10px;z-index:1;transform:rotate(7deg);background:var(--paper);border:2px solid var(--ink);padding:9px 12px 7px;box-shadow:3px 3px 0 var(--ink)}
.score-stamp>p{font-size:10px;font-weight:800;letter-spacing:.025em}
.summary .big-score{gap:2px}
.summary .big-score strong{font-family:Arial,Helvetica,sans-serif;font-size:clamp(42px,8dvh,64px);line-height:.95;letter-spacing:-.07em;padding-right:3px;min-width:0}
.summary .big-score>span{font-size:19px;line-height:1}
.portrait-caption{width:100%;padding:14px 12px 16px;border-top:2px solid var(--ink);background:var(--paper);position:relative}
.type-number{display:block;font-size:10px;font-family:ui-monospace,monospace;letter-spacing:.12em;margin-bottom:5px;color:var(--muted)}
.summary .score-panel h1{font-size:clamp(21px,5.7vw,29px);letter-spacing:-.05em;line-height:1.3;margin:0;font-weight:900;text-wrap:balance}
.summary .result-headline{margin-top:7px;font-size:12px;line-height:1.4;color:var(--muted)}
.summary .summary-actions{width:100%;max-width:none;display:flex;flex-direction:column;gap:2px;flex-shrink:0;margin:9px 0 0}
.share-x{width:100%;min-height:56px;display:flex;justify-content:center;align-items:center;gap:12px;background:var(--ink);color:var(--paper);text-decoration:none;border:2px solid var(--ink);border-radius:3px;font-weight:800;font-size:16px;transition:transform .16s,background .16s;touch-action:manipulation}
.share-x svg{width:19px;height:19px;fill:currentColor;flex-shrink:0}
.share-x:hover{background:#33382c}.share-x:active{transform:translateY(2px)}
.share-x:focus-visible{outline:3px solid #687900;outline-offset:4px}
.secondary-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}
.secondary-actions .text-button{font-size:12px;min-height:40px;padding:8px 2px}
.secondary-actions .text-button:first-child{color:var(--ink);font-weight:700}
.peer-card{display:grid;grid-template-columns:56px 1fr;column-gap:12px;align-items:center}
.peer-card img{width:56px;height:56px;object-fit:contain;grid-row:1/3}
.peer-card>strong{align-self:end}.peer-card>span{align-self:start}
.type-card{display:grid;grid-template-columns:60px 1fr;column-gap:12px;align-items:center}
.type-card img{grid-row:1/3;width:60px;height:60px;object-fit:contain}
.type-detail .modal-character{width:140px;height:140px;object-fit:contain;align-self:center}
.shared-result .portrait-stage{padding-top:4px}
.shared-result .share-x{cursor:pointer}
@media(max-height:620px){
 .screen.summary{gap:4px;padding-top:8px}
 .summary .summary-top{height:32px;min-height:32px}
 .portrait-caption{padding:9px 8px 11px}
 .summary .score-panel h1{font-size:22px}
 .summary .result-headline{font-size:11px;margin-top:5px}
 .type-number{margin-bottom:3px;font-size:9px}
 .score-stamp{padding:7px 8px 5px;right:8px;top:8px}
 .summary .big-score strong{font-size:43px}
 .summary .summary-actions{margin-top:8px}
 .share-x{min-height:50px;font-size:15px}
 .secondary-actions .text-button{min-height:36px}
 .type-detail .modal-character{width:90px;height:90px}
 .type-detail{gap:9px}.modal-description{line-height:1.55}
}
@media(max-height:460px) and (min-width:600px){
 .screen.summary{width:min(100%,780px);min-height:360px;display:grid;grid-template-columns:1fr 230px;grid-template-rows:32px 1fr;padding:10px 24px 16px;gap:8px 24px}
 .summary .summary-top{grid-column:1/3}
 .summary .result-content{height:100%}
 .summary .score-panel{grid-template-columns:1fr;grid-template-rows:minmax(100px,1fr) auto;gap:0}
 .portrait-caption{padding:8px}.summary .score-panel h1{font-size:21px}
 .summary .summary-actions{margin:0;align-self:center}
 .summary .big-score{display:flex}.result-character{padding-top:4px}
 .secondary-actions{flex-direction:column;gap:0}
 .peer-card{grid-template-columns:40px 1fr;column-gap:6px}.peer-card img{width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){.share-x:active{transform:none}}
.summary h1:focus{outline:none}

.type-detail .modal-axes>div{flex-direction:row;justify-content:space-between;align-items:center;gap:4px;font-size:12px;padding-top:8px}

/* The four preferences use distinct inks, with labels and numbers retained. */
.axis-row{--axis-ink:#22745e;--axis-wash:#dcebe4}
.axis-row[data-axis=density]{--axis-ink:#ba4938;--axis-wash:#f4ded5}
.axis-row[data-axis=parallel]{--axis-ink:#3d64ad;--axis-wash:#dce5f4}
.axis-row[data-axis=constant]{--axis-ink:#8b6511;--axis-wash:#f3e6bc}
.axis-label h2{display:flex;align-items:center;gap:8px}
.axis-label h2::before{content:'';width:10px;height:10px;border-radius:2px;background:var(--axis-ink);flex-shrink:0}
.axis-label>span{color:var(--axis-ink);font-weight:850;font-variant-numeric:tabular-nums;font-size:22px}
.axis-label small{font-size:11px;font-weight:500}
.axis-bar{height:10px;background:var(--axis-wash);margin-top:7px;border-radius:2px}
.axis-bar>span{background:var(--axis-ink)}
.roasts{counter-reset:story}
.roasts li{position:relative;padding:18px 0 18px 30px;font-size:17px;font-weight:650;line-height:1.8}
.roasts li:first-child{padding-top:0}
.roasts li::before{counter-increment:story;content:'0' counter(story);position:absolute;left:0;top:21px;color:var(--muted);font:11px/1.8 ui-monospace,monospace}
.roasts li:first-child::before{top:3px}
.compat-panel{max-width:500px;gap:16px}
.peer-story{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0 16px}
.peer-heading{display:flex;align-items:center;gap:10px;text-align:left;padding:0;border:0;background:transparent;width:100%;min-height:56px}
.peer-heading img{width:60px;height:60px;object-fit:contain;flex-shrink:0}
.compat-panel .peer-heading h2{font-size:20px;font-weight:850;line-height:1.45;color:var(--ink);margin:0;flex:1}
.peer-heading>span{color:var(--muted);font-size:16px}
.peer-story>p{font-size:16px;line-height:1.85;margin-top:14px;overflow-wrap:anywhere}
.compat-panel .pager{font-variant-numeric:tabular-nums}
.compat-panel .pager button{border:1px solid var(--line);border-radius:3px;font-size:20px;padding:4px 16px;color:var(--ink)}
@media(max-height:620px){
 .roasts li{font-size:15px;line-height:1.65;padding:10px 0 10px 26px}
 .roasts li::before{top:12px}.roasts li:first-child::before{top:2px}
 .compat-panel{gap:8px}.peer-story{padding:6px 0 10px}
 .peer-heading img{width:48px;height:48px}.peer-heading{min-height:48px;gap:8px}
 .compat-panel .peer-heading h2{font-size:17px}
 .peer-story>p{font-size:14px;line-height:1.7;margin-top:8px}
}
@media(max-height:460px) and (min-width:600px){
 .roasts li{padding:0 0 0 24px;font-size:14px}.roasts li::before{top:2px}
 .compat-panel{max-width:none;grid-template-columns:190px 1fr;gap:8px 24px}
 .compat-panel .compat-switch{grid-template-columns:1fr;grid-column:1;grid-row:1}
 .compat-panel .peer-story{grid-column:2;grid-row:1/3;align-self:center}
 .compat-panel .pager{grid-column:1;grid-row:2}
}