/* The painted album frame is sliced at its corners, never stretched as a whole. */
body #pet-collection{box-sizing:border-box;position:fixed;inset:0;margin:auto;width:min(1060px,calc(100vw - 24px));height:min(690px,calc(100dvh - 24px));max-width:none;max-height:none;padding:0;border:38px solid #795029;border-radius:8px;background:#fff3d7;color:#352514;box-shadow:0 18px 80px #0009;text-align:left;overflow:hidden;}
body #pet-collection[data-art-ready=true]{border-image:url('assets/felles/grensesnitt/pet-collection-frame-v1.webp') 110 fill / 38px / 0 stretch;background:transparent;}
#pet-collection::backdrop{background:#071014b8;backdrop-filter:blur(4px);}
#pet-collection .pet-album{height:100%;min-height:0;display:flex;flex-direction:column;gap:12px;padding:0 8px;box-sizing:border-box;}
#pet-collection .pet-album-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;height:auto;border:0;background:none;padding:0;margin:0;}
#pet-collection p{color:#584023;}
#pet-collection h2{font:600 clamp(27px,4vw,42px)/1.1 Georgia,serif;color:#392712;margin:3px 0 0;padding:0;background:none;text-align:left;}
#pet-collection .pet-eyebrow{font-size:11px;letter-spacing:.19em;font-weight:700;color:#785127;margin:0;}
#pet-collection button{box-sizing:border-box;min-height:44px;padding:9px 16px;border:1px solid #946932;border-radius:7px;background:linear-gradient(#fff0cc,#e5c48f);color:#382610;font:700 15px/1.25 system-ui,sans-serif;box-shadow:inset 0 0 0 2px #fff8dfb3,0 3px 0 #80572b;text-shadow:none;cursor:pointer;}
#pet-collection button:hover{background:linear-gradient(#fff6dd,#f1d497);}
#pet-collection button:focus-visible,#pet-collection #pets-scroll:focus-visible{outline:3px solid #79511f;outline-offset:3px;}
#pet-collection #pets-close{flex:none;width:44px;height:44px;padding:0;font-size:31px;line-height:1;align-self:flex-start;}
#pet-collection .pet-selection{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;border-bottom:1px solid #ac7d3e66;padding-bottom:8px;flex:none;}
#pet-collection #pets-active{margin:0;font-size:16px;line-height:1.35;font-weight:600;}
#pet-collection #pets-rest{font-size:13px;flex:none;}
#pet-collection #pets-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-color:#ac7d3e #f5e4c1;padding:5px;}
#pet-collection #pets-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;}
#pet-collection .pet-card{border:1px solid #b58c53;border-radius:12px;background:#fffaf0c4;padding:14px;box-shadow:0 3px 10px #51391820,inset 0 0 0 3px #e3c79566;min-width:0;display:flex;flex-direction:column;}
#pet-collection .pet-card.is-active{border:2px solid #865314;padding:13px;background:#f8e1aebd;box-shadow:0 0 0 3px #d8b05d66,inset 0 0 0 3px #fff4d1;}
#pet-collection .pet-portrait{position:relative;flex:none;min-width:0;height:clamp(88px,15.5vh,150px);display:block;background:radial-gradient(ellipse,#efd49977,transparent 70%);}
#pet-collection .pet-portrait img{display:block;position:absolute;inset:0;width:100%;height:100%;max-height:100%;object-fit:contain;}
#pet-collection h3{font:600 27px/1.2 Georgia,serif;color:#392712;margin:8px 0 2px;}
#pet-collection .pet-card-info{display:flex;flex:1;flex-direction:column;align-items:flex-start;}
#pet-collection .pet-kind{margin:0;color:#79552d;font-size:12px;line-height:1.4;}
#pet-collection .pet-story{font-size:14px;line-height:1.5;color:#4d3923;margin:12px 0 18px;}
#pet-collection .pet-card button{margin-top:auto;width:100%;}
#pet-collection .pet-card button[aria-pressed=true]{background:linear-gradient(#efd080,#d3a654);color:#30200a;}
#pet-collection .pet-empty-slot{min-height:120px;border:1px dashed #b99b6b;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#86643e;background:#f7e9c680;}
#pet-collection .pet-empty-slot span{font:48px Georgia,serif;color:#b08b49;}
#pet-collection .pet-empty-slot p{font-size:13px;}
#pet-collection #pets-empty{text-align:center;padding:12px 0 22px;}
#pet-collection #pets-empty img{object-fit:contain;}
#pet-collection #pets-empty h3{font-size:25px;}
#pet-collection #pets-empty p{font-size:15px;margin:10px 0 0;}
#pet-collection .pet-album-footer{flex:none;display:block;background:none;padding:5px 0 0;margin:0;border-top:1px solid #ac7d3e66;}
#pet-collection #pets-status{font-size:14px;line-height:1.35;color:#503315;margin:0;}
#pet-collection #pets-status:empty{display:none;}
#pet-collection .pet-future{font-size:12px;line-height:1.4;color:#705131;margin:4px 0 0;}
#pet-collection [hidden]{display:none!important;}
@media(max-width:760px){
 body #pet-collection{border-width:24px;width:calc(100vw - 16px);height:calc(100dvh - 16px);}
 body #pet-collection[data-art-ready=true]{border-image-width:24px;}
 #pet-collection #pets-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 #pet-collection .pet-album{gap:7px;padding:0;}
 #pet-collection .pet-portrait{height:112px;}
}
@media(max-height:500px){
 body #pet-collection{border-width:18px;width:min(1060px,calc(100vw - 12px));height:calc(100dvh - 12px);}
 body #pet-collection[data-art-ready=true]{border-image-width:18px;}
 #pet-collection .pet-album{gap:5px;padding:0 4px;}
 #pet-collection .pet-eyebrow{display:none;}
 #pet-collection p{color:#584023;}
#pet-collection h2{font-size:27px;}
 #pet-collection .pet-album-header{min-height:44px;}
 #pet-collection .pet-selection{min-height:28px;padding:0 0 4px;}
 #pet-collection #pets-active{font-size:14px;}
 #pet-collection #pets-rest{min-height:36px;padding:4px 10px;}
 #pet-collection #pets-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 #pet-collection .pet-card{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;padding:10px;}
 #pet-collection .pet-card.is-active{padding:9px;}
 #pet-collection .pet-portrait{height:100px;align-self:center;}
 #pet-collection h3{font-size:23px;margin:0;}
 #pet-collection .pet-kind{font-size:11px;}
 #pet-collection .pet-story{font-size:13px;line-height:1.4;margin:6px 0 8px;}
 #pet-collection .pet-card button{font-size:13px;padding:7px 8px;}
 #pet-collection .pet-empty-slot{min-height:100px;}
 #pet-collection #pets-empty{padding:0 0 12px;}
 #pet-collection #pets-empty img{width:64px;height:64px;}
 #pet-collection .pet-future{font-size:11px;margin-top:2px;}
}
@media(max-height:500px) and (min-width:600px){
 #pet-collection .pet-album{position:relative;}
 #pet-collection .pet-selection{position:absolute;top:0;right:56px;max-width:calc(100% - 260px);height:44px;border:0;padding:0;gap:8px;}
 #pet-collection #pets-active{font-size:12px;}
 #pet-collection #pets-rest{font-size:11px;padding:5px 8px;max-width:100px;}
 #pet-collection .pet-kind{display:none;}
}
@media(max-height:500px){#pet-collection #pets-empty:not([hidden]) + #pets-grid{display:none;}}