/* hoof.team — platform hub.
   Reuses the site palette (mobile-mmo variables) so an alliance landing and the
   hub read as one product; everything here is prefixed .hub- because the global
   .kicker/.lead/.badge classes leak into subpages. */

.hub-page { background: linear-gradient(180deg, var(--bg-0), #050a18 60%); min-height: 100svh; }

/* ---- Stage: one screen when it fits. Copy, directory and footer live in the left
   column; the Bull King is anchored to the bottom-right of the page and pushed
   25% of his own box below the edge, so the bust's plinth and forearms are
   cropped by the page itself (see hub-scene.js for the poster/lite/HQ steps).
   --bull-w is the square figure box (68vw: he owns the right half of the screen);
   the left column width is derived from it so the copy never runs under the horns. ---- */
.hub-stage {
  /* Square figure box; silhouette ≈ 84% of it wide. 68vw is the size the owner signed
     off on (≈1300px at 1920); the 440px floor keeps the copy readable on small laptops. */
  --bull-w: min(68vw, calc(100vw - 440px), 1400px);
  --copy-w: 560px;                 /* the text column at full width */
  --gutter: 40px;                  /* between the copy's right edge and the bull's silhouette */
  /* The band is exactly as wide as the pair — copy + gutter + silhouette + page padding —
     and is centred, so on a wide monitor the two sit together in the middle instead of
     in opposite corners. On narrow screens the band is the viewport and the copy shrinks. */
  --stage-w: min(100vw, calc(var(--copy-w) + var(--gutter) + .84 * var(--bull-w) + 2 * var(--pad-i)));
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column;
}
.hub-main {
  position: relative; z-index: 2; flex: 1;
  width: 100%; max-width: var(--stage-w); margin: 0 auto;
  padding: var(--nav-h) var(--pad-i) 0;
  display: flex; flex-direction: column;
}
.hub-col {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  /* Whatever the band leaves next to the bull's silhouette (= --copy-w on wide screens). */
  max-width: calc(var(--stage-w) - 2 * var(--pad-i) - var(--gutter) - .84 * var(--bull-w));
}
/* ---- Centred headline (the alliance landing's hero title, ported) ---- */
.hub-headline {
  position: absolute; left: 0; right: 0; z-index: 3;
  top: calc(var(--nav-h) + clamp(.75rem, 2.2vh, 1.75rem));
  display: flex; flex-direction: column; align-items: center; gap: .65rem;
  padding: 0 var(--pad-i); text-align: center; pointer-events: none;
}
.hub-headline-eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold-2); padding: .45rem 1.1rem; border-radius: 999px;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(240, 192, 65, .35); backdrop-filter: blur(8px);
}
.hub-headline-eyebrow::before, .hub-headline-eyebrow::after {
  content: ""; display: block; width: 18px; height: 1px; background: currentColor; opacity: .55;
}
.hub-headline-title {
  font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: .95; letter-spacing: -.005em; text-transform: uppercase; color: var(--ink);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .85), 0 8px 40px rgba(0, 0, 0, .6);
}
.hub-headline-title em {
  font-style: normal;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 14px rgba(240, 192, 65, .35));
}

/* At the column's bottom, at least as tall as the visible bull (box × (75% shown − 13.7%
   empty above the horns)) → the copy's first line starts level with the horn tips. */
.hub-below { display: flex; flex-direction: column; flex: none; margin-top: auto; min-height: calc(.613 * var(--bull-w)); }
.hub-title {
  font-family: var(--font-display); font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1.05; color: var(--ink); text-wrap: balance;
}
.hub-title em { color: var(--gold); }
.hub-lead { margin-top: 1.1rem; color: var(--ink-soft); font-size: clamp(.95rem, 1.6vw, 1.08rem); line-height: 1.6; max-width: 48ch; }
.hub-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hub-note { margin-top: 1rem; font-size: .85rem; color: var(--gold-2); }

.hub-dir { margin-top: clamp(2rem, 7vh, 4.5rem); }
.hub-footer {
  margin-top: auto; padding: clamp(2rem, 6vh, 4rem) 0 1.5rem;
  color: var(--dim); font-size: .8rem;
}

/* ---- Bull King (poster → lite GLB → HQ GLB, see hub-scene.js) ----
   The box is always square: the poster was rendered 1:1 with the same camera
   fit as the live canvas, so the swap lands pixel for pixel. */
.hub-figure {
  position: absolute; z-index: 1; bottom: 0;
  /* Silhouette flush with the band's right padding edge; it ends 7% before the box does. */
  right: calc((100% - var(--stage-w)) / 2 + var(--pad-i) - .07 * var(--bull-w));
  width: var(--bull-w); aspect-ratio: 1 / 1;
  transform: translateY(25%);
  isolation: isolate; pointer-events: none;
}
.hub-figure-glow {
  position: absolute; inset: 4% 4% 26%; z-index: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(240, 192, 65, .22), rgba(240, 192, 65, 0) 62%);
  filter: blur(30px);
}
.hub-poster, .hub-3d {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1;
  transition: opacity .6s ease;
}
.hub-poster { object-fit: contain; }
.hub-3d { opacity: 0; }
.hub-figure.is-3d .hub-poster { opacity: 0; }
.hub-figure.is-3d .hub-3d { opacity: 1; }
.hub-loader {
  position: absolute; left: 30%; right: 30%; bottom: 30%; height: 2px; z-index: 2;
  background: rgba(240, 192, 65, .16); overflow: hidden; transition: opacity .4s ease;
}
.hub-loader > div { height: 100%; width: 0; background: var(--gold); transition: width .2s ease; }
.hub-figure.is-3d .hub-loader, .hub-figure.no-3d .hub-loader { opacity: 0; }

/* ---- Phones, tablets and narrow laptops (≤1100px): copy → bull → directory → footer.
   .hub-main/.hub-col dissolve (display: contents) so the four blocks become flex
   items of the stage and can be ordered; the bull sits in flow, a hair wider than
   the screen (horns edge to edge), and the directory panel rides up over his
   plinth with a negative margin — the same "cropped by the page" read as desktop. */
@media (max-width: 1100px) {
  .hub-stage {
    --bull-w: min(104vw, 600px);
    min-height: 0; overflow: visible; display: flex; flex-direction: column;
  }
  .hub-main, .hub-col, .hub-below { display: contents; }
  .hub-headline { position: static; order: 0; padding-top: calc(var(--nav-h) + clamp(1rem, 4vw, 1.75rem)); gap: .45rem; }
  .hub-headline-title { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .hub-hero { order: 1; margin-top: 0; padding: clamp(1.25rem, 5vw, 2rem) var(--pad-i) 0; }
  .hub-title { font-size: clamp(2rem, 9vw, 2.8rem); }
  .hub-lead { max-width: none; }
  .hub-figure {
    order: 2; position: relative; right: auto; bottom: auto; transform: none; z-index: 0;
    align-self: center; flex: none;
    margin: calc(var(--bull-w) * -.06) 0 calc(var(--bull-w) * -.22);
  }
  .hub-dir {
    order: 3; position: relative; z-index: 2; margin-top: 0;
    padding: clamp(1.5rem, 5vw, 2.5rem) var(--pad-i) 0;
    background: #070d1c; border-top: 1px solid rgba(240, 192, 65, .18);
  }
  .hub-footer {
    order: 4; position: relative; z-index: 2; margin-top: 0;
    padding: 2rem var(--pad-i) 1.5rem; background: #070d1c;
  }
}

.hub-dir h2 {
  font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--ink); margin-bottom: 1.1rem; letter-spacing: .04em;
}
.hub-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hub-card {
  display: grid; gap: .5rem; padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-top: 3px solid var(--card-accent, var(--gold));
  transition: transform .16s ease, border-color .16s ease;
}
.hub-card:hover { transform: translateY(-2px); border-color: var(--card-accent, var(--gold)); }
.hub-card-name { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.hub-card-tag  { font-size: .86rem; color: var(--ink-soft); line-height: 1.45; min-height: 1.2em; }
.hub-card-meta { display: flex; gap: .8rem; align-items: baseline; font-size: .78rem; color: var(--dim); }
.hub-card-meta b { color: var(--gold); font-size: .95rem; }
.hub-card-go { margin-top: .3rem; font-size: .82rem; color: var(--card-accent, var(--gold)); letter-spacing: .06em; text-transform: uppercase; }
.hub-empty { color: var(--dim); font-size: .9rem; }

.hub-modal {
  /* base.css resets `* { margin: 0 }`, which kills the UA's `dialog { margin: auto }`
     and parks the box in the top-left corner — restore the centring explicitly. */
  margin: auto;
  border: 1px solid var(--line); border-radius: 16px; padding: 0;
  background: var(--bg-1); color: var(--ink); max-width: 520px; width: calc(100vw - 2rem);
  max-height: calc(100svh - 2rem); overflow: auto;
}
.hub-modal::backdrop { background: rgba(4, 8, 18, .72); backdrop-filter: blur(2px); }
.hub-modal form { display: grid; gap: .85rem; padding: 1.4rem 1.5rem 1.5rem; }
.hub-modal h2 { font-family: var(--font-display); font-size: 1.25rem; }
.hub-form-lead { font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }
.hub-field { display: grid; gap: .3rem; }
.hub-field > span { font-size: .78rem; color: var(--ink-soft); }
.hub-field input, .hub-field textarea {
  width: 100%; padding: .55rem .7rem; border-radius: 8px; font: inherit; font-size: .9rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.hub-field input:focus, .hub-field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.hub-slug-row { display: flex; align-items: stretch; }
.hub-slug-row input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.hub-slug-suffix {
  display: flex; align-items: center; padding: 0 .7rem; font-size: .85rem; color: var(--dim);
  border: 1px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0; background: var(--surface-2);
}
.hub-file-row { display: flex; align-items: center; gap: .8rem; }
.hub-file-row input[type="file"] {
  flex: 1; min-width: 0; padding: .45rem .6rem; font-size: .82rem; color: var(--ink-soft);
}
.hub-file-row input[type="file"]::file-selector-button {
  font: inherit; font-size: .8rem; padding: .35rem .7rem; margin-right: .7rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink); cursor: pointer;
}
.hub-mascot-preview {
  width: 64px; height: 64px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); flex: none;
}
.hub-file-hint { font-size: .74rem; color: var(--dim); line-height: 1.45; }
.hub-form-err { font-size: .84rem; color: #ff6b6b; }
.hub-form-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .3rem; }