:root{
  --bg:#e7e3da;
  --ink:#2a251f;
  --topbar:#221d19;
  --topbar-2:#2e2822;
  --card:#ffffff;
  --line:#d3cdc0;
  --teal:#3f8079;
  --teal-deep:#31655f;
  --gold:#c1912f;
  --rust:#bd5f45;
  --rust-deep:#a24d36;
  --slate:#2f373d;
  --soft-ink:#6d6759;
  --cream:#efe8d8;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.45;}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}

/* top bar */
.topbar{background:var(--topbar);color:var(--cream);position:sticky;top:0;z-index:20;}
.topbar-inner{display:flex;align-items:center;gap:16px;max-width:1100px;margin:0 auto;padding:12px 20px;}
.logo{display:flex;align-items:center;gap:8px;flex:0 0 auto;text-decoration:none;}
.logo .play{width:15px;height:17px;flex:0 0 auto;}
.logo .wm{position:relative;display:inline-block;line-height:1;}
.logo .name{font-size:24px;font-weight:800;color:var(--cream);letter-spacing:.3px;line-height:1;}
.logo .name span{color:var(--teal);}
.logo .wave{position:absolute;left:0;right:0;bottom:-7px;width:100%;height:6px;display:block;}
.search{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:9px;background:#37312a;border:1px solid #453d34;border-radius:11px;padding:0 14px;height:42px;}
.search input{border:none;background:transparent;color:var(--cream);font-size:15px;width:100%;outline:none;}
.search input::placeholder{color:#9b9284;}
.search svg{width:18px;height:18px;color:#9b9284;flex:0 0 auto;}
.top-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.top-actions a.nav-parents{display:flex;align-items:center;height:42px;color:var(--cream);font-weight:600;font-size:14px;opacity:.9;white-space:nowrap;}
.btn{border:none;border-radius:10px;height:42px;padding:0 20px;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;}
.btn.primary{background:var(--rust);color:#fff;}
.btn.primary:hover{background:var(--rust-deep);}

/* promise ribbon */
.promise{background:var(--teal);color:#eaf4f1;font-weight:600;font-size:13.5px;}
.promise-inner{max-width:1100px;margin:0 auto;padding:8px 20px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;}
.promise b{color:#fff;font-weight:800;}

/* category tabs */
.tabs{background:var(--topbar-2);}
.tabs-inner{max-width:1100px;margin:0 auto;padding:0 12px;display:flex;gap:4px;overflow-x:auto;}
.tab{color:#cabfae;font-weight:700;font-size:14px;padding:12px 15px;white-space:nowrap;border-bottom:3px solid transparent;}
.tab:hover{color:#fff;}
.tab.on{color:#fff;border-bottom-color:var(--gold);}

/* main + rows */
main{padding:24px 0 10px;}
.row-head{display:flex;align-items:center;justify-content:space-between;margin:6px 0 14px;}
.row-head h1{font-size:24px;margin:0;color:var(--ink);}
.row-head h2{font-size:20px;margin:0;color:var(--ink);}
.row-head a{color:var(--teal-deep);font-weight:700;font-size:13px;}

/* game grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;}
.tile{background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden;
  box-shadow:0 2px 7px rgba(60,48,32,.12);transition:transform .1s ease,box-shadow .1s ease;cursor:pointer;display:block;}
.tile:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(60,48,32,.2);}
.tile .thumb{width:100%;height:112px;display:block;}
.tile .meta{padding:9px 11px 12px;}
.tile .meta h4{margin:0;font-size:14px;color:var(--ink);line-height:1.2;}
.tile .meta .sub{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.tile .cat{font-size:11px;font-weight:700;color:var(--soft-ink);}
.tile .age{font-size:10.5px;font-weight:800;color:var(--teal-deep);background:#e3efec;padding:2px 7px;border-radius:5px;}

section.block{margin-top:26px;}

/* breadcrumb */
.crumb{font-size:13px;color:var(--soft-ink);margin:4px 0 14px;}
.crumb a:hover{color:var(--teal-deep);}

/* game page */
.game-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px;}
.game-head h1{margin:0;font-size:26px;}
.game-head .pills span{font-size:12px;font-weight:800;color:var(--teal-deep);background:#e3efec;padding:4px 10px;border-radius:6px;margin-left:6px;}
.stage{position:relative;background:#1f1b17;border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(40,30,18,.3);}
.stage iframe{width:100%;height:min(78vh,720px);min-height:500px;border:0;display:block;background:#fbf6ea;}
.stage .fs-btn{position:absolute;bottom:12px;right:12px;z-index:6;display:inline-flex;align-items:center;gap:6px;
  background:rgba(34,29,25,.82);color:#efe8d8;border:none;border-radius:9px;padding:8px 13px;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.stage .fs-btn:hover{background:rgba(34,29,25,.96);}
.stage .fs-btn svg{width:15px;height:15px;}
.stage .fs-btn .ic-min{display:none;}
.stage .fs-btn.is-fs .ic-expand{display:none;}
.stage .fs-btn.is-fs .ic-min{display:inline;}
.stage:fullscreen{display:flex;align-items:center;justify-content:center;background:#1f1b17;border-radius:0;}
.stage:-webkit-full-screen{display:flex;align-items:center;justify-content:center;background:#1f1b17;}
.stage:fullscreen iframe{height:100%;width:100%;min-height:0;}
.stage:-webkit-full-screen iframe{height:100%;width:100%;min-height:0;}
.stage .placeholder{height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#c9bda9;text-align:center;padding:20px;}
.stage .placeholder .big{font-size:19px;font-weight:700;color:#efe8d8;margin-bottom:6px;}
.game-note{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 18px;margin-top:16px;}
.game-note h3{margin:0 0 6px;font-size:16px;color:var(--wood,#6b4f39);}
.game-note p{margin:0;color:var(--soft-ink);font-size:15px;}

/* parents page */
.hero-band{background:var(--slate);color:#eef1f2;}
.hero-band .inner{max-width:900px;margin:0 auto;padding:40px 20px;}
.hero-band h1{margin:0 0 10px;font-size:32px;color:#fff;}
.hero-band p{margin:0;font-size:18px;color:#c6cdd1;max-width:620px;}
.promise-list{max-width:900px;margin:0 auto;padding:30px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.promise-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;}
.promise-card .ic{width:44px;height:44px;border-radius:11px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.promise-card .ic svg{width:24px;height:24px;}
.promise-card h3{margin:0 0 6px;font-size:17px;color:var(--ink);}
.promise-card p{margin:0;color:var(--soft-ink);font-size:14.5px;}

/* parents band (shared) */
.parents{background:var(--slate);color:#e7ebed;margin-top:34px;}
.parents-inner{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:30px 20px;max-width:1100px;margin:0 auto;}
.parents .txt{flex:1 1 360px;}
.parents h2{margin:0 0 7px;color:#fff;font-size:22px;}
.parents p{margin:0;color:#bcc4c8;font-size:15.5px;max-width:560px;}

footer{background:var(--topbar);color:#cabfae;text-align:center;padding:20px;font-size:13.5px;margin-top:34px;}
footer a{color:#cabfae;margin:0 9px;}
footer a:hover{color:#fff;}

@media (max-width:600px){
  .search{display:none;}
}