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 }
.character-avatar canvas { display:block;width:100%;height:auto;image-rendering:pixelated }
.spum-retry { width:100%;font-size:12px;line-height:1.6 }
#characterDialog { padding:0;width:760px;width:min(760px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:94vh;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,#characterBoughtDialog::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 }
.pixel-item-icon img { display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated }

/* One compact card; transparent sprite margins are cropped by the existing home mount. */
.rpg-welcome { display:grid;grid-template-columns:minmax(340px,.8fr) minmax(130px,1fr);grid-template-areas:'heading heading' 'portrait summary' 'portrait actions';gap:12px 20px;min-height:0;padding:16px;background:linear-gradient(120deg,#e9dff4,#f7f2fc);align-items:center }
.rpg-welcome-heading { grid-area:heading;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #d9cbe6 }
.rpg-welcome .rpg-welcome-heading h3 { font-size:18px;line-height:1.4 }
.rpg-welcome-heading > span { color:#826998;font-size:12px }
.rpg-welcome-portrait { grid-area:portrait;min-width:0;align-self:center;border-radius:10px;background:radial-gradient(ellipse at center,#fff9ff 0,transparent 70%) }
.rpg-welcome-copy { grid-area:summary;min-width:0;align-self:end }
.rpg-welcome .growth-profile { margin:0;max-width:none }
.rpg-welcome .growth-heading { gap:8px }
.rpg-welcome .growth-heading strong { font-size:24px }
.rpg-welcome .growth-heading span { font-size:13px;color:#72568c }
.rpg-welcome .growth-profile progress { height:8px;margin:8px 0 12px }
.rpg-welcome #growthRuleText { display:none }
.rpg-welcome .character-home { margin:0 }
#characterHomeInfo { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px }
.character-home-stat { display:flex;flex-direction:column;gap:4px;min-width:0;padding:10px;background:#ffffffaa;border:1px solid #ddcee9;border-radius:7px }
.character-home-stat small { color:#806b91;font-size:11px }
.character-home-stat strong { color:#493260;font-size:20px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere }
.character-home-stat:last-child strong { color:#926520 }
.rpg-welcome .character-home-actions { grid-area:actions;align-self:start;margin:0;gap:8px }
#appView .rpg-welcome .character-home-actions button { flex:1;margin:0;font-size:13px;padding:8px;min-height:42px }
#avatarHome { --spum-canvas-width:576px;position:relative;overflow:hidden;width:100%;height:348px;height:calc(var(--spum-canvas-width) * var(--spum-home-height,.56) + 16px);max-width:none }
#avatarHome canvas { position:absolute;width:576px;width:var(--spum-canvas-width);max-width:none;left:50%;top:50% }
.rpg-welcome .rpg-welcome-portrait img { width:100%;height:180px;margin:0 }
@media(min-width:1000px) { .rpg-welcome { grid-template-columns:minmax(380px,.8fr) minmax(0,1fr) }#avatarHome { --spum-canvas-width:640px;--spum-canvas-width:clamp(576px,calc(32vw + 256px),640px) } }
@media(max-width:1100px) { #characterHomeInfo { grid-template-columns:repeat(2,minmax(0,1fr)) }.character-home-stat:last-child { grid-column:1/-1 } }
@media(max-width:600px) {
  .rpg-welcome { grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-areas:'heading heading' 'portrait summary' 'actions actions';padding:12px;gap:10px }
  .rpg-welcome-heading { padding-bottom:8px }.rpg-welcome .rpg-welcome-heading h3 { font-size:16px }.rpg-welcome-heading > span { font-size:10px }
  .rpg-welcome-copy { align-self:center }.rpg-welcome .growth-heading { gap:4px }.rpg-welcome .growth-heading strong { font-size:20px }.rpg-welcome .growth-heading span { font-size:11px }
  #characterHomeInfo { grid-template-columns:repeat(2,minmax(0,1fr));gap:5px }.character-home-stat { padding:6px;gap:1px }.character-home-stat strong { font-size:17px }.character-home-stat:last-child { grid-column:1/-1 }
  #avatarHome { --spum-canvas-width:288px;--spum-canvas-width:clamp(288px,calc(80vw - 32px),416px) }
}
@media(max-width:370px) { #avatarHome { --spum-canvas-width:216px;--spum-canvas-width:clamp(216px,calc(72vw - 28px),240px) }.rpg-welcome-heading > span { display:none } }
.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:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid #bca6ce }
#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;padding:10px;border:2px solid #a38db7;border-radius:5px;background:#e7deee;box-sizing:border-box;align-items:start }
#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;border:1px solid #bcacc8;box-sizing:border-box;padding:4px;background:#f2edf7;box-shadow:inset 0 0 0 2px #fffaf0 }
.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,#characterBoughtDialog { border:2px solid #8a6fa2;border-radius:6px;max-width:min(440px,calc(100vw - 24px));padding:22px;background:#f8f3fc;color:#393046 }
#characterBuyDialog p,#characterItemDialog p,#characterBoughtDialog 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 }.character-item-actions { display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:16px }.character-item-actions button { margin:0;min-height:40px;white-space:nowrap }.character-item-actions form { margin:0!important;display:contents!important }#characterItemActions { display:flex;justify-content:flex-end }
@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 { grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible }#characterDialog .character-filters button { margin:0;padding:4px;white-space:nowrap } }
.character-stage { padding:10px 18px;gap:16px }.character-slots { gap:9px }#characterDialog .character-slot { min-height:68px;height:68px;box-sizing:border-box;padding:3px;gap:1px;line-height:13px }.character-slot .pixel-item-icon { width:32px;height:32px }.character-slot small { font-size:9px;line-height:11px }#characterDialog .character-slot .empty-slot { font-size:23px;line-height:32px }.character-stage .character-avatar { width:144px }
@media(max-width:600px) { .character-stage { padding:8px 4px;gap:5px }#characterDialog .character-slot { min-height:68px;font-size:10px }.character-stage .character-avatar { width:128px } }
@media(max-width:370px) { .character-stage { gap:3px }.character-stage .character-avatar { width:116px }.character-slot .pixel-item-icon { width:32px;height:32px } }

#characterDialog .character-filters button { margin:0;padding-inline:4px;white-space:nowrap }
#characterDialog .pixel-inventory-item,.pixel-inventory-item { margin:0;border-color:#88759d;box-shadow:inset 0 0 0 2px #e4d8ef }
#characterDialog .pixel-inventory-item.tier-2,.pixel-inventory-item.tier-2 { border-color:#6286a0;box-shadow:inset 0 0 0 2px #d7e4ec }
#characterDialog .pixel-inventory-item.tier-3,.pixel-inventory-item.tier-3 { border-color:#9673b1;box-shadow:inset 0 0 0 2px #e4d7ef }
#characterDialog .pixel-inventory-item.equipped,.pixel-inventory-item.equipped { border-color:#507944;box-shadow:inset 0 0 0 2px #cde3c6 }