/* Night stadium under floodlights: deep navy pitch, trophy-gold accent, metal tiers for achievements.
   Layout: sticky top bar with scrolling nav, one 1100px column, sections stacked; tables scroll on their own. */
:root {
  --night: #0c1729;
  --stand: #13233b;
  --stand2: #182c48;
  --line: #22395a;
  --chalk: #eaf0f8;
  --mist: #8fa3bf;
  --gold: #f2c14e;
  --win: #5fd39b;
  --loss: #ff7a6b;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Golos Text", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--night);
  background-image: radial-gradient(1200px 520px at 50% -220px, #1c3357 0%, rgba(12,23,41,0) 70%);
  background-repeat: no-repeat;
  color: var(--chalk); font-family: var(--body); font-size: 16px; line-height: 1.5; min-height: 100vh;
}
a { color: inherit; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
main.wrap { padding-top: 26px; padding-bottom: 60px; min-height: 70vh; }
#app { opacity:1; transform:none; transform-origin:center top; }
#app.route-out { opacity:0; transform:translateY(14px) scale(.988); transition:opacity .16s ease, transform .16s ease; }
#app.route-in { animation:page-enter .34s cubic-bezier(.22,.61,.36,1) both; }
@keyframes page-enter { from { opacity:0; transform:translateY(18px) scale(.985); } to { opacity:1; transform:none; } }
.foot { color: var(--mist); font-size: 13px; padding-top: 20px; padding-bottom: 40px; border-top: 1px solid var(--line); }

/* top bar */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: rgba(12,23,41,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.crest-sm svg { width: 52px; height: 39px; display: block; }
nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
nav a { flex: none; text-decoration: none; color: var(--mist); font-weight: 500; font-size: 15px; padding: 7px 12px; border-radius: 999px; }
nav a:hover { color: var(--chalk); background: var(--stand); }
nav a[aria-current="page"] { color: #2a1d00; background: var(--gold); }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* type */
h1 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 6vw, 50px); line-height: 1.05; margin: 0; text-wrap: balance; }
h2 { font-family: var(--display); font-weight: 700; font-size: 21px; margin: 0; text-wrap: balance; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
h2 small, h3 small { font: 500 14px var(--body); color: var(--mist); }
h3 { font-family: var(--display); font-weight: 700; font-size: 16px; margin: 0; }
.lead { color: var(--mist); margin: 8px 0 0; max-width: 62ch; }
.muted { color: var(--mist); }
.sec { margin-top: 40px; display: grid; gap: 14px; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--mist); text-decoration: none; font-size: 14px; margin-bottom: 14px; }
.back:hover { color: var(--chalk); }
.ico { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; }

/* home hero */
.hero { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 28px; align-items: center; padding: 10px 0 8px; }
.hero .crest svg { width: 260px; height: 195px; display: block; }
.hero h1 { font-size: clamp(30px, 5.4vw, 54px); }
.facts { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 14px; margin-top: 22px; max-width: 980px; }
.fact { --fact-accent: var(--gold); --fact-glow: rgba(242,193,78,.18); position: relative; overflow: hidden; display: grid; gap: 6px; align-content: start; padding: 16px 16px 15px; min-height: 128px; text-decoration: none; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.045); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease; }
.fact::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--fact-glow), transparent 46%); opacity: .9; pointer-events: none; }
.fact::after { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--fact-accent), transparent 72%); opacity: .92; }
.fact small { position: relative; z-index: 1; display: block; font: 700 11px/1.15 var(--body); text-transform: uppercase; letter-spacing: .12em; color: color-mix(in srgb, var(--fact-accent) 78%, white); }
.fact b { position: relative; z-index: 1; display: block; font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3vw, 42px); color: var(--chalk); font-variant-numeric: tabular-nums; line-height: .95; letter-spacing: -.045em; text-shadow: 0 2px 16px rgba(0,0,0,.2); white-space: nowrap; }
.fact span { position: relative; z-index: 1; color: var(--mist); font-family: var(--display); font-size: 15px; line-height: 1.08; text-wrap: balance; }
.fact:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--fact-accent) 56%, white 12%); box-shadow: 0 24px 44px rgba(0,0,0,.28), 0 0 24px var(--fact-glow), inset 0 1px 0 rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }
.fact:hover b { color: color-mix(in srgb, var(--fact-accent) 34%, white); }
.fact-seasons { --fact-accent:#7FD0FF; --fact-glow:rgba(127,208,255,.18); }
.fact-players { --fact-accent:#9B8CFF; --fact-glow:rgba(155,140,255,.18); }
.fact-matches { --fact-accent:#38BDF8; --fact-glow:rgba(56,189,248,.18); }
.fact-goals { --fact-accent:#FFB84D; --fact-glow:rgba(255,184,77,.18); }
.fact-trophies { --fact-accent:#F2C14E; --fact-glow:rgba(242,193,78,.2); }
.fact.digits-4 b { font-size: clamp(24px, 2.55vw, 38px); }
@media (max-width: 1080px) { .facts { grid-template-columns: repeat(3, minmax(150px, 1fr)); max-width: 760px; } }
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; justify-items: start; gap: 14px; }
  .hero .crest svg { width: 180px; height: 135px; }
  .facts { grid-template-columns: repeat(2, minmax(140px, 1fr)); max-width: 100%; width: 100%; gap: 12px; }
  .fact:last-child { grid-column: 1 / -1; }
}
/* generic panels */
.panel { background: var(--stand); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.champ { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; background: var(--stand); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; text-decoration: none; }
.champ .trophy { height: 70px; width: 54px; object-fit: contain; }
.champ .t { font-size: 13px; color: var(--mist); }
.champ .w { font-family: var(--display); font-weight: 700; font-size: 17px; }
.champ .r { font-size: 13px; color: var(--mist); }
.champ.pending .w { color: var(--mist); font-size: 15px; }

/* season strip */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.strip a { text-decoration: none; background: var(--stand); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 4px; }
.strip a:hover { border-color: #3a5a86; }
.strip .s { font-family: var(--display); font-weight: 700; color: var(--gold); font-size: 13px; }
.strip .n { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.strip .k { font-size: 12px; color: var(--mist); }

/* tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--stand); }
table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 10px; text-align: right; white-space: nowrap; }
th { color: var(--mist); font-weight: 500; font-size: 13px; border-bottom: 1px solid var(--line); }
td { border-bottom: 1px solid rgba(34,57,90,.55); }
tr:last-child td { border-bottom: 0; }
th.l, td.l { text-align: left; }
td.pos { color: var(--mist); width: 36px; }
tr.first td.pos { color: var(--gold); font-weight: 700; }
td.pts { font-weight: 700; }
td a, .pl { text-decoration: none; font-weight: 600; }
td a:hover, .pl:hover { color: var(--gold); }
.club-cell { display: inline-flex; align-items: center; gap: 8px; }

/* club logo plate */
.club { display: inline-grid; place-items: center; border-radius: 50%; background: #f3f5f9; flex: none; overflow: hidden; }
.club img { width: 78%; height: 78%; object-fit: contain; display: block; }
.club.s24 { width: 24px; height: 24px; }
.club.s32 { width: 32px; height: 32px; }
.club.s44 { width: 44px; height: 44px; }
.club.s64 { width: 64px; height: 64px; }

/* matches */
.rounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 12px; }
.round { background: var(--stand); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.round h4 { margin: 0 0 6px; font-size: 13px; color: var(--mist); font-weight: 500; }
.m { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; font-size: 14px; padding: 3px 0; }
.m .h { text-align: right; overflow-wrap: anywhere; }
.m .a { overflow-wrap: anywhere; }
.m .sc { font-family: var(--display); font-weight: 700; font-size: 13px; background: var(--night); border-radius: 6px; padding: 2px 8px; min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.m .won { font-weight: 600; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: 1px; }
.tag.tp { background: #3b2a2a; color: #ffb4a8; }
.tag.pen { background: #263a2f; color: #a8f0c8; }
details:not(.gb-season) > summary { cursor: pointer; color: var(--gold); font-weight: 500; font-size: 15px; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
details:not(.gb-season) > summary::-webkit-details-marker { display: none; }
details:not(.gb-season) > summary::before { content: "+"; font-family: var(--display); width: 22px; height: 22px; border-radius: 6px; background: var(--stand2); display: inline-grid; place-items: center; font-size: 14px; }
details:not(.gb-season)[open] > summary::before { content: "−"; }

.ties { display: grid; gap: 8px; }
.tie { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; background: var(--stand); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.tie .st { color: var(--mist); font-size: 13px; }
.tie .pair { font-weight: 500; }
.tie .pair .won { color: var(--gold); font-weight: 700; }
.tie .legs { color: var(--mist); font-size: 13px; }
.tie .agg { font-family: var(--display); font-weight: 700; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.tie.pending { border-style: dashed; }
@media (max-width: 560px) { .tie { grid-template-columns: 1fr auto; } .tie .st { grid-column: 1 / -1; } }

/* tabs & chips */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; font: 500 14px var(--body); color: var(--chalk); background: var(--stand); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; text-decoration: none; }
.chip:hover { border-color: #3a5a86; }
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #2a1d00; }
.note { font-size: 14px; color: var(--mist); border-left: 3px solid var(--gold); padding: 6px 12px; background: rgba(242,193,78,.06); }

/* players */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.pcard { position: relative; text-decoration: none; border-radius: 18px; padding: 16px; display: grid; gap: 12px; background: linear-gradient(160deg, var(--stand2), var(--stand) 60%); border: 1px solid var(--line); overflow: hidden; }
.pcard:hover { border-color: var(--gold); }
.pcard .row { display: flex; justify-content: space-between; align-items: center; }
.pcard .tro { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--gold); line-height: 1; }
.pcard .tro small { display: block; font: 500 12px var(--body); color: var(--mist); margin-top: 4px; }
.pcard .name { font-family: var(--display); font-weight: 700; font-size: 19px; overflow-wrap: anywhere; }
.pcard .mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 12px; color: var(--mist); }
.pcard .mini b { display: block; color: var(--chalk); font-size: 16px; font-variant-numeric: tabular-nums; }
.av { border-radius: 50%; display: inline-grid; place-items: center; font-family: var(--display); font-weight: 800; color: #0c1729; flex: none; }

.phead { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.phead.phead-profile { grid-template-columns: 92px minmax(0,1fr) auto; grid-template-areas: "portrait info showcase" "metadata metadata metadata"; align-items: center; column-gap: 20px; row-gap: 18px; }
.phead-profile > .avatar-open, .phead-profile > .av { grid-area: portrait; }
.phead-profile > .pintro { grid-area: info; }
.phead-profile > .profile-hero-achs { grid-area: showcase; }
.phead-profile > .meta-grid { grid-area: metadata; width:100%; max-width:none; margin:0; min-width:0; }
.phead .av { width: 92px; height: 92px; font-size: 38px; }
.phead .meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; color: var(--mist); font-size: 15px; align-items: center; }
.pintro { min-width: 0; }
.meta-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; max-width:860px; }
.meta-card { min-width:0; position:relative; overflow:hidden; display:grid; gap:7px; align-content:start; min-height:92px; padding:14px 14px 13px; text-decoration:none; color:var(--chalk); border-radius:20px; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.08); box-shadow:0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.meta-card::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.06), transparent 55%); pointer-events:none; }
.meta-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.16); box-shadow:0 18px 36px rgba(0,0,0,.28); }
.meta-card small { display:block; color:var(--mist); font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.meta-card b { display:block; font-family:var(--display); font-size:clamp(22px,2.4vw,30px); line-height:1.16; margin-top:4px; max-width:100%; overflow-wrap:anywhere; }
.meta-card em { font-style:normal; color:#dfe7f2; font-size:14px; line-height:1.2; }
.meta-card > span { position:relative; z-index:1; min-width:0; }
.meta-card.club { grid-template-columns:auto minmax(0,1fr); align-items:center; justify-items:stretch; gap:10px; }
.meta-card.club .club { width:38px; height:38px; }
.meta-card.club b { font-size:clamp(14px,1.5vw,17px); line-height:1.2; margin-top:3px; overflow-wrap:anywhere; }
.meta-card.club em { display:none; }
.meta-card.seasons { --meta-accent:#7FD0FF; }
.meta-card.debut { --meta-accent:#9B8CFF; }
.meta-card.trophies { --meta-accent:#F2C14E; }
.meta-card.club { --meta-accent:#65c8ec; }
.meta-card::after { content:""; position:absolute; left:14px; right:14px; top:0; height:3px; border-radius:999px; background:linear-gradient(90deg, var(--meta-accent,#65c8ec), transparent 75%); opacity:.95; }
.meta-card.trophies b { color:var(--gold); }
.meta-card.seasons b, .meta-card.debut b { color:#eef6ff; }

/* Keep name and awards spacious; metadata always gets a full row. */
.phead-profile .pintro h1 { overflow-wrap:anywhere; }
@media (min-width: 601px) and (max-width: 1199px) {
  .phead.phead-profile { grid-template-columns:92px minmax(0,1fr); grid-template-areas:"portrait info" "showcase showcase" "metadata metadata"; }
  .phead-profile > .profile-hero-achs { justify-self:center; }
}
@media (min-width:601px) and (max-width:900px) {
  .phead-profile > .meta-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.profile-hero-achs { position: relative; display: flex; align-items: center; justify-self: end; gap: 12px; align-self: center; padding: 12px 14px; border-radius: 28px; background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.profile-hero-achs::before { content: ""; position: absolute; inset: -10px 18px auto; height: 44px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.12), rgba(255,255,255,.04)); filter: blur(14px); opacity: .65; pointer-events: none; }
.profile-hero-ach { --hero-glow: rgba(101,200,236,.28); --hero-edge: rgba(255,255,255,.14); all: unset; position: relative; isolation: isolate; overflow: hidden; cursor: pointer; display: grid; place-items: center; width: 110px; min-width: 110px; height: 130px; padding: 8px 4px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid var(--hero-edge); box-shadow: 0 14px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; }
.profile-hero-ach::before { content: ""; position: absolute; inset: 12px; border-radius: 20px; background: radial-gradient(circle at 50% 20%, var(--hero-glow), transparent 62%); filter: blur(10px); opacity: .8; z-index: -1; transition: opacity .22s ease, transform .22s ease; }
.profile-hero-ach::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 12%, rgba(255,255,255,.09) 28%, rgba(255,255,255,.34) 40%, rgba(255,255,255,.08) 52%, transparent 68%); transform: translateX(-160%) skewX(-18deg); transition: transform .52s ease; pointer-events: none; }
.profile-hero-ach svg { width: 98px; height: 110px; transition: transform .22s ease, filter .22s ease; filter: drop-shadow(0 10px 18px rgba(0,0,0,.4)); }
.profile-hero-ach:hover { transform: translateY(-8px) scale(1.045); border-color: rgba(255,255,255,.22); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.045)); box-shadow: 0 22px 44px rgba(0,0,0,.34), 0 0 24px var(--hero-glow), inset 0 1px 0 rgba(255,255,255,.14); }
.profile-hero-ach:hover::before { opacity: 1; transform: scale(1.06); }
.profile-hero-ach:hover::after { transform: translateX(160%) skewX(-18deg); }
.profile-hero-ach:hover svg { transform: translateY(-4px) scale(1.055); filter: drop-shadow(0 16px 26px rgba(0,0,0,.46)); }
.profile-hero-ach:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.profile-hero-ach.rarity-ordinary { --hero-glow: rgba(141,170,193,.28); --hero-edge: rgba(141,170,193,.28); }
.profile-hero-ach.rarity-rare { --hero-glow: rgba(56,97,255,.33); --hero-edge: rgba(84,122,255,.34); }
.profile-hero-ach.rarity-superrare { --hero-glow: rgba(185,242,58,.34); --hero-edge: rgba(204,255,94,.34); }
.profile-hero-ach.rarity-unique { --hero-glow: rgba(255,56,190,.36); --hero-edge: rgba(255,120,214,.36); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.tile { background: var(--stand); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.tile b { display: block; font-family: var(--display); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; }
.tile span { color: var(--mist); font-size: 13px; }
.tile.w b { color: var(--win); } .tile.l b { color: var(--loss); } .tile.g b { color: var(--gold); }

.cabinet { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cab { background: var(--stand); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; justify-items: center; gap: 6px; text-align: center; }
.cab .trophy { height: 96px; width: 100%; object-fit: contain; }
.cab .c { font-family: var(--display); font-weight: 800; font-size: 22px; }
.cab .t { font-size: 13px; color: var(--mist); }
.cab .ss { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.cab .ss span { font-size: 12px; background: var(--night); border-radius: 6px; padding: 1px 6px; }
.cab.zero { opacity: .45; }

.clubline { display: grid; grid-template-columns: repeat(10, minmax(70px, 1fr)); gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.cl { display: grid; justify-items: center; gap: 6px; text-align: center; background: var(--stand); border: 1px solid var(--line); border-radius: 12px; padding: 10px 4px; }
.cl .s { font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--gold); }
.cl .n { font-size: 12px; color: var(--mist); line-height: 1.2; min-height: 2.4em; }
.cl.off { opacity: .35; }
.cl.off .club { background: var(--line); }

/* trophy hall */
.hall { display: grid; gap: 14px; }
.hall-item { display: grid; grid-template-columns: 150px 1fr; gap: 20px; background: var(--stand); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.hall-item .trophy { width: 150px; height: 210px; object-fit: contain; }
.hall-item .wins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin-top: 12px; }
.hall-item .wn { display: flex; gap: 8px; align-items: baseline; font-size: 15px; }
.hall-item .wn .s { font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--gold); width: 30px; flex: none; }
.hall-item .wn small { color: var(--mist); }
@media (max-width: 560px) { .hall-item { grid-template-columns: 1fr; justify-items: start; } .hall-item .trophy { width: 110px; height: 150px; } }

/* h2h */
.h2h-pick { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
select { font: 600 16px var(--body); color: var(--chalk); background: var(--stand); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; }
.vs { font-family: var(--display); font-weight: 800; color: var(--gold); }
.score-big { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; text-align: center; }
.score-big .n { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; }
.score-big .lbl { color: var(--mist); font-size: 13px; }
.bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line); }
.bar i { display: block; height: 100%; }
.mlist { display: grid; gap: 6px; }
.mrow { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; background: var(--stand); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.mrow .when { font-size: 12px; color: var(--mist); line-height: 1.3; }
.mrow.tech { opacity: .7; }

/* achievements */
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 12px; }
.badge { all: unset; cursor: pointer; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 6px 2px; border-radius: 12px; }
.badge svg { width: 92px; height: 103px; transition: transform .18s ease; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.badge:hover svg { transform: translateY(-3px) scale(1.04); }
.badge .nm { font-weight: 600; font-size: 14px; line-height: 1.25; text-wrap: balance; }
.badge .rr { font-size: 12px; color: var(--mist); }
.badge.locked svg { filter: grayscale(1) brightness(.55); }
.badge.locked .nm { color: var(--mist); }
.badge:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tiers { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--mist); }
.tiers span { display: inline-flex; align-items: center; gap: 6px; }
.tiers i { width: 12px; height: 13px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: inline-block; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mist); cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; }
.toggle span { width: 34px; height: 20px; border-radius: 10px; background: var(--line); position: relative; }
.toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--chalk); transition: transform .2s; }
.toggle input:checked + span { background: #3f8f6a; }
.toggle input:checked + span::after { transform: translateX(14px); }
.toggle input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

/* sheet */
.scrim { position: fixed; inset: 0; background: rgba(4,9,18,.66); display: none; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
.scrim.open { display: flex; }
.sheet { background: var(--stand); border: 1px solid var(--line); border-radius: 18px; width: min(460px, 100%); max-height: calc(100% - 32px); overflow: auto; padding: 22px 22px 24px; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.sheet .top2 { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.sheet .top2 svg { width: 96px; height: 108px; }
.sheet h3 { font-size: 22px; line-height: 1.15; margin: 0 0 6px; text-wrap: balance; }
.tier-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.levels { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.levels li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 15px; }
.levels li.mine { border-color: var(--gold); }
.levels .lv { font-family: var(--display); font-weight: 700; font-size: 13px; text-align: center; border-radius: 6px; padding: 3px 0; }
.levels .cnt { font-size: 13px; color: var(--mist); white-space: nowrap; }
.holders-h { margin: 20px 0 8px; font-size: 14px; color: var(--mist); }
.holders { display: flex; flex-wrap: wrap; gap: 8px; }
.holder { display: inline-flex; align-items: center; gap: 8px; background: var(--night); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 14px; text-decoration: none; }
.holder .av { width: 26px; height: 26px; font-size: 12px; }
.holder em { font-style: normal; color: var(--mist); font-size: 12px; }
.empty { color: var(--mist); font-size: 14px; margin: 0; }
.x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--night); color: var(--chalk); font-size: 18px; cursor: pointer; display: grid; place-items: center; }

@media (prefers-reduced-motion: no-preference) {
  .legend-shine { animation: shine 3.2s ease-in-out infinite; }
  @keyframes shine { 0%, 100% { opacity: 0; } 50% { opacity: .7; } }
  .profile-hero-ach { animation: hero-ach-drop .78s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--drop-delay, 0ms); }
  .profile-hero-ach:nth-child(1) { transform: rotate(-4deg); }
  .profile-hero-ach:nth-child(2) { transform: rotate(0deg); }
  .profile-hero-ach:nth-child(3) { transform: rotate(4deg); }
  @keyframes hero-ach-drop {
    0% { opacity: 0; transform: translateY(-70px) scale(1.34) rotate(var(--start-rot, 0deg)); }
    58% { opacity: 1; transform: translateY(10px) scale(.95) rotate(0deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  }
}
@media (max-width: 480px) {
  .agrid { grid-template-columns: repeat(3, 1fr); gap: 14px 6px; }
  .badge svg { width: 78px; height: 87px; }
  .badge .nm { font-size: 13px; }
  .scrim { align-items: flex-end; padding: 0; }
  .sheet { border-radius: 18px 18px 0 0; width: 100%; max-height: 88%; }
  .phead .av { width: 68px; height: 68px; font-size: 28px; }
  .top { gap: 8px; padding: 8px 12px; }
}

/* trophies as images */
img.trophy { display: block; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
img.trophy.dim { filter: grayscale(1) brightness(.45); }
/* clickable matches */
[data-match] { cursor: pointer; }
.m:hover .sc, .mrow:hover .sc, .hrow:hover .sc { background: var(--gold); color: #2a1d00; }
a.sc { text-decoration: none; color: inherit; }
a.agg { text-decoration: none; }
a.agg:hover, .legs a:hover { color: var(--gold); }
.legs a { color: var(--chalk); }
.tie:hover, .mrow:hover, .hrow:hover { border-color: #3a5a86; }
.mrow.hl { border-color: var(--gold); background: rgba(242,193,78,.08); }
.hs { margin: 18px 0 8px; color: var(--gold); font-size: 15px; }
.hrow { display: grid; grid-template-columns: 34px 150px 1fr; gap: 10px; align-items: center; background: var(--stand); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; }
.hrow .when { font-size: 12px; color: var(--mist); line-height: 1.3; }
.hrow.tech { opacity: .72; }
.res { font-family: var(--display); font-weight: 700; font-size: 12px; border-radius: 6px; height: 26px; display: grid; place-items: center; }
.r-w { background: rgba(95,211,155,.18); color: var(--win); }
.r-d { background: rgba(143,163,191,.18); color: var(--chalk); }
.r-l { background: rgba(255,122,107,.18); color: var(--loss); }
.r-t { background: #3b2a2a; color: #ffb4a8; font-size: 10px; }
@media (max-width: 560px) { .hrow { grid-template-columns: 34px 1fr; } .hrow .m { grid-column: 1 / -1; } }
/* match page */
.matchhead { display: grid; gap: 18px; }
.mctx { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--mist); font-size: 15px; }
.mctx b { color: var(--gold); font-family: var(--display); font-weight: 700; font-size: 15px; }
.mscore { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.side { display: grid; justify-items: center; gap: 8px; text-align: center; }
.pl.big { font-family: var(--display); font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.mid { display: grid; justify-items: center; gap: 6px; }
.big-sc { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 9vw, 64px); line-height: 1; font-variant-numeric: tabular-nums; }

.hrow-h { align-items: center; }
.order { margin-left: auto; gap: 6px; }
.chip.sm { font-size: 13px; padding: 5px 11px; }
@media (max-width: 560px) { .order { margin-left: 0; width: 100%; } }

/* links everywhere */
.lk { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(143,163,191,.5); }
.lk:hover { color: var(--gold); border-bottom-color: var(--gold); }
.lk.mute { color: var(--mist); }
h1 .lk, h2 .lk, .w .lk { border-bottom: 0; }
.clk { display: inline-flex; border-radius: 50%; }
.clk:hover .club { box-shadow: 0 0 0 2px var(--gold); }
.club.inl { width: 18px; height: 18px; vertical-align: -4px; margin-left: 4px; }
.club.s92 { width: 92px; height: 92px; }
.tlk { display: block; transition: transform .18s ease; }
.tlk:hover { transform: translateY(-3px) scale(1.04); }
.schip { font-size: 12px; background: var(--night); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; text-decoration: none; color: var(--chalk); }
.schip:hover { border-color: var(--gold); color: var(--gold); }
.cab .ss { gap: 5px; }
.lostf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
a.fact { text-decoration: none; }
a.fact:hover b { text-shadow: 0 0 18px rgba(255,255,255,.12); }
[data-go] { cursor: pointer; }
tr[data-go]:hover td { background: rgba(242,193,78,.06); }
.champ[data-go]:hover, .scard:hover { border-color: #3a5a86; }
.wn a.s { text-decoration: none; }
.wn a.s:hover { color: var(--chalk); }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.tcap { margin: 16px 0 0; font-size: 14px; }
#tabs, #hist, #cabinet { scroll-margin-top: 76px; }
.filters { display: grid; gap: 8px; margin-bottom: 6px; }
.cnum { opacity: .65; font-variant-numeric: tabular-nums; margin-left: 2px; }
button.tile { all: unset; box-sizing: border-box; background: var(--stand); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; }
button.tile:hover { border-color: var(--gold); }
button.tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
button.tile b { display: block; font-family: var(--display); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; }
button.tile span { color: var(--mist); font-size: 13px; }
button.tile.w b { color: var(--win); } button.tile.l b { color: var(--loss); }
.mini-ts { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: 13px; color: var(--mist); }
.mini-ts b { color: var(--chalk); font-weight: 600; }
.h2h-pick .vs { all: unset; cursor: pointer; font-family: var(--display); font-weight: 800; color: var(--gold); padding: 6px 8px; border-radius: 8px; }
.h2h-pick .vs:hover { background: var(--stand); }
.avl { text-decoration: none; }
/* trophy page */
.tro-hero { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; }
.tro-big .trophy { width: 220px; height: 300px; object-fit: contain; }
@media (max-width: 560px) { .tro-hero { grid-template-columns: 1fr; } .tro-big .trophy { width: 150px; height: 200px; } }
/* clubs grid */
.clubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cg { display: grid; justify-items: center; gap: 6px; text-align: center; background: var(--stand); border: 1px solid var(--line); border-radius: 14px; padding: 14px 8px; text-decoration: none; }
.cg:hover { border-color: var(--gold); }
.cg span { font-weight: 600; font-size: 14px; }
.cg small { color: var(--mist); font-size: 12px; }
a.cl { text-decoration: none; }
a.cl:hover { border-color: var(--gold); }

/* other awards */
.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-items: start; }
.award { background: var(--stand); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 12px; align-content: start; }
.aw-head { display: flex; align-items: center; gap: 14px; }
.award .medal { width: 52px; height: 65px; flex: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.award .aw-c { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.1; }
.award .aw-t { font-size: 13px; color: var(--mist); }
.aw-list { display: grid; gap: 8px; }
.aw-row { display: grid; gap: 5px; }
.aw-l { font-size: 13px; color: var(--mist); }
.aw-s { display: flex; flex-wrap: wrap; gap: 5px; }
.award.zero .medal { filter: grayscale(1) brightness(.5); }
.award.zero .aw-c { color: var(--mist); }
/* seasons list */
.slist { gap: 8px; }
.srow { display: grid; grid-template-columns: 72px 1fr auto 20px; gap: 16px; align-items: center; text-decoration: none; background: var(--stand); border: 1px solid var(--line); border-radius: 16px; padding: 12px 18px; }
.srow:hover { border-color: var(--gold); }
.srow:hover .arr { color: var(--gold); transform: translateX(3px); }
.snum { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--gold); text-align: center; font-variant-numeric: tabular-nums; }
.sinfo { display: grid; gap: 2px; }
.sinfo b { font-family: var(--display); font-weight: 700; font-size: 17px; }
.sinfo small { color: var(--mist); font-size: 13px; }
.live { justify-self: start; font-size: 11px; font-weight: 600; color: #134430; background: var(--win); border-radius: 999px; padding: 1px 8px; }
.stro { display: flex; gap: 4px; align-items: flex-end; }
.stro img { height: 40px; width: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.arr { color: var(--mist); transition: transform .15s ease; }
@media (max-width: 560px) { .srow { grid-template-columns: 52px 1fr 18px; gap: 10px; padding: 10px 12px; } .stro { grid-column: 2 / 3; grid-row: 2; } .srow .snum { font-size: 30px; grid-row: span 2; } .srow .arr { grid-row: span 2; } }
/* trophy ranking */
.trank { display: grid; gap: 8px; }
.tr-row { display: grid; grid-template-columns: 28px minmax(130px, 190px) 1fr auto; gap: 14px; align-items: center; background: var(--stand); border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; }
.tr-row.first { border-color: rgba(242,193,78,.55); background: linear-gradient(90deg, rgba(242,193,78,.10), var(--stand) 60%); }
.tr-pos { color: var(--mist); font-variant-numeric: tabular-nums; }
.tr-row.first .tr-pos { color: var(--gold); font-weight: 700; }
.tr-p { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.tr-p b { font-weight: 600; overflow-wrap: anywhere; }
.tr-p:hover b { color: var(--gold); }
.tr-cups { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: flex-end; }
.tr-g { display: flex; gap: 0; text-decoration: none; }
.tr-g img { height: 46px; width: auto; margin-right: -4px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); transition: transform .15s ease; }
.tr-g:hover img { transform: translateY(-3px); }
.tr-n { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--gold); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .tr-row { grid-template-columns: 22px 1fr auto; gap: 8px 10px; padding: 10px 12px; } .tr-n { grid-row: 1; grid-column: 3; } .tr-cups { grid-column: 1 / -1; grid-row: 2; } .tr-g img { height: 36px; } }

.rnote { font-size: 12px; color: var(--mist); white-space: nowrap; }

/* spotlight */
.spot { margin-top: 34px; border-radius: 22px; padding: 20px 22px; border: 1px solid rgba(242,193,78,.35); background: radial-gradient(600px 220px at 50% 0%, rgba(242,193,78,.14), transparent 70%), var(--stand); display: grid; gap: 16px; }
.sp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; }
.sp-tag { font-family: var(--display); font-weight: 700; font-size: 12px; color: #2a1d00; background: var(--gold); border-radius: 999px; padding: 3px 10px; }
.sp-main { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.sp-side { display: grid; justify-items: center; gap: 8px; text-decoration: none; text-align: center; }
.sp-side b { font-family: var(--display); font-weight: 700; font-size: 20px; overflow-wrap: anywhere; }
.sp-side:hover b { color: var(--gold); }
.sp-club { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mist); }
.sp-mid { display: grid; justify-items: center; gap: 4px; }
.sp-mid .trophy { height: 110px; width: auto; }
.sp-vs { font-family: var(--display); font-weight: 800; font-size: 34px; color: var(--gold); line-height: 1; }
.sp-score { font-family: var(--display); font-weight: 800; font-size: 40px; text-decoration: none; line-height: 1; }
.sp-score:hover { color: var(--gold); }
.sp-when { font-size: 13px; color: var(--mist); }
.sp-h2h { display: grid; gap: 8px; text-decoration: none; background: var(--night); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.sp-h2h:hover { border-color: var(--gold); }
.sp-h2h-t { font-size: 13px; color: var(--mist); }
.sp-rec { font-size: 14px; }
@media (max-width: 560px) { .sp-side b { font-size: 16px; } .sp-mid .trophy { height: 80px; } .sp-vs { font-size: 26px; } .sp-score { font-size: 30px; } .spot { padding: 16px; } }

/* Golden Ball × Fichajes ceremony promo */
.event-promo { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) auto; gap: 20px; min-height: 325px; margin-top: 30px; border-radius: 24px; overflow: hidden; text-decoration: none; border: 1px solid rgba(242,193,78,.40); background: #0f1828; box-shadow: 0 22px 48px rgba(0,0,0,.24); isolation: isolate; }
.ep-bg, .ep-overlay { position: absolute; inset: 0; }
.ep-bg { background-size: cover; background-position: center; transform: scale(1.02); pointer-events: none; }
.ep-overlay { background: radial-gradient(700px 280px at 10% 20%, rgba(242,193,78,.12), transparent 58%); pointer-events: none; }
.ep-copy, .ep-side { position: relative; z-index: 1; }
.ep-copy { display: grid; align-content: center; gap: 12px; padding: 22px 26px; }
.ep-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ep-tag { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); color: #fff; font-weight: 800; letter-spacing: .08em; font-size: 12px; }
.ep-mini { color: #d1d9e7; font-size: 13px; }
.ep-cobrand { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.ep-ffb { display: inline-grid; place-items: center; flex: none; }
.ep-ffb svg { display: block; width: 64px; height: 48px; }
.ep-fi { height: 35px; width: 35px; object-fit: contain; filter: drop-shadow(0 4px 9px rgba(0,0,0,.35)); }
.ep-x { color: var(--gold); font-weight: 800; font-size: 20px; }
.event-promo h2 { font-size: clamp(23px, 3.7vw, 35px); line-height: 1.12; margin: 0; }
.event-promo p { margin: 0; color: #d9e1ef; font-size: 15px; max-width: 46ch; }
.ep-meta { display: flex; flex-wrap: wrap; gap: 9px; }
.ep-meta > span { display: inline-flex; align-items: center; gap: 8px; background: rgba(12,23,41,.6); border: 1px solid rgba(255,255,255,.11); color: #f0f4fb; border-radius: 14px; padding: 7px 11px; font-size: 13px; }
.ep-meta .ico { width: 16px; height: 16px; color: var(--gold); flex: none; }
.ep-place-label { display: grid; gap: 0; line-height: 1.22; }
.ep-place-label small { color: #c3ccda; font-size: 11px; }
/* Countdown: only small text nodes update, no full-page reflow. */
.ep-countdown { width: min(100%, 400px); margin-top: 3px; padding: 11px 12px 12px; border-radius: 16px; border: 1px solid rgba(242,193,78,.28); background: linear-gradient(120deg, rgba(15,26,43,.88), rgba(25,33,47,.69)); box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 28px rgba(0,0,0,.15); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.ep-countdown-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 9px; }
.ep-countdown-title { font-size: 12px; font-weight: 700; letter-spacing: .035em; color: #FFDC87; }
.ep-countdown-time { color: #D1D9E6; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ep-countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
.ep-countdown-unit { display: grid; justify-items: center; align-content: center; gap: 3px; padding: 7px 2px 6px; min-width: 0; border-radius: 11px; border: 1px solid rgba(255,213,123,.15); background: linear-gradient(180deg, rgba(255,219,144,.10), rgba(255,255,255,.025)); }
.ep-countdown-unit b { display: block; font-family: var(--display); font-size: clamp(19px,2.3vw,26px); font-weight: 800; line-height: 1.2; letter-spacing: -.035em; color: #FFDF92; font-variant-numeric: tabular-nums; }
.ep-countdown-unit small { font-size: 10px; font-weight: 500; color: #C9D2DE; line-height: 1.3; }
.ep-countdown-finished { display: block; color: #FFDF92; font-weight: 800; font-size: 16px; padding: 8px 0; }
.ep-countdown-finished[hidden], .ep-countdown.is-finished .ep-countdown-grid { display: none; }
.ep-action-row { display: flex; align-items: center; margin-top: 2px; }
.ep-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 700; background: linear-gradient(90deg, #f2c14e, #ffda82); color: #2a1d00; border-radius: 999px; padding: 10px 16px; box-shadow: 0 8px 18px rgba(242,193,78,.22); line-height: 1.25; }
.ep-btn .ico { width: 16px; height: 16px; flex: none; }
.ep-compact-cta { display: none; }
.ep-mobile-ball { display: none; }
.ep-side { display: grid; align-items: end; padding: 20px 25px 19px 0; }
.ep-ball { width: min(210px, 24vw); min-width: 110px; object-fit: contain; filter: drop-shadow(0 18px 25px rgba(0,0,0,.42)); }
.event-promo:hover { border-color: rgba(242,193,78,.8); }
.event-promo:hover .ep-ball { transform: translateY(-2px) scale(1.02); transition: transform .18s ease; }
@media (max-width: 760px) {
  .event-promo { display: block; min-height: 0; margin-top: 24px; border-radius: 20px; }
  .ep-bg { background-position: 45% center; }
  .ep-copy { gap: 9px; padding: 16px 17px 14px; }
  .ep-cobrand { min-height: 38px; gap: 9px; }
  .ep-ffb svg { width: 56px; height: 41px; }
  .ep-x { font-size: 17px; }
  .ep-fi { width: 30px; height: 30px; }
  .event-promo h2 { font-size: clamp(20px, 5.6vw, 25px); line-height: 1.14; text-wrap: balance; }
  .event-promo p { display: none; }
  .ep-mini { display: none; }
  .ep-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; align-items: stretch; }
  .ep-meta > span { padding: 7px 8px; border-radius: 10px; font-size: 11px; gap: 5px; min-width: 0; }
  .ep-meta .ico { width: 14px; height: 14px; }
  .ep-date { white-space: nowrap; }
  .ep-place-label { min-width: 0; font-size: 11px; }
  .ep-place-label small { font-size: 10px; }
  .ep-countdown { width: 100%; padding: 10px; margin-top: 1px; border-radius: 14px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ep-countdown-head { margin-bottom: 7px; }
  .ep-countdown-grid { gap: 6px; }
  .ep-countdown-unit { padding: 7px 1px 6px; border-radius: 9px; }
  .ep-countdown-unit b { font-size: clamp(18px,5.3vw,23px); }
  .ep-countdown-unit small { font-size: 10px; }
  .ep-action-row { justify-content: space-between; gap: 8px; margin-top: 0; min-height: 84px; }
  .ep-full-cta { display: none; }
  .ep-compact-cta { display: inline; }
  .ep-btn { max-width: calc(100% - 86px); font-size: 12px; padding: 10px 12px; gap: 3px; }
  .ep-btn .ico { width: 13px; height: 13px; }
  .ep-mobile-ball { display: block; width: 79px; height: 85px; flex: 0 0 79px; }
  .ep-mobile-ball img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 11px rgba(0,0,0,.45)); }
  .ep-side { display: none; }
}
@media (max-width: 370px) {
  .ep-copy { padding: 13px 13px 11px; gap: 8px; }
  .ep-meta > span { font-size: 10px; padding: 7px 6px; }
  .ep-place-label { font-size: 10px; }
  .ep-place-label small { font-size: 9px; }
  .ep-btn { font-size: 11px; padding: 9px 9px; }
  .ep-mobile-ball { width: 71px; height: 75px; flex-basis: 71px; }
  .ep-countdown { padding: 9px 8px; }
  .ep-countdown-grid { gap: 5px; }
  .ep-countdown-unit b { font-size: 17px; }
  .ep-countdown-unit small { font-size: 9px; }
  .ep-action-row { min-height: 75px; }
}

/* podium (dense ranks: equal trophy counts share a step) */
.podium { display: grid; gap: 10px; align-items: end; max-width: 900px; margin: 10px auto 0; width: 100%; }
.pod { display: grid; gap: 10px; min-width: 0; }
.pod-group { display: flex; justify-content: center; align-items: flex-end; gap: 6px; }
.pod-pl { position: relative; flex: 1 1 0; min-width: 0; max-width: 220px; display: grid; justify-items: center; gap: 7px; text-align: center; text-decoration: none; }
.pod-pl b { font-family: var(--display); font-weight: 700; font-size: 16px; overflow-wrap: anywhere; line-height: 1.15; }
.pod-pl:hover b { color: var(--gold); }
.pod-pl .av { box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.45); }
.pod-1 .pod-pl .av { box-shadow: 0 0 0 3px var(--gold), 0 0 34px rgba(242,193,78,.55); }
.pod-2 .pod-pl .av { box-shadow: 0 0 0 3px #c3cedc, 0 0 24px rgba(195,206,220,.35); }
.pod-3 .pod-pl .av { box-shadow: 0 0 0 3px #c47c48, 0 0 22px rgba(196,124,72,.35); }
.pod-crown { position: absolute; top: -22px; color: var(--gold); filter: drop-shadow(0 0 8px rgba(242,193,78,.8)); }
.pod-crown .ico { width: 28px; height: 28px; }
.pod-cups { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.pod-cups img { height: 30px; width: auto; margin: 0 -3px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.pod-step { position: relative; overflow: hidden; border-radius: 16px 16px 6px 6px; display: grid; justify-items: center; align-content: start; gap: 2px; padding-top: 14px; border: 1px solid var(--line); }
.pod-step::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%); pointer-events: none; }
.pod-place { font-family: var(--display); font-weight: 800; font-size: 38px; line-height: 1; }
.pod-n { font-size: 13px; color: var(--chalk); opacity: .9; }
.pod-1 .pod-step { height: 140px; background: linear-gradient(180deg, rgba(242,193,78,.55), rgba(242,193,78,.08)); border-color: rgba(242,193,78,.7); }
.pod-1 .pod-place { color: #fff3c4; text-shadow: 0 0 18px rgba(242,193,78,.8); }
.pod-2 .pod-step { height: 104px; background: linear-gradient(180deg, rgba(195,206,220,.42), rgba(195,206,220,.06)); border-color: rgba(195,206,220,.5); }
.pod-3 .pod-step { height: 76px; background: linear-gradient(180deg, rgba(196,124,72,.48), rgba(196,124,72,.07)); border-color: rgba(196,124,72,.55); }
.pod-3 .pod-place { color: #f0b48a; }
@media (max-width: 560px) {
  .podium { gap: 6px; } .pod-group { gap: 2px; }
  .pod-pl b { font-size: 12px; } .pod-cups img { height: 19px; margin: 0 -2px; }
  .pod-pl .av { width: 46px !important; height: 46px !important; font-size: 19px !important; }
  .pod-1 .pod-pl .av { width: 62px !important; height: 62px !important; font-size: 26px !important; }
  .pod-place { font-size: 26px; } .pod-n { font-size: 11px; }
  .pod-1 .pod-step { height: 104px; } .pod-2 .pod-step { height: 78px; } .pod-3 .pod-step { height: 58px; }
}
/* social cards */
.social-stack { gap: 12px; }
.social-card { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; text-decoration: none; border-radius: 18px; padding: 16px 18px; }
.tg { background: linear-gradient(90deg, rgba(42,171,238,.16), var(--stand) 70%); border: 1px solid rgba(42,171,238,.4); }
.tg:hover { border-color: #2aabee; }
.tg-ico, .tk-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.tg-ico { background: #2aabee; }
.tg-svg, .tk-svg { width: 30px; height: 30px; color: #fff; }
.tg-txt { display: grid; gap: 2px; }
.tg-txt b { font-family: var(--display); font-weight: 700; font-size: 17px; }
.tg-txt small { color: var(--mist); font-size: 13px; }
.tg-btn, .tk-btn { font-weight: 600; font-size: 14px; border-radius: 999px; padding: 9px 16px; white-space: nowrap; }
.tg-btn { background: #2aabee; color: #fff; }
.tk { background: linear-gradient(90deg, rgba(255,255,255,.03), #1c2028 25%, #171a22 100%); border: 1px solid rgba(255,255,255,.12); }
.tk:hover { border-color: rgba(255,255,255,.26); }
.tk-ico { background: linear-gradient(135deg, #191919 0%, #2f3138 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.tk-svg { filter: drop-shadow(2px 0 0 rgba(37,244,238,.65)) drop-shadow(-2px 0 0 rgba(254,44,85,.5)); }
.tk-btn { color: #fff; background: linear-gradient(90deg, #25f4ee 0%, #fe2c55 100%); }
@media (max-width: 560px) { .social-card { grid-template-columns: auto 1fr; } .tg-btn, .tk-btn { grid-column: 1 / -1; text-align: center; } }
/* golden ball */
.gb-list { display: grid; gap: 8px; }
.gb-row { display: grid; grid-template-columns: 60px 44px 1fr; gap: 14px; align-items: center; background: var(--stand); border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; }
.gb-row .snum { font-size: 28px; }
.gb-ico { height: 44px; width: auto; }
.gb-row.empty .gb-ico { filter: grayscale(1) brightness(.45); }
.gb-p { display: flex; align-items: center; gap: 10px; }
.gb-p span { display: grid; }
.gb-p small { color: var(--mist); font-size: 12px; }

.cobrand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cb-ffb svg { width: 72px; height: 54px; display: block; }
.cb-x { font-family: var(--display); font-weight: 800; color: var(--mist); font-size: 20px; }
.cb-fi { width: 48px; height: 48px; border-radius: 12px; display: block; box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.gb-row { grid-template-columns: 60px 44px 1fr auto; }
.gb-row:not(.empty):hover { border-color: var(--gold); }

/* Achievement rework: shared hexagonal shape for all achievement types. */
.ach-progress { display:grid; gap:8px; margin:18px 0; font-size:13px; color:var(--mist); }
.ach-progress progress { width:100%; height:9px; accent-color:#65c8ec; }
@media (max-width:480px) { .levels li { grid-template-columns:28px 1fr; padding:8px; } .levels .cnt { grid-column:2; } }

/* Compact achievement shelf on player profiles only. */
.profile-achs .agrid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.profile-achs:not(.expanded) .profile-ach-grid > :nth-child(n+6) { display:none; }
.profile-ach-reveal { display:none; position:relative; height:86px; margin-top:12px; align-items:center; justify-content:center; }
.profile-achs.more-desktop .profile-ach-reveal { display:flex; }
.profile-ach-preview { position:absolute; inset:0; height:70px; overflow:hidden; pointer-events:none; user-select:none; mask-image:linear-gradient(#000 0%,#000 30%,transparent 100%); }
.profile-ach-preview .agrid { filter:blur(4px); opacity:.55; }
.profile-ach-preview .badge { pointer-events:none; }
.profile-ach-preview .badge:nth-child(-n+5) { display:none; }
.profile-ach-toggle { position:relative; z-index:1; min-height:44px; border:1px solid #65c8ec80; border-radius:999px; padding:11px 24px; background:var(--stand); color:var(--chalk); font:inherit; font-size:14px; font-weight:600; cursor:pointer; box-shadow:0 6px 24px #0006; }
.profile-ach-toggle span { color:var(--mist); font-weight:400; }
.profile-ach-toggle:hover { border-color:#65c8ec; background:var(--night); }
.profile-ach-toggle:focus-visible { outline:2px solid #65c8ec; outline-offset:4px; }
.profile-achs.expanded .profile-ach-preview { display:none; }
.profile-achs.expanded .profile-ach-reveal { height:auto; margin-top:20px; }
@media(max-width:600px) {
  .profile-achs .agrid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 6px; }
  .profile-achs:not(.expanded) .profile-ach-grid > :nth-child(n+4) { display:none; }
  .profile-achs.more-mobile .profile-ach-reveal { display:flex; }
  .profile-ach-preview .badge:nth-child(n+4):nth-child(-n+6) { display:grid; }
  .profile-ach-preview .badge:nth-child(-n+3), .profile-ach-preview .badge:nth-child(n+7) { display:none; }
}

/* Golden Ball voting: expandable season results. */
.gb-hint { margin:0; font-size:14px; }
.gb-season { border:1px solid var(--line); border-radius:14px; background:var(--stand); overflow:hidden; }
.gb-season > .gb-row { display:grid; border:0; border-radius:0; cursor:pointer; list-style:none; }
.gb-season > .gb-row::-webkit-details-marker { display:none; }
.gb-season > .gb-row:focus-visible { outline:2px solid var(--gold); outline-offset:-3px; }
.gb-season[open] { border-color:#f2c14e70; }
.gb-season .snum { display:grid; text-align:center; }
.gb-season .snum small { font:500 10px var(--body, sans-serif); color:var(--mist); text-transform:uppercase; letter-spacing:.08em; }
.gb-expand { display:flex; align-items:center; gap:12px; color:var(--gold); font-size:12px; white-space:nowrap; }
.gb-expand .ico { transition:transform .18s; }
.gb-season[open] .gb-expand .ico { transform:rotate(90deg); }
.gb-voting { padding:20px; border-top:1px solid var(--line); background:var(--night); }
.gb-vote-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.gb-vote-heading h3 { margin:0; font-size:18px; }
.gb-vote-heading > span, .gb-vote-note { font-size:13px; color:var(--mist); }
.gb-vote-note { margin:8px 0 18px; line-height:1.5; }
.gb-ranking { display:grid; gap:6px; list-style:none; margin:0; padding:0; }
.gb-rank-row { display:grid; grid-template-columns:38px minmax(0,1fr) 72px; gap:14px; align-items:center; padding:10px 14px; background:var(--stand); border:1px solid var(--line); border-radius:10px; }
.gb-place { font-family:var(--display); font-size:16px; color:var(--mist); text-align:center; }
.gb-candidate { display:flex; align-items:center; gap:12px; min-width:0; }
.gb-candidate .av { flex-shrink:0; }
.gb-candidate .pl { overflow-wrap:anywhere; }
.gb-points { display:grid; justify-items:end; }
.gb-points b { font-family:var(--display); font-size:20px; }
.gb-points small { color:var(--mist); font-size:11px; }
.gb-rank-1 { background:linear-gradient(100deg,#f2c14e18,transparent); border-color:#f2c14e60; }
.gb-rank-1 .gb-place, .gb-rank-1 .gb-points b { color:#f2c14e; }
.gb-rank-2 .gb-place { color:#c3cedc; }
.gb-rank-3 .gb-place { color:#c47c48; }
@media(max-width:600px) {
  .gb-season > .gb-row { grid-template-columns:32px 28px minmax(0,1fr) 18px; gap:9px; padding:12px 10px; }
  .gb-season .gb-ico { height:32px; }
  .gb-season .gb-p { gap:8px; min-width:0; font-size:14px; }
  .gb-season .gb-p .av { display:none; }
  .gb-expand > span { display:none; }
  .gb-voting { padding:14px 10px; }
  .gb-rank-row { grid-template-columns:24px minmax(0,1fr) 54px; gap:8px; padding:9px 8px; }
  .gb-candidate { gap:8px; font-size:14px; }
  .gb-points b { font-size:18px; }
}

/* Retrospective rankings contain names only, without voting points. */
.gb-rank-row.gb-rank-retro { grid-template-columns:38px minmax(0,1fr); }
@media(max-width:600px) { .gb-rank-row.gb-rank-retro { grid-template-columns:24px minmax(0,1fr); } }

/* Responsive layout: shrink content tracks, keep scrolling inside tables. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
nav { min-width:0; overscroll-behavior-x:contain; }
:where(.sec,.hero,.phead,.champ,.hall-item,.tro-hero,.mrow,.hrow,.mscore,.score-big,.sp-main,.tg,.srow,.gb-row,.gb-rank-row,.top2) > * { min-width:0; }
:where(.tbl-wrap,.clubline,.strip,.mlist,.gb-list,.profile-achs) { min-width:0; max-width:100%; }
.tbl-wrap, .clubline, .strip { -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.gb-season > summary::before, .gb-season > summary::after { content:none; display:none; }
.gb-season > .gb-row { grid-template-columns:60px 44px minmax(0,1fr) auto; width:100%; color:var(--chalk); }
.gb-season .snum { grid-row:auto; }
.gb-season .gb-p { min-width:0; }
.gb-season .gb-p > span { min-width:0; overflow-wrap:anywhere; }
.gb-expand { justify-self:end; }
.gb-season .gb-row > .muted { font-size:14px; overflow-wrap:anywhere; }
.gb-season summary::marker { content:''; }
.gb-vote-note { overflow-wrap:anywhere; }
@media(max-width:600px) {
  .wrap { padding-left:14px; padding-right:14px; }
  main.wrap { padding-top:20px; padding-bottom:36px; }
  .sec { margin-top:28px; gap:12px; }
  h1 { font-size:clamp(25px,6.6vw,38px); overflow-wrap:anywhere; line-height:1.15; }
  h2 { font-size:clamp(18px,4.5vw,22px); line-height:1.3; }
  .top { gap:6px; padding:6px 12px; }
  .top .logo { min-height:44px; }
  .top .crest-sm svg { width:44px; height:33px; }
  .top nav { flex:1; min-width:0; }
  .top nav a { display:flex; align-items:center; min-height:44px; padding:8px 13px; font-size:14px; }
  .gb-season > .gb-row { grid-template-columns:40px 30px minmax(0,1fr) 18px; gap:10px; padding:14px 12px; min-height:86px; }
  .gb-season .snum { font-size:28px; line-height:1.2; }
  .gb-season .gb-ico { width:30px; height:40px; object-fit:contain; }
  .gb-season .gb-p b { font-size:15px; }
  .gb-season .gb-p small { font-size:12px; line-height:1.35; }
  .gb-voting { padding:16px 12px; }
  .gb-vote-heading h3 { font-size:16px; line-height:1.4; }
  .gb-vote-note { font-size:13px; line-height:1.65; }
  .gb-rank-row { min-height:54px; }
  .gb-candidate .pl { padding:5px 0; }
  .phead { grid-template-columns:64px minmax(0,1fr); gap:12px; }
  .phead.phead-profile { grid-template-columns:64px minmax(0,1fr); grid-template-areas:"portrait info" "metadata metadata" "showcase showcase"; }
  .phead > .av, .phead > .avatar-open > .av { width:64px !important; height:64px !important; font-size:26px !important; }
  .phead h1 { font-size:clamp(24px,6vw,34px); }
  .phead-profile > .meta-grid { grid-area:metadata; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:100%; }
  .meta-card { min-height:84px; padding:12px 12px 11px; border-radius:18px; }
  .meta-card b { font-size:clamp(19px,6vw,24px); }
  .meta-card em { font-size:12px; }
  .meta-card.club { grid-column:1 / -1; }
  .phead-profile > .profile-hero-achs { grid-area:showcase; justify-self:stretch; justify-content:center; gap:8px; margin-top:6px; padding:10px 8px; border-radius:22px; }
  .profile-hero-ach { width:min(29vw,100px); min-width:0; height:auto; padding:6px 2px; border-radius:18px; }
  .profile-hero-ach svg { width:min(24vw,84px); height:auto; }
  .cards,.rounds,.awards { grid-template-columns:minmax(0,1fr); }
  .panel { padding:14px; }
  .m { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:6px; }
  .m .pl { overflow-wrap:anywhere; }
  .mrow { grid-template-columns:52px minmax(0,1fr); gap:8px; padding:9px; }
  .h2h-pick { grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr); gap:6px; }
  select { min-width:0; padding:10px 6px; font-size:16px; }
  .score-big,.mscore,.sp-main { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; }
  .score-big .n { font-size:32px; }
  .score-big .lbl { overflow-wrap:anywhere; }
  .big-sc { font-size:34px; }
  .mscore .side .av { width:54px !important; height:54px !important; font-size:23px !important; }
  .pl.big { font-size:14px; }
  .sp-side .av { width:56px !important; height:56px !important; font-size:24px !important; }
  .sp-mid .trophy { height:65px; }
  .sp-side b { font-size:14px; }
  .sp-club { flex-wrap:wrap; justify-content:center; }
  .agrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .badge { min-width:0; }
  .badge svg { max-width:100%; }
  .badge .nm { overflow-wrap:anywhere; }
  .sheet { max-height:88vh; max-height:88dvh; padding:20px 16px max(20px,env(safe-area-inset-bottom)); }
  .sheet .top2 { grid-template-columns:76px minmax(0,1fr); gap:12px; padding-right:24px; }
  .sheet .top2 svg { width:76px; height:86px; }
  .sheet h3 { font-size:19px; overflow-wrap:anywhere; }
  .levels li { grid-template-columns:28px minmax(0,1fr); gap:8px; }
  .levels .cnt { grid-column:2; }
  .x { min-width:44px; min-height:44px; }
  .chip { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .foot { padding-bottom:max(24px,env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) { .gb-expand .ico { transition:none; } #app.route-in { animation:none; } #app.route-out { opacity:1; transform:none; transition:none; } .profile-hero-ach { animation:none; transition:none; } .profile-hero-ach::after { display:none; } }

.match-date { display:block; color:var(--chalk); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.history-date { margin:14px 0 4px; color:var(--mist); font-size:13px; }
.history-date .match-date { font-size:14px; color:var(--gold); }
.calendar-note { color:var(--mist); font-size:13px; line-height:1.5; margin:0 0 10px; }
.calendar-note .match-date { display:inline; }

/* Разные даты первой и ответной встречи одной кубковой пары. */
.leg-date { color:var(--chalk); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }

.av { position: relative; overflow: hidden; }
.av > img { position: absolute; inset: 0; display: block; }

.avatar-open { display: inline-flex; justify-self: start; padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: zoom-in; }
.photo-view { position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content; max-width: 100%; max-height: 100%; padding: 0; border: 0; background: transparent; }
.photo-view::backdrop { background: rgba(3, 8, 16, .9); }
.photo-view > img { display: block; width: auto; height: auto; max-width: 94vw; max-height: 88vh; max-height: 88dvh; border-radius: 12px; }
.photo-view .x { width: 44px; height: 44px; top: 6px; right: 6px; }
html:has(.photo-view[open]) { overflow: hidden; }

.nav-group { flex:none; border:0; background:transparent; cursor:pointer; border-radius:99px; padding:7px 12px; color:var(--mist); font:inherit; font-size:15px; font-weight:500; }
.nav-group:hover,.nav-popup a:hover { background:var(--stand); color:var(--chalk); }
.nav-group.active,.nav-group[aria-expanded="true"],.record-list h3 span { color:var(--gold); }
.nav-popup { position:fixed; z-index:25; width:max-content; max-width:calc(100vw - 10px); padding:6px; background:#142338; border:1px solid var(--line); border-radius:13px; box-shadow:0 12px 32px #0008; }
.nav-popup a { display:block; padding:11px 15px; border-radius:8px; color:var(--chalk); text-decoration:none; }
.nav-popup a[aria-current] { color:var(--gold); }
.duel-promo { margin-top:28px; display:flex; align-items:center; gap:clamp(24px,6vw,76px); padding:clamp(18px,4vw,44px); border:1px solid #47546b; border-radius:18px; background:radial-gradient(ellipse at left,#293d5b,transparent 65%),linear-gradient(110deg,#19283e,#101a2b); text-decoration:none; color:var(--chalk); }
.duel-promo:hover { border-color:var(--gold); }
.duel-pair { display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); column-gap:14px; align-items:center; width:280px; max-width:100%; flex:none; isolation:isolate; }
/* Both pairs occupy the same grid cell, allowing a true crossfade. */
.duel-pair-slide { grid-area:1/1/2/4; display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); column-gap:14px; align-items:center;
  opacity:0; transform:translateY(9px) scale(.97); transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1); pointer-events:none; }
.duel-pair-slide.is-active { opacity:1; transform:translateY(0) scale(1); }
.duel-player { display:grid; justify-items:center; align-content:center; gap:8px; min-width:0; font-size:13px; text-align:center; }
.duel-player:nth-child(2) { grid-column:3; }
.duel-player b { display:block; max-width:100%; overflow-wrap:anywhere; }
.duel-pair .av { box-shadow:0 0 0 2px #ffffff48; }
.duel-pair .duel-versus { grid-area:1/2; z-index:1; text-align:center; font-style:italic; }
.duel-pair .duel-versus,.duel-promo small,.duel-promo strong { color:var(--gold); }
@media (prefers-reduced-motion:reduce) { .duel-pair-slide { transition:none; transform:none; } }
.duel-promo h2 { margin:.15em 0; font-size:clamp(28px,4vw,44px); }
.duel-promo p { margin:0 0 12px; color:var(--mist); }
.record-period,.record-line { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.record-period { margin:16px 0; }
.record-highlights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.record-feature { display:grid; gap:8px; text-decoration:none; color:var(--chalk); border:1px solid var(--line); border-radius:14px; background:var(--stand); padding:18px; }
.record-feature:hover { border-color:var(--gold); }
.record-feature strong { color:var(--gold); font-size:30px; }
.record-feature em,.record-feature small { font:inherit; font-size:13px; color:var(--mist); }
.chip[aria-current="page"] { background:var(--gold); color:#211908; }
.record-list h3 { display:flex; justify-content:space-between; gap:12px; }
.record-line { justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); }
@media(max-width:600px) {
  .top .nav-group { min-height:44px; padding:5px 7px; font-size:13px; }
  .top nav a { padding-inline:7px; font-size:13px; }
  .duel-promo { flex-direction:column; align-items:flex-start; gap:16px; }
  .record-highlights { grid-template-columns:1fr; }
  .record-feature { grid-template-columns:1fr auto; gap:3px 10px; padding:12px 16px; }
  .facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fact { min-height:116px; padding:14px 12px; border-radius:18px; }
  .fact b { font-size:clamp(24px,8vw,34px); }
  .fact.digits-4 b { font-size:clamp(21px,7vw,30px); }
  .fact span { font-size:14px; }
  .fact small { font-size:10px; }
  .facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fact { min-height:116px; padding:14px 12px; border-radius:18px; }
  .fact b { font-size:clamp(24px,8vw,34px); }
  .fact.digits-4 b { font-size:clamp(21px,7vw,30px); }
  .fact span { font-size:14px; }
  .fact small { font-size:10px; }
  .record-feature strong { grid-column:2; grid-row:1/3; align-self:center; font-size:22px; }
}

.record-period select { width:auto; max-width:100%; }
.record-list .mrow + .mrow { margin-top:6px; }
.record-list > p { margin-bottom:0; }
.record-list .mrow small { display:block; text-align:center; }
.nav-popup[hidden] { display:none; }
.nav-popup { max-height:65vh; max-height:65dvh; overflow-y:auto; }
@media(max-width:480px) {
  .top { align-items:center; }
  .top nav { flex:1; min-width:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0 2px; overflow:visible; }
  .top nav > * { grid-column:span 2; display:flex; justify-content:center; align-items:center; gap:3px; min-height:44px; padding:4px 3px; white-space:nowrap; }
  .top nav > :nth-last-child(-n+2) { grid-column:span 3; }
  .duel-pair { margin-inline:auto; }
  .record-feature { grid-template-columns:minmax(0,1fr) auto; }
  .record-feature strong { display:grid; text-align:right; line-height:1.2; }
  .record-feature em { font-size:11px; }
  .record-list { padding:12px; }
  .record-list .mrow { grid-template-columns:minmax(0,1fr); }
  .record-list .when { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .record-list .when br { display:none; }
  .record-list .m { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
  .record-line { align-items:flex-start; gap:4px 12px; }
}

#achtypes { margin-top:clamp(16px, 3vw, 24px); flex-wrap:wrap; overflow:visible; gap:8px; }
#achtypes + .sec { margin-top:clamp(24px, 4vw, 36px); }
@media (max-width:480px) {
  #achtypes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  #achtypes .chip { min-height:44px; }
}

/* Коллекционные награды: независимая палитра от уровневых и шуточных. */
.badge.collectible .rr { font-weight:600; color:var(--rarity); }
.badge.rarity-ordinary { --rarity:#8DAAC1; }
.badge.rarity-rare { --rarity:#3861FF; }
.badge.rarity-superrare { --rarity:#B9F23A; }
.badge.rarity-unique { --rarity:#FF38BE; }
.badge.collectible.locked svg { filter:drop-shadow(0 5px 9px #0007); opacity:.78; }
.badge.collectible.locked .nm { color:var(--chalk); }
.badge.collectible.locked .rr { color:var(--rarity); opacity:.87; }
.ach-hex-superrare, .badge .ach-hex-superrare { filter:drop-shadow(0 0 6px #B9F23A66) drop-shadow(0 6px 9px #0006); }
.ach-hex-unique, .badge .ach-hex-unique { filter:drop-shadow(0 0 7px #FF38BE88) drop-shadow(0 6px 9px #0006); }
.badge.collectible .earned-when { font-size:11px; color:var(--mist); line-height:1.2; margin-top:-3px; }
.ach-rarity-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 15px; margin:15px 0 0; color:var(--mist); font-size:12px; }
.rarity-legend-item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.rarity-legend-item i { display:inline-block; width:10px; height:10px; border-radius:3px; border:1px solid currentColor; background:currentColor; box-shadow:0 0 8px currentColor; }
.rarity-legend-item b { color:var(--chalk); font-weight:600; }
.rarity-ordinary { color:#8DAAC1; }
.rarity-rare { color:#3861FF; }
.rarity-superrare { color:#B9F23A; }
.rarity-unique { color:#FF38BE; }
.ach-rarity-line { margin:14px 0 0; font-size:14px; color:var(--mist); }
.ach-historical-note { font-size:13px; color:var(--mist); line-height:1.5; margin:10px 0 0; }
@media (max-width:600px) {
  .badge.collectible .rr { font-size:11px; line-height:1.3; }
  .ach-rarity-legend { gap:9px 12px; }
}

/* SVG-анимации существуют только у редких, эпических и уникальных
   коллекционных значков. Обычные, уровневые и шуточные не затронуты. */
.ach-glint { opacity:0; }
.ach-spark { opacity:0; transform-box:fill-box; transform-origin:center; }
.ach-epic-aura { opacity:.14; }
.ach-holo-rim { opacity:.7; }

@media (prefers-reduced-motion: no-preference) {
  .ach-glint-rare { animation:ach-light-rare 5.6s ease-in-out infinite; }
  .ach-glint-superrare { animation:ach-light-epic 4.4s ease-in-out infinite; }
  .ach-glint-unique { animation:ach-light-holo 7s ease-in-out infinite; }
  .ach-epic-aura { animation:ach-epic-pulse 4.4s ease-in-out infinite; }
  .ach-spark-1 { animation:ach-twinkle 4.4s ease-out infinite; }
  .ach-spark-2 { animation:ach-twinkle 4.4s ease-out 1.65s infinite; }
  .ach-holo-spark-1 { animation:ach-twinkle 6.4s ease-out .5s infinite; }
  .ach-holo-spark-2 { animation:ach-twinkle 6.4s ease-out 3.4s infinite; }
  .ach-holo-rim { animation:ach-rim-pulse 7s ease-in-out infinite; }

  /* У уникальных цвета плавно меняются, а не резко переключаются. */
  #g-unique stop:nth-child(1) { animation:ach-holo-first 7s ease-in-out infinite; }
  #g-unique stop:nth-child(2) { animation:ach-holo-middle 7s ease-in-out infinite; }
  #g-unique stop:nth-child(3) { animation:ach-holo-last 7s ease-in-out infinite; }

  @keyframes ach-light-rare {
    0%, 17%, 55%, 100% { opacity:0; transform:translateX(-75px); }
    23% { opacity:.5; }
    39% { opacity:.75; transform:translateX(150px); }
    45% { opacity:0; transform:translateX(175px); }
  }
  @keyframes ach-light-epic {
    0%, 8%, 63%, 100% { opacity:0; transform:translateX(-75px); }
    18% { opacity:.42; }
    40% { opacity:.7; transform:translateX(150px); }
    47% { opacity:0; transform:translateX(175px); }
  }
  @keyframes ach-light-holo {
    0%, 12%, 65%, 100% { opacity:0; transform:translateX(-75px); }
    20% { opacity:.35; }
    43% { opacity:.67; transform:translateX(150px); }
    50% { opacity:0; transform:translateX(175px); }
  }
  @keyframes ach-epic-pulse {
    0%, 100% { opacity:.12; }
    50% { opacity:.65; }
  }
  @keyframes ach-twinkle {
    0%, 18%, 36%, 100% { opacity:0; transform:scale(.5); }
    23%, 29% { opacity:1; transform:scale(1.12); }
  }
  @keyframes ach-rim-pulse {
    0%, 100% { opacity:.45; }
    48% { opacity:1; }
  }
  @keyframes ach-holo-first {
    0%, 100% { stop-color:#FF38BE; }
    34% { stop-color:#FFB8ED; }
    67% { stop-color:#66E4FF; }
  }
  @keyframes ach-holo-middle {
    0%, 100% { stop-color:#FBD4FF; }
    34% { stop-color:#66E4FF; }
    67% { stop-color:#FF38BE; }
  }
  @keyframes ach-holo-last {
    0%, 100% { stop-color:#66E4FF; }
    34% { stop-color:#FF38BE; }
    67% { stop-color:#FBD4FF; }
  }
}
/* Статичная палитра при отключении анимации остаётся яркой и читаемой. */
@media (prefers-reduced-motion: reduce) {
  .ach-glint, .ach-spark { animation:none !important; opacity:0 !important; }
  #g-unique stop { animation:none !important; }
  .ach-epic-aura { animation:none !important; opacity:.17; }
  .ach-holo-rim { animation:none !important; opacity:.65; }
}

/* ===========================================================
   FRIENDLIES REWORK — isolated competition archive
   =========================================================== */
.ft-intro { position:relative; margin: 4px 0 24px; padding:28px 30px 26px; border:1px solid #33476a; border-radius:24px; overflow:hidden; background:radial-gradient(ellipse at right top,rgba(75,90,177,.20),transparent 55%),linear-gradient(135deg,#16253c,#101c30 70%); }
.ft-intro::after {content:''; position:absolute; width:260px; height:260px; border:1px solid rgba(176,190,255,.08); border-radius:50%; top:-164px; right:-70px; box-shadow:0 0 0 60px rgba(163,183,255,.02);pointer-events:none;}
.ft-overline {color:#b9c6dd; font-size:11px; letter-spacing:.15em; font-weight:750;}
.ft-intro h1 { margin:8px 0 8px; font-size:clamp(32px,5vw,57px); }
.ft-intro p { margin:0; max-width:740px; color:var(--mist);font-size:clamp(15px,1.65vw,18px);line-height:1.55; }
.ft-independence {display:inline-flex; gap:9px; align-items:center; margin-top:20px; padding:10px 13px; background:#0b1b30a8; color:#b7c8df; border:1px solid #344766; border-radius:12px; font-size:13px; line-height:1.45;}
.ft-independence .ico {width:19px; height:19px; color:#7fd0ff;flex:none;}
.ft-hub-grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
.ft-hub-card,.ft-detail-hero {--ft-main:#64bfff;--ft-glow:rgba(29,123,229,.30);--ft-soft:#80cfff;position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(118,160,233,.31);background:radial-gradient(ellipse at 75% 24%,var(--ft-glow),transparent 61%),linear-gradient(150deg,#152844,#0c172a 76%);}
.ft-hub-card.ft-vozduhano,.ft-detail-hero.ft-vozduhano {--ft-main:#f0c98c;--ft-glow:rgba(195,137,61,.25);--ft-soft:#ffda9a;border-color:rgba(227,179,104,.33);background:radial-gradient(ellipse at 75% 24%,var(--ft-glow),transparent 60%),linear-gradient(150deg,#29231e,#101a29 78%);}
.ft-hub-card.ft-brotherly,.ft-detail-hero.ft-brotherly {--ft-main:#f6c977;--ft-glow:rgba(94,143,255,.24);--ft-soft:#ffe5b5;border-color:rgba(248,206,122,.34);background:radial-gradient(ellipse at 76% 22%,rgba(80,138,255,.22),transparent 56%),radial-gradient(ellipse at 24% 18%,rgba(246,201,119,.18),transparent 48%),linear-gradient(150deg,#1d2135,#0f192c 78%);}
.ft-hub-card.ft-glory,.ft-detail-hero.ft-glory {--ft-main:#c5aaff;--ft-glow:rgba(122,71,229,.32);--ft-soft:#d4c6ff;border-color:rgba(174,137,255,.37);background:radial-gradient(ellipse at 75% 20%,var(--ft-glow),transparent 62%),linear-gradient(150deg,#251c45,#10182f 80%);}
.ft-hub-card {display:flex;flex-direction:column;gap:0;min-width:0;min-height:432px;border-radius:24px;color:var(--chalk);text-decoration:none;box-shadow:0 16px 42px #0004;transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease;}
.ft-hub-card::after {content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 34%,rgba(255,255,255,.07) 46%,transparent 57%);transform:translateX(-125%);pointer-events:none;transition:transform .72s ease;z-index:1;}
.ft-hub-card:hover {transform:translateY(-7px);border-color:var(--ft-main);box-shadow:0 22px 58px #0007,0 0 34px var(--ft-glow);}
.ft-hub-card:hover::after {transform:translateX(125%);}
.ft-hub-card:focus-visible {outline:2px solid var(--ft-main);outline-offset:4px;}
/* Keep the four tournament titles intact: logo and title each get their own row. */
.ft-hub-brand {position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:start;gap:10px;min-width:0;min-height:146px;padding:20px 14px 8px;text-align:center;}
.ft-hub-brand img {display:block;width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 5px 12px #0007);flex:none;}
.ft-hub-brand h2 {margin:0;color:var(--chalk);font-size:clamp(18px,1.55vw,23px);font-weight:800;line-height:1.2;letter-spacing:-.035em;white-space:normal;word-break:normal;overflow-wrap:normal;text-wrap:balance;}
.ft-hub-trophy {z-index:1;flex:1;display:grid;place-items:center;min-height:240px;padding:5px 16px 0;}
.ft-hub-trophy img {display:block;max-width:100%;width:auto;height:248px;object-fit:contain;filter:drop-shadow(0 14px 23px #0009);transition:transform .35s ease,filter .35s ease;}
.ft-hub-card:hover .ft-hub-trophy img {transform:translateY(-6px) scale(1.05);filter:drop-shadow(0 19px 28px #000a);}
.ft-hub-footer {z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px; margin:8px 14px 14px; padding:12px 14px; background:rgba(4,14,30,.60); border:1px solid rgba(156,185,237,.20); border-radius:15px;}
.ft-hub-footer>div {display:grid;gap:4px;min-width:0;}
.ft-hub-footer span {font-size:14px;font-weight:750;color:var(--chalk);}
.ft-hub-footer small {color:var(--mist);font-size:12px;overflow-wrap:anywhere;}
.ft-hub-footer i {color:var(--ft-main);font:normal 24px var(--body);flex:none;}
.ft-detail-hero {display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,31%);border-radius:26px;padding:clamp(18px,3.1vw,42px);gap:20px;min-height:410px;}
.ft-detail-copy {position:relative;z-index:2;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.ft-detail-brand {display:flex;gap:16px;align-items:center;min-width:0;}
.ft-detail-brand img {width:clamp(72px,9vw,114px);height:clamp(72px,9vw,114px);object-fit:contain;filter:drop-shadow(0 7px 15px #0008);flex:none;}
.ft-detail-brand h1 {font-size:clamp(27px,4vw,49px);line-height:1.08;margin:6px 0 0;overflow-wrap:anywhere;}
.ft-detail-description {color:#b8c9de;margin:18px 0 20px;max-width:570px;font-size:15px;line-height:1.6;}
.ft-honours {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:800px;}
.ft-honour {min-width:0;display:flex;flex-direction:column;gap:8px;justify-content:center;border-radius:17px;padding:14px 16px;border:1px solid rgba(185,199,230,.20);background:rgba(11,24,46,.62);box-shadow:inset 0 1px 0 #ffffff12;}
.ft-honour>small {font-size:10px;letter-spacing:.10em;line-height:1.4;color:#b9c7dd;font-weight:750;}
.ft-honour>span {color:var(--mist);font-size:11px;}
.ft-honour .ft-player {width:fit-content;}
.ft-record {display:flex;align-items:center;gap:12px;min-width:0;}
.ft-record>strong {font-family:var(--display);font-size:38px;line-height:1;color:var(--ft-soft);}
.ft-record>div {display:flex;flex-wrap:wrap;gap:5px;min-width:0;}
.ft-record .ft-honour-name {font-size:13px;}
.ft-detail-numbers {display:flex;gap:10px;max-width:680px;margin-top:12px;}
.ft-detail-numbers>div {flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;border:1px solid rgba(185,199,230,.12);border-radius:14px;background:#07152855;padding:10px 12px;}
.ft-detail-numbers b {font-family:var(--display);font-size:clamp(24px,2.9vw,31px);color:var(--chalk);}
.ft-detail-numbers span {font-size:11px;color:var(--mist);}
.ft-detail-cup {position:relative;isolation:isolate;display:grid;place-items:center;min-width:0;min-height:310px;}
.ft-cup-halo {position:absolute;width:75%;height:75%;top:12%;background:radial-gradient(ellipse,var(--ft-glow),transparent 68%);filter:blur(26px);pointer-events:none;}
.ft-detail-cup img {position:relative;display:block;width:auto;max-width:100%;max-height:420px;object-fit:contain;filter:drop-shadow(0 25px 24px rgba(0,0,0,.7));}
.ft-player {display:inline-flex;align-items:center;gap:9px;min-width:0;text-decoration:none;color:var(--chalk);font-size:14px;line-height:1.3;}
.ft-player b {font-weight:700;overflow-wrap:anywhere;}
.ft-player:hover b {color:var(--gold);}
.ft-player .av {flex:none;}
.ft-section-heading {display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.ft-section-heading h2 {margin:0;}
.ft-section-heading>span {font-size:13px;color:var(--mist);}
.ft-final-list {display:grid;gap:11px;}
.ft-final-card {display:grid;grid-template-columns:82px minmax(0,1fr) 32px;align-items:center;gap:16px;border:1px solid var(--line);background:linear-gradient(100deg,var(--stand),#0d1a2e);border-radius:17px;padding:13px 16px;scroll-margin-top:32px;transition:border-color .2s ease, background .2s ease;}
.ft-final-card:target,.ft-final-card:hover {border-color:#5279a8;background:linear-gradient(100deg,#192d4d,#0e1d33);}
.ft-final-index {display:grid;gap:2px;place-items:center;border-right:1px solid var(--line);padding-right:16px;}
.ft-final-index>span {font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--mist);}
.ft-final-index strong {font:800 34px/1 var(--display);color:var(--gold);}
.ft-final-index small {font-size:11px;color:var(--mist);}
.ft-final-center {min-width:0;display:grid;gap:7px;}
.ft-final-pair {display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);align-items:center;gap:10px;}
.ft-final-pair .ft-player:last-child {justify-self:end;}
.ft-final-score {justify-self:center;color:var(--chalk);background:#0a1426;border:1px solid #3a5275;border-radius:12px;font:800 20px/1.1 var(--display);padding:9px 12px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.ft-final-caption {display:flex;gap:5px;align-items:center;color:var(--mist);font-size:12px;line-height:1.4;}
.ft-final-caption .ico {width:15px;height:15px;color:var(--gold);}
.ft-final-caption b {color:var(--chalk);}
.ft-final-checked {width:26px;height:26px;display:grid;place-items:center;color:var(--gold);justify-self:end;}
.ft-final-checked svg {width:20px;height:20px;}
.ft-top-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
.ft-top-row {display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;border:1px solid var(--line);background:var(--stand);padding:13px 14px;border-radius:14px;}
.ft-top-place {font-family:var(--display);font-size:17px;color:var(--mist);}
.ft-top-row:first-child {border-color:#f2c14e70;background:linear-gradient(120deg,#f2c14e14,var(--stand));}
.ft-top-row>strong {font-size:12px;color:var(--gold);white-space:nowrap;}
.ft-footnote {font-size:12px;color:var(--mist);margin-top:10px;line-height:1.55;}
@media(max-width:1260px){
 .ft-hub-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:1100px){
 .ft-hub-brand h2 {font-size:clamp(19px,2.4vw,24px);}
}
@media(max-width:780px){
 .ft-detail-hero {grid-template-columns:minmax(0,1fr) 200px;gap:10px;}
 .ft-detail-cup {min-height:210px;}
 .ft-detail-cup img {max-height:300px;}
 .ft-detail-brand img {width:74px;height:74px;}
 .ft-detail-brand h1 {font-size:clamp(24px,3.5vw,32px);}
}
@media(max-width:600px){
 .ft-intro {padding:20px 17px;border-radius:20px;}
 .ft-intro h1 {font-size:clamp(27px,7vw,35px);}
 .ft-independence {align-items:flex-start;font-size:12px;}
 .ft-hub-grid {grid-template-columns:minmax(0,1fr);gap:13px;}
 .ft-hub-card {min-height:270px;border-radius:19px;}
 .ft-hub-brand {flex-direction:row;justify-content:flex-start;gap:14px;min-height:80px;padding:14px 16px 0;text-align:left;}
 .ft-hub-brand img {width:66px;height:66px;}
 .ft-hub-brand h2 {font-size:clamp(19px,5.4vw,26px);line-height:1.18;}
 .ft-hub-trophy {min-height:144px;padding:0 10px;}
 .ft-hub-trophy img {height:148px;}
 .ft-hub-footer {margin:3px 12px 12px;}
 .ft-detail-hero {display:flex;flex-direction:column;gap:8px;padding:18px 14px 16px;border-radius:21px;}
 .ft-detail-brand {gap:8px;}
 .ft-detail-brand img {width:64px;height:64px;}
 .ft-detail-brand h1 {font-size:clamp(24px,6vw,32px);}
 .ft-detail-description {font-size:13px;margin:12px 0;}
 .ft-detail-cup {order:-1;min-height:180px;height:190px;}
 .ft-detail-cup img {max-height:192px;}
 .ft-honours {gap:8px;}
 .ft-honour {padding:11px 9px;border-radius:12px;}
 .ft-honour>small {font-size:9px;}
 .ft-honour .ft-player {gap:5px;font-size:11px;}
 .ft-honour .av {width:24px !important;height:24px !important;font-size:10px !important;}
 .ft-record {gap:5px;}
 .ft-record>strong {font-size:29px;}
 .ft-record .ft-honour-name {font-size:11px;}
 .ft-detail-numbers {gap:7px;}
 .ft-detail-numbers>div {padding:9px 7px;}
 .ft-detail-numbers b {font-size:24px;}
 .ft-final-card {grid-template-columns:48px minmax(0,1fr);gap:8px;padding:10px 9px;border-radius:13px;}
 .ft-final-index {padding-right:9px;}
 .ft-final-index strong {font-size:24px;}
 .ft-final-index span,.ft-final-index small {font-size:9px;}
 .ft-final-checked {display:none;}
 .ft-final-pair {grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr);gap:5px;}
 .ft-final-pair .ft-player {flex-direction:column;gap:3px;text-align:center;justify-self:center;font-size:11px;}
 .ft-final-pair .ft-player .av {width:28px !important;height:28px !important;font-size:12px !important;}
 .ft-final-pair .ft-player b {font-size:clamp(10px,2.7vw,12px);}
 .ft-final-score {font-size:clamp(12px,3vw,16px);padding:8px 4px;width:100%;text-align:center;}
 .ft-final-caption {font-size:10px;}
 .ft-top-list {grid-template-columns:minmax(0,1fr);}
}
@media(prefers-reduced-motion:reduce){.ft-hub-card,.ft-hub-card::after,.ft-hub-trophy img,.ft-final-card {transition:none;}.ft-hub-card:hover {transform:none;}.ft-hub-card:hover .ft-hub-trophy img {transform:none;}}

@media(max-width:360px) {
 .ft-hub-brand {gap:10px;padding-left:12px;padding-right:12px;}
 .ft-hub-brand img {width:58px;height:58px;}
 .ft-hub-brand h2 {font-size:20px;}
}

/* ================================================
   PLAYER: achievement origins, recent games, photo zoom
   Only collectible awards opened from player profiles gain an evidence link.
   ================================================ */
.ach-origin { margin:18px 0 2px; padding:13px; border:1px solid #537095; background:linear-gradient(135deg,#1b304a,#102037); border-radius:15px; }
.ach-origin-kicker {display:block; color:#91c8f5; font-size:10px; font-weight:750; letter-spacing:.11em; margin-bottom:10px;}
.ach-origin-link { display:flex; gap:10px; align-items:center; padding:11px 13px; border-radius:11px; border:1px solid rgba(134,182,232,.24); background:linear-gradient(110deg,rgba(110,181,247,.16),rgba(255,255,255,.035)); text-decoration:none; color:var(--chalk); transition:background .2s ease,transform .2s ease,border-color .2s ease; }
.ach-origin-link:hover { transform:translateY(-2px); border-color:#8cc2f2; background:linear-gradient(110deg,rgba(110,181,247,.29),rgba(255,255,255,.06)); }
.ach-origin-link:focus-visible {outline:2px solid var(--gold);outline-offset:3px;}
.ach-origin-link > .ico { width:21px;height:21px;color:#9ad5ff; flex:none; }
.ach-origin-link > .ico:last-child { width:16px;height:16px; margin-left:auto; }
.ach-origin-link > span {min-width:0; flex:1; display:grid;gap:3px;}
.ach-origin-link b {font-size:14px; font-weight:700;}
.ach-origin-link small {font-size:12px; color:#c1d6ed; overflow-wrap:anywhere; line-height:1.35;}
.ach-origin p {margin:9px 3px 0; font-size:12px; line-height:1.5; color:var(--mist);}

.profile-recent { border:1px solid #314968; border-radius:24px; background:radial-gradient(ellipse at 90% 0%,rgba(92,159,233,.11),transparent 52%),linear-gradient(140deg,#14243b,#0d1b2e); padding:22px; }
.profile-recent-head {display:flex;align-items:end;justify-content:space-between;gap:16px; flex-wrap:wrap;margin-bottom:15px;}
.profile-recent-head h2 {margin:4px 0 0;}
.profile-recent-eyebrow {color:#85bdeb; font-size:10px; font-weight:750; letter-spacing:.14em;}
.profile-recent-all {display:inline-flex;align-items:center;justify-content:center;gap:10px; border:1px solid #6aa4e064; border-radius:999px;padding:10px 17px;min-height:42px;background:#162d48;color:var(--chalk);font-size:13px;font-weight:650;text-decoration:none;white-space:nowrap;transition:transform .2s ease,background .2s ease,border-color .2s ease;}
.profile-recent-all:hover {background:#214268; border-color:#78beff;transform:translateY(-2px);}
.profile-recent-all:focus-visible {outline:2px solid var(--gold);outline-offset:3px;}
.profile-recent-all .ico {width:15px;height:15px;transform:rotate(-90deg);}
.profile-recent-list {display:grid;gap:9px;}
.profile-recent-match {min-width:0;display:grid;grid-template-columns:132px minmax(0,1fr) 108px;align-items:center;gap:14px;padding:11px 13px;border:1px solid #314760;border-radius:14px;background:rgba(10,23,41,.64);color:var(--chalk);text-decoration:none;transition:border-color .2s ease,background .2s ease,transform .2s ease;}
.profile-recent-match:hover {border-color:#6391c0;background:#1c314b;transform:translateY(-2px);}
.profile-recent-match:focus-visible {outline:2px solid var(--gold);outline-offset:2px;}
.profile-recent-date {min-width:0;display:grid;gap:3px;font-size:12px;color:var(--mist);}
.profile-recent-date b {color:#d7e7fa;font-weight:700;font-variant-numeric:tabular-nums;}
.profile-recent-date small {color:var(--mist);font-size:11px;overflow-wrap:anywhere;}
.profile-recent-teams {min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:13px;}
.profile-recent-teams>span {display:flex;min-width:0;gap:8px;align-items:center;}
.profile-recent-teams>span:last-child {justify-content:end;}
.profile-recent-teams>span b {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:13px;}
.profile-recent-teams .av {flex:none;}
.profile-recent-teams>strong {font:800 20px/1.1 var(--display);white-space:nowrap;font-variant-numeric:tabular-nums;}
.profile-recent-state {justify-self:end;border:1px solid #41506b;background:#1b3045;border-radius:999px;padding:7px 11px;white-space:nowrap;color:var(--mist);font-size:12px;font-weight:600;}
.profile-recent-state.victory {color:#64e3aa;border-color:#3e9276;}
.profile-recent-state.defeat {color:#ff918f;border-color:#97595f;}
.profile-recent-state.draw {color:#c8d5e8;border-color:#657188;}
.profile-recent-state.technical {color:#dfb576;border-color:#816a46;}

.photo-view[open]::backdrop { animation:photo-backdrop-show .3s ease-out both; }
@keyframes photo-backdrop-show { from {background:rgba(3,8,16,0);}to{background:rgba(3,8,16,.9);} }
.photo-view > img {will-change:transform; transform-origin:center center;}
@media(max-width:800px) {
  .profile-recent-match {grid-template-columns:110px minmax(0,1fr) 92px;gap:9px;padding:10px;}
  .profile-recent-teams {gap:7px;}
  .profile-recent-teams>span {gap:5px;}
  .profile-recent-teams>span b {font-size:12px;}
  .profile-recent-teams .av {width:24px!important;height:24px!important;font-size:11px!important;}
  .profile-recent-state {font-size:11px;padding:6px 8px;}
}
@media(max-width:600px) {
  .profile-recent {padding:15px 10px;border-radius:19px;}
  .profile-recent-head {align-items:center;gap:10px;padding:2px 4px;}
  .profile-recent-head h2 {font-size:clamp(18px,4.5vw,23px);}
  .profile-recent-all {min-height:40px;padding:8px 12px;font-size:12px;}
  .profile-recent-match {grid-template-columns:minmax(0,1fr) auto;gap:8px 10px; padding:11px 9px;border-radius:12px;}
  .profile-recent-date {grid-column:1;grid-row:1;display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
  .profile-recent-date small {font-size:10px;}
  .profile-recent-state {grid-column:2;grid-row:1;align-self:center;}
  .profile-recent-teams {grid-column:1/-1;grid-row:2;gap:5px;}
  .profile-recent-teams>span {gap:5px;}
  .profile-recent-teams>span b {font-size:clamp(10px,2.8vw,13px);}
  .profile-recent-teams>strong {font-size:clamp(15px,4vw,19px);}
  .ach-origin {padding:11px;}
  .ach-origin-link {padding:10px;}
}
@media(prefers-reduced-motion:reduce) {
  .ach-origin-link,.profile-recent-all,.profile-recent-match {transition:none;}
  .ach-origin-link:hover,.profile-recent-all:hover,.profile-recent-match:hover {transform:none;}
  .photo-view[open]::backdrop {animation:none;}
  .photo-view>img {will-change:auto;}
}

/* === MOMENTS OF FFB: collectible graffiti gallery === */
.moment-nav-short {display:none;}
.moments-intro {position:relative;isolation:isolate;display:flex;justify-content:space-between;align-items:center;gap:28px;overflow:hidden;border:1px solid #344666;border-radius:26px;padding:clamp(24px,4vw,46px);background:radial-gradient(ellipse at 88% 18%,rgba(242,193,78,.16),transparent 47%),linear-gradient(125deg,#182a44,#0e1a2e 80%);}
.moments-intro::before {content:"";position:absolute;right:-72px;top:-140px;width:360px;height:360px;border-radius:50%;border:1px solid rgba(242,193,78,.14);box-shadow:0 0 0 62px rgba(242,193,78,.025),0 0 0 134px rgba(242,193,78,.018);pointer-events:none;z-index:-1;}
.moments-eyebrow {font-weight:750;letter-spacing:.16em;color:#f2c14e;font-size:11px;}
.moments-intro h1 {margin:13px 0 15px;font-size:clamp(33px,5.6vw,58px);}
.moments-intro p {max-width:670px;margin:0;color:#b9c9dd;line-height:1.6;font-size:clamp(15px,1.7vw,18px);}
.moments-instruction {display:inline-block;margin-top:21px;color:#eac775;font-size:13px;}
.moments-hero-count {flex:none;display:flex;flex-direction:column;align-items:center;color:#f2c14e;font:800 clamp(42px,6vw,75px)/1 var(--display);letter-spacing:-.055em;opacity:.9;}
.moments-hero-count span {color:#b9c7d9;font:600 12px/1.6 var(--body);letter-spacing:.1em;text-transform:uppercase;margin-top:8px;}
.moments-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 28px;margin-top:25px;align-items:start;}
.moment-card {--moment-accent:#f2c14e;--moment-glow:rgba(242,193,78,.28);appearance:none;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;text-align:center;font:inherit;color:var(--chalk);cursor:pointer;position:relative;background:none;border:0;padding:0;overflow:visible;transition:transform .28s ease,filter .28s ease;}
.moment-yellow {--moment-accent:#ffd24e;--moment-glow:rgba(243,183,43,.25);}
.moment-mint {--moment-accent:#75ffd1;--moment-glow:rgba(51,210,159,.24);}
.moment-amber {--moment-accent:#ffc552;--moment-glow:rgba(239,177,43,.24);}
.moment-fire {--moment-accent:#ff7d4e;--moment-glow:rgba(236,75,45,.24);}
.moment-blue {--moment-accent:#5ec8ff;--moment-glow:rgba(94,200,255,.24);}
.moment-picture {display:grid;place-items:center;min-width:0;width:100%;height:clamp(300px,34vw,430px);position:relative;overflow:visible;filter:drop-shadow(0 12px 18px rgba(0,0,0,.33));}
.moment-picture::before {content:"";position:absolute;inset:15% 14% 12%;background:radial-gradient(circle,var(--moment-glow),transparent 68%);filter:blur(28px);opacity:.7;transform:scale(.92);transition:opacity .3s ease,transform .3s ease;pointer-events:none;}
.moment-picture::after {content:"";position:absolute;top:-7%;left:-18%;width:34%;height:118%;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.12) 38%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.14) 62%,transparent 100%);transform:translateX(-185%) skewX(-16deg);mix-blend-mode:screen;filter:blur(.2px);opacity:.95;pointer-events:none;animation:momentShimmer 7.4s ease-in-out infinite;}
.moment-picture img {z-index:1;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(0,0,0,.42));transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .38s ease,brightness .38s ease;}
.moment-foot {display:flex;flex-direction:column;align-items:center;gap:6px;min-height:0;padding:0 10px 4px;}
.moment-kicker {font-size:11px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:#9fb3ce;font-weight:700;}
.moment-title {font:700 clamp(18px,2vw,24px)/1.22 var(--display);text-wrap:balance;overflow-wrap:anywhere;}
.moment-card:hover {transform:translateY(-8px) scale(1.01);filter:brightness(1.02);}
.moment-card:hover .moment-picture::before {opacity:1;transform:scale(1.02);}
.moment-card:hover .moment-picture::after {animation-duration:3.2s;}
.moment-card:hover .moment-picture img {transform:scale(1.055);filter:drop-shadow(0 0 24px var(--moment-glow)) drop-shadow(0 22px 26px rgba(0,0,0,.45));}
.moment-card:focus-visible {outline:2px solid var(--moment-accent);outline-offset:5px;border-radius:18px;}
.moment-dialog {position:fixed;inset:0;margin:auto;width:min(1100px,calc(100vw - 30px));max-width:none;max-height:min(92vh,850px);max-height:min(92dvh,850px);padding:0;border:1px solid #435a7b;border-radius:25px;color:var(--chalk);background:#0e1b2e;box-shadow:0 38px 95px #000b;overflow:auto;overscroll-behavior:contain;}
.moment-dialog::backdrop {background:rgba(1,5,14,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.moment-dialog[open] {animation:moment-open .3s cubic-bezier(.16,.8,.26,1) both;}
.moment-dialog[open]::backdrop {animation:moment-backdrop .3s ease-out both;}
.moment-dialog-layout {display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.85fr);min-height:min(76vh,690px);}
.moment-dialog-stage {display:grid;place-items:center;min-width:0;min-height:350px;padding:32px 8px;background:radial-gradient(ellipse at center,#213651 0%,#111e31 64%,#0b1729 100%);}
.moment-dialog-art {display:block;width:100%;height:auto;max-height:min(76vh,700px);object-fit:contain;filter:drop-shadow(0 15px 20px #0009);}
.moment-dialog-copy {display:flex;flex-direction:column;justify-content:center;min-width:0;padding:74px 34px 42px 24px;background:linear-gradient(150deg,rgba(255,255,255,.03),transparent 70%);}
.moment-dialog-kicker {font-size:11px;letter-spacing:.14em;color:#eec873;font-weight:800;text-transform:uppercase;}
.moment-dialog-copy h2 {display:block;margin:13px 0 16px;font-size:clamp(24px,3vw,37px);line-height:1.18;}
.moment-dialog-meta {display:none;}
.moment-dialog-story {color:#dee6f1;font-size:clamp(15px,1.45vw,17px);line-height:1.75;margin:0;}
.moment-dialog-close {position:sticky;float:right;top:12px;margin:12px 12px -60px 0;z-index:4;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:#13243de8;color:white;font:normal 28px/1 var(--body);cursor:pointer;transition:background .2s ease,transform .2s ease;}
.moment-dialog-close:hover {background:#29405f;transform:rotate(90deg);}
html:has(.moment-dialog[open]) {overflow:hidden;}
@keyframes moment-open {from {opacity:0;transform:translateY(16px) scale(.975);}to{opacity:1;transform:none;}}
@keyframes moment-backdrop {from {opacity:0;}to{opacity:1;}}
@keyframes momentShimmer {0%,16% {transform:translateX(-200%) skewX(-16deg);opacity:0;} 22% {opacity:.95;} 40% {transform:translateX(315%) skewX(-16deg);opacity:0;} 100% {transform:translateX(315%) skewX(-16deg);opacity:0;}}
@media(max-width:650px) {
  .moment-nav-long {display:none;}.moment-nav-short {display:inline;}
  .moments-intro {padding:22px 19px;border-radius:20px;}
  .moments-intro h1 {font-size:clamp(28px,8vw,42px);}
  .moments-intro p {font-size:14px;}
  .moments-hero-count {display:none;}
  .moments-grid {grid-template-columns:minmax(0,1fr);gap:20px;margin-top:18px;}
  .moment-picture {height:clamp(270px,82vw,380px);}
  .moment-foot {padding:0 4px 6px;}
  .moment-kicker {font-size:10px;}
  .moment-title {font-size:clamp(18px,5.2vw,24px);}
  .moment-dialog {width:calc(100vw - 14px);max-height:calc(100dvh - 16px);border-radius:18px;}
  .moment-dialog-layout {display:flex;flex-direction:column;min-height:0;}
  .moment-dialog-stage {min-height:0;padding:22px 10px 4px;}
  .moment-dialog-art {max-height:47vh;max-height:47dvh;}
  .moment-dialog-copy {padding:16px 22px 26px;}
  .moment-dialog-copy h2 {font-size:clamp(22px,6vw,29px);margin-bottom:10px;}
  .moment-dialog-story {font-size:14px;line-height:1.62;}
  .moment-dialog-close {top:8px;margin:8px 8px -52px 0;}
}
@media(prefers-reduced-motion:reduce) {
  .moment-card,.moment-picture img,.moment-picture::before,.moment-dialog-close {transition:none;}
  .moment-picture::after {animation:none;opacity:0;}
  .moment-card:hover {transform:none;}
  .moment-card:hover .moment-picture img {transform:none;}
  .moment-dialog[open],.moment-dialog[open]::backdrop {animation:none;}
}
@media(max-width:480px) {
  .top { align-items:center; }
  .top nav { flex:1; min-width:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0 2px; overflow:visible; }
  .top nav > * { grid-column:span 2; display:flex; justify-content:center; align-items:center; gap:3px; min-height:44px; padding:4px 3px; white-space:nowrap; }
  .top nav > :nth-last-child(-n+2) { grid-column:span 3; }
  .duel-pair { margin-inline:auto; }
  .record-feature { grid-template-columns:minmax(0,1fr) auto; }
  .record-feature strong { display:grid; text-align:right; line-height:1.2; }
  .record-feature em { font-size:11px; }
  .record-list { padding:12px; }
  .record-list .mrow { grid-template-columns:minmax(0,1fr); }
  .record-list .when { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .record-list .when br { display:none; }
  .record-list .m { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
  .record-line { align-items:flex-start; gap:4px 12px; }
}

#achtypes { margin-top:clamp(16px, 3vw, 24px); flex-wrap:wrap; overflow:visible; gap:8px; }
#achtypes + .sec { margin-top:clamp(24px, 4vw, 36px); }
@media (max-width:480px) {
  #achtypes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  #achtypes .chip { min-height:44px; }
}

/* Коллекционные награды: независимая палитра от уровневых и шуточных. */
.badge.collectible .rr { font-weight:600; color:var(--rarity); }
.badge.rarity-ordinary { --rarity:#8DAAC1; }
.badge.rarity-rare { --rarity:#3861FF; }
.badge.rarity-superrare { --rarity:#B9F23A; }
.badge.rarity-unique { --rarity:#FF38BE; }
.badge.collectible.locked svg { filter:drop-shadow(0 5px 9px #0007); opacity:.78; }
.badge.collectible.locked .nm { color:var(--chalk); }
.badge.collectible.locked .rr { color:var(--rarity); opacity:.87; }
.ach-hex-superrare, .badge .ach-hex-superrare { filter:drop-shadow(0 0 6px #B9F23A66) drop-shadow(0 6px 9px #0006); }
.ach-hex-unique, .badge .ach-hex-unique { filter:drop-shadow(0 0 7px #FF38BE88) drop-shadow(0 6px 9px #0006); }
.badge.collectible .earned-when { font-size:11px; color:var(--mist); line-height:1.2; margin-top:-3px; }
.ach-rarity-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 15px; margin:15px 0 0; color:var(--mist); font-size:12px; }
.rarity-legend-item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.rarity-legend-item i { display:inline-block; width:10px; height:10px; border-radius:3px; border:1px solid currentColor; background:currentColor; box-shadow:0 0 8px currentColor; }
.rarity-legend-item b { color:var(--chalk); font-weight:600; }
.rarity-ordinary { color:#8DAAC1; }
.rarity-rare { color:#3861FF; }
.rarity-superrare { color:#B9F23A; }
.rarity-unique { color:#FF38BE; }
.ach-rarity-line { margin:14px 0 0; font-size:14px; color:var(--mist); }
.ach-historical-note { font-size:13px; color:var(--mist); line-height:1.5; margin:10px 0 0; }
@media (max-width:600px) {
  .badge.collectible .rr { font-size:11px; line-height:1.3; }
  .ach-rarity-legend { gap:9px 12px; }
}

/* SVG-анимации существуют только у редких, эпических и уникальных
   коллекционных значков. Обычные, уровневые и шуточные не затронуты. */
.ach-glint { opacity:0; }
.ach-spark { opacity:0; transform-box:fill-box; transform-origin:center; }
.ach-epic-aura { opacity:.14; }
.ach-holo-rim { opacity:.7; }

@media (prefers-reduced-motion: no-preference) {
  .ach-glint-rare { animation:ach-light-rare 5.6s ease-in-out infinite; }
  .ach-glint-superrare { animation:ach-light-epic 4.4s ease-in-out infinite; }
  .ach-glint-unique { animation:ach-light-holo 7s ease-in-out infinite; }
  .ach-epic-aura { animation:ach-epic-pulse 4.4s ease-in-out infinite; }
  .ach-spark-1 { animation:ach-twinkle 4.4s ease-out infinite; }
  .ach-spark-2 { animation:ach-twinkle 4.4s ease-out 1.65s infinite; }
  .ach-holo-spark-1 { animation:ach-twinkle 6.4s ease-out .5s infinite; }
  .ach-holo-spark-2 { animation:ach-twinkle 6.4s ease-out 3.4s infinite; }
  .ach-holo-rim { animation:ach-rim-pulse 7s ease-in-out infinite; }

  /* У уникальных цвета плавно меняются, а не резко переключаются. */
  #g-unique stop:nth-child(1) { animation:ach-holo-first 7s ease-in-out infinite; }
  #g-unique stop:nth-child(2) { animation:ach-holo-middle 7s ease-in-out infinite; }
  #g-unique stop:nth-child(3) { animation:ach-holo-last 7s ease-in-out infinite; }

  @keyframes ach-light-rare {
    0%, 17%, 55%, 100% { opacity:0; transform:translateX(-75px); }
    23% { opacity:.5; }
    39% { opacity:.75; transform:translateX(150px); }
    45% { opacity:0; transform:translateX(175px); }
  }
  @keyframes ach-light-epic {
    0%, 8%, 63%, 100% { opacity:0; transform:translateX(-75px); }
    18% { opacity:.42; }
    40% { opacity:.7; transform:translateX(150px); }
    47% { opacity:0; transform:translateX(175px); }
  }
  @keyframes ach-light-holo {
    0%, 12%, 65%, 100% { opacity:0; transform:translateX(-75px); }
    20% { opacity:.35; }
    43% { opacity:.67; transform:translateX(150px); }
    50% { opacity:0; transform:translateX(175px); }
  }
  @keyframes ach-epic-pulse {
    0%, 100% { opacity:.12; }
    50% { opacity:.65; }
  }
  @keyframes ach-twinkle {
    0%, 18%, 36%, 100% { opacity:0; transform:scale(.5); }
    23%, 29% { opacity:1; transform:scale(1.12); }
  }
  @keyframes ach-rim-pulse {
    0%, 100% { opacity:.45; }
    48% { opacity:1; }
  }
  @keyframes ach-holo-first {
    0%, 100% { stop-color:#FF38BE; }
    34% { stop-color:#FFB8ED; }
    67% { stop-color:#66E4FF; }
  }
  @keyframes ach-holo-middle {
    0%, 100% { stop-color:#FBD4FF; }
    34% { stop-color:#66E4FF; }
    67% { stop-color:#FF38BE; }
  }
  @keyframes ach-holo-last {
    0%, 100% { stop-color:#66E4FF; }
    34% { stop-color:#FF38BE; }
    67% { stop-color:#FBD4FF; }
  }
}
/* Статичная палитра при отключении анимации остаётся яркой и читаемой. */
@media (prefers-reduced-motion: reduce) {
  .ach-glint, .ach-spark { animation:none !important; opacity:0 !important; }
  #g-unique stop { animation:none !important; }
  .ach-epic-aura { animation:none !important; opacity:.17; }
  .ach-holo-rim { animation:none !important; opacity:.65; }
}

/* ===========================================================
   FRIENDLIES REWORK — isolated competition archive
   =========================================================== */
.ft-intro { position:relative; margin: 4px 0 24px; padding:28px 30px 26px; border:1px solid #33476a; border-radius:24px; overflow:hidden; background:radial-gradient(ellipse at right top,rgba(75,90,177,.20),transparent 55%),linear-gradient(135deg,#16253c,#101c30 70%); }
.ft-intro::after {content:''; position:absolute; width:260px; height:260px; border:1px solid rgba(176,190,255,.08); border-radius:50%; top:-164px; right:-70px; box-shadow:0 0 0 60px rgba(163,183,255,.02);pointer-events:none;}
.ft-overline {color:#b9c6dd; font-size:11px; letter-spacing:.15em; font-weight:750;}
.ft-intro h1 { margin:8px 0 8px; font-size:clamp(32px,5vw,57px); }
.ft-intro p { margin:0; max-width:740px; color:var(--mist);font-size:clamp(15px,1.65vw,18px);line-height:1.55; }
.ft-independence {display:inline-flex; gap:9px; align-items:center; margin-top:20px; padding:10px 13px; background:#0b1b30a8; color:#b7c8df; border:1px solid #344766; border-radius:12px; font-size:13px; line-height:1.45;}
.ft-independence .ico {width:19px; height:19px; color:#7fd0ff;flex:none;}
.ft-hub-grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
.ft-hub-card,.ft-detail-hero {--ft-main:#64bfff;--ft-glow:rgba(29,123,229,.30);--ft-soft:#80cfff;position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(118,160,233,.31);background:radial-gradient(ellipse at 75% 24%,var(--ft-glow),transparent 61%),linear-gradient(150deg,#152844,#0c172a 76%);}
.ft-hub-card.ft-vozduhano,.ft-detail-hero.ft-vozduhano {--ft-main:#f0c98c;--ft-glow:rgba(195,137,61,.25);--ft-soft:#ffda9a;border-color:rgba(227,179,104,.33);background:radial-gradient(ellipse at 75% 24%,var(--ft-glow),transparent 60%),linear-gradient(150deg,#29231e,#101a29 78%);}
.ft-hub-card.ft-brotherly,.ft-detail-hero.ft-brotherly {--ft-main:#f6c977;--ft-glow:rgba(94,143,255,.24);--ft-soft:#ffe5b5;border-color:rgba(248,206,122,.34);background:radial-gradient(ellipse at 76% 22%,rgba(80,138,255,.22),transparent 56%),radial-gradient(ellipse at 24% 18%,rgba(246,201,119,.18),transparent 48%),linear-gradient(150deg,#1d2135,#0f192c 78%);}
.ft-hub-card.ft-glory,.ft-detail-hero.ft-glory {--ft-main:#c5aaff;--ft-glow:rgba(122,71,229,.32);--ft-soft:#d4c6ff;border-color:rgba(174,137,255,.37);background:radial-gradient(ellipse at 75% 20%,var(--ft-glow),transparent 62%),linear-gradient(150deg,#251c45,#10182f 80%);}
.ft-hub-card {display:flex;flex-direction:column;gap:0;min-width:0;min-height:432px;border-radius:24px;color:var(--chalk);text-decoration:none;box-shadow:0 16px 42px #0004;transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease;}
.ft-hub-card::after {content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 34%,rgba(255,255,255,.07) 46%,transparent 57%);transform:translateX(-125%);pointer-events:none;transition:transform .72s ease;z-index:1;}
.ft-hub-card:hover {transform:translateY(-7px);border-color:var(--ft-main);box-shadow:0 22px 58px #0007,0 0 34px var(--ft-glow);}
.ft-hub-card:hover::after {transform:translateX(125%);}
.ft-hub-card:focus-visible {outline:2px solid var(--ft-main);outline-offset:4px;}
/* Keep the four tournament titles intact: logo and title each get their own row. */
.ft-hub-brand {position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:start;gap:10px;min-width:0;min-height:146px;padding:20px 14px 8px;text-align:center;}
.ft-hub-brand img {display:block;width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 5px 12px #0007);flex:none;}
.ft-hub-brand h2 {margin:0;color:var(--chalk);font-size:clamp(18px,1.55vw,23px);font-weight:800;line-height:1.2;letter-spacing:-.035em;white-space:normal;word-break:normal;overflow-wrap:normal;text-wrap:balance;}
.ft-hub-trophy {z-index:1;flex:1;display:grid;place-items:center;min-height:240px;padding:5px 16px 0;}
.ft-hub-trophy img {display:block;max-width:100%;width:auto;height:248px;object-fit:contain;filter:drop-shadow(0 14px 23px #0009);transition:transform .35s ease,filter .35s ease;}
.ft-hub-card:hover .ft-hub-trophy img {transform:translateY(-6px) scale(1.05);filter:drop-shadow(0 19px 28px #000a);}
.ft-hub-footer {z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px; margin:8px 14px 14px; padding:12px 14px; background:rgba(4,14,30,.60); border:1px solid rgba(156,185,237,.20); border-radius:15px;}
.ft-hub-footer>div {display:grid;gap:4px;min-width:0;}
.ft-hub-footer span {font-size:14px;font-weight:750;color:var(--chalk);}
.ft-hub-footer small {color:var(--mist);font-size:12px;overflow-wrap:anywhere;}
.ft-hub-footer i {color:var(--ft-main);font:normal 24px var(--body);flex:none;}
.ft-detail-hero {display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,31%);border-radius:26px;padding:clamp(18px,3.1vw,42px);gap:20px;min-height:410px;}
.ft-detail-copy {position:relative;z-index:2;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.ft-detail-brand {display:flex;gap:16px;align-items:center;min-width:0;}
.ft-detail-brand img {width:clamp(72px,9vw,114px);height:clamp(72px,9vw,114px);object-fit:contain;filter:drop-shadow(0 7px 15px #0008);flex:none;}
.ft-detail-brand h1 {font-size:clamp(27px,4vw,49px);line-height:1.08;margin:6px 0 0;overflow-wrap:anywhere;}
.ft-detail-description {color:#b8c9de;margin:18px 0 20px;max-width:570px;font-size:15px;line-height:1.6;}
.ft-honours {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:800px;}
.ft-honour {min-width:0;display:flex;flex-direction:column;gap:8px;justify-content:center;border-radius:17px;padding:14px 16px;border:1px solid rgba(185,199,230,.20);background:rgba(11,24,46,.62);box-shadow:inset 0 1px 0 #ffffff12;}
.ft-honour>small {font-size:10px;letter-spacing:.10em;line-height:1.4;color:#b9c7dd;font-weight:750;}
.ft-honour>span {color:var(--mist);font-size:11px;}
.ft-honour .ft-player {width:fit-content;}
.ft-record {display:flex;align-items:center;gap:12px;min-width:0;}
.ft-record>strong {font-family:var(--display);font-size:38px;line-height:1;color:var(--ft-soft);}
.ft-record>div {display:flex;flex-wrap:wrap;gap:5px;min-width:0;}
.ft-record .ft-honour-name {font-size:13px;}
.ft-detail-numbers {display:flex;gap:10px;max-width:680px;margin-top:12px;}
.ft-detail-numbers>div {flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;border:1px solid rgba(185,199,230,.12);border-radius:14px;background:#07152855;padding:10px 12px;}
.ft-detail-numbers b {font-family:var(--display);font-size:clamp(24px,2.9vw,31px);color:var(--chalk);}
.ft-detail-numbers span {font-size:11px;color:var(--mist);}
.ft-detail-cup {position:relative;isolation:isolate;display:grid;place-items:center;min-width:0;min-height:310px;}
.ft-cup-halo {position:absolute;width:75%;height:75%;top:12%;background:radial-gradient(ellipse,var(--ft-glow),transparent 68%);filter:blur(26px);pointer-events:none;}
.ft-detail-cup img {position:relative;display:block;width:auto;max-width:100%;max-height:420px;object-fit:contain;filter:drop-shadow(0 25px 24px rgba(0,0,0,.7));}
.ft-player {display:inline-flex;align-items:center;gap:9px;min-width:0;text-decoration:none;color:var(--chalk);font-size:14px;line-height:1.3;}
.ft-player b {font-weight:700;overflow-wrap:anywhere;}
.ft-player:hover b {color:var(--gold);}
.ft-player .av {flex:none;}
.ft-section-heading {display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.ft-section-heading h2 {margin:0;}
.ft-section-heading>span {font-size:13px;color:var(--mist);}
.ft-final-list {display:grid;gap:11px;}
.ft-final-card {display:grid;grid-template-columns:82px minmax(0,1fr) 32px;align-items:center;gap:16px;border:1px solid var(--line);background:linear-gradient(100deg,var(--stand),#0d1a2e);border-radius:17px;padding:13px 16px;scroll-margin-top:32px;transition:border-color .2s ease, background .2s ease;}
.ft-final-card:target,.ft-final-card:hover {border-color:#5279a8;background:linear-gradient(100deg,#192d4d,#0e1d33);}
.ft-final-index {display:grid;gap:2px;place-items:center;border-right:1px solid var(--line);padding-right:16px;}
.ft-final-index>span {font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--mist);}
.ft-final-index strong {font:800 34px/1 var(--display);color:var(--gold);}
.ft-final-index small {font-size:11px;color:var(--mist);}
.ft-final-center {min-width:0;display:grid;gap:7px;}
.ft-final-pair {display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);align-items:center;gap:10px;}
.ft-final-pair .ft-player:last-child {justify-self:end;}
.ft-final-score {justify-self:center;color:var(--chalk);background:#0a1426;border:1px solid #3a5275;border-radius:12px;font:800 20px/1.1 var(--display);padding:9px 12px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.ft-final-caption {display:flex;gap:5px;align-items:center;color:var(--mist);font-size:12px;line-height:1.4;}
.ft-final-caption .ico {width:15px;height:15px;color:var(--gold);}
.ft-final-caption b {color:var(--chalk);}
.ft-final-checked {width:26px;height:26px;display:grid;place-items:center;color:var(--gold);justify-self:end;}
.ft-final-checked svg {width:20px;height:20px;}
.ft-top-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
.ft-top-row {display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;border:1px solid var(--line);background:var(--stand);padding:13px 14px;border-radius:14px;}
.ft-top-place {font-family:var(--display);font-size:17px;color:var(--mist);}
.ft-top-row:first-child {border-color:#f2c14e70;background:linear-gradient(120deg,#f2c14e14,var(--stand));}
.ft-top-row>strong {font-size:12px;color:var(--gold);white-space:nowrap;}
.ft-footnote {font-size:12px;color:var(--mist);margin-top:10px;line-height:1.55;}
@media(max-width:1260px){
 .ft-hub-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:1100px){
 .ft-hub-brand h2 {font-size:clamp(19px,2.4vw,24px);}
}
@media(max-width:780px){
 .ft-detail-hero {grid-template-columns:minmax(0,1fr) 200px;gap:10px;}
 .ft-detail-cup {min-height:210px;}
 .ft-detail-cup img {max-height:300px;}
 .ft-detail-brand img {width:74px;height:74px;}
 .ft-detail-brand h1 {font-size:clamp(24px,3.5vw,32px);}
}
@media(max-width:600px){
 .ft-intro {padding:20px 17px;border-radius:20px;}
 .ft-intro h1 {font-size:clamp(27px,7vw,35px);}
 .ft-independence {align-items:flex-start;font-size:12px;}
 .ft-hub-grid {grid-template-columns:minmax(0,1fr);gap:13px;}
 .ft-hub-card {min-height:270px;border-radius:19px;}
 .ft-hub-brand {flex-direction:row;justify-content:flex-start;gap:14px;min-height:80px;padding:14px 16px 0;text-align:left;}
 .ft-hub-brand img {width:66px;height:66px;}
 .ft-hub-brand h2 {font-size:clamp(19px,5.4vw,26px);line-height:1.18;}
 .ft-hub-trophy {min-height:144px;padding:0 10px;}
 .ft-hub-trophy img {height:148px;}
 .ft-hub-footer {margin:3px 12px 12px;}
 .ft-detail-hero {display:flex;flex-direction:column;gap:8px;padding:18px 14px 16px;border-radius:21px;}
 .ft-detail-brand {gap:8px;}
 .ft-detail-brand img {width:64px;height:64px;}
 .ft-detail-brand h1 {font-size:clamp(24px,6vw,32px);}
 .ft-detail-description {font-size:13px;margin:12px 0;}
 .ft-detail-cup {order:-1;min-height:180px;height:190px;}
 .ft-detail-cup img {max-height:192px;}
 .ft-honours {gap:8px;}
 .ft-honour {padding:11px 9px;border-radius:12px;}
 .ft-honour>small {font-size:9px;}
 .ft-honour .ft-player {gap:5px;font-size:11px;}
 .ft-honour .av {width:24px !important;height:24px !important;font-size:10px !important;}
 .ft-record {gap:5px;}
 .ft-record>strong {font-size:29px;}
 .ft-record .ft-honour-name {font-size:11px;}
 .ft-detail-numbers {gap:7px;}
 .ft-detail-numbers>div {padding:9px 7px;}
 .ft-detail-numbers b {font-size:24px;}
 .ft-final-card {grid-template-columns:48px minmax(0,1fr);gap:8px;padding:10px 9px;border-radius:13px;}
 .ft-final-index {padding-right:9px;}
 .ft-final-index strong {font-size:24px;}
 .ft-final-index span,.ft-final-index small {font-size:9px;}
 .ft-final-checked {display:none;}
 .ft-final-pair {grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr);gap:5px;}
 .ft-final-pair .ft-player {flex-direction:column;gap:3px;text-align:center;justify-self:center;font-size:11px;}
 .ft-final-pair .ft-player .av {width:28px !important;height:28px !important;font-size:12px !important;}
 .ft-final-pair .ft-player b {font-size:clamp(10px,2.7vw,12px);}
 .ft-final-score {font-size:clamp(12px,3vw,16px);padding:8px 4px;width:100%;text-align:center;}
 .ft-final-caption {font-size:10px;}
 .ft-top-list {grid-template-columns:minmax(0,1fr);}
}
@media(prefers-reduced-motion:reduce){.ft-hub-card,.ft-hub-card::after,.ft-hub-trophy img,.ft-final-card {transition:none;}.ft-hub-card:hover {transform:none;}.ft-hub-card:hover .ft-hub-trophy img {transform:none;}}

@media(max-width:360px) {
 .ft-hub-brand {gap:10px;padding-left:12px;padding-right:12px;}
 .ft-hub-brand img {width:58px;height:58px;}
 .ft-hub-brand h2 {font-size:20px;}
}

/* ================================================
   PLAYER: achievement origins, recent games, photo zoom
   Only collectible awards opened from player profiles gain an evidence link.
   ================================================ */
.ach-origin { margin:18px 0 2px; padding:13px; border:1px solid #537095; background:linear-gradient(135deg,#1b304a,#102037); border-radius:15px; }
.ach-origin-kicker {display:block; color:#91c8f5; font-size:10px; font-weight:750; letter-spacing:.11em; margin-bottom:10px;}
.ach-origin-link { display:flex; gap:10px; align-items:center; padding:11px 13px; border-radius:11px; border:1px solid rgba(134,182,232,.24); background:linear-gradient(110deg,rgba(110,181,247,.16),rgba(255,255,255,.035)); text-decoration:none; color:var(--chalk); transition:background .2s ease,transform .2s ease,border-color .2s ease; }
.ach-origin-link:hover { transform:translateY(-2px); border-color:#8cc2f2; background:linear-gradient(110deg,rgba(110,181,247,.29),rgba(255,255,255,.06)); }
.ach-origin-link:focus-visible {outline:2px solid var(--gold);outline-offset:3px;}
.ach-origin-link > .ico { width:21px;height:21px;color:#9ad5ff; flex:none; }
.ach-origin-link > .ico:last-child { width:16px;height:16px; margin-left:auto; }
.ach-origin-link > span {min-width:0; flex:1; display:grid;gap:3px;}
.ach-origin-link b {font-size:14px; font-weight:700;}
.ach-origin-link small {font-size:12px; color:#c1d6ed; overflow-wrap:anywhere; line-height:1.35;}
.ach-origin p {margin:9px 3px 0; font-size:12px; line-height:1.5; color:var(--mist);}

.profile-recent { border:1px solid #314968; border-radius:24px; background:radial-gradient(ellipse at 90% 0%,rgba(92,159,233,.11),transparent 52%),linear-gradient(140deg,#14243b,#0d1b2e); padding:22px; }
.profile-recent-head {display:flex;align-items:end;justify-content:space-between;gap:16px; flex-wrap:wrap;margin-bottom:15px;}
.profile-recent-head h2 {margin:4px 0 0;}
.profile-recent-eyebrow {color:#85bdeb; font-size:10px; font-weight:750; letter-spacing:.14em;}
.profile-recent-all {display:inline-flex;align-items:center;justify-content:center;gap:10px; border:1px solid #6aa4e064; border-radius:999px;padding:10px 17px;min-height:42px;background:#162d48;color:var(--chalk);font-size:13px;font-weight:650;text-decoration:none;white-space:nowrap;transition:transform .2s ease,background .2s ease,border-color .2s ease;}
.profile-recent-all:hover {background:#214268; border-color:#78beff;transform:translateY(-2px);}
.profile-recent-all:focus-visible {outline:2px solid var(--gold);outline-offset:3px;}
.profile-recent-all .ico {width:15px;height:15px;transform:rotate(-90deg);}
.profile-recent-list {display:grid;gap:9px;}
.profile-recent-match {min-width:0;display:grid;grid-template-columns:132px minmax(0,1fr) 108px;align-items:center;gap:14px;padding:11px 13px;border:1px solid #314760;border-radius:14px;background:rgba(10,23,41,.64);color:var(--chalk);text-decoration:none;transition:border-color .2s ease,background .2s ease,transform .2s ease;}
.profile-recent-match:hover {border-color:#6391c0;background:#1c314b;transform:translateY(-2px);}
.profile-recent-match:focus-visible {outline:2px solid var(--gold);outline-offset:2px;}
.profile-recent-date {min-width:0;display:grid;gap:3px;font-size:12px;color:var(--mist);}
.profile-recent-date b {color:#d7e7fa;font-weight:700;font-variant-numeric:tabular-nums;}
.profile-recent-date small {color:var(--mist);font-size:11px;overflow-wrap:anywhere;}
.profile-recent-teams {min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:13px;}
.profile-recent-teams>span {display:flex;min-width:0;gap:8px;align-items:center;}
.profile-recent-teams>span:last-child {justify-content:end;}
.profile-recent-teams>span b {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:13px;}
.profile-recent-teams .av {flex:none;}
.profile-recent-teams>strong {font:800 20px/1.1 var(--display);white-space:nowrap;font-variant-numeric:tabular-nums;}
.profile-recent-state {justify-self:end;border:1px solid #41506b;background:#1b3045;border-radius:999px;padding:7px 11px;white-space:nowrap;color:var(--mist);font-size:12px;font-weight:600;}
.profile-recent-state.victory {color:#64e3aa;border-color:#3e9276;}
.profile-recent-state.defeat {color:#ff918f;border-color:#97595f;}
.profile-recent-state.draw {color:#c8d5e8;border-color:#657188;}
.profile-recent-state.technical {color:#dfb576;border-color:#816a46;}

.photo-view[open]::backdrop { animation:photo-backdrop-show .3s ease-out both; }
@keyframes photo-backdrop-show { from {background:rgba(3,8,16,0);}to{background:rgba(3,8,16,.9);} }
.photo-view > img {will-change:transform; transform-origin:center center;}
@media(max-width:800px) {
  .profile-recent-match {grid-template-columns:110px minmax(0,1fr) 92px;gap:9px;padding:10px;}
  .profile-recent-teams {gap:7px;}
  .profile-recent-teams>span {gap:5px;}
  .profile-recent-teams>span b {font-size:12px;}
  .profile-recent-teams .av {width:24px!important;height:24px!important;font-size:11px!important;}
  .profile-recent-state {font-size:11px;padding:6px 8px;}
}
@media(max-width:600px) {
  .profile-recent {padding:15px 10px;border-radius:19px;}
  .profile-recent-head {align-items:center;gap:10px;padding:2px 4px;}
  .profile-recent-head h2 {font-size:clamp(18px,4.5vw,23px);}
  .profile-recent-all {min-height:40px;padding:8px 12px;font-size:12px;}
  .profile-recent-match {grid-template-columns:minmax(0,1fr) auto;gap:8px 10px; padding:11px 9px;border-radius:12px;}
  .profile-recent-date {grid-column:1;grid-row:1;display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
  .profile-recent-date small {font-size:10px;}
  .profile-recent-state {grid-column:2;grid-row:1;align-self:center;}
  .profile-recent-teams {grid-column:1/-1;grid-row:2;gap:5px;}
  .profile-recent-teams>span {gap:5px;}
  .profile-recent-teams>span b {font-size:clamp(10px,2.8vw,13px);}
  .profile-recent-teams>strong {font-size:clamp(15px,4vw,19px);}
  .ach-origin {padding:11px;}
  .ach-origin-link {padding:10px;}
}
@media(prefers-reduced-motion:reduce) {
  .ach-origin-link,.profile-recent-all,.profile-recent-match {transition:none;}
  .ach-origin-link:hover,.profile-recent-all:hover,.profile-recent-match:hover {transform:none;}
  .photo-view[open]::backdrop {animation:none;}
  .photo-view>img {will-change:auto;}
}

@media(max-width:480px) {
  .top nav {grid-template-columns:repeat(3,minmax(0,1fr));}
  .top nav > *, .top nav > :nth-last-child(-n+2) {grid-column:auto;}
}
@media(prefers-reduced-motion:reduce) {
  .moment-card,.moment-picture img,.moment-open-icon,.moment-dialog-close {transition:none;}
  .moment-card:hover {transform:none;}
  .moment-card:hover .moment-picture img {transform:none;}
  .moment-dialog[open],.moment-dialog[open]::backdrop {animation:none;}
}


/* Моменты ФФБ: граффити без карточек, блик только внутри альфа-силуэта. */
.moments-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(15px,2.3vw,32px);
  row-gap:clamp(28px,3.6vw,48px);
  align-items:start;
}
.moment-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
  gap:10px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  isolation:isolate;
  text-align:center;
}
.moment-card::after,
.moment-picture::before { content:none; display:none; }
.moment-picture {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  flex:none;
  width:min(100%,320px);
  height:auto;
  aspect-ratio:1/1;
  border:0;
  border-radius:0;
  overflow:visible;
  background:transparent;
  filter:none;
}
.moment-picture img {
  display:block;
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.3));
  transition:transform .3s ease,filter .3s ease;
}
.moment-picture::after {
  content:"";
  display:block;
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(109deg,transparent 30%,rgba(255,255,255,.08) 42%,rgba(255,255,255,.55) 49%,rgba(255,255,255,.09) 55%,transparent 68%);
  background-size:280% 100%;
  background-position:120% 50%;
  -webkit-mask-image:var(--moment-mask);
  mask-image:var(--moment-mask);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-mode:alpha;
  mask-mode:alpha;
  mix-blend-mode:screen;
  filter:none;
  transform:none;
  animation:moment-masked-glint 8s ease-in-out infinite;
}
.moment-card:nth-child(2n) .moment-picture::after {animation-delay:-2.8s;}
.moment-card:nth-child(3n) .moment-picture::after {animation-delay:-5.4s;}
@keyframes moment-masked-glint {
  0%,13% {background-position:120% 50%;opacity:0;}
  18% {opacity:.8;}
  31% {background-position:-20% 50%;opacity:.9;}
  37%,100% {background-position:-20% 50%;opacity:0;}
}
.moment-foot {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  flex:none;
  width:100%;
  min-height:0;
  border:0;
  padding:0 5px 2px;
}
.moment-title {
  color:var(--chalk);
  font:700 clamp(15px,1.5vw,21px)/1.32 var(--display);
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:balance;
}
.moment-kicker {font-size:10px;}
.moment-card:hover {
  transform:translateY(-4px);
  border:0;
  box-shadow:none;
  filter:none;
}
.moment-card:hover .moment-picture img {
  transform:scale(1.045);
  filter:drop-shadow(0 0 17px var(--moment-glow)) drop-shadow(0 10px 15px rgba(0,0,0,.44)) brightness(1.1);
}
.moment-card:hover .moment-picture::after {animation-duration:4.2s;}
.moment-card:focus-visible {outline:2px solid var(--moment-accent);outline-offset:5px;border-radius:12px;}
@media(max-width:760px) {
  .moments-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(10px,3vw,22px);
    row-gap:26px;
  }
  .moment-card {gap:8px;}
  .moment-picture {width:100%;height:auto;aspect-ratio:1/1;}
  .moment-foot {gap:5px;padding:0 2px 2px;}
  .moment-title {font-size:clamp(12px,3.5vw,17px);line-height:1.34;}
  .moment-kicker {font-size:9px;letter-spacing:.06em;}
  .moment-picture img {filter:drop-shadow(0 6px 10px rgba(0,0,0,.32));}
}
@media(hover:none) {
  .moment-card:hover {transform:none;}
  .moment-card:hover .moment-picture img {transform:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.32));}
  .moment-picture::after {animation-duration:10s;}
}
@media(prefers-reduced-motion:reduce) {
  .moment-card,.moment-picture img {transition:none;}
  .moment-picture::after {animation:none;opacity:0;}
  .moment-card:hover,.moment-card:hover .moment-picture img {transform:none;}
}

/* ---------- accounts and player profile editor ---------- */
#account-nav { display:flex; align-items:center; gap:6px; flex:none; }
.nav-auth-button,.nav-account { flex:none; display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:7px 13px; border:1px solid rgba(242,193,78,.42); border-radius:999px; background:rgba(242,193,78,.09); color:var(--gold); text-decoration:none; font:500 14px var(--body); cursor:pointer; }
.nav-auth-button:hover,.nav-account:hover { background:rgba(242,193,78,.17); border-color:var(--gold); color:#ffe7a1; }
.nav-auth-button:disabled,.auth-primary-button:disabled { opacity:.6; cursor:wait; }
.pintro { display:grid; justify-items:start; gap:10px; }
.profile-edit-trigger { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 13px; border:1px solid rgba(125,190,255,.3); border-radius:999px; background:rgba(75,145,220,.1); color:#b8dcff; font:600 13px var(--body); cursor:pointer; }
.profile-edit-trigger:hover { background:rgba(75,145,220,.2); border-color:#83bfff; }
.ffb-dialog { position:fixed; inset:0; margin:auto; width:min(440px,calc(100vw - 24px)); max-width:none; max-height:min(88vh,880px); max-height:min(88dvh,880px); overflow:auto; padding:0; border:1px solid #344b6c; border-radius:22px; background:#101e32; color:var(--chalk); box-shadow:0 30px 90px #000b; }
.ffb-dialog::backdrop { background:rgba(2,7,16,.82); backdrop-filter:blur(7px); }
.ffb-dialog[open] { animation:auth-dialog-in .22s ease-out both; }
@keyframes auth-dialog-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
.ffb-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:22px 22px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.ffb-dialog-head h2 { display:block; margin-top:6px; font-size:21px; }
.ffb-dialog-kicker { color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.14em; }
.ffb-dialog-close { flex:none; display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(255,255,255,.13); border-radius:50%; background:rgba(255,255,255,.045); color:var(--chalk); font:28px/1 var(--body); cursor:pointer; }
.ffb-dialog-close:hover { background:rgba(255,255,255,.11); }
.auth-form { display:grid; gap:15px; padding:20px 22px 22px; }
.auth-form label { display:grid; gap:7px; color:#d8e4f2; font-size:13px; font-weight:600; }
.auth-form input { width:100%; min-height:46px; padding:11px 13px; border:1px solid #304766; border-radius:11px; outline:none; background:#0b1728; color:var(--chalk); font:15px var(--body); }
.auth-form input:focus { border-color:#82bfff; box-shadow:0 0 0 3px rgba(104,174,245,.12); }
.auth-primary-button,.auth-secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border:1px solid #d5aa43; border-radius:11px; background:linear-gradient(135deg,#f5d16e,#dcae3f); color:#1b1a15; font:700 14px var(--body); text-decoration:none; cursor:pointer; }
.auth-primary-button:hover,.auth-secondary-button:hover { filter:brightness(1.07); }
.auth-hint { margin:0; color:var(--mist); font-size:12px; line-height:1.55; }
.auth-message { min-height:0; margin:0; color:#b8dcff; font-size:13px; line-height:1.45; }
.auth-message:empty { display:none; }
.auth-message.is-error { color:#ff9d91; }
.auth-message.is-success { color:#83e2b2; }
.auth-gate { display:grid; place-items:center; min-height:55vh; padding:35px 0; }
.auth-gate-card { width:min(520px,100%); padding:clamp(22px,5vw,36px); border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,#182b45,#101e32); box-shadow:0 22px 60px #0004; }
.auth-gate-card h1 { margin-top:8px; font-size:clamp(26px,5vw,38px); }
.auth-gate-card .auth-form { padding:22px 0 0; }
.profile-edit-dialog { width:min(820px,calc(100vw - 24px)); }
.profile-edit-body { display:grid; gap:22px; padding:20px 22px 22px; }
.profile-edit-avatar { display:grid; grid-template-columns:96px minmax(0,1fr); gap:18px; align-items:center; padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.025); }
.profile-edit-avatar-preview { width:96px; height:96px; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:#253d5b; color:var(--chalk); font:800 34px var(--display); }
.profile-edit-avatar-preview img { width:100%; height:100%; object-fit:cover; }
.profile-edit-avatar-actions { display:grid; justify-items:start; gap:7px; }
.profile-edit-avatar-actions b { font:700 15px var(--display); }
.profile-edit-avatar-actions small { max-width:55ch; color:var(--mist); font-size:11px; line-height:1.45; }
.auth-secondary-button { min-height:36px; padding:7px 12px; border-color:#385879; background:#1b3553; color:#d9ebff; font-size:12px; }
.profile-remove-avatar { padding:0; border:0; background:none; color:#a8bfd9; font:12px var(--body); text-decoration:underline; cursor:pointer; }
.profile-edit-ach-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:12px; }
.profile-edit-ach-head h3 { font-size:16px; }
.profile-edit-ach-head p { margin:5px 0 0; color:var(--mist); font-size:12px; line-height:1.45; }
.edit-ach-count { flex:none; padding:7px 11px; border:1px solid rgba(242,193,78,.3); border-radius:999px; background:rgba(242,193,78,.08); color:var(--gold); font:700 13px var(--display); font-variant-numeric:tabular-nums; }
.edit-ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:8px; max-height:360px; overflow:auto; padding:2px 3px 4px 2px; }
.edit-ach-option { min-width:0; display:grid; grid-template-columns:42px minmax(0,1fr) 22px; align-items:center; gap:8px; padding:8px; border:1px solid #2a405e; border-radius:12px; background:#14243a; color:var(--chalk); text-align:left; cursor:pointer; transition:border-color .15s ease,background .15s ease; }
.edit-ach-option:hover { border-color:#6383aa; background:#1a2e49; }
.edit-ach-option.selected { border-color:#d6ad50; background:linear-gradient(135deg,rgba(242,193,78,.14),rgba(242,193,78,.045)); }
.edit-ach-icon { display:grid; place-items:center; width:42px; height:42px; }
.edit-ach-icon svg { width:40px; height:40px; }
.edit-ach-name { overflow-wrap:anywhere; font-size:11px; font-weight:600; line-height:1.25; }
.edit-ach-check { display:grid; place-items:center; width:21px; height:21px; border:1px solid #47617f; border-radius:50%; color:var(--mist); font-size:13px; }
.edit-ach-option.selected .edit-ach-check { border-color:var(--gold); background:var(--gold); color:#172238; font-weight:800; }
.profile-edit-footer { display:grid; gap:10px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
.profile-edit-footer-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.profile-edit-footer .auth-primary-button { justify-self:end; min-width:190px; }
.profile-logout-button { justify-self:start; padding:8px 0; border:0; background:none; color:var(--mist); font:12px var(--body); text-decoration:underline; cursor:pointer; }
html:has(.ffb-dialog[open]) { overflow:hidden; }
@media(max-width:600px) {
  .ffb-dialog { max-height:calc(100dvh - 18px); border-radius:17px; }
  .ffb-dialog-head { padding:17px 16px 13px; }
  .auth-form,.profile-edit-body { padding:16px; }
  .profile-edit-avatar { grid-template-columns:76px minmax(0,1fr); gap:12px; padding:11px; }
  .profile-edit-avatar-preview { width:76px; height:76px; }
  .edit-ach-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:42dvh; }
  .edit-ach-option { grid-template-columns:34px minmax(0,1fr) 20px; gap:6px; padding:7px 6px; }
  .edit-ach-icon,.edit-ach-icon svg { width:34px; height:34px; }
  .profile-edit-footer-actions { flex-direction:column-reverse; align-items:stretch; }
  .profile-edit-footer .auth-primary-button { width:100%; }
  #account-nav { gap:4px; }
  .nav-auth-button,.nav-account { min-height:40px; padding:6px 8px; font-size:11px; white-space:nowrap; }
}
@media(prefers-reduced-motion:reduce) { .ffb-dialog[open] { animation:none; } .edit-ach-option { transition:none; } }