/* home.css. The home page (index.html). Everything is under the .hm names, so nothing else on the site is touched.
   Colors come from tokens.css, so all five themes and every board style work here without extra rules.
   Loaded after the shared stylesheets. The 3D hero (assets/hero3d.js) draws into .hm-hero-stage. */

.hm { display: block; }
.hm-wrap { width: min(100% - 2 * var(--space-4), 1240px); margin-inline: auto; }
.hm-sec { padding-block: 112px 24px; }
@media (max-width: 760px) { .hm-sec { padding-block: 72px 16px; } }

/* ── Hero ───────────────────────────────────────────────────────────────────── */
/* Phones and tablets: the text, then the board below it. Wide screens: the text on the left, the board on the right. */
.hm-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-2);
    padding: clamp(28px, 6vh, 64px) var(--space-4) var(--space-4);
    overflow: hidden;
    text-align: center;
}
.hm-hero-visual {
    position: relative;
    width: min(100%, 640px);
    height: clamp(300px, 46vh, 520px);
}
.hm-hero-stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    perspective: 1100px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%);
}
.hm-hero-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: min(72%, 44vh);
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    transform: rotateX(58deg) rotateZ(-18deg);
    box-shadow: 0 60px 80px rgba(0, 0, 0, .5);
    animation: hm-spin 40s linear infinite;
}
@keyframes hm-spin { to { transform: rotateX(58deg) rotateZ(342deg); } }
.hm-hero-board span { position: relative; }
.hm-hero-board .l { background: var(--sq-light); }
.hm-hero-board .d { background: var(--sq-dark); }
.hm-hero-board img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 1000px) {
    .hm-hero {
        box-sizing: border-box;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        align-items: center;
        justify-items: stretch;
        gap: var(--space-6);
        width: min(100%, 1320px);
        min-height: min(100svh - var(--header-height), 820px);
        margin-inline: auto;
        padding-block: var(--space-5);
        text-align: left;
    }
    .hm-hero .hm-hero-copy { justify-items: start; margin-top: -5vh; }
    .hm-hero .hm-ctas, .hm-hero .hm-trust { justify-content: flex-start; }
    .hm-hero h1 { font-size: clamp(4rem, 7.4vw, 7.4rem); }
    .hm-hero-visual { width: 100%; height: min(100svh - var(--header-height) - 48px, 720px); }
}

.hm-hero-copy { display: grid; justify-items: center; max-width: 880px; }
.hm-eyebrow, .hm-kicker {
    color: var(--accent-text);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.hm-hero h1 {
    margin: .18em 0 .16em;
    font-size: clamp(3.4rem, 11vw, 8.6rem);
    line-height: .92;
    letter-spacing: -.045em;
    background: linear-gradient(100deg, var(--text) 20%, var(--accent-text) 50%, var(--action) 62%, var(--text) 80%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hm-sheen 9s ease-in-out infinite;
}
[data-theme="light"] .hm-hero h1 { background-image: linear-gradient(100deg, var(--text) 25%, var(--accent) 55%, var(--text) 85%); }
@keyframes hm-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.hm-sub { max-width: 44ch; margin: 0 0 var(--space-5); color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.25rem); line-height: 1.5; }
.hm-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.hm-cta { min-height: 52px; padding-inline: 28px; font-size: 1.02rem; }
.hm-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin: var(--space-5) 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .86rem; }
.hm-trust li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--good); vertical-align: middle; }

/* ── Section heads ──────────────────────────────────────────────────────────── */
.hm-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 44px; }
.hm-h2 { margin: 0; font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.hm-h2-small { font-size: 1.6rem; }
.hm-h3 { margin: 0 0 var(--space-2); font-size: 1.15rem; }
.hm-lede, .hm-body { margin: 0; color: var(--muted); font-size: 1.06rem; line-height: 1.65; max-width: 62ch; }
.hm-body + .hm-body { margin-top: var(--space-4); }
.hm-note { color: var(--muted); font-size: .82rem; }

/* Reveal on scroll. Without scripts, or with reduced motion, everything is simply there. */
/* The sections slide in as they come into view. They are never dimmed, so text that has not slid in yet keeps its full contrast. */
.sg-js .hm-reveal:not(.in) { opacity: 1; transform: translateY(28px); }
.hm-reveal { transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }

/* ── Game cards ─────────────────────────────────────────────────────────────── */
/* All six games are visible on a computer, and become one row you swipe on a phone (below). */
.hm-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1000px) { .hm-games { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .hm-games { grid-template-columns: minmax(0, 1fr); } }
.hm-card {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: linear-gradient(160deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line);
    border-radius: 24px;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
.hm-card:hover { border-color: color-mix(in srgb, var(--ga, var(--accent)) 60%, transparent); box-shadow: var(--shadow); transform: translateY(-3px); }
.hm-vis {
    position: relative;
    display: grid;
    place-items: center;
    height: 190px;
    overflow: hidden;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 115%, color-mix(in srgb, var(--ga, var(--accent)) 45%, transparent), transparent 70%), var(--bg-alt);
}
.hm-card-body { display: grid; gap: var(--space-2); }
.hm-card-top { color: var(--accent-text); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hm-card h3 { margin: 0; font-size: 1.25rem; }
.hm-card p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.55; }
.hm-card-actions, .hm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }

/* Card pictures, all CSS. They are decoration only. */
.v-chess { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); width: 150px; height: 150px; border-radius: 8px; overflow: hidden; transform: rotateX(50deg) rotateZ(-30deg); box-shadow: 0 30px 30px rgba(0, 0, 0, .4); }
.v-chess i { background: var(--sq-light); }
.v-chess i:nth-child(8n+2), .v-chess i:nth-child(8n+4), .v-chess i:nth-child(8n+5), .v-chess i:nth-child(8n+7) { background: var(--sq-dark); }
.v-chess img { position: absolute; width: 25%; height: 25%; animation: hm-knight 4s cubic-bezier(.6, 0, .3, 1) infinite; transform: rotateZ(30deg) rotateX(-50deg) translateY(-6px); }
@keyframes hm-knight { 0%, 20% { left: 0; top: 75%; } 45%, 70% { left: 25%; top: 25%; } 95%, 100% { left: 0; top: 75%; } }
.v-c4 { position: relative; display: grid; grid-template-columns: repeat(7, 18px); gap: 5px; padding: 10px; border-radius: 12px; background: #2547d6; }
.v-c4 i { width: 18px; height: 18px; border-radius: 50%; background: var(--bg-alt); }
.v-c4 i.r { background: #ff5470; }
.v-c4 i.y { background: #ffc93c; }
.v-c4 .drop { position: absolute; left: calc(10px + 3 * 23px); top: -26px; width: 18px; height: 18px; border-radius: 50%; background: #ffc93c; animation: hm-drop 2.6s cubic-bezier(.5, 0, .75, 0) infinite; }
@keyframes hm-drop { 0% { transform: translateY(0); } 45%, 85% { transform: translateY(141px); } 100% { transform: translateY(141px); opacity: 0; } }
.v-ck { position: relative; width: 160px; height: 120px; border-radius: 10px; background: repeating-conic-gradient(var(--sq-dark) 0 25%, var(--sq-light) 0 50%) 0 0 / 80px 60px; transform: perspective(500px) rotateX(35deg); box-shadow: 0 20px 30px rgba(0, 0, 0, .4); }
.v-ck i { position: absolute; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .25), 0 8px 16px rgba(0, 0, 0, .4); }
.v-ck .a { left: 4px; top: 60px; background: #e94b57; animation: hm-jump 3s ease-in-out infinite; }
.v-ck .b { left: 52px; top: 32px; background: #26262e; animation: hm-gone 3s ease-in-out infinite; }
@keyframes hm-jump { 0%, 25% { transform: none; } 55%, 85% { transform: translate(96px, -56px); } 100% { transform: none; } }
@keyframes hm-gone { 0%, 45% { opacity: 1; transform: none; } 55%, 85% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; } }
.v-bg { display: flex; gap: 16px; }
.die { display: grid; grid-template-columns: repeat(3, 1fr); width: 56px; height: 56px; padding: 9px; border-radius: 13px; background: #fbfbff; box-shadow: 0 14px 24px rgba(0, 0, 0, .4), inset 0 -5px 0 #d9d9e6; animation: hm-roll 3.2s cubic-bezier(.3, 1.4, .5, 1) infinite; }
.die:nth-child(2) { animation-delay: .2s; }
.die b { width: 9px; height: 9px; align-self: center; justify-self: center; border-radius: 50%; background: #1a1830; visibility: hidden; }
.die.f5 b:nth-child(odd), .die.f3 b:nth-child(1), .die.f3 b:nth-child(5), .die.f3 b:nth-child(9) { visibility: visible; }
@keyframes hm-roll { 0% { transform: translateY(-30px) rotate(-200deg); } 35%, 100% { transform: none; } }
.v-hex { position: relative; width: 150px; height: 120px; }
.v-hex i { position: absolute; width: 44px; height: 50px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: color-mix(in srgb, var(--ga) 30%, var(--surface-2)); }
.v-hex i.on { background: var(--ga); animation: hm-hexp 2.4s ease-in-out infinite; }
@keyframes hm-hexp { 50% { filter: brightness(1.5); transform: scale(1.08); } }
.v-walls { position: relative; display: grid; grid-template-columns: repeat(5, 22px); gap: 6px; }
.v-walls i { width: 22px; height: 22px; border-radius: 5px; background: var(--surface-2); }
.v-walls .p1 { border-radius: 50%; background: var(--action); }
.v-walls .p2 { border-radius: 50%; background: var(--accent); }
.v-walls .wall { position: absolute; left: 28px; top: 53px; width: 50px; height: 6px; border-radius: 3px; background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2); animation: hm-wall 3s ease-in-out infinite; }
@keyframes hm-wall { 0%, 20% { transform: translateX(-90px); opacity: 0; } 45%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }

/* ── Every day ──────────────────────────────────────────────────────────────── */
.hm-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .hm-bento { grid-template-columns: minmax(0, 1fr); } }
.hm-tile { display: grid; align-content: start; gap: var(--space-4); padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.hm-label { color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hm-tile h3 { margin: 0; font-size: 1.3rem; }
.hm-tile p { margin: 0; color: var(--muted); line-height: 1.55; }
.hm-puzzle { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 22px; align-items: center; }
@media (max-width: 560px) { .hm-puzzle { grid-template-columns: minmax(0, 1fr); } }
.hm-puzzle-board { min-height: 0; }
.hm-puzzle-board:empty { display: none; }
.hm-puzzle-board .mini-chess-board, .hm-puzzle-board .mini-connect4-board { display: grid; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 10px; box-shadow: var(--shadow); }
.hm-puzzle-board .mini-chess-board { grid-template-columns: repeat(8, 1fr); }
.hm-puzzle-board .mini-connect4-board { grid-template-columns: repeat(7, 1fr); aspect-ratio: 7 / 6; gap: 3px; padding: 6px; background: #2547d6; }
.hm-puzzle-board .mini-chess-cell { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; overflow: hidden; }
.hm-puzzle-board .mini-chess-cell img { width: 100%; height: 100%; object-fit: contain; }
.hm-puzzle-board .mini-c4-cell { border-radius: 50%; background: var(--bg-alt); }
.hm-puzzle-board .mini-c4-cell.red { background: #ff5470; }
.hm-puzzle-board .mini-c4-cell.yellow { background: #ffc93c; }
.hm-puzzle-copy { display: grid; gap: var(--space-3); }
.hm-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hm-chips span { padding: 4px 10px; color: var(--muted); font-size: .78rem; border: 1px solid var(--line); border-radius: 99px; }
.hm-count { font-family: var(--font-display); font-size: 2.2rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hm-tour-meta { font-size: .92rem; }

/* ── Themes ─────────────────────────────────────────────────────────────────── */
.hm-themes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center; }
@media (max-width: 860px) { .hm-themes { grid-template-columns: minmax(0, 1fr); } }
.hm-themes .hm-head { margin-bottom: var(--space-5); }
#hm-picker .sg-picker-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.hm-preview { display: grid; justify-items: center; }
.hm-mini { display: grid; grid-template-columns: repeat(8, 1fr); width: min(100%, 420px); aspect-ratio: 1; overflow: hidden; border-radius: 14px; box-shadow: var(--shadow); transform: perspective(900px) rotateX(16deg); transition: transform .6s; }
.hm-mini:hover { transform: perspective(900px) rotateX(0); }
.hm-mini span { display: grid; place-items: center; }
.hm-mini .l { background: var(--sq-light); }
.hm-mini .d { background: var(--sq-dark); }
.hm-mini img { width: 100%; height: 100%; object-fit: contain; }

/* ── Learn, why, about, contact ─────────────────────────────────────────────── */
.hm-learn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .hm-learn { grid-template-columns: minmax(0, 1fr); } }
.hm-lcard { display: grid; gap: 10px; padding: 24px; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; transition: transform .2s, border-color .2s; }
.hm-lcard:hover { border-color: var(--accent); transform: translateY(-4px); }
.hm-ico { display: grid; place-items: center; width: 38px; height: 38px; color: var(--on-action); font-weight: 800; border-radius: 12px; background: var(--action); }
.hm-lcard h3 { margin: 0; font-size: 1.15rem; }
.hm-lcard p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.hm-why, .hm-about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .hm-why, .hm-about { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.hm-why .hm-h2, .hm-about .hm-h2 { margin: 14px 0 24px; }
.hm-features { display: grid; gap: 2px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; }
.hm-features > div { padding: 18px 22px; background: var(--surface); }
.hm-features strong { display: block; margin-bottom: 4px; }
.hm-features p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.55; }
.hm-facts { display: grid; gap: 2px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; }
.hm-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 22px; background: var(--surface); }
.hm-facts b { font-family: var(--font-display); font-size: 1.5rem; }
.hm-facts b.is-text { font-family: var(--font-ui); font-size: 1rem; }
.hm-facts span { color: var(--muted); font-size: .9rem; text-align: right; }
.hm-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; padding-top: var(--space-6); border-top: 1px solid var(--line); }
@media (max-width: 860px) { .hm-contact { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.hm-contact .email-image-link { display: inline-block; max-width: 100%; margin: var(--space-3) 0; }
.hm-contact .email-image { display: block; max-width: 100%; height: auto; }
.hm-contact .social-follow { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.hm-contact .social-follow__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hm-contact .social-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: .84rem; font-weight: 700; text-decoration: none; border: 1px solid var(--line); border-radius: 999px; }
.hm-contact .social-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hm-contact .social-follow__title { color: var(--muted); font-size: .92rem; }

@media (prefers-reduced-motion: reduce) {
    .hm-hero-board, .hm-hero h1 { animation: none; }
    .sg-js .hm-reveal:not(.in) { opacity: 1; transform: none; }
}

/* Added after the first review */
.hm-tour-lede { margin: 0; }
.hm-more { margin-top: var(--space-4); font-size: .95rem; }
.hm-more a { color: var(--accent-text); }
.hm-lcard-wide { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); margin-top: 16px; }
.hm-lcard-wide .primary-button { white-space: nowrap; }
@media (max-width: 760px) { .hm-lcard-wide { grid-template-columns: minmax(0, 1fr); } }

/* On a phone the six game cards become one row you swipe, so the page is not six screens long. */
@media (max-width: 620px) {
    .hm-games {
        display: flex;
        gap: 12px;
        margin-inline: calc(-1 * var(--space-4));
        padding: 4px var(--space-4) 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--space-4);
        -webkit-overflow-scrolling: touch;
    }
    .hm-card { flex: 0 0 82%; scroll-snap-align: start; gap: var(--space-3); padding: 14px; }
    .hm-vis { height: 132px; }
    .hm-vis > * { zoom: .78; }
    .hm-card p { font-size: .9rem; }
}

/* ── 3D hero (Stage 3b, assets/hero3d.js). Until the canvas has drawn, the CSS board above is what shows. ── */
.hm-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; }
.hm-hero.is-3d .hm-hero-visual { touch-action: pan-y; }
.hm-hero.is-3d .hm-hero-canvas { opacity: 1; }
.hm-hero.is-3d .hm-hero-board { display: none; }
/* The flat board is only the picture for visitors without the 3D hero, so it stays out of sight until the page knows that (no flash of 2D before the 3D). */
.hm-hero:not(.is-3d):not(.is-2d) .hm-hero-board { opacity: 0; }
.hm-hero.is-2d .hm-hero-board { animation: hm-spin 40s linear infinite, hm-fade .5s; }
@keyframes hm-fade { from { opacity: 0; } }

.hm-g-controls {
    position: absolute;
    left: 50%;
    bottom: 6px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    transform: translateX(-50%);
}
.hm-g-center { display: grid; justify-items: center; gap: 10px; }
.hm-g-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px;
    color: var(--text);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.hm-g-name b { font-family: var(--font-display); font-weight: 700; }
.hm-g-name span { color: var(--muted); }
.hm-g-name em { color: var(--action); font-style: normal; }
.hm-g-name:hover { border-color: var(--accent); }
.hm-g-dots { display: flex; gap: 4px; }
.hm-g-dots button { position: relative; width: 24px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; }
.hm-g-dots button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 99px; background: var(--line); transform: translate(-50%, -50%); transition: width .3s, background .3s; }
.hm-g-dots button[aria-current="true"]::after { width: 22px; background: var(--action); }
.hm-g-arrow, .hm-g-pause {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--text);
    font-size: 1.6rem;
    line-height: 1;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
}
.hm-g-arrow:hover, .hm-g-pause:hover { background: var(--surface-2); }
.hm-g-pause span { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.hm-g-pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
@media (max-width: 520px) {
    .hm-g-controls { gap: var(--space-2); bottom: 14px; }
    .hm-g-name { padding: 0 14px; font-size: .86rem; }
    .hm-g-name span { display: none; }
}

.hm-tile-challenge { grid-column: 1 / -1; }
.hm-tile-challenge[hidden] { display: none; }

/* ── The tournament spotlight, under the first screen while a tournament is live or open for registration ── */
html.hm-has-spot { scroll-snap-type: y proximity; }
.hm-spot-sec { padding-block: 40px 8px; scroll-snap-align: center; scroll-margin-top: 80px; }
.hm-spot-sec[hidden] { display: none; }
.hm-spot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; color: var(--text); text-decoration: none; background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--action) 24%, transparent), transparent 60%), var(--surface); border: 2px solid var(--action); border-radius: 28px; box-shadow: 0 0 0 0 color-mix(in srgb, var(--action) 50%, transparent); animation: hm-spot-glow 2.4s ease-in-out infinite; }
.hm-spot:hover { transform: translateY(-2px); }
.hm-spot-badge { position: absolute; top: -14px; left: 28px; padding: 6px 16px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1a1205; background: var(--action); border-radius: 999px; }
.hm-spot-badge.is-live { background: #3fc6a6; }
.hm-spot-badge.is-live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: #0a2a22; border-radius: 50%; animation: hm-spot-blink 1.2s ease-in-out infinite; }
.hm-spot-main { display: grid; gap: 10px; min-width: 0; }
.hm-spot-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.3rem); letter-spacing: -0.02em; }
.hm-spot-text { margin: 0; color: var(--muted); max-width: 560px; line-height: 1.55; }
.hm-spot-count { font-weight: 700; }
.hm-spot-cta { justify-self: start; }
.hm-spot-banner { flex: none; width: min(380px, 40%); aspect-ratio: 4 / 1; object-fit: cover; border: 1px solid var(--line); border-radius: 14px; }
@keyframes hm-spot-glow { 50% { box-shadow: 0 0 34px 2px color-mix(in srgb, var(--action) 45%, transparent); } }
@keyframes hm-spot-blink { 50% { opacity: .25; } }
@media (max-width: 700px) { .hm-spot { flex-direction: column; align-items: flex-start; padding: 28px 20px 22px; } .hm-spot-banner { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .hm-spot, .hm-spot-badge.is-live::before { animation: none; } html.hm-has-spot { scroll-snap-type: none; } }
.hm-spot-kind { color: var(--accent-text); font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }

.hm-card-actions .sg-btn-quick, .hm-card-actions .sg-btn-setup { min-height: 44px; }

/* On a phone the three buttons of a game card (Quick Start, Setup, Guide) stay on one line. */
@media (max-width: 560px) {
    .hm-card-actions { gap: 6px; }
    .hm-card-actions .sg-btn-quick, .hm-card-actions .sg-btn-setup, .hm-card-actions .ghost-button { flex: 0 0 auto; min-height: 38px; padding: 0 10px; font-size: .76rem; }
    .hm-card-actions .hm-note { flex: 1 1 100%; }
}

/* ── Daily updates: the puzzle of the day, the regular puzzles and the monthly challenge ── */
.hm-tile-puzzles .hm-puzzle-board { min-height: 0; }
.hm-challenge-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-6, 32px); }
.hm-challenge-side { display: grid; justify-items: center; gap: var(--space-4); min-width: 260px; padding: var(--space-3) var(--space-4); background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--action) 18%, transparent), transparent 70%); border-radius: 22px; }
.hm-badge-stack { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 96px; width: 250px; margin: 0; padding: 0; list-style: none; }
.hm-badge-stack .sg-medal { position: relative; flex: none; width: 62px; margin-left: -22px; padding: 0; background: none; border: 0; transform: rotate(calc((var(--i) - 2) * 7deg)) translateY(calc(var(--i) * 2px)); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); transition: transform .25s; z-index: calc(10 - var(--i)); }
.hm-badge-stack .sg-medal:first-child { margin-left: 0; }
.hm-badge-stack .sg-medal:hover { transform: translateY(-10px) scale(1.1); z-index: 20; }
.hm-badge-stack .sg-medal-art { width: 100%; height: auto; }
.hm-badge-stack .sg-medal-name, .hm-badge-stack .sg-medal-tag { display: none; }
.hm-badge-stack .sg-medal.is-locked { opacity: .4; filter: grayscale(1) drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }
@media (max-width: 760px) { .hm-challenge-layout { grid-template-columns: minmax(0, 1fr); } .hm-challenge-side { justify-items: start; } .hm-badge-stack { justify-content: flex-start; } }
.hm-challenge-layout { align-items: center; }
.hm-challenge-side { gap: var(--space-3); }
/* What the badge is, when the mouse is over it */
.hm-badge-stack .sg-medal[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; z-index: 30; width: max-content; max-width: 190px; padding: 6px 10px; color: var(--text); font-size: .76rem; font-weight: 600; line-height: 1.35; text-align: center; white-space: normal; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); transform: translateX(-50%); pointer-events: none; }

.hm-spot-badge.is-soon { color: #fff; background: #7c6cf0; }
.hm-spot-badge.is-quiet { color: var(--text); background: var(--surface-2); border: 1px solid var(--line); }
.hm-spot-kind[hidden] { display: none; }
/* The two puzzle tiles: the text and the board are centered in the tile, and the buttons share a line */
.hm-tile-puzzle, .hm-tile-puzzles { grid-template-rows: auto 1fr; }
.hm-tile-puzzle .hm-puzzle, .hm-tile-puzzles .hm-puzzle { align-self: center; align-items: center; }
.hm-tile-puzzle .hm-actions, .hm-tile-puzzles .hm-actions { flex-wrap: nowrap; gap: var(--space-2); }
.hm-tile-puzzle .hm-actions .primary-button, .hm-tile-puzzle .hm-actions .ghost-button, .hm-tile-puzzles .hm-actions .primary-button { min-height: 38px; padding: 0 14px; font-size: .84rem; white-space: nowrap; }

/* Ranks and Challenges: the rank line above the monthly challenge */
.hm-challenge-main { display: grid; gap: var(--space-4); min-width: 0; }
.hm-rank-line { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hm-rank-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
.hm-rank-chip small { color: var(--muted); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hm-rank-chip strong { color: var(--text); font-size: .98rem; }
.hm-rank-note { color: var(--muted); font-size: var(--text-sm); }

/* Quick answers, closed until opened */
.hm-faq { display: grid; gap: var(--space-3); max-width: none; }
.hm-faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.hm-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 16px 20px; color: var(--text); font-weight: 700; list-style: none; cursor: pointer; }
.hm-faq-item summary::-webkit-details-marker { display: none; }
.hm-faq-item summary::after { content: "+"; flex: none; color: var(--accent-text); font-size: 1.4rem; line-height: 1; }
.hm-faq-item[open] summary::after { content: "\2212"; }
.hm-faq-item p { margin: 0; padding: 0 20px 18px; color: var(--muted); line-height: 1.6; }

/* ── Less space between the sections (half of before) ── */
.hm-sec { padding-block: 56px 12px; }
@media (max-width: 760px) { .hm-sec { padding-block: 36px 8px; } }
.hm-spot-sec { padding-block: 24px 4px; }

/* ── The rank pills in color ── */
.hm-rank-chip:nth-child(1) { background: linear-gradient(135deg, rgba(124, 92, 255, .38), rgba(124, 92, 255, .12)); border-color: #7c5cff; }
.hm-rank-chip:nth-child(1) strong { color: #d4c8ff; }
.hm-rank-chip:nth-child(2) { background: linear-gradient(135deg, rgba(255, 176, 46, .34), rgba(255, 176, 46, .1)); border-color: #ffb02e; }
.hm-rank-chip:nth-child(2) strong { color: #ffd98a; }
.hm-rank-chip:nth-child(3) { background: linear-gradient(135deg, rgba(45, 212, 191, .32), rgba(45, 212, 191, .1)); border-color: #2dd4bf; }
.hm-rank-chip:nth-child(3) strong { color: #9cf0e4; }
.hm-rank-chip small { color: var(--text); opacity: .75; }

/* ── The whole Quick answers section is one bar until it is opened ── */
.hm-faq-all { max-width: none; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.hm-faq-all > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 18px 24px; list-style: none; cursor: pointer; }
.hm-faq-all > summary::-webkit-details-marker { display: none; }
.hm-faq-all > summary::after { content: "+"; flex: none; color: var(--accent-text); font-size: 1.8rem; line-height: 1; }
.hm-faq-all[open] > summary::after { content: "\2212"; }
.hm-faq-all .hm-h2 { margin: 4px 0 0; font-size: clamp(1.2rem, 2.6vw, 1.7rem); }
.hm-faq-all .hm-faq { padding: 0 20px 20px; }

/* ── Phones: text and buttons in the middle of their cards ── */
@media (max-width: 700px) {
    .hm-head, .hm-card-body, .hm-tile, .hm-spot, .hm-lcard, .hm-faq-all > summary { text-align: center; }
    .hm-faq-all > summary > span { flex: 1 1 auto; }
    .hm-faq-item p { text-align: left; }
    .hm-lede { margin-inline: auto; }
    .hm-card-actions, .hm-actions, .hm-chips, .hm-rank-line { justify-content: center; }
    .hm-card-actions .hm-note { text-align: center; }
    .hm-puzzle { justify-items: center; text-align: center; }
    .hm-puzzle-copy { display: grid; justify-items: center; gap: var(--space-3); }
    .hm-spot { flex-direction: column; align-items: center; }
    .hm-spot-main { justify-items: center; }
    .hm-spot-cta { justify-self: center; }
    .hm-challenge-side { justify-items: center; }
    .hm-badge-stack { justify-content: center; }
    .hm-challenge-main { text-align: center; }
    .sg-goal { text-align: left; }
}

/* On a phone "Your move." is centered, with a little extra space after "Your" so that word sits a bit to the left. */
@media (max-width: 760px) { .hm-hero h1 .hm-your { display: inline-block; padding-right: .4em; } }

/* Cards that sit in a row you scroll sideways are always fully visible, a reveal that waits for them to scroll into view left them dim (and below the contrast limit). */
.sg-js .hm-games .hm-card.hm-reveal:not(.in) { opacity: 1; transform: none; }