/* Sky Ai Inc — premium navigation, messaging and motion layer. */
:root {
  --sky-ease-out: cubic-bezier(.16, 1, .3, 1);
  --sky-ease-smooth: cubic-bezier(.4, 0, .2, 1);
  --sky-cyan: #68ddff;
  --sky-blue: #3199ff;
  --sky-violet: #8f7cff;
  --sky-panel: rgba(7, 16, 30, .88);
  --sky-edge: rgba(153, 218, 255, .17);
}

.sky-icon { width:1.35em; height:1.35em; display:block; flex:0 0 auto; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* General navigation motion. */
@keyframes sky-view-enter {
  from { opacity:0; transform:translate3d(0, 15px, 0) scale(.992); filter:blur(3px); }
  to { opacity:1; transform:none; filter:none; }
}
@keyframes sky-panel-enter {
  from { opacity:0; transform:translate3d(20px, 0, 0); }
  to { opacity:1; transform:none; }
}
@keyframes sky-message-enter {
  from { opacity:0; transform:translate3d(0, 12px, 0) scale(.97); }
  to { opacity:1; transform:none; }
}
@keyframes sky-menu-item-in {
  from { opacity:0; transform:translate3d(0, 16px, 0) scale(.96); }
  to { opacity:1; transform:none; }
}
@keyframes sky-ring {
  0%, 100% { box-shadow:0 0 0 0 rgba(92, 221, 255, .08), 0 0 24px rgba(48, 190, 255, .08); }
  50% { box-shadow:0 0 0 7px rgba(92, 221, 255, 0), 0 0 34px rgba(48, 190, 255, .18); }
}

.view.is-active { animation:sky-view-enter .48s var(--sky-ease-out) both; }
.social-panel.is-active { animation:sky-panel-enter .42s var(--sky-ease-out) both; }
.section-head h2, .topbar h1 { transition:transform .35s var(--sky-ease-out), opacity .35s ease; }

::view-transition-old(root) { animation:.2s var(--sky-ease-smooth) both fade-out; }
::view-transition-new(root) { animation:.42s var(--sky-ease-out) both sky-view-enter; }
@keyframes fade-out { to { opacity:0; transform:translate3d(-10px, 0, 0) scale(.995); } }

/* More deliberate sidebar icon treatment on wide screens. */
.tabs .tab { transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--sky-ease-out), box-shadow .25s ease; }
.tabs .tab:hover { transform:translateX(3px); }
.tabs .nav-icon:not(.game-fn):not(.game-ap):not(.game-r6) {
  display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(145, 218, 255, .14);
  border-radius:12px; color:#9adfff; background:linear-gradient(145deg, rgba(71, 175, 242, .13), rgba(106, 91, 209, .08));
}
.tabs .tab.is-active .nav-icon:not(.game-fn):not(.game-ap):not(.game-r6) {
  color:#ecfbff; border-color:rgba(105, 223, 255, .36); background:linear-gradient(145deg, rgba(47, 183, 255, .3), rgba(118, 91, 231, .2));
  box-shadow:0 0 24px rgba(55, 190, 255, .15);
}
.tabs .nav-icon .sky-icon { width:20px; height:20px; }

/* Messaging workspace. */
#social .game-main {
  position:relative; overflow:hidden; border:1px solid rgba(144, 216, 255, .13);
  background:
    radial-gradient(circle at 84% 5%, rgba(68, 93, 219, .14), transparent 30%),
    linear-gradient(145deg, rgba(5, 14, 27, .91), rgba(2, 7, 15, .94)),
    url('/assets/sky-night-stars-v1.jpg') 0 0 / 750px 750px repeat;
  box-shadow:0 26px 80px rgba(0, 0, 0, .3), inset 0 1px rgba(255,255,255,.025);
}
#social .game-main::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.58;
  background:linear-gradient(110deg, transparent 15%, rgba(104, 221, 255, .045) 42%, transparent 68%);
}
#social .game-main > * { position:relative; z-index:1; }
#social .section-head { padding:3px 2px 0; }
#social #refreshSocialBtn { display:inline-flex; align-items:center; justify-content:center; gap:9px; }
#social #refreshSocialBtn .sky-icon { width:17px; height:17px; transition:transform .45s var(--sky-ease-out); }
#social #refreshSocialBtn:hover .sky-icon { transform:rotate(180deg); }

#social .social-tabs {
  position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); width:min(600px, 100%); gap:7px;
  padding:6px; margin:23px 0 27px; border:1px solid rgba(151, 218, 255, .14); border-radius:22px;
  background:rgba(3, 10, 21, .74); box-shadow:0 16px 44px rgba(0, 0, 0, .18), inset 0 1px rgba(255,255,255,.03);
  backdrop-filter:blur(22px) saturate(135%);
}
#social .social-tab {
  position:relative; display:flex; align-items:center; justify-content:center; gap:9px; min-width:0; min-height:53px; padding:8px 13px;
  border:1px solid transparent; border-radius:16px; color:#869cb4; background:transparent; font-size:14px; font-weight:800;
  transition:color .25s ease, background .25s ease, border-color .25s ease, transform .25s var(--sky-ease-out), box-shadow .25s ease;
}
#social .social-tab:hover { color:#d9f4ff; transform:translateY(-1px); }
#social .social-tab.is-active {
  color:#f2fbff; border-color:rgba(107, 217, 255, .28);
  background:linear-gradient(135deg, rgba(37, 132, 190, .27), rgba(97, 78, 195, .2));
  box-shadow:0 10px 25px rgba(0, 0, 0, .2), inset 0 1px rgba(255,255,255,.06);
}
#social .social-tab-icon { display:grid; place-items:center; width:31px; height:31px; border-radius:11px; color:#81cae8; background:rgba(112, 199, 239, .08); }
#social .social-tab.is-active .social-tab-icon { color:#c7f4ff; background:rgba(92, 210, 255, .15); }
#social .social-tab-icon .sky-icon { width:18px; height:18px; }
#social .social-tab-count {
  display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:99px;
  color:#06111b; background:linear-gradient(135deg, #8be8ff, #73bfff); font-size:11px; font-weight:950;
  box-shadow:0 0 16px rgba(84, 205, 255, .35);
}
#social .social-tab-count[hidden] { display:none; }

#social .social-panels { min-height:500px; }
#social .social-card {
  border:1px solid rgba(148, 214, 255, .12); background:linear-gradient(150deg, rgba(11, 25, 43, .76), rgba(4, 11, 23, .82));
  box-shadow:0 18px 55px rgba(0, 0, 0, .18), inset 0 1px rgba(255,255,255,.025); backdrop-filter:blur(18px);
}
#social .social-thread-card { padding:12px; }
#social .social-thread-card > h3 { padding:10px 10px 14px; margin:0; color:#e9f7ff; letter-spacing:.01em; }
#social .social-thread-card .service-list { display:flex; flex-direction:column; gap:7px; }
#social .thread-row {
  position:relative; display:grid; grid-template-columns:52px minmax(0, 1fr) auto; align-items:center; gap:13px;
  width:100%; margin:0; padding:12px; overflow:hidden; border:1px solid transparent; border-radius:18px; color:#dcebf6;
  background:transparent; text-align:left; cursor:pointer;
  transition:transform .25s var(--sky-ease-out), border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
#social .thread-row::after { content:""; position:absolute; left:77px; right:12px; bottom:0; height:1px; background:rgba(143, 201, 238, .08); }
#social .thread-row:hover { transform:translateX(3px); border-color:rgba(119, 211, 255, .15); background:rgba(90, 179, 228, .07); }
#social .thread-row.is-active {
  border-color:rgba(101, 217, 255, .27); background:linear-gradient(115deg, rgba(41, 139, 196, .2), rgba(68, 60, 147, .1));
  box-shadow:0 12px 30px rgba(0, 0, 0, .17), inset 3px 0 #64d8ff;
}
#social .thread-avatar {
  position:relative; display:grid; place-items:center; width:50px; height:50px; border:1px solid rgba(130, 217, 255, .25); border-radius:17px;
  color:#d8f7ff; background:linear-gradient(145deg, rgba(44, 169, 229, .26), rgba(107, 83, 203, .24)); font-size:13px; font-weight:900; letter-spacing:.05em;
  box-shadow:inset 0 1px rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.16);
}
#social .thread-avatar::after { content:""; position:absolute; right:-2px; bottom:-2px; width:11px; height:11px; border:3px solid #091424; border-radius:50%; background:#48e398; box-shadow:0 0 12px rgba(72, 227, 152, .65); }
#social .thread-copy { min-width:0; }
#social .thread-copy strong, #social .thread-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#social .thread-copy strong { color:#edf8ff; font-size:15px; }
#social .thread-copy small { margin-top:5px; color:#7f95aa; font-size:13px; }
#social .thread-state { display:grid; place-items:center; min-width:24px; }
#social .thread-chevron { color:#63809a; font-size:24px; font-weight:400; transform:translateX(0); transition:transform .2s ease, color .2s ease; }
#social .thread-row:hover .thread-chevron { color:#91e5ff; transform:translateX(3px); }

#social .social-empty-state {
  display:flex; min-height:270px; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:32px;
  color:#71869d; text-align:center;
}
#social .social-empty-state.is-compact { min-height:220px; }
#social .social-empty-state .sky-icon { width:42px; height:42px; padding:10px; box-sizing:content-box; border:1px solid rgba(111, 215, 255, .2); border-radius:20px; color:#8ae0ff; background:rgba(76, 177, 231, .08); animation:sky-ring 3s ease-in-out infinite; }
#social .social-empty-state strong { color:#dceef9; font-size:17px; }
#social .social-empty-state span { max-width:270px; font-size:13px; line-height:1.55; }

#social .social-chat-main { overflow:hidden; padding:0; background:rgba(4, 12, 24, .78); }
#social .chat-card-head {
  position:relative; display:flex; align-items:center; gap:13px; border-bottom:1px solid rgba(139, 211, 255, .11);
  background:linear-gradient(180deg, rgba(13, 29, 49, .95), rgba(8, 20, 36, .87)); backdrop-filter:blur(20px);
}
#social .chat-card-head::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg, transparent, rgba(83, 202, 255, .45), transparent); }
#social .chat-card-head h3 { margin:0; color:#f0f8ff; }
#social .chat-back { display:grid; place-items:center; width:42px; min-width:42px; height:42px; padding:0; border-radius:14px; }
#social .chat-back svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--sky-ease-out); }
#social .chat-back:hover svg { transform:translateX(-3px); }
#social .chat-log {
  scroll-behavior:smooth; background:
    linear-gradient(rgba(2, 8, 17, .44), rgba(2, 8, 17, .65)),
    url('/assets/sky-night-stars-v1.jpg') 0 0 / 750px 750px repeat;
}
#social .chat-message { animation:sky-message-enter .4s var(--sky-ease-out) both; border:1px solid rgba(147, 208, 242, .1); backdrop-filter:blur(12px); }
#social .chat-message.is-mine { border-color:rgba(103, 220, 255, .15); box-shadow:0 12px 30px rgba(0, 0, 0, .2), 0 0 28px rgba(53, 180, 230, .055); }

#social .chat-form {
  position:relative; align-items:center; border-top:1px solid rgba(139, 211, 255, .12);
  background:linear-gradient(180deg, rgba(7, 18, 33, .94), rgba(5, 13, 25, .98)); backdrop-filter:blur(24px);
}
#social .chat-form input[name="message"] { min-width:0; height:51px; padding:0 18px; border:1px solid rgba(139, 213, 255, .15); border-radius:18px; background:rgba(2, 9, 19, .74); transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
#social .chat-form input[name="message"]:focus { border-color:rgba(89, 211, 255, .48); background:rgba(4, 13, 26, .95); box-shadow:0 0 0 4px rgba(60, 194, 243, .08), 0 0 32px rgba(50, 183, 239, .08); }
#social .chat-plus { width:50px; min-width:50px; height:50px; padding:0; border-radius:17px; font-size:26px; font-weight:350; }
#social .chat-form button[type="submit"] { display:grid; place-items:center; width:51px; min-width:51px; height:51px; padding:0; border-radius:17px; }
#social .chat-form button[type="submit"] .sky-icon { width:23px; height:23px; transition:transform .24s var(--sky-ease-out); }
#social .chat-form button[type="submit"]:hover .sky-icon { transform:translate(2px, -2px) rotate(-4deg); }
#social .chat-share-menu {
  border:1px solid rgba(139, 213, 255, .18); border-radius:19px; background:rgba(5, 15, 29, .96);
  box-shadow:0 -16px 50px rgba(0, 0, 0, .38); backdrop-filter:blur(24px); animation:sky-message-enter .28s var(--sky-ease-out) both;
}

/* Mobile app launcher: visually separate from the content and easy to scan. */
@media (max-width:860px) {
  body.menu-overlay-open { overflow:hidden; touch-action:none; }
  .app-menu-backdrop:not([hidden]) {
    display:block; position:fixed; inset:0; z-index:79; border:0; border-radius:0;
    background:radial-gradient(circle at 50% 88%, rgba(36, 108, 159, .16), transparent 38%), rgba(1, 5, 12, .76);
    backdrop-filter:blur(10px) saturate(120%); animation:sky-backdrop-in .28s ease both;
  }
  @keyframes sky-backdrop-in { from { opacity:0; } to { opacity:1; } }

  .app-shell > .tabs, .app-shell.mobile-menu-open > .tabs {
    inset:auto 10px calc(76px + env(safe-area-inset-bottom)); width:auto; height:auto; max-height:calc(100dvh - 100px - env(safe-area-inset-bottom));
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; gap:9px; padding:15px;
    overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; border:1px solid rgba(145, 219, 255, .2); border-radius:30px;
    background:
      radial-gradient(circle at 8% 0%, rgba(49, 160, 222, .17), transparent 34%),
      radial-gradient(circle at 100% 20%, rgba(105, 76, 197, .13), transparent 38%),
      rgba(4, 12, 24, .97);
    box-shadow:0 -26px 90px rgba(0, 0, 0, .58), inset 0 1px rgba(255,255,255,.05);
    backdrop-filter:blur(28px) saturate(145%);
    transform:translate3d(0, 28px, 0) scale(.94); transform-origin:50% 100%; opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .42s var(--sky-ease-out), opacity .25s ease, visibility .42s;
  }
  .app-shell.mobile-menu-open > .tabs { transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .tabs .sidebar-brand, .tabs .nav-section, .tabs .sidebar-note, .tabs .game-context-menu { grid-column:1 / -1; }
  .tabs .sidebar-brand { position:relative; display:flex; align-items:center; gap:12px; min-height:68px; padding:9px 10px 14px; border-bottom:1px solid rgba(144, 215, 255, .11); }
  .tabs .sidebar-brand::after { content:"Menu"; margin-left:auto; padding:7px 10px; border:1px solid rgba(126, 214, 255, .15); border-radius:99px; color:#7894aa; font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
  .tabs .sidebar-brand .brand-mark { width:48px; height:48px; border-radius:16px; box-shadow:0 0 28px rgba(80, 202, 255, .14); }
  .tabs .sidebar-brand strong { font-size:16px; }
  .tabs .sidebar-brand small { margin-top:3px; color:#6f879d; }
  .tabs .nav-section { margin:7px 5px 0; color:#5f7b92; font-size:10px; letter-spacing:.18em; }
  .tabs .tab {
    display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:67px; padding:9px 10px;
    border:1px solid rgba(137, 207, 245, .1); border-radius:19px; color:#adbed0; background:rgba(111, 178, 218, .035); font-size:12px; line-height:1.25; text-align:left;
    box-shadow:inset 0 1px rgba(255,255,255,.018);
  }
  .tabs .tab:hover { transform:translateY(-2px); }
  .tabs .tab.is-active { color:#eefaff; border-color:rgba(93, 215, 255, .32); background:linear-gradient(145deg, rgba(36, 150, 210, .23), rgba(96, 75, 190, .13)); box-shadow:0 12px 28px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.05); }
  .tabs .nav-icon, .tabs .nav-icon:not(.game-fn):not(.game-ap):not(.game-r6) { display:grid; place-items:center; width:42px; height:42px; margin:0; border-radius:14px; }
  .tabs .nav-icon.game-fn, .tabs .nav-icon.game-ap, .tabs .nav-icon.game-r6 { border:1px solid rgba(144, 214, 255, .15); color:#d4f2ff; background:linear-gradient(145deg, rgba(53, 158, 216, .16), rgba(105, 83, 193, .15)); font-size:11px; letter-spacing:.04em; }
  .tabs .nav-launch { color:#68849a; font-size:14px; }
  .tabs .nav-live-dot { position:absolute; top:9px; right:9px; }
  .tabs .sidebar-note { display:flex; min-height:52px; margin-top:4px; padding:9px 12px; border:1px solid rgba(75, 218, 154, .13); border-radius:17px; background:rgba(31, 142, 95, .06); }
  .tabs .sidebar-note strong { font-size:12px; }
  .tabs .sidebar-note small { font-size:10px; }
  .game-context-menu:not([hidden]) { display:block; padding-bottom:3px; }
  .game-context-menu > .nav-section { margin-bottom:8px; }
  .game-context-menu > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .game-context-menu button { display:flex; align-items:center; gap:8px; min-height:49px; padding:8px 10px; border-radius:15px; text-align:left; }
  .game-context-menu button > span { display:grid; place-items:center; width:30px; min-width:30px; height:30px; border-radius:10px; color:#9de8ff; background:rgba(90, 201, 247, .1); font-size:9px; font-weight:900; }
  .app-shell.mobile-menu-open > .tabs > * { animation:sky-menu-item-in .42s var(--sky-ease-out) both; }
  .app-shell.mobile-menu-open > .tabs > :nth-child(2) { animation-delay:.03s; }
  .app-shell.mobile-menu-open > .tabs > :nth-child(3) { animation-delay:.045s; }
  .app-shell.mobile-menu-open > .tabs > :nth-child(4) { animation-delay:.06s; }
  .app-shell.mobile-menu-open > .tabs > :nth-child(5) { animation-delay:.075s; }
  .app-shell.mobile-menu-open > .tabs > :nth-child(6) { animation-delay:.09s; }
  .app-shell.mobile-menu-open > .tabs > :nth-child(7) { animation-delay:.105s; }
  .app-shell.mobile-menu-open > .tabs > :nth-child(8) { animation-delay:.12s; }
  .app-shell.mobile-menu-open > .tabs > :nth-child(9) { animation-delay:.135s; }
  .app-shell.mobile-menu-open > .tabs > :nth-child(10) { animation-delay:.15s; }
  .app-shell > .mobile-menu-toggle {
    isolation:isolate; overflow:hidden; gap:10px; width:174px; min-height:54px; border:1px solid rgba(196, 244, 255, .42); border-radius:19px;
    color:#03111c; background:linear-gradient(100deg, #84e6ff, #63caff 54%, #9d91ff); font-size:14px;
    box-shadow:0 17px 42px rgba(0,0,0,.38), 0 0 35px rgba(62, 197, 255, .17), inset 0 1px rgba(255,255,255,.55);
    transition:transform .32s var(--sky-ease-out), border-radius .32s ease, box-shadow .32s ease;
  }
  .app-shell > .mobile-menu-toggle::before { content:""; position:absolute; inset:-70% -35%; z-index:-1; background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); transform:translateX(-70%) rotate(12deg); transition:transform .7s var(--sky-ease-out); }
  .app-shell > .mobile-menu-toggle:hover::before { transform:translateX(70%) rotate(12deg); }
  .app-shell.mobile-menu-open > .mobile-menu-toggle { transform:scale(.96); border-radius:50%; width:54px; }
  .app-shell.mobile-menu-open > .mobile-menu-toggle .menu-label { display:none; }

  /* Chat navigation becomes a compact mobile switcher, not three oversized blocks. */
  #social .game-main { min-height:calc(100dvh - 118px); padding:13px; border-radius:20px; }
  #social .section-head { align-items:center; gap:12px; }
  #social .section-head h2 { font-size:clamp(1.65rem, 7vw, 2rem); }
  #social #refreshSocialBtn { width:46px; min-width:46px; height:46px; padding:0; border-radius:15px; }
  #social #refreshSocialBtn span { display:none; }
  #social .social-tabs { position:sticky; top:8px; z-index:8; width:100%; gap:5px; margin:16px 0 18px; padding:5px; border-radius:19px; }
  #social .social-tab { flex-direction:column; gap:4px; min-width:0; min-height:65px; padding:6px 4px; border-radius:15px; font-size:11px; }
  #social .social-tab-icon { width:27px; height:27px; border-radius:9px; }
  #social .social-tab-icon .sky-icon { width:16px; height:16px; }
  #social .social-tab-count { position:absolute; top:4px; right:calc(50% - 28px); min-width:17px; height:17px; font-size:9px; }
  #social .social-panel .social-grid.compact { gap:13px; }
  #social .social-card { border-radius:21px; }
  #social .social-thread-card { min-height:calc(100dvh - 325px); max-height:none; padding:8px; }
  #social .social-thread-card > h3 { padding:10px 10px 11px; }
  #social .thread-row { grid-template-columns:49px minmax(0, 1fr) auto; min-height:73px; padding:10px 8px; border-radius:17px; }
  #social .thread-avatar { width:47px; height:47px; border-radius:16px; }
  #social .thread-copy strong { font-size:14px; }
  #social .thread-copy small { font-size:12px; }
  #social.chat-focus .section-head, #social.chat-focus .social-tabs, #social.chat-focus .social-tool-buttons { display:none; }
  #social.chat-focus .game-main { min-height:100dvh; padding:0; border:0; border-radius:0; }
  #social.chat-focus .social-panels, #social.chat-focus .social-panel.is-active, #social.chat-focus .whatsapp-layout { height:100%; min-height:100dvh; }
  #social.chat-focus .whatsapp-layout .social-chat-main { height:100dvh; min-height:100dvh; border:0; border-radius:0; }
  #social .chat-card-head { min-height:72px; padding:calc(9px + env(safe-area-inset-top)) 12px 9px; }
  #social .chat-log { padding:20px 12px; }
  #social .chat-message { max-width:88%; margin-bottom:14px; padding:12px 15px; border-radius:18px 18px 18px 6px; }
  #social .chat-message.is-mine { border-radius:18px 18px 6px 18px; }
  #social .chat-form { position:sticky; bottom:0; z-index:5; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; padding:10px 9px calc(10px + env(safe-area-inset-bottom)); }
  #social .chat-form input[name="message"] { height:49px; padding-inline:14px; font-size:16px; }
  #social .chat-plus { width:48px; min-width:48px; height:48px; }
  #social .chat-form button[type="submit"] { width:49px; min-width:49px; height:49px; }
  #social .chat-share-menu { position:absolute; left:9px; right:9px; bottom:calc(72px + env(safe-area-inset-bottom)); z-index:9; }
}

@media (max-width:390px) {
  .app-shell > .tabs, .app-shell.mobile-menu-open > .tabs { gap:7px; padding:12px; border-radius:26px; }
  .tabs .tab { min-height:62px; padding:7px 8px; }
  #social .game-main { padding-inline:9px; }
  #social .social-tab { font-size:10px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
}