/* Yeet Blaster: shared styles for the landing page and the blog.
   Look borrowed from Yeet Blaster: Word Rush: blue brick walls, cream paper,
   thick ink outlines, hard drop shadows and chunky gold buttons. */

@font-face { font-family:'Luckiest Guy'; font-weight:400; font-display:swap; src:url(../fonts/luckiestguy.woff2) format('woff2'); }
@font-face { font-family:'Shrikhand'; font-weight:400; font-display:swap; src:url(../fonts/shrikhand.woff2) format('woff2'); }
@font-face { font-family:'Patrick Hand'; font-weight:400; font-display:swap; src:url(../fonts/patrickhand.woff2) format('woff2'); }
@font-face { font-family:'Fredoka'; font-weight:400 700; font-display:swap; src:url(../fonts/fredoka.woff2) format('woff2'); }

:root{
  --ink:#16122a; --ink-soft:#3b3352;
  --paper:#fbf0d6; --paper-2:#f2dfb4; --paper-line:#d9c08a;
  --wall:#12305e; --wall-2:#0c2246; --mortar:#0a1c3a;
  --gold:#ffc72c; --gold-2:#f29a0e; --gold-lip:#a65b00;
  --red:#e4483b; --blue:#2f7fe3; --green:#45ad4f; --purple:#7a4fd6; --pink:#ff6fa8; --cyan:#3fd2ee;
  --text-on-wall:#e9eefc; --muted-on-wall:#b6c3e6;
  --display:'Luckiest Guy','Arial Black',system-ui,sans-serif;   /* Word Rush's own title font */
  --body:'Fredoka',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hand:'Patrick Hand','Comic Sans MS',cursive;
  --nav-h:70px;
  color-scheme:dark;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }

body.yb-body{
  margin:0; font-family:var(--body); font-size:17px; line-height:1.6; color:var(--text-on-wall);
  background-color:var(--wall);
  /* brick wall: one staggered-brick SVG tile, a soft spotlight and a darker floor */
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(80,150,255,.30), transparent 70%),
    linear-gradient(180deg, transparent 0, rgba(4,10,26,.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Crect width='96' height='48' fill='%2312305e'/%3E%3Cg fill='%23163a70'%3E%3Crect x='2' y='2' width='92' height='20' rx='3'/%3E%3Crect x='-46' y='26' width='92' height='20' rx='3'/%3E%3Crect x='50' y='26' width='92' height='20' rx='3'/%3E%3C/g%3E%3Cg fill='%231a427c' opacity='.7'%3E%3Crect x='6' y='4' width='40' height='3' rx='1.5'/%3E%3Crect x='56' y='28' width='30' height='3' rx='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100% 900px, 100% 100%, 96px 48px;
  background-repeat:no-repeat, no-repeat, repeat;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* the vertical joints only on alternate rows: mask the second joint layer to every other 44px band */
.yb-body img{ max-width:100%; height:auto; display:block; }
.yb-body a{ color:inherit; }
.yb-body a.yb-btn, .yb-body .yb-btn{ color:var(--ink); text-decoration:none; }
.yb-body h1,.yb-body h2,.yb-body h3{ font-family:var(--display); font-weight:400; line-height:1.08; margin:0; letter-spacing:.01em; }
.yb-body p{ margin:0; }
/* Luckiest Guy is a caps font (its lowercase is a smaller cap), so display text is set in capitals, as in the game */
.yb-body h1,.yb-body h2,.yb-body h3,.yb-btn,.yb-tab,.yb-wordmark,.yb-game-tag,.yb-facts b,.yb-faq summary,.yb-demo-title,.yb-demo-close,.yb-demo-load,.yb-post-more,.yb-foot-brand b{ text-transform:uppercase; }
.yb-demo-title small{ text-transform:none; }
.yb-body :focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:10px; }
.yb-wrap{ width:100%; max-width:1180px; margin:0 auto; padding-inline:clamp(16px,4vw,40px); }
.yb-skip{ position:absolute; left:-9999px; top:8px; z-index:300; background:var(--gold); color:var(--ink); padding:10px 16px; border-radius:10px; font-weight:700; }
.yb-skip:focus{ left:12px; }

/* ---------- buttons ---------- */
.yb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:400 18px/1 var(--display); letter-spacing:.02em; text-decoration:none; color:var(--ink);
  padding:15px 26px; border-radius:999px; border:3px solid var(--ink); cursor:pointer;
  background:linear-gradient(180deg,#ffe27a 0%, var(--gold) 45%, var(--gold-2) 100%);
  box-shadow:0 6px 0 var(--ink), inset 0 -4px 0 rgba(166,91,0,.45), inset 0 3px 0 rgba(255,255,255,.55);
  transition:transform .08s ease, box-shadow .08s ease, filter .15s;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.yb-btn:hover{ filter:brightness(1.06); }
.yb-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--ink), inset 0 -3px 0 rgba(166,91,0,.45); }
.yb-btn-ghost{ background:var(--paper); box-shadow:0 6px 0 var(--ink), inset 0 -4px 0 rgba(0,0,0,.08); }
.yb-btn-sm{ font-size:15px; padding:10px 18px; box-shadow:0 4px 0 var(--ink), inset 0 -3px 0 rgba(166,91,0,.45); }
.yb-btn.is-soon{ cursor:default; font-size:14.5px; background:var(--paper-2); color:var(--ink-soft); box-shadow:0 4px 0 var(--ink); }
.yb-btn.is-soon:hover{ filter:none; }

/* ---------- nav ---------- */
.yb-nav{ position:sticky; top:0; z-index:100; background:rgba(12,30,62,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:4px solid var(--ink); }
.yb-nav-row{ height:var(--nav-h); display:flex; align-items:center; gap:24px; }
.yb-brand{ display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none; }
.yb-brand img{ width:44px; height:auto; filter:drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
.yb-wordmark{ font:400 22px/1 var(--display); color:var(--gold); text-shadow:0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink); letter-spacing:.02em; }
.yb-wordmark b{ font-weight:400; color:#7cc4ff; }
.yb-nav-links{ display:flex; gap:20px; font-weight:600; font-size:15.5px; }
.yb-nav-links a{ text-decoration:none; color:var(--muted-on-wall); transition:color .15s; }
.yb-nav-links a:hover, .yb-nav-links a[aria-current="page"]{ color:#fff; }

/* ---------- shared section bits ---------- */
.yb-section{ padding:clamp(64px,8vw,110px) 0; position:relative; }
.yb-head{ max-width:680px; margin-bottom:clamp(32px,4vw,48px); }
.yb-head-center{ margin-inline:auto; text-align:center; }
.yb-kicker{ display:inline-block; font:400 15px/1 var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--gold); border:3px solid var(--ink); border-radius:999px; padding:7px 14px 6px; box-shadow:0 3px 0 var(--ink); margin-bottom:16px; transform:rotate(-2deg); }
.yb-head h2, .yb-closer h2{ font-size:clamp(34px,5vw,58px); color:#fff; text-shadow:0 4px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink), 3px 4px 0 var(--ink), -3px 4px 0 var(--ink); }
.yb-head p:not(.yb-kicker){ margin-top:16px; font-size:18.5px; color:var(--muted-on-wall); }
.yb-section-band{ background:linear-gradient(180deg, rgba(8,20,44,.75), rgba(8,20,44,.55)); border-block:4px solid var(--ink); }
.yb-section-paper{ background:var(--paper); color:var(--ink); border-block:4px solid var(--ink);
  background-image:radial-gradient(rgba(120,90,40,.08) 1px, transparent 1.5px); background-size:6px 6px; }
.yb-section-paper .yb-head h2, .yb-section-paper h2{ color:var(--gold); }

/* ---------- hero ---------- */
.yb-hero{ padding:clamp(40px,6vw,80px) 0 clamp(64px,8vw,110px); }
.yb-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,4vw,64px); align-items:center; }
.yb-pill{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color:var(--ink); background:var(--paper); border:3px solid var(--ink); border-radius:999px; padding:7px 15px; box-shadow:0 4px 0 var(--ink); }
.yb-pill span{ color:var(--red); }
.yb-hero-title{ margin:22px 0 18px !important; font-size:clamp(50px,7.6vw,96px) !important; line-height:.98 !important; }
.yb-hero-title span{ display:inline-block; color:var(--gold); text-shadow:0 6px 0 var(--ink), 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 -4px 0 var(--ink), 4px 6px 0 var(--ink), -4px 6px 0 var(--ink), 0 12px 18px rgba(0,0,0,.35); }
.yb-hero-title span:nth-child(2){ color:#7cc4ff; transform:rotate(-3deg); }
.yb-hero-title span:nth-child(3){ color:#ff8a5c; }
@media (prefers-reduced-motion:no-preference){
  .yb-hero-title span{ animation:yb-pop .7s cubic-bezier(.2,1.6,.4,1) both; }
  .yb-hero-title span:nth-child(2){ animation-delay:.12s; } .yb-hero-title span:nth-child(3){ animation-delay:.24s; }
}
@keyframes yb-pop{ from{ opacity:0; transform:scale(.4) rotate(-8deg); } to{ opacity:1; } }
.yb-lede{ font-size:clamp(18px,1.8vw,20.5px); color:var(--text-on-wall); max-width:34em; }
.yb-lede b{ color:var(--gold); }
.yb-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.yb-cta-center{ justify-content:center; }
.yb-facts{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.yb-facts li{ font-weight:600; font-size:15px; background:rgba(8,20,44,.6); border:2px solid rgba(255,255,255,.18); border-radius:12px; padding:6px 12px; color:var(--muted-on-wall); }
.yb-facts b{ font:400 18px/1 var(--display); color:#fff; margin-right:3px; }

.yb-hero-art{ position:relative; aspect-ratio:1.1/1; max-width:640px; width:100%; margin-inline:auto; }
.yb-hero-card{ position:absolute; width:72%; border:5px solid var(--ink); border-radius:24px; box-shadow:0 10px 0 var(--ink), 0 24px 40px rgba(0,0,0,.45); background:var(--wall); }
.yb-hero-card-1{ left:11%; bottom:2%; transform:rotate(-2deg); z-index:3; width:78%; }
.yb-hero-card-2{ left:0; top:2%; width:58%; transform:rotate(-9deg); z-index:2; }
.yb-hero-card-3{ right:0; top:2%; width:58%; transform:rotate(8deg); z-index:1; }
.yb-hero-man{ position:absolute; z-index:4; width:28%; right:-3%; bottom:-6%; filter:drop-shadow(0 8px 0 rgba(0,0,0,.35)); }
@media (prefers-reduced-motion:no-preference){
  .yb-hero-man{ animation:yb-bob 2.4s ease-in-out infinite; }
  .yb-hero-card-2{ animation:yb-sway 6s ease-in-out infinite; }
}
@keyframes yb-bob{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-14px) rotate(3deg); } }
@keyframes yb-sway{ 0%,100%{ transform:rotate(-9deg); } 50%{ transform:rotate(-6deg) translateY(-6px); } }

/* ---------- game cards ---------- */
.yb-games{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,30px); }
.yb-game{ position:relative; display:flex; flex-direction:column; gap:12px; background:var(--paper); color:var(--ink); border:4px solid var(--ink); border-radius:26px; padding:18px 20px 22px; box-shadow:0 10px 0 var(--ink); }
.yb-game-logo{ border:3px solid var(--ink); border-radius:16px; margin-bottom:4px; }
.yb-game-tag{ position:absolute; top:-16px; right:18px; z-index:2; font:400 15px/1 var(--display); color:#fff; background:var(--red); border:3px solid var(--ink); border-radius:999px; padding:8px 14px 7px; box-shadow:0 3px 0 var(--ink); transform:rotate(4deg); }
.yb-game-2d .yb-game-tag{ background:var(--green); }
.yb-game-3d .yb-game-tag{ background:var(--blue); }
.yb-game-yeetemup .yb-game-tag{ background:var(--purple); }
.yb-games-4{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,1.8vw,24px); }
.yb-games-4 .yb-game{ padding:16px 16px 20px; }
.yb-games-4 .yb-game h3{ font-size:21px; }
@media (max-width:1180px){ .yb-games-4{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:900px; margin-inline:auto; } }
.yb-game h3{ font-size:24px; color:var(--ink); }
.yb-game .yb-game-tagline{ font:400 23px/1.1 var(--hand); color:var(--red); margin-top:-6px; }
.yb-game p{ font-size:16px; color:var(--ink-soft); }
.yb-ticks{ list-style:none; margin:2px 0 0; padding:0; display:grid; gap:7px; }
.yb-ticks li{ position:relative; padding-left:30px; font-size:15.5px; font-weight:500; }
.yb-ticks li::before{ content:""; position:absolute; left:0; top:3px; width:20px; height:20px; border-radius:50%; background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat; border:2px solid var(--ink); }
.yb-game-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:12px; }
.yb-game-cta .yb-btn{ font-size:16px; padding:12px 18px; }
.yb-body .yb-game-more{ align-self:flex-start; margin-top:4px; font:400 16px/1.2 var(--display); text-transform:uppercase; letter-spacing:.02em; color:var(--blue); text-decoration:none; border-bottom:3px solid currentColor; padding-bottom:2px; }
.yb-body .yb-game-more:hover{ color:var(--red); }
.yb-body .yb-game-more span{ display:inline-block; transition:transform .15s; }
.yb-body .yb-game-more:hover span{ transform:translateX(4px); }

/* ---------- Yeet Man ---------- */
.yb-man-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,5vw,72px); align-items:center; }
.yb-man-art{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.yb-man-big{ width:min(320px,70%); filter:drop-shadow(0 10px 0 rgba(0,0,0,.18)); }
@media (prefers-reduced-motion:no-preference){ .yb-man-big{ animation:yb-bob 2.8s ease-in-out infinite; } }
.yb-man-poses{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:100%; max-width:440px; }
.yb-man-poses li{ background:#fff; border:3px solid var(--ink); border-radius:16px; box-shadow:0 4px 0 var(--ink); padding:8px 6px 6px; text-align:center; }
.yb-man-poses span{ display:block; font:400 16px/1.2 var(--hand); color:var(--ink-soft); }
.yb-man-copy h2{ font-size:clamp(34px,5vw,58px); text-shadow:0 4px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink), 3px 4px 0 var(--ink), -3px 4px 0 var(--ink); margin-bottom:18px; }
.yb-man-copy > p{ font-size:18.5px; color:var(--ink-soft); }
.yb-facts-list{ margin:24px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.yb-facts-list div{ background:#fff; border:3px solid var(--ink); border-radius:16px; padding:12px 14px; box-shadow:0 4px 0 var(--ink); }
.yb-facts-list dt{ font:400 14px/1.2 var(--display); color:var(--red); text-transform:uppercase; letter-spacing:.04em; }
.yb-facts-list dd{ margin:4px 0 0; font-weight:600; font-size:15.5px; color:var(--ink); }

/* ---------- how it plays ---------- */
.yb-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px); }
.yb-steps li{ background:var(--paper); color:var(--ink); border:4px solid var(--ink); border-radius:22px; padding:22px; box-shadow:0 8px 0 var(--ink); }
.yb-step-n{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:14px; border:3px solid var(--ink); font:400 22px/1 var(--display); color:var(--ink); background:var(--gold); box-shadow:0 3px 0 var(--ink); margin-bottom:14px; transform:rotate(-5deg); }
.yb-steps li:nth-child(2) .yb-step-n{ background:var(--pink); transform:rotate(4deg); }
.yb-steps li:nth-child(3) .yb-step-n{ background:var(--cyan); }
.yb-steps h3{ font-size:22px; margin-bottom:8px; }
.yb-steps p{ color:var(--ink-soft); font-size:16px; }
.yb-yeetionary{ margin-top:28px !important; font-size:17px; color:var(--muted-on-wall); }
.yb-yeetionary b{ color:var(--gold); }
.yb-worlds{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:9px; }
.yb-worlds li{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--ink); background:var(--paper); border:3px solid var(--ink); border-radius:999px; padding:5px 13px 5px 5px; box-shadow:0 3px 0 var(--ink); }
.yb-worlds span{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--gold); font:400 12.5px/1 var(--display); }
.yb-worlds li:nth-last-child(2){ background:var(--gold); }
.yb-worlds li.yb-world-secret{ background:#0b1a10; color:#5dff8a; border-style:dashed; }
.yb-worlds li.yb-world-secret span{ background:#5dff8a; color:#0b1a10; }

/* ---------- demos ---------- */
.yb-demos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.6vw,34px); max-width:1040px; margin-inline:auto; }
.yb-demo-card{ --tint:#2f7fe3; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  background:var(--paper); color:var(--ink); border:4px solid var(--ink); border-radius:28px; padding:26px 22px 24px; box-shadow:0 10px 0 var(--ink);
  background-image:radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--tint) 34%, transparent) 0, transparent 62%); }
.yb-demo-card-2d{ --tint:#45ad4f; }
.yb-demo-card-3d{ --tint:#7a4fd6; }
/* the screenshot sits in a little cartoon phone */
.yb-phone{ position:relative; display:block; width:min(200px,64%); padding:9px; margin:4px 0 10px; border:3px solid var(--ink); border-radius:34px; cursor:pointer;
  background:linear-gradient(160deg,#2a2440,#121022); box-shadow:0 8px 0 var(--ink), 0 18px 30px rgba(22,18,42,.25); transition:transform .18s ease; }
.yb-demo-card-wordrush .yb-phone{ transform:rotate(-3deg); }
.yb-demo-card-3d .yb-phone{ transform:rotate(3deg); }
.yb-phone::before{ content:""; position:absolute; z-index:2; top:15px; left:50%; width:34%; height:9px; border-radius:9px; background:#121022; transform:translateX(-50%); }
.yb-phone-screen{ display:block; aspect-ratio:9/17; border-radius:24px; overflow:hidden; background:#000; }
.yb-phone-screen img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .35s ease; }
.yb-phone-play{ position:absolute; left:50%; top:52%; width:64px; height:64px; transform:translate(-50%,-50%); border-radius:50%; border:4px solid var(--ink);
  background:linear-gradient(180deg,#ffe27a, var(--gold) 45%, var(--gold-2)); box-shadow:0 5px 0 var(--ink); transition:transform .18s ease; }
.yb-phone-play::after{ content:""; position:absolute; left:23px; top:16px; border-left:20px solid var(--ink); border-top:12px solid transparent; border-bottom:12px solid transparent; }
.yb-phone:hover, .yb-phone:focus-visible{ transform:translateY(-6px) rotate(0deg); }
.yb-phone:hover .yb-phone-screen img{ transform:scale(1.06); }
.yb-phone:hover .yb-phone-play{ transform:translate(-50%,-50%) scale(1.12); }
.yb-demo-card h3{ font-size:23px; }
.yb-demo-meta{ font:400 19px/1.2 var(--hand); color:var(--ink-soft); }
.yb-demo-card .yb-btn{ margin-top:6px; }

/* ---------- screenshots ---------- */
.yb-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.yb-tab{ font:400 17px/1 var(--display); color:var(--ink); background:var(--paper-2); border:3px solid var(--ink); border-radius:999px; padding:11px 20px; cursor:pointer; box-shadow:0 4px 0 var(--ink); }
.yb-tab[aria-selected="true"]{ background:var(--gold); transform:translateY(2px); box-shadow:0 2px 0 var(--ink); }
.yb-gallery{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 18px; scrollbar-width:thin; scrollbar-color:var(--gold) transparent; }
.yb-gallery[hidden]{ display:none; }
.yb-shot{ margin:0; scroll-snap-align:start; }
.yb-shot img{ width:100%; aspect-ratio:9/16; object-fit:cover; object-position:top; border:4px solid var(--ink); border-radius:22px; box-shadow:0 8px 0 var(--ink); background:#000; }
#shots-wordrush .yb-shot img{ aspect-ratio:540/834; }
/* landscape games (Yeet 'Em Up): wider slides */
.yb-gallery-wide{ grid-auto-columns:minmax(420px,1fr); }
.yb-gallery-wide .yb-shot img{ aspect-ratio:16/10; }
.yb-shot figcaption{ margin-top:14px; font:400 19px/1.2 var(--hand); color:var(--text-on-wall); text-align:center; }

/* ---------- trailer ---------- */
.yb-video{ max-width:960px; margin:0 auto; border:5px solid var(--ink); border-radius:26px; overflow:hidden; box-shadow:0 12px 0 var(--ink); background:#000; aspect-ratio:16/9; }
.yb-video video{ width:100%; height:100%; display:block; }
.yb-video-tall{ max-width:340px; aspect-ratio:9/16; border-radius:34px; border-width:6px; }
.yb-trailer-tabs{ justify-content:center; }
.yb-video-cap{ text-align:center; margin-top:22px !important; font:400 20px/1.2 var(--hand); color:var(--muted-on-wall); }

/* ---------- FAQ ---------- */
.yb-faq-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,72px); align-items:start; }
.yb-faq-man{ width:180px; margin-top:28px; filter:drop-shadow(0 8px 0 rgba(0,0,0,.35)); }
.yb-faq{ display:grid; gap:14px; }
.yb-faq details{ background:var(--paper); color:var(--ink); border:4px solid var(--ink); border-radius:20px; box-shadow:0 6px 0 var(--ink); }
.yb-faq summary{ list-style:none; cursor:pointer; padding:18px 56px 18px 20px; position:relative; font:400 18.5px/1.25 var(--display); }
.yb-faq summary::-webkit-details-marker{ display:none; }
.yb-faq summary::after{ content:"+"; position:absolute; right:14px; top:50%; transform:translateY(-50%); width:32px; height:32px; display:grid; place-items:center; border-radius:50%; border:3px solid var(--ink); background:var(--gold); font:400 20px/1 var(--display); }
.yb-faq details[open] summary::after{ content:"\2013"; background:var(--pink); }
.yb-faq details > div{ padding:0 20px 20px; font-size:16.5px; color:var(--ink-soft); }

/* ---------- closer ---------- */
.yb-closer{ text-align:center; padding:clamp(70px,9vw,120px) 0; border-top:4px solid var(--ink); background:radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255,199,44,.25), transparent 70%); }
.yb-closer img{ width:150px; margin:0 auto 10px; }
.yb-closer p{ margin:16px auto 0; max-width:30em; font-size:19px; color:var(--muted-on-wall); }

/* ---------- footer ---------- */
.yb-foot{ border-top:4px solid var(--ink); background:rgba(6,14,32,.85); padding:28px 0; }
.yb-foot-row{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px; }
.yb-foot-brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.yb-foot-brand img{ width:56px; }
.yb-foot-brand b{ display:block; font:400 18px/1.2 var(--display); color:var(--gold); }
.yb-foot-brand span{ font-size:14px; color:var(--muted-on-wall); }
.yb-foot nav{ display:flex; flex-wrap:wrap; gap:18px; font-weight:600; font-size:15px; }
.yb-foot nav a{ text-decoration:none; color:var(--muted-on-wall); }
.yb-foot nav a:hover{ color:#fff; }
.yb-foot .yb-foot-games{ flex-basis:100%; align-items:center; gap:10px 18px; padding-top:16px; border-top:2px solid rgba(255,255,255,.1); }
.yb-foot-games span{ font:400 15px/1 var(--display); text-transform:uppercase; color:var(--gold); letter-spacing:.04em; }

/* ---------- demo modal ---------- */
.yb-demo-modal{ position:fixed; inset:0; z-index:400; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px)); background:rgba(6,12,28,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  --dh:min(900px, calc(100dvh - 110px)); --dw:min(calc(100vw - 28px), calc(var(--dh) * .56)); }
.yb-demo-modal[hidden]{ display:none; }
.yb-demo-modal.is-wide{ --dw:min(calc(100vw - 28px), calc(var(--dh) * .66)); }
.yb-demo-bar{ width:var(--dw); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.yb-demo-title{ font:400 17px/1.15 var(--display); color:var(--gold); text-shadow:0 2px 0 var(--ink); }
.yb-demo-title small{ display:block; font:500 13px/1.4 var(--body); color:var(--muted-on-wall); text-shadow:none; margin-top:2px; }
.yb-demo-close{ font:400 15px/1 var(--display); color:var(--ink); background:var(--paper); border:3px solid var(--ink); border-radius:999px; padding:9px 14px; cursor:pointer; box-shadow:0 3px 0 var(--ink); }
.yb-demo-frame{ position:relative; width:var(--dw); height:var(--dh); border:4px solid var(--ink); border-radius:22px; overflow:hidden; background:#0b1730; box-shadow:0 10px 0 var(--ink); }
.yb-demo-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yb-demo-load{ position:absolute; inset:0; display:grid; place-items:center; font:400 18px/1 var(--display); color:var(--gold); }
@media (max-width:600px), (pointer:coarse) and (max-width:900px){
  .yb-demo-modal, .yb-demo-modal.is-wide{ --dw:100%; --dh:auto; padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px); gap:0; background:#0b1730; justify-content:flex-start; }
  .yb-demo-bar{ padding:8px 12px; border-bottom:4px solid var(--ink); }
  .yb-demo-frame{ flex:1; border:0; border-radius:0; box-shadow:none; }
}

/* ---------- game pages (template-parts/game-page.php) ---------- */
.yb-crumbs{ padding-top:22px; font-size:14.5px; font-weight:600; }
.yb-crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; color:var(--muted-on-wall); }
.yb-crumbs li + li::before{ content:"\203A"; margin-right:6px; opacity:.6; }
.yb-crumbs a{ text-decoration:none; color:var(--muted-on-wall); }
.yb-crumbs a:hover{ color:#fff; }
.yb-crumbs [aria-current]{ color:var(--gold); }
.yb-gh{ padding:clamp(24px,4vw,48px) 0 clamp(64px,8vw,100px); }
.yb-gh-title{ margin:4px 0 12px !important; font-size:clamp(40px,5.6vw,74px) !important; line-height:1 !important; color:var(--gold);
  text-shadow:0 6px 0 var(--ink), 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 -4px 0 var(--ink), 4px 6px 0 var(--ink), -4px 6px 0 var(--ink), 0 12px 18px rgba(0,0,0,.35); }
.yb-gh-title span{ display:block; color:#7cc4ff; }
.yb-gh-2d .yb-gh-title span{ color:#ff8a5c; }
.yb-gh-3d .yb-gh-title span{ color:#c9a2ff; }
.yb-gh-yeetemup .yb-gh-title span{ color:#ffb347; }
/* a landscape game's screenshot in a cartoon handheld, instead of the phone/demo button */
.yb-gh-screen{ position:absolute; right:0; bottom:4%; z-index:2; width:min(300px,52%); padding:8px; border:4px solid var(--ink); border-radius:22px; background:linear-gradient(160deg,#2a2440,#121022); box-shadow:0 8px 0 var(--ink), 0 18px 30px rgba(0,0,0,.35); transform:rotate(4deg); }
.yb-gh-screen img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:14px; }
.yb-gh-tagline{ font:400 clamp(24px,2.6vw,30px)/1.15 var(--hand); color:#fff; margin-bottom:16px !important; }
.yb-gh-tagline span{ color:var(--gold); }
.yb-gh-art{ position:relative; max-width:600px; width:100%; margin-inline:auto; padding:0 0 30% 0; }
.yb-gh-logo{ width:80%; border:5px solid var(--ink); border-radius:24px; box-shadow:0 10px 0 var(--ink), 0 24px 40px rgba(0,0,0,.45); transform:rotate(-3deg); background:var(--wall); }
.yb-gh-art .yb-phone{ position:absolute; right:0; bottom:0; width:min(190px,30%); margin:0; transform:rotate(5deg); z-index:2; }
.yb-gh-art .yb-phone:hover, .yb-gh-art .yb-phone:focus-visible{ transform:translateY(-6px) rotate(2deg); }
.yb-gh-man{ position:absolute; left:8%; bottom:-2%; width:28%; z-index:3; filter:drop-shadow(0 8px 0 rgba(0,0,0,.35)); }
@media (prefers-reduced-motion:no-preference){ .yb-gh-man{ animation:yb-bob 2.4s ease-in-out infinite; } }

.yb-ov-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(28px,5vw,64px); align-items:center; }
.yb-ov-copy h2{ font-size:clamp(32px,4.4vw,52px); text-shadow:0 4px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink), 3px 4px 0 var(--ink), -3px 4px 0 var(--ink); margin-bottom:18px; }
.yb-ov-copy p:not(.yb-kicker){ font-size:18px; color:var(--ink-soft); }
.yb-ov-copy p + p{ margin-top:14px; }
.yb-ov-copy b{ color:var(--ink); }
.yb-spec{ grid-template-columns:1fr; margin:0; }

.yb-features{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:clamp(16px,2vw,24px); }
.yb-feature{ --c:var(--gold); background:var(--paper); color:var(--ink); border:4px solid var(--ink); border-radius:22px; padding:20px 22px 22px; box-shadow:0 8px 0 var(--ink); }
.yb-feature:nth-child(4n+2){ --c:var(--pink); } .yb-feature:nth-child(4n+3){ --c:var(--cyan); } .yb-feature:nth-child(4n+4){ --c:var(--green); }
.yb-feature h3{ display:flex; align-items:center; gap:10px; font-size:21px; margin-bottom:8px; }
.yb-feature h3::before{ content:""; flex:none; width:16px; height:16px; border-radius:50%; border:3px solid var(--ink); background:var(--c); }
.yb-feature p{ color:var(--ink-soft); font-size:16px; }

.yb-subhead{ margin:36px 0 14px !important; font-size:24px !important; color:#fff; text-shadow:0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink); }
.yb-controls{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); margin-top:0; }
.yb-pu-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.yb-pu-list li{ background:var(--paper); color:var(--ink); border:3px solid var(--ink); border-radius:16px; padding:11px 14px; box-shadow:0 4px 0 var(--ink); }
.yb-pu-list b{ display:block; font:400 17px/1.15 var(--display); text-transform:uppercase; }
.yb-pu-list span{ display:block; margin-top:3px; font-size:14.5px; line-height:1.4; color:var(--ink-soft); }
.yb-pu-list span::first-letter{ text-transform:uppercase; }

.yb-section-paper .yb-head p:not(.yb-kicker){ color:var(--ink-soft); }
.yb-world-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.yb-world-list li{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:3px solid var(--ink); border-radius:18px; padding:12px 14px; box-shadow:0 4px 0 var(--ink); }
.yb-world-n{ flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--gold); font:400 15px/1 var(--display); }
.yb-world-list h3{ font-size:19px; color:var(--ink); }
.yb-world-list p{ font-size:14.5px; color:var(--ink-soft); margin-top:2px !important; line-height:1.4; }
.yb-world-list p b{ color:var(--red); }
.yb-world-pen{ font-family:var(--hand); font-size:16.5px !important; }
.yb-world-pen::first-letter{ color:var(--blue); }
.yb-world-list li.is-secret{ background:#0b1a10; border-style:dashed; }
.yb-world-list li.is-secret .yb-world-n{ background:#5dff8a; color:#0b1a10; }
.yb-world-list li.is-secret h3, .yb-world-list li.is-secret p, .yb-world-list li.is-secret p b{ color:#5dff8a; }

.yb-gdemo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:clamp(28px,5vw,64px); align-items:center; max-width:960px; }
.yb-gdemo .yb-head{ margin-bottom:0; }
.yb-gextra .yb-prose{ max-width:900px; }
.yb-more{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:900px; }
.yb-more-3{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:none; }
.yb-more h3 a{ color:var(--ink); text-decoration:none; }
.yb-more h3 a:hover{ color:var(--blue); }

/* ---------- responsive ---------- */
@media (max-width:1060px){ .yb-nav-links{ gap:14px; font-size:14.5px; } }
@media (max-width:980px){
  .yb-nav-links{ display:none; }
  .yb-hero-grid, .yb-man-grid, .yb-faq-grid{ grid-template-columns:1fr; }
  .yb-hero-copy{ text-align:center; }
  .yb-lede{ margin-inline:auto; }
  .yb-cta, .yb-facts{ justify-content:center; }
  .yb-hero-art{ max-width:520px; }
  .yb-games{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .yb-faq-man{ display:none; }
  .yb-ov-grid, .yb-gdemo, .yb-more{ grid-template-columns:1fr; }
  .yb-gdemo{ max-width:560px; text-align:center; }
  .yb-gdemo .yb-demo-card{ max-width:340px; width:100%; margin-inline:auto; }
  .yb-more{ max-width:560px; margin-inline:auto; }
  .yb-gh-art{ max-width:480px; }
}
@media (max-width:760px){
  .yb-steps{ grid-template-columns:1fr; }
  .yb-demos{ grid-template-columns:1fr; max-width:380px; }
  .yb-gallery{ grid-auto-columns:62vw; margin-inline:calc(-1 * clamp(16px,4vw,40px)); padding-inline:clamp(16px,4vw,40px); }
  .yb-gallery-wide{ grid-auto-columns:84vw; }
  .yb-games-4{ grid-template-columns:1fr; max-width:560px; }
  .yb-facts-list{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .yb-nav .yb-btn-sm{ display:none; }
  .yb-cta .yb-btn{ width:100%; }
  .yb-wordmark{ font-size:20px; }
}

/* =====================================================================
 * Blog templates (header.php, footer.php, template-blog.php, single.php,
 * archive.php, page.php, template-parts/post-card.php)
 * ===================================================================== */
.yb-main{ display:block; }
.yb-blog-hero{ padding:clamp(48px,7vw,80px) 0 clamp(24px,4vw,36px); }
.yb-blog-hero .yb-wrap, .yb-blog-list, .yb-single, .yb-single-nav, .yb-pagination{ max-width:900px; }
.yb-blog-hero h1{ font-size:clamp(34px,5vw,56px); color:#fff; text-shadow:0 4px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink); }
.yb-blog-lede{ margin-top:14px !important; font-size:18px; color:var(--muted-on-wall); max-width:40em; }
.yb-blog-list{ padding-bottom:40px; display:grid; gap:22px; }
.yb-post-card{ display:grid; grid-template-columns:1fr; gap:16px; background:var(--paper); color:var(--ink); border:4px solid var(--ink); border-radius:22px; padding:18px; box-shadow:0 8px 0 var(--ink); }
.yb-post-thumb{ display:block; border:3px solid var(--ink); border-radius:14px; overflow:hidden; }
.yb-post-thumb img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.yb-post-date{ margin-bottom:6px !important; font:400 13px/1 var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--red); }
.yb-post-title{ font-size:24px; margin-bottom:8px !important; }
.yb-post-title a{ text-decoration:none; color:var(--ink); }
.yb-post-title a:hover{ color:var(--blue); }
.yb-post-excerpt{ color:var(--ink-soft); font-size:16px; }
.yb-post-more{ display:inline-block; margin-top:10px; font:400 16px/1 var(--display); color:var(--blue); text-decoration:none; }
.yb-empty{ padding:30px 0; color:var(--muted-on-wall); font-size:17px; }
@media (min-width:640px){ .yb-post-card{ grid-template-columns:220px 1fr; align-items:start; } .yb-post-card.yb-no-thumb{ grid-template-columns:1fr; } }
.yb-pagination{ margin:0 auto; padding:8px clamp(16px,4vw,40px) 60px; }
.yb-pagination ul{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.yb-pagination a, .yb-pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px; border-radius:999px; border:3px solid var(--ink); background:var(--paper); color:var(--ink); font-weight:700; text-decoration:none; box-shadow:0 3px 0 var(--ink); }
.yb-pagination .current{ background:var(--gold); }
.yb-single{ margin:clamp(32px,5vw,56px) auto 24px; background:var(--paper); color:var(--ink); border:4px solid var(--ink); border-radius:26px; box-shadow:0 10px 0 var(--ink); padding:clamp(22px,4vw,48px) !important; }
.yb-single-title{ font-size:clamp(30px,4.5vw,46px); margin:6px 0 24px !important; }
.yb-single-thumb{ border:3px solid var(--ink); border-radius:16px; overflow:hidden; margin-bottom:28px; }
.yb-prose{ font-size:17.5px; line-height:1.75; color:var(--ink-soft); }
.yb-prose > * + *{ margin-top:1.2em; }
.yb-prose h2{ font-size:28px; color:var(--ink); margin-top:1.6em; }
.yb-prose h3{ font-family:var(--display); font-weight:400; font-size:21px; color:var(--ink); margin-top:1.4em; }
.yb-prose a{ color:var(--blue); text-underline-offset:3px; }
.yb-prose strong{ color:var(--ink); }
.yb-prose blockquote{ margin:0; padding:12px 18px; border-left:6px solid var(--gold); background:#fff; border-radius:0 12px 12px 0; font-family:var(--hand); font-size:21px; color:var(--ink); }
.yb-prose ul, .yb-prose ol{ padding-left:1.3em; }
.yb-prose img{ border:3px solid var(--ink); border-radius:14px; }
.yb-prose pre{ background:var(--ink); color:var(--paper); border-radius:12px; padding:16px; overflow-x:auto; font-size:14px; }
.yb-prose code{ background:var(--paper-2); border-radius:6px; padding:.1em .35em; font-size:.92em; }
.yb-prose pre code{ background:none; padding:0; }
.yb-single-nav{ margin:0 auto; padding:12px clamp(16px,4vw,40px) 64px; }