/* PORRAS_V2_CANONICAL_V113 */
body.porras-v2-mode[data-screen="predictions"] .phone-frame > .mobile-header,
body.porras-v2-mode[data-screen="predictions"] .phone-frame > .bottom-nav[data-global-footer],
body.porras-v2-mode[data-screen="predictions"] #screen-predictions > .module-screen-head,
body.porras-v2-mode[data-screen="predictions"] .module-tabs--predictions {
  display: none !important;
}

body.porras-v2-mode[data-screen="predictions"] #screen-predictions {
  padding: 0 !important;
  overflow: hidden !important;
  background: #f6f0e4;
}

body.porras-v2-mode[data-screen="predictions"] #predictionList {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  height: 100%;
  max-width: none !important;
}

.porras-v2-experience {
  --porras-gold: #c77f00;
  --porras-gold-strong: #a96500;
  --porras-cream: #fbf6eb;
  --porras-card: rgba(255,255,255,.94);
  --porras-line: rgba(117, 91, 52, .18);
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #11100f;
  background:
    linear-gradient(rgba(251,247,238,.91), rgba(251,247,238,.91)),
    var(--porras-v2-bg, url('/assets/community/community-whatsapp-pattern.png')) center / cover fixed;
  overflow: hidden;
  font-family: inherit;
}

.porras-v2-experience button,
.porras-v2-experience input { font: inherit; }
.porras-v2-experience svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.porras-v2-header {
  flex: 0 0 auto;
  padding: 1.05rem 1.2rem .35rem;
  background: linear-gradient(180deg, rgba(251,247,238,.98), rgba(251,247,238,.86));
}

.porras-v2-topbar {
  display: grid;
  grid-template-columns: 3.2rem minmax(0,1fr) auto;
  align-items: center;
  gap: .72rem;
}

.porras-v2-home,
.porras-v2-actions button {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(96,75,44,.16);
  background: rgba(255,255,255,.96);
  color: #111;
  box-shadow: 0 7px 18px rgba(61,43,19,.07);
}

.porras-v2-home { color: var(--porras-gold-strong); }
.porras-v2-home-label {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0;
  color: #080808;
  font-weight: 950;
  font-size: 1.25rem;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.porras-v2-actions { display: flex; gap: .48rem; }
.porras-v2-actions button.is-spinning svg { animation: porras-spin .7s linear infinite; }
@keyframes porras-spin { to { transform: rotate(360deg); } }

.porras-v2-title { margin-top: 1.05rem; }
.porras-v2-title small,
.porras-v2-section-heading small {
  display: block;
  color: #af6e00;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.porras-v2-title h1 {
  margin: .14rem 0 0;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 1000;
}

.porras-v2-content {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .35rem 1.18rem 1.2rem;
  scrollbar-width: none;
}
.porras-v2-content::-webkit-scrollbar { display: none; }

.porras-v2-banner {
  width: 100%;
  aspect-ratio: 3.15 / 1;
  border-radius: 1.15rem;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(47,33,15,.12);
  background: #111;
}
.porras-v2-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.porras-v2-banner--fallback {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1.05rem 1.15rem;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(6,6,7,.97) 0%, rgba(6,6,7,.82) 46%, rgba(6,6,7,.2) 100%),
    var(--porras-banner) center / cover no-repeat;
}
.porras-v2-banner--fallback small { color: #d8951b; font-size: .48rem; font-weight: 900; letter-spacing: .16em; }
.porras-v2-banner--fallback strong { display:block; margin-top:.22rem; font-size:1.5rem; line-height:.82; letter-spacing:-.04em; font-weight:1000; }
.porras-v2-banner--fallback strong span { color: #d8951b; }
.porras-v2-banner--fallback p { margin:.38rem 0 0; font-size:.63rem; line-height:1.2; max-width:11rem; opacity:.93; }

.porras-v2-view { padding-top: 1rem; }
.porras-v2-top-tabs,
.porras-v2-period-tabs {
  display: flex;
  gap: .58rem;
  margin-bottom: 1rem;
}
.porras-v2-top-tabs button,
.porras-v2-period-tabs button {
  min-height: 2.55rem;
  padding: 0 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(110,88,54,.17);
  background: rgba(255,255,255,.93);
  color: #171513;
  font-size: .86rem;
  font-weight: 750;
  box-shadow: 0 3px 10px rgba(55,39,18,.04);
}
.porras-v2-top-tabs button.is-active,
.porras-v2-period-tabs button.is-active {
  border-color: #e3a52e;
  color: #9c5f00;
  background: #fff5da;
  font-weight: 900;
}

.porras-v2-featured {
  border: 1px solid var(--porras-line);
  border-radius: 1.35rem;
  background: var(--porras-card);
  padding: 1.05rem 1rem 1rem;
  box-shadow: 0 9px 25px rgba(59,42,20,.08);
}
.porras-v2-featured-meta {
  text-align: center;
  color: #5f574c;
  font-size: .78rem;
  margin-bottom: .75rem;
}
.porras-v2-matchup {
  display: grid;
  grid-template-columns: minmax(0,1fr) 2.2rem minmax(0,1fr);
  align-items: center;
  gap: .55rem;
}
.porras-v2-team { min-width: 0; text-align: center; display:flex; flex-direction:column; align-items:center; gap:.42rem; }
.porras-v2-team .prediction-team-crest,
.porras-v2-team .football-team-crest,
.porras-v2-team-logo,
.porras-v2-team img {
  width: 4.7rem !important;
  height: 4.7rem !important;
  object-fit: contain;
  flex: 0 0 auto;
}
.porras-v2-team strong { max-width: 100%; font-size:.93rem; line-height:1.08; font-weight:950; }
.porras-v2-vs { text-align:center; font-weight:1000; font-size:1.15rem; }

.porras-v2-featured-form { margin-top: .7rem; }
.porras-v2-featured .prediction-score-card {
  margin: 0;
  border: 0;
  padding: .75rem 0 0;
  background: transparent;
  box-shadow: none;
}
.porras-v2-featured .prediction-score-card__head { justify-content:center; border-top:1px solid rgba(131,102,59,.2); padding-top:.72rem; }
.porras-v2-featured .prediction-score-card__head span { color:#a86600; font-weight:950; font-size:.92rem; }
.porras-v2-featured .prediction-score-card__head strong { display:none; }
.porras-v2-featured .prediction-scoreboard { margin-top:.55rem; gap:.7rem; }
.porras-v2-featured .prediction-score-team { gap:.28rem; }
.porras-v2-featured .prediction-score-team .prediction-team-crest,
.porras-v2-featured .prediction-score-team > strong { display:none !important; }
.porras-v2-featured .prediction-score-team input {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(126,97,54,.2);
  background: #fffdfa;
  text-align: center;
  font-size: 2.15rem;
  font-weight: 1000;
  color: #090909;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.porras-v2-featured .prediction-score-controls { gap:.22rem; }
.porras-v2-featured .prediction-score-controls button { width:1.7rem; height:1.5rem; border-radius:.5rem; }
.porras-v2-featured .prediction-score-divider { font-size:1.3rem; font-weight:950; }
.porras-v2-featured .prediction-score-card > p { margin:.55rem 0 .7rem; color:#786e61; font-size:.7rem; text-align:center; }
.porras-v2-featured .prediction-score-card .primary-action {
  min-height: 3.05rem;
  width: 100%;
  border-radius: .9rem;
  border: 0;
  background: linear-gradient(180deg,#d59410,#bd7600);
  color: #fff;
  font-weight: 950;
  font-size: .95rem;
  box-shadow: 0 5px 12px rgba(164,99,0,.18);
}
.porras-v2-countdown {
  margin-top: .7rem;
  min-height: 2.65rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  border-radius:.8rem;
  color:#645847;
  background:#fbf6ec;
  font-size:.82rem;
}
.porras-v2-countdown svg { width:1.15rem;height:1.15rem;color:#b57100; }
.porras-v2-saved { margin-top:.55rem; text-align:center; color:#267f49; font-size:.78rem; }

.porras-v2-section-title { margin: 1rem .1rem .55rem; font-size:1rem; font-weight:950; }
.porras-v2-section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin:.25rem 0 .85rem; }
.porras-v2-section-heading h2 { margin:.13rem 0 0; font-size:1.34rem; font-weight:1000; letter-spacing:-.035em; }
.porras-v2-section-heading > span { color:#887d6e; font-size:.72rem; white-space:nowrap; }

.porras-v2-list { display:grid; gap:.62rem; }
.porras-v2-compact {
  display:grid;
  grid-template-columns: 7.2rem minmax(0,1fr) auto;
  align-items:center;
  gap:.6rem;
  min-height: 6rem;
  padding: .75rem .75rem;
  border-radius:1.2rem;
  border:1px solid var(--porras-line);
  background:var(--porras-card);
  box-shadow:0 6px 16px rgba(57,39,17,.055);
}
.porras-v2-compact-crests { display:grid; grid-template-columns:2.65rem 1.25rem 2.65rem; align-items:center; justify-content:center; gap:.12rem; }
.porras-v2-compact-crests .prediction-team-crest,
.porras-v2-compact-crests .football-team-crest,
.porras-v2-compact-crests img { width:2.55rem!important;height:2.55rem!important;object-fit:contain; }
.porras-v2-compact-crests > span { text-align:center;font-size:.72rem;font-weight:900;color:#514b43; }
.porras-v2-compact-copy { min-width:0; display:flex; flex-direction:column; gap:.18rem; }
.porras-v2-compact-copy > strong { font-size:.86rem; line-height:1.08; font-weight:950; }
.porras-v2-compact-copy > span { color:#766d62; font-size:.69rem; line-height:1.2; }
.porras-v2-compact-copy > small { color:#7f7569;font-size:.7rem; }
.porras-v2-compact-copy > small b { color:#b16b00;font-size:.78rem; }
.porras-v2-compact-side { display:flex; align-items:center; gap:.25rem; }
.porras-v2-compact-side small { max-width:5.1rem; text-align:right;color:#9a6b1d;font-size:.65rem;line-height:1.2; }
.porras-v2-compact-side > strong { white-space:nowrap;font-size:.8rem;color:#555; }
.porras-v2-compact-side > strong.is-points { color:#169343; }
.porras-v2-compact-side svg { width:1.05rem;height:1.05rem;color:#635a50; }

.porras-v2-empty {
  padding:2.3rem 1.25rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.4rem;
  border:1px solid var(--porras-line);
  border-radius:1.2rem;
  background:rgba(255,255,255,.84);
  color:#777064;
}
.porras-v2-empty > span { font-size:1.8rem; }
.porras-v2-empty strong { color:#191817;font-size:.95rem; }
.porras-v2-empty p { margin:0;max-width:18rem;font-size:.76rem;line-height:1.4; }
.porras-v2-empty button { margin-top:.5rem;border:0;border-radius:.75rem;padding:.72rem 1rem;background:#c47d00;color:#fff;font-weight:850; }
.porras-v2-empty.is-small { padding:1.4rem; }

.porras-v2-period-tabs { margin-top:0; }
.porras-v2-podium {
  display:grid;
  grid-template-columns:1fr 1.12fr 1fr;
  align-items:end;
  min-height:12rem;
  overflow:hidden;
  border:1px solid var(--porras-line);
  border-radius:1.3rem;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 22px rgba(59,42,20,.07);
}
.porras-v2-podium-item {
  position:relative;
  min-width:0;
  padding:1rem .35rem .85rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.25rem;
  text-align:center;
}
.porras-v2-podium-item.is-1 {
  min-height:11.6rem;
  justify-content:center;
  background:linear-gradient(180deg,#fff 0%,#fff9e8 100%);
  border-left:1px solid rgba(183,119,0,.12);
  border-right:1px solid rgba(183,119,0,.12);
}
.porras-v2-medal {
  width:1.8rem;height:1.8rem;border-radius:999px;display:grid;place-items:center;
  background:#ece8e1;color:#5c544a;font-weight:1000;font-size:.82rem;
}
.porras-v2-podium-item.is-1 .porras-v2-medal { background:linear-gradient(#e9b438,#b96f00);color:#fff;box-shadow:0 2px 6px rgba(174,104,0,.25); }
.porras-v2-podium-item.is-2 .porras-v2-medal { background:#c8c8c8;color:#fff; }
.porras-v2-podium-item.is-3 .porras-v2-medal { background:#b97b50;color:#fff; }
.porras-v2-avatar {
  width:2.35rem;height:2.35rem;border-radius:999px;display:grid;place-items:center;overflow:hidden;
  border:1px solid rgba(191,124,0,.5);background:#fff7e4;color:#9c5d00;font-weight:900;font-size:.72rem;
}
.porras-v2-avatar.is-large { width:3.25rem;height:3.25rem; }
.porras-v2-avatar img { width:100%;height:100%;object-fit:cover; }
.porras-v2-podium-item > strong { max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem; }
.porras-v2-podium-item > b { padding:.22rem .55rem;border-radius:999px;background:#f4f0e9;font-size:.72rem; }
.porras-v2-podium-item.is-1 > b { background:#c47b00;color:#fff; }

.porras-v2-my-position {
  margin-top:.72rem;
  padding:.85rem .95rem;
  border:1px solid var(--porras-line);
  border-radius:1.05rem;
  background:rgba(255,255,255,.95);
}
.porras-v2-my-position > span { color:#a96500;font-size:.72rem;font-weight:900; }
.porras-v2-my-position > div { margin-top:.45rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.6rem; }
.porras-v2-my-position strong { font-size:.88rem; }
.porras-v2-my-position b { font-size:.82rem; }

.porras-v2-ranking-list { margin-top:.72rem;border:1px solid var(--porras-line);border-radius:1.05rem;background:rgba(255,255,255,.95);overflow:hidden; }
.porras-v2-ranking-list > div { min-height:3.55rem;display:grid;grid-template-columns:1.55rem 2.15rem minmax(0,1fr) auto;align-items:center;gap:.45rem;padding:.45rem .7rem;border-bottom:1px solid rgba(118,92,54,.1); }
.porras-v2-ranking-list > div:last-child { border-bottom:0; }
.porras-v2-ranking-list > div > b { font-size:.9rem;text-align:center; }
.porras-v2-ranking-list > div > strong { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem; }
.porras-v2-ranking-list > div > span { font-size:.78rem;font-weight:900; }

.porras-v2-prizes { margin-top:1rem; }
.porras-v2-prize-list { display:grid;gap:.48rem; }
.porras-v2-prize-list > div { display:grid;grid-template-columns:2.3rem minmax(0,1fr);align-items:start;gap:.55rem;padding:.7rem .8rem;border:1px solid var(--porras-line);border-radius:.9rem;background:rgba(255,255,255,.9); }
.porras-v2-prize-list > div > b { color:#a76500; }
.porras-v2-prize-list span { display:flex;flex-direction:column;gap:.12rem; }
.porras-v2-prize-list strong { font-size:.78rem; }
.porras-v2-prize-list small { color:#777064;font-size:.68rem; }

.porras-v2-profile {
  display:flex;align-items:center;gap:.9rem;padding:1rem;border:1px solid var(--porras-line);border-radius:1.15rem;background:rgba(255,255,255,.94);box-shadow:0 7px 18px rgba(56,38,16,.06);
}
.porras-v2-profile-avatar { width:4rem;height:4rem;border-radius:999px;display:grid;place-items:center;border:1.5px solid #bd7800;background:#fff8e7;color:#111;font-size:1.5rem;font-weight:1000; }
.porras-v2-profile > div:last-child { display:flex;flex-direction:column; }
.porras-v2-profile strong { font-size:1.2rem; }
.porras-v2-profile span { color:#796f62;font-size:.8rem; }
.porras-v2-stats {
  margin-top:.72rem;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--porras-line);border-radius:1.05rem;background:rgba(255,255,255,.95);overflow:hidden;
}
.porras-v2-stats > div { min-width:0;padding:.8rem .25rem;text-align:center;border-right:1px solid rgba(118,92,54,.12); }
.porras-v2-stats > div:last-child { border-right:0; }
.porras-v2-stats span { display:block;color:#786f63;font-size:.62rem; }
.porras-v2-stats strong { display:block;margin-top:.15rem;font-size:1.05rem; }

.porras-v2-footer {
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.3rem;
  padding:.45rem .72rem calc(.45rem + env(safe-area-inset-bottom));
  border-top:1px solid rgba(94,72,42,.12);
  background:rgba(255,255,255,.98);
  box-shadow:0 -6px 18px rgba(48,34,18,.04);
  z-index:10;
}
.porras-v2-footer button {
  min-height:4.3rem;
  border:0;
  border-radius:1.15rem;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.2rem;
  color:#4e493f;
}
.porras-v2-footer button.is-active { background:#fff0c8;color:#a56300; }
.porras-v2-footer button svg { width:1.45rem;height:1.45rem; }
.porras-v2-footer button span { font-size:.68rem;font-weight:900; }

@media (max-width: 390px) {
  .porras-v2-header { padding-inline:.9rem; }
  .porras-v2-content { padding-inline:.9rem; }
  .porras-v2-topbar { grid-template-columns:2.9rem minmax(0,1fr) auto;gap:.55rem; }
  .porras-v2-home,.porras-v2-actions button { width:2.9rem;height:2.9rem; }
  .porras-v2-home-label { font-size:1.1rem; }
  .porras-v2-actions { gap:.3rem; }
  .porras-v2-compact { grid-template-columns:6.6rem minmax(0,1fr) auto; }
  .porras-v2-banner--fallback strong { font-size:1.25rem; }
}

@media (min-width: 720px) {
  body:not(.desktop-phone-preview) .porras-v2-content,
  body:not(.desktop-phone-preview) .porras-v2-header,
  body:not(.desktop-phone-preview) .porras-v2-footer { width:min(100%, 760px);margin-inline:auto; }
}