/* Desktop combat overview fits the viewport; tools retain their own scroll. */
.allocation-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-variant-numeric:tabular-nums;border:1px solid #537568;padding:8px;border-radius:8px}.allocation-summary strong{display:inline-block;min-width:4ch;text-align:right;color:#ffe1a0}.allocation-row{display:grid;grid-template-columns:minmax(0,1fr) 66px 58px 48px;align-items:center;gap:5px;min-height:70px;border-bottom:1px solid #3e59634d}.allocation-row small{display:block;font-size:10px;line-height:1.45;color:#9cb8bd}.allocation-row>span{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}.allocation-row input{width:58px;min-height:34px;background:#0c202c;color:#e8f5ec;border:1px solid #52717e;border-radius:5px;padding:4px}.allocation-row button{padding:4px;font-size:11px!important}.manual-sale-row{display:flex;align-items:center;justify-content:space-between;gap:6px;border-top:1px solid #3b565a;margin-top:10px;padding-top:8px}.manual-sale-row label{display:flex;align-items:center;gap:5px;font-size:11px}.manual-sale-row input,[data-sale-quantity]{width:65px;background:#102432;color:#e5f3f0;border:1px solid #50717c;border-radius:6px;padding:5px}.fusion-odds{padding:10px;background:#193c38;border:1px solid #53795f;border-radius:8px}.fusion-odds b{color:#f3d393}.battle-telemetry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:#0c2830;border:1px solid #335b61;padding:8px;border-radius:7px;font-size:11px;font-variant-numeric:tabular-nums}.battle-telemetry small{grid-column:1/-1;color:#91aeb3;font-size:10px}.battle-telemetry b{color:#f1d595}.quest-tracker{padding:4px 10px;margin:0 auto 6px;max-height:36px;border-radius:6px;overflow-x:auto;overflow-y:hidden}.quest-tracker>h3{display:none}.quest-tracker-list{display:flex;align-items:center;gap:8px;min-width:max-content}.quest-track-card{display:flex;align-items:center;gap:8px;padding:2px 6px;border-radius:4px;white-space:nowrap;font-size:10px}.quest-track-card button{min-height:23px;font-size:10px;padding:1px 6px}.loyalty-panel b{color:#dfce98}.skyport,.gearfell,.aether,.stormforge,.zenith,.skycity{background:linear-gradient(120deg,#1c404e,#26364b)!important;border-color:#7093a6!important}
/* One viewport, three explicit tracks. Content cannot enlarge the battle track. */
@media(min-width:1001px){
 body:has(#gameShell:not([hidden])){overflow:hidden;font-size:14px}
 #gameShell{width:100%;min-width:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
 #gameShell[hidden]{display:none}
 #gameShell>.top{width:100%;max-width:none;flex:0 0 64px;padding:9px 20px}
 #gameShell>.top h1{font-size:23px;margin:0}
 #gameShell>.top .eyebrow{font-size:9px}
 #gameShell>.quick-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:calc(100% - 32px);max-width:none;min-width:0;position:static;flex:0 0 44px;margin:0 16px 10px;padding:4px;gap:4px}
 #gameShell>.quick-nav button{min-width:0;min-height:34px;font-size:13px;white-space:normal;padding:5px}
 #gameShell>.quest-tracker{width:calc(100% - 32px);max-width:none;flex:0 0 auto;margin:0 16px 8px}
 #gameShell>.layout{width:100%;max-width:none;min-width:0;min-height:0;flex:1;display:grid;grid-template-columns:232px minmax(0,1fr) 360px;gap:12px;padding:0 16px 14px;align-items:stretch;height:auto}
 #gameShell>.layout>.panel{grid-column:auto;grid-row:auto;position:relative;top:auto;min-width:0;min-height:0;width:100%;height:100%;max-height:none;padding:12px;margin:0;overflow:hidden}
 #gameShell>.layout>.character{font-size:12px}
 .character>h2{font-size:11px;margin-bottom:9px;letter-spacing:1px}
 .character .hero:first-child:has(.art-hero),.character .hero:has(.art-hero){position:relative;min-height:90px;text-align:left;padding:10px 7px 10px 78px;margin:0 0 10px}
 .character .hero:first-child .art-hero,.character .hero .art-hero{position:absolute;left:3px;top:5px;display:block;width:70px;max-width:70px;height:80px;object-fit:contain;margin:0}
 .character .hero strong,.character .character-name{font-size:14px;line-height:1.5;margin:0 0 5px;min-height:0}
 .character .hero .eyebrow,.character .pet-form{display:none}
 .character .hero .pill{font-size:11px;padding:2px 5px}
 .character .hero small{font-size:10px}
 .character #companion .hero{min-height:86px;margin-bottom:8px}
 .character .meterline{font-size:11px;line-height:1.5}
 .character .bar{height:6px;margin:3px 0 8px}
 .character .level-card{padding:8px;margin:8px 0}
 .character .level-line>div{display:grid;gap:3px}
 .character .level-line span{font-size:12px}
 .character .level-line strong{font-size:29px}
 .character .level-line small{font-size:10px;flex:0 0 70px}
 .character .level-card .bar{margin:5px 0 0}
 .character .wallet-line{padding:7px;margin:0 0 9px;font-size:12px}
 .character .wallet-line b{font-size:17px}
 .character #companion{padding-top:8px;margin-top:8px}
 .character .shield-status:empty{display:none}
 .character .evolution-ready{font-size:11px;padding:5px}
 .character-tools{margin-top:7px;padding-top:5px}
 .character-tools>summary{font-size:11px;padding:4px}
 .character-tools[open]{position:absolute;bottom:10px;left:10px;right:10px;z-index:9;max-height:80%;overflow:auto;padding:10px;background:#132b37;border:1px solid #6d9194;border-radius:8px}
 .mapnav{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px;min-width:0}
 .mapnav>label{display:none}
 .mapnav select{flex:1 1 200px;width:auto;min-width:0;max-width:100%;font-size:13px;min-height:36px;margin:0;padding:6px}
 .travel-shortcuts{display:flex;flex-wrap:wrap;gap:5px}
 .travel-shortcuts button{font-size:12px;min-height:34px;padding:5px 8px}
 .area{min-height:0;padding:11px 13px;margin:0 0 10px}
 .area h2{font-size:23px;margin:2px 0 5px}
 .area .eyebrow{font-size:9px;letter-spacing:1px}
 .area .chips{flex-wrap:wrap}
 .area .chips span{font-size:11px;padding:2px 7px}
 .area .town-evolution,.area .town-npc button{font-size:12px;min-height:32px;padding:5px;margin-top:6px}
 .town-npc{margin:6px 0;padding:8px}
 .town-npc>b{font-size:13px}
 .town-npc p{display:none}
 .compact-roles{margin:6px 0 0;gap:5px}
 .compact-roles>div{font-size:11px}
 .encounter{display:flex;flex-direction:column;gap:7px;min-width:0;min-height:226px!important;height:226px!important;padding:10px!important;margin:0 0 10px!important;background:linear-gradient(145deg,#162c39,#13232f);border-color:#3b5668}
 .encounter-heading{flex:0 0 auto;font-size:12px;gap:8px;margin:0;min-width:0;flex-wrap:wrap}
 .encounter-heading select{font-size:12px;min-height:28px;padding:3px}
 .enemy-lineup{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important;width:100%;min-width:0;min-height:0!important;height:auto!important;flex:1}
 .enemy-target{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;width:100%;min-width:0!important;min-height:0!important;height:100%!important;margin:0!important;padding:6px!important;text-align:center!important;overflow:hidden}
 .enemy-target .art-monster{width:72px!important;max-width:100%;height:68px!important;flex-shrink:0}
 .enemy-target .enemy-label{font-size:11px;line-height:1.4;min-height:30px;max-height:32px;overflow:hidden;overflow-wrap:anywhere}
 .enemy-target .enemy-hp,.enemy-target small{font-size:10px!important;line-height:1.4}
 .enemy-target .bar{width:100%;height:5px;margin:2px 0}
 .enemy-target.empty-slot>span{font-size:13px}
 .enemy-target.empty-slot>small{font-size:10px!important}
 .enemy-idle{grid-column:1/-1;font-size:12px}
 .encounter>.tiny{flex:0 0 auto;font-size:10px;line-height:1.4;margin:0;color:#9bb5c3}
 .actiongrid{position:static;grid-template-columns:repeat(3,minmax(0,1fr));padding:7px;gap:6px;margin:0 0 9px}
 .actiongrid button{min-width:0;min-height:36px;font-size:12px;padding:5px}
 .selected-skill-info{font-size:12px;padding:9px 11px;margin:0 0 8px;line-height:1.5}
 .selected-skill-info>span{margin-top:3px;line-height:1.5}
 .battle-details{padding:7px 10px;margin-top:7px}
 .battle-details>summary{font-size:12px;padding:3px}
 .battle-details summary small{display:none}
 .battle:has(.battle-details[open]){overflow-y:auto!important}
 .battle-details .log{height:170px}
 .battle-details .skill-bar{max-height:220px}
 .collection>h2{font-size:14px;margin-bottom:10px;letter-spacing:0}
 .collection>h2 span{display:none}
 .collection #side{overflow-y:auto;overflow-x:hidden;min-width:0;scrollbar-gutter:stable}
 .collection #side .item{padding:12px}
 .section-tabs{gap:5px}
 .section-tabs button{font-size:12px;min-height:35px;flex:1;padding:6px}
 .allocation-row{grid-template-columns:minmax(0,1fr) 60px 54px 44px;gap:4px}
 .allocation-row input{width:54px}
 .allocation-row small{font-size:11px}
 .collection input,.collection select{max-width:100%}
 #gameShell>footer{display:none}
 .battle:has(.area.skycity) .encounter,.battle:has(.area.town) .encounter{height:64px!important;min-height:64px!important}
 .battle:has(.area.skycity) .enemy-lineup,.battle:has(.area.town) .enemy-lineup{display:none!important}
}
@media(min-width:1500px){#gameShell>.layout{grid-template-columns:250px minmax(0,1fr) 410px;gap:16px;padding-left:20px;padding-right:20px}.enemy-target .art-monster{width:90px!important;height:78px!important}.character .hero:first-child:has(.art-hero),.character .hero:has(.art-hero){min-height:98px}.character .hero:first-child .art-hero,.character .hero .art-hero{height:88px}}
@media(min-width:1001px) and(max-width:1190px){#gameShell>.layout{grid-template-columns:204px minmax(0,1fr) 320px;gap:8px;padding:0 10px 10px}#gameShell>.layout>.panel{padding:9px}.mapnav select{flex-basis:100%}.character .hero:first-child:has(.art-hero),.character .hero:has(.art-hero){padding-left:61px}.character .hero:first-child .art-hero,.character .hero .art-hero{width:55px}.character .level-line small{flex-basis:60px;min-width:0}.enemy-target .enemy-label{font-size:10px}.enemy-target .enemy-hp,.enemy-target small{font-size:9px!important}.enemy-target .art-monster{height:56px!important}.allocation-row{grid-template-columns:minmax(0,1fr) 53px 43px 40px}.allocation-row input{width:43px}}
@media(min-width:1001px) and(max-height:850px){#gameShell>.top{flex-basis:54px;padding-top:5px;padding-bottom:5px}#gameShell>.quick-nav{flex-basis:40px;margin-bottom:8px}.character .hero:first-child:has(.art-hero),.character .hero:has(.art-hero){min-height:78px;margin-bottom:6px;padding-top:7px;padding-bottom:7px}.character .hero:first-child .art-hero,.character .hero .art-hero{height:68px}.character #companion .hero{min-height:75px}.character .level-line>div{display:flex;gap:5px;align-items:center}.character .level-line strong{font-size:26px}.character .level-card{padding:6px;margin:6px 0}.character .bar{margin-bottom:5px}.area{padding:8px 11px;margin-bottom:8px}.area h2{font-size:20px}.encounter{height:202px!important;min-height:202px!important}.enemy-target .art-monster{height:56px!important}.actiongrid button{min-height:32px}.selected-skill-info{font-size:11px;padding:7px 9px}.battle-details{padding:5px 8px;margin-top:6px}.mapnav{margin-bottom:7px}}
@media(max-width:1000px){#gameShell,.quick-nav,.layout{min-width:0;max-width:100%}.quick-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}.quick-nav button{min-width:0}.layout>.collection{grid-column:auto;min-width:0}.allocation-row{grid-template-columns:minmax(0,1fr) 58px 52px 44px}.allocation-row input{width:52px}.quest-tracker{margin:0 10px 7px}.battle-telemetry{grid-template-columns:1fr}.battle-telemetry small{grid-column:auto}.manual-sale-row{flex-wrap:wrap}}
@media(max-width:700px){.quick-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.enemy-lineup{min-width:0!important}.enemy-target{min-width:0!important}.mapnav{min-width:0}}
@media(min-width:1001px){
 #encounter .enemy-lineup{padding:0;overflow:hidden;scrollbar-gutter:auto;grid-template-rows:minmax(0,1fr)}
 #encounter .enemy-target{position:relative;align-self:stretch;box-sizing:border-box;flex:none}
 #encounter .art-monster{min-height:0!important;object-fit:contain}
 #encounter .enemy-label{min-height:16px;max-height:32px;flex-shrink:0}
 #encounter .enemy-hp,#encounter .enemy-target>.bar,#encounter .enemy-target>small{flex-shrink:0}
 .character .level-card{padding:6px 8px;margin:6px 0}
 .character #companion{margin-top:6px;padding-top:6px}
 .character .tiny{font-size:10px}
 .battle:has(.area.petland) #encounter .enemy-lineup{grid-template-columns:minmax(150px,220px)!important;justify-content:center}
 .battle:has(.area.petland) #encounter .enemy-target{background:#1b3540}
}
@media(min-width:1001px) and(max-height:850px){#encounter .enemy-target{gap:2px!important;padding:4px!important}#encounter .art-monster{height:43px!important}#encounter .enemy-label{font-size:10px;min-height:14px;max-height:28px}#encounter .enemy-target>small{font-size:9px!important}.character .bar{margin-bottom:4px}.character .hero .pill{font-size:10px}}
@media(min-width:1001px){#encounter .encounter-heading{height:28px;min-height:28px;flex-wrap:nowrap}#encounter>.tiny{height:auto;min-height:14px;max-height:28px;overflow:hidden;line-height:14px}#encounter .enemy-label{height:auto;min-height:16px;max-height:32px}.encounter{height:236px!important;min-height:236px!important}}
@media(min-width:1001px) and(max-height:850px){.encounter{height:202px!important;min-height:202px!important}#encounter .enemy-label{min-height:14px;max-height:28px}}
@media(min-width:1001px){#encounter{display:flex;flex-direction:column;grid-template-rows:none}#encounter .enemy-lineup{flex:1 1 0;min-height:0!important}#encounter .enemy-target{justify-content:space-evenly!important;gap:1px!important}#encounter .enemy-target>.bar{margin:1px 0}#encounter .enemy-label{line-height:1.3}}
.auto-skill-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:10px 0;border-bottom:1px solid #36515d}.auto-skill-add label{grid-column:1/-1;font-size:12px;color:#b7ced5}.auto-skill-add select{min-width:0;width:100%;background:#102633;color:#e6f2f4;border:1px solid #496878;border-radius:7px;padding:8px;font:inherit;font-size:12px}.auto-skill-name{min-width:0;flex:1}.auto-skill-name b{display:block;overflow-wrap:anywhere}.auto-skill-name small{display:block;padding:3px 0 0;color:#9eb8c2;font-size:11px}.auto-skill-row>.auto-skill-actions{display:flex;gap:4px;flex-shrink:0}.auto-skill-actions button{min-width:30px!important;min-height:32px;padding:4px 6px!important;font-size:11px!important}
.auto-skill-row>.auto-skill-name{display:block;flex:1;min-width:0}
/* Enlarge player/companion portraits visually without increasing the height
   of either status card or the fixed-height left panel. */
@media(min-width:1001px){
 .character .hero:has(.art-hero){padding-left:88px}
 .character .hero .art-hero{transform:scale(1.16);transform-origin:left center}
}
@media(min-width:1001px) and(max-width:1190px){
 .character .hero:has(.art-hero){padding-left:66px}
 .character .hero .art-hero{transform:scale(1.12)}
}
@media(min-width:1001px) and(max-height:850px){
 .character .hero:has(.art-hero){padding-left:82px}
 .character .hero .art-hero{transform:scale(1.10)}
}
@media(min-width:1001px) and(max-width:1190px) and(max-height:850px){
 .character .hero:has(.art-hero){padding-left:66px}
}
/* Tall S/SS/SSS costume PNGs have more transparent surrounding area than job
   sprites. Give them extra visual scale without taking up layout height. */
@media(min-width:1001px){
 .character .hero img.art-hero.rank-outfit{transform:scale(1.34);transform-origin:left center;object-fit:contain}
}
@media(min-width:1001px) and(max-width:1190px), (min-width:1001px) and(max-height:850px){
 .character .hero img.art-hero.rank-outfit{transform:scale(1.22)}
}
/* Tall desktop: spend unused lower-sidebar room on actual portrait columns.
   A bounded 20px/card height increase avoids turning the left rail scrollable. */
@media(min-width:1200px) and(min-height:860px){
 .character .hero:has(.art-hero){min-height:112px;padding:8px 8px 8px 105px}
 .character .hero .art-hero{left:3px;top:3px;width:96px;max-width:96px;height:106px;transform:none;object-fit:contain}
 .character #companion .hero{min-height:114px}
 .character #companion .hero .art-hero{width:100px;max-width:100px;height:108px}
 .character .hero img.art-hero.rank-outfit{transform:scale(1.18);transform-origin:left center}
}
/* Roomy desktop left rail: portrait above details, not beside them. Keep
   the meter/level sections in their original order below both portrait cards. */
@media(min-width:1200px) and(min-height:1000px){
 .character .hero:has(.art-hero),.character #companion .hero:has(.art-hero){display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-height:0;padding:9px 7px 10px;text-align:center;overflow:hidden}
 .character .hero .art-hero{position:static;display:block;flex:0 0 auto;width:150px;max-width:100%;height:clamp(125px,13.5vh,155px);margin:0 auto 2px;transform:none;object-fit:contain;object-position:center}
 .character #companion .hero .art-hero{width:155px;max-width:100%;height:clamp(125px,13.5vh,155px)}
 .character .hero img.art-hero.rank-outfit{transform:scale(1.13);transform-origin:center center}
 .character .hero .character-name,.character .hero strong,.character .hero .pill,.character .hero .pet-nickname{max-width:100%;text-align:center;overflow-wrap:anywhere}
}
/* All ordinary desktop heights: override the first-child/legacy portrait
   positioning explicitly. Previous tall-only rules missed zoomed viewports. */
@media(min-width:1001px) and(min-height:820px){
 #gameShell .character .hero:has(.art-hero),#gameShell .character #companion .hero:has(.art-hero){display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:4px!important;min-height:0!important;padding:9px 7px 10px!important;text-align:center!important;overflow:hidden!important}
 #gameShell .character .hero .art-hero,#gameShell .character .hero:first-child .art-hero{position:static!important;display:block!important;left:auto!important;top:auto!important;flex:0 0 auto!important;width:150px!important;max-width:100%!important;height:clamp(108px,13vh,150px)!important;margin:0 auto 3px!important;transform:none!important;object-fit:contain!important;object-position:center!important}
 #gameShell .character #companion .hero .art-hero{width:155px!important;max-width:100%!important;height:clamp(108px,13vh,150px)!important}
 #gameShell .character .hero img.art-hero.rank-outfit{transform:scale(1.12)!important;transform-origin:center center!important}
 #gameShell .character .hero .character-name,#gameShell .character .hero strong,#gameShell .character .hero .pill,#gameShell .character .hero .pet-nickname{max-width:100%!important;text-align:center!important;overflow-wrap:anywhere}
}
/* The screenshot can come from a narrow CSS viewport even when the captured
   image is very tall. Make portrait-first the actual default for every rail. */
#gameShell .character .hero:has(.art-hero),#gameShell .character #companion .hero:has(.art-hero){display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:4px!important;min-height:0!important;padding:9px 8px 11px!important;text-align:center!important;overflow:hidden!important}
#gameShell .character .hero .art-hero,#gameShell .character .hero:first-child .art-hero{position:static!important;display:block!important;left:auto!important;top:auto!important;flex:0 0 auto!important;width:min(66%,170px)!important;max-width:100%!important;height:clamp(118px,14vh,170px)!important;margin:0 auto 5px!important;transform:none!important;object-fit:contain!important;object-position:center!important}
#gameShell .character #companion .hero .art-hero{width:min(70%,175px)!important;max-width:100%!important;height:clamp(118px,14vh,170px)!important}
#gameShell .character .hero img.art-hero.rank-outfit{transform:scale(1.08)!important;transform-origin:center center!important}
#gameShell .character .hero .character-name,#gameShell .character .hero strong,#gameShell .character .hero .pill,#gameShell .character .hero .pet-nickname{max-width:100%!important;text-align:center!important;overflow-wrap:anywhere}
/* Extremely short desktop viewports keep the original compact cards. */
@media(min-width:1001px) and(max-height:700px){
 #gameShell .character .hero:has(.art-hero){display:block!important;text-align:left!important;padding:7px 6px 7px 82px!important;min-height:78px!important}
 #gameShell .character .hero .art-hero,#gameShell .character .hero:first-child .art-hero{position:absolute!important;left:3px!important;top:4px!important;width:70px!important;height:70px!important;margin:0!important;transform:none!important}
 #gameShell .character #companion .hero .art-hero{width:70px!important;height:70px!important}
 #gameShell .character .hero img.art-hero.rank-outfit{transform:scale(1.12)!important}
}
.character .hero button.rename-pet{display:inline-flex;align-items:center;justify-content:center;align-self:center;min-height:26px;width:auto;max-width:100%;padding:3px 10px;border:1px solid #527d85;border-radius:999px;background:#16333c;color:#bde4ed;font-size:12px;line-height:1.4;cursor:pointer}
.character .hero button.rename-pet:hover,.character .hero button.rename-pet:focus-visible{border-color:#e5ca82;color:#ffedb4}
/* Permanent gold-collection cosmetics, purely visual and inexpensive to paint. */
.gold-collector-title{display:inline-block;align-self:center;color:#f8d48a;font-size:12px;letter-spacing:.07em;text-shadow:0 0 6px rgba(243,182,70,.28)}
#character[data-gold-tier="2"] .character-name,#character[data-gold-tier="3"] .character-name,#character[data-gold-tier="4"] .character-name{color:#ffe0a0;text-shadow:0 0 5px rgba(255,190,73,.38)}
#character[data-gold-tier="3"] .hero,#character[data-gold-tier="4"] .hero{box-shadow:inset 0 0 0 1px rgba(255,200,88,.38),0 0 15px rgba(255,193,76,.24);border-radius:14px}
#companion[data-gold-tier="4"] .hero{box-shadow:inset 0 0 0 1px rgba(245,211,120,.35),0 0 14px rgba(173,147,251,.25);border-radius:14px;background:radial-gradient(ellipse at 42% 30%,rgba(236,188,91,.12),transparent 75%)}

/* V6.5.29 left rail: use natural content height, never reserve an empty
   scrollbar track. Only scroll the rail when content actually overflows. */
#gameShell>.layout>.character{
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:auto;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
}
#gameShell>.layout>.character::-webkit-scrollbar{width:6px}
#gameShell>.layout>.character::-webkit-scrollbar-thumb{
  background:#63858b80;
  border-radius:8px;
}
#gameShell>.layout>.character::-webkit-scrollbar-track{background:transparent}
@media(max-width:1000px){
  #gameShell>.layout>.character{
    position:static;
    max-height:none;
    height:auto;
    overflow:visible;
  }
}
.card-collection-grid{display:grid;grid-template-columns:1fr;gap:5px;margin-top:10px}
.card-collection-grid>span{display:block;padding:5px 7px;border-radius:6px;font-size:12px;overflow-wrap:anywhere}
.card-collection-grid>.collected{color:#a9eed5;background:#1a463c55;border:1px solid #42867455}
.card-collection-grid>.missing{color:#9caeb8;background:#0d263355;border:1px solid #4f677044}