/* TenguBet hub controls — shared search bar + filter buttons
 * ---------------------------------------------------------------------------
 * One definition for /roulette/, /baccarat/ and /blackjack/, which previously had three
 * different treatments: roulette had a bare input and plain pills, baccarat a framed input
 * and art buttons, blackjack a framed input with NO label and two <select> dropdowns.
 *
 * Built from the approved design, with the palette sampled out of it rather than eyeballed:
 *   body        #1A0F0D      border  #6A4C2B -> #C79952 -> #582E1C
 *   text        #FBFAF8      hover   #2C0907 -> #4E170F
 *   active fill #DAA85B -> #D6A254 with #3E1E10 text
 *   focus ring  #D8AB4B
 *
 * The gold bezel is a gradient border (padding-box/border-box trick) rather than an image,
 * so the buttons stay live text: searchable, translatable, screen-readable, and a new
 * filter needs no new artwork.
 */

.tengu-controls {
  display: grid;
  /* One third search, two thirds filters, on every hub page. minmax(0, ...) not
     a bare 1fr: a bare fr floors at min-content, and the search input's placeholder
     is wide enough to blow past its share - measured 47%/53% before this. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 14px 18px;
  align-items: end;
  margin: 0 0 22px;
}

@media (max-width: 900px) {
  .tengu-controls { grid-template-columns: 1fr; }
}

/* ── search ──────────────────────────────────────────────────────────────── */

.tengu-controls .search-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  text-align: left;
}

.tengu-controls .search-wrap label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tengu-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing: border-box;
  padding: 0 8px 0 0;
  border: 3px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #1A0F0D, #170D0B) padding-box,
    linear-gradient(180deg, #C79952 0%, #99652F 42%, #6A4C2B 100%) border-box;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Every desktop hub gets the same 456x64 search control. Higher specificity
   and !important are intentional: legacy Baccarat and Blackjack sheets still
   carry their former page-specific grid definitions and load before this
   shared component is moved to the end of <head> by access-tiers.js. */
@media (min-width: 1200px) {
  body .hub-controls.tengu-controls,
  body .controls.hub-controls.tengu-controls {
    grid-template-columns: minmax(0, 456px) minmax(0, 1fr) !important;
    align-items: center !important;
  }
}

@media (min-width: 761px) and (max-width: 1199px) {
  body .hub-controls.tengu-controls,
  body .controls.hub-controls.tengu-controls {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
  }

  .tengu-controls .search-wrap {
    width: min(456px, 100%);
  }
}

.tengu-search__mask {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  margin: -3px 0 -3px -3px;
  border-radius: 50%;
  background: url("/assets/icons/tengu-mask-128.webp") center/cover no-repeat;
}

.tengu-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 0;
  background: transparent;
  color: #FBFAF8;
  font: inherit;
  padding: 0 4px;
  outline: none;
}

.tengu-search input::placeholder { color: rgba(251, 250, 248, 0.38); }

.tengu-search__go {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle at 38% 32%, #2C1A12, #150C0A 70%);
  box-shadow: 0 0 0 2px rgba(199, 153, 82, 0.85);
  color: #E8B75C;
}

.tengu-search__go svg { width: 18px; height: 18px; }
.tengu-search:focus-within {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(216, 171, 75, 0.35);
}

/* ── filter buttons ──────────────────────────────────────────────────────── */

.tengu-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

/* Desktop/tablet filter standard: every hub owns the same six tracks. Buttons
   never expand to consume missing items, so Baccarat's three buttons leave
   three empty tracks, Roulette's five leave one, and Bingo fills all six.
   The repeated mask badge is removed here to preserve room for provider and
   state labels; the search control retains the Tengu identity mark. */
@media (min-width: 761px) {
  body .hub-controls.tengu-controls .tengu-filters,
  body .controls.hub-controls.tengu-controls .tengu-filters,
  body .hub-controls.tengu-controls .filter-row.tengu-filters {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: stretch !important;
  }

  body .hub-controls.tengu-controls .tengu-filters .tengu-btn,
  body .controls.hub-controls.tengu-controls .tengu-filters .tengu-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 10px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap;
    font-size: clamp(0.76rem, 1vw, 0.9rem);
    line-height: 1.1;
  }

  body .hub-controls.tengu-controls .tengu-filters .tengu-btn__mask,
  body .controls.hub-controls.tengu-controls .tengu-filters .tengu-btn__mask {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .tengu-filters { justify-content: flex-start; }
}

/* A second row of filters, used by blackjack where game type and table state are two
   separate choices. Kept as its own row rather than one long wrap so the two groups
   stay legible as groups. */
.tengu-filters + .tengu-filters { margin-top: 10px; }

.tengu-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 20px 0 0;
  border: 3px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #FBFAF8;
  /* The hub filters are <button> elements; the footer links are <a>, which the UA
     underlines. Same component, so it has to cover both. */
  text-decoration: none;
  background:
    linear-gradient(180deg, #1F110E, #160C0A) padding-box,
    linear-gradient(180deg, #C79952 0%, #975C2F 45%, #582E1C 100%) border-box;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.tengu-btn__mask {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -3px 0 -3px -3px;   /* sit flush in the bezel, not inside it */
  border-radius: 50%;
  background: url("/assets/icons/tengu-mask-128.webp") center/cover no-repeat;
}

.tengu-btn:hover {
  background:
    linear-gradient(180deg, #4E170F, #2C0907) padding-box,
    linear-gradient(180deg, #C59A5A 0%, #9B5C32 45%, #6F4C2F 100%) border-box;
  transform: translateY(-1px);
}

.tengu-btn.active,
.tengu-btn[aria-pressed="true"] {
  color: #3E1E10;
  background:
    linear-gradient(180deg, #DAA85B, #D6A254) padding-box,
    linear-gradient(180deg, #E9C173 0%, #9D5F2F 100%) border-box;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.tengu-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(216, 171, 75, 0.9), 0 6px 16px rgba(0, 0, 0, 0.42);
}

/* Respect a user's reduced-motion preference — the lift is decorative. */
@media (prefers-reduced-motion: reduce) {
  .tengu-btn { transition: none; }
  .tengu-btn:hover { transform: none; }
}


/* ── two filter groups need the full width ───────────────────────────────────
   Blackjack carries two groups (game type, table state). Sharing a grid row with the
   search left them ~1224px at a 1600 viewport while eight buttons need 1203px, so the
   last button wrapped alone. Measured, not guessed.

   Given the whole container they sit on one line from 1280px up, starting at the left
   instead of being pushed right against the search. Single-group pages are unaffected. */
.tengu-controls:has(.tengu-filters + .tengu-filters) {
  grid-template-columns: 1fr;
}

.tengu-controls:has(.tengu-filters + .tengu-filters) .tengu-filters {
  justify-content: flex-start;
  gap: 8px;
}

/* 1203px needed against 1202px available at 1280 - one pixel short. Trimming the right
   padding frees 32px across eight buttons so the row clears 1280 rather than landing
   exactly on it. */
.tengu-controls:has(.tengu-filters + .tengu-filters) .tengu-btn {
  padding-right: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   PHONE: hub chrome trimmed to the search bar
   Added 2026-09-26. Requested by Wez. Phone widths ONLY (<=760px).

   On a phone the provider filter buttons and the table counter cost ~225px
   (roulette: filters 152px + counter 73px) above the game list. The search
   field stays and becomes the only way to narrow the list on a phone.

   ⚠️ SCOPED TO .tengu-filters, NOT .tengu-btn, AND THAT DISTINCTION MATTERS.
   The four footer links (Privacy Policy / Terms of Use / Memberships / Login)
   reuse the .tengu-btn class but sit OUTSIDE .tengu-filters. Measured on a
   390px roulette page: 9 .tengu-btn visible, only 5 of them inside
   .tengu-filters. Hiding .tengu-btn would delete the footer.

   BLAST RADIUS IS BOUNDED BY THIS FILE: tengu-hub-controls.css is loaded by
   exactly 5 live pages - roulette, baccarat, bingo, blackjack and alerts.html.
   alerts.html has zero .tengu-filters and zero counter, so it is unaffected.

   The counter carries a different class per hub - roulette uses
   .roulette-hub-status, the other three use .status-bar - so both are listed.
   They are page-level classes rather than part of this component, but they
   live here because this stylesheet is present on exactly the pages that have
   them, which keeps the rule from reaching anywhere else.

   .tengu-controls is already grid-template-columns:1fr below 900px, so hiding
   the filters removes a row and leaves no empty column.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    .tengu-filters {
        display: none !important;
    }

    .roulette-hub-status,
    .status-bar {
        display: none !important;
    }
}