.mobile-tabbar,.mobile-utility-shell{display:none}

html.gou-loading body{overflow:hidden}
html.gou-loading body>*{visibility:hidden}
html.gou-loading body::before{content:attr(data-loading-title);position:fixed;z-index:2000;inset:0;display:grid;place-items:center;align-content:center;gap:14px;visibility:visible;background:#f7f9fd;color:#1f2b45;font:800 19px/1.4 system-ui,sans-serif;text-align:center;padding:0 28px}html.gou-loading body::after{content:attr(data-loading-note);position:fixed;z-index:2001;inset:auto 0 0;padding:0 28px 16vh;visibility:visible;color:#5c6b85;font:500 14px/1.5 system-ui,sans-serif;text-align:center}

@media(max-width:768px){
  html{scroll-padding-bottom:88px}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom));overflow-x:hidden}
  .site-header{position:sticky;top:0;grid-template-columns:minmax(0,1fr) auto;padding:10px 14px;min-height:64px}
  .site-header nav{display:none}
  .brand{min-width:0}.brand strong{font-size:14px}.brand small{font-size:13px}
  .data-date{display:none}
  .mobile-tabbar{position:fixed;z-index:900;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));left:10px;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:6px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(13,24,48,.96);box-shadow:0 18px 50px rgba(10,25,58,.34);backdrop-filter:blur(18px)}
  .mobile-tabbar a,.mobile-tabbar .tab-more{display:flex;min-width:0;min-height:50px;align-items:center;justify-content:center;flex-direction:column;gap:2px;border-radius:16px;color:#c7d1e6;text-decoration:none;font-size:13px;font-weight:800}
  .mobile-tabbar a:active,.mobile-tabbar a:focus-visible,.mobile-tabbar .tab-more:focus-visible,.mobile-tabbar .tab-more[aria-expanded="true"]{background:#4055e8;color:#fff;outline:none}.mobile-tabbar .tab-more{border:0;background:none;font-family:inherit;cursor:pointer}
  .mobile-tabbar b{font-size:19px;line-height:1}.mobile-tabbar a span,.mobile-tabbar .tab-more span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-utility-shell{position:fixed;z-index:950;top:calc(70px + env(safe-area-inset-top));right:10px;display:block;max-width:min(360px,calc(100vw - 20px))}
  .mobile-status{width:max-content;margin-left:auto;padding:6px 10px;border:1px solid #d4dff1;border-radius:999px;background:rgba(255,255,255,.94);color:#54627d;font-size:13px;font-weight:800;box-shadow:0 8px 24px rgba(37,57,92,.12)}
  .install-card{position:relative;margin-top:8px;padding:14px 44px 14px 15px;border:1px solid #cad6ed;border-radius:18px;background:#fff;box-shadow:0 18px 44px rgba(26,48,91,.2)}
  .install-card>div{display:flex;flex-direction:column;gap:3px}.install-card strong{font-size:14px}.install-card span{color:#5a6883;font-size:13px;line-height:1.45}
  .install-action{margin-top:10px;padding:9px 14px;border:0;border-radius:12px;background:#4055e8;color:#fff;font-weight:800}
  .install-dismiss{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;border-radius:50%;background:#eef2fa;color:#3d4d6b;font-size:20px}
  .mobile-sheet{position:fixed;z-index:960;inset:0;display:flex;align-items:flex-end;background:rgba(11,20,40,.5)}
  .mobile-sheet[hidden]{display:none}
  .mobile-sheet-panel{width:100%;max-height:82dvh;overflow:auto;padding:16px 14px calc(20px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:#fff}
  .mobile-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .mobile-sheet-head strong{font-size:17px;color:#1f2b45}
  .mobile-sheet-close{width:40px;height:40px;border:0;border-radius:50%;background:#eef2fa;color:#3d4d6b;font-size:22px}
  .mobile-sheet-links{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .mobile-sheet-links a{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 13px;border:1px solid #dfe6f2;border-radius:14px;background:#f8fafd;color:#22304a;text-decoration:none;font-size:15px;font-weight:800}
  .mobile-sheet-links a b{font-size:17px;color:#4055e8}
  .mobile-sheet-links a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero,.parent-hero{min-height:auto;padding-top:56px;padding-bottom:44px}
  .hero-grid,.parent-hero-grid{gap:28px}
  .hero h1,.parent-hero h1{font-size:clamp(38px,11vw,62px);line-height:.98}
  .hero-actions,.button-row{align-items:stretch}.hero-actions a,.button-row button{justify-content:center}
  .panel,.family-game-card,.profile-card{border-radius:20px}
  .modal{border-radius:24px 24px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .toast{right:12px;bottom:calc(88px + env(safe-area-inset-bottom));left:12px;text-align:center}
}

@media(min-width:769px){.mobile-tabbar,.mobile-utility-shell,.mobile-sheet{display:none!important}}

@media(prefers-reduced-motion:reduce){.mobile-tabbar,.install-card{scroll-behavior:auto}}

/* The mobile chrome (tab bar 900, utility shell 950, sheet 960) used to paint
   over .modal-backdrop (100), which left the onboarding "Continue" button and
   every other modal footer control untappable on a phone. Modals now win, and
   the chrome is taken out of the way while one is open. */
.modal-backdrop{z-index:1000}
body.modal-open .mobile-tabbar,
body.modal-open .mobile-utility-shell{display:none!important}
@media(max-width:768px){
  /* The modal is styled as a bottom sheet, so anchor it to the bottom instead
     of centring it; centring cut the footer off on short viewports. */
  .modal-backdrop{align-items:end;justify-items:stretch;padding:0}
  .modal{width:100%;max-height:92dvh}
}

/* Telefonda balon ekranın dışına taşmasın. */
@media(max-width:768px){
  .help-bubble{left:auto;right:0;width:min(280px,86vw)}
  .mobile-tabbar a.is-active{color:#5367ff}
}

/* Telefonda giriş bölümü iki sütundan tek sütuna dönünce dört sayı kartı alt
   alta diziliyor ve tam bir ekran kaplıyor. Aynı dört sayı Aile bölümünün
   üstünde zaten var; telefonda burada tekrarlamanın maliyeti faydasından
   büyük. Masaüstünde iki sütun yan yana durduğu için orada kalıyor. */
@media(max-width:768px){
  .hero{padding:28px 20px 26px;gap:20px}
  .hero .stats{display:none}
  .hero h1{font-size:30px;line-height:1.08;margin-top:12px}
  .hero p{font-size:15.5px;line-height:1.55;margin-top:12px}
  .hero .hero-actions{margin-top:18px}
}