/* =========================================================
   BUG BRAND SYSTEM v3 — TYPOGRAPHY OVERRIDE (rev.3)
   Loaded AFTER styles.css. Only touches font-family, color,
   letter-spacing, line-height, text-fill and icon-ring styling
   — no layout, no geometry, no JS-bound classes/ids/data-attrs.

   rev.3 fixes (on top of rev.2):
   - The "ПРОВЕДЁННЫЕ ТУРНИРЫ" archive list used a completely
     different class family (.archive-*) that rev.2 never
     touched — 8-11px text throughout. Fixed now.
   - "Как играем" page: several paragraph selectors are scoped
     as ".how-page .mechanic-card p" etc with higher specificity
     than the generic selectors used in rev.2, and one used
     clamp(9px..12px) — raised the floor and matched scoping
     exactly so this override reliably wins.
   - Across the board, the floor for real body/data text is
     raised again: 15-16px for paragraphs, 12-13px (was 10-11)
     for compact one-line labels.
   - Icon rings get a two-tone bevel + soft glow so the existing
     line-icons read as metal/premium instead of flat outline.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Prata&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=EB+Garamond:ital,wght@0,400;1,400&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --bug-gold-light:#f1e3ae;
  --bug-gold-mid:#b8934a;
  --bug-gold-dark:#8f7038;
  --bug-green-accent:#5f8a68;
  --bug-gradient-gold: linear-gradient(180deg, var(--bug-gold-light) 0%, var(--bug-gold-mid) 55%, var(--bug-gold-dark) 100%);
  --gold: var(--bug-gold-mid);
  --gold-bright: var(--bug-gold-light);
}

/* ---------- base reading face ---------- */
html, body,
button, input, textarea, select,
.main-nav a, .footer-nav a, .btn,
.feature-card, .dashboard-card,
p, li{
  font-family:"Cormorant Garamond", Georgia, serif !important;
}

/* ---------- decorative display headings ---------- */
h1, h2,
.hero h1,
.how-page .how-title, .how-page .section-title, .how-page .final-title,
.rules-page .rules-title, .rules-page .rule-section h2,
.club-benefits h3, .clubs-hero-thesis,
.club-table-stats strong,
.tournament-date strong, .tournaments-state strong, .tournament-venue > div:first-child a,
.registration-hero h1, .registration-copy h2, .registration-copy h3, .registration-success h2,
.home-page .hero h1, .home-page .stats strong, .home-page .brand-lockup-copy b,
.news-trophy, .final-copy h2, .rules-card h2, .section-title,
.about-release h1, .clubs-hero h1, .tournaments-hero h1, .how-title h1,
.rules-doc-head h1, .archive-title h4{
  font-family:"Prata", serif !important;
  font-weight:400 !important;
  letter-spacing:.02em !important;
  background: var(--bug-gradient-gold) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color: var(--bug-gold-light) !important;
}

h3, .p-body h3{
  font-family:"Prata", serif !important;
  font-weight:400 !important;
  color: var(--bug-gold-light) !important;
}

/* ---------- heading clipping fix (line-height was <1.0 site-wide) ---------- */
h1, h2, h3{ line-height:1.18 !important; }
.hero h1,
.home-page .hero h1,
.about-release h1,
.clubs-hero h1,
.tournaments-hero h1,
.registration-hero h1,
.how-title h1,
.how-page .how-title h1,
.rules-doc-head h1{
  line-height:1.15 !important;
}

/* ---- Homepage hero: still clipping at the top after two rounds of
   fixes -- turns out "BUG --" sits in its own <span> inside the h1,
   and that span carries its OWN font-size (up to 1.32em bigger than
   the rest of the heading) and its OWN line-height as low as .86 at
   some breakpoints. Fixing the h1 alone never touched this nested
   span, so the enlarged, extra-tight text inside it kept clipping.
   Both are now pinned together, unconditionally. */
.home-page .hero h1{
  font-size: clamp(30px, 4vw, 46px) !important;
  line-height:1.28 !important;
  margin-top:10px !important;
  padding-top:4px !important;
}
.home-page .hero h1 span{
  font-size:1.15em !important;
  line-height:1.28 !important;
  display:inline-block !important;
}
.tournament-date strong,
.club-table-stats strong,
.home-page .stats strong{
  line-height:1.2 !important;
}

/* ---------- English brand lockup ---------- */
.brand-english, .logo-wordmark, [data-brand-en]{
  font-family:"Prata", serif !important;
  font-weight:400 !important;
  letter-spacing:.2em !important;
  text-transform: uppercase;
}

/* ---------- quiet/italic supporting text ---------- */
.hero-lead, .clubs-hero-thesis + p, .registration-copy p, .final-copy p{
  font-family:"Cormorant Garamond", serif !important;
  font-style: italic !important;
}

/* ---------- technical/mono values -- left untouched on purpose ---------- */
.technical, [data-technical], .rules-page .revision{
  font-family:"JetBrains Mono","Consolas",monospace !important;
}

/* ---------- captions / fine print ---------- */
footer, .footer-nav, small, .warning{
  font-family:"EB Garamond", serif !important;
}

/* ---------- buttons ---------- */
.btn{
  letter-spacing:.12em !important;
  text-transform: uppercase;
  border-radius: 0 !important;
}
.btn-outline{
  color: var(--bug-gold-light) !important;
  border-color: rgba(184,147,74,.45) !important;
  background: transparent !important;
}
.btn-green{
  border-color: var(--bug-green-accent) !important;
}
.main-nav a:hover, .footer-nav a:hover{
  color: var(--bug-gold-mid) !important;
}

/* ---- UNIFY: every page now shows the same header ----------------
   Previously only the homepage had the "BUG / Billiard Underground
   Game" wordmark next to the icon -- every other page showed just
   the bare icon (markup was added back to those pages to match).
   The homepage's nav also had its own conflicting styling (regular
   case on some breakpoints, a different uppercase font on others)
   instead of matching the clean uppercase style every other page
   already uses. Both now use one single definition. */
.home-page .main-nav a{
  font-family:"Cormorant Garamond", serif !important;
  text-transform:uppercase !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  color:#d7d4cb !important;
  padding:0 !important;
}
.home-page .main-nav a.active{
  color: var(--bug-gold-light) !important;
}
.home-page .main-nav a.active:after{
  background: var(--bug-gold-mid) !important;
  height:1px !important;
}

/* ---- FIX: nav bar vanished entirely on non-home pages at normal
   desktop widths (e.g. clubs.html on a full-size monitor) --------
   The original CSS has AT LEAST six separate, overlapping breakpoint
   systems for .main-nav / .menu-button (different thresholds: 980,
   900-1199, 1200, 1279/1280, 1449/1450, 1550, 1759/1760px), added
   in different rounds of edits and never reconciled. Depending on
   the exact viewport width, whichever rule happens to load last
   inside that tangle wins -- sometimes that's a rule that hides the
   nav even though there is plenty of room for it. Rather than
   chase every one of those individually, this replaces all of them
   with one clean, single threshold for every page except the
   homepage (which has its own dedicated fix above). */
body:not(.home-page) .main-nav,
body:not(.home-page) .top-actions,
body:not(.home-page) .premium-actions{
  display:flex !important;
}
body:not(.home-page) .menu-button{
  display:none !important;
}
@media (max-width:1180px){
  body:not(.home-page) .main-nav,
  body:not(.home-page) .top-actions,
  body:not(.home-page) .premium-actions{
    display:none !important;
  }
  body:not(.home-page) .menu-button{
    display:block !important;
  }
}

/* ---- FIX: header wordmark had no real styling outside the homepage
   "BUG / Billiard Underground Game" only ever had CSS rules scoped
   to .home-page (since only the homepage used to show it). Now that
   every page shows it, the other 7 pages were falling back to
   unstyled default text -- explains the wrong font, wrong color,
   and the underline. One shared definition, used everywhere. */
.brand-lockup{ text-decoration:none !important; display:flex !important; align-items:center !important; gap:12px !important; }
.brand-lockup-copy{ display:flex !important; flex-direction:column !important; line-height:1.15 !important; }
.brand-lockup-copy b,
.home-page .brand-lockup-copy b{
  font-family:"Prata", serif !important;
  font-weight:400 !important;
  font-size:24px !important;
  letter-spacing:.03em !important;
  color: var(--bug-gold-light) !important;
  text-decoration:none !important;
  line-height:1.2 !important;
}
.brand-lockup-copy small,
.home-page .brand-lockup-copy small{
  font-family:"Cormorant Garamond", serif !important;
  font-weight:600 !important;
  font-size:9px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color: var(--bug-gold-mid) !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}

/* ---- FIX: nav bar overflow/cut-off between ~760-1180px --------
   The original CSS has a rule "@media(min-width:760px){ .home-page
   .main-nav{display:flex!important} ... .menu-button{display:none
   !important} }" with NO upper bound. That forces the full 7-item
   menu + login button to always render as a single row from 760px
   all the way up, even though the surrounding breakpoints (999px,
   1181px) show the actual intent was: hamburger menu below ~1180px,
   full row above it. In the 760-1180px gap there simply isn't room
   for logo + 7 links + button, so the row overflows and the last
   item(s) get visually cut off at the edge -- exactly what shows up
   on tablet-width screens. Restoring the hamburger for that range. */
@media(min-width:760px) and (max-width:1180px){
  .home-page .main-nav,
  .home-page .top-actions{
    display:none !important;
  }
  .home-page .menu-button{
    display:block !important;
  }
}

/* =========================================================
   READABILITY FLOOR -- raised again in rev.3
   ========================================================= */

/* ---- Official rules page ---- */
.rule-section p{ font-size:17px !important; line-height:1.8 !important; }
.rule-section h2{ font-size:24px !important; margin-bottom:14px !important; }
.rule-section h3{ font-size:18px !important; margin-top:20px !important; margin-bottom:8px !important; }
.rule-section h3:first-of-type{ margin-top:4px !important; }
.rules-doc-head p{ font-size:15px !important; }
.back-how{ font-size:14px !important; }
.rules-kicker{ font-size:13px !important; }
.rules-edition{ font-size:13px !important; }

/* ---- Rules: unify card widths --------------------------------
   Several rule groups used to be split into multiple small cards
   with mismatched heading levels (a "4." card next to separate
   "4.2"/"4.3" cards). Content was restructured so each numbered
   rule is exactly ONE card with h3 sub-headings inside. Any card
   that ends up alone in its row -- old exceptions or new merged
   ones -- now spans full width consistently via one rule instead
   of a hand-picked id list. */
.rule-section.rule-section-wide,
.rule-section:only-child{
  grid-column: 1 / -1 !important;
}

/* ---- Rules: "Содержание" sidebar was too small ---- */
.rules-toc-title{ font-size:15px !important; }
.rules-toc a{ font-size:15px !important; padding:11px 7px !important; }
.rules-toc a b{ font-size:14px !important; }

/* ---- Tournaments: upcoming card ---- */
.tournaments-hero p{ font-size:16px !important; }
.tournament-description{ font-size:15px !important; line-height:1.65 !important; }
.tournament-date span{ font-size:13px !important; }
.tournament-date small{ font-size:12px !important; }
.tournament-venue span{ font-size:12px !important; }
.tournament-venue strong, .tournament-venue a{ font-size:14px !important; }
.tournament-status{ font-size:12px !important; padding:6px 10px !important; }
.tournaments-sync{ font-size:12px !important; }
.tournaments-kicker{ font-size:12px !important; }
.meta-row span{ font-size:12px !important; }
.meta-row strong{ font-size:13px !important; }
.map-mini{ font-size:12px !important; }

/* ---- Tournaments: "ПРОВЕДЁННЫЕ ТУРНИРЫ" archive list (missed in rev.2) ---- */
.archive-date strong{ font-size:17px !important; }
.archive-date span{ font-size:13px !important; }
.archive-title h4{ font-size:20px !important; }
.archive-title small{ font-size:12px !important; letter-spacing:.1em !important; }
.archive-club span, .archive-participants span{ font-size:12px !important; letter-spacing:.1em !important; }
.archive-club a{ font-size:15px !important; }
.archive-participants strong{ font-size:15px !important; }
.archive-details{ font-size:12px !important; letter-spacing:.08em !important; }

/* ---- Clubs page ---- */
.club-benefits p{ font-size:15px !important; line-height:1.7 !important; }
.club-description{ font-size:15px !important; line-height:1.65 !important; }
.club-table-stats span{ font-size:13px !important; }
.club-future-data{ font-size:13px !important; }
.club-route{ font-size:14px !important; }
.status-legend strong{ font-size:12px !important; }
.status-legend span{ font-size:14px !important; }
.clubs-hero-lead{ font-size:16px !important; }

/* ---- Registration ---- */
.registration-hero p, .registration-copy > p{ font-size:16px !important; line-height:1.75 !important; }
.existing-player-box p{ font-size:15px !important; }
.existing-player-box > span{ font-size:12px !important; }
.bug-registration-form label > span{ font-size:13px !important; }
.bug-registration-form label > small{ font-size:12px !important; }
.form-consent span{ font-size:13px !important; }
.registration-submit{ font-size:13px !important; }
.existing-player-disabled{ font-size:12px !important; }

/* ---- How-to-play: page-scoped selectors, matched exactly so
        they win over the .how-page-prefixed rules in styles.css ---- */
.how-page .how-title p{ font-size:16px !important; }
.how-page .flow-item h3{ font-size:18px !important; }
.how-page .flow-item p{ font-size:15px !important; }
.how-page .flow-note{ font-size:14px !important; }
.how-page .mechanic-card h3{ font-size:17px !important; }
.how-page .mechanic-card p{ font-size:15px !important; line-height:1.6 !important; }
.how-page .final-copy h2{ font-size:24px !important; }
.how-page .final-copy p{ font-size:15px !important; line-height:1.7 !important; }
.how-page .half strong{ font-size:24px !important; }
.how-page .half span{ font-size:13px !important; }
.how-page .reverse{ font-size:22px !important; }
.how-page .reverse b{ font-size:18px !important; }
.how-page .reverse small{ font-size:12px !important; }
.how-page .warning{ font-size:13px !important; }
.how-page .rules-card h2{ font-size:22px !important; }
.how-page .rules-card p{ font-size:15px !important; line-height:1.55 !important; }
.how-page .rules-link b{ font-size:15px !important; }
.how-page .rules-link small{ font-size:12px !important; }
/* non-prefixed fallback (in case markup is used outside .how-page) */
.flow-item h3{ font-size:18px !important; }
.flow-item p{ font-size:15px !important; }
.flow-note{ font-size:14px !important; }
.mechanic-card h3{ font-size:17px !important; }
.mechanic-card p{ font-size:15px !important; line-height:1.6 !important; }
.final-copy h2{ font-size:24px !important; }
.rules-card p{ font-size:15px !important; line-height:1.55 !important; }

/* ---- News / footer / nav ---- */
.news-item span{ font-size:14px !important; }
.news-item time{ font-size:13px !important; }
.footer-brand span, .footer-brand small{ font-size:13px !important; }

@media(max-width:620px){
  .rules-page .rule-section p{ font-size:15px !important; line-height:1.65 !important; }
  .rule-section p{ font-size:15px !important; }
  .how-page .mechanic-card p{ font-size:13px !important; }
  .how-page .rules-card p{ font-size:13px !important; }
}

/* =========================================================
   PREMIUM ICON RING -- bevel + soft glow
   Applies to every existing circular line-icon container
   without touching the SVG artwork inside (so nothing that
   the Godot/Telegram side reads by class/id is altered).
   ========================================================= */
.pillar-icon,
.feature-icon,
.flow-icon,
.mechanic-icon{
  border-color: var(--bug-gold-mid) !important;
  box-shadow:
    inset 0 1px 1px rgba(241,227,174,.35),
    inset 0 -1px 2px rgba(0,0,0,.5),
    0 0 14px rgba(184,147,74,.22) !important;
  background: radial-gradient(circle at 50% 35%, rgba(184,147,74,.10), rgba(0,0,0,.25) 70%) !important;
}