/* =====================================================================
   Gaimo.in — site styles
   Palette taken from the painted river art of Frog's Way Home.
   ===================================================================== */

:root{
  color-scheme: light;
  --bg:#fff8ea;
  --paper:#ffffff;
  --cream:#fff4dc;
  --sand:#f3c98a;
  --ink:#2e1d0c;
  --ink-soft:#6b4a2b;
  --line:#ecdcbf;
  --bark:#8a4516;
  --bark-deep:#5e2c0b;
  --jungle:#2d6a12;
  --jungle-deep:#1b4a0a;
  --lime:#a8d82a;
  --leaf-pale:#eef7d6;
  --water:#3be3ec;
  --water-rim:#1d7fc4;
  --water-deep:#0f5a8f;
  --water-pale:#e4f8fa;
  --red:#e3261d;
  --red-deep:#8e120c;
  --yellow:#ffd23a;

  --font-body:'Fredoka', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:'Lilita One', 'Fredoka', ui-rounded, system-ui, sans-serif;
  --radius:22px;
  --wrap:1120px;
  --gutter:20px;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; animation:none !important; } }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-weight:400; font-size:17px; line-height:1.65;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--water-deep); text-decoration-thickness:2px; text-underline-offset:3px; }
a:hover{ color:var(--water-rim); }
b,strong{ font-weight:600; }
h1,h2,h3{ font-family:var(--font-display); font-weight:400; line-height:1.1; color:var(--jungle); margin:0 0 .5em; letter-spacing:.2px; }
h1{ font-size:clamp(2.2rem, 5.2vw, 3.5rem); }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.3rem); }
h3{ font-size:1.35rem; color:var(--bark); }
p{ margin:0 0 1em; }
:focus-visible{ outline:3px dashed var(--water-rim); outline-offset:3px; border-radius:6px; }
kbd{
  display:inline-block; min-width:1.7em; padding:0 .4em; margin:0 .08em;
  font:600 .82em/1.65 var(--font-body); text-align:center; color:var(--ink);
  background:#fff; border:2px solid var(--bark); border-bottom-width:3.5px; border-radius:7px;
  white-space:nowrap; vertical-align:.08em;
}
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:100; padding:8px 14px;
  background:var(--jungle); color:#fff; border-radius:10px; font-weight:600; text-decoration:none;
}
.skip-link:focus{ top:12px; color:#fff; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,244,220,.96); backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:3px solid var(--bark);
}
.header-inner{ display:flex; align-items:center; gap:16px; min-height:66px; }
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--bark); margin-right:auto; }
.brand img{ width:34px; height:auto; transform:rotate(-8deg); }
.brand span{ font-family:var(--font-display); font-size:30px; line-height:1; letter-spacing:.4px; }
.brand:hover{ color:var(--bark-deep); }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:4px; }
.nav a{
  display:block; padding:7px 13px; border-radius:999px; text-decoration:none;
  font-weight:600; font-size:16px; color:var(--bark); transition:background .15s;
}
.nav a:hover{ background:var(--leaf-pale); color:var(--jungle); }
.nav a[aria-current="page"]{ background:var(--lime); color:var(--jungle-deep); box-shadow:0 3px 0 var(--jungle); }
.nav-toggle{
  display:none; align-items:center; gap:8px; padding:7px 12px; cursor:pointer;
  font:600 16px var(--font-body); color:var(--bark); background:#fff;
  border:2.5px solid var(--bark); border-radius:12px; box-shadow:0 3px 0 var(--bark);
}
.nav-toggle svg{ width:20px; height:20px; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; fill:none; }
@media (max-width:880px){
  .js .nav-toggle{ display:inline-flex; }
  .js .nav{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--cream); border-bottom:3px solid var(--bark); box-shadow:0 14px 24px rgba(60,30,8,.14); }
  .js .nav.open{ display:block; }
  .js .nav ul{ flex-direction:column; padding:10px var(--gutter) 16px; gap:4px; }
  .js .nav a{ padding:11px 14px; font-size:18px; border-radius:12px; }
  .nav ul{ flex-wrap:wrap; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-size:1.3rem; line-height:1; letter-spacing:.3px;
  padding:13px 26px 15px; border-radius:16px; text-decoration:none; cursor:pointer;
  border:3px solid; transition:transform .1s, box-shadow .1s;
}
.btn svg{ width:20px; height:20px; flex:none; }
.btn-primary{
  color:#fff; background:var(--lime); border-color:var(--jungle);
  text-shadow:0 2px 0 var(--jungle-deep);
  box-shadow:inset 0 -5px 0 rgba(45,106,18,.35), 0 6px 0 var(--jungle);
}
.btn-primary:hover{ color:#fff; transform:translateY(-2px); box-shadow:inset 0 -5px 0 rgba(45,106,18,.35), 0 8px 0 var(--jungle); }
.btn-primary:active{ transform:translateY(4px); box-shadow:inset 0 -3px 0 rgba(45,106,18,.35), 0 2px 0 var(--jungle); }
.btn-secondary{
  color:var(--bark); background:var(--cream); border-color:var(--bark);
  box-shadow:0 6px 0 var(--bark);
}
.btn-secondary:hover{ color:var(--bark-deep); transform:translateY(-2px); box-shadow:0 8px 0 var(--bark); }
.btn-secondary:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--bark); }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px 16px; margin-top:24px; }
.btn-sm{ font-size:1.08rem; padding:10px 18px 12px; border-radius:13px; }

/* ---------- sections ---------- */
.section{ padding:64px 0; }
.section.tight{ padding:40px 0; }
.section.alt{ background:var(--cream); border-top:2px solid var(--line); border-bottom:2px solid var(--line); }
.eyebrow{
  display:inline-block; margin:0 0 12px; padding:4px 12px 5px; border-radius:6px;
  background:#eecb5a; color:#1d1a12; font-weight:600; font-size:15px; letter-spacing:.3px;
  box-shadow:0 3px 0 rgba(94,44,11,.35); transform:rotate(-1deg);
}
.section-head{ max-width:720px; margin-bottom:30px; }
.section-head p{ color:var(--ink-soft); font-size:1.1rem; }
.lead{ font-size:1.2rem; color:var(--ink-soft); }

/* ---------- home hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(80% 70% at 85% 30%, rgba(59,227,236,.35) 0%, rgba(59,227,236,0) 60%),
    radial-gradient(70% 80% at 0% 100%, rgba(168,216,42,.30) 0%, rgba(168,216,42,0) 60%),
    var(--cream);
  border-bottom:3px solid var(--bark);
}
.hero-inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; padding:64px var(--gutter) 72px; }
.hero h1{ color:var(--jungle); text-shadow:0 3px 0 rgba(45,106,18,.15); }
.hero .lead{ max-width:560px; }
.hero-art{ position:relative; justify-self:center; width:min(360px, 100%); }
.hero-art a{ display:block; }
.hero-art img{
  width:100%; aspect-ratio:3/5; object-fit:cover; border-radius:26px;
  border:4px solid var(--bark); box-shadow:0 10px 0 var(--bark), 0 28px 50px rgba(40,25,8,.28);
  transform:rotate(2.5deg); transition:transform .25s;
}
.hero-art a:hover img{ transform:rotate(0) translateY(-4px); }
.hero-art .tag{
  position:absolute; left:-18px; bottom:34px; z-index:1;
  padding:8px 16px 10px; background:var(--yellow); color:var(--red-deep);
  font-family:var(--font-display); font-size:1.25rem; line-height:1;
  border:3px solid var(--bark); border-radius:14px; box-shadow:0 4px 0 var(--bark); transform:rotate(-4deg);
}
@media (max-width:860px){
  .hero-inner{ grid-template-columns:1fr; gap:36px; padding-top:44px; padding-bottom:56px; }
  .hero-art{ width:min(300px, 80%); }
}

/* ---------- cards ---------- */
.card{
  background:var(--paper); border:3px solid var(--bark); border-radius:var(--radius);
  box-shadow:0 6px 0 var(--bark);
}
.game-feature{ display:grid; grid-template-columns:1fr 1.1fr; overflow:hidden; }
.game-feature .media{ background:var(--water-pale); border-right:3px solid var(--bark); }
.game-feature .media img{ width:100%; height:100%; object-fit:cover; }
.game-feature .body{ padding:30px 32px 34px; }
.game-feature h3{ font-size:2rem; color:var(--jungle); margin-bottom:.35em; }
.game-feature .media.strip{
  display:flex; align-items:center; justify-content:center; gap:4%; padding:28px 6%;
  background:linear-gradient(160deg, #c9f6f8 0%, #8fe8ef 100%);
}
.game-feature .media.strip img{
  width:30%; height:auto; aspect-ratio:3/5; object-fit:cover; border-radius:14px;
  border:3px solid var(--bark); box-shadow:0 5px 0 var(--bark); background:#fff;
}
.game-feature .media.strip img:nth-child(1){ transform:rotate(-4deg) translateY(8px); }
.game-feature .media.strip img:nth-child(2){ transform:translateY(-8px); }
.game-feature .media.strip img:nth-child(3){ transform:rotate(4deg) translateY(8px); }
@media (max-width:820px){
  .game-feature .media.strip{ aspect-ratio:auto; }
  .game-feature{ grid-template-columns:1fr; }
  .game-feature .media{ border-right:0; border-bottom:3px solid var(--bark); aspect-ratio:4/3; }
  .game-feature .body{ padding:24px 22px 28px; }
}
.pills{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 18px; }
.pills li{
  padding:3px 12px 4px; border-radius:999px; font-size:15px; font-weight:600;
  background:var(--water-pale); color:var(--water-deep); border:2px solid #b9e6ef;
}
.pills li.green{ background:var(--leaf-pale); color:var(--jungle); border-color:#cfe6a0; }

.tiles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
@media (max-width:980px){ .tiles{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:540px){ .tiles{ grid-template-columns:1fr; } }
.tile{ padding:22px 22px 20px; }
.tile .ico{
  width:52px; height:52px; display:grid; place-items:center; margin-bottom:14px;
  background:var(--leaf-pale); border:2.5px solid var(--jungle); border-radius:16px;
}
.tile .ico svg{ width:28px; height:28px; fill:none; stroke:var(--jungle); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.tile.water .ico{ background:var(--water-pale); border-color:var(--water-rim); }
.tile.water .ico svg{ stroke:var(--water-rim); }
.tile.sun .ico{ background:#fff3c4; border-color:var(--bark); }
.tile.sun .ico svg{ stroke:var(--bark); }
.tile.red .ico{ background:#ffe3df; border-color:var(--red-deep); }
.tile.red .ico svg{ stroke:var(--red-deep); }
.tile h3{ font-size:1.3rem; margin-bottom:.3em; }
.tile p{ margin:0; color:var(--ink-soft); font-size:16px; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }
.panel{ padding:28px 30px 26px; }
.panel h2{ font-size:1.9rem; }
.panel p:last-child{ margin-bottom:0; }
.panel.water{ background:var(--water-pale); border-color:var(--water-rim); box-shadow:0 6px 0 var(--water-rim); }
.panel.water h2{ color:var(--water-deep); }
.panel.leaf{ background:var(--leaf-pale); border-color:var(--jungle); box-shadow:0 6px 0 var(--jungle); }

.cta-band{ text-align:center; padding:40px 26px; }
.cta-band .btn-row{ justify-content:center; }

/* ---------- inner page hero + breadcrumbs ---------- */
.page-hero{
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(59,227,236,.28) 0%, rgba(59,227,236,0) 60%),
    var(--cream);
  border-bottom:3px solid var(--bark); padding:28px 0 40px;
}
.page-hero h1{ margin-bottom:.25em; }
.page-hero .lead{ max-width:760px; margin:0; }
.breadcrumbs{ font-size:15px; font-weight:500; margin:0 0 18px; }
.breadcrumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 0; }
.breadcrumbs li{ color:var(--ink-soft); }
.breadcrumbs li+li::before{ content:'›'; margin:0 9px; color:var(--bark); opacity:.6; }
.breadcrumbs a{ color:var(--bark); text-decoration:none; font-weight:600; }
.breadcrumbs a:hover{ text-decoration:underline; }
.updated{ display:inline-block; margin-top:14px; font-size:15px; font-weight:600; color:var(--bark); background:#fff; border:2px solid var(--line); border-radius:999px; padding:2px 12px 3px; }

/* ---------- long-form text ---------- */
.content{ display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:48px; align-items:start; }
.content.single{ grid-template-columns:minmax(0, 1fr); }
.content.single > *{ max-width:820px; }
@media (max-width:960px){ .content{ grid-template-columns:minmax(0, 1fr); } }
.prose{ max-width:760px; }
.prose h2{ margin-top:1.6em; font-size:clamp(1.55rem, 3vw, 2rem); }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:1.4em; }
.prose ul,.prose ol{ padding-left:1.3em; margin:0 0 1.1em; }
.prose li{ margin:.3em 0; }
.prose li::marker{ color:var(--jungle); font-weight:600; }
.prose section{ scroll-margin-top:90px; }
.aside{ position:sticky; top:96px; display:flex; flex-direction:column; gap:20px; }
@media (max-width:960px){ .aside{ position:static; } }
.aside .panel{ padding:20px 22px; }
.aside h2{ font-size:1.35rem; margin-bottom:.5em; }
.aside ul{ list-style:none; margin:0; padding:0; }
.aside li{ margin:0; border-top:2px dashed var(--line); }
.aside li:first-child{ border-top:0; }
.aside li a{ display:block; padding:7px 0; text-decoration:none; font-weight:500; color:var(--bark); }
.aside li a:hover{ color:var(--jungle); }
.aside li.sub a{ padding-left:16px; font-size:16px; }
.callout{
  margin:1.4em 0; padding:16px 20px; border-radius:16px;
  background:var(--water-pale); border:2.5px solid var(--water-rim); color:var(--water-deep);
}
.callout p:last-child{ margin:0; }
.callout.leaf{ background:var(--leaf-pale); border-color:var(--jungle); color:var(--jungle-deep); }

/* tables */
.table-wrap{ overflow-x:auto; margin:0 0 1.3em; border:2.5px solid var(--bark); border-radius:16px; background:#fff; }
table{ width:100%; border-collapse:collapse; font-size:16px; }
th,td{ text-align:left; padding:11px 16px; vertical-align:top; }
thead th{ background:var(--cream); color:var(--bark); font-weight:600; border-bottom:2.5px solid var(--bark); }
tbody tr+tr td{ border-top:2px solid var(--line); }
td:first-child{ white-space:nowrap; }

/* numbered steps */
.steps{ list-style:none; counter-reset:step; padding:0 !important; margin:0 0 1.2em; }
.steps li{ counter-increment:step; position:relative; padding:4px 0 10px 52px; margin:0; }
.steps li::before{
  content:counter(step); position:absolute; left:0; top:2px; width:36px; height:36px;
  display:grid; place-items:center; border-radius:50%;
  font-family:var(--font-display); font-size:19px; color:var(--bark);
  background:var(--sand); border:3px solid var(--bark); box-shadow:0 3px 0 var(--bark);
}
.steps li strong{ color:var(--jungle); }

/* levels list */
.levels{ list-style:none; padding:0 !important; margin:0 0 1.2em; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ .levels{ grid-template-columns:1fr; } }
.levels li{ margin:0; padding:12px 16px 12px 62px; position:relative; background:#fff; border:2.5px solid var(--line); border-radius:16px; line-height:1.45; }
.levels .num{
  position:absolute; left:12px; top:12px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  font-family:var(--font-display); font-size:20px; color:#fff; text-shadow:0 2px 0 var(--jungle-deep);
  background:var(--lime); border:3px solid var(--jungle);
}
.levels b{ display:block; color:var(--bark); font-weight:600; }
.levels span{ font-size:15.5px; color:var(--ink-soft); }

/* FAQ */
.faq{ display:flex; flex-direction:column; gap:14px; }
.faq details{ background:#fff; border:2.5px solid var(--bark); border-radius:18px; box-shadow:0 4px 0 var(--bark); }
.faq summary{
  cursor:pointer; list-style:none; padding:16px 54px 16px 20px; position:relative;
  font-weight:600; font-size:1.12rem; color:var(--bark);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  font:400 24px/1 var(--font-display); color:var(--jungle); background:var(--leaf-pale); border:2px solid var(--jungle);
}
.faq details[open] summary::after{ content:'–'; }
.faq details[open] summary{ color:var(--jungle); }
.faq .answer{ padding:0 20px 16px; }
.faq .answer p:last-child{ margin:0; }

/* contact */
.contact-card{ padding:28px 30px; text-align:center; }
.contact-card .email{ display:inline-block; margin:6px 0 18px; font-family:var(--font-display); font-size:clamp(1.25rem, 4.6vw, 1.9rem); color:var(--water-deep); word-break:break-all; text-decoration:none; }
.contact-card .email:hover{ text-decoration:underline; }
.topics{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:30px; }
@media (max-width:860px){ .topics{ grid-template-columns:1fr; } }
.topics .panel{ padding:22px 22px 20px; }
.topics h2{ font-size:1.4rem; }
.topics p{ font-size:16px; color:var(--ink-soft); }

/* ---------- game page ---------- */
.game-stage{ padding:20px 0 52px; }
.game-stage .wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.game-stage h1{ font-size:clamp(1.6rem, 3.4vw, 2.1rem); margin-bottom:.45em; }
.game-stage .btn-row{ justify-content:center; margin-top:34px; }
.player{
  /* sized so the whole game fits under the header and title without scrolling */
  position:relative; width:min(456px, 100%, calc((100vh - 170px) * .6)); aspect-ratio:3/5;
  border-radius:26px; overflow:hidden; background:#cfe9a8;
  border:4px solid var(--bark); box-shadow:0 10px 0 var(--bark), 0 26px 46px rgba(40,25,8,.25);
  flex:none;
}
.player img{ width:100%; height:100%; object-fit:cover; }
.player .play-btn{
  position:absolute; left:50%; bottom:9%; transform:translateX(-50%);
  font-size:1.6rem; padding:15px 32px 17px; white-space:nowrap;
}
.player .play-btn:hover{ transform:translate(-50%,-2px); }
.player .play-btn:active{ transform:translate(-50%,4px); }
.player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
@media (max-width:900px){ .player{ width:min(420px, 100%); } }
.shots{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin:0 0 1.4em; }
@media (max-width:640px){ .shots{ grid-template-columns:1fr 1fr; } .shots figure:last-child{ display:none; } }
.shots figure{ margin:0; }
.shots img{ width:100%; aspect-ratio:3/5; object-fit:cover; border-radius:16px; border:3px solid var(--bark); box-shadow:0 5px 0 var(--bark); background:var(--water-pale); }
.shots figcaption{ margin-top:12px; font-size:15px; color:var(--ink-soft); text-align:center; line-height:1.35; }

/* game list (games page) */
.game-list{ display:grid; gap:28px; }

/* ---------- 404 ---------- */
.notfound{ text-align:center; padding:80px 0 90px; }
.notfound img{ width:110px; margin:0 auto 18px; transform:rotate(-10deg); }
.notfound .btn-row{ justify-content:center; }

/* ---------- footer ---------- */
.site-footer{ background:var(--jungle-deep); color:#e6f2d8; margin-top:0; border-top:4px solid var(--bark); }
.footer-inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding:52px var(--gutter) 34px; }
@media (max-width:860px){ .footer-inner{ grid-template-columns:1fr 1fr; } .footer-about{ grid-column:1 / -1; } }
@media (max-width:460px){ .footer-inner{ grid-template-columns:1fr; } }
.site-footer .brand{ color:var(--cream); margin-bottom:12px; }
.site-footer .brand:hover{ color:#fff; }
.footer-about p{ color:#bcd6a9; font-size:16px; max-width:340px; }
.footer-about a{ color:var(--lime); }
.site-footer h2{ font-family:var(--font-body); font-weight:600; font-size:15px; letter-spacing:1.2px; text-transform:uppercase; color:var(--lime); margin:6px 0 12px; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin:0 0 6px; }
.site-footer li a{ color:#e6f2d8; text-decoration:none; font-size:16px; }
.site-footer li a:hover{ color:#fff; text-decoration:underline; }
.footer-bottom{ border-top:2px solid rgba(230,242,216,.15); }
.footer-bottom .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; padding-top:18px; padding-bottom:22px; font-size:15px; color:#a9c79a; }
.footer-bottom a{ color:#e6f2d8; }