/* A compact chooser first; the full introduction opens on selection. */
main .notice{display:none}
main .heading{padding:26px 0 18px}
main .collection-bar{margin-bottom:16px}
#cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.character-choice{position:relative;display:block;width:100%;padding:0;overflow:hidden;text-align:left;border:1px solid var(--border);border-radius:16px;background:var(--panel);transition:border-color .2s,transform .2s}
.character-choice:hover{border-color:var(--accent);transform:translateY(-3px)}
.choice-photo{display:block;width:100%;height:clamp(170px,28vh,310px);object-fit:cover;object-position:center 22%}
.choice-info{display:grid;gap:5px;padding:14px}
.choice-name{font-size:21px}.choice-meta{font-size:12px;color:var(--muted)}
.choice-trait{font-size:13px;color:#d8cde9}.choice-more{font-size:12px;color:var(--accent);margin-top:6px}
#character-dialog{width:min(900px,calc(100vw - 32px));max-width:900px;max-height:90dvh;padding:0;border:1px solid var(--border);border-radius:18px;background:var(--bg);color:var(--text);overflow:auto}
.character-detail-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;background:var(--panel)}
.character-detail-header h2{margin:0;font-size:25px}.character-detail-header p{margin:5px 0 0;color:var(--muted);font-size:13px}
.character-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
#character-detail-photo{aspect-ratio:2/3;position:sticky;top:0;overflow:hidden}
#character-detail-photo .portrait-gallery{position:absolute;inset:0}
#character-detail-photo .portrait-caption{bottom:14px;font-size:12px;white-space:nowrap}
#character-detail-body{padding:24px;line-height:1.8;font-size:14px}
#character-detail-body h3{font-size:23px;line-height:1.5;margin:5px 0 12px}
#character-detail-body h4{margin:24px 0 6px;color:#d8c6ff}
#character-detail-body p{margin:0 0 12px;color:#c9c5d2;white-space:pre-line}
#character-detail-body .detail-eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent)}
.character-detail-footer{position:sticky;bottom:0;padding:14px 24px;border-top:1px solid var(--border);background:var(--panel);z-index:3}
#character-start{width:100%;min-height:48px}
@media(max-width:680px){
 .topbar{height:64px;padding:0 16px}
 main{padding:0 16px}
 main .heading{padding:18px 0 10px}
 main .eyebrow{display:none}main h1{font-size:23px;letter-spacing:-1px}
 main .subtitle{font-size:12px;margin-top:6px}
 main .collection-bar{margin-bottom:10px;font-size:12px}main .collection-bar p{margin:8px 0}
 #cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .choice-photo{height:clamp(105px,20dvh,180px)}
 .choice-info{padding:9px 11px;gap:3px}.choice-name{font-size:17px}.choice-meta{font-size:11px}.choice-trait{font-size:11px}.choice-more{font-size:11px;margin-top:2px}
 main .footnote{margin-top:14px;font-size:11px}
 #character-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
 .character-detail-header{padding:14px 18px}
 .character-detail-layout{grid-template-columns:1fr}
 #character-detail-photo{position:relative;aspect-ratio:auto;height:55dvh;min-height:300px}
 #character-detail-photo .portrait{object-position:center 24%}
 #character-detail-body{padding:22px 20px}
 .character-detail-footer{padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
}

/* One horizontal character per row, on phones and desktop. */
#cards{grid-template-columns:minmax(0,1fr);gap:12px}
#cards .character-choice{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center}
#cards .choice-photo{height:132px;object-position:center 22%}
#cards .choice-info{padding:14px 22px;gap:5px;min-width:0}
#cards .choice-name{font-size:21px}
#cards .choice-meta,#cards .choice-trait,#cards .choice-more{font-size:14px;overflow-wrap:anywhere}
#cards .choice-more{margin-top:2px}
@media(max-width:680px){
 #cards{gap:10px}
 #cards .character-choice{grid-template-columns:96px minmax(0,1fr)}
 #cards .choice-photo{height:100%;min-height:108px;max-height:150px}
 #cards .choice-info{padding:10px 14px;gap:3px}
 #cards .choice-name{font-size:18px}
 #cards .choice-meta,#cards .choice-trait,#cards .choice-more{font-size:13px;line-height:1.45}
}

.voice-badge{display:inline-block;width:fit-content;padding:4px 9px;border:1px solid #68cdbc;border-radius:20px;color:#82e2ce;background:#12342e;font-size:12px;font-weight:700;letter-spacing:.05em}.harin-voice-switch{display:block;font-size:14px;line-height:1.6;margin:10px 0;color:#b5ded6}.harin-voice-switch[hidden],.harin-voice[hidden]{display:none}.harin-voice-switch input{width:auto;accent-color:#68cdbc}.harin-voice{margin-top:8px}

#story-dialog .composer-toolbar.with-voice{flex-wrap:wrap;gap:8px 12px}
#story-dialog .composer-toolbar.with-voice #price-hint{flex-basis:100%}
#story-dialog .composer .harin-voice-switch{display:grid;grid-template-columns:18px auto;gap:0 6px;align-items:center;margin:0;padding:5px 10px;border:1px solid #35534b;border-radius:8px;background:#172821;cursor:pointer;font-size:14px;line-height:1.3;flex-shrink:0}
#story-dialog .composer .harin-voice-switch[hidden]{display:none}
#story-dialog .harin-voice-switch input{grid-row:1 / 3;width:18px;height:18px;margin:0}
#story-dialog .harin-voice-switch small{font-size:12px;white-space:nowrap;color:#a6c6be}

.choice-progress{display:grid;gap:7px;margin-top:7px;padding-top:10px;border-top:1px solid var(--border)}
.progress-relation{font-size:13px;color:#e9d4ff}.progress-numbers{font-size:12px;color:var(--muted);line-height:1.5}.progress-empty{font-size:11px;color:var(--muted);line-height:1.5}
.progress-track{height:4px;background:#332a40;border-radius:5px;overflow:hidden}.progress-fill{display:block;height:100%;border-radius:5px;background:#bc89e7}
@media(max-width:680px){.choice-progress{gap:5px;padding-top:8px}.progress-numbers{font-size:11px}.progress-relation{font-size:12px}}

.character-new-badge{position:absolute;top:8px;left:8px;z-index:1;padding:2px 5px;border-radius:4px;background:#ffd75e;color:#201a08;font-size:12px;font-weight:800;line-height:1.2;letter-spacing:.03em;box-shadow:0 2px 8px #0003;pointer-events:none}