:root {
      color-scheme: light;
      --ink: #25324b;
      --muted: #68758a;
      --paper: #fbf8f1;
      --white: #fffefa;
      --line: #e9e4d9;
      --coral: #ff786e;
      --coral-dark: #e75e56;
      --mint: #bcebe1;
      --mint-dark: #3f9f8d;
      --blue: #cce7fa;
      --blue-dark: #507fb2;
      --yellow: #ffe08a;
      --lavender: #e6dcfb;
      --shadow: 0 16px 40px rgba(48, 55, 74, .08);
      --round: 26px;
      --logo-base: 56px;
      --logo-h: var(--logo-base);
      /* Logo görselinin kendi üst/alt boşluğu dolgu görevi görür; ek dolgu az tutulur. */
      --header-h: calc(var(--logo-h) + 6px);
      --nav-cta-w: 12.4rem;
      font-family: "Nunito", "Trebuchet MS", ui-rounded, system-ui, sans-serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scrollbar-gutter: stable; }
    body { margin: 0; background: var(--paper); color: var(--ink); }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 3px solid #3d7fd3; outline-offset: 4px; }
    .wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
    .skip { position: absolute; left: 12px; top: -60px; padding: 12px 16px; background: white; border-radius: 12px; z-index: 20; }
    .skip:focus { top: 12px; }

    .topbar { position: sticky; top: 0; z-index: 40; height: var(--header-h); padding: 0; background: var(--paper); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
    .nav { display: grid; grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr); align-items: center; gap: 16px; height: var(--header-h); }
    .brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; justify-self: start; font-size: 21px; font-weight: 1000; letter-spacing: -.7px; white-space: nowrap; }
    .brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 15px 15px 15px 5px; background: var(--coral); color: white; transform: rotate(-5deg); box-shadow: 0 5px 0 #e65e56; }
    .brand-mark svg { transform: rotate(5deg); }
    .brand-logo { display: block; height: var(--logo-h); width: auto; max-width: 220px; object-fit: contain; object-position: left center; }
    .navlinks { display: flex; align-items: center; justify-content: center; gap: 28px; color: #526078; font-size: 14px; font-weight: 800; }
    .navlinks a { position: relative; padding: 6px 0; }
    .navlinks a[aria-current="page"] { color: var(--ink); }
    .navlinks a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 99px; background: var(--coral); }
    .navlinks a:hover, .footer-links a:hover { color: var(--coral-dark); }
    .nav-actions { display: flex; align-items: center; justify-content: flex-end; justify-self: end; gap: 8px; min-width: var(--nav-cta-w); }
    .nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 999px; background: var(--coral); color: white; padding: 11px 18px; font-weight: 900; box-shadow: 0 5px 0 #e65e56; transition: transform .18s ease, box-shadow .18s ease; }
    .nav-cta { min-width: 0; white-space: nowrap; padding: 9px 18px; font-size: 14px; box-shadow: 0 3px 0 #e65e56; }
    .nav-cta:hover { box-shadow: 0 5px 0 #e65e56; }
    .pass-chip { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px; background: #fff1cf; color: #8c6b24; font-size: 11px; font-weight: 900; white-space: nowrap; }
    .nav-cta:hover, .button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #e65e56; }
    .mobile-menu { display: none; }
    .mobile-menu summary { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--ink); cursor: pointer; font-size: 17px; list-style: none; }
    .mobile-menu summary::-webkit-details-marker { display: none; }
    .mobile-menu nav { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: grid; gap: 4px; min-width: 210px; padding: 9px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); }
    .mobile-menu nav a { padding: 10px 12px; border-radius: 10px; color: #526078; font-size: 13px; font-weight: 900; }
    .mobile-menu nav a:hover, .mobile-menu nav a[aria-current="page"] { background: var(--paper); color: var(--ink); }
    .mobile-menu .mobile-cta { margin-top: 4px; background: var(--coral); color: white; text-align: center; }

    .hero { padding: 32px 0 62px; }
    .hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 44px; min-height: 420px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid #f3d8a1; border-radius: 999px; background: #fff3cf; color: #806522; font-size: 12px; font-weight: 1000; letter-spacing: .3px; }
    .eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #f4ad3f; }
    h1, h2, h3, p { margin-top: 0; }
    h1 { max-width: 600px; margin: 19px 0 17px; font-size: clamp(43px, 5.4vw, 68px); line-height: .99; letter-spacing: -3.8px; font-weight: 1000; }
    h1 .accent { color: var(--coral); position: relative; white-space: nowrap; }
    .hero-copy { max-width: 470px; margin-bottom: 26px; color: var(--muted); font-size: 17px; line-height: 1.7; }
    .hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
    .button.secondary { background: transparent; color: var(--ink); box-shadow: none; padding-inline: 10px; }
    .button.secondary:hover { color: var(--coral-dark); transform: none; }
    .play-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--ink); }

    .hero-art { position: relative; min-height: 388px; border-radius: 38px; background: #e9f3f6; overflow: hidden; isolation: isolate; }
    .hero-art::before { content: ""; position: absolute; width: 370px; height: 370px; border-radius: 50%; background: #d5eee6; top: 46px; left: 50%; transform: translateX(-50%); }
    .hero-art::after { content: ""; position: absolute; inset: auto -35px -105px; height: 200px; border-radius: 50% 50% 0 0; background: #f7dfac; z-index: -0; }
    .sun { position: absolute; top: 42px; right: 52px; width: 58px; height: 58px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 11px rgba(255,224,138,.26); }
    .cloud { position: absolute; width: 80px; height: 24px; border-radius: 99px; background: rgba(255,255,255,.9); }
    .cloud::before, .cloud::after { content: ""; position: absolute; bottom: 8px; border-radius: 50%; background: inherit; }
    .cloud::before { left: 14px; width: 28px; height: 28px; }
    .cloud::after { right: 12px; width: 37px; height: 37px; }
    .cloud.one { top: 74px; left: 42px; transform: scale(.78); }
    .cloud.two { top: 145px; right: 30px; transform: scale(.58); opacity: .8; }
    .float-star { position: absolute; z-index: 3; color: #f1b83e; font-size: 32px; }
    .float-star.a { top: 103px; left: 20%; transform: rotate(-15deg); }
    .float-star.b { right: 18%; top: 210px; font-size: 23px; color: #8bbade; }
    .book { position: absolute; z-index: 2; width: 184px; height: 143px; left: 50%; top: 142px; transform: translateX(-50%) rotate(-7deg); border-radius: 16px 18px 18px 10px; background: #fffaf0; box-shadow: 0 13px 0 #e5c783, 0 24px 28px rgba(50,67,87,.12); }
    .book::before { content: ""; position: absolute; inset: 10px 50% 10px 10px; border-radius: 10px 3px 3px 8px; background: var(--coral); }
    .book::after { content: ""; position: absolute; left: 50%; top: 12px; bottom: 12px; width: 2px; background: #e3d8c3; }
    .book-sun { position: absolute; top: 30px; left: 34px; font-size: 32px; color: #fff3c7; }
    .book-lines { position: absolute; top: 39px; right: 23px; display: grid; gap: 8px; }
    .book-lines i { display: block; height: 6px; width: 47px; border-radius: 9px; background: #9dcbbb; }
    .book-lines i:nth-child(2) { width: 36px; background: #c3b4e7; }
    .book-lines i:nth-child(3) { width: 52px; background: #ffd27b; }
    .pencil { position: absolute; z-index: 3; top: 260px; left: calc(50% + 78px); width: 16px; height: 111px; border-radius: 9px; background: #84c6db; transform: rotate(31deg); box-shadow: inset -4px 0 rgba(29,84,101,.12); }
    .pencil::before { content: ""; position: absolute; top: -13px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 15px solid #f2d1a1; }
    .pencil::after { content: ""; position: absolute; bottom: -5px; left: 4px; width: 8px; height: 10px; background: #f0a0a4; border-radius: 0 0 4px 4px; }
    .balloon { position: absolute; z-index: 1; top: 78px; left: calc(50% - 113px); width: 66px; height: 82px; border-radius: 52% 48% 48% 52%; background: var(--coral); transform: rotate(-15deg); box-shadow: inset -9px -5px rgba(0,0,0,.06); }
    .balloon::before { content: ""; position: absolute; left: 29px; bottom: -7px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid var(--coral); }
    .balloon::after { content: ""; position: absolute; left: 32px; top: 89px; width: 1px; height: 111px; background: #748da0; transform: rotate(7deg); }
    .tiny-label { position: absolute; z-index: 4; bottom: 27px; left: 50%; transform: translateX(-50%) rotate(2deg); padding: 10px 15px; border: 2px dashed #dbab4c; border-radius: 13px; background: #fff8df; color: #745a26; font-size: 12px; font-weight: 1000; white-space: nowrap; }

    .section { padding: 59px 0; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
    .section-kicker { margin-bottom: 8px; color: var(--mint-dark); text-transform: uppercase; font-size: 11px; letter-spacing: 1.6px; font-weight: 1000; }
    h2 { margin-bottom: 0; font-size: clamp(29px, 3.6vw, 40px); line-height: 1.08; letter-spacing: -1.7px; font-weight: 1000; }
    .section-note { max-width: 350px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
    .text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--coral-dark); font-size: 14px; font-weight: 1000; white-space: nowrap; }

    .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
    .category { display: flex; align-items: center; gap: 15px; min-height: 104px; padding: 18px; border: 1px solid transparent; border-radius: 21px; transition: transform .18s ease, box-shadow .18s ease; }
    .category:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .category:nth-child(1) { background: #ffebe5; }
    .category:nth-child(2) { background: #e7f4ef; }
    .category:nth-child(3) { background: #e9f0fd; }
    .category:nth-child(4) { background: #f1eafb; }
    .cat-icon { display: grid; place-items: center; flex: 0 0 54px; height: 54px; border-radius: 18px; background: rgba(255,255,255,.72); font-size: 27px; }
    .category strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 1000; }
    .category small { color: #737d8d; font-size: 11px; }

    .games-section { background: #fffdf7; border-block: 1px solid #f0eadf; }
    .filterbar { display: flex; align-items: center; gap: 9px; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: none; }
    .filterbar::-webkit-scrollbar { display: none; }
    .filter { flex: 0 0 auto; border: 1px solid #e7e1d7; border-radius: 999px; background: white; color: #6c778b; padding: 9px 15px; font-size: 12px; font-weight: 900; }
    .filter.active { border-color: var(--ink); background: var(--ink); color: white; }
    .game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .game-card { display: grid; grid-template-columns: 190px 1fr; gap: 21px; padding: 16px; border: 1px solid #eee9e0; border-radius: 23px; background: white; box-shadow: 0 5px 14px rgba(48,55,74,.03); }
    .game-cover { position: relative; display: grid; place-items: center; min-height: 166px; border-radius: 17px; overflow: hidden; }
    .cover-balloons { background: #dff4f0; }
    .cover-memory { background: #fff0c9; }
    .cover-pattern { background: #e9e4fb; }
    .cover-pattern::before { content: "🔺"; position: absolute; top: 28px; left: 28px; width: 58px; height: 58px; display: grid; place-items: center; border: 3px solid white; border-radius: 15px; background: #fff; font-size: 30px; box-shadow: 68px 0 0 -1px #fff, 68px 0 0 2px #fff, 0 68px 0 -1px #fff, 0 68px 0 2px #fff; }
    .cover-pattern::after { content: "🟡"; position: absolute; right: 28px; bottom: 28px; font-size: 35px; }
    .cover-letters { background: #ffecdf; }
    .cover-letters::before { content: "A"; position: absolute; top: 25px; left: 24px; display: grid; place-items: center; width: 62px; height: 69px; border: 3px solid white; border-radius: 16px; background: #fff; color: var(--coral); font-size: 34px; font-weight: 1000; box-shadow: 69px 16px 0 -1px #fff, 69px 16px 0 2px #fff; }
    .cover-letters::after { content: "?"; position: absolute; right: 26px; bottom: 24px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: 27px; font-weight: 1000; }
    .cover-directions { background: #e5f4ed; }
    .cover-directions::before { content: "🐰"; position: absolute; top: 25px; left: 27px; display: grid; place-items: center; width: 62px; height: 62px; border: 3px solid white; border-radius: 18px; background: white; font-size: 34px; box-shadow: 75px 45px 0 -1px #fff, 75px 45px 0 2px #fff; }
    .cover-directions::after { content: "🥕"; position: absolute; right: 26px; bottom: 22px; font-size: 34px; }
    .cover-numbers { background: #e6dcfb; }
    .cover-numbers::before { content: "7"; position: absolute; top: 25px; left: 27px; display: grid; place-items: center; width: 62px; height: 62px; border: 3px solid white; border-radius: 18px; background: white; color: #7964c5; font-size: 36px; font-weight: 1000; box-shadow: 75px 44px 0 -1px #fff, 75px 44px 0 2px #fff; }
    .cover-numbers::after { content: "+"; position: absolute; right: 32px; bottom: 18px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: 30px; font-weight: 1000; }
    .cover-balloons::before, .cover-balloons::after { content: ""; position: absolute; width: 58px; height: 72px; border-radius: 50%; background: var(--coral); top: 30px; left: 30px; transform: rotate(-12deg); box-shadow: 66px 18px 0 #ffd166, 105px -3px 0 #8dbce6; }
    .cover-balloons::after { width: 2px; height: 58px; top: 99px; left: 56px; background: #8b9ba6; border-radius: 0; box-shadow: 66px 0 #8b9ba6, 105px 0 #8b9ba6; }
    .cover-memory::before { content: "🐼"; position: absolute; top: 22px; left: 26px; width: 64px; height: 75px; display: grid; place-items: center; border: 3px solid white; border-radius: 15px; background: #e8f3e9; font-size: 35px; box-shadow: 68px 13px 0 -1px #fff, 68px 13px 0 2px #fff; }
    .cover-memory::after { content: "🦊"; position: absolute; right: 25px; bottom: 21px; width: 57px; height: 67px; display: grid; place-items: center; border: 3px solid white; border-radius: 15px; background: #f3dfda; font-size: 31px; transform: rotate(7deg); }
    .cover-sort { background: #e6f4fb; }
    .cover-sort::before { content: ""; position: absolute; left: 50%; bottom: 20px; width: 34px; height: 104px; transform: translateX(-50%); border: 3px solid #b9cbd8; border-top: 0; border-radius: 4px 4px 18px 18px; background: radial-gradient(circle at 50% 84%, #ff6f61 0 12px, transparent 13px), radial-gradient(circle at 50% 58%, #ff6f61 0 12px, transparent 13px), radial-gradient(circle at 50% 33%, #ff6f61 0 12px, transparent 13px), rgba(255,255,255,.75); box-shadow: -52px 0 0 -3px rgba(255,255,255,.75), 52px 0 0 -3px rgba(255,255,255,.75); }
    .cover-sort::after { content: "● ▲ ■"; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: #3d8bd8; font-size: 22px; letter-spacing: 6px; text-shadow: -32px 0 #f4b400, 32px 0 #3fae73; }
    .cover-2048 { background: #fff1dc; }
    .cover-2048::before { content: "2048"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 108px; height: 108px; transform: translate(-50%, -50%) rotate(-4deg); border-radius: 20px; background: #9b6bd6; color: white; font-size: 30px; font-weight: 1000; box-shadow: -58px 34px 0 -26px #ffc48a, 60px -30px 0 -28px #ff9f6e; }
    .cover-words { background: #eaf3fb; }
    .cover-words::before { content: "K E D İ\A M A V İ\A F İ L S"; white-space: pre; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px 16px; border-radius: 16px; background: white; color: #25324b; font-size: 18px; font-weight: 1000; line-height: 1.5; letter-spacing: 2px; text-align: center; }
    .cover-words::after { content: ""; position: absolute; top: calc(50% - 31px); left: calc(50% - 60px); width: 112px; height: 24px; border-radius: 999px; background: rgba(255,120,110,.35); }
    .cover-sudoku { background: #eef8f3; }
    .cover-sudoku::before { content: "🍎 🍌\A🍇 🍊"; white-space: pre; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 14px; border: 3px solid #4a5874; border-radius: 14px; background: white; font-size: 30px; line-height: 1.35; letter-spacing: 6px; }
    .cover-maze { background: #f4fbf6; }
    .cover-maze::before { content: ""; position: absolute; inset: 22px 34px; border: 5px solid #3f9f8d; border-radius: 10px; background: linear-gradient(#3f9f8d 0 0) 30% 0 / 5px 60% no-repeat, linear-gradient(#3f9f8d 0 0) 65% 100% / 5px 55% no-repeat, linear-gradient(#3f9f8d 0 0) 0 50% / 30% 5px no-repeat; }
    .cover-maze::after { content: "🐣"; position: absolute; left: 44px; top: 30px; font-size: 26px; text-shadow: 118px 92px 0 transparent; }
    .cover-clock { background: #fff3ef; }
    .cover-clock::before { content: ""; position: absolute; top: 50%; left: 50%; width: 112px; height: 112px; transform: translate(-50%, -50%); border: 6px solid #25324b; border-radius: 50%; background: linear-gradient(#ff786e 0 0) 50% 24% / 7px 34px no-repeat, linear-gradient(90deg, #3d6fb2 0 0) 86% 50% / 42px 5px no-repeat, radial-gradient(circle, #25324b 0 6px, transparent 7px) 50% 50% / 14px 14px no-repeat, white; }
    .cover-shadow { background: radial-gradient(circle at 72% 50%, #fff 0 40px, #e9dcc2 41px 43px, transparent 44px), radial-gradient(circle at 28% 50%, #fff 0 40px, transparent 41px), #fff4e3; }
    .cover-shadow::before { content: "🐰"; position: absolute; top: 50%; left: 28%; transform: translate(-50%, -50%); font-size: 50px; }
    .cover-shadow::after { content: "🐰"; position: absolute; top: 50%; left: 72%; transform: translate(-50%, -50%); font-size: 50px; filter: brightness(0) opacity(.75); }
    .cover-colorballoons { background: linear-gradient(180deg, #e3f3fb 0%, #f4fbf7 75%, #f6e3b4 100%); }
    .cover-colorballoons::before { content: ""; position: absolute; top: 26px; left: calc(50% - 56px); width: 34px; height: 42px; border-radius: 50% 50% 46% 46%; background: #ff5a4f; box-shadow: 39px -10px 0 #3d8bd8, 78px 4px 0 #ffd23f; }
    .cover-colorballoons::after { content: "🐰"; position: absolute; left: 18px; bottom: 14px; font-size: 40px; }
    .cover-habitat { background: linear-gradient(90deg, #cfe9ff 0 33%, #ffe3a3 33% 66%, #bfe7ff 66%); }
    .cover-habitat::before, .cover-habitat::after { position: absolute; left: 0; right: 0; display: flex; justify-content: space-around; white-space: pre; }
    .cover-habitat::before { content: "🐧\00a0\00a0🐪\00a0\00a0🐬"; top: 34%; justify-content: center; font-size: 34px; }
    .cover-habitat::after { content: "🧊\00a0\00a0\00a0\00a0\00a0🌵\00a0\00a0\00a0\00a0\00a0🌊"; top: 62%; justify-content: center; font-size: 20px; opacity: .9; }
    .cover-feed { background: linear-gradient(180deg, #e9f6ff 0 60%, #efe3c6 60%); }
    .cover-feed::before { content: "🐵"; position: absolute; top: 50%; left: 50%; transform: translate(-60%, -62%); font-size: 74px; filter: drop-shadow(0 6px 0 rgba(37,50,75,.08)); }
    .cover-feed::after { content: "🍌"; position: absolute; top: 52%; left: 58%; transform: rotate(-20deg); font-size: 40px; }
    .cover-diff { background: #fff4e0; }
    .cover-diff::before, .cover-diff::after { content: "🐞\A🌼"; white-space: pre; position: absolute; top: 50%; display: grid; place-items: center; width: 68px; height: 80px; transform: translateY(-50%); border: 3px solid #fff; border-radius: 16px; background: #dff1ff; font-size: 26px; line-height: 1.25; }
    .cover-diff::before { left: calc(50% - 76px); }
    .cover-diff::after { content: "🐞\A🌸"; right: calc(50% - 76px); box-shadow: inset 0 -38px 0 -34px #ff786e, 0 0 0 3px #ff786e; }
    .cover-firstsound { background: linear-gradient(180deg, #fff7e6, #f1f9ff); }
    .cover-firstsound::before { content: "🍎"; position: absolute; top: 50%; left: calc(50% - 62px); transform: translateY(-50%); display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: #fff; font-size: 38px; box-shadow: 0 6px 14px rgba(48,55,74,.1); }
    .cover-firstsound::after { content: "e"; position: absolute; top: 50%; left: calc(50% + 6px); transform: translateY(-50%) rotate(6deg); display: grid; place-items: center; width: 52px; height: 52px; border: 3px solid #fff; border-radius: 16px; background: #ff786e; color: #fff; font-size: 32px; font-weight: 1000; box-shadow: 0 5px 0 #e75e56; }
    .cover-bubble { background: linear-gradient(180deg, #dff1ff, #f6fbff); }
    .cover-bubble::before { content: ""; position: absolute; top: 18px; left: calc(50% - 62px); width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, #ff5a4f 20% 80%, #b8261e); box-shadow: 32px 0 0 0 #3d8bfd, 64px 0 0 0 #ffc93c, 96px 0 0 0 #36c06b, 16px 28px 0 0 #36c06b, 48px 28px 0 0 #ff5a4f, 80px 28px 0 0 #3d8bfd; }
    .cover-bubble::after { content: ""; position: absolute; bottom: 16px; left: calc(50% - 15px); width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, #a66cff 20% 80%, #6630c4); box-shadow: 0 -22px 0 -12px #6d5bd0; }
    .cover-multiply { background: #fff4df; }
    .cover-multiply::before { content: "7×8"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%) rotate(-4deg); padding: 10px 18px; border-radius: 22px; background: white; color: #25324b; font-size: 44px; font-weight: 1000; letter-spacing: -1px; box-shadow: 0 6px 0 #ffd47a; }
    .cover-multiply::after { content: "= 56 ⭐"; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) rotate(3deg); padding: 5px 12px; border-radius: 999px; background: #7fcbb5; color: white; font-size: 18px; font-weight: 1000; }
    .cover-space { background: #ece8ff; }
    .cover-space::before { content: "🪐"; position: absolute; top: 22px; left: 50%; display: grid; place-items: center; width: 94px; height: 94px; transform: translateX(-50%); border: 4px solid white; border-radius: 50%; background: #cbbcf5; font-size: 54px; box-shadow: 0 0 0 11px rgba(203,188,245,.24); }
    .cover-space::after { content: "✦"; position: absolute; top: 25px; right: 25px; color: #e7b642; font-size: 25px; text-shadow: -95px 45px 0 #8bbade, -25px 95px 0 #e7b642; }
    .cover-label { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.85); color: #58677d; font-size: 10px; font-weight: 1000; }
    .game-info { display: flex; flex-direction: column; align-items: flex-start; padding: 5px 2px 2px 0; }
    .tag { display: inline-flex; padding: 6px 9px; border-radius: 999px; background: #edf6ef; color: #47846f; font-size: 10px; font-weight: 1000; }
    .game-info h3 { margin: 12px 0 7px; font-size: 20px; letter-spacing: -.7px; font-weight: 1000; }
    .game-info p { margin-bottom: 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
    .game-meta { display: flex; align-items: center; gap: 10px; margin-top: auto; color: #69768b; font-size: 11px; font-weight: 800; }
    .age { padding: 5px 8px; border-radius: 7px; background: #f3f0fa; color: #75649b; }
    .rating { color: #8a91a0; font-size: 10px; font-weight: 800; }

    .parent-panel { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 40px; padding: 42px; border-radius: 32px; background: #eaf5f1; }
    .parent-art { position: relative; min-height: 240px; border-radius: 23px; background: #d4eae4; overflow: hidden; }
    .parent-art::before { content: ""; position: absolute; width: 160px; height: 160px; top: 30px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: #ffd166; }
    .parent-art::after { content: "♡"; position: absolute; top: 48px; left: calc(50% - 30px); font-size: 65px; font-weight: 900; color: var(--coral); }
    .parent-note { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%) rotate(-3deg); padding: 12px 18px; border-radius: 13px; background: white; font-size: 13px; font-weight: 1000; white-space: nowrap; box-shadow: 0 8px 20px rgba(40,60,60,.08); }
    .parent-copy h2 { max-width: 450px; margin-bottom: 13px; }
    .parent-copy > p { margin-bottom: 21px; color: var(--muted); font-size: 14px; line-height: 1.7; }
    .promise-list { display: grid; gap: 12px; margin: 0 0 23px; padding: 0; list-style: none; }
    .promise-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; line-height: 1.45; font-weight: 800; }
    .check { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: white; color: var(--mint-dark); font-size: 13px; font-weight: 1000; }
    .button.ink { background: var(--ink); box-shadow: 0 5px 0 #172136; }
    .button.ink:hover { box-shadow: 0 7px 0 #172136; }

    .closing { padding: 74px 0; text-align: center; }
    .closing-burst { margin-bottom: 10px; color: #e5aa3f; font-size: 27px; }
    .closing h2 { max-width: 610px; margin: 0 auto 13px; }
    .closing p { max-width: 490px; margin: 0 auto 23px; color: var(--muted); font-size: 14px; line-height: 1.6; }
    .footer { padding: 30px 0 22px; border-top: 1px solid var(--line); background: #f7f2e8; }
    .footer-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 38px; padding-bottom: 25px; }
    .footer-brand { max-width: 250px; }
    .footer .brand-logo { height: 40px; max-width: 160px; }
    .footer-brand p { margin: 11px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px 24px; max-width: 530px; color: #606d82; font-size: 12px; font-weight: 800; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 15px; padding-top: 17px; border-top: 1px solid var(--line); color: #8a91a0; font-size: 10px; }
    .prototype-note { display: inline-flex; margin-top: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.7); color: #80899a; font-size: 9px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }

    @media (max-width: 980px) {
      :root { --logo-h: min(calc(var(--logo-base) * .78), 60px); --nav-cta-w: 0; }
      .nav { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
      .navlinks { display: none; }
      .nav-actions { min-width: 0; }
      .nav-cta { display: none; }
      .pass-chip { display: none; }
      .mobile-menu { position: relative; display: block; }
    }
    @media (max-width: 900px) {
      .hero-grid { gap: 26px; }
      .category-grid { grid-template-columns: repeat(2, 1fr); }
      .game-grid { grid-template-columns: 1fr; }
      .parent-panel { gap: 25px; padding: 28px; }
    }
    @media (max-width: 680px) {
      :root { --logo-h: calc(var(--logo-base) * .64); }
      .wrap { width: min(100% - 32px, 540px); }
      .nav { gap: 8px; }
      .brand { font-size: 18px; }
      .brand-mark { width: 36px; height: 36px; }
      .mobile-menu summary { width: 38px; height: 38px; }
      .hero { padding: 28px 0 42px; }
      .hero-grid { grid-template-columns: 1fr; gap: 27px; }
      h1 { font-size: clamp(43px, 13vw, 60px); letter-spacing: -2.8px; }
      .hero-copy { font-size: 15px; }
      .hero-art { min-height: 310px; border-radius: 28px; }
      .hero-art::before { width: 290px; height: 290px; top: 34px; }
      .sun { width: 46px; height: 46px; top: 30px; right: 32px; }
      .book { top: 118px; transform: translateX(-50%) rotate(-7deg) scale(.84); }
      .balloon { top: 57px; transform: rotate(-15deg) scale(.84); }
      .pencil { top: 216px; transform: rotate(31deg) scale(.84); }
      .tiny-label { bottom: 16px; }
      .section { padding: 42px 0; }
      .section-head { align-items: flex-start; flex-direction: column; gap: 12px; }
      .section-note { font-size: 13px; }
      .category-grid { gap: 10px; }
      .category { min-height: 86px; gap: 10px; padding: 12px; border-radius: 17px; }
      .cat-icon { flex-basis: 42px; height: 42px; border-radius: 14px; font-size: 22px; }
      .category strong { font-size: 13px; }
      .category small { font-size: 10px; }
      .game-card { grid-template-columns: 112px 1fr; gap: 13px; padding: 11px; border-radius: 19px; }
      .game-cover { min-height: 138px; }
      .cover-balloons::before, .cover-balloons::after { transform: scale(.76) rotate(-12deg); transform-origin: top left; }
      .cover-memory::before { transform: scale(.72); transform-origin: top left; }
      .cover-memory::after { transform: scale(.72) rotate(7deg); transform-origin: bottom right; }
      .game-info h3 { margin: 9px 0 5px; font-size: 16px; }
      .game-info p { margin-bottom: 8px; font-size: 11px; }
      .game-meta { flex-wrap: wrap; gap: 6px; font-size: 10px; }
      .parent-panel { grid-template-columns: 1fr; padding: 18px; border-radius: 25px; }
      .parent-art { min-height: 190px; }
      .parent-art::before { width: 128px; height: 128px; }
      .parent-art::after { top: 33px; font-size: 55px; }
      .parent-copy { padding: 5px 3px 4px; }
      .closing { padding: 54px 0; }
      .footer-main { flex-direction: column; gap: 22px; }
      .footer-links { justify-content: flex-start; gap: 12px 17px; }
      .footer-bottom { flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    }

    .inner-hero { padding: 34px 0 25px; }
    .breadcrumb { display: flex; gap: 9px; margin-bottom: 20px; color: #818a99; font-size: 12px; font-weight: 800; }
    .breadcrumb a:hover { color: var(--coral-dark); }
    .inner-hero h1 { max-width: 800px; margin: 0 0 12px; font-size: clamp(36px, 4.4vw, 52px); letter-spacing: -2.4px; }
    .inner-hero p { max-width: 630px; margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
    .search-row { display: grid; grid-template-columns: 1fr 190px 190px auto; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 19px; background: white; box-shadow: 0 6px 20px rgba(48,55,74,.04); }
    .archive-filters { padding: 18px 0 25px; }
    .contact-panel { display: block; }
    .field, .select-field, .text-area { width: 100%; min-height: 47px; padding: 12px 14px; border: 1px solid #e5e1d8; border-radius: 12px; background: #fffefa; color: var(--ink); }
    .field::placeholder, .text-area::placeholder { color: #9099a6; }
    .search-submit { min-height: 47px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--ink); color: white; font-weight: 900; }
    .search-field { display: flex; align-items: center; gap: 9px; padding-left: 14px; border: 1px solid #e5e1d8; border-radius: 12px; color: #8a94a4; }
    .search-field .field { border: 0; background: transparent; outline-offset: -3px; }
    .page-section { padding: 26px 0 56px; }
    .page-grid { display: grid; grid-template-columns: 245px 1fr; gap: 28px; align-items: start; }
    .side-panel, .white-panel { padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: white; }
    .side-panel h2 { margin-bottom: 15px; font-size: 17px; letter-spacing: -.4px; }
    .side-links { display: grid; gap: 6px; }
    .side-links a { padding: 10px 11px; border-radius: 10px; color: #637087; font-size: 13px; font-weight: 800; }
    .side-links a:hover, .side-links a.current { background: #fff0eb; color: var(--coral-dark); }
    .archive-topline { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
    .archive-topline p { margin: 0; color: var(--muted); font-size: 12px; }
    .sort-select { padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: white; color: #526078; }
    .archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .archive-grid .game-card { grid-template-columns: 145px 1fr; }
    .archive-grid .game-cover { min-height: 145px; }
    .section-title { margin: 0 0 18px; font-size: 24px; letter-spacing: -1px; }
    .content-copy { max-width: 780px; color: #556279; font-size: 15px; line-height: 1.8; }
    .content-copy h2 { margin: 28px 0 11px; color: var(--ink); font-size: 24px; letter-spacing: -.8px; }
    .content-copy h3 { margin: 23px 0 8px; color: var(--ink); font-size: 17px; }
    .content-copy p { margin-bottom: 13px; }
    .content-copy ul { padding-left: 21px; }
    .content-copy li { margin: 7px 0; }
    .notice { margin: 20px 0; padding: 16px 18px; border-left: 4px solid #e5b74f; border-radius: 0 14px 14px 0; background: #fff5d9; color: #75612c; font-size: 13px; line-height: 1.55; }
    .info-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
    .info-nav { position: sticky; top: 18px; }
    .info-block { padding: 25px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 20px; }
    .info-block:first-child { padding-top: 0; }
    .info-block:last-child { border: 0; }
    .info-block h2 { margin-bottom: 10px; font-size: 24px; }
    .game-hero { padding: 18px 0 8px; }
    .game-hero .breadcrumb { margin-bottom: 8px; }
    .game-hero h1 { max-width: none; margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -1px; }
    .page-section.game-page { padding-top: 8px; }
    .game-detail-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .8fr); gap: 23px; align-items: start; }
    .game-stage { display: grid; place-items: center; min-height: 390px; padding: 30px; border-radius: 24px; background: #e8f3f5; text-align: center; }
    .game-screen { position: relative; }
    .game-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 0 0 10px; min-width: 0; }
    .game-bar h1 { max-width: none; margin: 0; min-width: 0; overflow: hidden; color: var(--ink); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -.8px; text-overflow: ellipsis; white-space: nowrap; }
    .game-bar-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
    @media (max-width: 640px) {
      .game-bar { flex-wrap: wrap; }
      .game-bar h1 { flex: 1 1 100%; white-space: normal; }
      .game-bar-tools { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; }
    }
    .game-best { margin: 0; padding: 8px 12px; border: 1px solid #f0dfad; border-radius: 999px; background: #fff5d9; color: #816a32; font-size: 12px; font-weight: 900; white-space: nowrap; }
    .game-best strong { margin-left: 4px; color: var(--ink); font-size: 15px; }
    .game-frame { display: block; width: 100%; height: max(560px, calc(100dvh - var(--header-h) - 150px)); min-height: 0; overflow: hidden; border: 0; border-radius: 24px; background: #fbf8f1; }
    .game-ad { display: none; }
    .game-ad-empty { color: #8a91a0; font-size: 12px; font-weight: 800; text-align: center; }
    .game-full { padding: 8px 12px; border: 0; border-radius: 999px; background: #fffefa; color: var(--ink); font-weight: 900; font-size: 12px; box-shadow: 0 4px 14px rgba(48,55,74,.12); cursor: pointer; }
    .game-screen:fullscreen, .game-screen:-webkit-full-screen, .game-screen.is-max { display: grid; grid-template-columns: minmax(0, 1fr) min(320px, 34vw); grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; background: #f4efe6; }
    .game-screen.is-max { position: fixed; inset: 0; z-index: 80; border-radius: 0; padding: 10px 12px; }
    .game-screen:fullscreen .game-bar, .game-screen:-webkit-full-screen .game-bar, .game-screen.is-max .game-bar { grid-column: 1; margin: 0 0 8px; padding-top: env(safe-area-inset-top); }
    .game-screen:fullscreen .game-frame, .game-screen:-webkit-full-screen .game-frame, .game-screen.is-max .game-frame { grid-column: 1; height: 100% !important; min-height: 0; border-radius: 0; }
    .game-screen:fullscreen .game-ad, .game-screen:-webkit-full-screen .game-ad, .game-screen.is-max .game-ad { display: grid; grid-column: 2; grid-row: 1 / -1; place-items: center; padding: 14px; overflow: auto; background: #efe8d8; border-left: 1px solid var(--line); }
    @media (max-width: 800px) {
      .game-screen:fullscreen, .game-screen:-webkit-full-screen, .game-screen.is-max { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) 112px; }
      .game-screen:fullscreen .game-ad, .game-screen:-webkit-full-screen .game-ad, .game-screen.is-max .game-ad { grid-column: 1; grid-row: 3; border-left: 0; border-top: 1px solid var(--line); }
    }
    .game-screen:not(.has-ad):fullscreen, .game-screen:not(.has-ad):-webkit-full-screen, .game-screen.is-max:not(.has-ad) { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    body.game-max { overflow: hidden; }
    .game-note { margin-top: 22px; }
    .how-list { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
    .how-list li { display: flex; align-items: center; gap: 10px; color: #52627a; font-size: 12px; font-weight: 800; }
    .how-list .num { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 9px; background: #fff1cf; color: #8c6b24; }
    .stage-placeholder { max-width: 320px; }
    .stage-icon { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 15px; border-radius: 25px; background: white; font-size: 36px; box-shadow: var(--shadow); }
    .stage-placeholder h2 { margin-bottom: 8px; font-size: 23px; }
    .stage-placeholder p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
    .detail-side { display: grid; gap: 14px; }
    .detail-side h2 { margin: 10px 0; font-size: 25px; letter-spacing: -.8px; }
    .detail-side .white-panel + .white-panel h2 { margin-top: 0; font-size: 18px; letter-spacing: -.4px; }
    .detail-side p { color: var(--muted); font-size: 13px; line-height: 1.6; }
    .detail-list { display: grid; gap: 10px; margin: 17px 0; padding: 0; list-style: none; }
    .detail-list li { display: flex; justify-content: space-between; gap: 10px; color: #718096; font-size: 12px; }
    .detail-list strong { color: var(--ink); }
    .rating-box { padding: 18px; border-radius: 18px; background: #fff7df; }
    .rating-box h3 { margin-bottom: 8px; font-size: 15px; }
    .rating-choices { display: flex; gap: 8px; }
    .rating-choices button { width: 37px; height: 37px; border: 1px solid #eddba9; border-radius: 12px; background: white; font-size: 20px; }
    .comment-placeholder { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 17px; border: 1px dashed #d9d4ca; border-radius: 16px; color: #778195; font-size: 13px; }
    .comment-placeholder p { margin: 0; }
    .comments { margin-top: 28px; }
    .comment-list { display: grid; gap: 12px; margin-bottom: 22px; }
    .comment-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px 17px; border: 1px solid var(--line); border-radius: 18px; background: white; }
    .comment-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--mint); color: var(--mint-dark); font-size: 18px; font-weight: 900; }
    .comment-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: #8a91a0; font-size: 11px; font-weight: 800; }
    .comment-meta strong { color: var(--ink); font-size: 14px; }
    .comment-card p { margin: 6px 0 0; color: #526078; font-size: 14px; line-height: 1.65; }
    .comment-empty { margin-bottom: 18px; padding: 17px; border: 1px dashed #d9d4ca; border-radius: 16px; color: #778195; font-size: 13px; }
    .comment-empty p { margin: 0; }
    .comment-form { max-width: none; margin-top: 8px; box-shadow: none; }
    .form-help { margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.55; }
    .notice-ok { border-left-color: #3f9f8d; background: #e8f7f3; color: #24685c; }
    .notice-bad { border-left-color: var(--coral-dark); background: #ffece9; color: #8a3a34; }
    .g-recaptcha { margin-top: 16px; }
    .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .parent-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
    .benefit { padding: 20px; border-radius: 18px; background: white; }
    .benefit .cat-icon { margin-bottom: 12px; }
    .benefit h3 { margin-bottom: 7px; font-size: 16px; }
    .benefit p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .form-card { max-width: 580px; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow); }
    .form-card label { display: block; margin: 16px 0 7px; color: #526078; font-size: 12px; font-weight: 900; }
    .form-card .button { margin-top: 18px; cursor: pointer; }
    .form-card .button:disabled { cursor: default; opacity: .55; }
    .text-area { min-height: 120px; resize: vertical; }
    .auth-wrap { display: grid; place-items: center; min-height: 520px; padding: 42px 0; }
    .auth-card { width: min(440px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: 25px; background: white; box-shadow: var(--shadow); }
    .auth-card h1 { margin: 0 0 8px; font-size: 34px; letter-spacing: -1.5px; }
    .auth-card > p { margin-bottom: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
    .auth-help { margin-top: 14px; font-size: 12px; }
    .break-page { padding: 42px 0 64px; max-width: 640px; }
    .break-page h1 { margin: 0 0 12px; font-size: clamp(36px, 5vw, 52px); letter-spacing: -2px; }
    .break-page > p { color: var(--muted); font-size: 15px; line-height: 1.65; }
    .break-card { margin-top: 22px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow); }
    .break-slot { min-height: 180px; margin-bottom: 18px; border-radius: 18px; background: #f6f3ea; overflow: hidden; }
    .break-placeholder { display: grid; place-items: center; gap: 8px; min-height: 180px; padding: 24px; text-align: center; }
    .break-placeholder span { font-size: 42px; }
    .break-placeholder p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
    .break-timer { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
    .break-timer strong { font-size: 42px; letter-spacing: -2px; }
    .break-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .dashboard { display: grid; grid-template-columns: 220px 1fr; min-height: 540px; border: 1px solid var(--line); border-radius: 24px; background: white; overflow: hidden; }
    .dash-nav { padding: 20px; background: #f5f2ea; }
    .dash-nav .brand { margin-bottom: 25px; font-size: 17px; }
    .dash-main { padding: 26px; }
    .dash-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 22px; }
    .dash-head h2 { font-size: 25px; }
    .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
    .stat-card { padding: 16px; border: 1px solid var(--line); border-radius: 15px; }
    .stat-card span { display: block; color: var(--muted); font-size: 11px; }
    .stat-card strong { display: block; margin-top: 6px; font-size: 23px; }
    .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; }
    table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
    th, td { padding: 13px 14px; border-bottom: 1px solid #f0ece4; font-size: 12px; }
    th { background: #faf8f2; color: #788396; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; }
    tr:last-child td { border-bottom: 0; }
    .status-draft { color: #997521; }
    .status-published { color: #3f9f8d; }
    .admin-only-note { margin-top: 15px; color: #8a91a0; font-size: 11px; }
    @media (max-width: 900px) {
      .page-grid { grid-template-columns: 1fr; }
      .side-panel { display: none; }
      .info-layout { grid-template-columns: 1fr; }
      .info-nav { position: static; }
      .game-detail-grid { grid-template-columns: 1fr; }
      .dashboard { grid-template-columns: 1fr; }
      .dash-nav { display: none; }
    }
    @media (max-width: 680px) {
      .search-row { grid-template-columns: 1fr; }
      .search-submit { min-height: 45px; }
      .archive-grid { grid-template-columns: 1fr; }
      .archive-grid .game-card { grid-template-columns: 112px 1fr; }
      .archive-grid .game-cover { min-height: 138px; }
      .parent-benefits { grid-template-columns: 1fr; }
      .game-stage { min-height: 290px; }
      .game-frame { height: max(420px, calc(100dvh - var(--header-h) - 148px)); }
      .comment-placeholder { align-items: flex-start; flex-direction: column; }
      .comment-card { grid-template-columns: 40px minmax(0, 1fr); }
      .form-card { padding: 20px; }
      .auth-card { padding: 22px; }
      .dash-main { padding: 17px; }
      .stat-row { grid-template-columns: 1fr; }
    }

    /* Shared narrow-screen layout safeguards and spacing. */
    @media (max-width: 900px) {
      .page-grid,
      .info-layout,
      .game-detail-grid,
      .dashboard { min-width: 0; }
      .game-detail-grid { grid-template-columns: minmax(0, 1fr); }
      .page-grid > *,
      .info-layout > *,
      .game-detail-grid > *,
      .dashboard > * { min-width: 0; }
      .game-screen, .game-bar, .game-frame, .comments { min-width: 0; }
      .archive-grid { grid-template-columns: minmax(0, 1fr); }
      .archive-grid .game-card { grid-template-columns: minmax(112px, 30%) minmax(0, 1fr); }
    }
    @media (max-width: 680px) {
      html { scrollbar-gutter: auto; }
      .wrap { width: calc(100% - 32px); }
      .hero-grid > *, .section-head > *, .category-grid > *, .game-grid > *,
      .parent-panel > *, .footer-main > *, .footer-bottom > * { min-width: 0; }
      .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .topbar, .nav { min-height: 64px; height: auto; }
      .nav { padding-block: 8px; }
      .brand { max-width: calc(100vw - 96px); overflow: hidden; }
      .brand-logo { max-width: min(190px, calc(100vw - 112px)); }
      .inner-hero { padding: 25px 0 18px; }
      .inner-hero h1 { font-size: clamp(32px, 9vw, 44px); letter-spacing: -1.8px; overflow-wrap: anywhere; }
      .inner-hero p, .content-copy, .white-panel, .form-card { overflow-wrap: anywhere; }
      .breadcrumb { flex-wrap: wrap; row-gap: 6px; line-height: 1.45; }
      .search-row { min-width: 0; padding: 12px; }
      .search-row > *, .search-field { min-width: 0; }
      .archive-topline { align-items: flex-start; flex-direction: column; }
      .archive-topline form, .archive-topline form label { width: 100%; }
      .archive-topline form label { display: flex; gap: 8px; }
      .archive-topline .button { flex: 0 0 auto; }
      .archive-grid .game-card,
      .game-card { grid-template-columns: minmax(0, 112px) minmax(0, 1fr); min-width: 0; }
      .game-info, .game-info h3, .game-info p { min-width: 0; overflow-wrap: anywhere; }
      .parent-panel, .parent-copy, .parent-benefits > *, .category-grid > * { min-width: 0; }
      .category { overflow-wrap: anywhere; }
      .game-detail-grid, .game-page, .game-screen, .comments, .detail-side { min-width: 0; }
      .game-frame { max-width: 100%; border-radius: 16px; }
      .game-bar-tools { min-width: 0; }
      .game-full { min-height: 42px; }
      .white-panel, .form-card, .comment-card { padding: 16px; }
      .g-recaptcha { max-width: 100%; overflow: hidden; }
      .footer-links, .footer-bottom { min-width: 0; overflow-wrap: anywhere; }
    }
    @media (max-width: 380px) {
      .wrap { width: calc(100% - 24px); }
      .game-card, .archive-grid .game-card { grid-template-columns: minmax(88px, 30%) minmax(0, 1fr); gap: 10px; padding: 9px; }
      .game-cover, .archive-grid .game-cover { min-height: 120px; }
      .game-info h3 { font-size: 15px; }
      .category { gap: 7px; padding: 9px; }
      .cat-icon { flex-basis: 36px; height: 36px; }
      .hero-actions { gap: 10px; }
      .hero-actions .button { padding-inline: 13px; }
    }


    /* Çerez tercihi şeridi */
    .consent { position: fixed; inset: auto 0 0 0; z-index: 60; padding: 0 16px 16px; pointer-events: none; }
    .consent[hidden] { display: none; }
    .consent-box { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 16px; max-width: 940px; margin: 0 auto; padding: 16px 18px 16px 16px; border: 2px solid #ffd47a; border-radius: 22px; background: linear-gradient(120deg, #fff8e3 0%, #fff1f0 55%, #eef9f4 100%); box-shadow: 0 18px 44px rgba(37, 50, 75, .16), 0 6px 0 #ffd47a; animation: consent-in .55s cubic-bezier(.3, 1.4, .5, 1) both; }
    @keyframes consent-in { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }
    .consent-icon { display: grid; place-items: center; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 18px; background: white; font-size: 32px; box-shadow: 0 4px 0 #f1dfb4; animation: consent-wiggle 2.4s ease-in-out .8s 2; }
    @keyframes consent-wiggle { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-14deg); } 20% { transform: rotate(12deg); } 30% { transform: rotate(-6deg); } 40% { transform: rotate(0); } }
    .consent-text { margin: 0; color: #4a5568; font-size: 13.5px; line-height: 1.5; }
    .consent-text strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 15px; }
    .consent-text a { color: var(--coral-dark); font-weight: 900; text-decoration: underline; }
    .consent-actions { display: flex; flex: 0 0 auto; gap: 10px; }
    .consent-actions .button.secondary { background: white; color: var(--ink); border: 2px solid #25324b; box-shadow: 0 4px 0 #25324b; }
    .consent-actions .button { min-height: 44px; padding: 10px 18px; white-space: nowrap; cursor: pointer; }
    @media (prefers-reduced-motion: reduce) { .consent-box, .consent-icon { animation: none; } }
    @media (max-width: 680px) {
      .consent { padding: 0 10px 10px; }
      .consent-box { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
      .consent-icon { display: none; }
      .consent-actions .button { flex: 1; justify-content: center; }
    }

    /* Puan yıldızları */
    .rating { display: inline-flex; align-items: center; gap: 5px; }
    .stars { display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 1px; background: linear-gradient(90deg, #f5b301 var(--fill, 0%), #dcd6c8 var(--fill, 0%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .stars::before { content: "★★★★★"; }
    .rating-value { color: #5d6a7e; font-size: 11px; font-weight: 900; }
    .rating-value small { color: #8a91a0; font-size: 10px; font-weight: 800; }
    .detail-list .stars { font-size: 15px; }
    .rating-box { margin-top: 14px; }
    .rating-choices button { cursor: pointer; color: #d6cfbf; transition: transform .12s ease, color .12s ease; }
    .rating-choices button.on { color: #f5b301; border-color: #f2cf6b; }
    .rating-choices button:hover { transform: translateY(-2px); }
    .rating-box.busy { opacity: .6; pointer-events: none; }
    .rating-note { margin: 10px 0 0; color: #6d7789; font-size: 12px; }

    /* Maskotlar ve ana sayfa sahnesi */
    .hero-art.has-scene { background: #e3f3fb; }
    .hero-art.has-scene::before, .hero-art.has-scene::after { display: none; }
    .hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
    .scene-bubble { top: 26px; left: 26px; right: auto; bottom: auto; transform: rotate(-3deg); }
    .mascot { overflow: visible; }
    .mascot .m-eyes { transform-origin: 60px 60px; animation: m-blink 5.5s infinite; }
    .mascot-bilge .m-eyes { animation-delay: 1.7s; } .mascot-pofuduk .m-eyes { animation-delay: 3.1s; }
    .hs-m { animation: m-bob 3s ease-in-out infinite; }
    .hs-m.m2 { animation-duration: 2.2s; animation-name: m-hop; } .hs-m.m3 { animation-delay: -1.2s; }
    .hs-float { animation: m-bob 4s ease-in-out infinite; } .hs-float.f2 { animation-delay: -1.5s; animation-duration: 5s; } .hs-float.f3 { animation-delay: -2.5s; }
    .hs-cloud { animation: m-drift 14s ease-in-out infinite alternate; } .hs-cloud.b { animation-duration: 18s; animation-direction: alternate-reverse; }
    .hs-twinkle { animation: m-twinkle 2.6s ease-in-out infinite; }
    .waving .m-wave, .hs-m.m2 .m-wave { transform-box: fill-box; transform-origin: 80% 100%; animation: m-wave 1.6s ease-in-out infinite; }
    .head-with-mascot { display: flex; align-items: flex-end; gap: 12px; }
    .head-with-mascot .peek { flex: 0 0 auto; margin-bottom: 4px; animation: m-bob 3s ease-in-out infinite; }
    .parent-art.has-mascot { display: grid; place-items: center; }
    .parent-art.has-mascot::before { top: 22px; }
    .parent-art.has-mascot::after { display: none; }
    .parent-mascot { position: relative; z-index: 1; margin-bottom: 38px; animation: m-bob 3.4s ease-in-out infinite; }
    .parent-heart { position: absolute; z-index: 2; top: 26px; right: calc(50% - 98px); color: var(--coral); font-size: 40px; animation: m-beat 1.4s ease-in-out infinite; }
    .parent-note { z-index: 3; }
    .closing-cast { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin-bottom: 14px; }
    .closing-cast .mascot:nth-child(2) { animation: m-hop 2.2s ease-in-out infinite; }
    @keyframes m-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
    @keyframes m-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
    @keyframes m-hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-16px); } }
    @keyframes m-drift { from { transform: translateX(-12px); } to { transform: translateX(14px); } }
    @keyframes m-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
    @keyframes m-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-22deg); } }
    @keyframes m-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
    @media (max-width: 680px) { .head-with-mascot .peek { width: 46px; height: 46px; } .parent-mascot { width: 120px; height: 120px; } .parent-heart { right: calc(50% - 80px); font-size: 32px; } }
    @media (prefers-reduced-motion: reduce) { .mascot *, .hs-m, .hs-float, .hs-cloud, .hs-twinkle, .peek, .parent-mascot, .parent-heart, .closing-cast .mascot { animation: none !important; } }

    /* Oyun sonu puan penceresi */
    .rate-pop { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(37, 50, 75, .28); opacity: 0; transition: opacity .25s ease; }
    .rate-pop.show { opacity: 1; }
    .rate-card { width: min(100%, 360px); padding: 18px 20px 16px; border-radius: 26px; background: var(--white); box-shadow: 0 18px 40px rgba(37, 50, 75, .25); text-align: center; transform: translateY(14px) scale(.96); transition: transform .3s cubic-bezier(.2,.9,.3,1.2); }
    .rate-pop.show .rate-card { transform: none; }
    .rate-mascot { display: block; margin: -58px auto 2px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.12)); }
    .rate-pop.thanks .rate-mascot { animation: m-hop .9s ease-in-out 2; }
    .rate-card h3 { margin: 0 0 4px; font-size: 21px; }
    .rate-pop-note { margin: 0 0 10px; color: var(--muted); font-size: 13px; font-weight: 800; }
    .rate-pop-stars { display: flex; justify-content: center; gap: 4px; }
    .rate-pop-stars button { width: 52px; height: 52px; padding: 0; border: 0; background: none; color: #ddd5c4; font-size: 44px; line-height: 1; cursor: pointer; transition: transform .12s ease, color .12s ease; }
    .rate-pop-stars button.on { color: #f5b301; }
    .rate-pop-stars button:hover { transform: scale(1.15); }
    .rate-pop.busy .rate-pop-stars { opacity: .6; pointer-events: none; }
    .rate-pop.thanks .rate-pop-stars, .rate-pop.thanks .rate-later { visibility: hidden; }
    .rate-later { margin-top: 6px; padding: 6px 10px; border: 0; background: none; color: #8a91a0; font-size: 12px; font-weight: 900; cursor: pointer; text-decoration: underline; }
    @media (max-width: 420px) { .rate-pop-stars button { width: 44px; height: 46px; font-size: 38px; } }
    .rate-card:focus { outline: none; }

    .rate-pop[hidden] { display: none !important; }

    /* Yorum penceresi */
    .comment-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
    .comment-open { cursor: pointer; }
    .comment-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 26px; background: transparent; overflow: auto; }
    .comment-dialog::backdrop { background: rgba(37, 50, 75, .45); }
    .comment-dialog .comment-form { position: relative; margin: 0; }
    .dialog-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 1px solid #e3ddd0; border-radius: 50%; background: white; font-size: 16px; font-weight: 900; cursor: pointer; }
    .comment-dialog .g-recaptcha { margin-top: 12px; }

    /* Oyun sonu kutlaması */
    .celebrate { position: absolute; inset: 0; z-index: 15; overflow: hidden; pointer-events: none; }
    .celebrate i { position: absolute; top: -40px; font-style: normal; line-height: 1; animation: celebrate-fall 2s ease-in forwards; }
    @keyframes celebrate-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--drift, 0), 110vh) rotate(540deg); opacity: 0; } }
    .celebrate.mini i { top: 18%; animation: celebrate-sparkle 1.1s ease-out forwards; }
    @keyframes celebrate-sparkle { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: 1; transform: translate(0, -10px) scale(1); } 100% { transform: translate(var(--drift, 0), 120px) scale(.6) rotate(200deg); opacity: 0; } }

    /* Ana sayfa öne çıkanlar */
    .picks { padding-top: 8px; }
    .picks .section-head.compact { margin-bottom: 16px; }
    .picks .section-head.compact h2 { font-size: clamp(24px, 3vw, 32px); }
    .pick-block { margin-top: 38px; }
    .featured-card { position: relative; display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 26px; align-items: center; padding: 20px; border: 1px solid #f0dfad; border-radius: 30px; background: linear-gradient(135deg, #fff7e0 0%, #fffdf7 60%); box-shadow: var(--shadow); transition: transform .18s ease; }
    .featured-card:hover { transform: translateY(-3px); }
    .featured-card .game-cover { min-height: 210px; border-radius: 22px; }
    .featured-badge { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: var(--yellow); color: #6f5414; font-size: 12px; font-weight: 1000; }
    .featured-copy h2 { margin: 12px 0 8px; font-size: clamp(28px, 4vw, 40px); }
    .featured-copy p { max-width: 520px; margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.6; }
    .featured-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; color: #69768b; font-size: 12px; font-weight: 800; }
    .featured-mascot { position: absolute; right: 18px; bottom: -14px; }
    @media (max-width: 680px) { .featured-card { grid-template-columns: 1fr; padding: 14px; } .featured-card .game-cover { min-height: 170px; } .featured-mascot { width: 70px; height: 70px; right: 10px; bottom: -10px; } }

    /* Zengin footer */
    .footer.footer-rich { padding: 0; border-top: 0; background: transparent; margin-top: 30px; }
    .footer-wave { position: relative; height: 90px; color: #e6f3ee; }
    .footer-wave > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
    .footer-cast { position: absolute; left: 50%; bottom: 34px; display: flex; align-items: flex-end; gap: 4px; transform: translateX(-50%); }
    .footer-cast .mascot:nth-child(2) { animation: m-hop 2.4s ease-in-out infinite; }
    .footer-body { padding: 14px 0 22px; background: #e6f3ee; }
    .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 30px; padding-bottom: 26px; }
    .footer-rich .footer-brand { max-width: 320px; }
    .footer-rich .footer-brand p { margin: 12px 0 14px; color: #55657b; font-size: 13px; line-height: 1.6; }
    .footer-promises { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
    .footer-promises li { display: inline-flex; width: fit-content; padding: 6px 11px; border-radius: 999px; background: white; color: #3c4c63; font-size: 12px; font-weight: 900; box-shadow: 0 2px 0 rgba(63, 159, 141, .12); }
    .footer-col { display: flex; flex-direction: column; gap: 9px; }
    .footer-col h2 { margin: 4px 0 4px; color: var(--ink); font-size: 14px; font-weight: 1000; letter-spacing: .2px; }
    .footer-col .footer-sub { margin-top: 12px; }
    .footer-col a { width: fit-content; color: #55657b; font-size: 13px; font-weight: 800; }
    .footer-col a:hover { color: var(--coral-dark); }
    .footer-rich .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 16px; border-top: 1px solid #cfe5dc; color: #6f7f92; font-size: 12px; }
    @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-rich .footer-brand { grid-column: 1 / -1; max-width: none; } }
    @media (max-width: 520px) { .footer-grid { gap: 22px 16px; } .footer-cast .mascot { width: 48px; height: 48px; } .footer-cast .mascot:nth-child(2) { width: 56px; height: 56px; } .footer-wave { height: 70px; } .footer-cast { bottom: 26px; } }

    /* Yazdırılabilir etkinlikler */
    .printable-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .printable-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow); transition: transform .18s ease; }
    .printable-card:hover { transform: translateY(-3px); }
    .printable-emoji { font-size: 44px; }
    .printable-card h2 { margin: 0; font-size: 21px; }
    .printable-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; flex: 1; }
    .printable-why { margin-top: 22px; }
    .print-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin-bottom: 22px; }
    .print-tools label { display: grid; gap: 6px; font-size: 12px; font-weight: 900; color: #55657b; }
    .print-tools .select-field { min-width: 130px; }
    .print-check { display: flex !important; align-items: center; gap: 8px !important; min-height: 47px; }
    .print-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
    .print-actions .button { cursor: pointer; }
    .print-tools .form-help { flex-basis: 100%; margin: 0; }
    .printable-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
    .printable-info h2 { margin: 0 0 10px; font-size: 17px; }
    .sheets { display: grid; gap: 22px; justify-items: center; }
    .sheet { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 794px; aspect-ratio: 210 / 297; padding: 34px 40px 24px; border: 1px solid #ddd6c8; border-radius: 6px; background: white; color: #000; box-shadow: 0 10px 26px rgba(48, 55, 74, .08); overflow: hidden; }
    .sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid #000; }
    .sheet-brand { display: flex; align-items: center; gap: 6px; font-size: 16px; }
    .sheet-lines { display: flex; gap: 18px; font-size: 13px; font-weight: 700; }
    .sheet-title { margin: 14px 0 4px; font-size: 24px; text-align: center; }
    .sheet-note { margin: 0 0 12px; text-align: center; font-size: 13px; }
    .sheet-body { flex: 1; display: grid; gap: 14px; align-content: center; justify-items: center; min-height: 0; }
    .sheet-body.grid-1 { grid-template-columns: 1fr; }
    .sheet-body.grid-2 { grid-template-columns: 1fr 1fr; }
    .sheet-body.grid-2v { grid-template-rows: 1fr 1fr; }
    .sheet-body.grid-key { grid-template-columns: 1fr 1fr; align-content: start; }
    .sheet-body .cell { position: relative; display: grid; justify-items: center; align-content: center; gap: 10px; width: 100%; min-height: 0; }
    .maze-svg { width: 100%; max-height: 100%; }
    .grid-1 .maze-svg { max-width: 600px; } .grid-2v .maze-svg { max-height: 330px; width: auto; }
    .grid-key .maze-svg { max-height: 230px; width: auto; }
    .sd-print { border-collapse: collapse; border: 3px solid #000; }
    .sd-print td { width: 38px; height: 38px; border: 1px solid #555; text-align: center; vertical-align: middle; font-size: 22px; font-weight: 700; }
    .sd-print.n4 td { width: 46px; height: 46px; font-size: 24px; } .sd-print.n9 td { width: 40px; height: 40px; font-size: 20px; }
    .sd-print td.bl { border-left: 3px solid #000; } .sd-print td.bt { border-top: 3px solid #000; }
    .sd-print td.ans { color: #555; font-style: italic; font-weight: 400; }
    .grid-key .sd-print td { width: 24px; height: 24px; font-size: 14px; }
    .ws-print { border-collapse: collapse; border: 2px solid #000; }
    .ws-print td { width: 38px; height: 38px; border: 1px solid #bbb; text-align: center; font-size: 21px; font-weight: 700; }
    .ws-print.n13 td { width: 34px; height: 34px; font-size: 19px; }
    .ws-print td.hit { background: #ddd; outline: 2px solid #000; outline-offset: -2px; }
    .grid-key .ws-print td { width: 18px; height: 18px; font-size: 11px; }
    .ws-key { display: grid; gap: 4px; justify-items: center; font-size: 13px; }
    .ws-words { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 26px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 17px; font-weight: 700; }
    .key-no { position: absolute; top: 0; left: 4px; font-size: 12px; font-weight: 900; }
    .sheet-foot { padding-top: 8px; border-top: 1px solid #000; text-align: center; font-size: 11px; }
    @media (max-width: 900px) { .printable-cards, .printable-info { grid-template-columns: 1fr; } .print-actions { margin-left: 0; } }
    @media (max-width: 680px) { .sheet { padding: 14px 12px 10px; } .sheet-lines { display: none; } .sd-print td, .ws-print td { width: 26px; height: 26px; font-size: 15px; } .sd-print.n4 td { width: 34px; height: 34px; } .sheet-title { font-size: 18px; } }
    @media print {
      @page { size: A4; margin: 10mm; }
      body { background: white !important; }
      .topbar, .footer, .print-hide, .consent, .skip, header.topbar { display: none !important; }
      main, .page-section, .wrap { margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; }
      .sheets { display: block; }
      .sheet { width: 190mm; height: 277mm; max-width: none; aspect-ratio: auto; margin: 0; padding: 4mm 6mm; border: 0; border-radius: 0; box-shadow: none; break-after: page; page-break-after: always; }
      .sheet:last-child { break-after: auto; page-break-after: auto; }
      .sd-print td, .ws-print td { width: 11mm; height: 11mm; }
      .sd-print.n9 td { width: 10mm; height: 10mm; } .sd-print.n4 td { width: 13mm; height: 13mm; }
      .ws-print.n13 td { width: 9.5mm; height: 9.5mm; }
      .grid-key .sd-print td { width: 6mm; height: 6mm; font-size: 11px; } .grid-key .ws-print td { width: 5mm; height: 5mm; font-size: 9px; }
      .mascot * { animation: none !important; }
    }
    .print-link { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; margin-top: 14px; font-size: 15px; } .print-link > span { grid-row: span 2; font-size: 28px; } .print-link small { color: var(--muted); font-size: 12px; } .print-link:hover strong { color: var(--coral-dark); }

/* Ebeveyn rehberi */
.parent-guide { margin-top: 28px; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: white; }
.parent-guide .section-title { margin-top: 0; }
.parent-guide h3 { margin: 26px 0 12px; font-size: 19px; letter-spacing: -.3px; }
.parent-guide p { line-height: 1.7; }
.pg-intro { font-size: 17px; }
.pg-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pg-skills > div { padding: 14px 16px; border-radius: 16px; background: #fbf7ef; }
.pg-skills strong { display: block; margin-bottom: 4px; }
.pg-skills p { margin: 0; font-size: 15px; }
.pg-ages { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0; }
.pg-ages dt { font-weight: 800; padding: 4px 12px; border-radius: 999px; background: #ffe7e2; height: max-content; white-space: nowrap; }
.pg-ages dd { margin: 0; line-height: 1.65; }
.pg-offline { padding-left: 20px; line-height: 1.7; }
.pg-offline li { margin-bottom: 6px; }
.pg-faq details { border-top: 1px solid var(--line); padding: 12px 0; }
.pg-faq summary { cursor: pointer; font-weight: 800; }
.pg-faq details p { margin: 8px 0 0; }
@media (max-width: 720px) {
  .parent-guide { padding: 18px; }
  .pg-skills { grid-template-columns: 1fr; }
  .pg-ages { grid-template-columns: 1fr; }
}

/* Çarpım çalışma kâğıdı */
.mul-list { box-sizing: border-box; width: 100%; max-width: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; margin: 4px 0 0; padding-left: 26px; font-size: 21px; font-weight: 700; }
.mul-list li { padding: 9px 0; border-bottom: 1px dashed #d9d4c8; }
.mul-list li::marker { color: #9a9a9a; font-size: 12px; }
.mul-blank { display: inline-block; width: 48px; height: 1.1em; border-bottom: 2px solid #222; vertical-align: -3px; }
.sheet-body.grid-mul { display: block; align-content: start; padding-top: 4mm; } .sheet-body.grid-mul > .cell { display: block; align-content: start; width: 100%; } .mul-key { justify-self: stretch; width: 100%; }
.mul-list.small { grid-template-columns: repeat(2, 1fr); font-size: 12px; gap: 0 12px; padding-left: 22px; } .mul-list.small li { padding: 2px 0; }
.mul-key strong { display: block; margin-bottom: 4px; font-size: 13px; }
@media print { .mul-list { font-size: 15pt; } .mul-list li { padding: 4.4mm 0; } .mul-list.small { font-size: 8pt; } .mul-list.small li { padding: .6mm 0; } }

/* Bunu da dene */
.related-games { margin-top: 28px; }
.related-games .section-head { margin-bottom: 14px; }
.rate-next { display: grid; gap: 2px; margin: 14px auto 0; padding: 12px 18px; border-radius: 16px; background: var(--coral); box-shadow: 0 4px 0 #e75e56; color: white; text-align: center; text-decoration: none; max-width: 280px; }
.rate-next small { font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; opacity: .9; }
.rate-next strong { font-size: 17px; }
.rate-next:hover { filter: brightness(1.04); color: white; }
.rate-pop.thanks .rate-later { visibility: visible; }
.rate-pop-stars[hidden] { display: none; }
.related-games .game-grid { gap: 12px; }
.related-games .game-card { grid-template-columns: 118px 1fr; gap: 14px; padding: 12px; align-items: center; }
.related-games .game-cover { zoom: .62; }
.related-games .game-info h3 { margin: 8px 0 4px; font-size: 17px; }
.related-games .game-info p { margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Yazdırılabilir fark bulma: siyah-beyaz çizgi resim */
.fark-svg { display: block; width: 100%; max-width: 540px; height: auto; aspect-ratio: 4 / 3; }
.fark-svg * { fill: #fff; stroke: #1d1d1d; stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.fark-svg .no { fill: none; } .fark-svg .dk { fill: #1d1d1d; } .fark-svg .fark-frame { stroke-width: 2.4px; }
.fark-svg .fark-mark { fill: none; stroke: #e53935; stroke-width: 3px; }
.fark-svg text { fill: #1d1d1d; stroke: none; font: 900 15px sans-serif; }
.fark-count { display: block; margin-top: 4px; font-size: 18px; letter-spacing: 4px; }
.grid-key .fark-svg { max-width: 320px; }
@media (max-width: 680px) { .grid-2v .fark-svg { max-width: 64%; } .fark-count { font-size: 14px; } }
@media print { .grid-2v .fark-svg { width: 146mm; max-width: none; } .grid-key .fark-svg { width: 86mm; max-width: none; } }