/* ===== Mr Ball mini app ===== */
:root {
  --bg: #f3f4ef; --bg2: #e9ebe3; --card: #ffffff; --card2: #f6f7f2; --line: #e1e3da;
  --ink: #0f1410; --ink2: #4b5348; --ink3: #858c80;
  --acc: #5f8f00; --acc-ink: #ffffff; --acc-soft: #e7f2c9; --live: #e5302f; --gold: #c99a1b;
  --win: #2f9e44; --draw: #9aa194; --loss: #d64545;
  --shadow: 0 1px 2px rgba(15,20,16,.06), 0 6px 18px rgba(15,20,16,.06);
  --r: 16px; --r-sm: 10px;
  --font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --num: "Barlow Condensed", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --fs: 16px;
}
:root[data-theme="dark"] {
  --bg: #0a0d0b; --bg2: #111611; --card: #141a15; --card2: #1a211b; --line: #232b24;
  --ink: #eef3ea; --ink2: #b3bcae; --ink3: #7a8475;
  --acc: #c6f432; --acc-ink: #0b0f0a; --acc-soft: #22301a; --live: #ff4d4a; --gold: #f2c94c;
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.35);
}
:root[data-font="s"] { --fs: 14px } :root[data-font="l"] { --fs: 18px } :root[data-font="xl"] { --fs: 20px }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: var(--fs); background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.5;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; }
a { color: var(--acc); text-decoration: none; }
.hidden { display: none !important; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.muted { color: var(--ink3); } .small { font-size: .8rem; }

#app { min-height: 100vh; padding-bottom: calc(76px + var(--safe-b)); }
.page { padding: 0 16px 24px; max-width: 720px; margin: 0 auto; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }

/* ---------- boot ---------- */
.boot { min-height: 100vh; display: grid; place-items: center; }
.ball { width: 44px; height: 44px; border-radius: 50%; background:
  radial-gradient(circle at 35% 35%, #fff 0 30%, transparent 31%), conic-gradient(var(--acc) 0 25%, #fff 0 50%, var(--acc) 0 75%, #fff 0);
  animation: spin 1s linear infinite; box-shadow: 0 0 0 4px var(--acc-soft); }
@keyframes spin { to { transform: rotate(360deg) } }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 12px 16px 10px; margin: 0 -16px 8px; }
.top-row { display: flex; align-items: center; gap: 10px; }
.brand { font-family: var(--num); font-weight: 800; font-size: 1.5rem; letter-spacing: .02em; text-transform: uppercase; }
.brand b { color: var(--acc); }
.top h1 { font-size: 1.15rem; margin: 0; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow); flex: none; }
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spacer { flex: 1; }

/* segmented */
.seg { display: flex; background: var(--bg2); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { flex: 1; padding: 8px 14px; border-radius: 999px; font-weight: 600; color: var(--ink2); font-size: .95rem; white-space: nowrap; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.seg.acc button.on { background: var(--acc); color: var(--acc-ink); }

/* chips */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 6px; margin: 0 -16px; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); font-size: .85rem; font-weight: 600; white-space: nowrap; flex: none; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip img { width: 18px; height: 18px; object-fit: contain; }

/* section titles */
.sec { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 0 10px; }
.sec h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.sec .more { font-size: .85rem; color: var(--acc); font-weight: 600; }
:root[data-theme="light"] .sec .more { color: var(--acc); }

/* logo */
.logo { object-fit: contain; flex: none; }
.ph { display: inline-grid; place-items: center; border-radius: 50%; background: var(--bg2); color: var(--ink2); font-weight: 700;
  font-size: .7rem; flex: none; overflow: hidden; }

/* ---------- today strip ---------- */
.strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 8px; margin: 0 -16px; scroll-snap-type: x mandatory; }
.strip::-webkit-scrollbar { display: none; }
.mini { flex: none; width: 168px; background: var(--card); border-radius: var(--r); padding: 10px 12px; box-shadow: var(--shadow); scroll-snap-align: start; }
.mini .st { font-size: .72rem; color: var(--ink3); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; }
.mini .st img { width: 14px; height: 14px; }
.mini .row { display: flex; align-items: center; gap: 8px; height: 26px; }
.mini .row .nm { flex: 1; font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .row .sc { font-family: var(--num); font-weight: 700; font-size: 1.05rem; min-width: 14px; text-align: center; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 25%, transparent); animation: pulse 1.4s infinite; flex: none; }
@keyframes pulse { 50% { opacity: .35 } }
.live-txt { color: var(--live); font-weight: 700; }

/* ---------- feed card ---------- */
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 14px; }
.thumb { position: relative; aspect-ratio: 16/9; background: #0c120d center/cover no-repeat; overflow: hidden; }
.thumb img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.72)); }
.thumb .play { position: absolute; inset: 0; display: grid; place-items: center; }
.thumb .play span { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; box-shadow: 0 6px 22px rgba(0,0,0,.35); }
.thumb .play svg { width: 22px; height: 22px; fill: #0b0f0a; margin-inline-start: 3px; }
[dir="rtl"] .thumb .play svg { margin-inline-start: 0; margin-inline-end: 3px; }
.thumb .dur { position: absolute; bottom: 10px; inset-inline-start: 10px; background: rgba(0,0,0,.75); color: #fff; font-size: .75rem; padding: 2px 7px; border-radius: 6px; font-family: var(--num); font-weight: 600; }
.thumb .lg { position: absolute; top: 10px; inset-inline-start: 10px; display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.55);
  color: #fff; padding: 4px 9px 4px 6px; border-radius: 999px; font-size: .72rem; font-weight: 600; backdrop-filter: blur(6px); }
.thumb .lg img { width: 16px; height: 16px; background: #fff; border-radius: 50%; padding: 1px; }
.thumb .score { position: absolute; bottom: 10px; inset-inline-end: 12px; color: #fff; display: flex; align-items: center; gap: 8px; font-family: var(--num); font-weight: 800; font-size: 1.6rem; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.thumb.nohl { display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--acc) 22%, var(--card2)), var(--card2)); }
.vs-art { display: flex; align-items: center; gap: 18px; }
.vs-art img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.vs-art .big { font-family: var(--num); font-size: 2.6rem; font-weight: 800; }
.nohl-note { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: .75rem; color: var(--ink3); }

.cbody { padding: 12px 14px 12px; }
.teams { display: flex; align-items: center; gap: 10px; }
.teams .t { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.teams .t.a { flex-direction: row-reverse; text-align: end; }
.teams .t span { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teams .t img { width: 28px; height: 28px; }
.teams .sc { font-family: var(--num); font-weight: 800; font-size: 1.35rem; padding: 2px 10px; border-radius: 10px; background: var(--bg2); white-space: nowrap; }
.teams .sc.w { min-width: 74px; text-align: center; }
.meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; color: var(--ink3); font-size: .8rem; }
.meta .act { display: inline-flex; align-items: center; gap: 4px; }
.meta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.meta .on svg { fill: var(--live); stroke: var(--live); }
.meta .on.fav svg { fill: var(--gold); stroke: var(--gold); }

/* compact row */
.rowm { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--card); border-radius: var(--r-sm); margin-bottom: 8px; }
.rowm .tm { width: 54px; text-align: center; font-size: .75rem; color: var(--ink3); flex: none; line-height: 1.25; }
.rowm .tm b { display: block; color: var(--ink); font-family: var(--num); font-size: 1rem; }
.rowm .mid { flex: 1; min-width: 0; }
.rowm .ln { display: flex; align-items: center; gap: 8px; height: 26px; }
.rowm .ln img { width: 20px; height: 20px; }
.rowm .ln .nm { flex: 1; font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rowm .ln .s { font-family: var(--num); font-weight: 700; font-size: 1.05rem; }
.rowm .ln.win .nm, .rowm .ln.win .s { color: var(--ink); } .rowm .ln.lose .nm { color: var(--ink2); font-weight: 500; }
.rowm .pv { width: 64px; height: 40px; border-radius: 8px; flex: none; object-fit: cover; background: var(--bg2); }
.rowm .noh { width: 64px; height: 40px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--bg2); color: var(--ink3); font-size: .65rem; text-align: center; line-height: 1.2; }

/* ---------- match page ---------- */
.player { position: relative; aspect-ratio: 16/9; background: #000; margin: 0 -16px; overflow: hidden; }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player .thumb { position: absolute; inset: 0; aspect-ratio: auto; }
.player-bar { display: flex; gap: 8px; margin: 10px 0 0; }
.pbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--card); font-size: .82rem; font-weight: 600; box-shadow: var(--shadow); }
.pbtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.board { background: var(--card); border-radius: var(--r); padding: 16px 12px 14px; margin-top: 12px; box-shadow: var(--shadow); text-align: center; }
.board .lgline { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .8rem; color: var(--ink2); font-weight: 600; }
.board .lgline img { width: 18px; height: 18px; }
.board .bt { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 12px; }
.board .side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.board .side img { width: 58px; height: 58px; }
.board .side b { font-size: .95rem; line-height: 1.25; }
.board .side .rk { font-size: .72rem; color: var(--ink3); }
.board .big { font-family: var(--num); font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: .02em; }
.board .stt { font-size: .78rem; color: var(--ink3); margin-top: 6px; font-weight: 600; }
.board .pens { font-size: .78rem; color: var(--ink2); }

.actions { display: flex; gap: 8px; margin-top: 12px; }
.actions button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; background: var(--card); border-radius: 12px; font-weight: 700; font-size: .9rem; box-shadow: var(--shadow); }
.actions svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.actions .on.like svg { fill: var(--live); stroke: var(--live); }
.actions .on.fav svg { fill: var(--gold); stroke: var(--gold); }
.actions .pop { animation: popin .35s ease; }
@keyframes popin { 40% { transform: scale(1.25) } }

.desc { background: var(--card); border-radius: var(--r); padding: 14px; margin-top: 12px; box-shadow: var(--shadow); }
.desc h3 { margin: 0 0 10px; font-size: .95rem; }
.desc .result { font-weight: 700; font-size: 1rem; margin-bottom: 10px; padding: 10px 12px; background: var(--acc-soft); border-radius: 12px; }
.kv { display: grid; grid-template-columns: 22px 1fr; gap: 8px 8px; font-size: .88rem; align-items: start; }
.kv .i { text-align: center; }
.kv span.v { color: var(--ink2); }
.goals { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.goal { display: flex; align-items: center; gap: 8px; font-size: .86rem; padding: 4px 0; }
.goal.away { flex-direction: row-reverse; text-align: end; }
.goal .mn { font-family: var(--num); font-weight: 700; color: var(--ink2); min-width: 34px; }
.goal img { width: 16px; height: 16px; }
.goal .card-y, .goal .card-r { width: 10px; height: 14px; border-radius: 2px; background: #f5c518; }
.goal .card-r { background: var(--live); }
.stats { margin-top: 12px; }
.stat { margin: 10px 0; }
.stat .lab { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: 4px; }
.stat .lab b { font-family: var(--num); font-size: .95rem; }
.stat .bar { display: flex; gap: 4px; height: 6px; }
.stat .bar i { display: block; border-radius: 3px; background: var(--ink3); }
.stat .bar i.h { background: var(--acc); }
.src { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg2); font-size: .82rem; }
.src .yt { width: 30px; height: 21px; border-radius: 6px; background: #ff0033; display: grid; place-items: center; flex: none; }
.src .yt::after { content: ""; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }

/* comments */
.comments { margin-top: 18px; }
.cmt { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cmt .av { width: 38px; height: 38px; }
.cmt .bd { flex: 1; min-width: 0; }
.cmt .hd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmt .hd b { font-size: .88rem; }
.cmt .hd .bdg { display: inline-flex; align-items: center; gap: 3px; background: var(--bg2); border-radius: 999px; padding: 1px 6px 1px 4px; font-size: .68rem; color: var(--ink2); font-weight: 600; }
.cmt .hd .bdg img { width: 14px; height: 14px; }
.cmt .hd .role { font-size: .65rem; background: var(--acc); color: var(--acc-ink); border-radius: 6px; padding: 0 5px; font-weight: 700; }
.cmt .hd time { font-size: .72rem; color: var(--ink3); margin-inline-start: auto; }
.cmt p { margin: 3px 0 0; font-size: .92rem; white-space: pre-wrap; word-wrap: break-word; }
.cmt .more { color: var(--ink3); padding: 0 4px; font-size: 1.1rem; line-height: 1; }
.composer { position: sticky; bottom: calc(70px + var(--safe-b)); display: flex; gap: 8px; align-items: flex-end; padding: 10px 0; background: var(--bg); z-index: 5; }
.composer textarea { flex: 1; resize: none; min-height: 44px; max-height: 120px; padding: 11px 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); outline: none; }
.composer textarea:focus { border-color: var(--acc); }
.composer button { width: 44px; height: 44px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; flex: none; }
.composer button svg { width: 20px; height: 20px; fill: currentColor; }
[dir="rtl"] .composer button svg { transform: scaleX(-1); }

/* avatars */
.av { border-radius: 50%; object-fit: cover; background: var(--bg2); flex: none; }

/* ---------- hero (team / league / profile) ---------- */
.hero { margin: 0 -16px; padding: 18px 16px 18px; position: relative; overflow: hidden;
  background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--hc, var(--acc)) 45%, transparent), transparent 70%), var(--card2); }
.hero .row { display: flex; align-items: center; gap: 14px; }
.hero .big-logo { width: 76px; height: 76px; padding: 8px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); object-fit: contain; }
.hero h2 { margin: 0; font-size: 1.35rem; line-height: 1.25; }
.hero .sub { color: var(--ink2); font-size: .85rem; margin-top: 2px; }
.hero .stats3 { display: flex; gap: 8px; margin-top: 14px; }
.hero .stats3 div { flex: 1; background: var(--card); border-radius: 12px; padding: 8px; text-align: center; }
.hero .stats3 b { display: block; font-family: var(--num); font-size: 1.4rem; line-height: 1.1; }
.hero .stats3 span { font-size: .72rem; color: var(--ink3); }
.follow { margin-top: 14px; width: 100%; padding: 11px; border-radius: 12px; background: var(--acc); color: var(--acc-ink); font-weight: 700; }
.follow.on { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.form { display: inline-flex; gap: 3px; vertical-align: middle; }
.form i { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-style: normal; font-size: .6rem; font-weight: 700; color: #fff; font-family: var(--num); }
.form i.W { background: var(--win); } .form i.D { background: var(--draw); } .form i.L { background: var(--loss); }

/* ---------- table ---------- */
.tbl { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.tbl .tr { display: grid; grid-template-columns: 30px minmax(0,1fr) 30px 30px 38px 40px; align-items: center; gap: 4px; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: .85rem; }
.tbl .tr.wide { grid-template-columns: 28px minmax(0,1fr) 26px 24px 24px 24px 34px 34px; }
.tbl .tr:last-child { border-bottom: 0; }
.tbl .th { font-size: .72rem; color: var(--ink3); font-weight: 600; background: var(--card2); }
.tbl .tr > :not(.tn) { text-align: center; font-family: var(--num); font-weight: 600; }
.tbl .tn { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.tbl .tn img { width: 22px; height: 22px; }
.tbl .tn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl .pts { font-weight: 800 !important; font-size: 1rem; }
.tbl .rk { border-radius: 6px; padding: 1px 0; display: block; }
.tbl .tr.podium .rk { background: var(--acc); color: var(--acc-ink); }
.tbl .tr.mine { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.tbl .grp { padding: 8px 12px; font-weight: 700; font-size: .85rem; background: var(--bg2); }
.leaders-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ltop { background: var(--card); border-radius: var(--r); padding: 12px; box-shadow: var(--shadow); text-align: start; }
.ltop .h { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--ink3); font-weight: 600; white-space: nowrap; overflow: hidden; }
.ltop .h img { width: 16px; height: 16px; }
.ltop .b { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ltop .b img { width: 34px; height: 34px; }
.ltop .b strong { font-size: .9rem; display: block; line-height: 1.2; }
.ltop .b .p { font-family: var(--num); font-size: 1.1rem; font-weight: 800; color: var(--acc); }
:root[data-theme="light"] .ltop .b .p { color: var(--acc); }

/* ---------- grid pickers ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.pick { position: relative; background: var(--card); border-radius: var(--r); padding: 14px 8px 10px; text-align: center; box-shadow: var(--shadow); border: 2px solid transparent; transition: transform .12s, border-color .12s; }
.pick:active { transform: scale(.97); }
.pick img { width: 46px; height: 46px; margin: 0 auto 8px; object-fit: contain; }
.pick .ph { width: 46px; height: 46px; margin: 0 auto 8px; display: grid; }
.pick b { display: block; font-size: .8rem; line-height: 1.3; }
.pick small { color: var(--ink3); font-size: .68rem; }
.pick.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 9%, var(--card)); }
.pick .ck { position: absolute; top: 6px; inset-inline-end: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); display: none; place-items: center; font-size: .7rem; font-weight: 800; }
.pick.on .ck { display: grid; }

/* ---------- onboarding ---------- */
.ob { min-height: 100vh; display: flex; flex-direction: column; padding: 24px 16px calc(100px + var(--safe-b)); max-width: 720px; margin: 0 auto; }
.ob-hero { text-align: center; padding: 40px 0 10px; }
.ob-hero .logo-big { width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 28px; background: var(--acc); display: grid; place-items: center; box-shadow: 0 12px 40px color-mix(in srgb, var(--acc) 45%, transparent); }
.ob-hero .logo-big svg { width: 54px; height: 54px; }
.ob-hero h1 { font-size: 1.7rem; margin: 0 0 6px; }
.ob-hero p { color: var(--ink2); margin: 0 auto; max-width: 320px; }
.ob h2 { font-size: 1.3rem; margin: 6px 0 4px; }
.ob .lead { color: var(--ink2); margin: 0 0 16px; font-size: .92rem; }
.steps { display: flex; gap: 6px; margin-bottom: 18px; }
.steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.steps i.on { background: var(--acc); }
.ob-foot { position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 16px calc(12px + var(--safe-b)); background: linear-gradient(transparent, var(--bg) 30%); z-index: 30; }
.ob-foot .in { max-width: 720px; margin: 0 auto; display: flex; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: 14px; background: var(--acc); color: var(--acc-ink); font-weight: 700; font-size: 1rem; }
.btn.block { width: 100%; }
.btn.ghost { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.btn:disabled { opacity: .45; }
.lang-pick { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.search-in { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 14px; padding: 0 12px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.search-in svg { width: 18px; height: 18px; stroke: var(--ink3); fill: none; stroke-width: 2; flex: none; }
.search-in input { flex: 1; border: 0; background: none; padding: 12px 0; outline: none; min-width: 0; }
.group-title { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-weight: 700; }
.group-title img { width: 22px; height: 22px; }

/* ---------- me ---------- */
.me-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 0 6px; }
.me-head .avwrap { position: relative; }
.me-head .av { width: 96px; height: 96px; box-shadow: 0 0 0 4px var(--card), 0 0 0 6px var(--acc); }
.me-head .cam { position: absolute; bottom: 0; inset-inline-end: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; box-shadow: var(--shadow); }
.me-head .cam svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.me-head .nm { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 1.25rem; font-weight: 700; }
.me-head .nm button svg { width: 16px; height: 16px; stroke: var(--ink3); fill: none; stroke-width: 2; }
.me-head .un { color: var(--ink3); font-size: .85rem; direction: ltr; }
.me-head .subst { margin-top: 8px; font-size: .75rem; padding: 3px 10px; border-radius: 999px; background: var(--acc-soft); color: var(--ink); font-weight: 600; }
.list { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.li { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--line); width: 100%; text-align: start; }
.li:last-child { border-bottom: 0; }
.li .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--bg2); font-size: 1rem; flex: none; }
.li .tx { flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; }
.li .tx small { display: block; color: var(--ink3); font-weight: 400; font-size: .75rem; }
.li .vl { color: var(--ink3); font-size: .85rem; }
.li .chev { color: var(--ink3); }
[dir="rtl"] .li .chev { transform: scaleX(-1); }
.switch { width: 44px; height: 26px; border-radius: 13px; background: var(--line); position: relative; flex: none; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch.on { background: var(--acc); }
.switch.on::after { inset-inline-start: 21px; }
.seg.sm button { padding: 5px 10px; font-size: .8rem; }
.mini-seg { display: flex; gap: 4px; background: var(--bg2); border-radius: 10px; padding: 3px; }
.mini-seg button { padding: 4px 9px; border-radius: 8px; font-size: .78rem; font-weight: 600; color: var(--ink2); }
.mini-seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.follow-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; }

/* ---------- admin ---------- */
.urow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.urow .av { width: 40px; height: 40px; }
.urow .bd { flex: 1; min-width: 0; font-size: .85rem; }
.urow .bd b { display: block; font-size: .92rem; }
.tag { display: inline-block; font-size: .68rem; padding: 1px 7px; border-radius: 6px; font-weight: 700; background: var(--bg2); color: var(--ink2); }
.tag.active { background: color-mix(in srgb, var(--win) 18%, transparent); color: var(--win); }
.tag.banned { background: color-mix(in srgb, var(--loss) 18%, transparent); color: var(--loss); }
.tag.pending, .tag.expired { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); }
.sbtn { padding: 6px 10px; border-radius: 9px; font-size: .78rem; font-weight: 700; background: var(--bg2); }
.sbtn.red { background: color-mix(in srgb, var(--loss) 16%, transparent); color: var(--loss); }
.sbtn.green { background: color-mix(in srgb, var(--win) 16%, transparent); color: var(--win); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpis div { background: var(--card); border-radius: 12px; padding: 10px; text-align: center; box-shadow: var(--shadow); }
.kpis b { display: block; font-family: var(--num); font-size: 1.5rem; }
.kpis span { font-size: .72rem; color: var(--ink3); }

/* ---------- tabs ---------- */
.tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: space-around;
  padding: 6px 8px calc(6px + var(--safe-b)); background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
.tabs button { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; color: var(--ink3); font-size: .7rem; font-weight: 600; border-radius: 12px; }
.tabs svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabs button.on { color: var(--ink); }
.tabs button.on svg { stroke: var(--ink); }
.tabs button.on::before { content: ""; position: absolute; }
.tabs button.on span { position: relative; }
.tabs button.on span::after { content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 18px; height: 3px; border-radius: 2px; background: var(--acc); }

/* ---------- shorts ---------- */
.shorts { position: fixed; inset: 0; z-index: 100; background: #000; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.shorts::-webkit-scrollbar { display: none; }
.short { position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; }
.short .blur { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(30px) brightness(.45); transform: scale(1.1); }
.short .stage { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; margin-bottom: 26vh; }
.short .stage img, .short .stage iframe, .short .stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.short .stage .play { position: absolute; inset: 0; display: grid; place-items: center; }
.short .stage .play span { width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; }
.short .stage .play svg { width: 26px; height: 26px; fill: #000; margin-inline-start: 4px; }
.short .info { position: absolute; bottom: calc(24px + var(--safe-b)); inset-inline-start: 16px; inset-inline-end: 80px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.short .info .lgx { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; background: rgba(255,255,255,.14); padding: 3px 10px 3px 6px; border-radius: 999px; backdrop-filter: blur(6px); }
.short .info .lgx img { width: 16px; height: 16px; background: #fff; border-radius: 50%; padding: 1px; }
.short .info h3 { margin: 8px 0 2px; font-size: 1.15rem; }
.short .info p { margin: 0; font-size: .8rem; opacity: .85; }
.short .side { position: absolute; bottom: calc(40px + var(--safe-b)); inset-inline-end: 12px; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.short .side button { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; font-size: .75rem; font-weight: 700; }
.short .side button i { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; backdrop-filter: blur(6px); }
.short .side svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.short .side .on.like svg { fill: #ff4d4a; stroke: #ff4d4a; } .short .side .on.fav svg { fill: #f2c94c; stroke: #f2c94c; }
.shorts-close { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); inset-inline-start: 12px; z-index: 101; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; font-size: 1.2rem; backdrop-filter: blur(6px); }

/* ---------- sheet / toast / misc ---------- */
.sheet { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; animation: fade .15s; }
.sheet .box { width: 100%; max-width: 720px; margin: 0 auto; background: var(--card); border-radius: 22px 22px 0 0; padding: 10px 16px calc(18px + var(--safe-b)); max-height: 85vh; overflow-y: auto; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 12px; }
.sheet h3 { margin: 4px 0 12px; font-size: 1.05rem; }
.sheet .opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 4px; border-bottom: 1px solid var(--line); font-weight: 600; text-align: start; }
.sheet .opt.red { color: var(--loss); }
.sheet input.field { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); outline: none; margin-bottom: 12px; }
.toast { position: fixed; bottom: calc(90px + var(--safe-b)); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: .88rem; font-weight: 600; opacity: 0; pointer-events: none; transition: all .2s; z-index: 300; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%); }
.empty { text-align: center; padding: 40px 20px; color: var(--ink3); }
.empty .em { font-size: 2.4rem; margin-bottom: 8px; }
.skel { background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: var(--r); }
@keyframes sk { to { background-position: -200% 0 } }
.loader-more { text-align: center; padding: 16px; color: var(--ink3); font-size: .85rem; }
.err { padding: 60px 24px; text-align: center; }
.err h2 { margin: 12px 0 6px; }
.err p { color: var(--ink2); }
.shorts-fab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: .8rem; flex: none; }
.shorts-fab svg { width: 14px; height: 14px; fill: currentColor; }

/* match report / timeline / line-ups */
.report { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--card2); border-inline-start: 3px solid var(--acc); }
.report h3 { margin: 0 0 6px; font-size: .9rem; }
.report p { margin: 0; font-size: .9rem; line-height: 1.85; color: var(--ink); }
.goal { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.goal:last-child { border-bottom: 0; }
.goal .who { flex: 1; min-width: 0; }
.goal.away .who { text-align: end; }
.goal.goal .who { font-weight: 700; }
.shirt { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 4px; margin-inline-end: 5px; border-radius: 5px;
  background: var(--ink); color: var(--bg); font-family: var(--num); font-size: .75rem; font-weight: 700; vertical-align: 1px; }
.goal .in { color: var(--win); } .goal .out { color: var(--loss); }
.goal .in .shirt { background: var(--win); color: #fff; } .goal .out .shirt { background: var(--loss); color: #fff; }
.tagx { font-size: .68rem; background: var(--bg2); color: var(--ink2); border-radius: 5px; padding: 0 5px; font-weight: 600; }
.lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lucol { min-width: 0; }
.luhead { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: .85rem; }
.luhead small { color: var(--ink3); margin-inline-start: auto; font-family: var(--num); }
.pl { display: flex; align-items: center; gap: 4px; font-size: .8rem; padding: 3px 0; }
.pl span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl small { color: var(--ink3); font-size: .65rem; }
.bench { margin: 8px 0 4px; font-size: .72rem; color: var(--ink3); font-weight: 700; border-top: 1px dashed var(--line); padding-top: 6px; }
.goal.sub .who { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; }
.goal.sub.away .who { align-items: flex-end; }
.goal .in, .goal .out { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tagpreview { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.tagpreview .hd, .me-head .hd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bdg { display: inline-flex; align-items: center; gap: 3px; background: var(--bg2); border-radius: 999px; padding: 1px 7px 1px 4px; font-size: .7rem; color: var(--ink2); font-weight: 600; }
.bdg img { width: 14px; height: 14px; }
.sheet .opt img { width: 22px; height: 22px; }
.starbtn { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--bg2); flex: none; }
.starbtn svg { width: 20px; height: 20px; stroke: var(--ink3); fill: none; stroke-width: 2; }
.starbtn.on svg { fill: var(--gold); stroke: var(--gold); }
.li small { display: block; color: var(--ink3); font-weight: 500; font-size: .75rem; }
.field.big { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); outline: none; font-size: 1.05rem; }
.field.big:focus { border-color: var(--acc); }

/* ===== TikTok-style home ===== */
body.tt-on { overflow: hidden; background: #000; }
body.tt-on #app { padding-bottom: 0; }
body.tt-on .tabs { background: rgba(0,0,0,.92); border-top-color: #1d1d1d; }
body.tt-on .tabs button { color: #8d8d8d; }
body.tt-on .tabs button.on, body.tt-on .tabs button.on svg { color: #fff; stroke: #fff; }
.tt { position: fixed; top: 0; left: 0; right: 0; bottom: calc(62px + var(--safe-b)); background: #000; color: #fff; }
.tt-feed { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.tt-feed::-webkit-scrollbar { display: none; }
.tt-top { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 18px; background: linear-gradient(rgba(0,0,0,.6), transparent); pointer-events: none; }
.tt-top > * { pointer-events: auto; }
.tt-tabs { display: flex; gap: 22px; }
.tt-tabs button { color: rgba(255,255,255,.6); font-weight: 700; font-size: 1.08rem; padding: 4px 2px; border-bottom: 2.5px solid transparent; }
.tt-tabs button.on { color: #fff; border-bottom-color: #fff; }
.tt-ico { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; font-size: 1.05rem; backdrop-filter: blur(6px); }
.tt-load { height: 100%; display: grid; place-items: center; }
.tt-scope { max-width: 420px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  gap: 12px; padding: 80px 24px 24px; text-align: center; }
.tt-scope h2 { margin: 6px 0 10px; }
.tt-scope .btn { flex-direction: column; gap: 2px; }
.tt-scope .btn small { font-size: .72rem; opacity: .7; font-weight: 500; }
.tt-scope .btn.ghost { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.tti { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tti-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(32px) brightness(.4); transform: scale(1.1); }
.tti-stage { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; margin-bottom: 30vh; }
.tti-stage img, .tti-stage iframe, .tti-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.tti-stage .play { position: absolute; inset: 0; display: grid; place-items: center; }
.tti-stage .play span { width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; box-shadow: 0 6px 22px rgba(0,0,0,.4); }
.tti-stage .play svg { width: 24px; height: 24px; fill: #000; margin-inline-start: 4px; }
[dir="rtl"] .tti-stage .play svg { margin-inline-start: 0; margin-inline-end: 4px; }
.tti-stage .dur { position: absolute; bottom: 8px; inset-inline-start: 8px; background: rgba(0,0,0,.75); color: #fff; font-size: .75rem; padding: 2px 7px; border-radius: 6px; font-family: var(--num); }
.tti-info { position: absolute; bottom: 16px; inset-inline-start: 14px; inset-inline-end: 78px; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.tti-info .lgx { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; background: rgba(255,255,255,.16); padding: 3px 10px 3px 6px; border-radius: 999px; backdrop-filter: blur(6px); }
.tti-info .lgx img { width: 16px; height: 16px; background: #fff; border-radius: 50%; padding: 1px; }
.tti-score { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.tti-score .tm { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.tti-score .tm:last-child { flex-direction: row-reverse; text-align: end; }
.tti-score .tm img { flex: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.tti-score .tm b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
.tti-score .sc { font-size: 1.7rem; font-weight: 800; flex: none; }
.tti-info p { margin: 8px 0 0; font-size: .78rem; opacity: .85; }
.tti-side { position: absolute; bottom: 14px; inset-inline-end: 8px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.tti-side button { display: flex; flex-direction: column; align-items: center; gap: 1px; color: #fff; font-size: .68rem; font-weight: 700; min-width: 58px; }
.tti-side button i { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; font-style: normal; font-size: 1.15rem; backdrop-filter: blur(6px); }
.tti-side svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tti-side .on.like svg { fill: #ff4d4a; stroke: #ff4d4a; } .tti-side .on.fav svg { fill: #f2c94c; stroke: #f2c94c; }
.sclist { max-height: 52vh; overflow-y: auto; }
.composer.in-sheet { position: static; padding: 10px 0 0; background: transparent; }
.page .ob-foot { bottom: calc(62px + var(--safe-b)); background: linear-gradient(transparent, var(--bg) 35%); z-index: 39; }
.page:has(.ob-foot) { padding-bottom: 90px; }

/* matches tab */
.tt-tabs.light button { color: var(--ink3); }
.tt-tabs.light button.on { color: var(--ink); border-bottom-color: var(--acc); }
.fx { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow); }
.fx-n { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--acc); color: var(--acc-ink); font-family: var(--num); font-weight: 800; font-size: 1rem; flex: none; }
.fx-n.live { background: var(--live); color: #fff; font-size: .7rem; animation: pulse 1.4s infinite; }
.fx-mid { flex: 1; min-width: 0; }
.fx-teams { display: flex; align-items: center; gap: 8px; }
.fx-teams .t { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.fx-teams .t.a { flex-direction: row-reverse; text-align: end; }
.fx-teams .t b { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-teams .t.l b { color: var(--ink3); font-weight: 500; }
.fx-teams .t.w b { color: var(--ink); }
.fx-sc { font-weight: 800; font-size: 1.05rem; padding: 2px 8px; border-radius: 8px; background: var(--bg2); white-space: nowrap; flex: none; }
.fx-meta { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .72rem; color: var(--ink3); flex-wrap: wrap; }
.fx-meta img { width: 14px; height: 14px; }
.fx-until { margin-inline-start: auto; color: var(--acc); font-weight: 700; }
:root[data-theme="light"] .fx-until { color: var(--acc); }
.fx-verdict { margin-inline-start: auto; font-weight: 700; color: var(--win); }
.fx-verdict.d { color: var(--ink2); }

/* news */
.news { display: flex; gap: 12px; width: 100%; text-align: start; background: var(--card); border-radius: var(--r); padding: 10px; margin-bottom: 10px; box-shadow: var(--shadow); }
.news-img { width: 92px; height: 70px; border-radius: 10px; object-fit: cover; flex: none; background: var(--bg2); }
.ph-news { display: grid; place-items: center; }
.news-bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.news-bd b { font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-bd small { color: var(--ink2); font-size: .76rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-meta { color: var(--ink3); font-size: .72rem; margin-top: auto; }
/* squad */
.squad { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.pl-card { position: relative; background: var(--card); border-radius: var(--r); padding: 10px 8px 10px; text-align: center; box-shadow: var(--shadow); }
.pl-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; margin: 0 auto 6px; background: var(--bg2); }
.pl-no { position: absolute; top: 8px; inset-inline-start: 8px; }
.pl-name { font-size: .8rem; font-weight: 700; line-height: 1.3; }
.pl-sub { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: .68rem; color: var(--ink3); margin-top: 3px; }
.pl-sub img { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; }
.tabs button { min-width: 0; }