/* =========================================================
   WCTyper — Uiverse-style glassmorphism
   United 2026 World Cup palette:
   Green #3CAC3B · Hermes Blue #2A398D · Torch Red #E61D25
   Light Gray #D1D4D1 · Dark Heather #474A4A
   ========================================================= */
:root {
  --bg: #0a0e1c;
  --txt: #eef1f8;
  --muted: #a4abc0;

  /* WC brand colours */
  --green: #3cac3b;
  --green-bright: #57d356;
  --blue: #2a398d;
  --blue-bright: #4358c9;
  --red: #e61d25;
  --red-bright: #ff4d54;
  --lgray: #d1d4d1;
  --dgray: #474a4a;
  --gold: #ffd24a;

  /* glass */
  --glass: rgba(255, 255, 255, .055);
  --glass-2: rgba(255, 255, 255, .10);
  --stroke: rgba(255, 255, 255, .14);
  --stroke-strong: rgba(255, 255, 255, .28);
  --error: var(--red-bright);

  /* gradients */
  --grad-brand: linear-gradient(90deg, #57d356, #4358c9 50%, #ff4d54);
  --grad-primary: linear-gradient(135deg, #2f43b8 0%, #3cac3b 100%);
  --grad-primary-hover: linear-gradient(135deg, #3a52d6 0%, #45c945 100%);
  --grad-blue: linear-gradient(135deg, #4358c9, #2a398d);
  --grad-green: linear-gradient(135deg, #57d356, #3cac3b);
  --grad-red: linear-gradient(135deg, #ff5a61, #e61d25);
  --grad-win: linear-gradient(135deg, #57d356, #3cac3b);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-full: 999px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--txt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}
/* animated WC-colour blobs */
body::before {
  content: '';
  position: fixed; inset: -20% -10% -10% -10%;
  z-index: -1;
  background:
    radial-gradient(42% 42% at 14% 18%, rgba(60, 172, 59, .42), transparent 60%),
    radial-gradient(45% 45% at 86% 14%, rgba(42, 57, 141, .55), transparent 60%),
    radial-gradient(46% 50% at 78% 86%, rgba(230, 29, 37, .40), transparent 60%),
    radial-gradient(42% 46% at 18% 90%, rgba(67, 88, 201, .40), transparent 60%);
  filter: saturate(125%);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(0,-3%,0) scale(1.08); }
  100% { transform: translate3d(0,2%,0) scale(1.04); }
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--error); min-height: 1.2em; margin: 8px 0 0; font-size: .85rem; }
.spacer { flex: 1; }
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  line-height: 1; user-select: none;
}
.grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------- Glass surface ---------------- */
.card, .section-card, .match, .top-app-bar, .tabs, .toast {
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--stroke);
}

/* ---------------- Buttons ---------------- */
button {
  position: relative; overflow: hidden;
  font: 600 .95rem 'Poppins', sans-serif;
  cursor: pointer; border: none;
  border-radius: var(--r-full);
  padding: 12px 24px; color: #fff;
  background: var(--grad-primary); background-size: 160% 160%; background-position: 0% 50%;
  box-shadow: 0 6px 18px -4px rgba(60, 172, 59, .5), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-position .5s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
button:hover {
  background-position: 100% 50%;
  box-shadow: 0 10px 28px -4px rgba(67, 88, 201, .6), inset 0 1px 0 rgba(255,255,255,.3);
  transform: translateY(-2px);
}
button:active { transform: translateY(0) scale(.98); }
button:disabled { opacity: .45; pointer-events: none; box-shadow: none; }

button.secondary {
  background: var(--glass-2); color: var(--txt);
  border: 1px solid var(--stroke-strong); box-shadow: none;
}
button.secondary:hover { background: rgba(255,255,255,.16); box-shadow: 0 6px 18px -6px rgba(67,88,201,.5); }
.btn-block { width: 100%; }
.save-btn { padding: 9px 20px; font-size: .9rem; }

.icon-btn {
  background: var(--glass-2); color: var(--txt);
  border: 1px solid var(--stroke);
  padding: 0; width: 42px; height: 42px;
  display: grid; place-items: center; box-shadow: none;
}
.icon-btn:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(60,172,59,.6); }
.icon-btn .material-symbols-outlined { font-size: 22px; }

/* Ripple */
.ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,.5); opacity: .5; pointer-events: none;
  animation: ripple .55s var(--ease);
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------------- Text fields ---------------- */
.field {
  position: relative; margin-top: 16px;
  background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field:focus-within { border-color: transparent; box-shadow: 0 0 0 2px var(--green), 0 8px 24px -8px rgba(60,172,59,.6); }
.field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 22px; }
.field input, .field select {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--txt); font: 500 1rem 'Poppins', sans-serif; padding: 22px 14px 8px 46px;
}
.field select { appearance: none; -webkit-appearance: none; }
.field select option { background: #11162a; color: var(--txt); }
.field-label {
  position: absolute; left: 46px; top: 7px;
  color: var(--muted); font-size: .72rem; font-weight: 500; pointer-events: none;
  transition: color .2s var(--ease);
}
.field:focus-within .field-label { color: var(--green-bright); }
.field input::placeholder { color: var(--muted); opacity: .55; }
.field.has-picker select { padding-right: 42px; }
.field-arrow {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 22px; pointer-events: none;
}

input, select {
  font: 500 1rem 'Poppins', sans-serif;
  background: var(--glass); color: var(--txt);
  border: 1px solid var(--stroke); border-radius: var(--r-sm);
  padding: 12px 14px; width: 100%; outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus, select:focus { border-color: transparent; box-shadow: 0 0 0 2px var(--blue-bright), 0 8px 22px -10px rgba(67,88,201,.7); }
select option { background: #11162a; color: var(--txt); }
label { display: block; margin: 14px 0 0; font-size: .8rem; color: var(--muted); }
label input, label select { margin-top: 6px; }

/* ---------------- Login ---------------- */
.screen { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.login-card { max-width: 370px; width: 100%; text-align: center; }
.login-logo {
  width: 72px; height: 72px; margin: 0 auto 14px;
  border-radius: var(--r-md);
  background: var(--grad-primary); background-size: 180% 180%;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -6px rgba(60,172,59,.65);
  animation: float 4s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-6px); } }
.login-logo .material-symbols-outlined { font-size: 40px; color: #fff; }
.login-card h1 { margin: 0 0 4px; font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; }
.login-card .field { text-align: left; }
.login-card .btn-block { margin-top: 22px; }
.hint { font-size: .8rem; margin: 10px 0 0; min-height: 1em; }

.card { border-radius: var(--r-lg); padding: 28px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.7); }

/* ---------------- Top app bar ---------------- */
.top-app-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  position: sticky; top: 0; z-index: 6;
  border-left: none; border-right: none; border-top: none; border-radius: 0;
}
.brand-icon { font-size: 28px; color: var(--gold); }
.app-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--txt); }
.who { font-size: .82rem; color: var(--txt); font-weight: 600;
  background: var(--glass-2); border: 1px solid var(--stroke); padding: 6px 14px; border-radius: var(--r-full); }

/* ---------------- Tabs ---------------- */
.tabs {
  display: flex; gap: 6px; padding: 8px; margin: 12px 14px 0; max-width: 760px;
  border-radius: var(--r-full); position: sticky; top: 70px; z-index: 5; overflow-x: auto;
}
@media (min-width: 788px) { .tabs { margin: 12px auto 0; } }
.tab-btn {
  position: relative;
  flex: 1 1 auto; background: transparent; color: var(--muted); box-shadow: none;
  border-radius: var(--r-full); padding: 9px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.tab-count {
  position: absolute; top: 4px; right: 8px;
  min-width: 17px; height: 17px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  font-size: .62rem; font-weight: 700; line-height: 1; color: #fff;
  background: var(--blue-bright); box-shadow: 0 2px 6px -1px rgba(0,0,0,.5);
}
.tab-count:empty { display: none; }
[data-tab="results"] .tab-count { background: var(--green); }
.tab-btn:hover { background: rgba(255,255,255,.07); color: var(--txt); transform: none; box-shadow: none; }
.tab-btn .material-symbols-outlined { font-size: 22px; }
.tab-btn.active { color: #fff; background: var(--grad-primary); background-size: 160% 160%; box-shadow: 0 6px 18px -5px rgba(60,172,59,.7); }

main { padding: 18px 14px 48px; max-width: 760px; margin: 0 auto; }
.empty { text-align: center; color: var(--muted); padding: 48px 16px; font-size: .95rem; }

/* ---------------- Section heads / cards ---------------- */
.day-head {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  margin: 24px 6px 12px; display: flex; align-items: center; gap: 9px;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.day-head::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-green); box-shadow: 0 0 10px var(--green); }
.day-head.live-head { color: var(--red-bright); -webkit-text-fill-color: var(--red-bright); }
.day-head.live-head::before { background: var(--red); box-shadow: 0 0 0 0 rgba(230,29,37,.6); animation: pulse 1.4s ease-out infinite; }

.section-card { border-radius: var(--r-md); padding: 20px; margin-bottom: 16px; box-shadow: 0 16px 44px -22px rgba(0,0,0,.7); }
.section-card h2 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.section-card h2 .material-symbols-outlined { font-size: 24px; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------- Match cards ---------------- */
.match {
  position: relative; border-radius: var(--r-md); padding: 16px; margin-bottom: 14px;
  box-shadow: 0 14px 38px -22px rgba(0,0,0,.7);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.match:hover { transform: translateY(-3px); border-color: var(--stroke-strong); box-shadow: 0 22px 50px -24px rgba(67,88,201,.55); }
.match.finished::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--grad-win); box-shadow: 0 0 14px rgba(60,172,59,.7);
}

.match-meta { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; margin-bottom: 14px; }
.badge {
  border-radius: var(--r-full); padding: 4px 12px; font-weight: 600; font-size: .72rem;
  background: linear-gradient(135deg, rgba(67,88,201,.32), rgba(42,57,141,.32));
  border: 1px solid rgba(67,88,201,.5); color: var(--txt);
}
.status { font-size: .74rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.status.final { color: var(--muted); }

/* Live status: minute + pulsing red LIVE badge */
.status-live { display: inline-flex; align-items: center; gap: 8px; }
.minute { font-size: .76rem; font-weight: 800; color: var(--red-bright); }
.live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: var(--red); border-radius: var(--r-full);
  padding: 3px 9px 3px 7px;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: pulse 1.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
  70% { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.match.live {
  border-color: rgba(230,29,37,.6);
  box-shadow: 0 0 0 1px rgba(230,29,37,.45), 0 14px 38px -22px rgba(230,29,37,.6);
}

/* "Locked in" checklist (before kickoff — who has predicted) */
.who-in { margin-top: 14px; border-top: 1px solid var(--stroke); padding-top: 12px; }
.who-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; }
.who-name { font-weight: 600; color: var(--txt); font-size: .92rem; }
.who-row:not(.done) .who-name { color: var(--muted); }
.who-check { font-size: 21px; color: var(--stroke-strong); }
.who-row.done .who-check { color: var(--green-bright); }

/* Stacked team rows: [flag name] .......... [score / input] */
.teams { display: flex; flex-direction: column; gap: 12px; }
.team-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.team-name { display: flex; align-items: center; gap: 13px; min-width: 0; flex: 1; }
.flag {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  object-fit: cover; box-shadow: 0 0 0 1px var(--stroke-strong), 0 2px 6px -2px rgba(0,0,0,.5);
}
.team-label {
  font-size: 1.18rem; font-weight: 500; color: var(--txt); line-height: 1.2;
}
.team-row.win .team-label { color: #fff; font-weight: 700; }
.team-row.loss .team-label { color: var(--muted); }
.team-row.draw .team-label { color: var(--txt); }
.team-score {
  font-weight: 700; font-size: 1.35rem; color: var(--txt);
  min-width: 24px; text-align: right; flex: none;
}
.team-row.loss .team-score { color: var(--muted); font-weight: 600; }
.team-score.muted { color: var(--muted); }
.score-input {
  width: 56px; text-align: center; padding: 8px 4px; flex: none;
  font-size: 1.2rem; font-weight: 800; border-radius: var(--r-sm);
}
.match-actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.match-actions > span { color: var(--muted); font-size: .9rem; }

/* Predictions reveal */
.others { margin-top: 16px; border-top: 1px solid var(--stroke); padding-top: 12px; }
.preds-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; font-weight: 600; }
.others .row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 6px;
  border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--stroke);
  color: var(--muted); font-size: .9rem;
}
.others .row b { color: var(--txt); min-width: 64px; font-weight: 600; }
.others .row .p {
  margin-left: auto; font-weight: 700; font-size: .8rem; padding: 3px 12px;
  border-radius: var(--r-full); border: 1px solid transparent;
}
.others .row .p.p3 { background: var(--green); color: #fff; box-shadow: 0 4px 12px -5px rgba(60,172,59,.7); }
.others .row .p.p1 { background: var(--gold); color: #3a2c00; box-shadow: 0 4px 12px -5px rgba(255,210,74,.6); }
.others .row .p.p0 { background: rgba(255,255,255,.10); color: var(--muted); border-color: var(--stroke); }

/* ---------------- Leaderboard ---------------- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 8px; text-align: center; }
th { color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--stroke); }
td { border-bottom: 1px solid var(--stroke); }
tbody tr:last-child td { border-bottom: none; }
td.name, th.name { text-align: left; font-weight: 700; }
tr.me { background: linear-gradient(90deg, rgba(67,88,201,.20), rgba(60,172,59,.12)); }
tr.me td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
tr.me td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.total { font-weight: 800; font-size: 1.15rem; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rank { font-weight: 800; color: var(--muted); }
/* Live/provisional leaderboard cues */
.section-card h2 .live-badge { margin-left: auto; font-size: .6rem; }
.board-live-note { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; font-size: .82rem; }
.board-live-note .material-symbols-outlined { font-size: 18px; color: var(--red-bright); }
.total .live-dot { display: inline-block; vertical-align: middle; margin-left: 7px; background: var(--red-bright); }
/* Podium in WC colours: green / blue / red */
tbody tr:nth-child(1) .rank { color: var(--green-bright); }
tbody tr:nth-child(2) .rank { color: var(--blue-bright); }
tbody tr:nth-child(3) .rank { color: var(--red-bright); }

/* ---------------- Rules / admin ---------------- */
.rules-list { line-height: 2; }
.rules-list .k { display: inline-block; min-width: 60px; color: #fff; font-weight: 700; border-radius: var(--r-full); padding: 3px 14px; margin-right: 10px; text-align: center; font-size: .85rem; }
.rules-list div:nth-child(1) .k { background: var(--grad-green); }
.rules-list div:nth-child(2) .k { background: var(--grad-blue); }
.rules-list div:nth-child(3) .k { background: linear-gradient(135deg, #6b7280, #474a4a); }
.admin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Restore/edit predictions grid: player | home | away */
.pred-grid { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pred-row { display: grid; grid-template-columns: 1fr 76px 76px; gap: 10px; align-items: center; }
.pred-row .pred-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pred-head { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pred-head span:not(.pred-name) { text-align: center; }
.pred-row input { padding: 9px 8px; text-align: center; }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  padding: 14px 22px; border-radius: var(--r-full); z-index: 30;
  font-size: .9rem; font-weight: 600; color: var(--txt);
  border: 1px solid var(--stroke-strong); box-shadow: 0 12px 40px -10px rgba(0,0,0,.8);
  animation: snack .3s var(--ease); max-width: calc(100vw - 32px);
}
.toast.err { border-color: rgba(230,29,37,.6); color: var(--red-bright); }
@keyframes snack { from { transform: translateX(-50%) translateY(18px); opacity: 0; } }

/* =========================================================
   Light theme
   ========================================================= */
body.theme-light {
  --bg: #eef1f6;
  --txt: #1b2233;
  --muted: #5b6377;
  --glass: rgba(255, 255, 255, .60);
  --glass-2: rgba(255, 255, 255, .78);
  --stroke: rgba(27, 34, 51, .10);
  --stroke-strong: rgba(27, 34, 51, .22);
}
body.theme-light::before {
  background:
    radial-gradient(42% 42% at 14% 18%, rgba(60, 172, 59, .30), transparent 60%),
    radial-gradient(45% 45% at 86% 14%, rgba(42, 57, 141, .26), transparent 60%),
    radial-gradient(46% 50% at 78% 86%, rgba(230, 29, 37, .22), transparent 60%),
    radial-gradient(42% 46% at 18% 90%, rgba(67, 88, 201, .24), transparent 60%);
}
body.theme-light .field select option,
body.theme-light select option { background: #ffffff; color: var(--txt); }