:root { --avatar-paper:#f0ead7;--avatar-deep:#315d59;--avatar-line:#b2a37e;--avatar-field:#d3ddc8;--avatar-label:#67766a;--avatar-outline:#e7d8ad;--avatar-red:#a3523c; }
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--avatar-paper:#35443b;--avatar-deep:#b0c6a2;--avatar-line:#8e9274;--avatar-field:#263b36;--avatar-label:#b3c4b0;--avatar-outline:#d0c39a;--avatar-red:#d99a79;}}
.avatar-creator { color:var(--ink);background:var(--avatar-paper);border:4px double var(--avatar-line);border-radius:4px;padding:24px;margin:0 0 24px;box-shadow:0 4px 0 var(--panel-shadow); }
.avatar-title { display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--avatar-line);padding-bottom:16px;margin-bottom:20px;gap:12px; }
.avatar-school { font-size:12px;color:var(--avatar-label); }
.avatar-title h2 { font:700 28px/1.4 "Songti SC",serif;margin:6px 0 0;color:var(--avatar-deep);border:0; }
.avatar-stamp { display:grid;place-items:center;font:700 22px "Songti SC",serif;letter-spacing:.12em;flex:none;width:60px;height:60px;color:var(--avatar-red);border:4px double var(--avatar-red);transform:rotate(7deg); }
.avatar-workbench { display:grid;grid-template-columns:minmax(200px,.85fr) minmax(0,1.5fr);gap:28px;align-items:start; }
.avatar-preview { padding:12px;background:var(--card);border:1px solid var(--avatar-line); }
.avatar-photo { position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:310px;padding:24px 16px 20px;background:var(--avatar-field);border:1px solid var(--avatar-line);overflow:hidden; }
.avatar-photo-label { position:absolute;top:10px;left:12px;font:14px "Songti SC",serif;color:var(--avatar-label); }
.avatar-creator canvas { image-rendering:pixelated;image-rendering:crisp-edges; }
.avatar-photo canvas { position:relative;z-index:1;width:192px;height:240px;max-width:100%;object-fit:contain; }
.avatar-ground { display:block;position:absolute;bottom:24px;width:96px;height:12px;background:var(--avatar-label);opacity:.22; }
.avatar-face-row { display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line); }
.avatar-face-row canvas { width:80px;height:53px;flex:none;object-fit:contain;background:var(--avatar-field);border:1px solid var(--avatar-line); }
.avatar-face-row b { font:700 16px/1.6 "Songti SC",serif;color:var(--avatar-deep); }
.avatar-face-row span { display:block;color:var(--avatar-label);font-size:10px;margin-top:4px; }
.avatar-description { color:var(--avatar-label);font-size:12px;line-height:1.8;min-height:44px;margin:10px 0; }
.avatar-creator button { font-family:inherit;cursor:pointer;min-height:44px; }
.avatar-random { width:100%;padding:8px;background:var(--card);color:var(--avatar-deep);border:1px solid var(--avatar-line);box-shadow:0 2px 0 var(--panel-shadow); }
.avatar-controls fieldset { min-width:0;border:0;padding:0;margin:0 0 18px; }
.avatar-controls legend { font:700 16px "Songti SC",serif;color:var(--avatar-deep);padding:0;margin-bottom:10px; }
.avatar-gender { display:flex;gap:10px; }
.avatar-gender button { flex:1;padding:8px 14px;background:var(--card);border:1px solid var(--avatar-line);color:var(--ink); }
.avatar-creator button[aria-pressed="true"] { border:2px solid var(--avatar-deep);background:var(--avatar-field);box-shadow:inset 0 0 0 2px var(--avatar-paper);color:var(--ink); }
.avatar-tabs { display:flex;border-bottom:3px solid var(--avatar-deep);gap:4px;margin:4px 0 18px; }
.avatar-tabs button { flex:1;background:var(--card);color:var(--avatar-label);padding:10px;border:1px solid var(--avatar-line);border-bottom:0;font:700 17px "Songti SC",serif; }
.avatar-tabs button[aria-pressed="true"] { background:var(--avatar-deep);color:var(--avatar-paper);border:1px solid var(--avatar-deep);box-shadow:none; }
.avatar-options { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; }
.avatar-part { position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid var(--avatar-line);padding:7px 4px;color:var(--ink);background:var(--card); }
.avatar-part[aria-pressed="true"]::after { content:'✓';position:absolute;right:3px;top:1px;color:var(--avatar-deep);font-size:12px; }
.avatar-part canvas { width:64px;height:42px;max-width:100%;object-fit:contain; }
.avatar-part span { font-size:11px;white-space:nowrap; }
.avatar-swatches { display:flex;flex-wrap:wrap;gap:8px; }
.avatar-swatch { display:flex;align-items:center;justify-content:center;gap:7px;min-width:74px;padding:7px 10px;background:var(--card);color:var(--ink);border:1px solid var(--avatar-line);font-size:12px; }
.avatar-swatch > span { display:inline-block;width:18px;height:18px;border:1px solid var(--avatar-line); }
.avatar-actions { display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--avatar-line); }
.avatar-reset { background:none;border:0;color:var(--avatar-label);padding:8px 12px;text-decoration:underline; }
.avatar-status { margin:12px 0 0;font-size:12px;color:var(--avatar-label);line-height:1.8;min-height:22px; }
.avatar-demo-intro { margin:0 0 18px;color:var(--muted);font-size:14px; }
.avatar-demo .game-content { min-height:0; }
.avatar-demo .wrap { padding-left:34px;max-width:1160px; }
.avatar-demo .avatar-creator { margin-bottom:0; }
.avatar-demo-link { display:inline-flex;align-items:center;min-height:44px;color:var(--steel); }
@media(max-width:680px) {
 .avatar-creator { padding:14px 12px; }
 .avatar-title { gap:8px;padding-bottom:12px;margin-bottom:14px; }
 .avatar-title h2 { font-size:21px; }
 .avatar-school { font-size:11px; }
 .avatar-stamp { width:44px;height:44px;font-size:17px; }
 .avatar-workbench { grid-template-columns:minmax(0,1fr);gap:18px; }
 .avatar-preview { display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px 12px;padding:10px;position:relative; }
 .avatar-photo { grid-row:1 / 4;min-height:168px;padding:16px 4px 8px; }
 .avatar-photo canvas { width:102px;height:127.5px; }
 .avatar-photo-label { left:6px;top:5px;font-size:10px; }
 .avatar-ground { width:55px;bottom:12px;height:7px; }
 .avatar-face-row { padding:0;gap:4px;align-items:flex-start;border:0; }
 .avatar-face-row canvas { width:48px;height:32px; }
 .avatar-face-row b { font-size:12px;line-height:1.5; }
 .avatar-face-row span { display:none; }
 .avatar-description { margin:0;font-size:10px;min-height:0; }
 .avatar-random { align-self:end;font-size:11px;padding:4px;min-height:44px; }
 .avatar-controls fieldset { margin-bottom:14px; }
 .avatar-controls legend { font-size:15px; }
 .avatar-options { gap:6px; }
 .avatar-part { padding:6px 2px;min-height:70px; }
 .avatar-part canvas { width:54px;height:36px; }
 .avatar-part span { font-size:10px; }
 .avatar-swatch { min-width:62px;padding:6px;gap:5px;font-size:11px; }
 .avatar-swatch > span { width:14px;height:14px; }
 .avatar-actions { gap:8px;margin-top:12px; }
 .avatar-actions > .primary, .avatar-actions > .ghost { flex:1;min-width:100px;font-size:12px;padding:9px; }
 .avatar-actions > .avatar-reset { flex-basis:100%;min-height:44px; }
 .avatar-status { font-size:11px; }
 .avatar-demo .wrap { padding-left:16px; }
}
.avatar-face-row canvas { width:80px;height:88px;object-fit:contain; }
.avatar-part canvas { width:56px;height:62px;object-fit:contain; }
.avatar-eye-note { font-size:11px;line-height:1.7;color:var(--avatar-label);margin:8px 0 0; }
@media(max-width:680px) {
 .avatar-face-row canvas { width:48px;height:53px; }
 .avatar-part canvas { width:44px;height:49px; }
 .avatar-part { min-height:82px; }
}
.avatar-stamp { transform:none;letter-spacing:0;width:72px;height:44px;border:2px solid var(--avatar-red);box-shadow:inset 0 0 0 2px var(--avatar-paper),inset 0 0 0 3px var(--avatar-red); }
.avatar-stamp img { width:66px;height:36px;image-rendering:pixelated;image-rendering:crisp-edges;object-fit:contain; }
@media(max-width:680px){.avatar-stamp{width:58px;height:38px;}.avatar-stamp img{width:48px;height:27px;}}

/* 档案卡标题不吃卡片小标题的深色牌子样式，否则会压住上面那行字 */
.game-shell .game-content > .card .avatar-title h2 { display:block;min-width:0;margin:6px 0 0;padding:0;background:none;border:0;box-shadow:none;transform:none;position:static;color:var(--avatar-deep); }
.game-shell .game-content > .card .avatar-title h2::before { display:none; }
.game-shell .card .avatar-title h2::before { display:none; }
.avatar-school { display:block; }