/* ===========================================================
   M&P Games — shared styles (Direction B · Meadow)
   =========================================================== */
:root{
  --paper:#fbf7ec; --ink:#2c3a26; --accent:#c2552f; --accent-d:#a8462690;
  --green:#4f8a43; --green-d:#3f7236;
  --sky1:#dff0f4; --sky2:#cfe8ef; --wheat:#f2c14e;
  --hair:rgba(44,58,38,.12); --muted:#4a5a40;
  --ph-bg:#dcebd4; --ph-line:rgba(44,58,38,.30);
  --maxw:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif; font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:'Baloo 2',cursive; font-weight:700; margin:0; line-height:1.05;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

/* ---- placeholder ---- */
.ph{
  display:grid; place-items:center; position:relative; overflow:hidden;
  background-color:var(--ph-bg);
  background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 9px,rgba(0,0,0,0) 9px 18px);
  border:1.5px dashed var(--ph-line); color:var(--ph-line); border-radius:16px;
}
.ph span{
  font-family:'Courier New',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,.85); padding:6px 11px; border-radius:5px; text-align:center; max-width:84%; color:#5a5042;
}

/* ---- buttons / chips ---- */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:'Hanken Grotesk',sans-serif;
  font-weight:700; font-size:16px; padding:14px 26px; border-radius:999px; cursor:pointer;
  border:none; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 6px 0 #9a3f1f;}
.btn-primary:hover{background:#b04a28;}
.btn-green{background:var(--green); color:#fff; box-shadow:0 6px 0 var(--green-d);}
.btn-green:hover{background:#467c3c;}
.btn-ghost{background:transparent; color:var(--ink); border:2px solid var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}
.soon{
  display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:15px;
  padding:13px 20px; border-radius:999px; background:#fff; color:var(--green); border:2px solid var(--green);
}
.soon.amazon{color:var(--accent); border-color:var(--accent); background:#fff;}
.chip{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14px; padding:8px 15px; border-radius:999px; background:#fff; border:1px solid var(--hair); color:var(--muted);}
.eyebrow{display:inline-block; background:var(--wheat); color:#5a3d12; font-weight:800; letter-spacing:.08em; font-size:13px; text-transform:uppercase; padding:7px 14px; border-radius:999px; white-space:nowrap;}

/* ---- header ---- */
.site-head{position:sticky; top:0; z-index:50; background:rgba(251,247,236,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--hair);}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:74px;}
.brandmark{display:flex; align-items:center; gap:12px;}
.brandmark .seal{width:42px; height:42px; border-radius:50%; background:var(--green); display:grid; place-items:center; font-family:'Baloo 2',cursive; font-weight:800; color:#fff; font-size:16px; flex:none; box-shadow:0 3px 0 var(--green-d);}
.brandmark .wm{font-family:'Baloo 2',cursive; font-weight:700; font-size:20px; white-space:nowrap;}
.nav-links{display:flex; align-items:center; gap:30px; font-weight:600; font-size:16px;}
.nav-links a{padding:6px 2px; position:relative; white-space:nowrap;}
.nav-links a:hover{color:var(--green);}
.nav-links a.active{color:var(--accent);}
.nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; border-radius:3px; background:var(--accent);}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; font-size:26px; color:var(--ink); padding:6px;}

/* ---- hero ---- */
.hero{position:relative; background:linear-gradient(var(--sky1),var(--sky2) 64%); overflow:hidden;}
.hero .sun{position:absolute; top:46px; right:9%; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle at 50% 50%,#ffe79a,#f7c64f); z-index:1;}
.hero .hills{position:absolute; left:0; right:0; bottom:-1px; height:120px; z-index:1; width:100%;}
.hero .wrap{position:relative; z-index:2;}
.hero-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; padding:62px 0 96px;}
.hero h1{font-size:68px; font-weight:800; color:#26331f; margin:18px 0 16px;}
.hero .lead{font-size:21px; line-height:1.45; max-width:30ch; color:#3c4a34; font-weight:500;}
.hero .cta-row{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; align-items:center;}
.sticker{transform:rotate(-4deg); filter:drop-shadow(0 14px 20px rgba(0,0,0,.16));}
.sticker .ph{border:0; box-shadow:0 0 0 9px #fff,0 0 0 11px rgba(0,0,0,.06); aspect-ratio:3/4; border-radius:20px;}

/* ---- hero animal cast ---- */
.hero-cast{position:relative; height:440px; align-self:end;}
.hero-cast .ground{position:absolute; bottom:10px; left:4%; right:4%; height:30px; background:radial-gradient(ellipse at center, rgba(20,40,15,.22), transparent 72%); filter:blur(2px);}
.hero-cast img{position:absolute; bottom:14px; filter:drop-shadow(0 14px 12px rgba(0,0,0,.18)); }
.hc-cow{width:296px; left:50%; transform:translateX(-50%);}
.hc-chicken{width:172px; left:-6px;}
.hc-duck{width:128px; right:0; bottom:16px;}
@media (prefers-reduced-motion: no-preference){
  .hc-cow{animation:bob 4.6s ease-in-out infinite;}
  .hc-chicken{animation:bob 4s ease-in-out infinite .4s;}
  .hc-duck{animation:bob 3.6s ease-in-out infinite .8s;}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .hc-cow{animation-name:bobCow;}
  @keyframes bobCow{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-9px)}}
}

/* ---- game-card tiles ---- */
.ctile{position:relative; aspect-ratio:3/4; border-radius:18px; overflow:hidden; background:linear-gradient(#e3f1f5,#cfe8ef 72%); box-shadow:0 0 0 7px #fff, 0 12px 28px rgba(0,0,0,.13);}
.ctile .sky-sun{position:absolute; top:14px; right:16px; width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 50% 50%,#ffe79a,#f7c64f);}
.ctile .hill{position:absolute; left:-4%; right:-4%; bottom:0; height:34%; width:108%; background:#7fb96a; border-radius:46% 46% 0 0 / 64% 64% 0 0;}
.ctile .hill::before{content:""; position:absolute; left:6%; right:-2%; bottom:0; height:78%; background:#4f8a43; border-radius:48% 46% 0 0 / 70% 64% 0 0;}
.ctile .cast{position:absolute; left:8%; right:8%; bottom:13%; display:flex; align-items:flex-end; justify-content:center; gap:4%;}
.ctile .cast img{width:auto; max-height:150px; filter:drop-shadow(0 6px 5px rgba(0,0,0,.18));}
.ctile.trio .cast img{max-height:64px;}
.ctile.duo .cast img{max-height:104px;}
.ctile .num{position:absolute; top:12px; left:14px; min-width:38px; height:38px; padding:0 8px; border-radius:999px; background:#fff; display:grid; place-items:center; font-family:'Baloo 2',cursive; font-weight:800; font-size:19px; color:var(--accent); box-shadow:0 3px 0 rgba(0,0,0,.10);}
.ctile .tag{position:absolute; bottom:12px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.92); color:#26331f; font-weight:700; font-size:13px; padding:5px 13px; border-radius:999px; white-space:nowrap;}

/* ---- decorative critters on page-head hills ---- */
.ph-critters{position:absolute; inset:0; z-index:2; pointer-events:none;}
.ph-critters img{position:absolute; bottom:-2px; filter:drop-shadow(0 8px 7px rgba(0,0,0,.16));}

/* ---- generic page header band ---- */
.page-head{position:relative; background:linear-gradient(var(--sky1),var(--sky2) 70%); overflow:hidden;}
.page-head .sun{position:absolute; top:30px; right:8%; width:88px; height:88px; border-radius:50%; background:radial-gradient(circle at 50% 50%,#ffe79a,#f7c64f);}
.page-head .hills{position:absolute; left:0; right:0; bottom:-1px; height:90px; width:100%;}
.page-head .wrap{position:relative; z-index:2; padding:52px 0 84px; text-align:center;}
.page-head h1{font-size:54px; font-weight:800; color:#26331f; margin:14px 0 10px;}
.page-head p{max-width:60ch; margin:0 auto; color:#3c4a34; font-size:19px;}

/* ---- steps strip ---- */
.section{padding:64px 0;}
.section h2{font-size:38px; text-align:center;}
.section .sub{text-align:center; color:var(--muted); margin:10px auto 0; max-width:54ch;}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px;}
.step{text-align:center; padding:8px;}
.step .bub{width:66px; height:66px; border-radius:50%; display:grid; place-items:center; margin:0 auto 16px; font-family:'Baloo 2'; font-weight:800; font-size:26px; color:#fff; box-shadow:0 5px 0 rgba(0,0,0,.12);}
.step h3{font-size:24px; margin-bottom:6px;}
.step p{margin:0; color:var(--muted);}

/* ---- games band ---- */
.games{background:var(--green); color:#fff;}
.games h2{color:#fff;}
.games .head-row{display:flex; align-items:baseline; justify-content:space-between; gap:16px;}
.games .head-row a{font-weight:800; opacity:.92;}
.games .head-row a:hover{opacity:1;}
.gcards{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:34px;}
.gcard{background:#fff; color:var(--ink); border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.10);}
.gcard .pad{padding:24px 26px 28px;}
.gcard h3{font-size:25px;}
.gcard .pad p{color:var(--muted); margin:8px 0 0;}
.gcard.ghost{display:grid; place-items:center; background:rgba(255,255,255,.12); border:2px dashed rgba(255,255,255,.5); color:#eaf3e6; min-height:280px; text-align:center; box-shadow:none;}
.gcard.ghost .t{font-family:'Baloo 2'; font-weight:800; font-size:23px;}

/* ---- footer ---- */
.site-foot{background:#efe8d6; border-top:1px solid var(--hair);}
.site-foot .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 32px; flex-wrap:wrap;}
.site-foot .fbrand{display:flex; align-items:center; gap:12px;}
.site-foot .fbrand .wm{font-family:'Baloo 2'; font-weight:700; font-size:19px;}
.site-foot .fnav{display:flex; gap:22px; font-weight:600;}
.site-foot .fnav a:hover{color:var(--green);}
.site-foot .legal{width:100%; color:#8a8473; font-size:13px; border-top:1px solid var(--hair); padding-top:18px; margin-top:4px;}

/* ===== responsive ===== */
@media (max-width:880px){
  .nav-links{position:fixed; inset:74px 0 auto 0; flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--hair); padding:8px 0; display:none; box-shadow:0 14px 30px rgba(0,0,0,.08);}
  .nav-links.open{display:flex;}
  .nav-links a{padding:16px 32px; width:100%;}
  .nav-links a.active::after{display:none;}
  .nav-toggle{display:block;}
  .hero-grid{grid-template-columns:1fr; gap:30px; padding:46px 0 90px;}
  .hero h1{font-size:50px;} .page-head h1{font-size:40px;}
  .sticker{max-width:360px; margin:0 auto;}
  .steps{grid-template-columns:1fr; gap:18px;}
  .gcards{grid-template-columns:1fr;}
  .section h2{font-size:30px;}
}