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:auto minmax(0,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 }
.growth-progress-wrap { position:relative;height:26px;margin:8px 0 12px }
.rpg-welcome .growth-profile progress { height:100%;margin:0;accent-color:#d7b765 }
.rpg-welcome .growth-profile progress::-webkit-progress-value { background:#d7b765 }
.rpg-welcome .growth-profile progress::-moz-progress-bar { background:#d7b765 }
#growthXpText { position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;color:#352945;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap }
.rpg-welcome #growthRuleText { display:none }
.rpg-welcome .character-home { margin:0 }
#characterHomeInfo { display:flex;flex-direction:column;gap:6px }
.character-home-stat { display:flex;align-items:center;gap:8px;min-width:0;min-height:28px }
.character-home-icon { width:20px;height:20px;flex-shrink:0;color:#806b91 }
.character-home-icon svg { display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round }
.character-home-stat small { flex-shrink:0;color:#806b91;font-size:13px;white-space:nowrap }
.character-home-leader { flex:1;min-width:4px;border-bottom:1px dashed #cbbfd5 }
.character-home-stat strong { flex-shrink:0;color:#493260;font-size:20px;font-variant-numeric:tabular-nums;line-height:1.3 }
.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:230px;width:calc(var(--spum-canvas-width) * var(--spum-home-width,.36) + 24px);height:348px;height:calc(var(--spum-canvas-width) * var(--spum-home-height,.56) + 24px);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) { #avatarHome { --spum-canvas-width:640px;--spum-canvas-width:clamp(576px,calc(32vw + 256px),640px) } }
@media(max-width:600px) {
  .rpg-welcome { grid-template-areas:'heading heading' 'portrait summary' 'actions actions';padding:12px;gap:12px }
  .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 }
  #characterHomeInfo { gap:4px }.character-home-stat { min-height:23px;gap:5px }.character-home-icon { width:16px;height:16px }.character-home-stat small { font-size:12px }.character-home-stat strong { font-size:16px }#growthXpText { font-size:12px }
  #avatarHome { --spum-canvas-width:288px;--spum-canvas-width:clamp(288px,calc(80vw - 32px),416px) }
}
@media(max-width:370px) { #avatarHome { --spum-canvas-width:252px;--spum-canvas-width:clamp(252px,72vw,266px) }.rpg-welcome-heading > span { display:none }.character-home-stat strong { font-size:14px } }
.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 }
#goldStoreFilters { grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;margin-bottom:8px;padding-bottom:8px }
#goldStoreFilters button { min-width:0;min-height:32px;margin:0;padding:4px 2px;font-size:12px;white-space:nowrap }
@media(max-width:600px) { #goldStoreFilters { grid-template-columns:repeat(5,minmax(0,1fr)) } }
@media(max-width:360px) { #goldStoreFilters { grid-template-columns:repeat(4,minmax(0,1fr)) } }
/* Compact shop cards keep actions in the existing item dialog. */
.gold-catalog { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px }
#goldCatalog .gold-item { display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;margin:0;padding:10px;text-align:left;border:1px solid #d3c4e0;border-radius:8px;background:#fffdf9;color:#40334e;min-width:0;box-shadow:none }
#goldCatalog .gold-item:hover:not(:disabled),#goldCatalog .gold-item:focus-visible { background:#f0e9f9;border-color:#9e7cc6 }
#goldCatalog .gold-item:focus-visible { outline:2px solid var(--rpg-purple);outline-offset:2px }
#goldCatalog .gold-item .pixel-item-icon { width:48px;height:48px }
.gold-item-copy { min-width:0;display:grid;gap:3px }.gold-item-name { font-size:14px;line-height:1.4;overflow-wrap:anywhere }
.gold-item-summary { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#76637f;font-weight:400 }
.gold-item-price { max-width:80px;text-align:right;font-size:13px;line-height:1.4;color:var(--rpg-purple);overflow-wrap:anywhere }.gold-item-copy .equipment-set-badge { font-size:10px;font-weight:400 }
.gold-purchase-row { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:3px 10px;padding:9px 12px }
.gold-purchase-name { min-width:0;font-size:14px;line-height:1.4;overflow-wrap:anywhere }.gold-purchase-cost { color:var(--rpg-purple);font-size:13px;white-space:nowrap }
.gold-purchase-meta { grid-column:1/-1;font-size:11px;line-height:1.5 }
#goldPurchases,#goldPurchasesMoreList { gap:6px }
#pointsCatalog { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px }
#pointsCatalog .points-product { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-content:start;padding:10px 12px }
#pointsCatalog .item-top { grid-column:1;align-items:start;gap:6px }#pointsCatalog .item-top b { font-size:14px;line-height:1.4 }
#pointsCatalog .item-top>span { flex-shrink:0;font-size:10px;color:var(--rpg-muted) }
#pointsCatalog .muted { font-size:11px;line-height:1.5 }#pointsCatalog .points-product>.muted { grid-column:1 }
#pointsCatalog .points-actions { grid-column:2;grid-row:1/3;display:flex;flex-direction:column;justify-content:center;gap:5px;margin:0 }
#pointsCatalog .points-actions button { min-height:32px;margin:0;padding:4px 10px;font-size:12px;white-space:nowrap }
#pointsAccountStats { grid-template-columns:repeat(4,minmax(0,1fr));gap:6px }
#pointsAccountStats .stat { display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0;min-height:40px;padding:8px 10px;font-size:11px;line-height:1.5 }
#pointsAccountStats .stat b { max-width:60%;margin:0;text-align:right;font-size:18px;line-height:1.3;overflow-wrap:anywhere;font-variant-numeric:tabular-nums }
#pointsAccountStats .stat:nth-child(7) b { max-width:none;flex-shrink:0;white-space:nowrap;font-size:12px }#pointsAccountStats .callout { grid-column:1/-1;margin:0 }
@media(max-width:1000px) { #pointsCatalog { grid-template-columns:1fr }#pointsAccountStats { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:600px) { .gold-catalog { grid-template-columns:1fr }#goldCatalog .gold-item { gap:8px;padding:8px 10px }#pointsAccountStats .stat { padding:6px 8px } }
#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;flex-wrap:wrap }
@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 }.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 }

.equipment-set-filter {display:flex;align-items:center;gap:10px;margin:12px 0}.equipment-set-filter select {max-width:100%;min-height:40px}.equipment-sets {display:grid;gap:8px;margin:10px 0}.equipment-set {border:1px solid #d3c4e0;border-radius:6px;padding:10px}.equipment-set p {margin:4px 0;font-size:12px;line-height:1.7}.set-active {color:#356628}.equipment-set-badge {color:#725098!important}.equipment-preview {width:144px;margin:auto}#characterItemComparison {font-size:13px;line-height:1.9}#characterItemDialog {max-height:calc(100dvh - 32px);overflow:auto}.gold-item button {margin-top:0}