/* Hex website. Plain HTML + this file (like dadgainz.com). Colors from the game. */
:root { --bg: #0a0f24; --card: #121a44; --text: #f3f5ff; --muted: #9aa3c0; --line: #25306a; --hot1: #ffb347; --hot2: #ff4fa3; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55;
  background-image: radial-gradient(80% 50% at 50% -5%, rgba(192, 132, 252, 0.18), transparent 60%); }
a { color: #7dd3fc; }
.wrap { max-width: 920px; margin: 0 auto; padding: 0 20px; }
header.nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; }
header.nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
header.nav .brand img { width: 40px; height: 40px; border-radius: 10px; }
.word { font-weight: 900; letter-spacing: -0.05em; background: linear-gradient(90deg, #7dd3fc, #c084fc, #fb7185, #fbbf24); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .08em; }
header.nav .word { font-size: 30px; }
header.nav nav { display: flex; gap: 16px; flex-wrap: wrap; }
header.nav nav a { color: var(--muted); text-decoration: none; font-weight: 650; }
header.nav nav a:hover, header.nav nav a[aria-current] { color: var(--text); }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; padding: 40px 0 20px; }
.hero h1 { font-size: 88px; line-height: 1; }
.hero .tag { font-size: 24px; font-weight: 800; margin-top: 10px; }
.hero .sub { color: var(--muted); font-size: 17px; margin-top: 10px; max-width: 460px; }
/* The official store badges (build-site.mjs storeBadges), the same visible height. Google's PNG is 646×250 with its
   badge at 41..605 × 41..209, so it is drawn taller and its clear space cropped off by the link. */
.stores { --bh: 48px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.store { display: block; height: var(--bh); overflow: hidden; flex: none; }
.store img { display: block; height: 100%; width: auto; }
.store.google img { height: calc(var(--bh) * 250 / 168); margin: calc(var(--bh) * -41 / 168); }
.stores.android-first .google { order: -1; } /* site.js, on Android */
.store:hover { filter: brightness(1.15); }
.get-app { display: none; }
.band .stores { --bh: 44px; margin-top: 0; justify-content: center; }
.hero .free { font-size: 17px; font-weight: 800; margin-top: 22px; } .hero .free + .stores { margin-top: 10px; }
.play-btn { display: inline-block; margin-top: 14px; padding: 12px 22px; border-radius: 999px; font-weight: 800; color: #1a0b1f; text-decoration: none; background: linear-gradient(90deg, var(--hot1), var(--hot2)); }
.phone { justify-self: center; width: min(280px, 100%); border-radius: 36px; overflow: hidden; box-shadow: 0 0 0 8px #1a1d2b, 0 24px 60px rgba(0,0,0,.6); }
.phone img { display: block; width: 100%; height: auto; }
h2.section { margin: 50px 0 16px; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.feature h3 { font-size: 18px; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: 15px; }
.shots { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.shots img { width: 220px; height: auto; flex: none; border-radius: 22px; scroll-snap-align: start; border: 1px solid var(--line); }
.page { padding: 26px 0 10px; }
.page h1 { font-size: 34px; letter-spacing: -.02em; margin-bottom: 10px; }
.page h2 { font-size: 21px; margin: 26px 0 8px; }
.page h3 { font-size: 17px; margin: 18px 0 6px; }
.page p, .page li { color: #d6dbf2; margin-bottom: 10px; }
.page ul, .page ol { padding-left: 22px; }
.page hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.page blockquote { border: 1px dashed #f5b82e; color: #ffd98a; background: rgba(245,184,46,.08); border-radius: 12px; padding: 10px 14px; margin-bottom: 18px; }
.page blockquote p { color: inherit; margin: 0; }
details.faq { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 10px 0; }
details.faq summary { font-weight: 750; cursor: pointer; }
details.faq p { margin: 8px 0 0; }
footer { margin: 60px 0 30px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between; align-items: center; }
footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--muted); text-decoration: none; }
footer .by { display: flex; align-items: center; gap: 8px; }
footer .by img { height: 34px; }
footer .by img.oddyard { height: 56px; width: auto; } /* the Oddyard logo (scripts/build-site.mjs footer) */
@media (max-width: 700px) { .hero { grid-template-columns: 1fr; text-align: center; } .hero .sub { margin-inline: auto; } .stores { justify-content: center; }
  .get-app { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px 0 14px; padding: 14px 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,179,71,.12), rgba(255,79,163,.12)); border: 1px solid rgba(255,79,163,.3); }
  .get-app .stores { margin-top: 0; } .hero h1 { font-size: 72px; } header.nav { flex-direction: column; } }

/* ---------------------------------------------------------------- the games hub (front page, like dialed.gg) */
header.nav { flex-wrap: wrap; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-right .adfree { color: var(--muted); text-decoration: none; font-weight: 650; }
.nav-right .signin { padding: 9px 18px; border-radius: 999px; background: #fff; color: #0a0f24; font-weight: 800; text-decoration: none; }
dialog.note { margin: auto; max-width: 360px; border: 1px solid var(--line); border-radius: 20px; padding: 22px; background: var(--card); color: var(--text); }
dialog.note::backdrop { background: rgba(4,6,18,.7); }
dialog.note p { margin-bottom: 10px; color: #d6dbf2; }

/* ---------------------------------------------------------------- hover life (small, springy) */
:root { --spring: cubic-bezier(0.26, 1.6, 0.44, 1); }
header.nav { padding-top: 26px; } /* room for the icons */
.play, .nav-right .signin, .band { transition: transform .2s var(--ease, ease), box-shadow .2s, background .2s; }
.play:hover, .nav-right .signin:hover { transform: translateY(-2px); }
.play::after { content: " →"; display: inline-block; transition: transform .25s var(--spring); }
.play:hover::after { transform: translateX(3px); }
.band:hover { transform: translateY(-2px); }


/* Card demos (the motion) live in scripts/site-art.css, shared with the app; the build copies it to art.css. */
.demo-daily .swap { opacity: 0; }
.demo-endless .spark { offset-distance: 0%; opacity: 0; }
.demo-endless .float { opacity: 0; }
.demo-memory .front { opacity: 0; }
.demo-bloom .flood { opacity: 0; }
.demo-spot .finger, .demo-spot .burst { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .play, .play::after, .band, .tile, .tile .art { transition: none !important; }
  .tile:hover, .tile:hover .art, .play:hover, .play:hover::after, .band:hover { transform: none !important; }
}

/* ---------------------------------------------------------------- game pages (/swap, /memory, /bloom, /spot) */
.modes { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 16px; }
.modes span { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: #d6dbf2; }
.game-page .gp-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center; padding: 26px 0 10px; }
.game-page h1 { font-size: 64px; letter-spacing: -.03em; }
.gp-blurb { color: #c9cfee; font-size: 18px; margin: 12px 0 20px; max-width: 460px; }
.big-play { font-size: 17px; padding: 14px 28px; }
.gp-stats { margin-top: 14px; color: var(--muted); font-weight: 650; min-height: 1.4em; }
.soon-note { margin: 26px 0 0; padding: 16px 20px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--gc) 60%, transparent); color: #d6dbf2; }
ol.how { padding-left: 22px; display: grid; gap: 8px; color: #d6dbf2; max-width: 640px; }
@media (max-width: 700px) { .game-page .gp-hero { grid-template-columns: 1fr; } .game-page h1 { font-size: 48px; } }

/* ---------------------------------------------------------------- the hive: games as hex tiles on a honeycomb
   Each tile sits at (--c, --r): --c in half-tile steps across, --r in rows; phones use (--pc, --pr), a zig-zag.
   The article is the hover/glow box; .hx inside is the hex (clipped, so only the hex takes clicks and hovers). */
:root { --gc: #fbbf24; --w: min(286px, calc((100vw - 64px) / 3)); --g: 12px; }
body { background-image: radial-gradient(80% 50% at 50% -5%, rgba(192, 132, 252, 0.16), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 0L56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23ffffff' stroke-opacity='.035'/%3E%3C/svg%3E"); }
.hive { --h: calc(var(--w) * 1.1547); --hw: calc((var(--w) + var(--g)) / 2); --rh: calc(var(--h) * .75 + var(--g) * .87);
  position: relative; margin: 26px auto 10px; width: calc(var(--cols) * var(--hw) - var(--g)); height: calc((var(--rows) - 1) * var(--rh) + var(--h)); }
.tile { position: absolute; width: var(--w); height: var(--h); left: calc(var(--c) * var(--hw)); top: calc(var(--r) * var(--rh)); pointer-events: none;
  transition: transform .4s var(--spring), filter .3s; }
.tile .hx { pointer-events: auto; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, color-mix(in srgb, var(--gc) 24%, #17153a), #110f2a 72%); }
.tile.game .hx { cursor: pointer; }
.tile.game:hover { transform: translateY(-8px); filter: drop-shadow(0 0 20px color-mix(in srgb, var(--gc) 70%, transparent)); z-index: 2; }
.tile .game-art { position: absolute; inset: 13% 17% 44%; display: grid; place-items: center; }
.tile .game-art .art { width: 100%; max-height: 100%; transition: transform .45s var(--spring); }
.tile:hover .game-art .art { transform: scale(1.06) rotate(-3deg); }
.tile-text { position: absolute; left: 12%; right: 12%; top: 56%; text-align: center; display: grid; justify-items: center; gap: 4px; }
.tile h2 { font-size: calc(var(--w) * .105); line-height: 1; font-weight: 900; letter-spacing: -.03em; color: var(--gc); }
.tile p { font-size: clamp(11px, calc(var(--w) * .048), 13px); line-height: 1.3; color: #c8cbe6; }
.tile p:not(.modes) { min-height: 2.6em; } /* one-line and two-line blurbs: every play button on the same line (Mike, 2026-09-30) */
.tile .modes { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; margin-top: 6px; } /* room below the line above (2026-09-30 QA) */
.tile .modes span { font-size: clamp(8px, calc(var(--w) * .036), 10px); font-weight: 800; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.1); color: #d6dbf2; }
.tile .chip { font-size: 10px; padding: 1px 7px; }
.tile .play { font-size: clamp(11px, calc(var(--w) * .047), 13px); padding: 4px clamp(10px, calc(var(--w) * .056), 16px); margin-top: 2px; }
.logo-tile .hx { background: #16143a; display: grid; place-content: center; text-align: center; gap: 4px; }
.logo-tile .word { font-size: calc(var(--w) * .24); line-height: 1; }
.logo-tile small { color: var(--muted); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: 10px; max-width: 160px; margin: 0 auto; }
.chip { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--muted); }
/* Buttons: hex-ended chips in the game's color. */
.play { display: inline-block; padding: 10px 26px; background: var(--gc); color: #0a0f24; font-weight: 900; text-decoration: none; border: 0; cursor: pointer; font: inherit; font-weight: 900;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); }
.play:hover { filter: brightness(1.12); }
.nav-right .signin { border-radius: 0; background: #fbbf24; color: #0a0f24; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
/* The game page's big art: one large hex, always playing. */
.gp-art { position: relative; width: min(360px, 100%); aspect-ratio: 1 / 1.1547; justify-self: center; }
.gp-art .hx { position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, color-mix(in srgb, var(--gc) 26%, #17153a), #110f2a 72%); display: grid; place-items: center; }
.gp-art .game-art { width: 72%; } .gp-art .art { width: 100%; transform: rotate(-5deg); }
.game-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.game-icon { width: 52px; height: 58px; flex: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: grid; place-items: center; background: var(--gc); color: #0a0f24; }
.game-icon svg { width: 26px; height: 26px; }
.band { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 14px; max-width: 640px; margin: 22px auto 0; padding: 20px 26px; /* centred under the comb (Mike, 2026-10-29) */ border-radius: 12px; text-decoration: none; color: var(--text); background: linear-gradient(90deg, rgba(255,179,71,.14), rgba(255,79,163,.14)); border: 1px solid rgba(255,79,163,.35); }
.band-go { font-weight: 800; color: #ffb3d6; }
@media (max-width: 900px) {
  :root { --w: min(250px, calc((100vw - 40px) / 1.5)); }
  .hive { width: calc(var(--pcols) * var(--hw) - var(--g)); height: calc((var(--prows) - 1) * var(--rh) + var(--h)); }
  .tile { left: calc(var(--pc) * var(--hw)); top: calc(var(--pr) * var(--rh)); }
  .tile p { font-size: 12px; } .tile .modes span { font-size: 9px; padding: 1px 4px; }
  .tile-text { top: 47%; left: 8%; right: 8%; gap: 2px; } .tile .game-art { inset: 9% 25% 55%; } .tile .play { font-size: 12px; padding: 3px 14px; }
  header.nav { flex-direction: row; }
  .tile .chip { font-size: 9px; white-space: nowrap; padding: 1px 5px; }
}
.nav-right .coins { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--text); text-decoration: none; font-weight: 800; }
.nav-right .coins[hidden] { display: none; }
.nav-right .coins i { width: 20px; height: 20px; background: url('/play/art/coin.webp') center / contain no-repeat; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45)); } /* the game's rendered Hex Coin */
.nav-right .coins.plus::after { content: ''; width: 22px; height: 22px; margin: -4px -2px 0 0; background: url('/play/art/crown.webp') center / contain no-repeat; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45)); } /* Hex Plus: the gold crown after the count */
/* phones: Leaderboard and Shop shrink to round icon buttons (same size as the cog) so the bar never scrolls sideways */
.nav-right .nav-ico { display: none; }
@media (max-width: 480px) {
  .nav-right { gap: 5px; }
  header.nav .word { display: none; } /* the icon is the logo on phones: the bar has to hold coins + 4 buttons at 360 px */
  .nav-right .signin { padding: 7px 12px; font-size: 14px; }
  .nav-right .adfree { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); flex: none; }
  .nav-right .adfree span { display: none; }
  .nav-right .adfree .nav-ico { display: block; width: 19px; height: 19px; }
}

/* Press kit (/press) */
.press .lede { font-size: 18px; line-height: 1.5; }
.press .facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 8px; }
.press .facts dt { font-weight: 750; color: var(--muted, #9aa3c7); }
.press .facts dd { margin: 0; }
.press .feature-list { padding-left: 20px; line-height: 1.5; }
.press .feature-list li { margin: 0 0 8px; }
.press-assets, .press-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 8px 0 24px; }
.press-assets a, .press-shots a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line, rgba(255,255,255,0.1)); text-decoration: none; color: inherit; text-align: center; font-size: 14px; }
.press-assets img { width: 128px; height: auto; max-height: 128px; object-fit: contain; }
.press-shots img { width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 480px) { .press .facts { grid-template-columns: 1fr; gap: 2px 0; } .press .facts dd { margin: 0 0 8px; } }

/* Signed in: the top-bar button shows who (src/site-auth.ts). */
.nav-right .signin.on { background: rgba(255, 255, 255, 0.12); color: var(--text, #fff); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note .play.ghost { background: rgba(255, 255, 255, 0.1); color: var(--text, #fff); box-shadow: none; }
/* the Settings cog (everyone) and, signed in, your avatar + gamer tag instead of the Sign in button (src/site-auth.ts) */
.nav-right .cog { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--muted, #aab); background: rgba(255, 255, 255, 0.07); }
.nav-right .cog:hover { color: #fff; }
.nav-right .cog svg { width: 20px; height: 20px; }
.nav-right .signin.on { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; clip-path: none; border-radius: 999px; max-width: 210px; overflow: visible; }
.nav-right .signin.on .avatar { width: 32px; height: 32px; flex: none; }
.nav-right .signin.on .tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the top bar (2026-09-30, Mike: "cluttered"): the logo on the left, one group on the right; no game names (the tiles are the menu) */
.nav-right { margin-left: auto; }
@media (max-width: 480px) {
  header.nav { flex-wrap: nowrap; gap: 8px; }
  .nav-right .signin.on { padding: 3px; }
  .nav-right .signin.on .tag { display: none; } /* phones: just your avatar; the tag is on your profile */
  .nav-right .cog { width: 34px; height: 34px; }
  .nav-right .coins { padding: 5px 9px; gap: 4px; }
}
/* avatars (src/avatar.ts; the same rules as the game's styles.css) */
.avatar { position: relative; display: inline-block; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; border: 3px solid transparent; background: radial-gradient(circle at 50% 32%, hsl(var(--avh) 72% 58%), hsl(var(--avh) 70% 30%) 78%) padding-box, var(--avr, linear-gradient(transparent, transparent)) border-box; } /* the ring is the border, the colour fills inside it */
.avatar .av-animal { position: absolute; inset: 1%; width: 98%; height: 98%; object-fit: contain; }
.avatar .av-crown { position: absolute; width: 56%; height: 56%; right: -16%; top: -24%; transform: rotate(16deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); pointer-events: none; }


/* The speaker next to the cog: the game's sound on or off (site.js, from scripts/build-site.mjs). Not on phones: the bar
   is full at 360 px, and the game's home has its own speaker. */
.nav-right .snd { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--muted, #aab); background: rgba(255, 255, 255, 0.07); border: 0; padding: 0; cursor: pointer; }
.nav-right .snd:hover { color: #fff; }
.nav-right .snd svg { width: 20px; height: 20px; }
@media (max-width: 480px) { .nav-right .snd { display: none; } }
.nav-right .snd[aria-pressed="true"] { color: #fda4af; }

/* The display banner above the footer (build-site.mjs BANNER); gone when unfilled (no ad yet, or the site not approved). */
.ad-banner { max-width: 970px; min-height: 90px; margin: 32px auto 0; }
.ad-banner[hidden], .ad-banner:not(.testing):has(ins[data-ad-status="unfilled"]) { display: none; }
/* staging: an unfilled slot shows where the ad goes */
.ad-banner.testing:has(ins[data-ad-status="unfilled"]) ins { display: none !important; }
.ad-banner.testing:has(ins[data-ad-status="unfilled"])::before { content: 'Ad · no ad from Google yet (staging)'; display: grid; place-items: center; height: 90px; border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 10px; color: #9aa3c0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
/* Long web addresses in the legal pages wrap instead of pushing the page sideways on phones (2026-10-01 QA: /privacy at 390 px). */
.page p a, .page li a { overflow-wrap: anywhere; }
/* Front page: what Hex is, who makes it, and a few questions (under the store band). */
.about { margin: 44px auto 0; max-width: 760px; }
.about h1 { font-size: 30px; letter-spacing: -.02em; margin-bottom: 10px; }
.about h2 { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 28px 0 12px; }
.about p { color: var(--muted); font-size: 16px; line-height: 1.55; margin: 0 0 12px; }
.about a { color: var(--text); }
.about .faq dt { font-weight: 750; margin-top: 14px; }
.about .faq dd { margin: 4px 0 0; color: var(--muted); line-height: 1.5; }
/* Guides, articles and the devlog (docs/site/*.md). */
.article { max-width: 760px; }
.article .crumbs { margin-bottom: 4px; font-size: 14px; }
.article .crumbs a, .article .byline { color: var(--muted); text-decoration: none; }
.article .byline { font-size: 14px; }
.article a { color: var(--text); }
.article-list { list-style: none; padding: 0; }
.article-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.article-list li span { color: var(--muted); }
.guide-link { margin-top: 18px; }
.guide-link a { color: var(--text); font-weight: 700; }
/* Home band with both stores (IOS_LIVE): a div, so each store is its own link. */
div.band:hover { transform: none; }
.band-go a { color: inherit; text-decoration: none; margin-left: 16px; }
.band-go a:first-child { margin-left: 0; }
.band-go a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- the front page's 3D honeycomb (comb.js)
   The app's home comb (Mike, 2026-10-29: "it should look the same as the app"), drawn by the game's own 3D code,
   see-through with no floor glow (only the tiles and their shadows), so the page's own background runs behind it. The hex cards stay for browsers without WebGL 2, and visually hidden for screen readers. */
.comb-stage { display: none; position: relative; width: min(100%, 640px); height: clamp(400px, 52vw, 560px); margin: 10px auto 0; }
body.comb-pending .comb-stage, body.has-comb .comb-stage { display: block; }
.comb-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent); mask-composite: intersect; }
body.comb-pending .front-hive, body.has-comb .front-hive { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }