/* ══════════════════════════════════════════════════════════════════════
   ITALY LIONS — LIONS SPORTS, THE MINI-SITE SHEET   (il-sports.css)

   A team's page is meant to feel like the club's own website. This sheet
   is how, and it does it with exactly one mechanism: EIGHT CSS CUSTOM
   PROPERTIES, written onto the .ils-site element by themeStyle() in
   il-sports.js.

     --ils-p / --ils-s / --ils-a           the three team colours
     --ils-on-p / --ils-on-s / --ils-on-a  the readable ink on each
     --ils-ink-p / --ils-ink-a             the same colours, made safe to
                                           write words in on the dark page

   ── WHY THE VARIABLES ARE SCOPED AND NEVER GLOBAL ─────────────────
   They are declared on `.ils-site`, not on `:root`. So nothing a team
   picks can reach the Italy Lions navbar, the drawer, the bottom bar,
   the notification panel or any other page furniture. The brief's rule —
   a team may personalise its own page and may not break platform
   navigation or accessibility — is therefore enforced by WHERE the
   variables live, rather than by asking clubs to be careful.

   ── THE FIVE TEMPLATES ARE ONE SYSTEM ─────────────────────────────
   `data-tpl` on the same element changes SHAPES: corner radius, border
   weight, whether headings are serif, how the cover is masked. It never
   changes the variables. That is what lets a club switch from Modern
   Stadium to Club Heritage and keep its colours.

   ── THE ANIMATED TEAM NAME ────────────────────────────────────────
   One gradient, clipped to the text, swept by background-position.

   · No video, no canvas, no JavaScript animation loop, no library, and
     therefore no cost of any kind.
   · THREE SWEEPS AND IT STOPS (`animation-iteration-count: 3`). It is an
     arrival flourish, not a loop. Nothing is left animating behind a
     page the member scrolled away from — which is the exact failure the
     Feed announcement ticker had, where `animationend` never fired in a
     hidden tab and the bar froze.
   · `prefers-reduced-motion: reduce` removes the animation entirely and
     leaves the static gradient. The member asked; that is the end of it.
   · The sweep is only added at all when shineAllowedHere() in
     il-sports.js says the device is up for it (`.ils-shine` is the class
     that carries it, and the page adds it or does not).
   · `will-change` is deliberately NOT set. On a large heading it costs a
     permanent compositor layer for an animation that runs for three
     seconds — the opposite of the requirement.

   Website speed beats the effect. That is the instruction, and these
   five lines are what make it true rather than claimed.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ THE THEMED SCOPE ═════════════════════════════════════════════
   EVERY var() BELOW CARRIES A FALLBACK, and that is not belt-and-braces.
   These variables are declared on `.ils-site`, which only a team's
   mini-site has. The sports home, the create form and every empty state
   use the same .ils-btn / .ils-tab / .ils-h2 classes outside that scope,
   and without a fallback `background: var(--ils-a)` resolves to nothing:
   "Create a team" rendered as plain text on black with no button around
   it. The fallbacks are the Italy Lions palette, so anything outside a
   club's page looks like the platform — which is correct, because it is
   the platform.

   The fix is deliberately NOT a declaration on :root. That would hand a
   team's colours to the navbar, the drawer and the bottom bar, which is
   the single thing this scoping exists to prevent.
   ══════════════════════════════════════════════════════════════════ */
.ils-site{
  /* Fallbacks so a half-loaded page is still a page. Every one of these
     is overwritten inline by themeStyle(). */
  --ils-p:#1B4D89; --ils-s:#F2F4F7; --ils-a:#FFC53D;
  --ils-on-p:#ffffff; --ils-on-s:#111111; --ils-on-a:#111111;
  --ils-ink-p:#6f9fd8; --ils-ink-a:#FFC53D;
  --ils-radius:16px; --ils-edge:1px;
  --ils-head:'Inter',system-ui,sans-serif;
}
.ils-site[data-tpl="stadium"] { --ils-radius:18px; --ils-edge:1px; }
.ils-site[data-tpl="champion"]{ --ils-radius:14px; --ils-edge:2px; --ils-head:'Cinzel',serif; }
.ils-site[data-tpl="minimal"] { --ils-radius:6px;  --ils-edge:1px; }
.ils-site[data-tpl="arena"]   { --ils-radius:20px; --ils-edge:1px; }
.ils-site[data-tpl="heritage"]{ --ils-radius:10px; --ils-edge:2px; --ils-head:'Cinzel',serif; }

/* ══ THE COVER, AND THE OVERLAY THAT SITS ON IT ═══════════════════
   The uploaded image stays visible behind the information — the brief is
   explicit about that, so the scrim is a gradient that is transparent
   across the top two thirds and only darkens where words actually are.

   THE MARGIN IS NOT DECORATION. The Italy Lions navbar is `position:
   fixed` and about 72px tall, and every other page clears it through the
   100px padding on `.section` in styles.css. A cover has no .section
   around it, so without this the top 72px of a club's photograph sits
   behind the navbar — and on the create screen it was the H1 that
   disappeared under it. Measured in a browser, not guessed. */
.ils-cover{
  position:relative;height:300px;margin-top:72px;
  border-radius:0 0 var(--ils-radius,14px) var(--ils-radius,14px);
  background:#15130e center/cover no-repeat;overflow:hidden;
}
.ils-cover::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.82) 100%),
    linear-gradient(90deg,color-mix(in srgb,var(--ils-p,#1b4d89) 42%,transparent) 0%,transparent 62%);
}
/* color-mix() is not everywhere yet. The fallback is the flat colour at
   low opacity, which is the same idea with less finesse — never a
   missing scrim, because a missing scrim is unreadable white-on-white. */
@supports not (background:color-mix(in srgb,red 40%,transparent)){
  .ils-cover::after{
    background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.82) 100%);
  }
}
.ils-cover-in{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:20px 22px;display:flex;gap:18px;align-items:flex-end;
}
.ils-crest{
  width:104px;height:104px;flex:0 0 auto;border-radius:calc(var(--ils-radius,14px) * .8);
  background:#12100B center/cover no-repeat;overflow:hidden;
  border:2px solid var(--ils-edge-a,var(--ils-a,#C9A227));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ils-head,'Inter',system-ui,sans-serif);font-size:2.1rem;font-weight:900;color:var(--ils-ink-a,#C9A227);
}
.ils-crest img{width:100%;height:100%;object-fit:cover;display:block;}
.ils-cover-txt{min-width:0;flex:1 1 auto;}

/* ══ THE TEAM NAME ════════════════════════════════════════════════ */
.ils-name{
  font-family:var(--ils-head,'Inter',system-ui,sans-serif);
  font-size:clamp(1.5rem,7vw,3rem);
  font-weight:900;line-height:1.02;letter-spacing:.5px;
  text-transform:uppercase;
  color:#fff;
  /* The static form of the effect: the team's own gradient, clipped to
     the glyphs. This is what a reduced-motion member sees, and it is
     what everybody sees once the three sweeps are done. */
  background:linear-gradient(100deg,
    var(--ils-ink-a,#C9A227) 0%, #ffffff 26%, var(--ils-ink-a,#C9A227) 52%,
    var(--ils-ink-p,#e8e4dc) 78%, var(--ils-ink-a,#C9A227) 100%);
  background-size:200% 100%;
  background-position:0% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  /* A shadow cannot be drawn through clipped text, so the legibility
     backstop on a light cover photo is the scrim above, not this. */
  word-break:break-word;
}
/* A browser without background-clip:text would render the name
   INVISIBLE — transparent fill over a gradient it cannot clip. This is
   the guard: without support, the name is simply solid ink. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .ils-name{background:none;-webkit-text-fill-color:currentColor;color:#fff;}
}

/* THE SWEEP. Added by the page only when shineAllowedHere() agrees, and
   it runs three times and stops. */
.ils-name.ils-shine{
  animation:ils-sweep 2.6s ease-in-out 3;
}
@keyframes ils-sweep{
  0%   { background-position:  0% 0; }
  100% { background-position:200% 0; }
}
/* THE MEMBER'S SETTING WINS, whatever the page decided. Belt and braces
   on purpose: the class may be added by a cached older script. */
@media (prefers-reduced-motion: reduce){
  .ils-name.ils-shine{animation:none;}
}

.ils-tagline{
  margin-top:7px;color:rgba(255,255,255,.86);font-size:.94rem;font-weight:600;
}
.ils-where{margin-top:3px;color:rgba(255,255,255,.62);font-size:.84rem;}

/* ══ BADGES: RANK, VERIFICATION, FOLLOWERS ════════════════════════ */
.ils-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;}
.ils-badge{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:999px;padding:5px 13px;font-size:.74rem;font-weight:800;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.86);white-space:nowrap;
}
.ils-badge.rank{
  background:var(--ils-a,#C9A227);border-color:transparent;color:var(--ils-on-a,#111);
  font-weight:900;letter-spacing:.3px;
}
.ils-badge.team{background:var(--ils-p,#1b4d89);border-color:transparent;color:var(--ils-on-p,#fff);}
.ils-badge.up{color:#5ad19a;border-color:rgba(90,209,154,.4);}
.ils-badge.down{color:#e88;border-color:rgba(232,136,136,.4);}
.ils-badge.tick{background:rgba(201,162,39,.92);border-color:transparent;color:#111;}
.ils-badge.unverified{color:#c9b98a;border-color:rgba(201,162,39,.32);}

.ils-tick{color:#C9A227;font-size:.82em;vertical-align:middle;}

/* ══ ACTIONS ══════════════════════════════════════════════════════ */
.ils-actions{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 4px;}
.ils-btn{
  background:var(--ils-a,#C9A227);color:var(--ils-on-a,#111);border:0;
  border-radius:calc(var(--ils-radius,14px) * .55);
  padding:10px 18px;font-weight:800;font-size:.84rem;font-family:inherit;
  cursor:pointer;text-decoration:none;display:inline-block;
}
.ils-btn:hover{filter:brightness(1.08);}
.ils-btn.ghost{
  background:transparent;color:#fff;
  border:var(--ils-edge,1px) solid var(--ils-edge-a,var(--ils-a,#C9A227));
}
.ils-btn.plain{background:transparent;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.18);}
.ils-btn.small{padding:6px 13px;font-size:.77rem;}
.ils-btn[disabled]{opacity:.5;cursor:default;}

/* ══ TABS ═════════════════════════════════════════════════════════ */
.ils-tabs{
  display:flex;gap:6px;overflow-x:auto;margin:20px 0 16px;
  padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.ils-tabs::-webkit-scrollbar{display:none;}
.ils-tab{
  flex:0 0 auto;background:transparent;border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.66);border-radius:999px;padding:8px 16px;
  font-size:.8rem;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;
}
.ils-tab:hover{color:#fff;border-color:var(--ils-edge-a,var(--ils-a,#C9A227));}
.ils-tab.on{background:var(--ils-p,#1b4d89);border-color:transparent;color:var(--ils-on-p,#fff);}

/* ══ PANELS AND STAT CARDS ════════════════════════════════════════ */
.ils-panel{
  background:#12100B;border:var(--ils-edge,1px) solid rgba(255,255,255,.10);
  border-radius:var(--ils-radius,14px);padding:18px;margin-bottom:16px;
}
.ils-panel.tint{
  border-color:color-mix(in srgb,var(--ils-a,#C9A227) 34%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ils-p,#1b4d89) 12%,#12100B),#12100B);
}
@supports not (background:color-mix(in srgb,red 40%,transparent)){
  .ils-panel.tint{border-color:rgba(255,255,255,.16);background:#12100B;}
}
.ils-h2{
  font-family:var(--ils-head,'Inter',system-ui,sans-serif);font-size:1.02rem;font-weight:800;color:#fff;
  margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.ils-h2::before{
  content:'';width:4px;height:16px;border-radius:2px;background:var(--ils-a,#C9A227);flex:0 0 auto;
}
.ils-muted{color:#9a958c;font-size:.86rem;line-height:1.6;}

.ils-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.ils-stat{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
  border-radius:calc(var(--ils-radius,14px) * .7);padding:13px 14px;
}
.ils-stat .n{
  font-family:var(--ils-head,'Inter',system-ui,sans-serif);font-size:1.42rem;font-weight:900;
  color:var(--ils-ink-a,#C9A227);line-height:1.1;
}
.ils-stat .l{font-size:.72rem;color:#9a958c;margin-top:3px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;}

.ils-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.87rem;}
.ils-kv dt{color:#9a958c;font-weight:700;}
.ils-kv dd{color:#e8e4dc;margin:0;word-break:break-word;}

/* ══ THE SQUAD ════════════════════════════════════════════════════ */
.ils-squad{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px;}
.ils-player{
  display:flex;gap:12px;align-items:center;text-decoration:none;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
  border-radius:calc(var(--ils-radius,14px) * .7);padding:11px 13px;position:relative;
}
.ils-player:hover{border-color:var(--ils-edge-a,var(--ils-a,#C9A227));}
.ils-player .av{
  width:46px;height:46px;flex:0 0 auto;border-radius:50%;
  background:#241f16 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:var(--ils-ink-a,#C9A227);font-size:.95rem;
}
.ils-player .who{min-width:0;flex:1 1 auto;}
/* DISPLAY:BLOCK, AND IT IS NOT COSMETIC. These are <span>s, so they
   defaulted to inline — where white-space, overflow and text-overflow do
   NOTHING. Two consequences, and the first hid the second for two phases:
   a long role wrapped and LOOKED like two lines, so nobody noticed that a
   short one (Accepted) sat on the same line as the name and ran into it;
   and the ellipsis every long club name was supposed to get never worked
   at all. Found on the tournament page, where every status is one word. */
.ils-player .nm{display:block;color:#fff;font-weight:700;font-size:.88rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ils-player .rl{display:block;color:#9a958c;font-size:.75rem;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ils-player .no{
  font-family:var(--ils-head,'Inter',system-ui,sans-serif);font-size:1.25rem;font-weight:900;
  color:var(--ils-ink-p,#e8e4dc);flex:0 0 auto;opacity:.9;
}
.ils-player.invited{border-style:dashed;opacity:.72;}

/* ══ LOOKING FOR, AND WHO PAYS FOR IT ═════════════════════════════ */
.ils-needs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px;}
.ils-need{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
  border-radius:calc(var(--ils-radius,14px) * .6);}
.ils-need .ic{font-size:1.1rem;line-height:1.2;flex:0 0 auto;}
.ils-need .tx{min-width:0;}
.ils-need .tx b{display:block;color:#fff;font-size:.85rem;font-weight:700;}
.ils-need .tx i{display:block;font-style:normal;color:#9a958c;font-size:.75rem;margin-top:2px;}

.ils-sponsors{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;}
.ils-sponsor{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;
  padding:14px 12px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09);border-radius:calc(var(--ils-radius,14px) * .6);}
.ils-sponsor:hover{border-color:var(--ils-edge-a,var(--ils-a,#C9A227));}
.ils-sponsor .lg{width:56px;height:56px;border-radius:12px;background:#0d0b07 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-weight:900;
  color:var(--ils-ink-a,#C9A227);font-size:.95rem;flex:0 0 auto;}
.ils-sponsor .nm{color:#fff;font-weight:700;font-size:.82rem;text-align:center;line-height:1.25;}
.ils-sponsor .lv{color:var(--ils-ink-a,#C9A227);font-size:.68rem;font-weight:800;
  letter-spacing:.4px;text-align:center;text-transform:uppercase;}

/* ══ A CLUB'S NEWS ROW ════════════════════════════════════════════
   A post lives in the Feed; this is only a way back to it. Deliberately
   plain — a second, competing rendering of a post is how two surfaces
   start disagreeing about what a post looks like. */
.ils-newsrow{display:flex;gap:12px;align-items:flex-start;text-decoration:none;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);}
.ils-newsrow:last-child{border-bottom:0;}
.ils-newsrow .pic{width:62px;height:62px;flex:0 0 auto;border-radius:9px;
  background:#0d0b07 center/cover no-repeat;}
.ils-newsrow .bd{min-width:0;}
.ils-newsrow .tx{display:block;color:#e8e4dc;font-size:.85rem;line-height:1.5;}
.ils-newsrow .mt{display:block;color:#9a958c;font-size:.73rem;margin-top:4px;}

/* ══ THE COUNTDOWN ════════════════════════════════════════════════
   Big numbers, and nothing that moves. The countdown repaints once a
   minute until the last hour — there is no animation here on purpose,
   because a pulsing clock beside an already-animated team name is two
   things competing for the same attention. */
.ils-cd{
  display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
  margin:16px 0 4px;padding:14px 16px;border-radius:var(--ils-radius,14px);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);
}
.ils-cd .lbl{
  width:100%;font-size:.7rem;font-weight:900;letter-spacing:1.6px;
  color:var(--ils-ink-a,#C9A227);margin-bottom:2px;
}
.ils-cd .u{display:flex;flex-direction:column;align-items:center;min-width:58px;}
.ils-cd .u b{
  font-family:var(--ils-head,'Inter',system-ui,sans-serif);
  font-size:2.1rem;font-weight:900;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
}
.ils-cd .u i{font-style:normal;font-size:.63rem;font-weight:800;letter-spacing:1px;
  color:#9a958c;margin-top:4px;}
.ils-cd.small{margin:0;padding:8px 10px;background:none;border:0;gap:7px;}
.ils-cd.small .u{min-width:40px;}
.ils-cd.small .u b{font-size:1.15rem;}
.ils-cd.small .u i{font-size:.55rem;}
.ils-cd-done{
  margin:16px 0 4px;padding:11px 15px;border-radius:var(--ils-radius,14px);
  background:rgba(90,209,154,.10);border:1px solid rgba(90,209,154,.35);
  color:#5ad19a;font-weight:800;font-size:.85rem;
}

/* ══ A TOURNAMENT IN A LIST ═══════════════════════════════════════ */
.ils-tour{
  display:flex;gap:14px;align-items:center;justify-content:space-between;
  text-decoration:none;margin-bottom:10px;padding:14px 16px;
  background:#12100B;border:1px solid rgba(255,255,255,.10);
  border-radius:var(--ils-radius,14px);
}
.ils-tour:hover{border-color:rgba(201,162,39,.45);}
.ils-tour-b{min-width:0;flex:1 1 auto;}
.ils-tour .nm{color:#fff;font-weight:800;font-size:.95rem;line-height:1.25;}
.ils-tour .sb{color:var(--ils-ink-a,#C9A227);font-size:.76rem;font-weight:700;margin-top:3px;}
.ils-tour .wh{color:#9a958c;font-size:.76rem;margin-top:2px;}

/* ══ THE TROPHY CABINET ═══════════════════════════════════════════
   A verified trophy and a club's own claim are drawn as the SAME shape
   in the SAME grid, and told apart by colour and by a word. That is
   deliberate: making the unverified ones small or grey would read as the
   platform sneering at clubs for entering their own history, and hiding
   them would punish the honest ones. What separates them is the gold
   edge, the tick, and a badge that says in words what it means. */
.ils-cabinet{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.ils-trophy{
  position:relative;padding:14px 15px 13px;border-radius:calc(var(--ils-radius,14px) * .8);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);
  display:flex;flex-direction:column;gap:3px;overflow:hidden;
}
.ils-trophy.ok{
  border-color:color-mix(in srgb,var(--ils-a,#C9A227) 42%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ils-a,#C9A227) 9%,transparent),rgba(255,255,255,.02));
}
@supports not (background:color-mix(in srgb,red 40%,transparent)){
  .ils-trophy.ok{border-color:rgba(201,162,39,.42);background:rgba(201,162,39,.07);}
}
.ils-trophy.claim{border-style:dashed;}
.ils-trophy .pic{height:96px;margin:-14px -15px 10px;background:#0d0b07 center/cover no-repeat;}
.ils-trophy .yr{
  font-family:var(--ils-head,'Inter',system-ui,sans-serif);font-size:1.5rem;font-weight:900;
  line-height:1;color:var(--ils-ink-a,#C9A227);
}
.ils-trophy .ti{color:#fff;font-weight:800;font-size:.9rem;line-height:1.25;margin-top:4px;}
.ils-trophy .po{
  font-size:.72rem;font-weight:900;letter-spacing:1.2px;margin-top:5px;
  color:var(--ils-ink-a,#C9A227);
}
.ils-trophy.claim .po{color:#9a958c;}
.ils-trophy .me{color:#9a958c;font-size:.75rem;margin-top:3px;}
.ils-trophy .de{color:#c2bdb4;font-size:.78rem;line-height:1.5;margin-top:7px;}
.ils-trophy .st{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:10px;}
/* A badge is nowrap everywhere else, because a rank or a follower count
   reads badly broken across two lines. "Confirmed by the tournament
   organiser" is a SENTENCE, and nowrap pushed it straight out of the
   card — clipped mid-word at the edge, seen in the browser. Inside a
   trophy card the badge wraps.
   line-height comes with it: a wrapped pill with no leading is two lines
   of text jammed together. */
.ils-trophy .st .ils-badge{white-space:normal;line-height:1.35;text-align:left;}

/* ══ THE TEAM CARD (used in every list) ═══════════════════════════ */
.ils-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.ils-card{
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  background:#12100B;border:1px solid rgba(255,255,255,.10);
  border-radius:14px;transition:border-color .18s,transform .18s;
}
.ils-card:hover{border-color:var(--ils-edge-a,var(--ils-a,#C9A227));transform:translateY(-2px);}
.ils-card-cover{
  height:104px;position:relative;flex:0 0 auto;
  background:var(--ils-p,#1b4d89) center/cover no-repeat;
}
.ils-card-cover::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.62));
}
.ils-card-sport{
  position:absolute;top:8px;left:8px;z-index:2;
  background:rgba(0,0,0,.55);color:#fff;border-radius:999px;
  padding:3px 10px;font-size:.68rem;font-weight:800;
}
.ils-card-rank{
  position:absolute;top:8px;right:8px;z-index:2;
  background:var(--ils-a,#C9A227);color:var(--ils-on-a,#111);border-radius:999px;
  padding:3px 10px;font-size:.68rem;font-weight:900;
}
.ils-card-body{display:flex;gap:11px;align-items:center;padding:12px 13px 14px;}
.ils-card-crest{
  width:44px;height:44px;flex:0 0 auto;border-radius:11px;overflow:hidden;
  background:#0d0b07;border:1px solid var(--ils-edge-a,var(--ils-a,#C9A227));
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.9rem;color:var(--ils-ink-a,#C9A227);
}
.ils-card-crest img{width:100%;height:100%;object-fit:cover;display:block;}
.ils-card-txt{min-width:0;}
.ils-card-name{color:#fff;font-weight:800;font-size:.92rem;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ils-card-sub{color:var(--ils-ink-a,#C9A227);font-size:.75rem;margin-top:2px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ils-card-where{color:#9a958c;font-size:.73rem;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ══ THE THEME EDITOR ═════════════════════════════════════════════ */
.ils-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.ils-tpl{
  text-align:left;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.03);border:2px solid rgba(255,255,255,.10);
  border-radius:12px;padding:11px 12px;color:#fff;
}
.ils-tpl.on{border-color:#C9A227;}
.ils-tpl .sw{display:flex;gap:5px;margin-bottom:8px;}
.ils-tpl .sw i{width:20px;height:20px;border-radius:6px;display:block;
  border:1px solid rgba(255,255,255,.2);}
/* display:block, for the third time in this sheet. These are <span>s
   inside a <button>, so they default to inline and sit on ONE line —
   "Modern StadiumBig cover, wide bands". See the note on .ils-player .nm
   below: a long note wrapped and looked deliberate, which is how this
   survived until somebody read a short one. */
.ils-tpl .nm{display:block;font-weight:800;font-size:.83rem;}
.ils-tpl .nt{display:block;color:#9a958c;font-size:.71rem;margin-top:2px;line-height:1.4;}
.ils-swatches{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;}
.ils-swatch label{display:block;font-size:.72rem;color:#9a958c;font-weight:700;margin-bottom:5px;}
.ils-swatch input[type=color]{
  width:64px;height:38px;border:1px solid rgba(255,255,255,.16);
  border-radius:9px;background:transparent;cursor:pointer;padding:2px;
}
.ils-contrast{
  margin-top:12px;font-size:.79rem;line-height:1.6;color:#c9b98a;
  border-left:3px solid rgba(201,162,39,.5);padding-left:11px;
}

/* ══ FORMS ════════════════════════════════════════════════════════ */
.ils-form{display:grid;gap:14px;}
.ils-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ils-field label{display:block;font-size:.76rem;font-weight:700;color:#9a958c;margin-bottom:5px;}
.ils-field input,.ils-field select,.ils-field textarea{
  width:100%;background:#0d0b07;border:1px solid rgba(255,255,255,.14);
  color:#fff;padding:11px 13px;border-radius:9px;font-family:inherit;
  font-size:.88rem;outline:none;box-sizing:border-box;
}
.ils-field input:focus,.ils-field select:focus,.ils-field textarea:focus{border-color:#C9A227;}
.ils-field textarea{min-height:110px;resize:vertical;}
.ils-hint{font-size:.73rem;color:#7d7871;margin-top:5px;line-height:1.5;}
.ils-err{
  display:none;background:rgba(192,57,43,.14);border:1px solid rgba(192,57,43,.4);
  color:#f0b7b1;border-radius:9px;padding:11px 13px;font-size:.83rem;line-height:1.5;
}
.ils-slugbox{display:flex;align-items:center;gap:0;}
.ils-slugbox .pre{
  background:#0a0806;border:1px solid rgba(255,255,255,.14);border-right:0;
  color:#7d7871;padding:11px 4px 11px 12px;border-radius:9px 0 0 9px;
  font-size:.82rem;white-space:nowrap;
}
.ils-slugbox input{border-radius:0 9px 9px 0;}

/* ══ CHIPS AND THE DIRECTORY CONTROLS ═════════════════════════════ */
.ils-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.ils-chip{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  color:#9a958c;border-radius:999px;padding:7px 14px;font-size:.79rem;
  font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;
}
.ils-chip:hover{border-color:rgba(201,162,39,.45);color:#fff;}
.ils-chip.on{background:linear-gradient(135deg,#C9A227,#8B6914);border-color:transparent;color:#111;}
.ils-chip b{font-weight:900;opacity:.7;margin-left:5px;}
.ils-controls{display:grid;grid-template-columns:1fr auto auto;gap:10px;margin-bottom:14px;}
.ils-controls input,.ils-controls select{
  background:#12100B;border:1px solid rgba(255,255,255,.12);color:#fff;
  padding:11px 14px;border-radius:9px;font-family:inherit;font-size:.88rem;outline:none;
}
.ils-controls input:focus,.ils-controls select:focus{border-color:#C9A227;}

.ils-empty{grid-column:1/-1;text-align:center;padding:52px 20px;color:#9a958c;}
.ils-empty .b{font-size:2.4rem;margin-bottom:12px;}
.ils-empty .t{font-size:1rem;font-weight:700;color:#fff;margin-bottom:7px;}
.ils-loading{text-align:center;padding:90px 20px;color:#9a958c;}

/* ══ THE LEADERBOARD ══════════════════════════════════════════════ */
.ils-board{display:flex;flex-direction:column;gap:1px;}
.ils-board-row{
  display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
  padding:11px 13px;background:rgba(255,255,255,.02);text-decoration:none;
}
.ils-board-row:first-child{border-radius:10px 10px 0 0;}
.ils-board-row:last-child{border-radius:0 0 10px 10px;}
.ils-board-row:hover{background:rgba(255,255,255,.05);}
.ils-board-row .pos{
  font-family:var(--ils-head,'Inter');font-size:1.1rem;font-weight:900;
  color:#C9A227;text-align:center;
}
/* And here, where it mattered most: the rankings screen is the most
   public page in the module, and the club name and its city were
   sharing a line. Found at 375px in the Phase 6 pass, with data in the
   table for the first time. */
.ils-board-row .nm{display:block;color:#fff;font-weight:700;font-size:.88rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ils-board-row .ct{display:block;color:#9a958c;font-size:.74rem;margin-top:1px;}
.ils-board-row .pt{color:#c9b98a;font-weight:800;font-size:.8rem;white-space:nowrap;}
.ils-board-row.me{background:rgba(201,162,39,.1);}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — 375px IS THE TARGET, NOT AN AFTERTHOUGHT

   Four things go wrong on a narrow phone and each has a line here:
   the huge team name, the crest crowding it, the cover getting taller
   than the screen, and any grid with a fixed minmax overflowing.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .ils-cover{height:216px;}
  .ils-cover-in{padding:14px 15px;gap:12px;align-items:flex-end;}
  .ils-crest{width:66px;height:66px;font-size:1.4rem;}
  /* clamp() already scales the name; this caps it on the narrowest
     phones, where 7vw of a 320px screen still wraps a long club name to
     four lines. */
  .ils-name{font-size:clamp(1.22rem,6.2vw,1.72rem);letter-spacing:.2px;}
  .ils-tagline{font-size:.83rem;margin-top:5px;}
  .ils-where{font-size:.76rem;}
  .ils-badges{margin-top:9px;gap:6px;}
  .ils-badge{font-size:.68rem;padding:4px 10px;}
  .ils-row{grid-template-columns:1fr;}
  .ils-controls{grid-template-columns:1fr;}
  .ils-grid{grid-template-columns:1fr;}
  /* A squad card at 230px minimum overflows a 375px viewport once the
     page's own 16px gutters are counted. One column is correct here —
     the brief asks for squad cards that work vertically. */
  .ils-squad{grid-template-columns:1fr;}
  /* A 230px trophy card overflows 375px once the page gutters are counted,
     exactly as the squad card does. */
  .ils-cabinet{grid-template-columns:1fr;}
  /* The countdown drops to two units a row rather than scrolling. */
  .ils-cd{gap:8px;padding:12px;}
  .ils-cd .u{min-width:46px;}
  .ils-cd .u b{font-size:1.6rem;}
  .ils-tour{flex-direction:column;align-items:flex-start;gap:8px;}
  .ils-needs{grid-template-columns:1fr;}
  .ils-sponsors{grid-template-columns:1fr 1fr;}
  .ils-stats{grid-template-columns:1fr 1fr;}
  .ils-panel{padding:14px;}
  .ils-board-row{grid-template-columns:34px 1fr auto;gap:9px;padding:10px;}
}
/* Nothing in this module may scroll the page sideways. The tab strip and
   any wide table scroll INSIDE themselves instead. */
.ils-site,.ils-wrap{max-width:100%;overflow-x:hidden;}
.ils-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}