:root {
  --bg: #0b0f16; --panel: #131a25; --panel2: #1a2331; --line: #26303f;
  --ink: #e8eef6; --muted: #8b9bb0; --accent: #ffc247; --accent2: #5aa9e6;
  --good: #4ade80; --bad: #f87171; --warn: #facc15;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.wrap {
  width: 100%; max-width: 520px; margin: 0 auto;
  padding: 14px 14px calc(28px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { .wrap { max-width: 700px; } }

a.back {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink);
  text-decoration: none; font-size: 15px; font-weight: 600; margin-bottom: 16px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); transition: border-color .15s ease, transform .05s ease;
}
a.back:hover { border-color: var(--accent); transform: translateX(-2px); }

h1, h2, h3 { letter-spacing: -0.015em; }
h2 { font-size: 18px; margin: 0 0 10px; }
h3 { font-size: 15px; margin: 0 0 10px; }
p { margin: 0 0 11px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.up { color: var(--good); }
.down { color: var(--bad); }
.bad { color: var(--bad); }

button, .btn {
  background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 11px; padding: 11px 15px; font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .42; cursor: not-allowed; }
button.primary { background: var(--accent); color: #241a03; border-color: var(--accent); }
button.primary:hover:not(:disabled) { filter: brightness(1.07); }
button.danger { border-color: var(--bad); color: var(--bad); background: transparent; }
button.big { width: 100%; padding: 14px; font-size: 16px; }
.btnRow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.btnRow button { flex: 1 1 auto; }
textarea, input[type="text"] {
  width: 100%; background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 10px; font-size: 16px; font-family: inherit;
  margin-top: 6px; resize: vertical;
}
.fieldLabel { display: block; font-size: 13px; color: var(--muted); margin-top: 10px; }
.ioOut textarea { font-size: 12px; word-break: break-all; }
.codeChip {
  width: 100%; font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 22px; letter-spacing: 0.18em; text-align: center; padding: 14px;
  background: var(--panel2); border: 1px dashed var(--accent); color: var(--accent);
}
.codeChip:hover { background: var(--panel2); filter: brightness(1.1); }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 15px;
  padding: 14px; margin-bottom: 12px;
}
.rowHead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rowHead h2, .rowHead h3 { margin: 0 0 8px; }
.note { color: var(--muted); margin-top: 10px; }

/* ---------- landing ---------- */
.hero { text-align: center; padding: 10px 0 18px; }
.gameTitle {
  font-size: 34px; margin: 0 0 6px; font-weight: 800; letter-spacing: -0.03em;
  background: linear-gradient(96deg, var(--accent), #ffe6a8 60%, var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.heroLine { color: var(--muted); margin: 0; font-size: 14px; }

.saveList { display: flex; flex-direction: column; gap: 8px; }
.saveRow {
  display: flex; align-items: center; gap: 10px; padding: 11px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.saveRow:hover { border-color: var(--accent); }
.saveMain { flex: 1; min-width: 0; }
.saveName { font-weight: 700; }
.saveLine { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saveMeta { text-align: right; font-size: 13px; flex: none; }
.iconBtn { padding: 6px 9px; font-size: 13px; border-radius: 8px; flex: none; background: transparent; color: var(--muted); }
.iconBtn:hover { color: var(--bad); border-color: var(--bad); }

/* ---------- intro ---------- */
.intro { text-align: center; padding-top: 14px; }
.introBody { font-size: 18px; line-height: 1.7; margin: 22px 0 26px; }
.introBody p { margin: 0 0 14px; }
.rules { text-align: left; display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.ruleRow {
  display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px;
}
.ruleRow span { font-size: 17px; line-height: 1.2; }

/* ---------- picking a club ---------- */
.pickHead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.pickHead h2 { margin: 0; }
.leagueGrid { display: flex; flex-direction: column; gap: 10px; }
.leagueCard {
  display: block; width: 100%; text-align: left; padding: 13px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  font-weight: 400; font-size: 14px;
}
.leagueCard.owned { opacity: .5; }
.lcTop { display: flex; align-items: center; gap: 9px; }
.lcIcon { font-size: 20px; }
.lcName { font-weight: 700; font-size: 15.5px; flex: 1; min-width: 0; }
.lcFlag { font-size: 16px; }
.lcMeta { color: var(--accent); font-size: 12.5px; margin-top: 3px; font-weight: 600; }
.lcNote { color: var(--muted); font-size: 13px; margin-top: 6px; }
.lcSug { font-size: 12.5px; margin-top: 8px; color: var(--ink); }

.clubList { display: flex; flex-direction: column; gap: 7px; }
.clubRow {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 11px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; font-weight: 400; font-size: 14px;
}
.clubRow.locked { opacity: .55; }
.clubMain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clubName { font-weight: 700; }
.clubMeta { color: var(--muted); font-size: 12.5px; }
.clubWhy { color: var(--warn); font-size: 12px; margin-top: 3px; }
.clubPrice { flex: none; text-align: right; font-weight: 700; display: flex; flex-direction: column; align-items: flex-end; }
.clubPrice .small { font-weight: 400; }
.pill {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--accent); color: #241a03; padding: 2px 6px; border-radius: 999px; vertical-align: 2px;
}
.swatch { width: 13px; height: 13px; border-radius: 4px; display: inline-block; flex: none; margin-top: 4px; }
.swatch.big { width: 24px; height: 24px; border-radius: 7px; margin-top: 2px; }

/* ---------- hud ---------- */
.hud { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.hudDate { font-weight: 700; font-size: 16px; }
.hudPhase { color: var(--muted); font-size: 12px; }
.hudRight { text-align: right; }
.hudCash { font-weight: 800; font-size: 17px; color: var(--accent); }
.hudWorth { color: var(--muted); font-size: 12px; }
.hudClub {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 8px 11px; margin-bottom: 10px; font-size: 13px;
}
.hudClub.none { color: var(--muted); }
.hcName { font-weight: 700; }
.hcForm { color: var(--muted); }
.hudClub .meter { margin-left: auto; }

.meter { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.meterLabel { color: var(--muted); min-width: 0; }
.meterTrack { width: 62px; height: 6px; border-radius: 999px; background: var(--panel2); overflow: hidden; flex: none; }
.meterFill { display: block; height: 100%; border-radius: 999px; }
.meterFill.hi { background: var(--good); }
.meterFill.mid { background: var(--warn); }
.meterFill.lo { background: var(--bad); }
.meterVal { font-variant-numeric: tabular-nums; min-width: 20px; text-align: right; }
.meters { display: flex; flex-direction: column; gap: 7px; margin: 10px 0; }
.meters .meter { justify-content: space-between; }
.meters .meterLabel { flex: 1; }
.meters .meterTrack { width: 110px; }

/* ---------- tabs ---------- */
.tabbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: rgba(19, 26, 37, .97); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px; margin: 0 0 12px;
  backdrop-filter: blur(6px);
}
.tabbtn {
  background: none; border: none; color: var(--muted);
  font-size: 12px; font-weight: 700; padding: 9px 2px; border-radius: 9px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabbtn.active { color: #241a03; background: var(--accent); }

/* ---------- the desk ---------- */
.digest {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 11px;
  padding: 9px 11px; margin-bottom: 11px; font-size: 12.5px;
}
.dgRow { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.dgRow + .dgRow { margin-top: 3px; }
.dgPos { margin-left: auto; color: var(--accent); font-weight: 700; }

.banner {
  background: linear-gradient(100deg, rgba(255,194,71,.16), rgba(90,169,230,.10));
  border: 1px solid var(--accent); border-radius: 11px; padding: 10px 12px;
  margin-bottom: 11px; font-size: 13px; cursor: pointer;
}
.bLink { color: var(--accent); font-weight: 700; white-space: nowrap; }

.cardEvent {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent2);
  border-radius: 14px; padding: 15px; margin-bottom: 14px;
}
.cardEvent.cat-roster { border-left-color: var(--accent2); }
.cardEvent.cat-money { border-left-color: var(--accent); }
.cardEvent.cat-fans { border-left-color: #e07fb5; }
.cardEvent.cat-media { border-left-color: #a97fe0; }
.cardEvent.cat-personal { border-left-color: #54c6c6; }
.cardEvent.cat-league { border-left-color: #c8d24f; }
.cardEvent.cat-crisis { border-left-color: var(--bad); }
.cardEvent.tone-good { border-left-color: var(--good); }
.cardEvent.tone-bad { border-left-color: var(--bad); }
.speaker {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700; margin-bottom: 7px;
}
.evTitle { font-size: 20px; line-height: 1.25; margin: 0 0 11px; }
.evBody { font-size: 15px; line-height: 1.65; }
.evBody p:last-child { margin-bottom: 0; }
.evBody b { color: var(--accent); font-weight: 700; }
.outcome .evBody { font-size: 15.5px; }

.choices { display: flex; flex-direction: column; gap: 8px; }
.choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; padding: 12px 14px; font-size: 15px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
}
.choice:hover:not(:disabled) { border-color: var(--accent); background: #202b3b; }
.chLabel { font-weight: 700; }
.chHint { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.choice.primary .chHint { color: #4a3a12; }

.deltas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.delta {
  font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--line);
}
.delta.up { color: var(--good); border-color: rgba(74,222,128,.35); }
.delta.down { color: var(--bad); border-color: rgba(248,113,113,.35); }

.seasonBlock { border-top: 1px solid var(--line); padding-top: 11px; margin-top: 11px; }
.seasonBlock:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.sbClub { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.sbHead { font-size: 17px; font-weight: 700; margin: 3px 0; }
.seasonBlock.champ .sbHead { color: var(--accent); }
.seasonBlock.releg .sbHead { color: var(--bad); }
.sbMeta { color: var(--muted); font-size: 13px; }
.poRow { font-size: 13px; color: var(--muted); margin-top: 3px; }

.finalStats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.finalStats div { background: var(--panel2); border-radius: 10px; padding: 9px 11px; }
.finalStats span { display: block; color: var(--muted); font-size: 12px; }
.finalStats b { font-size: 17px; }

/* ---------- club ---------- */
.switcher { display: flex; gap: 6px; margin-bottom: 11px; overflow-x: auto; padding-bottom: 2px; }
.swBtn { display: flex; align-items: center; gap: 6px; padding: 7px 11px; font-size: 13px; flex: none; }
.swBtn.active { border-color: var(--accent); color: var(--accent); }
.swBtn .swatch { margin-top: 0; }
.clubHead { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 4px; }
.clubHead h2 { margin: 0; }
.trendLine { font-size: 13px; color: var(--muted); margin-top: 8px; }
.trophies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.trophy { font-size: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }

.staffRow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.staffRow:last-child { border-bottom: none; }
.staffTitle { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); width: 100%; font-weight: 700; }
.staffRow .meter { margin-left: auto; }

.playerRow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.playerRow:last-child { border-bottom: none; }
.pStars { color: var(--accent); font-size: 11px; letter-spacing: -1px; flex: none; }
.pMain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pMeta { color: var(--muted); font-size: 12px; }
.pMood { font-size: 12px; flex: none; }
.pMood.hi { color: var(--good); } .pMood.mid { color: var(--muted); } .pMood.lo { color: var(--bad); }

.kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv:last-child { border-bottom: none; }
.kv span { color: var(--muted); }

/* ---------- league table ---------- */
.tableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.standings { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.standings th { color: var(--muted); font-weight: 600; font-size: 11px; text-align: right; padding: 5px 4px; }
.standings th:nth-child(2) { text-align: left; }
.standings td { padding: 6px 4px; text-align: right; border-top: 1px solid var(--line); }
.standings td.nm { text-align: left; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standings td.pos { color: var(--muted); width: 20px; }
.standings td.pts { font-weight: 700; }
.standings tr.me td { background: rgba(255,194,71,.12); font-weight: 700; }
.standings tr.ch td.pos { color: var(--accent); }
.standings tr.po td.pos { color: var(--good); }
.standings tr.rel td.pos { color: var(--bad); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 9px; }
.lg { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 3px; }
.lg.ch { background: var(--accent); } .lg.po { background: var(--good); } .lg.rel { background: var(--bad); }
.resRow { display: flex; gap: 8px; font-size: 13.5px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.resRow:last-child { border-bottom: none; }
.resRow span:first-child { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 44px; }

/* ---------- empire ---------- */
.empClub { border-top: 1px solid var(--line); padding-top: 11px; margin-top: 11px; }
.empClub:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.ecTop { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.ecMeters { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }

/* ---------- log ---------- */
.logRow { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.logRow:last-child { border-bottom: none; }
.logWhen { color: var(--muted); font-size: 12px; flex: none; width: 60px; font-variant-numeric: tabular-nums; }
.logText { flex: 1; min-width: 0; }
.logRow.tone-good .logText { color: var(--good); }
.logRow.tone-bad .logText { color: var(--bad); }

footer { margin-top: 26px; color: var(--muted); font-size: 12px; text-align: center; line-height: 1.7; }
footer a { color: var(--muted); }

/* ---------- stature ladder ---------- */
.tierChip {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
  white-space: nowrap;
}
.tierChip.t1 { color: #8b9bb0; }
.tierChip.t2 { color: #4fca8f; border-color: rgba(79,202,143,.4); }
.tierChip.t3 { color: #5aa9e6; border-color: rgba(90,169,230,.4); }
.tierChip.t4 { color: #a97fe0; border-color: rgba(169,127,224,.45); }
.tierChip.t5 { color: #241a03; background: var(--accent); border-color: var(--accent); }
.statureRow { display: flex; align-items: center; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
.clubMeta .tierChip { margin-right: 4px; }

.expect {
  background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--muted);
  border-radius: 9px; padding: 9px 11px; margin-top: 10px; font-size: 13px;
}
.expect.good { border-left-color: var(--good); }
.expect.bad { border-left-color: var(--bad); }
.expect b { color: var(--ink); }

.ladder { display: flex; flex-direction: column; gap: 5px; }
.rung {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel2);
}
.rung.here { border-color: var(--accent); }
.rungTo { flex: 1; }
.rungMine { font-weight: 800; font-size: 12px; color: var(--accent); }


/* ---------- whose desk this is, and how many are still waiting ---------- */
.deskWho {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  font-size: 14px;
}
.deskStep {
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}

/* ---------- the folded half of a long card ---------- */
.evMore { margin-top: 4px; }
.evMore summary {
  cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 600;
  list-style: none; padding: 4px 0;
}
.evMore summary::-webkit-details-marker { display: none; }
.evMore summary::before { content: '⌄ '; }
.evMore[open] summary::before { content: '⌃ '; }
.evMore summary:hover { color: var(--accent); }
.evMore .evBody { margin-top: 4px; }

/* ---------- leaving it to your assistant ---------- */
.choice.assistant { border-style: dashed; border-color: var(--accent2); }
.choice.assistant .chLabel { color: var(--accent2); }
.choice.assistant:hover:not(:disabled) { border-color: var(--accent2); background: #1a2534; }
.paNote {
  font-size: 13px; color: var(--accent2); font-weight: 600;
  border-left: 2px solid var(--accent2); padding-left: 9px; margin-bottom: 10px;
}

/* ---------- a league you cannot buy into yet ---------- */
.leagueCard.unaffordable { opacity: .72; }
.lcShort { color: var(--muted); }

/* ---------- log ---------- */
.logClub { color: var(--accent2); font-weight: 700; }

/* ---------- what has changed ---------- */
.changelog { display: flex; flex-direction: column; gap: 10px; }
.clRow {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.clRow.latest { border-color: var(--accent); }
.clHead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.clVer { font-weight: 800; font-size: 13.5px; color: var(--accent); }
.clLine { font-size: 13px; color: var(--muted); line-height: 1.55; }