html.has-character { overflow:hidden }
.character-home { margin-top:12px;font-size:13px;color:#433353 }
.character-home-actions { display:flex;gap:8px;margin-top:12px;flex-wrap:nowrap }
#appView .character-home-actions button { min-height:42px;padding:8px 12px;border:2px solid #493362;border-radius:5px;background:#493362;color:#fff8e6;font-size:13px;font-weight:700;box-shadow:0 3px 0 #2c1e42 }
#appView .character-home-actions #openGrowthHistory { color:#382549;background:#fff1c6;border-color:#705686 }
.character-home-actions button:hover { filter:brightness(1.08) }
.character-avatar { flex-shrink:0;width:192px;align-self:center }
.character-avatar svg { display:block;width:100%;height:auto;image-rendering:pixelated;shape-rendering:crispEdges }
#characterDialog { padding:0;width:min(760px,calc(100vw - 24px));max-width:760px;max-height:94dvh;border:2px solid #6c5783;border-radius:8px;background:#f5f0fa;color:#352945;box-shadow:0 20px 70px #20163166 }
#characterDialog[open] { display:flex;flex-direction:column }
#characterDialog::backdrop,#characterBuyDialog::backdrop,#characterItemDialog::backdrop { background:#28213699 }
.character-header,.character-footer { padding:14px 22px;background:#e9dff2;flex-shrink:0;border-bottom:2px solid #cabbd9 }
.character-header { display:flex;align-items:center;justify-content:space-between;gap:12px }
.character-header h2 { margin:0;font-size:21px }.character-header p { margin:0;color:#57446b;font-weight:700 }
.character-footer { border-bottom:0;border-top:2px solid #cabbd9;display:flex;gap:12px;align-items:center;justify-content:space-between }
.character-body { overflow:auto;padding:20px;overscroll-behavior:contain;min-height:0 }
.character-stage { display:grid;grid-template-columns:112px 1fr 112px;gap:20px;align-items:center;justify-content:center;padding:12px 22px 18px;background:linear-gradient(#e6daf2,#f0e8f6);border:2px solid #d5c6e0;border-radius:6px }
.character-stage .character-avatar { justify-self:center;width:144px }
.character-slots { display:flex;flex-direction:column;gap:12px }
#characterDialog .character-slot { width:100%;min-height:88px;display:flex;flex-direction:column;align-items:center;gap:2px;background:#fcf8ef;color:#4d3a66;border:2px solid #a18ab9;border-radius:4px;padding:6px;font-size:11px;box-shadow:inset 0 0 0 3px #e5dbed }
.character-slot small { color:#756083 }.character-slot .empty-slot { font-size:30px;color:#ac9bba;line-height:1.5 }
.pixel-item-icon { width:72px;height:72px;flex-shrink:0 }
.pixel-item-icon svg { display:block;width:100%;height:100%;image-rendering:pixelated }
.character-slot .pixel-item-icon { width:48px;height:48px }
.character-stats { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:12px 0 }
.character-stat { display:flex;flex-direction:column;gap:3px;text-align:center;padding:10px 3px;border:1px solid #d2c4de;border-radius:4px;background:#fffdf9 }
.character-stat strong { font-size:20px;color:#453260 }.character-stat small { color:#716178;font-size:11px }
.character-options { border-bottom:1px solid #dbcee6;padding:8px 0 12px;font-size:13px }.character-options summary { cursor:pointer;color:#5b4771 }.character-rules { line-height:1.8;color:#716878;font-size:13px }
.character-appearance { display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:12px 0 }.character-appearance label { display:flex;flex-direction:column;gap:6px }
.character-bag-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 12px }.character-bag-heading h3 { margin:0;font-size:17px }
.character-filters { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px }
#characterDialog .character-filters button,.character-filters button { background:#e6dced;color:#5d4775;border:1px solid #b5a1c9;border-radius:4px;min-height:34px;padding:4px 12px;font-size:12px }
#characterDialog .character-filters button.active,.character-filters button.active { background:#5a3f79;color:#fff;border-color:#5a3f79 }
.pixel-inventory { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px }
#characterDialog .pixel-inventory-item,.pixel-inventory-item { background:#fdf9ef;color:#40334e;border:2px solid #a6ae82;border-radius:4px;padding:7px 3px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:inset 0 0 0 3px #e4e5cf;font-size:11px;min-width:0 }
.pixel-inventory-item.tier-2 { border-color:#809db2;box-shadow:inset 0 0 0 3px #d7e4ec }.pixel-inventory-item.tier-3 { border-color:#a083bb;box-shadow:inset 0 0 0 3px #e4d7ef }
.pixel-inventory-item.equipped { background:#e0efda;border-color:#507944 }.pixel-inventory-item small { color:#69616d }.pixel-inventory-item .pixel-item-icon { width:64px;height:64px }
.inventory-name { font-weight:700;text-align:center;white-space:normal;word-break:break-all }.inventory-empty { grid-column:1/-1 }
.shop-switcher { display:flex;gap:10px;margin-bottom:16px }.shop-switcher button { flex:1;min-height:48px;border:2px solid #bba5d2;background:#e9ddf3;color:#543a73;border-radius:6px;font-weight:700 }.shop-switcher button.active { background:#593c78;color:#fff7df;border-color:#593c78 }
#goldTabs { flex-wrap:nowrap }#goldTabs button { flex:1;min-width:0;padding-inline:5px;white-space:nowrap;font-size:13px }
.gold-catalog { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px }.gold-item { display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid #d3c4e0;border-radius:8px;background:#fffdf9 }.gold-item h3,.gold-item p { margin:0 }.gold-item h3 { font-size:16px }.gold-item p { font-size:13px;line-height:1.8;flex:1;color:#6d5e78 }.gold-item .pixel-item-icon { align-self:center;width:96px;height:96px }.gold-item small { color:#76637f }
#characterBuyDialog,#characterItemDialog { border:2px solid #8a6fa2;border-radius:6px;max-width:min(440px,calc(100vw - 24px));padding:22px;background:#f8f3fc;color:#393046 }
#characterBuyDialog p,#characterItemDialog p { line-height:1.8 }#characterBuyDialog form,#characterItemDialog form { display:flex;gap:12px;justify-content:flex-end;margin-top:16px }.pixel-item-preview .pixel-item-icon { width:144px;height:144px;margin:auto }#characterItemActions { display:flex;justify-content:center }
@media(max-width:600px) { .character-header,.character-footer { padding:12px }.character-header h2 { font-size:18px }.character-header p { font-size:12px }.character-body { padding:12px }.character-stage { grid-template-columns:76px 1fr 76px;padding:12px 6px;gap:8px }.character-stage .character-avatar { width:144px }.character-slots { gap:8px }#characterDialog .character-slot { min-height:89px;font-size:10px;padding:4px }.character-stats { grid-template-columns:repeat(4,minmax(0,1fr)) }.pixel-inventory { grid-template-columns:repeat(4,minmax(0,1fr));gap:6px }.pixel-inventory-item .pixel-item-icon { width:48px;height:48px }.gold-catalog { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px }.gold-item { padding:12px }.gold-item .pixel-item-icon { width:72px;height:72px }.rpg-welcome > .character-avatar { width:96px }#appView .character-home-actions button { padding:8px;font-size:12px }.character-bag-heading { gap:8px }.character-bag-heading h3 { font-size:15px }.character-bag-heading button { font-size:12px;padding:8px }.character-filters button { padding:4px 9px } }
@media(max-width:370px) { .character-stage { grid-template-columns:65px 1fr 65px;gap:3px }.character-stage .character-avatar { width:120px }.character-slot .pixel-item-icon { width:40px;height:40px }.rpg-welcome > .character-avatar { width:72px } }
@media(max-width:600px) { .character-stat { padding:6px 2px;gap:0 }.character-stat small { line-height:16px }.character-stat strong { font-size:18px;line-height:24px }.character-bag-heading { margin:12px 0 10px }#characterDialog .character-filters { flex-wrap:nowrap;overflow-x:auto;white-space:nowrap }#characterDialog .character-filters button { flex-shrink:0 } }
