/* Games and announcements homepage. Scoped to preserve all other public pages. */

  #home-hub {
    --home-font: var(--font);
    --home-display: var(--display);
    --home-paper: var(--studio-paper);
    --home-ink: var(--studio-ink);
    --home-muted: var(--studio-muted);
    --home-line: var(--studio-line);
    --home-rail: var(--studio-card);
    --home-red: var(--studio-accent);
    --home-scene: light-dark(#202528, #13191c);
    --home-scene-ink: light-dark(#faf3e6, #f4ecde);
    --home-scene-muted: light-dark(#ddd8cc, #d9d1c4);
    --home-scene-wash: light-dark(rgba(14,22,24,.10), rgba(10,17,20,.22));
    --home-scene-shade: light-dark(rgba(12,20,22,.98), rgba(8,14,17,.98));
    --home-button: light-dark(#f3eee2, #e9e1d3);
    --home-button-ink: light-dark(#232b2c, #202728);
    padding: 36px max(5%, calc((100% - 1240px) / 2)) 64px;
    color-scheme: dark;
    background: var(--home-paper);
    color: var(--home-ink);
    font-family: var(--home-font, Manrope, Arial, sans-serif);
  }
  #home-hub *, #home-hub *::before, #home-hub *::after { box-sizing: border-box; }
  #home-hub h1, #home-hub h2, #home-hub h3, #home-hub p { margin: 0; }
  #home-hub button { font: inherit; }
  #home-hub img { display: block; max-width: 100%; height: auto; }
  #home-hub .home-top { display: grid; grid-template-columns: 1.62fr 1fr; gap: 20px; align-items: stretch; }
  #home-hub .home-feature { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-width: 0; min-height: 448px; overflow: hidden; background: var(--home-scene); color: var(--home-scene-ink); }
  #home-hub .home-feature-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 31%; z-index: -3; }
  #home-hub .home-feature::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--home-scene-wash) 10%, var(--home-scene-shade) 100%); }
  #home-hub .home-feature::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--home-scene-shade) 62%, transparent), transparent 82%); }
  #home-hub .home-feature-copy { width: 100%; padding: 28px 30px; }
  #home-hub .home-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; }
  #home-hub .home-feature .home-eyebrow { color: var(--home-scene-muted); margin-bottom: 10px; }
  #home-hub .home-feature h1 { font-family: var(--home-display, Barlow, 'Arial Narrow', sans-serif); font-size: clamp(42px, 5.2vw, 68px); font-weight: 700; line-height: .98; letter-spacing: -.8px; max-width: 390px; }
  #home-hub .home-feature h1 span { display: block; }
  #home-hub .home-feature p { max-width: 310px; color: var(--home-scene-muted); font-size: 14px; line-height: 1.6; margin: 13px 0 21px; }
  #home-hub .home-feature-cta { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 17px; border: 0; background: var(--home-button); color: var(--home-button-ink); padding: 11px 17px; font-size: 12px; font-weight: 700; }
  #home-hub .home-feature-cta:hover { background: color-mix(in srgb, var(--home-button) 89%, var(--home-red)); }
  #home-hub .home-feature-cta svg { width: 16px; height: 16px; }
  #home-hub .home-news { padding: 24px 25px 20px; background: var(--home-rail); display: flex; min-width: 0; flex-direction: column; }
  #home-hub .home-news-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
  #home-hub .home-news-heading::before { content: ''; width: 6px; height: 6px; flex: 0 0 6px; background: var(--home-red); border-radius: 50%; }
  #home-hub .home-news-heading h2 { font-size: 12px; font-weight: 700; letter-spacing: .2px; }
  #home-hub .home-news-story { display: block; width: 100%; padding: 0; border: 0; text-align: left; color: var(--home-ink); background: transparent; }
  #home-hub .home-news-story time { display: inline; font-size: 12px; line-height: 1.5; color: var(--home-muted); }
  #home-hub .home-news-story h3 { font-family: var(--home-display, Barlow, 'Arial Narrow', sans-serif); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -.2px; margin-top: 9px; }
  #home-hub .home-news-story p { font-size: 12px; line-height: 1.55; margin-top: 10px; color: var(--home-muted); }
  #home-hub .home-news-story:hover h3 { color: var(--home-red); }
  #home-hub .home-story-link { display: flex; align-items: center; gap: 8px; margin-top: 13px; font-size: 11px; font-weight: 700; }
  #home-hub .home-story-link svg { width: 14px; height: 14px; }
  #home-hub .home-news-secondary { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--home-line); }
  #home-hub .home-news-secondary h3 { font-family: var(--home-font, Manrope, Arial, sans-serif); font-size: 14px; line-height: 1.45; letter-spacing: -.15px; margin-top: 6px; }
  #home-hub .home-news-all { align-self: flex-start; border: 0; border-bottom: 1px solid var(--home-line); background: transparent; color: var(--home-ink); margin-top: auto; padding: 17px 0 4px; font-size: 11px; font-weight: 700; }
  #home-hub .home-news-all:hover { color: var(--home-red); border-color: var(--home-red); }
  #home-hub .home-games { margin-top: 43px; }
  #home-hub .home-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-bottom: 21px; }
  #home-hub .home-section-heading h2 { font-family: var(--home-display, Barlow, 'Arial Narrow', sans-serif); font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.4px; }
  #home-hub .home-section-heading p { color: var(--home-muted); font-size: 11px; line-height: 1.5; text-align: right; }
  #home-hub .home-game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 21px; }
  #home-hub .home-game { appearance: none; display: block; width: 100%; min-width: 0; padding: 0; border: 0; text-align: left; color: var(--home-ink); background: transparent; }
  #home-hub .home-game-art { position: relative; display: block; overflow: hidden; aspect-ratio: 1.36; background: var(--home-rail); }
  #home-hub .home-game-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 240ms ease; }
  #home-hub .home-game:hover .home-game-art img { transform: scale(1.025); }
  #home-hub .home-game:hover .home-game-title { color: var(--home-red); }
  #home-hub .home-game[data-game='simpletd'] .home-game-art img { object-position: center 31%; }
  #home-hub .home-game[data-game='spellweavers-deck'] .home-game-art img { object-position: center; }
  #home-hub .home-game[data-game='grimstep'] .home-game-art img { object-position: center 38%; }
  #home-hub .home-game-copy { display: block; padding-top: 13px; }
  #home-hub .home-game-genre { display: block; font-size: 11px; line-height: 1.45; color: var(--home-muted); }
  #home-hub .home-game-title { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; font-family: var(--home-display, Barlow, 'Arial Narrow', sans-serif); font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.35px; margin-top: 3px; }
  #home-hub .home-game-title svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--home-muted); transition: color 180ms ease, transform 180ms ease; }
  #home-hub .home-game:hover .home-game-title svg { color: var(--home-red); transform: translate(2px, -2px); }
  #home-hub .home-game-tagline { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--home-muted); }
  #home-hub .home-game-status { display: block; margin-top: 13px; font-size: 11px; line-height: 1.4; color: var(--home-red); font-weight: 500; }
  #home-hub .home-game-platform { display: block; margin-top: 5px; font-size: 11px; line-height: 1.5; color: var(--home-muted); }
  #home-hub .home-works { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--home-line); }
  #home-hub .home-works .home-section-heading { margin-bottom: 23px; }
  #home-hub .home-works .home-section-heading h2 { font-size: 29px; }
  #home-hub .home-work-grid { row-gap: 24px; }
  #home-hub .home-game-compact { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: start; gap: 12px; border-top: 1px solid var(--home-line); padding-top: 21px; }
  #home-hub .home-game-compact:nth-child(-n+3) { border-top: 0; padding-top: 0; }
  #home-hub .home-game-compact .home-game-art { width: 82px; aspect-ratio: .86; }
  #home-hub .home-game-compact .home-game-copy { padding-top: 1px; }
  #home-hub .home-game-compact .home-game-title { font-size: 23px; line-height: 1.08; margin: 4px 0 7px; letter-spacing: -.2px; }
  #home-hub .home-game-compact .home-game-genre { font-size: 11px; line-height: 1.35; }
  #home-hub .home-game-compact .home-game-status { margin-top: 8px; font-size: 11px; color: var(--home-muted); }
  #home-hub .home-game[data-game='stamp-country'] .home-game-art img,
  #home-hub .home-game[data-game='project-hearthling'] .home-game-art img { object-fit: contain; padding: 7px; }
  @media (max-width: 760px) {
    #home-hub { padding: 23px 24px 42px; }
    #home-hub .home-top { grid-template-columns: 1.35fr 1fr; gap: 15px; }
    #home-hub .home-feature { min-height: 380px; }
    #home-hub .home-feature-copy { padding: 24px; }
    #home-hub .home-feature h1 { font-size: 46px; }
    #home-hub .home-feature p { font-size: 13px; }
    #home-hub .home-news { padding: 21px 19px 18px; }
    #home-hub .home-news-story h3 { font-size: 28px; }
    #home-hub .home-news-secondary h3 { font-size: 13px; }
    #home-hub .home-game-grid { gap: 25px 18px; }
    #home-hub .home-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #home-hub .home-game-compact:nth-child(3) { border-top: 1px solid var(--home-line); padding-top: 21px; }
    #home-hub .home-game-compact { grid-template-columns: 82px minmax(0, 1fr); }
    #home-hub .home-game-title { font-size: 27px; }
  }
  @media (max-width: 570px) {
    #home-hub { padding: 18px 18px 38px; }
    #home-hub .home-top { grid-template-columns: 1fr; gap: 0; }
    #home-hub .home-feature { min-height: 350px; }
    #home-hub .home-feature-copy { padding: 25px; }
    #home-hub .home-feature h1 { font-size: clamp(36px, 12vw, 50px); }
    #home-hub .home-feature p { max-width: 290px; }
    #home-hub .home-news { padding: 24px; }
    #home-hub .home-news-heading { margin-bottom: 16px; }
    #home-hub .home-news-story h3 { font-size: 31px; max-width: 310px; }
    #home-hub .home-news-story p { max-width: 310px; }
    #home-hub .home-news-secondary h3 { font-size: 15px; }
    #home-hub .home-news-all { margin-top: 8px; }
    #home-hub .home-games { margin-top: 31px; }
    #home-hub .home-section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
    #home-hub .home-section-heading h2 { font-size: 31px; }
    #home-hub .home-section-heading p { text-align: left; }
    #home-hub .home-game-grid { grid-template-columns: 1fr; gap: 23px; }
    #home-hub .home-game-art { aspect-ratio: 1.75; }
    #home-hub .home-game-copy { padding-top: 12px; }
    #home-hub .home-game-title { font-size: 30px; }
    #home-hub .home-game-status { margin-top: 8px; }
    #home-hub .home-works { margin-top: 32px; padding-top: 24px; }
    #home-hub .home-game-compact { grid-template-columns: 88px minmax(0, 1fr); gap: 15px; padding-top: 22px; }
    #home-hub .home-game-compact:nth-child(n+2) { border-top: 1px solid var(--home-line); padding-top: 22px; }
    #home-hub .home-game-compact .home-game-art { width: 88px; aspect-ratio: .9; }
    #home-hub .home-game-compact .home-game-title { font-size: 25px; }
    #home-hub .home-game-compact .home-game-genre { font-size: 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    #home-hub .home-game-art img, #home-hub .home-game-title svg { transition: none; }
  }

#home-hub a { text-decoration: none; }
#home-hub a:focus-visible { outline: 3px solid var(--home-red); outline-offset: 6px; }
#home-hub [id] { scroll-margin-top: 120px; }
#home-hub h1, #home-hub h2, #home-hub .home-game-title, #home-hub .home-news-story h3 { font-weight: 600; }
#home-hub .home-feature h1 { max-width: none; }
#home-hub .home-feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px 21px; }
#home-hub .home-feature-cta { font-size: 13px; }
#home-hub .home-store-link { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.5; color: var(--home-scene-muted); text-decoration: underline; text-underline-offset: 4px; }
#home-hub .home-store-link svg { width: 13px; height: 13px; flex: 0 0 13px; }
#home-hub .home-feature a:focus-visible { outline-color: var(--home-scene-ink); }
#home-hub .home-news-meta { font-size: 11px; line-height: 1.6; color: var(--home-muted); }
#home-hub .home-news-meta time { font-size: inherit; }
#home-hub .home-news-story h3 { font-size: clamp(27px, 2.4vw, 34px); }
#home-hub .home-news-story p { font-size: 13px; }
#home-hub .home-news-secondary h3 { font-size: 15px; line-height: 1.5; font-weight: 700; }
#home-hub .home-news-all { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 12px; }
#home-hub .home-news-empty { font-size: 15px; line-height: 1.6; color: var(--home-muted); }
#home-hub .home-game { line-height: 1.5; }
#home-hub .home-game-title { margin-top: 4px; }
#home-hub .home-game-status { font-weight: 700; }
#home-hub .home-game .game-platforms { display: flex; color: var(--home-muted); margin: 7px 0 0; font-size: 11px; letter-spacing: 0; line-height: 1.4; }
#home-hub .home-game .platform-family { flex-wrap: wrap; gap: 5px 8px; }
#home-hub .home-game .platform-brand { display: none; }
#home-hub .home-game .platform-device { gap: 4px; }
#home-hub .home-game .platform-icon { width: 14px; height: 14px; }
#home-hub .home-game[data-game='project-hearthling'] .home-game-art { background: #2b2525; }
#home-hub .home-game[data-game='project-hearthling'] .home-game-art img { padding: 0; }
#home-hub .home-update-link { display: inline-flex; align-items: center; gap: 9px; padding: 11px 0 0; font-size: 11px; color: var(--home-muted); }
#home-hub .home-update-link:hover { color: var(--home-red); }
#home-hub .home-works { margin-top: 36px; }
#home-hub .home-studio { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(0, 1.8fr); gap: 54px; padding-top: 44px; margin-top: 48px; border-top: 1px solid var(--home-line); align-items: center; }
#home-hub .home-studio-art { max-width: 290px; }
#home-hub .home-studio-art img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
#home-hub .home-studio-art>span { display: block; font-size: 10px; color: var(--home-muted); margin-top: 10px; text-align: center; }
#home-hub .home-studio-copy .home-eyebrow { color: var(--home-red); }
#home-hub .home-studio-copy h2 { font-family: var(--home-display, Barlow, 'Arial Narrow', sans-serif); font-size: clamp(32px, 3.7vw, 48px); line-height: 1.05; letter-spacing: -.5px; margin: 12px 0 20px; }
#home-hub .home-studio-copy p { max-width: 61ch; font-size: 14px; line-height: 1.8; color: var(--home-muted); margin-top: 12px; }
#home-hub .home-studio-links { display: flex; flex-wrap: wrap; gap: 12px 27px; margin-top: 20px; }
#home-hub .home-studio-links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; font-weight: 700; }
#home-hub .home-studio-links a:hover { color: var(--home-red); }
#home-hub .home-support { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 25px 30px; margin-top: 40px; background: var(--home-rail); }
#home-hub .home-support .home-eyebrow { font-size: 10px; color: var(--home-muted); }
#home-hub .home-support h2 { font-family: var(--home-display, Barlow, 'Arial Narrow', sans-serif); font-size: 31px; margin-top: 7px; line-height: 1.1; }
#home-hub .home-support>a { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--home-line); }
#home-hub .home-support>a:hover { color: var(--home-red); border-color: var(--home-red); }
/* The original transparent banner layer keeps the fan and QR pixels intact. */
#home-hub .home-top { grid-template-columns: 1.9fr 1fr; }
#home-hub .home-feature { display: grid; grid-template-columns: minmax(0,1fr) 340px; align-items: center; gap: 8px; padding-right: 20px; }
#home-hub .home-feature-copy { min-width: 0; padding-right: 0; }
#home-hub .home-feature h1 { font-size: clamp(48px,4.5vw,64px); }
#home-hub .home-feature-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
#home-hub .home-qr-fan { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; color: var(--home-scene-muted); padding: 15px 0; }
/* Clip the source canvas and let its enclosing link own the click target. */
#home-hub .home-qr-art { display: block; width: 100%; height: auto; overflow: hidden; pointer-events: none; filter: drop-shadow(0 8px 14px #0006); }
#home-hub .home-qr-fan>span { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; line-height: 1.5; text-underline-offset: 4px; }
#home-hub .home-qr-fan>span svg { width: 14px; height: 14px; }
#home-hub .home-qr-fan:hover>span { color: var(--home-scene-ink); text-decoration: underline; }
@media (min-width:701px) and (max-width:1100px) {
  #home-hub .home-top { grid-template-columns: 1fr; }
  #home-hub .home-feature { grid-template-columns: minmax(0,1fr) 360px; min-height: 420px; padding-right: 30px; }
  #home-hub .home-feature h1 { font-size: clamp(44px,6.2vw,58px); }
  #home-hub .home-news { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 0 28px; }
  #home-hub .home-news-heading,#home-hub .home-news-all { grid-column: 1/-1; }
  #home-hub .home-news-all { justify-self: start; margin-top: 5px; }
  #home-hub .home-news-secondary { margin: 0; padding: 0 0 0 25px; border-top: 0; border-left: 1px solid var(--home-line); }
}
@media (max-width:700px) {
  #home-hub .home-top { grid-template-columns: 1fr; }
  #home-hub .home-feature { display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 0 0 20px; gap: 0; }
  #home-hub .home-feature-copy { width: 100%; padding: 28px 25px 16px; }
  #home-hub .home-feature h1 { font-size: clamp(38px,8.5vw,54px); }
  #home-hub .home-feature-actions { flex-direction: row; align-items: center; gap: 14px 20px; }
  #home-hub .home-qr-fan { width: min(340px,100%); padding: 8px 4px 10px; gap: 12px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  #home-hub .home-game-compact { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
  #home-hub .home-game-compact .home-game-art { width: 68px; }
  #home-hub .home-game-compact .home-game-title { font-size: 21px; }
}
@media (max-width: 760px) {
  #home-hub .home-feature-actions { gap: 13px; }
  #home-hub .home-feature h1 { font-size: clamp(34px, 5.8vw, 44px); }
  #home-hub .home-studio { grid-template-columns: minmax(150px, .7fr) minmax(0, 1.4fr); gap: 30px; }
  #home-hub .home-studio-copy p { font-size: 13px; }
}
@media (max-width: 570px) {
  #home-hub .home-feature h1 { font-size: clamp(34px, 9.4vw, 50px); }
  #home-hub .home-news-story h3 { font-size: 30px; }
  #home-hub .home-news-secondary h3 { font-size: 15px; }
  #home-hub .home-game-title { font-size: 29px; }
  #home-hub .home-game-compact .home-game-title { font-size: 24px; }
  #home-hub .home-studio { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; padding-top: 30px; }
  #home-hub .home-studio-art { max-width: 190px; }
  #home-hub .home-studio-copy h2 { font-size: 35px; }
  #home-hub .home-support { flex-direction: column; align-items: flex-start; padding: 24px; gap: 14px; }
}