:root{--nhl-primary: #0ea5e9;--nhl-primary-dark: #0369a1;--nhl-accent: #ef4444;--nhl-ink: #0b1220;--nhl-ink-soft: #16233a;--nhl-surface: #ffffff;--nhl-surface-muted: #f3f8fd;--nhl-border: #dbe7f3;--nhl-border-strong: #bcd2e6;--nhl-text-main: #0b1220;--nhl-text-muted: #64748b;--nhl-success: #10b981;--nhl-shadow: 0 18px 40px rgba(11, 18, 32, 0.10);--primary: var(--nhl-primary);--primary-dark: var(--nhl-primary-dark);--border: var(--nhl-border);--surface: var(--nhl-surface);--surface-muted: var(--nhl-surface-muted);--shadow-soft: var(--nhl-shadow);--text-main: var(--nhl-text-main);--text-muted: var(--nhl-text-muted);}
.nhl-stage{background: var(--nhl-surface);border: 1px solid var(--nhl-border);border-radius: 1rem;box-shadow: var(--nhl-shadow);overflow: hidden;margin-bottom: 2.5rem;}
.nhl-byline{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.5rem 1rem;padding: 0.75rem 1.25rem;font-size: 0.85rem;color: var(--nhl-text-muted);background: var(--nhl-surface-muted);border-bottom: 1px solid var(--nhl-border);}
.nhl-byline-author{font-weight: 600;color: var(--nhl-text-main);}
.nhl-byline .author-link{color: var(--nhl-primary-dark);text-decoration: none;font-weight: 600;}
.nhl-byline .author-link:hover{text-decoration: underline;}
.nhl-filters{padding: 1.25rem 1.25rem 1.1rem;}
.nhl-filters-label{display: block;font-size: 0.75rem;font-weight: 700;letter-spacing: 0.07em;text-transform: uppercase;color: var(--nhl-text-muted);margin: 0 0 0.6rem;}
.nhl-chip-rail{display: flex;flex-wrap: wrap;gap: 0.5rem;padding: 0;margin: 0;list-style: none;}
.nhl-chip{display: inline-flex;align-items: center;gap: 0.4rem;padding: 0.5rem 0.95rem;font-size: 0.9rem;font-weight: 600;color: var(--nhl-text-main);background: var(--nhl-surface);border: 1px solid var(--nhl-border-strong);border-radius: 9999px;cursor: pointer;transition: color 0.18s, border-color 0.18s, background 0.18s;}
.nhl-chip:hover{border-color: var(--nhl-primary);color: var(--nhl-primary-dark);}
.nhl-chip:focus-visible{outline: 2px solid var(--nhl-primary);outline-offset: 2px;}
.nhl-chip[aria-pressed="true"]{background: linear-gradient(135deg, var(--nhl-primary) 0%, var(--nhl-primary-dark) 100%);border-color: transparent;color: #ffffff;}
.nhl-chip-count{font-size: 0.75rem;opacity: 0.75;font-weight: 600;font-variant-numeric: tabular-nums;}
.nhl-chip-sep{width: 1px;align-self: stretch;margin: 0.15rem 0.3rem;background: var(--nhl-border-strong);}
.nhl-ice{position: relative;padding: 1.5rem 1.25rem;min-height: 250px;display: flex;flex-direction: column;background: radial-gradient(120% 90% at 50% 0%, #1c3352 0%, var(--nhl-ink) 62%);border-top: 1px solid var(--nhl-border);border-bottom: 1px solid var(--nhl-border);overflow: hidden;}
.nhl-ice::before{content: '';position: absolute;top: 0;bottom: 0;left: 50%;width: 2px;background: linear-gradient(180deg, rgba(239, 68, 68, 0) 0%, rgba(239, 68, 68, 0.30) 50%, rgba(239, 68, 68, 0) 100%);pointer-events: none;opacity: 0;transition: opacity 0.25s;}
.nhl-ice:has(.is-duel)::before{opacity: 1;}
.nhl-ice > *{position: relative;}
.nhl-empty[hidden],.nhl-cards[hidden]{display: none;}
.nhl-empty{display: flex;flex: 1;align-items: center;justify-content: center;text-align: center;padding: 2.25rem 1.5rem;background: rgba(255, 255, 255, 0.04);border: 1px dashed rgba(148, 197, 240, 0.30);border-radius: 0.9rem;}
.nhl-empty-icon{display: block;margin: 0 auto 0.9rem;color: var(--nhl-primary);opacity: 0.7;}
.nhl-empty-title{font-size: 1.1rem;font-weight: 700;color: #ffffff;margin: 0 0 0.3rem;}
.nhl-empty-desc{font-size: 0.92rem;color: #a8bdd6;margin: 0 auto;max-width: 36ch;}
.nhl-cards{display: grid;gap: 1rem;}
.nhl-cards.is-multi{grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));}
.nhl-cards.is-duel{grid-template-columns: 1fr auto 1fr;align-items: center;}
.nhl-card{position: relative;padding: 1.4rem 1.25rem 1.25rem;background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%);border: 1px solid rgba(148, 197, 240, 0.22);border-radius: 0.9rem;overflow: hidden;}
.nhl-card::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 3px;background: linear-gradient(90deg, var(--nhl-primary) 0%, var(--nhl-accent) 100%);}
.nhl-card-div{font-size: 0.72rem;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: #7dd3fc;margin: 0;}
.nhl-card-name{font-size: clamp(1.3rem, 3vw, 1.8rem);font-weight: 800;line-height: 1.15;color: #ffffff;margin: 0.3rem 0 0.75rem;}
.nhl-badges{display: flex;flex-wrap: wrap;gap: 0.4rem;margin-bottom: 1rem;}
.nhl-badge{padding: 0.3rem 0.7rem;font-size: 0.75rem;font-weight: 600;border-radius: 9999px;}
.nhl-badge-east{background: rgba(14, 165, 233, 0.20);color: #7dd3fc;border: 1px solid rgba(14, 165, 233, 0.45);}
.nhl-badge-west{background: rgba(239, 68, 68, 0.18);color: #fca5a5;border: 1px solid rgba(239, 68, 68, 0.40);}
.nhl-badge-cups{background: rgba(250, 204, 21, 0.16);color: #fde68a;border: 1px solid rgba(250, 204, 21, 0.38);}
.nhl-facts{display: grid;gap: 0.65rem;margin: 0;}
.nhl-fact{display: flex;flex-direction: column;gap: 0.1rem;}
.nhl-fact-label{font-size: 0.7rem;font-weight: 700;letter-spacing: 0.05em;text-transform: uppercase;color: #8fa8c4;}
.nhl-fact-value{font-size: 0.96rem;font-weight: 600;color: #e8f2fb;line-height: 1.45;}
.nhl-fact-note .nhl-fact-value{font-weight: 500;color: #b9cde3;font-size: 0.9rem;}
.nhl-vs{display: flex;align-items: center;justify-content: center;width: 3rem;height: 3rem;font-size: 0.85rem;font-weight: 800;letter-spacing: 0.06em;color: #ffffff;background: rgba(239, 68, 68, 0.85);border-radius: 9999px;box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.12);}
.nhl-console{display: flex;flex-wrap: wrap;align-items: flex-end;gap: 1.25rem;padding: 1.25rem;background: var(--nhl-surface-muted);}
.nhl-console-group{display: flex;flex-direction: column;gap: 0.45rem;}
.nhl-console-label{font-size: 0.75rem;font-weight: 700;letter-spacing: 0.07em;text-transform: uppercase;color: var(--nhl-text-muted);}
.nhl-seg{display: inline-flex;padding: 0.25rem;background: var(--nhl-surface);border: 1px solid var(--nhl-border-strong);border-radius: 0.6rem;gap: 0.25rem;}
.nhl-seg-btn{min-width: 5.5rem;padding: 0.45rem 0.75rem;font-size: 0.88rem;font-weight: 700;color: var(--nhl-text-muted);background: transparent;border: none;border-radius: 0.4rem;cursor: pointer;transition: color 0.18s, background 0.18s;}
.nhl-seg-btn:hover{color: var(--nhl-primary-dark);}
.nhl-seg-btn:focus-visible{outline: 2px solid var(--nhl-primary);outline-offset: 2px;}
.nhl-seg-btn[aria-pressed="true"]{background: var(--nhl-primary-dark);color: #ffffff;}
.nhl-switch{display: inline-flex;align-items: flex-start;gap: 0.6rem;font-size: 0.92rem;font-weight: 600;color: var(--nhl-text-main);cursor: pointer;padding-bottom: 0.3rem;max-width: 24rem;}
.nhl-switch input{width: 1.1rem;height: 1.1rem;margin-top: 0.15rem;accent-color: var(--nhl-primary-dark);cursor: pointer;flex-shrink: 0;}
.nhl-switch-hint{display: block;font-size: 0.8rem;font-weight: 500;color: var(--nhl-text-muted);}
.nhl-actions{display: flex;flex-wrap: wrap;gap: 0.6rem;padding: 1.25rem;border-top: 1px solid var(--nhl-border);}
.nhl-btn{display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 0.75rem 1.4rem;font-size: 1rem;font-weight: 700;border: none;border-radius: 0.55rem;cursor: pointer;transition: transform 0.15s, box-shadow 0.15s, color 0.18s, border-color 0.18s;}
.nhl-btn:focus-visible{outline: 2px solid var(--nhl-primary);outline-offset: 2px;}
.nhl-btn-primary{min-width: 10.5rem;background: linear-gradient(135deg, var(--nhl-primary) 0%, var(--nhl-primary-dark) 100%);color: #ffffff;}
.nhl-btn-primary:hover{transform: translateY(-1px);box-shadow: 0 10px 22px rgba(3, 105, 161, 0.32);}
.nhl-btn-primary:active{transform: translateY(0);}
.nhl-btn-primary[disabled]{cursor: wait;opacity: 0.85;}
.nhl-btn-primary.is-drawing .nhl-btn-icon{animation: nhl-spin 0.7s linear infinite;}
@keyframes nhl-spin{to{transform: rotate(360deg);}}
.nhl-btn-icon{display: inline-flex;}
.nhl-btn-ghost{background: transparent;color: var(--nhl-text-muted);border: 1px solid var(--nhl-border-strong);font-weight: 600;}
.nhl-btn-ghost:hover{color: var(--nhl-primary-dark);border-color: var(--nhl-primary);}
.nhl-btn-mini{display: inline-flex;align-items: center;gap: 0.45rem;padding: 0.55rem 0.9rem;font-size: 0.85rem;font-weight: 600;color: var(--nhl-text-muted);background: var(--nhl-surface);border: 1px solid var(--nhl-border-strong);border-radius: 0.5rem;cursor: pointer;transition: color 0.18s, border-color 0.18s, background 0.18s;}
.nhl-btn-mini:hover{color: var(--nhl-primary-dark);border-color: var(--nhl-primary);}
.nhl-btn-mini:focus-visible{outline: 2px solid var(--nhl-primary);outline-offset: 2px;}
.nhl-btn-mini.is-done{background: var(--nhl-success);border-color: var(--nhl-success);color: #ffffff;}
.nhl-actions-spacer{flex: 1 1 auto;}
.nhl-status{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.5rem 1rem;padding: 0.7rem 1.25rem;font-size: 0.85rem;color: var(--nhl-text-muted);border-top: 1px solid var(--nhl-border);background: var(--nhl-surface-muted);}
.nhl-status-pool strong{color: var(--nhl-text-main);font-weight: 700;}
.nhl-status-key{display: none;}
@media (min-width: 768px){.nhl-status-key{display: inline;}}
.nhl-kbd{display: inline-block;padding: 0.1rem 0.4rem;font-family: inherit;font-size: 0.78rem;font-weight: 700;color: var(--nhl-text-main);background: var(--nhl-surface);border: 1px solid var(--nhl-border-strong);border-bottom-width: 2px;border-radius: 0.3rem;}
.nhl-recent{padding: 1rem 1.25rem;border-top: 1px solid var(--nhl-border);}
.nhl-recent[hidden]{display: none;}
.nhl-recent-label{font-size: 0.75rem;font-weight: 700;letter-spacing: 0.07em;text-transform: uppercase;color: var(--nhl-text-muted);margin: 0 0 0.6rem;}
.nhl-recent-list{display: flex;flex-wrap: wrap;gap: 0.4rem;padding: 0;margin: 0;list-style: none;}
.nhl-recent-item{padding: 0.35rem 0.75rem;font-size: 0.84rem;font-weight: 600;color: var(--nhl-text-muted);background: var(--nhl-surface-muted);border: 1px solid var(--nhl-border);border-radius: 9999px;}
.nhl-share{padding: 1rem 1.25rem;border-top: 1px solid var(--nhl-border);background: var(--nhl-surface-muted);}
.nhl-share[hidden]{display: none;}
.nhl-share-title{font-size: 0.85rem;font-weight: 700;color: var(--nhl-text-main);margin: 0 0 0.7rem;}
.nhl-share-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));gap: 0.5rem;}
.nhl-share-btn{display: inline-flex;align-items: center;justify-content: center;padding: 0.55rem 0.75rem;font-size: 0.82rem;font-weight: 700;color: #ffffff;text-decoration: none;border-radius: 0.4rem;transition: transform 0.15s, opacity 0.15s;}
.nhl-share-btn:hover{transform: translateY(-1px);opacity: 0.94;color: #ffffff;}
.nhl-share-x{background: #0f172a;}
.nhl-share-fb{background: #1877f2;}
.nhl-share-in{background: #0a66c2;}
.nhl-share-rd{background: #ff4500;}
.nhl-share-tg{background: #229ed9;}
.nhl-share-wa{background: #25d366;color: #0b3d1f;}
.nhl-share-wa:hover{color: #0b3d1f;}
.nhl-content{margin: 0 0 2.5rem;}
.nhl-content h2{font-size: clamp(1.3rem, 2.6vw, 1.6rem);font-weight: 800;color: var(--nhl-text-main);line-height: 1.25;margin: 2.25rem 0 0.85rem;}
.nhl-content h2:first-child{margin-top: 0;}
.nhl-content p{font-size: 1.02rem;line-height: 1.7;color: var(--nhl-text-main);margin: 0 0 1.05rem;}
.nhl-content a{color: var(--nhl-primary-dark);font-weight: 600;text-decoration: none;}
.nhl-content a:hover{text-decoration: underline;}
.nhl-lede{font-size: 1.12rem;line-height: 1.65;color: var(--nhl-text-muted);}
.nhl-beat{font-size: 1.05rem;font-weight: 600;color: var(--nhl-text-main);border-left: 3px solid var(--nhl-accent);padding-left: 0.9rem;margin: 0 0 1.05rem;}
.nhl-aside{display: flex;gap: 0.9rem;padding: 1.1rem 1.25rem;margin: 1.5rem 0;background: rgba(14, 165, 233, 0.07);border: 1px solid rgba(14, 165, 233, 0.32);border-radius: 0.75rem;}
.nhl-aside-icon{flex-shrink: 0;color: var(--nhl-primary-dark);}
.nhl-aside-body h3{font-size: 1rem;font-weight: 700;color: #075985;margin: 0 0 0.35rem;}
.nhl-aside-body p{font-size: 0.96rem;line-height: 1.6;color: #0c4a6e;margin: 0;}
.nhl-aside-body p:last-child{margin: 0;}
.nhl-fig{margin: 1.75rem 0;padding: 1.35rem;background: var(--nhl-surface);border: 1px solid var(--nhl-border);border-radius: 0.9rem;}
.nhl-fig-cap{font-size: 0.98rem;font-weight: 700;color: var(--nhl-text-main);margin-bottom: 1rem;}
.nhl-fig-bars{display: grid;gap: 0.55rem;padding: 0;margin: 0 0 1.1rem;list-style: none;}
.nhl-fig-row{display: grid;grid-template-columns: 8rem 1fr 2.2rem;align-items: center;gap: 0.6rem;font-size: 0.88rem;}
.nhl-fig-name{font-weight: 600;color: var(--nhl-text-main);}
.nhl-fig-track{height: 0.7rem;background: var(--nhl-surface-muted);border: 1px solid var(--nhl-border);border-radius: 9999px;overflow: hidden;}
.nhl-fig-bar{display: block;height: 100%;background: linear-gradient(90deg, var(--nhl-primary) 0%, var(--nhl-primary-dark) 100%);border-radius: 9999px;}
.nhl-fig-bar.is-west{background: linear-gradient(90deg, #f87171 0%, #dc2626 100%);}
.nhl-fig-num{font-variant-numeric: tabular-nums;font-weight: 700;color: var(--nhl-text-muted);text-align: right;}
.nhl-fig-flow{display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem;padding-top: 1rem;border-top: 1px dashed var(--nhl-border-strong);}
.nhl-fig-step{padding: 0.4rem 0.75rem;font-size: 0.84rem;font-weight: 600;color: var(--nhl-text-main);background: var(--nhl-surface-muted);border: 1px solid var(--nhl-border);border-radius: 0.45rem;}
.nhl-fig-arrow{color: var(--nhl-text-muted);font-size: 1.05rem;}
.nhl-fig-note{font-size: 0.85rem;line-height: 1.55;color: var(--nhl-text-muted);margin: 0.9rem 0 0;}
.nhl-divisions{display: grid;grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));gap: 1rem;margin: 1.5rem 0 1.75rem;}
.nhl-div-col{padding: 1.1rem 1.15rem;background: var(--nhl-surface);border: 1px solid var(--nhl-border);border-radius: 0.85rem;}
.nhl-div-head{display: block;font-size: 0.72rem;font-weight: 700;letter-spacing: 0.07em;text-transform: uppercase;color: var(--nhl-text-muted);margin-bottom: 0.15rem;}
.nhl-div-title{font-size: 1.02rem;font-weight: 800;color: var(--nhl-text-main);margin: 0 0 0.7rem;padding-bottom: 0.6rem;border-bottom: 2px solid var(--nhl-primary);}
.nhl-div-col.is-west .nhl-div-title{border-bottom-color: var(--nhl-accent);}
.nhl-div-list{display: grid;gap: 0.3rem;padding: 0;margin: 0;list-style: none;font-size: 0.92rem;line-height: 1.45;color: var(--nhl-text-main);}
.sr-only{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
.nhl-fade{animation: nhl-fade 0.35s ease-out;}
@keyframes nhl-fade{from{opacity: 0;transform: translateY(6px);}to{opacity: 1;transform: none;}}
@media (max-width: 640px){.nhl-cards.is-duel{grid-template-columns: 1fr;justify-items: stretch;}.nhl-vs{margin: 0 auto;width: 2.5rem;height: 2.5rem;font-size: 0.78rem;}}
@media (max-width: 767px){.nhl-chip-sep{display: none;}}
@media (max-width: 575px){.nhl-actions{flex-direction: column;align-items: stretch;}.nhl-actions-spacer{display: none;}.nhl-btn,.nhl-btn-mini{width: 100%;}.nhl-console{flex-direction: column;align-items: stretch;gap: 1rem;}.nhl-seg{width: 100%;}.nhl-seg-btn{flex: 1 1 0;min-width: 0;}.nhl-fig-row{grid-template-columns: 6.5rem 1fr 2rem;font-size: 0.82rem;}}
@media (prefers-reduced-motion: reduce){.nhl-btn,.nhl-btn-mini,.nhl-chip,.nhl-share-btn,.nhl-seg-btn{transition: none;}.nhl-btn-primary.is-drawing .nhl-btn-icon{animation: none;}.nhl-fade{animation: none;}}