/* IFL manager / panel - the same visual language as ifl.gg (Ledge's site):
   near-black olive, cream text, gold #c7a766, Impact display headings,
   spaced-caps labels, dark panels with hairline borders, banner art. */
:root{
  --bg:#0b0c09;--bg2:#070806;--panel:#151610;--panel2:#11120e;--line:#34352b;--line2:#2d2e27;
  --fg:#eee9dc;--muted:#858272;--muted2:#b7b1a0;--gold:#c7a766;--gold2:#e0c07a;--bad:#d9705d;--ok:#8fbf7a;--warn:#e0b448;
  --display:Impact,"Arial Black",Haettenschweiler,sans-serif;--body:Arial,Helvetica,sans-serif
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.6 var(--body)}
a{color:var(--gold);text-decoration:none}a:hover{color:var(--gold2)}

/* ---- chrome */
.topbar{height:31px;border-bottom:1px solid #28291f;padding:8px 4%;font-size:9px;letter-spacing:2px;color:var(--muted);display:flex;justify-content:space-between;text-transform:uppercase}
.topbar span{color:#686758}
header.nav{height:76px;padding:0 4%;display:flex;align-items:center;gap:25px;border-bottom:1px solid var(--line);background:#0b0c09ee;position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:12px;color:var(--gold);letter-spacing:2px;font-size:11px;font-weight:bold;text-transform:uppercase}
.brand img{display:block;width:54px;height:54px;object-fit:contain}
.brand b{color:var(--fg);font-weight:bold}
nav.links{display:flex;gap:14px;margin-left:auto;align-items:center;text-transform:uppercase;font-size:10px;font-weight:bold;letter-spacing:.8px;flex-wrap:wrap;justify-content:flex-end}
nav.links a{color:var(--fg);white-space:nowrap;padding:6px 0;border-bottom:1px solid transparent}
nav.links a:hover,nav.links a.on{color:var(--gold);border-bottom-color:var(--gold)}
.navright{display:flex;gap:14px;align-items:center;font-size:10px;text-transform:uppercase;font-weight:bold;letter-spacing:1px}
.navright .who{color:var(--muted)}.navright .who em{color:var(--gold);font-style:normal}
main{max-width:1320px;margin:0 auto;padding:0 4% 60px}
footer{border-top:1px solid var(--line);padding:40px 7%;display:flex;gap:25px;justify-content:space-between;color:#777363;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-top:40px}

/* ---- page head with banner art */
.pagehead{position:relative;margin:0 -4.3% 34px;padding:54px 4.3% 34px;border-bottom:1px solid #4a412f;overflow:hidden;background:var(--bg2)}
.pagehead .art{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(5,6,5,.97) 0%,rgba(5,6,5,.72) 45%,rgba(5,6,5,.35) 100%),url('ifl-page-banner.jpg');background-size:cover;background-position:center 42%;filter:saturate(.78) contrast(1.08)}
.pagehead .in{position:relative}
.pagehead.home .art{background-image:linear-gradient(90deg,rgba(5,6,5,.9) 0%,rgba(5,6,5,.3) 60%,rgba(5,6,5,.4) 100%),url('ifl-home-banner.jpg');background-position:center}
.pagehead.home{min-height:300px;display:flex;align-items:flex-end}
.eyebrow{color:var(--gold);font-size:10px;font-weight:bold;letter-spacing:3px;text-transform:uppercase;margin:0 0 8px}
h1{font:clamp(34px,5vw,58px)/.95 var(--display);margin:0 0 10px;letter-spacing:.5px;text-transform:uppercase}
h1 small{font:13px/1.4 var(--body);color:var(--muted2);letter-spacing:0;text-transform:none;display:block;margin-top:10px}
h1 em{font-style:normal;color:var(--gold)}
.lead{font-size:15px;max-width:760px;color:var(--muted2);margin:0}
h2{font:22px/1.1 var(--display);letter-spacing:1px;text-transform:uppercase;color:var(--fg);margin:0 0 14px}
h2 small{font:11px/1.4 var(--body);color:var(--muted);letter-spacing:1px;margin-left:10px;text-transform:uppercase}
h3{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:22px 0 8px}

/* ---- panels + grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:24px}
section,.panel{background:var(--panel);border:1px solid var(--line);padding:22px 24px;box-shadow:0 20px 45px #0008}
section+section{margin-top:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:30px}
.card{display:block;background:#11120eeb;border:1px solid #484333;padding:26px;color:var(--fg);box-shadow:0 25px 60px #000b;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
.card h2{color:var(--gold)}.card p{color:var(--muted2);margin:0 0 14px}.card small{color:var(--muted);letter-spacing:2px;text-transform:uppercase;font-size:10px}
.stats{display:flex;gap:26px;flex-wrap:wrap;margin:0 0 6px}
.stat b{display:block;font:34px/1 var(--display);color:var(--gold)}.stat span{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

/* ---- tables */
table{width:100%;border-collapse:collapse;background:transparent;margin:6px 0 14px}
th{font-size:9px;color:#817c6d;letter-spacing:1.4px;text-transform:uppercase;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
td{text-align:left;padding:12px;border-bottom:1px solid var(--line2);font-size:13px;vertical-align:top}
tr:hover td{background:#ffffff05}
td small,th small{color:var(--muted)}

/* ---- forms + buttons */
input,select,button{font:inherit;font-size:13px;background:#0b0c09;color:var(--fg);border:1px solid #545447;padding:9px 12px;border-radius:0}
input:focus,select:focus{outline:none;border-color:var(--gold)}
input[type=date],input[type=number]{min-width:120px}
button,.btn{display:inline-block;padding:11px 17px;border:1px solid #545447;background:var(--panel);color:var(--fg);font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;line-height:1.2}
button:hover,.btn:hover{border-color:var(--gold);color:var(--gold)}
button.gold,.btn.gold,form.form button,form.inline-form button{background:var(--gold);color:#10110d;border-color:var(--gold)}
button.gold:hover,.btn.gold:hover,form.form button:hover,form.inline-form button:hover{background:var(--gold2);color:#10110d;border-color:var(--gold2)}
button.danger{background:transparent;border-color:var(--bad);color:var(--bad)}button.danger:hover{background:var(--bad);color:#10110d}
button.link{background:none;border:none;color:var(--gold);padding:0 4px;letter-spacing:.5px;text-transform:none;font-size:12px;font-weight:bold}button.link:hover{color:var(--gold2)}
.small,button.small{font-size:12px}
form.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end;margin:10px 0}
form.form label{display:flex;flex-direction:column;gap:5px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
form.form label input,form.form label select{font-size:13px;letter-spacing:0;text-transform:none}
form.inline{display:inline}form.inline-form{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;align-items:center}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 14px;margin:8px 0 14px}
.picks label{display:block;padding:5px 8px;border:1px solid transparent}.picks label:hover{border-color:var(--line);background:#ffffff05}
.picks input{margin-right:8px;accent-color:var(--gold)}

/* ---- state */
.flash{padding:11px 14px;margin:0 0 18px;border:1px solid;font-size:13px;background:var(--panel)}
.flash.ok{border-color:var(--ok);color:var(--ok)}.flash.err{border-color:var(--bad);color:var(--bad)}
.bad{color:var(--bad)}.ok{color:var(--ok)}
.st-scheduled,.st-locked,.st-played,.st-void{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;font-weight:bold;padding:3px 8px;border:1px solid}
.st-scheduled{color:var(--ok);border-color:var(--ok)}.st-locked{color:var(--warn);border-color:var(--warn)}.st-played{color:var(--muted);border-color:var(--line)}.st-void{color:var(--bad);border-color:var(--bad)}
dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;margin:0}dt{color:var(--muted);font-size:10px;letter-spacing:2px;text-transform:uppercase;padding-top:3px}dd{margin:0}
code{background:#0b0c09;border:1px solid var(--line2);padding:1px 6px;font-size:12px;color:var(--muted2)}
ul{padding-left:18px}li{margin:3px 0}
.login{max-width:520px}
.login .btn{margin-top:10px}
@media (max-width:760px){header.nav{height:auto;padding:12px 4%;flex-wrap:wrap}nav.links{margin-left:0;width:100%;justify-content:flex-start}.grid{grid-template-columns:1fr}.pagehead{padding:34px 4.3% 24px}h1{font-size:34px}main{padding-bottom:40px}}

/* the Individual League: the game that actually counts in a player's record */
tr.counted td { background: #1a1b12; }
tr.counted td:last-child small { color: #c7a766; text-transform: uppercase; letter-spacing: .08em; }

/* The signed-in member's own row, so they can find themselves instantly in a
   table of a hundred people. 2026-10-07. */
tr.meRow > td { background: var(--gold-dim, #2a2616); font-weight: 500 }
tr.meRow > td:first-child { box-shadow: inset 3px 0 0 var(--gold, #c8a84b) }

/* Supporter tier, 2026-10-07. A locked panel must look like a door, not a
   broken page: it says what is behind it and how much, never hides a number
   the member can get free elsewhere. */
.locked{margin-top:18px;padding:20px 22px;border:1px dashed #c8a84b;background:rgba(200,168,75,.06);border-radius:4px}
.locked h3{margin:4px 0 8px}
.locked p{margin:0 0 10px}
.lockdot{color:#c8a84b;font-size:9px;vertical-align:middle}
ul.ticks{list-style:none;padding:0;margin:8px 0}
ul.ticks li{padding:5px 0 5px 22px;position:relative;line-height:1.5}
ul.ticks li:before{content:"—";position:absolute;left:0;color:#c8a84b}
ul.ticks.muted li{opacity:.6}
ul.ticks.muted li:before{color:#6b6a5c}

/* Depth pages sub-nav, 2026-10-07 - keeps the top bar from becoming a wall.
   Rebuilt as a band in its own right, 2026-10-31: small grey text, left
   aligned, directly above a loud banner was being missed altogether (owner,
   "I almost missed it"). Now centred, larger, and sitting on its own
   background between two rules, so it reads as navigation rather than as a
   caption on the artwork below it. The negative margin matches .pagehead and
   breaks it out of main's 4% padding to span the full width. */
.subnav{display:flex;flex-wrap:wrap;gap:0;justify-content:center;padding:0;margin:0 -4.3%;
  background:#15160f;border-top:1px solid #3a3426;border-bottom:1px solid #3a3426}
.subnav a{padding:14px 22px;font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#b9baa7;border-bottom:3px solid transparent;
  transition:color .15s ease,background .15s ease}
.subnav a:hover{color:#e8e6d9;background:#1e1f15}
.subnav a.on{color:#c8a84b;border-bottom-color:#c8a84b;background:#1e1f15}

.kofiline{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.kofiline small{color:#8b8a7c}

/* The shareable card. Built to be screenshotted, so it is self-contained and
   has no navigation on it. */
body.cardpage{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:14px;padding:24px}
.playercard{width:min(460px,92vw);padding:28px 30px;border:1px solid #c8a84b;background:#15160f;border-radius:6px;position:relative;overflow:hidden}
.playercard .eyebrow{font-size:10px;color:#c8a84b;margin:0 0 10px}
.playercard h1{margin:0;font-size:30px;line-height:1.1}
.playercard .no{color:#9a9b8c;margin:4px 0 0;letter-spacing:.06em;font-size:13px}
.playercard .bio{margin:12px 0 0;color:#cfcdbe;font-style:italic}
.cardstats,.cardpillars{display:flex;gap:18px;margin:18px 0 0;flex-wrap:wrap}
.cardstats div,.cardpillars div{flex:1 1 70px}
.cardstats b,.cardpillars b{display:block;font-size:22px;color:#e8e6d9}
.cardstats span,.cardpillars span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#9a9b8c}
.cardpillars{padding-top:14px;border-top:1px solid #34352b}
.cardpillars b{font-size:17px}
.cardfoot{margin:18px 0 0;text-align:right;color:#c8a84b;letter-spacing:.14em;font-size:11px}
.cardhint{color:#9a9b8c;font-size:12px}
.playercard.banner-allies{background:linear-gradient(160deg,#161a23,#15160f 60%)}
.playercard.banner-axis{background:linear-gradient(160deg,#231616,#15160f 60%)}
.playercard.banner-night{background:linear-gradient(160deg,#0d1018,#15160f 60%)}
.playercard.banner-winter{background:linear-gradient(160deg,#1c2224,#15160f 60%)}
/* A supporter's own artwork, 2026-10-31. Covered and darkened so white card
   text stays readable over a photograph we did not choose. */
.playercard.banner-own{background-size:cover;background-position:center;position:relative}
.playercard.banner-own:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,9,.62),rgba(10,11,9,.86))}
.playercard.banner-own > *{position:relative;z-index:1}
.bannernow{margin:14px 0;padding:12px;border:1px solid #3a3426;background:#15160f;border-radius:4px}
.bannernow img{display:block;max-width:320px;width:100%;height:auto;border-radius:3px;margin:6px 0 10px}
label.inline{display:flex;align-items:center;gap:8px;font-size:13px}

/* ---- wide tables on a narrow screen, 2026-10-07 -------------------------
   The member templates wrap every table in .tablewrap, copied from the public
   site - but that class had NO rule here, so a 628px table widened the whole
   DOCUMENT to 652px in a 375px viewport and the entire page scrolled sideways,
   header and banner with it. The table scrolls inside its own box now. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* the scroll area reaches into the panel's padding, so a cut-off column looks
   like something to swipe rather than something broken */
.panel .tablewrap,section .tablewrap{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}
.tablewrap table{margin-bottom:0}
.tablewrap::-webkit-scrollbar{height:6px}
.tablewrap::-webkit-scrollbar-thumb{background:#4a4738;border-radius:3px}
/* numbers never wrap: a column of "61.1" broken over two lines is unreadable */
td b,th{white-space:nowrap}

@media (max-width:760px){
  /* nothing may make the document wider than the screen */
  html,body{max-width:100%;overflow-x:hidden}
  main{max-width:100%}
  section,.panel{padding:18px 16px}
  .panel .tablewrap,section .tablewrap{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  th{padding:8px 9px;font-size:8.5px;letter-spacing:1px}
  td{padding:9px;font-size:12.5px}
  .subnav{gap:0;margin:0 -4.3%}
  .subnav a{padding:11px 13px;font-size:11px;letter-spacing:.06em}
  table{min-width:max-content}
}

/* "You need to join Objective First" - shown to a signed-in member who is not
   one. Deliberately loud and deliberately not dismissible: it is the one thing
   standing between them and a working account. */
.objwarn{background:#3a2a12;border:1px solid #7a5a1e;border-left:4px solid #e0a52a;
  color:#f3e3c3;padding:12px 16px;margin:0 0 14px;border-radius:6px;font-size:.95rem;line-height:1.5}
.objwarn b{color:#ffd77a}
.objwarn a{color:#ffd77a;text-decoration:underline}
@media (max-width:760px){.objwarn{padding:10px 12px;font-size:.9rem}}

/* Which code you are looking at. Deliberately prominent: every figure on the
   page belongs to one competition and means nothing in the other. */
.leaguetabs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;
  padding:12px 26px;background:var(--bg2);border-bottom:2px solid var(--gold);
  font-size:.95rem;color:var(--muted2);position:relative;z-index:5}
.leaguetabs span{text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--muted)}
.leaguetabs .codenow{font-family:var(--display);font-size:1.25rem;letter-spacing:.03em;
  color:var(--gold);text-transform:uppercase;margin-right:4px}
.leaguetabs .sep{margin-left:6px}
.leaguetabs a{padding:8px 18px;border:1px solid var(--line);border-radius:999px;
  color:var(--fg);text-decoration:none;background:var(--panel);font-weight:600}
.leaguetabs a:hover{border-color:var(--gold);color:#fff}
.leaguetabs a.on{background:var(--gold);border-color:var(--gold);color:#15110a;font-weight:700}
@media (max-width:760px){.leaguetabs{font-size:.85rem;padding:10px 14px;gap:8px}
  .leaguetabs a{padding:6px 12px}.leaguetabs .codenow{font-size:1.05rem}}

/* A CODE OF ITS OWN COLOUR (owner, 2026-10-30). Classic keeps the league gold;
   Vietnam goes olive, so a player can tell at a glance which competition's
   numbers they are reading. Only the accent moves - the furniture stays put,
   or the two would look like two different sites. */
body.code-vietnam{--gold:#8fae5a;--gold2:#b9d191;--bg:#090c08;--panel:#121710;--panel2:#0f130d}