/* One footprint for normal, special and Pack Attack weeks. All art is decorative. */
.hcp-panel{--hcp-height:clamp(184px,50.43cqw,277px);--hcp-header-height:calc(var(--hcp-height)*.195 - 6px);height:var(--hcp-height);box-sizing:border-box;padding:6px;background:#fff0cc url('assets/home-picks/comic-shell.webp') center/100% 100% no-repeat;isolation:isolate;overflow:visible;color:#071c2b}
.hcp-panel *{box-sizing:border-box}
.hcp-heading{height:var(--hcp-header-height);display:flex;align-items:center;justify-content:space-between;margin:0;padding:calc(var(--hcp-height)*.05 - 6px) 9px 0;gap:12px;font:400 20px/1 HomeComic,Impact,sans-serif;background:transparent;border:0;color:#071c2b}
.hcp-lettering{display:block;flex:none;width:calc(var(--letters-ratio)*1em);height:1em;max-width:100%;overflow:visible;mix-blend-mode:multiply}
.hcp-heading-title,.hcp-heading-week{font-size:24px;transform:translateY(-.07em)}
.hcp-rows{height:calc(100% - var(--hcp-header-height));display:grid;min-width:0;grid-template-rows:minmax(0,1fr);overflow:hidden}
.hcp-split{grid-template-rows:repeat(2,minmax(0,1fr))}
.hcp-panel .hcp-row{position:relative;margin:0;min-height:0;min-width:0;width:100%;display:grid;grid-template-columns:23% minmax(0,1fr) 24px;gap:5px;align-items:center;padding:4px 9px 4px 3px;border:0;border-radius:0;box-shadow:none;transform:none;background:transparent;color:#071c2b;text-align:left;cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent}
.hcp-row:after{content:'';position:absolute;inset:0;pointer-events:none;background:url('assets/home-comic/ink-grain.svg') center/240px;opacity:.12;mix-blend-mode:multiply}
.hcp-panel .hcp-row+.hcp-row{border-top:2px solid #081723}
.hcp-panel .hcp-special{background:#ffdb70 url('assets/home-picks/special-strip.webp') left center/100% 100% no-repeat}
.hcp-panel .hcp-pack{background:#10151b url('assets/home-picks/pack-strip.webp') left center/100% 100% no-repeat;color:#fff6de}
.hcp-pack .hcp-lettering{mix-blend-mode:normal}
.hcp-picture{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
.hcp-pencil{width:100%;height:100%;object-fit:contain;filter:drop-shadow(1px 2px 0 #071c2b55)}
.hcp-teams{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}
.hcp-teams img{display:block;width:90%;height:48%;object-fit:contain;filter:drop-shadow(1px 1px 0 #fff8)}
.hcp-copy{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:2px 0}
.hcp-topline{display:flex;align-items:center;justify-content:space-between;min-width:0;gap:3px}
.hcp-label{font-size:19px;max-width:100%;position:relative}
.hcp-topline:has(.hcp-status) .hcp-label{max-width:57%}
.hcp-selection{display:block;min-width:0;max-width:100%;color:#071c2b;transform:rotate(-.6deg);line-height:1.02}
.hcp-call{font-size:43px;max-width:100%;height:auto;aspect-ratio:var(--letters-ratio);max-height:43px}
.hcp-pack .hcp-selection{color:#fff6de}
.hcp-pack .hcp-label{color:#7cff4e}
.hcp-pack .hcp-hint{color:#c7dadd}
.hcp-hint{font:400 11px/1.15 var(--body,system-ui);color:#3c4c50;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:0}
.hcp-status{font:400 11px/1 HomeComic,Impact,sans-serif;white-space:nowrap;text-transform:uppercase;padding:3px 4px;transform:rotate(-3deg);border:1px solid currentColor;letter-spacing:.15px}
.hcp-good{color:#17633c;background:#dcf1b9}.hcp-loss{color:#962d28;background:#f7d8c5}.hcp-neutral{color:#3f464a;background:#eee7d5}
.hcp-arrow{width:24px;display:block}.hcp-arrow svg{display:block;width:100%;height:auto}
.hcp-long-text{font:400 21px/.98 HomeComic,Impact,sans-serif;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;max-height:2em;letter-spacing:.1px}
.hcp-full .hcp-label{font-size:25px}.hcp-full .hcp-call{font-size:55px;max-height:55px}.hcp-full .hcp-copy{gap:7px}.hcp-full .hcp-hint{white-space:normal;font-size:12px}.hcp-full .hcp-long-text{font-size:28px;max-height:3em;-webkit-line-clamp:3}
.hcp-full .hcp-teams{flex-direction:row;gap:0}.hcp-full .hcp-teams img{width:60%;height:70%}.hcp-full .hcp-teams img+img{margin-left:-20%}
.hcp-empty{font:400 14px/1.4 var(--body,system-ui);padding:16px;margin:0}
.hcp-panel .hcp-row:focus-visible{outline:3px solid #e43b49;outline-offset:-4px;z-index:2}.hcp-panel .hcp-pack:focus-visible{outline-color:#51ddec}
.hcp-panel .hcp-row:hover{filter:brightness(1.045)}
@container (max-width:330px){.hcp-panel .hcp-row{grid-template-columns:22% minmax(0,1fr) 20px;gap:4px;padding-right:6px}.hcp-arrow{width:20px}.hcp-label{font-size:17px}.hcp-hint{font-size:10px}.hcp-status{font-size:10px;padding:3px}.hcp-long-text{font-size:18px}.hcp-full .hcp-long-text{font-size:24px}.hcp-full .hcp-label{font-size:22px}}
@container (min-width:470px){.hcp-heading-title,.hcp-heading-week{font-size:30px}.hcp-label{font-size:25px}.hcp-call{font-size:51px;max-height:51px}.hcp-hint{font-size:13px}.hcp-status{font-size:14px}.hcp-long-text{font-size:27px}.hcp-full .hcp-call{font-size:68px;max-height:68px}}
@media (prefers-reduced-motion:reduce){.hcp-panel .hcp-row{transition:none}}
.hcp-panel .hcp-special{grid-template-columns:32% minmax(0,1fr) 24px}.hcp-panel .hcp-pack{grid-template-columns:42% minmax(0,1fr) 20px;gap:3px;padding-left:0;padding-right:8px}.hcp-pack .hcp-label{font-size:18px}.hcp-pack .hcp-call{font-size:36px;max-height:36px}.hcp-pack .hcp-hint{font-size:9px}.hcp-pack .hcp-arrow{width:20px}.hcp-pack .hcp-status{font-size:9px;padding:2px}
/* Two rows retain comfortable touch height without compressing glyph proportions. */
.hcp-split .hcp-copy{gap:0;padding:0}.hcp-split .hcp-label{font-size:17px}.hcp-split .hcp-call{font-size:32px;max-height:32px}.hcp-split .hcp-hint{line-height:1.15}.hcp-split .hcp-long-text{font-size:17px}.hcp-split .hcp-long .hcp-hint{display:none}.hcp-split .hcp-pack .hcp-call{font-size:29px;max-height:29px}.hcp-split .hcp-pack .hcp-label{font-size:16px}
@container(min-width:470px){.hcp-split .hcp-label{font-size:23px}.hcp-split .hcp-call{font-size:44px;max-height:44px}.hcp-split .hcp-pack .hcp-call{font-size:40px;max-height:40px}.hcp-split .hcp-pack .hcp-label{font-size:23px}.hcp-split .hcp-long-text{font-size:23px}}

/* Defensive overlap: keep every required pick visible with usable touch rows. */
.hcp-panel:has(.hcp-triple){height:auto;min-height:var(--hcp-height)}
.hcp-triple{height:auto;grid-template-rows:repeat(3,minmax(76px,1fr))}
.hcp-triple .hcp-call{font-size:29px;max-height:29px}
.hcp-triple .hcp-label{font-size:16px}