/* home.css -- the landing page, and only the landing page. Loaded after
   style.css by index.html alone, so nothing here touches the setup page, the
   board or the replay console.

   It holds no colours and no font names: the palette, the type and the
   photograph are the theme's (theme.css), and this file is the poster layout
   that reads them. That is what lets the page carry whichever theme is chosen
   -- it used to re-declare the whole summer palette with !important, which
   pinned the homepage to one look and made the values true in two files. */

/* --- the field: the photograph, fixed behind the page like it's the ground
   underfoot rather than something that scrolls past. A tint fades from strong
   (behind the header and hero text, which sit directly on it) to soft further
   down, where the tiles are opaque cards and can take more of the photo
   showing through. A theme with no photograph sets --page-photo to none
   and both scrims to transparent, and the page is then flat colour. */
body{background:var(--page-photo) center center/cover fixed no-repeat, var(--bg)}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, var(--scrim-strong) 0%, var(--scrim-soft) 40%, var(--scrim-soft) 100%)}
.wrap{position:relative;z-index:1}

/* --- brand ---------------------------------------------------------------- */
.brandname{color:var(--ink)}
.brandname i{color:var(--flag);font-style:italic}

/* --- hero: poster lettering, set in the display face at the weight the theme
   asks for -------------------------------------------------------------- */
h1.hero{color:var(--flag);letter-spacing:-.005em;text-align:center;text-transform:uppercase;
  max-width:640px;margin:2px auto}
/* two lines, and a larger size, on desktop only -- mobile keeps the single-
   line phrase it already fits comfortably */
@media (min-width:900px){
  h1.hero{max-width:none;font-size:72px}
  h1.hero .heroline{display:block}
}

/* --- layout: the tiles get the full width, so they sit in one row ---------- */
@media (min-width:640px){.tiles{grid-template-columns:repeat(3,1fr)}}

.lede b{color:var(--flag)}
.eyebrow{color:var(--muted);opacity:.9}

/* --- tiles: painted signboards, corners pinned with a nail head ---------- */
.tile{position:relative;background:var(--panel);border:2px solid var(--line-strong);
  border-radius:9px;box-shadow:var(--shadow-strong)}
.tile::before,.tile::after{content:"";position:absolute;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--line-strong);opacity:.6}
.tile::before{left:11px} .tile::after{right:11px}
.tile:hover{border-color:var(--flag);transform:translateY(-1px)}
.tile.primary{border-color:var(--flag);box-shadow:var(--shadow-strong);transform:rotate(-.3deg)}
.tile.primary:hover{transform:rotate(-.3deg) translateY(-1px)}
.tile.primary .tile-k{color:var(--flag)}
.tile-t{color:var(--ink)}
.tile-go{color:var(--flag)}

/* --- the play button: one flat colour, sized to be the obvious thing to
   press. --on-flag is the theme's own answer to what text on --flag is. --- */
.btn{font-family:var(--font-text);font-size:15px!important;font-weight:600;
  background:var(--flag);color:var(--on-flag)!important;border:none;
  border-radius:9px;padding:11px 22px;box-shadow:none;
  transition:background-color .12s ease}
.btn:hover{background:color-mix(in srgb, var(--flag) 88%, black);color:var(--on-flag)}
.btn:active{background:color-mix(in srgb, var(--flag) 78%, black)}

/* --- the hero sphere: the actual game object, not a decorative stand-in.
   Same component the match console draws its flag state with (src/bloch.js) --
   one picture of the sphere, not two. */
.herostage{display:flex;flex-direction:column;align-items:center;gap:0;
  margin:2px 0 20px}
.spherewrap{position:relative;width:min(80vw,440px)}
.spherewrap #heroSphere svg{display:block;margin:0 auto;cursor:grab}

.spherehint{font-family:var(--font-hand);font-weight:400;font-size:20px;
  color:var(--ink);margin:-14px 0 0;line-height:1.3;text-align:center}
@media (min-width:900px){.spherehint{font-size:26px}}

/* a small sketched arrow pinned to the word "This", pointing back up at the
   sphere -- anchored to the word itself so it tracks correctly regardless of
   font size or how the caption wraps, rather than a guessed offset */
.hintanchor{position:relative;display:inline-block}
.hintarrow{position:absolute;left:60%;bottom:calc(100% + 10px);
  width:28px;height:auto;pointer-events:none}