/*
 * HAWK-EYE Robot Profile mobile layout.
 * Fine-pointer desktop keeps the existing profile UI untouched.
 */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  /* Profile tabs: balanced 3 + 2 grid on narrow/touch viewports. */
  main > div[class*="max-w-6xl"] > div.min-w-0 > button.btn.mb-3.inline-flex ~ div.flex.gap-1.overflow-x-auto.mb-3.pb-1 {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  main > div[class*="max-w-6xl"] > div.min-w-0 > button.btn.mb-3.inline-flex ~ div.flex.gap-1.overflow-x-auto.mb-3.pb-1 > button {
    min-width: 0;
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  main > div[class*="max-w-6xl"] > div.min-w-0 > button.btn.mb-3.inline-flex ~ div.flex.gap-1.overflow-x-auto.mb-3.pb-1 > button:nth-child(-n + 3) {
    grid-column: span 2;
  }

  main > div[class*="max-w-6xl"] > div.min-w-0 > button.btn.mb-3.inline-flex ~ div.flex.gap-1.overflow-x-auto.mb-3.pb-1 > button:nth-child(n + 4) {
    grid-column: span 3;
  }

  /*
   * Records: mirror the mobile Statistics language — discrete dense cards,
   * readable metadata, no horizontal panning. Desktop markup stays untouched.
   */
  .overflow-x-auto:has(> table[class*="min-w-[720px]"][class*="tabular-nums"]) {
    overflow-x: visible !important;
  }

  table[class*="min-w-[720px]"][class*="tabular-nums"] {
    display: block;
    min-width: 0 !important;
    width: 100% !important;
  }

  table[class*="min-w-[720px]"][class*="tabular-nums"] thead {
    display: none;
  }

  table[class*="min-w-[720px]"][class*="tabular-nums"] tbody {
    display: grid;
    width: 100%;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  table[class*="min-w-[720px]"][class*="tabular-nums"] tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "record best"
      "opponent best"
      "season date";
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 0.75rem;
    border: 1px solid rgba(72, 72, 96, 0.75);
    border-radius: 0.5rem;
    background: rgba(18, 18, 28, 0.72);
    overflow: hidden;
  }

  table[class*="min-w-[720px]"][class*="tabular-nums"] tr:last-child {
    margin-bottom: 0.125rem;
  }

  table[class*="min-w-[720px]"][class*="tabular-nums"] td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    text-align: left !important;
  }

  table[class*="min-w-[720px]"][class*="tabular-nums"] td:nth-child(1) {
    grid-area: record;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
  }

  table[class*="min-w-[720px]"][class*="tabular-nums"] td:nth-child(2) {
    grid-area: best;
    align-self: center;
    text-align: right !important;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }

  table[class*="min-w-[720px]"][class*="tabular-nums"] td:nth-child(3) {
    grid-area: opponent;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    color: #a0a0b8;
  }

  table[class*="min-w-[720px]"][class*="tabular-nums"] td:nth-child(3)::before {
    content: "vs ";
    color: #73738a;
  }

  table[class*="min-w-[720px]"][class*="tabular-nums"] td:nth-child(4) {
    grid-area: season;
    font-size: 0.6875rem;
    color: #73738a;
  }

  table[class*="min-w-[720px]"][class*="tabular-nums"] td:nth-child(5) {
    grid-area: date;
    justify-self: end;
    text-align: right !important;
    font-size: 0.6875rem;
  }

  /*
   * Game Log: use the same mobile Statistics card grammar. Each match gets a
   * metadata header and a compact four-column stat grid. The desktop 920px table
   * remains unchanged outside touch/mobile media queries.
   */
  .overflow-x-auto:has(> table[class*="min-w-[920px]"][class*="tabular-nums"]) {
    overflow-x: visible !important;
  }

  table[class*="min-w-[920px]"][class*="tabular-nums"] {
    display: block;
    min-width: 0 !important;
    width: 100% !important;
  }

  table[class*="min-w-[920px]"][class*="tabular-nums"] thead {
    display: none;
  }

  table[class*="min-w-[920px]"][class*="tabular-nums"] tbody {
    display: grid;
    width: 100%;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  table[class*="min-w-[920px]"][class*="tabular-nums"] tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "opponent opponent opponent result"
      "date date season season"
      "rds dmg blk dta"
      "heal status cards cards";
    gap: 1px;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 0;
    border: 1px solid rgba(72, 72, 96, 0.75);
    border-radius: 0.5rem;
    background: rgba(72, 72, 96, 0.6);
    overflow: hidden;
  }

  table[class*="min-w-[920px]"][class*="tabular-nums"] td {
    display: flex;
    min-width: 0;
    padding: 0;
    text-align: left !important;
    background: #12121c;
  }

  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(1) {
    grid-area: date;
    align-items: center;
    padding: 0 0.75rem 0.6rem;
    font-size: 0.6875rem;
    color: #73738a;
    background: rgba(28, 28, 42, 0.96);
  }

  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(2) {
    grid-area: opponent;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.7rem 0.75rem 0.15rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: rgba(28, 28, 42, 0.96);
  }

  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(3) {
    grid-area: result;
    justify-self: stretch;
    align-items: center;
    justify-content: flex-end;
    padding: 0.55rem 0.75rem 0.15rem 0.25rem;
    font-size: 1rem;
    background: rgba(28, 28, 42, 0.96);
  }

  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(4) { grid-area: rds; }
  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(5) { grid-area: dmg; }
  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(6) { grid-area: blk; }
  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(7) { grid-area: dta; }
  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(8) { grid-area: heal; }
  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(9) { grid-area: status; }
  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(10) { grid-area: cards; }

  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(11) {
    grid-area: season;
    justify-self: stretch;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.75rem 0.6rem 0.25rem;
    font-size: 0.6875rem;
    color: #73738a;
    background: rgba(28, 28, 42, 0.96);
  }

  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(n + 4):nth-child(-n + 10) {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.4rem 0.25rem;
    text-align: center !important;
    font-size: 0.8125rem;
    font-weight: 600;
  }

  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(n + 4):nth-child(-n + 10)::before {
    margin-bottom: 0.25rem;
    font-size: 0.5rem;
    font-weight: 600;
    line-height: 1;
    color: #73738a;
  }

  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(4)::before { content: "RDS"; }
  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(5)::before { content: "DMG"; }
  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(6)::before { content: "BLK"; }
  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(7)::before { content: "DTA"; }
  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(8)::before { content: "HEAL"; }
  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(9)::before { content: "STATUS"; }
  table[class*="min-w-[920px]"][class*="tabular-nums"] td:nth-child(10)::before { content: "CARDS"; }
}

@media (min-width: 600px) and (hover: none) and (pointer: coarse) {
  main > div[class*="max-w-6xl"] > div.min-w-0 > button.btn.mb-3.inline-flex ~ div.flex.gap-1.overflow-x-auto.mb-3.pb-1 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  main > div[class*="max-w-6xl"] > div.min-w-0 > button.btn.mb-3.inline-flex ~ div.flex.gap-1.overflow-x-auto.mb-3.pb-1 > button {
    grid-column: span 1 !important;
  }
}