/* BloodLine V12 - Mobile Hard Fix
   This file is loaded AFTER style.css. It intentionally overrides heavy desktop effects. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 900px), (pointer: coarse) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    scroll-behavior: auto !important;
  }

  body.v12-mobile-hardfix {
    background: #05060b !important;
    line-height: 1.75 !important;
    text-rendering: optimizeSpeed !important;
  }

  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
    transform-style: flat !important;
    will-change: auto !important;
  }

  .bloodline-particles,
  .cursor-glow,
  .blood-drips,
  .bg-orb,
  .moon,
  .portal-frame,
  .portal-core,
  .portal-spark,
  .cube,
  .sword,
  .minecraft-stage::before,
  .glitch-title::before,
  .glitch-title::after,
  .hero-card::before,
  .card::after,
  .btn::before {
    display: none !important;
    content: none !important;
  }

  .bg-grid {
    opacity: .08 !important;
    animation: none !important;
    background-size: 34px 34px !important;
  }

  .bg-vignette {
    background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)) !important;
  }

  .site-header {
    position: sticky !important;
    top: 8px !important;
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    margin: 8px auto 0 !important;
    padding: 9px 10px !important;
    border-radius: 18px !important;
    backdrop-filter: none !important;
    background: rgba(8, 10, 16, .96) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.42) !important;
  }

  .site-header::after { display:none !important; }

  .brand {
    min-width: 0 !important;
    gap: 8px !important;
  }

  .brand-logo-wrap,
  .brand-mark {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 12px !important;
    box-shadow: 0 0 12px rgba(255, 23, 79, .35) !important;
  }

  .brand-logo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .brand-text {
    font-size: clamp(.92rem, 4.8vw, 1.12rem) !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  .nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 13px !important;
    flex: 0 0 42px !important;
  }

  .nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(8, 10, 16, .98) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.55) !important;
  }

  .nav.open { display: flex !important; }

  .nav a,
  .nav .link-button,
  .nav form,
  .nav .btn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    border-radius: 14px !important;
  }

  .page-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px auto 34px !important;
    padding: 0 12px !important;
  }

  .hero,
  .hero.hero-bloodline {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 18px !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  .hero-copy {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    text-align: right !important;
    padding-top: 8px !important;
    overflow: visible !important;
  }

  .eyebrow {
    font-size: .78rem !important;
    line-height: 1.7 !important;
    letter-spacing: .04em !important;
    word-break: break-word !important;
  }

  .hero-copy h1,
  .glitch-title {
    display: block !important;
    position: static !important;
    font-size: clamp(2rem, 11vw, 3.05rem) !important;
    line-height: 1.12 !important;
    margin: 8px 0 10px !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    filter: none !important;
    text-shadow: 0 0 14px rgba(255,23,79,.28) !important;
  }

  .hero-subtitle {
    font-size: clamp(1rem, 5vw, 1.25rem) !important;
    line-height: 1.7 !important;
    margin: 8px 0 !important;
    overflow-wrap: anywhere !important;
  }

  .hero-text,
  .card p,
  .panel p,
  .timeline-item p {
    font-size: .96rem !important;
    line-height: 1.9 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .hero-actions,
  .actions,
  .compact-form,
  .ticket-filters {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .hero-actions .btn,
  .btn,
  button.btn,
  a.btn {
    width: 100% !important;
    min-height: 46px !important;
    padding: 11px 14px !important;
    text-align: center !important;
    white-space: normal !important;
    transform: none !important;
    box-shadow: 0 10px 26px rgba(255,23,79,.20) !important;
  }

  .minecraft-stage {
    order: 2 !important;
    display: block !important;
    position: static !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    perspective: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  .server-card,
  .hero-card.server-card {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px 13px !important;
    border-radius: 20px !important;
    backdrop-filter: none !important;
    transform: none !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.42) !important;
    overflow: hidden !important;
  }

  .server-status-dot {
    width: 12px !important;
    height: 12px !important;
    animation: none !important;
  }

  .server-card h2 {
    font-size: clamp(1rem, 7vw, 1.35rem) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    direction: ltr !important;
    text-align: right !important;
    margin: 4px 0 8px !important;
  }

  .network-modes {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    margin-top: 12px !important;
  }

  .network-modes-head,
  .mode-row,
  .mode-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    align-items: start !important;
    width: 100% !important;
  }

  .network-mode-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 10px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .network-modes-head span,
  .network-modes-head b,
  .mode-row strong,
  .mode-status,
  .mode-meta span,
  .mode-meta small {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: right !important;
  }

  .mode-status {
    width: fit-content !important;
    padding: 4px 8px !important;
  }

  .player-bar {
    height: 6px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  .section-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 30px 0 14px !important;
  }

  .section-head h1,
  .section-head h2 {
    font-size: clamp(1.35rem, 8vw, 2rem) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .grid,
  .cards-grid,
  .shop-grid,
  .event-grid,
  .stats-grid,
  .dashboard-grid,
  .status-overview,
  .form-grid,
  .payment-grid,
  .admin-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .card,
  .panel,
  .stat-card,
  .auth-panel,
  .timeline-item {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 18px !important;
    padding: 14px !important;
    backdrop-filter: none !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.34) !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .card h3,
  .panel h3,
  .timeline-item h3 {
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }

  .card-image {
    height: 132px !important;
    border-radius: 16px !important;
  }

  .auth-wrap {
    display: block !important;
    min-height: 0 !important;
    padding: 8px 0 20px !important;
  }

  input, textarea, select {
    font-size: 16px !important;
    padding: 12px 12px !important;
    border-radius: 13px !important;
  }

  .table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 16px !important;
  }

  table {
    min-width: 620px !important;
    font-size: .88rem !important;
  }

  th, td {
    padding: 9px !important;
    vertical-align: top !important;
  }

  .admin-nav {
    top: 66px !important;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    backdrop-filter: none !important;
  }

  .admin-nav a {
    font-size: .86rem !important;
    padding: 8px 10px !important;
  }

  .ticket-message.user,
  .ticket-message.admin {
    margin: 0 !important;
  }

  .toast {
    width: calc(100% - 22px) !important;
    max-width: 460px !important;
    white-space: normal !important;
    border-radius: 16px !important;
    text-align: center !important;
  }

  .footer {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 26px auto 16px !important;
    padding: 12px 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    font-size: .8rem !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 380px) {
  .brand-text { font-size: .88rem !important; }
  .hero-copy h1, .glitch-title { font-size: 1.88rem !important; }
  .server-card, .hero-card.server-card { padding: 13px 11px !important; }
  .network-mode-card { padding: 9px !important; }
}