html body #modal[data-view=pets][open]{zoom:1!important;width:min(1120px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important}#modal[data-view=pets] .dialog-top{padding:10px 14px}#modal[data-view=pets] .dialog-top h2{font-size:22px;margin:2px 0}#modal[data-view=pets] .dialog-top p{font-size:12px;margin:0}#modal[data-view=pets] .dialog-top .eyebrow{font-size:10px}.companion-workshop{display:grid;gap:10px;color:#dfeef5;font-size:13px;line-height:1.35}.companion-workshop button{min-height:34px;font-size:12px;padding:6px 8px}.companion-workshop h3,.companion-workshop h4,.companion-workshop p{margin:0}.companion-workshop small{color:#9fc4d4}.companion-roster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.companion-roster button{display:flex;align-items:center;gap:6px;text-align:left;background:#112737;border:1px solid #41687c;border-radius:8px;min-width:0}.companion-roster button[aria-pressed=true],.companion-gear-grid button[aria-pressed=true],.companion-variants button[aria-pressed=true]{border-color:#92f3ef;background:linear-gradient(120deg,#22515b,#24324d)}.companion-roster canvas{width:48px;height:48px;flex-shrink:0}.companion-roster span{display:grid;gap:3px;min-width:0}.companion-roster b{font-size:11px}.companion-roster small{font-size:10px}.companion-summary{border:1px solid #447387;border-radius:10px;background:linear-gradient(120deg,#143544,#161f33);padding:8px 12px;display:grid;grid-template-columns:1fr 230px;gap:6px 12px;min-width:0}.companion-hero{display:flex;gap:10px;align-items:center;min-width:0}.companion-hero>canvas{width:90px;height:75px;flex-shrink:0}.companion-hero>div{display:grid;gap:4px;min-width:0}.companion-hero h3{font-size:16px}.companion-hero h3 span{font-size:12px;color:#a2f4e9;white-space:nowrap}.companion-hero small,.companion-hero p{font-size:11px}.companion-controls{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:5px}.companion-controls>button:first-child{grid-column:1/-1}.companion-workshop button small{display:block;font-size:9px;color:inherit;opacity:.85;margin-top:3px}.companion-total{grid-column:1/-1;min-width:0}.companion-dual{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:5px}.companion-benefit{display:grid;gap:3px;padding:5px 7px;border-radius:6px;background:#071d29;border-left:2px solid #64dad0;font-size:11px;line-height:1.4;min-width:0;overflow-wrap:anywhere}.companion-benefit>b{color:#87ece0;font-size:10px}.companion-benefit strong{color:#e6fffc;white-space:nowrap}.companion-benefit.owner{border-left-color:#d4b77b;background:#242c2c}.companion-benefit.owner>b,.companion-benefit.owner strong{color:#f6dca2}.companion-inactive{font-size:10px;color:#f1cf91;padding-top:4px}.companion-city-notice{font-size:11px;padding:6px 8px;background:#4b3c21;border-radius:6px;color:#ffe0aa}.companion-gear-workspace{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(290px,1fr);gap:10px;align-items:start}.companion-section-title{font-size:12px;margin-bottom:6px!important}.companion-gear-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.companion-gear-grid button{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:4px;border:1px solid #5b6190;background:linear-gradient(145deg,#192d40,#21233b);border-radius:8px;text-align:left;min-width:0;min-height:100px}.companion-gear-grid button>small{grid-column:1/-1;font-size:10px;color:#ccb6ff}.companion-gear-grid .item-art{width:36px;height:36px}.companion-gear-grid span{display:grid;gap:3px;font-size:10px;min-width:0}.companion-gear-grid b{font-size:10px}.companion-gear-grid strong{color:#ffe3a1;font-size:11px}.companion-gear-grid em{font-style:normal;font-size:9px;color:#9dbfbf}.companion-inspector{display:grid;align-content:start;gap:7px;background:#132a3a;border:1px solid #7eaaa9;padding:10px;border-radius:10px;min-width:0}.companion-item-title{display:flex;align-items:center;gap:8px}.companion-item-title>.item-art{width:42px;height:42px;flex-shrink:0}.companion-item-title>div{min-width:0}.companion-item-title small{font-size:10px}.companion-item-title h4{font-size:13px;margin-top:3px}.companion-variants{display:grid;grid-template-columns:1fr 1fr;gap:5px}.companion-variants button{font-size:10px;min-height:30px}.companion-item-actions{display:grid;grid-template-columns:1fr 2fr;gap:5px}.companion-item-actions>button:only-child{grid-column:1/-1}.companion-next{border-top:1px solid #4d67754a;padding-top:5px;font-size:10px}.companion-next>small{display:block;margin-bottom:4px}.companion-max{padding:8px;color:#f0dca3;text-align:center;font-size:11px}.companion-footer{display:flex;justify-content:space-between;align-items:center;gap:8px}.companion-wallet{display:flex;gap:14px;flex-wrap:wrap;color:#a7bfd0;font-size:11px}.companion-wallet b{color:#ffe3a1}.companion-dismiss{font-size:10px!important}.companion-workshop button:focus-visible{outline:2px solid #b7fff3;outline-offset:2px}
@media(max-width:800px){html body #modal[data-view=pets][open]{width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important}#modal[data-view=pets] .dialog-top{padding:6px 10px}#modal[data-view=pets] .dialog-top h2{font-size:18px}#modal[data-view=pets] .dialog-top p{font-size:10px}.companion-workshop{gap:7px}.companion-roster button{flex-direction:column;text-align:center;gap:2px;padding:4px 2px}.companion-roster canvas{width:38px;height:38px}.companion-roster b{font-size:9px}.companion-roster small{font-size:8px}.companion-summary{grid-template-columns:1fr;padding:6px 8px;gap:5px}.companion-hero>canvas{width:64px;height:56px}.companion-hero h3{font-size:14px}.companion-hero h3 span{font-size:10px}.companion-hero p,.companion-hero small{font-size:10px}.companion-controls{grid-template-columns:1fr 1fr 1fr}.companion-controls>button:first-child{grid-column:auto}.companion-controls button{font-size:10px;padding:4px;min-height:38px}.companion-controls button small{font-size:8px}.companion-gear-workspace{grid-template-columns:1fr;gap:7px}.companion-gear-grid{gap:4px}.companion-gear-grid button{grid-template-columns:1fr;text-align:center;justify-items:center;gap:2px;min-height:80px;padding:4px 2px}.companion-gear-grid button>small{font-size:9px}.companion-gear-grid .item-art{width:30px;height:30px}.companion-gear-grid span{font-size:9px;gap:1px}.companion-gear-grid b{font-size:9px}.companion-gear-grid strong{font-size:10px}.companion-gear-grid em{display:none}.companion-inspector{padding:8px;gap:5px}.companion-item-title>.item-art{width:34px;height:34px}.companion-item-title h4{font-size:12px}.companion-benefit{font-size:10px;padding:4px 6px}.companion-benefit>b{font-size:9px}.companion-next{display:none}.companion-wallet{gap:3px;font-size:10px;flex-direction:column}.companion-section-title{margin-bottom:4px!important}.companion-item-actions button{min-height:38px}}
@media(max-width:360px){.companion-roster b{font-size:8px}.companion-controls button{font-size:9px}.companion-controls button small{font-size:7px}.companion-gear-grid b{font-size:8px}}
/* Keep compact labels from inheriting the dialog's larger fixed line height. */
#modal[data-view=pets] .companion-workshop *{line-height:1.3}
#modal[data-view=pets] .companion-workshop h3,#modal[data-view=pets] .companion-workshop h4,#modal[data-view=pets] .companion-workshop p{margin:0!important}
#modal[data-view=pets] .companion-workshop button small span{white-space:nowrap}
#modal[data-view=pets] .companion-footer .companion-dismiss{width:auto;flex-shrink:0;margin:0}
@media(max-width:800px){
html body #modal[data-view=pets] .dialog-top{padding:6px 10px!important}
html body #modal[data-view=pets] #modalBody{padding:6px 8px!important}
#modal[data-view=pets] .companion-roster b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:23px}
#modal[data-view=pets] .companion-roster button{padding:4px 2px!important;overflow:hidden}
#modal[data-view=pets] .companion-roster span{width:100%}
#modal[data-view=pets] .companion-roster small{font-size:8px;margin-top:0;min-height:21px}
#modal[data-view=pets] .companion-hero>div{gap:3px}
#modal[data-view=pets] .companion-controls button{padding:4px!important;font-size:10px!important}
#modal[data-view=pets] .companion-gear-grid button{min-height:70px!important;padding:4px 2px!important}
#modal[data-view=pets] .companion-gear-grid button>small{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
#modal[data-view=pets] .companion-gear-grid b{display:none}
#modal[data-view=pets] .companion-wallet{font-size:9px}
}