/* Attribute silhouettes contain the number; no adjacent icon-number row. */
.slot,.slot img{-webkit-touch-callout:none}
.slot .stats{gap:3px;max-width:120px;margin:0 auto;align-items:center}
.slot .stat.hp,.slot .stat.atk{display:grid;place-items:center;width:48px;max-width:none;height:42px;min-width:0;flex:0 1 48px;padding:0 0 3px;border:0;box-shadow:none;background: url('assets/stat-heart.svg') center/100% 100% no-repeat;font-size:24px;line-height:1;color:#fffce9;text-shadow:0 2px 0 #47382e,1px 0 #47382e,-1px 0 #47382e;font-weight:1000}
.slot .stat.atk{background-image:url('assets/stat-attack.svg')}.slot .stat i{display:none}.slot .stat.spd{display:none!important}
.slot .unit-hud,.bench-row .unit-hud,.shop-row .unit-hud{height:44px}.combat-unit .unit-hud{height:51px}.slot:after,.slot .ground-mark{bottom:44px}.bench-row .slot:after,.shop-row .slot:after{bottom:58px}.combat-unit:after{bottom:48px}.footer-space{min-width:0}
/* Card and explanations live together in a native modal, with their own scrolling. */
dialog.pet-inspector{position:fixed;inset:0;margin:auto;width:min(810px,calc(100vw - 28px));max-width:none;max-height:calc(100svh - 32px);height:fit-content;overflow:auto;border:0;border-radius:0;background:transparent;box-shadow:none;padding:18px 30px;color:#fdf4dd;overscroll-behavior:contain}
dialog.pet-inspector:not([open]){display:none}dialog.pet-inspector::backdrop{background:#112029b8;backdrop-filter:blur(7px)}
.inspection-layout{display:grid;grid-template-columns:minmax(0,380px) minmax(0,290px);align-items:start;gap:24px;margin:0 auto}
.inspection-layout.solo{grid-template-columns:minmax(0,380px);justify-content:center}.mechanic-guide[hidden]{display:none}
@media(min-width:701px){dialog.pet-inspector:has(.solo){width:min(440px,calc(100vw - 28px))}}
.collectible-card{position:relative;border:4px solid #ead18d;border-radius:22px;background:#172e38;overflow:hidden;box-shadow:0 0 0 2px #5b513c,0 0 0 5px #d8edeb33,0 16px 32px #0007;isolation:isolate}
.collectible-card::after{content:"";position:absolute;inset:0;border-radius:18px;box-shadow:inset 0 0 0 2px #fff2b575;pointer-events:none;z-index:5}
.card-portrait{position:relative;height:300px;background:#3a6571 url('assets/card-clearing-v1-opt1.webp') center 42%/cover;isolation:isolate}
.card-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(#071d3330,transparent 30%,transparent 65%,#102634e6);pointer-events:none;z-index:-1}
.card-topline{position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;gap:8px;z-index:3}.card-topline span{padding:3px 10px;border:1px solid #eed792;border-radius:10px;background:#15384ce8;color:#fff1c9;font-size:14px;font-weight:800;box-shadow:0 2px 5px #17334166}
.card-creature{position:absolute;width:94%;height:87%;left:3%;bottom:2%;object-fit:contain;filter:drop-shadow(0 3px 1px #fff2c999) drop-shadow(0 13px 8px #162b3e66);transform:rotate(-4deg);transform-origin:50% 90%}
dialog.pet-inspector .card-portrait h2{position:absolute;bottom:7px;left:14px;right:14px;font-size:33px;line-height:1.1;font-weight:1000;letter-spacing:2px;color:#fff8e0;text-shadow:0 3px #162e42,2px 0 #162e42,-2px 0 #162e42;transform:rotate(-3deg);margin:0}
.card-body{background:linear-gradient(#fff9e7,#ecedd8);padding:12px 18px 16px;color:#243f46;border-top:2px solid #d4b779}
.card-values{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding-bottom:10px;border-bottom:1px solid #bcbca0}.card-values span{text-align:center}.card-values small{display:block;font-size:11px!important;color:#5e6b64!important;border:0!important;padding:0!important}.card-values b{display:block;font-size:23px;line-height:28px;color:#274654}.card-values span:first-child b{color:#a44042}.card-values span:nth-child(2) b{color:#916324}.card-values em{font-size:13px;font-style:normal}
dialog.pet-inspector .card-body h3{font-size:21px;padding:10px 0 5px;margin:0;color:#253f4d}dialog.pet-inspector .card-description{font-size:17px;line-height:1.75;margin:0 0 12px}.pet-inspector .card-note{display:block;border-top:1px solid #c6c5a9;padding:9px 0 0;font-size:12px;color:#677166}
.mechanic-guide{padding-top:6px;max-height:calc(100svh - 85px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#dfc88c transparent}.pet-inspector .mechanic-guide>h2{font-size:16px;letter-spacing:2px;color:#fff0c7;margin:0 0 12px}
.mechanic,.mechanic-note{--term:#34718c}.mechanic.position,.mechanic-note.position{--term:#39734e}.mechanic.status,.mechanic-note.status{--term:#a74c36}.mechanic.rule,.mechanic-note.rule{--term:#75568f}
.pet-inspector button.mechanic{display:inline;padding:0;margin:0;min-height:0;min-width:0;border:0;border-radius:0;box-shadow:none;background:none;color:var(--term);font:inherit;font-weight:800;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;white-space:normal;cursor:pointer;transform:none}
.mechanic-note{border:1px solid #c1bf9d;border-left:4px solid var(--term);border-radius:11px;background:#fff9e9;box-shadow:0 4px 0 #081b2444;margin:0 0 10px;padding:11px 13px;color:#31464b;scroll-margin:12px}
.pet-inspector .mechanic-note h3{color:var(--term);font-size:16px;padding:0;margin:0 0 5px}.pet-inspector .mechanic-note p{font-size:14px;line-height:1.6;padding:0;margin:0}.mechanic-note:focus{outline:3px solid #f9dc81;outline-offset:2px}
.pet-inspector .inspect-close{position:fixed;top:12px;right:14px;z-index:20;border:2px solid #e6d29d;border-radius:50%;background:#1e3a47;color:#fff4d5;box-shadow:0 3px 8px #0006;width:40px;height:40px;font-size:28px;line-height:32px;padding:0}
@media(min-width:701px){.collectible-card{animation:card-reveal .25s ease-out}.card-creature{transition:transform .25s}.collectible-card:hover .card-creature{transform:translateY(-4px) rotate(2deg) scale(1.03)}}
@keyframes card-reveal{from{transform:perspective(800px) rotateY(-12deg) translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:900px){.slot .stats{gap:0}.slot .stat.hp,.slot .stat.atk{width:29px;height:28px;flex-basis:29px;font-size:17px;padding-bottom:2px}.slot .unit-hud,.bench-row .unit-hud,.shop-row .unit-hud{height:30px}.combat-unit .unit-hud{height:38px}.slot:after,.slot .ground-mark{bottom:30px}.bench-row .slot:after,.shop-row .slot:after{bottom:44px}.combat-unit:after{bottom:35px}}
@media(max-width:700px){dialog.pet-inspector{width:100vw;max-height:100svh;height:100svh;margin:0;padding:52px 20px 25px;overflow:auto}.inspection-layout{display:flex;flex-direction:column;gap:20px;width:min(350px,100%)}.collectible-card{width:100%;flex-shrink:0}.card-portrait{height:260px}.card-body{padding:10px 15px 14px}.pet-inspector .card-description{font-size:16px!important;line-height:1.65!important}.mechanic-guide{max-height:none;overflow:visible;width:100%;padding:0}.pet-inspector .mechanic-guide>h2{font-size:15px}.pet-inspector .mechanic-note p{font-size:14px}.card-values b{font-size:22px}.pet-inspector .inspect-close{width:36px;height:36px;top:8px;right:12px}.pet-inspector .card-portrait h2{font-size:30px!important}}
@media(orientation:landscape) and (min-width:650px) and (max-height:500px){.slot .stat.hp,.slot .stat.atk{height:24px;width:29px;flex-basis:29px;font-size:16px}.slot .unit-hud,.bench-row .unit-hud,.shop-row .unit-hud{height:25px}.combat-unit .unit-hud{height:38px}.card-portrait{height:210px}dialog.pet-inspector{padding-top:8px}.mechanic-guide{max-height:none;overflow:visible}}
@media(prefers-reduced-motion:reduce){.collectible-card{animation:none}.card-creature{transition:none}.collectible-card:hover .card-creature{transform:rotate(-4deg)}}
.slot .stat.hp,.slot .stat.atk{font-size:min(24px,calc(72px / var(--digits,2)))}
@media(max-width:900px){.slot .stat.hp,.slot .stat.atk{font-size:min(17px,calc(38px / var(--digits,2)))}}