/*
 * doodlejump.io - "squared paper" skin.
 *
 * The game is a pencil doodle bouncing up a notebook page, so the site is a
 * notebook page: warm paper, a faint grid ruling, ink-outlined stickers with a
 * hard offset shadow instead of soft blur, and one doodle-green accent.
 *
 * The theme's own palette is re-pointed through GeneratePress' global colour
 * variables, so everything inherited (buttons, archives, comments) follows
 * without being restyled one selector at a time.
 */

:root {
  /* GeneratePress global palette */
  --base: #f6f1e3;
  --base-2: #fffdf7;
  --base-3: #ffffff;
  --contrast: #1e2a32;
  --contrast-2: #5d6b73;
  --contrast-3: #a8b3b8;
  --accent: #2c9e4b;

  /* category rail */
  --sb-bg: #1e2a32;
  --sb-bd: rgba(255, 255, 255, .08);
  --sb-hl: rgba(44, 158, 75, .18);
  --sb-t: #b9c4c9;
  --sb-th: #ffffff;
  --sb-a: #7bd694;

  /* homepage tokens */
  --ph-bg: #f6f1e3;
  --ph-surface: #fffdf7;
  --ph-surface-2: #f4efe0;
  --ph-text: #1e2a32;
  --ph-heading: #16212a;
  --ph-muted: #5d6b73;
  --ph-accent: #2c9e4b;
  --ph-accent-2: #ff6b4a;
  --ph-on-accent: #ffffff;
  --ph-border: #1e2a32;
  --ph-font: ui-rounded, "Segoe UI Rounded", "Hiragino Maru Gothic ProN", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

body {
  background-color: #f6f1e3;
  background-image:
    linear-gradient(rgba(30, 42, 50, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 42, 50, .055) 1px, transparent 1px);
  background-size: 26px 26px;
  color: #1e2a32;
  font-family: ui-rounded, "Segoe UI Rounded", "Hiragino Maru Gothic ProN", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

.site-header,
.main-navigation {
  background: #fffdf7 !important;
  color: #1e2a32;
}

.site-header { border-bottom: 2px solid #1e2a32; }

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items { color: #1e2a32 !important; }

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.sfHover > a { background: rgba(44, 158, 75, .12) !important; color: #14722f !important; }

.main-navigation .main-nav ul li.current-menu-item > a { color: #2c9e4b !important; }

.main-navigation ul ul { background: #fffdf7; border: 2px solid #1e2a32; border-radius: 12px; overflow: hidden; }

.inside-article,
.sidebar .widget,
.comments-area { background: #fffdf7; border: 2px solid #1e2a32; border-radius: 14px; box-shadow: 4px 4px 0 rgba(30, 42, 50, .1); }

.site-footer,
.site-info,
.footer-widgets { background: #1e2a32 !important; color: #d6dee2; }
.site-footer a, .site-info a { color: #9fe0b3 !important; }

a { color: #1c7d3b; }

button, .button, input[type="submit"] { border-radius: 10px; font-weight: 700; }

/* the player block the theme prints above the content */
#game-container { border: 2px solid #1e2a32; border-radius: 16px; overflow: hidden; box-shadow: 5px 5px 0 rgba(30, 42, 50, .12); }
#play-game-button { border-radius: 12px !important; font-weight: 800 !important; }

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

.ph--paper { --ph-radius: 16px; --ph-card-radius: 12px; }

.ph--paper .ph-intro {
  border: 2px solid var(--ph-border);
  box-shadow: 6px 6px 0 rgba(30, 42, 50, .1);
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(30, 42, 50, .05) 25px 26px),
    #fffdf7;
}

.ph--paper .ph-intro__title { font-weight: 800; letter-spacing: -.01em; }

.ph--paper .ph-intro__eyebrow {
  display: inline-block;
  padding: 3px 10px;
  border: 2px solid var(--ph-border);
  border-radius: 999px;
  background: #fff2c9;
  color: #1e2a32;
}

.ph--paper .ph-facts li { border: 2px solid var(--ph-border); box-shadow: 3px 3px 0 rgba(30, 42, 50, .1); }
.ph--paper .ph-facts li:nth-child(2) { background: #e8f6ec; }
.ph--paper .ph-facts li:nth-child(3) { background: #fff2c9; }

.ph--paper .ph-search input { border: 2px solid var(--ph-border); background: #fff; }
.ph--paper .ph-search button { border: 2px solid var(--ph-border); box-shadow: 3px 3px 0 rgba(30, 42, 50, .18); }
.ph--paper .ph-search button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(30, 42, 50, .18); }

/* a marker stroke behind the shelf heading */
.ph--paper .ph-shelf__title {
  font-weight: 800;
  background-image: linear-gradient(transparent 62%, rgba(44, 158, 75, .28) 62%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  align-self: flex-start;
  padding-right: 6px;
}

.ph--paper .ph-shelf__more {
  padding: 6px 12px;
  border: 2px solid var(--ph-border);
  border-radius: 999px;
  background: #fffdf7;
  box-shadow: 3px 3px 0 rgba(30, 42, 50, .12);
}

.ph--paper .ph-card__art {
  border: 2px solid var(--ph-border);
  background: #fff;
  box-shadow: 4px 4px 0 rgba(30, 42, 50, .1);
  transition: transform .16s ease, box-shadow .16s ease;
}

.ph--paper .ph-card:nth-child(3n) .ph-card__art { transform: rotate(-.9deg); }
.ph--paper .ph-card:nth-child(4n) .ph-card__art { transform: rotate(1deg); }

.ph--paper .ph-card:hover .ph-card__art {
  transform: rotate(0) translate(-2px, -2px);
  box-shadow: 7px 7px 0 rgba(44, 158, 75, .35);
}

.ph--paper .ph-card__rank { border: 2px solid var(--ph-border); background: #ff6b4a; }
.ph--paper .ph-card__play { letter-spacing: .1em; }
.ph--paper .ph-card__title { font-weight: 700; }

.ph--paper .ph-about {
  border: 2px solid var(--ph-border);
  box-shadow: 6px 6px 0 rgba(30, 42, 50, .1);
}

.ph--paper .ph-about__block h2 {
  font-weight: 800;
  padding-bottom: 6px;
  border-bottom: 2px dashed rgba(30, 42, 50, .35);
}

.ph--paper .ph-faq__item { border-top: 2px dashed rgba(30, 42, 50, .28); }

/* ---------- shared corrections (same on all three 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;
}

/*
 * Sidebar ad unit.
 *
 * Sticky so it stays beside the player while the game list scrolls past, and
 * height-reserved so the sidebar does not jump when it fills. If it comes back
 * unfilled the whole block collapses, reservation included.
 */
.w3ph-side-ad {
  position: sticky;
  top: 16px;
  margin-bottom: 22px;
  min-height: 250px;
}

.w3ph-side-ad ins.adsbygoogle {
  display: block;
  min-height: 250px;
}

.w3ph-side-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
  min-height: 0;
  margin-bottom: 0;
}

/* ---------- mobile header (2026-08-24) ----------
   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, so
   the wordmark was completely hidden behind the button on every phone. An
   inline `.site-header .site-logo { margin: 0 !important }` ships in the head,
   so this needs both the specificity and the !important to land. */
@media (max-width: 768px) {
  .site-header .site-logo {
    margin-left: 52px !important;
  }
}