@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --ink:#14213d; --muted:#8490a6; --line:#e8edf4; --bg:#f5f7fb;
  --blue:#4f7cff; --green:#21b47a; --red:#ed6a6a; --card:#fff;
}

body.dark {
  --ink:#edf2ff;
  --muted:#9aa8c2;
  --line:#2b3852;
  --bg:#101827;
  --card:#182338;
}

* { box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"DM Sans",sans-serif; transition:background .25s,color .25s; }
button,input { font:inherit; }
button { cursor:pointer; border:0; }

#app { height:100%; display:flex; flex-direction:column; }
main { flex:1 1 auto; overflow:hidden; position:relative; }

.topbar { flex:0 0 auto; height:78px; background:var(--card); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 4.2%; }
.brand,.club-mini,.header-status,.colour-row { display:flex; align-items:center; }
.brand { gap:12px; }
.brand-mark,.mini-crest,.crest-preview { background:var(--blue); color:white; display:grid; place-items:center; font-weight:700; transform:rotate(-7deg); }
.brand-mark { width:38px;height:38px;border-radius:11px;font-size:13px; }
.brand strong { font-family:"Space Grotesk";font-size:19px;display:block; }
.brand strong span { color:var(--blue); }
.brand small,.club-mini small { color:var(--muted);font-size:11px;display:block;margin-top:2px; }
.header-status { gap:27px; }
.header-status div { display:flex;flex-direction:column;gap:2px;font-size:13px; }
.muted { color:var(--muted);font-size:11px; }
.icon-btn { background:var(--bg);padding:10px;border-radius:9px;color:var(--blue);font-weight:bold;min-width:37px;transition:background .2s; }
.icon-btn:hover { background:#e9efff; }

.setup-screen { min-height:100%; overflow-y:auto; display:flex;align-items:center;justify-content:center;gap:9vw;padding:45px; background:radial-gradient(circle at 12% 80%,#e5ebff 0,transparent 28%); }
body.dark .setup-screen { background:radial-gradient(circle at 12% 80%,#1b2d55 0,transparent 28%); }
.hero-copy { max-width:430px; }
.eyebrow { color:var(--blue);font-weight:700;font-size:11px;letter-spacing:2px; }
.hero-copy h1 { font:700 58px/1.02 "Space Grotesk";margin:16px 0;letter-spacing:-3px; }
.hero-copy h1 em { color:var(--blue);font-style:normal; }
.hero-copy p { color:var(--muted);line-height:1.7;max-width:360px; }

.setup-card { background:var(--card);border:1px solid var(--line);box-shadow:0 20px 60px #24376114;border-radius:18px;width:370px;padding:29px;position:relative; }
.setup-card h2 { font:700 23px "Space Grotesk";margin:18px 0 23px; }
.crest-preview { width:64px;height:64px;border-radius:18px;font-size:20px; }
.setup-card label { display:block;font-size:12px;color:var(--muted);font-weight:600;margin:15px 0; }
.setup-card input:not([type=color]) { width:100%;display:block;padding:12px 13px;margin-top:7px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--bg);outline:0; }
.setup-card input:focus { border-color:var(--blue); }
.colour-row { gap:10px;margin-top:8px; }
.colour-row input { height:34px;width:52px;border:0;background:none;padding:0; }
.primary-btn { width:100%;background:var(--blue);color:#fff;padding:14px;border-radius:9px;font-weight:700;margin-top:12px;box-shadow:0 7px 15px #4f7cff33; }
.primary-btn span { float:right;font-size:19px; }
.form-note { text-align:center;color:var(--muted);font-size:11px;margin:17px 0 0; }

.hidden { display:none!important; }
#gameScreen { display:flex;height:100%; }
.sidebar { flex:0 0 245px; height:100%; overflow-y:auto; background:var(--card);border-right:1px solid var(--line);padding:27px 17px;display:flex;flex-direction:column; }
.club-mini { gap:10px;padding:0 10px 28px; }
.mini-crest { width:39px;height:39px;border-radius:11px;font-size:12px; }
.club-mini strong { display:block;font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.sidebar nav { display:grid;gap:5px; }
.nav-item { text-align:left;background:transparent;padding:12px 14px;color:var(--muted);border-radius:8px;font-weight:600;font-size:13px; }
.nav-item:first-letter { font-size:17px; }
.nav-item.active,.nav-item:hover { background:#eef2ff;color:var(--blue); }
body.dark .nav-item.active,body.dark .nav-item:hover { background:#24345c; }
.nav-item span { margin-left:9px; }
.sidebar-bottom { margin-top:auto; }
.club-budget { padding:15px;border:1px solid var(--line);border-radius:10px;margin-bottom:12px; }
.club-budget span { color:var(--muted);font-size:11px;display:block; }
.club-budget strong { font:700 20px "Space Grotesk";display:block;margin-top:4px; }
.reset-btn { background:none;color:var(--muted);font-size:12px;padding:8px 4px; }

.content { flex:1; min-width:0; height:100%; overflow-y:auto; padding:38px 4.5%; max-width:1320px; }
.page-head { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:27px; }
.page-head h1 { font:700 29px "Space Grotesk";margin:0 0 5px; }
.page-head p { color:var(--muted);font-size:13px;margin:0; }
.season-actions { display:flex;gap:10px; }
.secondary-btn,.advance-btn { border-radius:8px;padding:11px 16px;font-weight:700;font-size:12px; }
.secondary-btn { border:1px solid var(--line);background:var(--card);color:var(--ink); }
.advance-btn { background:var(--ink);color:var(--bg); }

.grid { display:grid;grid-template-columns:1.55fr 1fr;gap:20px; }
.card { background:var(--card);border:1px solid var(--line);border-radius:13px;padding:21px; }
.card-title { display:flex;justify-content:space-between;align-items:center;margin-bottom:17px; }
.card-title h3 { font:700 15px "Space Grotesk";margin:0; }
.card-title a { color:var(--blue);font-size:11px;font-weight:700;cursor:pointer; }

.hero-card { background:linear-gradient(120deg,#162541,#243e72);color:white;border:0;min-height:190px;position:relative;overflow:hidden; }
.hero-card:after { content:"";position:absolute;width:220px;height:220px;border:35px solid #ffffff0d;border-radius:50%;right:-50px;top:-60px; }
.hero-card .eyebrow { color:#9db4ff; }
.hero-card h2 { font:700 27px "Space Grotesk";margin:12px 0 5px; }
.hero-card p { color:#b9c6dc;font-size:12px; }
.hero-stat { margin-top:22px;display:flex;gap:35px; }
.hero-stat strong { display:block;font-size:21px; }
.hero-stat span { font-size:10px;color:#a8b8d1; }

.form-row { display:flex;gap:10px; }
.match-card { display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line); }
.match-card:last-child { border-bottom:0; }
.match-team { display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600; }
.team-dot { width:24px;height:24px;border-radius:7px;background:#e9efff;color:var(--blue);display:grid;place-items:center;font-size:9px;font-weight:700; }
body.dark .team-dot,body.dark .player-avatar { background:#263762; }
.result { font-weight:700;font-size:13px; }
.result.win { color:var(--green); }
.result.loss { color:var(--red); }
.result.draw { color:#e2a22b; }

.metric-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px; }
.metric { background:var(--card);border:1px solid var(--line);border-radius:11px;padding:16px; }
.metric small { color:var(--muted);font-size:11px; }
.metric strong { display:block;font:700 23px "Space Grotesk";margin-top:8px; }
.metric .positive { color:var(--green); }

.table-wrap { overflow-x:auto; }
.league-table { width:100%;border-collapse:collapse;font-size:12px; }
.league-table th { text-align:left;color:var(--muted);font-size:10px;font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line); }
.league-table td { padding:12px;border-bottom:1px solid var(--line); }
.league-table th:not(:first-child),.league-table td:not(:first-child) { text-align:center; }
.league-table tr.you { background:#eef2ff;font-weight:700; }
body.dark .league-table tr.you { background:#24345c; }
.league-table tr.promo td:first-child { border-left:3px solid var(--green); }
.league-table tr.relegation td:first-child { border-left:3px solid var(--red); }
.pos { width:28px;color:var(--muted); }
.pill { background:#e9faf3;color:var(--green);padding:4px 7px;border-radius:20px;font-size:10px;font-weight:700; }
.warning { background:#fff7e3;color:#c3891d; }
.danger { background:#fff0f0;color:var(--red); }

.player-list { display:grid;grid-template-columns:repeat(2,1fr);gap:10px; }
.player { display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:12px; }
.player-avatar { width:35px;height:35px;border-radius:50%;background:#eaf0ff;color:var(--blue);display:grid;place-items:center;font-weight:700;font-size:12px; }
.player-info { flex:1; }
.player-info strong { display:block;font-size:12px; }
.player-info small { color:var(--muted);font-size:10px; }
.rating { font:700 15px "Space Grotesk";color:var(--blue); }
.position { color:var(--muted);font-size:10px; }

.transfer-list { display:grid;gap:10px; }
.transfer-row { display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--line);padding:12px 0; }
.transfer-row .player-info { flex:1; }
.buy-btn { background:#eef2ff;color:var(--blue);padding:8px 11px;border-radius:7px;font-size:11px;font-weight:700; }
body.dark .buy-btn { background:#263762; }
.buy-btn:disabled { opacity:.45;cursor:not-allowed; }

/* Tactics page layout */
.tactics-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-rows: auto 1fr;
  gap: 20px;
  align-items: start;
}

.tactics-layout > .card:nth-child(1) { grid-column: 1; grid-row: 1; }
.tactics-layout > .card:nth-child(2) { grid-column: 2; grid-row: 1; }
.tactics-layout > .pitch-card { grid-column: 1; grid-row: 2; }
.tactics-layout > .bench-panel { grid-column: 2; grid-row: 2; }

.pitch-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pitch {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 2 / 3;
  margin: 10px auto 18px;
  background:
    repeating-linear-gradient(
      to bottom,
      #2f9e4f 0px,
      #2f9e4f 22px,
      #2ba84a 22px,
      #2ba84a 44px
    );
  border-radius: 18px;
  border: 6px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.35),
    0 18px 45px rgba(0,0,0,0.22);
  overflow: hidden;
}

.pitch-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.halfway-line {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 2px;
  background: rgba(255,255,255,0.75);
  transform: translateY(-50%);
}

.center-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  aspect-ratio: 1 / 1;
  border: 2px solid rgba(255,255,255,0.75);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}

.center-spot,
.penalty-spot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}

.center-spot { left: 50%; top: 50%; }

.penalty-area,
.goal-area {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,0.75);
}

.penalty-area { width: 56%; height: 16%; }
.penalty-area.top { top: 3.5%; border-top: 0; }
.penalty-area.bottom { bottom: 3.5%; border-bottom: 0; }

.goal-area { width: 28%; height: 6.5%; }
.goal-area.top { top: 3.5%; border-top: 0; }
.goal-area.bottom { bottom: 3.5%; border-bottom: 0; }

.penalty-spot.top { left: 50%; top: 14%; }
.penalty-spot.bottom { left: 50%; bottom: 14%; }

.corner-arc {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.75);
  border-radius: 50%;
}

.corner-arc.tl { top: 4px; left: 4px; clip-path: inset(50% 0 0 50%); }
.corner-arc.tr { top: 4px; right: 4px; clip-path: inset(50% 50% 0 0); }
.corner-arc.bl { bottom: 4px; left: 4px; clip-path: inset(0 0 50% 50%); }
.corner-arc.br { bottom: 4px; right: 4px; clip-path: inset(0 50% 50% 0); }

.slot {
  position: absolute;
  width: 72px;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  z-index: 2;
}

.slot-label {
  font-size: 9px;
  color: #fff;
  background: rgba(0,0,0,0.45);
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
}

.pitch-token,
.slot .player-token {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  border: 2px solid var(--blue);
  box-shadow: 0 5px 14px rgba(0,0,0,0.25);
}

.slot .player-name {
  font-size: 9px;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lineup-rating {
  text-align: center;
  font: 700 22px "Space Grotesk";
}

.bench-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 21px;
  min-height: 100%;
}

.bench-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.bench-player {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  cursor: grab;
  font-size: 11px;
  font-weight: 600;
}

.bench-player .player-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eaf0ff;
  color: var(--blue);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
}

.bench-player.dragging,
.slot.dragging {
  opacity: .5;
}

.drop-target .player-token,
.drop-target.bench-player {
  outline: 2px dashed var(--blue);
  outline-offset: 2px;
}

.toast { position:fixed;bottom:25px;right:25px;background:var(--ink);color:var(--bg);padding:13px 17px;border-radius:8px;font-size:12px;transform:translateY(100px);opacity:0;transition:.3s; z-index:30; }
.toast.show { transform:translateY(0);opacity:1; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: rgba(132,144,166,0.45); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

@media(max-width:900px) {
  .tactics-layout { grid-template-columns: 1fr; grid-template-rows: auto; }
  .tactics-layout > .card:nth-child(1),
  .tactics-layout > .card:nth-child(2),
  .tactics-layout > .pitch-card,
  .tactics-layout > .bench-panel { grid-column: 1; grid-row: auto; }
  .pitch { max-width: 100%; }
  .bench-list { grid-template-columns: 1fr; }
}

@media(max-width:800px) {
  .setup-screen{flex-direction:column;gap:25px;padding:35px 20px}
  .hero-copy h1{font-size:43px}
  .setup-card{width:100%;max-width:390px}
  .sidebar{width:68px;padding:20px 8px}
  .club-mini{padding:0 6px 25px}
  .club-mini>div:last-child,.nav-item span,.club-budget,.reset-btn{display:none}
  .nav-item{text-align:center;padding:13px 3px;font-size:19px}
  .nav-item:first-letter{font-size:19px}
  .content{padding:25px 15px}
  .grid{grid-template-columns:1fr}
  .player-list{grid-template-columns:1fr}
  .topbar{padding:0 15px}
  .brand small{display:none}
  .header-status{gap:10px}
  .metric-grid{gap:7px}
  .metric{padding:11px}
  .metric strong{font-size:18px}
    .page-head-actions {
    width: 100%;
    justify-content: space-between;
  }

  .page-bank {
    min-width: 100px;
  }

}
/* Add these rules at the end of styles.css */

.match-result-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 18, 35, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease;
}