/* ============================================
   Rate Goals - Responsive Styles
   All media queries consolidated by breakpoint
   ============================================ */

/* ===========================================
   Touch Optimization
   Eliminate 300ms tap delay on mobile devices
   =========================================== */

.vote-btn,
.mobile-vote-btn,
.next-matchup-btn-desktop,
button,
a.button,
.navbar-item.is-clickable {
  touch-action: manipulation;
}

/* Screen reader only class for accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================
   Desktop (min-width: 769px)
   =========================================== */

@media screen and (min-width: 769px) {
  /* Game container desktop layout */
  .game-container {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }

  .game-container .columns {
    overflow: hidden;
    height: calc(100vh - 3.5rem);
    max-height: calc(100vh - 3.5rem);
  }

  .game-container .column .hero {
    overflow: hidden;
  }

  .game-container .container.p-4 {
    overflow: hidden;
  }

  /* Vote button desktop adjustments */
  .vote-btn:hover {
    transform: translateY(-2px);
  }
}

/* ===========================================
   Tablet (max-width: 1024px)
   =========================================== */

@media screen and (max-width: 1024px) {
  .clip-verify-container .box {
    padding: 1rem;
  }

  .clip-verify-container .field {
    margin-bottom: 0.75rem;
  }
}

/* ===========================================
   Mobile (max-width: 768px)
   =========================================== */

@media screen and (max-width: 768px) {
  /* Filter bar adjustments */
  .filter-bar {
    gap: 8px;
  }

  .filter-dropdown {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  .filter-dropdown .select,
  .filter-dropdown .select select {
    width: 100%;
    min-width: 0;
  }

  .filter-toggle {
    order: -1;
    width: 100%;
    justify-content: center;
  }

  .clear-filters-btn {
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
  }

  /* Pagination controls */
  .pagination-controls {
    flex-direction: column;
    gap: 12px;
    padding: 12px 15px;
  }

  .pagination-info {
    order: 1;
    text-align: center;
    width: 100%;
  }

  .page-size-select {
    order: 2;
    justify-content: center;
  }

  .pagination-controls .pagination {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .pagination-controls .pagination-previous,
  .pagination-controls .pagination-next {
    padding: 0 8px;
    min-width: 32px;
    height: 32px;
  }

  .pagination-controls .pagination-link {
    min-width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .pagination-controls .pagination-list {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Video container */
  .video-container {
    padding-bottom: 56.25%; /* Maintain 16:9 on mobile */
  }

  .video-wrapper {
    padding-bottom: 56.25%; /* Maintain 16:9 aspect ratio */
  }

  .responsive-video-container {
    max-width: 100%;
  }

  /* Hero adjustments */
  .hero-body .columns {
    margin: 0;
  }

  .hero-landing {
    border-radius: 0 0 12px 12px;
  }

  /* Column adjustments */
  .column {
    padding: 0.25rem;
  }

  /* Stats box */
  .stats-box {
    min-width: 80px;
    padding: 0.35rem;
  }

  .stats-box .is-size-1 {
    font-size: 1.25rem;
  }

  /* Game container mobile */
  .game-container .title.is-2 {
    font-size: 1.4rem;
  }

  .game-container .video-container {
    padding-top: 56.25%;
  }

  /* Player header */
  .player-header .title {
    font-size: 1.4rem;
  }

  .player-header .subtitle {
    font-size: 0.85rem;
  }

  /* Navbar mobile */
  .navbar-item .button {
    font-size: 0.9rem;
    padding: 0 0.75rem;
  }

  .button.is-info.is-responsive,
  .button.is-primary.is-responsive {
    font-size: 0.9rem;
  }

  /* Table header fixed */
  .table-header-fixed {
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--bg-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  /* Ensure parent containers don't break sticky */
  .results-table-page,
  .results-table-page .container,
  .results-table-page .box {
    overflow: visible !important;
  }

  .table-header-fixed .level {
    flex-direction: column;
    align-items: flex-start;
  }

  .table-header-fixed .level-left {
    margin-bottom: 10px;
  }

  .table-header-fixed .title.is-4 {
    font-size: 1.2rem;
  }

  .table-header-fixed .tag.is-info.is-medium {
    font-size: 0.8rem;
  }

  /* Responsive table cards */
  .table-responsive-cards thead {
    display: none;
  }

  .table-responsive-cards tbody,
  .table-responsive-cards tr,
  .table-responsive-cards th,
  .table-responsive-cards td {
    display: block;
    width: 100%;
  }

  .table-responsive-cards tbody tr {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--card-shadow);
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.9rem;
  }

  .table-responsive-cards tbody tr:last-child {
    margin-bottom: 0.25rem;
  }

  .table-responsive-cards tbody tr.top-ranked-gold,
  .table-responsive-cards tbody tr.top-ranked-silver,
  .table-responsive-cards tbody tr.top-ranked-bronze {
    background: var(--card-bg);
  }

  .table-responsive-cards tbody tr > th,
  .table-responsive-cards tbody tr > td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.1);
  }

  .table-responsive-cards tbody tr > th:last-child,
  .table-responsive-cards tbody tr > td:last-child {
    border-bottom: none;
  }

  .table-responsive-cards tbody tr > th::before,
  .table-responsive-cards tbody tr > td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    font-weight: 600;
  }

  .table-responsive-cards tbody tr > th.has-text-centered,
  .table-responsive-cards tbody tr > td.has-text-centered {
    justify-content: space-between;
    text-align: right;
  }

  .table-responsive-cards .medal-badge,
  .table-responsive-cards .rank-badge {
    margin-left: auto;
  }

  .table-responsive-cards .player-link {
    margin-left: auto;
  }

  .table-responsive-cards .rating-cell {
    font-size: 1rem;
  }

  /* Section & card adjustments */
  .section-card,
  .soft-card {
    border-radius: 14px;
  }

  .section {
    padding: 1.5rem 1rem;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .box {
    padding: 1rem;
  }

  .columns.is-variable {
    --columnGap: 1rem;
  }

  /* Game container mobile layout */
  .game-container {
    padding: 0.5rem;
  }

  .game-container .column {
    margin-bottom: 0.75rem;
  }

  .game-container .navbar {
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.75rem;
  }

  .results-container {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
  }

  /* Navbar mobile layout */
  .navbar {
    padding: 0.35rem 0.5rem;
    height: auto;
    min-height: 3rem;
  }

  .navbar-brand {
    width: 100%;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .navbar-item.is-clickable,
  .navbar-brand > a.navbar-item {
    font-size: 1rem;
    flex-shrink: 0;
    padding-left: 0;
    padding-right: 0.5rem;
  }

  .navbar-end {
    gap: 0.25rem;
    flex-shrink: 0;
    overflow: visible;
  }

  /* Hide share button text on mobile, show only icon */
  .share-btn span:not(.icon) {
    display: none;
  }

  .share-btn {
    padding: 0.35rem 0.5rem;
    margin-right: 0.25rem;
  }

  .vote-counter {
    padding: 0.2rem 0.4rem;
    margin-right: 0.25rem;
  }

  .vote-counter span {
    font-size: 0.7rem;
  }

  /* Make navbar buttons smaller on mobile */
  .navbar-item .button {
    padding: 0 0.5rem;
    height: 2.25rem;
    font-size: 0.85rem;
  }

  .navbar-item {
    padding: 0.25rem;
  }

  /* Vote button mobile */
  .vote-btn {
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
  }

  .vote-btn:hover {
    transform: none;
  }

  .vote-btn:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.9);
  }
}

/* ===========================================
   Tablet Range (600px - 768px)
   =========================================== */

@media screen and (min-width: 600px) and (max-width: 768px) {
  .clip-verify-container .columns.is-tablet > .column {
    flex: none;
  }

  .clip-verify-container .columns.is-tablet > .column:first-child {
    width: 55%;
  }

  .clip-verify-container .columns.is-tablet > .column:last-child {
    width: 45%;
  }
}

/* ===========================================
   Small Mobile (max-width: 640px)
   =========================================== */

@media screen and (max-width: 640px) {
  /* Compact horizontal buttons with icon + short text - applies to ALL navbar buttons */
  .navbar-end .navbar-item .button,
  .navbar-end .share-btn {
    flex-direction: row !important;
    padding: 0.4rem 0.6rem !important;
    height: auto !important;
    min-height: 2rem !important;
    width: auto !important;
    gap: 4px !important;
    font-size: 0.7rem !important;
    border-radius: 6px !important;
  }

  .navbar-end .navbar-item .button .icon,
  .navbar-end .share-btn .icon {
    margin: 0 !important;
    width: 1rem !important;
    height: 1rem !important;
    font-size: 0.75rem !important;
  }

  .navbar-end .navbar-item .button .button-text,
  .navbar-end .share-btn .button-text {
    display: inline !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  /* Home page CTA keeps original layout */
  .home-cta .button-text {
    font-size: inherit !important;
  }

  .home-cta .navbar-item .button {
    width: 100% !important;
    height: auto !important;
    padding: 0.65rem 1rem !important;
    justify-content: center !important;
    font-size: inherit !important;
    border-radius: inherit !important;
  }

  /* Navbar mobile layout */
  .navbar {
    padding: 0.35rem 0.5rem !important;
  }

  .navbar-brand {
    gap: 0.25rem;
  }

  .navbar-brand > a.navbar-item {
    font-size: 0.95rem !important;
    white-space: nowrap;
    padding: 0 !important;
  }

  .navbar-end--flex {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  .navbar-item {
    padding: 0 !important;
  }

  /* Vote counter - compact pill style */
  .vote-counter {
    display: flex !important;
    padding: 0.2rem 0.5rem !important;
    font-size: 0.7rem !important;
    border-radius: 999px !important;
    background: rgba(14, 165, 165, 0.15) !important;
    border: 1px solid rgba(14, 165, 165, 0.3) !important;
    white-space: nowrap !important;
  }

  .vote-counter__text {
    font-size: 0.7rem !important;
  }

  .streak-badge {
    display: none !important;
  }
}

/* ===========================================
   Extra Small Mobile (max-width: 599px)
   =========================================== */

@media screen and (max-width: 599px) {
  .clip-verify-container .columns.is-tablet > .column {
    width: 100% !important;
    flex: none;
  }
}

/* ===========================================
   Tiny Screens (max-width: 400px)
   =========================================== */

@media screen and (max-width: 400px) {
  .navbar-brand > a.navbar-item {
    font-size: 0.8rem !important;
  }

  /* Even more compact on tiny screens - consistent for all buttons */
  .navbar-end .navbar-item .button,
  .navbar-end .share-btn {
    padding: 0.3rem 0.45rem !important;
    gap: 3px !important;
  }

  .navbar-end .navbar-item .button .button-text,
  .navbar-end .share-btn .button-text {
    font-size: 0.6rem !important;
  }

  /* Hide vote counter on very small screens */
  .vote-counter {
    display: none !important;
  }
}