/* Companion garden: presentation scoped to the companion screen. */
.companion-garden{padding:4px 8px 32px;min-width:0}
.companion-garden .comp-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:12px}
.companion-garden .comp-tab{justify-content:center;min-height:54px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}
.companion-garden .comp-tab.active{background:linear-gradient(135deg,var(--primary-l),var(--surface));border-bottom:3px solid var(--primary)}
.comp-scene-stage{position:relative;border:1px solid #c7dce8;border-radius:20px;overflow:hidden;background:url('../assets/companion-ui/terrace.webp') center bottom/cover no-repeat;margin-bottom:22px;padding:20px 22px 14px;color:#18345d}
.comp-scene-stage header{text-align:center;background:radial-gradient(ellipse,#ffffffed,transparent 75%);padding:4px 12px}
.comp-scene-stage h2{font:700 clamp(19px,2vw,28px) Cinzel,serif;margin:0 0 8px}
.comp-scene-stage header p{font-size:12px;margin:0;line-height:1.5}
.comp-scene-slots{display:flex;justify-content:center;gap:12px;padding-top:15px}
.comp-scene-slot{position:relative;flex:0 1 230px;min-width:0;text-align:center;padding:0 10px 10px;background:url('../assets/companion-ui/pedestal.webp') center bottom 22px/100% auto no-repeat}
.comp-scene-pet{height:150px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;position:relative}
.comp-scene-pet img{width:85%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 5px #28442333)}
.comp-scene-pet>span{font-size:65px;opacity:.65}
.comp-scene-label{position:relative;margin:0 4px;padding:7px 4px;border:1px solid #e5c68d;border-radius:10px;background:#fffdf2ed;box-shadow:0 3px 10px #796c3720}
.comp-scene-label strong{display:block;font-size:13px;overflow-wrap:anywhere}
.comp-scene-label small{font-size:10px;color:#64728b}
.comp-scene-number{display:inline-grid;place-items:center;background:#fff;border:2px solid #d8deed;border-radius:50%;width:25px;height:25px;font-size:12px;font-weight:800;margin-top:5px}
.companion-garden .comp-team-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.companion-garden .comp-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:0 4px 16px #5f6b9a12;min-width:0}
.companion-garden .comp-card-body{display:flex;flex-direction:column;padding:10px;gap:10px;flex:1;min-width:0}
.companion-garden .comp-card-avatar{width:100%;height:155px;box-sizing:border-box;border-radius:12px;background:url('../assets/companion-ui/terrace.webp') center bottom/cover no-repeat;border:1px solid #d6e4da}
.companion-garden .comp-card-avatar img{padding:8px;box-sizing:border-box}
.companion-garden .comp-card-info{width:100%;min-width:0}
.companion-garden .comp-card-name{flex-wrap:wrap;overflow-wrap:anywhere}
.companion-garden .comp-card-ability{min-height:48px;line-height:1.55}
.companion-garden .comp-card-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
.companion-garden .comp-card-act{min-width:0;min-height:50px;padding:6px 2px}
.companion-garden .comp-card-act-lbl{font-size:10px;overflow-wrap:anywhere}
.companion-garden .act-potential{grid-column:1/-1}
.companion-garden .comp-slot-empty{min-height:220px;border-radius:18px}
[data-theme=dark] .comp-scene-stage header{background:radial-gradient(ellipse,#ffffffdb,transparent 75%)}
@media(max-width:1200px){.companion-garden .comp-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.comp-scene-pet{height:125px}}
@media(max-width:640px){.companion-garden{padding:0 0 24px}.companion-garden .comp-tab{min-height:50px;padding:7px 3px;flex-wrap:wrap;gap:3px}.companion-garden .comp-tab-count{font-size:9px}.comp-scene-stage{padding:14px 8px 8px}.comp-scene-stage header p{font-size:11px}.comp-scene-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.comp-scene-slot{padding:0 8px 6px}.comp-scene-pet{height:105px}.comp-scene-label strong{font-size:11px}.companion-garden .comp-team-grid{gap:8px}.companion-garden .comp-card-body{padding:7px}.companion-garden .comp-card-avatar{height:120px}.companion-garden .comp-card-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.companion-garden .comp-team-grid{grid-template-columns:1fr}}

.comp-garden-heading{font:700 23px Cinzel,serif;color:var(--text);display:flex;align-items:center;gap:12px;margin:18px 2px 12px}.comp-garden-heading small{font:600 12px Nunito,sans-serif;color:var(--text2)}

/* Compact, single-row tab labels leave more room for the team. */
.companion-garden .comp-tab{flex-direction:row;flex-wrap:nowrap;gap:7px;min-height:42px;padding:7px 10px}
.companion-garden .comp-tab-icon{font-size:18px}
.companion-garden .comp-tab-count{padding:1px 5px}
@media(max-width:640px){.companion-garden .comp-tabs{gap:3px}.companion-garden .comp-tab{gap:3px;padding:7px 2px;min-height:42px}.companion-garden .comp-tab-icon{font-size:15px}.companion-garden .comp-tab-lbl{font-size:10px}.companion-garden .comp-tab-count{padding:1px 3px;font-size:8px}}

/* One compact navigation bar for Team, Box, Codex and Bond. */
.companion-garden .comp-tabs{position:sticky;top:0;z-index:5;display:flex;justify-content:flex-start;width:fit-content;max-width:100%;box-sizing:border-box;padding:3px;gap:3px;border-radius:12px;background:var(--surface);margin:0 0 12px;overflow:visible}
.companion-garden .comp-tab{flex:0 1 auto;min-width:0;min-height:38px;padding:6px 18px;border:0;border-radius:9px;flex-direction:row;gap:6px}
.companion-garden .comp-tab+.comp-tab{border-left:0}
.companion-garden .comp-tab.active{border-bottom:0;background:var(--primary-l)}
.companion-garden .comp-tab.active::after{height:2px;bottom:0}
.comp-box-banner{min-height:165px;box-sizing:border-box;padding:34px 38% 24px 6%;margin-bottom:14px;border:1px solid #d1e5ef;border-radius:18px;background:url('../assets/companion-ui/box-banner.webp') center/cover no-repeat;color:#294a7c}
.comp-box-banner h2{font:700 clamp(23px,2.5vw,34px) Cinzel,serif;margin:0 0 8px}
.comp-box-banner p{font-size:13px;line-height:1.55;margin:0;max-width:430px;text-shadow:0 1px 3px white}
.companion-garden .comp-box-collection .pkbox-toolbar{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:9px 12px;align-items:center}
.companion-garden .comp-box-collection .pkbox-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.companion-garden .comp-box-collection .pkbox-card{padding:6px 6px 10px;border-radius:15px;border-width:3px;border-style:double;text-align:left;min-width:0;box-shadow:0 3px 12px #6b7aab15}
.companion-garden .comp-box-collection .pkbox-card:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.companion-garden .comp-box-collection .pkbox-img{width:100%;height:125px;margin:0 0 8px;border-radius:10px;background:url('../assets/companion-ui/box-scene.webp') center bottom/cover no-repeat}
.companion-garden .comp-box-collection .pkbox-img img{padding:5px;box-sizing:border-box}
.companion-garden .comp-box-collection .pkbox-img .pkbox-emo{font-size:40px}
.companion-garden .comp-box-collection .pkbox-name{font-size:13px;white-space:normal;overflow-wrap:anywhere;margin-bottom:5px}
.companion-garden .comp-box-collection .pkbox-ab{font-size:11px;line-height:1.5;min-height:32px;margin-top:5px}
.companion-garden .comp-box-collection .pkbox-power{font-size:12px;margin-top:5px}
.companion-garden .comp-box-collection .pkbox-potential{border:1px solid #e8cc88;background:#fff6d3;color:#866025;border-radius:8px;padding:4px;font-size:10px;text-align:center;margin-top:5px}
.companion-garden .comp-box-collection .pkbox-pager{margin:16px 0 0}
@media(max-width:1100px){.companion-garden .comp-box-collection .pkbox-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:800px){.companion-garden .comp-box-collection .pkbox-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.comp-box-banner{padding-left:22px;padding-right:36%;min-height:155px}}
@media(max-width:640px){.companion-garden .comp-tabs{width:100%;gap:1px}.companion-garden .comp-tab{flex:1;padding:6px 2px;gap:3px;min-height:38px}.comp-box-banner{padding:22px 28% 22px 16px;background-position:60% center;min-height:145px}.comp-box-banner h2{font-size:23px}.comp-box-banner p{font-size:11px}.companion-garden .comp-box-collection .pkbox-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.companion-garden .comp-box-collection .pkbox-img{height:120px}.companion-garden .comp-box-collection .pkbox-sort-wrap{flex-wrap:wrap}}

.companion-garden .comp-box-collection .pkbox-img:has(img) .pkbox-emo{display:none}
.comp-box-banner{background-image:linear-gradient(90deg,#f8fcffb8,transparent 65%),url('../assets/companion-ui/box-banner.webp')}

/* Full-width companion subnavigation, flush beneath the main header. */
#contentScroll:has(>.companion-garden){padding:0;gap:0}
#contentScroll>.companion-garden{padding:0 14px 28px}
.companion-garden .comp-tabs{width:calc(100% + 28px);max-width:none;margin:0 -14px 14px;padding:4px 14px;box-sizing:border-box;border-radius:0;border-width:0 0 1px;box-shadow:0 2px 7px #6474a112;justify-content:center}
.companion-garden .comp-tab{flex:0 1 200px;min-height:42px;padding:6px 12px}
/* The supplied lower frame repeats the card's rarity without covering its text. */
.companion-garden .comp-box-collection .pkbox-card{padding-bottom:38px;overflow:visible}
.companion-garden .comp-box-collection .pkbox-card::after{content:'';position:absolute;left:-3px;right:-3px;bottom:-10px;z-index:2;height:44px;background:var(--comp-rarity-frame) center bottom/100% 100% no-repeat;pointer-events:none}
.companion-garden .pkbox-card[data-rarity=common]{--comp-rarity-frame:url('../assets/companion-ui/rarity-common.webp')}
.companion-garden .pkbox-card[data-rarity=rare]{--comp-rarity-frame:url('../assets/companion-ui/rarity-rare.webp')}
.companion-garden .pkbox-card[data-rarity=epic]{--comp-rarity-frame:url('../assets/companion-ui/rarity-epic.webp')}
.companion-garden .pkbox-card[data-rarity=legendary]{--comp-rarity-frame:url('../assets/companion-ui/rarity-legendary.webp')}
@media(max-width:640px){#contentScroll>.companion-garden{padding:0 9px 24px}.companion-garden .comp-tabs{width:calc(100% + 18px);margin-left:-9px;margin-right:-9px;padding:3px 5px}.companion-garden .comp-tab{flex:1;padding:5px 2px;min-height:40px}}

/* Put box count and sorting in the banner instead of a separate toolbar. */
.comp-box-banner{position:relative;padding-bottom:66px;min-height:190px}
.comp-box-banner h2{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.comp-box-banner .pkbox-count{font:700 11px Nunito,sans-serif;background:#ffffffd9;padding:4px 9px;border:1px solid #dae3ef;border-radius:20px;color:#536b8f}
.comp-box-banner .pkbox-sort-wrap{position:absolute;right:16px;bottom:12px;display:flex;align-items:center;gap:8px;padding:5px 7px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.comp-box-banner .pkbox-sort-label{font-size:9px}
@media(max-width:640px){.comp-box-banner{padding-bottom:68px;min-height:205px}.comp-box-banner .pkbox-sort-wrap{left:10px;right:10px;bottom:10px;justify-content:flex-end;gap:5px}.comp-box-banner .pkbox-sort-btn{padding:7px 8px;font-size:10px}.comp-box-banner .pkbox-sort-label{margin-right:auto}}

/* Keep the sleeping cat clear: sorting sits below the copy on the left. */
.comp-box-banner .pkbox-sort-wrap{left:6%;right:auto;max-width:calc(100% - 32px);box-sizing:border-box;flex-direction:row}
.comp-box-banner .pkbox-sort-label{display:none}
.comp-box-banner .pkbox-sort-btn{padding:6px 10px}
@media(max-width:800px){.comp-box-banner .pkbox-sort-wrap{left:22px}}
@media(max-width:640px){.comp-box-banner .pkbox-sort-wrap{left:16px;right:auto;justify-content:flex-start}.comp-box-banner .pkbox-sort-btn{padding:7px 8px}}

/* Codex: collected knowledge in the same garden setting; navigation is unchanged. */
.companion-garden .comp-codex-banner{min-height:180px;box-sizing:border-box;padding:24px 26px;display:flex;align-items:center;justify-content:space-between;gap:22px;border:1px solid #d0e2e7;border-radius:18px;background:linear-gradient(90deg,#f8fcffd9,transparent 65%),url('../assets/companion-ui/codex-banner.webp') center/cover no-repeat;margin-bottom:18px}
.comp-codex-copy{max-width:52%;color:#294a7c}
.companion-garden .comp-codex-banner .dex-header-title{font:700 clamp(22px,2.4vw,32px) Cinzel,serif;color:#253d68;margin:0 0 10px}
.comp-codex-copy p{font-size:12px;line-height:1.6;margin:0}
.companion-garden .comp-codex-banner .dex-progress-wrap{flex:0 1 270px;min-width:210px;padding:18px 14px;border:1px solid #e1d2b6;border-radius:15px;background:var(--surface);box-shadow:0 3px 12px #4a658524;gap:12px}
.companion-garden .dex-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.companion-garden .dex-card{min-width:0;border-radius:15px;padding:6px 6px 35px;text-align:left;border-width:2px;background:var(--surface);box-shadow:0 3px 12px #6575a514;--comp-rarity-frame:url('../assets/companion-ui/rarity-common.webp')}
.companion-garden .dex-card[data-rarity=legendary]{border-color:#efb448;--comp-rarity-frame:url('../assets/companion-ui/rarity-legendary.webp')}
.companion-garden .dex-card[data-rarity=epic]{border-color:#b68bf3;--comp-rarity-frame:url('../assets/companion-ui/rarity-epic.webp')}
.companion-garden .dex-card[data-rarity=rare]{border-color:#7eb7fa;--comp-rarity-frame:url('../assets/companion-ui/rarity-rare.webp')}
.companion-garden .dex-card::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-8px;height:36px;background:var(--comp-rarity-frame) center/100% 100% no-repeat;pointer-events:none}
.companion-garden .dex-img-wrap{position:relative;width:100%;height:120px;margin:0 0 8px;border-radius:10px;border:0;background:url('../assets/companion-ui/terrace.webp') center bottom/cover no-repeat;overflow:hidden}
.companion-garden .dex-img-wrap img{width:100%;height:100%;object-fit:contain;padding:5px;box-sizing:border-box}
.companion-garden .dex-img-wrap:has(img) .dex-emo{display:none}
.companion-garden .dex-name{font-size:12px;overflow-wrap:anywhere;margin:4px 0}
.companion-garden .dex-ab{font-size:10px;line-height:1.5}
.companion-garden .dex-state{font-size:10px;color:var(--green);display:block;margin:4px 0}
.companion-garden .dex-num{z-index:2;top:10px;left:10px;background:#ffffffe6;border-radius:8px;padding:2px 4px;color:#536b8a}
.companion-garden .dex-unknown-art{height:120px;display:grid;place-items:center;background:linear-gradient(#f4f7ffc7,#e5eaf4b0),url('../assets/companion-ui/terrace.webp') center/cover;border-radius:10px;color:#99a4ba;font-size:44px;font-weight:900}
.companion-garden .dex-card>.dex-emo.unknown{display:none}
@media(max-width:1200px){.companion-garden .dex-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:800px){.companion-garden .dex-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.companion-garden .comp-codex-banner{padding:18px 14px;gap:14px;flex-direction:column;align-items:stretch;background-position:65% center}.comp-codex-copy{max-width:100%}.companion-garden .comp-codex-banner .dex-progress-wrap{flex:0 0 auto;min-width:0;max-width:none;padding:12px}.companion-garden .dex-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.companion-garden .dex-img-wrap,.companion-garden .dex-unknown-art{height:115px}}

.companion-garden .dex-card.caught[data-rarity=common]{border-color:#bdc8d5}