/* Step 01: black / MEXC blue / silver visual foundation. */
:root {
  --bg: #070809;
  --panel: #101215;
  --surface-raised: #181b20;
  --border: #2b2f36;
  --border-strong: #414751;
  --muted: #9299a5;
  --text: #f1f3f6;
  --silver: #c5cbd4;
  --accent: #3378FF;
  --radius-panel: 12px;
  --radius-control: 7px;
}
body { background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
header { background: var(--bg); border-color: #202329; }
.event-title h1 .title-worlds { color: var(--text); }
.intro p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.toolbar, .share-section, .rewards-section { border-color: var(--border); }
.steps strong, .steps h2 { font-size: 15px; font-weight: 600; letter-spacing: .1px; color: var(--text); }
.step-number { font-size: 21px; color: var(--accent); }
.progress { color: var(--silver); font-size: 12px; }
.track { background: var(--border); height: 3px; border-radius: 3px; overflow: hidden; }
.workspace { background: var(--panel); border-color: var(--border); border-radius: var(--radius-panel); box-shadow: 0 16px 48px #00000024; }
aside { background: var(--panel); border-color: var(--border); padding: 24px; }
.aside-title { font-size: 13px; color: var(--silver); }
.pill { color: var(--muted); letter-spacing: 1.3px; }
#roster { gap: 12px; margin-top: 20px; }
.roster-team { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 16px 7px 12px; }
.roster-team:has(.seeded) { background: var(--surface-raised); border-color: var(--border-strong); }
.roster-team:hover, .roster-team.active { background: #3378FF12; border-color: var(--accent); color: var(--text); }
.roster-team .team-text strong { font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--text); }
.bracket-wrap { background: var(--panel); padding: 28px 24px; }
.round-heading small { color: var(--silver); font-family: 'Barlow Condensed', Arial, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 1.6px; }
.match { border-color: var(--border-strong); background: var(--surface-raised); border-radius: var(--radius-control); }
.match::after { border-color: var(--border-strong); }
.slot { color: var(--text); border-radius: 4px; font-weight: 600; }
.slot + .slot { border-top-color: var(--border); }
.slot.winner { color: var(--accent); background: #3378FF16; border: 1px solid var(--accent); box-shadow: none; }
.slot:hover { color: var(--text); border-color: var(--accent); }
.slot.winner:hover { color: var(--accent); }
.slot.empty { color: var(--muted); font-weight: 400; }
.empty-icon { color: var(--muted); border-color: var(--border-strong); }
.champion-card { background: var(--surface-raised); border-color: var(--border-strong); border-radius: var(--radius-panel); box-shadow: inset 0 1px 0 #ffffff06; }
.champion-card::before { color: var(--silver); background: var(--surface-raised); letter-spacing: 1.6px; }
.champion-card h2 { color: var(--text); font-size: 15px; line-height: 1.5; }
.champion-tag { color: var(--accent); letter-spacing: 1.5px; }
.summoners-cup { filter: drop-shadow(0 3px 5px #00000045); }
.download-button, .bracket-actions #reset { background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: var(--radius-control); font-family: Arial, Helvetica, sans-serif; font-weight: 600; box-shadow: inset 0 1px 0 #ffffff12; }
.download-button:hover, .bracket-actions #reset:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: inset 0 0 0 1px #ffffff30; }
.username-field { color: var(--silver); }
.username-field input { background: var(--surface-raised); border-color: var(--border-strong); color: var(--text); border-radius: var(--radius-control); font-size: 14px; }
.username-field input::placeholder { color: var(--muted); }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rewards-card { background: var(--panel); border-color: var(--border); border-radius: var(--radius-panel); padding: 32px; box-shadow: 0 16px 48px #00000024; }
.reward-rules h3 { color: var(--text); font-size: 24px; letter-spacing: -.4px; }
.reward-rules strong, .social-placeholder strong { color: var(--silver); }
.reward-rules p { color: var(--muted); line-height: 1.8; }
.social-placeholder p { color: var(--muted); font-size: 11px; line-height: 1.6; }
.social-placeholder { border-color: var(--border); }
.export-brand { color: var(--silver); }
.export-credit { color: var(--text); border-color: var(--border); }

/* Step 02: static arena lighting, with the established title lockup intact. */
.event-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 90px 24px 72px;
  gap: 32px;
  background:
    radial-gradient(ellipse 42% 60% at 50% 44%, #3378FF17 0%, #3378FF07 52%, transparent 82%),
    radial-gradient(ellipse 65% 12% at 50% 100%, #3378FF0c, transparent 80%);
}
.event-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(from 157deg at 50% -50%, transparent 0deg, #3378FF09 11deg, #3378FF12 23deg, #3378FF09 35deg, transparent 46deg);
  mask-image: linear-gradient(transparent, #000 25%, #000 65%, transparent);
}
.event-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('assets/stage-grain.svg') repeat;
  opacity: .045;
  mask-image: radial-gradient(ellipse at center, #000 15%, transparent 75%);
}
.event-intro .event-title { gap: 34px; }
.event-intro .event-title::after {
  left: -24px;
  right: -24px;
  bottom: -22px;
  background: linear-gradient(90deg, transparent, #3378FF55 35%, #3378FF88 50%, #3378FF55 65%, transparent);
}
.event-intro .event-title h1 { width: 364px; }
.event-intro .event-title .title-worlds { text-shadow: 0 2px 18px #ffffff08; }
.event-intro .event-title .title-picks { text-shadow: 0 4px 32px #3378FF25; }
.event-intro .event-emblem { width: 122px; height: 130px; }
.event-intro .event-divider { height: 120px; }
.event-intro > p { position: relative; margin-top: 8px; color: #a1a8b4; letter-spacing: .15px; }

/* Step 03: one entrance per page load; no looping or interaction replay. */
@keyframes hero-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-divider-unfold {
  from { opacity: 0; transform: skew(-10deg) scaleY(0); }
  to { opacity: 1; transform: skew(-10deg) scaleY(1); }
}
@keyframes hero-rule-unfold {
  from { opacity: 0; transform: scaleX(.15); }
  to { opacity: 1; transform: scaleX(1); }
}
@media(prefers-reduced-motion: no-preference) {
  .event-intro .event-emblem { animation: hero-arrive .52s cubic-bezier(.22,1,.36,1) both; }
  .event-intro .event-divider { transform-origin: center; animation: hero-divider-unfold .5s cubic-bezier(.22,1,.36,1) .08s both; }
  .event-intro .title-worlds { animation: hero-arrive .55s cubic-bezier(.22,1,.36,1) .12s both; }
  .event-intro .title-picks { animation: hero-arrive .55s cubic-bezier(.22,1,.36,1) .22s both; }
  .event-intro .event-title::after { transform-origin: center; animation: hero-rule-unfold .5s cubic-bezier(.22,1,.36,1) .25s both; }
  .event-intro > p { animation: hero-arrive .5s cubic-bezier(.22,1,.36,1) .3s both; }
}
@media(max-width:700px) {
  .event-intro { padding: 56px 0 48px; gap: 28px; }
  .event-intro .event-title { gap: 14px; }
  .event-intro .event-title h1 { width: 218px; }
  .event-intro .event-emblem { width: 72px; height: 80px; }
  .event-intro .event-divider { height: 78px; }
  .event-intro .event-title::after { left: 0; right: 0; bottom: -18px; }
  .event-intro > p { max-width: 300px; }
}
@media(max-width:380px) {
  .event-intro .event-title { gap: 10px; }
  .event-intro .event-title h1 { width: 190px; }
  .event-intro .event-emblem { width: 60px; height: 68px; }
  .event-intro .event-divider { height: 68px; }
}
@media(max-width:700px) {
  aside { padding: 20px 12px; }
  #roster { gap: 8px; }
  .roster-team { padding: 12px 5px; }
  .roster-team .team-text strong { font-size: 10px; }
  .bracket-wrap { padding: 24px 20px; }
  .round-heading small { font-size: 15px; }
}
@media(max-width:600px) {
  .steps strong, .steps h2 { font-size: 13px; }
  .progress { font-size: 11px; }
  .rewards-card { padding: 24px; }
  .reward-rules h3 { font-size: 21px; }
  .intro p { font-size: 11px; }
}

/* Step 04: collectible-style team cards; keep the two-row pool. */
.roster-team {
  padding: 23px 8px 14px;
  gap: 14px;
  background: linear-gradient(155deg, #20242b 0%, #15181d 70%);
  box-shadow: inset 0 1px 0 #ffffff06;
  isolation: isolate;
}
.roster-team .team-icon { width: 48px; height: 48px; }
.roster-team .team-text strong {
  min-height: 36px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
  text-wrap: balance;
}
.roster-team:has(.seeded) { background: linear-gradient(155deg, #202731, #15181d 75%); border-color: #3b4657; }
.roster-team .handle.seeded {
  display: flex;
  position: absolute;
  top: 7px;
  right: 7px;
  width: 15px;
  height: 15px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 10px;
  line-height: 1;
}
.roster-team.active, .roster-team:focus-visible {
  border-color: var(--accent);
  background: linear-gradient(155deg, #172c52, #121c2f);
  box-shadow: inset 0 0 0 1px #3378FF55, 0 6px 20px #00000030;
}
@media(hover: hover) {
  .roster-team:hover {
    border-color: var(--accent);
    background: linear-gradient(155deg, #1d2c46, #141b28);
    box-shadow: 0 8px 20px #00000040, inset 0 1px 0 #ffffff0c;
  }
}
.roster-team.is-dragging {
  cursor: grabbing;
  border-color: var(--accent);
  box-shadow: 0 14px 28px #00000070, 0 0 0 1px #3378FF55;
}
@media(prefers-reduced-motion: no-preference) {
  .roster-team { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
}
@media(hover: hover) and (prefers-reduced-motion: no-preference) {
  .roster-team:hover { transform: translateY(-3px); }
  .roster-team.is-dragging { transform: translateY(-3px) scale(1.025); }
}
@media(max-width:700px) {
  .roster-team { padding: 23px 5px 12px; gap: 11px; }
  .roster-team .team-icon { width: 38px; height: 38px; }
  .roster-team .team-text strong { font-size: 10px; min-height: 44px; }
  .roster-team .handle.seeded { width: 13px; height: 13px; font-size: 9px; top: 5px; right: 5px; }
}

/* Step 05: valid destinations for drag and click placement. */
.placement-status { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.placement-status:has(#placement-hint:not([hidden])) { margin-top:16px; }
#placement-hint { color:var(--silver); font-size:12px; line-height:1.5; }
#cancel-selection { color:var(--accent); font:600 12px Arial,sans-serif; padding:8px 0; }
[hidden] { display:none !important; }
.target-valid { outline:1px solid var(--accent); outline-offset:3px; background:#3378FF12; }
.target-invalid { opacity:.35; }
.target-valid .slot:hover { background:#3378FF25; }
.target-valid.drop-hover { outline-width:2px; background:#3378FF28; box-shadow:0 0 24px #3378FF22; }
.just-placed { box-shadow:inset 0 0 0 2px var(--accent),0 0 18px #3378FF30; }
@keyframes placement-settle { from { transform:scale(.97); } to { transform:scale(1); } }
@media(prefers-reduced-motion:no-preference) {
 .just-placed { animation:placement-settle .24s cubic-bezier(.2,.8,.2,1); }
}
.export-frame .target-invalid { opacity:1; }
.export-frame .target-valid { outline:none; }
.export-frame .just-placed { animation:none; box-shadow:none; }

/* Step 06: rounded, measured connections between every knockout round. */
.bracket { position:relative; isolation:isolate; }
.match::after { content:none; }
.bracket-paths { position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:0; }
.round { position:relative; z-index:1; min-width:0; }
.bracket-path { fill:none; stroke:#414751; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.bracket-path.is-advanced { stroke:var(--accent); stroke-width:2; }
@keyframes advance-path { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@media(prefers-reduced-motion:no-preference) {
 .bracket-path.path-enter { stroke-dasharray:1; animation:advance-path .55s cubic-bezier(.25,.65,.3,1) both; }
}
.export-frame .bracket-path { animation:none; stroke-dashoffset:0; }

/* Step 07: a single restrained reveal when the champion changes. */
.champion-card.has-champion {
 background:radial-gradient(ellipse at 50% 28%,#3378FF20,transparent 70%),var(--surface-raised);
 border-color:var(--accent);
}
.champion-card.has-champion::before { background:#181e2a; }
.champion-effects { position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit; }
.champion-halo { position:absolute; width:110px; height:110px; left:50%; top:58px; margin:-55px; border:1px solid #3378FF99; border-radius:50%; box-shadow:0 0 24px #3378FF40,inset 0 0 20px #3378FF25; animation:champion-halo 1.1s ease-out both; }
.champion-effects i { position:absolute; left:50%; top:58px; width:3px; height:3px; background:#87b0ff; border-radius:50%; box-shadow:0 0 7px #3378FF; animation:champion-spark .9s ease-out var(--delay) both; }
.champion-reveal > .team-icon { animation:champion-logo .65s cubic-bezier(.16,1,.3,1) both; }
.champion-reveal h2,.champion-reveal .champion-tag { animation:champion-caption .5s ease-out .18s both; }
@keyframes champion-logo { from { opacity:0; transform:translateY(7px) scale(.84); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes champion-caption { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes champion-halo { from { opacity:0; transform:scale(.5); } 20% { opacity:.8; } to { opacity:0; transform:scale(1.75); } }
@keyframes champion-spark { from { opacity:0; transform:translate(0,0) scale(.6); } 18% { opacity:.9; } to { opacity:0; transform:translate(var(--dx),var(--dy)) scale(.2); } }
@media(prefers-reduced-motion:reduce) {
 .champion-effects { display:none; }
 .champion-reveal > .team-icon,.champion-reveal h2,.champion-reveal .champion-tag { animation:none; }
}
.export-frame .champion-effects { display:none; }
.export-frame .champion-reveal > .team-icon,.export-frame .champion-reveal h2,.export-frame .champion-reveal .champion-tag { animation:none; opacity:1; transform:none; }

/* Step 08: polished silver, with the reflection clipped to the actual cup. */
.summoners-cup { filter:drop-shadow(0 2px 2px #00000080) drop-shadow(0 0 9px #b9cce014); }
.cup-reflection { pointer-events:none; }
.cup-light-beam { opacity:0; }
@keyframes cup-silver-sweep {
  0%,12% { opacity:0; transform:translateX(0); }
  18% { opacity:.65; }
  44% { opacity:.65; }
  52%,100% { opacity:0; transform:translateX(190px); }
}
@media(prefers-reduced-motion:no-preference) {
 .cup-light-beam { animation:cup-silver-sweep 6s ease-in-out infinite; }
}
.export-frame .cup-reflection { display:none; }

/* Step 09: deliberate export progress and an accessible image preview. */
.download-button[aria-busy="true"] { display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:wait; opacity:.8; }
.download-button .export-spinner { margin:0; width:16px; height:16px; border:2px solid #ffffff40; border-top-color:#fff; border-radius:50%; }
@keyframes export-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:no-preference) { .export-spinner { animation:export-spin .8s linear infinite; } }
#export-preview { width:min(1050px,calc(100% - 32px)); max-width:1050px; max-height:90vh; padding:24px; background:var(--panel); color:var(--text); border:1px solid var(--border-strong); border-radius:14px; box-shadow:0 24px 100px #0009; }
#export-preview::backdrop { background:#030508cc; backdrop-filter:blur(8px); }
.preview-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.preview-heading h2 { font:600 20px Arial,sans-serif; margin:0; }
#close-preview { width:36px; height:36px; padding:0; color:var(--silver); border-color:var(--border); }
#export-preview > p { font-size:13px; color:var(--muted); margin:8px 0 20px; }
.preview-image-wrap { background:var(--bg); border:1px solid var(--border); border-radius:8px; overflow:auto; max-height:60vh; }
#export-image { display:block; width:100%; height:auto; }
.preview-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; flex-wrap:wrap; }
#export-status { font-size:12px; color:var(--muted); }
#save-export { display:inline-flex; align-items:center; text-decoration:none; padding:13px 20px; }
@media(max-width:600px) { #export-preview { padding:16px; } .preview-heading h2 { font-size:17px; } .preview-actions { justify-content:center; } }

/* Step 10: clear campaign steps and a dedicated community panel. */
.rewards-card { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:0; padding:0; overflow:hidden; background:var(--panel); }
.reward-rules { padding:36px; max-width:none; }
.reward-eyebrow { display:block; color:var(--accent); font:600 10px Arial,sans-serif; letter-spacing:1.8px; margin-bottom:12px; }
.reward-rules h3 { font-size:28px; margin:0 0 28px; }
.reward-rules .reward-steps { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.reward-rules .reward-steps li { display:flex; align-items:flex-start; gap:16px; padding:20px; margin:0; border:1px solid var(--border); border-radius:8px; background:linear-gradient(120deg,#1b1e24,#14171c); }
.reward-step-number { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; border-radius:7px; border:1px solid #3378FF40; background:#3378FF12; color:var(--accent); font:600 12px Arial,sans-serif; }
.reward-steps strong { display:block; color:var(--text); font-size:14px; margin:2px 0 6px; }
.reward-rules .reward-steps p { margin:0; font-size:12px; line-height:1.75; max-width:520px; }
.reward-rules .reward-footnote { margin:20px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }
.rewards-card .social-placeholder { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:32px 24px; border:0; border-left:1px solid var(--border); background:radial-gradient(ellipse at 50% 50%,#3378FF0d,transparent 75%),#0d1014; }
.community-label { display:flex; align-items:center; gap:8px; color:var(--silver); font:600 9px Arial,sans-serif; letter-spacing:1.1px; margin-bottom:24px; }
.community-label svg { color:var(--accent); }
.qr-frame { padding:8px; border-radius:17px; border:1px solid #ffffff1c; background:#ffffff08; box-shadow:0 8px 24px #0004; margin-bottom:20px; }
.qr-frame .community-qr { margin:0; border-radius:10px; }
.rewards-card .social-placeholder > strong { font-size:17px; color:var(--text); }
.rewards-card .social-placeholder > p { margin:8px 0 0; font-size:11px; }
@media(max-width:800px) {
 .rewards-card { grid-template-columns:1fr; }
 .reward-rules { padding:26px; }
 .reward-rules h3 { font-size:24px; }
 .rewards-card .social-placeholder { border-left:0; border-top:1px solid var(--border); padding:28px; }
}
@media(max-width:480px) {
 .reward-rules { padding:22px 18px; }
 .reward-rules .reward-steps li { padding:16px 12px; gap:12px; }
}

/* Approved trophy redesign: closed metal planes, no strokes or animated sweep. */
.summoners-cup.trophy-emblem { width:92px; height:110px; margin:0 auto 20px; filter:drop-shadow(0 3px 3px #0008); }

/* Reference proportions: tall pedestal, grounded base, smaller overall presence. */
.summoners-cup.trophy-emblem { width:66px; height:99px; margin:0 auto 18px; }

/* Requested click-only controls and cleaner selection boundaries. */
.round-heading { align-items:center; text-align:center; }
.roster-team,.slot { cursor:pointer; -webkit-user-drag:none; }
.roster-team img,.slot img { -webkit-user-drag:none; }
.match { display:flex; flex-direction:column; gap:4px; }
.slot,.slot + .slot { position:relative; border:1px solid transparent; margin:0; box-sizing:border-box; }
.slot.winner,.slot.winner:hover { border:1px solid var(--accent); box-shadow:none; background:#3378FF16; }
.slot.click-target { border:1px dashed #3378FF88; }
.slot.click-target:hover { border:1px solid var(--accent); background:#3378FF20; }
.slot:focus-visible { outline-offset:-3px; }
.team-logo-0 img { filter:none; }
.team-logo-8 img,.team-logo-10 img { filter:url(#remove-white); }

/* Each selection owns its border; no shared divider or overflow into its neighbour. */
.match { padding:6px; gap:8px; }
.slot { flex-shrink:0; }
.slot:focus,.slot:focus-visible { outline:none; }
.slot:focus-visible { box-shadow:inset 0 0 0 2px #91b6ff; }
.slot.click-target:not(.winner):not(:hover) { border-color:transparent; }
.slot.click-target:hover { border-color:var(--accent); }
#roster { grid-template-columns:repeat(7,minmax(0,1fr)); }
@media(max-width:700px) { #roster { grid-template-columns:repeat(7,minmax(76px,1fr)); } }

/* Independently reversible half-Earth hero, inspired by orbital wallpaper lighting. */
.event-intro { min-height:350px; background:#07090d; }
.earth-stage { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; mask-image:linear-gradient(#000 0%,#000 60%,transparent 100%); }
.earth-sphere { position:absolute; width:780px; height:780px; left:50%; top:115px; transform:translateX(-50%) rotate(-14deg); border-radius:50%; overflow:hidden; background:#08172a; box-shadow:0 -2px 3px #80c4ff99,0 -8px 28px #3378FF40,0 -30px 95px #3378FF17; }
.earth-surface { --earth-travel:-1560px; position:absolute; inset:0; background-image:url('assets/earth-map.svg'); background-size:1560px 780px; opacity:.7; }
.earth-sphere::after { content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 43% 0%,transparent 0%,#040a1460 30%,#03050af5 63%),linear-gradient(95deg,#02040bd9,transparent 45%,#02040b99); box-shadow:inset 0 3px 7px #b8dcff80,inset 0 14px 35px #3378FF33; }
.event-intro .event-title { z-index:1; }
.event-intro > p { z-index:1; text-shadow:0 2px 6px #000; }
@keyframes earth-rotation { from { background-position:0 var(--earth-latitude,0px); } to { background-position:var(--earth-travel) var(--earth-latitude,0px); } }
@media(prefers-reduced-motion:no-preference) { .earth-surface { animation:earth-rotation 80s linear infinite; } }
@media(max-width:700px) { .event-intro { min-height:270px; } .earth-sphere { width:580px; height:580px; top:100px; } .earth-surface { --earth-travel:-1160px; background-size:1160px 580px; } }

/* Round two / 01: tighter rhythm and an unobstructed title above a wider horizon. */
.event-intro { min-height:310px; padding:62px 24px 48px; gap:26px; }
.event-intro .event-emblem { mix-blend-mode:screen; filter:grayscale(1) invert(1) contrast(12); }
.earth-sphere { width:1120px; height:1120px; top:218px; }
.earth-surface { --earth-travel:-2240px; background-size:2240px 1120px; opacity:.55; }
.earth-stage { mask-image:linear-gradient(transparent 30%,#000 62%,transparent 100%); }
.toolbar { padding-top:18px; padding-bottom:18px; }
aside { padding:20px 24px; }
#roster { margin-top:16px; gap:10px; }
.share-section,.rewards-section { margin-top:32px; padding-top:26px; }
.download-area { padding-top:20px; padding-bottom:26px; }
.match .slot.winner + .slot:not(.winner):not(:hover) { border-top-color:transparent; }
@media(max-width:700px) {
 .event-intro { min-height:250px; padding:42px 0 38px; }
 .earth-sphere { width:820px; height:820px; top:172px; }
 .earth-surface { --earth-travel:-1640px; background-size:1640px 820px; }
 aside { padding:18px 12px; }
 .share-section,.rewards-section { margin-top:26px; padding-top:22px; }
}

.event-intro .event-emblem { filter:none; mix-blend-mode:normal; }

/* Approved second-round polish. */
.earth-sphere { width:1440px; height:1440px; top:215px; }
.earth-surface { --earth-travel:-2880px; background-size:2880px 1440px; }
.team-icon img { transform:scale(var(--logo-scale,1)); }
.team-logo-0 { --logo-scale:1.05; }.team-logo-1 { --logo-scale:1.08; }
.team-logo-2 { --logo-scale:1.12; }.team-logo-3 { --logo-scale:.94; }
.team-logo-4 { --logo-scale:1.12; }.team-logo-5 { --logo-scale:.92; }
.team-logo-6 { --logo-scale:1.18; }.team-logo-7 { --logo-scale:.98; }
.team-logo-9 { --logo-scale:.95; }.team-logo-10 { --logo-scale:1; }
.team-logo-12 { --logo-scale:.95; }.team-logo-13 { --logo-scale:.95; }
.team-logo-14 { --logo-scale:.94; }.team-logo-15 { --logo-scale:1.08; }
.slot.eliminated { color:#939aa6; }
.slot.eliminated .team-icon { opacity:.45; filter:saturate(.35); }
.slot.eliminated:hover { color:var(--text); }
.slot.eliminated:hover .team-icon { opacity:.8; }
.slot.winner { color:#f1f3f6; background:#3378FF18; }
.slot.winner:hover { color:#fff; }
#undo { border:1px solid var(--border-strong); padding:10px 14px; color:var(--silver); border-radius:7px; }
#undo:disabled { opacity:.35; cursor:default; }
.round-heading small { white-space:nowrap; font-size:15px; letter-spacing:1px; }
@media(max-width:700px) {
 .earth-sphere { width:1100px; height:1100px; top:170px; }
 .earth-surface { --earth-travel:-2200px; background-size:2200px 1100px; }
 .bracket-actions { gap:8px; flex-wrap:wrap; justify-content:flex-end; }
 #undo { padding:9px 10px; }
}

/* Refined print-like surfaces, complete interactive borders and simplified rewards. */
.earth-sphere { width:1800px; height:1800px; top:210px; }
.earth-surface { --earth-travel:-3600px; background-size:3600px 1800px; }
.match .slot:hover,.match .slot:active,.match .slot.winner,.match .slot.winner:hover { border:1px solid var(--accent); }
.match .slot:hover { box-shadow:inset 0 0 0 1px #3378FF28; }
.qr-frame { border:0; background:transparent; box-shadow:none; padding:0; border-radius:0; }
.capture-finish { background:radial-gradient(ellipse at 95% 48%,#3378FF0a,transparent 55%),#0d1118; }
.capture-finish .match { background:linear-gradient(130deg,#202731,#151b24); border-color:#3b4656; box-shadow:inset 0 1px 0 #ffffff09,0 5px 12px #0003; }
.capture-finish .slot.winner { background:linear-gradient(100deg,#3378FF27,#3378FF09); border-color:#3378FF; color:#f6f8fc; }
.capture-finish .slot.eliminated { color:#9aa4b2; }
.capture-finish .slot.eliminated .team-icon { opacity:.65; }
.capture-finish .champion-card { background:radial-gradient(ellipse at 50% 20%,#3378FF26,transparent 75%),linear-gradient(150deg,#1e293b,#101822); border-color:#3378FF; box-shadow:inset 0 1px 0 #ffffff12; }
.capture-finish .champion-card::before { display:none; }
.capture-finish .champion-card h2 { font-size:18px; }
.capture-finish .champion-card .team-icon { width:76px; height:76px; }
.capture-finish .round-heading small { color:#c9d3e0; font-size:14px; letter-spacing:1.6px; }
@media(max-width:700px) {
 .earth-sphere { width:1350px; height:1350px; top:168px; }
 .earth-surface { --earth-travel:-2700px; background-size:2700px 1350px; }
}

/* Earth refinement: visible land motion under stationary orbital lighting. */
.earth-surface { --earth-latitude:-180px; opacity:.72; filter:brightness(1.12); background-position:0 var(--earth-latitude); }
/* The atmosphere remains on the sphere, independent from the moving surface. */
.earth-sphere::after { animation:none; }
@media(max-width:700px) { .earth-surface { --earth-latitude:-135px; } }
@media(prefers-reduced-motion:reduce) { .earth-surface { animation:none; } }

/* Compact community QR with a narrow, scan-safe quiet zone. */
.community-qr{width:144px;height:144px;border-radius:4px}
.community-qr img{width:255.88px;left:-55.91px;top:-155.91px;height:auto;max-width:none}

/* Approved visual hierarchy: quiet surroundings, focused blue accents. */
.event-intro{background:radial-gradient(ellipse 36% 45% at 50% 44%,#3378FF09,transparent 78%)}
.event-intro::before{opacity:.3}
.event-intro::after{opacity:.025}
.earth-sphere{box-shadow:0 -1px 3px #80c4ff70,0 -7px 22px #3378FF25,0 -24px 70px #3378FF0a}
.earth-sphere::after{box-shadow:inset 0 2px 6px #b8dcff60,inset 0 12px 30px #3378FF1c}
.workspace,.rewards-card{background:#101215;border-color:#272b32;box-shadow:0 12px 32px #00000020}
.bracket-wrap,aside{background:#101215}
.match{background:linear-gradient(155deg,#1c1f25,#171a1f);border-color:#363c46;box-shadow:inset 0 1px 0 #ffffff07,0 4px 12px #00000018}
.roster-team,.roster-team:has(.seeded){background:linear-gradient(155deg,#1b1e23,#15181c);box-shadow:inset 0 1px 0 #ffffff05}
.roster-team:has(.seeded){border-color:#383f49}
.roster-team.active{background:linear-gradient(155deg,#1a2b49,#151e2c);border-color:var(--accent);box-shadow:inset 0 0 0 1px #3378FF40}
.match .slot.winner{background:linear-gradient(100deg,#3378FF20,#3378FF0d);color:var(--text)}
.reward-rules .reward-steps li{background:linear-gradient(135deg,#181b20,#13161a);border-color:#282d35;box-shadow:inset 0 1px 0 #ffffff04}
.rewards-card .social-placeholder{background:#101317}

/* Approved typography system: display headings / readable interface text. */
:root{--font-body:Arial,Helvetica,sans-serif;--font-display:'Barlow Condensed',Arial,sans-serif}
body,button,input,select,textarea{font-family:var(--font-body)}
.event-intro .event-title h1,.round-heading small{font-family:var(--font-display)}
.steps h2,.steps strong,.aside-title,.reward-steps strong{font-family:var(--font-body);font-weight:600;letter-spacing:0;line-height:1.4}
.download-button,.bracket-actions button{font-family:var(--font-body);font-weight:600;letter-spacing:0;line-height:1.4}
.slot,.roster-team .team-text strong,.champion-card h2{font-family:var(--font-body);letter-spacing:0;line-height:1.4}
.round-heading small{letter-spacing:.6px;line-height:1.25}
.champion-card::before,.champion-tag{font-family:var(--font-body);letter-spacing:.7px;line-height:1.5}
.community-label{font-family:var(--font-body);font-size:10px;letter-spacing:.5px;line-height:1.5}
.pill{letter-spacing:.6px}
.username-field,.progress,.reward-rules p,.social-placeholder p{font-family:var(--font-body);letter-spacing:0}
.reward-rules .reward-steps p{line-height:1.75}

/* Approved item 4: a gentle, one-time champion reveal. */
@keyframes champion-soft-reveal{from{opacity:0;transform:translateY(3px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes champion-soft-glow{0%{opacity:0;transform:scale(.85)}35%{opacity:.65}100%{opacity:0;transform:scale(1.2)}}
@media(prefers-reduced-motion:no-preference){
 .champion-reveal > .team-icon{animation:champion-soft-reveal .8s ease-out both}
 .champion-reveal h2,.champion-reveal .champion-tag{animation:champion-caption .5s ease-out .15s both}
 .champion-halo{width:200px;height:160px;left:50%;top:58px;margin:-80px 0 0 -100px;border:0;border-radius:50%;background:radial-gradient(ellipse,#3378FF55 0%,#3378FF20 42%,transparent 72%);box-shadow:none;animation:champion-soft-glow 1.3s ease-out both}
}

/* Champion card keeps an uninterrupted top edge. */
.champion-card::before{content:none;display:none}

.community-link{display:block;text-decoration:none;cursor:pointer}
.community-link:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

/* Optional trade destination, after the campaign participation area. */
.trade-section{margin:0 0 40px;padding-top:24px;border-top:1px solid var(--border)}
.trade-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px;background:var(--panel);border:1px solid #272b32;border-radius:var(--radius-panel);box-shadow:0 12px 32px #00000020}
.trade-copy h2{margin:0 0 8px;font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.4;letter-spacing:0;color:var(--text)}
.trade-copy p{margin:0;font-family:var(--font-body);font-size:12px;line-height:1.75;color:var(--muted)}
.trade-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;flex-shrink:0;padding:12px 22px;background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius-control);color:#fff;text-decoration:none;font-family:var(--font-body);font-size:14px;font-weight:600;line-height:1.4;box-shadow:inset 0 1px 0 #ffffff12}
.trade-button:hover{color:#fff;box-shadow:inset 0 0 0 1px #ffffff30}
.trade-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:700px){.trade-card{flex-direction:column;align-items:stretch;padding:24px;gap:20px}.trade-copy h2{font-size:13px}.trade-button{align-self:flex-start}}

/* Spherical terrain projection and a restrained atmospheric edge. */
.earth-globe{display:block;width:100%;height:100%}
.sphere-ready .earth-surface{display:none}
.earth-sphere.sphere-ready{transform:translateX(-50%);background:#030810;box-shadow:0 -1px 2px #87b7ff66,0 -5px 16px #3378FF15}
.earth-sphere.sphere-ready::after{background:linear-gradient(180deg,transparent,#03050970 28%,#030509 60%);box-shadow:inset 0 1px 3px #9cc4ff33}

/* Broader visible surface, with the title kept above the globe. */
.earth-sphere.sphere-ready{top:174px}
.earth-stage{mask-image:linear-gradient(transparent 22%,#000 48%,#000 78%,transparent 100%)}
.earth-sphere.sphere-ready::after{background:linear-gradient(180deg,transparent,#03050940 30%,#030509 65%);box-shadow:inset 0 1px 2px #9cc4ff22}
@media(max-width:700px){.earth-sphere.sphere-ready{top:142px}}

/* Keep night lights legible before the hero fades at its lower edge. */
.earth-stage{mask-image:linear-gradient(transparent 22%,#000 48%,#000 88%,transparent 100%)}

/* Lower the Earth without changing its lighting or rotation. */
.earth-sphere.sphere-ready{top:234px}
@media(max-width:700px){.earth-sphere.sphere-ready{top:192px}}

/* Text-only champion placeholder. */
.champion-card:not(.has-champion){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.champion-card:not(.has-champion) h2{margin:0;max-width:230px;text-align:center;line-height:1.45}
.champion-card:not(.has-champion) .champion-tag{margin:0;text-align:center}

.champion-reveal .champion-tag{animation:none!important}

/* Compact champion states with room for logo, name and caption. */
.champion-card{min-height:0;height:140px;box-sizing:border-box}
.champion-card.has-champion{height:200px;padding:22px 15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.champion-card.has-champion h2{margin:0}
.champion-card.has-champion .champion-tag{margin:0}
.champion-card.has-champion>.team-icon{flex-shrink:0}

/* One consistent numbered campaign flow. */
.share-section,.rewards-section,.trade-section{margin-top:32px;padding-top:26px;border-top:1px solid var(--border)}
.trade-section .steps h2{font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:0;margin:0}
.section-description{font-family:var(--font-body);font-size:13px;line-height:1.75;color:var(--muted);margin:14px 0 0}
.campaign-link{color:var(--accent);text-decoration:none}
.campaign-link:hover{text-decoration:underline;text-underline-offset:3px}
.campaign-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.rewards-card{display:flex;justify-content:center;align-items:center;padding:24px 0;background:none;border:0;box-shadow:none}
.trade-card{display:flex;justify-content:center;padding:24px 0;background:none;border:0;box-shadow:none}
@media(max-width:600px){.section-description{font-size:12px}.trade-section .steps h2{font-size:13px}}

/* Compact campaign layout, aligned with the bracket's visual rhythm. */
.campaign-grid{display:grid;grid-template-columns:3fr 2fr;gap:0;margin-top:24px;border-top:1px solid var(--border)}
.campaign-grid .share-section,.campaign-grid .rewards-section{margin:0;padding:24px 0;border-top:0;min-width:0}
.campaign-grid .share-section{padding-right:32px}
.campaign-grid .rewards-section{position:relative;border-left:1px solid var(--border);padding-left:28px;padding-right:152px;min-height:190px}
.campaign-grid .section-description{margin-top:12px;max-width:510px;font-size:12px;line-height:1.65}
.campaign-grid .download-area{display:flex;align-items:flex-end;justify-content:flex-start;gap:12px;padding:18px 0 0;text-align:left;flex-wrap:wrap}
.campaign-grid .username-field{width:180px;max-width:100%;margin:0}
.campaign-grid .download-button{margin:0;white-space:nowrap;padding:12px 18px;font-size:13px}
.campaign-grid .rewards-card{position:absolute;right:0;top:24px;margin:0;padding:0;display:block}
.campaign-grid .social-placeholder{min-width:0;width:128px}
.campaign-grid .community-link{margin:0 auto 8px;width:112px;height:112px}
.campaign-grid .community-qr{width:112px;height:112px}
.campaign-grid .community-qr img{width:199.02px;max-width:none;left:-43.49px;top:-121.26px}
.campaign-grid .social-placeholder strong{font-size:11px;line-height:1.4}
.campaign-grid .social-placeholder p{margin:4px 0 0;font-size:10px}
.trade-section{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:10px;align-items:center;margin:0 0 28px;padding:22px 24px;border:1px solid var(--border);border-radius:var(--radius-panel);background:var(--surface-raised)}
.trade-section>.steps{grid-column:1;grid-row:1}
.trade-section>.section-description{grid-column:1;grid-row:2;margin:0;font-size:12px}
.trade-section>.trade-card{grid-column:2;grid-row:1 / 3;margin:0;padding:0;min-height:0}
.trade-section .trade-button{padding:12px 20px;font-size:13px;white-space:nowrap}
@media(max-width:900px){
 .campaign-grid{grid-template-columns:1fr}
 .campaign-grid .share-section{padding-right:0}
 .campaign-grid .rewards-section{border-left:0;border-top:1px solid var(--border);padding-left:0;padding-right:152px;min-height:190px}
}
@media(max-width:500px){
 .trade-section{padding:20px 16px;grid-template-columns:1fr}
 .trade-section>.trade-card{grid-column:1;grid-row:3;justify-content:flex-start;margin-top:4px}
 .campaign-grid .download-area{gap:12px}
 .campaign-grid .username-field{width:160px}
 .campaign-grid .download-button{padding:12px 14px}
}

/* Explicit grid placement replaces the legacy QR positioning. */
.campaign-grid .rewards-section{display:grid;grid-template-columns:minmax(0,1fr) 128px;grid-template-rows:auto 1fr;column-gap:20px;row-gap:12px;padding:24px 0 24px 28px;align-items:start}
.campaign-grid .rewards-section>.steps{grid-column:1;grid-row:1;min-width:0}
.campaign-grid .rewards-section>.section-description{grid-column:1;grid-row:2;margin:0}
.campaign-grid .rewards-section>.rewards-card{position:static;grid-column:2;grid-row:1 / 3;width:128px;overflow:visible;background:none;border:0;box-shadow:none}
.campaign-grid .rewards-card .social-placeholder{width:128px;min-width:0;padding:0;border:0;background:none;gap:0;box-sizing:border-box}
.campaign-grid .download-area{display:grid;grid-template-columns:minmax(130px,180px) max-content;align-items:start;gap:12px;justify-content:start}
.campaign-grid .username-field{width:100%;max-width:none;position:relative}
.campaign-grid .download-area .download-button{width:auto;max-width:none;margin:22px 0 0;height:52px}
.campaign-grid #username-error:empty{display:none}
.trade-section>.trade-card{flex-direction:row;align-items:center;gap:0;border:0;box-shadow:none;background:none}
@media(max-width:900px){.campaign-grid .rewards-section{padding-left:0}}
@media(max-width:420px){
 .campaign-grid .download-area{grid-template-columns:1fr;width:100%}
 .campaign-grid .download-area .download-button{margin:0;width:100%}
 .campaign-grid .rewards-section{column-gap:14px}
}

/* Equal-width steps with a shared title, description and action rhythm. */
.campaign-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.campaign-grid .share-section{padding:28px 32px 28px 0;display:grid;grid-template-rows:auto auto 1fr;row-gap:12px;align-content:start}
.campaign-grid .rewards-section{padding:28px 0 28px 32px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:12px;min-height:0}
.campaign-grid .share-section>.steps,.campaign-grid .rewards-section>.steps{grid-column:1;grid-row:1}
.campaign-grid .section-description{margin:0;max-width:none;min-height:40px}
.campaign-grid .rewards-section>.section-description{grid-column:1;grid-row:2}
.campaign-grid .download-area{grid-row:3;margin:0;padding:8px 0 0;grid-template-columns:minmax(140px,220px) max-content;align-self:center;align-items:start}
.campaign-grid .rewards-section>.rewards-card{grid-column:1;grid-row:3;position:static;justify-self:start;align-self:center;width:auto;margin:0;padding:8px 0 0}
.campaign-grid .rewards-card .social-placeholder{width:112px;padding:0;gap:0}
.campaign-grid .community-link{margin:0;width:112px;height:112px}
@media(max-width:760px){
 .campaign-grid{grid-template-columns:minmax(0,1fr)}
 .campaign-grid .share-section{padding:24px 0}
 .campaign-grid .rewards-section{padding:24px 0;border-left:0;border-top:1px solid var(--border)}
 .campaign-grid .section-description{min-height:0}
}
@media(min-width:761px){.campaign-grid .rewards-section{border-left:1px solid var(--border);border-top:0}}
@media(max-width:1100px) and (min-width:761px){.campaign-grid .download-area{grid-template-columns:minmax(0,1fr);width:100%}.campaign-grid .download-area .download-button{margin:0;width:100%}}
@media(max-width:420px){.campaign-grid .download-area{grid-template-columns:minmax(0,1fr)}}

/* Campaign steps reuse the bracket toolbar's typography and controls. */
.campaign-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.campaign-grid .share-section,.campaign-grid .rewards-section{padding-top:24px;padding-bottom:24px}
.campaign-grid .steps h2,.trade-section .steps h2{font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.4;letter-spacing:0;color:var(--text);margin:0}
.campaign-grid .share-section{padding-right:32px}
.campaign-grid .rewards-section{grid-template-columns:minmax(0,1fr) 104px;grid-template-rows:auto 1fr;column-gap:24px;row-gap:12px;padding-left:32px}
.campaign-grid .rewards-section>.steps{grid-column:1 / -1;grid-row:1}
.campaign-grid .rewards-section>.section-description{grid-column:1;grid-row:2;align-self:start;padding-top:8px;min-height:0}
.campaign-grid .rewards-section>.rewards-card{grid-column:2;grid-row:2;align-self:start;justify-self:end;padding-top:8px;width:104px}
.campaign-grid .rewards-card .social-placeholder,.campaign-grid .community-link,.campaign-grid .community-qr{width:104px}
.campaign-grid .community-link,.campaign-grid .community-qr{height:104px}
.campaign-grid .community-qr img{width:184.74px;left:-40.37px;top:-112.55px}
.campaign-grid .download-area{grid-template-columns:minmax(140px,1fr) auto;gap:12px;width:100%;padding-top:8px;align-self:start}
.campaign-grid .username-field{font-size:12px;color:var(--silver)}
.campaign-grid .username-field input{height:42px;background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:6px;font-family:var(--font-body);font-size:14px}
.campaign-grid .download-area .download-button,.trade-section .trade-button{height:42px;box-sizing:border-box;padding:11px 17px;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:6px;font-family:var(--font-body);font-weight:600;font-size:12px;line-height:18px;box-shadow:none;white-space:nowrap}
.campaign-grid .download-button span{font-size:14px;margin-left:8px}
.campaign-grid .download-area .download-button{margin-top:22px;width:auto}
.campaign-grid .download-button:hover,.trade-section .trade-button:hover{background:#2867e6;border-color:#2867e6;transform:none}
.trade-section{border:0;border-top:1px solid var(--border);border-radius:0;background:none;box-shadow:none;padding:24px 0;margin:0 0 24px;column-gap:24px;row-gap:10px}
.trade-section>.section-description{color:var(--muted)}
@media(max-width:1000px){
 .campaign-grid{grid-template-columns:minmax(0,1fr)}
 .campaign-grid .share-section{padding-right:0}
 .campaign-grid .rewards-section{padding-left:0;border-left:0;border-top:1px solid var(--border)}
 .campaign-grid .download-area{grid-template-columns:minmax(140px,240px) auto;justify-content:start}
 .campaign-grid .rewards-section{grid-template-columns:minmax(0,1fr) 104px}
}
@media(max-width:600px){
 .campaign-grid .steps h2,.trade-section .steps h2{font-size:13px}
 .campaign-grid .download-area{grid-template-columns:minmax(0,1fr) auto}
 .campaign-grid .download-area .download-button{padding:11px 12px}
 .campaign-grid .rewards-section{column-gap:20px}
}
@media(max-width:380px){
 .campaign-grid .download-area{grid-template-columns:1fr}
 .campaign-grid .download-area .download-button{margin-top:0;width:100%}
}

/* Keep controls close to their copy rather than stretching across the panel. */
.campaign-grid{align-items:stretch}
.campaign-grid .share-section{display:flex;flex-direction:column;justify-content:flex-start;gap:0}
.campaign-grid .share-section>.section-description{margin-top:12px;min-height:0}
.campaign-grid .download-area{margin-top:20px;padding:0;grid-template-columns:minmax(160px,230px) auto;width:max-content;max-width:100%;align-self:flex-start}
.campaign-grid .rewards-section{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;gap:12px}
.campaign-grid .rewards-section>.steps{grid-column:1;grid-row:1}
.campaign-grid .rewards-section>.section-description{grid-column:1;grid-row:2;padding:0;max-width:340px;padding-right:0;margin:0}
.campaign-grid .rewards-section>.rewards-card{grid-column:1;grid-row:3;justify-self:start;padding:0;margin-top:8px}
.campaign-grid .rewards-section{grid-template-columns:104px minmax(0,340px);grid-template-rows:auto auto;column-gap:20px;row-gap:20px}
.campaign-grid .rewards-section>.steps{grid-column:1 / -1}
.campaign-grid .rewards-section>.rewards-card{grid-column:1;grid-row:2;margin:0}
.campaign-grid .rewards-section>.section-description{grid-column:2;grid-row:2;align-self:center}
@media(max-width:600px){.campaign-grid .download-area{width:100%;grid-template-columns:minmax(0,1fr) auto}.campaign-grid .rewards-section{grid-template-columns:104px minmax(0,1fr)}}
@media(max-width:380px){.campaign-grid .download-area{grid-template-columns:1fr}}

/* Center the content groups, retaining left-aligned typography. */
.campaign-grid{max-width:1160px;margin-left:auto;margin-right:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.campaign-grid .share-section{padding:24px 40px;display:flex;flex-direction:column;gap:0}
.campaign-grid .share-section>.section-description{margin:12px 0 0;min-height:40px}
.campaign-grid .download-area{margin-top:20px;width:100%;grid-template-columns:minmax(140px,1fr) auto}
.campaign-grid .rewards-section{padding:24px 40px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;row-gap:12px;align-content:start}
.campaign-grid .rewards-section>.steps{grid-column:1;grid-row:1}
.campaign-grid .rewards-section>.section-description{grid-column:1;grid-row:2;align-self:start;padding:0;margin:0;min-height:40px;max-width:none}
.campaign-grid .rewards-section>.rewards-card{grid-column:1;grid-row:3;justify-self:start;align-self:start;margin:8px 0 0;padding:0}
.trade-section{max-width:1160px;margin-left:auto;margin-right:auto;grid-template-columns:minmax(0,500px) auto;justify-content:center;column-gap:48px;padding:24px 40px}
@media(max-width:1000px){
 .campaign-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .campaign-grid .share-section,.campaign-grid .rewards-section{padding:24px}
 .campaign-grid .rewards-section{border-top:0;border-left:1px solid var(--border)}
 .campaign-grid .download-area{grid-template-columns:1fr}
 .campaign-grid .download-area .download-button{margin:0;width:100%}
 .trade-section{padding:24px;column-gap:32px}
}
@media(max-width:700px){
 .campaign-grid{grid-template-columns:1fr}
 .campaign-grid .share-section,.campaign-grid .rewards-section{padding:24px 0}
 .campaign-grid .rewards-section{border-left:0;border-top:1px solid var(--border)}
 .campaign-grid .section-description{min-height:0!important}
 .campaign-grid .download-area{grid-template-columns:minmax(0,1fr) auto}
 .campaign-grid .download-area .download-button{margin-top:22px;width:auto}
 .trade-section{padding:24px 0;grid-template-columns:minmax(0,1fr) auto;column-gap:24px}
 .trade-section>.trade-card{grid-column:2;grid-row:1 / 3}
}
@media(max-width:420px){
 .campaign-grid .download-area{grid-template-columns:1fr}
 .campaign-grid .download-area .download-button{margin:0;width:100%}
 .trade-section{grid-template-columns:1fr}
 .trade-section>.trade-card{grid-column:1;grid-row:3;justify-content:flex-start}
}

/* Match step 01 width; left-align copy and center each action group. */
.campaign-grid{max-width:none;width:100%;margin-left:0;margin-right:0}
.campaign-grid .share-section{padding-left:0;padding-right:32px}
.campaign-grid .rewards-section{padding-left:32px;padding-right:0}
.campaign-grid .download-area{width:auto;max-width:100%;align-self:center;justify-content:center;grid-template-columns:minmax(140px,230px) auto}
.campaign-grid .rewards-section>.rewards-card{justify-self:center}
.trade-section{max-width:none;width:100%;margin-left:0;margin-right:0;padding:24px 0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:0;justify-content:stretch}
.trade-section>.trade-card{grid-column:2;grid-row:1 / 3;width:100%;justify-content:center;justify-self:center}
@media(max-width:1000px) and (min-width:701px){
 .campaign-grid .download-area{grid-template-columns:minmax(0,230px);width:100%}
 .campaign-grid .download-area .download-button{width:100%;margin-top:0}
}
@media(max-width:700px){
 .campaign-grid .share-section,.campaign-grid .rewards-section{padding-left:0;padding-right:0}
 .campaign-grid .download-area{grid-template-columns:minmax(0,230px) auto}
 .trade-section{grid-template-columns:minmax(0,1fr)}
 .trade-section>.trade-card{grid-column:1;grid-row:3;justify-content:center;margin-top:12px}
}
@media(max-width:420px){
 .campaign-grid .download-area{grid-template-columns:minmax(0,1fr);width:100%;max-width:300px}
}

/* Three horizontal steps: copy left, action right. */
.campaign-grid{display:block;border:0;margin-top:24px;width:100%;max-width:none}
.campaign-grid .share-section,.campaign-grid .rewards-section{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:40px;row-gap:12px;border:0;border-top:1px solid var(--border);padding:24px 0;margin:0;min-height:0;align-items:center}
.campaign-grid .share-section>.steps,.campaign-grid .rewards-section>.steps{grid-column:1;grid-row:1}
.campaign-grid .share-section>.section-description,.campaign-grid .rewards-section>.section-description{grid-column:1;grid-row:2;margin:0;padding:0;min-height:0;max-width:660px;align-self:start}
.campaign-grid .download-area{grid-column:2;grid-row:1 / 3;display:grid;grid-template-columns:minmax(140px,230px) auto;width:auto;max-width:none;padding:0;margin:0;align-self:center;justify-self:end;gap:12px;align-items:start}
.campaign-grid .download-area .download-button{margin:22px 0 0;width:auto}
.campaign-grid .rewards-section>.rewards-card{grid-column:2;grid-row:1 / 3;justify-self:end;align-self:center;padding:0;margin:0}
.trade-section{grid-template-columns:minmax(0,1fr) auto;column-gap:40px;padding:24px 0}
.trade-section>.trade-card{grid-column:2;grid-row:1 / 3;justify-self:end;justify-content:flex-end;width:auto;margin:0}
@media(max-width:1000px){
 .campaign-grid .download-area{grid-template-columns:minmax(130px,180px) auto}
 .campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{column-gap:24px}
}
@media(max-width:700px){
 .campaign-grid .share-section{grid-template-columns:minmax(0,1fr)}
 .campaign-grid .download-area{grid-column:1;grid-row:3;justify-self:stretch;grid-template-columns:minmax(0,1fr) auto;margin-top:8px}
 .campaign-grid .rewards-section{grid-template-columns:minmax(0,1fr) 104px;column-gap:20px}
 .trade-section{grid-template-columns:minmax(0,1fr) auto;column-gap:20px}
 .trade-section>.trade-card{grid-column:2;grid-row:1 / 3}
}
@media(max-width:420px){
 .campaign-grid .download-area{grid-template-columns:minmax(0,1fr);width:100%;max-width:none}
 .campaign-grid .download-area .download-button{margin:0;width:100%}
 .trade-section{grid-template-columns:1fr}
 .trade-section>.trade-card{grid-column:1;grid-row:3;justify-self:end;margin-top:8px}
}

/* Equal-height campaign rows with centered right-hand action zones. */
.campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{
 box-sizing:border-box;min-height:180px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:32px;row-gap:12px;align-content:center;padding:24px 0;
}
.campaign-grid .share-section>.steps,.campaign-grid .rewards-section>.steps,.trade-section>.steps{align-self:end}
.campaign-grid .download-area{justify-self:center;align-self:center;grid-template-columns:minmax(140px,210px) auto;max-width:100%;margin:0}
.campaign-grid .rewards-section>.rewards-card{justify-self:center;align-self:center}
.trade-section>.trade-card{justify-self:center;align-self:center;justify-content:center;margin:0}
@media(max-width:1000px) and (min-width:701px){
 .campaign-grid .download-area{grid-template-columns:minmax(0,210px);gap:8px}
 .campaign-grid .download-area .download-button{margin:0;width:100%}
 .campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{min-height:220px}
}
@media(max-width:700px){
 .campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{min-height:260px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;row-gap:12px}
 .campaign-grid .download-area,.campaign-grid .rewards-section>.rewards-card,.trade-section>.trade-card{grid-column:1;grid-row:3;justify-self:center;align-self:center;margin:8px 0 0}
 .campaign-grid .download-area{width:auto;grid-template-columns:minmax(0,180px) auto;max-width:100%}
 .campaign-grid .download-area .download-button{margin-top:22px;width:auto}
}
@media(max-width:420px){
 .campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{min-height:300px}
 .campaign-grid .download-area{grid-template-columns:minmax(0,260px);width:100%;justify-content:center}
 .campaign-grid .download-area .download-button{margin:0;width:100%}
}

/* Align the lower steps close to their separators, like step 01. */
.campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{
 min-height:140px;padding:18px 0;align-content:start;align-items:start;grid-template-rows:auto 1fr;row-gap:10px;
}
.campaign-grid .share-section>.steps,.campaign-grid .rewards-section>.steps,.trade-section>.steps{align-self:start}
.campaign-grid .share-section>.section-description,.campaign-grid .rewards-section>.section-description,.trade-section>.section-description{align-self:start;margin:0}
.campaign-grid .download-area,.campaign-grid .rewards-section>.rewards-card,.trade-section>.trade-card{align-self:start;margin:0;padding-top:0}
@media(max-width:1000px) and (min-width:701px){
 .campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{min-height:166px}
}
@media(max-width:700px){
 .campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{min-height:0;padding:18px 0;grid-template-rows:auto auto auto;row-gap:10px}
 .campaign-grid .download-area,.campaign-grid .rewards-section>.rewards-card,.trade-section>.trade-card{margin-top:4px;align-self:start}
}

/* Shared action rail, with natural-height rows. */
.campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{min-height:0;height:auto;padding:20px 0;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:auto auto;column-gap:32px;row-gap:10px;align-content:start}
.campaign-grid .download-area,.campaign-grid .rewards-section>.rewards-card,.trade-section>.trade-card{grid-column:2;grid-row:1 / 3;width:360px;max-width:100%;justify-self:center;align-self:start;margin:0;padding:0;box-sizing:border-box}
.campaign-grid .download-area{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;justify-content:start}
.campaign-grid .username-field{width:100%;min-width:0}
.campaign-grid .download-area .download-button{margin:22px 0 0;width:auto;height:42px;padding:11px 14px}
.campaign-grid .rewards-card .social-placeholder{width:80px;min-width:0;align-items:flex-start;padding:0}
.campaign-grid .community-link,.campaign-grid .community-qr{width:80px;height:80px;margin:0}
.campaign-grid .community-qr img{width:142.11px;left:-31.05px;top:-86.58px}
.trade-section>.trade-card{display:flex;justify-content:flex-start;align-items:flex-start}
@media(max-width:800px){
 .campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
 .campaign-grid .download-area{grid-template-columns:1fr}
 .campaign-grid .download-area .download-button{margin:0;width:100%}
}
@media(max-width:600px){
 .campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:10px;padding:20px 0}
 .campaign-grid .download-area,.campaign-grid .rewards-section>.rewards-card,.trade-section>.trade-card{grid-column:1;grid-row:3;justify-self:start;max-width:100%;margin-top:6px}
 .campaign-grid .download-area{grid-template-columns:minmax(0,1fr) auto}
 .campaign-grid .download-area .download-button{margin-top:22px;width:auto}
}
@media(max-width:380px){.campaign-grid .download-area{grid-template-columns:1fr}.campaign-grid .download-area .download-button{margin:0;width:100%}}

/* Join instruction sits alongside the clickable code. */
.campaign-grid .rewards-card .social-placeholder{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:18px}
.campaign-grid .community-link{flex:0 0 80px}
.qr-join-caption{font-family:var(--font-body);font-size:12px;font-weight:500;line-height:1.5;color:var(--silver);text-decoration:none}
.qr-join-caption:hover{color:var(--accent)}
.qr-join-caption:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}

.community-join-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:42px;box-sizing:border-box;padding:11px 17px;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:6px;font-family:var(--font-body);font-size:12px;font-weight:600;line-height:18px;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.community-join-button:hover{background:#2867e6;border-color:#2867e6;color:#fff}
.community-join-button:focus-visible{outline:2px solid var(--silver);outline-offset:3px}

/* One shared action-button treatment across all steps. */
.bracket-actions #reset,.campaign-grid .download-area .download-button,.community-join-button,.trade-section .trade-button{
 display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;
 height:42px;min-height:42px;padding:0 18px;border:1px solid #ffffff18;border-radius:6px;
 background:#3378ff;color:#fff;font-family:var(--font-body);font-size:12px;font-weight:600;line-height:1;letter-spacing:0;
 box-shadow:inset 0 1px 0 #ffffff14,0 2px 5px #0002;text-decoration:none;white-space:nowrap;cursor:pointer;
 transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;transform:none;
}
.bracket-actions #reset:hover,.campaign-grid .download-area .download-button:hover,.community-join-button:hover,.trade-section .trade-button:hover{
 background:#2869ed;color:#fff;border-color:#ffffff30;box-shadow:inset 0 1px 0 #ffffff20,0 3px 8px #0003;transform:none;
}
.bracket-actions #reset:active,.campaign-grid .download-area .download-button:active,.community-join-button:active,.trade-section .trade-button:active{background:#225bd0;box-shadow:inset 0 1px 3px #0002;transform:none}
.bracket-actions #reset:focus-visible,.campaign-grid .download-area .download-button:focus-visible,.community-join-button:focus-visible,.trade-section .trade-button:focus-visible{outline:2px solid #9bbcff;outline-offset:3px}
.bracket-actions #reset:disabled,.campaign-grid .download-area .download-button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.campaign-grid .download-button span,.community-join-button span,.trade-section .trade-button>span[aria-hidden]{margin:0;font-size:15px;line-height:1}
.community-join-button,.trade-section .trade-button{width:152px}
.campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{min-height:0;height:auto;padding:20px 0;align-content:center;align-items:center;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:auto auto;column-gap:32px;row-gap:10px}
.campaign-grid .download-area,.campaign-grid .rewards-section>.rewards-card,.trade-section>.trade-card{width:360px;max-width:100%;justify-self:center;align-self:center;grid-column:2;grid-row:1 / 3;margin:0;padding:0}
.campaign-grid .download-area{grid-template-columns:minmax(0,180px) auto;gap:10px}
.campaign-grid .download-area .download-button{margin-top:22px;width:auto}
.campaign-grid .username-field input{height:42px}
.campaign-grid .rewards-card .social-placeholder,.trade-section>.trade-card{justify-content:flex-start}
@media(max-width:850px){
 .campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
 .campaign-grid .download-area{grid-template-columns:1fr}
 .campaign-grid .download-area .download-button{margin:0;width:100%}
}
@media(max-width:600px){
 .campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:10px}
 .campaign-grid .download-area,.campaign-grid .rewards-section>.rewards-card,.trade-section>.trade-card{grid-column:1;grid-row:3;justify-self:start;margin-top:6px}
 .campaign-grid .download-area{grid-template-columns:minmax(0,180px) auto}
 .campaign-grid .download-area .download-button{margin-top:22px;width:auto}
}
@media(max-width:380px){.campaign-grid .download-area{grid-template-columns:1fr}.campaign-grid .download-area .download-button{margin-top:0;width:100%}}

/* Compact text-only action buttons. */
.bracket-actions #reset,.campaign-grid .download-area .download-button,.community-join-button,.trade-section .trade-button{gap:0;height:40px;min-height:40px;padding:0 20px;line-height:1}
.bracket-actions #reset{width:auto;min-width:104px}
.community-join-button,.trade-section .trade-button{width:128px}
.campaign-grid .download-area,.campaign-grid .rewards-section>.rewards-card,.trade-section>.trade-card{width:340px;max-width:100%}
.campaign-grid .download-area{grid-template-columns:minmax(0,180px) 150px;gap:10px}
.campaign-grid .download-area .download-button{width:150px;padding:0 16px}
.campaign-grid .username-field input{height:40px}
@media(max-width:850px) and (min-width:601px){
 .campaign-grid .download-area{grid-template-columns:1fr}
 .campaign-grid .download-area .download-button{width:100%;margin-top:0}
}
@media(max-width:600px){
 .campaign-grid .download-area{grid-template-columns:minmax(0,1fr) 150px}
}
@media(max-width:380px){
 .campaign-grid .download-area{grid-template-columns:1fr}
 .campaign-grid .download-area .download-button{width:100%;margin-top:0}
}

/* Download action precedes the username field. */
.campaign-grid .download-area{grid-template-columns:150px minmax(0,180px)}
@media(max-width:850px) and (min-width:601px){.campaign-grid .download-area{grid-template-columns:1fr}}
@media(max-width:600px){.campaign-grid .download-area{grid-template-columns:150px minmax(0,1fr)}}
@media(max-width:380px){.campaign-grid .download-area{grid-template-columns:1fr}}

/* Equal action widths and consistent logo bounds. */
.campaign-grid .download-area .download-button,.community-join-button,.trade-section .trade-button{width:150px;min-width:150px}
.team-icon{--logo-scale:1}
.team-icon img{transform:none;object-fit:contain}
.roster-team .team-icon{width:44px;height:44px;flex:0 0 44px}
.slot .team-icon{width:30px;height:30px;flex:0 0 30px}
/* Remove white before inversion; screen blending breaks in animated layers. */
.team-logo-14 img{filter:url(#remove-white) invert(1);mix-blend-mode:normal}

/* Remove the decorative rule above the retired hero subtitle. */
.event-intro .event-title::after{display:none}

/* Additional clearance below the main title. */
.earth-sphere.sphere-ready{top:246px}
@media(max-width:700px){.earth-sphere.sphere-ready{top:202px}}
aside #roster{margin-top:0}

/* Validation expands its field and section continuously. */
.campaign-grid #username-error{display:block;max-height:48px;opacity:1;overflow:hidden;margin-top:0;transition:max-height .28s ease,opacity .2s ease,margin-top .28s ease}
.campaign-grid #username-error:empty{display:block;max-height:0;opacity:0;margin-top:-8px}
@media(prefers-reduced-motion:reduce){.campaign-grid #username-error{transition:none}}

/* Fixed knockout field: display-only roster. */
#roster .roster-team{cursor:default;pointer-events:none;}

/* Round 114: eight-team display, four cards per row. */
aside #roster{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:12px;
 overflow:visible;
 padding:0;
}
#roster .roster-team{
 display:flex;
 flex-direction:row;
 align-items:center;
 justify-content:flex-start;
 gap:16px;
 min-height:84px;
 padding:18px 22px;
 border-radius:8px;
 text-align:left;
}
#roster .roster-team .team-icon{
 width:40px;height:40px;flex:0 0 40px;
}
#roster .roster-team .team-text{width:auto;min-width:0;}
#roster .roster-team .team-text strong{
 justify-content:flex-start;
 min-height:0;
 font-size:14px;
 line-height:1.4;
 text-wrap:balance;
}
@media(max-width:900px){
 #roster .roster-team{padding:16px 12px;gap:10px;}
 #roster .roster-team .team-text strong{font-size:12px;}
 #roster .roster-team .team-icon{width:34px;height:34px;flex-basis:34px;}
}
@media(max-width:600px){
 aside #roster{gap:8px;}
 #roster .roster-team{
  flex-direction:column;justify-content:center;
  padding:12px 6px;gap:8px;min-height:106px;text-align:center;
 }
 #roster .roster-team .team-text strong{
  justify-content:center;font-size:10px;min-height:28px;
 }
 #roster .roster-team .team-icon{width:32px;height:32px;flex-basis:32px;}
}

/* Round 115: vertical team identity, expandable Swiss record. */
aside #roster{align-items:start;gap:12px;}
#roster .roster-team{
 flex-direction:column;justify-content:center;text-align:center;
 min-height:138px;padding:20px 12px 16px;gap:12px;
 pointer-events:auto;cursor:pointer;
 transition:border-color .2s ease,background .2s ease;
}
#roster .roster-team:hover{transform:none;border-color:#3378ff80;color:inherit;}
#roster .roster-team[aria-expanded="true"]{border-color:var(--accent);background:linear-gradient(155deg,#1b2942,#141a25);}
#roster .roster-team .team-icon{width:44px;height:44px;flex-basis:44px;}
#roster .roster-team .team-text strong{justify-content:center;min-height:20px;font-size:13px;}
#roster .team-record{
 display:grid;grid-template-rows:0fr;width:100%;opacity:0;
 margin-top:-12px;transition:grid-template-rows .25s ease,opacity .2s ease,margin .25s ease;
}
#roster .team-record>span{overflow:hidden;min-height:0;}
#roster .roster-team[aria-expanded="true"] .team-record{grid-template-rows:1fr;opacity:1;margin-top:0;}
#roster .record-label{display:block;color:var(--muted);font-size:10px;margin-bottom:5px;}
#roster .team-record strong{display:block;color:var(--accent);font-size:16px;letter-spacing:.03em;}
@media(max-width:600px){
 #roster .roster-team{min-height:120px;padding:14px 6px 12px;gap:10px;}
 #roster .roster-team .team-icon{width:34px;height:34px;flex-basis:34px;}
 #roster .roster-team .team-text strong{font-size:10px;min-height:28px;}
 #roster .team-record{margin-top:-10px;}
 #roster .team-record strong{font-size:13px;}
}

/* Round 116: a single row of eight teams. */
aside #roster{
 grid-template-columns:repeat(8,minmax(0,1fr));
 gap:10px;
}
#roster .roster-team{padding:18px 8px 14px;min-height:142px;}
#roster .roster-team .team-text strong{font-size:12px;min-height:34px;}
#roster .team-record strong{color:var(--text,#f0f2f7);}
#roster .record-win{color:#45d68b;}
#roster .record-loss{color:#ff6675;}
@media(max-width:900px){
 aside #roster{
  grid-template-columns:repeat(8,minmax(108px,1fr));
  overflow-x:auto;padding-bottom:8px;
 }
}

/* Round 117: username first, all three actions on the same right-hand rail. */
.campaign-grid .download-area{grid-template-columns:minmax(0,180px) 150px;}
.campaign-grid .rewards-card .social-placeholder,.trade-section>.trade-card{justify-content:flex-end;}
.campaign-grid .download-area .download-button{justify-self:end;}
@media(max-width:850px) and (min-width:601px){
 .campaign-grid .download-area{grid-template-columns:1fr;}
 .campaign-grid .download-area .download-button{margin-top:0;}
}
@media(max-width:600px){
 .campaign-grid .download-area{grid-template-columns:minmax(0,1fr) 150px;}
}
@media(max-width:380px){
 .campaign-grid .download-area{grid-template-columns:1fr;}
 .campaign-grid .download-area .download-button{margin-top:0;}
}

/* Round 118: shared action spacing and right-aligned control rail. */
.bracket-actions{gap:10px;}
.bracket-actions #reset,.bracket-actions .progress{margin-left:0;margin-right:0;}
.campaign-grid .download-area{column-gap:10px;}
.campaign-grid .download-area,
.campaign-grid .rewards-section>.rewards-card,
.trade-section>.trade-card{justify-self:end;}

/* Round 119: a little breathing room at the right edge. */
.campaign-grid .download-area,
.campaign-grid .rewards-section>.rewards-card,
.trade-section>.trade-card{
 margin-right:16px;
 max-width:calc(100% - 16px);
}

/* Round 120: match the toolbar action inset to the campaign controls. */
.toolbar .bracket-actions{margin-right:16px;}

/* Round 121 — fixed identity/record stage, restrained materials and type. */
:root{
 --control-highlight:inset 0 1px 0 #ffffff16;
 --card-highlight:inset 0 1px 0 #ffffff06;
}
#roster .roster-team{
 display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px 50px;
 justify-items:center;align-content:center;gap:12px;
 height:142px;min-height:142px;padding:16px 8px;
 border-radius:7px;border-color:#343a43;
 background:linear-gradient(155deg,#1b1f25,#15181d);
 box-shadow:var(--card-highlight);
 transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
#roster .roster-team .team-icon{grid-row:1;grid-column:1;}
#roster .roster-team .team-text,
#roster .roster-team .team-record{
 grid-row:2;grid-column:1;align-self:center;width:100%;
 margin:0;min-width:0;pointer-events:none;
 transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
#roster .roster-team .team-text{opacity:1;transform:translateY(0);visibility:visible;}
#roster .roster-team .team-text strong{min-height:0;line-height:1.4;}
#roster .roster-team .team-record{
 display:block;opacity:0;transform:translateY(5px);visibility:hidden;
}
#roster .roster-team[aria-expanded="true"] .team-text{
 opacity:0;transform:translateY(-5px);visibility:hidden;
}
#roster .roster-team[aria-expanded="true"] .team-record{
 margin:0;opacity:1;transform:translateY(0);visibility:visible;
}
#roster .roster-team[aria-expanded="true"]{
 border-color:#3378ff70;background:linear-gradient(155deg,#1b2639,#151c28);
}
#roster .roster-team:hover{border-color:#69758a;box-shadow:inset 0 1px 0 #ffffff0d;}
#roster .roster-team:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.match{border-radius:7px;box-shadow:var(--card-highlight);}
.slot{border-radius:5px;}
.slot.winner{box-shadow:inset 0 1px 0 #ffffff08;}
.bracket-actions #reset,
.campaign-grid .download-area .download-button,
.community-join-button,.trade-section .trade-button{
 border-radius:7px;background:var(--accent);border-color:#ffffff20;
 box-shadow:var(--control-highlight),0 2px 5px #0002;
 transition:background .16s ease,box-shadow .16s ease,transform .12s ease;
}
.bracket-actions #reset:hover:not(:disabled),
.campaign-grid .download-area .download-button:hover:not(:disabled),
.community-join-button:hover,.trade-section .trade-button:hover{
 background:#4384ff;box-shadow:inset 0 1px 0 #ffffff24,0 3px 8px #0003;transform:none;
}
.bracket-actions #reset:active:not(:disabled),
.campaign-grid .download-area .download-button:active:not(:disabled),
.community-join-button:active,.trade-section .trade-button:active{
 background:#2b6ce9;transform:translateY(1px);box-shadow:inset 0 1px 3px #0002;
}
.toolbar .steps,.campaign-grid .steps,.trade-section .steps{align-items:center;gap:12px;}
.toolbar .steps strong,.campaign-grid .steps h2,.trade-section .steps h2{
 font-family:var(--font-body);font-size:15px;font-weight:600;
 line-height:24px;letter-spacing:0;margin:0;
}
.toolbar .step-number,.campaign-grid .step-number,.trade-section .step-number{
 min-width:24px;line-height:24px;font-size:21px;
}
.campaign-grid .section-description,.trade-section .section-description{
 font-family:var(--font-body);font-size:13px;line-height:1.65;color:var(--muted);margin:0;
}
.campaign-grid .username-field{
 font-family:var(--font-body);font-size:12px;line-height:16px;gap:6px;color:var(--silver);
}
.campaign-grid .username-field input{
 font-family:var(--font-body);font-size:13px;line-height:20px;
 border-radius:7px;border-color:#414751;box-shadow:inset 0 1px 2px #0002;
}
.campaign-grid #username-error{font-family:var(--font-body);font-size:12px;line-height:18px;}
@media(max-width:600px){
 #roster .roster-team{height:128px;min-height:128px;grid-template-rows:34px 46px;gap:10px;padding:14px 6px;}
}
@media(prefers-reduced-motion:reduce){
 #roster .roster-team .team-text,#roster .roster-team .team-record{transition:none;}
}

/* Round 127: account details share one aligned column. */
.campaign-grid .identity-fields{display:flex;flex-direction:column;gap:12px;min-width:0;}
.campaign-grid .identity-fields .username-field{display:flex;flex-direction:column;min-width:0;}
.campaign-grid .download-area .download-button{align-self:center;margin-top:0;}
.campaign-grid #uid-error{
 display:block;max-height:48px;opacity:1;overflow:hidden;margin-top:0;
 font-family:var(--font-body);font-size:12px;line-height:18px;color:#ff6675;
 transition:max-height .28s ease,opacity .2s ease,margin-top .28s ease;
}
.campaign-grid #uid-error:empty{max-height:0;opacity:0;margin-top:-6px;}

/* Round 129: two account fields and one action on a shared row. */
.campaign-grid .share-section{grid-template-columns:minmax(0,1fr) minmax(0,520px);}
.campaign-grid .download-area{
 width:504px;grid-template-columns:minmax(0,1fr) 150px;
 gap:10px;align-items:start;
}
.campaign-grid .identity-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.campaign-grid .download-area .download-button{align-self:start;margin-top:0;}
@media(max-width:850px){
 .campaign-grid .share-section{grid-template-columns:1fr;grid-template-rows:auto auto auto;}
 .campaign-grid .share-section .download-area{grid-column:1;grid-row:3;margin-top:6px;}
}
@media(max-width:480px){
 .campaign-grid .download-area{grid-template-columns:minmax(0,1fr) 150px;}
 .campaign-grid .identity-fields{gap:6px;}
 .campaign-grid .identity-fields input{padding-left:7px;padding-right:7px;font-size:11px;}
}

/* Round 130: three equal-sized controls. */
.campaign-grid .download-area{
 width:470px;grid-template-columns:310px 150px;gap:10px;
}
.campaign-grid .identity-fields{grid-template-columns:150px 150px;gap:10px;}
.campaign-grid .identity-fields input{
 box-sizing:border-box;width:150px;min-width:0;height:40px;
 padding:0 12px;font-size:12px;
}
@media(max-width:520px){
 .campaign-grid .download-area{grid-template-columns:minmax(0,calc((100% - 20px) * 2 / 3 + 10px)) minmax(0,1fr);}
 .campaign-grid .identity-fields{grid-template-columns:repeat(2,minmax(0,1fr));}
 .campaign-grid .identity-fields input,
 .campaign-grid .download-area .download-button{width:100%;min-width:0;}
 .campaign-grid .identity-fields input{padding:0 6px;font-size:10px;}
 .campaign-grid .download-area .download-button{padding:0 6px;font-size:10px;}
}

/* Round 131: consistent validation feedback for both account fields. */
.campaign-grid #username-error,
.campaign-grid #uid-error{
 color:#ff6675;
 font-family:var(--font-body);
 font-size:12px;
 font-weight:400;
 line-height:18px;
}

/* Round 135: mobile campaign flow, same desktop typography and controls. */
@media(max-width:600px){
 .campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;
  min-height:0;height:auto;align-content:start;align-items:start;row-gap:10px;
 }
 .campaign-grid .share-section>.steps,.campaign-grid .rewards-section>.steps,.trade-section>.steps{grid-column:1;grid-row:1;}
 .campaign-grid .share-section>.section-description,.campaign-grid .rewards-section>.section-description,.trade-section>.section-description{grid-column:1;grid-row:2;}
 .campaign-grid .share-section .download-area,
 .campaign-grid .rewards-section>.rewards-card,.trade-section>.trade-card{
  grid-column:1;grid-row:3;justify-self:start;align-self:start;
  width:100%;max-width:100%;margin:6px 0 0;padding:0;
 }
 .campaign-grid .share-section .download-area{grid-template-columns:minmax(0,1fr);gap:12px;}
 .campaign-grid .identity-fields{grid-template-columns:minmax(0,1fr);gap:10px;}
 .campaign-grid .identity-fields input{width:100%;height:40px;padding:0 12px;font-size:12px;}
 .campaign-grid .download-area .download-button{
  grid-column:1;grid-row:2;justify-self:start;align-self:start;
  width:150px;min-width:150px;height:40px;margin:0;padding:0 16px;font-size:12px;
 }
 .campaign-grid .rewards-card .social-placeholder,.trade-section>.trade-card{justify-content:flex-start;}
}

/* Round 136: mobile identity fields match the action width. */
@media(max-width:600px){
 .campaign-grid .identity-fields{width:150px;max-width:100%;}
 .campaign-grid .identity-fields input{width:150px;max-width:100%;}
}

/* Round 137: a shared right edge for mobile campaign controls. */
@media(max-width:600px){
 .campaign-grid .identity-fields,
 .campaign-grid .download-area .download-button{justify-self:end;}
 .campaign-grid .rewards-card .social-placeholder,
 .trade-section>.trade-card{justify-content:flex-end;}
}

/* Round 138: wrap mobile copy beside the fixed-width action rail. */
@media(max-width:600px){
 .campaign-grid .share-section,.campaign-grid .rewards-section,.trade-section{
  grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:auto 1fr;
  column-gap:16px;align-items:start;
 }
 .campaign-grid .share-section>.steps,.campaign-grid .rewards-section>.steps,.trade-section>.steps{min-width:0;align-items:flex-start;}
 .campaign-grid .steps h2,.trade-section .steps h2{min-width:0;white-space:normal;overflow-wrap:anywhere;}
 .campaign-grid .step-number,.trade-section .step-number{flex-shrink:0;}
 .campaign-grid .section-description,.trade-section .section-description{min-width:0;white-space:normal;overflow-wrap:anywhere;}
 .campaign-grid .share-section .download-area,
 .campaign-grid .rewards-section>.rewards-card,.trade-section>.trade-card{
  grid-column:2;grid-row:1 / 3;align-self:center;justify-self:end;
  width:150px;max-width:100%;margin:0;
 }
}

/* Round 139: loading content stays within the existing button. */
.campaign-grid .download-area .download-button[aria-busy="true"]{gap:8px;}
.campaign-grid .download-area .download-button .export-spinner{
 display:block;box-sizing:border-box;flex:0 0 14px;width:14px;height:14px;
 margin:0;padding:0;border:2px solid #ffffff40;border-top-color:#fff;border-radius:50%;
 animation:export-spin .8s linear infinite;
}
.campaign-grid .download-area .download-button[aria-busy="true"]>span:not(.export-spinner){margin:0;font-size:inherit;}

/* Round 140: reveal the current globe only after its first drawn frame. */
.earth-sphere{opacity:0;transition:opacity .45s ease;}
.earth-sphere.sphere-rendered{opacity:1;}
.earth-surface{display:none;}

/* Round 142: alpha masks avoid filtered image tiles on mobile Safari. */
.team-icon:is(.team-logo-3,.team-logo-6,.team-logo-9,.team-logo-12){position:relative;}
.team-icon:is(.team-logo-3,.team-logo-6,.team-logo-9,.team-logo-12) img{visibility:hidden;filter:none;mix-blend-mode:normal;}
.team-icon:is(.team-logo-3,.team-logo-6,.team-logo-9,.team-logo-12)::before{
 content:'';position:absolute;inset:0;background:#fff;
 -webkit-mask:var(--team-mask) center/contain no-repeat;mask:var(--team-mask) center/contain no-repeat;
}
.team-logo-3{--team-mask:url('assets/teams/g2.svg');}
.team-logo-6{--team-mask:url('assets/teams/dk.svg');}
.team-logo-9{--team-mask:url('assets/teams/kc.svg');}
.team-logo-12{--team-mask:url('assets/teams/ig.png');}
@media(pointer:coarse){.slot,.roster-team{-webkit-tap-highlight-color:transparent;}}

/* Round 146: high-resolution transparent source; keep the original entrance. */
.event-intro .event-emblem{filter:brightness(0) invert(1);mix-blend-mode:normal;}