/*
 * monkey-mart.io - "market" skin.
 *
 * Monkey Mart is a bright jungle supermarket, so the page is built out of shelf
 * furniture: a deep-green room, banana-yellow price tags, and a wooden plank
 * under every section heading. Headings stay left-aligned over their shelf and
 * the cards are flat crates rather than glowing rings, which is what makes this
 * layout read differently from the sibling sites.
 */

:root {
  /* GeneratePress global palette */
  --base: #0f1a12;
  --base-2: #16261a;
  --base-3: #132015;
  --contrast: #eef8f0;
  --contrast-2: #9fc0a6;
  --contrast-3: #67836d;
  --accent: #ffc93c;

  /* category rail */
  --sb-bg: #0c150e;
  --sb-bd: rgba(255, 201, 60, .14);
  --sb-hl: rgba(74, 222, 128, .16);
  --sb-t: #9fc0a6;
  --sb-th: #ffffff;
  --sb-a: #ffc93c;

  /* homepage tokens */
  --ph-bg: #0d1710;
  --ph-surface: #16261a;
  --ph-surface-2: #1d3423;
  --ph-text: #eaf6ec;
  --ph-heading: #ffffff;
  --ph-muted: #9fc0a6;
  --ph-accent: #ffc93c;
  --ph-accent-2: #4ade80;
  --ph-on-accent: #17300f;
  --ph-border: #24402a;
  --ph-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* the plank under each heading, reused by cards */
  --mk-wood: linear-gradient(180deg, #b9762f, #8a5220);
}

body {
  background-color: #0d1710;
  background-image:
    radial-gradient(900px 420px at 12% -10%, rgba(74, 222, 128, .16), transparent 62%),
    radial-gradient(760px 380px at 88% -6%, rgba(255, 201, 60, .14), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #eaf6ec;
}

.site-header,
.main-navigation { background: rgba(12, 21, 14, .88) !important; backdrop-filter: blur(10px); }

.site-header { border-bottom: 1px solid rgba(255, 201, 60, .2); }

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items { color: #cfe6d4 !important; font-weight: 600; }

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.sfHover > a { color: #17300f !important; background: #ffc93c !important; }
.main-navigation .main-nav ul li.current-menu-item > a { color: #ffc93c !important; }
.main-navigation ul ul { background: #16261a; border: 1px solid rgba(255, 201, 60, .2); border-radius: 12px; overflow: hidden; }

.inside-article,
.sidebar .widget,
.comments-area {
  background: #16261a;
  border: 1px solid #24402a;
  border-radius: 16px;
}

.site-footer,
.site-info,
.footer-widgets { background: #0b140d !important; color: #9fc0a6; border-top: 1px solid rgba(255, 201, 60, .18); }
.site-footer a, .site-info a { color: #ffc93c !important; }

a { color: #ffd464; }

#game-container { border: 1px solid rgba(255, 201, 60, .32); border-radius: 18px; overflow: hidden; box-shadow: 0 22px 50px rgba(0, 0, 0, .5); }
#play-game-button { background: linear-gradient(100deg, #ffc93c, #4ade80) !important; color: #17300f !important; font-weight: 800 !important; border-radius: 14px !important; }

/* ---------- homepage ---------- */

.ph--market { --ph-radius: 18px; --ph-card-radius: 14px; }

/* The intro is a shop window: copy on the left, the counter facts on the right,
   over a crate-stack pattern. */
.ph--market .ph-intro {
  position: relative;
  overflow: hidden;
  padding: 34px 26px 28px;
  border: 1px solid rgba(255, 201, 60, .22);
  background:
    repeating-linear-gradient(90deg, rgba(255, 201, 60, .05) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg, rgba(74, 222, 128, .05) 0 2px, transparent 2px 64px),
    linear-gradient(160deg, #17291b, #12200f);
}

.ph--market .ph-intro__eyebrow { color: #4ade80; }

.ph--market .ph-intro__title {
  font-weight: 800;
  letter-spacing: -.02em;
  color: #ffffff;
}

/* the banana under the headline */
.ph--market .ph-intro__title::after {
  content: "";
  display: block;
  width: 96px;
  height: 6px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffc93c, #4ade80);
}

.ph--market .ph-facts li {
  border-radius: 12px;
  padding: 13px 16px;
  background: rgba(29, 52, 35, .8);
  border-color: rgba(255, 201, 60, .22);
}

.ph--market .ph-facts b { color: #ffc93c; font-variant-numeric: tabular-nums; }

.ph--market .ph-search input { border-radius: 12px; padding-inline: 16px; }
.ph--market .ph-search button {
  background: linear-gradient(100deg, #ffc93c, #ffb703);
  color: #17300f;
  border-radius: 12px;
  font-weight: 800;
}

/* Every shelf heading sits on a wooden plank, left aligned. */
.ph--market .ph-shelf__head {
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 0;
  position: relative;
}

.ph--market .ph-shelf__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  border-radius: 3px;
  background: var(--mk-wood);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}

.ph--market .ph-shelf__title { font-weight: 800; font-size: 21px; }
.ph--market .ph-shelf__icon { color: #ffc93c; }

.ph--market .ph-shelf__more {
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 201, 60, .35);
  color: #ffc93c;
}

.ph--market .ph-shelf__more:hover { background: rgba(255, 201, 60, .16); text-decoration: none; }

/* Cards are crates: flat, thin border, they lift straight up on hover. */
.ph--market .ph-card__art {
  border: 1px solid #24402a;
  background: #16261a;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.ph--market .ph-thumb { border-radius: 12px; }

.ph--market .ph-card:hover .ph-card__art {
  transform: translateY(-4px);
  border-color: #ffc93c;
  box-shadow: 0 14px 26px rgba(0, 0, 0, .5), 0 0 0 3px rgba(255, 201, 60, .16);
}

.ph--market .ph-card__play {
  inset: auto 0 0 0;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(100deg, #ffc93c, #4ade80);
  color: #17300f;
}

/* the rank is a price tag pinned to the crate */
.ph--market .ph-card__rank {
  top: 8px;
  left: 8px;
  border-radius: 4px 8px 8px 4px;
  background: #ffc93c;
  color: #17300f;
  font-weight: 800;
  transform: rotate(-4deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}

.ph--market .ph-about {
  background: #16261a;
  border-color: rgba(255, 201, 60, .18);
}

.ph--market .ph-about__block h2 { color: #ffc93c; }

.ph--market .ph-faq__item { border-top-color: rgba(255, 201, 60, .16); }

@media (max-width: 640px) {
  .ph--market .ph-facts { grid-template-columns: 1fr; }
  .ph--market .ph-intro { padding: 26px 18px 22px; }
}

/* ---------- shared corrections (same on all sibling skins) ---------- */

/*
 * An ad slot that never fills still holds its reserved height, which on this
 * layout is a blank band directly above the game. AdSense stamps the outcome
 * on the element, so collapse only the slots that actually came back empty -
 * never before, or the reserved space is gone when the ad does fill.
 */
ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

/* ---------- mobile header ----------
   The fleet header paints a fixed 40x40 sidebar toggle at (12, 12) — exactly
   on top of the 44px site logo, which sits at (12, 10) in the header flow. The
   wordmark was completely hidden behind the button on every phone. Nothing but
   the logo needs to move, so push it clear of the toggle. */
@media (max-width: 768px) {
  /* An inline `.site-header .site-logo { margin: 0 !important }` ships in the
     head, so this needs both the specificity and the !important to land. */
  .site-header .site-logo {
    margin-left: 52px !important;
  }
}

/* ---------- Border diet — theme furniture (2026-08-24) ----------
   The article, widget and comment boxes already sit on their own surface
   colour, and the header and footer already change colour against the page, so
   none of them needs a line as well. The game frame keeps its shadow. */
.inside-article,
.sidebar .widget,
.comments-area,
.site-header,
.site-footer,
.site-info,
.footer-widgets,
#game-container {
  border: 0 !important;
}

/* ---------------------------------------------------------------------------
   Sidebar cards each carry this skin's 2px frame and the theme stacks them
   flush, so the ad card's bottom border and the next card's top border meet as
   one doubled line with no space between the two boxes. Give them the same
   22px rhythm the ad box uses.
--------------------------------------------------------------------------- */
.inside-right-sidebar > .widget + .widget,
.inside-left-sidebar > .widget + .widget,
.sidebar .widget + .widget {
  margin-top: 22px;
}

/* A filled ad paints right up to the frame drawn around it. Rounding the unit
   inside the frame keeps the creative off the border line. Padding is not an
   option: it would shrink the reserved box below the size AdSense was asked
   for, which is the whole point of .w3ph-adbox. */
.w3ph-adbox > ins.adsbygoogle {
  margin: 0 !important;
  border-radius: 10px;
  overflow: hidden;
}