/* NFS Most Wanted: night asphalt, BMW-livery steel blue (own stylesheet, site.css is not replaced) */
.theme-nfsmw {
  --bg: #07090c; --panel: #10141a; --panel-2: #161b23; --line: #232b36;
  --text: #eef3f8; --muted: #93a1b1; --accent: #2fb8d4; --accent-2: #f2a33a; --accent-ink: #04161b;
  --win: #2fb8d4;
}
.hero.nfs { background: #0b0f14; }
.hero.nfs .art { object-position: 70% 40%; }
.hero.nfs .plate { top: auto; bottom: 18%; width: clamp(180px, 30vw, 420px); }
.hero.nfs .plate img { filter: drop-shadow(0 8px 26px rgba(0,0,0,.75)); }

/* rooms and races on the live page */
.nrooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.nroom .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nroom .meta small { color: var(--muted); }
.nroom .rname { font: 700 20px/1.2 var(--head); margin: 8px 0 6px; overflow-wrap: anywhere; }
.nroom .who { color: var(--muted); font-size: 14px; }
.nroom.hot { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ochips, #onlist { display: flex; flex-wrap: wrap; gap: 8px; }
.ochip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.ochip small { color: var(--accent); font-weight: 600; }

.nrace { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 2fr); gap: 12px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.nrace:first-child { border-top: 0; }
.nrace:hover { background: var(--panel-2); }
.nmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nmeta small { color: var(--muted); width: 100%; }
.norder { display: flex; flex-wrap: wrap; gap: 6px 14px; min-width: 0; }
.rp { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; font-weight: 600; }
.rp b { font: 800 15px/1 var(--head); color: var(--muted); }
.rp.win b { color: var(--accent); }
.rp small { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.nfsmode.m-circuit { color: #2fb8d4; }
.nfsmode.m-sprint { color: #f2a33a; }
.nfsmode.m-drag { color: #ff5d6c; }

/* leaderboard tabs (the live page's box turns through them) */
.ntabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ntabs button, .nfilter button { font: 700 13px/1 var(--body); padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.ntabs button.on, .nfilter button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.nfilter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.nfilter label.check { margin-left: 8px; color: var(--muted); }
#lbbox .ntabs { padding: 12px 12px 0; margin: 0; }
tr.top1 td:first-child { color: #f5c542; font-weight: 800; }
tr.top2 td:first-child { color: #c9d2dc; font-weight: 800; }
tr.top3 td:first-child { color: #d08a4e; font-weight: 800; }
.ntable td, .ntable th { white-space: nowrap; }
.form { display: inline-flex; gap: 3px; }

/* one race */
.nboard { padding: 16px; }
.nboard .bmeta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.nboard .bmeta small { color: var(--muted); }

/* player */
.nav-av { display: grid; place-items: center; font: 800 34px/1 var(--head); background: var(--panel-2); color: var(--accent); }
.nmmrs { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 12px; }
.nmmr { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.nmmr h3 { margin: 0 0 6px; font: 700 14px/1 var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.nmmr > b { display: block; font: 800 34px/1.1 var(--head); color: var(--accent); }
.nmmr.big > b { font-size: 48px; }
.nmline { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0; color: var(--muted); font-size: 13px; }
.nmline b { color: var(--text); }

/* stats */
.nrec { list-style: none; margin: 0; padding: 0; }
.nrec li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); align-items: center; }
.nrec li:first-child { border-top: 0; }
.nrec li span { color: var(--muted); }
.nrec li b { font: 800 20px/1 var(--head); color: var(--accent); }
.nbars { padding: 12px 16px; }
.nbar { display: grid; grid-template-columns: 90px 1fr 48px; gap: 10px; align-items: center; padding: 5px 0; }
.nbar span { color: var(--muted); font-size: 13px; }
.nbar i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: var(--w); min-width: 2px; }
.nbar b { text-align: right; font-variant-numeric: tabular-nums; }

/* how to play */
.ndl { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.ndl small { color: var(--muted); }

@media (max-width: 900px) {
  .nmmrs { grid-template-columns: 1fr 1fr; }
  .nmmr.big { grid-column: span 2; }
}
@media (max-width: 560px) {
  .nrace { grid-template-columns: 1fr; gap: 6px; }
  .hero.nfs .plate { bottom: 10%; }
}

/* how to play: download strip, keys */
.ndlbox { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 6px 0 28px; padding: 14px 18px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); }
.ndlbox .ncover { width: 64px; height: 96px; object-fit: cover; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.ndlbox > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.ndlbox > div b { font: 800 20px/1.1 var(--head); }
.ndlbox > div b small { font: 600 12px/1 var(--body); color: var(--accent); margin-left: 8px; }
.ndlbox > div span { color: var(--muted); font-size: 14px; }
.nkeys { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.nkeys > div { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.nkeys kbd { min-width: 64px; text-align: center; font: 700 12px/1 var(--body); padding: 7px 8px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--line); border-bottom-width: 3px; color: var(--text); white-space: nowrap; }
.nkeys b { font-weight: 600; font-size: 14px; }
p.note { color: var(--muted); font-size: 13px; }

/* ---- v3 polish: avatars, Blacklist, podium, streaks, activity (ideas from the FIFA 09 / WWE pages) */
.lbp { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; min-width: 0; color: inherit; }
.lbp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.lbp:hover span { color: var(--accent); }
.lbcell { display: inline-flex; align-items: center; gap: 8px; }
.ntable td:nth-child(2), .lbmini td:nth-child(2) { text-align: left; }
.rp .lbp .avatar, .nroom .who .avatar { display: none; }
/* the game's Blacklist: white type on black, a red rule (the top 15 of the Overall list) */
.blk { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 7px; border-radius: 4px; white-space: nowrap;
  font: 800 11px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #050505;
  border: 1px solid #2b2b2b; border-left: 3px solid #d6242c; }
.blk b { color: #ff5a5f; font-weight: 800; }
.pod .blk { margin-top: 2px; }
.blnote { color: var(--muted); font-size: 12px; margin-left: auto; }
.toolbar input { min-width: 200px; }
.toolbar .count { color: var(--muted); font-size: 13px; }
.phead .avatar.big { width: 84px; height: 84px; border-radius: 18px; font-size: 38px; }
.pmeta p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 0; }
.nonline { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.nspark { margin-top: 10px; height: 64px; }
.nspark .spark { width: 100%; height: 64px; }
.nspark .spark polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.strk { font: 800 13px/1 var(--body); padding: 3px 7px; border-radius: 999px; }
.strk.w { background: color-mix(in srgb, #22c55e 22%, transparent); color: #4ade80; }
.potw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 24px; padding: 18px 22px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: radial-gradient(70% 140% at 0 50%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), var(--panel); }
.potw .blabel { font: 800 13px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.potw .bname { display: inline-flex; align-items: center; gap: 10px; font: 800 28px/1 var(--head); text-decoration: none; color: var(--text); }
.potw small { color: var(--muted); }
.trow .tl { color: var(--muted); flex: 1 1 auto; }
.trow .tv { font: 800 20px/1 var(--head); color: var(--accent); }
.trow .ts { margin-left: auto; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.trow .ts b { color: var(--text); }
.nact { padding: 16px; }
.heat { display: grid; grid-template-columns: 38px repeat(24, 1fr); gap: 3px; align-items: center; }
.heat i { height: 16px; border-radius: 3px; background: color-mix(in srgb, var(--accent) calc(var(--v) * 100%), var(--panel-2)); }
.heat .hd { font-size: 11px; color: var(--muted); }
.heat .hh { font-size: 10px; color: var(--muted); grid-row: 8; }
.days { display: flex; align-items: flex-end; gap: 3px; height: 70px; margin-top: 18px; }
.days i { flex: 1; height: calc(var(--h) * 100%); min-height: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent)); }
.nact .sub { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
@media (max-width: 720px) {
  .heat { grid-template-columns: 28px repeat(24, 1fr); gap: 2px; }
  .blnote { margin-left: 0; width: 100%; }
  .lbp span { max-width: 120px; }
}

/* ---- v4: cars, tracks, fun records */
.carbadge { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-width: 0; }
.carbadge span { display: flex; flex-direction: column; font: 800 16px/1.1 var(--head); text-transform: uppercase; letter-spacing: .02em; }
.carbadge small { font: 600 11px/1.2 var(--body); color: var(--muted); text-transform: none; letter-spacing: 0; }
.carbadge img { height: 34px; width: auto; max-width: 140px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.carbadge.sm span { font-size: 13px; }
.carbadge.sm img { height: 22px; }
.carbadge.big, .carbadge.hero, .carbadge.card { padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line);
  background: radial-gradient(120% 140% at 0 0, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), linear-gradient(135deg, #1a2330, #0b0f14); }
.carbadge.big img { height: 56px; max-width: 240px; }
.carbadge.big span { font-size: 22px; }
.carbadge.hero { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 28px; }
.carbadge.hero img { height: 90px; max-width: 420px; }
.carbadge.hero span { font-size: 40px; }
.carbadge.hero small { font-size: 14px; }
.carhead, .trackhead { padding: 0 0 18px; }
.trackhead { display: flex; align-items: center; gap: 12px; }
.trackhead h1 { margin: 0; }
.cargrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.carcard { display: flex; flex-direction: column; gap: 0; text-decoration: none; color: inherit; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel); transition: border-color .15s, transform .15s; }
.carcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.carcard .carbadge.card { border: 0; border-radius: 0; flex-direction: column; align-items: flex-start; min-height: 108px; justify-content: flex-end; }
.carcard .carbadge.card img { height: 46px; max-width: 220px; }
.carcard .cc { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 14px; color: var(--muted); font-size: 13px; }
.carcard .cc b { color: var(--text); }
.favcar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.favstat { display: flex; flex-direction: column; justify-content: center; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.favstat small { color: var(--muted); }
.favstat b { font: 800 26px/1.1 var(--head); color: var(--accent); }
.tlink { color: var(--text); font-weight: 600; text-decoration: none; }
.tlink:hover { color: var(--accent); }
.nboard .bmeta .tlink { margin-left: 4px; }
.trackgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.trackcard { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); background: var(--panel); border-top: 3px solid var(--accent); }
.trackcard.m-sprint { border-top-color: #f2a33a; }
.trackcard.m-drag { border-top-color: #ff5d6c; }
.trackcard:hover { border-color: var(--accent); }
.trackcard .tn { font: 800 20px/1.15 var(--head); text-transform: uppercase; }
.trackcard small { color: var(--muted); }
.trackcard .tr { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; font-size: 13px; border-top: 1px solid var(--line); padding-top: 6px; }
.trackcard .tr span { color: var(--muted); }
.trackcard .tr b { font-variant-numeric: tabular-nums; }
.trackcard .tr em { grid-column: 1 / -1; font-style: normal; color: var(--accent); font-size: 12px; }
.funs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.fun { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); background: radial-gradient(90% 120% at 100% 0, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 60%), var(--panel); }
.fun:hover { border-color: var(--accent-2); }
.fun .fl { font: 800 12px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
.fun .fv { font: 800 30px/1 var(--head); }
.fun .fw { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.fun .fw i { font-style: normal; color: var(--muted); font-weight: 500; }
.fun small { color: var(--muted); }
/* car badges with the game's own logos: maker's badge + the model's script */
.carbadge .bl { height: 30px; width: auto; max-width: 46px; object-fit: contain; flex: none; }
.carbadge .cbt { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.carbadge .ml { height: 26px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; }
.carbadge.haslogo .cbt > span { order: -1; }
.carbadge.sm .bl { height: 20px; max-width: 30px; }
.carbadge.sm .ml { height: 16px; max-width: 120px; }
.carbadge.big .bl { height: 48px; max-width: 70px; }
.carbadge.big .ml { height: 40px; max-width: 260px; }
.carbadge.card { flex-direction: row !important; align-items: center !important; }
.carcard .carbadge.card .bl { height: 44px; max-width: 64px; }
.carcard .carbadge.card .ml { height: 34px; max-width: 200px; }
.carbadge.hero { flex-direction: row !important; align-items: center !important; gap: 22px !important; }
.carbadge.hero .bl { height: 96px; max-width: 140px; }
.carbadge.hero .ml { height: 64px; max-width: 460px; }
.carbadge.hero .cbt { gap: 10px; }
.carcard .carbadge.card .cbt { flex: 1; min-width: 0; }
.carcard .carbadge.card .ml { max-width: 100%; height: 30px; }

/* ---- v5: race rows with the game's mode icons, place chips, live page */
.micon { --mc: var(--accent); flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--mc) 32%, #0b0f14), #0b0f14 80%);
  border: 1px solid color-mix(in srgb, var(--mc) 45%, var(--line)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.micon img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.micon.m-sprint, .nrace.m-sprint { --mc: #f2a33a; }
.micon.m-drag, .nrace.m-drag { --mc: #ff5d6c; }
.micon.m-circuit, .nrace.m-circuit { --mc: #2fb8d4; }
.micon.big { width: 64px; height: 64px; border-radius: 14px; }
.micon.big img { width: 44px; height: 44px; }

.nrace { --mc: var(--accent); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px; align-items: center; padding: 12px 16px 12px 18px; }
.nrace .micon { grid-row: span 2; align-self: start; }
.nrace .norder { justify-content: flex-start; }
#races, .panel:has(> .nrace) { container-type: inline-size; }
@container (min-width: 780px) {
  .nrace { grid-template-columns: auto minmax(180px, .8fr) minmax(0, 2fr); }
  .nrace .micon { grid-row: auto; align-self: center; }
  .nrace .norder { justify-content: flex-end; }
}
.nrace::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mc); opacity: .85; }
.nrace:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 10%, transparent), transparent 60%), var(--panel-2); }
.nmeta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.nmeta .nt { font: 800 17px/1.15 var(--head); text-transform: uppercase; letter-spacing: .02em; color: var(--text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nmeta small { width: auto; color: var(--muted); font-size: 12.5px; }
.nmeta small em { font-style: normal; color: var(--mc); font-weight: 700; }
.nmeta .rk { color: var(--accent); font-weight: 700; }
.norder { display: flex; flex-wrap: wrap; gap: 6px; }
.rp { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 999px; font-weight: 600; font-size: 14px;
  background: var(--panel-2); border: 1px solid var(--line); max-width: 100%; }
.rp .rn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.rp small { color: var(--muted); font-weight: 500; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rp .pl { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 999px;
  font: 800 12px/1 var(--head); color: var(--muted); background: #0b0f14; }
.rp .pl.p1 { background: linear-gradient(180deg, #ffe08a, #e0a526); color: #2a1b00; }
.rp .pl.p2 { background: linear-gradient(180deg, #eef2f6, #a9b4c0); color: #1a2028; }
.rp .pl.p3 { background: linear-gradient(180deg, #f1b483, #b4682f); color: #2a1406; }
.rp.win { border-color: color-mix(in srgb, #e0a526 55%, var(--line)); background: color-mix(in srgb, #e0a526 9%, var(--panel-2)); }
.rp.win small { color: var(--text); }
.rp.dnf { opacity: .55; }
.rp.dnf small { color: #ff7b86; font-weight: 700; letter-spacing: .04em; }
.rp.more { padding: 4px 10px; color: var(--muted); }
.rp .avatar { display: inline-grid !important; width: 22px; height: 22px; border-radius: 50%; flex: none; overflow: hidden; }
.rp .avatar img { width: 100%; height: 100%; object-fit: cover; }

/* nothing on right now: a call to host */
.nempty { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--line));
  background: radial-gradient(60% 140% at 0 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--panel); }
.nempty > div { display: flex; flex-direction: column; gap: 4px; }
.nempty b { font: 800 18px/1.2 var(--head); text-transform: uppercase; letter-spacing: .02em; }
.nempty span { color: var(--muted); font-size: 14px; }
.nempty a { color: var(--accent); font-weight: 700; text-decoration: none; margin-top: 2px; }

/* the numbers strip: HUD style */
.theme-nfsmw .stats .stat { position: relative; overflow: hidden; border-top: 2px solid var(--accent); }
.theme-nfsmw .stats .stat b { font-variant-numeric: tabular-nums; }
.theme-nfsmw .stats .stat:first-child { border-top-color: #22c55e; }
.theme-nfsmw .stats .stat:nth-child(2) { border-top-color: #f2a33a; }

@media (max-width: 560px) {
  .nrace .micon { grid-row: auto; }
  .nrace .norder { grid-column: 1 / -1; }
}