/* A quiet, consistent collection surface. Load after card-layout.css. */
.collection-page{--collection-space:12px;min-width:0;max-width:1120px;margin-inline:auto}
.collection-page>.page-intro{align-items:center;gap:12px;margin:0 0 18px;padding:0;border:0}
.collection-page>.page-intro h1{font-size:28px;line-height:1.2;letter-spacing:-.8px}
.collection-page>.page-intro .sub{margin:5px 0 0;font-size:12px;line-height:1.4;color:#9fb5c8}
.collection-page>.page-intro>.btn{flex:none;min-height:44px;margin:0;padding:10px 14px;border-radius:10px;font-size:13px;box-shadow:none}
.collection-page>.page-intro>.btn svg{width:17px;height:17px}

/* The count and limit share one heading; every slot has the same footprint. */
.collection-page .collection-team{position:relative;top:auto;z-index:14;margin:0 0 16px;padding:0 0 16px;border:0;border-bottom:1px solid #93b3cd20;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
.collection-page .collection-team .section-title{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 10px;min-width:0;flex-wrap:wrap}
.collection-page .collection-team .section-title h2{margin:0;font-size:15px;line-height:1.4;white-space:nowrap}
.collection-page .collection-team .section-title h2 small{margin-inline-start:6px;font-size:12px;font-weight:500;color:#9fb5c8}
.collection-page .collection-team-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 12px;margin-inline-start:auto;max-width:100%}
.collection-page .collection-team .nature-guide-link{display:inline-flex;align-items:center;gap:5px;min-height:36px;margin:0;padding:4px 0;font-size:12px;line-height:1.4}
.collection-page .collection-team .nature-guide-link svg{width:15px;height:15px}
.collection-page .collection-team .team-legendary-count{gap:5px;margin:0;color:#a7bacb;font-size:11px;line-height:1.4}
.collection-page .collection-team .team-legendary-count svg{width:13px;height:13px;color:#c7b58e}
.collection-page .collection-team .team-legendary-count.over-limit{color:#ffab99}
.collection-page .collection-team .team-legendary-count.over-limit>span{font-size:11px}
.game-main .collection-page .collection-team .team-slot{min-width:0;min-height:0;height:auto}
.game-main .collection-page .collection-team .empty-team-slot{min-height:260px;max-height:none;height:auto;padding:0;gap:0;border:0;border-radius:12px}
.collection-page .collection-team .blank-slot{flex:1;width:100%;height:100%;min-height:0;padding:12px;border:1px dashed #7696ae55;border-radius:12px;gap:0;background:#14283a}
.collection-page .collection-team .blank-slot p{display:none}
.collection-page .collection-team .blank-slot svg{width:20px;height:20px}
.collection-page .collection-team .drop-target{outline:2px solid #ffe1a0;outline-offset:2px;border-radius:10px;box-shadow:0 0 0 4px #e7be7520}

/* Four stable buttons and two balanced fields, all with the same touch height. */
.collection-page .collection-controls{display:grid;gap:8px;margin:0 0 18px;min-width:0}
.collection-page .collection-header{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:8px;width:100%;margin:0}
.collection-page .collection-header .filter-pill{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:44px;margin:0;padding:10px 12px;border:1px solid #8eafc429;border-radius:10px;background:#14293b;color:#bacbd8;font-size:13px;font-weight:500;line-height:1.2;white-space:nowrap;box-shadow:none}
.collection-page .collection-header .filter-pill>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.collection-page .collection-header .filter-pill svg{width:16px;height:16px}
.collection-page .collection-header .filter-pill.selected{border-color:#c8a76b85;background:#493e2d80;color:#f3d39b}
.collection-page .collection-header .filter-pill:hover{border-color:#a2c2d55c;background:#1c3447}
.collection-page .collection-header .filter-pill.selected:hover{border-color:#d5b775;background:#493e2da0}
.collection-page .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:8px;width:100%;min-width:0;margin:0}
.collection-page .filters>.input,.collection-page .filters>select{width:100%;min-width:0;max-width:100%;height:44px;min-height:44px;margin:0;padding:10px 12px;border:1px solid #8eafc429;border-radius:10px;background:#14293b;color:#dce7ef;font-size:13px;line-height:1.3;box-shadow:none}
.collection-page .filters>.input::placeholder{color:#95aebf;opacity:1}
.collection-page .filters>select[hidden]{display:none}
.collection-page .filters:has(>select[hidden]){grid-template-columns:minmax(0,1fr)}
.collection-page .filter-pill:focus-visible,.collection-page .filters>.input:focus-visible,.collection-page .filters>select:focus-visible{outline:2px solid #a2d7c5;outline-offset:2px;border-color:#a2d7c5}

/* Team and reserve use the same cards, widths and visible information. */
.collection-page .collection-reserve{min-height:120px;margin:0;padding:0 0 20px;scroll-margin-top:24px}
.collection-page .reserve-title{margin:0 0 10px;font-size:15px;font-weight:600;line-height:1.4;color:#b7cbdc}
.game-main .collection-page .collection-team .home-team,.game-main .collection-page .collection-reserve .collection-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:12px;margin:0}
.game-main .collection-page :is(.collection-team,.collection-reserve) .dino-card{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;height:100%;min-height:0;padding:0;border-width:1px;border-radius:12px;background:#16283e;box-shadow:none;overflow:hidden}
.game-main .collection-page :is(.collection-team,.collection-reserve) .dino-card>.art{flex:none;width:100%;height:auto;aspect-ratio:1;margin:0;border-radius:0}
.game-main .collection-page :is(.collection-team,.collection-reserve) .dino-card>.card-top{display:flex!important;position:relative;inset:auto;align-items:center;justify-content:space-between;flex-wrap:wrap;min-height:32px;margin:0;padding:7px 8px;gap:4px}
.game-main .collection-page :is(.collection-team,.collection-reserve) .card-rarity{display:flex;font-size:9px;line-height:1.2;letter-spacing:0;white-space:normal;overflow:visible;padding:3px 5px}
.game-main .collection-page :is(.collection-team,.collection-reserve) .card-lvl{font-size:10px;line-height:1.2;white-space:nowrap;padding:3px 4px}
.game-main .collection-page :is(.collection-team,.collection-reserve) .dino-card .card-body{flex:1;display:flex;flex-direction:column;justify-content:flex-start;width:100%;min-width:0;min-height:0;margin:0;padding:10px!important;gap:8px}
.game-main .collection-page :is(.collection-team,.collection-reserve) .dino-card .card-body h3{display:block;-webkit-line-clamp:unset;min-height:2.6em;max-height:none;margin:0;font-size:13px;font-weight:650;line-height:1.3;letter-spacing:0;white-space:normal;overflow:visible;overflow-wrap:anywhere;hyphens:none;text-overflow:clip;text-align:start}
.game-main .collection-page :is(.collection-team,.collection-reserve) .card-summary{display:flex!important;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:auto}
.game-main .collection-page :is(.collection-team,.collection-reserve) .card-summary .nature-badge{display:inline-flex!important;max-width:100%;margin:0;padding:3px 5px;font-size:10px;line-height:1.3;white-space:normal;overflow:visible;overflow-wrap:anywhere;gap:4px}
.game-main .collection-page :is(.collection-team,.collection-reserve) .card-summary .nature-badge svg{width:12px;height:12px}
.game-main .collection-page :is(.collection-team,.collection-reserve) .card-summary .power-score{display:inline-flex!important;margin:0;padding:0;gap:3px;line-height:1;white-space:nowrap}
.game-main .collection-page :is(.collection-team,.collection-reserve) .power-score b{font-size:17px;line-height:1}
.game-main .collection-page :is(.collection-team,.collection-reserve) .power-score svg{width:14px;height:14px}
.game-main .collection-page :is(.collection-team,.collection-reserve) .copy-count{display:block!important;inset:auto 7px 7px auto;padding:3px 5px;max-width:calc(100% - 14px);font-size:10px;line-height:1.2}
.game-main .collection-page .collection-team .equipped{display:none!important}
.collection-page .collection-more{padding:4px 0}
.collection-page .collection-more>.btn{min-height:44px;border-radius:10px;font-size:13px}

/* Empty team positions offer the usable reserve without leaving the page. */
.reserve-picker-modal{width:min(920px,calc(100vw - 24px));max-height:calc(100dvh - 24px);scroll-padding-block-end:76px}
.reserve-picker-modal .modal-body.reserve-picker-body{padding-block-end:76px}
.reserve-picker-body>.info-copy{margin:0 0 16px;font-size:14px}
.reserve-picker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.reserve-picker-option{display:flex;flex-direction:column;min-width:0;padding:0;border:1px solid #93b3cd30;border-radius:14px;background:#13293c;color:inherit;cursor:pointer;overflow:hidden;text-align:start}
.reserve-picker-option>.dino-card{width:100%;height:100%;min-width:0;border:0;border-radius:0;pointer-events:none}
.reserve-picker-option .card-body{padding:12px}
.reserve-picker-option .card-body h3{font-size:14px;line-height:1.35}
.reserve-picker-add{display:flex;align-items:center;justify-content:center;gap:6px;flex:none;width:100%;min-height:44px;padding:9px 8px;border-top:1px solid #93b3cd20;color:#f4c678;font-size:13px;font-weight:700}
.reserve-picker-add svg{width:16px;height:16px}
.reserve-picker-option:hover{border-color:#f4c67880;background:#1a3549}
.reserve-picker-option:focus-visible{outline:3px solid #f4c678;outline-offset:3px}
.reserve-picker-body>.btn{display:flex;margin:18px auto 0}
@media(max-width:700px){.reserve-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.reserve-picker-option .card-body{padding:10px}.reserve-picker-modal .modal-body{padding:16px}}

@media(max-width:1000px){
 .game-main .collection-page .collection-team .home-team,.game-main .collection-page .collection-reserve .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
 .collection-page>.page-intro{margin-bottom:16px}
 .collection-page>.page-intro h1{font-size:24px}
 .collection-page .collection-team{position:relative;top:auto;margin:0 0 14px;padding:0 0 14px;background:none;backdrop-filter:none}
 .collection-page .collection-team .section-title{margin-bottom:8px}
 .collection-page .collection-team .nature-guide-link{min-height:44px}
 .collection-page .collection-controls{margin-bottom:16px}
 .game-main .collection-page .collection-team .home-team,.game-main .collection-page .collection-reserve .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}
@media(max-width:540px){
 .game-main .collection-page :is(.collection-team,.collection-reserve) .dino-card>.card-top{min-height:27px;padding:5px;gap:3px}
 .game-main .collection-page :is(.collection-team,.collection-reserve) .card-rarity{font-size:8px;padding:3px}
 .game-main .collection-page :is(.collection-team,.collection-reserve) .card-lvl{font-size:8px;padding:3px}
 .game-main .collection-page :is(.collection-team,.collection-reserve) .dino-card .card-body{padding:7px!important;gap:6px}
 .game-main .collection-page :is(.collection-team,.collection-reserve) .dino-card .card-body h3{font-size:11px}
 .game-main .collection-page :is(.collection-team,.collection-reserve) .card-summary{gap:5px}
 .game-main .collection-page :is(.collection-team,.collection-reserve) .card-summary .nature-badge{font-size:9px;padding:2px 3px;gap:3px}
 .game-main .collection-page :is(.collection-team,.collection-reserve) .card-summary .nature-badge svg{width:10px;height:10px}
 .game-main .collection-page :is(.collection-team,.collection-reserve) .power-score b{font-size:15px}
 .game-main .collection-page :is(.collection-team,.collection-reserve) .power-score svg{width:12px;height:12px}
 .game-main .collection-page .collection-team .empty-team-slot{min-height:210px}
 .collection-page .collection-header{gap:6px}
 .collection-page .collection-header .filter-pill{padding:10px 6px;font-size:12px}
 .collection-page .collection-header .filter-pill svg{display:none}
 .collection-page .filters>.input,.collection-page .filters>select{font-size:12px;padding-inline:10px}
 .collection-page .filters>.input{font-size:16px}
}