/* Shared 12-profession party HUD: character left, first pet right.
   Spirit classes use the second pet below the first and growth/quest below owner.
   Game-state identifiers remain unchanged for save compatibility. */
#gameShell>.layout{grid-template-columns:minmax(420px,460px) minmax(0,1fr) minmax(320px,360px);gap:12px}
#gameShell>.layout>.character{min-width:0}
#gameShell #characterPanel{display:block!important}
#gameShell #characterPanel>.party-hud{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:10px;align-items:start;min-width:0}
#gameShell #characterPanel .party-character-column,
#gameShell #characterPanel .party-pets-column{min-width:0}
#gameShell #characterPanel #character,
#gameShell #characterPanel #companion{min-width:0;overflow-wrap:anywhere}
#gameShell #characterPanel .party-character-column #spiritProgress{margin:9px 0 0}
#gameShell #characterPanel #partyQuestSlot{min-width:0}
#gameShell #characterPanel #partyQuestSlot:empty{display:none}
#gameShell #characterPanel #partyQuestSlot .quest-tracker{display:block;max-height:none;margin:9px 0 0;padding:9px;border:1px solid #4d6a70;background:#122b37;border-radius:9px;overflow:visible}
#gameShell #characterPanel #partyQuestSlot .quest-tracker[hidden]{display:none}
#gameShell #characterPanel #partyQuestSlot .quest-tracker>h3{display:block;margin:0 0 7px;font-size:12px;color:#e7cb90}
#gameShell #characterPanel #partyQuestSlot .quest-tracker-list{display:grid;min-width:0;gap:6px}
#gameShell #characterPanel #partyQuestSlot .quest-track-card{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;min-width:0;white-space:normal;font-size:11px;line-height:1.45}
#gameShell #characterPanel #partyQuestSlot .quest-track-card span{overflow-wrap:anywhere}
#gameShell #questTrackerTop{width:calc(100% - 32px);margin:0 16px 8px}
#gameShell #questTrackerTop:empty{display:none}
#gameShell #questTrackerTop>.quest-tracker{width:100%;max-width:none;margin:0}
#gameShell #characterPanel .party-hud .hero{min-width:0}
#gameShell #characterPanel .party-hud .level-card{min-width:0}
#gameShell #characterPanel .party-hud .level-line{min-width:0}
#gameShell #characterPanel .party-hud .level-line small{min-width:0;overflow-wrap:anywhere}
#gameShell #characterPanel .party-hud .meterline{gap:4px;flex-wrap:wrap}
#gameShell #characterPanel .party-hud .meterline span:last-child{overflow-wrap:anywhere}
#gameShell #characterPanel .party-hud #companion{margin:0;padding:0;border:0}
#gameShell #characterPanel .party-hud #companion>.divider:first-child{display:none}
#gameShell #characterPanel .party-hud #companion>.hero{margin-top:0}
#gameShell #characterPanel #companion .dual-pet-hud{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
#gameShell #characterPanel #companion .dual-pet-unit{min-width:0;padding:9px}
#gameShell #characterPanel #companion .dual-pet-unit .hero{display:flex;align-items:center;flex-direction:column;text-align:center}
#gameShell #characterPanel #companion .dual-pet-unit .hero strong,
#gameShell #characterPanel #companion .dual-pet-unit .hero .pill{max-width:100%;overflow-wrap:anywhere}
#gameShell #characterPanel #companion .dual-pet-unit .art-pet{width:100%;max-width:125px;max-height:105px;object-fit:contain}
#gameShell #characterPanel #companion .dual-pet-unit .meterline{font-size:11px}
#gameShell #characterPanel #companion .dual-pet-unit .bar{margin-bottom:5px}
#gameShell #characterPanel .character-tools{margin-top:11px}
@media(min-width:1500px){
 #gameShell>.layout{grid-template-columns:minmax(480px,520px) minmax(0,1fr) minmax(350px,410px)}
 #gameShell #characterPanel>.party-hud{gap:14px}
}
@media(min-width:1151px) and (max-width:1300px){
 #gameShell>.layout{grid-template-columns:minmax(370px,400px) minmax(0,1fr) minmax(290px,320px);gap:9px;padding:0 10px 10px}
 #gameShell #characterPanel>.party-hud{gap:7px}
 #gameShell>.layout>.character{padding:9px}
}
@media(max-width:1150px) and (min-width:701px){
 #gameShell>.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:10px;padding:0 12px 12px}
 #gameShell>.layout>.character{grid-column:1/-1;grid-row:1;position:static;height:auto;max-height:none;overflow:visible}
 #gameShell>.layout>.battle{grid-column:1;grid-row:2}
 #gameShell>.layout>.collection{grid-column:2;grid-row:2}
 #gameShell #characterPanel>.party-hud{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:700px){
 #gameShell>.layout{display:flex;flex-direction:column}
 #gameShell>.layout>.character{order:0;position:static;height:auto;max-height:none;overflow:visible}
 #gameShell>.layout>.battle{order:1}
 #gameShell>.layout>.collection{order:2}
 #gameShell #characterPanel>.party-hud{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
 #gameShell #questTrackerTop{width:calc(100% - 20px);margin:0 10px 7px}
}
@media(max-width:520px){
 #gameShell #characterPanel>.party-hud{grid-template-columns:minmax(0,1fr)}
 #gameShell #characterPanel .party-character-column{order:0}
 #gameShell #characterPanel .party-pets-column{order:1}
 #gameShell #characterPanel #companion .dual-pet-hud{grid-template-columns:1fr}
 #gameShell #characterPanel #companion .dual-pet-unit .art-pet{max-height:130px}
}

/* Keep dual-companion controls and levels visible in the narrow HUD. */
#gameShell #characterPanel .party-hud>#partyQuestSlot{grid-column:1/-1;min-width:0}
#gameShell #characterPanel #companion .dual-pet-level{display:inline-block;color:#f4db9f;font-size:13px;font-weight:750;line-height:1.45}
#gameShell #characterPanel #companion [data-rename-active-pet]{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:4px 10px;margin:3px 0;color:#e9d9b3;font-size:12px}
#gameShell #characterPanel #partyQuestSlot .quest-tracker{min-width:0;overflow:visible}
#gameShell #characterPanel #partyQuestSlot .quest-tracker-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
#gameShell #characterPanel #partyQuestSlot .quest-track-card{min-width:0;padding:8px;overflow-wrap:anywhere}
#gameShell #characterPanel #partyQuestSlot .quest-track-card button{max-width:100%;white-space:normal}
@media(min-width:1001px) and (max-height:900px){
 body:has(#gameShell:not([hidden])){overflow-x:hidden;overflow-y:auto}
 #gameShell:not([hidden]){height:auto;min-height:100dvh;overflow:visible}
 #gameShell>.layout{height:auto;min-height:0;flex:none;align-items:start}
 #gameShell>.layout>.panel{height:auto;max-height:none;overflow:visible}
 #gameShell>.layout>.collection{min-height:440px}
 #gameShell>.layout>.collection #side{max-height:65dvh;overflow-y:auto}
 #gameShell>.layout>.battle{overflow:visible}
}

/* Match the companion rail to the character rail's width and portrait scale. */
#gameShell #characterPanel>.party-hud{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#gameShell #characterPanel #companion .dual-pet-unit{padding:7px;min-width:0}
#gameShell #characterPanel #companion .dual-pet-unit .hero{width:100%;padding:9px 5px 11px!important;margin:0 0 8px!important}
#gameShell #characterPanel #companion .dual-pet-unit .hero .art-hero{width:min(86%,170px)!important;max-width:100%!important;height:clamp(118px,14vh,170px)!important;object-fit:contain}
#gameShell #characterPanel #companion .dual-pet-unit .hero strong{font-size:15px;line-height:1.5}
@media(max-width:520px){#gameShell #characterPanel>.party-hud{grid-template-columns:minmax(0,1fr)}}

/* Desktop browser zoom must never trap the document in a fixed-height viewport. */
@media(min-width:1001px){
 html{overflow-y:auto}
 body:has(#gameShell:not([hidden])){overflow-x:auto;overflow-y:auto}
 #gameShell:not([hidden]){height:auto;min-height:100dvh;overflow:visible}
 #gameShell>.layout{height:auto;min-height:0;flex:none;align-items:start}
 #gameShell>.layout>.panel{height:auto;max-height:none;overflow:visible}
 #gameShell>.layout>.collection #side{max-height:none;overflow-y:visible}
}

/* Compact companion portraits to the character-card visual scale. */
#gameShell #characterPanel #companion .dual-pet-unit{padding:5px 6px 7px}
#gameShell #characterPanel #companion .dual-pet-unit .hero{min-height:0!important;padding:5px 4px 7px!important;margin:0 0 5px!important;gap:3px!important}
#gameShell #characterPanel #companion .dual-pet-unit .hero .art-hero{width:min(78%,145px)!important;height:clamp(86px,10vh,125px)!important;max-height:125px!important;object-fit:contain!important;margin:0 auto 3px!important}
#gameShell #characterPanel #companion .dual-pet-unit .meterline{line-height:1.3;margin-top:3px}
#gameShell #characterPanel #companion .dual-pet-unit .bar{margin:2px 0 5px}
#gameShell #characterPanel #companion .dual-pet-unit .hero strong{font-size:14px;line-height:1.3}
#gameShell #characterPanel #companion .dual-pet-unit .hero .pill{font-size:11px;line-height:1.35}

/* Three independently scrolling desktop rails; fluid two/one-column fallback. */
@media(min-width:1301px){
 html:has(#gameShell:not([hidden])){overflow:hidden}
 html:has(#entryScreen:not([hidden])){overflow-y:auto}
 body:has(#gameShell:not([hidden])){overflow:hidden}
 #gameShell:not([hidden]){height:100dvh;min-height:0;overflow:hidden}
 #gameShell>.layout{flex:1;min-height:0;height:auto;overflow:hidden;align-items:stretch}
 #gameShell>.layout>.panel{height:100%;min-height:0;max-height:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable}
 #gameShell>.layout>.collection #side{max-height:none;overflow:visible}
}
@media(min-width:701px) and (max-width:1300px){
 html{overflow-y:auto}
 body:has(#gameShell:not([hidden])){overflow-x:hidden;overflow-y:auto}
 #gameShell:not([hidden]){height:auto;min-height:100dvh;overflow:visible}
 #gameShell>.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,360px);gap:10px;height:auto;min-height:0;flex:none;align-items:start;padding:0 12px 12px}
 #gameShell>.layout>.panel{position:static;height:auto;max-height:none;min-height:0;overflow:visible}
 #gameShell>.layout>.character{grid-column:1/-1;grid-row:1}
 #gameShell>.layout>.battle{grid-column:1;grid-row:2}
 #gameShell>.layout>.collection{grid-column:2;grid-row:2}
 #gameShell>.layout>.collection #side{max-height:none;overflow:visible}
}
@media(max-width:700px){
 html{overflow-y:auto}
 body:has(#gameShell:not([hidden])){overflow-x:hidden;overflow-y:auto}
 #gameShell:not([hidden]){height:auto;min-height:100dvh;overflow:visible}
 #gameShell>.layout{height:auto;min-height:0;flex:none;overflow:visible}
 #gameShell>.layout>.panel{height:auto;max-height:none;overflow:visible}
}