/* ==========================================================================
   TournamentMU Nova — Mobile-First Responsive System
   Complete rewrite for pixel-perfect mobile UX
   ========================================================================== */

/* ---- Safe Area / Notch / Dynamic Viewport ---- */
:root {
  --tmu-safe-top: env(safe-area-inset-top, 0px);
  --tmu-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tmu-safe-left: env(safe-area-inset-left, 0px);
  --tmu-safe-right: env(safe-area-inset-right, 0px);
  --tmu-mobile-nav-h: 72px;
  --tmu-touch-min: 44px; /* Apple HIG minimum touch target */
}

/* ---- Hamburger Toggle (hidden by default, shown on <=992px) ---- */
.topPanel__burger {
  display: none;
  width: var(--tmu-touch-min);
  height: var(--tmu-touch-min);
  border-radius: 12px;
  border: 1px solid rgba(255, 80, 40, 0.35);
  background: rgba(10, 16, 27, 0.8);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  z-index: 610;
  flex-shrink: 0;
}

.topPanel__burger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--tmu-gold, #e4b878);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.topPanel__burger.active .topPanel__burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.topPanel__burger.active .topPanel__burger-line:nth-child(2) {
  opacity: 0;
}

.topPanel__burger.active .topPanel__burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   > 1480px — Extra-Wide Adjustments
   ========================================================================== */
@media (max-width: 1480px) {
  .top-panel-block {
    width: 100%;
    padding: 0 20px 0 70px;
    justify-content: space-between;
  }

  .logo-icon {
    margin: 0;
  }

  .logo-icon img {
    margin: 0;
  }

  .tmu-side-banner {
    width: clamp(120px, 12vw, 160px);
    right: 10px;
  }

  .logo-mini {
    display: none;
  }

  .menu a {
    height: inherit;
    line-height: inherit;
  }

  .menu .active a {
    border-top: none;
  }
}

/* ==========================================================================
   <= 1200px — Tablet Landscape / Small Desktop
   ========================================================================== */
@media (max-width: 1200px) {
  .wrapper {
    padding: 0 16px;
    max-width: 100%;
  }

  .tmu-side-banner {
    width: 130px;
    right: 8px;
  }

  /* News & Widget panels stack */
  .news-panel,
  .widget-panel,
  .video-pannel {
    flex-direction: column;
    align-items: center;
    height: auto;
  }

  .news-panel .slider {
    margin-bottom: 20px;
  }

  .widget-block:not(:last-of-type) {
    margin-bottom: 32px;
  }

  .video-block {
    margin-bottom: 40px;
  }

  .title-video-panel {
    margin-left: calc(50% - 395px);
  }

  .market-panel {
    height: auto;
  }

  .list-goods {
    width: auto;
    flex-wrap: wrap;
    margin: 15px 10% 11px;
  }

  .list-goods li {
    width: calc(25% - 4px);
    margin-bottom: 4px;
  }

  .widget-panel-left {
    display: none;
  }

  .news-block {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }

  /* Hero adjustments — grid is already flex-column centered from nova.css */
  .tmu-hero__content {
    text-align: center;
    align-items: center;
  }

  .mu-brand {
    align-items: center;
  }

  .tmu-hero__lead {
    margin-left: auto;
    margin-right: auto;
  }

  .tmu-hero__actions {
    justify-content: center;
  }

  .tmu-hero__warpath {
    justify-items: center;
  }

  .tmu-warpath__line {
    justify-content: center;
  }

  .tmu-hero__intel {
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  .tmu-hero__atlas {
    display: none;
  }

  /* Operations grid */
  .tmu-operations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Donate packages */
  .tmu-donate-packages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tmu-donate-packages--premium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tmu-paypal-packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Countdown */
  .tmu-countdown__intro {
    flex-direction: column;
    text-align: center;
  }

  .tmu-countdown--hero #timer_div_time {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  /* News grid */
  .mu-news__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   <= 992px — Tablet Portrait / Mobile-Nav Breakpoint
   ========================================================================== */
@media (max-width: 992px) {
  body.nova {
    padding-top: var(--tmu-mobile-nav-h);
    font-size: 14px;
  }

  /* Override legacy body backgrounds for mobile */
  body {
    background-position: 58% top, center bottom;
    background-size: cover, cover;
  }

  header {
    height: auto;
    min-height: 0;
  }

  /* Show hamburger */
  .topPanel__burger {
    display: flex;
  }

  /* Side banner — hide on tablet */
  .tmu-side-banner {
    display: none;
  }

  /* ---- Mobile Navigation Drawer ---- */
  .topPanel__nav {
    position: fixed !important;
    top: var(--tmu-mobile-nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    flex-direction: column;
    align-items: stretch;
    background: rgba(5, 8, 14, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 100, 50, 0.2);
    border-radius: 0;
    padding: 20px 20px calc(20px + var(--tmu-safe-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 590;
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease,
                visibility 0s linear 0.35s;
    gap: 16px;
  }

  .topPanel__nav.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .topPanel__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    height: auto;
    padding-left: 0;
  }

  .topPanel__menu li {
    margin: 0;
  }

  .topPanel__menu li:hover {
    margin: 0 !important;
  }

  .topPanel__menu li a,
  body.nova .topPanel__menu > li > a {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: var(--tmu-touch-min);
    padding: 12px 16px !important;
    border-radius: 12px;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(240, 244, 251, 0.9);
    border: 1px solid transparent;
    height: auto;
    line-height: normal;
    justify-content: flex-start;
    gap: 12px;
  }

  .topPanel__menu li a i {
    width: 22px;
    text-align: center;
    font-size: 15px;
    opacity: 0.7;
  }

  .topPanel__menu li.active a,
  .topPanel__menu li a:hover,
  body.nova .topPanel__menu > li.active > a,
  body.nova .topPanel__menu > li > a:hover {
    background: rgba(255, 100, 50, 0.14);
    border-color: rgba(255, 100, 50, 0.32);
    color: #fff;
    border-top: none;
    text-shadow: none;
  }

  .topPanel__menu li.active a i,
  .topPanel__menu li a:hover i {
    opacity: 1;
  }

  .topPanel__menu .active a::after,
  .topPanel__menu a::after {
    display: none !important;
  }

  /* ---- Top Panel Mobile ---- */
  .topPanel__inner {
    min-height: var(--tmu-mobile-nav-h);
    gap: 0;
    padding: 0 10px;
    flex-wrap: nowrap;
    justify-content: space-between;
    position: relative;
  }

  /* Burger stays left */
  .topPanel__burger {
    flex: 0 0 auto;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    gap: 4px;
  }

  .topPanel__burger-line {
    width: 18px;
  }

  /* Logo — centred absolutely on mobile */
  .topPanel__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: auto;
  }

  .topPanel__logo img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  /* Right actions cluster — stay right */
  .topPanel__actions {
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
    z-index: 2;
  }

  .topPanel__actions .mu-auth {
    gap: 6px;
  }

  /* Hide signup link on mobile — tabbar has it */
  .topPanel__actions .mu-link--signup {
    display: none;
  }

  .topPanel__actions .mu-link {
    font-size: 10px;
    padding: 6px 10px;
    min-height: 32px;
  }

  .topPanel__actions .mu-btn {
    font-size: 10px;
    padding: 6px 10px;
    min-height: 32px;
  }

  /* Account button — icon-only circle */
  .topPanel__actions .mu-btn--account {
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    justify-content: center;
    border: 1px solid rgba(255, 100, 50, 0.20);
    background: rgba(9, 15, 25, 0.7);
  }

  .topPanel__actions .mu-btn--account .mu-btn__label {
    display: none;
  }

  .topPanel__actions .mu-btn--account i {
    font-size: 13px;
    margin: 0;
  }

  /* Lang pill — compact */
  .topPanel__lang {
    min-height: 32px;
    padding: 0 8px;
    font-size: 10px;
    border-radius: 9px;
  }

  .lang-pill {
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  /* Lang dropdown: position from right */
  .lang-block .hidden-block {
    right: 0;
    left: auto;
    min-width: 140px;
  }

  /* Login button — icon-only circle */
  .topPanel__actions .mu-btn--glow {
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    justify-content: center;
    font-size: 12px;
    border: 1px solid rgba(255, 80, 40, 0.3);
    background: rgba(255, 80, 40, 0.08);
  }

  .topPanel__actions .mu-btn--glow span,
  .topPanel__actions .mu-btn--glow .mu-btn__label {
    display: none;
  }

  /* ---- Hero Section Mobile ---- */
  .tmu-hero__atlas {
    display: none;
  }

  .tmu-hero__spotlight {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .tmu-spotlight__media {
    width: 100px;
  }

  .tmu-spotlight__content {
    width: 100%;
  }

  /* ---- Radial Server Status ---- */
  .radial {
    flex-direction: column;
    align-items: center;
  }

  .radial-stat {
    margin-right: 0;
    margin-bottom: 16px;
  }

  /* ---- Download Buttons ---- */
  .download-buttons {
    position: relative;
    width: 100%;
  }

  .fast-button {
    flex-direction: column-reverse;
    align-items: center;
  }

  .btn-download {
    height: 123px;
  }

  .h-button {
    width: 100%;
    max-width: 360px;
    height: auto;
    min-height: 100px;
    padding: 20px;
    background-size: contain;
    background-position: center;
  }

  /* ---- Content Area ---- */
  .dmn-content {
    width: 100%;
  }

  .dmn-content:before,
  .dmn-content:after,
  .block-widget:before,
  .block-widget:after {
    background: none;
  }

  /* ---- Header & Footer Stack ---- */
  .headerBlock,
  .footer-block-t,
  .footer-end {
    flex-direction: column;
  }

  .footer-block-coperite {
    top: 0;
    bottom: 0;
  }

  /* ---- Block Widgets ---- */
  .block-widget {
    width: 100%;
    height: auto;
  }

  .block-widget-2 {
    height: auto;
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  /* ---- Footer ---- */
  .footer-logo,
  .templstock,
  .footer-block-r {
    display: none;
  }

  .mu-footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .f-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  /* ---- Video Panel ---- */
  .video-block {
    width: 100%;
    height: auto;
  }

  .title-video-panel {
    margin-left: 0;
  }

  .title-video-panel:after {
    width: calc(100% - 100px);
  }

  .video-player {
    width: 100%;
    background-position: center;
    background-size: cover;
  }

  /* ---- Logo ---- */
  .logo {
    top: 80px;
    left: 0;
  }

  .logo img {
    width: 70%;
    margin: 0 auto;
    display: block;
  }

  /* ---- Drivers ---- */
  .drivers {
    flex-direction: column;
  }

  .drivers li {
    margin-bottom: 16px;
  }

  /* ---- News ---- */
  .news img {
    width: 100%;
  }

  .news-block {
    padding: 0 16px 32px;
  }

  .newsContent {
    padding-right: 0;
  }

  .newsContent_img {
    display: none;
  }

  .newsContent_info {
    margin-left: 0;
    width: 100%;
  }

  .news-top-title span,
  .pp {
    font-size: 12px;
  }

  /* ---- Smoke / Sparks ---- */
  .smoke,
  .sparks,
  .sparks2 {
    display: none;
  }

  .ani {
    display: none;
  }

  /* ---- Server status panel ---- */
  .tmu-realm__bar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
  }

  .tmu-realm__stats {
    gap: 10px;
    flex-wrap: wrap;
  }

  .tmu-realm__meter {
    min-width: 100px;
  }

  /* ---- Register Form ---- */
  .tmu-register {
    grid-template-columns: 1fr;
  }

  .tmu-account-modal__coins {
    grid-template-columns: 1fr;
  }

  .tmu-account-modal__menu {
    grid-template-columns: 1fr;
  }

  /* ---- PayPal pages ---- */
  .tmu-paypal-hero {
    flex-direction: column;
    padding: 16px;
  }

  .tmu-donate-shell__intro {
    grid-template-columns: 1fr;
  }

  .tmu-donate-flow__grid {
    grid-template-columns: 1fr;
  }

  /* ---- Dropdown positions ---- */
  .hidden-block-account {
    left: auto;
    right: 0;
    top: calc(100% + 10px);
  }

  .hidden-block {
    left: auto;
    right: 0;
    top: calc(100% + 10px);
  }

  /* ---- Language block ---- */
  .lang-block {
    margin-left: 0;
    margin-bottom: 30px;
  }
}

/* ==========================================================================
   <= 768px — Small Tablet / Large Phone
   ========================================================================== */
@media (max-width: 768px) {
  .wrapper {
    padding: 0 0;
  }

  /* ---- Full-width app feel ---- */
  main.content {
    margin-top: 0;
  }

  .mu-panel,
  .dmn-page-box {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 16px;
  }

  .block-widget-2 {
    gap: 0;
  }

  .dmn-content {
    padding: 12px 0 40px;
  }

  .dmn-page-title {
    padding: 0 14px;
  }

  .dmn-page-title h1 {
    font-size: 22px;
  }

  /* ---- Modals ---- */
  .modal_window {
    left: 0 !important;
    width: 100% !important;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    padding: 20px 16px;
  }

  .tmu-auth-modal,
  .tmu-account-modal,
  .tmu-discord-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }

  .tmu-auth-modal__frame,
  .tmu-account-modal__frame {
    padding: 20px 16px;
  }

  .modalx-overlay {
    padding: 0;
  }

  /* ---- Tables responsive scroll ---- */
  .table-responsive-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table,
  .ranking-table,
  .ticket,
  .add_to_card {
    min-width: 600px;
  }

  /* ---- Status panel ---- */
  .tmu-realm {
    margin-top: 8px;
  }

  .tmu-realm__bar {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 10px 14px;
    gap: 8px 14px;
  }

  .tmu-realm__meter {
    min-width: 80px;
  }

  /* ---- Hero full-bleed ---- */
  .tmu-hero {
    border-radius: 0;
    margin: 0;
  }

  /* Reduce particles on mobile for perf */
  .tmu-hero__orb--6,
  .tmu-hero__orb--7,
  .tmu-hero__orb--8,
  .tmu-hero__orb--9,
  .tmu-hero__orb--10 {
    display: none;
  }

  .tmu-hero__sweep {
    animation-duration: 12s;
  }

  .tmu-hero__logo {
    animation: hero-logo-in 1.1s ease both;
  }

  .tmu-hero__grid {
    padding: 0 14px;
  }

  .tmu-hero__logo {
    width: clamp(180px, 50vw, 300px);
  }

  .tmu-hero__title {
    font-size: 28px;
  }

  .tmu-hero__eyebrow {
    font-size: 10px;
  }

  .tmu-hero__tagline {
    font-size: 10px;
    letter-spacing: 0.22em;
  }

  .tmu-hero__lead {
    font-size: 14px;
  }

  .tmu-intel-strip {
    padding: 10px 14px;
    gap: 8px 12px;
    border-radius: 16px;
  }

  .tmu-intel-strip__item {
    font-size: 10px;
  }

  .tmu-intel-strip__dot {
    display: none;
  }

  /* ---- Showcase (768px) ---- */
  .tmu-showcase {
    border-radius: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .tmu-showcase__cell {
    padding: 10px 16px;
    min-width: 70px;
  }

  .tmu-showcase__cell--rate .tmu-showcase__val {
    font-size: 18px;
  }

  .tmu-showcase__cell--online .tmu-showcase__val {
    font-size: 17px;
  }

  .tmu-showcase__cell--champion .tmu-showcase__val,
  .tmu-showcase__cell--guild .tmu-showcase__val {
    font-size: 13px;
    max-width: 100px;
  }

  .tmu-showcase__lbl {
    font-size: 7px;
  }

  .tmu-showcase__sep {
    display: none;
  }

  .tmu-hero__actions {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .tmu-hero__actions .mu-btn {
    flex: 1 1 auto;
    min-width: 120px;
    justify-content: center;
  }

  /* ---- Sigil / Orb — hidden on small tablets ---- */
  .tmu-hero__sigil {
    display: none;
  }

  /* ---- Ticker ---- */
  .tmu-hero__ticker {
    border-radius: 0;
    margin: 0;
    border-left: 0;
    border-right: 0;
  }

  .tmu-ticker__item {
    min-width: 180px;
  }

  /* ---- Countdown ---- */
  .tmu-countdown--hero {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  body.nova-inner .tmu-hero__title {
    font-size: 26px;
  }

  /* ---- Sections ---- */
  .mu-section {
    margin: 36px 0;
    padding: 0 14px;
  }

  .mu-section__title {
    font-size: 22px;
  }

  /* ---- Callout ---- */
  .mu-callout {
    text-align: center;
    flex-direction: column;
    padding: 20px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .mu-callout__actions {
    justify-content: center;
    width: 100%;
  }

  /* ---- Footer edge-to-edge ---- */
  .mu-footer {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin: 0;
  }

  /* ---- Rankings ---- */
  .dmn-rankings-table thead th {
    font-size: 9px;
    padding: 8px 8px;
  }

  .dmn-rankings-table tbody td {
    padding: 10px 8px;
    font-size: 12px;
  }

  /* ---- Operations ---- */
  .tmu-operations {
    grid-template-columns: 1fr;
  }

  /* ---- Donate ---- */
  .tmu-donate-packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tmu-donate-packages--premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tmu-donate-methods__grid--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tmu-paypal-packages {
    grid-template-columns: 1fr;
  }

  /* ---- Videos ---- */
  .video-player {
    height: 240px;
    margin-top: 8px;
  }

  .video-block {
    padding: 25px;
  }

  /* ---- Goods ---- */
  .list-goods li {
    width: calc(50% - 2px);
  }

  /* ---- News Block ---- */
  .news-block {
    padding: 0 0 24px;
  }

  /* ---- Tab Buttons ---- */
  .tab-button {
    white-space: nowrap;
  }

  .tab-block p.info {
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .news-panel > div,
  .swiper-news {
    width: 100%;
  }

  .slider-info {
    width: 80%;
  }

  /* ---- Swiper ---- */
  .swiper-news {
    width: 100%;
    height: auto;
    min-height: 280px;
  }

  .swiper-news::after {
    width: 100%;
  }

  .swiper-news .button-more {
    right: 16px;
  }

  /* ---- Events Block ---- */
  .events-block {
    width: 100%;
    padding: 20px 16px;
  }

  /* ---- Form Groups ---- */
  .formGroup {
    max-width: 100%;
  }

  .formGroup-2 {
    flex-direction: column;
  }

  .formGroup-2 > div {
    width: 100%;
  }

  /* ---- Error popup ---- */
  .errorGroup {
    position: static;
    min-width: 0;
    margin-left: 0;
    margin-top: 10px;
    left: auto;
  }

  .errorGroup:before {
    display: none;
  }

  /* ---- Nav pills ---- */
  body.nova .nav.nav-pills,
  body.nova .nav.nav-tabs {
    gap: 6px;
  }

  body.nova .nav-pills .nav-link,
  body.nova .nav-tabs .nav-link {
    width: 100%;
    justify-content: flex-start;
    min-height: var(--tmu-touch-min);
  }

  /* ---- Inventory ---- */
  #inventoryc {
    transform: scale(0.72);
    transform-origin: top center;
    margin-bottom: -60px;
  }

  /* ---- Rankings Page Mobile ---- */
  /* Page title h2 + nav-pills stacking */
  .dmn-page-content h2.title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 18px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .dmn-page-content h2.title .nav.nav-pills {
    float: none !important;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .dmn-page-content h2.title .nav-pills .nav-link {
    flex: 1 1 auto;
    text-align: center;
    min-height: 36px;
    font-size: 10px;
    padding: 0 8px;
  }

  /* Rankings category buttons */
  .rankings .text-center[id^="rankings_select_"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 4px;
  }

  .rankings .text-center[id^="rankings_select_"] .btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    margin: 0;
    font-size: 10px;
    padding: 0 10px;
    min-height: 38px;
    text-align: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Class dropdown */
  .rankings .dropdown {
    display: block;
    width: 100%;
  }

  .rankings .dropdown .btn.dropdown-toggle {
    width: 100%;
    justify-content: center;
  }

  .rankings .dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100%;
    transform: none !important;
  }

  /* Table scroll wrapper */
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;
    padding: 0 4px;
    border-radius: 12px;
  }

  /* Rankings content panel */
  .rankings [id^="rankings_content_"] {
    padding: 8px !important;
    overflow-x: hidden;
  }

  /* Search form */
  .rankings .mx-auto[style*="width: 350px"] {
    width: 100% !important;
  }

  .rankings .form-row {
    flex-direction: column;
    gap: 8px;
  }

  .rankings .form-row .col-auto {
    width: 100%;
  }

  .rankings .form-row .col-auto .form-control {
    width: 100%;
  }

  .rankings .form-row .col-auto .btn {
    width: 100%;
  }

  /* Pagination centre & wrap */
  .rankings .pagination,
  .text-center .pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
  }

  /* ---- Feedback page ---- */
  .tmu-feedback__grid {
    grid-template-columns: 1fr;
  }

  .tmu-feedback__hero {
    padding: 36px 16px 24px;
    margin-bottom: 18px;
  }

  .tmu-feedback__emoji {
    font-size: 38px;
  }

  .tmu-feedback__tabs {
    gap: 6px;
  }

  .tmu-feedback__tab {
    padding: 12px 10px;
    font-size: 11px;
  }

  .tmu-feedback__card {
    padding: 22px 16px;
    margin-bottom: 18px;
  }

  .tmu-feedback__input,
  .tmu-feedback__select,
  .tmu-feedback__textarea {
    padding: 14px 14px;
    font-size: 14px;
    border-radius: 10px;
  }

  .tmu-feedback__submit {
    width: 100%;
    min-width: 0;
  }

  /* ---- Float stack ---- */
  .tmu-float-stack {
    right: 14px;
    bottom: calc(78px + var(--tmu-safe-bottom));
    gap: 10px;
  }

  .tmu-float {
    width: 50px;
    height: 50px;
  }

  /* ================================================================
     MOBILE AUDIO: Mini-player Mode
     Tap FAB = play/pause, progress ring around FAB, long-press = vol
     Double-tap = full panel (bottom sheet kept as fallback)
     ================================================================ */

  /* ---- Progress Ring on FAB ---- */
  .tmu-audio__progress-ring {
    display: block;
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    pointer-events: none;
    transform: rotate(-90deg);
  }

  .tmu-audio__progress-track {
    fill: none;
    stroke: rgba(228, 184, 120, 0.12);
    stroke-width: 2.5;
  }

  .tmu-audio__progress-value {
    fill: none;
    stroke: var(--tmu-gold, #e4b878);
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s linear;
  }

  /* Hide ring when not playing */
  .tmu-float--audio:not(.is-playing) .tmu-audio__progress-ring {
    opacity: 0;
  }

  .tmu-float--audio.is-playing .tmu-audio__progress-ring {
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  /* ---- "Tap to Play" waiting pulse ---- */
  .tmu-float--audio.is-waiting {
    animation: tmu-fab-pulse 1.8s ease-in-out infinite;
  }

  .tmu-float--audio.is-waiting::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(228, 184, 120, 0.4);
    animation: tmu-waiting-ring 1.8s ease-out infinite;
    pointer-events: none;
  }

  @keyframes tmu-fab-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 18px 30px rgba(3, 6, 12, 0.6); }
    50% { transform: scale(1.06); box-shadow: 0 18px 40px rgba(228, 184, 120, 0.2); }
  }

  @keyframes tmu-waiting-ring {
    0% { transform: scale(0.9); opacity: 0.7; }
    80% { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(1.3); opacity: 0; }
  }

  /* ---- Playing state: subtle glow on FAB ---- */
  .tmu-float--audio.is-playing {
    border-color: rgba(228, 184, 120, 0.7);
    box-shadow: 0 0 20px rgba(228, 184, 120, 0.2), 0 18px 30px rgba(3, 6, 12, 0.6);
  }

  /* ---- Mobile Volume Popover ---- */
  .tmu-audio__mobile-vol {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    background: rgba(6, 10, 18, 0.97);
    border: 1px solid rgba(255, 100, 50, 0.25);
    border-radius: 28px;
    padding: 8px 14px;
    box-shadow: 0 12px 32px rgba(3, 6, 12, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
    z-index: 1201;
  }

  .tmu-audio__mobile-vol.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
  }

  .tmu-audio__mobile-vol i {
    color: var(--tmu-gold, #e4b878);
    font-size: 12px;
    flex-shrink: 0;
  }

  .tmu-audio__mobile-volume {
    width: 100px;
    height: 28px;
    accent-color: var(--tmu-gold, #e4b878);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
  }

  .tmu-audio__mobile-volume::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 100, 50, 0.2);
  }

  .tmu-audio__mobile-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tmu-gold, #e4b878);
    border: 2px solid rgba(8, 12, 20, 0.8);
    margin-top: -7px;
  }

  /* ---- Bottom sheet panel (only via double-tap) ---- */
  .tmu-audio__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(3, 6, 12, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1299;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .tmu-float--audio.is-open .tmu-audio__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .tmu-audio__swipe-handle {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    cursor: grab;
    touch-action: none;
  }

  .tmu-audio__swipe-handle span {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 100, 50, 0.3);
  }

  .tmu-audio__panel {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    top: auto;
    transform: translateY(100%);
    width: 100%;
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    z-index: 1300;
    padding-bottom: calc(8px + var(--tmu-safe-bottom));
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
  }

  .tmu-float--audio.is-open .tmu-audio__panel {
    transform: translateY(0);
  }

  .tmu-audio__btn {
    width: 44px;
    height: 44px;
  }

  .tmu-audio__btn--play {
    width: 48px;
    height: 48px;
  }

  .tmu-audio__seek-wrap {
    height: 10px;
    border-radius: 5px;
  }

  .tmu-audio__controls {
    padding: 14px 18px;
    gap: 14px;
  }

  .tmu-audio__meta {
    padding: 0 18px 16px;
  }

  .tmu-audio__waveform {
    height: 32px;
    padding: 0 18px;
  }

  /* ---- Show Tab Bar ---- */
  .tmu-tabbar {
    display: flex;
  }

  body.nova {
    padding-bottom: calc(68px + var(--tmu-safe-bottom));
  }

  /* ---- Page Content (old theme) ---- */
  .page-content {
    width: 100%;
    padding: 20px;
    margin-left: 0;
    background: rgba(10, 16, 27, 0.85);
  }

  .page-content:after,
  .page-content:before {
    display: none;
  }

  /* ---- Widget panels (old theme) ---- */
  .widget-fon,
  .widget-fon-guilds,
  .widget-fon-discussions {
    width: 100%;
    padding: 20px;
  }

  /* ---- Fast links ---- */
  .fast-links {
    flex-direction: column;
    gap: 12px;
  }

  .fast-links-left,
  .fast-links-center,
  .fast-links-right {
    width: 100%;
    height: auto;
    min-height: 110px;
    background-size: cover;
    padding: 20px;
  }

  .fast-links-left:before,
  .fast-links-center:before,
  .fast-links-right:before {
    display: none;
  }

  /* ---- Registration Page ---- */
  .tmu-reg {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tmu-reg__card {
    padding: 20px;
    border-radius: 16px;
  }

  .tmu-field__row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* ---- Rankings / Leaderboards Page ---- */
  .tmu-lb__head {
    padding: 16px 14px 14px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .tmu-lb__head-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .tmu-lb__title {
    font-size: 18px;
  }

  .tmu-lb__sub {
    font-size: 10px;
  }

  .tmu-lb__badge {
    width: 40px;
    height: 40px;
    font-size: 17px;
    border-radius: 10px;
  }

  .tmu-lb__head-right {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 5px;
  }

  .tmu-lb__head-right::-webkit-scrollbar {
    display: none;
  }

  .tmu-lb__tabs {
    padding: 10px 12px;
    gap: 4px;
    border-left: 0;
    border-right: 0;
  }

  .tmu-lb__tab {
    padding: 7px 12px;
    font-size: 10px;
    gap: 5px;
  }

  .tmu-lb__stage {
    padding: 12px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  /* ---- Ranking Cards Responsive ---- */
  .tmu-rank-list {
    gap: 6px;
  }

  /* All row types → compact stacked flex cards */
  .tmu-rank-row--players,
  .tmu-rank-row--guilds,
  .tmu-rank-row--killer,
  .tmu-rank-row--gens,
  .tmu-rank-row--simple,
  .tmu-rank-row--duels,
  .tmu-rank-row--cc,
  .tmu-rank-row--votes,
  .tmu-rank-row--online {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
    padding: 10px 12px;
    border-radius: 14px;
  }

  /* Position badge: fixed left */
  .tmu-rank-cell--pos {
    flex: 0 0 auto;
    order: 0;
  }

  .tmu-rank-pos {
    width: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 8px;
  }

  /* Identity cell: fills remaining first line */
  .tmu-rank-cell--identity {
    flex: 1 1 0;
    min-width: 0;
    order: 0;
    gap: 8px;
  }

  .tmu-rank-cell--identity a {
    font-size: 13px;
  }

  .tmu-rank-cell__sub {
    font-size: 10px;
  }

  /* Separator before stat row */
  .tmu-rank-row::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 1;
    margin: 6px 0 0;
  }

  /* Stat chips: tiny inline pills on second row */
  .tmu-rank-cell--stat {
    flex: 0 0 auto;
    order: 2;
    padding: 3px 8px;
    background: rgba(255, 100, 50, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(255, 100, 50, 0.07);
    min-width: 0;
    gap: 1px;
  }

  .tmu-rank-stat__val {
    font-size: 12px;
    font-weight: 700;
  }

  .tmu-rank-stat__lbl {
    font-size: 7px;
    letter-spacing: 0.12em;
  }

  /* Accent stat chip gets a slight color bg */
  .tmu-rank-cell--accent {
    background: rgba(255, 80, 40, 0.06);
    border-color: rgba(255, 80, 40, 0.12);
  }

  /* Location chip — even subtler */
  .tmu-rank-cell--loc {
    order: 2;
    flex: 0 0 auto;
    font-size: 10px;
    padding: 3px 8px;
    background: rgba(255, 100, 50, 0.04);
    border-radius: 6px;
    border: 1px solid rgba(255, 100, 50, 0.06);
    color: var(--tmu-muted);
  }

  /* Status dot */
  .nova-status-dot {
    width: 6px;
    height: 6px;
  }

  /* Class icon — tighter on mobile */
  .nova-class-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    margin-right: 0;
  }

  /* Gens badge in identity */
  .nova-gens-badge {
    font-size: 8px;
    padding: 2px 5px;
  }

  /* Class filter pills: horizontal scroll */
  .tmu-rank-filter {
    gap: 5px;
    padding: 10px 0;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .tmu-rank-filter::-webkit-scrollbar {
    display: none;
  }

  .tmu-rank-filter__btn {
    padding: 6px 12px;
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Search bar */
  .tmu-rank-search {
    max-width: 100%;
    margin: 16px 0 0;
    flex-direction: row;
  }

  .tmu-rank-search__input {
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 10px;
  }

  .tmu-rank-search__btn {
    padding: 10px 16px;
    font-size: 10px;
    border-radius: 10px;
  }

  /* Pagination */
  .tmu-rank-pagination {
    padding: 14px 0 0;
  }

  .tmu-rank-pagination .pagination li a,
  .tmu-rank-pagination .pagination li span {
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 8px;
  }

  /* Gens war bar */
  .tmu-gens-war {
    flex-direction: row;
    padding: 12px;
    gap: 8px;
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .tmu-gens-war__crest {
    width: 34px;
    height: 34px;
    font-size: 11px;
    border-radius: 8px;
  }

  .tmu-gens-war__values {
    font-size: 10px;
  }

  /* Guild marks in rank rows */
  .tmu-rank-guild-mark,
  .tmu-rank-guild-fallback {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 8px;
  }

  /* Empty state */
  .tmu-rank-empty {
    padding: 28px 14px;
    font-size: 12px;
    border-radius: 12px;
  }

  /* Top 3 medal glow — subtle on mobile */
  .tmu-rank-row--gold {
    border-color: rgba(255, 215, 0, 0.22);
  }
  .tmu-rank-row--silver {
    border-color: rgba(192, 192, 192, 0.18);
  }
  .tmu-rank-row--bronze {
    border-color: rgba(205, 127, 50, 0.18);
  }

  /* ---- Downloads Page ---- */
  .tmu-dl-grid {
    grid-template-columns: 1fr;
  }

  .tmu-dl-card {
    padding: 22px 18px;
    border-radius: 16px;
  }

  .tmu-specs__grid {
    grid-template-columns: 1fr;
  }

  /* ---- Character Page ---- */
  .tmu-char-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
    padding: 20px;
    border-radius: 16px;
  }

  .tmu-char-hero__portrait {
    justify-self: center;
  }

  .tmu-char-hero__stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .tmu-char-stat {
    padding: 10px 8px;
  }

  .tmu-char-stat__value {
    font-size: 16px;
  }

  .tmu-char-guild {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .tmu-char-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .tmu-char-equip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   <= 576px — Mobile Phone
   ========================================================================== */
@media (max-width: 576px) {
  body.nova {
    font-size: 13.5px;
    line-height: 1.6;
    padding-top: 64px;
  }

  :root {
    --tmu-mobile-nav-h: 64px;
  }

  .wrapper {
    padding: 0 0;
  }

  /* ---- Full-width app layout ---- */
  .mu-panel,
  .dmn-page-box {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 14px 12px;
  }

  .dmn-content {
    padding: 8px 0 32px;
  }

  .dmn-page-title {
    padding: 0 12px;
  }

  .mu-section {
    padding: 0 12px;
  }

  .mu-footer__grid {
    padding: 0 12px;
  }

  .mu-callout {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .tmu-realm__bar {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  /* ---- Top panel tighter ---- */
  .topPanel__inner {
    min-height: 64px;
    padding: 0 10px;
  }

  .topPanel__actions a {
    white-space: nowrap;
  }

  /* ---- Auth section compact ---- */
  .mu-auth .mu-link {
    display: none; /* Hide "Sign up" link, keep Log In button */
  }

  /* Hide login/signup in header (tab bar handles it) */
  .topPanel__actions .mu-btn--glow,
  .topPanel__actions .mu-link--signup {
    display: none;
  }

  .mu-btn,
  .btn,
  .button-small {
    width: auto;
    justify-content: center;
  }

  /* Account + lang stay as icon pills */
  .topPanel__actions .mu-btn--account,
  .topPanel__lang {
    width: 32px;
    height: 32px;
  }

  .h-button {
    width: 100%;
  }

  /* ---- Hero ---- */
  .tmu-hero__title {
    font-size: 22px;
    line-height: 1.18;
  }

  .tmu-hero__eyebrow {
    font-size: 9px;
    letter-spacing: 0.22em;
  }

  .tmu-hero__tagline {
    font-size: 9px;
    letter-spacing: 0.18em;
  }

  .tmu-hero__lead {
    font-size: 13px;
  }

  .tmu-hero__grid {
    padding: 0 12px;
  }

  .tmu-hero__grid::before {
    font-size: 100px;
    left: 0;
    top: -15px;
  }

  .tmu-hero__logo {
    width: clamp(160px, 55vw, 240px);
  }

  .tmu-intel-strip {
    padding: 8px 12px;
    gap: 6px 10px;
    border-radius: 14px;
  }

  .tmu-intel-strip__item {
    font-size: 9px;
  }

  /* ---- Showcase (576px) ---- */
  .tmu-showcase {
    border-radius: 12px;
    flex-wrap: wrap;
    gap: 0;
  }

  .tmu-showcase__cell {
    padding: 10px 14px;
    min-width: 0;
    flex: 1 1 45%;
  }

  .tmu-showcase__cell--rate .tmu-showcase__val {
    font-size: 18px;
  }

  .tmu-showcase__cell--online .tmu-showcase__val {
    font-size: 16px;
  }

  .tmu-showcase__cell--champion .tmu-showcase__val,
  .tmu-showcase__cell--guild .tmu-showcase__val {
    font-size: 12px;
    max-width: 90px;
  }

  .tmu-showcase__lbl {
    font-size: 7px;
    letter-spacing: 0.18em;
  }

  .tmu-showcase__sep {
    display: none;
  }

  .tmu-showcase__ping {
    top: 8px;
    right: 10px;
    width: 5px;
    height: 5px;
  }

  .mu-btn--lg {
    padding: 12px 20px;
    font-size: 11px;
  }

  .tmu-hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .tmu-hero__actions .mu-btn {
    width: 100%;
  }

  /* ---- Ticker ---- */
  .tmu-ticker__item {
    min-width: 150px;
    padding: 10px;
  }

  /* ---- Countdown ---- */
  .tmu-countdown--hero {
    padding: 14px 12px 16px;
  }

  .tmu-countdown--hero #timer_div_time {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap: 8px;
  }

  .tmu-countdown--hero .timmer_inner_block .count {
    font-size: 20px;
  }

  /* ---- Status (compact realm bar inherits 576px from above) ---- */
  .tmu-realm__stat-val {
    font-size: 14px;
  }

  .tmu-realm__stat-lbl {
    font-size: 8px;
  }

  /* ---- Sections ---- */
  .mu-section__title {
    font-size: 20px;
  }

  .mu-section__subtitle {
    font-size: 13px;
  }

  /* ---- Cards ---- */
  .mu-event-card,
  .mu-class-card,
  .mu-download-card,
  .mu-media-card {
    padding: 14px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .mu-event-grid,
  .mu-class-grid,
  .mu-download-grid,
  .mu-media-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .mu-grid--rankings,
  .mu-grid--community {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* ---- Atlas cards edge-to-edge ---- */
  .mu-atlas-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .mu-atlas-card {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 14px;
  }

  /* ---- Community widgets edge-to-edge ---- */
  .widget-fon-discussions {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  /* ---- Donate ---- */
  .tmu-donate-packages,
  .tmu-donate-packages--premium,
  .tmu-donate-methods__grid--cards {
    grid-template-columns: 1fr;
  }

  .tmu-donate-hero {
    padding: 14px;
  }

  .tmu-donate-card {
    min-height: 0;
  }

  .tmu-donate-flow__step {
    padding: 12px;
  }

  /* ---- Realm Cards ---- */
  .mu-realm-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Rankings Table ---- */
  .dmn-rankings-table thead th {
    font-size: 8px;
    padding: 6px;
    letter-spacing: 0.1em;
  }

  .dmn-rankings-table tbody td {
    padding: 8px 6px;
    font-size: 11px;
  }

  .dmn-rankings-table tbody td:first-child {
    border-radius: 10px 0 0 10px;
  }

  .dmn-rankings-table tbody td:last-child {
    border-radius: 0 10px 10px 0;
  }

  /* ---- Top Block (player list) ---- */
  .top-block li {
    padding: 8px;
    font-size: 11px;
  }

  .top-name {
    font-size: 11px;
  }

  .top-flag {
    width: 36px;
  }

  /* ---- Inventory ---- */
  #inventoryc {
    transform: scale(0.65);
    transform-origin: top center;
    margin-bottom: -80px;
  }

  /* ---- Registration 576px ---- */
  .tmu-reg__perk {
    padding: 12px;
  }

  .tmu-reg__perk-icon {
    width: 38px;
    height: 38px;
    font-size: 15px;
    border-radius: 10px;
  }

  .tmu-reg__card {
    padding: 16px;
    border-radius: 14px;
  }

  .tmu-reg__card-head {
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
  }

  .tmu-reg__card-icon {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .tmu-reg__card-title {
    font-size: 17px;
  }

  /* ---- Leaderboards 576px ---- */
  .tmu-lb__head {
    padding: 14px 12px 12px;
  }

  .tmu-lb__badge {
    width: 36px;
    height: 36px;
    font-size: 15px;
    border-radius: 8px;
  }

  .tmu-lb__title {
    font-size: 16px;
  }

  .tmu-lb__sub {
    font-size: 9px;
  }

  .tmu-lb__srv {
    padding: 5px 10px;
    font-size: 9px;
  }

  .tmu-lb__tabs {
    padding: 8px 10px;
    gap: 3px;
  }

  .tmu-lb__tab {
    padding: 6px 10px;
    font-size: 9px;
    gap: 4px;
  }

  .tmu-lb__stage {
    padding: 10px;
  }

  /* ---- Realm Status 576px ---- */
  .tmu-realm__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }

  .tmu-realm__live {
    align-self: flex-start;
  }

  .tmu-realm__stats {
    justify-content: space-between;
  }

  .tmu-realm__meter {
    min-width: 0;
    width: 100%;
  }

  /* ---- Downloads 576px ---- */
  .tmu-dl-card {
    padding: 18px 14px;
    border-radius: 14px;
    gap: 12px;
  }

  .tmu-dl-card__icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
    border-radius: 14px;
  }

  .tmu-specs__card {
    padding: 16px;
    border-radius: 14px;
  }

  /* ---- Character 576px ---- */
  .tmu-char-hero {
    padding: 16px;
    gap: 16px;
    border-radius: 14px;
  }

  .tmu-char-hero__portrait .nova-class-portrait {
    width: 90px;
    height: 90px;
    border-radius: 20px;
  }

  .tmu-char-hero__portrait .nova-class-portrait img {
    width: 62px;
    height: 62px;
  }

  .tmu-char-hero__name {
    font-size: 17px;
  }

  .tmu-char-hero__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .tmu-char-stat {
    padding: 10px 8px;
  }

  .tmu-char-stat__value {
    font-size: 15px;
  }

  .tmu-char-stat__label {
    font-size: 8px;
  }

  .tmu-char-section__title {
    font-size: 12px;
  }

  .tmu-char-info {
    padding: 10px 12px;
  }

  .tmu-char-info__label {
    font-size: 10px;
  }

  .tmu-char-info__value {
    font-size: 12px;
  }

  .tmu-char-guild {
    padding: 14px;
  }

  /* ---- Modal ---- */
  .modal_window h3 {
    font-size: 16px;
  }

  .tmu-auth-modal__header h3 {
    font-size: 18px;
  }

  .tmu-account-modal__header h3 {
    font-size: 22px;
  }

  /* ---- Float buttons ---- */
  .tmu-float-stack {
    right: 10px;
    bottom: calc(74px + var(--tmu-safe-bottom));
    gap: 8px;
  }

  .tmu-float {
    width: 46px;
    height: 46px;
  }

  /* Audio panel inherits the full-width bottom sheet from 768bp */

  /* Volume popover: narrower on small screens */
  .tmu-audio__mobile-volume {
    width: 80px;
  }

  /* ---- Discord modal ---- */
  .tmu-discord-modal__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* ---- Rankings 576px tighter ---- */
  .rankings .text-center[id^="rankings_select_"] .btn {
    flex: 1 1 100%;
    font-size: 10px;
    min-height: 36px;
  }

  .dmn-page-content h2.title {
    font-size: 16px;
  }

  .dmn-rankings-table thead th {
    font-size: 8px;
    padding: 6px 5px;
    letter-spacing: 0.08em;
  }

  .dmn-rankings-table tbody td {
    padding: 8px 5px;
    font-size: 11px;
  }

  .nova-class-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    margin-right: 4px;
  }

  .nova-class-name {
    font-size: 11px;
  }

  .nova-status {
    font-size: 8px;
    padding: 2px 6px;
  }

  /* ---- Legacy input widths ---- */
  input:not([type='checkbox']):not([type='radio']):not([type='file']):not(.form-control):not([type='number']),
  textarea,
  select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ---- Buttons (legacy) ---- */
  .button {
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    display: block;
    background-size: contain;
    background-position: center;
  }

  .button-small {
    width: auto;
    min-width: 0;
  }

  .buttons-block {
    position: relative;
    bottom: auto;
    left: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }

  /* ---- Page text ---- */
  .page-top {
    font-size: 16px;
    padding-top: 20px;
  }

  .page-title {
    padding-top: 20px;
    padding-bottom: 16px;
  }

  /* ---- Class portrait ---- */
  .nova-class-portrait {
    width: 72px;
    height: 72px;
  }

  .nova-class-portrait img {
    width: 48px;
    height: 48px;
  }
}

/* ==========================================================================
   <= 400px — Extra Small Phone
   ========================================================================== */
@media (max-width: 400px) {
  body.nova {
    font-size: 13px;
  }

  .wrapper {
    padding: 0 0;
  }

  .tmu-hero__grid {
    padding: 0 10px;
  }

  .tmu-hero__title {
    font-size: 20px;
  }

  .tmu-hero__lead {
    font-size: 13px;
  }

  .tmu-hero__logo {
    width: clamp(140px, 58vw, 200px);
  }

  .tmu-intel-strip {
    padding: 8px 10px;
    gap: 4px 8px;
  }

  .tmu-intel-strip__item {
    font-size: 8px;
    gap: 4px;
  }

  /* ---- Showcase (400px) ---- */
  .tmu-showcase__cell {
    padding: 8px 10px;
    flex: 1 1 45%;
  }

  .tmu-showcase__cell--rate .tmu-showcase__val {
    font-size: 16px;
  }

  .tmu-showcase__cell--online .tmu-showcase__val {
    font-size: 14px;
  }

  .tmu-showcase__cell--champion .tmu-showcase__val,
  .tmu-showcase__cell--guild .tmu-showcase__val {
    font-size: 11px;
    max-width: 75px;
  }

  .tmu-showcase__icon {
    font-size: 10px;
  }

  .tmu-showcase__lbl {
    font-size: 6px;
    letter-spacing: 0.14em;
  }

  .mu-btn--lg {
    padding: 11px 16px;
    font-size: 10px;
  }

  .dmn-page-title {
    padding: 0 10px;
  }

  .mu-section {
    padding: 0 10px;
  }

  .mu-footer__grid {
    padding: 0 10px;
  }

  .mu-panel,
  .dmn-page-box {
    padding: 12px 10px;
  }

  .tmu-countdown--hero #timer_div_time {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .tmu-countdown--hero .timmer_inner_block .count {
    font-size: 18px;
  }

  .mu-section__title {
    font-size: 18px;
  }

  .tmu-hero__sigil {
    width: 170px;
    height: 170px;
  }

  .tmu-orb__core {
    inset: 50px;
  }

  .topPanel__actions .mu-btn,
  .topPanel__actions .mu-link {
    font-size: 9px;
    padding: 5px 8px;
    min-height: 30px;
  }

  .tmu-account-modal__actions .mu-btn {
    min-width: 0;
    width: 100%;
  }

  .tmu-account-modal__footer .mu-btn {
    min-width: 0;
    width: 100%;
  }

  #inventoryc {
    transform: scale(0.55);
    transform-origin: top center;
    margin-bottom: -100px;
  }

  /* ---- Registration 400px ---- */
  .tmu-reg__perks {
    gap: 10px;
  }

  .tmu-reg__perk {
    padding: 10px;
    gap: 10px;
    border-radius: 12px;
  }

  .tmu-reg__card {
    padding: 14px;
  }

  .tmu-reg__card-head {
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  /* ---- Character 400px ---- */
  .tmu-char-hero {
    padding: 14px;
    gap: 14px;
  }

  .tmu-char-hero__portrait .nova-class-portrait {
    width: 76px;
    height: 76px;
  }

  .tmu-char-hero__portrait .nova-class-portrait img {
    width: 52px;
    height: 52px;
  }

  .tmu-char-hero__name {
    font-size: 15px;
  }

  .tmu-char-hero__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .tmu-char-stat__value {
    font-size: 14px;
  }

  /* ---- Downloads 400px ---- */
  .tmu-dl-card {
    padding: 14px 12px;
  }

  .tmu-dl-card__icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
    border-radius: 12px;
  }
}

/* ==========================================================================
   Touch & Interaction Improvements
   ========================================================================== */

/* Larger tap targets for all interactive elements on touch devices */
@media (hover: none) and (pointer: coarse) {
  a,
  button,
  .mu-btn,
  .btn,
  .button-small,
  .mu-link,
  .nav-link,
  .tab-button,
  .tmu-float,
  .hidden-block a,
  .hidden-block-account a,
  .f-menu li a,
  .newsContent,
  .discussionsContent {
    min-height: var(--tmu-touch-min);
  }

  .topPanel__menu li a,
  .menu li a {
    min-height: var(--tmu-touch-min);
    padding: 12px 14px;
  }

  /* Remove hover transforms on touch (prevent sticky hover) */
  .mu-event-card:hover,
  .mu-class-card:hover,
  .mu-download-card:hover,
  .mu-media-card:hover,
  .mu-panel:hover,
  .mu-realm-card:hover,
  .tmu-operation-card:hover,
  .tmu-donate-card:hover,
  .mu-atlas-card:hover,
  .mu-item-card:hover,
  .mu-timeline__item:hover,
  .top-block li:hover {
    transform: none;
  }

  /* Smooth momentum scrolling */
  .tmu-ticker__track {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }

  /* Prevent text selection on interactive elements */
  .mu-btn,
  .btn,
  .button-small,
  .topPanel__burger,
  .tmu-tabbar__item,
  .tab-button {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Active state feedback for tap */
  .mu-btn:active,
  .btn:active,
  .button-small:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
  }

  .menu li a:active {
    background: rgba(255, 100, 50, 0.2) !important;
    transition-duration: 0.1s;
  }

  .newsContent:active,
  .discussionsContent:active {
    background: rgba(255, 100, 50, 0.12);
  }
}

/* ==========================================================================
   Landscape Phone
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  body.nova {
    padding-top: 56px;
  }

  :root {
    --tmu-mobile-nav-h: 56px;
  }

  .topPanel__inner {
    min-height: 56px;
  }

  .topPanel__nav.active {
    top: 56px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }

  .tmu-hero {
    padding: 16px 0 12px;
  }

  .tmu-hero__sigil {
    width: 160px;
    height: 160px;
  }

  .tmu-hero__title {
    font-size: 24px;
  }

  .mu-section {
    margin: 24px 0;
  }

  .modalx-overlay {
    padding: 20px 8px;
  }
}

/* ==========================================================================
   Audio‑Reactive — Mobile Overrides (reduced intensity for performance)
   ========================================================================== */
@media (max-width: 768px) {

  /* Disable the body vignette overlay on mobile (saves compositing) */
  body.is-audio-playing::after {
    display: none;
  }

  /* Disable body background-size animation on mobile */
  body.is-audio-playing.nova {
    background-size: 100% 100% !important;
    transition: none !important;
  }

  /* Simplified hero glow — just border-color shift */
  body.is-audio-playing .tmu-hero::after {
    transform: none;
    box-shadow: none;
    border-color: rgba(255, 100, 50, calc(0.22 + 0.25 * var(--tmu-rx-beat)));
    transition: border-color 0.1s linear;
  }

  /* Showcase border only (no spread shadow) */
  body.is-audio-playing .tmu-showcase {
    box-shadow: 0 4px 20px rgba(3, 6, 12, 0.3);
    border-color: rgba(255, 100, 50, calc(0.18 + 0.3 * var(--tmu-rx-mid)));
    transition: border-color 0.1s linear;
  }

  /* Realm bar — simpler glow */
  body.is-audio-playing .tmu-realm__bar {
    box-shadow:
      0 10px 28px rgba(3, 6, 12, 0.5),
      0 0 calc(6px + 12px * var(--tmu-rx-bass)) rgba(255, 80, 40, calc(0.05 + 0.1 * var(--tmu-rx-bass)));
    transition: box-shadow 0.1s linear;
  }

  /* Ranking rows — no translateX sway */
  body.is-audio-playing .tmu-rank-row,
  body.is-audio-playing .tmu-rank-row:nth-child(odd),
  body.is-audio-playing .tmu-rank-row:nth-child(even) {
    transform: none;
    border-color: rgba(255, 100, 50, calc(0.12 + 0.15 * var(--tmu-rx-mid)));
    box-shadow: none;
    transition: border-color 0.12s linear;
  }

  /* Medal glow is kept but reduced */
  body.is-audio-playing .tmu-rank-pos--gold {
    box-shadow: 0 0 calc(6px + 8px * var(--tmu-rx-beat)) rgba(255, 215, 0, calc(0.25 + 0.25 * var(--tmu-rx-beat)));
  }

  /* Audio bubble keeps its reactive glow */
  body.is-audio-playing .tmu-float--audio {
    transform: scale(calc(1 + 0.03 * var(--tmu-rx-beat)));
  }

  /* Waveform bars stay reactive (they're in the audio panel) */
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
  .topPanel,
  .tmu-side-banner,
  .tmu-float-stack,
  .tmu-tabbar,
  .topPanel__burger,
  .topPanel__nav,
  .mu-footer,
  .toTop-fon,
  .sparks,
  .sparks2,
  .ani,
  .smoke {
    display: none !important;
  }

  body.nova {
    padding-top: 0;
    background: #fff;
    color: #000;
  }

  .wrapper {
    max-width: 100%;
    padding: 0;
  }

  a {
    color: #000;
  }
}

/* ==========================================================================
   Scrollbar — Thin, Themed (mobile nav drawer)
   ========================================================================== */
@media (max-width: 992px) {
  .topPanel__nav.active::-webkit-scrollbar {
    width: 4px;
  }

  .topPanel__nav.active::-webkit-scrollbar-track {
    background: rgba(6, 10, 18, 0.4);
  }

  .topPanel__nav.active::-webkit-scrollbar-thumb {
    background: rgba(255, 100, 50, 0.3);
    border-radius: 4px;
  }

  .topPanel__nav.active {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 100, 50, 0.3) rgba(6, 10, 18, 0.4);
  }
}

/* ==========================================================================
   Mobile Overlay (prevent scroll when nav open)
   ========================================================================== */
body.nova.nav-open {
  overflow: hidden;
}

body.nova.nav-open::before,
body.nova.nav-open::after {
  pointer-events: none;
}