/* GCH V19.6 | Comic Hybrid catalogues. Scoped styles, no visual changes to profiles. */
.gch-catalog-page{background:#172641;color:#172641}
.gch-catalog-page .gck-world{min-height:100vh;background:linear-gradient(rgba(16,34,58,.62),rgba(16,34,58,.75)),url('../regions/teyvat.webp') center/cover fixed;overflow:visible}
.gch-catalog{--cat-ink:#17243e;--cat-blue:#41c7de;--cat-yellow:#ffda6e;--cat-paper:#fff9ec;--cat-pink:#ff9eb0;max-width:1660px;width:calc(100% - 44px);margin:20px auto 75px;font-family:'Trebuchet MS',Arial,sans-serif}
.gch-catalog *, .gch-catalog *::before, .gch-catalog *::after{box-sizing:border-box}
.gch-catalog :is(a,button,select,input):focus-visible{outline:3px solid #467fd7;outline-offset:3px}
.gch-cat-breadcrumb{display:flex;gap:10px;align-items:center;color:#fffaf0;text-shadow:1px 2px 0 #17243e;font-weight:900;font-size:14px;margin-bottom:15px}
.gch-cat-breadcrumb a{color:#fffaf0;text-decoration:none}.gch-cat-breadcrumb a:hover{text-decoration:underline}
.gch-cat-hero{position:relative;min-height:220px;background:var(--cat-paper) url('../comic/patterns/halftone-dots.svg') 0 0/240px;border:5px solid var(--cat-ink);box-shadow:8px 9px 0 #101b31;overflow:hidden;display:flex;align-items:center;padding:30px clamp(22px,4vw,52px);gap:25px}
.gch-cat-hero::after{content:'';position:absolute;right:-70px;top:-80px;width:340px;height:340px;border:38px solid #f7c954;transform:rotate(20deg);opacity:.18;border-radius:50%;pointer-events:none}
.gch-cat-hero-copy{position:relative;z-index:1;flex:1;min-width:0}
.gch-cat-kicker{display:inline-block;background:var(--cat-ink);color:#fff;padding:5px 10px;font-size:11px;letter-spacing:.13em;font-weight:900}
.gch-cat-hero h1{font-size:clamp(35px,5vw,72px);margin:12px 0 9px;line-height:1.02;letter-spacing:-.055em;font-weight:1000;overflow-wrap:anywhere;color:var(--cat-ink)}
.gch-cat-hero p{margin:0;max-width:680px;font-size:clamp(16px,1.45vw,21px);font-weight:800;line-height:1.4}
.gch-cat-hero-icon{font-size:clamp(95px,12vw,175px);font-weight:1000;line-height:1;color:#ffb957;text-shadow:7px 7px 0 var(--cat-ink),-2px -2px 0 var(--cat-ink);transform:rotate(-12deg);flex:none;position:relative;z-index:0;user-select:none}
.gch-cat-total{position:absolute;right:24px;bottom:20px;background:#fff;border:3px solid var(--cat-ink);padding:6px 13px;display:flex;align-items:baseline;gap:8px;box-shadow:3px 3px 0 var(--cat-ink);font-weight:900;z-index:2}
.gch-cat-total strong{font-size:23px}.gch-cat-total span{font-size:12px;text-transform:uppercase}
.gch-cat-switch{display:flex;flex-wrap:wrap;gap:10px;margin:21px 0}
.gch-cat-switch-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;min-width:150px;padding:10px 21px;background:#fffaf0;border:3px solid var(--cat-ink);box-shadow:4px 4px 0 var(--cat-ink);color:var(--cat-ink);text-decoration:none;font-size:15px;font-weight:950;text-transform:uppercase;transition:transform .13s ease,box-shadow .13s ease}
.gch-cat-switch-link span{font-size:23px}.gch-cat-switch-link.is-current{background:var(--cat-yellow)}
.gch-cat-switch-link:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--cat-ink)}
.gch-cat-toolbox{display:flex;align-items:end;flex-wrap:wrap;gap:13px;padding:21px;margin:27px 0 16px;background:#fff9eb;border:4px solid var(--cat-ink);box-shadow:7px 7px 0 var(--cat-ink)}
.gch-cat-search-wrap{position:relative;flex:2 1 260px;min-width:190px}
.gch-cat-search-wrap>span{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:28px;pointer-events:none;font-weight:900;line-height:1}
.gch-cat-control{background:#fff;border:2px solid #334361;border-radius:2px;color:#152a46;font:800 14px 'Trebuchet MS',Arial,sans-serif;min-height:48px;padding:10px 13px;width:100%;min-width:0}
.gch-cat-search-wrap input{padding-left:43px;font-weight:700}
.gch-cat-filter{flex:1 1 148px;min-width:130px;display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.03em}
.gch-cat-filter select{max-width:100%;cursor:pointer}
.gch-cat-reset{min-height:48px;padding:9px 14px;border:3px solid var(--cat-ink);background:#b5e8e0;color:var(--cat-ink);font:900 13px 'Trebuchet MS',Arial,sans-serif;cursor:pointer;box-shadow:3px 3px 0 var(--cat-ink)}
.gch-cat-results{background:#ecf7f6 url('../comic/patterns/halftone-dots.svg') repeat;border:5px solid var(--cat-ink);box-shadow:9px 9px 0 #111d34;padding:clamp(16px,2.3vw,30px)}
.gch-cat-results-heading{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:20px;border-bottom:3px solid var(--cat-ink);padding-bottom:15px}
.gch-cat-results-heading h2{font-size:clamp(23px,3vw,34px);font-weight:1000;line-height:1.12;letter-spacing:-.025em;margin:0;color:var(--cat-ink)}
.gch-cat-results-heading p{margin:0;font-size:13px;font-weight:900;white-space:nowrap}.gch-cat-results-heading p strong{font-size:22px}
.gch-cat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;align-items:stretch}
.gch-cat-card{background:var(--cat-paper);border:3px solid var(--cat-ink);box-shadow:4px 5px 0 var(--cat-ink);min-width:0;position:relative;overflow:hidden}
.gch-cat-card[hidden]{display:none!important}
.gch-cat-card-link{display:block;height:100%;text-decoration:none;color:inherit}
.gch-cat-card:has(.gch-cat-card-link):hover{transform:translate(1px,2px);box-shadow:2px 3px 0 var(--cat-ink)}
.gch-cat-picture{height:clamp(112px,12vw,184px);border-bottom:3px solid var(--cat-ink);background:radial-gradient(circle at 50% 80%,#faf1cc,#b5dcea);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.gch-cat-picture::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(140deg,transparent 0 17px,rgba(255,255,255,.2) 18px 19px);pointer-events:none}
.gch-cat-picture img{width:94%;height:95%;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 5px 3px #15243e44)}
.gch-cat-card--characters .gch-cat-picture img{width:93%;height:100%;object-fit:contain;object-position:center bottom}
.gch-cat-element-hydro{background:radial-gradient(circle at 50% 65%,#dbf7ff,#65bce6)}
.gch-cat-element-electro{background:radial-gradient(circle at 50% 65%,#f3e4ff,#ae91e7)}
.gch-cat-element-pyro{background:radial-gradient(circle at 50% 65%,#fff1d7,#f6b286)}
.gch-cat-element-cryo{background:radial-gradient(circle at 50% 65%,#e7fbff,#93ccd9)}
.gch-cat-element-dendro{background:radial-gradient(circle at 50% 65%,#ecfbd9,#9ccf86)}
.gch-cat-element-anemo{background:radial-gradient(circle at 50% 65%,#e7fff3,#8ed9c0)}
.gch-cat-element-geo{background:radial-gradient(circle at 50% 65%,#fff8db,#dbb56c)}
.gch-cat-image-placeholder{font-size:70px;font-weight:1000;color:#758ca3;line-height:1}
.gch-cat-stars{position:absolute;z-index:2;top:6px;left:6px;display:inline-block;background:#243454;color:#ffd96d;padding:2px 6px;border:1px solid #fff6d7;font-size:12px;letter-spacing:0;white-space:nowrap}
.gch-cat-card-meta{display:flex;flex-direction:column;min-height:122px;padding:12px 12px 11px;gap:7px}
.gch-cat-card-meta h3{font-size:clamp(14px,1.06vw,17px);font-weight:1000;line-height:1.2;overflow-wrap:anywhere;margin:0;color:var(--cat-ink)}
.gch-cat-chips{display:flex;gap:5px;flex-wrap:wrap}
.gch-cat-chip{display:inline-block;font-size:10px;font-weight:900;padding:2px 6px;border:1px solid #afc0cf;background:#e6f4fc;color:#213955;line-height:1.35}
.gch-cat-chip-element{background:#fbe8b9;border-color:#ccb56e}
.gch-cat-summary{font-size:11px;color:#495d74;line-height:1.4;max-height:4.2em;overflow:hidden;margin:3px 0}
.gch-cat-id{font-size:10px;color:#637891;font-weight:900;letter-spacing:.05em;margin-top:auto}
.gch-cat-open{color:#0b6986;text-decoration:underline;text-underline-offset:2px;font-size:11px;font-weight:900}
.gch-cat-empty{font-size:17px;font-weight:900;text-align:center;padding:24px 0}
.gch-cat-load-more{display:block;margin:28px auto 4px;border:3px solid var(--cat-ink);padding:12px 30px;background:var(--cat-yellow);color:var(--cat-ink);font-weight:1000;font-size:15px;cursor:pointer;box-shadow:4px 4px 0 var(--cat-ink)}
.gch-cat-load-more[hidden],.gch-cat-empty[hidden]{display:none!important}
.gch-cat-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:1450px){.gch-cat-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1130px){.gch-cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:870px){.gch-cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gch-cat-hero-icon{font-size:100px}}
@media(max-width:610px){.gch-catalog{width:calc(100% - 24px);margin:12px auto 48px}.gch-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.gch-cat-card-meta{padding:9px;min-height:125px}.gch-cat-picture{height:145px}.gch-cat-hero{min-height:196px;padding:19px}.gch-cat-hero-icon{display:none}.gch-cat-hero h1{font-size:36px}.gch-cat-hero p{padding-bottom:21px}.gch-cat-total{bottom:5px;right:8px;padding:3px 7px;box-shadow:2px 2px 0 var(--cat-ink)}.gch-cat-total strong{font-size:17px}.gch-cat-total span{font-size:10px}.gch-cat-switch{gap:6px}.gch-cat-switch-link{min-width:0;flex:1 1 100px;padding:8px 5px;font-size:11px;gap:4px}.gch-cat-switch-link span{font-size:16px}.gch-cat-toolbox{gap:9px;padding:12px}.gch-cat-search-wrap{flex-basis:100%}.gch-cat-filter{flex-basis:calc(50% - 7px)}.gch-cat-reset{flex:1 1 100%}.gch-cat-results-heading{align-items:baseline}.gch-cat-summary{display:none}}
@media(max-width:370px){.gch-cat-grid{gap:8px}.gch-cat-picture{height:120px}.gch-cat-card-meta h3{font-size:13px}.gch-cat-card-meta{min-height:125px}.gch-cat-stars{font-size:10px}}
@media(prefers-reduced-motion:reduce){.gch-cat-switch-link{transition:none}}