:root {
  --red: #c8102e; --red-d: #9d0b23; --ink: #15171c; --ink2: #5b6170; --line: #e3e5ea;
  --bg: #f4f5f7; --card: #fff; --green: #12895a; --green-bg: #e3f5ec; --amber: #b86e00; --amber-bg: #fff3dc;
  --blue: #1f5fbf; --blue-bg: #e6efff; --pitch: #1f7a3e; --pitch-d: #17612f;
  --r: 14px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; background: var(--bg); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 15px; }

.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: linear-gradient(90deg, var(--red-d), var(--red)); color: #fff; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; letter-spacing: .2px; }
.brand img { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
#nav { margin-left: auto; display: flex; gap: 4px; align-items: center; overflow-x: auto; }
#nav a { padding: 6px 10px; border-radius: 999px; font-weight: 600; font-size: 14px; white-space: nowrap; opacity: .9; }
#nav a.on { background: rgba(255,255,255,.18); opacity: 1; }
.coins { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.coin { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe08a, #e2a400); box-shadow: inset 0 0 0 1.5px #b57f00; flex: none; }
#nav .coins { background: rgba(0,0,0,.18); padding: 5px 10px; border-radius: 999px; }

main { max-width: 760px; margin: 0 auto; padding: 16px 16px 96px; }
.loading { padding: 40px; text-align: center; color: var(--ink2); }
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px; }
.card.flush { padding: 0; overflow: hidden; }
.muted { color: var(--ink2); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 10px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 10px; }
.section-title h2 { font-size: 16px; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef0f3; color: var(--ink2); white-space: nowrap; }
.pill.live { background: #ffe4e8; color: var(--red); }
.pill.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: blink 1.2s infinite; }
.pill.green { background: var(--green-bg); color: var(--green); }
.pill.amber { background: var(--amber-bg); color: var(--amber); }
.pill.blue { background: var(--blue-bg); color: var(--blue); }
@keyframes blink { 50% { opacity: .25; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 700; cursor: pointer; background: var(--red); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: #eef0f3; color: var(--ink); }
.btn.green { background: var(--green); }
.btn.small { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn.block { width: 100%; }
.link { background: none; border: 0; color: var(--red); font-weight: 700; cursor: pointer; padding: 0; }

label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink2); margin-bottom: 4px; }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,.12); }
.err { color: var(--red); font-weight: 600; font-size: 14px; min-height: 1em; }

.auth { max-width: 380px; margin: 40px auto; }
.auth h1 { margin-bottom: 4px; }
.auth p { margin: 0 0 18px; }

/* contest + match cards */
.contest { display: block; }
.contest .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.vs .t { display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.vs .t:last-child { justify-content: flex-end; text-align: right; }
.vs .t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flag { width: 32px; height: 32px; border-radius: 50%; background: #eef0f3; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--ink2); flex: none; overflow: hidden; }
.flag img { width: 100%; height: 100%; object-fit: cover; }
.when { text-align: center; font-size: 12px; color: var(--ink2); font-weight: 600; }
.when b { display: block; color: var(--red); font-size: 13px; }
.score { font-size: 13px; color: var(--ink2); margin-top: 8px; display: flex; justify-content: space-between; gap: 8px; }
.match-row { display: block; padding: 14px 16px; border-top: 1px solid var(--line); }
.match-row:first-child { border-top: 0; }
.match-row .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 8px; }

/* tables */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); border-top: 0; background: #fafbfc; }
td.num, th.num { text-align: right; }
tr.me td { background: #fff7f8; }
tr.click { cursor: pointer; }
.pos { color: var(--green); font-weight: 700; }
.neg { color: var(--red); font-weight: 700; }
.rank { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; font-size: 12px; background: #eef0f3; }
.rank.r1 { background: #ffd54a; } .rank.r2 { background: #d7dce3; } .rank.r3 { background: #f0b27a; }

/* tabs */
.tabs { display: flex; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 4px; gap: 4px; margin-bottom: 12px; position: sticky; top: 56px; z-index: 10; }
.tabs button { flex: 1; border: 0; background: none; padding: 9px 6px; border-radius: 10px; font-weight: 700; color: var(--ink2); cursor: pointer; font-size: 14px; }
.tabs button.on { background: var(--red); color: #fff; }

/* builder */
.builder-head { background: linear-gradient(135deg, #1b1e27, #2c3140); color: #fff; border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px; position: sticky; top: 56px; z-index: 10; }
.builder-head .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.builder-head .stats b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.builder-head .stats span { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .05em; }
.slots { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; margin-top: 12px; }
.slots i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); }
.slots i.on { background: #3ddc84; }
.roletabs { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; }
.roletabs button { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 4px; font-weight: 700; cursor: pointer; font-size: 13px; white-space: nowrap; }
.roletabs button.on { border-color: var(--red); color: var(--red); background: #fff5f6; }
.hint { font-size: 13px; color: var(--ink2); margin: 0 2px 8px; }
.filters { display: flex; gap: 6px; margin-bottom: 10px; align-items: center; }
.filters .chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.filters .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.plist { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.prow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); cursor: pointer; user-select: none; }
.prow:first-child { border-top: 0; }
.prow.sel { background: #f1fbf5; }
.prow.dis { opacity: .4; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #e9ecf1; display: grid; place-items: center; font-weight: 800; color: var(--ink2); font-size: 13px; flex: none; overflow: hidden; position: relative; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar .side { position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 8px; padding: 0 4px; border-radius: 4px; }
.prow .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .sub { font-size: 12px; color: var(--ink2); display: flex; gap: 6px; align-items: center; }
.prow .cr { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.add { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--green); color: var(--green); display: grid; place-items: center; font-weight: 900; font-size: 18px; flex: none; }
.prow.sel .add { background: var(--green); color: #fff; }
.cvbtn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font-weight: 800; font-size: 13px; cursor: pointer; flex: none; }
.cvbtn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.dot-in { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }
.dot-out { width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: inline-block; }
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.bar .inner { max-width: 760px; margin: 0 auto; display: flex; gap: 10px; }
.bar .btn { flex: 1; padding: 13px; }

/* pitch view */
.pitch { background: repeating-linear-gradient(0deg, var(--pitch) 0 44px, var(--pitch-d) 44px 88px); border-radius: var(--r); padding: 14px 8px 18px; color: #fff; position: relative; overflow: hidden; }
.pitch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 120px; transform: translate(-50%, -50%); background: rgba(225,200,140,.25); border-radius: 4px; pointer-events: none; }
.pitch .line { position: relative; z-index: 1; margin-bottom: 12px; }
.pitch .line > span { display: block; text-align: center; font-size: 11px; letter-spacing: .1em; opacity: .75; margin-bottom: 6px; font-weight: 700; }
.pitch .line .ps { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 4px; }
.pp { width: 82px; text-align: center; cursor: pointer; position: relative; }
.pp .avatar { margin: 0 auto 3px; width: 44px; height: 44px; border: 2px solid #fff; }
.pp .nm { background: #fff; color: var(--ink); font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp .pt { font-size: 11px; font-weight: 700; margin-top: 2px; }
.pp .cv { position: absolute; top: -4px; left: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 1.5px solid #fff; z-index: 2; }
.pp .cv.vc { background: #fff; color: var(--ink); }
.pp.out { opacity: .45; }
.pp .subin { position: absolute; top: -4px; right: 12px; background: #3ddc84; color: #063; font-size: 9px; font-weight: 800; border-radius: 4px; padding: 0 3px; z-index: 2; }
.pitch .total { position: relative; z-index: 1; text-align: center; margin-top: 4px; font-weight: 800; font-size: 20px; }

.bk { display: flex; gap: 8px; flex-wrap: wrap; }
.bk .pill { font-size: 13px; padding: 4px 10px; }

/* money */
.owe { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.owe:first-child { border-top: 0; }
.owe .arrow { color: var(--ink2); }
.owe .amt { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.big { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }

.empty { text-align: center; padding: 36px 16px; color: var(--ink2); }
.empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }

#toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; opacity: 0; transition: .2s; pointer-events: none; z-index: 50; max-width: calc(100% - 32px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: var(--red); }

dialog { border: 0; border-radius: var(--r); padding: 0; max-width: min(460px, calc(100% - 32px)); width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(10,12,18,.5); }
dialog .dh { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
dialog .db { padding: 16px; max-height: 70vh; overflow: auto; }
.bd-row { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 14px; }
.bd-row:first-child { border-top: 0; }

.picker { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.picker label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); cursor: pointer; }
.picker label:first-child { border-top: 0; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 12px; font-weight: 700; cursor: pointer; font-size: 13px; }
.seg button.on { border-color: var(--red); background: #fff5f6; color: var(--red); }

@media (max-width: 520px) {
  #nav a.hide-sm { display: none; }
  .pp { width: 64px; }
  .pp .avatar { width: 38px; height: 38px; }
  .pp .cv { left: 6px; } .pp .subin { right: 4px; }
  th, td { padding: 9px 8px; }
}

/* ===== XI Club look: Dream11-style chrome, motion, ground ===== */
body { padding-bottom: env(safe-area-inset-bottom); -webkit-tap-highlight-color: transparent; }
.top { box-shadow: 0 2px 12px rgba(120,0,20,.25); }
.brand { font-size: 19px; letter-spacing: -.2px; }
#nav .wallet .coins { background: rgba(0,0,0,.22); padding: 6px 12px; border-radius: 999px; font-size: 14px; }
main { padding-bottom: 110px; }
body.has-bar #tabbar { transform: translateY(110%); }

#tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: #fff; border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); transition: transform .25s ease; box-shadow: 0 -4px 18px rgba(16,24,40,.06); }
#tabbar .inner { max-width: 760px; margin: 0 auto; display: flex; }
#tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; font-size: 11px; font-weight: 700; color: #8a90a0; position: relative; }
#tabbar a svg { width: 23px; height: 23px; transition: transform .2s; }
#tabbar a.on { color: var(--red); }
#tabbar a.on svg { transform: translateY(-1px) scale(1.08); }
#tabbar a.on::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--red); }

/* page + list motion */
#view.enter > * { animation: rise .38s cubic-bezier(.2,.8,.2,1) both; }
#view.enter > *:nth-child(2) { animation-delay: .04s; } #view.enter > *:nth-child(3) { animation-delay: .08s; }
#view.enter > *:nth-child(4) { animation-delay: .12s; } #view.enter > *:nth-child(5) { animation-delay: .16s; }
#view.enter > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.card, .btn, .prow, .match-row, .pp, .cvbtn, .chip, .roletabs button { transition: transform .12s ease, background .2s, box-shadow .2s, opacity .2s; }
a.card:active, .match-row:active, .btn:active:not(:disabled), .prow:active, .chip:active, .cvbtn:active { transform: scale(.97); }
@media (hover: hover) { a.card:hover { box-shadow: 0 6px 20px rgba(16,24,40,.1); transform: translateY(-1px); } }
.tabs button { transition: background .25s, color .25s; }

/* teams, kits, jerseys */
.flag { width: 40px; height: 40px; background: var(--kit, #e9ecf1); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15), inset 0 0 0 2px rgba(255,255,255,.35); position: relative; }
.flag img { position: absolute; inset: 0; background: #fff; }
.flag b { font-size: 11px; letter-spacing: .02em; }
.vs .t { font-size: 16px; }
.jersey { width: 100%; height: 100%; padding: 4px; }
.avatar { background: linear-gradient(180deg, #f2f4f7, #e2e6ec); }
.avatar img { background: #fff; }
.side { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); background: var(--kit, var(--ink)); color: #fff; font-size: 8px; font-weight: 800; padding: 0 5px; border-radius: 4px; line-height: 13px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.prow .avatar { width: 46px; height: 46px; overflow: visible; }
.prow .avatar img, .prow .avatar .jersey { border-radius: 50%; }
.who b { display: block; } .who span { font-size: 12px; color: var(--ink2); }

/* contest cards (home) */
a.card.contest { border-top: 3px solid var(--red); position: relative; overflow: hidden; }
a.card.contest::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(200,16,46,.07), transparent 70%); pointer-events: none; }
.when b { font-variant-numeric: tabular-nums; }
.pill.blue[data-cd] { background: #fff0f2; color: var(--red); font-variant-numeric: tabular-nums; }

/* builder */
.builder-head { background: radial-gradient(120% 140% at 50% 0%, #3a1018 0%, #1b1e27 60%); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.builder-head .stats { align-items: center; }
.builder-head .stats b small { font-size: 12px; opacity: .6; }
.builder-head .sidec { display: flex; align-items: center; justify-content: center; gap: 8px; }
.builder-head .sidec .flag { width: 30px; height: 30px; }
.builder-head .sidec b { font-size: 20px; }
.slots i { transition: background .3s, transform .3s; }
.slots i.on { background: linear-gradient(90deg, #3ddc84, #22b46a); }
.slots i.on:last-of-type { animation: slot .4s ease; }
@keyframes slot { 50% { transform: scaleY(1.8); } }
.prow.pop { animation: pop .35s ease; }
.prow.pop .add { animation: spin .35s ease; }
@keyframes pop { 40% { background: #dff6ea; transform: scale(1.015); } }
@keyframes spin { from { transform: rotate(-90deg) scale(.6); } }
.prow.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.roletabs { position: sticky; top: 222px; z-index: 9; background: var(--bg); padding: 4px 0; margin-top: -4px; }
.roletabs button { transition: all .2s; }

/* the ground */
.pitch { background: #1f8a45; padding: 20px 6px 22px; min-height: 520px; display: flex; flex-direction: column; justify-content: space-around; box-shadow: inset 0 0 60px rgba(0,0,0,.25); }
.pitch .ground { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 40% at 50% 50%, transparent 98%, rgba(255,255,255,.5) 99%, transparent 100%),
    repeating-radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.035) 0 26px, rgba(0,0,0,.035) 26px 52px),
    radial-gradient(ellipse at 50% 50%, #2aa257, #187437); }
.pitch .ground::after { content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 110px; transform: translate(-50%, -50%); background: linear-gradient(#d8c69a, #c7b07a); border-radius: 3px; opacity: .55; }
.pitch::after { display: none; }
.pp { animation: drop .45s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) scale(.8); } }
.pp .avatar { overflow: visible; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.pp .avatar img, .pp .avatar .jersey { border-radius: 50%; }
.pp .side { bottom: auto; top: 38px; }
.pp .nm { margin-top: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pp .pt { text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.pp .cv { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 50% { box-shadow: 0 0 0 5px rgba(255,255,255,0); } }
.pitch .total { background: rgba(0,0,0,.35); align-self: center; padding: 6px 16px; border-radius: 999px; font-variant-numeric: tabular-nums; }
dialog .db .pitch { min-height: 460px; margin: -16px; border-radius: 0; }

/* account */
.hero { background: linear-gradient(135deg, var(--red-d), var(--red)); color: #fff; }
.hero .muted { color: rgba(255,255,255,.8); }
.big-av { width: 56px; height: 56px; background: rgba(255,255,255,.15); }
.wallet-card { margin-top: 14px; background: rgba(0,0,0,.18); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; }
.wallet-card b { font-size: 22px; display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.wallet-card .coin { width: 20px; height: 20px; }

/* settle up */
.owe { animation: rise .4s both; }
.owe b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30%; }

dialog[open] { animation: sheet .28s cubic-bezier(.2,.8,.2,1); }
@keyframes sheet { from { transform: translateY(30px); opacity: 0; } }
@media (max-width: 520px) {
  dialog { margin: auto auto 0; max-width: 100%; border-radius: 18px 18px 0 0; }
  dialog .db { max-height: 78vh; }
}
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }
.skeleton { height: 120px; border-radius: var(--r); background: linear-gradient(90deg, #eceef2 25%, #f6f7f9 50%, #eceef2 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; margin-bottom: 12px; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.pp .side { top: auto; bottom: auto; margin-top: -9px; position: relative; left: auto; transform: none; display: inline-block; }
.pp .nm { margin-top: 3px; }
.tabs button { font-size: 13px; white-space: nowrap; padding: 9px 4px; }
.builder-head .sidec .flag b { font-size: 9px; }

/* create / invite / join */
.create-cta { display: flex; align-items: center; gap: 14px; border: 2px dashed #f0b6c0; background: #fff8f9; box-shadow: none; }
.create-cta .plus { width: 42px; height: 42px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 700; flex: none; transition: transform .3s; }
.create-cta:hover .plus, .create-cta:active .plus { transform: rotate(90deg); }
.invite { background: linear-gradient(135deg, #fff, #fff6f7); border: 1px solid #f6d3d9; }
.invite .code { font-size: 24px; font-weight: 800; letter-spacing: .18em; font-variant-numeric: tabular-nums; color: var(--red); }
.avatars { display: flex; align-items: center; margin-top: 12px; flex-wrap: wrap; gap: 6px 0; }
.avatars span { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; margin-right: -8px; animation: rise .3s both; }
.avatars span:nth-child(3n+2) { background: var(--blue); } .avatars span:nth-child(3n) { background: var(--green); }
.avatars em { margin-left: 16px; font-style: normal; }
.invite-hero { background: radial-gradient(120% 140% at 0% 0%, #e0274a, var(--red-d)); color: #fff; padding: 26px 20px; }
.invite-hero h1 { font-size: 26px; margin-top: 6px; }
.detail summary { padding: 12px 16px; cursor: pointer; color: var(--ink2); font-weight: 700; border-top: 1px solid var(--line); list-style: none; }
.detail summary::after { content: " ▾"; }
.detail[open] summary::after { content: " ▴"; }
.owe.mine-out { background: #fff5f6; } .owe.mine-in { background: #f1fbf5; }
.section-title h2 a { color: inherit; }
.dot-last { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); display: inline-block; }
.seg.mini button { padding: 5px 12px; font-size: 12px; border-radius: 999px; }
.match-row.up .series { margin-bottom: 8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[hidden] { display: none !important; }

/* ===== v2 look: sporty type, team-colour fixtures, stadium hero ===== */
:root { --display: "Barlow Condensed", "Inter", system-ui, sans-serif; }
body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f2f3f7; }
h1, .section-title h2, .brand, .big, .builder-head .stats b, .pitch .total, .code, .hh-name, .hf-teams b, .vs .tn b { font-family: var(--display); letter-spacing: .01em; }
h1 { font-size: 26px; font-weight: 800; }
.section-title h2 { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.brand { font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.top { background: linear-gradient(100deg, #7d0418 0%, #c8102e 55%, #e5243f 100%); }
.top::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background: radial-gradient(circle at 92% -40%, #fff 0 60px, transparent 61px), repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.35) 22px 23px); }
.top > * { position: relative; z-index: 1; }

/* fixtures */
.vs { position: relative; padding: 10px 8px; margin: 0 -8px; border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--k1) 14%, transparent), transparent 38%, transparent 62%, color-mix(in srgb, var(--k2) 14%, transparent)); }
.vs .t { gap: 10px; }
.vs .t.r { justify-content: flex-end; text-align: right; }
.vs .tn { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.vs .tn b { font-size: 22px; font-weight: 800; }
.vs .tn small { font-size: 11px; color: var(--ink2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.vs .flag { width: 44px; height: 44px; }
.when .at { margin-top: 5px; font-size: 11.5px; }
.pill.blue[data-cd] { background: var(--red); color: #fff; font-family: var(--display); font-size: 15px; letter-spacing: .03em; padding: 3px 10px; box-shadow: 0 3px 10px rgba(200,16,46,.25); }
.match-row.up { transition: background .2s; }
.match-row.up:hover { background: #fafbfd; }
.match-row .foot { padding-top: 10px; border-top: 1px dashed var(--line); margin-top: 12px; }

/* home hero */
.home-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 20px 18px 16px; margin-bottom: 6px; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, #ff4a64 0%, transparent 55%), linear-gradient(150deg, #1d0a14 0%, #5a0716 45%, #b00d29 100%);
  box-shadow: 0 14px 30px rgba(120,0,25,.28); }
.home-hero::before { content: ""; position: absolute; right: -50px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff6b7d, #a50b25 60%, #6d0517); box-shadow: inset -12px -16px 30px rgba(0,0,0,.35); opacity: .55; }
.home-hero::after { content: ""; position: absolute; right: -50px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(ellipse 120px 220px at 30% 50%, transparent 98%, rgba(255,255,255,.55) 99%, transparent 100%); opacity: .6; transform: rotate(-25deg); }
.home-hero > * { position: relative; z-index: 1; }
.hh-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hh-hello { opacity: .8; font-size: 14px; }
.hh-name { font-size: 36px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.hh-team { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); padding: 3px 10px; border-radius: 999px; }
.hh-wallet { background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 8px 12px; text-align: right; backdrop-filter: blur(6px); }
.hh-wallet > span { font-size: 11px; opacity: .75; display: block; text-transform: uppercase; letter-spacing: .08em; }
.hh-wallet b { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 24px; }
.hh-wallet .coin { width: 18px; height: 18px; }
.hh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.hh-stats div { background: rgba(255,255,255,.1); border-radius: 12px; padding: 8px 10px; }
.hh-stats b { display: block; font-family: var(--display); font-size: 24px; line-height: 1; }
.hh-stats span { font-size: 11px; opacity: .75; text-transform: uppercase; letter-spacing: .06em; }

/* featured carousel */
.carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 16px 14px; margin: 0 -16px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.hero-fx { flex: 0 0 82%; max-width: 330px; scroll-snap-align: center; border-radius: 18px; padding: 14px 14px 12px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(120deg, color-mix(in srgb, var(--k1) 85%, #000) 0%, color-mix(in srgb, var(--k1) 55%, #111) 42%, color-mix(in srgb, var(--k2) 55%, #111) 58%, color-mix(in srgb, var(--k2) 85%, #000) 100%);
  box-shadow: 0 10px 24px rgba(16,24,40,.18); transition: transform .2s; }
.hero-fx::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 18px, rgba(255,255,255,.05) 18px 19px), radial-gradient(circle at 50% 120%, rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
.hero-fx:active { transform: scale(.97); }
.hf-series { font-size: 12px; font-weight: 600; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; }
.hf-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 12px; position: relative; z-index: 1; }
.hf-teams > div:not(.hf-mid) { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hf-teams .flag { width: 56px; height: 56px; box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.6); }
.hf-teams b { font-size: 24px; font-weight: 800; }
.hf-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vs-badge { font-family: var(--display); font-weight: 800; font-size: 13px; background: #fff; color: var(--ink); border-radius: 999px; padding: 2px 9px; }
.hf-cd { font-family: var(--display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hf-mid small { font-size: 11px; opacity: .8; }
.hf-cta { position: relative; z-index: 1; margin-top: 12px; background: rgba(255,255,255,.95); color: var(--red); font-weight: 800; text-align: center; border-radius: 10px; padding: 8px; font-size: 14px; }

/* contest cards */
a.card.contest { border-top: 0; border-left: 4px solid var(--red); }
a.card.contest h2 { font-family: var(--display); font-size: 22px; font-weight: 800; }

/* login hero */
.auth-hero { text-align: center; color: #fff; margin: -16px -16px -40px; padding: 46px 16px 70px; position: relative; overflow: hidden;
  background: radial-gradient(90% 80% at 50% 0%, #ff4a64 0%, transparent 60%), linear-gradient(170deg, #1d0a14, #8e0a22 60%, #c8102e); }
.auth-hero .ball { width: 74px; height: 74px; margin: 0 auto 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff6b7d, #b00d29 60%, #6d0517);
  box-shadow: 0 12px 30px rgba(0,0,0,.4), inset -8px -10px 18px rgba(0,0,0,.35); position: relative; animation: spinball 6s linear infinite; }
.auth-hero .ball::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse 22px 46px at 50% 50%, transparent 92%, rgba(255,255,255,.75) 95%, transparent 100%); }
@keyframes spinball { to { transform: rotate(360deg); } }
.ah-logo { font-family: var(--display); font-weight: 800; font-size: 44px; letter-spacing: .06em; line-height: 1; }
.ah-logo span { color: #ffd54a; }
.auth-hero p { margin: 6px 0 0; opacity: .85; }
.auth { position: relative; z-index: 2; margin-top: 0; box-shadow: 0 18px 40px rgba(16,24,40,.16); }

/* bottom bar: floating */
#tabbar { left: 12px; right: 12px; bottom: 10px; border-radius: 20px; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.88); backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(16,24,40,.16); padding-bottom: 0; bottom: max(10px, env(safe-area-inset-bottom)); }
#tabbar a.on::before { top: auto; bottom: 4px; left: 42%; right: 42%; height: 4px; border-radius: 4px; }
body.has-bar #tabbar { transform: translateY(160%); }
.vs .tn b { white-space: nowrap; }
.vs .tn b.long { font-size: 18px; }
@media (max-width: 380px) { .vs .tn small { max-width: 64px; } .vs .flag { width: 38px; height: 38px; } }
#tabbar:empty { display: none; }

/* scorecard */
.sc .sc-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: linear-gradient(90deg, #1b1e27, #2c3140); color: #fff; }
.sc .sc-head b { font-family: var(--display); font-size: 20px; letter-spacing: .02em; }
.sc .sc-head span { font-family: var(--display); font-size: 22px; font-weight: 700; }
.sc .sc-head small { font-size: 13px; opacity: .7; }
.sc table + table { border-top: 6px solid #f2f3f7; }
.sc td, .sc th { padding: 8px 10px; }

/* result screen */
.result { border-radius: 20px; padding: 18px 16px 16px; margin-bottom: 12px; color: #fff; text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(100% 80% at 50% 0%, #ffcf4a55, transparent 60%), linear-gradient(160deg, #1d0a14, #5a0716 55%, #b00d29); box-shadow: 0 14px 30px rgba(120,0,25,.28); animation: rise .5s both; }
.rs-title { font-family: var(--display); font-size: 30px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.rs-status { font-size: 13px; opacity: .85; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin: 16px 0 12px; }
.pod { flex: 1; max-width: 120px; animation: rise .6s both; }
.pod.p1 { animation-delay: .25s; } .pod.p2 { animation-delay: .1s; } .pod.p3 { animation-delay: .4s; }
.pod-name { font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-pts { font-size: 12px; opacity: .8; margin-bottom: 6px; }
.pod-step { border-radius: 10px 10px 4px 4px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255,255,255,.14); }
.pod-step span { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; }
.pod-step em { font-style: normal; font-size: 12px; }
.pod.p1 .pod-step { height: 104px; background: linear-gradient(180deg, #ffd54a, #e2a400); color: #3b2a00; justify-content: center; }
.pod.p2 .pod-step { height: 80px; background: linear-gradient(180deg, #e9edf2, #b9c1cc); color: #1d2430; justify-content: center; }
.pod.p3 .pod-step { height: 64px; background: linear-gradient(180deg, #f3b98a, #c9783f); color: #3a1c06; justify-content: center; }
.rs-me { background: rgba(0,0,0,.25); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.rs-me.won { background: rgba(61,220,132,.22); border: 1px solid rgba(61,220,132,.5); }
.admin-link svg { width: 26px; height: 26px; color: var(--red); flex: none; }

/* on/off switch */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; cursor: pointer; }
.switch > span { display: flex; flex-direction: column; min-width: 0; }
.switch b { font-size: 14px; }
.switch small { font-size: 12px; color: var(--ink2); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch i { flex: none; width: 46px; height: 28px; border-radius: 999px; background: #d5d9e0; position: relative; transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch input:checked + i { background: var(--green); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { box-shadow: 0 0 0 3px rgba(200,16,46,.25); }
/* team tag under a face: one line, never over the face */
.side { white-space: nowrap; font-size: 8px; line-height: 12px; padding: 0 4px; bottom: -5px; }
.prow .avatar .side { bottom: -6px; }
@media (min-width: 640px) { #tabbar { left: 50%; right: auto; width: 480px; transform: translateX(-50%); } body.has-bar #tabbar { transform: translate(-50%, 160%); } }
.jersey.figure { padding: 0; background: linear-gradient(180deg, #eef1f5, #dde2e9); border-radius: 50%; }

/* ===== brand logos ===== */
.brand img { width: auto; height: 30px; border-radius: 0; box-shadow: none; display: block; }
.auth-hero .ah-crest { height: 150px; width: auto; display: block; margin: 0 auto 6px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); animation: crestIn .7s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes crestIn { from { opacity: 0; transform: scale(.85) translateY(8px); } }
/* home greeting: crest watermark instead of the plain ball */
.home-hero::before { background: url(/brand/xi-club-crest-white.svg) center / contain no-repeat; box-shadow: none; border-radius: 0; opacity: .1; width: 210px; height: 190px; right: -24px; bottom: -36px; transform: rotate(-10deg); }
.home-hero::after { display: none; }