* { box-sizing: border-box; }

:root {
  --sky: #bfe6ff;
  --grass: #3fa34d;
  --grass-dark: #359142;
  --ink: #16281c;
  --paper: #ffffff;
  --accent: #ffcc33;
  --accent-dark: #e0a800;
  --good: #34c759;
  --bad: #ff5c5c;
  --card-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: linear-gradient(180deg, var(--sky) 0%, #eafff1 55%, #eafff1 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
}

#wrap {
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 18px 16px 32px;
  position: relative;
}

.hidden { display: none !important; }

.sectionLabel {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5a6b5f;
  margin: 18px 0 8px;
  text-align: center;
}

.primaryBtn {
  display: block;
  width: 100%;
  border: none;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: #3a2900;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 14px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(224, 168, 0, 0.45);
  margin-top: 16px;
}
.primaryBtn:active { transform: scale(0.98); }
.primaryBtn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

.secondaryBtn {
  display: block;
  margin: 14px auto 0;
  border: none;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--card-shadow);
}
.secondaryBtn:active { transform: scale(0.97); }

.linkBtn {
  display: block;
  width: 100%;
  text-align: center;
  border: none;
  background: none;
  color: #5a6b5f;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 12px;
  cursor: pointer;
  text-decoration: underline;
}

h1 {
  text-align: center;
  margin: 4px 0 14px;
  font-size: 1.7rem;
  color: var(--accent-dark);
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
}

/* ---------- Home / squad screen ---------- */

#statsRow {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.statPill {
  background: var(--paper);
  box-shadow: var(--card-shadow);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
}

#rivalCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--paper);
  box-shadow: var(--card-shadow);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 4px;
}
.rivalLabel {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a6b5f;
}
#rivalName { font-size: 1.2rem; font-weight: 800; margin: 2px 0; }
#rivalStats { font-size: 0.85rem; color: #5a6b5f; font-weight: 600; }

#rosterGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.playerCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 3px solid transparent;
  background: var(--paper);
  box-shadow: var(--card-shadow);
  border-radius: 12px;
  padding: 10px 4px;
  cursor: pointer;
}
.playerCard .pName { font-weight: 800; font-size: 0.8rem; text-align: center; }
.playerCard .pRole { font-size: 0.68rem; color: #5a6b5f; }
.playerCard .pStats { font-size: 0.68rem; color: #5a6b5f; font-weight: 600; }
.playerCard.selected {
  border-color: var(--accent-dark);
  background: #fff6da;
}
.playerCard:active { transform: scale(0.96); }

#formationRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.formBtn {
  border: none;
  background: var(--paper);
  box-shadow: var(--card-shadow);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 4px;
  border-radius: 10px;
  cursor: pointer;
}
.formBtn.active {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: #3a2900;
}
.formBtn:active { transform: scale(0.96); }

/* ---------- Career mode screen ---------- */

#careerDivisionPill {
  display: block;
  width: fit-content;
  margin: 0 auto 10px;
  text-align: center;
}

#careerStatsRow {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

#fixtureList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.fixtureRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  box-shadow: var(--card-shadow);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 700;
}
.fixtureRow small { font-weight: 500; color: #5a6b5f; }
.fixtureRow .fixtureStatus { white-space: nowrap; }
.fixtureRow.pending .fixtureStatus { color: #8a929b; font-weight: 600; }
.fixtureRow.win .fixtureStatus { color: var(--good); }
.fixtureRow.draw .fixtureStatus { color: var(--accent-dark); }
.fixtureRow.loss .fixtureStatus { color: var(--bad); }

.hintText {
  text-align: center;
  font-size: 0.78rem;
  color: #5a6b5f;
  margin: 6px 0 0;
}

#seasonCompleteBox {
  text-align: center;
  margin-top: 14px;
}
#seasonOutcomeMsg {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 4px;
  color: var(--accent-dark);
}

/* ---------- Transfer market screen ---------- */

.screenTitle {
  text-align: center;
  font-size: 1.3rem;
  color: var(--accent-dark);
  margin: 4px 0 12px;
}

#marketCoinsPill {
  display: block;
  width: fit-content;
  margin: 0 auto 16px;
  text-align: center;
}

#squadGrid, #buyGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.marketCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--paper);
  box-shadow: var(--card-shadow);
  border-radius: 12px;
  padding: 10px 4px;
}
.marketCard .pName { font-weight: 800; font-size: 0.8rem; text-align: center; }
.marketCard .pRole { font-size: 0.68rem; color: #5a6b5f; }
.marketCard .pStats { font-size: 0.68rem; color: #5a6b5f; font-weight: 600; }
.marketCard .priceTag { font-size: 0.72rem; font-weight: 800; color: var(--accent-dark); margin-top: 2px; }

.marketBtn {
  margin-top: 6px;
  border: none;
  background: var(--accent);
  color: #3a2900;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  width: 100%;
}
.marketBtn:disabled { background: #d7dce1; color: #8a929b; cursor: default; }
.marketBtn:active:not(:disabled) { transform: scale(0.95); }

/* ---------- Match time-lapse screen ---------- */

#matchScreen { text-align: center; }

#matchVs {
  font-weight: 700;
  color: #5a6b5f;
  margin: 6px 0 10px;
}

#matchLiveScore {
  font-size: 2.4rem;
  font-weight: 900;
  margin-bottom: 12px;
}

#clockOuter {
  width: 100%;
  height: 10px;
  background: var(--paper);
  border-radius: 999px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  margin-bottom: 6px;
}
#clockFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--grass), var(--grass-dark));
  transition: width 2.6s linear;
}
#clockLabel {
  font-size: 0.85rem;
  font-weight: 700;
  color: #5a6b5f;
  margin-bottom: 14px;
}

#ticker {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  min-height: 140px;
}
.tickerItem {
  background: var(--paper);
  box-shadow: var(--card-shadow);
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 0.9rem;
  animation: tickerIn 0.3s ease;
}
@keyframes tickerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

#scoreRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 8px;
}

.scoreBox {
  background: var(--paper);
  box-shadow: var(--card-shadow);
  border-radius: 12px;
  padding: 8px 16px;
  text-align: center;
  min-width: 70px;
}
.scoreLabel {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a6b5f;
}
.scoreBox span:last-child { display: block; font-size: 1.5rem; font-weight: 800; }

#roundInfo {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

#winsBox {
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #5a6b5f;
  margin-bottom: 10px;
}

#phaseLabel {
  text-align: center;
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 10px;
  min-height: 1.4rem;
  color: var(--accent-dark);
}

#pitch {
  position: relative;
  width: 320px;
  height: 340px;
  margin: 0 auto;
  background: repeating-linear-gradient(
    0deg,
    var(--grass) 0px, var(--grass) 34px,
    var(--grass-dark) 34px, var(--grass-dark) 68px
  );
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

#goalFrame {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 300px;
  height: 170px;
  background: rgba(255, 255, 255, 0.08);
  border: 6px solid #f4f7f6;
  border-bottom: none;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.15);
}
#goalFrame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.35) 1px, transparent 1px);
  background-size: 15px 15px;
  opacity: 0.5;
}

.zoneBtn {
  position: absolute;
  width: 92px;
  height: 78px;
  transform: translate(-50%, -50%);
  border: none;
  background: rgba(255, 255, 255, 0);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.zoneBtn:hover, .zoneBtn:active {
  background: rgba(255, 204, 51, 0.25);
}
.zoneBtn.chosen {
  background: rgba(255, 204, 51, 0.45);
}
.zoneBtn:disabled { cursor: default; }

#keeperSprite, #ballSprite {
  position: absolute;
  font-size: 2.2rem;
  transform: translate(-50%, -50%);
  transition: left 0.5s cubic-bezier(.2,.7,.3,1), top 0.5s cubic-bezier(.2,.7,.3,1);
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.35));
  pointer-events: none;
  z-index: 3;
}
#ballSprite { font-size: 1.8rem; }

#powerPanel {
  margin-top: 14px;
  text-align: center;
}
#powerPanel.hidden { display: none; }

#powerHint {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: #5a6b5f;
  font-weight: 600;
}

#powerBarOuter {
  position: relative;
  width: 260px;
  height: 22px;
  margin: 0 auto 12px;
  background: var(--paper);
  border-radius: 999px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
#powerSweet {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42%;
  width: 16%;
  background: rgba(52, 199, 89, 0.35);
}
#powerMarker {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 6px;
  border-radius: 3px;
  background: var(--ink);
  left: 0%;
}

#kickBtn {
  border: none;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: #3a2900;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 12px 30px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(224, 168, 0, 0.45);
}
#kickBtn:active { transform: scale(0.97); }

#resultMsg {
  text-align: center;
  font-weight: 800;
  font-size: 1.1rem;
  min-height: 1.6rem;
  margin-top: 10px;
}
#resultMsg.good { color: var(--good); }
#resultMsg.bad { color: var(--bad); }

.overlay {
  position: fixed;
  inset: 0;
  background: #132a1c;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  color: white;
}
.overlay.hidden { display: none; }
.overlay h2 { margin: 0; font-size: 1.6rem; color: var(--accent); }
.overlay p { margin: 0; color: #d7e8dc; line-height: 1.5; }
.overlay button {
  border: none;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: #3a2900;
  font-weight: 800;
  font-size: 1rem;
  padding: 13px 30px;
  border-radius: 999px;
  cursor: pointer;
}
.overlay button:active { transform: scale(0.97); }