/* Palpedia TCG — sub-platform chrome (sub-navigation) and shared primitives.
   Consumes the global design tokens from index.css (--ink, --panel, --cyan, --amber…)
   and mirrors the app-header geometry so the TCG bar reads as the same product. */

body.tcg-hub-page {
  --tcg-subnav-height: 46px;
}

/* ---------- TCG sub-navigation ---------- */

body.tcg-hub-page .tcg-subnav {
  position: sticky;
  top: calc(.45rem + var(--app-chrome-header-height, 60px) + .35rem);
  z-index: 60;
  width: min(calc(100% - 2rem), 1680px);
  margin: .4rem auto 0;
  min-height: var(--tcg-subnav-height);
  display: flex;
  align-items: stretch;
  gap: 0;
  font-family: "Exo", system-ui, sans-serif;
  isolation: isolate;
}

/* Clipped bar surface lives in a pseudo-element so the dropdown panels can
   escape the bar without being cut by clip-path or overflow. */
body.tcg-hub-page .tcg-subnav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #07151b;
  border: 1px solid rgba(95, 147, 153, .16);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  pointer-events: none;
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 0 .9rem;
  color: var(--cyan, #62e7ed);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid rgba(95, 147, 153, .18);
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__brand::before {
  content: "";
  width: .6rem;
  height: .6rem;
  background: var(--cyan, #62e7ed);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow: 0 0 12px rgba(98, 231, 237, .65);
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__links {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__group {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: stretch;
  min-width: max-content;
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__links > a,
body.tcg-hub-page .tcg-subnav .tcg-subnav__trigger {
  position: relative;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 0 .7rem;
  min-width: max-content;
  color: var(--muted, #9fb5b7);
  font-size: clamp(.7rem, .76vw, .8rem);
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  border-left: 1px solid rgba(95, 147, 153, .1);
  font-family: inherit;
  cursor: pointer;
  transition: color 180ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)), background 180ms var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__caret {
  width: .42rem;
  height: .42rem;
  margin-top: -.18rem;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: .75;
  transition: transform 200ms var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__group:focus-within:not(.is-dismissed) .tcg-subnav__caret,
body.tcg-hub-page .tcg-subnav .tcg-subnav__group.is-open .tcg-subnav__caret {
  transform: rotate(225deg);
}

/* Hover opens only on devices with a real hover pointer — on touch the tap
   would leave a sticky :hover that fights the click toggle and Escape. */
@media (hover: hover) {
  body.tcg-hub-page .tcg-subnav .tcg-subnav__group:hover .tcg-subnav__caret {
    transform: rotate(225deg);
  }
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__links > a::after,
body.tcg-hub-page .tcg-subnav .tcg-subnav__trigger::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 3px;
  background: var(--cyan, #62e7ed);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 240ms var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__links > a:hover,
body.tcg-hub-page .tcg-subnav .tcg-subnav__links > a:focus-visible,
body.tcg-hub-page .tcg-subnav .tcg-subnav__group:hover > .tcg-subnav__trigger,
body.tcg-hub-page .tcg-subnav .tcg-subnav__trigger:focus-visible,
body.tcg-hub-page .tcg-subnav .tcg-subnav__group:focus-within > .tcg-subnav__trigger,
body.tcg-hub-page .tcg-subnav .tcg-subnav__group.is-open > .tcg-subnav__trigger {
  color: var(--text, #edf7f5);
  background: rgba(98, 231, 237, .05);
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__links > a:hover::after,
body.tcg-hub-page .tcg-subnav .tcg-subnav__links > a:focus-visible::after,
body.tcg-hub-page .tcg-subnav .tcg-subnav__group:hover > .tcg-subnav__trigger::after,
body.tcg-hub-page .tcg-subnav .tcg-subnav__trigger:focus-visible::after,
body.tcg-hub-page .tcg-subnav .tcg-subnav__group:focus-within > .tcg-subnav__trigger::after,
body.tcg-hub-page .tcg-subnav .tcg-subnav__group.is-open > .tcg-subnav__trigger::after {
  transform: scaleX(.6);
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__links a[aria-current="page"],
body.tcg-hub-page .tcg-subnav .tcg-subnav__trigger[aria-current="page"] {
  color: var(--cyan, #62e7ed);
  background: radial-gradient(ellipse 76% 115% at 50% 100%, rgba(98, 231, 237, .16), transparent 72%);
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__links a[aria-current="page"]::after,
body.tcg-hub-page .tcg-subnav .tcg-subnav__trigger[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ---------- Section dropdowns ---------- */

body.tcg-hub-page .tcg-subnav .tcg-subnav__menu {
  position: absolute;
  z-index: 70;
  top: 100%;
  left: 0;
  min-width: max(100%, 10.5rem);
  padding: .35rem 0;
  display: flex;
  flex-direction: column;
  background: #07151b;
  border: 1px solid rgba(95, 147, 153, .22);
  border-top: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .55);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-5px);
  transition:
    opacity 180ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
    transform 180ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
    visibility 0s linear 180ms;
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__group:focus-within:not(.is-dismissed) .tcg-subnav__menu,
body.tcg-hub-page .tcg-subnav .tcg-subnav__group.is-open .tcg-subnav__menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

@media (hover: hover) {
  body.tcg-hub-page .tcg-subnav .tcg-subnav__group:hover .tcg-subnav__menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__menu a {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .52rem .95rem;
  color: var(--muted, #9fb5b7);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  border-left: 2px solid transparent;
  transition: color 160ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)), background 160ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)), border-color 160ms var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

body.tcg-hub-page .tcg-subnav .tcg-subnav__menu a:hover,
body.tcg-hub-page .tcg-subnav .tcg-subnav__menu a:focus-visible {
  color: var(--text, #edf7f5);
  background: rgba(98, 231, 237, .07);
  border-left-color: var(--cyan, #62e7ed);
  outline: none;
}

@media (max-width: 900px) {
  body.tcg-hub-page .tcg-subnav {
    width: calc(100% - 1rem);
  }
}

@media (max-width: 760px) {
  body.tcg-hub-page .tcg-subnav {
    top: calc(.25rem + var(--app-chrome-header-height, 54px) + .25rem);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  body.tcg-hub-page .tcg-subnav .tcg-subnav__brand {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 .65rem;
    font-size: .68rem;
    letter-spacing: .1em;
  }

  body.tcg-hub-page .tcg-subnav .tcg-subnav__links {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  body.tcg-hub-page .tcg-subnav .tcg-subnav__links > a,
  body.tcg-hub-page .tcg-subnav .tcg-subnav__group {
    flex: 0 0 auto;
    min-width: 0;
  }

  body.tcg-hub-page .tcg-subnav .tcg-subnav__links > a,
  body.tcg-hub-page .tcg-subnav .tcg-subnav__trigger {
    font-size: .72rem;
    padding: 0 .55rem;
    min-height: 40px;
  }

  /* No hover on touch: the dropdown opens inline (accordion-like) on tap, so it
     never gets clipped by the horizontally scrolling bar. */
  body.tcg-hub-page .tcg-subnav .tcg-subnav__group {
    flex-wrap: wrap;
  }

  body.tcg-hub-page .tcg-subnav .tcg-subnav__trigger {
    flex: 0 0 auto;
  }

  body.tcg-hub-page .tcg-subnav .tcg-subnav__menu {
    position: static;
    display: none;
    flex: 1 1 100%;
    min-width: 10.5rem;
    border: 0;
    border-top: 1px solid rgba(95, 147, 153, .14);
    clip-path: none;
    box-shadow: none;
    transform: none;
  }

  body.tcg-hub-page .tcg-subnav .tcg-subnav__group:focus-within:not(.is-dismissed) .tcg-subnav__menu,
  body.tcg-hub-page .tcg-subnav .tcg-subnav__group.is-open .tcg-subnav__menu {
    display: flex;
  }

  @media (hover: hover) {
    body.tcg-hub-page .tcg-subnav .tcg-subnav__group:hover .tcg-subnav__menu {
      display: flex;
    }
  }

  body.tcg-hub-page .tcg-subnav .tcg-subnav__menu a {
    padding-left: 1.4rem;
  }
}

/* ---------- Shared TCG hub primitives ---------- */

body.tcg-hub-page main {
  width: min(calc(100% - 2rem), var(--max, 1440px));
  margin: 0 auto;
}

body.tcg-hub-page .tcg-eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .55rem;
  color: var(--cyan, #62e7ed);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.tcg-hub-page .tcg-eyebrow::before {
  content: "";
  width: .55rem;
  height: .55rem;
  background: var(--cyan, #62e7ed);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

body.tcg-hub-page .tcg-section {
  margin-top: clamp(2.2rem, 4vw, 3.6rem);
}

body.tcg-hub-page .tcg-section > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

body.tcg-hub-page .tcg-section > header h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  letter-spacing: -.01em;
  color: var(--text, #edf7f5);
}

body.tcg-hub-page .tcg-section > header p {
  margin: .25rem 0 0;
  color: var(--muted, #9fb5b7);
  font-size: .92rem;
}

body.tcg-hub-page .tcg-panel {
  background: linear-gradient(180deg, var(--panel-2, #112a34), var(--panel, #0d202a));
  border: 1px solid var(--line, rgba(166, 217, 224, .2));
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

body.tcg-hub-page .tcg-link-more {
  color: var(--cyan, #62e7ed);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

body.tcg-hub-page .tcg-link-more:hover,
body.tcg-hub-page .tcg-link-more:focus-visible {
  color: var(--cyan-soft, #a6fbf6);
}

body.tcg-hub-page .tcg-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .6rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber, #f2b84b);
  border: 1px solid color-mix(in srgb, var(--amber, #f2b84b) 45%, transparent);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

body.tcg-hub-page .tcg-badge--cyan {
  color: var(--cyan, #62e7ed);
  border-color: color-mix(in srgb, var(--cyan, #62e7ed) 45%, transparent);
}

/* Shared call-to-action buttons (hub hero, play, card page…): they live here so
   every TCG page gets them from the chrome stylesheet alone. */
body.tcg-hub-page .tcg-hub-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .68rem 1.5rem;
  background: var(--cyan, #62e7ed);
  color: var(--ink, #061018);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background 180ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)), transform 180ms var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

body.tcg-hub-page .tcg-hub-cta:hover,
body.tcg-hub-page .tcg-hub-cta:focus-visible {
  background: var(--cyan-soft, #a6fbf6);
  transform: translateY(-1px);
}

body.tcg-hub-page .tcg-hub-cta--ghost {
  background: transparent;
  color: var(--cyan, #62e7ed);
  border: 1px solid color-mix(in srgb, var(--cyan, #62e7ed) 55%, transparent);
}

body.tcg-hub-page .tcg-hub-cta--ghost:hover,
body.tcg-hub-page .tcg-hub-cta--ghost:focus-visible {
  background: rgba(98, 231, 237, .08);
}

@media (prefers-reduced-motion: reduce) {
  body.tcg-hub-page .tcg-subnav .tcg-subnav__links a,
  body.tcg-hub-page .tcg-subnav .tcg-subnav__links a::after,
  body.tcg-hub-page .tcg-subnav .tcg-subnav__trigger,
  body.tcg-hub-page .tcg-subnav .tcg-subnav__trigger::after,
  body.tcg-hub-page .tcg-subnav .tcg-subnav__caret,
  body.tcg-hub-page .tcg-subnav .tcg-subnav__menu,
  body.tcg-hub-page .tcg-subnav .tcg-subnav__menu a,
  body.tcg-hub-page .tcg-hub-cta {
    transition: none;
  }
}