/* =========================================================
   BUG BRAND SYSTEM v2.2
   Typography and palette based on approved BUG Brand Identity.
   Layout, content and approved imagery are intentionally untouched.
   ========================================================= */

/* Official font sources: Google Fonts.
   JetBrains Mono is also an OFL font; used only for technical data. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Cormorant+Garamond:wght@600;700&family=JetBrains+Mono:wght@500;600&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --bug-gold:#D4AF37;
  --bug-dark-green:#0E3D2F;
  --bug-light-green:#1E6B4D;
  --bug-deep-green:#06251C;
  --bug-light-gold:#F6E6B3;
  --bug-white:#FFFFFF;
  --bug-text:#E7E7E7;
  --bug-text-secondary:#B0B0B0;
  --bug-text-muted:#808080;
  --bug-dark-bg:#0A0A0A;
  --bug-black:#000000;

  /* Map legacy site tokens onto the approved palette */
  --bg:var(--bug-dark-bg);
  --panel:#0b0e0c;
  --panel2:#0d100e;
  --text:var(--bug-text);
  --muted:var(--bug-text-secondary);
  --muted2:var(--bug-text-muted);
  --green:var(--bug-light-green);
  --green-dark:var(--bug-dark-green);
  --gold:var(--bug-gold);
  --gold-bright:var(--bug-light-gold);
  --line:rgba(212,175,55,.23);
}

/* Main reading/interface face */
html,body,
button,input,textarea,select{
  font-family:"Manrope","Segoe UI",Arial,sans-serif;
}

/* Interface/navigation remains modern and readable */
.main-nav a,
.footer-nav a,
.btn,
.feature-card,
.dashboard-card,
.how-page,
.rules-page{
  font-family:"Manrope","Segoe UI",Arial,sans-serif;
}

/* Decorative Russian display titles */
.hero h1,
.how-page .how-title,
.how-page .section-title,
.how-page .final-title,
.rules-page .rules-title,
.rules-page .rule-section h2{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:700;
}

/* English brand lockup / English display language */
.brand-english,
.logo-wordmark,
[data-brand-en]{
  font-family:"Cinzel","Times New Roman",serif;
  font-weight:600;
  letter-spacing:.12em;
}

/* Technical values only */
.technical,
[data-technical],
.rules-page .revision{
  font-family:"JetBrains Mono","Consolas",monospace;
}

/* Brand palette refinements — no geometry/layout changes */
.main-nav a:hover,
.footer-nav a:hover,
.how-page .section-title,
.rules-page .rules-title,
.rules-page .rule-section h2{
  color:var(--bug-gold);
}

.btn-outline{
  color:var(--bug-light-gold);
  border-color:rgba(212,175,55,.62);
}
.btn-green{
  border-color:var(--bug-light-green);
  background:linear-gradient(180deg,rgba(14,61,47,.72),rgba(6,37,28,.78));
}
.btn-green:hover{
  border-color:var(--bug-light-green);
  box-shadow:0 0 24px rgba(30,107,77,.16);
}

/* Approved logo assets must never be distorted */
.brand-mark img,
.hero-logo,
.site-footer img,
.how-page img[class*="logo"],
.rules-page img[class*="logo"]{
  object-fit:contain;
  height:auto;
  max-width:100%;
}

/* Keep small header usage on the official symbol/mark.
   Full logo remains reserved for large brand zones. */
.brand-mark img{
  object-fit:contain;
}

/* Better Cyrillic rhythm for decorative headings */
.hero h1,
.how-page .how-title,
.how-page .section-title,
.how-page .final-title,
.rules-page .rules-title,
.rules-page .rule-section h2{
  letter-spacing:.045em;
}

/* Do not let decorative typography leak into long text */
p,li,
.rules-page .rule-section p,
.rules-page .rule-section li{
  font-family:"Manrope","Segoe UI",Arial,sans-serif;
}

/* Mobile keeps the same typography hierarchy */
@media(max-width:900px){
  .hero h1,
  .how-page .how-title,
  .rules-page .rules-title{
    letter-spacing:.025em;
  }
}


:root{
  --bg:#030504;
  --panel:#080b09;
  --panel2:#0a0d0b;
  --text:#e7e5de;
  --muted:#999b96;
  --muted2:#72756f;
  --green:#23a15c;
  --green-dark:#0a4c2d;
  --gold:#c79a39;
  --gold-bright:#ddb45a;
  --line:rgba(205,166,80,.22);
  --line-soft:rgba(255,255,255,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#020403}
body{
  margin:0;background:
    radial-gradient(circle at 50% 0,rgba(9,44,27,.11),transparent 34%),
    #020403;
  color:var(--text);
  font-family:"Segoe UI",Arial,sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.027;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
a{color:inherit}
.site-shell{min-height:100vh;background:#030504}
.topbar{
  height:72px;
  display:grid;
  grid-template-columns:112px 1fr auto;
  align-items:center;
  gap:30px;
  padding:0 3.4vw;
  border-bottom:1px solid rgba(205,166,80,.18);
  background:rgba(2,4,3,.97);
  position:relative;z-index:20;
}
.brand-mark{width:76px;height:58px;display:flex;align-items:center}
.brand-mark img{width:74px;height:54px;object-fit:contain;display:block}
.main-nav{
  display:flex;justify-content:center;align-items:center;gap:38px;
  min-width:0;
}
.main-nav a,.footer-nav a{
  text-decoration:none;text-transform:uppercase;font-size:14.5px;
  letter-spacing:.06em;color:#d7d4cb;white-space:nowrap;
  transition:.2s ease;
}
.main-nav a:hover,.footer-nav a:hover{color:var(--gold-bright)}
.top-actions{display:flex;gap:16px}
.btn{
  min-height:42px;
  display:inline-flex;align-items:center;justify-content:center;gap:18px;
  padding:0 28px;
  border:1px solid rgba(205,166,80,.6);
  text-decoration:none;text-transform:uppercase;
  font-size:14.5px;letter-spacing:.08em;white-space:nowrap;
  transition:.22s ease;
}
.btn-outline{color:#d8b661;background:rgba(0,0,0,.08)}
.btn-outline:hover{background:rgba(199,154,57,.08)}
.btn-green{color:#dfeae3;border-color:#177e47;background:linear-gradient(180deg,rgba(13,74,42,.5),rgba(5,35,21,.58))}
.btn-green:hover{border-color:#35b56d;box-shadow:0 0 24px rgba(26,135,76,.13)}
.menu-button{display:none;background:transparent;border:0;color:#d7d4cb;font-size:26px}

.hero{
  height:540px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(199,154,57,.18);
}
.hero-visual{
  position:absolute;inset:0 0 0 34%;
  background-image:url("assets/hero-club.jpg");
  background-size:cover;background-position:center center;
  filter:saturate(.88) contrast(1.05) brightness(.72);
}
.hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,#020403 0%,#020403 28%,rgba(2,4,3,.96) 36%,rgba(2,4,3,.38) 58%,rgba(2,4,3,.04) 100%),
    linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.17));
}
.hero-left{
  position:relative;z-index:2;
  width:46%;
  min-width:620px;
  padding:18px 0 0 6.1vw;
}
.hero-logo{
  display:block;
  width:500px;height:320px;
  object-fit:contain;
  object-position:left center;
  margin:0 0 3px -18px;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.5));
}
.hero h1{
  margin:0 0 13px;
  color:#d5ae59;
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif;
  font-size:30px;font-weight:400;
  text-transform:uppercase;
  letter-spacing:.18em;
}
.hero-lead{
  margin:0;color:#b0b1ad;
  font-size:16px;line-height:1.45;
  letter-spacing:.01em;
}
.hero-buttons{display:flex;gap:20px;margin-top:20px}
.hero-buttons .btn{min-width:240px}
.book{font-size:17px}

.feature-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
  margin:0 3.4vw;
  transform:translateY(-1px);
}
.feature-card{
  min-height:128px;
  display:grid;grid-template-columns:84px 1fr;gap:18px;
  align-items:center;
  padding:22px 22px;
  background:linear-gradient(180deg,#090c0a,#070a08);
  border:1px solid rgba(255,255,255,.075);
  border-right:0;
}
.feature-card:first-child{border-radius:8px 0 0 8px}
.feature-card:last-child{border-right:1px solid rgba(255,255,255,.075);border-radius:0 8px 8px 0}
.feature-icon{
  width:62px;height:62px;border:1px solid rgba(41,158,84,.55);
  border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 20px rgba(21,89,48,.12);
}
.feature-icon svg{
  width:40px;height:40px;fill:none;stroke:#d6aa50;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.feature-card h3{
  margin:0 0 9px;color:#d9b45d;font-weight:500;
  font-size:16px;text-transform:uppercase;letter-spacing:.05em;
}
.feature-card p{
  margin:2px 0;color:#a1a39e;font-size:14.5px;line-height:1.35;
}

.dashboard-row{
  display:grid;
  grid-template-columns:1fr 1.08fr 1.38fr;
  margin:16px 3.4vw 0;
  min-height:205px;
}
.dashboard-card{
  padding:26px 30px;
  background:linear-gradient(180deg,#080b09,#060806);
  border:1px solid rgba(255,255,255,.075);
  border-right:0;
}
.dashboard-card:first-child{border-radius:8px 0 0 8px}
.dashboard-card:last-child{border-right:1px solid rgba(255,255,255,.075);border-radius:0 8px 8px 0}
.dashboard-card h2{
  margin:0;color:#30b164;font-size:20px;font-weight:400;
  text-transform:uppercase;letter-spacing:.06em;
}
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:30px;
}
.stats>div{
  text-align:center;padding:0 13px;
  border-right:1px solid rgba(255,255,255,.08);
}
.stats>div:last-child{border-right:0}
.stats strong{
  display:block;color:#d1a650;font-size:43px;font-weight:500;line-height:1;
}
.stats span{
  display:block;margin-top:16px;color:#b0b1ac;
  font-size:13.5px;text-transform:uppercase;line-height:1.35;
}
.join-card{padding-left:42px;padding-right:42px}
.join-card h2{font-size:24px;color:#d0c77e}
.join-card p{color:#b4b6b0;line-height:1.55;font-size:16.5px;margin:12px 0 19px}
.join-button{width:100%;height:52px;font-size:14px}
.card-head{display:flex;justify-content:space-between;align-items:center}
.card-head a{font-size:13.5px;text-decoration:none;text-transform:uppercase;color:#41b76d;letter-spacing:.04em}
.news-item{
  display:grid;grid-template-columns:94px 1fr;gap:16px;align-items:center;
  text-decoration:none;margin-top:15px;
}
.news-item img{
  width:94px;height:58px;object-fit:cover;border:1px solid rgba(205,166,80,.18);
}
.news-item time{display:block;font-size:12.5px;color:#777b75;margin-bottom:4px}
.news-item strong{display:block;font-size:15.5px;color:#e3dfd5;font-weight:500;margin-bottom:4px}
.news-item span{display:block;font-size:13.5px;color:#858a83}

footer{
  min-height:68px;
  margin:0 3.4vw;
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:30px;align-items:center;
  border-top:1px solid rgba(205,166,80,.14);
  color:#9a9c96;
}
.footer-brand{display:flex;align-items:center;gap:20px}
.footer-brand img{width:78px;height:52px;object-fit:contain}
.footer-brand span,.footer-brand small{display:block;font-size:12.5px;line-height:1.6}
.socials{display:flex;gap:24px}
.socials a{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(205,166,80,.55);border-radius:50%;
  text-decoration:none;color:#d0aa55;font-size:15.5px;
}
.footer-nav{display:flex;justify-content:flex-end;gap:40px}

/* intro kept from approved v1.0 */
body.intro-active{overflow:hidden}
.site-shell{opacity:1;transition:opacity .85s ease}
.intro-active .site-shell{opacity:0}
.intro{
  position:fixed;inset:0;z-index:1000;overflow:hidden;background:#000;
  opacity:1;visibility:visible;transition:opacity .85s ease,visibility .85s ease;
}
.intro.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.intro-video{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center center;background:#000;
}
.intro-control{
  position:absolute;z-index:3;right:28px;bottom:max(22px,env(safe-area-inset-bottom));
  border:1px solid rgba(199,160,74,.42);background:rgba(0,0,0,.28);
  color:rgba(255,255,255,.75);font:600 9px Arial,sans-serif;
  letter-spacing:.2em;padding:12px 14px;cursor:pointer;backdrop-filter:blur(5px);
}
.intro-skip{opacity:0;pointer-events:none;transition:opacity .4s ease}
.intro-skip.ready{opacity:1;pointer-events:auto}

@media(max-width:1200px){
  .main-nav{gap:20px}
  .main-nav a{font-size:10px}
  .top-actions .btn{padding:0 16px;font-size:10px}
  .hero-left{min-width:560px}
  .hero-logo{width:450px}
}
@media(max-width:980px){
  .topbar{grid-template-columns:90px 1fr auto}
  .main-nav,.top-actions{display:none}
  .menu-button{display:block;justify-self:end}
  .hero{height:auto;min-height:720px}
  .hero-visual{inset:0;background-position:65% center}
  .hero-shade{background:linear-gradient(180deg,rgba(2,4,3,.25),#020403 55%,#020403)}
  .hero-left{width:100%;min-width:0;padding:330px 7vw 55px}
  .hero-logo{width:min(520px,78vw);height:auto;margin:0 auto 10px}
  .hero h1,.hero-lead{text-align:center}
  .hero-buttons{justify-content:center}
    .feature-grid{grid-template-columns:1fr 1fr}
  .feature-card{border-right:1px solid rgba(255,255,255,.075);border-radius:0!important}
  .dashboard-row{grid-template-columns:1fr}
  .dashboard-card{border-right:1px solid rgba(255,255,255,.075);border-radius:0!important}
  footer{grid-template-columns:1fr;text-align:center;padding:20px 0}
  .footer-brand,.socials,.footer-nav{justify-content:center}
}
@media(max-width:620px){
  .topbar{height:64px;padding:0 5vw}
  .brand-mark img{width:64px}
  .hero-left{padding:260px 6vw 42px}
  .hero h1{font-size:22px;letter-spacing:.11em}
  .hero-lead{font-size:14px}
  .hero-buttons{flex-direction:column;align-items:center}
  .hero-buttons .btn{width:100%;max-width:320px}
  .feature-grid{grid-template-columns:1fr;margin:0 4vw}
  .feature-card{grid-template-columns:74px 1fr}
  .dashboard-row{margin:14px 4vw 0}
  .stats strong{font-size:34px}
  .news-card{padding-left:20px;padding-right:20px}
  .footer-nav{gap:18px;flex-wrap:wrap}
  .intro-control{right:14px;bottom:14px}
}

/* v1.2 typography */
.main-nav a,
.footer-nav a,
.btn,
.feature-card h3,
.dashboard-card h2,
.hero h1,
.stats strong,
.stats span,
.card-head a,

.main-nav a,
.footer-nav a,
.btn{
  font-weight:600;
  letter-spacing:.045em;
}

.hero h1{
  font-weight:600;
  letter-spacing:.035em;
  text-transform:none;
}

.feature-card h3{
  font-weight:600;
  letter-spacing:.025em;
}

.dashboard-card h2{
  font-weight:500;
  letter-spacing:.035em;
}

/* v1.2 desktop one-screen composition */
@media (min-width:1201px) and (min-height:820px){
  html,body{min-height:100%;}

  .topbar{
    height:62px;
    padding:0 3.1vw;
  }

  .brand-mark{width:72px;height:52px}
  .brand-mark img{width:68px;height:48px}

  .hero{
    height:472px;
  }

  .hero-left{
    padding-top:10px;
    padding-left:5.8vw;
  }

  .hero-logo{
    width:455px;
    height:288px;
    margin-bottom:0;
  }

  .hero h1{
    font-size:27px;
    margin-bottom:10px;
  }

  .hero-lead{
    font-size:16.5px;
    line-height:1.38;
  }

  .hero-buttons{
    margin-top:16px;
  }

  .hero-buttons .btn{
    min-width:225px;
    min-height:39px;
  }

  .feature-grid{
    margin:0 3.1vw;
  }

  .feature-card{
    min-height:112px;
    padding:16px 18px;
    grid-template-columns:72px 1fr;
    gap:14px;
  }

  .feature-icon{
    width:56px;
    height:56px;
  }

  .feature-icon svg{
    width:35px;
    height:35px;
  }

  .feature-card h3{
    margin-bottom:6px;
    font-size:16.5px;
  }

  .feature-card p{
    font-size:13.5px;
    line-height:1.28;
  }

  .dashboard-row{
    min-height:180px;
    margin:12px 3.1vw 0;
  }

  .dashboard-card{
    padding:20px 24px;
  }

  .dashboard-card h2{
    font-size:18px;
  }

  .stats{
    margin-top:22px;
  }

  .stats strong{
    font-size:36px;
  }

  .stats span{
    margin-top:11px;
    font-size:12.5px;
  }

  .join-card{
    padding-left:30px;
    padding-right:30px;
  }

  .join-card h2{
    font-size:21px;
  }

  .join-card p{
    font-size:14.5px;
    line-height:1.45;
    margin:9px 0 14px;
  }

  .join-button{
    height:44px;
    min-height:44px;
    font-size:14.5px;
  }

  .news-item{
    margin-top:10px;
    grid-template-columns:82px 1fr;
    gap:13px;
  }

  .news-item img{
    width:82px;
    height:48px;
  }

  .news-item strong{font-size:12px}
  .news-item span{font-size:10px}
  .news-item time{font-size:9px}

  footer{
    min-height:56px;
    margin:0 3.1vw;
  }

  .footer-brand img{
    width:68px;
    height:45px;
  }

  .socials a{
    width:34px;
    height:34px;
  }

  .footer-nav{
    gap:30px;
  }
}

/* Slightly shorter browser viewport (common with Chrome UI visible) */
@media (min-width:1201px) and (min-height:700px) and (max-height:819px){
  .topbar{height:58px}
  .hero{height:400px}
  .hero-logo{width:390px;height:245px}
  .hero-left{padding-top:8px}
  .hero h1{font-size:24px;margin-bottom:8px}
  .hero-lead{font-size:15.5px;line-height:1.32}
  .hero-buttons{margin-top:12px}
  .hero-buttons .btn{min-height:36px}
  .feature-card{min-height:98px;padding:12px 16px}
  .dashboard-row{min-height:165px;margin-top:10px}
  .dashboard-card{padding:16px 22px}
  footer{min-height:50px}
}

@media (min-width:1400px) and (min-height:820px){
  .site-shell{
    min-height:100vh;
  }
}

/* v1.3 mobile adaptation */
@media(max-width:980px){
  body{background:#020403}
  .site-shell{min-height:100vh}

  .topbar{
    position:sticky;
    top:0;
    z-index:50;
    height:62px;
    grid-template-columns:auto 1fr auto;
    padding:0 18px;
    background:rgba(2,4,3,.96);
    backdrop-filter:blur(10px);
  }

  .brand-mark{
    width:62px;
    height:48px;
  }
  .brand-mark img{
    width:60px;
    height:46px;
  }

  .menu-button{
    display:block;
    justify-self:end;
    font-size:0;
    width:42px;
    height:42px;
    position:relative;
    border:1px solid rgba(199,154,57,.22);
  }
  .menu-button::before,
  .menu-button::after,
  .menu-button{
    color:#d4b05f;
  }
  .menu-button::before,
  .menu-button::after{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    height:1px;
    background:#d4b05f;
  }
  .menu-button::before{top:14px;box-shadow:0 6px 0 #d4b05f}
  .menu-button::after{top:26px}

  .main-nav{
    display:none;
    position:absolute;
    top:62px;
    left:0;
    right:0;
    padding:18px 20px 22px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(3,5,4,.985);
    border-top:1px solid rgba(199,154,57,.16);
    border-bottom:1px solid rgba(199,154,57,.2);
  }
  .main-nav.open{display:flex}
  .main-nav a{
    padding:13px 2px;
    font-size:15.5px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .main-nav a:last-child{border-bottom:0}

  .top-actions{
    display:none;
    position:absolute;
    top:430px;
    left:20px;
    right:20px;
    flex-direction:column;
    gap:10px;
    z-index:60;
  }

  .hero{
    min-height:740px;
    height:auto;
    display:flex;
    align-items:flex-end;
    border-bottom:1px solid rgba(199,154,57,.16);
  }

  .hero-visual{
    inset:0;
    background-position:67% center;
    filter:saturate(.9) contrast(1.05) brightness(.78);
  }

  .hero-shade{
    background:
      linear-gradient(180deg,rgba(1,3,2,.08) 0%,rgba(2,4,3,.18) 22%,rgba(2,4,3,.86) 62%,#020403 84%),
      linear-gradient(90deg,rgba(2,4,3,.35),rgba(2,4,3,.06) 68%,rgba(2,4,3,.18));
  }

  .hero-left{
    width:100%;
    min-width:0;
    padding:290px 22px 36px;
    text-align:left;
  }

  .hero-logo{
    width:min(88vw,480px);
    height:auto;
    margin:0 auto 18px;
    object-position:center;
  }

  .hero h1{
    font-size:27px;
    line-height:1.08;
    letter-spacing:.01em;
    margin:0 0 14px;
  }

  .hero-lead{
    font-size:16.5px;
    line-height:1.45;
    color:#c0c2bd;
  }

  .hero-buttons{
    flex-direction:column;
    gap:10px;
    margin-top:20px;
  }
  .hero-buttons .btn{
    width:100%;
    max-width:none;
    min-width:0;
    min-height:46px;
  }

  .feature-grid{
    grid-template-columns:1fr;
    margin:0;
    gap:0;
  }

  .feature-card{
    grid-template-columns:68px 1fr;
    min-height:112px;
    padding:18px 20px;
    border-left:0;
    border-right:0;
    border-top:0;
    border-bottom:1px solid rgba(255,255,255,.07);
    border-radius:0!important;
  }

  .feature-icon{
    width:54px;
    height:54px;
  }

  .feature-card h3{
    font-size:17px;
    margin-bottom:6px;
  }
  .feature-card p{
    font-size:14.5px;
    line-height:1.35;
  }

  .dashboard-row{
    grid-template-columns:1fr;
    margin:14px 0 0;
    min-height:0;
  }

  .dashboard-card{
    border-left:0;
    border-right:0;
    border-radius:0!important;
    padding:22px 20px;
  }

  .stats-card h2,
  .join-card h2,
  .news-card h2{
    font-size:21px;
  }

  .stats{
    margin-top:22px;
    gap:0;
  }

  .stats strong{font-size:36px}
  .stats span{font-size:10px}

  .join-card{
    padding-left:20px;
    padding-right:20px;
  }

  .join-card p{
    font-size:15.5px;
    line-height:1.5;
  }

  .join-button{
    min-height:48px;
    height:48px;
    font-size:15.5px;
  }

  .card-head{
    align-items:flex-start;
    gap:12px;
  }

  .card-head a{
    font-size:12.5px;
    margin-top:5px;
  }

  .news-item{
    grid-template-columns:92px 1fr;
    gap:13px;
  }

  .news-item img{
    width:92px;
    height:58px;
  }

  footer{
    margin:0;
    padding:24px 20px 30px;
    min-height:0;
    grid-template-columns:1fr;
    gap:20px;
    text-align:center;
  }

  .footer-brand{
    justify-content:center;
    flex-direction:column;
    gap:8px;
  }

  .footer-brand img{
    width:72px;
    height:50px;
  }

  .socials{
    justify-content:center;
    gap:18px;
  }

  .footer-nav{
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
  }

  .intro-video{
    object-fit:cover;
    object-position:center center;
  }
}

@media(max-width:620px){
  .hero{
    min-height:680px;
  }

  .hero-left{
    padding:245px 18px 30px;
  }

  .hero-logo{
    width:min(92vw,430px);
    margin-bottom:14px;
  }

  .hero h1{
    font-size:24px;
  }

  .hero-lead{
    font-size:15.5px;
  }

  .btn{
    font-size:13.5px;
    padding:0 18px;
  }

  .feature-card{
    grid-template-columns:60px 1fr;
    padding:16px 16px;
  }

  .feature-icon{
    width:48px;
    height:48px;
  }

  .feature-icon svg{
    width:31px;
    height:31px;
  }

  .stats strong{
    font-size:32px;
  }

  .stats span{
    font-size:11.5px;
  }

  .news-item{
    grid-template-columns:78px 1fr;
  }

  .news-item img{
    width:78px;
    height:52px;
  }

  .intro-control{
    right:12px;
    bottom:12px;
    padding:10px 12px;
    font-size:10.5px;
  }
}

@media(max-width:390px){
  .hero-left{
    padding-top:220px;
  }

  .hero h1{
    font-size:22px;
  }

  .stats{
    grid-template-columns:1fr 1fr 1fr;
  }

  .stats>div{
    padding:0 5px;
  }

  .stats strong{
    font-size:28px;
  }
}


/* v1.4 approved HOW TO PLAY page */
.main-nav a.active{color:var(--gold-bright)}
.how-page,.rules-page{background:#020403}
.how-main{background:radial-gradient(circle at 50% 10%,rgba(8,38,24,.12),transparent 34%),#020403;padding-bottom:12px}
.how-hero{height:160px;position:relative;overflow:hidden;border-bottom:1px solid rgba(199,154,57,.18)}
.how-hero-bg{position:absolute;inset:0;background-image:url("assets/hero-club.jpg");background-size:cover;background-position:center 55%;filter:brightness(.42) saturate(.8)}
.how-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,3,2,.42),rgba(1,3,2,.83) 34%,rgba(1,3,2,.82) 68%,rgba(1,3,2,.34)),linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.35))}
.how-title{position:relative;z-index:2;text-align:center;padding-top:19px}
.how-title h1,.section-title,.final-copy h2,.rules-card h2{font-family:"Bahnschrift","Segoe UI",Arial,sans-serif;color:#d9a943;font-weight:500;letter-spacing:.09em}
.how-title h1{font-size:43px;margin:0;letter-spacing:.12em}
.ornament{height:1px;width:420px;max-width:72vw;background:linear-gradient(90deg,transparent,#b48224 30%,#b48224 70%,transparent);margin:8px auto 13px;position:relative}.ornament:after{content:"◇";position:absolute;left:50%;top:-10px;transform:translateX(-50%);color:#d6a13a;background:#020403;padding:0 8px}
.how-title p{margin:0;color:#e0ddd5;font-size:16px;line-height:1.45}.how-title p span{color:#2f8251}
.game-flow{width:min(1160px,88vw);margin:0 auto 10px;min-height:190px;border:1px solid rgba(185,128,22,.6);border-radius:9px;background:linear-gradient(180deg,rgba(7,13,10,.96),rgba(3,8,6,.96));display:grid;grid-template-columns:1fr 70px 1fr 70px 1fr 70px 1fr;align-items:start;padding:13px 34px 42px;position:relative}
.flow-item{text-align:center}.flow-icon,.mechanic-icon{width:74px;height:74px;margin:0 auto 5px;border:1px solid #a87218;border-radius:50%;display:grid;place-items:center}.flow-icon svg,.mechanic-icon svg{width:43px;height:43px;fill:none;stroke:#e0a82d;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.flow-icon.crown{font-size:43px;color:#e0a82d}.flow-item h3{margin:0;color:#e0a82d;font-size:17px;font-weight:500}.flow-item p{margin:6px 0;color:#e4e0d8;font-size:14px}.flow-arrow{align-self:center;text-align:center;color:#347b50;font-size:42px;font-weight:200}.flow-note{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#d4d1ca;font-size:13px}
.section-title{text-align:center;font-size:20px;margin:8px 0 7px}.mechanics{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;width:min(1420px,92vw);margin:0 auto}.mechanic-card{min-height:215px;border:1px solid rgba(185,128,22,.58);border-radius:8px;background:linear-gradient(180deg,#080b09,#060806);text-align:center;padding:12px 12px 16px}.mechanic-icon{width:62px;height:62px;border-color:rgba(35,126,75,.58)}.mechanic-icon svg{width:38px;height:38px}.mechanic-card h3{color:#318052;font-size:16px;font-weight:500;line-height:1.4;margin:5px 0 12px}.mechanic-card p{color:#ddd9d1;font-size:15.5px;line-height:1.55;margin:0}
.final-rules-row{display:grid;grid-template-columns:290px minmax(460px,1fr) 400px;gap:16px;width:min(1420px,92vw);margin:12px auto 0;align-items:stretch}.final-copy{padding:0 4px}.final-copy h2{font-size:20px;text-align:center;margin:0 0 8px}.final-copy p{font-size:15.5px;line-height:1.65;color:#d7d3cb;margin:0}.final-timeline,.rules-card{border:1px solid rgba(185,128,22,.58);border-radius:8px;background:linear-gradient(180deg,#080b09,#060806)}.final-timeline{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;text-align:center;padding:12px 16px 48px;position:relative}.half strong{display:block;color:#dda529;font-size:22px;font-weight:500}.half span{font-size:14.5px;color:#d9d5cd}.reverse{color:#318052;font-size:21px}.reverse b{font-size:17px;font-weight:500}.reverse small{display:block;color:#d6d2ca;font-size:12.5px;margin-top:5px}.warning{position:absolute;bottom:9px;left:16px;right:16px;border-top:1px solid rgba(185,128,22,.32);padding-top:9px;color:#d7d3ca;font-size:13.5px;line-height:1.4}.rules-card{text-align:center;padding:11px 20px}.rules-card h2{font-size:20px;margin:0 0 8px}.rules-card p{font-size:14.5px;line-height:1.5;color:#d7d3ca;margin:0 0 10px}.rules-link{height:58px;border:1px solid #a67919;background:linear-gradient(180deg,rgba(13,74,42,.48),rgba(5,35,21,.54));display:flex;align-items:center;justify-content:center;gap:18px;text-decoration:none;border-radius:6px}.doc-icon{font-size:32px;color:#e0aa31}.rules-link b{display:block;font-size:16.5px;letter-spacing:.03em}.rules-link small{display:block;font-size:12.5px;margin-top:3px}
.rules-document{width:min(980px,92vw);margin:34px auto 60px}.back-how{display:inline-block;color:#d5a847;text-decoration:none;font-size:14.5px;letter-spacing:.08em;margin-bottom:24px}.rules-doc-head{text-align:center;border-bottom:1px solid rgba(199,154,57,.28);padding-bottom:20px;margin-bottom:25px}.rules-doc-head h1{color:#d9aa48;font-weight:500;letter-spacing:.06em}.rules-doc-head p{color:#999}.rule-section{padding:16px 20px;margin:12px 0;border:1px solid rgba(199,154,57,.18);background:#070a08;border-radius:6px}.rule-section h2,.rule-section h3{color:#d7aa4b;font-weight:500;margin:0 0 10px}.rule-section h2{font-size:20px}.rule-section h3{font-size:16px}.rule-section p{color:#d0cec7;line-height:1.7;font-size:16.5px;margin:0}
@media(max-width:1050px){.mechanics{grid-template-columns:repeat(2,1fr)}.mechanic-card:last-child{grid-column:1/-1}.final-rules-row{grid-template-columns:1fr}.final-copy{text-align:center}.game-flow{grid-template-columns:1fr 35px 1fr 35px 1fr 35px 1fr;padding-left:12px;padding-right:12px}.flow-arrow{font-size:28px}}
@media(max-width:620px){.how-hero{height:175px}.how-title h1{font-size:31px}.how-title p{font-size:15.5px;padding:0 18px}.game-flow{width:92vw;grid-template-columns:1fr 1fr;gap:14px;padding:15px 10px 54px}.flow-arrow{display:none}.flow-icon{width:58px;height:58px}.flow-icon svg{width:34px;height:34px}.flow-note{font-size:12.5px;padding:0 8px}.mechanics{grid-template-columns:1fr;width:92vw}.mechanic-card:last-child{grid-column:auto}.final-rules-row{width:92vw}.final-timeline{grid-template-columns:1fr;padding-bottom:64px;gap:12px}.rules-card{padding:16px 12px}.rules-document{margin-top:20px}.rule-section{padding:14px}.rule-section p{font-size:13px}.how-page footer,.rules-page footer{margin-top:18px}}

/* v1.5 — HOW TO PLAY palette harmonized with homepage */
.how-page .how-main{background:radial-gradient(circle at 50% 10%,rgba(8,28,19,.07),transparent 34%),#020403}
.how-page .how-title p span,
.how-page .flow-arrow,
.how-page .mechanic-card h3,
.how-page .reverse{color:#2f8251}
.how-page .mechanic-icon{border-color:rgba(35,126,75,.52)}
.how-page .mechanic-card,
.how-page .final-timeline,
.how-page .rules-card{background:linear-gradient(180deg,#080b09,#060806)}
.how-page .rules-link{background:linear-gradient(180deg,rgba(13,74,42,.42),rgba(5,35,21,.50));border-color:rgba(167,121,25,.72)}
.how-page .rules-link:hover{background:linear-gradient(180deg,rgba(16,82,47,.48),rgba(6,40,24,.54));box-shadow:0 0 18px rgba(26,135,76,.08)}

/* =========================================================
   v1.7 — HOW TO PLAY desktop: approved composition
   The main homepage remains the site's style reference.
   ========================================================= */
@media (min-width:1100px){
  .how-page{
    overflow:hidden;
    background:#020403;
  }

  .how-page .site-shell{
    height:100vh;
    min-height:100vh;
    display:grid;
    grid-template-rows:60px minmax(0,1fr) 54px;
    overflow:hidden;
    background:#020403;
  }

  .how-page .topbar{
    height:60px;
    min-height:60px;
    padding:0 2.8vw;
    grid-template-columns:90px 1fr auto;
    border-bottom:1px solid rgba(196,143,36,.35);
    background:#020403;
  }

  .how-page .brand-mark{width:75px;height:54px}
  .how-page .brand-mark img{width:74px;height:52px}
  .how-page .main-nav{gap:34px}
  .how-page .main-nav a{
    font-size:13.5px;
    letter-spacing:.035em;
    font-weight:600;
  }
  .how-page .main-nav a.active{color:#d7a52d}
  .how-page .top-actions{gap:14px}
  .how-page .top-actions .btn{
    min-height:40px;
    padding:0 24px;
    font-size:13.5px;
  }

  .how-page .how-main{
    min-height:0;
    height:100%;
    padding:0;
    overflow:hidden;
    display:grid;
    grid-template-rows:160px 198px 34px 246px minmax(180px,1fr);
    align-content:stretch;
    background:#020403;
  }

  /* Hero band */
  .how-page .how-hero{
    height:160px;
    min-height:160px;
    position:relative;
    overflow:hidden;
    border-bottom:0;
    background:#020403;
  }
  .how-page .how-hero-bg{display:none}
  .how-page .how-hero::before,
  .how-page .how-hero::after{
    content:"";
    position:absolute;
    top:0;bottom:0;
    width:31%;
    background-repeat:no-repeat;
    background-size:cover;
    opacity:.96;
    z-index:0;
  }
  .how-page .how-hero::before{
    left:0;
    background-image:url("assets/how-approved-left.jpg");
    background-position:left center;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 66%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 66%,transparent 100%);
  }
  .how-page .how-hero::after{
    right:0;
    background-image:url("assets/how-approved-right.jpg");
    background-position:right center;
    -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 66%,transparent 100%);
    mask-image:linear-gradient(270deg,#000 0%,#000 66%,transparent 100%);
  }
  .how-page .how-hero-shade{
    z-index:1;
    background:
      linear-gradient(90deg,rgba(2,4,3,.04) 0%,rgba(2,4,3,.18) 23%,#020403 39%,#020403 61%,rgba(2,4,3,.18) 77%,rgba(2,4,3,.04) 100%),
      linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.18));
  }
  .how-page .how-title{
    z-index:2;
    padding-top:21px;
  }
  .how-page .how-title h1{
    font-size:37px;
    line-height:1;
    letter-spacing:.13em;
    font-weight:500;
    margin:0;
  }
  .how-page .how-title .ornament{
    width:250px;
    margin:9px auto 9px;
  }
  .how-page .how-title p{
    font-size:16.5px;
    line-height:1.42;
    color:#d8d6cf;
  }
  .how-page .how-title p span{color:#4b9c59}

  /* Game flow */
  .how-page .game-flow{
    box-sizing:border-box;
    width:min(1185px,77vw);
    height:190px;
    min-height:190px;
    margin:0 auto 8px;
    align-self:center;
    grid-template-columns:1fr 72px 1fr 72px 1fr 72px 1fr;
    padding:12px 42px 43px;
    border:1px solid rgba(174,119,19,.62);
    border-radius:10px;
    background:linear-gradient(180deg,#08100c 0%,#040906 100%);
  }
  .how-page .flow-item{padding-top:0}
  .how-page .flow-icon{
    width:76px;height:76px;
    margin:0 auto 4px;
    border-color:rgba(184,132,31,.75);
  }
  .how-page .flow-icon svg{
    width:44px;height:44px;
    stroke:#d3a12e;
  }
  .how-page .flow-icon.crown svg{
    fill:none;
    stroke:#d3a12e;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .how-page .flow-item h3{
    font-size:16px;
    margin:2px 0 3px;
  }
  .how-page .flow-item p{
    font-size:15.5px;
    margin:0;
  }
  .how-page .flow-arrow{
    align-self:center;
    font-size:34px;
    color:#4d9d58;
    transform:translateY(-8px);
  }
  .how-page .flow-note{
    bottom:10px;
    font-size:13.5px;
    color:#d4d0c7;
  }

  .how-page .section-title{
    height:34px;
    line-height:34px;
    margin:0;
    font-size:18px;
    letter-spacing:.08em;
    align-self:center;
  }

  /* Mechanics cards */
  .how-page .mechanics{
    width:min(1425px,92vw);
    height:238px;
    min-height:238px;
    gap:14px;
    margin:0 auto;
    align-self:center;
  }
  .how-page .mechanic-card{
    height:238px;
    min-height:238px;
    padding:14px 14px 12px;
    border-radius:10px;
    border-color:rgba(174,119,19,.62);
    background:linear-gradient(180deg,#080d0a,#050806);
  }
  .how-page .mechanic-icon{
    width:66px;height:66px;
    margin:0 auto 5px;
    border-color:rgba(63,126,55,.8);
  }
  .how-page .mechanic-icon svg{
    width:38px;height:38px;
  }
  .how-page .mechanic-card h3{
    font-size:16px;
    line-height:1.38;
    margin:6px 0 12px;
    color:#5a9d42;
    font-weight:500;
  }
  .how-page .mechanic-card p{
    font-size:15.5px;
    line-height:1.58;
    color:#dedbd4;
  }

  /* Bottom row */
  .how-page .final-rules-row{
    width:min(1425px,92vw);
    height:100%;
    min-height:180px;
    max-height:none;
    margin:8px auto 0;
    display:grid;
    grid-template-columns:360px minmax(540px,1fr) 400px;
    gap:16px;
    align-items:stretch;
    align-self:stretch;
  }
  .how-page .final-copy{
    padding:0 10px 0 0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  .how-page .final-copy h2{
    text-align:center;
    font-size:20px;
    margin:0 0 9px;
    line-height:1.1;
  }
  .how-page .final-copy p{
    margin:0;
    font-size:15.5px;
    line-height:1.62;
    color:#d8d4cc;
  }

  .how-page .final-timeline,
  .how-page .rules-card{
    height:100%;
    min-height:180px;
    border-radius:10px;
    border-color:rgba(174,119,19,.62);
    background:linear-gradient(180deg,#080d0a,#050806);
  }
  .how-page .final-timeline{
    grid-template-columns:1fr 1.18fr 1fr;
    padding:16px 18px 58px;
  }
  .how-page .half strong{
    font-size:22px;
    color:#d3a12e;
  }
  .how-page .half span{
    font-size:14.5px;
  }
  .how-page .reverse{
    font-size:21px;
    color:#559c46;
  }
  .how-page .reverse b{
    font-size:18px;
  }
  .how-page .reverse small{
    font-size:12.5px;
    margin-top:4px;
  }
  .how-page .warning{
    left:18px;right:18px;bottom:10px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-top:1px solid rgba(174,119,19,.28);
    padding-top:8px;
    font-size:12.5px;
    line-height:1.42;
    color:#d6d2ca;
  }
  .how-page .warning-bell{
    color:#d3a12e;
    font-size:22px;
    line-height:1;
  }

  .how-page .rules-card{
    padding:12px 18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .how-page .rules-card h2{
    font-size:20px;
    margin:0 0 10px;
  }
  .how-page .rules-card p{
    font-size:14.5px;
    line-height:1.5;
    margin:0 0 12px;
  }
  .how-page .rules-link{
    height:58px;
    border-radius:6px;
    gap:18px;
    border-color:#a67919;
    background:linear-gradient(180deg,rgba(17,81,46,.62),rgba(5,37,21,.72));
  }
  .how-page .doc-icon{font-size:31px}
  .how-page .rules-link b{font-size:14px}
  .how-page .rules-link small{font-size:10px}

  /* Footer */
  .how-page footer{
    min-height:54px;
    height:54px;
    margin:0 2.8vw;
    padding:0;
  }
  .how-page .footer-brand{gap:14px}
  .how-page .footer-brand img{width:72px;height:48px}
  .how-page .footer-brand span,
  .how-page .footer-brand small{font-size:11.5px;line-height:1.45}
  .how-page .socials{gap:22px}
  .how-page .socials a{width:35px;height:35px;font-size:12px}
  .how-page .footer-nav{gap:38px}
  .how-page .footer-nav a{font-size:10px}
}

/* Fit slightly shorter desktop browser viewports without changing proportions much */
@media (min-width:1100px) and (max-height:930px){
  .how-page .site-shell{
    grid-template-rows:54px minmax(0,1fr) 48px;
  }
  .how-page .how-main{
    grid-template-rows:138px 174px 30px 214px minmax(160px,1fr);
  }
  .how-page .how-hero{height:138px;min-height:138px}
  .how-page .how-title{padding-top:14px}
  .how-page .how-title h1{font-size:34px}
  .how-page .game-flow{height:166px;min-height:166px;padding-top:8px}
  .how-page .flow-icon{width:66px;height:66px}
  .how-page .flow-icon svg{width:39px;height:39px}
  .how-page .mechanics{height:206px;min-height:206px}
  .how-page .mechanic-card{height:206px;min-height:206px;padding-top:10px}
  .how-page .mechanic-icon{width:56px;height:56px}
  .how-page .mechanic-card h3{font-size:16.5px;margin:4px 0 8px}
  .how-page .mechanic-card p{font-size:13.5px;line-height:1.48}
  .how-page .final-rules-row{grid-template-columns:330px minmax(500px,1fr) 370px;gap:14px}
  .how-page .final-copy h2,.how-page .rules-card h2{font-size:18px}
  .how-page .final-copy p{font-size:13.5px;line-height:1.52}
  .how-page .rules-card p{font-size:10px}
  .how-page .final-timeline,.how-page .rules-card{min-height:160px}
  .how-page footer{height:48px;min-height:48px}
}

/* =========================================================
   v1.8 — HOW TO PLAY: desktop proportions matched to approved mockup
   ========================================================= */
@media (min-width:1100px){
  .how-page .site-shell{
    height:100vh;
    min-height:100vh;
    grid-template-rows:6vh 88.5vh 5.5vh;
    overflow:hidden;
  }

  .how-page .topbar{
    height:6vh;
    min-height:6vh;
    padding:0 2.2vw;
  }

  .how-page .brand-mark{
    width:78px;
    height:5.2vh;
  }
  .how-page .brand-mark img{
    width:76px;
    height:5vh;
  }

  .how-page .main-nav{
    gap:2.35vw;
  }
  .how-page .main-nav a{
    font-size:14.5px;
  }

  .how-page .top-actions .btn{
    min-height:4.2vh;
    padding:0 1.6vw;
    font-size:13.5px;
  }

  .how-page .how-main{
    height:88.5vh;
    grid-template-rows:17vh 20vh 3.5vh 25.5vh 22.5vh;
    overflow:hidden;
  }

  .how-page .how-hero{
    height:17vh;
    min-height:17vh;
  }
  .how-page .how-hero::before,
  .how-page .how-hero::after{
    width:32%;
  }

  .how-page .how-title{
    padding-top:2.0vh;
  }
  .how-page .how-title h1{
    font-size:clamp(34px,2.5vw,44px);
  }
  .how-page .how-title p{
    font-size:clamp(16px,.95vw,19px);
  }

  .how-page .game-flow{
    width:77vw;
    max-width:none;
    height:19.1vh;
    min-height:19.1vh;
    margin:0 auto .9vh;
    padding:1.2vh 2.7vw 4.3vh;
  }
  .how-page .flow-icon{
    width:78px;
    height:78px;
  }
  .how-page .flow-icon svg{
    width:45px;
    height:45px;
  }
  .how-page .flow-item h3{
    font-size:17px;
  }
  .how-page .flow-item p{
    font-size:16.5px;
  }
  .how-page .flow-note{
    bottom:1vh;
    font-size:14.5px;
  }

  .how-page .section-title{
    height:3.5vh;
    line-height:3.5vh;
    font-size:19px;
  }

  .how-page .mechanics{
    width:92vw;
    max-width:none;
    height:24.9vh;
    min-height:24.9vh;
    gap:.95vw;
  }
  .how-page .mechanic-card{
    height:24.9vh;
    min-height:24.9vh;
    padding:1.25vh .9vw 1.2vh;
  }
  .how-page .mechanic-icon{
    width:68px;
    height:68px;
    margin-bottom:.5vh;
  }
  .how-page .mechanic-icon svg{
    width:40px;
    height:40px;
  }
  .how-page .mechanic-card h3{
    font-size:clamp(17px,1.05vw,20px);
    margin:.55vh 0 1.2vh;
  }
  .how-page .mechanic-card p{
    font-size:clamp(14px,.86vw,17px);
    line-height:1.55;
  }

  .how-page .final-rules-row{
    width:92vw;
    max-width:none;
    height:21.5vh;
    min-height:21.5vh;
    margin:.65vh auto 0;
    grid-template-columns:24.5% 1fr 27.5%;
    gap:1vw;
  }

  .how-page .final-copy h2{
    font-size:20px;
    margin:0 0 1.1vh;
  }
  .how-page .final-copy p{
    font-size:clamp(14px,.88vw,17px);
    line-height:1.55;
  }

  .how-page .final-timeline,
  .how-page .rules-card{
    min-height:21.5vh;
    height:21.5vh;
  }
  .how-page .final-timeline{
    padding:1.55vh 1.2vw 6.1vh;
  }
  .how-page .half strong{
    font-size:23px;
  }
  .how-page .half span{
    font-size:14.5px;
  }
  .how-page .reverse{
    font-size:21px;
  }
  .how-page .reverse b{
    font-size:18px;
  }
  .how-page .warning{
    bottom:1.0vh;
    font-size:13px;
  }

  .how-page .rules-card{
    padding:1.2vh 1.2vw;
  }
  .how-page .rules-card h2{
    font-size:20px;
    margin-bottom:1vh;
  }
  .how-page .rules-card p{
    font-size:14.5px;
    line-height:1.45;
    margin-bottom:1.2vh;
  }
  .how-page .rules-link{
    height:6.1vh;
  }

  .how-page footer{
    height:5.5vh;
    min-height:5.5vh;
    margin:0 2.2vw;
  }
  .how-page .footer-brand img{
    width:74px;
    height:4.8vh;
  }
  .how-page .socials a{
    width:36px;
    height:36px;
  }
}

/* Prevent the earlier short-screen compression rules from shrinking v1.8 */
@media (min-width:1100px) and (max-height:930px){
  .how-page .site-shell{
    grid-template-rows:6vh 88.5vh 5.5vh;
  }
  .how-page .how-main{
    grid-template-rows:17vh 20vh 3.5vh 25.5vh 22.5vh;
  }
  .how-page .how-hero{
    height:17vh;
    min-height:17vh;
  }
  .how-page .game-flow{
    height:19.1vh;
    min-height:19.1vh;
    padding:1.2vh 2.7vw 4.3vh;
  }
  .how-page .flow-icon{
    width:78px;
    height:78px;
  }
  .how-page .mechanics{
    height:24.9vh;
    min-height:24.9vh;
  }
  .how-page .mechanic-card{
    height:24.9vh;
    min-height:24.9vh;
  }
  .how-page .mechanic-icon{
    width:68px;
    height:68px;
  }
  .how-page .mechanic-card h3{
    font-size:clamp(17px,1.05vw,20px);
    margin:.55vh 0 1.2vh;
  }
  .how-page .mechanic-card p{
    font-size:clamp(14px,.86vw,17px);
    line-height:1.55;
  }
  .how-page .final-rules-row{
    width:92vw;
    max-width:none;
    height:21.5vh;
    min-height:21.5vh;
    grid-template-columns:24.5% 1fr 27.5%;
  }
  .how-page .final-timeline,
  .how-page .rules-card{
    height:21.5vh;
    min-height:21.5vh;
  }
  .how-page footer{
    height:5.5vh;
    min-height:5.5vh;
  }
}

/* =========================================================
   v2.0 — OFFICIAL RULES: wide editorial layout
   Main page remains the visual reference.
   ========================================================= */
.rules-page{
  background:
    radial-gradient(circle at 18% 12%,rgba(12,46,29,.08),transparent 27%),
    radial-gradient(circle at 82% 9%,rgba(119,80,15,.045),transparent 23%),
    #020403;
}
.rules-page .site-shell{min-height:100vh;background:transparent}

.rules-wide{
  width:min(1680px,94vw);
  margin:0 auto;
  padding:24px 0 38px;
}

.rules-hero{
  min-height:175px;
  display:grid;
  grid-template-columns:1fr 220px;
  align-items:center;
  gap:35px;
  padding:15px 34px 17px;
  border-top:1px solid rgba(199,154,57,.16);
  border-bottom:1px solid rgba(199,154,57,.28);
  background:
    linear-gradient(90deg,rgba(6,13,9,.78),rgba(2,4,3,.34)),
    radial-gradient(circle at 86% 50%,rgba(23,82,48,.13),transparent 34%);
}
.rules-hero-copy{max-width:1050px}
.rules-hero .back-how{
  display:inline-flex;
  margin:0 0 15px;
  color:#b98d32;
  font-size:13.5px;
  letter-spacing:.08em;
  text-decoration:none;
}
.rules-kicker{
  color:#3e8d58;
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  margin-bottom:7px;
}
.rules-hero h1{
  margin:0;
  color:#d6a33f;
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif;
  font-size:clamp(32px,2.45vw,46px);
  font-weight:500;
  letter-spacing:.035em;
}
.rules-hero h1 span{color:#a98d52;font-size:.72em}
.rules-edition{
  margin:11px 0 0;
  color:#8d928b;
  font-size:15.5px;
}
.rules-hero-mark{
  display:flex;
  justify-content:center;
  align-items:center;
}
.rules-hero-mark img{
  width:165px;
  height:120px;
  object-fit:contain;
  opacity:.82;
  filter:drop-shadow(0 15px 28px rgba(0,0,0,.45));
}

.rules-layout{
  display:grid;
  grid-template-columns:245px minmax(0,1fr);
  gap:24px;
  margin-top:22px;
  align-items:start;
}
.rules-toc{
  position:relative;
}
.rules-toc-inner{
  position:sticky;
  top:82px;
  padding:18px 15px 15px;
  border:1px solid rgba(199,154,57,.18);
  border-radius:7px;
  background:linear-gradient(180deg,#080b09,#050806);
}
.rules-toc-title{
  margin:0 0 10px 7px;
  color:#d2a34a;
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.rules-toc a{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:8px;
  align-items:center;
  padding:9px 7px;
  border-top:1px solid rgba(255,255,255,.045);
  color:#afb2ac;
  text-decoration:none;
  font-size:13.5px;
  line-height:1.2;
  transition:.18s ease;
}
.rules-toc a:first-of-type{border-top:0}
.rules-toc a:hover{color:#e1ddd4;background:rgba(19,70,42,.12)}
.rules-toc a b{
  color:#357d50;
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif;
  font-size:13.5px;
  font-weight:600;
}
.rules-content{min-width:0}

.rules-group{
  margin:0 0 20px;
}
.rules-group-title{
  display:flex;
  align-items:center;
  gap:13px;
  margin:0 0 9px;
  color:#d0a04a;
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif;
  font-size:18px;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.rules-group-title:after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(199,154,57,.38),transparent);
}
.rules-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.rules-page .rule-section{
  margin:0;
  padding:16px 18px 17px;
  border:1px solid rgba(199,154,57,.16);
  border-radius:7px;
  background:
    linear-gradient(180deg,rgba(8,12,9,.96),rgba(5,8,6,.97));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012);
}
.rules-page .rule-section h2,
.rules-page .rule-section h3{
  color:#d1a349;
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif;
  font-weight:500;
  letter-spacing:.012em;
}
.rules-page .rule-section h2{
  margin:0 0 9px;
  font-size:16px;
}
.rules-page .rule-section h3{font-size:14px}
.rules-page .rule-section p{
  margin:0;
  color:#cbc9c2;
  font-size:15px;
  line-height:1.58;
}

/* Give long sections more breathing room across both columns. */
.rules-page #base,
.rules-page #bug-cue,
.rules-page #rounds,
.rules-page #turn-order,
.rules-page #handicap,
.rules-page #negative-balance{
  grid-column:1 / -1;
}
.rules-page #turn-order p,
.rules-page #handicap p,
.rules-page #negative-balance p{
  columns:2;
  column-gap:34px;
}

/* Footer spacing for the long-form page */
.rules-page footer{
  width:min(1680px,94vw);
  margin:10px auto 0;
}

/* Tablet */
@media(max-width:1100px){
  .rules-wide{width:92vw}
  .rules-layout{grid-template-columns:1fr}
  .rules-toc{display:none}
  .rules-hero{grid-template-columns:1fr 150px}
  .rules-hero-mark img{width:125px}
  .rules-cards{grid-template-columns:1fr}
  .rules-page #base,
  .rules-page #bug-cue,
  .rules-page #rounds,
  .rules-page #turn-order,
  .rules-page #handicap,
  .rules-page #negative-balance{grid-column:auto}
  .rules-page #turn-order p,
  .rules-page #handicap p,
  .rules-page #negative-balance p{columns:1}
}

/* Mobile */
@media(max-width:620px){
  .rules-wide{
    width:100%;
    padding:0 0 25px;
  }
  .rules-hero{
    min-height:0;
    grid-template-columns:1fr;
    gap:4px;
    padding:20px 18px 19px;
  }
  .rules-hero-mark{display:none}
  .rules-hero h1{font-size:28px;line-height:1.08}
  .rules-kicker{font-size:10px}
  .rules-edition{font-size:11px}
  .rules-layout{margin-top:12px}
  .rules-content{padding:0 14px}
  .rules-group{margin-bottom:16px}
  .rules-group-title{font-size:15px}
  .rules-cards{gap:9px}
  .rules-page .rule-section{padding:14px}
  .rules-page .rule-section h2{font-size:15px}
  .rules-page .rule-section p{font-size:15px;line-height:1.55}
  .rules-page footer{width:100%;margin-top:4px}
}

/* =========================================================
   v2.1 — unified BUG background for internal pages
   Approved layout/content remains unchanged.
   ========================================================= */

/* Shared branded background. Kept deliberately dark so it behaves
   as texture/atmosphere rather than competing with page content. */
.how-page,
.rules-page{
  background-color:#020403;
  background-image:
    linear-gradient(rgba(1,5,3,.80),rgba(1,5,3,.86)),
    url("assets/bug-site-background.jpg");
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.how-page .site-shell,
.rules-page .site-shell{
  background:transparent;
}

/* HOW TO PLAY: preserve the approved hero side imagery and all cards,
   but allow the branded texture to live behind the content areas. */
.how-page .how-main{
  background:transparent;
}
.how-page .how-hero{
  background-color:rgba(2,4,3,.72);
}
.how-page .game-flow,
.how-page .mechanic-card,
.how-page .final-timeline,
.how-page .rules-card{
  background:
    linear-gradient(180deg,rgba(7,15,10,.94),rgba(3,8,5,.95));
  backdrop-filter:blur(1px);
}
.how-page .final-copy{
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}

/* RULES: remove the previous page-only radial background so the same
   BUG texture is visible here as on other internal pages. */
.rules-page{
  background-color:#020403;
}
.rules-page .rules-hero{
  background:
    linear-gradient(90deg,rgba(5,12,8,.91),rgba(2,5,3,.80)),
    radial-gradient(circle at 86% 50%,rgba(23,82,48,.10),transparent 34%);
}
.rules-page .rules-toc-inner,
.rules-page .rule-section{
  background:
    linear-gradient(180deg,rgba(7,12,8,.95),rgba(4,8,5,.96));
  backdrop-filter:blur(1px);
}

/* Mobile: fixed backgrounds can be expensive/jumpy on some browsers. */
@media(max-width:900px){
  .how-page,
  .rules-page{
    background-attachment:scroll;
    background-position:center top;
  }
}


/* =========================================================
   BUG LOGO GOVERNANCE v2.3
   Semantic roles only. These rules do NOT alter current visuals.
   When approved symbol/horizontal/light/mono assets are supplied,
   replace file sources by role without redesigning page layouts.
   ========================================================= */
.logo-role{
  object-fit:contain;
  object-position:center;
  transform:none;
  filter:none;
}
.logo-role-full{ /* full lockup: emblem + BILLIARD UNDERGROUND GAME */ }
.logo-role-header{ /* reserved target: approved horizontal logo */ }
.logo-role-symbol{ /* reserved target: approved symbol without decoding */ }
.logo-role-footer{ /* target depends on available width: horizontal or symbol */ }


/* =========================================================
   v2.4 — ABOUT BUG / manifesto page
   ========================================================= */
.about-page{
  background-color:#020403;
  background-image:
    linear-gradient(rgba(1,5,3,.76),rgba(1,5,3,.84)),
    url("assets/bug-site-background.jpg");
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.about-page .site-shell{background:transparent}

.about-main{
  width:min(1660px,94vw);
  margin:0 auto;
  padding:20px 0 30px;
}

.about-hero{
  position:relative;
  min-height:365px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  align-items:center;
  padding:30px 44px;
  border:1px solid rgba(212,175,55,.16);
  background:
    radial-gradient(circle at 77% 50%,rgba(30,107,77,.14),transparent 31%),
    linear-gradient(90deg,rgba(4,10,7,.97),rgba(3,7,5,.82));
}
.about-hero:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg,transparent 0 55%,rgba(212,175,55,.025) 56%,transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.008),transparent 35%);
}
.about-hero-copy{position:relative;z-index:2;max-width:920px}
.about-kicker,
.difference-kicker{
  color:var(--bug-light-green);
  font:600 12px "Manrope",sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:15px;
}
.about-hero h1{
  margin:0;
  color:var(--bug-light-gold);
  font:700 clamp(38px,3.3vw,64px)/.98 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.01em;
}
.about-hero h1 span{color:var(--bug-gold)}
.about-hero p{
  margin:25px 0 0;
  color:#d0d0cb;
  font-size:18px;
  line-height:1.55;
}
.about-hero p strong{color:#fff;font-weight:600}
.about-hero-logo{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.about-hero-logo img{
  width:min(430px,30vw);
  max-height:300px;
  object-fit:contain;
  filter:drop-shadow(0 22px 46px rgba(0,0,0,.55));
}

.about-manifesto{
  margin-top:14px;
  padding:32px 44px;
  border-left:1px solid rgba(212,175,55,.20);
  border-right:1px solid rgba(212,175,55,.10);
  background:rgba(3,7,5,.78);
}
.manifesto-copy{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1.4fr;
  gap:24px;
  align-items:center;
}
.manifesto-copy>p{
  margin:0;
  color:#c3c4bf;
  font-size:16.5px;
  line-height:1.55;
}
.manifesto-punch{
  padding-left:30px;
  border-left:1px solid rgba(212,175,55,.28);
  color:#d7d6cf;
  font:600 19px/1.35 "Manrope",sans-serif;
}
.manifesto-punch span{
  display:inline-block;
  margin-top:6px;
  color:var(--bug-gold);
  font:700 29px/1 "Cormorant Garamond",Georgia,serif;
}

.about-pillars{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin-top:14px;
}
.about-pillar{
  min-height:210px;
  position:relative;
  padding:28px 24px 24px;
  overflow:hidden;
  border:1px solid rgba(212,175,55,.15);
  background:linear-gradient(180deg,rgba(8,13,9,.94),rgba(4,8,5,.96));
  transition:.22s ease;
}
.about-pillar:hover{
  transform:translateY(-2px);
  border-color:rgba(212,175,55,.35);
  background:linear-gradient(180deg,rgba(11,20,14,.96),rgba(5,10,7,.98));
}
.pillar-index{
  position:absolute;
  right:16px;top:12px;
  color:rgba(212,175,55,.22);
  font:600 34px/1 "JetBrains Mono",monospace;
}
.about-pillar h2{
  margin:42px 0 12px;
  color:var(--bug-gold);
  font:700 27px/1 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.04em;
}
.about-pillar p{
  margin:0;
  color:#b8bab5;
  font-size:15.5px;
  line-height:1.55;
}

.about-difference{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:14px;
  margin-top:14px;
}
.difference-left,
.difference-right{
  min-height:250px;
  border:1px solid rgba(212,175,55,.15);
  background:rgba(5,9,6,.92);
}
.difference-left{
  padding:34px 38px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.difference-left h2{
  margin:0;
  color:#e2dfd6;
  font:700 clamp(28px,2.15vw,42px)/1.08 "Cormorant Garamond",Georgia,serif;
}
.difference-right{
  display:grid;
  grid-template-columns:repeat(3,1fr) 1.4fr;
  align-items:stretch;
}
.difference-line,
.difference-final{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px;
  border-left:1px solid rgba(255,255,255,.055);
}
.difference-line span{
  color:#838982;
  font-size:14.5px;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.difference-line strong{
  margin-top:8px;
  color:#dad9d2;
  font:700 25px/1 "Cormorant Garamond",Georgia,serif;
}
.difference-final{
  color:var(--bug-light-gold);
  font:700 28px/1.08 "Cormorant Garamond",Georgia,serif;
  background:linear-gradient(180deg,rgba(14,61,47,.20),rgba(6,37,28,.10));
}

.about-cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  margin-top:14px;
  padding:28px 34px;
  border:1px solid rgba(212,175,55,.18);
  background:linear-gradient(90deg,rgba(6,18,12,.95),rgba(4,8,6,.95));
}
.about-cta h2{
  margin:0;
  color:var(--bug-light-gold);
  font:700 29px/1.1 "Cormorant Garamond",Georgia,serif;
}
.about-cta p{
  margin:7px 0 0;
  color:#a9aca7;
  font-size:15.5px;
}
.about-cta-actions{display:flex;gap:12px}
.about-cta-actions .btn{min-width:210px}

.about-page footer{
  width:min(1660px,94vw);
  margin:0 auto;
}

/* Tablet */
@media(max-width:1100px){
  .about-page{background-attachment:scroll}
  .about-hero{grid-template-columns:1fr;padding:32px}
  .about-hero-logo{margin-top:24px}
  .about-hero-logo img{width:min(420px,70vw)}
  .manifesto-copy{grid-template-columns:1fr 1fr}
  .manifesto-punch{grid-column:1/-1;border-left:0;border-top:1px solid rgba(212,175,55,.2);padding:18px 0 0}
  .about-pillars{grid-template-columns:1fr 1fr}
  .about-pillar:last-child{grid-column:1/-1}
  .about-difference{grid-template-columns:1fr}
}

/* Mobile */
@media(max-width:620px){
  .about-main{width:100%;padding:0 0 18px}
  .about-hero{border-left:0;border-right:0;padding:28px 18px;min-height:0}
  .about-hero h1{font-size:39px}
  .about-hero p{font-size:15px}
  .about-hero-logo img{width:82vw}
  .about-manifesto{margin-top:0;padding:24px 18px;border-left:0;border-right:0}
  .manifesto-copy{grid-template-columns:1fr;gap:16px}
  .manifesto-punch{grid-column:auto}
  .about-pillars{grid-template-columns:1fr;margin:10px 12px 0}
  .about-pillar:last-child{grid-column:auto}
  .about-pillar{min-height:150px}
  .about-pillar h2{margin-top:25px}
  .about-difference{margin:10px 12px 0}
  .difference-left{padding:25px 22px;min-height:0}
  .difference-right{grid-template-columns:1fr 1fr}
  .difference-line,.difference-final{min-height:120px}
  .difference-final{grid-column:1/-1}
  .about-cta{margin:10px 12px 0;flex-direction:column;align-items:stretch;padding:24px 20px}
  .about-cta-actions{flex-direction:column}
  .about-cta-actions .btn{width:100%}
  .about-page footer{width:100%}
}


/* =========================================================
   v2.5 — ABOUT BUG rebuilt to match the approved site language
   ========================================================= */

.about-page{
  background-color:#020403;
  background-image:
    linear-gradient(rgba(1,5,3,.70),rgba(1,5,3,.78)),
    url("assets/bug-site-background.jpg");
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.about-page .site-shell{background:transparent}

.about-main-v2{
  width:min(1700px,94vw);
  margin:0 auto;
  padding:18px 0 24px;
}

.about-intro{
  min-height:330px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  align-items:center;
  gap:30px;
  padding:34px 44px;
  border:1px solid rgba(212,175,55,.18);
  background:
    linear-gradient(90deg,rgba(3,8,5,.95) 0%,rgba(3,8,5,.88) 55%,rgba(6,20,13,.80) 100%);
}
.about-intro:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 80% 50%,rgba(30,107,77,.15),transparent 32%),
    linear-gradient(120deg,transparent 0 55%,rgba(212,175,55,.028) 56%,transparent 60%);
}
.about-intro-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.006),transparent 33%);
}
.about-intro-copy{
  position:relative;
  z-index:2;
  max-width:930px;
}
.about-intro .about-kicker{
  margin:0 0 12px;
  color:var(--bug-light-green);
  font:600 12px "Manrope",sans-serif;
  letter-spacing:.19em;
  text-transform:uppercase;
}
.about-intro h1{
  margin:0;
  color:var(--bug-light-gold);
  font:700 clamp(44px,4vw,74px)/.98 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.018em;
}
.about-subline{
  margin:18px 0 0;
  color:#c9cbc6;
  font:500 16px/1.45 "Manrope",sans-serif;
}
.about-thesis{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(212,175,55,.20);
}
.about-thesis span,
.about-thesis strong{
  display:block;
}
.about-thesis span{
  color:#aeb2ac;
  font:500 15px/1.35 "Manrope",sans-serif;
}
.about-thesis strong{
  margin-top:5px;
  color:var(--bug-gold);
  font:700 27px/1.12 "Cormorant Garamond",Georgia,serif;
}
.about-intro-brand{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:center;
}
.about-intro-brand img{
  width:min(460px,31vw);
  max-height:275px;
  object-fit:contain;
  filter:none;
}

.about-core-statement{
  margin-top:12px;
  min-height:112px;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  align-items:center;
  border:1px solid rgba(212,175,55,.14);
  background:rgba(4,9,6,.90);
}
.core-statement-line,
.core-statement-accent{
  padding:25px 32px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:700;
  line-height:1;
}
.core-statement-line{
  color:#d8d6cf;
  font-size:clamp(27px,2.25vw,39px);
}
.core-statement-accent{
  border-left:1px solid rgba(212,175,55,.18);
  color:var(--bug-gold);
  font-size:clamp(30px,2.5vw,43px);
  text-align:center;
}

.about-pillars-v2{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin-top:12px;
}
.about-pillars-v2 .about-pillar{
  min-height:188px;
  position:relative;
  overflow:hidden;
  padding:24px 20px 22px;
  border:1px solid rgba(212,175,55,.16);
  background:linear-gradient(180deg,rgba(8,13,9,.94),rgba(4,8,5,.96));
  transition:.2s ease;
}
.about-pillars-v2 .about-pillar:hover{
  transform:translateY(-2px);
  border-color:rgba(212,175,55,.34);
}
.about-pillars-v2 .pillar-index{
  position:absolute;
  right:14px;
  top:10px;
  color:rgba(212,175,55,.20);
  font:600 30px/1 "JetBrains Mono",monospace;
}
.about-pillars-v2 .about-pillar h2{
  margin:42px 0 12px;
  color:var(--bug-gold);
  font:700 27px/1 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.035em;
}
.about-pillars-v2 .about-pillar p{
  margin:0;
  color:#b7bab5;
  font:500 13px/1.5 "Manrope",sans-serif;
}

.about-final-message{
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:center;
  margin-top:12px;
  min-height:190px;
  padding:26px 32px;
  border:1px solid rgba(212,175,55,.18);
  background:
    linear-gradient(90deg,rgba(5,12,8,.96),rgba(5,12,8,.90) 65%,rgba(9,30,19,.78));
}
.about-final-copy{
  min-width:0;
}
.about-final-copy .difference-kicker{
  margin-bottom:10px;
}
.about-final-lines{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  color:#c8cac5;
  font:600 18px/1.3 "Manrope",sans-serif;
}
.about-final-lines span{
  position:relative;
  padding-right:28px;
}
.about-final-lines span:not(:last-child):after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:1px;
  height:18px;
  transform:translateY(-50%);
  background:rgba(212,175,55,.22);
}
.about-final-punch{
  margin-top:14px;
  color:var(--bug-light-gold);
  font:700 clamp(36px,3.2vw,56px)/.95 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.02em;
}
.about-final-actions{
  display:flex;
  flex-direction:column;
  gap:11px;
}
.about-final-actions .btn{
  min-width:250px;
  min-height:48px;
}

.about-page footer{
  width:min(1700px,94vw);
  margin:0 auto;
}

@media(max-width:1100px){
  .about-page{background-attachment:scroll}
  .about-intro{
    grid-template-columns:1fr;
    padding:30px;
  }
  .about-intro-brand img{
    width:min(420px,70vw);
  }
  .about-core-statement{
    grid-template-columns:1fr;
  }
  .core-statement-accent{
    border-left:0;
    border-top:1px solid rgba(212,175,55,.18);
    text-align:left;
  }
  .about-pillars-v2{
    grid-template-columns:1fr 1fr;
  }
  .about-pillars-v2 .about-pillar:last-child{
    grid-column:1/-1;
  }
  .about-final-message{
    grid-template-columns:1fr;
  }
  .about-final-actions{
    flex-direction:row;
  }
}

@media(max-width:620px){
  .about-main-v2{
    width:100%;
    padding:0 0 16px;
  }
  .about-intro{
    min-height:0;
    border-left:0;
    border-right:0;
    padding:26px 18px;
  }
  .about-intro h1{
    font-size:42px;
  }
  .about-subline{
    font-size:16.5px;
  }
  .about-thesis strong{
    font-size:25px;
  }
  .about-intro-brand img{
    width:84vw;
  }
  .about-core-statement{
    margin-top:0;
    border-left:0;
    border-right:0;
  }
  .core-statement-line,
  .core-statement-accent{
    padding:21px 18px;
  }
  .about-pillars-v2{
    grid-template-columns:1fr;
    margin:10px 12px 0;
  }
  .about-pillars-v2 .about-pillar:last-child{
    grid-column:auto;
  }
  .about-pillars-v2 .about-pillar{
    min-height:140px;
  }
  .about-pillars-v2 .about-pillar h2{
    margin-top:25px;
  }
  .about-final-message{
    margin:10px 12px 0;
    padding:24px 20px;
  }
  .about-final-lines{
    display:grid;
    gap:7px;
  }
  .about-final-lines span{
    padding-right:0;
  }
  .about-final-lines span:after{
    display:none;
  }
  .about-final-actions{
    flex-direction:column;
  }
  .about-final-actions .btn{
    width:100%;
    min-width:0;
  }
  .about-page footer{
    width:100%;
  }
}


/* =========================================================
   v2.6 ABOUT BUG — premium editorial hierarchy
   ========================================================= */
.about-premium{
  width:min(1680px,94vw);
  margin:0 auto;
  padding:18px 0 22px;
}
.about-hero-premium{
  min-height:350px;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  align-items:center;
  gap:54px;
  padding:38px 44px;
  border:1px solid rgba(212,175,55,.18);
  background:
    radial-gradient(circle at 78% 45%,rgba(30,107,77,.12),transparent 30%),
    linear-gradient(90deg,rgba(3,8,5,.96),rgba(4,13,8,.90));
}
.about-hero-copy{max-width:920px}
.about-eyebrow{
  color:#23835e;
  font:700 11px/1.2 "Manrope",sans-serif;
  letter-spacing:.20em;
}
.about-hero-premium h1{
  margin:15px 0 0;
  color:#f6e6b3;
  font:700 clamp(48px,4.15vw,70px)/.94 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.018em;
}
.about-lead{
  margin:20px 0 0;
  color:#d1d2cd;
  font:500 15px/1.5 "Manrope",sans-serif;
}
.about-rule{
  width:min(760px,100%);
  height:1px;
  margin:22px 0 17px;
  background:linear-gradient(90deg,rgba(212,175,55,.45),rgba(212,175,55,.04));
}
.about-thesis-premium{margin:0}
.about-thesis-premium span,
.about-thesis-premium strong{display:block}
.about-thesis-premium span{
  color:#b9bcb6;
  font:500 15px/1.4 "Manrope",sans-serif;
}
.about-thesis-premium strong{
  margin-top:3px;
  color:#d4af37;
  font:700 25px/1.15 "Cormorant Garamond",Georgia,serif;
}
.about-hero-logo{
  display:flex;
  justify-content:center;
  align-items:center;
}
.about-hero-logo img{
  width:min(380px,28vw);
  max-height:260px;
  object-fit:contain;
}

.about-manifesto{
  min-height:94px;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  align-items:center;
  margin-top:12px;
  border:1px solid rgba(212,175,55,.16);
  background:rgba(3,8,5,.94);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(27px,2vw,35px);
  font-weight:600;
  line-height:1.05;
}
.about-manifesto div{
  padding:24px 32px;
  color:#e7e2d4;
}
.about-manifesto strong{
  align-self:stretch;
  display:flex;
  align-items:center;
  padding:24px 32px;
  border-left:1px solid rgba(212,175,55,.17);
  color:#d4af37;
  font-weight:700;
}

.about-principles{
  margin-top:12px;
  padding:22px 24px 24px;
  border:1px solid rgba(212,175,55,.14);
  background:linear-gradient(180deg,rgba(4,10,6,.94),rgba(3,7,5,.96));
}
.principles-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:30px;
  padding:0 2px 18px;
  border-bottom:1px solid rgba(212,175,55,.14);
}
.principles-head span{
  color:#d4af37;
  font:700 14px/1.2 "Manrope",sans-serif;
  letter-spacing:.10em;
}
.principles-head p{
  margin:0;
  color:#777d77;
  font:500 12px/1.4 "Manrope",sans-serif;
}
.principles-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
}
.principles-grid article{
  position:relative;
  min-height:145px;
  padding:24px 22px 14px;
}
.principles-grid article+article{
  border-left:1px solid rgba(212,175,55,.14);
}
.principles-grid .num{
  position:absolute;
  right:18px;
  top:17px;
  color:rgba(212,175,55,.22);
  font:600 21px/1 "JetBrains Mono",monospace;
}
.principles-grid h2{
  margin:24px 0 10px;
  color:#d4af37;
  font:700 22px/1.05 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.025em;
}
.principles-grid p{
  margin:0;
  max-width:230px;
  color:#b7bbb5;
  font:500 12.5px/1.48 "Manrope",sans-serif;
}

.about-difference{
  display:grid;
  grid-template-columns:1fr 265px;
  align-items:center;
  gap:36px;
  min-height:180px;
  margin-top:12px;
  padding:25px 32px;
  border:1px solid rgba(212,175,55,.17);
  background:
    radial-gradient(circle at 88% 50%,rgba(22,91,63,.16),transparent 26%),
    rgba(4,10,6,.95);
}
.difference-familiar{
  display:flex;
  align-items:center;
  gap:0;
  margin-top:13px;
  color:#d3d5d0;
  font:600 15px/1.3 "Manrope",sans-serif;
}
.difference-familiar span{
  padding:0 24px;
  border-right:1px solid rgba(212,175,55,.20);
}
.difference-familiar span:first-child{padding-left:0}
.difference-familiar span:last-child{border-right:0}
.about-difference h2{
  margin:13px 0 0;
  color:#f6e6b3;
  font:700 clamp(38px,3vw,50px)/.95 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.015em;
}
.difference-actions{
  display:grid;
  gap:10px;
}
.difference-actions .btn{
  min-height:47px;
  width:100%;
}

/* The five principle blocks are informational panels, never interactive controls. */
.principles-grid article{
  cursor:default;
  transform:none !important;
  box-shadow:none !important;
}

@media(max-width:1050px){
  .about-hero-premium{grid-template-columns:1fr;padding:30px}
  .about-hero-logo img{width:min(400px,70vw)}
  .about-manifesto{grid-template-columns:1fr}
  .about-manifesto strong{border-left:0;border-top:1px solid rgba(212,175,55,.17)}
  .principles-grid{grid-template-columns:1fr 1fr}
  .principles-grid article+article{border-left:0}
  .principles-grid article:nth-child(even){border-left:1px solid rgba(212,175,55,.14)}
  .principles-grid article:nth-child(n+3){border-top:1px solid rgba(212,175,55,.14)}
  .principles-grid article:last-child{grid-column:1/-1}
  .about-difference{grid-template-columns:1fr}
  .difference-actions{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .about-premium{width:100%;padding:0 0 14px}
  .about-hero-premium{padding:26px 18px;border-left:0;border-right:0}
  .about-hero-premium h1{font-size:43px}
  .about-manifesto{margin-top:0;border-left:0;border-right:0}
  .about-manifesto div,.about-manifesto strong{padding:20px 18px}
  .about-principles{margin:10px 12px 0;padding:20px 16px}
  .principles-head{display:block}
  .principles-head p{margin-top:8px}
  .principles-grid{grid-template-columns:1fr}
  .principles-grid article,
  .principles-grid article:nth-child(even),
  .principles-grid article:nth-child(n+3){border-left:0;border-top:1px solid rgba(212,175,55,.14)}
  .principles-grid article:first-child{border-top:0}
  .principles-grid article:last-child{grid-column:auto}
  .about-difference{margin:10px 12px 0;padding:24px 18px}
  .difference-familiar{display:grid;gap:6px}
  .difference-familiar span{padding:0;border:0}
  .difference-actions{grid-template-columns:1fr}
}

/* =========================================================
   v2.7 ABOUT BUG — approved editorial composition
   ========================================================= */
.about-v27{width:min(1740px,96vw);padding:14px 0 18px}
.about-hero-v27{position:relative;min-height:440px;display:grid;grid-template-columns:58% 42%;overflow:hidden;border:1px solid rgba(212,175,55,.18);background:linear-gradient(90deg,rgba(2,7,4,.98) 0%,rgba(3,12,7,.96) 54%,rgba(3,10,6,.82) 100%)}
.about-hero-copy-v27{position:relative;z-index:2;padding:44px 48px;display:flex;flex-direction:column;justify-content:center}
.about-v27 .about-eyebrow{margin-bottom:18px}
.about-pretitle{order:2;margin:18px 0 0;color:#e7e7e2;font:500 16px/1.5 "Manrope",Arial,sans-serif}
.about-hero-copy-v27 h1{order:3;margin:9px 0 0;color:#f6e6b3;font:700 clamp(50px,4.4vw,74px)/.92 "Cormorant Garamond",Georgia,serif;letter-spacing:.012em}
.about-hero-copy-v27 .about-eyebrow{order:1}
.about-rule-v27{order:4;width:min(760px,92%);height:1px;margin:24px 0 17px;background:linear-gradient(90deg,rgba(212,175,55,.55),rgba(212,175,55,.03))}
.about-thesis-v27{order:5;margin:0}.about-thesis-v27 span,.about-thesis-v27 strong{display:block}.about-thesis-v27 span{color:#c5c8c2;font:500 15px/1.45 "Manrope",Arial,sans-serif}.about-thesis-v27 strong{margin-top:4px;color:#d4af37;font:700 27px/1.1 "Cormorant Garamond",Georgia,serif}
.about-beetle-visual{position:absolute;z-index:1;right:-1px;top:-1px;bottom:-1px;width:48%;background-image:linear-gradient(90deg,#030b07 0%,rgba(3,11,7,.76) 10%,rgba(3,11,7,.20) 29%,rgba(3,11,7,0) 47%),linear-gradient(0deg,rgba(3,9,6,.72) 0%,transparent 20%,transparent 80%,rgba(3,9,6,.42) 100%),url("assets/bug-beetle-ball.jpg");background-size:cover;background-position:center 43%;filter:saturate(.80) brightness(.78) contrast(1.05)}
.about-manifesto-v27{min-height:92px;margin-top:12px;display:grid;grid-template-columns:1.28fr .72fr;align-items:center;border:1px solid rgba(212,175,55,.16);background:rgba(3,8,5,.95);font:600 clamp(28px,2.15vw,38px)/1.05 "Cormorant Garamond",Georgia,serif}.about-manifesto-v27 span,.about-manifesto-v27 strong{padding:24px 34px}.about-manifesto-v27 span{color:#e8e4d8}.about-manifesto-v27 strong{align-self:stretch;display:flex;align-items:center;border-left:1px solid rgba(212,175,55,.18);color:#d4af37}
.principles-grid-v27{display:grid;grid-template-columns:repeat(5,1fr);margin-top:12px;border:1px solid rgba(212,175,55,.15);background:linear-gradient(180deg,rgba(4,10,6,.95),rgba(3,7,5,.97))}.principles-grid-v27 article{position:relative;min-height:180px;padding:30px 25px 24px;cursor:default}.principles-grid-v27 article+article{border-left:1px solid rgba(212,175,55,.14)}.principles-grid-v27 .num{position:absolute;right:18px;top:17px;color:rgba(212,175,55,.18);font:600 22px/1 "JetBrains Mono",monospace}.principles-grid-v27 h2{margin:40px 0 12px;color:#d4af37;font:700 25px/1.05 "Cormorant Garamond",Georgia,serif;letter-spacing:.02em}.principles-grid-v27 p{margin:0;max-width:235px;color:#c0c3bd;font:500 13px/1.52 "Manrope",Arial,sans-serif}
.about-final-v27{display:grid;grid-template-columns:1fr 300px;align-items:center;gap:40px;min-height:185px;margin-top:12px;padding:28px 34px;border:1px solid rgba(212,175,55,.17);background:radial-gradient(circle at 90% 50%,rgba(22,91,63,.16),transparent 28%),rgba(4,10,6,.96)}.difference-familiar-v27{display:flex;align-items:center;color:#d3d5d0;font:600 16px/1.3 "Manrope",Arial,sans-serif}.difference-familiar-v27 span{padding:0 28px;border-right:1px solid rgba(212,175,55,.22)}.difference-familiar-v27 span:first-child{padding-left:0}.difference-familiar-v27 span:last-child{border-right:0}.about-final-copy-v27 h2{margin:17px 0 0;color:#f6e6b3;font:700 clamp(42px,3.3vw,58px)/.92 "Cormorant Garamond",Georgia,serif}.difference-actions-v27{display:grid;gap:10px}.difference-actions-v27 .btn{width:100%;min-height:49px}
@media(max-width:1050px){.about-hero-v27{grid-template-columns:1fr;min-height:600px}.about-hero-copy-v27{padding:34px 30px;justify-content:flex-start}.about-beetle-visual{top:auto;width:100%;height:54%;background-position:center 42%;opacity:.8}.about-manifesto-v27{grid-template-columns:1fr}.about-manifesto-v27 strong{border-left:0;border-top:1px solid rgba(212,175,55,.18)}.principles-grid-v27{grid-template-columns:1fr 1fr}.principles-grid-v27 article+article{border-left:0}.principles-grid-v27 article:nth-child(even){border-left:1px solid rgba(212,175,55,.14)}.principles-grid-v27 article:nth-child(n+3){border-top:1px solid rgba(212,175,55,.14)}.principles-grid-v27 article:last-child{grid-column:1/-1}.about-final-v27{grid-template-columns:1fr}.difference-actions-v27{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.about-v27{width:100%;padding:0 0 12px}.about-hero-v27{min-height:620px;border-left:0;border-right:0}.about-hero-copy-v27{padding:27px 18px}.about-hero-copy-v27 h1{font-size:44px}.about-pretitle{font-size:14px}.about-thesis-v27 strong{font-size:23px}.about-beetle-visual{height:47%}.about-manifesto-v27{margin-top:0;border-left:0;border-right:0}.about-manifesto-v27 span,.about-manifesto-v27 strong{padding:20px 18px}.principles-grid-v27{grid-template-columns:1fr;margin:10px 12px 0}.principles-grid-v27 article,.principles-grid-v27 article:nth-child(even),.principles-grid-v27 article:nth-child(n+3){border-left:0;border-top:1px solid rgba(212,175,55,.14)}.principles-grid-v27 article:first-child{border-top:0}.principles-grid-v27 article:last-child{grid-column:auto}.about-final-v27{margin:10px 12px 0;padding:24px 18px}.difference-familiar-v27{display:grid;gap:7px}.difference-familiar-v27 span{padding:0;border:0}.difference-actions-v27{grid-template-columns:1fr}}

/* =========================================================
   v2.8 ABOUT BUG — approved mockup match
   ========================================================= */
.about-page{
  background:
    linear-gradient(rgba(0,3,2,.52),rgba(0,3,2,.68)),
    url("assets/bug-site-background.jpg") center top/cover fixed no-repeat,
    #020403;
}
.about-match{
  width:min(100%,1680px);
  margin:0 auto;
}

/* HERO */
.about-match-hero{
  min-height:610px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:52% 48%;
  align-items:center;
  border-bottom:1px solid rgba(212,175,55,.20);
  background:
    radial-gradient(circle at 58% 45%,rgba(23,93,62,.14),transparent 30%),
    linear-gradient(90deg,#020705 0%,#03110c 47%,rgba(2,8,5,.70) 100%);
}
.about-match-copy{
  position:relative;
  z-index:3;
  padding:54px 36px 54px 54px;
  max-width:760px;
}
.about-match-kicker{
  margin-bottom:26px;
  color:#1e6b4d;
  font:600 14px/1 "Manrope",sans-serif;
  letter-spacing:.16em;
}
.about-match-intro{
  margin:0 0 22px;
  color:#f1f1ed;
  font:400 24px/1.55 "Cormorant Garamond",Georgia,serif;
}
.about-match h1{
  margin:0;
  color:#f6e6b3;
  font:700 clamp(64px,5.3vw,92px)/.91 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.01em;
}
.about-match-divider{
  width:420px;
  max-width:84%;
  height:1px;
  margin:30px 0 22px;
  background:linear-gradient(90deg,#d4af37 0%,rgba(212,175,55,.16) 100%);
}
.about-match-thesis{
  margin:0;
  color:#d8d6cf;
  font:500 20px/1.35 "Manrope",sans-serif;
}
.about-match-accent{
  display:block;
  margin-top:5px;
  color:#d4af37;
  font:700 33px/1.1 "Cormorant Garamond",Georgia,serif;
}

/* hero art: smoothly blended, no hard rectangle */
.about-match-art{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:54%;
  background:
    linear-gradient(90deg,#03110c 0%,rgba(3,17,12,.40) 18%,rgba(3,17,12,0) 46%),
    linear-gradient(180deg,rgba(2,7,5,.02) 0%,rgba(2,7,5,0) 60%,#020705 100%),
    url("assets/about-bug-beetle-blend.png") 68% 42%/82% auto no-repeat;
  filter:saturate(.92) contrast(1.02);
}

/* FIVE PILLARS — plain editorial columns, not buttons */
.about-match-pillars{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  min-height:355px;
  padding:28px 42px 30px;
  border-bottom:1px solid rgba(212,175,55,.20);
  background:rgba(2,8,5,.90);
}
.about-match-pillars article{
  position:relative;
  padding:8px 28px 20px;
  text-align:center;
}
.about-match-pillars article+article{
  border-left:1px solid rgba(212,175,55,.18);
}
.pillar-icon{
  width:74px;
  height:74px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(212,175,55,.45);
  border-radius:50%;
  color:#d4af37;
  font:400 34px/1 "Cinzel",serif;
}
.about-match-pillars h2{
  margin:0;
  color:#d4af37;
  font:700 31px/1 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.025em;
}
.pillar-rule{
  width:56px;
  height:1px;
  margin:17px auto 18px;
  background:linear-gradient(90deg,transparent,#d4af37,transparent);
}
.about-match-pillars p{
  margin:0;
  color:#deded8;
  font:400 19px/1.45 "Cormorant Garamond",Georgia,serif;
}

/* FINAL */
.about-match-final{
  min-height:410px;
  padding:48px 44px 34px;
  text-align:center;
  background:
    linear-gradient(rgba(2,8,5,.77),rgba(2,8,5,.86)),
    url("assets/bug-site-background.jpg") center 72%/cover no-repeat;
}
.familiar-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  color:#e5e2d7;
  font:500 18px/1.2 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.18em;
}
.familiar-row i{
  width:1px;
  height:25px;
  background:rgba(212,175,55,.42);
}
.about-match-final h2{
  margin:34px 0 18px;
  color:#f6e6b3;
  font:700 clamp(64px,5vw,92px)/.92 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.02em;
}
.final-ornament{
  width:180px;
  height:1px;
  margin:0 auto 28px;
  background:linear-gradient(90deg,transparent,#d4af37,transparent);
}
.final-actions{
  display:flex;
  justify-content:center;
  gap:28px;
}
.final-actions .btn{
  min-width:320px;
  min-height:58px;
  font-size:17px;
}
.final-actions .btn span{
  margin-left:18px;
}

.about-page footer{
  width:min(1680px,94vw);
  margin:0 auto;
}

/* tablet/mobile */
@media(max-width:1050px){
  .about-match-hero{
    min-height:720px;
    grid-template-columns:1fr;
  }
  .about-match-copy{
    padding:42px 26px 350px;
    max-width:none;
  }
  .about-match-art{
    width:100%;
    top:auto;
    height:390px;
    background:
      linear-gradient(180deg,#03110c 0%,rgba(3,17,12,.10) 30%,rgba(3,17,12,0) 60%,#020705 100%),
      url("assets/about-bug-beetle-blend.png") center 45%/78% auto no-repeat;
  }
  .about-match-pillars{
    grid-template-columns:1fr 1fr;
  }
  .about-match-pillars article+article{border-left:0}
  .about-match-pillars article:nth-child(even){border-left:1px solid rgba(212,175,55,.18)}
  .about-match-pillars article:nth-child(n+3){border-top:1px solid rgba(212,175,55,.18)}
  .about-match-pillars article:last-child{grid-column:1/-1}
}
@media(max-width:620px){
  .about-match-copy{padding:30px 18px 310px}
  .about-match-intro{font-size:20px}
  .about-match h1{font-size:50px}
  .about-match-thesis{font-size:16px}
  .about-match-accent{font-size:27px}
  .about-match-art{height:320px;background-size:95% auto}
  .about-match-pillars{
    grid-template-columns:1fr;
    padding:12px 16px;
  }
  .about-match-pillars article,
  .about-match-pillars article:nth-child(even),
  .about-match-pillars article:nth-child(n+3){
    border-left:0;
    border-top:1px solid rgba(212,175,55,.16);
    padding:24px 10px;
  }
  .about-match-pillars article:first-child{border-top:0}
  .about-match-pillars article:last-child{grid-column:auto}
  .familiar-row{
    display:grid;
    gap:8px;
  }
  .familiar-row i{display:none}
  .about-match-final{padding:34px 18px}
  .about-match-final h2{font-size:54px}
  .final-actions{flex-direction:column;gap:12px}
  .final-actions .btn{width:100%;min-width:0}
  .about-page footer{width:100%}
}


/* =========================================================
   v2.9 — ABOUT BUG RELEASE
   Built against the approved 1536×1024 reference.
   ========================================================= */
.about-page{
  background:#020403;
}
.about-page .site-shell{
  background:
    linear-gradient(rgba(1,5,3,.58),rgba(1,5,3,.70)),
    url("assets/bug-site-background.jpg") center top/cover fixed no-repeat;
}
.about-release{
  width:min(1500px,97vw);
  margin:0 auto;
  padding:8px 0 14px;
}

/* HERO */
.about-release-hero{
  position:relative;
  min-height:420px;
  display:grid;
  grid-template-columns:50% 50%;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(212,175,55,.34);
  background:
    linear-gradient(90deg,#020604 0%,#03100b 49%,#03100b 53%,rgba(2,8,5,.80) 100%);
}
.release-copy{
  position:relative;
  z-index:3;
  padding:34px 32px 34px 48px;
}
.release-kicker{
  margin-bottom:22px;
  color:#1e6b4d;
  font:700 13px/1 "Manrope",sans-serif;
  letter-spacing:.16em;
}
.release-intro{
  margin:0 0 20px;
  color:#f1f1ed;
  font:500 16px/1.45 "Manrope",sans-serif;
}
.about-release h1{
  margin:0;
  color:#f6e6b3;
  font:700 64px/.95 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.01em;
}
.release-divider{
  width:365px;
  max-width:78%;
  margin:20px 0 18px;
}
.release-divider span{
  display:block;
  height:1px;
  background:linear-gradient(90deg,#d4af37 0%,rgba(212,175,55,.08) 100%);
}
.release-thesis{
  margin:0;
  color:#d9d9d4;
  font:500 16px/1.35 "Manrope",sans-serif;
}
.release-accent{
  display:block;
  margin-top:4px;
  color:#d4af37;
  font:700 27px/1.1 "Cormorant Garamond",Georgia,serif;
}
.release-hero-art{
  position:absolute;
  inset:0 0 0 auto;
  width:57%;
  background:
    linear-gradient(90deg,#03100b 0%,rgba(3,16,11,.58) 18%,rgba(3,16,11,.08) 44%,rgba(3,16,11,0) 62%),
    linear-gradient(180deg,rgba(1,4,3,0) 0%,rgba(1,4,3,0) 78%,#020604 100%),
    url("assets/about-release-hero.jpg") center center/cover no-repeat;
  filter:saturate(.92) contrast(1.03);
}

/* MANIFESTO */
.release-manifesto{
  display:grid;
  grid-template-columns:60% 40%;
  min-height:76px;
  margin-top:6px;
  border:1px solid rgba(212,175,55,.32);
  background:rgba(2,7,5,.94);
}
.release-manifesto>div{
  display:flex;
  align-items:center;
  padding:0 34px;
  font:700 31px/1 "Cormorant Garamond",Georgia,serif;
}
.manifesto-left{
  color:#eee8da;
}
.manifesto-right{
  border-left:1px solid rgba(212,175,55,.25);
  color:#d4af37;
}

/* PILLARS */
.release-pillars{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  min-height:190px;
  margin-top:6px;
  border:1px solid rgba(212,175,55,.32);
  background:rgba(2,7,5,.94);
}
.release-pillars article{
  position:relative;
  display:grid;
  grid-template-columns:86px 1fr;
  grid-template-rows:auto auto 1fr;
  align-content:center;
  gap:0 12px;
  padding:18px 18px 15px;
}
.release-pillars article+article{
  border-left:1px solid rgba(212,175,55,.24);
}
.release-pillars img{
  grid-row:1/4;
  width:72px;
  height:72px;
  object-fit:contain;
  align-self:center;
  justify-self:center;
}
.release-num{
  position:absolute;
  right:14px;
  top:12px;
  color:rgba(212,175,55,.24);
  font:600 20px/1 "JetBrains Mono",monospace;
}
.release-pillars h2{
  margin:4px 0 8px;
  color:#d4af37;
  font:700 24px/1 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.02em;
}
.release-pillars p{
  margin:0;
  color:#e1e1dc;
  font:500 13px/1.55 "Manrope",sans-serif;
}

/* FINAL */
.release-final{
  min-height:125px;
  margin-top:6px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:30px;
  padding:20px 24px;
  border:1px solid rgba(212,175,55,.32);
  background:
    linear-gradient(90deg,rgba(2,7,5,.96),rgba(3,11,7,.92));
}
.release-familiar{
  display:flex;
  align-items:center;
  gap:20px;
  color:#f0eee6;
  font:500 17px/1 "Manrope",sans-serif;
}
.release-familiar i{
  width:1px;
  height:24px;
  background:rgba(212,175,55,.34);
}
.release-final h2{
  grid-column:1;
  margin:14px 0 0;
  color:#f6e6b3;
  font:700 48px/.92 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.02em;
}
.release-actions{
  grid-column:2;
  grid-row:1/3;
  display:flex;
  gap:14px;
}
.release-actions .btn{
  min-width:210px;
  min-height:46px;
  font-size:14.5px;
}

/* footer */
.about-page footer{
  width:min(1500px,97vw);
  margin:0 auto;
}

/* Desktop 1366–1600 widths: keep reference proportions */
@media(min-width:1200px) and (max-width:1600px){
  .about-release{
    width:97vw;
  }
  .about-release-hero{min-height:405px}
  .about-release h1{font-size:60px}
  .release-pillars article{grid-template-columns:76px 1fr;padding-left:14px;padding-right:14px}
  .release-pillars img{width:66px;height:66px}
  .release-pillars h2{font-size:22px}
  .release-final h2{font-size:44px}
}

/* Tablet */
@media(max-width:1050px){
  .about-release{width:100%;padding:0 0 14px}
  .about-release-hero{grid-template-columns:1fr;min-height:700px}
  .release-copy{padding:34px 24px 350px}
  .release-hero-art{width:100%;top:auto;height:360px;background-position:center}
  .release-manifesto{grid-template-columns:1fr}
  .manifesto-right{border-left:0;border-top:1px solid rgba(212,175,55,.25)}
  .release-pillars{grid-template-columns:1fr 1fr}
  .release-pillars article+article{border-left:0}
  .release-pillars article:nth-child(even){border-left:1px solid rgba(212,175,55,.24)}
  .release-pillars article:nth-child(n+3){border-top:1px solid rgba(212,175,55,.24)}
  .release-pillars article:last-child{grid-column:1/-1}
  .release-final{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .release-actions{grid-column:1;grid-row:3;margin-top:18px}
}

/* Mobile */
@media(max-width:620px){
  .release-copy{padding:26px 18px 310px}
  .release-intro{font-size:14px}
  .about-release h1{font-size:46px}
  .release-accent{font-size:24px}
  .release-hero-art{height:320px}
  .release-manifesto>div{padding:18px;font-size:26px}
  .release-pillars{grid-template-columns:1fr}
  .release-pillars article,
  .release-pillars article:nth-child(even),
  .release-pillars article:nth-child(n+3){
    border-left:0;
    border-top:1px solid rgba(212,175,55,.24);
  }
  .release-pillars article:first-child{border-top:0}
  .release-pillars article:last-child{grid-column:auto}
  .release-final{padding:20px 18px}
  .release-familiar{display:grid;gap:7px}
  .release-familiar i{display:none}
  .release-final h2{font-size:42px}
  .release-actions{flex-direction:column}
  .release-actions .btn{width:100%}
}


/* =========================================================
   v2.10 — final visual fixes for ABOUT BUG
   1) high-res seamless hero artwork
   2) clean TIME / CHARACTER icons
   3) stable pillar text alignment
   ========================================================= */

/* Replace screenshot crop with HQ composite made from the original beetle artwork. */
.release-hero-art{
  width:58% !important;
  background:
    linear-gradient(90deg,
      #03100b 0%,
      rgba(3,16,11,.92) 8%,
      rgba(3,16,11,.55) 18%,
      rgba(3,16,11,.16) 31%,
      rgba(3,16,11,0) 46%),
    linear-gradient(180deg,
      rgba(2,7,5,.05) 0%,
      rgba(2,7,5,0) 72%,
      #020604 100%),
    url("assets/about-release-hero-hq.png") center center/cover no-repeat !important;
  filter:none !important;
}

/* The pillar art is now isolated and must never show neighboring screenshot fragments. */
.release-pillars img{
  width:70px !important;
  height:70px !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:50%;
}

/* Make all five text blocks use exactly the same geometry. */
.release-pillars article{
  grid-template-columns:78px minmax(0,1fr) !important;
  grid-template-rows:34px 34px minmax(58px,auto) !important;
  align-items:start !important;
  overflow:hidden;
}
.release-pillars img{
  grid-column:1 !important;
  grid-row:1 / 4 !important;
  align-self:center !important;
  justify-self:center !important;
}
.release-pillars h2{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:end !important;
  white-space:nowrap;
  margin:0 0 6px !important;
}
.release-pillars p{
  grid-column:2 !important;
  grid-row:2 / 4 !important;
  align-self:start !important;
  margin:0 !important;
  max-width:175px;
  overflow:visible !important;
}
.release-num{
  z-index:3;
}

/* TIME and CHARACTER need a little more room on wide desktop. */
@media(min-width:1200px){
  .release-pillars article:nth-child(4),
  .release-pillars article:nth-child(5){
    padding-right:18px !important;
  }
  .release-pillars article:nth-child(4) p,
  .release-pillars article:nth-child(5) p{
    max-width:185px;
  }
}

/* Keep tablet/mobile layout intact. */
@media(max-width:1050px){
  .release-hero-art{
    width:100% !important;
    background:
      linear-gradient(180deg,#03100b 0%,rgba(3,16,11,.18) 18%,rgba(3,16,11,0) 48%,#020604 100%),
      url("assets/about-release-hero-hq.png") center center/cover no-repeat !important;
  }
}


/* =========================================================
   v2.11 — targeted layout fix
   fixes header overlap + cropped pillar icons only
   ========================================================= */

@media (min-width:1100px){
  .about-page .topbar{
    display:grid !important;
    grid-template-columns:88px minmax(0,1fr) auto !important;
    align-items:center !important;
    column-gap:18px !important;
    padding-left:34px !important;
    padding-right:34px !important;
    min-width:0 !important;
  }
  .about-page .main-nav{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:clamp(16px,1.55vw,30px) !important;
    min-width:0 !important;
  }
  .about-page .main-nav a{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    font-size:clamp(13px,.78vw,16px) !important;
  }
  .about-page .top-actions{
    display:flex !important;
    flex:0 0 auto !important;
    gap:14px !important;
    margin-left:8px !important;
    white-space:nowrap !important;
  }
  .about-page .top-actions .btn{
    flex:0 0 auto !important;
    min-width:0 !important;
    padding-left:22px !important;
    padding-right:22px !important;
    font-size:clamp(12px,.72vw,15px) !important;
  }
}

@media (min-width:1100px) and (max-width:1450px){
  .about-page .topbar{
    grid-template-columns:76px minmax(0,1fr) auto !important;
    column-gap:12px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .about-page .main-nav{ gap:13px !important; }
  .about-page .main-nav a{ font-size:13.5px !important; }
  .about-page .top-actions{ gap:9px !important; margin-left:0 !important; }
  .about-page .top-actions .btn{
    padding-left:14px !important;
    padding-right:14px !important;
    font-size:12.5px !important;
  }
}

@media (min-width:900px) and (max-width:1099px){
  .about-page .main-nav,
  .about-page .top-actions{
    display:none !important;
  }
  .about-page .menu-button{
    display:block !important;
    justify-self:end !important;
  }
}

.release-pillars{
  overflow:visible !important;
}
.release-pillars article{
  overflow:visible !important;
  grid-template-columns:92px minmax(0,1fr) !important;
  grid-template-rows:36px auto 1fr !important;
  min-width:0 !important;
  padding:18px 16px 16px !important;
}
.release-pillars img{
  display:block !important;
  width:80px !important;
  height:80px !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:0 !important;
  clip-path:none !important;
  mask:none !important;
  -webkit-mask:none !important;
  overflow:visible !important;
  grid-column:1 !important;
  grid-row:1 / 4 !important;
  align-self:center !important;
  justify-self:center !important;
}
.release-pillars h2{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:center !important;
  white-space:nowrap !important;
  margin:0 !important;
  line-height:1 !important;
}
.release-pillars p{
  grid-column:2 !important;
  grid-row:2 / 4 !important;
  align-self:start !important;
  margin:10px 0 0 !important;
  line-height:1.48 !important;
  max-width:180px !important;
  overflow:visible !important;
}
.release-pillars article:last-child{
  padding-right:24px !important;
}

@media (min-width:1100px) and (max-width:1500px){
  .release-pillars article{
    grid-template-columns:76px minmax(0,1fr) !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .release-pillars img{
    width:66px !important;
    height:66px !important;
  }
  .release-pillars h2{
    font-size:20px !important;
  }
  .release-pillars p{
    font-size:14.5px !important;
    max-width:150px !important;
  }
}

@media (max-width:1050px){
  .release-pillars article{
    grid-template-columns:84px minmax(0,1fr) !important;
  }
  .release-pillars img{
    width:72px !important;
    height:72px !important;
  }
}


/* =========================================================
   v2.12 — ACTUAL screenshot defects fix
   ========================================================= */

/* Desktop header: fixed non-overlapping zones */
@media (min-width:1100px){
  .about-page .topbar{
    display:grid !important;
    grid-template-columns:90px minmax(720px,1fr) 390px !important;
    gap:12px !important;
    padding:0 38px !important;
    box-sizing:border-box !important;
  }
  .about-page .main-nav{
    display:grid !important;
    grid-template-columns:repeat(8,max-content) !important;
    justify-content:center !important;
    align-items:center !important;
    gap:clamp(14px,1.35vw,27px) !important;
    min-width:0 !important;
  }
  .about-page .main-nav a{
    font-size:clamp(12px,.68vw,14px) !important;
    letter-spacing:.035em !important;
    white-space:nowrap !important;
  }
  .about-page .top-actions{
    width:390px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    margin:0 !important;
  }
  .about-page .top-actions .btn{
    width:100% !important;
    padding:0 12px !important;
    box-sizing:border-box !important;
    font-size:13.5px !important;
    letter-spacing:.035em !important;
  }
}
@media (min-width:1100px) and (max-width:1500px){
  .about-page .topbar{
    grid-template-columns:76px minmax(650px,1fr) 330px !important;
    padding:0 20px !important;
    gap:8px !important;
  }
  .about-page .main-nav{gap:12px !important}
  .about-page .main-nav a{font-size:10px !important}
  .about-page .top-actions{width:330px !important;gap:8px !important}
  .about-page .top-actions .btn{font-size:11.5px !important;padding:0 8px !important}
}

/* Genuine complete vector icons — no source-image cropping */
.release-pillars .pillar-icon{
  grid-column:1 !important;
  grid-row:1 / 4 !important;
  width:78px !important;
  height:78px !important;
  align-self:center !important;
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
.release-pillars .pillar-icon svg{
  display:block !important;
  width:78px !important;
  height:78px !important;
  overflow:visible !important;
  fill:none !important;
  stroke:#d4a52e !important;
  stroke-width:2.2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  filter:drop-shadow(0 0 5px rgba(212,165,46,.16));
}
.release-pillars article{
  grid-template-columns:92px minmax(0,1fr) !important;
  overflow:hidden !important;
}
.release-pillars h2{
  padding-right:26px !important;
}
.release-pillars p{
  max-width:none !important;
  padding-right:14px !important;
}
@media (min-width:1100px) and (max-width:1500px){
  .release-pillars .pillar-icon,
  .release-pillars .pillar-icon svg{
    width:66px !important;
    height:66px !important;
  }
  .release-pillars article{
    grid-template-columns:76px minmax(0,1fr) !important;
  }
}


/* =========================================================
   v2.13 — GLOBAL LAYOUT STABILITY
   Fixes real screenshots:
   - header collisions on ALL pages
   - HOW TO PLAY vertical text overlap
   - preserves full vector icons on ABOUT BUG
   ========================================================= */

/* ---------- GLOBAL DESKTOP HEADER ---------- */
@media (min-width:1200px){
  .topbar{
    display:grid !important;
    grid-template-columns:92px minmax(0,1fr) 440px !important;
    align-items:center !important;
    column-gap:14px !important;
    box-sizing:border-box !important;
    padding-left:38px !important;
    padding-right:38px !important;
  }

  .main-nav{
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    gap:clamp(16px,1.35vw,28px) !important;
    overflow:visible !important;
  }

  .main-nav a{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    font-size:clamp(12px,.70vw,15px) !important;
    letter-spacing:.025em !important;
  }

  .top-actions{
    width:440px !important;
    min-width:440px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 !important;
  }

  .top-actions .btn{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    padding-left:12px !important;
    padding-right:12px !important;
    white-space:nowrap !important;
    font-size:clamp(12px,.68vw,14px) !important;
  }
}

/* Compact desktop before any collision is possible */
@media (min-width:1200px) and (max-width:1550px){
  .topbar{
    grid-template-columns:78px minmax(0,1fr) 350px !important;
    column-gap:8px !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .main-nav{gap:11px !important}
  .main-nav a{font-size:9.5px !important}
  .top-actions{
    width:350px !important;
    min-width:350px !important;
    gap:8px !important;
  }
  .top-actions .btn{
    font-size:11.5px !important;
    padding-left:7px !important;
    padding-right:7px !important;
  }
}

/* On truly narrow desktop/tablet: use menu instead of squeezing text */
@media (min-width:900px) and (max-width:1199px){
  .topbar{
    grid-template-columns:90px 1fr 52px !important;
    padding-left:24px !important;
    padding-right:24px !important;
  }
  .main-nav,
  .top-actions{
    display:none !important;
  }
  .menu-button{
    display:block !important;
    justify-self:end !important;
  }
}

/* ---------- HOW TO PLAY: EXACT NON-OVERLAPPING DESKTOP FIT ---------- */
@media (min-width:1100px){
  .how-page{
    overflow:hidden !important;
  }

  .how-page .site-shell{
    height:100vh !important;
    min-height:100vh !important;
    display:grid !important;
    grid-template-rows:56px minmax(0,1fr) 46px !important;
    overflow:hidden !important;
  }

  .how-page .how-main{
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-rows:132px 160px 30px 216px minmax(174px,1fr) !important;
    align-content:stretch !important;
    padding:0 !important;
  }

  .how-page .how-hero{
    height:132px !important;
    min-height:132px !important;
  }

  .how-page .how-title{
    padding-top:12px !important;
  }

  .how-page .how-title h1{
    margin:0 !important;
    font-size:34px !important;
    line-height:1 !important;
  }

  .how-page .how-title .ornament{
    margin:7px auto 6px !important;
  }

  .how-page .how-title p{
    margin:0 !important;
    font-size:15.5px !important;
    line-height:1.35 !important;
  }

  .how-page .game-flow{
    align-self:center !important;
    width:min(1240px,82vw) !important;
    height:152px !important;
    min-height:152px !important;
    margin:0 auto !important;
    padding:10px 30px 35px !important;
    box-sizing:border-box !important;
  }

  .how-page .flow-icon{
    width:64px !important;
    height:64px !important;
    margin-bottom:2px !important;
  }

  .how-page .flow-icon svg{
    width:37px !important;
    height:37px !important;
  }

  .how-page .flow-item h3{
    margin:2px 0 2px !important;
    font-size:16.5px !important;
    line-height:1.1 !important;
  }

  .how-page .flow-item p{
    margin:0 !important;
    font-size:13.5px !important;
    line-height:1.2 !important;
  }

  .how-page .flow-note{
    bottom:7px !important;
    font-size:12.5px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }

  .how-page .section-title{
    height:30px !important;
    line-height:30px !important;
    margin:0 !important;
    font-size:17px !important;
  }

  .how-page .mechanics{
    align-self:center !important;
    width:min(1600px,94vw) !important;
    height:208px !important;
    min-height:208px !important;
    margin:0 auto !important;
    gap:10px !important;
  }

  .how-page .mechanic-card{
    height:208px !important;
    min-height:208px !important;
    box-sizing:border-box !important;
    padding:9px 10px 10px !important;
    overflow:hidden !important;
  }

  .how-page .mechanic-icon{
    width:54px !important;
    height:54px !important;
    margin-bottom:2px !important;
  }

  .how-page .mechanic-icon svg{
    width:32px !important;
    height:32px !important;
  }

  .how-page .mechanic-card h3{
    margin:4px 0 7px !important;
    font-size:15.5px !important;
    line-height:1.28 !important;
  }

  .how-page .mechanic-card p{
    margin:0 !important;
    font-size:13px !important;
    line-height:1.42 !important;
  }

  .how-page .final-rules-row{
    align-self:stretch !important;
    width:min(1600px,94vw) !important;
    min-height:168px !important;
    height:calc(100% - 6px) !important;
    max-height:none !important;
    margin:6px auto 0 !important;
    grid-template-columns:330px minmax(500px,1fr) 390px !important;
    gap:12px !important;
    overflow:hidden !important;
  }

  .how-page .final-copy{
    overflow:hidden !important;
  }

  .how-page .final-copy h2,
  .how-page .rules-card h2{
    margin:0 0 5px !important;
    font-size:17px !important;
    line-height:1.1 !important;
  }

  .how-page .final-copy p{
    margin:0 !important;
    font-size:13px !important;
    line-height:1.46 !important;
  }

  .how-page .final-timeline,
  .how-page .rules-card{
    height:100% !important;
    min-height:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .how-page .final-timeline{
    padding:8px 12px 43px !important;
  }

  .how-page .half strong{
    font-size:19px !important;
  }

  .how-page .half span{
    font-size:12px !important;
  }

  .how-page .reverse{
    font-size:18px !important;
  }

  .how-page .reverse b{
    font-size:16.5px !important;
  }

  .how-page .reverse small{
    font-size:10.5px !important;
  }

  .how-page .warning{
    bottom:5px !important;
    left:12px !important;
    right:12px !important;
    padding-top:5px !important;
    font-size:10.5px !important;
    line-height:1.2 !important;
  }

  .how-page .rules-card{
    padding:8px 14px !important;
  }

  .how-page .rules-card p{
    margin:0 0 6px !important;
    font-size:11.5px !important;
    line-height:1.3 !important;
  }

  .how-page .rules-link{
    height:45px !important;
  }

  .how-page footer{
    height:46px !important;
    min-height:46px !important;
    margin-top:0 !important;
  }
}

/* Very short desktop browser viewports */
@media (min-width:1100px) and (max-height:780px){
  .how-page .site-shell{
    grid-template-rows:52px minmax(0,1fr) 42px !important;
  }
  .how-page .how-main{
    grid-template-rows:112px 142px 26px 186px minmax(150px,1fr) !important;
  }
  .how-page .how-hero{height:112px !important;min-height:112px !important}
  .how-page .how-title h1{font-size:30px !important}
  .how-page .game-flow{height:136px !important;min-height:136px !important}
  .how-page .flow-icon{width:55px !important;height:55px !important}
  .how-page .mechanics{height:180px !important;min-height:180px !important}
  .how-page .mechanic-card{height:180px !important;min-height:180px !important}
  .how-page .mechanic-icon{width:46px !important;height:46px !important}
  .how-page .mechanic-card h3{font-size:11.5px !important}
  .how-page .mechanic-card p{font-size:9px !important}
  .how-page .final-rules-row{
    min-height:145px !important;
    grid-template-columns:300px minmax(450px,1fr) 350px !important;
  }
}

/* ---------- ABOUT BUG ICONS: keep v2.12 vectors fully visible ---------- */
.release-pillars .pillar-icon,
.release-pillars .pillar-icon svg{
  overflow:visible !important;
}
.release-pillars .pillar-icon{
  width:76px !important;
  height:76px !important;
}
.release-pillars .pillar-icon svg{
  width:76px !important;
  height:76px !important;
}


/* =========================================================
   v2.14 — SITE-WIDE RESPONSIVE SYSTEM
   Automatic adaptation to viewport size/aspect ratio.
   ========================================================= */

:root{
  --site-gutter: clamp(14px, 2.4vw, 46px);
  --content-max: 1680px;
  --header-h: clamp(54px, 5.5vw, 72px);
}

/* Global fluid sizing */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  min-width:320px;
  overflow-x:hidden;
}
img,svg,video{
  max-width:100%;
}
.site-shell{
  width:100%;
  min-width:0;
}
main{
  min-width:0;
}

/* ---------- HEADER: automatic fit without collisions ---------- */
.topbar{
  min-height:var(--header-h);
  height:auto !important;
  padding-left:var(--site-gutter) !important;
  padding-right:var(--site-gutter) !important;
  box-sizing:border-box;
}
.brand-mark{
  min-width:0;
}
.brand-mark img{
  max-height:calc(var(--header-h) - 10px);
  width:auto;
}
.main-nav{
  min-width:0;
}
.main-nav a{
  white-space:nowrap;
}
.top-actions{
  min-width:0;
}
.top-actions .btn{
  white-space:nowrap;
}

/* Desktop wide */
@media (min-width:1500px){
  .topbar{
    display:grid !important;
    grid-template-columns:90px minmax(0,1fr) minmax(390px,430px) !important;
    column-gap:18px !important;
  }
  .main-nav{
    display:flex !important;
    justify-content:center !important;
    gap:clamp(18px,1.45vw,30px) !important;
  }
  .main-nav a{
    font-size:clamp(13px,.72vw,15px) !important;
  }
  .top-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    width:auto !important;
    min-width:0 !important;
  }
}

/* Standard desktop */
@media (min-width:1280px) and (max-width:1499px){
  .topbar{
    display:grid !important;
    grid-template-columns:78px minmax(0,1fr) 340px !important;
    column-gap:10px !important;
  }
  .main-nav{
    display:flex !important;
    justify-content:center !important;
    gap:clamp(10px,1vw,16px) !important;
  }
  .main-nav a{
    font-size:12.5px !important;
  }
  .top-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    width:auto !important;
    min-width:0 !important;
  }
  .top-actions .btn{
    font-size:11.5px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
}

/* Compact desktop / landscape tablet: collapse nav before overlap */
@media (max-width:1279px){
  .topbar{
    display:grid !important;
    grid-template-columns:74px 1fr 46px !important;
    align-items:center !important;
    column-gap:12px !important;
  }
  .main-nav,
  .top-actions{
    display:none !important;
  }
  .menu-button{
    display:block !important;
    justify-self:end !important;
  }
}

/* ---------- HOME ---------- */
.hero{
  min-width:0;
}
.hero-inner,
.hero-content,
.hero-copy{
  min-width:0;
}
.hero h1{
  font-size:clamp(30px,4vw,68px);
}
.hero p{
  font-size:clamp(13px,1.15vw,19px);
}

/* ---------- ABOUT BUG ---------- */
.about-release{
  width:min(var(--content-max), calc(100vw - 2 * var(--site-gutter))) !important;
}
.about-release-hero{
  min-height:clamp(360px,43vw,610px) !important;
}
.release-copy{
  padding:
    clamp(24px,3vw,54px)
    clamp(20px,2.5vw,40px)
    clamp(24px,3vw,54px)
    clamp(24px,3.2vw,58px) !important;
}
.about-release h1{
  font-size:clamp(42px,4.35vw,76px) !important;
}
.release-intro{
  font-size:clamp(15px,1vw,19px) !important;
}
.release-thesis{
  font-size:clamp(15px,1vw,19px) !important;
}
.release-accent{
  font-size:clamp(23px,2vw,32px) !important;
}

.release-manifesto > div{
  font-size:clamp(24px,2vw,34px) !important;
}

/* Flexible five-column layout */
.release-pillars{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}
.release-pillars article{
  min-width:0 !important;
  grid-template-columns:clamp(58px,5.2vw,88px) minmax(0,1fr) !important;
  padding:clamp(12px,1.2vw,18px) !important;
}
.release-pillars .pillar-icon,
.release-pillars .pillar-icon svg{
  width:clamp(56px,4.8vw,78px) !important;
  height:clamp(56px,4.8vw,78px) !important;
}
.release-pillars h2{
  font-size:clamp(17px,1.45vw,24px) !important;
  padding-right:clamp(6px,1vw,20px) !important;
}
.release-pillars p{
  font-size:clamp(13px,.9vw,16px) !important;
  padding-right:clamp(4px,.7vw,12px) !important;
}
.release-num{
  font-size:clamp(15px,1.25vw,21px) !important;
}

.release-final{
  grid-template-columns:minmax(0,1fr) auto !important;
}
.release-final h2{
  font-size:clamp(38px,3.4vw,56px) !important;
}
.release-actions{
  flex-wrap:wrap;
}
.release-actions .btn{
  min-width:clamp(180px,14vw,240px) !important;
}

/* ---------- HOW TO PLAY ---------- */
.how-page .how-main{
  width:100%;
}
.how-page .game-flow,
.how-page .mechanics,
.how-page .final-rules-row{
  width:min(var(--content-max), calc(100vw - 2 * var(--site-gutter))) !important;
}
.how-page .game-flow{
  grid-template-columns:
    minmax(0,1fr) clamp(30px,4vw,72px)
    minmax(0,1fr) clamp(30px,4vw,72px)
    minmax(0,1fr) clamp(30px,4vw,72px)
    minmax(0,1fr) !important;
}
.how-page .mechanics{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}
.how-page .mechanic-card{
  min-width:0 !important;
}
.how-page .mechanic-card h3{
  font-size:clamp(13px,1vw,17px) !important;
}
.how-page .mechanic-card p{
  font-size:clamp(11px,.75vw,14px) !important;
}
.how-page .final-rules-row{
  grid-template-columns:minmax(250px,.8fr) minmax(420px,1.6fr) minmax(310px,1fr) !important;
}

/* Never force one-screen fit when viewport is too short.
   Prefer readable scroll over collisions. */
@media (max-height:820px) and (min-width:1100px){
  .how-page,
  .how-page .site-shell,
  .how-page .how-main{
    height:auto !important;
    min-height:100vh !important;
    overflow:visible !important;
  }
  .how-page .site-shell{
    display:block !important;
  }
  .how-page .how-main{
    display:block !important;
  }
  .how-page .how-hero{
    height:auto !important;
    min-height:128px !important;
  }
  .how-page .game-flow,
  .how-page .mechanics,
  .how-page .final-rules-row{
    height:auto !important;
    min-height:0 !important;
    margin-top:12px !important;
    margin-bottom:12px !important;
  }
  .how-page .game-flow{
    min-height:160px !important;
  }
  .how-page .mechanics{
    min-height:205px !important;
  }
  .how-page .final-rules-row{
    min-height:180px !important;
  }
  .how-page footer{
    height:auto !important;
    min-height:54px !important;
  }
}

/* ---------- RULES ---------- */
.rules-wide{
  width:min(var(--content-max), calc(100vw - 2 * var(--site-gutter))) !important;
}
.rules-layout{
  grid-template-columns:clamp(200px,16vw,260px) minmax(0,1fr) !important;
}
.rules-cards{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

/* ---------- TABLET ---------- */
@media (max-width:1024px){
  .about-release-hero{
    grid-template-columns:1fr !important;
    min-height:0 !important;
  }
  .release-copy{
    padding-bottom:clamp(300px,48vw,430px) !important;
  }
  .release-hero-art{
    width:100% !important;
    top:auto !important;
    height:clamp(300px,48vw,430px) !important;
  }

  .release-pillars{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .release-pillars article:nth-child(5){
    grid-column:1 / -1 !important;
  }
  .release-final{
    grid-template-columns:1fr !important;
  }
  .release-actions{
    grid-column:1 !important;
    grid-row:auto !important;
    margin-top:18px !important;
  }

  .how-page .game-flow{
    grid-template-columns:1fr !important;
    height:auto !important;
    min-height:0 !important;
    padding:20px !important;
  }
  .how-page .flow-arrow{
    transform:rotate(90deg) !important;
    margin:4px auto !important;
  }
  .how-page .flow-note{
    position:static !important;
    margin-top:12px !important;
    white-space:normal !important;
  }
  .how-page .mechanics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    height:auto !important;
  }
  .how-page .mechanic-card{
    height:auto !important;
    min-height:190px !important;
  }
  .how-page .mechanic-card:last-child{
    grid-column:1 / -1 !important;
  }
  .how-page .final-rules-row{
    grid-template-columns:1fr !important;
    height:auto !important;
  }

  .rules-layout{
    grid-template-columns:1fr !important;
  }
  .rules-toc{
    display:none !important;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width:620px){
  :root{
    --site-gutter:14px;
    --header-h:58px;
  }

  .topbar{
    grid-template-columns:64px 1fr 42px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .about-release,
  .rules-wide{
    width:100% !important;
  }

  .release-copy{
    padding:24px 18px clamp(280px,78vw,380px) !important;
  }
  .about-release h1{
    font-size:clamp(38px,12vw,54px) !important;
  }

  .release-manifesto{
    grid-template-columns:1fr !important;
  }
  .manifesto-right{
    border-left:0 !important;
    border-top:1px solid rgba(212,175,55,.25) !important;
  }

  .release-pillars{
    grid-template-columns:1fr !important;
  }
  .release-pillars article,
  .release-pillars article:nth-child(5){
    grid-column:auto !important;
    min-height:140px;
  }

  .release-familiar{
    display:grid !important;
    gap:7px !important;
  }
  .release-familiar i{
    display:none !important;
  }
  .release-actions{
    flex-direction:column !important;
  }
  .release-actions .btn{
    width:100% !important;
    min-width:0 !important;
  }

  .how-page .mechanics{
    grid-template-columns:1fr !important;
  }
  .how-page .mechanic-card:last-child{
    grid-column:auto !important;
  }

  .rules-cards{
    grid-template-columns:1fr !important;
  }
  .rules-page #turn-order p,
  .rules-page #handicap p,
  .rules-page #negative-balance p{
    columns:1 !important;
  }
}


/* =========================================================
   v2.15 — dedicated mobile/tablet 9:16 intro
   ========================================================= */
.intro-video{
  object-fit:cover;
  object-position:center center;
}

/* The supplied 720×1280 clip is native 9:16 and fills portrait screens. */
@media (orientation:portrait){
  .intro-video{
    width:100vw !important;
    height:100dvh !important;
    object-fit:cover !important;
    object-position:center center !important;
  }
}

/* Tablet/mobile landscape may crop the vertical clip, but always fills the viewport
   without stretching or changing the video's proportions. */
@media (max-width:1100px), (pointer:coarse) and (max-width:1366px){
  .intro{
    width:100vw;
    height:100dvh;
  }
  .intro-video{
    width:100%;
    height:100%;
    object-fit:cover;
  }
}


/* =========================================================
   v2.17 — RESPONSIVE STABLE
   Final override. Removes fixed-height collisions and forces
   a fresh CSS version via ?v=217 in all HTML files.
   ========================================================= */

/* 1. HEADER
   Do not squeeze the complete desktop navigation into a viewport
   where it can collide with the two action buttons. */
@media (min-width:1760px){
  .topbar{
    display:grid !important;
    grid-template-columns:90px minmax(0,1fr) 430px !important;
    align-items:center !important;
    gap:18px !important;
    padding-left:clamp(24px,2.4vw,46px) !important;
    padding-right:clamp(24px,2.4vw,46px) !important;
    box-sizing:border-box !important;
  }
  .main-nav{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:clamp(15px,1.1vw,24px) !important;
    min-width:0 !important;
  }
  .main-nav a{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    font-size:clamp(12px,.65vw,14px) !important;
  }
  .top-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    width:430px !important;
    min-width:430px !important;
    gap:12px !important;
    margin:0 !important;
  }
  .top-actions .btn{
    width:100% !important;
    min-width:0 !important;
    padding-left:10px !important;
    padding-right:10px !important;
    box-sizing:border-box !important;
    font-size:12.5px !important;
  }
  .menu-button{display:none !important}
}

/* At widths below 1760 CSS px use the compact menu BEFORE any overlap occurs.
   This also covers 1920px monitors running Windows scaling / browser zoom. */
@media (max-width:1759px){
  .topbar{
    display:grid !important;
    grid-template-columns:76px minmax(0,1fr) 46px !important;
    align-items:center !important;
    gap:12px !important;
    padding-left:clamp(16px,2vw,30px) !important;
    padding-right:clamp(16px,2vw,30px) !important;
    box-sizing:border-box !important;
  }
  .main-nav,
  .top-actions{
    display:none !important;
  }
  .menu-button{
    display:block !important;
    justify-self:end !important;
  }
}

/* 2. HOW TO PLAY
   Remove all forced one-screen heights from previous revisions.
   Sections now participate in normal document flow, so text can never
   occupy the same physical space as the next section. */
@media (min-width:1100px){
  .how-page,
  .how-page .site-shell{
    height:auto !important;
    min-height:100vh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  .how-page .site-shell{
    display:block !important;
  }
  .how-page .how-main{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    padding:0 0 14px !important;
  }

  .how-page .how-hero{
    height:150px !important;
    min-height:150px !important;
  }
  .how-page .how-title{
    padding-top:14px !important;
  }
  .how-page .how-title h1{
    margin:0 !important;
    font-size:38px !important;
    line-height:1 !important;
  }
  .how-page .how-title .ornament{
    margin:7px auto 6px !important;
  }
  .how-page .how-title p{
    margin:0 !important;
    font-size:15.5px !important;
    line-height:1.35 !important;
  }

  .how-page .game-flow{
    width:min(1260px,88vw) !important;
    height:auto !important;
    min-height:174px !important;
    margin:12px auto 10px !important;
    padding:12px 30px 43px !important;
    box-sizing:border-box !important;
    align-items:start !important;
  }
  .how-page .flow-item{
    min-width:0 !important;
  }
  .how-page .flow-icon{
    width:66px !important;
    height:66px !important;
    margin:0 auto 4px !important;
  }
  .how-page .flow-item h3{
    margin:3px 0 !important;
    font-size:17px !important;
    line-height:1.1 !important;
  }
  .how-page .flow-item p{
    margin:0 !important;
    font-size:13.5px !important;
    line-height:1.2 !important;
  }
  .how-page .flow-note{
    bottom:8px !important;
    font-size:12.5px !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }

  .how-page .section-title{
    height:auto !important;
    line-height:1.15 !important;
    margin:8px 0 !important;
    font-size:18px !important;
  }

  .how-page .mechanics{
    width:min(1540px,94vw) !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 auto !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:10px !important;
    align-items:stretch !important;
  }
  .how-page .mechanic-card{
    height:auto !important;
    min-height:196px !important;
    padding:10px 10px 12px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }
  .how-page .mechanic-icon{
    width:54px !important;
    height:54px !important;
    margin:0 auto 3px !important;
  }
  .how-page .mechanic-card h3{
    margin:4px 0 7px !important;
    font-size:15.5px !important;
    line-height:1.25 !important;
  }
  .how-page .mechanic-card p{
    margin:0 !important;
    font-size:13px !important;
    line-height:1.42 !important;
  }

  .how-page .final-rules-row{
    width:min(1540px,94vw) !important;
    height:auto !important;
    min-height:178px !important;
    max-height:none !important;
    margin:10px auto 0 !important;
    grid-template-columns:minmax(280px,.78fr) minmax(480px,1.55fr) minmax(340px,1fr) !important;
    gap:12px !important;
    align-items:stretch !important;
    overflow:visible !important;
  }
  .how-page .final-copy{
    padding:0 4px !important;
    overflow:visible !important;
  }
  .how-page .final-copy h2,
  .how-page .rules-card h2{
    margin:0 0 6px !important;
    font-size:18px !important;
    line-height:1.1 !important;
  }
  .how-page .final-copy p{
    margin:0 !important;
    font-size:13px !important;
    line-height:1.48 !important;
  }
  .how-page .final-timeline,
  .how-page .rules-card{
    height:auto !important;
    min-height:178px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }
  .how-page .final-timeline{
    padding:12px 14px 48px !important;
  }
  .how-page .rules-card{
    padding:10px 15px !important;
  }
  .how-page .rules-card p{
    margin:0 0 8px !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }
  .how-page .rules-link{
    height:48px !important;
  }

  .how-page footer{
    height:auto !important;
    min-height:54px !important;
    margin-top:10px !important;
  }
}

/* How-to-play responsive reflow */
@media (max-width:1099px){
  .how-page .how-main{
    height:auto !important;
    overflow:visible !important;
  }
  .how-page .game-flow{
    height:auto !important;
    min-height:0 !important;
  }
  .how-page .mechanics{
    height:auto !important;
  }
  .how-page .mechanic-card{
    height:auto !important;
  }
  .how-page .final-rules-row{
    height:auto !important;
    max-height:none !important;
  }
}

/* 3. ABOUT BUG ICONS
   The SVGs are complete. Never clip their circle by the grid cell. */
.release-pillars{
  overflow:visible !important;
}
.release-pillars article{
  min-width:0 !important;
  overflow:visible !important;
}
.release-pillars .pillar-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:76px !important;
  height:76px !important;
  overflow:visible !important;
}
.release-pillars .pillar-icon svg{
  display:block !important;
  width:76px !important;
  height:76px !important;
  max-width:none !important;
  overflow:visible !important;
}
.release-pillars h2,
.release-pillars p{
  position:relative !important;
  z-index:2 !important;
}

/* At narrower widths, about page cards reflow instead of squeezing. */
@media (max-width:1250px){
  .release-pillars{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .release-pillars article:nth-child(5){
    grid-column:1/-1 !important;
  }
}
@media (max-width:650px){
  .release-pillars{
    grid-template-columns:1fr !important;
  }
  .release-pillars article:nth-child(5){
    grid-column:auto !important;
  }
}


/* =========================================================
   v2.18 — NAVIGATION FIX
   - full desktop navigation from 1450px
   - real working dropdown menu below 1450px
   - no collision with operator/online buttons
   ========================================================= */

/* Wide/normal desktop: always show full header. */
@media (min-width:1450px){
  .topbar{
    position:relative !important;
    display:grid !important;
    grid-template-columns:86px minmax(0,1fr) minmax(350px,390px) !important;
    align-items:center !important;
    column-gap:12px !important;
    padding-left:clamp(22px,2vw,38px) !important;
    padding-right:clamp(22px,2vw,38px) !important;
    box-sizing:border-box !important;
  }

  .main-nav{
    position:static !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    gap:clamp(11px,.9vw,18px) !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  .main-nav a{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    font-size:clamp(11.5px,.62vw,13.5px) !important;
    letter-spacing:.035em !important;
  }

  .top-actions{
    position:static !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    width:auto !important;
    min-width:0 !important;
    gap:9px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
  }

  .top-actions .btn{
    width:100% !important;
    min-width:0 !important;
    padding:0 9px !important;
    box-sizing:border-box !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }

  .menu-button{
    display:none !important;
  }
}

/* Compact desktop/tablet/mobile: hamburger is a REAL menu. */
@media (max-width:1449px){
  .topbar{
    position:relative !important;
    display:grid !important;
    grid-template-columns:76px minmax(0,1fr) 48px !important;
    align-items:center !important;
    gap:12px !important;
    padding:0 clamp(16px,2.2vw,28px) !important;
    box-sizing:border-box !important;
    z-index:100 !important;
  }

  .menu-button{
    display:block !important;
    justify-self:end !important;
    position:relative !important;
    z-index:103 !important;
    width:44px !important;
    height:44px !important;
    padding:0 !important;
    cursor:pointer !important;
    border:0 !important;
    background:transparent !important;
    color:#e7e2d7 !important;
    font-size:30px !important;
    line-height:44px !important;
  }

  /* Closed state */
  .main-nav,
  .top-actions{
    display:none !important;
  }

  /* Open state: one premium dropdown panel under the header. */
  .topbar.menu-open .main-nav{
    display:flex !important;
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    z-index:101 !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    width:100% !important;
    padding:14px clamp(20px,5vw,60px) 12px !important;
    background:
      linear-gradient(180deg,rgba(4,11,8,.995),rgba(1,5,3,.995)) !important;
    border-top:1px solid rgba(212,175,55,.20) !important;
    border-bottom:1px solid rgba(212,175,55,.30) !important;
    box-shadow:0 24px 55px rgba(0,0,0,.55) !important;
  }

  .topbar.menu-open .main-nav a{
    display:block !important;
    width:100% !important;
    padding:12px 4px !important;
    border-bottom:1px solid rgba(212,175,55,.10) !important;
    color:#e5e2d9 !important;
    font-size:15.5px !important;
    letter-spacing:.055em !important;
    text-align:left !important;
  }

  .topbar.menu-open .main-nav a:last-child{
    border-bottom:0 !important;
  }

  .topbar.menu-open .top-actions{
    display:grid !important;
    position:absolute !important;
    top:calc(100% + 338px) !important;
    left:0 !important;
    right:0 !important;
    z-index:102 !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    padding:12px clamp(20px,5vw,60px) 18px !important;
    width:100% !important;
    box-sizing:border-box !important;
    background:rgba(1,5,3,.995) !important;
    border-bottom:1px solid rgba(212,175,55,.30) !important;
    box-shadow:0 24px 55px rgba(0,0,0,.55) !important;
  }

  .topbar.menu-open .top-actions .btn{
    width:100% !important;
    min-height:46px !important;
    padding:0 12px !important;
    font-size:12.5px !important;
    box-sizing:border-box !important;
  }

  /* Give the opened panel enough visual room above page content. */
  .topbar.menu-open{
    margin-bottom:438px !important;
  }
}

/* Phone: stack the two action buttons. */
@media (max-width:620px){
  .topbar.menu-open .top-actions{
    top:calc(100% + 338px) !important;
    grid-template-columns:1fr !important;
  }
  .topbar.menu-open{
    margin-bottom:494px !important;
  }
}

/* Prevent any old .open rule from being ignored by prior !important declarations. */
@media (max-width:1449px){
  .main-nav.open{
    display:flex !important;
  }
}


/* =========================================================
   v2.19 — CLUBS
   ========================================================= */
.clubs-page .site-shell{min-height:100vh}
.clubs-main{width:100%;overflow:hidden}
.clubs-hero{
  position:relative;
  min-height:520px;
  border-bottom:1px solid rgba(199,154,57,.32);
  background-image:url("assets/hero-club.jpg");
  background-size:cover;
  background-position:center 58%;
  display:flex;
  align-items:center;
}
.clubs-hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(1,7,5,.98) 0%,rgba(2,10,7,.91) 31%,rgba(2,9,6,.48) 58%,rgba(0,0,0,.18) 100%),
    linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%);
}
.clubs-hero-copy{
  position:relative;z-index:2;
  width:min(700px,48vw);
  margin-left:clamp(55px,7vw,135px);
  padding:62px 0;
}
.clubs-kicker{
  display:block;color:#15925c;font-size:13.5px;font-weight:700;letter-spacing:.28em;margin-bottom:18px;
}
.clubs-hero h1,.clubs-section h2,.club-launch-copy h3{
  font-family:Georgia,"Times New Roman",serif;
  color:#f0dda0;font-weight:400;letter-spacing:.035em;
}
.clubs-hero h1{font-size:clamp(46px,4.3vw,78px);line-height:.98;margin:0 0 22px}
.clubs-hero-thesis{font-family:Georgia,"Times New Roman",serif;font-size:clamp(22px,2vw,34px);color:#eee7d6;margin:0 0 18px}
.clubs-hero-thesis strong{color:#d9aa36;font-weight:400}
.clubs-hero-lead{max-width:650px;font-size:16px;line-height:1.65;color:#c8ccc9;margin:0 0 30px}
.clubs-primary{width:280px}

.clubs-section{width:min(1500px,94vw);margin:0 auto;padding:58px 0}
.clubs-section-head{display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end;margin-bottom:28px}
.clubs-section-head h2{font-size:clamp(31px,3vw,50px);line-height:1;margin:0}
.clubs-section-head>p{font-size:16.5px;line-height:1.65;color:#adb4b0;margin:0 0 3px;max-width:520px}
.clubs-section-head.compact{border-top:1px solid rgba(199,154,57,.24);padding-top:48px}

.club-launch-card{
  display:grid;grid-template-columns:1.15fr .85fr;min-height:360px;
  border:1px solid rgba(199,154,57,.38);background:rgba(1,8,5,.72);overflow:hidden;
}
.club-launch-visual{
  position:relative;min-height:360px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,.42)),
    url("assets/hero-club.jpg") center 56%/cover no-repeat;
}
.club-status{
  position:absolute;left:28px;top:28px;border:1px solid rgba(205,164,61,.55);
  padding:10px 14px;color:#dfbd62;font-size:12.5px;letter-spacing:.16em;background:rgba(0,0,0,.58)
}
.club-launch-copy{display:flex;flex-direction:column;justify-content:center;padding:45px 55px}
.club-launch-copy h3{font-size:36px;margin:0 0 18px}
.club-launch-copy p{font-size:16.5px;line-height:1.7;color:#bec4c0;margin:0 0 30px}
.club-future-data{display:flex;align-items:center;gap:15px;color:#e4dfd2;font-size:12.5px;letter-spacing:.11em}
.club-future-data i{height:1px;flex:1;background:rgba(199,154,57,.36)}

.club-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid rgba(199,154,57,.32)}
.club-benefits article{position:relative;min-height:220px;padding:35px 30px;border-right:1px solid rgba(199,154,57,.25);background:rgba(2,9,6,.72)}
.club-benefits article:last-child{border-right:0}
.club-benefits article>span{position:absolute;right:20px;top:15px;color:rgba(201,159,49,.28);font-size:24px;font-weight:700}
.club-benefits h3{color:#d8aa34;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:18px;line-height:1.25;margin:58px 0 13px}
.club-benefits p{color:#b9c0bc;font-size:14.5px;line-height:1.6;margin:0}

.become-club{
  display:grid;grid-template-columns:1.1fr .9fr;gap:65px;
  border-top:1px solid rgba(199,154,57,.32);border-bottom:1px solid rgba(199,154,57,.32);
}
.become-copy h2{font-size:clamp(36px,3.5vw,58px);margin:0 0 18px}
.become-copy>p{max-width:680px;color:#c5cbc7;font-size:17px;line-height:1.7}
.club-route{display:flex;align-items:center;gap:15px;margin-top:32px;color:#e7e0d1;font-size:13.5px;letter-spacing:.08em}
.club-route b{color:#28a963;font-size:18px;font-weight:400}
.become-action{display:flex;flex-direction:column;justify-content:center}
.status-legend{border:1px solid rgba(199,154,57,.28);margin-bottom:14px}
.status-legend div{display:grid;grid-template-columns:145px 1fr;gap:16px;padding:13px 17px;border-bottom:1px solid rgba(199,154,57,.16)}
.status-legend div:last-child{border-bottom:0}
.status-legend strong{color:#d6aa3a;font-size:12.5px;letter-spacing:.12em}
.status-legend span{color:#aeb6b1;font-size:11px}
.club-connect-btn{width:100%}

@media(max-width:1100px){
  .clubs-hero-copy{width:min(720px,82vw);margin-left:7vw}
  .clubs-section-head,.become-club{grid-template-columns:1fr;gap:20px}
  .club-launch-card{grid-template-columns:1fr}
  .club-benefits{grid-template-columns:repeat(2,1fr)}
  .club-benefits article:nth-child(2){border-right:0}
  .club-benefits article:nth-child(-n+2){border-bottom:1px solid rgba(199,154,57,.25)}
}
@media(max-width:650px){
  .clubs-hero{min-height:620px;background-position:65% center}
  .clubs-hero-shade{background:linear-gradient(180deg,rgba(1,7,5,.56),rgba(1,7,5,.98) 64%)}
  .clubs-hero-copy{width:auto;margin:0;padding:260px 24px 48px}
  .clubs-hero h1{font-size:42px}
  .clubs-hero-lead{font-size:14px}
  .clubs-primary{width:100%}
  .clubs-section{padding:42px 0}
  .clubs-section-head{display:block}
  .clubs-section-head>p{margin-top:18px}
  .club-launch-copy{padding:32px 24px}
  .club-launch-copy h3{font-size:28px}
  .club-future-data{flex-wrap:wrap}
  .club-future-data i{display:none}
  .club-benefits{grid-template-columns:1fr}
  .club-benefits article{border-right:0;border-bottom:1px solid rgba(199,154,57,.25)}
  .club-route{flex-wrap:wrap}
  .status-legend div{grid-template-columns:1fr;gap:5px}
}

/* v2.20 — first live BUG club */
.club-status-live{color:#66d99b;border-color:rgba(39,174,96,.7);background:rgba(0,30,18,.72)}
.club-address{font-size:16px!important;color:#e9e4d7!important;margin:0 0 20px!important}
.club-table-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 22px}
.club-table-stats>div{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid rgba(199,154,57,.28);background:rgba(0,0,0,.22)}
.club-table-stats strong{font-family:Georgia,"Times New Roman",serif;font-size:30px;font-weight:400;color:#d9aa36;line-height:1}
.club-table-stats span{font-size:13.5px;line-height:1.35;color:#c7cdc9}
.club-card-actions{display:flex;gap:12px;flex-wrap:wrap}
.club-card-actions .btn{width:auto;min-width:175px;padding-left:22px;padding-right:22px}
@media(max-width:760px){.club-table-stats{grid-template-columns:1fr}.club-card-actions .btn{width:100%}}


/* =========================================================
   v2.21 — CLUB DATA LAYER
   Clubs are rendered from data/clubs.json.
   ========================================================= */
.clubs-list{display:grid;gap:22px}
.clubs-loading,.clubs-empty{
  min-height:180px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(199,154,57,.30);color:#9da6a1;
  font-size:13.5px;letter-spacing:.16em;background:rgba(1,8,5,.70)
}
.club-data-card{
  display:grid;grid-template-columns:minmax(420px,1.05fr) minmax(430px,.95fr);
  min-height:390px;border:1px solid rgba(199,154,57,.38);
  background:rgba(1,8,5,.76);overflow:hidden;
}
.club-data-visual{
  position:relative;min-height:390px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.45)),
    url("assets/hero-club.jpg") center 56%/cover no-repeat;
}
.club-data-badges{
  position:absolute;left:26px;top:25px;display:flex;gap:8px;flex-wrap:wrap
}
.club-data-badges span{
  border:1px solid rgba(205,164,61,.58);padding:9px 12px;
  color:#e0bd63;font-size:11.5px;letter-spacing:.14em;background:rgba(0,0,0,.68)
}
.club-data-badges .live{border-color:rgba(24,151,92,.65);color:#62cf95}
.club-data-city{
  position:absolute;left:28px;bottom:24px;color:#f0dda0;
  font-family:Georgia,"Times New Roman",serif;font-size:28px;letter-spacing:.04em
}
.club-data-copy{display:flex;flex-direction:column;justify-content:center;padding:42px 48px}
.club-data-copy h3{
  margin:0 0 12px;color:#f0dda0;font-family:Georgia,"Times New Roman",serif;
  font-size:42px;font-weight:400;letter-spacing:.035em
}
.club-address{margin:0 0 12px;color:#e3dfd3;font-size:16.5px;line-height:1.5}
.club-description{margin:0 0 25px;color:#aeb7b2;font-size:14.5px;line-height:1.55}
.club-table-stats{
  display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(199,154,57,.23);
  border-bottom:1px solid rgba(199,154,57,.23);margin-bottom:25px
}
.club-table-stats div{display:grid;grid-template-columns:45px 1fr;align-items:center;gap:9px;padding:15px 0}
.club-table-stats div+div{padding-left:22px;border-left:1px solid rgba(199,154,57,.23)}
.club-table-stats strong{color:#d8aa34;font-size:26px;font-weight:400}
.club-table-stats span{color:#aeb7b2;font-size:12.5px;line-height:1.35}
.club-data-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.club-data-actions .btn{width:100%;box-sizing:border-box}

@media(max-width:950px){
  .club-data-card{grid-template-columns:1fr}
  .club-data-visual{min-height:310px}
}
@media(max-width:560px){
  .club-data-copy{padding:30px 22px}
  .club-data-copy h3{font-size:34px}
  .club-table-stats,.club-data-actions{grid-template-columns:1fr}
  .club-table-stats div+div{padding-left:0;border-left:0;border-top:1px solid rgba(199,154,57,.23)}
}


/* =========================================================
   v2.22 — TOURNAMENTS API-READY
   ========================================================= */
.tournaments-hero{
  position:relative;min-height:390px;display:flex;align-items:center;
  background:url("assets/hero-club.jpg") center 55%/cover no-repeat;
  border-bottom:1px solid rgba(199,154,57,.30)
}
.tournaments-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,7,5,.97),rgba(2,9,6,.66) 58%,rgba(0,0,0,.25))}
.tournaments-hero-copy{position:relative;z-index:2;width:min(680px,72vw);margin-left:clamp(42px,7vw,130px)}
.tournaments-kicker{display:block;color:#15925c;font-size:12.5px;font-weight:700;letter-spacing:.25em;margin-bottom:14px}
.tournaments-hero h1,.tournaments-content h2,.tournament-card h3{
  font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#f0dda0
}
.tournaments-hero h1{font-size:clamp(48px,4.6vw,80px);line-height:.92;margin:0 0 20px}
.tournaments-hero p{max-width:650px;color:#c3cac6;line-height:1.65;font-size:15px}

.tournaments-content{width:min(1500px,94vw);margin:0 auto;padding:52px 0 68px}
.tournaments-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:24px}
.tournaments-content h2{font-size:clamp(32px,3vw,49px);margin:0}
.tournaments-sync{display:flex;align-items:center;gap:9px;color:#85918b;font-size:11.5px;letter-spacing:.14em}
.sync-dot{width:7px;height:7px;border-radius:50%;background:#15925c;box-shadow:0 0 8px rgba(21,146,92,.55)}
.tournaments-list{display:grid;gap:14px}
.tournaments-state{min-height:180px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;
  border:1px solid rgba(199,154,57,.28);background:rgba(1,8,5,.70);color:#8f9b94;text-align:center;padding:30px;font-size:13.5px;letter-spacing:.09em}
.tournaments-state strong{color:#d5aa3a;font-family:Georgia,"Times New Roman",serif;font-size:20px;font-weight:400}
.tournaments-state span{max-width:600px;line-height:1.55;letter-spacing:0}

.tournament-card{display:grid;grid-template-columns:190px minmax(0,1fr) 310px;min-height:275px;
  border:1px solid rgba(199,154,57,.32);background:rgba(2,9,6,.78)}
.tournament-date{display:flex;flex-direction:column;justify-content:center;padding:25px;border-right:1px solid rgba(199,154,57,.22)}
.tournament-date span{color:#c8c4b8;font-size:13.5px;line-height:1.4}
.tournament-date strong{color:#f0dda0;font-family:Georgia,"Times New Roman",serif;font-size:42px;font-weight:400;margin:8px 0 12px}
.tournament-date small{color:#65716b;font-size:11.5px;letter-spacing:.14em}
.tournament-main{position:relative;padding:30px 35px}
.tournament-status{display:inline-block;padding:6px 9px;border:1px solid rgba(199,154,57,.32);font-size:10.5px;letter-spacing:.14em;color:#b9a36c}
.tournament-status.open{border-color:rgba(21,146,92,.55);color:#63d197}
.tournament-status.done{color:#aaa}
.tournament-status.cancelled{border-color:rgba(160,50,45,.6);color:#d57973}
.tournament-main h3{font-size:32px;margin:13px 0 8px}
.tournament-description{color:#aeb6b1;font-size:14.5px;line-height:1.55;margin:0 0 22px;max-width:650px}
.tournament-venue{display:grid;grid-template-columns:minmax(140px,.6fr) minmax(220px,1fr) auto;gap:20px;align-items:end;border-top:1px solid rgba(199,154,57,.16);padding-top:17px}
.tournament-venue span{display:block;color:#68736d;font-size:10.5px;letter-spacing:.12em;margin-bottom:5px}
.tournament-venue strong,.tournament-venue a{color:#e0ddd3;font-size:13.5px;text-decoration:none}
.tournament-venue>div:first-child a{color:#d3aa41;font-family:Georgia,"Times New Roman",serif;font-size:16px}
.map-mini{color:#45af79!important;font-size:11.5px!important;letter-spacing:.08em;white-space:nowrap}
.tournament-meta{padding:28px 25px;border-left:1px solid rgba(199,154,57,.22);display:flex;flex-direction:column}
.meta-row{display:flex;justify-content:space-between;gap:15px;padding:9px 0;border-bottom:1px solid rgba(199,154,57,.11)}
.meta-row span{color:#707b75;font-size:10.5px;letter-spacing:.10em}
.meta-row strong{color:#d9d7cf;font-size:12.5px;font-weight:500;text-align:right}
.tournament-register{margin-top:auto;width:100%;box-sizing:border-box}
.tournament-register.disabled{opacity:.45;pointer-events:none}

@media(max-width:1050px){
  .tournament-card{grid-template-columns:150px minmax(0,1fr)}
  .tournament-meta{grid-column:1/-1;border-left:0;border-top:1px solid rgba(199,154,57,.22);display:grid;grid-template-columns:repeat(4,1fr);gap:0 18px}
  .tournament-register{grid-column:1/-1;margin-top:15px}
}
@media(max-width:650px){
  .tournaments-hero{min-height:430px}
  .tournaments-hero-copy{margin:0;padding:45px 22px}
  .tournaments-head{display:block}
  .tournaments-sync{margin-top:14px}
  .tournament-card{grid-template-columns:1fr}
  .tournament-date{border-right:0;border-bottom:1px solid rgba(199,154,57,.22)}
  .tournament-main{padding:25px 20px}
  .tournament-venue{grid-template-columns:1fr}
  .tournament-meta{grid-column:auto;grid-template-columns:1fr;padding:20px}
}


/* =========================================================
   v2.23 — TOURNAMENTS: UPCOMING / PAST SPLIT
   ========================================================= */
.tournament-group{margin-top:34px}
.tournament-group:first-of-type{margin-top:0}
.tournament-group + .tournament-group{
  margin-top:64px;
  padding-top:44px;
  border-top:1px solid rgba(199,154,57,.24);
}
.tournament-group-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin:0 0 20px;
}
.tournament-group-head h3{
  margin:0;
  color:#f0dda0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(26px,2.3vw,39px);
  font-weight:400;
  letter-spacing:.025em;
}
.tournament-group-note{
  color:#7f8a84;
  font-size:11.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  padding-bottom:4px;
}
.tournament-group-past .tournaments-kicker{color:#8b8065}
.tournaments-list-past .tournament-card{
  background:rgba(2,7,5,.56);
  border-color:rgba(199,154,57,.20);
  min-height:230px;
}
.tournaments-list-past .tournament-date strong{color:#bfb28c}
.tournaments-list-past .tournament-main h3{color:#cfc4a0}
.tournaments-list-past .tournament-main,
.tournaments-list-past .tournament-meta,
.tournaments-list-past .tournament-date{
  opacity:.82;
}
.tournaments-list-past .tournament-register{
  display:none;
}
.tournaments-list-past .tournament-status.done{
  color:#9e9e98;
  border-color:rgba(160,160,150,.25);
}
.tournaments-list-past .tournament-status.cancelled{
  color:#b06e69;
  border-color:rgba(160,50,45,.35);
}

@media(max-width:650px){
  .tournament-group + .tournament-group{margin-top:44px;padding-top:34px}
  .tournament-group-head{display:block}
  .tournament-group-note{display:block;margin-top:10px}
}


/* =========================================================
   v2.26 — COMPACT TOURNAMENT ARCHIVE
   Upcoming tournament cards remain unchanged.
   ========================================================= */
.tournaments-list-past{
  gap:8px;
}
.archive-tournament-card{
  display:grid;
  grid-template-columns:210px minmax(300px,1.25fr) minmax(260px,.95fr) 150px;
  align-items:center;
  min-height:88px;
  border:1px solid rgba(199,154,57,.20);
  background:rgba(2,7,5,.50);
}
.archive-tournament-card > *{
  min-width:0;
}
.archive-date,
.archive-title,
.archive-club{
  padding:16px 20px;
}
.archive-date,
.archive-title{
  border-right:1px solid rgba(199,154,57,.14);
}
.archive-date{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.archive-date strong{
  color:#d4cba9;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  font-weight:400;
}
.archive-date span{
  color:#8d978f;
  font-size:13.5px;
}
.archive-title{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  align-items:center;
}
.archive-title .tournament-status{
  grid-row:1 / span 2;
  margin:0;
  white-space:nowrap;
}
.archive-title h4{
  margin:0;
  color:#d8cca4;
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  font-weight:400;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.archive-title small{
  color:#66716b;
  font-size:10.5px;
  letter-spacing:.12em;
  margin-top:4px;
}
.archive-club span{
  display:block;
  color:#68736d;
  font-size:10.5px;
  letter-spacing:.12em;
  margin-bottom:6px;
}
.archive-club a{
  color:#c8b274;
  text-decoration:none;
  font-size:13.5px;
}
.archive-details{
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  border-left:1px solid rgba(199,154,57,.14);
  color:#45af79;
  text-decoration:none;
  font-size:11.5px;
  letter-spacing:.10em;
  transition:background .18s ease,color .18s ease;
}
.archive-details:hover{
  background:rgba(21,146,92,.08);
  color:#6bd09b;
}
.archive-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:18px;
}
.archive-controls[hidden]{
  display:none;
}
.archive-more{
  min-width:210px;
  padding:13px 22px;
  border:1px solid rgba(199,154,57,.38);
  background:rgba(2,9,6,.70);
  color:#d8bd70;
  font:inherit;
  font-size:11.5px;
  letter-spacing:.15em;
  cursor:pointer;
}
.archive-more:hover{
  border-color:rgba(21,146,92,.60);
  color:#63d197;
}
.archive-counter{
  color:#65716b;
  font-size:10.5px;
  letter-spacing:.11em;
}

@media(max-width:1050px){
  .archive-tournament-card{
    grid-template-columns:170px minmax(220px,1fr) 125px;
  }
  .archive-club{display:none}
}
@media(max-width:650px){
  .archive-tournament-card{
    grid-template-columns:1fr auto;
    min-height:0;
  }
  .archive-date,
  .archive-title{
    padding:13px 15px;
  }
  .archive-date{
    grid-column:1;
    border-right:0;
    border-bottom:1px solid rgba(199,154,57,.12);
  }
  .archive-title{
    grid-column:1;
    border-right:0;
  }
  .archive-details{
    grid-column:1/-1;
    min-height:42px;
    border-left:0;
    border-top:1px solid rgba(199,154,57,.12);
  }
  .archive-controls{
    flex-direction:column;
    gap:10px;
  }
}


/* =========================================================
   v2.29 — CONTACTS
   ========================================================= */
.contacts-hero{
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  background:url("assets/hero-club.jpg") center 54%/cover no-repeat;
  border-bottom:1px solid rgba(199,154,57,.30);
}
.contacts-hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(1,7,5,.97),rgba(2,9,6,.70) 55%,rgba(0,0,0,.22));
}
.contacts-hero-copy{
  position:relative;z-index:2;
  width:min(720px,72vw);
  margin-left:clamp(42px,7vw,130px);
}
.contacts-kicker{
  display:block;
  color:#15925c;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.25em;
  margin-bottom:14px;
}
.contacts-hero h1,
.contacts-intro h2,
.contact-route h3,
.contacts-direct h2{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  color:#f0dda0;
}
.contacts-hero h1{
  font-size:clamp(50px,5vw,82px);
  line-height:.92;
  margin:0 0 22px;
}
.contacts-hero p{
  max-width:700px;
  color:#c3cac6;
  line-height:1.65;
  font-size:17px;
}
.contacts-content{
  width:min(1500px,94vw);
  margin:0 auto;
  padding:56px 0 70px;
}
.contacts-intro{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(420px,1.3fr);
  gap:42px;
  align-items:end;
  padding-bottom:30px;
  border-bottom:1px solid rgba(199,154,57,.22);
}
.contacts-intro .contacts-kicker{grid-column:1/-1;margin:0}
.contacts-intro h2{
  font-size:clamp(32px,3.2vw,52px);
  margin:0;
}
.contacts-intro p{
  margin:0;
  color:#aeb7b2;
  font-size:17px;
  line-height:1.7;
}
.contact-route-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:22px;
  border-top:1px solid rgba(199,154,57,.28);
  border-left:1px solid rgba(199,154,57,.28);
}
.contact-route{
  position:relative;
  min-height:310px;
  padding:34px 30px 28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid rgba(199,154,57,.28);
  border-bottom:1px solid rgba(199,154,57,.28);
  background:rgba(2,8,5,.62);
}
.contact-route-no{
  position:absolute;
  right:20px;
  top:15px;
  color:rgba(199,154,57,.27);
  font-size:28px;
  font-weight:700;
  letter-spacing:.04em;
}
.contact-route h3{
  margin:0 0 15px;
  max-width:310px;
  font-size:28px;
  line-height:1.08;
}
.contact-route p{
  max-width:340px;
  margin:0;
  color:#aeb7b2;
  font-size:16.5px;
  line-height:1.65;
}
.contact-route-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:52px;
  padding:0 17px;
  margin-top:28px;
  border:1px solid rgba(21,146,92,.50);
  color:#69d39b;
  text-decoration:none;
  font-size:13.5px;
  letter-spacing:.12em;
}
.contact-route-link:hover{
  background:rgba(21,146,92,.08);
  border-color:rgba(21,146,92,.78);
}
.contacts-direct{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:0;
  margin-top:22px;
  border:1px solid rgba(199,154,57,.28);
  background:rgba(2,8,5,.60);
}
.contacts-direct-copy,
.contacts-direct-status{
  padding:38px 40px;
}
.contacts-direct-status{
  border-left:1px solid rgba(199,154,57,.22);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contacts-direct h2{
  margin:0 0 14px;
  font-size:38px;
}
.contacts-direct p{
  max-width:700px;
  margin:0;
  color:#aeb7b2;
  font-size:16.5px;
  line-height:1.7;
}
.contacts-direct-status span{
  color:#717c76;
  font-size:12.5px;
  letter-spacing:.13em;
}
.contacts-direct-status strong{
  margin:9px 0;
  color:#d4b65b;
  font-size:17px;
  font-weight:500;
}
.contacts-direct-status small{
  color:#8b958f;
  font-size:14.5px;
  line-height:1.55;
}
.contacts-social-links{
  display:grid;
  gap:9px;
  margin-top:8px;
}
.contacts-social-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 0;
  border-bottom:1px solid rgba(199,154,57,.16);
  color:#d9ddd9;
  text-decoration:none;
  transition:color .2s ease,border-color .2s ease;
}
.contacts-social-links a:last-child{border-bottom:0}
.contacts-social-links a:hover{
  color:#d4b65b;
  border-color:rgba(199,154,57,.48);
}
.contacts-social-links b{
  font-size:16.5px;
  font-weight:500;
  letter-spacing:.03em;
}
.contacts-social-links a small{
  text-align:right;
  font-size:14.5px;
}
@media(max-width:950px){
  .contacts-intro{grid-template-columns:1fr}
  .contact-route-grid{grid-template-columns:1fr}
  .contact-route{min-height:230px}
  .contacts-direct{grid-template-columns:1fr}
  .contacts-direct-status{border-left:0;border-top:1px solid rgba(199,154,57,.22)}
}
@media(max-width:650px){
  .contacts-hero{min-height:430px}
  .contacts-hero-copy{margin:0;padding:44px 22px}
  .contacts-content{padding-top:38px}
  .contact-route{padding:28px 22px}
  .contacts-direct-copy,.contacts-direct-status{padding:28px 22px}
}

/* v2.30 web registration */
.registration-hero{position:relative;min-height:390px;display:flex;align-items:center;background:url("assets/hero-club.jpg") center 48%/cover no-repeat;border-bottom:1px solid rgba(199,154,57,.30)}
.registration-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,7,5,.97),rgba(2,9,6,.73) 58%,rgba(0,0,0,.28))}
.registration-hero-copy{position:relative;z-index:2;width:min(760px,75vw);margin-left:clamp(42px,7vw,130px)}
.register-kicker{display:block;margin-bottom:14px;color:#15925c;font-size:12.5px;font-weight:700;letter-spacing:.23em}
.registration-hero h1,.registration-copy h2,.registration-copy h3,.registration-success h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#f0dda0}
.registration-hero h1{margin:0 0 20px;font-size:clamp(52px,5.3vw,86px);line-height:.91}
.registration-hero p,.registration-copy>p{color:#c2cac5;font-size:16.5px;line-height:1.7}
.registration-layout{width:min(1450px,94vw);margin:0 auto;padding:58px 0 72px;display:grid;grid-template-columns:minmax(330px,.8fr) minmax(520px,1.2fr);gap:58px}
.registration-copy h2{margin:0 0 18px;font-size:clamp(34px,3vw,48px)}
.existing-player-box{margin-top:38px;padding:27px 28px;border:1px solid rgba(199,154,57,.24);background:rgba(2,8,5,.62)}
.existing-player-box>span{color:#877957;font-size:10.5px;letter-spacing:.16em}
.existing-player-box h3{margin:10px 0 13px;font-size:23px}
.existing-player-box p{color:#8f9993;font-size:14.5px;line-height:1.65}
.existing-player-disabled{width:100%;margin-top:20px;padding:14px 16px;border:1px solid rgba(199,154,57,.20);background:rgba(255,255,255,.015);color:#5e655f;font-size:10.5px;letter-spacing:.11em}
.registration-panel{border:1px solid rgba(199,154,57,.30);background:rgba(2,8,5,.68);padding:36px 38px}
.bug-registration-form{display:flex;flex-direction:column;gap:20px}
.form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bug-registration-form label>span{display:block;margin-bottom:8px;color:#8b958f;font-size:10.5px;letter-spacing:.14em}
.bug-registration-form input[type=text],.bug-registration-form input[type=email],.bug-registration-form input[type=password]{width:100%;box-sizing:border-box;min-height:52px;padding:0 15px;border:1px solid rgba(199,154,57,.23);outline:none;background:rgba(0,0,0,.30);color:#e8e3d2;font:inherit;font-size:13px}
.bug-registration-form input:focus{border-color:rgba(21,146,92,.72);box-shadow:0 0 0 2px rgba(21,146,92,.08)}
.bug-registration-form label>small{display:block;margin-top:7px;color:#657069;font-size:9px}
.form-consent{display:grid!important;grid-template-columns:18px 1fr;gap:11px;align-items:start}.form-consent input{margin-top:2px;accent-color:#15925c}.form-consent span{margin:0!important;color:#8f9993!important;font-size:12.5px!important;line-height:1.55;letter-spacing:.02em!important}
.registration-submit{min-height:56px;border:1px solid rgba(21,146,92,.70);background:rgba(9,67,43,.38);color:#7de0ad;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.14em;cursor:pointer}
.registration-submit:disabled{opacity:.55;cursor:default}.registration-status{min-height:20px;font-size:11px}.registration-status.error{color:#d58a80}
.registration-success{min-height:460px;display:flex;flex-direction:column;justify-content:center}.registration-success[hidden]{display:none}.registration-success h2{margin:0 0 16px;font-size:42px}.registration-success p{color:#c3cac6;font-size:14px}.registration-success-actions{display:flex;gap:12px;margin:28px 0 18px}.registration-success>small{color:#69736d;font-size:9px}
@media(max-width:950px){.registration-layout{grid-template-columns:1fr;gap:32px}}
@media(max-width:650px){.registration-hero{min-height:420px}.registration-hero-copy{margin:0;padding:44px 22px;width:auto}.registration-layout{padding:38px 0 52px}.registration-panel{padding:26px 20px}.form-row.two{grid-template-columns:1fr}.registration-success-actions{flex-direction:column}}

/* v2.31 — registration compact layout + nickname conflict UX */
.registration-layout{padding-top:44px;padding-bottom:58px}
.registration-panel{padding:28px 32px}
.bug-registration-form{gap:14px}
.form-row.two{gap:14px}
.bug-registration-form input[type=text],
.bug-registration-form input[type=email],
.bug-registration-form input[type=password]{min-height:46px}
.bug-registration-form label>span{margin-bottom:6px}
.bug-registration-form label>small{margin-top:5px}
.registration-submit{min-height:50px}
.existing-player-box{margin-top:30px;padding:23px 24px}


/* v2.32 — existing BUG player web-account linking */
.existing-link-toggle{
  width:100%;
  min-height:60px;
  border:1px solid rgba(195,160,72,.34);
  background:transparent;
  color:rgba(231,218,173,.82);
  letter-spacing:.12em;
  cursor:pointer;
}
.existing-link-toggle:hover,
.existing-link-toggle:focus-visible{
  border-color:rgba(40,196,132,.72);
  color:#73efb6;
  outline:none;
}
.existing-link-form{
  display:grid;
  gap:14px;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(195,160,72,.22);
}
.existing-link-form[hidden]{display:none}
.existing-link-form label{display:block}
.existing-link-form label>span{
  display:block;
  margin-bottom:6px;
  font-size:14.5px;
  letter-spacing:.16em;
  color:rgba(216,205,168,.76);
}
.existing-link-form label>small{
  display:block;
  margin-top:5px;
  color:rgba(178,188,181,.58);
}
.existing-link-form input{
  width:100%;
  min-height:46px;
  box-sizing:border-box;
  border:1px solid rgba(195,160,72,.32);
  background:rgba(0,10,8,.28);
  color:#f1ead1;
  padding:10px 12px;
}
.registration-message{min-height:22px;margin-top:2px}
.registration-message.error{color:#ff8d7d}
.registration-message.success{color:#73efb6}


/* =========================================================
   v2.33 — Telegram Mini App presentation for "О BUG"
   ========================================================= */
.telegram-miniapp,
.telegram-miniapp body{
  width:100%;
  max-width:100%;
  min-height:100%;
  overflow-x:hidden !important;
}

.telegram-miniapp .site-shell,
.telegram-miniapp .about-release,
.telegram-miniapp .about-release-hero,
.telegram-miniapp .release-copy{
  min-width:0 !important;
  max-width:100% !important;
}

.telegram-miniapp .release-intro,
.telegram-miniapp .release-thesis,
.telegram-miniapp .release-accent,
.telegram-miniapp .release-copy p{
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  max-width:100% !important;
}

.tg-miniapp-toolbar[hidden]{
  display:none !important;
}

.telegram-miniapp .tg-miniapp-toolbar{
  position:fixed;
  left:max(10px, env(safe-area-inset-left));
  right:max(10px, env(safe-area-inset-right));
  bottom:max(10px, env(safe-area-inset-bottom));
  z-index:9999;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
  padding:8px;
  border:1px solid rgba(197,157,58,.32);
  background:rgba(3,10,8,.94);
  box-shadow:0 12px 40px rgba(0,0,0,.42);
  backdrop-filter:blur(14px);
}

.telegram-miniapp .tg-miniapp-action{
  min-height:48px;
  border:1px solid rgba(197,157,58,.36);
  background:rgba(4,14,10,.9);
  color:#ead89d;
  padding:0 15px;
  font:700 11px/1.1 Arial,sans-serif;
  letter-spacing:.10em;
  cursor:pointer;
}

.telegram-miniapp .tg-miniapp-site{
  border-color:rgba(38,199,129,.58);
  background:linear-gradient(90deg,rgba(0,69,47,.74),rgba(3,40,30,.92));
  color:#79f0bb;
}

.telegram-miniapp .about-release{
  padding-bottom:78px !important;
}

@media (max-width:620px){
  .telegram-miniapp .topbar{
    position:sticky;
    top:0;
    z-index:1000;
  }

  .telegram-miniapp .release-copy{
    padding-left:18px !important;
    padding-right:18px !important;
    box-sizing:border-box !important;
  }

  .telegram-miniapp .release-intro{
    width:auto !important;
    font-size:16.5px !important;
    line-height:1.45 !important;
  }

  .telegram-miniapp .about-release h1{
    font-size:clamp(36px,11vw,52px) !important;
    overflow-wrap:normal !important;
  }

  .telegram-miniapp .tg-miniapp-toolbar{
    grid-template-columns:1fr 1.65fr;
  }

  .telegram-miniapp .tg-miniapp-action{
    padding:0 9px;
    font-size:12.5px;
    letter-spacing:.07em;
  }
}

/* =========================================================
   BUG HOME v2.35 — premium Underground Luxury / Cyber-Sport
   First page only. Other site pages are intentionally untouched.
   ========================================================= */
.home-page{
  --home-gold:#d4af37;
  --home-gold-soft:#f0d27d;
  --home-green:#1e6b4d;
  --home-green-deep:#07281d;
  --home-border:rgba(212,175,55,.30);
  --home-border-soft:rgba(212,175,55,.16);
  --home-panel:rgba(5,10,7,.94);
  background:#020403;
}
.home-page .site-shell{background:#020403}
.home-page .topbar{
  height:76px;
  grid-template-columns:minmax(225px,1fr) auto minmax(225px,1fr);
  gap:26px;
  padding:0 3.2vw;
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(2,4,3,.96);
  border-bottom:1px solid var(--home-border);
  backdrop-filter:blur(14px);
}
.home-page .brand-lockup{
  width:auto;height:64px;display:flex;align-items:center;gap:13px;
  text-decoration:none;justify-self:start;
}
.home-page .brand-lockup img{width:72px;height:58px;flex:0 0 auto}
.home-page .brand-lockup-copy{display:flex;flex-direction:column;line-height:1}
.home-page .brand-lockup-copy b{
  color:var(--home-gold-soft);font:700 23px/1 "Manrope","Segoe UI",sans-serif;letter-spacing:.05em;
}
.home-page .brand-lockup-copy small{
  margin-top:5px;color:#a8873e;font:600 7px/1.1 "Manrope","Segoe UI",sans-serif;
  text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;
}
.home-page .main-nav{gap:34px}
.home-page .main-nav a{
  font-size:13.5px;font-weight:600;letter-spacing:.035em;color:#dedbd2;
  position:relative;padding:29px 0 27px;
}
.home-page .main-nav a.active{color:var(--home-gold-soft)}
.home-page .main-nav a.active:after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--home-gold);
}
.home-page .top-actions{justify-self:end}
.home-page .top-actions .btn{min-height:38px;padding:0 28px;color:var(--home-gold-soft)}

.home-page .hero{
  height:min(620px,63vw);
  min-height:520px;
  max-height:650px;
  border-bottom:1px solid var(--home-border);
}
.home-page .hero-visual{
  inset:0;
  background-image:url("assets/hero-club.jpg");
  background-size:cover;
  background-position:center 51%;
  filter:saturate(.94) contrast(1.08) brightness(.82);
  transform:scale(1.015);
}
.home-page .hero-shade{
  background:
    linear-gradient(90deg,#020403 0%,rgba(2,4,3,.97) 18%,rgba(2,4,3,.79) 34%,rgba(2,4,3,.22) 58%,rgba(2,4,3,.06) 100%),
    linear-gradient(180deg,rgba(0,0,0,.04) 58%,rgba(0,0,0,.55) 100%);
}
.home-page .hero-left{
  width:min(560px,44vw);min-width:0;
  padding:46px 0 0 4.2vw;
}
.home-page .hero-kicker{
  margin:0 0 14px;color:#9d7f3c;text-transform:uppercase;
  font-size:13.5px;font-weight:700;letter-spacing:.17em;
}
.home-page .hero h1{
  margin:0;color:#e5e3dc;font-family:"Manrope","Segoe UI",sans-serif;
  font-size:clamp(42px,4.1vw,66px);line-height:1.04;font-weight:700;
  letter-spacing:-.035em;text-transform:uppercase;
}
.home-page .hero h1 span{color:var(--home-gold);font-size:1.22em;letter-spacing:-.045em}
.home-page .hero-lead{
  margin:24px 0 0;color:#b6b8b3;font-size:16.5px;line-height:1.55;
}
.home-page .hero-buttons{margin-top:24px;gap:14px}
.home-page .hero-buttons .btn{
  min-width:0;min-height:44px;padding:0 23px;font-size:13.5px;
}

.home-page .feature-grid{
  margin:20px 3.2vw 0;
  border:1px solid var(--home-border);
  border-radius:7px;overflow:hidden;transform:none;
  background:linear-gradient(180deg,rgba(6,12,9,.97),rgba(3,7,5,.98));
}
.home-page .feature-card{
  min-height:150px;padding:23px 23px;
  grid-template-columns:62px 1fr;gap:17px;
  border:0;border-right:1px solid var(--home-border-soft);border-radius:0!important;
  background:transparent;
}
.home-page .feature-card:last-child{border-right:0}
.home-page .feature-icon{width:54px;height:54px;border-color:rgba(30,107,77,.72)}
.home-page .feature-icon svg{width:34px;height:34px;stroke:var(--home-gold)}
.home-page .feature-card h3{
  color:#d9b451;font-size:17px;line-height:1.26;margin:0 0 9px;
  font-weight:700;letter-spacing:.02em;
}
.home-page .feature-card p{font-size:13.5px;line-height:1.46;color:#a8aaa5;margin:2px 0}

.home-page .dashboard-row{
  margin:14px 3.2vw 0;min-height:245px;
  grid-template-columns:.95fr 1fr 1.38fr;
  border:1px solid var(--home-border);border-radius:7px;overflow:hidden;
}
.home-page .dashboard-card{
  border:0;border-right:1px solid var(--home-border-soft);border-radius:0!important;
  background:linear-gradient(180deg,rgba(6,12,9,.97),rgba(3,7,5,.98));
  padding:28px 28px;
}
.home-page .dashboard-card:last-child{border-right:0}
.home-page .dashboard-card h2{
  font-family:"Manrope","Segoe UI",sans-serif;font-size:21px;font-weight:600;
  letter-spacing:.01em;color:#31b669;text-transform:uppercase;
}
.home-page .stats{margin-top:30px}
.home-page .stats strong{color:#c99c3e;font-size:44px;font-weight:700}
.home-page .stats span{font-size:12.5px;color:#bec0ba;line-height:1.45}
.home-page .join-card h2{color:#d3a64a;font-size:22px}
.home-page .join-card p{font-size:14.5px;color:#bbbdb8;margin:19px 0 24px;line-height:1.65}
.home-page .join-button{height:48px;min-height:48px;font-size:11px}
.home-page .news-item{grid-template-columns:84px 1fr;gap:13px;margin-top:15px}
.home-page .news-item img{width:84px;height:58px;border-color:var(--home-border)}
.home-page .news-item time{color:#777c76;font-size:9px}
.home-page .news-item strong{font-size:14.5px;line-height:1.3}
.home-page .news-item span{font-size:12.5px;line-height:1.35}
.home-page .card-head a{color:#35b56d;font-size:11.5px;font-weight:700}

.home-page .home-ranking{
  margin:14px 3.2vw 0;padding:18px 18px 20px;
  border:1px solid var(--home-border);border-radius:7px;
  background:linear-gradient(180deg,rgba(6,12,9,.97),rgba(3,7,5,.98));
}
.home-page .section-headline{display:flex;justify-content:space-between;align-items:center;margin:0 4px 12px}
.home-page .section-headline h2{
  margin:0;color:#d5a745;text-transform:uppercase;font-size:17px;font-weight:600;letter-spacing:.02em;
}
.home-page .section-headline a{
  color:#c99d45;text-decoration:none;text-transform:uppercase;font-size:11.5px;font-weight:700;letter-spacing:.04em;
}
.home-page .ranking-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.home-page .player-rank{
  min-width:0;display:grid;grid-template-columns:54px 1fr;gap:11px;align-items:center;
  padding:12px;border:1px solid rgba(212,175,55,.32);border-radius:5px;
  background:linear-gradient(135deg,rgba(10,23,16,.96),rgba(3,7,5,.96));
}
.home-page .rank-medallion{
  width:48px;height:48px;border:1px solid rgba(212,175,55,.7);border-radius:50%;
  display:grid;place-items:center;color:#cfaa58;font:600 12px/1 "JetBrains Mono",monospace;
  background:radial-gradient(circle,rgba(30,107,77,.22),transparent 68%);
}
.home-page .player-rank div{min-width:0;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto}
.home-page .player-rank small{
  grid-column:1/-1;color:#c7c7c2;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.home-page .player-rank strong{color:#d4aa4d;font-size:24px;line-height:1.25}
.home-page .player-rank em{align-self:end;color:#777c76;font-size:10.5px;font-style:normal;text-align:right}

.home-page .home-cta{
  min-height:205px;margin:14px 3.2vw 18px;
  display:grid;grid-template-columns:34% 66%;overflow:hidden;
  border:1px solid var(--home-border);border-radius:7px;
  background:#050907;
}
.home-page .home-cta-copy{padding:27px 30px;position:relative;z-index:2}
.home-page .home-cta-copy h2{
  margin:0;color:#e0e0db;text-transform:uppercase;font-size:25px;line-height:1.2;letter-spacing:.01em;
}
.home-page .home-cta-copy p{margin:12px 0 17px;color:#9fa39d;font-size:11px}
.home-page .home-cta-copy .btn{min-height:40px;padding:0 22px;font-size:10px}
.home-page .home-cta-visual{
  min-height:205px;background-image:
    linear-gradient(90deg,#050907 0%,rgba(5,9,7,.22) 21%,rgba(5,9,7,.02) 60%),
    url("assets/hero-club.jpg");
  background-size:cover;background-position:center 64%;filter:saturate(.85) brightness(.78);
}

.home-page .home-footer{
  margin:0;padding:28px 3.2vw 0;min-height:245px;
  display:grid;grid-template-columns:1.4fr .65fr .8fr .9fr;gap:40px;align-items:start;
  border-top:1px solid var(--home-border);background:#020403;
}
.home-page .footer-brand-rich{display:block}
.home-page .footer-brand-title{display:flex;align-items:center;gap:14px}
.home-page .footer-brand-title img{width:70px;height:56px}
.home-page .footer-brand-title b{display:block;color:#d3aa50;font-size:27px;line-height:1;font-weight:700}
.home-page .footer-brand-title small{color:#967631;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em}
.home-page .footer-brand-rich p{color:#8f938d;font-size:12.5px;line-height:1.7;margin:16px 0 0}
.home-page .footer-column{display:flex;flex-direction:column;gap:7px}
.home-page .footer-column h3{margin:0 0 8px;color:#c89b3e;text-transform:uppercase;font-size:13.5px;font-weight:700}
.home-page .footer-column a{color:#999c96;text-decoration:none;font-size:10px}
.home-page .footer-column a:hover{color:#d8b55d}
.home-page .footer-social-column .socials{justify-content:flex-start;gap:12px}
.home-page .footer-social-column .socials a{width:36px;height:36px;color:#c99c3e;border-color:rgba(212,175,55,.48)}
.home-page .footer-bottom{
  grid-column:1/-1;min-height:48px;display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(212,175,55,.13);color:#777b75;font-size:11.5px;
}
.home-page .footer-bottom nav{display:flex;gap:34px}
.home-page .footer-bottom a{color:#888c86;text-decoration:none;text-transform:uppercase}

@media(max-width:1180px){
  .home-page .topbar{grid-template-columns:200px 1fr auto;padding:0 2.4vw}
  .home-page .main-nav{gap:19px}.home-page .main-nav a{font-size:9px}
  .home-page .brand-lockup-copy{display:none}
  .home-page .brand-lockup{width:78px}
  .home-page .feature-card{grid-template-columns:54px 1fr;padding:20px 16px}
  .home-page .dashboard-row{grid-template-columns:1fr 1fr 1.2fr}
  .home-page .ranking-strip{grid-template-columns:repeat(3,1fr)}
  .home-page .player-rank:nth-child(n+4){display:none}
}

@media(max-width:980px){
  .home-page .topbar{height:64px;grid-template-columns:auto 1fr auto;padding:0 18px}
  .home-page .brand-lockup{height:54px;width:68px}.home-page .brand-lockup img{width:64px;height:50px}
  .home-page .main-nav{top:64px;padding-bottom:18px}
  .home-page .top-actions{display:none}
  .home-page .hero{
    height:auto;min-height:0;display:block;padding-top:0;
  }
  .home-page .hero:before{
    content:"";display:block;height:56vw;min-height:250px;max-height:430px;
    background-image:url("assets/hero-club.jpg");background-size:cover;background-position:58% center;
    filter:saturate(.94) contrast(1.05) brightness(.78);
  }
  .home-page .hero-visual{display:none}
  .home-page .hero-shade{display:none}
  .home-page .hero-left{
    width:100%;padding:27px 22px 34px;background:
      radial-gradient(circle at 82% 0,rgba(16,72,46,.13),transparent 35%),#020403;
  }
  .home-page .hero-kicker{font-size:11.5px;margin-bottom:10px;text-align:left}
  .home-page .hero h1{text-align:left;font-size:clamp(34px,8.5vw,52px);line-height:1.03}
  .home-page .hero-lead{text-align:left;font-size:15.5px;margin-top:18px}
  .home-page .hero-buttons{justify-content:flex-start;flex-direction:row;flex-wrap:wrap}
  .home-page .hero-buttons .btn{width:auto;max-width:none;flex:1 1 220px}
  .home-page .feature-grid{grid-template-columns:repeat(2,1fr);margin:14px 18px 0}
  .home-page .feature-card{border-right:1px solid var(--home-border-soft);border-bottom:1px solid var(--home-border-soft)}
  .home-page .feature-card:nth-child(2n){border-right:0}
  .home-page .feature-card:nth-last-child(-n+2){border-bottom:0}
  .home-page .dashboard-row{margin:14px 18px 0;border-radius:7px}
  .home-page .dashboard-card{border-right:0;border-bottom:1px solid var(--home-border-soft)}
  .home-page .dashboard-card:last-child{border-bottom:0}
  .home-page .home-ranking{margin:14px 18px 0}
  .home-page .ranking-strip{grid-template-columns:repeat(2,1fr)}
  .home-page .player-rank:nth-child(3){display:none}
  .home-page .home-cta{margin:14px 18px 18px;grid-template-columns:1fr;display:flex;flex-direction:column}
  .home-page .home-cta-visual{order:-1;min-height:280px;background-image:url("assets/hero-club.jpg");background-position:58% center}
  .home-page .home-cta-copy{padding:24px 22px 28px}
  .home-page .home-footer{padding:28px 20px 0;grid-template-columns:1fr 1fr;text-align:left}
  .home-page .footer-brand-rich{grid-column:1/-1}
  .home-page .footer-brand-title{justify-content:flex-start}
  .home-page .footer-social-column .socials{justify-content:flex-start}
  .home-page .footer-bottom{grid-column:1/-1;gap:18px}
}

@media(max-width:620px){
  .home-page .hero:before{height:66vw;min-height:235px;background-position:58% center}
  .home-page .hero-left{padding:24px 18px 30px}
  .home-page .hero h1{font-size:clamp(31px,9.4vw,42px)}
  .home-page .hero h1 span{font-size:1.14em}
  .home-page .hero-lead{font-size:14.5px;line-height:1.55}
  .home-page .hero-buttons{flex-direction:column;gap:9px}
  .home-page .hero-buttons .btn{width:100%;flex:auto}
  .home-page .feature-grid{grid-template-columns:1fr;margin:12px 12px 0}
  .home-page .feature-card{min-height:112px;border-right:0!important;border-bottom:1px solid var(--home-border-soft)!important}
  .home-page .feature-card:last-child{border-bottom:0!important}
  .home-page .dashboard-row{margin:12px 12px 0}
  .home-page .dashboard-card{padding:21px 18px}
  .home-page .dashboard-card h2{font-size:18px}
  .home-page .stats strong{font-size:32px}.home-page .stats span{font-size:8px}
  .home-page .news-item{grid-template-columns:72px 1fr}.home-page .news-item img{width:72px;height:52px}
  .home-page .home-ranking{margin:12px 12px 0;padding:16px 12px}
  .home-page .section-headline h2{font-size:15px}.home-page .section-headline a{font-size:8px}
  .home-page .ranking-strip{grid-template-columns:1fr}.home-page .player-rank:nth-child(2){display:none}
  .home-page .home-cta{margin:12px 12px 16px}.home-page .home-cta-visual{min-height:210px}
  .home-page .home-cta-copy h2{font-size:22px}
  .home-page .home-footer{grid-template-columns:1fr;gap:25px;padding:26px 18px 0}
  .home-page .footer-brand-rich,.home-page .footer-bottom{grid-column:1}
  .home-page .footer-bottom{align-items:flex-start;flex-direction:column;padding:15px 0 17px;min-height:0}
  .home-page .footer-bottom nav{gap:16px;flex-wrap:wrap}
}

/* Home header preserves all original destinations while keeping the new composition. */
@media(min-width:1181px){
  .home-page .topbar{grid-template-columns:minmax(230px,.9fr) minmax(500px,1.4fr) minmax(370px,1.1fr);gap:18px}
  .home-page .main-nav{gap:20px}
  .home-page .main-nav a{font-size:9px}
  .home-page .top-actions{gap:8px}
  .home-page .top-actions .btn{padding:0 12px;font-size:10.5px;min-height:36px}
}
@media(min-width:981px) and (max-width:1180px){
  .home-page .topbar{grid-template-columns:90px 1fr auto}
  .home-page .main-nav{gap:13px}
  .home-page .main-nav a{font-size:8px}
  .home-page .top-actions{gap:6px}
  .home-page .top-actions .btn{padding:0 9px;font-size:9.5px;min-height:34px}
}

/* =========================================================
   BUG HOME v2.36 — exact approved compact premium composition
   One navigation, one hero image, no duplicated CTA/footer navigation.
   ========================================================= */
.home-page{
  --lux-gold:#d1a246;
  --lux-gold-hi:#f0d37b;
  --lux-green:#0c4d31;
  --lux-panel:#040806;
  --lux-line:rgba(208,160,66,.34);
  font-family:"Bahnschrift","Arial Narrow","Segoe UI",Arial,sans-serif;
  background:#010302;
}
.home-page .site-shell{background:#010302;min-height:100vh}
.home-page .topbar{
  height:72px;position:sticky;top:0;z-index:80;
  grid-template-columns:300px 1fr 150px;gap:18px;padding:0 28px;
  background:rgba(1,3,2,.985);border-bottom:1px solid rgba(208,160,66,.28);backdrop-filter:blur(12px)
}
.home-page .brand-lockup{height:64px;gap:14px}
.home-page .brand-lockup img{width:78px;height:58px}
.home-page .brand-lockup-copy b{font-family:"Bahnschrift SemiCondensed","Arial Narrow",sans-serif;font-size:28px;line-height:.95;color:#e3ba57;letter-spacing:.025em}
.home-page .brand-lockup-copy small{margin-top:4px;font-size:10.5px;letter-spacing:.08em;color:#b4882e}
.home-page .main-nav{gap:34px;justify-content:center}
.home-page .main-nav a{
  padding:27px 0 24px;font-family:"Bahnschrift SemiCondensed","Arial Narrow",sans-serif;
  font-size:14.5px;font-weight:600;letter-spacing:.02em;color:#e2e0da;text-transform:uppercase
}
.home-page .main-nav a.active{color:#e2b451}
.home-page .main-nav a.active:after{background:#d9a93f;height:2px}
.home-page .top-actions{display:flex;justify-content:flex-end}
.home-page .top-actions .btn{min-width:112px;min-height:40px;padding:0 20px;font-size:13.5px;color:#e2b451;border-color:rgba(209,162,70,.78);background:rgba(0,0,0,.12)}
.home-page .menu-button{border:0}

.home-page .hero{height:455px;min-height:455px;max-height:none;border-bottom:1px solid rgba(208,160,66,.25)}
.home-page .hero-visual{inset:0;background-size:cover;background-position:center 56%;filter:saturate(.96) contrast(1.08) brightness(.76);transform:none}
.home-page .hero-shade{background:linear-gradient(90deg,#010302 0%,rgba(1,3,2,.98) 24%,rgba(1,3,2,.82) 35%,rgba(1,3,2,.24) 59%,rgba(1,3,2,.02) 100%),linear-gradient(180deg,rgba(0,0,0,.02) 65%,rgba(0,0,0,.38) 100%)}
.home-page .hero-left{width:540px;padding:30px 0 0 4.5vw}
.home-page .hero-kicker{margin:0 0 11px;color:#a77d2d;font:600 11px/1.1 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif;letter-spacing:.19em}
.home-page .hero h1{
  margin:0;font-family:"Bahnschrift Condensed","Arial Narrow","Segoe UI",sans-serif;
  font-size:50px;line-height:.94;font-weight:700;letter-spacing:-.025em;text-transform:uppercase;color:#e7e5de
}
.home-page .hero h1 span{display:inline-block;font-size:1.25em;color:#d6a644;letter-spacing:-.03em}
.home-page .hero-divider{width:255px;height:12px;margin:12px 0 9px;display:flex;align-items:center;gap:8px}
.home-page .hero-divider i{height:1px;flex:1;background:linear-gradient(90deg,transparent,#b78a32)}
.home-page .hero-divider i:last-child{background:linear-gradient(90deg,#b78a32,transparent)}
.home-page .hero-divider b{width:7px;height:7px;border:1px solid #c99a3c;transform:rotate(45deg)}
.home-page .hero-lead{margin:0;color:#c0c0bb;font-size:16.5px;line-height:1.45;font-family:"Bahnschrift","Segoe UI",Arial,sans-serif}
.home-page .hero-buttons{margin-top:16px;gap:14px}
.home-page .hero-buttons .btn{min-height:42px;padding:0 26px;font-size:13.5px;font-family:"Bahnschrift SemiCondensed","Arial Narrow",sans-serif}

.home-page .feature-grid{
  margin:0 4.35vw;border:1px solid var(--lux-line);border-radius:0;overflow:hidden;transform:translateY(-1px);
  background:linear-gradient(180deg,rgba(5,10,7,.97),rgba(2,6,4,.99))
}
.home-page .feature-card{min-height:130px;padding:16px 20px;grid-template-columns:76px 1fr;gap:12px;border:0;border-right:1px solid rgba(208,160,66,.19);background:transparent}
.home-page .feature-card:last-child{border-right:0}
.home-page .feature-icon{
  width:60px;height:60px;border:1px solid rgba(208,160,66,.65);border-radius:50%;
  background:radial-gradient(circle at 42% 35%,rgba(233,190,87,.13),rgba(5,13,9,.92) 62%);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.32),0 5px 18px rgba(0,0,0,.35)
}
.home-page .premium-icon svg{width:42px;height:42px;overflow:visible;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.home-page .feature-card h3{margin:0 0 6px;color:#ddb055;font:700 15px/1.13 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif;letter-spacing:.015em;text-transform:uppercase}
.home-page .feature-card p{margin:0;color:#aeb0ab;font-size:13.5px;line-height:1.42;font-family:"Bahnschrift","Segoe UI",Arial,sans-serif}

.home-page .dashboard-row{
  margin:8px 4.35vw 0;min-height:205px;grid-template-columns:1.02fr .92fr 1.4fr;
  border:1px solid var(--lux-line);border-radius:0;overflow:hidden
}
.home-page .dashboard-card{padding:18px 24px;border:0;border-right:1px solid rgba(208,160,66,.19);border-radius:0;background:linear-gradient(180deg,rgba(5,10,7,.985),rgba(2,6,4,.99))}
.home-page .dashboard-card:last-child{border-right:0}
.home-page .dashboard-card h2{font:700 18px/1.1 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif;letter-spacing:.02em;color:#d4a347;text-transform:uppercase}
.home-page .stats{margin-top:21px}
.home-page .stats>div{padding:0 10px;border-right:1px solid rgba(208,160,66,.18)}
.home-page .stats strong{font-family:"Bahnschrift Condensed","Arial Narrow",sans-serif;color:#d1a149;font-size:47px;font-weight:600;line-height:.9}
.home-page .stats span{margin-top:12px;color:#c2c1bb;font-size:12.5px;line-height:1.3;font-weight:600}
.home-page .join-card{padding-left:30px;padding-right:30px}
.home-page .join-card h2{font-size:20px;color:#d7a844}
.home-page .join-card p{font-size:14.5px;line-height:1.5;margin:18px 0 20px;color:#b8bab5}
.home-page .join-button{height:42px;min-height:42px;font-size:11px}
.home-page .card-head{align-items:center}
.home-page .card-head a{font:700 9px/1 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif;color:#d4a347;letter-spacing:.025em}
.home-page .news-item{grid-template-columns:78px 1fr;gap:11px;margin-top:8px;align-items:center}
.home-page .news-item img,.home-page .news-trophy{width:78px;height:47px;border:1px solid rgba(208,160,66,.34);background:#030604;object-fit:cover}
.home-page .news-trophy{display:grid;place-items:center;color:#d1a249;font-size:27px;font-family:Georgia,serif}
.home-page .news-item time{font-size:11.5px;color:#8a8c87;margin-bottom:2px}
.home-page .news-item strong{font-size:13.5px;line-height:1.2;color:#ece8de;font-weight:600;margin-bottom:2px}
.home-page .news-item span{font-size:11.5px;line-height:1.25;color:#858984}

.home-page .home-footer-minimal{
  min-height:56px;margin:0 4.35vw;padding:0;display:flex;align-items:center;justify-content:space-between;
  gap:20px;border-top:0;color:#81847f;background:#010302;font-size:9px
}
.home-page .home-footer-minimal nav{display:flex;align-items:center;gap:38px}
.home-page .home-footer-minimal a{color:#969792;text-decoration:none;text-transform:uppercase;letter-spacing:.03em}
.home-page .home-footer-minimal a:hover{color:#d4a347}
.home-page .home-footer-minimal b{color:#d4a347;font-weight:400;margin-left:8px}

@media (min-width:1500px){
  .home-page .hero{height:470px;min-height:470px}
  .home-page .hero-left{padding-left:4.35vw}
}

@media (max-width:1180px){
  .home-page .topbar{grid-template-columns:210px 1fr 110px;padding:0 20px}
  .home-page .brand-lockup-copy{display:flex}.home-page .brand-lockup img{width:62px;height:50px}
  .home-page .brand-lockup-copy b{font-size:24px}.home-page .brand-lockup-copy small{font-size:7px}
  .home-page .main-nav{gap:17px}.home-page .main-nav a{font-size:9px}
  .home-page .feature-card{grid-template-columns:60px 1fr;padding:14px 14px}
  .home-page .dashboard-row{grid-template-columns:1fr 1fr 1.25fr}
}

@media (max-width:980px){
  .home-page .topbar{height:64px;grid-template-columns:1fr auto;padding:0 16px}
  .home-page .brand-lockup{width:auto;height:56px}.home-page .brand-lockup img{width:58px;height:48px}.home-page .brand-lockup-copy{display:flex}
  .home-page .main-nav{display:none;position:absolute;top:64px;left:0;right:0;padding:12px 18px 18px;background:rgba(1,3,2,.99);border-bottom:1px solid var(--lux-line);flex-direction:column;align-items:stretch;gap:0}
  .home-page .main-nav.open{display:flex}.home-page .main-nav a{padding:12px 0;font-size:14.5px;border-bottom:1px solid rgba(255,255,255,.05)}
  .home-page .top-actions{display:none}.home-page .menu-button{display:block;justify-self:end;width:42px;height:42px;font-size:0;position:relative}
  .home-page .menu-button::before,.home-page .menu-button::after{content:"";position:absolute;left:9px;right:9px;height:1px;background:#d4aa4d}
  .home-page .menu-button::before{top:13px;box-shadow:0 7px 0 #d4aa4d}.home-page .menu-button::after{top:27px}
  .home-page .hero{height:620px;min-height:620px;display:block}
  .home-page .hero-visual{display:block;inset:0;background-position:63% center}
  .home-page .hero-shade{display:block;background:linear-gradient(180deg,rgba(1,3,2,.10) 0%,rgba(1,3,2,.28) 36%,rgba(1,3,2,.93) 72%,#010302 100%),linear-gradient(90deg,rgba(1,3,2,.68),rgba(1,3,2,.06) 72%)}
  .home-page .hero-left{width:100%;padding:250px 22px 28px}
  .home-page .hero-kicker{font-size:9px}.home-page .hero h1{font-size:clamp(38px,9vw,54px)}
  .home-page .hero-divider{width:220px}.home-page .hero-lead{font-size:13px}
  .home-page .hero-buttons{flex-direction:row;flex-wrap:wrap}.home-page .hero-buttons .btn{flex:1 1 220px}
  .home-page .feature-grid{grid-template-columns:repeat(2,1fr);margin:0 14px}
  .home-page .feature-card{border-right:1px solid rgba(208,160,66,.19);border-bottom:1px solid rgba(208,160,66,.19)}
  .home-page .feature-card:nth-child(2n){border-right:0}.home-page .feature-card:nth-last-child(-n+2){border-bottom:0}
  .home-page .dashboard-row{grid-template-columns:1fr;margin:8px 14px 0}.home-page .dashboard-card{border-right:0;border-bottom:1px solid rgba(208,160,66,.19)}.home-page .dashboard-card:last-child{border-bottom:0}
  .home-page .home-footer-minimal{margin:0 14px;min-height:72px;flex-direction:column;justify-content:center;align-items:flex-start;padding:14px 0}.home-page .home-footer-minimal nav{gap:18px;flex-wrap:wrap}
}

@media (max-width:620px){
  .home-page .brand-lockup-copy b{font-size:21px}.home-page .brand-lockup-copy small{font-size:6px}
  .home-page .hero{height:580px;min-height:580px}.home-page .hero-left{padding:225px 16px 24px}.home-page .hero h1{font-size:clamp(34px,10.2vw,46px)}
  .home-page .hero-lead{font-size:14.5px;line-height:1.45}.home-page .hero-buttons{flex-direction:column;gap:8px}.home-page .hero-buttons .btn{width:100%;flex:auto}
  .home-page .feature-grid{grid-template-columns:1fr;margin:0 10px}.home-page .feature-card{min-height:112px;border-right:0!important;border-bottom:1px solid rgba(208,160,66,.19)!important}.home-page .feature-card:last-child{border-bottom:0!important}
  .home-page .dashboard-row{margin:8px 10px 0}.home-page .dashboard-card{padding:18px 16px}.home-page .stats strong{font-size:39px}.home-page .stats span{font-size:8px}
  .home-page .news-item{grid-template-columns:72px 1fr}.home-page .news-item img,.home-page .news-trophy{width:72px;height:45px}
  .home-page .home-footer-minimal{margin:0 10px;font-size:8px}.home-page .home-footer-minimal nav{gap:14px}
}

/* =========================================================
   BUG HOME v2.37 — approved premium mockup alignment
   Strictly home-page only. One navigation. Compact one-screen rhythm.
   ========================================================= */
.home-page{
  --lux-gold:#d2a347;
  --lux-gold-hi:#e1b85f;
  --lux-line:rgba(194,145,52,.46);
  --lux-line-soft:rgba(194,145,52,.22);
  --lux-panel:#030806;
}
.home-page .site-shell{background:#010302!important;}

/* Header: full navigation on desktop/landscape; hamburger only on genuinely narrow screens. */
.home-page .topbar{
  position:relative!important;
  top:auto!important;
  height:78px!important;
  min-height:78px!important;
  display:grid!important;
  grid-template-columns:315px minmax(0,1fr) 120px!important;
  align-items:center!important;
  gap:18px!important;
  padding:0 2.8vw!important;
  background:#010302!important;
  border-bottom:1px solid rgba(194,145,52,.32)!important;
  backdrop-filter:none!important;
}
.home-page .brand-lockup{height:66px!important;gap:14px!important;}
.home-page .brand-lockup img{width:76px!important;height:60px!important;object-fit:contain!important;}
.home-page .brand-lockup-copy b{
  font-family:"Bahnschrift SemiCondensed","Arial Narrow","Segoe UI",sans-serif!important;
  font-size:29px!important;line-height:.92!important;font-weight:700!important;
  letter-spacing:.025em!important;color:#dcb354!important;
}
.home-page .brand-lockup-copy small{
  margin-top:5px!important;font-family:"Bahnschrift SemiCondensed","Arial Narrow","Segoe UI",sans-serif!important;
  font-size:10.5px!important;font-weight:600!important;letter-spacing:.08em!important;color:#a77d2e!important;
}
.home-page .main-nav{
  position:static!important;display:flex!important;flex-direction:row!important;align-items:center!important;
  justify-content:center!important;gap:clamp(20px,2vw,38px)!important;width:auto!important;height:78px!important;
  padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;
  opacity:1!important;visibility:visible!important;transform:none!important;
}
.home-page .main-nav a{
  display:flex!important;align-items:center!important;height:78px!important;padding:0!important;border:0!important;
  color:#d6d3cb!important;font-family:"Bahnschrift SemiCondensed","Arial Narrow","Segoe UI",sans-serif!important;
  font-size:14.5px!important;font-weight:600!important;letter-spacing:.025em!important;text-transform:uppercase!important;
  position:relative!important;
}
.home-page .main-nav a.active{color:#dcb354!important;}
.home-page .main-nav a.active::after{
  content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;
  height:2px!important;background:#d2a347!important;
}
.home-page .top-actions{display:flex!important;position:static!important;justify-self:end!important;width:auto!important;padding:0!important;background:none!important;}
.home-page .top-actions .btn{
  min-width:112px!important;width:112px!important;min-height:40px!important;height:40px!important;padding:0 18px!important;
  color:#dcb354!important;border-color:rgba(210,163,71,.76)!important;background:transparent!important;
  font:600 11px/1 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;letter-spacing:.04em!important;
}
.home-page .menu-button{display:none!important;}

/* Hero: same proportions and visual balance as the approved mockup. */
.home-page .hero{
  height:438px!important;min-height:438px!important;max-height:438px!important;
  position:relative!important;overflow:hidden!important;border-bottom:0!important;background:#010302!important;
}
.home-page .hero-visual{
  display:block!important;position:absolute!important;inset:0 0 0 36%!important;
  background-image:url("assets/hero-home-approved.jpg")!important;
  background-size:cover!important;background-position:center 54%!important;background-repeat:no-repeat!important;
  filter:saturate(.93) contrast(1.08) brightness(.80)!important;transform:none!important;
}
.home-page .hero-shade{
  display:block!important;position:absolute!important;inset:0!important;
  background:
    linear-gradient(90deg,#010302 0%,#010302 25%,rgba(1,3,2,.94) 34%,rgba(1,3,2,.58) 43%,rgba(1,3,2,.10) 56%,rgba(1,3,2,.015) 100%),
    linear-gradient(180deg,rgba(0,0,0,.02) 62%,rgba(0,0,0,.18) 100%)!important;
}
.home-page .hero-left{
  position:relative!important;z-index:2!important;width:510px!important;min-width:0!important;
  padding:34px 0 0 5.55vw!important;
}
.home-page .hero-kicker{
  margin:0 0 15px!important;color:#a77d2e!important;
  font:600 11px/1 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;letter-spacing:.20em!important;text-transform:uppercase!important;
}
.home-page .hero h1{
  margin:0!important;color:#e9e7df!important;
  font-family:"Bahnschrift Condensed","Arial Narrow","Segoe UI",sans-serif!important;
  font-size:51px!important;line-height:.92!important;font-weight:700!important;letter-spacing:-.02em!important;text-transform:uppercase!important;
}
.home-page .hero h1 span{display:inline-block!important;color:#d8aa4b!important;font-size:1.26em!important;letter-spacing:-.025em!important;}
.home-page .hero-divider{display:none!important;}
.home-page .hero-lead{
  margin:17px 0 0!important;color:#bcbdb8!important;
  font:400 14px/1.46 "Bahnschrift","Segoe UI",Arial,sans-serif!important;letter-spacing:0!important;
}
.home-page .hero-buttons{display:flex!important;flex-direction:row!important;gap:16px!important;margin-top:17px!important;}
.home-page .hero-buttons .btn{
  flex:0 0 auto!important;min-width:0!important;height:44px!important;min-height:44px!important;padding:0 28px!important;
  font:600 11px/1 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;letter-spacing:.035em!important;
}
.home-page .hero-buttons .btn-green{min-width:288px!important;justify-content:space-between!important;}
.home-page .hero-buttons .btn-outline{min-width:195px!important;}

/* Feature rail: exactly four equal premium modules. */
.home-page .feature-grid{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;
  margin:0 5.55vw!important;transform:none!important;height:144px!important;min-height:144px!important;
  border:1px solid var(--lux-line)!important;border-radius:0!important;overflow:hidden!important;
  background:linear-gradient(180deg,#050a07,#020604)!important;
}
.home-page .feature-card{
  min-height:142px!important;height:142px!important;display:grid!important;grid-template-columns:94px minmax(0,1fr)!important;
  gap:15px!important;align-items:center!important;padding:18px 20px!important;background:transparent!important;
  border:0!important;border-right:1px solid var(--lux-line-soft)!important;border-radius:0!important;
}
.home-page .feature-card:last-child{border-right:0!important;}
.home-page .feature-icon{
  width:68px!important;height:68px!important;border:1px solid rgba(210,163,71,.68)!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;
  background:radial-gradient(circle at 38% 30%,rgba(230,190,92,.14),rgba(5,12,8,.98) 66%)!important;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.30),0 5px 16px rgba(0,0,0,.36)!important;
}
.home-page .premium-icon svg{width:46px!important;height:46px!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.60))!important;}
.home-page .feature-card h3{
  margin:0 0 7px!important;color:#dcb354!important;
  font:700 16px/1.08 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;letter-spacing:.015em!important;text-transform:uppercase!important;
}
.home-page .feature-card p{
  margin:0!important;color:#a8aaa5!important;font:400 11.5px/1.42 "Bahnschrift","Segoe UI",Arial,sans-serif!important;
}

/* Dashboard: dense premium lower rail. */
.home-page .dashboard-row{
  display:grid!important;grid-template-columns:1.02fr .88fr 1.34fr!important;
  margin:10px 5.55vw 0!important;height:232px!important;min-height:232px!important;
  border:1px solid var(--lux-line)!important;border-radius:0!important;overflow:hidden!important;background:#020604!important;
}
.home-page .dashboard-card{
  height:230px!important;min-height:230px!important;padding:22px 24px!important;background:linear-gradient(180deg,#050a07,#020604)!important;
  border:0!important;border-right:1px solid var(--lux-line-soft)!important;border-radius:0!important;
}
.home-page .dashboard-card:last-child{border-right:0!important;}
.home-page .dashboard-card h2{
  margin:0!important;color:#d6a749!important;
  font:700 18px/1.08 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;letter-spacing:.02em!important;text-transform:uppercase!important;
}
.home-page .stats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;margin-top:30px!important;}
.home-page .stats>div{padding:0 12px!important;border-right:1px solid rgba(210,163,71,.18)!important;}
.home-page .stats>div:last-child{border-right:0!important;}
.home-page .stats strong{
  display:block!important;color:#d0a048!important;font:600 50px/.9 "Bahnschrift Condensed","Arial Narrow",sans-serif!important;
}
.home-page .stats span{
  display:block!important;margin-top:15px!important;color:#c3c3bd!important;
  font:600 10px/1.35 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;text-transform:uppercase!important;
}
.home-page .join-card{padding-left:36px!important;padding-right:36px!important;}
.home-page .join-card h2{font-size:20px!important;}
.home-page .join-card p{margin:24px 0 23px!important;color:#b7b9b4!important;font:400 12px/1.55 "Bahnschrift","Segoe UI",Arial,sans-serif!important;}
.home-page .join-button{height:44px!important;min-height:44px!important;width:100%!important;font-size:13.5px!important;justify-content:space-between!important;}
.home-page .card-head{display:flex!important;align-items:center!important;justify-content:space-between!important;}
.home-page .card-head a{color:#d6a749!important;font:700 9px/1 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;text-transform:uppercase!important;}
.home-page .news-item{display:grid!important;grid-template-columns:104px minmax(0,1fr)!important;gap:14px!important;align-items:center!important;margin-top:9px!important;}
.home-page .news-item img,.home-page .news-trophy{width:104px!important;height:48px!important;border:1px solid rgba(210,163,71,.34)!important;background:#020604!important;object-fit:cover!important;}
.home-page .news-trophy{display:grid!important;place-items:center!important;color:#d3a54a!important;font:400 28px/1 Georgia,serif!important;}
.home-page .news-item time{display:block!important;margin:0 0 2px!important;color:#82857f!important;font-size:11.5px!important;}
.home-page .news-item strong{display:block!important;margin:0 0 2px!important;color:#ece8df!important;font-size:14px!important;line-height:1.16!important;font-weight:600!important;}
.home-page .news-item span{display:block!important;color:#8b8f89!important;font-size:12px!important;line-height:1.2!important;}

.home-page .home-footer-minimal{
  min-height:65px!important;height:65px!important;margin:0 5.55vw!important;padding:0!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;
  gap:24px!important;border-top:0!important;background:#010302!important;color:#7f827d!important;font-size:11.5px!important;
}
.home-page .home-footer-minimal nav{display:flex!important;align-items:center!important;gap:42px!important;}
.home-page .home-footer-minimal a{color:#8e918b!important;text-decoration:none!important;text-transform:uppercase!important;letter-spacing:.025em!important;}
.home-page .home-footer-minimal b{color:#d0a047!important;font-weight:400!important;margin-left:8px!important;}

/* Fit the approved desktop composition even at Windows/browser zoom levels. */
@media (min-width:1000px) and (max-width:1320px){
  .home-page .topbar{grid-template-columns:260px minmax(0,1fr) 100px!important;padding:0 20px!important;gap:10px!important;}
  .home-page .brand-lockup img{width:64px!important;height:52px!important;}
  .home-page .brand-lockup-copy b{font-size:24px!important}.home-page .brand-lockup-copy small{font-size:7px!important}
  .home-page .main-nav{display:flex!important;height:78px!important;gap:clamp(10px,1.2vw,18px)!important;}
  .home-page .main-nav a{display:flex!important;height:78px!important;font-size:11.5px!important;}
  .home-page .top-actions{display:flex!important}.home-page .top-actions .btn{width:96px!important;min-width:96px!important;font-size:11.5px!important;}
  .home-page .menu-button{display:none!important;}
  .home-page .hero-left{width:470px!important;padding-left:4.2vw!important;}
  .home-page .hero h1{font-size:45px!important;}
  .home-page .hero-lead{font-size:14.5px!important;}
  .home-page .hero-buttons .btn-green{min-width:245px!important}.home-page .hero-buttons .btn-outline{min-width:170px!important;}
  .home-page .feature-grid,.home-page .dashboard-row,.home-page .home-footer-minimal{margin-left:3.4vw!important;margin-right:3.4vw!important;}
  .home-page .feature-card{grid-template-columns:78px minmax(0,1fr)!important;padding:16px 14px!important;gap:10px!important;}
  .home-page .feature-icon{width:60px!important;height:60px!important}.home-page .premium-icon svg{width:40px!important;height:40px!important}
  .home-page .feature-card h3{font-size:14px!important}.home-page .feature-card p{font-size:10px!important}
  .home-page .dashboard-card{padding:20px 18px!important}.home-page .news-item{grid-template-columns:82px minmax(0,1fr)!important;gap:10px!important}.home-page .news-item img,.home-page .news-trophy{width:82px!important}
}

/* Mobile/tablet remains readable, but desktop rules above are not allowed to collapse early. */
@media (max-width:999px){
  .home-page .topbar{
    height:64px!important;min-height:64px!important;grid-template-columns:minmax(0,1fr) 48px!important;
    padding:0 16px!important;gap:10px!important;
  }
  .home-page .brand-lockup{height:56px!important}.home-page .brand-lockup img{width:58px!important;height:48px!important}
  .home-page .brand-lockup-copy b{font-size:22px!important}.home-page .brand-lockup-copy small{font-size:6px!important}
  .home-page .main-nav,.home-page .top-actions{display:none!important;}
  .home-page .menu-button{display:block!important;justify-self:end!important;width:42px!important;height:42px!important;font-size:0!important;position:relative!important;}
  .home-page .menu-button::before,.home-page .menu-button::after{content:""!important;position:absolute!important;left:8px!important;right:8px!important;height:2px!important;background:#d8d5cd!important;}
  .home-page .menu-button::before{top:12px!important;box-shadow:0 8px 0 #d8d5cd!important}.home-page .menu-button::after{top:28px!important;}
  .home-page .topbar.menu-open{margin-bottom:0!important;}
  .home-page .topbar.menu-open .main-nav{
    display:flex!important;position:absolute!important;top:64px!important;left:0!important;right:0!important;z-index:101!important;
    height:auto!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:10px 18px 14px!important;
    background:rgba(1,5,3,.995)!important;border-bottom:1px solid rgba(210,163,71,.34)!important;
  }
  .home-page .topbar.menu-open .main-nav a{display:block!important;height:auto!important;padding:11px 2px!important;font-size:14.5px!important;border-bottom:1px solid rgba(255,255,255,.05)!important;}
  .home-page .topbar.menu-open .top-actions{display:block!important;position:absolute!important;top:390px!important;left:18px!important;right:18px!important;z-index:102!important;background:transparent!important;padding:0!important;}
  .home-page .topbar.menu-open .top-actions .btn{width:100%!important;}
  .home-page .hero{height:600px!important;min-height:600px!important;max-height:none!important;}
  .home-page .hero-visual{inset:0!important;background-position:center 54%!important;}
  .home-page .hero-shade{background:linear-gradient(180deg,rgba(1,3,2,.07) 0%,rgba(1,3,2,.20) 34%,rgba(1,3,2,.92) 68%,#010302 100%),linear-gradient(90deg,rgba(1,3,2,.52),rgba(1,3,2,.03) 72%)!important;}
  .home-page .hero-left{width:100%!important;padding:255px 22px 26px!important;}
  .home-page .hero h1{font-size:clamp(40px,8.8vw,54px)!important;}.home-page .hero-lead{font-size:15.5px!important;}
  .home-page .hero-buttons{flex-wrap:wrap!important}.home-page .hero-buttons .btn{flex:1 1 210px!important;min-width:0!important;}
  .home-page .feature-grid{height:auto!important;min-height:0!important;grid-template-columns:1fr 1fr!important;margin:0 14px!important;}
  .home-page .feature-card{height:132px!important;min-height:132px!important;border-right:1px solid var(--lux-line-soft)!important;border-bottom:1px solid var(--lux-line-soft)!important;}
  .home-page .feature-card:nth-child(2n){border-right:0!important}.home-page .feature-card:nth-last-child(-n+2){border-bottom:0!important;}
  .home-page .dashboard-row{height:auto!important;min-height:0!important;grid-template-columns:1fr!important;margin:9px 14px 0!important;}
  .home-page .dashboard-card{height:auto!important;min-height:205px!important;border-right:0!important;border-bottom:1px solid var(--lux-line-soft)!important;}
  .home-page .dashboard-card:last-child{border-bottom:0!important;}
  .home-page .home-footer-minimal{height:auto!important;min-height:72px!important;margin:0 14px!important;padding:14px 0!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;}
}

@media (max-width:620px){
  .home-page .hero{height:570px!important;min-height:570px!important}.home-page .hero-left{padding:235px 16px 22px!important}.home-page .hero h1{font-size:clamp(34px,10.4vw,46px)!important}
  .home-page .hero-buttons{flex-direction:column!important;gap:8px!important}.home-page .hero-buttons .btn{width:100%!important;flex:auto!important;}
  .home-page .feature-grid{grid-template-columns:1fr!important;margin:0 10px!important}.home-page .feature-card{height:118px!important;min-height:118px!important;border-right:0!important;border-bottom:1px solid var(--lux-line-soft)!important}.home-page .feature-card:last-child{border-bottom:0!important}
  .home-page .dashboard-row{margin:9px 10px 0!important}.home-page .dashboard-card{padding:18px 16px!important}.home-page .stats strong{font-size:42px!important}
  .home-page .home-footer-minimal{margin:0 10px!important;font-size:8px!important}.home-page .home-footer-minimal nav{gap:16px!important;flex-wrap:wrap!important}
}

/* =========================================================
   BUG HOME v2.38 — reference geometry pass
   Desktop composition follows the approved 1628×966 mockup.
   ========================================================= */
@media (min-width:760px){
  .home-page .topbar{
    height:76px!important;min-height:76px!important;
    grid-template-columns:300px minmax(620px,1fr) 118px!important;
    padding:0 3.05vw!important;gap:14px!important;
  }
  .home-page .brand-lockup{height:64px!important;gap:12px!important}
  .home-page .brand-lockup img{width:72px!important;height:58px!important}
  .home-page .brand-lockup-copy b{font-size:28px!important;letter-spacing:.015em!important}
  .home-page .brand-lockup-copy small{font-size:10px!important;letter-spacing:.065em!important}
  .home-page .main-nav{display:flex!important;height:76px!important;gap:clamp(22px,2.05vw,36px)!important}
  .home-page .main-nav a{height:76px!important;font-size:13.5px!important;letter-spacing:.018em!important}
  .home-page .top-actions{display:flex!important}.home-page .menu-button{display:none!important}
  .home-page .top-actions .btn{width:108px!important;min-width:108px!important;height:38px!important;min-height:38px!important;font-size:10px!important}

  .home-page .hero{height:392px!important;min-height:392px!important;max-height:392px!important}
  .home-page .hero-visual{inset:0 0 0 31.5%!important;background-position:center 52%!important;filter:saturate(.94) contrast(1.07) brightness(.84)!important}
  .home-page .hero-shade{background:linear-gradient(90deg,#010302 0%,#010302 23%,rgba(1,3,2,.97) 29%,rgba(1,3,2,.77) 36%,rgba(1,3,2,.28) 46%,rgba(1,3,2,.03) 61%,rgba(1,3,2,0) 100%)!important}
  .home-page .hero-left{width:500px!important;padding:29px 0 0 4.8vw!important}
  .home-page .hero-kicker{margin-bottom:13px!important;font-size:12.5px!important;letter-spacing:.19em!important}
  .home-page .hero h1{font-size:48px!important;line-height:.94!important;letter-spacing:-.018em!important}
  .home-page .hero h1 span{font-size:1.31em!important}
  .home-page .hero-lead{margin-top:16px!important;font-size:15px!important;line-height:1.42!important}
  .home-page .hero-buttons{margin-top:15px!important;gap:14px!important}
  .home-page .hero-buttons .btn{height:40px!important;min-height:40px!important;font-size:12.5px!important;padding:0 23px!important}
  .home-page .hero-buttons .btn-green{min-width:270px!important}.home-page .hero-buttons .btn-outline{min-width:178px!important}

  .home-page .feature-grid{margin:0 4.65vw!important;height:136px!important;min-height:136px!important}
  .home-page .feature-card{height:134px!important;min-height:134px!important;grid-template-columns:84px minmax(0,1fr)!important;gap:12px!important;padding:14px 17px!important}
  .home-page .feature-icon{width:62px!important;height:62px!important}
  .home-page .premium-icon svg{width:41px!important;height:41px!important}
  .home-page .feature-card h3{font-size:16.5px!important;line-height:1.08!important;margin-bottom:6px!important}
  .home-page .feature-card p{font-size:12.5px!important;line-height:1.38!important;max-width:205px!important}

  .home-page .dashboard-row{margin:8px 4.65vw 0!important;height:206px!important;min-height:206px!important;grid-template-columns:1.02fr .90fr 1.36fr!important}
  .home-page .dashboard-card{height:204px!important;min-height:204px!important;padding:17px 22px!important}
  .home-page .dashboard-card h2{font-size:16px!important}
  .home-page .stats{margin-top:24px!important}.home-page .stats strong{font-size:44px!important}.home-page .stats span{margin-top:12px!important;font-size:9px!important}
  .home-page .join-card{padding-left:30px!important;padding-right:30px!important}.home-page .join-card h2{font-size:18px!important}.home-page .join-card p{margin:19px 0 18px!important;font-size:13px!important;line-height:1.48!important}.home-page .join-button{height:40px!important;min-height:40px!important;font-size:10px!important}
  .home-page .card-head a{font-size:8px!important}
  .home-page .news-item{grid-template-columns:88px minmax(0,1fr)!important;gap:11px!important;margin-top:7px!important}.home-page .news-item img,.home-page .news-trophy{width:88px!important;height:42px!important}.home-page .news-trophy{font-size:24px!important}.home-page .news-item time{font-size:8px!important}.home-page .news-item strong{font-size:10px!important}.home-page .news-item span{font-size:8.5px!important}

  .home-page .home-footer-minimal{height:62px!important;min-height:62px!important;margin:0 4.65vw!important;font-size:8.5px!important}.home-page .home-footer-minimal nav{gap:38px!important}
}

/* Keep desktop navigation at common laptop widths; collapse only when the rail truly cannot fit. */
@media (min-width:760px) and (max-width:1120px){
  .home-page .topbar{grid-template-columns:235px minmax(470px,1fr) 92px!important;padding:0 18px!important;gap:8px!important}
  .home-page .brand-lockup img{width:58px!important;height:48px!important}.home-page .brand-lockup-copy b{font-size:22px!important}.home-page .brand-lockup-copy small{font-size:6px!important}
  .home-page .main-nav{gap:clamp(9px,1.25vw,15px)!important}.home-page .main-nav a{font-size:8.5px!important}.home-page .top-actions .btn{width:88px!important;min-width:88px!important;font-size:8.5px!important}
}

@media (max-width:759px){
  .home-page .topbar{grid-template-columns:minmax(0,1fr) 48px!important}
  .home-page .main-nav,.home-page .top-actions{display:none!important}.home-page .menu-button{display:block!important}
}

/* =========================================================
   BUG HOME v2.39 — viewport-fit reference lock
   Exact visual rhythm for short desktop/laptop viewports.
   Keeps the approved desktop composition without changing content/JS.
   ========================================================= */
@media (min-width:760px) and (max-height:720px){
  .home-page .topbar{
    height:54px!important;min-height:54px!important;
    grid-template-columns:220px minmax(470px,1fr) 92px!important;
    padding:0 2.25vw!important;gap:10px!important;
  }
  .home-page .brand-lockup{height:48px!important;gap:9px!important}
  .home-page .brand-lockup img{width:54px!important;height:44px!important}
  .home-page .brand-lockup-copy b{font-size:21px!important;line-height:.95!important}
  .home-page .brand-lockup-copy small{font-size:8.3px!important;letter-spacing:.06em!important;margin-top:3px!important}
  .home-page .main-nav{height:54px!important;gap:clamp(12px,1.55vw,24px)!important}
  .home-page .main-nav a{height:54px!important;font-size:8.5px!important}
  .home-page .top-actions .btn{width:88px!important;min-width:88px!important;height:32px!important;min-height:32px!important;font-size:8.5px!important}

  .home-page .hero{height:252px!important;min-height:252px!important;max-height:252px!important}
  .home-page .hero-visual{inset:0 0 0 32.5%!important;background-position:center 53%!important;filter:saturate(.92) contrast(1.08) brightness(.80)!important}
  .home-page .hero-shade{background:linear-gradient(90deg,#010302 0%,#010302 23%,rgba(1,3,2,.98) 29%,rgba(1,3,2,.81) 36%,rgba(1,3,2,.33) 47%,rgba(1,3,2,.05) 62%,rgba(1,3,2,0) 100%)!important}
  .home-page .hero-left{width:430px!important;padding:18px 0 0 4.5vw!important}
  .home-page .hero-kicker{margin:0 0 8px!important;font-size:10.2px!important;letter-spacing:.18em!important}
  .home-page .hero h1{font-size:34px!important;line-height:.92!important;letter-spacing:-.018em!important}
  .home-page .hero h1 span{font-size:1.31em!important}
  .home-page .hero-divider{margin:9px 0 8px!important;width:170px!important}
  .home-page .hero-lead{margin-top:0!important;font-size:11.3px!important;line-height:1.36!important}
  .home-page .hero-buttons{margin-top:10px!important;gap:10px!important}
  .home-page .hero-buttons .btn{height:31px!important;min-height:31px!important;font-size:10.3px!important;padding:0 15px!important}
  .home-page .hero-buttons .btn-green{min-width:205px!important}.home-page .hero-buttons .btn-outline{min-width:142px!important}

  .home-page .feature-grid{margin:0 4.35vw!important;height:90px!important;min-height:90px!important}
  .home-page .feature-card{height:88px!important;min-height:88px!important;grid-template-columns:58px minmax(0,1fr)!important;gap:9px!important;padding:9px 12px!important}
  .home-page .feature-icon{width:46px!important;height:46px!important;border-width:1px!important}
  .home-page .premium-icon svg{width:30px!important;height:30px!important}
  .home-page .feature-card h3{font-size:13px!important;line-height:1.02!important;margin-bottom:4px!important}
  .home-page .feature-card p{font-size:10px!important;line-height:1.28!important;max-width:180px!important}

  .home-page .dashboard-row{margin:6px 4.35vw 0!important;height:137px!important;min-height:137px!important;grid-template-columns:1.02fr .90fr 1.36fr!important}
  .home-page .dashboard-card{height:135px!important;min-height:135px!important;padding:10px 16px!important}
  .home-page .dashboard-card h2{font-size:14.5px!important;line-height:1!important}
  .home-page .stats{margin-top:14px!important}.home-page .stats>div{padding:0 8px!important}
  .home-page .stats strong{font-size:31px!important;line-height:.9!important}.home-page .stats span{margin-top:8px!important;font-size:9.2px!important;line-height:1.2!important}
  .home-page .join-card{padding-left:22px!important;padding-right:22px!important}.home-page .join-card h2{font-size:13px!important}.home-page .join-card p{margin:12px 0 11px!important;font-size:10.1px!important;line-height:1.35!important}.home-page .join-button{height:31px!important;min-height:31px!important;font-size:7.4px!important}
  .home-page .card-head a{font-size:6.2px!important}
  .home-page .news-item{grid-template-columns:61px minmax(0,1fr)!important;gap:8px!important;margin-top:4px!important}
  .home-page .news-item img,.home-page .news-trophy{width:61px!important;height:29px!important}.home-page .news-trophy{font-size:18px!important}
  .home-page .news-item time{font-size:8.3px!important;margin-bottom:0!important}.home-page .news-item strong{font-size:9.9px!important;line-height:1.05!important;margin-bottom:0!important}.home-page .news-item span{font-size:8.6px!important;line-height:1.08!important}

  .home-page .home-footer-minimal{height:38px!important;min-height:38px!important;margin:0 4.35vw!important;font-size:6.3px!important}.home-page .home-footer-minimal nav{gap:26px!important}
}

/* At medium desktop widths, keep the same reference structure rather than exposing mobile chrome. */
@media (min-width:760px) and (max-width:1180px) and (max-height:720px){
  .home-page .topbar{grid-template-columns:190px minmax(420px,1fr) 76px!important;padding:0 15px!important}
  .home-page .brand-lockup img{width:48px!important;height:40px!important}.home-page .brand-lockup-copy b{font-size:18px!important}.home-page .brand-lockup-copy small{font-size:5px!important}
  .home-page .main-nav{gap:clamp(8px,1vw,12px)!important}.home-page .main-nav a{font-size:7px!important}.home-page .top-actions .btn{width:74px!important;min-width:74px!important;font-size:7px!important}
  .home-page .hero-left{width:390px!important;padding-left:3.4vw!important}.home-page .hero h1{font-size:31px!important}.home-page .hero-lead{font-size:8.1px!important}
  .home-page .feature-grid,.home-page .dashboard-row,.home-page .home-footer-minimal{margin-left:2.2vw!important;margin-right:2.2vw!important}
  .home-page .feature-card{grid-template-columns:52px minmax(0,1fr)!important;padding:8px 9px!important}.home-page .feature-icon{width:42px!important;height:42px!important}.home-page .premium-icon svg{width:27px!important;height:27px!important}.home-page .feature-card h3{font-size:9.3px!important}.home-page .feature-card p{font-size:6.7px!important}
}

/* =========================================================
   BUG HOME v2.40 — readable exact-reference desktop lock
   Targets the approved 1779×884 composition without shrinking
   typography to fit the viewport. Mobile rules remain intact.
   ========================================================= */
@media (min-width:1181px){
  .home-page{--v240-gold:#d8a23a;--v240-line:rgba(199,146,43,.42);}
  .home-page .topbar{
    height:82px!important;min-height:82px!important;
    grid-template-columns:330px minmax(0,1fr) 132px!important;
    padding:0 30px!important;gap:20px!important;
    border-bottom:1px solid rgba(190,139,38,.48)!important;
    background:#020504!important;
  }
  .home-page .brand-lockup{height:76px!important;gap:16px!important;align-items:center!important}
  .home-page .brand-lockup img{width:82px!important;height:62px!important;object-fit:contain!important}
  .home-page .brand-lockup-copy b{font:700 34px/.92 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;letter-spacing:.01em!important;color:#d9a73d!important}
  .home-page .brand-lockup-copy small{margin-top:6px!important;font:600 9px/1 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;letter-spacing:.06em!important;color:#b8872d!important;text-transform:uppercase!important}
  .home-page .main-nav{height:82px!important;gap:clamp(28px,2.5vw,46px)!important;justify-content:center!important}
  .home-page .main-nav a{height:82px!important;font:600 14px/82px "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;letter-spacing:.01em!important;color:#e4e1db!important}
  .home-page .main-nav a.active{color:#e6b44c!important}
  .home-page .main-nav a.active::after{height:3px!important;background:#d9a53c!important}
  .home-page .top-actions .btn{width:122px!important;min-width:122px!important;height:44px!important;min-height:44px!important;font-size:13px!important}
  .home-page .menu-button{display:none!important}

  .home-page .hero{height:390px!important;min-height:390px!important;max-height:390px!important;overflow:hidden!important}
  .home-page .hero-visual{inset:0 0 0 31.7%!important;background-image:url('assets/hero-home-approved.jpg')!important;background-size:cover!important;background-position:center 52%!important;filter:saturate(.96) contrast(1.07) brightness(.84)!important}
  .home-page .hero-shade{background:linear-gradient(90deg,#010302 0%,#010302 25%,rgba(1,3,2,.97) 31%,rgba(1,3,2,.77) 38%,rgba(1,3,2,.24) 51%,rgba(1,3,2,0) 68%)!important}
  .home-page .hero-left{width:560px!important;padding:30px 0 0 60px!important}
  .home-page .hero-kicker{margin:0 0 14px!important;font:600 12px/1 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;letter-spacing:.17em!important;color:#c89635!important;text-transform:uppercase!important}
  .home-page .hero h1{margin:0!important;font-family:"Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;font-size:55px!important;line-height:.94!important;letter-spacing:-.018em!important;font-weight:700!important;text-transform:uppercase!important;color:#f0eee8!important}
  .home-page .hero h1 span{font-size:1.32em!important;line-height:.86!important;color:#d7a23a!important;font-weight:700!important}
  .home-page .hero-divider{display:none!important}
  .home-page .hero-lead{margin-top:16px!important;font:400 15px/1.34 "Bahnschrift","Segoe UI",Arial,sans-serif!important;color:#d2d1cc!important;letter-spacing:0!important}
  .home-page .hero-buttons{margin-top:17px!important;gap:18px!important}
  .home-page .hero-buttons .btn{height:46px!important;min-height:46px!important;padding:0 27px!important;font-size:15.5px!important;letter-spacing:.015em!important}
  .home-page .hero-buttons .btn-green{min-width:315px!important}
  .home-page .hero-buttons .btn-outline{min-width:210px!important}

  .home-page .feature-grid{
    margin:0 60px!important;height:145px!important;min-height:145px!important;
    grid-template-columns:repeat(4,1fr)!important;border:1px solid var(--v240-line)!important;
    background:linear-gradient(180deg,rgba(4,12,8,.98),rgba(2,7,5,.98))!important;
  }
  .home-page .feature-card{height:143px!important;min-height:143px!important;grid-template-columns:92px minmax(0,1fr)!important;gap:15px!important;padding:20px 20px!important;border-right:1px solid rgba(184,134,38,.28)!important}
  .home-page .feature-card:last-child{border-right:0!important}
  .home-page .feature-icon{width:70px!important;height:70px!important;border:1px solid rgba(221,167,56,.62)!important;border-radius:50%!important;background:radial-gradient(circle at 50% 36%,rgba(213,164,61,.13),rgba(2,8,5,.96) 68%)!important;box-shadow:inset 0 0 0 1px rgba(255,223,143,.03),0 7px 22px rgba(0,0,0,.42)!important;display:grid!important;place-items:center!important}
  .home-page .premium-icon svg{width:47px!important;height:47px!important;overflow:visible!important}
  .home-page .feature-card h3{margin:2px 0 8px!important;font:700 17px/1.05 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;letter-spacing:.01em!important;color:#e2ad46!important;text-transform:uppercase!important}
  .home-page .feature-card p{margin:0!important;max-width:250px!important;font:400 13px/1.34 "Bahnschrift","Segoe UI",Arial,sans-serif!important;color:#c7c6c0!important}

  .home-page .dashboard-row{
    margin:9px 60px 0!important;height:205px!important;min-height:205px!important;
    grid-template-columns:1.03fr .90fr 1.34fr!important;border:1px solid var(--v240-line)!important;
    background:linear-gradient(180deg,rgba(4,12,8,.98),rgba(2,7,5,.98))!important;
  }
  .home-page .dashboard-card{height:203px!important;min-height:203px!important;padding:18px 24px!important;border-right:1px solid rgba(184,134,38,.28)!important}
  .home-page .dashboard-card:last-child{border-right:0!important}
  .home-page .dashboard-card h2{margin:0!important;font:700 20px/1.05 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;letter-spacing:.015em!important;color:#d9a542!important;text-transform:uppercase!important}
  .home-page .stats{margin-top:25px!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important}
  .home-page .stats>div{padding:0 16px!important;border-right:1px solid rgba(210,163,71,.22)!important;text-align:center!important}
  .home-page .stats strong{font:600 49px/.88 "Bahnschrift Condensed","Arial Narrow",sans-serif!important;color:#d5a043!important}
  .home-page .stats span{margin-top:14px!important;font:600 11px/1.3 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;color:#dedbd2!important;text-transform:uppercase!important}
  .home-page .join-card{padding-left:34px!important;padding-right:34px!important}
  .home-page .join-card p{margin:24px 0 22px!important;font:400 13px/1.5 "Bahnschrift","Segoe UI",Arial,sans-serif!important;color:#d1cec7!important}
  .home-page .join-button{height:47px!important;min-height:47px!important;font-size:15.5px!important;padding:0 24px!important;justify-content:space-between!important}
  .home-page .card-head a{font:700 10px/1 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif!important;color:#d8a33b!important;text-transform:uppercase!important}
  .home-page .news-item{grid-template-columns:108px minmax(0,1fr)!important;gap:16px!important;align-items:center!important;margin-top:9px!important}
  .home-page .news-item img,.home-page .news-trophy{width:108px!important;height:45px!important;border:1px solid rgba(202,149,44,.42)!important;background:#010503!important;object-fit:cover!important}
  .home-page .news-trophy{display:grid!important;place-items:center!important;font:400 29px/1 Georgia,serif!important;color:#d9a43a!important}
  .home-page .news-item time{font-size:11.5px!important;line-height:1!important;color:#8e918a!important;margin:0 0 2px!important}
  .home-page .news-item strong{font-size:14.5px!important;line-height:1.1!important;color:#f0ede5!important;margin:0 0 2px!important;font-weight:600!important}
  .home-page .news-item span{font-size:12px!important;line-height:1.15!important;color:#92958e!important}

  .home-page .home-footer-minimal{height:52px!important;min-height:52px!important;margin:0 60px!important;padding:0!important;font-size:12.5px!important;color:#898c86!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
  .home-page .home-footer-minimal nav{gap:48px!important}.home-page .home-footer-minimal a{font-size:10px!important}
}

/* Prevent the old short-viewport shrink profile from winning on desktop. */
@media (min-width:1181px) and (max-height:720px){
  .home-page .topbar{height:82px!important;min-height:82px!important;grid-template-columns:330px minmax(0,1fr) 132px!important;padding:0 30px!important}
  .home-page .brand-lockup img{width:82px!important;height:62px!important}.home-page .brand-lockup-copy b{font-size:34px!important}.home-page .brand-lockup-copy small{font-size:9px!important}
  .home-page .main-nav{height:82px!important}.home-page .main-nav a{height:82px!important;font-size:16.5px!important;line-height:82px!important}.home-page .top-actions .btn{width:122px!important;min-width:122px!important;height:44px!important;min-height:44px!important;font-size:13px!important}
  .home-page .hero{height:390px!important;min-height:390px!important;max-height:390px!important}.home-page .hero-left{width:560px!important;padding:30px 0 0 60px!important}.home-page .hero h1{font-size:55px!important}.home-page .hero-lead{font-size:15px!important}.home-page .hero-buttons .btn{height:46px!important;min-height:46px!important;font-size:13px!important}
  .home-page .feature-grid{margin:0 60px!important;height:145px!important;min-height:145px!important}.home-page .feature-card{height:143px!important;min-height:143px!important;grid-template-columns:92px minmax(0,1fr)!important;padding:20px!important}.home-page .feature-icon{width:70px!important;height:70px!important}.home-page .premium-icon svg{width:47px!important;height:47px!important}.home-page .feature-card h3{font-size:17px!important}.home-page .feature-card p{font-size:13px!important}
  .home-page .dashboard-row{margin:9px 60px 0!important;height:205px!important;min-height:205px!important}.home-page .dashboard-card{height:203px!important;min-height:203px!important;padding:18px 24px!important}.home-page .dashboard-card h2{font-size:20px!important}.home-page .stats strong{font-size:49px!important}.home-page .stats span{font-size:11px!important}.home-page .join-card p{font-size:13px!important}.home-page .join-button{height:47px!important;min-height:47px!important;font-size:13px!important}.home-page .news-item{grid-template-columns:108px minmax(0,1fr)!important}.home-page .news-item img,.home-page .news-trophy{width:108px!important;height:45px!important}.home-page .news-item strong{font-size:12px!important}.home-page .news-item span{font-size:9.5px!important}
  .home-page .home-footer-minimal{height:52px!important;min-height:52px!important;margin:0 60px!important;font-size:10px!important}
}

/* V2.41 — restore the proven navigation/actions; premium typography and icon system. */
.home-page{
  --premium-gold:#d8aa4b;
  --premium-gold-soft:#b98833;
  --premium-text:#ece9e1;
  --premium-muted:#bbb8af;
}
.home-page .topbar{
  grid-template-columns:minmax(255px, .82fr) minmax(650px, 1.75fr) minmax(390px, 1.1fr)!important;
  padding:0 26px!important;
  gap:18px!important;
}
.home-page .brand-lockup-copy b,
.home-page .hero h1,
.home-page .feature-card h3,
.home-page .dashboard-card h2{
  font-family:"Segoe UI Variable Display","Aptos Display","Segoe UI",sans-serif!important;
  font-stretch:condensed!important;
}
.home-page .brand-lockup-copy b{font-weight:680!important;letter-spacing:.02em!important}
.home-page .brand-lockup-copy small,
.home-page .main-nav a,
.home-page .btn,
.home-page .hero-kicker{
  font-family:"Segoe UI Variable Text","Aptos","Segoe UI",sans-serif!important;
}
.home-page .main-nav{gap:clamp(12px,1.15vw,24px)!important;justify-content:center!important;white-space:nowrap!important}
.home-page .main-nav a{
  font-size:14.5px!important;
  font-weight:620!important;
  letter-spacing:.025em!important;
  text-transform:none!important;
}
.home-page .main-nav a.active{color:var(--premium-gold)!important}
.home-page .premium-actions{display:grid!important;grid-template-columns:112px 150px 138px!important;gap:8px!important;align-items:center!important;justify-content:end!important}
.home-page .premium-actions .btn{
  width:auto!important;min-width:0!important;height:38px!important;min-height:38px!important;
  padding:0 12px!important;font-size:12.5px!important;font-weight:650!important;letter-spacing:.015em!important;
}
.home-page .premium-actions .btn-green{background:linear-gradient(180deg,rgba(9,67,42,.78),rgba(2,35,22,.86))!important}
.home-page .hero h1{
  font-weight:680!important;
  letter-spacing:-.025em!important;
  line-height:.96!important;
}
.home-page .hero-lead,
.home-page .feature-card p,
.home-page .join-card p,
.home-page .news-item strong,
.home-page .news-item span{
  font-family:"Segoe UI Variable Text","Aptos","Segoe UI",sans-serif!important;
}
.home-page .feature-card h3,
.home-page .dashboard-card h2{
  font-weight:650!important;
  letter-spacing:.015em!important;
}
.home-page .feature-icon{
  color:var(--premium-gold)!important;
  background:radial-gradient(circle at 50% 42%,rgba(214,170,78,.075),rgba(3,9,6,.98) 72%)!important;
  border:1px solid rgba(216,170,75,.55)!important;
  box-shadow:inset 0 0 0 1px rgba(255,232,176,.025),0 10px 24px rgba(0,0,0,.34)!important;
}
.home-page .premium-icon svg{width:46px!important;height:46px!important;color:var(--premium-gold)!important;filter:drop-shadow(0 1px 0 rgba(255,230,170,.08))!important}
.home-page .engraved-icon *{vector-effect:non-scaling-stroke!important}
.home-page .feature-card{align-items:center!important}
.home-page .feature-card p{color:#c8c5bd!important}
.home-page .hero-buttons .btn,
.home-page .join-button{font-weight:650!important;letter-spacing:.01em!important}

/* Keep the full working desktop navigation until tablet width. */
@media (min-width:1280px){
  .home-page .main-nav{display:flex!important}
  .home-page .premium-actions{display:grid!important}
  .home-page .menu-button{display:none!important}
}
@media (min-width:1181px) and (max-width:1480px){
  .home-page .topbar{grid-template-columns:230px minmax(600px,1fr) 330px!important;padding:0 18px!important;gap:10px!important}
  .home-page .brand-lockup img{width:62px!important;height:50px!important}
  .home-page .brand-lockup-copy b{font-size:25px!important}.home-page .brand-lockup-copy small{font-size:7px!important}
  .home-page .main-nav{gap:10px!important}.home-page .main-nav a{font-size:10px!important}
  .home-page .premium-actions{grid-template-columns:92px 128px 112px!important;gap:5px!important}.home-page .premium-actions .btn{font-size:11px!important;padding:0 7px!important}
}
@media (max-width:1180px){
  .home-page .premium-actions{display:none!important}
}

/* =========================================================
   BUG HOME v2.42 — premium icon/alignment pass.
   Keeps working navigation and page order unchanged.
   ========================================================= */
.home-page{
  --v242-gold:#d8aa4a;
  --v242-gold-hi:#f0c86c;
  --v242-line:rgba(208,158,57,.30);
  --v242-panel:rgba(3,10,7,.93);
  --v242-text:#e9e7e1;
  --v242-muted:#b9b8b2;
}
.home-page .hero h1,
.home-page .feature-card h3,
.home-page .dashboard-card h2{
  font-family:"Segoe UI Variable Display","Aptos Display","Segoe UI",Arial,sans-serif!important;
  font-stretch:normal!important;
  font-weight:640!important;
  letter-spacing:.005em!important;
}
.home-page .hero h1{font-weight:670!important;letter-spacing:-.018em!important;line-height:.97!important}
.home-page .hero-kicker{letter-spacing:.18em!important;font-weight:600!important}
.home-page .hero-lead,
.home-page .feature-card p,
.home-page .join-card p,
.home-page .news-item strong,
.home-page .news-item span{
  font-family:"Segoe UI Variable Text","Aptos","Segoe UI",Arial,sans-serif!important;
  font-weight:430!important;
}

/* Feature cards: no clipped text; identical vertical alignment. */
.home-page .feature-grid{
  height:auto!important;
  min-height:156px!important;
  align-items:stretch!important;
}
.home-page .feature-card{
  height:auto!important;
  min-height:154px!important;
  padding:22px 26px!important;
  grid-template-columns:96px minmax(0,1fr)!important;
  column-gap:20px!important;
  overflow:visible!important;
  align-items:center!important;
}
.home-page .feature-card>div:last-child{
  min-width:0!important;
  align-self:center!important;
}
.home-page .feature-card h3{
  margin:0 0 9px!important;
  font-size:18px!important;
  line-height:1.08!important;
  color:var(--v242-gold-hi)!important;
  text-transform:uppercase!important;
}
.home-page .feature-card p{
  margin:0!important;
  max-width:285px!important;
  font-size:15.5px!important;
  line-height:1.43!important;
  color:#d0cec7!important;
}

/* Bespoke BUG medallions: thin art-deco metal, not achievement badges. */
.home-page .feature-icon{
  position:relative!important;
  width:76px!important;
  height:76px!important;
  flex:0 0 76px!important;
  border-radius:50%!important;
  border:1px solid rgba(218,169,70,.62)!important;
  background:
    radial-gradient(circle at 35% 26%,rgba(255,225,153,.11),transparent 28%),
    radial-gradient(circle at 50% 58%,rgba(185,132,35,.08),transparent 60%),
    #030906!important;
  color:#ddb151!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,239,199,.035),
    inset 0 -12px 26px rgba(0,0,0,.34),
    0 10px 24px rgba(0,0,0,.28)!important;
}
.home-page .feature-icon::before,
.home-page .feature-icon::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
}
.home-page .feature-icon::before{inset:6px;border:1px solid rgba(216,169,70,.15)}
.home-page .feature-icon::after{inset:12px;border-top:1px solid rgba(255,222,144,.12);border-bottom:1px solid rgba(98,68,20,.16)}
.home-page .premium-icon svg{
  position:relative;z-index:1;width:42px!important;height:42px!important;
  color:#e1b657!important;
  filter:drop-shadow(0 1px 0 rgba(255,232,174,.18)) drop-shadow(0 4px 8px rgba(0,0,0,.24))!important;
}
.home-page .engraved-icon *{vector-effect:non-scaling-stroke!important}

/* News rail: every visual uses exactly the same frame and centre line. */
.home-page .news-card{overflow:hidden!important}
.home-page .news-item{
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr)!important;
  gap:15px!important;
  align-items:center!important;
  min-height:51px!important;
  margin-top:7px!important;
}
.home-page .news-thumb{
  width:112px!important;height:48px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:hidden!important;box-sizing:border-box!important;
  border:1px solid rgba(207,155,55,.38)!important;
  background:linear-gradient(180deg,rgba(7,15,10,.96),rgba(1,5,3,.98))!important;
}
.home-page .news-thumb img{
  display:block!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center!important;margin:0!important;border:0!important;
}
.home-page .news-thumb-logo img{
  width:68%!important;height:68%!important;object-fit:contain!important;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.45))!important;
}
.home-page .news-thumb-icon{color:#ddb151!important}
.home-page .news-thumb-icon svg{width:48px!important;height:30px!important;display:block!important}
.home-page .news-item time{margin:0 0 3px!important;font-size:11.5px!important;line-height:1!important;color:#8f948d!important}
.home-page .news-item strong{margin:0 0 2px!important;font-size:15px!important;line-height:1.15!important;font-weight:590!important;color:#f0eee8!important}
.home-page .news-item span{font-size:12.3px!important;line-height:1.18!important;color:#91958e!important}
.home-page .news-item>div:last-child{min-width:0!important;align-self:center!important}

/* Keep the lower dashboard elegant/readable rather than crushed to a viewport. */
.home-page .dashboard-row{height:auto!important;min-height:210px!important}
.home-page .dashboard-card{height:auto!important;min-height:208px!important;overflow:hidden!important}
.home-page .dashboard-card h2{font-size:20px!important;line-height:1.1!important;color:var(--v242-gold-hi)!important}
.home-page .stats strong{font-family:"Segoe UI Variable Display","Aptos Display","Segoe UI",sans-serif!important;font-weight:530!important}

@media (min-width:1181px) and (max-height:720px){
  .home-page .feature-grid{height:auto!important;min-height:154px!important}
  .home-page .feature-card{height:auto!important;min-height:152px!important;padding:20px 24px!important}
  .home-page .feature-card h3{font-size:17px!important}
  .home-page .feature-card p{font-size:12.5px!important}
  .home-page .feature-icon{width:72px!important;height:72px!important;flex-basis:72px!important}
  .home-page .premium-icon svg{width:39px!important;height:39px!important}
  .home-page .dashboard-row{height:auto!important;min-height:208px!important}
  .home-page .dashboard-card{height:auto!important;min-height:206px!important}
  .home-page .news-item{grid-template-columns:106px minmax(0,1fr)!important}
  .home-page .news-thumb{width:106px!important;height:45px!important}
}


/* =========================================================
   v2.43 — USER-APPROVED HEADER / ICONOGRAPHY PASS
   - Existing navigation order/links preserved
   - Larger readable desktop navigation
   - One general Login action; operator login only on Clubs
   - Approved logo artwork unchanged, transparent background asset only
   - Brand-book thin gold line iconography, no 3D medals
   ========================================================= */

/* Header logo: image artwork is unchanged; only the source background is transparent. */
.logo-role-header{
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}

@media (min-width:1200px){
  .topbar{
    grid-template-columns:230px minmax(0,1fr) max-content !important;
    column-gap:28px !important;
    padding-left:28px !important;
    padding-right:28px !important;
  }
  .brand-lockup{width:230px !important; gap:14px !important;}
  .brand-mark:not(.brand-lockup){width:94px !important;}
  .brand-mark img{width:84px !important;height:62px !important;object-fit:contain !important;}
  .brand-lockup-copy b{font-size:30px !important;line-height:.95 !important;letter-spacing:.025em !important;}
  .brand-lockup-copy small{font-size:12.5px !important;letter-spacing:.08em !important;margin-top:5px !important;}
  .main-nav{
    gap:clamp(20px,1.65vw,34px) !important;
    justify-content:center !important;
  }
  .main-nav a{
    font-size:clamp(14.5px,.78vw,17px) !important;
    font-weight:600 !important;
    letter-spacing:.025em !important;
  }
  .top-actions,
  .premium-actions{
    width:auto !important;
    min-width:0 !important;
    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:max-content !important;
    gap:10px !important;
  }
  .clubs-page .top-actions{
    grid-template-columns:max-content max-content !important;
  }
  .top-actions .btn{
    width:auto !important;
    min-width:126px !important;
    padding:0 22px !important;
    font-size:15px !important;
    letter-spacing:.045em !important;
  }
  .clubs-page .top-actions .btn:last-child{min-width:178px !important;}
}

@media (min-width:1200px) and (max-width:1550px){
  .topbar{
    grid-template-columns:190px minmax(0,1fr) max-content !important;
    column-gap:16px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .brand-lockup{width:190px !important;gap:10px !important;}
  .brand-mark img{width:70px !important;height:54px !important;}
  .brand-lockup-copy b{font-size:25px !important;}
  .brand-lockup-copy small{font-size:11px !important;}
  .main-nav{gap:clamp(12px,1.1vw,19px) !important;}
  .main-nav a{font-size:14.5px !important;}
  .top-actions .btn{min-width:112px !important;padding:0 14px !important;font-size:14px !important;}
  .clubs-page .top-actions .btn:last-child{min-width:160px !important;}
}

/* Brand-book iconography: standalone, thin, refined gold line. */
.feature-icon{
  width:66px !important;
  height:66px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#d3a23c !important;
}
.feature-icon svg,
.brand-line-icon{
  width:54px !important;
  height:54px !important;
  display:block !important;
  fill:none !important;
  stroke:currentColor !important;
  filter:none !important;
}
.feature-card{
  grid-template-columns:82px minmax(0,1fr) !important;
  gap:18px !important;
  align-items:center !important;
}

/* News thumbnails: fixed axis/size; line icons use the same brand system. */
.news-item{
  align-items:center !important;
}
.news-thumb{
  width:92px !important;
  height:54px !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  border:1px solid rgba(196,145,39,.42) !important;
  background:#050806 !important;
}
.news-thumb img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}
.news-thumb-logo img{
  width:74px !important;
  height:46px !important;
  object-fit:contain !important;
}
.news-thumb-icon{
  color:#d3a23c !important;
}
.news-thumb-icon svg{
  width:42px !important;
  height:42px !important;
  display:block !important;
  fill:none !important;
  stroke:currentColor !important;
  filter:none !important;
}

@media (max-width:1199px){
  .feature-icon{width:58px !important;height:58px !important;}
  .feature-icon svg{width:46px !important;height:46px !important;}
}

/* =========================================================
   BUG V2.44 — CANONICAL SITE ARCHITECTURE / NAV CONSISTENCY
   Scope: consistency, readability, de-duplication only.
   ========================================================= */
:root{
  --bug-nav-size: clamp(13px, .83vw, 16px);
  --bug-nav-gap: clamp(16px, 1.35vw, 30px);
}
.topbar .main-nav{
  gap:var(--bug-nav-gap);
}
.topbar .main-nav a{
  font-size:var(--bug-nav-size) !important;
  line-height:1 !important;
  letter-spacing:.025em !important;
  white-space:nowrap;
}
.topbar .top-actions .btn{
  min-width:112px;
  padding-inline:22px;
}
.news-more-label{
  color:#b98c39;
  font-size:13.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.85;
}
.news-item{cursor:default;}
.club-operator-btn{margin-top:10px;}

/* Footer is intentionally not a second site navigation. */
footer .footer-nav,
.home-footer-minimal nav{
  gap:30px;
}
footer .footer-nav a[href="contact.html"]{display:none!important;}

/* Telegram Mini App has one utility control only; no duplicate "full site" CTA. */
.telegram-miniapp .tg-miniapp-toolbar{
  width:auto !important;
  left:auto !important;
  right:16px !important;
  bottom:16px !important;
  grid-template-columns:1fr !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}
.telegram-miniapp .tg-miniapp-fullscreen{
  min-width:154px;
  min-height:42px;
}

@media (max-width: 1500px){
  :root{--bug-nav-size:13px;--bug-nav-gap:14px;}
  .topbar .top-actions .btn{min-width:96px;padding-inline:14px;}
}


/* =========================================================
   v2.45 — UNIFIED PREMIUM SITE HEADER
   One header geometry and behavior across every public page.
   ========================================================= */

:root{
  --bug-header-h:86px;
  --bug-header-gold:#d6ad55;
  --bug-header-ivory:#eee7d9;
  --bug-header-bg:rgba(2,7,5,.92);
  --bug-header-line:rgba(199,154,57,.34);
}

/* Same fixed visual system on every page. */
body > .premium-site-header,
.site-shell > .premium-site-header,
.premium-site-header{
  position:sticky !important;
  top:0 !important;
  z-index:5000 !important;
  width:100% !important;
  height:var(--bug-header-h) !important;
  min-height:var(--bug-header-h) !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 clamp(26px,3.2vw,62px) !important;
  display:grid !important;
  grid-template-columns:minmax(250px,1fr) auto minmax(140px,1fr) !important;
  align-items:center !important;
  column-gap:clamp(22px,2.2vw,44px) !important;
  background:
    linear-gradient(180deg,rgba(4,10,8,.98),rgba(1,6,4,.94)) !important;
  border:0 !important;
  border-bottom:1px solid var(--bug-header-line) !important;
  box-shadow:0 10px 34px rgba(0,0,0,.30) !important;
  backdrop-filter:blur(16px) saturate(118%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(118%) !important;
}

/* Brand: identical dimensions everywhere. */
.premium-site-header .brand-lockup{
  position:static !important;
  justify-self:start !important;
  width:auto !important;
  min-width:0 !important;
  height:64px !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  padding:0 !important;
  margin:0 !important;
  text-decoration:none !important;
}
.premium-site-header .brand-lockup img,
.premium-site-header .logo-role-header{
  flex:0 0 auto !important;
  width:70px !important;
  height:54px !important;
  object-fit:contain !important;
  margin:0 !important;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.46)) !important;
}
.premium-site-header .brand-lockup-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:4px !important;
  min-width:0 !important;
  line-height:1 !important;
}
.premium-site-header .brand-lockup-copy b{
  margin:0 !important;
  color:#e2c777 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:31px !important;
  font-weight:400 !important;
  line-height:.92 !important;
  letter-spacing:.055em !important;
}
.premium-site-header .brand-lockup-copy small{
  margin:0 !important;
  color:#c69b3e !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:10.5px !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:.24em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

/* Navigation: centered, calm, editorial, no page-specific sizing. */
.premium-site-header .main-nav{
  position:static !important;
  justify-self:center !important;
  height:var(--bug-header-h) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:clamp(18px,1.4vw,29px) !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
}
.premium-site-header .main-nav a{
  position:relative !important;
  height:var(--bug-header-h) !important;
  display:flex !important;
  align-items:center !important;
  padding:1px 0 0 !important;
  margin:0 !important;
  border:0 !important;
  color:#ece7dc !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:15.5px !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:.055em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  opacity:.92 !important;
  transition:color .22s ease,opacity .22s ease !important;
}
.premium-site-header .main-nav a:hover{
  color:#e1bd65 !important;
  opacity:1 !important;
}
.premium-site-header .main-nav a.active{
  color:#e4bd5c !important;
  opacity:1 !important;
}
.premium-site-header .main-nav a.active::after{
  content:"" !important;
  position:absolute !important;
  left:14% !important;
  right:14% !important;
  bottom:0 !important;
  height:2px !important;
  background:linear-gradient(90deg,transparent,#d5a84b 18%,#e1bd64 50%,#d5a84b 82%,transparent) !important;
  box-shadow:0 0 12px rgba(218,176,83,.22) !important;
}

/* Login: one restrained premium action instead of oversized page-dependent boxes. */
.premium-site-header .top-actions,
.premium-site-header .premium-actions{
  position:static !important;
  justify-self:end !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
}
.premium-site-header .top-actions .btn,
.premium-site-header .header-login{
  width:132px !important;
  min-width:132px !important;
  height:44px !important;
  min-height:44px !important;
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 18px !important;
  margin:0 !important;
  border:1px solid rgba(205,160,68,.64) !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,rgba(25,22,12,.28),rgba(5,10,7,.14)) !important;
  color:#dfbd66 !important;
  font-family:"Bahnschrift SemiCondensed","Arial Narrow",Arial,sans-serif !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:.075em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015) !important;
  transition:border-color .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease !important;
}
.premium-site-header .header-login:hover,
.premium-site-header .header-login.active-action{
  border-color:rgba(225,184,90,.88) !important;
  color:#f0d489 !important;
  background:rgba(122,84,15,.11) !important;
  box-shadow:0 0 22px rgba(198,151,53,.08),inset 0 0 0 1px rgba(255,255,255,.02) !important;
}

/* Desktop never shows the burger. */
.premium-site-header .menu-button{
  display:none !important;
}

/* Mid-size desktop: preserve the same identity, just tighten. */
@media (min-width:1180px) and (max-width:1540px){
  :root{--bug-header-h:78px;}
  body > .premium-site-header,
  .site-shell > .premium-site-header,
  .premium-site-header{
    padding-left:28px !important;
    padding-right:28px !important;
    grid-template-columns:minmax(210px,.9fr) auto minmax(112px,.9fr) !important;
    column-gap:18px !important;
  }
  .premium-site-header .brand-lockup{gap:11px !important;height:58px !important;}
  .premium-site-header .brand-lockup img,
  .premium-site-header .logo-role-header{width:58px !important;height:47px !important;}
  .premium-site-header .brand-lockup-copy b{font-size:26px !important;}
  .premium-site-header .brand-lockup-copy small{font-size:9px !important;letter-spacing:.18em !important;}
  .premium-site-header .main-nav{gap:clamp(11px,1.0vw,18px) !important;}
  .premium-site-header .main-nav a{font-size:13px !important;letter-spacing:.035em !important;}
  .premium-site-header .top-actions .btn,
  .premium-site-header .header-login{width:108px !important;min-width:108px !important;height:40px !important;min-height:40px !important;font-size:12.5px !important;}
}

/* Tablet / mobile: one shared compact header and one shared dropdown. */
@media (max-width:1179px){
  :root{--bug-header-h:68px;}
  body > .premium-site-header,
  .site-shell > .premium-site-header,
  .premium-site-header{
    grid-template-columns:minmax(0,1fr) 46px !important;
    column-gap:14px !important;
    padding:0 18px !important;
  }
  .premium-site-header .brand-lockup{
    height:56px !important;
    gap:11px !important;
  }
  .premium-site-header .brand-lockup img,
  .premium-site-header .logo-role-header{
    width:58px !important;
    height:45px !important;
  }
  .premium-site-header .brand-lockup-copy b{font-size:24px !important;}
  .premium-site-header .brand-lockup-copy small{font-size:8.9px !important;letter-spacing:.16em !important;}

  .premium-site-header .main-nav,
  .premium-site-header .top-actions{
    display:none !important;
  }
  .premium-site-header .menu-button{
    display:block !important;
    position:relative !important;
    justify-self:end !important;
    width:44px !important;
    height:44px !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid rgba(204,161,71,.22) !important;
    background:rgba(0,0,0,.10) !important;
    color:transparent !important;
    font-size:0 !important;
    cursor:pointer !important;
  }
  .premium-site-header .menu-button::before,
  .premium-site-header .menu-button::after{
    content:"" !important;
    position:absolute !important;
    left:10px !important;
    right:10px !important;
    height:1px !important;
    background:#d9bd77 !important;
  }
  .premium-site-header .menu-button::before{
    top:14px !important;
    box-shadow:0 7px 0 #d9bd77 !important;
  }
  .premium-site-header .menu-button::after{top:28px !important;}

  .premium-site-header.menu-open{
    box-shadow:0 18px 42px rgba(0,0,0,.52) !important;
  }
  .premium-site-header.menu-open .main-nav{
    position:absolute !important;
    top:var(--bug-header-h) !important;
    left:0 !important;
    right:0 !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:10px 20px 72px !important;
    background:rgba(2,7,5,.985) !important;
    border-top:1px solid rgba(199,154,57,.16) !important;
    border-bottom:1px solid rgba(199,154,57,.32) !important;
    box-shadow:0 22px 44px rgba(0,0,0,.54) !important;
  }
  .premium-site-header.menu-open .main-nav a{
    height:44px !important;
    display:flex !important;
    align-items:center !important;
    padding:0 3px !important;
    border-bottom:1px solid rgba(255,255,255,.045) !important;
    font-size:14.5px !important;
    letter-spacing:.06em !important;
  }
  .premium-site-header.menu-open .main-nav a.active::after{display:none !important;}
  .premium-site-header.menu-open .top-actions{
    position:absolute !important;
    left:20px !important;
    right:20px !important;
    top:calc(var(--bug-header-h) + 372px) !important;
    z-index:2 !important;
    display:flex !important;
  }
  .premium-site-header.menu-open .header-login{
    width:100% !important;
    min-width:0 !important;
    height:44px !important;
  }
}

@media (max-width:560px){
  :root{--bug-header-h:62px;}
  body > .premium-site-header,
  .site-shell > .premium-site-header,
  .premium-site-header{
    padding:0 12px !important;
  }
  .premium-site-header .brand-lockup{gap:8px !important;height:50px !important;}
  .premium-site-header .brand-lockup img,
  .premium-site-header .logo-role-header{width:50px !important;height:40px !important;}
  .premium-site-header .brand-lockup-copy b{font-size:21px !important;}
  .premium-site-header .brand-lockup-copy small{font-size:8px !important;letter-spacing:.12em !important;}
  .premium-site-header.menu-open .main-nav{padding-left:16px !important;padding-right:16px !important;}
  .premium-site-header.menu-open .top-actions{left:16px !important;right:16px !important;}
}

/* Avoid legacy page-specific topbar rules changing geometry. */
.home-page .premium-site-header,
.about-page .premium-site-header,
.how-page .premium-site-header,
.rules-page .premium-site-header,
.tournaments-page .premium-site-header,
.clubs-page .premium-site-header,
.contacts-page .premium-site-header,
.register-page .premium-site-header{
  max-width:none !important;
}


/* =========================================================
   BUG SITE v2.50 — premium content pass
   About / Clubs / Tournaments / Register refinement
   ========================================================= */

/* --- ABOUT BUG --- */
.about-core-format{
  width:min(1720px, calc(100vw - 68px));
  margin:0 auto 34px;
  border:1px solid rgba(199,154,57,.24);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:rgba(2,8,5,.58);
}
.about-core-card{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:20px;
  align-items:start;
  min-height:210px;
  padding:32px 30px;
  border-right:1px solid rgba(199,154,57,.18);
  position:relative;
}
.about-core-card:last-child{border-right:0}
.about-core-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(226,191,98,.035),transparent 36%);
  pointer-events:none;
}
.about-core-icon{
  width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(199,154,57,.34);
  background:radial-gradient(circle, rgba(26,120,84,.16), rgba(2,8,5,0) 68%);
}
.about-core-icon img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.28))}
.about-core-copy h3{
  margin:10px 0 12px;
  color:#f0dda0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:28px;
  line-height:1;
}
.about-core-copy p{margin:0;color:#b8c0bb;font-size:15.5px;line-height:1.72;max-width:32ch}

/* --- CLUBS --- */
.club-benefits.premium-club-benefits article{
  padding-top:30px;
  background:
    linear-gradient(180deg,rgba(240,222,167,.025),rgba(2,9,6,.76) 35%),
    radial-gradient(circle at 18% 16%, rgba(24,113,79,.12), transparent 38%);
}
.club-benefit-icon{
  width:62px;height:62px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(199,154,57,.38);
  background:radial-gradient(circle, rgba(26,120,84,.18), rgba(2,8,5,0) 70%);
}
.club-benefit-icon img{width:34px;height:34px;object-fit:contain}
.club-benefits.premium-club-benefits h3{margin-top:22px}
.premium-club-route{gap:10px;flex-wrap:wrap}
.premium-club-route span{display:inline-flex;align-items:center;gap:8px}
.premium-club-route img{width:18px;height:18px;object-fit:contain;opacity:.95}

/* --- TOURNAMENTS --- */
.tournaments-premium-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:0 0 30px;
}
.tournaments-premium-card{
  min-height:190px;
  border:1px solid rgba(199,154,57,.24);
  background:
    linear-gradient(180deg,rgba(240,222,167,.02),rgba(2,8,5,.72) 42%),
    radial-gradient(circle at 10% 18%, rgba(24,113,79,.11), transparent 44%);
  padding:26px 24px;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:18px;
}
.tournaments-premium-icon{
  width:64px;height:64px;border-radius:50%;border:1px solid rgba(199,154,57,.34);
  display:grid;place-items:center;
  background:radial-gradient(circle, rgba(26,120,84,.18), rgba(2,8,5,0) 68%);
}
.tournaments-premium-icon img{width:36px;height:36px;object-fit:contain}
.tournaments-premium-card h3{
  margin:10px 0 12px;
  color:#f0dda0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:24px;
  line-height:1.02;
}
.tournaments-premium-card p{margin:0;color:#b6bdb8;font-size:15.5px;line-height:1.68}
.tournament-card{
  box-shadow:0 18px 42px rgba(0,0,0,.10);
}
.tournament-card .tournament-meta{
  background:linear-gradient(180deg,rgba(18,23,18,.97),rgba(8,12,9,.96));
}

/* --- REGISTER / PERSONAL CABINET --- */
.account-feature-grid{
  margin:28px 0 34px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.account-feature-grid article{
  min-height:220px;
  padding:24px 22px;
  border:1px solid rgba(199,154,57,.22);
  background:
    linear-gradient(180deg,rgba(240,222,167,.018),rgba(2,8,5,.74) 42%),
    radial-gradient(circle at 18% 15%, rgba(24,113,79,.12), transparent 42%);
}
.account-feature-grid img{width:40px;height:40px;object-fit:contain;display:block;margin-bottom:18px}
.account-feature-grid h3{
  margin:0 0 12px;
  color:#e7c36a;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:22px;
  line-height:1.08;
}
.account-feature-grid p{margin:0;color:#b8c1bb;font-size:15px;line-height:1.68}
.registration-panel{
  box-shadow:0 22px 48px rgba(0,0,0,.14);
}
.existing-player-box{
  background:
    linear-gradient(180deg,rgba(240,222,167,.018),rgba(2,8,5,.66) 38%),
    rgba(2,8,5,.62);
}

/* --- RESPONSIVE --- */
@media(max-width:1180px){
  .about-core-format,
  .tournaments-premium-strip,
  .account-feature-grid{grid-template-columns:1fr}
  .about-core-card{grid-template-columns:72px minmax(0,1fr);min-height:0}
}
@media(max-width:980px){
  .club-benefits.premium-club-benefits article{min-height:0}
}
@media(max-width:650px){
  .about-core-format{width:min(100vw - 24px, 1720px)}
  .about-core-card,
  .tournaments-premium-card{grid-template-columns:56px minmax(0,1fr);padding:22px 18px}
  .about-core-icon,.tournaments-premium-icon{width:56px;height:56px}
  .about-core-icon img,.tournaments-premium-icon img{width:30px;height:30px}
  .account-feature-grid article{min-height:0;padding:22px 18px}
}


/* =========================================================
   BUG SITE v2.52 — icon layout refinement
   - fixes home header brand clipping
   - removes extra circle feeling around O BUG premium icons
   - adds premium mechanic icons on HOW TO PLAY without breaking copy
   ========================================================= */

/* Header brand clipping safeguard */
[data-bug-header].premium-site-header.topbar{
  grid-template-columns:426px minmax(700px,1fr) 204px !important;
}
[data-bug-header].premium-site-header .brand-lockup{
  padding-top:2px !important;
}
[data-bug-header].premium-site-header .brand-lockup-copy b{
  line-height:1.08 !important;
  padding-top:4px !important;
}
@media (max-width:1640px) and (min-width:1181px){
  [data-bug-header].premium-site-header.topbar{
    grid-template-columns:352px minmax(630px,1fr) 178px !important;
  }
  [data-bug-header].premium-site-header .brand-lockup-copy b{
    padding-top:3px !important;
  }
}

/* About BUG pillars: no extra outer circle, no text overlap */
.about-release .about-premium-pillars{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}
.about-release .about-premium-pillars article.about-pillar{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  text-align:center !important;
  min-height:274px !important;
  padding:26px 18px 24px !important;
}
.about-release .about-premium-pillars .release-num{
  position:absolute !important;
  top:16px !important;
  right:18px !important;
  margin:0 !important;
  z-index:3 !important;
}
.about-release .about-premium-pillars .pillar-icon.premium-about-icon{
  width:120px !important;
  height:120px !important;
  margin:14px auto 2px !important;
  background:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.about-release .about-premium-pillars .pillar-icon.premium-about-icon::before,
.about-release .about-premium-pillars .pillar-icon.premium-about-icon::after{
  display:none !important;
  content:none !important;
}
.about-release .about-premium-pillars .about-symbol,
.about-release .about-premium-pillars .about-symbol-img{
  width:120px !important;
  height:120px !important;
}
.about-release .about-premium-pillars .about-symbol-img{
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.32)) !important;
}
.about-release .about-premium-pillars article.about-pillar h2{
  margin:0 !important;
  padding:0 !important;
  max-width:9ch !important;
  font-size:clamp(18px,1.4vw,24px) !important;
  line-height:1.04 !important;
  letter-spacing:.045em !important;
}
.about-release .about-premium-pillars article.about-pillar p{
  margin:0 !important;
  padding:0 !important;
  max-width:15ch !important;
  font-size:clamp(14px,.92vw,16px) !important;
  line-height:1.62 !important;
  color:#e3ddd1 !important;
}
@media (max-width:1250px){
  .about-release .about-premium-pillars{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .about-release .about-premium-pillars article.about-pillar:nth-child(5){
    grid-column:1 / -1 !important;
  }
}
@media (max-width:650px){
  .about-release .about-premium-pillars{
    grid-template-columns:1fr !important;
  }
  .about-release .about-premium-pillars article.about-pillar:nth-child(5){
    grid-column:auto !important;
  }
  .about-release .about-premium-pillars article.about-pillar{
    min-height:0 !important;
    padding:22px 18px !important;
  }
  .about-release .about-premium-pillars .pillar-icon.premium-about-icon,
  .about-release .about-premium-pillars .about-symbol,
  .about-release .about-premium-pillars .about-symbol-img{
    width:96px !important;
    height:96px !important;
  }
}

/* How to play: premium mechanics icons while preserving readable text */
.how-page .mechanic-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  min-height:300px !important;
  padding:24px 18px 24px !important;
  background:
    linear-gradient(180deg, rgba(240,224,173,.028), rgba(6,12,9,.88) 34%),
    radial-gradient(circle at 50% 8%, rgba(28,123,86,.10), transparent 36%),
    linear-gradient(180deg, #07100c, #050806) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.how-page .mechanic-icon{
  width:104px !important;
  height:104px !important;
  margin:4px auto 18px !important;
  display:grid !important;
  place-items:center !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  overflow:visible !important;
}
.how-page .mechanic-icon::before,
.how-page .mechanic-icon::after{
  display:none !important;
  content:none !important;
}
.how-page .mechanic-icon-img{
  display:block !important;
  width:104px !important;
  height:104px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.26)) !important;
}
.how-page .mechanic-card h3{
  margin:0 0 14px !important;
  color:#f0dda0 !important;
  font-family:Georgia, "Times New Roman", serif !important;
  font-size:clamp(17px,1.5vw,23px) !important;
  font-weight:400 !important;
  line-height:1.06 !important;
  letter-spacing:.02em !important;
}
.how-page .mechanic-card p{
  margin:0 !important;
  color:#ddd8cf !important;
  font-size:clamp(14px,1.02vw,16px) !important;
  line-height:1.7 !important;
  max-width:18ch !important;
}
@media (max-width:1280px){
  .how-page .mechanics{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .how-page .mechanic-card:last-child{
    grid-column:auto !important;
  }
}
@media (max-width:980px){
  .how-page .mechanics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .how-page .mechanic-card:last-child{
    grid-column:1 / -1 !important;
  }
}
@media (max-width:620px){
  .how-page .mechanics{
    grid-template-columns:1fr !important;
  }
  .how-page .mechanic-card,
  .how-page .mechanic-card:last-child{
    grid-column:auto !important;
    min-height:0 !important;
  }
  .how-page .mechanic-icon,
  .how-page .mechanic-icon-img{
    width:88px !important;
    height:88px !important;
  }
}


/* =========================================================
   BUG SITE v2.55 — full official logo usage across pages
   ========================================================= */
.footer-brand img.logo-role-footer,
.footer-brand img{
  width:128px !important;
  height:84px !important;
  object-fit:contain !important;
}
.how-page .footer-brand img.logo-role-footer,
.how-page .footer-brand img{
  width:118px !important;
  height:78px !important;
}
.logo-role-symbol{
  width:132px !important;
  height:88px !important;
  object-fit:contain !important;
}
.news-thumb-logo img{
  width:84px !important;
  height:54px !important;
  object-fit:contain !important;
}
@media (max-width:900px){
  .footer-brand img.logo-role-footer,
  .footer-brand img{
    width:106px !important;
    height:70px !important;
  }
  .logo-role-symbol{
    width:108px !important;
    height:72px !important;
  }
}


/* =========================================================
   BUG SITE v2.57 — clean emblem sizing across pages
   ========================================================= */
.footer-brand img.logo-role-footer, .footer-brand img{
  width:92px !important;
  height:68px !important;
  object-fit:contain !important;
}
.how-page .footer-brand img.logo-role-footer, .how-page .footer-brand img{
  width:88px !important;
  height:64px !important;
}
.logo-role-symbol{
  width:96px !important;
  height:72px !important;
  object-fit:contain !important;
}
.news-thumb-logo img{
  width:70px !important;
  height:52px !important;
  object-fit:contain !important;
}
@media (max-width:900px){
  .footer-brand img.logo-role-footer, .footer-brand img{width:82px !important;height:60px !important;}
  .logo-role-symbol{width:84px !important;height:62px !important;}
}

/* =========================================================
   BUG SITE v2.63 — HOW TO PLAY mechanics compact balanced grid
   3 cards on first row, 2 centered on second row
   ========================================================= */
@media (min-width:981px){
  .how-page .mechanics{
    width:min(1320px,92vw) !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:16px !important;
    align-items:start !important;
    height:auto !important;
    min-height:0 !important;
  }
  .how-page .mechanic-card{
    grid-column:span 2 !important;
    min-height:250px !important;
    height:auto !important;
    padding:18px 18px 20px !important;
  }
  .how-page .mechanic-card:nth-child(4){
    grid-column:2 / span 2 !important;
  }
  .how-page .mechanic-card:nth-child(5){
    grid-column:4 / span 2 !important;
  }
  .how-page .mechanic-icon,
  .how-page .mechanic-icon-img{
    width:88px !important;
    height:88px !important;
  }
  .how-page .mechanic-icon{
    margin:2px auto 14px !important;
  }
  .how-page .mechanic-card h3{
    margin-bottom:10px !important;
  }
}

@media (max-width:980px) and (min-width:621px){
  .how-page .mechanics{
    height:auto !important;
    min-height:0 !important;
  }
  .how-page .mechanic-card{
    min-height:240px !important;
    height:auto !important;
  }
}

/* =========================================================
   v2.64 — About BUG pillar text alignment
   Text-only refinement: keep cards, icons and typography intact.
   ========================================================= */
@media (min-width:1051px){
  .about-page .release-pillars article p{
    width:100% !important;
    max-width:210px !important;
    justify-self:center !important;
    text-align:center !important;
    margin:10px auto 0 !important;
  }
  .about-page .release-pillars article h2{
    width:100% !important;
    text-align:center !important;
    justify-self:center !important;
  }
}

/* =========================================================
   BUG SITE v2.65 — ABOUT pillar clean vertical composition
   Fixes cropped STRATEGY title and aligns all five cards.
   Typography, colors and artwork remain unchanged.
   ========================================================= */
@media (min-width:1051px){
  .about-page .release-pillars article{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-width:0 !important;
    padding:58px 22px 32px !important;
    overflow:visible !important;
  }

  .about-page .release-pillars article .pillar-icon{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:auto !important;
    margin:0 0 14px !important;
  }

  .about-page .release-pillars article .pillar-icon img,
  .about-page .release-pillars article .premium-about-icon img{
    display:block !important;
    position:static !important;
    grid-column:auto !important;
    grid-row:auto !important;
    width:174px !important;
    height:174px !important;
    max-width:100% !important;
    object-fit:contain !important;
    margin:0 auto !important;
  }

  .about-page .release-pillars article h2{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    grid-column:auto !important;
    grid-row:auto !important;
    margin:0 0 18px !important;
    padding:0 4px !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:visible !important;
    justify-self:auto !important;
  }

  .about-page .release-pillars article p{
    display:block !important;
    width:min(100%,240px) !important;
    max-width:240px !important;
    grid-column:auto !important;
    grid-row:auto !important;
    margin:0 auto !important;
    text-align:center !important;
    overflow:visible !important;
    justify-self:auto !important;
  }

  .about-page .release-pillars .release-num{
    position:absolute !important;
    top:24px !important;
    right:28px !important;
  }
}

/* =========================================================
   BUG SITE v2.66 — ABOUT pillars definitive alignment reset
   One clean desktop composition: number / icon / title / copy.
   ========================================================= */
@media (min-width:1051px){
  body.about-page .release-pillars.about-premium-pillars{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    align-items:stretch !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  body.about-page .release-pillars.about-premium-pillars > article.about-pillar{
    position:relative !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:168px auto minmax(72px,auto) !important;
    align-content:start !important;
    justify-items:center !important;
    align-items:start !important;
    gap:0 !important;
    min-width:0 !important;
    min-height:390px !important;
    padding:58px 24px 28px !important;
    text-align:center !important;
    overflow:hidden !important;
  }

  body.about-page .release-pillars.about-premium-pillars > article.about-pillar .release-num{
    position:absolute !important;
    top:24px !important;
    right:28px !important;
    margin:0 !important;
  }

  body.about-page .release-pillars.about-premium-pillars > article.about-pillar .pillar-icon.premium-about-icon{
    grid-column:1 !important;
    grid-row:1 !important;
    display:grid !important;
    place-items:center !important;
    width:154px !important;
    height:154px !important;
    margin:0 auto 14px !important;
    padding:0 !important;
    align-self:start !important;
    justify-self:center !important;
    overflow:visible !important;
    background:none !important;
    border:0 !important;
  }

  body.about-page .release-pillars.about-premium-pillars > article.about-pillar .pillar-icon.premium-about-icon img.about-symbol-img{
    position:static !important;
    display:block !important;
    width:154px !important;
    height:154px !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    object-fit:contain !important;
    align-self:center !important;
    justify-self:center !important;
  }

  body.about-page .release-pillars.about-premium-pillars > article.about-pillar h2{
    grid-column:1 !important;
    grid-row:2 !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:10px 0 18px !important;
    padding:0 8px !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:visible !important;
    font-size:clamp(22px,1.55vw,30px) !important;
    line-height:1.08 !important;
  }

  body.about-page .release-pillars.about-premium-pillars > article.about-pillar p{
    grid-column:1 !important;
    grid-row:3 !important;
    display:block !important;
    width:100% !important;
    max-width:250px !important;
    margin:0 auto !important;
    padding:0 8px !important;
    text-align:center !important;
    justify-self:center !important;
    align-self:start !important;
    white-space:normal !important;
    overflow:visible !important;
    font-size:clamp(16px,.96vw,18px) !important;
    line-height:1.55 !important;
    text-wrap:balance !important;
  }
}

@media (min-width:1051px) and (max-width:1320px){
  body.about-page .release-pillars.about-premium-pillars > article.about-pillar{
    grid-template-rows:142px auto minmax(74px,auto) !important;
    min-height:350px !important;
    padding:52px 16px 24px !important;
  }
  body.about-page .release-pillars.about-premium-pillars > article.about-pillar .pillar-icon.premium-about-icon,
  body.about-page .release-pillars.about-premium-pillars > article.about-pillar .pillar-icon.premium-about-icon img.about-symbol-img{
    width:132px !important;
    height:132px !important;
  }
  body.about-page .release-pillars.about-premium-pillars > article.about-pillar h2{
    font-size:clamp(19px,1.65vw,23px) !important;
    letter-spacing:.02em !important;
  }
  body.about-page .release-pillars.about-premium-pillars > article.about-pillar p{
    font-size:16.5px !important;
    max-width:220px !important;
  }
}

/* v2.68 contact direct channels */
.contacts-direct-links{
  display:grid;
  gap:0;
  max-width:700px;
  margin-top:24px;
  border-top:1px solid rgba(199,154,57,.24);
}
.contacts-direct-links a,
.contacts-direct-phone{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:54px;
  border-bottom:1px solid rgba(199,154,57,.18);
  color:#d9ddd9;
  text-decoration:none;
}
.contacts-direct-links a{transition:color .2s ease,border-color .2s ease;}
.contacts-direct-links a:hover{
  color:#d4b65b;
  border-color:rgba(199,154,57,.48);
}
.contacts-direct-links b,
.contacts-direct-phone b{
  font-size:15.5px;
  font-weight:500;
  letter-spacing:.03em;
}
.contacts-direct-links small,
.contacts-direct-phone small{
  color:#8b958f;
  font-size:13.5px;
  text-align:right;
}
.contacts-direct-phone small{font-style:italic;opacity:.72;}
@media(max-width:650px){
  .contacts-direct-links a,
  .contacts-direct-phone{align-items:flex-start;flex-direction:column;gap:5px;padding:14px 0;}
  .contacts-direct-links small,
  .contacts-direct-phone small{text-align:left;}
}

/* =========================================================
   BUG SITE v2.70 — final clean mechanics grid on HOW TO PLAY
   Equal cards, centered second row, readable copy
   ========================================================= */
.how-page .mechanics{
  width:min(1720px, 96vw) !important;
  margin:18px auto 0 !important;
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  gap:22px !important;
  align-items:stretch !important;
}
.how-page .mechanics > .mechanic-card{
  grid-column:span 2 !important;
  min-height:456px !important;
  height:456px !important;
  padding:28px 28px 30px !important;
  border:1px solid rgba(184, 139, 44, .78) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(8,22,19,.90) 0%, rgba(5,14,12,.96) 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,224,160,.08), 0 0 0 1px rgba(15,42,33,.28) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
}
.how-page .mechanics > .mechanic-card:nth-child(4){
  grid-column:2 / span 2 !important;
}
.how-page .mechanics > .mechanic-card:nth-child(5){
  grid-column:4 / span 2 !important;
}
.how-page .mechanic-icon{
  width:132px !important;
  height:132px !important;
  margin:0 auto 22px !important;
  border:none !important;
  background:transparent !important;
  display:grid !important;
  place-items:center !important;
}
.how-page .mechanic-icon::before,
.how-page .mechanic-icon::after{display:none !important;}
.how-page .mechanic-icon-img{
  width:132px !important;
  height:132px !important;
  object-fit:contain !important;
  display:block !important;
}
.how-page .mechanic-card h3{
  margin:0 0 18px !important;
  color:#efdeaa !important;
  font-family:Georgia, "Times New Roman", serif !important;
  font-size:clamp(27px, 1.75vw, 33px) !important;
  font-weight:400 !important;
  line-height:1.02 !important;
  letter-spacing:.01em !important;
  text-align:center !important;
  max-width:100% !important;
  white-space:normal !important;
  overflow:visible !important;
}
.how-page .mechanic-card p{
  margin:0 auto !important;
  max-width:23ch !important;
  color:#f1efe8 !important;
  font-size:clamp(17px, 1.08vw, 21px) !important;
  line-height:1.55 !important;
  text-align:center !important;
  text-wrap:balance !important;
}
@media (max-width:1280px){
  .how-page .mechanics{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
  .how-page .mechanics > .mechanic-card{
    grid-column:auto !important;
    min-height:420px !important;
    height:420px !important;
  }
}
@media (max-width:900px){
  .how-page .mechanics{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:18px !important;
  }
  .how-page .mechanics > .mechanic-card,
  .how-page .mechanics > .mechanic-card:nth-child(4),
  .how-page .mechanics > .mechanic-card:nth-child(5){
    grid-column:auto !important;
    min-height:390px !important;
    height:auto !important;
  }
}
@media (max-width:620px){
  .how-page .mechanics{
    grid-template-columns:1fr !important;
    width:92vw !important;
    gap:16px !important;
  }
  .how-page .mechanics > .mechanic-card,
  .how-page .mechanics > .mechanic-card:nth-child(4),
  .how-page .mechanics > .mechanic-card:nth-child(5){
    min-height:0 !important;
    height:auto !important;
    padding:22px 18px 24px !important;
  }
  .how-page .mechanic-icon, .how-page .mechanic-icon-img{
    width:110px !important;
    height:110px !important;
  }
  .how-page .mechanic-card h3{
    font-size:24px !important;
  }
  .how-page .mechanic-card p{
    font-size:17px !important;
    max-width:24ch !important;
  }
}

/* BUG SITE v2.72 — safe direct-contact anchor */
.contacts-direct-copy#direct-contact{
  scroll-margin-top:120px;
}


/* =========================================================
   BUG SITE v2.73 — stable mechanics layout independent of zoom
   3 cards in first row, 2 centered in second row, equal cards
   ========================================================= */
.how-page .mechanics{
  width:min(1460px, 94vw) !important;
  margin:18px auto 0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:stretch !important;
  gap:28px !important;
}
.how-page .mechanics > .mechanic-card{
  box-sizing:border-box !important;
  flex:0 1 calc((100% - 56px) / 3) !important;
  width:calc((100% - 56px) / 3) !important;
  max-width:420px !important;
  min-width:320px !important;
  min-height:440px !important;
  height:auto !important;
  padding:28px 24px 30px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
}
.how-page .mechanic-icon{
  width:132px !important;
  height:132px !important;
  margin:0 auto 20px !important;
}
.how-page .mechanic-icon-img{
  width:132px !important;
  height:132px !important;
}
.how-page .mechanic-card h3{
  min-height:2.15em !important;
  margin:0 0 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:clamp(25px, 1.65vw, 31px) !important;
  line-height:1.02 !important;
  max-width:100% !important;
}
.how-page .mechanic-card p{
  margin:0 auto !important;
  max-width:24ch !important;
  color:#f3f2ec !important;
  font-size:clamp(16px, 1.04vw, 20px) !important;
  line-height:1.6 !important;
  text-align:center !important;
}
@media (max-width:1260px){
  .how-page .mechanics{
    width:min(1020px, 94vw) !important;
    gap:22px !important;
  }
  .how-page .mechanics > .mechanic-card{
    flex:0 1 calc((100% - 22px) / 2) !important;
    width:calc((100% - 22px) / 2) !important;
    max-width:none !important;
    min-width:280px !important;
    min-height:410px !important;
  }
}
@media (max-width:700px){
  .how-page .mechanics{
    width:92vw !important;
    gap:16px !important;
  }
  .how-page .mechanics > .mechanic-card{
    flex:0 1 100% !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:22px 18px 24px !important;
  }
  .how-page .mechanic-icon,
  .how-page .mechanic-icon-img{
    width:110px !important;
    height:110px !important;
  }
  .how-page .mechanic-card h3{
    font-size:23px !important;
  }
  .how-page .mechanic-card p{
    font-size:17px !important;
    max-width:25ch !important;
  }
}


/* =========================================================
   BUG SITE v2.74 — sitewide stable layout audit patch
   Prevent text scaling / browser zoom from breaking card grids
   ========================================================= */

/* HOW TO PLAY — flow row becomes content-driven, not height-locked */
.how-page .game-flow{
  height:auto !important;
  min-height:190px !important;
  align-items:start !important;
}
.how-page .flow-item{
  min-width:0 !important;
}
.how-page .flow-item p{
  max-width:18ch !important;
  margin-inline:auto !important;
  text-align:center !important;
}
.how-page .flow-note{
  position:relative !important;
  bottom:auto !important;
  margin-top:10px !important;
  padding-top:8px !important;
}

/* HOW TO PLAY — final block should grow with text */
.how-page .final-rules-row{
  height:auto !important;
  min-height:0 !important;
  grid-template-columns:minmax(280px,.9fr) minmax(420px,1.1fr) minmax(320px,.95fr) !important;
  align-items:stretch !important;
  overflow:visible !important;
}
.how-page .final-copy,
.how-page .final-timeline,
.how-page .rules-card{
  height:auto !important;
  min-height:220px !important;
}
.how-page .final-copy p,
.how-page .rules-card p,
.how-page .warning span{
  overflow-wrap:anywhere !important;
}
@media (max-width:1180px){
  .how-page .final-rules-row{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .how-page .final-copy,
  .how-page .final-timeline,
  .how-page .rules-card{
    min-height:0 !important;
  }
}

/* ABOUT BUG — principles and pillars should not rely on fixed heights */
.about-pillars-v2,
.principles-grid{
  align-items:stretch !important;
}
.about-pillars-v2 .about-pillar,
.principles-grid article{
  min-height:0 !important;
  height:auto !important;
}
.about-pillars-v2 .about-pillar p,
.principles-grid p{
  max-width:28ch !important;
  overflow-wrap:anywhere !important;
}

/* ABOUT BUG — premium release pillars are a major risk zone */
.release-pillars{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
  min-height:0 !important;
}
.release-pillars article{
  box-sizing:border-box !important;
  flex:1 1 20% !important;
  min-width:240px !important;
  min-height:220px !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  padding:20px 18px 18px !important;
  overflow:visible !important;
  border-top:0 !important;
}
.release-pillars article+article{
  border-left:1px solid rgba(212,175,55,.24) !important;
}
.release-pillars img{
  width:78px !important;
  height:78px !important;
  margin:0 0 14px !important;
  grid-column:auto !important;
  grid-row:auto !important;
  align-self:flex-start !important;
  justify-self:flex-start !important;
}
.release-pillars h2{
  white-space:normal !important;
  overflow:visible !important;
  max-width:100% !important;
  margin:0 0 10px !important;
  line-height:1.02 !important;
}
.release-pillars p{
  max-width:100% !important;
  margin:0 !important;
  overflow-wrap:anywhere !important;
}
@media (max-width:1180px){
  .release-pillars article{
    flex-basis:calc(50% - 1px) !important;
  }
  .release-pillars article:nth-child(odd){
    border-left:0 !important;
  }
  .release-pillars article:nth-child(n+3){
    border-top:1px solid rgba(212,175,55,.24) !important;
  }
}
@media (max-width:700px){
  .release-pillars article{
    flex-basis:100% !important;
    min-width:0 !important;
    border-left:0 !important;
    border-top:1px solid rgba(212,175,55,.24) !important;
  }
  .release-pillars article:first-child{
    border-top:0 !important;
  }
}

/* ABOUT BUG — additional safety for dense grid cards */
.about-match-pillars article,
.feature-card,
.tournament-card,
.archive-row,
.club-card,
.contact-channel-row{
  min-width:0 !important;
}

/* Global safety for card copy */
.feature-card p,
.news-item p,
.about-pillar p,
.principles-grid p,
.release-pillars p,
.contacts-direct-copy p,
.channel-list a,
.archive-row,
.tournament-card,
.club-card{
  overflow-wrap:anywhere !important;
}


/* =========================================================
   BUG SITE v2.77 — targeted visual fixes after V2.76 rollback
   1) full-width flow note in game-flow
   2) more compact mechanics cards
   3) restore Artel club photo on clubs page
   ========================================================= */

/* 1) HOW TO PLAY — explanatory note must span the full row */
.how-page .game-flow{
  row-gap: 14px !important;
  padding-bottom: 20px !important;
}
.how-page .flow-note{
  grid-column: 1 / -1 !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 980px !important;
  margin: 4px auto 0 !important;
  padding: 0 !important;
  justify-self: center !important;
  align-self: start !important;
  text-align: center !important;
}
@media (max-width: 1050px){
  .how-page .flow-note{
    max-width: 820px !important;
  }
}
@media (max-width: 620px){
  .how-page .game-flow{
    padding-bottom: 18px !important;
  }
  .how-page .flow-note{
    margin-top: 0 !important;
  }
}

/* 2) HOW TO PLAY — mechanics cards should stay equal but more compact */
.how-page .mechanics{
  width: min(1340px, 94vw) !important;
  gap: 24px !important;
}
.how-page .mechanics > .mechanic-card{
  flex: 0 1 calc((100% - 48px) / 3) !important;
  width: calc((100% - 48px) / 3) !important;
  max-width: 398px !important;
  min-width: 320px !important;
  min-height: 372px !important;
  padding: 26px 24px 24px !important;
  border-radius: 24px !important;
}
.how-page .mechanic-icon,
.how-page .mechanic-icon-img{
  width: 124px !important;
  height: 124px !important;
}
.how-page .mechanic-icon{
  margin: 0 auto 18px !important;
}
.how-page .mechanic-card h3{
  min-height: 2.05em !important;
  margin: 0 0 14px !important;
}
.how-page .mechanic-card p{
  max-width: 23ch !important;
  line-height: 1.52 !important;
}
@media (max-width: 1260px){
  .how-page .mechanics{
    width: min(1000px, 94vw) !important;
    gap: 22px !important;
  }
  .how-page .mechanics > .mechanic-card{
    flex: 0 1 calc((100% - 22px) / 2) !important;
    width: calc((100% - 22px) / 2) !important;
    max-width: none !important;
    min-width: 280px !important;
    min-height: 356px !important;
  }
}
@media (max-width: 700px){
  .how-page .mechanics{
    width: 92vw !important;
    gap: 16px !important;
  }
  .how-page .mechanics > .mechanic-card{
    flex: 0 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 22px 18px 22px !important;
  }
  .how-page .mechanic-icon,
  .how-page .mechanic-icon-img{
    width: 108px !important;
    height: 108px !important;
  }
}

/* 3) CLUBS — restore the real Artel photo in the main club card */
.clubs-page .club-launch-visual{
  background:
    linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.34)),
    url("assets/artel-club.jpg") center center / cover no-repeat !important;
}


/* =========================================================
   BUG SITE v2.78 — minimal unified footer
   Brand + Telegram + YouTube only
   ========================================================= */
.site-social-footer{
  box-sizing:border-box !important;
  width:min(1500px,94vw) !important;
  min-height:78px !important;
  margin:24px auto 0 !important;
  padding:16px 4px 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:28px !important;
  border-top:1px solid rgba(205,166,80,.16) !important;
  color:#9a9c96 !important;
  background:transparent !important;
}
.site-social-footer .footer-brand{display:flex !important;align-items:center !important;gap:14px !important;min-width:0 !important;}
.site-social-footer .footer-brand img{flex:0 0 auto !important;width:72px !important;height:52px !important;object-fit:contain !important;}
.site-social-footer .footer-brand div{display:flex !important;flex-direction:column !important;gap:3px !important;min-width:0 !important;}
.site-social-footer .footer-brand span{font-size:13px !important;line-height:1.3 !important;color:#b8bbb5 !important;white-space:normal !important;}
.site-social-footer .footer-brand small{font-size:11px !important;line-height:1.3 !important;color:#777d78 !important;}
.site-social-footer .footer-socials{display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:24px !important;margin:0 !important;}
.site-social-footer .footer-socials a{position:relative !important;color:#c5a75c !important;font-size:13px !important;line-height:1 !important;letter-spacing:.08em !important;text-decoration:none !important;transition:color .18s ease,opacity .18s ease !important;}
.site-social-footer .footer-socials a+a::before{content:"·" !important;position:absolute !important;left:-15px !important;color:rgba(197,167,92,.42) !important;}
.site-social-footer .footer-socials a:hover{color:#e1c474 !important;}
@media(max-width:700px){
  .site-social-footer{width:92vw !important;min-height:0 !important;padding:18px 0 22px !important;flex-direction:column !important;align-items:center !important;text-align:center !important;gap:14px !important;}
  .site-social-footer .footer-brand{justify-content:center !important;}
  .site-social-footer .footer-socials{justify-content:center !important;}
}


/* =========================================================
   BUG SITE v2.79 — tablet / phone adaptation layer
   Desktop (>1180px) intentionally unchanged.
   ========================================================= */

@media (max-width:1180px){
  html,body{max-width:100%;overflow-x:clip;}
  body{font-size:16px;}
  .site-shell{width:100%;max-width:100%;overflow:visible;}
  main{min-width:0;}
  img,video{max-width:100%;}
  .btn{min-height:46px;box-sizing:border-box;}

  /* shared page rhythm */
  .clubs-section,
  .tournaments-content,
  .contacts-content,
  .rules-content,
  .registration-layout,
  .about-release{
    width:min(94vw,1040px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }

  /* HOME */
  .home-page .hero{
    min-height:610px !important;
    height:auto !important;
    display:flex !important;
    align-items:flex-end !important;
  }
  .home-page .hero-left{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:min(720px,88vw) !important;
    max-width:none !important;
    margin:0 !important;
    padding:72px 0 58px 6vw !important;
    box-sizing:border-box !important;
  }
  .home-page .hero-left h1{
    font-size:clamp(46px,7vw,72px) !important;
    line-height:.98 !important;
  }
  .home-page .hero-lead{max-width:56ch !important;font-size:16px !important;line-height:1.58 !important;}
  .home-page .hero-buttons{display:flex !important;flex-wrap:wrap !important;gap:12px !important;}
  .home-page .feature-grid{
    width:min(94vw,1040px) !important;
    margin:18px auto 0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  .home-page .feature-card{
    min-height:150px !important;
    border:1px solid rgba(199,154,57,.20) !important;
    border-radius:12px !important;
    padding:20px !important;
  }
  .home-page .dashboard-row{
    width:min(94vw,1040px) !important;
    margin:14px auto 0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .home-page .dashboard-card{min-height:0 !important;padding:24px !important;}
  .home-page .news-card{min-width:0 !important;}

  /* ABOUT BUG */
  .about-page .about-release-hero{
    min-height:560px !important;
    grid-template-columns:1fr !important;
    overflow:hidden !important;
  }
  .about-page .release-copy{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    max-width:720px !important;
    padding:42px 36px 280px !important;
    box-sizing:border-box !important;
  }
  .about-page .release-hero-art{
    width:100% !important;
    height:300px !important;
    top:auto !important;
    bottom:0 !important;
    background-position:center 42% !important;
  }
  .about-page .release-manifesto{grid-template-columns:1fr !important;}
  .about-page .manifesto-right{border-left:0 !important;border-top:1px solid rgba(212,175,55,.22) !important;}
  .about-page .release-pillars{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
  }
  .about-page .release-pillars article{
    min-width:0 !important;
    min-height:230px !important;
    border-left:0 !important;
    border-top:1px solid rgba(212,175,55,.20) !important;
  }
  .about-page .release-pillars article:nth-child(even){border-left:1px solid rgba(212,175,55,.20) !important;}
  .about-page .release-pillars article:nth-child(-n+2){border-top:0 !important;}
  .about-page .release-final{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    gap:18px !important;
  }
  .about-page .release-actions{grid-column:1 !important;grid-row:3 !important;display:flex !important;flex-wrap:wrap !important;}

  /* HOW TO PLAY */
  .how-page .how-main{width:100% !important;overflow:visible !important;}
  .how-page .how-hero{height:auto !important;min-height:190px !important;}
  .how-page .how-title{padding:34px 5vw !important;box-sizing:border-box !important;}
  .how-page .game-flow{
    width:min(94vw,980px) !important;
    min-height:0 !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:18px !important;
    padding:24px 22px 20px !important;
  }
  .how-page .flow-arrow{display:none !important;}
  .how-page .flow-note{grid-column:1/-1 !important;max-width:760px !important;margin:4px auto 0 !important;}
  .how-page .mechanics{width:min(94vw,980px) !important;gap:18px !important;}
  .how-page .mechanics>.mechanic-card{
    flex:0 1 calc((100% - 18px)/2) !important;
    width:calc((100% - 18px)/2) !important;
    min-width:0 !important;
    min-height:340px !important;
  }
  .how-page .final-rules-row{width:min(94vw,980px) !important;grid-template-columns:1fr !important;gap:16px !important;}

  /* TOURNAMENTS */
  .tournaments-page .tournaments-hero-copy{
    width:min(760px,88vw) !important;
    margin:0 !important;
    padding:54px 6vw !important;
    box-sizing:border-box !important;
  }
  .tournaments-page .tournaments-premium-strip{grid-template-columns:1fr !important;gap:12px !important;}
  .tournaments-page .tournament-card{grid-template-columns:150px minmax(0,1fr) !important;}
  .tournaments-page .tournament-meta{
    grid-column:1/-1 !important;
    border-left:0 !important;
    border-top:1px solid rgba(199,154,57,.22) !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:0 18px !important;
  }
  .tournaments-page .archive-tournament-card{grid-template-columns:160px minmax(0,1fr) 120px !important;}
  .tournaments-page .archive-club{display:none !important;}

  /* CLUBS */
  .clubs-page .clubs-hero{min-height:520px !important;}
  .clubs-page .clubs-hero-copy{width:min(760px,88vw) !important;margin:0 !important;padding:56px 6vw !important;box-sizing:border-box !important;}
  .clubs-page .clubs-section{padding:42px 0 !important;}
  .clubs-page .clubs-section-head{grid-template-columns:1fr !important;gap:14px !important;align-items:start !important;}
  .clubs-page .club-launch-card{grid-template-columns:1fr !important;min-height:0 !important;border-radius:12px !important;}
  .clubs-page .club-launch-visual{min-height:340px !important;}
  .clubs-page .club-launch-copy{padding:34px 34px !important;}
  .clubs-page .club-benefits{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .clubs-page .club-benefits article{min-height:220px !important;}
  .clubs-page .become-club{grid-template-columns:1fr !important;gap:30px !important;}
  .clubs-page .club-route{flex-wrap:wrap !important;}

  /* CONTACTS */
  .contacts-page .contacts-hero{min-height:480px !important;}
  .contacts-page .contacts-hero-copy{width:min(760px,88vw) !important;margin:0 !important;padding:54px 6vw !important;box-sizing:border-box !important;}
  .contacts-page .contacts-content{padding:42px 0 56px !important;}
  .contacts-page .contacts-intro{grid-template-columns:1fr !important;gap:16px !important;}
  .contacts-page .contacts-direct{grid-template-columns:1fr !important;gap:18px !important;}
  .contacts-page .contact-route-grid{grid-template-columns:1fr !important;gap:14px !important;}

  /* RULES */
  .rules-page .rules-hero{grid-template-columns:1fr !important;gap:14px !important;min-height:0 !important;padding:28px 24px !important;}
  .rules-page .rules-hero-mark{display:none !important;}
  .rules-page .rules-layout{grid-template-columns:1fr !important;gap:18px !important;}
  .rules-page .rules-toc{position:static !important;width:auto !important;}
  .rules-page .rules-toc-inner{position:static !important;max-height:none !important;}
  .rules-page .rules-cards{grid-template-columns:1fr !important;}

  /* REGISTER */
  .register-page .registration-hero{min-height:450px !important;}
  .register-page .registration-hero-copy{width:min(760px,88vw) !important;margin:0 !important;padding:54px 6vw !important;box-sizing:border-box !important;}
  .register-page .registration-layout{grid-template-columns:1fr !important;gap:24px !important;padding-top:38px !important;}
  .register-page .registration-panel{padding:28px 26px !important;}
  .register-page .account-feature-grid{grid-template-columns:1fr !important;gap:12px !important;}
}

@media (max-width:700px){
  body{font-size:16px;}
  .btn{width:100%;min-height:48px;padding-left:18px !important;padding-right:18px !important;}

  /* HOME phone */
  .home-page .hero{min-height:600px !important;align-items:flex-end !important;}
  .home-page .hero-left{width:100% !important;padding:56px 20px 42px !important;}
  .home-page .hero-left h1{font-size:clamp(39px,11vw,52px) !important;line-height:.99 !important;}
  .home-page .hero-kicker{font-size:12px !important;}
  .home-page .hero-lead{font-size:15.5px !important;line-height:1.55 !important;}
  .home-page .hero-lead br{display:none !important;}
  .home-page .hero-buttons{display:grid !important;grid-template-columns:1fr !important;width:100% !important;}
  .home-page .feature-grid{grid-template-columns:1fr !important;width:calc(100% - 24px) !important;gap:10px !important;}
  .home-page .feature-card{grid-template-columns:64px minmax(0,1fr) !important;min-height:0 !important;padding:18px !important;gap:14px !important;}
  .home-page .feature-card br{display:none !important;}
  .home-page .dashboard-row{width:calc(100% - 24px) !important;}
  .home-page .dashboard-card{padding:20px 18px !important;}
  .home-page .stats{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:0 !important;}
  .home-page .stats strong{font-size:30px !important;}
  .home-page .news-item{grid-template-columns:72px minmax(0,1fr) !important;gap:12px !important;}

  /* ABOUT phone */
  .about-page .about-release{width:calc(100% - 24px) !important;}
  .about-page .about-release-hero{min-height:590px !important;}
  .about-page .release-copy{padding:30px 20px 300px !important;}
  .about-page .about-release h1{font-size:clamp(42px,12vw,58px) !important;}
  .about-page .release-hero-art{height:300px !important;}
  .about-page .release-manifesto>div{padding:20px !important;font-size:24px !important;}
  body.about-page .release-pillars.about-premium-pillars{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:calc(100% - 24px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    gap:12px !important;
  }

  body.about-page .release-pillars.about-premium-pillars > article.about-pillar,
  body.about-page .release-pillars.about-premium-pillars > article.about-pillar:nth-child(even){
    position:relative !important;
    display:flex !important;
    flex:none !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    box-sizing:border-box !important;
    padding:22px 18px 24px !important;
    text-align:center !important;
    border-left:0 !important;
  }

  body.about-page .release-pillars.about-premium-pillars > article.about-pillar .pillar-icon.premium-about-icon,
  body.about-page .release-pillars.about-premium-pillars > article.about-pillar .pillar-icon.premium-about-icon img.about-symbol-img{
    width:96px !important;
    height:96px !important;
  }

  body.about-page .release-pillars.about-premium-pillars > article.about-pillar .pillar-icon.premium-about-icon{
    display:grid !important;
    place-items:center !important;
    flex:none !important;
    margin:0 auto 14px !important;
  }

  body.about-page .release-pillars.about-premium-pillars > article.about-pillar .release-num{
    position:absolute !important;
    top:16px !important;
    right:18px !important;
    margin:0 !important;
  }

  body.about-page .release-pillars.about-premium-pillars > article.about-pillar h2{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 12px !important;
    padding:0 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:visible !important;
    font-size:22px !important;
    line-height:1.1 !important;
  }

  body.about-page .release-pillars.about-premium-pillars > article.about-pillar p{
    width:auto !important;
    max-width:28ch !important;
    margin:0 auto !important;
    padding:0 !important;
    text-align:center !important;
    font-size:16px !important;
    line-height:1.5 !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
  }
  .about-page .release-final{padding:20px 18px !important;}
  .about-page .release-familiar{display:grid !important;gap:8px !important;}
  .about-page .release-familiar i{display:none !important;}
  .about-page .release-actions{display:grid !important;grid-template-columns:1fr !important;width:100% !important;}

  /* HOW TO PLAY phone */
  .how-page .how-title{padding:28px 18px !important;}
  .how-page .how-title h1{font-size:34px !important;}
  .how-page .how-title p{font-size:15px !important;line-height:1.5 !important;padding:0 !important;}
  .how-page .game-flow{width:calc(100% - 24px) !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:18px 12px !important;padding:20px 14px !important;}
  .how-page .flow-icon{width:64px !important;height:64px !important;}
  .how-page .flow-note{font-size:13.5px !important;line-height:1.5 !important;}
  .how-page .mechanics{width:calc(100% - 24px) !important;gap:12px !important;}
  .how-page .mechanics>.mechanic-card{flex:0 1 100% !important;width:100% !important;min-height:0 !important;padding:22px 18px !important;border-radius:16px !important;}
  .how-page .mechanic-icon,.how-page .mechanic-icon-img{width:96px !important;height:96px !important;}
  .how-page .mechanic-card h3{font-size:22px !important;min-height:0 !important;}
  .how-page .mechanic-card p{font-size:16px !important;max-width:28ch !important;}
  .how-page .final-rules-row{width:calc(100% - 24px) !important;}

  /* TOURNAMENTS phone */
  .tournaments-page .tournaments-hero{min-height:400px !important;}
  .tournaments-page .tournaments-hero-copy{width:100% !important;padding:40px 20px !important;}
  .tournaments-page .tournaments-hero h1{font-size:44px !important;}
  .tournaments-page .tournaments-content{width:calc(100% - 24px) !important;padding:36px 0 48px !important;}
  .tournaments-page .tournaments-head,.tournaments-page .tournament-group-head{display:block !important;}
  .tournaments-page .tournaments-sync,.tournaments-page .tournament-group-note{margin-top:10px !important;}
  .tournaments-page .tournament-card{grid-template-columns:1fr !important;}
  .tournaments-page .tournament-date{border-right:0 !important;border-bottom:1px solid rgba(199,154,57,.22) !important;padding:18px !important;}
  .tournaments-page .tournament-main{padding:22px 18px !important;}
  .tournaments-page .tournament-main h3{font-size:28px !important;}
  .tournaments-page .tournament-venue{grid-template-columns:1fr !important;gap:14px !important;}
  .tournaments-page .tournament-meta{grid-column:auto !important;grid-template-columns:1fr !important;padding:18px !important;}
  .tournaments-page .archive-tournament-card{grid-template-columns:1fr !important;}
  .tournaments-page .archive-date,.tournaments-page .archive-title{border-right:0 !important;padding:14px 15px !important;}
  .tournaments-page .archive-title h4{white-space:normal !important;text-overflow:clip !important;overflow:visible !important;}
  .tournaments-page .archive-details{min-height:44px !important;border-left:0 !important;border-top:1px solid rgba(199,154,57,.12) !important;}

  /* CLUBS phone */
  .clubs-page .clubs-hero{min-height:460px !important;}
  .clubs-page .clubs-hero-copy{width:100% !important;padding:40px 20px !important;}
  .clubs-page .clubs-hero h1{font-size:44px !important;}
  .clubs-page .clubs-section{width:calc(100% - 24px) !important;padding:34px 0 !important;}
  .clubs-page .clubs-section-head h2{font-size:34px !important;}
  .clubs-page .club-launch-visual{min-height:250px !important;}
  .clubs-page .club-status{left:16px !important;top:16px !important;}
  .clubs-page .club-launch-copy{padding:26px 20px !important;}
  .clubs-page .club-launch-copy h3{font-size:30px !important;}
  .clubs-page .club-table-stats{grid-template-columns:1fr 1fr !important;gap:10px !important;}
  .clubs-page .club-card-actions{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;}
  .clubs-page .club-benefits{grid-template-columns:1fr !important;}
  .clubs-page .club-benefits article{min-height:0 !important;border-right:0 !important;border-top:1px solid rgba(199,154,57,.22) !important;padding:24px 20px !important;}
  .clubs-page .club-benefits article:first-child{border-top:0 !important;}
  .clubs-page .become-club{padding-left:0 !important;padding-right:0 !important;}
  .clubs-page .premium-club-route{display:grid !important;grid-template-columns:1fr !important;gap:8px !important;}
  .clubs-page .premium-club-route b{display:none !important;}
  .clubs-page .status-legend div{grid-template-columns:1fr !important;gap:5px !important;}

  /* CONTACTS phone */
  .contacts-page .contacts-hero{min-height:420px !important;}
  .contacts-page .contacts-hero-copy{width:100% !important;padding:40px 20px !important;}
  .contacts-page .contacts-hero h1{font-size:44px !important;}
  .contacts-page .contacts-content{width:calc(100% - 24px) !important;padding:34px 0 48px !important;}
  .contacts-page .contacts-direct,.contacts-page .contacts-intro,.contacts-page .contact-route{padding-left:0 !important;padding-right:0 !important;}
  .contacts-page .contacts-social-links a,.contacts-page .contacts-direct-links a{overflow-wrap:anywhere !important;}

  /* RULES phone */
  .rules-page .rules-content{width:calc(100% - 24px) !important;}
  .rules-page .rules-hero{padding:24px 18px !important;}
  .rules-page .rules-hero h1{font-size:38px !important;}
  .rules-page .rule-section{padding:18px !important;}
  .rules-page .rules-toc-inner{padding:14px !important;}

  /* REGISTER phone */
  .register-page .registration-hero{min-height:400px !important;}
  .register-page .registration-hero-copy{width:100% !important;padding:40px 20px !important;}
  .register-page .registration-hero h1{font-size:42px !important;}
  .register-page .registration-layout{width:calc(100% - 24px) !important;padding:32px 0 46px !important;}
  .register-page .registration-panel{padding:22px 18px !important;}
  .register-page .form-row.two{grid-template-columns:1fr !important;}
  .register-page input,.register-page select,.register-page textarea{font-size:16px !important;min-height:46px !important;}

  /* unified minimal footer */
  .site-social-footer{width:calc(100% - 24px) !important;margin-top:18px !important;padding:18px 0 22px !important;}
  .site-social-footer .footer-brand{flex-direction:column !important;gap:8px !important;}
  .site-social-footer .footer-brand img{width:64px !important;height:46px !important;}
  .site-social-footer .footer-socials{gap:28px !important;}
}


/* =========================================================
   BUG SITE v2.80 — centered icon footer + Artel photo restore
   ========================================================= */
.clubs-page .club-launch-visual{
  background:
    linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.34)),
    url("assets/artel-club.jpg") center center / cover no-repeat !important;
}

.site-social-footer{
  width:min(1500px,94vw) !important;
  margin:24px auto 0 !important;
  padding:18px 0 24px !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  text-align:center !important;
  border-top:1px solid rgba(197,167,92,.18) !important;
}
.site-social-footer .footer-brand{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-width:0 !important;
}
.site-social-footer .footer-brand img{
  width:68px !important;
  height:50px !important;
  object-fit:contain !important;
}
.site-social-footer .footer-brand div{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:3px !important;
}
.site-social-footer .footer-brand span{
  font-size:13px !important;
  line-height:1.35 !important;
  color:#b8bbb5 !important;
}
.site-social-footer .footer-brand small{
  font-size:11px !important;
  line-height:1.3 !important;
  color:#777d78 !important;
}
.site-social-footer .footer-socials,
.site-social-footer .footer-socials-icons{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  margin:0 !important;
}
.site-social-footer .footer-socials a::before,
.site-social-footer .footer-socials a+a::before{
  content:none !important;
}
.site-social-footer .footer-social-link{
  width:46px !important;
  height:46px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(197,167,92,.34) !important;
  border-radius:50% !important;
  color:#c5a75c !important;
  background:rgba(9,15,13,.58) !important;
  text-decoration:none !important;
  transition:transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease !important;
}
.site-social-footer .footer-social-link svg{
  width:21px !important;
  height:21px !important;
  display:block !important;
}
.site-social-footer .footer-social-link:hover{
  transform:translateY(-1px) !important;
  color:#e5cb87 !important;
  border-color:rgba(229,203,135,.58) !important;
  background:rgba(13,22,18,.75) !important;
}
@media (max-width: 1180px){
  .site-social-footer{width:92vw !important; margin-top:18px !important;}
}
@media (max-width: 640px){
  .site-social-footer{padding:16px 0 20px !important; gap:12px !important;}
  .site-social-footer .footer-brand img{width:62px !important;height:46px !important;}
  .site-social-footer .footer-social-link{width:42px !important;height:42px !important;}
  .site-social-footer .footer-social-link svg{width:19px !important;height:19px !important;}
}


/* =========================================================
   BUG SITE v2.82 — footer desktop alignment
   Brand left, social icons centered
   ========================================================= */
@media (min-width:1181px){
  .site-social-footer{
    width:min(1500px,94vw) !important;
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    align-items:center !important;
    gap:20px !important;
    text-align:left !important;
  }
  .site-social-footer .footer-brand{
    grid-column:1 !important;
    justify-self:start !important;
    flex-direction:row !important;
    align-items:center !important;
    text-align:left !important;
  }
  .site-social-footer .footer-brand div{
    align-items:flex-start !important;
  }
  .site-social-footer .footer-socials,
  .site-social-footer .footer-socials-icons{
    grid-column:2 !important;
    justify-self:center !important;
    justify-content:center !important;
  }
}


/* =========================================================
   BUG SITE v2.84 — equal visual size for ABOUT pillar icons
   ========================================================= */
@media (min-width:1051px){
  body.about-page .release-pillars.about-premium-pillars > article.about-pillar .pillar-icon.premium-about-icon img.about-symbol-img{
    transform-origin:center center !important;
  }
  body.about-page .release-pillars.about-premium-pillars > article.about-pillar.about-pillar-technique .pillar-icon.premium-about-icon img.about-symbol-img{
    transform:scale(1.10) !important;
  }
  body.about-page .release-pillars.about-premium-pillars > article.about-pillar.about-pillar-strategy .pillar-icon.premium-about-icon img.about-symbol-img{
    transform:scale(1.08) !important;
  }
  body.about-page .release-pillars.about-premium-pillars > article.about-pillar.about-pillar-risk .pillar-icon.premium-about-icon img.about-symbol-img{
    transform:scale(0.95) !important;
  }
  body.about-page .release-pillars.about-premium-pillars > article.about-pillar.about-pillar-time .pillar-icon.premium-about-icon img.about-symbol-img{
    transform:scale(1.08) !important;
  }
  body.about-page .release-pillars.about-premium-pillars > article.about-pillar.about-pillar-character .pillar-icon.premium-about-icon img.about-symbol-img{
    transform:scale(0.94) !important;
  }
}


/* =========================================================
   BUG SITE v2.86 — mobile news overflow fix
   Keeps all home news copy inside the viewport/card.
   ========================================================= */
@media (max-width: 700px){
  .home-page .news-card{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  .home-page .news-card .card-head{
    min-width:0 !important;
    gap:10px !important;
  }
  .home-page .news-more-label{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }
  .home-page .news-item{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-template-columns:68px minmax(0,1fr) !important;
    gap:12px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .home-page .news-item > div:last-child{
    min-width:0 !important;
    max-width:100% !important;
    width:100% !important;
    overflow:hidden !important;
  }
  .home-page .news-item strong,
  .home-page .news-item span,
  .home-page .news-item time{
    display:block !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }
  .home-page .news-item strong{font-size:14px !important;line-height:1.28 !important;}
  .home-page .news-item span{font-size:12.5px !important;line-height:1.35 !important;}
  .home-page .news-thumb{
    width:68px !important;
    height:48px !important;
    min-width:68px !important;
    overflow:hidden !important;
  }
  .home-page .news-thumb img{
    max-width:100% !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }
}


/* V299: refine final timeline block on how-to-play page */
.how-page .final-timeline{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px 16px;
}
.how-page .timeline-top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  flex:1 1 auto;
}
.how-page .half{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
}
.how-page .reverse{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
}
.how-page .reverse-line{
  font-size:21px;
  color:#559c46;
  line-height:1.05;
  white-space:nowrap;
}
.how-page .reverse b{
  font-size:inherit;
  font-weight:600;
}
.how-page .reverse small{
  display:block;
  margin:0;
  color:#d6d2ca;
  font-size:12.5px;
  line-height:1.35;
}
.how-page .warning{
  position:static;
  left:auto;
  right:auto;
  bottom:auto;
  min-height:0;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  border-top:1px solid rgba(174,119,19,.28);
  padding-top:12px;
  font-size:12.8px;
  line-height:1.45;
  color:#d6d2ca;
  text-align:center;
}
.how-page .warning-bell{
  font-size:22px;
  line-height:1;
  align-self:center;
}

@media (min-width:1100px){
  .how-page .final-timeline{
    padding:1.5vh 1.3vw 1.25vh;
    gap:1.2vh;
  }
  .how-page .timeline-top{
    gap:1.3vw;
  }
  .how-page .reverse-line{
    font-size:21px;
  }
  .how-page .warning{
    padding-top:1vh;
    font-size:13px;
  }
}

@media (max-width:1100px){
  .how-page .final-rules-row{
    align-items:start;
  }
  .how-page .final-timeline{
    padding:18px 18px 16px;
    min-height:0;
    height:auto;
  }
  .how-page .timeline-top{
    gap:14px;
  }
}

@media (max-width:620px){
  .how-page .final-timeline{
    padding:16px 16px 14px;
    gap:14px;
  }
  .how-page .timeline-top{
    grid-template-columns:1fr;
    gap:12px;
  }
  .how-page .reverse-line{
    font-size:19px;
    white-space:normal;
  }
  .how-page .warning{
    text-align:left;
    font-size:12.5px;
  }
}


/* V2107 — partner club card */
.clubs-page .club-partner-card{margin-top:28px;}
.clubs-page .club-status-partner{
  color:#d9b85d;
  border-color:rgba(205,164,61,.68);
  background:rgba(25,18,2,.72);
}
.clubs-page .club-partner-card .club-launch-copy>p:last-of-type{color:#c3c8c4;}
@media(max-width:760px){
  .clubs-page .club-partner-card{margin-top:18px;}
}


/* V2111 — Central BK partner card corrections */
.clubs-page .club-partner-card .club-partner-visual{
  background:
    linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.34)),
    url("assets/centralbk-club.jpg") center center / cover no-repeat !important;
}
.clubs-page .club-partner-card .club-table-stats>div{
  padding-left:22px !important;
  padding-right:18px !important;
}
.clubs-page .club-partner-card .club-table-stats>div+div{
  padding-left:22px !important;
}
@media(max-width:760px){
  .clubs-page .club-partner-card .club-table-stats>div,
  .clubs-page .club-partner-card .club-table-stats>div+div{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}


/* V2112 — club entities: catalog + isolated club profile pages */
.club-catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:28px}
.club-catalog-card{display:block;border:1px solid rgba(199,154,57,.34);background:rgba(1,8,5,.75);text-decoration:none;overflow:hidden;transition:transform .2s ease,border-color .2s ease}
.club-catalog-card:hover{transform:translateY(-2px);border-color:rgba(209,171,72,.7)}
.club-catalog-photo{position:relative;min-height:330px;background-position:center;background-size:cover;background-repeat:no-repeat}
.club-catalog-copy{padding:30px 32px 32px}
.club-catalog-copy h3{margin:8px 0 12px;color:#f0dea6;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:31px;line-height:1.08}
.club-catalog-copy p{margin:0 0 20px;color:#bfc5c1;font-size:15.5px}
.club-catalog-open{color:#d8aa34;font-size:12.5px;letter-spacing:.14em}
.club-profile-main{padding:34px 0 70px}
.club-profile-wrap{width:min(1740px,96vw);margin:0 auto}
.club-profile-hero{display:grid;grid-template-columns:1.15fr .85fr;border:1px solid rgba(199,154,57,.38);background:rgba(1,8,5,.75);overflow:hidden}
.club-profile-photo{position:relative;min-height:610px;background-position:center;background-size:cover;background-repeat:no-repeat}
.club-profile-copy{display:flex;flex-direction:column;justify-content:center;padding:54px 58px}
.club-profile-copy h1{margin:12px 0 22px;color:#f0dea6;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(40px,4vw,66px);line-height:.98}
.club-profile-copy>p{color:#bec4c0;font-size:17px;line-height:1.7;margin:0 0 28px}
.club-profile-copy .club-table-stats>div{display:grid;grid-template-columns:64px 1fr;align-items:center;padding:18px 22px}
.club-profile-copy .club-table-stats strong{text-align:center}
.club-profile-section{margin-top:36px;border:1px solid rgba(199,154,57,.28);padding:34px 38px;background:rgba(2,9,6,.62)}
.club-profile-lead{max-width:820px;color:#bdc3bf;font-size:16px;line-height:1.65;margin:0 0 22px}
.club-mini-games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 22px}
.club-mini-games a{display:flex;gap:16px;align-items:center;padding:18px;border:1px solid rgba(199,154,57,.28);text-decoration:none;color:#d7d9d3;background:rgba(0,0,0,.15)}
.club-mini-games b{color:#d8aa34;font-weight:500}.club-mini-games span{color:#c4c8c5}
@media(max-width:980px){.club-catalog-grid{grid-template-columns:1fr}.club-profile-hero{grid-template-columns:1fr}.club-profile-photo{min-height:390px}.club-profile-copy{padding:34px 28px}.club-mini-games{grid-template-columns:1fr}}
@media(max-width:620px){.club-catalog-photo{min-height:240px}.club-catalog-copy{padding:24px 20px}.club-catalog-copy h3{font-size:27px}.club-profile-main{padding-top:18px}.club-profile-wrap{width:calc(100% - 24px)}.club-profile-photo{min-height:260px}.club-profile-copy{padding:26px 20px}.club-profile-copy h1{font-size:36px}.club-profile-copy .club-table-stats{grid-template-columns:1fr 1fr!important}.club-profile-copy .club-table-stats>div{grid-template-columns:52px 1fr;padding:14px 12px}.club-profile-section{padding:24px 20px}}