/* ============================================================
   BestForAndroid site chrome : header + footer
   Mirrors bestforandroid.com so games.bestforandroid.com pages
   match the main site on mobile and desktop.
   Markup is injected by bfa-chrome.js; this sheet styles it.
   Colours/sizes copied from the live theme (style.css).
   ============================================================ */

:root{
  --bfa-p1:#44706e;   /* primary-color-one  */
  --bfa-p2:#154543;   /* primary-color-two  */
  --bfa-accent:#ff685d;
  --bfa-t3:#646464;
  --bfa-t4:#677075;
  --bfa-max:1100px;
  --bfa-h:69px;       /* header height (mobile) */
}

/* ---- in-flow spacer so fixed header never overlaps content ---- */
.bfa-spacer{height:var(--bfa-h);flex:0 0 auto;width:100%}

/* ============================ HEADER ============================ */
.top-menu-bar-header{
  border-bottom:4px solid #44706e;
  display:flex;justify-content:center;width:100%;
  position:fixed;top:0;left:0;background:#fff;z-index:9999;
}
.top-menu-bar{
  height:65px;width:100%;max-width:var(--bfa-max);
  display:flex;flex-direction:row;justify-content:space-between;align-items:center;
  margin:0 18px;box-sizing:border-box;
}
.logo,.right-section{display:flex;align-items:center}
.logo{margin:0}
.bfa-logo-img{height:45px;width:auto;display:block}
.logo:hover,.search-botton:hover{opacity:.7}

.menu-web{display:flex;align-items:center}
.menu-link-ol-web{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.menu-link-ol-web .menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.menu-link-ol-web li,.menu-web .menu li{display:inline-block}
.menu-text,.menu-item a{
  color:#154543;text-transform:uppercase;text-decoration:none;
  font-size:14px;padding:6px;margin-right:8px;font-weight:bold;
  font-family:var(--font,'Roboto','Segoe UI',system-ui,-apple-system,sans-serif);
}
.menu-text:hover,.menu-item a:hover{color:#ff685d}

.menu-mobile{cursor:pointer;display:flex;align-items:center}
.mobile-menu-icon{display:flex;align-items:center}
.right-section.search-botton{cursor:pointer}

/* desktop vs mobile swap (theme breakpoint = 600px) */
@media (min-width:600px){
  .top-menu-bar{margin-top:5px}
  .box-shadow-menu{box-shadow:0 0 30px 40px #fff}
  .menu-mobile{display:none}
  :root{--bfa-h:74px}
}
@media (max-width:599px){
  .menu-web{display:none}
}

/* ---- mobile drawer + search overlays (toggled via .displayhide) ---- */
.displayhide{display:none!important}

.menu-mobile-main{width:100%;align-self:stretch}
.menu-mobile-inside{
  display:flex;flex-direction:column;
  padding:5px 20px 5px 10px;border-bottom:4px solid #44706e;
  position:fixed;left:0;top:var(--bfa-h);background:#fff;width:100%;
  box-sizing:border-box;z-index:9998;
}
.menu-mobile-inside .menu{list-style:none;margin:0;padding:0}
.menu-mobile-inside .menu-item{border-bottom:1px solid #15454342}
.menu-mobile-inside .menu-item:last-child{border-bottom:0}
.menu-mobile-inside .menu-item a{
  display:block;padding:12px 0 12px 15px;margin:0;
  font-size:15px;text-transform:capitalize;color:#154543;text-decoration:none;font-weight:700;
}
.close-button{text-align:right;cursor:pointer;color:#154543}
.close-button-menu-mobile{
  padding:14px 18px;font-size:20px;font-weight:700;line-height:1;
  position:fixed;right:0;top:var(--bfa-h);z-index:9999;
}

.search-box-own{
  display:flex;flex-direction:column;justify-content:center;width:100%;
  background:#e2e8e8;padding:25px 0;border-bottom:4px solid #44706e;
  position:fixed;left:0;top:var(--bfa-h);align-self:stretch;box-sizing:border-box;z-index:9998;
}
.form-search{display:flex;justify-content:center;width:100%;padding:0 16px;box-sizing:border-box}
.search-top-text{
  width:60%;max-width:520px;border:1px solid #44706e;border-radius:8px;padding:10px;margin-right:5px;
  font-family:inherit;font-size:15px;
}
.search-top-button{
  border:1px solid #44706e;border-radius:8px;padding:10px 18px;font-weight:700;cursor:pointer;
  background:#44706e;color:#fff;font-family:inherit;font-size:14px;
}

/* ============================ FOOTER ============================ */
.footer{
  min-height:115px;display:flex;align-items:center;flex-direction:column;
  width:100%;align-self:stretch;box-sizing:border-box;margin-top:48px;
}
.footer:before{
  content:"";display:block;height:13px;width:100%;
  background:url(bfa-footer-border.svg) repeat-x;background-size:contain;
  margin-bottom:15px;
}
.footer-social-links{margin:25px auto 10px;display:flex;justify-content:center;align-items:center}
.social-profile{text-decoration:none;fill:#154543;margin-left:30px;display:inline-flex;align-items:center}
.social-profile:first-child{margin-left:0}
.social-profile:hover{fill:#44706e}

.footer-links{margin-top:10px;max-width:var(--bfa-max);width:100%;box-sizing:border-box;padding:0 16px}
.menu-footer-container ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;line-height:160%;
}
.menu-footer-container ul li{margin:0 15px 10px 0;display:block}
.menu-footer-container ul li a{
  font-size:12px;text-transform:capitalize;color:#646464;text-decoration:none;
}
.menu-footer-container ul li a:hover{color:#ff685d}
.copyright-notice{
  font-size:14px;color:#445670cc;padding:15px;line-height:150%;margin:0 auto;text-align:center;
}
.copyright-name-a{color:#445670cc;text-decoration:none}

@media (prefers-reduced-motion:reduce){
  .search-box-own{transition:none}
}

/* ============ ARCADE PAGE POLISH (shared; games only) ============
   Loads on every page, but these selectors only match game pages
   (.game) : the hub (.wrap/.card) is untouched. Lifts the flat white
   info panels off the near-white page and adds a faint on-brand
   backdrop so the centered ~430px game column doesn't float in empty
   space on wide desktops. */
.game .guide{
  box-shadow:0 1px 2px rgba(20,50,48,.05),0 6px 18px rgba(20,50,48,.06);
}
body:has(.game)::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -12%,rgba(68,112,110,.10),transparent 60%),
    radial-gradient(90% 55% at 50% 118%,rgba(129,215,66,.07),transparent 62%);
}

/* ============ ARCADE LAYOUT + GUIDE/SEO POLISH (v4; games only) ============
   .play-col / .info-col wrappers live in each game's markup, with .info-a
   (How to Play + FAQ) and .info-b (About + Related) inside .info-col. On
   mobile every wrapper is display:contents (single column preserved). On
   desktop the play area is a full-width row on top and the info section
   splits into two independent columns. .examples (NYT-style worked tiles)
   and .faq (accordion + FAQPage schema) components are styled here once. */

/* breathing room below the fixed header + at the foot */
body:has(.game) .game{margin-top:clamp(16px,2.6vw,32px);margin-bottom:clamp(22px,3vw,44px)}

/* NYT-style worked examples inside How to Play */
.examples{display:flex;flex-direction:column;gap:15px;margin-top:12px}
.ex-row{display:flex;flex-direction:column;gap:7px}
.ex-tiles{display:flex;gap:5px}
.ex-tile{width:clamp(34px,9.5vw,42px);aspect-ratio:1;border:2px solid #c2cacc;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(17px,5vw,21px);text-transform:uppercase;color:var(--ink,#222);background:#fff;flex:0 0 auto}
.ex-tile.correct{background:#5fb73a;border-color:#5fb73a;color:#fff}
.ex-tile.present{background:#f2c200;border-color:#f2c200;color:#3a2f00}
.ex-tile.absent{background:#9aa3ab;border-color:#9aa3ab;color:#fff}
.ex-cap{font-size:13.5px;line-height:1.5;color:var(--text,#3e4855)}
.ex-cap b,.ex-cap strong{color:var(--ink,#222)}

/* FAQ accordion (long-form SEO copy; mirrored by FAQPage JSON-LD) */
.faq{width:100%;margin-top:2px}
.faq>h3{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted,#7a838d);margin:0 0 9px}
.faq details{background:var(--surface,#fff);border:1px solid var(--line,#e6e9ea);border-radius:10px;margin-bottom:8px;box-shadow:0 1px 2px rgba(20,50,48,.05),0 6px 18px rgba(20,50,48,.06)}
.faq summary{cursor:pointer;padding:13px 15px;font-weight:700;font-size:14px;color:var(--ink,#222);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:19px;line-height:1;color:var(--teal,#44706e);font-weight:700}
.faq details[open] summary::after{content:"\2212"}
.faq .fa{padding:0 15px 14px;font-size:13.5px;line-height:1.6;color:var(--text,#3e4855)}
.faq .fa a{color:var(--teal,#44706e)}

/* stacked desktop: play area is a full-width row on top; info splits into
   two independent columns : col 1 = How to Play + FAQ, col 2 = About +
   Related. Wrappers are display:contents so mobile stays single-column
   (reading order: play, how-to-play, faq, about, related). */
.play-col,.info-col,.info-a,.info-b{display:contents}
@media (min-width:960px){
  body:has(.game) .game{
    max-width:min(1100px,92vw);
    display:flex;flex-direction:column;align-items:stretch;
    gap:clamp(20px,2.4vw,30px);
  }
  /* play area: full-width row, content centred at a comfortable max */
  .play-col{
    display:flex;flex-direction:column;gap:14px;
    width:100%;max-width:560px;margin-inline:auto;
  }
  /* info area: two independent stacked columns */
  .info-col{
    display:grid;grid-template-columns:1fr 1fr;
    align-items:start;column-gap:32px;width:100%;
  }
  .info-a,.info-b{display:flex;flex-direction:column;gap:16px;min-width:0}
}

/* ============ JUICE (shared; all pages) ============
   Particle overlay, score-pop, and screen-shake. Driven by bfa-juice.js;
   everything degrades gracefully if that script is absent. */
#bfa-fx{position:fixed;inset:0;pointer-events:none;z-index:9997;overflow:hidden}
.j-particle{position:absolute;top:0;left:0;width:9px;height:9px;border-radius:2px;line-height:1;will-change:transform,opacity}
@keyframes j-pop{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}
.j-pop{animation:j-pop .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes j-shake-sm{10%,90%{transform:translate(-1px,0)}30%,70%{transform:translate(2px,0)}50%{transform:translate(-3px,0)}}
@keyframes j-shake-md{10%,90%{transform:translate(-2px,1px)}30%,70%{transform:translate(4px,-1px)}50%{transform:translate(-6px,0)}}
@keyframes j-shake-lg{10%,90%{transform:translate(-3px,2px)}30%,70%{transform:translate(7px,-2px)}50%{transform:translate(-10px,0)}}
.j-shake-sm{animation:j-shake-sm .35s ease}
.j-shake-md{animation:j-shake-md .38s ease}
.j-shake-lg{animation:j-shake-lg .42s ease}
@media (prefers-reduced-motion:reduce){
  .j-pop,.j-shake-sm,.j-shake-md,.j-shake-lg{animation:none}
  #bfa-fx{display:none}
}