/* Mobile-only responsive refinements for World Cup 2026 Group Memorizer
   Desktop styles are intentionally left alone. */

.wcgm-plugin-shell {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 760px) {
  .wcgm-plugin-shell,
  .wcgm-plugin-shell * {
    box-sizing: border-box;
  }

  .wcgm-plugin-shell {
    overflow-x: hidden;
  }

  .wcgm-plugin-shell button,
  .wcgm-plugin-shell input,
  .wcgm-plugin-shell summary {
    -webkit-tap-highlight-color: rgba(15, 23, 42, 0.12);
  }

  .wcgm-plugin-shell button {
    touch-action: manipulation;
    min-height: 48px !important;
    font-size: 15px !important;
  }

  .wcgm-plugin-shell input {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  .wcgm-plugin-shell [style*="min-height: 100vh"] {
    padding: 12px !important;
  }

  .wcgm-plugin-shell [style*="max-width: 1180px"] {
    max-width: 100% !important;
  }

  .wcgm-plugin-shell [style*="border-radius: 28px"] {
    border-radius: 20px !important;
  }

  .wcgm-plugin-shell [style*="padding: 32px"] {
    padding: 20px !important;
  }

  .wcgm-plugin-shell [style*="padding: 30px"] {
    padding: 20px !important;
  }

  .wcgm-plugin-shell [style*="padding: 36px"] {
    padding: 22px 14px !important;
  }

  .wcgm-plugin-shell h1,
  .wcgm-plugin-shell [style*="clamp(34px"] {
    font-size: 34px !important;
    letter-spacing: -1px !important;
  }

  .wcgm-plugin-shell p {
    font-size: 16px !important;
  }

  .wcgm-plugin-shell [style*="display: grid"] {
    grid-template-columns: 1fr !important;
  }

  .wcgm-plugin-shell [style*="minmax(0,1.1fr)"],
  .wcgm-plugin-shell [style*="minmax(0,1.2fr)"],
  .wcgm-plugin-shell [style*="minmax(250px,.8fr)"],
  .wcgm-plugin-shell [style*="minmax(260px,.8fr)"] {
    grid-template-columns: 1fr !important;
  }

  .wcgm-plugin-shell [style*="repeat(auto-fit,minmax(220px,1fr))"] {
    grid-template-columns: 1fr !important;
  }

  .wcgm-plugin-shell [style*="repeat(auto-fit,minmax(54px,1fr))"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .wcgm-plugin-shell nav {
    position: sticky !important;
    top: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 12px 0 !important;
    padding: 8px 0 !important;
  }

  .wcgm-plugin-shell nav button {
    flex: none !important;
    min-height: 44px !important;
    padding: 9px 8px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }

  .wcgm-plugin-shell [style*="display: flex"] {
    max-width: 100% !important;
  }

  .wcgm-plugin-shell [style*="justify-content: space-between"] {
    align-items: stretch !important;
  }

  .wcgm-plugin-shell [style*="font-size: 84px"] {
    font-size: 56px !important;
  }

  .wcgm-plugin-shell [style*="font-size: 42px"] {
    font-size: 32px !important;
    overflow-wrap: anywhere !important;
  }

  .wcgm-plugin-shell [style*="font-size: 34px"] {
    font-size: 28px !important;
  }

  .wcgm-plugin-shell [style*="font-size: 28px"] {
    font-size: 24px !important;
  }

  .wcgm-plugin-shell [style*="font-size: 20px"] {
    font-size: 18px !important;
  }

  .wcgm-plugin-shell [style*="width: 72px"] svg,
  .wcgm-plugin-shell [style*="width: 72px"] {
    width: 56px !important;
    height: 56px !important;
    font-size: 56px !important;
  }

  .wcgm-plugin-shell [style*="border-radius: 24px"] {
    border-radius: 18px !important;
  }

  .wcgm-plugin-shell [style*="padding: 20px"] {
    padding: 16px !important;
  }

  .wcgm-plugin-shell [style*="margin-left: 8px"] {
    margin-left: 0 !important;
  }

  .wcgm-plugin-shell [style*="flex: 1 1 180px"] {
    flex: 1 1 calc(50% - 8px) !important;
  }

  .wcgm-plugin-shell [style*="min-width: 260px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  .wcgm-plugin-shell [style*="text-align: right"] {
    text-align: left !important;
    margin-top: 8px !important;
  }
}

@media (max-width: 420px) {
  .wcgm-plugin-shell [style*="min-height: 100vh"] {
    padding: 10px !important;
  }

  .wcgm-plugin-shell [style*="repeat(4, minmax(0, 1fr))"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .wcgm-plugin-shell nav button {
    font-size: 12px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .wcgm-plugin-shell button {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}