@import url('/arena-provider-base.css');

/* Arena uses the same visual language and scale as OpenRouter. */
.provider-options.arena-enabled{grid-template-columns:repeat(5,minmax(0,1fr)) !important}

/* Provider card: intentionally identical to the generic/OpenRouter choice. */
.provider-options .arena-choice{
  border-color:#e2e5ec !important;
  background:#fff !important;
  color:#475467 !important;
  box-shadow:0 1px 2px rgba(16,24,40,.02) !important;
}
.provider-options .arena-choice:hover{
  border-color:#cfc9ff !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(85,70,213,.08) !important;
  transform:translateY(-1px);
}
.provider-options .arena-choice .provider-choice-copy{
  gap:4px !important;
  font-family:Arial,Vazirmatn,sans-serif !important;
  font-size:.92rem !important;
  line-height:1.35 !important;
  font-weight:800 !important;
  color:#475467 !important;
}
.provider-options .arena-choice .provider-choice-copy strong{
  font-family:Arial,Vazirmatn,sans-serif !important;
  font-size:.92rem !important;
  line-height:1.35 !important;
  font-weight:800 !important;
  color:#344054 !important;
}
.provider-options .arena-choice .provider-choice-copy small{
  font-family:Vazirmatn,Tahoma,sans-serif !important;
  font-size:.72rem !important;
  line-height:1.75 !important;
  font-weight:500 !important;
  color:#98a2b3 !important;
  direction:rtl !important;
  text-align:left !important;
}
.provider-options .arena-choice>i{
  width:8px !important;height:8px !important;background:#b7bec9 !important;box-shadow:none !important;
}
.provider-options .arena-choice>b{
  width:26px !important;height:26px !important;border-radius:8px !important;
  background:#f2f4f7 !important;color:transparent !important;font-size:.8rem !important;
}
.provider-options .arena-choice.active{
  border-color:#b9b2ff !important;
  background:linear-gradient(135deg,#faf9ff,#f5f3ff) !important;
  color:#5546d5 !important;
  box-shadow:0 8px 22px rgba(85,70,213,.08) !important;
}
.provider-options .arena-choice.active>i{
  background:#6657e8 !important;
  box-shadow:0 0 0 4px #e8e5ff !important;
}
.provider-options .arena-choice.active>b{
  background:#6657e8 !important;color:#fff !important;
}

/* Hero: same dimensions, border, background and typography as OpenRouter dashboard header. */
.arena-head{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:24px !important;
  padding:28px !important;
  margin-bottom:18px !important;
  border:1px solid #e7e5ff !important;
  border-radius:18px !important;
  background:linear-gradient(120deg,#faf9ff,#fff) !important;
  box-shadow:none !important;
}
.arena-head-copy{min-width:0 !important;width:100% !important;text-align:right !important}
.arena-eyebrow{
  display:block !important;
  margin:0 0 5px !important;
  color:#6557e8 !important;
  font:900 10px/1.55 Vazirmatn,Tahoma,sans-serif !important;
}
.arena-head h2{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:9px !important;
  margin:5px 0 !important;
  color:#101828 !important;
  font:900 26px/1.5 Vazirmatn,Tahoma,Arial,sans-serif !important;
  letter-spacing:0 !important;
  direction:rtl !important;
  text-align:right !important;
}
.arena-head h2 span{
  padding:4px 8px !important;
  border-radius:999px !important;
  background:#f0efff !important;
  color:#6557e8 !important;
  font:800 10px/1.3 Arial,Vazirmatn,sans-serif !important;
}
.arena-head p{
  margin:0 !important;
  color:#667085 !important;
  font:500 11px/1.9 Vazirmatn,Tahoma,sans-serif !important;
}

/* Ranking card: same OpenRouter section shell and spacing. */
.arena-panel{
  overflow:hidden !important;
  padding:24px !important;
  margin-bottom:16px !important;
  border:1px solid #e8eaf1 !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 5px 20px rgba(16,24,40,.035) !important;
}
.arena-panel-head{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:18px !important;
  padding:0 !important;
  margin-bottom:18px !important;
  border:0 !important;
  direction:rtl !important;
}
.arena-panel-head>div{min-width:0 !important}
.arena-panel-head h3{
  margin:0 0 4px !important;
  color:#101828 !important;
  font:800 18px/1.55 Vazirmatn,Tahoma,Arial,sans-serif !important;
}
.arena-panel-head p{
  margin:0 !important;
  color:#7a8494 !important;
  font:500 10px/1.9 Vazirmatn,Tahoma,sans-serif !important;
}
.arena-panel-head>span{
  padding:5px 9px !important;
  border-radius:999px !important;
  background:#f2f4f7 !important;
  color:#667085 !important;
  font:700 10px/1.2 Vazirmatn,Tahoma,sans-serif !important;
  white-space:nowrap !important;
}
.arena-table-wrap{
  overflow-x:auto !important;
  overflow-y:visible !important;
  border:1px solid #e8eaf1 !important;
  border-radius:12px !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#d6dbe5 transparent;
  direction:ltr !important;
}

/* Readable table typography aligned with the visual weight of OpenRouter. */
.arena-dashboard .arena-table{min-width:1060px !important;margin:0 !important}
.arena-dashboard .arena-table th,.arena-dashboard .arena-table td{padding:0 14px !important}
.arena-dashboard .arena-table th{
  height:50px !important;
  background:#fafbfc !important;
  color:#7b8596 !important;
  font:700 12px/1.4 Arial,Vazirmatn,sans-serif !important;
}
.arena-dashboard .arena-table td{
  height:72px !important;
  color:#344054 !important;
  font:600 14px/1.5 Arial,Vazirmatn,sans-serif !important;
}
.arena-dashboard .arena-table th.arena-sortable>i{
  width:20px !important;height:20px !important;margin-left:7px !important;
  font:800 10px/1 Arial,sans-serif !important;
}
.arena-dashboard .arena-rank{
  width:32px !important;height:32px !important;min-width:32px !important;max-width:32px !important;
  border-radius:9px !important;font:850 14px/1 Arial,sans-serif !important;
}
.arena-dashboard .arena-model-cell{gap:11px !important}
.arena-dashboard .arena-logo-box{
  flex:0 0 36px !important;width:36px !important;height:36px !important;
  min-width:36px !important;max-width:36px !important;min-height:36px !important;max-height:36px !important;
  border-radius:10px !important;padding:4px !important;
}
.arena-dashboard .arena-logo-box .arena-provider-logo,.arena-dashboard .arena-provider-logo{
  width:24px !important;height:24px !important;min-width:24px !important;max-width:24px !important;
  min-height:24px !important;max-height:24px !important;
}
.arena-dashboard .arena-model-name{
  color:#1d2939 !important;
  font:750 14px/1.4 Arial,Vazirmatn,sans-serif !important;
}
.arena-dashboard .arena-model-copy small{
  color:#98a2b3 !important;
  font:500 11px/1.35 Arial,Vazirmatn,sans-serif !important;
}
.arena-dashboard td.arena-score{
  color:#2456b8 !important;
  font:800 14px/1.4 Arial,sans-serif !important;
}
.arena-dashboard td.arena-muted{
  color:#667085 !important;
  font:600 14px/1.4 Arial,Vazirmatn,sans-serif !important;
}
.arena-dashboard .arena-availability-badge{
  min-width:50px !important;
  padding:6px 9px !important;
  border-radius:8px !important;
  font:800 11px/1.2 Vazirmatn,Tahoma,sans-serif !important;
}
.arena-dashboard .arena-availability-badge.is-unavailable{
  min-width:32px !important;width:32px !important;height:32px !important;padding:0 !important;border-radius:50% !important;
}
.arena-loading,.arena-error{
  padding:35px !important;border:1px dashed #d9dce5 !important;border-radius:12px !important;
  color:#667085 !important;text-align:center !important;font:600 11px/1.8 Vazirmatn,Tahoma,sans-serif !important;
}

@media(max-width:1180px){.provider-options.arena-enabled{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media(max-width:820px){
  .provider-options.arena-enabled{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .arena-head{align-items:flex-start !important;flex-direction:column !important}
  .arena-panel-head{align-items:flex-start !important}
}
@media(max-width:620px){
  .provider-options.arena-enabled{grid-template-columns:1fr !important}
  .arena-head{padding:20px !important}
  .arena-head h2{font-size:22px !important;flex-wrap:wrap !important}
  .arena-panel{padding:18px !important}
}

/* Android Arena cards: details live inside the same card instead of a table row. */
@media(max-width:640px){
  html.android-ranking-card-view .arena-dashboard .arena-table tbody>tr:not(.mobile-detail-row){
    overflow:hidden !important;
    transition:border-color .16s ease,box-shadow .16s ease !important;
  }
  html.android-ranking-card-view .arena-dashboard .arena-table tbody>tr.mobile-card-expanded{
    border-color:#d9d5fb !important;
    box-shadow:0 4px 16px rgba(85,70,213,.07) !important;
  }
  html.android-ranking-card-view .arena-dashboard .arena-table td.mobile-arena-inline-details{
    display:none !important;
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    margin:10px 0 0 !important;
    padding:12px !important;
    border:1px solid #ebe9fb !important;
    border-radius:12px !important;
    background:#faf9ff !important;
    direction:rtl !important;
    text-align:right !important;
    overflow:visible !important;
  }
  html.android-ranking-card-view .arena-dashboard .arena-table td.mobile-arena-inline-details.mobile-detail-open{
    display:block !important;
  }
  html.android-ranking-card-view .arena-dashboard .mobile-arena-inline-details .mobile-detail-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
    width:100% !important;
  }
  html.android-ranking-card-view .arena-dashboard .mobile-arena-inline-details .mobile-detail-item{
    min-width:0 !important;
    padding:10px !important;
    border:1px solid #eceaf7 !important;
    border-radius:10px !important;
    background:#fff !important;
  }
  html.android-ranking-card-view .arena-dashboard .mobile-arena-inline-details .mobile-detail-item>span{
    margin-bottom:4px !important;
    color:#98a2b3 !important;
    font:600 10px/1.5 Vazirmatn,Tahoma,sans-serif !important;
  }
  html.android-ranking-card-view .arena-dashboard .mobile-arena-inline-details .mobile-detail-item>div{
    min-width:0 !important;
    color:#344054 !important;
    font:700 13px/1.55 Vazirmatn,Tahoma,Arial,sans-serif !important;
    direction:ltr !important;
    text-align:left !important;
    overflow-wrap:anywhere !important;
  }
  html.android-ranking-card-view .arena-dashboard .mobile-arena-inline-details .arena-availability-badge{
    display:inline-flex !important;
    width:auto !important;
    min-width:50px !important;
    height:auto !important;
  }
}
@media(max-width:380px){
  html.android-ranking-card-view .arena-dashboard .mobile-arena-inline-details .mobile-detail-grid{
    grid-template-columns:1fr !important;
  }
}