:root {
  
  --color-primary:#2563EB; --color-on-primary:#FFFFFF;
  --color-secondary:#F59E0B; --color-accent:#EC4899;
  --color-background:#EFF6FF; --color-foreground:#0F172A;
  --color-muted:#F1F5FD; --color-border:#E4ECFC;
  --color-destructive:#DC2626; --color-ring:#2563EB;

  --radius:22px; --radius-sm:14px;
  --border:3px solid var(--color-border);
  
  --clay: 0 10px 22px rgba(37,99,235,.14), 0 3px 6px rgba(15,23,42,.06),
          inset 0 2px 3px rgba(255,255,255,.9), inset 0 -4px 8px rgba(37,99,235,.07);
  --clay-press: 0 4px 10px rgba(37,99,235,.16),
          inset 0 3px 7px rgba(37,99,235,.18), inset 0 -2px 3px rgba(255,255,255,.7);
  --ease: 200ms cubic-bezier(.22,1,.36,1);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100dvh; overflow-x:clip;
  font-family:"Inter", system-ui, sans-serif; font-size:17px; line-height:1.65; font-weight:400;
  color:var(--color-foreground);
  background:
    radial-gradient(1100px 480px at 12% -8%, #DBE8FF 0%, transparent 60%),
    radial-gradient(900px 460px at 105% 0%, #FFE9F4 0%, transparent 55%),
    var(--color-background);
}

h1,h2,h3,.brand { font-family:"Nunito", system-ui, sans-serif; line-height:1.12; color:var(--color-foreground); }
h1 { font-size:clamp(2rem, 5vw, 3rem); font-weight:800; letter-spacing:-.01em; }
h2 { font-size:clamp(1.4rem, 3.2vw, 2rem); font-weight:700; margin-top:2.4rem; }
a { color:var(--color-primary); }

.container { max-width:1080px; margin:0 auto; padding:24px 18px 64px; }


.site-header {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:8px 18px; flex-wrap:nowrap;
  padding:10px 20px; background:rgba(255,255,255,.88); backdrop-filter:blur(10px);
  border-bottom:2px solid var(--color-border);
}
.brand {
  display:inline-flex; align-items:center; gap:8px; flex:none;
  font-size:1.3rem; font-weight:800; color:var(--color-primary); text-decoration:none;
}

.brand-logo { height:46px; width:auto; display:block; }
.lang-switch select {
  font-family:inherit; font-size:1rem; font-weight:700; color:var(--color-primary);
  padding:10px 14px; min-height:44px; border:var(--border); border-radius:var(--radius-sm);
  background:#fff; box-shadow:var(--clay); cursor:pointer;
}


.breadcrumbs { font-size:.95rem; color:#5b6478; margin:.4rem 0 1.4rem; }
.breadcrumbs a { color:var(--color-primary); text-decoration:none; font-weight:700; }


.hero {
  display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center;
  background:linear-gradient(135deg, #fff 0%, var(--color-muted) 100%);
  border:var(--border); border-radius:calc(var(--radius) + 8px);
  padding:clamp(26px,5vw,52px); margin:.5rem 0 2rem; box-shadow:var(--clay);
  position:relative; overflow:hidden;
}
.hero-copy { position:relative; z-index:2; }
.intro { font-size:1.12rem; color:#2b3346; max-width:52ch; }
.hero-cta { margin-top:1.4rem; }
.btn-play {
  display:inline-flex; align-items:center; gap:10px; font-family:"Nunito",sans-serif;
  font-weight:700; font-size:1.1rem; color:#fff; text-decoration:none;
  background:linear-gradient(135deg, var(--color-primary), #4f7cf5);
  border-radius:999px; padding:14px 26px; min-height:52px; box-shadow:var(--clay);
  transition:transform var(--ease), box-shadow var(--ease), filter var(--ease);
}
.btn-play:hover { transform:translateY(-2px); filter:brightness(1.05); }
.btn-play svg { width:20px; height:20px; }


.hero-visual { position:relative; height:280px; }
.hero-visual .blob {
  position:absolute; inset:8% 8%; border-radius:52px; transform:rotate(-6deg);
  background:radial-gradient(circle at 30% 25%, #FFE9F4, transparent 60%),
            linear-gradient(135deg, var(--color-secondary), var(--color-accent)); opacity:.16;
}
.hero-tile {
  position:absolute; width:130px; background:#fff; border:var(--border); border-radius:var(--radius);
  box-shadow:var(--clay); padding:16px; display:flex; flex-direction:column; gap:8px;
}
.hero-tile .icon-chip { width:46px; height:46px; border-radius:14px; margin:0; }
.hero-tile .icon-chip svg { width:24px; height:24px; }
.hero-tile .lbl { font-family:"Nunito",sans-serif; font-weight:700; font-size:.96rem; }
.hero-tile.h1t { top:2%; left:4%; transform:rotate(-7deg); }
.hero-tile.h1t .icon-chip { background:var(--color-primary); }
.hero-tile.h2t { top:26%; right:2%; transform:rotate(5deg); z-index:3; }
.hero-tile.h2t .icon-chip { background:var(--color-secondary); }
.hero-tile.h3t { bottom:2%; left:24%; transform:rotate(3deg); }
.hero-tile.h3t .icon-chip { background:var(--color-accent); }


.card-grid, .game-grid {
  list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:18px;
  
  grid-template-columns:repeat(auto-fill, minmax(min(100%,220px),1fr));
}
.card, .game-card {
  background:#fff; border:var(--border); border-radius:var(--radius);
  padding:20px; box-shadow:var(--clay);
  transition:transform var(--ease), box-shadow var(--ease);
}
.card:hover, .game-card:hover { transform:translateY(-4px) scale(1.015); }
.card:active, .game-card:active { transform:translateY(0) scale(.99); box-shadow:var(--clay-press); }
.card a, .game-card a {
  text-decoration:none; color:var(--color-foreground); display:flex; flex-direction:column; gap:6px;
}

.icon-chip {
  width:58px; height:58px; border-radius:18px; display:grid; place-items:center;
  background:var(--color-primary); box-shadow:var(--clay); margin-bottom:10px;
}
.icon-chip svg { width:30px; height:30px; color:#fff; }
.card-h {
  font-family:"Nunito",sans-serif; font-weight:700; font-size:1.22rem; line-height:1.2;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.card-desc { font-size:.92rem; color:#5b6478; font-family:"Inter",sans-serif; line-height:1.5; }

.card-grid > :nth-child(3n+1), .game-grid > :nth-child(3n+1) { border-top:7px solid var(--color-primary); }
.card-grid > :nth-child(3n+2), .game-grid > :nth-child(3n+2) { border-top:7px solid var(--color-secondary); }
.card-grid > :nth-child(3n),   .game-grid > :nth-child(3n)   { border-top:7px solid var(--color-accent); }
.card-grid > :nth-child(3n+1) .icon-chip, .game-grid > :nth-child(3n+1) .icon-chip { background:var(--color-primary); }
.card-grid > :nth-child(3n+2) .icon-chip, .game-grid > :nth-child(3n+2) .icon-chip { background:var(--color-secondary); }
.card-grid > :nth-child(3n)   .icon-chip, .game-grid > :nth-child(3n)   .icon-chip { background:var(--color-accent); }
.game-desc { margin:.4rem 0 0; font-size:.85rem; color:#666; font-family:"Inter",sans-serif; }
.age {
  font-family:"Nunito",sans-serif; font-size:.75rem; font-weight:700; color:#3a2a00;
  background:var(--color-secondary); border-radius:999px; padding:2px 9px; white-space:nowrap;
}

.card-grid > :nth-child(3n+2) .icon-chip, .game-grid > :nth-child(3n+2) .icon-chip,
.hero-tile.h2t .icon-chip, .trust-item:nth-child(4n+2) .t-ic { background:#C76A02; }


.game-launch {
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Nunito",sans-serif; font-weight:700; font-size:1.15rem;
  color:var(--color-on-primary);
  background:linear-gradient(135deg, var(--color-primary), #4f7cf5);
  border:0; border-radius:var(--radius); padding:15px 28px; min-height:54px;
  box-shadow:var(--clay); cursor:pointer; touch-action:manipulation;
  transition:transform var(--ease), box-shadow var(--ease), filter var(--ease);
}
.game-launch:hover { transform:translateY(-2px); filter:brightness(1.04); }
.game-launch:active { transform:translateY(1px); box-shadow:var(--clay-press); }
.game-launch svg { width:22px; height:22px; }


.game-launch.has-poster {
  position:relative; display:block; width:100%; padding:0; overflow:hidden;
  aspect-ratio:16/10; min-height:0; border-radius:var(--radius);
  background:#0f172a; box-shadow:var(--clay); transform:none;
}
.game-launch.has-poster:hover { transform:translateY(-2px); filter:none; }
.game-launch.has-poster:active { transform:translateY(1px); }
.play-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.play-shade {
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 42%, rgba(0,0,0,.12), rgba(0,0,0,.58));
  transition:background var(--ease);
}
.game-launch.has-poster:hover .play-shade {
  background:radial-gradient(circle at 50% 42%, rgba(0,0,0,.04), rgba(0,0,0,.5));
}
.play-cta {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; color:#fff; text-align:center;
}
.play-circle {
  width:88px; height:88px; border-radius:50%;
  background:linear-gradient(135deg, var(--color-primary), #4f7cf5);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.4); animation:playpulse 2.1s ease-in-out infinite;
}
.play-circle svg { width:40px; height:40px; margin-left:5px; color:#fff; }
.game-launch.has-poster:hover .play-circle { transform:scale(1.08); }
.play-text {
  font-family:"Nunito",sans-serif; font-weight:800; font-size:1.6rem; line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.play-sub {
  font-family:"Nunito",sans-serif; font-weight:600; font-size:1rem; opacity:.95;
  background:rgba(15,23,42,.42); padding:3px 12px; border-radius:999px;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
@keyframes playpulse {
  0%,100% { transform:scale(1);    box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 0 0 rgba(91,141,239,.5); }
  50%     { transform:scale(1.06); box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 0 18px rgba(91,141,239,0); }
}
@media (prefers-reduced-motion: reduce) {
  .play-circle { animation:none; }
}


.game-embed { margin:1.6rem 0; }
.embedded-game {
  background:var(--color-muted); border:var(--border); border-radius:var(--radius);
  padding:12px; box-shadow:var(--clay); margin:1.6rem 0;
}
.game-canvas {
  width:100%; aspect-ratio:4/3; border-radius:var(--radius);
  background:#0f172a; display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:inset 0 0 0 4px var(--color-border);
}

.game-canvas.game-slot {
  flex-direction:column; gap:8px; text-align:center; padding:24px;
  background:linear-gradient(135deg, #fff 0%, var(--color-muted) 100%);
  color:var(--color-foreground); box-shadow:inset 0 0 0 3px var(--color-border);
}
.game-slot svg { width:54px; height:54px; color:#fff; background:var(--color-primary);
  border-radius:18px; padding:13px; box-shadow:var(--clay); }
.game-slot .slot-title { font-family:"Nunito",sans-serif; font-weight:700; font-size:1.25rem; margin-top:6px; }
.game-slot .slot-sub { color:#5b6478; font-size:.95rem; }

.game-overlay { position:fixed; inset:0; z-index:9999; background:#0b0f17; }
.game-frame-full { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.game-close {
  position:fixed; z-index:10000;
  top:max(10px, env(safe-area-inset-top)); right:max(10px, env(safe-area-inset-right));
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(15,18,24,.6); color:#fff; font-size:1.25rem; line-height:1;
  display:grid; place-items:center; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.game-close:hover { background:rgba(15,18,24,.85); }


.faq details {
  background:#fff; border:var(--border); border-radius:var(--radius-sm);
  padding:.8rem 1.1rem; margin:.7rem 0; box-shadow:var(--clay);
}
.faq summary { cursor:pointer; font-family:"Nunito",sans-serif; font-weight:700; font-size:1.1rem; }


.body { max-width:68ch; }
.body h2 { color:var(--color-primary); }


.site-footer {
  border-top:3px solid var(--color-border); background:rgba(255,255,255,.7);
  padding:28px 20px; color:#5b6478; text-align:center; font-size:.95rem;
}


:focus-visible { outline:3px solid var(--color-ring); outline-offset:3px; border-radius:6px; }
a, button, select, summary { min-height:44px; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--color-primary); color:#fff; padding:12px 18px; border-radius:0 0 12px 0;
  font-family:"Nunito",sans-serif; font-weight:700; text-decoration:none; }
.skip-link:focus { left:0; }
.lang-go { margin-left:8px; font-family:"Nunito",sans-serif; font-weight:700;
  border:var(--border); border-radius:var(--radius-sm); background:#fff; padding:8px 14px;
  min-height:44px; cursor:pointer; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
  .card:hover, .game-card:hover, .game-launch:hover { transform:none; }
}

.trust-band {
  display:flex; flex-wrap:wrap; gap:16px 30px; justify-content:center; align-items:center;
  background:#fff; border:var(--border); border-radius:var(--radius);
  padding:20px 26px; box-shadow:var(--clay); margin:0 0 2.4rem;
}
.trust-item { display:flex; align-items:center; gap:12px; font-family:"Nunito",sans-serif;
  font-weight:700; font-size:1rem; color:var(--color-foreground); }
.trust-item .t-ic { width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  box-shadow:var(--clay); flex:0 0 auto; }
.trust-item .t-ic svg { width:22px; height:22px; color:#fff; }
.trust-item:nth-child(4n+1) .t-ic { background:var(--color-primary); }
.trust-item:nth-child(4n+2) .t-ic { background:var(--color-secondary); }
.trust-item:nth-child(4n+3) .t-ic { background:var(--color-accent); }
.trust-item:nth-child(4n)   .t-ic { background:#22A06B; }


.game-head { display:flex; align-items:center; gap:16px; margin-bottom:.4rem; }
.game-head .icon-chip { margin:0; flex:0 0 auto; }
.game-head h1 { margin:0; }
.embedded-game h2 { display:flex; align-items:center; gap:12px; margin-top:0; }
.embedded-game h2 .icon-chip { width:42px; height:42px; border-radius:13px; margin:0; background:var(--color-accent); }
.embedded-game h2 .icon-chip svg { width:22px; height:22px; }
.info-card { background:#fff; border:var(--border); border-radius:var(--radius);
  padding:20px 24px; box-shadow:var(--clay); margin:1.1rem 0; }
.info-card h2 { margin-top:0; }

@media (max-width:760px){
  .hero { grid-template-columns:1fr; gap:8px; }
  .hero-visual { display:none; }
}
@media (max-width:520px){ body{ font-size:17px; } .container{ padding:18px 14px 48px; } .trust-band{ gap:14px 20px; } }


@media (max-width:640px){
  .site-header{ padding:8px 14px; gap:4px 10px; flex-wrap:wrap; }
  .site-header .brand{ font-size:1.18rem; }
  .brand-logo{ height:38px; }
  .site-header .site-nav{
    order:3; flex-basis:100%; width:100%; margin-top:2px; padding-bottom:2px;
    flex-wrap:nowrap; overflow-x:auto; gap:0 1.15rem;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .site-header .site-nav::-webkit-scrollbar{ display:none; }
  .site-header .site-nav a{ white-space:nowrap; font-size:.92rem; }
  .site-header .lang-switch{ gap:.5rem; }
}


.game-soon{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;
  padding:2.4rem 1.4rem;margin:1.2rem 0;border-radius:24px;
  background:rgba(37,99,235,.06);border:2px dashed rgba(37,99,235,.35);color:#1e293b}
.game-soon-badge{display:inline-block;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  font-size:.8rem;color:#fff;background:#2563EB;padding:.3rem .9rem;border-radius:999px;margin:0}
.game-soon-link{font-weight:700;color:#C76A02;text-decoration:none}
.game-soon-link:hover{text-decoration:underline}


.footer-nav{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;margin-bottom:.6rem}
.footer-nav a{color:inherit;text-decoration:none;opacity:.85;font-weight:600}
.footer-nav a:hover{opacity:1;text-decoration:underline}
.info-page{max-width:760px;margin:0 auto;line-height:1.65}
.info-page h2{margin-top:1.6rem;font-size:1.15rem}
.info-page .page-body p{margin:.7rem 0}
.info-page a{color:#C76A02;font-weight:600}


.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px;margin:1.1rem 0 1.4rem}
.shot{width:100%;height:auto;display:block;border-radius:18px;border:3px solid #fff;
  box-shadow:0 8px 22px rgba(30,41,59,.18);background:#0e0a1c}

.game-card.has-cover{overflow:hidden}
.card-cover{display:block;margin:-2px -2px .6rem;border-radius:16px 16px 0 0;overflow:hidden;aspect-ratio:16/10;background:#0e0a1c}
.card-cover img{width:100%;height:100%;object-fit:cover;display:block}


.site-nav{display:flex;flex:1 1 auto;min-width:0;flex-wrap:nowrap;gap:.3rem 1.1rem;align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{color:var(--color-foreground,#0F172A);text-decoration:none;font-weight:700;font-size:.95rem;opacity:.8;white-space:nowrap;flex:none}
.site-nav a:hover{opacity:1;color:var(--color-primary,#2563EB)}
.lang-switch{display:flex;gap:.6rem;align-items:center;margin-left:auto;flex:none}
.lang-switch .lang-cur{font-weight:800;color:var(--color-primary,#2563EB)}
.lang-switch .lang-alt{color:inherit;opacity:.7;text-decoration:none;font-weight:700}
.lang-switch .lang-alt:hover{opacity:1;text-decoration:underline}

.more-games{margin-top:2rem}
.updated{margin-top:1.4rem;font-size:.85rem;color:#64748b}


.research{margin-top:2rem;padding:1.2rem 1.4rem;border-radius:18px;background:rgba(37,99,235,.05);border:1px solid var(--color-border,#E4ECFC)}
.research h2{margin-top:0}
.research .refs{margin:.8rem 0 0;padding-left:1.1rem;font-size:.9rem;line-height:1.5}
.research .refs li{margin:.45rem 0}
.research .refs a{color:#475569;text-decoration:none}
.research .refs a:hover{color:var(--color-primary,#2563EB);text-decoration:underline}
.updated a{color:inherit;font-weight:600;text-decoration:none}
.updated a:hover{text-decoration:underline}


.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}



.idea-banner {
  position:relative; overflow:hidden; margin-top:3rem;
  display:flex; align-items:flex-start; gap:22px;
  padding:30px 32px 26px;
  background:linear-gradient(135deg, #FFF7E0 0%, #FFE9CB 55%, #FFDDE9 100%);
  border:3px solid #FFD79A; border-radius:calc(var(--radius) + 6px);
  box-shadow:0 12px 26px rgba(245,158,11,.18), 0 3px 6px rgba(15,23,42,.06),
    inset 0 2px 3px rgba(255,255,255,.9), inset 0 -4px 8px rgba(245,158,11,.10);
}
.idea-blob { position:absolute; border-radius:50%; filter:blur(2px); opacity:.55; pointer-events:none; }
.idea-blob-a { width:190px; height:190px; right:-60px; top:-70px;
  background:radial-gradient(circle at 35% 35%, #FFC46B, #FFB1D0); }
.idea-blob-b { width:120px; height:120px; left:-45px; bottom:-55px;
  background:radial-gradient(circle at 40% 35%, #FFE08A, #FFC46B); }
.idea-mascot {
  flex:none; width:86px; height:86px; display:grid; place-items:center;
  font-size:2.6rem; background:#fff; border:3px solid #FFD79A; border-radius:28px;
  box-shadow:var(--clay); transform:rotate(-6deg); position:relative; z-index:1;
}
.idea-main { position:relative; z-index:1; flex:1 1 auto; min-width:0; }
.idea-title { margin:0 0 .35rem; font-size:clamp(1.45rem, 3.4vw, 2rem); font-weight:800; color:#7C3A00; }
.idea-sub { margin:0 0 1rem; color:#8A5A21; max-width:56ch; }
.idea-err {
  margin:0 0 .8rem; padding:10px 14px; border-radius:var(--radius-sm);
  background:#FFF1F2; border:2px solid #FECDD3; color:#B91C1C; font-weight:700;
}
.idea-form { display:block; }
.idea-hp { position:absolute !important; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
.idea-text {
  width:100%; resize:vertical; min-height:96px;
  font:inherit; color:var(--color-foreground);
  padding:14px 16px; background:#fff; border:3px solid #FFD79A; border-radius:var(--radius-sm);
  box-shadow:inset 0 2px 5px rgba(124,58,0,.08);
}
.idea-text:focus, .idea-email:focus { outline:3px solid var(--color-secondary); outline-offset:2px; }
.idea-text::placeholder, .idea-email::placeholder { color:#B98A4E; opacity:.85; }
.idea-row { display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; }
.idea-email {
  flex:1 1 240px; min-width:0; font:inherit; min-height:54px;
  padding:10px 16px; background:#fff; border:3px solid #FFD79A; border-radius:var(--radius-sm);
}
.idea-btn {
  flex:0 0 auto; border:0; border-radius:var(--radius); padding:14px 30px; min-height:54px;
  font-family:"Nunito", system-ui, sans-serif; font-size:1.12rem; font-weight:800;
  color:#fff; cursor:pointer;
  background:linear-gradient(135deg, var(--color-secondary), #F97316);
  box-shadow:0 10px 20px rgba(249,115,22,.30), inset 0 2px 3px rgba(255,255,255,.5),
    inset 0 -4px 8px rgba(154,52,18,.25);
  transition:transform var(--ease), box-shadow var(--ease);
}
.idea-btn:hover { transform:translateY(-2px); }
.idea-btn:active { transform:translateY(1px) scale(.98); }
.idea-btn:disabled { opacity:.6; cursor:default; transform:none; }
.idea-note { margin:.7rem 0 0; font-size:.9rem; color:#8A5A21; }
.idea-thanks { display:none; align-items:center; gap:16px; padding:6px 0 2px; }
.idea-thanks-emoji { font-size:2.4rem; flex:none; }
.idea-thanks-h { margin:0 0 .2rem; font-size:1.4rem; font-weight:800; color:#7C3A00; }
.idea-thanks p { margin:0; color:#8A5A21; }
.idea-banner.is-done .idea-form, .idea-banner.is-done .idea-err { display:none; }
.idea-banner.is-done .idea-thanks { display:flex; }
@media (max-width: 640px) {
  .idea-banner { flex-direction:column; gap:12px; padding:22px 18px 20px; margin-top:2.2rem; }
  .idea-mascot { width:64px; height:64px; font-size:2rem; border-radius:20px; }
  .idea-row { flex-direction:column; }
  .idea-btn { width:100%; }
  .idea-email { flex-basis:auto; width:100%; }
}





.site-header{
  backdrop-filter:none; -webkit-backdrop-filter:none;
  background:rgba(255,255,255,.96);
  display:flex; align-items:center; flex-wrap:nowrap; gap:6px 10px;
  padding:8px 16px;
}
@media (max-width:640px){
  .site-header{ flex-wrap:nowrap; padding:8px 12px; }
}


.main-nav{
  display:flex; align-items:center; gap:2px;
  flex:1 1 auto; min-width:0; margin-left:6px;
}
.nav-item{ position:relative; flex:none; }
.nav-link{
  display:inline-flex; align-items:center; gap:5px;
  font-family:"Nunito", system-ui, sans-serif; font-weight:700; font-size:.98rem;
  color:var(--color-foreground); text-decoration:none; white-space:nowrap;
  background:none; border:0; cursor:pointer;
  padding:9px 11px; min-height:44px; border-radius:12px;
  transition:background var(--ease), color var(--ease);
}
.nav-link:hover{ background:var(--color-muted); color:var(--color-primary); }
.nav-item:focus-within > .nav-link{ background:var(--color-muted); color:var(--color-primary); }
.nav-more-btn svg{ transition:transform var(--ease); }
.nav-more-item:hover .nav-more-btn svg,
.nav-more-item.is-open .nav-more-btn svg,
.nav-more-item:focus-within .nav-more-btn svg{ transform:rotate(180deg); }


.nav-drop{
  position:absolute; top:100%; left:0; z-index:140;
  min-width:320px; max-width:400px; width:max-content;
  max-height:calc(100vh - 110px); overflow-y:auto;
  background:#fff; border:var(--border); border-radius:18px;
  box-shadow:0 22px 46px rgba(37,99,235,.18), 0 5px 12px rgba(15,23,42,.10);
  padding:10px;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px);
  transition:opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.nav-drop.drop-right{ left:auto; right:0; }
.nav-item:hover > .nav-drop,
.nav-item:focus-within > .nav-drop,
.nav-item.is-open > .nav-drop{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
}

.nav-item::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:10px; display:none;
}
.nav-item:hover::after{ display:block; }

.drop-games{ list-style:none; margin:0; padding:0; }
.drop-games a{
  display:block; padding:8px 12px; min-height:0; border-radius:10px;
  text-decoration:none; color:#3c4356; white-space:normal;
  font-family:"Inter",sans-serif; font-weight:700; font-size:.95rem; line-height:1.3;
}
.drop-games a:hover{ background:var(--color-muted); color:var(--color-primary); }
.drop-all{
  display:block; margin:8px 2px 2px; padding:9px 12px; border-radius:12px;
  text-decoration:none; text-align:center;
  font-family:"Nunito",sans-serif; font-weight:800; font-size:.9rem;
  color:var(--color-primary); background:var(--color-muted);
}
.drop-all:hover{ background:var(--color-border); }


.nav-more-drop{ min-width:340px; }
.drop-subjects{ list-style:none; margin:0; padding:0; }
.drop-subjects a{
  display:flex; align-items:center; gap:10px; padding:8px 12px; min-height:0;
  border-radius:10px; text-decoration:none; color:var(--color-foreground);
  font-family:"Nunito",sans-serif; font-weight:700; font-size:.98rem; white-space:normal;
}
.drop-subjects a:hover{ background:var(--color-muted); color:var(--color-primary); }
.ds-ic{
  flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  color:#fff; background:var(--color-primary);
}
.ds-ic svg{ width:18px; height:18px; }
.drop-subjects li:nth-child(4n+2) .ds-ic{ background:#C76A02; }
.drop-subjects li:nth-child(4n+3) .ds-ic{ background:var(--color-accent); }
.drop-subjects li:nth-child(4n)   .ds-ic{ background:#22A06B; }
.ds-count{
  margin-left:auto; font-family:"Nunito",sans-serif; font-weight:800; font-size:.72rem;
  color:#64748b; background:var(--color-muted); border-radius:999px;
  padding:1px 8px; min-width:22px; text-align:center;
}

.drop-ages{ margin-top:10px; padding-top:10px; border-top:2px solid var(--color-border); }
.drop-ages-lbl{
  display:block; font-family:"Nunito",sans-serif; font-weight:800; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.04em; color:#64748b; margin:0 4px 8px;
}
.drop-ages-row{ display:flex; flex-wrap:wrap; gap:7px; padding:0 2px 2px; }
.age-chip{
  display:inline-flex; align-items:center; text-decoration:none;
  font-family:"Nunito",sans-serif; font-weight:700; font-size:.88rem; color:#3a2a00;
  background:var(--color-secondary); border-radius:999px; padding:5px 13px; min-height:34px;
  box-shadow:var(--clay); transition:transform var(--ease), filter var(--ease);
}
.age-chip:hover{ transform:translateY(-1px); filter:brightness(1.03); }


@media (max-width:1260px){ .nav-item.p7{ display:none; } }
@media (max-width:1140px){ .nav-item.p6{ display:none; } }
@media (max-width:1020px){ .nav-item.p5{ display:none; } .nav-link{ font-size:.94rem; padding:9px 9px; } }


.nav-burger{
  display:none; margin-left:auto; align-items:center; gap:8px;
  font-family:"Nunito",sans-serif; font-weight:800; font-size:1rem;
  color:var(--color-primary); background:#fff;
  border:var(--border); border-radius:999px; padding:8px 15px; min-height:44px;
  box-shadow:var(--clay); cursor:pointer;
}
.mobile-nav, .mnav-scrim{ display:none; }

@media (max-width:900px){
  .main-nav{ display:none; }
  .nav-burger{ display:inline-flex; }

  .mobile-nav{
    display:block; position:fixed; top:0; right:0; bottom:0; z-index:1300;
    width:min(90vw, 400px); height:100dvh; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:#fff; padding:0 16px calc(28px + env(safe-area-inset-bottom));
    box-shadow:-18px 0 44px rgba(15,23,42,.28);
    transform:translateX(102%); visibility:hidden;
    transition:transform .28s cubic-bezier(.22,1,.36,1), visibility .28s;
  }
  body.mnav-open .mobile-nav{ transform:none; visibility:visible; }

  .mnav-scrim{
    display:block; position:fixed; inset:0; z-index:1200;
    background:rgba(15,23,42,.5);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .28s ease, visibility .28s;
  }
  body.mnav-open .mnav-scrim{ opacity:1; visibility:visible; pointer-events:auto; }

  .mnav-bar{
    position:sticky; top:0; z-index:2; display:flex; align-items:center;
    justify-content:space-between; margin:0 -16px 6px; padding:12px 16px;
    background:#fff; border-bottom:2px solid var(--color-border);
  }
  .mnav-heading{ font-family:"Nunito",sans-serif; font-weight:800; font-size:1.1rem; color:#334155; }
  .mnav-close{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border:0; border-radius:14px; cursor:pointer;
    color:#334155; background:var(--color-muted);
  }

  .mnav-subj{ border-bottom:1px solid var(--color-border); }
  .mnav-subj:last-of-type{ border-bottom:0; }
  .mnav-subj summary{
    display:flex; align-items:center; gap:11px; list-style:none; cursor:pointer;
    padding:12px 4px; min-height:52px;
    font-family:"Nunito",sans-serif; font-weight:800; font-size:1.12rem;
    color:var(--color-foreground);
  }
  .mnav-subj summary::-webkit-details-marker{ display:none; }
  .mnav-ic{
    flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
    color:#fff; background:var(--color-primary); box-shadow:var(--clay);
  }
  .mnav-ic svg{ width:22px; height:22px; }
  .mnav-subj:nth-of-type(4n+2) .mnav-ic{ background:#C76A02; }
  .mnav-subj:nth-of-type(4n+3) .mnav-ic{ background:var(--color-accent); }
  .mnav-subj:nth-of-type(4n)   .mnav-ic{ background:#22A06B; }
  .mnav-lbl{ flex:1 1 auto; min-width:0; }
  .mnav-count{
    flex:none; font-family:"Nunito",sans-serif; font-weight:800; font-size:.75rem;
    color:#64748b; background:var(--color-muted); border-radius:999px;
    padding:2px 9px; min-width:24px; text-align:center;
  }
  .mnav-chev{ flex:none; color:#94a3b8; transition:transform var(--ease); }
  .mnav-subj[open] .mnav-chev{ transform:rotate(180deg); }

  .mnav-games{ list-style:none; margin:0; padding:0 0 10px 49px; }
  .mnav-games a{
    display:block; padding:9px 8px; min-height:0; border-radius:10px;
    text-decoration:none; color:#3c4356; white-space:normal;
    font-family:"Inter",sans-serif; font-weight:700; font-size:1rem; line-height:1.3;
  }
  .mnav-games a:hover{ background:var(--color-muted); }
  .mnav-games .mnav-all{
    font-family:"Nunito",sans-serif; font-weight:800; color:var(--color-primary);
  }
  .mobile-nav .drop-ages{ margin-top:14px; padding:14px 4px 0; }
  .mobile-nav .age-chip{ font-size:1rem; padding:8px 16px; min-height:44px; }
}


.footer-lang{ margin:.4rem 0 .2rem; }
.footer-lang a{ color:inherit; opacity:.7; font-weight:600; text-decoration:none; font-size:.9rem; }
.footer-lang a:hover{ opacity:1; text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  .nav-drop, .mobile-nav, .mnav-scrim, .mnav-chev, .nav-more-btn svg{ transition:none !important; }
}


.nav-drop-compact{ min-width:420px; max-width:460px; }
.drop-topics{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:2px 6px;
}
.drop-topics a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 12px; border-radius:10px; text-decoration:none; color:#3c4356;
  font-family:"Nunito",sans-serif; font-weight:700; font-size:.92rem; line-height:1.2;
}
.drop-topics a:hover{ background:var(--color-muted); color:var(--color-primary); }
.drop-topics .dt-count{
  font-size:.72rem; font-weight:800; color:var(--color-primary);
  background:var(--color-muted); border-radius:20px; padding:1px 7px; flex:none;
}


.nav-drop-grouped{ min-width:340px; }
.drop-group{ margin-bottom:6px; }
.drop-group + .drop-group{ border-top:1px solid var(--color-border); padding-top:6px; }
.drop-group-h{
  display:block; padding:6px 12px 3px; text-decoration:none;
  font-family:"Nunito",sans-serif; font-weight:800; font-size:.72rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--color-primary);
}
.drop-group-h:hover{ text-decoration:underline; }

.mnav-group{ margin-top:6px; }
.mnav-group a{
  display:block; padding:6px 0 2px; text-decoration:none;
  font-family:"Nunito",sans-serif; font-weight:800; font-size:.72rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--color-primary);
}


.lang-section{ margin-top:26px; }
.lang-section > h2{ margin-bottom:12px; }
.lang-section > h2 > a{ text-decoration:none; color:inherit; }
.lang-section > h2 > a:hover{ color:var(--color-primary); }




.page-home .container{ max-width:1320px; padding:16px 28px 56px; }

.page-home .hero{ padding:clamp(22px,3.6vw,40px); margin:.4rem 0 1.4rem; }
.page-home .trust-band{ margin:0 0 1.6rem; padding:16px 24px; }

.page-home main > section > h2{ font-size:clamp(1.15rem,1.7vw,1.4rem); margin-top:1.9rem; }

.home-games{ margin-top:1rem; }
.home-sec{ margin-top:1.9rem; }
.home-sec:first-child{ margin-top:1rem; }
.home-sec > .sec-h{
  margin:0 0 .1rem; display:flex; align-items:center; gap:.35rem .55rem; flex-wrap:wrap;
  font-size:clamp(1.15rem, 1.7vw, 1.4rem); font-weight:800; line-height:1.15;
}
.home-sec > .sec-h > a{ text-decoration:none; color:inherit; }
.home-sec > .sec-h > a:hover{ color:var(--color-primary); }

.sec-count{
  font-family:"Nunito",sans-serif; font-weight:800; font-size:.72rem; line-height:1;
  color:#3a2a00; background:var(--color-secondary); border-radius:999px;
  padding:.2rem .5rem; box-shadow:var(--clay);
}

.home-subsec{ margin-top:1.05rem; }
.home-subsec > .subsec-h{
  font-family:"Nunito",sans-serif; font-weight:700; font-size:1rem;
  margin:0 0 .05rem; color:#475069;
}
.home-subsec > .subsec-h > a{ text-decoration:none; color:inherit; }
.home-subsec > .subsec-h > a:hover{ color:var(--color-primary); }


.home-games .game-grid{
  gap:16px; margin-top:.55rem;
  grid-template-columns:repeat(auto-fill, minmax(min(100%,230px),1fr));
}
.home-games .game-card{ padding:12px; }

.home-games .card-cover{
  margin:-12px -12px .55rem; border-radius:16px 16px 0 0; aspect-ratio:16/10;
}

.home-games .card-h{
  font-size:1rem; line-height:1.2; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
.home-games .card-desc{
  font-size:.86rem; line-height:1.4; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
@media (max-width:520px){
  .page-home .container{ padding:12px 12px 44px; }
  .home-games .game-grid{ gap:11px; grid-template-columns:repeat(auto-fill, minmax(min(100%,150px),1fr)); }
  .home-games .game-card{ padding:9px; }
  .home-games .card-cover{ margin:-9px -9px .45rem; }
  .home-games .game-card .card-h{ font-size:.95rem; }
  .home-games .game-card .card-desc{ display:none; }
}


.card-cover{position:relative}

.voice-badge{
  position:absolute; right:8px; bottom:8px; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(11,7,24,.72); border-radius:50%;
  border:1.5px solid rgba(255,255,255,.72);
  box-shadow:0 2px 6px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.22);
}
.voice-badge svg{
  width:15px; height:15px; display:block;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55));
}
@media (max-width:520px){
  .voice-badge{ width:23px; height:23px; right:6px; bottom:6px; border-width:1.2px; }
  .voice-badge svg{ width:12px; height:12px; }
}


.game-card.gift {
  border-color: #e2b93b;
  box-shadow: 0 0 0 3px rgba(226,185,59,.45), 0 10px 24px rgba(120,90,10,.18);
}
.game-card.gift:hover { box-shadow: 0 0 0 3px rgba(226,185,59,.7), 0 14px 30px rgba(120,90,10,.24); }
.game-card .card-cover { position: relative; }
.gift-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: .3rem .65rem; border-radius: 999px;
  font-size: .8rem; font-weight: 800; letter-spacing: .01em;
  color: #4a3607; background: linear-gradient(180deg, #ffd54f, #f0ad1f);
  border: 1px solid #d99f18;
  box-shadow: 0 2px 6px rgba(120,90,10,.35);
  pointer-events: none;
}


.chess-links { margin:2.6rem 0 .8rem; }
.chess-links h2 { font-size:.92rem; font-weight:700; color:#5b6478; margin:0 0 .55rem; }
.chess-links h2 a { color:inherit; text-decoration:none; }
.chess-links h2 a:hover { text-decoration:underline; }
.chess-links ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem .5rem; }
.chess-links li a { display:inline-block; font-size:.8rem; color:#5b6478; text-decoration:none;
  padding:.24rem .62rem; border:1px solid #dbe0ea; border-radius:999px; background:#fff; }
.chess-links li a:hover { color:#22304f; border-color:#b9c2d6; }


.game-topbar { display:flex; align-items:stretch; gap:14px; margin:.6rem 0 1rem; flex-wrap:wrap; }
.acc-strip { flex:1 1 420px; display:flex; align-items:center; gap:14px; margin:0;
  padding:14px 16px; border-radius:var(--radius); color:#fff;
  background:linear-gradient(120deg,#2563EB 0%,#7C3AED 60%,#EC4899 100%);
  box-shadow:0 8px 24px rgba(37,99,235,.25); }
.acc-strip-badge { flex:0 0 auto; width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  font-size:30px; background:rgba(255,255,255,.18); }
.acc-strip-txt { flex:1 1 auto; margin:0; display:flex; flex-direction:column; gap:2px; line-height:1.3; }
.acc-strip-title { font-size:1.15rem; font-weight:800; }
.acc-strip-sub { font-size:.95rem; opacity:.95; }
.acc-strip-quiet { font-size:.8rem; opacity:.75; }
.acc-strip-btn { flex:0 0 auto; align-self:center; padding:12px 20px; border-radius:14px; background:#fff;
  color:#2563EB; font-weight:800; text-decoration:none; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.acc-strip-btn:hover { transform:translateY(-1px); }
.d4k-report-top { flex:0 0 auto; align-self:center; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 16px; border:2px solid #B45309; border-radius:999px; background:#FEF3C7; color:#78350F;
  font:inherit; font-size:.95rem; font-weight:800; cursor:pointer; box-shadow:0 3px 10px rgba(180,83,9,.15); }
.d4k-report-top:hover { background:#FDE68A; }
.d4k-report-bang { width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:#F59E0B; color:#fff; font-size:1rem; font-weight:900; line-height:1; }
@media (max-width:640px) {
  .game-topbar { gap:8px; margin:.4rem 0 .7rem; }
  .acc-strip { flex-basis:100%; gap:10px; padding:10px 12px; border-radius:16px; }
  .acc-strip-badge { width:34px; height:34px; font-size:20px; border-radius:10px; }
  .acc-strip-title { font-size:.95rem; }
  .acc-strip-sub, .acc-strip-quiet { display:none; }
  .acc-strip-btn { padding:9px 12px; font-size:.9rem; }
  .d4k-report-top { flex-basis:auto; align-self:flex-end; padding:6px 12px; font-size:.9rem; }
  .d4k-report-bang { width:22px; height:22px; font-size:.95rem; }
}


.hero-visual.has-art{ height:auto; display:flex; align-items:center; justify-content:center; }
.hero-art{ display:block; width:100%; max-width:560px; height:auto; border-radius:28px;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); }
@media (max-width:760px){
  .hero-visual.has-art{ display:flex; order:-1; margin:-6px 0 4px; }
  .hero-art{ max-width:270px; }
}
h1,h2,h3{ letter-spacing:-.005em; }
.game-head h1{ font-size:clamp(1.35rem,2.4vw,1.85rem); line-height:1.15; }
.game-head{ margin-bottom:.6rem; }