/* Shared mobile rules follow the page-specific styles to keep navigation consistent. */
@media (max-width:900px) {
  .nav,
  body:has(#page-play:not([hidden])) .nav {
    display:grid;
    grid-template-columns:52px minmax(0,112px) minmax(0,112px) 40px;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:10px 16px;
    min-height:76px;
    --control-height:44px;
  }
  .nav .brand {grid-column:1;grid-row:1;line-height:0}
  .nav .brand img,
  body:has(#page-play:not([hidden])) .nav .brand img {width:52px;height:56px}
  .nav .language-picker,
  body:has(#page-play:not([hidden])) .nav .language-picker {
    grid-column:2;grid-row:1;order:0;margin:0;min-width:0;width:100%;
  }
  .nav .language-label {display:none}
  .nav .theme-toggle {grid-column:3;grid-row:1}
  .nav .menu,
  body:has(#page-play:not([hidden])) .nav .menu {
    display:block;grid-column:4;grid-row:1;order:0;margin:0;
    width:40px;height:44px;padding:0;font-size:22px;
  }
  .nav .theme-toggle,
  .nav .language-picker select,
  body:has(#page-play:not([hidden])) .nav .theme-toggle,
  body:has(#page-play:not([hidden])) .nav .language-picker select {
    width:100%;min-width:0;max-width:100%;height:44px;min-height:44px;
    padding:0 6px;font-size:11px;letter-spacing:0;
  }
  .nav .language-picker select,
  body:has(#page-play:not([hidden])) .nav .language-picker select {padding-right:18px}
  .nav .links,
  body:has(#page-play:not([hidden])) .nav .links {
    display:none;position:absolute;top:100%;left:0;right:0;
    width:100%;margin:0;padding:16px;flex-direction:column;flex-wrap:nowrap;
    align-items:stretch;justify-content:flex-start;gap:12px;
    max-height:calc(100dvh - 77px);overflow-y:auto;overscroll-behavior:contain;
    background:#111014;border-bottom:1px solid var(--gold);
  }
  .nav .links.open,
  body:has(#page-play:not([hidden])) .nav .links.open {display:flex}
  .nav .links>a,.nav .nav-group,.nav .nav-group>.nav-drop {width:100%;text-align:center}
  .nav .links>a {min-height:44px;display:flex;align-items:center;justify-content:center;white-space:normal}
  .nav .search-open {align-self:stretch;width:100%;min-width:0;max-width:none;min-height:44px}
  .nav .nav-group .submenu,
  body:has(#page-play:not([hidden])) .nav .submenu {
    position:static;transform:none;width:100%;min-width:0;max-height:none;
    margin:8px 0 0;padding:12px;grid-template-columns:minmax(0,1fr);box-shadow:none;
  }
  .nav .nav-group:not(.open) .submenu {display:none}
  .nav .nav-group.open .submenu {display:grid}
  .nav .submenu a {overflow-wrap:anywhere}
  body.light-mode .nav .links,
  body.light-mode:has(#page-play:not([hidden])) .nav .links {background:#fffdf9}
  body.light-mode:has(#page-play:not([hidden])) header {background-image:none}
  .site-page h1,.site-page h2,.site-page h3 {overflow-wrap:anywhere}
  .hero-grid>*,.feature>*,.split>* {min-width:0}
  #page-play .hub-row-heading {flex-wrap:wrap;align-items:flex-start;gap:16px}
  #page-play .hub-arrows {flex-shrink:0}
  #page-play .hub-subnav .hub-subnav-inner {
    flex-wrap:wrap;justify-content:center;gap:8px;white-space:normal;overflow:visible;
  }
  #page-play .hub-subnav .hub-subnav-inner a {flex:1 1 40%;text-align:center;white-space:normal}
}

@media (max-width:480px) {
  .wrap {padding-inline:20px}
  .division-panel,.feature .box {padding:24px}
  #page-contact .contact-form-card,#page-contact .contact-direct {padding:24px}
  #page-play .hub-top-search:before {margin-left:6px;font-size:28px}
  #page-play .hub-top-search input {padding-inline:4px;font-size:16px}
  #page-play .hub-top-search button {padding-inline:16px;font-size:16px}
  #page-play .hub-mega-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:6px 10px}
  #page-play .hub-mega-trigger,#page-play .hub-mega-contact {padding:10px 5px;min-height:44px}
  #page-play .hub-mega-links a {overflow-wrap:anywhere}
}