.character-home { margin-top:12px; display:flex; gap:12px; align-items:center; flex-wrap:wrap }
html.has-character { overflow:hidden }
.character-home[hidden],.character-points[hidden],.character-avatar[hidden]{display:none}
.character-avatar { flex-shrink:0; width:180px; align-self:center }
.character-avatar svg { display:block;width:100%;height:auto }
.character-points { margin:16px 0;padding:16px;border:1px solid #d8cfbd;border-radius:14px;background:#f5eedf;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap }
#characterDialog { padding:0;width:min(980px,calc(100vw - 24px));max-width:980px;max-height:94dvh;border:1px solid #c3b58f;border-radius:18px;background:#f8f5ee;color:#393546;box-shadow:0 20px 70px #20163166 }
#characterDialog[open] { display:flex;flex-direction:column }
#characterDialog::backdrop,#characterBuyDialog::backdrop { background:#28213699 }
.character-header,.character-footer { padding:16px 24px;background:#f2ead9;flex-shrink:0;border-bottom:1px solid #d8cebb }
.character-header h2 { margin:0;font-size:22px }
.character-footer { border-bottom:0;border-top:1px solid #d8cebb;display:flex;gap:12px;align-items:center;justify-content:space-between }
.character-body { overflow:auto;padding:24px;overscroll-behavior:contain }
.character-overview { display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center }
.character-stats { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px }
.character-stat { display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid #dfd6c4;border-radius:12px;background:#fffdf8 }
.character-stat strong { font-size:24px;color:#4c4878 }
.character-stat small { color:#736b77;font-size:12px }
.character-rules { line-height:1.8;color:#716878;font-size:13px }
.character-appearance { display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:20px 0 }
.character-appearance label { display:flex;flex-direction:column;gap:6px }
.character-catalog { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px }
.character-item { border:1px solid #ded3bb;background:#fffdf8;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px }
.character-item h4,.character-item p { margin:0 }
.character-item small { color:#81725b }.character-item p { font-size:13px;line-height:1.8;flex:1 }.character-item button { margin-top:4px }
.character-ledger { padding-left:20px;font-size:13px;line-height:1.9;color:#716878 }
#characterBuyDialog { border:1px solid #c3b58f;border-radius:16px;max-width:min(460px,calc(100vw - 24px));padding:24px;background:#f8f5ee;color:#393546 }
#characterBuyDialog p { line-height:1.8 }#characterBuyDialog form { display:flex;gap:12px;justify-content:flex-end }
@media(max-width:600px) { .character-overview { grid-template-columns:1fr;gap:12px }.character-overview .character-avatar { width:140px;justify-self:center }.character-stats { grid-template-columns:repeat(2,minmax(0,1fr)) }.character-catalog { grid-template-columns:repeat(2,minmax(0,1fr)) }.character-body { padding:16px }.character-header,.character-footer { padding:14px 16px }.character-item { padding:12px } .rpg-welcome > .character-avatar { width:110px } }
@media(max-width:380px) { .character-catalog { grid-template-columns:1fr } }