html, body { margin:0; padding:0; min-height:100%; background: #051a14; }
body { min-height: 100vh; min-height: 100dvh; }
#predictor-root, #predictor-root * { box-sizing: border-box; }
#predictor-root {
  --bg: #07211a;
  --bg-deep: #051a14;
  --pitch-line: rgba(240,236,222,0.06);
  --green: #1f8a4c;
  --green-bright: #35c778;
  --gold: #d9a441;
  --gold-bright: #f0c25e;
  --gold-soft: rgba(217,164,65,0.16);
  --purple: #9d4edd;
  --purple-bright: #d9a5ff;
  --text: #f3efe2;
  --text-dim: #9fbcae;
  --red: #e0574a;
  --card: #0c3527;
  --card-hi: #0f3f2d;
  --card-border: rgba(217,164,65,0.22);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-card: 0 10px 30px -12px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-btn: 0 6px 18px -6px rgba(217,164,65,0.45);
  --ease: cubic-bezier(.16,1,.3,1);
  direction: inherit;
  font-family: 'Tajawal', sans-serif;
  color: var(--text);
  background:
    repeating-linear-gradient(180deg, transparent 0 39px, var(--pitch-line) 39px 40px),
    radial-gradient(ellipse 900px 500px at 50% -8%, rgba(53,199,120,0.16) 0%, transparent 60%),
    radial-gradient(ellipse at 50% -10%, #0d4a34 0%, var(--bg) 55%, var(--bg-deep) 100%);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 22px 14px 60px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
#predictor-root h1, #predictor-root h2, #predictor-root h3, #predictor-root .disp {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
}
html[dir="ltr"] #predictor-root h1, html[dir="ltr"] #predictor-root h2, html[dir="ltr"] #predictor-root h3,
html[dir="ltr"] #predictor-root .disp, html[dir="ltr"] #predictor-root .pr-title, html[dir="ltr"] #predictor-root .pr-title-text,
html[dir="ltr"] #predictor-root .pr-tab, html[dir="ltr"] #predictor-root .pr-btn,
html[dir="ltr"] #predictor-root .pr-round-current-name, html[dir="ltr"] #predictor-root .pr-rank,
html[dir="ltr"] #predictor-root .pr-total, html[dir="ltr"] #predictor-root .pr-score-box input {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
#predictor-root ::selection { background: var(--gold); color: #1c1305; }
#predictor-root *:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

@keyframes prFadeUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }
@keyframes prPulseGlow { 0%,100% { filter: drop-shadow(0 0 6px rgba(240,194,94,0.35)); } 50% { filter: drop-shadow(0 0 16px rgba(240,194,94,0.65)); } }
@keyframes prSpin { to { transform: rotate(360deg); } }
@keyframes prBounce { 0%,80%,100% { transform: translateY(0); opacity:.5; } 40% { transform: translateY(-8px); opacity:1; } }
@keyframes prToastIn { from { opacity:0; transform: translate(-50%, 12px); } to { opacity:1; transform: translate(-50%, 0); } }

.pr-wrap { max-width: 780px; margin: 0 auto; }
.pr-center-screen { min-height: 70vh; display:flex; align-items:center; justify-content:center; padding: 10px; }

.pr-boot-screen { display:flex; flex-direction:column; align-items:center; gap:20px; }
.pr-loader { display:flex; gap:8px; }
.pr-loader span { width:12px; height:12px; border-radius:50%; background: var(--gold-bright); animation: prBounce 1.1s infinite ease-in-out; box-shadow: 0 0 10px rgba(240,194,94,0.5); }
.pr-loader span:nth-child(2) { animation-delay: .15s; }
.pr-loader span:nth-child(3) { animation-delay: .3s; }

.pr-login-card { width:100%; max-width: 460px; padding: 34px 28px 28px; text-align:center; position:relative; animation: prFadeUp .5s var(--ease) both; }
.pr-login-crest { margin-bottom: 10px; display:flex; justify-content:center; }
.pr-logo { display:block; }
.pr-logo-lg { height:68px; width:auto; filter: drop-shadow(0 0 14px rgba(217,164,65,0.35)); animation: prPulseGlow 3s ease-in-out infinite; }
.pr-logo-header { height:30px; width:auto; }
.pr-login-card .pr-title { font-size: 27px; margin-bottom: 4px !important; text-align:center; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pr-title-center { display:block; }
.pr-login-sub { text-align:center; margin-bottom: 20px !important; }
.pr-login-card .pr-tabs { margin-bottom: 22px; padding: 7px; }
.pr-login-card .pr-tab { padding: 15px 10px; font-size: 16px; border-radius: 12px; }
.pr-login-card .pr-label { font-size: 14px; margin-bottom: 8px; text-align: start; }
.pr-login-card .pr-input { padding: 15px 16px; font-size: 16px; border-radius: 12px; margin-bottom: 16px; }
.pr-login-card .pr-btn { width:100%; padding: 16px 20px; font-size: 16px; border-radius: 14px; }
.pr-login-card .pr-hint { font-size: 13.5px; margin-top: 10px; }
.pr-login-card .pr-error { font-size: 14px; }

/* Language toggle */
.pr-lang-toggle {
  display:inline-flex; align-items:center; gap:6px; background: rgba(255,255,255,0.06);
  border:1px solid var(--card-border); color: var(--text-dim); border-radius: 999px;
  padding: 7px 14px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:'Tajawal',sans-serif;
  transition: all .18s var(--ease); white-space:nowrap;
}
.pr-lang-toggle:hover { background: var(--gold-soft); color: var(--gold-bright); border-color: var(--gold); transform: translateY(-1px); }
.pr-lang-globe { font-size:13px; }
.pr-lang-toggle-corner { position:absolute; top:16px; inset-inline-end:16px; }

/* Header */
.pr-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom: 22px; flex-wrap: wrap;
  animation: prFadeUp .45s var(--ease) both;
}
.pr-header-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pr-title { font-family:'Cairo', sans-serif; font-weight:800; font-size: 22px; color: var(--gold-bright); letter-spacing:0.2px; }
.pr-title-row { display:flex; align-items:center; gap:10px; }
.pr-title-text { font-family:'Cairo', sans-serif; font-weight:800; font-size: 22px; color: var(--gold-bright); letter-spacing:0.2px; }
.pr-subtitle { flex-basis:100%; font-family:'Tajawal', sans-serif; font-weight:500; font-size:12px; color: var(--text-dim); letter-spacing:0; }
.pr-user-badge {
  display:flex; align-items:center; gap:9px; background: linear-gradient(180deg, var(--card-hi), var(--card));
  border:1px solid var(--card-border); border-radius: 999px; padding:6px 14px 6px 6px; font-size:13px;
  box-shadow: var(--shadow-card);
}
html[dir="ltr"] .pr-user-badge { padding: 6px 6px 6px 14px; }
.pr-user-badge b { color: var(--gold-bright); font-weight:700; }
.pr-logout { background:none; border:none; color: var(--text-dim); cursor:pointer; font-size:12px; text-decoration:underline; padding:0; transition: color .15s; }
.pr-logout:hover { color: var(--red); }
.pr-avatar {
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  background: linear-gradient(145deg, var(--gold-bright), var(--gold)); color:#22190a; font-weight:800; font-size:12.5px;
  font-family:'Tajawal',sans-serif; flex-shrink:0;
}
.pr-avatar-sm { width:22px; height:22px; font-size:11px; }
.pr-avatar-logo {
  background:transparent; object-fit:contain; border-color:transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.65)) drop-shadow(0 0 1px rgba(0,0,0,0.5));
}
.pr-user-badge-trigger {
  display:inline-flex; align-items:center; gap:9px; background:none; border:none;
  padding:0; margin:0; color:inherit; font:inherit; cursor:pointer;
}
.pr-user-badge-trigger:hover .pr-avatar { box-shadow: 0 0 0 2px var(--gold-bright); }

/* Avatar picker modal */
.pr-modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:16px;
  animation: prFadeUp .2s var(--ease) both;
}
.pr-modal-card { max-width:420px; width:100%; max-height:80vh; overflow-y:auto; }
.pr-avatar-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(52px,1fr)); gap:10px; margin-top:12px; }
.pr-avatar-option {
  background: rgba(255,255,255,0.05); border:1.5px solid transparent; border-radius:14px;
  padding:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all .15s var(--ease);
}
.pr-avatar-option:hover { background: rgba(255,255,255,0.1); }
.pr-avatar-option.active { border-color: var(--gold-bright); background: var(--gold-soft); }
.pr-avatar-option img, .pr-avatar-option .pr-avatar { width:36px; height:36px; }
.pr-player-cell { display:inline-flex; align-items:center; gap:8px; vertical-align:middle; }

/* Al-Hanka season predictions */
.pr-hanka-field { margin-bottom: 18px; }
.pr-hanka-field .pr-avatar-grid { margin-top: 8px; }
.pr-hanka-summary-row { padding: 8px 2px; border-bottom: 1px dashed rgba(255,255,255,0.08); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pr-hanka-summary-row:last-of-type { border-bottom: none; }

/* Tabs */
.pr-tabs { display:flex; gap:6px; margin-bottom:20px; background: rgba(0,0,0,0.2); padding:5px; border-radius: 14px; flex-wrap:wrap; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
.pr-tab {
  flex:1; min-width: 90px; text-align:center; padding:11px 8px; border-radius: 10px; cursor:pointer;
  font-weight:600; font-size:13.5px; color: var(--text-dim); border:none; background:transparent;
  transition: all .2s var(--ease); font-family:'Cairo', sans-serif;
}
.pr-tab:hover:not(.active) { color: var(--text); background: rgba(255,255,255,0.05); }
.pr-tab.active { background: linear-gradient(180deg, var(--green-bright), var(--green)); color:#06251a; box-shadow: 0 4px 14px rgba(53,199,120,0.35); transform: translateY(-1px); }

/* Cards */
.pr-card {
  background: linear-gradient(165deg, var(--card-hi), var(--card)); border:1px solid var(--card-border); border-radius: var(--radius);
  padding: 20px; margin-bottom: 16px; position:relative; overflow:hidden; box-shadow: var(--shadow-card);
  animation: prFadeUp .4s var(--ease) both;
}
.pr-card::before {
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, var(--gold), transparent 70%);
}
.pr-section-title { font-weight:400; font-size:16.5px; margin: 0 0 14px; color: var(--gold-bright); display:flex; align-items:center; gap:8px;}

/* Inputs */
.pr-input, .pr-select {
  background: rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.14); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size:16px; font-family:inherit; width:100%;
  transition: border-color .15s, box-shadow .15s;
}
.pr-input::placeholder { color: rgba(159,188,174,0.6); }
.pr-input:focus, .pr-select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
/* Native <select> popups can't render a translucent background, so they fall back to
   white — give the select and its options a solid, on-theme color so the dropdown list
   stays legible instead of showing washed-out light text on white. */
.pr-select { background-color: var(--card); color: var(--text); }
.pr-select option { background-color: var(--card); color: var(--text); }
.pr-label { font-size:12.5px; color: var(--text-dim); margin-bottom:6px; display:block; font-weight:600; }
.pr-btn {
  font-family:'Cairo', sans-serif; font-weight:700; border:none; border-radius: 12px; padding: 11px 20px;
  cursor:pointer; font-size:14px; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color:#22190a;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s;
  box-shadow: var(--shadow-btn);
}
.pr-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.pr-btn:active:not(:disabled) { transform: scale(0.97) translateY(0); }
.pr-btn:disabled { opacity:0.45; cursor:not-allowed; box-shadow:none; }
.pr-btn.ghost { background: transparent; border:1px solid var(--card-border); color: var(--text); box-shadow:none; }
.pr-btn.ghost:hover:not(:disabled) { background: rgba(255,255,255,0.06); border-color: var(--gold); }
.pr-btn.danger { background: linear-gradient(180deg, #ea6a5c, var(--red)); color:#2a0a06; box-shadow: 0 6px 18px -6px rgba(224,87,74,0.45); }
.pr-btn.small { padding:7px 12px; font-size:12.5px; border-radius:9px; }
.pr-error { color:#ff9d90; font-size:13px; margin-top:8px; }
.pr-hint { color: var(--text-dim); font-size:12.5px; margin-top:6px; }

.pr-match-predict { padding: 15px 8px; border-bottom: 1px dashed rgba(255,255,255,0.08); transition: background .15s; border-radius: 10px; }
.pr-match-predict:hover { background: rgba(255,255,255,0.02); }
.pr-match-predict:last-child { border-bottom:none; }
.pr-outcome-row { display:flex; gap:8px; margin-bottom:8px; }
.pr-outcome-btn {
  flex:1; padding: 10px 6px; border-radius: 10px; border:1px solid var(--card-border);
  background: var(--bg-deep); color: var(--text-dim); font-family:'Tajawal', sans-serif; font-weight:600;
  font-size:12px; cursor:pointer; transition: all .18s var(--ease);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; line-height:1.2;
}
.pr-outcome-btn:hover { border-color: var(--gold); color: var(--text); }
.pr-outcome-btn:hover .pr-team-badge { transform: scale(1.06); }
.pr-outcome-btn.active { background: linear-gradient(180deg, var(--green-bright), var(--green)); color:#06251a; border-color: var(--green-bright); box-shadow: 0 4px 12px rgba(53,199,120,0.3); }
.pr-outcome-label { max-width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Team crest badges */
.pr-team-pair { display:inline-flex; align-items:center; gap:6px; vertical-align:middle; }
.pr-match-title { display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; font-weight:700; }
.pr-team-badge {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:22px; height:22px; border-radius:50%;
  background: linear-gradient(145deg, var(--bc2), var(--bc1));
  border: 1.5px solid rgba(255,255,255,0.28);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.3);
  color:#fff; font-size:7.5px; font-weight:800; letter-spacing:0.2px;
  font-family:'Cairo', sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  line-height:1; transition: transform .15s var(--ease);
}
.pr-team-badge-lg { width:32px; height:32px; font-size:10.5px; border-width:2px; }
img.pr-team-badge {
  object-fit: contain; background: transparent; border-color: transparent; box-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.65)) drop-shadow(0 0 1px rgba(0,0,0,0.5));
}
.pr-draw-badge { font-size:13px; }
.pr-team-badge-lg.pr-draw-badge { font-size:16px; }
.pr-exact-toggle { display:flex; align-items:center; gap:8px; font-size:12.5px; color: var(--text-dim); cursor:pointer; }
.pr-exact-toggle input { accent-color: var(--gold); width:16px; height:16px; }

/* Match row (scoreboard style) */
.pr-match {
  display:flex; align-items:center; gap:10px; padding: 15px 6px; border-bottom: 1px dashed rgba(255,255,255,0.08);
  transition: background .15s; flex-wrap: wrap;
}
.pr-match:hover { background: rgba(255,255,255,0.02); }
.pr-match:last-child { border-bottom:none; }
.pr-score-box {
  display:flex; align-items:center; gap:6px; background: var(--bg-deep); border:1px solid var(--card-border);
  border-radius: 10px; padding: 6px 8px;
}
.pr-score-box input {
  width: 34px; text-align:center; background:transparent; border:none; color: var(--gold-bright);
  font-family:'Cairo', sans-serif; font-weight:700; font-size:19px; font-variant-numeric: tabular-nums;
}
.pr-score-box input:focus { outline:none; }
.pr-score-dash { color: var(--text-dim); font-weight:400; }
.pr-score-readonly {
  font-family:'Cairo', sans-serif; font-weight:700; font-size:19px; color: var(--gold-bright);
  font-variant-numeric: tabular-nums; background: var(--bg-deep); border:1px solid var(--card-border);
  border-radius: 10px; padding: 6px 16px; min-width:60px; text-align:center;
}
.pr-match-time { font-size:11px; color: var(--text-dim); }

/* Prediction deadline countdown */
.pr-countdown {
  display:flex; align-items:center; gap:10px; margin-top:10px; padding:9px 12px;
  background: rgba(0,0,0,0.22); border:1px solid var(--card-border); border-radius:12px; flex-wrap:wrap;
}
.pr-countdown-title { font-size:11px; color: var(--text-dim); white-space:nowrap; }
.pr-countdown-units { display:flex; align-items:flex-start; gap:3px; }
.pr-countdown-seg { display:flex; flex-direction:column; align-items:center; }
.pr-countdown-num {
  display:inline-block; font-family:'Cairo', sans-serif; font-weight:800; font-size:14.5px; color: var(--gold-bright);
  font-variant-numeric: tabular-nums; background: var(--bg-deep); border:1px solid var(--card-border);
  border-radius:7px; padding:3px 5px; min-width:24px; text-align:center; line-height:1.1;
  transition: color .2s, border-color .2s;
}
.pr-countdown-unit-label { font-size:8.5px; color: var(--text-dim); margin-top:3px; letter-spacing:0.3px; }
.pr-countdown-sep { color: var(--text-dim); font-weight:700; align-self:center; margin-top:-6px; }
.pr-countdown.urgent .pr-countdown-num { color: #ff9d90; border-color: rgba(224,87,74,0.45); }
.pr-pts-pill {
  font-size:11px; font-weight:400; padding:2px 8px; border-radius:999px; margin-top:4px; display:inline-block;
}
.pr-pts-3 { background: rgba(53,199,120,0.22); color: var(--green-bright); }
.pr-pts-1 { background: rgba(217,164,65,0.22); color: var(--gold-bright); }
.pr-pts-0 { background: rgba(224,87,74,0.18); color: #ff9d90; }

/* Exact-score hit — rarer than a plain correct pick, so it gets its own
   purple-with-a-gold-halo treatment instead of the usual green. */
@keyframes pr-exact-glow {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(240,194,94,0.35), inset 0 0 0 1px rgba(240,194,94,0.35); }
  50% { box-shadow: 0 0 15px 3px rgba(240,194,94,0.75), inset 0 0 0 1px rgba(240,194,94,0.6); }
}
.pr-exact-hit, .pr-pts-exact {
  background: rgba(157,78,221,0.28);
  color: var(--purple-bright);
  animation: pr-exact-glow 2.2s ease-in-out infinite;
}

/* Leaderboard */
.pr-table { width:100%; border-collapse: collapse; font-size:13.5px; }
.pr-table th { text-align:start; color: var(--text-dim); font-weight:600; padding: 8px 6px; font-size:12px; border-bottom:1px solid var(--card-border);}
.pr-table td { padding: 11px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pr-table tbody tr { transition: background .15s; }
.pr-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.pr-rank { font-family:'Cairo', sans-serif; font-weight:800; font-size:16px; }
.pr-row-me { background: rgba(217,164,65,0.09); border-radius:8px; box-shadow: inset 3px 0 0 var(--gold); }
.pr-total { font-family:'Cairo', sans-serif; font-weight:800; color: var(--gold-bright); font-size:15px; }

.pr-empty { text-align:center; padding: 34px 10px; color: var(--text-dim); font-size:13.5px; }
/* Round switcher: ‹ [ current round ▾ ] › — the middle is a native <select> laid
   invisibly over the label, so a tap opens the phone's own picker. */
.pr-round-nav { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.pr-round-step {
  flex:0 0 auto; width:48px; height:52px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--card-border); background:rgba(255,255,255,0.04); color:var(--gold-bright);
  cursor:pointer; transition: all .18s var(--ease); -webkit-tap-highlight-color: transparent;
}
.pr-round-step:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-soft); }
.pr-round-step:active:not(:disabled) { transform: scale(0.94); }
.pr-round-step:disabled { opacity:0.28; cursor:default; }
html[dir="rtl"] #predictor-root .pr-chev { transform: scaleX(-1); }
.pr-round-current {
  position:relative; flex:1 1 auto; min-width:0; height:52px; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color:#22190a;
  box-shadow: var(--shadow-btn); cursor:pointer; overflow:hidden; -webkit-tap-highlight-color: transparent;
}
.pr-round-current:focus-within { outline:2px solid var(--gold-bright); outline-offset:2px; }
.pr-round-current-name { display:inline-flex; align-items:center; gap:6px; font-family:'Cairo', sans-serif; font-weight:800; font-size:16px; line-height:1.25; }
.pr-round-current-sub { font-size:11px; font-weight:700; line-height:1.2; opacity:0.72; }
.pr-round-native {
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  font-size:16px; border:0; -webkit-appearance:none; appearance:none;
}
.pr-round-native option { color:#111; background:#fff; }

.pr-admin-form-row { display:flex; gap:8px; margin-bottom:8px; align-items:center; flex-wrap:wrap; }
.pr-admin-form-row .pr-input { flex:1; min-width:110px; }
.pr-match-draft { border:1px dashed var(--card-border); border-radius:10px; padding:12px; margin-bottom:8px; background: rgba(255,255,255,0.02); }
.pr-postponed-note {
  margin: 4px 0 10px; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.7;
  background: rgba(240,194,94,0.12); border: 1px solid rgba(240,194,94,0.38); color: var(--gold-bright);
}
.pr-postponed-note b { font-weight: 800; }
.pr-postponed-pill {
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; line-height:1.5; white-space:nowrap;
  background: rgba(240,194,94,0.16); border:1px solid rgba(240,194,94,0.45); color: var(--gold-bright);
}
.pr-tag { font-size:11px; padding:2px 8px; border-radius:999px; font-weight:400; }
.pr-tag.postponed { background: rgba(240,194,94,0.2); color: var(--gold-bright); }
.pr-tag.open { background: rgba(53,199,120,0.2); color: var(--green-bright); }
.pr-tag.closed { background: rgba(224,87,74,0.18); color:#ff9d90; }
/* Phosphor icons — img/icons/<name>.svg, rendered as a currentColor mask so
   one export tints correctly wherever it's placed (gold, gray, red, etc.). */
.pr-icon {
  display:inline-block; flex-shrink:0; width:1em; height:1em; vertical-align:-0.15em;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-url); mask-image: var(--icon-url);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.pr-x-btn { background:none; border:none; color: var(--red); cursor:pointer; font-size:18px; padding:10px 12px; margin:-10px -12px; transition: transform .15s; }
.pr-x-btn .pr-icon { width:0.7em; height:0.7em; }
.pr-x-btn:hover { transform: scale(1.2); }
.pr-flex-between { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.pr-teams-list { color: var(--text-dim); font-size:11.5px; margin-top:6px; }

/* Toast */
.pr-toast {
  position:fixed; bottom:20px; left:50%; z-index:9999; padding:13px 22px; border-radius:14px;
  font-family:'Tajawal',sans-serif; font-size:13.5px; font-weight:700; box-shadow:0 10px 30px -6px rgba(0,0,0,0.5);
  opacity:0; pointer-events:none; transform: translate(-50%, 12px); transition: opacity .25s var(--ease), transform .25s var(--ease);
  color:#0c1a12;
}
.pr-toast-show { opacity:1; transform: translate(-50%, 0); animation: prToastIn .25s var(--ease); }
.pr-toast-ok { background: linear-gradient(180deg, #5fe098, #2fbf6b); }
.pr-toast-error { background: linear-gradient(180deg, #f27a6c, #e0574a); color:#2a0a06; }

/* Scrollbars (webkit) */
#predictor-root ::-webkit-scrollbar { height:6px; width:6px; }
#predictor-root ::-webkit-scrollbar-thumb { background: var(--card-border); border-radius:99px; }

@media (max-width: 480px) {
  #predictor-root { padding: 16px 10px 50px; }
  .pr-card { padding:16px; }
  .pr-title, .pr-title-text { font-size:19px; }
}