/* CFB.gg Team Grades — responsive (full table desktop / expandable rows mobile) */
.cfbtg {
	--bg0:#0b0d11; --bg1:#11151b; --bg2:#1c2027;
	--blue:#3d7bff; --gold:#f5b51e;
	--row:#0b0d11; --rowh:#161b22;
	--txt:#f3f5f9; --mut:#7a818d; --line:#232a33; --line2:#2a313b; --rowline:#15191f;
	font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
	max-width:760px; margin:0 auto;
}
.cfbtg *{ box-sizing:border-box; }

.cfbtg-card{ background:var(--bg0); border:1px solid var(--line); border-radius:14px; overflow:hidden; }

.cfbtg-head{ display:flex; align-items:center; gap:12px; padding:14px 18px; background:linear-gradient(0deg,var(--bg0),var(--bg1)); border-bottom:2px solid var(--gold); flex-wrap:wrap; }
.cfbtg-title{ font-family:'Oswald',sans-serif; font-weight:700; font-style:italic; text-transform:uppercase; font-size:20px; letter-spacing:.5px; color:var(--txt); line-height:1.05; }
.cfbtg-title em{ color:var(--gold); font-style:italic; }
.cfbtg-sub{ color:var(--mut); font-size:12px; margin:0; padding:9px 18px 0; }

/* Mobile sort dropdown — hidden on desktop, shown under the breakpoint */
.cfbtg-msort{ display:none; align-items:center; gap:9px; padding:11px 14px 4px; }
.cfbtg-msort label{ font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--mut); }
.cfbtg-msort-sel{ flex:1; height:38px; background:var(--bg2); border:1px solid var(--line2); border-radius:9px; color:var(--txt); font-family:inherit; font-size:13px; font-weight:600; padding:0 12px; outline:none; -webkit-appearance:none; appearance:none;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a818d' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 12px center; background-size:15px; padding-right:36px; }
.cfbtg-msort-sel:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(61,123,255,.18); }

.cfbtg-search{ position:relative; margin-left:auto; min-width:170px; flex:1; max-width:340px; }
.cfbtg-search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; stroke:var(--mut); }
.cfbtg-search input{ width:100%; height:36px; background:var(--bg2); border:1px solid var(--line2); border-radius:9px; color:var(--txt); font-family:inherit; font-size:12px; padding:0 12px 0 33px; outline:none; }
.cfbtg-search input::placeholder{ color:var(--mut); letter-spacing:.5px; }
.cfbtg-search input:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(61,123,255,.18); }

/* Column header */
.cfbtg-colhead{ display:grid; grid-template-columns:1fr 110px 58px 54px 54px; padding:10px 18px; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--mut); background:var(--bg1); user-select:none; }
.cfbtg-colhead.has-dp{ grid-template-columns:1fr 110px 58px 54px 54px 110px; }
.cfbtg-colhead span{ cursor:pointer; transition:color .12s; }
.cfbtg-colhead span:hover{ color:#cfd4dc; }
.cfbtg-colhead span.num{ text-align:center; }
.cfbtg-colhead .car{ font-size:8px; margin-left:3px; opacity:0; font-style:normal; }
.cfbtg-colhead span.act{ color:var(--txt); }
.cfbtg-colhead span.act .car{ opacity:1; color:var(--gold); }

/* Rows */
.cfbtg-row{ border-bottom:1px solid var(--rowline); }
.cfbtg-rowmain{ display:grid; grid-template-columns:1fr 110px 58px 54px 54px; align-items:center; padding:11px 18px; cursor:default; }
.cfbtg-rowmain.has-dp{ grid-template-columns:1fr 110px 58px 54px 54px 110px; }
.cfbtg-row:nth-child(even) .cfbtg-rowmain{ background:#0f1217; }
.cfbtg-row:hover .cfbtg-rowmain{ background:var(--rowh); }
.cfbtg-rank{ font-family:'Oswald',sans-serif; font-weight:700; font-size:15px; color:#5c636e; }
.cfbtg-row.top .cfbtg-rank{ color:var(--gold); }

.cfbtg-teamcell{ display:flex; align-items:center; gap:10px; min-width:0; }
.cfbtg-tnames{ min-width:0; display:flex; flex-direction:column; }
.cfbtg-team{ font-weight:700; font-size:16px; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cfbtg-conf{ font-size:12.5px; color:var(--mut); }
.cfbtg-mstars{ display:none; margin-top:4px; }

.cfbtg-num{ font-family:'Oswald',sans-serif; font-weight:600; font-size:18px; text-align:center; }
.cfbtg-ovrl{ display:none; }
.cfbtg-dp{ font-size:14px; white-space:nowrap; letter-spacing:.2px; }
.cfbtg-dpa{ color:var(--gold); font-weight:700; }
.cfbtg-dpsep{ color:var(--mut); margin:0 1px; font-weight:400; }
.cfbtg-dpt{ color:var(--mut); font-weight:600; }
.cfbtg-dpe{ color:#3a414c; }
.cfbtg-stars{ text-align:center; font-size:16px; }

.cfbtg-starwrap{ position:relative; display:inline-block; letter-spacing:.5px; white-space:nowrap; }
.cfbtg-starbg{ color:#363d47; }
.cfbtg-starfg{ color:var(--gold); position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; }

.cfbtg-chev{ display:none; }
.cfbtg-rowdetail{ display:none; }

/* Footer */
.cfbtg-foot{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; background:var(--bg1); border-top:1px solid var(--line); gap:12px; flex-wrap:wrap; }
.cfbtg-leg{ color:var(--mut); font-size:11.5px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.cfbtg-leg b{ color:var(--txt); font-weight:600; }
.cfbtg-share{ display:flex; gap:8px; }
.cfbtg-btn{ display:inline-flex; align-items:center; gap:6px; background:var(--bg2); border:1px solid var(--line2); color:var(--txt); border-radius:9px; padding:7px 13px; font-size:12px; font-weight:500; font-family:inherit; cursor:pointer; transition:all .15s; }
.cfbtg-btn:hover{ border-color:var(--blue); color:var(--blue); }
.cfbtg-btn.gold:hover{ border-color:var(--gold); color:var(--gold); }
.cfbtg-btn svg{ width:15px; height:15px; stroke:currentColor; }
.cfbtg-empty{ padding:30px; text-align:center; color:var(--mut); font-size:13px; }

/* ---------- MOBILE: single-line, no rank, prestige in its own column ---------- */
@media (max-width:620px){
	.cfbtg-msort{ display:flex; }

	/* Default (no Dynasty Points): fit all 5 columns to width, no scroll. */
	.cfbtg-colhead,
	.cfbtg-rowmain{
		grid-template-columns:1fr 86px 32px 32px 32px;
		gap:6px;
	}
	.cfbtg-colhead{ padding:8px 13px; font-size:9px; letter-spacing:.8px; }
	.cfbtg-rowmain{ align-items:center; padding:12px 13px; cursor:default; }

	.cfbtg-colhead span[data-k="rank"]{ display:none; }
	.cfbtg-rank{ display:none; }                 /* drop the rank number */

	/* With Dynasty Points: table scrolls horizontally; team column stays pinned. */
	.cfbtg-colhead.has-dp,
	.cfbtg-rowmain.has-dp{
		grid-template-columns:150px 92px 44px 44px 44px 116px;
		min-width:556px;
		gap:8px;
	}
	.cfbtg-scroll:has(.cfbtg-colhead.has-dp){ overflow-x:auto; -webkit-overflow-scrolling:touch; }

	/* Pin the team column to the left edge while the rest scrolls (DP mode only). */
	.cfbtg-colhead.has-dp > span[data-k="team"],
	.cfbtg-rowmain.has-dp .cfbtg-teamcell{
		position:sticky; left:0; z-index:2;
	}
	.cfbtg-colhead.has-dp{ position:relative; }
	.cfbtg-colhead.has-dp > span[data-k="team"]{ background:var(--bg1); padding-right:6px; }
	.cfbtg-rowmain.has-dp .cfbtg-teamcell{
		background:var(--bg0);
		padding-right:6px;
		box-shadow:8px 0 8px -6px rgba(0,0,0,.55);
	}
	.cfbtg-row:nth-child(even) .cfbtg-rowmain.has-dp .cfbtg-teamcell{ background:#0f1217; }
	.cfbtg-row:hover .cfbtg-rowmain.has-dp .cfbtg-teamcell{ background:var(--rowh); }

	.cfbtg-team{ font-size:14px; }
	.cfbtg-conf{ font-size:10px; }
	.cfbtg-mstars{ display:none; }               /* no longer under the name */
	.cfbtg-stars{ display:block; font-size:12px; }   /* prestige keeps its own column */
	.cfbtg-off{ display:block; }
	.cfbtg-def{ display:block; }
	.cfbtg-num{ font-size:15px; font-weight:700; }
	.cfbtg-ovr{ font-size:15px; font-weight:700; line-height:1.1; display:block; }
	.cfbtg-ovrl{ display:none; }                 /* no "OVR" sublabel, header covers it */
	.cfbtg-dp{ font-size:13px; font-weight:600; }
	.cfbtg-chev{ display:none; }                 /* no expand */
	.cfbtg-rowdetail{ display:none; }            /* everything is on the line now */

	.cfbtg-title{ font-size:17px; }
}