/* ============================================================
   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;
}

/* ===================== NAV DROPDOWNS (game categories) ===================== */
/* Desktop: category is a non-clickable parent; its games drop down on
   hover/focus. Mobile: the drawer turns each category into a tap-to-expand
   accordion row (no hover on touch). */

/* --- desktop hover dropdown --- */
.menu-link-ol-web .menu>li.has-sub{position:relative;}
.menu-parent{display:inline-flex;align-items:center;cursor:default;-webkit-user-select:none;user-select:none;}
.bfa-caret{font-size:9px;line-height:1;margin-left:5px;opacity:.65;transition:transform .15s;}
.menu-link-ol-web li.has-sub:hover .bfa-caret,
.menu-link-ol-web li.has-sub:focus-within .bfa-caret{transform:rotate(180deg);}
.bfa-submenu{
  list-style:none;margin:0;padding:6px;
  position:absolute;top:100%;left:0;min-width:210px;
  background:#fff;border:1px solid #e1eae5;border-radius:10px;
  box-shadow:0 12px 30px rgba(20,50,48,.16);
  z-index:50;
  /* fade + slide reveal instead of an abrupt display toggle; absolute so
     visibility:hidden keeps it out of the hover/tab path while closed */
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.menu-link-ol-web li.has-sub:hover>.bfa-submenu,
.menu-link-ol-web li.has-sub:focus-within>.bfa-submenu{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
/* keep the last category's panel inside the viewport */
.menu-link-ol-web .menu>li.has-sub:last-child .bfa-submenu{left:auto;right:0;}
/* .menu-web scope beats the inherited .menu-web .menu li{inline-block} + .menu-item a{uppercase} */
.menu-web .bfa-submenu li{display:block;margin:0;}
.menu-web .bfa-submenu a{
  display:block;margin:0;padding:9px 14px;border-radius:7px;
  font-size:14px;font-weight:600;color:#154543;text-decoration:none;
  text-transform:none;white-space:nowrap;
  font-family:var(--font,'Roboto','Segoe UI',system-ui,-apple-system,sans-serif);
}
.menu-web .bfa-submenu a:hover{background:#f1f6f3;color:#ff685d;}

/* --- mobile drawer accordion --- */
/* clear the fixed close (×) so it doesn't sit on the first category's caret;
   cap height + scroll so several open categories never run off-screen */
.menu-mobile-inside{padding-top:46px;max-height:calc(100vh - var(--bfa-h));overflow-y:auto;}
.menu-mobile-inside .menu{display:block;}
.bfa-acc-item{border-bottom:1px solid #15454342;}
.bfa-acc-item:last-child{border-bottom:0;}
.bfa-acc-parent{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:none;border:0;cursor:pointer;margin:0;text-align:left;
  padding:13px 4px 13px 15px;
  font-size:15px;font-weight:700;color:#154543;text-transform:capitalize;
  font-family:var(--font,'Roboto','Segoe UI',system-ui,-apple-system,sans-serif);
}
.bfa-acc-caret{font-size:11px;opacity:.65;transition:transform .2s;}
.bfa-acc-item.open .bfa-acc-caret{transform:rotate(180deg);}
.bfa-acc-sub{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .25s ease;}
.bfa-acc-item.open .bfa-acc-sub{max-height:640px;}
.bfa-acc-sub li{margin:0;}
.bfa-acc-sub a{
  display:block;padding:11px 0 11px 30px;
  font-size:14px;font-weight:600;color:#154543;text-decoration:none;
  border-top:1px solid #15454322;
}
.bfa-acc-sub a:hover{color:#ff685d;}
/* plain main-site link rows in the drawer (no dropdown) */
.menu-mobile-inside .bfa-acc-link{
  display:block;padding:13px 4px 13px 15px;
  font-size:15px;font-weight:700;color:#154543;text-decoration:none;text-transform:capitalize;
  font-family:var(--font,'Roboto','Segoe UI',system-ui,-apple-system,sans-serif);
}
.menu-mobile-inside .bfa-acc-link:hover{color:#ff685d;}

/* divider between game categories and the main-site links */
.menu-web .menu-item.site-first{ margin-left:9px;padding-left:17px;border-left:1px solid #cdd9d3; }
.menu-mobile-inside .bfa-acc-item.site-first{ margin-top:8px;border-top:1px solid #15454342; }

/* --- brand-consistent keyboard focus rings (was browser-default blue) --- */
.menu-parent:focus-visible,
.menu-web .menu-item a:focus-visible{ outline:2px solid #44706e;outline-offset:3px;border-radius:4px; }
.menu-web .bfa-submenu a:focus-visible,
.menu-mobile-inside .bfa-acc-parent:focus-visible,
.menu-mobile-inside .bfa-acc-sub a:focus-visible,
.menu-mobile-inside .bfa-acc-link:focus-visible{ outline:2px solid #44706e;outline-offset:-2px;border-radius:6px; }

@media (prefers-reduced-motion:reduce){
  .bfa-caret,.bfa-acc-caret,.bfa-acc-sub,.bfa-submenu{transition:none;}
  .bfa-submenu{transform:none;}
}

/* ============================ FOOTER (mirrors bestforandroid.com) ============================ */
/* Tokens scoped to the footer so the rest of the arcade chrome is untouched. */
.bfa-site-footer{
  --accent:#1f7a52; --accent-d:#15543a;
  --text:#10231f; --text-2:#44544e; --text-3:#5b6a63;
  --surface:#ffffff; --surface-2:#f1f6f3; --surface-3:#e9f1ec;
  --border:#e1eae5; --border-2:#cddcd4;
  --r-sm:8px; --r-lg:16px; --max:1140px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* aliases referenced by the copied markup */
  --primary-color-one:#1f7a52; --primary-color-two:#10231f; --text-color-three:#5b6a63;
  font-family:var(--font) !important;
  background:var(--surface); color:var(--text); line-height:1.6;
  /* Full-bleed even inside a centered/padded flex <body> (game pages set
     body{display:flex;align-items:center;padding:16px}, which would otherwise
     shrink-wrap the footer and wrap its columns). 100vw + the margin trick
     escapes both the centering and the body padding; body has overflow-x:hidden
     so the scrollbar-width overhang is clipped, no horizontal scroll. */
  align-self:stretch; width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw);
}
.bfa-site-footer *{ box-sizing:border-box; }

/* SVG top border + airy gap before content */
.bfa-site-footer::before{
  content:""; display:block; width:100%; height:13px;
  background:url(bfa-footer-border.svg) repeat-x; background-size:contain;
  margin-top:56px; margin-bottom:24px;
}
.bfa-ft-wrap{ max-width:var(--max); margin:0 auto; padding:32px 24px 36px; }

/* hard reset list styling */
.bfa-site-footer ul, .bfa-ft-menu, .bfa-ft-menu ul, .bfa-ft-legal-nav{ list-style:none !important; margin:0 !important; padding:0 !important; }
.bfa-ft-menu li, .bfa-ft-legal-nav li{
  list-style:none !important; margin:0 !important; padding:0 !important;
  text-indent:0 !important; position:static !important; float:none !important; line-height:1.4 !important;
}
.bfa-ft-menu li::marker, .bfa-ft-legal-nav li::marker{ content:"" !important; }
.bfa-ft-menu li::before, .bfa-ft-legal-nav li::before{ content:none !important; display:none !important; }

/* layout: brand + columns */
.bfa-ft-cols{ display:flex !important; flex-wrap:wrap; gap:40px; align-items:flex-start; }
.bfa-ft-brand{ flex:0 0 300px; max-width:300px; }
.bfa-ft-colset{ flex:1 1 460px; display:flex !important; flex-wrap:wrap; gap:32px 48px; }
.bfa-ft-col{ flex:1 1 150px; min-width:140px; max-width:240px; }

/* brand */
.bfa-ft-logo{ display:inline-block; margin-bottom:14px; text-decoration:none; }
.bfa-ft-logo img{ height:40px; width:auto; display:block; max-width:100%; }
.bfa-ft-blurb{ color:var(--text-color-three) !important; font-size:13px !important; line-height:1.6 !important; margin:0 !important; font-weight:400 !important; }
.bfa-ft-socials{ display:flex !important; gap:8px; margin-top:16px; }
.bfa-ft-socials a{
  display:inline-flex !important; align-items:center; justify-content:center; width:36px; height:36px;
  border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text-3) !important;
  transition:background .15s,border-color .15s,color .15s; text-decoration:none !important;
}
.bfa-ft-socials a:hover{ color:var(--accent-d) !important; border-color:var(--border-2); background:var(--surface-3); }
.bfa-ft-socials svg{ width:18px; height:18px; fill:currentColor; display:block; }

/* column heading = menu name */
.bfa-ft-col-head{ display:block; color:var(--primary-color-two) !important; font-weight:680; font-size:13px; margin-bottom:14px; line-height:1.3; }

/* column links */
.bfa-ft-menu{ display:flex !important; flex-direction:column !important; gap:12px !important; }
.bfa-ft-menu a{
  display:block !important; color:var(--text-color-three) !important;
  font-size:13.5px !important; line-height:1.4 !important; font-weight:500 !important;
  margin:0 !important; padding:0 !important;
  text-decoration:none !important; text-transform:none !important; letter-spacing:normal !important;
}
.bfa-ft-menu a:hover{ color:var(--text) !important; }

/* newsletter */
.bfa-ft-news{
  display:flex !important; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:42px; padding:22px 24px; background:#44706e14; border:1px solid #44706e2b; border-radius:var(--r-lg);
}
.bfa-ft-news__text{ display:flex; flex-direction:column; gap:3px; }
.bfa-ft-news__text strong{ color:var(--primary-color-two) !important; font-size:15px !important; font-weight:680 !important; }
.bfa-ft-news__text span{ color:var(--primary-color-one) !important; font-size:13px !important; }
.bfa-ft-news__form{ flex:1 1 340px; max-width:480px; display:flex !important; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.bfa-ft-news__input{
  flex:1 1 220px; min-width:200px; font-family:inherit; font-size:14px !important;
  padding:11px 14px !important; line-height:1.3 !important;
  border:1px solid var(--border-2) !important; border-radius:var(--r-sm) !important;
  background:var(--surface) !important; color:var(--text) !important;
}
.bfa-ft-news__input::placeholder{ color:var(--text-3); }
.bfa-ft-news__input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent) !important; }
.bfa-ft-news__btn{
  flex:none; border:none !important; cursor:pointer; font-family:inherit;
  background:var(--primary-color-one) !important; color:#fff !important; font-weight:600 !important; font-size:14px !important;
  padding:11px 22px !important; border-radius:var(--r-sm); line-height:1.3 !important;
  text-decoration:none !important; transition:background .15s;
}
.bfa-ft-news__btn:hover{ background:var(--accent-d) !important; }

/* honeypot — off-screen, never visible */
.bfa-ft-hp{ position:absolute !important; left:-5000px !important; width:1px; height:1px; overflow:hidden; }

/* legal bar — centered + dimmed copyright */
.bfa-ft-legal{
  display:flex !important; flex-direction:column; align-items:center; text-align:center; gap:22px;
  margin-top:32px; padding-top:30px; border-top:2px dotted var(--border);
}
.bfa-ft-legal-nav{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:8px 24px; }
.bfa-ft-legal-nav a{ color:var(--text-3) !important; font-size:13px !important; font-weight:500 !important; text-decoration:none !important; }
.bfa-ft-legal-nav a:hover{ color:var(--text) !important; }
.bfa-ft-copyright{ color:var(--text-3) !important; font-size:12px !important; opacity:.7; }
.bfa-site-footer a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width:680px){
  .bfa-ft-wrap{ padding:24px 16px 28px; }
  .bfa-ft-news{ padding:18px 16px; }
  .bfa-ft-news__form{ justify-content:stretch; }
}

@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}
}