/* Caretaker — the application frame. The same desktop Friday to Sunday and Full Court use, skinned in the studio brand
   theme: Interim GM Games brand — navy header bars (#1B2F52), red accent (#D62828), charcoal base, Open Sans. The team on screen
   tints the glow and the marks (shell.js sets --tint / --team / --team2 / --ink / --accent). */
:root {
  --bg: #121215; --bar: #1B1B1F; --panel: #222227; --panel2: #2A2A31; --line: #3F3F47;
  --text: #FFFDF7; --muted: #C9CED6; --dim: #8A8E98; --go: #1B2F52; --good: #46cf6d; --bad: #ff6666; --gold: #ffd700; --warn: #f3d12b;
  --accent: #D62828; --tint: #1B2F52; --team: #1B2F52; --team2: #ffffff; --ink: #ffffff;
  --head: #1B2F52; --strip: #1B2F52; --strip2: #13233F;
  --al: #e0393e; --nl: #2f7fe0; --mlb: #2B5CB8; --min: #1E5B3A;
  --font: "Open Sans", "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--text); font: 500 14px/1.3 var(--font); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; overflow: hidden; -webkit-font-smoothing: antialiased;
  background: radial-gradient(1150px 640px at 100% 100%, color-mix(in srgb, var(--tint) 62%, transparent), transparent 72%), radial-gradient(900px 380px at 0 60px, color-mix(in srgb, var(--tint) 46%, transparent), transparent 72%), var(--bg); }
body.ui-s { zoom: .9; } body.ui-l { zoom: 1.1; }
a { color: inherit; text-decoration: none; cursor: pointer; }
a:hover { color: var(--accent); }
button, select, input, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); } .dim { color: var(--dim); } .good { color: var(--good); } .bad { color: var(--bad); } .gold { color: var(--gold); } .warn { color: var(--warn); } .acc { color: var(--accent); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: #55555b; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #77777d; background-clip: padding-box; }
.car { display: inline-block; width: 8px; height: 8px; margin-left: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); flex: none; }

/* ---- team marks: a two-colour tag with the club's letters (a logo image takes its place when the data has one) ---- */
.lg { width: 22px; height: 22px; object-fit: contain; vertical-align: -6px; margin-right: 8px; flex: none; }
.tb { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 18px; padding: 0 4px; margin-right: 8px; border-radius: 3px; font-size: 10px; font-weight: 800; letter-spacing: .2px; color: #fff; vertical-align: 1px; border: 1px solid rgba(255,255,255,.5); flex: none; }
.tb.big { width: 58px; height: 58px; font-size: 15px; margin: 0; border-radius: 8px; border-width: 3px; }
.tb.sm { min-width: 28px; height: 15px; font-size: 9px; margin-right: 5px; }

/* ---- menu bar ---- */
#top { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px 0 16px; background: var(--bar); border-bottom: 1px solid #000; flex: none; position: relative; z-index: 60; }
.top-nav { display: flex; gap: 13px; font-size: 25px; color: var(--muted); line-height: 1; } .top-nav a:last-child { color: var(--accent); }
#menus { display: flex; gap: 2px; }
.menu { position: relative; }
.menu-btn { background: none; border: 0; padding: 7px 11px; font-size: 21px; font-weight: 700; letter-spacing: .2px; color: #dedee0; cursor: pointer; display: flex; align-items: center; border-radius: 6px; white-space: nowrap; text-transform: uppercase; }
.menu-btn:hover, .menu.open .menu-btn { background: #3c3c40; color: #fff; }
.menu-btn .tb { margin: 0 9px 0 0; }
.menu-btn .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 9px; background: var(--mlb); }
.menu-list { display: none; position: absolute; top: 44px; left: 0; min-width: 250px; background: #323236; border: 1px solid #111; border-radius: 6px; padding: 6px; z-index: 70; box-shadow: 0 14px 34px rgba(0,0,0,.6); max-height: calc(100vh - 70px); overflow: auto; }
.menu.open .menu-list { display: block; }
.menu-list a { display: flex; justify-content: space-between; gap: 18px; padding: 6px 12px; border-radius: 4px; font-size: 13.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; }
.menu-list a:hover { background: var(--head); color: #fff; }
.menu-list a.on { color: var(--accent); }
.menu-list a em { font-style: normal; color: var(--muted); font-size: 11.5px; text-transform: none; }
.menu-list hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0; }
.menu-list .hint, .menu-list .am-h { display: block; padding: 4px 12px 6px; font-size: 11.5px; color: var(--muted); letter-spacing: .3px; }
.menu-list a.tk { color: var(--warn); } .menu-list a.tk em { color: #d9c66a; }
.tk-b { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 8px; border-radius: 9px; background: var(--warn); color: #111; font-size: 11.5px; font-weight: 800; }
/* a wide menu in columns under headings (megamenu.js in the football and basketball games) */
.menu-list.mega { padding: 0; min-width: 560px; }
.mega-head { display: flex; align-items: center; justify-content: space-between; background: var(--head); padding: 8px 14px; border-radius: 6px 6px 0 0; font-size: 14px; letter-spacing: .4px; text-transform: uppercase; }
.mega-cols { display: flex; gap: 6px; padding: 8px; }
.mega-col { min-width: 190px; flex: 1; }
.mega-col h5 { margin: 6px 12px 3px; font-size: 11px; font-weight: 800; letter-spacing: .7px; color: var(--accent); }
#status { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: #ececee; white-space: nowrap; overflow: hidden; padding-left: 10px; letter-spacing: .1px; }
#status div { overflow: hidden; text-overflow: ellipsis; }
#search { width: 230px; height: 30px; border-radius: 6px; border: 1px solid #111; background: #1b1b1d; padding: 0 12px; outline: none; }
#search:focus { border-color: var(--accent); }
.prov { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; padding: 3px 8px; border-radius: 3px; border: 1px solid var(--warn); color: var(--warn); white-space: nowrap; }
.prov.live { border-color: var(--good); color: var(--good); }

/* ---- team / section header, with the advance box ---- */
#ctx { display: flex; align-items: center; gap: 18px; padding: 12px 14px 12px 26px; flex: none; }
#ctx-main { display: flex; align-items: center; gap: 22px; flex: 1; min-width: 0; }
.ctx-logo { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; flex: none; }
.diamond { width: 66px; height: 66px; border-radius: 10px; transform: rotate(45deg); border: 4px solid rgba(255,255,255,.75); box-shadow: 0 0 0 3px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; color: #fff; background: #3a3a3d; }
.diamond span { transform: rotate(-45deg); font-size: 20px; font-weight: 800; letter-spacing: .3px; }
.ctx-face { width: 84px; height: 96px; border-radius: 8px; flex: none; background: linear-gradient(165deg, var(--c, #1B2F52), #0b0b0c 130%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; border: 2px solid rgba(255,255,255,.35); position: relative; overflow: hidden; }
.ctx-face.fg { width: 104px; height: 112px; background: none; border: 0; overflow: visible; justify-content: center; } .ctx-face.fg svg { width: 108px; height: 132px; margin-top: -6px; }
.ctx-face svg { width: 74px; height: 80px; } .ctx-face i { position: absolute; top: 4px; left: 6px; font-style: normal; font-size: 12px; font-weight: 800; } .ctx-face b { position: absolute; top: 3px; right: 6px; font-size: 13px; font-weight: 800; }
.ctx-title { min-width: 0; flex: 1; }
.ctx-name { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* the team's name in the header opens every team of its league, each going to the same page of that team  */
.tpick { position: relative; flex: 0 1 auto; min-width: 0; } .tpick > h1 > a { cursor: pointer; }
.tpick-list { display: none; position: absolute; left: -8px; top: calc(100% + 5px); z-index: 85; min-width: 290px; max-width: 88vw; max-height: calc(100vh - 136px); overflow: auto; padding: 6px; border-radius: 6px; background: #2d2d31; border: 1px solid #111; box-shadow: 0 16px 40px rgba(0, 0, 0, .65); }
.tpick.open .tpick-list { display: block; } .tpick.open .tpick-list.many { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows), auto); grid-auto-columns: max-content; column-gap: 6px; }
.tpick-list a { display: flex; align-items: center; gap: 9px; padding: 2.5px 16px 2.5px 8px; border-radius: 4px; font-size: 14.5px; font-weight: 600; letter-spacing: .1px; line-height: 1.25; text-transform: none; text-decoration: none; color: #e9e9ec; white-space: nowrap; }
.tpick-list a:hover { background: var(--head); color: #fff; } .tpick-list a.on { color: #fff; font-weight: 800; background: rgba(255, 255, 255, .08); box-shadow: inset 3px 0 0 var(--accent); }
.tpick-list .lg, .tpick-list .tb { margin: 0; flex: none; } .tpick-list .lg { width: 20px; height: 20px; }
.ctx-title h1 { margin: 0; font-size: 30px; line-height: 1.12; font-weight: 800; text-transform: uppercase; letter-spacing: .2px; color: #d6d6d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-sub { font-size: 16px; font-weight: 600; color: #f1f1f2; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.chip { background: #fff; color: #111; border-radius: 3px; padding: 1px 9px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .2px; white-space: nowrap; }
.chip.hi { background: var(--accent); color: #111; } .chip.red { background: var(--bad); } .chip.grn { background: #1E5B3A; color: #fff; } .chip.dk { background: #2f3438; color: #ddd; }
a.chip:hover { color: #111; filter: brightness(.9); }
.honors { display: flex; gap: 3px; align-items: center; flex: none; } .honors svg { width: 26px; height: 26px; } .honors b { font-size: 12px; color: var(--gold); margin-left: -2px; }
.ctx-box { display: flex; align-items: center; gap: 20px; background: #232325; border: 1px solid #000; border-radius: 6px; padding: 9px 18px; flex: none; }
.ctx-box div { text-align: center; } .ctx-box b { display: block; font-size: 24px; font-weight: 800; line-height: 1.05; } .ctx-box span { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .6px; }
.ctx-box .mine { color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: .5px; border: 1px solid var(--accent); border-radius: 4px; padding: 4px 9px; }
.follow { background: none; border: 1px solid #fff; border-radius: 4px; padding: 4px 9px; font-size: 11.5px; font-weight: 700; cursor: pointer; letter-spacing: .5px; }
.follow:hover { background: #fff; color: #111; }
#simbox { width: 236px; flex: none; position: relative; }
.sim-label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .4px; margin-bottom: 3px; padding: 0 2px; }
.sim-row { display: flex; border: 1px solid #5a5a5e; border-bottom: 0; border-radius: 5px 5px 0 0; background: #0b0b0c; }
.sim-what { flex: 1; padding: 5px 10px; color: var(--accent); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sim-to { width: 96px; background: #0b0b0c; border: 0; border-left: 1px solid #333; color: var(--muted); font-size: 10.5px; outline: none; }
.go { display: block; width: 100%; height: 38px; border: 0; border-radius: 0 0 5px 5px; background: var(--go); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; text-transform: uppercase; }
.go.long { font-size: 14px; } .go.xl { font-size: 11.5px; }
.go:hover { filter: brightness(1.25); }
.go.halt { background: var(--accent); color: #111; }
.rcheck { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--good); color: #111; font-size: 11.5px; font-weight: 800; padding: 0 6px; }
.rcheck.bad { background: var(--bad); } .rcheck.warn { background: var(--warn); }

/* ---- work area ---- */
#work { flex: 1; display: flex; min-height: 0; }
#col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#rail { width: 46px; flex: none; margin: 0 14px 20px 0; background: var(--panel); border-radius: 6px; display: flex; flex-direction: column; align-items: center; padding: 10px 0 12px; gap: 5px; overflow-y: auto; }
body.no-rail #rail { display: none; }
#rail::-webkit-scrollbar { display: none; }
#rail span { width: 30px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #e3e3e6; margin-top: 7px; padding-top: 11px; border-top: 1px solid var(--line); }
#rail span:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#rail a { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #d6d6d9; flex: none; }
#rail a:hover { background: var(--head); color: #fff; } #rail a.on { background: var(--accent); color: #111; }
#rail svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the two tab strips: sections above, their pages below ---- */
#subtabs, #subtabs2 { display: flex; align-items: center; gap: 6px; margin: 0 14px 0 20px; padding: 7px 14px; flex: none; flex-wrap: wrap; }
#subtabs { background: var(--strip); border-radius: 5px 5px 0 0; margin-bottom: 14px; }
#subtabs.two { margin-bottom: 0; }
#subtabs2 { background: var(--strip2); border-radius: 0 0 5px 5px; margin-bottom: 14px; padding: 5px 14px; border-top: 2px solid var(--team); }
#subtabs:not(.two) { border-radius: 5px; }
#subtabs2[hidden] { display: none; }
#subtabs > a { padding: 3px 17px; font-size: 15.5px; font-weight: 800; letter-spacing: .2px; border: 1.5px solid transparent; border-radius: 3px; text-transform: uppercase; white-space: nowrap; }
#subtabs2 > a { padding: 3px 14px; font-size: 14.5px; font-weight: 700; letter-spacing: .3px; border: 1.5px solid transparent; border-radius: 3px; text-transform: uppercase; color: #cfd6da; white-space: nowrap; }
#subtabs > a.on, #subtabs2 > a.on { border-color: #fff; background: rgba(0,0,0,.35); color: #fff; }
#subtabs > a:hover, #subtabs2 > a:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.strip-r { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.strip-r .menu-btn { background: #fff; color: #111; font-size: 12.5px; font-weight: 800; padding: 4px 11px; border-radius: 3px; } .strip-r .menu-btn .car { border-color: #111; width: 7px; height: 7px; }
.strip-r .menu-btn:hover, .strip-r .menu.open .menu-btn { background: var(--accent); color: #111; }
.strip-r .menu-list { left: auto; right: 0; top: 33px; }
.strip-r .cnt { background: var(--bad); color: #fff; border-radius: 8px; padding: 0 6px; margin-left: 6px; font-size: 11px; }

#view { flex: 1; min-height: 0; overflow: auto; padding: 0 14px 20px 20px; }

/* ---- busy overlay, toasts, dialogs ---- */
#busy { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 200; display: flex; align-items: center; justify-content: center; }
#busy[hidden] { display: none; }
.busy-box { background: var(--panel); border: 1px solid #000; border-radius: 8px; padding: 22px 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 260px; }
.spinner { width: 34px; height: 34px; border: 4px solid #444; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#toasts { position: fixed; right: 74px; bottom: 26px; z-index: 210; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { background: #2c3237; border: 1px solid #000; border-left: 4px solid var(--accent); border-radius: 5px; padding: 9px 14px; max-width: 460px; box-shadow: 0 10px 26px rgba(0,0,0,.55); font-size: 13.5px; animation: tin .18s ease-out; }
.toast.good { border-left-color: var(--good); } .toast.bad { border-left-color: var(--bad); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }
#dialog { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 190; display: flex; align-items: center; justify-content: center; }
#dialog[hidden] { display: none; }
.dlg { background: var(--panel); border: 1px solid #000; border-radius: 8px; min-width: 420px; max-width: min(920px, 92vw); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.dlg > header { background: var(--head); padding: 9px 14px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; border-radius: 8px 8px 0 0; display: flex; justify-content: space-between; align-items: center; }
.dlg > .dlg-body { padding: 14px; overflow: auto; }
.dlg > footer { padding: 10px 14px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }
/* the halt card: reason, the automation flag that would have continued, the screen that fixes it */
.halt-card { border-left: 4px solid var(--accent); background: #252a2e; border-radius: 5px; padding: 10px 14px; margin-bottom: 12px; display: flex; gap: 14px; align-items: center; }
.halt-card b { font-size: 15px; } .halt-card .grow { flex: 1; min-width: 0; } .halt-card small { display: block; color: var(--muted); margin-top: 2px; }

/* ---- the club's colours carry the frame (S.theme sets --head, --strip, --strip2, --go, --accent, --tint) ---- */
#top { border-bottom: 2px solid var(--head); }
/* the header takes the club's colours at full strength: its bright one glowing in from the left, its own behind the name */
#ctx { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 52%, transparent), color-mix(in srgb, var(--team) 62%, transparent) 24%, color-mix(in srgb, var(--team) 26%, transparent) 58%, transparent 82%); border-bottom: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); margin-bottom: 12px; }
#subtabs2 { border-top-color: var(--accent); }
#rail { border-top: 3px solid var(--head); }
.menu-list a.on, #subtabs > a.on, #subtabs2 > a.on { box-shadow: inset 0 -2px 0 var(--accent); }
th.sorted { color: color-mix(in srgb, var(--accent) 55%, #fff); }
.panel > header { border-top: 2px solid color-mix(in srgb, var(--head) 80%, transparent); }
.diamond { box-shadow: 0 0 0 3px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.5), 0 0 26px color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---- as the football and basketball games have them: the second tab strip is a band in the club's colour ---- */
#subtabs { background: var(--strip); }
/* the first strip is the club's colour; the second is its bright one, with dark letters where that reads better */
#subtabs { background: color-mix(in srgb, var(--team) 80%, #0b0d10); }
#subtabs2 { background: var(--accent); border-top: 0; padding: 6px 14px; }
#subtabs2 > a { color: #14171b; font-weight: 800; }
#subtabs2 > a.on { color: #14171b; border-color: #14171b; background: rgba(255,255,255,.28); box-shadow: none; }
#subtabs2 > a:hover { color: #000; border-color: rgba(0,0,0,.5); }
#subtabs > a.on { box-shadow: none; }
.strip-r .btn.wht { padding: 4px 11px; font-size: 12.5px; }

/* ================= THE START SCREEN ================= the same screen Friday to Sunday and Full Court open on: the game's
   mark over a picture of the ground, two translucent panels with their headings centred, a menu of icon rows, links
   along the foot. The highlight is the same orange whatever club is loaded. Each sport supplies its mark and its picture. */
#start { position: fixed; inset: 0; z-index: 150; overflow: hidden; color: #fff; --or: #f47a1f; background: #05070c; display: block; }
#start[hidden] { display: none; }
.mm-bg { position: absolute; inset: 0; background: #05070c; } .mm-arena { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; overflow: auto; padding: 4vh 24px 14px; }
.mm-logo { flex: none; display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 3.2vh; filter: drop-shadow(0 8px 18px rgba(0,0,0,.75)); }
.mm-logo svg, .mm-logo img { height: clamp(70px, 13vh, 128px); width: auto; display: block; }
.mm-logo b { display: block; font-size: clamp(46px, 8.4vh, 76px); line-height: .95; font-weight: 900; font-style: italic; letter-spacing: -1px; color: #f3f5f8; text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.55); }
.mm-logo b i { color: var(--or); } .mm-logo span { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 700; letter-spacing: 5px; color: #e9edf2; }
.mm-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; width: min(1300px, 92vw); flex: none; } .mm-panels.one { grid-template-columns: minmax(0, 660px); justify-content: center; } .mm-panels.wide { grid-template-columns: minmax(0, 1100px); justify-content: center; }
.mm-panel { background: rgba(8, 9, 11, .74); border-radius: 6px; padding: 22px 34px 26px; box-shadow: 0 18px 44px rgba(0,0,0,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.mm-panel h3 { margin: 0 0 16px; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 1.6px; color: var(--or); }
.mm-panel h4 { margin: 22px 0 10px; text-align: center; font-size: 19px; font-weight: 800; letter-spacing: 1.6px; color: var(--or); }
.mm-item { display: flex; align-items: center; gap: 30px; padding: 11px 6px; color: #fff; border-radius: 5px; } .mm-item:hover { background: rgba(255,255,255,.09); color: #fff; }
.mm-ic { width: 34px; height: 34px; flex: none; } .mm-item span { display: block; min-width: 0; } .mm-item b { display: block; font-size: 25px; font-weight: 800; letter-spacing: .3px; line-height: 1.05; }
.mm-item i { display: block; font-style: normal; font-size: 15px; font-weight: 600; color: var(--or); margin-top: 2px; } .mm-item i:empty { display: none; } .mm-item.off { opacity: .4; pointer-events: none; }
.mm-world { display: flex; align-items: center; gap: 16px; } .mm-crest .tb { width: 74px; height: 74px; margin: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 22px; font-weight: 800; border-width: 3px; }
.mm-world b { display: block; font-size: 24px; font-weight: 800; } .mm-world span { display: block; font-size: 15px; font-weight: 600; color: #e6e6ea; } .mm-world i { display: block; font-style: normal; font-size: 14px; font-weight: 600; color: var(--or); margin-top: 2px; }
.mm-playrow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin-top: 18px; align-items: stretch; }
.mm-play { display: flex; align-items: center; gap: 14px; padding: 9px 18px; border-radius: 4px; font-size: 22px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #ffb24a, #f08a1c); box-shadow: 0 4px 12px rgba(0,0,0,.45); } .mm-play:hover { filter: brightness(1.1); color: #fff; } .mm-play .mm-ic { width: 26px; height: 26px; }
.mm-next { border: 2px solid #f0a02c; border-radius: 4px; padding: 5px 12px; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .mm-next i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; color: #d6d6da; }
.mm-next b { font-size: 15px; font-weight: 800; color: #ffc15a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-saves { font-size: 15.5px; } .mm-srow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 96px; gap: 10px; align-items: center; padding: 4px 4px; font-weight: 600; } .mm-srow.hd { font-size: 13px; font-weight: 800; letter-spacing: .6px; color: #d6d6da; }
.mm-srow.four { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) 96px 96px; }
.mm-srow button, .wz footer button { font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .4px; color: #fff; background: #5d6470; border: 0; border-radius: 3px; padding: 5px 14px; cursor: pointer; } .mm-srow button { width: 100%; } .mm-srow button:hover, .wz footer button:hover { filter: brightness(1.2); } .mm-srow button.danger { background: #c0392b; }
.mm-hello { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: #e6e6ea; text-align: center; }
.mm-foot { margin-top: auto; padding-top: 3vh; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; flex: none; } .mm-foot a { font-size: 16.5px; font-weight: 800; letter-spacing: .3px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.9); } .mm-foot a:hover { color: var(--or); }
.mm-ver { flex: none; margin-top: 8px; font-size: 13px; color: #d0d0d6; text-shadow: 0 1px 4px rgba(0,0,0,.9); } .mm-ver.build { margin-top: 3px; font-size: 12.5px; color: #e6e6ea; letter-spacing: .2px; }
/* the new-game wizard: the picture dimmed, a title bar, two columns, a bar of buttons along the bottom */
/* the studio: its mark in the corner of the start screen and its line under the menu, as the studio carries its own. The art is the
   brand's and is used as it comes, on the brand's navy (~/projects/interim-gm-games/BRAND.md). */
.mm-studio { position: absolute; left: 22px; bottom: 16px; z-index: 3; display: block; padding: 5px 9px 3px; border-radius: 10px; background: #13233f; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); line-height: 0; }
.mm-studio img { width: 128px; height: auto; display: block; } .mm-studio:hover { filter: brightness(1.12); }
@media (max-width: 1180px), (max-height: 680px) { .mm-studio { display: none; } }
.studio-by { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; text-align: left; } .studio-by img { width: 132px; height: auto; flex: none; padding: 5px 9px 3px; border-radius: 10px; background: #13233f; }
.studio-by b { display: block; font-size: 17px; font-weight: 800; letter-spacing: .3px; } .studio-by span { display: block; font-size: 13.5px; opacity: .8; } .studio-by i { display: block; margin-top: 5px; font-style: normal; font-size: 12.5px; opacity: .65; }
/* ---- the new-game wizard, on Franchise Tag's sheet: the title drawn small, one panel of five steps, the footer links under it ---- */
#start.wiz2 .mm-stage { padding: 1.8vh 0 10px; align-items: stretch; overflow: hidden; } #start.wiz2 .mm-ver { text-align: center; } #start.wiz2 .mm-ver.build { display: none; } #start.wiz2 .mm-foot { padding-top: 0; margin-top: 0; }
#start.wiz2 .mm-logo { margin: 0 auto 1.6vh; gap: 14px; } #start.wiz2 .mm-logo svg, #start.wiz2 .mm-logo img { height: 62px; } #start.wiz2 .mm-logo b { font-size: 38px; } #start.wiz2 .mm-logo span { margin-top: 4px; font-size: 10.5px; letter-spacing: 3.5px; }
.mm-wiz { flex: 1; min-height: 0; margin: 0 26px 12px; display: flex; flex-direction: column; border-radius: 6px; background: rgba(46, 49, 56, .93); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); overflow: hidden; }
.mm-wiz > header { position: relative; flex: none; padding: 9px 18px; text-align: center; background: rgba(120, 124, 132, .55); border-bottom: 3px solid var(--club, transparent); font-size: 21px; color: #101216; } .mm-wiz > header b { font-weight: 800; } .mm-wiz > header span { font-weight: 700; }
.mm-dots { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; gap: 7px; } .mm-dots a { width: 11px; height: 11px; border-radius: 50%; background: rgba(0, 0, 0, .3); cursor: pointer; } .mm-dots a.done { background: #0e7a0e; } .mm-dots a.on { background: #16b316; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.mm-wizbody { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 54px; padding: 18px 9% 8px; } .mm-wizbody > div { overflow-y: auto; min-height: 0; padding-right: 8px; }
.mm-wiz h3 { margin: 16px 0 9px; font-size: 16.5px; font-weight: 800; letter-spacing: .6px; color: #a9adb6; text-align: left; } .mm-wiz h3:first-child { margin-top: 2px; }
.mm-wiz p { margin: 0 0 12px 8px; font-size: 15px; line-height: 1.4; color: #f1f2f4; } .mm-wiz p.mm-dim { color: #b4b8c0; font-size: 13.5px; }
.mm-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: 2px 12px; margin: 5px 0; } .mm-row > span { font-size: 15px; font-weight: 700; color: #a9adb6; } .mm-row > div { display: flex; gap: 6px; min-width: 0; }
.mm-row > em { grid-column: 2; font-style: normal; font-size: 12.5px; color: #b4b8c0; line-height: 1.3; margin-bottom: 4px; }
.mm-wiz select, .mm-wiz input[type=text] { flex: 1; min-width: 0; width: auto; height: 28px; padding: 0 9px; border: 1px solid #6c7079; border-radius: 3px; background: #1e2026; color: #fff; font: inherit; font-size: 14.5px; font-weight: 700; }
.mm-wiz select { text-align-last: center; } .mm-wiz select:disabled { opacity: .8; } .mm-wiz input[type=text] { background: #0f1013; } .mm-wiz select:focus, .mm-wiz input:focus { outline: 2px solid #16b316; outline-offset: 0; }
.mm-facts { margin: 0 0 8px 8px; } .mm-facts > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 14.5px; } .mm-facts span { color: #a9adb6; font-weight: 700; } .mm-facts b { font-weight: 600; color: #f1f2f4; }
.mm-choice { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px 8px; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 5px; cursor: pointer; } .mm-choice:hover { background: rgba(255, 255, 255, .05); color: inherit; }
.mm-choice > i { flex: none; width: 15px; height: 15px; margin-top: 3px; border: 2px solid #9a9ea8; border-radius: 3px; box-sizing: border-box; } .mm-choice.on { border-color: #16b316; background: rgba(22, 179, 22, .09); } .mm-choice.on > i { background: #16b316; border-color: #16b316; box-shadow: inset 0 0 0 2px #2e3138; }
.mm-choice span { font-size: 14px; line-height: 1.4; color: #dfe1e5; } .mm-choice b { display: block; font-size: 15.5px; color: #fff; } .mm-choice.off { opacity: .5; border-style: dashed; cursor: default; } .mm-choice.off:hover { background: none; } .mm-choice.off > i { visibility: hidden; }
.mm-any { display: block; margin: 6px 0 4px 8px; padding: 3px 8px; font-size: 15px; border-radius: 3px; cursor: pointer; color: #fff; } .mm-any:hover, .mm-teams a:hover { background: rgba(255, 255, 255, .08); color: #fff; } .mm-any.on, .mm-teams a.on { background: var(--club, #16b316); color: #fff; }
.mm-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; margin-left: 8px; } .mm-div h4 { margin: 9px 0 3px 44px; font-size: 14px; font-weight: 800; color: #9a9ea8; }
.mm-teams a { display: flex; align-items: center; gap: 10px; padding: 2.5px 6px; border-radius: 3px; font-size: 15.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; cursor: pointer; } .mm-teams a .tb { margin: 0; flex: none; }
.mm-wiz > footer { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 18px 12px; } .mm-wiz > footer > span { flex: 1; } .mm-wiz > footer .mm-btn { min-width: 250px; box-sizing: border-box; } .mm-wiz > footer .mm-btn:first-child { min-width: 200px; }
.mm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 5px 18px; border-radius: 3px; background: rgba(150, 156, 168, .5); font-size: 14px; font-weight: 800; letter-spacing: .5px; white-space: nowrap; color: #fff; cursor: pointer; } .mm-btn:hover { background: rgba(176, 182, 194, .62); color: #fff; }
.mm-btn .mm-ic { width: 17px; height: 17px; margin: 0; flex: none; } .mm-btn.mm-go { background: #16b316; } .mm-btn.mm-go:hover { background: #1dc81d; } .mm-btn.off { opacity: .4; pointer-events: none; }
@media (max-width: 1500px) { .mm-wizbody { padding: 14px 4% 6px; gap: 0 34px; } .mm-row { grid-template-columns: 200px minmax(0, 1fr); } .mm-wiz > footer .mm-btn { min-width: 170px; } }
#start.wizard .mm-bg::after { content: ''; position: absolute; inset: 0; background: rgba(40, 41, 45, .93); } #start.wizard .mm-stage { padding: 0; }
.wz { width: 100%; height: 100%; display: flex; flex-direction: column; }
.wz > header { flex: none; padding: 9px 16px; text-align: center; font-size: 21px; font-weight: 800; color: #17181a; background: #6a6b70; border-bottom: 3px solid var(--club, #6a6b70); text-transform: uppercase; letter-spacing: .5px; }
.wz-steps { flex: none; display: flex; background: rgba(0,0,0,.35); } .wz-steps span { flex: 1; text-align: center; padding: 5px; font-size: 12px; font-weight: 800; letter-spacing: .6px; color: #9a9da3; border-bottom: 2px solid transparent; } .wz-steps span.on { color: #fff; border-color: var(--or); } .wz-steps span.done { color: #d6d6da; }
.wz-body { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 56px; padding: 22px max(28px, 12vw) 18px; align-content: start; }
.wz-body.team { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding-left: max(28px, 8vw); padding-right: max(28px, 8vw); }
.wz-col h4 { margin: 20px 0 8px; font-size: 17px; font-weight: 800; letter-spacing: .5px; color: #a9acb2; text-transform: uppercase; } .wz-col h4:first-child { margin-top: 0; }
.wz-col p, .wz-col li { font-size: 15.5px; line-height: 1.42; color: #f1f1f3; } .wz-col p { margin: 6px 6px 8px; } .wz-col ul { margin: 4px 0 8px; padding-left: 26px; } .wz-note { color: #c4c6cb !important; font-size: 14px !important; }
.wz-line { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px; align-items: center; padding: 3px 6px; } .wz-line > span { font-size: 15.5px; font-weight: 700; color: #a9acb2; }
.wz select, .wz input:not([type=checkbox]) { width: 100%; font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: #1f2023; border: 1px solid #77787d; border-radius: 3px; padding: 4px 10px; height: auto; }
.wz-box { display: flex; align-items: center; gap: 9px; padding: 4px 6px; font-size: 16px; font-weight: 700; cursor: pointer; } .wz-box input { width: 16px; height: 16px; accent-color: #22b422; }
.wz-pick { display: block; padding: 9px 14px; margin: 0 0 8px; border: 2px solid #55585f; border-radius: 5px; } .wz-pick b { display: block; font-size: 18px; font-weight: 800; } .wz-pick span { display: block; font-size: 14px; color: #c4c6cb; } .wz-pick:hover { background: rgba(255,255,255,.07); color: #fff; } .wz-pick.on { border-color: #22b422; background: rgba(34,180,34,.14); } .wz-pick.off { opacity: .5; border-style: dashed; cursor: default; } .wz-later { margin-top: 18px !important; opacity: .75; }
.wz-years { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .wz-years a { padding: 5px 12px; border: 2px solid #55585f; border-radius: 5px; font-size: 15px; font-weight: 800; cursor: pointer; } .wz-years a:hover { background: rgba(255,255,255,.08); color: #fff; } .wz-years a.on { border-color: #22b422; background: rgba(34,180,34,.16); } .wz-years.yr a { min-width: 62px; text-align: center; font-size: 17px; } .wz-pick.off:hover { background: none; color: inherit; }
.wz-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 34px; margin-top: 8px; }
.wz-cols h6 { margin: 0 0 2px; font-size: 13px; font-weight: 800; letter-spacing: 1px; color: #e9d9a0; } .wz-cols h5 { margin: 10px 0 3px 48px; font-size: 15px; font-weight: 800; color: #a9acb2; }
.wz-team { display: flex; align-items: center; gap: 10px; padding: 3px 8px; border-radius: 4px; font-size: 16.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; } .wz-team .tb { min-width: 40px; height: 22px; font-size: 10.5px; margin: 0; }
.wz-team:hover { background: rgba(255,255,255,.1); color: #fff; } .wz-team.on { background: var(--club, #22b422); color: var(--clubink, #fff); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.wz-sum { display: grid; grid-template-columns: 170px 1fr; gap: 4px 12px; margin: 4px 6px; font-size: 15px; } .wz-sum dt { font-weight: 700; color: #a9acb2; } .wz-sum dd { margin: 0; font-weight: 700; }
.wz footer { flex: none; display: flex; gap: 12px; align-items: center; padding: 12px 22px 14px; background: rgba(0,0,0,.35); } .wz footer span { flex: 1; } .wz footer button { min-width: 190px; padding: 6px 14px; } .wz footer .ok { background: #22b422; } .wz footer button[disabled] { opacity: .35; cursor: default; filter: none; }
@media (max-width: 1500px) { .mm-item b { font-size: 21px; } .mm-item i { font-size: 13.5px; } .mm-panel { padding: 18px 24px 20px; } }
@media (max-width: 1000px) { .mm-panels, .wz-body, .wz-body.team { grid-template-columns: minmax(0, 1fr); } }


/* ---- a club's crest (the sport's kit draws it): in a row of a table, in a menu, large in the header ---- */
.tb.cr { min-width: 0; width: 24px; height: 24px; padding: 0; margin-right: 8px; border: 0; border-radius: 0; background: none !important; vertical-align: -7px; } .tb.cr .crest { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
.tb.cr.sm { width: 20px; height: 20px; margin-right: 6px; vertical-align: -5px; } .tb.cr.big { width: 62px; height: 62px; margin: 0; }
.menu-btn .tb.cr { width: 28px; height: 28px; margin: 0 9px 0 0; vertical-align: middle; } .tpick-list .tb.cr { width: 22px; height: 22px; }
.ctx-logo .crest { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 50%, transparent)); }
td .tb.cr { vertical-align: -7px; } .srow .tb.cr, .nrow .tb.cr { width: 20px; height: 20px; vertical-align: -5px; margin-right: 6px; }
/* the header's line of who and where */
.ctx-info { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: #f1f1f2; } .ctx-info span { white-space: nowrap; } .ctx-info em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; color: #c7ccd3; margin-right: 6px; } .ctx-info a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 2px; }
.chip.gold { background: linear-gradient(180deg, #ffe58a, #e7b53a); color: #2a1a05; }
.menu-btn .lgmark { width: 30px; height: 30px; object-fit: contain; margin-right: 8px; }
/* the big green button (the same one the basketball and football games have): what it will do, what that means, an arrow */
.go.flow { height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 0 16px; text-align: left; border-radius: 0 0 8px 8px; color: #06250b; text-transform: uppercase;
  background: linear-gradient(180deg, #45e05c, #22b03a 55%, #18932e); box-shadow: 0 4px 14px rgba(40, 200, 70, .35), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .18); text-shadow: 0 1px 0 rgba(255, 255, 255, .25); transition: transform .08s, box-shadow .12s; }
.go.flow * { pointer-events: none; }
.go.flow:hover { background: linear-gradient(180deg, #5cec72, #27c043 55%, #1aa233); filter: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(40, 200, 70, .5), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .18); }
.go.flow:active { transform: translateY(1px); box-shadow: 0 1px 6px rgba(40, 200, 70, .3), inset 0 2px 4px rgba(0, 0, 0, .25); }
.go.flow.halt { color: #2a1c00; background: linear-gradient(180deg, #ffd65a, #f0b429 55%, #d99a12); box-shadow: 0 4px 14px rgba(240, 180, 40, .35), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .18); }
.go-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.go-main b { font-size: 18px; font-weight: 900; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-main b.long { font-size: 15px; letter-spacing: 0; } .go-main b.xl { font-size: 12.5px; letter-spacing: 0; }
.go-main small { margin-top: 4px; font-size: 11px; font-weight: 700; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; }
.go-arrow { flex: none; width: 12px; height: 12px; margin-right: 5px; border-right: 4px solid currentColor; border-top: 4px solid currentColor; transform: rotate(45deg); opacity: .85; }
.sim-row { border-radius: 8px 8px 0 0; }
/* the two strips of tabs stay on one line each: smaller letters on a narrower window, and a strip too long for it slides */
#subtabs, #subtabs2 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#subtabs::-webkit-scrollbar, #subtabs2::-webkit-scrollbar { display: none; }
#subtabs > *, #subtabs2 > * { flex: none; }
@media (max-width: 1500px) { #subtabs > a { padding: 3px 12px; font-size: 14px; } #subtabs2 > a { padding: 3px 11px; font-size: 13.5px; } }
@media (max-width: 1240px) { #subtabs, #subtabs2 { gap: 3px; padding-left: 10px; padding-right: 10px; } #subtabs > a { padding: 3px 9px; font-size: 13px; letter-spacing: 0; } #subtabs2 > a { padding: 3px 8px; font-size: 12.5px; letter-spacing: 0; } }
.ctx-num { color: #fff; font-weight: 800; }
/* a count on a red spot: dark figures (white on that red was under 3 to 1) */
.menu-btn .cnt, .strip-r .cnt { color: #111; }
/* the mark at the head of a menu (the league's logo, a club's crest) is a small one beside the name, never the picture at its own size */
.mega-head img, .mega-head .lgmark { height: 26px; width: auto; max-width: 64px; flex: none; object-fit: contain; }
.mega-head .tb, .mega-head .crest { flex: none; }