/* Hexagonic Field — light Bauhaus board-game poster */
:root {
    --hf-paper: #f4f0e6;
    --hf-paper-bright: #fffdf6;
    --hf-ink: #111111;
    --hf-muted: #666057;
    --hf-line: #b9b0a1;
    --hf-red: #d7422d;
    --hf-blue: #244db7;
    --hf-mustard: #dfad2f;
    --hf-shadow: rgba(17, 17, 17, .22);
    --hf-sans: "Arial Narrow", "Aptos Narrow", "Segoe UI", sans-serif;
    --hf-display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    --hf-max: 1480px;
    --hf-pad: clamp(20px, 4.5vw, 76px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
    margin: 0;
    color: var(--hf-ink);
    background: var(--hf-paper);
    font-family: var(--hf-sans);
    font-size: 17px;
    line-height: 1.5;
    overflow-x: clip;
}
body.hf-menu-open, body.hf-dialog-open { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
[hidden] { display: none !important; }
::selection { color: var(--hf-paper); background: var(--hf-blue); }
:focus-visible { outline: 4px solid var(--hf-blue); outline-offset: 4px; }

.hf-skip-link {
    position: fixed;
    z-index: 500;
    top: 12px;
    left: 12px;
    padding: 12px 18px;
    color: var(--hf-paper);
    background: var(--hf-ink);
    transform: translateY(-160%);
    transition: transform .2s ease;
}
.hf-skip-link:focus { transform: translateY(0); }

.hf-header {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 2px solid var(--hf-ink);
    background: rgba(244, 240, 230, .96);
    backdrop-filter: blur(10px);
}
.hf-header__inner {
    width: min(100%, var(--hf-max));
    min-height: 78px;
    margin: auto;
    padding: 0 var(--hf-pad);
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 70px);
}
.hf-brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.hf-brand__mark { width: 43px; height: 39px; fill: var(--hf-red); stroke: var(--hf-ink); stroke-width: 2; }
.hf-brand__mark circle { fill: var(--hf-paper); stroke-width: 3; }
.hf-brand > span { display: flex; flex-direction: column; font-size: 14px; font-weight: 800; line-height: 1; letter-spacing: .13em; text-transform: uppercase; }
.hf-brand > span strong { font-size: 17px; letter-spacing: -.02em; }
.hf-desktop-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(22px, 3vw, 48px); }
.hf-desktop-nav a {
    position: relative;
    padding: 27px 1px 25px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.hf-desktop-nav a::after {
    content: "";
    position: absolute;
    right: 100%;
    bottom: -2px;
    left: 0;
    height: 5px;
    background: var(--hf-red);
    transition: right .2s ease;
}
.hf-desktop-nav a:hover::after, .hf-desktop-nav a[aria-current="location"]::after { right: 0; }
.hf-header__actions { display: flex; align-items: center; gap: 14px; }
.hf-language { padding: 3px; border: 2px solid var(--hf-ink); display: flex; background: var(--hf-paper); }
.hf-language button { min-width: 35px; min-height: 30px; padding: 3px 8px; border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 900; }
.hf-language button[aria-pressed="true"] { color: var(--hf-paper); background: var(--hf-ink); }
.hf-nav-cta { min-height: 41px; padding: 8px 16px; border: 2px solid var(--hf-ink); color: var(--hf-paper); background: var(--hf-blue); cursor: pointer; font-size: 13px; font-weight: 900; box-shadow: 4px 4px 0 var(--hf-ink); transition: transform .18s ease, box-shadow .18s ease; }
.hf-nav-cta:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hf-ink); }
.hf-menu-button { width: 46px; height: 42px; padding: 9px; border: 2px solid var(--hf-ink); display: none; align-content: center; gap: 5px; background: var(--hf-mustard); cursor: pointer; }
.hf-menu-button span { width: 100%; height: 2px; display: block; background: var(--hf-ink); transition: transform .2s ease, opacity .2s ease; }
.hf-menu-button[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
.hf-menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hf-menu-button[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
.hf-mobile-menu { padding: 8px var(--hf-pad) 25px; border-top: 1px solid var(--hf-line); background: var(--hf-paper); }
.hf-mobile-menu a { padding: 13px 0; border-bottom: 1px solid var(--hf-ink); display: block; font-family: var(--hf-display); font-size: 34px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.hf-mobile-menu button { width: 100%; margin-top: 18px; padding: 14px; border: 2px solid var(--hf-ink); color: var(--hf-paper); background: var(--hf-blue); font-weight: 900; box-shadow: 5px 5px 0 var(--hf-ink); }

.hf-hero {
    position: relative;
    width: min(100%, var(--hf-max));
    min-height: calc(100svh - 78px);
    margin: auto;
    padding: clamp(54px, 7vw, 110px) var(--hf-pad) clamp(60px, 7vw, 100px);
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr);
    align-items: center;
    gap: clamp(50px, 7vw, 120px);
}
.hf-hero__copy { min-width: 0; }
.hf-hero::before {
    content: "";
    position: absolute;
    top: 7%;
    left: -9%;
    width: 21vw;
    height: 21vw;
    max-width: 300px;
    max-height: 300px;
    border-radius: 50%;
    background: var(--hf-mustard);
    opacity: .18;
    pointer-events: none;
}
.hf-overline, .hf-section-index, .hf-kicker {
    margin: 0;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.hf-overline { display: flex; align-items: center; gap: 15px; }
.hf-overline > span:first-child { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--hf-paper); background: var(--hf-red); letter-spacing: 0; }
.hf-hero h1 {
    max-width: 700px;
    margin: 28px 0 25px;
    font-family: var(--hf-display);
    font-size: clamp(70px, 8.4vw, 136px);
    font-weight: 900;
    line-height: .79;
    letter-spacing: -.045em;
    text-transform: uppercase;
}
.hf-hero h1 span, .hf-hero h1 em { display: block; }
.hf-hero h1 em { color: var(--hf-red); font-style: normal; }
.hf-hero__lead { max-width: 625px; margin: 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; }
.hf-hero__actions { margin-top: 34px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hf-button {
    min-height: 54px;
    padding: 13px 21px;
    border: 2px solid var(--hf-ink);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 42px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .035em;
    box-shadow: 6px 6px 0 var(--hf-ink);
    transition: transform .18s ease, box-shadow .18s ease;
}
.hf-button:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--hf-ink); }
.hf-button:disabled { cursor: wait; opacity: .62; transform: none; box-shadow: 6px 6px 0 var(--hf-ink); }
.hf-button--black { color: var(--hf-paper); background: var(--hf-ink); }
.hf-button--mustard { background: var(--hf-mustard); }
.hf-button--paper { background: var(--hf-paper); }
.hf-text-link { padding: 8px 0; border: 0; border-bottom: 2px solid var(--hf-ink); display: inline-flex; gap: 18px; background: none; cursor: pointer; font-size: 14px; font-weight: 900; }
.hf-text-link span:last-child { color: var(--hf-blue); }
.hf-match-facts { max-width: 580px; margin: clamp(46px, 6vw, 84px) 0 0; padding-top: 18px; border-top: 2px solid var(--hf-ink); display: grid; grid-template-columns: repeat(3, 1fr); }
.hf-match-facts div { display: flex; flex-direction: column-reverse; gap: 2px; }
.hf-match-facts dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hf-match-facts dd { margin: 0; font-family: var(--hf-display); font-size: clamp(28px, 3vw, 44px); line-height: 1; }

.hf-hero-board {
    position: relative;
    min-height: clamp(570px, 48vw, 720px);
    border: 3px solid var(--hf-ink);
    overflow: hidden;
    background: var(--hf-blue);
    box-shadow: 18px 18px 0 var(--hf-red);
    isolation: isolate;
}
.hf-hero-board::before { content: ""; position: absolute; inset: 5% 7% 9%; border: 2px solid var(--hf-paper); opacity: .55; }
.hf-hero-board__sun { position: absolute; z-index: -1; top: -13%; right: -10%; width: 57%; aspect-ratio: 1; border-radius: 50%; background: var(--hf-mustard); }
.hf-poster-word { position: absolute; z-index: -1; right: -3%; bottom: 0; color: rgba(244, 240, 230, .12); font-family: var(--hf-display); font-size: clamp(170px, 20vw, 330px); line-height: .7; letter-spacing: -.07em; }
.hf-hero-hexes { position: absolute; top: 9%; right: 13%; bottom: 16%; left: 12%; transform: rotate(-8deg); }
.hf-hero-hexes i {
    position: absolute;
    width: 29%;
    aspect-ratio: .87;
    clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
    background: var(--hf-paper);
    filter: drop-shadow(8px 10px 0 rgba(17, 17, 17, .28));
}
.hf-hero-hexes i:nth-child(1) { top: 5%; left: 20%; }
.hf-hero-hexes i:nth-child(2) { top: 5%; left: 49%; background: #e9e2d2; }
.hf-hero-hexes i:nth-child(3) { top: 29%; left: 5%; background: #e9e2d2; }
.hf-hero-hexes i:nth-child(4) { top: 29%; left: 34%; }
.hf-hero-hexes i:nth-child(5) { top: 29%; left: 63%; background: #e9e2d2; }
.hf-hero-hexes i:nth-child(6) { top: 53%; left: 20%; }
.hf-hero-hexes i:nth-child(7) { top: 53%; left: 49%; background: #e9e2d2; }
.hf-token { position: absolute; z-index: 3; width: clamp(72px, 8vw, 120px); aspect-ratio: 1; border: 3px solid var(--hf-ink); display: grid; place-items: center; box-shadow: 9px 12px 0 rgba(17,17,17,.32); }
.hf-token span { display: block; }
.hf-token--arc { top: 21%; left: 18%; border-radius: 50%; background: var(--hf-red); transform: rotate(-8deg); }
.hf-token--arc span { width: 45%; height: 45%; border: 10px solid var(--hf-paper); border-left-color: transparent; border-radius: 50%; transform: rotate(-40deg); }
.hf-token--knot { right: 13%; bottom: 23%; border-radius: 50%; background: var(--hf-blue); transform: rotate(-8deg); }
.hf-token--knot span { width: 49%; aspect-ratio: 1; border: 9px solid var(--hf-paper); transform: rotate(45deg); }
.hf-token--swell { bottom: 14%; left: 24%; background: var(--hf-mustard); transform: rotate(22deg); }
.hf-token--swell span { width: 54%; aspect-ratio: 1; border-radius: 50%; background: var(--hf-ink); }
.hf-move-line { position: absolute; z-index: 2; inset: 10% 8% 17% 10%; width: 82%; height: 73%; }
.hf-move-line path { fill: none; stroke: var(--hf-ink); stroke-width: 4; stroke-dasharray: 10 10; }
.hf-board-caption { position: absolute; right: 7%; bottom: 4%; left: 7%; margin: 0; display: flex; justify-content: space-between; color: var(--hf-paper); font-size: 12px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }

.hf-ribbon { border-block: 2px solid var(--hf-ink); display: grid; grid-template-columns: repeat(3, 1fr); color: var(--hf-paper); background: var(--hf-ink); }
.hf-ribbon p { margin: 0; padding: 17px var(--hf-pad); border-right: 1px solid var(--hf-paper); display: flex; justify-content: center; gap: 15px; font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.hf-ribbon p:last-child { border-right: 0; }
.hf-ribbon p:first-child span:first-child { color: var(--hf-red); }
.hf-ribbon p:nth-child(2) span:first-child { color: var(--hf-blue); }
.hf-ribbon p:last-child span:first-child { color: var(--hf-mustard); }

.hf-section { padding: clamp(90px, 11vw, 170px) max(var(--hf-pad), calc((100vw - var(--hf-max)) / 2 + var(--hf-pad))); }
.hf-section-heading { margin-bottom: clamp(52px, 7vw, 100px); display: grid; grid-template-columns: minmax(115px, .42fr) minmax(420px, 1.28fr) minmax(270px, .72fr); gap: clamp(30px, 5vw, 82px); align-items: start; }
.hf-section-index { padding-top: 11px; color: var(--hf-red); }
.hf-kicker { margin-bottom: 18px; color: var(--hf-blue); }
.hf-section-heading h2, .hf-daily-copy h2, .hf-faq-heading h2 {
    margin: 0;
    font-family: var(--hf-display);
    font-size: clamp(50px, 6vw, 92px);
    font-weight: 900;
    line-height: .88;
    letter-spacing: -.025em;
    text-transform: uppercase;
}
.hf-section-heading > p:last-child { margin: 12px 0 0; color: var(--hf-muted); font-size: clamp(16px, 1.35vw, 20px); }

.hf-field-section { background: var(--hf-paper-bright); }
.hf-field-layout { display: grid; grid-template-columns: minmax(550px, 1.35fr) minmax(320px, .65fr); align-items: stretch; gap: clamp(40px, 7vw, 110px); }
.hf-field-board-wrap { min-width: 0; padding: clamp(24px, 3vw, 44px); border: 3px solid var(--hf-ink); background: var(--hf-paper); box-shadow: 14px 14px 0 var(--hf-blue); }
.hf-field-board { position: relative; min-height: clamp(500px, 49vw, 700px); }
.hf-cell {
    position: absolute;
    top: var(--top);
    left: var(--left);
    width: clamp(72px, 9.2vw, 128px);
    aspect-ratio: .87;
    padding: 0;
    border: 0;
    clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
    display: grid;
    place-items: center;
    background: #e8e1d4;
    filter: drop-shadow(5px 7px 0 var(--hf-shadow));
    transform: translateX(-50%);
    cursor: pointer;
    transition: filter .18s ease, background .18s ease;
}
.hf-cell::before { content: ""; position: absolute; inset: 5px; clip-path: inherit; background: var(--hf-paper-bright); }
.hf-cell::after { content: ""; position: absolute; z-index: 1; width: 12px; aspect-ratio: 1; border-radius: 50%; background: var(--hf-line); }
.hf-cell--red::before { background: #f5ded7; }
.hf-cell--blue::before { background: #dce3f6; }
.hf-cell--mustard::before { background: #f7e9bd; }
.hf-cell[data-resonance="true"]::after { width: 20%; border: 4px solid var(--hf-ink); background: transparent; }
.hf-cell.is-available { filter: drop-shadow(5px 7px 0 var(--hf-red)); }
.hf-cell.is-available::before { background: #fff6d9; }
.hf-cell:hover { filter: drop-shadow(3px 4px 0 var(--hf-blue)); }
.hf-cell.is-claimed::after { border-color: var(--hf-red); background: var(--hf-red); }
.hf-piece { position: relative; z-index: 3; width: 56%; aspect-ratio: 1; border: 3px solid var(--hf-ink); display: grid; place-items: center; box-shadow: 5px 6px 0 rgba(17,17,17,.24); }
.hf-piece::after { content: ""; display: block; }
.hf-piece--arc { border-radius: 50%; background: var(--hf-red); }
.hf-piece--arc::after { width: 48%; height: 48%; border: 5px solid var(--hf-paper); border-left-color: transparent; border-radius: 50%; transform: rotate(-38deg); }
.hf-piece--knot { border-radius: 50%; background: var(--hf-blue); }
.hf-piece--knot::after { width: 48%; aspect-ratio: 1; border: 5px solid var(--hf-paper); transform: rotate(45deg); }
.hf-piece--swell { background: var(--hf-mustard); transform: rotate(18deg); }
.hf-piece--swell::after { width: 48%; aspect-ratio: 1; border-radius: 50%; background: var(--hf-ink); }
.hf-field-board__label { padding-top: 16px; border-top: 2px solid var(--hf-ink); display: flex; justify-content: space-between; gap: 20px; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.hf-field-panel { position: relative; padding: clamp(32px, 4vw, 58px); border: 3px solid var(--hf-ink); align-self: center; background: var(--hf-mustard); box-shadow: 12px 12px 0 var(--hf-red); }
.hf-panel-number { position: absolute; top: 20px; right: 22px; margin: 0; font-family: var(--hf-display); font-size: 28px; }
.hf-field-panel .hf-kicker { color: var(--hf-ink); }
.hf-field-panel h3 { max-width: 390px; margin: 0 0 20px; font-family: var(--hf-display); font-size: clamp(38px, 4vw, 60px); line-height: .92; text-transform: uppercase; }
.hf-field-panel > p:not(.hf-kicker, .hf-panel-number) { margin-bottom: 30px; }
.hf-field-status { margin: 30px 0 0; padding: 20px 0; border-block: 2px solid var(--hf-ink); }
.hf-field-status > span { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.hf-field-status strong { float: right; font-size: 13px; }
.hf-field-status p { clear: both; margin: 13px 0 0; min-height: 50px; font-weight: 800; }
.hf-resonance-score { padding: 22px 0; display: grid; grid-template-columns: 1fr auto; gap: 11px 18px; align-items: center; }
.hf-resonance-score > span { font-size: 13px; font-weight: 900; text-transform: uppercase; }
.hf-resonance-score > div { grid-column: 1; display: flex; gap: 8px; }
.hf-resonance-score i { width: 17px; aspect-ratio: 1; border: 2px solid var(--hf-ink); border-radius: 50%; display: block; background: transparent; }
.hf-resonance-score i.is-on { background: var(--hf-red); }
.hf-resonance-score strong { grid-row: 1 / 3; grid-column: 2; font-family: var(--hf-display); font-size: 36px; }
.hf-reset-button { width: 100%; padding: 12px 0; border: 0; border-top: 2px solid var(--hf-ink); display: flex; justify-content: space-between; background: transparent; cursor: pointer; font-size: 13px; font-weight: 900; text-transform: uppercase; }

.hf-rules-section { display: grid; grid-template-columns: minmax(270px, .62fr) minmax(0, 1.38fr); gap: clamp(50px, 9vw, 150px); background: var(--hf-red); }
.hf-rules-poster { position: sticky; top: 120px; min-height: 570px; padding: 35px; border: 3px solid var(--hf-ink); align-self: start; overflow: hidden; color: var(--hf-paper); background: var(--hf-blue); box-shadow: 15px 15px 0 var(--hf-ink); }
.hf-rules-poster__circle { position: absolute; top: 8%; left: -25%; width: 110%; aspect-ratio: 1; border-radius: 50%; background: var(--hf-mustard); }
.hf-rules-poster p { position: relative; margin: 0; font-family: var(--hf-display); font-size: clamp(220px, 26vw, 410px); line-height: .85; text-align: center; }
.hf-rules-poster > span:last-child { position: absolute; right: 28px; bottom: 25px; left: 28px; padding-top: 15px; border-top: 2px solid currentColor; font-size: 15px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.hf-section-heading--compact { grid-template-columns: minmax(100px, .35fr) minmax(0, 1fr); }
.hf-section-heading--compact h2 { font-size: clamp(48px, 5.5vw, 82px); }
.hf-rules-content .hf-section-index, .hf-rules-content .hf-kicker { color: var(--hf-paper); }
.hf-rule { padding: 30px 0; border-top: 3px solid var(--hf-ink); display: grid; grid-template-columns: 140px 1fr; gap: 30px; align-items: center; }
.hf-rule:last-child { border-bottom: 3px solid var(--hf-ink); }
.hf-rule__shape { width: 105px; aspect-ratio: 1; display: block; background: var(--hf-paper); box-shadow: 8px 8px 0 var(--hf-ink); }
.hf-rule__shape--place { clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.hf-rule__shape--turn { border-radius: 50%; border: 20px solid var(--hf-mustard); background: var(--hf-blue); }
.hf-rule__shape--tune { border-radius: 50%; outline: 12px solid var(--hf-mustard); outline-offset: -28px; }
.hf-rule small { font-weight: 900; }
.hf-rule h3 { margin: 2px 0 8px; font-family: var(--hf-display); font-size: 40px; line-height: 1; text-transform: uppercase; }
.hf-rule p { max-width: 650px; margin: 0; }

.hf-factions-section { background: var(--hf-paper); }
.hf-faction-cards { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
.hf-faction { min-height: 590px; padding: clamp(25px, 3vw, 44px); border: 3px solid var(--hf-ink); display: flex; flex-direction: column; }
.hf-faction + .hf-faction { border-left: 0; }
.hf-faction:nth-child(2) { margin-top: 55px; }
.hf-faction header, .hf-faction footer { display: flex; justify-content: space-between; gap: 18px; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.hf-faction__piece { width: clamp(120px, 13vw, 190px); aspect-ratio: 1; margin: clamp(48px, 6vw, 80px) auto 40px; border: 4px solid var(--hf-ink); display: grid; place-items: center; box-shadow: 11px 13px 0 rgba(17,17,17,.28); }
.hf-faction__piece span { display: block; }
.hf-faction h3 { margin: auto 0 12px; font-family: var(--hf-display); font-size: clamp(42px, 4.5vw, 66px); line-height: .9; text-transform: uppercase; }
.hf-faction p { min-height: 82px; margin: 0 0 27px; }
.hf-faction footer { padding-top: 17px; border-top: 2px solid currentColor; }
.hf-faction footer strong { font-size: 16px; letter-spacing: .02em; }
.hf-faction--arc { color: var(--hf-paper); background: var(--hf-red); }
.hf-faction--arc .hf-faction__piece { border-radius: 50%; background: var(--hf-red); }
.hf-faction--arc .hf-faction__piece span { width: 47%; height: 47%; border: 14px solid var(--hf-paper); border-left-color: transparent; border-radius: 50%; transform: rotate(-35deg); }
.hf-faction--knot { color: var(--hf-paper); background: var(--hf-blue); }
.hf-faction--knot .hf-faction__piece { border-radius: 50%; background: var(--hf-blue); }
.hf-faction--knot .hf-faction__piece span { width: 50%; aspect-ratio: 1; border: 13px solid var(--hf-paper); transform: rotate(45deg); }
.hf-faction--swell { background: var(--hf-mustard); }
.hf-faction--swell .hf-faction__piece { background: var(--hf-mustard); transform: rotate(16deg); }
.hf-faction--swell .hf-faction__piece span { width: 51%; aspect-ratio: 1; border-radius: 50%; background: var(--hf-ink); }

.hf-daily-section { border-block: 3px solid var(--hf-ink); display: grid; grid-template-columns: minmax(460px, 1fr) minmax(380px, .85fr); gap: clamp(55px, 9vw, 150px); align-items: center; background: var(--hf-paper-bright); }
.hf-daily-card { position: relative; min-height: 650px; border: 3px solid var(--hf-ink); overflow: hidden; background: var(--hf-mustard); box-shadow: 16px 16px 0 var(--hf-blue); }
.hf-daily-date { position: absolute; z-index: 2; top: 30px; left: 32px; display: grid; }
.hf-daily-date span { font-family: var(--hf-display); font-size: 126px; line-height: .72; }
.hf-daily-date strong { margin-top: 11px; font-size: 23px; letter-spacing: .27em; }
.hf-daily-date small { margin-top: 6px; font-weight: 900; }
.hf-daily-puzzle { position: absolute; right: -9%; bottom: -3%; width: 78%; aspect-ratio: 1; }
.hf-daily-puzzle i { position: absolute; width: 31%; aspect-ratio: .87; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background: var(--hf-paper); filter: drop-shadow(7px 8px 0 rgba(17,17,17,.25)); }
.hf-daily-puzzle i:nth-child(1) { top: 5%; left: 33%; }
.hf-daily-puzzle i:nth-child(2) { top: 27%; left: 17%; }
.hf-daily-puzzle i:nth-child(3) { top: 27%; left: 49%; }
.hf-daily-puzzle i:nth-child(4) { top: 49%; left: 1%; }
.hf-daily-puzzle i:nth-child(5) { top: 49%; left: 33%; }
.hf-daily-puzzle i:nth-child(6) { top: 49%; left: 65%; }
.hf-daily-puzzle i:nth-child(7) { top: 71%; left: 17%; }
.hf-mini-piece { position: absolute; z-index: 3; width: 18%; aspect-ratio: 1; border: 3px solid var(--hf-ink); box-shadow: 5px 6px 0 var(--hf-shadow); }
.hf-mini-piece--one { top: 35%; left: 23%; border-radius: 50%; background: var(--hf-blue); }
.hf-mini-piece--two { top: 57%; left: 55%; border-radius: 50%; background: var(--hf-red); }
.hf-daily-stamp { position: absolute; top: 33px; right: 31px; margin: 0; padding: 7px 11px; border: 2px solid var(--hf-ink); font-size: 12px; font-weight: 900; transform: rotate(4deg); }
.hf-daily-copy .hf-section-index { margin-bottom: 60px; }
.hf-daily-copy h2 { margin-bottom: 28px; }
.hf-daily-lead { max-width: 620px; font-size: clamp(18px, 1.5vw, 22px); }
.hf-daily-facts { margin: 36px 0; border-block: 2px solid var(--hf-ink); }
.hf-daily-facts div { padding: 13px 0; border-bottom: 1px solid var(--hf-line); display: flex; justify-content: space-between; gap: 30px; }
.hf-daily-facts div:last-child { border-bottom: 0; }
.hf-daily-facts dt { font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.hf-daily-facts dd { margin: 0; font-weight: 800; }

.hf-play-section { position: relative; min-height: 680px; display: grid; grid-template-columns: .45fr 1.1fr .7fr; gap: clamp(45px, 7vw, 110px); align-items: center; overflow: hidden; color: var(--hf-paper); background: var(--hf-blue); }
.hf-play-section::before { content: ""; position: absolute; right: -9vw; bottom: -16vw; width: 42vw; aspect-ratio: 1; border-radius: 50%; background: var(--hf-red); }
.hf-play-mark { position: relative; width: min(100%, 230px); aspect-ratio: .87; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); display: grid; place-items: center; background: var(--hf-mustard); filter: drop-shadow(14px 16px 0 var(--hf-ink)); }
.hf-play-mark span { width: 52%; aspect-ratio: 1; border-radius: 50%; border: 15px solid var(--hf-ink); }
.hf-play-mark i { position: absolute; width: 15%; height: 2px; background: var(--hf-ink); }
.hf-play-copy { position: relative; }
.hf-play-copy .hf-section-index { margin-bottom: 28px; color: var(--hf-mustard); }
.hf-play-copy h2 { margin: 0; font-family: var(--hf-display); font-size: clamp(60px, 7vw, 108px); line-height: .84; letter-spacing: -.025em; text-transform: uppercase; }
.hf-play-copy h2 em { color: var(--hf-mustard); font-style: normal; }
.hf-play-copy > p:not(.hf-section-index) { max-width: 700px; margin: 28px 0 35px; font-size: clamp(18px, 1.4vw, 21px); }
.hf-play-list { position: relative; z-index: 2; margin: 0; padding: 0; list-style: none; }
.hf-play-list li { padding: 18px 0; border-top: 2px solid var(--hf-paper); display: flex; gap: 25px; }
.hf-play-list li:last-child { border-bottom: 2px solid var(--hf-paper); }
.hf-play-list span { color: var(--hf-mustard); font-size: 12px; font-weight: 900; }

.hf-faq-section { display: grid; grid-template-columns: minmax(330px, .7fr) minmax(500px, 1.3fr); gap: clamp(55px, 10vw, 160px); background: var(--hf-paper); }
.hf-faq-heading .hf-section-index { margin-bottom: 55px; }
.hf-faq-heading h2 { font-size: clamp(52px, 5.5vw, 84px); }
.hf-faq-heading > p:last-child { max-width: 470px; color: var(--hf-muted); font-size: 19px; }
.hf-faq-list { border-top: 3px solid var(--hf-ink); }
.hf-faq-list article { border-bottom: 3px solid var(--hf-ink); }
.hf-faq-list h3 { margin: 0; }
.hf-faq-list button { width: 100%; padding: 26px 2px; border: 0; display: flex; justify-content: space-between; gap: 28px; text-align: left; background: transparent; cursor: pointer; font-size: clamp(19px, 1.7vw, 25px); font-weight: 900; }
.hf-faq-list button i { position: relative; width: 22px; height: 22px; flex: 0 0 auto; }
.hf-faq-list button i::before, .hf-faq-list button i::after { content: ""; position: absolute; top: 10px; left: 0; width: 22px; height: 3px; background: var(--hf-red); transition: transform .2s ease; }
.hf-faq-list button i::after { transform: rotate(90deg); }
.hf-faq-list button[aria-expanded="true"] i::after { transform: rotate(0); }
.hf-faq-list article > div { padding: 0 50px 25px 0; }
.hf-faq-list p { max-width: 750px; margin: 0; color: var(--hf-muted); font-size: 17px; }

.hf-footer { padding: 70px var(--hf-pad) 25px; border-top: 3px solid var(--hf-ink); background: var(--hf-mustard); }
.hf-footer__brand { width: min(100%, var(--hf-max)); margin: auto; display: flex; align-items: center; gap: 20px; }
.hf-footer__brand .hf-brand__mark { width: 65px; height: 58px; }
.hf-footer__brand p { margin: 0; display: grid; }
.hf-footer__brand strong { font-family: var(--hf-display); font-size: clamp(36px, 4vw, 58px); line-height: 1; text-transform: uppercase; }
.hf-footer__brand span { margin-top: 5px; }
.hf-footer nav { width: min(100%, var(--hf-max)); margin: 60px auto; padding-block: 20px; border-block: 2px solid var(--hf-ink); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hf-footer nav a { font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hf-footer__base { width: min(100%, var(--hf-max)); margin: auto; display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; font-size: 12px; font-weight: 800; }
.hf-footer__base span:last-child { text-align: right; }
.hf-footer__base a { border-bottom: 1px solid var(--hf-ink); }

.hf-dialog { width: min(920px, calc(100% - 34px)); max-height: calc(100dvh - 34px); padding: 0; border: 3px solid var(--hf-ink); color: var(--hf-ink); background: var(--hf-paper); box-shadow: 18px 18px 0 var(--hf-red); overflow: auto; }
.hf-dialog::backdrop { background: rgba(17, 17, 17, .74); backdrop-filter: blur(3px); }
.hf-dialog__layout { display: grid; grid-template-columns: .72fr 1.28fr; }
.hf-dialog__poster { position: relative; min-height: 640px; padding: 30px; overflow: hidden; color: var(--hf-paper); background: var(--hf-blue); }
.hf-dialog__poster::before { content: ""; position: absolute; right: -48%; bottom: 10%; width: 135%; aspect-ratio: 1; border-radius: 50%; background: var(--hf-mustard); }
.hf-dialog__poster p { position: relative; z-index: 2; margin: 0; font-family: var(--hf-display); font-size: 93px; line-height: .72; letter-spacing: -.05em; }
.hf-dialog__poster div { position: absolute; z-index: 2; right: 28px; bottom: 80px; display: flex; gap: 7px; }
.hf-dialog__poster i { width: 35px; aspect-ratio: .87; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background: var(--hf-red); }
.hf-dialog__poster > span { position: absolute; z-index: 2; bottom: 25px; left: 28px; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.hf-dialog__content { position: relative; padding: clamp(35px, 5vw, 68px); }
.hf-dialog__close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border: 2px solid var(--hf-ink); display: grid; place-items: center; background: var(--hf-mustard); cursor: pointer; font-size: 30px; line-height: 1; }
.hf-dialog__content h2 { max-width: 500px; margin: 16px 0 15px; font-family: var(--hf-display); font-size: clamp(44px, 5vw, 68px); line-height: .88; text-transform: uppercase; }
.hf-dialog__content > p:not(.hf-kicker) { max-width: 530px; margin: 0 0 30px; color: var(--hf-muted); }
.hf-field-group { margin-bottom: 20px; }
.hf-field-group label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hf-field-group input { width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--hf-ink); border-radius: 0; color: var(--hf-ink); background: var(--hf-paper-bright); }
.hf-field-group input[aria-invalid="true"] { border-color: var(--hf-red); background: #fff2ee; }
.hf-input-error { min-height: 20px; margin-top: 5px; display: block; color: #a42718; font-size: 13px; font-weight: 800; }
.hf-submit { width: 100%; }
.hf-form-status { min-height: 26px; margin: 20px 0 0; padding: 0; font-weight: 900; }
.hf-form-status.is-success { padding: 13px; border: 2px solid var(--hf-ink); background: var(--hf-mustard); }
.hf-form-status.is-error { color: #a42718; }
.hf-privacy-note { margin: 15px 0 0; color: var(--hf-muted); font-size: 12px; line-height: 1.45; }

.hf-js .hf-reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.75,.25,1); }
.hf-js .hf-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1160px) {
    .hf-desktop-nav { display: none; }
    .hf-header__actions { margin-left: auto; }
    .hf-menu-button { display: grid; }
    .hf-hero { grid-template-columns: 1fr 1fr; }
    .hf-hero-board { min-height: 560px; }
    .hf-section-heading { grid-template-columns: 110px 1fr; }
    .hf-section-heading > p:last-child { grid-column: 2; max-width: 680px; margin-top: -20px; }
    .hf-field-layout { grid-template-columns: 1fr; }
    .hf-field-panel { width: min(100%, 620px); justify-self: center; }
    .hf-rules-section { grid-template-columns: .55fr 1.45fr; gap: 60px; }
    .hf-faction { min-height: 560px; }
    .hf-daily-section { grid-template-columns: 1fr 1fr; gap: 65px; }
    .hf-play-section { grid-template-columns: 180px 1fr; }
    .hf-play-list { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .hf-play-list li { border-bottom: 2px solid var(--hf-paper); }
}

@media (max-width: 820px) {
    :root { --hf-pad: 22px; }
    html { scroll-padding-top: 72px; }
    .hf-header__inner { min-height: 70px; }
    .hf-brand > span { display: none; }
    .hf-nav-cta { display: none; }
    .hf-hero { min-height: auto; padding-top: 54px; grid-template-columns: 1fr; }
    .hf-hero::before { width: 220px; height: 220px; }
    .hf-hero h1 { max-width: 640px; }
    .hf-hero-board { width: calc(100% - 16px); min-height: min(720px, 112vw); }
    .hf-ribbon { grid-template-columns: 1fr; }
    .hf-ribbon p { border-right: 0; border-bottom: 1px solid var(--hf-paper); }
    .hf-ribbon p:last-child { border-bottom: 0; }
    .hf-section-heading, .hf-section-heading--compact { grid-template-columns: 1fr; gap: 22px; }
    .hf-section-heading > p:last-child { grid-column: auto; margin-top: 0; }
    .hf-section-index { padding-top: 0; }
    .hf-field-board-wrap { padding: 17px; }
    .hf-field-board { min-height: min(690px, 100vw); }
    .hf-rules-section { grid-template-columns: 1fr; }
    .hf-rules-poster { position: relative; top: 0; min-height: 440px; }
    .hf-rules-poster p { font-size: 300px; }
    .hf-faction-cards { grid-template-columns: 1fr; gap: 22px; }
    .hf-faction + .hf-faction { border-left: 3px solid var(--hf-ink); }
    .hf-faction:nth-child(2) { margin-top: 0; }
    .hf-faction { min-height: 520px; }
    .hf-daily-section { grid-template-columns: 1fr; }
    .hf-daily-card { min-height: 600px; }
    .hf-play-section { grid-template-columns: 1fr; }
    .hf-play-mark { width: 160px; }
    .hf-play-list { grid-column: auto; grid-template-columns: 1fr; }
    .hf-faq-section { grid-template-columns: 1fr; }
    .hf-footer__base { grid-template-columns: 1fr; }
    .hf-footer__base span:last-child { text-align: left; }
    .hf-dialog__layout { grid-template-columns: 1fr; }
    .hf-dialog__poster { min-height: 180px; }
    .hf-dialog__poster p { font-size: 58px; }
    .hf-dialog__poster::before { width: 70%; right: -15%; bottom: -95%; }
    .hf-dialog__poster div { right: 22px; bottom: 30px; }
}

@media (max-width: 520px) {
    body { font-size: 16px; }
    .hf-language button { min-width: 32px; padding-inline: 6px; }
    .hf-header__inner { gap: 12px; }
    .hf-brand__mark { width: 38px; height: 35px; }
    .hf-header__actions { gap: 7px; }
    .hf-language button { min-width: 28px; padding-inline: 4px; }
    .hf-menu-button { width: 40px; }
    .hf-hero h1 { font-size: clamp(55px, 15.8vw, 72px); overflow-wrap: anywhere; }
    .hf-match-facts { gap: 12px; }
    .hf-match-facts dt { min-height: 36px; }
    .hf-hero-board { min-height: 430px; box-shadow: 10px 10px 0 var(--hf-red); }
    .hf-token { width: 70px; }
    .hf-board-caption { font-size: 9px; }
    .hf-section { padding-block: 78px; }
    .hf-section-heading h2, .hf-daily-copy h2, .hf-faq-heading h2 { font-size: clamp(44px, 15vw, 64px); }
    .hf-field-board-wrap { margin-right: 8px; box-shadow: 8px 8px 0 var(--hf-blue); }
    .hf-field-board { min-height: 390px; }
    .hf-cell { width: clamp(57px, 19vw, 82px); }
    .hf-field-board__label { font-size: 9px; }
    .hf-field-panel { margin-right: 8px; padding: 30px 24px; box-shadow: 8px 8px 0 var(--hf-red); }
    .hf-rules-poster { min-height: 360px; }
    .hf-rules-poster p { font-size: 240px; }
    .hf-rule { grid-template-columns: 88px 1fr; gap: 20px; }
    .hf-rule__shape { width: 72px; }
    .hf-rule__shape--turn { border-width: 14px; }
    .hf-rule h3 { font-size: 33px; }
    .hf-faction { min-height: 500px; }
    .hf-faction__piece { width: 145px; }
    .hf-daily-card { min-height: 450px; margin-right: 8px; box-shadow: 9px 9px 0 var(--hf-blue); }
    .hf-daily-date span { font-size: 87px; }
    .hf-daily-stamp { top: 22px; right: 18px; }
    .hf-daily-puzzle { width: 92%; }
    .hf-play-section::before { width: 95vw; right: -40vw; bottom: -35vw; }
    .hf-play-copy h2 { font-size: clamp(55px, 17vw, 78px); }
    .hf-footer nav { display: grid; grid-template-columns: 1fr 1fr; }
    .hf-footer__brand { align-items: flex-start; }
    .hf-footer__brand .hf-brand__mark { width: 48px; height: 44px; flex: 0 0 auto; }
    .hf-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); box-shadow: 8px 8px 0 var(--hf-red); }
    .hf-dialog__poster { min-height: 135px; padding: 20px; }
    .hf-dialog__poster p { font-size: 45px; }
    .hf-dialog__poster > span { display: none; }
    .hf-dialog__poster div { bottom: 20px; }
    .hf-dialog__poster i { width: 27px; }
    .hf-dialog__content { padding: 34px 23px; }
    .hf-dialog__close { top: 12px; right: 12px; }
    .hf-dialog__content .hf-kicker { padding-right: 45px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .hf-js .hf-reveal { opacity: 1; transform: none; }
}