/* http://meyerweb.com/eric/tools/css/reset/
   v5.0.2 | 20191019
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
	display: none;
}
body {
	line-height: 1;
}
menu, ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.league-wrap{
  --brand:#1e6fff;
  --brand2:#06c1ff;
  --text:#101828;
  --text2:#667085;
  --card-bg:#ffffff;
  --card-bd:rgba(16,24,40,.07);
  padding:4px 0 18px;
}

/* 标题栏 */
.league-wrap .section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:16px 0 14px;
}
.league-wrap .section-title{
  display:flex; align-items:center; gap:8px;
  margin:0; font-size:20px; font-weight:800; color:var(--text);
  letter-spacing:.2px;
}
.league-wrap .section-title::before{
  content:""; width:4px; height:18px; border-radius:4px;
  background:linear-gradient(180deg,var(--brand2),var(--brand));
}
.league-wrap .title-en{
  font-size:11px; font-weight:700; color:#98a2b3;
  letter-spacing:1.5px; text-transform:uppercase;
  transform:translateY(1px);
}
.league-wrap .section-more{
  display:inline-flex; align-items:center; gap:2px;
  font-size:13px; color:var(--text2); text-decoration:none;
  transition:color .2s, gap .2s;
}
.league-wrap .section-more:hover{ color:var(--brand); gap:6px; }
.league-wrap .section-more i{ font-style:normal; font-size:16px; line-height:1; }

/* 网格 */
.league-wrap .league-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
  gap:12px;
}

/* 卡片 */
.league-wrap .league-item{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  padding:16px 10px 14px;
  border-radius:16px;
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  text-decoration:none;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1),
             box-shadow .3s ease,
             border-color .3s ease;
}
/* 悬停时的柔光 */
.league-wrap .league-item::after{
  content:"";
  position:absolute; top:-50px; right:-50px;
  width:130px; height:130px; border-radius:50%;
  background:radial-gradient(circle, rgba(30,111,255,.16), transparent 70%);
  opacity:0; transition:opacity .3s ease;
  pointer-events:none;
}
.league-wrap .league-item:hover{
  transform:translateY(-4px);
  border-color:rgba(30,111,255,.3);
  box-shadow:0 12px 24px -10px rgba(16,24,40,.18);
}
.league-wrap .league-item:hover::after{ opacity:1; }

/* 联赛 logo */
.league-wrap .league-logo{
  width:48px; height:48px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#f8fafc,#eef2f7);
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.045);
  transition:transform .3s ease;
}
.league-wrap .league-logo img{
  width:32px; height:32px; display:block;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(16,24,40,.12));
}
.league-wrap .league-item:hover .league-logo{ transform:scale(1.08); }

/* 联赛名称 */
.league-wrap .league-name{
  font-size:13px; font-weight:600; color:var(--text);
  line-height:1.35; text-align:center;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 足/篮标签 */
.league-wrap .league-tag{
  position:absolute; top:10px; left:10px;
  font-size:10px; font-weight:700; line-height:1;
  padding:3px 6px; border-radius:6px; letter-spacing:.3px;
}
.league-wrap .league-tag.zq{ color:#0b8f4d; background:rgba(16,185,129,.13); }
.league-wrap .league-tag.lq{ color:#d4640a; background:rgba(249,115,22,.13); }

/* 平板 / 桌面 */
@media (min-width:768px){
  .league-wrap .league-grid{ grid-template-columns:repeat(auto-fill, minmax(152px,1fr)); gap:16px; }
  .league-wrap .league-item{ padding:20px 12px 16px; }
  .league-wrap .league-logo{ width:56px; height:56px; }
  .league-wrap .league-logo img{ width:38px; height:38px; }
  .league-wrap .league-name{ font-size:14px; }
}

/* 小屏手机：固定三列 */
@media (max-width:480px){
  .league-wrap .league-grid{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .league-wrap .league-item{ padding:14px 6px 12px; border-radius:14px; gap:8px; }
  .league-wrap .league-logo{ width:42px; height:42px; }
  .league-wrap .league-logo img{ width:28px; height:28px; }
  .league-wrap .league-name{ font-size:12px; }
  .league-wrap .league-tag{ top:8px; left:8px; font-size:9px; padding:2px 5px; }
  .league-wrap .section-title{ font-size:17px; }
  .league-wrap .title-en{ display:none; }
}

/* 深色模式 */
@media (prefers-color-scheme:dark){
  .league-wrap{
    --text:#f2f4f7;
    --text2:#98a2b3;
    --card-bg:#151a23;
    --card-bd:rgba(255,255,255,.07);
  }
  .league-wrap .league-logo{ background:linear-gradient(180deg,#1d2430,#232b38); }
  .league-wrap .league-item:hover{ box-shadow:0 12px 24px -10px rgba(0,0,0,.6); }
}